/* 商品ページ内に限定し、既存の紙面と配色を引き継ぐ。 */
.ml-page { --ml-kinako: #C9A15F; --ml-mascarpone: #C98A2E; --ml-custard: #D9A400; --ml-card-border: rgba(138,90,43,.14); }
.ml-hero { padding-block: clamp(24px,4vw,48px) 12px; }
.ml-kicker { margin: 10px 0 14px; }
.ml-script { margin-bottom: 0; }
.ml-hero h1 { margin: 4px 0; font-family: var(--font-base); font-size: clamp(2.3rem,6vw,3.6rem); font-weight: 900; letter-spacing: .04em; line-height: 1.3; color: var(--hw-wood-dk); }
.ml-en { margin: 4px 0 10px; font: 700 .78rem var(--font-base); letter-spacing: .3em; color: var(--hw-wood); text-transform: uppercase; }
.ml-tagline { margin: 10px 0 16px; font-family: var(--font-hand); font-size: clamp(1.05rem,2.2vw,1.3rem); font-weight: 600; color: var(--hw-ocean-dk); }
.ml-price { display: inline-flex; align-items: baseline; gap: 4px; margin: 0; padding: 10px 26px; border-radius: 999px; background: var(--hw-pink); color: #fff; box-shadow: 0 4px 0 var(--hw-pink-dk),0 8px 18px rgba(230,60,124,.25); white-space: nowrap; }
.ml-price b { font-size: clamp(2rem,5vw,2.8rem); font-weight: 900; line-height: 1; }
.ml-price-each, .ml-price-yen { font-size: 1rem; font-weight: 700; }
.ml-price small { font-size: .8rem; }
.ml-status { margin: 10px 0 12px; }
.ml-hero .mn-note { margin: 12px 0 8px; }
.ml-about-grid { display: grid; grid-template-columns: minmax(0,38%) minmax(0,1fr); gap: 28px 40px; align-items: center; }
.ml-lead { margin: 0; font-size: 1rem; line-height: 2; color: var(--hw-wood-dk); }
.ml-lead b { color: var(--hw-pink-dk); }
.ml-about .hibiscus-list { margin-top: 18px; }
.ml-section-lead { margin: -12px 0 22px; text-align: center; font-size: .95rem; font-weight: 700; color: var(--hw-wood-dk); }
.ml-flavors { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px 16px; margin: 0; padding: 0; list-style: none; }
.ml-flavor { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--ml-card-border); border-radius: 16px; background: #fff; box-shadow: var(--hw-shadow); }
.ml-flower { flex-shrink: 0; width: 44px; height: 44px; color: var(--ml-accent); filter: drop-shadow(0 2px 3px rgba(0,0,0,.12)); }
.ml-flavor h3 { margin: 0; font-size: 1.02rem; font-weight: 900; color: var(--hw-wood-dk); line-height: 1.4; }
.ml-flavor-en { display: block; margin-top: 2px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--hw-wood); }
.ml-flavor[data-flavor="sugar"] { --ml-accent: var(--hw-pink-deco); }
.ml-flavor[data-flavor="cinnamon"] { --ml-accent: var(--hw-coral); }
.ml-flavor[data-flavor="kinako"] { --ml-accent: var(--ml-kinako); }
.ml-flavor[data-flavor="coconut"] { --ml-accent: var(--hw-lagoon); }
.ml-flavor[data-flavor="matcha"] { --ml-accent: var(--hw-palm-deco); }
.ml-flavor[data-flavor="chocolate"] { --ml-accent: var(--hw-wood); }
.ml-whips { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ml-whip { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 14px; border: 3px solid #fff; border-radius: 18px; background: var(--ml-tint); text-align: center; box-shadow: var(--hw-shadow),0 0 0 1px rgba(138,90,43,.1); }
.ml-whip-icon { display: grid; place-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--ml-accent); }
.ml-whip-icon .ml-flower { width: 28px; height: 28px; }
.ml-whip h3 { margin: 0; font-size: .95rem; font-weight: 900; color: var(--hw-wood-dk); line-height: 1.4; }
.ml-whip-en { font-family: "Pacifico",cursive; font-size: .95rem; color: var(--hw-wood-dk); line-height: 1.3; }
.ml-whip[data-whip="cream"] { --ml-accent: var(--hw-lagoon-text); --ml-tint: #E6F3F9; }
.ml-whip[data-whip="chocolate"] { --ml-accent: var(--hw-wood); --ml-tint: #FBE9EE; }
.ml-whip[data-whip="matcha"] { --ml-accent: var(--hw-palm); --ml-tint: #EAF4E3; }
.ml-whip[data-whip="mascarpone"] { --ml-accent: var(--ml-mascarpone); --ml-tint: #FBF1DE; }
.ml-whip[data-whip="custard"] { --ml-accent: var(--ml-custard); --ml-tint: #FFF6CC; }
.ml-whip-price { display: inline-block; margin-top: 10px; font-size: .95rem; }
.ml-notice { max-width: 720px; margin: 28px auto 0; padding: 18px 22px 18px 24px; border: 3px solid #fff; border-left: 8px solid var(--hw-pink); border-radius: 18px; background: #fff; box-shadow: var(--hw-shadow); text-align: left; }
.ml-notice h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1rem; color: var(--hw-pink-dk); }
.ml-notice-mark { display: grid; place-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--hw-pink); color: #fff; font-size: .9rem; font-weight: 900; }
.ml-notice p { margin: 0; font-size: .92rem; line-height: 1.9; color: var(--hw-wood-dk); }
.ml-takeout-panel { display: flex; align-items: center; gap: 24px; max-width: 760px; margin-inline: auto; padding: 26px 30px; border: 3px solid #fff; border-radius: 22px; background: var(--hw-sky-light); box-shadow: var(--hw-shadow),0 0 0 1px rgba(20,95,148,.1); }
.ml-takeout .pt-h2 { margin: 8px 0; text-align: left; font-size: clamp(1.3rem,3vw,1.7rem); color: var(--hw-ocean-dk); }
.ml-takeout-panel p { margin: 0; font-size: .95rem; color: var(--hw-wood-dk); }
.ml-movie-controls { text-align: center; margin: 14px 0 0; }
.ml-movie-toggle { padding: 10px 18px; border: 2px solid var(--hw-ocean); border-radius: 999px; background: #fff; color: var(--hw-ocean); font: inherit; font-weight: 900; cursor: pointer; }
.ml-movie-toggle:disabled { cursor: default; opacity: .65; }
.ml-movie-status:not(:empty) { display: block; margin-top: 8px; color: var(--hw-wood-dk); }
.ml-movie-toggle[aria-pressed="true"] { background: var(--hw-ocean); color: #fff; }
.ml-page a:focus-visible, .ml-movie-toggle:focus-visible { outline: 2px solid var(--hw-ocean-dk); outline-offset: 2px; }
.ml-flavor:nth-child(2), .ml-whip:nth-child(2) { --reveal-delay: 70ms; }
.ml-flavor:nth-child(3), .ml-whip:nth-child(3) { --reveal-delay: 140ms; }
.ml-flavor:nth-child(4), .ml-whip:nth-child(4) { --reveal-delay: 210ms; }
.ml-flavor:nth-child(5), .ml-whip:nth-child(5) { --reveal-delay: 280ms; }
.ml-flavor:nth-child(6) { --reveal-delay: 350ms; }
@media (min-width: 768px) and (max-width: 1023px) {
  .ml-whips { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .ml-hero h1 { font-size: clamp(1.65rem,7vw,2.3rem); }
  .ml-price { padding: 8px 20px; }
  .ml-about-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .ml-lead { font-size: .9rem; line-height: 1.9; }
  .ml-flavors, .ml-whips { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .ml-flavor { flex-direction: column; text-align: center; padding: 12px; gap: 10px; }
  .ml-flavor h3 { white-space: nowrap; }
  .ml-name-part { display: inline-block; white-space: nowrap; }
  .ml-flower { width: 36px; height: 36px; }
  .ml-notice { padding: 14px 16px 14px 18px; }
  .ml-notice p { font-size: .86rem; }
  .ml-takeout-panel { flex-direction: column; text-align: center; padding: 20px 16px; gap: 12px; }
  .ml-takeout .pt-h2 { text-align: center; }
}
@media print {
  .ml-movie-controls { display: none; }
}

/* ---------- 円形ループ動画（共通） ---------- */
/* 円形動画の枠 */
.ml-loop { position: relative; display: block; width: var(--ml-loop-size, 200px); aspect-ratio: 1 / 1; flex-shrink: 0; border-radius: 50%; overflow: hidden; isolation: isolate; border: 6px solid #fff; background: #e9e4d8; box-shadow: var(--hw-shadow), 0 0 0 1px rgba(138,90,43,.12); }
.ml-loop .ml-video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }  /* iOS Safari で overflow が効かない場合の保険 */
/* 円の中の被写体を右へ寄せる。元動画は正方形で左右に余白がないため、1.3倍に拡大してから右へ12%ずらす（左端が見えない範囲） */
.ml-loop .ml-video { transform: translateX(12%) scale(1.3); }

/* ---------- ヒーロー 2 カラム ---------- */
.ml-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 24px 48px; align-items: center; margin-top: 10px; text-align: left; }
.ml-hero-copy { text-align: center; }           /* v1 と同じ中央揃えを保つ */
/* 中間幅でも見出しの末尾一文字だけが次行へ残らないようにする。 */
.ml-hero-copy h1 { text-wrap: balance; }
.ml-hero-visual { position: relative; justify-self: center; width: 100%; max-width: 440px; padding: 0 0 70px 56px; } /* 左下に円を食い込ませる余白 */
.ml-hero-photo { display: block; }
.ml-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 8px solid #fff; border-radius: 28px; box-shadow: var(--hw-shadow), 0 0 0 1px rgba(138,90,43,.12); transform: rotate(2deg); }  /* index.php .hero-photo img と同じ作法 */
.ml-hero-visual .ml-loop-hero { translate: 36px 0; --ml-loop-size: 200px; position: absolute; left: 0; bottom: 0; z-index: 2; transform: rotate(-3deg); }
.ml-hero-visual .ml-hero-hib { top: -26px; right: -18px; width: 84px; height: 84px; z-index: 2; transform: rotate(-12deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
.ml-hero-visual .ml-hero-sparkle { top: 18%; left: 34px; width: 22px; height: 22px; z-index: 2; }
.ml-movie-controls { margin: 14px 0 0; }        /* v1 の 0 0 18px から変更。ヒーロー内に置くため */

/* ---------- About ---------- */
.ml-about-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px 44px; justify-content: center; }  /* 38% → 固定 300px */
.ml-about-visual { position: relative; justify-self: center; padding-bottom: 18px; }
.ml-about-visual .ml-loop-about { --ml-loop-size: 280px; }
.ml-about-badge { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; font-size: .82rem; padding-inline: 18px; }

/* ---------- テイクアウト ---------- */
.ml-takeout-panel .ml-loop-takeout { --ml-loop-size: 140px; }

/* ---------- SP ---------- */
@media (max-width: 767px) {
  .ml-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 6px; }
  .ml-hero-visual { max-width: 320px; padding: 0 0 56px 40px; }
  .ml-hero-photo img { border-width: 6px; border-radius: 22px; }
  .ml-hero-visual .ml-loop-hero { --ml-loop-size: 150px; }
  .ml-hero-visual .ml-hero-hib { width: 60px; height: 60px; top: -18px; right: -8px; }
  .ml-about-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ml-about-visual { order: 0; }                 /* SP は動画 → 本文の順（v1 のポスターは本文の後ろだったが、円は小さいので先に見せる） */
  .ml-about-visual .ml-loop-about { --ml-loop-size: 220px; }
  .ml-takeout-panel .ml-loop-takeout { --ml-loop-size: 120px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ml-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 20px 32px; }
  .ml-hero-visual .ml-loop-hero { --ml-loop-size: 170px; }
}