@charset "UTF-8";
/* ==========================================================================
   Choco Flakes x Mobile Suit Gundam campaign LP
   Base: SP design 390px wide. 1rem = 10 design px.
   <= 500px : rem scales with viewport (100vw / 39)
   >= 501px : column fixed at 500px (rem = 500px / 39), side background
   >= 900px : PC right menu / apply button, back-to-top only
              (column shifts left below 1300px; in the 2-column range the zaku leaves to the left, hidden below 900px)
   ========================================================================== */

:root {
  --red: #d8222a;
  --red-dark: #c5302e;
  --navy: #12325e;
  --yellow: #fed700;
  --black: #333;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: calc(100vw / 39);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: var(--black);
  background: #fff;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border: 0;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
p,
dl,
dd {
  margin: 0;
}

@media (hover: hover) {
  a,
  button {
    transition: opacity .2s;
  }
  a:hover,
  button:hover {
    opacity: .8;
  }
}

/*
  Button-like links: pressed down instead of fading.
  Buttons with a drop shadow sink by the shadow height and lose the shadow.
*/
.btn,
.btn-apply,
.floating__apply,
.pc-nav__apply,
.prize-card__size,
.carousel__arrow,
.totop,
.period__nav a,
.modal__close {
  transition: transform .12s ease-out, box-shadow .12s ease-out, filter .12s ease-out;
}

.period__nav a {
  display: block;
}

.btn:active,
.btn-apply:active,
.floating__apply:active {
  transform: translateY(.4rem);
  box-shadow: none;
  filter: none;
}

.pc-nav__apply:active {
  transform: translateY(calc(5 * var(--km)));
  filter: none;
}

.prize-card__size:active,
.carousel__arrow:active,
.totop:active,
.period__nav a:active,
.modal__close:active {
  transform: translateY(.2rem);
}

@media (hover: hover) {
  .btn:hover,
  .btn-apply:hover,
  .floating__apply:hover,
  .pc-nav__apply:hover,
  .prize-card__size:hover,
  .carousel__arrow:hover,
  .totop:hover,
  .period__nav a:hover,
  .modal__close:hover {
    opacity: 1;
  }

  .btn:hover,
  .btn-apply:hover,
  .floating__apply:hover {
    transform: translateY(.4rem);
    box-shadow: none;
    filter: none;
  }

  .pc-nav__apply:hover {
    transform: translateY(calc(5 * var(--km)));
    filter: none;
  }

  .prize-card__size:hover,
  .carousel__arrow:hover,
  .totop:hover,
  .period__nav a:hover,
  .modal__close:hover {
    transform: translateY(.2rem);
  }
}

/* ---------- page column ---------- */
.page {
  position: relative;
  z-index: 2;
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

.page > div,
.page > section,
.page > footer {
  position: relative;
  overflow: hidden;
}

/* absolutely placed decoration (design px via custom properties) */
.deco {
  position: absolute;
  left: calc(var(--x) * .1rem);
  top: calc(var(--y) * .1rem);
  width: calc(var(--w) * .1rem);
  max-width: none;
  height: auto;
  transform: rotate(calc(var(--r) * 1deg));
  pointer-events: none;
}

.deco--crop {
  display: block;
  height: calc(var(--h) * .1rem);
  overflow: hidden;
}

.deco--crop img {
  position: absolute;
  max-width: none;
  height: auto;
}

.sec-title {
  position: relative;
  z-index: 1;
  line-height: 0;
}

.stripe {
  background: linear-gradient(90deg,
    var(--red-dark) 0 1.69rem,
    var(--red) 1.69rem 3.24rem,
    var(--red-dark) 3.24rem 6.43rem,
    var(--red) 6.43rem 8.04rem,
    var(--red-dark) 8.04rem 9.6rem) 0 0 / 9.6rem 100% repeat-x;
}

.notes {
  position: relative;
  z-index: 1;
  width: 35.8rem;
  font-size: 1.2rem;
  line-height: 1.5;
}

.notes--white {
  color: #fff;
}

.btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  width: 100%;
  padding: 1.6rem 0;
  border-radius: 999px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

.btn img {
  width: 1.4rem;
}

.btn--yellow {
  padding: 1.4rem 0;
  border: .2rem solid var(--black);
  background: var(--yellow);
  color: var(--black);
  box-shadow: 0 .4rem 0 rgba(0, 0, 0, .25);
}

.btn--red {
  background: var(--red);
  color: #fff;
  box-shadow: 0 .4rem 0 #fff;
}

/* brand site link (contact section) with faint flakes inside the pill */
.btn--brand {
  overflow: hidden;
  background: #7f422c;
  color: #fff;
  box-shadow: 0 .4rem 0 #a29494;
}

.btn--brand .deco {
  width: calc(var(--w) * .1rem);
}

.btn--brand .btn__label,
.btn--brand .btn__label + img {
  position: relative;
}

/* ---------- 01 FV ---------- */
.fv__title img {
  display: block;
  width: 100%;
}

/* ---------- 02 period ---------- */
.period {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 3.2rem 1.6rem;
  background: var(--red);
}

.period__block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}

.label-pill {
  padding: .3rem 2.4rem;
  border: 1px solid #000;
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 0 .2rem 0 var(--black);
  color: var(--black);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
}

.period__date {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 3rem;
  text-align: center;
  white-space: nowrap;
}

.period__date .n,
.products__label .n {
  font-size: 2rem;
  line-height: 1;
}

.period__nav {
  position: relative;
  z-index: 1;
  display: flex;
  gap: .6rem;
  width: 35.8rem;
  padding-left: .5rem;
}

.period__nav img {
  display: block;
  width: 11.3rem;
}

/* ---------- 03 outline ---------- */
.outline {
  height: 45.7rem;
  padding: 3.2rem 1.6rem;
  background: var(--yellow);
}

.outline__title {
  position: relative;
  z-index: 1;
  color: var(--red);
  font-size: 2.5778rem;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  /*
    Outlined text with round corners (text-stroke can only make sharp joins):
    yellow outline = shadows on a 3.87px circle around the glyph,
    drop shadow of the outlined shape = same circle 5.16px down in #bea100
    (25% black over the yellow background).
  */
  text-shadow:
    0.387rem 0 0 var(--yellow),
    0.374rem 0.100rem 0 var(--yellow),
    0.335rem 0.193rem 0 var(--yellow),
    0.274rem 0.274rem 0 var(--yellow),
    0.194rem 0.335rem 0 var(--yellow),
    0.100rem 0.374rem 0 var(--yellow),
    0 0.387rem 0 var(--yellow),
    -0.100rem 0.374rem 0 var(--yellow),
    -0.193rem 0.335rem 0 var(--yellow),
    -0.274rem 0.274rem 0 var(--yellow),
    -0.335rem 0.193rem 0 var(--yellow),
    -0.374rem 0.100rem 0 var(--yellow),
    -0.387rem 0 0 var(--yellow),
    -0.374rem -0.100rem 0 var(--yellow),
    -0.335rem -0.194rem 0 var(--yellow),
    -0.274rem -0.274rem 0 var(--yellow),
    -0.194rem -0.335rem 0 var(--yellow),
    -0.100rem -0.374rem 0 var(--yellow),
    0rem -0.387rem 0 var(--yellow),
    0.100rem -0.374rem 0 var(--yellow),
    0.194rem -0.335rem 0 var(--yellow),
    0.274rem -0.274rem 0 var(--yellow),
    0.335rem -0.194rem 0 var(--yellow),
    0.374rem -0.100rem 0 var(--yellow),
    0.190rem 0 0 var(--yellow),
    0.165rem 0.095rem 0 var(--yellow),
    0.095rem 0.165rem 0 var(--yellow),
    0 0.190rem 0 var(--yellow),
    -0.095rem 0.165rem 0 var(--yellow),
    -0.165rem 0.095rem 0 var(--yellow),
    -0.190rem 0 0 var(--yellow),
    -0.165rem -0.095rem 0 var(--yellow),
    -0.095rem -0.165rem 0 var(--yellow),
    0rem -0.190rem 0 var(--yellow),
    0.095rem -0.165rem 0 var(--yellow),
    0.165rem -0.095rem 0 var(--yellow),
    0.387rem 0.516rem 0 #bea100,
    0.374rem 0.616rem 0 #bea100,
    0.335rem 0.709rem 0 #bea100,
    0.274rem 0.789rem 0 #bea100,
    0.194rem 0.851rem 0 #bea100,
    0.100rem 0.889rem 0 #bea100,
    0 0.903rem 0 #bea100,
    -0.100rem 0.889rem 0 #bea100,
    -0.193rem 0.851rem 0 #bea100,
    -0.274rem 0.789rem 0 #bea100,
    -0.335rem 0.709rem 0 #bea100,
    -0.374rem 0.616rem 0 #bea100,
    -0.387rem 0.516rem 0 #bea100,
    -0.374rem 0.415rem 0 #bea100,
    -0.335rem 0.322rem 0 #bea100,
    -0.274rem 0.242rem 0 #bea100,
    -0.194rem 0.180rem 0 #bea100,
    -0.100rem 0.142rem 0 #bea100,
    0rem 0.129rem 0 #bea100,
    0.100rem 0.142rem 0 #bea100,
    0.194rem 0.180rem 0 #bea100,
    0.274rem 0.242rem 0 #bea100,
    0.335rem 0.322rem 0 #bea100,
    0.374rem 0.415rem 0 #bea100,
    0.190rem 0.516rem 0 #bea100,
    0.165rem 0.611rem 0 #bea100,
    0.095rem 0.680rem 0 #bea100,
    0 0.706rem 0 #bea100,
    -0.095rem 0.680rem 0 #bea100,
    -0.165rem 0.611rem 0 #bea100,
    -0.190rem 0.516rem 0 #bea100,
    -0.165rem 0.421rem 0 #bea100,
    -0.095rem 0.351rem 0 #bea100,
    0rem 0.326rem 0 #bea100,
    0.095rem 0.351rem 0 #bea100,
    0.165rem 0.421rem 0 #bea100,
    0 0.5156rem 0 #bea100;
  white-space: nowrap;
}

.outline__badge {
  position: absolute;
  top: 17.9rem;
  left: 18.36rem;
  width: 20.64rem;
}

.outline__note {
  position: absolute;
  z-index: 1;
  top: 37.6rem;
  left: 23.7rem;
  width: 13.2rem;
  font-size: 1.2rem;
  line-height: 1.5;
}

/* ---------- 04 prize ---------- */
.prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 3.2rem 1.6rem;
}

.prize__char {
  position: absolute;
  top: 106.9rem;
  left: 10.1rem;
  width: 36.2rem;
  max-width: none;
  pointer-events: none;
}

.prize__cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.prize-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: 35.8rem;
  border-radius: .8rem;
  background: linear-gradient(#c0e2ec, #fff 63.462%);
  overflow: hidden;
}

.prize-card__head {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 6.2rem;
  padding-top: 1rem;
  background: url(../images/band.jpg) center top / 47.4rem auto no-repeat;
}

.prize-card__head-title {
  height: 4.156rem;
  width: auto;
  max-width: none;
}

.prize-card__img--char {
  width: 18.9rem;
  border-radius: .57rem;
  box-shadow: .4rem .4rem .4rem #4c95be;
}

.prize-card__img--cushion {
  width: 32.51rem;
}

.prize-card__name {
  width: 29.4rem;
  color: var(--navy);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.prize-card__size {
  padding: .8rem 2.4rem;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}

.prize-card__count {
  position: relative;
  z-index: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.7rem;
  /* room for the ruby above "39": ruby + text are centered in the band as one block */
  padding-top: 1.2rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.prize-card__count::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url(../images/band.jpg) center top / 47.4rem auto no-repeat;
  transform: rotate(180deg);
}

.prize-card__num {
  position: relative;
  font-size: 2.4rem;
  padding-bottom: 3px;
}

.prize-card__ruby {
  position: absolute;
  bottom: calc(100% + .1rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
}

.prize__wchance-head {
  position: relative;
  z-index: 1;
  width: 33.2rem;
  height: 12.8rem;
}

.prize__wchance-head img {
  position: absolute;
  top: 3.43rem;
  left: 0;
  width: 23rem;
}

.wchance-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: 35.8rem;
  padding: 2.4rem 1.6rem 0;
  border-radius: .8rem;
  background: var(--yellow);
  overflow: hidden;
}

.wchance-card__img {
  width: 26.9rem;
}

.wchance-card__name {
  color: var(--navy);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}

.wchance-card__count {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.6rem;
  margin: 0 -1.6rem;
  background: var(--navy);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}

.wchance-card__num {
  font-size: 2.4rem;
  padding-bottom: 3px;
}

/* ---------- 06 products ---------- */
.products {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 3.2rem 1.6rem 16.2rem;
  background: #fff;
}

.products__flakes-bottom {
  position: absolute;
  bottom: 0;
  left: -4.2rem;
  width: 53.2rem;
  max-width: none;
  pointer-events: none;
}

.products__flakes-top {
  position: absolute;
  z-index: 2;
  top: -4.915rem;
  left: -6.9rem;
  width: 56.5rem;
  max-width: none;
  pointer-events: none;
}

.sec-title--products img {
  width: 18.18rem;
}

.sec-title--products::after {
  content: "";
  display: block;
  width: 11.7rem;
  height: .3rem;
  margin: 2.1rem auto 0;
  background: var(--red);
}

.products__lead {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.products__box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  padding: 3.2rem 0;
  border-radius: .8rem;
  background: #fff9d1;
}

.products__label {
  padding: .4rem 2.4rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 3rem;
}


.products__list {
  display: grid;
  grid-template-columns: repeat(2, 15rem);
  gap: 1.6rem 2.4rem;
}

.products__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}

.products__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15rem;
  height: 14rem;
  border-radius: .4rem;
  background: #fff;
  color: #737373;
  font-size: 1.2rem;
  line-height: 1.5;
}

/* product photo at its design height (about 96-114 x 122), centered on the white card */
.products__photo img {
  display: block;
  width: auto;
  max-width: none;
  height: 12.2rem;
}

.products__name {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* ---------- 05 limited package ---------- */
.package {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 3.2rem 1.6rem;
}

.sec-title--package img {
  width: 31.2rem;
}

.package__lead {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.carousel {
  position: relative;
  width: 35.8rem;
  height: 32rem;
}

/* side padding (35.8 - 28) / 2 lets the first and last slides snap to the center */
.carousel__track {
  display: flex;
  gap: 1.6rem;
  height: 100%;
  padding: 0 3.9rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 28rem;
  height: 100%;
  scroll-snap-align: center;
  /* stop at every slide even after a fast fling (Android) */
  scroll-snap-stop: always;
}

.carousel__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: .8rem;
  background: #fff;
  color: #737373;
  font-size: 1.6rem;
  line-height: 1.5;
  overflow: hidden;
}

/* one slide per product: 3 package designs placed as in the design (design px) */
.carousel__ph--set {
  position: relative;
  display: block;
}

.carousel__pkg {
  position: absolute;
  left: calc(var(--x) * .1rem);
  top: calc(var(--y) * .1rem);
  width: calc(var(--w) * .1rem);
  max-width: none;
  height: auto;
}

.carousel__arrow {
  position: absolute;
  top: 13.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.carousel__arrow--prev {
  left: 0;
}

.carousel__arrow--next {
  right: 0;
}

.carousel__dots {
  display: flex;
  gap: .8rem;
}

.carousel__dot {
  width: .8rem;
  height: .8rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffd5d7;
}

.carousel__dot[aria-selected="true"] {
  background: var(--yellow);
}

/* ---------- 07 how to apply ---------- */
.howto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 3.2rem 1.6rem 19.77rem;
  background: #000;
}

.howto::before {
  content: "";
  position: absolute;
  top: -17.2rem;
  left: -.6rem;
  width: 70.7rem;
  height: 51.2rem;
  background: url(../images/bg_space.jpg) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.sec-title--howto img {
  width: 18.3rem;
}

.steps {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.2rem;
}

.steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 7.478rem;
  height: 12.904rem;
  padding: 1.6rem .8rem 0;
  border: 1px solid var(--navy);
  background: #fff;
  box-shadow: .2rem .2rem 0 #ffd900;
}

.steps__num {
  position: absolute;
  top: .135rem;
  left: 0;
  width: 5.69rem;
  max-width: none;
}

.steps__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 6.4rem;
  height: 6.4rem;
  margin-bottom: -.6rem;
}

.steps__icon img {
  width: 3.2rem;
}

.steps__mini-btn {
  position: absolute;
  top: 1.604rem;
  left: .213rem;
  width: 5.977rem;
  padding: .58rem 0;
  border-radius: 999px;
  background: #ffd900;
  color: var(--navy);
  font-size: .8rem;
  font-weight: 700;
  line-height: .6rem;
  text-align: center;
  white-space: nowrap;
}

.steps__icon .steps__hand {
  position: absolute;
  top: 3.083rem;
  left: 3.847rem;
  width: 1.85rem;
  max-width: none;
  transform: rotate(-111.93deg);
}

.steps__text {
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.btn-apply {
  position: relative;
  z-index: 1;
  display: block;
  width: 35.8rem;
  border-radius: 999px;
  /* shadow follows the image shape so no dark seam shows between the button and its shadow */
  filter: drop-shadow(0 .4rem 0 #fff);
}

.btn-apply img {
  display: block;
  width: 100%;
}

.receipt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 35.8rem;
  height: 57.6rem;
  padding-top: 1.5rem;
  background: #fff;
}

.receipt__title {
  color: var(--navy);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

.receipt__title::after {
  content: "";
  display: block;
  width: 31.08rem;
  height: 1px;
  margin: 1.3rem auto 0;
  background: #000;
}

.receipt__img {
  width: 28.04rem;
  margin-top: 1.7rem;
}

/* "no postcard / letter" note under the apply button */
.apply-note {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
}

.howto__char {
  position: absolute;
  top: 134.7rem;
  left: 8.93rem;
  width: 22.14rem;
  max-width: none;
  pointer-events: none;
}

/* ---------- 08 terms ---------- */
.terms {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 3.2rem 1.6rem;
  background: #fff;
}

.sec-title--terms img {
  width: 11rem;
}

.terms__box {
  width: 35.8rem;
  height: 32rem;
  padding: 1.6rem;
  border-radius: .8rem;
  background: #f0f3f4;
  overflow-y: auto;
  font-size: 1.2rem;
  line-height: 1.5;
}

.terms__box:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.terms__body h3,
.terms__body h4 {
  margin-top: 1.2em;
  font-size: 1.2rem;
  font-weight: 700;
}

.terms__body h3:first-child {
  margin-top: 0;
}

.terms__body a {
  word-break: break-all;
}

/* ---------- 09 about Gundam ---------- */
.gundam {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 3.2rem 1.6rem;
  background: #242424;
  clip-path: polygon(0 0, 19.8rem 0, 21.65rem 1.4rem, 100% 1.4rem, 100% 100%, 0 100%);
}

.gundam__title {
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.gundam__kv {
  width: 32.2rem;
}

.gundam__text {
  width: 32.2rem;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
}

/* ---------- 10 contact ---------- */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 3.2rem 1.6rem;
  background: #f0f3f4;
}

.contact__title {
  color: var(--navy);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.contact__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  padding: 2.2rem 1.4rem;
  border: .2rem solid var(--navy);
  border-radius: .8rem;
  background: #fff;
}

.contact__name {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.contact__detail {
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.5;
}

.contact__product {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  width: 35.8rem;
  font-size: 1.2rem;
  line-height: 1.5;
}

.contact__product-title {
  font-weight: 700;
  letter-spacing: -.012rem;
}

/* ---------- footer ---------- */
.footer {
  padding: 2.4rem 0 10.4rem;
  background: var(--red);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
}

.footer small {
  font-size: inherit;
}

/* ---------- floating bar (SP / tablet) ---------- */
.floating {
  position: fixed;
  z-index: 50;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  width: 100%;
  max-width: 500px;
  padding: 1.2rem 1.6rem .8rem;
  background: rgba(255, 255, 255, .9);
  transform: translate(-50%, 100%);
  visibility: hidden;
  transition: transform .3s ease, visibility .3s;
}

.floating.is-show {
  transform: translate(-50%, 0);
  visibility: visible;
}

.floating__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  width: 29.4rem;
}

.floating__note {
  margin: 0;
  color: var(--black);
  font-size: 1rem;
  line-height: 1.4;
  white-space: nowrap;
}

.floating__apply {
  display: block;
  width: 29.4rem;
  margin-top: .07rem;
  border-radius: 999px;
  filter: drop-shadow(0 .4rem 0 #e6e6e6);
}

.floating__apply img {
  display: block;
  width: 100%;
}

.totop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.totop__arrow {
  font-size: 1.6rem;
  line-height: 1.2;
}

.totop--pc {
  display: none;
}

/* ---------- modal ---------- */
.modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(26, 26, 26, .6);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: modal-fade .25s ease;
}

.modal[hidden] {
  display: none;
}

/* 1px taller than the viewport so scroll never chains to the page */
.modal__scroller {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100% + 1px);
  padding: 2rem 0;
}

.modal__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: 32.6rem;
  padding: 1.6rem 1.6rem 2.4rem;
  border-radius: .8rem;
  background: #fff;
}

.modal__x {
  align-self: flex-end;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}

/* front / back images: horizontal scroll-snap slider */
.modal__slides {
  display: flex;
  flex: none;
  width: 29.4rem;
  height: 29.4rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.modal__slides::-webkit-scrollbar {
  display: none;
}

.modal__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.modal__slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.modal__dots {
  display: flex;
  gap: .8rem;
}

.modal__dots span {
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: #d4d4d5;
}

.modal__dots span.is-active {
  background: var(--yellow);
}

/* arrows on the card edges, over the image (design: 4px / 5px inside the card) */
.modal__arrow {
  position: absolute;
  top: 18.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.modal__arrow--prev {
  left: .4rem;
}

.modal__arrow--next {
  right: .5rem;
}

.modal__title {
  width: 29.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.modal__note {
  width: 29.4rem;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
}

.modal__close {
  width: 100%;
  padding: 1.2rem 0;
  border: 0;
  border-radius: 999px;
  background: #404040;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}

@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- header / side (hidden on SP) ---------- */
.header,
.side,
.pc-nav {
  display: none;
}

/* ==========================================================================
   >= 501px : fixed-width column on space background
   ========================================================================== */
@media (min-width: 501px) {
  html {
    font-size: calc(500px / 39);
  }

  body {
    padding-top: 50px;
    background: #000;
  }

  .page > section {
    scroll-margin-top: 50px;
  }

  .header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 25px 0 20px;
    background: #fff;
  }

  .header__logos,
  .header__sns {
    display: flex;
    align-items: center;
  }

  .header__logos {
    gap: 9px;
  }

  .header__logo--nissin img {
    width: 50px;
  }

  .header__logo--gundam img {
    width: 42px;
  }

  .header__sns {
    gap: 14px;
  }

  .header__sns-link--x img {
    width: 25px;
  }

  /*
    Fixed layer sized to the viewport (container units = viewport).
    --col-l : left edge of the 500px column (centered; shifted left from 900px)
    --kb    : background scale, keeps the earth on the right of the column
    --kl    : left decoration scale, shrinks gently with the left area (about half at 0px)
  */
  .side {
    --col-l: calc((100cqw - 500px) / 2);
    --kb: max(min(1px, calc(100cqh / 1024)), calc((var(--col-l) + 250px) / 726), calc(100cqh / 1190));
    --kl: max(0px, min(1px, calc((100cqh - 50px) / 974), calc((var(--col-l) + 462px) / 924)));
    position: fixed;
    z-index: 0;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
    container-type: size;
  }

  .side__bg {
    position: absolute;
    top: calc(-429 * var(--kb));
    left: calc(var(--col-l) + 250px - 726 * var(--kb));
    width: calc(2235 * var(--kb));
    height: calc(1619 * var(--kb));
    background: url(../images/bg_space.jpg) 0 0 / 100% 100% no-repeat;
  }

  /*
    Zaku + flakes group (741 x 1024 design px), scaled by --g.
    Left of the column, right edge hidden behind the column. Shown from 900px;
    leaves to the left when the 2-column layout starts (1299px), never shown in the right column.
  */
  .zaku-group {
    --g: var(--kl);
    --gl: calc(var(--col-l) - 661 * var(--kl));
    position: absolute;
    top: calc(50px + 60 * var(--kl));
    left: var(--gl);
    width: calc(741 * var(--g));
    height: calc(1024 * var(--g));
    display: none;
  }

  .zaku-group__item {
    position: absolute;
    max-width: none;
  }

  .zaku-group__item--frag4 { left: calc(86 * var(--g)); top: 0; width: calc(535 * var(--g)); }
  .zaku-group__item--zaku { left: 0; top: calc(113 * var(--g)); width: calc(707 * var(--g)); }
  .zaku-group__item--frag1 { left: calc(89 * var(--g)); top: calc(315 * var(--g)); width: calc(540 * var(--g)); }
  .zaku-group__item--frag2 { left: calc(104 * var(--g)); top: calc(183 * var(--g)); width: calc(637 * var(--g)); }
  .zaku-group__item--frag3 { left: calc(84 * var(--g)); top: calc(263 * var(--g)); width: calc(563 * var(--g)); }

  /* played by main.js only when the 2-column state changes */
  .zaku-group.is-to-left {
    animation: zaku-to-left .6s linear both;
  }

  .zaku-group.is-from-left {
    animation: zaku-from-left .9s cubic-bezier(.22, .61, .36, 1);
  }
}

/* ==========================================================================
   >= 900px : PC right menu, back-to-top only
   Content + menu have priority: the right area keeps at least 384px,
   so below 1300px the column moves left (about 2 columns at 900px).
   ========================================================================== */
@media (min-width: 900px) {
  .page {
    margin-left: min(calc((100% - 500px) / 2), calc(100% - 900px));
    /* red lines on both sides (PC only); drawn outside the 500px column, no layout change */
    box-shadow: -8px 0 0 var(--red), 8px 0 0 var(--red);
  }

  .side {
    --col-l: min(calc((100cqw - 500px) / 2), calc(100cqw - 900px));
  }

  .zaku-group {
    display: block;
  }

  .floating {
    display: none;
  }

  .pc-nav {
    position: fixed;
    z-index: 10;
    top: 50px;
    bottom: 0;
    left: calc(min(calc((100% - 500px) / 2), calc(100% - 900px)) + 500px);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
  }

  /* scaled by --km (1px at 1440 x 1024) */
  .pc-nav__stage {
    --km: min(1px, calc(100cqh / 560), calc((100cqw - 40px) / 366));
    position: relative;
    flex: none;
    width: calc(366 * var(--km));
    height: calc(510 * var(--km));
  }

  .pc-nav__menu {
    position: absolute;
    top: 0;
    left: calc(4 * var(--km));
    width: calc(362 * var(--km));
    height: calc(293 * var(--km));
  }

  .pc-nav__panel {
    position: absolute;
    inset: 0;
    width: 100%;
  }

  .pc-nav__title {
    position: absolute;
    top: calc(26.8 * var(--km));
    left: calc(13 * var(--km));
    width: calc(65.14 * var(--km));
  }

  .pc-nav__list {
    position: absolute;
    top: calc(67 * var(--km));
    left: calc(40 * var(--km));
    width: calc(282.5 * var(--km));
  }

  .pc-nav__list li:not(:last-child) {
    padding-bottom: calc(11 * var(--km));
    border-bottom: 2px solid #fff;
  }

  .pc-nav__list li + li {
    margin-top: calc(10 * var(--km));
  }

  .pc-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(21 * var(--km));
    color: #fff;
    font-size: max(12px, calc(16 * var(--km)));
    font-weight: 700;
    line-height: 1.14;
    text-decoration: none;
  }

  .pc-nav__link::after {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    margin-right: calc(-12 * var(--km));
    border-top: calc(6.5 * var(--km)) solid transparent;
    border-bottom: calc(6.5 * var(--km)) solid transparent;
    border-left: calc(11.25 * var(--km)) solid #fff;
  }

  .pc-nav__catch {
    position: absolute;
    top: calc(361 * var(--km));
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    font-size: calc(20 * var(--km));
    font-weight: 900;
    line-height: 1.5;
    white-space: nowrap;
  }

  /*
    Round-cornered yellow outline (3px, Figma: OUTSIDE) made of shadows on a circle,
    then a 4px drop shadow of the outlined shape (Figma: DROP_SHADOW 0 4 25%).
  */
  .pc-nav__catch-text {
    text-shadow:
      calc(3.000 * var(--km)) calc(0.000 * var(--km)) 0 var(--yellow),
      calc(2.898 * var(--km)) calc(0.776 * var(--km)) 0 var(--yellow),
      calc(2.598 * var(--km)) calc(1.500 * var(--km)) 0 var(--yellow),
      calc(2.121 * var(--km)) calc(2.121 * var(--km)) 0 var(--yellow),
      calc(1.500 * var(--km)) calc(2.598 * var(--km)) 0 var(--yellow),
      calc(0.776 * var(--km)) calc(2.898 * var(--km)) 0 var(--yellow),
      calc(0.000 * var(--km)) calc(3.000 * var(--km)) 0 var(--yellow),
      calc(-0.776 * var(--km)) calc(2.898 * var(--km)) 0 var(--yellow),
      calc(-1.500 * var(--km)) calc(2.598 * var(--km)) 0 var(--yellow),
      calc(-2.121 * var(--km)) calc(2.121 * var(--km)) 0 var(--yellow),
      calc(-2.598 * var(--km)) calc(1.500 * var(--km)) 0 var(--yellow),
      calc(-2.898 * var(--km)) calc(0.776 * var(--km)) 0 var(--yellow),
      calc(-3.000 * var(--km)) calc(0.000 * var(--km)) 0 var(--yellow),
      calc(-2.898 * var(--km)) calc(-0.776 * var(--km)) 0 var(--yellow),
      calc(-2.598 * var(--km)) calc(-1.500 * var(--km)) 0 var(--yellow),
      calc(-2.121 * var(--km)) calc(-2.121 * var(--km)) 0 var(--yellow),
      calc(-1.500 * var(--km)) calc(-2.598 * var(--km)) 0 var(--yellow),
      calc(-0.776 * var(--km)) calc(-2.898 * var(--km)) 0 var(--yellow),
      calc(0.000 * var(--km)) calc(-3.000 * var(--km)) 0 var(--yellow),
      calc(0.776 * var(--km)) calc(-2.898 * var(--km)) 0 var(--yellow),
      calc(1.500 * var(--km)) calc(-2.598 * var(--km)) 0 var(--yellow),
      calc(2.121 * var(--km)) calc(-2.121 * var(--km)) 0 var(--yellow),
      calc(2.598 * var(--km)) calc(-1.500 * var(--km)) 0 var(--yellow),
      calc(2.898 * var(--km)) calc(-0.776 * var(--km)) 0 var(--yellow),
      calc(1.500 * var(--km)) calc(0.000 * var(--km)) 0 var(--yellow),
      calc(1.299 * var(--km)) calc(0.750 * var(--km)) 0 var(--yellow),
      calc(0.750 * var(--km)) calc(1.299 * var(--km)) 0 var(--yellow),
      calc(0.000 * var(--km)) calc(1.500 * var(--km)) 0 var(--yellow),
      calc(-0.750 * var(--km)) calc(1.299 * var(--km)) 0 var(--yellow),
      calc(-1.299 * var(--km)) calc(0.750 * var(--km)) 0 var(--yellow),
      calc(-1.500 * var(--km)) calc(0.000 * var(--km)) 0 var(--yellow),
      calc(-1.299 * var(--km)) calc(-0.750 * var(--km)) 0 var(--yellow),
      calc(-0.750 * var(--km)) calc(-1.299 * var(--km)) 0 var(--yellow),
      calc(0.000 * var(--km)) calc(-1.500 * var(--km)) 0 var(--yellow),
      calc(0.750 * var(--km)) calc(-1.299 * var(--km)) 0 var(--yellow),
      calc(1.299 * var(--km)) calc(-0.750 * var(--km)) 0 var(--yellow);
    filter: drop-shadow(0 calc(4 * var(--km)) 0 rgba(0, 0, 0, .25));
  }

  .pc-nav__catch::before,
  .pc-nav__catch::after {
    content: "";
    flex: none;
    width: calc(13 * var(--km));
    height: calc(18 * var(--km));
  }

  .pc-nav__catch::before {
    margin-right: calc(7 * var(--km));
    background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--yellow) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px));
  }

  .pc-nav__catch::after {
    margin-left: calc(14 * var(--km));
    background: linear-gradient(to top left, transparent calc(50% - 1.5px), var(--yellow) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px));
  }

  .pc-nav__apply {
    position: absolute;
    top: calc(409 * var(--km));
    left: 0;
    display: block;
    width: calc(364 * var(--km));
    border-radius: 999px;
    filter: drop-shadow(0 calc(5 * var(--km)) 0 #e6e6e6);
  }

  .pc-nav__apply img {
    display: block;
    width: 100%;
  }

  .pc-nav__note {
    position: absolute;
    top: calc(490 * var(--km));
    left: 0;
    right: 0;
    margin: 0;
    color: #fff;
    font-size: max(11px, calc(12 * var(--km)));
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }

  .totop--pc {
    position: fixed;
    z-index: 50;
    bottom: 19px;
    left: calc(min(calc((100% - 500px) / 2), calc(100% - 900px)) + 526px);
    display: flex;
    width: 56px;
    height: 56px;
    font-size: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s, transform .12s ease-out;
  }

  .totop--pc .totop__arrow {
    font-size: 16px;
  }

  .totop--pc.is-show {
    opacity: 1;
    visibility: visible;
  }
}

/*
  900px - 1299px (2 columns): the zaku group glides out to the left, then main.js
  adds .is-gone (it never appears in the right column)
*/
.zaku-group.is-gone {
  visibility: hidden;
}

@keyframes zaku-to-left {
  from { visibility: visible; transform: none; }
  to { visibility: visible; transform: translateX(calc(-100% - var(--gl))); }
}

@keyframes zaku-from-left {
  from { transform: translateX(-100%); }
  to { transform: none; }
}

/* ==========================================================================
   Teaser (html.is-teaser): apply buttons are disabled and show COMING SOON
   (black 70% pill over the button, Noto Sans JP Black 16px white)
   ========================================================================== */
.is-teaser .js-apply {
  position: relative;
  pointer-events: none;
  cursor: default;
  filter: none;
}

.is-teaser .js-apply::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -.37rem 0 -.33rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .7);
}

.is-teaser .js-apply::before {
  content: "COMING SOON";
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.5;
  white-space: nowrap;
}

.is-teaser .floating__apply::after {
  inset: -.1rem 0 0;
}

@media (min-width: 900px) {
  .is-teaser .pc-nav__apply::after {
    inset: 0;
  }

  .is-teaser .pc-nav__apply::before {
    font-size: calc(20 * var(--km));
  }
}

/* fallback for browsers without container query units (e.g. Safari 15) */
@supports not (width: 1cqw) {
  .zaku-group {
    display: none !important;
  }

  .side__bg {
    top: -429px;
    left: calc(50% - 726px);
    width: 2235px;
    height: 1619px;
  }

  .pc-nav__stage {
    --km: min(1px, calc((100vh - 50px) / 560));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .floating,
  .modal {
    transition: none;
    animation: none;
  }
}