@charset "UTF-8";

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

.logoObj {
  width: auto;
  position: fixed;
  bottom: 4.5%;
  left: 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 25% 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: 6em;
  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: 5.5%;
    left: 4%;
    height: 102px;
  }
  #scrollArea {
    display: flex;
    flex-direction: row;
    height: 100svh;
    width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    padding: 0 20% 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% 53vh 12vh;
  z-index: 1;
}
.set01 {
  margin: 0 0% 0 0;
}

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

.set03 {
}

.set04 {
}

.set05 {
}

.set06 {
}

.set07 {
}

.set08 {
}

.set09 {
}

.set10 {margin: 0 0 0 -42%;width: 10vh;}



.set_last {
  margin: 0 0 0 10%;
}
.set_last .ttlObj {
  height: 1.8%;
  margin: auto 5% auto 0;
}

.set_last .txtObj {
  height: 1.5%;
  display: flex;
  margin: 40.5% 7% 51vh 17vh;
}

.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: 68vh;
  /* height: 40svh; */
  align-items: center;
  /* height: 100%; */
}
.set_last .imgTxtBlk .imgLists .imgList {
  width: calc(100% / 5 - 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 img {
  height: 60svh;
}

.i01 {
  margin: 1.5% 1.5% 0 -19.2vh;
}
.i01 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
}
.i02 img {
  height: 59svh;
}

.i02 {
  margin: 14.4% 3% 1.5% -41.8%;
}

.i02 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: -13.5% 0% 0% 105%;
}
.i03 img {
  height: 40svh;
  z-index: 1;
}

.i03 {
  margin: 6% 0 3% 13.5%;
}

.i03 .creditLists {
}

.flex {
  /* display: flex; */
  /* flex-wrap: wrap; */
  height: 60%;
  margin: 2.5% 0 0 -9%;
}

.i04 img,
.i04_2 img {
  height: 30svh;
  z-index: 0;
}

.i04 ,
.i04_2 {
  margin: -0.1% 0px 0 0%;
}

.i04_2 .creditLists {
  /* position: absolute;
  top: 3%;
  right: 105%; */
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  /* margin: 0; */
}

.i05 img {
  height: 60vh;
  z-index: 1;
}
.i05 {
  margin: 8.7% 4% 8% -65.5%;
}

.i05 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: 3% 0% 0 0%;
}
.i06 img {
  height: 100vh;
  z-index: 0;
}
.i06 {
  margin: 0 0 0 -45.95%;
}

.i06 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  margin: 0 35% 0 0;
}
.i07 img {
  z-index: 0;
  height: 88vh;
}
.i07 {
  margin: 0 0 0 38%;
}
.i07 .creditLists {display: flex;flex-flow: column;align-items: flex-start;margin: -211% 0% 0 104%;}
.i08 img {
  height: 29.8vh;
  z-index: 2;
}
.i08 {
  margin: 36% 0 0% -10.4%;
}

.i08 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  margin: 0 18% 8% 0;
}
.i09 img {
  z-index: 1;
  height: 50vh;
}
.i09 {
  margin: 19.1% 4% 0 -98.5%;
}

.i09 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: 3% 0% 0% 0%;
}
.i10 img {
  height: 50vh;
}
.i10 {
  margin: 19.1% 0 0% -4%;
}
.i10 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  margin: 0 18% 8% 0;
}
.i11 img {
  height: 70vh;
}
.i11 {
  margin: 11% 5% 0 -3.5%;
}
.i11 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: -134% 0 0% 104%;
}
.i12 img {
  height: 44vh;
}
.i12 {
  margin: 22.3% 0 0 -75.2%;
}
.i12 .creditLists {
  position: absolute;
  top: 0;
  left: 105%;
}
.i13 img {
  height: 47vh;
}
.i13 {
  margin: 3% 0 3% -26.7%;
}
.i13 .creditLists {
}
.i14 img {
  height: 32vh;
}
.i14 {
  margin: 17% 2% 30% 16%;
}
.i14 .creditLists {
}
.i15 img {
  height: 62vh;
}
.i15 {
  margin: 7.8% 0 0 5%;
}
.i15 .creditLists {
}
.i16 img {
  height: 57.8vh;
}
.i16{
  margin: 38.5% 1% 0 -56.32%;
}

.i17-i18 img {
  height: 64.3vh;
}
.i17-i18{
  margin: 20.2% 0 0% -75.5%;
}
.i17-i18 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: 0% 0 1.6% 0%;
}

.i19 img {
  height: 44.5vh;
}
.i19{
  margin: 8% 1% 0 -217.5%;
}
.i19 .creditLists {
}

.i20 img {
  height: 30vh;
}
.i20{
  margin: 72% 1% 0 -16%;
}
.i20 .creditLists {
}


.i21 img {
  height: 62vh;
}
.i21{
  margin: 8% 1% 0 -56%;
}
.i21 .creditLists {
}

.i22 img {
  height: 100vh;
}
.i22{
  margin: 0% 1% 0 -60%;
}

.i23 img {
  height: 52vh;
}
.i23{
  margin: 0% 1% 0 31.25%;
}

.i24 img {
  height: 58vh;
}
.i24{
  margin: 25.2% 1% 0 -21.25%;
}

.i25 img {
  height: 49.1vh;
}
.i25{
  margin: 25.2% 1% 0 -1.15%;
}
.i25 .creditLists {display: flex;flex-flow: column;align-items: flex-start;margin: -80% 0% 0 109%;}

.i26 img {
  height: 52vh;
}
.i26{
  margin: 9% 1% 0 -274.5%;
}
.i26 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: -134% 0 1.6% 105%;
}


.i27 img {
  height: 46vh;
}
.i27{
  margin: 54% 1% 0 10%;
}
.i27 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: 0% 0 3% 0%;
}

.i28 img {
  height: 78vh;
}
.i28{
  margin: 8% 1% 0 -183.5%;
}
.i28 .creditLists {display: flex;flex-flow: column;align-items: flex-start;margin: -13.7% 0 0% 104%;}

.i29 img {
  height: 56vh;
}
.i29{
  margin: 13% 0% 30% -7%;
}
.i29 .creditLists {
}


.i30 img {
  height: 47vh;
}
.i30{
  margin: 410% 1% 0 -1236%;
}
.i30 .creditLists {display: flex;flex-flow: column;align-items: flex-start;margin: -146% 0% 3% 0%;}

.i31 img {
  height: 47vh;
}
.i31{
  margin: 410% 0% 0 -1%;
}

.i32 img {
  height: 100vh;
}
.i32{
  margin: 0% 1% 0 -1165%;
}


.i33 img {
  height: 60vh;
}
.i33{
  margin: 181.6% 1% 0 625%;
}
.i33 .creditLists {
}

/* 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 1% 51vh 16vh
  }
  .set01 {
    margin: 0 14% 0 0;
  }

  .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 -42%;
    width: 30vh;
  }

  .set_last .txtObj {
    height: 1.5%;
    display: flex;
    margin: 26.5% 5% 51vh 63vh;
  }

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


  .set_last .imgTxtBlk {
    /* height: 32svh; */
    display: flex;
    align-items: center;
    flex-flow: column;
    justify-content: center;
  }
  .set_last .imgTxtBlk .imgLists {
    display: flex;
    flex-flow: wrap;
    width: 48.7vw;
    /* height: 40svh; */
    align-items: center;
    /* height: 100%; */
  }
  .set_last .imgTxtBlk .imgLists .imgList {
    height: auto;
    margin: 0 0 1% auto;
    display: flex;
    /* width: auto; */
  }
  .set_last .imgTxtBlk .imgLists .imgList img {
    /* width: auto; */
    /* height: 100%; */
  }
  .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 img {
    height: 60vh;
    z-index: 0;
  }

  .i01 {
    margin: 2% 1.2% 0 -5.2%;
  }


  .i01 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
  }
  .i02 img {
    height: 60vh;
    z-index: 1;
  }

  .i02 {
    margin: 12.36% 2% 2.5% -47.8%;
  }

  .i02 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: -11.5% 0% 0% 104%;
  }
  .i03 a img {
    height: 35vh;
    z-index: 0;
  }
  .i03 {
    margin: 5.3% 0 0 14%;
  }

  .i03 .creditLists {
  }
  .flex {
    display: flex;
    flex-wrap: wrap;
    height: 60%;
    margin: 2.5% 0 0 -14%;
  }
  .i04 img,
  .i04_2 img{
    height: 30vh;
    z-index: 2;
  }

  .i04 ,
  .i04_2 {
    margin: 0% 0 0 26%;
  }

  .i04_2 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    margin: 1.6% 0% 0 0%;
  }
  
  .i05 img {
    height: 65vh;
    z-index: 3;
  }
  .i05 {
    margin: 9% 0% 0% -65%;
  }

  .i05 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: 1.6% 0 0 0%;
  }
  .i06 img {
    height: 99vh;
    z-index: 2;
    position: relative;
  }
  .i06 {
    margin: 0px 0 0 -41.5%;
  }

  .i06 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    padding: 0 35% 0 0;
  }
  .i07 img {
    z-index: 0;
    height: 92.5vh;
  }
  .i07 {
    margin: 0 0 0 27.5%;
  }

  .i07 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: -212% 0% 0 104%;
  }
  .i08 img {
    height: 24.6vh;
    z-index: 3;
  }
  .i08 {
    margin: 39% 0 0% -10.6%;
  }

  .i08 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    padding: 0 18% 8% 0;
  }
  .i09 img {
    z-index: 1;
    height: 50vh;
  }

  .i09 {
    margin: 19.1% 4% 0 -97%;
  }

  .i10 img {
    height: 49.95vh;
  }

  .i10 {
    margin: 19.1% 0 0 -4%;
  }

  .i09 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: 2.1% 0 0% 0.2%;
  }


  .i11 img {
    height: 72vh;
  }
  .i11 {
    margin: 10.5% 5% 0 -14%;
  }
  .i11 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: -133.6% 0% 0 104%;
  }
  .i12 img {
    height: 50vh;
  }
  .i12{
    margin: 20.5% 0 0 -76.7%;
  }
  .i12 .creditLists {
    position: absolute;
    top: 0;
    left: 105%;
  }
  .i13 img {
    height: 56vh;
  }
  .i13 {
    margin: 1.6% 0 3% -29%;
  }
  .i13 .creditLists {
  }
  .i14 img {
    height: 33vh;
  }
  .i14 {
    margin: 15.5% 2% 10% 18.8%;
  }
  .i14 .creditLists {
  }
  .i15 img {
    height: 72vh;
  }
  .i15 {
    margin: 6.5% 0 0% 6.7%;
  }
  .i15 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
  }

  .i16 img {
    height: 71.6vh;
  }
  .i16 {
    margin: 22.8% 0 0% -56.315%;
  }


  .i17-i18 img {
    height: 79.9vh;
  }
  .i17-i18 {
    margin: 7.5% 0 0% -65.8%;
  }

  .i17-i18 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: 0 0 1% 0;
  }

  .i19 img {
    height: 47vh;
  }
  .i19 {
    margin: 7.7% 0 0% -230%;
  }

  .i19 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: fit-content;
  }

  .i20 img {
    height: 32vh;
  }
  .i20 {
    margin: 74.5% 0 0% -14.2%;
  }

  .i20 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
  }

  .i21 img {
    height: 67vh;
  }
  .i21 {
    margin: 7.7% 0 0% -54.7%;
  }

  .i21 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
  }

  .i22 img {
    height: 98.5vh;
  }
  .i22 {
    margin: 0% 0 0% -69%;
  }

  .i23 img {
    height: 49.5vh;
  }
  .i23 {
    margin: 0% 0 0% 29.95%;
  }

  .i24 img {
    height: 50.1vh;
  }
  .i24 {
    margin: 24.3% 0 0% -19.44%;
  }

  .i25 img {
    height: 49.6vh;
  }
  .i25 {
    margin: 24.3% 0 0% 0%;
  }

  .i25 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: -30% 0% 0% 110%;
  }


  .i26 img {
    height: 60vh;
  }
  .i26 {
    margin: 10% 0 0% -275%;
  }

  .i26 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: fit-content;
    margin: -134% 0 0 105%;
  }

  .i27 img {
    height: 45vh;
  }
  .i27 {
    margin: 56.5% 0 0% 12%;
  }

  .i27 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: 0% 0 3% 0%;
  }

  .i28 img {
    height: 82vh;
  }
  .i28 {
    margin: 8.3% 0 0% -181.5%;
  }

  .i28 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: -9.6% 0 3% 103.8%;
  }

  .i29 img {
    height: 60vh;
  }
  .i29 {
    margin: 13.5% 0 20% -5.5%;
  }

  .i30 img {
    height: 50vh;
  }
  .i30 {
    margin: 129.8% 0 0% -424.5%;
  }

  .i30 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: -144% 0 0% 0%;
  }

  .i31 img {
    height: 50vh;
  }
  .i31 {
    margin: 129.8% 0 0% 0%;
  }

  .set10 .flex {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    margin: 2.5% 0 0 -14%;
  }

  .i32 img {
    height: 98vh;
  }
  .i32 {
    margin: 0% 0 0% -221.5%;
  }

  .i33 img {
    height: 63vh;
  }
  .i33 {
    margin: 60.8% 0 0% 228%;
  }

  .i33 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin: 1.6% 0 0% 0%;
  }
}


.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;
}