/* ===================================
    共通
=================================== */
.section__container {
  margin: 7rem 0;
}

.section__inner {
  gap: 7rem;
}

.section__title {
  text-align: center;
}

.section__title .en {
  font-size: 1.8rem;
  padding-left: 0;
}

.section__title .ja {
  font-size: 3.2rem;
  line-height: 1.6;
}



@media screen and (max-width:750px) {
  .section__container {
    margin: 6rem 0;
  }

  .section__inner {
    gap: 3.2rem;
  }

  .section__container[data-container="entry"] {
    padding-top: 0;
  }

  .section__title .en {
    font-size: 1.4rem;
    letter-spacing: 0.07rem;
  }

  .section__title .ja {
    font-size: 2.6rem;
    letter-spacing: 0.13rem;
  }
}

/* ===================================
    MV
=================================== */
.mv {
  width: 100%;
  aspect-ratio: 2 / 1;
  background: url("../images/look/imgMv.webp") no-repeat center/cover;
}

@media screen and (max-width:750px) {
  .mv {
    aspect-ratio: 3 / 2;
    background: url("../images/look/imgMvSp.webp") no-repeat center/cover;
  }
}

/* ===================================
    ナガセルータックを覗くコンテンツ
=================================== */
.section__look {
  container-type: inline-size;
  container-name: look-container;
}

.look__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.8rem 4rem;

}

.look__item {
  border-radius: 24rem;
  background: #FFF;
  padding: 3.5rem 2rem;
  text-align: center;
  transition: var(--transition-base);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.look__item[data-color="main"] {
  border: 2px solid var(--color-main);
  color: var(--color-main);
}

.look__item[data-color="accent"] {
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
}

.look__item:hover {
  color: #FFF;
}

.look__item[data-color="main"]:hover {
  background: var(--color-main);
}

.look__item[data-color="accent"]:hover {
  background: var(--color-accent);
}

.look__role {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.6;
  /* 20.8px */
}

.look__title {
  margin: 1rem auto 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
  max-width: 200px;
  /* 24px */
}

@container look-container (max-width: 900px) {
  .look__list {
    gap: 4rem 3rem;
  }

  .look__item {
    padding: 4.8rem 4rem;
  }
}

@media screen and (max-width:750px) {
  .look__list {
    gap: 4.8rem 2rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .look__item {
    padding: 5.2rem 1rem;
  }

  .look__title {
    font-size: 1.3rem;
    max-width: 110px;
  }
}

/* ===================================
    ナガセルータックを覗くコンテンツモーダル
=================================== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.40);
  overflow-y: scroll;
  z-index: 999;
  /* スクロールバー非表示 */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE, Edge */
}

.modal::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.modal .swiper-01 {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.modal .swiper-wrapper {
  width: 100%;
  height: 100%;
  align-items: center;
}

.modal .swiper-slide {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
}

.modal__card {
  width: 60%;
  max-width: 890px;
  padding: 11rem 0;
  border-radius: 30rem;
}

.modal__card[data-color="main"] {
  background: var(--color-main);
}

.modal__card[data-color="accent"] {
  background: var(--color-accent);
}

.modal__card-inner {
  max-width: 530px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  color: #FAF8F8;
}

.modal__title {
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.48;
  /* 38.48px */
  letter-spacing: 0.13rem;
}

.modal__text,
.modal__role {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
}

.modal__role {
  display: grid;
  grid-template-columns: 9rem auto;
  gap: 2.4rem;
  justify-content: center;
  align-items: center;
}

.modal__role-img {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1/1;
}

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

/* モーダル表示/非表示アニメーション */
.modal {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.is-active {
  visibility: visible;
  opacity: 1;
}

.modal__card {
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  aspect-ratio: 89 / 52;
  overflow-y: scroll;
  /* スクロールバー非表示 */
  -ms-overflow-style: none;
  /* IE, Edge */
  scrollbar-width: none;
  /* Firefox */
}

.modal__card::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.modal.is-active .modal__card {
  transform: scale(1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Swiperナビゲーション */
.modal .swiper-button-prev,
.modal .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 13.6rem;
  height: 10.2rem;
  background: #FAF8F8;
  border-radius: 16rem;
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  /* カードの左右4rem外側に配置 */
  /* カード幅60%、max-width890pxを基準に計算 */
}

/* デフォルト矢印を非表示 */
.modal .swiper-button-prev::after,
.modal .swiper-button-next::after {
  display: none;
}

.modal .swiper-button-prev svg,
.modal .swiper-button-next svg {
  width: 3.2rem;
  height: 3.2rem;
  transition: var(--transition-base);
}

.modal .swiper-button-prev svg path,
.modal .swiper-button-next svg path {
  transition: var(--transition-base);
}

/* data-color="main" */
.modal .swiper-button-prev[data-color="main"]:hover,
.modal .swiper-button-next[data-color="main"]:hover {
  background: var(--color-main);
}

.modal .swiper-button-prev[data-color="main"] svg path,
.modal .swiper-button-next[data-color="main"] svg path {
  stroke: var(--color-main);
}

.modal .swiper-button-prev[data-color="main"]:hover svg path,
.modal .swiper-button-next[data-color="main"]:hover svg path {
  fill: #FFF;
  stroke: #FFF;
}

/* data-color="accent" */

.modal .swiper-button-prev[data-color="accent"]:hover,
.modal .swiper-button-next[data-color="accent"]:hover {
  background: var(--color-accent);
}

.modal .swiper-button-prev[data-color="accent"] svg path,
.modal .swiper-button-next[data-color="accent"] svg path {
  stroke: var(--color-accent);
}

.modal .swiper-button-prev[data-color="accent"]:hover svg path,
.modal .swiper-button-next[data-color="accent"]:hover svg path {
  fill: #FFF;
  stroke: #FFF;
}

.modal .swiper-button-prev {
  /* カード左端から4rem + ボタン幅分外側 */
  right: calc(50% + min(30%, 445px) + 4rem);
  left: auto;
}

.modal .swiper-button-next {
  /* カード右端から4rem + ボタン幅分外側 */
  left: calc(50% + min(30%, 445px) + 4rem);
  right: auto;
}

@media screen and (max-width:750px) {
  .modal .swiper-slide {
    align-items: start;
    display: flex;
    align-items: center;
    padding-top: 2rem;
  }

  .modal__card {
    width: calc(100% - 4rem);
    max-height: 88%;
    aspect-ratio: inherit;
    padding: 9rem 2.5rem;
    display: block;
  }
.modal.is-active .modal__card {
  display: block;
}

  .modal__role {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .modal__role-img {
    width: 10rem;
    margin: 0 auto;
  }

  .modal .swiper-button-prev,
  .modal .swiper-button-next {
    top: 95%;
    width: 8rem;
    height: 6rem;
  }

  .modal .swiper-button-prev {
    left: 4rem;
  }

  .modal .swiper-button-next {
    left: inherit;
    right: 4rem;
  }

  .modal .swiper-button-prev svg,
  .modal .swiper-button-next svg {
    width: 2.4rem;
    height: 2.4rem;
  }
}