@charset "UTF-8";

html,
body{
  scroll-behavior: smooth;
}

main{
  width: 100%;
  max-width: 750px;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 15%;
}

main img{
  width: 100%;
  height: auto;
  display: block;
}

main video{
  width: 100%;
  height: auto;
  display: block;
}

div.movieBox_01{
  width: 100%;
  position: relative;
  aspect-ratio: 750/882;
  background-color: white;
}

div.movieBox_01 img,
div.movieBox_01 video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

div.movieBox_02{
  width: 100%;
  position: relative;
  aspect-ratio:750/912;
}

div.movieBox_02 img,
div.movieBox_02 video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

div.movieBox_03{
  width: 100%;
  position: relative;
  line-height: 0;
}
div.movieBox_03 img:nth-of-type(1){
  width: 100%;
  height: auto;
  display: block;
}

div.movieBox_03 video{
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

div.movieBox_03 img:nth-of-type(2) {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
}

div.movieBox_04{
  width: 100%;
  position: relative;
  aspect-ratio:750/530;
}

div.movieBox_04 img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

div.movieBox_04 video{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 90%;
  margin: 0 auto;
  height: 90%;
  object-fit: cover;
  display: block;
}

div.movieBox_05{
  width: 100%;
  position: relative;
  aspect-ratio:750/530;
}

div.movieBox_05 img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

div.movieBox_05 video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

div.movieBox_06{
  width: 100%;
  position: relative;
  aspect-ratio:750/530;
}

div.movieBox_06 img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

div.movieBox_06 video{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 90%;
  height: 90%;
  margin: 0 auto;
  object-fit: cover;
  display: block;
}

div.movieBox_07{
  width: 100%;
  position: relative;
  aspect-ratio:750/530;
}

div.movieBox_07 img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

div.movieBox_07 video{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 90%;
  height: 90%;
  margin: 0 auto;
  object-fit: cover;
  display: block;
}

/*フローティング*/
div#floating{
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  height: auto;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
  background: rgba(255,255,255,0.8);
}

div#floating.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

div#floating a,
div#floating a:link,
div#floating a:visited,
div#floating a:hover{
  width: 88.266%;
  margin: 0 auto;
  height: auto;
  display: block;
}

div#floating a img{
  width: 100%;
  height: auto;
  display: block;
}

/*スライド*/
.loop-container{
  overflow: hidden;
  width: 100%;
}

.loop-track_l{
  display: flex;
  width: max-content;
  animation: loop-animation_l 20s linear infinite;
}

.loop-track_r{
  display: flex;
  width: max-content;
  animation: loop-animation_r 20s linear infinite;
}

.loop-content{
  display: flex;
  background-color: black;
}

.loop-content img{
  width: 990px;
  height: auto;
  display: block;
}

@keyframes loop-animation_l{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}

@keyframes loop-animation_r{
  0%{
    transform: translateX(-50%);
  }
  100%{
    transform: translateX(0);
  }
}

/*カート*/
.cartBox01{
  position: relative;
  width: 100%;
}

.buttonBox01{
  position: absolute;
  top: 5%;
  right: 0;
  bottom: auto;
  left: 0;
  width: 88.266%;
  margin: 0 auto;
}

.cartBox01 .buttonBox01 a,
.cartBox01 .buttonBox01 a:link,
.cartBox01 .buttonBox01 a:visited,
.cartBox01 .buttonBox01 a:hover{
  display: block;
  width: 100%;
  animation: beat 2.0s linear infinite;
}

.cartBox02{
  position: relative;
  width: 100%;
}

.buttonBox02{
  position: absolute;
  top: 5%;
  right: 0;
  bottom: auto;
  left: 0;
  width: 88.266%;
  margin: 0 auto;
}

.cartBox02 .buttonBox02 a,
.cartBox02 .buttonBox02 a:link,
.cartBox02 .buttonBox02 a:visited,
.cartBox02 .buttonBox02 a:hover{
  display: block;
  width: 100%;
  animation: beat 2.0s linear infinite;
}

.cartBox03{
  position: relative;
  width: 100%;
}

.buttonBox03{
  position: absolute;
  top: 5%;
  right: 0;
  bottom: auto;
  left: 0;
  width: 88.266%;
  margin: 0 auto;
}

.cartBox03 .buttonBox03 a,
.cartBox03 .buttonBox03 a:link,
.cartBox03 .buttonBox03 a:visited,
.cartBox03 .buttonBox03 a:hover{
  display: block;
  width: 100%;
  animation: beat 1.6s linear infinite;
}

@keyframes beat{
  0%,100%{
    transform: scale(1.0);
  }
  50%{
    transform: scale(0.9);
  }
}

.cartBox01 .buttonBox01 a img
.cartBox02 .buttonBox02 a img
.cartBox03 .buttonBox03 a img{
  width: 100%;
  height: auto;
  display: block;
}