/*!
 * Generated file. Do not edit directly.
 * Source: assets/css/top/style.source.css
 * Run: npm run build:css
 */
/* assets/css/top/foundation/reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

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

body {
  min-height: 100vh;
  line-height: 1.5;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word;
}


/* assets/css/top/foundation/variables.css */
:root {
  /* Layout */
  --sp-width: 390px;
  --pc-width: 1920px;
  --pc-canvas-width: 1920px;
  --pc-canvas-half: 960px;
  --pc-content-x: 751px;
  --pc-logo-x: 267px;
  --pc-floating-x: 1345px;
  --pc-side-rail-x: 85px;
  --pc-floating-offset-x: 278px;
  --pc-logo-offset-x: 310px;
  --content-max-width: 390px;
  --inner-padding: calc(24 * var(--sp-u));

  /* SP scale (Phase 1: max-width 1023px) */
  --sp-design-width: 390;
  --sp-scale-max: 2.623076923; /* 1023 / 390 */
  --sp-scale: 1;
  --sp-u: 1px;
  --bp-sp-max: 1023px;
  --bp-pc: 1024px;
  --bp-pc-full: 1920px;

  /* Design tokens (design/design-tokens.md) */
  --color-bg-sky: #c9f3f4;
  --color-text-primary: #212e79;
  --color-white: #fff;
  --color-kv-bg: #fff;

  /* Aliases used by existing section styles */
  --color-bg: var(--color-white);
  --color-bg-pc: var(--color-bg-sky);
  --color-text: var(--color-text-primary);
  --color-text-muted: var(--color-text-primary);
  --color-navy: var(--color-text-primary);
  --color-marker-underline: #ffb031;
  --text-marker-underline-thickness: calc(3 * var(--sp-u));
  --text-marker-underline-offset: calc(4 * var(--sp-u));
  --color-kv: var(--color-kv-bg);
  --color-movie: var(--color-white);
  --color-about: var(--color-bg-sky);
  --color-mission: var(--color-bg-sky);
  --color-campaign: var(--color-bg-sky);

  /* Non-token values kept for sections outside this revision scope */
  --color-border: #ddd;
  --color-accent-red: #e60012;
  --color-accent-red-dark: #c4000f;
  --color-primary: #e60012;
  --color-primary-hover: #c4000f;
  --color-footer: #37474f;
  --color-footer-text: #fff;

  /* Typography */
  --font-family-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-family-yasashisa: "YasashisaGothicBoldV2", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 20px;
  --font-size-heading: 24px;
  --line-height-base: 1.6;
  --text-stroke-white-sm: 1px;
  --text-stroke-white-md: 1.5px;
  --text-stroke-white-color: #fff;
  --text-stroke-outline-fallback:
    1px 1px 0 var(--text-stroke-white-color),
    -1px 1px 0 var(--text-stroke-white-color),
    1px -1px 0 var(--text-stroke-white-color),
    -1px -1px 0 var(--text-stroke-white-color),
    0 1px 0 var(--text-stroke-white-color),
    0 -1px 0 var(--text-stroke-white-color),
    1px 0 0 var(--text-stroke-white-color),
    -1px 0 0 var(--text-stroke-white-color);

  /* Grid paper (Figma: 42×42px tile, ~3px lines, #EDF8FB) */
  --paper-grid-base: #fff;
  --paper-grid-line-color: #edf8fb;
  --paper-grid-tile-size: 42px;
  --paper-grid-line-width: 3px;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;

  /* Focus */
  --focus-outline: 2px solid var(--color-text-primary);
  --focus-outline-offset: 2px;

  /* Motion */
  --transition-base: 0.2s ease;

  /* Floating column bar (Figma Group 1240 / 2020:20597) */
  --floating-column-bar-height: calc(63 * var(--sp-u));
}

@media (max-width: 1023px) {
  :root {
    --sp-scale: min(calc(100vw / var(--sp-design-width)), var(--sp-scale-max));
    --sp-u: clamp(
      calc(100vw / var(--sp-design-width)),
      min(100vw, var(--bp-sp-max)) / var(--sp-design-width),
      calc(var(--sp-scale-max) * 1px)
    );
    --content-max-width: calc(390 * var(--sp-u));
    --inner-padding: calc(24 * var(--sp-u));
    --space-xs: calc(8 * var(--sp-u));
    --space-sm: calc(16 * var(--sp-u));
    --space-md: calc(24 * var(--sp-u));
    --space-lg: calc(40 * var(--sp-u));
    --space-xl: calc(64 * var(--sp-u));
  }
}

@media (min-width: 1024px) {
  :root {
    --sp-scale: 1;
    --sp-u: 1px;
    --content-max-width: 390px;
    --inner-padding: calc(24 * var(--sp-u));
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base: 0.01ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* assets/css/top/foundation/paper-grid.css */
/* Figma paper grid: 42×42px tile, ~3px lines, #EDF8FB on white base */
.paper-grid-bg {
  background-color: var(--paper-grid-base);
  background-image:
    linear-gradient(var(--paper-grid-line-color) var(--paper-grid-line-width), transparent var(--paper-grid-line-width)),
    linear-gradient(90deg, var(--paper-grid-line-color) var(--paper-grid-line-width), transparent var(--paper-grid-line-width));
  background-size: var(--paper-grid-tile-size) var(--paper-grid-tile-size);
}

@media (min-width: 1024px) {
  .site-stage {
    background-color: var(--paper-grid-base);
    background-image:
      linear-gradient(var(--paper-grid-line-color) var(--paper-grid-line-width), transparent var(--paper-grid-line-width)),
      linear-gradient(90deg, var(--paper-grid-line-color) var(--paper-grid-line-width), transparent var(--paper-grid-line-width));
    background-size: var(--paper-grid-tile-size) var(--paper-grid-tile-size);
  }
}


/* assets/css/top/foundation/base.css */
@font-face {
  font-family: "YasashisaGothicBoldV2";
  src: url("../../fonts/YasashisaGothicBold-V2.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
}

.about__catch,
.about__text-block,
.mission__catch,
.mission__card-title--laundry,
.mission__card-title--dish,
.campaign__intro-lead,
.campaign__intro-title {
  font-family: var(--font-family-yasashisa);
}

.about__catch {
  -webkit-text-stroke: var(--text-stroke-white-md) var(--text-stroke-white-color);
  paint-order: stroke fill;
  text-shadow: var(--text-stroke-outline-fallback);
}

.about__text-block,
.mission__card-lead,
.mission__card-title--laundry,
.mission__card-title--dish,
.campaign__intro-lead,
.campaign__intro-title,
.campaign__intro-text,
.special__lead {
  -webkit-text-stroke: var(--text-stroke-white-sm) var(--text-stroke-white-color);
  paint-order: stroke fill;
  text-shadow: var(--text-stroke-outline-fallback);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 9999;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-text-primary);
  color: #fff;
  border-radius: calc(4 * var(--sp-u));
}

.skip-link:focus {
  top: var(--space-sm);
}

:focus {
  outline: none;
}

html.using-keyboard :focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

html:not(.using-keyboard) :focus-visible {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: calc(1 * var(--sp-u));
  height: calc(1 * var(--sp-u));
  padding: 0;
  margin: calc(-1 * var(--sp-u));
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-heading {
  font-size: var(--font-size-heading);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-md);
}

.is-open {
  display: block;
}

.is-active {
  opacity: 1;
}


/* assets/css/top/layout/layout.css */
.site-stage {
  width: 100%;
}

/*
 * Windows / Edge のクラシックスクロールバーは常時表示で幅も取る。
 * Mac のオーバーレイ（出てきて消える）に寄せるため、見た目だけ隠す。
 * ホイール・タッチ・キーでのスクロールは維持する。
 */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

@media (max-width: 1023px) {
  html,
  body {
    overflow-anchor: none;
  }

  .site-stage {
    overflow-x: hidden;
  }
}

.site-layout__inner {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--inner-padding);
}

.site-main {
  overflow-x: clip;
  background-color: var(--color-white);
}

@media (max-width: 1023px) {
  .site-main {
    width: min(100vw, calc(390 * var(--sp-u)));
    max-width: none;
    margin-inline: auto;
  }

  body {
    background-color: var(--color-bg-sky);
  }
}

@media (min-width: 1024px) {
  html {
    height: 100%;
    overflow: hidden;
    overflow-x: clip;
  }

  body {
    height: 100%;
    overflow: hidden;
    overflow-x: clip;
    background-color: var(--paper-grid-base);
  }

  .site-stage {
    width: var(--pc-canvas-width);
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin-left: calc(50% - var(--pc-canvas-half));
    margin-right: calc(50% - var(--pc-canvas-half));
    overflow: hidden;
    position: relative;
  }

  .site-main {
    position: relative;
    width: var(--content-max-width);
    max-width: var(--content-max-width);
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin-left: var(--pc-content-x);
    margin-right: auto;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: none;
    clip-path: none;
    border-left: 1px solid #000;
    transform: translateX(1px);
    /* PC中央カラム: Windows の常時スクロールバーで 390px が削られないようにする */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .site-main::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  body.is-modal-open .site-main {
    overflow: hidden;
  }
}


/* assets/css/common/pc-gutter.css */
.site-side-rail {
  display: none;
}

.site-pc-gutter {
  display: none;
}

.site-pc-gutter--left {
  display: none;
}

.site-pc-logo {
  display: none;
}

@media (max-width: 1023px) {
  .site-pc-gutter--right {
    display: block;
    position: static;
    width: auto;
    height: auto;
    min-height: 0;
    pointer-events: none;
  }
}

@media (min-width: 1024px) {
  .site-pc-gutter {
    display: flex;
    position: absolute;
    top: 0;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
    align-items: center;
    pointer-events: none;
  }

  .site-pc-gutter--left {
    display: flex;
    left: max(0px, calc(var(--pc-canvas-half) - 50vw));
    z-index: 5;
    width: calc(50vw - var(--pc-canvas-half) + var(--pc-content-x));
  }

  .site-pc-gutter--right {
    display: flex;
    left: calc(var(--pc-content-x) + var(--content-max-width));
    z-index: 70;
    width: calc(50vw + var(--pc-canvas-half) - var(--pc-content-x) - var(--content-max-width));
    padding-bottom: 64px;
    /* Prefer bottom alignment; if the menu overflows the viewport height,
       fall back to top alignment so MOVIE / ABOUT stay visible. */
    align-items: safe flex-end;
    pointer-events: auto;
    border-left: 1px solid #000;
  }

  .site-side-rail {
    display: block;
    position: fixed;
    top: 0;
    left: max(0px, calc(50vw - var(--pc-canvas-half) + var(--pc-side-rail-x)));
    z-index: 5;
    width: 65px;
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
    --site-side-rail-item-height: 757px;
    --site-side-rail-item-gap: 40px;
    --site-side-rail-segment-size: calc(var(--site-side-rail-item-height) + var(--site-side-rail-item-gap));
    --site-side-rail-flow-duration: 40s;
  }

  .site-side-rail__track {
    display: flex;
    flex-direction: column;
    gap: var(--site-side-rail-item-gap);
    width: 65px;
    animation: site-side-rail-flow var(--site-side-rail-flow-duration) linear infinite;
    will-change: transform;
  }

  .site-side-rail__item {
    position: relative;
    flex-shrink: 0;
    width: 65px;
    height: var(--site-side-rail-item-height);
    overflow: hidden;
  }

  .site-side-rail__image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 757px;
    height: 65px;
    max-width: none;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  @keyframes site-side-rail-flow {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(calc(-1 * var(--site-side-rail-segment-size)));
    }
  }

  .site-pc-logo {
    display: grid;
    position: static;
    justify-items: center;
    --pc-logo-width: 178px;
    --pc-logo-scale: 0.7672413793; /* 178 / 232 */
    width: var(--pc-logo-width);
    pointer-events: none;
  }

  .site-pc-logo__main {
    position: relative;
    width: 100%;
    aspect-ratio: 232 / 207;
    overflow: hidden;
    --pc-logo-part-duration: 0.65s;
    --pc-logo-part-stagger: 0.18s;
    --pc-logo-part-ease: ease-out;
    --pc-logo-char-count: 12;
    --pc-logo-ring-delay: calc(var(--pc-logo-part-stagger) * var(--pc-logo-char-count) + var(--pc-logo-part-duration));
    --pc-logo-ring-done-delay: 3.46s;
    --pc-logo-char-outro-hold: 0.3s;
    --pc-logo-char-outro-duration: 0.35s;
    --pc-logo-char-outro-delay: calc(var(--pc-logo-ring-delay) + var(--pc-logo-char-outro-hold));
    --pc-logo-ring-offset-y: 0px;
    --pc-logo-ring-raster-offset-y: -0.5px;
  }

  .site-pc-logo__main-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 232px;
    height: 207px;
    transform: scale(var(--pc-logo-scale));
    transform-origin: top left;
    --pc-logo-u: 1px;
  }

  .site-pc-logo__main-part {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
  }

  .site-pc-logo__main-part--arc-text {
    top: 0;
    left: calc(2.871 * var(--pc-logo-u));
    width: calc(229 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-01-na {
    top: calc(36.159 * var(--pc-logo-u));
    left: calc(72.116 * var(--pc-logo-u));
    width: calc(51 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-02-no {
    top: calc(60 * var(--pc-logo-u));
    left: calc(126 * var(--pc-logo-u));
    width: calc(44 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-03-o {
    top: calc(112.513 * var(--pc-logo-u));
    left: 0;
    width: calc(45 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-04-te {
    top: calc(117.33 * var(--pc-logo-u));
    left: calc(49.088 * var(--pc-logo-u));
    width: calc(38 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-05-tsu {
    top: calc(121.874 * var(--pc-logo-u));
    left: calc(92.941 * var(--pc-logo-u));
    width: calc(41 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-06-da {
    top: calc(104.059 * var(--pc-logo-u));
    left: calc(139.439 * var(--pc-logo-u));
    width: calc(49 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-07-i {
    top: calc(121.914 * var(--pc-logo-u));
    left: calc(193.203 * var(--pc-logo-u));
    width: calc(39 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-08-chi {
    top: calc(164.199 * var(--pc-logo-u));
    left: calc(16.35 * var(--pc-logo-u));
    width: calc(38 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-09-ya {
    top: calc(172.715 * var(--pc-logo-u));
    left: calc(60.239 * var(--pc-logo-u));
    width: calc(33 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-10-re {
    top: calc(166.418 * var(--pc-logo-u));
    left: calc(100.229 * var(--pc-logo-u));
    width: calc(30 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-11-n {
    top: calc(170.79 * var(--pc-logo-u));
    left: calc(133.665 * var(--pc-logo-u));
    width: calc(36 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-12-ji {
    top: calc(162.641 * var(--pc-logo-u));
    left: calc(176.423 * var(--pc-logo-u));
    width: calc(40 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--ring-text {
    top: calc(36.159 * var(--pc-logo-u) + var(--pc-logo-ring-offset-y, 0px));
    left: 0;
    z-index: 2;
    width: calc(232 * var(--pc-logo-u));
    height: auto;
    object-fit: contain;
    object-position: top left;
  }

  html.is-safari .site-pc-logo__main-part--ring-text-raster {
    top: calc(36.159 * var(--pc-logo-u) + var(--pc-logo-ring-raster-offset-y, 0px));
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--arc-text {
    opacity: 0;
    animation: site-pc-logo-main-part-in var(--pc-logo-part-duration) var(--pc-logo-part-ease) 0s forwards;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--ring-text {
    visibility: hidden;
    opacity: 0;
    animation: site-pc-logo-main-ring-in var(--pc-logo-part-duration) var(--pc-logo-part-ease) var(--pc-logo-ring-delay) forwards;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part[class*="--char-"] {
    opacity: 0;
    animation:
      site-pc-logo-main-part-in var(--pc-logo-part-duration) var(--pc-logo-part-ease) var(--pc-logo-char-in-delay, 0s) forwards,
      site-pc-logo-main-char-outro var(--pc-logo-char-outro-duration) ease-out var(--pc-logo-char-outro-delay) forwards;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-01-na {
    --pc-logo-char-in-delay: 0.18s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-02-no {
    --pc-logo-char-in-delay: 0.36s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-03-o {
    --pc-logo-char-in-delay: 0.54s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-04-te {
    --pc-logo-char-in-delay: 0.72s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-05-tsu {
    --pc-logo-char-in-delay: 0.9s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-06-da {
    --pc-logo-char-in-delay: 1.08s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-07-i {
    --pc-logo-char-in-delay: 1.26s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-08-chi {
    --pc-logo-char-in-delay: 1.44s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-09-ya {
    --pc-logo-char-in-delay: 1.62s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-10-re {
    --pc-logo-char-in-delay: 1.8s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-11-n {
    --pc-logo-char-in-delay: 1.98s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-12-ji {
    --pc-logo-char-in-delay: 2.16s;
  }

  @keyframes site-pc-logo-main-part-in {
    from {
      opacity: 0;
      transform: translateY(calc(4 * var(--pc-logo-u)));
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes site-pc-logo-main-char-outro {
    from {
      opacity: 1;
      visibility: visible;
    }

    to {
      opacity: 0;
      visibility: hidden;
    }
  }

  .site-pc-logo__main-stage.is-ring-done .site-pc-logo__main-part[class*="--char-"] {
    display: none;
  }

  @keyframes site-pc-logo-main-ring-in {
    from {
      opacity: 0;
      visibility: visible;
    }

    to {
      opacity: 1;
      visibility: visible;
    }
  }

  .site-pc-logo__products {
    position: relative;
    width: calc(152 * var(--pc-logo-width) / 232);
    height: calc(78 * var(--pc-logo-width) / 232);
    overflow: visible;
  }

  .site-pc-logo__product {
    position: absolute;
    display: block;
    max-width: none;
    object-fit: contain;
  }

  .site-pc-logo__product--attack {
    top: calc(7 * var(--pc-logo-width) / 232);
    left: calc(-7 * var(--pc-logo-width) / 232);
    width: calc(80 * var(--pc-logo-width) / 232);
    height: calc(85 * var(--pc-logo-width) / 232);
  }

  .site-pc-logo__product--cucute {
    top: calc(9 * var(--pc-logo-width) / 232);
    left: calc(73 * var(--pc-logo-width) / 232);
    width: calc(85 * var(--pc-logo-width) / 232);
    height: calc(85 * var(--pc-logo-width) / 232);
  }
}

@media (min-width: 1920px) {
  .site-side-rail {
    position: absolute;
    left: var(--pc-side-rail-x);
    height: 100%;
    min-height: 100vh;
  }
}

@media (min-width: 1024px) {
  .site-side-rail--ar {
    left: 0;
  }

  .site-pc-gutter--ar {
    position: fixed;
  }

  .site-pc-gutter--ar.site-pc-gutter--left {
    left: 0;
    width: calc(50vw - var(--content-max-width) / 2);
    border-right: 1px solid #000;
  }

  .site-pc-gutter--ar.site-pc-gutter--right {
    left: calc(50vw + var(--content-max-width) / 2);
    right: 0;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--arc-text,
  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--ring-text,
  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part[class*="--char-"] {
    animation: none;
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--ring-text {
    visibility: visible;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part[class*="--char-"] {
    display: none;
  }

  .site-side-rail__track {
    animation: none;
  }

  .site-side-rail__track > :not(:first-child) {
    display: none;
  }
}


/* assets/css/top/components/button.css */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: calc(12 * var(--sp-u)) calc(24 * var(--sp-u));
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  border: none;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--transition-base),
    background-color var(--transition-base),
    color var(--transition-base);
}

.button--primary {
  background-color: var(--color-primary);
  color: #fff;
  border-radius: calc(999 * var(--sp-u));
  border: calc(2 * var(--sp-u)) solid transparent;
}

.button--primary:hover {
  background-color: var(--color-primary-hover);
}

.button--block {
  display: flex;
  width: 100%;
}

.button--icon {
  width: calc(39 * var(--sp-u));
  height: calc(39 * var(--sp-u));
  padding: 0;
  font-size: clamp(1.5rem, calc(24 * var(--sp-u)), calc(62.954 * var(--sp-u)));
  line-height: 1;
  border: calc(2.5 * var(--sp-u)) solid var(--color-text-primary);
  border-radius: 50%;
  background-color: var(--icon-button-bg, #fff);
}

.button--icon:hover {
  background-color: var(--icon-button-bg-hover, var(--color-bg));
}

.button--layered {
  position: relative;
  z-index: 0;
  isolation: isolate;
  color: var(--button-text-color, #fff);
  background: transparent;
  border: none;
  border-radius: var(--button-radius, calc(999 * var(--sp-u)));
}

.button--layered--animate:not(.is-visible) {
  opacity: 0;
  pointer-events: none;
}

.button--layered--animate.is-visible {
  animation: button-layered-fade-in var(--button-fade-duration, 0.7s) var(--button-fade-ease, ease-out) both;
  pointer-events: auto;
}

@keyframes button-layered-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button--layered--animate:not(.is-visible),
  .button--layered--animate.is-visible {
    opacity: 1;
    animation: none;
    pointer-events: auto;
  }
}

.button--layered::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-sizing: border-box;
  border-radius: inherit;
  background-color: var(--button-shadow-bg, var(--color-navy));
  border: var(--button-border-width, calc(2 * var(--sp-u))) solid var(--button-shadow-border, var(--button-face-border, var(--color-navy)));
  transform: translate(var(--button-shadow-x, calc(4 * var(--sp-u))), var(--button-shadow-y, calc(5 * var(--sp-u))));
  transition: transform var(--transition-base);
}

.button--layered::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  border-radius: var(--button-radius, calc(999 * var(--sp-u)));
  background-color: var(--button-face-bg);
  border: var(--button-border-width, calc(2 * var(--sp-u))) solid var(--button-face-border, var(--color-navy));
  pointer-events: none;
}

.button--layered > * {
  position: relative;
  z-index: 1;
}

.button--layered:hover {
  background-color: transparent;
}

.button--layered:hover::after {
  background-color: var(--button-face-bg-hover, var(--button-face-bg));
}

.button--layered:active {
  transform: translate(var(--button-press-x, calc(1 * var(--sp-u))), var(--button-press-y, calc(1 * var(--sp-u))));
}

.button--layered:active::before {
  transform: translate(
    calc(var(--button-shadow-x, 3px) - var(--button-press-x, 1px)),
    calc(var(--button-shadow-y, 3px) - var(--button-press-y, 1px))
  );
}

.button__arrow {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--button-arrow-size, calc(19 * var(--sp-u)));
  height: var(--button-arrow-size, calc(19 * var(--sp-u)));
  border-radius: 50%;
  background-color: var(--button-arrow-circle-bg, #fff);
  border: var(--button-arrow-circle-border-width, 0) solid
    var(--button-arrow-circle-border, transparent);
}

.button__arrow::after {
  content: "";
  display: block;
  width: calc(5 * var(--sp-u));
  height: calc(9 * var(--sp-u));
  background-color: var(--button-arrow-color, var(--color-navy));
  mask-image: url("../../img/top/common/icons/button_arrow.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("../../img/top/common/icons/button_arrow.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* About CTA — Figma 56:22749, no arrow */
.button--cta {
  width: min(calc(306 * var(--sp-u)), 100%);
  min-width: 0;
  min-height: calc(62 * var(--sp-u));
  padding: calc(21 * var(--sp-u)) calc(35 * var(--sp-u));
  font-size: clamp(1.0625rem, calc(17 * var(--sp-u)), calc(44.592 * var(--sp-u)));
  letter-spacing: -0.08em;
  --button-border-width: calc(2 * var(--sp-u));
  --button-face-bg: #ff1023;
  --button-face-bg-hover: #e60012;
  --button-face-border: #212e79;
  --button-shadow-bg: #d30010;
  --button-shadow-border: #212e79;
  --button-shadow-x: calc(5 * var(--sp-u));
  --button-shadow-y: calc(5 * var(--sp-u));
  --button-press-x: calc(2 * var(--sp-u));
  --button-press-y: calc(2 * var(--sp-u));
}

/* Mission intro CTA — Figma 56:22785 */
.button--cta-mission {
  justify-content: space-between;
  gap: calc(12 * var(--sp-u));
  width: min(calc(306 * var(--sp-u)), 100%);
  min-width: 0;
  min-height: calc(63 * var(--sp-u));
  margin-inline: auto;
  padding: calc(21 * var(--sp-u)) calc(36 * var(--sp-u));
  font-size: clamp(0.9375rem, calc(15 * var(--sp-u)), calc(39.346 * var(--sp-u)));
  letter-spacing: -0.08em;
  white-space: nowrap;
  --button-border-width: calc(2 * var(--sp-u));
  --button-face-bg: #ff6470;
  --button-face-bg-hover: #ff5060;
  --button-face-border: #212e79;
  --button-shadow-bg: #ff0000;
  --button-shadow-border: #212e79;
  --button-shadow-x: calc(4 * var(--sp-u));
  --button-shadow-y: calc(5 * var(--sp-u));
  --button-press-x: calc(2 * var(--sp-u));
  --button-press-y: calc(2 * var(--sp-u));
  --button-arrow-size: calc(19 * var(--sp-u));
  --button-arrow-circle-border-width: calc(1 * var(--sp-u));
  --button-arrow-circle-border: #ff6470;
  --button-arrow-color: #ff6470;
}

.button--cta-mission .button__label {
  flex: 1;
  text-align: center;
}

/* Product CTAs — Figma 56:22834 / 56:22890 */
.button--cta-product {
  justify-content: space-between;
  gap: calc(12 * var(--sp-u));
  width: min(calc(306 * var(--sp-u)), 100%);
  min-width: 0;
  min-height: calc(63 * var(--sp-u));
  padding: calc(21 * var(--sp-u)) calc(36 * var(--sp-u));
  font-size: clamp(1.0625rem, calc(17 * var(--sp-u)), calc(44.592 * var(--sp-u)));
  letter-spacing: -0.08em;
  --button-border-width: calc(2 * var(--sp-u));
  --button-face-border: #212e79;
  --button-shadow-border: #212e79;
  --button-shadow-x: calc(4 * var(--sp-u));
  --button-shadow-y: calc(5 * var(--sp-u));
  --button-press-x: calc(2 * var(--sp-u));
  --button-press-y: calc(2 * var(--sp-u));
  --button-arrow-size: calc(19 * var(--sp-u));
  --button-arrow-circle-border-width: 0;
  --button-arrow-circle-bg: #fff;
}

.button--cta-product .button__label {
  flex: 1;
  text-align: center;
}

.button--cta-laundry {
  --button-face-bg: #219df9;
  --button-face-bg-hover: #1a8de6;
  --button-shadow-bg: #3f65af;
  --button-arrow-color: #219df9;
}

.button--cta-dish {
  --button-face-bg: #00b4a9;
  --button-face-bg-hover: #009a90;
  --button-shadow-bg: #00958c;
  --button-arrow-color: #00b4a9;
}

/* Camera CTA — Figma 56:22959 */
.button--cta-camera {
  justify-content: space-between;
  gap: calc(12 * var(--sp-u));
  width: min(calc(306 * var(--sp-u)), 100%);
  min-width: 0;
  min-height: calc(63 * var(--sp-u));
  padding: calc(21 * var(--sp-u)) calc(36 * var(--sp-u));
  font-size: clamp(0.925rem, calc(14.8 * var(--sp-u)), calc(38.822 * var(--sp-u)));
  letter-spacing: -0.08em;
  line-height: 1;
  --button-text-color: #212e79;
  --button-face-bg: #ffb031;
  --button-face-bg-hover: #f0a020;
  --button-face-border: #212e79;
  --button-shadow-bg: #d78500;
  --button-shadow-border: #212e79;
  --button-border-width: calc(2 * var(--sp-u));
  --button-shadow-x: calc(4 * var(--sp-u));
  --button-shadow-y: calc(5 * var(--sp-u));
  --button-press-x: calc(2 * var(--sp-u));
  --button-press-y: calc(2 * var(--sp-u));
  --button-arrow-size: calc(19 * var(--sp-u));
  --button-arrow-circle-border-width: calc(1 * var(--sp-u));
  --button-arrow-circle-border: #ffb031;
  --button-arrow-color: #ffb031;
}

.button--cta-camera .button__label {
  flex: 1;
  text-align: center;
}

/* Campaign entry CTA — Figma 56:23090 */
.button--cta-entry {
  width: min(calc(306 * var(--sp-u)), 100%);
  min-width: 0;
  min-height: calc(63 * var(--sp-u));
  padding: calc(21 * var(--sp-u)) calc(36 * var(--sp-u));
  justify-content: space-between;
  gap: calc(12 * var(--sp-u));
  font-size: clamp(0.9375rem, calc(15 * var(--sp-u)), calc(39.346 * var(--sp-u)));
  letter-spacing: -0.08em;
  line-height: 1;
  --button-face-bg: #219df9;
  --button-face-bg-hover: #1a8de6;
  --button-face-border: #212e79;
  --button-shadow-bg: #3f65af;
  --button-shadow-border: #212e79;
  --button-border-width: calc(2 * var(--sp-u));
  --button-shadow-x: calc(4 * var(--sp-u));
  --button-shadow-y: calc(5 * var(--sp-u));
  --button-press-x: calc(2 * var(--sp-u));
  --button-press-y: calc(2 * var(--sp-u));
  --button-arrow-size: calc(19 * var(--sp-u));
  --button-arrow-circle-border-width: calc(1 * var(--sp-u));
  --button-arrow-circle-border: #219df9;
  --button-arrow-color: #219df9;
}

.button--cta-entry .button__label {
  flex: 1;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}


/* assets/css/top/components/text-marker.css */
/* Figma: Yasashisa Gothic bold headings with orange marker underline */
.text-marker {
  text-decoration: underline;
  text-decoration-color: var(--color-marker-underline);
  text-decoration-thickness: var(--text-marker-underline-thickness);
  text-underline-offset: var(--text-marker-underline-offset);
}


/* assets/css/top/components/card.css */
.card {
  padding: var(--space-md);
  background-color: #fff;
  border: calc(1 * var(--sp-u)) solid var(--color-border);
  border-radius: calc(12 * var(--sp-u));
}

.card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.card__body {
  color: var(--color-text-muted);
}

.card__item {
  flex-shrink: 0;
  width: 100%;
  padding: var(--space-md);
  background-color: var(--color-bg);
  border-radius: calc(8 * var(--sp-u));
  text-align: center;
}

.card + .card {
  margin-top: var(--space-md);
}


/* assets/css/top/components/floating-menu.css */
.floating-menu {
  position: fixed;
  right: auto;
  bottom: 0;
  left: 50%;
  z-index: 90;
  width: 100%;
  max-width: var(--content-max-width);
  transform: translateX(-50%);
}

.floating-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.floating-menu__item {
  margin: 0;
}

.floating-menu__item:not(:last-child) {
  display: none;
}

.floating-menu__item--banner {
  display: none;
}

.floating-menu__link {
  display: inline-block;
  color: inherit;
  font-family: var(--font-family-base);
  font-size: clamp(1.5625rem, calc(25 * var(--sp-u)), calc(65.577 * var(--sp-u)));
  font-weight: 800;
  line-height: 1.05;
  text-decoration: none;
}

.floating-menu__link-image {
  display: none;
}

.floating-menu__sub-list,
.floating-menu__sub-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.floating-menu__sub-list {
  display: none;
}

.floating-menu__sub-link {
  color: inherit;
  font-size: clamp(1rem, calc(16 * var(--sp-u)), calc(41.969 * var(--sp-u)));
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

body.is-menu-open .floating-menu {
  z-index: 220;
}

body.is-modal-open .floating-menu {
  display: none;
}

@media (min-width: 1024px) {
  .floating-menu {
    position: static;
    width: min(27.3vw, 457px);
    max-width: 100%;
    transform: none;
    color: var(--color-text-primary);
  }

  body.is-modal-open .floating-menu {
    display: block;
  }

  .floating-menu__list {
    display: grid;
    gap: min(2vw, 30px);
  }

  .floating-menu__item,
  .floating-menu__item:not(:last-child) {
    display: block;
  }

  .floating-menu__item--mission {
    margin-top: calc(2 * var(--sp-u));
  }

  .floating-menu__sub-list {
    display: grid;
    gap: calc(2 * var(--sp-u));
    margin-top: calc(4 * var(--sp-u));
    margin-left: calc(2 * var(--sp-u));
  }

  .floating-menu__link {
    display: block;
    font-size: 0;
    line-height: 0;
  }

  .floating-menu__link-text {
    display: none;
  }

  .floating-menu__link-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: calc(25 * var(--sp-u));
  }

  .floating-menu__item--mission .floating-menu__link-image {
    height: calc(24 * var(--sp-u));
  }

  .floating-menu__item--special .floating-menu__link-image {
    height: calc(29.5 * var(--sp-u));
  }

  .floating-menu__item--campaign .floating-menu__link-image {
    height: calc(28 * var(--sp-u));
  }

  .floating-menu__sub-link {
    font-size: clamp(1rem, calc(16 * var(--sp-u)), calc(41.969 * var(--sp-u)));
  }

  .floating-menu__item--banner {
    display: block;
    margin-top: 60px;
  }

  .floating-menu__item--banner + .floating-menu__item--banner {
    margin-top: calc(4 * var(--sp-u));
  }

  .floating-menu__banner-link {
    display: block;
    width: 100%;
    border: calc(3 * var(--sp-u)) solid #183e99;
  }

  .floating-menu__banner-link img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* Short PC viewports (Windows display scaling / browser chrome):
   compress vertical rhythm so the full floating menu fits. */
@media (min-width: 1024px) and (max-height: 800px) {
  .site-pc-gutter--right {
    padding-bottom: 32px;
  }

  .floating-menu__list {
    gap: min(1.2vw, 16px);
  }

  .floating-menu__item--mission {
    margin-top: 0;
  }

  .floating-menu__item--banner {
    margin-top: 24px;
  }
}

@media (min-width: 1024px) and (max-height: 680px) {
  .site-pc-gutter--right {
    padding-bottom: 16px;
  }

  .floating-menu__list {
    gap: min(1vw, 12px);
  }

  .floating-menu__item--banner {
    margin-top: 16px;
  }

  .floating-menu__banner-link {
    border-width: 2px;
  }
}


/* assets/css/top/components/modal.css */
.modal,
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}

.modal.is-open,
.site-menu.is-open {
  display: block;
}

#entry-terms-modal {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}

#entry-terms-modal.is-open {
  z-index: 230;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0s;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(28 40 101 / 58%);
}

.modal__panel {
  position: absolute;
  top: calc(16 * var(--sp-u));
  left: 50%;
  z-index: 1;
  width: calc(100% - calc(44 * var(--sp-u)));
  max-width: calc(346 * var(--sp-u));
  height: calc(100% - calc(33 * var(--sp-u)));
  max-height: calc(737 * var(--sp-u));
  padding: calc(40 * var(--sp-u)) calc(20 * var(--sp-u)) calc(30 * var(--sp-u));
  overflow-y: auto;
  background-color: #fff;
  border-radius: calc(18 * var(--sp-u));
  transform: translateX(-50%);
  scrollbar-color: #c5c9d3 transparent;
  scrollbar-width: thin;
}

#entry-terms-modal .modal__panel {
  top: calc(77 * var(--sp-u));
  display: flex;
  flex-direction: column;
  height: calc(100dvh - calc(93 * var(--sp-u)));
  max-height: calc(100dvh - calc(93 * var(--sp-u)));
  padding: 0;
  overflow: hidden;
}

#entry-terms-modal .modal__scroll {
  flex: 1;
  min-height: 0;
  padding:
    min(calc(40 * var(--sp-u)), 40px)
    min(calc(24 * var(--sp-u)), 32px)
    min(calc(28 * var(--sp-u)), 32px);
  overflow-y: auto;
  scrollbar-color: #c5c9d3 transparent;
  scrollbar-width: thin;
}

#entry-terms-modal .modal__scroll::-webkit-scrollbar {
  width: calc(5 * var(--sp-u));
}

#entry-terms-modal .modal__scroll::-webkit-scrollbar-thumb {
  background-color: #c5c9d3;
  border-radius: calc(999 * var(--sp-u));
}

#entry-terms-modal .modal__scroll::-webkit-scrollbar-track {
  background-color: transparent;
}

.modal__panel::-webkit-scrollbar {
  width: calc(5 * var(--sp-u));
}

.modal__panel::-webkit-scrollbar-thumb {
  background-color: #c5c9d3;
  border-radius: calc(999 * var(--sp-u));
}

.modal__panel::-webkit-scrollbar-track {
  background-color: transparent;
}

.site-menu__panel {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max-width);
  height: 100%;
  max-height: none;
  padding: 0;
  overflow-y: auto;
  background-color: transparent;
  border-radius: 0;
  transform: translateX(-50%);
}

.modal__close {
  position: absolute;
  top: calc(10 * var(--sp-u));
  right: calc(10 * var(--sp-u));
  width: calc(48 * var(--sp-u));
  height: calc(48 * var(--sp-u));
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: calc(999 * var(--sp-u));
  -webkit-tap-highlight-color: transparent;
}

.modal__close:focus:not(:focus-visible) {
  outline: none;
}

#entry-terms-modal .modal__close {
  position: absolute;
  top: calc(13 * var(--sp-u));
  right: calc(13 * var(--sp-u));
  z-index: 2;
  width: calc(41 * var(--sp-u));
  height: calc(41 * var(--sp-u));
}

.modal__close-icon {
  display: block;
  width: calc(48 * var(--sp-u));
  height: calc(48 * var(--sp-u));
}

#entry-terms-modal .modal__close-icon {
  width: calc(41 * var(--sp-u));
  height: calc(41 * var(--sp-u));
}

.modal__close:hover,
.site-menu__close:hover {
  background-color: transparent;
  opacity: 0.85;
}

html.using-keyboard .modal__close:focus-visible {
  outline: calc(3 * var(--sp-u)) solid #273db2;
  outline-offset: calc(2 * var(--sp-u));
}

.modal__title {
  margin: 0;
  padding-right: calc(52 * var(--sp-u));
  color: #f06c80;
  font-size: calc(40 * var(--sp-u));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
}

#entry-terms-modal .modal__title {
  font-size: clamp(17px, calc(18 * var(--sp-u)), 20px);
  line-height: 1.28;
}

.modal__title-line {
  display: block;
}

.modal__title-line + .modal__title-line {
  margin-top: calc(8 * var(--sp-u));
}

#entry-terms-modal .modal__title-line + .modal__title-line {
  margin-top: calc(4 * var(--sp-u));
}

.modal__body {
  margin-top: calc(24 * var(--sp-u));
  color: #212e79;
}

#entry-terms-modal .modal__body {
  margin-top: min(calc(18 * var(--sp-u)), 20px);
}

.modal__article + .modal__article {
  margin-top: calc(34 * var(--sp-u));
}

.modal__lead,
.modal__text {
  margin: 0;
  font-size: calc(20 * var(--sp-u));
  font-weight: 700;
  line-height: 1.28;
}

#entry-terms-modal .modal__lead,
#entry-terms-modal .modal__text {
  font-size: clamp(12px, calc(12.5 * var(--sp-u)), 14px);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
}

.modal__section-title {
  margin: calc(28 * var(--sp-u)) 0 0;
  font-size: calc(26 * var(--sp-u));
  font-weight: 700;
  line-height: 1.1;
}

#entry-terms-modal .modal__section-title {
  margin-top: min(calc(30 * var(--sp-u)), 34px);
  padding-bottom: min(calc(8 * var(--sp-u)), 10px);
  border-bottom: 1px solid rgb(33 46 121 / 18%);
  font-size: clamp(15px, calc(15.5 * var(--sp-u)), 18px);
  font-weight: 700;
  line-height: 1.42;
}

.modal__image-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: calc(179 * var(--sp-u));
  margin-top: calc(14 * var(--sp-u));
  background: #d9d9d9;
}

.modal__image-placeholder span {
  color: #212e79;
  font-size: calc(18 * var(--sp-u));
  font-weight: 700;
  line-height: 1.1;
}

#entry-terms-modal .modal__image-placeholder {
  min-height: calc(170 * var(--sp-u));
}

#entry-terms-modal .modal__image-placeholder span {
  font-size: calc(14 * var(--sp-u));
}

.modal__text {
  margin-top: calc(24 * var(--sp-u));
}

#entry-terms-modal .modal__text {
  margin-top: clamp(5px, calc(6 * var(--sp-u)), 8px);
}

#entry-terms-modal .modal__lead {
  font-weight: 500;
}

#entry-terms-modal .modal__text--subhead {
  margin-top: min(calc(18 * var(--sp-u)), 22px);
  font-size: clamp(13px, calc(13.5 * var(--sp-u)), 15px);
  font-weight: 700;
  line-height: 1.55;
}

#entry-terms-modal .modal__section-title + .modal__text--subhead {
  margin-top: min(calc(12 * var(--sp-u)), 14px);
}

#entry-terms-modal .modal__text a {
  color: #273db2;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

#entry-terms-modal .modal__article + .modal__article {
  margin-top: min(calc(34 * var(--sp-u)), 40px);
}

.site-menu {
  z-index: 210;
}

@media (max-width: 1023px) {
  .site-menu {
    display: block;
    visibility: hidden;
    pointer-events: none;
  }

  .site-menu.is-open,
  .site-menu.is-closing {
    visibility: visible;
  }

  .site-menu.is-open .site-menu__panel,
  .site-menu.is-closing .site-menu__panel {
    pointer-events: none;
  }

  .site-menu.is-closing:not(.is-open) {
    pointer-events: none;
  }

  .site-menu__panel {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%);
    transition:
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.45s ease;
  }

  .site-menu.is-open .site-menu__panel {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu__panel {
    transition: none;
    opacity: 1;
  }

  #entry-terms-modal {
    transition: none;
  }
}

.site-menu__overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.site-menu__nav {
  position: relative;
  z-index: 1;
  background-color: rgb(255 255 255 / 94%);
  pointer-events: auto;
  padding:
    min(calc(62 * var(--sp-u)), 62px)
    min(calc(24 * var(--sp-u)), 24px)
    calc(min(calc(88 * var(--sp-u)), 88px) + env(safe-area-inset-bottom, 0px))
    min(calc(50 * var(--sp-u)), 50px);
}

.site-menu__list {
  display: flex;
  flex-direction: column;
  gap: min(calc(20 * var(--sp-u)), 20px);
}

.site-menu__link {
  display: inline-block;
  color: var(--color-text-primary);
  font-size: 0;
  line-height: 0;
  text-decoration: none;
}

.site-menu__link-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.site-menu__item--movie .site-menu__link-image {
  height: min(calc(25 * var(--sp-u)), 25px);
}

.site-menu__item--about .site-menu__link-image {
  height: min(calc(25 * var(--sp-u)), 25px);
}

.site-menu__item--mission {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.site-menu__item--mission .site-menu__link {
  margin-bottom: 0;
}

.site-menu__item--mission .site-menu__link-image {
  height: min(calc(24 * var(--sp-u)), 24px);
}

.site-menu__item--special .site-menu__link-image {
  height: min(calc(29.5 * var(--sp-u)), 29.5px);
}

.site-menu__item--campaign .site-menu__link-image {
  height: min(calc(29 * var(--sp-u)), 29px);
}

.site-menu__sub-list {
  display: grid;
  gap: min(calc(4 * var(--sp-u)), 4px);
}

.site-menu__item--mission .site-menu__sub-list {
  margin-top: min(calc(13 * var(--sp-u)), 13px);
}

.site-menu__sub-link {
  color: var(--color-text-primary);
  font-family: var(--font-family-yasashisa);
  font-size: min(calc(14 * var(--sp-u)), 14px);
  font-weight: 700;
  line-height: 1.49;
  letter-spacing: 0;
}

.site-menu__item--special {
  margin-top: min(calc(24 * var(--sp-u)), 24px);
}

.site-menu__item--top {
  margin-top: min(calc(28 * var(--sp-u)), 28px);
}

.site-menu__top-link {
  color: var(--color-text-primary);
  font-family: var(--font-family-yasashisa);
  font-size: min(calc(18 * var(--sp-u)), 18px);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: min(calc(4 * var(--sp-u)), 4px);
}

.site-menu__close {
  position: absolute;
  top: min(calc(16 * var(--sp-u)), 16px);
  right: min(calc(12 * var(--sp-u)), 12px);
  z-index: 2;
  width: min(calc(41 * var(--sp-u)), 41px);
  height: min(calc(41 * var(--sp-u)), 41px);
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.site-menu__close:focus:not(:focus-visible) {
  outline: none;
}

.site-menu__close-icon {
  display: block;
  width: min(calc(41 * var(--sp-u)), 41px);
  height: min(calc(41 * var(--sp-u)), 41px);
}

.site-menu__link:hover,
html.using-keyboard .site-menu__link:focus-visible,
.site-menu__sub-link:hover,
html.using-keyboard .site-menu__sub-link:focus-visible,
.site-menu__top-link:hover,
html.using-keyboard .site-menu__top-link:focus-visible {
  color: #273db2;
}

body.is-menu-open,
body.is-modal-open {
  overflow: hidden;
}

body.is-menu-open .kv__menu {
  z-index: 80;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .site-menu,
  .site-menu.is-open,
  .site-menu.is-closing {
    display: none;
  }

  #entry-terms-modal .modal__panel {
    top: 50%;
    height: min(80dvh, calc(737 * var(--sp-u)));
    max-height: min(80dvh, calc(737 * var(--sp-u)));
    transform: translate(-54%, -50%);
  }

  body.is-menu-open,
  body.is-modal-open {
    overflow: hidden;
  }
}


/* assets/css/top/components/movie-modal.css */
.movie-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}

.movie-modal.is-open {
  display: block;
}

.movie-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(28 40 101 / 58%);
}

.movie-modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100%;
  transform: translate(-50%, -50%);
}

.movie-modal__close {
  position: absolute;
  top: -53px;
  right: 7px;
  z-index: 2;
  width: 45px;
  height: 45px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.movie-modal__close:focus:not(:focus-visible) {
  outline: none;
}

.movie-modal__close-icon {
  display: block;
  width: 100%;
  height: auto;
}

.movie-modal__close:hover {
  opacity: 0.85;
}

html.using-keyboard .movie-modal__close:focus-visible {
  outline: 3px solid #273db2;
  outline-offset: 2px;
  border-radius: 50%;
}

.movie-modal__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #000;
}

.movie-modal__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 1024px) {
  .movie-modal__content {
    width: 50%;
  }
}


/* assets/css/top/sections/kv.css */
.kv {
  position: relative;
  z-index: 1;
  background-color: var(--color-bg-sky);
  overflow-x: hidden;
  overflow-y: visible;
}

.kv__stage {
  position: relative;
  width: min(100vw, calc(390 * var(--sp-u)));
  height: calc(717 * var(--sp-u));
  margin-inline: auto;
  background-color: var(--color-kv-bg);
}

.kv__menu {
  position: absolute;
  top: calc(13 * var(--sp-u));
  left: calc(290 * var(--sp-u));
  z-index: 10;
  width: calc(92 * var(--sp-u));
}

@media (max-width: 1023px) {
  .kv__menu {
    position: fixed;
    top: calc(8 * var(--sp-u));
    left: calc(50% + calc(95 * var(--sp-u)));
    right: auto;
    z-index: 100;
    width: calc(92 * var(--sp-u));
  }
}

.kv__menu-toggle {
  display: block;
  padding: 0;
  color: var(--color-text-primary);
  border: 0;
  background: transparent;
  border-radius: 50%;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.kv__menu-toggle:focus:not(:focus-visible) {
  outline: none;
}

html.using-keyboard .kv__menu-toggle:focus-visible {
  outline: calc(3 * var(--sp-u)) solid #273db2;
  outline-offset: calc(2 * var(--sp-u));
}

.kv__menu-icon-wrap {
  position: relative;
  display: block;
  width: calc(102 * var(--sp-u));
  aspect-ratio: 1 / 1;
  right: calc(4 * var(--sp-u));
  top: calc(-7 * var(--sp-u));
  transform: rotate3d(0, 0, 1, 0deg);
  transform-origin: center center;
}

.kv__menu-icon {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.35s ease;
}

.kv__menu-icon--initial {
  opacity: 1;
}

.kv__menu-icon--scrolled {
  opacity: 0;
}

.kv__menu-toggle.is-scrolled .kv__menu-icon--initial {
  opacity: 0;
}

.kv__menu-toggle.is-scrolled .kv__menu-icon--scrolled {
  opacity: 1;
}

.kv__menu-toggle.is-icon-switching-forward .kv__menu-icon-wrap {
  animation: kv-menu-icon-switch 0.35s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.kv__menu-toggle.is-icon-switching-back .kv__menu-icon-wrap {
  animation: kv-menu-icon-switch 0.35s cubic-bezier(0.34, 1.15, 0.64, 1) reverse;
}

@keyframes kv-menu-icon-switch {
  0%,
  100% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  50% {
    transform: rotate3d(0, 0, 1, 24deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv__menu-toggle.is-icon-switching-forward .kv__menu-icon-wrap,
  .kv__menu-toggle.is-icon-switching-back .kv__menu-icon-wrap {
    animation: none;
  }

  .kv__menu-icon {
    transition: none;
  }
}

.kv__menu-text {
  position: absolute;
  width: calc(1 * var(--sp-u));
  height: calc(1 * var(--sp-u));
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.kv__decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kv__deco {
  position: absolute;
}

.kv__deco img,
.kv__character img {
  display: block;
  width: 100%;
  height: auto;
}

.kv__brand-products img {
  display: block;
  object-fit: contain;
}

.kv__deco--cloud-1 {
  top: calc(251 * var(--sp-u));
  left: calc(-14 * var(--sp-u));
  width: calc(87 * var(--sp-u));
}

.kv__deco--cloud-2 {
  top: calc(359 * var(--sp-u));
  left: calc(321 * var(--sp-u));
  width: calc(70 * var(--sp-u));
}

.kv__deco--hanger {
  top: calc(152 * var(--sp-u));
  left: calc(314 * var(--sp-u));
  width: calc(85 * var(--sp-u));
  transform: none;
  transform-origin: center;
}

.kv__deco--clothespin {
  top: calc(118 * var(--sp-u));
  left: calc(228 * var(--sp-u));
  width: calc(54 * var(--sp-u));
}

.kv__deco--shape-01 {
  top: calc(43 * var(--sp-u));
  left: calc(210 * var(--sp-u));
  width: calc(36 * var(--sp-u));
  transform: rotate(0deg);
  transform-origin: center;
}

.kv__deco--shape-02 {
  top: calc(276 * var(--sp-u));
  left: calc(349 * var(--sp-u));
  width: calc(37 * var(--sp-u));
  --kv-deco-rotate: -2deg;
  transform: rotate(var(--kv-deco-rotate));
  transform-origin: center;
}

.kv__deco--shape-03 {
  top: calc(447 * var(--sp-u));
  left: calc(28 * var(--sp-u));
  width: calc(40 * var(--sp-u));
}

.kv__deco--shape-04 {
  top: calc(666 * var(--sp-u));
  left: calc(78 * var(--sp-u));
  width: calc(40 * var(--sp-u));
  transform: rotate(0deg);
  transform-origin: center;
}

.kv__deco--chopstick {
  top: calc(499 * var(--sp-u));
  left: calc(51 * var(--sp-u));
  width: calc(81 * var(--sp-u));
  --kv-deco-rotate: -1deg;
  transform: rotate(var(--kv-deco-rotate));
  transform-origin: center;
}

.kv__deco--bowl {
  top: calc(352 * var(--sp-u));
  left: calc(-18 * var(--sp-u));
  width: calc(89 * var(--sp-u));
}

.kv__deco--sponge {
  top: calc(590 * var(--sp-u));
  left: calc(-3 * var(--sp-u));
  width: calc(68 * var(--sp-u));
}

.kv__character {
  position: absolute;
  margin: 0;
}

.kv__character--girl {
  top: calc(17 * var(--sp-u));
  left: calc(-5 * var(--sp-u));
  width: calc(210 * var(--sp-u));
  z-index: 2;
}

.kv__character--boy {
  top: calc(455 * var(--sp-u));
  left: calc(129 * var(--sp-u));
  width: calc(257 * var(--sp-u));
  z-index: 3;
  transform-origin: 50% 100%;
}

.kv__brand-logo {
  position: absolute;
  top: calc(202 * var(--sp-u));
  left: 50%;
  z-index: 4;
  width: calc(232 * var(--sp-u));
  height: calc(207 * var(--sp-u));
  transform: translateX(-50%);
}

.kv__brand-logo__stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.kv__brand-logo__part {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}

.kv__brand-logo__part--arc-text {
  top: 0;
  left: calc(2.871 * var(--sp-u));
  width: calc(229 * var(--sp-u));
}

.kv__brand-logo__part--ring-text {
  top: calc(36.159 * var(--sp-u));
  left: 0;
  width: calc(232 * var(--sp-u));
}

.kv__brand-products {
  position: absolute;
  top: calc(403 * var(--sp-u));
  left: 50%;
  z-index: 4;
  width: calc(152 * var(--sp-u));
  height: calc(78 * var(--sp-u));
  transform: translateX(-50%);
}

.kv__brand-product--attack {
  position: absolute;
  top: calc(7 * var(--sp-u));
  left: calc(-7 * var(--sp-u));
  width: calc(80 * var(--sp-u));
  height: calc(85 * var(--sp-u));
}

.kv__brand-product--cucute {
  position: absolute;
  top: calc(9 * var(--sp-u));
  left: calc(73 * var(--sp-u));
  width: calc(85 * var(--sp-u));
  height: calc(85 * var(--sp-u));
}

/* Entrance (~2s total): pop 0.6s × 5 steps, stagger 0.35s */
.kv.kv--animate {
    --kv-deco-pop-duration: 0.6s;
    --kv-pop-overshoot: 0.12;
    --kv-pop-rebound: 0.035;
    --kv-step1-delay: 0s;
    --kv-step2-delay: 0.35s;
    --kv-step3-delay: 0.7s;
    --kv-step4-delay: 1.05s;
    --kv-step5-delay: 1.4s;
    --kv-float-duration: 4.2s;
    --kv-ease-float: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  }

  .kv.kv--animate .kv__deco--shape-01,
  .kv.kv--animate .kv__deco--shape-02,
  .kv.kv--animate .kv__deco--shape-03,
  .kv.kv--animate .kv__deco--shape-04,
  .kv.kv--animate .kv__deco--cloud-1,
  .kv.kv--animate .kv__deco--cloud-2,
  .kv.kv--animate .kv__deco--hanger,
  .kv.kv--animate .kv__deco--clothespin,
  .kv.kv--animate .kv__deco--chopstick,
  .kv.kv--animate .kv__deco--bowl,
  .kv.kv--animate .kv__deco--sponge,
  .kv.kv--animate .kv__character,
  .kv.kv--animate .kv__brand-logo,
  .kv.kv--animate .kv__brand-products,
  .kv.kv--animate .kv__menu {
    opacity: 0;
  }

  .kv.kv--animate:not(.is-ready) .kv__deco--shape-01,
  .kv.kv--animate:not(.is-ready) .kv__deco--shape-02,
  .kv.kv--animate:not(.is-ready) .kv__deco--shape-03,
  .kv.kv--animate:not(.is-ready) .kv__deco--shape-04,
  .kv.kv--animate:not(.is-ready) .kv__deco--cloud-1,
  .kv.kv--animate:not(.is-ready) .kv__deco--cloud-2,
  .kv.kv--animate:not(.is-ready) .kv__deco--hanger,
  .kv.kv--animate:not(.is-ready) .kv__deco--clothespin,
  .kv.kv--animate:not(.is-ready) .kv__deco--chopstick,
  .kv.kv--animate:not(.is-ready) .kv__deco--bowl,
  .kv.kv--animate:not(.is-ready) .kv__deco--sponge {
    transform: translate(var(--kv-deco-shift-x, 0), var(--kv-deco-shift-y, 0))
      rotate(var(--kv-deco-rotate, 0deg)) scale(0);
  }

  .kv.kv--animate:not(.is-ready) .kv__character {
    transform: translateY(calc(20 * var(--sp-u))) scale(0.78);
  }

  .kv.kv--animate:not(.is-ready) .kv__character--boy {
    transform: translateY(calc(-12 * var(--sp-u))) scale(0.78);
  }

  .kv.kv--animate:not(.is-ready) .kv__brand-logo,
  .kv.kv--animate:not(.is-ready) .kv__brand-products {
    transform: translateX(-50%) translateY(calc(12 * var(--sp-u))) scale(0.88);
  }

  .kv.kv--animate:not(.is-ready) .kv__menu {
    transform: scale(0);
  }

  .kv__deco--shape-01 {
    --kv-deco-shift-x: calc(195 * var(--sp-u) - 210 * var(--sp-u));
    --kv-deco-shift-y: calc(305 * var(--sp-u) - 43 * var(--sp-u));
  }

  .kv__deco--shape-02 {
    --kv-deco-shift-x: calc(195 * var(--sp-u) - 349 * var(--sp-u));
    --kv-deco-shift-y: calc(305 * var(--sp-u) - 276 * var(--sp-u));
  }

  .kv__deco--shape-03 {
    --kv-deco-shift-x: calc(195 * var(--sp-u) - 28 * var(--sp-u));
    --kv-deco-shift-y: calc(305 * var(--sp-u) - 447 * var(--sp-u));
  }

  .kv__deco--shape-04 {
    --kv-deco-shift-x: calc(195 * var(--sp-u) - 78 * var(--sp-u));
    --kv-deco-shift-y: calc(305 * var(--sp-u) - 666 * var(--sp-u));
  }

  .kv__deco--cloud-1 {
    --kv-deco-shift-x: calc(195 * var(--sp-u) + 14 * var(--sp-u));
    --kv-deco-shift-y: calc(305 * var(--sp-u) - 251 * var(--sp-u));
  }

  .kv__deco--cloud-2 {
    --kv-deco-shift-x: calc(195 * var(--sp-u) - 321 * var(--sp-u));
    --kv-deco-shift-y: calc(305 * var(--sp-u) - 359 * var(--sp-u));
  }

  .kv__deco--hanger {
    --kv-deco-shift-x: calc(195 * var(--sp-u) - 314 * var(--sp-u));
    --kv-deco-shift-y: calc(305 * var(--sp-u) - 152 * var(--sp-u));
  }

  .kv__deco--clothespin {
    --kv-deco-shift-x: calc(195 * var(--sp-u) - 228 * var(--sp-u));
    --kv-deco-shift-y: calc(305 * var(--sp-u) - 118 * var(--sp-u));
  }

  .kv__deco--chopstick {
    --kv-deco-shift-x: calc(195 * var(--sp-u) - 51 * var(--sp-u));
    --kv-deco-shift-y: calc(305 * var(--sp-u) - 499 * var(--sp-u));
  }

  .kv__deco--bowl {
    --kv-deco-shift-x: calc(195 * var(--sp-u) + 18 * var(--sp-u));
    --kv-deco-shift-y: calc(305 * var(--sp-u) - 352 * var(--sp-u));
  }

  .kv__deco--sponge {
    --kv-deco-shift-x: calc(195 * var(--sp-u) + 3 * var(--sp-u));
    --kv-deco-shift-y: calc(305 * var(--sp-u) - 590 * var(--sp-u));
  }

  .kv.kv--animate.is-ready .kv__deco--shape-01,
  .kv.kv--animate.is-ready .kv__deco--shape-02,
  .kv.kv--animate.is-ready .kv__deco--shape-03,
  .kv.kv--animate.is-ready .kv__deco--shape-04 {
    animation: kv-deco-pop var(--kv-deco-pop-duration) linear both;
    animation-delay: var(--kv-step1-delay);
  }

  .kv.kv--animate.is-ready .kv__deco--cloud-1,
  .kv.kv--animate.is-ready .kv__deco--cloud-2 {
    animation: kv-deco-pop var(--kv-deco-pop-duration) linear both;
    animation-delay: var(--kv-step2-delay);
  }

  .kv.kv--animate.is-ready .kv__deco--hanger,
  .kv.kv--animate.is-ready .kv__deco--clothespin,
  .kv.kv--animate.is-ready .kv__deco--chopstick,
  .kv.kv--animate.is-ready .kv__deco--bowl,
  .kv.kv--animate.is-ready .kv__deco--sponge {
    animation:
      kv-deco-pop var(--kv-deco-pop-duration) linear both,
      kv-deco-float var(--kv-float-duration) var(--kv-ease-float) infinite;
    animation-delay:
      var(--kv-step2-delay),
      calc(var(--kv-step2-delay) + var(--kv-deco-pop-duration));
  }

  .kv.kv--animate.is-ready .kv__deco--hanger {
    --kv-float-distance: calc(6 * var(--sp-u));
    animation-duration: var(--kv-deco-pop-duration), 3.2s;
    animation-delay: var(--kv-step2-delay), calc(var(--kv-step2-delay) + var(--kv-deco-pop-duration) + 0.35s);
  }

  .kv.kv--animate.is-ready .kv__deco--clothespin {
    --kv-float-distance: calc(4 * var(--sp-u));
    animation-duration: var(--kv-deco-pop-duration), 3.6s;
    animation-delay: var(--kv-step2-delay), calc(var(--kv-step2-delay) + var(--kv-deco-pop-duration) + 0.5s);
  }

  .kv.kv--animate.is-ready .kv__deco--chopstick {
    --kv-float-distance: calc(5 * var(--sp-u));
    animation-duration: var(--kv-deco-pop-duration), 3.1s;
    animation-delay: var(--kv-step2-delay), calc(var(--kv-step2-delay) + var(--kv-deco-pop-duration) + 0.15s);
  }

  .kv.kv--animate.is-ready .kv__deco--bowl {
    --kv-float-distance: calc(5 * var(--sp-u));
    animation-duration: var(--kv-deco-pop-duration), 3.5s;
    animation-delay: var(--kv-step2-delay), calc(var(--kv-step2-delay) + var(--kv-deco-pop-duration) + 0.45s);
  }

  .kv.kv--animate.is-ready .kv__deco--sponge {
    --kv-float-distance: calc(6 * var(--sp-u));
    animation-duration: var(--kv-deco-pop-duration), 3.3s;
    animation-delay: var(--kv-step2-delay), calc(var(--kv-step2-delay) + var(--kv-deco-pop-duration) + 0.6s);
  }

  .kv.kv--animate.is-ready .kv__character--girl {
    animation:
      kv-content-pop var(--kv-deco-pop-duration) linear both,
      kv-character-float var(--kv-float-duration) var(--kv-ease-float) infinite;
    --kv-float-distance: calc(7 * var(--sp-u));
    animation-duration: var(--kv-deco-pop-duration), 3.7s;
    animation-delay: var(--kv-step3-delay), calc(var(--kv-step3-delay) + var(--kv-deco-pop-duration) + 0.1s);
  }

  .kv.kv--animate.is-ready .kv__character--boy {
    animation:
      kv-content-pop-boy var(--kv-deco-pop-duration) linear both,
      kv-character-float var(--kv-float-duration) var(--kv-ease-float) infinite;
    --kv-float-distance: calc(8 * var(--sp-u));
    animation-duration: var(--kv-deco-pop-duration), 4s;
    animation-delay: var(--kv-step3-delay), calc(var(--kv-step3-delay) + var(--kv-deco-pop-duration) + 0.3s);
  }

  .kv.kv--animate.is-ready .kv__brand-logo {
    animation: kv-title-pop var(--kv-deco-pop-duration) linear both;
    animation-delay: var(--kv-step4-delay);
  }

  .kv.kv--animate.is-ready .kv__brand-products {
    animation: kv-title-pop var(--kv-deco-pop-duration) linear both;
    animation-delay: calc(var(--kv-step4-delay) + 0.08s);
  }

  .kv.kv--animate.is-ready .kv__menu {
    animation: kv-menu-pop var(--kv-deco-pop-duration) linear both;
    animation-delay: var(--kv-step5-delay);
  }

  /* SP portal: menu lives outside .kv, sync entrance via JS state classes */
  .kv__menu.kv__menu--portaled.kv__menu--entrance {
    --kv-deco-pop-duration: 0.6s;
    --kv-step5-delay: 1.4s;
    opacity: 0;
  }

  .kv__menu.kv__menu--portaled.kv__menu--entrance:not(.kv__menu--entrance-ready) {
    transform: scale(0);
  }

  .kv__menu.kv__menu--portaled.kv__menu--entrance.kv__menu--entrance-ready {
    animation: kv-menu-pop var(--kv-deco-pop-duration) linear both;
    animation-delay: var(--kv-step5-delay);
  }

@keyframes kv-deco-pop {
  0% {
    opacity: 0;
    transform: translate3d(var(--kv-deco-shift-x, 0), var(--kv-deco-shift-y, 0), 0)
      rotate(var(--kv-deco-rotate, 0deg)) scale3d(0, 0, 1);
  }

  10% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  36% {
    transform: translate3d(calc(var(--kv-deco-shift-x, 0) * 0.18), calc(var(--kv-deco-shift-y, 0) * 0.18), 0)
      rotate(var(--kv-deco-rotate, 0deg)) scale3d(1.04, 1.04, 1);
  }

  43% {
    transform: translate3d(calc(var(--kv-deco-shift-x, 0) * var(--kv-pop-overshoot, 0.12) * -1), calc(var(--kv-deco-shift-y, 0) * var(--kv-pop-overshoot, 0.12) * -1), 0)
      rotate(var(--kv-deco-rotate, 0deg)) scale3d(1.2, 1.2, 1);
  }

  58% {
    transform: translate3d(calc(var(--kv-deco-shift-x, 0) * var(--kv-pop-rebound, 0.035)), calc(var(--kv-deco-shift-y, 0) * var(--kv-pop-rebound, 0.035)), 0)
      rotate(var(--kv-deco-rotate, 0deg)) scale3d(0.94, 0.94, 1);
  }

  72% {
    transform: translate3d(calc(var(--kv-deco-shift-x, 0) * -0.012), calc(var(--kv-deco-shift-y, 0) * -0.012), 0)
      rotate(var(--kv-deco-rotate, 0deg)) scale3d(1.04, 1.04, 1);
  }

  86% {
    transform: translate3d(0, 0, 0) rotate(var(--kv-deco-rotate, 0deg)) scale3d(0.99, 0.99, 1);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--kv-deco-rotate, 0deg)) scale3d(1, 1, 1);
  }
}

@keyframes kv-content-pop {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(20 * var(--sp-u)), 0) scale3d(0.78, 0.78, 1);
  }

  12% {
    opacity: 1;
  }

  43% {
    transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1);
  }

  58% {
    transform: translate3d(0, 0, 0) scale3d(0.94, 0.94, 1);
  }

  72% {
    transform: translate3d(0, 0, 0) scale3d(1.04, 1.04, 1);
  }

  86% {
    transform: translate3d(0, 0, 0) scale3d(0.99, 0.99, 1);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes kv-content-pop-boy {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(-12 * var(--sp-u)), 0) scale3d(0.78, 0.78, 1);
  }

  12% {
    opacity: 1;
  }

  43% {
    transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1);
  }

  58% {
    transform: translate3d(0, 0, 0) scale3d(0.94, 0.94, 1);
  }

  72% {
    transform: translate3d(0, 0, 0) scale3d(1.04, 1.04, 1);
  }

  86% {
    transform: translate3d(0, 0, 0) scale3d(0.99, 0.99, 1);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes kv-menu-pop {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale3d(0, 0, 1);
  }

  10% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  43% {
    transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1);
  }

  58% {
    transform: translate3d(0, 0, 0) scale3d(0.94, 0.94, 1);
  }

  72% {
    transform: translate3d(0, 0, 0) scale3d(1.04, 1.04, 1);
  }

  86% {
    transform: translate3d(0, 0, 0) scale3d(0.99, 0.99, 1);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes kv-title-pop {
  0% {
    opacity: 0;
    transform: translate3d(-50%, calc(12 * var(--sp-u)), 0) scale3d(0.88, 0.88, 1);
  }

  12% {
    opacity: 1;
  }

  43% {
    transform: translate3d(-50%, calc(-6 * var(--sp-u)), 0) scale3d(1.2, 1.2, 1);
  }

  58% {
    transform: translate3d(-50%, calc(2 * var(--sp-u)), 0) scale3d(0.94, 0.94, 1);
  }

  72% {
    transform: translate3d(-50%, calc(-1 * var(--sp-u)), 0) scale3d(1.04, 1.04, 1);
  }

  86% {
    transform: translate3d(-50%, 0, 0) scale3d(0.99, 0.99, 1);
  }

  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes kv-deco-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(var(--kv-deco-rotate, 0deg));
  }

  50% {
    transform: translate3d(0, calc(-1 * var(--kv-float-distance, calc(5 * var(--sp-u)))), 0)
      rotate(var(--kv-deco-rotate, 0deg));
  }
}

@keyframes kv-character-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, calc(-1 * var(--kv-float-distance, calc(7 * var(--sp-u)))), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv.kv--animate:not(.is-ready) .kv__character,
  .kv.kv--animate:not(.is-ready) .kv__brand-logo,
  .kv.kv--animate:not(.is-ready) .kv__brand-products,
  .kv.kv--animate:not(.is-ready) .kv__menu {
    opacity: 1;
    transform: none;
  }

  .kv.kv--animate:not(.is-ready) .kv__brand-logo,
  .kv.kv--animate:not(.is-ready) .kv__brand-products {
    transform: translateX(-50%);
  }

  .kv.kv--animate:not(.is-ready) .kv__deco,
  .kv.kv--animate.is-ready .kv__deco {
    opacity: 1;
    animation: none;
  }

  .kv.kv--animate:not(.is-ready) .kv__deco--shape-02,
  .kv.kv--animate.is-ready .kv__deco--shape-02 {
    transform: rotate(-2deg);
  }

  .kv.kv--animate:not(.is-ready) .kv__deco--chopstick,
  .kv.kv--animate.is-ready .kv__deco--chopstick {
    transform: rotate(-1deg);
  }

  .kv.kv--animate.is-ready .kv__character,
  .kv.kv--animate.is-ready .kv__brand-logo,
  .kv.kv--animate.is-ready .kv__brand-products,
  .kv.kv--animate.is-ready .kv__menu {
    animation: none;
    opacity: 1;
  }

  .kv__menu.kv__menu--portaled.kv__menu--entrance,
  .kv__menu.kv__menu--portaled.kv__menu--entrance.kv__menu--entrance-ready {
    animation: none;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }

  .kv.kv--animate.is-ready .kv__brand-logo,
  .kv.kv--animate.is-ready .kv__brand-products {
    transform: translateX(-50%);
  }
}


/* assets/css/top/sections/movie.css */
.movie {
  position: relative;
  z-index: 0;
  background-color: var(--color-movie);
  overflow: hidden;
}

.movie__stage {
  position: relative;
  width: min(100vw, calc(390 * var(--sp-u)));
  height: calc(494 * var(--sp-u));
  margin-inline: auto;
  background-color: var(--color-white);
}

.movie__heading {
  position: absolute;
  top: calc(70 * var(--sp-u));
  left: calc(27 * var(--sp-u));
  z-index: 3;
  margin: 0;
}

.movie__title {
  display: block;
  width: calc(126 * var(--sp-u));
  height: calc(25 * var(--sp-u));
}

.movie__decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.movie__deco {
  position: absolute;
  z-index: 0;
  transform-origin: center;
}

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

/* Figma 67:24518 — 上ピンク2連スクエア */
.movie__deco--shape-02-top {
  top: calc(13 * var(--sp-u));
  left: calc(178 * var(--sp-u));
  width: calc(39 * var(--sp-u));
  --movie-deco-rotate: 43.2deg;
  --movie-deco-shift-x: calc(-2.5 * var(--sp-u));
  --movie-deco-shift-y: calc(220.8 * var(--sp-u));
}

/* Figma 67:24521 — 下ピンク2連スクエア */
.movie__deco--shape-02-bottom {
  top: calc(447 * var(--sp-u));
  left: calc(250 * var(--sp-u));
  width: calc(40 * var(--sp-u));
  --movie-deco-rotate: 121deg;
  --movie-deco-shift-x: calc(-75 * var(--sp-u));
  --movie-deco-shift-y: calc(-213.5 * var(--sp-u));
}

/* Figma 67:24524 — 右上青ジグザグ */
.movie__deco--shape-01-top {
  top: calc(53 * var(--sp-u));
  left: calc(303 * var(--sp-u));
  width: calc(42 * var(--sp-u));
  --movie-deco-rotate: 9.5deg;
  --movie-deco-shift-x: calc(-129 * var(--sp-u));
  --movie-deco-shift-y: calc(161.3 * var(--sp-u));
}

/* Figma 67:24566 — 右下青ジグザグ */
.movie__deco--shape-01-bottom {
  top: calc(397 * var(--sp-u));
  left: calc(352 * var(--sp-u));
  width: calc(42 * var(--sp-u));
  --movie-deco-rotate: 9.5deg;
  --movie-deco-shift-x: calc(-178 * var(--sp-u));
  --movie-deco-shift-y: calc(-182.7 * var(--sp-u));
}

/* Figma 67:24511 — 左下オレンジリング */
.movie__deco--shape-03 {
  top: calc(410 * var(--sp-u));
  left: calc(30 * var(--sp-u));
  width: calc(38 * var(--sp-u));
  --movie-deco-shift-x: calc(146 * var(--sp-u));
  --movie-deco-shift-y: calc(-182 * var(--sp-u));
}

/* Figma 67:24516 — 左黄三角（TV背面） */
.movie__deco--shape-05-left {
  top: calc(119 * var(--sp-u));
  left: calc(-21 * var(--sp-u));
  width: calc(35 * var(--sp-u));
  --movie-deco-rotate: -37.5deg;
  --movie-deco-shift-x: calc(198.5 * var(--sp-u));
  --movie-deco-shift-y: calc(109.4 * var(--sp-u));
}

/* Figma 67:24517 — 下黄三角 */
.movie__deco--shape-05-bottom {
  top: calc(386 * var(--sp-u));
  left: calc(140 * var(--sp-u));
  width: calc(35 * var(--sp-u));
  --movie-deco-rotate: 90deg;
  --movie-deco-shift-x: calc(37.5 * var(--sp-u));
  --movie-deco-shift-y: calc(-157.6 * var(--sp-u));
}

/* Figma 67:24512 — 右3本バー（TV背面） */
.movie__deco--shape-04 {
  top: calc(225.9 * var(--sp-u));
  left: calc(352.8 * var(--sp-u));
  width: calc(50 * var(--sp-u));
  --movie-deco-rotate: -64.3deg;
  --movie-deco-shift-x: calc(-182.8 * var(--sp-u));
  --movie-deco-shift-y: calc(-4.5 * var(--sp-u));
}

.movie__tv {
  position: absolute;
  top: calc(137 * var(--sp-u));
  left: calc(30 * var(--sp-u));
  z-index: 1;
  width: calc(329 * var(--sp-u));
  margin: 0;
}

.movie__tv-frame {
  display: block;
  width: 100%;
  height: auto;
}

.movie__play {
  position: absolute;
  top: 39.11%;
  left: 50%;
  z-index: 2;
  width: calc(48 * var(--sp-u));
  height: calc(48 * var(--sp-u));
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}

.movie__play:focus:not(:focus-visible) {
  outline: none;
}

.movie__play:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.movie__play-icon {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #e2e0e0d9;
}

.movie__play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 57%;
  width: 49%;
  height: 61%;
  background-color: #fff;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  transform: translate(-50%, -50%);
}

/* Entrance animation: decos → TV → MOVIE title (~1.4s total, 3 beats) */
.movie.movie--animate {
  --movie-deco-duration: 0.6s;
  --movie-deco-delay: 0s;
  --movie-tv-delay: 0.4s;
  --movie-tv-duration: 0.6s;
  --movie-title-delay: 0.8s;
  --movie-title-duration: 0.6s;
  --movie-pop-overshoot: 0.12;
  --movie-pop-rebound: 0.035;
}

.movie.movie--animate .movie__deco,
.movie.movie--animate .movie__tv,
.movie.movie--animate .movie__heading {
  opacity: 0;
}

.movie.movie--animate:not(.is-inview) .movie__deco {
  transform: translate(var(--movie-deco-shift-x, 0), var(--movie-deco-shift-y, 0))
    rotate(var(--movie-deco-rotate, 0deg)) scale(0);
}

.movie.movie--animate:not(.is-inview) .movie__tv {
  transform: translateY(calc(20 * var(--sp-u))) scale(0.78);
}

.movie.movie--animate:not(.is-inview) .movie__heading {
  transform: translateY(calc(12 * var(--sp-u))) scale(0.88);
}

.movie.movie--animate.is-inview .movie__deco {
  animation: movie-deco-pop var(--movie-deco-duration) linear both;
  animation-delay: var(--movie-deco-delay);
}

.movie.movie--animate.is-inview .movie__tv {
  animation: movie-tv-in var(--movie-tv-duration) linear both;
  animation-delay: var(--movie-tv-delay);
}

.movie.movie--animate.is-inview .movie__heading {
  animation: movie-title-in var(--movie-title-duration) linear both;
  animation-delay: var(--movie-title-delay);
}

@keyframes movie-deco-pop {
  0% {
    opacity: 0;
    transform: translate(var(--movie-deco-shift-x, 0), var(--movie-deco-shift-y, 0))
      rotate(var(--movie-deco-rotate, 0deg)) scale(0);
  }

  10% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  36% {
    transform: translate(calc(var(--movie-deco-shift-x, 0) * 0.18), calc(var(--movie-deco-shift-y, 0) * 0.18))
      rotate(var(--movie-deco-rotate, 0deg)) scale(1.04);
  }

  43% {
    transform: translate(calc(var(--movie-deco-shift-x, 0) * var(--movie-pop-overshoot, 0.12) * -1), calc(var(--movie-deco-shift-y, 0) * var(--movie-pop-overshoot, 0.12) * -1))
      rotate(var(--movie-deco-rotate, 0deg)) scale(1.2);
  }

  58% {
    transform: translate(calc(var(--movie-deco-shift-x, 0) * var(--movie-pop-rebound, 0.035)), calc(var(--movie-deco-shift-y, 0) * var(--movie-pop-rebound, 0.035)))
      rotate(var(--movie-deco-rotate, 0deg)) scale(0.94);
  }

  72% {
    transform: translate(calc(var(--movie-deco-shift-x, 0) * -0.012), calc(var(--movie-deco-shift-y, 0) * -0.012))
      rotate(var(--movie-deco-rotate, 0deg)) scale(1.04);
  }

  86% {
    transform: translate(0, 0) rotate(var(--movie-deco-rotate, 0deg)) scale(0.99);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--movie-deco-rotate, 0deg)) scale(1);
  }
}

@keyframes movie-tv-in {
  0% {
    opacity: 0;
    transform: translateY(calc(20 * var(--sp-u))) scale(0.78);
  }

  12% {
    opacity: 1;
  }

  43% {
    transform: translateY(0) scale(1.2);
  }

  58% {
    transform: translateY(0) scale(0.94);
  }

  72% {
    transform: translateY(0) scale(1.04);
  }

  86% {
    transform: translateY(0) scale(0.99);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes movie-title-in {
  0% {
    opacity: 0;
    transform: translateY(calc(12 * var(--sp-u))) scale(0.88);
  }

  12% {
    opacity: 1;
  }

  43% {
    transform: translateY(0) scale(1.2);
  }

  58% {
    transform: translateY(0) scale(0.94);
  }

  72% {
    transform: translateY(0) scale(1.04);
  }

  86% {
    transform: translateY(0) scale(0.99);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .movie.movie--animate:not(.is-inview) .movie__tv,
  .movie.movie--animate:not(.is-inview) .movie__heading {
    opacity: 1;
    transform: none;
  }

  .movie.movie--animate:not(.is-inview) .movie__deco,
  .movie.movie--animate.is-inview .movie__deco {
    opacity: 1;
    animation: none;
  }

  .movie.movie--animate:not(.is-inview) .movie__deco--shape-02-top,
  .movie.movie--animate.is-inview .movie__deco--shape-02-top {
    transform: rotate(43.2deg);
  }

  .movie.movie--animate:not(.is-inview) .movie__deco--shape-02-bottom,
  .movie.movie--animate.is-inview .movie__deco--shape-02-bottom {
    transform: rotate(121deg);
  }

  .movie.movie--animate:not(.is-inview) .movie__deco--shape-01-top,
  .movie.movie--animate.is-inview .movie__deco--shape-01-top,
  .movie.movie--animate:not(.is-inview) .movie__deco--shape-01-bottom,
  .movie.movie--animate.is-inview .movie__deco--shape-01-bottom {
    transform: rotate(9.5deg);
  }

  .movie.movie--animate:not(.is-inview) .movie__deco--shape-05-left,
  .movie.movie--animate.is-inview .movie__deco--shape-05-left {
    transform: rotate(-37.5deg);
  }

  .movie.movie--animate:not(.is-inview) .movie__deco--shape-05-bottom,
  .movie.movie--animate.is-inview .movie__deco--shape-05-bottom {
    transform: rotate(90deg);
  }

  .movie.movie--animate:not(.is-inview) .movie__deco--shape-04,
  .movie.movie--animate.is-inview .movie__deco--shape-04 {
    transform: rotate(-64.3deg);
  }

  .movie.movie--animate.is-inview .movie__tv,
  .movie.movie--animate.is-inview .movie__heading {
    animation: none;
  }
}


/* assets/css/top/sections/about.css */
.about {
  position: relative;
  margin-top: 0;
  padding-bottom: calc(7 * var(--sp-u));
  background-color: transparent;
}

/* Figma Group 1233: sky bg from ABOUT title center (y≈32) to CTA vertical center (y≈731.67) */
.about::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(36.5 * var(--sp-u));
  bottom: calc(36 * var(--sp-u));
  background-color: var(--color-about);
  z-index: 0;
}

.about__inner {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about__heading-area {
  position: relative;
  width: 100%;
  min-height: calc(68 * var(--sp-u));
  margin-bottom: 0;
  overflow: visible;
}

.about__decorations {
  position: absolute;
  left: calc(-1 * var(--inner-padding));
  right: calc(-1 * var(--inner-padding));
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.about__deco {
  position: absolute;
}

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

/* Figma 67:24581 — About 専用 deco.svg（KV shape-01 とは別素材） */
.about__deco--shape-01 {
  top: calc(5 * var(--sp-u));
  left: calc(14 * var(--sp-u));
  width: calc(42 * var(--sp-u));
  rotate: 0deg;
  transform-origin: top left;
}

.about__deco--shape-05 {
  top: calc(2 * var(--sp-u));
  right: calc(21 * var(--sp-u));
  width: calc(35 * var(--sp-u));
  rotate: 0deg;
  transform-origin: top right;
}

.about__heading {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-top: calc(20 * var(--sp-u));
  text-align: center;
}

.about__title {
  display: inline-block;
  width: calc(129 * var(--sp-u));
  height: calc(25 * var(--sp-u));
}

.about__body {
  width: 100%;
  padding-top: calc(42 * var(--sp-u));
  text-align: center;
  color: var(--color-navy);
}

.about__catch {
  font-size: clamp(1.625rem, calc(26 * var(--sp-u)), calc(68.2 * var(--sp-u)));
  font-weight: 700;
  line-height: calc(18 * var(--sp-u));
  margin: 0 0 calc(42 * var(--sp-u));
  white-space: nowrap;
}

.about__text-block {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--sp-u));
  margin: 0 0 calc(55 * var(--sp-u));
  padding: 0;
  font-size: clamp(1rem, calc(16 * var(--sp-u)), calc(41.969 * var(--sp-u)));
  font-weight: 700;
  line-height: calc(30.7 * var(--sp-u));
}

.about__text-block > p {
  margin: 0;
}

.about__highlight {
  display: inline;
  padding: calc(5 * var(--sp-u)) calc(4 * var(--sp-u));
  background-color: #fff;
  border-radius: calc(2 * var(--sp-u));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.about__campaign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.about__campaign-badge {
  margin: 0 0 calc(5 * var(--sp-u));
}

.about__campaign-round {
  display: block;
  width: 100%;
  max-width: calc(229 * var(--sp-u));
  height: auto;
  margin-inline: auto;
}

.about__campaign-lead {
  margin: 0 0 calc(2 * var(--sp-u));
  font-family: var(--font-family-yasashisa);
  font-size: clamp(1rem, calc(16 * var(--sp-u)), calc(41.969 * var(--sp-u)));
  font-weight: 700;
  color: var(--color-accent-red);
  line-height: 1.5;
  -webkit-text-stroke: var(--text-stroke-white-sm) var(--text-stroke-white-color);
  paint-order: stroke fill;
  text-shadow: var(--text-stroke-outline-fallback);
}

.about .button--layered.button--cta {
  margin-top: 0;
}

.about.about--animate {
  --about-scroll-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --about-scroll-duration: 800ms;
  --about-scroll-offset-y: calc(20 * var(--sp-u));
  --about-scroll-offset-y-lg: calc(28 * var(--sp-u));
}

.about.about--animate [data-scroll-appear] {
  transition-property: opacity, translate, scale, rotate;
  transition-duration: var(--scroll-duration, var(--about-scroll-duration));
  transition-delay: var(--scroll-delay, 0ms);
  transition-timing-function: var(--about-scroll-ease);
}

.about.about--animate:not(.is-inview) [data-scroll-appear] {
  opacity: 0;
}

.about.about--animate.is-inview [data-scroll-appear] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  rotate: 0deg;
}

.about.about--animate:not(.is-inview) [data-scroll-appear="depth-in"] {
  scale: 0.6;
  translate: 0 var(--about-scroll-offset-y);
  transform-origin: center bottom;
}

.about__highlight-anim {
  display: inline-block;
  vertical-align: baseline;
}

.about.about--animate:not(.is-inview) [data-scroll-appear="slide-down-in"] {
  translate: 0 calc(-1 * var(--about-scroll-offset-y-lg));
}

.about.about--animate:not(.is-inview) [data-scroll-appear="slide-up-in"] {
  translate: 0 var(--about-scroll-offset-y-lg);
}

.about.about--animate:not(.is-inview) [data-scroll-appear="rotate-in-front"] {
  rotate: 8deg;
  scale: 1.14;
  transform-origin: center bottom;
}

.about.about--animate:not(.is-inview) [data-scroll-appear="rotate-in-left"] {
  rotate: -12deg;
  scale: 0.85;
  transform-origin: top left;
}

.about.about--animate:not(.is-inview) [data-scroll-appear="rotate-in-right"] {
  rotate: 10deg;
  scale: 0.85;
  transform-origin: top right;
}

.about.about--animate:not(.is-inview) [data-scroll-appear="rotate-in-badge"] {
  rotate: 10deg;
  scale: 1.12;
  transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
  .about.about--animate:not(.is-inview) [data-scroll-appear],
  .about.about--animate.is-inview [data-scroll-appear] {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
    transition: none;
  }

  .about__highlight-anim {
    display: inline;
  }
}


/* assets/css/top/sections/mission.css */
.mission {
  --mission-paper-grid-tile-size: 29px;
  --mission-paper-grid-line-width: var(--paper-grid-line-width);
  --mission-paper-grid-line-color: var(--paper-grid-line-color);
  --mission-deco-flow-duration: 40s;
  --mission-anchor-scroll-offset: calc(120 * var(--sp-u));

  margin-top: calc(-40 * var(--sp-u));
  background-color: #fff;
  background-image:
    linear-gradient(var(--mission-paper-grid-line-color) var(--mission-paper-grid-line-width), transparent var(--mission-paper-grid-line-width)),
    linear-gradient(90deg, var(--mission-paper-grid-line-color) var(--mission-paper-grid-line-width), transparent var(--mission-paper-grid-line-width));
  background-size: var(--mission-paper-grid-tile-size) var(--mission-paper-grid-tile-size);
  background-position: 19% 19%;
  padding-top: calc(89 * var(--sp-u));
  padding-bottom: calc(30 * var(--sp-u));
}

.mission__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(18 * var(--sp-u));
  padding-block: 0 calc(85 * var(--sp-u));
}

.mission__scroll-anchor {
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

.mission__top-deco {
  width: 100%;
  height: calc(65 * var(--sp-u));
  overflow: hidden;
  margin-bottom: calc(58 * var(--sp-u));
}

.mission__deco-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: mission-deco-flow var(--mission-deco-flow-duration) linear infinite;
  will-change: transform;
}

.mission__deco-track--top {
  margin-left: calc(-78 * var(--sp-u));
}

.mission__deco-track--bottom {
  margin-left: calc(-65 * var(--sp-u));
}

.mission__top-deco-image,
.mission__bottom-deco-image {
  display: block;
  flex-shrink: 0;
  width: calc(757 * var(--sp-u));
  max-width: none;
  height: calc(65 * var(--sp-u));
}

.mission__top-deco-image {
  object-fit: cover;
  object-position: left top;
}

.mission__bottom-deco-image {
  min-width: calc(757 * var(--sp-u));
}

.mission__bottom-deco {
  width: 100%;
  height: calc(65 * var(--sp-u));
  overflow: hidden;
  margin-top: 0;
}

@keyframes mission-deco-flow {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission__deco-track {
    animation: none;
  }

  .mission__deco-track > :not(:first-child) {
    display: none;
  }
}

.mission__intro-header {
  width: 100%;
  max-width: calc(332 * var(--sp-u));
  margin-inline: auto;
  text-align: center;
  margin-bottom: calc(31 * var(--sp-u));
}

.mission__intro-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: calc(18 * var(--sp-u));
}

.mission__heading {
  margin: 0 0 calc(42 * var(--sp-u));
  line-height: 0;
}

.mission__catch.text-marker {
  --text-marker-underline-offset: calc(5 * var(--sp-u));
}

.mission__title {
  display: inline-block;
  width: calc(255 * var(--sp-u));
  height: calc(27 * var(--sp-u));
}

.mission__catch {
  margin: 0;
  font-family: var(--font-family-yasashisa);
  font-size: calc(20 * var(--sp-u));
  font-weight: 700;
  line-height: calc(30 / 20);
  color: var(--color-navy);
}

.mission__intro {
  width: 85%;
  max-width: calc(332 * var(--sp-u));
  margin-inline: auto;
  text-align: center;
  margin-bottom: calc(80 * var(--sp-u));
}

.mission__image-placeholder {
  width: 100%;
  margin: 0 auto;
}

.mission__image-media {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.mission__image-photo {
  display: block;
  width: 100%;
  height: auto;
}

.mission__image-deco {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% * 780 / 581);
  pointer-events: none;
  transform: translateX(-50%);
}

.mission__image-deco-inner {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
}

.mission__intro-body {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--sp-u));
  width: 100%;
  max-width: calc(330 * var(--sp-u));
  margin: calc(28 * var(--sp-u)) auto calc(31 * var(--sp-u));
  font-size: calc(16 * var(--sp-u));
  font-weight: 700;
  line-height: calc(24 / 16);
  color: var(--color-navy);
}

.mission__intro-body p {
  margin: 0;
}

.mission__cta {
  margin-inline: auto;
}

.mission__card {
  position: relative;
  width: 100%;
  margin-bottom: var(--space-md);
}

.mission__card-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mission__card-lead {
  font-family: var(--font-family-base);
}

.mission__slider {
  margin-top: var(--space-sm);
}

.mission__slider-viewport {
  overflow: hidden;
  touch-action: pan-y;
  transition: height var(--transition-base);
}

.mission__slider-track {
  display: flex;
  align-items: flex-start;
  transition: transform var(--transition-base);
}

.mission__slide {
  min-width: 100%;
}

.mission__slider-controls {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.mission__slider-pagination {
  display: flex;
  justify-content: center;
  gap: calc(5 * var(--sp-u));
  margin: calc(15 * var(--sp-u)) auto 0;
  padding: 0;
}

.mission__slider-dot {
  width: calc(11 * var(--sp-u));
  height: calc(11 * var(--sp-u));
  padding: 0;
  background-color: #83d6ff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.mission__slider-dot.is-active {
  background-color: #219df9;
}

html.using-keyboard .mission__slider-dot:focus-visible {
  outline: calc(2 * var(--sp-u)) solid #212e79;
  outline-offset: calc(2 * var(--sp-u));
}

.mission__card--dish .mission__slider-pagination .mission__slider-dot {
  background-color: #00b4a9;
}

.mission__card--dish .mission__slider-pagination .mission__slider-dot.is-active {
  background-color: #007c88;
}

.mission__card-wrap {
  position: relative;
  width: 100%;
}

.mission__card-wrap--laundry {
  z-index: 0;
  margin-top: calc(4 * var(--sp-u));
  margin-bottom: calc(48 * var(--sp-u));
}

.mission__card--laundry {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  padding: calc(52 * var(--sp-u)) calc(16 * var(--sp-u)) calc(56 * var(--sp-u));
  background-color: #fffdd2;
  border: calc(3 * var(--sp-u)) solid #2b4192;
  border-radius: calc(8 * var(--sp-u));
}

#mission-heading,
#mission-laundry-heading,
#mission-dish-heading,
#mission-camera-heading {
  scroll-margin-top: var(--mission-anchor-scroll-offset);
}

.mission__card-title--laundry {
  margin-bottom: calc(29 * var(--sp-u));
  font-family: var(--font-family-yasashisa);
  font-size: calc(22 * var(--sp-u));
  font-weight: 700;
  line-height: 1.35;
  color: #21358c;
  text-align: center;
  white-space: nowrap;
}

.mission__card-lead--laundry {
  margin: 0 0 calc(24 * var(--sp-u));
  font-size: calc(16 * var(--sp-u));
  font-weight: 700;
  line-height: 1.5;
  color: #213579;
  text-align: center;
}

.mission__card-lead--laundry:last-of-type {
  margin-bottom: calc(40 * var(--sp-u));
}

.mission__card-deco {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.mission__card-deco img {
  display: block;
  width: 100%;
  height: auto;
}

.mission__card-deco--clip-left-back {
  top: calc(-46 * var(--sp-u));
  left: calc(22 * var(--sp-u));
  z-index: 1;
  width: calc(42 * var(--sp-u));
}

.mission__card-deco--clip-left-front {
  top: calc(-50 * var(--sp-u));
  left: calc(30 * var(--sp-u));
  width: calc(36 * var(--sp-u));
}

.mission__card-deco--clip-right-back {
  top: calc(-48 * var(--sp-u));
  right: calc(5 * var(--sp-u));
  z-index: 1;
  width: calc(42 * var(--sp-u));
}

.mission__card-deco--clip-right-front {
  top: calc(-50 * var(--sp-u));
  right: calc(13 * var(--sp-u));
  width: calc(36 * var(--sp-u));
}

.mission__card-wrap--dish .mission__card-deco--cloud-01 {
  top: calc(-51 * var(--sp-u));
  left: calc(274 * var(--sp-u));
  width: calc(119 * var(--sp-u));
}

.mission__card-wrap--dish .mission__card-deco--cloud-02 {
  top: calc(110 * var(--sp-u));
  left: calc(-41 * var(--sp-u));
  width: calc(65 * var(--sp-u));
}

.mission__card-wrap--dish .mission__card-deco--cloud-03 {
  top: calc(148 * var(--sp-u));
  left: calc(318 * var(--sp-u));
  width: calc(56 * var(--sp-u));
}

.mission__card-wrap--dish .mission__card-deco--cloud-04 {
  bottom: calc(252 * var(--sp-u));
  right: calc(-33 * var(--sp-u));
  width: calc(56 * var(--sp-u));
}

.mission__card-wrap--dish .mission__card-deco--cloud-06 {
  bottom: calc(158 * var(--sp-u));
  left: calc(-49 * var(--sp-u));
  width: calc(87 * var(--sp-u));
}

.mission__slider--laundry {
  --icon-button-bg: #c9f3f4;
  --icon-button-bg-hover: var(--icon-button-bg);
  position: relative;
  margin-top: 0;
}

.mission__slider--laundry .mission__slider-controls {
  position: absolute;
  inset: 0;
  margin-top: 0;
  pointer-events: none;
}

.mission__slider--laundry .mission__slider-viewport {
  overflow: hidden;
}

.mission__slide--laundry.card__item,
.mission__slide--dish.card__item {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  padding: calc(25 * var(--sp-u)) calc(27 * var(--sp-u)) calc(49 * var(--sp-u));
  text-align: left;
  border-radius: calc(10.34 * var(--sp-u));
}

.mission__slide--laundry.card__item {
  background-color: #fff;
  border: calc(3 * var(--sp-u)) solid #83d6ff;
}

.mission__slide-title {
  margin: 0 0 calc(13 * var(--sp-u));
  text-align: center;
}

.mission__slide-title img {
  display: block;
  width: auto;
  height: calc(33 * var(--sp-u));
  max-width: 100%;
  margin: 0 auto;
}

.mission__slide-deco {
  position: absolute;
  pointer-events: none;
  transform-origin: center center;
}

.mission__slide-deco-inner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
}

.mission__slide--laundry .mission__slide-deco {
  transform: scale(1.2);
}

.mission__slide--laundry-01 .mission__slide-deco {
  left: 0%;
  top: -4%;
  width: 96%;
  height: 80%;
  transform: scale(1.2) translate(2%, 6%);
}

.mission__slide--laundry-02 .mission__slide-deco {
  left: -1%;
  top: -2%;
  width: 100%;
  height: 84%;
  transform: scale(1.1) translate(1%, 2%);
}

.mission__slide--laundry-03 .mission__slide-deco {
  left: 2%;
  top: 17%;
  width: 102%;
  height: 60%;
  transform: scale(1.2) translate(-1%, 2%);
}

.mission__slide--laundry-04 .mission__slide-deco {
  left: -1%;
  top: -2.6%;
  width: 98%;
  height: 74%;
  transform: scale(1.2);
}

.mission__slide--dish-01 .mission__slide-deco {
  left: 2%;
  top: 12.5%;
  width: 98%;
  height: 72%;
  transform: scale(1.15);
}

.mission__slide--dish-02 .mission__slide-deco {
  left: -1.1%;
  top: 20%;
  width: 100%;
  transform: scale(1.13);
}

.mission__slide--dish-03 .mission__slide-deco {
  left: 0%;
  top: 9%;
  width: 100%;
  height: 64%;
  transform: scale(1.06);
}

.mission__slide--dish-04 .mission__slide-deco {
  left: -0.3%;
  top: 2%;
  width: 100%;
  height: 78%;
  transform: scale(1.13);
}

.mission__slider--animate {
  --mission-slide-deco-duration: 0.6s;
}

.mission__slider--animate .mission__slide-deco-inner {
  opacity: 0;
}

.mission__slider--animate .mission__slide:not(.is-deco-active) .mission__slide-deco-inner {
  transform: scale3d(0.78, 0.78, 1);
}

.mission__slider--animate .mission__slide.is-deco-active .mission__slide-deco-inner {
  animation: mission-slide-deco-in var(--mission-slide-deco-duration) ease-out both;
}

@keyframes mission-slide-deco-in {
  0% {
    opacity: 0;
    transform: scale3d(0.78, 0.78, 1);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.mission__slide-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: calc(21 * var(--sp-u));
  margin: 0 auto calc(10 * var(--sp-u));
  padding: calc(3 * var(--sp-u)) calc(10 * var(--sp-u));
  font-size: calc(11.47 * var(--sp-u));
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background-color: #219df9;
  border: calc(1.64 * var(--sp-u)) solid #212e79;
  border-radius: calc(999 * var(--sp-u));
}

.mission__slide-tag--dish {
  background-color: #ff6470;
  border-color: #212e79;
}

.mission__slide-media {
  position: relative;
  width: calc(249 * var(--sp-u));
  max-width: 100%;
  margin-inline: auto;
  padding: calc(27 * var(--sp-u)) 0 calc(32 * var(--sp-u));
  overflow: visible;
}

.mission__slide-image {
  display: block;
  width: 100%;
  height: auto;
}

.mission__slide-text {
  margin: 0 0 calc(14 * var(--sp-u));
  font-size: calc(14 * var(--sp-u));
  font-weight: 700;
  line-height: 1.6;
  color: #21358c;
}

.mission__slide-text:last-child {
  margin-bottom: 0;
}

.mission__slide-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(200 * var(--sp-u));
  margin: 0 auto calc(20 * var(--sp-u));
  font-size: calc(14 * var(--sp-u));
  font-weight: 700;
  color: #262626;
  background-color: #ccc;
}

.mission__slider-arrow {
  position: absolute;
  top: var(--mission-slider-arrow-top, 50%);
  transform: translateY(-50%);
  pointer-events: auto;
}

.mission__slider-arrow img {
  width: calc(12 * var(--sp-u));
  height: calc(20 * var(--sp-u));
}

.mission__slider-arrow--prev {
  left: calc(-13 * var(--sp-u));
}

.mission__slider-arrow--next {
  right: calc(-13 * var(--sp-u));
}


.mission__slider-arrow--next img {
  transform: rotate(180deg);
}

.mission__laundry-product {
  margin-top: calc(42 * var(--sp-u));
  text-align: center;
}

.mission__laundry-round-text {
  display: block;
  width: calc(190 * var(--sp-u));
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}

.mission__laundry-logo {
  display: block;
  width: calc(86 * var(--sp-u));
  margin: calc(-45 * var(--sp-u)) auto calc(20 * var(--sp-u));
}


.mission__laundry-check {
  margin: 0 0 calc(10.5 * var(--sp-u));
  font-size: calc(16 * var(--sp-u));
  font-weight: 700;
  line-height: 1.25;
  color: #2499e6;
  -webkit-text-stroke: var(--text-stroke-white-sm) var(--text-stroke-white-color);
  paint-order: stroke fill;
  text-shadow: var(--text-stroke-outline-fallback);
}

.mission__laundry-cta {
  margin-top: 0;
}

.mission__card-wrap--dish {
  z-index: 0;
  margin-top: calc(46 * var(--sp-u));
  margin-bottom: calc(52 * var(--sp-u));
  overflow: visible;
}

.mission__card--dish {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  padding: calc(48 * var(--sp-u)) calc(16 * var(--sp-u)) calc(53 * var(--sp-u));
  background-color: #e2f7ff;
  border: calc(3 * var(--sp-u)) solid #213579;
  border-radius: calc(8 * var(--sp-u));
}

.mission__card-title--dish {
  margin-bottom: calc(33 * var(--sp-u));
  font-family: var(--font-family-yasashisa);
  font-size: calc(22 * var(--sp-u));
  font-weight: 700;
  line-height: 1.35;
  color: #213579;
  text-align: center;
}

.mission__card-lead--dish {
  margin: 0 0 calc(23 * var(--sp-u));
  font-size: calc(16 * var(--sp-u));
  font-weight: 700;
  line-height: 1.5;
  color: #213579;
  text-align: center;
}

.mission__card-lead--dish:last-of-type {
  margin-bottom: calc(42 * var(--sp-u));
}

.mission__slider--dish {
  --icon-button-bg: #96e0dc;
  --icon-button-bg-hover: var(--icon-button-bg);
  position: relative;
  margin-top: 0;
}

.mission__slider--dish .mission__slider-controls {
  position: absolute;
  inset: 0;
  margin-top: 0;
  pointer-events: none;
}

.mission__slide--dish .mission__slide-title {
  margin-bottom: calc(10 * var(--sp-u));
  line-height: 1.5;
}

.mission__slide--dish .mission__slide-image-placeholder {
  max-width: calc(248 * var(--sp-u));
  height: calc(159 * var(--sp-u));
  margin-bottom: calc(21 * var(--sp-u));
}

.mission__slide--dish.card__item {
  background-color: #fff;
  border: calc(3 * var(--sp-u)) solid #40c7be;
  border-radius: calc(10 * var(--sp-u));
}

.mission__slide-tag--dish {
  background-color: #ff6470;
  border-color: #213579;
}

.mission__dish-product {
  margin-top: calc(50 * var(--sp-u));
  text-align: center;
}

.mission__dish-round-text {
  display: block;
  width: calc(196 * var(--sp-u));
  height: calc(62 * var(--sp-u));
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}

.mission__dish-logo {
  display: block;
  width: calc(88 * var(--sp-u));
  max-width: 100%;
  margin: calc(-29 * var(--sp-u)) auto calc(23 * var(--sp-u));
}

.mission__dish-check {
  margin: 0 0 calc(4 * var(--sp-u));
  font-size: calc(16 * var(--sp-u));
  font-weight: 700;
  line-height: 1.25;
  color: #00b4a9;
  -webkit-text-stroke: var(--text-stroke-white-sm) var(--text-stroke-white-color);
  paint-order: stroke fill;
  text-shadow: var(--text-stroke-outline-fallback);
}

.mission__dish-cta {
  margin-top: 0;
}

.mission__camera {
  position: relative;
  width: min(100%, calc(332 * var(--sp-u)));
  margin: calc(40 * var(--sp-u)) auto calc(54 * var(--sp-u));
  padding: 0;
  text-align: center;
  overflow: visible;
}

.mission__camera-decorations {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.mission__camera-deco {
  position: absolute;
}

.mission__camera-deco img {
  display: block;
  width: 100%;
  height: auto;
}

.mission__camera-deco-inner {
  display: block;
  transform-origin: center center;
}

.mission__camera-heading {
  width: min(calc(300 * var(--sp-u)), 100%);
  margin: 0 auto calc(35 * var(--sp-u));
  font-family: var(--font-family-yasashisa);
  font-size: calc(20 * var(--sp-u));
  font-weight: 700;
  line-height: 1.5;
  color: #212e79;
}

.mission__camera-heading.text-marker {
  --text-marker-underline-offset: calc(5 * var(--sp-u));
}

.mission__camera-deco--camera {
  top: calc(-95 * var(--sp-u));
  left: calc(275 * var(--sp-u));
  width: calc(105 * var(--sp-u));
}

.mission__camera-deco--camera .mission__camera-deco-inner {
  transform: rotate(var(--mission-camera-deco-camera-rotate, 0.84deg));
}

.mission__camera-deco--star {
  top: calc(645 * var(--sp-u));
  bottom: auto;
  left: calc(-33 * var(--sp-u));
  width: calc(53 * var(--sp-u));
}

.mission__camera-image-placeholder {
  width: 100%;
  margin: 0 auto calc(28 * var(--sp-u));
}

.mission__camera-image-media {
  position: relative;
  width: 94%;
  margin: 0 auto;
}

.mission__camera-image-photo {
  display: block;
  width: 100%;
  height: auto;
}

.mission__camera-image-deco {
  position: absolute;
  top: 29.04%;
  left: 50%;
  width: 100%;
  pointer-events: none;
  transform: scale(var(--mission-camera-image-deco-scale, 1.3)) translateX(-38%);
}

.mission__camera-image-deco-inner {
  display: block;
  height: auto;
  transform-origin: center center;
}

.mission__camera-text {
  max-width: calc(330 * var(--sp-u));
  margin: 0 auto calc(20 * var(--sp-u));
  font-size: calc(16 * var(--sp-u));
  font-weight: 700;
  line-height: 1.5;
  color: #212e79;
}

.mission__camera-text:last-of-type {
  margin-bottom: calc(35 * var(--sp-u));
}

.mission__camera-cta {
  margin-inline: auto;
}

.mission__camera.mission__camera--animate {
  --mission-camera-deco-duration: 2.5s;
  --mission-camera-deco-enter-distance: calc(72 * var(--sp-u));
  --mission-camera-deco-camera-delay: 0s;
  --mission-camera-deco-star-delay: 0s;
  --mission-camera-deco-camera-rotate: 0.84deg;
  --mission-camera-deco-click-angle: 8deg;
  --mission-camera-image-deco-delay: 0.3s;
  --mission-camera-image-deco-duration: 0.6s;
  --mission-camera-image-deco-scale: 1.3;
}

.mission__camera.mission__camera--animate .mission__camera-deco--camera .mission__camera-deco-inner,
.mission__camera.mission__camera--animate .mission__camera-deco--star .mission__camera-deco-inner,
.mission__camera.mission__camera--animate .mission__camera-image-deco-inner {
  opacity: 0;
}

.mission__camera.mission__camera--animate:not(.is-inview) .mission__camera-deco--camera .mission__camera-deco-inner {
  transform: translateX(var(--mission-camera-deco-enter-distance))
    rotate(var(--mission-camera-deco-camera-rotate));
}

.mission__camera.mission__camera--animate:not(.is-inview) .mission__camera-deco--star .mission__camera-deco-inner {
  transform: translateX(calc(-1 * var(--mission-camera-deco-enter-distance)));
}

.mission__camera.mission__camera--animate.is-inview .mission__camera-deco--camera .mission__camera-deco-inner {
  animation: mission-camera-deco-camera-in var(--mission-camera-deco-duration) linear both;
  animation-delay: var(--mission-camera-deco-camera-delay);
}

.mission__camera.mission__camera--animate.is-inview .mission__camera-deco--star .mission__camera-deco-inner {
  animation: mission-camera-deco-star-in var(--mission-camera-deco-duration) linear both;
  animation-delay: var(--mission-camera-deco-star-delay);
}

.mission__camera.mission__camera--animate:not(.is-inview) .mission__camera-image-deco-inner {
  transform: scale(0.78);
}

.mission__camera.mission__camera--animate.is-inview .mission__camera-image-deco-inner {
  animation: mission-camera-image-deco-in var(--mission-camera-image-deco-duration) linear both;
  animation-delay: var(--mission-camera-image-deco-delay);
}

@keyframes mission-camera-image-deco-in {
  0% {
    opacity: 0;
    transform: scale(0.78);
  }

  12% {
    opacity: 1;
  }

  43% {
    transform: scale(1.2);
  }

  58% {
    transform: scale(0.94);
  }

  72% {
    transform: scale(1.04);
  }

  86% {
    transform: scale(0.99);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mission-camera-deco-camera-in {
  0% {
    opacity: 0;
    transform: translateX(var(--mission-camera-deco-enter-distance))
      rotate(var(--mission-camera-deco-camera-rotate));
  }

  10% {
    opacity: 1;
  }

  14% {
    transform: translateX(0) rotate(var(--mission-camera-deco-camera-rotate));
  }

  14%,
  33.99% {
    transform: translateX(0)
      rotate(calc(var(--mission-camera-deco-camera-rotate) + var(--mission-camera-deco-click-angle)));
  }

  34%,
  53.99% {
    transform: translateX(0)
      rotate(calc(var(--mission-camera-deco-camera-rotate) - var(--mission-camera-deco-click-angle)));
  }

  54%,
  73.99% {
    transform: translateX(0)
      rotate(calc(var(--mission-camera-deco-camera-rotate) + var(--mission-camera-deco-click-angle)));
  }

  74%,
  93.99% {
    transform: translateX(0)
      rotate(calc(var(--mission-camera-deco-camera-rotate) - var(--mission-camera-deco-click-angle)));
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(var(--mission-camera-deco-camera-rotate));
  }
}

@keyframes mission-camera-deco-star-in {
  0% {
    opacity: 0;
    transform: translateX(calc(-1 * var(--mission-camera-deco-enter-distance)));
  }

  10% {
    opacity: 1;
  }

  14% {
    transform: translateX(0) rotate(0deg);
  }

  14%,
  33.99% {
    transform: translateX(0) rotate(var(--mission-camera-deco-click-angle));
  }

  34%,
  53.99% {
    transform: translateX(0) rotate(calc(-1 * var(--mission-camera-deco-click-angle)));
  }

  54%,
  73.99% {
    transform: translateX(0) rotate(var(--mission-camera-deco-click-angle));
  }

  74%,
  93.99% {
    transform: translateX(0) rotate(calc(-1 * var(--mission-camera-deco-click-angle)));
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission__slider--animate .mission__slide:not(.is-deco-active) .mission__slide-deco-inner,
  .mission__slider--animate .mission__slide.is-deco-active .mission__slide-deco-inner {
    opacity: 1;
    animation: none;
    transform: scale(1);
  }

  .mission__camera.mission__camera--animate:not(.is-inview) .mission__camera-deco--camera .mission__camera-deco-inner,
  .mission__camera.mission__camera--animate.is-inview .mission__camera-deco--camera .mission__camera-deco-inner {
    opacity: 1;
    animation: none;
    transform: rotate(var(--mission-camera-deco-camera-rotate));
  }

  .mission__camera.mission__camera--animate:not(.is-inview) .mission__camera-deco--star .mission__camera-deco-inner,
  .mission__camera.mission__camera--animate.is-inview .mission__camera-deco--star .mission__camera-deco-inner {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .mission__camera.mission__camera--animate:not(.is-inview) .mission__camera-image-deco-inner,
  .mission__camera.mission__camera--animate.is-inview .mission__camera-image-deco-inner {
    opacity: 1;
    animation: none;
    transform: scale(1);
  }
}

@media (max-width: 389px) {
  .mission__camera {
    margin-top: calc(72 * var(--sp-u));
  }

  .mission__camera-heading {
    margin-bottom: calc(28 * var(--sp-u));
    font-size: calc(18 * var(--sp-u));
  }

  .mission__camera-text {
    font-size: calc(16 * var(--sp-u));
  }

  .mission__camera-text:last-of-type {
    margin-bottom: calc(28 * var(--sp-u));
  }

  .mission__camera-deco--camera {
    top: calc(-72 * var(--sp-u));
    left: auto;
    right: calc(-20 * var(--sp-u));
    width: calc(88 * var(--sp-u));
  }
}

.mission-intro--animate {
  --mission-intro-scroll-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --mission-intro-scroll-duration: 800ms;
  --mission-intro-scroll-offset-y: calc(20 * var(--sp-u));
  --mission-intro-scroll-offset-y-lg: calc(28 * var(--sp-u));
  --mission-image-deco-delay: 650ms;
  --mission-image-deco-duration: 0.6s;
}

.mission-intro--animate .mission__image-deco-inner {
  opacity: 0;
}

.mission-intro--animate:not(.is-inview) .mission__image-deco-inner {
  transform: scale(0.78);
}

.mission-intro--animate.is-inview .mission__image-deco-inner {
  animation: mission-camera-image-deco-in var(--mission-image-deco-duration) linear both;
  animation-delay: var(--mission-image-deco-delay);
}

.mission-intro--animate [data-scroll-appear] {
  transition-property: opacity, translate, scale, rotate;
  transition-duration: var(--scroll-duration, var(--mission-intro-scroll-duration));
  transition-delay: var(--scroll-delay, 0ms);
  transition-timing-function: var(--mission-intro-scroll-ease);
}

.mission-intro--animate:not(.is-inview) [data-scroll-appear] {
  opacity: 0;
}

.mission-intro--animate.is-inview [data-scroll-appear] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  rotate: 0deg;
}

.mission-intro--animate:not(.is-inview) [data-scroll-appear="depth-in"] {
  scale: 0.6;
  translate: 0 var(--mission-intro-scroll-offset-y);
  transform-origin: center bottom;
}

.mission-intro--animate:not(.is-inview) [data-scroll-appear="slide-down-in"] {
  translate: 0 calc(-1 * var(--mission-intro-scroll-offset-y-lg));
}

.mission-intro--animate:not(.is-inview) [data-scroll-appear="slide-up-in"] {
  translate: 0 var(--mission-intro-scroll-offset-y-lg);
}

.mission-intro--animate:not(.is-inview) [data-scroll-appear="rotate-in-front"] {
  rotate: 8deg;
  scale: 1.14;
  transform-origin: center bottom;
}

@media (prefers-reduced-motion: reduce) {
  .mission-intro--animate:not(.is-inview) [data-scroll-appear],
  .mission-intro--animate.is-inview [data-scroll-appear] {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
    transition: none;
  }

  .mission-intro--animate .mission__image-deco-inner {
    opacity: 1;
    transform: none;
    animation: none;
  }
}


/* assets/css/top/sections/special.css */
.special {
  --special-bg: #fffdd2;
  --special-teal: #00b4a9;
  --special-coral: #ff6470;

  min-height: calc(1145 * var(--sp-u));
  padding-block: calc(56 * var(--sp-u)) calc(67 * var(--sp-u));
  background-color: var(--special-bg);
  color: var(--color-text-primary);
}

.special__inner {
  padding-inline: calc(27 * var(--sp-u));
}

.special__intro {
  text-align: center;
}

.special__heading {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: calc(31 * var(--sp-u));
  margin: 0;
}

.special__heading-image {
  display: block;
  width: calc(167 * var(--sp-u));
  height: auto;
  margin-inline: auto;
  transform: translateY(calc(2 * var(--sp-u)));
}

.special__lead {
  margin: calc(42 * var(--sp-u)) 0 0;
  font-size: calc(16 * var(--sp-u));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

.special__supporter {
  width: calc(335 * var(--sp-u));
  margin: calc(41 * var(--sp-u)) auto 0;
  overflow: hidden;
  border: calc(3 * var(--sp-u)) solid var(--color-text-primary);
  border-radius: calc(10 * var(--sp-u));
  background-color: #fff;
}

.special__supporter-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(49 * var(--sp-u));
  margin: 0;
  padding: calc(8 * var(--sp-u)) calc(16 * var(--sp-u));
  background-color: var(--color-text-primary);
  color: #fff;
  font-family: var(--font-family-yasashisa);
  font-size: calc(22.68 * var(--sp-u));
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
}

.special__supporter-body {
  padding: calc(21 * var(--sp-u)) calc(10 * var(--sp-u)) calc(30 * var(--sp-u));
}

.special__supporter-name {
  margin: 0;
  text-align: center;
  font-size: calc(20 * var(--sp-u));
  font-weight: 700;
  line-height: 1.2;
}

.special__supporter-photo-frame {
  display: block;
  width: calc(276 * var(--sp-u));
  height: calc(277 * var(--sp-u));
  margin: calc(28 * var(--sp-u)) auto 0;
  overflow: hidden;
}

.special__supporter-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.special__profile-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(141 * var(--sp-u));
  min-height: calc(28 * var(--sp-u));
  margin: calc(28 * var(--sp-u)) auto 0;
  border-radius: calc(999 * var(--sp-u));
  background-color: #c8f3f3;
  font-size: calc(16 * var(--sp-u));
  font-weight: 700;
  line-height: 1.5;
}

.special__profile-text {
  width: calc(276 * var(--sp-u));
  margin: calc(14 * var(--sp-u)) auto 0;
  font-size: calc(14 * var(--sp-u));
  font-weight: 700;
  line-height: calc(20 / 14);
  letter-spacing: 0;
}

.special__links {
  display: flex;
  flex-direction: column;
  gap: calc(17 * var(--sp-u));
  width: calc(306 * var(--sp-u));
  margin: calc(19 * var(--sp-u)) auto 0;
  padding: 0;
  list-style: none;
}

.special__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(63 * var(--sp-u));
  padding: calc(8 * var(--sp-u)) calc(46 * var(--sp-u)) calc(7 * var(--sp-u)) calc(20 * var(--sp-u));
  border: calc(2 * var(--sp-u)) solid var(--color-text-primary);
  border-radius: calc(999 * var(--sp-u));
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: filter var(--transition-base);
}

.special__link:hover {
  filter: brightness(0.94);
}

.special__link--enfant {
  background-color: var(--special-teal);
}

.special__link--hugkum {
  background-color: var(--special-coral);
}

.special__link-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--sp-u));
}

.special__link-title {
  font-size: calc(13.83 * var(--sp-u));
  font-weight: 700;
  line-height: calc(20 / 13.83);
  letter-spacing: 0;
  white-space: nowrap;
}

.special__link-media {
  font-size: calc(9 * var(--sp-u));
  font-weight: 400;
  line-height: 1;
}

.special__link-arrow {
  position: absolute;
  right: calc(25 * var(--sp-u));
  display: grid;
  place-items: center;
  width: calc(19 * var(--sp-u));
  height: calc(19 * var(--sp-u));
  border: calc(1.267 * var(--sp-u)) solid var(--color-text-primary);
  border-radius: 50%;
  background-color: #fff;
}

.special__link-arrow::after {
  width: calc(5 * var(--sp-u));
  height: calc(9 * var(--sp-u));
  background-color: var(--color-text-primary);
  content: "";
  mask: url("../../img/top/common/icons/button_arrow.svg") center / contain no-repeat;
  -webkit-mask: url("../../img/top/common/icons/button_arrow.svg") center / contain no-repeat;
}

.special__link--enfant .special__link-arrow::after {
  background-color: var(--special-teal);
}

.special__link--hugkum .special__link-arrow::after {
  background-color: var(--special-coral);
}

.special--animate {
  --special-scroll-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --special-scroll-duration: 800ms;
  --special-scroll-offset-y: calc(20 * var(--sp-u));
  --special-scroll-offset-y-lg: calc(28 * var(--sp-u));
}

.special--animate [data-scroll-appear] {
  transition-property: opacity, translate, scale;
  transition-duration: var(--scroll-duration, var(--special-scroll-duration));
  transition-delay: var(--scroll-delay, 0ms);
  transition-timing-function: var(--special-scroll-ease);
}

.special--animate:not(.is-inview) [data-scroll-appear] {
  opacity: 0;
}

.special--animate.is-inview [data-scroll-appear] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

.special--animate:not(.is-inview) [data-scroll-appear="slide-down-in"] {
  translate: 0 calc(-1 * var(--special-scroll-offset-y-lg));
}

.special--animate:not(.is-inview) [data-scroll-appear="slide-up-in"] {
  translate: 0 var(--special-scroll-offset-y-lg);
}

.special--animate:not(.is-inview) [data-scroll-appear="depth-in"] {
  translate: 0 var(--special-scroll-offset-y);
  scale: 0.94;
  transform-origin: center top;
}

@media (prefers-reduced-motion: reduce) {
  .special__link {
    transition: none;
  }

  .special--animate:not(.is-inview) [data-scroll-appear],
  .special--animate.is-inview [data-scroll-appear] {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition: none;
  }
}


/* assets/css/top/sections/campaign.css */
.campaign {
  background-color: var(--color-campaign);
  padding-block: calc(59 * var(--sp-u)) 0;
}

.campaign__heading {
  margin: 0;
  text-align: center;
}

.campaign__heading-image {
  width: calc(208 * var(--sp-u));
  height: auto;
  margin-inline: auto;
}

.campaign__intro {
  margin-top: calc(42 * var(--sp-u));
  text-align: center;
  color: var(--color-text-primary);
}

.campaign__intro-lead {
  margin: 0;
  font-family: var(--font-family-yasashisa);
  font-size: clamp(1.125rem, calc(18.683 * var(--sp-u)), calc(48.723 * var(--sp-u)));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.campaign__intro-lead-emphasis {
  color: #ff6470;
  white-space: nowrap;
}

.campaign__intro-lead-number {
  display: inline-block;
  font-size: 1.55em;
  line-height: 0;
  vertical-align: -0.04em;
}

.campaign__intro-title {
  margin-top: calc(4 * var(--sp-u));
  font-size: clamp(1.375rem, calc(22 * var(--sp-u)), calc(57.708 * var(--sp-u)));
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.campaign__intro-text {
  margin-top: calc(26 * var(--sp-u));
  font-size: clamp(1rem, calc(16 * var(--sp-u)), calc(41.969 * var(--sp-u)));
  font-weight: 700;
  line-height: 1.6;
}

.campaign__howto {
  width: min(calc(335 * var(--sp-u)), 100%);
  margin-top: calc(42 * var(--sp-u));
  margin-inline: auto;
  border: calc(3 * var(--sp-u)) solid var(--color-text-primary);
  border-radius: calc(10 * var(--sp-u));
  overflow: hidden;
  background-color: #fff;
}

.campaign__howto-heading {
  margin: 0;
  padding: calc(10 * var(--sp-u)) calc(16 * var(--sp-u)) calc(12 * var(--sp-u));
  background-color: var(--color-text-primary);
  color: #fff;
  text-align: center;
  font-family: var(--font-family-yasashisa);
  font-size: clamp(1.4112rem, calc(22.58 * var(--sp-u)), calc(59.229 * var(--sp-u)));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.campaign__howto-body {
  padding: calc(21 * var(--sp-u)) calc(12 * var(--sp-u)) calc(33 * var(--sp-u));
}

.campaign__howto-intro {
  margin: 0;
  text-align: center;
  font-size: clamp(1rem, calc(16 * var(--sp-u)), calc(41.969 * var(--sp-u)));
  font-weight: 700;
  line-height: 1.55;
}

.campaign__steps {
  margin-top: calc(28 * var(--sp-u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--sp-u));
  padding: 0;
  list-style: none;
}

.campaign__step {
  text-align: center;
}

.campaign__step-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: calc(94 * var(--sp-u));
  min-width: calc(94 * var(--sp-u));
  height: calc(28 * var(--sp-u));
  min-height: calc(28 * var(--sp-u));
  margin: 0;
  padding-inline: 0;
  border-radius: calc(999 * var(--sp-u));
  background-color: #fffdd2;
  color: var(--color-text-primary);
  font-size: clamp(1rem, calc(16 * var(--sp-u)), calc(41.969 * var(--sp-u)));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.015em;
}

.campaign__step-text {
  margin-top: calc(14 * var(--sp-u));
  color: var(--color-text-primary);
  font-size: clamp(0.875rem, calc(14 * var(--sp-u)), calc(36.723 * var(--sp-u)));
  font-weight: 700;
  line-height: 1.65;
}

.campaign__step-hashtag {
  --text-marker-underline-thickness: calc(3 * var(--sp-u));
  --text-marker-underline-offset: calc(4 * var(--sp-u));

  display: inline-block;
  font-size: 1.16em;
  white-space: nowrap;
}

.campaign__brand {
  margin-top: calc(20 * var(--sp-u));
}

.campaign__brand + .campaign__brand {
  margin-top: calc(26 * var(--sp-u));
}

.campaign__brand-logo {
  display: block;
  width: calc(84 * var(--sp-u));
  height: auto;
  margin-inline: auto;
}

.campaign__brand-logo--cucute {
  width: calc(76 * var(--sp-u));
  height: auto;
}

.campaign__follow-buttons {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--sp-u));
  width: min(calc(306 * var(--sp-u)), 100%);
  margin-top: calc(14 * var(--sp-u));
  margin-inline: auto;
}

.campaign__follow-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--sp-u));
  width: 100%;
  min-height: calc(59 * var(--sp-u));
  padding: calc(10 * var(--sp-u)) calc(36 * var(--sp-u));
  border-radius: calc(999 * var(--sp-u));
  border: calc(2 * var(--sp-u)) solid var(--color-text-primary);
  color: #fff;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.campaign__follow-button:hover {
  opacity: 0.92;
}

.campaign__follow-button--x {
  background-color: #000;
  --campaign-follow-arrow-color: #212e79;
}

.campaign__follow-button--instagram {
  background: linear-gradient(233deg, #5741dd 0%, #a521bd 28.37%, #ff003d 76.92%, #ffbe35 100%);
  --campaign-follow-arrow-color: #212e79;
}

.campaign__follow-copy {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--sp-u));
  min-width: 0;
}

.campaign__follow-label {
  font-size: clamp(0.875rem, calc(14.826 * var(--sp-u)), calc(38.9 * var(--sp-u)));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.campaign__follow-handle {
  font-size: clamp(0.65625rem, calc(10.826 * var(--sp-u)), calc(28.4 * var(--sp-u)));
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.campaign__follow-arrow {
  position: absolute;
  right: 10%;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(19 * var(--sp-u));
  height: calc(19 * var(--sp-u));
  border-radius: 50%;
  background-color: #fff;
}

.campaign__follow-arrow::after {
  content: "";
  display: block;
  width: calc(5 * var(--sp-u));
  height: calc(9 * var(--sp-u));
  background-color: var(--campaign-follow-arrow-color, #212e79);
  mask-image: url("../../img/top/common/icons/button_arrow.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("../../img/top/common/icons/button_arrow.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.campaign__step-note {
  margin-top: calc(14 * var(--sp-u));
  color: var(--color-text-primary);
  font-size: clamp(0.875rem, calc(14 * var(--sp-u)), calc(36.723 * var(--sp-u)));
  font-weight: 700;
  line-height: 1.7;
}

.campaign__present {
  margin-top: var(--space-lg);
  margin-bottom: calc(48 * var(--sp-u));
  display: flex;
  flex-direction: column;
  gap: calc(33 * var(--sp-u));
}

@media (max-width: 1439px) {
  .campaign__present {
    padding-bottom: 0;
  }
}

.campaign__present-panel {
  border: calc(3 * var(--sp-u)) solid var(--color-text-primary);
  border-radius: calc(12 * var(--sp-u));
  overflow: hidden;
  background-color: #fff;
}

.campaign__present-panel--prize {
  --campaign-present-u: var(--sp-u);
  width: min(calc(335 * var(--campaign-present-u)), 100%);
  max-width: 100%;
  margin-inline: auto;
  border-width: calc(3 * var(--campaign-present-u));
}

.campaign__present-panel-heading {
  margin: 0;
  padding: calc(14 * var(--sp-u)) calc(12 * var(--sp-u)) calc(12 * var(--sp-u));
  background-color: var(--color-text-primary);
  color: #fff;
  text-align: center;
  font-family: var(--font-family-yasashisa);
  font-size: clamp(1.4112rem, calc(22.58 * var(--sp-u)), calc(59.229 * var(--sp-u)));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.campaign__present-panel-body {
  padding: calc(18 * var(--sp-u)) calc(20 * var(--sp-u));
}

.campaign__present-panel-body--empty {
  min-height: calc(88 * var(--sp-u));
}

.campaign__present-panel-body--prize {
  --campaign-present-accent: #ff6470;
  --campaign-present-label-bg: #fffbb4;
  padding: calc(21 * var(--campaign-present-u)) calc(12 * var(--campaign-present-u)) calc(34 * var(--campaign-present-u));
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-weight: 400;
}

.campaign__present-lead {
  margin: 0 auto calc(35 * var(--campaign-present-u));
  text-align: center;
  font-size: calc(15 * var(--campaign-present-u));
  font-weight: 700;
  line-height: 1.82;
  letter-spacing: calc(0.2 * var(--campaign-present-u));
}

.campaign__present-emphasis {
  color: var(--campaign-present-accent);
  white-space: nowrap;
}

.campaign__present-number {
  font-family: "Jost", sans-serif;
  font-size: 1.74em;
  font-weight: 600;
  line-height: 0;
  letter-spacing: calc(0.65 * var(--campaign-present-u));
}

.campaign__present-label {
  width: calc(157 * var(--campaign-present-u));
  margin: 0 auto calc(22 * var(--campaign-present-u));
  padding: calc(5 * var(--campaign-present-u)) calc(10 * var(--campaign-present-u)) calc(4 * var(--campaign-present-u));
  border-radius: 999px;
  background-color: var(--campaign-present-label-bg);
  text-align: center;
  font-size: calc(16 * var(--campaign-present-u));
  font-weight: 700;
  line-height: 1.15;
}

.campaign__present-prize {
  margin: 0;
}

.campaign__present-prize-heading {
  margin: 0 0 calc(7 * var(--campaign-present-u));
  text-align: center;
  font-size: calc(16.94 * var(--campaign-present-u));
  font-weight: 700;
  line-height: 1.35;
}

.campaign__present-prize-heading sup {
  font-size: 0.58em;
  line-height: 0;
  vertical-align: super;
}

.campaign__present-apron-image,
.campaign__present-products-image,
.campaign__present-photo {
  display: block;
  height: auto;
}

.campaign__present-apron-image {
  width: calc(307 * var(--campaign-present-u));
  max-width: 100%;
  margin-inline: auto;
}

.campaign__present-products-image {
  width: calc(246 * var(--campaign-present-u));
  max-width: 82%;
  margin: calc(13 * var(--campaign-present-u)) auto calc(10 * var(--campaign-present-u));
}

.campaign__present-note {
  margin: calc(5 * var(--campaign-present-u)) 0 0;
  font-family: var(--font-family-base);
  font-size: calc(10 * var(--campaign-present-u));
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}

.campaign__present-plus {
  margin: calc(13 * var(--campaign-present-u)) 0 calc(22 * var(--campaign-present-u));
  text-align: center;
  font-family: var(--font-family-base);
  font-size: calc(44 * var(--campaign-present-u));
  font-weight: 600;
  line-height: 0.8;
}

.campaign__present-set {
  box-sizing: border-box;
  width: calc(306 * var(--campaign-present-u));
  max-width: 100%;
  margin-top: calc(10 * var(--campaign-present-u));
  margin-inline: auto;
  padding: calc(14 * var(--campaign-present-u)) calc(13 * var(--campaign-present-u));
  border: 1px solid #c5dbff;
  font-family: var(--font-family-base);
  font-size: calc(13 * var(--campaign-present-u));
  font-weight: 500;
  line-height: 1.4;
}

.campaign__present-set-title {
  margin: 0 0 calc(2 * var(--campaign-present-u));
}

.campaign__present-set-list {
  margin: 0;
  padding-left: calc(19 * var(--campaign-present-u));
  list-style: disc;
}

.campaign__present-special {
  margin-top: calc(32 * var(--campaign-present-u));
  text-align: center;
}

.campaign__present-special-badge {
  width: calc(214 * var(--campaign-present-u));
  margin: 0 auto calc(17 * var(--campaign-present-u));
  padding: calc(7 * var(--campaign-present-u)) calc(10 * var(--campaign-present-u)) calc(5 * var(--campaign-present-u));
  border-radius: 999px;
  background-color: var(--campaign-present-accent);
  color: var(--color-white);
  font-size: calc(16 * var(--campaign-present-u));
  font-weight: 700;
  line-height: 1.15;
}

.campaign__present-special-copy {
  margin: 0 0 calc(12 * var(--campaign-present-u));
  font-size: calc(16.94 * var(--campaign-present-u));
  font-weight: 700;
  line-height: 1.82;
  letter-spacing: calc(0.15 * var(--campaign-present-u));
}


.campaign__present-special-title {
  margin: 0 0 calc(7 * var(--campaign-present-u));
  font-size: calc(16 * var(--campaign-present-u));
  font-weight: 700;
  line-height: 1.35;
}

.campaign__present-photo {
  width: calc(306 * var(--campaign-present-u));
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}

.campaign__present-date {
  margin: 0;
}

.campaign__present-date-image {
  display: block;
  width: min(88%, calc(320 * var(--sp-u)));
  height: auto;
  margin-inline: auto;
}

.campaign__links {
  margin-top: calc(26 * var(--sp-u));
  display: flex;
  flex-direction: column;
  gap: calc(46 * var(--sp-u));
  padding-bottom: 0;
}

.campaign__entry-button {
  margin-inline: auto;
}

.campaign__banners {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--sp-u));
}

.campaign__banner-item {
  margin: 0;
}

.campaign__banner-link {
  display: block;
  text-decoration: none;
}

.campaign__banner-link:hover {
  filter: brightness(0.98);
}

.campaign__banner-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Campaign tail — Figma 56:23102 / fotter */
.campaign__tail {
  position: relative;
  height: calc(134 * var(--sp-u));
  margin-top: calc(42 * var(--sp-u));
  background-color: var(--color-campaign);
}

.campaign__tail-gradation {
  position: absolute;
  top: calc(14 * var(--sp-u));
  left: 0;
  right: 0;
  height: calc(120 * var(--sp-u));
  background:
    url("../../img/top/common/decorations/footer_gradation.webp") center bottom / 100% 100% no-repeat,
    var(--color-campaign);
  pointer-events: none;
}

.campaign__tail-icons {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.campaign__tail-icon {
  position: absolute;
  margin: 0;
}

.campaign__tail-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.campaign__tail-icon--sponge {
  top: calc(9 * var(--sp-u));
  left: calc(-3 * var(--sp-u));
  width: calc(70 * var(--sp-u));
}

.campaign__tail-icon--bowl {
  top: calc(49 * var(--sp-u));
  left: calc(104 * var(--sp-u));
  width: calc(90 * var(--sp-u));
}

.campaign__tail-icon--hanger {
  top: calc(1 * var(--sp-u));
  left: calc(223 * var(--sp-u));
  width: calc(86 * var(--sp-u));
}

.campaign__tail-icon--clothespin {
  top: calc(47 * var(--sp-u));
  right: calc(1 * var(--sp-u));
  width: calc(56 * var(--sp-u));
  transform: rotate(-15deg);
}

.campaign-scroll--animate {
  --campaign-scroll-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --campaign-scroll-duration: 800ms;
  --campaign-scroll-offset-y: calc(20 * var(--sp-u));
  --campaign-scroll-offset-y-lg: calc(28 * var(--sp-u));
}

.campaign-scroll--animate [data-scroll-appear] {
  transition-property: opacity, translate, scale, rotate;
  transition-duration: var(--scroll-duration, var(--campaign-scroll-duration));
  transition-delay: var(--scroll-delay, 0ms);
  transition-timing-function: var(--campaign-scroll-ease);
}

.campaign-scroll--animate:not(.is-inview) [data-scroll-appear] {
  opacity: 0;
}

.campaign-scroll--animate.is-inview [data-scroll-appear] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  rotate: 0deg;
}

.campaign-scroll--animate:not(.is-inview) [data-scroll-appear="depth-in"] {
  scale: 0.6;
  translate: 0 var(--campaign-scroll-offset-y);
  transform-origin: center bottom;
}

.campaign-scroll--animate:not(.is-inview) [data-scroll-appear="slide-down-in"] {
  translate: 0 calc(-1 * var(--campaign-scroll-offset-y-lg));
}

.campaign-scroll--animate:not(.is-inview) [data-scroll-appear="slide-up-in"] {
  translate: 0 var(--campaign-scroll-offset-y-lg);
}

.campaign-scroll--animate:not(.is-inview) [data-scroll-appear="rotate-in-front"] {
  rotate: 8deg;
  scale: 1.14;
  transform-origin: center bottom;
}

.campaign-scroll--animate .campaign__step-number[data-scroll-appear="depth-in"] {
  display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
  .campaign-scroll--animate:not(.is-inview) [data-scroll-appear],
  .campaign-scroll--animate.is-inview [data-scroll-appear] {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
    transition: none;
  }
}


/* assets/css/top/sections/footer.css */
.footer {
  position: relative;
  background-color: var(--color-white);
  color: var(--color-text-primary);
}

.footer__bottom {
  position: relative;
  z-index: 1;
  padding: calc(14 * var(--sp-u)) calc(16 * var(--sp-u)) calc(18 * var(--sp-u));
  background-color: var(--color-white);
}

.footer__inner {
  text-align: center;
}

.footer__logo-link {
  display: block;
  width: fit-content;
  margin: 0 auto calc(6 * var(--sp-u));
}

.footer__logo {
  display: block;
  width: calc(70 * var(--sp-u));
  height: auto;
  margin: 0;
}

.footer__copyright {
  margin: 0;
  font-size: clamp(0.625rem, calc(10 * var(--sp-u)), calc(26.231 * var(--sp-u)));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
}

.footer__copyright small {
  font-size: inherit;
}


/* assets/css/top/foundation/safari-compositing.css */
/**
 * Safari compositing layer stabilization (SP jitter fix).
 * See documents/composer-prompts/safari-animation-jitter-investigation.md
 */

.kv__menu,
.kv__menu-toggle,
.kv__menu-icon-wrap,
.kv__menu-icon {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (max-width: 1023px) {
  .kv__menu {
    isolation: isolate;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }
}

.kv.kv--animate.is-ready .kv__deco--hanger,
.kv.kv--animate.is-ready .kv__deco--clothespin,
.kv.kv--animate.is-ready .kv__deco--chopstick,
.kv.kv--animate.is-ready .kv__deco--bowl,
.kv.kv--animate.is-ready .kv__deco--sponge,
.kv.kv--animate.is-ready .kv__character {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.mission__deco-track,
.mission__slider-track,
.mission__slide-deco,
.mission__slide-deco-inner {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.floating-menu {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.mission__deco-track,
.mission__slider-track,
.mission__slide-deco-inner {
  will-change: transform;
}

.site-pc-logo__main-part--ring-text-raster,
.kv__brand-logo__part--ring-text-raster {
  display: none;
}

html.is-safari .site-pc-logo__main-part--ring-text-svg,
html.is-safari .kv__brand-logo__part--ring-text-svg {
  display: none;
}

html.is-safari .site-pc-logo__main-part--ring-text-raster,
html.is-safari .kv__brand-logo__part--ring-text-raster {
  display: block;
}

html.is-safari .kv__brand-logo__part--ring-text {
  height: auto;
  object-fit: contain;
  object-position: top left;
}

html.is-safari .kv__brand-logo__part--ring-text-raster {
  top: calc(36.159 * var(--sp-u) - 0.5px);
}

@supports (-webkit-touch-callout: none) {
  @media (min-width: 1024px) {
    .site-pc-logo__main-stage {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .site-pc-logo__main-part--ring-text-svg,
    .site-pc-logo__main-part--ring-text-raster {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
  }

  @media (max-width: 1023px) {
    .kv__menu {
      top: 8px;
    }
  }
}