@charset "UTF-8";


/* ベーススタイル
======================================================== */
.font-noto,
.lpTtl,
.credit,
.all_btn a {
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.credit a {
  display: inline-block;
  line-height: 1.2;
}
.credit span {
  text-decoration: underline;
}

/* first_view
======================================================== */
.first_view .main_img {
  width: var(--container-default);
  margin: 0 auto;
}
.first_view .lpTtl {
  font-size: 2.8rem;
  text-align: center;
  margin-top: 6rem;
  font-weight: bold;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .first_view .main_img {
    width: calc(750 * (100vw / 750));
    height: calc(1000 * (100vw / 750));
    margin: 0 auto;
    background: #000;
  }
  .first_view .lpTtl {
    font-size: calc(28*(100vw / 750));
    margin-top: calc(64*(100vw / 750));
    line-height: 1.42;
  }
}


/* contents01
======================================================== */
.contents01 {
  margin-top: 6.4rem;
}
@media screen and (max-width: 767px) {
  .contents01 {
    margin-top: calc(63 * (100vw / 750));
  }
}


/* flexBox01 */
.contents01 .flexBox01 {
  width: 96rem;
  margin: 0 auto;
  display: block;
}
.contents01 .flexBox01 .box1 {
  width: 64rem;
  margin-left: auto;
}
.contents01 .flexBox01 .box2 {
  width: 80rem;
  margin-top: 3rem;
}
.flexBox01_txt {
  width: 79rem;
  margin: 2.2rem auto 0;
  font-size: 2rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
@media screen and (max-width: 767px) {
  .contents01 .flexBox01 {
    width: calc(750 * (100vw / 750));
    margin: 0 auto;
    display: block;
  }
  .contents01 .flexBox01 .box1 {
    width: calc(650 * (100vw / 750));
    margin-left: auto;
  }
  .contents01 .flexBox01 .box2 {
    width: calc(750 * (100vw / 750));
    margin-top: calc(30 * (100vw / 750));
  }
  .flexBox01_txt {
    width: calc(650*(100vw / 750));
    margin: calc(27*(100vw / 750)) auto 0;
    font-size: calc(22*(100vw / 750));
    line-height: 1.636;
    overflow-wrap: anywhere;
  }
}


/* flexBox02 */
.flexBox02 {
  width: 96rem;
  margin: 12.7rem auto 0;
  display: flex;
  justify-content: flex-start;
}
.flexBox02 .box1 {
  width: 48rem;
}
.flexBox02 .box2 {
  width: 38rem;
  margin-top: 6.2rem;
  margin-left: 6rem;
}
@media screen and (max-width: 767px) {
  .flexBox02 {
    width: calc(650*(100vw / 750));
    margin: calc(130*(100vw / 750)) 0 0 0;
    display: block;
  }
  .flexBox02 .box1 {
    width: calc(550 * (100vw / 750));
  }
  .flexBox02 .box2 {
    width: calc(360 * (100vw / 750));
    margin-top: calc(30 * (100vw / 750));
    margin-left: auto;
  }
}


/* flexBox03 */
.flexBox03 {
  width: 96rem;
  margin: 3rem auto 0;
}
.flexBox03 .box1 {
  width: 44rem;
  margin-left: auto;
}
.flexBox03 .box2 {
  width: 58rem;
  margin-top: -44rem;
  position: relative;
  z-index: 5;
}
.flexBox03 .box2 .sub_flex {
  width: 58rem;
  display: flex;
  justify-content: space-between;
}
.flexBox03 .box2 .sub_flex .img06,
.flexBox03 .box2 .sub_flex .img07 {
  width: 28rem;
}
.flexBox03 .box2 .credit {
  font-size: 2rem;
  margin-top: 7.2rem;
}
@media screen and (max-width: 767px) {
  .flexBox03 {
    width: calc(650 * (100vw / 750));
    margin: calc(30 * (100vw / 750)) auto 0;
  }
  .flexBox03 .box1 {
    width: calc(550 * (100vw / 750));
    margin: 0 auto;
  }
  .flexBox03 .box2 {
    width: calc(650 * (100vw / 750));
    margin-top: calc(28 * (100vw / 750));
    position: relative;
    z-index: 5;
  }
  .flexBox03 .box2 .sub_flex {
    width: calc(650 * (100vw / 750));
    display: flex;
    justify-content: space-between;
  }
  .flexBox03 .box2 .sub_flex .img06,
  .flexBox03 .box2 .sub_flex .img07 {
    width: calc(310 * (100vw / 750));
  }
  .flexBox03 .box2 .credit {
    font-size: calc(20*(100vw / 750));
    margin-top: calc(36*(100vw / 750));
    text-align: center;
    margin-left: calc(-17*(100vw / 750));
  }
}


/* flexBox04 */
.flexBox04 {
  width: 96rem;
  margin: 13.1rem auto 0;
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
}
.flexBox04 .box1 {
  width: 48rem;
  margin-left: auto;
}
.flexBox04 .box2 {
  width: 38rem;
  margin-left: 4rem;
  margin-top: 4.5rem;
}
@media screen and (max-width: 767px) {
  .flexBox04 {
    width: calc(600 * (100vw / 750));
    margin: calc(131 * (100vw / 750)) 0 0 calc(50 * (100vw / 750));
    display: block;
  }
  .flexBox04 .box1 {
    width: calc(600 * (100vw / 750));
    margin-left: 0;
  }
  .flexBox04 .box2 {
    width: calc(325 * (100vw / 750));
    margin-left: auto;
    margin-top: calc(29 * (100vw / 750));
  }
}


/* flexBox05 */
.flexBox05 {
  width: 98.3rem;
  margin: -0.1rem auto 0;
}
.flexBox05 .box1 {
  width: 44rem;
  margin-left: 1.2rem;
}
.flexBox05 .box2 {
  width: 58rem;
  margin-left: auto;
  margin-top: -44rem;
  position: relative;
  z-index: 5;
}
.flexBox05 .box2 .sub_flex {
  width: 58rem;
  margin-left: 1.2rem;
  display: flex;
  justify-content: space-between;
}
.flexBox05 .box2 .sub_flex .img11,
.flexBox05 .box2 .sub_flex .img12 {
  width: 28rem;
}
.flexBox05 .box2 .credit {
  font-size: 2rem;
  margin-top: 7.2rem;
  margin-left: 18.5rem;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  /* flexBox05 */
  .flexBox05 {
    width: calc(750 * (100vw / 750));
    margin: calc(31 * (100vw / 750)) auto 0;
  }
  .flexBox05 .box1 {
    width: calc(550*(100vw / 750));
    margin-left: auto;
    margin-right: calc(50*(100vw / 750));
  }
  .flexBox05 .box2 {
    width: calc(650*(100vw / 750));
    margin: calc(30*(100vw / 750)) auto 0;
    position: relative;
    z-index: 5;
  }
  .flexBox05 .box2 .sub_flex {
    width: calc(650*(100vw / 750));
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .flexBox05 .box2 .sub_flex .img11,
  .flexBox05 .box2 .sub_flex .img12 {
    width: calc(310 * (100vw / 750));
  }
  .flexBox05 .box2 .sub_flex .img12 {
    margin-top: calc(190*(100vw / 750));
  }
  .flexBox05 .box2 .credit {
    font-size: calc(20*(100vw / 750));
    margin-top: calc(34*(100vw / 750));
    margin-left: calc(0*(100vw / 750));
    text-align: center;
    white-space: nowrap;
  }
}

/* contents02
======================================================== */
.contents02 {
  margin-top: 13.4rem;
}
.contents02 .img13 {
  width: 64rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .contents02 {
    margin-top: calc(133 * (100vw / 750));
  }
  .contents02 .img13 {
    width: calc(650 * (100vw / 750));
    margin: 0 auto;
  }
}

/* flexBox06 */
.flexBox06 {
  width: 96rem;
  margin: 3rem auto 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.flexBox06 .box1 {
  width: 40rem;
  margin-top: 6rem;
}
.flexBox06 .box2 {
  width: 50rem;
}
.flexBox06_CR {
  font-size: 2rem;
  text-align: center;
  margin-top: 3rem;
}
.img16 {
  width: 64rem;
  margin: 13.4rem auto 0;
}
@media screen and (max-width: 767px) {
  .flexBox06 {
    width: calc(750*(100vw / 750));
    margin: calc(30*(100vw / 750)) auto 0;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }
  .flexBox06 .box1 {
    width: calc(360 * (100vw / 750));
    margin-top: calc(0 * (100vw / 750));
  }
  .flexBox06 .box2 {
    width: calc(360 * (100vw / 750));
    margin-top: calc(202 * (100vw / 750));
  }
  .flexBox06_CR {
    font-size: calc(20 * (100vw / 750));
    text-align: center;
    margin-top: calc(32 * (100vw / 750));
  }
  .img16 {
    width: calc(750 * (100vw / 750));
    margin: calc(133 * (100vw / 750)) auto 0;
  }
}

/* flexBox07 */
.flexBox07 {
  width: 96rem;
  margin: 3rem auto 0;
  display: flex;
  flex-wrap: wrap;
}
.flexBox07 .img17 {
  width: 40rem;
  order: 1;
}
.flexBox07 .img18 {
  width: 24rem;
  margin: 9.9rem 0 0 2rem;
  order: 2;
}
.flexBox07 .img19 {
  width: 50rem;
  margin: 3rem 0 0 2rem;
  order: 5;
}
.flexBox07 .img20 {
  width: 40rem;
  margin: 15.4rem 0 0 4rem;
  order: 4;
}
.flexBox07 .img21 {
  width: 24rem;
  margin: 19.5rem 0 0 2rem;
  order: 3;
}
.flexBox07_CR {
  font-size: 2rem;
  text-align: center;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .flexBox07 {
    width: calc(750 * (100vw / 750));
    margin: calc(30 * (100vw / 750)) auto 0;
    display: flex;
    flex-wrap: wrap;
  }
  .flexBox07 .img17 {
    width: calc(390 * (100vw / 750));
    margin-left: calc(50*(100vw / 750));
    order: 1;
  }
  .flexBox07 .img18 {
    width: calc(275 * (100vw / 750));
    margin: calc(70 * (100vw / 750)) 0 0 calc(35 * (100vw / 750));
    order: 2;
  }
  .flexBox07 .img19 {
    width: calc(650 * (100vw / 750));
    margin: calc(30 * (100vw / 750)) auto 0;
    order: 3;
  }
  .flexBox07 .img20 {
    width: calc(360 * (100vw / 750));
    margin: calc(30 * (100vw / 750)) 0 0 calc(0 * (100vw / 750));
    order: 4;
  }
  .flexBox07 .img21 {
    width: calc(360 * (100vw / 750));
    margin: calc(28 * (100vw / 750)) 0 0 calc(30 * (100vw / 750));
    order: 5;
  }
  .flexBox07_CR {
    font-size: calc(20 * (100vw / 750));
    text-align: center;
    margin-top: calc(33 * (100vw / 750));
  }
}


/* flexBox08 */
.flexBox08 {
  width: 96rem;
  margin: 13.3rem auto 0;
}
.flexBox08 .box1 {
  width: 48rem;
  margin-left: auto;
}
.flexBox08 .box2 {
  width: 87rem;
  display: flex;
  justify-content: space-between;
  margin-top: -29.4rem;
}
.flexBox08 .box2 .img23 {
  width: 43.9rem;
}
.flexBox08 .box2 .img24 {
  width: 30rem;
  margin-top: 32.3rem;
}
.flexBox08_CR.credit {
  font-size: 2rem;
  text-align: center;
  margin-top: 3.4rem;
}
@media screen and (max-width: 767px) {
  .flexBox08 {
    width: calc(700*(100vw / 750));
    margin: calc(50*(100vw / 750)) 0 0 0;
  }
  .flexBox08 .box1 {
    width: calc(550*(100vw / 750));
    margin: calc(134 * (100vw / 750)) 0 0 calc(100 * (100vw / 750));
  }
  .flexBox08 .box2 {
    width: calc(700 * (100vw / 750));
    display: flex;
    justify-content: space-between;
    margin-top: calc(30 * (100vw / 750));
  }
  .flexBox08 .box2 .img23 {
    width: calc(390 * (100vw / 750));
  }
  .flexBox08 .box2 .img24 {
    width: calc(275 * (100vw / 750));
    margin-top: calc(238 * (100vw / 750));
  }
  .flexBox08_CR.credit {
    font-size: calc(20 * (100vw / 750));
    text-align: center;
    margin-top: calc(30 * (100vw / 750));
  }
}




/* flexBox09 */
.img25 {
  width: 64rem;
  margin: 13rem auto 0;
}
.flexBox09 {
  width: 96rem;
  margin: 3rem auto 0;
  display: flex;
  justify-content: space-between;
}
.flexBox09 .box1 {
  width: 50rem;
}
.flexBox09 .box2 {
  width: 40rem;
  margin-top: 6.2rem;
}
.flexBox09_CR.credit {
  font-size: 2rem;
  text-align: center;
  margin-top: 3.4rem;
}
@media screen and (max-width: 767px) {
  .img25 {
    width: calc(750 * (100vw / 750));
    margin: calc(132 * (100vw / 750)) auto 0;
  }
  .flexBox09 {
    width: calc(650 * (100vw / 750));
    margin: calc(30 * (100vw / 750)) auto 0;
    display: block;
  }
  .flexBox09 .box1 {
    width: calc(550 * (100vw / 750));
  }
  .flexBox09 .box2 {
    width: calc(390*(100vw / 750));
    margin-top: calc(30*(100vw / 750));
    margin-left: auto;
  }
  .flexBox09_CR.credit {
    font-size: calc(20 * (100vw / 750));
    text-align: center;
    margin-top: calc(34 * (100vw / 750));
  }
}


/* flexBox10 */
.img28 {
  width: 64rem;
  margin: 13.4rem auto 0;
}
.flexBox10 {
  width: 88.1rem;
  margin: 3rem auto 0;
  display: flex;
  justify-content: space-between;
}
.flexBox10 .box1 {
  width: 50rem;
}
.flexBox10 .box2 {
  width: 32.1rem;
  margin-top: 11rem;
}
.flexBox10_CR.credit {
  font-size: 2rem;
  text-align: center;
  margin-top: 3.3rem;
}
@media screen and (max-width: 767px) {
  .img28 {
    width: calc(750 * (100vw / 750));
    margin: calc(132 * (100vw / 750)) auto 0;
  }
  .flexBox10 {
    width: calc(650 * (100vw / 750));
    margin: calc(30 * (100vw / 750)) auto 0;
    display: block;
  }
  .flexBox10 .box1 {
    width: calc(550 * (100vw / 750));
  }
  .flexBox10 .box2 {
    width: calc(390 * (100vw / 750));
    margin-top: calc(30 * (100vw / 750));
    margin-left: auto;
  }
  .flexBox10_CR.credit {
    font-size: calc(20 * (100vw / 750));
    text-align: center;
    margin-top: calc(32 * (100vw / 750));
  } 
}


/* flexBox11 */
.img31 {
  width: 64rem;
  margin: 13.4rem auto 0;
}
.flexBox11 {
  width: 96rem;
  margin: 3rem auto 0;
  display: flex;
  justify-content: space-between;
}
.flexBox11 .box1 {
  width: 50rem;
}
.flexBox11 .box2 {
  width: 40rem;
  margin-top: 6rem;
}
.flexBox11_CR.credit {
  font-size: 2rem;
  text-align: center;
  margin-top: 3.2rem;
}
@media screen and (max-width: 767px) {
  .img31 {
    width: calc(750 * (100vw / 750));
    margin: calc(134 * (100vw / 750)) auto 0;
  }
  .flexBox11 {
    width: calc(570 * (100vw / 750));
    margin: calc(29 * (100vw / 750)) 0 0 0;
    display: block;
    margin-left: auto;
  }
  .flexBox11 .box1 {
    width: calc(390 * (100vw / 750));
  }
  .flexBox11 .box2 {
    width: calc(360*(100vw / 750));
    margin-top: calc(30*(100vw / 750));
    margin-left: auto;
  }
  .flexBox11_CR.credit {
    font-size: calc(20*(100vw / 750));
    text-align: center;
    margin-top: calc(34*(100vw / 750));
  }
}


/* all_btn
======================================================== */
.all_btn {
  margin-top: 13.2rem;
  text-align: center;
  margin-bottom: 44rem;
}
.all_btn a {
  font-size: 2rem;
  width: 40rem;
  margin: 0 auto 0;
  background: #000000;
  color: #fff;
  padding: 1rem 0;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .all_btn {
    margin-top: calc(131*(100vw / 750));
    text-align: center;
    margin-bottom: calc(295 *(100vw / 750));
  }
  .all_btn a {
    font-size: calc(20 * (100vw / 750));
    width: calc(400 * (100vw / 750));
    margin: 0 auto 0;
    background: #000000;
    color: #fff;
    padding: calc(10 * (100vw / 750)) 0 calc(10 * (100vw / 750)) 0;
  }
}

/* jsFade
======================================================== */
.jsFade {
  opacity: 0;
  transform: translateY(20px);
}
.jsFade.isActive {
  opacity: 1;
  transform: translateY(0px);
  transition: all .7s;
}


/* contents05
======================================================== */


/* contents06
======================================================== */