@charset "UTF-8";
:root {
  --content-width:500px;
  --blue:#3ccafc;
  --ink:#111616;
  --pale-blue:#e6f9ff;
  --gray:#e8eef0;
  --acid:#efff3f;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--blue);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-feature-settings: normal;
  line-height: 1.8;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lp-shell {
  position: relative;
  z-index: 2;
  container-type: inline-size;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  overflow: hidden;
  background: var(--pale-blue);
}

.section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.section--blue {
  background-color: var(--blue);
}

.section--pale {
  background: var(--pale-blue);
}

.section--gray {
  background: var(--gray);
}

.section--black {
  isolation: isolate;
  background: var(--ink);
  color: #fff;
}
.section--black::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/background-geometric-white.webp") center top/100% auto repeat-y;
  content: "";
  opacity: 0.035;
}

.section-heading {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: none;
  height: 25.6cqw;
  margin-inline: 50%;
  transform: translateX(-50%);
}

.section-eyebrow {
  margin: 0 0 4cqw;
  font-size: 3.2cqw;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}
.section-eyebrow.white {
  color: #fff;
}
.section-eyebrow.blue {
  color: var(--blue);
}

.desktop-side {
  display: none;
}

/* HERO: 706pxのcrop画像 + 22pxのライブ縦組文字で750pxを構成 */
.hero {
  position: relative;
  min-height: 177.8667cqw;
  overflow: hidden;
  background: var(--blue);
}

.hero__visual {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.hero__vertical {
  position: absolute;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.93333%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--blue);
  font-family: "Zen Dots", sans-serif;
  font-size: 1.4667cqw;
  line-height: 1;
  text-transform: uppercase;
}

.hero__vertical-copy {
  display: block;
  flex: 0 0 56cqw;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.hero__vertical--left {
  left: 0;
}
.hero__vertical--left .hero__vertical-copy {
  transform: rotate(180deg);
}

.hero__vertical--right {
  right: 0;
}

.hero__catch {
  position: absolute;
  top: 32.6%;
  left: 50%;
  width: 80%;
  margin: 0;
  color: #fff;
  font-size: 4.4cqw;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transform: translateX(-50%);
}

.hero__period {
  position: absolute;
  bottom: 6%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  width: 100%;
  margin: 0;
  font-size: 2.8cqw;
  line-height: 1.3;
  transform: translateX(-50%);
}
.hero__period strong {
  font-size: 2.8cqw;
  font-weight: 700;
  white-space: nowrap;
}
.hero__period span {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.1em;
  font-weight: 600;
  white-space: nowrap;
}
.hero__period b {
  font-family: "Zen Dots", sans-serif;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1;
}
.hero__period b:first-child {
  font-size: 1.2em;
}
.hero__period em {
  opacity: 0;
}

.hero__scroll {
  position: absolute;
  right: 8%;
  bottom: 1.4%;
  width: 84%;
  height: 5%;
}

/* ABOUT */
.about {
  min-height: 244.5333cqw;
  padding: 4cqw 0;
  text-align: center;
}
.about .section-heading {
  margin-bottom: 0;
}

.about__eyebrow {
  margin: 0 0 4cqw;
  color: #fff;
  font-size: 3.2cqw;
  text-align: center;
  font-weight: 700;
}

.about__characters {
  width: 88%;
  margin: -10cqw auto -2.8cqw;
}

.about__ribbons {
  position: relative;
  width: 122.5%;
  margin: 0 -10.3% 5cqw;
  display: block;
}
.about__ribbons img {
  display: block;
  width: 100%;
  height: auto;
}

.about__ribbons-text {
  position: absolute;
  inset: -9% 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6cqw;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 4.5cqw;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  transform: rotate(6deg);
}
.about__ribbons-text span {
  display: block;
  margin-left: -26%;
}
.about__ribbons-text span:last-child {
  margin-left: 26%;
}

.about__copy, .about__closing {
  width: 90%;
  margin-inline: auto;
  padding: 0;
  color: #fff;
  font-size: 3.6cqw;
  font-weight: 400;
  line-height: 1.85;
}

.about__copy p {
  margin: 0 0 3.2cqw;
  font-weight: 400;
}
.about__copy p small {
  font-size: 55%;
  vertical-align: super;
}

.team-links {
  display: flex;
  justify-content: center;
  gap: 2%;
  width: 96%;
  margin: 0 auto 2.4cqw;
}
.team-links a {
  width: 47%;
  transition: transform 0.2s ease;
}
.team-links a:hover, .team-links a:focus-visible {
  transform: translateY(-3px);
}

.about__closing {
  margin: 0 auto;
}
.about__closing small {
  font-size: 77%;
  margin-top: 0.7cqw;
  display: block;
}

.campaign-period {
  position: relative;
  width: 92%;
  margin: 4cqw auto 0;
}
.campaign-period > img {
  width: 100%;
}
.campaign-period p {
  position: absolute;
  top: 47%;
  left: 6%;
  width: 70%;
  margin: 0;
  text-align: left;
  transform: translateY(-50%);
}
.campaign-period span {
  margin: -0.5em 0 0;
  color: #fff;
  font-size: 3.1cqw;
  font-weight: 100;
  line-height: 3.7;
  display: block;
}
.campaign-period strong {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.1em;
  font-size: 2.6cqw;
  white-space: nowrap;
  margin: 0 0 0 -8.7%;
}
.campaign-period b {
  font-family: "Zen Dots", sans-serif;
  font-size: 2.4em;
  font-weight: 400;
  line-height: 1;
}
.campaign-period b:first-child {
  font-size: 1.2em;
  line-height: 1.4;
  font-weight: 300;
}
.campaign-period em {
  opacity: 0;
}

/* PRESENT */
.present {
  min-height: 604.2667cqw;
  padding: 9cqw 0 10cqw;
  text-align: center;
}
.present__eyebrow {
  margin: 0 0 -3.3cqw;
  font-size: 5.3cqw;
  font-weight: 700;
}

.present__guaranteed {
  width: 64%;
  margin: 1cqw auto 1cqw;
}

.present__intro {
  width: 72%;
  margin: 0 auto 5cqw;
  font-size: 3.75cqw;
  font-weight: 400;
  line-height: 2;
}

.present__images {
  background: url("../images/decoration-tab-blue.png") center top/100% no-repeat;
  background-size: 87%;
  background-position: 8cqw 6cqw;
  position: relative;
}
.present__images::before {
  content: "";
  width: 87%;
  height: 93%;
  background-color: var(--blue);
  top: 4%;
  left: 8%;
  position: absolute;
  z-index: -1;
}
.present__images::after {
  content: "";
  width: 100%;
  height: 5%;
  background: url(../images/decoration-tab-blue.png) center top/100% no-repeat;
  background-size: 87%;
  background-position: 8cqw 6cqw;
  bottom: 0;
  left: 3%;
  position: absolute;
  z-index: -1;
  transform: rotate(180deg);
}

.present__main {
  width: 96%;
  margin-left: 5%;
}

.present__steps {
  width: 81%;
  margin: 5cqw auto 4cqw;
  padding-bottom: 3cqw;
  position: relative;
}
.present__steps img {
  display: block;
  width: 100%;
}

.present__steps-note {
  position: absolute;
  width: 88%;
  margin: 1cqw auto 0;
  padding-left: 5cqw;
  color: var(--ink);
  font-size: 2.6cqw;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  text-align: left;
  bottom: 12.4%;
  left: 7.3%;
}
.present__steps-note::before {
  content: "";
  position: absolute;
  left: 0.6cqw;
  top: 0.25em;
  width: 3cqw;
  height: 3cqw;
  background: var(--acid);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.present__steps-note:last-child {
  bottom: 6.2%;
}

.present__collaboration {
  width: 77.6%;
  margin: 4cqw auto 5cqw 12.4cqw;
}

.present__examples {
  width: 94%;
  margin: 0 auto 6cqw 4.4cqw;
}

.present__notes-wrap {
  display: flex;
  align-items: flex-end;
  width: 90%;
  margin: 0 auto;
  text-align: left;
}

.present__character {
  flex: 0 0 auto;
  width: 26%;
  margin-right: 3%;
}

.present__notes {
  width: 76%;
  margin: 0;
  padding-left: 1.2em;
  color: #f6f6f6;
  font-size: 2.6cqw;
  line-height: 1.85;
  list-style-type: none;
}
.present__notes li {
  position: relative;
  width: 93%;
  padding-left: 6%;
}
.present__notes li::before {
  background: url("../images/decoration-star-yellow-small.png") center/100% 100% no-repeat;
  content: "";
  left: 0;
  top: 0.5em;
  width: 2.7cqw;
  height: 2.7cqw;
  position: absolute;
}

/* PRODUCT */
.product {
  min-height: 518.4cqw;
  padding: 9cqw 0 8.5cqw;
}
.product-list {
  display: grid;
  gap: 5.3cqw;
  width: 90%;
  margin: 0 auto;
}

.set-card {
  min-height: 226cqw;
  padding: 3.2cqw 0 7cqw;
  overflow: hidden;
}

.set-card--white {
  background: #fff;
  color: var(--ink);
  background-image: url("../images/background-geometric-white.png");
  background-size: cover;
}

.set-card--black {
  background: var(--ink) url("../images/background-product-black.png") center/cover;
  color: #fff;
}

.set-card__visual {
  width: 92%;
  margin: 0 auto;
  padding-top: 4cqw;
}

.set-card__details {
  margin-top: 0;
  padding: 5.3cqw 9% 0;
  text-align: center;
}
.set-card__details > p:not(.set-card__price-label) {
  margin: 0.15em 0;
  font-size: 3.6cqw;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.55;
  margin: 0.15em -1em;
}
.set-card__details > p:not(.set-card__price-label) span {
  font-size: 85%;
}
.set-card__details > p:not(.set-card__price-label) span.ast {
  font-size: 3.6cqw;
  position: relative;
}
.set-card__details > p:not(.set-card__price-label) span.ast small {
  font-size: 45%;
  vertical-align: super;
}
.set-card__details > p:not(.set-card__price-label).ast-info {
  text-align: left;
  font-size: 73%;
  font-weight: 500;
  margin-top: 3cqw;
  letter-spacing: 0;
}
.set-card__details > p:not(.set-card__price-label).ast-wrap {
  margin: 0.15em -1em;
}

.set-card__rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 3cqw;
  margin: 3.2cqw 0;
  background: linear-gradient(currentColor, currentColor) center/calc(100% - 6cqw) 1px no-repeat;
  color: var(--ink);
}
.set-card__rule::before, .set-card__rule::after {
  content: "";
  width: 3cqw;
  height: 3cqw;
  background-image: url("../images/decoration-star-blue.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.set-card--black .set-card__rule {
  color: #fff;
}

.set-card__price {
  display: block;
  width: 100%;
  height: auto;
  margin: 3cqw auto 2cqw;
}

.set-card__category {
  position: relative;
  width: 60%;
  margin: 4.3cqw auto 2.1cqw;
}
.set-card__category img {
  width: 100%;
}
.set-card__category span {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 90%;
  color: #fff;
  font-size: 3.2cqw;
  font-weight: 700;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.set-card--black .set-card__category span {
  color: var(--ink);
}

.image-button {
  position: relative;
  display: block;
  width: 100%;
  color: var(--ink);
  text-decoration: none;
}
.image-button img {
  width: 100%;
}
.image-button span {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 86%;
  padding: 0 1cqw;
  line-height: 1.25;
  transform: translate(-50%, -50%);
  letter-spacing: 0.1em;
  font-size: 4.5cqw;
  font-weight: 600;
}
.image-button:hover, .image-button:focus-visible {
  filter: brightness(1.05);
}

/* BRAND */
.brand {
  padding: 7cqw 0 7.5cqw;
  text-align: center;
  overflow: visible;
  z-index: 3;
}
.brand__visual {
  width: 94%;
  margin: 7cqw auto 3.8cqw;
}

.brand__intro {
  position: relative;
  width: 86%;
  margin: 0 auto 10cqw;
}
.brand__intro h3 {
  margin: 6.5cqw 0 4.5cqw;
  font-size: 4.7cqw;
  line-height: 1.5;
  font-feature-settings: "palt";
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.brand__intro p {
  margin: 0 0 0.5cqw;
  font-size: 2.9333cqw;
  font-weight: 400;
  line-height: 2.2;
}

.brand__blue-chibi-crop {
  position: absolute;
  top: -1cqw;
  right: -3cqw;
  width: 22cqw;
  height: 26cqw;
}
.brand__blue-chibi-crop img {
  position: absolute;
  top: -4cqw;
  right: -1cqw;
  width: 94cqw;
  max-width: none;
}

.brand__products {
  position: relative;
  margin-bottom: 15cqw;
}
.brand__products::before {
  position: absolute;
  content: "";
  width: 82%;
  margin: 0 auto 2cqw;
  top: 1.6%;
  left: 9%;
  height: 100%;
  background-color: #000;
}

.brand__detail-title {
  position: relative;
  font-size: 5.5cqw;
  text-align: right;
  width: 82%;
  left: 9%;
  padding-right: 3%;
}
.brand__detail-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 44%;
  width: 100%;
  height: 11.5cqw;
  transform: translateY(-50%);
  background: url("../images/decoration-tab-black.png") left center/contain no-repeat;
}
.brand__detail-title span {
  background: url("../images/profile-footer-stripes.png") left center/contain no-repeat;
  z-index: 1;
  width: 64.5%;
  padding: 0 3% 0 0;
  position: relative;
  display: block;
  margin: 0 0 0 auto;
}

.detail-cards {
  display: grid;
  gap: 5.8cqw;
  width: 88%;
  margin: 0 auto 8cqw;
}

.detail-card {
  position: relative;
  color: var(--ink);
  text-align: left;
  margin-left: -2%;
  margin-right: 8%;
}

.detail-card--tube {
  aspect-ratio: 955/1480;
}

.detail-card--lotion {
  aspect-ratio: 955/1548;
  margin-right: -2%;
  margin-left: 8%;
}

.detail-card--cream {
  aspect-ratio: 955/1614;
}

.detail-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.detail-card h4 {
  position: absolute;
  left: 52%;
  width: 46%;
  margin: 0;
  font-size: 3.5cqw;
  font-weight: 600;
  line-height: 1.4;
}

.detail-card__description {
  position: absolute;
  left: 9.1%;
  width: 82%;
  margin: 0;
  font-size: 3cqw;
  font-weight: 300;
  line-height: 1.833;
}
.detail-card__description .detail-card__footnote {
  font-size: 64%;
  vertical-align: super;
}

.detail-card > small {
  position: absolute;
  top: 51%;
  left: 7%;
  width: 86%;
  font-size: 1.7333cqw;
}

.detail-card__recommend {
  position: absolute;
  left: 7%;
  width: 86%;
  font-size: 3.2cqw;
  line-height: 1.833;
}
.detail-card__recommend strong {
  display: block;
  width: 82%;
  margin: 0 auto 0.6em;
  padding: 0.35em 0.8em;
  color: #fff;
  font-weight: 800;
  font-size: 1.05em;
  text-align: center;
}
.detail-card__recommend ul {
  margin: 0;
  padding-left: 1.2em;
  list-style-type: none;
}
.detail-card__recommend ul li {
  position: relative;
  width: 93%;
  padding-left: 6%;
}
.detail-card__recommend ul li::before {
  background: url("../images/decoration-star-blue.png") center/100% 100% no-repeat;
  content: "";
  left: 0;
  top: 0.5em;
  width: 3cqw;
  height: 3cqw;
  position: absolute;
}

.detail-card > a {
  position: absolute;
  bottom: 10cqw;
  left: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  width: 76%;
  height: 8.5%;
  padding: 0 1.6em;
  background: var(--acid);
  color: var(--ink);
  font-size: 3.7cqw;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 0.6cqw;
  letter-spacing: 0.1em;
  box-shadow: 0.4cqw 0.4cqw 0 var(--ink);
}

.detail-card--tube h4 {
  top: 13%;
}
.detail-card--tube .detail-card__description {
  top: 32.8%;
}
.detail-card--tube .detail-card__recommend {
  top: 51.5%;
}

.detail-card--lotion h4 {
  top: 13%;
}

.detail-card--cream h4 {
  top: 12.5%;
}

.detail-card--lotion .detail-card__description {
  top: 32.3%;
}

.detail-card--cream .detail-card__description {
  top: 31.5%;
}

.detail-card--lotion .detail-card__recommend {
  top: 53.4%;
}

.detail-card--cream h4 {
  top: 11.2%;
}
.detail-card--cream > small {
  top: 44%;
  left: 10%;
  font-size: 2.4cqw;
}
.detail-card--cream .detail-card__recommend {
  top: 55.7%;
}

.usage-card {
  position: relative;
  width: 82%;
  margin: 0 auto 2cqw;
}
.usage-card > img {
  width: 100%;
}

.usage-card__text {
  position: absolute;
  left: 38%;
  width: 55%;
  text-align: left;
}

.usage-card__text--1 {
  top: 14.9%;
}

.usage-card__text--2 {
  top: 35.8%;
}

.usage-card__text--3 {
  top: 56.7%;
}

.usage-card__text span {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0 4.9cqw;
  font-size: 2.5cqw;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  display: block;
  margin: 1em 0;
}
.usage-card__text p {
  margin: 0.5em 0 0;
  font-size: 2.9cqw;
  line-height: 1.8;
}

.usage-card__plus-label {
  position: absolute;
  top: 93.2%;
  width: 35%;
  font-size: 3cqw;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transform: translate(-50%, -50%);
}

.usage-card__plus-label--pack {
  left: 26%;
}

.usage-card__plus-label--mask {
  left: 74.5%;
}

.brand__footnote {
  width: 90%;
  margin: -7.3cqw auto -17.2cqw;
  z-index: 1;
  position: relative;
}
.brand__footnote img {
  width: 23%;
}
.brand__footnote p {
  margin: 0 0 1cqw;
  font-size: 2.8cqw;
  line-height: 2.1;
  font-feature-settings: "palt";
}

/* HOW TO */
.howto {
  z-index: 2;
  padding: 16cqw 0 13cqw;
  overflow: visible;
}
.howto__period {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5cqw;
  margin-bottom: 4cqw;
}
.howto__period img {
  width: 80%;
}

.howto__period-label {
  align-self: flex-start;
  display: inline-block;
  margin: 0 0 0 10%;
  padding: 0.9em 7em 0.9em 0.7em;
  background: url("../images/campaign-period-label.png") center/100% 75% no-repeat;
  color: var(--ink);
  font-size: 3.2cqw;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.howto__card {
  position: relative;
  width: 90%;
  margin: 0 auto;
}
.howto__card > img {
  width: 100%;
}

.howto__step {
  position: absolute;
  left: 10%;
  width: 80%;
  text-align: center;
}
.howto__step p {
  margin: 0;
  font-size: 3.6cqw;
  line-height: 1.7;
  font-weight: 600;
}

.howto__step--1 {
  top: 15%;
}

.howto__step--2 {
  top: 68.5%;
}

.howto__buy {
  position: absolute;
  top: 45%;
  left: 21%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56%;
  height: 8%;
  border: 0.35cqw solid var(--ink);
  border-radius: 0.6cqw;
  background: var(--acid);
  color: var(--ink);
  box-shadow: 0.7cqw 0.7cqw 0 var(--ink);
  font-size: 4.5333cqw;
  font-weight: 500;
  text-decoration: none;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}

.howto__character {
  position: absolute;
  right: 9%;
  bottom: -11.5cqw;
  z-index: 3;
  width: 20%;
}

/* PRODUCT 02 */
.product--repeat {
  min-height: 522.4cqw;
  padding-top: 9.5cqw;
}

/* PROFILE */
.profile {
  padding: 7cqw 0 8cqw;
}
.profile-card {
  position: relative;
  width: 98%;
  margin: 0 auto 3.5cqw 2%;
}
.profile-card > img {
  width: 100%;
}
.profile-card:last-child {
  margin-top: 7cqw;
}

.profile-card__content {
  position: absolute;
  top: 44%;
  left: 15.1%;
  width: 66.7%;
  text-align: center;
}
.profile-card__content h3 {
  margin: 0 0 0.6em;
  color: #fff;
  font-size: 4.8cqw;
  line-height: 1.4;
}
.profile-card__content p {
  margin: 0;
  color: #fff;
  font-size: 3.25cqw;
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  font-feature-settings: "palt";
  letter-spacing: 1px;
}

.profile-card--chronoreverse .profile-card__content {
  top: 50%;
}

.profile-card__socials {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5cqw;
  margin-top: 3.5cqw;
}
.profile-card__socials a {
  color: #fff;
  font-size: 6cqw;
  line-height: 1;
  text-decoration: none;
}
.profile-card__socials img {
  width: 9cqw;
}
.profile-card__socials img.icon-x {
  width: 6.5cqw;
}

/* ATTENTION: ソースは全展開、JS初期化後のみhiddenで閉じる */
.attention {
  min-height: 1059cqw;
  padding: 9cqw 0 8cqw;
}

.js .attention {
  min-height: 0;
}
.js .attention.is-all-open {
  min-height: 1058.6667cqw;
}

.terms-item {
  width: 88.8%;
  margin: 0 auto 4cqw;
  background: #fff;
  color: #273035;
}
.terms-item h3 {
  margin: 0;
}

.terms-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 12cqw;
  padding: 2.2cqw 8cqw;
  border: 0;
  background: #fff;
  color: var(--ink);
  font-size: 3.3cqw;
  font-weight: 700;
  line-height: 1.4;
  cursor: default;
}
.terms-trigger:not(:disabled) {
  cursor: pointer;
}
.terms-trigger:disabled {
  cursor: default;
}
.terms-trigger:focus-visible {
  outline: 0.4cqw solid var(--ink);
  outline-offset: -0.7cqw;
}

.terms-trigger__icon {
  position: absolute;
  right: 6%;
  display: block;
  width: 4cqw;
  height: 4cqw;
}

.terms-trigger:disabled .terms-trigger__icon {
  display: none;
}

.terms-trigger__icon::before, .terms-trigger__icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5.6cqw;
  height: 1px;
  background: var(--ink);
  content: "";
  transform: translate(-50%, -50%);
}

.terms-trigger[aria-expanded=false] .terms-trigger__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.terms-panel {
  padding-block: 0 6cqw;
  padding-inline: 5.3333cqw;
  font-size: 3.2cqw;
  line-height: 1.73;
}

.terms-panel h4 {
  margin: 5.4cqw 0 -0.45em;
  color: #0079A3;
  font-size: 1em;
}
.terms-panel h4:first-child {
  margin-top: 0;
}
.terms-panel p {
  margin: 0.25em 0 0;
}
.terms-panel ul {
  margin: 0.25em 0 0;
  padding-left: 1.25em;
}
.terms-panel li + li {
  margin-top: 0.4em;
}

.privacy-card .terms-panel h4 {
  margin: 2.8cqw 0 0.45em;
}
.privacy-card .terms-panel h4:first-child {
  margin-top: 0;
}
.privacy-card .terms-panel p {
  margin-top: 0.3em;
  line-height: 1.6;
  font-size: 3.2cqw;
  font-weight: 300;
}
.privacy-card .terms-panel {
  padding-bottom: 7cqw;
}

/* CONTACT */
.contact {
  padding: 10cqw 0 25cqw;
  text-align: center;
}
.contact__office {
  width: 88%;
  margin: 5cqw auto 7cqw;
}

.contact__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82%;
  margin: 3cqw auto;
}
.contact__divider img {
  width: 3%;
  min-width: 10px;
}
.contact__divider span {
  flex: 1;
  height: 1px;
  margin: 0 2%;
  background: #fff;
}

.contact__mail {
  display: inline-block;
  margin-bottom: 3cqw;
  color: #fff;
  font-size: 4.2667cqw;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.contact__hours {
  margin: 0 0 2.5cqw;
  color: #fff;
  font-size: 2.9333cqw;
  line-height: 1.7;
  font-feature-settings: "palt";
  text-align: left;
  width: 75%;
  margin: 0 auto;
}

.contact__copyright {
  margin: 3cqw 0 6cqw;
  color: #fff;
  font-size: 2.2667cqw;
}

.contact__banner {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
}
.contact__banner img {
  display: block;
  width: 100%;
}

.contact__banner-link {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
}
.contact__banner-link--white {
  left: 33%;
  width: 33%;
}
.contact__banner-link--black {
  left: 66%;
  width: 34%;
}

.js .contact__banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
  pointer-events: none;
}
.js .contact__banner.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

@media (min-width: 501px) {
  body {
    background-color: var(--blue);
    background-image: url("../images/background-circuit-outline.png");
    background-position: center top;
    background-size: 1122px auto;
  }
  .lp-shell {
    width: 500px;
    box-shadow: 0 0 0 1px rgba(17, 22, 22, 0.08);
  }
  .js .attention {
    min-height: 0;
  }
}
@media (min-width: 1280px) {
  .desktop-side {
    position: fixed;
    inset-block: 0;
    z-index: 1;
    display: block;
    width: calc((100vw - 500px) / 2);
    min-width: 0;
    overflow: hidden;
    background-color: var(--blue);
    background-image: url("../images/background-circuit-outline.png");
    background-position: center;
    background-size: cover;
  }
  .desktop-side::before {
    content: "";
    position: absolute;
    inset: -1.5% 0 0 -1.5%;
    width: 50%;
    height: 50%;
    background-image: url("../images/decoration-circuit-corner-white.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
  }
  .desktop-side::after {
    content: "";
    position: absolute;
    right: -1.5%;
    bottom: -1.5%;
    width: 50%;
    height: 50%;
    background-image: url("../images/decoration-circuit-frame-white.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
  }
  .desktop-side--left {
    left: 0;
  }
  .desktop-side--right {
    right: 0;
  }
  .desktop-side--right::before {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    width: 90%;
    height: 10%;
    background-image: url("../images/decoration-leftbottom.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
  }
  .desktop-side--right::after {
    content: "";
    position: absolute;
    left: 1%;
    bottom: 1%;
    width: 97%;
    height: 50%;
    background-image: url("../images/decoration-righttop.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
  }
  .desktop-left__inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100%, 880px);
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .desktop-left__logos {
    width: 72%;
    margin: 0 auto 2vh;
  }
  .desktop-left__characters {
    width: 76%;
    margin: 0 auto 1vh;
  }
  .desktop-left__lead {
    margin: 0 0 -1.8cqw 2.2cqw;
    font-size: clamp(12px, 1.05vw, 29px);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    z-index: 1;
    position: relative;
    color: #fff;
    font-size: 0.8cqw;
  }
  .desktop-left__lead strong {
    font-size: 1.3em;
    color: var(--blue);
    margin-left: 0.2em;
  }
  .desktop-left__gift {
    width: 84%;
    margin: 0 auto 1.5vh;
  }
  .desktop-left__buttons {
    display: flex;
    gap: 12%;
    justify-content: center;
    width: 84%;
    margin: -4.7cqw auto 0;
  }
  .desktop-left__buttons a {
    width: 32%;
  }
  .vertical-brand {
    right: -1.1vw;
    position: absolute;
    bottom: calc(50% - 20.5cqw);
    margin: 0;
    font-family: "Zen Dots", sans-serif;
    font-size: 1.8cqw;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    color: #fff;
  }
  .desktop-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: min(78%, 430px);
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .desktop-menu a {
    position: relative;
    padding: clamp(7px, 0.6vw, 16px) clamp(14px, 1.25vw, 34px);
    border-bottom: 1px solid #FFF;
    font-family: "Unbounded", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 0.9vw, 24px);
    letter-spacing: 0.04em;
    text-decoration: none;
    text-align: center;
    width: 70%;
    margin-left: 15%;
  }
  .desktop-menu a::before {
    position: absolute;
    bottom: -0.3em;
    left: -1.7em;
    content: "";
    width: 0.6em;
    height: 0.6em;
    background: url("../images/decoration-star-yellow-small.png") center/100% 100% no-repeat;
  }
  .desktop-menu a::after {
    position: absolute;
    bottom: -0.3em;
    right: -1.7em;
    content: "";
    width: 0.6em;
    height: 0.6em;
    background: url("../images/decoration-star-yellow-small.png") center/100% 100% no-repeat;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}/*# sourceMappingURL=style.css.map */