@charset "UTF-8";

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

.logoObj {
  width: auto;
  position: fixed;
  bottom: 9.3%;
  left: 17.3%;
  mix-blend-mode: difference;
  height: 95px;
  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 20% 0 0;
}
#scrollArea .articleSet {
  display: flex;
  flex-direction: row;
}
video {
  width: auto;
  height: 110%;
}
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 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: 4%;
  display: flex;
  margin: auto 2% 32vh -8vh;
  z-index: 1;
}
.set01 {
  height: 83%;
  margin: 15% -5% auto 44%;
}

.set02 {
  margin: 0 0% 0 -38%;
}
/* .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 0px 160%;
  padding-right: 10%;
}
.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%; */
  height: 3%;
  display: flex;
  margin: auto 2% 48vh 30vh;
}

.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: 95vh;
  /* height: 52svh; */
  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 86%;
}
.set_last .imgTxtBlk .bkBtn a {
  line-height: 1;
  width: 100%;
  height: 100%;
  display: flex;
}
.set_last .imgTxtBlk .bkBtn a:hover {
}

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

.i01-1 {
    margin: 11.3% 0% 0 0;
}
.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: 81.5svh;
}

.i01-2 {
  /* margin: -7% 3% 1.5% 1%; */
  /* height: 46svh; */
}

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

.i02-1 {
  margin: 7.5% 0 3% 13%;
}

.i02-2 img {
  height: 59.4vh;
  z-index: 3;
  padding: 15px; /* 余白の幅を調整 */
  background-color: white; /* 余白の色 */
  box-sizing: border-box;
}
.i02-2 {
  margin: 10.7% 4% 8% -69.5%;
}

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


.i03-1 img {
  height: 55vh;
}
.i03-1 {
  margin: 16.5% 0 0 -5%;
  z-index: 0;
}

.i03-2 img {
  z-index: 0;
  height: 43.5vh;
}
.i03-2 {
  margin: 30% 0 0 7.5%;
  position: relative;
  z-index: 9;
}
.i03-2 .creditLists {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: -6.3% 0% 2.3% 27%;
}


.i03-3 img {
  height: 64vh;
}
.i03-3 {
  margin: 5.7% 0 0 -13.5%;
  z-index: 0;
}


  .i04-1 img {
    height: 60vh;
  }
  .i04-1 {
    margin: 6.5% 0 0 -2%;
  }
  .i04-2 {
    /* margin: 15.5% 0 0 0%; */
  }


  .flex_0 {
    display: flex;
    flex-wrap: wrap;
    align-content: end;
    gap: 3%;
    margin: -5% 0 0 10%;
    height: 81.5vh;
    width: 126vh;
    z-index: 1;
  }


  .flex {
    display: flex;
    flex-wrap: wrap;
    margin: 9% 0 0 5%;
    height: 100vh;
    width: 100vh;
    z-index: 1;
  }


  .i04-2 img,
  .i04-3 img {
    height: 40vh;
  }
  .i04-3 {
    /* margin: 0 0 0 7%; */
  }

  .i04-4 img {
    height: 75vh;
  }
  .i04-4 {
    margin: 3.5% 0 0 -24.5%;
  }


  .i05-1 img {
    height: 58vh;
  }
  .i05-1 {
    margin: 14% 0 0 -53%;
    /* 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: 58vh;
  }
  .i05-2 {
    margin: 33% 0 0 0%;
    position: relative;
    z-index: 0;
  }

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

  .flex_2 {
    display: flex;
    flex-wrap: wrap;
    margin: 13.5% 0 0 2.8%;
    height: 50%;
    width: 50%;
    gap: 4%;
  }

  .flex_3 {
    display: flex;
    /* flex-wrap: wrap; */
    margin: 4.5% 0 0 -16%;
    /* height: 100%; */
    /* width: 100%; */
  }

  .i06-2 img,
  .i06-3 img {
    height: 36vh;
  }
  .i06-2 {
    /* margin: 0% 0 0 -5.5%; */
  }

  .i06-3 {
    margin: 0% 0 0 0%;
  }

  .i07-1 img {
    height: 40vh;
  }
  .i07-1 {
    margin: 9% 0 0 -24%;
    z-index: 1;
  }
  .i07-1 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    margin: -7% -38% 6% 0%;
  }

  .i07-2 img {
    height: 68vh;
  }
  .i07-2 {
    margin: 28.5% 0 0 -9.2%;
    height: 35.5vh;
  }

  .i08-1 img,
  .i08-2 img {
    height: 60.5vh;
  }
  .i08-1 {
    /* margin: 8% 0 0 -19%;
    position: relative;
    z-index: 0; */
  }

  .i08-2 {
    /* margin: 34.5% 0 0 -17%; */
  }
  .i08-2 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    margin: 3.95% -21.5% 0% 0%;
    width: auto;
  }

  .i09-1 img {
    height: 70vh;
  }
  .i09-1 {
    margin: 18.5% 0 0 0%;
    /* z-index: 10; */
  }

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

  .i10-1 img {
    height: 75.5vh;
  }
  .i10-1 {
    margin: 5.2% 0 0 11%;
  }

  .i10-2 img {
    height: 82vh;
  }
  .i10-2 {
    margin: 3.2% 0 0 5%;
  }

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

  .i10-3 img {
    height: 48vh;
  }
  .i10-3 {
    margin: 12.1% 0 0 11%;
  }


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

  .set01 .txtObj {
    height: 2.5%;
    display: flex;
    margin: auto 5.5% 34vh -20vh;
  }
  .set01 {
      height: 87%;
      margin: auto 8% auto 10%;
  }
  .set02 {
    margin: 0 0% 0 -12%;
  }

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

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

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

    .flex_0 {
        display: flex;
        flex-wrap: wrap;
        align-content: start;
        margin: -5.5% 0 0 5%;
        height: 85.4vh;
        width: 117vh;
        gap: 3%;
        z-index: 1;
    }


  .flex_2 {
    display: flex;
    flex-wrap: wrap;
    margin: 13.5% 0 0 2.8%;
    height: 50%;
    width: 50%;
    gap: 4%;
  }

  .flex_3 {
    display: flex;
    /* flex-wrap: wrap; */
    margin: 4.5% 0 0 -40%;
    /* height: 100%; */
    /* width: 100%; */
  }

  .set_last .txtObj {
    height: 2.2%;
    display: flex;
    margin: 21.5% 3.5% 51vh 100vh;
    padding-right: 0%;
    padding-left: 2%;
  }

  .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: 48.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: 65vh;
    z-index: 0;
    /* padding-top: 20.4vh; */
    margin-top: 9.2vh;
  }

  .i01-1 {
    margin: 10.7% 0% 0 0;
    /* margin: 12.5% 1.2% 0 3.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: 85.4vh;
    z-index: 1;
  }

  .i01-2 {
    /* margin: -6% 2% 0 1.7%; */
    /* height: 50vh; */
  }

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


  .i02-2 img {
    height: 63.4vh;
    z-index: 3;
    padding: 15px; /* 余白の幅を調整 */
    background-color: white; /* 余白の色 */
    box-sizing: border-box;
  }
  .i02-2 {
    margin: 11.5% 0% 0% -70.5%;
  }

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


  .i03-1 img {
    height: 58.5vh;
  }
  .i03-1 {
    margin: 17.3% 0 0 -12%;
    z-index: 0;
  }

  .i03-2 img {
    z-index: 0;
    height: 44.5vh;
  }
  .i03-2 {
    margin: 30% 0 0 6.5%;
    position: relative;
    z-index: 9;
  }

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

  .i03-3 img {
    height: 69vh;
  }
  .i03-3 {
    margin: 5.7% 0 0 -12.7%;
    z-index: 0;
  }
  
  .i04-1 img {
    height: 64vh;
  }
  .i04-1 {
    margin: 7.5% 0 0 -7%;
  }
  .i04-2 {
    /* margin: 15.5% 0 0 0%; */
  }

  .flex {
    display: flex;
    flex-wrap: wrap;
    margin: 9% 0 0 5%;
    height: 100vh;
    width: 100vh;
    z-index: 1;
  }


  .i04-2 img,
  .i04-3 img {
    height: 42vh;
  }
  .i04-3 {
    /* margin: 0 0 0 7%; */
  }

  .i04-4 img {
    height: 82vh;
  }
  .i04-4 {
    margin: 3.5% 0 0 -22.5%;
  }


  .i05-1 img {
    height: 62vh;
  }
  .i05-1 {
    margin: 14% 0 0 -63.7%;
    /* 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: 62vh;
  }
  .i05-2 {
    margin: 33% 0 0 0%;
    position: relative;
    z-index: 0;
  }

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

  .i06-2 img,
  .i06-3 img {
    height: 37vh;
  }
  .i06-2 {
    /* margin: 0% 0 0 -5.5%; */
  }

  .i06-3 {
    margin: 0% 0 0 0%;
  }

  .i07-1 img {
    height: 45vh;
  }
  .i07-1 {
    margin: 8% 0 0 -45%;
    z-index: 1;
  }
  .i07-1 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    margin: -7% -38% 6% 0%;
  }

  .i07-2 img {
    height: 69.5vh;
  }
  .i07-2 {
    margin: 28.5% 0 0 -9.2%;
    height: 35.5vh;
  }

  .i08-1 img,
  .i08-2 img {
    height: 62.5vh;
  }
  .i08-1 {
    /* margin: 8% 0 0 -19%;
    position: relative;
    z-index: 0; */
  }

  .i08-2 {
    /* margin: 34.5% 0 0 -17%; */
  }
  .i08-2 .creditLists {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    margin: 3.95% -21.5% 0% 0%;
    width: auto;
  }

  .i09-1 img {
    height: 70vh;
  }
  .i09-1 {
    margin: 18.5% 0 0 -29%;
    /* z-index: 10; */
  }

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

  .i10-1 img {
    height: 77.5vh;
  }
  .i10-1 {
    margin: 8% 0 0 -4%;
  }

  .i10-2 img {
    height: 85vh;
  }
  .i10-2 {
    margin: 5.1% 0 0 5%;
  }

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

  .i10-3 img {
    height: 48vh;
  }
  .i10-3 {
    margin: 19.1% 0 0 17%;
  }

}

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