/* Mimosa with Space
   写真のルール：章の頭は横いっぱいの1枚（band）。中の写真は上下の端をそろえ、比率は 3:2 / 4:5 / 1:1 だけ。
   余白は 8 の倍数。アクセントはミモザの黄色の「粒」。 */
:root{
  --paper:#F8F7F2;
  --paper-2:#EFF1EA;
  --ink:#2F372F;
  --ink-soft:#6A7166;
  --line:#DDE0D5;
  --mimosa:#E8C547;
  --mimosa-soft:#F6E9B4;
  --mimosa-ink:#8A7222;
  --f-body:'Helvetica Neue','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',sans-serif;
  --f-en:'Helvetica Neue',Arial,sans-serif;
  --f-min:'Hiragino Mincho ProN','Zen Old Mincho','Yu Mincho',serif;
  --gap:16px;
  --pad:clamp(24px,5vw,64px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:14px/2 var(--f-body);letter-spacing:.06em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
figure,p,h1,h2,h3,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--mimosa-ink);outline-offset:4px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--pad)}
.skip{position:fixed;top:-100px;left:16px;z-index:50;background:var(--paper);padding:8px 12px}
.skip:focus{top:16px}

/* 共通パーツ */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mimosa);flex:none}
.dot.big{width:40px;height:40px;background:radial-gradient(circle at 35% 30%,#FBE7A0 0 22%,var(--mimosa) 24% 72%,#D6AF2C 100%)}
.eyebrow{display:flex;align-items:center;gap:10px;font:11px/1.6 var(--f-en);letter-spacing:.18em;color:var(--ink-soft);margin-bottom:16px}
h2{font:400 clamp(24px,2.6vw,32px)/1.6 var(--f-min);letter-spacing:.14em}
.lead{font:clamp(15px,1.4vw,17px)/2.3 var(--f-min);letter-spacing:.12em}
.body,.muted{font-size:13px;line-height:2.2;color:var(--ink-soft)}
.body{margin-top:16px}
.note,.small{font-size:12px;line-height:2;color:var(--ink-soft)}
.text-link{display:inline-block;margin-top:24px;font-size:12px;text-decoration:none;border-bottom:1px solid var(--mimosa);padding-bottom:4px;transition:color .2s}
.text-link:hover{color:var(--mimosa-ink)}

/* 写真：枠の比率で切り抜き */
.ph{position:relative;overflow:hidden;background:var(--paper-2)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph figcaption{position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.08em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.r45{aspect-ratio:4/5}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--pad);background:rgba(248,247,242,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.logo{font:300 22px/1 var(--f-en);letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.logo span{font-size:11px;letter-spacing:.1em;margin-left:6px}
.nav ul{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);font-size:12px;letter-spacing:.12em}
.nav ul a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav ul a:hover{border-color:var(--mimosa)}
.nav-ig{display:flex}

/* ---------- hero ---------- */
.hero{position:relative;padding-bottom:var(--gap)}
.hero-photo{height:min(86svh,820px);min-height:480px}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero-card{position:relative;margin:-200px 0 0 var(--pad);width:min(520px,calc(100% - var(--pad)*2));background:var(--paper);padding:48px 48px 40px}
.kicker{font-size:11px;letter-spacing:.16em;color:var(--ink-soft);margin-bottom:24px}
.hero h1{font:300 clamp(48px,6vw,72px)/1 var(--f-en);letter-spacing:-.02em}
.hero h1 .sub{display:block;font-size:.28em;letter-spacing:.14em;margin-top:12px}
.tagline{font:clamp(17px,1.8vw,21px)/2.1 var(--f-min);letter-spacing:.16em;margin-top:32px}
.hero-meta{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;line-height:2;color:var(--ink-soft)}

/* ---------- 今日は、何しよう？ ---------- */
.moods{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:center;padding-block:clamp(80px,10vw,144px)}
.moods h2{margin-bottom:16px}
.mood-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.mood-tabs button{border:1px solid var(--line);background:transparent;border-radius:99px;padding:8px 18px;font-size:13px;cursor:pointer;transition:background .2s,border-color .2s}
.mood-tabs button:hover{border-color:var(--mimosa)}
.mood-tabs button[aria-pressed=true]{background:var(--mimosa-soft);border-color:var(--mimosa)}
.mood-panel{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.mood-copy h3{font:400 clamp(18px,1.8vw,22px)/2 var(--f-min);letter-spacing:.12em;margin-bottom:16px}
.mood-copy p:not(.eyebrow){font-size:13px;line-height:2.2;color:var(--ink-soft)}

/* ---------- chapter ---------- */
.chapter{padding-bottom:clamp(80px,10vw,144px)}
.band{position:relative;height:clamp(320px,62vh,640px)}
.band img{width:100%;height:100%;object-fit:cover}
.band figcaption{position:absolute;right:var(--pad);bottom:16px;font-size:11px;letter-spacing:.08em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.chapter-head{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,6vw,96px);align-items:end;padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px)}
.chapter-head h2{margin:0}

/* CAFE：縦長1枚＋正方形2×2（上下の端がそろう） */
.cafe-photos{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto;gap:var(--gap)}
.cafe-photos .ph{aspect-ratio:1}
.cafe-photos .tall{grid-row:1/3;aspect-ratio:auto}
.season{display:grid;grid-template-columns:auto 1fr auto;gap:16px 40px;align-items:center;margin-top:48px;padding-block:24px;border-block:1px solid var(--line)}
.season .eyebrow{margin:0}
.season ul{display:flex;flex-wrap:wrap;gap:4px 32px;font:15px/2 var(--f-min);letter-spacing:.1em}
.season .text-link{margin:0}

/* SPACE */
.space-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.features{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.features li{font-size:12px;padding:4px 14px;border:1px solid var(--line);border-radius:99px;background:#fff}
.floor{margin-top:40px;color:var(--ink-soft)}
.floor svg{width:100%;height:auto}
.floor .note{margin-top:8px}
.price{border-top:1px solid var(--ink)}
.price h3{font-size:12px;font-weight:400;letter-spacing:.14em;margin:24px 0 4px}
.price h3 small{font-size:11px;color:var(--ink-soft);margin-left:8px}
.price table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.price th,.price td{font-weight:400;padding:12px 0;border-bottom:1px solid var(--line);text-align:left}
.price td{text-align:right;font:300 17px var(--f-en);letter-spacing:.02em}
.price td.col{font:11px var(--f-body);color:var(--ink-soft);padding-block:4px}
.price td small,.price th small{font:11px var(--f-body);color:var(--ink-soft);margin-left:4px}
.price .note{margin-top:16px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:72px;counter-reset:s}
.steps li{counter-increment:s;padding-top:16px;border-top:1px solid var(--line);font-size:13px;line-height:1.9}
.steps li::before{content:"0" counter(s);display:block;font:300 22px/1.4 var(--f-en);color:var(--mimosa-ink);margin-bottom:4px}

/* カレンダー */
.cal{margin-top:40px;background:#fff;border:1px solid var(--line);padding:clamp(16px,2.4vw,28px)}
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.cal-title{font:300 22px/1.4 var(--f-en)}
.cal-title small{font:12px var(--f-body);color:var(--ink-soft);margin-left:12px}
.sample{font-size:10px;letter-spacing:.12em;color:var(--ink-soft);border:1px solid var(--line);border-radius:99px;padding:1px 8px;margin-left:10px;vertical-align:middle}
.cal-nav{display:flex;gap:8px}
.btn{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer}
.btn:hover{border-color:var(--mimosa)}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.dow{text-align:center;font-size:11px;color:var(--ink-soft);padding-bottom:4px}
.dow.sun{color:#B5654F}.dow.sat{color:#5A7BA0}
.day{min-height:76px;background:var(--paper);padding:6px;font-size:11px;line-height:1.4;display:flex;flex-direction:column;gap:3px;min-width:0}
.day.blank{background:transparent}
.day .n{font:13px var(--f-en);font-variant-numeric:tabular-nums}
.day.today .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mimosa)}
.day.closed{background:repeating-linear-gradient(135deg,var(--paper) 0 6px,var(--line) 6px 7px)}
.tag{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;padding:1px 5px;background:var(--mimosa-soft)}
.tag.inline{display:inline;padding:1px 6px}
.st{margin-top:auto;display:flex;align-items:center;gap:5px;font-size:10px;color:var(--ink-soft)}
.st i{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none}
.st.free i{background:#86A665}.st.part i{background:var(--mimosa)}.st.full i{background:#C0705C}
.legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;font-size:11px;color:var(--ink-soft)}
.legend .st{margin:0}

/* CULTURE */
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cats span{font:14px var(--f-min);padding:6px 18px;border:1px solid var(--ink);border-radius:99px;transition:transform .25s,background .25s}
.cats span:nth-child(odd){transform:rotate(-2deg)}
.cats span:nth-child(even){transform:rotate(1.5deg)}
.cats span:hover{transform:none;background:var(--mimosa);border-color:var(--mimosa)}
.events{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:56px}
.events .cal{margin-top:0}
.sub{font:400 17px/1.8 var(--f-min);letter-spacing:.12em;margin-bottom:8px}
.ev-list li{display:grid;grid-template-columns:96px 1fr;gap:16px;padding-block:18px;border-bottom:1px solid var(--line)}
.ev-date{font:300 22px/1.2 var(--f-en);letter-spacing:-.01em}
.ev-date small{font:10px var(--f-body);color:var(--ink-soft);margin-left:3px}
.ev-date span{display:block;font-size:12px;line-height:1.4;color:var(--ink-soft)}
.ev-kind{font-size:11px;letter-spacing:.14em;color:var(--mimosa-ink)}
.ev-name{font:15px/1.7 var(--f-min);letter-spacing:.06em}
.ev-time{font-size:11px;color:var(--ink-soft)}
.try{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;margin-top:72px;padding:clamp(24px,4vw,40px);background:var(--paper-2)}
.try strong{display:block;font:400 19px/1.8 var(--f-min);letter-spacing:.1em;margin-bottom:8px}
.try p{font-size:13px;line-height:2.1;color:var(--ink-soft)}
.try .text-link{margin-top:16px}

/* SHOP */
.shop{text-align:center;padding-block:clamp(64px,8vw,112px);border-top:1px solid var(--line)}
.shop .eyebrow{justify-content:center}
.shop h2{font:200 34px/1.4 var(--f-en);letter-spacing:.06em}
.soon{font-size:11px;letter-spacing:.28em;color:var(--mimosa-ink);margin:8px 0 16px}

/* INFO：写真2枚は高さをそろえる */
.info{background:var(--paper-2);padding-block:clamp(64px,8vw,112px)}
.info-photos{display:grid;grid-template-columns:2fr 3fr;gap:var(--gap);margin-bottom:clamp(48px,6vw,80px)}
.info-photos .ph{aspect-ratio:auto;height:clamp(280px,32vw,420px)}
.info h2{margin-bottom:8px}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,5vw,64px);margin-top:40px}
.info h3{font:11px var(--f-en);letter-spacing:.2em;color:var(--mimosa-ink);margin:0 0 8px}
.info p{margin-bottom:24px}
.info .big{font:300 26px/1.4 var(--f-en);letter-spacing:.01em;margin-bottom:4px}
.phone{text-decoration:none}
.out{text-decoration:none;border-bottom:1px solid var(--mimosa);padding-bottom:2px}
.info-map{max-width:300px;background:#fff}
footer{background:var(--paper-2);border-top:1px solid var(--line);padding:24px 0 32px;font-size:11px;letter-spacing:.14em;color:var(--ink-soft)}

/* ---------- tablet ---------- */
@media (max-width:960px){
  .moods,.chapter-head,.space-body,.events{grid-template-columns:1fr}
  .chapter-head{align-items:start}
  .season{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr 1fr}
}
/* ---------- phone ---------- */
@media (max-width:600px){
  body{font-size:13px}
  .nav{padding:12px 16px}
  .logo{font-size:19px}
  .logo span{display:none}
  .nav ul{gap:14px;font-size:11px}
  .hide-sm{display:none}
  :root{--pad:16px;--gap:10px}
  .hero-photo{height:62svh;min-height:380px}
  .hero-card{margin:-96px 16px 0;width:auto;padding:32px 24px 28px}
  .mood-panel{grid-template-columns:1fr;gap:20px}
  .mood-tabs button{padding:6px 14px;font-size:12px}
  .band{height:44svh;min-height:260px}
  .cafe-photos{grid-template-columns:1fr 1fr}
  .cafe-photos .tall{grid-row:auto;grid-column:1/-1;aspect-ratio:3/2}
  .steps{grid-template-columns:1fr;margin-top:48px}
  .cal-title small{display:block;margin:0}
  .day{min-height:56px;padding:4px}
  .tag{font-size:9px;padding:0 3px}
  .st span{display:none}
  .ev-list li{grid-template-columns:80px 1fr}
  .try{grid-template-columns:1fr}
  .try .dot.big{width:28px;height:28px}
  .info-photos{grid-template-columns:1fr 1fr}
  .info-photos .ph{height:auto;aspect-ratio:4/5}
  .info-grid{grid-template-columns:1fr}
}


/* ---------- 透ける黄色：すりガラスと、セロファン越しの光 ---------- */
:root{
  --glass:rgba(250,247,236,.58);
  --film:rgba(240,201,60,.30);      /* 黄色いセロファン */
  --film-soft:rgba(240,201,60,.16);
}
::selection{background:rgba(240,201,60,.45)}

/* ヘッダー：下が透ける */
.nav{background:linear-gradient(90deg,rgba(250,246,228,.62),rgba(248,247,242,.5));backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.5)}

/* トップ：写真の上に、黄色いすりガラスを1枚 */
.hero{padding-bottom:0}
.hero-card{position:absolute;left:var(--pad);bottom:var(--pad);margin:0;
  background:linear-gradient(140deg,rgba(246,214,96,.34) 0%,rgba(250,246,230,.55) 45%,rgba(250,248,240,.62) 100%);
  backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.hero-meta{border-top-color:rgba(47,55,47,.18)}

/* 黄色い光のにじみ（写真の角にかかる） */
.cafe-photos,.events .cal,.info-photos{position:relative}
.cafe-photos::after,.events .cal::after,.info-photos::after{content:"";position:absolute;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(244,206,64,.55),rgba(244,206,64,.22) 55%,rgba(244,206,64,0));mix-blend-mode:multiply}
.cafe-photos::after{width:46%;aspect-ratio:1;left:-14%;top:-16%}
.events .cal::after{width:38%;aspect-ratio:1;right:-10%;bottom:-18%}
.info-photos::after{width:34%;aspect-ratio:1;right:-8%;top:-20%}

/* 章頭の写真のキャプションも、すりガラスの札に */
.band figcaption{text-shadow:none;color:var(--ink);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:4px 12px}

/* 小さな部分の黄色を、透ける黄色にそろえる */
.mood-tabs button[aria-pressed=true]{background:var(--film);border-color:rgba(232,190,50,.6)}
.tag{background:var(--film)}
.day.today .n{background:rgba(240,201,60,.6)}
.features li{background:rgba(255,255,255,.6)}
.try{grid-template-columns:1fr;background:linear-gradient(120deg,var(--film-soft),rgba(239,241,234,.6) 60%)}
.info{background:linear-gradient(180deg,var(--paper) 0%,#F6F0D6 40%,var(--paper-2) 100%)}
.cal{background:rgba(255,255,255,.75)}

/* ふわっと現れるだけ（跳ねない） */
.motion [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.motion [data-reveal].in{opacity:1;transform:none}
#mood-photo{transition:opacity .35s ease}
#mood-photo.swap{opacity:0}

@media (max-width:600px){
  .hero-card{left:16px;right:16px;bottom:16px;width:auto;padding:28px 22px 22px}
  .hero-photo{height:78svh;min-height:560px}
  .cafe-photos::after{width:70%;left:-20%;top:-10%}
}

/* 調整：すりガラスは白く明るく、黄色は光として */
.hero-card{background:
  radial-gradient(120% 90% at 0% 0%,rgba(250,214,80,.42),rgba(250,214,80,0) 60%),
  linear-gradient(rgba(255,252,240,.74),rgba(255,252,240,.74));
  backdrop-filter:blur(26px) saturate(1.05) brightness(1.15);-webkit-backdrop-filter:blur(26px) saturate(1.05) brightness(1.15)}
.events .cal::after{display:none}
.cafe-photos::after{width:70%;left:-30%;top:-34%;background:radial-gradient(closest-side,rgba(244,206,64,.42),rgba(244,206,64,.14) 60%,rgba(244,206,64,0))}
.info-photos::after{width:60%;right:-22%;top:-38%;background:radial-gradient(closest-side,rgba(244,206,64,.38),rgba(244,206,64,.12) 60%,rgba(244,206,64,0))}

/* ===== 情報圧縮版：MENU・下から出るシート・日付と題だけの一覧 ===== */
.menu-btn{display:flex;flex-direction:column;align-items:flex-end;gap:6px;background:none;border:0;padding:6px 0;cursor:pointer}
.menu-btn i{display:block;width:28px;height:1px;background:currentColor}
.menu-btn i+i{width:18px}
.menu-btn span{font:9px/1 var(--f-en);letter-spacing:.24em;margin-top:2px}

/* ボタン：透ける黄色の小判 */
.pill{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:9px 20px;border-radius:99px;border:1px solid rgba(214,174,40,.55);background:var(--film);
  font:12px/1.4 var(--f-body);letter-spacing:.12em;text-decoration:none;cursor:pointer;transition:background .25s}
.pill:hover{background:rgba(240,201,60,.5)}
button.pill::after{content:"↑";font-size:11px}
.pill.ghost{background:rgba(255,255,255,.4);border-color:var(--line)}

/* 料金：1つの表に */
.price{border-top:1px solid var(--ink)}
.price td.col{font:10px var(--f-en);letter-spacing:.14em;color:var(--ink-soft)}
.price th small{font-size:11px;color:var(--ink-soft);margin-left:6px}
.price .equip{margin-top:12px}
.price .equip th,.price .equip td{font-size:12px;padding:8px 0}
.price .equip td{font-size:14px;padding-right:20px}
.price .equip td:last-child{padding-right:0}

/* イベント：日付と題だけ */
.events{grid-template-columns:7fr 5fr;margin-top:0}
.news{border-top:1px solid var(--ink)}
.news li{display:grid;grid-template-columns:120px 84px 1fr;gap:12px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.news time{font:300 18px/1.3 var(--f-en);letter-spacing:-.01em}
.news time small{font:10px var(--f-body);color:var(--ink-soft);margin-left:3px}
.news .kind{font-size:11px;letter-spacing:.14em;color:var(--mimosa-ink)}
.news .name{font:15px/1.7 var(--f-min);letter-spacing:.06em}
.events-side .pill{margin-top:0}
.events-side .text-link{display:block;width:max-content;margin-top:20px}

/* INFO：写真なし、3列を短く */
.info h2{margin-bottom:0}
.info-grid{margin-top:40px}
.info .pill{margin-top:4px}
footer{font-size:10px}

/* ---------- MENU（全画面のすりガラス） ---------- */
dialog{color:var(--ink)}
dialog::backdrop{background:rgba(30,34,28,.18)}
.menu,.drawer{backdrop-filter:blur(26px) saturate(1.05) brightness(1.12);-webkit-backdrop-filter:blur(26px) saturate(1.05) brightness(1.12);
  background:radial-gradient(120% 90% at 0% 0%,rgba(250,214,80,.40),rgba(250,214,80,0) 60%),linear-gradient(rgba(255,252,240,.74),rgba(255,252,240,.74))}
.menu{inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:var(--pad);display:none;flex-direction:column;justify-content:center;align-items:center;gap:40px}
.menu[open]{display:flex;animation:fadein .35s ease}
.menu.closing{animation:fadeout .28s ease forwards}
.menu ul{text-align:center}
.menu li a{display:block;padding:12px 0;font:400 20px/1.8 var(--f-min);letter-spacing:.24em;text-decoration:none}
.menu li a:hover{color:var(--mimosa-ink)}
.menu-ig{font-size:11px;letter-spacing:.1em;color:var(--ink-soft);text-align:center}
.menu-ig a{text-decoration:none;border-bottom:1px solid var(--line);margin:0 6px;display:inline-block}
.menu .close{position:absolute;top:22px;right:var(--pad);background:none;border:0;font:9px var(--f-en);letter-spacing:.24em;cursor:pointer}

/* ---------- 下から出てくるシート ---------- */
.drawer{position:fixed;inset:auto 0 0;margin:0 auto;width:min(880px,100%);max-width:none;max-height:88svh;overflow:auto;overscroll-behavior:contain;
  border:1px solid rgba(255,255,255,.6);border-bottom:0;border-radius:20px 20px 0 0;padding:14px clamp(20px,4vw,48px) 40px;
  transform:translateY(var(--drag,0px));transition:transform .2s ease}
.drawer[open]{animation:up .45s cubic-bezier(.2,.8,.2,1)}
.drawer.closing{animation:down .28s ease forwards}
.grab{width:44px;height:4px;border-radius:4px;background:rgba(47,55,47,.25);margin:0 auto 18px;cursor:grab;touch-action:none}
.drawer .eyebrow,.drawer h3{touch-action:none}
.drawer h3{font:400 19px/1.7 var(--f-min);letter-spacing:.18em;margin-bottom:8px}
.drawer .close{position:absolute;top:14px;right:18px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.4);font-size:16px;line-height:1;cursor:pointer}
.drawer .cal{margin-top:16px;background:rgba(255,255,255,.35);border:0;padding:0}
.drawer .cal::after{display:none}
.drawer .day{background:rgba(255,255,255,.5)}
.muted{font-size:12px;line-height:2.1;color:var(--ink-soft);margin-top:16px}
.muted a{border-bottom:1px solid rgba(214,174,40,.6);text-decoration:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;margin-top:16px}
.two .muted{margin-top:12px}
.map{width:100%;border-radius:4px;background:#fff}
.cal-head{gap:10px}
.cal-nav{margin-left:auto}
.ev{display:block;padding:1px 4px;background:var(--film);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;font-size:10px}
.ev.open{white-space:normal}

@keyframes up{from{transform:translateY(100%)}}
@keyframes down{to{transform:translateY(100%)}}
@keyframes fadein{from{opacity:0}}
@keyframes fadeout{to{opacity:0}}

@media (max-width:960px){
  .events{grid-template-columns:1fr;gap:32px}
}
@media (max-width:640px){
  .logo span{display:inline}
  .news li{grid-template-columns:1fr auto;gap:2px 12px}
  .news time{grid-column:1}.news .kind{grid-column:2;grid-row:1;text-align:right}
  .news .name{grid-column:1/-1}
  .price .equip th,.price .equip td{display:inline-block}
  .price .equip tr{display:grid;grid-template-columns:1fr auto;}
  .price .equip td{padding-right:0}
  .two{grid-template-columns:1fr;gap:20px}
  .drawer .day{min-height:48px;padding:3px}
  .drawer .st span{display:none}
  .ev{font-size:9px;padding:0 2px}
  .drawer{max-height:92svh}
}
.band-space img{object-position:50% 62%}
/* トップの写真＝スペースそのもの。スペースの章は帯写真なしで、上に線だけ */
.hero{margin-bottom:clamp(64px,8vw,112px)}
#space .chapter-head{border-top:1px solid var(--line);padding-top:clamp(48px,6vw,80px)}

/* 2026-10-07 — 光、文字、写真の間合いを磨く */
:root{--ink:#30372f;--ink-soft:#626b60}
.nav{background:rgba(248,247,242,.88);border-bottom:1px solid rgba(70,76,61,.07);padding-block:20px}
.logo{font-size:21px;letter-spacing:.015em}
.logo span{font-size:10px;letter-spacing:.14em;margin-left:10px}
.hero-photo{height:min(88svh,840px)}
.hero-photo img{object-position:50% 58%}
.hero-card{width:420px;padding:36px 38px 30px;left:clamp(32px,5vw,80px);bottom:48px;
 background:linear-gradient(135deg,rgba(255,253,244,.78),rgba(250,249,241,.66));
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 border:1px solid rgba(255,255,255,.24);box-shadow:none}
.kicker{font-size:10px;letter-spacing:.17em;margin-bottom:26px}
.hero h1{font:300 clamp(52px,4.5vw,64px)/1.06 var(--f-en);letter-spacing:-.035em}
.hero h1 .sub{font:300 15px/1.5 var(--f-en);letter-spacing:.2em;margin-top:13px;margin-bottom:0}
.tagline{font:400 18px/2.15 var(--f-min);letter-spacing:.13em;margin-top:30px}
.hero-meta{margin-top:26px;padding-top:14px;font-size:10px;line-height:2.2;letter-spacing:.055em;border-top-color:rgba(47,55,47,.13)}
h2{letter-spacing:.1em;line-height:1.7}
.chapter-head{padding-block:clamp(64px,8vw,112px) clamp(48px,6vw,80px)}
.lead{letter-spacing:.075em;line-height:2.25}
.eyebrow{font-size:10px;letter-spacing:.2em;gap:12px}
.dot{width:5px;height:5px}
.text-link{border-color:rgba(150,130,51,.4);padding-bottom:7px;letter-spacing:.07em}
.text-link:hover{border-color:var(--mimosa-ink)}
#cafe .band{height:clamp(300px,48vw,560px)}
#cafe .band img{object-position:center 54%}
.cafe-photos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto;gap:48px 24px;align-items:start;margin-top:8px}
.cafe-photos::after{display:none}
.cafe-photos .ph{aspect-ratio:auto;background:transparent;overflow:visible}
.cafe-photos .ph img{position:static;width:100%;height:auto;object-fit:cover;aspect-ratio:4/3}
.cafe-photos .ph figcaption{position:static;color:var(--ink-soft);text-shadow:none;font-size:10px;letter-spacing:.1em;margin-top:14px}
.cafe-photos .ph:nth-child(1){grid-column:1/6;grid-row:1/3}
.cafe-photos .ph:nth-child(1) img{aspect-ratio:4/5}
.cafe-photos .ph:nth-child(2){grid-column:8/12;grid-row:1;padding-top:32px}
.cafe-photos .ph:nth-child(3){grid-column:7/13;grid-row:2}
.cafe-photos .ph:nth-child(3) img{aspect-ratio:3/2}
.cafe-photos .ph:nth-child(4){grid-column:2/6;grid-row:3}
.cafe-photos .ph:nth-child(4) img{aspect-ratio:1}
.cafe-photos .ph:nth-child(5){grid-column:8/12;grid-row:3;padding-top:64px}
.cafe-photos .ph:nth-child(5) img{aspect-ratio:4/5}
.pill{background:rgba(235,204,90,.1);border-color:rgba(155,136,65,.32);padding:12px 20px;letter-spacing:.08em}
.pill:hover{background:rgba(235,204,90,.23)}
.features li{background:transparent;border-radius:0;border:0;border-bottom:1px solid var(--line);padding:4px 0;margin-right:18px;font-size:11px}
.info{background:linear-gradient(180deg,var(--paper),#f0f2ea)}
.schedule-note{font-size:10px;color:var(--ink-soft);letter-spacing:.08em;margin-bottom:12px}
@media(max-width:960px){
 .cafe-photos{gap:36px 18px}
 .hero-card{width:390px;left:32px;bottom:32px}
}
@media(max-width:600px){
 :root{--pad:24px}
 .nav{padding:16px 20px}
 .logo{font-size:19px}.logo span{font-size:9px;margin-left:7px}
 .hero-photo{height:80svh;min-height:600px}
 .hero-photo img{object-position:57% 50%}
 .hero-card{left:24px;right:40px;bottom:28px;width:auto;padding:30px 26px 25px}
 .hero h1{font-size:50px}.hero h1 .sub{font-size:12px;margin-top:11px}
 .kicker{font-size:9px;margin-bottom:24px}
 .tagline{font-size:16px;letter-spacing:.11em;margin-top:25px}
 .hero-meta{font-size:9px;margin-top:22px}
 .hero{margin-bottom:64px}
 .chapter-head{gap:28px;padding-block:48px 40px}
 h2{font-size:25px}.lead{font-size:15px}
 #cafe .band{height:340px}
 .cafe-photos{grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 12px}
 .cafe-photos .ph:nth-child(1){grid-column:1/6;grid-row:1}
 .cafe-photos .ph:nth-child(1) img{aspect-ratio:4/5}
 .cafe-photos .ph:nth-child(2){grid-column:3/7;grid-row:2;padding-top:0}
 .cafe-photos .ph:nth-child(3){grid-column:1/7;grid-row:3}
 .cafe-photos .ph:nth-child(4){grid-column:1/4;grid-row:4}
 .cafe-photos .ph:nth-child(5){grid-column:4/7;grid-row:4;padding-top:52px}
 .cafe-photos .ph figcaption{font-size:9px;letter-spacing:.04em;margin-top:10px}
 .events-side .text-link{width:auto}
 .space-body{gap:36px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.motion [data-reveal]{opacity:1;transform:none}}

/* オリーブの影 — 実際の光をトップに */
.hero-photo{position:relative;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;opacity:0;transition:opacity .8s ease}
.hero-video.ready{opacity:1}
.video-toggle{position:absolute;right:var(--pad);bottom:32px;background:rgba(248,247,242,.8);border:1px solid rgba(255,255,255,.3);padding:9px 12px;font-size:12px;cursor:pointer;backdrop-filter:blur(8px)}
.video-toggle span{font:9px var(--f-en);letter-spacing:.16em;margin-left:7px}
.video-toggle[hidden]{display:none}
@media(max-width:600px){.hero-video{object-position:50% 40%}.video-toggle{right:18px;bottom:8px;background:transparent;border:0;font-size:11px}.video-toggle span{font-size:8px}}
@media(max-width:600px){.video-toggle{background:rgba(248,247,242,.82);padding:5px 9px;bottom:8px;right:12px}}
/* すりガラスと黄色い光を残し、写真のまとまりを整える */
.hero-card{background:radial-gradient(110% 85% at 0% 0%,rgba(246,213,82,.32),rgba(246,213,82,0) 65%),linear-gradient(rgba(255,252,240,.69),rgba(255,252,240,.69));backdrop-filter:blur(26px) saturate(1.08);-webkit-backdrop-filter:blur(26px) saturate(1.08);border-color:rgba(255,255,255,.4)}
.nav{background:linear-gradient(90deg,rgba(250,247,231,.88),rgba(248,247,242,.88))}
.cafe-photos{grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:32px 24px;align-items:stretch}
.cafe-photos .ph:nth-child(n){grid-column:auto;grid-row:auto;padding:0}
.cafe-photos .ph:nth-child(1){grid-column:1;grid-row:1/3;display:flex;flex-direction:column;min-height:0}
.cafe-photos .ph:nth-child(n) img{aspect-ratio:4/3}
.cafe-photos .ph:nth-child(1) img{aspect-ratio:auto;height:0;flex:1;min-height:0;object-position:50% 50%}
.cafe-photos .ph:nth-child(2){grid-column:2;grid-row:1}
.cafe-photos .ph:nth-child(3){grid-column:3;grid-row:1}
.cafe-photos .ph:nth-child(4){grid-column:2;grid-row:2}
.cafe-photos .ph:nth-child(5){grid-column:3;grid-row:2}
.cafe-photos .ph figcaption{margin-top:12px;line-height:1.8}
.cafe-photos .ph:nth-child(2) figcaption::before{content:'';display:inline-block;width:5px;height:5px;background:var(--mimosa);border-radius:50%;vertical-align:middle;margin-right:8px}
.pill{background:rgba(235,204,90,.2);border-color:rgba(190,159,48,.4)}
@media(max-width:600px){
 .cafe-photos{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:28px 16px}
 .cafe-photos .ph:nth-child(1){grid-column:1/-1;grid-row:1;display:block}
 .cafe-photos .ph:nth-child(1) img{height:auto;aspect-ratio:3/2}
 .cafe-photos .ph:nth-child(2){grid-column:1;grid-row:2}
 .cafe-photos .ph:nth-child(3){grid-column:2;grid-row:2}
 .cafe-photos .ph:nth-child(4){grid-column:1;grid-row:3}
 .cafe-photos .ph:nth-child(5){grid-column:2;grid-row:3}
 .cafe-photos .ph:nth-child(n+2) img{aspect-ratio:1}
 .cafe-photos .ph figcaption{font-size:10px;letter-spacing:.04em}
}

/* お菓子を、一枚ずつめくる */
.cafe-gallery{display:grid;grid-template-columns:1fr 1.8fr;gap:clamp(24px,4vw,56px);align-items:stretch}
.cafe-window{display:flex;flex-direction:column;min-width:0}
.cafe-window img{width:100%;height:0;flex:1;min-height:0;object-fit:cover;object-position:center}
.cafe-window figcaption{font-size:10px;color:var(--ink-soft);letter-spacing:.1em;margin-top:12px}
.cafe-carousel{min-width:0}
.gallery-heading{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:18px;font:400 14px/1.8 var(--f-min);letter-spacing:.1em}
.gallery-hint{font:9px/1.8 var(--f-body);color:var(--ink-soft);letter-spacing:.06em}
.cafe-photos{display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0;align-items:start}
.cafe-photos::-webkit-scrollbar{display:none}
.cafe-photos::after{display:block;content:'';position:static;flex:0 0 calc(20% - 20px);width:auto;aspect-ratio:auto;background:none}
.cafe-photos .ph:nth-child(n){display:block;flex:0 0 80%;min-width:0;scroll-snap-align:start;grid-column:auto;grid-row:auto;aspect-ratio:auto;padding:0}
.cafe-photos .ph:nth-child(n) img{position:static;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;flex:none}
.cafe-photos .ph:nth-child(n) figcaption{position:static;margin:14px 0 0;font:400 14px/1.8 var(--f-min);letter-spacing:.08em;color:var(--ink);text-shadow:none}
.cafe-photos .ph:nth-child(n) figcaption::before{display:none}
.photo-number{font:10px var(--f-en);color:var(--mimosa-ink);margin-right:14px;letter-spacing:.1em}
.gallery-footer{display:flex;align-items:center;gap:18px;margin-top:24px}
.gallery-progress{height:1px;flex:1;background:var(--line)}
.gallery-progress span{display:block;width:16.667%;height:1px;background:var(--mimosa-ink);transition:width .3s ease}
.gallery-count{font:10px var(--f-en);letter-spacing:.12em;color:var(--ink-soft)}
.gallery-buttons{display:flex;gap:8px}
.gallery-buttons button{width:40px;height:40px;border:1px solid rgba(155,136,65,.3);border-radius:50%;background:rgba(235,204,90,.13);font:18px var(--f-en);cursor:pointer;transition:background .2s,opacity .2s}
.gallery-buttons button:hover{background:rgba(235,204,90,.28)}
.gallery-buttons button:disabled{opacity:.3;cursor:default;background:transparent}
.cafe-photos:focus-visible{outline:1px solid var(--mimosa-ink);outline-offset:6px}
@media(max-width:600px){
 .cafe-gallery{grid-template-columns:1fr;gap:32px}
 .cafe-window img{flex:none;height:auto;aspect-ratio:3/2}
 .gallery-heading{margin-bottom:16px;font-size:13px}
 .gallery-hint{font-size:9px}
 .cafe-photos{gap:16px}
 .cafe-photos .ph:nth-child(n){flex-basis:85%}
 .cafe-photos::after{flex-basis:calc(15% - 16px)}
 .cafe-photos .ph:nth-child(n) figcaption{font-size:13px}
 .gallery-footer{gap:14px;margin-top:20px}
}

/* PCでは縦の映像を引いて見せ、写真を一列のリズムに */
@media(min-width:961px){
 .hero{max-width:1440px;margin-inline:auto;margin-top:24px;padding:0 var(--pad);background:radial-gradient(ellipse at 24% 58%,rgba(242,218,126,.14),transparent 55%)}
 .hero-photo{width:54%;margin-left:auto;height:clamp(560px,72svh,720px);min-height:0}
 .hero-photo img,.hero-video{object-position:50% 46%}
 .hero-card{left:clamp(48px,7vw,112px);top:50%;bottom:auto;transform:translateY(-50%);width:39%;max-width:480px;padding:48px 40px;background:radial-gradient(ellipse at 0% 0%,rgba(246,213,82,.19),transparent 70%),rgba(255,253,245,.62);border-color:rgba(255,255,255,.68)}
 .hero h1{font-size:clamp(60px,5vw,76px)}
 .hero h1 .sub{font-size:15px}
 .hero .kicker{margin-bottom:32px;font-size:11px}
 .hero .tagline{font-size:20px;margin-top:36px}
 .hero .hero-meta{margin-top:32px}
 .video-toggle{right:calc(var(--pad) + 16px);bottom:16px}
 .hero{margin-bottom:80px}
 #cafe .band{height:clamp(360px,35vw,480px)}
 .chapter-head{padding-block:72px 48px}
 .cafe-gallery{grid-template-columns:.85fr 2fr;gap:40px;align-items:start}
 .cafe-window{padding-top:43px}
 .cafe-window img{height:auto;flex:none;aspect-ratio:7/10}
 .cafe-photos{gap:24px}
 .cafe-photos .ph:nth-child(n){flex-basis:calc((100% - 24px)/2)}
 .cafe-photos .ph:nth-child(n) img{aspect-ratio:4/5}
 .cafe-photos::after{flex-basis:calc((100% - 24px)/2)}
 .gallery-footer{margin-top:20px}
 .cafe-photos .ph:nth-child(n) figcaption{font-size:13px}
}