/* ============================================================
   古民家カフェ ひだまり | 集客LP
   palette: cream #f5e7da / blue frame #6c9fbe / burnt #f5992c
   ============================================================ */
:root{
  --cream:#f5e7da;
  --cream-2:#fffdf5;
  --ink:#4d3f33;
  --ink-deep:#33291f;
  --blue:#6c9fbe;
  --orange:#f5992c;
  --accent:#9a5108;
  --olive:#6b6a40;
  --line:rgba(77,63,51,.25);
  --frame:18px;
  --font-s:"Noto Serif JP",serif;
  --font-e:"Cormorant Infant","Noto Serif JP",serif;
  --ease:cubic-bezier(.215,.61,.355,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-s);
  font-size:15px;line-height:2;
  font-weight:400;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--orange);color:var(--ink-deep)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- viewport frame ---------- */
.frame{position:fixed;inset:0;border:var(--frame) solid var(--blue);pointer-events:none;z-index:100}
@media(max-width:768px){:root{--frame:9px}}

.wrap{width:min(100% - 48px,1100px);margin-inline:auto}
.en{font-family:var(--font-e);letter-spacing:.24em;text-transform:uppercase}

/* ---------- header ---------- */
.header{
  position:fixed;top:var(--frame);left:var(--frame);right:var(--frame);z-index:90;
  transition:background .4s ease,box-shadow .4s ease;
}
.header-in{display:flex;align-items:center;justify-content:space-between;height:76px;padding:0 32px}
.logo{display:flex;flex-direction:column;line-height:1.5;color:#fff;transition:color .4s ease}
.logo strong{font-weight:600;font-size:20px;letter-spacing:.14em}
.logo small{font-family:var(--font-e);font-size:9px;letter-spacing:.3em;text-transform:uppercase;opacity:.85}
.nav{display:flex;gap:30px;align-items:center}
.nav a{font-size:13px;letter-spacing:.12em;color:#fff;transition:color .4s ease;padding:6px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .3s ease}
.nav a:hover::after{width:100%}
.nav .btn-rsv{border:1px solid #fff;padding:10px 24px;transition:background .3s ease,color .3s ease,border-color .3s ease}
.nav .btn-rsv:hover{background:var(--orange);border-color:var(--orange);color:var(--ink-deep)}
.header.is-solid{background:rgba(255,253,245,.96);box-shadow:0 1px 0 var(--line)}
.header.is-solid .logo,.header.is-solid .nav a{color:var(--ink)}
.header.is-solid .nav .btn-rsv{border-color:var(--ink)}
.header.is-solid .nav .btn-rsv:hover{background:var(--orange);border-color:var(--orange);color:var(--ink-deep)}
.menu-btn{display:none;flex-direction:column;gap:6px;padding:10px}
.menu-btn i{display:block;width:26px;height:1.5px;background:currentColor;transition:transform .3s ease,opacity .3s ease}
.menu-btn{color:#fff}
.header.is-solid .menu-btn{color:var(--ink)}
.menu-btn.is-open i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-btn.is-open i:nth-child(2){opacity:0}
.menu-btn.is-open i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- hero (video) ---------- */
.hero{position:relative;height:100dvh;min-height:600px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero video.is-on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:rgba(20,12,6,.42)}
.hero-in{position:relative;z-index:1;padding:0 24px;opacity:0;transition:opacity 1s ease .65s}
.hero.is-in .hero-in{opacity:1}
.hero-in .en{font-size:11px;display:block;margin-bottom:24px;opacity:.9}
.hero-title{font-weight:600;font-size:clamp(28px,4.2vw,52px);line-height:1.8;letter-spacing:.14em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-lead{margin-top:24px;font-size:14px;opacity:.92;letter-spacing:.08em}
.hero-cta{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 36px;font-size:13.5px;letter-spacing:.14em;min-height:52px;transition:background .3s ease,color .3s ease,border-color .3s ease;border:1px solid transparent}
.btn-orange{background:var(--orange);color:var(--ink-deep)}
.btn-orange:hover{background:#ffb357}
.btn-line{border-color:#fff;color:#fff}
.btn-line:hover{background:#fff;color:var(--ink-deep)}
.scroll-hint{position:absolute;bottom:calc(var(--frame) + 28px);left:50%;transform:translateX(-50%);z-index:1;font-family:var(--font-e);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#fff;opacity:.8}
.scroll-hint::after{content:"";display:block;width:1px;height:44px;background:#fff;margin:10px auto 0;animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- numbered section headings ---------- */
.sec{padding:110px 0}
.sec-head{margin-bottom:56px}
.sec-head .num{display:flex;align-items:center;gap:20px;font-family:var(--font-e);font-size:15px;color:var(--accent);letter-spacing:.2em}
.sec-head .num::after{content:"";height:1px;background:var(--accent);width:0;transition:width .4s ease .3s}
.sec-head.is-in .num::after{width:min(42vw,540px)}
.sec-head h2{font-weight:600;font-size:clamp(28px,3.4vw,42px);letter-spacing:.1em;margin-top:14px}

/* ---------- concept (vertical text) ---------- */
.concept{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.concept-img{overflow:hidden}
.concept-img img{width:100%;height:clamp(360px,44vw,540px);object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease)}
.concept-img.is-in img{transform:scale(1)}
.v-text{writing-mode:vertical-rl;text-orientation:mixed;height:clamp(320px,42vw,500px);margin-left:auto;font-weight:300;font-size:clamp(16px,1.5vw,19px);letter-spacing:.28em;line-height:2.6}
.v-text strong{font-weight:600;color:var(--accent)}
.concept-sub{margin-top:32px;font-size:13px;color:var(--olive);letter-spacing:.06em}

.more-link{display:inline-flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:6px;font-size:13px;letter-spacing:.14em;transition:border-color .3s ease}
.more-link .arr{opacity:0;transform:translateX(-10px);transition:opacity .3s ease,transform .3s var(--ease)}
.more-link:hover{border-color:var(--accent)}
.more-link:hover .arr{opacity:1;transform:translateX(0)}

/* ---------- menu ---------- */
.menu-sec{background:var(--cream-2)}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 64px}
.menu-item{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start}
.menu-item .mi-img{overflow:hidden;aspect-ratio:1}
.menu-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.menu-item:hover img{transform:scale(1.06)}
.menu-item h3{font-weight:600;font-size:18px;letter-spacing:.06em;display:flex;align-items:baseline;gap:12px}
.menu-item h3 .price{margin-left:auto;font-family:var(--font-e);font-size:20px;color:var(--accent);letter-spacing:.06em}
.menu-item .en{font-size:9.5px;color:var(--olive);display:block;margin:6px 0 12px}
.menu-item p{font-size:13px;color:var(--ink);opacity:.85}
.menu-note{margin-top:48px;font-size:12px;color:var(--olive);text-align:center;letter-spacing:.08em}

/* ---------- gallery (alternating large/small) ---------- */
.gal-row{display:flex;gap:24px;margin-bottom:24px;align-items:flex-end}
.gal-row:nth-child(even){flex-direction:row-reverse;align-items:flex-start}
.gal-big{width:65.21%;overflow:hidden}
.gal-small{width:30.43%;margin-left:auto;overflow:hidden}
.gal-row:nth-child(even) .gal-small{margin-left:0;margin-right:auto}
.gal-row img{width:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gal-big img{aspect-ratio:16/10}
.gal-small img{aspect-ratio:4/5}
.gal-row a:hover img,.gal-row div:hover img{transform:scale(1.05)}

/* ---------- access ---------- */
.access-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start}
.map{border:1px solid var(--line)}
.map iframe{width:100%;height:400px;border:0;display:block;filter:sepia(.25) saturate(.8)}
.info{border-top:1px solid var(--line)}
.info div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:16px 4px;border-bottom:1px solid var(--line);font-size:14px}
.info dt{color:var(--olive);letter-spacing:.1em}
.tel-big{margin-top:32px;font-family:var(--font-e);font-size:clamp(26px,3vw,36px);letter-spacing:.06em;color:var(--ink-deep)}
.tel-big:hover{color:var(--accent)}

/* ---------- reservation ---------- */
.rsv{background:var(--ink-deep);color:var(--cream)}
.rsv .sec-head .num{color:var(--orange)}
.rsv .sec-head .num::after{background:var(--orange)}
.rsv-form{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;max-width:820px}
.f-field{display:flex;flex-direction:column;gap:8px}
.f-field.full{grid-column:1/-1}
.f-label{font-size:12.5px;letter-spacing:.14em}
.f-label .req{color:var(--orange);font-size:11px;margin-left:8px}
.f-input{background:transparent;border:0;border-bottom:1px solid rgba(245,231,218,.4);color:var(--cream);padding:12px 2px;font:inherit;font-size:15px;transition:border-color .3s ease;border-radius:0}
.f-input::placeholder{color:rgba(245,231,218,.45)}
.f-input:focus{outline:none;border-bottom-color:var(--orange)}
.f-field.is-error .f-input{border-bottom-color:#ff8a6a}
.f-err{font-size:12px;color:#ffab92;display:none}
.f-field.is-error .f-err{display:block}
select.f-input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cream) 50%),linear-gradient(135deg,var(--cream) 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 10px) 55%;background-size:6px 6px;background-repeat:no-repeat}
select.f-input option{color:var(--ink)}
input[type="date"].f-input{color-scheme:dark}
.f-submit{grid-column:1/-1}
.f-submit .btn{width:100%;padding:20px;font-size:15px}
.f-note{grid-column:1/-1;font-size:11.5px;color:rgba(245,231,218,.55);text-align:center}
.f-success{grid-column:1/-1;text-align:center;padding:56px 24px;border:1px solid var(--orange);display:none}
.f-success.is-show{display:block}
.f-success h3{font-size:22px;margin-bottom:12px;font-weight:600}
.f-success p{font-size:13.5px;opacity:.85}

/* ---------- footer ---------- */
.footer{background:#333;color:#c9c2b6;padding:72px 0 40px}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;margin-bottom:44px}
.footer .logo strong{color:var(--cream)}
.footer-links{display:flex;gap:28px;flex-wrap:wrap}
.footer-links a{font-size:12.5px;letter-spacing:.12em;transition:color .3s ease}
.footer-links a:hover{color:var(--orange)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:10.5px;letter-spacing:.14em;color:#8d8678}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.15s}.rv-d2{transition-delay:.3s}.rv-d3{transition-delay:.45s}.rv-d4{transition-delay:.6s}.rv-d5{transition-delay:.75s}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .concept{grid-template-columns:1fr;gap:40px}
  .v-text{height:auto;writing-mode:horizontal-tb;letter-spacing:.08em;line-height:2.2;margin-left:0}
  .menu-grid{grid-template-columns:1fr;gap:40px}
  .access-grid{grid-template-columns:1fr;gap:40px}
  .rsv-form{grid-template-columns:1fr}
}
@media(max-width:860px){
  .nav{
    position:fixed;inset:calc(-1 * var(--frame));background:var(--cream-2);
    flex-direction:column;justify-content:center;gap:26px;
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
  }
  .nav.is-open{opacity:1;visibility:visible}
  .nav a,.header .nav a{color:var(--ink);font-size:18px}
  .nav .btn-rsv{border-color:var(--ink)}
  .menu-btn{display:flex;z-index:96;position:relative}
  .header.is-solid .menu-btn,.menu-btn.is-open{color:var(--ink)}
}
@media(max-width:640px){
  .sec{padding:72px 0}
  .menu-item{grid-template-columns:1fr;gap:16px}
  .menu-item .mi-img{aspect-ratio:16/10}
  .gal-row,.gal-row:nth-child(even){flex-direction:column;align-items:stretch;gap:24px}
  .gal-big,.gal-small,.gal-small img{width:100%;margin:0}
  .gal-small img{aspect-ratio:16/10}
  .info div{grid-template-columns:1fr;gap:4px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .sec-head .num::after{width:min(42vw,540px)}
}