/* =====================================================================
   article.css — 記事ページ共通の見た目（2026-09-10）
   各記事の <head> 末尾で読み込む。既存の Tailwind ユーティリティと
   インライン <style> の後に効かせる前提。方針：
     - 面（カード・角丸・枠線）を減らし、罫線と余白で区切る
     - 見出しは Shippori Mincho、本文は Noto Sans JP
     - 差し色は金（#c9a96e）だけ。緑はLINEボタンにのみ残す
     - 黒は暖色寄り（紙・革の色味）に寄せる
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&display=swap');

:root{
  --ink-0:#0b0a08;          /* ページ地 */
  --ink-1:#14120e;          /* 帯 */
  --ink-2:#1a1712;          /* 面（ほぼ使わない） */
  --rule:rgba(214,196,160,.16);
  --rule-strong:rgba(214,196,160,.32);
  --text:#ddd7c9;
  --text-2:#a49b87;
  --text-3:#7d7563;
  --head:#f2ecdf;
  --gold:#c9a96e;
  --gold-2:#e3cc9a;
  --line:#06C755;
  --mincho:"Shippori Mincho","Noto Serif JP",serif;
  --sans:"Noto Sans JP",sans-serif;
}

/* ---------- 地色：Tailwind の任意値クラスを暖色に置き換え ---------- */
body{background:var(--ink-0);color:var(--text)}
[class*="bg-[#0d0d0d]"],[class*="bg-[#0f0f0f]"],[class*="bg-[#0a0a0a]"]{background-color:var(--ink-0)!important}
[class*="bg-[#111111]"],[class*="bg-[#111]"]{background-color:var(--ink-1)!important}
[class*="bg-[#1a1a1a]"]{background-color:var(--ink-2)!important}
[class*="border-white/10"]{border-color:var(--rule)!important}
[class*="border-white/20"]{border-color:var(--rule-strong)!important}

/* ---------- ヒーロー ---------- */
section h1,section h1[class]{
  font-family:var(--mincho);font-weight:600;
  font-size:1.7rem;line-height:1.5;letter-spacing:.01em;
  color:var(--head);position:relative;padding-top:1.1rem;margin-bottom:1.1rem;
}
section h1::before{content:"";position:absolute;top:0;left:0;width:2rem;height:2px;background:var(--gold)}
@media (min-width:768px){section h1,section h1[class]{font-size:2.15rem;line-height:1.45}}
/* カテゴリのピル → 小さな明朝の一行 */
section:has(h1) span[class*="rounded-full"],[class*="rounded-full"][class*="border-white/20"]{
  background:none!important;border:0!important;padding:0!important;border-radius:0!important;
  font-family:var(--mincho);font-weight:600;letter-spacing:.1em;color:var(--gold)!important;font-size:.8rem!important;
}
section h1 + div{color:var(--text-3)}
section h1 + div span{white-space:nowrap}

/* パンくず */
[class*="pt-14"] a{color:var(--text-3)} [class*="pt-14"] a:hover{color:var(--gold)}

/* ---------- 「この記事でわかること」：カードをやめて上下罫線に ---------- */
[class*="rounded-2xl"][class*="c9a96e"]{
  background:none!important;border:0!important;border-radius:0!important;
  border-top:1px solid var(--rule-strong)!important;border-bottom:1px solid var(--rule)!important;
  padding:1.1rem .1rem!important;margin-bottom:2.2rem!important;
}
[class*="rounded-2xl"][class*="c9a96e"] > p{font-family:var(--mincho);letter-spacing:.08em;color:var(--gold)!important;margin-bottom:.6rem!important}
[class*="rounded-2xl"][class*="c9a96e"] li{color:var(--text)}

/* ---------- 本文 ---------- */
.article-body{max-width:39rem}
.article-body p{font-size:1rem;line-height:1.95;color:var(--text);margin-bottom:1.15rem}
.article-body strong{color:var(--head);font-weight:700}
.article-body a{color:var(--gold);text-decoration:underline;text-underline-offset:.22em;text-decoration-color:rgba(201,169,110,.45)}
.article-body a:hover{color:var(--gold-2);text-decoration-color:var(--gold-2)}
.article-body h2{
  font-family:var(--mincho);font-weight:600;font-size:1.35rem;line-height:1.5;color:var(--head);
  border-left:0;padding-left:0;margin-top:3.2rem;margin-bottom:1rem;
  padding-top:1.1rem;border-top:1px solid var(--rule-strong);
}
.article-body h3{font-family:var(--mincho);font-weight:600;font-size:1.08rem;color:var(--head);margin-top:2rem;margin-bottom:.7rem}
.article-body ul li,.article-body ol li{font-size:1rem;line-height:1.9;color:var(--text)}
.article-body ul{list-style:none;margin-left:0}
.article-body ul li{position:relative;padding-left:1.1rem}
.article-body ul li::before{content:"";position:absolute;left:0;top:.85em;width:.4rem;height:1px;background:var(--gold)}
.article-body ol{margin-left:1.4rem}
.article-body blockquote{border-left:2px solid var(--gold);padding-left:1rem;color:var(--text-2)}

/* 目次：カードをやめて左罫線 */
.toc{background:none!important;border:0!important;border-left:1px solid var(--rule-strong)!important;border-radius:0!important;padding:.2rem 0 .2rem 1.2rem!important;margin:1.6rem 0 2.6rem!important}
.toc-title{font-family:var(--mincho);color:var(--text-3)!important;letter-spacing:.14em;font-size:.72rem!important;margin-bottom:.5rem!important}
.toc ol{margin-left:1.1rem}
.toc li{color:var(--text-2)!important;font-size:.9rem!important;line-height:1.8!important}
.toc a{color:var(--text-2)!important;text-decoration:none!important} .toc a:hover{color:var(--gold)!important}

/* 冒頭の1行LINE導線：地は張らず、細い緑の罫だけ */
.lead-cta{margin:1.3rem 0 1.4rem}
.lead-cta a{text-decoration:none!important;background:none!important;border:1px solid rgba(6,199,85,.38)!important;border-radius:.35rem!important;padding:.75rem .9rem!important;font-weight:600!important;color:var(--head)!important}
.lead-cta a:hover{background:rgba(6,199,85,.07)!important}
.lead-cta .arrow{color:var(--line)!important;font-weight:400!important}

/* データ表 */
.agetable{font-size:.92rem;margin:1rem 0 1.4rem}
.agetable th,.agetable td{border-bottom:1px solid var(--rule)!important;padding:.6rem .5rem!important}
.agetable th:nth-child(n+2){text-align:right}
.agetable th{color:var(--text-3)!important;font-weight:500!important;letter-spacing:.06em}
.agetable td{color:var(--text)}
.agetable tr.hl td{background:none!important;color:var(--gold-2)!important;font-weight:700}
.note{color:var(--text-3)!important}

/* 本文中の「結論」「ポイント」などの囲み（旧テンプレの角丸カード） */
.article-body [class*="rounded-xl"],.article-body [class*="rounded-2xl"]{
  background:none!important;border:0!important;border-left:2px solid var(--gold)!important;border-radius:0!important;padding:.2rem 0 .2rem 1rem!important;
}

/* ---------- 関連記事：絵文字カード → 罫線リスト ---------- */
.grid.gap-3 > a{background:none!important;border:0!important;border-bottom:1px solid var(--rule)!important;border-radius:0!important;padding:.85rem 0!important;gap:.9rem!important}
.grid.gap-3 > a .text-2xl{display:none!important}
.grid.gap-3 > a p.font-bold{font-family:var(--mincho);font-size:.97rem!important;color:var(--head)!important}
.grid.gap-3 > a:hover p.font-bold{color:var(--gold)!important}
.grid.gap-3 > a p:not(.font-bold){color:var(--text-3)!important}
h3.text-sm.font-bold.text-gray-300{font-family:var(--mincho);color:var(--text-3)!important;letter-spacing:.14em;font-size:.72rem!important}

/* 前の記事／次の記事／記事一覧 */
.grid.grid-cols-2.gap-4 > a{background:none!important;border:0!important;border-top:1px solid var(--rule-strong)!important;border-radius:0!important;padding:.9rem 0!important}
.grid.grid-cols-2.gap-4 > a span.block{color:var(--text-3)!important}
.grid.grid-cols-2.gap-4 > a span.font-bold{font-family:var(--mincho);color:var(--head)!important}
.grid.grid-cols-2.gap-4 > a:hover span.font-bold{color:var(--gold)!important}

/* 著者ミニ欄（本文下） */
[class*="border-t"] p.text-xs.text-gray-400{color:var(--text-3)!important}

/* ---------- 末尾LINEブロック ---------- */
section[class*="py-16"] h2{font-family:var(--mincho);font-weight:600;font-size:1.3rem!important;color:var(--head)!important;margin-bottom:.9rem!important}
section[class*="py-16"] p{color:var(--text-2)!important}
section[class*="py-16"] a[href*="line.me"]{box-shadow:none!important}

/* 著者プロフィール */
p[class*="tracking-widest"]{letter-spacing:.12em!important;font-family:var(--mincho);color:var(--gold)!important;font-weight:600!important}
section[class*="border-y"] h3{font-family:var(--mincho);color:var(--head)!important}
section[class*="border-y"] p{color:var(--text-2)!important}
section[class*="border-y"] a[href="/about.html"]{color:var(--gold)!important}
section[class*="border-y"] [class*="border-2"]{border-color:rgba(201,169,110,.45)!important}

/* 編集・更新日 */
section[class*="py-8"] p{color:var(--text-2)!important} section[class*="py-8"] p.text-white{color:var(--head)!important}

/* ---------- 品質の下限 ---------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:767px){
  section h1,section h1[class]{font-size:1.5rem;line-height:1.5;word-break:normal;line-break:strict}
  .article-body h2{word-break:normal;line-break:strict}
  .article-body p,.article-body li{font-size:.97rem;line-height:1.9}
  .article-body h2{font-size:1.22rem;margin-top:2.6rem}
}
