@charset "UTF-8";


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

main {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.bg {
  position: relative;
  overflow: hidden; 
  max-width: 1920px;
  margin: 0 auto;
}

.base_bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
}

.bg-img1 {
  width: auto;
  height: 852px;
}

.bg-img1_2 {
  width: auto;
  height: 892px;
}

.bg-img2 {
  width: auto;
  height: 581px;
}

.bg-img3 {
  width: auto;
  height: 809px;
}

.bg-img4 {
  width: auto;
  height: 184px;
}

.bg-img5 {
  width: auto;
  height: 501px;
}

.bg-img6 {
  width: auto;
  height: 284px;
}

.bg-img7 {
  width: auto;
  height: 650px;
}

.bg-img8 {
  width: auto;
  height: 925px;
}

.bg-img9 {
  width: auto;
  height: 742px;
}

.bg-img10 {
  width: auto;
  height: 636px;
}

.bg-img11 {
  width: auto;
  height: 540px;
}


.bg-img12 {
  width: auto;
  height: 595px;
}
.bg-img13 {
  width: auto;
  height: 741px;
}
.bg-img14 {
  width: auto;
  height: 815px;
}
.bg-img15 {
  width: auto;
  height: 809px;
}
.bg-img16 {
  width: auto;
  height: 184px;
}
.bg-img17 {
  width: auto;
  height: 501px;
}
.bg-img18 {
  width: auto;
  height: 630px;
}
.bg-img19 {
  width: auto;
  height: 592px;
}
.bg-img20 {
  width: auto;
  height: 574px;
}

.bg-img21 {
  width: auto;
  height: 769px;
}

.bg-img22 {
  width: auto;
  height: 689px;
}

.bg-img23 {
  width: auto;
  height: 673px;
}

.bg-img24 {
  width: auto;
  height: 934px;
}

.bg-img25 {
  width: auto;
  height: 638px;
}

.bg-img26 {
  width: auto;
  height: 792px;
}

.bg-img27 {
  width: auto;
  height: 501px;
}
.bg-img28 {
  width: auto;
  height: 569px;
}
.bg-img29 {
  width: auto;
  height: 362px;
}

.bg-img30 {
  width: auto;
  height: 1155px;
}

.bg-img31 {
  width: auto;
  height: 818px;
}

.bg-img32 {
  width: auto;
  height: 799px;
}

.bg-img33 {
  width: auto;
  height: 930px;
}

.bg-img34 {
  width: auto;
  height: 996px;
}

.bg-img35 {
  width: auto;
  height: 909px;
}

.bg-img36 {
  width: auto;
  height: 649px;
}

.bg-img37 {
  width: auto;
  height: 261px;
}

.bg-img38 {
  width: auto;
  height: 815px;
}

.bg-img39 {
  width: auto;
  height: 559px;
}

.bg-img40 {
  width: auto;
  height: 497px;
}

.bg-img41 {
  width: auto;
  height: 597px;
}

.bg-img42 {
  width: auto;
  height: 809px;
}

.bg-img43 {
  width: auto;
  height: 184px;
}

.bg-img44 {
  width: auto;
  height: 501px;
}

.bg-img45 {
  width: auto;
  height: 412px;
}

.bg-img46 {
  width: auto;
  height: 928px;
}

.bg-img47 {
  width: auto;
  height: 683px;
}

.bg-img48 {
  width: auto;
  height: 594px;
}

.bg-img49 {
  width: auto;
  height: 553px;
}

.bg-img49_2 {
  width: auto;
  height: 950px;
}

.bg-img50 {
  width: auto;
  height: 520px;
}

.bg-img51 {
  width: auto;
  height: 492px;
}

.bg-img52 {
  width: auto;
  height: 487px;
}

.bg-img53 {
  width: auto;
  height: 326px;
}

.bg-img54 {
  width: auto;
  height: 417px;
}
.bg-img55 {
  width: auto;
  height: 261px;
}

.bg-img56 {
  width: auto;
  height: 372px;
}

.bg-img57 {
  width: auto;
  height: 348px;
}

.bg-img58 {
  width: auto;
  height: 392px;
}

.bg-img59 {
  width: auto;
  height: 511px;
}

.bg-img60 {
  width: auto;
  height: 242px;
}

.bg-img61 {
  width: auto;
  height: 254px;
}

.bg-img62 {
  width: auto;
  height: 575px;
}

.bg-img63 {
  width: auto;
  height: 716px;
}

.bg-img64 {
  width: auto;
  height: 548px;
}

.bg-img65 {
  width: auto;
  height: 53px;
}

.bg-img65_2 {
  width: auto;
  height: 426px;
}

.bg-img66 {
  width: auto;
  height: 339px;
}

.bg-img67 {
  width: auto;
  height: 156px;
}

.bg-img68 {
  width: auto;
  height: 155px;
}

.bg-img69 {
  width: auto;
  height: 182px;
}

.bg-img70 {
  width: auto;
  height: 236px;
}

.bg-img71 {
  width: auto;
  height: 633px;
}

.bg-img72 {
  width: auto;
  height: 308px;
}

.bg-img73 {
  width: auto;
  height: 487px;
}

.bg-img74 {
  width: auto;
  height: 809px;
}

.bg-img75 {
  width: auto;
  height: 184px;
}

.bg-img76 {
  width: auto;
  height: 501px;
}

.bg-img77 {
  width: auto;
  height: 913px;
}

/* .bg > picture {
  margin-top: -1px;
} */
.con {
  position: absolute;
  top: 0;
  z-index: 99;
}

.bg1 {
  z-index: 1;
}

.kwcv,
.cv_btn {
  opacity: 1;
}

.kwcv.is-show,
.cv_btn.is-show {
  animation-name: kwcv;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-delay: 0;
}

.cv_btn{
  width: 95%;
  top: 5%;
  left: 0;
  right: 0;
  margin: auto;
  margin: auto;
  text-align: center;
}

.scl {
  opacity: 0;
  transform: scale(1.2);
}

.scl.is-show {
  animation-name: anm;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 0.5s;
}



@keyframes kwcv {
  0% {
    opacity: 1;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(0.9);
  }
}
@keyframes anm {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes anm_scl1 {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeUpAnime_guigui {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

@keyframes mocchiri {
    0% {
        transform: scale(1, 0.8);
    }
    /* 20% {
        transform: scale(0.8, 1.1);
    } */
    95% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 0.8);
    }
}



.kw1 {
  width: 80%;
  top: 8.5%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw1_2 {
  width: 80%;
  top: 42%;
  left: 54px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw2 {
  width: 40%;
  top: 65%;
  left: calc(50% - 248px);
  right: auto;
}

.kw3 {
  width: 40%;
  top: 42%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw4 {
  width: 40%;
  top: 65%;
  left: calc(50% - 15px);
  right: auto;
}

.kw5.guigui{
  width: 78%;
  top: 60%;
  left: 41%;
  right: auto;
  overflow: hidden;
  opacity: 1 !important;
  animation: fadeUpAnime_guigui 2s ease-out infinite;
}


.kw6 {
  width: 70%;
  top: 16%;
  left: 47%;
  overflow: hidden;
  opacity: 1 !important;
  animation: mocchiri 3s infinite;
}

.kw7 {
  width: 33%;
  top: 51%;
  left: 7%;
}

.kw8
{
  width: 33%;
  top: 51%;
  left: 36%;
}

.kw9 {
  width: 33%;
  top: 51%;
  left: 65%;
}

.kw11 {
  width: 32%;
  top: 28%;
  left: 3px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw12 {
  width: 32%;
  top: 34%;
  left: 274px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw13 {
  width: 32%;
  top: 50%;
  left: 387px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw14 {
  width: 32%;
  top: 67%;
  left: 358px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw15 {
  width: 32%;
  top: 78%;
  left: 146px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw16 {
  width: 32%;
  top: 78%;
  left: -129px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw17 {
  width: 32%;
  top: 66%;
  left: -329px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw18 {
  width: 32%;
  top: 49%;
  left: -372px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw19 {
  width: 32%;
  top: 32.5%;
  left: -273px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw20 {
  width: 48%;
  top: 34.5%;
  left: -2%;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw21 {
  width: 30%;
  top: 44%;
  left: 13px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw22 {
  width: 30%;
  top: 48%;
  left: 274px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw23 {
  width: 30%;
  top: 60%;
  left: 387px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw24 {
  width: 30%;
  top: 73.5%;
  left: 358px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw25 {
  width: 30%;
  top: 82.5%;
  left: 146px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw26 {
  width: 30%;
  top: 83%;
  left: -129px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw27 {
  width: 30%;
  top: 72.5%;
  left:-311px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw28 {
  width: 30%;
  top: 59.5%;
  left: -372px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw29 {
  width: 30%;
  top: 47.7%;
  left: -242px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw30 {
  width: 48%;
  top: 47.5%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw2_2 {
  width: 40%;
  top: 65%;
  left: -620px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw3_2 {
  width: 40%;
  top: 59%;
  left: -370px;
  right: 0;
  margin: auto;
  text-align: center;
}

.kw4_2 {
  width: 40%;
  top: 65%;
  left: -145px;
  right: 0;
  margin: auto;
  text-align: center;
}

.movie {
  position: absolute;
  top: 0;
}

.fg-movie {
  position: absolute;
  top: 43%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 460px;
  height: 44.6%;
  object-fit: cover;
  z-index: 1;
  pointer-events: auto;
}


.bg--gif-section{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.bg--gif-section__gif01,
.bg--gif-section__gif02 {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bg--gif-section__gif01 img{
  width: 372px;
  height: 100%;
  object-fit: cover;
  object-position: center;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  top: -10%;
}

.bg--gif-section__gif02 img{
  width: 500px;
  height: 100%;
  object-fit: cover;
  object-position: center;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  top: 10%;
}


.bg--gif-section__overlay{
  /* position: relative; */
  z-index: 2;
  display: block;
}

.bg--gif-section__overlay img{
  /* width: 100%; */
  height: auto;
  display: block;
}

.e1-seq .scl-e1{
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}

.e1-seq .scl-e1.is-show{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.e2-seq .scl-e2{
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}

.e2-seq .scl-e2.is-show{
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-animate]{
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

[data-animate].is-show{
  opacity: 1;
  transform: translateY(0) scale(1);
}


.img-accordion{
  width: 100%;
}

.img-accordion__head{
  /* position: relative; */
}

.img-accordion__head img{
  display: block;
  /* width: 100%; */
  height: auto;
}

.img-accordion__btn{
  position: absolute;
  right: 13%;
  top: 0%;
  /* transform: translateY(-50%); */
  left: calc(50% + 400px);
  right: auto;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: none;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #a00029;

}

.img-accordion__body{
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.img-accordion__body img{
  /* width: 100%; */
  display: block;
  width: auto;
  height: 426px;
}

.img-accordion.is-open .img-accordion__body{
  max-height: 5000px; 
}

.acc-text{
  padding: 16px;
  text-align: left;
}


.fl_pc {
    width: 100%;
    max-width: 600px;
    position: fixed;
    bottom: 1%;
    top: auto;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 100;
    transition: all 1s ease-out;
}
.fl_pc img{
  width: 100%;
}