/* =========================================================
   こたにん農園 公式サイト スタイル
   配色：深紫（ナス）× 白 × 自然な緑
   ========================================================= */
:root{
  --c-purple: #5B3A6E;
  --c-purple-deep: #46295A;
  --c-green: #6E9955;
  --c-green-deep: #4F7A3D;
  --c-cream: #FAF7F3;
  --c-white: #FFFFFF;
  --c-ink: #3B3242;
  --c-ink-soft: #776980;
  --c-line: #E8E0EE;
  --c-gold: #B8963E;
  /* 写真に重ねる言葉だけに使う明朝体（端末に入っている書体を使うので通信量ゼロ） */
  --font-mincho: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP", serif;
  --font-round: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  --font-base: 'Noto Sans JP', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:70px; }
body{
  margin:0; font-family:var(--font-base); color:var(--c-ink);
  background:var(--c-white); line-height:1.9; font-size:15.5px;
  padding-bottom:calc(58px + env(safe-area-inset-bottom));
}
img{ max-width:100%; display:block; }
a{ color:var(--c-purple); }
[hidden]{ display:none !important; }

.container{ max-width:1080px; margin:0 auto; padding:0 20px; }
.container.narrow{ max-width:760px; }
.section{ padding:64px 0; }
.center{ text-align:center; }
.note{ font-size:12.5px; color:var(--c-ink-soft); }

.sec-title{
  font-family:var(--font-round); font-weight:900; font-size:clamp(22px,4vw,30px);
  text-align:center; margin:0 0 14px; color:var(--c-purple-deep);
}
.sec-title::after{
  content:""; display:block; width:48px; height:4px; border-radius:2px;
  background:var(--c-green); margin:14px auto 0;
}
.sec-title.left{ text-align:left; }
.sec-title.left::after{ margin-left:0; }
.sec-text{ margin:0 0 14px; }

/* ---------- ボタン ---------- */
.btn{
  display:inline-block; padding:14px 28px; border-radius:999px;
  font-family:var(--font-round); font-weight:700; font-size:15px;
  text-decoration:none; text-align:center; transition:transform .15s, opacity .15s;
}
.btn:hover{ transform:translateY(-2px); opacity:.92; }
.btn-purple{ background:var(--c-purple); color:#fff; }
.btn-insta{ background:#fff; color:var(--c-purple); border:2px solid var(--c-purple); }
/* 濃色背景（Web制作セクション）用の白枠ボタン */
.btn-ghost-light{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.7); }
.btn-ghost-light:hover{ border-color:#fff; }
.web-cta{ margin:22px 0 0; }
.btn.wide{ min-width:260px; }
/* アイコンの位置合わせ */
.h3-icon, .btn-icon{ vertical-align:-3px; display:inline-block; }

/* キーボード操作時のフォーカス枠（ナス紫） */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid #8A5FA8; outline-offset:2px;
}

/* 文字選択の色 */
::selection{ background:#E4D5EF; color:var(--c-ink); }

/* ---------- 最上部の告知バー ---------- */
.topbar{ background:var(--c-purple-deep); }
.topbar-link{
  display:block; padding:9px 16px; text-align:center; text-decoration:none;
  color:#F1E6F8; font-family:var(--font-round); font-weight:700; font-size:12.5px;
  letter-spacing:.02em;
}
.topbar-link:hover{ color:#fff; background:rgba(255,255,255,.08); }

/* ---------- パソコン用 ご購入タブ（右端に追従） ---------- */
.pc-buy-tab{ display:none; }
@media (min-width:861px){
  .pc-buy-tab{
    display:block; position:fixed; right:0; top:50%; transform:translateY(-50%);
    z-index:120; padding:18px 10px; border-radius:10px 0 0 10px;
    background:var(--c-purple); color:#fff; text-decoration:none;
    font-family:var(--font-round); font-weight:700; font-size:13px;
    writing-mode:vertical-rl; letter-spacing:.12em;
    box-shadow:0 3px 12px rgba(74,35,90,.28); transition:background .15s, padding-right .15s;
  }
  .pc-buy-tab:hover{ background:var(--c-purple-deep); padding-right:14px; }
}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--c-line); backdrop-filter:blur(6px);
}
/* 日本語 ⇄ English 切り替えボタン */
.lang-btn{
  margin-left:auto; margin-right:10px; cursor:pointer;
  padding:5px 13px; border-radius:999px;
  border:1.5px solid var(--c-purple); background:#fff; color:var(--c-purple);
  font-family:var(--font-round); font-weight:700; font-size:12.5px; line-height:1.6;
  white-space:nowrap; transition:background .15s, color .15s;
}
.lang-btn:hover{ background:var(--c-purple); color:#fff; }
@media (min-width:861px){ .lang-btn{ margin-left:20px; margin-right:0; order:3; } }

.header-inner{
  max-width:1120px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  font-family:var(--font-round); font-weight:900; font-size:20px;
  color:var(--c-purple-deep); text-decoration:none; display:flex; align-items:center; gap:8px;
}
.brand-icon{ width:26px; height:26px; border-radius:50%; }
.global-nav{ display:flex; gap:22px; }
.global-nav a{
  font-size:14.5px; font-weight:500; color:var(--c-ink); text-decoration:none;
}
.global-nav a:hover{ color:var(--c-purple); }
.nav-toggle{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.nav-toggle span{
  display:block; width:24px; height:3px; border-radius:2px;
  background:var(--c-purple); margin:5px 0; transition:.2s;
}

/* ---------- 1. ファーストビュー ---------- */
.hero{ background:var(--c-cream); }
.hero-banner{ margin:0; }
.hero-banner img{ width:100%; display:block; }
.hero-banner.is-empty img{ display:none; }
.hero-banner.is-empty::before{
  content:"バナー画像（準備中）"; display:grid; place-items:center; min-height:180px;
  font-size:13px; color:#9C87AB;
  background:repeating-linear-gradient(45deg,#F2EAF7,#F2EAF7 12px,#FAF5FD 12px,#FAF5FD 24px);
}
.hero-body{ max-width:860px; margin:0 auto; padding:36px 20px 48px; text-align:center; }
.hero-title{
  margin:0 0 14px; font-family:var(--font-round); font-weight:900;
  font-size:clamp(22px,4vw,32px); line-height:1.5; color:var(--c-purple-deep);
}
.hero-lead{ margin:0 0 18px; font-size:15px; }
.season-badge{
  display:inline-block; margin:0 0 18px; padding:8px 18px;
  border-radius:999px; font-family:var(--font-round); font-weight:700; font-size:14px;
  background:var(--c-green); color:#fff;
}
.season-badge.off{ background:#8D8494; }
/* 販売前の帯：前向きな案内として緑系で見せる */
.season-badge.next{
  background:#EAF3E3; color:var(--c-green-deep);
  border:1px solid #CBDDBB;
}
.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; justify-content:center; }
.hero-notes{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.hero-notes li{
  font-size:12.5px; font-weight:500; color:var(--c-purple-deep);
  background:#fff; border:1px solid var(--c-line); border-radius:999px; padding:5px 14px;
}
.hero-notes .star{ color:#F5A623; }

/* ---------- 2. こだわり ---------- */
.sec-kodawari{ background:var(--c-white); }
.kodawari-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:30px; }
.kodawari-card{
  background:var(--c-cream); border-radius:16px; overflow:hidden;
  border:1px solid var(--c-line);
}
.kodawari-card figure{ margin:0; }
.kodawari-card figure img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.kodawari-card figure.is-empty img{ display:none; }
.kodawari-card figure.is-empty::before{
  content:"写真は後日掲載"; display:grid; place-items:center; aspect-ratio:16/9;
  font-size:12.5px; color:#9C87AB;
  background:repeating-linear-gradient(45deg,#F2EAF7,#F2EAF7 12px,#FFFFFF 12px,#FFFFFF 24px);
}
.kodawari-card figure.sq img{ aspect-ratio:1/1; }
.kodawari-card figure.tall img{ aspect-ratio:3/4; }
.kodawari-body{ padding:18px 22px 22px; }
/* 受賞カードの金メダル飾り */
.award-mark{
  display:inline-block; width:20px; height:20px; margin-right:7px;
  border-radius:50%; background:var(--c-gold); color:#fff;
  font-size:11px; line-height:20px; text-align:center; vertical-align:2px;
}
.kodawari-card h3{
  margin:0 0 8px; font-family:var(--font-round); font-weight:700;
  font-size:17px; color:var(--c-purple-deep);
}
.kodawari-card p{ margin:0; font-size:14px; }
@media (min-width:700px){ .kodawari-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 3. ワンタッチ収穫 ---------- */
.sec-onetouch{ background:var(--c-cream); }
.onetouch-grid{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
.onetouch-photo{ margin:0; border-radius:16px; overflow:hidden; }
.onetouch-photo img{ width:100%; height:auto; }
.onetouch-photo.is-empty img{ display:none; }
.onetouch-photo.is-empty::before{
  content:"ナスのアップ写真（準備中）"; display:grid; place-items:center; aspect-ratio:4/3;
  font-size:13px; color:#9C87AB;
  background:repeating-linear-gradient(45deg,#F2EAF7,#F2EAF7 12px,#FFFFFF 12px,#FFFFFF 24px);
}
.award-band{
  display:flex; gap:14px; align-items:center; margin-top:22px;
  background:#fff; border:2px solid var(--c-gold); border-radius:14px; padding:16px 18px;
}
.award-icon{ font-size:32px; }
.award-band p{ margin:0; font-size:14px; line-height:1.7; }
.award-band b{ color:var(--c-gold); }
@media (min-width:900px){ .onetouch-grid{ grid-template-columns:1.1fr 1fr; } }

/* ---------- 3.4 農園の風景（ドローン映像） ---------- */
.sec-movie{ background:var(--c-white); }
.movie-frame{
  position:relative; margin:26px auto 0; max-width:960px;
  border-radius:16px; overflow:hidden; background:#000;
  box-shadow:0 6px 20px rgba(74,35,90,.10);
}
.movie-video{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.movie-btn{
  position:absolute; right:12px; bottom:12px;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border:none; border-radius:999px; cursor:pointer;
  background:rgba(70,41,90,.78); color:#fff;
  font-family:var(--font-round); font-weight:700; font-size:12.5px;
}
.movie-btn:hover{ background:rgba(70,41,90,.92); }
/* 映像に重ねる言葉（時間に合わせて浮かび、消えます） */
.movie-caps{
  position:absolute; inset:0; pointer-events:none;
  display:grid; place-items:center; padding:24px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 78%);
}
.movie-cap{
  margin:0; grid-area:1/1; text-align:center;
  font-family:var(--font-mincho); font-size:clamp(22px,3.6vw,40px);
  color:#fff; letter-spacing:.1em; line-height:1.7;
  text-shadow:0 2px 18px rgba(0,0,0,.75), 0 0 40px rgba(0,0,0,.5);
  opacity:0; transform:translateY(10px);
  transition:opacity .9s ease, transform .9s ease;
}
.movie-cap.is-on{ opacity:1; transform:none; }
@media (max-width:640px){
  .movie-caps{ padding:14px; }
}
@media (prefers-reduced-motion: reduce){
  .movie-cap{ transition:none; transform:none; }
}
.movie-ico{ font-size:11px; letter-spacing:1px; }

/* ---------- 3.5 お客様の声 ---------- */
.sec-voice{ background:#F6F1FA; }
.voice-score{
  text-align:center; margin:0 0 24px; font-size:14.5px; color:var(--c-ink);
}
.voice-score .score-num{
  font-family:var(--font-round); font-size:26px; color:var(--c-purple-deep);
  margin:0 6px;
}
.voice-score .score-stars{ color:#F5A623; letter-spacing:2px; margin-right:4px; }
.voice-score .score-count{ color:var(--c-ink-soft); }
.voice-src{ font-size:12.5px; color:var(--c-purple); }
.voice-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
  max-width:860px; margin:0 auto 14px;
}
.voice-card{
  margin:0; background:#fff; border-radius:14px; padding:20px 20px 16px;
  box-shadow:0 4px 14px rgba(74,35,90,.07); position:relative;
}
.voice-card::before{
  content:"\201C"; position:absolute; top:6px; left:14px;
  font-family:Georgia,serif; font-size:40px; line-height:1;
  color:var(--c-purple); opacity:.25;
}
.voice-card blockquote{
  margin:0 0 10px; padding-left:8px; font-size:14px; line-height:1.8; color:var(--c-ink);
}
.voice-card figcaption{
  padding-left:8px; font-size:12px; color:var(--c-ink-soft);
}
@media (max-width:640px){
  .voice-grid{ grid-template-columns:1fr; }
}

/* ---------- 4. ご購入方法 ---------- */
.season-note{
  max-width:640px; margin:0 auto 10px; padding:14px 18px; border-radius:12px;
  background:#F4F1F7; color:var(--c-ink-soft); font-size:13.5px; text-align:center;
}
.buy-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin:28px 0; }
.buy-card{
  display:block; background:#fff; border:1px solid var(--c-line); border-radius:16px;
  padding:24px 22px; text-decoration:none; color:var(--c-ink); position:relative;
  transition:transform .15s, box-shadow .15s;
}
a.buy-card:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(91,58,110,.14); }
.buy-tag{
  display:inline-block; font-size:11.5px; font-weight:700; border-radius:999px;
  padding:3px 12px; margin-bottom:10px;
}
.buy-tag.anyone{ background:#EAF3E3; color:var(--c-green-deep); }
.buy-tag.member{ background:#F0E8F6; color:var(--c-purple); }
.buy-card h3{
  margin:0 0 8px; font-family:var(--font-round); font-weight:700;
  font-size:18px; color:var(--c-purple-deep);
}
.buy-card p{ margin:0 0 12px; font-size:13.5px; color:var(--c-ink-soft); }
.buy-link{ font-size:14px; font-weight:700; color:var(--c-purple); }
.buy-card.is-member{ background:var(--c-cream); }
/* 公式オンラインストア（BASE）カード */
.buy-card.is-official{ background:#fff; border:2px solid var(--c-purple); }
.buy-tag.official{ background:var(--c-purple); color:#fff; }
.season-note-inline{ font-size:12.5px; color:var(--c-ink-soft); margin:0 0 12px; }
/* 予約受付中の強調表示 */
.season-note-inline.reserve{
  display:inline-block; background:#EAF3E3; color:var(--c-green-deep);
  font-weight:700; border-radius:8px; padding:6px 12px;
}
.buy-links2{ display:flex; flex-direction:column; gap:6px; margin:0; }
.buy-links2 a{ font-size:14px; font-weight:700; color:var(--c-purple); text-decoration:none; }
.buy-links2 a:hover{ text-decoration:underline; }
@media (min-width:700px){ .buy-grid{ grid-template-columns:repeat(2,1fr); } }
.keep-box{
  background:var(--c-cream); border-radius:16px; padding:22px 24px; margin-top:8px;
}
.keep-box h3{
  margin:0 0 8px; font-family:var(--font-round); font-weight:700;
  font-size:16px; color:var(--c-purple-deep);
}
.keep-box p{ margin:0; font-size:14px; }

/* ---------- 5. おすすめの食べ方 ---------- */
.sec-recipe{ background:var(--c-cream); }
.recipe-grid{ display:grid; grid-template-columns:1fr; gap:26px; margin-top:28px; align-items:center; }
.recipe-photo{ margin:0; border-radius:16px; overflow:hidden; }
.recipe-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.recipe-photo.is-empty img{ display:none; }
.recipe-photo.is-empty::before{
  content:"料理写真（準備中）"; display:grid; place-items:center; aspect-ratio:4/3;
  font-size:13px; color:#9C87AB;
  background:repeating-linear-gradient(45deg,#F2EAF7,#F2EAF7 12px,#FFFFFF 12px,#FFFFFF 24px);
}
.recipe-list ul{ list-style:none; margin:0; padding:0; }
.recipe-list li{
  background:#fff; border:1px solid var(--c-line); border-radius:12px;
  padding:12px 16px; margin-bottom:10px; font-size:14px;
}
.recipe-list b{ color:var(--c-purple-deep); }
@media (min-width:820px){ .recipe-grid{ grid-template-columns:1fr 1.1fr; } }

/* ---------- 6. 農園について ---------- */
.about-grid{ display:grid; grid-template-columns:1fr; gap:30px; margin-top:26px; }
.about-text p{ margin:0 0 14px; }
.about-photos{ display:grid; gap:14px; align-content:start; }
.ph-slot{ position:relative; margin:0; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--c-line); }
.ph-slot img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
/* 説明文を写真の上に重ねる（芳蔵園さんの見せ方を参考にした表現） */
.ph-slot figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 14px 10px; text-align:left;
  font-family:var(--font-mincho); font-size:12.5px; line-height:1.6;
  letter-spacing:.04em; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,.22) 55%, rgba(0,0,0,0));
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.ph-slot.is-empty figcaption{ position:static; background:none; color:var(--c-ink-soft); text-shadow:none; padding:7px 6px; text-align:center; }
.ph-slot.is-empty img{ display:none; }
.ph-slot.is-empty::before{
  content:"写真は後日掲載"; display:grid; place-items:center; aspect-ratio:16/9;
  font-size:12.5px; color:#9C87AB;
  background:repeating-linear-gradient(45deg,#F2EAF7,#F2EAF7 12px,#FAF5FD 12px,#FAF5FD 24px);
}
@media (min-width:900px){
  .about-grid{ grid-template-columns:1.15fr 1fr; }
  /* 写真4枚を2×2に並べ、本文との高さバランスを取る */
  .about-photos{ grid-template-columns:1fr 1fr; }
}

/* ---------- 7. よくある質問 ---------- */
.sec-faq{ background:var(--c-cream); }
.faq-list{ margin:28px 0 0; }
.faq-item{ background:#fff; border-radius:14px; padding:18px 20px; margin-bottom:12px; border:1px solid var(--c-line); }
.faq-item dt{
  font-family:var(--font-round); font-weight:700; color:var(--c-purple-deep);
  font-size:15.5px; margin-bottom:6px;
}
.faq-item dt::before{ content:"Q. "; color:var(--c-green-deep); }
.faq-item dd{ margin:0; font-size:14px; color:var(--c-ink); }
.faq-item dd::before{ content:"A. "; font-weight:700; color:var(--c-purple); }

/* ---------- 8. Instagram ---------- */
.ig-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:26px 0; }
.ig-card{ margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--c-line); }
.ig-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.ig-card.is-empty img{ display:none; }
.ig-card.is-empty::before{
  content:"写真は後日掲載"; display:grid; place-items:center; aspect-ratio:1/1;
  font-size:11.5px; color:#9C87AB;
  background:repeating-linear-gradient(45deg,#F2EAF7,#F2EAF7 10px,#FAF5FD 10px,#FAF5FD 20px);
}

/* ---------- Instagramカード（購入方法カードと同じ作り） ---------- */
.insta-card{
  display:block; max-width:520px; margin:26px auto 0;
  background:#fff; border:2px solid #C13584; border-radius:16px;
  padding:24px 22px; text-decoration:none; color:var(--c-ink);
  transition:transform .15s, box-shadow .15s;
}
.insta-card:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(193,53,132,.18); }
.insta-tag{
  display:inline-block; font-size:11.5px; font-weight:700; border-radius:999px;
  padding:3px 12px; margin-bottom:10px;
  background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); color:#fff;
}
.insta-card h3{
  margin:0 0 8px; font-family:var(--font-round); font-weight:700;
  font-size:18px; color:var(--c-purple-deep);
}
.insta-card p{ margin:0 0 12px; font-size:13.5px; color:var(--c-ink-soft); }
.insta-link{ font-size:14px; font-weight:700; color:#C13584; }

/* ---------- 9. Web制作 ---------- */
.sec-web{ background:var(--c-purple-deep); color:#F3EDF8; }
.sec-web .sec-title{ color:#fff; }
.sec-web .sec-text{ color:#E3D8EC; }
.web-label{
  text-align:center; margin:0 0 6px; font-size:12px; letter-spacing:.28em;
  color:#C9B3DB; font-weight:700;
}
.works-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin:30px 0; }
.work-card{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:20px 20px;
}
.work-card h3{
  margin:0 0 8px; font-family:var(--font-round); font-weight:700; font-size:16.5px; color:#fff;
}
.work-card a{ color:#fff; text-decoration:underline; }
.work-card p{ margin:0 0 10px; font-size:13px; color:#DCCDE8; }
.work-tag{
  display:inline-block; font-size:11px; font-weight:700; color:#C9B3DB;
  border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:2px 12px;
}
@media (min-width:820px){ .works-grid{ grid-template-columns:repeat(3,1fr); } }
.price-box{ background:#fff; color:var(--c-ink); border-radius:16px; padding:26px 24px; }
.price-box h3{
  margin:0 0 12px; text-align:center; font-family:var(--font-round);
  font-weight:900; font-size:18px; color:var(--c-purple-deep);
}
.price-table{ width:100%; border-collapse:collapse; margin-bottom:12px; }
.price-table th, .price-table td{
  padding:12px 10px; border-bottom:1px dashed var(--c-line); text-align:left; font-size:14.5px;
}
.price-table th{ font-weight:500; width:56%; }
.price-table td{ font-weight:700; color:var(--c-purple-deep); }

/* 英語表示のときだけ出る注記 */
.en-only-note{
  max-width:640px; margin:18px auto 0; padding:10px 16px;
  background:#F6F1FA; border:1px solid var(--c-line); border-radius:10px;
  font-size:13px; line-height:1.7; color:var(--c-purple-deep); text-align:center;
}

/* 価格の目安（ご購入方法セクション内） */
.nasu-price{
  max-width:520px; margin:26px auto 0;
  border:1px solid var(--c-line); box-shadow:0 4px 14px rgba(74,35,90,.06);
}
.nasu-price .price-table th{ width:64%; }
.nasu-price .note{ display:block; text-align:left; line-height:1.7; }
/* どこで買うのがおすすめ？（早見表） */
.pick-guide{
  max-width:640px; margin:26px auto 0; padding:20px 22px;
  background:var(--c-cream); border:1px solid var(--c-line); border-radius:14px;
}
.pick-guide h3{
  margin:0 0 10px; text-align:center; font-family:var(--font-round);
  font-weight:700; font-size:16px; color:var(--c-purple-deep);
}
.pick-guide ul{ margin:0; padding-left:1.1em; }
.pick-guide li{ font-size:13.5px; line-height:1.9; }
.pick-guide li b{ color:var(--c-purple-deep); white-space:nowrap; }

/* BASEのフォロー案内 */
.buy-follow{
  margin:0 0 12px; font-size:12px; line-height:1.7; color:var(--c-green-deep);
  background:#EAF3E3; border-radius:8px; padding:7px 11px;
}

/* 送料に関する注意書き */
.ship-note{ color:#B3261E; font-weight:700; }
.buy-card .ship-note{ font-size:12.5px; }

/* ---------- 10. お問い合わせ ---------- */
.contact-btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:24px; }
.mail-text{ margin-top:14px; font-size:15px; font-weight:700; color:var(--c-purple-deep); letter-spacing:.03em; }

/* ---------- BGMプレーヤー ---------- */
.bgm-box{
  position:fixed; right:14px; bottom:calc(64px + env(safe-area-inset-bottom)); z-index:130;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.bgm-btn{
  border:1px solid var(--c-line); background:#fff; color:var(--c-purple-deep);
  font-family:var(--font-round); font-weight:700; font-size:13px;
  border-radius:999px; padding:10px 16px; cursor:pointer; box-shadow:0 4px 14px rgba(70,41,90,.18);
}
.bgm-btn.is-playing{ background:var(--c-purple); color:#fff; border-color:var(--c-purple); }
.bgm-panel{
  display:flex; align-items:center; gap:8px; background:#fff;
  border:1px solid var(--c-line); border-radius:999px; padding:8px 14px;
  box-shadow:0 4px 14px rgba(70,41,90,.18);
}
.bgm-panel[hidden]{ display:none; }
.bgm-mute{ border:0; background:none; font-size:16px; cursor:pointer; padding:0; }
.bgm-vol-label{ font-size:11px; color:var(--c-ink-soft); }
#bgmVol{ width:110px; accent-color:var(--c-purple); }
@media (min-width:900px){ .bgm-box{ bottom:18px; } }
/* パソコンでは「ご購入方法」タブのすぐ下に、同じ縦書きタブとして並べる */
@media (min-width:861px){
  .bgm-box{
    top:calc(50% + 74px); bottom:auto; right:0;
    flex-direction:row-reverse;   /* 音量パネルはボタンの左側に開く */
    align-items:flex-start; gap:8px;
  }
  .bgm-btn{
    writing-mode:vertical-rl; letter-spacing:.12em; line-height:1.9;
    padding:18px 10px; border-radius:10px 0 0 10px; border-right:none;
    box-shadow:0 3px 12px rgba(74,35,90,.18);
  }
  .bgm-panel{ margin-top:2px; }
}

/* ---------- 11. アクセス ---------- */
.sec-access{ background:var(--c-cream); }
.access-grid{ display:grid; grid-template-columns:1fr; gap:26px; margin-top:28px; }
.farm-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; }
.farm-table th, .farm-table td{
  padding:14px 16px; border-bottom:1px solid var(--c-line); font-size:14px;
  text-align:left; vertical-align:top;
}
.farm-table th{
  width:110px; background:#F5F0FA; color:var(--c-purple-deep);
  font-family:var(--font-round); font-weight:700; white-space:nowrap;
}
.map-wrap{ border-radius:14px; overflow:hidden; }
.map-wrap iframe{ width:100%; height:100%; min-height:320px; display:block; }
@media (min-width:900px){ .access-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- フッター ---------- */
.site-footer{ background:var(--c-purple-deep); color:#E9DFF1; padding:38px 0 26px; text-align:center; }
.footer-icon{ width:44px; height:44px; border-radius:50%; margin:0 auto 10px; display:block; }
.footer-name{
  margin:0 0 10px; font-family:var(--font-round); font-weight:900; font-size:19px; color:#fff;
}
.footer-info{ margin:0 0 14px; font-size:13px; line-height:2; }
.footer-links{ margin:0 0 16px; display:flex; justify-content:center; flex-wrap:wrap; gap:18px; }
.footer-links a{ color:#D9BFEA; font-size:13.5px; }
.footer-copy{ margin:0; font-size:12px; color:#B49BC6; }
.footer-credit{ margin:6px 0 0; font-size:12px; color:#B49BC6; }
.footer-credit a{ color:#D9BFEA; }

/* ---------- スマホ固定メニュー ---------- */
.sp-fixed-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:#fff; border-top:1px solid var(--c-line);
  padding-bottom:env(safe-area-inset-bottom);
}
.sp-fixed-nav a{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 4px 9px; font-size:11.5px; font-weight:700;
  color:var(--c-purple-deep); text-decoration:none;
}
.sp-fixed-nav a span{ font-size:18px; }
.sp-fixed-nav a img{ width:18px; height:18px; border-radius:50%; }
.sp-fixed-nav .sp-nav-buy{ background:var(--c-purple); color:#fff; }

/* ---------- ふんわり表示 ---------- */
.fade{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.fade.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .fade{ transition:none; opacity:1; transform:none; }
}

/* ---------- スマホ・PC切り替え ---------- */
@media (max-width:899px){
  .global-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--c-line);
    flex-direction:column; gap:0; padding:6px 0;
  }
  .global-nav.is-open{ display:flex; }
  .global-nav a{ padding:13px 24px; border-bottom:1px dashed var(--c-line); }
  .global-nav a:last-child{ border-bottom:0; }
  .nav-toggle{ display:block; }
}
@media (min-width:900px){
  body{ padding-bottom:0; }
  .sp-fixed-nav{ display:none; }
}