/* ===========================================================
   AiCmo Media ｜ 配色システム
   変えるのはこの :root だけ。全ページに反映されます。
   =========================================================== */
:root{
  --black:#0D0D0D;
  --ink:#141414;
  --muted:#5F5F5F;
  --faint:#8E8E8E;
  --hair:#E2E2E2;
  --rule:#EFEFEF;
  --paper:#FFFFFF;
  --wash:#FAFAFA;

  /* ゴールドは2値。白地用と黒地用を必ず分ける */
  --gold:#A67F2E;
  --gold-bright:#C9A227;
  --gold-pale:#F8F2E4;
  --gold-line:#DFCF9E;
  /* 文字を金の帯で塗るためのグラデーション。トップページと同じ値。
     ロゴ名と見出しにだけ使う。本文には使わないこと（読みにくくなるため） */
  --ribbon:linear-gradient(105deg,#8A6A22 0%,#C9A24B 18%,#F2DC9B 38%,#B98E38 58%,#F2DC9B 78%,#8A6A22 100%);

  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Shippori Mincho",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",-apple-system,BlinkMacSystemFont,sans-serif;

  --measure:720px;   /* 本文の最大幅 */
  --wide:1120px;     /* ヘッダー等の最大幅 */
  --gut:clamp(20px,5vw,64px);  /* 左右余白。トップページ（LP）と共通にして、切替時のズレを無くす */
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

/* ===========================================================
   日本語の折り返し制御
   「〜されます」の「す」だけが次の行に落ちる、を防ぐ。
   ・balance … 各行の長さを揃える（見出し・短い段落向け）
   ・pretty  … 最終行に1〜2文字だけ残るのを防ぐ（本文向け）
   ・auto-phrase … 文節の切れ目で折り返す（日本語専用。対応ブラウザのみ）
   未対応のブラウザでは、単に従来どおりの折り返しになるだけで害はない。
   =========================================================== */
h1,h2,h3,h4,
.post h1,.body h2,.body h3,.body h4,
.blog-hero__t,.sec__t,.toc__t,.card__t,.theme__t,
.cta-block .line,.cta-block p,
.summary__t,.qa__q,.author__name{
  text-wrap:balance;
  word-break:auto-phrase;
}
.body p,.body li,.post .lede,.blog-hero__lead,
.talk__b p,.qa__a,.summary li,.toc a,.card__x,figcaption{
  text-wrap:pretty;
  word-break:auto-phrase;
}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  font-size:19.5px;line-height:2.1;letter-spacing:.015em;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;}
a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-line);font-weight:600;}
a:hover{border-bottom-color:var(--gold);}

.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gut);}
.measure{max-width:var(--measure);margin:0 auto;}

/* ---------- header ---------- */
.site-head{border-top:4px solid var(--black);background:var(--paper);position:relative;}
.site-head::after{content:"";position:absolute;left:0;top:0;width:120px;height:4px;background:var(--gold);}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:66px;border-bottom:1px solid var(--rule);}
.brand{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.08em;color:var(--ink);border:0;display:flex;align-items:center;}
.brand span{color:var(--gold);}
.brand img{display:block;height:20px;width:auto;}
@media(max-width:820px){.brand img{height:19px;}}
@media(max-width:480px){.brand img{height:18px;}}
.nav{display:flex;align-items:center;gap:28px;font-size:14px;}
.nav a{color:var(--muted);border:0;font-weight:600;letter-spacing:.04em;white-space:nowrap;}
.nav a:hover{color:var(--gold);}
.nav a.cta{background:var(--ribbon);background-size:200% 100%;color:#0A0A0B;font-weight:400;font-size:.68rem;padding:11px 22px;letter-spacing:.22em;border:1px solid var(--gold);white-space:nowrap;
  transition:background-position .5s ease;}
.nav a.cta:hover{background-position:100% 0;color:#0A0A0B;}
.nav .sp-only{display:none;}

/* ---------- article ---------- */
.post{padding:64px 0 96px;}
.manual-back{max-width:var(--measure);margin:0 auto 20px;font-size:14px;}
.manual-back a{font-weight:600;}
.post-head{max-width:var(--measure);margin:0 auto 48px;}
.eyebrow{font-size:12px;letter-spacing:.28em;color:var(--gold);font-weight:700;margin:0 0 18px;}
.post h1{
  font-family:var(--serif);font-size:37px;font-weight:600;line-height:1.6;
  letter-spacing:.01em;margin:0 0 22px;
}
.post .lede{color:var(--muted);font-size:18px;margin:0 0 24px;}
.meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;color:var(--faint);
  padding-top:18px;border-top:1px solid var(--hair);}
.meta b{color:var(--gold);font-weight:700;}

.body{max-width:var(--measure);margin:0 auto;}
.body h2{
  font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.6;letter-spacing:.02em;
  margin:88px 0 26px;padding-bottom:16px;border-bottom:1px solid var(--gold);
}
.body h3{
  font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.7;letter-spacing:.02em;
  margin:60px 0 18px;padding-left:14px;border-left:3px solid var(--gold);
}
.body h4{font-size:20px;font-weight:700;margin:34px 0 10px;line-height:1.7;}
.body p{margin:0 0 30px;}
.body ul,.body ol{margin:0 0 22px;padding-left:24px;}
.body li{margin-bottom:8px;}
.body strong{font-weight:700;}

.body blockquote{
  margin:26px 0;padding:4px 0 4px 24px;border-left:3px solid var(--gold);
  font-family:var(--serif);font-size:22px;line-height:2.0;
}
.body blockquote p{margin:0 0 10px;}
.body blockquote p:last-child{margin-bottom:0;}

.body table{width:100%;border-collapse:collapse;margin:8px 0 34px;font-size:16px;border-top:2px solid var(--gold);}
.body th,.body td{border:1px solid var(--hair);padding:12px 14px;text-align:left;vertical-align:top;line-height:1.8;}
.body th{background:var(--black);color:var(--gold-bright);font-weight:600;letter-spacing:.08em;font-size:15px;border-color:var(--black);}
.body tbody tr:nth-child(even) td{background:var(--wash);}

.note{border-top:2px solid var(--black);border-bottom:1px solid var(--hair);padding:24px 0;margin:36px 0;font-size:18px;}
.note .lbl{display:block;font-weight:700;color:var(--gold);letter-spacing:.06em;margin-bottom:10px;font-size:15.5px;}
.note p:last-child{margin-bottom:0;}

.callout{border:1px solid var(--gold-line);border-left:3px solid var(--gold);background:var(--gold-pale);
  padding:24px 26px;margin:36px 0;font-size:18px;}
.callout .lbl{display:block;font-weight:700;color:var(--gold);letter-spacing:.06em;margin-bottom:10px;font-size:15.5px;}
.callout p:last-child{margin-bottom:0;}

figure{margin:40px 0;}
figure svg{display:block;width:100%;border:1px solid var(--hair);background:#fff;}
/* 決済プランLP（白ベース＋ゴールド） */
.plan-price{border:1px solid var(--gold-line);border-top:3px solid var(--gold);background:var(--gold-pale);
  text-align:center;padding:30px 20px;margin:30px 0;}
.plan-price .pp-brand{margin:0 0 8px;}
.plan-price .pp-brand img{height:26px;width:auto;display:inline-block;}
.plan-price .pp-lead{font-size:13.5px;letter-spacing:.1em;color:var(--gold);font-weight:700;margin:0 0 16px;}
.plan-price .pp-row{display:flex;justify-content:center;gap:clamp(30px,8vw,64px);flex-wrap:wrap;}
.plan-price .pp-k{font-size:14px;color:var(--muted);margin-bottom:4px;}
.plan-price .pp-v{font-family:var(--serif);font-size:clamp(34px,7vw,44px);font-weight:600;color:var(--ink);line-height:1.1;}
.plan-price .pp-v b{color:var(--gold);font-size:1.25em;}
.apply-wrap{text-align:center;margin:32px 0;}
.apply-btn{display:inline-block;background:var(--ribbon);background-size:200% 100%;color:#0A0A0B;font-weight:600;
  padding:18px 46px;letter-spacing:.1em;border:1px solid var(--gold);font-size:17px;
  transition:background-position .6s ease,transform .3s ease;}
.apply-btn:hover{background-position:100% 0;transform:translateY(-2px);border-bottom-color:var(--gold);}
.apply-note{text-align:center;font-size:13px;color:var(--faint);margin:10px 0 0;}
/* マニュアルの操作画面キャプチャ */
.shot{margin:28px 0;}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--hair);border-radius:6px;background:#fff;}
/* ログイン・登録などの縦長カード画面は、引き伸ばさず中央に置く */
.shot.narrow{max-width:460px;margin-left:auto;margin-right:auto;}
figcaption{font-size:15px;color:var(--muted);margin-top:12px;line-height:1.8;}
/* 「図1」などの図版番号は黒。ゴールドは本文の結論だけに残す */
figcaption b{color:var(--ink);font-weight:700;letter-spacing:.04em;}

.cap-slot{border:1px dashed var(--faint);background:
  repeating-linear-gradient(135deg,#FBFBFB,#FBFBFB 8px,#F3F3F3 8px,#F3F3F3 16px);
  padding:40px 20px;text-align:center;margin:36px 0;}
.cap-slot .t{font-weight:700;color:var(--muted);font-size:14px;margin-bottom:6px;}
.cap-slot .d{font-size:13px;color:var(--faint);line-height:1.8;}

.small{font-size:15px;color:var(--muted);}

/* ===========================================================
   本文の強調ルール（3段階）
   ここを崩すと、どれも目立たなくなります。
   ┌──────────┬───────────────┬──────────────────────┐
   │ 使うもの      │ 見た目             │ 使う場面                        │
   ├──────────┼───────────────┼──────────────────────┤
   │ <strong>     │ 黒の太字            │ 読み飛ばしてほしくない語句。何回でも可 │
   │ <strong      │ ゴールドの下線       │ その章の結論の一文。               │
   │  class="key">│（スクロールで引かれる）│ 1つの章に1回まで                  │
   │ ゴールド太字   │ 本文では使わない      │ ゴールドは「構造の色」。見出しの罫線・   │
   │              │                   │ ラベル・リンク・CTAに予約              │
   └──────────┴───────────────┴──────────────────────┘
   下線は .key だけが持つ。装飾としての下線は使わない
   （リンクと見分けがつかなくなるため）。
   =========================================================== */
.body strong{font-weight:700;color:var(--ink);}
.body strong.key{
  font-weight:700;padding-bottom:3px;
  background-image:linear-gradient(var(--gold-line),var(--gold-line));
  background-repeat:no-repeat;background-position:0 100%;
  background-size:0% 7px;
  transition:background-size .9s cubic-bezier(.22,.61,.36,1);
}
.body strong.key.is-in{background-size:100% 7px;}
/* 動きを減らす設定にしている人には、最初から線を引いた状態で見せる */
@media (prefers-reduced-motion:reduce){
  .body strong.key{transition:none;background-size:100% 7px;}
}

/* ---------- よくある質問（1問＝1カード）---------- */
.body .qa{
  border:1px solid var(--hair);background:var(--paper);
  padding:20px 24px;margin:0 0 12px;
}
.body .qa:last-of-type{margin-bottom:8px;}
.body .qa__q,.body .qa__a{display:flex;gap:14px;margin:0;line-height:1.95;}
.body .qa__a{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--hair);
  color:var(--muted);
}
.body .qa__q > span:last-child{font-weight:700;}
.body .qa__mk{
  flex:0 0 26px;width:26px;height:26px;line-height:26px;text-align:center;
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:0;
}
.body .qa__q .qa__mk{background:var(--ribbon);color:#0A0A0B;}
.body .qa__a .qa__mk{background:var(--gold-pale);color:var(--gold);border:1px solid var(--gold-line);}
@media (max-width:480px){
  .body .qa{padding:16px 18px;}
  .body .qa__q,.body .qa__a{gap:10px;}
  .body .qa__mk{flex:0 0 22px;width:22px;height:22px;line-height:22px;font-size:12px;}
}

/* よくある質問（マニュアル入口の折りたたみアコーディオン）
   /manual/ の「よくある質問」セクションで使う。<details> ベースなので
   JavaScriptが無効でも中身は読める（開いた状態で表示される）。 */
.faq-group{margin-top:36px;}
.faq-group:first-child{margin-top:24px;}
.faq-cat{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.04em;
  margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid var(--gold-line);}
.qa-ac{border-bottom:1px solid var(--hair);}
.qa-ac > summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;
  padding:20px 40px 20px 0;position:relative;font-weight:600;line-height:1.7;}
.qa-ac > summary::-webkit-details-marker{display:none;}
.qa-ac__mk{flex:0 0 26px;width:26px;height:26px;line-height:26px;text-align:center;
  font-family:var(--sans);font-size:13px;font-weight:700;background:var(--ribbon);
  color:#0A0A0B;}
.qa-ac__qt{flex:1;}
.qa-ac > summary::after{content:"";position:absolute;right:6px;top:26px;width:12px;height:12px;
  background:linear-gradient(var(--gold),var(--gold)) center/12px 2px no-repeat,
             linear-gradient(var(--gold),var(--gold)) center/2px 12px no-repeat;
  transition:transform .2s ease;}
.qa-ac[open] > summary::after{background:linear-gradient(var(--gold),var(--gold)) center/12px 2px no-repeat;}
.qa-ac__a{padding:0 0 22px 40px;color:var(--muted);line-height:1.95;}
.qa-ac:hover > summary{color:var(--gold);}
@media (max-width:480px){
  .qa-ac > summary{gap:10px;padding-right:34px;}
  .qa-ac__mk{flex:0 0 22px;width:22px;height:22px;line-height:22px;font-size:12px;}
  .qa-ac__a{padding-left:32px;}
}

/* ---------- まとめの要点ボックス ---------- */
/* 本文中の囲み（.callout / .note）は「読み飛ばすと損する補足」＝局所的。
   こちらは「記事全体の結論」。役割が違うので見た目も分ける。1記事に1つだけ。 */
.body .summary{
  border:2px solid var(--black);background:var(--paper);
  padding:26px 30px 24px;margin:26px 0 36px;
}
.body .summary__t{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.22em;
  color:var(--gold);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--hair);
}
.body .summary ul{list-style:none;margin:0;padding:0;}
.body .summary li{
  position:relative;padding-left:24px;margin:0 0 16px;line-height:2.0;
}
.body .summary li:last-child{margin-bottom:0;}
.body .summary li::before{
  content:"";position:absolute;left:0;top:.85em;width:12px;height:2px;background:var(--gold);
}
@media (max-width:480px){
  .body .summary{padding:20px 20px 18px;}
}

/* ---------- 会話ブロック ---------- */
.talk{margin:36px 0 44px;}
.talk__row{display:flex;gap:14px;align-items:flex-start;}
.talk__row + .talk__row{margin-top:20px;}
.talk__row--q{flex-direction:row-reverse;}
.talk__ic{flex:0 0 58px;width:58px;text-align:center;}
.talk__ic img,.talk__ic svg{width:58px;height:58px;border-radius:50%;display:block;object-fit:cover;}
.talk__nm{display:block;font-size:11px;color:var(--faint);letter-spacing:.06em;margin-top:7px;line-height:1.5;}
.talk__b{
  position:relative;flex:0 1 auto;
  border:1px solid var(--hair);background:var(--wash);
  padding:17px 22px;font-size:17.5px;line-height:1.95;
}
.talk__b p{margin:0;}
.talk__b p + p{margin-top:10px;}
.talk__row--q .talk__b{background:var(--gold-pale);border-color:var(--gold-line);}
/* 吹き出しの三角（枠線ぶんを2枚重ねて表現）*/
.talk__b::before,.talk__b::after{content:"";position:absolute;top:19px;width:0;height:0;border:8px solid transparent;}
.talk__row--a .talk__b::before{left:-16px;border-right-color:var(--hair);}
.talk__row--a .talk__b::after{left:-15px;border-right-color:var(--wash);}
.talk__row--q .talk__b::before{right:-16px;border-left-color:var(--gold-line);}
.talk__row--q .talk__b::after{right:-15px;border-left-color:var(--gold-pale);}

@media (max-width:480px){
  .talk__ic{flex:0 0 44px;width:44px;}
  .talk__ic img,.talk__ic svg{width:44px;height:44px;}
  .talk__b{padding:13px 16px;font-size:15px;}
}

/* ---------- CTA ---------- */
.cta-block{background:var(--black);color:#fff;padding:56px 40px;margin:64px 0 0;text-align:center;position:relative;}
.cta-block::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:80px;height:3px;background:var(--gold-bright);}
.cta-block p{color:#D8D8D8;margin:0 0 12px;font-size:18px;}

/* ── CTAの上部（トップページのヘッダーと同じ訴求）────────────────
   記事のCTAはLINE登録ページへ直接飛ぶ。読者はトップページを一度も通りません。
   だから「AiCmoとは何か」を伝える役目が、ここ1か所に集約されています。
   ここを削ると、読者は何のサービスか分からないまま登録画面に着きます。
   文言はトップページのヒーローと必ず揃えること（先で言うことが変わるため）。 */
.cta-block .cta-mark{display:block;margin:0 auto;width:clamp(140px,20vw,186px);height:auto;}
.cta-block .cta-word{
  font-family:var(--sans);font-weight:200;font-size:clamp(2.1rem,6vw,3rem);
  letter-spacing:.09em;line-height:1;margin:18px 0 0;
  background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cta-block .cta-kana{
  font-size:13px;letter-spacing:.5em;text-indent:.5em;color:var(--gold-line);margin:12px 0 0;}
.cta-block .cta-kicker{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:30px 0 0;font-size:13px;letter-spacing:.34em;color:var(--gold-bright);}
.cta-block .cta-kicker::before,.cta-block .cta-kicker::after{
  content:"";width:clamp(14px,4vw,44px);height:1px;background:currentColor;opacity:.55;}
.cta-block .cta-h{
  font-family:var(--serif);font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.34;
  letter-spacing:.04em;margin:16px 0 0;
  background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cta-block .cta-sub{
  font-family:var(--sans);font-weight:300;font-size:clamp(.9rem,2vw,1.12rem);
  letter-spacing:.16em;color:#D8D3C8;margin:14px 0 0;}
.cta-block .cta-sub b{font-weight:400;letter-spacing:.1em;}
.cta-block .cta-rule{height:1px;background:rgba(255,255,255,.13);border:0;margin:36px auto 30px;max-width:210px;}
.cta-block .line{font-family:var(--serif);font-size:26px;line-height:1.8;color:#fff;margin:0 0 28px;}
.cta-block .line b{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600;}
/* CTA内のブランド名だけゴールド。本文の強調ではなく、名前を覚えてもらうため */
.cta-block .brand{color:var(--gold-bright);font-weight:700;letter-spacing:.02em;}
/* CTAの中の「無料でできること」3点 */
.cta-set{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:34px 0 32px;text-align:center;
}
.cta-card{
  position:relative;border:1px solid rgba(201,162,75,.34);
  background:rgba(255,255,255,.035);padding:26px 16px 20px;
}
.cta-card__tag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--ribbon);border:0;color:#0A0A0B;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;
  padding:4px 13px;white-space:nowrap;
}
.cta-card__t{
  font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.06em;
  color:#F4F1EA;margin:0 0 10px;
}
.cta-card__d{font-size:13.5px;line-height:1.85;color:#B4B0A8;margin:0;}
.cta-card__d b{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;}
@media (max-width:600px){
  .cta-set{grid-template-columns:1fr;gap:22px;margin:30px 0 28px;}
  .cta-card{padding:24px 18px 18px;}
}

.cta-btn{display:inline-block;background:var(--ribbon);background-size:200% 100%;color:#0A0A0B;font-weight:400;
  padding:18px 46px;letter-spacing:.18em;border:1px solid var(--gold);font-size:16px;
  transition:background-position .6s ease,transform .3s ease;}
.cta-btn:hover{background-position:100% 0;transform:translateY(-2px);}

/* ---------- 記事のサムネイル ---------- */
/* 本文と同じ幅に揃える（--measure = 720px） */
.post-thumb{max-width:var(--measure);margin:0 auto 44px;}
.post-thumb img{width:100%;height:auto;display:block;}

/* ---------- 執筆者・監修者 ---------- */
.author{
  max-width:var(--measure);margin:0 auto 40px;
  border:1px solid var(--hair);border-top:3px solid var(--gold);
  padding:22px 26px 24px;background:var(--paper);
}
.author__label{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.22em;
  color:var(--gold);margin:0 0 16px;
}
.author__row{display:flex;gap:22px;align-items:flex-start;}
.author__img{
  flex:0 0 84px;width:84px;height:84px;border-radius:50%;object-fit:cover;
  display:block;background:var(--black);
}
.author__img--none{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:24px;font-weight:600;color:var(--gold-bright);
  letter-spacing:.06em;
}
.author__txt{flex:1;min-width:0;}
.author__role{font-size:12.5px;letter-spacing:.06em;color:var(--faint);font-weight:700;margin:0 0 4px;}
.author__name{
  font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:.04em;
  margin:0 0 12px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.author__kana{font-family:var(--sans);font-size:12px;font-weight:400;color:var(--faint);letter-spacing:.14em;}
.author__bio{font-size:15px;line-height:1.95;color:var(--muted);margin:0;}

/* ---------- 目次 ---------- */
.toc{
  max-width:var(--measure);margin:0 auto 52px;
  border:1px solid var(--hair);border-top:3px solid var(--black);
  background:var(--wash);padding:24px 28px 20px;
}
.toc__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--hair);
}
.toc__t{
  font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.06em;margin:0;
}
/* 「開く／閉じる」ボタン */
.toc__btn{
  flex:0 0 auto;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.12em;
  color:var(--gold);background:var(--paper);border:1px solid var(--gold-line);
  padding:7px 18px;cursor:pointer;transition:background .2s,border-color .2s;
}
.toc__btn:hover{background:var(--gold-pale);border-color:var(--gold);}
.toc__btn::after{content:" ▾";font-size:11px;}
.toc.is-open .toc__btn::after{content:" ▴";}

.toc__l,.toc__sub{list-style:none;margin:0;padding:0;}
/* 小見出し（1.1、2.1…）は最初は隠しておき、「開く」で表示する */
.toc__sub{display:none;}
.toc.is-open .toc__sub{display:block;}
.toc a{
  display:flex;gap:10px;align-items:baseline;border:0;font-weight:400;
  color:var(--ink);font-size:17px;line-height:1.8;padding:8px 0;transition:color .2s;
}
.toc a:hover{color:var(--gold);}
.toc__n{
  flex:0 0 auto;min-width:26px;font-family:var(--sans);font-size:13px;
  font-weight:700;color:var(--gold);letter-spacing:.03em;
}
.toc__sub{margin:0 0 8px;padding-left:22px;border-left:1px solid var(--hair);}
.toc__sub a{font-size:16px;color:var(--muted);padding:6px 0;}
.toc__sub .toc__n{min-width:34px;font-size:12px;color:var(--faint);}

/* 目次から飛んだとき、見出しが画面の端に貼りつかないようにする */
.body h2,.body h3{scroll-margin-top:24px;}

/* ---------- blog index ---------- */
/* 見出し帯 */
.blog-hero{background:var(--black);color:#EDEAE4;padding:64px 0 56px;}
.blog-hero__eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.34em;
  background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin:0 0 14px;
}
.blog-hero__t{font-family:var(--serif);font-size:34px;font-weight:600;letter-spacing:.06em;margin:0 0 14px;}
.blog-hero__lead{margin:0;font-size:14.5px;line-height:1.95;color:#B8B4AC;max-width:640px;}

/* ① 検索・カテゴリー */
.finder{
  background:var(--gold-pale);border:1px solid var(--gold-line);
  padding:26px 28px;margin:40px 0 0;
}
.finder__row{display:flex;align-items:flex-start;gap:22px;}
.finder__row + .finder__row{margin-top:20px;padding-top:20px;border-top:1px solid var(--gold-line);}
.finder__label{
  flex:0 0 128px;font-size:13px;font-weight:700;letter-spacing:.08em;
  color:var(--gold);padding-top:9px;
}
.finder__search{position:relative;flex:1;}
.finder__search input{
  width:100%;box-sizing:border-box;border:1px solid var(--gold-line);background:var(--paper);
  padding:12px 44px 12px 16px;font-size:14.5px;font-family:var(--sans);color:var(--ink);
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.finder__search input:focus{outline:2px solid var(--gold);outline-offset:-1px;}
.finder__search svg{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:2;
  stroke-linecap:round;pointer-events:none;
}
.finder__cats{flex:1;display:flex;flex-wrap:wrap;gap:8px;}
.pill{
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.03em;
  background:var(--paper);color:var(--muted);border:1px solid var(--gold-line);
  padding:8px 15px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;
  display:inline-flex;align-items:center;gap:7px;
}
.pill:hover{border-color:var(--gold);color:var(--gold);}
.pill.is-on{background:var(--ribbon);color:#0A0A0B;border-color:transparent;}
.pill__n{font-size:11px;opacity:.65;font-weight:700;}

/* セクション見出し */
.sec{margin-top:64px;}
.msec{margin-top:56px;}
.sec__head{display:flex;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--black);}
.sec__t{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:.06em;margin:0;}
.sec__n{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--faint);}

/* 動画マニュアル（マニュアルと同じ絞り込みボタン式。カード＝プレーヤー＋タイトル） */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px 22px;margin-top:20px;}
.video{display:flex;flex-direction:column;}
/* カテゴリー絞り込みで hidden が付いた動画は隠す。
   これが無いと .video{display:flex} が [hidden] を上書きし、
   絞り込んでも全部表示されたままになる（カードの .card[hidden] と対）。 */
.video[hidden]{display:none;}
.video__frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--hair);box-shadow:0 8px 24px rgba(0,0,0,.10);}
.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video__t{margin:12px 2px 0;font-size:14.5px;line-height:1.6;font-weight:600;color:var(--ink);}

/* クリック再生のサムネイル（ファサード）。
   最初はサムネイル画像＋再生ボタンだけを置き、押されたら本物のプレーヤーを
   読み込む。動画が増えても一度に何十個も読み込まないので、表示が軽くなる。 */
.lyt{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;cursor:pointer;background:#000;display:block;}
.lyt__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .2s ease;}
.lyt:hover .lyt__thumb{opacity:.9;}
.lyt__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:68px;height:48px;border-radius:14px;background:rgba(20,20,20,.72);transition:background .2s ease;}
.lyt:hover .lyt__play,.lyt:focus-visible .lyt__play{background:#f00;}
.lyt__play::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;}
.lyt:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ② 新着記事カード */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px;}
/* カテゴリー絞り込み中だけ、ピン留め記事（pillar/入口）をそのカテゴリーの先頭に出す */
.cards.is-cat .card[data-pin="1"]:not([hidden]){order:-1;}
.card{background:var(--paper);border:1px solid var(--hair);}
.card[hidden]{display:none;}
.card a{display:flex;flex-direction:column;height:100%;border:0;color:var(--ink);font-weight:400;transition:background .2s;}
.card a:hover{background:var(--wash);}
.card a:hover .card__t{color:var(--gold);}
/* サムネイル（無い記事はカテゴリー名の代替パネル） */
.card__img{aspect-ratio:1200/630;overflow:hidden;background:var(--black);}
.card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.card a:hover .card__img img{transform:scale(1.04);}
.card__img--none{display:flex;align-items:center;justify-content:center;}
.card__img--none span{
  font-family:var(--serif);font-size:14px;letter-spacing:.18em;
  background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;
  border:1px solid rgba(201,162,75,.42);padding:9px 18px;
}
.card__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px;}
.card__cat{
  align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--gold);border:1px solid var(--gold-line);padding:4px 9px;margin-bottom:14px;
}
.card__t{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.7;margin:0 0 18px;flex:1;transition:color .2s;}
.card__d{font-size:11.5px;letter-spacing:.14em;color:var(--faint);font-weight:700;margin-top:auto;}
.noresult{
  text-align:center;padding:56px 20px;color:var(--muted);font-size:14px;line-height:2;
  border:1px solid var(--hair);border-top:0;
}
.noresult[hidden]{display:none;}

/* ③ 人気・話題のテーマ */
#themes[hidden]{display:none;}
.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:36px 44px;margin-top:32px;}
.theme__head{display:flex;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--gold-line);}
.theme__n{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--gold-bright);}
.theme__t{font-family:var(--serif);font-size:18px;font-weight:600;margin:0;letter-spacing:.04em;flex:1;}
.theme__c{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--faint);}
.theme__list{list-style:none;margin:0;padding:0;}
.theme__list li{border-bottom:1px solid var(--rule);}
.theme__list a{display:block;padding:14px 0;border:0;color:var(--ink);font-size:14px;line-height:1.7;font-weight:400;transition:color .2s;}
.theme__list a:hover{color:var(--gold);}
.theme__d{display:block;font-size:11px;letter-spacing:.14em;color:var(--faint);font-weight:700;margin-bottom:5px;}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule);margin-top:96px;padding:40px 0 56px;font-size:13px;color:var(--faint);}
.site-foot .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;}
.site-foot a{color:var(--muted);border:0;}

/* ---------- スクロールで横から入ってくる演出 ---------- */
/* `rv-ready` は <head> のスクリプトが付けます。
   JavaScriptが動かない環境ではクラスが付かないので、
   最初からすべて表示されたまま（＝内容が消えることはありません）。 */
.post .body > *,
.talk__row{
  transition:opacity .7s ease, transform .75s cubic-bezier(.22,.61,.36,1);
}
.rv-ready .post .body > *:not(.talk):not(.in),
.rv-ready .talk__row:not(.in){
  opacity:0;transform:translateX(30px);
}
/* 動きを減らす設定にしている人には、演出せずそのまま見せる */
@media (prefers-reduced-motion:reduce){
  .rv-ready .post .body > *:not(.talk):not(.in),
  .rv-ready .talk__row:not(.in){opacity:1;transform:none;}
  .post .body > *,.talk__row{transition:none;}
}
/* 上の translateX(30px) は、表示される前の要素を右へずらしている。
   PCでは本文の外側に余白があるので問題にならないが、スマホは余白が無いため
   そのぶんページが横に広がり、横スクロールが出る
   （2026-08-07 実測：画面375pxに対してページ幅388px）。

   スマホでは、ずらす向きを「右」から「下」に変える。
   縦のずれは横幅を広げないので、演出を残したまま横スクロールが消える。

   ⚠ overflow-x:clip での対処は効かない（scrollWidth が 388 のまま残る）。
     hidden は body をスクロール枠にしてしまい、目次のアンカー移動に影響する。
     原因側（ずらす向き）を直すこと。 */
@media (max-width:768px){
  .rv-ready .post .body > *:not(.talk):not(.in),
  .rv-ready .talk__row:not(.in){transform:translateY(20px);}
}

/* ---------- responsive ---------- */
@media (max-width:768px){
  body{font-size:18px;}
  .post{padding:40px 0 64px;}
  .post h1{font-size:27px;}
  .post-head{margin-bottom:32px;}
  .body h2{font-size:25px;margin-top:56px;}
  .body h3{font-size:21px;}
  .body blockquote{font-size:20px;}
  .nav{gap:16px;font-size:13px;}
  .nav .hide-sp{display:none;}
  .cta-block{padding:40px 22px;}
  .cta-block .line{font-size:18px;}
  .blog-hero{padding:46px 0 40px;}
  .blog-hero__t{font-size:26px;}
  .finder{padding:20px;margin-top:32px;}
  .finder__row{flex-direction:column;gap:10px;}
  .finder__row + .finder__row{margin-top:18px;padding-top:18px;}
  .finder__label{flex:none;padding-top:0;}
  .sec{margin-top:48px;}
  .sec__t{font-size:20px;}
  .card__t{font-size:18px;}
  .themes{gap:32px;}
  /* 表は横スクロールさせる（縦積みにすると数字の比較ができなくなるため） */
  .body table{display:block;overflow-x:auto;white-space:nowrap;}
}

@media (max-width:480px){
  .site-head .bar{padding:14px 0;}
  .brand{font-size:17px;}
  .nav{gap:14px;font-size:12px;}
  .nav a.cta{padding:9px 14px;font-size:12px;}
  .nav .pc-only{display:none;}
  .nav .sp-only{display:inline;}
  .post h1{font-size:24px;}
  .meta{gap:4px 14px;font-size:12px;}
}

@media print{
  .site-head .nav,.cta-btn{display:none;}
  body{font-size:10.5pt;}
  figure,table,.callout,.note{page-break-inside:avoid;}
}

/* ===========================================================
   はじめての方向けロードマップ（/manual/ の最上部）
   HTMLは build.py の MANUAL_ROADMAP。色は既存の :root をそのまま使用。
   ・共通ステップ（rm-step）＝番号バッジ＋カードを縦の導線でつなぐ
   ・分岐（rm-fork / rm-track）＝目的で選ぶ「2つの道」を左右2列に
   =========================================================== */
.rm{margin:44px 0 0;}
.rm__head{text-align:center;max-width:680px;margin:0 auto 40px;}
.rm__eyebrow{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.34em;
  background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 14px;}
.rm__t{font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:.04em;line-height:1.5;margin:0 0 14px;}
.rm__t .u{background-image:linear-gradient(var(--gold-line),var(--gold-line));background-repeat:no-repeat;
  background-position:0 100%;background-size:100% 8px;padding-bottom:2px;}
.rm__lead{margin:0;font-size:15px;line-height:1.95;color:var(--muted);}

/* 帯ラベル（全員共通 / 目的で分岐） */
.rm-band{display:flex;align-items:center;gap:14px;margin:0 0 22px;}
.rm-band__t{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--gold);white-space:nowrap;}
.rm-band__ln{flex:1;height:1px;background:var(--gold-line);}

/* ステップ（番号バッジ＋本文）。左に縦の導線 */
.rm-steps{position:relative;margin:0 0 8px;padding-left:6px;}
.rm-step{position:relative;display:flex;gap:22px;align-items:flex-start;padding:0 0 26px;}
.rm-step:last-child{padding-bottom:0;}
.rm-step:not(:last-child)::before{content:"";position:absolute;left:27px;top:56px;bottom:-4px;width:2px;background:var(--gold-line);}
.rm-step__no{position:relative;z-index:1;flex:0 0 56px;width:56px;height:56px;border-radius:50%;
  background:var(--ribbon);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--sans);color:#0A0A0B;line-height:1;box-shadow:0 4px 14px rgba(166,127,46,.28);}
.rm-step__no small{font-size:8.5px;font-weight:700;letter-spacing:.14em;opacity:.72;margin-bottom:2px;}
.rm-step__no b{font-family:var(--serif);font-size:22px;font-weight:600;}
.rm-step__body{flex:1;border:1px solid var(--hair);background:var(--paper);padding:18px 22px;transition:background .2s,border-color .2s;}
a.rm-step__body{text-decoration:none;font-weight:400;color:var(--ink);}
.rm-step__body:hover{background:var(--wash);border-color:var(--gold-line);}
.rm-step__t{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.6;margin:0 0 6px;color:var(--ink);}
.rm-step__d{font-size:14px;line-height:1.85;color:var(--muted);margin:0 0 10px;}
.rm-step__lk{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--gold);border:0;}
.rm-step__lk::after{content:"→";font-size:13px;}
.rm-step__body:hover .rm-step__lk{color:var(--gold-bright);}

/* 分岐（2つの道） */
.rm-fork{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px;}
.rm-track{border:1px solid var(--gold-line);border-top:3px solid var(--gold);background:var(--paper);padding:26px 24px 24px;}
.rm-track__tag{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;
  color:#0A0A0B;background:var(--ribbon);padding:4px 12px;margin:0 0 14px;}
.rm-track__t{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.02em;line-height:1.5;margin:0 0 4px;}
.rm-track__for{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--faint);margin:0 0 18px;}
.rm-sub{list-style:none;margin:0;padding:0;}
.rm-sub li{position:relative;padding:0 0 16px 34px;}
.rm-sub li:last-child{padding-bottom:0;}
.rm-sub li::before{content:attr(data-n);position:absolute;left:0;top:1px;z-index:1;
  width:22px;height:22px;border-radius:50%;background:var(--gold-pale);border:1px solid var(--gold-line);
  color:var(--gold);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.rm-sub li:not(:last-child)::after{content:"";position:absolute;left:10px;top:24px;bottom:2px;width:2px;background:var(--gold-line);}
.rm-sub__t{display:block;font-size:15.5px;font-weight:700;line-height:1.6;color:var(--ink);margin-bottom:3px;}
.rm-sub__d{display:block;font-size:13px;line-height:1.8;color:var(--muted);margin-bottom:6px;}
.rm-sub__lk{font-size:12.5px;font-weight:700;color:var(--gold);border:0;}
.rm-sub__lk::after{content:" →";}

@media (max-width:768px){
  .rm__t{font-size:22px;}
  .rm-fork{grid-template-columns:1fr;gap:16px;}
  .rm-step{gap:14px;}
  .rm-step__no{flex-basis:48px;width:48px;height:48px;}
  .rm-step:not(:last-child)::before{left:23px;top:50px;}
  .rm-step__no b{font-size:19px;}
}

/* ===========================================================
   機能一覧（/features/）
   ブログと同じ base.html に載せる。色は :root をそのまま使用。
   機能の増減・文言は build.py の FEATURES を編集する。
   =========================================================== */
.features{max-width:860px;margin:0 auto;}
.feat-row{display:grid;grid-template-columns:60px 1fr;gap:26px;padding:34px 0;border-top:1px solid var(--rule);}
.feat-row:first-child{border-top:0;padding-top:8px;}
.feat-ic{width:56px;height:56px;border-radius:13px;background:var(--black);
  display:flex;align-items:center;justify-content:center;}
.feat-ic svg{width:28px;height:28px;fill:none;stroke:var(--gold-bright);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.feat-no{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.24em;
  color:var(--gold);font-weight:700;}
.feat-h{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:.03em;
  line-height:1.5;margin:7px 0 0;color:var(--ink);}
.feat-lead{font-size:16px;font-weight:700;color:var(--ink);margin:11px 0 0;line-height:1.75;}
.feat-tx{font-size:15px;line-height:1.95;color:var(--muted);margin:9px 0 0;}
.feat-foot{max-width:860px;margin:26px auto 0;text-align:center;color:var(--faint);font-size:14px;}

@media (max-width:560px){
  .feat-row{grid-template-columns:1fr;gap:14px;padding:28px 0;}
  .feat-ic{width:50px;height:50px;}
  .feat-h{font-size:20px;}
}

/* ===========================================================
   用語集（/glossary/）
   機能一覧と同じ base.html に載せる。色は :root をそのまま使用。
   語の増減・文言は build.py の GLOSSARY を編集する。
   =========================================================== */
.gloss{max-width:820px;margin:0 auto;}
.gloss-cat__h{display:flex;align-items:center;gap:16px;margin:40px 0 2px;
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--gold);}
.gloss-cat:first-child .gloss-cat__h{margin-top:8px;}
.gloss-cat__h span{white-space:nowrap;}
.gloss-cat__h::after{content:"";flex:1;height:1px;background:var(--gold-line);}
.gloss-item{padding:22px 0;border-top:1px solid var(--rule);}
.gloss-cat__h + .gloss-item{border-top:0;}
.gloss-term{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);
  letter-spacing:.03em;line-height:1.5;margin:0;}
.gloss-read{font-size:13px;color:var(--faint);margin-left:11px;font-weight:400;letter-spacing:.04em;}
.gloss-def{font-size:15px;line-height:1.95;color:var(--muted);margin:8px 0 0;}

@media (max-width:560px){
  .gloss-term{font-size:18px;}
  .gloss-read{display:block;margin:3px 0 0;}
}

/* ===========================================================
   ヘッダーのメニュー（スマホは☰で開閉）
   PCは横並びのまま。狭い画面だけ☰トグル＋ドロップダウンに。
   =========================================================== */
.navtoggle{display:none;}

@media (max-width:820px){
  .site-head .bar{position:relative;}
  .navtoggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;
  }
  .navtoggle span{display:block;width:24px;height:2px;background:var(--ink);margin:0 auto;
    transition:transform .2s ease,opacity .2s ease;}
  .navtoggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .navtoggle.is-open span:nth-child(2){opacity:0;}
  .navtoggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .site-head .nav{
    position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:4px 24px 16px;box-shadow:0 12px 26px rgba(0,0,0,.09);
    display:none;font-size:15px;
  }
  .site-head .nav.open{display:flex;}
  .site-head .nav a{padding:15px 2px;border-bottom:1px solid var(--rule);color:var(--ink);}
  .site-head .nav a:hover{color:var(--gold);}
  .site-head .nav a.cta{margin-top:16px;border-bottom:0;text-align:center;padding:14px;font-size:.9rem;letter-spacing:.14em;color:#0A0A0B;}
}