:root {
  /* font */
  --font-shuei-gothic: dnp-shuei-gothic-kin-std, sans-serif;
  --font-span: span, serif;
  --base-text-unit: 16;
  --rem-ratio: calc(1rem / var(--base-text-unit));
  --font-thin: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;
  --leading-initial: 1;
  --leading-tight: 1.3;
  --leading-snug: 1.5;
  --leading-normal: 1.7;
  --leading-relaxed: 1.8;
  --leading-loose: 2;
  --tracking-negative-tight: -0.02em;
  --tracking-negative-semitight: -0.01em;
  --tracking-tight: 0.02em;
  --tracking-normal: 0.05em;
  --tracking-medium: 0.07em;
  --tracking-loose: 0.1em;
  --tracking-relaxed: 0.12em;

  /* size */
  --scroll-width: 750;
  --base-width: 750;
  --all-looks-inner-width: 634;
  --rounded-xs: 2px;
  --rounded-s: 4px;
  --rounded-m: 8px;
  --rounded-sl: 10px;
  --rounded-l: 30px;

  /* color */
  --color-grayscale-0: #fff;
  --color-grayscale-1000: #000;
  --background-base: var(--color-grayscale-0);
  --font-base: var(--color-grayscale-1000);
  --border-base: var(--color-grayscale-1000);
  --background-beige: #f9f8f4;
  --background-gray: #f1f1f1;
  --background-modal: rgb(255 255 255 / 60%);
  --color-red: #eb1022;
  --color-black: var(--color-grayscale-1000);
  --color-white: var(--color-grayscale-0);
  --color-nav-default: #c9c9c9;
  --color-base-white: #f9f8f4;
  --color-data-heading: #929292;
  --switch-color1: #ccc6ba;
  --switch-color2: #a8a093;
  --switch-color3: #bac5cc;

  /* z-index */
  --back-z-index: -1;
  --default-z-index: 1;
  --front-z-index: 2;
  --menu-z-index: 3;
  --frontmost-z-index: 4;

  /* motion time */
  --speed-quick: 0.3s;
  --speed-normal: 0.5s;
  --speed-slow: 1s;
  --speed-over-slow: 2s;
}

@media screen and (min-width: 768px) {
  :root {
    --base-width: 1440;
    --base-height: 860;
    --all-looks-inner-width: 1323;
  }
}
* {
  box-sizing: border-box;
  min-inline-size: 0;
  border-width: 0;
  border-style: solid;
}

:where(:root) {
  background-color: var(--background-base);
  color: var(--font-base);
  font-family: var(--font-shuei-gothic);
  font-style: unset;
  font-size: 100%;
  font-weight: var(--font-normal);
  font-feature-settings: 'pkna';
  text-align: start;
  line-height: var(--leading-normal);
  text-spacing-trim: trim-start;
  word-break: initial;
  line-break: strict;
  overflow-wrap: anywhere;
  hyphens: auto;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

:where(body) {
  min-block-size: 100svb;
  margin: unset;
}

:where(h1, h2, h3, h4, h5, h6) {
  margin-block: unset;
  font-size: unset;
}

:where(:any-link) {
  color: unset;
  text-decoration-line: none;
  text-decoration-thickness: from-font;
  text-decoration-color: var(--underline-base);
  text-underline-offset: 0.25em;
}

::file-selector-button,
:where(button, label[for], select, [role='tab'], [role='button']) {
  cursor: pointer;
}

::file-selector-button,
:where(button) {
  inline-size: fit-content;
  touch-action: manipulation;
}

::file-selector-button,
:where(button, input, select, textarea) {
  padding: unset;
  border-width: 1px;
  border-color: transparent;
  border-radius: unset;
  background-color: unset;
  color: unset;
  font: unset;
  vertical-align: middle;
  letter-spacing: unset;
  text-align: unset;
  text-transform: unset;
  appearance: unset;
}

:where(ul, ol) {
  padding-inline-start: unset;
  list-style-type: '';
}

:where(p, blockquote, figure, pre, address, ul, ol, dl) {
  margin-block: unset;
}

:where(figure) {
  margin-inline: unset;
}

:where(img, video, canvas, audio, iframe, embed, object) {
  display: block flow;
  vertical-align: middle;
}

:where(img, svg, video) {
  inline-size: 100%;
  block-size: auto;
  /* object-fit: cover; */
}

:where(dialog) {
  overflow: unset;
  inline-size: unset;
  block-size: unset;
  max-inline-size: unset;
  max-block-size: unset;
  padding: unset;
  background-color: unset;
  color: unset;
}

:where(em) {
  font-style: normal;
}

:where(fieldset) {
  margin: unset;
  padding: unset;
  border: unset;
}

:where(summary) {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

.js-fade-in {
  opacity: 0;
}

.js-fade-in.show {
  opacity: 1;
  transition: opacity .6s ease-in-out;
}

@keyframes kvHeading {
  0% {
    opacity: 0;
    filter: blur(2px);
  }
  20% {
    opacity: 1;
    filter: blur(2.2px);
  }
  43% {
    opacity: 1;
    filter: blur(1.8px);
  }
  60% {
    opacity: 1;
    filter: blur(1.3px);
  }
  72% {
    opacity: 1;
    filter: blur(1px);
  }
  84% {
    opacity: 1;
    filter: blur(.6px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes underline {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  30% {
    clip-path: inset(0);
  }
}

/* stylelint-disable selector-max-id, declaration-no-important */
.no-sp {
  display: none !important;
}

.no-pc {
  display: grid !important;
}

@media only screen and (min-width: 768px) {
  .no-sp {
    display: grid !important;
  }

  .no-pc {
    display: none !important;
  }
}
/* stylelint-enable selector-max-id, declaration-no-important */

.c-section__headline {
  text-align: center;
}

.c-section__headline-jp {
  font-size: calc(42/var(--base-width)*100vw);
  font-family: var(--font-span);
}

.c-section__headline-en {
  font-size: calc(16/var(--base-width)*100vw);
  font-family: var(--font-shuei-gothic);
}

.c-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: calc((22/577)*100%);
  font-family: var(--font-span);
}

.c-caption__index {
  font-size: calc(30/var(--base-width)*100vw);
}

.c-caption__link {
  font-size: calc(20/var(--base-width)*100vw);
  font-weight: var(--font-semi-bold);
  line-height: var(--leading-tight);
}

.c-more-button {
  inline-size: calc(186/var(--base-width)*100%);
  margin: calc(116/var(--base-width)*100%) auto 0;
  border: 1px solid var(--color-black);
  font-size: calc(20/var(--base-width)*100vw);
  font-weight: var(--font-semi-blod);
  font-family: var(--font-span);
  text-align: center;
}

.c-more-button--hidden {
  display: none;
}

.c-more-button__inner {
  padding-block: calc((10/186)*100%);
}

.c-look {
  inline-size: calc(308/var(--all-looks-inner-width)*100%);
}

.c-look--modal {
  inline-size: 100%;
}

.c-look__image-box {
  position: relative;
  overflow: hidden;
}

.c-look__image {
  z-index: var(--default-z-index);
  position: relative;
}

.swiper {
  z-index: var(--default-z-index);
}

.c-look__info {
  border-block-start: 1px solid var(--color-black);
  border-inline-start: 1px solid var(--color-black);
  border-inline-end: 1px solid var(--color-black);
}
.c-look__detail-button {
  position: relative;
  padding-block: calc((10/308)*100%);
  background-color: var(--background-gray);
  border-block-end: 1px solid var(--color-black);
  line-height: var(--leading-initial);
  font-weight: var(--font-medium);
  font-size: calc(15/var(--base-width)*100vw);
  text-align: center;
}

.c-look__detail-button--modal {
  font-size: calc(36/var(--base-width)*100vw);
}

.c-look__detail-button:before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: calc(24/var(--base-width)*100vw);
  inline-size: 0;
  block-size: 0;
  margin: auto;
  border-style: solid;
  border-color: transparent transparent transparent var(--color-black);
  border-width: calc(6/var(--base-width)*100vw) 0 calc(6/var(--base-width)*100vw) calc(10/var(--base-width)*100vw);
  transition: rotate .3s ease;
}

.c-look__info-detail[open] .c-look__detail-button:before {
  rotate: 90deg;
}

.c-look__detail-button--modal:before {
  content: none;
}

.c-look__dataarea {
  background-color: var(--color-white);
}

.c-look__data-list-heading {
  padding-block: calc((10/308)*100%);
  font-weight: var(--font-medium);
  font-size: calc(15/var(--base-width)*100vw);
  color: var(--color-data-heading);
  text-align: center;
  line-height: var(--leading-initial);
  border-block-end: 1px solid var(--color-black);
}

.c-look__data-list-heading--modal {
  font-size: calc(36/var(--base-width)*100vw);
}

.c-look_data-list-content {
  padding-block: calc((10/308)*100%);
  border-block-end: 1px solid var(--color-black);
  font-weight: var(--font-medium);
  font-size: calc(15/var(--base-width)*100vw);
  text-align: center;
  line-height: var(--leading-initial);
}

.c-look_data-list-content--modal {
  font-size: calc(36/var(--base-width)*100vw);
}

.c-look_data-list-content--tight {
  letter-spacing: -0.08em;
}

.swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  z-index: var(--front-z-index);
  position: absolute;
  top: auto;
  bottom: auto;
  left: auto;
  inset-block-start: 0;
  inset-inline-start: calc(10/var(--base-width)*100vw);
  display: flex;
  gap: calc(5/var(--base-width)*100vw);
  margin-block-start: calc((10/308)*100%);
}

.c-look--modal .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  inset-inline-start: calc(24/var(--base-width)*100%);
  gap: calc(12/var(--base-width)*100%);
  margin-block-start: calc(24/var(--base-width)*100%);
}

.js-swiper-bullet {
  display: block;
  inline-size: calc(6/var(--base-width)*100vw);
  aspect-ratio: 1/1;
  background-color: var(--color-white);
  border-radius: 100%;
}

.c-look--modal .js-swiper-bullet {
  inline-size: calc(15/var(--base-width)*100vw);
}

.js-swiper-bullet-active {
  background-color: var(--color-black);
}

.c-look__plus {
  z-index: var(--front-z-index);
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: calc((10/308)*100%);
  inline-size: calc((20/308)*100%);
  aspect-ratio: 1/1;
  margin-block-start: calc((10/308)*100%);
}

.c-look__plus:before {
  content: '';
  display: block;
  inline-size: 1px;
  block-size: 100%;
  margin: auto;
  background-color: var(--color-black);
}

.c-look__plus:after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 1px;
  margin: auto;
  background-color: var(--color-black);
}

/* modal */
.c-modal {
  z-index: var(--menu-z-index);
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: auto;
  background-color: var(--color-white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease, visibility .5s ease;
}

.c-modal--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.c-modal__content {
  position: relative;
  max-block-size: 100%;
  overflow-y: scroll;
}

.c-modal__close {
  z-index: var(--front-z-index);
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: calc(8/var(--base-width)*100%);
  inline-size: calc(80/var(--base-width)*100%);
  aspect-ratio: 1/1;
  margin-block-start: calc(8/var(--base-width)*100%);
}

.c-modal__close-inner {
  position: absolute;
  inset: 0;
  inline-size: calc((46/80)*100%);
  aspect-ratio: 1/1;
  margin: auto;
  rotate: 45deg;
}

.c-modal__close-inner:before {
  content: '';
  display: block;
  inline-size: 1px;
  block-size: 100%;
  margin: auto;
  background-color: var(--color-black);
}

.c-modal__close-inner:after {
  content: '';
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 1px;
  margin: auto;
  background-color: var(--color-black);
}

.c-modal__content-inner {
  z-index: var(--default-z-index);
  position: relative;
}

@media screen and (max-width: 768px) {
  .c-look:nth-of-type(n+3) {
    margin-block-start: calc(28/var(--all-looks-inner-width)*100%);
  }
}

@media screen and (min-width: 768px) {
  .c-section__headline-jp {
    font-size: calc(38/var(--base-width)*100vw);
  }

  .c-section__headline-en {
    font-size: calc(17/var(--base-width)*100vw);
  }

  .c-caption {
    margin-block-start: calc((10/435)*100%);
  }

  .c-caption__index {
    font-size: calc(23/var(--base-width)*100vw);
  }

  .c-caption__link {
    font-size: calc(15/var(--base-width)*100vw);
    border-block-end: 1px solid transparent;
    transition: border .3s ease;
  }

  .c-more-button {
    inline-size: calc(140/var(--base-width)*100%);
    margin-block-start: calc(108/var(--base-width)*100%);
    
    font-size: calc(15/var(--base-width)*100vw);
  }

  .c-more-button__inner {
    padding-block: calc((8/140)*100%);
    transition: background .3s ease;
  }

  .c-look:nth-of-type(n+5) {
    margin-block-start: calc(18/var(--all-looks-inner-width)*100%);
  }

  .c-look__detail-button--modal, .c-look__data-list-heading--modal, .c-look_data-list-content--modal {
    padding-block: min(calc(17/var(--base-width)*100vw), 17px);
    font-size: min(calc(28/var(--base-width)*100vw), calc(24/var(--rem-ratio)));
  }

  .c-look__detail-button--alllooks:before {
    border-width: calc(13/var(--base-width)*100vw) 0 calc(13/var(--base-width)*100vw) calc(23/var(--base-width)*100vw);
  }

  .c-look__detail-button--modal:before {
    inset-inline-end: auto;
    inset-inline-start: calc(50% + calc((247/573)*100%));
    border-width: calc(9/var(--base-width)*100vw) 0 calc(9/var(--base-width)*100vw) calc(16/var(--base-width)*100vw);
  }

  .c-look__image {
    transition: scale .5s ease;
  }

  .swiper-slide picture {
    display: block;
    transition: scale .5s ease;
  }

  .c-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-modal);
    overflow: scroll;
  }

  .c-modal__content {
    inline-size: min(calc(583/var(--base-width)*100%), 500px);
    margin: auto;
    overflow: visible;
  }

  .c-modal__content-inner {
    padding-block: calc((128/583)*100%);
  }

  .c-modal__close {
    inset-inline-end: calc((18/583)*100%);
    inline-size: calc((35/583)*100%);
    margin-block-start: calc((142/583)*100%);
    transition: rotate .5s ease-in-out;
  }

  .c-look--modal .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    inset-inline-start: calc((18/583)*100%);
    gap: calc((9/583)*100%);
    margin-block-start: calc((18/583)*100%);
  }

  .c-look--modal .js-swiper-bullet {
    inline-size: min(calc(12/var(--base-width)*100vw), 10px);
  }
}

@media screen and (min-width: 1235px) {
  .c-look__detail-button:before {
    border-width: 6px 0px 6px 10.39px;
  }
}

@media (any-hover: hover) {
  .c-look__image-box--lineup:hover .c-look__image, .c-look__image-box--lineup:hover picture {
    scale: 1.08;
  }

  .c-more-button:hover {
    cursor: pointer;
  }

  .c-more-button:hover .c-more-button__inner {
    background-color: var(--color-white);
  }

  .l-movie__link:hover .c-caption__link, .l-collection__link:hover .c-caption__link {
    border-color: var(--color-bloack);
  }

  .c-look__detail-button:hover:not(.c-look__detail-button--modal) {
    cursor: pointer;
  }

  .c-look__detail-button:hover .c-look__detail-button--modal:before {
    rotate: 90deg;
  }

  .c-modal__close:hover {
    cursor: pointer;
    rotate: 180deg;
  }

  .js-modal:hover {
    cursor: pointer;
  }
}
[data-color="1"] {
  background-color: var(--switch-color1);
}

[data-color="2"] {
  background-color: var(--switch-color2);
}

[data-color="3"] {
  background-color: var(--switch-color3);
}

.js-color {
  transition: background 8s ease;
}

.l-body--noscroll {
  overflow: hidden;
}

.l-body:has(.l-dress.l-collection--current) {
  .l-nav__list:nth-of-type(1) .l-nav__list-link {
    color: var(--color-red);
  }
}

.l-body:has(.l-tuxedo.l-collection--current) {
  .l-nav__list:nth-of-type(2) .l-nav__list-link {
    color: var(--color-red);
  }
}

.l-body:has(.l-pair.l-collection--current) {
  .l-nav__list:nth-of-type(3) .l-nav__list-link {
    color: var(--color-red);
  }
}

.l-body:has(.l-morning.l-collection--current) {
  .l-nav__list:nth-of-type(4) .l-nav__list-link {
    color: var(--color-red);
  }
}

.l-movie {
  z-index: var(--frontmost-z-index);
  position: fixed;
  inset: 0;
  block-size: 100dvh;
  margin: auto;
  background-color: var(--color-black);
  transition: opacity .5s ease, visibility .5s ease;
}

.l-movie--closed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.l-body--opening .l-movie__inner {
  opacity: 1;
  visibility: visible;
}

.l-body--loaded .l-movie__inner {
  opacity: 1;
  visibility: visible;
}

.l-movie__inner {
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility .7s ease;
}

.l-movie__player-wrapper {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: fit-content;
  margin: auto;
}

.l-movie__player {
  inline-size: 100%;
}

.l-movie__volume {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(60/var(--base-width)*100%);
  margin-block-start: calc(40/var(--base-width)*100%);
}

.l-movie__volume-heading {
  font-family: var(--font-span);
  font-size: calc(27/var(--base-width)*100vw);
  color: var(--color-white);
  line-height: calc(32/27);
}

.l-movie__volume-button-box {
  position: relative;
  display: flex;
  align-items: center;
}

.l-movie__volume-button-box:before {
  content: '';
  position: absolute;
  inset: 0;
  inline-size: 1px;
  block-size: 100%;
  margin: auto;
  background-color: var(--color-white);
}

.l-movie__volume-button {
  padding-inline: calc(40/var(--base-width)*100vw);
  font-family: var(--font-span);
  font-size: calc(27/var(--base-width)*100vw);
  color: var(--color-white);
  line-height: calc(32/27);
}

.l-movie__volume-button-inner {
  border-block-end: 1px solid var(--color-black);
  transition: border .3s ease;
}

.l-movie__volume-button--selected .l-movie__volume-button-inner {
  border-block-end-color: var(--color-white);
}

.l-movie__close {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  inline-size: fit-content;
  margin: 0 auto calc(47/var(--base-width)*100vw);
  text-align: center;
}

.l-movie__close-icon {
  position: relative;
  inline-size: calc(95/var(--base-width)*100vw);
  aspect-ratio: 95/24;
}

.l-movie__close-icon:before {
  content: '';
  display: block;
  inline-size: 100%;
  block-size: 1px;
  background-color: var(--color-white);
  transform-origin: top left;
  rotate: 13.5deg;
}

.l-movie__close-icon:after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  display: block;
  inline-size: 100%;
  block-size: 1px;
  background-color: var(--color-white);
  transform-origin: bottom left;
  rotate: -13.5deg;
}

.l-movie__close-text {
  display: inline-block;
  font-family: var(--font-span);
  font-size: calc(27/var(--base-width)*100vw);
  line-height: var(--leading-initial);
  color: var(--color-white);
  border-block-end: 1px solid;
}

/* nav */
.l-nav {
  z-index: var(--front-z-index);
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: calc(125/var(--base-width)*100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}

.l-nav--fixed {
  opacity: 1;
  visibility: visible;
}

.l-nav__hamburger {
  z-index: var(--front-z-index);
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  inline-size: calc((97/125)*100%);
  aspect-ratio: 97/24;
  margin: auto;
  margin-block-start: calc((19/125)*100%);
}

.l-nav__hamburger-line {
  inline-size: 100%;
  block-size: 1px;
  background-color: var(--color-red);
}

.l-nav__hamburger-line--top {
  transform-origin: top left;
  transition: transform .5s ease
}

.l-nav__hamburger-line--center {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity .5s ease, translate .5s ease;
}

.l-nav__hamburger-line--bottom {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  transform-origin: bottom left;
  transition: transform .5s ease
}

.l-nav__hamburger--open .l-nav__hamburger-line--top {
  transform: rotate(13.5deg);
}

.l-nav__hamburger--open .l-nav__hamburger-line--center {
  opacity: 0;
  translate: 40px;
}

.l-nav__hamburger--open .l-nav__hamburger-line--bottom {
  transform: rotate(-13.5deg);
}

.l-nav__lineup-wrapper {
  z-index: var(--default-z-index);
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: calc(125/var(--base-width)*100vw);
  block-size: 100dvh;
  background-color: var(--color-white);
  translate: 100%;
  transition: translate .5s ease;
}

.l-nav__lineup-wrapper--open {
  translate: 0;
}

.l-nav__lineup {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  margin: auto;
  margin-block-start: calc((196/125)*100%);
}

.l-nav__list {
  display: flex;
  align-items: center;
  margin: auto;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-feature-settings: 'pkna';
  rotate: 180deg;
}

.l-nav__list + * {
  margin-inline-start: calc(50/var(--base-width)*100vw);
}

.l-nav__list-link {
  font-family: var(--font-span);
  font-size: calc(27/var(--base-width)*100vw);
  color: var(--color-nav-default);
  line-height: var(--leading-initial);
  border-block-end: 1px solid;
  transition: color .3s ease;
}

.l-nav__button {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  margin-block-end: calc((30/125)*100%);
  text-align: center;
}

.l-nav__button-heading {
  font-weight: var(--font-medium);
  font-size: calc(13/var(--base-width)*100vw);
  line-height: calc(15/10);
  text-align: center;
}

.l-nav__button-link {
  display: inline-block;
  margin-block-start: calc((12/125)*100%);
  font-family: var(--font-span);
  font-size: calc(27/var(--base-width)*100vw);
  line-height: calc(32/27);
  text-align: center;
  border-block-end: 1px solid;
}

.l-scroll-content {
  z-index: var(--default-z-index);
  position: relative;
  background-color: var(--color-base-white);
  overflow: hidden;
}

/* hero */
.l-hero {
  position: relative;
  padding-block: calc(67/var(--scroll-width)*100%) calc(162/var(--scroll-width)*100%);
}

.l-hero:before {
  content: '';
  z-index: var(--default-z-index);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: .5px;
  margin-block-start: calc(97/var(--scroll-width)*100%);
  background-color: var(--color-black);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s linear .3s;
}

.l-body--loaded .l-hero:before {
  clip-path: inset(0);
}

.l-hero:after {
  content: '';
  z-index: var(--default-z-index);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(96/var(--scroll-width)*100%);
  inline-size: .5px;
  block-size: 100%;
  background-color: var(--color-black);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.6s linear .3s;
}

.l-body--loaded .l-hero:after {
  clip-path: inset(0);
}

.l-hero__sub-title {
  z-index: var(--front-z-index);
  position: relative;
  margin-inline-start: calc(580/var(--scroll-width)*100%);
  font-family: var(--font-span);
  font-size: calc(17/var(--base-width)*100vw);
  color: var(--color-red);
  opacity: 0;
  translate: 0 15px;
}

.l-body--loaded .l-hero__sub-title {
  opacity: 1;
  translate: 0 0;
  transition: opacity .8s cubic-bezier(.445,.05,.55,.95) 1.4s, translate .6s cubic-bezier(.165,.84,.44,1) 1.4s;
}

.l-hero__title {
  z-index: var(--menu-z-index);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(94/var(--scroll-width)*100%);
  margin-block-start: calc(96/var(--scroll-width)*100%);
  font-size: 0;
}

.l-hero__title-text {
  display: block;
}

.l-hero__title-text--line1 {
  margin-block-start: calc(1 / var(--base-width)* 100vw);
}

.l-hero__title-text--line2 {
  margin-block-start: calc(-12/var(--base-width)*100vw);
  color: var(--color-base-white);
}

.l-hero__title-text-word {
  display: block;
  opacity: 0;
  translate: -15px;
  filter: blur(2px);
  transition: opacity 1.2s cubic-bezier(.445,.05,.55,.95), translate 1s cubic-bezier(.165,.84,.44,1), filter 1.2s cubic-bezier(.445,.05,.55,.95);
}

.l-body--loaded .l-hero__title-text-word { 
  opacity: 1;
  translate: 0;
  filter: blur(0);
}

.l-hero__title-text-word--1 {
  inline-size: calc(114/var(--base-width)*100vw);
}

.l-body--loaded .l-hero__title-text-word--1 {
  transition-delay: .5s;
}

.l-hero__title-text-word--2 {
  inline-size: calc(289/var(--base-width)*100vw);
  margin-block-start: calc(6/var(--base-width)*100vw);
  margin-inline-start: calc(-1/var(--base-width)*100vw);
}

.l-body--loaded .l-hero__title-text-word--2 {
  transition-delay: .6s;
}

.l-hero__title-text-word--3 {
  inline-size: calc(157/var(--base-width)*100vw);
}

.l-body--loaded .l-hero__title-text-word--3 {
  transition-delay: .7s;
}

.l-hero__title-text-word--4 {
  inline-size: calc(171/var(--base-width)*100vw);
  margin-block-start: calc(4/var(--base-width)*100vw);
}

.l-body--loaded .l-hero__title-text-word--4 {
  transition-delay: .8s;
}

.l-hero__image-box {
  z-index: var(--front-z-index);
  position: relative;
  inline-size: calc(603/var(--scroll-width)*100%);
  margin: calc(82/var(--scroll-width)*100%) auto 0;

}

.l-hero__image {
  z-index: var(--default-z-index);
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.l-hero__image--active {
  z-index: var(--front-z-index);
  position: relative;
  opacity: 1;
}

.l-hero__textarea {
  z-index: var(--front-z-index);
  position: relative;
  margin-block-start: calc(18/var(--scroll-width)*100%);
  margin-inline-start: calc(97/var(--scroll-width)*100%);
}

.l-hero__textarea-en {
  display: flex;
  gap: calc(72/var(--scroll-width)*100%);
  overflow: hidden;
}

.l-hero__textarea-en-col {
  font-family: var(--font-span);
  font-weight: var(--font-normal);
  font-size: calc(17/var(--base-width)*100vw);
  line-height: calc(22/17);
  opacity: 0;
  translate: -15px;
}

.l-body--loaded .l-hero__textarea-en-col {
  opacity: 1;
  translate: 0;
  transition: opacity 1.2s cubic-bezier(.445,.05,.55,.95), translate 1s cubic-bezier(.165,.84,.44,1);
}

.l-body--loaded .l-hero__textarea-en-col--1 {
  transition-delay: 1.1s;
}

.l-body--loaded .l-hero__textarea-en-col--2 {
  transition-delay: 1.25s;
}

.l-hero__textarea-lead {
  inline-size: calc(327/var(--scroll-width)*100%);
  margin-block-start: calc(109/var(--scroll-width)*100%);
}

/* kv common */
.l-collection__kv {
  position: relative;
}

/* item common */
.l-item__group {
  position: relative;
}

.l-item__image-box {
  position: relative;
}

.l-item__image-wrapper {
  z-index: var(--default-z-index);
  position: relative;
}

.js-switch-image {
  z-index: var(--default-z-index);
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out;
}

.js-switch-image--active {
  z-index: var(--front-z-index);
  position: relative;
  opacity: 1;
  visibility: visible;
}

.l-item__plus {
  z-index: var(--front-z-index);
  position: absolute;
  inline-size: calc(34/var(--scroll-width)*100vw);
  aspect-ratio: 1/1;
}

.l-item__plus--black {
  position: relative;
  margin-inline-end: calc(13/var(--base-width)*100vw);
}

.l-item__plus:before {
  content: '';
  display: block;
  inline-size: 1px;
  block-size: 100%;
  margin: auto;
  background-color: var(--color-white);
}

.l-item__plus--black:before {
  background-color: var(--color-black);
}

.l-item__plus:after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 1px;
  margin: auto;
  background-color: var(--color-white);
}

.l-item__plus--black:after {
  background-color: var(--color-black);
}

.l-item__name {
  font-family: var(--font-span);
  font-size: calc(20/var(--base-width)*100vw);
  color: var(--color-red);
  line-height: calc(25/20);
}

.l-item__name--vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-feature-settings: 'pkna';
  rotate: 180deg;
}

/* dress */
.l-dress__kv {
  z-index: var(--default-z-index);
  padding-block-end: calc(514/var(--scroll-width)*100%);
}

.l-dress__kv-image {
  inline-size: calc(407/var(--scroll-width)*100%);
  margin-inline-start: calc(42/var(--scroll-width)*100%);
}

.l-dress__kv-image--1 {
  clip-path: inset(0 0 0 100%);
}

.l-dress__kv.show .l-dress__kv-image--1 {
  clip-path: inset(0);
  transition: clip-path 1.2s ease-in-out .2s;
}

.l-dress__kv-image--2 {
  margin-block-start: calc(23/var(--scroll-width)*100%);
  clip-path: inset(0 100% 0 0);
}

.l-dress__kv.show .l-dress__kv-image--2 {
  clip-path: inset(0);
  transition: clip-path 1.2s ease-in-out .3s;
}

.l-dress__kv-heading {
  position: absolute;
  inset-inline-end: calc(26/var(--scroll-width)*100%);
  inline-size: calc(75/var(--scroll-width)*100%);
  opacity: 0;
  filter: blur(2px);
}

.l-dress__kv.show .l-dress__kv-heading {
  animation: kvHeading 1.8s cubic-bezier(.445,.05,.55,.95) both;
}

.l-dress__kv-heading--1 {
  inset-block-start: 0;
  margin-block-start: calc(24/var(--scroll-width)*100%);
}

.l-dress__kv-heading--2 {
  inset-block-end: 0;
  margin-block-end: calc(-34/var(--scroll-width)*100%);
}

.l-dress__kv-en {
  position: absolute;
  inset-block-end: 0;
}

.l-dress__kv-en--1 {
  inset-inline-start: calc(73/var(--scroll-width)*100%);
  inline-size: calc(14/var(--scroll-width)*100%);
  margin-block-end: calc(13/var(--scroll-width)*100%);
  opacity: 0;
  translate: 0 -15px;
}

.l-dress__kv-en--1.show {
  opacity: 1;
  translate: 0;
  transition: opacity .6s cubic-bezier(.445,.05,.55,.95), translate .6s cubic-bezier(.165,.84,.44,1);
}

.l-dress__kv-en--2 {
  inset-inline-start: calc(173/var(--scroll-width)*100%);
  inline-size: calc(16/var(--scroll-width)*100%);
  margin-block-end: calc(59/var(--scroll-width)*100%);
  opacity: 0;
  translate: 0 15px;
}

.l-dress__kv-en--2.show {
  opacity: 1;
  translate: 0;
  transition: opacity .6s cubic-bezier(.445,.05,.55,.95) .2s, translate .6s cubic-bezier(.165,.84,.44,1) .2s;
}

.l-dress__kv-en--3 {
  inset-inline-start: calc(270/var(--scroll-width)*100%);
  inline-size: calc(14/var(--scroll-width)*100%);
  margin-block-end: calc(59/var(--scroll-width)*100%);
  opacity: 0;
  translate: 0 -15px;
}

.l-dress__kv-en--3.show {
  opacity: 1;
  translate: 0;
  transition: opacity .6s cubic-bezier(.445,.05,.55,.95) .3s, translate .6s cubic-bezier(.165,.84,.44,1) .3s;
}

.l-dress__item-content {
  z-index: var(--front-z-index);
  position: relative;
  margin-block-start: calc(140/var(--scroll-width)*100%);
}

/* dress1 */
.l-item__dress--1 .l-item__group {
  inline-size: calc(515/var(--scroll-width)*100%);
  margin: auto;
}

.l-item__dress--1 .l-item__image-wrapper {
  position: relative;
}

.l-item__dress--1 .l-item__plus {
  inset-block-end: 0;
  inset-inline-end: calc((10/515)*100%);
  margin-block-end: calc((10/515)*100%);
}

.l-item__dress--1 .l-item__name {
  margin-block-start: calc((10/515)*100%);
  text-align: right;
}

/* dress2 */
.l-item__dress--2 {
  margin-block-start: calc(198/var(--scroll-width)*100%);
}

.l-item__dress--2 .l-item__group--1 {
  z-index: var(--front-z-index);
  inline-size: calc(375/var(--scroll-width)*100%);
  margin-inline-start: auto;
}

.l-item__dress--2 .l-item__group--2 {
  z-index: var(--default-z-index);
  margin-block-start: calc(-68/var(--scroll-width)*100%);
}

.l-item__dress--2 .l-item__group--3 {
  z-index: var(--front-z-index);
  inline-size: calc(535/var(--scroll-width)*100%);
  margin-block-start: calc(-316/var(--scroll-width)*100%);
  margin-inline-start: calc(55/var(--scroll-width)*100%);
}

.l-item__dress--2 .l-item__group--3 .l-item__plus {
  inset-block-end: 0;
  inset-inline-start: calc((10/535)*100%);
  margin-block-end: calc((10/535)*100%);
}

.l-item__dress--2 .l-item__group--3 .l-item__name {
  margin-block-start: calc((10/535)*100%);
  text-align: right;
}

/* dress3 */
.l-item__dress--3 {
  margin-block-start: calc(168/var(--scroll-width)*100%);
}

.l-item__dress--3 .l-item__group--1 {
  inline-size: calc(656/var(--scroll-width)*100%);
  margin-inline-start: auto;
}

.l-item__dress--3 .l-item__group--1 .l-item__plus {
  inset-block-end: 0;
  inset-inline-end: calc((10/656)*100%);
  margin-block-end: calc((10/656)*100%);
}

.l-item__dress--3 .l-item__group--1 .l-item__name {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: calc((-32/656)*100%);
  margin-inline-end: calc((35/656)*100%);
}

.l-item__dress--3 .l-item__group--2 .l-item__image-box {
  z-index: var(--default-z-index);
}

.l-item__dress--3 .l-item__group--2 .l-item__image-wrapper {
  display: flex;
}

.l-item__dress--3 .l-item__group--2 .l-item__image {
  inline-size: 50%;
}

.l-item__dress--3 .l-item__group--2 .l-item__plus {
  inset-block-end: 0;
  inset-inline-start: calc(330/var(--scroll-width)*100%);
  margin-block-end: calc(10/var(--scroll-width)*100%);
}

.l-item__dress--3 .l-item__group--2 .l-item__name {
  z-index: var(--front-z-index);
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: calc(385/var(--scroll-width)*100%);
  margin-inline-end: calc(30/var(--scroll-width)*100%);
}

/* dress4 */
.l-item__dress--4 {
  margin-block-start: calc(113/var(--scroll-width)*100%);
}

.l-item__dress--4 .l-item__group {
  inline-size: calc(515/var(--scroll-width)*100%);
  margin: auto;
}

.l-item__dress--4 .l-item__plus {
  inset-block-end: 0;
  inset-inline-start: calc((10/515)*100%);
  margin-block-end: calc((10/515)*100%);
}

.l-item__dress--4 .l-item__name {
  margin-block-start: calc((10/515)*100%);
}

/* tuxed */
.l-tuxedo {
  margin-block-start: calc(150/var(--scroll-width)*100%);
}

.l-tuxedo__kv-image-box {
  z-index: var(--default-z-index);
  position: relative;
}

.l-tuxedo__kv-image--1  {
  inline-size: calc(248/var(--scroll-width)*100%);
  opacity: 0;
  translate: -15px;
}

.l-tuxedo__kv.show .l-tuxedo__kv-image--1 {
  opacity: 1;
  translate: 0;
  transition: opacity .65s ease-in-out .3s, translate .65s ease-in-out .3s;
}

.l-tuxedo__kv-image--2 {
  inline-size: calc(502/var(--scroll-width)*100%);
  margin-inline-start: auto;
  opacity: 0;
  translate: 15px;
}

.l-tuxedo__kv.show .l-tuxedo__kv-image--2 {
  opacity: 1;
  translate: 0;
  transition: opacity .65s ease-in-out .7s, translate .65s ease-in-out .7s;
}

.l-tuxedo__kv-image--3 {
  inline-size: calc(458/var(--scroll-width)*100%);
  opacity: 0;
  translate: -15px;
}

.l-tuxedo__kv.show .l-tuxedo__kv-image--3 {
  opacity: 1;
  translate: 0;
  transition: opacity .65s ease-in-out 1.1s, translate .65s ease-in-out 1.1s;
}

.l-tuxedo__kv-heading {
  z-index: var(--front-z-index);
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: calc(-2/var(--scroll-width)*100%);
  margin-block-start: calc(-2/var(--scroll-width)*100%);
  inline-size: calc(411/var(--scroll-width)*100%);
  opacity: 0;
  filter: blur(2px);
}

.l-tuxedo__kv.show .l-tuxedo__kv-heading {
  animation: kvHeading 1.8s cubic-bezier(.445,.05,.55,.95) both;
}

.l-tuxedo__item-content {
  margin-block-start: calc(239/var(--scroll-width)*100%);
}

/* tuxedo1 */
.l-item__tuxedo--1 .l-item__group {
  inline-size: calc(629/var(--scroll-width)*100%);
  margin-inline-start: auto;
}

.l-item__tuxedo--1 .l-item__plus {
  inset-block-end: 0;
  inset-inline-start: calc((10/629)*100%);
  margin-block-end: calc((10/629)*100%);
}

.l-item__tuxedo--1 .l-item__name {
  margin-block-start: calc((10/629)*100%);
}

/* tuxedo */
.l-item__tuxedo--2 {
  display: flex;
  margin-block-start: calc(188/var(--scroll-width)*100%);
}

.l-item__tuxedo--2 .l-item__group--1 {
  z-index: var(--front-z-index);
  inline-size: calc(431/var(--scroll-width)*100%);
}

.l-item__tuxedo--2 .l-item__group--2 {
  z-index: var(--default-z-index);
  inline-size: calc(319/var(--scroll-width)*100%);
}

.l-item__tuxedo--2 .l-item__plus {
  inset-block-end: 0;
  inset-inline-end: calc((10/431)*100%);
  margin-block-end: calc((10/431)*100%);
}

.l-item__tuxedo--2 .l-item__name {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: calc((446/431)*100%);
  inline-size: max-content;
  margin-block-end: calc((10/431)*100%);
}

/* tuxedo3 */
.l-item__tuxedo--3 {
  z-index: var(--front-z-index);
  position: relative;
  display: flex;
  justify-content: space-between;
  inline-size: calc(1052/var(--scroll-width)*100%);
  margin-block-start: calc(213/var(--scroll-width)*100%);
  margin-inline-start: calc(113/var(--scroll-width)*100%);
}

.l-item__tuxedo--3 .l-item__group {
  inline-size: calc((515/1052)*100%);
}

.l-item__tuxedo--3 .l-item__plus {
  inset-block-end: 0;
  inset-inline-start: calc((10/515)*100%);
  margin-block-end: calc((10/515)*100%);
}

.l-item__tuxedo--3 .l-item__name {
  margin-block-start: calc((10/515)*100%);
}

/* tuxedo4 */ 
.l-item__tuxedo--4 {
  z-index: var(--default-z-index);
  position: relative;
  margin-block-start: calc(-150/var(--scroll-width)*100%);
}

.l-item__tuxedo--4 .l-item__plus {
  inset-block-end: 0;
  inset-inline-start: calc(10/var(--scroll-width)*100%);
  margin-block-end: calc(10/var(--scroll-width)*100%);
}

/* tuxedo5 */
.l-item__tuxedo--5 {
  margin-block-start: calc(196/var(--scroll-width)*100%);
}

.l-item__tuxedo--5 .l-item__group {
  inline-size: calc(441/var(--scroll-width)*100%);
  margin-inline-start: calc(37/var(--scroll-width)*100%);
}

.l-item__tuxedo--5 .l-item__plus {
  inset-block-end: 0;
  inset-inline-end: calc((10/441)*100%);
  margin-block-end: calc((10/441)*100%);
}

.l-item__tuxedo--5 .l-item__name {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(-98 / var(--scroll-width)* 100%);
  rotate: 0deg;
}

/* tuxedo6 */
.l-item__tuxedo--6 {
  margin-block-start: calc(20/var(--scroll-width)*100%);
}

.l-item__tuxedo--6 .l-item__group {
  inline-size: calc(713/var(--scroll-width)*100%);
  margin-inline-start: auto;
}

.l-item__tuxedo--6 .l-item__plus {
  inset-block-end: 0;
  inset-inline-start: calc((10/713)*100%);
  margin-block-end: calc((10/713)*100%);
}

/* tuxedo7 */
.l-item__tuxedo--7 {
  margin-block-start: calc(212/var(--scroll-width)*100%);
  padding-block-end: calc(217/var(--scroll-width)*100%);
}

.l-item__tuxedo--7 .l-item__group {
  inline-size: calc(515/var(--scroll-width)*100%);
  margin: auto;
}

.l-item__tuxedo--7 .l-item__plus {
  inset-block-end: 0;
  inset-inline-end: calc((10/515)*100%);
  margin-block-end: calc((10/515)*100%);
}

.l-item__tuxedo--7 .l-item__name {
  margin-block-start: calc((10/515)*100%);
}

/* tuxedo8 */
.l-item__tuxedo--8 .l-item__plus {
  inset-block-end: 0;
  inset-inline-end: calc(10/var(--scroll-width)*100%);
  margin-block-end: calc(10/var(--scroll-width)*100%);
}

.l-item__tuxedo--8 .l-item__name {
  margin-block-start: calc(10/var(--scroll-width)*100%);
  margin-inline-end: calc(10/var(--scroll-width)*100%);
  text-align: right;
}

/* pair1 */
.l-item__pair {
  margin-block-start: calc(169/var(--scroll-width)*100%);
}

.l-item__pair--1 {
  z-index: var(--front-z-index);
  position: relative;
}

.l-item__pair--1 .l-item__group {
  inline-size: calc(249/var(--scroll-width)*100%);
  margin-inline-start: calc(33/var(--scroll-width)*100%);
}

.l-item__pair--1 .l-item__plus {
  inset-block-end: 0;
  inset-inline-start: calc((10/249)*100%);
  margin-block-end: calc((10/249)*100%);
}

.l-item__pair--1 .l-item__name {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc((-60/249)*100%);
  rotate: 0deg;
}

/* pair2 */
.l-item__pair--2 {
  z-index: var(--default-z-index);
  position: relative;
  margin-block-start: calc(-74/var(--scroll-width)*100%);
}

.l-item__pair--2 .l-item__image-wrapper {
  inline-size: calc(632/var(--scroll-width)*100%);
  margin-inline-start: auto;
}

.l-item__pair--2 .l-item__name-wrapper {
  display: flex;
  align-items: flex-start;
  inline-size: 100%;
  margin-block-start: calc(10/var(--scroll-width)*100%);
  margin-inline-start: calc(70/var(--scroll-width)*100%);
}

.l-item__pair--2 .l-item__name-box {
  display: flex;
  align-items: center;
}

.l-item__pair--2 .l-item__name-box--right {
  margin-inline-start: calc(254/var(--scroll-width)*100%);
}

.l-item__pair--2 .l-item__name--right {
  margin-inline-start: calc(308/var(--scroll-width)*100%);
}

/* pair11 */
.l-item__pair--3 {
  margin-block-start: calc(112/var(--scroll-width)*100%);
}

.l-item__pair--3 .l-item__group--1 {
  z-index: var(--front-z-index);
  inline-size: calc(249/var(--scroll-width)*100%);
  margin-inline-start: calc(410/var(--scroll-width)*100%);
}

.l-item__pair--3 .l-item__group--1 .l-item__plus {
  inset-block-start: 0;
  inset-inline-end: calc((10/249)*100%);
  margin-block-start: calc((10/249)*100%);
}

.l-item__pair--3 .l-item__group--1 .l-item__name {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc((-58 / 249)* 100%);
  rotate: 0deg;
}

.l-item__pair--3 .l-item__group--2 {
  z-index: var(--default-z-index);
  inline-size: calc(383/var(--scroll-width)*100%);
  margin-inline-start: calc(71/var(--scroll-width)*100%);
  margin-block-start: calc(-123/var(--scroll-width)*100%);
}

.l-item__pair--3 .l-item__group--2 .l-item__plus {
  inset-block-end: 0;
  inset-inline-start: calc((10/383)*100%);
  margin-block-end: calc((10/383)*100%);
}

.l-item__pair--3 .l-item__group--2 .l-item__name {
  margin-block-start: calc((10/383)*100%);
}

/* morning */
.l-morning {
  margin-block-start: calc(181/var(--scroll-width)*100%);
}

.l-morning__kv-image-box {
  z-index: var(--default-z-index);
  position: relative;
}

.l-morning__kv-heading {
  z-index: var(--front-z-index);
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: calc(482/var(--scroll-width)*100%);
  opacity: 0;
  filter: blur(2px);
}

.l-morning__kv.show .l-morning__kv-heading {
  animation: kvHeading 1.8s cubic-bezier(.445,.05,.55,.95) both .3s;
}

/* morning1 */
.l-item__morning--1 .l-item__group {
  inline-size: calc(632/var(--scroll-width)*100%);
  margin: auto;
}

.l-item__morning--1 .l-item__plus {
  inset-block-end: 0;
  inset-inline-end: calc((10/632)*100%);
  margin-block-end: calc((10/632)*100%);
}

.l-item__morning--1 .l-item__name {
  margin-block-start: calc((10/632)*100%);
}

/* morning2 */
.l-item__morning--2 {
  margin-block-start: calc(122/var(--scroll-width)*100%);
  padding-block-end: calc(323/var(--scroll-width)*100%);
}

.l-item__morning--2 .l-item__group {
  inline-size: calc(352/var(--scroll-width)*100%);
  margin: auto;
}

.l-item__morning--2 .l-item__plus {
  inset-block-end: 0;
  inset-inline-start: calc((10/352)*100%);
  margin-block-end: calc((10/352)*100%);
}

/* footer */
.l-footer {
  position: relative;
}

.l-footer__textline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(40/var(--scroll-width)*100%) calc(20/var(--scroll-width)*100%) calc(15/var(--scroll-width)*100%);
  background-color: var(--color-white);
}

.l-footer__textline-text {
  font-family: var(--font-span);
  font-size: calc(17/var(--base-width)*100vw);
  color: var(--color-red);
}

.l-footer__inner {
  padding-block: calc(88/var(--scroll-width)*100%) calc(27/var(--scroll-width)*100%);
  background-image: url(../../assets/img/footer_sp.jpg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.l-footer__headline {
  text-align: center;
}

.l-footer__headline-en {
  font-family: var(--font-span);
  font-size: calc(30/var(--base-width)*100vw);
  color: var(--color-base-white);
  line-height: var(--leading-tight);
}

.l-footer__headline-jp {
  font-weight: var(--font-medium);
  font-size: calc(17/var(--base-width)*100vw);
  color: var(--color-base-white);
  text-align: center;
}

.l-footer__headline-jp-text {
  display: inline-block;
}

.l-footer__headline-jp-text:after {
  content: '';
  display: block;
  inline-size: 100%;
  block-size: 1px;
  background-color: var(--color-white);
  animation: underline 4s ease-in-out infinite;
}

.l-footer__link {
  display: block;
  inline-size: calc(135/var(--scroll-width)*100vw);
  padding-block: calc(3/var(--scroll-width)*100vw);
  background-color: var(--color-white);
  font-weight: var(--font-medium);
  font-size: calc(17/var(--base-width)*100vw);
  text-align: center;
}

.l-footer__link + * {
  margin-block-start: calc(12/var(--scroll-width)*100vw);
}

.l-footer__icon {
  inline-size: calc(68/var(--scroll-width)*100vw);
  margin: auto;
}

.l-footer__movie-icon {
  inline-size: calc(49/var(--scroll-width)*100%);
  margin: calc(24/var(--scroll-width)*100%) auto 0;
}

.l-footer__contact {
  margin-block-start: calc(370/var(--scroll-width)*100%);
}

.l-footer__contact-lineup {
  display: flex;
  justify-content: center;
  gap: calc(104/var(--scroll-width)*100%);
  margin-block-start: calc(39/var(--scroll-width)*100%);
}

.l-footer__contact-list {
  inline-size: calc(135/var(--scroll-width)*100%);
}

.l-footer__contact-link-lineup {
  margin-block-start: calc((12/135)*100%);
}

.l-footer__company {
  margin-block-start: calc(94/var(--scroll-width)*100%);
}

.l-footer__company-link-lineup {
  display: flex;
  justify-content: center;
  gap: calc(16/var(--scroll-width)*100%);
  margin-block-start: calc(12/var(--scroll-width)*100%);
}

.l-footer__company-link-lineup .l-footer__link {
  margin-block-start: 0;
}

.l-footer__staff {
  margin-block-start: calc(87/var(--scroll-width)*100%);
  margin-inline-start: calc(30/var(--scroll-width)*100%);
  font-family: var(--font-span);
  font-weight: var(--font-semi-bold);
  font-size: calc(20/var(--base-width)*100vw);
  line-height: calc(28/20);
  color: var(--color-base-white);
}

.l-footer__copyright {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: calc(13/var(--scroll-width)*100%);
  margin-block-end: calc(25/var(--scroll-width)*100%);
  font-family: var(--font-span);
  font-weight: var(--font-semi-bold);
  font-size: calc(14/var(--base-width)*100vw);
  color: var(--color-base-white);
}

@media screen and (min-width: 768px) {
  .l-movie__inner {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: fit-content;
    margin: auto;
  }

  .l-movie__player-wrapper {
    position: relative;
  }

  .l-movie__player {
    inline-size: min(calc(917/var(--base-width)*100%), calc(917/var(--base-height)*100vh));
    margin: auto;
  }

  .l-movie__volume {
    gap: min(calc(48/var(--base-width)*100%), calc(48/var(--base-height)*100vh));
    margin-block-start: min(calc(32/var(--base-width)*100%), calc(32/var(--base-height)*100vh));
  } 

  .l-movie__volume-heading {
    font-size: min(calc(21/var(--base-width)*100vw), calc(21/var(--base-height)*100vh));
    line-height: calc(24/21);
  }

  .l-movie__volume-button {
    padding-inline: min(calc(39/var(--base-width)*100vw), calc(39/var(--base-height)*100vh));
    font-size: min(calc(21/var(--base-width)*100vw), calc(21/var(--base-height)*100vh));
    line-height: calc(24/21);
  }

  .l-movie__close {
    position: relative;
    margin-block-end: 0;
    margin-block-start: min(calc(72/var(--base-width)*100%), calc(72/var(--base-height)*100vh));
  }

  .l-movie__close-icon {
    inline-size: min(calc(74/var(--base-width)*100vw), calc(74/var(--base-height)*100vh));
    aspect-ratio: 74/18;
  }

  .l-movie__close-text {
    font-size: min(calc(21/var(--base-width)*100vw), calc(21/var(--base-height)*100vh));
    transition: border .3s ease;
  }

  .l-bg-left {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: calc(562/var(--base-width)*100%);
    block-size: 100%;
  }

  .l-bg-left picture, .l-bg-right picture {
    block-size: 100%;
  }

  .l-bg-left img, .l-bg-left source, .l-bg-right img, .l-bg-right source {
    block-size: 100%;
    object-fit: cover;
  }

  .l-bg-right {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: calc(282/var(--base-width)*100%);
    block-size: 100%;
  }

  .l-scroll-bar {
    position: fixed;
    inset-block-end: 0;
    inset-inline-start: calc(1155/var(--base-width)*100%);
    inline-size: calc(3/var(--base-width)*100%);
    block-size: 100vh;
  }

  .l-scroll-bar__rate {
    inline-size: 100%;
    block-size: 0%;
    background-color: var(--color-black);
  }

  .l-nav__lineup-wrapper {
    inset-inline-start: calc(562/var(--base-width)*100%);
    inset-inline-end: auto;
    inline-size: calc(166/var(--base-width)*100%);
    background-color: transparent;
    translate: 0;
  }

  .l-nav {
    opacity: 1;
    visibility: visible;
  }

  .l-nav__lineup {
    margin-block-start: calc((30/860)*100vh);
  }

  .l-nav__list {
    rotate: 0deg;
  }

  .l-nav__list + * {
    margin-inline-start: min(calc((84/166)*100%), calc(84/var(--base-height)*100vh));
  }

  .l-nav__list-link {
    font-size: min(calc(13/var(--base-width)*100vw), calc(13/var(--base-height)*100vh));
  }

  .l-nav__button-heading {
    font-size: min(calc(10/var(--base-width)*100vw), calc(10/var(--base-height)*100vh));
  }

  .l-nav__button-link {
    margin-block-start: 0;
    font-size: min(calc(13/var(--base-width)*100vw), calc(13/var(--base-height)*100vh));
    transition: border .3s ease;
  }

  .l-scroll-content {
    inline-size: calc(427/var(--base-width)*100%);
    margin-inline-start: calc(728/var(--base-width)*100%);
  }

  .l-hero__sub-title {
    font-size: calc((17 / 1.75) / var(--base-width) * 100vw); 
  }

  .l-hero__title-text--line2 {
    margin-block-start: calc(-6 / var(--base-width)* 100vw);
  }

  .l-hero__title-text-word--1 {
    inline-size: calc(66/var(--base-width)*100vw);
  }

  .l-hero__title-text-word--2 {
    inline-size: calc(165/var(--base-width)*100vw);
    margin-block-start: calc(3/var(--base-width)*100vw);
  }

  .l-hero__title-text-word--3 {
    inline-size: calc(90/var(--base-width)*100vw);
  }

  .l-hero__title-text-word--4 {
    inline-size: calc(98/var(--base-width)*100vw);
    margin-block-start: calc(3 / var(--base-width)* 100vw);
  }

  .l-hero__textarea-en-col {
    font-size: calc((17/1.75)/var(--base-width)*100vw);
  }

  .l-hero__textarea-lead {
    inline-size: calc(371/var(--scroll-width)*100%);
  }

  .l-item__plus {
    inline-size: calc((34 / 1.75)/var(--base-width)*100vw);
    transition: rotate .5s ease-in-out;
  }

  .l-item__name {
    font-size: calc((17/1.75) / var(--base-width)* 100vw);
  }

  .l-item__tuxedo--5 .l-item__name {
    inset-block-start: calc(-90 / var(--scroll-width)* 100%);
  }

  .l-item__pair--1 .l-item__name {
    inset-block-start: calc((-54/249)*100%);
  }

  .l-item__pair--3 .l-item__group--1 .l-item__name {
    inset-block-start: calc((-52 / 249)* 100%);
  }

  .l-footer__textline-text {
    font-size: calc((17/1.75) / var(--base-width)* 100vw);
  }

  .l-footer__headline-en {
    font-size: calc((30/1.75)/var(--base-width)*100vw);
  }

  .l-footer__headline-jp {
    font-size: calc((17/1.75)/var(--base-width)*100vw);
  }

  .l-footer__movie-icon {
    transition: scale .3s ease;
  }

  .l-footer__link {
    inline-size: calc((135/1.75)/var(--base-width)*100vw);
    padding-block: calc((3/1.75)/var(--base-width)*100vw);
    font-size: calc((17/1.75)/var(--base-width)*100vw);
    transition: background .3s ease, color .3s ease;
  }

  .l-footer__icon {
    inline-size: calc((68/1.75)/var(--base-width)*100vw);
  }

  .l-footer__staff {
    font-size: calc((14/1.75)/var(--base-width)*100vw);
  }

  .l-footer__copyright {
    font-size: calc((14/1.75)/var(--base-width)*100vw);
  }
}

@media (any-hover: hover) {
  .l-movie__volume-button:hover {
    cursor: pointer;
  }

  .l-movie__volume-button:hover .l-movie__volume-button-inner {
    border-block-end-color: var(--color-white);
  }

  .l-movie__close:hover {
    cursor: pointer;
  } 

  .l-movie__close:hover .l-movie__close-text {
    border-block-end-color: var(--color-black);
  }

  .l-nav__list-link:hover {
    color: var(--color-red);
  }

  .l-item__image-box:hover .l-item__plus, .l-item__name-box:hover .l-item__plus {
    rotate: 180deg;
  }

  .l-nav__button-link:hover {
    border-block-end-color: transparent;
  }

  .l-footer__link:hover {
    background-color: var(--color-black);
    color: var(--color-white);
  }

  .l-footer__movie-button:hover {
    cursor: pointer;
  }

  .l-footer__movie-button:hover .l-footer__movie-icon {
    scale: 1.18;
  }
}