/* ととのえる屋 記事ページ 2026 — site-2026.css と併用。
   旧 style.css 由来のCSS変数を新パレットへエイリアスし、本文のインラインstyleを救済する。 */
:root{
  /* 旧変数 → 新パレット（本文インラインstyle互換） */
  --bg:#E7E4DD;
  --bg-warm:#DFDBD2;
  --cream:#E7E4DD;
  --text:#1A1814;
  --text-mid:#3A3730;
  --text-soft:#8A8579;
  --amber:#C5743C;
  --amber-lt:#F0E2D5;
  --forest:#1A1814;
  --green:#C5743C;
  --border:rgba(26,24,20,.14);
  --border-soft:rgba(26,24,20,.14);
  --line-soft:rgba(26,24,20,.08);
  --radius:6px;
  --ls-eyebrow:.16em;
  --ls-mid:.02em;
  --ls-wide:.1em;
}

/* レイアウト */
.article-body{max-width:760px;margin:0 auto;padding:84px 24px 24px}
.article-header{margin-bottom:44px}
.article-hero{margin:0 0 28px;border-radius:6px;overflow:hidden;aspect-ratio:16/9}
.article-hero img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}
.article-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.article-title{font-weight:500;font-size:clamp(25px,4vw,40px);line-height:1.45;letter-spacing:.005em;margin-bottom:24px;color:var(--ink)}
.article-lead{font-size:15px;font-weight:300;line-height:2;color:var(--ink-soft);margin-bottom:12px;text-wrap:pretty}

/* 本文 */
.article-content{font-size:15px;font-weight:300;line-height:2.05;color:var(--ink-soft)}
.article-content h2{font-weight:500;font-size:clamp(19px,2.6vw,26px);line-height:1.55;color:var(--ink);margin:54px 0 18px;letter-spacing:.01em}
.article-content h3{font-weight:500;font-size:17px;color:var(--ink);margin:34px 0 12px}
.article-content p{margin-bottom:18px;text-wrap:pretty}
.article-content ul,.article-content ol{margin:0 0 18px 1.25em}
.article-content li{margin-bottom:8px}
.article-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article-content img{border-radius:6px;margin:26px 0;width:100%;height:auto}
.article-content blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:24px 0;color:var(--ink);font-weight:400}
.article-content strong{font-weight:500;color:var(--ink)}
.article-content table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}
.article-content th,.article-content td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.article-content th{font-weight:500;color:var(--ink);background:var(--paper-2)}

/* FAQ（静的 .faq-item） */
.article-faq{margin:56px auto 0;border-top:1px solid var(--line);padding-top:8px}
.article-faq .faq-heading,.article-faq h2{font-weight:500;font-size:22px;color:var(--ink);margin:28px 0 20px}
.article-faq .faq-item{border-bottom:1px solid var(--line);padding:18px 0}
.article-faq .faq-q{font-weight:500;font-size:15px;color:var(--ink);margin:0 0 10px}
.article-faq .faq-a{font-size:14px;font-weight:300;line-height:1.95;color:var(--ink-soft);margin:0}
/* FAQ が details/summary の記事にも対応 */
.article-faq details{border-bottom:1px solid var(--line)}
.article-faq summary{list-style:none;cursor:pointer;padding:18px 0;font-size:15px;font-weight:500;display:flex;justify-content:space-between;gap:16px;color:var(--ink)}
.article-faq summary::-webkit-details-marker{display:none}
.article-faq summary::after{content:"+";font-family:var(--mono);color:var(--accent)}
.article-faq details[open] summary::after{content:"–"}

/* HowTo / シリーズハブ等の汎用ブロック（インラインstyleがvar参照で効く） */
.article-cta{margin:72px auto 56px!important}
.article-cta a{margin-top:6px}

/* ボタン（旧クラス互換） */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent);padding:13px 24px;border-radius:999px;transition:.25s;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--accent);color:var(--paper)}
.btn--amber,.btn--green,.btn--forest{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.btn--amber:hover,.btn--green:hover,.btn--forest:hover{filter:brightness(1.08);color:var(--paper)}
.btn--line{background:#06C755;border-color:#06C755;color:#fff}
.btn--line:hover{filter:brightness(1.05);color:#fff}
.btn--block{display:flex;width:100%;justify-content:center}

/* 関連記事 */
.related-articles{margin:64px auto 0;border-top:1px solid var(--line);padding-top:36px}
.related-articles h3{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.related-list{display:flex;flex-direction:column}
.related-item{display:block;padding:16px 4px;border-bottom:1px solid var(--line);transition:padding .3s,background .3s;text-decoration:none;color:var(--ink)}
.related-item:hover{padding-left:12px;background:rgba(197,116,60,.05)}
.related-item-title{font-size:15px;font-weight:400}
.related-item-title::before{content:"→ ";font-family:var(--mono);color:var(--accent)}

/* シリーズハブ aside など amber 枠（インラインstyle互換のため最低限） */
.article-content aside{margin:28px 0;padding:20px 22px;border-left:3px solid var(--accent);background:var(--paper-2);border-radius:4px;font-size:14px;line-height:1.9}

/* legal / thanks ページのヘッダー（旧 #hero クラス互換） */
#hero{max-width:1280px;margin:0 auto;padding:100px 44px 24px}
#hero .hero-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:22px}
#hero .hero-eyebrow span{width:30px;height:1px;background:currentColor;display:inline-block}
#hero .hero-headline{font-weight:500;font-size:clamp(26px,4vw,44px);line-height:1.4;color:var(--ink);margin-bottom:14px}
#hero .hero-sub{font-size:15px;font-weight:300;color:var(--ink-soft)}
.container{max-width:1280px;margin:0 auto}