@charset "UTF-8";
/* ぴったりブラ診断 — SHIROHATO
   設計の下敷き: ICB 30th (crosset.onward.co.jp) のエディトリアル文法。
     ・色を使わない(紙・墨・グレー4段)。彩度は下着の深赤1色だけ、しかも機能表示にしか使わない
     ・特大と極小しかないタイポ。詰める(ls .01em)と開ける(ls .2em)の二極
     ・装飾は1pxのヘアライン格子だけ。角丸は使わない。面は正円だけ
     ・縦の余白を大きく、左右は非対称に
     ・動きは遅く小さく。blur / 下からせり上がる文字 / 0.08秒刻みのずらし
   ただし診断UIなので、選択状態・進捗・CTAの可読性は最優先で担保する。 */

/* ══════════════════════════════════════════════════════════════
   トークン
   ══════════════════════════════════════════════════════════════ */
#fitApp {
  --paper:  #FFFFFF;
  --cream:  #FAF8F5;          /* イラストの紙色と同じ */
  --ink:    #0E0D0D;
  --g1:     #767272;          /* 本文の次に強い文字 */
  --g2:     #9A9494;          /* キャプション */
  --g3:     #C7C3C0;          /* 非活性 */
  --line:   #DCD8D4;
  --line-w: #EFEBE7;
  --accent: #7A2E3C;          /* イラストの下着と同色。進捗とぴったり度だけに使う */

  --en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --mc: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --gut: 20px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.25,.1,.25,1);

  /* もとは body に当てていたぶん。W2本店のテンプレートに載せるので、
     診断ページ全体を包む #fitApp に移してある。
     ★ overflow-x はここに書かない。div に overflow を付けるとスクロール枠になり、
       進捗ヘッダー（.hud の position:sticky）が止まらなくなる。
       横はみ出しは、実際にずれるアニメーションの入れ物 .stage 側で切る。 */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--jp);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1000px) { #fitApp { --gut: 35px; } }

/* ══ W2のレイアウト表 ══════════════════════════════════════════
   本店のカスタムページは、中身を <table id="tblLayout"> の中に置く。
   **表の幅は auto（中身なりの幅）** なので、そのままだと
   質問ページでは 900px・結果ページでは 1400px と **画面ごとに外箱の幅が変わり、
   しかも左に寄る**。本店のコンテンツ幅いっぱいに広げて固定する。
   セルの余白と間隔も落として、本店のパンくず・ヘッダーと左右の端をそろえる。
   ★ ここだけ #fitApp の外を指す。style.css は診断ページでしか読まないので影響は出ない。
   ★ table-layout: fixed にはしないこと。左右の空セルと3等分されて中身が潰れる。 */
#tblLayout { width: 100%; border-spacing: 0; }
#tblLayout > tbody > tr > td { padding: 0; }

#fitApp, #fitApp *, #fitApp *::before, #fitApp *::after { box-sizing: border-box; }
#fitApp ::selection { color: #fff; background: var(--ink); }

/* ★ 本店の /Css/reset.css は `:where(img, svg) { width: 100% }` を当てている。
   詳細度が0なのでここで戻せるが、width まで指定しておかないと絵がすべて横幅いっぱいに伸びる。 */
#fitApp img, #fitApp svg { width: auto; max-width: 100%; height: auto; display: block; vertical-align: top; }

#fitApp button { font: inherit; color: inherit; }
#fitApp a { color: inherit; text-decoration: none; transition: opacity .3s; }
@media (min-width: 1000px) { #fitApp a:hover { opacity: .5; } }

/* ★ 本店の reset は見出し・段落・リストの余白を0に、文字サイズを 1.4rem に揃えている
   （`:where(h1,…,a)`）。この診断のCSSはブラウザの既定値の上に書いてあるので、
   クラスで指定していない箇所が詰まってしまう。既定値に戻してから効かせる。
   下に並ぶクラス指定（#fitApp .xxx = 詳細度 1,1,0 以上）のほうが必ず強い。 */
#fitApp h1 { font-size: 2em;    margin: .67em 0; }
#fitApp h2 { font-size: 1.5em;  margin: .83em 0; }
#fitApp h3 { font-size: 1.17em; margin: 1em 0; }
#fitApp h4 { font-size: 1em;    margin: 1.33em 0; }
#fitApp h5 { font-size: .83em;  margin: 1.67em 0; }
#fitApp h6 { font-size: .67em;  margin: 2.33em 0; }
#fitApp p  { margin: 1em 0; }
#fitApp dl { margin: 1em 0; }
#fitApp dd { margin-left: 40px; }
#fitApp ul { margin: 1em 0; padding-left: 40px; list-style: disc; }
#fitApp ol { margin: 1em 0; padding-left: 40px; list-style: decimal; }
#fitApp li { list-style: inherit; }

/* 極小ラベル — 開ける側の極 */
#fitApp .lbl{
  font-family: var(--en); font-size: 10px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--g2);
}

#fitApp .linkish{
  background: none; border: 0; padding: 0 0 1px; cursor: pointer;
  font-family: var(--jp); font-size: 11px; letter-spacing: .08em;
  color: var(--g2); border-bottom: 1px solid var(--line);
}
#fitApp .linkish:hover{ color: var(--ink); border-color: var(--ink); }

/* ══════════════════════════════════════════════════════════════
   HUD — お似合い理解度
   ══════════════════════════════════════════════════════════════ */
#fitApp .hud{
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-w);
}
#fitApp .hud[hidden]{ display: none; }
#fitApp .hud__inner{
  max-width: 1400px; margin: 0 auto; padding: 12px var(--gut) 11px;
  display: flex; align-items: center; gap: 14px;
}
#fitApp .hud__gauge{ position: relative; width: 40px; height: 40px; flex: none; }
#fitApp .ring{ width: 40px; height: 40px; transform: rotate(-90deg); }
#fitApp .ring circle{ fill: none; stroke-width: 1; }
#fitApp .ring__bg{ stroke: var(--line); }
#fitApp .ring__fg{
  stroke: var(--accent); stroke-linecap: butt;
  stroke-dasharray: 119.38; stroke-dashoffset: 119.38;
  transition: stroke-dashoffset 1s var(--slow);
}
#fitApp .hud__pct{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--en); font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
#fitApp .hud__text{ flex: 1 1 auto; min-width: 0; }
#fitApp .hud__label{
  margin: 0 0 3px; font-family: var(--en); font-size: 9px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--g2); line-height: 1;
}
#fitApp .hud__chapter{
  margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .04em; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#fitApp .hud__badges{ display: flex; gap: 5px; flex: none; }
#fitApp .hud__badge{
  width: 20px; height: 20px; border-radius: 100%;
  border: 1px solid var(--line); color: var(--g3);
  display: grid; place-items: center; font-size: 9px;
  transition: all .8s var(--slow);
}
#fitApp .hud__badge.is-on{ border-color: var(--ink); background: var(--ink); color: #fff; }
#fitApp .hud__quit{
  flex: none; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer;
  font-family: var(--en); font-size: 9px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--g2); padding: 6px 0 4px;
}
#fitApp .hud__quit:hover{ color: var(--ink); border-color: var(--ink); }
#fitApp .hud__bar{ height: 1px; background: var(--line-w); }
#fitApp .hud__bar span{ display: block; height: 100%; width: 0; background: var(--accent); transition: width 1s var(--slow); }

/* ══════════════════════════════════════════════════════════════
   ページング
   ══════════════════════════════════════════════════════════════ */
/* 画面の切り替えは左右に 22〜26px ずらすので、そのぶんの横はみ出しをここで切る。
   ★ overflow-x: clip を使うこと。hidden にすると .stage がスクロール枠になり、
     中の .page.is-out（position:absolute）の見え方と、ページ全体の縦スクロールが狂う。 */
#fitApp .stage{ position: relative; min-height: 72vh; overflow-x: clip; }
#fitApp .page{ padding: 52px var(--gut) 100px; max-width: 900px; margin: 0 auto; }
#fitApp .page--wide{ max-width: 1400px; }

#fitApp .page.is-in{ animation: pgIn .8s var(--slow) both; }
#fitApp .page.is-back{ animation: pgInBack .8s var(--slow) both; }
#fitApp .page.is-out{ animation: pgOut .34s var(--ease) both; position: absolute; inset: 0; pointer-events: none; }
#fitApp .page.is-outBack{ animation: pgOutBack .34s var(--ease) both; position: absolute; inset: 0; pointer-events: none; }

@keyframes pgIn     { from { opacity: 0; transform: translate3d(26px,0,0); filter: blur(8px); }
                      to   { opacity: 1; transform: none; filter: none; } }
@keyframes pgInBack { from { opacity: 0; transform: translate3d(-26px,0,0); filter: blur(8px); }
                      to   { opacity: 1; transform: none; filter: none; } }
@keyframes pgOut    { from { opacity: 1; } to { opacity: 0; transform: translate3d(-22px,0,0); filter: blur(6px); } }
@keyframes pgOutBack{ from { opacity: 1; } to { opacity: 0; transform: translate3d(22px,0,0); filter: blur(6px); } }

/* 0.08秒刻みでずらして立ち上げる(同時に来させない) */
#fitApp .rise > *{ animation: rise 1s var(--slow) both; }
#fitApp .rise > *:nth-child(1){ animation-delay: .00s; }
#fitApp .rise > *:nth-child(2){ animation-delay: .08s; }
#fitApp .rise > *:nth-child(3){ animation-delay: .16s; }
#fitApp .rise > *:nth-child(4){ animation-delay: .24s; }
#fitApp .rise > *:nth-child(5){ animation-delay: .32s; }
#fitApp .rise > *:nth-child(6){ animation-delay: .40s; }
#fitApp .rise > *:nth-child(7){ animation-delay: .48s; }
@keyframes rise { from { opacity: 0; transform: translate3d(0,18px,0); } to { opacity: 1; transform: none; } }

/* 画像はぼけから合焦する */
#fitApp .blurIn{ animation: blurIn 1.6s var(--slow) both; }
@keyframes blurIn { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }

/* マスクの下から文字がせり上がる */
#fitApp .clipIn{ overflow: hidden; display: block; }
#fitApp .clipIn > em{ display: block; font-style: normal; animation: clipUp 1.2s var(--slow) both; }
@keyframes clipUp { from { transform: translateY(105%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #fitApp .page.is-in, #fitApp .page.is-back, #fitApp .page.is-out, #fitApp .page.is-outBack,
  #fitApp .rise > *, #fitApp .blurIn, #fitApp .clipIn > em{ animation: none !important; }
  #fitApp .ring__fg, #fitApp .hud__bar span{ transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   共通パーツ
   ══════════════════════════════════════════════════════════════ */
#fitApp .eyebrow{
  font-family: var(--en); font-size: 10px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--g2); margin: 0 0 18px;
}
#fitApp .rule{ border: 0; border-top: 1px solid var(--line); margin: 64px 0; }

/* ボタン: 角丸を使わない。PCの主要導線だけ正円 */
#fitApp .btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 19px 44px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--ink); color: #fff; cursor: pointer;
  font-family: var(--jp); font-size: 13px; font-weight: 500; letter-spacing: .18em;
  transition: background .4s var(--ease), color .4s var(--ease);
}
#fitApp .btn:hover{ background: #fff; color: var(--ink); opacity: 1; }
#fitApp .btn:disabled{ border-color: var(--g3); background: var(--g3); color: #fff; cursor: not-allowed; }
#fitApp .btn--ghost{ background: transparent; color: var(--ink); }
#fitApp .btn--ghost:hover{ background: var(--ink); color: #fff; }
#fitApp .btn--block{ display: flex; width: 100%; }
#fitApp .btn--sm{ padding: 13px 28px; font-size: 12px; }
#fitApp .btn--circle{
  width: 136px; height: 136px; border-radius: 100%; padding: 0;
  flex-direction: column; gap: 5px; font-size: 12px; letter-spacing: .16em;
}
#fitApp .btn--circle small{
  font-family: var(--en); font-size: 9px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; opacity: .55;
}
@media (max-width: 767px) {
  #fitApp .btn--circle{ width: 100%; height: auto; border-radius: 0; padding: 19px 0; flex-direction: row; gap: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   オープニング
   ══════════════════════════════════════════════════════════════ */
#fitApp .hero{ padding-top: 0; max-width: 1400px; }
#fitApp .hero__fv{ position: relative; margin: 0 calc(var(--gut) * -1); background: var(--cream); overflow: hidden; }
#fitApp .hero__fv img{ width: 100%; }
/* ★ イラストは「左に人物・右は余白」という構図で、**右の余白には見出しを置く前提**。
   見出しが画像の下へ落ちる幅（900px未満）では余白だけが右に残り、
   **人物が左に寄って見える**。そこで右の余白を切り落として人物を中央に置く。
   object-position の 2% は、人物（元画像の x100〜830）が中央に来る値。
   ★ 元画像を差し替えたら、人物の位置が変わるのでこの値を測り直すこと。 */
@media (max-width: 899px) {
  #fitApp .hero__fv img{ aspect-ratio: 1 / 1; object-fit: cover; object-position: 2% center; }
}
/* イラストは左に人物・右に余白という構図なので、見出しは右の余白に置く。
   幅が狭いときは重なって読めなくなるので、画像の下へ落とす。 */
#fitApp .hero__fvtxt{ padding: 26px var(--gut) 34px; }
@media (min-width: 900px) {
  #fitApp .hero__fvtxt{
    position: absolute; left: auto; right: var(--gut); bottom: 11%;
    width: min(44%, 520px); padding: 0;
  }
}
#fitApp .hero__ttl{
  font-family: var(--jp); font-weight: 500;
  font-size: clamp(32px, 8.6vw, 104px); line-height: .94; letter-spacing: .01em; margin: 0;
}
#fitApp .hero__en{
  font-family: var(--en); font-size: clamp(9px, 1.3vw, 12px); font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: var(--g1); margin: 16px 0 0;
}
#fitApp .hero__body{ padding-top: 72px; display: grid; gap: 0; }
@media (min-width: 900px) { #fitApp .hero__body{ grid-template-columns: 1fr 1fr; gap: 0 80px; align-items: start; } }
#fitApp .hero__lead{ font-size: 14px; line-height: 2.15; letter-spacing: .1em; margin: 0 0 44px; }
#fitApp .hero__lead b{ font-weight: 700; }

/* 数字は特大・単位は極小 */
#fitApp .facts{ border-top: 1px solid var(--ink); }
#fitApp .fact{
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
#fitApp .fact__t{ font-size: 11px; letter-spacing: .12em; color: var(--g1); }
#fitApp .fact__n{ font-family: var(--en); font-size: clamp(28px, 4.6vw, 48px); font-weight: 300; line-height: .9; letter-spacing: -.01em; }
#fitApp .fact__n small{ font-family: var(--jp); font-size: 11px; font-weight: 400; letter-spacing: .14em; margin-left: 7px; }

#fitApp .steps{ margin: 48px 0 0; border-top: 1px solid var(--ink); }
#fitApp .step{ display: grid; grid-template-columns: 44px 1fr; gap: 0 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
#fitApp .step__n{ font-family: var(--en); font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--g3); }
#fitApp .step__t{ margin: 0 0 5px; font-size: 14px; font-weight: 500; letter-spacing: .06em; }
#fitApp .step__d{ margin: 0; font-size: 12px; line-height: 1.95; letter-spacing: .06em; color: var(--g1); }

#fitApp .hero__cta{ margin: 60px 0 0; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
#fitApp .hero__note{ font-size: 11px; line-height: 2.05; letter-spacing: .06em; color: var(--g2); margin: 0; flex: 1 1 260px; }

/* ══════════════════════════════════════════════════════════════
   章の扉
   ══════════════════════════════════════════════════════════════ */
#fitApp .chapter{ padding-top: 14vh; padding-bottom: 14vh; }
#fitApp .chapter__no{ font-family: var(--en); font-size: 11px; font-weight: 500; letter-spacing: .24em; color: var(--g3); margin: 0 0 30px; }
#fitApp .chapter__ttl{ font-size: clamp(38px, 11vw, 92px); font-weight: 500; line-height: .96; letter-spacing: .01em; margin: 0; }
#fitApp .chapter__sub{
  font-family: var(--en); font-size: 11px; font-weight: 500; letter-spacing: .26em;
  text-transform: uppercase; color: var(--g2); margin: 20px 0 0;
}
#fitApp .chapter__lead{ font-size: 13px; line-height: 2.15; letter-spacing: .1em; color: var(--g1); margin: 44px 0 0; max-width: 30em; }
#fitApp .chapter__cta{ margin: 58px 0 0; }

/* ══════════════════════════════════════════════════════════════
   設問
   ══════════════════════════════════════════════════════════════ */
#fitApp .q__head{ margin: 0 0 42px; }
#fitApp .q__meta{
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 20px;
  font-family: var(--en); font-size: 11px; font-weight: 500; letter-spacing: .18em; color: var(--g3);
}
#fitApp .q__meta b{ font-size: 30px; font-weight: 300; letter-spacing: 0; color: var(--ink); line-height: 1; }
#fitApp .q__ttl{ font-size: clamp(20px, 4.4vw, 33px); font-weight: 500; line-height: 1.45; letter-spacing: .02em; margin: 0; }
#fitApp .q__hint{ font-size: 11.5px; line-height: 1.95; letter-spacing: .1em; color: var(--g2); margin: 16px 0 0; }

/* 選択肢 — 枠ではなく1pxの格子 */
#fitApp .opts{ display: grid; border-top: 1px solid var(--ink); border-left: 1px solid var(--line); margin: 0 0 34px; }
/* ★ スマホでは絵つきの選択肢を**2列**にする。列の数を選択肢の数で変えないこと。
   - 1列だと1つ目の選択肢だけで画面が埋まり、**ほかの選択肢が見えない**ので選べない。
   - 一方で選択肢の数ごとに列数を変えると（もとは2択と4択だけ2列、3択と5択は1列）、
     設問をめくるたびに並びと指の位置が変わって押しにくい。
   → **数に関わらず2列**に統一する。
   ★ `.opts--1` は絵のない一覧（お悩み12択・予算）なので1列のまま。横に割ると読みにくい。
   ★ 700px は .opts--5 側（下の方にある）と同じ値にしておくこと。
     片方が640pxだと、640〜699pxの幅で「5択だけ3列」という食い違いが戻る。 */
#fitApp .opts--1{ grid-template-columns: 1fr; }
#fitApp .opts--2,
#fitApp .opts--3,
#fitApp .opts--4{ grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) {
  #fitApp .opts--3{ grid-template-columns: repeat(3, 1fr); }
  #fitApp .opts--4{ grid-template-columns: repeat(4, 1fr); }
}

#fitApp .opt{
  position: relative; display: flex; align-items: center; width: 100%;
  text-align: left; cursor: pointer; background: transparent;
  border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 22px 48px 22px 22px;
  transition: background .45s var(--ease), color .45s var(--ease);
}
#fitApp .opt:hover{ background: var(--cream); opacity: 1; }
#fitApp .opt.is-on{ background: var(--ink); color: #fff; }
#fitApp .opt.is-on .opt__desc, #fitApp .opt.is-on .opt__idx{ color: rgba(255,255,255,.55); }
#fitApp .opt.is-on::after{
  content: ""; position: absolute; right: 22px; top: 50%; width: 14px; height: 7px; margin-top: -6px;
  border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg);
  animation: tick .5s var(--slow) both;
}
@keyframes tick { from { opacity: 0; transform: rotate(-45deg) translate(-5px,-5px); } to { opacity: 1; transform: rotate(-45deg); } }
#fitApp .opt__idx{ font-family: var(--en); font-size: 10px; font-weight: 500; letter-spacing: .12em; color: var(--g3); width: 26px; flex: none; transition: color .45s; }
#fitApp .opt__label{ font-size: 15px; font-weight: 500; letter-spacing: .06em; line-height: 1.5; display: block; }
#fitApp .opt__desc{ font-size: 11.5px; letter-spacing: .06em; line-height: 1.8; color: var(--g1); display: block; margin-top: 5px; transition: color .45s; }

/* 画像タイル型 */
#fitApp .opt--tile{ flex-direction: column; align-items: stretch; padding: 0; }
#fitApp .opt--tile .opt__fig{ position: relative; background: var(--cream); overflow: hidden; }
#fitApp .opt--tile .opt__fig img{ width: 100%; aspect-ratio: 1/1; object-fit: contain; transition: transform 1.4s var(--slow); }
#fitApp .opt--tile:hover .opt__fig img{ transform: scale(1.045); }
#fitApp .opt--tile .opt__cap{ padding: 16px 18px 20px; display: flex; align-items: baseline; gap: 10px; }
#fitApp .opt--tile .opt__label{ font-size: 13.5px; }
#fitApp .opt--tile .opt__desc{ margin-top: 4px; font-size: 11px; }
#fitApp .opt--tile.is-on::after{ right: 18px; top: auto; bottom: 25px; margin-top: 0; }
#fitApp .opt--tile .opt__no{
  position: absolute; left: 12px; top: 11px; z-index: 1;
  font-family: var(--en); font-size: 10px; font-weight: 500; letter-spacing: .12em; color: var(--g1);
}

/* 複数選択 */
#fitApp .opt--multi{ padding-left: 56px; }
#fitApp .opt--multi .opt__box{
  position: absolute; left: 22px; top: 50%; margin-top: -7px;
  width: 14px; height: 14px; border: 1px solid var(--g3); border-radius: 0; transition: all .4s var(--ease);
}
#fitApp .opt--multi.is-on .opt__box{ background: #fff; border-color: #fff; }
#fitApp .opt--multi.is-on::after{ left: 25px; right: auto; width: 8px; height: 4px; margin-top: -3px; border-color: var(--ink); }
#fitApp .opt--multi.is-locked{ color: var(--g3); cursor: not-allowed; }
#fitApp .opt--multi.is-locked:hover{ background: transparent; }
#fitApp .opt--multi.is-locked .opt__desc{ color: var(--g3); }

#fitApp .multi__count{
  display: flex; align-items: baseline; justify-content: flex-end; gap: 9px;
  margin: -20px 0 30px; font-family: var(--en); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--g2);
}
#fitApp .multi__count b{ font-size: 26px; font-weight: 300; color: var(--ink); line-height: 1; }

/* サイズ入力 */
#fitApp .sizebox{ border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 30px 0; margin: 0 0 30px; }
#fitApp .sizebox__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
#fitApp .field label{ display: block; margin-bottom: 11px; }
#fitApp .field select{
  width: 100%; padding: 13px 0; font-family: var(--jp); font-size: 16px; letter-spacing: .06em;
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  color: var(--ink); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 9px) calc(50% + 1px), calc(100% - 4px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
#fitApp .field select:focus{ outline: none; border-bottom-width: 2px; }
#fitApp .sizebox__help{ margin: 24px 0 0; font-size: 11.5px; line-height: 2.05; letter-spacing: .08em; color: var(--g1); }
#fitApp .sizebox__help b{ font-weight: 700; color: var(--ink); }

#fitApp .nav{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
/* 戻るボタン。1pxの下線だけだと薄すぎて押せることに気づかれないので、
   枠で囲って矢印を付け、日本語のラベルにしている。タップ領域も44px確保する。 */
#fitApp .nav__back{
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 1px solid var(--line); border-radius: 0; cursor: pointer;
  min-height: 44px; padding: 0 20px 0 16px;
  font-family: var(--jp); font-size: 12px; font-weight: 500; letter-spacing: .12em;
  color: var(--g1); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
#fitApp .nav__back::before{
  content: ""; width: 9px; height: 9px; flex: none;
  border-left: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); margin-top: -1px;
}
#fitApp .nav__back:hover, #fitApp .nav__back:focus-visible{
  background: var(--ink); border-color: var(--ink); color: #fff; opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   トースト
   ══════════════════════════════════════════════════════════════ */
#fitApp .toast{
  position: fixed; left: 50%; bottom: 30px; z-index: 90;
  transform: translate(-50%, 14px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: 13px 26px;
  font-size: 11.5px; letter-spacing: .14em; white-space: nowrap;
  transition: all .6s var(--slow);
}
#fitApp .toast.is-on{ opacity: 1; transform: translate(-50%, 0); }
#fitApp .toast b{ font-family: var(--en); font-size: 10px; font-weight: 500; letter-spacing: .2em; color: var(--g3); margin-right: 12px; }

/* ══════════════════════════════════════════════════════════════
   集計中
   ══════════════════════════════════════════════════════════════ */
#fitApp .calc{ padding: 22vh 0 24vh; }
#fitApp .calc__ring{ width: 1px; height: 72px; margin: 0 0 44px; background: var(--line); position: relative; overflow: hidden; }
#fitApp .calc__ring::after{ content: ""; position: absolute; left: 0; width: 1px; height: 26px; background: var(--ink); animation: calcRun 1.7s var(--slow) infinite; }
@keyframes calcRun { 0% { top: -26px; } 100% { top: 72px; } }
#fitApp .calc__msg{ font-size: clamp(17px, 3vw, 24px); font-weight: 500; letter-spacing: .08em; min-height: 1.6em; margin: 0; transition: opacity .4s; }
#fitApp .calc__sub{ font-size: 11px; letter-spacing: .14em; color: var(--g2); margin: 14px 0 0; transition: opacity .4s; }

/* ══════════════════════════════════════════════════════════════
   結果
   ══════════════════════════════════════════════════════════════ */
#fitApp .res__hero{ display: grid; gap: 0; border-bottom: 1px solid var(--ink); padding-bottom: 60px; }
@media (min-width: 900px) { #fitApp .res__hero{ grid-template-columns: 40% 1fr; gap: 0 70px; align-items: end; } }
#fitApp .res__fig{ background: var(--cream); overflow: hidden; margin: 0 0 34px; }
@media (min-width: 900px) { #fitApp .res__fig{ margin: 0; } }
#fitApp .res__fig img{ width: 100%; aspect-ratio: 3/4; object-fit: contain; }
#fitApp .res__pre{ font-family: var(--en); font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--g2); margin: 0 0 22px; }
#fitApp .res__name{ font-size: clamp(38px, 10vw, 86px); font-weight: 500; line-height: .98; letter-spacing: .01em; margin: 0; }
#fitApp .res__en{ font-family: var(--en); font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--g2); margin: 20px 0 0; }
/* タイプ名の語義。英字のすぐ下に、小さく添える */
#fitApp .res__mean{
  font-size: 11.5px; line-height: 2.05; letter-spacing: .08em; color: var(--g1);
  margin: 12px 0 0; padding-left: 13px; border-left: 1px solid var(--line); max-width: 30em;
}
#fitApp .res__catch{ font-family: var(--mc); font-size: clamp(16px, 2.4vw, 21px); font-weight: 400; line-height: 1.8; letter-spacing: .06em; margin: 28px 0 0; }
#fitApp .res__chips{ display: flex; flex-wrap: wrap; gap: 0 26px; margin: 32px 0 0; border-top: 1px solid var(--line); padding-top: 14px; }
#fitApp .chip{ font-size: 11px; letter-spacing: .1em; color: var(--g1); }
#fitApp .chip--key{ color: var(--ink); font-weight: 500; }
#fitApp .chip--rare{ color: var(--accent); font-weight: 500; }
#fitApp .res__body{ font-size: 14px; line-height: 2.15; letter-spacing: .1em; color: var(--g1); margin: 44px 0 0; max-width: 46em; }

#fitApp .sec{ margin: 110px 0 0; }
#fitApp .sec__h{ display: grid; grid-template-columns: 44px 1fr; gap: 0 16px; align-items: baseline; border-bottom: 1px solid var(--ink); padding-bottom: 16px; }
#fitApp .sec__no{ font-family: var(--en); font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--g3); }
#fitApp .sec__t{ font-size: clamp(18px, 3vw, 26px); font-weight: 500; letter-spacing: .04em; margin: 0; }
#fitApp .sec__lead{ font-size: 12.5px; line-height: 2.1; letter-spacing: .1em; color: var(--g1); margin: 24px 0 38px; max-width: 54em; }

/* 骨格 */
#fitApp .frame{ display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 800px) { #fitApp .frame{ grid-template-columns: 250px 1fr; gap: 0 48px; } }
#fitApp .frame__fig{ background: var(--cream); }
#fitApp .frame__fig img{ width: 100%; aspect-ratio: 1/1; object-fit: contain; }
#fitApp .frame__body{ padding: 28px 0 0; }
@media (min-width: 800px) { #fitApp .frame__body{ padding: 30px 0; } }
#fitApp .frame__name{ font-size: 22px; font-weight: 500; letter-spacing: .06em; margin: 0; }
#fitApp .frame__en{ font-family: var(--en); font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--g2); margin: 9px 0 20px; }
#fitApp .frame__p{ font-size: 13px; line-height: 2.05; letter-spacing: .09em; color: var(--g1); margin: 0 0 20px; }
#fitApp .frame__conf{ display: flex; align-items: baseline; gap: 10px; margin: 0; font-family: var(--en); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--g2); }
#fitApp .frame__conf b{ font-size: 26px; font-weight: 300; color: var(--ink); }

#fitApp .tips{ margin: 44px 0 0; }
#fitApp .tips__t{ font-size: 15px; font-weight: 500; letter-spacing: .06em; margin: 0 0 8px; }
#fitApp .tips__p{ font-size: 13px; line-height: 2.05; letter-spacing: .09em; color: var(--g1); margin: 0 0 24px; }
#fitApp .pointlist{ list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
#fitApp .pointlist li{
  display: grid; grid-template-columns: 38px 1fr; gap: 0 12px; padding: 17px 0;
  border-bottom: 1px solid var(--line); font-size: 13px; line-height: 2; letter-spacing: .08em;
}
#fitApp .pointlist li::before{ content: attr(data-n); font-family: var(--en); font-size: 10px; font-weight: 500; letter-spacing: .12em; color: var(--g3); }
#fitApp .caution{ margin: 28px 0 0; padding: 0 0 0 20px; border-left: 1px solid var(--accent); font-size: 12px; line-height: 2.05; letter-spacing: .08em; color: var(--g1); }

/* ソリューション */
#fitApp .sols{ border-top: 1px solid var(--line); }
#fitApp .sol{ display: grid; grid-template-columns: 56px 1fr; gap: 0 16px; padding: 28px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { #fitApp .sol{ grid-template-columns: 76px 1fr; gap: 0 20px; } }
#fitApp .sol--top{ background: var(--cream); padding-left: 22px; padding-right: 22px; margin: 0 -22px; }
#fitApp .sol__icon{ font-size: 15px; color: var(--g3); line-height: 1.5; }
#fitApp .sol--top .sol__icon{ color: var(--accent); }
#fitApp .sol__rank{ display: block; font-family: var(--en); font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--g3); margin-bottom: 9px; }
#fitApp .sol--top .sol__rank{ color: var(--accent); }
#fitApp .sol__name{ font-size: 17px; font-weight: 500; letter-spacing: .05em; margin: 0 0 9px; line-height: 1.5; }
#fitApp .sol__why{ font-size: 12px; letter-spacing: .08em; color: var(--g1); margin: 0; line-height: 1.9; }
#fitApp .sol__ev{ margin: 16px 0 0; padding-top: 13px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.95; letter-spacing: .06em; color: var(--g2); }
#fitApp .sol__ev b{ font-family: var(--en); font-size: 15px; font-weight: 400; color: var(--ink); }

/* 商品 — 1pxの格子 */
#fitApp .prods{ display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
@media (min-width: 700px)  { #fitApp .prods{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { #fitApp .prods{ grid-template-columns: repeat(3, 1fr); } }
#fitApp .prod{ display: block; position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 0 26px; }
#fitApp .prod:hover{ opacity: 1; }
#fitApp .prod__figure{ position: relative; background: var(--cream); overflow: hidden; }
/* ICB はデフォルトをグレースケールにしてホバーで色を戻すが、商品写真は色そのものが
   買う判断の材料になる。ホバーのない端末では永久にグレーのままになってしまうので、
   ここでは色を落とさず、寄りだけで反応させる。 */
/* 商品写真は切らずに全体を入れる（cover だと裾や肩紐が切れる）。
   本店の商品画像は 1200×1200 の正方形なので枠も 1:1 にすると余白が出ない。
   正方形でない画像が来ても contain なので切れず、上下に紙色の余白が出るだけ。 */
#fitApp .prod__figure img{
  width: 100%; aspect-ratio: 1/1; object-fit: contain; object-position: center;
  transition: transform 1.2s var(--slow);
}
#fitApp .prod:hover .prod__figure img{ transform: scale(1.035); }
#fitApp .prod__match{
  position: absolute; left: 0; top: 0; z-index: 1; background: var(--paper);
  color: var(--accent); padding: 9px 13px 10px;
  font-family: var(--en); font-size: 21px; font-weight: 300; line-height: 1;
}
#fitApp .prod__match small{ display: block; margin-top: 5px; font-family: var(--jp); font-size: 8px; font-weight: 400; letter-spacing: .14em; color: var(--g2); }
#fitApp .prod__rank{ position: absolute; right: 12px; top: 11px; z-index: 1; font-family: var(--en); font-size: 10px; font-weight: 500; letter-spacing: .12em; color: var(--g2); }
#fitApp .prod__body{ padding: 22px 20px 0; }
#fitApp .prod__brand{ font-family: var(--en); font-size: 9.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--g2); margin: 0 0 9px; }
#fitApp .prod__name{ font-size: 13px; font-weight: 500; line-height: 1.75; letter-spacing: .05em; margin: 0 0 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#fitApp .prod__price{ font-family: var(--en); font-size: 19px; font-weight: 300; margin: 0 0 14px; }
#fitApp .prod__price small{ font-family: var(--jp); font-size: 9.5px; letter-spacing: .12em; color: var(--g2); margin-left: 6px; }
#fitApp .prod__price del{ font-size: 12px; color: var(--g3); margin-right: 8px; }
#fitApp .prod__tags{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
#fitApp .tag{ font-size: 10px; letter-spacing: .06em; padding: 4px 9px; border: 1px solid var(--line); color: var(--g1); white-space: nowrap; }
#fitApp .tag--rv{ border-color: var(--ink); background: var(--ink); color: #fff; }
#fitApp .tag--size{ border-style: dashed; }
#fitApp .prod__sizes{ font-size: 10px; line-height: 1.85; letter-spacing: .06em; color: var(--g2); margin: 0; }
#fitApp .prod__quote{ margin: 15px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-w); font-size: 11px; line-height: 1.95; letter-spacing: .05em; color: var(--g1); }
#fitApp .prod__quote b{ display: block; font-size: 11.5px; color: var(--ink); margin: 5px 0; }
#fitApp .prod__quote .stars{ font-family: var(--en); font-size: 9px; letter-spacing: .1em; color: var(--accent); }
#fitApp .res__more{ margin: 44px 0 0; text-align: center; }

/* サイズ */
#fitApp .measure{ border-top: 1px solid var(--line); }
#fitApp .measure ol{ list-style: none; margin: 0; padding: 0; counter-reset: m; }
#fitApp .measure li{
  display: grid; grid-template-columns: 38px 1fr; gap: 0 12px; padding: 18px 0;
  border-bottom: 1px solid var(--line); font-size: 13px; line-height: 2.05; letter-spacing: .08em; counter-increment: m;
}
#fitApp .measure li::before{ content: counter(m, decimal-leading-zero); font-family: var(--en); font-size: 10px; font-weight: 500; letter-spacing: .12em; color: var(--g3); }
#fitApp .measure li b{ font-weight: 700; }
#fitApp .measure__tbl{ width: 100%; border-collapse: collapse; margin: 30px 0 0; font-family: var(--en); font-size: 11px; }
#fitApp .measure__tbl th, #fitApp .measure__tbl td{ border-bottom: 1px solid var(--line); padding: 11px 4px; text-align: center; font-weight: 400; letter-spacing: .08em; }
#fitApp .measure__tbl thead th{ color: var(--g2); font-size: 10px; font-weight: 500; letter-spacing: .14em; }
#fitApp .measure__tbl tbody th{ font-family: var(--jp); font-size: 10px; color: var(--g2); letter-spacing: .14em; }
#fitApp .measure__note{ font-size: 11.5px; line-height: 2.05; letter-spacing: .08em; color: var(--g1); margin: 24px 0 0; }

/* 共有 */
#fitApp .share__card{ border: 1px solid var(--ink); padding: 46px 28px; text-align: center; margin: 0 0 26px; }
#fitApp .share__card .k{ font-family: var(--en); font-size: 9px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--g2); margin: 0 0 20px; }
#fitApp .share__card .n{ font-size: clamp(26px, 5vw, 40px); font-weight: 500; letter-spacing: .02em; margin: 0; line-height: 1.12; }
#fitApp .share__card .s{ font-family: var(--mc); font-size: 13px; letter-spacing: .08em; color: var(--g1); margin: 18px 0 0; }
#fitApp .share__btns{ display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (min-width: 700px) { #fitApp .share__btns{ grid-template-columns: repeat(4, 1fr); } }
#fitApp .share__btn{
  display: flex; align-items: center; justify-content: center; gap: 9px; padding: 20px 10px;
  border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: transparent; cursor: pointer; font-family: var(--jp); font-size: 11.5px; letter-spacing: .1em;
  transition: background .4s var(--ease), color .4s var(--ease);
}
#fitApp .share__btn:hover{ background: var(--ink); color: #fff; opacity: 1; }
#fitApp .share__btn svg{ width: 14px; height: 14px; fill: currentColor; flex: none; }

/* 診断前の同意ゲート */
#fitApp .gate{ border-top: 1px solid var(--ink); padding: 26px 0 0; }
#fitApp .gate__no{ font-family: var(--en); font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--g3); margin: 0 0 14px; }
#fitApp .gate__t{ font-size: 17px; font-weight: 500; letter-spacing: .05em; margin: 0 0 18px; }
#fitApp .gate__list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
#fitApp .gate__list li{
  position: relative; padding: 13px 0 13px 18px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.95; letter-spacing: .07em; color: var(--g1);
}
#fitApp .gate__list li::before{ content: ""; position: absolute; left: 0; top: 1.55em; width: 8px; height: 1px; background: var(--g3); }
#fitApp .gate__list b{ color: var(--ink); font-weight: 700; }
#fitApp .gate__more{ margin: 16px 0 0; }
#fitApp .gate__agree{
  margin: 22px 0 0; padding: 16px 18px; background: var(--cream);
  font-size: 13px; color: var(--ink); font-weight: 500;
}
#fitApp .consent{ display: grid; grid-template-columns: 16px 1fr; gap: 0 14px; align-items: start; line-height: 1.9; letter-spacing: .06em; cursor: pointer; }
#fitApp .consent input{ width: 15px; height: 15px; margin: 4px 0 0; accent-color: var(--ink); }

/* 結果ページ下部の、静かな保存状況 */
#fitApp .saved{
  font-size: 11.5px; line-height: 1.9; letter-spacing: .07em; color: var(--g2);
  margin: 0 0 26px; min-height: 1.9em;
}
#fitApp .saved b{ color: var(--ink); font-weight: 700; }

#fitApp .res__foot{ margin: 110px 0 0; padding-top: 46px; border-top: 1px solid var(--ink); text-align: center; }
#fitApp .res__disc{ font-size: 11px; line-height: 2.1; letter-spacing: .07em; color: var(--g2); margin: 30px 0 0; }

/* ══════════════════════════════════════════════════════════════
   モーダル
   ══════════════════════════════════════════════════════════════ */
#fitApp .modal{ position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--gut); }
#fitApp .modal[hidden]{ display: none; }
#fitApp .modal__scrim{ position: absolute; inset: 0; background: rgba(14,13,13,.72); animation: fade .4s both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
#fitApp .modal__panel{
  position: relative; background: var(--paper); max-width: 680px; width: 100%;
  max-height: 86vh; overflow-y: auto; padding: 48px 26px 40px;
  animation: popIn .6s var(--slow) both; -webkit-overflow-scrolling: touch;
}
@media (min-width: 700px) { #fitApp .modal__panel{ padding: 56px 56px 48px; } }
@keyframes popIn { from { opacity: 0; transform: translateY(20px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
#fitApp .modal__x{ position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; background: none; border: 0; font-size: 20px; font-weight: 300; color: var(--g1); cursor: pointer; line-height: 1; }
#fitApp .modal__x:hover{ color: var(--ink); }
#fitApp .modal__title{ font-size: 19px; font-weight: 500; letter-spacing: .05em; margin: 0 0 28px; line-height: 1.5; }
#fitApp .modal__body{ font-size: 12.5px; line-height: 2.1; letter-spacing: .08em; color: var(--g1); }
#fitApp .modal__body h3{ font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: .08em; margin: 32px 0 10px; padding-top: 22px; border-top: 1px solid var(--line); }
#fitApp .modal__body ul{ padding-left: 1.1em; margin: 0; }
#fitApp .modal__body li{ margin-bottom: 6px; }
#fitApp .modal__body p{ margin: 0 0 10px; }
#fitApp .modal__body strong{ color: var(--ink); font-weight: 700; }
#fitApp .terms__lead{ background: var(--cream); padding: 18px 20px; font-size: 12px; }
#fitApp .terms__sig{ margin-top: 32px; text-align: right; color: var(--ink); }

/* ══════════════════════════════════════════════════════════════
   フッター
   ══════════════════════════════════════════════════════════════ */
#fitApp .foot{ border-top: 1px solid var(--line); margin-top: 90px; padding: 34px var(--gut) 56px; }
#fitApp .foot__in{ max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
#fitApp .foot__nav{ display: flex; align-items: center; gap: 22px; font-family: var(--en); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
#fitApp .foot__nav a{ color: var(--g2); }
#fitApp .foot__nav a:hover{ color: var(--ink); }
#fitApp .foot__nav .is-here{ color: var(--ink); }
#fitApp .foot__c{ font-family: var(--en); font-size: 9px; font-weight: 500; letter-spacing: .24em; color: var(--g3); margin: 0; }

@media (min-width: 1000px) {
  #fitApp .page{ padding: 80px var(--gut) 140px; }
  #fitApp .sec{ margin: 150px 0 0; }
}

/* 章扉の飾り絵 — 3:4の縦カット。SPは本文の下、PCは右の余白に置く ---- */
#fitApp .chapter__fig{ margin: 46px 0 0; width: 210px; }
#fitApp .chapter__fig img{ width: 100%; height: auto; display: block; }
@media (min-width: 900px) {
  #fitApp .page.chapter > .rise{ position: relative; }
  #fitApp .chapter__fig{ position: absolute; right: 0; top: 50%; transform: translateY(-50%);
                  width: auto; height: min(56vh, 470px); margin: 0; pointer-events: none; }
  #fitApp .chapter__fig img{ height: 100%; width: auto; }
}

/* 選択肢のないページに添える小さな絵 -------------------------- */
#fitApp .q__head--fig{ position: relative; }
#fitApp .q__aside{ width: 96px; margin: 0 0 22px; }
#fitApp .q__aside img{ width: 100%; height: auto; display: block; border: 1px solid var(--line); }
@media (min-width: 760px) {
  #fitApp .q__aside{ position: absolute; right: 0; top: 0; width: 132px; margin: 0; }
  #fitApp .q__head--fig .q__ttl, #fitApp .q__head--fig .q__hint{ padding-right: 168px; }
}

/* 5択のタイル ------------------------------------------------- */
/* ★ 1列から複数列へ切り替える幅は 700px。上の .opts--1〜4 と同じ値にそろえること。
   ここだけ640pxだった頃は、640〜699pxの幅で「5択だけ3列」という食い違いが出ていた。 */
#fitApp .opts--5{ grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { #fitApp .opts--5{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { #fitApp .opts--5{ grid-template-columns: repeat(5, 1fr); } }

/* お悩みの行に添える小さな絵 ---------------------------------- */
#fitApp .opt__mini{ flex: 0 0 auto; width: 52px; margin: 0 16px 0 0; }
#fitApp .opt__mini img{ width: 100%; height: auto; display: block; border: 1px solid var(--line); }
#fitApp .opt.is-on .opt__mini img{ border-color: rgba(255,255,255,.35); }
@media (min-width: 700px) { #fitApp .opt__mini{ width: 64px; margin-right: 20px; } }


/* ソリューションの絵（記号のかわり） -------------------------- */
#fitApp .sol__fig{ display: block; width: 100%; }
#fitApp .sol__fig img{ width: 100%; height: auto; display: block; border: 1px solid var(--line); }

/* サイズの手順に添える絵 -------------------------------------- */
#fitApp .measure__steps{ list-style: none; margin: 0; padding: 0; counter-reset: ms; }
#fitApp .measure__steps li{
  display: flex; align-items: flex-start; gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
#fitApp .measure__steps li:last-child{ border-bottom: 0; }
#fitApp .measure__txt{ flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 2.05; letter-spacing: .06em; color: var(--g1); }
#fitApp .measure__txt b{ color: var(--ink); font-weight: 500; }
#fitApp .measure__fig{ flex: 0 0 auto; width: 76px; }
#fitApp .measure__fig img{ width: 100%; height: auto; display: block; border: 1px solid var(--line); }
@media (min-width: 700px) { #fitApp .measure__fig{ width: 104px; } #fitApp .measure__steps li{ gap: 24px; } }

/* シェアの見本（実際に投稿される画像） ------------------------ */
#fitApp .share__prev{ margin: 0 0 26px; }
#fitApp .share__prev img{ width: 100%; height: auto; display: block; border: 1px solid var(--line); }
#fitApp .share__prevnote{
  font-size: 10.5px; letter-spacing: .14em; color: var(--g2);
  margin: 12px 0 0; text-align: center;
}

/* ロゴ（会社概要と同じ shirohato_logo.png を流用） ------------- */
/* ヘッダーのロゴ。
   SP幅ではロゴ・ゲージ・章名・バッジ・やり直す が横に並びきらないので、
   **バッジだけ隠す**。章クリアはトーストでも知らせているし、進捗は％のリングが示す。 */
#fitApp .hud__logo{ flex: none; margin: 0; line-height: 0; }
#fitApp .hud__logo img{ width: 74px; height: auto; display: block; }
@media (min-width: 700px) { #fitApp .hud__logo img{ width: 104px; } }
#fitApp .hud__badges{ display: none; }
@media (min-width: 640px) { #fitApp .hud__badges{ display: flex; } }

#fitApp .hero__logo{ margin: 0 0 18px; line-height: 0; }
#fitApp .hero__logo img{ width: clamp(104px, 13vw, 156px); height: auto; display: block; }
@media (min-width: 900px) { #fitApp .hero__logo{ margin: 0 0 22px; } }

/* 設問に添える補助の選択（予算の「ブラ単品／上下セット」） -------- */
#fitApp .sub{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 34px; }
#fitApp .sub__label{ font-size: 11.5px; letter-spacing: .12em; color: var(--g2); }
#fitApp .sub__opts{ display: flex; border: 1px solid var(--line); }
#fitApp .sub__opt{
  background: none; border: 0; border-right: 1px solid var(--line); cursor: pointer;
  min-height: 40px; padding: 0 16px;
  font-family: var(--jp); font-size: 12px; letter-spacing: .1em; color: var(--g1);
  transition: background .3s var(--ease), color .3s var(--ease);
}
#fitApp .sub__opt:last-child{ border-right: 0; }
#fitApp .sub__opt:hover{ background: var(--cream); opacity: 1; }
#fitApp .sub__opt.is-on{ background: var(--ink); color: #fff; }

/* 条件から外れた商品に付ける注記 -------------------------------- */
#fitApp .tag--note{ border-color: var(--accent); color: var(--accent); }

/* 骨格の選び直し ------------------------------------------------ */
#fitApp .fswitch{ margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
#fitApp .fswitch__lead{ font-size: 12px; line-height: 2; letter-spacing: .08em; color: var(--g1); margin: 0 0 16px; }
#fitApp .fswitch__lead b{ color: var(--ink); font-weight: 500; }
#fitApp .fswitch__opts{ display: flex; flex-wrap: wrap; gap: 10px; }
#fitApp .fswitch__opt, #fitApp .fswitch__reset{
  background: none; border: 1px solid var(--line); cursor: pointer;
  min-height: 40px; padding: 0 18px;
  font-family: var(--jp); font-size: 12px; letter-spacing: .1em; color: var(--g1);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
#fitApp .fswitch__opt:hover, #fitApp .fswitch__reset:hover{ background: var(--cream); opacity: 1; }
#fitApp .fswitch__opt.is-on{ background: var(--ink); border-color: var(--ink); color: #fff; }
#fitApp .fswitch__reset{ border-style: dashed; color: var(--g2); }

/* 価格帯の切り替え（結果ページ・商品の直前） -------------------- */
#fitApp .bswitch{ margin: 0 0 26px; }
#fitApp .bswitch__lead{ font-size: 12px; line-height: 2; letter-spacing: .08em; color: var(--g1); margin: 0 0 12px; }
#fitApp .bswitch__lead b{ color: var(--ink); font-weight: 500; }
#fitApp .bswitch__opts{ display: flex; flex-wrap: wrap; gap: 8px; }
#fitApp .bswitch__opt, #fitApp .bswitch__reset{
  background: none; border: 1px solid var(--line); cursor: pointer;
  min-height: 40px; padding: 0 16px;
  font-family: var(--jp); font-size: 12px; letter-spacing: .06em; color: var(--g1);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
#fitApp .bswitch__opt:hover, #fitApp .bswitch__reset:hover{ background: var(--cream); opacity: 1; }
#fitApp .bswitch__opt.is-on{ background: var(--ink); border-color: var(--ink); color: #fff; }
/* 設問で答えた価格帯の目印。選択中は反転するので、色は継承させる */
#fitApp .bswitch__opt small{ margin-left: 7px; font-size: 10px; letter-spacing: .04em; color: var(--g2); }
#fitApp .bswitch__opt.is-on small{ color: inherit; opacity: .7; }
#fitApp .bswitch__reset{ border-style: dashed; color: var(--g2); }

/* 希望条件に合う商品が足りなかったときの説明 ------------------ */
#fitApp .sec__warn{ display: block; margin-top: 10px; color: var(--accent); }
#fitApp .sec__warn b{ font-weight: 500; }