/* =========================================================
   良朝丸 (Yoichomaru) Inbound LP — shared stylesheet
   Source: Figma 1jbZ0xo3jJikAlc8ZARULA (Container 375 / Container 750 @2x)
   Units: authored against the 37.5rem frame. Build step converts px -> rem
   with html{font-size:1rem} at 375 wide, scaling fluidly to 2rem at 750
   (= the 750 @2x frame). 1px hairlines are kept as px.
   ========================================================= */

:root {
  --c-ink: #222222;
  --c-pink: #e3005b;
  --c-yellow: #ffeb00;
  --c-orange: #f0913f;
  --c-cream: #f7f4e4;
  --c-line: #e2dcc4;
  --c-gray: #555555;
  --c-gray2: #666666;
  --c-body: #454545;
  --f-local: 'Noto Sans JP', sans-serif;      /* overridden per language */
  --f-ja: 'Noto Sans JP', sans-serif;          /* Japanese strings shown to staff */
  --f-num: 'Montserrat', sans-serif;
  --f-sec: 'Libre Franklin', sans-serif;
  --f-cond: 'Franklin Gothic Medium Cond', 'Oswald', 'Arial Narrow', sans-serif;
  --col: 37.5rem;                                /* column width (scales with root) */
  --col-left: max(0rem, calc(50% - var(--col) / 2)); /* % of the viewport minus scrollbar (fixed elements), so header/CTA line up with the column */
}
html[lang="ko"]      { --f-local: 'Noto Sans KR', sans-serif; }
html[lang="zh-Hans"] { --f-local: 'Noto Sans SC', sans-serif; }
html[lang="zh-Hant"] { --f-local: 'Noto Sans TC', sans-serif; }
html[lang="en"]      { --f-local: 'Noto Sans JP', sans-serif; }

/* fluid root: 10px @375 → 20px @750, capped */
html { font-size: calc(100vw / 37.5); -webkit-text-size-adjust: 100%; } /* smooth scroll is done in JS (800ms, header offset) */
@media (min-width: 750px) { html { font-size: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #f2f2f2; color: var(--c-ink); font-family: var(--f-local); font-size: 1.4rem; line-height: 2.1rem; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3 { margin: 0; font-size: inherit; }
.ja { font-family: var(--f-ja); }
.num { font-family: var(--f-num); font-weight: 900; }
.pre { white-space: pre-line; }
.pink { color: var(--c-pink); }
.b { font-weight: 700; }
.blk { font-weight: 900; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { position: relative; width: var(--col); margin: 0 auto; background: var(--c-yellow); padding-top: 6.4rem; overflow: hidden; }

/* ---------- Header (fixed) ---------- */
.site-header {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0; margin: 0 auto; width: var(--col); max-width: 100%; height: 6.2rem; /* centred on the column, independent of scrollbar width */
  display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1.2rem;
  background: var(--c-yellow); /* Figma: transparent over yellow page bg — filled so it stays legible on scroll */
}
.site-header__logo { width: 9.2rem; height: 4.6rem; }
.site-header__logo img { width: 100%; height: 100%; object-fit: contain; }
.lang { display: flex; align-items: center; gap: 0.4rem; }
.lang__globe { width: 1.8rem; height: 1.8rem; }
.lang__btn {
  display: flex; align-items: center; justify-content: center; height: 2.9rem; padding: 0.5rem 0.8rem;
  border: 0; padding: 0.65rem 0.95rem; box-shadow: inset 0 0 0 0.15rem var(--c-ink); border-radius: 9.9rem; background: #fff; /* 0.15rem stroke as inset shadow: browsers round fractional borders */
  font-family: var(--f-ja); font-weight: 700; font-size: 1.2rem; line-height: 1.6rem; white-space: nowrap;
}
.lang__btn[lang="ko"] { font-family: 'Noto Sans KR', sans-serif; }
.lang__btn[lang="zh-Hans"] { font-family: 'Noto Sans SC', sans-serif; }
.lang__btn[lang="zh-Hant"] { font-family: 'Noto Sans TC', sans-serif; }
.lang__btn.is-current { background: var(--c-ink); color: var(--c-yellow); }
.lang__btn { transition: background-color .15s ease-out, box-shadow .15s ease-out; }
.lang__btn:not(.is-current):hover, .lang__btn:not(.is-current):focus-visible { background: var(--c-yellow); box-shadow: inset 0 0 0 0.15rem var(--c-ink), 1px 1px 0 var(--c-ink); }
.site-header { transition: box-shadow .2s ease-out; }
.site-header.is-scrolled { box-shadow: 0 0.2rem 0 var(--c-ink); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 64rem; background: var(--c-orange); overflow: hidden; }
.hero > * { position: absolute; }
.hero__spot { left: 0; top: 0; width: 37.5rem; height: 41.85rem; }
.hero__vert {
  width: 3.2rem; height: 26.6rem; display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; font-weight: 900; font-size: 3.2rem; line-height: 3.2rem; letter-spacing: 0.48rem;
  color: rgba(227, 0, 91, .25); font-family: var(--f-ja); white-space: nowrap;
}
.hero__vert--r { left: 33.4rem; top: 28.75rem; }
.hero__vert--l { left: 0.85rem; top: 16.75rem; transform: rotate(180deg); }
.hero__shadow { left: 9.782rem; top: 51.849rem; width: 17.562rem; height: 3.886rem; }
.hero__pkg { left: 6.665rem; top: 24.79rem; width: 25.8444rem; height: 36.4956rem; display: flex; align-items: center; justify-content: center; }
.hero__pkg-in { position: relative; flex: none; width: 23.464rem; height: 34.944rem; transform: rotate(4deg); }
.hero__pkg-crop { position: absolute; left: 0.014rem; top: 1.12rem; width: 23.4353rem; height: 33.6rem; overflow: hidden; }
.hero__pkg-crop img { position: absolute; left: -3.1%; top: -1.63%; width: 106%; height: 103.32%; }
.hero__badge {
  top: 22.6rem; right: 0.9rem; height: 2.6rem; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.2rem;
  background: var(--c-ink); border-radius: 9.9rem; color: #fff; white-space: nowrap;
  font-family: var(--f-cond); font-size: 1.2rem; line-height: 1.6rem;
}
html[lang="ko"] .hero__badge, html[lang^="zh"] .hero__badge { font-family: var(--f-local); font-weight: 700; }
.hero__badge img { width: 1.2rem; height: 1.2rem; }
.hero__seal { left: 0; top: 41.5rem; width: 16.4rem; height: 18.1rem; }
.hero__line {
  transform-origin: 0 0; display: block; padding: 0.2rem 1rem; white-space: nowrap;
  background: #fff; border: 0.2rem solid var(--c-ink); box-shadow: 1px 1px 0 var(--c-ink);
  font-weight: 900; font-size: 2.4rem; line-height: 3.1rem; letter-spacing: -0.01em;
}
.hero__line--l { font-size: 2.8rem; }
.hero__quote { transform-origin: 0 0; font-family: var(--f-cond); font-size: 7.2rem; line-height: 7.2rem; color: var(--c-pink); }

/* ticker (hero + footer) */
.ticker { overflow: hidden; }
.ticker__track { display: flex; width: max-content; }
.ticker__set { display: flex; align-items: center; gap: 1.4rem; padding: 0.8rem 0.7rem; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.ticker__set .jp { font-family: var(--f-ja); font-size: 1.6rem; }
.ticker__set .star { font-family: var(--f-num); font-size: 1.2rem; color: var(--c-pink); }
.ticker__set .en { font-family: var(--f-num); font-size: 1.2rem; letter-spacing: 0.096rem; }
@keyframes ticker { to { transform: translateX(-50%); } }
.hero__ticker { left: -4rem; top: 60.75rem; width: 45.5rem; height: 3.9rem; background: var(--c-yellow); border-block: 0.2rem solid var(--c-ink); }
.hero__ticker .ticker__track { margin-top: -0.2rem; }

/* ---------- In-store ticket ---------- */
.instore { background: var(--c-ink); padding: 4rem 2rem; display: flex; flex-direction: column; gap: 1.6rem; }
.instore__label { display: flex; align-items: center; gap: 0.8rem; padding: 0 0.2rem; color: var(--c-yellow); font-weight: 900; font-size: 1.6rem; line-height: 2.2rem; }
.instore__label img { width: 2rem; height: 2.025rem; }
.ticket { padding: 0.6rem; scroll-margin-top: 7rem; }
.ticket__card { position: relative; isolation: isolate; }
/* Figma "Ticket shape (notched)" 592:1574 — fixed 323×400 with yellow glow, exported as SVG; content may run past it */
.ticket__card::before { content: ""; position: absolute; z-index: -1; left: -1.5rem; top: -1.5rem; width: 35.3rem; height: 43rem; background: url(../assets/ticket-shape.svg) no-repeat 0 0 / 100% 100%; pointer-events: none; }
.ticket__names { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.6rem 1.8rem; line-height: 1.3; }
.ticket__row { display: flex; align-items: center; gap: 1.2rem; }
.ticket__key { width: 10rem; flex: none; color: var(--c-gray2); font-weight: 700; font-size: 1.4rem; }
.ticket__val { font-family: var(--f-ja); font-weight: 900; white-space: nowrap; }
.ticket__val--xl { font-size: 3.2rem; }
.ticket__val--l { font-size: 2.4rem; }
.ticket__val--s { font-weight: 700; font-size: 1.4rem; letter-spacing: .1em; }
.ticket__perf { height: 2.4rem; display: flex; align-items: center; justify-content: center; }
.ticket__perf img { width: 28.75rem; height: 0.2rem; }
.staff { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; padding: 0.8rem 1.6rem 2rem; border-radius: 0 0 1.6rem 1.6rem; }
.staff__ask { display: flex; align-items: center; justify-content: center; gap: 0.8rem; color: var(--c-pink); font-weight: 900; font-size: 1.4rem; line-height: 2rem; }
.bubble { position: relative; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 9.9rem; }
.bubble > .bubble__blob { position: absolute; }
.bubble > .bubble__icon { position: relative; }
.bubble--28 { width: 2.8rem; height: 2.8rem; }
.bubble--28 .bubble__blob { left: -0.14rem; top: -0.14rem; width: 3.08rem; height: 3.08rem; }
.bubble--28 .bubble__icon { width: 1.8rem; height: 1.8rem; }
.staff__note { width: 100%; text-align: center; color: var(--c-gray2); font-size: 1.4rem; line-height: 2.1rem; }
.jpcard {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.85rem 0.25rem 1.85rem 8.25rem; text-align: center;
  background: var(--c-yellow); border: 0; border-radius: 1.2rem; box-shadow: inset 0 0 0 0.25rem var(--c-ink), 0.2rem 0.2rem 0 var(--c-ink);
  font-family: var(--f-ja);
}
.jpcard__q { width: 100%; font-weight: 900; font-size: 1.4rem; line-height: 2.1rem; }
.jpcard__name { width: 100%; font-weight: 900; font-size: 4.8rem; line-height: 5.7rem; letter-spacing: .08em; color: var(--c-yellow); -webkit-text-stroke: 0.5rem var(--c-ink); paint-order: stroke fill; } /* Figma: outside stroke 2.5 */
.jpcard__sub { width: 100%; font-weight: 700; font-size: 1.4rem; line-height: 2rem; }
.staff__pack { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; }
.staff__pack img { flex: none; object-fit: contain; filter: drop-shadow(0.2rem 0.2rem 0.25rem rgba(0, 0, 0, .2)); }
.staff__pack--y { left: -0.732rem; top: 9.178rem; width: 9.0616rem; height: 11.8892rem; }
.staff__pack--y img { width: 7.9428rem; height: 11.1199rem; transform: rotate(-6deg); }
.staff__pack--o { left: 3.605rem; top: 12.35rem; width: 8.8221rem; height: 11.3922rem; }
.staff__pack--o img { width: 7.4073rem; height: 10.4417rem; transform: rotate(8.21deg); }

/* ---------- Quick nav ---------- */
.quick { display: flex; gap: 1.2rem; padding: 2.8rem 2rem 2rem; background: var(--c-cream); }
.quick__btn {
  flex: 1 0 0; min-width: 0; max-width: 10.2333rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1rem 0.2rem 0.8rem; /* Figma plate border sits inside */
  background: #fff; border: 0.2rem solid var(--c-ink); border-radius: 1.6rem; box-shadow: 0.2rem 0.2rem 0 var(--c-ink);
  font-weight: 900; font-size: 1.4rem; line-height: 1.8rem; text-align: center; transition: background-color .15s ease-out, box-shadow .15s ease-out;
}
.quick__btn:hover, .quick__btn:focus-visible { background: var(--c-yellow); box-shadow: 0.3rem 0.3rem 0 var(--c-ink); }
.quick__btn .bubble__blob, .quick__btn .bubble__icon, .quick__chev { transition: transform .15s ease-out, filter .15s ease-out; }
.quick__btn:hover .bubble__blob, .quick__btn:focus-visible .bubble__blob { filter: brightness(0) invert(1); }
.quick__btn:hover .bubble__icon, .quick__btn:focus-visible .bubble__icon { transform: rotate(12deg); }
.quick__btn:hover .quick__chev, .quick__btn:focus-visible .quick__chev { transform: translateY(0.2rem); }
.bubble--40 { width: 4rem; height: 4rem; }
.bubble--40 .bubble__blob { left: -0.2rem; top: -0.2rem; width: 4.4rem; height: 4.4rem; }
.bubble--40 .bubble__icon { width: 2.4rem; height: 2.4rem; }
.quick__chev { width: 1.2rem; height: 1.2rem; }

/* ---------- Intro ---------- */
.intro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; padding: 6rem 3.2rem 0; background: var(--c-cream); text-align: center; }
.intro__glow { position: absolute; left: 2.75rem; top: 0; width: 32rem; height: 21.6rem; }
.intro__logo { position: relative; width: 16rem; height: 8.6rem; object-fit: contain; }
.intro__accent { width: 5rem; height: 0.4rem; border-radius: 0.2rem; background: var(--c-pink); }
.intro__lead { font-weight: 900; font-size: 1.6rem; line-height: 2.4rem; }
html[lang="en"] .intro__lead { width: 27.9rem; }
.intro__body { color: var(--c-body); font-size: 1.6rem; line-height: 2.9rem; }

/* ---------- Section heading (01–04) ---------- */
.sec { position: relative; padding: 3.2rem 2rem 4.8rem; background: var(--c-cream); display: flex; flex-direction: column; scroll-margin-top: 6.2rem; }
.sec-head { display: flex; align-items: center; gap: 0.8rem; min-height: 7.9rem; }
.sec-head__no { padding: 0.4rem 1rem; font-family: var(--f-sec); font-weight: 900; font-size: 4rem; line-height: 4.4rem; letter-spacing: 0.4rem; color: var(--sec-bg, var(--c-cream)); -webkit-text-stroke: 0.4rem #000; paint-order: stroke fill; } /* Figma: no fill + outside stroke 2 */
.ingr { --sec-bg: var(--c-yellow); }
.sec-head__title { flex: 1 0 0; font-weight: 900; font-size: 2.4rem; line-height: 3rem; letter-spacing: -0.01em; }

/* ---------- 01 How to take ---------- */
.how { padding: 4.8rem 2rem; gap: 1.2rem; }
.how__star { position: absolute; left: 13.091rem; top: 13.19rem; width: 2.896rem; height: 2.899rem; }
.dose { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
.dose__age { padding: 0.6rem 1.2rem; border-radius: 5rem; background: var(--c-ink); color: var(--c-yellow); font-weight: 900; font-size: 1.4rem; line-height: 2rem; }
.dose__card { width: 100%; display: flex; align-items: flex-start; padding: 1.8rem 0; background: #fff; border: 0.2rem solid var(--c-ink); border-radius: 2rem; box-shadow: 0.2rem 0.2rem 0 var(--c-ink); }
.dose__col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; white-space: nowrap; }
.dose__col + .dose__col { box-shadow: inset 0.15rem 0 0 var(--c-line); align-self: stretch; }
.bubble--52 { width: 5.2rem; height: 5.2rem; }
.bubble--52 .bubble__blob { left: -0.26rem; top: -0.26rem; width: 5.72rem; height: 5.72rem; }
.bubble--52 .bubble__icon { width: 3.2rem; height: 3.2rem; }
.dose__k { color: var(--c-gray); font-weight: 700; font-size: 1.4rem; line-height: 1.7rem; }
.dose__n { font-family: var(--f-num); font-weight: 900; font-size: 3.6rem; line-height: 3.6rem; color: var(--c-pink); }
.dose__u { font-weight: 900; font-size: 1.4rem; line-height: 1.7rem; }
.dose__when { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.dose__when-v { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-weight: 900; }
.dose__when-v b { font-size: 2.4rem; line-height: 2.6rem; }
.dose__when-v span { font-size: 1.6rem; line-height: 1.9rem; }
.warn { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0 1.4rem; color: var(--c-pink); font-weight: 900; font-size: 1.4rem; line-height: 2rem; }
.warn img { width: 2.8rem; height: 2.8rem; }
.usage { color: var(--c-gray); font-size: 1.2rem; line-height: 2rem; }

.wave { display: block; width: 37.5rem; height: 3.2rem; }

/* ---------- 02 Ingredients ---------- */
.ingr { background: var(--c-yellow); gap: 2.4rem; overflow: hidden; }
.ingr .sec-head { height: 11.2rem; }
.ingr__star { position: absolute; }
.ingr__star--1 { left: 0; top: 28.516rem; width: 10.637rem; height: 13.256rem; }
.ingr__star--2 { left: 27.242rem; top: 7.516rem; width: 10.258rem; height: 13.256rem; }
.ingr__star--3 { left: 26.451rem; top: 15.717rem; width: 7.661rem; height: 7.757rem; }
.ingr__star--4 { left: 1.966rem; top: 25.617rem; width: 7.661rem; height: 7.757rem; }
.tablet { position: relative; height: 20rem; }
.tablet__photo { position: absolute; left: 0; top: 0.904rem; width: 33.5rem; height: 18.2rem; border-radius: 1.6rem; object-fit: cover; }
.tablet__dose {
  position: absolute; left: 24.54rem; top: 10.54rem; width: 8.4rem; height: 8.4rem; transform: rotate(-8deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 99.9rem; background: var(--c-ink); color: #fff; font-weight: 900; white-space: nowrap;
}
.tablet__dose small { font-size: 0.8rem; line-height: 1rem; }
.tablet__dose b { font-family: var(--f-num); font-size: 3.2rem; line-height: 3.2rem; color: var(--c-yellow); }
.tablet__dose span { font-size: 1.2rem; line-height: 1.4rem; }
.ing { position: relative; display: flex; align-items: stretch; background: #fff; border: 0.2rem solid var(--c-ink); border-radius: 1.6rem; box-shadow: 0.2rem 0.2rem 0 var(--c-ink); }
.ing__amt { flex: none; width: 9.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.2rem 0.6rem; border-radius: 1.4rem 0 0 1.4rem; color: #fff; font-family: var(--f-num); font-weight: 900; white-space: nowrap; }
.ing__amt b { line-height: 1; }
.ing__amt span { font-size: 1.2rem; line-height: 1.4rem; }
.ing--1 .ing__amt { background: var(--c-pink); }
.ing--1 .ing__amt b { font-size: 3.6rem; letter-spacing: -0.02em; }
.ing--2 .ing__amt { background: var(--c-orange); }
.ing--2 .ing__amt b { font-size: 3.2rem; letter-spacing: -0.02em; }
.ing__txt { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; padding: 1.4rem; }
.ing__name { font-weight: 900; font-size: 1.6rem; line-height: 2.2rem; }
.ing__desc { font-size: 1.4rem; line-height: 2.3rem; }
/* Figma: index badges are absolute in the section at fixed positions (all languages) */
.ing__badge { position: absolute; z-index: 1; left: 30.8rem; width: 3.8rem; height: 5.325rem; }
.ing__badge--1 { top: 37.5rem; }
.ing__badge--2 { top: 52.55rem; }
.total { display: flex; align-items: stretch; gap: 0.4rem; }
.total__bar { flex: none; width: 0.8rem; background: var(--c-ink); }
.total__box { flex: 1 0 0; min-width: 0; height: 7rem; display: flex; align-items: center; padding: 1rem 1.2rem; background: var(--c-ink); color: #fff; font-weight: 700; font-size: 1.4rem; line-height: 2rem; }
.total__box em { font-style: normal; font-weight: 900; font-size: 2rem; color: var(--c-pink); }
.foot-note { font-size: 1.2rem; line-height: 1.9rem; }

/* ---------- 03 Sizes ---------- */
.sizes { gap: 1.6rem; }
.carousel { position: relative; width: 33.5rem; }
.carousel__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; height: 47.6rem; }
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; cursor: grab; }
.carousel__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carousel__viewport img { -webkit-user-drag: none; user-select: none; }
.carousel__track { position: relative; display: flex; gap: 1.2rem; width: max-content; padding-top: 2rem; transition: transform .5s ease-in-out; }
.carousel__track.is-peek { transform: translateX(-4rem); transition-duration: .5s; }
.carousel__track.is-back { transition-duration: .6s; }
.size-card + .size-card { scroll-snap-align: end; }
.size-card { position: relative; flex: none; width: 21.2rem; height: 42.8rem; overflow: hidden; scroll-snap-align: start; background: #fff; border: 0.2rem solid var(--c-ink); border-radius: 2rem; filter: drop-shadow(0.2rem 0.2rem 0 var(--c-ink)); }
.size-card__days { position: absolute; left: 1.4rem; top: 1.6rem; display: flex; align-items: baseline; gap: 0.4rem; font-weight: 900; white-space: nowrap; }
.size-card__days b { font-family: var(--f-num); font-size: 4rem; line-height: 4rem; letter-spacing: -0.03em; }
.size-card__days span { font-size: 1.6rem; line-height: 1.9rem; }
.size-card__glow { position: absolute; left: 2.9rem; top: 10.3rem; width: 15rem; height: 15rem; border-radius: 50%; opacity: .9; filter: blur(5rem); background: var(--c-yellow); }
.size-card--135 .size-card__glow { background: var(--c-orange); }
.size-card__shadow { position: absolute; left: 4.8rem; top: 28.3rem; width: 11.2rem; height: 2.4rem; }
.size-card__pkg { position: absolute; left: 2.1rem; top: 6.7rem; width: 16.6rem; height: 23.8rem; overflow: hidden; }
.size-card__pkg img { position: absolute; left: -3.1%; top: -1.63%; width: 106%; height: 103.32%; }
.size-card--135 .size-card__pkg img { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
.size-card__info { position: absolute; right: 1.4rem; bottom: 1.4rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.size-card__spec { color: var(--c-gray); font-size: 1.2rem; line-height: 1.7rem; text-align: right; white-space: pre-line; }
.size-card__price { padding: 0.4rem 1.2rem 0.5rem; border-radius: 9.9rem; background: var(--c-ink); color: var(--c-yellow); font-weight: 900; font-size: 1.2rem; line-height: 1.4rem; white-space: nowrap; }
.size-card__price b { font-family: var(--f-num); font-size: 1.6rem; }
.carousel__deco { position: absolute; z-index: 2; pointer-events: none; }
.carousel__deco--y { left: 17.091rem; top: 0.79rem; width: 2.896rem; height: 2.899rem; }
.carousel__deco--o { left: 24.938rem; top: 43.041rem; width: 2.85rem; height: 2.755rem; }
.carousel__dots { display: flex; justify-content: center; gap: 0.6rem; height: 1.2rem; align-items: flex-end; }
.carousel__dot { width: 0.8rem; height: 0.8rem; border-radius: 0.4rem; background: var(--c-ink); opacity: .3; transition: width .2s, opacity .2s; }
.carousel__dot.is-active { width: 2rem; opacity: 1; }
.sizes .foot-note { color: var(--c-gray2); }

/* ---------- 04 FAQ ---------- */
.faq { padding-bottom: 2.4rem; gap: 3rem; }
.faq__squiggle { position: absolute; left: 0; top: 0; width: 37.5rem; height: auto; pointer-events: none; }
.qa { position: relative; background: #fff; border: 0.2rem solid var(--c-ink); border-radius: 1.6rem; filter: drop-shadow(0.2rem 0.2rem 0 var(--c-ink)); }
.qa__q { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.4rem 4.4rem 1.2rem 1.4rem; font-weight: 900; font-size: 1.6rem; line-height: 2.2rem; }
.qa__q::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.15rem; background: url(../assets/faq-line.svg) no-repeat 0 0 / 100% 100%; } /* Figma Line 592:1938: 0-height, stroke drawn above */
.qa__a { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.4rem 1.4rem; font-size: 1.4rem; line-height: 2.4rem; }
.qa__a > div { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.qa__a > div.qa__one { gap: 0; }
.qa__badge { flex: none; width: 3rem; height: 3rem; border-radius: 9.9rem; display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-weight: 900; font-size: 1.6rem; line-height: 1.6rem; }
.qa__badge--q { background: var(--c-pink); color: #fff; }
.qa__badge--a { background: var(--c-yellow); box-shadow: inset 0 0 0 0.15rem var(--c-ink); }
.qa__stores { font-family: var(--f-ja); font-weight: 700; font-size: 1.2rem; }
.qa__ja { font-family: var(--f-ja); font-weight: 900; font-size: 1.6rem; color: var(--c-pink); }
.qa__idx { position: absolute; right: 1.6rem; top: -1.2rem; padding: 0.3rem 1rem; border: 0.2rem solid var(--c-ink); border-radius: 9.9rem; background: var(--c-pink); color: #fff; font-family: var(--f-num); font-weight: 900; font-size: 1.2rem; line-height: normal; letter-spacing: .1em; }
.qa__btnwrap { display: block; padding: 0 1.4rem 1.6rem; }
.btn-pill {
  position: relative; width: 30.3rem; display: flex; align-items: center; justify-content: center; gap: 0.8rem; padding: 1rem; border: 0.2rem solid var(--c-ink); border-radius: 9.9rem;
  background: linear-gradient(to bottom, var(--c-cream), var(--c-yellow)); box-shadow: 0.2rem 0.2rem 0 var(--c-ink), inset 0 -1.25rem 0 rgba(255, 235, 0, .15);
  font-weight: 900; font-size: 1.6rem; line-height: 2.2rem; white-space: nowrap; transition: box-shadow .15s ease-out;
}
.btn-pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c-yellow); opacity: 0; transition: opacity .15s ease-out; }
.btn-pill > * { position: relative; transition: transform .15s ease-out; }
.btn-pill:hover, .btn-pill:focus-visible { box-shadow: 0.3rem 0.3rem 0 var(--c-ink); }
.btn-pill:hover::before, .btn-pill:focus-visible::before { opacity: 1; }
.btn-pill:hover .pin, .btn-pill:focus-visible .pin { transform: rotate(12deg); }
.btn-pill:hover span, .btn-pill:focus-visible span { transform: translateX(0.16rem); }
.btn-pill:hover .arrow, .btn-pill:focus-visible .arrow { transform: translateX(0.36rem); }
.btn-pill { font-size: 1.25rem; gap: 0.6rem; padding-inline: 0.8rem; }
.btn-pill img { width: 1.8rem; height: 1.8rem; }
.btn-pill .arrow { width: 1rem; height: 1rem; }

/* ---------- Accordion ---------- */
.more { padding: 1.6rem 2rem 4.8rem; background: var(--c-cream); }
.acc { width: 33.5rem; border-radius: 1.6rem; background: var(--c-ink); overflow: hidden; }
.acc.is-open { padding: 0 0.4rem 0.4rem; }
.acc__head { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.6rem 1.6rem 1.6rem 1.8rem; text-align: left; color: #fff; font-weight: 900; font-size: 1.6rem; line-height: 2.2rem; }
.acc__head > img { width: 2.2rem; height: 2.2rem; flex: none; }
.acc__head > span:not(.acc__chev) { flex: 1 0 0; min-width: 0; }
.acc__chev { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 9.9rem; background: var(--c-yellow); display: flex; align-items: center; justify-content: center; }
.acc__chev img { width: 1.4rem; height: 1.4rem; }
.acc__chev .up { display: none; }
.acc.is-open .acc__chev .up { display: block; }
.acc.is-open .acc__chev .down { display: none; }
.acc__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.2rem 1.6rem 1.8rem; border-radius: 1.2rem; background: #fff; font-size: 1.4rem; line-height: 2.3rem; }
.acc__body[hidden] { display: none; }
.acc__wrap { overflow: hidden; transition: height .3s ease-out; }
.acc__h { display: flex; gap: 1.2rem; font-weight: 900; line-height: 1.4; }
.acc__h::before { content: ""; flex: none; width: 0.3rem; background: var(--c-pink); }
.acc__h:not(:first-child) { margin-top: 0.8rem; }
.acc__table { display: flex; flex-direction: column; }
.acc__table div { display: flex; justify-content: space-between; padding: 0.8rem; border: 1px solid var(--c-line); white-space: nowrap; }
.acc__table div:first-child { color: var(--c-gray); font-weight: 700; }
.acc__rule { height: 1px; background: var(--c-line); }
.acc__note { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; padding: 0.8rem 1rem; border-radius: 1.2rem; background: rgba(227, 0, 91, .08); color: var(--c-pink); font-weight: 700; font-size: 1.2rem; line-height: 1.8rem; }
.acc__note img { width: 2rem; height: 2rem; flex: none; }

/* ---------- Footer ---------- */
.footer { position: relative; height: 22.5rem; background: var(--c-orange); }
.footer > * { position: absolute; }
.footer__ticker { left: -2.1rem; top: 0; width: 41.7rem; height: 3.5rem; background: var(--c-ink); }
.footer__ticker .jp { color: var(--c-yellow); }
.footer__ticker .en { color: #fff; }
.footer__logo { left: 8.4rem; top: 5.2rem; width: 20.8rem; height: 10.4rem; object-fit: contain; }
.footer__tag { left: 50%; top: 17.3rem; transform: translateX(-50%); padding: 0.35rem 0.95rem; background: #fff; box-shadow: inset 0 0 0 0.15rem var(--c-ink); font-family: var(--f-ja); font-weight: 700; font-size: 1.6rem; line-height: 2.2rem; white-space: nowrap; }

/* ---------- Fixed buttons (positions fixed by design — do not move) ---------- */
/* Rail: a 0-height fixed strip at the bottom of the viewport, exactly as wide as the column */
.fixed-rail { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; margin: 0 auto; width: var(--col); max-width: 100%; height: 0; }
.cta {
  position: absolute; z-index: 1; left: 1.5rem; bottom: 2.85rem; width: 11rem; height: 4rem;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0 1.8rem 0 1.6rem; border: 0.2rem solid var(--c-ink); border-radius: 9.9rem;
  background: linear-gradient(to bottom, #f79f85, var(--c-pink)); box-shadow: inset 0 -2rem 0 rgba(227, 0, 91, .15);
  color: #fff; font-weight: 900; font-size: 1.2rem; line-height: 1.7rem; white-space: nowrap; transition: box-shadow .15s ease-out;
}
.cta::before { content: ""; position: absolute; inset: -0.2rem; border-radius: inherit; background: var(--c-pink); border: 0.2rem solid var(--c-ink); opacity: 0; transition: opacity .15s ease-out; }
.cta > * { position: relative; }
.cta:hover, .cta:focus-visible { box-shadow: 0 1px 0 var(--c-ink); }
.cta:hover::before, .cta:focus-visible::before { opacity: 1; }
.cta img { width: 1.8rem; height: 1.8rem; flex: none; }
.totop {
  position: absolute; z-index: 1; left: 31.2rem; bottom: 3.12rem; width: 4.8rem; height: 3.228rem;
  display: flex; align-items: center; justify-content: center; border: 0.2rem solid var(--c-ink); border-radius: 9.9rem;
  background: linear-gradient(to bottom, var(--c-yellow) 25%, #998d00); box-shadow: inset 0 -0.75rem 0 rgba(153, 141, 0, .15);
  transition: opacity .2s ease-out, translate .2s ease-out, box-shadow .2s ease-out;
}
.totop::before { content: ""; position: absolute; inset: -0.2rem; border-radius: inherit; background: var(--c-yellow); border: 0.2rem solid var(--c-ink); opacity: 0; transition: opacity .2s ease-out; }
.totop img { position: relative; width: 2rem; height: 2rem; transition: transform .2s ease-out; }
.totop:hover, .totop:focus-visible { box-shadow: 0 1px 0 var(--c-ink); }
.totop:hover::before, .totop:focus-visible::before { opacity: 1; }
.totop:hover img, .totop:focus-visible img { transform: translateY(-0.2rem); }
.js .totop:not(.is-visible) { opacity: 0; translate: 0 0.8rem; pointer-events: none; }

/* Explicit rounded line boxes where font-size differs from the parent (Figma rounds line height to whole px) */
.qa__stores { line-height: 2rem; }
.qa__ja { line-height: 2.75rem; }
.ticket__key { line-height: 1.8rem; }
.ticket__val--xl { line-height: 4.2rem; }
.ticket__val--l { line-height: 3.1rem; }
.ticket__val--s { line-height: 1.8rem; }
.total__box em { line-height: 2.8rem; }
.size-card__price { line-height: 1.9rem; }
.acc__h { font-size: 1.4rem; line-height: 2rem; }
.acc__table div { line-height: 2.3rem; }
.qa__q > span:last-child { flex: 1 0 0; min-width: 0; }

/* =========================================================
   Motion — from Figma "Spec – Motion (for development)" 125:275
   and "Components – Motion" 123:510 / @2x 141:151
   ========================================================= */
/* Hero: packages float 1rem, 1.8s ease-in-out each way */
.hero__pkg { animation: pkg-float 1.8s ease-in-out infinite alternate; }
@keyframes pkg-float { from { transform: translateY(0); } to { transform: translateY(-1rem); } }
.hero__shadow { transform-origin: 50% 50%; animation: shadow-float 1.8s ease-in-out infinite alternate; }
@keyframes shadow-float { from { transform: scale(1); opacity: 1; } to { transform: scale(.8); opacity: .55; } }
/* Hero: badge wiggle ±3° every 2.4s (Rest 2.4s → Left 120ms → Right 160ms → Rest 120ms) */
.hero__badge { animation: badge-wiggle 2.8s infinite; }
@keyframes badge-wiggle {
  0%, 85.71% { transform: rotate(0); animation-timing-function: ease-out; }
  90% { transform: rotate(-3deg); animation-timing-function: ease-in-out; }
  95.71% { transform: rotate(3deg); animation-timing-function: ease-out; }
  100% { transform: rotate(0); }
}
/* Tickers: 1 unit (≈22.75rem) per 4s; 6 units per set → 24s. Hero ←, footer → */
.ticker__track { animation: ticker 24s linear infinite; }
.footer__ticker .ticker__track { animation-direction: reverse; }
/* Hero on load: text boxes slide in one by one (300ms, stagger 100ms); package rises 2.4rem→0 (500ms) */
.js .hero__line, .js .hero__quote { opacity: 0; translate: -2.4rem 0; animation: hero-in .3s ease-out forwards; animation-delay: calc(var(--i, 0) * 100ms); }
@keyframes hero-in { to { opacity: 1; translate: 0 0; } }
.js .hero__pkg { translate: 0 2.4rem; opacity: 0; animation: pkg-rise .5s ease-out forwards, pkg-float 1.8s ease-in-out .5s infinite alternate; }
@keyframes pkg-rise { to { translate: 0 0; opacity: 1; } }
.js .hero__shadow { animation-delay: .5s; animation-fill-mode: backwards; }
/* 02: "9 tablets" badge sways 8°↔2°, 2s ease-in-out */
.tablet__dose { animation: dose-sway 2s ease-in-out infinite alternate; }
@keyframes dose-sway { from { transform: rotate(-8deg); } to { transform: rotate(-2deg); } }
/* Global scroll reveal: fade up 1.6rem, 400ms ease-out, stagger 80ms, once */
.js [data-reveal] { opacity: 0; translate: 0 1.6rem; transition: opacity .4s ease-out, translate .4s ease-out; transition-delay: calc(var(--d, 0) * 80ms); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .hero__line, .js .hero__quote, .js .hero__pkg, .js [data-reveal] { opacity: 1 !important; translate: none !important; }
}