/*
 * Responsive polish — 2026-08-02
 * Loaded last so the existing art direction stays intact while spacing,
 * card density and touch targets adapt smoothly across device sizes.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* The approved FV artwork already contains its own bottom transition. */
.hero::before,
.hero::after {
  display: none;
}

.hero-fv-pc {
  position: relative;
  z-index: 1;
}

.lp,
.lp > *,
.purchase-card,
.purchase-info,
.scene-card,
.handfoot-card,
.howto-step,
.set-list li {
  min-width: 0;
}

/* 限定価格の副CTA削除後、購入ボタンをカード幅いっぱいにする。 */
.button-grid.button-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

/* Keep long Japanese labels inside their cards without forcing page overflow. */
.scene-cta,
.button-grid a,
.cta-line,
.mobile-buy-bar {
  text-wrap: balance;
}

@media (max-width: 1023px) {
  /* The section already supplies horizontal padding, so avoid a second inset. */
  .product-lineup .purchase-card {
    width: 100%;
    max-width: 790px;
  }

  /* Preserve a useful product-photo area from small phones through tablets. */
  .purchase-card--colors .purchase-visual {
    height: clamp(285px, 82vw, 420px);
  }

  .button-grid a {
    min-height: 48px;
  }

  .color-choice {
    min-height: 50px;
  }

  .purchase-info--colors .purchase-trust li {
    min-height: 40px;
    padding-inline: 8px;
    text-align: center;
    white-space: normal;
  }

  .faq-list {
    max-width: 720px;
  }

  .set-list li {
    align-items: center;
  }

  .set-list span {
    min-width: 0;
    text-align: right;
  }

  .mobile-buy-bar {
    right: max(12px, env(safe-area-inset-right, 0px));
    min-height: 46px;
    padding: 11px 16px;
  }
}

/* Small phones: keep the product name and color count on one clean line. */
@media (max-width: 360px) {
  .product-line {
    grid-template-columns: minmax(0, 1fr) 72px;
  }

  .product-line strong {
    font-size: 27px;
    white-space: nowrap;
  }

  .product-line span {
    font-size: 11px;
  }

  .purchase-info.purchase-info--colors {
    padding-inline: 20px !important;
  }

  .color-choice-list {
    gap: 8px;
  }

  .color-choice {
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 7px;
    padding-inline: 7px;
  }

  .color-choice > span {
    width: 26px;
    height: 26px;
  }

  .color-choice strong {
    font-size: 14px;
  }

  .mobile-buy-bar {
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding-inline: 14px;
    font-size: 12.5px;
  }
}

/* Mid-size phones: six cards form a balanced 2 × 3 grid. */
@media (min-width: 375px) and (max-width: 639px) {
  .howto-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Portrait tablets: six cards form an even 3 × 2 grid.
 */
@media (min-width: 640px) and (max-width: 1023px) {
  .scene-select,
  .product-lineup,
  .howto,
  .setcontents {
    padding-right: 32px;
    padding-left: 32px;
  }

  /* 2026-08-07 修正：2列に3枚だと「2枚＋下に1枚だけ」になり、
     3枚目だけ大きさも位置も違って見えていた（けんし指摘）。
     シーンは3枚セットなので、この幅でも3列のまま並べて大きさを揃える。 */
  .scene-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .scene-card__media {
    aspect-ratio: 5 / 4;
  }

  .scene-card__body {
    padding: 20px;
  }

  .scene-card__cta {
    height: 48px;
  }

  /* 2026-08-07 追加：ハンド＆フットの3枚も、シーンと同じくこの幅で3列に揃える。
     （styles.css の @media (max-width:1023px) では1列に畳んでいたのを上書き。
       このファイルは styles.css より後に読み込まれるので、こちらが勝つ。） */
  .handfoot-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .handfoot-card__body {
    padding: 20px 16px 22px;
  }

  .handfoot-card__cta {
    height: 48px;
  }

  .set-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .howto-steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .howto-step {
    grid-column: span 2;
  }
}

/* Phone and small-tablet landscape: use the available width in the first view. */
@media (min-width: 600px) and (max-width: 899px) and (orientation: landscape) {
  .hero {
    display: grid;
    grid-template-columns: minmax(285px, 1fr) minmax(240px, 0.9fr);
    grid-template-areas:
      "brand brand"
      "copy image"
      "offer offer";
    gap: 22px 20px;
    align-items: center;
    padding: 28px 24px 36px;
  }

  .hero-brand-top {
    grid-area: brand;
    margin-bottom: 0;
  }

  .hero-text {
    grid-area: copy;
  }

  .hero-text h1 {
    font-size: clamp(28px, 4.5vw, 32px);
    white-space: nowrap;
  }

  .hero-product {
    grid-area: image;
    width: min(100%, 280px);
    margin: 0 auto;
  }

  .brand-lockup {
    grid-area: offer;
    width: min(100%, 540px);
    margin-top: 0;
  }

  .hero-editorial-offer--mobile {
    width: min(100%, 520px);
  }
}

/*
 * Keep the first view identical to the approved PC artwork on every device.
 * The source image scales proportionally, while the sections below retain
 * their device-specific, readable layouts.
 */
@media (max-width: 1023px) {
  .hero {
    display: block;
    min-height: 0;
    padding: 0;
    text-align: left;
  }

  .hero-fv-pc {
    display: block;
    width: 100%;
    line-height: 0;
  }

  .hero-fv-pc img {
    display: block;
    width: 100%;
    height: auto;
  }

  .hero .hero-brand-top,
  .hero .mini-photo-left,
  .hero .hero-text,
  .hero .hand-script,
  .hero .hero-product,
  .hero .orb-photo,
  .hero .brand-lockup {
    display: none;
  }
}

/*
 * Scene cards: narrow three-column layouts mixed left-aligned copy with
 * centered price/CTA elements. Center the whole content rhythm until the
 * cards are wide enough for the desktop editorial alignment.
 */
/* Smooth the large 1023px -> 1024px horizontal-padding jump. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .scene-select {
    padding-right: clamp(48px, calc(10.6vw - 60.5px), 92px);
    padding-left: clamp(48px, calc(10.6vw - 60.5px), 92px);
  }
}

@media (max-width: 1279px) {
  .scene-card__body {
    text-align: center;
  }

  .scene-card__body h3,
  .scene-card__catch,
  .scene-card__desc {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .scene-card__desc {
    max-width: 30rem;
  }

  .scene-card__body .price-tag {
    justify-content: center;
  }

  .scene-card__cta {
    align-self: stretch;
    width: 100%;
  }
}

/* Three-column tablet/small-laptop cards keep matching copy and price rows. */
@media (min-width: 640px) and (max-width: 1279px) {
  .scene-card__body {
    grid-template-rows: auto minmax(3.2em, auto) minmax(9em, 1fr) auto auto;
    padding: 20px 16px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}