/* はじめての交際クラブ 下書き（2026-11-06）
   方向：生成りの地に、葡萄色と淡い若草色。角の丸い札と、番号つきの縦の道筋で「順番」を見せる。書体は端末の角ゴシック（外部の書体は読まない）。 */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#fbf6ef;--card:#fffdf9;--band:#e3eadf;--blush:#f4e6e6;--line:#e8ddd2;
  --ink:#2e2630;--muted:#5f5560;--accent:#8a3550;--accent-deep:#6e2640;--accent-ink:#fff;--sage:#4f6650;
  --sans:'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic',Meiryo,sans-serif;
  --m:clamp(18px,5vw,40px);
  --s-small:.875rem;
  --s-body:clamp(1rem,.97rem + .2vw,1.0625rem);
  --s-h1:clamp(1.75rem,1.3rem + 2.2vw,2.75rem);
  --s-h2:clamp(1.3125rem,1.15rem + .8vw,1.75rem);
  --r:18px;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--s-body);line-height:1.9;letter-spacing:.02em;overflow-x:hidden}
:lang(ja){word-break:keep-all;overflow-wrap:normal;line-break:strict}
.nb{white-space:nowrap}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--accent-deep)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--sage);outline-offset:3px}
ul,ol{list-style:none}

/* 広告表記：最上部の細い帯 */
.pr-bar{background:var(--blush);color:var(--accent-deep);font-size:var(--s-small);font-weight:600;text-align:center;padding:8px var(--m)}

/* 頭 */
.top{background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{max-width:1080px;margin:0 auto;padding:10px var(--m);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:48px;color:var(--ink);font-weight:700;font-size:1.25rem;text-decoration:none;letter-spacing:.08em}
.logo-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:8px 0 0 var(--sage)}
.logo-dot{margin-right:8px}
.gnav{display:flex;flex-wrap:wrap;gap:0 18px}
.gnav a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:var(--s-small);text-decoration:none}
.gnav a:hover{color:var(--accent)}

/* ヒーロー */
.hero{background:var(--band)}
.hero-in{max-width:1080px;margin:0 auto;padding:clamp(40px,8vw,88px) var(--m) clamp(32px,6vw,64px)}
.hero-kicker{display:inline-block;background:var(--card);color:var(--sage);font-size:var(--s-small);font-weight:700;padding:4px 14px;border-radius:999px;margin-bottom:18px}
.hero h1{font-size:var(--s-h1);line-height:1.4;letter-spacing:.04em;margin-bottom:18px}
.hero-lead{font-size:1.0625rem;max-width:40em}

.wrap{max-width:1080px;margin:0 auto;padding:0 var(--m) 72px}
h1,h2,h3{font-weight:700;line-height:1.45}
h2{font-size:var(--s-h2);margin:2.4em 0 .8em;padding-left:16px;border-left:5px solid var(--accent)}
p+p{margin-top:.35em}
.small{font-size:var(--s-small);color:var(--muted);margin-top:14px}
.note{font-size:var(--s-small);color:var(--muted)}
.stamp{font-size:var(--s-small);color:var(--muted);margin:14px 0 0}
.stamp-sep{margin:0 .5em}
article ul:not(.cards):not(.src):not(.foot-links) li,.page>ul li{position:relative;padding-left:1.2em}
article ul:not(.cards):not(.src) li::before{content:"";position:absolute;left:0;top:.8em;width:7px;height:7px;border-radius:50%;background:var(--sage)}
article ul:not(.cards):not(.src),.page>ol{margin:.6em 0}

/* 結論の札 */
.answer{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:var(--r);padding:20px 22px;margin:32px 0 8px}
.answer-h{font-size:var(--s-small);font-weight:700;color:var(--accent);letter-spacing:.12em;margin-bottom:6px}

/* おすすめ2社 */
.picks{display:grid;gap:20px}
@media (min-width:860px){.picks{grid-template-columns:1fr 1fr}}
.pick{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 22px}
.pick-rank{display:flex;align-items:center;gap:6px;color:var(--accent);font-weight:700;font-size:var(--s-small)}
.pick-rank span{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:1.125rem}
.pick-name{font-size:1.5rem;margin:10px 0 8px}
.pick-yomi{font-size:var(--s-small);color:var(--muted);font-weight:400;margin-left:4px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 8px}
.facts div{background:var(--bg);border-radius:12px;padding:10px 8px;text-align:center}
.facts dt{font-size:.75rem;color:var(--muted)}
.facts dd{font-weight:700;font-size:.9375rem;line-height:1.5}
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 28px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;letter-spacing:.04em}
.btn:hover{background:var(--accent-deep);color:var(--accent-ink)}
.btn-line{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.btn-line:hover{background:var(--blush);color:var(--accent-deep)}
.more{display:inline-flex;align-items:center;min-height:44px;font-size:var(--s-small)}

/* 番号つきの道筋 */
.steps{position:relative;margin:20px 0 12px}
.steps li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;padding-bottom:22px}
.steps li::after{content:"";position:absolute;left:21px;top:46px;bottom:4px;width:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--card);border:2px solid var(--accent);color:var(--accent);font-weight:700}
.step-h{font-weight:700;font-size:1.0625rem;padding-top:6px}

/* 表（スマホでは縦に積む） */
.tbl{margin:16px 0}
table.stack{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.stack th,table.stack td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.7}
table.stack thead th{background:var(--blush);color:var(--accent-deep);font-size:var(--s-small)}
table.stack tbody tr:last-child th,table.stack tbody tr:last-child td{border-bottom:0}
@media (max-width:719px){
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack th,table.stack td{display:block;width:100%}
  table.stack tr{border-bottom:1px solid var(--line);padding:10px 0}
  table.stack tbody tr:last-child{border-bottom:0}
  table.stack th,table.stack td{border:0;padding:4px 16px}
  table.stack tbody th{font-size:1.0625rem}
  table.stack td::before{content:attr(data-label);display:block;font-size:.75rem;color:var(--muted);font-weight:700}
}

/* 項目の札 */
.spec{display:grid;gap:10px;margin:16px 0}
@media (min-width:720px){.spec{grid-template-columns:1fr 1fr}}
.spec div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.spec dt{font-size:.8125rem;color:var(--sage);font-weight:700}
.spec dd{line-height:1.7}
.club{margin-top:40px}
.club-h{display:flex;align-items:center;gap:12px;border-left:0;padding-left:0}
.club-rank{display:inline-grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:1.0625rem}

/* 記事 */
.crumbs{font-size:var(--s-small);color:var(--muted);padding:16px 0 0;display:flex;flex-wrap:wrap;gap:0 8px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
.crumbs span{display:inline-flex;align-items:center;min-height:44px}
.page{max-width:760px}
.page h1{font-size:var(--s-h1);line-height:1.45;letter-spacing:.03em;margin-top:12px}
.page-kicker{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:var(--s-small);padding:2px 14px;border-radius:999px;margin-top:12px}
.qlist{counter-reset:q;margin:16px 0}
.qlist li{counter-increment:q;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px 14px 56px;position:relative;margin-bottom:10px}
.qlist li::before{content:"Q" counter(q);position:absolute;left:14px;top:14px;font-weight:700;color:var(--accent)}
.qlist .q{display:block;font-weight:700}
.qlist .a{display:block;color:var(--muted);font-size:.9375rem;margin-top:4px}
.faq div{border-top:1px solid var(--line);padding:14px 0}
.faq dt{font-weight:700}
.faq dd{color:var(--muted)}

/* 読む物の札 */
.cards{display:grid;gap:12px;margin-top:16px}
@media (min-width:720px){.cards{grid-template-columns:1fr 1fr}}
.cards a{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;text-decoration:none;color:var(--ink);min-height:44px}
.cards a:hover{border-color:var(--accent)}
.card-t{display:block;font-weight:700;color:var(--accent);margin-bottom:4px}
.card-d{display:block;font-size:.9375rem;color:var(--muted);line-height:1.7}

/* 出典・次に読む */
.src li{display:grid;gap:2px;padding:10px 0;border-bottom:1px dashed var(--line)}
.src-n{font-size:.8125rem;color:var(--muted)}
.src a{font-size:.875rem;word-break:break-all}
.nextup{background:var(--band);border-radius:var(--r);padding:20px 22px;margin-top:48px}
.nextup-h{font-weight:700;color:var(--sage);margin-bottom:6px}
.nextup li{padding:0}
.nextup li::before{display:none}
.nextup a{display:inline-flex;align-items:center;min-height:44px}

/* 足 */
.foot{background:var(--ink);color:#efe6ea;margin-top:24px}
.foot-in{max-width:1080px;margin:0 auto;padding:40px var(--m) 48px}
.foot-name{font-weight:700;font-size:1.125rem;letter-spacing:.08em;margin-bottom:8px}
.foot p{font-size:.9375rem}
.foot-links{display:flex;flex-wrap:wrap;gap:0 20px;margin:16px 0}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;color:#efe6ea}
.foot-small{font-size:var(--s-small);color:#c9bcc3}