/* 身バレしない交際クラブ選び 下書き（2026-11-06）
   方向：夜の青緑の覆いと、霧の地。ゴシックの読み物。印は丸い錠の形（CSSだけ）。ボタンだけ紅梅色。 */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --night:#16323a;--night2:#21454f;--mist:#eef2f1;--card:#ffffff;--line:#d3dddb;
  --ink:#1d2a2e;--muted:#4f6166;--rose:#b8475e;--rose-ink:#fff;--soft:#dfe9e7;--yes:#1f6b5c;--no:#8a979a;
  --font:'Zen Kaku Gothic New','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --m:clamp(18px,5vw,44px);
  --s-small:.875rem;
  --s-body:clamp(1rem,.97rem + .2vw,1.0625rem);
  --s-lead:clamp(1.0625rem,1rem + .4vw,1.25rem);
  --s-h1:clamp(1.625rem,1.25rem + 1.8vw,2.5rem);
  --s-h2:clamp(1.25rem,1.1rem + .8vw,1.625rem);
}
html{-webkit-text-size-adjust:100%}
body{background:var(--mist);color:var(--ink);font-family:var(--font);font-size:var(--s-body);line-height:1.9;overflow-x:hidden;font-weight:400}
:lang(ja){word-break:keep-all;overflow-wrap:normal;line-break:strict}
.nb{white-space:nowrap}
a{color:var(--night2);text-underline-offset:.25em;text-decoration-thickness:1px}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
strong,b,h1,h2,h3,.btn,.rk-name,.score b{font-weight:700}

/* 広告表記 */
.pr{background:var(--night);color:#e7efed;font-size:var(--s-small);padding:10px var(--m);line-height:1.6}
.pr a{color:#e7efed;margin-left:.8em;display:inline-block;padding:4px 0}

/* 頭 */
.top{background:var(--night);color:#fff;padding:14px var(--m) 16px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.12)}
.logo{color:#fff;text-decoration:none;font-weight:700;font-size:1.125rem;letter-spacing:.06em;display:inline-flex;align-items:center;gap:10px;min-height:44px}
.logo::before{content:"";width:18px;height:22px;border:2px solid #9fc7bf;border-radius:9px 9px 4px 4px;box-shadow:inset 0 -9px 0 #9fc7bf}
.top nav{display:flex;flex-wrap:wrap;gap:0 18px}
.top nav a{color:#d7e6e3;text-decoration:none;font-size:.9375rem;display:inline-flex;align-items:center;min-height:44px}

/* 冒頭 */
.cover{background:linear-gradient(180deg,var(--night) 0,var(--night2) 100%);color:#fff;padding:28px var(--m) 40px}
.cover .kick{color:#9fc7bf;font-size:var(--s-small);letter-spacing:.08em}
.cover h1{font-size:var(--s-h1);line-height:1.45;margin:10px 0 18px;max-width:22em}
.verdict{background:var(--card);color:var(--ink);border-radius:14px;padding:20px 20px 22px;max-width:640px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.verdict .v-h{display:inline-block;background:var(--soft);color:var(--yes);font-size:var(--s-small);font-weight:700;border-radius:999px;padding:2px 12px;margin-bottom:8px}
.verdict .v-main{font-size:var(--s-lead);line-height:1.7;font-weight:700}
.verdict .v-sub{color:var(--muted);font-size:.9375rem;margin-top:8px}
.verdict .btns{margin-top:16px}
.cover .after{color:#cfe0dd;margin-top:20px;max-width:36em;font-size:.9375rem}

/* ボタン */
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 20px;border-radius:999px;background:var(--rose);color:var(--rose-ink);text-decoration:none;font-size:1rem;line-height:1.4;text-align:center}
.btn.sub{background:transparent;color:var(--night2);box-shadow:inset 0 0 0 1.5px var(--night2)}
.btn.uni{background:var(--night2)}
.small{font-size:var(--s-small);color:var(--muted);margin-top:10px;line-height:1.7}

/* 本文の枠 */
.wrap{max-width:780px;margin:0 auto;padding:36px var(--m)}
.wrap>h2,.sec-h{font-size:var(--s-h2);line-height:1.5;margin:0 0 14px;padding-left:14px;border-left:4px solid var(--rose)}
.wrap>p{margin-bottom:12px}
.band{background:var(--card)}

/* 7項目 */
.seven{list-style:none;display:grid;gap:10px;margin-top:6px}
.seven li{background:var(--card);border-radius:12px;padding:14px 16px 14px 58px;position:relative}
.band .seven li{background:var(--mist)}
.seven li::before{content:attr(data-n);position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--night2);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9375rem}
.seven .s-h{font-weight:700}
.seven .s-d{color:var(--muted);font-size:.9375rem;line-height:1.75}

/* 順位のカード */
.ranks{list-style:none;display:grid;gap:14px}
.rk{background:var(--card);border-radius:14px;padding:18px 18px 20px;border:1px solid var(--line)}
.rk-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rk-no{font-size:2rem;font-weight:700;color:var(--rose);line-height:1}
.rk-no small{font-size:.875rem;margin-left:2px}
.rk-name{font-size:1.25rem}
.score{display:flex;align-items:center;gap:10px;margin:10px 0 8px;flex-wrap:wrap}
.score b{color:var(--yes)}
.dots{display:flex;gap:5px}
.dots i{width:14px;height:14px;border-radius:50%;background:var(--line);display:block}
.dots i.on{background:var(--yes)}
.rk p{margin-bottom:6px}
.rk .btns{margin-top:12px}
.rk.low{background:transparent;border-style:dashed}

/* 記事の入口 */
.reads{list-style:none;display:grid;gap:10px}
.reads a{display:block;background:var(--card);border-radius:12px;padding:14px 18px;text-decoration:none;color:var(--ink);min-height:44px}
.reads .r-t{font-weight:700;display:block}
.reads .r-d{color:var(--muted);font-size:.875rem}

/* 表 */
.tbl{margin:14px 0 18px}
table{border-collapse:collapse;width:100%;background:var(--card);border-radius:12px;overflow:hidden;font-size:.9375rem}
th,td{padding:11px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{background:var(--night2);color:#fff;font-size:.875rem}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td,table.stack th{display:block;width:100%}
  table.stack tr{border-bottom:1px solid var(--line);padding:8px 0}
  table.stack td,table.stack th{border:0;padding:4px 14px}
  table.stack td::before{content:attr(data-label);display:block;font-size:.8125rem;color:var(--muted);font-weight:700}
}

/* 項目ごとの比べ */
.item{background:var(--card);border-radius:14px;padding:18px;margin-bottom:14px}
.item h3{font-size:1.0625rem;line-height:1.6;margin-bottom:10px}
.item ul{list-style:none;display:grid;gap:8px}
.item li{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start}
.mk{display:inline-flex;align-items:center;justify-content:center;min-width:3.6em;border-radius:999px;font-size:.8125rem;font-weight:700;padding:1px 8px;margin-top:3px}
.mk.y{background:var(--soft);color:var(--yes)}
.mk.n{background:#edf0f0;color:var(--no)}
.item .who{font-weight:700}
.item .what{grid-column:2;color:var(--muted);font-size:.9375rem;line-height:1.75}

/* 記事 */
.doc{max-width:740px;margin:0 auto;padding:22px var(--m) 40px}
.crumbs{font-size:.8125rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted);display:inline-block;padding:6px 0}
.crumbs .sep{margin:0 .5em}
.doc h1{font-size:var(--s-h1);line-height:1.45;margin-bottom:8px}
.stamp{font-size:.8125rem;color:var(--muted);margin-bottom:18px}
.lead{background:var(--card);border-radius:14px;padding:16px 18px;margin-bottom:24px;border-left:5px solid var(--rose)}
.lead .l-h{font-size:var(--s-small);font-weight:700;color:var(--rose);margin-bottom:4px}
.doc h2{font-size:var(--s-h2);line-height:1.5;margin:30px 0 12px;padding-left:14px;border-left:4px solid var(--night2)}
.doc p{margin-bottom:12px}
.doc ul,.doc ol{margin:0 0 16px 1.3em}
.doc li{margin-bottom:6px}
.asks{list-style:none;margin:12px 0 18px!important;display:grid;gap:10px}
.asks li{background:var(--card);border-radius:12px;padding:14px 16px 14px 54px;position:relative;margin:0!important}
.asks li::before{content:"";position:absolute;left:16px;top:17px;width:20px;height:24px;border:2px solid var(--night2);border-radius:10px 10px 4px 4px;box-shadow:inset 0 -10px 0 var(--soft)}
.asks .a-h{font-weight:700}
.asks .a-d{color:var(--muted);font-size:.9375rem;line-height:1.75}
.next{background:var(--soft);border-radius:14px;padding:16px 18px;margin-top:30px}
.next h2{margin:0 0 6px!important;border:0!important;padding:0!important;font-size:1.0625rem!important}
.next ul{margin:0 0 0 1.2em!important}
.next a{display:inline-block;padding:6px 0}
.src{font-size:.875rem;list-style:none;margin-left:0!important}
.src li{margin-bottom:10px;line-height:1.6}
.src .src-n{display:block;font-weight:700}
.src a{overflow-wrap:anywhere;word-break:break-all;display:inline-block;padding:4px 0}

/* よくある質問 */
details{background:var(--card);border-radius:12px;margin-bottom:10px;padding:0 16px}
summary{cursor:pointer;font-weight:700;min-height:48px;display:flex;align-items:center;padding:10px 0;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋";margin-left:auto;padding-left:12px;color:var(--rose)}
details[open] summary::after{content:"－"}
details p{padding:0 0 14px}

/* 足 */
.foot{background:var(--night);color:#d7e6e3;padding:30px var(--m) 36px;margin-top:20px}
.foot .f-name{font-weight:700;color:#fff;font-size:1.0625rem;margin-bottom:6px}
.foot p{font-size:.9375rem;max-width:40em}
.foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 20px;margin:14px 0}
.foot a{color:#d7e6e3;display:inline-flex;min-height:44px;align-items:center}
.foot .imp{font-size:.8125rem;color:#a9c1bd}