/* =========================================================================
   【こまり】のAI駆け込み寺 — 公開Webサイト スタイル（モック・ライト固定）
   モバイルファースト + デスクトップ拡張。ステージ2で web/assets/site.css へ昇格。
   ブランド色：こまり=テラコッタ #D2937E / 博士=ティール #4F93A6
   ========================================================================= */
:root{
  /* ma-ji.ai 準拠：白背景＋スレート文字＋クール系グレー（茶系は使わない） */
  --bg:#FFFFFF;          /* ページ地（白） */
  --bg-alt:#F8FAFC;      /* 帯・フッター等の薄いスレート */
  --card:#FFFFFF;
  --ink:#0F172A;         /* 本文（スレート900） */
  --sub:#64748B;         /* 補助テキスト（スレート500） */
  --line:#E5E7EB;        /* 罫線（グレー200） */
  --line2:#D8DEE6;
  --komari:#D2937E;      /* こまりさん（質問役・ブランド色） */
  --komari-bg:#FBEFE9;
  --auto:#4F93A6;        /* オート博士（解説役・ブランド色） */
  --auto-bg:#E9F2F4;
  --accent:#1F6E8C;      /* リンク・アクセント（ブランドのティール） */
  --accent-ink:#16566E;
  --amber:#C9881F;
  --chip:#F1F5F9;        /* チップ地（スレート100） */
  --shadow:0 8px 24px rgba(15,23,42,.06);
  --shadow-lg:0 16px 40px rgba(15,23,42,.10);
  --radius:14px;
  --bubble-radius:12px;  /* ma-ji rounded-xl＝12px */
  --maxw:680px;          /* 本文の読みやすい幅（ma-jiの細めの単一カラムに寄せる） */
  --gutter:20px;         /* 本文左右の余白（ma-ji px-5＝20px・章見出しの全幅張出しもこの値で戻す） */
  /* 章見出し：ma-ji準拠＝左4px帯＋グラデ文字（課題テラコッタ→解決ティール・全幅張出し） */
  --band:#D2937E;                                            /* 見出し左の色帯（こまり＝テラコッタ） */
  --head-grad:linear-gradient(65deg,#D2937E 12%,#1F6E8C 88%); /* 見出しのグラデ文字 */
  /* 会話バブル：ma-ji準拠でフラット化（白地に近い淡いブランド地＋ブランド枠・影なし） */
  --komari-bubble:#FCF5F1; --komari-edge:#EAC9BC;            /* こまり：淡テラコッタ地＋枠 */
  --auto-bubble:#F1F7F8;   --auto-edge:#CBE0E4;              /* 博士：淡ティール地＋枠 */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  /* ma-ji.ai 準拠＝システムフォント主体（Webフォント不使用） */
  font-family:"SF Pro JP","SF Pro Text","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",Inter,"Noto Sans JP",system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;
  font-size:16px;-webkit-font-smoothing:antialiased;
  text-underline-offset:2px;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* ===================== サイトヘッダー（ナビ） ===================== */
/* ナビ帯は固定しない（スクロールで流れる）。固定は緑バー .line-headbar だけ。 */
.site-header{
  position:relative;z-index:1;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{
  max-width:1080px;margin:0 auto;padding:11px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);font-size:1rem;min-width:0;white-space:nowrap}
.brand .mark{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  border:2px solid var(--komari);background:#fff;
}
.brand .mark.auto{border-color:var(--auto)}
.brand > span{min-width:0;white-space:nowrap}      /* ブランド名は常に1行 */
.brand small{display:block;font-weight:500;color:var(--sub);font-size:.68rem;letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.nav a{
  color:var(--sub);font-size:.86rem;font-weight:700;padding:9px 12px;border-radius:9px;
  display:inline-flex;align-items:center;min-height:40px;white-space:nowrap;
}
.nav a:hover{background:var(--chip);color:var(--ink);text-decoration:none}
.nav a.cta{background:var(--accent);color:#fff;flex:0 0 auto}
.nav a.cta:hover{background:var(--accent-ink)}
/* 全幅・緑 LINE友だち追加バー（これだけ sticky＝スクロールしても上部固定。ナビ帯は流れる）。空なら非描画。 */
.line-headbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:#06C755;color:#fff;font-weight:800;font-size:.92rem;
  padding:12px 14px;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.12);  /* 固定バーの高さ＝従来の約1.1倍 */
}
.line-headbar:hover{background:#05b34d;color:#fff;text-decoration:none}
.line-headbar .lhb-badge{background:#fff;color:#06C755;font-size:.62rem;font-weight:800;letter-spacing:.02em;border-radius:5px;padding:2px 6px;line-height:1}
.line-headbar .lhb-arrow{font-weight:800}
@media(max-width:520px){
  .brand small{display:none}
  .nav a.plain{display:none}            /* 狭い時は記事一覧リンクを畳む */
  .line-headbar{font-size:.82rem;padding:11px 12px;gap:7px}
  .site-header .bar{padding:10px 14px;gap:8px}
  .brand{font-size:.92rem;gap:7px}
  .brand .mark{width:30px;height:30px}
  /* CTAは折返さない＋ラベルを短縮「相談」（DOMの“お問い合わせ”は残しSR/SEOに有効） */
  .nav a.cta{font-size:0;padding:9px 14px}
  .nav a.cta::after{content:"相談";font-size:.88rem;font-weight:800}
}
@media(max-width:360px){
  .brand{font-size:.85rem}              /* 360pxでも1行で収める */
  .site-header .bar{padding:9px 12px}
}

/* ===================== 記事ヘッダー（hero） ===================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.article{padding-bottom:60px}
.crumbs{font-size:.78rem;color:var(--sub);margin:18px 0 10px}
.crumbs a{color:var(--sub);text-decoration:underline}
.crumbs .here{font-weight:700;color:var(--ink)}
.crumbs span{margin:0 6px;opacity:.6}
.cat-chip{
  display:inline-block;background:var(--auto);color:#fff;font-weight:800;
  font-size:.72rem;padding:3px 11px;border-radius:999px;letter-spacing:.03em;
}
/* ma-ji準拠：メディアの下に「日付＋カテゴリ」の小さな1行 → タイトル */
.post-head{display:flex;align-items:center;gap:10px;margin:18px 0 8px}
.post-date{color:var(--sub);font-size:.82rem;font-weight:600;letter-spacing:.02em}
h1.title{
  font-size:clamp(1.3rem,3.6vw,1.6rem);line-height:1.5;margin:0 0 12px;font-weight:700;
  letter-spacing:-.01em;overflow-wrap:anywhere;
}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--sub);font-size:.82rem}
.meta-row .dot{opacity:.5}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.tag{background:var(--chip);color:var(--sub);font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px}
.hero-img{
  margin:18px 0 6px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:16/9;background:#eee;
}
.hero-img img{width:100%;height:100%;object-fit:cover}

/* ===================== YouTube 埋め込み枠 ===================== */
.video-embed{
  margin:8px 0 4px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);aspect-ratio:16/9;text-decoration:none;
  background:#15110e center/cover no-repeat;position:relative;display:grid;place-items:center;
}
.video-embed:hover{text-decoration:none}
.video-embed:hover .play{transform:scale(1.06)}
.video-embed .play{transition:transform .15s}
.video-embed .play{
  width:66px;height:66px;border-radius:50%;background:rgba(210,60,40,.92);
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.4);cursor:pointer;
}
.video-embed .play::after{content:"";border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.video-embed .vlabel{position:absolute;left:12px;bottom:11px;color:#fff;font-size:.78rem;font-weight:700;
  background:rgba(0,0,0,.45);padding:3px 10px;border-radius:8px}

/* ===================== 本文中の図版（動画で使った実画像） ===================== */
figure.figure{margin:20px 0 8px}
figure.figure img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);box-shadow:none;display:block;background:#fff}
figure.figure figcaption{margin-top:8px;font-size:.82rem;color:var(--sub);text-align:center;line-height:1.6}
figure.figure figcaption b{color:var(--accent);font-weight:700}

/* ===================== レイアウト（PCは目次サイドバー） ===================== */
.layout{max-width:1080px;margin:0 auto;padding:0 var(--gutter);display:block}
@media(min-width:1000px){
  .layout{display:grid;grid-template-columns:1fr 248px;gap:40px;align-items:start}
  .layout .main{min-width:0;max-width:var(--maxw);justify-self:center;width:100%}
  .toc-aside{display:block}
  .toc-inline{display:none}        /* PCではインライン目次を隠す */
  /* 章見出し：PCではma-ji（lg:-mx-16/pl-6）に寄せて帯を強める＋上下に余白 */
  .chapter h2{margin-left:-40px;margin-right:-40px;padding:18px 24px 18px 22px}
  /* 会話：PCでもアバターを列の外側へ寄せ、バブルを広く＝ma-jiの左右リズムに合わせる */
  .article .line.komari{margin-left:-36px}
  .article .line.auto{margin-right:-36px}
}
@media(max-width:999px){
  .toc-aside{display:none}         /* スマホ/タブレットではサイドバー目次を隠す */
  .main{max-width:var(--maxw);margin-inline:auto}  /* タブレットでも本文幅を読みやすく保つ */
}

/* ===================== 目次 ===================== */
/* 目次：ma-ji準拠＝極薄枠・無地・影なし・グレー文字（rounded-lg 8px・p-4 16px） */
.toc-inline{
  margin:22px 0;border:1px solid var(--line);border-radius:10px;
  background:transparent;box-shadow:none;overflow:hidden;
}
.toc-inline > summary{
  list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:space-between;background:transparent;color:var(--sub);
}
.toc-inline > summary::-webkit-details-marker{display:none}
.toc-inline > summary .chev{transition:transform .2s;color:var(--sub)}
.toc-inline[open] > summary .chev{transform:rotate(90deg)}
.toc-inline[open] > summary{border-bottom:1px solid var(--line)}
.toc-list{margin:0;padding:10px 8px 12px;list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:2px}
.toc-list li{counter-increment:toc;margin:0}
.toc-list a{
  display:flex;gap:10px;padding:7px 10px;border-radius:8px;color:#71717A;font-size:.94rem;line-height:1.55;
}
.toc-list a::before{content:counter(toc) ".";color:var(--accent);font-weight:700;font-size:.84rem;flex:0 0 auto;min-width:18px}
.toc-list a:hover{background:var(--chip);color:var(--ink);text-decoration:none}
.toc-aside{position:sticky;top:60px;max-height:calc(100vh - 76px);overflow-y:auto;overscroll-behavior:contain}
/* 目次が長いとき内部スクロール。スクロールバーは控えめに（普段は非表示・ホバーで薄く） */
.toc-aside{scrollbar-width:thin;scrollbar-color:transparent transparent}
.toc-aside:hover{scrollbar-color:var(--line) transparent}
.toc-aside::-webkit-scrollbar{width:6px}
.toc-aside::-webkit-scrollbar-thumb{background:transparent;border-radius:3px}
.toc-aside:hover::-webkit-scrollbar-thumb{background:var(--line)}
.toc-aside .ttl{font-weight:700;font-size:.78rem;color:var(--sub);letter-spacing:.04em;margin:0 0 8px;padding-left:10px}
/* スクロール連動の現在地ハイライト（ステージ2でIntersectionObserverがclass付与） */
.toc-aside .toc-list a.is-active{background:var(--chip);color:var(--accent);font-weight:800}

/* ===================== 本文・章 ===================== */
.main{padding-top:8px}
.lead{font-size:1rem;color:var(--ink);margin:8px 0 4px;line-height:1.7;overflow-wrap:anywhere}
.chapter{margin:30px 0 0;scroll-margin-top:48px}
/* 章見出し：ma-ji準拠＝左4px色帯＋グラデ文字＋全幅張出し（-gutterで両端へ）。下線・番号は廃止 */
.chapter h2{
  font-size:1.25rem;font-weight:700;line-height:1.5;letter-spacing:-.01em;
  margin:36px calc(-1 * var(--gutter)) 16px;       /* 左右へ張り出して全幅帯にする */
  padding:14px var(--gutter) 14px 16px;            /* テキストは内側へ。帯は端に密着 */
  border-left:4px solid var(--band);
  background:var(--head-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  scroll-margin-top:48px;overflow-wrap:anywhere;
}
.chapter h2 .num{display:none}                     /* ma-jiは番号なし＝非表示（id/目次はそのまま） */
/* グラデ文字クリップ未対応ブラウザでは無地のティールに（文字が消えないよう保険） */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .chapter h2{background:none;color:var(--accent-ink);-webkit-text-fill-color:currentColor}
}
.chapter .ch-lead{color:var(--sub);font-size:.92rem;margin:2px 0 14px}

/* 会話バブル（ma-ji準拠：こまりさん＝左／オート博士＝右・アバター下に名前・フラット） */
.talk{display:flex;flex-direction:column;gap:18px;margin:18px 0}
.line{display:flex;gap:8px;align-items:center}        /* ma-ji＝gap-2(8px)・バブルを縦中央に */
.line.auto{flex-direction:row-reverse}                /* オート博士＝右側（こまりさんの逆） */
.line .avatar{flex:0 0 auto;width:60px;display:flex;flex-direction:column;align-items:center;gap:4px}
.line .face{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:center top;background:#fff}
.line.komari .face{border:2px solid var(--komari)}
.line.auto .face{border:2px solid var(--auto)}
.line .who{font-size:.72rem;font-weight:700;line-height:1.15;text-align:center;white-space:nowrap}
.line.komari .who{color:var(--komari)}
.line.auto .who{color:var(--auto)}
/* バブル本体：rounded-xl(12px)・p-4(16px)・leading-relaxed(1.625)・影なし・1px枠 */
.line .bubble{position:relative;flex:1 1 auto;border-radius:var(--bubble-radius);padding:16px;
  font-size:1rem;line-height:1.625;box-shadow:none;border:1px solid;
  max-width:min(100%,40em);overflow-wrap:anywhere}
.line.komari .bubble{background:var(--komari-bubble);border-color:var(--komari-edge)}
.line.auto .bubble{background:var(--auto-bubble);border-color:var(--auto-edge)}
/* 吹き出しの三角（それぞれアバター側を向く・地色と枠に追従） */
.line .bubble::before{content:"";position:absolute;top:18px;width:10px;height:10px;transform:rotate(45deg)}
.line.komari .bubble::before{left:-6px;background:var(--komari-bubble);border-left:1px solid var(--komari-edge);border-bottom:1px solid var(--komari-edge)}
.line.auto .bubble::before{right:-6px;background:var(--auto-bubble);border-top:1px solid var(--auto-edge);border-right:1px solid var(--auto-edge)}
/* 表情が変わった発話は、本文テキストの色も変える（興奮/困り/疑問） */
.bubble.emo-koufun{color:#C2410C;font-weight:600}   /* 興奮＝オレンジ */
.bubble.emo-nageki{color:#1D4ED8;font-weight:600}   /* 困り・嘆き＝ブルー */
.bubble.emo-gimon{color:#7C3AED;font-weight:600}    /* 疑問＝バイオレット */

/* ===================== まとめ ===================== */
.summary{
  margin:36px 0 0;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--bg-alt),#FFFFFF);box-shadow:var(--shadow);padding:20px 22px;
}
.summary h2{font-size:1.2rem;font-weight:700;margin:0 0 12px;display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
.summary h2 .ic{width:30px;height:30px;border-radius:8px;background:var(--amber);color:#fff;display:grid;place-items:center;font-size:.95rem}
.summary ul{margin:0;padding-left:2px;list-style:none}
.summary li{position:relative;padding:7px 0 7px 28px;border-bottom:1px dashed var(--line)}
.summary li:last-child{border-bottom:none}
.summary li::before{content:"✓";position:absolute;left:2px;top:7px;color:var(--auto);font-weight:900}

/* ===================== CTA + 配布物 ===================== */
.cta-block{
  margin:34px 0 0;border-radius:18px;padding:26px 24px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#235E72 0%,#357E8F 100%);box-shadow:var(--shadow-lg);
}
.cta-block h2{margin:0 0 8px;font-size:1.3rem;font-weight:700;line-height:1.5;letter-spacing:-.01em}
.cta-block p{margin:0 0 18px;color:#F0F8FA;font-size:.95rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.95rem;
  padding:13px 20px;border-radius:11px;cursor:pointer;border:none;
}
.btn.primary{background:#fff;color:var(--accent-ink)}
.btn.primary:hover{background:#F2FBFD;text-decoration:none}
.btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn.ghost:hover{background:rgba(255,255,255,.24);text-decoration:none}
.cta-sub{margin-top:14px;font-size:.78rem;color:#EAF4F6;opacity:.95}

.download{
  margin:18px 0 0;border:1.5px solid var(--auto);border-radius:var(--radius);
  background:var(--auto-bg);padding:16px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.download .dl-ic{width:42px;height:42px;border-radius:10px;background:var(--auto);color:#fff;display:grid;place-items:center;font-size:1.2rem;flex:0 0 auto}
.download .dl-body{flex:1;min-width:180px}
.download .dl-body b{display:block;font-size:.96rem}
.download .dl-body small{color:var(--sub);font-size:.8rem}
.download .btn.primary{background:var(--auto);color:#fff}
.download .btn.primary:hover{background:#3C7E8F}

/* 配布物カード（ma-ji.ai プロンプトカード忠実版：グラデ枠＋terminal❯＋pill split＋モーダル） */
.dl-card{
  margin:18px 0 4px;border-radius:13px;padding:1.5px;
  background:linear-gradient(135deg,#275F98 0%,#D90B51 100%);box-shadow:none;
}
.dl-inner{background:var(--bg-alt);border-radius:11px;padding:13px 16px;display:flex;flex-direction:column;gap:6px}
.dl-head{position:relative;padding-left:28px}
.dl-ic{position:absolute;left:0;top:2px;width:20px;height:20px;color:var(--accent)}
.dl-title{margin:0;font-size:.95rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.45}
.dl-cbody{padding-left:28px;display:flex;flex-direction:column;gap:10px}
.dl-desc{margin:0;color:var(--sub);font-size:.85rem;line-height:1.55;overflow-wrap:anywhere}
/* pill split ボタン */
.dl-split{position:relative;display:inline-flex;width:fit-content;border:1px solid var(--line2);border-radius:999px;background:#fff}
.dl-primary{
  display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:.8rem;font-weight:700;
  color:var(--ink);background:#fff;border:none;cursor:pointer;padding:8px 15px;height:32px;
  border-radius:999px 0 0 999px;text-decoration:none;
}
.dl-primary:only-child{border-radius:999px}
.dl-primary:hover{background:var(--chip);text-decoration:none}
.dl-primary .dl-ic{position:static;width:15px;height:15px;color:var(--accent)}
.dl-caret{
  width:32px;height:32px;display:inline-grid;place-items:center;background:#fff;border:none;
  border-left:1px solid var(--line2);cursor:pointer;border-radius:0 999px 999px 0;color:var(--ink)
}
.dl-caret:hover{background:var(--chip)}
.dl-chev{width:15px;height:15px}
.dl-menu{
  position:absolute;top:38px;left:0;min-width:190px;background:#fff;border:1px solid var(--line);
  border-radius:11px;box-shadow:var(--shadow-lg);padding:5px;z-index:30;display:flex;flex-direction:column;gap:2px
}
.dl-menu[hidden]{display:none}
.dl-mi{
  display:flex;align-items:center;gap:8px;font-family:inherit;font-size:.82rem;font-weight:600;color:var(--ink);
  background:none;border:none;cursor:pointer;padding:9px 11px;border-radius:7px;text-decoration:none;text-align:left
}
.dl-mi:hover{background:var(--chip);text-decoration:none}
.dl-mi .dl-ic{position:static;width:15px;height:15px;color:var(--accent);flex:0 0 auto}
/* プロンプトモーダル */
.dl-modal[hidden]{display:none}
.dl-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px}
.dl-modal-scrim{position:absolute;inset:0;background:rgba(15,23,42,.5)}
.dl-modal-box{
  position:relative;width:100%;max-width:600px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);padding:22px;display:flex;flex-direction:column;gap:14px;max-height:84vh
}
.dl-modal-x{position:absolute;top:11px;right:11px;width:30px;height:30px;border:none;background:none;cursor:pointer;color:var(--sub);font-size:1.4rem;line-height:1;border-radius:7px}
.dl-modal-x:hover{background:var(--chip);color:var(--ink)}
.dl-modal-title{margin:0;font-size:1.12rem;font-weight:800;color:var(--ink);padding-right:30px;letter-spacing:-.01em}
.dl-modal-desc{margin:0;font-size:.86rem;color:var(--sub);line-height:1.55}
.dl-modal-desc:empty{display:none}
.dl-modal-prewrap{background:var(--bg-alt);border:1px solid var(--line);border-radius:10px;padding:12px;max-height:230px;overflow:auto}
.dl-modal-pre{
  margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;line-height:1.6;color:var(--ink);
  font-family:"SF Mono",ui-monospace,"Cascadia Code",Consolas,"Noto Sans Mono",monospace
}
.dl-modal-foot{display:flex}
.dl-modal-copy{align-self:flex-start;font-family:inherit;font-size:.82rem;font-weight:800;color:#fff;background:var(--accent);border:none;cursor:pointer;padding:10px 18px;border-radius:999px}
.dl-modal-copy:hover{background:var(--accent-ink)}
.dl-modal-copy.copied{background:#15803D}
/* 目次のカード項目（✦ sparkles サブ項目・連番を出さない） */
.toc-list li.toc-card{counter-increment:none;margin-top:-1px}
.toc-list a.toc-cardlink{padding-left:16px;font-size:.84rem;gap:7px}
.toc-list a.toc-cardlink::before{content:none}
.toc-spark{width:15px;height:15px;flex:0 0 auto;color:#C2410C}
@media (max-width:520px){
  .dl-split{width:100%}
  .dl-primary{flex:1;justify-content:center}
}

/* ===================== シェア ===================== */
/* 丸アイコンのシェアボタン（X／LINE／リンクコピーの3つ・ブランド配色） */
.share{margin:30px 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.share.top{margin:18px 0 2px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.share .lbl{font-size:.82rem;color:var(--sub);font-weight:700}
.share a,.share button{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid transparent;box-shadow:none;cursor:pointer;font-family:inherit;
  text-decoration:none;line-height:1;
}
.share svg{width:18px;height:18px;fill:currentColor;display:block}
.share a.sh-x{background:#000;color:#fff}
.share a.sh-x:hover{background:#222;text-decoration:none}
.share a.sh-line{background:#06C755;color:#fff;font-weight:800;font-size:.62rem;letter-spacing:.02em}
.share a.sh-line:hover{background:#05b34d;text-decoration:none}
.share .copy-link{background:var(--chip);border-color:var(--line);color:var(--ink)}
.share .copy-link:hover{background:#E2E8F0}

/* LINE友だち追加CTA（記事末尾・トップ共有＝renderLineCta・lineAddFriendUrl 空なら非描画） */
.line-cta{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:30px 0 0;border:1px solid #BCE8CB;border-radius:18px;padding:18px 20px;
  background:linear-gradient(135deg,#F0FBF3 0%,#E1F6E9 100%);box-shadow:var(--shadow);
}
.line-cta .line-badge{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:13px;background:#06C755;color:#fff;
  font-weight:800;font-size:.74rem;letter-spacing:.02em;box-shadow:0 3px 8px rgba(6,199,85,.3);
}
.line-cta-body{flex:1 1 220px;min-width:0}
.line-cta-body b{display:block;font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.5}
.line-cta-body span{display:block;margin-top:3px;font-size:.86rem;color:var(--sub)}
.line-cta-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:#06C755;color:#fff;font-weight:800;font-size:.95rem;padding:12px 22px;border-radius:999px;
  text-decoration:none;box-shadow:0 4px 12px rgba(6,199,85,.32);transition:background .15s,transform .15s;
}
.line-cta-btn:hover{background:#05b34d;text-decoration:none;transform:translateY(-1px)}
@media(max-width:520px){
  .line-cta{flex-direction:column;align-items:stretch;text-align:center}
  .line-cta .line-badge{align-self:center}
  .line-cta-btn{justify-content:center;width:100%}
}

/* 著者カード */
.author{
  margin:30px 0 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  box-shadow:var(--shadow);padding:16px 18px;display:flex;gap:14px;align-items:center;
}
.author img{width:54px;height:54px;border-radius:50%;border:2.5px solid var(--auto);flex:0 0 auto}
.author .a-body b{font-size:.95rem}
.author .a-body p{margin:2px 0 0;color:var(--sub);font-size:.83rem;line-height:1.6}

/* ===================== 記事一覧（index） ===================== */
.home-hero{
  background:linear-gradient(135deg,#F8FAFC 0%,#E9F2F4 100%);
  border-bottom:1px solid var(--line);
}
.home-hero .inner{max-width:1080px;margin:0 auto;padding:40px 18px 34px;position:relative}
.home-hero h1{font-size:clamp(1.4rem,4.2vw,1.875rem);font-weight:700;margin:0 0 10px;line-height:1.5;max-width:640px;letter-spacing:-.015em}
.home-hero p{margin:0;color:#334155;max-width:600px;font-size:.9rem;line-height:1.7}
.home-hero .hchars{position:absolute;right:14px;bottom:0;display:flex;align-items:flex-end;gap:4px}
.home-hero .hchars img{height:128px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
/* スマホ：ma-ji流カード先行。ヒーローは隠して即カードへ（識別はヘッダーのブランドで担保） */
@media(max-width:680px){
  .home-hero{display:none}
}

.grid{max-width:1080px;margin:0 auto;padding:30px 18px 64px;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* スマホ：カード本文を詰める（タイトル2行クランプ）＝1画面に2枚＋3枚目のサムネが入る。サムネ16:9は維持。
   ※ベース規則より後・かつ高詳細度（.grid .post-card）で確実に上書きする */
@media(max-width:680px){
  .grid{padding-top:14px;gap:12px;padding-bottom:40px}
  .grid .post-card .pc-body{padding:8px 13px 10px;gap:4px}
  .grid .post-card .pc-cat{font-size:.64rem;padding:2px 8px}
  .grid .post-card h2{font-size:.96rem;line-height:1.38;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .grid .post-card .pc-meta{font-size:.73rem;margin-top:0}
}
.post-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;
}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none}
.post-card:hover h2{color:var(--accent)}
.post-card .thumb{aspect-ratio:16/9;background:#eee;overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
/* カードは ma-ji 流に最小限：サムネ＋カテゴリ＋タイトル＋日付（説明文なし＝縦に短く） */
.post-card .pc-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px}
.post-card .pc-cat{align-self:flex-start;background:var(--auto);color:#fff;font-size:.68rem;font-weight:800;padding:2px 9px;border-radius:999px}
.post-card h2{margin:0;font-size:1.0625rem;font-weight:700;line-height:1.5;color:var(--ink);letter-spacing:-.01em}
.post-card .pc-meta{color:var(--sub);font-size:.78rem;display:flex;gap:10px;align-items:center;margin-top:2px}
/* 近日公開（ダミー）カード */
.post-card.coming{opacity:.62;cursor:default}
.post-card.coming:hover{transform:none;box-shadow:var(--shadow)}
.post-card.coming:hover h2{color:var(--ink)}
.thumb.soon{display:grid;place-items:center;background:var(--bg-alt);color:var(--sub);font-weight:800;font-size:.92rem;aspect-ratio:16/9}
.pc-cat.alt{background:#94A3B8}

/* ===================== サブページ共通（contact / legal） ===================== */
.page{max-width:var(--maxw);margin:0 auto;padding:0 18px 64px}
.page .crumbs{margin:18px 0 6px}
.page h1{font-size:clamp(1.3rem,3.6vw,1.6rem);font-weight:700;line-height:1.5;margin:8px 0 6px;letter-spacing:-.01em}
.page .page-lead{color:var(--sub);font-size:.96rem;margin:0 0 22px}

/* お問い合わせフォーム */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 22px 26px}
.field{margin:0 0 16px}
.field label{display:block;font-weight:800;font-size:.88rem;margin:0 0 6px}
.field label .req{color:#C2410C;font-size:.78rem;margin-left:6px}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:.96rem;color:var(--ink);
  border:1.5px solid var(--line2);border-radius:10px;padding:11px 13px;background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,110,140,.14)}
.field textarea{min-height:140px;resize:vertical;line-height:1.7}
.field .hint{color:var(--sub);font-size:.78rem;margin:5px 0 0}
.form-card .submit{width:100%;justify-content:center;font-size:1rem;padding:14px;margin-top:4px}
.btn.accent{background:var(--accent);color:#fff;border:none}
.btn.accent:hover{background:var(--accent-ink);text-decoration:none}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:.84rem;color:var(--sub);margin:2px 0 16px}
.consent input{width:auto;margin-top:3px;flex:0 0 auto}
.form-aside{background:var(--auto-bg);border:1px solid #CFE3E7;border-radius:var(--radius);
  padding:16px 18px;margin:0 0 20px;font-size:.9rem;color:#2c5560}
.form-aside b{color:var(--auto)}

/* 送信中（ボタン）：テキスト差替＋スピナー。reduced-motion 時はスピナーを出さない（全停止で止まった円を避ける）。 */
.form-card .submit.is-busy{min-width:11em;opacity:.85;cursor:progress}
.form-card .submit.is-busy::before{
  content:"";width:1em;height:1em;margin-right:.1em;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  display:inline-block;vertical-align:-2px;animation:form-spin .7s linear infinite}
@media (prefers-reduced-motion:reduce){ .form-card .submit.is-busy::before{display:none} }
@keyframes form-spin{to{transform:rotate(360deg)}}

/* 失敗バナー（ボタン直前・注意色は既存 #C2410C 系で統一・新しい純赤を持ち込まない） */
.form-error{background:#FEF3EC;border:1px solid #F3C9B0;border-radius:10px;
  color:#9A3412;font-size:.88rem;font-weight:700;padding:11px 14px;margin:0 0 14px}

/* 受付完了カード（フォームを hidden で隠して差し替え。ティール基調＋こまり顔の縁だけテラコッタ） */
.form-done{text-align:center;padding:30px 24px 26px;
  animation:form-rise .5s ease-out both}
@media (prefers-reduced-motion:reduce){ .form-done{animation:none} }
@keyframes form-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.form-done-badge{position:relative;width:84px;height:84px;margin:0 auto 14px}
.form-done-badge .face{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:center top;
  border:3px solid var(--komari);background:#fff;box-shadow:var(--shadow)}
.form-done-check{position:absolute;right:-4px;bottom:-4px;width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:#fff;border:3px solid #fff;
  display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900}
.form-done-check path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;animation:form-check .5s .15s ease-out forwards}
@media (prefers-reduced-motion:reduce){ .form-done-check path{animation:none;stroke-dashoffset:0} }
@keyframes form-check{to{stroke-dashoffset:0}}
.form-done-title{font-size:1.3rem;margin:0 0 2px;outline:none}
.form-done-lead{color:var(--komari);font-weight:800;font-size:.92rem;margin:0 0 10px}
.form-done-body{color:var(--ink);font-size:.96rem;line-height:1.8;margin:0 auto;max-width:34em}
.form-done-body b{color:var(--accent)}
.form-done-sub{color:var(--sub);font-size:.82rem;margin:8px 0 0}
.form-done-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.form-done-actions .btn.ghost{background:#fff;color:var(--accent);border:1.5px solid var(--accent)}
.form-done-actions .btn.ghost:hover{background:var(--auto-bg);text-decoration:none}
.form-done-link{align-self:center;color:var(--sub);font-size:.9rem;font-weight:700}

/* 法務ページ（privacy / terms） */
.legal{font-size:.96rem;line-height:1.9}
.legal h2{font-size:1.15rem;font-weight:700;margin:28px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);letter-spacing:-.01em}
.legal h2 .n{color:var(--accent);margin-right:8px}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:1.3em}
.legal li{margin:4px 0}
.legal .updated{color:var(--sub);font-size:.82rem;margin-top:4px}

/* ===================== フッター ===================== */
.site-footer{border-top:1px solid var(--line);background:var(--bg-alt);margin-top:20px}
.site-footer .inner{max-width:1080px;margin:0 auto;padding:26px 18px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between}
.site-footer .fbrand{font-weight:800;font-size:.92rem;display:flex;align-items:center;gap:8px}
.site-footer .fbrand img{width:30px;height:30px;border-radius:50%;border:2px solid var(--komari)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.site-footer a{color:var(--sub);font-size:.82rem;font-weight:600}
.site-footer .copy{width:100%;color:var(--sub);font-size:.74rem;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}

/* ===================== トップに戻るボタン ===================== */
.to-top{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:1.25rem;font-weight:800;z-index:40;
  border:none;cursor:pointer;line-height:1;
  background:linear-gradient(135deg,#3B5BBF 0%,#D6246A 100%);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{filter:brightness(1.08)}
@media(max-width:520px){.to-top{right:14px;bottom:14px;width:44px;height:44px}}

/* ===================== 仕上げ（A11y・堅牢性） ===================== */
.post-card h2{transition:color .15s;overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* backdrop-filter 未対応ブラウザではヘッダーを不透明に */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:#fff}
}
/* 動きに弱いユーザー向け */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}

/* ===================== スクロール表示（fade-up・一度だけ・ma-ji風） =====================
   head のインラインJSが <html> に js-reveal を付けた時だけ隠す。
   JS無効 / IntersectionObserver未対応 / prefers-reduced-motion では付かない＝最初から全表示（PE・SEO安全）。
   記事冒頭（動画/日付/タイトル/リード/シェア/目次）は対象外＝即表示し「スクロールで出てくる」を強調。 */
html.js-reveal .article .chapter h2,
html.js-reveal .article .ch-lead,
html.js-reveal .article .talk .line,
html.js-reveal .article figure.figure,
html.js-reveal .article .summary,
html.js-reveal .article .cta-block,
html.js-reveal .article .line-cta,
html.js-reveal .article .author,
html.js-reveal .grid .post-card{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease-out, transform .5s ease-out;
}
html.js-reveal .article .chapter h2.in,
html.js-reveal .article .ch-lead.in,
html.js-reveal .article .talk .line.in,
html.js-reveal .article figure.figure.in,
html.js-reveal .article .summary.in,
html.js-reveal .article .cta-block.in,
html.js-reveal .article .line-cta.in,
html.js-reveal .article .author.in,
html.js-reveal .grid .post-card.in{
  opacity:1;transform:none;
}
/* スマホでの会話（ma-ji準拠：アバターを画面端へ張り出し・バブルを広く） */
@media(max-width:520px){
  .line .avatar{width:50px}
  .line .face{width:48px;height:48px}
  /* アバターをコンテンツ余白の外（画面端寄り）へ＝ma-jiの mr-[-5vw]/ml-[-5vw] */
  .line.komari{margin-left:calc(-1 * var(--gutter) + 4px)}
  .line.auto{margin-right:calc(-1 * var(--gutter) + 4px)}
  /* ma-ji準拠：スマホでも本文は16pxのまま縮小しない（読みやすさ優先） */
  .layout,.page,.grid{padding-left:var(--gutter);padding-right:var(--gutter)}  /* px-5＝20px */
  /* 記事先頭の動画はスマホで画面端まで100%（全幅・角丸/左右枠なし） */
  .article .video-embed{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));
    border-radius:0;border-left:0;border-right:0}
}