:root {
  color-scheme: light;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #35154f;
  background: #f9e4f3;
  --purple: #4d176f;
  --deep-purple: #2c155a;
  --pink: #ed298d;
  --orange: #f36d22;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-width: 0;
  background-color: #d7edf7;
  background-image: linear-gradient(160deg,
      #d7edf7 0%,
      #d7edf7 14%,
      #eedced 27%,
      #f8d6e7 41%,
      #e7e3f1 55%,
      #ffd3aa 68%,
      #d7edf7 80%,
      #f8d6e7 91%,
      #e6e3f2 100%);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.campaign {
  width: min(100%, 750px);
  margin-inline: auto;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 0 36px #3e12572b;
  container-type: inline-size;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  color: #fff;
  background: var(--deep-purple);
  border-radius: 999px;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: none;
}

/* Main visual assembled from independent Figma exports. */
.hero {
  position: relative;
  width: min(100%, 750px);
  margin-inline: auto;
  aspect-ratio: 750 / 1174;
  overflow: hidden;
  isolation: isolate;
  /* background: #b152bb; */
}

.hero-bg {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-friends {
  position: absolute;
  display: block;
  z-index: 2;
  top: 11.2%;
  left: 2.8%;
  width: 94.4%;
  height: auto;
  filter: drop-shadow(0 1.2cqw 1cqw #45155952);
}

.hero-friends img {
  width: 100%;
  height: auto;
  /* Match the overlay's bounds so every character outline stays aligned. */
  transform: none;
}

.hero h1 {
  position: absolute;
  z-index: 3;
  top: 53.1%;
  left: -2.6%;
  width: 107.4%;
  margin: 0;
  filter: drop-shadow(0 1cqw .8cqw #45155970);
}

.hero h1 img {
  width: 95%;
  height: auto;
  margin: 0 auto;
}

.hero h1 .hero-title-pc {
  display: none;
}

.hero-name-labels {
  position: absolute;
  top: 0;
  left: 2.5%;
  width: 95%;
  height: 100%;
  pointer-events: none;
}

.hero h1 .hero-name-labels img {
  position: absolute;
  top: 24%;
  width: 10.5%;
  height: auto;
  margin: 0;
  filter: none;
}

.hero h1 .hero-kozi-name {
  left: 26%;
}

.hero h1 .hero-mako-name {
  left: 63%;
}

@media (max-width: 750px) {
  .hero h1 .hero-name-labels img {
    transform: scale(1.8);
    transform-origin: center;
  }
}

@media (min-width: 751px) {
  .hero-name-labels {
    top: 48%;
    left: 19%;
    width: 60.3%;
    height: auto;
    aspect-ratio: 2352 / 1523;
  }

  .hero h1 .hero-name-labels img {
    top: 26%;
  }

  .hero h1 .hero-kozi-name {
    left: 27%;
  }

  .hero h1 .hero-mako-name {
    left: 69%;
  }
}

.hero-period {
  position: absolute;
  z-index: 5;
  left: 4%;
  bottom: 3.2%;
  width: 92%;
  margin: 0;
  padding: 1.65cqw 3cqw 1.55cqw;
  border: .55cqw solid #fff;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #352069, #21114c);
  box-shadow: 0 .8cqw 0 #e5c0ef, 0 1.2cqw 2cqw #36134f55;
  text-align: center;
  font-size: clamp(13px, 3.25cqw, 25px);
  font-weight: 900;
}

.hero-period span {
  display: inline-block;
  margin-right: 1.2cqw;
  padding: .25em .72em;
  color: #2a165c;
  background: #fff;
  border-radius: 999px;
  font-size: .72em;
}

.hero-sparkles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.hero-sparkles i {
  position: absolute;
  width: 2.7cqw;
  aspect-ratio: 1;
  background: #fff;
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
  opacity: .35;
  filter: drop-shadow(0 0 1.2cqw #fff);
}

.hero-sparkles i:nth-child(1) {
  left: 13%;
  top: 20%;
}

.hero-sparkles i:nth-child(2) {
  left: 83%;
  top: 25%;
}

.hero-sparkles i:nth-child(3) {
  left: 30%;
  top: 59%;
}

.hero-sparkles i:nth-child(4) {
  left: 75%;
  top: 58%;
}

.hero-sparkles i:nth-child(5) {
  left: 50%;
  top: 7%;
}

.section {
  position: relative;
  padding: 6.5cqw 3.6cqw;
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background: radial-gradient(circle at 12% 8%, #ffdc28 0 1.1cqw, transparent 1.2cqw), radial-gradient(circle at 91% 4%, #ef85c8 0 1.3cqw, transparent 1.4cqw), radial-gradient(circle at 4% 65%, #8fd8ee 0 1cqw, transparent 1.1cqw), radial-gradient(circle at 95% 73%, #ff9b51 0 1.2cqw, transparent 1.3cqw);
}

.movie {
  padding-top: 4.5cqw;
  background: transparent;
}

.movie::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .4;
  background: none;
  mix-blend-mode: multiply;
  pointer-events: none;
}

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

.ribbon-title {
  position: relative;
  z-index: 2;
  width: 86%;
  margin: 0 auto 3cqw;
  padding: 1.5cqw 4cqw 1.7cqw;
  color: #fff;
  background: linear-gradient(180deg, #ff953a, #f25420);
  border: .65cqw solid #fff;
  border-radius: 999px;
  box-shadow: 0 .75cqw 0 var(--purple), 0 1.2cqw 2cqw #42124f45;
  text-align: center;
  font-size: clamp(22px, 6cqw, 45px);
  line-height: 1;
  font-weight: 900;
  text-shadow: .3cqw .3cqw 0 var(--purple), -.2cqw -.2cqw 0 var(--purple);
  transform: rotate(-1deg);
}

.section-mascot {
  position: absolute;
  z-index: 3;
  top: 1.2cqw;
  width: 17cqw;
  max-width: 128px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 .8cqw .7cqw #59204455);
}

.mascot-left {
  left: .3cqw;
  transform: rotate(-9deg);
}

.mascot-right {
  right: .3cqw;
  transform: rotate(8deg);
}

.ribbon-title::before,
.ribbon-title::after {
  content: "★";
  position: absolute;
  top: 50%;
  color: #fff13b;
  font-size: .55em;
  transform: translateY(-50%);
}

.ribbon-title::before {
  left: 4%;
}

.ribbon-title::after {
  right: 4%;
}

.ribbon-title.purple {
  background: linear-gradient(180deg, #8150a5, #4d1b74);
}

.movie-frame {
  width: 78%;
  margin: auto;
  padding: 1.3cqw;
  border-radius: 2cqw;
  background: #fff;
  box-shadow: 0 1cqw 0 #c75f34, 0 1.5cqw 2cqw #8d3e3140;
}

.movie-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  color: #222;
  background: #d7d7d7;
  font-weight: 700;
  font-size: clamp(14px, 2.7cqw, 20px);
}

.panel {
  position: relative;
  z-index: 1;
  padding: 4.5cqw 3.5cqw;
  background: #fffdf8;
  border: .7cqw solid #f09a50;
  border-radius: 3.2cqw;
  box-shadow: 0 1.1cqw 0 #f7c47f, 0 2cqw 3cqw #6c2e5724;
}

.panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.2cqw;
  border: .25cqw dashed #f5bd82;
  border-radius: 2.2cqw;
  pointer-events: none;
}

.intro {
  text-align: center;
  color: var(--purple);
}

.intro p {
  margin: 0;
  font-size: clamp(16px, 4cqw, 30px);
  font-weight: 900;
}

.intro h3 {
  margin: .5cqw 0 2cqw;
  color: var(--pink);
  font-size: clamp(27px, 7cqw, 52px);
  line-height: 1.05;
  font-weight: 900;
  text-shadow: .25cqw .25cqw 0 #fff, .45cqw .45cqw 0 #ffc51f;
}

.intro small {
  color: var(--orange);
  font-size: .72em;
}

.offer {
  padding: 4.5cqw 0;
  border-top: .45cqw dashed #ed82b9;
  text-align: center;
}

.offer:first-of-type {
  border-top: 0;
}

.condition {
  margin: 0 0 3cqw;
  padding: 2.3cqw 2cqw;
  color: var(--purple);
  background: linear-gradient(180deg, #fff66a, #ffd828);
  border: .55cqw solid var(--orange);
  border-radius: 2.4cqw;
  box-shadow: inset 0 0 0 .55cqw #fff7ad;
  font-size: clamp(17px, 4.5cqw, 34px);
  line-height: 1.25;
  font-weight: 900;
}

.condition span {
  display: inline-block;
  margin-right: .25em;
  padding: .22em .6em;
  color: #fff;
  background: var(--pink);
  border-radius: 999px;
  transform: rotate(-3deg);
}

.condition strong {
  color: var(--pink);
  font-size: 1.28em;
}

.condition small {
  display: block;
  margin-top: 1cqw;
  font-size: .54em;
  color: #6c245f;
}

.offer h4,
.social h4 {
  display: inline-block;
  margin: 1cqw auto 3cqw;
  padding: .6cqw 3cqw;
  color: #fff;
  background: var(--purple);
  border-radius: 999px;
  font-size: clamp(17px, 4.2cqw, 32px);
  line-height: 1.2;
}

.offer h4 small {
  font-size: .65em;
}

.speech {
  margin: 1cqw auto 3cqw;
  padding: 2cqw;
  width: 86%;
  color: var(--pink);
  background: #fff1f7;
  border: .45cqw dashed var(--pink);
  border-radius: 50%;
  font-weight: 900;
  font-size: clamp(15px, 3.8cqw, 28px);
}

.date {
  display: table;
  margin: 4cqw auto 2.5cqw;
  padding: .65cqw 3.2cqw;
  color: #fff;
  background: var(--deep-purple);
  border-radius: 999px;
  font-weight: 900;
  font-size: clamp(14px, 3.2cqw, 24px);
}

.quantity {
  margin: 2cqw 0 1cqw;
  color: var(--purple);
  font-weight: 900;
  font-size: clamp(16px, 4cqw, 30px);
}

.quantity strong {
  color: var(--pink);
  font-size: 1.45em;
}

.sticker-grid,
.candy-grid,
.file-grid,
.cushion-grid,
.event-files {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.2cqw;
}

.sticker-grid figure,
.cushion-grid figure {
  margin: 0;
}

.sticker-grid img,
.candy-grid img,
.key-grid img,
.file-grid img,
.cushion-grid img,
.social-prizes img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .28s ease, filter .28s ease;
}

.sticker-grid img:hover,
.candy-grid img:hover,
.key-grid img:hover,
.file-grid img:hover,
.cushion-grid img:hover,
.social-prizes img:hover {
  transform: translateY(-1cqw) rotate(-1deg) scale(1.035);
  filter: drop-shadow(0 1.2cqw 1cqw #57214a35);
}

.sticker-grid figure {
  display: grid;
  grid-template-rows: 1fr auto;
}

.sticker-grid figcaption,
.cushion-grid figcaption {
  display: inline-block;
  margin: .7cqw auto 0;
  padding: .35cqw 1.6cqw;
  color: #fff;
  background: var(--purple);
  border-radius: 999px;
  font-weight: 900;
  font-size: clamp(11px, 2.6cqw, 19px);
}

.candy-grid {
  align-items: center;
}

.candy-grid img {
  aspect-ratio: 1;
}

.key-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2cqw;
}

.key-grid img {
  aspect-ratio: 1;
}

.file-grid img {
  aspect-ratio: 1 / .72;
}

.cushion-grid {
  padding: 2cqw;
}

.cushion-grid figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.cushion-grid img {
  aspect-ratio: 1;
}

.event-grid {
  display: grid;
  gap: 3cqw;
}

.event-grid>img {
  width: min(92%, 620px);
  margin-inline: auto;
}

.event-files img {
  width: 100%;
  aspect-ratio: 1 / .72;
  object-fit: contain;
}

.clearfile-stage {
  position: relative;
  min-height: 75cqw;
  margin: 1cqw -1cqw 2cqw;
}

.coloring-sheet {
  position: absolute;
  z-index: 2;
  left: -2%;
  top: 8%;
  width: 56%;
  transform: rotate(-6deg);
  filter: drop-shadow(1.1cqw 1.5cqw 1.2cqw #4c2a2840);
}

.clearfile-stack {
  position: absolute;
  inset: 0;
}

.clearfile-stack figure {
  position: absolute;
  z-index: 1;
  margin: 0;
}

.clearfile-stack img {
  width: 100%;
  filter: drop-shadow(.8cqw 1.2cqw .9cqw #4c2a2838);
}

.clearfile-front-one {
  top: 5%;
  right: 17%;
  width: 33%;
  transform: rotate(-2deg);
}

.clearfile-front-two {
  top: 20%;
  right: -1%;
  width: 34%;
  transform: rotate(8deg);
}

.clearfile-back {
  top: 52%;
  right: 4%;
  width: 34%;
  transform: rotate(7deg);
}

.clearfile-stack figcaption {
  position: absolute;
  display: grid;
  place-items: center;
  width: 14cqw;
  aspect-ratio: 1;
  margin: 0;
  color: #fff;
  background: #25236b;
  border-radius: 50%;
  font-size: clamp(13px, 3.6cqw, 27px);
  font-weight: 900;
  line-height: 1.05;
  transform: rotate(-7deg);
}

.clearfile-stack figcaption small {
  font-size: .7em;
}

.clearfile-front-two figcaption {
  top: -12%;
  right: 76%;
}

.clearfile-back figcaption {
  top: 23%;
  right: 84%;
}

.display-period {
  margin: 1cqw 0 2cqw;
  color: #171717;
  text-align: center;
  font-size: clamp(15px, 3.8cqw, 29px);
  font-weight: 800;
  line-height: 1.5;
}

.display-period strong {
  font-size: 1.45em;
}

.galapon-block {
  margin: 2cqw -1cqw 0;
  padding-top: 4cqw;
}

.galapon-block img {
  width: 92%;
  margin-inline: auto;
}

.coloring-copy {
  display: grid;
  justify-items: center;
  gap: 1.4cqw;
  width: 94%;
  margin: 1cqw auto 4cqw;
  padding: 3cqw 2cqw;
  background: #fff;
  border-radius: 2.5cqw;
}

.coloring-copy img:nth-child(1) {
  width: 77%;
}

.coloring-copy img:nth-child(2) {
  width: 78%;
}

.coloring-copy img:nth-child(3) {
  width: 96%;
}

.notes {
  /* margin: 2cqw auto 0; */
  color: #342d35;
  text-align: left;
  font-size: clamp(10px, 2.4cqw, 18px);
  line-height: 1.55;
}

.notes p {
  margin: .25em 0;
  padding-left: 1em;
  text-indent: -1em;
  font-weight: 550;
}

.banner {
  display: block;
  width: min(94%, 650px);
  margin: 4cqw auto 1cqw;
  border-radius: 2cqw;
  overflow: hidden;
  transition: transform .2s ease, filter .2s ease;
}

.banner img {
  width: 100%;
}

.banner:hover,
.banner:focus-visible {
  transform: translateY(-.7cqw);
  filter: brightness(1.08);
}

.banner:focus-visible,
.apply-link:focus-visible,
.effect-reveal:focus-visible {
  outline: .7cqw solid #26aee4;
  outline-offset: .6cqw;
}

.online,
.social {
  background: transparent;
}

.online .panel,
.social .panel {
  text-align: center;
  border-color: #9670b3;
}

.online .panel>h3,
.social .panel>h3 {
  margin: 0 0 2cqw;
  color: var(--purple);
  font-size: clamp(18px, 4.8cqw, 36px);
  line-height: 1.4;
}

.online h3 em,
.social h3 em {
  color: var(--pink);
  font-style: normal;
}

.towel {
  width: 82%;
  margin: auto;
}

.apply-link {
  display: block;
  width: min(82%, 560px);
  margin: 3cqw auto 0;
  padding: 2cqw;
  color: #fff;
  background: linear-gradient(180deg, #f573aa, #e52180);
  border: .65cqw solid #fff;
  border-radius: 2.4cqw;
  box-shadow: 0 .8cqw 0 var(--purple);
  text-decoration: none;
  font-weight: 900;
  font-size: clamp(15px, 3.8cqw, 28px);
}

.apply-link strong {
  font-size: 1.35em;
}

.social-prizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2cqw;
  align-items: center;
}

.social-prizes img {
  aspect-ratio: 1;
}

.social-prizes .wide {
  grid-column: 1 / -1;
  width: 65%;
  height: auto;
  justify-self: center;
}

/* Figma's dark reveal overlays rebuilt as a live CSS effect. */
.effect-reveal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 3cqw;
  background: #f6e9ff;
  box-shadow: inset 0 0 0 .55cqw #9c66c1;
  cursor: pointer;
}

.effect-reveal::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 15% 23%, #fff 0 .25cqw, transparent .35cqw), radial-gradient(circle at 84% 18%, #ffe33d 0 .35cqw, transparent .48cqw), radial-gradient(circle at 72% 74%, #ff9bd4 0 .3cqw, transparent .45cqw), radial-gradient(circle at 25% 82%, #a4e9ff 0 .3cqw, transparent .45cqw), linear-gradient(145deg, #291140b5, #6c237d92 48%, #241036b8);
  opacity: .7;
  transition: opacity .45s ease;
}

.effect-reveal::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: -35%;
  bottom: -35%;
  left: -60%;
  width: 35%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff9, transparent);
  transform: rotate(14deg);
  filter: blur(.5cqw);
}

.effect-reveal:hover::before,
.effect-reveal:focus::before,
.effect-reveal:focus-within::before {
  opacity: .12;
}

.effect-reveal.compact {
  padding: 3cqw;
}

.hero-period-art {
  position: absolute;
  z-index: 5;
  left: 3.1%;
  bottom: -1.9%;
  width: 93.8%;
  height: auto;
}

.art-heading {
  position: relative;
  z-index: 4;
  width: 97%;
  margin: 0 auto 3cqw;
}

.art-heading img {
  width: 100%;
  height: auto;
}

.copy-art {
  display: block;
  width: min(91%, 620px);
  height: auto;
  margin: 1cqw auto 3cqw;
}

.copy-art-main {
  width: 91%;
  margin-block: 2cqw 4cqw;
}

.purchase-copy {
  width: 88%;
}

.speech-art {
  width: 72%;
}

.event-title-art {
  width: 91%;
}

.online-copy {
  width: 92%;
}

.social-copy {
  width: 96%;
}

.badge-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4cqw;
  margin: 0 auto 2cqw;
}

.badge-row img {
  width: 25%;
  max-width: 195px;
  height: auto;
}

.badge-row img:last-child {
  width: 19%;
}

.mini-badge {
  display: block;
  width: 28%;
  max-width: 195px;
  height: auto;
  margin: 0 auto 2cqw;
}

.product-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5cqw;
  width: 94%;
  margin: 2cqw auto 3cqw;
}

.product-title img:first-child {
  width: 78%;
  height: auto;
}

.product-title img:last-child {
  width: 17%;
  height: auto;
}

.date-art {
  display: block;
  width: 89%;
  max-width: 566px;
  height: auto;
  margin: 4cqw auto 3cqw;
}

.sticker-grid figcaption {
  display: block;
  width: 100%;
  margin-top: 1cqw;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.sticker-grid figcaption img {
  width: 88%;
  height: auto;
  margin-inline: auto;
}

.cushion-grid {
  position: relative;
  z-index: 1;
  padding: 8cqw 2cqw 2cqw 8cqw;
}

.cushion-grid figcaption:has(img) {
  display: block;
  width: 10cqw;
  margin: .5cqw auto 0;
  padding: 0;
  background: transparent;
  border-radius: 50%;
}

.cushion-grid figcaption img {
  width: 100%;
  height: auto;
}

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

.measure-vertical {
  left: 1.2cqw;
  top: 12cqw;
  width: 6.5cqw;
}

.measure-horizontal {
  left: 15cqw;
  top: 2.5cqw;
  width: 48cqw;
}

.clearfile-stack figcaption:has(img) {
  display: block;
  width: 14cqw;
  height: auto;
  aspect-ratio: 1;
  background: transparent;
  transform: none;
}

.clearfile-stack figcaption img {
  width: 100%;
  height: auto;
  filter: none;
}

.one-item {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 2%;
  width: 36%;
  height: auto;
}

.galapon-block a {
  display: block;
  margin-top: 3cqw;
}

.galapon-block a img {
  width: 88%;
}

.image-button {
  display: block;
  width: 88%;
  margin: 3cqw auto 0;
  transition: transform .2s ease, filter .2s ease;
}

.image-button img {
  width: 100%;
  height: auto;
}

.image-button:hover,
.image-button:focus-visible {
  transform: translateY(-.7cqw);
  filter: brightness(1.06);
}

.image-button:focus-visible {
  outline: .7cqw solid #26aee4;
  outline-offset: .6cqw;
}

.social-product-title {
  margin-top: 5cqw;
}

.prize-set {
  padding: 3cqw;
  background: #fff8fb;
  border: .4cqw solid #ed86ba;
  border-radius: 2.5cqw;
}

/* Proportions shared by every viewport, measured against the page width. */
.section {
  padding: 4cqw 3.6cqw 6cqw;
}

.section::before,
.movie::after {
  display: none;
}

.campaign {
  box-shadow: none;
}

.art-heading {
  width: 104%;
  margin: 0 -2% -5cqw;
}

.section-mascot {
  z-index: 5;
  top: 1cqw;
  width: 16%;
}

.movie>.section-mascot {
  position: absolute;
}

.movie-frame {
  width: 96%;
  padding: 9cqw 6cqw 6cqw;
  background-color: #ffe5b5;
  background-image: conic-gradient(from 45deg, #f9d396 0 25%, transparent 0 50%, #f9d396 0 75%, transparent 0);
  background-size: 9cqw 9cqw;
  border-radius: 0 0 3cqw 3cqw;
  box-shadow: none;
}

.movie-placeholder {
  aspect-ratio: 1.35;
  font-size: 3cqw;
}

.movie-frame > iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.panel {
  padding: 9cqw 4cqw 4cqw;
  border-width: .65cqw;
  box-shadow: none;
}

.panel::before {
  display: none;
}

.intro {
  position: relative;
  padding-top: 1cqw;
}

.copy-art-main {
  width: 94%;
  margin: 0 0 3cqw auto;
}

.goods-limited-badge {
  position: absolute;
  z-index: -1;
  left: -6.0cqw;
  top: 11cqw;
  width: 24cqw;
  max-width: 180px;
  height: auto;
}

.sticker-offer {
  padding: 0 0 3cqw;
  border: 0;
  border-radius: 2cqw;
  overflow: visible;
  background-color: #fff1d7;
  background-image: repeating-linear-gradient(45deg, #fff1d7 0 4cqw, #fbe6c5 4cqw 8cqw);
}

.free-offer {
  position: relative;
  /* margin: 0 1.8cqw; */
  padding: 5.0cqw 2.8cqw 2.8cqw 5.0cqw;
  border-radius: 3.2cqw 3.2cqw 0 0;
  background: linear-gradient(100deg, #ffc933, #ffac28);
}

.free-offer .copy-art {
  width: 100%;
  margin: 0 auto;
}

.free-badge {
  position: absolute;
  z-index: 2;
  width: 29%;
  left: -5.0cqw;
  top: -3.2cqw;
}

.sticker-offer .product-title {
  position: relative;
  /* justify-content: flex-start; */
  align-items: center;
  width: 100%;
  min-height: 14cqw;
  margin: 0 auto 2cqw;
  /* padding: 3.5cqw 3cqw 1cqw; */
}

.sticker-offer .product-title>img:first-child {
  width: 82%;
  z-index: 3;
}

.sticker-offer .product-title>img:last-child {
  position: absolute;
  z-index: 2;
  right: 1cqw;
  top: -3.8cqw;
  width: 15%;
  flex: 0 0 15%;
}

.sticker-grid {
  gap: 1cqw 2cqw;
  padding: 0 3cqw;
}

.sticker-grid figure {
  min-width: 0;
  grid-template-rows: auto auto;
  align-content: end;
}

.sticker-grid figure>img {
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
}

.sticker-grid figcaption {
  margin: 0;
}

.sticker-grid figcaption img {
  width: 94%;
  height: auto;
}

.sticker-offer .quantity {
  margin: 1cqw 0;
  font-size: 3.2cqw;
  color: #171717;
  background-color: #ffffff;
  width: 90%;
  margin: 0 auto;

}

.sticker-offer .quantity strong {
  color: inherit;
  font-size: 1.3em;
}

.sticker-offer .notes {
  padding: 0 3cqw;
  font-size: 2.4cqw;
}

footer {
  padding: 5cqw 5cqw 7cqw;
  color: #55245d;
  background: transparent;
  text-align: center;
  font-size: clamp(10px, 2.3cqw, 17px);
}

footer .notes {
  width: 90%;
}

footer>p {
  margin: 4cqw 0 0;
  font-weight: 700;
  text-align: start;
  /* margin: 2cqw auto 0; */
}

footer .copyright {
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  line-height: 1.25;
}

.copyright-owner,
.copyright-approval {
  white-space: nowrap;
}

.copyright-text {
  display: inline-block;
  transform: scaleY(.8);
  transform-origin: center;
}

.copyright-symbol {
  display: inline-block;
}

.purchase-offer {
  padding: 0 0 4cqw;
  overflow: visible;
  border-top: 0;
  border-radius: 3cqw 3cqw 0 0;
}

.purchase-summary {
  position: relative;
  z-index: 3;
  margin-inline: 1.8cqw;
  padding: 4cqw 2.5cqw 3cqw;
  background: linear-gradient(100deg, #ffdc42, #ffb52b);
  border-radius: 3cqw 3cqw 0 0;
  margin-top: 40px;
}

.purchase-summary .mini-badge {
  position: absolute;
  z-index: 1;
  left: -2.2cqw;
  top: -3cqw;
  width: 29%;
  margin: 0;
}

.purchase-summary .purchase-copy {
  position: relative;
  z-index: 2;
  width: 94%;
  margin: 0 auto;
}

.charm-showcase {
  position: relative;
  min-height: 66cqw;
  margin-inline: 1.8cqw;
  overflow: visible;
  background-color: #fff1d8;
  background-image: repeating-conic-gradient(from 45deg, #f9e4c1 0% 25%, #fff1d8 25% 50%);
  background-position: 0 0;
  background-size: 12cqw 12cqw;
}

.charm-showcase .speech-art {
  position: absolute;
  z-index: 6;
  top: -5cqw;
  left: -1.0cqw;
  width: 57%;
  margin: 0;
}

.promo-charms {
  position: absolute;
  inset: 0;
}

.promo-charms img {
  position: absolute;
  height: auto;
  filter: drop-shadow(1cqw 1.4cqw 1cqw #60443342);
}

.promo-charms img:nth-child(1) {
  z-index: 1;
  left: 0%;
  bottom: 3%;
  width: 57%;
  transform: rotate(20deg);
}

.promo-charms img:nth-child(2) {
  z-index: 3;
  right: 10%;
  top: 34.5%;
  width: 45%;
  transform: rotate(-8deg);
}

.promo-charms img:nth-child(3) {
  z-index: 2;
  right: 0.3%;
  bottom: 40%;
  width: 45%;
  transform: rotate(-40deg);
}

.promo-charms img:nth-child(4) {
  z-index: 4;
  right: -7%;
  bottom: -9%;
  width: 36%;
  transform: rotate(7deg);
}

.promo-charms img[src*="書き出し用_keycharm_"] {
  z-index: 1;
}

.purchase-products {
  margin-inline: 1.8cqw;
  overflow: visible;
  background-color: #fff1d8;
  background-image: repeating-conic-gradient(from 45deg, #f9e4c1 0% 25%, #fff1d8 25% 50%);
  background-position: 0 -6cqw;
  background-size: 12cqw 12cqw;
  border-radius: 0 0 3cqw 3cqw;
}

.product-period {
  padding: 5cqw 3cqw 4cqw;
  border-top: .8cqw dotted rgba(255, 255, 255, .96);
}

.product-period .date-art {
  width: 93%;
  margin: 0 auto 3cqw;
}

.product-period .product-title {
  position: relative;
  width: 94%;
  min-height: 13cqw;
  margin: 0 auto 2cqw;
}

.product-period .product-title img:first-child {
  width: 84%;
}

.product-period .product-title img:last-child {
  position: absolute;
  z-index: 2;
  right: -1cqw;
  top: -5.0cqw;
  width: 18%;
}

.product-period .key-grid {
  align-items: start;
  column-gap: 0;
  row-gap: 1.5cqw;
  padding-inline: .5cqw;
}

.product-period .key-grid img {
  width: 112%;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  position: relative;
  justify-self: center;
  object-fit: contain;
  filter: drop-shadow(.7cqw 1.1cqw .7cqw #5f493d2e);
}

.product-period .key-grid .keycharm-compact {
  width: 100%;
}

.product-period .key-grid img:nth-child(1),
.product-period .key-grid img:nth-child(4) {
  z-index: 3;
  left: -2.5cqw;
}

.product-period .key-grid img:nth-child(3) {
  top: -9cqw;
  right: -3cqw;
}

.product-period .key-grid img:nth-child(5) {
  top: 2cqw;
}

.product-period .key-grid img:nth-child(6) {
  top: 1cqw;
  right: -3cqw;
}

.key-period .product-title img:first-child {
  position: relative;
  z-index: 2;
}

.key-period .product-title img:last-child {
  z-index: 1;
}

.product-period .candy-grid {
  gap: 2cqw 4cqw;
  padding-inline: 6cqw;
}

.product-period .candy-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  filter: drop-shadow(.7cqw 1.1cqw .7cqw #5f493d2e);
}

.product-period .quantity {
  width: 92%;
  margin: 3cqw auto 1cqw;
  padding: 1cqw 1.5cqw;
  color: #111;
  background: #fff;
  font-size: clamp(15px, 3.8cqw, 28px);
  line-height: 1.2;
}

.product-period .quantity strong {
  color: inherit;
  font-size: 1.25em;
}

.product-period .notes {
  width: 92%;
  margin: 0 auto;
  color: #111;
  font-size: clamp(10px, 2.5cqw, 18px);
}

.candy-period {
  padding-top: 5cqw;
}

.promo-charms img[src$="okashicharm_1_260826.webp"] {
  z-index: 3;
}

.promo-charms img[src$="okashicharm_4_260826.webp"] {
  z-index: 4;
}

.cushion-offer {
  margin-top: 5cqw;
  padding: 0;
  overflow: visible;
  border-top: 0;
}

.cushion-summary {
  position: relative;
  z-index: 2;
  margin-inline: 1.8cqw;
  padding: 5cqw 2.5cqw 3.5cqw;
  background: linear-gradient(100deg, #ffdf43, #ffb52d);
  border-radius: 3cqw 3cqw 0 0;
}

.cushion-summary .mini-badge {
  position: absolute;
  z-index: 1;
  left: -3.5cqw;
  top: -3cqw;
  width: 31%;
  margin: 0;
}

.cushion-summary .copy-art {
  position: relative;
  z-index: 2;
  width: 94%;
  margin: 0 auto;
}

.cushion-products {
  margin-inline: 1.8cqw;
  padding: 5cqw 3cqw 4cqw;
  overflow: hidden;
  background-color: #fff1d8;
  background-image: repeating-linear-gradient(135deg, #fff1d8 0 6cqw, #f9e4c1 6cqw 12cqw);
  border-radius: 0 0 3cqw 3cqw;
}

.cushion-products .date-art {
  width: 93%;
  margin: 0 auto 3cqw;
}

.cushion-products .product-title {
  position: relative;
  width: 100%;
  min-height: 12cqw;
  margin: 0 auto;
}

.cushion-products .product-title img:first-child {
  position: relative;
  z-index: 2;
  width: 89%;
}

.cushion-products .product-title img:last-child {
  position: absolute;
  z-index: 1;
  top: -6cqw;
  right: -1.5cqw;
  width: 18%;
}

.cushion-one {
  margin: -1cqw 4cqw 0 0;
  color: #241c27;
  text-align: right;
  font-size: clamp(10px, 2.5cqw, 18px);
}

.cushion-display {
  position: relative;
}

.cushion-offer .cushion-grid {
  display: grid;
  isolation: isolate;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 6cqw 0;
  padding: 6cqw 0 2cqw;
}

.cushion-offer .cushion-grid figure {
  position: relative;
  z-index: auto;
  display: block;
  min-width: 0;
  margin: 0;
}

.cushion-offer .cushion-item-5 {
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  top: 0;
  left: 3cqw;
}

.cushion-offer .cushion-item-6 {
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  top: 0;
  left: -3cqw;
}

.cushion-offer .cushion-grid .cushion-item-5 figcaption {
  right: auto;
  left: 0;
}

.cushion-offer .cushion-grid .cushion-item-6 figcaption {
  right: 0;
  left: auto;
}

.cushion-offer .cushion-item-2 {
  top: 2cqw;
  left: -1cqw;
  --cushion-rotation: -5deg;
}

.cushion-offer .cushion-item-1 {
  top: -2cqw;
  left: -9cqw;
  --cushion-rotation: 5deg;
}

.cushion-offer .cushion-item-3 {
  z-index: 3;
  grid-column: 1;
  grid-row: 3;
  top: 2cqw;
  left: 8cqw;
}

.cushion-offer .cushion-item-4 {
  z-index: 2;
  grid-column: 2;
  grid-row: 3;
  top: 7cqw;
  left: -1cqw;
}

.cushion-offer .cushion-grid .cushion-item-3 figcaption {
  right: auto;
  left: 0;
}

.cushion-offer .cushion-grid .cushion-item-4 figcaption {
  right: 0;
  left: auto;
}

.cushion-offer .cushion-grid figure>img {
  position: relative;
  z-index: 2;
  transform: rotate(var(--cushion-rotation, 0deg));
  display: block;
  width: 112%;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
  margin-inline: -6%;
  object-fit: contain;
  filter: drop-shadow(.9cqw 1.3cqw .8cqw #58473f35);
  transition: none;
}

.cushion-offer .cushion-grid figure>img:hover {
  transform: rotate(var(--cushion-rotation, 0deg));
  filter: drop-shadow(.9cqw 1.3cqw .8cqw #58473f35);
}

.cushion-offer .cushion-item-5>img,
.cushion-offer .cushion-item-1>img,
.cushion-offer .cushion-item-3>img {
  z-index: 3;
}

.cushion-offer .cushion-item-6>img,
.cushion-offer .cushion-item-2>img,
.cushion-offer .cushion-item-4>img {
  scale: .9;
}

.cushion-offer .cushion-grid figcaption:has(img) {
  position: absolute;
  z-index: 1;
  bottom: -2cqw;
  width: 13cqw;
  margin: 0;
}

.cushion-offer .cushion-grid figure:nth-child(odd) figcaption {
  left: 0;
}

.cushion-offer .cushion-grid figure:nth-child(even) figcaption {
  right: 0;
}

.cushion-offer .cushion-grid figcaption img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  transition: none;
}

.cushion-offer .cushion-grid img:hover {
  transform: rotate(var(--cushion-rotation, 0deg));
}

.cushion-offer .cushion-grid figcaption img,
.cushion-offer .cushion-grid figcaption img:hover {
  transform: none;
}

.cushion-offer .cushion-grid figcaption img:hover {
  filter: none;
}

.cushion-measure {
  position: absolute;
  z-index: 4;
  height: auto;
  pointer-events: none;
}

.cushion-display>.measure-horizontal {
  top: 1cqw;
  left: 0;
  width: 54%;
}

.cushion-display>.measure-vertical {
  width: 10cqw;
}

.cushion-display>.measure-right {
  top: 55cqw;
  right: -1.5cqw;
  left: auto;
}

.cushion-display>.measure-left {
  top: 105cqw;
  left: -1.5cqw;
}

.cushion-products .quantity {
  width: 92%;
  margin: 15cqw auto 2cqw;
  padding: 1.2cqw 1cqw;
  color: #111;
  background: #fff;
  font-size: clamp(14px, 3.6cqw, 27px);
  line-height: 1.2;
}

.cushion-products .quantity strong {
  color: inherit;
  font-size: 1.25em;
}

.cushion-products .notes {
  width: 94%;
  margin: 0 auto;
  color: #111;
  font-size: clamp(9px, 2.2cqw, 17px);
  line-height: 1.45;
}

.event {
  margin-top: 5cqw;
  padding: 0;
  overflow: visible;
  border-top: 0;
}

.coloring-heading {
  margin-inline: 1.8cqw;
  padding: 6cqw 3cqw 5cqw;
  background: linear-gradient(100deg, #ffe349, #ffb22b);
  border-radius: 3.5cqw 3.5cqw 0 0;
}

.coloring-heading .event-title-art {
  display: block;
  width: 94%;
  height: auto;
  margin: 0 auto;
}

.coloring-body {
  margin-inline: 1.8cqw;
  padding: 5cqw 3cqw 5cqw;
  overflow: visible;
  background-color: #fbf0dc;
  background-image:
    radial-gradient(circle, #fae5c5 0 2.45cqw, transparent 2.5cqw),
    radial-gradient(circle, #fae5c5 0 2.45cqw, transparent 2.5cqw);
  background-position: 0 0, 5cqw 5cqw;
  background-size: 10cqw 10cqw;
  border-radius: 0 0 3.5cqw 3.5cqw;
}

.coloring-body>.date-art {
  width: 94%;
  margin: 0 auto 4cqw;
}

.coloring-body .coloring-copy {
  display: grid;
  justify-items: center;
  gap: .8cqw;
  width: 100%;
  margin: 0 auto 3cqw;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.coloring-body .coloring-copy img:nth-child(1) {
  width: 79%;
}

.coloring-body .coloring-copy img:nth-child(2) {
  width: 76%;
}

.coloring-body .coloring-copy img:nth-child(3) {
  width: 98%;
}

.coloring-body .clearfile-stage {
  position: relative;
  min-height: 82cqw;
  margin: 0 -2cqw 2cqw;
}

.coloring-body .coloring-sheet {
  position: absolute;
  z-index: 3;
  top: 7%;
  left: -5%;
  width: 58%;
  height: auto;
  transform: rotate(-5deg);
  filter: drop-shadow(1cqw 1.4cqw 1cqw #4c2a2840);
}

.coloring-body .clearfile-stack {
  position: absolute;
  inset: 0;
}

.coloring-body .one-item {
  position: absolute;
  z-index: 7;
  top: -1%;
  right: 2%;
  width: 45%;
  height: auto;
}

.coloring-body .clearfile-stack figure {
  position: absolute;
  z-index: 4;
  margin: 0;
}

.coloring-body .clearfile-stack figure>img {
  position: relative;
  z-index: 2;
  display: block;
  width: 85%;
  height: auto;
  filter: drop-shadow(.8cqw 1.2cqw .9cqw #4c2a2838);
}

.coloring-body .clearfile-front-one {
  top: 7%;
  right: 20%;
  width: 28%;
  transform: rotate(5deg);
}

.coloring-body .clearfile-front-two {
  top: 19%;
  right: -4%;
  width: 29%;
  transform: rotate(10deg);
}

.coloring-body .clearfile-back {
  top: 52%;
  right: 1%;
  width: 32%;
  transform: rotate(7deg);
}

.coloring-body .clearfile-stack figcaption:has(img) {
  position: absolute;
  z-index: 1;
  display: block;
  width: 14cqw;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  transform: rotate(-7deg);
}

.coloring-body .clearfile-stack figcaption img {
  display: block;
  width: 85%;
  height: auto;
  filter: none;
}

.coloring-body .clearfile-front-two figcaption {
  top: -35%;
  right: 30%;
}

.coloring-body .clearfile-back figcaption {
  top: 23%;
  right: 84%;
}

.coloring-body .display-period {
  margin: 1cqw 0 2cqw;
  color: #111;
  font-size: clamp(14px, 3.7cqw, 28px);
  line-height: 1.45;
}

.coloring-body .display-period strong {
  font-size: 1.45em;
}

.coloring-body>.notes {
  width: 94%;
  margin: 0 auto;
  color: #111;
  font-size: clamp(10px, 2.4cqw, 18px);
  line-height: 1.5;
}

/* Original towel campaign */
.online {
  position: relative;
  padding-top: 5cqw;
  background: transparent;
}

.online>.art-heading {
  position: relative;
  z-index: 4;
  width: 106%;
  margin: 0 -3% -6.5cqw;
}

.online>.section-mascot {
  z-index: 6;
  top: 1cqw;
  left: 2.5cqw;
  width: 16.5%;
}

.online .online-panel {
  position: relative;
  z-index: 1;
  padding: 14cqw 2.5cqw 4cqw;
  border: .65cqw solid #17185f;
  border-radius: 0 0 3.2cqw 3.2cqw;
  background: #fff;
  box-shadow: 0 1.25cqw 0 #7c248d;
}

.online-intro {
  position: relative;
  z-index: 1;
  margin-bottom: 4cqw;
}

.online .online-copy {
  position: relative;
  z-index: 2;
  width: 94%;
  margin: 0 auto;
}

.online .mini-badge {
  position: absolute;
  z-index: 1;
  top: 38%;
  left: -2.5cqw;
  width: 29%;
  margin: 0;
}

.towel-card {
  width: 96%;
  margin: 0 auto 4cqw;
  padding: 4cqw 2.4cqw 3cqw;
  overflow: hidden;
  border-radius: 3.2cqw;
  background-color: #f7f3fa;
  background-image: repeating-conic-gradient(from 45deg, #ebe3f1 0% 25%, #f7f3fa 25% 50%);
  background-position: 0 0;
  background-size: 10cqw 10cqw;
}

.towel-card .date-art {
  width: 92%;
  margin: 0 auto 4cqw;
}

.towel-card .towel {
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: none;
}

.towel-size {
  margin: 1cqw 1cqw 0;
  color: #111;
  text-align: right;
  font-size: clamp(11px, 2.7cqw, 20px);
  line-height: 1.4;
}

.online .online-banner {
  width: 96%;
  margin: 4cqw auto;
  overflow: visible;
  border-radius: 0;
}

.online .towel-apply {
  width: 96%;
  margin: 0 auto;
}

.online .banner,
.online .image-button {
  transition: none;
}

.online .banner:hover,
.online .banner:focus-visible,
.online .image-button:hover,
.online .image-button:focus-visible {
  transform: none;
  filter: none;
}

.application-note {
  width: 96%;
  margin: 3cqw auto 0;
  color: #111;
  text-align: left;
  font-size: clamp(10px, 2.45cqw, 18px);
  line-height: 1.55;
}

/* X repost campaign */
.social {
  position: relative;
  padding-top: 5cqw;
  background: transparent;
}

.social>.art-heading {
  position: relative;
  z-index: 4;
  width: 106%;
  margin: 0 -3% -6.5cqw;
}

.social>.section-mascot {
  z-index: 6;
  top: 1cqw;
  right: 1.5cqw;
  width: 17%;
}

.social .social-panel {
  position: relative;
  z-index: 1;
  padding: 14cqw 2.5cqw 3cqw;
  border: .65cqw solid #17185f;
  border-radius: 0 0 3.2cqw 3.2cqw;
  background: #fff;
  box-shadow: 0 1.1cqw 0 #7c248d;
}

.social .social-copy {
  width: 94%;
  margin: 0 auto 5cqw;
}

.social-prizes-card {
  width: 98%;
  margin: 0 auto 4cqw;
  padding: 4cqw 1.2cqw 3cqw;
  border-radius: 3cqw;
  background-color: #f8f4fa;
  background-image: repeating-linear-gradient(45deg, transparent 0 5.5cqw, #eee6f2 5.5cqw 11cqw);
}

.social-prizes-card>.date-art {
  width: 94%;
  margin: 0 auto 3cqw;
}

.social-set {
  position: relative;
}

.social .social-product-title {
  position: relative;
  z-index: 3;
  width: 96%;
  margin: 0 auto -1cqw;
  gap: 0;
}

.social .social-product-title img:first-child {
  width: 82%;
}

.social .social-product-title img:last-child {
  width: 20%;
  margin-left: -2%;
}

.social-key-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 0;
  width: 104%;
  margin-left: -2%;
}

.social-key-row img {
  width: 112%;
  max-width: none;
  height: auto;
  margin-left: -6%;
  margin-bottom: 30%;
}

.social-key-row img[src$="書き出し用_keycharm (7).png"] {
  width: 99%;
  margin-left: .5%;
}

.social-charm-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  width: 80%;
  margin: -7cqw auto 0;
}

.social-charm-row img {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1cqw .8cqw #442c3c2d);
}

.social-charm-row img:first-child {
  left: 5.0cqw;
}

.social-charm-row img:last-child {
  right: 4.4cqw;
}

.social-set-halloween {
  margin-top: 3cqw;
  padding-top: 5cqw;
  border-top: .9cqw dotted #fff;
}

.social-set-halloween .social-charm-row {
  width: 80%;
}

.social-set-note {
  margin: -1cqw 2cqw 0 0;
  color: #111;
  text-align: right;
  font-size: clamp(10px, 3.5cqw, 30px);
}

.social .social-x-banner {
  width: 98%;
  margin: 4cqw auto 0;
  overflow: visible;
  border-radius: 0;
}

.social .social-key-row img,
.social .social-charm-row img,
.social .banner {
  transition: none;
}

.social .social-key-row img:hover,
.social .social-charm-row img:hover,
.social .banner:hover,
.social .banner:focus-visible {
  transform: none;
  filter: none;
}

/* Product shadows stay visible during hover and scroll animations. */
.towel-card img[src="images/towel_260904.webp"],
.social .social-key-row img[src="images/keycharm_9.png"],
.social .social-key-row img[src="images/keycharm_11.png"],
.social .social-key-row img[src="images/keycharm_8.png"],
.social .social-key-row img[src="images/keycharm_13.png"],
.social-set-halloween .social-key-row img[src="images/keycharm14.png"],
.social-set-halloween .social-key-row img[src="images/書き出し用_keycharm (12).png"],
.social .social-key-row img[src="images/keycharm_12.png"] {
  filter: drop-shadow(.7cqw 1.1cqw .7cqw #5f493d4d);
}

/* Scroll animations specified in the campaign instructions. */
.fade_in {
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
  transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
}

.fade_in.show {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

img[src="images/image_8.webp"].fade_in,
img[src="images/image_49.webp"].fade_in,
img[src="images/image_56.webp"].fade_in {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

/* Explicit keyframes also run when .show is set before the first paint. */
@media (prefers-reduced-motion: no-preference) {
  .hero > .hero-friends.fade_in,
  .hero h1.fade_in {
    transition: none;
  }

  .hero > .hero-friends.fade_in.show,
  .hero h1.fade_in.show {
    animation: heroFadeIn 0.5s ease-out both;
  }

  .hero h1.fade_in.show {
    animation-delay: 0.5s;
  }
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

.section-mascot.fade_in.preserve-layout {
  --fade-base-transform: rotate(0deg);
  -webkit-transform: var(--fade-base-transform) translateY(30px);
  transform: var(--fade-base-transform) translateY(30px);
}

.section-mascot.mascot-left.fade_in.preserve-layout {
  --fade-base-transform: rotate(-9deg);
}

.section-mascot.mascot-right.fade_in.preserve-layout {
  --fade-base-transform: rotate(8deg);
}

.section-mascot.fade_in.preserve-layout.show {
  -webkit-transform: var(--fade-base-transform) translateY(0);
  transform: var(--fade-base-transform) translateY(0);
}

.scale_in {
  opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: opacity 0.9s ease-out, -webkit-transform 0.9s ease-out;
  transition: opacity 0.9s ease-out, -webkit-transform 0.9s ease-out;
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  transition: opacity 0.9s ease-out, transform 0.9s ease-out, -webkit-transform 0.9s ease-out;
}

.scale_in.show {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-animation: bounceScale 0.9s ease-out forwards;
  animation: bounceScale 0.9s ease-out forwards;
}

.scale_5s {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  -webkit-animation-delay: 0.5s !important;
  animation-delay: 0.5s !important;
}

.scale_1s {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  -webkit-animation-delay: 0.1s !important;
  animation-delay: 0.1s !important;
}

@-webkit-keyframes bounceScale {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }

  60% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceScale {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }

  60% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* Keep the promo composition's original rotations while it scales in. */
.charm-showcase>.speech-art {
  --scale-base-transform: translate(0, 0);
}

.promo-charms img:nth-child(1) {
  --scale-base-transform: rotate(20deg);
}

.promo-charms img:nth-child(2) {
  --scale-base-transform: rotate(-8deg);
}

.promo-charms img:nth-child(3) {
  --scale-base-transform: rotate(-40deg);
}

.cushion-grid figure>img.scale_in.preserve-layout {
  --scale-base-transform: rotate(var(--cushion-rotation, 0deg));
}

.social-charm-row img:first-child {
  --scale-base-transform: rotate(-10deg);
}

.social-charm-row img:last-child {
  --scale-base-transform: rotate(10deg);
}

.section-mascot.mascot-left.scale_in.preserve-layout {
  --scale-base-transform: rotate(-9deg);
}

.section-mascot.mascot-right.scale_in.preserve-layout {
  --scale-base-transform: rotate(8deg);
}

.towel-card .towel.scale_in.preserve-layout {
  --scale-base-transform: rotate(-5deg);
}

.section-mascot.scale_in.preserve-layout,
.towel-card .towel.scale_in.preserve-layout,
.charm-showcase>.speech-art.scale_in.preserve-layout,
.promo-charms img.scale_in.preserve-layout,
.cushion-grid figure>img.scale_in.preserve-layout,
.social-charm-row img.scale_in.preserve-layout {
  -webkit-transform: var(--scale-base-transform) scale(0.5);
  transform: var(--scale-base-transform) scale(0.5);
}

.section-mascot.scale_in.preserve-layout.show,
.towel-card .towel.scale_in.preserve-layout.show,
.charm-showcase>.speech-art.scale_in.preserve-layout.show,
.promo-charms img.scale_in.preserve-layout.show,
.cushion-grid figure>img.scale_in.preserve-layout.show,
.social-charm-row img.scale_in.preserve-layout.show {
  -webkit-transform: var(--scale-base-transform) scale(1);
  transform: var(--scale-base-transform) scale(1);
  -webkit-animation: bounceScalePreserveLayout 0.9s ease-out forwards;
  animation: bounceScalePreserveLayout 0.9s ease-out forwards;
}

@-webkit-keyframes bounceScalePreserveLayout {
  0% {
    -webkit-transform: var(--scale-base-transform) scale(0.5);
    transform: var(--scale-base-transform) scale(0.5);
  }

  60% {
    -webkit-transform: var(--scale-base-transform) scale(1.2);
    transform: var(--scale-base-transform) scale(1.2);
  }

  100% {
    -webkit-transform: var(--scale-base-transform) scale(1);
    transform: var(--scale-base-transform) scale(1);
  }
}

@keyframes bounceScalePreserveLayout {
  0% {
    -webkit-transform: var(--scale-base-transform) scale(0.5);
    transform: var(--scale-base-transform) scale(0.5);
  }

  60% {
    -webkit-transform: var(--scale-base-transform) scale(1.2);
    transform: var(--scale-base-transform) scale(1.2);
  }

  100% {
    -webkit-transform: var(--scale-base-transform) scale(1);
    transform: var(--scale-base-transform) scale(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-sparkles i {
    animation: twinkle 2.8s ease-in-out infinite alternate;
  }

  .hero-sparkles i:nth-child(even) {
    animation-delay: -1.5s;
  }

  .effect-reveal::after {
    animation: reveal-shine 4.2s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {

  .fade_in,
  .scale_in {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    transition: none;
    animation: none;
  }

  .section-mascot.fade_in.preserve-layout {
    -webkit-transform: var(--fade-base-transform) translateY(0);
    transform: var(--fade-base-transform) translateY(0);
  }

  .section-mascot.scale_in.preserve-layout,
  .towel-card .towel.scale_in.preserve-layout,
  .charm-showcase>.speech-art.scale_in.preserve-layout,
  .promo-charms img.scale_in.preserve-layout,
  .cushion-grid figure>img.scale_in.preserve-layout,
  .social-charm-row img.scale_in.preserve-layout {
    -webkit-transform: var(--scale-base-transform) scale(1);
    transform: var(--scale-base-transform) scale(1);
  }
}

@keyframes twinkle {
  to {
    opacity: 1;
    transform: scale(1.25) rotate(20deg);
  }
}

@keyframes reveal-shine {

  0%,
  22% {
    left: -60%;
    opacity: 0;
  }

  35% {
    opacity: .9;
  }

  53%,
  100% {
    left: 125%;
    opacity: 0;
  }
}

/* Keep the existing character positions when replacing the background. */
@media (max-width: 750px) {
  .hero-friends {
    top: 12.5%;
    left: -2.32%;
    width: 106.21%;
  }
}

@media (min-width: 751px) {
  .hero {
    width: 100%;
    max-width: none;
    aspect-ratio: 3900 / 2740;
    margin-bottom: clamp(70px, 9vw, 180px);
    overflow: visible;
  }

  .hero-bg img {
    /* Extend the crop downward while keeping the corrected top edge fixed. */
    transform: translateY(-1%) scale(1.04);
    transform-origin: center top;
  }

  .hero-friends {
    /* top: 10%; */
    left: 17.5%;
    width: 67%;
    filter: drop-shadow(0 .65cqw .55cqw #45155952);
  }

  .hero h1 {
    inset: 0;
    width: 100%;
    height: 100%;
    filter: none;
  }

  .hero h1 img {
    height: auto;
  }

  .hero h1 .hero-title-mobile {
    display: none;
  }

  .hero h1 .hero-title-pc {
    display: block;
    position: absolute;
    top: 48%;
    left: 19%;
    width: 60.3%;
    filter: drop-shadow(0 .55cqw .45cqw #45155970);
  }

  .hero-period-art {
    top: calc(100% + 1vw);
    bottom: auto;
    left: 50%;
    width: min(60%, 704px);
    transform: translateX(-50%);
  }

  .hero-sparkles {
    display: none;
  }
}

@media (max-width: 430px) {
  .panel {
    border-radius: 14px;
  }

  .hero-period {
    letter-spacing: -.035em;
  }

  .condition {
    border-radius: 13px;
  }
}

/* The supplied white overlays are clipped to the character artwork, so their
   rectangular export edges cannot cover the main visual. */
.hero-friends,
.hero h1,
.hero h1 .hero-title-pc {
  filter: none;
}

.hero-friends::before,
.hero h1::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: var(--hero-overlay) center / 100% 100% no-repeat;
  /* Keep the mask aligned; expand the glow without scaling the artwork. */
  transform: none;
  -webkit-mask: var(--hero-character-mask) center / 100% 100% no-repeat;
  mask: var(--hero-character-mask) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 4px white) drop-shadow(0 0 7px #ed79d8e6);
}

.hero-friends::before {
  /* An offset silhouette cannot follow all three character outlines. */
  content: none;
}

.hero h1::before {
  top: 0;
  left: 2.5%;
  width: 95%;
  height: 100%;
  filter: drop-shadow(0 0 4px white);
  --hero-overlay: url("images/image_61.webp");
  --hero-character-mask: url("images/kozi-mako.webp");
}

.hero-friends img,
.hero h1 .hero-title-mobile,
.hero h1 .hero-title-pc {
  filter: drop-shadow(0 0 3px white) drop-shadow(0 0 3px white) drop-shadow(0 0 6px #ed79d8f2);
}

.hero-friends img {
  /* Expand the alpha outline uniformly instead of scaling a separate image. */
  filter: url("#hero-outline-glow");
}

.hero h1 .hero-title-mobile {
  filter: drop-shadow(0 0 3px white) drop-shadow(0 0 3px white);
}

.hero-filter-definitions {
  position: absolute;
  pointer-events: none;
}

@media (max-width: 750px) {
  .hero-friends img {
    filter: url("#hero-outline-glow-sp");
  }
}

.coloring-body .display-period img {
  width: 70%;
  height: auto;
  margin-inline: auto;
}

.footer-announcement {
  display: block;
  width: 100%;
  max-width: 696px;
  height: auto;
  margin: 3cqw auto 0;
}

/* Bottom comparison: reuse the TOP overlay with both centers aligned. */
.hero-alignment-preview {
  padding: 5%;
  background: #964eaa;
  isolation: isolate;
}

.hero-alignment-preview .hero-alignment-art {
  position: relative;
  inset: auto;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 751px) {
  .hero-friends::before {
    --hero-overlay: url("images/pc_image_3.webp");
    --hero-character-mask: url("images/pompom-kikirara_pc.webp");
  }

  .hero h1::before {
    content: "";
    top: 48%;
    left: 19%;
    width: 60.3%;
    height: auto;
    aspect-ratio: 2352 / 1523;
    --hero-overlay: url("images/pc_image_2.webp");
    --hero-character-mask: url("images/kozi-mako_pc.webp");
  }

  .hero h1 .hero-title-pc {
    filter: drop-shadow(0 0 3px white)
      drop-shadow(0 0 3px white)
      drop-shadow(0 0 2px white);
  }
}