@charset "utf-8";

/* ============
  theme original
  ============ */
/* common */
.h_bar,
#beltbnr {
  display: none;
}
html {
  font-size: 62.5%;
}
/* stickyを効かすために上書き */
html,
body,
div.wrapper_ {
  overflow: visible!important;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
/* ここ不要 */
img {
  border-radius: 1px;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  object-fit: cover;
}
/* 変更しない */
.wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
}
/* 変更しない */
.column {
  display: flex;
  flex-direction: column;
}
.fontEn {
  color: #000000;
  font-family: "Bebas Neue", serif;
  font-feature-settings: "palt";
  font-size: 1.4rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  text-align: justify; /* 両端を揃える */
}
.fontJa {
  color: #727272;
  font-family: "Noto Sans Display", serif;
  font-feature-settings: "palt";
  font-optical-sizing: auto;
  font-size: 1.4rem;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "widh" 100;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: justify;/* 両端を揃える */
}
.column p.fontEn,
.swiper-slide p.fontEn {
  color: #249AEE;
  margin-bottom: 17px;
  line-height: 1.3;
  white-space: nowrap;
}
a.btn {
  text-decoration: none;
}

/* content */
.contents.topContents {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 1280px;
  margin-inline: auto;
}
.kv {
  position: sticky;
  top: 70px;
  height: 100vh;
  width: 50%;
}
.kvArticle.kvArticle__fixed {
  padding-top: 30px;
  padding-left: 30px;
}
.kvSection {
  position: relative;
}
.kvSection.kvArticle__fixed--section {
  padding-left: 0;
  padding-right: 0;
  height: calc(100vh - 70px);
}
/* swiper */
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-wrapper {
  transition-timing-function: linear;
}
.kvSection__txt {
  position: absolute;
  bottom: 25px;
  left: 20px;
  z-index: 10;
}
/* トップ アニメーション */
.js-fadeAppear,
.js-fadeAppear-txt {
  opacity: 0;
}
.fadeIn {
  animation: fadeIn 1.5s ease forwards;
}
.fadeInTxt {
  animation: fadeInTxt 1.5s ease 1.5s forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInTxt {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.kvSection__txt h2 {
  color: #FFFFFF;
  font-size: 11.1rem;
  line-height: .9;
}
.kvSection__txt .txt__detail {
  color: #FFFFFF;
  padding-bottom: 25px;
}
.scrollSnapWrapper {
  width: 50%;
  overflow: hidden;
}
.topContents__inner {
  display: flex;
  flex-direction: column;
  position: relative;
}
.kvSection.kvArticle__scroll--section {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: end;
  margin-top: 30px;
  padding-right: 35px;
  padding-left: 35px;
  padding-bottom: 20px;
  height: calc(100vh - 100px);
}
.kvArticle__scroll--section h3 {
  font-size: 3.0rem;
}
.kvArticle__scroll--section p {
  line-height: 1.3;
  margin-bottom: 43px;
}
.kvArticle__scroll--section h4 {
  font-size: 6.2rem;
}
.kvSection {
  padding-left: 30px;
  padding-right: 20px;
}
.topWomen__nav {
  margin-top: 95px;
}
.topMen__nav {
  margin-top: 63px;
}
/* ナビリスト 001 */
.navList__001 {
  width: 480px;
  margin-left: auto;
  margin-right: 30px;
}
/* ナビリスト 002 */
.topWomen__navList .navList__002 {
  width: 100%;
  margin-top: 24px;
}
.topMen__navList .navList__002 {
  width: 410px;
  margin-top: 48px;
  margin-left: 80px;
}
/* ナビリスト 003 */
.navList__003 {
  position: relative;
}
.topWomen__navList .navList__003 {
  margin-top: 48px;
}
.navList__003 .column {
  position: absolute;
}
.topWomen__navList .navList__003 .column {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.topWomen__navList .navList__003 div {
  position: absolute;
}
.topWomen__navList .navList__003 div:nth-child(2) {
  top: 0;
  right: 30px;
  width: 182px;
  z-index: -10;
}
.topWomen__navList .navList__003 div:nth-child(3) {
  position: relative;
  top: 220px;
  left: 40px;
  width: 330px;
  z-index: -10;
}
.topWomen__navList .navList__003 div:nth-child(4) {
  top: 65%;
  right: 12%;
  width: 87px;
}
.topWomen__navList .navList__003 div:last-child {
  top: 90%;
  right: 23%;
  width: 120px;
}
.topWomen__navList .navList__003 + .topContent__credit {
  padding-top: 42.5%;
}
.topMen__navList .navList__003 {
  margin-top: 180px;
}
.topMen__navList .navList__003 .column {
  top: -85%;
  left: 41%;
}
/* ナビリスト 004 */
.navList__004 {
  position: relative;
  margin-right: 30px;
}
.navList__004 div {
  margin-top: 35px;
}
.topWomen__nav .navList__004 > div:first-child {
  padding-top: 35px;
  margin-left: auto;
  width: 390px;
}
.topWomen__nav .navList__004 > div:nth-child(2) {
  width: 480px;
  margin-left: auto;
}
.topWomen__nav .navList__004 .swiper p.fontEn {
  position: absolute;
  top: -10%;
  right: 18%;
  font-size: 1.8rem;
  transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  line-height: 1;
}
.topWomen__nav .navList__004 .swiper .swiper-slide {
  width: 710px!important;
}
.topWomen__nav .navList__004 + .topContent__credit {
  margin-top: 8.5%;
}
.topMen__nav .navList__004 {
  width: 480px;
  margin-left: auto;
}
/* ナビリスト 005 */
.navList__005 {
  position: relative;
}
.navList__005 div {
  margin-top: 60px;
}
.navList__005 > div:first-child {
  width: 400px;
  margin-left: 13%;
}
.navList__005 > div:nth-child(2) {
  position: absolute;
  top: 30.5%;
  right: 7%;
  transform: rotate(-3deg);
  width: 200px;
}
.navList__005 > div:last-child {
  margin-top: 30%;
  width: 480px;
  position: relative;
  left: -75px;
  z-index: -10;
}

/* credit */
.creditList {
  margin-top: 24px;
  width: 95%;
  margin-inline: auto;
}
.creditList.wrap {
  gap: 0 10px;
}
.creditList.wrap li {
  align-items: center;
  justify-content: flex-start;
  width: 48%;
}
.creditList.wrap li p.fontJa {
  flex: 1;
}
.creditList.wrap li p.fontJa span.brand-name {
  padding-left: 12px;
}
.creditList > li:nth-child(n + 3) {
  padding-top: 5px;
}
.creditList li p.fontJa {
  padding-right: 3px;
  display: inline-block;
}
.creditList li span.brand-name,
.creditList li a.btn {
  font-size: 1.2rem;
  line-height: 1;
}
.creditList li span.brand-name {
  padding-right: 4px;
  vertical-align: middle;
}
.creditList li a.btn {
  background: #FFFBFB;
  border: 1px solid #727272;
  border-radius: 1px;
  display: inline-block;
  padding: 1px 2px;
  transition: all .3s;
}
.creditList li a.btn:hover {
  background: #727272;
}
.creditList.wrap li a.fontJa:hover {
  color: #FFFFFF;
}
/* footer */
.kvArticle__footer {
  margin-top: 170px;
  margin-bottom: 50px;
}
.kvArticle__footer--section div p {
  text-align: center;
  line-height: 1.5;
}
.kvArticle__footer--section div p:first-child {
  font-size: 1.8rem;
  padding-bottom: 20px;
}
.kvArticle__footer--section div p:not(:first-child) {
  font-size: 1.2rem;
}

@media(max-width: 768px) {
  .column p.fontEn {
    font-size: 1.2rem;
  }
  .fontJa {
    font-size: 1.2rem;
  }
  .contents.topContents {
    display: block;
    width: 100%;
    padding-top: 0;
  }
  .kv {
    width: 100%;
    top: 0;
    position: relative;
    height: 100%;
  }
  .kvArticle.kvArticle__fixed {
    padding-top: 0;
    padding-left: 0;
  }
  .kvSection.kvArticle__fixed--section {
    height: auto;
  }
  img.swiper-slide {
    height: 100%;
  }
  .kvSection__txt h2 {
    font-size: 8.7rem;
  }
  .kvSection__txt .txt__detail {
    padding-bottom: 0;
  }
  .scrollSnapWrapper {
    width: 100%;
  }
  .kvSection.kvArticle__scroll--section {
    height: auto;
    margin-top: 5%;
    padding-top: 3.59%;
    padding-right: 5.9%;
    padding-left: 5.9%;
    padding-bottom: 4.105%;
  }
  .kvArticle__scroll--section h3 {
    font-size: 2.0rem;
    padding-bottom: 5px;
  }
  .kvArticle__scroll--section p {
    font-size: 1.0rem;
    margin-bottom: 24px;
  }
  .kvArticle__scroll--section h4 {
    font-size: 4.0rem;
  }
  .kvSection {
    padding-left: 0;
    padding-right: 0;
  }
  .topWomen__nav {
    margin-top: 1.474%;
  }
  .topMen__nav {
    margin-top: 15.13%;
  }
  /* ナビリスト 001 */
  .navList__001 {
    width: 100%;
    margin-inline: auto;
  }
  /* ナビリスト 002 */
  .topWomen__navList .navList__002 {
    margin-top: 5.13%;
  }
  .topMen__navList .navList__002 {
    width: 85.13%;
    margin-top: 8.72%;
    margin-right: auto;
    margin-left: 0;
  }
  /* ナビリスト 003 */
  .topWomen__navList .navList__003 {
    margin-top: 10%;
  }
  .column p.fontEn {
    margin-bottom: 12px;
  }
  .topWomen__navList .navList__003 div:nth-child(2) {
    top: 3%;
    right: 2%;
    width: 36%;
  }
  .topWomen__navList .navList__003 div:nth-child(3) {
    top: 188px;
    left: 0;
    width: 68.5%;
  }
  .topWomen__navList .navList__003 div:nth-child(4) {
    top: 65%;
    right: 10%;
    width: 14%;
  }
  .topWomen__navList .navList__003 div:last-child {
    top: 100%;
    right: 22%;
    width: 20.5%;
  }
  .topWomen__navList .navList__003 + .topContent__credit {
    padding-top: 45%;
  }
  .topMen__navList .navList__003 .column {
    top: -110%;
    left: 30%;
  }
  /* ナビリスト 004 */
  .navList__004 {
    margin-right: 0;
  }
  .topWomen__nav .navList__004 > div:first-child {
    width: 81%;
  }
  .topWomen__nav .navList__004 > div:nth-child(2) {
    width: 100%;
    margin-top: 7.18%;
    margin-left: 0;
  }
  .topWomen__nav .navList__004 .swiper p.fontEn {
    top: -10%;
    right: 15%;
    font-size: 1.5rem;
  }
  .topWomen__nav .navList__004 .swiper .swiper-slide {
    width: 118.5%!important;
  }
  .topMen__nav .navList__004 {
    width: 100%;
    margin-left: 0;
  }

  /* ナビリスト 005 */
  .navList__005 div {
    margin-top: 12.823%;
  }
  .navList__005 > div:first-child {
    width: 83.59%;
    margin-left: 0;
    margin-right: auto;
  }
  .navList__005 > div:nth-child(2) {
    top: 31%;
    right: 7%;
    width: 36.3%;
  }
  .navList__005 > div:last-child {
    margin-top: 73.2%;
    width: 81.5%;
    left: -8%;
  }

  /* credit */
  .topContent__credit {
    margin-top: 24px;
    padding-left: 5.13%;
    padding-right: 5.13%;
    width: 100%;
  }
  .creditList {
    display: block;
  }
  .creditList.wrap li {
    width: 70%;
  }
  .creditList li {
    width: 100%;
  }
  .creditList > li:nth-child(n + 3) {
    padding-top: 0;
  }
  .creditList > li:nth-child(n + 2) {
    padding-top: 7px;
  }
  .creditList li p.fontJa {
    padding-right: 5px;
  }
  .creditList li span.brand-name, .creditList li a.btn {
    font-size: 1.0rem;
  }
  /* footer */
  .kvArticle__footer {
    margin-top: 25.5%;
    margin-bottom: 31%;
  }
  .kvArticle__footer--inner {
    padding-left: 9%;
    padding-right: 9%;
  }
  .kvArticle__footer--section div p {
    text-align: center;
    line-height: 1.5;
  }
  .kvArticle__footer--section div p:first-child {
    font-size: 1.2rem;
  }
  .kvArticle__footer--section div p:not(:first-child) {
    font-size: 1.0rem;
  }
}