/* =================================================================
   貞操研究所 — 共有スタイル（全ページ共通）
   スティールブルー＋シルバー / チャコール地
   新規ページは <link rel="stylesheet" href="style.css"> を読むだけ
   ================================================================= */
:root{
  --bg:#0b0d10; --panel:#111419; --panel2:#0e1216;
  --ink:#e9edf3; --dim:#aab2bd; --faint:#6b7380;
  --steel:#8ab0d8; --steel-deep:#4f7bab; --line:rgba(255,255,255,.12);
  --serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;
  --lat:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%, #171c22 0%, rgba(23,28,34,0) 60%), var(--bg);
  color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.85; letter-spacing:.02em; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:780px; margin:0 auto; padding:28px 16px 56px}
a{color:var(--steel); text-decoration:none}
a:hover{color:#bcd6f0}

/* 金属シルバーの文字（タイトル・ロゴ共通） */
.metal{
  background:linear-gradient(180deg,#f4f7fb 0%,#c6cdd8 46%,#8b93a0 56%,#eef2f8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --- 上部バー / サイトヘッダ --- */
.topbar{display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:.22em; color:var(--faint); text-transform:uppercase}
.topbar a{color:var(--faint)} .topbar a:hover{color:var(--steel)}

.site-head{display:flex; justify-content:space-between; align-items:center;
  padding:14px 0 16px; border-bottom:1px solid var(--line)}
.site-head .wm{font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:.04em}
.site-head nav{display:flex; gap:18px; font-family:var(--lat);
  letter-spacing:.2em; text-transform:uppercase; font-size:11px}
.site-head nav a{color:var(--faint)} .site-head nav a:hover{color:var(--steel)}

/* --- ヒーロー（TOP） --- */
.hero{text-align:center; padding:40px 0 10px}
.overline{font-family:var(--lat); font-style:italic; letter-spacing:.42em;
  text-transform:uppercase; font-size:12px; color:var(--steel); margin:0 0 18px; padding-left:.42em}
.title{font-family:var(--serif); font-weight:600; font-size:clamp(30px,7vw,52px);
  line-height:1.25; margin:0; text-shadow:0 1px 0 rgba(255,255,255,.04)}
.subtitle{font-family:var(--lat); font-style:italic; color:var(--dim);
  font-size:14px; letter-spacing:.08em; margin:16px 0 0}

/* --- 画像枠（金属縁） --- */
.frame{margin:30px auto 8px; width:min(420px,92%); aspect-ratio:16/7;
  border:1px solid var(--line); border-radius:3px;
  background:linear-gradient(145deg,#1b2026,#0d1013) padding-box,
    linear-gradient(145deg,#3a434e,#0c0e11 40%,#2d353f) border-box;
  display:flex; align-items:center; justify-content:center; color:var(--faint);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 34px rgba(0,0,0,.5); overflow:hidden}
.frame img{width:100%; height:100%; object-fit:cover; display:block}
/* 全体表示の写真枠（アスペクト保持・金属縁） */
.photo{margin:26px auto 6px; max-width:440px; width:92%; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 34px rgba(0,0,0,.5)}
.photo img{width:100%; height:auto; display:block}
.photo.narrow{max-width:340px}

/* --- 一日のスケジュール --- */
.sched{max-width:680px; margin:10px auto 0}
.sched .row{display:grid; grid-template-columns:62px 1fr; gap:16px; padding:11px 0;
  border-top:1px solid var(--line)}
.sched .row:first-child{border-top:0}
.sched .t{font-family:"SFMono-Regular",Consolas,monospace; color:var(--steel);
  font-size:12.5px; letter-spacing:.04em; padding-top:2px}
.sched .a{color:var(--dim); font-size:13.5px; line-height:1.85}
.sched .a b{color:var(--ink); font-weight:600}
.sched .a .note{display:block; color:var(--faint); font-size:12px; margin-top:3px}

.counter{font-family:"SFMono-Regular",Consolas,monospace; font-size:11px;
  letter-spacing:.28em; color:var(--faint); text-align:center; margin:14px 0 0}
.counter b{color:var(--steel); font-weight:600}

/* --- 区切り（◆） --- */
.rule{display:flex; align-items:center; gap:14px; margin:40px 0}
.rule::before,.rule::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
.rule i{color:var(--steel-deep); font-style:normal; font-size:10px; transform:rotate(45deg)}

.intro{text-align:center; color:var(--dim); line-height:2.1; font-size:15px}
.intro .lead{color:var(--ink)}

/* --- メニュー格子 --- */
.sec-label{font-family:var(--lat); font-style:italic; letter-spacing:.3em;
  text-transform:uppercase; font-size:11px; color:var(--faint); text-align:center; margin:0 0 20px}
.nav{display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.nav a{display:flex; flex-direction:column; gap:3px; padding:16px 18px;
  background:var(--panel); transition:background .18s}
.nav a:hover{background:#151b22}
.nav .en{font-family:var(--lat); letter-spacing:.24em; text-transform:uppercase;
  font-size:11px; color:var(--steel)}
.nav .jp{color:var(--ink); font-size:14px}

/* --- 警告 / ゲート --- */
.warn{margin:34px 0 0; border:1px solid var(--line); border-left:2px solid var(--steel-deep);
  background:var(--panel2); border-radius:3px; padding:18px 20px}
.warn .head{font-family:var(--lat); letter-spacing:.3em; text-transform:uppercase;
  font-size:11px; color:var(--steel); margin:0 0 8px}
.warn p{margin:0; color:var(--dim); font-size:12.5px; line-height:1.9}
.gate{display:flex; gap:10px; justify-content:center; margin:20px 0 0}
.gate a{border:1px solid var(--line); border-radius:3px; padding:9px 26px;
  font-family:var(--lat); letter-spacing:.22em; text-transform:uppercase; font-size:11px}
.gate a.enter{color:var(--ink); border-color:var(--steel-deep)}
.gate a.enter:hover{background:var(--steel-deep); color:#fff}
.gate a.exit{color:var(--faint)}

/* --- 記事ページ --- */
.crumb{font-family:var(--lat); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); margin:26px 0 0}
.crumb a{color:var(--faint)} .crumb a:hover{color:var(--steel)}
.page-title{text-align:center; padding:24px 0 10px}
.page-title .overline{margin-bottom:12px}
.page-title h1{font-family:var(--serif); font-weight:600; font-size:clamp(24px,5vw,36px);
  margin:0; line-height:1.3}
.article{max-width:680px; margin:8px auto 0}
.article h2{font-size:19px; font-weight:600; color:var(--ink); margin:40px 0 16px;
  padding-left:14px; border-left:2px solid var(--steel-deep); line-height:1.4}
.article h3{font-family:var(--lat); letter-spacing:.14em; text-transform:uppercase;
  font-size:12px; color:var(--steel); margin:28px 0 8px}
.article p{color:var(--dim); margin:0 0 17px; line-height:1.98}
.article strong{color:var(--ink); font-weight:600}
.article ul,.article ol{color:var(--dim); margin:0 0 17px; padding-left:1.3em}
.article li{margin:7px 0}
.article .figure{margin:26px 0; border:1px solid var(--line); border-radius:3px;
  background:var(--panel); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:11px; letter-spacing:.2em; text-transform:uppercase}
.noimg{max-width:440px; width:92%; margin:26px auto 24px; border:1px dashed var(--line); border-radius:3px;
  background:var(--panel); aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:9px}
.noimg .tag{font-family:var(--lat); letter-spacing:.34em; font-size:12px; color:var(--faint); text-transform:uppercase}
.noimg .sub{font-size:11px; color:var(--faint); letter-spacing:.05em}
.noimg .sub a{color:var(--steel)}
.wip{max-width:680px; margin:16px auto 0; padding:9px 15px; border:1px dashed #a14c45;
  border-radius:3px; background:var(--panel); color:#dcb45a; font-size:12px; letter-spacing:.03em; line-height:1.7}
.wip .lbl{color:#ea5a4e; font-weight:600; letter-spacing:.14em; margin-right:12px; font-size:12px}
.article h2.cat{border:0; padding:0; text-align:center; font-size:18px; color:var(--ink); margin:36px 0 14px; letter-spacing:.1em}
.article h2.cat a{color:var(--ink)}
.article h2.cat .ov{font-family:var(--lat); font-size:11px; letter-spacing:.14em; color:var(--faint); margin-left:12px; font-weight:400; text-transform:none}
.article .caption{font-size:11px; color:var(--faint); text-align:center; margin:8px 0 0; letter-spacing:.06em}
.photo + .caption{font-size:11px; color:var(--faint); text-align:center; margin:9px auto 28px; letter-spacing:.06em; max-width:440px}
.article .lead-note{color:var(--ink); font-size:14.5px; line-height:1.95; margin:0 0 22px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.article .reasons{line-height:2.15}
.article .reasons b{color:var(--ink)}
.article hr.brk{border:0; border-top:1px solid var(--line); width:90px; margin:34px auto}
.caption .prod{display:inline-block; margin-top:5px; color:var(--steel); letter-spacing:.09em; font-size:11px}
.catch{text-align:center; margin:34px auto 26px; max-width:600px}
.catch .jp{color:var(--ink); font-size:23px; font-weight:600; letter-spacing:.16em; line-height:1.78; margin:0}
.catch .en{color:var(--steel); font-family:var(--lat); font-style:italic; font-size:12.5px; letter-spacing:.2em; margin:14px 0 0}
.catch .en::before{content:"—— "; color:var(--faint)}
.catch .en::after{content:" ——"; color:var(--faint)}
.callout{border-left:2px solid var(--steel); background:var(--panel2); border-radius:3px;
  padding:16px 18px; margin:24px 0; color:var(--dim); font-size:13.5px; line-height:1.9}
.callout .lbl{font-family:var(--lat); letter-spacing:.24em; text-transform:uppercase;
  font-size:10px; color:var(--steel); display:block; margin-bottom:6px}

/* --- フッター --- */
.foot{margin-top:40px; display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px; flex-wrap:wrap; color:var(--faint); font-size:11px; letter-spacing:.06em}
.banner{width:180px; height:46px; border:1px solid var(--line); border-radius:3px;
  background:var(--panel); display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:10px; letter-spacing:.18em; text-transform:uppercase}
.foot .upd{font-family:var(--lat); font-style:italic; text-align:right}
.backtop{text-align:center; margin:30px 0 0}
.backtop a{font-family:var(--lat); letter-spacing:.2em; text-transform:uppercase; font-size:11px; color:var(--faint)}
.backtop a:hover{color:var(--steel)}
.foot .contact{margin-top:10px; color:var(--faint); font-size:10.5px; letter-spacing:.04em}
.foot .contact a{color:var(--steel-deep)} .foot .contact a:hover{color:var(--steel)}

/* --- 更新履歴 / クレジット --- */
.news{border:1px solid var(--line); border-radius:4px; background:var(--panel); padding:16px 20px; margin:0}
.news h4{margin:0 0 10px; font-size:13px; color:var(--ink); font-weight:600; display:flex; gap:10px; align-items:baseline}
.news h4 .en{font-family:var(--lat); letter-spacing:.24em; text-transform:uppercase; font-size:11px; color:var(--steel)}
.news ul{list-style:none; margin:0; padding:0}
.news li{color:var(--dim); font-size:13px; padding:6px 0; border-top:1px solid var(--line); display:flex; gap:14px}
.news li:first-child{border-top:0}
.news time{font-family:"SFMono-Regular",Consolas,monospace; font-size:11px; letter-spacing:.1em; color:var(--steel); flex:0 0 auto}
.credit{margin-top:10px; color:var(--faint); font-size:10.5px; letter-spacing:.04em; line-height:1.7}

/* --- NEW バッジ（新規更新マーク・レトロ） --- */
.badge{display:inline-block; font-family:var(--lat); font-size:8.5px; letter-spacing:.12em; font-weight:700;
  font-style:normal; text-transform:uppercase; vertical-align:middle; padding:1px 5px; margin-left:7px;
  border-radius:2px; line-height:1.5; color:#fff; background:#c0414c}
@keyframes blink{50%{opacity:.3}}
.badge.blink{animation:blink 1.1s steps(1,end) infinite}
@media (prefers-reduced-motion:reduce){ .badge.blink{animation:none} }

/* --- ことわり（注記） --- */
.notice{max-width:660px; margin:0 auto; text-align:center; color:var(--faint); font-size:12px; line-height:2}
.notice .lbl{font-family:var(--lat); font-style:italic; letter-spacing:.34em; text-transform:uppercase; font-size:10px; color:var(--steel); display:block; margin-bottom:12px}
.notice em{color:var(--dim); font-style:normal}

/* --- メーカー／ショップ カード --- */
.makers{display:grid; gap:14px; margin:8px auto 0; max-width:680px}
.maker{border:1px solid var(--line); border-radius:4px; background:var(--panel);
  padding:16px 18px; display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:start}
.maker .ban{width:120px; height:60px; border:1px solid var(--line); border-radius:3px;
  background:var(--panel2); display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:9px; letter-spacing:.14em; text-transform:uppercase; text-align:center; overflow:hidden}
.maker .ban img{width:100%; height:100%; object-fit:contain}
.maker .body h3{margin:0 0 4px; font-size:15px; color:var(--ink); font-weight:600;
  font-family:var(--sans); letter-spacing:.02em; text-transform:none}
.maker .body .en{font-family:var(--lat); font-style:italic; color:var(--steel); font-size:11px; letter-spacing:.1em}
.maker .body p{margin:6px 0 10px; color:var(--dim); font-size:12.5px; line-height:1.85}
.maker .meta{list-style:none; margin:0; padding:0; font-size:11.5px}
.maker .meta li{padding:3px 0; display:flex; gap:10px; border-top:1px solid var(--line)}
.maker .meta li:first-child{border-top:0}
.maker .meta .k{flex:0 0 76px; color:var(--faint); font-family:var(--lat); letter-spacing:.1em; text-transform:uppercase; font-size:10px; padding-top:1px}
.maker .meta .v{color:var(--dim)} .maker .meta a{color:var(--steel)}
.maker .meta .tbd{color:var(--faint); font-style:italic}
@media(max-width:560px){ .maker{grid-template-columns:1fr} .maker .ban{width:100%} }

/* --- フェチ一覧（相性の良いフェチ） --- */
.deck{display:grid; gap:12px; margin:8px auto 0; max-width:680px}
.deck .item{border:1px solid var(--line); border-left:2px solid var(--steel-deep);
  border-radius:3px; background:var(--panel2); padding:14px 18px}
.deck .item h3{margin:0 0 5px; font-family:var(--sans); text-transform:none; letter-spacing:.02em;
  font-size:14.5px; color:var(--ink); font-weight:600; display:flex; gap:10px; align-items:baseline}
.deck .item h3 .en{font-family:var(--lat); font-style:italic; font-size:10.5px; color:var(--steel); letter-spacing:.14em}
.deck .item p{margin:0; color:var(--dim); font-size:12.5px; line-height:1.9}

/* --- 入口ページ専用 --- */
.door{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.door .card{max-width:480px; width:100%; text-align:center; border:1px solid var(--line);
  border-radius:4px; padding:44px 30px 34px; background:linear-gradient(180deg,#11151a,#0d1014);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.6)}
.door .logo{font-family:var(--serif); font-weight:600; font-size:clamp(34px,10vw,52px); line-height:1.1; margin:0}
.door .en{font-family:var(--lat); font-style:italic; color:var(--dim); font-size:13px; letter-spacing:.14em; margin:12px 0 0}
.door .note{color:var(--faint); font-size:11px; letter-spacing:.06em; margin:22px 0 0}

@media(max-width:560px){
  .nav{grid-template-columns:1fr}
  .foot{justify-content:center; text-align:center} .foot .upd{text-align:center}
  .site-head{flex-direction:column; gap:10px} .site-head nav{gap:14px}
}

/* --- 88x31 バナー / 掲示板リンク --- */
.bnr{display:inline-block; line-height:0} .bnr img{display:block}
.boardlink{text-align:center; margin:10px 0 0; font-family:var(--lat); letter-spacing:.24em; font-size:12px}
.boardlink a{color:var(--steel); border:1px solid var(--line); border-radius:3px; padding:6px 14px; display:inline-block}
.boardlink a:hover{color:#bcd6f0; border-color:var(--steel-deep)}
.boardlink span{color:var(--steel-deep); font-size:9px}
/* --- 掲示板 --- */
.bbs-form{border:1px solid rgba(138,176,216,.28); border-radius:6px; background:#1a212b; padding:18px 20px; margin:24px 0;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)}
.bbs-form label{display:block; font-size:12px; color:#c3ccd7; margin:0 0 5px}
.bbs-form input[type=text], .bbs-form textarea{width:100%; background:#0d1116; color:var(--ink); border:1px solid rgba(255,255,255,.22);
  border-radius:4px; padding:9px 11px; font:inherit; font-size:14px; margin:0 0 14px}
.bbs-form input[type=text]:focus, .bbs-form textarea:focus{outline:none; border-color:var(--steel)}
.bbs-form textarea{min-height:120px; resize:vertical}
.bbs-form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.bbs-form button{background:var(--steel-deep); color:#fff; border:0; border-radius:4px; padding:9px 24px; font:inherit; font-size:13px; letter-spacing:.1em; cursor:pointer}
.bbs-form button:hover{background:#5f8dbf}
.bbs-form button:disabled{opacity:.5; cursor:default}
.bbs-msg{font-size:12px; color:var(--steel); margin-left:12px}
.bbs-list{list-style:none; padding:0; margin:0}
.bbs-list li{background:#161c24; border:1px solid rgba(138,176,216,.18); border-radius:6px; padding:14px 18px; margin:0 0 12px}
.bbs-list .h{font-size:12px; color:#8f99a6; margin:0 0 8px}
.bbs-list .h b{color:var(--steel); font-weight:600; margin-right:10px}
.bbs-list .b{white-space:pre-wrap; word-break:break-word; font-size:14px; color:var(--ink); margin:0}
.bbs-list li.bbs-empty{background:none; border:0; color:var(--faint); font-size:13px; text-align:center; padding:20px 0}
.news h4 a{color:inherit; display:flex; gap:10px; align-items:baseline}
.news-more{text-align:right; margin:12px 0 0; font-family:var(--lat); font-size:12px; letter-spacing:.08em}
.bbs-form select{width:100%; background:#0d1116; color:var(--ink); border:1px solid rgba(255,255,255,.22); border-radius:4px; padding:9px 11px; font:inherit; font-size:14px; margin:0 0 14px}
.bbs-form input[type=file]{display:block; color:var(--dim); font-size:13px; margin:0 0 16px}
.bbs-form label.chk{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ink); margin:0 0 8px}
.bbs-form label.chk input{margin-top:4px}
.bbs-form button{margin-top:8px}
.refs{font-size:12.5px; color:var(--dim); line-height:1.8; padding-left:1.2em}
.refs li{margin:0 0 6px}

.nav .wide{grid-column:1/-1}

.nav.fill a:last-child:nth-child(odd){grid-column:1/-1}

table.spec{width:100%;border-collapse:collapse;margin:12px 0 6px;font-size:14px}
table.spec th,table.spec td{border:1px solid var(--line);padding:10px 12px;text-align:center}
table.spec th{color:var(--steel);font-weight:600;background:var(--panel)}
table.spec td{color:var(--ink)}