/* =========================================================
   年の差ノート 共通スタイルシート
   このファイル1つを /css/style.css としてアップロードし、
   全ページからこれだけを読み込みます。
   デザインを直したい時は、このファイルだけ直せば全ページに反映されます。
   ========================================================= */

:root{
  --ink:#2B2033;
  --ink-soft:#5A4E63;
  --paper:#EFE8DD;
  --paper-deep:#E2D6C4;
  --paper-line:#CBBBA3;
  --gold:#AD7E2C;
  --gold-deep:#8C6620;
  --rose:#B96C77;
  --white:#FBF8F3;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New", sans-serif;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{
  font-family:"Shippori Mincho", serif;
  font-weight:600;
  letter-spacing:.02em;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px;}

/* ---------- Header(全ページ共通) ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(239,232,221,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--paper-line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;max-width:1160px;margin:0 auto;
}
.logo{
  font-family:"Shippori Mincho", serif;
  font-size:22px;font-weight:700;
  display:flex;align-items:baseline;gap:6px;
}
.logo small{
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:11px;color:var(--ink-soft);font-weight:500;
}
nav.primary{display:flex;gap:26px;font-size:14px;}
nav.primary a{color:var(--ink-soft);white-space:nowrap;}
nav.primary a:hover{color:var(--gold-deep);}
.header-actions{display:flex;align-items:center;gap:16px;}
.search-btn{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--paper-line);
  display:flex;align-items:center;justify-content:center;background:transparent;cursor:pointer;
}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;}
@media(max-width:880px){
  nav.primary{
    position:fixed;inset:66px 0 0 0;background:var(--paper);
    flex-direction:column;padding:24px 28px;gap:0;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    border-top:1px solid var(--paper-line);
  }
  nav.primary.open{opacity:1;transform:translateY(0);pointer-events:auto;}
  nav.primary a{padding:14px 0;border-bottom:1px solid var(--paper-line);font-size:16px;}
  .menu-toggle{display:block;}
}

/* ---------- カテゴリ配色(6色・カテゴリ番号と対応) ---------- */
.v1{background:linear-gradient(135deg,#D8C6A8,#AD7E2C);} /* ①基礎知識・データ */
.v2{background:linear-gradient(135deg,#D9AFB3,#B96C77);} /* ②リアルな実情・心理 */
.v3{background:linear-gradient(135deg,#C9BEDB,#7D6A96);} /* ③芸能人・有名人まとめ */
.v4{background:linear-gradient(135deg,#B7C4B0,#5F7A5A);} /* ④ドラマ・漫画・メディア */
.v5{background:linear-gradient(135deg,#CFCFC7,#8A8A80);} /* ⑤ネットの声・占い */
.v6{background:linear-gradient(135deg,#E8CB86,#AD7E2C);} /* ⑥婚活・出会い */

/* ---------- パンくずリスト ---------- */
.breadcrumb{
  max-width:1160px;margin:0 auto;padding:18px 28px 0;
  font-size:12.5px;color:var(--ink-soft);
}
.breadcrumb a:hover{color:var(--gold-deep);}
.breadcrumb .sep{margin:0 6px;color:var(--paper-line);}

/* ---------- 記事ヘッダー ---------- */
.article-head{max-width:820px;margin:0 auto;padding:28px 28px 8px;}
.article-head .cat-tag{
  display:inline-block;font-size:12px;color:var(--gold-deep);
  border:1px solid var(--gold-deep);border-radius:14px;padding:5px 14px;margin-bottom:18px;
}
.article-head h1{font-size:30px;line-height:1.55;margin:0 0 18px;}
.article-head .lead{font-size:15px;color:var(--ink-soft);margin:0 0 8px;}
.article-meta{font-size:12.5px;color:var(--ink-soft);border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);padding:12px 0;margin:18px 0 0;
  display:flex;gap:18px;flex-wrap:wrap;}

.article-eyecatch{
  max-width:960px;margin:32px auto;aspect-ratio:16/7;border-radius:2px;
  display:flex;align-items:flex-end;padding:22px;
}
.article-eyecatch .tag{background:rgba(251,248,243,.9);font-size:12px;padding:6px 12px;color:var(--ink);}

/* ---------- 目次 ---------- */
.toc{
  max-width:820px;margin:0 auto 40px;background:var(--white);
  border:1px solid var(--paper-line);padding:22px 26px;
}
.toc-title{font-size:13px;color:var(--ink-soft);margin:0 0 12px;}
.toc ol{margin:0;padding-left:20px;font-size:14px;}
.toc li{margin-bottom:8px;}
.toc a:hover{color:var(--gold-deep);}

/* ---------- 記事本文 ---------- */
.article-body{max-width:820px;margin:0 auto;padding:0 28px 60px;font-size:15.5px;}
.article-body h2{
  font-size:22px;margin:52px 0 18px;padding-top:6px;
  border-top:2px solid var(--ink);
}
.article-body h3{font-size:17px;margin:32px 0 12px;color:var(--ink);}
.article-body p{margin:0 0 20px;color:var(--ink);}
.article-body ul,.article-body ol{margin:0 0 20px;padding-left:22px;}
.article-body li{margin-bottom:8px;}
.article-body blockquote{
  margin:28px 0;padding:18px 22px;background:var(--white);
  border-left:3px solid var(--rose);font-size:14.5px;color:var(--ink-soft);
}

/* 本文中の内部リンクカード(あわせて読みたい・記事内埋め込み用) */
.inline-link{
  display:flex;gap:14px;align-items:center;margin:32px 0;padding:16px 18px;
  background:var(--white);border:1px solid var(--paper-line);
}
.inline-link .num{font-family:"Shippori Mincho",serif;color:var(--gold-deep);font-size:13px;flex-shrink:0;}
.inline-link a{font-size:14px;}
.inline-link a:hover{color:var(--gold-deep);}

/* ---------- 関連記事ブロック ---------- */
.related{max-width:960px;margin:0 auto;padding:20px 28px 70px;}
.related h2{font-size:20px;margin:0 0 24px;}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;}
.related-item{
  display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--paper-line);align-items:center;
}
.related-item .thumb{width:72px;height:56px;flex-shrink:0;border-radius:2px;}
.related-item .rt{font-size:13.5px;}
.related-item .rt span{display:block;font-size:11px;color:var(--ink-soft);margin-top:4px;}
@media(max-width:720px){.related-grid{grid-template-columns:1fr;}}

/* ---------- CTA帯(トップページと共通) ---------- */
.cta-band{
  background:linear-gradient(120deg,#B9852F,#8C6620);
  color:var(--white);padding:56px 28px;
}
.cta-inner{
  max-width:1160px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.cta-inner h3{font-size:22px;margin:0 0 8px;color:var(--white);}
.cta-inner p{margin:0;font-size:13.5px;color:#F3E4C4;max-width:36em;}
.btn-cta{
  background:var(--ink);color:var(--white);padding:15px 32px;font-size:14.5px;
  font-weight:700;border-radius:2px;flex-shrink:0;
}

/* ---------- トップページ:ヒーロー ---------- */
.hero{display:grid;grid-template-columns:1.35fr 1fr;min-height:560px;}
.hero-left{
  background:var(--ink);color:var(--white);
  padding:96px 60px 72px 28px;
  display:flex;flex-direction:column;justify-content:center;
  max-width:1160px;margin:0 auto;width:100%;
}
.hero-left .eyebrow{
  font-size:13px;color:#C9A2AB;margin-bottom:22px;
  border-left:2px solid var(--rose);padding-left:12px;
}
.hero-left h1{font-size:44px;line-height:1.5;margin:0 0 26px;color:var(--white);}
.hero-left h1 em{font-style:normal;color:var(--gold);}
.hero-left p{font-size:15.5px;color:#D9CFDD;max-width:34em;margin:0 0 34px;}
.hero-cta{display:inline-flex;gap:14px;align-items:center;}
.btn-solid{background:var(--gold);color:var(--ink);padding:14px 30px;font-size:14.5px;font-weight:700;border-radius:2px;}
.btn-ghost{border:1px solid #6E6178;color:var(--white);padding:14px 26px;font-size:14.5px;border-radius:2px;}
.hero-right{background:var(--paper-deep);display:flex;align-items:center;justify-content:center;padding:48px 36px;}
.gap-diagram{width:100%;max-width:320px;}
.gap-diagram .row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px;}
.gap-age{font-family:"Shippori Mincho",serif;font-size:64px;line-height:1;color:var(--ink);}
.gap-age.old{color:var(--gold-deep);}
.gap-age.young{color:var(--rose);}
.gap-label{font-size:12px;color:var(--ink-soft);margin-top:6px;}
.gap-bridge{position:relative;height:2px;background:var(--paper-line);margin:8px 0 18px;}
.gap-bridge span{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--paper-deep);padding:0 10px;font-size:12px;color:var(--ink-soft);}
.gap-note{font-size:13px;color:var(--ink-soft);border-top:1px solid var(--paper-line);padding-top:16px;}
@media(max-width:880px){
  .hero{grid-template-columns:1fr;}
  .hero-left{padding:52px 24px 44px;}
  .hero-left h1{font-size:30px;}
  .hero-right{padding:40px 24px;}
}

/* ---------- トップページ:カテゴリレール ---------- */
.rail{background:var(--white);border-bottom:1px solid var(--paper-line);overflow-x:auto;white-space:nowrap;}
.rail-inner{display:flex;max-width:1160px;margin:0 auto;}
.rail a{padding:18px 26px;font-size:13.5px;color:var(--ink-soft);border-right:1px solid var(--paper-line);display:flex;gap:8px;align-items:baseline;flex-shrink:0;}
.rail a:hover{color:var(--gold-deep);background:var(--paper);}
.rail a .num{font-family:"Shippori Mincho",serif;color:var(--gold-deep);font-size:15px;}

/* ---------- トップページ:カテゴリ紹介セクション ---------- */
.cat-section{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:76px 28px;max-width:1160px;margin:0 auto;align-items:center;}
.cat-section.rev{grid-template-columns:1fr 1fr;}
.cat-section.rev .cat-visual{order:2;}
.cat-visual{aspect-ratio:4/3;border-radius:2px;display:flex;align-items:flex-end;padding:26px;position:relative;overflow:hidden;}
.cat-visual .tag{background:rgba(251,248,243,.88);color:var(--ink);font-size:12px;padding:6px 12px;border-radius:1px;}
.cat-num{font-family:"Shippori Mincho",serif;font-size:15px;color:var(--gold-deep);display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.cat-num::after{content:"";flex:1;height:1px;background:var(--paper-line);}
.cat-body h2{font-size:26px;margin:0 0 10px;}
.cat-desc{font-size:14px;color:var(--ink-soft);margin:0 0 26px;max-width:34em;}
.article-list{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--paper-line);}
.article-list li{border-bottom:1px solid var(--paper-line);}
.article-list a{display:flex;justify-content:space-between;gap:16px;padding:15px 0;font-size:14.5px;}
.article-list a:hover{color:var(--gold-deep);}
.article-list a .kw{font-size:12px;color:var(--ink-soft);flex-shrink:0;}
.cat-more{font-size:13.5px;color:var(--ink-soft);border-bottom:1px solid var(--ink-soft);padding-bottom:2px;display:inline-block;}
.cat-more:hover{color:var(--gold-deep);border-color:var(--gold-deep);}
@media(max-width:880px){
  .cat-section, .cat-section.rev{grid-template-columns:1fr;gap:26px;padding:52px 24px;}
  .cat-section.rev .cat-visual{order:0;}
}

/* ---------- トップページ:ランキング ---------- */
.ranking{background:var(--ink);color:var(--white);padding:80px 28px;}
.ranking-inner{max-width:1160px;margin:0 auto;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:40px;flex-wrap:wrap;gap:12px;}
.section-head h2{color:var(--white);font-size:26px;margin:0;}
.section-head p{color:#B7A9C2;font-size:13px;margin:0;}
.rank-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;}
.rank-item{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid #453A50;align-items:baseline;}
.rank-item .rk{font-family:"Shippori Mincho",serif;font-size:34px;color:var(--gold);width:44px;flex-shrink:0;}
.rank-item .rt{font-size:14.5px;color:#EDE6F0;}
.rank-item .rt span{display:block;font-size:11.5px;color:#9C8CA8;margin-top:4px;}
@media(max-width:720px){.rank-grid{grid-template-columns:1fr;}}

/* ---------- トップページ:タグクラウド ---------- */
.tags{padding:70px 28px;max-width:1160px;margin:0 auto;}
.tags h2{font-size:22px;margin:0 0 22px;}
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;}
.tag-cloud a{font-size:13px;padding:8px 16px;border:1px solid var(--paper-line);border-radius:16px;color:var(--ink-soft);}
.tag-cloud a:hover{border-color:var(--gold-deep);color:var(--gold-deep);}

/* ---------- フッター(全ページ共通) ---------- */
footer{background:var(--paper-deep);border-top:1px solid var(--paper-line);padding:56px 28px 30px;}
.footer-inner{max-width:1160px;margin:0 auto;}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(2,1fr);gap:36px;padding-bottom:36px;}
.footer-grid h4{font-size:13px;margin:0 0 16px;color:var(--ink-soft);}
.footer-grid ul{list-style:none;margin:0;padding:0;font-size:13.5px;}
.footer-grid li{margin-bottom:11px;}
.footer-brand .logo{margin-bottom:14px;}
.footer-brand p{font-size:13px;color:var(--ink-soft);max-width:26em;}
.footer-bottom{
  border-top:1px solid var(--paper-line);padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:12px;color:var(--ink-soft);
}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr;}}