@charset "utf-8";
*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --bg:#f5f2ec;--card:#ffffff;--ink:#1f1f1f;--sub:#767676;
  --accent:#e8600e;--accent-bg:#fff4ea;--line:#e4dfd7;--star:#f2a900;
  --lh:1.78;--ls:0em;--head:#ffffff;
}
html.p1{--bg:#f4f1eb;--sub:#757372;--line:#e3ded6;--lh:1.76}
html.p2{--bg:#f2efe9;--accent:#e4600f;--accent-bg:#fdf3ea;--sub:#747271;--line:#e1dcd4;--lh:1.73}
html.p3{--bg:#efece7;--accent:#de5f13;--accent-bg:#faf1e9;--sub:#787674;--line:#dfdad2;--star:#eda404;--lh:1.69;--head:#fdfcfb}
html.p4{--bg:#ebe9e4;--accent:#d55e18;--accent-bg:#f6efe8;--ink:#232323;--sub:#7b7977;--line:#dcd7d0;--star:#e29f08;--lh:1.65;--ls:.002em;--head:#fbfaf9}
html.p5{--bg:#e7e5e1;--accent:#c85d1f;--accent-bg:#f1ece6;--ink:#252525;--sub:#7f7d7a;--line:#d9d4ce;--star:#d59a12;--lh:1.60;--ls:.004em;--head:#f9f8f7;--card:#fefefd}
html.p6{--bg:#e3e1de;--accent:#b85b26;--accent-bg:#ecE7E2;--ink:#272727;--sub:#838180;--line:#d5d1cc;--star:#c69117;--lh:1.54;--ls:.008em;--head:#f6f5f4;--card:#fdfdfc}
html.p7{--bg:#dfddda;--accent:#a5572c;--accent-bg:#e8e4e0;--ink:#2a2a2a;--sub:#878584;--line:#d0ccc8;--star:#b3861f;--lh:1.48;--ls:.012em;--head:#f2f1f0;--card:#fbfbfa}
html.p8{--bg:#dcdad8;--accent:#915331;--accent-bg:#e5e2de;--ink:#2c2c2c;--sub:#8b8988;--line:#ccc9c6;--star:#997629;--lh:1.41;--ls:.017em;--head:#efeeed;--card:#f9f8f7}
html.p9{--bg:#d9d8d7;--accent:#6f4a3c;--accent-bg:#e2e0de;--ink:#2e2e2e;--sub:#8f8d8b;--line:#c9c7c5;--star:#7d6a3a;--lh:1.34;--ls:.022em;--head:#ecebea;--card:#f6f5f4}

body{background:var(--bg);color:var(--ink);letter-spacing:var(--ls);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-size:14px;line-height:var(--lh);-webkit-font-smoothing:antialiased}
a{color:#1a6ba8;text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%;display:block}

/* header */
.hdr{background:var(--head);border-bottom:3px solid var(--accent)}
.hdr-in{max-width:1000px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo{font-size:23px;font-weight:800;color:var(--accent);letter-spacing:.06em;white-space:nowrap}
.logo small{display:block;font-size:10px;color:var(--sub);font-weight:400;letter-spacing:.12em}
.gnav{margin-left:auto;display:flex;gap:14px;font-size:12px;color:var(--sub);align-items:center}
.gnav a{color:var(--sub)}
.me{color:var(--ink);font-weight:700}

/* searchbar */
.sbar{background:var(--accent-bg);border-bottom:1px solid var(--line)}
.sbar-in{max-width:1000px;margin:0 auto;padding:10px 16px;display:flex;gap:8px;flex-wrap:wrap}
.sbar input[type=text],.sbar select{padding:7px 10px;border:1px solid var(--line);background:#fff;font-size:13px;font-family:inherit;color:var(--ink);border-radius:2px}
.sbar input[type=text]{flex:1;min-width:180px}
.btn{background:var(--accent);color:#fff;border:0;padding:8px 20px;font-size:13px;font-weight:700;cursor:pointer;border-radius:2px;font-family:inherit}
.btn:hover{opacity:.88}
.btn.sub{background:#fff;color:var(--accent);border:1px solid var(--accent)}

/* layout */
.wrap{max-width:1000px;margin:0 auto;padding:16px}
.cols{display:flex;gap:16px;align-items:flex-start}
.main{flex:1;min-width:0}
.side{width:250px;flex-shrink:0}
@media(max-width:760px){.cols{display:block}.side{width:auto;margin-top:16px}}
.crumb{font-size:11px;color:var(--sub);padding:8px 0}
.crumb a{color:var(--sub)}
.card{background:var(--card);border:1px solid var(--line);padding:16px;margin-bottom:14px}
h1.ttl{font-size:24px;margin:0 0 4px;font-weight:700}
h2.sec{font-size:15px;margin:0 0 10px;padding-left:9px;border-left:4px solid var(--accent);font-weight:700}
h3{font-size:14px;margin:0 0 6px}
.muted{color:var(--sub);font-size:12px}

/* rating */
.stars{color:var(--star);letter-spacing:2px;font-size:15px}
.stars .off{color:#d8d4cd}
.score{font-size:26px;font-weight:800;color:var(--accent);line-height:1}
.rate-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* shop head */
.shophead{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.shophead .thumb{width:240px;flex-shrink:0}
.tags span{display:inline-block;background:var(--accent-bg);border:1px solid var(--line);color:var(--sub);font-size:11px;padding:1px 7px;margin:0 4px 4px 0}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.tbl th{background:var(--accent-bg);width:110px;font-weight:700;color:var(--sub);white-space:nowrap}

/* grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.grid.g2{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.ph{border:1px solid var(--line);background:var(--card);overflow:hidden;position:relative;display:flex;flex-direction:column}
.ph .photo-svg{flex:0 0 auto}
.ph .cap{margin-top:auto}
.ph .cap{background:var(--card);border-top:1px solid var(--line);padding:6px 8px;font-size:11px;color:var(--sub)}
.ph .cap b{display:block;color:var(--ink);font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-svg{width:100%;height:auto;aspect-ratio:4/3;display:block}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--accent);margin-bottom:14px;flex-wrap:wrap}
.tabs a{padding:8px 16px;background:var(--accent-bg);border:1px solid var(--line);border-bottom:0;font-size:13px;color:var(--sub)}
.tabs a.on{background:var(--accent);color:#fff;font-weight:700}

/* reviews */
.rev{border-bottom:1px solid var(--line);padding:14px 0}
.rev:last-child{border-bottom:0}
.rev-h{display:flex;gap:10px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.av{width:34px;height:34px;border-radius:50%;background:var(--accent-bg);border:1px solid var(--line);flex-shrink:0;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--sub)}
.rev-n{font-weight:700;font-size:13px}
.rev-d{font-size:11px;color:var(--sub);margin-left:auto}
.rev-b{font-size:13px;white-space:pre-wrap}
.rev-b.empty{color:#c9c5be}
.gone{color:#a09c96;font-weight:400!important}

/* rank list */
.rank{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.rank:last-child{border-bottom:0}
.rank .no{width:26px;height:26px;background:var(--accent);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rank .no.n2{background:#a8a29a}.rank .no.n3{background:#b08d5f}
.rank .tb{width:120px;flex-shrink:0}
.rank .info{flex:1;min-width:0}
.closed{opacity:.55}
.closed .no{background:#b9b6b1}
.badge{display:inline-block;font-size:10px;border:1px solid var(--line);color:var(--sub);padding:0 5px;background:var(--bg)}

/* notice */
.notice{background:var(--accent-bg);border:1px solid var(--line);border-left:4px solid var(--accent);padding:10px 14px;font-size:13px;margin-bottom:14px}

/* form */
.form label{display:block;font-size:12px;font-weight:700;margin:12px 0 4px}
.form input[type=text],.form textarea,.form select{width:100%;padding:8px;border:1px solid var(--line);font-family:inherit;font-size:13px;background:#fff;color:var(--ink);border-radius:2px}
.form textarea{min-height:120px;resize:vertical}

/* footer */
.foot{background:var(--head);border-top:1px solid var(--line);margin-top:26px;padding:20px 16px;color:var(--sub);font-size:11px}
html.p7 .foot{font-family:"Yu Mincho","Hiragino Mincho ProN",serif}
html.p8 .foot{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.09em}
html.p9 .foot{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.14em}
.foot-in{max-width:1000px;margin:0 auto}
.foot nav{margin-bottom:8px}
.foot nav a{color:var(--sub);margin-right:14px}
.counter{font-family:monospace;letter-spacing:.08em}
.end{position:fixed;inset:0;background:#e9e7e4;z-index:99;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;opacity:0;transition:opacity 6s ease}
.end.on{opacity:1}
.end p{font-size:15px;color:#4f4b47;letter-spacing:.34em;margin:0;text-align:center;padding:0 24px;line-height:2.4}

/* ---- ブログ ---- */
.post{background:var(--card);border:1px solid var(--line);padding:18px 20px;margin-bottom:14px}
.post h3{font-size:17px;margin:0 0 4px;font-weight:700}
.post .meta{font-size:11px;color:var(--sub);margin-bottom:12px;border-bottom:1px dotted var(--line);padding-bottom:8px}
.post .body{font-size:13.5px;white-space:pre-wrap}
.post .body p{margin:0 0 1em}
.arc{font-size:12px;line-height:2.1}
.arc a{display:inline-block;margin-right:10px}
.arc .yr{font-weight:700;color:var(--ink);display:block;margin-top:8px}
.cmt{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.cmt .c{font-size:12px;padding:8px 0;border-bottom:1px dotted var(--line)}
.cmt .c:last-child{border-bottom:0}
.cmt .c b{font-weight:700}
.cmt .c .t{color:var(--sub);font-size:11px;margin-left:8px}
.pager{display:flex;justify-content:space-between;font-size:12px;margin:6px 0 20px}
.entrylist a{display:block;padding:9px 0;border-bottom:1px dotted var(--line);font-size:13px}
.entrylist .d{color:var(--sub);font-size:11px;margin-right:10px;font-family:monospace}
.entrylist .new{color:#c0392b;font-size:10px;margin-left:6px}
.entrylist a.read{color:#7a6f96}

/* ---- 長文ページ（規約・FAQ） ---- */
.doc{font-size:13px}
.doc h3{font-size:14px;margin:22px 0 6px;font-weight:700}
.doc p{margin:0 0 10px}
.doc ol{padding-left:1.4em;margin:0 0 10px}
.doc li{margin-bottom:5px}
.qa{border-bottom:1px solid var(--line);padding:14px 0}
.qa:last-child{border-bottom:0}
.qa .q{font-weight:700;font-size:13px;margin-bottom:6px}
.qa .q:before{content:"Q. ";color:var(--accent)}
.qa .a{font-size:13px;color:var(--ink)}
.qa .a:before{content:"A. ";color:var(--sub);font-weight:700}

/* ---- 写真ビューア ---- */
.viewer{margin:0 0 16px}
.viewer-img{background:#0b0b0b;border:1px solid var(--line);max-width:min(100%,calc(64vh * 4 / 3));margin:0 auto}
/* 新聞・メニュー・レシート・看板は文字を読ませる絵なので、画面いっぱいまで使う */
.viewer-img.wide{max-width:min(100%,calc(88vh * 4 / 3))}
.viewer-img .photo-svg{width:100%;height:auto;aspect-ratio:4/3;display:block}
.viewer-bar{max-width:min(100%,calc(64vh * 4 / 3));margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-top:0;padding:9px 14px;font-size:12px}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.thumbs a{display:block;border:1px solid var(--line);overflow:hidden;line-height:0}
.thumbs a.on{outline:2px solid var(--accent);outline-offset:-2px}
.grid .ph a,a.ph{display:block;color:inherit;text-decoration:none}
a.ph:hover{border-color:var(--accent)}

/* ---- 実写写真を差し込んだとき ---- */
.photo-real{position:relative;overflow:hidden;line-height:0;container-type:inline-size}
.photo-real img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  transform-origin:50% 50%}
.photo-hand{position:absolute;white-space:nowrap;pointer-events:none;line-height:1;
  font-family:"Segoe Script","Bradley Hand","Yu Gothic",cursive;
  mix-blend-mode:multiply;opacity:.92}

/* 一覧のサムネイルにかぶせる運営の注意書き。
   終盤は腐った料理が20枚以上並ぶので、そのまま出すと気持ち悪さだけが勝つ。
   サイト側が自分の写真を隠し始める、という形にして、
   見るかどうかをプレイヤーに選ばせる。開けばちゃんと出る。 */
.ph .veil{position:absolute;left:0;right:0;top:0;bottom:0;background:#e9e6e0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:14px;text-align:center;z-index:2}
.ph .veil .vt{font-size:11px;line-height:1.75;color:#6b6560}
.ph .veil .vb{font-size:11px;color:#8a5a2b;border:1px solid #cfc6b8;background:#fff;
  padding:4px 12px;border-radius:2px}
.ph .veil ~ .cap{position:relative;z-index:3}
/* 小さい枠用。文字は入れず、伏せてあることだけ分かればよい */
.veil.mini{background:#e5e2dc;border:0}
.thumbs a{position:relative;display:block}
.rank .tb{position:relative;overflow:hidden}