:root {
  --font-en-primary: "aw-conqueror-didot", serif;
  --font-en-secondary: "Crimson Text", serif;
  --color-basis: #333333;
}

/*//////////////////////////////////////////////////

Title : layout.scss
For   : 2023 SUMMER COLLECTION

Created       : 2023-4-22
Last Modified : 2023-4-22

==========================================

Content

//////////////////////////////////////////////////*/
/* ===================== animation */
.contents__wrapper .js-fadeIn {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
  transform: translateY(10%);
}
.contents__wrapper .js-fadeIn.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.js-fadeIn.is-show > .fadeDelay > a + a {
  -webkit-animation: fadeSlide 3s ease-in-out 3s alternate infinite;
          animation: fadeSlide 3s ease-in-out 3s alternate infinite;
  opacity: 0;
}

.fadeDelay {
  position: relative;
}
.fadeDelay > a + a {
  position: absolute;
  top: 0;
  left: 0;
}

.is-active.fadeDelay {
  transition-delay: 0.2s;
}

@-webkit-keyframes fadeSlide {
  0% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fadeSlide {
  0% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
/* --- small viewport --- */
/* --- large viewport --- */
/* ===================== common */
.article {
  color: var(--color-basis);
}
.article * {
  box-sizing: border-box;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
}
.article * a {
  display: var(--display, block);
}
.article picture {
  display: block;
}
.article img,
.article video,
.article svg {
  width: 100%;
  height: auto;
}

/* --- small viewport --- */
@media screen and (max-width: 767px) {
  .article {
    -webkit-margin-after: calc(125 * (100vw / 750));
            margin-block-end: calc(125 * (100vw / 750));
  }
  .hidden-sml {
    display: none;
  }
}
/* --- large viewport --- */
@media screen and (min-width: 768px) {
  .article {
    -webkit-margin-after: 95px;
            margin-block-end: 95px;
  }
  .hidden-lrg {
    display: none;
  }
}
/* ===================== movie */
.movie {
  position: relative;
  width: 100%;
}
.movie__button {
  position: absolute;
  font-family: var(--ff-awc);
  font-weight: 400;
  font-family: var(--font-en-primary);
  line-height: 1;
  color: #fff;
  cursor: pointer;
}
.movie__button .sound-off {
  display: none;
}

/* --- small viewport --- */
@media screen and (max-width: 767px) {
  .movie__button {
    right: 0;
    bottom: 0;
    padding: 0.7rem;
    font-size: calc(25 * (100vw / 750));
  }
}
/* --- large viewport --- */
@media screen and (min-width: 768px) {
  .movie__button {
    right: min(4vw, 20px);
    bottom: 1.5%;
    padding: 1rem;
    font-size: min(1.5714285714vw, 22px);
  }
}
/* ===================== hero */
.hero {
  grid-column: span 2;
}
.hero__desc .num {
  font-family: "kudryashev-d-contrast-sans", sans-serif;
}
/* --- small viewport --- */
@media screen and (max-width: 767px) {
  .hero {
    -webkit-margin-before: calc(150 * (100vw / 750));
            margin-block-start: calc(150 * (100vw / 750));
  }
  .hero__desc {
    -webkit-margin-before: calc(95 * (100vw / 750));
            margin-block-start: calc(95 * (100vw / 750));
  }
  .hero__desc .desc__lead {
    line-height: 1.9411764706;
  }
}
/* --- large viewport --- */
@media screen and (min-width: 768px) {
  .hero {
    -webkit-margin-before: 220px;
            margin-block-start: 220px;
    width: 700px;
    margin-inline: auto;
  }
  .hero__desc {
    -webkit-margin-before: 85px;
            margin-block-start: 85px;
  }

  .hero__desc .sub {
    -webkit-margin-before: 13px;
            margin-block-start: 13px;
    font-size: 16px;
  }
}
/* ===================== desc */
.desc {
  text-align: center;
}
.desc > * {
  font-family: var(--font-en-primary);
}
.desc__heading > * {
  display: inline-block;
}
/* --- small viewport --- */
@media screen and (max-width: 767px) {
  .desc__heading {
    font-size: calc(122 * (100vw / 750));
  }
  .desc__heading .main {
    font-size: calc(45 * (100vw / 750));
  }
  .desc__heading .sub {
    -webkit-margin-before: calc(15 * (100vw / 750));
            margin-block-start: calc(15 * (100vw / 750));
    font-size: calc(16 * (100vw / 750));
  }
  .desc__lead {
    -webkit-margin-before: calc(25 * (100vw / 750));
            margin-block-start: calc(25 * (100vw / 750));
    font-size: calc(17 * (100vw / 750));
    line-height: 1.5294117647;
  }
}
/* --- large viewport --- */
@media screen and (min-width: 768px) {
  .desc__heading .main {
    font-size: 44px;
  }
  .desc__heading .sub {
    -webkit-margin-before: 10px;
            margin-block-start: 10px;
    font-size: 16px;
  }
  .desc__lead {
    -webkit-margin-before: 25px;
            margin-block-start: 25px;
    font-size: 17px;
    line-height: 1.9411764706;
  }
}
/* ===================== contents */
/* --- common --- */
.contents__wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.contents__block--22 .contents__video {
  height: 100%;
}
.contents__block--22 video {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.contents__credit {
  font-family: var(--font-en-secondary);
}
.contents__credit a {
  --display: inline-block;
  border-bottom: 1px solid var(--color-basis);
}

/* --- small viewport --- */
@media screen and (max-width: 767px) {
  .contents .contents__credit {
    display: none;
  }
  .contents .contents__visual a {
    pointer-events: none;
  }
  .contents__wrapper {
    -webkit-margin-before: calc(135 * (100vw / 750));
            margin-block-start: calc(135 * (100vw / 750));
    padding-inline: calc(30 * (100vw / 750));
    gap: calc(20 * (100vw / 750));
  }
  .contents__block:not(.contents__block--03, .contents__block--04) {
    grid-column: span 2;
  }
  .contents__block--12 {
    -webkit-margin-before: calc(80 * (100vw / 750));
            margin-block-start: calc(80 * (100vw / 750));
  }
  .contents__block--20 {
    -webkit-margin-before: calc(70 * (100vw / 750));
            margin-block-start: calc(70 * (100vw / 750));
    -webkit-margin-after: calc(65 * (100vw / 750));
            margin-block-end: calc(65 * (100vw / 750));
  }
  .contents__block--22 {
    height: calc(1050 * (100vw / 750));
  }
  .contents__credit {
    -webkit-margin-before: calc(60 * (100vw / 750));
            margin-block-start: calc(60 * (100vw / 750));
  }
  .contents__credit a {
    -webkit-margin-before: calc(20 * (100vw / 750));
            margin-block-start: calc(20 * (100vw / 750));
    font-size: calc(23 * (100vw / 750));
    -webkit-padding-after: calc(4 * (100vw / 750));
            padding-block-end: calc(4 * (100vw / 750));
  }
}
/* --- large viewport --- */
@media screen and (min-width: 768px) {
  .contents .contents__credit {
    position: absolute;
    bottom: 37px;
    left: 40px;
    opacity: 0;
    visibility: hidden;
    transition-duration: 1s;
  }
  .contents .contents__credit a {
    -webkit-margin-before: 17px;
            margin-block-start: 17px;
    font-size: 16px;
    -webkit-padding-after: 2px;
            padding-block-end: 2px;
  }
  .contents__wrapper {
    -webkit-margin-before: 75px;
            margin-block-start: 75px;
    gap: 20px;
  }
  .contents__block {
    position: relative;
  }
  .contents__block--01, .contents__block--08, .contents__block--20, .contents__block--21, .contents__block--25, .contents__block--27 {
    grid-column: span 2;
  }
  .contents__block--02 {
    grid-row: span 2;
  }
  .contents__block--03, .contents__block--04, .contents__block--05, .contents__block--09, .contents__block--10, .contents__block--16, .contents__block--17, .contents__block--26 {
    grid-column: 2;
  }
  .contents__block--11, .contents__block--15 {
    grid-column: 1;
  }
  .contents__block--12, .contents__block--13 {
    -webkit-margin-before: 130px;
            margin-block-start: 130px;
  }
  .contents__block--10 .hidden-lrg {
    --display: none;
  }
  .contents__block--10, .contents__block--11 {
    grid-row: 7;
  }
  .contents__block--17 {
    grid-row: 10;
  }
  .contents__block--20 {
    -webkit-margin-before: 60px;
            margin-block-start: 60px;
    -webkit-margin-after: 65px;
            margin-block-end: 65px;
  }
  .contents__block--20 .desc__lead {
    line-height: 1.5294117647;
  }
  .contents__block--22 .contents__video {
    height: 100%;
  }
  .contents__block:hover .contents__visual {
    opacity: 0.8;
  }
  .contents__block:hover .contents__credit {
    opacity: 1;
    visibility: visible;
  }
}
/* ===================== foot */
.foot > * {
  text-align: center;
  font-family: var(--font-en-primary);
}
.foot__credit > * {
  display: block;
}
.foot__button {
  margin-inline: auto;
}
.foot__button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  letter-spacing: 0.02em;
  border: 1px solid var(--color-basis);
}

/* --- small viewport --- */
@media screen and (max-width: 767px) {
  .foot {
    -webkit-margin-before: calc(180 * (100vw / 750));
            margin-block-start: calc(180 * (100vw / 750));
  }
  .foot__credit .main {
    font-size: calc(18 * (100vw / 750));
  }
  .foot__credit .sub {
    -webkit-padding-before: calc(30 * (100vw / 750));
            padding-block-start: calc(30 * (100vw / 750));
    font-size: calc(16 * (100vw / 750));
    line-height: 2.5;
  }
  .foot__button {
    -webkit-margin-before: calc(167 * (100vw / 750));
            margin-block-start: calc(167 * (100vw / 750));
    width: calc(660 * (100vw / 750));
    height: calc(124 * (100vw / 750));
  }
  .foot__button a {
    font-size: calc(22 * (100vw / 750));
    line-height: 1.5454545455;
  }
}
/* --- large viewport --- */
@media screen and (min-width: 768px) {
  .foot {
    -webkit-margin-before: 145px;
            margin-block-start: 145px;
  }
  .foot__credit .main {
    font-size: 13px;
  }
  .foot__credit .sub {
    -webkit-padding-before: 15px;
            padding-block-start: 15px;
    font-size: 12px;
    line-height: 2.4166666667;
  }
  .foot__button {
    -webkit-margin-before: 170px;
            margin-block-start: 170px;
    max-width: 1015px;
    width: 95%;
    height: 62px;
  }
  .foot__button a {
    font-size: 11px;
    line-height: 1.5454545455;
  }
}
/* ===================== modal */
.articleModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--viewport-height);
  letter-spacing: 0.015em;
  background-color: #fff;
  overflow-y: auto;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
}
.articleModal.is-show {
  visibility: visible;
  opacity: 1;
  z-index: 1000;
}
.articleModal__close {
  padding: 0;
  z-index: 1;
  color: var(--color-basis);
}
.articleModal__body {
  margin-inline: auto;
}
.articleModal__nav {
  display: flex;
  justify-content: space-between;
}
.articleModal__nav > * {
  font-family: var(--font-en-primary);
}
.articleModal .desc {
  display: none;
}
.articleModal .swiper-button-prev, .articleModal .swiper-button-next {
  width: calc(15 * (100vw / 750));
  height: calc(48 * (100vw / 750));
  background-image: url(../images/arrow.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}
.articleModal .swiper-button-prev::after, .articleModal .swiper-button-next::after {
  display: none;
}
.articleModal .swiper-button-prev {
  transform: scale(-1, 1);
  left: calc(15 * (100vw / 750));
}
.articleModal .swiper-button-next {
  right: calc(15 * (100vw / 750));
}
.articleModal .swiper-button-disabled {
  display: none;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .articleModal {
    -webkit-padding-before: calc(135 * (100vw / 750));
            padding-block-start: calc(135 * (100vw / 750));
    -webkit-padding-after: calc(135 * (100vw / 750));
            padding-block-end: calc(135 * (100vw / 750));
    padding-inline: calc(50 * (100vw / 750));
  }
  .articleModal__close {
    font-size: calc(26 * (100vw / 750));
  }
  .articleModal__pagination {
    font-size: calc(26 * (100vw / 750));
  }
  .articleModal__wrapper {
    -webkit-margin-before: calc(120 * (100vw / 750));
            margin-block-start: calc(120 * (100vw / 750));
  }
}
/* --- for large viewport --- */
/* ===================== responsive */
@media (max-width: 1400px) and (min-width: 768px) {
  html {
    font-size: 0.7142857143vw !important;
  }
}