/* =====================================================================
   下層ページ（contact / privacy）共通のCSS
   ---------------------------------------------------------------------
   ・TOP（index.html）は1ファイル完結のまま。ここはTOPから読み込まない。
   ・ヘッダー／SPメニュー／フッター／見出し（.sechead）は index.html の
     同名クラスと同じ値を写してある。TOPの見た目を変えた時は、ここも合わせること
     （逆にここだけ変えるとTOPとずれる）。
   ・ブレイクポイントは TOP と同じ 4段（〜767 / 768〜1023 / 1024〜1255 / 1256〜）。
   ===================================================================== */
:root{
  --navy:#2c3a55;
  --field:#f9f8f6;       /* 入力欄の地色（白だと強すぎるため） */
  --pink:#d99a97;
  --pink-d:#b5615d;      /* 文字に使う時のピンク（--pink は文字には薄すぎる） */
  --err:#b8463f;         /* エラー表示 */
  --gray:#d9d9d9;
  --line:#c9cdd6; --line-l:#dcdfe4;
  --bg:#f4f2ee;
  --en:Marcellus, Georgia, serif;
  --jp:"Zen Old Mincho", Georgia, serif;
  --gutter:120px;
  --max:1440px;
  --hd:76px;
  --sec:78px;
  --col:1200px;          /* 本文・フォームの幅。TOPのNews欄（.wrap の中身＝1200px）と揃える */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
.sbar{position:fixed;right:5px;width:3px;border-radius:3px;background:rgba(44,58,85,.32);
  z-index:200;opacity:0;transition:opacity .5s ease;pointer-events:none}
.sbar.on{opacity:1}
body{
  background:var(--bg);color:var(--navy);font-family:var(--jp);
  font-size:16px;line-height:1.8;letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.col{max-width:var(--col);margin:0 auto}
.br-sp{display:none}   /* SPだけで改行 */
.nw{white-space:nowrap}   /* 途中で折り返さない語句 */
/* ※ text-wrap:pretty は使わない。iOS Safari は段落全体の行長をそろえにかかり、
     各行が右端よりかなり手前で折り返されてしまう（10月2日、完了ページの白枠で発生） */
.br-xs{display:none}   /* 360px未満だけで改行（1行に収まらない行の逃がし） */

/* ============ HEADER（TOPと同じ。下層は最初から地色あり） ============ */
header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--hd);padding:0 48px;
  background:rgba(244,242,238,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(44,58,85,.08);
}
.logo{display:block;width:186px}
.logo img{width:100%;height:auto}
nav.gnav{display:flex;align-items:center;font-family:var(--en);font-size:13px;letter-spacing:2px}
nav.gnav a{position:relative;padding:0 2px;transition:opacity .25s}
nav.gnav a::after{content:"";position:absolute;left:2px;right:2px;bottom:-6px;height:1px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}
nav.gnav a:hover::after,nav.gnav a[aria-current]::after{transform:scaleX(1)}
nav.gnav .sep{padding:0 12px;opacity:.45}
.util{display:flex;align-items:center;gap:14px;font-family:var(--en);font-size:14px;letter-spacing:2px}
.util a{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(44,58,85,.15);border-radius:50px;padding:8px 16px;line-height:1;transition:opacity .25s}
.util a:hover{opacity:.55}
.util svg{width:16px;height:16px;flex:none}
.menu-btn{display:none}
.spmenu{display:none}

/* ============ ページ見出し（TOPの .sechead.center と同じ組み） ============ */
.page{padding:calc(var(--hd) + 110px) 0 calc(var(--sec) * 1.6)}
.sechead{margin-bottom:64px;text-align:center}
.sechead .jp{font-size:18px;letter-spacing:.13em;margin-bottom:8px}
.sechead .en{display:block;font-family:var(--en);font-size:92px;font-weight:400;line-height:1;letter-spacing:.01em}
.sechead .rule{width:44px;height:1px;background:var(--pink);margin:30px auto 0}
/* THANKS♡ のハート。Marcellus に♡が無いため、和文書体の♡を使う */
.sechead .en .heart{font-family:var(--jp);font-weight:400;margin-left:.04em}
.lead{text-align:center;font-size:15px;line-height:2.1;margin-bottom:56px}

/* ============ ボタン（TOPの丸いピル型を踏襲） ============ */
.btns{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:64px}
.btn{
  -webkit-appearance:none;appearance:none;   /* Safari の button の既定スタイルを消す */
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-width:300px;height:62px;padding:0 40px;border-radius:50px;
  background:var(--navy);color:#fff;border:1px solid var(--navy);
  font-family:var(--jp);font-size:15px;letter-spacing:.12em;cursor:pointer;
  transition:opacity .3s ease, gap .3s ease;
}
.btn:hover{opacity:.82;gap:18px}
.btn .arw{font-family:var(--en);font-size:16px;letter-spacing:0}
.btn--line{background:transparent;color:var(--navy);border-color:rgba(44,58,85,.35)}
.btn--line:hover{opacity:1;background:rgba(255,255,255,.6)}
.btn[disabled]{opacity:.45;cursor:default}
.textlink{-webkit-appearance:none;appearance:none;padding:0;font-size:14px;border-bottom:1px solid currentColor;padding-bottom:2px;background:none;border-top:0;border-left:0;border-right:0;color:var(--navy);font-family:var(--jp);letter-spacing:.08em;cursor:pointer}
.textlink:hover{opacity:.6}

/* ============ フォーム（行の組みは TOPの News 欄：上下の罫線＋左に見出し） ============ */
.form-note{font-size:12px;text-align:right;margin-bottom:14px}
.req{display:inline-block;font-size:11px;line-height:1;letter-spacing:.08em;color:var(--pink-d);
  border:1px solid var(--pink);border-radius:40px;padding:4px 9px 5px;margin-left:10px;vertical-align:2px}
/* 区切り線は一旦なし（10月2日）。戻す時は .rows に border-top、.row に border-bottom:1px solid var(--line) を足し、padding を 30px 0 に */
.row{display:grid;grid-template-columns:230px 1fr;gap:0 40px;align-items:start;padding:20px 0}
.row > .lbl{padding-top:18px;font-size:15px;letter-spacing:.08em}   /* 入力欄64pxの中央に揃える */
.row--area > .lbl{padding-top:18px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%;font-family:var(--jp);font-size:16px;letter-spacing:.06em;color:var(--navy);
  background:var(--field);border:1px solid var(--line);border-radius:10px;
  padding:0 18px;height:64px;outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field textarea{height:260px;padding:16px 18px;line-height:1.9;resize:vertical}
.field ::placeholder{color:#a3a8b3;opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(44,58,85,.08)}
.select{position:relative}
.select::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;
  border-right:1px solid var(--navy);border-bottom:1px solid var(--navy);transform:rotate(45deg);pointer-events:none}
.field select:invalid,.field select.empty{color:#a3a8b3}
.err{display:none;margin-top:10px;font-size:13px;line-height:1.6;color:var(--err)}
.row.is-err .err{display:block}
.row.is-err input,.row.is-err select,.row.is-err textarea{border-color:var(--err);background:#fffafa}
.errbox{display:none;margin-bottom:28px;padding:18px 22px;border-radius:10px;background:#f9e9e7;color:var(--err);font-size:14px;line-height:1.8;text-align:center}
.errbox.on{display:block}
.agree{margin-top:44px;text-align:center}
.check{display:inline-flex;align-items:center;gap:12px;font-size:15px;cursor:pointer}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .box{width:22px;height:22px;flex:none;border:1px solid var(--line);border-radius:5px;background:var(--field);position:relative;transition:border-color .2s}
.check input:checked + .box{background:var(--navy);border-color:var(--navy)}
.check input:checked + .box::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg)}
.check input:focus-visible + .box{box-shadow:0 0 0 3px rgba(44,58,85,.15)}
.check a{border-bottom:1px solid currentColor}
.agree.is-err .box{border-color:var(--err)}
.agree .err{text-align:center}
.agree.is-err .err{display:block}
/* イタズラ防止の罠の欄。人には見えず、Tabでも到達しない（tabindex=-1） */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 確認画面 */
.confirm .row > .lbl{padding-top:0}
.confirm .row{padding:16px 0}
.confirm .val{font-size:16px;line-height:1.9;white-space:pre-wrap;word-break:break-all}
.confirm .val.empty{color:#a3a8b3}
[hidden]{display:none !important}

/* ============ 完了ページ ============ */
.done{text-align:center;font-size:16px;line-height:2.2}
.mailnote{max-width:560px;margin:48px auto 0;padding:24px 28px;border-radius:10px;background:rgba(255,255,255,.6);font-size:13px;line-height:1.9;text-align:left;color:rgba(44,58,85,.85)}

/* ============ プライバシーポリシー（本文） ============ */
.doc{font-size:15px;line-height:2.1}
.doc > p.intro{margin-bottom:56px}
.doc section{padding:40px 0;border-top:1px solid var(--line)}
.doc section:last-of-type{border-bottom:1px solid var(--line)}
.doc h2{font-size:18px;font-weight:500;letter-spacing:.1em;margin-bottom:16px}
.doc h2 .no{font-family:var(--en);font-weight:400;margin-right:14px;color:var(--pink-d)}
.doc ul{list-style:none;margin-top:8px}
.doc li{padding-left:1.2em;text-indent:-1.2em}
.doc li::before{content:"・"}
.doc a{border-bottom:1px solid currentColor}
/* お問い合わせ窓口の「見出し：内容」。見出しの列幅は一番長い「代表社員」に合わせ、
   「：」は内容側の頭に置く（＝全行で「：」の位置がそろい、内容が折り返しても頭がそろう） */
.doc .info{display:grid;grid-template-columns:max-content 1fr}
.doc .info dt{white-space:nowrap}
.doc .info dd{position:relative;padding-left:1.1em}
.doc .info dd::before{content:"：";position:absolute;left:0}
.doc .info-note{margin-top:2.1em}   /* 1行分あける（本文の行間 2.1 と同じ） */
.doc .date{margin-top:40px;text-align:right;font-size:13px}

/* ============ フッター上のビジュアル（TOPと同じ。枠は動かさず中の画だけを流す） ============ */
.f-hero{width:100vw;height:420px;overflow:hidden}
.f-hero img{width:100%;height:150%;object-fit:cover;transform:translateY(var(--fy,0px));will-change:transform}

/* ============ FOOTER（TOPと同じ） ============ */
footer{padding:90px 48px 40px;text-align:center}
.f-logo{width:300px;margin:0 auto}
.f-util{display:flex;justify-content:center;gap:14px;margin-top:34px;font-family:var(--en);font-size:14px;letter-spacing:2px}
.f-util a{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(44,58,85,.15);border-radius:50px;padding:10px 22px;line-height:1}
.f-util svg{width:16px;height:16px}
.f-nav{display:flex;justify-content:center;flex-wrap:wrap;margin-top:46px;font-family:var(--en);font-size:14px;letter-spacing:3px;line-height:2.8}
.f-nav .sep{padding:0 12px;opacity:.4}
.f-sub{margin-top:30px;font-size:12px;letter-spacing:.1em}
.f-sub a{border-bottom:1px solid rgba(44,58,85,.35);padding-bottom:1px}
.f-copy{margin-top:40px;font-family:var(--en);font-size:12px;letter-spacing:1px;opacity:.55}

/* reveal（TOPと同じ） */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}

/* ===================== 1024〜1255px（TOPと同じ詰め方） ===================== */
@media (min-width:1024px) and (max-width:1255px){
  :root{--gutter:48px;--sec:64px}
  .sechead .en{font-size:72px}
  header{padding:0 32px}
  .logo{width:150px;flex:none}
  nav.gnav{font-size:12px;letter-spacing:1.2px;flex:none}
  nav.gnav .sep{padding:0 8px}
  .util{font-size:12px;flex:none}
  .util a{padding:7px 13px}
}
@media (max-width:1255px){
  header{background:#f4f2ee;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ===================== 〜1023px（SP・タブレット縦） ===================== */
@media (max-width:1023px){
  :root{--gutter:24px;--hd:60px;--sec:56px}
  body{line-height:1.9}
  html.lock{overflow:hidden}
  .br-sp{display:inline}
  .br-pc{display:none}   /* PCだけで改行（SPでは続けて流す） */
  header{padding:0 20px}
  .logo{width:148px}
  nav.gnav,.util{display:none}
  .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:7px;
    width:44px;height:44px;margin-right:-10px;padding:0 10px;background:none;border:0;cursor:pointer}
  .menu-btn span{display:block;height:1px;background:var(--navy);transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .menu-btn.on span:nth-child(1){transform:translateY(4px) rotate(28deg)}
  .menu-btn.on span:nth-child(2){transform:translateY(-4px) rotate(-28deg)}
  .spmenu{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
    justify-content:safe center;   /* 画面が低くて収まらない時は上が切れないようにする */
    position:fixed;inset:0;z-index:99;background:#f4f2ee;
    /* ヘッダーの下の領域で上下中央に置く（全画面の中央だとヘッダーに近づきすぎる） */
    padding:var(--hd) 0 0;overflow-y:auto;
    font-family:var(--en);font-size:18px;letter-spacing:.22em;
    /* TOPと同じ：visibility も切り替える（閉じているのにTabでたどれないように） */
    opacity:0;pointer-events:none;visibility:hidden;transition:opacity .45s ease, visibility .45s ease;
  }
  .spmenu.on{opacity:1;pointer-events:auto;visibility:visible}
  .spmenu__ig{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
    border:1px solid rgba(44,58,85,.15);border-radius:50px;padding:10px 22px;font-size:13px}
  .spmenu__ig svg{width:16px;height:16px}

  .page{padding:calc(var(--hd) + 64px) 0 calc(var(--sec) * 1.5)}
  .sechead{margin-bottom:40px}
  .sechead .jp{font-size:14px}
  .sechead .en{font-size:48px}
  .sechead .rule{margin-top:20px}
  .lead{font-size:14px;line-height:2;margin-bottom:40px}

  /* フォームは見出しを上、入力欄を下に積む（News欄のSPと同じ考え方） */
  .row{grid-template-columns:1fr;gap:10px 0;padding:12px 0}
  .row > .lbl{padding-top:0;font-size:14px}
  .field textarea{height:220px}
  .agree{margin-top:36px}
  .check{font-size:14px;text-align:left}
  .btns{margin-top:44px}
  .btn{min-width:0;width:100%;max-width:340px;height:58px;font-size:14px}
  .errbox{text-align:left;font-size:13px}

  .done{font-size:14px;line-height:2.1}
  .mailnote{margin-top:36px;padding:20px 20px;font-size:12px}

  .doc{font-size:14px;line-height:2}
  .doc > p.intro{margin-bottom:40px}
  .doc section{padding:30px 0}
  .doc h2{font-size:16px;margin-bottom:12px}
  .doc .info-note{margin-top:2em}   /* SPの行間 2 に合わせて1行分 */

  .f-hero{height:220px}
  footer{padding:56px 20px 32px}
  .f-logo{width:200px}
  .f-util{margin-top:24px}
  .f-nav{margin-top:32px;font-size:12px;letter-spacing:2px;line-height:2.4}
  .f-nav .sep{padding:0 8px}
  .f-sub{margin-top:24px;font-size:11px}
  .f-copy{margin-top:32px;font-size:10px}
}
/* 背の低い画面（iPhone SE 初代など）ではメニューの間隔を詰める。収まらない時はメニュー内をスクロール */
@media (max-width:1023px) and (max-height:620px){ .spmenu{gap:12px} }

/* ===================== 〜767px（スマホ） ===================== */
@media (max-width:767px){
  .lead{text-align:left}   /* TOPのSPと同じく左揃え。PC・タブレットは中央揃え */
  .done{text-align:left}   /* 完了ページの文章も同じ */
}
@media (max-width:359px){
  .br-xs{display:inline}
}

/* ===================== 768〜1023px（タブレット縦：組版だけ引き上げ） ===================== */
@media (min-width:768px) and (max-width:1023px){
  :root{--gutter:56px;--sec:72px}
  header{padding:0 40px}
  .logo{width:180px}
  .spmenu{font-size:22px;gap:32px}
  .sechead .en{font-size:64px}
  .sechead .jp{font-size:16px}
  .br-sp{display:none}
  .br-pc{display:inline}   /* タブレット縦は列が広いのでPCと同じ改行 */
  .row{grid-template-columns:180px 1fr;gap:0 28px}
  .row > .lbl{padding-top:18px}
  .confirm .row > .lbl{padding-top:0}
  .f-hero{height:320px}
  .f-nav{font-size:13px}
}