@charset "UTF-8";

/* mv */
.p-feature__video {
  position: relative;
  width: 100%;
  height: calc(810 * (100vw / 1440));
}

.p-feature__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.p-feature__video--sp {
  display: none;
}

/* intro */
.p-feature__intro {
  width: calc(960 * (100vw / 1440));
  margin: 0 auto;
  padding-top: 18rem;
}

.p-feature__heading {
  margin: 0;
  font-family: var(--font-barbour-sans);
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 1;
  text-align: center;
  color: #000;
}

.p-feature__lead {
  margin: 8rem 0 0;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #000;
}

/* lookbook */
.p-feature__lookbook {
  margin-top: 18rem;
}

.p-feature__pair {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.p-feature-look {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.p-feature-look__photo {
  flex: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.p-feature-look__photo--visible {
  opacity: 1;
}

.p-feature-look__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.p-feature-look__caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0.8rem;
  width: 100%;
  margin-top: 1rem;
  box-sizing: border-box;
  color: #4e4e4e;
}

.p-feature-look__caption--02,
.p-feature-look__caption--04,
.p-feature-look__caption--09,
.p-feature-look__caption--13,
.p-feature-look__caption--14,
.p-feature-look__caption--15 {
  align-items: flex-end;
}

.p-feature-look__item,
.p-feature-look__label,
.p-feature-look__release {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
}

.p-feature-look__item {
  display: flex;
  align-items: center;
  column-gap: 1rem;
  font-family: var(--font-barbour-sans);
}

.p-feature-look__category {
  font-weight: 400;
}

.p-feature-look__name,
.p-feature-look__label {
  font-family: var(--font-barbour-sans);
  font-weight: 300;
}

.p-feature-look__price {
  font-weight: 300;
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

.p-feature-look__release {
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
}

.p-feature-look__release-date {
  font-family: var(--font-barbour-sans);
  font-weight: 400;
}

.p-feature-look--01 {
  width: calc(600 * (100vw / 1440));
}

.p-feature-look__photo--01 {
  width: 100%;
}

.p-feature-look--02 {
  width: calc(540 * (100vw / 1440));
  margin-top: 42rem;
  margin-left: calc(180 * (100vw / 1440));
}

.p-feature-look__photo--02 {
  width: 100%;
}

.p-feature-look--03 {
  width: calc(600 * (100vw / 1440));
  margin-top: 12rem;
  margin-left: calc(300 * (100vw / 1440));
}

.p-feature-look__photo--03 {
  width: 100%;
}

.p-feature-look--04 {
  width: calc(660 * (100vw / 1440));
  margin-top: 12rem;
  margin-left: calc(660 * (100vw / 1440));
}

.p-feature-look__photo--04 {
  width: 100%;
}

.p-feature-look--05 {
  align-items: flex-end;
  width: calc(1320 * (100vw / 1440));
  margin-top: 12rem;
  margin-inline: auto;
}

.p-feature-look__photo--05a {
  width: calc(720 * (100vw / 1440));
}

.p-feature-look__photo--05b {
  width: calc(360 * (100vw / 1440));
  margin-left: calc(240 * (100vw / 1440));
}

.p-feature-look--06,
.p-feature-look--07,
.p-feature-look--11,
.p-feature__pair--12,
.p-feature-look--14,
.p-feature-look--15 {
  margin-top: 24rem;
}

.p-feature-look__photo--06,
.p-feature-look__photo--11,
.p-feature-look__photo--14 {
  width: 100%;
}

.p-feature-look__caption--06,
.p-feature-look__caption--11 {
  padding-left: calc(60 * (100vw / 1440));
}

.p-feature-look--07 {
  width: calc(1080 * (100vw / 1440));
  margin-inline: auto;
}

.p-feature-look__photo--07a {
  width: calc(660 * (100vw / 1440));
  margin-top: 18rem;
}

.p-feature-look__photo--07b {
  width: calc(360 * (100vw / 1440));
  margin-left: calc(60 * (100vw / 1440));
}

.p-feature-look--08 {
  width: calc(1320 * (100vw / 1440));
  margin-top: 18rem;
  margin-inline: auto;
}

.p-feature-look__photo--08a {
  width: calc(540 * (100vw / 1440));
  margin-top: 54rem;
}

.p-feature-look__photo--08b {
  width: calc(720 * (100vw / 1440));
  margin-left: calc(60 * (100vw / 1440));
}

.p-feature-look--09,
.p-feature-look--10 {
  margin-top: 12rem;
}

.p-feature-look--09 {
  width: calc(720 * (100vw / 1440));
  margin-left: calc(540 * (100vw / 1440));
}

.p-feature-look__photo--09 {
  width: 100%;
}

.p-feature-look--10 {
  width: calc(600 * (100vw / 1440));
  margin-left: calc(180 * (100vw / 1440));
}

.p-feature-look__photo--10 {
  width: 100%;
}

.p-feature-look--12 {
  width: calc(540 * (100vw / 1440));
}

.p-feature-look__photo--12 {
  width: 100%;
}

.p-feature-look--13 {
  width: calc(660 * (100vw / 1440));
  margin-top: 60rem;
  margin-left: calc(120 * (100vw / 1440));
}

.p-feature-look__photo--13 {
  width: 100%;
}

.p-feature-look__caption--14 {
  padding-right: calc(60 * (100vw / 1440));
}

.p-feature-look--15 {
  width: calc(1320 * (100vw / 1440));
  margin-inline: auto;
}

.p-feature-look__photo--15a {
  width: calc(360 * (100vw / 1440));
}

.p-feature-look__photo--15b {
  width: calc(900 * (100vw / 1440));
  margin-top: 30rem;
  margin-left: calc(60 * (100vw / 1440));
}

.p-feature-look__caption--15 {
  margin-top: 0.7rem;
}

/* collection */
.p-feature__collection {
  width: calc(960 * (100vw / 1440));
  margin: 18rem auto 0;
}

.p-feature__button {
  display: block;
  padding: 2.9rem 1rem;
  border: 1px solid #a6a6a6;
  background-color: #a6a6a6;
  font-family: var(--font-barbour-sans);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.p-feature__button:hover {
  background-color: #fff;
  color: #a6a6a6;
}

/* bonus */
.p-feature-bonus {
  width: calc(960 * (100vw / 1440));
  margin: 19.4rem auto 0;
  padding-bottom: 18rem;
}

.p-feature-bonus__box {
  position: relative;
  padding: 9.9rem 0 9.8rem;
  border: 1px solid #000;
  text-align: center;
}

.p-feature-bonus__heading {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  padding: 0 4rem;
  transform: translate(-50%, -50%);
  background-color: #fff;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}

.p-feature-bonus__image {
  width: calc(240 * (100vw / 1440));
  margin: 0 auto;
}

.p-feature-bonus__image img {
  display: block;
  width: 100%;
  height: auto;
}

.p-feature-bonus__text {
  margin: 7rem 0 0;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.8;
  color: #000;
}

.p-feature-bonus__br-sp {
  display: none;
}

@media (max-width: 767px) {
  /* mv */
  .p-feature__video {
    height: calc(715 * (100vw / 402));
  }

  .p-feature__video--pc {
    display: none;
  }

  .p-feature__video--sp {
    display: block;
  }

  /* intro */
  .p-feature__intro {
    width: calc(360 * (100vw / 402));
    padding-top: calc(100 * (100vw / 402));
  }

  .p-feature__heading {
    font-size: calc(20 * (100vw / 402));
  }

  .p-feature__lead {
    margin-top: calc(60 * (100vw / 402));
    font-size: calc(14 * (100vw / 402));
  }

  /* lookbook */
  .p-feature__lookbook {
    margin-top: calc(100 * (100vw / 402));
  }

  .p-feature__pair {
    display: block;
  }

  .p-feature-look {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .p-feature-look--05,
  .p-feature-look--08 {
    width: auto;
    margin-right: 0;
    margin-left: 0;
  }

  .p-feature-look--02,
  .p-feature-look--03,
  .p-feature-look--04,
  .p-feature-look--05,
  .p-feature-look--06,
  .p-feature-look--07,
  .p-feature-look--08,
  .p-feature-look--09,
  .p-feature-look--10,
  .p-feature-look--11,
  .p-feature__pair--12,
  .p-feature-look--13,
  .p-feature-look--14,
  .p-feature-look--15 {
    margin-top: calc(60 * (100vw / 402));
  }

  .p-feature-look__photo--05b,
  .p-feature-look__photo--07a,
  .p-feature-look__photo--08a,
  .p-feature-look__photo--15b {
    margin-top: calc(6 * (100vw / 402));
  }

  .p-feature-look__photo--07b,
  .p-feature-look__photo--08b {
    order: -1;
  }

  .p-feature-look__caption {
    row-gap: calc(8 * (100vw / 402));
    margin-top: calc(10 * (100vw / 402));
    padding-right: calc(21 * (100vw / 402));
    padding-left: calc(21 * (100vw / 402));
  }

  .p-feature-look__caption--05,
  .p-feature-look__caption--07,
  .p-feature-look__caption--08,
  .p-feature-look__caption--10 {
    align-items: flex-end;
  }

  .p-feature-look__caption--01,
  .p-feature-look__caption--02,
  .p-feature-look__caption--03,
  .p-feature-look__caption--04,
  .p-feature-look__caption--07,
  .p-feature-look__caption--09,
  .p-feature-look__caption--10,
  .p-feature-look__caption--12,
  .p-feature-look__caption--13,
  .p-feature-look__caption--15 {
    padding-right: 0;
    padding-left: 0;
  }

  .p-feature-look__item,
  .p-feature-look__label,
  .p-feature-look__release {
    font-size: calc(12 * (100vw / 402));
  }

  .p-feature-look__item {
    column-gap: calc(10 * (100vw / 402));
  }

  .p-feature-look--01 {
    width: calc(300 * (100vw / 402));
    margin-left: calc(21 * (100vw / 402));
  }

  .p-feature-look--02 {
    width: calc(270 * (100vw / 402));
    margin-left: calc(111 * (100vw / 402));
  }

  .p-feature-look__photo--07a {
    width: calc(270 * (100vw / 402));
    margin-left: calc(111 * (100vw / 402));
  }

  .p-feature-look--03,
  .p-feature-look--09 {
    width: calc(330 * (100vw / 402));
    margin-left: calc(21 * (100vw / 402));
  }

  .p-feature-look--04 {
    width: calc(360 * (100vw / 402));
    margin-left: calc(21 * (100vw / 402));
  }

  .p-feature-look--10,
  .p-feature-look--13 {
    width: calc(300 * (100vw / 402));
    margin-left: calc(81 * (100vw / 402));
  }

  .p-feature-look--07,
  .p-feature-look--15 {
    width: calc(381 * (100vw / 402));
    margin-right: 0;
    margin-left: 0;
  }

  .p-feature-look--12 {
    width: calc(270 * (100vw / 402));
    margin-left: calc(21 * (100vw / 402));
  }

  .p-feature-look__photo--05a {
    width: calc(330 * (100vw / 402));
    margin-left: 0;
  }

  .p-feature-look__photo--05b {
    width: calc(210 * (100vw / 402));
    margin-left: calc(192 * (100vw / 402));
  }

  .p-feature-look__photo--07b,
  .p-feature-look__photo--15a {
    width: calc(180 * (100vw / 402));
    margin-left: 0;
  }

  .p-feature-look__photo--08a {
    width: calc(270 * (100vw / 402));
    margin-left: calc(132 * (100vw / 402));
  }

  .p-feature-look__photo--08b {
    width: calc(360 * (100vw / 402));
    margin-left: 0;
  }

  .p-feature-look__photo--15b {
    width: calc(330 * (100vw / 402));
    margin-left: calc(51 * (100vw / 402));
  }

  /* collection */
  .p-feature__collection {
    width: calc(360 * (100vw / 402));
    margin-top: calc(100 * (100vw / 402));
  }

  .p-feature__button {
    padding: calc(25 * (100vw / 402)) calc(10 * (100vw / 402));
    font-size: calc(16 * (100vw / 402));
  }

  /* bonus */
  .p-feature-bonus {
    width: calc(360 * (100vw / 402));
    margin-top: calc(111 * (100vw / 402));
    padding-bottom: calc(100 * (100vw / 402));
  }

  .p-feature-bonus__box {
    padding: calc(99 * (100vw / 402)) calc(29 * (100vw / 402)) calc(79 * (100vw / 402));
  }

  .p-feature-bonus__heading {
    font-size: calc(24 * (100vw / 402));
    padding: 0 calc(40 * (100vw / 402));
  }

  .p-feature-bonus__image {
    width: calc(180 * (100vw / 402));
  }

  .p-feature-bonus__text {
    margin-top: calc(60 * (100vw / 402));
    font-size: calc(15 * (100vw / 402));
    line-height: 1.67;
  }

  .p-feature-bonus__br-sp {
    display: inline;
  }
}