@charset "utf-8";
/* おっパブ.com — ピンサロランキング共通スタイル。モバイル優先。
   写真素材を持たないので、階調・余白・タイポグラフィで見せる。
   入力欄は16px以上（iOSが拡大するため）／タップ領域は44px以上 */

:root{
  --bg:#0b1016;
  --bg2:#131b24;
  --bg3:#1b2532;
  --line:#25313f;
  --line2:#33465a;
  --fg:#eef3f8;
  --muted:#93a6b8;
  --accent:#e08a1e;
  --accent2:#ffb14d;
  --accent-dim:#7a4a10;
  --gold:#7fd0c8;
  --ok:#3fae86;
  --wrap:62rem;
  --r:.75rem;
  --shadow:0 18px 44px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg); line-height:1.9;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-size:16px; padding-bottom:4.75rem;
  background-image:
    radial-gradient(120% 60% at 85% -10%, rgba(224,138,30,.16), transparent 60%),
    radial-gradient(90% 50% at 0% 0%, rgba(60,150,190,.10), transparent 55%);
  background-repeat:no-repeat;
}
a{color:var(--accent2);text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}

/* 18禁バー */
.r18-bar{
  margin:0;background:#000;color:#b9b2c9;text-align:center;
  font-size:.8125rem;padding:.5rem .75rem;letter-spacing:.04em;
  border-bottom:1px solid var(--line);
}

/* ヘッダー */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(14,12,20,.9);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.brand{
  display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;
  padding:.8rem 1rem .3rem;text-decoration:none;color:var(--fg);
}
.brand strong{font-size:1.25rem;letter-spacing:.04em;line-height:1.3}
.brand span{
  font-size:.75rem;color:var(--accent2);letter-spacing:.14em;
  border:1px solid var(--accent-dim);border-radius:999px;padding:.1rem .6rem;
}
.global-nav{display:flex;gap:.1rem;overflow-x:auto;padding:0 .5rem .45rem;scrollbar-width:none}
.global-nav::-webkit-scrollbar{display:none}
.global-nav a{
  position:relative;flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;
  padding:0 .85rem;color:var(--muted);text-decoration:none;font-size:.9375rem;white-space:nowrap;
}
.global-nav a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.35rem;height:2px;
  background:var(--accent);border-radius:2px;transform:scaleX(0);transition:transform .18s;
}
.global-nav a[aria-current="page"]{color:var(--fg)}
.global-nav a[aria-current="page"]::after,.global-nav a:hover::after{transform:scaleX(1)}

main{max-width:var(--wrap);margin:0 auto;padding:0 1.1rem}

.crumb{font-size:.8125rem;color:var(--muted);padding:1rem 0 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--accent2)}
.crumb a::after{content:"›";margin:0 .5rem;color:#5d5670}

/* ヒーロー */
.hero{
  position:relative;padding:3rem 0 2.2rem;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";position:absolute;left:-1.1rem;right:-1.1rem;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5;
}
.hero-sub{padding:1.6rem 0 1.5rem}

/* 見出しの背景アート */
.hero.has-art{
  position:relative;padding-top:0;margin-bottom:0;
}
.hero-art{
  width:calc(100% + 2.2rem);max-width:none;margin:0 -1.1rem 1.4rem;
  height:clamp(140px,38vw,240px);object-fit:cover;object-position:center 62%;
  border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);
  mask-image:linear-gradient(180deg,#000 62%,transparent);
}
.hero.has-art .eyebrow{margin-top:-.4rem}
@media (min-width:48rem){
  .hero-art{width:calc(100% + 3rem);margin:0 -1.5rem 1.8rem;height:clamp(200px,26vw,300px);border-radius:0}
}
.eyebrow{
  margin:0 0 .7rem;font-size:.75rem;letter-spacing:.22em;color:var(--accent2);
  text-transform:uppercase;font-weight:700;
}
h1{
  font-size:clamp(1.6rem,7.2vw,2.3rem);line-height:1.42;margin:0 0 .8rem;
  letter-spacing:.01em;font-weight:800;
}
.hero-sub h1{font-size:clamp(1.35rem,5.6vw,1.75rem)}
.lead{margin:0;color:#d5cfe4;font-size:1.0625rem}
.hero-sub .lead{font-size:1rem}

/* ヒーロー下のバッジ列 */
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:1.4rem 0 0;padding:0}
.badges li{
  font-size:.8125rem;color:#e4dff0;letter-spacing:.03em;
  background:linear-gradient(180deg,var(--bg3),var(--bg2));
  border:1px solid var(--line2);border-radius:999px;padding:.35rem .85rem;
}
.badges li.gold{color:var(--gold);border-color:#4b3d22}

.hero-cta{margin:1.6rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}

/* ボタン */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:0 1.9rem;border-radius:var(--r);
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  color:#fff;text-decoration:none;font-weight:800;letter-spacing:.05em;
  box-shadow:0 10px 26px rgba(224,138,30,.32);
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(224,138,30,.42);color:#fff}
.btn::after{content:"→";font-weight:400}
.btn.ghost{
  background:transparent;border:1px solid var(--line2);color:var(--fg);box-shadow:none;
}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent2)}

/* セクション */
.block{padding:2.4rem 0;border-bottom:1px solid var(--line)}
.block:last-of-type{border-bottom:0}
h2{
  position:relative;font-size:1.3rem;margin:0 0 1.1rem;padding-left:.95rem;
  letter-spacing:.02em;font-weight:800;line-height:1.5;
}
h2::before{
  content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--accent2),var(--accent-dim));
}
h3{font-size:1.0625rem;margin:0 0 .45rem;font-weight:700}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

/* カード */
.cards{display:grid;gap:.9rem}
.card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--bg2),var(--bg3));
  border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.25rem 1.25rem;
}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
.card p{color:#c9c2da;font-size:.9375rem;margin:0}

/* エリア一覧 */
.area-list{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.area-list a{
  position:relative;display:flex;flex-direction:column;gap:.2rem;
  min-height:44px;justify-content:center;
  background:linear-gradient(180deg,var(--bg2),var(--bg3));
  border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 2.4rem 1rem 1.1rem;text-decoration:none;color:var(--fg);
  transition:border-color .15s, transform .15s;
}
.area-list a::after{
  content:"→";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);
  color:var(--accent2);font-size:1.05rem;
}
.area-list a:hover{border-color:var(--accent);transform:translateX(2px)}
.area-list strong{font-size:1.05rem;letter-spacing:.03em}
.area-list span{font-size:.875rem;color:var(--muted)}

/* 星 */
.stars{display:inline-flex;align-items:center;gap:.25rem;font-size:.9375rem;color:var(--gold);letter-spacing:.04em}
.stars .off{color:#4a4358}
.stars b{color:var(--fg);font-size:.875rem;margin-left:.15rem}
.stars small{color:var(--muted);font-size:.75rem;font-weight:400}
.stars.none{color:var(--muted);font-size:.8125rem;letter-spacing:0}
.rank .rv{display:block;margin-top:.15rem}
.vote-now{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:0 0 1rem;font-size:1.05rem}
.vote-now .vp{font-size:.875rem;color:var(--muted)}
.vote-ok{background:#0f2c1f;border:1px solid #235c3c;border-radius:var(--r);padding:1rem 1.1rem;margin:0 0 1rem}
.vote-ng{background:#331020;border:1px solid #6d2740;border-radius:var(--r);padding:1rem 1.1rem;margin:0 0 1rem}
.stars-pick{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 0}
.star-btn{
  display:inline-flex;align-items:center;gap:.35rem;min-height:48px;padding:0 1rem;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);
  color:var(--gold);font-size:1rem;font-family:inherit;letter-spacing:.02em;
}
.star-btn small{color:var(--muted);font-size:.75rem}
.star-btn:hover{border-color:var(--accent);background:var(--bg3)}

/* キャストの掲載イメージ */
.cast-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.cast-list li{
  position:relative;background:linear-gradient(180deg,var(--bg2),var(--bg3));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.cast-list img{width:100%;height:auto;display:block}
.cast-list .rk{
  position:absolute;left:.6rem;top:.6rem;width:2rem;height:2rem;display:grid;place-items:center;
  border-radius:50%;background:rgba(14,12,20,.8);border:1px solid var(--line2);font-weight:800;font-size:.875rem;
}
.cast-list .cn{display:block;padding:.75rem .85rem 1rem}
.cast-list .cn strong{display:block;font-size:1rem}
.cast-list .cn em{display:block;font-style:normal;font-size:.75rem;color:var(--accent2);margin:.1rem 0 .35rem}

/* 街ごとの見出し（トップの街別上位） */
.rank-h{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  font-size:1.05rem;margin:1.8rem 0 .7rem;padding-bottom:.4rem;
  border-bottom:1px solid var(--line2);
}
.rank-h span{font-size:.8125rem;color:var(--muted);font-weight:400}

/* 店ランキング */
.rank{list-style:none;counter-reset:r;margin:0 0 1rem;padding:0;display:grid;gap:.5rem}
.rank li{
  counter-increment:r;display:grid;grid-template-columns:2.6rem 3rem 1fr auto;align-items:center;gap:.7rem;
  background:linear-gradient(180deg,var(--bg2),var(--bg3));
  border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem;min-height:56px;
}
.rank li.self{border-color:var(--accent-dim);background:linear-gradient(180deg,#241220,#1c1526)}
.rank .rk{
  display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;
  background:var(--bg);border:1px solid var(--line2);font-weight:800;font-size:.9375rem;color:var(--muted);
}
.rank li:nth-child(1) .rk{background:linear-gradient(180deg,#e8c877,#c79a3c);border-color:#8c6a22;color:#2a1f08}
.rank li:nth-child(2) .rk{background:linear-gradient(180deg,#d8dae0,#a9adb8);border-color:#7d818c;color:#22242a}
.rank li:nth-child(3) .rk{background:linear-gradient(180deg,#d8a273,#a9713f);border-color:#7d5227;color:#2a1a0c}
.rank .ri{width:3rem;height:3rem;border-radius:.6rem;display:block}
.rank .rn{min-width:0}

/* 店ページの見出し */
.shop-head{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;align-items:start}
.shop-head h2{margin-top:0}
.shop-logo{width:4.5rem;height:4.5rem;border-radius:.9rem}
@media (min-width:48rem){
  .shop-head{grid-template-columns:6.5rem 1fr;gap:1.4rem}
  .shop-logo{width:6.5rem;height:6.5rem;border-radius:1.2rem}
}
.rank .rn a{color:var(--fg);text-decoration:none;font-weight:700;word-break:break-word}
.rank .rn a:hover{color:var(--accent2)}
.rank .rn em{display:block;font-style:normal;font-size:.75rem;color:var(--accent2);letter-spacing:.04em}
/* 総合ランキングは4位以降のメダル色を出さない（街別と見分けやすくする） */
.rank.overall li:nth-child(n+4) .rk{background:var(--bg);border-color:var(--line2);color:var(--muted)}
.rank.overall .rn em{color:var(--muted)}
.rank .rp{font-weight:800;font-size:1.15rem;color:var(--gold);white-space:nowrap}
.rank .rp small{font-size:.7rem;color:var(--muted);font-weight:400}
table.price small{color:var(--muted);font-weight:400;line-height:1.7;display:inline-block;margin-top:.15rem}
table.price td small{font-size:.8125rem}

/* 採点表 */
table.score{width:100%;border-collapse:collapse;font-size:.9375rem}
table.score th,table.score td{border-bottom:1px solid var(--line);padding:.8rem .5rem;text-align:left;vertical-align:top}
table.score th{width:9rem;font-weight:700;white-space:nowrap;color:var(--fg)}
table.score td{color:#c9c2da;font-size:.875rem;line-height:1.8}
table.score td.pt{width:4.5rem;text-align:right;white-space:nowrap;font-weight:800;font-size:1rem;color:var(--gold)}
table.score td.pt small{font-size:.7rem;color:var(--muted);font-weight:400}
@media (max-width:32rem){
  table.score th{width:auto;white-space:normal}
  table.score{font-size:.875rem}
}

/* 近くの街へのナビ（本文ではないので audit の字数から外れる） */
.near{display:flex;flex-wrap:wrap;gap:.45rem}
.near a{
  min-height:44px;display:inline-flex;align-items:center;padding:0 1rem;
  background:var(--bg2);border:1px solid var(--line2);border-radius:999px;
  font-size:.9375rem;color:#ded8ec;text-decoration:none;
}
.near a:hover{border-color:var(--accent);color:var(--accent2)}

.spots{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.spots li{
  background:var(--bg2);border:1px solid var(--line2);border-radius:999px;
  padding:.3rem .9rem;font-size:.875rem;color:#ded8ec;
}

/* 流れ */
.flow{list-style:none;counter-reset:f;margin:0;padding:0;display:grid;gap:1.15rem}
.flow li{counter-increment:f;position:relative;padding-left:3.3rem}
.flow li::before{
  content:counter(f,decimal-leading-zero);position:absolute;left:0;top:0;
  width:2.35rem;height:2.35rem;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(180deg,var(--accent2),var(--accent));color:#fff;
  font-weight:800;font-size:.8125rem;letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(224,138,30,.3);
}
.flow li::after{
  content:"";position:absolute;left:1.17rem;top:2.6rem;bottom:-1.15rem;width:1px;
  background:linear-gradient(180deg,var(--line2),transparent);
}
.flow li:last-child::after{display:none}
.flow p{color:#c9c2da;font-size:.9375rem}

.check-list{margin:0 0 1rem;padding:0;list-style:none;display:grid;gap:.4rem}
.check-list li{position:relative;padding-left:1.5rem;font-size:.9375rem;color:#ded8ec}
.check-list li::before{content:"×";position:absolute;left:0;color:var(--accent2);font-weight:800}

/* FAQ */
.faq-list details{
  background:linear-gradient(180deg,var(--bg2),var(--bg3));
  border:1px solid var(--line);border-radius:var(--r);margin-bottom:.65rem;overflow:hidden;
}
.faq-list details[open]{border-color:var(--line2)}
.faq-list summary{
  cursor:pointer;padding:1rem 2.6rem 1rem 1.1rem;min-height:44px;display:flex;align-items:center;
  font-weight:700;list-style:none;position:relative;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";position:absolute;right:1.1rem;color:var(--accent2);font-size:1.25rem;font-weight:400;
}
.faq-list details[open] summary::after{content:"−"}
.faq-list p{padding:0 1.1rem 1.1rem;color:#c9c2da;font-size:.9375rem;margin:0}

/* 表 */
table.price,table.info{width:100%;border-collapse:collapse;font-size:.9375rem}
table.price th,table.price td,table.info th,table.info td{
  border-bottom:1px solid var(--line);padding:.85rem .6rem;text-align:left;vertical-align:top;
}
table.price thead th{color:var(--accent2);font-size:.75rem;letter-spacing:.1em;border-bottom-color:var(--line2)}
table.price td:last-child{text-align:right;white-space:nowrap;font-weight:800;color:var(--gold)}
table.info th{width:8.5rem;color:var(--muted);font-weight:400;white-space:nowrap}
.fees{margin:0;display:grid;grid-template-columns:8rem 1fr;gap:.55rem 1rem;font-size:.9375rem}
.fees dt{color:var(--muted)}
.fees dd{margin:0}

/* フォーム */
.rf label{display:block;margin:0 0 1.2rem}
.rf .lb{display:block;font-size:.875rem;color:var(--muted);margin-bottom:.35rem}
.rf .req{color:var(--accent2);font-size:.75rem;margin-left:.4rem}
.rf input[type=text],.rf input[type=email],.rf input[type=tel],.rf select,.rf textarea{
  width:100%;font-size:16px;line-height:1.6;padding:.75rem .85rem;min-height:50px;
  background:#0a0810;color:var(--fg);border:1px solid var(--line2);border-radius:var(--r);
  font-family:inherit;
}
.rf textarea{min-height:9.5rem;resize:vertical}
.rf input:focus,.rf select:focus,.rf textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.rf .opts{display:flex;flex-wrap:wrap;gap:.5rem}
.rf .opts label{
  display:inline-flex;align-items:center;gap:.45rem;margin:0;min-height:44px;
  background:var(--bg2);border:1px solid var(--line2);border-radius:999px;
  padding:.35rem 1rem;font-size:.9375rem;cursor:pointer;
}
.rf .opts label:hover{border-color:var(--accent)}
.rf .opts input{width:1.15rem;height:1.15rem;accent-color:var(--accent)}
.rf .hp{position:absolute;left:-9999px}
.rf button{
  width:100%;min-height:54px;font-size:1.0625rem;font-weight:800;letter-spacing:.06em;color:#fff;
  background:linear-gradient(180deg,var(--accent2),var(--accent));border:0;border-radius:var(--r);
  cursor:pointer;font-family:inherit;box-shadow:0 10px 26px rgba(224,138,30,.32);
}
.rf button:hover{filter:brightness(1.06)}
.rf-note{font-size:.875rem;color:var(--muted)}
.rf-err{background:#331020;border:1px solid #6d2740;border-radius:var(--r);padding:1rem 1.1rem;margin:0 0 1.3rem}
.rf-err ul{margin:.35rem 0 0;padding-left:1.2rem}
.rf-ok{background:#0f2c1f;border:1px solid #235c3c;border-radius:var(--r);padding:1.4rem}
.rf-ok h2{margin-top:0}
.rf-ok h2::before{background:var(--ok)}

/* 締めのCTA帯 */
.cta-band{
  margin:2.4rem 0 0;padding:2rem 1.4rem;border-radius:var(--r);text-align:center;
  background:linear-gradient(140deg,#2a0f1c,#3b1226 55%,#1a0f22);
  border:1px solid var(--accent-dim);box-shadow:var(--shadow);
}
.cta-band h2{padding:0;font-size:1.2rem;margin:0 0 .6rem}
.cta-band h2::before{display:none}
.cta-band p{color:#e0d9ee;font-size:.9375rem;margin:0 0 1.3rem}

/* フッター */
.site-footer{
  max-width:var(--wrap);margin:0 auto;padding:2.4rem 1.1rem 3rem;
  border-top:1px solid var(--line);color:var(--muted);font-size:.875rem;
}
.foot-nav{display:flex;flex-wrap:wrap;gap:.15rem;margin-bottom:1.3rem}
.foot-nav a{
  min-height:44px;display:inline-flex;align-items:center;padding:0 .8rem;
  color:var(--muted);text-decoration:none;
}
.foot-nav a:hover{color:var(--accent2)}
.foot-mail{color:#d5cfe4}
.mail-obf{letter-spacing:.03em;word-break:break-all;color:var(--fg);font-weight:700}
.site-footer small{font-size:.8125rem;line-height:1.7;display:inline-block;margin-top:.25rem}
.foot-r18{color:var(--accent2)}
.foot-copy{margin:0;color:#6d6584}

/* スマホの固定CTA */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:30;min-height:58px;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  color:#fff;text-decoration:none;font-weight:800;font-size:1.0625rem;letter-spacing:.06em;
  box-shadow:0 -8px 22px rgba(0,0,0,.5);
}
.sticky-cta::after{content:"→";font-weight:400}

@media (min-width:48rem){
  body{padding-bottom:0}
  .sticky-cta{display:none}
  main{padding:0 1.5rem}
  .hero{padding:4.2rem 0 3rem}
  .hero-sub{padding:2rem 0 1.8rem}
  .cards{grid-template-columns:repeat(3,1fr)}
  .area-list{grid-template-columns:repeat(2,1fr)}
  .brand{padding:1rem 1.5rem .35rem}
  .global-nav{padding:0 1rem .5rem}
  .site-footer{padding:2.8rem 1.5rem 3.4rem}
  .cta-band{padding:2.6rem 2rem}
  h2{font-size:1.45rem}
}