/* Smile Girls 共有スタイル（ダークテーマ・トップ画面に統一）
   2026-07-25 作成。全下層ページはこのファイルを読み込む。
   トップ(index.html)のデザイン言語（ダーク背景・明朝見出し・ピンク/ゴールド/エンバー）に合わせる。 */

:root{
  --bg:#0b0a0c; --bg2:#121014; --panel:#17141a;
  --ink:#ece7e3; --muted:#a49aa4; --line:#2c2731;
  --main:#e8455f; --ember:#ff8a5c; --gold:#c9a15a;
  --soft:rgba(232,69,95,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink); background:var(--bg); line-height:2.0;
}
::selection{background:var(--main);color:#fff}
a{color:var(--main)}

/* ---- header / nav ---- */
header{
  border-bottom:1px solid var(--line);
  background:rgba(11,10,12,.88);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:10;
}
.wrap{width:min(860px,calc(100% - 32px));margin:0 auto}
.nav{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  font-weight:700;font-size:20px;letter-spacing:.12em;color:var(--ink);text-decoration:none;
}
.brand em{font-style:normal;color:var(--main)}
.nav a{color:var(--muted);text-decoration:none;font-size:14px;margin-left:16px;transition:color .25s;letter-spacing:.04em}
.nav a:hover{color:var(--main)}

/* ---- crumb / hero ---- */
.crumb{font-size:13px;color:var(--muted);margin:18px 0 0}
.crumb a{color:var(--muted)}
.hero{
  padding:56px 0 16px;
  background:radial-gradient(ellipse 70% 60% at 82% 0%, rgba(232,69,95,.16), transparent 62%),
             linear-gradient(180deg,#0e0c10,var(--bg) 88%);
  border-bottom:1px solid var(--line);
}
.badge{
  display:inline-block;padding:6px 14px;border:1px solid rgba(232,69,95,.45);
  border-radius:999px;background:var(--soft);color:var(--main);
  font-size:13px;font-weight:600;letter-spacing:.08em;
}

/* ---- typography ---- */
h1{
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  font-size:clamp(26px,4.8vw,40px);line-height:1.4;margin:16px 0 12px;
  letter-spacing:.04em;color:#f6f1ec;font-weight:700;
}
.lead{font-size:16px;color:var(--muted);max-width:780px;letter-spacing:.03em}
.lead b{color:var(--ink);font-weight:600}
article{padding-bottom:18px}
article p,p{margin:0 0 1.05em;max-width:800px}
h2{
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  font-size:clamp(20px,3.2vw,27px);margin:44px 0 16px;line-height:1.5;
  letter-spacing:.05em;color:#f2ece7;padding-left:12px;border-left:4px solid var(--main);
}
h3{
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  font-size:19px;margin:30px 0 10px;color:var(--ember);letter-spacing:.05em;
}

/* ---- boxes / panels ---- */
.box,.promise{
  border:1px solid rgba(232,69,95,.32);
  background:linear-gradient(135deg,rgba(232,69,95,.10),rgba(23,20,26,.9) 55%);
  border-radius:10px;padding:20px 22px;margin:28px 0;
}
.quiet{
  border:1px solid var(--line);background:var(--panel);
  border-radius:10px;padding:18px 20px;margin:24px 0;color:var(--muted);
}
.note{color:var(--muted);font-size:14px}
.ren{
  border:1px solid var(--line);background:var(--panel);
  border-radius:10px;padding:22px 24px;margin:24px 0;
}

/* ---- lists ---- */
.rel{border-top:1px solid var(--line);padding-top:18px;margin-top:34px}
.rel h2{border:none;padding:0;font-size:18px;margin:0 0 10px}
.rel ul,.checklist{margin:0;padding-left:1.3em}
.rel li,.checklist li{margin:6px 0}
.checklist li::marker{color:var(--main)}

/* ---- cards ---- */
.cards,.cardlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0;padding-left:0;list-style:none}
.card{
  border:1px solid var(--line);border-radius:8px;padding:16px 18px;text-decoration:none;
  color:var(--ink);background:linear-gradient(145deg,rgba(232,69,95,.08),rgba(23,20,26,.92) 60%);
  transition:border-color .25s,transform .2s,background .25s;display:block;
}
.card:hover{border-color:rgba(232,69,95,.6);transform:translateY(-2px)}
.card strong{display:block;color:#f6f1ec;line-height:1.55;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.card span{display:block;color:var(--muted);font-size:13px;margin-top:5px;line-height:1.7}
.cardlist li{margin:0}
.cardlist a{display:block;color:var(--ink);text-decoration:none}

/* ---- profile table ---- */
.profile,.profile-table{border-collapse:collapse;margin:12px 0}
.profile th,.profile td,.profile-table th,.profile-table td{
  text-align:left;padding:9px 20px 9px 0;border-bottom:1px solid var(--line);font-size:15px;
}
.profile th,.profile-table th{color:var(--muted);font-weight:600;white-space:nowrap;letter-spacing:.06em}

/* ---- CTA / button ---- */
.cta{
  margin:36px 0;border:1px solid rgba(232,69,95,.35);
  background:linear-gradient(135deg,rgba(232,69,95,.12),rgba(23,20,26,.9) 55%);
  border-radius:10px;padding:24px;
}
.cta h2{border:none;padding:0;margin:0 0 8px}
.btn{
  display:inline-block;background:linear-gradient(100deg,var(--main),#c2334c);color:#fff;
  text-decoration:none;border-radius:6px;padding:12px 20px;font-weight:800;margin-top:8px;
  transition:filter .25s,transform .15s;
}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}

/* ---- footer ---- */
footer{padding:32px 0;border-top:1px solid var(--line);color:var(--muted);font-size:13px;margin-top:56px;background:var(--bg2)}
footer a{color:var(--muted)}

@media(max-width:720px){
  .cards,.cardlist{grid-template-columns:1fr}
  .nav{align-items:flex-start;flex-direction:column}
  .nav a{margin-left:0;margin-right:14px}
}