@charset "utf-8";
/* =========================================================================
   faq.css — よくあるご質問ページ（/faq/）固有スタイル
   共通（ヘッダー/フッター/CTA赤帯/パンくず/色変数/タイポ/基準線）は common.css。
   アコーディオンはネイティブ <details>/<summary>（開閉JS不要）。
   ========================================================================= */

html{ scroll-behavior:smooth }

/* ============ 01 ページヒーロー（生成り） ============ */
.phero{ position:relative; background:var(--cream); color:#000; padding:80px 0 60px; border-bottom:2px solid #000; overflow:hidden }
.phero-qmark{ position:absolute; font-family:var(--en); font-weight:900; color:var(--red); opacity:.12; pointer-events:none; user-select:none; line-height:.85 }
.phero-qmark.q1{ left:60%; top:8%; font-size:120px; transform:rotate(-12deg) }
.phero-qmark.q2{ left:78%; top:30%; font-size:80px; transform:rotate(8deg); opacity:.18 }
.phero-qmark.q3{ left:52%; top:62%; font-size:64px; transform:rotate(-6deg); opacity:.15 }
.phero-inner{ position:relative; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:grid; grid-template-columns:1.4fr .9fr; gap:32px; align-items:end }
.phero-text{ padding-top:24px; z-index:2 }
.phero-text .eyebrow{ color:var(--red); opacity:1 }
.phero-text h1{ font-family:var(--jp); font-weight:900; font-size:clamp(60px,8.5vw,140px); line-height:.9; letter-spacing:-0.04em; margin:24px 0 16px; text-wrap:balance; color:#000 }
.phero-text h1 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.3em; opacity:.4 }
.phero-text p{ font-size:17px; line-height:1.85; max-width:42ch; margin:0; opacity:.85 }
.phero-mascot{ display:flex; justify-content:flex-end; align-items:flex-end; position:relative; z-index:2 }
.phero-mascot img{ height:380px; width:auto; filter:drop-shadow(0 10px 0 rgba(0,0,0,0.15)) }

/* ============ 02 カテゴリナビ（黒・スティッキー） ============ */
.catnav-wrap{ background:#000; color:#fff; border-bottom:2px solid #000; position:sticky; top:var(--header-h); z-index:20 }
.catnav{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:stretch; gap:0; overflow-x:auto }
.catnav::-webkit-scrollbar{ display:none }
.catbtn{ display:inline-flex; align-items:center; gap:14px; padding:22px 28px; font-family:var(--jp); font-weight:900; font-size:16px; letter-spacing:-0.01em; border:none; background:transparent; color:rgba(255,255,255,0.6); cursor:pointer; position:relative; transition:color .15s ease,background .15s ease; white-space:nowrap; text-decoration:none }
.catbtn:hover{ color:#fff; background:rgba(255,255,255,0.06) }
.catbtn.is-active{ color:#fff; background:var(--red) }
.catbtn .cat-en{ font-family:var(--en); font-weight:800; font-size:11px; letter-spacing:.18em; display:block; opacity:.6; margin-bottom:2px }
.catbtn.is-active .cat-en{ opacity:.9 }
.catbtn .label-wrap{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.05 }

/* ============ 03 カテゴリセクション ============ */
.section{ padding:120px 0; border-bottom:2px solid #000; scroll-margin-top:140px }
.section--cream{ background:var(--cream); color:#000 }
.section--white{ background:#fff; color:#000 }
/* FAQ本文は行長1100pxに制限（センター寄せ）。共通 .read と同方式 */
.sec-head{
  --read:1100px;
  width: min(var(--read), calc(100% - 2 * var(--gutter)));
  margin:0 auto 56px;
  display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:flex-end;
}
.sec-num{ font-family:var(--en); font-weight:900; font-size:clamp(72px,9vw,140px); line-height:.85; letter-spacing:-0.04em; color:var(--red); text-shadow:5px 5px 0 #000 }
.sec-num small{ display:block; font-family:var(--mono); font-size:13px; letter-spacing:.18em; color:#000; font-weight:400; text-shadow:none; margin-bottom:8px; opacity:.55 }
.sec-title{ display:flex; flex-direction:column; gap:12px }
.sec-title .eyebrow{ color:var(--red); opacity:1 }
.sec-title h2{ font-family:var(--jp); font-weight:900; font-size:clamp(36px,4.6vw,72px); line-height:1.05; letter-spacing:-0.03em; margin:0; text-wrap:balance }
.sec-title h2 .en{ font-family:var(--en); font-weight:900; font-size:.55em; margin-right:.4em; opacity:.4 }

/* アコーディオン（ネイティブ details） */
.qa-list{
  --read:1100px;
  width: min(var(--read), calc(100% - 2 * var(--gutter)));
  margin-inline:auto;
  display:flex; flex-direction:column; gap:0; border-top:2px solid #000;
}
details.qa{ border-bottom:2px solid #000; background:transparent; transition:background .2s }
details.qa[open]{ background:#fff }
.section--white details.qa[open]{ background:var(--cream) }
details.qa summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:flex-start;
  padding:28px 8px; position:relative; transition:padding-left .2s ease;
}
details.qa summary::-webkit-details-marker{ display:none }
details.qa summary:hover{ padding-left:24px }
details.qa[open] summary{ padding-left:24px }
.q-mark{ font-family:var(--en); font-weight:900; font-size:36px; line-height:1; color:var(--red); letter-spacing:-0.02em; display:flex; align-items:flex-start; transform:translateY(-4px); min-width:80px }
.q-text{ font-family:var(--jp); font-weight:900; font-size:clamp(18px,1.6vw,22px); line-height:1.55; letter-spacing:-0.01em; margin:0; padding-top:4px; text-wrap:pretty }
.q-toggle{ align-self:flex-start; margin-top:6px; width:40px; height:40px; border:2px solid #000; background:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:var(--en); font-weight:900; font-size:24px; line-height:1; transition:background .15s,color .15s,transform .15s; flex:0 0 40px }
details.qa[open] .q-toggle{ background:var(--red); color:#fff; border-color:#000; transform:rotate(45deg) }
details.qa summary:hover .q-toggle{ background:#000; color:#fff }
details.qa[open] summary:hover .q-toggle{ background:var(--red) }
.a-wrap{ display:grid; grid-template-columns:auto 1fr; gap:24px; padding:0 8px 32px 32px; animation:slideDown .25s ease-out }
@keyframes slideDown{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)} }
.a-mark{ font-family:var(--en); font-weight:900; font-size:18px; line-height:1; color:var(--red); letter-spacing:.05em; padding-top:4px; min-width:56px }
.a-text{ font-family:var(--jp); font-weight:500; font-size:16px; line-height:1.95; letter-spacing:.01em; margin:0; max-width:60ch; text-wrap:pretty }
.a-text + .a-text{ margin-top:1em }

/* ============ 04 解決しない場合（黒） ============ */
.notfound{ background:#000; color:#fff; padding:120px 0; border-bottom:2px solid #000; position:relative; overflow:hidden }
.notfound-bg{ position:absolute; right:-2%; top:-20%; font-family:var(--en); font-weight:900; font-size:clamp(220px,28vw,460px); color:rgba(248,39,79,0.10); line-height:.85; letter-spacing:-0.04em; pointer-events:none; white-space:nowrap; user-select:none }
.notfound-inner{ --read:1100px; width:min(var(--read), calc(100% - 2 * var(--gutter))); margin-inline:auto; position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center }
.notfound .eyebrow{ color:var(--red); opacity:1 }
.notfound h2{ font-family:var(--jp); font-weight:900; font-size:clamp(36px,4.8vw,72px); line-height:1.1; letter-spacing:-0.03em; margin:16px 0 0; text-wrap:balance; text-shadow:4px 4px 0 var(--red) }
.notfound h2 em{ font-style:normal; color:var(--red); text-shadow:none }
.notfound p{ font-size:17px; line-height:1.85; max-width:38ch; margin:24px 0 0; opacity:.85 }
.notfound .cta--lg{ font-size:20px; padding:22px 32px; background:var(--red); color:#fff; border-color:#000; box-shadow:6px 6px 0 #fff }
.notfound .cta--lg:hover{ background:#fff; color:var(--red); box-shadow:2px 2px 0 #fff }
.notfound-right{ display:flex; flex-direction:column; gap:18px; align-items:flex-start }
.notfound-meta{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; opacity:.6 }

/* =========================================================================
   レスポンシブ
   ========================================================================= */
@media (max-width:960px){
  .phero{ padding:48px 0 40px }
  .phero-inner{ grid-template-columns:1fr; gap:24px }
  .phero-text{ padding-top:8px }
  .phero-mascot{ justify-content:center }
  .phero-mascot img{ height:200px }

  .catbtn{ padding:18px 20px; font-size:14px }
  .catbtn .cat-en{ font-size:10px }

  .section{ padding:64px 0 }
  .sec-head{ grid-template-columns:1fr; gap:16px; margin-bottom:36px }
  /* SP：「01」と「CATEGORY」を横並びに（PC基本のdisplay:blockを解除＝design-source相当） */
  .sec-num{ display:flex; align-items:baseline; gap:12px }
  .sec-num small{ font-size:11px; display:inline; margin-bottom:0 }
  .sec-title h2{ font-size:30px }
  details.qa summary{ grid-template-columns:48px 1fr auto; gap:16px; padding:24px 4px }
  /* SP：タップ時に左右へ動かないよう、hover/open時のpadding-leftスライドを無効化 */
  details.qa summary:hover,
  details.qa[open] summary{ padding-left:4px }
  .q-mark{ font-size:26px; min-width:48px }
  .q-text{ font-size:17px }
  .q-toggle{ width:34px; height:34px; flex-basis:34px; font-size:22px }
  .a-wrap{ padding:0 4px 28px 20px; gap:12px }
  .a-mark{ min-width:40px; font-size:16px }
  .a-text{ font-size:15px }

  .notfound{ padding:64px 0 }
  /* SP：?透かしを下げて上が少しはみ出る程度に（PC基本のtop:-20%→design-source相当） */
  .notfound-bg{ font-size:60vw; right:-4%; top:-10% }
  .notfound-inner{ grid-template-columns:1fr; gap:24px }
  /* SP：PC基本のmax-width:38chを解除し、文章を画面幅で自然に折り返す */
  .notfound p{ font-size:15px; max-width:none }
  .notfound .cta--lg{ font-size:18px }
}