/* ============================================================
   Mitsubachi PHOTO Reserve Flow
   Version : v4.0.0
============================================================ */

:root{
  --ivory:#fffaf2;
  --paper:#fffefb;
  --soft:#fff4d4;
  --honey:#ffeaa5;
  --honey-dark:#d3a226;
  --ink:#554942;
  --text:#645b55;
  --muted:#93867d;
  --line:#eadfce;
  --green:#516f40;
  --shadow:0 16px 38px rgba(93,74,50,.10);
  --serif:"Noto Serif JP", serif;
  --sans:"Noto Sans JP", system-ui, sans-serif;
  --maru:"Zen Maru Gothic", "Noto Sans JP", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ivory);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.75;
  letter-spacing:.02em;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 12% 4%, rgba(255,234,165,.48), transparent 24%),
    radial-gradient(circle at 92% 0%, rgba(255,244,212,.85), transparent 30%),
    var(--ivory);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px clamp(16px,4vw,48px);
  background:rgba(255,250,242,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(234,223,206,.75);
}
.brand{
  color:var(--ink);
  font-family:var(--maru);
  font-weight:900;
  letter-spacing:.08em;
}
.header-links{
  display:flex;
  gap:10px;
  align-items:center;
}
.header-links a{
  font-size:12px;
  font-weight:800;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.74);
  border:1px solid var(--line);
}
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:44px;
  padding:10px 20px;
  border-radius:999px;
  font-weight:900;
  font-size:14px;
  border:1px solid transparent;
}
.btn.primary{
  background:var(--honey);
  color:var(--ink);
  box-shadow:0 12px 28px rgba(164,123,26,.16);
}
.btn.ghost{
  background:rgba(255,255,255,.78);
  border-color:var(--line);
}
.photo{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,234,165,.40));
}
.photo.is-placeholder::after{
  content:"PHOTO";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(85,73,66,.28);
  font-weight:900;
  letter-spacing:.18em;
}
.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.footer{
  padding:28px 20px 94px;
  text-align:center;
  color:var(--muted);
  border-top:1px solid var(--line);
}
.footer p{
  margin:0 0 8px;
  font-weight:900;
}
.footer a{margin:0 8px}
.sticky-reserve{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:30;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,250,242,.88);
  border-top:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.sticky-reserve a{
  display:grid;
  place-items:center;
  min-height:46px;
  width:100%;
  border-radius:999px;
  background:var(--honey);
  color:var(--ink);
  font-weight:900;
}
.pattern-band{
  background:
    radial-gradient(circle, rgba(211,162,38,.17) 16%, transparent 17%) 0 0/28px 28px,
    linear-gradient(135deg,rgba(255,234,165,.34),rgba(255,255,255,.42));
  border-block:1px solid rgba(234,223,206,.68);
}
@media (max-width:680px){
  body{font-size:14px}
  .site-header{
    padding:10px 14px;
  }
  .header-links a:not(.reserve-short){display:none}
}