/* ============================================================
   Chez Copain — 共通スタイル v3（和モダン）
   Claude Designのリデザイン案に基づくデザイン言語：
   生成り #f6f2e7 ／ 深緑 #22402f・#28503c ／ 罫線 #d9d2bd
   見出し：Shippori Mincho ／ 本文：Zen Kaku Gothic New
   ============================================================ */
:root{
  --cream:#f6f2e7;      /* ページ背景（生成り） */
  --cream-2:#f0ebdc;    /* ホバー・淡い面 */
  --cream-3:#eef0e2;    /* 情報ボックス */
  --paper:#fdfbf5;      /* カード面 */
  --ink:#2c3a31;        /* 本文 */
  --ink-strong:#22402f; /* 見出し・濃緑 */
  --green:#28503c;      /* リンク・アクセント */
  --green-hover:#1b3b2b;
  --sub:#7a8377;        /* 補助テキスト */
  --faint:#98a094;
  --line:#d9d2bd;       /* 罫線（淡） */
  --line-strong:#c9c2ab;/* 罫線（濃） */
  --chip-line:#b9c4b4;  /* 緑がかった枠線 */
  --gold:#b0a888;       /* 番号などの飾り */
  --dark:#22402f;       /* 反転セクション背景 */
  --dark-line:#3d5a48;
  --dark-text:#f2eddc;
  --dark-sub:#a9bcaa;
  --dark-icon:#cdd8c3;
  --serif:'Shippori Mincho',"Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:'Zen Kaku Gothic New',-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  --maxw:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:2;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-hover);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
img{max-width:100%;height:auto}

/* ---------- header ---------- */
.site-header{background:var(--cream);border-bottom:1px solid var(--line)}
.site-header .inner{max-width:var(--maxw);margin:0 auto;padding:18px 20px 14px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand:hover{text-decoration:none;opacity:.85}
.brand .mark{flex:none;display:block}
.brand .names{display:flex;flex-direction:column;line-height:1}
.brand .name{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:.04em;color:var(--ink-strong)}
.brand .sub{font-size:10.5px;letter-spacing:.28em;color:var(--sub);margin-top:5px}
.gnav{display:flex;gap:18px;font-size:13px;letter-spacing:.06em;flex-wrap:wrap}
.gnav a{color:var(--green)}
.pr-note{max-width:var(--maxw);margin:0 auto;padding:8px 20px 0;font-size:11px;color:#8b917f;letter-spacing:.03em}

/* ---------- layout ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:28px 20px 64px}
.breadcrumb{font-size:11.5px;color:var(--faint);letter-spacing:.04em;margin:4px 0 26px}
.breadcrumb a{color:var(--faint)}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(22px,4.5vw,27px);line-height:1.65;letter-spacing:.03em;color:var(--ink-strong);margin:.2em 0 .9em}
h2{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.06em;color:var(--ink-strong);margin:2.4em 0 .8em;padding-bottom:.4em;border-bottom:1px solid var(--line-strong)}
h3{font-size:15.5px;font-weight:700;color:var(--green);letter-spacing:.04em;margin:1.8em 0 .5em}
p{margin:.6em 0 1em}
.lead{border:1px solid var(--chip-line);background:var(--cream-3);padding:18px 20px;margin:0 0 26px;font-size:14px;line-height:2.1}
.lead b,strong{color:var(--ink-strong)}
.section-label{display:flex;align-items:baseline;gap:12px;margin:44px 0 6px}
.section-label h2{margin:0;border:none;padding:0}
.section-label .bar{display:none}
.section-note{margin:0 0 18px;font-size:13px;color:var(--sub);letter-spacing:.04em}

/* 区切り飾り（線＋菱形＋線） */
.divider{display:flex;align-items:center;gap:12px;margin:40px 0}
.divider span{flex:1;height:1px;background:var(--line)}
.divider::before{content:"◇";color:#a8ad9c;font-size:9px}
.divider{flex-direction:row}

/* ---------- 行リスト（ジャンル・記事一覧） ---------- */
.rows{border-top:1px solid var(--line-strong);margin:0 0 8px}
.row{display:flex;gap:16px;align-items:flex-start;padding:20px 4px;border-bottom:1px solid var(--line);color:inherit}
a.row:hover{background:var(--cream-2);text-decoration:none}
.row .num{flex:none;font-family:var(--serif);font-size:12px;color:#8a9184;letter-spacing:.1em;padding-top:4px;min-width:20px}
.row .num.big{font-size:22px;color:var(--gold);line-height:1;width:28px;text-align:center;padding-top:0;align-self:baseline}
.row .ic{flex:none;width:40px;height:40px;border:1px solid var(--chip-line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--green);background:var(--cream-3)}
.row .body{flex:1;min-width:0}
.row .title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.row b{font-family:var(--serif);font-weight:600;font-size:16.5px;color:var(--ink-strong);letter-spacing:.04em;line-height:1.7}
.row .desc{display:block;margin-top:5px;font-size:13px;line-height:1.9;color:#4c584f}
.row .arrow{flex:none;align-self:center;color:#8a9184}
.row .tag{flex:none;font-size:11px;color:var(--faint);letter-spacing:.06em;align-self:baseline}
.row.soon{color:var(--faint);pointer-events:none}
.row.soon .ic{border-style:dashed;border-color:#c4bea9;background:transparent;color:var(--faint)}
.row.soon b{color:var(--faint);font-weight:500;font-size:15px}
.row.soon .desc{color:var(--faint);font-size:12.5px}
.chip{font-size:11px;color:var(--green);border:1px solid var(--chip-line);border-radius:2px;padding:2px 7px;letter-spacing:.08em;white-space:nowrap}

/* ---------- 反転セクション（トップの目的別など） ---------- */
.band{background:var(--dark)}
.band .inner{max-width:var(--maxw);margin:0 auto;padding:48px 20px 52px}
.band h2{color:var(--dark-text);border:none;margin:0 0 4px;padding:0}
.band .section-note{color:var(--dark-sub);margin-bottom:26px}
.band-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--dark-line);border:1px solid var(--dark-line)}
.band-grid a{display:flex;gap:14px;padding:20px 18px;background:var(--dark);color:inherit}
.band-grid a:hover{background:var(--green);text-decoration:none}
.band-grid .ic{flex:none;color:var(--dark-icon);padding-top:2px}
.band-grid b{display:block;font-family:var(--serif);font-weight:600;font-size:16px;color:var(--dark-text);letter-spacing:.04em}
.band-grid .desc{display:block;margin-top:6px;font-size:12.5px;line-height:1.8;color:var(--dark-sub)}

/* ---------- 旧カード互換（内部ページ用） ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:0;margin:16px 0;border-top:1px solid var(--line-strong)}
.card{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:flex-start;background:transparent;border:none;border-bottom:1px solid var(--line);padding:18px 4px}
a.card:hover{background:var(--cream-2);text-decoration:none;transform:none;box-shadow:none}
.card > b{width:100%;font-family:var(--serif);font-weight:600;font-size:16px;color:var(--ink-strong);letter-spacing:.03em}
.card span{color:var(--sub);font-size:13px;line-height:1.9;display:block}
.card .icon{flex:0 0 40px;width:40px;height:40px;border:1px solid var(--chip-line);border-radius:50%;background:var(--cream-3);display:flex;align-items:center;justify-content:center;font-size:18px}
.card .icon + span{flex:1;min-width:0}
.card.soon,.card.placeholder{opacity:.62}
.card.soon{pointer-events:none}

/* ---------- table ---------- */
.cmp{width:100%;border-collapse:collapse;margin:18px 0;font-size:13.5px;border-top:1px solid var(--line-strong)}
.cmp th,.cmp td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left;vertical-align:top;line-height:1.9}
.cmp th{font-weight:700;color:var(--green);font-size:13px;letter-spacing:.04em;background:var(--cream-2)}

/* ---------- CTA ---------- */
.cta{border:1px solid var(--line-strong);background:var(--cream-2);padding:28px 22px;margin:30px 0;text-align:center}
.cta p{margin:.2em 0 1em;font-family:var(--serif);font-weight:600;color:var(--ink-strong);letter-spacing:.04em}
.btn{display:inline-block;background:var(--green);color:var(--dark-text);font-weight:700;font-size:14px;letter-spacing:.08em;padding:13px 34px;border-radius:2px;transition:.15s}
.btn:hover{background:var(--green-hover);color:var(--dark-text);text-decoration:none}
.btn.green{background:transparent;color:var(--green);border:1px solid var(--green)}
.btn.green:hover{background:var(--green);color:var(--dark-text)}
.placeholder{outline:2px dashed var(--gold);outline-offset:3px}

/* ---------- faq / tip ---------- */
.faq h3{background:var(--cream-2);border-radius:2px;padding:9px 14px;color:var(--ink-strong);font-family:var(--serif);font-weight:600;font-size:15px}
.faq p{margin:.4em 0 1.4em;padding-left:14px}
.tip{border:1px solid var(--chip-line);background:var(--cream-3);padding:14px 20px;margin:22px 0;font-size:13.5px;line-height:2}
.note{color:var(--sub);font-size:12px}

/* ---------- footer ---------- */
.site-footer{background:var(--dark);margin-top:40px}
.site-footer .inner{max-width:var(--maxw);margin:0 auto;padding:36px 20px 40px}
.site-footer .fbrand{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-family:var(--serif);font-weight:600;font-size:16px;color:var(--dark-text);letter-spacing:.05em}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;letter-spacing:.05em;margin-bottom:20px}
.site-footer a{color:var(--dark-icon)}
.site-footer .note{color:#8ba392;font-size:11px;line-height:1.9}