@charset "UTF-8";
/* ==========================================================================
   西宮北口ライフ歯科・矯正歯科・小児歯科 / 小児矯正専門サイト（Bパターン）
   Figma: JCtnETMwg4mYoIzolXOEyK / node 6496:5566（SP 6496:5567 = 375 × 28796）
   ※2026-09-16 R10：画像枠 251→250 / 221→220 / 199→200 の変更で features 6216→6208・flow 2432→2428、
     総高 28808 → 28796 になった。
   基準幅 375px（1rem = 10px）／ BP 480px ／ PCは375px列を中央固定
   ※2026-09-10 R3：切替BPを 768 → 480 に変更（ユーザー確定）。480px以下は rem の上限を外し、
     375pxデザイン全体が 480px まで 1.28倍に比例拡大する。481px 以上は rem=10px 固定のPC表示。
   ========================================================================== */

/* ------------------------------------------------------------------
   0. Webフォント（ローカル同梱・font-display:swap）
   ------------------------------------------------------------------ */
@font-face{
  font-family:"Noto Sans JP";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/noto-sans-jp-500.woff2") format("woff2");
}
@font-face{
  font-family:"Noto Sans JP";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/noto-sans-jp-700.woff2") format("woff2");
}
@font-face{
  font-family:"Noto Sans JP";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("../fonts/noto-sans-jp-800.woff2") format("woff2");
}
@font-face{
  font-family:"Noto Sans JP";
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url("../fonts/noto-sans-jp-900.woff2") format("woff2");
}
@font-face{
  font-family:"M PLUS Rounded 1c";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("../fonts/mplus-rounded-1c-800.woff2") format("woff2");
}
@font-face{
  font-family:"M PLUS Rounded 1c";
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url("../fonts/mplus-rounded-1c-900.woff2") format("woff2");
}
@font-face{
  font-family:"Zen Maru Gothic";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/zen-maru-gothic-700.woff2") format("woff2");
}
@font-face{
  font-family:"Zen Maru Gothic";
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url("../fonts/zen-maru-gothic-900.woff2") format("woff2");
}

/* ------------------------------------------------------------------
   1. デザイントークン（:root）
   ------------------------------------------------------------------ */
:root{
  /* --- 色（Figma実fill） --- */
  --c-text:#373228;          /* 本文・見出しの基本色 */
  --c-pink:#cd6996;          /* ブランドピンク */
  --c-green:#6eb455;         /* ブランドグリーン */
  --c-orange:#f5a037;        /* ブランドオレンジ（CTA/固定フッターCTA） */
  --c-yellow:#ffd250;        /* 強調マーカー／CTAボタン数字 */
  --c-blue:#64b9e6;          /* リンク・住所アイコン */
  --c-pink-pale:#fae6f0;     /* ピンク系の淡い地色 */
  --c-green-pale:#ebfae6;    /* グリーン系の淡い地色 */
  --c-ivory:#fffaf0;         /* セクション地色（アイボリー） */
  --c-cream:#fff5c8;         /* メリット枠の地色 */
  --c-merit-tx:#8c6900;      /* メリット枠の見出し文字色 */
  --c-copyright:#e191b4;     /* コピーライト帯 */
  --c-white:#fff;
  --c-line-fixed:rgba(55,50,40,.2); /* footer-fixed の区切り線 */
  --c-outside:#e8eaec;       /* PC時：375px列の外側（参考サイト実測値） */

  /* --- タイポ（役割別） --- */
  --ff-noto:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --ff-round:"M PLUS Rounded 1c","Noto Sans JP","Hiragino Maru Gothic ProN",sans-serif;
  --ff-zen:"Zen Maru Gothic","M PLUS Rounded 1c","Noto Sans JP",sans-serif;

  --fs-body:1.4rem;          /* 本文 */
  --lh-body:2.6rem;
  --ls-body:.042rem;
  --fs-lead:1.2rem;          /* 補足・注記 */
  --fs-sec-sub:2rem;         /* セクション見出し（日本語） */
  --fs-sec-en:6rem;          /* セクション見出し（英字） */
  --fs-h3:2.4rem;            /* セクション内 中見出し */

  /* --- 影 --- */
  --sd-card:drop-shadow(0 0 5px rgba(0,0,0,.1));
}

/* ------------------------------------------------------------------
   2. リセット／ベース
   ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{
  /* R3：SP側の 10px 上限を撤廃。480px までは 375px デザイン全体が比例拡大する
     （480px で 1rem = 12.8px ＝ 1.28倍）。481px 以上は §18 で 10px に固定。 */
  font-size:calc(100vw / 37.5);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  margin:0;
  background:var(--c-outside);
  color:var(--c-text);
  font-family:var(--ff-noto);
  font-weight:700;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;border:0}
a{color:inherit;text-decoration:none}
address{font-style:normal}
em,i,cite{font-style:normal}
button{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit}
iframe{display:block;border:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}

/* ------------------------------------------------------------------
   3. レイアウト骨格
   ------------------------------------------------------------------ */
.wrapper{position:relative;width:100%;background:var(--c-white);padding-bottom:6rem}  /* 6rem=60px ＝ .footer-fixed の高さぶんの逃げ。これが無いと最下部でコピーライト帯(28696-28748)が固定バー(28688-28748)に完全に隠れる。Figmaでも footer-fixed(6455:1727) は footer の下 28748-28808 に置かれており重なっていない。この余白により総高 28748 -> 28808 ＝ Figmaルートフレーム高と一致する */
@media (min-width:481px){
  .wrapper{max-width:37.5rem;margin-inline:auto}
}

.sec{position:relative;width:100%}
section[id],.footer{scroll-margin-top:7.1rem}
.sec__inner{position:relative;width:37.5rem;height:100%;margin-inline:auto}

.deco-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.deco{position:absolute}
.circle-deco{position:absolute;border-radius:50%;opacity:.25;mix-blend-mode:multiply}

/* 共通テキストウェイト（Figmaの Bold / Black に対応） */
.tx-bold{font-family:var(--ff-noto);font-weight:700}
.tx-black{font-family:var(--ff-noto);font-weight:900}

/* 共通：セクション見出し */
.sec-ttl__sub{
  font-family:var(--ff-round);font-weight:800;
  font-size:var(--fs-sec-sub);line-height:3.2rem;letter-spacing:.06rem;
  color:var(--c-text);text-align:center;width:100%;
}
.sec-ttl__en{
  font-family:var(--ff-round);font-weight:800;
  font-size:var(--fs-sec-en);line-height:6rem;letter-spacing:.18rem;
  /* Figma 6455:827 / 1094 / 1490 / 1568 は uppercase 指定（原稿は Case/Products/Flow/Clinic のまま） */
  text-transform:uppercase;
  text-align:center;width:100%;
}
.sec-ttl__en--pink{color:var(--c-pink)}
.sec-ttl__en--green{color:var(--c-green)}

/* 共通：黄色マーカー */
.pm-marker{position:absolute;background:var(--c-yellow)}

/* ------------------------------------------------------------------
   4. header（6455:1705 / 375×71 / fixed・ビューポート全幅）
   ------------------------------------------------------------------ */
.header{position:fixed;left:0;top:0;width:100%;z-index:200;container-type:inline-size}
/* ★container-type:inline-size は PC の .header__logo が使う 100cqw のために置く。
   100vw は縦スクロールバー幅を含むため、クラシックSB環境(Windows/Linux)ではロゴ幅を過大に見積もり、
   窓幅 481〜約525px でロゴが最大1.96px はみ出していた（R6 strict-checker の指摘・実害を検算済み）。
   100cqw は .header の実幅（＝SBを除いた幅）に追従するので原理的にはみ出さない。
   ★置き場所は .header に限定すること：.header は position:fixed で既に包含ブロックなので、
   containment を足しても絶対配置の子孫（SPの .header__logo / .header__btn）の基準は変わらない。
   .header__inner に置くと SP では 37.5rem 固定幅になり式が壊れる。
   ※未対応ブラウザでは font-size 宣言ごと無効になり .header__logo{font-size:1rem} にフォールバック
   （ロゴがSPサイズのまま＝重なりは起きない）。 */
.header__notice{
  width:100%;height:2.6rem;background:var(--c-green);
  display:flex;align-items:center;justify-content:center;
}
.header__notice-tx{
  font-family:var(--ff-noto);font-weight:500;
  font-size:1rem;line-height:1rem;letter-spacing:.05rem;
  color:var(--c-white);text-align:center;white-space:nowrap;
}
.header__bar{
  position:relative;width:100%;height:4.5rem;background:var(--c-white);
  box-shadow:0 0 10px 0 rgba(0,0,0,.1);
}
.header__inner{position:relative;width:37.5rem;height:100%;margin-inline:auto}
/* ロゴ一式は「基準 font-size(1rem=10px) × em」で組む。SP は従来どおり Figma 6455:1719 = 214x35
   （実測 216.1x35）のまま。PC では §18 でこの font-size だけを上げて 1.4倍（≒300x49）にする。 */
.header__logo{position:absolute;left:1rem;top:.5rem;display:flex;align-items:center;gap:.5em;font-size:1rem}
.header__logo-img{width:3.5em;height:3.5em;object-fit:contain}
.header__brand{display:flex;flex-direction:column;gap:.5em;color:var(--c-text)}
.header__brand-1{font-family:var(--ff-noto);font-weight:700;font-size:.9em;line-height:1;letter-spacing:.03em;white-space:nowrap}
/* Figma 6455:1722 の手動カーニング：1つ目の「科・」-.03em、2つ目の「科・」-.05em */
.header__brand-k1{letter-spacing:-.03em}
.header__brand-k2{letter-spacing:-.05em}
.header__brand-2{font-family:var(--ff-noto);font-weight:700;font-size:.7em;line-height:1;letter-spacing:.03em;white-space:nowrap}
.header__btn{position:absolute;top:0;width:4.5rem;height:4.5rem;display:block;cursor:pointer}
.header__btn img{width:4.5rem;height:4.5rem}
.header__btn svg{display:block;width:4.5rem;height:4.5rem}

/* ハンバーガー（≡ → ×）。書き出し素材 assets/img/header/header_ico-menu.svg のパスを
   そのままインライン化したもの（地色 #373228 の 45x45／白バー 21x2 r1 を y=16/22/28）。
   アニメーションのため img → inline svg にしただけで、形状・寸法は書き出しと 1:1。
   上下のバーが中央(y=23)へ寄って ±45° 回転、中央のバーはフェードアウトして × になる。 */
.hb-bar{transform-box:fill-box;transform-origin:center;transition:transform .3s ease,opacity .2s ease}
.header__btn--menu[aria-expanded="true"] .hb-bar--1{transform:translateY(6px) rotate(45deg)}
.header__btn--menu[aria-expanded="true"] .hb-bar--2{opacity:0}
.header__btn--menu[aria-expanded="true"] .hb-bar--3{transform:translateY(-6px) rotate(-45deg)}
/* ドロワーは全画面（z-index:300）だが、開いている間は header を前面に出して
   同じボタンで閉じられるようにする（×が見えないと「開くが閉じられない」になる）。 */
body.is-drawer-open .header{z-index:400}
.header__btn--tell{left:24rem}
.header__btn--mail{left:28.5rem}
.header__btn--menu{left:33rem}

/* ------------------------------------------------------------------
   5. footer-fixed（6455:1727 / 375×60 / fixed・PC幅でも表示）
   ------------------------------------------------------------------ */
.footer-fixed{
  position:fixed;left:0;bottom:0;width:100%;height:6rem;
  background:var(--c-white);box-shadow:0 -3px 10px 0 rgba(0,0,0,.1);
  display:flex;justify-content:center;z-index:200;
}
.footer-fixed__inner{position:relative;width:37.5rem;height:100%}
/* Figma 6455:1730(#F5A037) ＋ 6455:1731(45°/白15%ストライプ)。
   実測: 地色 rgb(245,160,55) / ストライプ rgb(246,174,85) = 白15%重ね。cta_stripe と同一パターン。 */
.footer-fixed__cell-bg{
  position:absolute;left:30rem;top:0;width:7.5rem;height:6rem;background:var(--c-orange);
}
.footer-fixed__cell-bg::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.15) 0 1.8px,rgba(255,255,255,0) 1.8px 6px);
}
.footer-fixed__item{
  position:absolute;top:1.5rem;transform:translateX(-50%);
  font-family:var(--ff-noto);font-weight:700;
  font-size:1rem;line-height:1.5rem;letter-spacing:.05rem;
  color:var(--c-text);text-align:center;white-space:nowrap;
}
.footer-fixed__item--cta{font-weight:900;color:var(--c-white)}
.footer-fixed__line{position:absolute;top:0;width:1px;height:6rem;background:var(--c-line-fixed)}

/* ------------------------------------------------------------------
   6. mv-area（6455:7 / 375×828）
   ------------------------------------------------------------------ */
.sec-mv{height:82.8rem;background:var(--c-ivory)}
.sec-mv .sec__inner{overflow:hidden}

/* catch（6455:147） */
.mv__catch{font-weight:400}
.mv__catch-a,.mv__catch-d{
  position:absolute;top:11.3rem;white-space:nowrap;
  font-family:var(--ff-noto);font-weight:800;font-size:1.8rem;line-height:1.8rem;color:var(--c-text);
}
.mv__catch-a{right:26.5rem;letter-spacing:-.054rem}
.mv__catch-d{right:2.1rem}
.mv__catch-b,.mv__catch-c{
  position:absolute;top:9.6rem;white-space:nowrap;
  font-family:var(--ff-round);font-weight:800;font-size:3.6rem;line-height:3.6rem;letter-spacing:.18rem;
}
.mv__catch-b{right:18.8rem;color:var(--c-pink)}
.mv__catch-c{left:20.5rem;color:var(--c-green)}
.mv__catch-dot{position:absolute;left:18.8rem;top:10.7rem;width:1.6rem;height:1.6rem}  /* Figma 6455:152 = left188/top107/16x16（get_design_context実値）。metadata の y=115 は -45°回転の変換原点であり bbox 上端ではない */
.mv__catch-e{
  position:absolute;left:50%;top:14.9rem;transform:translateX(calc(-50% + .05rem));
  white-space:nowrap;font-family:var(--ff-noto);font-weight:800;font-size:2.8rem;line-height:2.8rem;color:var(--c-text);
}
.mv__catch-l{font-size:2.8rem;letter-spacing:.08em}
/* Figma 6455:148 の手動カーニング：語末の「適」「療」だけ .05em に落ちる */
.mv__catch-l2{font-size:2.8rem;letter-spacing:.05em}
.mv__catch-s{font-size:2.2rem;line-height:2.2rem;letter-spacing:.08em}

/* main cards（6455:99） */
.mv-card__img{position:absolute;top:20.7rem;width:18.2rem;height:21rem;object-fit:cover}
.mv-card__img--1{left:0}
.mv-card__img--2{left:19.3rem}
.mv-card__body{
  position:absolute;top:40.7rem;width:18.4rem;height:11rem;
  background:var(--c-white);border:1.5px solid;border-bottom-right-radius:8px;
}
.mv-card__body--1{left:-.2rem;border-color:var(--c-pink)}
.mv-card__body--2{left:19.3rem;border-color:var(--c-green)}
.mv-card__age{position:absolute;top:40.7rem;width:18.2rem;height:2rem}
.mv-card__age--1{left:0;background:var(--c-pink)}
.mv-card__age--2{left:19.3rem;background:var(--c-green)}
.mv-card__age-n{
  position:absolute;top:.4rem;white-space:nowrap;
  font-family:var(--ff-noto);font-weight:800;font-size:1.2rem;line-height:1.2rem;letter-spacing:.036rem;color:var(--c-white);
}
.mv-card__age-n--1{right:8.2rem}
.mv-card__age-n--2{right:7.8rem}
.mv-card__age-s{
  position:absolute;top:.75rem;white-space:nowrap;
  font-family:var(--ff-noto);font-weight:800;font-size:.8rem;line-height:.8rem;letter-spacing:.024rem;color:var(--c-white);
}
.mv-card__age-s--1{right:7.2rem}
.mv-card__age-s--2{right:6.8rem}
.mv-card__name{
  position:absolute;top:43.6rem;width:9.5rem;
  font-family:var(--ff-noto);font-weight:700;font-size:1rem;line-height:1.4rem;letter-spacing:.05rem;color:var(--c-text);
}
.mv-card__name--1{left:1.5rem}
.mv-card__name--2{left:21rem}
.mv-card__line{position:absolute;top:47.2rem;width:10.2rem;height:1px}
.mv-card__line--1{left:1.5rem;background:var(--c-pink)}
.mv-card__line--2{left:21rem;background:var(--c-green)}
.mv-card__ico{position:absolute;top:43.6rem;width:4.5rem;height:4.5rem;border-radius:50%;overflow:hidden;display:block}
.mv-card__ico--1{left:12.7rem;background:var(--c-pink-pale)}
.mv-card__ico--2{left:32.2rem;background:var(--c-green-pale)}
.mv-card__ico img{width:4.5rem;height:4.5rem;object-fit:contain}
.mv-card__p1,.mv-card__p3{
  position:absolute;top:48.7rem;white-space:nowrap;
  font-family:var(--ff-noto);font-weight:800;font-size:1.2rem;line-height:1.2rem;
}
.mv-card__p1{letter-spacing:.06rem}
.mv-card__p3{letter-spacing:.036rem}
.mv-card__p1--1{right:33.5rem;color:var(--c-pink)}
.mv-card__p1--2{right:14rem;color:var(--c-green)}
.mv-card__p3--1{right:26.8rem;color:var(--c-pink)}
.mv-card__p3--2{right:8rem;color:var(--c-green)}
.mv-card__p2{
  position:absolute;top:48.1rem;white-space:nowrap;
  font-family:var(--ff-round);font-weight:800;font-size:2.4rem;line-height:1.8rem;letter-spacing:-.072rem;
}
.mv-card__p2--1{right:29.5rem;color:var(--c-pink)}
.mv-card__p2--2{right:10.6rem;color:var(--c-green)}
.mv-card__p2-dot{font-size:2rem;letter-spacing:-.06rem}
.mv-card__p4{
  position:absolute;top:48.8rem;white-space:nowrap;
  font-family:var(--ff-noto);font-weight:800;font-size:1rem;line-height:1rem;letter-spacing:.048rem;
}
.mv-card__p4--1{left:10.9rem;color:var(--c-pink)}
.mv-card__p4--2{left:29.7rem;color:var(--c-green)}
.mv-card__p4-w{letter-spacing:.08rem}
.mv-card__badge{
  position:absolute;left:32.5rem;top:38.2rem;width:5rem;height:3.5rem;
  background:var(--c-yellow);border-radius:1.75rem 0 0 1.75rem;
  filter:drop-shadow(3px 3px 5px rgba(0,0,0,.1));
}
.mv-card__badge-tx{
  position:absolute;left:1.6rem;top:.55rem;width:2.4rem;text-align:center;
  font-family:var(--ff-round);font-weight:800;font-size:1rem;line-height:1.2rem;letter-spacing:.03rem;color:var(--c-text);
}

/* point（6455:74） */
.mv-point{position:absolute;top:53.7rem;width:11rem;height:11rem}
.mv-point--1{left:1.5rem}
.mv-point--2{left:13.3rem}
.mv-point--3{left:25.1rem}
.mv-point__bg{position:absolute;left:0;top:0;width:11rem;height:11rem}
.mv-point__cap{
  position:absolute;white-space:nowrap;text-align:center;
  font-family:var(--ff-noto);font-weight:800;font-size:1rem;line-height:1.5rem;letter-spacing:.03rem;color:var(--c-text);
}
.mv-point__num{
  position:absolute;white-space:nowrap;text-align:right;
  font-family:var(--ff-round);font-weight:800;font-size:2.6rem;line-height:2.6rem;letter-spacing:-.072rem;color:var(--c-white);
}
.mv-point__comma{font-size:1.8rem;line-height:1.8rem}
.mv-point__unit{
  position:absolute;white-space:nowrap;
  font-family:var(--ff-round);font-weight:800;font-size:1.4rem;line-height:1.4rem;color:var(--c-white);
}
.mv-point__unit--s{font-size:1rem;line-height:1rem}
.mv-point__lead{
  position:absolute;white-space:nowrap;text-align:center;
  font-family:var(--ff-round);font-weight:800;font-size:1.6rem;line-height:1.6rem;color:var(--c-white);
  text-shadow:0 0 5px rgba(245,160,55,.5);
}
.mv-point__lead--2{line-height:2rem}

/* btn（6455:25） */
.mv-btn{position:absolute;left:0;top:66.7rem;width:37.5rem;height:6.5rem;display:block}
.mv-btn__bg{position:absolute;left:0;top:1.5rem;width:37.5rem;height:5rem;background:var(--c-orange);overflow:hidden}
.mv-btn__bg::after{
  content:"";position:absolute;left:0;top:0;width:19rem;height:5rem;
  background:var(--c-orange);opacity:.2;mix-blend-mode:color-dodge;
  clip-path:polygon(0 0,100% 0,73.684% 100%,0 100%);
}
.mv-btn__img{position:absolute;left:2rem;top:0;width:6.8rem;height:6.5rem}
.mv-btn__n{
  position:absolute;right:24.8rem;top:2.7rem;white-space:nowrap;
  font-family:var(--ff-noto);font-weight:800;font-size:2.4rem;line-height:2.4rem;color:var(--c-white);
}
.mv-btn__tx{
  position:absolute;left:12.9rem;top:3.5rem;white-space:nowrap;
  font-family:var(--ff-noto);font-weight:800;font-size:1.4rem;line-height:1.4rem;letter-spacing:.07rem;color:var(--c-text);
}
.mv-btn__tx-w{color:var(--c-white)}
.mv-btn__arrow{position:absolute;left:33.1rem;top:2.8rem;width:2.4rem;height:2.4rem}

/* access（6455:12） */
.mv-access{
  position:absolute;top:76.2rem;width:16.7rem;height:5.6rem;
  background:var(--c-white);border-radius:5rem;box-shadow:0 0 10px 0 rgba(0,0,0,.15);
}
.mv-access--1{left:1.5rem}
.mv-access--2{left:19.3rem}
.mv-access__ico{position:absolute;left:2rem;top:1.6rem;width:2.5rem;height:2.5rem}
.mv-access__tx{
  position:absolute;left:5.3rem;top:1rem;width:9.4rem;
  font-family:var(--ff-noto);font-weight:700;font-size:1.2rem;line-height:1.8rem;letter-spacing:.06rem;color:var(--c-text);
}

/* ------------------------------------------------------------------
   7. promise（6455:157 / 375×2061）
   ------------------------------------------------------------------ */
.sec-promise{height:206.1rem;background:var(--c-ivory)}

.pm-ttl{position:absolute;left:2rem;top:5.5rem;width:33.5rem;display:flex;flex-direction:column;align-items:center;gap:2.5rem}
.pm-ribbon{position:relative;width:33.5rem;height:7.5rem}
.pm-ribbon__bg{position:absolute;left:0;top:0;width:33.5rem;height:7.5rem}
.pm-ribbon__tx{
  position:absolute;left:16.6rem;top:2.4rem;transform:translateX(-50%);
  white-space:nowrap;text-align:center;color:var(--c-white);
  font-family:var(--ff-noto);font-weight:700;font-size:1.6rem;line-height:2rem;
}
.pm-ribbon__l{font-size:1.6rem;letter-spacing:.048rem}
.pm-ribbon__s{font-size:1.4rem;letter-spacing:.042rem}
/* Figma 6455:178 の手動カーニング（文字ごとに tracking が変わる） */
.pm-rb-a{letter-spacing:.03em}   /* 市・ら */
.pm-rb-b{letter-spacing:.15em}   /* で */
.pm-rb-c{letter-spacing:.1em}    /* 域・院 */
.pm-rb-d{letter-spacing:-.1em}   /* か・し */
.pm-rb-e{letter-spacing:-.05em}  /* 愛される・を */
.pm-rb-f{letter-spacing:-.03em}  /* 指・て */
.pm-main{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;text-align:center;color:var(--c-text)}
.pm-main__sub{font-family:var(--ff-round);font-weight:800;font-size:2rem;line-height:3.2rem;letter-spacing:.1rem;width:100%}
.pm-main__ttl{font-family:var(--ff-round);font-weight:800;font-size:3.6rem;line-height:5rem;letter-spacing:.102rem;width:100%}
.pm-main__l{font-size:3.6rem}
.pm-main__s{font-size:2.8rem;line-height:2.8rem}

.pm-circle{position:absolute;border-radius:50%;object-fit:cover}

.pm-card{position:absolute;left:2rem;width:33.5rem;display:flex;flex-direction:column;align-items:center}
.pm-card--static{left:0;top:0;width:100%}
.pm-card__no{
  position:relative;z-index:2;width:4rem;height:4rem;border-radius:2rem;overflow:hidden;
  margin-bottom:-2rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-round);font-weight:800;font-size:1.5rem;line-height:1.6rem;color:var(--c-white);text-align:center;
}
.pm-card__no--1{background:var(--c-pink)}
.pm-card__no--2{background:var(--c-green)}
.pm-card__no--3{background:var(--c-orange)}
.pm-card__body{
  position:relative;z-index:1;width:100%;background:var(--c-white);border-radius:1.5rem;
  filter:var(--sd-card);
  display:flex;flex-direction:column;align-items:center;gap:2rem;
  padding:3.6rem 2rem 4rem;
}
.pm-card__tx1{
  position:relative;width:100%;text-align:center;
  font-family:var(--ff-noto);font-weight:700;font-size:1.6rem;line-height:3rem;letter-spacing:.048rem;color:var(--c-text);
}
.pm-card__tx2{
  position:relative;width:100%;text-align:center;
  font-family:var(--ff-noto);font-weight:500;font-size:1.2rem;line-height:2.1rem;letter-spacing:.036rem;color:var(--c-text);
}

/* ------------------------------------------------------------------
   8. topics（6455:349 / 375×5760）
   ------------------------------------------------------------------ */
.sec-topics{height:576rem;background:var(--c-white)}

/* -- lead（6455:350） -- */
.tp-lead{position:absolute;left:0;top:0;width:37.5rem;height:58.8rem}
.tp-lead__bg{position:absolute;left:0;top:0;width:37.5rem;height:15.8rem;background:var(--c-ivory)}
.tp-anxiety{
  position:absolute;left:2rem;top:5.5rem;width:33.5rem;
  background:var(--c-white);border-radius:1.5rem;filter:var(--sd-card);
  display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2.6rem 2rem 0;
}
.tp-anxiety__list{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}
.tp-anxiety__item{display:flex;align-items:center;gap:1.2rem}
.tp-anxiety__item img{width:2.8rem;height:2.8rem}
.tp-anxiety__item p{
  font-family:var(--ff-round);font-weight:800;font-size:1.8rem;line-height:2.8rem;letter-spacing:.054rem;
  color:var(--c-text);white-space:nowrap;
}
.tp-anxiety__img{display:flex;align-items:flex-end;justify-content:center;gap:3rem;width:100%}
.tp-anxiety__img img:first-child{width:7rem;height:9.9rem}
.tp-anxiety__img img:last-child{width:6.8rem;height:9.5rem;object-fit:contain}
.tp-anxiety__tail{position:absolute;left:15.6rem;top:24.9rem;width:2.4rem;height:2rem}

.tp-lead__ttl{position:absolute;left:2rem;top:35.8rem;width:33.5rem;display:flex;flex-direction:column;align-items:center}
.tp-lead__ttl-tx{
  width:100%;margin-bottom:-1.5rem;text-align:center;
  font-family:var(--ff-round);font-weight:800;font-size:2.4rem;line-height:4rem;letter-spacing:.072rem;color:var(--c-text);
}
.tp-lead__point{position:relative;width:33.5rem;height:7.5rem}
.tp-lead__point-tx{
  position:absolute;left:0;top:2.7rem;width:33.5rem;text-align:center;
  font-family:var(--ff-round);font-weight:900;font-size:4.5rem;line-height:4.5rem;letter-spacing:.135rem;color:var(--c-pink);
}
.tp-lead__arc{position:absolute;top:2.2rem;width:4.3rem;height:5rem}
.tp-lead__arc--l{left:0}
.tp-lead__arc--r{left:29.2rem}
.tp-lead__bulb{position:absolute;left:2.4rem;top:-.8rem;width:3rem;height:4rem}

/* -- パネル共通（topics-1/2/3） -- */
.tp-panel{position:absolute;left:0;width:37.5rem}
/* R8：Figma の各パネル（frame '1'/'2'/'3'）が持つ drop-shadow を反映。
   ★3枚は値が同じではない：topics-1 だけ上方向 -5px、2と3 はオフセット0。
     6465:3962 → drop-shadow(0px -5px 5px rgba(0,0,0,0.05))
     6465:4023 → drop-shadow(0px  0px 5px rgba(0,0,0,0.05))
     6465:4141 → drop-shadow(0px  0px 5px rgba(0,0,0,0.05))
   ★box-shadow ではなく filter:drop-shadow を使う理由：
     パネル上辺の中央には .tp-arc（ドーム。上に45pxはみ出す子）があり、Figma の影は
     その輪郭に沿って落ちている。box-shadow は border-box の矩形にしか掛からないため
     ドーム部分に影が出ず別物になる。drop-shadow はサブツリーのアルファ形状に掛かるので一致する。
   ★サブツリー全体に掛かるが実害なし（実測済み）：
     ・deco 類は .deco-clip{overflow:hidden} で切り取られ輪郭に寄与しない
     ・.tp-no__tx の上6pxはみ出しは行ボックスのみで、字面は arc（不透明）の内側
     ・.tp-panel は元から position:absolute ＝既に絶対配置子孫の包含ブロックなので基準は不変
     ・.circle-deco{mix-blend-mode:multiply} は直下の不透明なパネル地色と合成するため、
       filter によるグループ分離後も結果は同じ（ピクセル照合で確認済み）
   ★ぼかし値は px 固定（rem にしない）。--sd-card と同じ本案件の既定で、R2 で実測検証済み。
   ★clip-path で左右を切るのは不可（検討して却下・再挑戦しないこと）：
     PC では 375px 列がグレー余白の上に載るため、影が列の左右に約8px 滲む（外側 232→227＝最大5階調）。
     Figma はキャンバスが 375px 幅なのでそこには何も描かれない。これを消そうと
     `clip-path:inset(-60px 0 0 0)` を試したが、**パネル自身の右端を半画素削る**という
     より重い欠陥が出た（1440px で右端が 235,250,230 → 244,252,242 ＝約10階調・背後の白が透ける）。
     原因：レイアウト上の列端は (1440-375)/2 = 532.5px なのに、背景の描画は 533〜907 に
     ピクセル丸めされるため、クリップ矩形と 0.5px ずれる。しかもこのずれ量は
     ビューポート幅の偶奇で変わるので、静的な inset では全幅で正しくできない。
     → 余白の滲み（5階調・Figma に定義のない領域）より、コンテンツ端の欠損（10階調）のほうが
       重い欠陥と判断し、clip は入れない。SP（＝Figma のデザイン幅）では列＝画面幅なので
       そもそも左右の影は画面外に出て見えない。
     下辺の影は Figma でも実装でも後続セクションの不透明な地色が覆う（y=8649 で実測確認済み）。 */
.tp-panel--1{top:58.8rem;height:188rem;background:var(--c-pink-pale);filter:drop-shadow(0 -5px 5px rgba(0,0,0,.05))}
.tp-panel--2{top:246.8rem;height:224.9rem;background:var(--c-green-pale);filter:drop-shadow(0 0 5px rgba(0,0,0,.05))}
.tp-panel--3{top:471.7rem;height:104.3rem;background:var(--c-ivory);filter:drop-shadow(0 0 5px rgba(0,0,0,.05))}
.tp-arc{position:absolute;left:11.2rem;top:-4.5rem;width:15rem;height:15rem;border-radius:50%}
.tp-arc--1{background:var(--c-pink-pale)}
.tp-arc--2{background:var(--c-green-pale)}
.tp-arc--3{background:var(--c-ivory)}
.tp-no{position:absolute;left:13.75rem;top:1rem;width:10rem;height:4rem;overflow:hidden}
.tp-no--nomask{overflow:visible}
.tp-no__tx{
  position:absolute;left:0;top:-1.6rem;width:100%;text-align:center;white-space:nowrap;
  font-family:var(--ff-round);font-weight:800;font-size:5rem;line-height:7rem;
}
.tp-no__tx--1{color:var(--c-pink)}
.tp-no__tx--2{color:var(--c-green)}
.tp-no__tx--3{color:var(--c-orange)}

/* -- QA -- */
.tp-qa{position:absolute;left:2rem;top:8.5rem;width:33.5rem;display:flex;flex-direction:column;gap:1rem}
.tp-qa__q,.tp-qa__a{position:relative;width:33.5rem;height:8rem}
.tp-qa--3 .tp-qa__q,.tp-qa--3 .tp-qa__a{height:9.8rem}
.tp-qa__ph{position:absolute;width:7rem;height:7rem;object-fit:cover}
.tp-qa__tail{position:absolute}
.tp-bubble{
  position:absolute;left:0;top:.4rem;width:25rem;height:7rem;
  background:var(--c-white);border-radius:3.8rem;
  display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;
}
.tp-bubble--a{left:8.5rem}
.tp-bubble--tall{height:8.8rem;top:.9rem}
.tp-bubble__ico{
  position:relative;flex:0 0 auto;width:3rem;height:3rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-round);font-weight:800;font-size:1.4rem;line-height:1.4rem;color:var(--c-white);
}
.tp-bubble__ico--1{background:var(--c-pink)}
.tp-bubble__ico--2{background:var(--c-green)}
.tp-bubble__ico--3{background:var(--c-orange)}
.tp-bubble__tx{
  position:relative;white-space:nowrap;
  font-family:var(--ff-noto);font-weight:700;font-size:1.4rem;line-height:2rem;letter-spacing:.042rem;color:var(--c-text);
}

/* -- 白カード -- */
.tp-card{
  position:absolute;left:2rem;width:33.5rem;
  background:var(--c-white);border-radius:1.5rem;filter:var(--sd-card);
  display:flex;flex-direction:column;align-items:center;gap:2rem;padding:3rem 2rem 4rem;
}
.tp-card__img{width:29.5rem;height:22.1rem;object-fit:cover}
.tp-card__img--graph{height:24.1rem}  /* 台帳 T1-5: 295×241 */
/* R10：topics-1_img / topics-2_img は写真が 295×221 → 295×220 になったが、Figma の img 枠
   （6499:7579 / 6499:7618）は 295×221 のまま＝写真の下に 1px の地色が残る構成。
   margin-bottom:.1rem で枠(221)は維持したまま写真だけ 220 にする（後続の tx 位置は不変）。 */
.tp-card__img--h220{height:22rem;margin-bottom:.1rem}
.tp-card__tx{
  display:flex;flex-direction:column;gap:1rem;width:100%;
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--c-text);
}
.tp-card__tx--gap15{gap:1.5rem;align-items:flex-start}
.tp-card__ttl{
  width:100%;font-family:var(--ff-round);font-weight:800;font-size:2rem;line-height:3.4rem;letter-spacing:.06rem;
}
.tp-card__ttl--pink{color:var(--c-pink)}
.tp-card__ttl-l{font-size:2.8rem;line-height:3.4rem}

/* -- topics-1 メリット枠 -- */
.tp-merit{
  width:29.5rem;background:var(--c-cream);border-radius:1rem;
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;padding:2rem 1.5rem;
}
.tp-merit__ttl{display:flex;align-items:center;gap:1rem}
.tp-merit__ttl img{width:2rem;height:2rem}
.tp-merit__ttl p{
  font-family:var(--ff-noto);font-weight:700;font-size:1.5rem;line-height:2.4rem;letter-spacing:.045rem;
  color:var(--c-merit-tx);text-align:center;white-space:nowrap;
}
.tp-merit__items{display:flex;flex-direction:column;gap:1rem;width:100%}
.tp-merit__item{
  position:relative;background:var(--c-white);border-radius:.8rem;
  display:flex;align-items:center;padding:1rem 1.5rem 1rem 3.4rem;
}
.tp-merit__item p{
  font-family:var(--ff-noto);font-weight:700;font-size:1.4rem;line-height:2.6rem;letter-spacing:.042rem;
  color:var(--c-text);white-space:nowrap;
}
.tp-merit__item p.is-s{font-size:1.3rem;line-height:2.2rem;letter-spacing:.039rem}
.tp-merit__item img{position:absolute;left:-.5rem;top:1rem;width:3.2rem;height:2.2rem}

/* -- topics-2 -- */
.tp2-ttl{display:flex;align-items:center;gap:1rem}
.tp2-ttl img{width:3.4rem;height:6.4rem}
.tp2-ttl p{
  font-family:var(--ff-noto);font-weight:700;font-size:1.6rem;line-height:2.5rem;letter-spacing:.048rem;
  color:var(--c-green);white-space:nowrap;
}
.tp2-list{display:flex;flex-direction:column;align-items:flex-start;gap:3.5rem}
.tp2-list__items{display:flex;flex-direction:column;gap:1rem;width:29.5rem}
.tp2-item{
  width:100%;background:var(--c-green);border-radius:3rem;
  display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;
}
.tp2-item img{flex:0 0 auto;width:2rem;height:2rem}
.tp2-item p{
  font-family:var(--ff-noto);font-weight:700;font-size:1.2rem;line-height:2.6rem;letter-spacing:.036rem;
  color:var(--c-white);white-space:nowrap;
}
.tp2-item p.is-s{line-height:2.2rem}
.tp2-divider{width:29.8rem;height:1.8rem;margin:-.15rem 0 -.15rem -.15rem}
.tp2-note{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.tp2-note__ttl{
  position:relative;width:100%;text-align:center;
  font-family:var(--ff-round);font-weight:800;font-size:2rem;line-height:3.4rem;letter-spacing:.06rem;color:var(--c-text);
}
.tp2-note__tx{display:flex;flex-direction:column;align-items:flex-start}
.tp2-note__row{display:flex;align-items:flex-start;justify-content:space-between;width:28.5rem;height:7rem}
.tp2-note__row-tx{
  font-family:var(--ff-round);font-weight:800;font-size:1.3rem;line-height:2.5rem;letter-spacing:.039rem;
  color:var(--c-text);white-space:nowrap;
}
.tp2-note__row img{width:6.6rem;height:7rem}
.tp2-mft{
  width:29.5rem;background:var(--c-pink-pale);border-radius:1rem;
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem 1.5rem;
}
.tp2-mft__ttl{
  display:flex;flex-direction:column;gap:.5rem;width:100%;text-align:center;
  font-family:var(--ff-noto);font-weight:700;color:var(--c-pink);
}
.tp2-mft__ttl-1{font-size:1.4rem;line-height:2.4rem;letter-spacing:.042rem}
.tp2-mft__ttl-2{font-size:1.8rem;line-height:3.2rem;letter-spacing:.054rem}
/* R10：写真は 266×200（6499:7703）だが、外枠 6499:7702 は 265×199 のまま＝写真が右下へ 1px はみ出す。
   負マージンで margin-box を 265×199 に保ち、周囲のレイアウトを動かさない。 */
.tp2-mft__img{width:26.6rem;height:20rem;object-fit:cover;margin:0 -.1rem -.1rem 0}

/* ------------------------------------------------------------------
   9. cta（6455:587 / 763 / 1664 / 375×512 ×3）
   ------------------------------------------------------------------ */
.sec-cta{height:51.2rem}
.cta__bg{position:absolute;left:0;width:37.5rem}
.cta__bg--top{top:0;height:31.2rem}
.cta__bg--bottom{top:31.2rem;height:20rem}
.sec-cta[data-cta="1"] .cta__bg--top{background:var(--c-ivory)}
.sec-cta[data-cta="1"] .cta__bg--bottom{background:var(--c-white)}
.sec-cta[data-cta="2"] .cta__bg--top{background:var(--c-white)}
.sec-cta[data-cta="2"] .cta__bg--bottom{background:var(--c-ivory)}
/* R10（ユーザー指示）：最下部 cta ③ だけ上下の地色を入れ替える */
.sec-cta[data-cta="3"] .cta__bg--top{background:var(--c-ivory)}
.sec-cta[data-cta="3"] .cta__bg--bottom{background:var(--c-white)}

/* R13：cta② の三角形をカードと一体で動かすためのラッパ（products の .pr-anim と同じ方式）。
   `.cta-card{overflow:hidden}` があるため三角形をカードの子にはできない（上へ51.4pxはみ出す分が切れる）。
   ラッパはセクションと同じ 37.5rem×51.2rem・top:0 なので、
   ・子（三角形・カード）の座標はセクション基準のまま使える
   ・IntersectionObserver の発火位置が従来の .cta-card と同一（top/height が同じ）
   clip しないこと（overflow を付けない）。三角形が上へ 51.4px はみ出すため。 */
.cta-anim{position:absolute;left:0;top:0;width:37.5rem;height:51.2rem}

.cta-card{
  position:absolute;left:2rem;top:0;width:33.5rem;height:51.2rem;
  background:var(--c-orange);border-radius:1.5rem;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
}
.cta-card__stripe{position:absolute;left:0;top:0;width:33.5rem;height:51.2rem}
.cta-card__img{position:relative;width:33.5rem;height:19rem;object-fit:cover}
.cta-card__bubble-area{position:relative;width:100%;padding:2rem 1.5rem 0;display:flex;flex-direction:column;align-items:center}
.cta-card__bubble{
  position:relative;width:100%;background:var(--c-white);border-radius:1.5rem;
  display:flex;flex-direction:column;align-items:center;padding:1.8rem 1.5rem;
}
.cta-card__bubble-tx{
  position:relative;width:100%;text-align:center;
  font-family:var(--ff-noto);font-weight:700;font-size:1.2rem;line-height:2.2rem;letter-spacing:.036rem;color:var(--c-text);
}
.cta-card__tail{position:absolute;left:14.6rem;top:9.7rem;width:2rem;height:2rem}
.cta-card__head{position:relative;width:100%;padding:2rem 1rem 1.5rem;display:flex;align-items:flex-end;justify-content:center}
.cta-card__head-tx{
  width:22.5rem;text-align:center;white-space:nowrap;
  font-family:var(--ff-round);font-weight:800;font-size:2.8rem;line-height:4rem;letter-spacing:.084rem;color:var(--c-text);
}
.cta-card__head-w{font-size:2.8rem;color:var(--c-white);letter-spacing:.14rem}
/* Figma 6455:602 の手動カーニング: 行1「談」= tracking 2.8px / 行2「い」= tracking -4.2px */
.cta-card__head-w2{font-size:2.8rem;color:var(--c-white);letter-spacing:.28rem}
.cta-card__head-i{letter-spacing:-.42rem}
.cta-card__head-s{font-size:2.2rem;line-height:2.2rem;letter-spacing:.11rem}
.cta-card__head-l{font-size:2.8rem}
.cta-card__btn-row{position:relative;width:100%;height:8.5rem;padding:0 1rem;display:flex;align-items:flex-end;justify-content:space-between}
.cta-card__img1{width:5.8rem;height:7.6rem}
.cta-card__img2{width:5.4rem;height:7.7rem}
.cta-card__btn-wrap{height:8.5rem;padding-bottom:2.5rem;display:flex;flex-direction:column;align-items:center}
.cta-btn{
  position:relative;width:19rem;height:6rem;background:var(--c-text);border-radius:3rem;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.cta-btn__deco{position:absolute;left:0;top:0;width:9.5rem;height:6rem}
.cta-btn__tx{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;white-space:nowrap}
.cta-btn__n{font-family:var(--ff-round);font-weight:800;font-size:2.4rem;line-height:2rem;color:var(--c-yellow)}
/* Figma 6455:609 の手動カーニング：「2」は0、「4」だけ 2.4px */
.cta-btn__n-4{letter-spacing:.24rem}
.cta-btn__n-s{font-size:1.4rem;line-height:1.4rem;letter-spacing:.07rem}
.cta-btn__lead{font-family:var(--ff-noto);font-weight:700;font-size:1.2rem;line-height:1.4rem;letter-spacing:.036rem;color:var(--c-white)}
.cta-btn__arrow{position:absolute;left:16.8rem;top:2.5rem;width:.8rem;height:1rem}

/* ------------------------------------------------------------------
   10. features（6496:6178 / 375×6208 ※R10 で 6216→6208）
   ------------------------------------------------------------------ */
.sec-features{height:620.8rem;background:var(--c-white)}
.ft-ttl{position:absolute;left:2rem;top:8rem;width:33.5rem;display:flex;flex-direction:column;align-items:center;text-align:center}
.ft-ttl__sub{
  width:100%;font-family:var(--ff-round);font-weight:800;font-size:2rem;line-height:3.2rem;letter-spacing:.06rem;color:var(--c-text);
}
.ft-ttl__main{width:100%;font-size:6.5rem;line-height:6.6rem;letter-spacing:.135rem}
.ft-ttl__n{font-family:var(--ff-round);font-weight:800;font-size:6.5rem;line-height:6.6rem;letter-spacing:-.65rem;color:var(--c-green)}
.ft-ttl__m{font-family:var(--ff-round);font-weight:900;font-size:3.2rem;line-height:3.2rem;letter-spacing:.32rem;color:var(--c-green)}
.ft-ttl__k{font-family:var(--ff-round);font-weight:800;font-size:4.5rem;line-height:4.5rem;color:var(--c-pink)}

.feat{position:absolute;left:2rem;width:33.5rem;display:flex;flex-direction:column;align-items:center;gap:2rem}
.feat--pink{color:var(--c-pink)}
.feat--green{color:var(--c-green)}
.feat__label{display:flex;align-items:center;justify-content:center;gap:1.2rem;width:100%}
.feat__rule{flex:1 0 0;min-width:0;height:1px;background:currentColor}
.feat__label-tx{
  font-family:var(--ff-zen);font-weight:900;font-size:1.6rem;line-height:1.6rem;letter-spacing:.08rem;
  text-align:center;white-space:nowrap;color:currentColor;
}
.feat__ttl{
  width:100%;text-align:center;color:currentColor;
  font-family:var(--ff-round);font-weight:800;font-size:2.8rem;line-height:4.2rem;letter-spacing:.084rem;
}
.feat__main{display:flex;flex-direction:column;gap:3rem;width:100%;position:relative}  /* R9：フェード遷移中だけ .feat__main が stacking context 化して deco より前面に来る現象の解消（R9 responsive-checker の申し送り）。最終状態のピクセルは features 全6帯で差分0＝不変であることを実測確認済み */
.feat__img{width:33.5rem;height:25rem;object-fit:cover}  /* R10：Figma 335×251 → 335×250 */
.feat__tx{
  display:flex;flex-direction:column;gap:1rem;width:100%;
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--c-text);
}
.feat__tx--gap12{gap:1.2rem}
.feat__tx--pb10{padding-bottom:1rem}

.feat01-info{
  position:relative;width:33.5rem;height:6rem;background:var(--c-pink);overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.4rem 0;
}
/* Figma 6455:637 は基準パターンに -scale-y-100（上下反転）が掛かっているため「\」向き＝CSS 45deg。
   同じパターンを使う 6455:593(cta) と 6455:1731(footer-fixed) には反転が無いので 135deg のまま（変更禁止）。 */
.feat01-info__stripe{
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.15) 0 1.8px,rgba(255,255,255,0) 1.8px 6px);
}
.feat01-info__cap{
  position:relative;white-space:nowrap;
  font-family:var(--ff-noto);font-weight:900;font-size:1rem;line-height:1.6rem;letter-spacing:.03rem;color:var(--c-white);
}
.feat01-info__num{
  position:relative;display:flex;align-items:flex-end;gap:.3rem;white-space:nowrap;
  font-family:var(--ff-round);font-weight:800;font-size:3.5rem;line-height:3rem;letter-spacing:-.07rem;color:var(--c-white);
}
.feat01-info__unit{font-size:1.5rem;line-height:1.5rem;letter-spacing:.045rem}

.ft-price{display:flex;align-items:flex-start;gap:1.1rem;width:100%}
.ft-price__box{width:16.2rem;height:7rem;background:var(--c-white);border:1.5px solid;display:flex;flex-direction:column;align-items:flex-start}
.ft-price__box--pink{border-color:var(--c-pink)}
.ft-price__box--green{border-color:var(--c-green)}
.ft-price__age{width:100%;height:2.4rem;display:flex;align-items:baseline;justify-content:center;padding:.6rem 0;color:var(--c-white)}
.ft-price__box--pink .ft-price__age{background:var(--c-pink)}
.ft-price__box--green .ft-price__age{background:var(--c-green)}
.ft-price__age-n{font-family:var(--ff-noto);font-weight:700;font-size:1.2rem;line-height:1rem;letter-spacing:.05rem}
.ft-price__age-w{font-size:1rem;letter-spacing:.03rem}
.ft-price__age-s{font-family:var(--ff-noto);font-weight:900;font-size:.8rem;line-height:.8rem}
.ft-price__val{
  width:100%;height:4.6rem;display:flex;align-items:baseline;justify-content:center;gap:1px;padding:1.2rem 0 1.5rem;
  font-family:var(--ff-round);font-weight:800;
}
.ft-price__box--pink .ft-price__val{color:var(--c-pink)}
.ft-price__box--green .ft-price__val{color:var(--c-green)}
.ft-price__val-n{font-size:2.5rem;line-height:2rem;letter-spacing:-.125rem}
.ft-price__val-dot{font-size:2rem;letter-spacing:-.1rem}
.ft-price__val-u{font-size:1.4rem;line-height:1.4rem;letter-spacing:.042rem}
.ft-price__val-t{font-size:1rem;line-height:1rem}

.ft-cta{
  width:33.5rem;background:var(--c-ivory);border-radius:1.5rem;filter:var(--sd-card);
  display:flex;flex-direction:column;align-items:flex-start;gap:2rem;padding:4rem 2rem;
}
.ft-cta__ttl{
  width:100%;text-align:center;
  font-family:var(--ff-zen);font-weight:700;font-size:1.9rem;line-height:3.2rem;letter-spacing:.057rem;color:var(--c-pink);
}
.ft-cta__tx{
  display:flex;flex-direction:column;gap:1rem;width:100%;
  font-family:var(--ff-noto);font-weight:700;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--c-text);
}
.ft-cta__img{width:29.5rem;height:22rem;object-fit:cover}  /* R10：Figma 295×221 → 295×220 */
.ft-cta__list{width:100%;background:var(--c-white);border-radius:1rem;padding:2rem;display:flex;flex-direction:column;gap:.8rem}
.ft-cta__item{display:flex;align-items:center;gap:1rem;width:100%}
.ft-cta__dot{flex:0 0 auto;width:.8rem;height:.8rem;border-radius:50%;background:var(--c-pink)}
.ft-cta__item p{
  font-family:var(--ff-noto);font-weight:700;font-size:1.2rem;line-height:2rem;letter-spacing:.036rem;
  color:var(--c-text);white-space:nowrap;
}
.ft-cta__note{
  width:100%;font-family:var(--ff-noto);font-weight:700;
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--c-text);
}

/* オレンジの大ボタン（features04 / price 共通） */
.lg-btn{
  position:relative;width:100%;height:6.8rem;background:var(--c-orange);border-radius:4.4rem;
  display:flex;align-items:center;padding:0 2rem 0 7.5rem;
  /* deco の mix-blend-mode をこのボタン内に閉じ込める（背後のオレンジと合成させる） */
  isolation:isolate;
}
/* Figma 6455:757 / 6455:1399 deco：#F5A037 / fill-opacity .2 / mix-blend-mode:color-dodge。
   SVGを <img> で読むと独立した描画コンテキストになり背後のボタンと合成されないため、
   CSS要素として描いてページ側でブレンドする（.mv-btn__bg::after と同じ手法）。
   形状＝左端 r34 の角丸＋右辺の斜めカット（148x68 の path を clip-path 化。78.3529/148=52.941%）。
   期待実効色：#F5A037 の上に #F5A037 20% を color-dodge = rgb(247,179,58)。 */
.lg-btn__deco{
  position:absolute;left:0;top:0;width:14.8rem;height:6.8rem;
  background:var(--c-orange);opacity:.2;mix-blend-mode:color-dodge;
  border-radius:3.4rem 0 0 3.4rem;
  clip-path:polygon(0 0,100% 0,52.941% 100%,0 100%);
  pointer-events:none;
}
.lg-btn__img{position:absolute;left:0;top:-.6rem;width:9rem;height:7.4rem}
.lg-btn__tx{
  position:relative;flex:1 0 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.2rem;
  font-family:var(--ff-noto);font-weight:900;text-align:center;letter-spacing:.048rem;color:var(--c-text);
}
.lg-btn__l1{width:100%;font-size:2.4rem;line-height:2.4rem}
.lg-btn__l2{width:100%;font-size:1.6rem;line-height:2.4rem}
.lg-btn__n{font-size:2.4rem;line-height:2.4rem;color:var(--c-white)}
.lg-btn__s{font-size:1.6rem;line-height:1.6rem}
.lg-btn__arrow{position:relative;flex:0 0 auto;width:2.8rem;height:2.8rem}

/* ------------------------------------------------------------------
   11. case（6521:807 / 375×3128）
       R11：8〜11歳（case B）が 3行→5行・3枚→4枚になり +218px（2910→3128）
   ------------------------------------------------------------------ */
.sec-case{height:332.4rem;background:var(--c-ivory)}  /* R12：case A を5段化（+196px）。Figma は case A がまだ3段(3128)＝意図的な逸脱 */
.cs-ttl{position:absolute;left:2rem;top:12.5rem;width:33.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}

.cs-group{position:absolute;left:2rem;width:33.5rem}
.cs-group__ttl{
  position:relative;width:33.5rem;height:6rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.6rem 0;
  background-image:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 30%,rgba(255,255,255,.9) 70%,rgba(255,255,255,0) 100%);
}
.cs-dashline{position:absolute;left:0;width:33.5rem;height:3px;background-repeat:repeat-x;background-size:9px 3px}  /* Figma line-top/line-bottom は x=0 / width=335 / height=0 で strokeAlign=CENTER。3pxの線はパス中心に乗るので、要素の top はFigmaのy−1.5px にする（下のインラインstyle参照） */
.cs-dashline--pink{background-image:radial-gradient(circle at 1.5px 1.5px,#cd6996 1.5px,rgba(0,0,0,0) 1.5px)}
.cs-dashline--green{background-image:radial-gradient(circle at 1.5px 1.5px,#6eb455 1.5px,rgba(0,0,0,0) 1.5px)}
.cs-group__ttl-tx{position:relative;width:100%;text-align:center;letter-spacing:.15rem;font-family:var(--ff-round);font-weight:800;font-size:2.8rem;line-height:2.8rem}
.cs-group__ttl-tx--pink{color:var(--c-pink)}
.cs-group__ttl-tx--green{color:var(--c-green)}
.cs-group__ttl-l{font-size:2.8rem;line-height:2.8rem;letter-spacing:.14rem}
.cs-group__ttl-s{font-size:1.8rem;line-height:1.8rem;font-weight:900;letter-spacing:.144rem}

.cs-card{width:33.5rem;display:flex;flex-direction:column;align-items:center;filter:var(--sd-card)}
.cs-card__no{
  position:relative;z-index:2;width:7rem;height:7rem;border-radius:4rem;background:var(--c-white);
  margin-bottom:-4rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-round);font-weight:800;font-size:2.4rem;line-height:2.4rem;
}
.cs-card__no--pink{color:var(--c-pink)}
.cs-card__no--green{color:var(--c-green)}
.cs-card__body{
  position:relative;z-index:1;width:100%;background:var(--c-white);border-radius:1.5rem;filter:var(--sd-card);
  display:flex;flex-direction:column;align-items:center;gap:2rem;padding:4rem 2rem;
}
/* スライド単位＝カード全体（ユーザー指示）。Figma case-01(6455:834) はグループ内 y=90。
   .case__slider の padding は、cs-card のドロップシャドウ(0 0 5px＝σ5・可視範囲≒3σ=15px)が
   Swiper の overflow:hidden（＝パディングボックスで切る）で切れないための逃げ。
   R3：.5rem では静止時も送り中も影が切れていたため 15px に拡大。
   ★逃げは **固定px** で書くこと（rem追従にしてはいけない）。Swiper の spaceBetween は固定16pxなので、
   rem追従にすると幅400px超（rem>10.67）で p>16 になり、**次スライドが右端から覗く**（R3で実際に発生）。
   影のぼかし自体も drop-shadow(0 0 5px)＝固定pxなので、逃げも固定pxが正しい。
   上限は spaceBetween と同じ 16px（p>16 にすると静止時に次スライドが縁から覗く：
   次スライド左端 = p+351 / クリップ右端 = 335+2p ∴ p<16 で隠れる）。
   Swiper は padding を差し引いてスライド幅を算出するため slide 幅は 335px のまま（実測で確認）。
   その 15px ぶん wrap の top を calc(9rem - 15px) にしてカード上端を 9rem に合わせている（全幅で成立）。 */
.case__slider-wrap{position:absolute;left:0;top:calc(9rem - 15px);width:33.5rem}
.cs-note{display:flex;align-items:center;gap:2.3rem;width:100%}
.cs-note__b,.cs-note__a{
  width:13.6rem;height:2.4rem;border-radius:1.2rem;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-noto);font-weight:700;font-size:1rem;line-height:1.6rem;letter-spacing:.05rem;
}
.cs-note__b--pink{background:var(--c-white);border:1px solid var(--c-pink);color:var(--c-pink)}
.cs-note__a--pink{background:var(--c-pink);color:var(--c-white)}
.cs-note__b--green{background:var(--c-white);border:1px solid var(--c-green);color:var(--c-green)}
.cs-note__a--green{background:var(--c-green);color:var(--c-white)}
.case__slider{
  width:calc(33.5rem + 30px);margin-left:-15px;padding:15px;overflow:hidden;
  /* R4：overflow:hidden のハードな切り口を左右 8px だけフェードさせ、送り中の見切れを目立たなくする。
     カード本体は x=15〜(15+335) に置かれ、クリップ端から 15px 内側なので
     8px のフェードは **影の領域にしか掛からない**（静止時のカード本体は不透明のまま＝実測で確認）。
     逃げ(15px)・spaceBetween(16px) はいずれも変更していない。 */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);
}
.case__slide{width:33.5rem;display:flex;flex-direction:column;align-items:center}
/* Figma "slider"（note + 症例行 / itemSpacing 10）。行数はHTML側の .cs-row 数で決まる。
   8〜11歳＝R11で5行 295×514（Figma `6521:915` と一致）。
   ★5〜8歳＝**R12（2026-09-23）でユーザー指示により 3行→5行**（295×318 → 295×514）。
     **Figma（`6521:855`）はまだ3行 295×318 なので、これは意図的な逸脱**（写真も仮のまま）。
     逸脱は verify/VERIFIED-VALUES.json の adjust_h / adjust_y / root_height_adjust（各+196px）に
     「Figma真値＋差分」の形で記録してある。実症例が支給されて Figma が追いついたら adjust を外すこと。 */
.cs-photos{width:29.5rem;display:flex;flex-direction:column;gap:1rem}
.cs-row{display:flex;align-items:center;justify-content:space-between;width:100%}
.cs-row img{width:13.6rem;height:8.8rem;object-fit:cover}
.cs-row .cs-row__arrow{width:1.4rem;height:2.1rem;object-fit:contain}

.cs-list{width:29.5rem;display:flex;flex-direction:column}
.cs-list__row{position:relative;width:100%;background:var(--c-white);display:flex;align-items:center;gap:1.5rem;padding:1rem 1.5rem}
.cs-list--pink .cs-list__row.is-alt{background:var(--c-pink-pale)}
.cs-list--green .cs-list__row.is-alt{background:var(--c-green-pale)}
.cs-list__row::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px}
.cs-list__row:last-child::after{content:"";position:absolute;left:0;top:4.2rem;width:100%;height:1px}
.cs-list--pink .cs-list__row::before,.cs-list--pink .cs-list__row:last-child::after{background:var(--c-pink)}
.cs-list--green .cs-list__row::before,.cs-list--green .cs-list__row:last-child::after{background:var(--c-green)}
.cs-list__th{
  flex:0 0 auto;width:7.6rem;white-space:pre-wrap;
  font-family:var(--ff-noto);font-weight:700;font-size:1.3rem;line-height:2.2rem;letter-spacing:.039rem;color:var(--c-text);
}
.cs-list__td{
  font-family:var(--ff-noto);font-weight:700;font-size:1.3rem;line-height:2.2rem;letter-spacing:.039rem;
  color:var(--c-text);white-space:nowrap;
}
/* R11：8〜11歳 slide1 の「治療方法」だけ Figma で2行（6521:940 / 120×44）。
   <br> で明示改行するため white-space:nowrap のままでよく、行高 22×2=44 →
   行の高さは padding 10+44+10 = 64px（Figma 6521:938 の h=64）と一致する。 */

.cs-pager{position:absolute;left:0;top:93.2rem;width:33.5rem;display:flex;align-items:center;justify-content:center;gap:2.8rem}
/* R11：8〜11歳グループだけカードが 616→834 に伸びたため pager は y=736 → 954（Figma 6521:955）。 */
.cs-group--green .cs-pager{top:95.4rem}
.cs-pager__btn{width:3.5rem;height:3.5rem;display:block;cursor:pointer}
.cs-pager__btn img{width:3.5rem;height:3.5rem}
/* Swiper の .swiper-pagination-bullets.swiper-pagination-horizontal（0,2,0）を上書きするため
   子結合子で 0,3,0 にする。Figma のページャは pager 内で中央寄せ（prev 35 + 28 + dots + 28 + next 35）。 */
.cs-pager > .cs-pager__dots.js-case-pagination{
  position:static;left:auto;right:auto;top:auto;bottom:auto;
  width:auto;transform:none;
  display:flex;align-items:center;gap:1rem;height:.8rem;
}
.cs-pager__dot{
  width:.8rem;height:.8rem;border-radius:50%;cursor:pointer;display:block;
  background:var(--c-white);border:1px solid var(--c-pink);
}
.cs-pager__dot.is-active{background:var(--c-pink);border-color:var(--c-pink)}
.cs-group--green .cs-pager__dot{border-color:var(--c-green)}
.cs-group--green .cs-pager__dot.is-active{background:var(--c-green)}

.sm-btn{
  position:absolute;width:26rem;height:6rem;background:var(--c-text);border-radius:3rem;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.sm-btn__deco{position:absolute;left:0;top:0;width:13rem;height:6rem}
.sm-btn__tx{
  position:relative;white-space:nowrap;text-align:center;
  font-family:var(--ff-noto);font-weight:700;font-size:1.5rem;line-height:1.5rem;letter-spacing:.075rem;color:var(--c-white);
}
.sm-btn__arrow{position:absolute;left:23rem;top:2.3rem;width:1rem;height:1.4rem}

.cs-risks{position:absolute;left:2rem;top:247.5rem;width:33.5rem;display:flex;flex-direction:column;align-items:center;gap:2.5rem}
.cs-risks__ttl{
  width:100%;text-align:center;
  font-family:var(--ff-round);font-weight:800;font-size:var(--fs-h3);line-height:3.6rem;letter-spacing:.12rem;color:var(--c-text);
}
.cs-risks__list{
  width:100%;background:var(--c-white);border-radius:1.5rem;filter:var(--sd-card);
  display:flex;flex-direction:column;gap:2rem;padding:3rem 2rem 4rem;
}
.cs-risks__item{position:relative;width:100%;display:flex;align-items:flex-start;padding-left:1.5rem}
/* ★Figmaからの意図的逸脱（ユーザー指示 2026-09-25 R20）：top は .7rem ではなく 1rem。
   Figma実値は dot y=7（`6531:3157` ほか9件）だが、それだと**dot中心が本文のインク中心より
   3.12px 上**にずれる（DSF4で画素実測：dot中心 y18457.38 / インク中心 y18460.50）。
   1rem にすると dot中心が item 内 13.5px ＝ インク中心と一致し、
   同じサイトの他の丸ポチ（.ft-cta__dot / .pc-data__dot＝flex整列）の +0.5px と揃う。
   ★Figma値に戻さないこと。 */
.cs-risks__dot{position:absolute;left:0;top:1rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--c-orange)}
.cs-risks__item p{
  flex:1 0 0;min-width:0;
  font-family:var(--ff-noto);font-weight:700;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--c-text);
}

/* ------------------------------------------------------------------
   12. products（6455:984 / 375×1567）
   ------------------------------------------------------------------ */
.sec-products{height:156.7rem;background:var(--c-white)}
.pr-ttl{position:absolute;left:2rem;top:11rem;width:33.5rem;display:flex;flex-direction:column;gap:2.5rem}
.pr-ttl__head{display:flex;flex-direction:column;align-items:center;gap:1rem;width:33.5rem}
.pr-ttl__lead{
  width:33.5rem;text-align:center;
  font-family:var(--ff-noto);font-weight:700;font-size:var(--fs-body);line-height:3rem;letter-spacing:var(--ls-body);color:var(--c-text);
}
.pr-item{
  position:absolute;left:2rem;width:33.5rem;background:var(--c-white);border-radius:1.5rem;
  filter:var(--sd-card);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:2.5rem;padding-bottom:3.5rem;
}
/* R10（ユーザー指示）：インビザラインの「世界No.1」バッジをカード本体と“完全に同時・同じ動き”で
   フェードインさせるため、カードとバッジを 1つのラッパにまとめて fadeIn はラッパに付ける。
   ★バッジを .pr-item の子にはできない：
     ・.pr-item{overflow:hidden}（画像の上角を角丸で抜くのに必要）で、上に3pxはみ出すバッジが切れる
     ・.pr-item{filter:drop-shadow(...)} が子孫にも掛かり、バッジ自身の影(PD-6)に二重に乗る
   ラッパ方式なら上記いずれも起きず、最終状態のバッジ矩形は移動前と 1px も変わらない（実測確認済）。
   ラッパの矩形＝旧 .pr-item の矩形（y896 / h581）なので IntersectionObserver の発火位置も不変。 */
.pr-anim{position:absolute;left:2rem;width:33.5rem}
.pr-anim > .pr-item{position:relative;left:auto;top:auto}
.pr-item__img{width:33.5rem;height:23.5rem;object-fit:cover}
.pr-item__name{width:100%;padding:0 2rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.pr-item__name-tx{
  width:100%;text-align:center;
  font-family:var(--ff-noto);font-weight:700;font-size:2rem;line-height:3rem;letter-spacing:.1rem;color:var(--c-green);
}
.pr-item__line{width:100%;height:1px;background:var(--c-green)}
.pr-item__tx{
  width:100%;padding:0 2rem;display:flex;flex-direction:column;gap:1.2rem;
  font-family:var(--ff-noto);font-weight:700;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--c-text);
}

/* ------------------------------------------------------------------
   13. price（6550:3319 / 375×3158）
   ------------------------------------------------------------------ */
.sec-price{height:315.8rem;background:var(--c-ivory)}
.pc-ttl{position:absolute;left:2rem;top:11rem;width:33.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.pc-price{position:absolute;left:2rem;top:26.2rem;width:33.5rem;height:67.4rem}
.pc-price__block{position:absolute;left:0;top:0;width:33.5rem;display:flex;flex-direction:column;align-items:center;gap:2rem}
.pc-note{width:100%;display:flex;flex-direction:column;gap:.9rem}
.pc-note__tx{
  width:100%;text-align:right;
  font-family:var(--ff-noto);font-weight:700;font-size:1.2rem;line-height:1.8rem;letter-spacing:.06rem;
}
.pc-note__tx--pink{color:var(--c-pink)}
.pc-note__tx--green{color:var(--c-green)}
.pc-table{display:flex;flex-direction:column;gap:.2rem;width:100%}
.pc-table__row{display:flex;align-items:center;width:33.5rem;height:4.4rem}
.pc-table__label{flex:1 0 0;min-width:0;height:100%;background:var(--c-white);display:flex;align-items:center;padding:0 2rem}
.pc-table__label p{
  white-space:nowrap;
  font-family:var(--ff-noto);font-weight:900;font-size:1.4rem;line-height:1.4rem;letter-spacing:.07rem;color:var(--c-text);
}
.pc-table__value{flex:0 0 auto;width:13rem;height:100%;display:flex;align-items:center;padding:0 2rem}
.pc-table__value--pink{background:var(--c-pink)}
.pc-table__value--green{background:var(--c-green)}
.pc-table__value p{
  flex:1 0 0;min-width:0;text-align:right;
  font-family:var(--ff-noto);font-weight:900;font-size:1.4rem;line-height:1.4rem;letter-spacing:.07rem;color:var(--c-white);
}
.pc-price .lg-btn{position:absolute;left:0;width:33.5rem}

.pc-pay{position:absolute;left:2rem;top:98.6rem;width:33.5rem}
.pc-ded{position:absolute;left:2rem;top:213.9rem;width:33.5rem}
.pc-h3{
  width:100%;text-align:center;
  font-family:var(--ff-round);font-weight:800;font-size:var(--fs-h3);line-height:3.6rem;letter-spacing:.12rem;color:var(--c-text);
}
.pc-pay__list{position:relative;width:100%;margin-top:3.5rem;height:103.2rem}
.pc-pay__body{align-items:flex-start}
.pc-pay__body--01{padding:3.5rem 2rem 3rem;gap:0}
.pc-pay__body--02{padding:4rem 2rem;gap:1.5rem}
.pc-pay__body--03{padding:4rem 2rem;gap:1.5rem}
.pc-pay__tx{display:flex;flex-direction:column;gap:.5rem;width:100%}
.pc-pay__tx--03{gap:.6rem}
.pc-pay__name{
  white-space:nowrap;
  font-family:var(--ff-noto);font-weight:900;font-size:1.6rem;line-height:2.6rem;letter-spacing:.08rem;color:var(--c-text);
}
.pc-pay__lead{
  width:100%;
  font-family:var(--ff-noto);font-weight:700;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--c-text);
}
.pc-pay__brands{width:29.5rem;height:3.6rem;object-fit:contain}

.pc-data{display:flex;flex-direction:column;gap:1.5rem;width:100%}
/* note の高さは桃（デンタルローン）と緑（医療費控除）で Figma の値が違う。
   桃 `6550:3468` = 164×15 ／ 緑 `6550:3534` = 164×18（文字は両方 lh18）。
   両方 1.5rem にしていたため、医療費控除カードだけ Figma 929 に対し 926 と 3px 足りなかった
   （R21 で strict-checker が指摘 → Figma 実値で確認して修正）。 */
.pc-data__note{display:flex;align-items:center;gap:.8rem;height:1.5rem}
.pc-ded .pc-data__note{height:1.8rem}
.pc-data__dot{flex:0 0 auto;width:.8rem;height:.8rem;border-radius:50%}
.pc-data__dot--pink{background:var(--c-pink)}
.pc-data__dot--green{background:var(--c-green)}
.pc-data__note-tx{
  white-space:nowrap;
  font-family:var(--ff-noto);font-weight:700;font-size:1.2rem;line-height:1.8rem;letter-spacing:.036rem;
}
.pc-data__note-tx--pink{color:var(--c-pink)}
.pc-data__note-tx--green{color:var(--c-green)}
.pc-data__table{display:flex;flex-direction:column;gap:.2rem;width:100%}
.pc-data__row{display:flex;align-items:center;width:29.5rem;height:3.8rem}
.pc-data__row--tall{height:5.6rem}
.pc-data__c1{flex:0 0 auto;width:13rem;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pc-data__c1--pink{background:var(--c-pink)}
.pc-data__c1--green{background:var(--c-green)}
.pc-data__c1 p{
  text-align:center;white-space:nowrap;
  font-family:var(--ff-noto);font-weight:900;font-size:1.2rem;line-height:1.8rem;letter-spacing:.036rem;color:var(--c-white);
}
.pc-data__c2{flex:0 0 auto;width:16.3rem;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pc-data__c2--pink{background:var(--c-pink-pale)}
.pc-data__c2--green{background:var(--c-green-pale)}
.pc-data__c2 p{
  text-align:center;white-space:nowrap;
  font-family:var(--ff-noto);font-weight:900;font-size:1.2rem;line-height:1.8rem;letter-spacing:.036rem;color:var(--c-text);
}
.pc-data__c1 p.is-bold,.pc-data__c2 p.is-bold{font-weight:700}
.pc-data__c2 p.pc-data__c2-th--pink{color:var(--c-pink)}
.pc-data__c2 p.pc-data__c2-th--green{color:var(--c-green)}
.pc-data__c2 p.pc-data__sub{font-weight:700;font-size:1rem;letter-spacing:normal}
.pc-data__c2 p.pc-data__sub--green{color:var(--c-green)}

.pc-ded__body{width:100%;margin-top:3.5rem;align-items:flex-start;gap:1.5rem;padding:3rem 2rem 4rem}
.pc-ded__tx{
  display:flex;flex-direction:column;gap:.6rem;width:100%;
  font-family:var(--ff-noto);font-weight:700;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--c-text);
}

/* ------------------------------------------------------------------
   14. flow（6496:6961 / 375×2428 ※R10 で 2432→2428）
   ------------------------------------------------------------------ */
.sec-flow{height:242.8rem;background:var(--c-white)}
.fl-ttl{position:absolute;left:2rem;top:9rem;width:33.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.fl-item{position:absolute;left:2rem;width:33.5rem;display:flex;flex-direction:column;align-items:center}
.fl-card{
  width:33.5rem;background:var(--c-green-pale);border-radius:1.5rem;filter:var(--sd-card);
  display:flex;flex-direction:column;align-items:flex-start;gap:2.5rem;
  padding:3rem 2rem 4.5rem;margin-bottom:-1rem;
}
.fl-card--last{padding-bottom:4rem;margin-bottom:0}
.fl-card__img{width:29.5rem;height:22rem;object-fit:cover}  /* R10：Figma 295×221 → 295×220 */
.fl-card__tx{display:flex;flex-direction:column;gap:2rem;width:100%}
.fl-card__head{display:flex;align-items:baseline;gap:.8rem;width:100%}
.fl-card__no{
  white-space:nowrap;
  font-family:var(--ff-round);font-weight:800;font-size:4.5rem;line-height:3.5rem;color:var(--c-green);
}
.fl-card__ttl{flex:1 0 0;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.fl-card__ttl--col{gap:.8rem 1rem}
.fl-card__ttl-tx{
  white-space:nowrap;
  font-family:var(--ff-round);font-weight:800;font-size:2.4rem;line-height:3.2rem;letter-spacing:.072rem;color:var(--c-green);
  /* CSS の letter-spacing は最終文字の後ろにも入る（Figmaのトラッキングは入らない）。
     その分を打ち消さないと 01「無料矯正相談」+ 約30分 が 228px を 0.3px 超えて折り返す。 */
  margin-right:-.072rem;
}
.fl-card__time{
  background:var(--c-green);border-radius:1.3rem;padding:.6rem 1.5rem;white-space:nowrap;
  font-family:var(--ff-noto);font-weight:900;font-size:1.2rem;line-height:1.2rem;letter-spacing:.06rem;color:var(--c-white);
}
.fl-card__time-b{font-weight:700}
.fl-card__lead{
  width:100%;
  font-family:var(--ff-noto);font-weight:700;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--c-text);
}
/* Figma 6455:1505/1520/1533 ↓：ノード枠は 42x28 だが三角ベクタの実bboxは 45x30（枠を左右1.5px/下2px
   はみ出す。書き出し済 flow_arrow-down.svg の intrinsic size と一致）。中心は 375/2 で同じなので
   フロー中央寄せのまま。影は素材から外し CSS で付ける
   （SVG filter stdDeviation 5 → CSS blur 5px / offset 0,5 / rgba(0,0,0,.1)。2倍しない） */
.fl-arrow{position:relative;z-index:1;width:4.5rem;height:3rem;filter:drop-shadow(0 5px 5px rgba(0,0,0,.1))}  /* 同上：stdDeviation=5 → CSS 5px（2倍しない。_audit/STRIPE-VERIFY.md 参照） */

/* ------------------------------------------------------------------
   15. clinic（6455:1546 / 375×1778）
   ------------------------------------------------------------------ */
.sec-clinic{height:177.8rem;background:var(--c-ivory)}
.cl-ttl{position:absolute;left:2rem;top:8rem;width:33.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}

.clinic-slider{position:absolute;left:0;top:23.2rem;width:37.5rem;height:25rem;overflow:hidden}
.clinic-slider-track{display:flex;width:100%;height:100%;transition:transform .5s ease}
.clinic-slider-slide{flex:0 0 100%;width:100%;height:25rem}
.clinic-slider-slide img{width:37.5rem;height:25rem;object-fit:cover}
.clinic-slider-dots{position:absolute;left:50%;transform:translateX(-50%);top:22.6rem;display:flex;align-items:center;gap:1rem;height:.8rem}  /* Figma 6455:1573 は 80x8 @x148（5ドット）＝中心188≒375/2。仮スライド3枚でドット数が減るため、left固定ではなく中央寄せにしてドット数非依存にする */
.clinic-slider-dot{
  width:.8rem;height:.8rem;border-radius:50%;cursor:pointer;display:block;
  background:var(--c-white);border:1px solid var(--c-white);
}
.clinic-slider-dot.is-active{background:var(--c-pink);border-color:var(--c-white)}

.cl-box{
  position:absolute;left:2rem;width:33.5rem;background:var(--c-white);border-radius:1.5rem;filter:var(--sd-card);
  display:flex;flex-direction:column;align-items:center;gap:2rem;padding:3rem 2rem 4rem;
}
.cl-box__ttl{
  white-space:nowrap;text-align:center;
  font-family:var(--ff-round);font-weight:800;font-size:2rem;line-height:3rem;letter-spacing:.1rem;color:var(--c-text);
}
.cl-time{display:flex;flex-direction:column;gap:.2rem;width:100%}
.cl-time__row{display:flex;align-items:center;width:29.5rem;padding-right:.8rem}
.cl-time__row--head{height:4rem;background:var(--c-pink)}
.cl-time__row--body{height:5rem;background:var(--c-ivory)}
.cl-time__label{flex:0 0 auto;width:7.6rem;height:100%;display:flex;align-items:center;justify-content:center}
.cl-time__label p{
  text-align:center;white-space:nowrap;
  font-family:var(--ff-noto);font-weight:700;font-size:1.2rem;line-height:1.8rem;letter-spacing:.06rem;
}
.cl-time__row--head .cl-time__label p{color:var(--c-white)}
.cl-time__row--body .cl-time__label p{color:var(--c-text);line-height:1.6rem}
.cl-time__day{flex:1 0 0;min-width:0;height:100%;display:flex;align-items:center}
.cl-time__day p{
  flex:1 0 0;min-width:0;text-align:center;
  font-family:var(--ff-noto);font-weight:700;font-size:1.2rem;line-height:1.8rem;letter-spacing:.06rem;
}
.cl-time__row--head .cl-time__day p{color:var(--c-white)}
.cl-time__row--body .cl-time__day p{color:var(--c-pink);font-weight:900}
.cl-pills{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}
.cl-pill{
  width:25rem;height:4.5rem;border-radius:2.2rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-noto);font-weight:700;font-size:1.3rem;line-height:1.8rem;letter-spacing:.065rem;
  text-align:center;white-space:nowrap;
}
.cl-pill--outline{background:var(--c-white);border:2px solid var(--c-green);color:var(--c-green)}
.cl-pill--fill{background:var(--c-green);color:var(--c-white)}

.cl-map{width:29.5rem;height:22.1rem;overflow:hidden}
.cl-map iframe{width:29.5rem;height:22.1rem}
.cl-info{display:flex;flex-direction:column;gap:2rem;width:100%}
.cl-info__row{display:flex;align-items:flex-start;gap:1.2rem;width:100%}
.cl-info__ico{flex:0 0 auto;width:3.2rem;height:3.2rem;border-radius:1.6rem;display:flex;align-items:center;justify-content:center}
.cl-info__ico--blue{background:var(--c-blue)}
.cl-info__ico--pink{background:var(--c-pink)}
.cl-info__ico--green{background:var(--c-green)}
.cl-info__ico--orange{background:var(--c-orange)}
.cl-info__tx{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.cl-info__th{
  white-space:nowrap;
  font-family:var(--ff-noto);font-weight:900;font-size:1.4rem;line-height:2.2rem;letter-spacing:.112rem;color:var(--c-text);
}
.cl-info__td{
  font-family:var(--ff-noto);font-weight:700;font-size:1.2rem;line-height:2rem;letter-spacing:.06rem;color:var(--c-text);
}
.cl-info__link{
  font-family:var(--ff-noto);font-weight:700;font-size:1.2rem;line-height:2rem;letter-spacing:.06rem;
  color:var(--c-blue);text-decoration:underline;
}

/* Figma 6455:1116 ico（世界No.1バッジ）= 56x66（ノード枠）。
   影は素材から外し CSS で付ける（stdDeviation 5 → blur 5px / offset 3,3 / rgba(0,0,0,.1)。2倍しない） */
.pr-badge{filter:drop-shadow(3px 3px 5px rgba(0,0,0,.1))}  /* Figma SVG の stdDeviation=5 → CSS も 5px。実測で CSS blur 値 ≡ stdDeviation を確認済み（_audit/STRIPE-VERIFY.md）。2倍しないこと */

/* ------------------------------------------------------------------
   16. footer（6455:1691 / 375×382）
   ------------------------------------------------------------------ */
.footer{position:relative;width:100%;height:36.6rem;background:var(--c-white)}
.footer .sec__inner{height:36.6rem}
.footer__main{
  position:absolute;left:0;top:0;width:37.5rem;
  display:flex;flex-direction:column;align-items:center;gap:2rem;padding:5rem 2rem 6rem;
}
.footer__logo{display:flex;align-items:center;gap:.5rem}
.footer__logo-img{width:6rem;height:6rem;object-fit:contain}
.footer__brand{display:flex;flex-direction:column;gap:.8rem;color:var(--c-text)}
.footer__brand-1{font-family:var(--ff-noto);font-weight:700;font-size:1.2rem;line-height:1.2rem;letter-spacing:.036rem;white-space:nowrap}
.footer__brand-2{font-family:var(--ff-noto);font-weight:700;font-size:1rem;line-height:1rem;letter-spacing:.03rem;white-space:nowrap}
.footer__nav{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%}
.footer__nav-item{
  width:100%;text-align:center;
  font-family:var(--ff-noto);font-weight:700;font-size:1.4rem;line-height:2rem;letter-spacing:.042rem;color:var(--c-text);
}
/* ユーザー指示：ピンクは「ホバーの見本」。既定は黒、hover / focus-visible でピンク。 */
.footer__nav-item{transition:color .2s ease}
.footer__nav-item:hover,
.footer__nav-item:focus-visible{color:var(--c-pink)}
.footer__copyright{
  position:absolute;left:0;top:33rem;width:37.5rem;height:3.6rem;background:var(--c-copyright);
  display:flex;align-items:center;justify-content:center;padding:1rem 2rem;
}
.footer__copyright-tx{
  flex:1 0 0;min-width:0;text-align:center;white-space:pre-wrap;
  font-family:var(--ff-noto);font-weight:500;font-size:1rem;line-height:1.6rem;letter-spacing:.03rem;color:var(--c-text);
}

/* ------------------------------------------------------------------
   17. ドロワー（Figma外の機能要素・参考サイト仕様）
   ------------------------------------------------------------------ */
/* ユーザー指示：地色は --c-ivory の透過なし／CTAボタンは無し／各項目下に罫線（taishi ドロワー相当） */
.drawer{
  position:fixed;inset:0;z-index:300;background:var(--c-ivory);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.drawer.is-open{opacity:1;visibility:visible}
.drawer__inner{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.drawer__nav{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:0;width:29.5rem}
/* R3：文字は中央揃え（罫線は項目幅いっぱいのまま＝中央基準の左右対称） */
.drawer__item{
  display:block;width:100%;padding:1.8rem .2rem;text-align:center;
  border-bottom:1px solid var(--c-line-fixed);
  font-family:var(--ff-noto);font-weight:700;font-size:1.6rem;line-height:2.4rem;color:var(--c-text);
  transition:color .2s ease;
}
.drawer__item:hover,
.drawer__item:focus-visible{color:var(--c-pink)}
body.is-drawer-open{overflow:hidden}

/* ------------------------------------------------------------------
   18. PC（481px以上）— header / footer-fixed を「PC幅に合わせたデザイン」にする
       参考 taishi-orthodontics.com を1440pxで実測した構造に合わせる。
       SP（480px以下）は Figma 6455:1705 / 6455:1727 のまま（このブロックは一切効かない）。
       R3：BP 768 → 481／header 45→80px／footer-fixed 60→80px・文字10→14px。
   ------------------------------------------------------------------ */
@media (min-width:481px){

  /* PC は rem を 10px に固定（列375px中央・外側グレー）。480px以下は 100vw/37.5 で比例拡大。 */
  html{font-size:10px}

  /* --- header：告知バー(26px)を畳み、ロゴ左端／ボタン3つを右端に広げる（高さ80px） --- */
  .header__notice{display:none}                      /* PCでは非表示 → header高 71px → バーのみ */
  .header__bar{height:6.5rem}                        /* R6：70px → 65px（ユーザー指示。R4は80→70） */
  .header__inner{
    width:100%;display:flex;align-items:center;
    padding-left:1.6rem;                             /* taishi .header__left の padding-left:16px 相当 */
  }
  /* margin-right:auto で余白を吸ってボタンを右端へ。flex:1 にすると <a> の当たり判定が
     ヘッダー全幅に広がってしまうため、幅は内容のまま。
     R3：ロゴを 1.4倍（216.1x35 → 実測 299.1x49）。em 組みなので font-size だけで相似拡大する。
     min() の第2項は、ボタン3つ＋左padding16px＋逃げ9px を
     ビューポート幅から差し引いた残りにロゴが収まるための上限。
     R4：ボタンが 60→70px になり占有幅が 180→210px に増えたため 20.5rem → 23.5rem に導出し直した。
     R6：header 65px 化でボタンが 65x65x3=**195px** に減ったため、
         16（左padding）+ 195（ボタン3つ）+ 9（逃げ）= **220px → 22rem** に導出し直した
         （21.7 はロゴ幅/フォントサイズ比 実測 21.36 に安全側の余裕を持たせた係数で、R3から不変）。
     ★1.4rem に到達する幅は 539px → **約524px** に改善する
       （(100cqw - 220) / 21.7 >= 14  ⇔  100cqw >= 220 + 303.8 = 523.8px）。
       これより狭い幅では 16 + ロゴ幅 + 195 <= 100cqw を満たすよう自動縮小し、
       クリアランス > 0（重なりなし）を保つ。 */
  .header__logo{
    position:static;flex:0 0 auto;margin-right:auto;
    font-size:min(1.4rem, calc((100cqw - 22rem) / 21.7));  /* R7：100vw → 100cqw（SB幅を含まない .header 実幅に追従。1.4倍到達524px は維持） */
  }
  .header__btn{position:static;flex:0 0 auto;width:6.5rem;height:6.5rem}  /* R6：70x70 → 65x65（＝header と同じ高さ・ユーザー明示要望） */
  .header__btn img,
  .header__btn svg{width:6.5rem;height:6.5rem}                            /* 中身も相似拡大（正方形なので比率不変） */
  /* 告知バーが消え、バーが65pxになるぶん、アンカー時の header 逃げも 65px にそろえる */
  section[id],.footer{scroll-margin-top:6.5rem}

  /* --- header が SP(71px) より 6px 低くなるぶん、コンテンツを 6px 上げる ---
     header は fixed で MV に重なるため、Figma の「header 下端 → mv catch 上端 = 25px」を
     PC でも保つ必要がある。PC header = 65px なので catch を置くべき位置は 65+25 = 90px、
     一方 catch の自然位置（オフセット0）は 96px ∴ 必要なオフセットは -6px。
     R4：header 80→70px で padding-top:.9rem(+9px) → margin-top:-1px。
     R6：header 70→65px にしたため margin-top:-1px → **-6px**。
     ★負のオフセットなので padding では表現できない（margin-top を使う）。
     ★.wrapper に transform/filter/will-change は付けない（fixed 子孫の包含ブロック化を避ける）。
     padding-bottom は footer-fixed(80px) ぶんの逃げ＝**8rem のまま変更しない**
     （変えるとコピーライト帯が固定バーに隠れる：R1 の不具合 D-1）。 */
  .wrapper{margin-top:-6px;padding-bottom:8rem}

  /* --- footer-fixed：5項目を flex:1 でビューポート全幅に均等配置（taishi .bottom-nav 相当） --- */
  .footer-fixed{height:8rem}                         /* R3：60px → 80px */
  .footer-fixed__inner{width:100%;display:flex;align-items:stretch}
  .footer-fixed__cell-bg,
  .footer-fixed__line{display:none}                  /* SP用の絶対配置セル背景・区切り線は使わない */
  /* R3：文字 10px → 14px（2行組。行間も比例させて 15px → 22px、字間も 0.05em 相当を維持） */
  .footer-fixed__item{
    position:static;transform:none;flex:1 1 0;min-width:0;
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;line-height:2.2rem;letter-spacing:.07rem;
  }
  /* 区切り線は白セルどうしの境界3本（Figma 6455:1727 と同じ本数・同じ色）。
     4本目の境界は右端CTAの色変わりが境界になるため引かない。 */
  .footer-fixed__item:nth-of-type(-n+3){border-right:1px solid var(--c-line-fixed)}
  /* 右端CTA：地色 #F5A037 ＋ 45°/白15%ストライプ（Figma 6455:1730 / 6455:1731）。
     ::after ではなく背景2枚重ねにして、セル内のテキストを覆わないようにする。 */
  .footer-fixed__item--cta{
    background-color:var(--c-orange);
    background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.15) 0 1.8px,rgba(255,255,255,0) 1.8px 6px);
  }
}

/* ------------------------------------------------------------------
   19. case.html（下層ページ：症例一覧）
       中身は index.html の case セクションのうち Figma 6465:4412 "main"（ttl 〜 btn）と 1:1。
       セクション内の座標（cs-ttl top:12.5rem 〜 sm-btn bottom:222.9rem）は index と同じまま使う。

       ・単独ページなので fixed な header ぶんの逃げが要る。セクション内の座標
         （cs-ttl top:12.5rem 〜 sm-btn bottom:222.9rem）は index と同じまま据え置き、
         セクション側の padding-top だけで全体の縦位置を決める（＝index との座標差ゼロ）。

       ・【R6・ユーザー確定値】上余白（header 下端 → cs-ttl 上端）を 125px → **60px**、
         下余白（sm-btn 下端 → セクション下端）を 125px → **80px** にした。
         padding-top は「上余白 60px」を SP / PC の両方で成立させる値として導出する：
           SP  : header 71px。cs-ttl の文書上のY = padding + 125 → 必要 131 ∴ padding = 6px
           PC  : header 65px ＋ .wrapper{margin-top:-6px}（§18）でセクション上端が -6px。
                 cs-ttl のY = -6 + padding + 125 → 必要 125 ∴ padding = 6px
         → **どちらも 0.6rem** で一致する（R5 の 7.1rem が SP/PC 両方で 125px になったのと同じ構造）。
       ・【R11】8〜11歳が 3行→5行・3枚→4枚になり btn が +218px 下がった（top 195.1→216.9rem）。
         高さ = 0.6（padding）+ 222.9（btn 下端）+ 8（下余白）= **231.5rem（2315px）**
         → .sec__inner（height:100%）の高さは content-box の 230.9rem になる。
       ・上部の虹（case_rainbow）・雲（case_cloud）は R6 でユーザー指示により非表示
         （HTML から削除）。残る deco の最上端は circle-deco top:39.9rem なので、
         上を 65px 詰めても切れない。
   ------------------------------------------------------------------ */
.sec-case--page{height:251.1rem;padding-top:.6rem}

/* ------------------------------------------------------------------
   20. モーション低減
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .clinic-slider-track{transition:none !important}
}

/* ------------------------------------------------------------------
   21. スクロールフェードイン（参考サイト taishi-orthodontics.com 準拠）
   ------------------------------------------------------------------
   参考サイトの `js/animation.js` と `scss/style.css` を実測して仕様を確定した値：
     初期  : opacity:0 / translateY(30px)
     遷移  : opacity .8s ease, transform .8s ease
     発火  : IntersectionObserver rootMargin '0px 0px -10% 0px' / 一度きり
             ※threshold は参考サイトの .2 ではなく **0**（本案件は 1425px 級の背高ブロックがあり、
               .2 だと上端が画面に入ってから約400pxスクロールするまで空白のままになる。main.js 参照）
             ※**MV（.sec-mv）は監視せず読み込み時に再生**（実機スマホでは MV 下部が画面外のため）
     遅延  : --delay-1〜6 ＝ .2s 刻み
   移動量 30px は参考サイトと同じ固定px（SPの等比拡大に追従させない＝動きの量は画面幅に依らない）。

   ★付与方針（ユーザー指示 2026-09-15）：
     「全てを動かすのではなく、見出しなど見えていた方がストレスがないものはそのままにし、
       イラストやあしらい、コンテンツを主に動かす」
     → 見出し（.sec-ttl__* / .pm-ttl / .ft-ttl / .cs-ttl / .pr-ttl / .pc-ttl / .fl-ttl /
        .cl-ttl / .tp-lead__ttl / .cs-group__ttl / .pc-h3 /
        .cl-box__ttl / .cs-risks__ttl）には**付けない**。
     ★R10（ユーザー指示 2026-09-16）の例外：**features 01〜07 だけは見出しごと動かす**。
       fadeIn は .feat__main ではなく **.feat（＝.feat__label + .feat__ttl + .feat__main を含む塊）**
       に付ける。.feat の内側に他の fade 対象は無い（入れ子0件を実測で確認）。
     → カード・写真・イラスト・前景のあしらい（.deco のうち .deco-clip の外にあるもの）に付ける。
     → .deco-clip の中の背景あしらいには**付けない**（クリップで一部が切れているため、
        動かすと欠けたまま滑って見えて不自然になる）。

   ★【将来の再発防止・重要】CSS 側で transform を持つ要素には付けないこと。
     `.active{transform:none}` と モーション低減時の `transform:none !important` が、
     その要素の回転・中央寄せ translate 等を**無言で消す**（現状は該当0件だが、
     該当しうる候補：.mv__catch-e / .pm-ribbon__tx / .clinic-slider-dots / .cs-pager__dots /
     .footer-fixed__item）。どうしても付けたい場合は、その要素だけ `.active` を個別に上書きして
     元の transform を書き戻すこと。（R9 strict-checker の申し送り）

   ★付けてはいけない要素（再発防止）：
     ・.clinic-slider-track … JS が style.transform を直接書き換える（translateX で送る）ため衝突する
     ・.case__slide / .swiper-slide … Swiper の管理下。ループ複製もされるので個別に付けない
       （スライダーは .case__slider-wrap / .clinic-slider ごと1つの塊として動かす）
     ・.header / .footer-fixed / .drawer … 常時表示の固定要素
   ------------------------------------------------------------------ */
.fadeIn,
.fadeIn_left,
.fadeIn_right,
.fadeIn_zoom{
  opacity:0;
  transition:opacity .8s ease, transform .8s ease;
}
.fadeIn      {transform:translateY(30px)}
.fadeIn_left {transform:translateX(-30px)}
.fadeIn_right{transform:translateX(30px)}
.fadeIn_zoom {transform:scale(.88)}

.fadeIn.active,
.fadeIn_left.active,
.fadeIn_right.active,
.fadeIn_zoom.active{
  opacity:1;
  transform:none;
}

.fadeIn--delay-1{transition-delay:.2s}
.fadeIn--delay-2{transition-delay:.4s}
.fadeIn--delay-3{transition-delay:.6s}
.fadeIn--delay-4{transition-delay:.8s}
.fadeIn--delay-5{transition-delay:1s}
.fadeIn--delay-6{transition-delay:1.2s}

/* ★モーション低減時は「最終状態で即表示」にする。
   参考サイトは transition だけ殺していて初期状態（opacity:0）が残るため、
   環境によっては要素が見えないままになりうる。ここでは opacity/transform ごと打ち消す。
   検証（verify/ の各ゲート・撮影）もこの状態を使うと、アニメ導入前とまったく同じ絵になり
   既存の期待値・前巡スクショがそのまま使える。 */
@media (prefers-reduced-motion: reduce){
  .fadeIn,.fadeIn_left,.fadeIn_right,.fadeIn_zoom{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}