@import url("https://use.typekit.net/zne5iur.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css");
.js-inview {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1s ease 0.4s;
}

.js-inview-2 {
  opacity: 0;
  transform: translate(0, 40px);
  transition: all 1s ease 0.4s;
}

.js-inview.is-inview {
  opacity: 1;
  transform: translate(0, 0);
}

.js-inview-2.is-inview {
  opacity: 1;
  transform: translate(0, 0);
}

.pc {
  display: block;
}
@media (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media (max-width: 768px) {
  .sp {
    display: block;
  }
}

/*----------------------reset-----------------*/
html,
body {
  width: 100%;
  height: auto;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
  font-size: 62.5%;
  /* 10px / 16px * 100 */
}
@media screen and (max-width: 768px) {
  html,
  body {
    font-size: 2.666vw;
    /* 10px / 375px * 100 */
  }
}

body {
  height: 200%;
  left: 0px;
  top: 0px;
  margin: 0;
  overflow-x: hidden;
}

a:hover,
a:active,
a.active {
  color: rgb(113, 112, 112);
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

i {
  font-style: normal;
}

form,
section,
p,
div,
ul,
li,
dl,
dt,
dd,
a,
span,
input,
textarea {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  list-style: none;
}

a {
  color: unset;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.swiper-container {
  position: relative;
  overflow: hidden;
}

.swiper-wrapper {
  height: -moz-fit-content;
  height: fit-content;
}

.swiper-slide {
  height: -moz-fit-content;
  height: fit-content;
  width: 100% !important;
}
.swiper-slide img {
  height: auto;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/*----------------------modal-----------------*/
.thumb {
  position: relative;
  display: block;
}

.open {
  position: absolute;
  bottom: 1%;
  right: 2%;
  width: calc(30 / 1280 * 100vw);
  height: calc(30 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  .open {
    width: calc(20 / 375 * 100vw);
    height: calc(20 / 375 * 100vw);
  }
}
.open::after {
  content: "";
  width: calc(30 / 1280 * 100vw);
  height: calc(1 / 1280 * 100vw);
  background-color: #000;
  position: absolute;
  left: 0px;
  top: 9px;
  transition: background-color 0.3s linear;
}
@media (max-width: 768px) {
  .open::after {
    width: calc(20 / 375 * 100vw);
    height: calc(1 / 375 * 100vw);
  }
}
.open::before {
  content: "";
  width: calc(30 / 1280 * 100vw);
  height: calc(1 / 1280 * 100vw);
  background-color: #000;
  transform: rotate(-90deg);
  position: absolute;
  left: 0px;
  top: 9px;
  transition: background-color 0.3s linear;
}
@media (max-width: 768px) {
  .open::before {
    width: calc(20 / 375 * 100vw);
    height: calc(1 / 375 * 100vw);
  }
}

section#looks {
  background-color: #FFF;
  width: 100%;
  height: 100vh;
  padding: calc(115 / 1280 * 100vw) 0 calc(220 / 1280 * 100vw) 0;
  margin: 0px;
  position: fixed;
  left: 0px;
  top: -100vh;
  z-index: 9999;
  overflow: scroll;
  opacity: 0;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}
@media (max-width: 768px) {
  section#looks {
    padding: calc(60 / 375 * 100vw) 0;
    box-sizing: border-box;
  }
}
section#looks.active {
  top: 0px;
  pointer-events: all;
}
@media (max-width: 768px) {
  section#looks.active {
    pointer-events: visible;
  }
}
section#looks .look {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 3%;
  width: 90%;
  margin: 0 auto 20%;
}
@media screen and (max-width: 768px) {
  section#looks .look {
    display: block;
  }
}
section#looks .look-img {
  width: 50%;
}
@media screen and (max-width: 768px) {
  section#looks .look-img {
    width: 100%;
    margin-bottom: 10px;
  }
}
section#looks .look .credit {
  font-size: 1.1rem;
  line-height: 100%;
  width: 45%;
}
@media screen and (max-width: 768px) {
  section#looks .look .credit {
    width: 100%;
  }
}
section#looks .look .credit-each {
  display: flex;
  flex-wrap: wrap;
}
section#looks .look .credit-each:not(:last-of-type) {
  margin-bottom: calc(10 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  section#looks .look .credit-each:not(:last-of-type) {
    margin-block: calc(5 / 375 * 100vw);
  }
}
section#looks .look .credit-each a {
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding-left: calc(5 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  section#looks .look .credit-each a {
    padding-left: calc(5 / 375 * 100vw);
  }
}
section#looks .look .credit-each .arrn {
  display: none;
}
section#looks .look .credit-each .item-d-none a {
  display: none;
  pointer-events: none;
}
section#looks .look .credit-each .item-d-none .arrn {
  display: inline-block;
  pointer-events: auto;
}
section#looks .looks-logo {
  position: fixed;
  top: 2%;
  left: 2%;
  z-index: 100;
  font-weight: 700;
  font-size: calc(43 / 1280 * 100vw);
  line-height: 100%;
}
@media screen and (max-width: 768px) {
  section#looks .looks-logo {
    left: 3%;
    font-size: calc(18 / 375 * 100vw);
  }
}
section#looks .close {
  width: calc(40 / 1280 * 100vw);
  height: calc(40 / 1280 * 100vw);
  position: fixed;
  top: 2%;
  right: 2%;
  cursor: pointer;
  z-index: 100;
}
@media (max-width: 768px) {
  section#looks .close {
    width: calc(30 / 375 * 100vw);
    height: calc(30 / 375 * 100vw);
    top: 1%;
    right: 2%;
  }
}
section#looks .close::before {
  content: "";
  width: calc(40 / 1280 * 100vw);
  height: 1px;
  background-color: #111;
  transform: rotate(-45deg);
  position: absolute;
  left: 0px;
  top: 35px;
  transition: background-color 0.3s linear;
}
@media (max-width: 768px) {
  section#looks .close::before {
    content: "";
    width: calc(30 / 375 * 100vw);
    height: 1px;
    background-color: #111;
    transform: rotate(-45deg);
    position: absolute;
    left: 0px;
    top: 15px;
    transition: background-color 0.3s linear;
  }
}
section#looks .close::after {
  content: "";
  width: calc(40 / 1280 * 100vw);
  height: 1px;
  background-color: #111;
  transform: rotate(45deg);
  position: absolute;
  left: 0px;
  top: 35px;
  transition: background-color 0.3s linear;
}
@media (max-width: 768px) {
  section#looks .close::after {
    content: "";
    width: calc(30 / 375 * 100vw);
    height: 1px;
    background-color: #111;
    transform: rotate(45deg);
    position: absolute;
    left: 0px;
    top: 15px;
    transition: background-color 0.3s linear;
  }
}

/*----------------------inner-----------------*/
#container {
  width: 100%;
  position: relative;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-inline: auto;
  contain: paint;
}
@media screen and (max-width: 768px) {
  #container {
    display: block;
  }
}
#container .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#container .fixed-area {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 45%;
}
@media screen and (max-width: 768px) {
  #container .fixed-area {
    display: block;
    position: relative;
    place-items: unset;
    height: auto;
    width: 100%;
  }
}
#container .fixed-area .kv {
  position: relative;
  color: white;
}
#container .fixed-area .kv div[class*=ttl] {
  position: absolute;
}
#container .fixed-area .kv .ttl-1 {
  width: 16%;
  top: 2%;
  left: 5%;
}
#container .fixed-area .kv .ttl-2 {
  line-height: 100%;
  top: calc(265 / 1280 * 100vw);
  left: 5%;
  font-weight: 700;
  font-size: calc(76 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .fixed-area .kv .ttl-2 {
    font-size: calc(55 / 375 * 100vw);
    top: 33%;
  }
}
#container .fixed-area .kv .ttl-3 {
  font-weight: 400;
  line-height: normal;
  top: calc(540 / 1280 * 100vw);
  left: 5%;
  width: 90%;
  font-size: calc(10 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .fixed-area .kv .ttl-3 {
    font-size: calc(7 / 375 * 100vw);
    top: 74%;
  }
}
#container .non-fixed {
  width: 55%;
}
@media screen and (max-width: 768px) {
  #container .non-fixed {
    width: 100%;
  }
}
#container .non-fixed .lead {
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: calc(14 / 1280 * 100vw);
  line-height: normal;
  padding: 22% 0;
}
@media screen and (max-width: 768px) {
  #container .non-fixed .lead {
    font-size: calc(13 / 375 * 100vw);
  }
}
#container .non-fixed .sz-F {
  width: 100%;
}
#container .non-fixed .sz-80 {
  width: 80%;
}
#container .non-fixed .sz-65 {
  width: 65%;
}
#container .non-fixed .mg-C {
  margin-left: auto;
  margin-right: auto;
}
#container .non-fixed .mg-L {
  margin-left: 0;
  margin-right: auto;
}
#container .non-fixed .mg-R {
  margin-right: 0;
  margin-left: auto;
}
#container .non-fixed .pd-B {
  background-color: #333;
  padding: 18% 9%;
  position: relative;
}
#container .non-fixed .pd-B p {
  position: absolute;
  color: white;
  font-size: calc(14 / 1280 * 100vw);
  line-height: 100%;
  inset: 0;
  margin: auto;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
@media screen and (max-width: 768px) {
  #container .non-fixed .pd-B p {
    font-size: calc(11 / 375 * 100vw);
  }
}
#container .non-fixed .lookList-each {
  margin-bottom: 22%;
}
#container .non-fixed .lookList-each .txt {
  color: #6C272D;
  font-size: 1.5rem;
  line-height: 100%;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  #container .non-fixed .lookList-each .txt {
    font-size: 0.95rem;
  }
}
#container .non-fixed .lookList-each .txt.mg-L2 {
  margin: 0 auto 1% 1%;
}
@media screen and (max-width: 768px) {
  #container .non-fixed .lookList-each .txt.mg-L2 {
    margin: 0 auto 2% 2%;
  }
}
#container .non-fixed .lookList-each .txt.mg-R2 {
  margin: 1% 1% auto auto;
  text-align: right;
}
#container .non-fixed #lookList-02 div[class*=sz]:first-of-type, #container .non-fixed #lookList-04 div[class*=sz]:first-of-type, #container .non-fixed #lookList-07 div[class*=sz]:first-of-type, #container .non-fixed #lookList-09 div[class*=sz]:first-of-type {
  margin-bottom: 5.5%;
}
#container .non-fixed #lookList-04 .sz-65.mg-L {
  margin-bottom: 5.5%;
}
#container .non-fixed #lookList-07 .sz-80.mg-L {
  margin-bottom: 5.5%;
}
#container .non-fixed #lookList-03 .flex div, #container .non-fixed #lookList-08 .flex div {
  width: 50%;
}
#container .non-fixed #lookList-03 .flex div:nth-of-type(1), #container .non-fixed #lookList-08 .flex div:nth-of-type(1) {
  animation-delay: 0.4s;
}
#container .non-fixed #lookList-03 .flex div:nth-of-type(2), #container .non-fixed #lookList-08 .flex div:nth-of-type(2) {
  animation-delay: 0.8s;
}
#container .non-fixed #lookList-03 .flex div:nth-of-type(3), #container .non-fixed #lookList-08 .flex div:nth-of-type(3) {
  animation-delay: 1.2s;
}
#container .non-fixed #lookList-03 .flex div:nth-of-type(4), #container .non-fixed #lookList-08 .flex div:nth-of-type(4) {
  animation-delay: 1.6s;
}
#container .non-fixed #lookList-05 .open::after, #container .non-fixed #lookList-05 .open::before, #container .non-fixed #lookList-08 .open::after, #container .non-fixed #lookList-08 .open::before, #container .non-fixed #lookList-09 .open::after, #container .non-fixed #lookList-09 .open::before, #container .non-fixed #lookList-11 .open::after, #container .non-fixed #lookList-11 .open::before {
  background-color: white;
}
#container .non-fixed .last {
  padding: 0 0 2.5% 5%;
}
#container .non-fixed .last-logo {
  width: 36%;
  margin: 0 auto 8% 0;
}
@media screen and (max-width: 768px) {
  #container .non-fixed .last-logo {
    width: 42%;
  }
}
#container .non-fixed .last-ftr {
  margin: 0 auto 13% 0;
}
#container .non-fixed .last-ftr p {
  font-size: calc(14 / 1280 * 100vw);
  line-height: 160%;
}
@media screen and (max-width: 768px) {
  #container .non-fixed .last-ftr p {
    font-size: calc(13 / 375 * 100vw);
  }
}
#container .non-fixed .last-ftr a {
  display: block;
  font-size: calc(13 / 1280 * 100vw);
  line-height: 100%;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media screen and (max-width: 768px) {
  #container .non-fixed .last-ftr a {
    font-size: calc(12 / 375 * 100vw);
  }
}
#container .non-fixed .last-link {
  font-size: calc(12 / 1280 * 100vw);
  line-height: 100%;
  margin: 0 auto 13% 0;
}
@media screen and (max-width: 768px) {
  #container .non-fixed .last-link {
    font-size: calc(11 / 375 * 100vw);
  }
}
#container .non-fixed .last-link a {
  display: block;
  text-decoration: none;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 130%;
}
#container .non-fixed .last .bcs {
  font-size: calc(9 / 1280 * 100vw);
  line-height: 100%;
}
@media screen and (max-width: 768px) {
  #container .non-fixed .last .bcs {
    font-size: calc(8 / 375 * 100vw);
  }
}/*# sourceMappingURL=style.css.map */