@charset "UTF-8";
/*リセット
--------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/*メディアクエリー
---------------------------------------------*/
/*変数
---------------------------------------------*/
/* コンテンツ
---------------------------------------------*/
html,
body,
#wrapper {
  width: 100%;
  color: #0A0D17;
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  box-sizing: border-box;
  scroll-behavior: smooth;
  background-color: #0A0D17;
}
@media screen and (max-width: 768px) {
  html,
  body,
  #wrapper {
    font-size: 2.9333333333vw;
    line-height: 2;
  }
}
@media screen and (min-width: 769px) {
  html,
  body,
  #wrapper {
    font-size: 1.09375vw;
    line-height: 2.09;
  }
}
html a,
body a,
#wrapper a {
  text-decoration: none;
  color: #0A0D17;
}

img {
  width: 100%;
  display: block;
}

@media screen and (min-width: 769px) {
  .pcNone {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .pcNone {
    display: block;
  }
}

@media screen and (min-width: 769px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .spNone {
    display: none;
  }
}

div.FV {
  position: fixed;
  z-index: -1;
  top: 0;
  width: 100%;
}
div.FV ul {
  line-height: 0;
}
div.FV ul li img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media screen and (max-width: 768px) {
  div.FV ul li img {
    height: 100dvh;
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  div.FV ul li img {
    width: 100%;
    height: 100vh;
  }
}
div.FV div.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  div.FV div.logo {
    width: 69.7333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.FV div.logo {
    width: 37.34375vw;
  }
}

div.description {
  color: #fff;
  text-align: center;
  margin-top: 100vh;
}
@media screen and (max-width: 768px) {
  div.description {
    padding: 24.2666666667vw 13.3333333333vw 20.9333333333vw;
    margin-top: 100dvh;
  }
}
@media screen and (min-width: 769px) {
  div.description div.wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 63.75vw;
    margin: 0 auto;
    padding-top: 12.0833333333vw;
    padding-bottom: 12.0833333333vw;
  }
}
@media screen and (max-width: 768px) {
  div.description div.wrapper div.text ul {
    margin-bottom: 6.9333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.description div.wrapper div.text ul {
    width: 25vw;
    margin: 0 auto 2.34375vw;
  }
}
@media screen and (max-width: 768px) {
  div.description div.wrapper div.text p {
    margin-bottom: 6.9333333333vw;
  }
}
div.description div.wrapper div.description_img img {
  filter: grayscale(100%); /*モノクロ具合を変更したい場合はこの数値を変更*/
  transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
}
@media screen and (min-width: 769px) {
  div.description div.wrapper div.description_img img {
    width: 28.6458333333vw;
  }
}
div.description div.wrapper div.description_img img.color { /*hoverした時の変化*/
  filter: grayscale(0);
}

div.look {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  div.look {
    margin-bottom: 15.625vw;
  }
}
@media screen and (max-width: 768px) {
  div.look::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #0A0D17;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
}
div.look ul.fade_slide {
  line-height: 0;
  font-size: 0;
}
@media screen and (min-width: 769px) {
  div.look ul.item_img {
    display: flex;
    justify-content: center;
  }
}
div.look ul.item_img li {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  div.look ul.item_img li::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #0A0D17;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
}
div.look ul.item_img li img {
  position: relative;
}
@media screen and (min-width: 769px) {
  div.look ul.item_img li img {
    width: 33.3333333333vw;
  }
}
div.look div.credit_area {
  background-color: rgba(35, 24, 21, 0.6);
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: end;
  display: none;
}
@media screen and (min-width: 769px) {
  div.look div.credit_area {
    width: 33.3333333333vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
div.look div.credit_area ul.creditlist {
  margin-right: 0;
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  div.look div.credit_area ul.creditlist {
    padding-right: 7.0666666667vw;
    padding-top: 8.2666666667vw;
    padding-bottom: 7.0666666667vw;
    width: 69.6vw;
  }
}
@media screen and (min-width: 769px) {
  div.look div.credit_area ul.creditlist {
    width: 16.4948453608vw;
    font-size: 0.7291666667vw;
    padding-right: 2.3958333333vw;
    padding-top: 2.03125vw;
    padding-bottom: 1.71875vw;
  }
}
@media screen and (max-width: 768px) {
  div.look div.credit_area ul.creditlist li {
    margin-bottom: 4.4vw;
  }
}
@media screen and (min-width: 769px) {
  div.look div.credit_area ul.creditlist li {
    margin-bottom: 0.9895833333vw;
  }
}
div.look div.credit_area ul.creditlist li a {
  display: flex;
  justify-content: space-between;
  border-bottom: solid #fff 1px;
}
@media screen and (max-width: 768px) {
  div.look div.credit_area ul.creditlist li a {
    width: 69.6vw;
  }
}
div.look div.credit_area ul.creditlist li a p {
  color: #fff;
  line-height: 1;
}
div.look div.credit_area ul.creditlist li:last-child {
  margin-bottom: 0;
}
div.look div.cross_button {
  position: absolute;
}
@media screen and (max-width: 768px) {
  div.look div.cross_button {
    bottom: 4.2666666667vw;
    left: 4.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.look div.cross_button {
    bottom: 1.5625vw;
    left: 34.8958333333vw;
  }
}
div.look div.cross_button span.cross {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
}
div.look div.cross_button span.cross::before, div.look div.cross_button span.cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #D71E2F;
  width: 1px; /* 棒の幅（太さ） */
  transition-duration: 0.6s;
}
@media screen and (max-width: 768px) {
  div.look div.cross_button span.cross::before, div.look div.cross_button span.cross::after {
    height: 8.2666666667vw; /* 棒の高さ */
  }
}
@media screen and (min-width: 769px) {
  div.look div.cross_button span.cross::before, div.look div.cross_button span.cross::after {
    height: 2.7777777778vw;
  }
}
div.look div.cross_button span.cross::before {
  transform: translate(-50%, -50%) rotate(90deg);
}
div.look div.cross_button span.cross::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
div.look div.cross_button.open span.cross::before {
  background: #fff;
}
div.look div.cross_button.open span.cross::after {
  transform: translate(-50%, -50%) rotate(90deg);
  background: #fff;
}

span.small-text {
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  span.small-text {
    font-size: 1.8666666667vw;
  }
}
@media screen and (min-width: 769px) {
  span.small-text {
    font-size: 0.4635416667vw;
  }
}

@media screen and (max-width: 768px) {
  p.nowrap {
    white-space: nowrap;
  }
}

@media screen and (min-width: 769px) {
  div.look_7, div.look_8, div.look_9, div.look_10 {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 769px) {
  div.look_2 div.credit_area, div.look_10 div.credit_area {
    left: 50%;
    transform: none;
  }
}
@media screen and (min-width: 769px) {
  div.look_2 div.cross_button, div.look_10 div.cross_button {
    left: 51.5625vw;
  }
}

@media screen and (min-width: 769px) {
  div.pc_flex {
    display: flex;
    justify-content: center;
    margin-top: 9.6875vw;
    margin-bottom: 9.6875vw;
  }
}
@media screen and (min-width: 769px) {
  div.pc_flex div.look_8 div.credit_area {
    left: 0;
    transform: none;
    bottom: 29.5833333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.pc_flex div.look_8 div.cross_button {
    left: 1.5625vw;
    bottom: 31.25vw;
  }
}
@media screen and (min-width: 769px) {
  div.pc_flex div.look_9 {
    margin-top: 29.5833333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.pc_flex div.look_9 div.credit_area {
    left: 0;
    transform: none;
  }
}
@media screen and (min-width: 769px) {
  div.pc_flex div.look_9 div.cross_button {
    left: 1.5625vw;
    bottom: 1.5625vw;
  }
}

footer {
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 768px) {
  footer {
    padding-top: 17.4666666667vw;
    padding-bottom: 16.9333333333vw;
  }
}
@media screen and (min-width: 769px) {
  footer {
    padding-top: 8.5416666667vw;
    padding-bottom: 8.6458333333vw;
  }
}
footer h2 {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  footer h2 {
    width: 58.4vw;
    margin-bottom: 7.4666666667vw;
  }
}
@media screen and (min-width: 769px) {
  footer h2 {
    width: 22.8645833333vw;
    margin-bottom: 3.6458333333vw;
  }
}
@media screen and (max-width: 768px) {
  footer p.text {
    margin-bottom: 8.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  footer p.text {
    font-size: 0.9895833333vw;
    line-height: 2;
    margin-bottom: 3.6458333333vw;
  }
}
footer div.up_btn a p {
  color: #fff;
}
@media screen and (min-width: 769px) {
  footer div.up_btn a p {
    font-size: 1.25vw;
    line-height: 1;
  }
}

.sp_slideIn.is-active::before {
  animation: slideIn_left both 0.8s ease-in-out;
}

.pc_slideIn.is-active::before {
  animation: slideIn_left both 0.8s ease-in-out;
}

@keyframes slideIn_left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
.js-fadeIn {
  transition: 1s;
  opacity: 0;
}

.fadeIn {
  opacity: 1;
}

.fade_500ms {
  opacity: 0;
  visibility: hidden;
  transition: all 1s 500ms linear;
}

.fade_1s {
  opacity: 0;
  visibility: hidden;
  transition: all 1s 1s linear;
}

.fade_1500ms {
  opacity: 0;
  visibility: hidden;
  transition: all 1s 1500ms linear;
}

.fade_2s {
  opacity: 0;
  visibility: hidden;
  transition: all 1s 2s linear;
}

.scroll_lag {
  opacity: 1;
  visibility: visible;
}/*# sourceMappingURL=style.css.map */