/* =========================================
  Aya Farm | Oseibo/Christmas Hero
  - Single, tidy stylesheet
  - Keeps original look & fixes stacking/scroll
========================================= */

/* ---------- Variables ---------- */
:root{
  /* brand tones */
  --ink:#eee;
  --bg:#0b0b0b;
  --panel:#111;
  --gold:#a09591;

  /* layout */
  --header-pad: clamp(12px, 2vw, 24px);
  --nav-gap: clamp(10px, 2vw, 20px);
  --drawer-w: 400px;
  --container-w: 1000px;

  /* effects */
  --hero-overlay: rgba(0,0,0,.10);
  --white:#fff;
  --accent:#111;
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; overflow-x:clip; }
html{ scroll-behavior:smooth; }
body{
  font-family: "Noto Serif JP", serif, "Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, Meiryo, Arial, sans-serif;
  background:#fff; color:#111;
  font-optical-sizing:auto; font-weight:100; font-style:normal;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
.bn{ border:0 !important; }

/* ---------- Logo (top-left) ---------- */
.logo{
  position:absolute; top:var(--header-pad); left:var(--header-pad);
  z-index:2; display:flex; align-items:center; gap:8px; color:#fff;
}
.logo svg{ width:60px; height:60px; display:block; }
.logo .brand{ font-size:clamp(14px,1.6vw,18px); letter-spacing:.12em; }

/* ---------- HERO (viewport full) ---------- */
.hero{
  position:relative; width:100vw; height:100vh; min-height:560px; overflow:hidden;
  z-index:0; /* stacking context base */
}
.hero::after{
  content:""; position:absolute; inset:0; background:var(--hero-overlay);
  z-index:1; pointer-events:none;
}

/* ---------- Christmas Hero block ---------- */
#christmas-hero{
  position:relative; width:100vw;
  min-height:100vh; min-height:100svh; min-height:100dvh;
  isolation:isolate; margin:0; padding:0; color:var(--ink); overflow:hidden;
  background:
    radial-gradient(1200px 600px at 50% -10%, #1a1a1a 0%, #0f0f0f 60%, #000 100%),
    var(--bg);
}
@supports (height:100dvh){ #christmas-hero{ min-height:100dvh; } }

/* canvas behind, message/vignette above ::after */
- #christmas-hero, #christmas-hero > *{ position:relative; z-index:2; }
+ /* クリスマスヒーローの積層だけ整理（positionは子要素に配らない） */
+ #christmas-hero{ position:relative; z-index:2; }
+ #snow-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
+ .xmas-message{ position:absolute; inset:0; z-index:2; display:block; }  /* 画面中央に固定 */
+ .vignette{ position:absolute; inset:-10%; z-index:2; }
#snow-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }

/* ===== Center message (fix overlap) ===== */

/* 端末幅に応じて余白を大きめに（スマホで広く） */
:root{
  /* だいたいタイトル3行想定。必要ならここだけ調整すればOK */
  --title-gap: clamp(24px, 4vmin, 40px);
}

.xmas-message{
  position:absolute; inset:0; display:block;
  padding:0; margin:0; text-align:center;
}

/* タイトル自身の中心を画面中央に固定 */
.xmas-title{
  position:absolute; left:50%; top:48%; transform:translate(-50%, -48%);
  z-index:2; margin:0; text-align:center;

  font-family:"Noto Serif JP","Hiragino Mincho ProN","游明朝",serif;
  font-size:clamp(16px, 5vw, 40px); /* 必要なら 28–64 に */
  font-weight:300; letter-spacing:.25em; line-height:1.25;

  background:linear-gradient(110deg, #a09591 0%, #e9e3df 20%, #a09591 40%, #7e726c 60%, #a09591 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 6s ease-in-out infinite;
  filter:drop-shadow(0 6px 14px rgba(160,149,145,.12));
}

/* 日付はタイトルの「下」に落とす（重なり防止で大きめギャップ） */
.xmas-date{
  position:absolute; left:50%; top:calc(60% + var(--title-gap)); transform:translateX(-50%);
  z-index:2; margin:0;
  font-size:clamp(14px, 2.4vw, 20px);
  line-height:1.2;
  letter-spacing:.35em;
  color:rgba(238,238,238,.85); opacity:.9;
}
.xmas-title en {   white-space: nowrap;      /* ← 改行させない */
  word-break: keep-all;     /* ← 単語途中で折り返さない */}
/* スマホはさらに余裕を持たせる */
@media (max-width: 768px){
  :root{ --title-gap: clamp(48px, 12vmin, 120px); }
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .xmas-title{ transform:translate(-50%, -50%); }
  .xmas-date{ transform:translateX(-50%); }
}
/* gentle vignette */
.vignette{
  position:absolute; inset:-10%;
  background:
    radial-gradient(60% 60% at 50% 40%, transparent 0%, transparent 55%, rgba(0,0,0,.35) 100%),
    radial-gradient(120% 100% at 50% 120%, rgba(0,0,0,.45), transparent 60%);
  pointer-events:none;
}
@keyframes shimmer{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ---------- Top inline menu (right column) ---------- */
.top-inline-menu{
  position:absolute; top:50%; right:40px; transform:translateY(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}
.top-inline-menu ul{
  display:flex; flex-direction:column; align-items:flex-end; gap:var(--nav-gap);
  list-style:none; margin:0; padding:0; text-align:right;
}
.top-inline-menu a{
  display:inline-flex; align-items:center; gap:8px;
  padding:.55em .9em; border-radius:999px; border:1.5px solid transparent;
  color:#fff; opacity:.95; transition:all .2s ease; text-align:right;
}
.top-inline-menu a:hover{ border-color:rgba(255,255,255,.85); }
.top-inline-menu a.active{ background:#fff; color:#000; }
.top-inline-menu li{ opacity:0; transform:translateX(32px); }
.top-inline-menu.is-animate li{ animation:slideIn 1s cubic-bezier(.2,.7,.2,1) forwards; }
.top-inline-menu.is-animate li:nth-child(1){ animation-delay:.15s; }
.top-inline-menu.is-animate li:nth-child(2){ animation-delay:.30s; }
.top-inline-menu.is-animate li:nth-child(3){ animation-delay:.45s; }
.top-inline-menu.is-animate li:nth-child(4){ animation-delay:.60s; }
.top-inline-menu.is-animate li:nth-child(5){ animation-delay:.75s; }
@keyframes slideIn{ to{ opacity:1; transform:none; } }
.ext{ display:inline-flex; }
.ext svg{ width:14px; height:14px; }

/* ---------- Info ticker (bottom-left panel) ---------- */
.hero{ position:relative; z-index:0; }
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--hero-overlay);
  z-index:1;              /* ← オーバーレイは下層（雪や文字より下） */
  pointer-events:none;
}
.hero-info{
  position:absolute; left:0; bottom:0; z-index:2;
  width:min(560px, calc(100% - 2*var(--header-pad)));
  color:#fff; background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px) saturate(120%); overflow:hidden;
}
.hero-info__wrap{
  display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:center; padding:8px;
}
.hero-info__media{ aspect-ratio:1/1; overflow:hidden; margin:0 !important; max-width:120px; }
.hero-info__media img{ width:100%; height:100%; object-fit:cover; }

.hero-info__body{ font-size:14px; line-height:1.85; }
.hero-info__body h3{ margin:0 0 6px; font-size:14px; letter-spacing:.12em; opacity:.9; }
.hero-info__body .lead{ margin:.25em 0 .6em; opacity:.95; }
.hero-info__body a{ text-decoration:underline; text-underline-offset:2px; }

/* ticker text fade */
.ticker{ position:relative; margin:0; padding:0; list-style:none; min-height:3.2em; }
.ticker li{
  position:absolute; inset:0; opacity:0;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1);
  will-change:opacity;
}
.ticker li.active{ opacity:1; }
/* image fade+scale */
.hero-info__media img.fx{
  animation:fadeScale 1.1s cubic-bezier(.22,.61,.36,1) both;
  will-change:transform,opacity,filter;
}
@keyframes fadeScale{
  from{ opacity:0; transform:scale(1.035); filter:blur(.6px); }
  60%{ filter:blur(0); }
  to{ opacity:1; transform:scale(1); filter:none; }
}

/* ---------- Scroll indicator (right side) ---------- */
.scroll-vertical{
  position:absolute; right:40px; bottom:200px; /* fixed to corner */
  z-index:2; color:#fff; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.08em;
}
.scroll{ position:absolute; right:50%; top:10%; writing-mode:vertical-rl; }
.scroll::before{
  animation:scroll 2s infinite; background-color:#000; bottom:-115px; content:"";
  height:100px; left:0; margin:auto; position:absolute; right:0; width:1px; z-index:2;
}
.scroll::after{
  background-color:#ccc; bottom:-115px; content:""; height:100px;
  left:0; margin:auto; position:absolute; right:0; width:1px;
}
@keyframes scroll{
  0%{ transform:scale(1,0); transform-origin:0 0; }
  50%{ transform:scale(1,1); transform-origin:0 0; }
  51%{ transform:scale(1,1); transform-origin:0 100%; }
  100%{ transform:scale(1,0); transform-origin:0 100%; }
}
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(45deg) } 50%{ transform:translateY(6px) rotate(45deg) } }

/* ---------- Hamburger / Drawer ---------- */
.hamburger{
  position:fixed; top:var(--header-pad); right:var(--header-pad);
  z-index:1002; width:60px; height:60px; border:none; cursor:pointer;
  background:rgba(0,0,0,.55); backdrop-filter:saturate(120%) blur(2px);
  display:flex; align-items:center; justify-content:center;
}
.hamburger span{
  position:relative; display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.hamburger span::before, .hamburger span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform .25s ease, top .25s ease, opacity .2s ease;
}
.hamburger span::before{ top:-7px; }
.hamburger span::after { top:7px; }
.hamburger.is-open span{ background:transparent; }
.hamburger.is-open span::before{ top:0; transform:rotate(45deg); }
.hamburger.is-open span::after { top:0; transform:rotate(-45deg); }

.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:.2s ease; z-index:1000;
}
.backdrop.show{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(var(--drawer-w), 100vw);
  background:#000; color:#fff; transform:translateX(100%); transition:transform .25s ease;
  z-index:1001; padding:28px 24px;
}
.drawer.show{ transform:translateX(0); }
.drawer h3{ margin:13px 0 30px 0; font-weight:600; letter-spacing:.1em; }
.drawer nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.drawer nav a{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.15);
}
.drawer nav a:hover{ background:rgba(255,255,255,.08); }

/* ---------- Main content (placeholders) ---------- */
main section{ padding:68px 16px; }
.container{ max-width:var(--container-w); margin:0 auto; }
h2{ font-size:clamp(22px,2.4vw,32px); letter-spacing:.08em; margin:0 0 18px; }
p{ line-height:1.9; }

/* ---------- PageTop button ---------- */
.pagetop{
  position:fixed; right:14px; bottom:16px; z-index:999;
  background:#111; color:#fff; border:none; border-radius:999px;
  padding:12px 14px; cursor:pointer; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:.2s ease;
}
.pagetop.show{ opacity:1; visibility:visible; transform:none; }

/* ---------- Responsive (<=768px) ---------- */
@media (max-width:768px){
  :root{ --header-pad:16px; --nav-gap:10px; }
  html,body{ overflow-x:clip; }

  .p-img{ aspect-ratio:1/1; }

  .logo{ top:25px; left:25px; }
  .logo svg{ width:50px; height:50px; }

  /* hero height stable on mobile UI */
  .hero{ width:100%; height:100svh; min-height:560px; }

  /* inline menu hidden on SP (use drawer) */
  .top-inline-menu{ display:none; }

  /* right vertical scroll at center */
  .scroll-vertical{
    right:16px; top:50%; bottom:auto; transform:translateY(-50%);
    writing-mode:vertical-rl;
  }
  .scroll::before, .scroll::after{
    bottom:-80px; height:70px;
  }

  /* info bar full width at bottom */
  .hero-info{
    left:0; right:0; bottom:0; width:auto; border-radius:0;
    backdrop-filter:blur(4px) saturate(120%);
  }
  .hero-info__wrap{
    grid-template-columns:80px 1fr; gap:10px; padding:10px 12px; align-items:start;
  }

  /* drawer width already responsive */
}

/* ---------- Wide screens (>=1920px) ---------- */
@media (min-width:1920px){
  body{ --header-pad:28px; }
}

/* ---------- Motion accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  #snow-canvas{ display:none; }
  .xmas-title{ animation:none; }
  .ticker li{ transition-duration:.3s; }
  .hero-info__media img.fx{ animation-duration:.3s; }
}
   /* ===== About ===== */
    .about {
      position: relative;
      /* PC背景 */
      background: #000 url("images/about_pc.jpg") center/cover no-repeat;
      color: #fff;
      isolation: isolate; /* overlayのブレ防止 */
      padding: clamp(60px, 10vh, 120px) 16px;
    }
    .about::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .50); /* 黒オーバーレイ */
      z-index: -1;
    }
    @media (max-width:768px) {
      /* SP背景 */
      .about {
        background-image: url("images/about_sp.jpg");
        padding: 56px 16px;
      }
    }
    /* ヘッダー */
    .about__inner {
      max-width: var(--container-w);
      margin: 0 auto;
    }
    .about__head {
      margin-bottom: 10%;
    }
    .about__title {
      font-size: clamp(24px, 3.2vw, 24px);
      margin: 0 0 6px;
      letter-spacing: .06em;
    }
    .about__subtitle {
      margin: 0;
      opacity: .9;
      font-size: clamp(14px, 1.8vw, 16px);
    }
    .about__underline {
      display: block;
      width: 150px;
      height: 1px;
      background: rgba(255, 255, 255, .6);
      margin: 10px 0;
    }
    /* サブ見出し（そのまま） */
    .about__sub {
      display: flex;
      align-items: center;
      gap: .35em;
      font-size: clamp(18px, 2.6vw, 24px);
      margin: 22px 0 10px;
    }
    .about__brand-svg {
      width: auto;
      height: 1em;
      transform: translateY(1px);
    }
    /* mizuhiki.svg：固定表示 */
    .about__mizuhiki {
      width: 100%;
      height: auto;
      display: block;
      margin: 100px 0 0;
      opacity: 0.7;
    }
    /* コピー */
    .about__copy p {
      line-height: 5em;
      margin: 5em 0 5em;
      text-align: center;
      letter-spacing: 0.2em;
    }
    /* スペック（PC：横並び｜＋下線） */
    .about-spec {
      margin: 18px 0 0;
      background: rgba(0, 0, 0, .55);
      backdrop-filter: blur(4px) saturate(120%);
      padding: 20px 40px;
    }
    .about-spec__row {
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: 12px;
      align-items: baseline;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .25);
    }
    .about-spec dt {
      font-weight: 100;
      letter-spacing: .08em;
      opacity: .95;
      padding: 10px;
    }
    .about-spec dd {
      margin: 0;
    }
    /* SP：縦積み表示＋改行（\ → <br> にJSで変換） */
    @media (max-width:768px) {
      .about-spec__row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 0;
      }
      .about-spec dt {
        font-size: 14px;
        opacity: .9;
      }
      .about-spec dd {
        font-size: 14px;
        line-height: 1.9;
      }
    }
   /* ===== Product ===== */
    .product {
      background: #0C7071; /* 背景色 a09591 */
      color: #fff; /* 文字色 白 */
      padding: clamp(56px, 10vh, 100px) 16px;
    }
    .product__grid {
      display: grid;
      grid-template-columns: 1fr 420px; /* 左：テキスト / 右：画像縦並び */
      gap: clamp(20px, 4vw, 40px);
      align-items: start;
		margin-bottom: 100px;
    }
    /* 左カラム */
    .badge-line {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
    }
    .badge {
      display: inline-block;
      padding: .3em .9em;
      border: 1px solid rgba(255, 255, 255, .7);
      border-radius: 999px;
      font-size: 12px;
      letter-spacing: .08em;
      backdrop-filter: saturate(120%);
    }
    .p-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, .4); /* 左カラム幅のアンダーバー */
      margin-bottom: 12px;
    }
    .p-title {
      margin: 0;
      font-size: clamp(20px, 2.4vw, 28px);
      font-weight: 600;
    }
    .p-price {
      white-space: nowrap;
      font-size: clamp(16px, 2vw, 18px);
      opacity: .95;
    }
    .p-tagline {
      margin: 16px 0 10px;
      opacity: .9;
    }
    /* スペック */
    .p-spec {
      margin: 16px 0 20px;
    }
    .p-row {
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: 14px;
      padding: 12px 0;
    }
    .p-row + .p-row {
      border-top: 1px dashed rgba(255, 255, 255, .25);
    }
    .p-row dt {
      font-weight: 600;
      letter-spacing: .06em;
      opacity: .95;
    }
    .p-row dd {
      margin: 0;
      line-height: 1.9;
    }
    .p-copy {
      margin: 18px 0 22px;
      line-height: 2;
      opacity: .95;
    }
    /* 購入ボタン */
    .p-cta {
      margin-top: 8px;
    }
    .btn-ghost {
      text-align: center;
      display: inline-block;
      width: 100%;
      padding: 12px 18px;
      border: 1px solid rgba(255, 255, 255, .7); /* 既定は極細枠あり */
      border-radius: 0; /* 角丸なし（直角） */
      color: #fff;
      background: transparent; /* 中身は塗りなし */
      transition: background .2s ease, color .2s ease, border-color .2s ease;
    }
    .btn-ghost:hover, .btn-ghost:active {
      background: #6d5249; /* 指定色 */
      color: #fff;
      border-color: transparent; /* ホバー/アクティブ時はボーダーなし */
    }
    .btn-ghost:focus-visible {
      outline: 2px solid rgba(255, 255, 255, .85);
      outline-offset: 2px;
    }
    /* 右カラム（画像 1:1 縦並び） */
    .product__right {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .p-img {
      aspect-ratio: 1 / 1;
      border: 1px solid rgba(255, 255, 255, .3);
      overflow: hidden;
      background: rgba(0, 0, 0, .15);
    }
    .p-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* 交互レイアウト（Gridエリアで入替） */
    .product__grid {
      grid-template-areas: "left right";
    }
    .product__left {
      grid-area: left;
    }
    .product__right {
      grid-area: right;
    }
    .product__grid--rev {
      grid-template-columns: 420px 1fr; /* 反転時：列幅も左右逆 */
      grid-template-areas: "right left";
    }
    .product-sep {
      margin: 100px 0;
      opacity: 0.3;
    }
    /* SP：画像→テキストの順で縦積み（反転も同じ順序に） */
    @media (max-width:768px) {
      .product__grid, .product__grid--rev {
        grid-template-columns: 1fr;
        grid-template-areas:
          "right"
          "left";
        gap: 20px;
      }
      /* 既に .btn-ghost は幅100% 指定済み */
      /* lineupは画像1枚のみなので２枚目非表示指定は不要 */
    }
    /* ===== Smartphone (≤768px) ===== */
    @media (max-width:768px) {
      /* 画像を先頭に、テキストは次 */
      .product__grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .product__right {
        order: -1;
      } /* 右カラム（画像）を先頭に */
      .product__right .p-img:nth-child(2) {
        display: none;
      } /* 2枚目は非表示 */
      /* タイトル左、価格は改行（下に回す） */
      .p-head {
        flex-direction: column;
        align-items: flex-start;
      }
      .p-price {
        white-space: normal;
      }
      /* スペックは縦積み（ラベル→値） */
      .p-row {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      /* 購入ボタンは要素めいっぱい＆直角 */
      .p-cta .btn-ghost {
        display: block;
        width: 100%;
        border-radius: 0; /* 念押し */
      }
    }
    /* ===== Footer ===== */
    .site-footer {
      background: #52413F;
      color: #fff;
      padding: clamp(40px, 8vw, 72px) 16px 28px;
    }
    .site-footer a {
      color: inherit;
      text-decoration: none;
    }
    .site-footer a:hover {
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr; /* brand / nav / legal */
      gap: clamp(20px, 3vw, 40px);
      align-items: start;
    }
    .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      color: #fff;
    }
    .footer-logo svg {
      width: 50px;
      height: 50px;
      display: block;
    }
    .footer-logo .brand {
      font-size: 16px;
      letter-spacing: .12em;
    }
    .footer-tagline {
      margin: 0 0 8px;
      opacity: .9;
    }
    .footer-address {
      font-style: normal;
      line-height: 1.9;
      opacity: .9;
    }
    .footer-address a {
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .logo-svg {
      width: 60px;
    }
    .f-head {
      margin: 0 0 8px;
      font-size: 14px;
      letter-spacing: .12em;
      text-transform: uppercase;
      opacity: .9;
    }
    .footer-nav ul, .footer-legal ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 8px;
    }
.f-head {
	margin-top: 20px;
}
    .footer-legal .sns {
      display: flex;
      gap: 12px;
      margin-top: 8px;
    }
    .site-footer .ext {
      display: inline-flex;
      vertical-align: middle;
      margin-left: 6px;
    }
    .site-footer .ext svg {
      width: 14px;
      height: 14px;
    }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-top: 26px;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .to-top {
      font-size: 13px;
      opacity: .9;
    }
    .copy {
      opacity: .7;
    }
    /* SP */
    @media (max-width:768px) {
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .footer-logo {
        justify-content: flex-start;
      }
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
    }

/* ====== Product overflow fix pack ====== */

/* 1) Gridの柔軟列を「本当に縮む列」にする */
.product__grid{
  /* 左=柔軟列を明示して縮ませる */
  grid-template-columns: minmax(0,1fr) 420px;
}
.product__grid--rev{
  /* 反転時も同様（右が固定、左をminmaxで） */
  grid-template-columns: 420px minmax(0,1fr);
}

/* 2) Grid子要素が「縮めない」既定を上書き */
.product__left,
.product__right,
.p-row dd {
  min-width: 0;
}

/* 3) 長い語やスラッグでの押し広げを抑止 */
.product,
.product * {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4) 画像は絶対に領域をはみ出さない */
.product img { max-width: 100%; height: auto; display:block; }

/* 5) SPでは必ず1カラム化（重複OK・こちらが勝つ） */
@media (max-width:768px){
  .product__grid,
  .product__grid--rev{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "right"
      "left";
    gap: 20px;
  }
  .product__right{ order:-1; }      /* 画像を先頭に */
}

/* 6) iOSの aspect-ratio フォールバック（旧環境向け） */
@supports not (aspect-ratio: 1 / 1) {
  .p-img{ position:relative; overflow:hidden; }
  .p-img::before{ content:""; display:block; padding-top:100%; } /* 1:1 */
  .p-img > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
}

/* 7) Grid内コンテンツの縮小許可（Safariで効くおまじない） */
.product__grid > * { min-width:0; min-height:0; }
/* figure の既定余白を全消し（安全） */
figure { margin: 0; }

/* 商品画像ブロックの余白をゼロに固定＋万一の隙間対策 */
.p-img {
  margin: 0;
  line-height: 0;           /* 画像のベースライン隙間ケア（保険） */
}

/* SP時の行ギャップを少しだけ控えめに（お好みで） */
@media (max-width:768px){
  .product__grid, .product__grid--rev{
    gap: 16px;  /* 既定24px → 16pxなど好みで */
  }
	.about__copy p {
	 line-height: 3em;
	}
}