: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-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-data-heading: #929292;

  /* 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;
    --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;
}

/* 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-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;
  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-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-modal__close-inner {
    inline-size: 100%;
  }

  .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;
  }

  .c-look__plus {
    transition: rotate .5s ease-in-out;
  }
}

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

  .c-look__image-box--lineup:hover .c-look__plus {
    rotate: 180deg;
  }

  .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;
  }
}
.js-scroll-in {
  opacity: 0;
}

.js-scroll-in.show {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

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

.l-wrapper {
  margin: calc(10/var(--base-width)*100%);
  border: 1px solid var(--color-black);
  overflow: hidden;
}

.l-content {
  inline-size: calc((var(--all-looks-inner-width)/730)*100%);
  margin: auto;
  padding-block: calc(23/var(--all-looks-inner-width)*100%);
}

.l-title {
  padding-block-end: calc(14/var(--all-looks-inner-width)*100%);
  font-family: var(--font-span);
  font-weight: var(--font-normal);
  font-size: calc(52/var(--base-width)*100vw);
  text-align: center;
  line-height: var(--leading-initial);
  border-block-end: 1px solid var(--color-black);
}

.l-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l-nav__heading {
  font-family: var(--font-span);
  font-size: calc(20/var(--base-width)*100vw);
}

.l-nav__list-area {
  display: flex;
  justify-content: space-between;
  inline-size: calc(215/var(--all-looks-inner-width)*100%);
}

.l-nav__list-link {
  display: block;
  font-family: var(--font-span);
  font-size: calc(27/var(--base-width)*100vw);
  color: var(--color-nav-default);
  line-height: calc(43/27);
}

.l-nav__list-link--current {
  color: var(--color-black);
}

.l-look__lineup {
  display: flex;
  flex-wrap: wrap;
  gap: calc(18/var(--all-looks-inner-width)*100%);
  margin-block-start: calc(87/var(--all-looks-inner-width)*100%);
}

@media screen and (min-width: 768px) {
  .l-content {
    inline-size: calc((var(--all-looks-inner-width)/1420)*100%);
  }

  .l-nav__list-link {
    transition: color .5s ease;
  } 
}

@media (any-hover: hover) { 
  .l-nav__list-link:hover {
    color: var(--color-black);
  }
}


/* 親 ul を flex 右寄せに */
.l-nav__list-area {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px; /* 番号間の隙間 */
  padding: 0 !important;
  margin: 0 !important;
  width: max-content !important; /* 子要素幅にフィット */
}

/* #1,#2を非表示 */
.l-nav__list-area li:nth-child(3),
.l-nav__list-area li:nth-child(4) {
  display: none !important;
}

/* li 内のリンク・div 幅を最小化 */
.l-nav__list-area li a,
.l-nav__list-area li div {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}