:root{
  --white:#FFFFFF;
  --linen:#FAF0E6;
  --mint:#C4F9F3;
  --wine:#800d46;
  --wine-deep:#5c0933;
  --fog:#E6E6E6;
  --ink:#000000;
  --ink-85: rgba(0,0,0,.85);
  --ink-65: rgba(0,0,0,.65);
  --ink-45: rgba(0,0,0,.45);
  --mincho: "Shippori Mincho", serif;   /* 明朝体：見出し・本文 */
  --display: "Aboreto", serif;          /* Aboreta：ロゴ・英字装飾 */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--white);
  color:var(--ink-85);
  font-family:var(--mincho);
  font-weight:400;
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 40px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease);}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-delay-1.in-view{transition-delay:.12s;}
.reveal-delay-2.in-view{transition-delay:.24s;}
.reveal-delay-3.in-view{transition-delay:.36s;}

/* ================= HEADER ================= */
header{
  position:fixed; top:0; left:0; width:100%; z-index:500;
  padding:26px 0;
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.25);
  border-color:var(--fog);
}
header .wrap{display:flex; align-items:center; justify-content:space-between;}

.logo{display:flex; flex-direction:column; align-items:flex-start; line-height:1;}
.logo .en{
  font-family:var(--display); font-weight:400;
  font-size:22px; letter-spacing:.06em;
  color:var(--ink); transition:color .5s var(--ease);
}
header.scrolled .logo .en{color:var(--wine);}
.logo .jp{
  margin-top:6px; font-family:var(--mincho); font-size:10px; letter-spacing:.32em;
  color:var(--ink); opacity:.6; padding-left:2px;
}
header:not(.scrolled) .logo .en,
header:not(.scrolled) .logo .jp{ color:#fff; }

nav.gnav{display:flex; gap:10px;}
.navbtn{
  display:flex; align-items:center; gap:9px;
  padding:10px 20px 10px 16px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  cursor:pointer;
  background:transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease), transform .35s var(--ease), box-shadow .45s var(--ease);
}
header:not(.scrolled) .navbtn{ border-color:rgba(255,255,255,.55); }
header.scrolled .navbtn{ border-color:var(--fog); }

.navbtn .ic{
  width:16px; height:16px;
  filter:brightness(0) invert(1);
  transition:filter .45s var(--ease);
}
header.scrolled .navbtn .ic{
  filter:brightness(0) saturate(100%);
}
.navbtn span.label{
  font-family:var(--display); font-weight:400;
  font-size:12.5px; letter-spacing:.06em; color:#fff;
  transition:color .45s var(--ease);
}
header.scrolled .navbtn span.label{ color:var(--ink); }

.navbtn:hover{
  background:var(--wine);
  border-color:var(--wine);
  transform:translateY(-2px);
  box-shadow:0 14px 24px -12px rgba(128,13,70,.55);
}
.navbtn:hover .ic{ filter:brightness(0) invert(1); }
.navbtn:hover span.label{ color:#fff; }
.navbtn:active{
  transform:translateY(0) scale(.94);
  box-shadow:0 4px 10px -6px rgba(128,13,70,.55);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}

/* ================= HERO / FV ================= */
.hero{
  position:relative; height:100vh; min-height:640px; width:100%;
  overflow:hidden; background:var(--ink);
}
.hero .slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.8s ease, transform 8s linear;
}
.hero .slide.active{ opacity:1; transform:scale(1); }
.hero .slide.slide-contain{
  background-size:auto 62%;
  background-repeat:no-repeat;
  background-position:center;
  background-color:var(--linen);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.08) 32%, rgba(0,0,0,.18) 68%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff; padding:0 24px;
}
.hero-content .kicker{
  font-family:var(--display); font-weight:400; font-size:13px;
  letter-spacing:.3em; opacity:0; transform:translateY(14px);
  animation:heroIn 1.1s var(--ease) .3s forwards;
}
.hero-content h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(46px,7.2vw,92px); line-height:1.05; margin:22px 0 12px;
  letter-spacing:.02em;
  opacity:0; transform:translateY(22px);
  animation:heroIn 1.2s var(--ease) .55s forwards;
}
.hero-content .jp-tag{
  font-family:var(--mincho); font-weight:500; font-size:clamp(16px,2vw,21px);
  letter-spacing:.12em; opacity:0; transform:translateY(16px);
  animation:heroIn 1.2s var(--ease) .85s forwards;
}
@keyframes heroIn{ to{opacity:1; transform:translateY(0);} }

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:#fff; opacity:0; animation:heroIn 1s var(--ease) 1.3s forwards;
}
.scroll-cue span{ font-family:var(--display); font-weight:400; font-size:11px; letter-spacing:.24em; }
.scroll-cue .line{ width:1px; height:38px; background:rgba(255,255,255,.55); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:#fff; animation:scrollDrop 2.1s ease-in-out infinite;
}
@keyframes scrollDrop{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

.hero-dots{ position:absolute; right:40px; bottom:40px; z-index:2; display:flex; gap:9px; }
.hero-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45); transition:background .4s, transform .4s; }
.hero-dots i.active{ background:#fff; transform:scale(1.4); }

/* ================= SECTION shells ================= */
section{ position:relative; }
.section-pad{ padding:140px 0; }
.eyebrow{
  display:inline-block; font-family:var(--display); font-weight:400;
  font-size:13px; color:var(--wine); letter-spacing:.08em; margin-bottom:18px;
}
h2.h-jp{
  font-family:var(--mincho); font-weight:600; font-size:clamp(26px,3.2vw,38px);
  line-height:1.6; letter-spacing:.03em; color:var(--ink);
}
.lead{ max-width:640px; color:var(--ink-65); font-size:15.5px; }

/* ---------- CONCEPT ---------- */
#concept{ background:var(--linen); }
.concept-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:70px; align-items:center;
}
.concept-text .lead{ margin-top:24px; }
.concept-photo{ position:relative; }
.concept-photo img{ width:100%; border-radius:4px 60px 4px 4px; box-shadow:0 40px 70px -40px rgba(0,0,0,.45); }
.concept-photo .cat-caption{
  position:absolute; left:-34px; bottom:-30px; background:#fff;
  padding:16px 22px; max-width:230px; border-radius:4px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.3);
  font-size:12.5px; color:var(--ink-65); line-height:1.7;
}
.cat-caption b{ display:block; font-family:var(--mincho); font-size:14px; color:var(--wine); margin-bottom:4px; font-weight:600;}

.feature-list{ margin-top:46px; display:flex; flex-direction:column; gap:0; }
.feature-list li{
  display:grid; grid-template-columns:64px 1fr; gap:20px;
  padding:24px 0; border-top:1px solid rgba(0,0,0,.1);
}
.feature-list li:last-child{ border-bottom:1px solid rgba(0,0,0,.1); }
.feature-list .mark{
  font-family:var(--display); font-weight:400; font-size:22px; color:var(--wine); opacity:.6;
}
.feature-list h3{ font-family:var(--mincho); font-size:16.5px; font-weight:600; margin-bottom:6px; }
.feature-list p{ font-size:13.6px; color:var(--ink-65); }

/* ---------- MENU ---------- */
#menu{ background:var(--white); }
.menu-head{ margin-bottom:56px; }
.menu-head .lead{ margin-top:18px; }

.menu-gallery-row{
  display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:22px;
  margin-bottom:68px;
}
.menu-gallery-row figure{
  position:relative; margin:0; overflow:hidden; border-radius:4px;
  height:340px;
  box-shadow:0 30px 60px -36px rgba(0,0,0,.4);
}
.menu-gallery-row img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform .8s var(--ease);
}
.menu-gallery-row figure:hover img{ transform:scale(1.1); }
.menu-gallery-row figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 20px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  color:#fff; font-family:var(--display); font-weight:400;
  font-size:11.5px; letter-spacing:.14em;
}

.menu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.menu-card{
  background:var(--linen); border-radius:4px; padding:38px 40px;
  border:1px solid rgba(0,0,0,.06);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.menu-card:hover{ transform:translateY(-6px); box-shadow:0 30px 55px -30px rgba(0,0,0,.28); background:var(--mint); }
.menu-card .num{ font-family:var(--display); font-weight:400; color:var(--wine); font-size:12px; letter-spacing:.1em; }
.menu-card h3{ font-family:var(--mincho); font-size:20px; font-weight:600; margin:8px 0 22px; }
.menu-card .row{
  display:flex; justify-content:space-between; gap:14px;
  padding:12px 0; border-top:1px dashed rgba(0,0,0,.15);
  font-size:13.6px;
}
.menu-card .row:last-child{ padding-bottom:0; }
.menu-card .row .name{ color:var(--ink-85); }
.menu-card .row .time{ display:block; color:var(--ink-45); font-size:11.5px; margin-top:2px; }
.menu-card .row .price{ font-family:var(--display); font-weight:400; white-space:nowrap; }
.menu-note{ margin-top:30px; font-size:12.5px; color:var(--ink-45); }

/* ---------- FAQ ---------- */
#faq{ background:var(--fog); }
.faq-list{ max-width:800px; margin:0 auto; }
.faq-item{ border-bottom:1px solid rgba(0,0,0,.15); }
.faq-item:first-child{ border-top:1px solid rgba(0,0,0,.15); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:26px 4px; font-family:var(--mincho); font-size:15.5px; font-weight:600; color:var(--ink);
}
.faq-q .q-mark{ font-family:var(--display); font-weight:400; color:var(--wine); font-size:16px; margin-right:14px; }
.faq-q .plus{
  flex:none; width:26px; height:26px; position:relative;
}
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position:absolute; background:var(--wine); top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq-q .plus::before{ width:16px; height:1.5px; }
.faq-q .plus::after{ width:1.5px; height:16px; transition:transform .4s var(--ease); }
.faq-item.open .plus::after{ transform:translate(-50%,-50%) rotate(90deg) scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq-a p{ padding:0 4px 28px 46px; font-size:13.8px; color:var(--ink-65); max-width:620px; }

/* ---------- ACCESS ---------- */
#access{ background:var(--white); }
.access-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:0; border-radius:4px; overflow:hidden; box-shadow:0 40px 80px -50px rgba(0,0,0,.4); }
.access-map iframe{ width:100%; height:100%; min-height:440px; border:0; filter:grayscale(.15) contrast(1.02); }
.access-info{ background:var(--wine); color:#fff; padding:56px 48px; display:flex; flex-direction:column; justify-content:center; gap:30px; }
.access-info h3{ font-family:var(--mincho); font-size:19px; font-weight:600; margin-bottom:6px; }
.access-block .label{ font-family:var(--display); font-weight:400; font-size:11px; letter-spacing:.12em; color:var(--mint); display:block; margin-bottom:8px; }
.access-block p{ font-size:14px; line-height:1.85; color:rgba(255,255,255,.9); }
.access-block a{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- CONTACT ---------- */
#contact{
  background:var(--mint);
  padding:150px 0;
  text-align:center;
}
#contact .lead{ margin:20px auto 0; }
.contact-btn{
  position:relative; display:inline-flex; align-items:center; gap:14px;
  margin-top:52px; padding:22px 58px;
  border:1.5px solid var(--ink);
  border-radius:999px; overflow:hidden;
  font-family:var(--display); font-weight:400; font-size:17px;
  letter-spacing:.08em; color:var(--ink);
  background:transparent;
  transition:color .55s var(--ease), border-color .55s var(--ease), transform .35s var(--ease);
}
.contact-btn::before{
  content:""; position:absolute; inset:0; border-radius:999px;
  background:var(--wine);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
  z-index:0;
}
.contact-btn .txt, .contact-btn .arrow{ position:relative; z-index:1; }
.contact-btn .arrow{ transition:transform .5s var(--ease); }
.contact-btn:hover{ color:#fff; border-color:var(--wine); transform:translateY(-3px); }
.contact-btn:hover::before{ transform:scaleX(1); }
.contact-btn:hover .arrow{ transform:translateX(8px); }
.contact-btn:active{ transform:translateY(-1px) scale(.97); }
.contact-sub{ margin-top:34px; font-size:13px; color:var(--ink-65); }
.contact-sub a{ color:var(--wine-deep); font-weight:500; }

/* ================= FOOTER ================= */
footer{ background:#fff; padding:70px 0 30px; border-top:1px solid var(--fog); }
.foot-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--fog); }
.foot-logo .en{ font-family:var(--display); font-weight:400; font-size:20px; letter-spacing:.06em; }
.foot-logo .jp{ font-family:var(--mincho); font-size:10px; letter-spacing:.3em; opacity:.55; margin-top:8px; }
.foot-nav{ display:flex; gap:44px; }
.foot-nav h4{ font-family:var(--display); font-weight:400; font-size:11px; letter-spacing:.14em; color:var(--ink-45); margin-bottom:14px;}
.foot-nav a{ display:block; font-size:13.5px; color:var(--ink-65); padding:5px 0; transition:color .3s; }
.foot-nav a:hover{ color:var(--wine); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; flex-wrap:wrap; gap:12px; }
.foot-bottom p{ font-size:11.5px; color:var(--ink-45); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1080px){
  .concept-grid{ grid-template-columns:1fr; }
  .concept-photo{ order:-1; }
  .access-grid{ grid-template-columns:1fr; }
  .access-map iframe{ min-height:320px; }
  .menu-grid{ grid-template-columns:1fr; }
  .menu-gallery-row{ grid-template-columns:1fr 1fr; }
  .menu-gallery-row figure:nth-child(3){ grid-column:1 / -1; }
}
@media (max-width: 680px){
  .wrap{ padding:0 22px; }
  nav.gnav{ gap:6px; }
  .navbtn{ padding:9px 12px; }
  .navbtn span.label{ font-size:11px; }
  .section-pad{ padding:90px 0; }
  #contact{ padding:100px 0; }
  .menu-gallery-row{ grid-template-columns:1fr; }
  .menu-gallery-row figure{ height:260px; }
  .menu-gallery-row figure:nth-child(3){ grid-column:auto; }
}