/* VESTA 共通レイアウト（2026リデザイン）
   全ページ共通のヘッダー / フッター / スマホ下部の予約バー。includes/header.php・footer.php が出力する .v- 系クラス。
   旧 style.css と衝突しないよう、すべて v- 接頭辞。フラットデザイン／グラデーション不使用。 */
:root{
  --cream:#fbf6ee;--paper:#ffffff;--wood:#ecdcc2;--wood-l:#f4eadb;
  --ink:#2b211c;--sub:#6f6259;--line:#e7dccb;
  --brand:#780f16;--red:#c8322a;--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;
  --r:28px;--pad:clamp(16px,4vw,48px);
}
/* 旧 style.css の「* { transform: translateZ(0) }」が html/body に掛かると position:fixed が効かなくなるため打ち消す */
html,body{transform:none!important;backface-visibility:visible!important}
.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}

/* ========= Header ========= */
.v-hdr{position:fixed;top:14px;left:var(--pad);right:var(--pad);z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 24px;border-radius:999px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);border:1px solid var(--line);font-family:var(--f-body);line-height:1.5;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.v-hdr.hide{transform:translateY(-140%)}
.v-hdr a{color:inherit;text-decoration:none}
.v-logo{font-family:var(--f-latin);font-weight:700;font-size:1.5rem;letter-spacing:.06em;line-height:1;color:var(--brand)!important}
.v-logo small{display:block;font-family:var(--f-body);font-size:.6rem;font-weight:500;letter-spacing:.15em;color:var(--sub);margin-top:3px}
.v-nav{display:flex;gap:26px;font-size:.9rem;font-weight:500;color:var(--ink)}
.v-nav a{position:relative;white-space:nowrap}
.v-nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .35s}
.v-nav a:hover::after,.v-nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.v-nav a[aria-current="page"]{color:var(--red)}
.v-hdr-r{display:flex;align-items:center;gap:10px}
.v-status{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:500;color:var(--ink);padding:7px 13px;border-radius:999px;background:var(--cream);border:1px solid var(--line);white-space:nowrap}
.v-status i{width:8px;height:8px;border-radius:50%;background:#b9aea3}
.v-status.open i{background:#3fae5a;animation:v-ping 1.8s infinite}
@keyframes v-ping{0%{box-shadow:0 0 0 0 rgba(63,174,90,.5)}70%{box-shadow:0 0 0 8px rgba(63,174,90,0)}100%{box-shadow:0 0 0 0 rgba(63,174,90,0)}}
.v-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--f-body);font-weight:700;border-radius:999px;padding:12px 22px;font-size:.92rem;line-height:1.4;text-decoration:none;transition:background .25s,color .25s}
.v-btn-red{background:var(--red);color:#fff!important;box-shadow:0 4px 0 var(--brand)}
.v-btn-red:hover{background:var(--brand)}
.v-btn-line{background:var(--paper);color:var(--ink)!important;border:1.5px solid var(--ink)}
.v-btn-line:hover{background:var(--ink);color:var(--cream)!important}
.v-menu-btn{display:none;position:relative;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--paper);cursor:pointer;padding:0}
.v-menu-btn span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s}
.v-menu-btn span:first-child{top:16px}
.v-menu-btn span:last-child{top:24px}
.v-menu-btn[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.v-menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media(max-width:1100px){.v-nav{gap:18px;font-size:.85rem}.v-status{display:none}}
@media(max-width:900px){
  .v-nav{display:none}
  .v-hdr-cta{display:none!important}
  .v-status{display:inline-flex}
  .v-menu-btn{display:block}
  .v-nav.open{display:flex;flex-direction:column;gap:0;position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:6px 22px}
  .v-nav.open a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .v-nav.open a:last-child{border-bottom:0}
  .v-nav.open a::after{display:none}
}
@media(max-width:380px){.v-status{display:none}}

/* ========= Footer ========= */
.v-ftr{background:var(--cream);color:var(--ink);font-family:var(--f-body);line-height:1.85;padding-block:56px 120px;padding-inline:var(--pad);overflow:hidden;border-top:1px solid var(--line)}
.v-ftr-in{max-width:1280px;margin-inline:auto}
.v-ftr a{color:inherit;text-decoration:none}
.v-ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:32px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.v-ftr-name{font-family:var(--f-head);font-weight:900;font-size:1.1rem;margin:0 0 8px}
.v-ftr address{font-style:normal;color:var(--sub);font-size:.88rem;line-height:1.9}
.v-ftr address a{color:var(--red);font-weight:700}
.v-ftr-h{font-weight:700;font-size:.85rem;margin:0 0 10px}
.v-ftr ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:.88rem;color:var(--sub)}
.v-ftr ul a:hover{color:var(--red)}
.v-ftr-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;color:var(--sub);font-size:.86rem}
.v-ftr-giant{font-family:var(--f-latin);font-weight:700;font-size:clamp(5rem,25vw,23rem);line-height:.8;letter-spacing:-.03em;color:var(--brand);margin-top:24px;user-select:none}
.v-ftr-giant span{color:var(--red);font-style:italic}
@media(max-width:900px){.v-ftr-grid{grid-template-columns:1fr}}

/* ========= Mobile dock ========= */
.v-dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:none;gap:8px;padding:8px;border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line)}
.v-dock .v-btn{flex:1;padding:14px}
.v-dock .v-btn-red{box-shadow:none}
@media(max-width:900px){.v-dock{display:flex}}

@media (prefers-reduced-motion:reduce){.v-hdr,.v-nav a::after,.v-menu-btn span{transition:none}.v-status.open i{animation:none}}
