/* Y: 一般公開サイト 共有スタイル（比較表トップ＋店舗個別ページ） */
:root{
  --bg:#f6f7f9; --panel:#fff; --line:#e3e6eb; --text:#1c2530; --muted:#6b7480;
  --accent:#2f6df0; --ok:#1f9d57; --ng:#d24b4b; --nego:#c98a1b; --chip:#eef1f6;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;font-size:14px;line-height:1.6}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
header.site{background:var(--panel);border-bottom:1px solid var(--line);padding:14px 18px}
header.site .brand{font-size:15px;font-weight:700;color:var(--text)}
header.site .brand a{color:var(--text)}
main{max-width:1040px;margin:0 auto;padding:16px}
h1{font-size:20px;margin:0 0 6px} h2{font-size:16px;margin:22px 0 10px}
.lead{color:var(--muted);font-size:13px;margin:0 0 6px}
.breadcrumb{font-size:12px;color:var(--muted);margin:0 0 10px}

/* --- 比較表トップ --- */
.table-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-top:12px}
table.compare{border-collapse:collapse;width:100%;min-width:720px}
table.compare th,table.compare td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.compare th{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;background:#fafbfc}
tbody tr.shop:hover{background:#f0f4fd}
/* 並び替え可能な列見出し（クリック／Enter・Space で切り替え、向きは矢印で示す） */
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover,th[data-sort]:focus{color:var(--text);background:#f0f4fd}
th[data-sort]::after{content:"⇅";margin-left:4px;font-size:11px;opacity:.4}
th[data-sort][aria-sort=ascending]::after{content:"▲";opacity:1;color:var(--accent)}
th[data-sort][aria-sort=descending]::after{content:"▼";opacity:1;color:var(--accent)}
.num{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.empty{padding:30px;text-align:center;color:var(--muted)}
/* モバイル用の並び替えセレクト（既定は隠し、狭い画面でだけ出す） */
.sort-mobile{display:none;align-items:center;gap:8px;margin:12px 0 0;font-size:13px;color:var(--muted)}
.sort-mobile select{font:inherit;padding:6px 8px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--text)}

/* --- チップ（撮影可否） --- */
.chip{display:inline-block;padding:1px 9px;border-radius:20px;font-size:12px;background:var(--chip);white-space:nowrap}
.chip.ok{background:rgba(31,157,87,.12);color:var(--ok)}
.chip.ng{background:rgba(210,75,75,.12);color:var(--ng)}
.chip.nego{background:rgba(201,138,27,.14);color:var(--nego)}

/* --- 店舗個別ページ --- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:0 0 14px}
.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{padding:9px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec th{width:130px;color:var(--muted);font-weight:600;white-space:nowrap}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0}
.stat{flex:1;min-width:120px;background:#fafbfc;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.stat .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.stat .k{font-size:12px;color:var(--muted)}
.faq dt{font-weight:600;margin-top:10px} .faq dd{margin:2px 0 0;color:#333}
.related ul{margin:6px 0 0;padding-left:18px} .related li{margin:3px 0}
.updated{color:var(--muted);font-size:12px}
.contact{font-size:16px;margin:10px 0}

footer{max-width:1040px;margin:0 auto;padding:20px 16px 60px;color:var(--muted);font-size:12px}
footer p{margin:4px 0} footer a{color:var(--muted);text-decoration:underline}

/* --- 年齢確認 --- */
#agegate{position:fixed;inset:0;background:rgba(18,22,28,.985);color:#fff;display:flex;
  align-items:center;justify-content:center;z-index:50;text-align:center;padding:20px}
#agegate[hidden]{display:none}
#agegate .box{max-width:420px}
#agegate h2{font-size:18px;margin:0 0 8px}
#agegate p{color:#c7ccd4;font-size:13px}
#agegate .btns{margin-top:16px;display:flex;gap:12px;justify-content:center}
#agegate button{font:inherit;font-weight:700;border:0;border-radius:8px;padding:10px 22px;cursor:pointer}
#agegate .yes{background:var(--accent);color:#fff} #agegate .no{background:#3a4250;color:#fff}

/* --- レスポンシブ（狭い画面では比較表を横スクロールさせずカード表示にする） --- */
@media (max-width:720px){
  /* 列見出しは隠し、代わりにモバイル用セレクトで並び替える */
  .sort-mobile{display:flex}
  .table-wrap{overflow-x:visible;border:0;background:transparent;border-radius:0;margin-top:8px}
  table.compare{min-width:0;display:block;width:100%}
  table.compare thead{display:none}
  table.compare tbody{display:block}
  /* 1行 = 1店舗のカード。flex-wrap で内部を段組みする
     （店舗名・料金・時間/回数は横幅いっぱい、数値3項目は末尾で3列に並ぶ） */
  table.compare tr.shop{display:flex;flex-wrap:wrap;background:var(--panel);
    border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:2px 14px}
  tbody tr.shop:hover{background:var(--panel)}  /* タップ端末では hover 反転を無効化 */
  /* 店舗名・料金・時間/回数は横幅いっぱいの行。ラベル（「料金」等）は出さず値だけ左寄せで並べる。
     ベース(table.compare td)の下罫線は消し、区切り線は「店舗名の下」と「数値行の上」だけにする */
  table.compare td:not(.num){flex:0 0 100%;display:block;text-align:left;
    padding:7px 0;border-bottom:0;white-space:normal}
  table.compare td:not(.num)::before{content:none}
  /* 店舗名はカードの見出しに（下に区切り線） */
  table.compare td:first-child{padding:9px 0 8px;border-bottom:1px solid var(--line);
    font-size:15px;font-weight:700}
  /* 1行目=料金（値のみ）。料金と時間制限の間には罫線を引かず1ブロックにする */
  table.compare td.price{padding:9px 0 2px}
  /* 2行目=時間・回数制限。あるときだけ ※ を付けて料金の下に小さく出す（空なら行ごと隠す） */
  table.compare td.timelimit{padding:0 0 9px;color:var(--muted);font-size:12px}
  table.compare td.timelimit::before{content:"※"}
  table.compare td.timelimit.is-empty{display:none}
  /* 在籍・撮影OK・口コミは末尾で3等分に並べ、ラベルを上・数値を下にまとめる（上にだけ区切り線） */
  table.compare td.num{flex:1 1 0;text-align:center;padding:10px 4px 6px;
    border-top:1px solid var(--line);border-bottom:0;
    color:var(--text);font-size:15px;font-weight:600;white-space:nowrap}
  table.compare td.num::before{content:attr(data-label);display:block;color:var(--muted);
    font-size:12px;font-weight:600;margin-bottom:3px}
}