/* ===== 和銅ぶどう園 LP（Figma 1:17 / 1440×6887 ピクセル基準） ===== */

:root {
  --purple: #9C2D66;
  --green: #8FC31F;
  --cream: #FFFEEE;
  --black: #000;
  --gray-text: #333;
  --font-zen: 'Zen Maru Gothic', sans-serif;
  --font-rounded: 'M PLUS Rounded 1c', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: #fff;
  font-family: var(--font-zen);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* overflow: clip — hiddenだとスクロールコンテナ扱いになり、ハッシュ直アクセス時の
   ネイティブジャンプが window と wrap に分割スクロールして内部状態が壊れるため */
#scale-wrap { width: 100%; overflow: hidden; overflow: clip; }

img { display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.page {
  position: relative;
  width: 1440px;
  height: 6887px;
  margin: 0;
  overflow: hidden;
  transform-origin: 0 0;
}

/* ハンバーガー（モバイル専用・PCでは非表示） */
.nav-toggle { display: none; }

/* ===== 背景レイヤー ===== */
.bg-hero { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; overflow: hidden; }
.bg-hero img { width: 100%; height: 100%; object-fit: cover; position: relative; top: 0; }
.bg-about  { position: absolute; left: 0; top: 882px;  width: 1440px; height: 1722px; background: var(--purple); }
.bg-cream  { position: absolute; left: 0; top: 2604px; width: 1440px; height: 2661px; background: var(--cream); }
.bg-green  { position: absolute; left: 0; top: 5265px; width: 1440px; height: 1214px; background: var(--green); border-radius: 60px 60px 0 0; }
.bg-footer { position: absolute; left: 0; top: 6479px; width: 1440px; height: 408px;  background: var(--purple); }

.deco { position: absolute; pointer-events: none; }
.anchor { position: absolute; left: 0; width: 1px; height: 1px; }
.cloud-top    { left: 0; top: 706px; }
.cloud-bottom { left: 0; top: 2373px; }
.cloud-white  { left: 0; top: 0; }

/* ===== ヘッダー ===== */
.header { position: absolute; left: 0; top: 0; width: 1440px; z-index: 30; }
.logo { position: absolute; left: 18px; top: 28px; }
.gnav {
  position: absolute; left: auto; right: 0; top: 30px;
  width: auto; height: 68px; /* 問い合わせボタン撤去後はリンク量に追従（空き解消） */
  background: #fff;
  border: 2px solid var(--green); border-right: none;
  border-radius: 34px 0 0 34px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 12px 32px 12px 42px;
}
.gnav-logo { display: none; } /* PCでは非表示。スマホのドロワーメニュー上部にのみ表示 */
.gnav-links { display: flex; align-items: center; gap: 30px; }
.gnav-links a { font-size: 14px; font-weight: 700; color: var(--black); line-height: 1; white-space: nowrap; }
/* 問い合わせボタン関連の旧CSSは削除済み（2026-06-12にボタン全撤去・2026-06-30クリーンアップ） */

/* ===== ヒーロー ===== */
.hero { position: absolute; left: 0; top: 0; width: 1440px; height: 1100px; z-index: 10; pointer-events: none; }
.hero .btn, .hero .hero-period, .hero .hero-vertical { pointer-events: auto; }
.hero-title { position: absolute; left: 120px; top: 148px; }
.hero-period {
  position: absolute; left: 120px; top: 508.5px;
  width: 415px; height: 49.5px;
  background: #fff; border-radius: 5px;
  display: flex; align-items: center;
  padding: 0 32px;
  font-family: var(--font-rounded); font-weight: 700;
  font-size: 16px; color: var(--gray-text);
  white-space: nowrap;
}
.hero-period-label { letter-spacing: 0.05em; }
.hero-period-divider { flex-shrink: 0; width: 1px; height: 18px; background: var(--gray-text); margin: 0 16px; }

.btn {
  position: absolute;
  width: 195px; height: 56px;
  border: 2px solid #fff; border-radius: 28px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  color: #fff; font-size: 16px; font-weight: 700; line-height: 1;
}
.btn-access  { left: 120px; top: 591px; background: var(--purple); }

.hero-vertical { position: absolute; left: 1186px; top: 170px; width: 120px; }
.vcard {
  position: absolute; top: 0;
  writing-mode: vertical-rl;
  background: #fff;
  border: 2px solid var(--purple); border-radius: 5px;
  color: var(--purple);
  font-family: var(--font-rounded); font-weight: 700; font-size: 32px;
  line-height: 1;
  width: 52px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
}
.vcard-left  { left: 0; height: 370px; }
.vcard-right { left: 68px; height: 300px; }

.deco-grape-hero { left: 0; top: 624px; }
.deco-vine-hero  { left: 1214px; top: 668px; }

/* ===== セクション見出しコンポーネント ===== */
.sec-head { position: absolute; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.sec-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--green); line-height: 1;
}
.sec-eyebrow-cream { color: var(--cream); }
.dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.dot-green { background: var(--green); }
.dot-cream { background: var(--cream); }
.sec-title { font-size: 32px; font-weight: 700; color: #fff; line-height: 1; }
.sec-title-purple { color: var(--purple); }

/* ===== About ===== */
.about { position: absolute; left: 0; top: 0; width: 1440px; z-index: 5; }
.circle-cream, .circle-photo { position: absolute; }
.circle-cream { width: 241px; height: 241px; border-radius: 50%; background: var(--cream); }
.circle-cream.is-green { background: var(--green); }
.about-intro { position: absolute; left: 120px; top: 1028px; width: 568px; }
.about-intro .sec-head { position: static; margin-bottom: 64px; }
.about-body { font-size: 16px; font-weight: 500; color: #fff; line-height: 2; }

.deco-grape-about-left  { left: 38px; top: 1580px; }
.deco-vine-about        { left: 1132px; top: 1612px; }
.deco-vine-about2       { left: 17px; top: 2370px; }
.deco-grape-about-small { left: 1310px; top: 2520px; }

.recommend-badge {
  position: absolute; left: 564px; top: 1725px;
  width: 312px; height: 72px;
  background: var(--cream);
  border: 2px solid var(--green); border-radius: 40px;
  color: var(--green); font-size: 24px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  z-index: 7;
}
.recommend-box {
  position: absolute; left: 121px; top: 1761px;
  width: 1198px; height: 723px;
  background: var(--green);
  border: 2px solid var(--cream); border-radius: 60px;
  padding: 62px;
  display: flex; gap: 40px;
  z-index: 6;
}
.recommend-col { width: 330px; display: flex; flex-direction: column; align-items: center; }
.num-badge {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--purple); color: #fff;
  font-size: 24px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.recommend-title {
  height: 72px; margin-top: 24px;
  display: flex; align-items: flex-start; justify-content: center;
  text-align: center;
  font-size: 24px; font-weight: 700; color: var(--purple); line-height: 1.5;
  position: relative;
}
.recommend-col:nth-child(1) .recommend-title { top: 2px; }
.recommend-col:nth-child(2) .recommend-title { top: -10px; }
.recommend-col:nth-child(3) .recommend-title { top: 7px; }
.recommend-photo {
  width: 330px; aspect-ratio: 600 / 400;
  object-fit: cover; border-radius: 30px;
  margin-top: 8px;
}
.recommend-col:nth-child(2) .recommend-photo,
.recommend-col:nth-child(3) .recommend-photo { margin-top: 13px; }
.recommend-text {
  margin-top: 24px; width: 100%;
  font-size: 16px; font-weight: 500; color: var(--cream); line-height: 2;
}

/* ===== 遊び方 ===== */
.howto { position: absolute; left: 0; top: 0; width: 1440px; z-index: 5; }
.howto-head { left: 121px; top: 2805px; }
.deco-grape-howto-right { left: 1180px; top: 2823px; z-index: 1; }
.deco-grape-howto-left  { left: 0; top: 3378px; }
.step-card {
  position: absolute; top: 2981px;
  width: 373px; height: 314px;
  background: #fff;
  border: 2px solid var(--purple); border-radius: 60px;
  padding: 58px 38px 38px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  z-index: 2;
}
.step-icon { height: 118px; }
.step-text {
  height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  font-size: 24px; font-weight: 700; color: var(--black); line-height: 1.5;
}
.step-badge {
  position: absolute; top: 2951px;
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--purple); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700; line-height: 1;
  z-index: 3;
}
.step-badge-label { font-size: 12px; }
.step-badge-num { font-size: 36px; }
.step-arrow { position: absolute; top: 3138px; width: 42px; height: 2px; background: var(--purple); }
/* PC配置（旧インラインstyleのleftをクラス化。iOS Safariは[style*=]照合が
   CSSOM正規化後の文字列になるため属性セレクタは使わない） */
.step-c1 { left: 120px; }
.step-c2 { left: 533px; }
.step-c3 { left: 947px; }
.step-b1 { left: 278px; }
.step-b2 { left: 685px; }
.step-b3 { left: 1105px; }
.step-a1 { left: 492px; }
.step-a2 { left: 906px; }

/* ===== 景品 ===== */
.prize { position: absolute; left: 0; top: 0; width: 1440px; z-index: 5; }
.prize-box {
  position: absolute; left: 119px; top: 3357px;
  width: 1203px; height: 382px;
  background: #fff;
  border: 2px solid var(--purple); border-radius: 60px;
  overflow: hidden;
  display: flex;
}
.prize-photo { width: 567px; height: 100%; object-fit: cover; flex-shrink: 0; }
.prize-body {
  width: 567px; margin-left: 65px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 24px;
  transform: translateY(-1px);
}
.prize-label {
  background: var(--purple); border-radius: 5px;
  padding: 8px 32px;
  color: #fff; font-size: 24px; font-weight: 700; line-height: 1.5;
}
.prize-text { font-size: 16px; font-weight: 500; color: var(--black); line-height: 1.8; }
.deco-grape-prize { left: 1303px; top: 3755px; }

/* ===== 費用 / FAQ ===== */
.cost-faq { position: absolute; left: 0; top: 0; width: 1440px; z-index: 5; }
.cost-head { left: 121px; top: 3857px; }
.faq-head  { left: 752px; top: 3857px; }
.cost-desc {
  position: absolute; left: 120px; top: 3979px; width: 568px;
  font-size: 16px; font-weight: 500; color: var(--black); line-height: 2;
}
.cost-table { position: absolute; left: 120px; top: 4146px; width: 568px; }
.cost-row {
  display: flex; align-items: center;
  padding: 32px 0 31px;
  border-top: 1px solid var(--purple);
  font-size: 16px; line-height: 1;
}
.cost-table .cost-row:last-child { border-bottom: 1px solid var(--purple); }
.cost-label { width: 146px; margin-right: 32px; color: var(--purple); font-weight: 500; line-height: 1.4; }
.cost-price { color: var(--black); font-weight: 500; line-height: 1.8; }

.faq-list {
  position: absolute; left: 752px; top: 3979px; width: 568px;
  display: flex; flex-direction: column; gap: 24px;
}
.faq-item {
  border: 1px solid var(--purple); border-radius: 5px;
  padding: 15px 16px;
  display: flex; align-items: center; flex-wrap: wrap;
  cursor: pointer;
}
.faq-q { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; }
.faq-q-mark { font-size: 24px; color: var(--purple); line-height: 1; flex-shrink: 0; }
.faq-q-text { font-size: 16px; color: var(--black); line-height: 1.5; }
.icon-faq { flex-shrink: 0; transition: transform 0.3s ease; }
/* アコーディオン（クリックで回答を開閉。PC・モバイル共通） */
.faq-a {
  display: block; width: 100%;
  max-height: 0; overflow: hidden;
  margin-top: 0;
  transition: max-height 0.4s ease, margin-top 0.4s ease;
}
.faq-item.open .faq-a { max-height: 400px; margin-top: 12px; }
.faq-item.open .icon-faq { transform: rotate(180deg); }
.faq-a p {
  font-size: 16px; line-height: 1.8; color: var(--black);
  background: rgba(156, 45, 102, 0.06);
  border-radius: 8px;
  padding: 12px 16px;
}

/* ===== アクセス ===== */
.access { position: absolute; left: 0; top: 0; width: 1440px; z-index: 5; }
.access-head { left: 121px; top: 4427px; }
.access-map {
  position: absolute; left: 120px; top: 4573px;
  width: 568px; height: 378px;
  background: #d9d9d9; border-radius: 40px;
  overflow: hidden; /* iframeを角丸でクリップ */
}
.access-map iframe {
  display: block;
  width: 100%; height: 100%;
  border: 0;
}
.access-photo {
  position: absolute; top: 4959px;
  width: 280px; height: 186px;
  object-fit: cover; border-radius: 40px;
}
.info-table { position: absolute; left: 752px; top: 4572px; width: 568px; }
.info-row {
  display: flex; align-items: center; gap: 40px;
  padding: 23.5px 0;
  border-top: 1px solid var(--green);
  font-size: 16px; font-weight: 400; line-height: 1.5;
}
.info-table .info-row:last-child { border-bottom: 1px solid var(--green); }
.info-row dt { width: 80px; color: var(--green); flex-shrink: 0; }
.info-row dd { color: var(--gray-text); }
.deco-grape-access-left  { left: 0; top: 4270px; }
.deco-grape-access-right { left: 1189px; top: 4396px; }

/* ===== 和銅ぶどう園について ===== */
.aboutus { position: absolute; left: 0; top: 0; width: 1440px; z-index: 5; }
.aboutus-head { left: 121px; top: 5385px; }
.band {
  position: absolute; left: 120px; width: 1200px; height: 24px;
  display: flex; align-items: center; gap: 8px;
}
.band-title { font-size: 24px; font-weight: 700; color: var(--black); line-height: 1; white-space: nowrap; }
.band-line {
  flex: 1; height: 5px;
  align-self: flex-start; margin-top: 7px;
  background-image: radial-gradient(circle at 2.5px 2.5px, var(--purple) 2.45px, rgba(156,45,102,0) 2.55px);
  background-size: 12px 5px;
  background-repeat: repeat-x;
  background-position: left top;
}
.grid4 { position: absolute; left: 120px; width: 1198px; display: flex; gap: 26px; align-items: flex-start; }
.grid4-col { width: 280px; }
.grid4-photo { width: 280px; aspect-ratio: 600 / 400; object-fit: cover; }
.grid4-name { margin-top: 24px; font-size: 18px; font-weight: 700; color: var(--black); line-height: 1; }
.grid4-name-s { font-size: 16px; }
.grid4-meta { margin-top: 16px; font-size: 14px; font-weight: 500; color: #333; line-height: 1.5; } /* 緑地でのコントラスト確保（#666→#333でAA合格・約6:1） */
.btn-more {
  position: absolute; left: 616px; top: 6303px;
  width: 208px; height: 56px;
  background: var(--green);
  border: 2px solid #fff; border-radius: 50px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; font-size: 16px; font-weight: 700; line-height: 1;
}
.icon-rot-right { transform: rotate(-90deg); }

/* ===== フッター ===== */
.footer { position: absolute; left: 0; top: 6479px; width: 1440px; height: 408px; z-index: 5; }
.footer-box {
  position: absolute; left: 60px; top: 60px;
  width: 1320px; height: 288px;
  background: var(--cream); border-radius: 60px;
}
.footer-logo { position: absolute; left: 60px; top: 60px; }
.fnav {
  position: absolute; left: 430px; top: 68px;
  width: 830px; height: 44px;
  display: flex; align-items: center; justify-content: flex-end;
}
.fnav-links { display: flex; align-items: center; gap: 30px; }
.fnav-links a { font-size: 14px; font-weight: 700; color: var(--black); line-height: 1; white-space: nowrap; }
.footer-address {
  position: absolute; left: 60px; top: 180px;
  font-size: 16px; font-weight: 500; color: var(--black); line-height: 1.5;
}
.footer-copy {
  position: absolute; left: 1160px; top: 207px;
  font-size: 14px; font-weight: 500; color: var(--black); line-height: 1;
}

/* ===== ページトップボタン ===== */
.page-up {
  position: fixed; right: 28px; bottom: 40px;
  width: 40px; height: 40px;
  border: none; background: none; padding: 0;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
  z-index: 100;
}
.page-up.is-visible { opacity: 1; visibility: visible; }

/* ============================================================
   Phase 2-A: アニメーション
   ============================================================ */

/* --- スクロール出現（クラスはJSが付与。JS無効/reduce時は常時表示） --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
}
.fade-in { opacity: 0; }
.fade-in.is-shown {
  opacity: 1;
  animation: fadeUp 0.6s ease-out var(--fi-delay, 0s) backwards;
}

/* --- ヒーロー登場（ロード時1回。intro-goはJSが付与） --- */
@keyframes popIn {
  from { opacity: 0; transform: scale(0.92); }
}
.intro-go .hero-title    { animation: popIn 0.6s cubic-bezier(0.34, 1.3, 0.64, 1) 0.05s backwards; }
.intro-go .hero-period   { animation: fadeUp 0.6s ease-out 0.2s backwards; }
.intro-go .btn-access    { animation: fadeUp 0.6s ease-out 0.35s backwards; }
.intro-go .vcard-right   { animation: fadeUp 0.6s ease-out 0.52s backwards; }
.intro-go .vcard-left    { animation: fadeUp 0.6s ease-out 0.62s backwards; }

/* --- 装飾の浮遊（ぶどう=上下浮遊 / 蔓=微小な揺れ） --- */
@keyframes floaty {
  50% { transform: translateY(-7px); }
}
@keyframes sway {
  50% { transform: rotate(2deg); }
}
.deco-grape-hero         { animation: floaty 5.2s ease-in-out -1.0s infinite; }
.deco-grape-about-left   { animation: floaty 4.6s ease-in-out -2.2s infinite; }
.deco-grape-about-small  { animation: floaty 4.2s ease-in-out -0.6s infinite; }
.deco-grape-howto-right  { animation: floaty 5.6s ease-in-out -3.1s infinite; }
.deco-grape-howto-left   { animation: floaty 4.8s ease-in-out -1.7s infinite; }
.deco-grape-prize        { animation: floaty 5.0s ease-in-out -2.7s infinite; }
.deco-grape-access-left  { animation: floaty 5.4s ease-in-out -0.3s infinite; }
.deco-grape-access-right { animation: floaty 4.4s ease-in-out -3.6s infinite; }
.deco-vine-hero   { transform-origin: top center; animation: sway 6.0s ease-in-out -1.5s infinite; }
.deco-vine-about  { transform-origin: top center; animation: sway 6.6s ease-in-out -3.0s infinite; }
.deco-vine-about2 { transform-origin: top center; animation: sway 6.2s ease-in-out -0.8s infinite; }

/* --- ホバー（PCのみ） --- */
@media (hover: hover) and (min-width: 768px) {
  .btn, .btn-more {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .btn:hover, .btn-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  }
  .gnav-links a, .fnav-links a { position: relative; transition: color 0.25s ease; }
  .gnav-links a::after, .fnav-links a::after {
    content: "";
    position: absolute; left: 0; bottom: -6px;
    width: 100%; height: 2px;
    background: var(--green);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.25s ease;
  }
  .gnav-links a:hover, .fnav-links a:hover { color: var(--green); }
  .gnav-links a:hover::after, .fnav-links a:hover::after { transform: scaleX(1); }

  .step-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .step-card:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(156, 45, 102, 0.18); }
  .recommend-col, .grid4-col { transition: transform 0.25s ease; }
  .recommend-col:hover, .grid4-col:hover { transform: translateY(-4px); }
  .recommend-photo, .grid4-photo, .circle-photo { transition: transform 0.3s ease; }
  .recommend-col:hover .recommend-photo,
  .grid4-col:hover .grid4-photo { transform: scale(1.03); }
  .circle-photo:hover { transform: scale(1.03); }

  .faq-item { transition: background-color 0.25s ease; }
  .faq-item:hover { background-color: rgba(156, 45, 102, 0.06); }

  @keyframes pageupBounce {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-7px); }
    70%  { transform: translateY(2px); }
    100% { transform: translateY(0); }
  }
  .page-up:hover img { animation: pageupBounce 0.45s ease; }
}

/* --- prefers-reduced-motion: 全アニメーション停止 --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .fade-in { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Phase 2-B: スマホレイアウト（768px未満は1カラムのフロー配置）
   ============================================================ */
@media (max-width: 767px) {

  /* --- ページ骨格: flexカラム化し、雲をセクション境界に挟む --- */
  .page {
    width: 100%;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }
  .anchor,
  .bg-hero, .bg-about, .bg-cream, .bg-green, .bg-footer { display: none; }
  .deco { display: none; }
  .cloud-top, .cloud-bottom { display: block; }
  .deco-grape-hero { display: block; }

  .hero         { order: 1; }
  .cloud-top    { order: 2; }
  .about        { order: 3; }
  .cloud-bottom { order: 4; }
  .howto        { order: 5; }
  .prize        { order: 6; }
  .cost-faq     { order: 7; }
  .access       { order: 8; }
  .aboutus      { order: 9; }
  .footer       { order: 10; }

  /* 雲の波: 全幅・前後セクションへオーバーラップ */
  .cloud-top, .cloud-bottom {
    position: relative;
    left: auto; top: auto;
    width: 100%; height: auto;
    z-index: 3;
    animation: none;
  }
  .cloud-top    { margin-top: -12vw; margin-bottom: -14vw; }
  .cloud-bottom { margin-top: -10vw; margin-bottom: -15vw; }

  /* セクション共通 */
  .hero, .about, .howto, .prize, .cost-faq, .access, .aboutus, .footer {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    z-index: 1;
    scroll-margin-top: 12px;
  }
  .sec-head { position: static; gap: 16px; }
  .sec-title { font-size: 22px; line-height: 1.45; }

  /* --- ヘッダー: ロゴ + ハンバーガー → 全画面ドロワー --- */
  .header { position: absolute; left: 0; top: 0; width: 100%; height: 64px; z-index: 40; }
  .logo { position: absolute; left: 16px; top: 12px; }
  .logo img { width: auto; height: 40px; }
  /* ロゴの白い雲形下地（PC版の意匠を踏襲） */
  .cloud-white {
    display: block;
    position: absolute;
    left: -44px; top: -52px;
    width: 320px; height: auto; /* 一回り大きく（ロゴ下の白い隅を拡大） */
    margin: 0;
    z-index: 4;
    animation: none;
  }
  /* ドロワーメニュー上部のロゴ（クリックでファーストビューへ） */
  /* ロゴはリンク群と一緒に縦中央寄せのグループにし、リンクとの間に余白を取る
     （絶対配置だと画面高でリンクと重なるため。これで端末の高さに応じて自然な位置に来る） */
  .gnav-logo {
    display: block;
    position: static;
    margin: 0 0 44px;
    padding: 4px;
    z-index: 51;
  }
  .gnav-logo img { width: auto; height: 46px; display: block; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: fixed; right: 12px; top: 10px;
    width: 44px; height: 44px;
    background: #fff;
    border: 2px solid var(--green);
    border-radius: 50%;
    cursor: pointer;
    z-index: 60;
    transition: transform 0.2s ease;
  }
  .nav-toggle span {
    display: block;
    width: 18px; height: 2px;
    background: var(--purple);
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .gnav {
    position: fixed; left: 0; top: 0; right: 0; bottom: 0;
    width: auto; height: auto;
    background: var(--cream);
    border: none; border-radius: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 50;
  }
  body.menu-open .gnav { opacity: 1; visibility: visible; }
  body.menu-open { overflow: hidden; } /* ドロワー開時は背面スクロールをロック */
  html:has(body.menu-open) { overflow: hidden; } /* スクロールボックスはhtml側のためこちらも必要 */
  html.menu-open-html { overflow: hidden; } /* :has()非対応の旧iOS向け（JSが同期） */
  .gnav-links { flex-direction: column; align-items: center; gap: 4px; margin: 0 0 28px; }
  .gnav-links a {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 16px;
    font-size: 16px; color: var(--purple);
  }

  /* --- ヒーロー --- */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto auto; /* タイトル / 伸縮スペース / 開催期間 / ボタン */
    gap: 0 12px;
    min-height: 80vh;
    padding: 104px 20px calc(26vw + 8px);
    /* スマホは縦構図の専用画像（子どもが見切れないようFigmaスマホ版に合わせた縦トリミング）。
       background-position を上げ気味にして、子どもの顔がタイトル/バッジと重ならない帯に逃がす */
    background: url('../assets/images/hero_bg_sp.jpg') center 32% / cover no-repeat;
  }
  .hero-title {
    grid-row: 1;
    grid-column: 1 / -1;
    position: static;
    width: calc(100% - 80px);
    max-width: 420px;
    height: auto;
  }
  .hero-period {
    grid-row: 3;
    grid-column: 1 / -1;
    position: static;
    justify-self: start;
    width: auto; max-width: 100%;
    height: 44px;
    margin-bottom: 14px;
    padding: 0 14px;
    font-size: 14px;
  }
  .btn-access  { grid-row: 4; grid-column: 1; } /* 画面幅の約半分 */
  .hero-period-divider { margin: 0 10px; }
  .btn {
    position: static;
    width: 100%;
    height: 50px;
    font-size: 14px;
    padding: 0 16px;
  }
  /* 縦書きはWebKitの直交フロー処理が機種依存ではみ出すため、
     スマホでは横書きバッジとしてタイトル下に並べる（2026-06-12 AZAMIさん合意） */
  .hero-vertical {
    position: static;
    grid-row: 2; grid-column: 1 / -1;
    align-self: start; justify-self: start;
    width: auto;
    margin-top: 12px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  }
  .vcard {
    position: static;
    writing-mode: horizontal-tb;
    width: auto; height: auto;
    padding: 9px 14px;
    font-size: 17px;
    white-space: nowrap;
    border-radius: 5px;
  }
  .vcard-right { order: -1; } /* 読み順: 「ぶどう狩りをして」→「景品をゲットしよう！」 */
  .deco-grape-hero {
    left: -8px; top: auto; bottom: 16vw;
    width: 96px; height: auto;
    z-index: -1; /* ヒーロー背景の上・他の全要素（文字/ボタン）の下に固定 */
  }

  /* --- About --- */
  .about {
    background: var(--purple);
    padding: calc(14vw + 36px) 20px 52px;
    display: flex;
    flex-direction: column;
  }
  .about-intro { order: 1; position: static; width: 100%; }
  .about-intro .sec-head { margin-bottom: 32px; }
  .about-body { font-size: 16px; }
  .about-circles {
    order: 2;
    position: relative;
    width: 100%;
    margin: 36px 0 0;
    transform-origin: 0 0;
  }
  .recommend-badge {
    order: 3;
    position: relative; left: auto; top: auto;
    width: auto; max-width: 300px; height: 56px;
    margin: 44px auto -28px;
    padding: 0 28px;
    font-size: 18px;
    z-index: 7; /* recommend-box(z6)より前面に */
  }
  .recommend-box {
    order: 4;
    position: static;
    width: 100%; height: auto;
    border-radius: 30px;
    padding: 48px 24px 36px;
    flex-direction: column;
    gap: 40px;
  }
  .recommend-col { width: 100%; }
  .about .recommend-col .recommend-title {
    position: static;
    height: auto;
    margin-top: 16px;
    font-size: 20px;
  }
  .about .recommend-col .recommend-photo { width: 100%; margin-top: 16px; border-radius: 20px; }
  .recommend-text { margin-top: 16px; font-size: 16px; line-height: 1.9; }

  /* --- 遊び方 --- */
  .howto {
    background: var(--cream);
    padding: calc(15vw + 20px) 20px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .howto-head { order: 1; align-self: flex-start; }
  .step-b1 { order: 2; }
  .step-c1 { order: 3; }
  .step-a1 { order: 4; }
  .step-b2 { order: 5; }
  .step-c2 { order: 6; }
  .step-a2 { order: 7; }
  .step-b3 { order: 8; }
  .step-c3 { order: 9; }
  .step-b1, .step-b2, .step-b3,
  .step-c1, .step-c2, .step-c3,
  .step-a1, .step-a2 { left: auto; }
  .step-card {
    position: static;
    width: 100%; max-width: 400px; height: auto;
    border-radius: 30px;
    padding: 46px 24px 30px;
    gap: 16px;
  }
  .step-text { height: auto; font-size: 20px; }
  .step-badge {
    /* インラインstyleのleftを無効化するためstatic（z-indexはflexアイテムなので有効） */
    position: static;
    margin: 28px 0 -35px;
    z-index: 3;
  }
  .step-b1 { margin-top: 8px; }
  .step-arrow {
    position: static;
    width: 2px; height: 36px;
    margin: 20px 0 0;
  }

  /* --- 景品 --- */
  .prize {
    background: var(--cream);
    padding: 20px 20px 44px;
  }
  .prize-box {
    position: static;
    width: 100%; height: auto;
    border-radius: 30px;
    flex-direction: column;
  }
  /* 角丸は写真自体に持たせる（親の overflow クリップはChromium/iOSとも左上が効かない描画バグがあるため頼らない）。
     値はカード枠の内側の丸み = box の border-radius 30px − border 2px = 28px にピッタリ合わせる。
     これで枠の内側に写真の丸みがちょうど収まり、白い滲みも左右の不揃いも出ない。下＝四角（本文と接する） */
  .prize-box { overflow: visible; }
  .prize-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 28px 28px 0 0; }
  .prize-body {
    width: auto;
    margin: 0;
    padding: 24px 20px 28px;
    gap: 16px;
    transform: none;
  }
  .prize-label { font-size: 18px; padding: 6px 16px; line-height: 1.4; }
  .prize-text { font-size: 16px; }

  /* --- 費用 / FAQ --- */
  .cost-faq {
    background: var(--cream);
    padding: 8px 20px 48px;
  }
  .cost-head, .faq-head { position: static; }
  .faq-head { margin-top: 52px; }
  .cost-desc { position: static; width: 100%; margin-top: 24px; font-size: 16px; }
  .cost-table { position: static; width: 100%; margin-top: 24px; }
  .cost-row { padding: 20px 0; font-size: 16px; }
  .cost-label { width: 140px; margin-right: 16px; }
  .faq-list { position: static; width: 100%; margin-top: 24px; gap: 16px; }
  /* アコーディオンの仕組みはベースCSSと共通。モバイルは余白・文字サイズのみ上書き */
  .faq-item { padding: 14px 14px; gap: 10px; }
  .faq-q-text { font-size: 16px; }
  .faq-item.open .faq-a { margin-top: 10px; }
  .faq-a p { font-size: 16px; padding: 12px 14px; }

  /* --- アクセス --- */
  .access {
    background: var(--cream);
    padding: 8px 20px 52px;
    display: flex;
    flex-wrap: wrap;
  }
  .access-head { width: 100%; }
  .access-map {
    position: static;
    width: 100%; height: 230px;
    border-radius: 20px;
    margin-top: 28px;
  }
  .access-photo {
    position: static;
    width: calc(50% - 6px);
    height: auto;
    aspect-ratio: 280 / 186;
    border-radius: 20px;
    margin-top: 12px;
  }
  .access-photo[style*="left:120"] { margin-right: 12px; }
  .info-table { position: static; width: 100%; margin-top: 28px; }
  .info-row { gap: 16px; padding: 16px 0; font-size: 16px; }
  .info-row dt { width: 72px; }

  /* --- 和銅ぶどう園について --- */
  .aboutus {
    background: var(--green);
    border-radius: 30px 30px 0 0;
    padding: 52px 20px 52px;
  }
  .aboutus-head { position: static; }
  .band { position: static; width: 100%; margin: 40px 0 0; }
  .band-title { font-size: 20px; }
  .grid4 {
    position: static;
    width: 100%;
    margin-top: 24px;
    flex-wrap: wrap;
    gap: 24px 12px;
  }
  .grid4-col { width: calc(50% - 6px); }
  .grid4-photo { width: 100%; }
  .grid4-name { margin-top: 12px; font-size: 16px; line-height: 1.4; }
  .grid4-name-s { font-size: 14px; }
  .grid4-meta { margin-top: 8px; font-size: 14px; }
  .btn-more { position: static; margin: 44px auto 0; }

  /* --- フッター --- */
  .footer {
    background: var(--purple);
    padding: 28px 16px 32px;
  }
  .footer-box {
    position: static;
    width: 100%; height: auto;
    border-radius: 30px;
    padding: 32px 24px;
  }
  .footer-logo { position: static; }
  .footer-logo img { width: 220px; height: auto; }
  .fnav {
    position: static;
    width: 100%; height: auto;
    margin-top: 24px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .fnav-links { flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; }
  .fnav-links a { display: flex; align-items: center; min-height: 44px; font-size: 14px; }
  .footer-address { position: static; margin-top: 24px; font-size: 14px; }
  .footer-copy { position: static; margin-top: 20px; font-size: 12px; }

  /* --- ページトップ --- */
  .page-up { right: 16px; bottom: 20px; }
}