:root{
  --ink:#241d17; --brown:#4a3728; --greige:#9e958a;
  --pale:#efe8e1; --bg:#fcfaf8; --line:#e0d7ce; --warn:#a8674a;
  --wood:#9c7a54;
  --mincho:"Shippori Mincho",'Hiragino Mincho ProN','Yu Mincho',serif;
  --gothic:"Zen Kaku Gothic New",'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --pad:clamp(20px,6vw,80px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--gothic);
  font-weight:300;font-size:15px;line-height:2;letter-spacing:.05em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}
.hidden{display:none !important}

/* ============ トップページ ============ */
.head{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:18px var(--pad);transition:background .4s}
.head.solid{background:rgba(252,250,248,.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.logo{font-family:var(--mincho);font-size:20px;letter-spacing:.22em;color:#fff;transition:color .4s}
.logo small{display:block;font-family:var(--gothic);font-size:9px;letter-spacing:.3em;opacity:.85;margin-top:2px}
.head.solid .logo{color:var(--ink)}
.nav{display:flex;align-items:center;gap:26px;font-size:12px;letter-spacing:.16em;color:#fff;transition:color .4s}
.head.solid .nav{color:var(--brown)}
.nav .bk{border:1px solid currentColor;padding:9px 22px;font-size:11px;letter-spacing:.18em;
  transition:background .3s,color .3s,border-color .3s}
.nav .bk:hover{background:var(--brown);border-color:var(--brown);color:#fff}
@media(max-width:820px){.nav .lk{display:none}}

.hero{position:relative;height:100svh;min-height:500px;overflow:hidden}
.hero-img{position:absolute;inset:0;background:#4a3728 60% center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(36,30,26,.30),rgba(36,30,26,0) 38%,rgba(36,30,26,.34))}
.hero-copy{position:absolute;z-index:2;left:var(--pad);bottom:16vh;writing-mode:vertical-rl;
  font-family:var(--mincho);color:#fff;font-size:clamp(21px,3.4vw,34px);line-height:2.1;
  letter-spacing:.3em;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.hero-sub{position:absolute;z-index:2;right:var(--pad);bottom:16vh;color:#fff;text-align:right;
  font-size:12px;letter-spacing:.22em;line-height:2.4;text-shadow:0 1px 12px rgba(0,0,0,.5)}


/* スマホ：トップ画像を切らずに全体を表示する */
@media(max-width:820px){
  .hero{height:auto;min-height:0;aspect-ratio:1249/848}
  .hero-img{background-position:center}
  .hero::after{background:linear-gradient(180deg,rgba(36,30,26,.18),rgba(36,30,26,0) 30%,rgba(36,30,26,.34))}
  .hero-copy{bottom:14px;font-size:18px;letter-spacing:.22em}
  .hero-sub{bottom:12px;font-size:10px;letter-spacing:.14em;line-height:1.8}
}
section{padding:clamp(60px,10vw,116px) var(--pad)}
.wrap{max-width:1080px;margin:0 auto}
.h2{font-family:var(--mincho);font-weight:400;font-size:clamp(22px,3vw,30px);letter-spacing:.16em;margin:0 0 6px}
.en{font-size:10px;letter-spacing:.32em;color:var(--greige);margin:0 0 38px}

.news{background:var(--pale);padding-top:clamp(46px,7vw,70px);padding-bottom:clamp(46px,7vw,70px)}
.news-grid{display:grid;grid-template-columns:200px 1fr;gap:clamp(18px,4vw,52px);align-items:start}
.news ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.news li{border-bottom:1px solid var(--line);display:flex;gap:20px;padding:15px 0;align-items:baseline}
.news time{font-size:11px;letter-spacing:.12em;color:var(--greige);flex:0 0 84px}
.news p{margin:0;font-size:14px;line-height:1.85}
@media(max-width:760px){.news-grid{grid-template-columns:1fr}.news li{flex-direction:column;gap:2px}}

.concept{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,6vw,76px);align-items:center}
.concept-fig{aspect-ratio:4/5;background:#e3ded7 center/cover no-repeat}
.concept .mark{font-family:var(--mincho);font-size:clamp(25px,4vw,38px);letter-spacing:.1em;
  line-height:1.7;margin:0 0 24px}
.concept p.t{max-width:34em;line-height:2.4;margin:0 0 20px}
@media(max-width:820px){.concept{grid-template-columns:1fr}}

.menu{background:var(--pale)}
.mlist{border-top:1px solid var(--line)}
.item{display:grid;grid-template-columns:230px 1fr 130px;gap:clamp(14px,3vw,38px);
  padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.item h3{font-family:var(--mincho);font-weight:500;font-size:17px;letter-spacing:.1em;margin:0;line-height:1.8}
.item h3 span{display:block;font-family:var(--gothic);font-size:10px;letter-spacing:.22em;
  color:var(--greige);margin-top:6px}
.item p{margin:0;font-size:13.5px;line-height:2.1;color:var(--brown)}
.price{font-family:var(--mincho);font-size:19px;text-align:right;white-space:nowrap}
.price small{display:block;font-family:var(--gothic);font-size:10.5px;color:var(--wood);margin-top:5px}
@media(max-width:760px){.item{grid-template-columns:1fr;gap:8px;padding:22px 0}.price{text-align:left}}
.note{font-size:11.5px;color:var(--greige);margin-top:20px;line-height:2}

.reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:12px}
.reason{background:var(--bg);padding:32px 24px}
.reason h4{font-family:var(--mincho);font-weight:400;font-size:16px;letter-spacing:.1em;margin:0 0 10px}
.reason p{margin:0;font-size:12.5px;line-height:2;color:var(--brown)}
@media(max-width:900px){.reasons{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.reasons{grid-template-columns:1fr}}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px;padding:0}
.gallery div{aspect-ratio:1/1;background:#e3ded7 center/cover no-repeat}
@media(max-width:640px){.gallery{grid-template-columns:1fr 1fr}}

.staff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,300px));gap:clamp(22px,5vw,52px)}
.staff-fig{aspect-ratio:3/4;background:#e3ded7 center/cover no-repeat;margin-bottom:15px}
.staff h4{font-family:var(--mincho);font-weight:400;font-size:18px;letter-spacing:.14em;margin:0 0 4px}
.staff .role{font-size:10px;letter-spacing:.22em;color:var(--greige);margin:0 0 12px}
.staff p{margin:0;font-size:13px;line-height:2.1;color:var(--brown)}

.access{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,6vw,68px)}
.data{width:100%;border-collapse:collapse;font-size:13px}
.data th,.data td{border-bottom:1px solid var(--line);padding:13px 0;text-align:left;
  vertical-align:top;line-height:2}
.data th{width:100px;font-weight:400;color:var(--greige);font-size:11.5px;letter-spacing:.12em}
.map{aspect-ratio:1/1;border:0;width:100%;filter:grayscale(1)}
@media(max-width:820px){.access{grid-template-columns:1fr}}

.cta{background:var(--brown);color:#fff;text-align:center}
.cta .h2{color:#fff}.cta .en{color:#c3b3a8}
.cta p{max-width:30em;margin:0 auto 32px;color:#e8ded6;font-size:13.5px}
.cta a{display:inline-block;border:1px solid rgba(255,255,255,.65);padding:16px 52px;
  font-size:12px;letter-spacing:.22em;transition:background .3s,color .3s;margin:0 6px 10px}
.cta a:hover{background:#fff;color:var(--brown)}
footer{padding:46px var(--pad) 104px;text-align:center;font-size:11px;letter-spacing:.12em;color:var(--greige)}
footer .fl{font-family:var(--mincho);font-size:17px;letter-spacing:.24em;color:var(--ink);margin-bottom:12px}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;background:var(--brown);
  color:#fff;text-align:center;padding:16px;font-size:12.5px;letter-spacing:.2em}
@media(max-width:820px){.bar{display:block}}

/* ============ 予約ページ ============ */
.rv{max-width:720px;margin:0 auto;padding:26px 20px 120px}
.rv-top{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:20}
.rv-top-in{max-width:720px;margin:0 auto;padding:15px 20px;display:flex;
  align-items:center;justify-content:space-between}
.rv-brand{font-family:var(--mincho);font-size:18px;letter-spacing:.2em}
.rv-brand small{display:block;font-family:var(--gothic);font-size:9px;letter-spacing:.26em;color:var(--greige)}
.steps{display:flex;gap:4px;margin-bottom:9px}
.steps span{flex:1;height:3px;background:var(--line)}
.steps span.on{background:var(--brown)}
.slabel{font-size:11px;letter-spacing:.14em;color:var(--greige);margin:0 0 20px}
.sh{font-family:var(--mincho);font-size:21px;letter-spacing:.1em;margin:0 0 6px;font-weight:400}
.snote{font-size:12.5px;color:var(--greige);margin:0 0 22px;line-height:1.9}
.card{width:100%;text-align:left;background:#fff;border:1px solid var(--line);padding:19px;
  margin-bottom:11px;display:block;transition:border-color .2s}
.card:hover{border-color:var(--greige)}
.card h3{font-family:var(--mincho);font-weight:500;font-size:16px;margin:0 0 6px;letter-spacing:.08em}
.card p{margin:0;font-size:12.5px;color:var(--brown);line-height:1.9}
.card .meta{display:flex;gap:16px;margin-top:9px;font-size:12px;color:var(--greige);flex-wrap:wrap}
.card .yen{font-family:var(--mincho);font-size:17px;color:var(--ink)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.cal-head strong{font-family:var(--mincho);font-weight:400;font-size:17px;letter-spacing:.1em}
.cnav{background:none;border:1px solid var(--line);width:38px;height:38px;color:var(--brown)}
.cnav:disabled{opacity:.3;cursor:default}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .dow{text-align:center;font-size:10.5px;color:var(--greige);padding:5px 0}
.day{aspect-ratio:1/1;border:1px solid var(--line);background:#fff;display:flex;
  flex-direction:column;align-items:center;justify-content:center;font-size:14px;padding:0}
.day .mk{font-size:10px;color:var(--greige)}
.day:disabled{background:#f6f2ee;color:#cfc4bb;cursor:default}
.day.empty{border:0;background:none}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.slot{border:1px solid var(--line);background:#fff;padding:14px 4px;font-size:14px}
.slot:hover{border-color:var(--greige)}
.fi{margin-bottom:20px}
.fi label{display:block;font-size:11.5px;letter-spacing:.12em;color:var(--greige);margin-bottom:7px}
.fi .rq{color:var(--warn);margin-left:8px}
.fi input,.fi textarea{width:100%;background:#fff;border:1px solid var(--line);padding:12px 13px;
  font-family:inherit;font-size:15px;font-weight:300;border-radius:0}
.fi textarea{min-height:90px;resize:vertical}
.fi input:focus,.fi textarea:focus{outline:none;border-color:var(--brown)}
.fi.bad input{border-color:var(--warn)}
.fi .er{color:var(--warn);font-size:11.5px;margin-top:5px;display:none}
.fi.bad .er{display:block}
.sum{border-top:1px solid var(--line)}
.sum div{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.sum dt{flex:0 0 92px;font-size:11.5px;color:var(--greige);margin:0;padding-top:3px}
.sum dd{margin:0;flex:1}
.pol{background:var(--pale);padding:19px;margin-top:24px;font-size:12.5px;line-height:2;color:var(--brown)}
.acts{display:flex;gap:11px;margin-top:28px}
.bt{flex:1;padding:17px 10px;font-size:13px;letter-spacing:.16em;border:1px solid var(--brown);
  background:var(--brown);color:#fff;text-align:center}
.bt:hover{opacity:.86}
.bt.gh{background:none;color:var(--brown);flex:0 0 38%}
.done{text-align:center;padding:16px 0}
.done .mk2{font-family:var(--mincho);font-size:23px;letter-spacing:.1em;margin:0 0 10px}
.done .code{font-family:var(--mincho);font-size:29px;letter-spacing:.14em;margin:24px 0 2px}
.done .cl{font-size:11px;letter-spacing:.18em;color:var(--greige);margin:0 0 26px}
.mt{border:1px solid var(--line);background:#fff;padding:32px 20px;text-align:center;
  font-size:13px;color:var(--greige);line-height:2}

/* ============ 編集画面 ============ */
.ad{max-width:900px;margin:0 auto;padding:24px 20px 130px}
.ad-bar{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.ad-bar-in{max-width:900px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;flex-wrap:wrap}
.ad-bar h1{font-family:var(--mincho);font-size:17px;font-weight:400;letter-spacing:.14em;margin:0}
.ad-bar h1 small{display:block;font-family:var(--gothic);font-size:10px;letter-spacing:.18em;color:var(--greige)}
.btn{border:1px solid var(--brown);background:var(--brown);color:#fff;padding:11px 20px;
  font-size:12.5px;letter-spacing:.08em}
.btn:hover{opacity:.86}
.btn.gh{background:none;color:var(--brown)}
.btn.sm{padding:7px 13px;font-size:11.5px}
.btn.wn{border-color:var(--warn);color:var(--warn);background:none}
.tabs{max-width:900px;margin:0 auto;padding:0 20px;display:flex;gap:2px;overflow-x:auto;
  border-bottom:1px solid var(--line)}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:13px 15px;
  font-size:13px;color:var(--greige);white-space:nowrap}
.tab.on{color:var(--ink);border-bottom-color:var(--brown)}
.pane{display:none}.pane.on{display:block}
.ad h2{font-family:var(--mincho);font-weight:400;font-size:19px;letter-spacing:.1em;margin:26px 0 6px}
.ad h2:first-child{margin-top:0}
.hint{font-size:12.5px;color:var(--greige);margin:0 0 22px;line-height:1.9}
.f{margin-bottom:18px}
.f label{display:block;font-size:11.5px;letter-spacing:.1em;color:var(--greige);margin-bottom:7px}
.f input,.f textarea,.f select{width:100%;background:#fff;border:1px solid var(--line);
  padding:11px 12px;font-family:inherit;font-size:14px;font-weight:300;border-radius:0}
.f textarea{min-height:80px;resize:vertical;line-height:1.8}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--brown)}
.f .sub{font-size:11.5px;color:var(--greige);margin-top:6px;line-height:1.7}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 18px}
@media(max-width:640px){.g2,.g3{grid-template-columns:1fr}}
.row{background:#fff;border:1px solid var(--line);padding:18px;margin-bottom:13px}
.row-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.row-h strong{font-family:var(--mincho);font-weight:500;font-size:14px;letter-spacing:.06em}
.del{border:1px solid var(--line);background:none;color:var(--warn);padding:6px 12px;font-size:11.5px}
.add{width:100%;border:1px dashed var(--greige);background:none;color:var(--brown);padding:13px;font-size:12.5px}
.add:hover{background:var(--pale)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px}
.chk input{width:17px;height:17px;accent-color:var(--brown);flex:0 0 auto}
.chks{display:flex;flex-wrap:wrap;gap:6px 18px}
.info{background:var(--pale);border-left:3px solid var(--greige);padding:15px 17px;
  font-size:12.5px;line-height:1.95;margin-bottom:22px}
.info.al{border-left-color:var(--warn)}
.ph{background:#fff;border:1px solid var(--line);padding:16px;margin-bottom:13px;
  display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:start}
.ph-pv{background:var(--pale);border:1px solid var(--line);overflow:hidden;display:flex;
  align-items:center;justify-content:center;color:var(--greige);font-size:11px}
.ph-pv img{width:100%;height:100%;object-fit:cover}
.ph h4{font-family:var(--mincho);font-weight:500;font-size:15px;margin:0 0 4px;letter-spacing:.06em}
.fbtn{position:relative;overflow:hidden;display:inline-block}
.fbtn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.pstat{font-size:11.5px;color:var(--greige);margin-top:8px}
.pstat.ok{color:#5c7a5e}
@media(max-width:560px){.ph{grid-template-columns:1fr}.ph-pv{max-width:190px}}
.bk-row{display:grid;grid-template-columns:110px 90px 1fr auto;gap:10px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
@media(max-width:640px){.bk-row{grid-template-columns:1fr auto;gap:3px 10px}}

/* ===== スマホでの編集画面 ===== */
@media(max-width:640px){
  .ad{padding:20px 14px 150px}
  .ad-bar-in{padding:12px 14px}
  .tabs{padding:0 14px}
  .tab{padding:13px 12px;font-size:12.5px}
  .btn{padding:14px 18px;font-size:13px}
  .btn.sm{padding:12px 16px;font-size:12.5px}
  .del{padding:10px 14px;font-size:12.5px}
  .add{padding:16px}
  .f input,.f textarea,.f select{padding:13px 12px;font-size:16px}
  .row{padding:15px}
  dialog{width:100%;max-width:none;margin:0;position:fixed;left:0;right:0;bottom:0;top:auto;
    max-height:92vh;overflow-y:auto;border-left:0;border-right:0;border-bottom:0}
  .dlg{padding:20px 16px 28px}
  .save-in{padding:11px 14px}
  .bk-row{padding:14px 0}
}
.sync{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.codebox{width:100%;min-height:130px;font-family:monospace;font-size:12px;background:#fff;
  border:1px solid var(--line);padding:12px;border-radius:0;line-height:1.5}
.save{position:fixed;left:0;right:0;bottom:0;background:rgba(252,250,248,.97);
  backdrop-filter:blur(8px);border-top:1px solid var(--line);z-index:40}
.save-in{max-width:900px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;flex-wrap:wrap}
.save p{margin:0;font-size:11.5px;color:var(--greige)}
.bdg{display:inline-block;background:var(--warn);color:#fff;font-size:10.5px;padding:2px 9px;margin-left:8px}
.bdg.ok{background:#5c7a5e}
dialog{border:1px solid var(--line);background:var(--bg);padding:0;max-width:560px;width:92%}
dialog::backdrop{background:rgba(36,30,26,.45)}
.dlg{padding:24px}
.dlg h3{font-family:var(--mincho);font-weight:400;font-size:17px;margin:0 0 14px;letter-spacing:.08em}
.dlg ol{margin:0 0 18px;padding-left:20px;font-size:13px;line-height:2.1}
.dlg code{background:var(--pale);padding:2px 6px;font-size:12.5px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid #c8a679;outline-offset:2px}

/* ============================================================
   STEP 15  スマートフォン最適化
   ============================================================ */
@media (max-width: 820px) {
  /* 指で押しやすい大きさを確保する */
  .card { padding: 22px 18px; }
  .card h3 { font-size: 17px; }
  .slot { padding: 18px 4px; font-size: 15px; min-height: 54px; }
  .day { font-size: 15px; }
  .cnav { width: 46px; height: 46px; }
  .bt { padding: 19px 10px; font-size: 14px; min-height: 56px; }
  .acts { gap: 10px; }
  /* iOSで入力時に画面が拡大されないよう16px以上にする */
  .fi input, .fi textarea { font-size: 16px; padding: 14px 13px; }
  .rv { padding: 22px 16px 40px; }
  .slots { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .sum dt { flex: 0 0 78px; }
}
@media (max-width: 380px) {
  .slots { grid-template-columns: repeat(2, 1fr); }
}
/* 押した瞬間の反応をはっきりさせる */
.card:active, .slot:active, .day:active:not(:disabled), .bt:active { transform: scale(.985); }
.card, .slot, .day, .bt { transition: transform .08s ease, border-color .2s, background .2s; }
/* iOSのタップ時の灰色ハイライトを消す */
button, a { -webkit-tap-highlight-color: transparent; }

/* 管理画面：スマホでの操作性 */
@media (max-width: 640px) {
  .ad { padding: 20px 14px 150px; }
  .ad-bar-in { padding: 12px 14px; }
  .tabs { padding: 0 14px; }
  .tab { padding: 14px 13px; font-size: 13px; }
  .btn { padding: 15px 18px; font-size: 13px; min-height: 50px; }
  .btn.sm { padding: 12px 16px; font-size: 12.5px; min-height: 44px; }
  .del { padding: 11px 15px; font-size: 12.5px; min-height: 44px; }
  .add { padding: 17px; }
  .f input, .f textarea, .f select { padding: 14px 12px; font-size: 16px; }
  .row { padding: 15px; }
  .wrow { grid-template-columns: 44px 74px 1fr 1fr; gap: 6px; padding: 9px 8px; }
  .wrow input[type=time] { padding: 10px 6px; font-size: 15px; }
  .daynav { gap: 6px; }
  .daynav button { padding: 12px 14px; min-height: 46px; }
  .daynav input[type=date] { padding: 12px 10px; font-size: 16px; }
  .bk-row { padding: 15px 0; }
  dialog {
    width: 100%; max-width: none; margin: 0;
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    max-height: 92vh; overflow-y: auto;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .dlg { padding: 20px 16px 32px; }
  .save-in { padding: 11px 14px; }
}
/* 横向き・小型端末でもダイアログが画面外に出ない */
dialog { max-height: 92vh; overflow-y: auto; }