/* 現場のAI係の道具箱 ── 本番スタイル（Blueprint／カンプC を採用・2026-09-09）
   施工計画書を「図面」に見立てる。方眼・寸法線・表題欄。

   規律は base.css（文字4段＋表示用1・余白3段・角丸3段・:active・:focus-visible）。
   ここで足すのは「色と配置」だけ。font-size は base の変数しか使わない。
   ブランドの正本（04_デザイン室/01）：ネイビー #0d1b2e／ライム #c3f53c */

:root{
  --navy:#0d1b2e; --paper:#0a1524; --lime:#c3f53c;
  --ink:#dbe7f2; --ink2:#93a8be; --line:#22354d; --maxw:1000px;
}
body{
  color:var(--ink);background:var(--paper);
  background-image:
    linear-gradient(rgba(195,245,60,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(195,245,60,.045) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px;
}
a{color:var(--lime)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-3)}
.mono{font-family:"SFMono-Regular",Consolas,"Courier New",monospace;letter-spacing:.04em}

/* ── ヘッダー ── */
.nav{position:sticky;top:0;z-index:30;background:rgba(10,21,36,.85);backdrop-filter:blur(10px);border-bottom:1px dashed var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:64px}
.brand{display:flex;align-items:center;gap:var(--sp-1);text-decoration:none;color:var(--ink)}
.brand img{width:64px}
.brand b{font-size:var(--fs-cap);letter-spacing:.05em}
.nav .mini{font-size:var(--fs-cap);color:var(--ink2);text-decoration:none;white-space:nowrap}
.nav .mini:hover{color:var(--lime)}

/* ── 表題欄（図面のタイトルブロック） ── */
.hero{padding:48px 0 40px}
.sheet{position:relative;border:2px solid var(--lime);border-radius:var(--r-s);background:rgba(13,27,46,.72)}
.sheet::before{content:"";position:absolute;inset:7px;border:1px solid rgba(195,245,60,.28);pointer-events:none}
.sheet-in{padding:40px 32px var(--sp-3)}
.stamp{position:absolute;top:-12px;left:var(--sp-3);background:var(--lime);color:var(--navy);
  font-size:var(--fs-cap);font-weight:800;letter-spacing:.12em;padding:4px var(--sp-2);border-radius:var(--r-s)}
.target{font-size:var(--fs-cap);color:var(--ink2);margin:0}
h1 em{font-style:normal;color:var(--lime)}
.sub{font-size:var(--fs-sub);color:var(--ink2);margin:0 0 var(--sp-3);max-width:640px}

/* 寸法線 */
.dim{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-3);color:var(--lime);font-size:var(--fs-cap)}
.dim .bar{position:relative;height:1px;background:var(--lime);flex:1;max-width:280px;transform-origin:left}
.dim .bar::before,.dim .bar::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--lime)}
.dim .bar::before{left:0}.dim .bar::after{right:0}

/* 表題欄の欄 */
.block{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--sp-2)}
.cell:last-child{border-right:0}
.cell dt{font-size:var(--fs-cap);letter-spacing:.12em;color:var(--ink2);margin:0 0 4px}
.cell dd{margin:0;font-size:var(--fs-sub);font-weight:700;line-height:1.3}
.cell dd small{color:var(--ink2);font-weight:400;margin-left:2px}
.cell.price dd{color:var(--lime);font-size:var(--fs-h2)}
.cell.price s,.cell.price .cap{display:block;font-size:var(--fs-cap);color:var(--ink2)}

/* ── ボタン（規律は base.css。ここは色だけ） ── */
.cta{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0 0}
.btn-main{background:var(--lime);color:var(--navy)}
.btn-main:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(195,245,60,.35)}
.btn-ghost{border:1px solid var(--lime);color:var(--lime)}
.btn-ghost:hover{background:rgba(195,245,60,.12)}
.btn[aria-disabled="true"]{background:transparent;color:#8299b1;border:1px dashed #3a5175}
.btn[aria-disabled="true"]:hover{transform:none;box-shadow:none;background:transparent}

/* ── 目次（商品ページ・検査の指摘8） ── */
.toc{position:sticky;top:64px;z-index:20;background:rgba(10,21,36,.92);backdrop-filter:blur(10px);
  border-bottom:1px dashed var(--line);margin-bottom:var(--sp-3)}
.toc ul{display:flex;gap:var(--sp-3);list-style:none;margin:0;padding:var(--sp-2) 0;overflow-x:auto}
.toc a{font-size:var(--fs-cap);color:var(--ink2);text-decoration:none;white-space:nowrap;
  padding:var(--sp-1) 0;border-bottom:2px solid transparent}
.toc a:hover{color:var(--lime);border-bottom-color:var(--lime)}

/* ── セクション ── */
section{padding:var(--sp-sec) 0;scroll-margin-top:120px}
.kicker{font-size:var(--fs-cap);letter-spacing:.18em;color:var(--lime);margin:0 0 var(--sp-1)}
.lead{font-size:var(--fs-body);color:var(--ink2);margin:0 0 var(--sp-3);max-width:660px}
ul.plain{margin:0 0 var(--sp-3);padding-left:1.2em;color:var(--ink)}
ul.plain li{margin-bottom:var(--sp-1)}
ol.steps{margin:0 0 var(--sp-3);padding-left:1.4em}
ol.steps li{margin-bottom:var(--sp-2)}

/* 表（16章・入っているもの） */
.sheet2{border:1px solid var(--line);background:rgba(13,27,46,.55);border-radius:var(--r-s)}
.row{display:grid;grid-template-columns:64px 1fr;border-bottom:1px dashed var(--line);align-items:center}
.row:last-child{border-bottom:0}
.row .no{padding:var(--sp-2) 0;text-align:center;color:var(--lime);font-size:var(--fs-cap);border-right:1px dashed var(--line)}
.row .nm{padding:var(--sp-2)}
.row .nm span{display:inline-block}

.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;margin:0 0 var(--sp-3);font-size:var(--fs-body)}
th,td{border:1px solid var(--line);padding:var(--sp-2);text-align:left;vertical-align:top}
th{background:rgba(13,27,46,.8);color:var(--lime);font-size:var(--fs-cap);letter-spacing:.08em;white-space:nowrap}

/* カード */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{position:relative;border:1px solid var(--line);padding:var(--sp-3);background:rgba(13,27,46,.55);
  border-radius:var(--r-s);transition:border-color .22s var(--ease),transform .22s var(--ease)}
.card::after{content:"";position:absolute;left:var(--sp-3);bottom:-1px;height:2px;width:0;background:var(--lime);
  transition:width .3s var(--ease)}
.card:hover{border-color:rgba(195,245,60,.45);transform:translateY(-3px)}
.card:hover::after{width:56px}
.card p{margin:0;color:var(--ink2)}
.card .tagno{font-size:var(--fs-cap);color:var(--lime);letter-spacing:.1em;margin:0 0 var(--sp-1)}
.card .btn{margin-top:var(--sp-2)}

/* 状態のしるし */
.tag{display:inline-block;font-size:var(--fs-cap);font-weight:800;padding:4px var(--sp-2);
  border-radius:var(--r-pill);vertical-align:middle;margin-left:var(--sp-1)}
.tag-now{background:var(--lime);color:var(--navy)}
.tag-soon{background:transparent;color:var(--ink2);border:1px dashed var(--line)}
.tag-free{background:rgba(195,245,60,.14);color:var(--lime);border:1px solid rgba(195,245,60,.4)}

/* 注記 */
.note{background:rgba(13,27,46,.7);border-left:3px solid var(--lime);padding:var(--sp-2) var(--sp-3);
  margin:0 0 var(--sp-3);border-radius:0 var(--r-s) var(--r-s) 0}
.note p:last-child{margin-bottom:0}

/* FAQ */
dl.faq{margin:0 0 var(--sp-3)}
dl.faq dt{font-weight:700;margin-top:var(--sp-3);border-left:3px solid var(--lime);padding-left:var(--sp-2)}
dl.faq dt:first-child{margin-top:0}
dl.faq dd{margin:var(--sp-1) 0 0 var(--sp-2);color:var(--ink2)}

/* 買う（検査の指摘1・2） */
.buybox{border:2px solid var(--lime);border-radius:var(--r-s);padding:var(--sp-3);background:rgba(13,27,46,.72)}
.buybox .pricerow{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;margin:0 0 var(--sp-2)}
.buybox .pricerow b{font-size:var(--fs-h2);color:var(--lime);font-weight:800;letter-spacing:-.02em}
.buybox .pricerow s,.buybox .pricerow span{font-size:var(--fs-cap);color:var(--ink2)}
.buybox .cta{margin-top:0}

pre{background:rgba(13,27,46,.9);border:1px solid var(--line);color:#e8eef4;padding:var(--sp-2);
  border-radius:var(--r-s);overflow-x:auto;font-size:var(--fs-cap);line-height:1.7}
code{font-family:"SFMono-Regular",Consolas,"Courier New",monospace}
p code,li code,td code,dd code{background:rgba(195,245,60,.10);color:var(--lime);padding:0 4px;border-radius:var(--r-s)}

.back{display:inline-block;margin:var(--sp-3) 0 0;font-size:var(--fs-cap)}
footer{border-top:1px dashed var(--line);padding:var(--sp-3) 0 64px;font-size:var(--fs-cap);color:var(--ink2)}
footer a{color:var(--ink2)}

/* ── 動き ── */
@media (prefers-reduced-motion: no-preference){
  @keyframes drawFrame{from{clip-path:inset(0 100% 0 0)}}
  .sheet{animation:drawFrame .55s cubic-bezier(.2,.8,.25,1) backwards}
  /* ★本文が見えない時間を作らない（検査：0.3〜0.7秒 見えなかった）。
     初期の不透明度を .35 まで上げ、遅れも詰めた（2026-09-09） */
  @keyframes fadeUp{from{opacity:.35;transform:translateY(14px)}}
  .fu{animation:fadeUp .45s var(--ease) backwards}
  .fu1{animation-delay:.12s}.fu2{animation-delay:.18s}.fu3{animation-delay:.24s}.fu4{animation-delay:.30s}
  @keyframes stretch{from{transform:scaleX(0)}}
  .dim .bar{animation:stretch .5s .3s var(--ease) backwards}
}
/* スクロール連動（装飾。非対応ブラウザでは動かないだけ＝内容は読める）
   ★背の高い section・16章の表自体には当てない。中の短い要素に当てる
     （背の高い要素に当てると view() の範囲が反転して内容が出てこなくなる） */
@media (prefers-reduced-motion: no-preference){
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    @keyframes revealUp{from{opacity:0;transform:translateY(26px)}}
    .reveal > .wrap > *:not(.sheet2){animation:revealUp auto linear both}
    .reveal > .wrap > *:not(.sheet2){animation-timeline:view();animation-range:entry}
    @keyframes writeIn{from{opacity:0;transform:translateX(-14px)}}
    .row .nm span, .row .no{animation:writeIn auto linear both}
    .row .nm span, .row .no{animation-timeline:view();animation-range:entry}
  }
}

/* ── スマホ ── */
@media (max-width:900px){
  .cards,.cards.two{grid-template-columns:1fr}
  .block{grid-template-columns:1fr 1fr}
  .cell:nth-child(2n){border-right:0}
}
@media (max-width:560px){
  .hero{padding:32px 0 var(--sp-3)}
  .sheet-in{padding:32px var(--sp-2) var(--sp-3)}
  .block{grid-template-columns:1fr}
  .cell{border-right:0}
  .dim .bar{max-width:none}
  .toc{top:56px}
  .row{grid-template-columns:48px 1fr}
}

/* ── 追加（2026-09-09・完成形）────────────────────────── */

/* 思いの区画＝図面の「特記事項」。枠は実線（語り場だけ破線にして対比） */
.remarks{position:relative;border:2px solid var(--lime);border-radius:var(--r-s);
  background:rgba(13,27,46,.72);padding:40px 32px var(--sp-3);margin-top:var(--sp-3)}
.remarks::before{content:"";position:absolute;inset:7px;border:1px solid rgba(195,245,60,.28);pointer-events:none}
.remarks > *{position:relative}
.remarks p{color:var(--ink)}
/* .quote-life（ライムの縦線＝引用のかたち）は 2026-09-09 に廃止。
   人生の目的を「原文の引用」に見せると、書いた人の身元が割れるため。 */
.closing-line{font-size:var(--fs-h2);font-weight:800;line-height:1.5;color:var(--lime);
  margin:var(--sp-3) 0 0;letter-spacing:-.01em}

/* 語り場＝図面の「未発行」。枠は破線 */
.future{position:relative;border:2px dashed rgba(195,245,60,.55);border-radius:var(--r-s);
  background:rgba(13,27,46,.5);padding:40px 32px var(--sp-3);margin-top:var(--sp-3)}
.future .blank{height:1px;background:none;border-top:1px dashed var(--line);margin:var(--sp-3) 0 0}
.future .blank + .blank{margin-top:var(--sp-2)}
.stamp-open{position:absolute;top:-12px;left:var(--sp-3);display:flex;align-items:baseline;gap:var(--sp-1);
  background:var(--lime);color:var(--navy);font-weight:800;letter-spacing:.12em;
  padding:4px var(--sp-2);border-radius:var(--r-s);font-size:var(--fs-cap)}
.stamp-open i{font-style:normal;font-weight:400;letter-spacing:0;opacity:.8}

/* 画面の図解（写真ではありません）。後日、本物の画面に差し替えられる枠 */
figure.fig{margin:var(--sp-3) 0;border:1px solid var(--line);border-radius:var(--r-s);
  background:rgba(13,27,46,.4);padding:var(--sp-2)}
figure.fig img{width:100%;border-radius:var(--r-s)}
figure.fig figcaption{font-size:var(--fs-cap);color:var(--ink2);margin-top:var(--sp-1);padding:0 2px}

/* STEP の見出しと注意 */
.step-h{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0 var(--sp-1);
  padding-top:var(--sp-2);border-top:1px dashed var(--line);scroll-margin-top:130px}
.step-h .no{font-size:var(--fs-cap);letter-spacing:.14em;color:var(--lime)}
.step-h .t{font-size:var(--fs-sub);font-weight:700}
.step-h .min{font-size:var(--fs-cap);color:var(--ink2);margin-left:auto}
.stuck{border-left:3px solid var(--lime);background:rgba(195,245,60,.06);
  padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0 var(--sp-3);border-radius:0 var(--r-s) var(--r-s) 0}
.stuck b{color:var(--lime)}
.stuck ul{margin:0;padding-left:1.2em}
.stuck li{margin-bottom:var(--sp-1)}
.stuck li:last-child{margin-bottom:0}

/* 404 */
.oops{text-align:center;padding:96px 0}

@media (max-width:560px){
  .remarks,.future{padding:36px var(--sp-2) var(--sp-3)}
  .step-h .min{margin-left:0;width:100%}
}

/* インラインstyleを無くすための小物（整いの減点対策・2026-09-09） */
.mt3{margin-top:var(--sp-3)}
.price-inline{color:var(--lime);font-size:var(--fs-sub);font-weight:700}
.price-note{color:var(--ink2)}
.anchor{scroll-margin-top:130px}
.center-lead{margin-left:auto;margin-right:auto}
/* 目次の横スクロールを、端のぼかしで「まだ続く」と分かる形に */
.toc{position:sticky;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent)}
.toc ul{scrollbar-width:thin;scrollbar-color:rgba(195,245,60,.45) transparent}
.toc ul::-webkit-scrollbar{height:4px}
.toc ul::-webkit-scrollbar-thumb{background:rgba(195,245,60,.45);border-radius:var(--r-pill)}
.toc ul::-webkit-scrollbar-track{background:transparent}

/* ── 締めの1文＝標語（2026-09-09）────────────────────────
   「文章の一部にしないで」への答え。図面の寸法線で左右から挟み、
   段落から切り離して独立した1行に見せる。文字は原文のまま。 */
.creed{display:flex;align-items:center;gap:var(--sp-3);margin:56px 0 var(--sp-2);text-align:center}
.creed-rule{position:relative;flex:1;height:1px;background:var(--lime);min-width:24px}
.creed-rule::before,.creed-rule::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--lime)}
.creed-rule::before{left:0}
.creed-rule::after{right:0}
.creed-rule.l::after{display:none}
.creed-rule.r::before{display:none}
.remarks .creed-text,.creed-text{
  margin:0;flex:0 1 auto;
  font-size:var(--fs-h2);font-weight:800;line-height:1.55;
  /* ★.remarks p{color:var(--ink)} に負けるので、ここは詳細度を上げる（2026-09-09 実測で発覚） */
  color:var(--lime);letter-spacing:.02em;
  text-shadow:0 0 24px rgba(195,245,60,.28);
}
@media (prefers-reduced-motion: no-preference){
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    @keyframes ruleOut{from{transform:scaleX(0)}}
    .creed-rule.l{transform-origin:right}
    .creed-rule.r{transform-origin:left}
    .creed-rule{animation:ruleOut auto linear both}
    .creed-rule{animation-timeline:view();animation-range:entry}
  }
}
@media (max-width:700px){
  .creed{flex-direction:column;gap:var(--sp-2);margin:40px 0 var(--sp-2)}
  .creed-rule{width:120px;flex:0 0 auto;transform-origin:center !important}
  .creed-rule.l::after,.creed-rule.r::before{display:block}
}
@media (max-width:560px){
  /* ★30pxのままだと1行が折り返して4行になる（条件＝2行以内）。
     4段のうち1つ下げて --fs-sub にする。段は増やしていない */
  .remarks .creed-text,.creed-text{font-size:var(--fs-sub)}
}

/* 語り場の空欄のキャプション（検査の任意指摘・2026-09-09） */
.blank-cap{font-size:var(--fs-cap);color:var(--ink2);margin:var(--sp-3) 0 0;opacity:.7}

/* 手順の飛び先（目次を12→6に減らした代わり・使い方の中に置く） */
.steps-jump{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:0 0 var(--sp-3)}
.steps-jump a{font-size:var(--fs-cap);color:var(--ink2);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4px var(--sp-2);white-space:nowrap;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.steps-jump a:hover{border-color:var(--lime);color:var(--lime)}
.steps-jump a:active{opacity:.7}

/* ── 様式の見本（2026-09-09・「中身が見えないと買えない」への答え）──────── */
.ysheet{border:1px solid var(--line);border-radius:var(--r-s);background:rgba(13,27,46,.55);
  padding:var(--sp-3);margin:0 0 var(--sp-3);scroll-margin-top:130px}
.ysheet-h{font-size:var(--fs-sub);font-weight:700;margin:0 0 var(--sp-1)}
.ysheet-h .mono{color:var(--lime);margin-right:var(--sp-1)}
.ysheet-note{color:var(--ink2);margin:0 0 var(--sp-2)}
.ysheet-body{position:relative}
.ysheet-mark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2;
  font-family:Consolas,monospace;font-weight:800;letter-spacing:.4em;
  color:rgba(195,245,60,.22);transform:rotate(-14deg) scale(1.35);white-space:nowrap;
  font-size:var(--fs-h2)}
.ytable{margin:0;font-size:var(--fs-cap);table-layout:auto}
.ytable td{border:1px solid var(--line);padding:4px var(--sp-1);white-space:nowrap;
  color:var(--ink2);max-width:280px;overflow:hidden;text-overflow:ellipsis}
.ytable tr.hd td{background:rgba(195,245,60,.08);color:var(--lime);font-weight:700}
.ysheet-body .scroll{position:relative;
  -webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(#000 0,#000 calc(100% - 36px),transparent)}
.ysheet-more{font-size:var(--fs-cap);color:var(--ink2);margin:var(--sp-1) 0 0;text-align:center;opacity:.75}
@media (max-width:560px){
  .ysheet{padding:var(--sp-2)}
  .ysheet-mark{font-size:var(--fs-sub)}
}