@charset "utf-8";

/* ==========================================================================
   フラコラ SHINPI サンクスページLP
   ecforce 埋め込み前提のため、以下を厳守している。

   - すべてのセレクタは単一ルート `.fsl-root` 配下にスコープ
   - html / body に対するスタイル指定は一切なし
   - グローバルな要素セレクタ（例 `img { ... }`）は一切なし
   - クラスプレフィックスは `fsl-` に統一
   - 画像パスは相対（`img/`）。ecforce 反映時は `/shinpi/img/` へ一括置換可能

   デザイン基準幅 750px。すべて 750px を 100% とした比率で組んでいる。

   ---- 主要な実測寸法（design px / 750基準）--------------------------------
     商品カード箱      x 32..718  = 幅686   （91.4666667% / margin-left 4.2666667%）
     カード角丸        r ≈ 16
     カード間ギャップ  24        （margin-bottom 3.2%）
     set/set-2 末尾    48        （section padding-bottom 6.4%）
     カード影          右下オフセット。下ピーク α0.1456 / 右ピーク α0.150 /
                       約18pxで減衰 / 左・上は α0.000
     FV・cta-2 バー    x 20..730 = 幅710   （94.6666667% / margin-left 2.6666667%）
     FAQ Q ピル        x 20..730 = 幅710   （Qピル下に影は無い：実測 α0.000）
     FV1 ストリップ    main 1176 / cta 207 / gap 10(CSS) / toggle 72 / tail 32 = 1497
     cta-2 ストリップ  body 1191 / cta 232 / gap 18(CSS) / toggle 72 / tail 48 = 1561
     FAQ セクション    head 184 / ピル 64 x6 / gap 24 x5 / tail 104 = 792
     展開後パネル      acc-f1 710x515 / acc-f2 686x679 / acc-f3 686x1720
                       FAQ full 238/280/280/154/490/196（いずれも Q ピル 64 を含む）
     ※ この表と .fsl-acchead-* の分母は src/index.html の <img height> と
       必ず一致させること。旧デザインの値が残ると当たり判定や余白が破綻する。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. リセット（.fsl-root 配下限定 / :where() で詳細度 0 に抑えて上書き容易に）
   -------------------------------------------------------------------------- */

.fsl-root {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.fsl-root *,
.fsl-root *::before,
.fsl-root *::after {
  box-sizing: border-box;
}

.fsl-root :where(div, section, p, span, a, button, img, ul, ol, li, figure) {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  text-align: left;
}

.fsl-root :where(a) {
  color: inherit;
  text-decoration: none;
}

.fsl-root :where(button) {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

/* 視覚的に隠すがスクリーンリーダーには読ませる */
.fsl-root .fsl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   2. ルート / レイアウト
   -------------------------------------------------------------------------- */

.fsl-root {
  width: 100%;
  max-width: 750px;      /* PC ではセンター寄せ */
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  overflow-x: hidden;    /* 横スクロール防止の保険 */

  /* 画像を縦積みしたときの「1px 白スジ」対策の要。
     img が inline 系だと line-height 分の隙間が下に生まれるため、
     コンテナ側で font-size / line-height を 0 に潰しておく。 */
  font-size: 0;
  line-height: 0;
}


/* --------------------------------------------------------------------------
   3. 画像（縦積みの基本形）
   -------------------------------------------------------------------------- */

.fsl-root img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  vertical-align: top;
  border: 0;
  backface-visibility: hidden;
}

.fsl-root .fsl-sec,
.fsl-root .fsl-hero,
.fsl-root .fsl-card,
.fsl-root .fsl-ctastrip,
.fsl-root .fsl-btn,
.fsl-root .fsl-toggle,
.fsl-root .fsl-acc,
.fsl-root .fsl-acc-closed,
.fsl-root .fsl-acc-open,
.fsl-root .fsl-acc-inner,
.fsl-root .fsl-acc-full,
.fsl-root .fsl-faq-list,
.fsl-root .fsl-faq-item {
  font-size: 0;
  line-height: 0;
}


/* --------------------------------------------------------------------------
   4. セクション背景色
       スライス境界にサブピクセルの隙間が生じても、透ける色が白ではなく
       実際の隣接色になるようにするための保険。値は書き出し PNG の実測値。
       box-shadow はレイアウトに影響しないので、セクション間の継ぎ目も同色で埋める。
       set / set-2 は 1cqw = セクション幅の 1% を使うため container を張る。
   -------------------------------------------------------------------------- */

.fsl-root .fsl-sec {
  position: relative;
  width: 100%;
}

.fsl-root .fsl-sec-fv1     { background-color: #ffffff; box-shadow: 0 1px 0 0 #ffffff; }
.fsl-root .fsl-sec-damage  { background-color: #ffffff; box-shadow: 0 1px 0 0 #ffffff; }
.fsl-root .fsl-sec-method  { background-color: #ffffff; box-shadow: 0 1px 0 0 #ffffff; }
.fsl-root .fsl-sec-routine { background-color: #ffffff; box-shadow: 0 1px 0 0 #263976; }
.fsl-root .fsl-sec-cta2    { background-color: #263976; box-shadow: 0 1px 0 0 #263976; }
.fsl-root .fsl-sec-faq     { background-color: #ffffff; box-shadow: 0 1px 0 0 #ffffff; }

/* set / set-2: 末尾 48px は画像から外し padding-bottom 6.4% (=48/750) で再現 */
.fsl-root .fsl-sec-set {
  background-color: #f5efe6;
  box-shadow: 0 1px 0 0 #f5efe6;
  padding-bottom: 6.4%;
  container-type: inline-size;
}
.fsl-root .fsl-sec-set2 {
  background-color: #efe8de;
  box-shadow: 0 1px 0 0 #efe8de;
  padding-bottom: 6.4%;
  container-type: inline-size;
}

/* FV のメインビジュアル + CTA。両者の境界色はセクション背景と異なるため個別指定 */
/* 読み込み途中に透ける色 = 各FVのCTA帯付近の実画素（0825実測）。
   旧#263976(0824の紺)が残っていると読み込み中に紺帯が見える(クライアント指摘②) */
.fsl-root .fsl-hero-fv1 { background-color: #ffffff; }


/* --------------------------------------------------------------------------
   5. 商品カード（set / set-2）

   カード箱はデザイン実測で x 32..718（幅686）。画像はその範囲だけを切り出し、
   カード脇の地色・カード間ギャップ・セクション末尾・焼き込みドロップシャドウは
   画像に含めず CSS で再現する（クライアント指示: 画像とシャドウを分離）。

   影のパラメータ根拠（sec-set@2x.png / sec-set2@2x.png の焼き込み影の実測）:
     - 影が出るのは右と下のみ。左と上は α=0.000（= 右下方向のオフセット影）
     - 下: カード下端から ピーク α 0.1456、約18px で 0 へ
     - 右: x=718 から ピーク α 0.150、約19px で 0 へ
     - 色みなし（減衰量が地色の各チャンネルに比例＝純黒 + α）
   A*Φ((offset-d)/σ) でフィットして offset=8px / σ=4.8px / A≈0.16。
   drop-shadow の第3引数は実測上ガウスの標準偏差そのものとして効くので σ を直接渡す。
   1cqw = セクション幅の 1%（750px 時 7.5px）なので幅に比例してスケールする。

   border-radius はカード自身の角丸（実測 r≈16）に合わせる。これにより
   drop-shadow のシルエットも角丸に追従する。
   -------------------------------------------------------------------------- */

.fsl-root .fsl-card {
  --fsl-card-shadow-x: 1.0667cqw;   /* 8.0px @750 */
  --fsl-card-shadow-y: 1.0667cqw;   /* 8.0px @750 */
  --fsl-card-shadow-blur: 1.28cqw;  /* 9.6px @750 (= 2σ, σ=4.8px) */
  --fsl-card-shadow-color: rgba(0, 0, 0, 0.16);

  width: calc(100% * 686 / 750);
  margin-left: calc(100% * 32 / 750);
  background-color: #ffffff;
  border-radius: 2.1333cqw; /* 16px @750 */
  box-shadow:
    var(--fsl-card-shadow-x)
    var(--fsl-card-shadow-y)
    var(--fsl-card-shadow-blur)
    var(--fsl-card-shadow-color);
}

/* カード間ギャップ 24px = 3.2% (24/750)。包含ブロック幅基準なので比例スケールする */
.fsl-root .fsl-card-gap { margin-bottom: 3.2%; }


/* --------------------------------------------------------------------------
   6. CTA ボタン（オーバーレイ + clip-path 方式）

   静的ストリップ（.fsl-ctastrip > img）はボタンが焼き込まれたまま敷き、
   その上に「まったく同じストリップ画像」を inset:0 で重ねた <a> を置き、
   clip-path でピル形状にだけ切り抜く。

   - 非 hover 時: 同一画像が同一サイズ・同一位置で重なるだけ。ただし完全一致ではない
                  （2026-09-24 実測: clip を外すと fv1 は差0、card系4本と cta2 は
                  ピル内で差>=2・最大約38。重ね側の再標本化が素の画像と揃わない。
                  目視では判別不能）
   - hover 時 : 明度変化は切り抜かれたピル形状にしか描かれないので、
                背景（FV の写真 / カードの白 / cta-2 の紺）は一切変化しない
   - clip-path はヒットテストにも効くため、クリック領域もピル形状に一致する

   ボタン矩形を別クロップして % 配置する方式は採らない。
   % の丸めで 0.008px ずれ、重ねた画像が再標本化されて文字が滲み、
   ref との差分率が 0.0910% → 0.2384% に悪化することを実測で確認したため。
   clip-path は描画・ヒットテストのみに効き、画像の標本化位置を変えない。

   inset() の上下 % はボックス高さ基準、左右 % は幅基準。
   round 9999px でスタジアム形状（角丸半径 = 高さ/2）になる。
   -------------------------------------------------------------------------- */

.fsl-root .fsl-ctastrip {
  position: relative;
  width: 100%;
}

/* ピル矩形は --fsl-pill（inset() の上右下左）に持ち、clip-path と
   フォーカスリング（10章の ::after）の両方がこれを参照する。
   リングを <a> 自身の outline で描くと clip-path に全部食われて 0 画素になる
   （購入リンク6本すべてでキーボードフォーカスが見えなかった）。 */
.fsl-root .fsl-btn {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.18s ease;
  clip-path: inset(var(--fsl-pill) round 9999px);
}

@media (hover: hover) {
  .fsl-root .fsl-btn:hover { filter: brightness(1.03); }
}
.fsl-root .fsl-btn:active { filter: brightness(0.98); }

/* FV1 (LPO_1回目 / Figma 502:3862) ストリップ 750x207 (セクション内 y1176..1383)
        ピル = cta インスタンス 502:3870 の button 子 x23..727 / y1231..1377
        （ストリップ内 y55..201）。右下の +4.5px は焼き込みドロップシャドウなので
        ピルには含めない＝hover の明度変化と当たり判定をボタン本体だけに限定する。
        inset: top 55/207, right 23/750, bottom 6/207, left 23/750 */
.fsl-root .fsl-btn-fv1 {
  --fsl-pill: 26.5700483% 3.0666667% 2.8985507% 3.0666667%;
}
/* cta-2 (Figma 479:4861) ストリップ 750x232 (セクション内 y1191..1423)
   ピル = cta インスタンス 479:6019 の button 子 x23..727 / y1271..1417
   （ストリップ内 y80..226）。FV と同一コンポーネントなのでピル寸法は同じ 704x146。
   inset: top 80/232, right 23/750, bottom 6/232, left 23/750 */
.fsl-root .fsl-btn-cta2 {
  --fsl-pill: 34.4827586% 3.0666667% 2.5862069% 3.0666667%;
}
/* カード内 CTA。ストリップ = カード幅686 x 高さ177。
   ピルの外形（光沢の縁まで含み、下と右に落ちる青灰の影は含めない）を
   実画像 @2x の画素で実測。set と set-2 は同一画像なので値も同一。
   商品1と商品2でピルの横位置が 3px ずれているため矩形は共有できない
   （旧値 x36..661 / y41..156 は旧デザイン由来で、上に白地 6px を含み、
   下の縁 4px を欠き、商品1では右の影まで当たり判定にしていた）。
     商品1: x32..656 / y45..160 → inset: top 45/177, right 30/686,   bottom 17/177, left 32/686
     商品2: x35..659.5 / y45..160 → inset: top 45/177, right 26.5/686, bottom 17/177, left 35/686 */
.fsl-root .fsl-btn-card1 {
  --fsl-pill: 25.4237288% 4.3731778% 9.6045198% 4.6647230%;
}
.fsl-root .fsl-btn-card2 {
  --fsl-pill: 25.4237288% 3.8629738% 9.6045198% 5.1020408%;
}

.fsl-root .fsl-btn > img { width: 100%; height: 100%; }


/* --------------------------------------------------------------------------
   7. アコーディオン（閉ピル ⇄ 開状態1枚もの の切替）

   閉状態: ピル / バー 1 枚だけを表示（実寸クロップ）
   開状態: 「開状態の見出し行 + 中身」を 1 枚もの（acc-fX-full）で表示し、
           その先頭 72px（見出し行）にだけ透明ボタンを重ねて閉じる操作にする。

   閉ブロックと開ブロックを同じ duration で grid-template-rows 1fr↔0fr / 0fr↔1fr
   と逆向きに補間するので、全体高さは 72px ⇄ 画像高 を滑らかに遷移する。
   visibility は遅延付きで切り替え、隠れている側を
   Tab 順序 / 支援技術のアクセシビリティツリーから外す。
   -------------------------------------------------------------------------- */

.fsl-root .fsl-acc {
  position: relative;
  width: 100%;
}

/* FV / cta-2 の設置先はセクション直下。バーも中身も 710px 幅 */
.fsl-root .fsl-acc-wide {
  width: calc(100% * 710 / 750);
  margin-left: calc(100% * 20 / 750);
}

/* LPO_1回目: CTA ストリップとトグルバーの間の余白。
   旧デザインでは FV の note 画像(750x40)がこの隙間を埋めていたが、新 FV に note が
   無くなったため CSS で持つ（N37）。margin-top の % は包含ブロックの「幅」基準なので、
   750px 基準の design px をそのまま比率で書ける。
   FV   : ストリップ末 1383 → バー頭 1393 = 10px
   cta-2: ストリップ末 1423 → バー頭 1441 = 18px */
.fsl-root .fsl-sec-fv1  .fsl-acc-wide { margin-top: calc(100% * 10 / 750); }
.fsl-root .fsl-sec-cta2 .fsl-acc-wide { margin-top: calc(100% * 18 / 750); }

/* カード内はカード幅そのもの。0826 の中身画像 acc-f2/f3-full は 686 幅（カード幅と
   同一のコンテキスト）で書き出しているので、CSS 側の縮小は行わない＝等倍配置。
   0825 は 710 幅素材を 91.4667% に縮んで載せていたため、閉バーの見出しと
   開見出しの文字位置が 1px 単位でずれていた。その原因を素材側で解消済み。 */
.fsl-root .fsl-acc-card {
  width: 100%;
  margin-left: 0;
}

.fsl-root .fsl-acc-closed,
.fsl-root .fsl-acc-open {
  display: grid;
  width: 100%;
}

/* 開閉はトランジションなしの即時切替（クライアント指示 2026-08-24:
   スライドさせると画像の入れ替わりが見えるため「パッと伸びる」挙動にする） */
.fsl-root .fsl-acc-closed {
  grid-template-rows: 1fr;
  visibility: visible;
}
.fsl-root .fsl-acc.is-open .fsl-acc-closed {
  grid-template-rows: 0fr;
  visibility: hidden;
}

.fsl-root .fsl-acc-open {
  grid-template-rows: 0fr;
  visibility: hidden;
}
.fsl-root .fsl-acc.is-open .fsl-acc-open {
  grid-template-rows: 1fr;
  visibility: visible;
}

.fsl-root .fsl-acc-inner {
  min-height: 0;   /* grid アイテムの既定 min-height:auto を解除 */
  overflow: hidden;
  width: 100%;
}

.fsl-root .fsl-acc-full {
  position: relative;
  width: 100%;
}

/* 開状態の見出し行だけをクリック領域にする透明ボタン。
   高さは「見出しピルの高さ ÷ full 画像の design 高さ」。分母は必ず
   src/index.html の該当 <img height> と一致させる（LPO_1回目で分母が旧デザインの
   高さ 1685/681/515 のまま取り残され、f1 の当たり判定が 72px 相当→22px 相当に
   潰れていた。実測: acc-f1-full の区切り線は design y=71..72、acc-f2-full も
   y=71..72、acc-f3-full だけ上端に 2px の余白があるため y=73..74）。
   hover で画像全体が明るくならないよう brightness は使わず、cursor と focus リングのみ。

   当たり判定は「ピル高さ + ピル直下の余白 24px」まで伸ばす。余白部分は全パネルで
   実測上まっさらな地色（f1: 次の content edge は design y=112.5 / f2: 111.5 /
   f3: 114 / FAQ: 回答1行目の天 88）なので、見た目は 1px も変わらないまま
   タップ領域だけ 72→96 相当（実機 42〜49 CSS px）に広がる。 */
.fsl-root .fsl-acchead {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fsl-root .fsl-acchead-f1 { height: calc(100% * 96 / 515); }
.fsl-root .fsl-acchead-f2 { height: calc(100% * 96 / 679); }
.fsl-root .fsl-acchead-f3 { height: calc(100% * 98 / 1720); }

/* FAQ は開見出し行が 64px（Q ピルと同じ高さ）。分母は各 full 画像の design 高 */
.fsl-root .fsl-acchead-faq1 { height: calc(100% * 88 / 238); }
.fsl-root .fsl-acchead-faq2 { height: calc(100% * 88 / 280); }
.fsl-root .fsl-acchead-faq3 { height: calc(100% * 88 / 280); }
.fsl-root .fsl-acchead-faq4 { height: calc(100% * 88 / 154); }
.fsl-root .fsl-acchead-faq5 { height: calc(100% * 88 / 490); }
.fsl-root .fsl-acchead-faq6 { height: calc(100% * 88 / 196); }


/* --------------------------------------------------------------------------
   8. 閉状態のトグルバー（ピル）
   -------------------------------------------------------------------------- */

.fsl-root .fsl-toggle {
  display: block;
  width: 100%;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.18s ease;

}

/* 開く側の当たり判定（.fsl-acchead と対になる拡張）。
   ピル実高は design 72px（FAQ は 64px）＝実機 390 幅で 35.9 / 31.9 CSS px しかなく、
   Apple HIG 44pt・Android 48dp をどちらも下回っていた。閉じる側だけを拡張した状態は
   「閉じるのは 48px・開くのは 32px」という非対称なので、開く側もピル直下の余白へ伸ばす。

   padding で伸ばし同量の負 margin で引き戻すため、**ページ高も他要素の矩形も変わらない**
   （実測: .fsl-root 配下 194 要素のうち、矩形が動くのはトグル12基だけ。他182要素は
   x/y/w/h が小数3桁まで一致。ページ高 6802.86px も一致）。
   % は包含ブロックの「幅」基準なので design px をそのまま比率で書ける
   （分母 = 包含ブロックの design 幅。.fsl-acc-wide 710 / .fsl-acc-card 686）。

   **上方向には伸ばさない。** 上へ伸ばすと直前の見出し画像に重なり、Chrome が
   その画像を再サンプルして見た目が変わる（実測: FAQ 見出し「ご購入前によくある
   ご質問」の帯で 6,657〜13,020 画素が差>=2 で変化。文字自体は同じでもアンチ
   エイリアスがずれる）。下方向だけなら**全画面ピクセル差分 0**（最大チャンネル差 0）。

   拡張量の根拠（390x844 実測・トグル下端から次のクリック可能要素までの距離）:
     fv1 / cta2      : 直下は装飾の tail 画像のみ、次のボタンまで 829.8 / 877.6px
     カード p1 / p2  : 次の .fsl-card まで 12px、次のボタンまで 442.8px 以上
     FAQ q1〜q5      : 次の質問ピルまで 12px。24 design px = 実機 12px ちょうどで
                       隣のピル上端に接するだけ（重なり 0・クリック横取りなし）
   結果（実効ヒット高さ / elementFromPoint 0.5px 走査）:
     set系 6基 36.5 → 48.5px（閉じる側と同値）/ FAQ 6基 31.9 → 43.5〜44.5px
   FAQ が 44pt にわずかに届かないのは design のピル高 64px + 余白 24px が上限のため。 */
.fsl-root .fsl-acc-wide > .fsl-acc-closed .fsl-toggle,
.fsl-root .fsl-faq-item > .fsl-acc-closed .fsl-toggle {
  padding-bottom: calc(100% * 24 / 710);
  margin-bottom: calc(100% * -24 / 710);
}
.fsl-root .fsl-acc-card > .fsl-acc-closed .fsl-toggle {
  padding-bottom: calc(100% * 24 / 686);
  margin-bottom: calc(100% * -24 / 686);
}

/* .fsl-acc-inner の overflow:hidden は grid を 0fr に畳むときの clip 用。
   畳んでいない（＝閉じていて見えている）間まで clip すると、上で伸ばした
   ヒット領域がそこで切り落とされるため、その間だけ visible に戻す。 */
.fsl-root .fsl-acc-closed > .fsl-acc-inner { overflow: visible; }
.fsl-root .fsl-acc.is-open .fsl-acc-closed > .fsl-acc-inner { overflow: hidden; }

@media (hover: hover) {
  .fsl-root .fsl-toggle:hover { filter: brightness(1.03); }
}
.fsl-root .fsl-toggle:active { filter: brightness(0.98); }


/* --------------------------------------------------------------------------
   9. FAQ（0826: 閉デザイン化）

   0826 で FAQ も他のアコーディオンと同じ「2枚画像切替」に統一した。
     閉 = sec08-faq-qN.png     710x64 の ＋ アイコン付き Q ピル
     開 = sec08-faq-fullN.png  「Q 開状態 64px + A 本文」の 1 枚もの
   したがって item は .fsl-acc / .fsl-acc-wide（幅710 / x20..730）をそのまま使い、
   ここでは item 間の余白だけを足す。

   item 間の 24px は margin-bottom 3.2% (= 24 / 750)。% マージンは包含ブロック
   （.fsl-faq-list = 750px 幅）の「幅」基準なので、どの幅でも 24px 相当に比例する。
   開いても item 間隔が 24 のままなのは展開後フレームの実測と一致する。

   セクション高（閉）= head 184 + ピル 64x6 + gap 24x5 + tail 104 = 792。
   背景色 #ffffff は figma/exports/sec-faq@2x.png の左端ピクセル実測値。
   Q ピル下に焼き込み影は存在しない（実測 α=0.000）ため影の CSS 化は不要。
   -------------------------------------------------------------------------- */

.fsl-root .fsl-faq { background-color: #ffffff; }

.fsl-root .fsl-faq-list {
  width: 100%;
  background-color: #ffffff;
}

/* 幅・左マージンは .fsl-acc-wide 側が持つ。ここは item 間隔だけ */
.fsl-root .fsl-faq-item { margin-bottom: 3.2%; }

.fsl-root .fsl-faq-item:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   10. フォーカスリング（.fsl-root 配下限定）
   -------------------------------------------------------------------------- */

.fsl-root .fsl-toggle:focus,
.fsl-root .fsl-btn:focus,
.fsl-root .fsl-acchead:focus {
  outline: none;
}

/* リングは「見えているピル」の輪郭に描く。3種とも要素の箱＝ピルではないため、
   要素自身の outline は使わない:
   - .fsl-btn    : 箱はストリップ全体で、clip-path がピル以外を切り落とす。
                   outline は clip に全部食われて 0 画素になる
                   → clip と同じ --fsl-pill の矩形に ::after を置き、内側に描く
   - .fsl-toggle : 箱はピル + 下の余白 24px（8章の当たり判定拡張）。
                   outline だと余白に浮いた線になる → ピル画像 img に描く
   - .fsl-acchead: 箱は開見出しピル + 下の余白 24px（7章）
                   → 余白分を bottom で除いた ::after に描く */
.fsl-root .fsl-toggle:focus-visible > img {
  outline: 3px solid #1a63d8;
  outline-offset: -3px;
  border-radius: 2px;
}

.fsl-root .fsl-btn:focus-visible::after,
.fsl-root .fsl-acchead:focus-visible::after {
  content: "";
  position: absolute;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px #1a63d8;
  /* 強制色モード（Windows ハイコントラスト）では box-shadow が捨てられるため、
     透明 outline を併記する。通常時は不可視、強制色モードでは系統色で描かれる */
  outline: 3px solid transparent;
  outline-offset: -3px;
}
.fsl-root .fsl-btn:focus-visible::after {
  inset: var(--fsl-pill);
  border-radius: 9999px;
}
.fsl-root .fsl-acchead:focus-visible::after {
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--fsl-acchead-pad);
  border-radius: 2px;
}
/* 余白 24 design px ÷ .fsl-acchead の design 高 */
.fsl-root .fsl-acchead-f1,
.fsl-root .fsl-acchead-f2 { --fsl-acchead-pad: 25%; }         /* 24/96 */
.fsl-root .fsl-acchead-f3 { --fsl-acchead-pad: 24.4897959%; } /* 24/98 */
.fsl-root [class*="fsl-acchead-faq"] { --fsl-acchead-pad: 27.2727273%; } /* 24/88 */


/* --------------------------------------------------------------------------
   11. モーション低減設定
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fsl-root .fsl-acc-closed,
  .fsl-root .fsl-acc.is-open .fsl-acc-closed,
  .fsl-root .fsl-acc-open,
  .fsl-root .fsl-acc.is-open .fsl-acc-open,
  .fsl-root .fsl-btn,
  .fsl-root .fsl-toggle {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   11. ecforce テーマ余白の打ち消し（フラコラ theme 実測: 2026-08-25）
       上=.l-container__row margin-top 60px（main.l-container の padding-top 71px は
       固定ヘッダー(#ecf_header_section, h71)の逃しのため残す — 消すとヘッダーがLPに被る）
       下=.l-container__row margin-bottom 100px
       この CSS は本ページ本文の <link> からのみ読み込まれるため、
       ここに限りグローバルセレクタを書いてもサイト他ページへ漏れない。
   -------------------------------------------------------------------------- */
.l-container__row { margin-top: 0 !important; margin-bottom: 0 !important; }
.p-page_content { margin: 0 !important; padding: 0 !important; }
/* ↑ SP時の左右 padding 15px (bundle.css) も含めて全方向ゼロ。SPでデザインが 100vw で出るようにする
   （.fsl-root は max-width:750px なので PC 表示は従来どおり中央 720px のまま変わらない） */

/* --------------------------------------------------------------------------
   12. アコーディオン展開1枚もの画像の角丸（acc-f1-full だけが対象）

   acc-f1-full（FV / cta-2 用・710幅）は四隅が不透明な白で書き出されており、
   実測では r=9 design px（710幅基準）の角丸の外側が白く塗られている。
   cta-2 の紺地では、この白い角がそのまま見えてしまうので CSS で角丸クリップを
   復元する。

   一方 0826 の acc-f2/f3-full（686幅・カード内）と sec08-faq-fullN（710幅・FAQ）は
   四隅の実測が
     f2/f3 : 上 = 見出し帯の淡青（角丸なし・直角） / 下 = カードの角丸＋影を焼き込み済み
     faq   : 上 = 見出し帯の淡青 / 下 = 白（いずれも直角）
   で、角丸は画像側のコンテキストに含まれている。ここに border-radius を当てると
   上端の淡青が 9px ぶん欠けて白いノッチが出るため、対象を f1 のみに限定する。
   （閉状態のトグルバー / Q ピルも同じ理由で角丸を当てていない）
   -------------------------------------------------------------------------- */
.fsl-root .fsl-acc-full { container-type: inline-size; }
.fsl-root .fsl-acc-full-f1 img { border-radius: 1.2676cqw; } /* 9/710 */