/* ============================================================
   k-ff.co.jp  視覚演出（2026-07-30）
   ・既存のCSSは書き換えず、ここだけで完結させる
   ・クラス名は ff-v- / ff-diag- / ff-mech- で始める（既存と衝突しない）
   ・JSが動かなくても内容は読める作りにする
   戻したいときは <link id="ff-visual-css"> と
   <script id="ff-visual-js"> の2行を消すだけ
   ============================================================ */

:root{
  --ffv-navy:   #0b2c4d;
  --ffv-navy2:  #123f6b;
  --ffv-blue:   #1573c4;
  --ffv-cyan:   #12a8d8;
  --ffv-pale:   #f2f9fd;
  --ffv-line:   #d8e8f3;
  --ffv-ink:    #17364f;
  --ffv-sub:    #4b6b83;
}

/* ============================================================
   ⑩ 上部の読み進みバー
   ============================================================ */
.ff-v-progress{
  position:fixed; top:0; left:0; z-index:99999;
  height:3px; width:0;
  background:linear-gradient(90deg,var(--ffv-cyan),var(--ffv-blue));
  box-shadow:0 0 10px rgba(18,168,216,.55);
  pointer-events:none;
  transition:width .08s linear;
}

/* ============================================================
   ⑨ 見出しが1文字ずつ浮かび上がる
   （トップの .ff-heading は既存の演出があるので対象外）
   ============================================================ */
.ff-vc{
  display:inline-block;
  opacity:0;
  transform:translateY(.34em);
  filter:blur(4px);
  transition:opacity .5s ease-out, filter .5s ease-out,
             transform .5s cubic-bezier(.16,.76,.28,1);
  will-change:opacity,transform,filter;
}
.ff-v-seen .ff-vc{ opacity:1; filter:blur(0); transform:none; }

/* ============================================================
   ③ スクロールで浮かび上がる
   （JSが class を付けるので、JSが動かなければ普通に見える）
   ============================================================ */
.ff-v-rise{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .62s ease-out, transform .62s cubic-bezier(.16,.76,.28,1);
  will-change:opacity,transform;
}
.ff-v-rise.ff-v-in{ opacity:1; transform:none; }

/* ============================================================
   ⑤ カードを大きく・余白を広く・ホバーで浮き上がる
   ============================================================ */
.ff-card-grid{ gap:26px !important; }

.ff-card,
.ff-helpful-card,
.ff-related-link-card,
.ff-area-link-card-20260702,
.ff-home-link-card{
  border-radius:14px !important;
  overflow:hidden;
  transition:transform .26s cubic-bezier(.16,.76,.28,1),
             box-shadow .26s ease,
             border-color .26s ease !important;
}
.ff-card:hover,
.ff-helpful-card:hover,
.ff-related-link-card:hover,
.ff-area-link-card-20260702:hover,
.ff-home-link-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px -18px rgba(11,44,77,.34) !important;
  border-color:#a9cfe8 !important;
}

/* 写真がゆっくり寄る */
.ff-card-image{ overflow:hidden; }
.ff-card-image img{
  transition:transform .6s cubic-bezier(.16,.76,.28,1);
  will-change:transform;
}
.ff-card:hover .ff-card-image img{ transform:scale(1.06); }

/* カードの中の余白を広げる */
.ff-card-body{ padding:18px 18px 20px !important; }
.ff-card-title{ font-size:19px !important; line-height:1.5 !important; }

/* 下線が伸びる */
.ff-card-line{
  height:3px !important;
  width:34px;
  background:linear-gradient(90deg,var(--ffv-cyan),var(--ffv-blue)) !important;
  border-radius:2px;
  transition:width .38s cubic-bezier(.16,.76,.28,1);
}
.ff-card:hover .ff-card-line{ width:78px; }

/* ============================================================
   業種カードを「横に流れる帯」にする
   ・元は3×2の6枚（高さ約650px）。押せず場所を取っていた
   ・JSが動かなければ、元の6枚のまま（リンクは効く）
   ============================================================ */

/* カード全体を押せるようにする（リンクはHTMLに実体で入っている） */
.ff-card{ position:relative; }
.ff-card-title .ff-card-a{
  text-decoration:none !important;
  color:inherit !important;
}
.ff-card-title .ff-card-a::after{
  content:"";
  position:absolute; inset:0; z-index:2;   /* カードのどこを押しても飛ぶ */
}
.ff-card-sub{
  display:block;
  margin-top:4px;
  font-size:13px; font-weight:700;
  color:#2b7bb9;
  letter-spacing:.01em;
}

/* ---- 帯本体 ---- */
.ff-mq{
  position:relative;
  margin:0 0 44px;
  /* 左右の端をうっすら消して、続きがあることを伝える */
  mask-image:linear-gradient(90deg,transparent 0,#000 42px,#000 calc(100% - 42px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42px,#000 calc(100% - 42px),transparent 100%);
}
.ff-mq-track{
  display:flex;
  gap:18px;
  width:max-content;
  will-change:transform;
}
@keyframes ffMqSlide{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-50% - 9px)); }   /* 9px = gap の半分 */
}

.ff-mq-item{
  flex:0 0 auto;
  width:274px;
  display:block;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--ffv-line);
  box-shadow:0 12px 28px -14px rgba(25,83,130,.3);
  text-decoration:none !important;
  color:var(--ffv-ink) !important;
  transition:transform .26s cubic-bezier(.16,.76,.28,1),
             box-shadow .26s ease, border-color .26s ease;
}
.ff-mq-item:hover,
.ff-mq-item:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 24px 46px -18px rgba(11,44,77,.38);
  border-color:#a9cfe8;
  outline:none;
}
.ff-mq-pic{
  position:relative;
  display:block;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#eaf4fb;
}
.ff-mq-pic img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  margin:0 !important; max-width:none !important;
  transition:transform .6s cubic-bezier(.16,.76,.28,1);
}
.ff-mq-item:hover .ff-mq-pic img{ transform:scale(1.07); }

/* 写真の枠は overflow:hidden なので、アイコンは枠の内側に置く */
.ff-mq-ic{
  position:absolute; left:11px; bottom:11px;
  width:38px; height:38px;
  border-radius:11px;
  background:linear-gradient(140deg,#2f9fd8,#1573c4);
  color:#fff;
  font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.55);
}
.ff-mq-body{
  display:block;
  padding:14px 15px 15px;
}
.ff-mq-name{
  display:block;
  font-size:17px; font-weight:800;
  line-height:1.45;
  color:#17364f;
  word-break:auto-phrase;
}
.ff-mq-sub{
  display:flex; align-items:center; gap:5px;
  margin-top:6px;
  font-size:13px; font-weight:700;
  color:#2b7bb9;
}
.ff-mq-sub::after{
  content:"→";
  font-size:13px;
  transition:transform .26s ease;
}
.ff-mq-item:hover .ff-mq-sub::after{ transform:translateX(4px); }

/* パソコン（広い画面＋マウス）：ゆっくり自動で流れる。マウスを乗せると止まる。
   ※タッチ端末でも hover:hover を返す機種があるため、画面幅も条件に入れている */
@media (min-width:901px) and (hover:hover){
  .ff-mq-track{ animation:ffMqSlide 46s linear infinite; }
  .ff-mq:hover .ff-mq-track,
  .ff-mq:focus-within .ff-mq-track{ animation-play-state:paused; }
}

/* スマホ・タブレット：指でスワイプして見る（自動で動くと押しにくいため） */
@media (max-width:900px), (hover:none){
  .ff-mq{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
    /* 端をぼかしすぎると「続きがある」ことが分かりにくいので弱める */
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  }
  .ff-mq::-webkit-scrollbar{ display:none; }
  .ff-mq-track{ animation:none !important; gap:14px; padding:0 2px; }
  .ff-mq-item{ width:236px; scroll-snap-align:start; }
}

/* 動きを減らす設定の人には流さない（スワイプで見られる） */
@media (prefers-reduced-motion:reduce){
  .ff-mq{ overflow-x:auto; }
  .ff-mq-track{ animation:none !important; }
}

/* 帯にしたあとは元の6枚を隠す */
.ff-card-grid.ff-mq-done{ display:none !important; }

/* ============================================================
   ④ 濃紺の帯（セクションの区切り）
   ============================================================ */
.ff-v-band{
  position:relative;
  /* 画面の端まで広げる。この書き方は既存のヒーロー（.ff-main-visual）と同じ */
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:52px; margin-bottom:0;
  box-sizing:border-box;
  padding:60px clamp(16px,4vw,34px) 64px;
  background:
    radial-gradient(1100px 420px at 12% -10%, rgba(18,168,216,.22), transparent 62%),
    radial-gradient(900px 380px at 92% 108%, rgba(21,115,196,.24), transparent 60%),
    linear-gradient(160deg,#0b2c4d 0%,#123f6b 58%,#0d3557 100%);
  color:#eaf4fb;
  overflow:hidden;
}
/* うっすら格子（作り込み感を出す。主張はさせない） */
.ff-v-band::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(120% 90% at 50% 20%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 20%, #000 25%, transparent 78%);
  pointer-events:none;
}
.ff-v-band > *{ position:relative; z-index:1; }

.ff-v-inner{ max-width:1300px; margin:0 auto; }

.ff-v-kicker{
  display:inline-block;
  margin:0 0 14px;
  padding:6px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.26);
  color:#bfe6f7;
  font-size:14px; font-weight:800; letter-spacing:.06em;
}
/* 帯が続くときは白い隙間を作らない（隙間だと作り忘れのように見える） */
.ff-v-band + .ff-v-band{
  margin-top:0;
  border-top:1px solid rgba(255,255,255,.13);
}

.ff-v-band h2,
.ff-v-h2{
  /* テーマが h2 に付けている青い上線と余白を消す */
  border:0 !important;
  padding:0 !important;
  background:none !important;
  margin:0 0 14px !important;
  color:#fff !important;
  font-size:clamp(23px,2.9vw,34px) !important;
  line-height:1.5 !important;
  font-weight:800 !important;
  word-break:auto-phrase;
  text-wrap:balance;
}
.ff-v-band h2::after,
.ff-v-h2::after{ content:none !important; }
.ff-v-lead{
  margin:0 0 30px !important;
  max-width:860px;
  color:#c3dcee !important;
  font-size:17px !important;
  line-height:1.9 !important;
  word-break:auto-phrase;
}

/* ============================================================
   ① 清掃前後のスライダー
   ============================================================ */
/* 写真2枚が横並びのグリッドに入っていた場所なので、横幅いっぱいに広げる */
.ff-ba, .ff-ba-caption{ grid-column:1 / -1; }

.ff-ba{
  position:relative;
  width:100%;
  aspect-ratio:1091 / 606;
  border-radius:14px;
  overflow:hidden;
  background:#0b2c4d;
  box-shadow:0 20px 42px -18px rgba(11,44,77,.42);
  touch-action:pan-y;
  cursor:ew-resize;
  user-select:none;
  -webkit-user-select:none;
}
.ff-ba img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  margin:0 !important;
  max-width:none !important;
  pointer-events:none;
}
/* 上に重ねる「清掃前」を、つまみの位置で切る。
   入れ物で切ると中の写真まで縮んでしまうので、写真自体を切り抜く。 */
.ff-ba-before{
  clip-path:inset(0 48% 0 0);
  will-change:clip-path;
}

.ff-ba-handle{
  position:absolute; top:0; bottom:0;
  left:52%;
  width:3px;
  margin-left:-1.5px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(11,44,77,.25), 0 0 16px rgba(0,0,0,.35);
  will-change:left;
}
.ff-ba-knob{
  position:absolute; top:50%; left:50%;
  width:46px; height:46px;
  margin:-23px 0 0 -23px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 6px 18px rgba(11,44,77,.4);
  display:flex; align-items:center; justify-content:center;
  color:var(--ffv-navy);
  font-size:15px; font-weight:900; letter-spacing:-.04em;
}
.ff-ba-tag{
  position:absolute; top:14px;
  padding:6px 13px;
  border-radius:999px;
  font-size:13.5px; font-weight:800;
  color:#fff;
  backdrop-filter:blur(3px);
  pointer-events:none;
}
.ff-ba-tag-b{ left:14px;  background:rgba(190,68,48,.88); }
.ff-ba-tag-a{ right:14px; background:rgba(18,138,92,.9); }

.ff-ba-hint{
  position:absolute; left:50%; bottom:14px;
  transform:translateX(-50%);
  padding:7px 15px;
  border-radius:999px;
  background:rgba(11,44,77,.74);
  color:#fff;
  font-size:13px; font-weight:700;
  white-space:nowrap;
  pointer-events:none;
  transition:opacity .3s ease;
}
.ff-ba.ff-ba-used .ff-ba-hint{ opacity:0; }

.ff-ba-caption{
  margin:10px 0 0;
  font-size:13.5px;
  color:var(--ffv-sub);
  line-height:1.7;
}

/* スマホでは横長のままだと小さすぎるので、中央を切り出して縦を稼ぐ */
@media (max-width:640px){
  .ff-ba{ aspect-ratio:4 / 3 !important; }
  .ff-ba-knob{ width:40px; height:40px; margin:-20px 0 0 -20px; font-size:13px; }
  .ff-ba-hint{ font-size:12px; padding:6px 12px; }
  .ff-ba-tag{ font-size:12px; padding:5px 11px; top:10px; }
  .ff-ba-tag-b{ left:10px; } .ff-ba-tag-a{ right:10px; }
}

/* ============================================================
   ⑧ 作業の流れを線で追う
   ============================================================ */
/* このページには元から番号付きの丸がある（左18px・直径38px＝中心37px）。
   デザインは変えず、丸と丸をつなぐ線だけを足して、
   読んだところまで色が伸びるようにする。 */
.ff-flow-steps{ position:relative; }

/* うすい線（全体）。丸の後ろを通るので、丸と丸の間だけ見える */
.ff-flow-steps::before{
  content:"";
  position:absolute; left:36px; top:26px; bottom:26px;
  width:2px; z-index:0;
  background:var(--ffv-line);
  border-radius:2px;
}
/* 濃い線（読んだところまで伸びる） */
.ff-v-flowline{
  position:absolute; left:36px; top:26px;
  width:2px; height:0; z-index:0;
  background:linear-gradient(180deg,var(--ffv-cyan),var(--ffv-blue));
  border-radius:2px;
  box-shadow:0 0 8px rgba(18,168,216,.5);
  transition:height .18s linear;
}
/* 丸は線より前に描く */
.ff-flow-step{ position:relative; z-index:1; }

/* 通り過ぎた丸を光らせる（既存の色より後に指定する必要があるため !important） */
.ff-flow-step::before{
  transition:background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.ff-flow-step.ff-v-step-on::before{
  background:linear-gradient(150deg,var(--ffv-cyan),var(--ffv-blue)) !important;
  box-shadow:0 8px 20px -6px rgba(21,115,196,.6) !important;
  transform:scale(1.07);
}

/* ============================================================
   ⑥ 症状から進む診断チャート
   ============================================================ */
.ff-diag{
  /* 幅を絞る。選択肢が5つ横並びだと1つずつが窮屈になるため */
  max-width:1060px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  padding:26px 24px 28px;
  backdrop-filter:blur(2px);
}
.ff-diag-bar{
  display:flex; align-items:center; gap:9px;
  margin:0 0 22px;
}
.ff-diag-dot{
  width:30px; height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.2);
  transition:background .3s ease;
}
.ff-diag-dot.on{ background:linear-gradient(90deg,var(--ffv-cyan),#7fd4f2); }
.ff-diag-count{
  margin-left:6px;
  font-size:13px; font-weight:800;
  color:#a8cde4; letter-spacing:.04em;
}

.ff-diag-q{
  margin:0 0 16px !important;
  color:#fff !important;
  font-size:clamp(18px,2.1vw,22px) !important;
  font-weight:800 !important;
  line-height:1.6 !important;
  word-break:auto-phrase;
}
.ff-diag-opts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(298px,1fr));
  gap:12px;
}
.ff-diag-opts button{
  appearance:none;
  display:flex; align-items:center; gap:11px;
  width:100%;
  padding:16px 17px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  color:#eaf4fb;
  font-family:inherit;
  font-size:16px; font-weight:700;
  line-height:1.55;
  text-align:left;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease,
             transform .2s ease, box-shadow .2s ease;
  word-break:auto-phrase;
}
.ff-diag-opts button:hover,
.ff-diag-opts button:focus-visible{
  background:rgba(255,255,255,.15);
  border-color:rgba(127,212,242,.7);
  transform:translateY(-2px);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.5);
  outline:none;
}
.ff-diag-opts button .ic{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:10px;
  background:rgba(18,168,216,.22);
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
}

/* JSが動いているときだけ「1問ずつ」にする */
.ff-diag.ff-js .ff-diag-step{ display:none; }
.ff-diag.ff-js .ff-diag-step.on{ display:block; animation:ffvFade .34s ease-out both; }
.ff-diag-step + .ff-diag-step{ margin-top:26px; }
@keyframes ffvFade{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

.ff-diag-back{
  appearance:none;
  margin:18px 0 0;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  color:#a8cde4;
  font-family:inherit; font-size:13.5px; font-weight:700;
  cursor:pointer;
}
.ff-diag-back:hover{ background:rgba(255,255,255,.1); color:#fff; }

/* 結果 */
.ff-diag-result{ display:none; }
.ff-diag-result.on{ display:block; animation:ffvFade .4s ease-out both; }
.ff-diag-rlabel{
  display:inline-block;
  margin:0 0 12px;
  padding:5px 13px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--ffv-cyan),var(--ffv-blue));
  color:#fff; font-size:13.5px; font-weight:800;
}
.ff-diag-rtitle{
  margin:0 0 14px !important;
  color:#fff !important;
  font-size:clamp(20px,2.4vw,26px) !important;
  font-weight:800 !important;
  line-height:1.55 !important;
  word-break:auto-phrase;
}
.ff-diag-rbody{
  margin:0 0 18px !important;
  color:#cfe4f3 !important;
  font-size:16px !important;
  line-height:1.9 !important;
  word-break:auto-phrase;
}
.ff-diag-rlist{
  margin:0 0 22px !important;
  padding:0 !important;
  list-style:none !important;
  display:grid; gap:9px;
}
.ff-diag-rlist li{
  position:relative;
  padding-left:26px;
  color:#dcecf7;
  font-size:15.5px; line-height:1.8;
  word-break:auto-phrase;
}
.ff-diag-rlist li::before{
  content:"";
  position:absolute; left:4px; top:.72em;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--ffv-cyan);
  box-shadow:0 0 0 3px rgba(18,168,216,.22);
}
.ff-diag-acts{
  display:flex; flex-wrap:wrap; gap:12px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:4px;
}
.ff-diag-acts a{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px;
  border-radius:999px;
  font-size:16px; font-weight:800;
  text-decoration:none !important;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ff-diag-acts a:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.ff-diag-acts .p{
  background:linear-gradient(135deg,#19b36a,#0f8f52);
  color:#fff !important;
  box-shadow:0 12px 26px -10px rgba(15,143,82,.7);
}
.ff-diag-acts .s{
  background:#fff; color:var(--ffv-navy) !important;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.5);
}
.ff-diag-acts .g{
  background:transparent; color:#bfe6f7 !important;
  border:1px solid rgba(255,255,255,.32);
}
.ff-diag-note{
  margin:18px 0 0 !important;
  font-size:13.5px !important;
  color:#9fbdd2 !important;
  line-height:1.8 !important;
  word-break:auto-phrase;
}

/* ============================================================
   ⑦ 詰まりの仕組みを動く図解
   ============================================================ */
.ff-mech{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:36px;
  align-items:center;
}
.ff-mech > *{ min-width:0; }
@media (max-width:900px){
  .ff-mech{ grid-template-columns:1fr; gap:26px; }
}

.ff-mech-fig{
  position:relative;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  padding:22px;
}
.ff-mech-fig svg{ width:100%; height:auto; display:block; }
.ff-mech-fig .grease,
.ff-mech-fig .water,
.ff-mech-fig .lump{
  transition:r .9s cubic-bezier(.4,0,.2,1),
             opacity .9s ease,
             transform .9s cubic-bezier(.4,0,.2,1);
}
.ff-mech-cap{
  margin:14px 0 0 !important;
  text-align:center;
  font-size:13.5px !important;
  color:#9fbdd2 !important;
  line-height:1.7 !important;
}

.ff-mech-steps{
  margin:0 !important; padding:0 !important;
  list-style:none !important;
  display:grid; gap:10px;
  counter-reset:ffmech;
}
.ff-mech-step{
  counter-increment:ffmech;
  position:relative;
  padding:16px 20px 16px 62px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.ff-mech-step::before{
  content:counter(ffmech);
  position:absolute; left:17px; top:16px;
  width:30px; height:30px;
  border-radius:9px;
  background:rgba(255,255,255,.12);
  color:#a8cde4;
  font-size:15px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, color .3s ease;
}
.ff-mech-step.on{
  background:rgba(18,168,216,.15);
  border-color:rgba(127,212,242,.6);
  transform:translateX(4px);
}
.ff-mech-step.on::before{
  background:linear-gradient(140deg,var(--ffv-cyan),var(--ffv-blue));
  color:#fff;
}
.ff-mech-step b{
  display:block;
  color:#fff;
  font-size:17px; font-weight:800;
  line-height:1.55;
  margin-bottom:5px;
  word-break:auto-phrase;
}
.ff-mech-step span{
  display:block;
  color:#c3dcee;
  font-size:15px; line-height:1.8;
  word-break:auto-phrase;
}
.ff-mech-close{
  margin:26px 0 0 !important;
  padding:18px 22px;
  border-radius:13px;
  background:rgba(255,255,255,.09);
  border-left:4px solid var(--ffv-cyan);
  color:#eaf4fb !important;
  font-size:16.5px !important;
  font-weight:700 !important;
  line-height:1.85 !important;
  word-break:auto-phrase;
}

.ff-mech-legend{
  display:flex; flex-wrap:wrap; gap:8px 20px;
  justify-content:center;
  margin:16px 0 0;
}
.ff-mech-legend span{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; color:#bfd8ea;
}
.ff-mech-legend i{
  width:13px; height:13px; border-radius:4px; display:block;
}

/* JSが動かないときは「戻る」ボタンを出さない（押しても何も起きないため） */
.ff-diag:not(.ff-js) .ff-diag-back{ display:none; }
.ff-diag-picked{
  margin:0 0 16px !important;
  font-size:13.5px !important;
  color:#8fb3cb !important;
  letter-spacing:.02em;
}

/* ============================================================
   ② 数字が増える演出（見た目の調整だけ。数値はJS）
   ============================================================ */
.ff-v-num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* ============================================================
   動きを減らす設定の人には動かさない
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ff-vc,.ff-v-rise{
    opacity:1 !important; transform:none !important; filter:none !important;
    transition:none !important;
  }
  .ff-v-progress{ transition:none; }
  .ff-card:hover,.ff-helpful-card:hover,.ff-related-link-card:hover,
  .ff-area-link-card-20260702:hover,.ff-home-link-card:hover{ transform:none; }
}