/*
 * yana café forêsta サイト共通スタイル
 * 全ページ（トップ／貸切／キャンセルポリシー／プライバシーポリシー）で
 * このファイルを共有しています。デザインを直すときはここだけで済みます。
 */
:root{
  --paper:#EEF0E8;
  --paper-2:#E4E8DC;
  --ink:#1F2A1E;
  --ink-2:#4A5646;
  --ink-3:#6E7A69;
  --moss:#5A6B4E;
  --rule:#C3CBB8;
  --indigo:#2C4A63;
  --indigo-ink:#F3F5EF;
  --warn:#7A4A2E;
  --shadow:rgba(31,42,30,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#161A15;
    --paper-2:#1E241C;
    --ink:#E7EBE0;
    --ink-2:#BBC4B4;
    --ink-3:#8D978A;
    --moss:#9DB08C;
    --rule:#36402F;
    --indigo:#8FB6D4;
    --indigo-ink:#12181D;
    --warn:#D9A279;
    --shadow:rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#161A15;
  --paper-2:#1E241C;
  --ink:#E7EBE0;
  --ink-2:#BBC4B4;
  --ink-3:#8D978A;
  --moss:#9DB08C;
  --rule:#36402F;
  --indigo:#8FB6D4;
  --indigo-ink:#12181D;
  --warn:#D9A279;
  --shadow:rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  font-size:16px;
  line-height:1.9;
  font-feature-settings:"palt" 1;
}
img{max-width:100%}
a{color:var(--indigo)}
.wrap{max-width:860px;margin:0 auto;padding:0 24px}

/* ---- header ---- */
header{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky;top:0;z-index:20;
}
.bar{
  max-width:860px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.brand{
  font-family:"Shippori Mincho",serif;
  font-size:1.18rem;letter-spacing:.02em;text-decoration:none;color:var(--ink);
}
.brand span{font-size:.72rem;color:var(--ink-3);margin-left:.6em;letter-spacing:.08em}
nav.top{display:flex;gap:18px;font-size:.84rem}
nav.top a{color:var(--ink-2);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
nav.top a:hover,nav.top a:focus-visible{color:var(--ink);border-bottom-color:var(--moss)}

/* ---- hero : the crossroads (トップページのみ) ---- */
.hero{position:relative;padding:56px 0 40px;overflow:hidden}
.cross{position:absolute;inset:0;pointer-events:none}
.cross::before,.cross::after{content:"";position:absolute;background:var(--rule)}
.cross::before{left:0;right:0;top:50%;height:1px}
.cross::after{top:0;bottom:0;left:50%;width:1px}
.hero .wrap{position:relative}

.today{
  background:var(--paper-2);
  border:1px solid var(--rule);
  padding:28px 26px;
  box-shadow:0 1px 0 var(--shadow);
}
.today .date{font-size:.86rem;color:var(--ink-3);letter-spacing:.04em}
.today .state{
  font-family:"Shippori Mincho",serif;
  font-size:clamp(2rem,7vw,3rem);
  line-height:1.3;margin:.1em 0 .15em;
}
.today .detail{font-size:1rem;color:var(--ink-2)}
.today .note{
  margin-top:16px;padding-top:14px;border-top:1px dotted var(--rule);
  font-size:.8rem;color:var(--ink-3);line-height:1.8;
}
.dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--moss);margin-right:.5em;vertical-align:.08em}
.dot.off{background:var(--ink-3)}

.lede{
  margin-top:36px;
  font-family:"Shippori Mincho",serif;
  font-size:1.16rem;line-height:2.1;color:var(--ink);max-width:34em;
}
.lede small{display:block;font-family:inherit;font-size:.92rem;color:var(--ink-2);margin-top:1em;line-height:2}

/* ---- page header（下層ページの見出し） ---- */
.page-head{padding:44px 0 8px}
.page-head h1{
  font-family:"Shippori Mincho",serif;
  font-size:clamp(1.6rem,5vw,2.1rem);margin:0;letter-spacing:.02em;
}

/* ---- sections ---- */
section{padding:52px 0;border-top:1px solid var(--rule)}
h2{
  font-family:"Shippori Mincho",serif;
  font-size:1.5rem;font-weight:600;margin:0 0 22px;letter-spacing:.02em;
}
h3{font-size:1rem;font-weight:700;margin:32px 0 10px;color:var(--ink)}
h3:first-of-type{margin-top:0}
p{margin:0 0 1em;max-width:40em}
ul{padding-left:1.2em;margin:0 0 1em;max-width:40em}
li{margin-bottom:.35em}
.muted{color:var(--ink-2)}
.small{font-size:.86rem}

/* week table */
.week{width:100%;border-collapse:collapse;font-size:.94rem;margin-bottom:18px}
.week th,.week td{border-bottom:1px solid var(--rule);padding:11px 8px;text-align:left;vertical-align:top}
.week th{width:5.5em;font-weight:500;color:var(--ink-2)}
.week tr.now th,.week tr.now td{background:var(--paper-2)}
.week tr.now th::after{content:"　本日";font-size:.72rem;color:var(--moss)}
.week td.closed{color:var(--ink-3)}

/* generic table */
.scroll{overflow-x:auto;margin-bottom:18px}
table.data{width:100%;border-collapse:collapse;font-size:.92rem;min-width:420px}
table.data th,table.data td{border-bottom:1px solid var(--rule);padding:10px 12px;text-align:left}
table.data thead th{color:var(--ink-2);font-weight:500;font-size:.84rem}
table.data td strong{font-weight:700}

.facts{list-style:none;padding:0;margin:0 0 1em;max-width:40em}
.facts li{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule)}
.facts li b{flex:0 0 7.5em;font-weight:500;color:var(--ink-2);font-size:.9rem}

.callout{
  border-left:2px solid var(--moss);
  padding:2px 0 2px 18px;margin:0 0 20px;max-width:40em;
}
.callout p:last-child{margin-bottom:0}

.example{
  background:var(--paper-2);padding:16px 18px;font-size:.92rem;
  border:1px solid var(--rule);max-width:40em;margin-bottom:18px;
}
.example b{display:block;margin-bottom:.3em;font-weight:700}

/* steps */
ol.steps{counter-reset:s;list-style:none;padding:0;max-width:40em}
ol.steps li{counter-increment:s;padding:0 0 18px 42px;position:relative}
ol.steps li::before{
  content:counter(s);position:absolute;left:0;top:2px;
  width:26px;height:26px;border:1px solid var(--rule);border-radius:50%;
  display:grid;place-items:center;font-size:.8rem;color:var(--ink-2);
}
ol.steps b{display:block}

/* contact */
.contact{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 10px}
.btn{
  display:inline-block;padding:13px 24px;text-decoration:none;
  background:var(--indigo);color:var(--indigo-ink);font-weight:500;font-size:.95rem;
}
.btn:hover,.btn:focus-visible{opacity:.88}
.btn.ghost{background:transparent;color:var(--indigo);border:1px solid var(--indigo)}

/* details（トップページのアコーディオン等、使う場合のために残す） */
details{border-top:1px solid var(--rule);padding:14px 0}
details summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"＋";color:var(--ink-3);font-size:.9rem}
details[open] summary::after{content:"−"}
details .body{padding-top:14px;font-size:.94rem}
details .body h4{margin:20px 0 8px;font-size:.95rem}
details .body h4:first-child{margin-top:0}

h4{margin:20px 0 8px;font-size:.95rem}
h4:first-child{margin-top:0}

footer{border-top:1px solid var(--rule);padding:34px 0 60px;font-size:.86rem;color:var(--ink-2)}
footer a{color:var(--ink-2)}
footer .fnav{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:18px}

:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
@media (max-width:620px){
  .cross::after{left:24px}
  .today{padding:22px 18px}
  .facts li{flex-direction:column;gap:2px}
  .facts li b{flex:none}
}