/* Chillrug Okinawa — 共通スタイル（日本語・英語ページ共用） */
:root{
  --bg:#110e0c;
  --panel:#1b1512;
  --brown:#2b211b;
  --line:#3a2e26;
  --text:#ece5da;
  --muted:#a89c8d;
  --sand:#cbb698;
  --teal:#16998f;
  --teal-lt:#4fc2b7;
  --serif:"Zen Old Mincho","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",Georgia,"Times New Roman",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic",Meiryo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:20px;
  --display:"Marcellus","Didot","Bodoni 72","Bodoni MT","Hoefler Text",Georgia,serif;
  --max:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.7;
  padding-bottom:64px; /* スマホ下部の固定バーの分 */
  overflow-wrap:anywhere;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--teal-lt);text-underline-offset:3px}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--teal-lt);outline-offset:3px}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table{margin:0;padding:0}
ul,ol{list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:#fff;color:#000;padding:8px 12px}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(17,14,12,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.site-header .wrap{display:flex;align-items:center;gap:16px;height:56px}
.brand{display:block;flex:none;line-height:0}
.brand img{height:34px;width:auto}
.gnav{display:none;margin-left:auto}
.gnav ul{display:flex;gap:22px}
.gnav a{color:var(--text);text-decoration:none;font-size:14px;letter-spacing:.04em}
.gnav a:hover{color:var(--teal-lt)}
.lang{margin-left:auto;font-size:13px;letter-spacing:.08em;color:var(--sand);text-decoration:none;
  border:1px solid var(--line);padding:4px 10px;line-height:1.5}
.lang:hover{border-color:var(--teal);color:#fff}

/* ---------- セクション共通 ---------- */
.sec{padding:44px 0;border-bottom:1px solid var(--line)}
.sec-head{margin-bottom:18px;text-align:center}
.sec-head .note{margin-top:6px}
.disp{font-family:var(--display);font-size:21px;line-height:1.3;letter-spacing:.3em;margin-right:-.3em;color:var(--sand);text-transform:uppercase}
.sec h2,.hero h1{text-wrap:balance;word-break:auto-phrase}
.sec h2{font-family:var(--serif);font-weight:500;font-size:clamp(23px,5.6vw,32px);line-height:1.5;margin-top:6px}
.sec h3{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.5;margin:30px 0 8px;padding-top:16px;border-top:1px solid var(--line)}
.sec h3:first-child{margin-top:0}
.sec h4{font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--sand);margin:22px 0 4px}
.lead{max-width:40em}
.lead + .lead{margin-top:.8em}
.note{font-size:14px;color:var(--muted);margin-top:10px}
.note li{padding-left:1em;text-indent:-1em}
.note li::before{content:"・"}

/* ---------- 写真 ---------- */
figure img{width:100%;object-fit:cover;background:var(--panel)}
figcaption{font-size:11.5px;letter-spacing:.04em;color:var(--muted);padding-top:6px;line-height:1.5}
.ph-wide img{aspect-ratio:3/2}
.ph-tall img{aspect-ratio:4/5}
.ph-sq img{aspect-ratio:1/1}
.about{display:grid;gap:28px}
.about figure img{aspect-ratio:1/1}

/* ---------- 料金表 ---------- */
.price-table{width:100%;border-collapse:collapse;margin-top:6px}
.price-table th,.price-table td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;font-weight:400}
.price-table th small,.plist small{display:block;font-size:13px;color:var(--muted);line-height:1.6}
.price-table td{text-align:right;padding-left:14px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#fff}
.price-table td small{display:block;font-size:12px;color:var(--muted)}
.example{background:var(--panel);border-left:3px solid var(--sand);padding:16px 18px;margin-top:22px;font-size:15px}
.example b{font-weight:600}

.campaign{background:var(--brown);border:1px solid var(--teal);padding:20px 18px;margin-top:28px}
.campaign .tag{display:inline-block;font-size:12px;letter-spacing:.1em;background:var(--teal);color:#fff;padding:2px 10px}
.campaign h3{border:0;padding:0;margin:12px 0 6px}
.campaign .price-table{margin-top:10px}
.campaign .price-table th,.campaign .price-table td{border-color:#4a3a30}

/* ---------- メニュー ---------- */
.plist li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.plist .p{flex:none;font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff}
.all-price{font-size:14px;color:var(--sand);margin-bottom:2px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tags li{border:1px solid var(--line);padding:3px 11px;font-size:14px;line-height:1.6}
.cols{display:grid;gap:0 48px}
.flavor{display:grid;gap:4px 40px}
details{border-bottom:1px solid var(--line)}
details.box{border:1px solid var(--line);margin-top:28px;background:var(--panel)}
summary{cursor:pointer;padding:13px 36px 13px 0;position:relative;list-style:none;font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;margin-top:-7px;
  border-right:1.5px solid var(--teal-lt);border-bottom:1.5px solid var(--teal-lt);transform:rotate(45deg);transition:transform .2s}
details[open]>summary::after{transform:rotate(-135deg);margin-top:-2px}
details.box>summary{padding-left:18px;padding-right:44px;font-family:var(--serif);font-size:18px}
details.box>summary::after{right:20px}
details.box>summary small{display:block;font-family:var(--sans);font-size:13px;color:var(--muted)}
details.box>.inner{padding:0 18px 20px}
.split{display:grid;gap:28px}

/* ---------- 営業時間・案内 ---------- */
.hours{width:100%;border-collapse:collapse}
.hours th,.hours td{padding:13px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.hours td{text-align:right;font-variant-numeric:tabular-nums}
.hours .closed td{color:var(--sand)}
.rules{counter-reset:r}
.rules li{counter-increment:r;position:relative;padding:11px 0 11px 2.4em;border-bottom:1px solid var(--line)}
.rules li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:12px;font-family:var(--serif);color:var(--teal-lt);font-size:14px}
.info{display:grid;grid-template-columns:auto 1fr;gap:0 20px}
.info dt,.info dd{padding:12px 0;border-bottom:1px solid var(--line)}
.info dt{color:var(--muted);font-size:14px;white-space:nowrap}
.map{margin-top:24px;border:1px solid var(--line);background:var(--panel)}
.map iframe{display:block;width:100%;height:320px;border:0;filter:grayscale(.3) contrast(.95)}
.btn{display:inline-block;margin-top:18px;padding:11px 30px;border:1px solid rgba(236,229,218,.7);color:#fff;text-decoration:none;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase}
.btn:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.fill{background:var(--teal)}
.btn.fill:hover{background:#12827a}
.faq summary{font-family:var(--serif);font-size:16px;line-height:1.6}
.faq details p{padding:0 0 18px;max-width:42em}
.contact{text-align:center}
.about .sec-head,.split .sec-head{text-align:left}
.tel{display:inline-block;font-family:var(--serif);font-size:clamp(30px,9vw,44px);color:#fff;text-decoration:none;letter-spacing:.04em;line-height:1.3;margin-top:8px}
.tel:hover{color:var(--teal-lt)}

/* ---------- スマホ下部の固定バー ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;
  background:#0c0a09;border-top:1px solid var(--line)}
.dock a{padding:13px 8px;text-align:center;color:#fff;text-decoration:none;font-size:14px;letter-spacing:.06em}
.dock a + a{border-left:1px solid var(--line)}
.dock a:first-child{background:var(--teal)}

.facts{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);background:var(--brown);max-width:none}
.facts div{padding:14px 0 12px;text-align:center}
.facts div:nth-child(even){border-left:1px solid var(--line)}
.facts div:nth-child(n+3){border-top:1px solid var(--line)}
.facts dt{font-size:10.5px;color:var(--muted);letter-spacing:.18em}
.facts dd{font-family:var(--serif);font-size:19px;line-height:1.45;margin-top:2px}
.facts dd small{display:block;font-family:var(--sans);font-size:11px;color:var(--muted)}
.hbtn{display:none}

/* ---------- ヒーロー：写真を全面に、文字は中央に少しだけ ---------- */
.hero{position:relative;min-height:100svh;margin-top:-56px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg);text-align:center}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(17,14,12,.6) 0%,rgba(17,14,12,.45) 30%,rgba(17,14,12,.62) 70%,rgba(17,14,12,.92) 100%)}
.hero-text{position:relative;z-index:1;padding:80px var(--gutter) 150px}
.hero-kicker{font-size:11px;letter-spacing:.24em;color:var(--sand)}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(27px,7.6vw,54px);line-height:1.45;margin:10px 0 6px;letter-spacing:.08em;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.hero h1 small{display:block;font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.14em;color:#e2d9cc;margin-bottom:14px;line-height:1.7}
.hero-find{position:absolute;z-index:1;left:var(--gutter);bottom:72px;text-align:left;font-size:12.5px;line-height:1.7;letter-spacing:.06em;color:#e6ddd0}
.hero-find span{display:block;font-size:10.5px;letter-spacing:.24em;color:var(--sand);margin-bottom:4px}
.hero-find a{color:#fff;text-decoration:none}
.hbtn{display:none}

/* ---------- 空間：写真と文章を左右交互に ---------- */
.feat{margin-top:34px}
.feat-ph{margin:0 calc(var(--gutter)*-1)}
.feat-ph img{aspect-ratio:4/5}
.feat.rev .feat-ph img,#vip .feat-ph img{aspect-ratio:3/2}
.feat-tx{padding-top:18px}
.sec .feat-tx h3{border:0;margin:2px 0 8px;padding:0;font-size:22px;letter-spacing:.06em}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:16px}
.trio img{aspect-ratio:4/5}
.pos-l img{object-position:8% 50%}
.feat .price-table{margin-top:10px}

/* ---------- 営業時間 ---------- */
.hours-big{text-align:center;padding:6px 0 26px}
.hb-time{font-family:var(--display);font-size:clamp(40px,12vw,68px);line-height:1.2;letter-spacing:.04em;color:#fff}
.hb-sub{font-size:13px;letter-spacing:.1em;color:var(--muted)}
.hb-closed{display:inline-block;margin-top:12px;padding:5px 18px;border:1px solid var(--line);color:var(--sand);letter-spacing:.14em;font-size:13px}

/* ---------- フッター ---------- */
.site-footer{padding:40px 0 32px;font-size:13.5px;color:var(--muted);text-align:center}
.fcols{display:grid;gap:22px;margin-bottom:30px}
.site-footer h2{font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--sand);margin-bottom:6px}
.site-footer img{height:52px;width:auto;margin:0 auto 12px}
.site-footer .small{font-size:12px;line-height:1.8}

/* ---------- メニューの写真 ---------- */
.menu-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0 4px}
.menu-photos .mp-big{grid-column:1/-1;margin:0 calc(var(--gutter)*-1)}
.menu-photos .mp-big img{aspect-ratio:3/2;object-position:50% 72%}
.menu-photos .mp-big figcaption{padding-left:var(--gutter)}
.menu-photos figure:not(.mp-big) img{aspect-ratio:1/1}
details.box{margin-top:10px}
details.box + details.box{margin-top:8px}
details.box .inner > div:first-child h4{margin-top:4px}

/* ---------- 600px〜 ---------- */
@media (min-width:600px){
  :root{--gutter:32px}
  .cols{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:repeat(4,1fr)}
  .facts div{border-top:0 !important;border-left:1px solid var(--line)}
  .facts div:first-child{border-left:0}
  .menu-photos{gap:12px}
  .flavor{grid-template-columns:1fr 1fr}
  .news .wrap{display:block}
  .news-label{margin-right:14px}
}

/* ---------- 900px〜 ---------- */
@media (min-width:900px){
  body{font-size:15.5px;padding-bottom:0}
  .dock{display:none}
  .gnav{display:block}
  .lang{margin-left:8px}
  .site-header .wrap{height:64px}
  .hbtn{display:inline-block;margin-left:18px;font-size:12px;letter-spacing:.2em;color:#fff;text-decoration:none;border:1px solid rgba(236,229,218,.7);padding:8px 18px;line-height:1.5}
  .hbtn:hover{background:var(--teal);border-color:var(--teal);color:#fff}
  .hero{margin-top:-64px}
  .hero-img{left:50%;right:auto;width:min(74%,1180px);transform:translateX(-50%);object-position:50% 26%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%)}
  .hero::after{background:linear-gradient(to bottom,rgba(17,14,12,.5) 0%,rgba(17,14,12,.3) 30%,rgba(17,14,12,.5) 70%,rgba(17,14,12,.9) 100%)}
  .hero-text{padding:90px 32px 120px}
  .hero-find{left:max(32px,calc((100vw - var(--max))/2 + 32px));bottom:40px;font-size:13px}
  .disp{font-size:30px}
  .feat{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center;margin-top:64px}
  .feat.rev{grid-template-columns:5fr 7fr}
  .feat.rev .feat-ph{order:2}
  .feat-ph{margin:0}
  .feat-ph img,.feat.rev .feat-ph img,#vip .feat-ph img{aspect-ratio:4/3}
  .pos-t img{object-position:50% 22%}
  .feat-tx{padding-top:0}
  .sec .feat-tx h3{font-size:26px}
  .trio{gap:8px}
  .trio img{aspect-ratio:1/1}
  .trio figcaption{font-size:10.5px}
  .fcols{grid-template-columns:repeat(3,1fr);gap:32px}
  .sec-head{margin-bottom:28px}
  .hbtn{display:inline-block;margin-left:18px;font-size:13px;letter-spacing:.08em;color:#fff;text-decoration:none;background:var(--teal);padding:7px 16px;line-height:1.5}
  .hbtn:hover{background:#12827a;color:#fff}
  .facts dd{font-size:22px}
  .facts div{padding:20px 0 18px}
  .menu-photos{grid-template-columns:2fr 1fr 1fr 1fr;margin-top:22px}
  .menu-photos figure{display:flex;flex-direction:column}
  .menu-photos .mp-big{grid-column:auto;margin:0}
  .menu-photos .mp-big img{aspect-ratio:auto;flex:1 1 0;height:0;min-height:0}
  .menu-photos .mp-big figcaption{padding-left:0}
  .sec{padding:68px 0}
  .sec-head{margin-bottom:20px}
  .about{grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .split{grid-template-columns:5fr 4fr;gap:64px;align-items:start}
  .narrow{max-width:760px;margin-left:auto;margin-right:auto}
  .flavor{grid-template-columns:repeat(4,1fr)}
  .map iframe{height:420px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}summary::after{transition:none}}
@media print{.dock,.site-header,.map{display:none}body{background:#fff;color:#000}}

/* ---------- 仕上げ ---------- */
.hero-text::before{content:"";position:absolute;z-index:-1;inset:-10% -30%;background:radial-gradient(closest-side,rgba(17,14,12,.72),rgba(17,14,12,0))}
#access .wrap,#guide .wrap{text-align:center}
#access .info,#guide .rules{text-align:left}
/* production type patch: display weight for Zen Old Mincho */
.sec h2, .sec h3, .hero h1, .faq summary, details.box > summary { font-weight: 700; }

/* production hero patch: brand-first (2026-11-15, Sasho's call) */
.hero h1 { font-family: var(--display); letter-spacing: .02em; line-height: 1.1; }
.hero h1 .h-brand { display: block; font-size: clamp(68px, 15vw, 132px); font-weight: 400; line-height: 1.02; }
.hero h1 .h-place { display: block; font-size: clamp(14px, 3vw, 21px); letter-spacing: .55em; margin-right: -.55em; text-transform: uppercase; color: #e2d9cc; margin-top: 12px; font-weight: 400; }
.hero-lead { font-family: var(--serif); font-weight: 700; font-size: clamp(17px, 3.6vw, 25px); line-height: 1.6; letter-spacing: .06em; margin: 20px 0 26px; text-shadow: 0 1px 14px rgba(0,0,0,.6); }