@charset "UTF-8";

body {
  margin: 0;
  height: 100svh;
  overflow: hidden;
}

.logoObj {
  width: auto;
  position: fixed;
  bottom: 10.3%;
  left: 9.5%;
  mix-blend-mode: difference;
  height: 62px;
  z-index: 10;
}
.logoObj a {
  width: auto;
  height: 100%;
}
#scrollArea {
  display: flex;
  flex-direction: row;
  height: 100svh;
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
  padding: 0 35% 0 0;
}
#scrollArea .articleSet {
  display: flex;
  flex-direction: row;
}
video {
  width: auto;
  height: 100%;
}
img {
  width: auto;
  height: 100%;
}
.creditLists {
  margin: 1em 0 0;
}
.creditLists .creditList {
}
.creditLists .creditList + .creditList {
}
.creditLists .creditList a {
  text-decoration: none;
  color: #000;
  text-align: right;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 300;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 0;
  display: flex;
  justify-content: flex-start;
}
.creditLists.clrWh .creditList a {
  color: #fff;
}
.creditLists.txtR .creditList a {
  justify-content: flex-end;
}

.creditLists .creditList .name {
  width: 4em;
  display: block;
  margin: 0 1.5em 0 0;
  text-align: left;
}
.creditLists .creditList .price {
  width: auto;
  text-align: left;
}
.creditLists.txtL {
}
.creditLists.txtL .creditList {
}
.creditLists.txtL .creditList a {
}


/* SP design */
@media screen and (min-width: 768px) {
  body {
    margin: 0;
    height: 100svh;
    overflow: hidden;
  }

  .logoObj {
    bottom: 9.5%;
    left: 4%;
    height: 90px;
  }
  #scrollArea {
    display: flex;
    flex-direction: row;
    height: 100svh;
    width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    padding: 0 30% 0 0;
  }
  #scrollArea .articleSet {
    display: flex;
    flex-direction: row;
  }
  video {
    width: auto;
    height: 100%;
  }
  img {
    width: auto;
    height: 100%;
  }
  .creditLists {
    margin: 0.5em 0 0;
  }
  .creditLists .creditList {
  }
  .creditLists .creditList + .creditList {
  }
  .creditLists .creditList a {
    font-size: 9px;
    line-height: 1.6;
  }
  .creditLists .creditList .name {
    width: 5em;
    display: block;
    margin: 0 1.5em 0 0;
    text-align: left;
  }
  .creditLists .creditList .price {
    width: auto;
    text-align: left;
  }
  .creditLists.txtL {
  }
  .creditLists.txtL .creditList {
  }
  .creditLists.txtL .creditList a {
  }
}
.imgObj {
  position: relative;
}
.imgGlp {
  display: flex;
  flex-flow: wrap;
}

a:hover {
  opacity: 1.0;
}
/* .set01 a:hover {
  opacity: 0.7;
} */

.set01 .txtObj {
  height: 2%;
  display: flex;
  margin: auto 2% 32vh -2vh;
  z-index: 1;
}
.set01 {
  height: 83%;
  margin: auto 8% auto 30.5%;
}

.set02 {
  margin: 0 0% 0 0;
}
/* .set02 a:hover {
  opacity: 0.7;
} */

.set03 {
}

.set04 {
}

.set05 {
}

.set06 {
}

.set07 {
}

.set08 {
}

.set09 {
}

.set10 {margin: 0 -84% 0 0%;/* width: 152vh; *//* height: 100vh; */}



.set_last {
  margin: 0 0% 0 210%;
  padding-right: 40%;
}
.set_last .ttlObj {
  height: 1.8%;
  margin: auto 5% auto 0;
}

.set_last .txtObj {
  height: 1.5%;
  display: flex;
  margin: auto 0 auto 0;
  padding-right: 5%;
  padding-left: 5%;
}

.set_last .imgTxtBlk {
  /* height: 32svh; */
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
  width: 100%;
}
.set_last .imgTxtBlk .imgLists {
  display: flex;
  flex-flow: wrap;
  width: 113vh;
  /* height: 40svh; */
  align-items: center;
  /* height: 100%; */
}
.set_last .imgTxtBlk .imgLists .imgList {
  width: calc(100% / 6 - 1%);
  margin: 0 0 0.5% auto;
  display: flex;
}
.set_last .imgTxtBlk .imgLists .imgList img {
  width: 100%;
  height: auto;
}
.set_last .imgTxtBlk .imgLists .imgList + .imgList {
}
.set_last .imgTxtBlk .imgLists .imgList a {
}
.set_last .imgTxtBlk .imgLists .imgList a:hover {
  opacity: 1;
}

.set_last .imgTxtBlk .imgLists .imgList a:before {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.66);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.5s ease;
}
.set_last .imgTxtBlk .imgLists .imgList a:hover::before {
  opacity: 1;
  transition: 0.5s ease;
}
.set_last .imgTxtBlk .bkBtn {
  height: 1svh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3% 0 0 auto;
}
.set_last .imgTxtBlk .bkBtn a {
  line-height: 1;
  width: 100%;
  height: 100%;
  display: flex;
}
.set_last .imgTxtBlk .bkBtn a:hover {
}

.i01-1 img {
  height: 75vh;
}

.i01-1 {
  margin: 2% 1.5% 0 2.8vh;
}
.i01-1 .creditLists {
  /* display: flex; */
  flex-flow: column;
  /* align-items: flex-end; */
  margin: calc(-115*(100vw/750)) 0% 0 108%;
  width: 160px;
}

.i01-2 img {
  height: 46svh;
}

.i01-2 {
  margin: 17.4% 3% 1.5% 5.5%;
  height: 46svh;
}

.i02-1 img {
  height: 49svh;
  z-index: 1;
}

.i02-1 {
  margin: 6% 0 3% 9%;
}

.i02-2 img {
  height: 60.5vh;
  z-index: 1;
}
.i02-2 {
  margin: 22.2% 4% 8% 0%;
}

.i02-2 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: 6% 0% 4% 9%;
}


.i03-1 img {
  height: 58vh;
  z-index: 0;
}
.i03-1 {
  margin: 6.1% 0 0 12.7%;
  z-index: 10;
}

.i03-2 img {
  z-index: 0;
  height: 53vh;
}
.i03-2 {
  margin: 23.5% 0 0 -13.5%;
  position: relative;
  z-index: 0;
}
.i03-2 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: 0% 0% 3% 22.5%;
}


.i04-1 img,
.i04-2 img {
  height: 57vh;
}
.i04-1 {
  margin: 15.5% 0 0 5.5%;
}
.i04-2 {
  margin: 15.5% 0 0 0%;
}
.i04-2 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  margin: 5% 10% 0 0;
}

.i04-3 img {
  z-index: 0;
  height: 100vh;
}
.i04-3 {
  margin: 0 0 0 7%;
}
.i04-3 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  margin: -17% calc(-300*(100vw/750)) 0 0;
}

.i05-1 img {
  z-index: 0;
  height: 55vh;
}
.i05-1 {
  margin: 6% 0 0 27.5%;
  height: 55vh;
}
.i05-1 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  margin: 6% 2% 0 0;
}

.i05-2 img {
  z-index: 0;
  height: 74vh;
}
.i05-2 {
  margin: 29% 0 0 3.5%;
}

.i06-1 img {
  z-index: 0;
  height: 61vh;
}
.i06-1 {
  margin: 27.8% 0 0 37.8%;
}
.i06-1 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  margin: 0% 22% 6.5% 0;
}

.i06-2 img {
  z-index: 0;
  height: 73vh;
}
.i06-2 {
  margin: 1% 0 0 -5.7%;
}

.i07-1 img {
  z-index: 0;
  height: 68vh;
}
.i07-1 {
  margin: 22.5% 0 0 53.5%;
}
.i07-1 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  margin: -9% calc(-310*(100vw/750)) 0 0;
}

.i07-2 img {
  z-index: 0;
  height: 36vh;
}
.i07-2 {
  margin: 38% 0 0 4%;
  height: 36vh;
}

.i08-1 img {
  /* z-index: 0; */
  height: 38vh;
}
.i08-1 {
  margin: 14.5% 0 0 50%;
  z-index: 10;
}

.i08-2 img {
  z-index: 0;
  height: 75.5vh;
}
.i08-2 {
  margin: 9% 0 0 -19%;
  position: relative;
  z-index: 0;
}

.i08-3 img {
  z-index: 0;
  height: 43vh;
}
.i08-3 {
  margin: 35% 0 0 -17%;
}
.i08-3 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: 6% 0 0 69%;
  width: 160px;
}



.i09-1 img {
  z-index: 0;
  height: 66vh;
}
.i09-1 {
  margin: 22.4% 0 0 35%;
}

.i09-2 img,
.i09-3 img {
  height: 30.5vh;
}
.i09-2 {
  margin: 22.4% 0 0 4%;
}
.i09-2 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: 10% 0% 0 3%;
  width: 160px;
}

.i09-3 {
  margin: 22.4% 0 0 -2.1%;
}

.i10-1 img {
  height: 98vh;
}
.i10-1 {
  margin: 0.5% 0 0 20.2%;
}

.i10-2 img {
  height: 59vh;
}
.i10-2 {
  margin: 9.7% 0 0 3%;
}

.i10-2 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: 9% 0% 0 4%;
}

/* PC design */
@media screen and (min-width: 768px) {
  .imgObj {
    position: relative;
  }
  .imgGlp {
    display: flex;
    flex-flow: wrap;
  }

  .set01 .txtObj {
    height: 2%;
    display: flex;
    margin: auto 3.5% 34vh -15vh;
  }
  .set01 {
      height: 87%;
      margin: auto 8% auto 10%;
  }
  .set02 {
    margin: 0 0% 0 -5%;
  }

  .set03 {
    margin: 0 0% 0 1.5%;
  }

  .set04 {
    margin: 0 0% 0 1.5%;
  }

  .set05 {
    margin: 0 0% 0 1.5%;
  }

  .set06 {
    margin: 0 0% 0 1.5%;
  }

  .set07 {
    margin: 0 0% 0 1.5%;
  }

  .set08 {
    margin: 0 0% 0 1.5%;
  }
  .set09 {
    margin: 0 0% 0 1.5%;
  }

  .set10 {
    margin: 0 0 0 0%;
    width: 132vh;
  }

  .set_last .txtObj {
    height: 1.5%;
    display: flex;
    margin: 25% 3.5% 51vh 61vh;
    padding-right: 0%;
    padding-left: 0%;
  }

  .set_last {
    margin: 0 0 0 -1%;
    *margin: 0 0 0 -145%;
    padding-right: 0%;
  }
  .set_last .ttlObj {
    height: 1.8vh;
    margin: auto 5% auto 0;
  }


  .set_last .imgTxtBlk {
    display: flex;
    align-items: center;
    flex-flow: column;
    justify-content: center;
  }
  .set_last .imgTxtBlk .imgLists {
    display: flex;
    flex-flow: wrap;
    width: 54.7vw;
    align-items: center;
  }
  .set_last .imgTxtBlk .imgLists .imgList {
    height: auto;
    margin: 0 0 1% auto;
    display: flex;
  }
  .set_last .imgTxtBlk .imgLists .imgList img {
  }
  .set_last .imgTxtBlk .imgLists .imgList + .imgList {
  }
  .set_last .imgTxtBlk .imgLists .imgList a {
    display: flex;
  }
  .set_last .imgTxtBlk .imgLists .imgList a:hover {
    opacity: 1;
  }

  .set_last .imgTxtBlk .imgLists .imgList a:before {
    content: "";
    position: absolute;
    background: rgba(0, 0, 0, 0.66);
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.5s ease;
  }
  .set_last .imgTxtBlk .imgLists .imgList a:hover::before {
    opacity: 1;
    transition: 0.5s ease;
  }
  .set_last .imgTxtBlk .bkBtn {
    height: 1svh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3% 0 0 auto;
  }
  .set_last .imgTxtBlk .bkBtn a {
    line-height: 1;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .i01-1 img {
    height: 76vh;
    z-index: 0;
  }

  .i01-1 {
    margin: 2.5% 1.2% 0 0.8%;
  }

  .i01-1 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    margin: -12% -33.2% 0 0;
    width: auto;
  }

 .i01-2 img {
    height: 50vh;
    z-index: 1;
  }

  .i01-2 {
    margin: 17.5% 2% 0 4.7%;
    height: 50vh;
  }

  .i02-1 img {
    height: 49vh;
    z-index: 0;
  }
  .i02-1 {
    margin: 4% 0 0 7.5%;
  }


  .i02-2 img {
    height: 64.4vh;
    z-index: 3;
  }
  .i02-2 {
    margin: 17.3% 0% 0% 0%;
  }

  .i02-2 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: 10% 0 4% 6.5%;
  }


  .i03-1 img {
    height: 56.5vh;
  }
  .i03-1 {
    margin: 7.7% 0 0 9.5%;
    z-index: 10;
  }

  .i03-2 img {
    z-index: 0;
    height: 51.2vh;
  }
  .i03-2 {
    margin: 29.5% 0 0 -16.5%;
    position: relative;
    z-index: 0;
  }

  .i03-2 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: -6.3% 0% 2.3% 27%;
  }

  .i04-1 img,
  .i04-2 img {
    height: 56vh;
  }
  .i04-1 {
    margin: 14.2% 0 0 -2%;
  }
  .i04-2 {
    margin: 14.2% 0 0 0%;
  }

  .i04-2 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    margin: 4.7% 10% 2.3% 0%;
  }

  .i04-3 img {
    z-index: 0;
    height: 99vh;
  }
  .i04-3 {
    margin: 0% 0 0 6%;
    position: relative;
    z-index: 0;
  }
  .i04-3 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    margin: -9% -25.5% 0% 0%;
  }

  .i05-1 img {
    height: 42vh;
  }
  .i05-1 {
    margin: 5.8% 0 0 11.3%;
    height: 42vh;
  }
  .i05-1 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    margin: 6% 2% 0% 0%;
  }

  .i05-2 img {
    z-index: 0;
    height: 77vh;
  }
  .i05-2 {
    margin: 27% 0 0 3.5%;
    position: relative;
    z-index: 0;
  }

  .i06-1 img {
    height: 56vh;
  }
  .i06-1 {
    margin: 35% 0 0 18.8%;
  }
  .i06-1 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    margin: 0% 23% 6% 0%;
  }

  .i06-2 img {
    height: 74vh;
  }
  .i06-2 {
    margin: 1% 0 0 -5.5%;
  }

  .i07-1 img {
    height: 67vh;
  }
  .i07-1 {
    margin: 22% 0 0 25%;
  }
  .i07-1 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    margin: -7% -38% 6% 0%;
  }

  .i07-2 img {
    height: 35.5vh;
  }
  .i07-2 {
    margin: 45% 0 0 4%;
    height: 35.5vh;
  }

  .i08-1 img {
    height: 39vh;
  }
  .i08-1 {
    margin: 14.3% 0 0 25%;
    z-index: 10;
  }

  .i08-2 img {
    height: 76.5vh;
  }
  .i08-2 {
    margin: 8% 0 0 -19%;
    position: relative;
    z-index: 0;
  }

  .i08-3 img {
    height: 44vh;
  }
  .i08-3 {
    margin: 34.5% 0 0 -17%;
  }
  .i08-3 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    margin: 3.95% -21.5% 0% 0%;
    width: auto;
  }

  .i09-1 img {
    height: 67.2vh;
  }
  .i09-1 {
    margin: 21% 0 0 -5%;
    z-index: 10;
  }

  .i09-2 img,
  .i09-3 img {
    height: 30vh;
  }
  .i09-2 {
    margin: 21% 0 0 3.3%;
  }
  .i09-2 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: 8% 0% 0% 3.5%;
  }

  .i09-3 {
    margin: 21% 0 0 0%;
  }

  .i10-1 img {
    height: 96.5vh;
  }
  .i10-1 {
    margin: 1% 0 0 1%;
  }

  .i10-2 img {
    height: 57vh;
  }
  .i10-2 {
    margin: 14.3% 0 0 3.5%;
  }

  .i10-2 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: 8% 0% 0% 3.5%;
  }

}

.fadeIn {
  transition: transform 1.6s cubic-bezier(0.37, 0, 0.63, 1), opacity 1s cubic-bezier(0.37, 0, 0.63, 1);
  opacity: 0;
  transform: translateX(25px);
}

.fadeIn.animated {
  opacity: 1;
  transform: translateX(0px);
}

.animA img {
  transition: 1s ease-out;
  will-change: transform; /* パフォーマンス向上のため */
}

.noLink {
  pointer-events: none;
}