@charset "UTF-8";

/*====================
common
====================*/
img {
  display: block;
  margin: 0 auto;
}
#GFoot {
  padding: 10px 0 0;
}
#GFoot ul.caution{
  width: 100%;
  max-width: 600px;
  margin: 0 auto 50px;
  padding: 0 16px;
  line-height: 1.4;
  box-sizing: border-box;
  font-size: 11px;
}
#GFoot ul li{
  position: relative;
}
#contents section{
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
@media all and (min-width: 601px){
  #GFoot {
    padding: 30px 0 0;
  }
  .notes{
    font-size: 14px;
    line-height: 1.4;
  }
  #section_second ul{
    width: 88%;
    display: block;
    margin: 17px auto 31px;
  }
  #section_second ul li{
    margin-bottom: 0px;
  }
}
@media only screen and (max-width: 889px){
  #GFoot .copyBlock {
      margin-top: 70px;
      /* padding-bottom: 120px; */
      font-size: 10px;
      font-size: 1rem;
  }
}
  @media only screen and (min-width: 890px), print {
  #GFoot .copyBlock {
      margin-top: 50px;
      /* padding-bottom: 220px; */
      font-size: 12px;
      font-size: 1.2rem;
  }
}

/*====================
scroll_header
====================*/
.header {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #000;
}
.header img {
  width: 65%;
  height: auto;
  display: block;
  margin: 13px auto 12px;
  max-width: 470px;
}
.max_content {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
}

/*====================
top image
====================*/
.top_img {
  background: #111111;
  z-index: 2;
  position: relative;
}

/*====================
add
====================*/
.bottom_txt {
  background-color: #fff;
}
.bottom_txt img {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
}
.btn_re {
  position: relative;
}
.btn_ab {
  position: absolute;
  margin: 0 auto;
  right: 0;
  left: 0;
}
.btn01{
  width: 67%;
  max-width: 668px;
  top: 47%;
  left: -2%;
  display: grid;
  gap: 6%;
  z-index: 3;
}
.btn02{
  width: 76%;
  max-width: 668px;
  top: 77%;
  left: 1.5%;
}
.btn03{
  width: 82%;
  max-width: 708px;
  top: 67%;
  left: 1.5%;
}
.btn01 label,
.btn02 label,
.btn03 label{
  transition: .3s;
  font-size: 360%;
  font-weight: 400;
}
.btn01 label:hover,
.btn02 label:hover,
.btn03 label:hover {
  opacity: .7;
}
.btn_flex {
  position: absolute;
  width: 80%;
  margin: 0 auto;
  top: 38%;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.btn_flex > a:nth-child(1){
  margin-right: 4%;
}



.area_fv {position: relative;overflow: hidden;z-index: 2;}

.ttl_fv {
  position: absolute;
  top: 15.4%;
  width: 83.8%;
  display: block;
  margin: auto;
  left: 3%;
  right: 0;
  z-index: 5;
}
.ttl_fv {
display: none;
}


.area_cloud {
  position: absolute;
  width: 660px;
  height: 170px;
  top: 25%;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  z-index: 2;
}

.cloud_fv {
  position: absolute;
  height: auto;
  top: 0;
  animation: cloudSlide 20s linear infinite;
}

.cloud_fv01 {
  left: 660px; /* 右端からスタート */
  animation-delay: 0s;
  width: 122px;
  width: 18.5%;
  top: 2%;
}

.cloud_fv02 {
  left: 800px; /* 同じ右端からスタート */
  top: 51%;
  animation-delay: 0s; /* 少し後に出現して交互に流れる */
  width: 112px;
  width: 17%;
}

@keyframes cloudSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1100px); /* 660px + 雲の幅で画面左外へ出す */
  }
}

.bird_fv {
    position: absolute;
}
.bird_fv01 {
    position: absolute;
    animation: Float 4s ease-in-out infinite;
    right: 5.7%;
    top: 56.7%;
    z-index: 2;
    width: 11%;
}
.bird_fv02 {
    position: absolute;
    animation: Float 6s ease-in-out infinite;
    right: -2.3%;
    top: 59.7%;
    z-index: 2;
    width: 11%;
}

@keyframes Float {
    0%, 100% {
        transform: translateY(-20px);
    }

    50% {
        transform: translateY(0);
    }
}

.anime_stamp {
  animation: stamp 0.6s ease-out forwards;
  transform-origin: center center;
}

@keyframes stamp {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  60% {
    transform: scale(0.98);
    opacity: 1;
  }
  100% {
    transform: scale(1);
      opacity: 1;
  }
}

.box_suika {
  position: absolute;
  top: 79.6%;
  right: -500px; /* 画面外から開始 */
  animation: moveRight 2.7s linear forwards;
  z-index: 99999999;
  animation-delay: 2s;
}

.anime_spin {
    animation: 2.7s linear rotation;
    width: 216px;
    height: 216px;
    z-index: 9999;
    position: relative;
    animation-delay: 2s;
}

.img_wrap {
  position: relative;
  width: 216px;
  height: 216px;
  z-index: 99999;
}

.suika_img {
  position: absolute;
  /* top: -200px; */
  /* right: -300px; */
  width: 216px;
  height: auto;
  transition: opacity 0.3s ease;
  z-index: 999999;
}

/* 最初はカット画像を非表示 */
.cut {
  opacity: 0;
  animation: showCut 0s 7s forwards;
  animation-delay: 4.7s;
}

.whole {
  opacity: 1;
  animation: disappear 0s 7s forwards;
  animation-delay: 4.7s;
}

@keyframes moveRight {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translate(-450px);
    }
}
@keyframes rotation {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(-600deg);
    }
}
@keyframes showCut {
  to {
    opacity: 1;
  }
}

@keyframes disappear {
  to {
    opacity: 0;
  }
}

.fv_kikan {
  position: absolute;
  width: 41.4%;
  display: block;
  margin: auto;
  top: 40.5%;
  left: 58.6%;
  right: 0;
  z-index: 5;
}
.img_fv {
  position: absolute;
  width: 66%;
  display: block;
  margin: auto;
  top: 34.1%;
  left: 5.4%;
  right: 0;
  z-index: 5;
}
.ttl_fv02 {
  position: absolute;
  width: 27.6%;
  display: block;
  margin: auto;
  top: 38.5%;
  left: -60.4%;
  right: 0;
  z-index: 5;
}


.area_cloud02 {
  position: absolute;
  width: 660px;
  height: 840px;
  top: 25%;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  z-index: 2;
}

.cloud_course {
  position: absolute;
  height: auto;
  top: 0;
  animation: cloudSlide 20s linear infinite;
}

.cloud_course01 {
  left: 660px; /* 右端からスタート */
  animation-delay: 0s;
  width: 18.5%;
  top: 0%;
}

.cloud_course02 {
  left: 800px; /* 同じ右端からスタート */
  top: 12%;
  width: 122px;
  width: 18.5%;
}

.cloud_course03 {
  left: 870px; /* 同じ右端からスタート */
  width: 24.6%;
  top: 33%;
}

.ttl_course {
  position: absolute;
  top: -2.1%;
  width: 91.5%;
  margin: auto;
  display: block;
  left: 1.2%;
  right: 0;
  z-index: 7;
}

@media all and (max-width: 601px) {
  .cloud_course01 {
    width: 20.33vw;
    top: 0vw;
  }
  .cloud_course02 {
    width: 20.33vw;
    top: 21vw;
  }
  .cloud_course03 {
    width: 27vw;
    top: 42vw;
  }
  
  .box_suika {
    top: 79.6%;
    top: 131.67vw;
    right: -83.33vw; /* 画面外から開始 */
  }
  .anime_spin {
      width: 36vw;
      height: 36vw;
      z-index: 9999;
      position: relative;
  }
  .img_wrap {
    position: relative;
    width: 36vw;
    height: 36vw;
  }
  .suika_img {
    position: absolute;
    width: 36vw;
    height: auto;
  }

  @keyframes moveRight {
    0% {
        transform: translate(0);
    }
    100% {
        transform: translate(-75vw);
    }
}

  
}