/* Nudgelab v4 部品CSS（tokens.css を先に読み込むこと）
   ラフA案の見た目を、トークン参照に置き換えて整理したもの。 */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body);overflow-x:hidden}
ul,ol{list-style:none}
/* 見出し：全レベル --fh（同じ書体）で統一 */
h1,h2,h3,h4{font-family:var(--fh);line-height:var(--lh-head);font-weight:var(--fw-bold);word-break:auto-phrase;text-wrap:balance}
h1{font-size:var(--fs-h1);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-body)}
.in{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--section-y) 0}
.sub{color:var(--mute);margin-top:var(--sp-2)}
.small{font-size:var(--fs-small);color:var(--mute);margin-top:var(--sp-2)}
.note{font-size:var(--fs-small);color:var(--mute);margin-top:12px}
.kicker{font-weight:var(--fw-bold);color:var(--ac)}

/* ---- ヘッダー ---- */
.hd{position:sticky;top:0;z-index:9;background:color-mix(in srgb,var(--bg) 93%,transparent);backdrop-filter:blur(6px);border-bottom:var(--bd)}
.hd .in{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.logo{font-weight:var(--fw-bold);font-size:20px;letter-spacing:var(--ls-logo);color:var(--ac)}

/* ---- ボタン（ピル型） ---- */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ac);color:var(--on-ac);text-decoration:none;font-weight:var(--fw-bold);border:1px solid var(--ac);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-body);line-height:var(--lh-tight);transition:transform var(--t-btn) var(--ease)}
.btn .ar{transition:transform var(--t-btn) var(--ease);flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ar{transform:translateX(4px)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn.sm{padding:var(--sp-1) var(--sp-3);font-size:var(--fs-small)}
.btn.ghost{background:transparent;color:var(--ac)}
.btn.inv{background:var(--bg);color:var(--ac);border-color:var(--bg)}

/* ---- 価格表示 ---- */
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-1) 12px;margin:var(--sp-2) 0 var(--sp-4)}
.price .lim{background:var(--ink);color:var(--bg);border-radius:var(--r-pill);padding:0 var(--sp-2);font-size:14px;font-weight:var(--fw-bold);align-self:center}
.price .old{text-decoration:line-through;color:var(--mute)}
.price .to{color:var(--ac)}
.price .new{font-size:var(--fs-body)}
.price .new b{font-size:var(--fs-price);color:var(--ac);line-height:var(--lh-price);font-family:var(--fh)}

/* ---- 「人 → 行き先」チップ（flow2） ---- */
.flow2{display:grid;gap:var(--sp-1);margin:var(--sp-4) 0;max-width:520px}
.flow2 li{display:flex;align-items:center;gap:var(--sp-2);background:var(--bg);border:var(--bd);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1)}
.flow2 .who{background:var(--tint);color:var(--ac);font-weight:var(--fw-bold);border-radius:var(--r-pill);padding:4px var(--sp-2);font-size:14px;white-space:nowrap;min-width:104px;text-align:center}
.flow2 .ar{color:var(--ac);flex:none}
.flow2 span:last-child{font-size:var(--fs-sub)}

/* ---- カード（比較） ---- */
.card{background:var(--bg);border-radius:var(--r);padding:var(--sp-3);border:var(--bd)}
.card .tag{font-size:var(--fs-small);font-weight:var(--fw-bold);margin-bottom:var(--sp-1)}
.card .ph{margin-top:var(--sp-2)}
.card.quiet{color:var(--mute)}                    /* 「だけ」側：線のみ・静か */
.card.hit{border:var(--bd-hit)}                   /* 「公式サイトあり」側：アクセントの縁取り */
.card.hit .tag{color:var(--ac)}
.close{font-size:var(--fs-lead);font-weight:var(--fw-bold);line-height:1.8;max-width:720px}

/* ---- 含まれるもの（チェックリスト）・小ボックス ---- */
.incl{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-4)}
.incl li{position:relative;padding-left:var(--sp-4)}
.incl li:before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:var(--ac)}
.incl li:after{content:"";position:absolute;left:6px;top:10px;width:5px;height:9px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.more{margin-top:var(--sp-4);border:var(--bd);border-radius:var(--r);padding:var(--sp-3);background:var(--bg)}
.more h3{color:var(--ac)}
.more p{font-size:14px;margin-top:var(--sp-1)}

/* ---- 縦の番号つきタイムライン ---- */
.flow{position:relative}
.flow li{position:relative;display:flex;align-items:center;gap:var(--sp-3);padding-bottom:var(--sp-4)}
.flow li:before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:var(--tint2)}
.flow li:last-child:before{display:none}
.flow .no{flex:none;width:40px;height:40px;border-radius:50%;background:var(--ac);color:var(--on-ac);font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;position:relative}
.flow .ft{flex:1;font-weight:var(--fw-bold)}

/* ---- FAQ（アコーディオン） ---- */
.faq{display:grid;gap:var(--sp-1)}
details{background:var(--bg);border:var(--bd);border-radius:var(--r);padding:var(--sp-2) var(--sp-3)}
summary{cursor:pointer;font-weight:var(--fw-bold);list-style:none;position:relative;padding:0 var(--sp-4)}
summary::-webkit-details-marker{display:none}
summary:before{content:"Q";position:absolute;left:0;color:var(--ac)}
summary:after{content:"+";position:absolute;right:0;color:var(--ac)}
details[open] summary:after{content:"−"}
summary:focus-visible{outline:2px solid var(--ac);outline-offset:4px;border-radius:4px}
details p{margin-top:var(--sp-1);padding-left:var(--sp-4);font-size:var(--fs-sub);color:var(--ink)}

/* ---- CTA帯（アクセント面） ---- */
.band{background:var(--ac);color:var(--on-ac);text-align:center}
.band h2{max-width:760px;margin:0 auto}
.band .sup{color:var(--on-ac-sub);margin-bottom:var(--sp-3)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin:var(--sp-6) 0 var(--sp-4);text-align:left}
.three li{background:var(--bg);color:var(--ink);border-radius:var(--r);padding:var(--sp-3);font-weight:var(--fw-bold);font-size:var(--fs-sub);line-height:1.8}
.three .n{display:flex;width:32px;height:32px;border-radius:50%;background:var(--ac);color:var(--on-ac);align-items:center;justify-content:center;margin-bottom:12px;font-size:14px}

/* ---- イラスト枠（画像が入るまでの仮枠。画像ステップで差し替え） ---- */
.ph{background:repeating-linear-gradient(135deg,var(--ph-a) 0 12px,var(--ph-b) 12px 24px);border:1px dashed var(--ph-line);border-radius:var(--r);color:var(--ph-ink);display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--sp-2);font-size:var(--fs-small);line-height:1.6}
.ph.hero{aspect-ratio:1/1.05;min-height:360px}                 /* ファーストビュー：一番大きい */
.ph.mini{aspect-ratio:4/3;width:100%;max-width:200px;font-size:12px} /* カード内 */
.ph.side{width:160px;max-width:none;aspect-ratio:1/1;flex:none}     /* 見出し脇 */
.ph.maker{aspect-ratio:1/1;width:100%;max-width:280px}              /* 制作者 */
.ph.ico{width:88px;height:64px;padding:4px;font-size:11px;flex:none}/* 流れのアイコン */
.ph.bigfoot{aspect-ratio:16/7;width:100%;margin-top:56px;background:repeating-linear-gradient(135deg,#F5FAF922 0 12px,#F5FAF910 12px 24px);border-color:#F5FAF988;color:var(--on-ac)} /* 最終CTA：例外で大きく */

/* ---- 円弧ギャラリー（制作サンプル・5枠） ---- */
.arcwrap{position:relative;height:var(--arc-h);margin-top:var(--sp-4);overflow:hidden;--dx:var(--arc-dx);--dy:var(--arc-dy);touch-action:pan-y}
.arcring{position:absolute;left:50%;top:80px;width:var(--arc-ring);height:var(--arc-ring);margin-left:calc(var(--arc-ring) / -2);border:1px dashed var(--ac);border-radius:50%;opacity:.5;transition:transform var(--arc-step) cubic-bezier(.3,1.35,.5,1)}
.arcstage{position:absolute;inset:0}
.mock{position:absolute;left:50%;top:var(--sp-4);width:var(--mock-w);height:var(--mock-h);border:var(--mock-bw) solid var(--ink);border-radius:var(--r-mock);background:var(--bg);overflow:hidden;transform-origin:50% 50%;transition:transform var(--arc-step) cubic-bezier(.3,1.35,.5,1),opacity var(--arc-step) ease,border-color var(--arc-step) ease}
.mock .screen{position:absolute;inset:0;padding:var(--sp-4) var(--sp-2);background:var(--mock-screen);display:flex;flex-direction:column;gap:12px}
.mock .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mock .bar{height:28px;background:var(--mock-bar);border-radius:6px}
.mock .blk{height:120px;background:var(--mock-blk);border-radius:8px}.mock .blk.s{height:64px}
.mock .pill{height:32px;width:60%;background:var(--mock-pill);border-radius:var(--r-pill);margin:auto auto 0}
.mock em{position:absolute;left:0;right:0;top:44%;text-align:center;font-style:normal;font-size:var(--fs-small);color:var(--ph-ink);line-height:1.6;background:#F5FAF9cc;padding:var(--sp-1) 0}
/* 5つの定位置：正面(0)・左右(±1)・外側(±2) */
.mock[data-slot="0"]{z-index:5;transform:translateX(-50%) scale(1.12);border-color:var(--ac)}
.mock[data-slot="-1"]{z-index:4;transform:translateX(calc(-50% - var(--dx))) translateY(var(--dy)) rotate(-10deg) scale(.8)}
.mock[data-slot="1"]{z-index:4;transform:translateX(calc(-50% + var(--dx))) translateY(var(--dy)) rotate(10deg) scale(.8)}
.mock[data-slot="-2"]{z-index:3;transform:translateX(calc(-50% - var(--dx)*1.7)) translateY(calc(var(--dy)*3.6)) rotate(-20deg) scale(.62);opacity:.9}
.mock[data-slot="2"]{z-index:3;transform:translateX(calc(-50% + var(--dx)*1.7)) translateY(calc(var(--dy)*3.6)) rotate(20deg) scale(.62);opacity:.9}
.nav{position:absolute;top:50%;z-index:9;width:48px;height:48px;border-radius:50%;border:1px solid var(--ac);background:var(--bg);color:var(--ac);font-size:24px;line-height:1;cursor:pointer}
.nav:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.nav.prev{left:var(--sp-3)}.nav.next{right:var(--sp-3)}
.arccap{text-align:center;max-width:560px;margin:0 auto}
.cap-name{font-weight:var(--fw-bold);color:var(--ac)}
.cap-text{font-size:18px;font-weight:var(--fw-bold);margin-top:4px;min-height:calc(18px * 1.9)}
.dots{display:flex;justify-content:center;gap:var(--sp-1);margin-top:var(--sp-2)}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--tint2);transition:width .3s var(--ease)}
.dots i.on{background:var(--ac);width:var(--sp-3);border-radius:var(--sp-1)}

/* ---- 出現アニメ（スクロールでふわっと） ---- */
.reveal{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.reveal.in-view{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
  .btn:hover,.btn:hover .ar{transform:none}
}

/* ---- スマホ（720px以下） ---- */
@media(max-width:720px){
  body{font-size:var(--fs-body-sp)}
  h1{font-size:var(--fs-h1-sp)}h2{font-size:var(--fs-h2-sp)}
  .in{padding:0 var(--gutter-sp)}
  section{padding:var(--section-y-sp) 0}
  .hd .in{height:var(--header-h-sp)}
  .btn{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-body-sp)}
  .btn.sm{padding:var(--sp-1) 14px;font-size:11px;white-space:nowrap;gap:6px}.btn.sm .ar{display:none}
  .flow2 li{border-radius:var(--sp-3);flex-wrap:wrap;gap:var(--sp-1)}
  .flow2 .who{min-width:0}
  .price .new b{font-size:var(--fs-price-sp)}
  .close{font-size:var(--fs-lead-sp)}
  .incl,.three{grid-template-columns:1fr}
  .flow li{gap:var(--sp-2)}
  .ph.side{width:96px}
  .ph.ico{width:64px;height:48px;font-size:10px}
  .ph.hero{min-height:0;width:100%;aspect-ratio:4/3}
  .band h2{font-size:22px}
  .arcwrap{height:var(--arc-h-sp);--dx:var(--arc-dx-sp);--dy:var(--arc-dy-sp)}
  .mock{width:var(--mock-w-sp);height:var(--mock-h-sp);border-width:var(--mock-bw-sp);border-radius:var(--r-mock-sp)}
  .arcring{width:var(--arc-ring-sp);height:var(--arc-ring-sp);margin-left:calc(var(--arc-ring-sp) / -2)}
  .nav{top:auto;bottom:0;width:40px;height:40px}.nav.prev{left:var(--gutter-sp)}.nav.next{right:var(--gutter-sp)}
}

/* ======================================================================
   ページ構成（セクションの並べ方）— STEP 6 で追記。ラフA案の配置をトークン化したもの。
   ====================================================================== */
.hd .in{transition:height var(--t-btn) var(--ease)}
.hd.shrunk .in{height:calc(var(--header-h) - var(--sp-1))}   /* 縮小：64→56px */
.c{text-align:center}
.sec-hero{padding:var(--hero-y-top) 0 var(--section-y)}       /* ファーストビュー：上だけ短い */
.sec-tint{background:var(--tint)}                              /* 制作サンプルの淡い面 */
.sec-line{border-top:var(--bd)}                                /* 面を変えない区切りは1px線 */
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center}  /* 左文・右絵 */
.hd2{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4)}     /* 見出し＋脇の人物 */
.s3row{display:grid;grid-template-columns:160px 1fr 1fr;gap:var(--sp-3);align-items:stretch;margin-top:var(--sp-4)}
.s3row.first{margin-top:var(--sp-8)}
.s3row h3{color:var(--ac);align-self:center}
.close-gap{margin-top:var(--sp-12)}
.cta-gap{margin-top:var(--sp-4)}
.pricehd{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.pricehd .price{margin-bottom:0}
.incl-after{margin-top:var(--sp-8)}                            /* 含まれるもの→流れの間 */
.makerrow{display:grid;grid-template-columns:280px 1fr;gap:var(--sp-6);align-items:center}
.makerrow h2{margin-bottom:var(--sp-2)}
.faq{margin-top:var(--sp-8)}
.flow{margin-top:var(--sp-8)}
.band h2{font-size:var(--fs-h2)}
@media(max-width:720px){
  .hd.shrunk .in{height:var(--header-h-sp)}
  .two,.makerrow{grid-template-columns:1fr;gap:var(--sp-3)}
  .two>*,.makerrow>*,.s3row>*,.hd2>*,.pricehd>*{min-width:0}
  .sec-hero{padding:var(--hero-y-top-sp) 0 var(--section-y-sp)}
  .hd2,.pricehd{flex-direction:row;align-items:flex-start;gap:var(--sp-2)}
  .s3row{grid-template-columns:1fr;gap:var(--sp-2)}
  .s3row.first{margin-top:var(--sp-6)}
  .close-gap{margin-top:var(--sp-8)}
  .band h2{font-size:22px}
}