@charset "UTF-8";

/* ========================================================
                      * Variable *
========================================================= */
:root {
  --pw: 1600; /* PC幅 */
  --sw: 750; /* SP幅 */
  --artboard-pw: 600; /* PCアートボード幅 */
  --artboard-sw: 750; /* SPアートボード幅 */
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);

  --base-font-color: #7a655e;
  --color-yellow: #fff8d7;
  --color-yellow-light: #fffcef;
  --color-yellow-dark: #efd873;
  --color-pink: #ffebeb;
  --color-pink-light: #fff7f7;
  --color-pink-dark: #ffadad;
  --lp-background-color: var(--color-yellow-light);

  --lp-font-ja: helvetica-neue-lt-pro, hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;

  --icon-arrow-down: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2023%2013%22%3E%3Cpath%20d%3D%22m21.5%201.5-10%2010-10-10%22%20style%3D%22fill%3Anone%3Bstroke%3A%237a655e%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A3px%22%2F%3E%3C%2Fsvg%3E');
}

@media (768px <= width) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}
@media (1600px <= width) {
  :root {
    --variable: 1px;
  }
}
@media (width < 768px) {
  :root {
    --ratio: 1;
    --variable: calc(100vw / var(--sw));
  }
}

/* ========================================================
                      * Layout style *
========================================================= */
/* html {
  scroll-behavior: smooth;
  font-size: 62.5%
} */
main {
  max-width: 100%;
}

@media (768px <= width) {
  #Wrap,
  .wrapBottom,
  .wrapTop,
  #Contents {
    width: 100%;
  }
}
#FooterWrap {
  position: relative;
}


/* ===================
  Animation
=================== */
.fade {
  opacity: 0;
  transition: opacity 1.8s var(--transition-timing);
  &.is-active {
    opacity: 1;
  }
  &.--delay {
    transition-duration: 2s;
    transition-delay: .2s;
  }
}

.bounce-in {
  opacity: 0;
  will-change: opacity, transform;;
  &.is-active {
    animation: bounce 0.8s cubic-bezier(0.42, 0, 0.36, 0.91) forwards;
  }
}

/* keyframes */
@keyframes bounce {
  0% {
    opacity: 0;
    transform: translateY(calc(20 * var(--rem)));
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: translateY(calc(-10 * var(--rem)));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(-15deg);
  }
  10% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-15deg);
  }
  20% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}


/* ===================
  LP Contents
=================== */
.lp_contents {
  --letter-spacing: .15em;
  position: relative;
  background: var(--lp-background-color, transparent);
  color: var(--base-font-color, #000);
  font-family: var(--lp-font-ja);
  /* font-weight: 400; */
  font-weight: normal;
  font-size: calc(24 * var(--rem));
  font-style: normal;
  letter-spacing: var(--letter-spacing);
  & * {
    font-feature-settings: "palt";
  }
  & *,
  & *:before,
  & *:after {
    box-sizing: border-box;
  }
  & :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, a, button, figure, figcaption, span, sup) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }
  & ul,
  & li {
    list-style: none;
  }
  & :where(img) {
    display: block;
    width: 100%;
    height: auto;
  }
  & sup {
    top: 0;
    font-size: .6em;
    vertical-align: super;
  }
  & :where(a, a:before, a:after, a img, button) {
    --duration: .3s;
    --timing: ease-in-out;
    transition:
      opacity var(--duration) var(--timing),
      color var(--duration) var(--timing),
      background-color var(--duration) var(--timing),
      background-image var(--duration) var(--timing),
      border-color var(--duration) var(--timing),
      text-shadow var(--duration) var(--timing),
      text-weight var(--duration) var(--timing)
    ;
  }
  & :where(a) {
    color: inherit;
    text-decoration: none;
    text-underline-offset: calc(4 * var(--rem));
    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
    @media (width < 768px) {
      &:hover {
        opacity: 1;
      }
    }
  }
  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
}


/* ===================
  Layout
=================== */
.layout-mobile-first {
  position: relative;
  @media (768px <= width) {
    display: flex;
  }
}
.layout-mobile-first__left,
.layout-mobile-first__right {
  position: relative;
  width: calc((100% - (var(--artboard-pw) * var(--rem-pc))) / 2);
}
.layout-mobile-first__sticky {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.layout-mobile-first__main {
  overflow-x: clip;
  /* padding-block: calc(195 * var(--rem)) calc(120 * var(--rem)); */
  /* background: url(../img/bg_1.jpg) no-repeat top center/100% auto; */
  @media (768px <= width) {
    width: calc(var(--artboard-pw) * var(--rem-pc));
  }
}


/* ===================
  Utility
=================== */


/* ===================
  Component
=================== */
/* button */
.component-button {
  --distance: 6;
  position: relative;
  display: block;
  width: var(--width, calc(300 * var(--rem)));
  height: var(--height, calc(70 * var(--rem)));
  &::before {
    position: absolute;
    top: calc(var(--distance) * var(--rem));
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff8888;
    border-radius: calc(999 * var(--rem));
    content: '';
  }
  &:hover {
    opacity: 1;
    .component-button__inner {
      translate: 0 calc(var(--distance) * var(--rem));
    }
  }
}
.component-button__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-pink-dark);
  border-radius: calc(999 * var(--rem));
  color: #fff;
  font-size: calc(34 * var(--rem));
  transition: translate 0.3s ease-in-out;
  will-change: translate;
  &::after {
    display: block;
    width: calc(14 * var(--rem));
    height: calc(24 * var(--rem));
    margin-left: calc(22 * var(--rem));
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2024%22%3E%3Cpath%20d%3D%22m2%202%2010%2010L2%2022%22%20style%3D%22fill%3Anone%3Bstroke%3A%23fff%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A4px%22%2F%3E%3C%2Fsvg%3E') no-repeat top left/100%;
    content: '';
  }
  .--small {
    margin-bottom: calc(-8 * var(--rem));
    font-size: calc(26 * var(--rem));
  }
  .--large {
    font-size: calc(36 * var(--rem));
  }
  & span {
    letter-spacing: .15em;
    line-height: 1.6;
  }
}

.component-button--cart {
  --width: calc(220 * var(--rem));
  --height: calc(55 * var(--rem));
  --distance: 5;
  .component-button__inner {
    flex-direction: row-reverse;
    font-size: calc(20 * var(--rem));
    font-weight: bold;
    &::after {
      width: calc(30 * var(--rem));
      height: calc(26 * var(--rem));
      margin-right: calc(10 * var(--rem));
      margin-left: 0;
      background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22txt%22%20viewBox%3D%220%200%2030%2025.66%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M30%207.09C30%203.18%2026.82%200%2022.9%200s-7.09%203.18-7.09%207.09c0%20.3.03.6.06.89H7.05l-.56-3.02c-.09-.48-.52-.83-1-.83H1.02C.45%204.13%200%204.59%200%205.15s.45%201.02%201.02%201.02h3.63l2.57%2013.69c-.5.61-.81%201.38-.81%202.24%200%201.96%201.6%203.56%203.56%203.56s3.49-1.54%203.55-3.46h4.04c.05%201.91%201.62%203.46%203.55%203.46s3.56-1.6%203.56-3.56c0-.81-.28-1.55-.74-2.15l1.24-6.13c2.81-.94%204.85-3.6%204.85-6.73Zm-7.1-5.06c2.79%200%205.06%202.27%205.06%205.06s-2.27%205.06-5.06%205.06-5.06-2.27-5.06-5.06%202.27-5.06%205.06-5.06M9.96%2023.62a1.52%201.52%200%201%201-.001-3.039%201.52%201.52%200%200%201%20.001%203.039m11.14%200a1.52%201.52%200%201%201-.001-3.039%201.52%201.52%200%200%201%20.001%203.039m.99-4.92c-.32-.09-.64-.16-.99-.16-1.25%200-2.34.65-2.98%201.62h-5.18a3.57%203.57%200%200%200-2.98-1.62c-.31%200-.61.05-.9.13l-1.63-8.65h9.02c1.12%202.45%203.59%204.17%206.45%204.17h.09l-.91%204.52Z%22%20class%3D%22cls-1%22%2F%3E%3Cpath%20d%3D%22M20.46%208.11h1.42v1.42c0%20.56.46%201.02%201.02%201.02s1.02-.46%201.02-1.02V8.11h1.42c.56%200%201.02-.46%201.02-1.02s-.46-1.02-1.02-1.02h-1.42V4.65c0-.56-.46-1.02-1.02-1.02s-1.02.46-1.02%201.02v1.42h-1.42c-.56%200-1.02.46-1.02%201.02s.46%201.02%201.02%201.02%22%20class%3D%22cls-1%22%2F%3E%3C%2Fsvg%3E') no-repeat top left/100%;
    }
  }
}

/* balloon */
.component-balloon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--width, calc(640 * var(--rem)));
  height: var(--height);
  margin-inline: auto;
  background: var(--bg-color);
  border-radius: 999px;
  &.--white {
    --bg-color: #fffdf9;
    --tri-width: calc(30 * var(--rem));
    --tri-height: calc(34 * var(--rem));
    --tri-image: url(../img/balloon_tri_1.png);
  }
  &::after {
    position: absolute;
    bottom: calc(2 * var(--rem));
    left: 50%;
    width: var(--tri-width);
    height: var(--tri-height);
    background: var(--tri-image) no-repeat top left/100%;
    content: '';
    translate: -50% 100%;
  }
}
.component-balloon--primary {
  --height: calc(100 * var(--rem));
  --tri-width: calc(30 * var(--rem));
  --tri-height: calc(34 * var(--rem));
  border: calc(2 * var(--rem)) solid currentColor;
  &.--yellow {
    --bg-color: var(--color-yellow);
    --tri-image: url(../img/balloon_tri_2.png);
  }
  &.--pink {
    --bg-color: var(--color-pink);
    --tri-image: url(../img/balloon_tri_3.png);
  }
}
.component-balloon--secondary {
  --height: calc(80 * var(--rem));
  --tri-width: calc(30 * var(--rem));
  --tri-height: calc(34 * var(--rem));
  &.--pink {
    --bg-color: var(--color-pink-dark);
    --tri-image: url(../img/balloon_tri_4.png);
    color: #fff;
  }
  &.--yellow {
    --bg-color: var(--color-yellow-dark);
    --tri-image: url(../img/balloon_tri_5.png);
    color: #fff;
  }
}
.component-balloon__text {
  font-size: calc(32 * var(--rem));
  line-height: calc(40 / 32);
  letter-spacing: .15em;
  text-align: center;
  &.--en {
    margin-bottom: calc(20 * var(--rem));
    font-size: calc(26 * var(--rem));
  }
  &.--large {
    font-size: calc(36 * var(--rem));
    line-height: calc(54 / 36);
  }
}

/* marker */
.component-marker {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: calc(-8 * var(--rem));
  text-decoration-color: var(--marker-color);
  text-decoration-thickness: calc(16 * var(--rem));
  letter-spacing: .15em;
  &.--pink {
    --marker-color: #ffcccc;
  }
  &.--yellow {
    --marker-color: #f7e38d;
  }
}

/* % off */
.component-off {
  width: calc(64 * var(--rem));
  height: calc(74 * var(--rem));
  padding-top: calc(12 * var(--rem));
  background: url(../img/bg_off.png) no-repeat top left/100%;
  font-size: calc(22 * var(--rem));
  font-weight: bold;
  line-height: .95;
  letter-spacing: .05em;
  text-align: center;
  .--small {
    font-size: calc(14 * var(--rem));
    vertical-align: middle;
  }
}


/* ===================
  Modal
=================== */
/* body.is-modal-open {
  overflow: hidden;
  scrollbar-gutter: stable;
  } */
  .project-modal {
  --backdrop-rgb: 255, 247, 247;
  --backdrop-alpha: 0.8;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: auto;
  background: none;
  border: none;
  color: var(--base-font-color);
  opacity: 0;
  scale: 0.95;
  /* overflow: visible; */
  transition: opacity .3s, scale .3s;
  will-change: opacity, scale;
  &.is-open {
    opacity: 1;
    scale: 1;
  }
  &.is-closing {
    animation: fade-out 0.3s ease-out forwards;
  }
  &.is-closing::backdrop {
    animation: fade-out-backdrop 0.3s ease-out forwards;
  }
}
dialog::backdrop {
  background-color: rgba(var(--backdrop-rgb), 0);
  cursor: pointer;
  transition: background-color 0.3s;
  will-change: background-color;
}
dialog.is-open::backdrop {
  background-color: rgba(var(--backdrop-rgb), var(--backdrop-alpha));
}
@keyframes fade-out {
  from {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 0.95;
  }
}
@keyframes fade-out-backdrop {
  from { background-color: rgba(var(--backdrop-rgb), var(--backdrop-alpha)); }
  to { background-color: rgba(var(--backdrop-rgb), 0); }
}

.project-modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(710 * var(--rem));
  max-width: 100vw;
  max-height: calc(100dvh - (60 * var(--rem)));
  /* background-color: #fff; */
  translate: -50% -50%;
  transition: transform 0.3s ease-out;
  overflow-y: scroll;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.project-modal__close-button {
  position: absolute;
  top: calc(30 * var(--rem));
  right: calc(30 * var(--rem));
  z-index: 10;
  width: calc(60 * var(--rem));
  height: calc(60 * var(--rem));
  border: none;
  cursor: pointer;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(85 * var(--rem));
    height: 1px;
    background-color: var(--color, var(--base-font-color));
  }
  &::before {
    translate: -50% -50%;
    rotate: 45deg;
  }
  &::after {
    translate: -50% -50%;
    rotate: -45deg;
  }
}


/* ===================
  .project-modal-content
=================== */
.project-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: calc(140 * var(--rem)) calc(140 * var(--rem));
  background: #fff;
  border-radius: calc(40 * var(--rem));
}

.section-modal {
  & + & {
    margin-top: calc(140 * var(--rem));
  }
}



.project-main {
  background: #fff;
}

/**
 * project-mainvisual
 */
.project-mainvisual {
  aspect-ratio: 750 / 1000;
  background: var(--color-yellow-light);
}
.project-mainvisual__inner {
  position: relative;
  display: block;
}
.project-mainvisual__label {
  --width: calc(600 * var(--rem));
  position: absolute;
  top: calc(90 * var(--rem));
  left: 50%;
  flex-direction: row;
  translate: -50% 0;
  &.is-active {
    animation-delay: .7s;
  }
}
.project-mainvisual__label-text {
  font-size: calc(29 * var(--rem));
  letter-spacing: 0.1em;
  .--bold {
    font-size: calc(40 * var(--rem));
    font-weight: bold;
  }
  .--small {
    font-size: calc(26 * var(--rem));
  }
}
.project-mainvisual__label-x {
  display: block;
  width: calc(26 * var(--rem));
  height: calc(26 * var(--rem));
  margin-left: calc(18 * var(--rem));
  margin-right: calc(21 * var(--rem));
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22_%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20data-name%3D%22%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%237a655e%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A3px%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22m1.5%201.5%2026%2026M1.5%2027.5l26-26%22%20class%3D%22cls-1%22%2F%3E%3C%2Fsvg%3E') no-repeat top left/100%;
}
.project-mainvisual__badge {
  position: absolute;
  top: calc(243 * var(--rem));
  left: calc(59 * var(--rem));
  width: calc(160 * var(--rem));
  &.--after {
    top: calc(228 * var(--rem));
  }
}
.project-mainvisual__badge {
  top: calc(263 * var(--rem));
  left: calc(60 * var(--rem));
  &.--after {
    top: calc(248 * var(--rem));
  }
}
.project-mainvisual__heading {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(258 * var(--rem));
  padding-top: calc(71 * var(--rem));
  padding-left: calc(8 * var(--rem));
  text-align: center;
  &.--secondary {
    top: 0;
    bottom: auto;
    height: auto;
    padding-top: calc(50 * var(--rem));
    padding-left: 0;
    color: #fffcef;
    .project-mainvisual__heading-main {
      margin-left: calc(8 * var(--rem));
    }
    .project-mainvisual__heading-sub {
      margin-top: calc(29 * var(--rem));
      margin-left: calc(4 * var(--rem));
    }
  }
}
.project-mainvisual__heading-logo {
  width: calc(197 * var(--rem));
  margin-inline: auto;
  margin-bottom: calc(35 * var(--rem));
}
.project-mainvisual__heading-main {
  font-size: calc(52 * var(--rem));
  line-height: 1;
  letter-spacing: 0.15em;
}
.project-mainvisual__heading-sub {
  margin-top: calc(28 * var(--rem));
  font-size: calc(24 * var(--rem));
}


/**
 * section-intro
 */
.section-intro {
  padding-top: calc(107 * var(--rem));
  padding-bottom: calc(101 * var(--rem));
  background: var(--color-yellow-light);
}
.section-intro__text {
  font-size: calc(28 * var(--rem));
  line-height: calc(57 / 28);
  letter-spacing: 0.15em;
  text-align: center;
  & + & {
    margin-top: calc(30 * var(--rem));
  }
  &.--only {
    line-height: calc(73 / 32);
  }
  .--bold {
    font-size: calc(32 * var(--rem));
    font-weight: bold;
    line-height: 1;
    letter-spacing: .15em;
  }
}


/**
 * section-anchor
 */
.section-anchor {
  padding-top: calc(140 * var(--rem));
}
.section-anchor__heading {
  --height: calc(158 * var(--rem));
  margin-bottom: calc(79 * var(--rem));
}


/**
 * project-anchor
 */
.project-anchor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(48 * var(--rem)) calc(38 * var(--rem));
}
.project-anchor__item {
  position: relative;
  width: calc(322 * var(--rem));
  &::before {
    position: absolute;
    top: calc(9 * var(--rem));
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--base-font-color);
    border-radius: calc(40 * var(--rem));
    content: '';
  }
}
.project-anchor__item-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(436 * var(--rem));
  padding-top: calc(41 * var(--rem));
  background: var(--color-yellow-light);
  border: calc(2 * var(--rem)) solid var(--base-font-color);
  border-radius: calc(40 * var(--rem));
  transition: translate 0.3s ease-in-out;
  will-change: translate;
  &:hover {
    opacity: 1;
    translate: 0 calc(9 * var(--rem));
  }
  &::after {
    content: '';
    display: block;
    width: calc(22 * var(--rem));
    height: calc(12 * var(--rem));
    margin-top: calc(13 * var(--rem));
    margin-inline: auto;
    background: var(--icon-arrow-down) no-repeat top left/100%;
  }
}
.project-anchor__thumb {
  width: calc(var(--width) * var(--rem));
  margin-inline: auto;
}
.project-anchor__text {
  margin-top: calc(25 * var(--rem));
  font-size: calc(22 * var(--rem));
  font-weight: bold;
  line-height: calc(33 / 22);
  letter-spacing: 0.15em;
  text-align: center;
}


/**
 * section-staff
 */
.section-staff {
  padding-top: calc(140 * var(--rem));
}


/**
 * staff-info
 */
.staff-info__container {
  padding-top: calc(159 * var(--rem));
  .section-staff--2 & {
    padding-top: calc(155 * var(--rem));
  }
  .section-staff--3 & {
    padding-top: calc(196 * var(--rem));
  }
  .section-staff--4 & {
    padding-top: calc(148 * var(--rem));
  }
}
.staff-info {
  display: flex;
  flex-direction: column;
  width: calc(680 * var(--rem));
  margin-inline: auto;
  padding-bottom: calc(24 * var(--rem));
  background: var(--bg-color);
  border-radius: calc(40 * var(--rem)) calc(40 * var(--rem)) 0 0;
  text-align: center;
  .--pink & {
    --bg-color: var(--color-pink);
  }
  .--yellow & {
    --bg-color: var(--color-yellow);
  }
}
.staff-info__thumb {
  width: calc(240 * var(--rem));
  margin-top: calc(-150 * var(--rem));
  margin-inline: auto;
  margin-bottom: calc(40 * var(--rem));
}
.staff-info__name {
  font-size: calc(24 * var(--rem));
  line-height: 1;
}
.staff-info__sns {
  margin-top: calc(19 * var(--rem));
}
.staff-info__sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--rem));
}
.staff-info__sns-icon {
  width: calc(40 * var(--rem));
}
.staff-info__sns-label {
  font-size: calc(20 * var(--rem));
  letter-spacing: .15em;
}


/**
 * answer-block
 */
.answer-block__container {
  padding-top: calc(80 * var(--rem));
  padding-bottom: calc(114 * var(--rem));
  background: var(--bg-color);
  .--pink & {
    --bg-color: var(--color-pink-light);
  }
  .--yellow & {
    --bg-color: var(--color-yellow-light);
  }
  .section-staff--2 & {
    padding-bottom: calc(74 * var(--rem));
  }
  .section-staff--4 & {
    padding-bottom: calc(121 * var(--rem));
  }
}
.answer-block {
  & + & {
    margin-top: calc(120 * var(--rem));
  }
}
.answer-block__heading {
  margin-bottom: calc(82 * var(--rem));
}
.answer-block__image {
  position: relative;
  z-index: 1;
  width: calc(564 * var(--rem));
  margin-inline: auto;
  border-radius: calc(40 * var(--rem));
  overflow: clip;
  transform: translateZ(0);
}
.answer-block__image-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(var(--width) * var(--rem));
  height: calc(160 * var(--rem));
  color: #fff;
  font-size: calc(36 * var(--rem));
  line-height: calc(54 / 36);
  transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1);
  will-change: transform;
  .answer-block:nth-child(odd) & {
    top: calc(50 * var(--rem));
    left: 0;
    border-radius: 0 calc(40 * var(--rem)) calc(40 * var(--rem)) 0;
    transform: translateX(-100%) translateZ(0);
    transition-delay: .2s;
  }
  .answer-block:nth-child(even) & {
    bottom: calc(50 * var(--rem));
    right: -1px;
    border-radius: calc(40 * var(--rem)) 0 0 calc(40 * var(--rem));
    transform: translateX(100%) translateZ(0);
    transition-delay: .4s;
  }
  .--pink & {
    background: rgba(255, 173, 173, 0.8);
  }
  .--yellow & {
    background: rgba(239, 216, 115, 0.8);
  }
  .answer-block__image.is-active & {
    transform: translateX(0) translateZ(0);
  }
}
.answer-block__image-label__body {
  letter-spacing: .15em;
}
.answer-block__image-label__body--1_2 {
  margin-left: calc(14 * var(--rem));
}
.answer-block__image-label__body--2_1 {
  margin-right: calc(26 * var(--rem));
}
.answer-block__body {
  width: calc(680 * var(--rem));
  margin-top: calc(-60 * var(--rem));
  margin-inline: auto;
  padding-top: calc(107 * var(--rem));
  padding-bottom: calc(44 * var(--rem));
  background: var(--bg) no-repeat top left/cover, #fff;
  border: calc(2 * var(--rem)) solid var(--border-color);
  border-radius: 0 0 calc(40 * var(--rem)) calc(40 * var(--rem));
  .--pink & {
    --border-color: #ffcccc;
  }
  .--yellow & {
    --border-color: #f7e38d;
  }
}
.answer-block__body--1 {
  --bg: url(../img/bg_grid_1.png);
}
.answer-block__body--2 {
  --bg: url(../img/bg_grid_2.png);
  padding-bottom: calc(50 * var(--rem));
}
.answer-block__body--3 {
  --bg: url(../img/bg_grid_3.png);
}
.answer-block__body--4 {
  --bg: url(../img/bg_grid_4.png);
}
.answer-block__body--5 {
  --bg: url(../img/bg_grid_5.png);
  .answer-block__body-text {
    letter-spacing: .13em;
    @supports (-webkit-app-region: inherit) {
      letter-spacing: .15em;
    }
  }
}
.answer-block__body--6 {
  --bg: url(../img/bg_grid_6.png);
}
.answer-block__body--7 {
  --bg: url(../img/bg_grid_7.png);
  padding-bottom: calc(49 * var(--rem));
  background-position-y: top calc(-2 * var(--rem));
}
.answer-block__body--8 {
  --bg: url(../img/bg_grid_8.png);
  padding-bottom: calc(50 * var(--rem));
}
.answer-block__body-text {
  width: calc(563 * var(--rem));
  margin-inline: auto;
  font-size: calc(24 * var(--rem));
  line-height: calc(48 / 24);
  letter-spacing: .15em;
  text-align: justify;
}


/**
 * deco-area
 */
.deco-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(30 * var(--rem));
  padding-top: calc(120 * var(--rem));
  .section-novelty & {
    padding-top: calc(139 * var(--rem));
  }
}
.deco-area__item {
  width: calc(100 * var(--rem));
  animation: shake steps(1) 3.5s infinite;
  &:nth-child(1) {
    animation-delay: 1s;
  }
  &:nth-child(2) {
    animation-delay: 1.6s;
  }
  &:nth-child(3) {
    animation-delay: 2.2s;
  }
}


/**
 * section-campaign
 */
.section-campaign {
  padding-top: calc(140 * var(--rem));
  padding-bottom: calc(140 * var(--rem));
}
.section-campaign__head {
  margin-bottom: calc(77 * var(--rem));
  margin-left: calc(4 * var(--rem));
  text-align: center;
}
.section-campaign__head-text {
  margin-bottom: calc(28 * var(--rem));
  font-size: calc(28 * var(--rem));
  line-height: 1;
  --marker-color: var(--color-pink);
  .component-marker {
    text-underline-offset: calc(-6 * var(--rem));
  }
}
.section-campaign__head-heading {
  margin-left: calc(6 * var(--rem));
  font-size: calc(64 * var(--rem));
  line-height: 1;
  letter-spacing: .15em;
}
.section-campaign__head-date {
  margin-top: calc(44 * var(--rem));
  font-size: calc(28 * var(--rem));
  line-height: 1;
  letter-spacing: .15em;
  .--small {
    display: inline-block;
    font-size: calc(24 * var(--rem));
    letter-spacing: .15em;
    translate: 0 calc(-2 * var(--rem));
  }
  .bracket {
    display: inline-block;
    translate: 0 calc(-2 * var(--rem));
  }
}


/**
 * buy-area
 */
.buy-area__heading {
  margin-bottom: calc(82 * var(--rem));
  font-weight: bold;
}
.buy-area__body {
  width: calc(680 * var(--rem));
  margin-inline: auto;
  padding-top: calc(60 * var(--rem));
  padding-inline: calc(35 * var(--rem));
  padding-bottom: calc(90 * var(--rem));
  background: var(--color-pink-light);
  border-radius: calc(40 * var(--rem));
}
.buy-area__body-bottom__note {
  margin-top: calc(30 * var(--rem));
  font-size: calc(20 * var(--rem));
  line-height: 1;
  letter-spacing: .15em;
  text-align: center;
}
.buy-area__body-bottom {
  margin-top: calc(121 * var(--rem));
  text-align: center;
}
.buy-area__body-bottom__label {
  --marker-color: var(--color-pink);
  margin-bottom: calc(47 * var(--rem));
  font-size: calc(28 * var(--rem));
  line-height: 1;
  letter-spacing: .15em;
}
.buy-area__body-bottom__text {
  margin-bottom: calc(29 * var(--rem));
  font-size: calc(32 * var(--rem));
  line-height: 1;
  letter-spacing: .15em;
}
.buy-area__body-bottom__main {
  margin-bottom: calc(50 * var(--rem));
  color: var(--color-pink-dark);
  font-size: calc(46 * var(--rem));
  font-weight: bold;
  line-height: 1;
  letter-spacing: .05em;
  .--large {
    font-size: calc(76 * var(--rem));
  }
}
.buy-area__body-bottom__button {
  margin-left: calc(4 * var(--rem));
  .component-button {
    --width: calc(600 * var(--rem));
    --height: calc(120 * var(--rem));
    --distance: 10;
  }
  .component-button__inner {
    flex-direction: column;
    padding-top: calc(4 * var(--rem));
    padding-left: calc(8 * var(--rem));
    font-weight: bold;
    &::after {
      position: absolute;
      top: 50%;
      right: calc(60 * var(--rem));
      translate: 0 -50%;
    }
  }
}


/**
 * product-list
 */
.product-list__item {
  display: flex;
  gap: calc(40 * var(--rem));
  & + & {
    margin-top: calc(40 * var(--rem));
  }
}
.product-list__item-image {
  flex-shrink: 0;
  width: calc(240 * var(--rem));
  height: calc(240 * var(--rem));
  background: #fff;
  border-radius: calc(30 * var(--rem));
  overflow: clip;
}
.product-list__item-body {
  position: relative;
  padding-top: calc(43 * var(--rem));
  &.--campaign {
    padding-top: calc(23 * var(--rem));
  }
  .component-off {
    position: absolute;
    top: calc(4 * var(--rem));
    right: 0;
  }
}
.product-list__item-price--before {
  margin-bottom: calc(16 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: 1;
  & s {
    position: relative;
    text-decoration: none;
    &::after {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      background: currentColor;
      content: '';
    }
  }
  .--small {
    font-size: calc(20 * var(--rem));
  }
}
.product-list__item-price__wrap {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--rem));
  .product-list__item-price {
    color: #ff8888;
  }
}
.product-list__item-price__arrow {
  width: calc(40 * var(--rem));
  height: calc(10 * var(--rem));
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2042%2010%22%3E%3Cpath%20d%3D%22M1%209h40L27.28%201%22%20style%3D%22fill%3Anone%3Bstroke%3A%237a655e%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A2px%22%2F%3E%3C%2Fsvg%3E') no-repeat top left/100%;
}
.product-list__item-price {
  font-size: calc(34 * var(--rem));
  font-weight: bold;
  line-height: 1;
  letter-spacing: .15em;
  .--small {
    font-size: calc(20 * var(--rem));
    letter-spacing: .15em;
  }
}
.product-list__item-text {
  margin-top: calc(26 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: 1;
}
.product-list__item-cart__wrap {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--rem));
  margin-top: calc(10 * var(--rem));
  .component-count {
    width: calc(90 * var(--rem));
    height: calc(60 * var(--rem));
    padding-left: calc(24 * var(--rem));
    border-color: var(--base-font-color);
    border-radius: calc(10 * var(--rem));
    color: var(--base-font-color);
    font-size: calc(24 * var(--rem));
    background: var(--icon-arrow-down) no-repeat center right calc(10 * var(--rem))/calc(15 * var(--rem)) calc(10 * var(--rem)), #fff;
    appearance: none;
    /* &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      appearance: none;
    } */
  }
}
.product-list__item-cart__button {
  width: calc(220 * var(--rem));
}


/**
 * section-novelty
 */
.section-novelty {
  padding-bottom: calc(129 * var(--rem));
}
.section-novelty__heading {
  margin-bottom: calc(82 * var(--rem));
  .component-balloon__text {
    margin-bottom: calc(4 * var(--rem));
    margin-left: calc(24 * var(--rem));
    font-size: calc(40 * var(--rem));
    letter-spacing: .15em;
  }
}
.section-novelty__message {
  margin-top: calc(72 * var(--rem));
  font-size: calc(36 * var(--rem));
  line-height: calc(54 / 36);
  letter-spacing: .15em;
  text-align: center;
}


/**
 * novelty-block
 */
.novelty-block {
  width: calc(680 * var(--rem));
  margin-inline: auto;
  padding-top: calc(80 * var(--rem));
  padding-bottom: calc(72 * var(--rem));
  background: var(--color-yellow-light);
  border-radius: calc(40 * var(--rem));
}
.novelty-block__list {
  display: flex;
  justify-content: center;
}
.novelty-block__list-text {
  margin-top: calc(124 * var(--rem));
  margin-left: calc(8 * var(--rem));
  color: var(--color-yellow-dark);
  font-size: calc(60 * var(--rem));
  line-height: 1;
  letter-spacing: .15em;
}
.novelty-block__item {
  width: calc(250 * var(--rem));
}
.novelty-block__item-image {
  width: calc(160 * var(--rem));
  margin-inline: auto;
}
.novelty-block__item-name {
  margin-top: calc(35 * var(--rem));
  color: var(--color-yellow-dark);
  font-size: calc(22 * var(--rem));
  line-height: calc(33 / 22);
  letter-spacing: .15em;
  text-align: center;
}

.novelty-block__body {
  margin-top: calc(64 * var(--rem));
  text-align: center;
}
.novelty-block__text {
  font-size: calc(24 * var(--rem));
  line-height: calc(42 / 24);
  letter-spacing: .15em;
}
.novelty-block__note {
  margin-top: calc(43 * var(--rem));
  font-size: calc(20 * var(--rem));
  line-height: calc(35 / 20);
  letter-spacing: .15em;
}


/**
 * section-bottom
 */
.section-bottom {
  position: relative;
}
.section-bottom__image {
  width: 100%;
}
.section-bottom__head {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: calc(80 * var(--rem));
  text-align: center;
}
.section-bottom__logo {
  width: calc(280 * var(--rem));
  margin-inline: auto;
}
.section-bottom__heading {
  margin-top: calc(50 * var(--rem));
  font-size: calc(32 * var(--rem));
  line-height: 1;
  letter-spacing: .15em;
}
.section-bottom__list {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: calc(40 * var(--rem));
  width: 100%;
  height: calc(236 * var(--rem));
  padding-top: calc(51 * var(--rem));
}
.section-bottom__item-price {
  margin-bottom: calc(11 * var(--rem));
  font-size: calc(21 * var(--rem));
  letter-spacing: .15em;
  text-align: center;
  .--large {
    font-size: calc(23 * var(--rem));
  }
  .--small {
    font-size: calc(20 * var(--rem));
  }
  & span {
    letter-spacing: .15em;
  }
}
.section-bottom__item-button {
  .component-button__inner {
    padding-left: calc(14 * var(--rem));
  }
}


/**
 * project-footer-nav
 */
.project-footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  opacity: 0;
  translate: 0 100%;
  transition: opacity 0.6s .2s ease, translate 0.6s .2s ease;
  will-change: opacity, translate;
  &.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}
.project-footer-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--rem));
  width: 100%;
  height: calc(120 * var(--rem));
  background: #ffcccc;
}
.project-footer-nav__label {
  width: calc(376 * var(--rem));
}
.project-footer-nav__label-text {
  margin-left: calc(9 * var(--rem));
  font-size: calc(24 * var(--rem));
  font-weight: bold;
  line-height: 1;
}
.project-footer-nav__label-arrow {
  display: block;
  width: calc(376 * var(--rem));
  height: calc(20 * var(--rem));
  margin-top: calc(-10 * var(--rem));
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20378%2020%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1%2019h376L346%201%22%20style%3D%22fill%3Anone%3Bstroke%3A%237a655e%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A2px%22%2F%3E%3C%2Fsvg%3E') no-repeat top left/100% 100%;
}
.project-footer-nav__button {
  margin-bottom: calc(4 * var(--rem));
  &:only-child {
    .component-button {
      --width: calc(400 * var(--rem));
    }
  }
  .component-button {
    --width: calc(280 * var(--rem));
    --height: calc(80 * var(--rem));
  }
  .component-button__inner {
    font-size: calc(34 * var(--rem));
    &::after {
      width: calc(50 * var(--rem));
      height: calc(43 * var(--rem));
      margin-right: calc(20 * var(--rem));
    }
  }
}


/**
 * section-bottom
 */
.project-logo-box {
  margin-top: calc(63 * var(--rem-pc));
  text-align: center;
}
.project-logo-box__main {
  font-size: calc(26 * var(--rem-pc));
  line-height: 1;
  letter-spacing: .15em;
}
.project-logo-box__sub {
  margin-top: calc(20 * var(--rem-pc));
  font-size: calc(12 * var(--rem-pc));
  line-height: 1;
  letter-spacing: .15em;
}


/**
 * project-nemu
 */
.project-nemu {
  margin-top: calc(60 * var(--rem-pc));
}
.project-nemu__label {
  margin-bottom: calc(30 * var(--rem-pc));
  font-size: calc(18 * var(--rem-pc));
  font-weight: bold;
  line-height: 1;
  letter-spacing: .15em;
}
.project-nemu__button {
  .component-button {
    --width: calc(188 * var(--rem-pc));
    --height: calc(44 * var(--rem-pc));
    --distance: 4;
    margin-inline: auto;
    &::before {
      top: calc(var(--distance) * var(--rem-pc));
    }
    &:hover {
      .component-button__inner {
        translate: 0 calc(var(--distance) * var(--rem-pc));
      }
    }
  }
  .component-button__inner {
    font-size: calc(16 * var(--rem-pc));
    &::after {
      width: calc(24 * var(--rem-pc));
      height: calc(21 * var(--rem-pc));
      margin-right: calc(10 * var(--rem-pc));
    }
  }
}



/*=======================================
               Responsive
========================================*/

/*=======================================
                    PC
========================================*/
@media (768px <= width) {
  .u-d-md {
    display: none !important;
  }
}


/*=======================================
                    SP
========================================*/
@media (width < 768px) {
  .u-d-lg {
    display: none !important;
  }
}