/* =====================================================================
   bySENSE OFFICIAL WEBSITE — faq.css  (FAQ page-specific)
   STORYページ(about.css/story.html)の HERO・配色・構造を踏襲。
   HERO は 100vh 絶対配置。HERO以降は通常フロー（アコーディオン開閉対応）。
   共通トークン/部品は base.css・components.css を使う（編集禁止）。
   明ページ: 背景 var(--bg)=#d0d0d0 / 文字 var(--ink)=#393c41。
   ===================================================================== */

/* ============ [Phase2] stage 流体化（.faq-stage スコープ＝他5ページ無影響） ============
   base.css .stage は width:1536 固定＋中央寄せ（narrow は負マージンで左右クリップ＝左端欠け）。
   Phase2 は FAQ の stage のみ流体化: width:100% + max-width で 1536超は中央寄せ(現状維持)、
   1536未満で縮む(左端クリップ解消)。全6ページ移行後に base.css へ昇格（新旧併存）。 */
.stage.faq-stage {
  width: clamp(var(--floor), 100vw, var(--frame));
  margin-left: calc((100vw - clamp(var(--floor), 100vw, var(--frame))) / 2);
  margin-right: 0;
}
/* bleed 再定義: stage が中央寄せ(margin auto)である限り stage幅に依存せず viewport 全幅へ。
   left:50%(親=stage幅の中心=viewport中心) → margin-left:-50vw(viewport左端) → width:100vw。
   旧 .stage .bleed の left:calc((1536-100vw)/2)(1536固定前提・流体化で<1536が破綻)を上書き。 */
.stage.faq-stage .bleed {
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
}

/* ============ HERO (0 → 100vh) ============ */
/* about.css の .ab-hero* を .fq-hero* 名前空間で再現（about.css は編集しない）。 */
/* [Phase1 flow/grid化] 絶対配置(top:0)→通常フロー。HERO は stage の最初のフロー子として
   100vh を占有する。内部の前景テキスト(.fq-hero__fg 配下)と背景(.fq-hero__bg)は
   「幾何整合の島」として HERO 内の絶対配置を維持（座標は不変）。 */
.fq-hero {
  position: relative; width: 100%; height: 100vh;
}

/* 背景写真: .bleed で 100vw に breakout */
.fq-hero__bg {
  position: absolute; top: 0; height: 100%; overflow: hidden;
}
/* + .bleed → 100vw */
.fq-hero__bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 明るい写真上の白文字可読性グラデ（about.css .ab-hero__slider::after と同じ） */
.fq-hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,18,14,0) 46%, rgba(20,18,14,.30) 78%, rgba(20,18,14,.42));
}

/* 前景ラッパ: HERO 下端固定の「島」。幅はフレーム相対(100%)・高さは Figma 原寸(1082)。
   子(H1/H2/線)は島の内部座標として px のまま維持。 */
.fq-hero__fg {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 1082px; z-index: 3;
}

/* H1 "FAQ" — Kaku Regular 24/42/6px 白 (about.css .ab-hero__h1 と同スペック) */
.fq-hero__h1 {
  position: absolute; left: calc(128 / 1536 * 100%); top: 768px; width: min(672px, 100%);
  font-family: var(--sans); font-weight: 400;
  font-size: 24px; line-height: 42px; letter-spacing: 6px; color: var(--white);
}

/* H2 "よくあるご質問" — Mincho 500 24/48/3px 白 (about.css .ab-hero__h2 と同スペック) */
.fq-hero__h2 {
  position: absolute; left: calc(128 / 1536 * 100%); top: 865px; width: min(672px, 100%);
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; line-height: 48px; letter-spacing: 3px; color: var(--white);
}

/* 縦ライン (about.css .ab-hero__vline と同一) */
.fq-hero__vline {
  position: absolute; left: calc(128 / 1536 * 100%); top: 1022px; height: 120px;
  border-left: 1px solid rgba(255,255,255,.65);
}

/* hero下フル幅線 (about.css .ab-hero__hline と同一) — フレーム相対幅 */
.fq-hero__hline {
  position: absolute; left: 0; top: 1082px; width: 100%;
  border-top: 1px solid var(--line);
}

/* ============ CONTENT (HERO以降・通常フロー＋グリッド) ============ */
/* [Phase1 flow/grid化] HERO がフロー化したので padding で 100vh を作る必要はない
   （旧 calc(100vh+96px) ハックを 96px へ）。コンテンツの横配置を margin-left:px から
   CSS Grid の名前付き列へ移行（Phase2 のレスポンシブで列定義だけ差し替えられる土台）。
   列: [full] 320 | [main] 896 | 320 [/full] = 1536（Figma 中央寄せ 320+896+320）。
   .faq-stage 高さは固定しない → アコーディオン開閉で自然伸縮。 */
.faq-content {
  padding-top: 96px;
  display: grid;
  /* 左右の余白列は minmax(24px,1fr)＝1536では1fr=320pxに解決(従来と同一)、幅が縮むと追従しつつ
     最小24pxを確保(狭幅で本文が画面端にベタ付かない・Phase2追加)。本文列のみ上限896px。 */
  grid-template-columns: [full-start] minmax(24px, 1fr) [main-start] minmax(0, 896px) [main-end] minmax(24px, 1fr) [full-end];
}

/* イントロ文: main列の左端に左寄せ・本文 measure 736（フレームより狭ければ追従） / 明ページ濃文字 */
.faq-intro {
  grid-column: main-start / main-end;
  justify-self: start;
  width: min(736px, 100%);
  margin: 0 0 80px;
  color: var(--ink);
}

/* カテゴリセクション: main列(上限896)を充填 / 上罫線で節区切り（固定幅は持たせない） */
.faq-cat {
  grid-column: main-start / main-end;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.faq-cat + .faq-cat {
  margin-top: 64px;
}

/* カテゴリ見出し: .t-head (Mincho 500 24/48/3) / 明ページ濃文字 */
.faq-cat__head {
  color: var(--ink);
  margin-bottom: 32px;
}

/* -------- FAQ アコーディオン (details/summary) --------
   kojilab.css .kl-faq* の暗ページ実装を明ページ配色に置換。
   +/− マーカー・下線・フォントスペック共通。配色のみ明ページへ変更。 */

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  list-style: none; cursor: pointer; position: relative; display: block;
  font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.7;
  color: var(--ink); padding: 18px 48px 18px 0;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* +/− マーカー — currentColor = var(--ink) (#393c41) */
.faq-item summary::after {
  content: ""; position: absolute; right: 4px; top: 26px;
  width: 13px; height: 13px;
  background:
    linear-gradient(currentColor, currentColor) center/13px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 13px no-repeat;
  opacity: .65; transition: transform .3s var(--ease);
}
.faq-item[open] summary::after {
  transform: rotate(90deg);
  background: linear-gradient(currentColor, currentColor) center/13px 1px no-repeat;
}

/* 回答テキスト: 14px / line-height 1.9 / --ink-60 (#4b4e54) */
.faq-item__a {
  font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.9;
  color: var(--ink-60); padding: 4px 0 20px;
  margin: 0;
}

/* ============ 注釈エリア (footer 直上) ============ */
/* full列に中央寄せ・幅 上限1280（フレームより狭ければ追従）→ 1536幅では左128・幅1280 / 上96px余白 */
.faq-page-notes {
  grid-column: full-start / full-end;
  justify-self: center;
  width: min(1280px, 100%);
  margin-top: 80px;   /* 注釈前の余白を全ページ80に統一 */
}

/* ============ FOOTER ============ */
/* full列(1536)に通常フローで組み込み（絶対座標で固定しない） */
.faq-content > #site-footer {
  grid-column: full-start / full-end;
  margin-top: 80px;
  position: relative;
}

/* =====================================================================
   [Phase3] スマホ専用 (<768)
   .faq-stage の floor(1200) を解除し viewport 幅へ流体化(横スクロール解消)。
   HERO 前景の島座標(left:128/top:px)→左下1カラム積み。
   content グリッドは既存 minmax(24px,1fr) が 24px ガター/1カラムへ自然収束。
   全ルール <768 ガード＝1536/デスクトップ回帰ゼロ。
   ===================================================================== */
@media (max-width: 767px) {
  /* stage フロア除去（1200 floor を外し viewport 幅に追従） */
  .stage.faq-stage { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }

  /* HERO: 前景テキストを左下に1カラム積み（島座標→フロー） */
  .fq-hero { height: 100svh; }
  /* [sp2] FV 見出し(英和)をヘアライン分 上へ＝padding-bottom 44→72(他ページと同等のクリアランス) */
  .fq-hero__fg { height: auto; top: auto; bottom: 0; left: 0; width: 100%; padding: 0 24px 72px; }
  .fq-hero__h1 { position: static; left: auto; top: auto; width: auto; font-size: 20px; letter-spacing: 4px; }
  .fq-hero__h2 { position: static; left: auto; top: auto; width: auto; margin-top: 6px; font-size: 22px; line-height: 36px; }
  /* FV hairline combo (TOP-style): left-bottom vertical scroll-cue + full-width baseline.
     [sp2 fix] 非@media の top:1022/1082px を top:auto で打ち消す（残すと top が bottom に勝ち
     HERO 下端でなく ~1000px 下に描画される不具合）→ bottom 基準で .fq-hero__fg(bottom:0)へアンカー。 */
  .fq-hero__vline {
    position: absolute; left: 24px; right: auto; top: auto; bottom: -40px; height: 96px; width: 0;
    border-left: 1px solid rgba(255,255,255,.6);
  }
  .fq-hero__hline {
    position: absolute; left: 0; right: auto; top: auto; bottom: 0; width: 100%;
    border-top: 1px solid rgba(255,255,255,.28);
  }

  /* CONTENT: 余白を詰める（横配置は既存グリッドが1カラム化） */
  .faq-content { padding-top: 64px; }
  .faq-intro { margin-bottom: 56px; }
  .faq-cat + .faq-cat { margin-top: 48px; }
  /* [sp2] 注釈の左右余白を他ページと統一(24pxガター)。full-start/full-end でガター外まで広がり
     左端ベタ付きだったのを padding で内側へ。 */
  .faq-page-notes { margin-top: 56px; padding: 0 24px; }
  .faq-content > #site-footer { margin-top: 56px; }
}