/* 推し増し診断（v2。2026-11-14）。共通の部品は va.css、決まりは リポジトリ直下の DESIGN.md、中身は design/dd8-oshi-finder.txt。
   画面は3つ（html[data-fd] で切り替える）：intro＝入口（題名の段・はじめる）／quiz＝質問（1問ずつ）／result＝結果（きっぷ・最初の1本）。
   ここは診断なので、ティールを主に使う（トップ＝コーラルと区別する。DESIGN.md 第3章）。ただし「はじめる」だけは主ボタンのコーラル（運営者 2026-11-14「もう少し目立たせて」）。
   黄緑は結果のきっぷのきらめき1点だけ。 */

/* ===== 画面の切り替え ===== */
#fd-quiz,#fd-result{display:none}
[data-fd="quiz"] #fd-intro,[data-fd="result"] #fd-intro{display:none}
[data-fd="quiz"] #fd-quiz{display:flex}
[data-fd="result"] #fd-result{display:block}

/* ===== 2羽（このページの中で使う形）：絵＋足もとの名札 ===== */
.fd-b{position:relative;display:block;flex:none}
.fd-b img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(21,21,21,.14))}
.fd-b .va-plate{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%) rotate(-3deg)}
.fd-b.b .va-plate{transform:translateX(-50%) rotate(3deg)}
/* 画面の右端に立つ小さいフクロウ：名札は右にそろえる（スマホで横にはみ出さない） */
.fd-duo .fd-b.b .va-plate,.fd-about .fd-b .va-plate{left:auto;right:3px;transform:rotate(3deg);transform-origin:right bottom}
.fd-duo .fd-b.a .va-plate{left:0;transform:rotate(-3deg);transform-origin:left bottom}

/* ===== 1. 入口：題名の段 ===== */
.fd-ph .va-in{padding-bottom:0}
.fd-aka{margin-top:14px}
.fd-ph .lead{margin-top:14px}
/* 入口の文も、語の途中で折らない（折ってよい所は HTML の <wbr>） */
.fd-ph .lead,.fd-how .va-h h2,.fd-steps p{word-break:keep-all;overflow-wrap:anywhere}
.fd-start{display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap;margin-top:26px}
/* はじめる：このページの主役のボタン（コーラル＝主ボタン。DESIGN.md 第8章）。大きく、影も深く */
.fd-go{width:100%;min-height:76px;font-size:26px;letter-spacing:.04em;padding:18px 28px;justify-content:space-between;gap:28px;box-shadow:7px 7px 0 var(--ink)}
.fd-go i{display:grid;place-items:center;width:38px;height:38px;font-size:20px;background:var(--paper2);color:var(--ink);border:var(--bd)}
.fd-go:hover{box-shadow:9px 9px 0 var(--ink)}
.fd-go:active{box-shadow:2px 2px 0 var(--ink)}
.fd-meta{display:flex;gap:6px;flex-wrap:wrap}
.fd-meta li{font-family:var(--px);font-size:13px;line-height:1.5;color:var(--ink);background:var(--paper2);border:var(--bd);padding:1px 10px}
/* 2羽のかけ合い（スマホ：はじめるの下に小さく。PC：題名の段の右下に立つ） */
.fd-duo{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:26px;padding-bottom:16px}
.fd-duo .va-say{flex:0 1 auto;margin:0 6px 46px 0;font-size:14px;padding:9px 13px;transform:rotate(-2deg);word-break:keep-all}
.fd-duo .va-say::before{top:auto;bottom:10px}
.fd-duo .fd-b.a{width:96px}
.fd-duo .fd-b.b{width:80px}
@media (min-width:900px){
  .fd-ph{--duo:400px}
  .fd-ph .va-in{padding-bottom:44px}
  .fd-ph .lead{max-width:min(40em,calc(100% - var(--duo) - 24px))}
  .fd-go{width:auto;min-width:340px;min-height:88px;font-size:30px;padding:20px 26px 20px 38px;gap:40px;box-shadow:9px 9px 0 var(--ink)}
  .fd-go i{width:44px;height:44px;font-size:22px}
  .fd-go:hover{box-shadow:11px 11px 0 var(--ink)}
  .fd-duo{position:absolute;right:var(--gut);bottom:0;margin:0;padding-bottom:18px;gap:10px}
  .fd-duo .va-say{font-size:15px;margin:0 0 118px 0;padding:11px 16px}
  .fd-duo .va-say::before{bottom:12px}
  .fd-duo .fd-b.a{display:none}
  .fd-duo .fd-b.b{width:148px}
  .fd-duo .fd-b.a .va-plate,.fd-duo .fd-b.b .va-plate,.fd-about .fd-b .va-plate{left:50%;right:auto;transform-origin:center}
  .fd-duo .fd-b.a .va-plate{transform:translateX(-50%) rotate(-3deg)}
  .fd-duo .fd-b.b .va-plate,.fd-about .fd-b .va-plate{transform:translateX(-50%) rotate(3deg)}
}
@media (min-width:1240px){
  .fd-ph{--duo:600px}
  .fd-duo .fd-b.a{display:block;width:186px;margin-right:4px}
  .fd-duo .va-say{margin-bottom:150px}
}

/* ===== 1. 入口：診断の流れ（3つの手順。順番があるので番号を付ける）と、もう一度「はじめる」 ===== */
.fd-how .va-h h2{text-wrap:balance}
.fd-steps{display:grid;gap:26px;margin-bottom:34px}
.fd-steps li{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 14px;align-items:start}
.fd-steps .no{position:relative;z-index:1;font-family:var(--en);font-weight:800;font-size:44px;line-height:1;letter-spacing:0;color:var(--teal);
  paint-order:stroke fill;-webkit-text-stroke:4px var(--ink);text-shadow:3px 3px 0 var(--ink);background:var(--paper2);padding-bottom:8px}
.fd-steps li::before{content:"";position:absolute;left:30px;top:50px;bottom:-26px;border-left:3px dotted var(--ink)}   /* 手順をつなぐ点線（航路） */
.fd-steps li:last-child::before{display:none}
.fd-steps h3{font-weight:900;font-size:20px;line-height:1.35;color:var(--ink);letter-spacing:-.02em;margin-bottom:4px}
.fd-steps p{font-size:14.5px;line-height:1.8}
.fd-again{margin-top:6px}
@media (min-width:900px){
  .fd-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-bottom:52px}
  .fd-steps li{display:block}
  .fd-steps .no{display:block;width:max-content;font-size:68px;padding:0 18px 0 0;margin-bottom:18px;text-shadow:4px 4px 0 var(--ink)}
  .fd-steps li::before{left:0;right:-40px;top:33px;bottom:auto;border-left:0;border-top:3px dotted var(--ink)}
  .fd-steps li:last-child::before{display:block;right:14px}
  .fd-steps li:last-child::after{content:"";position:absolute;right:0;top:25px;border:9px solid transparent;border-left:15px solid var(--ink);border-right:0}
  .fd-steps h3{font-size:23px;margin-bottom:6px}
  .fd-steps p{font-size:15px;max-width:24em}
  .fd-again{display:flex;justify-content:center;margin-top:10px}
}

/* ===== 2. 質問：1問ずつ。上に進み具合、フクロウ（案内役）が質問を読む、下に大きな選択肢、ツバメ（旅人）が相づち ===== */
.fd-quiz{position:relative;flex-direction:column;min-height:calc(100svh - var(--fd-hd,60px));padding:18px 0 34px;border-bottom:var(--bd);overflow:hidden}
.fd-quiz::before{content:"";position:absolute;left:-10%;right:-10%;top:34%;height:48%;transform:rotate(-4deg);pointer-events:none;   /* ティールの網点の帯（斜め） */
  background-image:radial-gradient(rgba(19,158,147,.34) 1.2px,transparent 1.6px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent)}
.fd-quiz>.va-in{position:relative;flex:1;width:100%;display:flex;flex-direction:column}
/* 上の段：診断の名前・進み具合・やめる */
.fd-qtop{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.fd-qtop .va-stick{font-size:12.5px;padding:3px 11px}
.fd-quit{margin-left:auto;font-family:var(--px);font-size:12px;line-height:1.4;color:var(--mute);background:none;border:0;padding:6px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fd-quit:hover{color:var(--ink)}
.fd-prog{order:3;flex:1 0 100%;display:flex;align-items:center;gap:12px;min-width:0}
.fd-prog .num{flex:none;display:flex;align-items:baseline;gap:5px;font-family:var(--en);font-weight:800;line-height:1;color:var(--ink)}
.fd-prog .num i{font-style:normal;font-size:11px;letter-spacing:.04em}
.fd-prog .num b{font-size:26px;letter-spacing:0;color:var(--teal-d);min-width:1.5em;text-align:right;font-variant-numeric:tabular-nums}
.fd-prog .num small{font-size:11px;color:var(--mute)}
.fd-segs{flex:1;display:flex;gap:4px;min-width:0;padding:0 4px}
.fd-segs li{flex:1;height:14px;border:var(--bd);background:var(--paper2);transform:skewX(-16deg);transition:background .25s}
.fd-segs li.done{background:var(--teal)}
.fd-segs li.now{background:var(--ink)}
.fd-segs li.skip{background:repeating-linear-gradient(90deg,var(--ink) 0 2px,var(--paper2) 2px 5px)}   /* 聞かない問い（Q4） */
/* 舞台：質問の吹き出し＋フクロウ → 選択肢 → 戻る → ツバメの相づち */
.fd-stage{padding:10px 0 8px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}   /* 質問の位置は、問いが替わっても動かさない（上にそろえる） */
/* 文は語の途中で折らない：折ってよい所は finder.js が <wbr> で入れる（「|」）。入りきらないときだけ、どこでも折る */
.fd-q h2,.fd-q .hint,.fd-aiz .va-say,.fd-tk .line,.fd-about .va-say,.fd-card .why p{word-break:keep-all;overflow-wrap:anywhere}
/* スマホ：質問の吹き出しは画面の幅いっぱい。フクロウは小さく、吹き出しの右上の角にとまる（文の幅をせばめない） */
.fd-ask{position:relative;padding-top:58px}
.fd-q{padding:14px 16px 18px}
.fd-q::before{display:none}
.fd-q .ax{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding-right:64px}
.fd-q .qn{font-family:var(--en);font-weight:800;font-size:10.5px;letter-spacing:.06em;color:var(--mute)}
.fd-q h2{font-weight:900;font-size:clamp(22px,6.2vw,28px);line-height:1.38;letter-spacing:-.02em;color:var(--ink);font-feature-settings:"palt";text-wrap:balance}
.fd-q h2:focus{outline:none}
.fd-q .hint{margin-top:7px;font-size:12px}
.fd-owl{position:absolute;right:2px;top:0;z-index:2;width:58px}
.fd-b.fd-owl .va-plate{display:none}
/* 選択肢：大きく、親指で押しやすく。2pxの線＋ずらした影。選ぶとティールになって沈む */
.fd-opts{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fd-opts[data-n="1"],.fd-opts[data-n="3"]{grid-template-columns:minmax(0,1fr)}
.fd-opts[data-n="5"] .fd-opt:last-child{grid-column:1/-1}
.fd-opt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:68px;padding:10px 10px;border:var(--bd);background:var(--paper2);color:var(--ink);box-shadow:var(--sh);
  cursor:pointer;text-align:center;transition:transform .15s,box-shadow .15s,background .15s,color .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.fd-opt b{font-weight:900;font-size:21px;line-height:1.2;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere}   /* 長い選択肢は「・」の後ろで折る */
.fd-opt small{font-family:var(--px);font-size:11.5px;line-height:1.3;color:var(--mute)}
.fd-opt small.e{font-family:var(--en);font-weight:800;font-size:9px;letter-spacing:.1em}
.fd-opt kbd{display:none}
.fd-opts[data-n="2"] .fd-opt{min-height:112px}
.fd-opts[data-n="2"] .fd-opt b{font-size:32px}
.fd-opts[data-n="3"] .fd-opt b{font-size:23px}
.fd-opt:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.fd-opt[aria-pressed="true"],.fd-name[aria-pressed="true"]{background:var(--teal);color:#fff;transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.fd-opt[aria-pressed="true"] small,.fd-name[aria-pressed="true"] small{color:#fff}
.fd-opt:focus-visible,.fd-name:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.fd-opt.slim{min-height:56px;flex-direction:row;gap:10px}
.fd-opt.slim b{font-size:17px}
/* Q9：名前を選ぶ（任意） */
.fd-pick{display:grid;gap:12px}
.fd-pick .cap{font-family:var(--px);font-size:12px;line-height:1.5;color:var(--mute);display:flex;align-items:center;gap:10px}
.fd-pick .cap::after{content:"";flex:1;border-top:1.5px dashed var(--ink);opacity:.5}
.fd-names{display:flex;flex-wrap:wrap;gap:9px}
.fd-name{display:inline-flex;align-items:baseline;gap:7px;font-weight:700;font-size:15px;line-height:1.2;min-height:46px;padding:11px 13px;border:var(--bd);background:var(--paper2);color:var(--ink);box-shadow:3px 3px 0 var(--ink);
  cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.fd-name small{font-family:var(--px);font-weight:400;font-size:10.5px;color:var(--mute)}
/* 名前の選択肢：左に小さなサムネイル、右に名前と事務所 */
.fd-name:has(.va-mini){align-items:center;gap:10px;padding:5px 13px 5px 5px;text-align:left}
.fd-name:has(.va-mini) small{display:block;margin-top:2px}
.fd-name:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.fd-q9q input{font:inherit;font-weight:700;font-size:16px;padding:9px 12px;border:var(--bd);background:var(--paper2);color:var(--ink);width:min(100%,420px);margin:0 0 12px}
.fd-q9q input:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
/* 下の段：1つ戻る（数字キー・← キーでも操作できるが、画面には案内を出さない。運営者 2026-11-14） */
.fd-qfoot{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;min-height:40px}
.fd-back{font-size:13.5px;padding:9px 14px 9px 12px;box-shadow:3px 3px 0 var(--ink)}
.fd-back:hover i{transform:translateX(-3px)}
.fd-back[disabled]{visibility:hidden}
/* ツバメの相づち */
.fd-aiz{display:flex;align-items:flex-end;gap:16px;margin-top:4px}
.fd-aiz .fd-b{width:66px;padding-bottom:10px}
.fd-aiz .fd-b .va-plate{display:none}
.fd-aiz .va-say{font-size:14px;line-height:1.6;padding:9px 13px;margin-bottom:22px;box-shadow:3px 3px 0 var(--ink)}
.fd-aiz .va-say::before{top:auto;bottom:10px;width:16px;height:16px;left:-10px}
/* 問いが替わるとき：文字と選択肢が下からすっと出る（短く。出たあとは止まる） */
[data-motion="on"] .fd-q h2,[data-motion="on"] .fd-opt,[data-motion="on"] .fd-pick .cap,[data-motion="on"] .fd-name,[data-motion="on"] .fd-aiz .va-say{animation:fd-in .34s var(--ease) backwards}
[data-motion="on"] .fd-opt:nth-child(2){animation-delay:.03s}
[data-motion="on"] .fd-opt:nth-child(3){animation-delay:.06s}
[data-motion="on"] .fd-opt:nth-child(4){animation-delay:.09s}
[data-motion="on"] .fd-opt:nth-child(5){animation-delay:.12s}
[data-motion="on"] .fd-opt:nth-child(6){animation-delay:.15s}
[data-motion="on"] .fd-aiz .va-say{animation-delay:.12s}
@keyframes fd-in{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.fd-q h2,.fd-opt,.fd-pick .cap,.fd-name,.fd-aiz .va-say{animation:none!important}}
@media (hover:hover) and (pointer:fine){
  .fd-opt:hover:not([aria-pressed="true"]),.fd-name:hover:not([aria-pressed="true"]){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--teal-l)}
}
@media (min-width:1000px){
  .fd-quiz{padding:26px 0 44px}
  .fd-qtop{flex-wrap:nowrap;gap:26px}
  .fd-qtop .va-stick{font-size:14px;padding:4px 14px}
  .fd-prog{order:0;flex:1 1 auto;gap:16px}
  .fd-prog .num b{font-size:34px}
  .fd-prog .num i,.fd-prog .num small{font-size:13px}
  .fd-segs{gap:6px;padding:0 8px}
  .fd-segs li{height:16px}
  .fd-quit{margin-left:0;font-size:13px}
  /* 質問の吹き出しを広く：左右の2羽の列を細めにして、まん中（質問と選択肢）に幅を回す（運営者 2026-11-14「ボックスが少し小さい」） */
  .fd-stage{grid-template-columns:clamp(136px,11.5vw,176px) minmax(0,1fr) clamp(118px,10vw,156px);grid-template-areas:"swl ask owl" "swl opts owl" "swl foot owl";grid-template-rows:auto auto 1fr;gap:26px clamp(20px,2.2vw,32px);min-height:440px;padding:clamp(30px,7vh,84px) 0 10px;align-items:start}
  .fd-ask{display:contents}
  .fd-q{grid-area:ask;padding:24px 32px 28px;box-shadow:var(--sh-l)}
  .fd-q::before{display:block;top:44px;bottom:auto}
  .fd-q .ax{margin-bottom:10px;padding-right:0}
  .fd-q h2{font-size:clamp(30px,3.1vw,46px);line-height:1.3}
  .fd-q .hint{margin-top:10px;font-size:13px}
  .fd-owl{position:relative;right:auto;top:auto;grid-area:owl;width:auto;padding-bottom:16px}
  .fd-b.fd-owl .va-plate{display:inline-flex;left:50%;right:auto;bottom:-8px;transform:translateX(-50%) rotate(3deg);transform-origin:center;padding:2px 9px 3px;box-shadow:3px 3px 0 var(--ink)}
  .fd-owl .va-plate small{font-size:10px}
  .fd-owl .va-plate b{font-size:15px}
  .fd-ans{grid-area:opts}
  .fd-opts{gap:18px}
  .fd-opts[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fd-opts[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fd-opts[data-n="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fd-opts[data-n="5"] .fd-opt{grid-column:span 2}
  .fd-opts[data-n="5"] .fd-opt:nth-child(n+4){grid-column:span 3}
  .fd-opts[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fd-opt{min-height:100px;padding:14px 14px}
  .fd-opt b{font-size:25px}
  .fd-opts[data-n="2"] .fd-opt{min-height:132px}
  .fd-opts[data-n="2"] .fd-opt b{font-size:40px}
  .fd-opts[data-n="3"] .fd-opt b{font-size:29px}
  .fd-opts[data-n="4"] .fd-opt b{font-size:23px}
  .fd-opts[data-n="6"] .fd-opt{min-height:84px}
  .fd-opt.slim{min-height:60px}
  .fd-opt.slim b{font-size:18px}
  .fd-name{font-size:16px}
  .fd-qfoot{grid-area:foot}
  /* ツバメは左の列の同じ位置に立つ（問いが替わっても動かない）。相づちの吹き出しは、決まった高さの段の下端にそろえる */
  .fd-aiz{grid-area:swl;align-self:start;display:grid;grid-template-rows:96px auto;justify-items:center;gap:20px;margin:34px 0 0}
  .fd-aiz .fd-b{width:100%;grid-row:2;padding-bottom:16px}
  .fd-aiz .fd-b .va-plate{display:inline-flex}
  .fd-aiz .va-say{grid-row:1;align-self:end;margin:0;font-size:14.5px;padding:10px 14px;text-align:center;transform:rotate(-2deg)}
  .fd-aiz .va-say::before{left:calc(50% - 8px);bottom:-10px;transform:rotate(-45deg) skew(12deg,12deg)}
}

/* ===== 3. 結果：きっぷ（スクリーンショットで共有する1枚。名前と文だけ。本人の絵は入れない）===== */
.fd-res{position:relative;overflow:hidden;padding:18px 0 40px;border-bottom:var(--bd)}
.fd-res .va-tape{position:absolute;z-index:0;left:-6vw;width:112vw;top:150px;transform:rotate(-3deg);box-shadow:0 4px 0 rgba(21,21,21,.16);--tape-h:36px}
.fd-res>.va-in{position:relative;z-index:1}
.fd-res .crumb{font-family:var(--px);font-size:11px;color:var(--mute)}
.fd-res .crumb a{color:var(--ink);text-underline-offset:3px}
.fd-tkwrap{position:relative;max-width:1010px;margin:14px auto 0}
.fd-tk{display:grid;grid-template-columns:minmax(0,1fr);filter:drop-shadow(6px 6px 0 var(--ink))}
/* きっぷの2枚（本体と半券）。切り取り線の両端に、丸い切り欠き（マスクで抜き、同じ中心の輪で線を描く） */
.fd-tk-main,.fd-tk-stub{--r:12px;position:relative;display:flex;flex-direction:column;min-width:0;background:var(--paper2);border:var(--bd);
  --notch:radial-gradient(circle at var(--c1),transparent var(--r),#000 calc(var(--r) + .5px)),radial-gradient(circle at var(--c2),transparent var(--r),#000 calc(var(--r) + .5px));
  -webkit-mask-image:var(--notch);mask-image:var(--notch);-webkit-mask-composite:source-in;mask-composite:intersect}
.fd-tk-main::after,.fd-tk-stub::after{content:"";position:absolute;inset:-2px;z-index:3;pointer-events:none;background-repeat:no-repeat;
  background-image:radial-gradient(circle at var(--c1),transparent calc(var(--r) - .5px),var(--ink) var(--r),var(--ink) calc(var(--r) + 2px),transparent calc(var(--r) + 2.5px)),
    radial-gradient(circle at var(--c2),transparent calc(var(--r) - .5px),var(--ink) var(--r),var(--ink) calc(var(--r) + 2px),transparent calc(var(--r) + 2.5px))}
.fd-tk-main{--c1:0 100%;--c2:100% 100%;border-bottom:0}
.fd-tk-main::after{bottom:0}
.fd-tk-stub{--c1:0 0;--c2:100% 0;border-top:2px dashed var(--ink)}
/* きっぷの上の帯 */
.fd-tk-hd{display:flex;align-items:baseline;gap:9px;padding:8px 18px 7px;background:var(--teal);color:#fff;border-bottom:var(--bd);line-height:1.4;white-space:nowrap;overflow:hidden}
.fd-tk-hd b{font-weight:900;font-size:14.5px;letter-spacing:.01em}
.fd-tk-hd .e{font-family:var(--en);font-weight:800;font-size:9.5px;letter-spacing:.08em}
.fd-tk-hd .u{margin-left:auto;font-family:var(--px);font-size:12px;letter-spacing:.04em}
.fd-tk-stub .fd-tk-hd{background:var(--ink);color:var(--paper2);border-bottom:0}
/* 本体：コースの名前（極太）と一言 */
.fd-tk-body{position:relative;flex:1;container-type:inline-size;padding:18px 18px 24px}
.fd-tk .lbl{font-family:var(--px);font-size:13px;line-height:1.4;color:var(--mute);margin-bottom:5px}
.fd-tk-name{font-weight:900;color:var(--ink);line-height:1.04;letter-spacing:-.04em;font-feature-settings:"palt"}
.fd-tk-name .w{display:block;white-space:nowrap;font-size:min(104px,calc(100cqw / var(--n)))}
.fd-tk-name .c{display:flex;align-items:baseline;gap:.34em;margin-top:.14em;font-size:min(46px,calc(100cqw / var(--n) * .52))}
.fd-tk-name em{font-style:normal;font-family:var(--cur);font-weight:700;font-size:.92em;letter-spacing:0;line-height:1;color:var(--teal-d);white-space:nowrap;transform:rotate(-4deg);transform-origin:left bottom}
.fd-tk .line{font-weight:700;font-size:16.5px;line-height:1.6;color:var(--ink);margin-top:14px}
.fd-tk .marks{margin-top:12px;align-items:center}
.fd-tk .marks i{font-style:normal;font-family:var(--px);font-size:11px;color:var(--mute);margin-right:2px}
.fd-spark{position:absolute;right:13px;top:5px;width:26px}   /* きらめき：このページの黄緑はここ1点だけ */
.fd-spark svg,.fd-stamp svg{display:block;width:100%;height:auto}
.fd-stamp{display:none}
/* 半券：合いそうなタレント3人を、コースの「停車駅」のように縦の航路（点線）でつなぐ。名前と所属の札だけ（きっぷは名前だけ。DD-8・DESIGN.md 第9章）。順位の番号は付けない */
.fd-route{flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px 18px 20px}
.fd-route li{position:relative;padding:0 0 18px 32px}
.fd-route li:last-child{padding-bottom:0}
.fd-route li:not(:last-child)::before{content:"";position:absolute;left:6px;top:14px;bottom:-10px;border-left:3px dotted var(--ink)}
.fd-route .stop{position:absolute;left:1px;top:6px;width:13px;height:13px;background:var(--paper2);border:var(--bd);transform:rotate(45deg)}
.fd-route b{display:block;font-weight:900;font-size:19px;line-height:1.3;color:var(--ink);letter-spacing:-.02em;font-feature-settings:"palt";overflow-wrap:anywhere}
.fd-route .va-tags{margin-top:5px}
.fd-route .va-tag{font-size:11px}
.fd-side,.fd-bite{display:none}
/* 共有・もう一度 */
.fd-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:1010px;margin:30px auto 0}
.fd-acts .va-btn{font-size:15px;padding:13px 10px;gap:8px}
.fd-acts .va-btn:only-child{grid-column:1/-1;font-size:17px;padding:15px 18px}
@media (min-width:900px){
  .fd-res{padding:22px 0 46px}
  .fd-res .va-tape{top:210px;--tape-h:44px}
  .fd-tkwrap{margin-top:18px}
  .fd-tk{grid-template-columns:minmax(0,1.76fr) minmax(0,1fr);filter:drop-shadow(8px 8px 0 var(--ink))}
  .fd-tk-main{--c1:100% 0;--c2:100% 100%;border-bottom:var(--bd);border-right:0}
  .fd-tk-main::after{bottom:-2px;right:0}
  .fd-tk-stub{--c1:0 0;--c2:0 100%;border-top:var(--bd);border-left:2px dashed var(--ink)}
  .fd-tk-hd{padding:9px 26px 8px}
  .fd-tk-hd b{font-size:15.5px}
  .fd-tk-body{padding:24px 30px 30px}
  .fd-tk .lbl{font-size:14px;margin-bottom:6px}
  .fd-tk .line{font-size:20px;margin-top:18px}
  .fd-tk .marks{margin-top:14px}
  .fd-spark{right:24px;top:9px;width:34px}
  .fd-stamp{display:block;position:absolute;right:24px;bottom:20px;width:112px;transform:rotate(-11deg)}
  .fd-route{padding:22px 26px 24px}
  .fd-route li{padding-bottom:22px}
  .fd-route li:not(:last-child)::before{bottom:-14px}
  .fd-route b{font-size:21px}
  /* 下の切り欠き：ずらした影が切り欠きの中に黒く見えるので、同じ中心・同じ半径を紙の色で抜く（上の切り欠きと同じ形に見せる） */
  .fd-bite{display:block;position:absolute;z-index:1;left:calc(100% * 1.76 / 2.76 - 12px);bottom:-12px;width:24px;height:24px;border-radius:50%;background:var(--paper) var(--grain)}
  .fd-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:34px}
  .fd-acts .va-btn,.fd-acts .va-btn:only-child{font-size:16px;padding:13px 22px;gap:10px}
}
@media (min-width:1340px){   /* 2羽は、きっぷの左右の余白に立つ（左＝ツバメは大きめ、右＝フクロウは小さめ） */
  .fd-side{display:block;position:absolute;bottom:-4px;z-index:2}
  .fd-side.a{right:calc(100% + 16px);width:clamp(110px,calc(50vw - 560px),156px)}
  .fd-side.b{left:calc(100% + 26px);width:clamp(84px,calc(38vw - 428px),118px)}
}

/* ===== 3. 結果：最初の1本（タレントごとに、所属・合いそうな理由・本人の動画・タレントのページへ） ===== */
.fd-cards{display:grid;grid-template-columns:minmax(0,1fr)}
.fd-first .va-h h2{text-wrap:balance}
.fd-card{display:grid;grid-template-columns:minmax(0,1fr);row-gap:14px;align-content:start;padding:26px 0}
.fd-card:first-child{padding-top:0}
.fd-card+.fd-card{border-top:2px dashed var(--line)}
.fd-card header{display:grid;gap:7px;align-content:start}
.fd-card h3{font-weight:900;font-size:23px;line-height:1.25;color:var(--ink);letter-spacing:-.02em;font-feature-settings:"palt";overflow-wrap:anywhere}
.fd-card .why{position:relative;align-self:start;background:var(--paper);border:1.5px dashed var(--ink);padding:13px 13px 10px;margin-top:6px}
.fd-card .why b{position:absolute;left:10px;top:-10px;font-family:var(--px);font-weight:400;font-size:10.5px;line-height:1.5;background:var(--teal);color:#fff;padding:0 7px}
.fd-card .why p{font-weight:700;font-size:14.5px;line-height:1.7;color:var(--ink)}
.fd-card .why small{display:block;font-family:var(--px);font-size:10.5px;line-height:1.6;color:var(--mute);margin-top:3px}
.fd-card .vt{display:grid;gap:6px;align-content:start}
.fd-card .vt p{font-weight:700;font-size:13.5px;line-height:1.55;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.fd-card .vt a{justify-self:start}
.fd-card .go{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;align-self:end}
@media (min-width:900px){
  .fd-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fd-card{grid-row:span 5;grid-template-rows:subgrid;row-gap:16px;padding:0 clamp(16px,2vw,28px)}
  .fd-card:first-child{padding-left:0}
  .fd-card:last-child{padding-right:0}
  .fd-card+.fd-card{border-top:0;border-left:2px dashed var(--line)}
  .fd-card h3{font-size:clamp(20px,1.8vw,25px)}
}

/* ===== 3. 結果：この先（フクロウのひとこと・もう一度・ほかの入口へ） ===== */
.fd-next-grid{display:grid;gap:30px}
.fd-about{display:grid;grid-template-columns:minmax(0,1fr)}
.fd-about .va-say{background:var(--paper2);font-size:16px;line-height:1.8;padding:14px 18px 16px}
.fd-about .va-say::before{display:none}
.fd-about .fd-b{order:-1;justify-self:end;z-index:1;width:74px;margin-right:12px}
.fd-links{display:grid;gap:14px;align-content:start}
.fd-links .va-btn{justify-content:space-between;white-space:normal;text-align:left}
@media (min-width:900px){
  .fd-next-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:end}
  .fd-about{grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:end}
  .fd-about .va-say{font-size:18px;padding:18px 24px 20px}
  .fd-about .va-say::before{display:block;top:auto;bottom:30px}
  .fd-about .fd-b{order:0;justify-self:auto;width:112px;margin:0 0 14px}
}

/* 質問を画面のまん中に（2026-11-14 運営者「上に詰まって、下が空いている。vh で」）：
   舞台（質問・選択肢・2羽）を、進み具合の段の下の残りの高さの中で上下まん中に。舞台の高さはそろえて、問いが替わっても質問の位置は動かさない */
.fd-stage{margin-block:auto}
@media (min-width:1000px){
  .fd-quiz{min-height:calc(100svh - var(--fd-hd,60px))}
  .fd-stage{padding:0;min-height:0;grid-template-rows:auto auto auto}   /* 問いごとに、中身の高さで上下まん中（2026-11-14 運営者「まだ真ん中に来ていない」。問いの位置を固定するより、まん中を優先） */
}

/* 9問目の札：行の右にすき間を残さず、札を伸び縮みさせて並べる（2026-11-14） */
.fd-names{gap:9px}
.fd-name{flex:1 1 auto}
.fd-fill{flex:1 1 170px;height:0;margin:0;visibility:hidden}
.fd-names .fd-fill{margin-top:-9px}
/* 結果の3人：まん中のカードも左右と同じ幅に（左右の余白を列のすき間にした）（2026-11-14） */
@media (min-width:900px){
  .fd-cards{column-gap:clamp(32px,4vw,56px)}
  .fd-card,.fd-card:first-child,.fd-card:last-child{padding-left:0;padding-right:0;position:relative}
  .fd-card+.fd-card{border-left:0}
  .fd-card+.fd-card::before{content:"";position:absolute;top:0;bottom:0;left:calc(clamp(32px,4vw,56px) / -2 - 1px);border-left:2px dashed var(--line)}
}
@media (min-width:1000px){.fd-quiz{padding:26px 0}}   /* 上下の余白をそろえて、質問を見た目のまん中に */