@charset "UTF-8";

* {
  box-sizing: border-box;
  margin: 0;
}
/* html {
  background: #111;
} */
body {
  background: #787b7e;
  /* background: #f8f8f8; */
  margin: 0 auto;
  font-family: 'Red Hat Display', sans-serif;
  color: #a9a9a9;
  letter-spacing: .12em;
  font-size: 14px;
}
.main {
  max-width: 1200px;
  margin: 0 auto;
}
a {
  text-decoration: none;
  color: inherit;
}


/* ----------------------------------------- */
/* タイトル */
/* ----------------------------------------- */
.title-wrapper {
  background: radial-gradient(at 0 0,#6E7477, #a8aeb1);
}
#logo {
  background: #6E7477;
  padding: .7em 1em .3em;
}
#logo img {
  width: 29px;
}
#title {
  width: 90%;
  max-width: 420px;
  max-height: 289px;
  margin: 0 auto;
  padding: 2em 0;
  display: block;
}


/* ----------------------------------------- */
/* 写真 */
/* ----------------------------------------- */
/* 写真レイアウト */
section {
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  background: #787b7e;
  margin-top: 30vh;
}
section#u1 {
  margin-top: inherit;
}

/* 写真スライド */
.slides {
  display: grid;
}
.slides > div {
  width: 100%;
  height: 100vh;
  transform-origin: center center;
  transition: transform 0.5s;
  position: absolute;
}

/* 写真スライド指定 */
/* .slides > div:first-child {
  position: relative;
}
.slides > div:first-child::after {
  content: "";
  background-color: #fff5;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
} */
.slides img {
  position: absolute;
}

/* --------- */
#u1 img {
  left: -108%;
  top: -23vh;
  width: 292%;
}
#w1 img {
  left: -71%;
  top: -7vh;
  width: 241%;
}
#u2 img {
  left: -52%;
  top: -5vh;
  width: 217%;
}
#w2 img {
  left: -60%;
  top: -10vh;
  width: 232%;
}
#u3 img {
  left: -81%;
  top: -1vh;
  width: 252%;
}
#w3 img {
  left: -80%;
  top: -5vh;
  width: 246%;
}
#u4 img {
  left: -82%;
  top: -5vh;
  width: 263%;
}
#w4 img {
  left: -75%;
  top: -10vh;
  width: 248%;
}
#u5 img {
  left: -68%;
  top: -5vh;
  width: 266%;
}
#w5 img {
  left: -48%;
  top: -5vh;
  width: 205%;
}
#u6 img {
  left: -74%;
  top: -5vh;
  width: 237%;
}
#w6 img {
  left: -49%;
  top: -5vh;
  width: 211%;
}

/* --------- */

@media screen and (min-width:480px){
/* stickyやめ */
  /* section {
    height: 1000px;
    position: relative;
    margin-top: 0;
  } */
  /*  */

  /* .slides > div {
    -webkit-background-size: cover !important;
    background-size: cover !important;
  } */
  .slides > div img {
    width: 100% !important;
    left: 0% !important;
  }

  #u1 .slides > div img {
    top: -14vh;
  }
  #u2 .slides > div img {
    top: -22vh;
    /* top: -19vh; */
  }
  #w2 .slides > div img {
    top: -11vh;
    /* top: -10vh; */
  }
  #u3 .slides > div img {
    top: -10vh;
  }
  #w3 .slides > div img {
    top: -12vh;
    /* top: -10vh; */
  }
  #u4 .slides > div img {
    top: -8vh;
  }
  #w4 .slides > div img {
    top: -13vh;
  }
  #u5 .slides > div img {
    top: -8vh;
  }
  #w5 .slides > div img {
    top: -30vh;
    /* top: -25vh; */
  }
  #u6 .slides > div img {
    top: -11vh;
  }
  #w6 .slides > div img {
    top: -26vh;
    /* top: -25vh; */
  }
/* --------- */
  #w2-2 img {
    top: -54vh !important;
  }
  #w3-2 img {
    top: -54vh !important;
  }
  #w5-2 img {
    top: -54vh !important;
  }
}
@media screen and (min-width:480px) and (orientation: portrait){
  .slides > div img {
    object-fit: cover !important;
    height: 100vh;
    top: 0 !important;
  }
}


/* ----------------------------------------- */
/* スペック */
/* ----------------------------------------- */
.spec_wrapper {
  /* display: flex; */
  position: absolute;
  top: 53%;
  right: 0;
}
.spec_wrapper.left {
  left: 0;
  right: auto;
}

.spec_wrapper .spec_data a {
  z-index: 11;
  background: #8585857d;
  padding: .5em 0 .6em 1em;
  margin-top: .8em;
  width: 12em;
}
.spec_wrapper.left .spec_data a{
  padding-left: 1.5em;
}
.women .spec_wrapper .spec_data a {
  width: 13.5em;
}

/* スペック文字指定 */
.spec_data p {
  line-height: 1.1;
}
.spec_data p:first-child {
  font-size: 1.5em;
  letter-spacing: .2em;
  font-style: italic;
}
.spec_data span {
  font-size: .7em;
  display: block;
}
.spec_data a {
  display: block;
  color: #eee;
}
.spec_data a:hover {
  opacity: .5;
}
.spec_data a::after {
  content: "MORE";
  font-style: italic;
  font-size: .8em;
  width: 6em;
  display: flex;
  margin-top: .8em;
  background-image: url(images/d_arrow.svg);
  background-position-x: right;
  background-repeat: no-repeat;
}

@media screen and (min-width:480px){
  #u2 .spec_wrapper, #w2 .spec_wrapper {
    right: 0;
    left: auto;
  }
  #w3 .spec_wrapper {
    left: 0;
    right: auto;
  }
  #w3 .spec_wrapper .spec_data a {
    padding-left: 1.5em;
  }
}

/* sa */
.sa {
  opacity: 0;
  transition: all .5s ease;
}
.sa.sa2 {
  opacity: 0;
  transition: all .7s cubic-bezier(0.18, 0.89, 0.76, 1.39);
}
.sa.show {
  opacity: 1;
  transform: none !important;
}
.sa--slide {
  transform: translate(100px, 0);
}
.left .sa--slide {
  transform: translate(-100px, 0);
}
.sa--up {
  transform: translate(0, 100px);
}
.sa--ro {
  transform: translateX(-100vw) translateY(-50vh) rotate(90deg);
}
@media screen and (min-width:480px){
  #u2 .sa--slide, #w2 .sa--slide {
    transform: translate(100px, 0);
  }
  #w3 .sa--slide {
    transform: translate(-100px, 0);
  }
}


/* ----------------------------------------- */
/* フッター */
/* ----------------------------------------- */
footer {
  text-align: center;
  background: #40484C;
}
footer a {
  background: #6E7477;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 0;
}
footer a:hover {
  color: #ff2755;
  transition: .5s;
}
footer a::before {
  content: url(images/d_arrow.svg);
  width: 1.3em;
  margin-right: 1em;
  margin-top: .2em;
  display: inline-block;
}
footer p {
  font-size: .7em;
  letter-spacing: 0;
  /* color: #5b5b5b; */
  padding: 1em 0;
}