/* VESTA トップページ（2026リデザイン・家族でゆっくり軸・ライト洋風）
   フラットデザイン／グラデーション不使用。index.php から $page_css で読み込む */
/* ========= Tokens（明るい洋風・フラット／グラデーション不使用） ========= */
:root{
  --cream:#fbf6ee;      /* ベース */
  --paper:#ffffff;
  --wood:#ecdcc2;       /* 店内の木目 */
  --ink:#2b211c;
  --sub:#6f6259;
  --line:#e7dccb;
  --brand:#780f16;      /* ロゴの臙脂 */
  --red:#c8322a;        /* 明るめのアクセント赤 */
  --wood-l:#f4eadb;
  --butter:#f5c955;     /* 差し色：ヒーローのマーカーのみ */
  --leaf:#9cc43f;       /* 差し色：ヒーローのステッカーのみ（椅子のライムグリーン） */
  --f-latin:"Fraunces",Georgia,"Times New Roman",serif;
  --f-head:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  --f-body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",system-ui,sans-serif; /* 本文は端末標準（Webフォントは見出しのみ） */
  --r:28px;
  --pad:clamp(16px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}
body{background:var(--cream);color:var(--ink);font-family:var(--f-body);line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--butter);color:var(--ink)}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--pad)}
.it{font-family:var(--f-latin);font-style:italic;font-weight:500}
.eyebrow{font-family:var(--f-latin);font-style:italic;font-size:1.05rem;color:var(--red);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}

/* ========= Buttons（ヘッダー/フッターは site-2026.css の .v- 系） ========= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;border-radius:999px;padding:12px 22px;font-size:.92rem;transition:transform .25s,background .25s,color .25s,box-shadow .25s;will-change:transform}
.btn-red{background:var(--red);color:#fff;box-shadow:0 4px 0 var(--brand)}
.btn-red:hover{background:var(--brand)}
.btn-line{background:var(--paper);border:1.5px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}

/* ========= Hero ========= */
.hero{position:relative;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:clamp(24px,5vw,72px);padding:130px var(--pad) 72px;max-width:1400px;margin-inline:auto;min-height:92svh}
.hero-copy{position:relative;z-index:2}
.hero h1{font-family:var(--f-head);font-weight:900;font-size:clamp(2.1rem,4.6vw,4.4rem);white-space:nowrap;line-height:1.28;letter-spacing:.01em;margin:18px 0 24px}
.hero h1 .kicker{display:block;font-family:var(--f-body);font-weight:700;font-size:clamp(.85rem,1.1vw,1rem);letter-spacing:.08em;color:var(--brand);white-space:normal;margin-bottom:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:inline-block}
.hero h1 .mark{position:relative;white-space:nowrap}
.hero h1 .mark::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.08em;height:.32em;background:var(--butter);z-index:-1;border-radius:4px;transform-origin:left;transform:scaleX(var(--mk,1))}
.hero .voice{font-family:var(--f-head);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--brand)}
.hero .voice small{display:block;font-family:var(--f-body);font-weight:500;font-size:.78rem;color:var(--sub);margin-top:2px}
.hero p.lead{max-width:29em;color:var(--sub);margin-top:14px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-cta .btn{padding:16px 30px;font-size:1rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;padding:7px 15px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.hero-media{position:relative;aspect-ratio:1/1.02;max-height:78svh;width:100%}
.hm-main{position:absolute;inset:0 0 10% 10%;border-radius:220px 220px var(--r) var(--r);overflow:hidden;background:var(--wood)}
.hm-main img{width:100%;height:100%;object-fit:cover}
.hm-sub{position:absolute;left:0;bottom:0;width:40%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:8px solid var(--cream)}
.hm-sub img{width:100%;height:100%;object-fit:cover}
.sticker{position:absolute;right:-8px;top:6%;width:clamp(110px,11vw,150px);aspect-ratio:1;border-radius:50%;background:var(--leaf);display:grid;place-items:center;color:var(--ink)}
.sticker svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.sticker b{font-family:var(--f-head);font-weight:900;font-size:clamp(.95rem,1.3vw,1.15rem);line-height:1.2;text-align:center}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:100px;min-height:auto}
  .hero-media{order:-1;max-width:520px;margin-inline:auto}
}

/* ========= Marquee ========= */
.marquee{overflow:hidden;padding:18px 0;background:var(--brand);color:var(--cream);transform:rotate(-1.5deg);margin-block:10px 40px;width:104%;margin-left:-2%}
.marquee-track{display:flex;width:max-content;animation:mq 36s linear infinite}
.marquee span{font-family:var(--f-head);font-weight:700;font-size:clamp(1.1rem,2.2vw,1.7rem);white-space:nowrap;padding-inline:26px;display:inline-flex;align-items:center;gap:52px}
.marquee span.l{font-family:var(--f-latin);font-style:italic;font-weight:500}
.marquee span::after{content:"●";color:#d98a8f;font-size:.45em}
@keyframes mq{to{transform:translateX(-50%)}}

/* ========= Section base ========= */
section{position:relative}
.sec{padding-block:clamp(72px,11vw,150px)}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,60px)}
.sec-h h2{font-family:var(--f-head);font-weight:900;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.3;margin-top:10px}
.sec-h p{max-width:26em;color:var(--sub)}

/* ========= Bento ========= */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,auto);gap:16px}
.card{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper);padding:clamp(24px,2.6vw,38px);display:flex;flex-direction:column;justify-content:space-between;min-height:220px}
.card .num{font-family:var(--f-latin);font-style:italic;font-size:1rem;color:var(--red)}
.card h3{font-family:var(--f-head);font-weight:900;font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.4;margin:10px 0}
.card p{color:var(--sub);font-size:.93rem}
.card .ico{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;background:var(--cream)}
.card.photo{padding:0}
.card.photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card.photo:hover img{transform:scale(1.05)}
.card.photo .cap{position:absolute;left:16px;bottom:16px;background:var(--paper);padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:700}
.card.wood{background:var(--wood)}
.card.wood p{color:#5e5047}
.card.plain{background:var(--wood-l)}
.card.plain .big-stat{color:var(--red)}
.card.brand{background:var(--brand);color:var(--cream)}.card.brand p{color:#f3d7d3}.card.brand .num{color:#f3d7d3}
.big-stat{font-family:var(--f-latin);font-weight:700;font-size:clamp(4.2rem,9vw,8rem);line-height:.9;letter-spacing:-.03em}
.big-stat small{font-family:var(--f-head);font-size:.3em;letter-spacing:0;margin-left:.15em}
.c1{grid-column:span 3;grid-row:span 2}.c2{grid-column:span 3}.c3{grid-column:span 2}.c4{grid-column:span 1}.c5{grid-column:span 2;grid-row:span 2}.c6{grid-column:span 4}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.c1,.c2,.c3,.c5,.c6{grid-column:span 2}.c4{grid-column:span 2}.c1{min-height:360px}.c5{min-height:320px}}

/* ========= Signature（横スクロール） ========= */
.sig{background:var(--paper);overflow:hidden;border-radius:48px 48px 0 0}
.rail{display:flex;gap:20px;padding-inline:var(--pad);width:max-content}
.dish{width:clamp(280px,31vw,430px);flex:none}
.dish figure{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--wood);position:relative}
.dish img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.dish:hover img{transform:scale(1.05)}
.dish .badge{position:absolute;top:16px;left:16px;background:var(--paper);color:var(--red);font-size:.78rem;font-weight:700;padding:6px 12px;border-radius:999px}
.dish .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px}
.dish h3{font-family:var(--f-head);font-weight:900;font-size:1.4rem}
.dish .en{font-family:var(--f-latin);font-style:italic;color:var(--sub);font-size:.95rem}
.dish p{font-size:.9rem;color:var(--sub);margin-top:4px}
.rail-end{width:clamp(260px,26vw,360px);flex:none;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:32px;border-radius:var(--r);background:var(--wood-l)}
.rail-end strong{font-family:var(--f-head);font-weight:900;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.4}
/* スマホ：ネイティブの横スワイプ（左端スナップ＋次のカードを少し見せる） */
.rail-ui{display:none}
@media(max-width:900px){
  .rail-wrap{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rail-wrap::-webkit-scrollbar{display:none}
  .rail{gap:14px}
  .dish,.rail-end{scroll-snap-align:start}
  .dish{width:76vw;max-width:340px}
  .dish figure{aspect-ratio:1/1}
  .rail-end{width:64vw;max-width:280px}
  .rail-ui{display:flex;align-items:center;gap:14px;padding:22px var(--pad) 0}
  .rail-ui .hint{font-size:.8rem;font-weight:700;color:var(--sub);white-space:nowrap;transition:opacity .4s}
  .rail-ui .hint.off{opacity:0}
  .rail-ui .bar{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
  .rail-ui .bar i{display:block;height:100%;width:100%;background:var(--red);transform-origin:left;transform:scaleX(.2);transition:transform .15s}
}

/* ========= Statement ========= */
.stmt{background:var(--paper)}
.stmt p{font-family:var(--f-head);font-weight:900;font-size:clamp(1.6rem,3.8vw,3.2rem);line-height:1.65;max-width:22em}
.stmt .w{color:#e9e1d5;transition:color .3s}
.stmt .w.on{color:var(--ink)}
.stmt .w.hot.on{color:var(--red)}

/* ========= Voices ========= */
.voices{background:var(--paper)}
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vc{background:var(--cream);border-radius:var(--r);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.vc blockquote{font-family:var(--f-head);font-weight:700;font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.75}
.vc blockquote::before{content:"\201C";display:block;font-family:var(--f-latin);font-size:3.2rem;line-height:.6;color:var(--red);margin-bottom:10px}
.vc figcaption{font-size:.8rem;color:var(--sub)}
@media(max-width:900px){.voice-grid{grid-template-columns:1fr}}

/* ========= Scene ========= */
.scene-wrap{background:var(--paper);padding-bottom:clamp(72px,11vw,150px)}
.scene{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.scene figure{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.scene figure img{width:100%;height:100%;object-fit:cover}
.scene figcaption{position:absolute;left:16px;bottom:16px;background:var(--paper);padding:10px 18px;border-radius:999px;font-size:.88rem;font-weight:500}
.scene figcaption b{font-family:var(--f-latin);font-style:italic;color:var(--red);margin-right:8px}
@media(max-width:900px){.scene{grid-template-columns:1fr}}

/* ========= FAQ ========= */
.faq{display:grid;gap:12px;max-width:900px}
.faq details{background:var(--paper);border-radius:20px;padding:4px 26px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-family:var(--f-head);font-weight:700;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-latin);font-size:1.5rem;color:var(--red);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--sub);padding-bottom:14px}
.faq .more{display:inline-block;color:var(--red);font-weight:700;font-size:.9rem;padding-bottom:20px}

/* ========= News ========= */
.news{display:grid;gap:12px}
.news li{list-style:none}
.news a{display:grid;grid-template-columns:130px 1fr auto;gap:24px;align-items:center;padding:22px 26px;background:var(--paper);border-radius:20px;transition:transform .3s,background .3s}
.news a:hover{transform:translateX(6px);background:var(--wood-l)}
.news time{font-family:var(--f-latin);color:var(--sub)}
.news h3{font-weight:500;font-size:1.02rem}
.news .tag{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--red);color:#fff;margin-right:10px;vertical-align:2px}
.news .go{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--red);transition:background .3s,color .3s}
.news a:hover .go{background:var(--red);color:#fff}
@media(max-width:700px){.news a{grid-template-columns:1fr auto;gap:4px 14px}.news time{grid-column:1/-1}}

/* ========= Access / CTA ========= */
.access{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.access .card{min-height:auto}
.info-list{margin-top:18px}
.info-list div{display:grid;grid-template-columns:7em 1fr;gap:16px;padding:15px 0;border-top:1px dashed var(--line)}
.info-list dt{color:var(--sub);font-size:.86rem}
.info-list dd{font-weight:500}
.cta-big{background:var(--red);color:#fff;gap:28px}
.cta-big .eyebrow{color:#ffe3df}
.access-name{font-family:var(--f-head);font-weight:900;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.4;margin:10px 0}
.access-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.info-list dd a{color:var(--red);font-weight:700}
.cta-title{font-family:var(--f-head);font-weight:900;font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.4}
.tel-note{color:#ffe3df;margin:8px 0 20px}
.cta-big .tel{font-family:var(--f-latin);font-weight:700;font-size:clamp(2rem,4vw,3.1rem);line-height:1;display:block}
.cta-big .btn{background:var(--paper);color:var(--ink);padding:16px 26px}
.cta-big .btn:hover{background:var(--wood)}
@media(max-width:900px){.access{grid-template-columns:1fr}}

/* ========= Motion ========= */
/* JS有効時の初期状態（home.js の GSAP が表示へ戻す。読めなければ <head> の保険で .js が外れて全表示） */
.js .rv{opacity:0;transform:translateY(40px)}
.js .rv-h{opacity:0}
.js .hero h1 .ln>span{transform:translateY(110%)}
.js .hero h1 .mark{--mk:0}
.js .hm-sub,.js .sticker{transform:scale(0)}
@supports (animation-timeline:view()){
  .scene figure img{animation:parallax linear both;animation-timeline:view();scale:1.18}
  @keyframes parallax{from{translate:0 -6%}to{translate:0 6%}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .rv-h,.js .hero h1 .ln>span,.js .hm-sub,.js .sticker{opacity:1;transform:none}
  .js .hero h1 .mark{--mk:1}
}