@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 1416 / cta 225 / note 40 / toggle 72 / tail 32 = 1785
     FAQ セクション    head 184 / ピル 64 x6 / gap 24 x5 / tail 104 = 792
   ========================================================================== */


/* --------------------------------------------------------------------------
   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-fv2     { background-color: #ffffff; box-shadow: 0 1px 0 0 #ffffff; }
.fsl-root .fsl-sec-fv3     { 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; }
.fsl-root .fsl-hero-fv2 { background-color: #f4f3ef; }
.fsl-root .fsl-hero-fv3 { background-color: #f5f2ed; }


/* --------------------------------------------------------------------------
   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 時: 同一画像が同一サイズ・同一位置で重なるだけなので合成差分ゼロ
   - 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-root .fsl-btn {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.18s ease;
}

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

/* FV1 (0826)  ストリップ 750x225 (y1416..1641) / ピル x27.5..727.5, y(63.5..217 in strip)
        0826 で FV の CTA 帯が 16px 上へ動いたためストリップ境界が変わった。
        ピルの絶対位置は 0825 と同じなので、ストリップ内比率だけを再計算している。
        inset: top 63.5/225, right 22.5/750, bottom 8/225, left 27.5/750 */
.fsl-root .fsl-btn-fv1 {
  clip-path: inset(28.2222222% 3% 3.5555556% 3.6666667% round 9999px);
}
/* FV2  ストリップ 750x249 / ピル x24..728, y(61..218 in strip)
        inset: top 61/249, right 22/750, bottom 31/249, left 24/750 */
.fsl-root .fsl-btn-fv2 {
  clip-path: inset(24.4979920% 2.9333333% 12.4497992% 3.2% round 9999px);
}
/* FV3  ストリップ 750x249 / ピル x25..729, y(61..218 in strip) */
.fsl-root .fsl-btn-fv3 {
  clip-path: inset(24.4979920% 2.8% 12.4497992% 3.3333333% round 9999px);
}
/* cta-2 ストリップ 750x250 / ピル x25..729, y(62..219 in strip) */
.fsl-root .fsl-btn-cta2 {
  clip-path: inset(24.8% 2.8% 12.4% 3.3333333% round 9999px);
}
/* カード内 CTA（商品1・商品2 共通）
   ストリップ = カード幅686 x 高さ177 / ピルはカード内 x36..661, y41..156
   inset: top 41/177, right 25/686, bottom 21/177, left 36/686 */
.fsl-root .fsl-btn-card1,
.fsl-root .fsl-btn-card2 {
  clip-path: inset(23.1638418% 3.6443149% 11.8644068% 5.2478134% round 9999px);
}

.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);
}

/* カード内はカード幅そのもの。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%;
}

/* 開状態の見出し行だけをクリック領域にする透明ボタン。
   高さは 72px ÷ 画像高さ。hover で画像全体が明るくならないよう
   brightness は使わず、cursor と focus リングのみ。 */
.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% * 72 / 1685); }
.fsl-root .fsl-acchead-f2 { height: calc(100% * 72 / 681); }
.fsl-root .fsl-acchead-f3 { height: calc(100% * 72 / 515); }

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

@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;
}

.fsl-root .fsl-toggle:focus-visible,
.fsl-root .fsl-btn:focus-visible,
.fsl-root .fsl-acchead:focus-visible {
  outline: 3px solid #1a63d8;
  outline-offset: -3px;
  border-radius: 2px;
}

.fsl-root .fsl-btn:focus-visible { border-radius: 9999px; }


/* --------------------------------------------------------------------------
   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 */