/* =========================================================
   vspot × MyComfort クリスマスコラボ（トップページ）
   トンマナ：MyComfort公式に合わせた生成り・グレージュ・細い線・セリフ英字。
   クリスマスは深緑・くすみ赤・ゴールドを差し色として少量。
   ========================================================= */
:root {
  --ivory: #faf7f2;
  --paper: #f1eee8;
  --greige: #e9e2d5;
  --ink: #3b3634;
  --muted: #7a7171;
  --line: #ddd5c8;
  --white: #fff;
  --gold: #b8964a;
  --gold-soft: #d9c08a;
  --green: #3d5a4b;
  --green-dk: #2f4a3c;
  --red: #a8473e;
  --serif: "Cormorant Garamond", "Shippori Mincho", serif;
  --maru: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --sans: "Noto Sans JP", system-ui, sans-serif;
  --gutter: max(24px, env(safe-area-inset-left, 0px));
  --gutter-r: max(24px, env(safe-area-inset-right, 0px));
  --hd-h: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 12px); }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); line-height: 1.8; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; }
.nw { white-space: nowrap; }

/* ---------- お知らせ帯・ヘッダー ---------- */
.notice { background: #2b2826; color: #fff; font-size: 13px; letter-spacing: .06em; text-align: center; padding-block: 9px; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.notice b { color: var(--gold-soft); margin-right: .6em; }
.hd { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.hd__in { max-width: 1280px; margin: 0 auto; height: var(--hd-h); display: flex; align-items: center; gap: 24px; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.logo { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: .02em; text-decoration: none; white-space: nowrap; line-height: 1; }
.logo i { font-style: italic; font-weight: 500; color: var(--gold); margin: 0 .3em; }
.nav { margin-left: auto; display: flex; gap: 34px; font-size: 14px; letter-spacing: .08em; }
.nav a { text-decoration: none; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .25s; }
.nav a:hover::after { transform: scaleX(1); }
.nav__shop { display: none; }
.hd__btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--green); border: 1px solid var(--green); border-radius: 999px; padding: 10px 20px; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.hd__btn:hover { background: var(--green); color: #fff; }
.hd__btn svg { width: 13px; height: 13px; }
.hd__menu { display: none; }

/* ---------- 共通ボタン ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 34px; border-radius: 999px; font-family: var(--maru); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.btn svg { width: 16px; height: 16px; }
.btn--main { background: var(--green); color: #fff; box-shadow: 0 8px 18px -10px rgba(47, 74, 60, .8); }
.btn--main:hover { background: var(--green-dk); transform: translateY(-2px); }
.btn--sub { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.btn--sub:hover { border-color: var(--gold); }

/* ---------- FV（サイトのキービジュアル） ---------- */
.fv { position: relative; overflow: hidden; background: var(--ivory); height: clamp(560px, calc(100svh - var(--hd-h) - 38px), 760px); }
.fv__media { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; border-radius: 0 0 0 220px; overflow: hidden;
  background: radial-gradient(ellipse at 55% 40%, #fffaf0 0, rgba(255, 250, 240, 0) 55%), linear-gradient(180deg, #f3ede3 0%, var(--greige) 100%); }
.fv__media::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 64px); pointer-events: none; }
.grp { position: absolute; left: 50%; bottom: 0; height: 92%; aspect-ratio: 868 / 825; transform: translateX(-46%); overflow: hidden; z-index: 2; }
.grp img { position: absolute; width: calc(100% * 1600 / 868); max-width: none; height: auto; left: calc(-100% * 32 / 868); top: calc(-100% * 75 / 825); filter: drop-shadow(0 10px 18px rgba(80, 60, 30, .18)); }
.holly { position: absolute; z-index: 3; width: 96px; aspect-ratio: 4 / 3; right: 7%; top: 8%; transform: rotate(16deg); }
.deco { position: absolute; aspect-ratio: 1; color: var(--gold); z-index: 1; }
.deco--soft { color: var(--gold-soft); }
.fv__in { position: relative; z-index: 3; max-width: 1280px; height: 100%; margin: 0 auto; display: flex; align-items: center; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.fv__copy { width: min(40%, 480px); }
.kicker { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-size: 18px; font-style: italic; color: var(--gold); letter-spacing: .06em; margin: 0 0 20px; line-height: 1.2; }
.kicker::after { content: ""; height: 1px; width: 48px; background: var(--gold-soft); }
h1 { font-family: var(--maru); font-weight: 900; font-size: clamp(30px, 3vw, 42px); line-height: 1.45; letter-spacing: .06em; margin: 0 0 20px; }
.fv__pre { display: block; font-size: .5em; font-weight: 700; color: var(--muted); letter-spacing: .1em; margin-bottom: .3em; }
h1 .accent { color: var(--green); }
.h1-star { display: inline-block; width: .5em; height: .5em; vertical-align: .55em; margin-left: .08em; color: var(--red); }
.fv__lead { font-size: 15px; line-height: 2; letter-spacing: .04em; color: var(--ink); margin: 0 0 32px; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; letter-spacing: .08em; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.text-link svg { width: 14px; height: 14px; color: var(--gold); transition: transform .2s; }
.text-link:hover svg { transform: translateX(3px); }
.fv__item { margin-top: 40px; display: grid; grid-template-columns: 76px minmax(0, 1fr) 16px; align-items: center; gap: 14px; max-width: 400px; padding: 10px 18px 10px 10px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; transition: border-color .2s; }
.fv__item:hover { border-color: var(--gold-soft); }
.fv__item img { width: 76px; height: 56px; object-fit: contain; background: var(--paper); border-radius: 8px; padding: 4px; }
.fv__item small { display: block; font-size: 11px; font-weight: 500; color: var(--gold); letter-spacing: .12em; }
.fv__item svg { width: 16px; height: 16px; color: var(--green); }
.fv__scroll { position: absolute; left: max(24px, env(safe-area-inset-left, 0px)); bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; }
.fv__scroll span { font-family: var(--serif); font-size: 12px; letter-spacing: .2em; color: var(--muted); writing-mode: vertical-rl; }
.fv__scroll::after { content: ""; width: 1px; height: 56px; background: linear-gradient(var(--gold) 50%, var(--line) 50%) 0 0 / 1px 200%; animation: line 2.4s ease-in-out infinite; }
@keyframes line { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
.fv__line, .ft__line { height: 12px; background: repeating-linear-gradient(90deg, var(--green) 0 40px, var(--ivory) 40px 44px, var(--red) 44px 84px, var(--ivory) 84px 88px); opacity: .85; }
.snow { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.snow i { position: absolute; top: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: .9; box-shadow: 0 0 6px rgba(184, 150, 74, .25); animation: fall var(--d) linear infinite; animation-delay: var(--dl); }
@keyframes fall { to { transform: translate3d(var(--x), 760px, 0); opacity: 0; } }
.twinkle { animation: tw 3.4s ease-in-out infinite; }
@keyframes tw { 50% { opacity: .35; transform: scale(.85); } }

/* ---------- セクション共通 ---------- */
.sec { position: relative; padding-block: 104px; }
.sec__in { max-width: 1120px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.sec-head { text-align: center; margin-bottom: 52px; }
.sec-head__en { font-family: var(--serif); font-size: 46px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; margin: 0; position: relative; display: inline-block; }
.sec-head__en::after { content: ""; position: absolute; right: -22px; top: -4px; width: 13px; height: 13px; background: var(--gold); clip-path: polygon(50% 0, 61.8% 31.6%, 95.6% 32.9%, 69.1% 53.9%, 78.2% 86.4%, 50% 67.6%, 21.8% 86.4%, 30.9% 53.9%, 4.4% 32.9%, 38.2% 31.6%); }
.sec-head h2 { font-size: 15px; font-weight: 500; letter-spacing: .14em; color: var(--muted); margin: 10px 0 0; }
.sec-head__lead { font-size: 15px; line-height: 2; letter-spacing: .06em; margin: 22px auto 0; max-width: 40em; }

/* ---------- キャンペーン概要 ---------- */
.sec--about { background: var(--white); }
.about { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.about__item { position: relative; background: var(--ivory); border: 1px solid var(--line); border-radius: 14px; padding: 40px 28px 34px; text-align: center; }
.about__icon { display: block; margin: 0 auto; width: 46px; height: 46px; color: var(--green); }
.about__label { display: inline-block; margin: 12px 0 0; font-size: 12px; letter-spacing: .14em; color: var(--gold); border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); padding: 2px 12px; line-height: 1.8; }
.about__title { font-family: var(--maru); font-weight: 700; font-size: 20px; line-height: 1.55; letter-spacing: .06em; margin: 14px 0 10px; }
.about__text { font-size: 14px; line-height: 1.9; color: var(--muted); margin: 0; text-align: left; }
.about__note { text-align: center; font-size: 13.5px; color: var(--muted); margin: 30px 0 0; }

/* ---------- メンバー ---------- */
.sec--member { background: linear-gradient(180deg, var(--ivory), var(--paper)); overflow: hidden; }
.sec-holly { position: absolute; width: 92px; aspect-ratio: 4 / 3; right: max(4%, 16px); top: 64px; transform: rotate(14deg); }
.members { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.mb { display: flex; flex-direction: column; gap: 10px; }
.mb__link { display: flex; flex-direction: column; flex: 1; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.mb__link[href]:hover { transform: translateY(-4px); border-color: var(--gold-soft); box-shadow: 0 16px 30px -18px rgba(80, 60, 30, .45); }
.mb__art { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: radial-gradient(circle at 50% 30%, #fffaf0 0, rgba(255, 250, 240, 0) 60%), linear-gradient(180deg, #f3ede3, var(--greige)); }
.mb__art::after { content: ""; position: absolute; inset: 8px 8px 0; border: 1px solid rgba(184, 150, 74, .4); border-bottom: 0; border-radius: 120px 120px 0 0; pointer-events: none; }
.mb__art img { position: absolute; left: 50%; top: 6%; height: 150%; width: auto; max-width: none; transform: translateX(-50%); transition: transform .4s; }
.mb__link[href]:hover .mb__art img { transform: translateX(-50%) scale(1.04); }
.mb__body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 18px; border-top: 1px solid var(--line); }
.mb__name { font-family: var(--maru); font-weight: 700; font-size: 17px; letter-spacing: .08em; }
.mb__msg { font-size: 12.5px; color: var(--muted); line-height: 1.6; text-align: center; }
.mb__msg:empty { display: none; }
.mb__more { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--green); letter-spacing: .06em; }
.mb__more svg { width: 13px; height: 13px; }
.mb__link:not([href]) { cursor: default; }
.mb__link:not([href]) .mb__more { color: var(--muted); font-weight: 500; }
.mb__x { align-self: center; font-size: 12px; color: var(--muted); text-decoration: none; letter-spacing: .02em; }
.mb__x:hover { color: var(--ink); text-decoration: underline; }

/* ---------- 商品購入 ---------- */
.sec--buy { background: var(--white); }
.buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; background: var(--ivory); border: 1px solid var(--line); border-radius: 20px; padding: 56px 56px; position: relative; }
.buy::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(184, 150, 74, .35); border-radius: 14px; pointer-events: none; }
.buy__photo { margin: 0; position: relative; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 55%, #fff 0, #fff 52%, rgba(255, 255, 255, 0) 53%); }
.buy__photo img { width: 88%; height: auto; filter: drop-shadow(0 16px 18px rgba(40, 30, 20, .22)); }
.sec-head__en--left { font-size: 38px; }
.buy__title { font-family: var(--maru); font-weight: 700; font-size: 26px; line-height: 1.5; letter-spacing: .06em; margin: 14px 0 12px; }
.buy__price { font-family: var(--serif); font-size: 34px; font-weight: 600; margin: 0 0 26px; line-height: 1.2; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.buy__price small { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--muted); }
.buy__price span { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--green); border: 1px solid var(--green); border-radius: 999px; padding: 1px 10px; letter-spacing: .06em; }
.buy__pick { font-size: 13px; letter-spacing: .1em; color: var(--muted); margin: 0 0 10px; }
.buy__colors { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.color-btn { display: grid; grid-template-columns: 56px minmax(0, 1fr) 16px; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 6px 22px 6px 6px; text-decoration: none; font-family: var(--maru); font-weight: 700; font-size: 16px; letter-spacing: .06em; transition: border-color .2s, background .2s, transform .2s; }
.color-btn img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.color-btn small { font-family: var(--sans); font-weight: 400; font-size: 12px; color: var(--muted); margin-left: .8em; }
.color-btn svg { width: 16px; height: 16px; color: var(--green); }
.color-btn:hover { border-color: var(--green); transform: translateX(3px); }
.buy__note { font-size: 12px; color: var(--muted); margin: 14px 0 0; }

/* ---------- FAQ ---------- */
.sec--faq { background: linear-gradient(180deg, var(--ivory), var(--paper)); }
.faq { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; align-items: end; }
.faq__list { display: grid; gap: 12px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: center; gap: 14px; padding: 20px 24px; font-weight: 700; font-size: 15px; letter-spacing: .04em; line-height: 1.6; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__q { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--gold); line-height: 1; }
.faq-item summary svg { width: 18px; height: 18px; color: var(--green); transition: transform .25s; }
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 24px 22px 68px; font-size: 14px; color: var(--muted); line-height: 1.95; }
.faq__art { margin: 0; }
.faq__art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 16px rgba(80, 60, 30, .18)); }

/* ---------- フッター（24karat共通フッター） ---------- */
.ft { background: #38513c; color: #f1ece2; font-family: "Inter", var(--sans); }
.ft__in { max-width: 1250px; margin: 0 auto; padding-block: 64px 72px; padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
.ft__logo { display: inline-block; }
.ft__logo img { display: block; width: 150px; height: auto; }
.ft__tagline { margin: 22px 0 0; font-size: 15px; letter-spacing: .02em; color: rgba(241, 236, 226, .72); }
.ft__sns { list-style: none; padding: 0; margin: 24px 0 0; display: flex; gap: 20px; }
.ft__sns a { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(241, 236, 226, .22); border-radius: 12px; color: #fff; transition: background .2s, border-color .2s; }
.ft__sns a:hover { background: rgba(255, 255, 255, .08); border-color: rgba(241, 236, 226, .5); }
.ft__sns svg { width: 22px; height: 22px; }
.ft__cols { display: grid; grid-template-columns: 1fr 1fr 1.15fr 1.4fr; gap: 32px; margin-top: 64px; }
.ft__h { margin: 0 0 18px; font-size: 16px; font-weight: 500; color: #f1ece2; }
.ft__h--sub { margin-top: 26px; }
.ft__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ft__col a, .ft__col address { font-size: 17px; font-style: normal; line-height: 1.6; color: rgba(241, 236, 226, .62); text-decoration: none; word-break: break-word; transition: color .2s; }
.ft__col a:hover { color: #fff; }
.ft__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(241, 236, 226, .16); }
.ft__bottom p { margin: 0; font-size: 15px; color: rgba(241, 236, 226, .62); }

.pc { display: inline; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 860px) {
  .members { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mb { grid-column: span 2; }
  .mb:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 900px) {
  .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fv__copy { width: min(44%, 420px); }
  .fv__media { width: 58%; }
  :root { --hd-h: 62px; }
  .hd__btn { display: none; }
  .hd__menu { display: grid; place-content: center; gap: 6px; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); cursor: pointer; }
  .hd__menu span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .25s; }
  .hd__menu[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .hd__menu[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--white); border-bottom: 1px solid var(--line); padding: 8px var(--gutter-r) 20px var(--gutter); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .nav a { padding: 14px 4px; border-bottom: 1px solid var(--paper); font-size: 15px; }
  .nav a::after { display: none; }
  .nav__shop { display: block; margin-top: 14px; text-align: center; border: 1px solid var(--green) !important; color: var(--green); border-radius: 999px; }
  .logo { font-size: 21px; }
  .buy { gap: 32px; padding: 44px 36px; }
  .faq { grid-template-columns: minmax(0, 1fr) 160px; gap: 28px; }
}
@media (max-width: 767px) {
  :root { --gutter: max(16px, env(safe-area-inset-left, 0px)); --gutter-r: max(16px, env(safe-area-inset-right, 0px)); }
  .notice { font-size: 11.5px; }
  .fv { height: auto; }
  .fv__media { position: relative; width: 100%; height: auto; aspect-ratio: 5 / 4; border-radius: 0 0 0 96px; }
  .grp { height: 94%; transform: translateX(-50%); }
  .holly { width: 60px; right: 6%; top: 6%; }
  .fv__in { display: block; height: auto; padding-block: 28px 56px; }
  .fv__copy { width: 100%; }
  .kicker { font-size: 15px; margin-bottom: 12px; }
  h1 { font-size: clamp(26px, 7.8vw, 34px); margin-bottom: 14px; }
  .fv__lead { font-size: 14px; margin-bottom: 24px; }
  .ctas { gap: 14px 22px; }
  .btn--main { flex: 1 1 auto; }
  .fv__item { margin-top: 26px; max-width: none; }
  .fv__scroll { display: none; }
  .sec { padding-block: 72px; }
  .sec-head { margin-bottom: 36px; }
  .sec-head__en { font-size: 36px; }
  .sec-head__lead { font-size: 14px; text-align: left; }
  .pc { display: none; }
  .about { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .about__item { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; text-align: left; padding: 22px 20px; }
  .about__icon { grid-row: span 3; width: 44px; height: 44px; align-self: start; margin: 4px 0 0; }
  .about__label { margin: 0; justify-self: start; }
  .about__title { font-size: 17px; margin: 8px 0 6px; }
  .about__title br { display: none; }
  .about__text { font-size: 13px; }
  .about__note { text-align: left; font-size: 12.5px; }

  .sec-holly { width: 60px; top: 40px; }
  .members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mb, .mb:nth-child(4) { grid-column: auto; }
  .mb:last-child { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
  .mb__body { padding: 12px 8px 14px; }
  .mb__name { font-size: 15.5px; }
  .mb__more { font-size: 11.5px; }

  .buy { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 32px 20px 28px; text-align: center; }
  .buy__photo { width: min(100%, 300px); margin: 0 auto; }
  .buy__title { font-size: 21px; }
  .buy__price { justify-content: center; font-size: 30px; }
  .color-btn { font-size: 15px; text-align: left; }

  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq__art { order: -1; width: 150px; margin: -12px auto 0; }
  .faq-item summary { padding: 16px 16px; gap: 10px; grid-template-columns: 24px minmax(0, 1fr) 16px; font-size: 14px; }
  .faq-item p { padding: 0 16px 18px 50px; font-size: 13px; }
  .ft__in { padding-block: 48px 56px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .ft__logo img { width: 128px; }
  .ft__tagline { font-size: 13.5px; }
  .ft__sns { gap: 14px; }
  .ft__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 20px; margin-top: 44px; }
  .ft__col:nth-child(n+3) { grid-column: 1 / -1; }
  .ft__h { font-size: 14px; margin-bottom: 12px; }
  .ft__col ul { gap: 10px; }
  .ft__col a, .ft__col address { font-size: 14.5px; }
  .ft__bottom { flex-direction: column; margin-top: 44px; }
  .ft__bottom p { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .snow { display: none; }
  .fv__scroll::after { animation: none; }
  .twinkle { animation: none; }
  .btn, .mb__link, .mb__art img, .color-btn, .nav { transition: none; }
}
@media (max-width: 1100px) and (min-width: 768px) {
  .fv__scroll { display: none; }
  .fv__lead .pc { display: none; }
}

/* =========================================================
   個別ページ（members/*.html）
   ========================================================= */
.crumb { background: var(--ivory); border-bottom: 1px solid var(--paper); }
.crumb ol { list-style: none; margin: 0 auto; max-width: 1280px; display: flex; flex-wrap: wrap; gap: 4px 0; padding-block: 10px; padding-left: var(--gutter); padding-right: var(--gutter-r); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.crumb li + li::before { content: "/"; margin: 0 .8em; color: var(--line); }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb [aria-current] { color: var(--ink); }

/* 個人FV：立ち絵1人を大きく */
.fv--member .fv__media { width: 52%; }
.solo { position: absolute; left: 50%; top: 7%; height: 150%; transform: translateX(-50%); z-index: 2; }
.solo img { display: block; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 12px 22px rgba(80, 60, 30, .2)); }
.fv__name { position: absolute; z-index: 3; right: 7%; top: 7%; margin: 0; font-family: var(--maru); font-weight: 900; font-size: clamp(40px, 5vw, 76px); letter-spacing: .1em; line-height: 1; color: rgba(255, 255, 255, .85); text-shadow: 0 2px 14px rgba(150, 120, 70, .18); writing-mode: vertical-rl; }
.fv--member .holly { right: auto; left: 9%; top: 7%; transform: rotate(-16deg); }
.fv--member .fv__copy { width: min(46%, 520px); }

/* プロフィール＋配信 */
.sec--profile { background: var(--white); }
.prof { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.prof__card { position: relative; background: var(--ivory); border: 1px solid var(--line); border-radius: 16px; padding: 36px 32px; }
.prof__card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(184, 150, 74, .3); border-radius: 11px; pointer-events: none; }
.prof__label { margin: 0; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold); }
.prof__name { margin: 6px 0 18px; font-family: var(--maru); font-weight: 900; font-size: 30px; letter-spacing: .1em; line-height: 1.3; }
.prof__intro { margin: 0 0 22px; font-size: 14.5px; line-height: 2; }
.prof__intro:empty::before { content: attr(data-empty); display: block; padding: 22px 12px; text-align: center; font-size: 13px; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; background: var(--white); }
.prof__x { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; text-decoration: none; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); }
.prof__x:hover { border-color: var(--ink); }
.prof__x svg { width: 13px; height: 13px; }
.sec-head--left { text-align: left; margin-bottom: 22px; }
.video__screen { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #f3ede3, var(--greige)); border: 1px solid var(--line); display: grid; place-items: center; }
.video__wait { display: grid; justify-items: center; gap: 6px; color: var(--muted); text-align: center; }
.video__wait svg { width: 56px; height: 56px; color: var(--gold); }
.video__wait b { font-family: var(--maru); font-size: 18px; color: var(--ink); letter-spacing: .08em; }
.video__wait small { font-size: 13px; }
.video__wait small:empty { display: none; }
.video__thumb { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; }
.video__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.video__thumb span { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.video__thumb span::before { content: ""; border-left: 20px solid var(--red); border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__open { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--muted); }

.sec--profile .video { text-align: center; }
.sns { margin: 28px auto 0; max-width: 880px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; }
.sns__label { margin: 0; font-size: 13px; letter-spacing: .1em; color: var(--muted); }
.sns__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sns__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: .04em; transition: border-color .2s, transform .2s; }
.sns__btn small { font-weight: 400; font-size: 12px; color: var(--muted); }
.sns__btn svg { width: 18px; height: 18px; }
.sns__btn svg use[href="#s-yt"] { color: #d23b33; }
.sns__btn:hover { border-color: var(--ink); transform: translateY(-1px); }

/* デジタルグッズ */
.sec--goods { background: linear-gradient(180deg, var(--ivory), var(--paper)); overflow: hidden; }
.goods { margin: 0 auto; max-width: 560px; aspect-ratio: 4 / 3; border-radius: 18px; background: var(--white); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.goods img { width: 100%; height: 100%; object-fit: contain; }
.slot { display: grid; justify-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; text-align: center; line-height: 1.7; }
.slot svg { width: 48px; height: 48px; color: var(--gold-soft); }

/* 参加方法 */
.sec--join { background: var(--white); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: none; }
.step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--ivory); border: 1px solid var(--line); border-radius: 16px; padding: 34px 26px 28px; }
.step + .step::before { content: ""; position: absolute; left: -19px; top: 50%; width: 14px; height: 14px; border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); transform: translateY(-50%) rotate(45deg); }
.step__no { margin: 0; font-family: var(--serif); font-size: 48px; font-weight: 600; color: var(--green); line-height: 1; }
.step__no span { display: block; font-size: 20px; font-style: italic; font-weight: 600; letter-spacing: .12em; color: var(--gold); margin-bottom: 4px; }
.step__icon { width: 46px; height: 46px; color: var(--green); margin: 18px 0 10px; }
.step__title { margin: 0 0 10px; font-family: var(--maru); font-weight: 700; font-size: 22px; letter-spacing: .06em; }
.step__text { margin: 0 0 18px; font-size: 15px; line-height: 1.9; color: var(--muted); text-align: left; flex: 1; }
.step__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--green); text-decoration: none; letter-spacing: .06em; }
.step__link svg { width: 13px; height: 13px; }

/* 商品紹介（個別ページは詳細つき） */
.buy__points { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.buy__points li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.8; }
.buy__points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 10px; background: var(--gold); clip-path: polygon(50% 0, 61.8% 31.6%, 95.6% 32.9%, 69.1% 53.9%, 78.2% 86.4%, 50% 67.6%, 21.8% 86.4%, 30.9% 53.9%, 4.4% 32.9%, 38.2% 31.6%); }
.buy__points b { color: var(--green); }
.buy__spec { margin: 0 0 14px; font-size: 13px; color: var(--muted); }

/* 受け取り方 */
.sec--receive { background: linear-gradient(180deg, var(--ivory), var(--paper)); }
.recv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.recv__card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 32px 30px 30px; display: flex; flex-direction: column; }
.recv__no { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--green); }
.recv__no span { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--gold); border: 1px solid var(--gold-soft); border-radius: 999px; padding: 1px 12px; letter-spacing: .1em; }
.recv__title { margin: 12px 0 10px; font-family: var(--maru); font-weight: 700; font-size: 20px; letter-spacing: .06em; }
.recv__text { margin: 0 0 22px; font-size: 14px; line-height: 1.95; flex: 1; }
.recv__text em { font-style: normal; font-weight: 700; color: var(--red); }
.recv__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--sm { min-height: 48px; padding: 0 24px; font-size: 15px; }
.btn--sm small { font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--muted); }
.btn[aria-disabled="true"] { background: var(--paper); color: var(--muted); box-shadow: none; cursor: default; transform: none; }
.tip { margin-top: 24px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; background: var(--white); border: 1px dashed var(--gold-soft); border-radius: 16px; padding: 24px 28px; }
.tip__label { margin: 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: #fff; background: var(--gold); border-radius: 999px; padding: 2px 16px; }
.tip__title { margin: 0 0 6px; font-family: var(--maru); font-weight: 700; font-size: 17px; }
.tip__text { margin: 0; font-size: 14px; line-height: 1.9; color: var(--muted); }
.tip__text b { color: var(--ink); }

/* ほかのメンバー */
.sec--others { background: var(--white); }
.others { list-style: none; padding: 0; margin: 0 auto; max-width: 860px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.om { display: block; text-decoration: none; text-align: center; }
.om__art { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: linear-gradient(180deg, #f3ede3, var(--greige)); border: 1px solid var(--line); transition: border-color .2s, transform .25s; }
.om__art img { position: absolute; left: 50%; top: 8%; height: 230%; width: auto; max-width: none; transform: translateX(-50%); }
.om:hover .om__art { border-color: var(--gold); transform: translateY(-3px); }
.om__name { display: block; margin-top: 10px; font-family: var(--maru); font-weight: 700; font-size: 15px; letter-spacing: .06em; }
.others__back { text-align: center; margin: 40px 0 0; }

@media (max-width: 900px) {
  .prof { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 520px; margin: 0 auto; }
  .step + .step::before { left: 50%; top: -17px; transform: translateX(-50%) rotate(135deg); }
}
@media (max-width: 767px) {
  .fv--member .fv__media { width: 100%; aspect-ratio: 1; }
  .fv--member .fv__copy { width: 100%; }
  .solo { height: 160%; top: 6%; }
  .fv__name { font-size: 34px; right: 5%; top: 6%; }
  .fv--member .holly { left: 6%; top: 5%; }
  .prof__card { padding: 28px 22px; }
  .prof__name { font-size: 25px; }
  .step { padding: 28px 20px 24px; }
  .step__no { font-size: 42px; }
  .step__no span { font-size: 17px; }
  .step__title { font-size: 20px; }
  .step__text { font-size: 14.5px; }
  .recv { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .recv__card { padding: 26px 20px 24px; }
  .recv__btns .btn { flex: 1 1 140px; }
  .tip { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; gap: 12px; }
  .tip__label { justify-self: start; }
  .others { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 個別ページ：2枚目の絵を「枠の後ろからのぞく」形で入れる ----------
   .peek__art の下端＝すぐ下の枠の上端。絵は上（頭）を基準に、幅×5:3の範囲だけ見せる。
   どの絵も高さが幅の0.6倍以上あるので、下にすき間ができない（下側は枠の後ろに隠れる）。 */
.peek__art { position: relative; z-index: 0; width: var(--pw, 100%); aspect-ratio: var(--pa, 5 / 3); overflow: hidden; margin-inline: auto; }
.peek__art img { display: block; width: 100%; height: auto; }
.peek > :last-child { position: relative; z-index: 1; }
.peek--sm { margin-top: 24px; }
.peek--sm .peek__art { width: calc(230px * var(--pw-n, 1)); margin-left: auto; margin-right: 40px; }
.peek--sm .tip { margin-top: 0; }

/* デジタルグッズ：スマホ壁紙をスマホの枠で見せる */
.goods-show { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 420px); justify-content: center; align-items: end; gap: 56px; }
.peek--goods { width: 100%; }
.phone { margin: 0; position: relative; aspect-ratio: 9 / 16; border-radius: 34px; padding: 10px; background: #2b2826; box-shadow: 0 24px 40px -24px rgba(40, 30, 20, .55); }
.phone::before { content: ""; position: absolute; z-index: 2; top: 18px; left: 50%; width: 30%; height: 16px; margin-left: -15%; border-radius: 999px; background: #2b2826; }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 25px; }
.phone .slot { height: 100%; display: grid; place-content: center; border-radius: 25px; background: var(--white); }
.goods-info { padding-bottom: 12px; }
.goods-info__label { margin: 0; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold); }
.goods-info__title { margin: 8px 0 16px; font-family: var(--maru); font-weight: 900; font-size: 26px; line-height: 1.5; letter-spacing: .06em; }
.goods-info__text { margin: 0 0 16px; font-size: 14.5px; line-height: 2; }
.goods-info__meta { list-style: none; padding: 14px 0; margin: 0 0 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 4px; font-size: 13.5px; }
.goods-info__meta li::before { content: "・"; color: var(--gold); }
.goods-info__note { margin: 0 0 22px; font-size: 12px; color: var(--muted); }

@media (max-width: 860px) {
  .goods-show { grid-template-columns: minmax(0, 1fr); gap: 32px; justify-items: center; }
  .peek--goods { width: min(100%, 280px); }
  .goods-info { width: 100%; max-width: 520px; padding-bottom: 0; }
}
@media (max-width: 767px) {
  .peek--goods { width: min(78%, 260px); }
  .phone { border-radius: 28px; padding: 8px; }
  .phone img, .phone .slot { border-radius: 21px; }
  .phone::before { top: 14px; height: 13px; }
  .goods-info__title { font-size: 21px; }
  .goods-info .btn { width: 100%; }
  .peek--sm .peek__art { width: calc(170px * var(--pw-n, 1)); margin-right: 22px; }
}

/* デジタルグッズ：スマホ枠だけ */
.goods-phone { width: 100%; }
@media (max-width: 860px) { .goods-phone { width: min(100%, 280px); } }
@media (max-width: 767px) { .goods-phone { width: min(78%, 260px); } }

/* ---------- レビュー：動画の左に全身の立ち絵 ----------
   FVの立ち絵が右なので、ここは左。全身を見せるので、どの幅でも切れ目や余白が出ない。
   PC・タブレット：左に立ち絵、右に動画＋公式SNS（下端そろえ）。
   スマホ：立ち絵を小さくして、動画の枠の上に立たせる。 */
.rv { display: grid; grid-template-columns: auto minmax(0, 640px); justify-content: center; align-items: end; gap: 0 44px; }
.rv__art { margin: 0; }
.rv__art img { display: block; height: clamp(340px, 42vw, 540px); width: auto; max-width: none; filter: drop-shadow(0 14px 16px rgba(80, 60, 30, .18)); }
.rv__main { min-width: 0; }
.rv__main .sns { margin-top: 24px; }
@media (max-width: 767px) {
  .rv { grid-template-columns: minmax(0, 1fr); }
  .rv__art { justify-self: start; margin-left: 12px; margin-bottom: -1px; position: relative; z-index: 0; }
  .rv__art img { height: 170px; filter: drop-shadow(0 6px 6px rgba(80, 60, 30, .15)); }
  .rv__main { position: relative; z-index: 1; }
}
.step__text, .recv__text, .goods-info__text { text-wrap: pretty; }

/* FV：矢印はメインボタンだけにする（テキストリンク・対象商品カードは矢印なし） */
.fv .text-link svg, .fv__item > svg { display: none; }
.fv .text-link { padding-bottom: 3px; }
.fv__item { grid-template-columns: 76px minmax(0, 1fr); padding-right: 22px; max-width: 380px; }
.fv__item span { white-space: nowrap; }
@media (max-width: 1100px) { .fv__item span { white-space: normal; } }

/* ---------- 受け取り方「Point」：絵は枠の右下（下端は枠の線で切る）、文字は左寄せ ---------- */
.tip { --ah: 180px; position: relative; overflow: hidden; min-height: calc(var(--ah) + 12px); padding-right: calc(var(--aw) + 48px); }
.tip__art { position: absolute; right: 28px; bottom: 0; width: var(--aw); height: var(--ah); overflow: hidden; }
.tip__art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 8px rgba(80, 60, 30, .12)); }
.tip__body { min-width: 0; }

/* ---------- スマホ：レビューは「動画」の下に「公式SNS（左寄せ）＋立ち絵（右）」 ---------- */
@media (max-width: 767px) {
  .rv { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "video video" "sns art"; align-items: end; column-gap: 12px; }
  .rv__main { display: contents; }
  .rv__main .video { grid-area: video; }
  .rv__main .sns { grid-area: sns; align-self: center; margin: 20px 0 0; display: grid; justify-items: start; gap: 10px; }
  .rv__main .sns__list { flex-direction: column; align-items: flex-start; }
  .rv__art { grid-area: art; justify-self: end; margin: 16px 4px 0 0; }
  .rv__art img { height: 200px; }

  .tip { --ah: 140px; padding-right: 20px; padding-bottom: var(--ah); min-height: 0; }
  .tip__art { right: 20px; width: calc(var(--aw) * .78); }
}

/* ---------- 動き（main.js が .anim を付ける。JSが動かない環境では普通に表示） ---------- */
.has-anim .anim { opacity: 0; }
.has-anim .anim.is-in { opacity: 1; animation-delay: var(--d, 0ms); animation-fill-mode: both; }
.has-anim .anim--pop.is-in { animation: pop .62s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0ms) both; }
.has-anim .anim--rise.is-in { animation: rise .7s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms) both; }
@keyframes pop { 0% { opacity: 0; transform: translateY(18px) scale(.82); } 70% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
/* FVの立ち絵は位置合わせの transform を持つので、それを残したまま弾ませる */
.has-anim .fv .grp.anim--pop.is-in { animation-name: pop-x46; }
.has-anim .fv .solo.anim--pop.is-in { animation-name: pop-x50; }
@keyframes pop-x46 { 0% { opacity: 0; transform: translateX(-46%) translateY(24px) scale(.86); } 70% { opacity: 1; } 100% { opacity: 1; transform: translateX(-46%); } }
@keyframes pop-x50 { 0% { opacity: 0; transform: translateX(-50%) translateY(24px) scale(.86); } 70% { opacity: 1; } 100% { opacity: 1; transform: translateX(-50%); } }
@media (max-width: 767px) {
  .has-anim .fv .grp.anim--pop.is-in { animation-name: pop-x50; }
}
@media (prefers-reduced-motion: reduce) { .has-anim .anim { opacity: 1 !important; animation: none !important; } }

/* =========================================================
   FVキャッチ：強弱・はみ出し・吹き出し・1文字ずつ出る動き
   ========================================================= */
.bubble { margin: 0 0 18px; }
.bubble span { position: relative; display: inline-block; padding: 10px 22px; border-radius: 999px; background: var(--white); border: 1.5px solid var(--ink);
  font-family: var(--maru); font-weight: 700; font-size: 16px; letter-spacing: .08em; line-height: 1.4; transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--gold-soft); }
.bubble span::after { content: ""; position: absolute; right: -11px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--white);
  border-right: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink); transform: rotate(45deg) skew(10deg, 10deg); }
.catch { margin: 0 0 22px; font-family: var(--maru); font-weight: 900; line-height: 1.25; letter-spacing: .04em; font-size: clamp(28px, 2.7vw, 40px); }
.catch__l1 { display: block; white-space: nowrap; }
.catch__em { color: var(--red); font-size: 1.12em; }
.catch__sm { font-size: .62em; margin-left: .06em; }
.catch__l2 { position: relative; display: inline-block; margin: .12em 0 0 .7em; font-size: 1.85em; color: var(--green); letter-spacing: .06em; white-space: nowrap; transform: rotate(-4deg); transform-origin: left center; }
.catch__wave { position: absolute; left: .1em; right: .2em; bottom: -.18em; width: calc(100% - .3em); height: .26em; color: var(--gold); }
.fv__lead { font-size: 15.5px; }

/* 動き（読み込み時）：1文字ずつ → 「もらおう！」がぽん → 波線がすっと引かれる → 吹き出しがぴょこ */
.has-anim .catch .ch { display: inline-block; opacity: 0; animation: chr .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 45ms + 150ms); }
@keyframes chr { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }
.has-anim .catch__l2 { animation: boing .8s cubic-bezier(.34, 1.7, .64, 1) both; animation-delay: var(--l2d, 800ms); }
@keyframes boing { 0% { opacity: 0; transform: rotate(-4deg) scale(.3); } 60% { opacity: 1; transform: rotate(-7deg) scale(1.08); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } }
.has-anim .catch__wave path { stroke-dasharray: 240; stroke-dashoffset: 240; animation: draw .7s ease-out both; animation-delay: calc(var(--l2d, 800ms) + 450ms); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.has-anim .bubble span { animation: pyoko .7s cubic-bezier(.34, 1.8, .64, 1) both; animation-delay: calc(var(--l2d, 800ms) + 650ms); }
@keyframes pyoko { 0% { opacity: 0; transform: rotate(-3deg) translateY(10px) scale(.6); } 100% { opacity: 1; transform: rotate(-3deg); } }

@media (max-width: 767px) {
  .bubble { margin-bottom: 14px; }
  .bubble span { font-size: 14px; padding: 8px 18px; }
  .bubble span::after { right: auto; left: 70%; top: -9px; margin-top: 0; transform: rotate(-45deg) skew(10deg, 10deg); }
  .catch { font-size: clamp(25px, 7.4vw, 32px); }
  .catch__l2 { font-size: 1.7em; margin-left: .5em; }
  .fv__lead { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .has-anim .catch .ch, .has-anim .catch__l2, .has-anim .bubble span, .has-anim .catch__wave path { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
}

/* =========================================================
   FV（情報を絞った版）：キャッチ2行だけを大きく。1行目は1文字ずつ色を変える
   ========================================================= */
.fv__copy--min { position: relative; width: min(46%, 640px); }
.fv--member .fv__copy--min { width: min(48%, 680px); }
.catch2 { margin: 0; font-family: var(--maru); font-weight: 900; line-height: 1.32; letter-spacing: .03em; font-size: clamp(24px, min(3.1vw, calc((100vw - min(60vw, 1100px) - max(0px, (100vw - 1280px) / 2) - 90px) / 10.6)), 50px); color: var(--ink); }
.fv--member .catch2 { font-size: clamp(26px, min(3.9vw, calc((100vw - min(52vw, 1000px) - max(0px, (100vw - 1280px) / 2) - 90px) / 10.6)), 62px); }
.catch2__l1, .catch2__l2 { display: block; white-space: nowrap; }
.catch2 .ch { display: inline-block; }
.catch2__l1 .ch:nth-child(5n+1) { color: #b5544a; }
.catch2__l1 .ch:nth-child(5n+2) { color: #c98a3c; }
.catch2__l1 .ch:nth-child(5n+3) { color: #4f7a62; }
.catch2__l1 .ch:nth-child(5n+4) { color: #6f8fb0; }
.catch2__l1 .ch:nth-child(5n+5) { color: #a8473e; }
.catch2__l1 .ch:nth-child(3n) { transform: translateY(-.05em) rotate(-3deg); }
.catch2__l1 .ch:nth-child(4n+2) { transform: translateY(.04em) rotate(2deg); }
/* キャッチのまわりに散らす飾り */
.fvd { position: absolute; pointer-events: none; }
.fvd--holly { width: 78px; aspect-ratio: 4 / 3; left: -6px; top: -78px; transform: rotate(-14deg); }
.fvd--s1 { width: 22px; aspect-ratio: 1; right: 6%; top: -48px; color: var(--gold); }
.fvd--s2 { width: 18px; aspect-ratio: 1; right: 0; bottom: -40px; color: var(--gold-soft); }
.fvd--s3 { width: 14px; aspect-ratio: 1; left: 34%; bottom: -46px; color: var(--red); }
/* 動き：1文字ずつぽん → 2行目 */
.has-anim .catch2 .ch { animation: chpop .55s cubic-bezier(.34, 1.6, .64, 1) both; animation-delay: calc(var(--i) * 55ms + 150ms); }
@keyframes chpop { 0% { opacity: 0; translate: 0 .5em; scale: .4; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
.has-anim .fvd { animation: pop .6s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: 1.1s; }
@media (max-width: 1100px) and (min-width: 768px) {
  .fvd--holly { width: 60px; top: -64px; }
}
@media (max-width: 767px) {
  .fv__copy--min, .fv--member .fv__copy--min { width: 100%; padding-block: 34px 6px; }
  .catch2, .fv--member .catch2 { font-size: min(8.4vw, 40px); text-align: center; }
  .fvd--holly { width: 54px; top: -2px; left: 0; }
  .fvd--s1 { top: 4px; right: 4%; }
  .fvd--s2 { bottom: -18px; right: 10%; }
  .fvd--s3 { bottom: -22px; left: 18%; }
}
@media (prefers-reduced-motion: reduce) { .has-anim .catch2 .ch, .has-anim .fvd { animation: none !important; opacity: 1 !important; } }


/* 横に広い画面では、ビジュアル面の幅に上限をつけてキャッチの場所を確保 */
@media (min-width: 768px) {
  .fv .fv__media { width: min(60%, 1100px); }
  .fv--member .fv__media { width: min(52%, 1000px); }
}

/* =========================================================
   FV（中間版）：吹き出し＋大きいキャッチ＋1行＋ボタン1つ。左側にクリスマスのイラストを散らす
   ========================================================= */
.fv__copy--mid { position: relative; z-index: 2; width: min(46%, 640px); }
.fv--member .fv__copy--mid { width: min(48%, 680px); }
.fv__copy--mid .bubble { margin-bottom: 16px; }
.fv__copy--mid .catch2 { margin-bottom: 20px; }
.fv__copy--mid .fv__lead { margin: 0 0 26px; font-size: 16px; }
.fv__scatter { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* 装飾は6つに絞って大きく。外側(.xs)が「ぽん」と出て、中のsvgがそれぞれの動きを続ける */
.xs { position: absolute; display: block; }
.xs svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgba(80, 60, 30, .12)); }
.xs--1 { width: 92px; height: 92px; left: 2.5%; top: 8%; }
.xs--2 { width: 70px; height: 70px; left: 33%; top: 4%; }
.xs--3 { width: 66px; height: 66px; left: 1.5%; top: 55%; }
.xs--4 { width: 96px; height: 96px; left: 6%; bottom: 3%; }
.xs--5 { width: 68px; height: 68px; left: 39%; bottom: 8%; }
.xs--6 { width: 48px; height: 48px; left: 22%; top: 9%; }
.fv--member .xs--2 { left: 36%; } .fv--member .xs--5 { left: 41%; }
/* それぞれの動き */
.xs--1 svg { animation: hop 2.6s cubic-bezier(.3, 0, .3, 1) infinite; transform-origin: 50% 100%; }
.xs--2 svg { animation: swing 3.2s ease-in-out infinite; transform-origin: 50% 0; }
.xs--3 svg { animation: ring 3s ease-in-out infinite; transform-origin: 50% 10%; }
.xs--4 svg { animation: sway 4s ease-in-out infinite; transform-origin: 50% 100%; }
.xs--5 svg { animation: swing 3.6s ease-in-out infinite -1s; transform-origin: 50% 0; }
.xs--6 svg { animation: spin 9s linear infinite; }
@keyframes hop { 0%, 55%, 100% { transform: translateY(0) scale(1, 1); } 62% { transform: translateY(0) scale(1.12, .86); } 75% { transform: translateY(-22px) scale(.94, 1.08); } 88% { transform: translateY(0) scale(1.06, .94); } }
@keyframes swing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes ring { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(-16deg); } 72% { transform: rotate(14deg); } 78% { transform: rotate(-10deg); } 84% { transform: rotate(6deg); } 90% { transform: rotate(0); } }
@keyframes sway { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.04); } }
@keyframes spin { to { transform: rotate(360deg); } }
.has-anim .xs { animation: pop .65s cubic-bezier(.34, 1.56, .64, 1) both; }
.has-anim .xs--1 { animation-delay: 1.0s; } .has-anim .xs--2 { animation-delay: 1.12s; } .has-anim .xs--3 { animation-delay: 1.24s; }
.has-anim .xs--4 { animation-delay: 1.36s; } .has-anim .xs--5 { animation-delay: 1.48s; } .has-anim .xs--6 { animation-delay: 1.6s; }
/* キャッチ：出たあとも数秒おきに1文字ずつ「ぴょん」とウェーブ */
.catch2 .ch { position: relative; }
.has-anim .catch2__l1 .ch, .has-anim .catch2__l2 .ch { animation: chpop .55s cubic-bezier(.34, 1.6, .64, 1) both, wave 5s ease-in-out infinite; animation-delay: calc(var(--i) * 55ms + 150ms), calc(var(--i) * 70ms + 2.4s); }
@keyframes wave { 0%, 14%, 100% { top: 0; } 6% { top: -.16em; } }
@media (max-width: 1100px) and (min-width: 768px) { .xs { scale: .78; } .xs--2, .xs--5 { display: none; } }
@media (max-width: 767px) {
  .fv__scatter { top: auto; height: 50%; }
  .xs { scale: .62; }
  .xs--1 { left: -2%; top: 0; } .xs--2 { left: auto; right: 0; top: 2%; } .xs--3, .xs--6 { display: none; }
  .xs--4 { left: -2%; bottom: 0; } .xs--5 { left: auto; right: 2%; bottom: 2%; }
}
@media (prefers-reduced-motion: reduce) { .has-anim .xs, .xs svg, .has-anim .catch2 .ch { animation: none !important; opacity: 1 !important; } }
@media (max-width: 1100px) and (min-width: 768px) { .fv__copy--mid .catch2 { margin-bottom: 16px; } }
@media (max-width: 767px) {
  .fv__copy--mid, .fv--member .fv__copy--mid { width: 100%; padding-block: 8px 0; text-align: center; }
  .fv__copy--mid .bubble span::after { left: 50%; }
  .fv__copy--mid .catch2 { text-align: center; }
  .fv__copy--mid .fv__lead { font-size: 14px; }
  .fv__copy--mid .btn { width: 100%; }
}
@media (max-width: 767px) {
  .fv__copy--mid, .fv--member .fv__copy--mid { padding-bottom: 64px; }
  .fv .xs--2, .fv--member .xs--2 { left: auto; right: -1%; top: 0; }
  .fv .xs--5, .fv--member .xs--5 { left: auto; right: 4%; bottom: 0; }
  .fv .xs--4 { left: 2%; bottom: -4px; }
}
@media (max-width: 767px) {
  .fv .xs--1, .fv--member .xs--1 { left: 24%; top: auto; bottom: -2px; }
  .fv .xs--2, .fv--member .xs--2 { right: 24%; top: auto; bottom: 6px; }
}
/* 「を」は助詞なので色をつけず、チャコールで落ち着かせる */
.catch2__l1 .ch:last-child { color: var(--ink) !important; }

/* =========================================================
   FV右側：奥行き（奥のシルエット → キャラ → 手前のぼけ）
   ========================================================= */
.fv__media { --px: 0; --py: 0; }
.dp { position: absolute; inset: 0; pointer-events: none; }
.dp--back { z-index: 0; transform: translate3d(calc(var(--px) * -8px), calc(var(--py) * -6px), 0); }
.dp--front { z-index: 3; transform: translate3d(calc(var(--px) * 22px), calc(var(--py) * 16px), 0); }
.fv .grp, .fv .solo { translate: calc(var(--px) * 6px) calc(var(--py) * 4px); }
.fv .grp img, .fv .solo img { filter: drop-shadow(0 22px 26px rgba(80, 60, 30, .28)) drop-shadow(0 4px 6px rgba(80, 60, 30, .15)); }
.dp__snowman, .dp__tree { position: absolute; fill: #fff; }
.dp__snowman { width: 34%; left: 4%; bottom: -4%; opacity: .55; }
.dp__tree { width: 30%; right: 3%; top: 16%; opacity: .5; }
.fv--member .dp__snowman { width: 40%; left: 2%; }
.dp__glitter { position: absolute; inset: 0; opacity: .7;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .95) 0 1.2px, transparent 1.8px), radial-gradient(circle, rgba(201, 162, 78, .55) 0 1px, transparent 1.6px);
  background-size: 37px 41px, 53px 47px; background-position: 0 0, 19px 23px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
/* 手前のぼけ（雪玉） */
.bk { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, #fbf8f3 45%, #e9e2d5 100%); box-shadow: 0 10px 30px rgba(80, 60, 30, .18); }
.bk--1 { width: 150px; height: 150px; left: -40px; bottom: -36px; filter: blur(7px); }
.bk--2 { width: 92px; height: 92px; right: 6%; bottom: 10%; filter: blur(5px); }
.bk--3 { width: 62px; height: 62px; right: 22%; top: 4%; filter: blur(3px); }
.bk--4 { width: 38px; height: 38px; left: 18%; top: 30%; filter: blur(2px); }
.bk--orn { width: 120px; height: 120px; border-radius: 0; background: none; box-shadow: none; right: -28px; top: 46%; filter: blur(4px); opacity: .9; rotate: -14deg; }
/* 手前の銀色の粒（ピントが合っている） */
.bd { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, #d9d9de 40%, #8f8f99 100%); box-shadow: 0 2px 3px rgba(0, 0, 0, .18); }
.bd--1 { left: 14%; top: 18%; } .bd--2 { left: 26%; bottom: 22%; width: 9px; height: 9px; } .bd--3 { right: 14%; top: 22%; width: 16px; height: 16px; }
.bd--4 { right: 30%; bottom: 6%; } .bd--5 { left: 8%; top: 62%; width: 8px; height: 8px; } .bd--6 { right: 6%; top: 70%; width: 10px; height: 10px; } .bd--7 { left: 40%; top: 8%; width: 9px; height: 9px; }
/* 手前のものはゆっくり漂う */
.bk--2, .bk--3, .bk--orn, .bd { animation: drift 7s ease-in-out infinite; }
.bk--3, .bd--2, .bd--5 { animation-duration: 9s; animation-direction: reverse; }
@keyframes drift { 50% { transform: translateY(-10px); } }
@media (max-width: 767px) {
  .bk--1 { width: 110px; height: 110px; } .bk--2 { width: 64px; height: 64px; } .bk--orn { width: 84px; height: 84px; right: -20px; }
  .dp__snowman { width: 38%; } .dp__tree { width: 32%; }
}
@media (prefers-reduced-motion: reduce) { .bk, .bd { animation: none; } .dp { transform: none; } .fv .grp, .fv .solo { translate: none; } }
.fv__name { z-index: 4; }
.fv .holly { z-index: 4; }
/* 奥行きを見せるため、ビジュアル面は白が映えるセージグリーンに */
.fv .fv__media { background: radial-gradient(ellipse at 50% 38%, #e9f0ea 0, rgba(233, 240, 234, 0) 60%), linear-gradient(180deg, #d5e2d8 0%, #bfd2c5 100%); }
.fv .fv__media::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 64px); }
.dp__snowman { opacity: .75; } .dp__tree { opacity: .6; }
.fv__name { color: rgba(255, 255, 255, .92); text-shadow: 0 2px 14px rgba(47, 74, 60, .25); }

/* =========================================================
   FVキャッチ（書体ミックス版）
   筆記体の英字 → 吹き出し → 「限定」スタンプ＋カラフルなデジタルグッズ＋小さい「を」
   → いちばん大きい「もらおう！」＋波線 → 字間を広げたセリフの英字
   ========================================================= */
.script { position: relative; display: inline-block; margin: 0 0 4px; font-family: "Dancing Script", var(--serif); font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--gold); transform: rotate(-6deg); transform-origin: left bottom; }
.script__line { position: absolute; left: 4%; bottom: -8px; width: 96%; height: 10px; color: var(--gold-soft); }
.fv__copy--mid .bubble { margin: 10px 0 14px; }
.catch3 { margin: 0 0 22px; font-family: var(--maru); font-weight: 900; line-height: 1.15; }
.catch3 .catch2 { margin: 0; font-size: inherit; display: inline; }
.catch3__l1 { display: flex; align-items: center; gap: .18em; white-space: nowrap; font-size: var(--c1); }
.catch3__stamp { flex: none; display: grid; place-items: center; width: 2.25em; height: 2.25em; border-radius: 50%; background: var(--red); color: #fff; font-size: .62em; letter-spacing: .04em; transform: rotate(-10deg); box-shadow: 0 0 0 3px var(--ivory), 0 0 0 4.5px rgba(168, 71, 62, .55); }
.catch3__wo { font-size: .6em; color: var(--ink); align-self: flex-end; margin-bottom: .1em; }
.catch3__l2 { position: relative; display: inline-block; font-size: calc(var(--c1) * 1.55); color: var(--ink); letter-spacing: .04em; margin: .02em 0 0 .25em; white-space: nowrap; }
.catch3__l2 .ch { color: var(--ink); }
.catch3__wave { position: absolute; left: .1em; bottom: -.16em; width: calc(100% - .5em); height: .22em; color: var(--red); opacity: .85; }
.catch3__en { display: block; margin-top: 14px; font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .5em; text-transform: uppercase; color: var(--green); }
.catch3 { --c1: clamp(24px, min(3vw, calc((100vw - min(60vw, 1100px) - max(0px, (100vw - 1280px) / 2) - 90px) / 8.4)), 46px); }
.fv--member .catch3 { --c1: clamp(26px, min(3.6vw, calc((100vw - min(52vw, 1000px) - max(0px, (100vw - 1280px) / 2) - 90px) / 8.4)), 56px); }
/* 「デジタルグッズ」の文字色は前と同じ5色ローテーション（.catch2__l1 用の指定を流用） */
.catch3__goods .ch:nth-child(5n+1) { color: #b5544a; } .catch3__goods .ch:nth-child(5n+2) { color: #c98a3c; } .catch3__goods .ch:nth-child(5n+3) { color: #4f7a62; }
.catch3__goods .ch:nth-child(5n+4) { color: #6f8fb0; } .catch3__goods .ch:nth-child(5n+5) { color: #a8473e; }
.catch3__goods .ch:nth-child(3n) { transform: translateY(-.05em) rotate(-3deg); } .catch3__goods .ch:nth-child(4n+2) { transform: translateY(.04em) rotate(2deg); }
/* 動き */
.has-anim .script { animation: rise .8s cubic-bezier(.22, 1, .36, 1) .05s both; }
.has-anim .script__line path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw .8s ease-out .5s both; }
.has-anim .catch3__stamp { animation: stamp .55s cubic-bezier(.34, 1.8, .64, 1) .25s both; }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-30deg) scale(2.2); } 100% { opacity: 1; transform: rotate(-10deg) scale(1); } }
.has-anim .catch3__wave path { stroke-dasharray: 240; stroke-dashoffset: 240; animation: draw .7s ease-out 1.5s both; }
.has-anim .catch3__en { animation: rise .8s cubic-bezier(.22, 1, .36, 1) 1.7s both; }
.has-anim .catch3__wo { animation: rise .5s ease-out .85s both; }
@media (max-width: 767px) {
  .script { font-size: 28px; transform: rotate(-5deg); transform-origin: center bottom; }
  .catch3 { --c1: min(7.6vw, 34px); }
  .fv--member .catch3 { --c1: min(7.6vw, 34px); }
  .catch3__l1 { justify-content: center; }
  .catch3__l2 { margin-left: 0; }
  .catch3__en { font-size: 12px; letter-spacing: .4em; }
}
@media (prefers-reduced-motion: reduce) { .has-anim .script, .has-anim .catch3__stamp, .has-anim .catch3__en, .has-anim .catch3__wo { animation: none !important; } .has-anim .catch3 path { animation: none !important; stroke-dashoffset: 0 !important; } }
.catch3 .ch { position: relative; display: inline-block; }
.has-anim .catch3 .ch { animation: chpop .55s cubic-bezier(.34, 1.6, .64, 1) both, wave 5s ease-in-out infinite; animation-delay: calc(var(--i) * 55ms + 150ms), calc(var(--i) * 70ms + 2.6s); }
@media (prefers-reduced-motion: reduce) { .has-anim .catch3 .ch { animation: none !important; } }
@media (min-width: 768px) {
  .fv .xs--1 { top: 3%; left: 1.5%; width: 78px; height: 78px; }
  .fv .xs--3 { top: auto; bottom: 26%; left: 1%; width: 56px; height: 56px; }
}
.catch3__en { margin-top: 20px; }

/* =========================================================
   FV（上品版）：明朝のキャッチ → 太字の名前 → 小さな情報 → ボタン。右上に丸バッジ
   ========================================================= */
.fv:has(.fv__copy--el) .fv__scatter { display: none; }
.fv__copy--el { position: relative; z-index: 2; width: min(44%, 600px); }
.fv--member .fv__copy--el { width: min(46%, 640px); }
.el-catch { margin: 0 0 30px; font-family: "Shippori Mincho", serif; font-weight: 600; color: #8a6a3a; line-height: 1.5; letter-spacing: .08em; font-size: clamp(28px, min(3.3vw, calc((100vw - min(52vw, 1000px) - max(0px, (100vw - 1280px) / 2) - 100px) / 10)), 54px); }
.el-catch__l { display: block; white-space: nowrap; }
.el-name { margin: 0 0 12px; font-family: var(--maru); font-weight: 700; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: .08em; color: var(--ink); }
.el-info { margin: 0 0 30px; display: grid; gap: 6px; }
.el-info div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; font-size: 14.5px; line-height: 1.7; }
.el-info dt { color: var(--muted); }
.el-info dt::after { content: ""; display: inline-block; width: 10px; height: 1px; background: var(--line); vertical-align: middle; margin-left: 8px; }
.el-info dd { margin: 0; font-weight: 500; }
.el-btn { min-width: 300px; }
.el-badge { position: absolute; z-index: 5; left: 5%; top: 6%; width: 104px; height: 104px; margin: 0; border-radius: 50%; display: grid; place-content: center; text-align: center; background: rgba(255, 255, 255, .92); border: 1px solid rgba(184, 150, 74, .6); box-shadow: 0 0 0 5px rgba(255, 255, 255, .5), 0 10px 20px -12px rgba(80, 60, 30, .4);
  font-family: "Shippori Mincho", serif; font-weight: 600; font-size: 22px; line-height: 1.35; letter-spacing: .12em; color: #8a6a3a; }
.el-badge span { display: block; }
.fv:has(.el-badge) .holly { left: auto; right: 18%; top: 5%; }
.fv--member:has(.el-badge) .holly { right: auto; left: 22%; top: 7%; }
/* 動き：1行ずつ、ふわっと */
.has-anim .el-catch__l { animation: rise 1s cubic-bezier(.22, 1, .36, 1) both; }
.has-anim .el-catch__l:nth-child(2) { animation-delay: .25s; }
.has-anim .el-badge { animation: pop .7s cubic-bezier(.34, 1.56, .64, 1) .9s both; }
@media (max-width: 767px) {
  .fv__copy--el, .fv--member .fv__copy--el { width: 100%; padding-block: 8px 0; }
  .el-catch { font-size: min(7.4vw, 32px); margin-bottom: 20px; }
  .el-name { font-size: 18px; }
  .el-info div { grid-template-columns: 6.4em minmax(0, 1fr); font-size: 13.5px; gap: 8px; }
  .el-btn { width: 100%; min-width: 0; }
  .el-badge { width: 76px; height: 76px; font-size: 16px; left: 4%; top: 4%; }
}
@media (prefers-reduced-motion: reduce) { .has-anim .el-catch__l, .has-anim .el-badge { animation: none !important; } }
.el-info dt::after { display: none; }
.el-info dt { white-space: nowrap; }
.fv:not(.fv--member) .el-catch { font-size: clamp(26px, min(3vw, calc((100vw - min(60vw, 1100px) - max(0px, (100vw - 1280px) / 2) - 100px) / 10)), 50px); }
@media (max-width: 767px) { .fv:not(.fv--member) .el-catch { font-size: min(7.4vw, 32px); } }

/* キャッチ下：資料っぽい表をやめて「クッション → 壁紙」を絵で見せる */
.el-flow { display: flex; align-items: center; gap: 18px; margin: 0 0 32px; }
.el-flow__item { display: flex; align-items: center; gap: 14px; }
.el-flow__item p { margin: 0; font-family: var(--maru); font-weight: 700; font-size: 16px; line-height: 1.45; letter-spacing: .04em; }
.el-flow__item small { display: block; font-family: var(--sans); font-weight: 500; font-size: 11.5px; letter-spacing: .1em; color: var(--gold); }
.el-flow__img { position: relative; flex: none; display: grid; place-items: center; }
.el-flow__img--cushion { width: 84px; height: 84px; border-radius: 50%; background: var(--white); box-shadow: 0 8px 18px -10px rgba(80, 60, 30, .4); }
.el-flow__img--cushion img { width: 70px; height: auto; }
.el-flow__img--phones { width: 64px; height: 96px; }
.el-phone { position: absolute; inset: 0; border-radius: 10px; padding: 3px; background: #2b2826; box-shadow: 0 10px 18px -10px rgba(40, 30, 20, .6); }
.el-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.el-phone--b { translate: -24px 4px; rotate: -12deg; scale: .88; }
.el-phone--c { translate: 24px 4px; rotate: 12deg; scale: .88; }
.el-flow__img--phones:has(.el-phone--b) { margin-inline: 22px 18px; }
.el-flow__arrow { flex: none; width: 22px; height: 22px; color: var(--gold); }
.has-anim .el-flow { animation: rise .9s cubic-bezier(.22, 1, .36, 1) .5s both; }
.has-anim .el-phone { animation: pop .6s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: 1s; }
.has-anim .el-phone--b { animation-delay: .85s; } .has-anim .el-phone--c { animation-delay: .92s; }
.el-flow__item:last-child .el-flow__img--phones:not(:has(.el-phone--b)) .el-phone { animation-name: pop; }
@media (max-width: 1100px) and (min-width: 768px) {
  .el-flow { flex-wrap: wrap; gap: 12px; } .el-flow__item p { font-size: 14px; }
  .el-flow__img--cushion { width: 64px; height: 64px; } .el-flow__img--cushion img { width: 54px; }
}
@media (max-width: 767px) {
  .el-flow { gap: 10px; justify-content: center; }
  .el-flow__item { flex-direction: column; text-align: center; gap: 8px; }
  .el-flow__item p { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .has-anim .el-flow, .has-anim .el-phone { animation: none !important; } }
.el-flow__item p { white-space: nowrap; }
/* 「クッション → 壁紙」は絵の下に文字を置く形でコンパクトに（どの幅でも左カラムに収まる） */
.el-flow { gap: 14px; align-items: flex-start; }
.el-flow__item { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.el-flow__item p { font-size: 14.5px; }
.el-flow__img { height: 96px; }
.el-flow__img--cushion { width: 88px; height: 88px; margin-top: 4px; }
.el-flow__img--cushion img { width: 72px; }
.el-flow__arrow { margin-top: 38px; }
.el-flow__img--phones:has(.el-phone--b) { margin-inline: 26px; }
@media (max-width: 1100px) and (min-width: 768px) { .el-flow { flex-wrap: nowrap; } }

/* =========================================================
   FV：ギフトボックスが開いて、限定壁紙が飛び出す
   ゆらゆら → ふたがポンッ → 光 → スマホがせり上がる → 紙吹雪 → その後ふわふわ
   ========================================================= */
.giftfv { display: flex; align-items: flex-end; gap: 22px; margin: 4px 0 30px; }
.gift { --w: 132px; position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.62); cursor: pointer; }
.gift__body { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; border-radius: 8px; background: linear-gradient(180deg, #c45f55, #a8473e); box-shadow: 0 16px 22px -14px rgba(80, 30, 20, .6); z-index: 3; }
.gift__inside { position: absolute; left: 4%; right: 4%; bottom: 40%; height: 10%; border-radius: 6px 6px 0 0; background: #6e2c26; z-index: 1; }
.gift__ribbon { position: absolute; left: 50%; top: 0; bottom: 0; width: 16%; margin-left: -8%; background: linear-gradient(90deg, #d9b25e, #f0d58f 50%, #d9b25e); }
.gift__lid { position: absolute; left: -6%; right: -6%; bottom: 44%; height: 15%; border-radius: 6px; background: linear-gradient(180deg, #d06a5f, #b5544a); box-shadow: 0 6px 10px -6px rgba(80, 30, 20, .5); z-index: 4; transform-origin: 20% 100%; }
.gift__bow { position: absolute; left: 50%; bottom: 88%; width: 70%; height: 70%; margin-left: -35%;
  background: radial-gradient(circle at 50% 80%, #e9c87a 0 13%, transparent 14%), radial-gradient(ellipse 34% 48% at 28% 50%, #e2bd6b 96%, transparent 100%), radial-gradient(ellipse 34% 48% at 72% 50%, #e2bd6b 96%, transparent 100%); }
.gift__phones { position: absolute; left: 50%; bottom: 40%; width: 56%; aspect-ratio: 9 / 16; margin-left: -28%; z-index: 2; }
.gp { position: absolute; inset: 0; border-radius: 9px; padding: 3px; background: #2b2826; box-shadow: 0 10px 16px -8px rgba(40, 30, 20, .55); }
.gp img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.gift__rays { position: absolute; left: 50%; bottom: 52%; width: 230%; aspect-ratio: 1; margin-left: -115%; translate: 0 50%; border-radius: 50%; z-index: 0; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(233, 200, 122, .45) 0 9deg, transparent 9deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%); mask-image: radial-gradient(circle, #000 18%, transparent 68%); }
.gift__cf { position: absolute; left: 50%; bottom: 55%; width: 8px; height: 12px; border-radius: 2px; z-index: 5; opacity: 0; }
.gift__cf--1 { background: #c98a3c; --tx: -70px; --ty: -90px; --r: 220deg; } .gift__cf--2 { background: #4f7a62; --tx: 64px; --ty: -100px; --r: -200deg; }
.gift__cf--3 { background: #6f8fb0; --tx: -96px; --ty: -36px; --r: 160deg; border-radius: 50%; width: 9px; height: 9px; } .gift__cf--4 { background: #b5544a; --tx: 92px; --ty: -46px; --r: -260deg; }
.gift__cf--5 { background: #e1b85a; --tx: -30px; --ty: -128px; --r: 300deg; } .gift__cf--6 { background: #fff; --tx: 36px; --ty: -122px; --r: -180deg; border-radius: 50%; width: 8px; height: 8px; box-shadow: 0 0 6px rgba(201, 162, 78, .8); }
.giftfv__text { margin: 0 0 6px; font-family: var(--maru); line-height: 1.45; }
.giftfv__text small { display: block; margin-bottom: 4px; font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .06em; color: var(--muted); }
.giftfv__text b { font-weight: 900; font-size: clamp(20px, 1.9vw, 28px); letter-spacing: .06em; color: var(--ink); }
/* 開いたあとの状態（動きなしの環境でもこの見た目） */
.gift .gift__lid { transform: translate(34%, -150%) rotate(28deg); }
.gift .gift__phones { transform: translateY(-48%); }
.gift .gift__rays { opacity: 1; }
.gp--b { rotate: -14deg; translate: -34% 6%; scale: .9; } .gp--c { rotate: 14deg; translate: 34% 6%; scale: .9; }
/* 動き */
.has-anim .gift { animation: gwiggle .9s ease-in-out .4s both; }
@keyframes gwiggle { 0%, 100% { transform: none; } 15% { transform: rotate(-6deg); } 30% { transform: rotate(6deg); } 45% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } 75% { transform: translateY(4px) scale(1.04, .94); } }
.has-anim .gift .gift__lid { animation: glid .7s cubic-bezier(.3, 1.4, .5, 1) 1.25s both; }
@keyframes glid { 0% { transform: none; } 45% { transform: translate(10%, -230%) rotate(-10deg); } 100% { transform: translate(34%, -150%) rotate(28deg); } }
.has-anim .gift .gift__rays { animation: grays-in .6s ease-out 1.35s both, grays-spin 18s linear 1.95s infinite; }
@keyframes grays-in { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes grays-spin { to { rotate: 360deg; } }
.has-anim .gift .gift__phones { animation: gup .8s cubic-bezier(.34, 1.5, .64, 1) 1.4s both, gfloat 3.2s ease-in-out 2.4s infinite; }
@keyframes gup { from { transform: translateY(35%); } to { transform: translateY(-48%); } }
@keyframes gfloat { 0%, 100% { transform: translateY(-48%); } 50% { transform: translateY(-54%); } }
.has-anim .gp--b, .has-anim .gp--c { animation: gfan .6s cubic-bezier(.34, 1.5, .64, 1) 2s both; }
@keyframes gfan { from { rotate: 0deg; translate: 0 0; scale: .9; } }
.has-anim .gift__cf { animation: gcf 1.1s cubic-bezier(.2, .8, .3, 1) 1.4s both; }
@keyframes gcf { 0% { opacity: 1; transform: translate(-50%, 0) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), var(--ty)) rotate(var(--r)); } }
.has-anim .giftfv__text { animation: rise .8s cubic-bezier(.22, 1, .36, 1) 2s both; }
.gift.is-replay, .gift.is-replay * { animation: none !important; }
@media (max-width: 1100px) and (min-width: 768px) { .gift { --w: 108px; } .giftfv { gap: 16px; } }
@media (max-width: 767px) {
  .giftfv { justify-content: center; gap: 18px; margin-top: 18px; }
  .gift { --w: 104px; }
  .giftfv__text { text-align: left; }
  .giftfv__text b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .has-anim .gift, .has-anim .gift *, .has-anim .giftfv__text { animation: none !important; } .gift__cf { display: none; } }
/* 位置調整：せり上がるスマホの分だけ上に余白、ふたは左へ飛ばして文字にかぶらないように */
.giftfv { margin-top: 84px; gap: 34px; }
.giftfv__text { position: relative; z-index: 6; }
.gift .gift__lid { transform: translate(-38%, -140%) rotate(-30deg); transform-origin: 80% 100%; }
@keyframes glid { 0% { transform: none; } 45% { transform: translate(-8%, -230%) rotate(10deg); } 100% { transform: translate(-38%, -140%) rotate(-30deg); } }
.gift__rays { width: 190%; margin-left: -95%; }
.el-catch { margin-bottom: 8px; }
@media (max-width: 1100px) and (min-width: 768px) { .giftfv { margin-top: 70px; gap: 26px; } }
@media (max-width: 767px) { .giftfv { margin-top: 74px; gap: 26px; } }
/* ギフト：文字は箱の下、箱は左カラムの中央。ふたは真上へ跳ねて右に傾く（画面外に出ない） */
.giftfv { flex-direction: column; align-items: center; gap: 18px; width: fit-content; margin: 96px auto 30px; margin-left: clamp(0px, 8%, 90px); text-align: center; }
.giftfv__text { margin: 0; text-align: center; }
.giftfv__text b br { display: none; }
.gift .gift__lid { transform: translate(28%, -175%) rotate(22deg); transform-origin: 30% 100%; }
@keyframes glid { 0% { transform: none; } 45% { transform: translate(6%, -260%) rotate(-8deg); } 100% { transform: translate(28%, -175%) rotate(22deg); } }
.gift__rays { width: 170%; margin-left: -85%; }
/* 閉じているあいだはスマホを見せない：箱の中から出てくる */
@keyframes gup { 0% { opacity: 0; transform: translateY(40%) scale(.6); } 25% { opacity: 1; } 100% { opacity: 1; transform: translateY(-48%) scale(1); } }
.has-anim .gp--b, .has-anim .gp--c { animation-delay: 2.05s; }
@media (max-width: 1100px) and (min-width: 768px) { .giftfv { margin-top: 84px; margin-left: 0; } }
@media (max-width: 767px) {
  .giftfv { margin: 90px auto 26px; }
  .giftfv__text b { font-size: 19px; }
}
/* キャッチ（明朝）は見た目からは外し、ページの見出しとして読み上げ用にだけ残す。プレゼントを主役に */
.el-catch.sr-only { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.giftfv { margin-top: 120px; }
.gift { --w: 168px; }
.giftfv__text small { font-size: 14px; }
.giftfv__text b { font-size: clamp(22px, 2.1vw, 32px); }
@media (max-width: 1100px) and (min-width: 768px) { .gift { --w: 132px; } .giftfv { margin-top: 100px; } }
@media (max-width: 767px) { .gift { --w: 124px; } .giftfv { margin-top: 110px; } }
/* 右上にキャラ（うさぎ）がいるページは、名前を左側に */
.fv--name-left .fv__name { right: auto; left: 3.5%; top: 34%; }
@media (max-width: 767px) { .fv--name-left .fv__name { left: 5%; top: 30%; } }

/* FVコピー確定版：明朝のキャッチ → ギフト → 2行の説明 → 購入特典をチェック */
.el-catch--new { margin: 0; font-size: clamp(26px, min(3.2vw, calc((100vw - min(52vw, 1000px) - max(0px, (100vw - 1280px) / 2) - 100px) / 8.6)), 52px); }
.fv:not(.fv--member) .el-catch--new { font-size: clamp(24px, min(2.9vw, calc((100vw - min(60vw, 1100px) - max(0px, (100vw - 1280px) / 2) - 100px) / 8.6)), 48px); }
.fv .giftfv { margin-top: 92px; margin-bottom: 28px; }
.giftfv__text { font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1.8; color: var(--ink); letter-spacing: .04em; }
.giftfv__text b { display: inline-block; font-family: var(--maru); font-weight: 900; font-size: clamp(19px, 1.7vw, 25px); color: var(--ink); letter-spacing: .06em; }
.giftfv__text br { display: inline; }
.gift { --w: 140px; }
@media (max-width: 1100px) and (min-width: 768px) { .gift { --w: 116px; } .fv .giftfv { margin-top: 80px; } }
@media (max-width: 767px) {
  .el-catch--new, .fv:not(.fv--member) .el-catch--new { font-size: min(7.6vw, 32px); text-align: center; }
  .gift { --w: 112px; } .fv .giftfv { margin-top: 84px; }
  .giftfv__text { font-size: 13.5px; } .giftfv__text b { font-size: 18px; }
}
.fv .giftfv { margin-top: 70px; margin-bottom: 22px; }
.el-catch--new .el-catch__l { width: fit-content; }
@media (max-width: 1100px) and (min-width: 768px) { .fv .giftfv { margin-top: 64px; } }
/* ふた：スマホにかぶらないよう、右へ飛んでスマホの後ろに傾いて止まる */
.gift .gift__lid { z-index: 1; transform: translate(58%, -95%) rotate(34deg); transform-origin: 30% 100%; }
@keyframes glid { 0% { transform: none; z-index: 4; } 40% { transform: translate(14%, -260%) rotate(-6deg); } 100% { transform: translate(58%, -95%) rotate(34deg); } }
/* FV背景を1色に：左右をセージでつなげ、キャラが丸い角で切れないように */
.fv { background: radial-gradient(ellipse at 72% 40%, #eef3ef 0, rgba(238, 243, 239, 0) 55%), linear-gradient(180deg, #e3ebe5 0%, #cfdcd3 100%); }
.fv .fv__media { background: transparent; border-radius: 0; }
.fv .fv__media::before { display: none; }
.fv .snow, .fv .dp__glitter { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 767px) { .fv .fv__media { border-radius: 0; } }
/* FV背景：ベージュ1色に */
.fv { background: radial-gradient(ellipse at 72% 40%, #fffaf2 0, rgba(255, 250, 242, 0) 55%), linear-gradient(180deg, var(--ivory) 0%, #efe9df 100%); }

/* ---------- SP：タイトルはキャラの左上、プレゼントはキャラの右下に重ねて、FVを詰める ---------- */
@media (max-width: 767px) {
  .fv { --mh: 80vw; }
  .fv--member { --mh: 100vw; }
  .fv__in { z-index: 6; padding-block: 20px 44px; }
  .fv__copy--el, .fv--member .fv__copy--el { position: static; padding: 0; }
  .el-catch--new, .fv:not(.fv--member) .el-catch--new { position: absolute; left: 16px; top: calc(-1 * var(--mh) - 20px + 18px); margin: 0; text-align: left; font-size: min(6.6vw, 28px); line-height: 1.45;
    text-shadow: 0 0 6px #fff, 0 0 14px #fff, 0 0 22px rgba(255, 255, 255, .9); }
  .fv .giftfv { margin: 0 0 18px; width: 100%; }
  .fv .gift { --w: 92px; position: absolute; right: 18px; top: calc(-1 * 92px * 1.62 - 20px - 6px); }
  .giftfv__text { text-align: center; }
  .el-btn { width: 100%; }
  .fv .el-badge { left: 4%; top: auto; bottom: 5%; width: 70px; height: 70px; font-size: 14px; }
  .fv .holly { display: none; }
}

/* ---------- PC：タイトル・説明・ボタンは左、プレゼントはキャラの右下に重ねる ---------- */
@media (min-width: 768px) {
  .fv .giftfv { margin: 26px 0 30px; width: auto; align-items: flex-start; text-align: left; }
  .fv .giftfv__text { text-align: left; }
  .fv .giftfv__text br { display: inline; }
  .fv .gift { --w: 150px; position: absolute; right: max(24px, 4%); bottom: 9%; z-index: 6; }
  .fv .gift .gift__lid { transform: translate(-58%, -95%) rotate(-34deg); transform-origin: 70% 100%; }
  .fv .bk--2 { display: none; }
  .el-catch--new { margin-bottom: 0; }
}
@media (min-width: 768px) {
  @keyframes glid { 0% { transform: none; } 40% { transform: translate(-14%, -260%) rotate(6deg); } 100% { transform: translate(-58%, -95%) rotate(-34deg); } }
}
@media (max-width: 1100px) and (min-width: 768px) { .fv .gift { --w: 116px; right: 3%; bottom: 7%; } }

/* ---------- SP：キャラを少し下げてタイトルの場所をつくる。ふたは左へ ---------- */
@media (max-width: 767px) {
  .fv { --mh: 100vw; }
  .fv--member { --mh: 112vw; }
  .fv .fv__media { aspect-ratio: auto; height: var(--mh); }
  .fv .grp { height: 74%; }
  .fv .solo { top: 24%; height: 150%; }
  .fv__name { top: auto !important; bottom: 34%; }
  .fv .gift .gift__lid { transform: translate(-58%, -95%) rotate(-34deg); transform-origin: 70% 100%; }
  @keyframes glid { 0% { transform: none; } 40% { transform: translate(-14%, -260%) rotate(6deg); } 100% { transform: translate(-58%, -95%) rotate(-34deg); } }
  .fv .bk--2, .fv .bk--3 { display: none; }
}
@media (min-width: 768px) { .fv .fv__copy--el { position: static; } .fv .giftfv { position: static; } }
@media (min-width: 768px) { .fv .gift { bottom: 12%; } }
@media (max-width: 1100px) and (min-width: 768px) { .fv .gift { bottom: 14%; right: 4%; } }

/* ---------- PC：文章とキャラを左右に分けず、1枚の絵として重ねる ----------
   ビジュアル面を画面いっぱいにして境目をなくし、キャラは右寄せ。文字には白いふちで可読性を確保 */
@media (min-width: 768px) {
  .fv .fv__media, .fv--member .fv__media { left: 0; right: 0; width: auto; overflow: visible; }
  .fv .grp { left: auto; right: 3%; transform: none; height: 94%; overflow: visible; }
  .has-anim .fv .grp.anim--pop.is-in { animation-name: pop; }
  .fv--member .solo { left: 68%; }
  .fv .el-badge { left: auto; right: calc(min(60vw, 760px) + 2%); top: 9%; }
  .fv--member .el-badge { right: calc(min(46vw, 620px)); }
  .fv .holly { left: auto; right: calc(min(60vw, 760px) - 90px); top: 7%; }
  .fv--member .holly { right: calc(min(46vw, 620px) - 90px); left: auto; }
  .fv--name-left .fv__name { left: 47%; }
  .el-catch--new, .giftfv__text { text-shadow: 0 0 8px var(--ivory), 0 0 18px var(--ivory), 0 0 30px var(--ivory); }
  .fv .fv__copy--el { position: relative; z-index: 5; }
  .fv .giftfv { position: static; }
  .fv .fv__copy--el { position: static; }
}
@media (max-width: 1100px) and (min-width: 768px) { .fv .grp { height: 80%; right: 1%; } .fv--member .solo { left: 70%; } }

/* =========================================================
   PC・タブレット：キャラを中央に大きく、四隅に要素を置く1枚絵の構図
   左上＝キャッチ／右上＝購入者限定／左下＝説明＋ボタン／右下＝プレゼント
   ========================================================= */
@media (min-width: 768px) {
  .fv { height: clamp(600px, calc(100svh - var(--hd-h) - 38px), 820px); }
  .fv .grp { left: 50%; right: auto; transform: translateX(-50%); height: 96%; }
  .has-anim .fv .grp.anim--pop.is-in { animation-name: pop-x50; }
  .fv--member .solo { left: 50%; }
  .fv__in { max-width: 1360px; }
  .fv .el-catch--new { position: absolute; left: var(--gutter); top: 8%; margin: 0; font-size: clamp(30px, 3.4vw, 56px); line-height: 1.5; }
  .fv .giftfv__text { position: absolute; left: var(--gutter); bottom: calc(8% + 78px); margin: 0; }
  .fv .el-btn { position: absolute; left: var(--gutter); bottom: 8%; min-width: 0; width: min(340px, 30vw); }
  .fv .giftfv { margin: 0; }
  .fv .el-badge, .fv--member .el-badge { left: auto; right: max(24px, 4%); top: 7%; width: 112px; height: 112px; font-size: 22px; }
  .fv .holly, .fv--member .holly { left: auto; right: calc(max(24px, 4%) + 96px); top: 5%; transform: rotate(-16deg); }
  .fv .gift { right: max(24px, 4%); bottom: 8%; }
  /* 個別ページ：縦書きの名前は左寄りの中段に（右上はバッジ） */
  .fv--member .fv__name, .fv--name-left .fv__name { left: auto; right: auto; left: calc(50% - 300px); top: 26%; bottom: auto; font-size: clamp(40px, 4.4vw, 70px); }
}
@media (max-width: 1100px) and (min-width: 768px) {
  .fv .grp { height: 84%; }
  .fv .el-catch--new { font-size: 3.6vw; }
  .fv .el-badge, .fv--member .el-badge { width: 88px; height: 88px; font-size: 17px; }
  .fv--member .fv__name, .fv--name-left .fv__name { left: calc(50% - 230px); }
}
@media (min-width: 768px) {
  .fv .holly, .fv--member .holly, .fv--member:has(.el-badge) .holly, .fv:has(.el-badge) .holly { left: auto !important; right: calc(max(24px, 4%) + 100px) !important; top: 4% !important; }
  .fv--member .fv__name, .fv--name-left .fv__name { left: calc(50% - 330px); top: 34%; font-size: clamp(34px, 3.6vw, 56px); }
}
@media (max-width: 1100px) and (min-width: 768px) { .fv--member .fv__name, .fv--name-left .fv__name { left: calc(50% - 250px); top: 36%; } }
@media (min-width: 768px) {
  .fv { height: clamp(560px, calc(100svh - var(--hd-h) - 38px), 820px); }
  .fv--member { height: clamp(560px, calc(100svh - var(--hd-h) - 38px - 41px), 800px); }
}

/* PC：キャッチは説明のすぐ上（左下にまとめる）。間の余白が開きすぎないように */
@media (min-width: 768px) {
  .fv .el-catch--new { top: auto; bottom: calc(8% + 78px + 92px); }
}
/* SP：プレゼントを小さく、ふたも控えめに（キャラにかぶりすぎない） */
@media (max-width: 767px) {
  .fv .gift { --w: 70px; right: 12px; top: calc(-1 * 70px * 1.62 - 20px - 4px); }
  .fv .gift .gift__lid { transform: translate(-40%, -70%) rotate(-24deg); }
  @keyframes glid { 0% { transform: none; } 40% { transform: translate(-10%, -200%) rotate(6deg); } 100% { transform: translate(-40%, -70%) rotate(-24deg); } }
  .fv .gift__rays { width: 150%; margin-left: -75%; }
  .fv .gp--b { translate: -26% 6%; } .fv .gp--c { translate: 26% 6%; }
}
/* 個別ページ：キャッチが左下に下りたので、縦書きの名前はキャラの左上へ */
@media (min-width: 768px) {
  .fv--member .fv__name, .fv--name-left .fv__name { top: 8%; left: calc(50% - 330px); }
}
@media (max-width: 1100px) and (min-width: 768px) { .fv--member .fv__name, .fv--name-left .fv__name { top: 8%; left: calc(50% - 250px); } }

/* =========================================================
   FV 案A：「情報のかたまり（左）」＋「絵のかたまり（右）」の2つに整理
   ========================================================= */
.el-label { display: none; }
@media (min-width: 768px) {
  /* 情報：縦1列にまとめて、左の中央に */
  .fv .fv__copy--el { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(40%, 520px); z-index: 7; display: flex; flex-direction: column; align-items: flex-start; }
  .fv .fv__copy--el > * { position: static !important; }
  .el-label { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
  .el-label span { display: inline-block; padding: 4px 14px; border: 1px solid var(--gold); border-radius: 999px; color: #8a6a3a; font-family: "Shippori Mincho", serif; font-weight: 600; font-size: 14px; letter-spacing: .12em; background: rgba(255, 255, 255, .7); }
  .fv .el-catch--new { margin: 0 0 20px; font-size: clamp(30px, 3.1vw, 50px); line-height: 1.5; }
  .fv .giftfv { margin: 0 0 28px; display: block; }
  .fv .giftfv__text { margin: 0; text-align: left; }
  .fv .el-btn { width: min(340px, 100%); }
  .fv .el-badge, .fv .fv__scroll { display: none; }
  /* 絵：キャラは右へ。プレゼントはキャラの足元に寄りそわせる */
  .fv .grp { left: auto; right: 2%; transform: none; height: 94%; }
  .has-anim .fv .grp.anim--pop.is-in { animation-name: pop; }
  .fv--member .solo { left: 70%; }
  .fv .gift { --w: 116px; position: absolute; right: 44%; bottom: 5%; z-index: 6; }
  .fv .gift .gift__lid { transform: translate(58%, -95%) rotate(34deg); transform-origin: 30% 100%; }
  @keyframes glid { 0% { transform: none; } 40% { transform: translate(14%, -260%) rotate(-6deg); } 100% { transform: translate(58%, -95%) rotate(34deg); } }
  /* 名前はキャラのすぐ右、飾りはキャラのまわりだけ */
  .fv--member .fv__name { left: auto !important; right: max(24px, 4%); top: 10%; }
  .fv--name-left .fv__name { right: auto !important; left: calc(70% - 300px) !important; top: 10%; }
  .fv .holly, .fv--member .holly, .fv--member:has(.el-badge) .holly, .fv:has(.el-badge) .holly { right: auto !important; left: 50% !important; top: 8% !important; }
  .fv .deco { display: none; }
}
@media (max-width: 1100px) and (min-width: 768px) {
  .fv .fv__copy--el { width: 42%; }
  .fv .grp { height: 78%; right: 0; }
  .fv .gift { --w: 92px; right: 42%; }
  .fv--member .solo { left: 72%; }
  .fv--name-left .fv__name { left: calc(72% - 230px) !important; }
}
@media (min-width: 768px) { .fv .giftfv__text { position: static !important; } }
@media (min-width: 768px) { .fv--name-left .holly { left: auto !important; right: 5% !important; top: 3% !important; } }
/* 案A改：情報｜プレゼント｜キャラ を横に並べる（位置とキャラの大きさは main.js で重ならないよう調整） */
@media (min-width: 768px) {
  .fv .gift { --w: 104px; right: auto; }
  .fv .gift .gift__lid { transform: translate(30%, -70%) rotate(24deg); }
  @keyframes glid { 0% { transform: none; } 40% { transform: translate(6%, -240%) rotate(-6deg); } 100% { transform: translate(30%, -70%) rotate(24deg); } }
  .fv .grp, .fv .solo { transition: none; }
}
/* 幅が狭いとき（〜1099px）：プレゼントは情報の上に積んで、キャラの場所を確保 */
@media (min-width: 768px) and (max-width: 1099px) {
  .fv .fv__copy--el { top: auto; bottom: 7%; transform: none; }
  .fv .gift { --w: 84px; }
}

/* FV：上が空かないよう、情報のかたまりは縦中央に（狭い幅でも）。キャラの高さはFVに比例 */
@media (min-width: 768px) {
  .fv .grp { height: 94% !important; }
  .fv .fv__copy--el { top: 50%; bottom: auto; transform: translateY(-50%); }
  .el-catch--member { font-size: clamp(26px, 2.6vw, 42px) !important; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .fv:has(.gift) .fv__copy--el { top: auto; bottom: 7%; transform: none; }
  .fv .el-catch--new { font-size: max(24px, 3.2vw); }
  .fv .giftfv__text { font-size: 13.5px; }
  .fv .giftfv__text b { font-size: 18px; }
  .fv .el-btn { width: 260px; min-height: 48px; }
  .fv .gift { --w: 72px; }
}
/* SP：個別ページ（プレゼントなし）のタイトル */
@media (max-width: 767px) { .el-catch--member { font-size: min(5.8vw, 24px) !important; } }
@media (min-width: 768px) and (max-width: 1099px) { .fv .gift { display: none; } .fv:has(.gift) .fv__copy--el { top: 50%; bottom: auto; transform: translateY(-50%); } }
/* 頭にかぶるぼけ雪玉は、キャラのいない左上の余白へ */
@media (min-width: 768px) { .fv .bk--3 { right: auto; left: 33%; top: 7%; width: 54px; height: 54px; } }
/* 頭の上にかかっていたぼけ雪玉（bk--3）は、文字とキャラのあいだの下側へ */
.fv .bk--3 { top: auto; right: auto; left: 40%; bottom: 6%; }
@media (max-width: 767px) { .fv .bk--3 { display: block; left: 4%; bottom: 4%; width: 46px; height: 46px; } }
/* トップ：ヒイラギがキャラの顔にかかるので、右上の空いている場所へ */
@media (min-width: 768px) {
  .fv:not(.fv--member) .holly, .fv:not(.fv--member):has(.el-badge) .holly { left: auto !important; right: 3% !important; top: 5% !important; }
}
@media (min-width: 768px) and (max-width: 1099px) { .fv:not(.fv--member) .holly { display: none; } }
/* 集合絵の影が四角い枠で切れないように（画像の外側は透明なので、はみ出しても見た目は変わらない） */
.fv .grp { overflow: visible; }
/* 情報のかたまりの箱がプレゼントの上にかぶってクリックできないので、箱自体はクリックを素通りさせる */
@media (min-width: 768px) { .fv .fv__copy--el { pointer-events: none; } .fv .fv__copy--el a, .fv .fv__copy--el button { pointer-events: auto; } .fv .gift { z-index: 8; } }
/* SP：プレゼントを小さくして右下に。集合絵は少し左に寄せて、プレゼントと重ならないように */
@media (max-width: 767px) {
  .fv .gift { --w: 54px; right: 10px; top: calc(-1 * 54px * 1.62 - 20px - 10px); }
  .fv .gift .gift__lid { transform: translate(-36%, -60%) rotate(-22deg); }
  .fv .gift__rays { width: 130%; margin-left: -65%; }
  .fv:not(.fv--member) .grp { left: 43%; height: 70%; }
  .has-anim .fv:not(.fv--member) .grp.anim--pop.is-in { animation-name: pop-x50; }
}
@media (max-width: 767px) {
  .fv .gift { right: 6px; }
  .fv .gift .gift__lid { transform: translate(-6%, -150%) rotate(-10deg); }
  @keyframes glid { 0% { transform: none; } 50% { transform: translate(-6%, -260%) rotate(8deg); } 100% { transform: translate(-6%, -150%) rotate(-10deg); } }
}
/* SP：キャラは中央に戻し、プレゼントはタイトルの右（キャラの上の空き）へ */
@media (max-width: 767px) {
  .fv:not(.fv--member) .grp { left: 50%; height: 72%; }
  .fv .gift { --w: 52px; right: 16px; top: calc(-1 * var(--mh) - 20px + 64px); }
}

/* 24karat app badge */
.recv__app{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.recv__app img{width:56px;height:56px;border-radius:14px;box-shadow:0 4px 12px rgba(80,60,20,.18);flex:none}
.recv__app span{display:flex;flex-direction:column;font-size:12px;line-height:1.4;color:var(--muted,#7a6f62)}
.recv__app b{font-size:17px;color:var(--ink,#2b2620);letter-spacing:.02em}

/* ===== 最終QA：はみ出し・改行 ===== */
main > section, .site-footer, footer { overflow-x: clip; }
@media (max-width: 600px) { .sec-head__en { max-width: calc(100% - 44px); } }
/* 日本語の文節で改行し、1文字だけの行を作らない */
h1, h2, h3, .recv__title, .step__title, .mb__name, .om__name, .btn, .sec-head__lead, .about__title { word-break: auto-phrase; text-wrap: balance; }
p, li, dd, dt, summary { text-wrap: pretty; }
/* タブレット縦（768〜900px）：文字の幅をしぼって、キャラと重ならないように */
@media (min-width: 768px) and (max-width: 900px) {
  .fv .fv__copy--el { width: 36%; }
  .fv .el-catch--new { font-size: 26px; }
  .fv .giftfv__text { font-size: 12px; }
  .fv .giftfv__text strong, .fv .giftfv__text b { font-size: 14px; }
  .fv .el-btn { width: auto; padding-inline: 24px; font-size: 13px; }
}
.nw { white-space: nowrap; }
/* SP：タイトルにかかる星飾りを消す／お知らせバーは1行に */
@media (max-width: 767px) { .fv .deco--soft { display: none; } }
.notice { word-break: auto-phrase; }
@media (max-width: 400px) { .notice { font-size: 11px; letter-spacing: .02em; } .notice b { margin-right: 6px; } }
@media (max-width: 340px) { .notice b { display: none; } }
/* ABOUTのリード文はSPでも中央揃え */
@media (max-width: 767px) { .sec--about .sec-head__lead { text-align: center; } }
@media (max-width: 767px) { .sec--about .sec-head__lead { max-width: 21em; } .sec--about .sec-head__lead br.pc { display: inline; } }

/* FV：ラベルの下に「限定スマホ壁紙をプレゼント」 */
.el-offer { margin: 0 0 6px; font-family: var(--maru); font-weight: 900; color: var(--green); letter-spacing: .1em; line-height: 1.5; font-size: 14px; }
@media (min-width: 768px) {
  .fv .el-offer { margin: 0 0 14px; font-size: clamp(18px, 1.55vw, 24px); }
  .fv .el-label { margin-bottom: 14px; }
}
@media (min-width: 768px) and (max-width: 900px) { .fv .el-offer { font-size: 16px; } }
@media (max-width: 767px) { .fv .el-offer { text-align: center; font-size: 17px; margin: 0 0 4px; } }