@charset "UTF-8";
/* 体験談掲示板（素人投稿AZZ）  黒地・銀・赤。AZZ本体と同じ世界観 */
:root{
  --ink:#050506; --panel:#131115; --panel-2:#1a181d;
  --silver:#dcdfe4; --silver-dim:#9da3ab; --muted:#757a82;
  --red:#c8121f; --red-hot:#ff2b34; --gold:#d8b46a;
  --line:rgba(220,223,228,.14);
  --field:#fff9d9; --field-ink:#1d1a14; --field-line:#b09e88;
  --serif:'Kaisei Tokumin','Hiragino Mincho ProN',serif;
  --sans:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --label:'Oswald','Zen Kaku Gothic New',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ink);color:var(--silver);font-family:var(--sans);font-size:16px;line-height:1.9;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block;border:0}
a{color:var(--silver);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--red-hot);outline-offset:2px}
.wrap{max-width:980px;margin:0 auto;padding:0 14px 40px}

/* ヘッダーの帯 */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 14px;background:rgba(5,5,6,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.bar-logo{display:flex;align-items:center;gap:10px;min-width:0}
.bar-logo img{height:40px;width:auto}
.bar-sub{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:#fff;letter-spacing:.12em;
  border-left:1px solid var(--line);padding-left:10px;white-space:nowrap}
.bar-right{display:flex;gap:8px;flex-shrink:0}

/* ボタン */
.btn{display:inline-block;border:0;cursor:pointer;font-family:var(--sans);font-size:.95rem;font-weight:700;letter-spacing:.06em;
  padding:13px 26px;border-radius:3px;text-align:center;line-height:1.4;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.btn-red{background:linear-gradient(180deg,#e01a27,#a50d18);color:#fff;box-shadow:0 0 0 1px rgba(255,43,52,.5),0 6px 18px rgba(200,18,31,.35)}
.btn-red:hover{background:linear-gradient(180deg,#ff2b34,#c8121f)}
.btn-ghost{background:transparent;color:var(--silver);box-shadow:inset 0 0 0 1px rgba(220,223,228,.35)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--silver);color:#fff}
.btn-sm{padding:8px 14px;font-size:.85rem}
.btn-wide{display:block;width:100%}
.btn:disabled{opacity:.55;cursor:default}

/* 見出し・案内 */
.page-h{font-family:var(--serif);font-size:1.6rem;color:#fff;margin:26px 0 6px;letter-spacing:.08em}
.page-h::after{content:"";display:block;width:56px;height:2px;margin-top:8px;background:var(--red);box-shadow:0 0 12px rgba(255,43,52,.7)}
.intro-lead{color:var(--silver-dim);margin:6px 0 0;font-size:.95rem}
.ok{background:rgba(40,160,90,.16);border:1px solid rgba(80,200,120,.45);color:#d9ffe6;padding:10px 14px;border-radius:4px;margin:16px 0 0}
.err{background:rgba(200,18,31,.16);border:1px solid rgba(255,43,52,.55);color:#ffd9db;padding:10px 14px;border-radius:4px;margin:12px 0}
.empty{color:var(--silver-dim);text-align:center;padding:40px 10px;border:1px dashed var(--line);border-radius:6px}
.empty-s{color:var(--muted);font-size:.9rem;margin:6px 0 12px}
.warn-s{color:#ffb3b8}
.notice{text-align:center;padding:30px 0}
.notice p{margin:14px 0}
.back{text-align:center;margin:26px 0 0}

/* 検索・タブ */
.search{display:flex;gap:8px;margin:18px 0 12px}
.search input{flex:1;min-width:0;font-size:16px;padding:10px 12px;border-radius:3px;border:1.5px solid var(--field-line);background:var(--field);color:var(--field-ink)}
.gtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.gtab{padding:6px 12px;border-radius:999px;font-size:.85rem;box-shadow:inset 0 0 0 1px rgba(220,223,228,.25);color:var(--silver-dim);touch-action:manipulation}
.gtab.on{background:var(--red);color:#fff;box-shadow:none}
.listhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.count{color:var(--silver-dim);font-size:.85rem}
.stabs{display:flex;gap:4px}
.stab{font-size:.85rem;padding:4px 10px;color:var(--silver-dim);border-bottom:2px solid transparent}
.stab.on{color:#fff;border-bottom-color:var(--red-hot)}

/* 一覧のカード */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 16px;
  transition:border-color .15s,transform .15s}
.card:hover{border-color:rgba(255,43,52,.6);transform:translateY(-2px)}
.card-top{display:flex;align-items:center;gap:8px}
.genre{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:999px;background:#3a3440;color:#fff;letter-spacing:.06em}
.g-wife{background:#a3123a}.g-couple{background:#6a3fb5}.g-ntr{background:#b5541a}
.g-multi{background:#8f1f8a}.g-out{background:#1f7a5a}.g-other{background:#4a4f58}
.new{font-family:var(--label);font-size:.72rem;color:#fff;background:var(--red-hot);padding:1px 7px;border-radius:2px;letter-spacing:.08em}
.card-title{font-family:var(--serif);font-size:1.08rem;color:#fff;margin:8px 0 4px;line-height:1.5;word-break:break-all}
.card-ex{color:var(--silver-dim);font-size:.88rem;margin:0 0 10px;line-height:1.7;word-break:break-all;flex:1}
.card-meta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:.8rem}
.cname{color:#fff;font-weight:700}
.dsub{color:var(--muted);font-size:.8rem}

.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:22px 0 0}
.pg{min-width:40px;padding:8px 12px;text-align:center;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(220,223,228,.25);font-size:.9rem;touch-action:manipulation}
.pg.on{background:var(--red);color:#fff;box-shadow:none}
.write-cta{text-align:center;margin:28px 0 0}

/* 本文ページ */
.story{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:22px 24px;margin:20px 0 0}
.story-title{font-family:var(--serif);font-size:1.5rem;color:#fff;margin:10px 0 10px;line-height:1.5;word-break:break-all}
.dmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.dname{font-family:var(--serif);color:#fff;font-weight:700;font-size:1.05rem}
.story-body{margin-top:16px;font-size:1.02rem;line-height:2.05;color:#eceef1;word-break:break-all}
.preview{border-color:rgba(255,43,52,.5)}

.sec-h{font-family:var(--serif);color:#fff;font-size:1.2rem;margin:30px 0 10px;padding-left:10px;border-left:3px solid var(--red)}
.cmt{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:10px 14px;margin:0 0 10px}
.cmt-meta{display:flex;gap:10px;align-items:center}
.cmt-body{margin:4px 0 0;word-break:break-all;line-height:1.8}

.fdet{margin:12px 0 0}
.fdet>summary{list-style:none}
.fdet>summary::-webkit-details-marker{display:none}
.fdet[open]>summary{display:none}
.tools{margin:28px 0 0;border-top:1px solid var(--line);padding-top:10px}
.tdet{margin:6px 0}
.tdet>summary{cursor:pointer;color:var(--silver-dim);font-size:.88rem;padding:6px 0}

/* 入力フォーム（入力欄は最初から薄い黄色・16px以上） */
.formbox{max-width:760px;margin:0 auto}
.rules{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 18px;margin:16px 0}
.rules h2{font-size:1rem;color:#fff;margin:0 0 4px}
.rules ul{margin:0;padding-left:1.2em;font-size:.9rem;color:var(--silver-dim)}
.rules li.ng{color:#ffb3b8}
.sform{margin:10px 0 0}
.frow{margin:0 0 16px}
.frow label{display:block;font-weight:700;color:#fff;font-size:.95rem}
.lsub{display:block;font-weight:400;color:var(--silver-dim);font-size:.82rem;margin:2px 0 0}
.req{display:inline-block;margin-left:8px;font-size:.7rem;background:var(--red);color:#fff;padding:0 6px;border-radius:2px;vertical-align:middle}
.in{display:block;width:100%;margin-top:6px;font-size:16px;font-family:var(--sans);padding:10px 12px;border-radius:3px;
  border:1.5px solid var(--field-line);background:var(--field);color:var(--field-ink);line-height:1.8}
textarea.in{resize:vertical;min-height:8em;overflow:hidden}
textarea.in.tall{min-height:calc(1.8em * 14 + 24px)}
select.in{height:48px}
.chk{display:flex !important;align-items:center;gap:10px;cursor:pointer}
.chk input{width:22px;height:22px;accent-color:var(--red)}
.hint{color:var(--muted);font-size:.82rem;margin:-6px 0 12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ctab{width:100%;border-collapse:collapse;margin:16px 0}
.ctab th,.ctab td{border:1px solid var(--line);padding:10px 12px;text-align:left;font-size:.92rem}
.ctab th{width:9em;background:var(--panel-2);color:#fff;font-weight:700}
.cbtns{display:flex;gap:12px}
.cform{flex:1}

/* 年齢確認 */
.gate{max-width:620px;margin:40px auto 0;text-align:center}
.gate-logo{width:min(100%,420px);margin:0 auto}
.gate-h{font-family:var(--serif);color:#fff;font-size:1.7rem;letter-spacing:.2em;margin:14px 0 4px}
.gate-lead{color:var(--silver-dim)}
.gate-note{color:#ffb3b8;font-weight:700}
.gate-btns{display:flex;flex-direction:column;gap:12px;max-width:360px;margin:20px auto 0}
.rule{width:min(100%,420px);height:10px;margin:12px auto;position:relative}
.rule::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(220,223,228,.55) 12%,rgba(220,223,228,.55) 88%,transparent)}
.rule::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg);background:var(--red);box-shadow:0 0 14px rgba(255,43,52,.75)}

/* フッター */
.foot{text-align:center;padding:26px 10px 34px;border-top:1px solid var(--line);margin-top:40px}
.fver{font-family:var(--label);font-size:.78rem;letter-spacing:.18em;color:var(--muted);margin:0}
.fsep{margin:0 10px;color:var(--red)}
.fcredit{font-family:var(--label);font-size:.78rem;letter-spacing:.3em;color:var(--muted);margin:4px 0 0;text-transform:uppercase}
.du{color:#fff;text-shadow:0 0 10px rgba(255,43,52,.8)}

/* スマホ */
@media (max-width:700px){
  .bar{padding:6px 10px}
  .bar-logo{gap:7px}
  .bar-logo img{height:24px}
  .bar-sub{font-size:.85rem;padding-left:7px;letter-spacing:.06em}
  .bar-right .btn-sm{padding:7px 10px;font-size:.8rem;letter-spacing:.02em}
  .bar-right .btn-ghost{display:none}
  .cards{grid-template-columns:1fr}
  .page-h{font-size:1.35rem}
  .story{padding:16px 14px}
  .story-title{font-size:1.25rem}
  .cbtns{flex-direction:column}
  .ctab th{width:7em}
}

/* 管理画面 */
.abtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.iform{display:inline;margin:0}
.tscroll{width:100%;overflow-x:auto}
.ltab td{vertical-align:top;font-size:.82rem;white-space:nowrap}
.ltab td.ltxt{white-space:normal;min-width:16em;word-break:break-all}