@charset "UTF-8";
/* 素人投稿 AZZ  ---------------------------------------------
   黒地・銀の刻印・赤の発光。ロゴの世界に合わせた配色。
------------------------------------------------------------ */
:root{
  --ink:#050506;
  --ink-2:#0c0b0e;
  --panel:#131115;
  --panel-2:#1a181d;
  --silver:#dcdfe4;
  --silver-dim:#9299a2;
  --muted:#6f747c;
  --red:#c8121f;
  --red-hot:#ff2b34;
  --line:rgba(220,223,228,.13);
  --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,summary:focus-visible{
  outline:2px solid var(--red-hot);outline-offset:2px
}
.wrap{max-width:1180px;margin:0 auto;padding:0 14px 40px}

/* ロゴまわり ------------------------------------------------ */
.head{padding:18px 0 6px;text-align:center}
.logo{width:min(100%,720px);margin:0 auto;height:auto}
.lead{margin:10px 0 0;color:var(--silver-dim);font-size:.86rem;letter-spacing:.04em}
.lead .sep{color:var(--red);margin:0 8px}

/* ロゴの中央にある細い装飾罫を、区切りとして再利用 */
.rule{
  width:min(100%,720px);height:10px;margin:12px auto 0;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);
}

/* ボタン ---------------------------------------------------- */
.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;
}
.btn-red{
  color:#fff;background:linear-gradient(180deg,#e02230,#8e0b15);
  border:1px solid rgba(255,120,125,.5);
  box-shadow:0 8px 26px rgba(200,18,31,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-red:hover{filter:brightness(1.12)}
.btn-red:disabled{filter:grayscale(.6);cursor:default}
.btn-ghost{
  color:var(--silver);background:transparent;border:1px solid rgba(220,223,228,.4);
}
.btn-ghost:hover{border-color:var(--silver);background:rgba(220,223,228,.06)}
.postbar{text-align:center;margin:22px 0 10px}

/* 入口(年齢確認) -------------------------------------------- */
.gate{max-width:640px;margin:0 auto;padding:32px 16px 60px;text-align:center}
.gate-logo{width:100%;height:auto;margin:0 auto}
.gate-lead{margin:18px 0 0;font-family:var(--serif);font-size:1.05rem;letter-spacing:.05em}
.gate-note{color:var(--silver-dim);font-size:.86rem;line-height:2;margin:14px 0 0}
.gate-btns{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* 一覧 ------------------------------------------------------ */
.grid{
  display:grid;gap:12px;margin-top:20px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:700px){ .grid{grid-template-columns:repeat(3,1fr);gap:16px} }
@media (min-width:1000px){ .grid{grid-template-columns:repeat(4,1fr)} }

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;position:relative;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.card:hover{
  border-color:rgba(255,43,52,.5);
  box-shadow:0 14px 34px rgba(0,0,0,.6), 0 0 22px rgba(200,18,31,.22);
  transform:translateY(-2px);
}
.shot{
  display:block;width:100%;padding:0;border:0;background:#000;cursor:pointer;position:relative;
  aspect-ratio:1/1;overflow:hidden;
}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;opacity:.96}
.card:hover .shot img{transform:scale(1.06);opacity:1}
.shot .count{
  position:absolute;right:8px;bottom:8px;font-family:var(--label);font-size:.7rem;
  letter-spacing:.08em;color:#fff;background:rgba(5,5,6,.72);
  border:1px solid rgba(220,223,228,.25);border-radius:2px;padding:2px 8px;
}
.meta{padding:10px 12px 13px}
.ttl{
  margin:0;font-family:var(--serif);font-weight:700;font-size:.98rem;line-height:1.5;
  color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.by{margin:5px 0 0;font-size:.74rem;color:var(--muted);letter-spacing:.03em}
.by .dot{color:var(--red);margin:0 2px}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 0;line-height:2.2}

/* ページ送り ------------------------------------------------ */
.pager{display:flex;gap:10px;justify-content:center;align-items:center;margin:26px 0 6px}
.pg{
  font-family:var(--label);letter-spacing:.1em;font-size:.85rem;
  padding:9px 18px;border:1px solid rgba(220,223,228,.3);border-radius:3px;
}
.pg.off{opacity:.3}
.pg.num{border-color:transparent;color:var(--silver-dim)}
a.pg:hover{border-color:var(--red-hot);color:#fff}

/* 投稿フォーム ---------------------------------------------- */
.formwrap{display:none;margin:16px 0 4px}
.formwrap.open{display:block}
.panel{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:5px;padding:20px 18px 22px;
}
.panel h2{
  margin:0 0 14px;font-family:var(--serif);font-size:1.15rem;color:#fff;letter-spacing:.05em;
}
.err{
  margin:0 0 14px;padding:11px 14px;border-radius:3px;font-size:.88rem;line-height:1.9;
  color:#ffd9db;background:rgba(200,18,31,.16);border:1px solid rgba(255,43,52,.45);
}
.frow{margin-bottom:15px}
.frow label{display:block;font-size:.82rem;color:var(--silver-dim);letter-spacing:.06em;margin-bottom:6px}
.frow .req{
  font-family:var(--label);font-size:.62rem;letter-spacing:.1em;color:#fff;
  background:var(--red);border-radius:2px;padding:2px 7px;margin-left:8px;vertical-align:2px;
}
.frow input[type="text"],.frow textarea,.frow input[type="file"]{
  width:100%;background:#0b0a0d;color:var(--silver);
  border:1px solid rgba(220,223,228,.22);border-radius:3px;
  padding:11px 12px;font-family:var(--sans);font-size:1rem;line-height:1.7;
}
.frow input[type="file"]{padding:10px 12px;font-size:.9rem}
.frow textarea{resize:vertical;min-height:92px}
.frow input::placeholder,.frow textarea::placeholder{color:#585c63}
.hint{margin:7px 0 0;font-size:.76rem;color:var(--muted);line-height:1.8}
.check label{display:flex;gap:9px;align-items:flex-start;color:var(--silver);font-size:.88rem;line-height:1.7}
.check input{margin-top:5px;accent-color:var(--red)}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* お約束 ---------------------------------------------------- */
.rules{
  margin-top:34px;padding:20px 18px;border:1px solid var(--line);border-radius:5px;
  background:var(--ink-2);
}
.rules h2{
  margin:0 0 10px;font-family:var(--label);font-size:.8rem;letter-spacing:.22em;
  color:var(--red-hot);text-transform:uppercase;
}
.rules h2::after{content:" / 投稿のお約束";color:var(--silver-dim);font-family:var(--sans);letter-spacing:.06em}
.rules ul{margin:0;padding-left:1.1em;color:var(--silver-dim);font-size:.86rem;line-height:2.1}
.rules li{margin-bottom:2px}
.rules-note{margin:12px 0 0;font-size:.8rem;color:var(--muted);line-height:1.9}

/* 受付完了など ---------------------------------------------- */
.notice{max-width:620px;margin:60px auto;text-align:center}
.notice h2{font-family:var(--serif);color:#fff;font-size:1.2rem;margin:0 0 10px}
.notice .mt{margin-top:22px}

/* 拡大表示 -------------------------------------------------- */
.lb{
  position:fixed;inset:0;z-index:90;background:rgba(3,3,4,.94);
  overflow-y:auto;padding:54px 12px 40px;
}
.lb[hidden]{display:none}
.lb-inner{max-width:900px;margin:0 auto}
.lb-imgs img{width:100%;height:auto;margin-bottom:10px;border:1px solid var(--line);border-radius:3px}
.lb-close{
  position:fixed;top:10px;right:12px;z-index:2;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(20,18,22,.9);color:#fff;border:1px solid rgba(220,223,228,.35);
  font-size:1.5rem;line-height:1;
}
.lb-meta{padding:12px 2px 0}
.lb-meta h3{margin:0;font-family:var(--serif);color:#fff;font-size:1.15rem;line-height:1.6}
.lb-meta .by{margin:6px 0 0;font-size:.78rem;color:var(--muted)}
.lb-body{margin:12px 0 0;color:var(--silver);font-size:.95rem;line-height:2;white-space:pre-wrap}
.rep{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.rep summary{cursor:pointer;color:var(--muted);font-size:.8rem;letter-spacing:.05em}
.rep summary:hover{color:var(--silver)}
.repform{margin-top:12px}
.repform label{display:block;font-size:.8rem;color:var(--silver-dim);margin-bottom:10px}
.repform textarea,.repform input[type="text"]{
  width:100%;margin-top:5px;background:#0b0a0d;color:var(--silver);
  border:1px solid rgba(220,223,228,.22);border-radius:3px;padding:9px 11px;
  font-family:var(--sans);font-size:.95rem;
}

/* フッター -------------------------------------------------- */
.foot{border-top:1px solid var(--line);margin-top:30px;padding:16px 14px 26px;text-align:center}
.fver{margin:0;font-family:var(--label);font-size:.62rem;letter-spacing:.22em;color:#3c4046}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ===== v2 追加分 ============================================ */
/* 並び替え・検索 */
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:22px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{
  font-size:.82rem;letter-spacing:.05em;padding:8px 15px;border-radius:3px;
  border:1px solid rgba(220,223,228,.22);color:var(--silver-dim);
}
.tab:hover{border-color:var(--silver);color:var(--silver)}
.tab.on{background:rgba(200,18,31,.2);border-color:rgba(255,43,52,.55);color:#fff}
.search{display:flex;gap:8px}
.search input{
  background:#0b0a0d;color:var(--silver);border:1px solid rgba(220,223,228,.22);
  border-radius:3px;padding:9px 12px;font-family:var(--sans);font-size:.9rem;min-width:180px;
}
.btn.sm{padding:9px 15px;font-size:.82rem}
.flash{
  margin:14px 0 0;padding:12px 16px;border-radius:3px;text-align:center;
  background:rgba(200,18,31,.14);border:1px solid rgba(255,43,52,.4);color:#ffd9db;font-size:.9rem;
}
.stats{margin:5px 0 0;font-size:.72rem;color:var(--muted);display:flex;gap:10px}
.st-like{color:#ff6a72}
.st-cmt{color:var(--silver-dim)}
.ttl a{color:#fff}
.ttl a:hover{color:var(--red-hot)}

/* 写真えらび */
.filein{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.drop{
  border:1px dashed rgba(220,223,228,.3);border-radius:5px;padding:22px 16px;text-align:center;
  background:rgba(11,10,13,.6);transition:border-color .2s ease,background .2s ease;
}
.drop.over{border-color:var(--red-hot);background:rgba(200,18,31,.12)}
.drophint{margin:10px 0 0;font-size:.78rem;color:var(--muted)}
.preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pv{position:relative;width:84px;height:84px;border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.pv img{width:100%;height:100%;object-fit:cover}
.pv-x{
  position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;cursor:pointer;
  background:rgba(5,5,6,.82);color:#fff;border:1px solid rgba(220,223,228,.4);
  font-size:.9rem;line-height:1;padding:0;
}
.pv-n{
  position:absolute;left:3px;bottom:3px;font-family:var(--label);font-size:.6rem;
  background:rgba(5,5,6,.75);color:#fff;border-radius:2px;padding:1px 6px;
}
.pv-count{width:100%;margin:4px 0 0;font-size:.76rem;color:var(--silver-dim)}
.hint.safe{color:#8fd0a8}
.opt{
  font-family:var(--label);font-size:.6rem;letter-spacing:.1em;color:var(--silver-dim);
  border:1px solid rgba(220,223,228,.3);border-radius:2px;padding:2px 7px;margin-left:8px;vertical-align:2px;
}

/* 詳細ページ */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 8px;border-bottom:1px solid var(--line)}
.back{font-size:.85rem;color:var(--silver-dim);letter-spacing:.04em}
.back:hover{color:var(--red-hot)}
.brand img{width:150px;height:auto}
.detail{padding:18px 0 6px}
.dtitle{margin:0;font-family:var(--serif);font-size:clamp(1.2rem,4vw,1.6rem);color:#fff;line-height:1.5}
.dby{margin:7px 0 0;font-size:.78rem;color:var(--muted)}
.dby .dot{color:var(--red);margin:0 3px}
.views{color:var(--silver-dim)}
.dimgs{margin-top:16px}
.big{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;margin-bottom:12px}
.big img{width:100%;height:auto;border:1px solid var(--line);border-radius:4px}
.dbody{margin:14px 0 0;font-size:.98rem;line-height:2.05;white-space:pre-wrap;color:var(--silver)}
.linkbar{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.lnk{
  font-size:.84rem;font-weight:700;letter-spacing:.03em;padding:10px 18px;border-radius:3px;
  border:1px solid rgba(220,223,228,.3);color:var(--silver);background:rgba(255,255,255,.04);
}
.lnk:hover{border-color:var(--silver);background:rgba(255,255,255,.1)}
.lnk.x{background:#000;border-color:#555;color:#fff}
.lnk.ig{background:linear-gradient(120deg,#f9ce34,#ee2a7b 55%,#6228d7);border-color:transparent;color:#fff}
.lnk.yt{background:#ff0033;border-color:transparent;color:#fff}
.lnk.tt{background:#111;border-color:#25f4ee;color:#fff}
.lnk.fb{background:#1877f2;border-color:transparent;color:#fff}
.lnk.line{background:#06c755;border-color:transparent;color:#fff}
.lnk.note{background:#41c9b4;border-color:transparent;color:#062b27}
.lnk.pixiv{background:#0096fa;border-color:transparent;color:#fff}
.lnk.blog{background:rgba(220,223,228,.12);color:var(--silver)}
.lnk.mail{background:linear-gradient(180deg,#e02230,#8e0b15);border-color:rgba(255,120,125,.5);color:#fff}
.likebar{display:flex;align-items:center;gap:12px;margin-top:22px}
.like{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:rgba(200,18,31,.14);border:1px solid rgba(255,43,52,.45);border-radius:30px;
  color:#ff8a90;padding:10px 22px;font-family:var(--sans);font-size:1rem;font-weight:700;
  transition:transform .15s ease,background .25s ease;
}
.like:hover{background:rgba(200,18,31,.26)}
.like:active{transform:scale(.95)}
.like.done{background:linear-gradient(180deg,#e02230,#8e0b15);color:#fff;cursor:default}
.like .hart{font-size:1.05rem}
.likehint{font-size:.76rem;color:var(--muted)}

/* コメントほか */
.block{margin-top:30px;padding:20px 18px;border:1px solid var(--line);border-radius:5px;background:var(--ink-2)}
.block h2{margin:0 0 12px;font-family:var(--serif);font-size:1.05rem;color:#fff;letter-spacing:.04em}
.block .note{margin:0 0 14px;font-size:.82rem;color:var(--silver-dim);line-height:1.9}
.block .note b{color:#ffd9db}
.block.sub{background:transparent}
.block.sub details{border-top:1px solid var(--line);padding:12px 0 4px}
.block.sub summary{cursor:pointer;color:var(--muted);font-size:.83rem;letter-spacing:.04em}
.block.sub summary:hover{color:var(--silver)}
.cmts{margin-bottom:18px}
.cmt{padding:12px 0;border-bottom:1px solid var(--line)}
.cmt:last-child{border-bottom:none}
.cby{margin:0;font-size:.76rem;color:var(--gold,#9299a2)}
.cby .dot{color:var(--red);margin:0 3px}
.cbody{margin:5px 0 0;font-size:.92rem;line-height:1.95;white-space:pre-wrap;color:var(--silver)}
.empty.sm{padding:22px 0;font-size:.86rem}
.sform{margin-top:8px}
.sform .frow label{display:block;font-size:.8rem;color:var(--silver-dim);margin-bottom:6px}
.sform input[type="text"],.sform input[type="email"],.sform input[type="password"],.sform textarea{
  width:100%;background:#0b0a0d;color:var(--silver);border:1px solid rgba(220,223,228,.22);
  border-radius:3px;padding:10px 12px;font-family:var(--sans);font-size:.98rem;line-height:1.7;
}
.sform textarea{resize:vertical}

/* 画像の拡大 */
.zoom{position:fixed;inset:0;z-index:95;background:rgba(3,3,4,.96);display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.zoom[hidden]{display:none}
.zoom img{max-width:100%;max-height:100%;width:auto;height:auto}
.zoom-close{
  position:fixed;top:10px;right:12px;width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(20,18,22,.9);color:#fff;border:1px solid rgba(220,223,228,.35);font-size:1.5rem;line-height:1;
}

@media (max-width:560px){
  .toolbar{align-items:stretch;flex-direction:column}
  .search input{flex:1 1 auto;min-width:0}
  .brand img{width:112px}
  .lnk{flex:1 1 auto;text-align:center}
}
.st-view{color:var(--silver-dim)}
.rules li.ng{color:#ff8a90;font-weight:700}
.warn{
  margin:10px 0 0;padding:9px 12px;border-radius:3px;font-size:.82rem;line-height:1.8;
  color:#ffd9db;background:rgba(200,18,31,.16);border:1px solid rgba(255,43,52,.45);
}

/* フッターのバージョン表記とクレジット */
.foot{padding:20px 14px 30px}
.fver{margin:0;font-family:var(--label);font-size:.66rem;letter-spacing:.22em;color:#4a4e55}
.fsep{margin:0 10px;color:var(--red);opacity:.7}
.fcredit{
  margin:7px 0 0;font-family:var(--label);font-size:.7rem;letter-spacing:.24em;color:#5a5f66;
  text-transform:uppercase;
}
.fcredit .du{
  color:#e8ebef;font-weight:600;letter-spacing:.34em;margin-left:4px;
  text-shadow:0 0 12px rgba(255,43,52,.55);
}

/* 投稿者をわかりやすく */
.dmeta{display:flex;align-items:center;gap:11px;margin-top:12px;flex-wrap:wrap}
.avatar{
  width:36px;height:36px;border-radius:50%;flex:0 0 36px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:1rem;color:#fff;
  background:linear-gradient(180deg,#e02230,#8e0b15);
  border:1px solid rgba(255,120,125,.5);
  box-shadow:0 4px 16px rgba(200,18,31,.35);
}
.dname{
  font-family:var(--serif);font-size:1.08rem;font-weight:700;color:#fff;letter-spacing:.05em;
}
.dsub{font-size:.74rem;color:var(--muted);letter-spacing:.02em}
.dsub .dot{color:var(--red);margin:0 4px}
.cname{color:#e8ebef;font-weight:700}
.cby .cname{font-size:.84rem}

/* 年齢確認の入口ページ */
.gate{padding:26px 16px 40px}
.gate-rules{
  max-width:620px;margin:34px auto 0;padding:20px 20px 22px;text-align:left;
  border:1px solid var(--line);border-radius:5px;background:var(--ink-2);
}
.gate-rules h2{
  margin:0 0 12px;font-family:var(--label);font-size:.72rem;letter-spacing:.22em;
  color:var(--red-hot);text-transform:uppercase;
}
.gate-rules h2::after{content:" / ご利用の前に";color:var(--silver-dim);font-family:var(--sans);letter-spacing:.06em}
.gate-rules ul{margin:0;padding-left:1.1em;color:var(--silver-dim);font-size:.85rem;line-height:2}
.gate-rules li.ng{color:#ff8a90;font-weight:700}

/* 見出しが二重に出ていたのを修正 */
.rules h2::after,.gate-rules h2::after{content:none}

/* 入室後のヘッダー（小さなロゴを左上に） */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 0 12px;border-bottom:1px solid var(--line);
}
.bar-logo{display:block;line-height:0}
.bar-logo img{height:46px;width:auto}
.bar-right{display:flex;align-items:center;gap:14px}
.bar-count{font-size:.76rem;color:var(--muted);letter-spacing:.04em}
@media (max-width:560px){
  .bar{padding:10px 0 10px}
  .bar-logo img{height:34px}
  .bar-right{gap:10px}
  .bar-count{display:none}
}