/* ############################
GROWUP Ver1.0 CSS
############################ */


/* ############################
リセットCSS START
############################ */

*, *:before, *:after {
box-sizing: border-box;
}

/* マージン、パディング、ボーダーをリセット */
body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, figure, figcaption, blockquote, dl, dd {
margin: 0;
padding: 0;
border: 0;
}

/* リストスタイルをリセット */
ol, ul {
list-style: none;
}

/* フォント継承をリセット */
html {
font-family: sans-serif;
}

/* リンクのスタイルをリセット */
a {
text-decoration: none;
color: inherit;
}

/* 画像のスケーリングを防ぐ */
img {
max-width: 100%;
height: auto;
display:block;
}

/* テーブルのボーダースパイシングとボーダーコラプスをリセット */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* その他の基本的なスタイルリセット */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block;
}

/* ############################
リセットCSS END
############################ */


/* contents */

body{
max-width:760px;
margin:0 auto;
position: relative;
}

.btn-area{
position: relative;
}

.n-btn-area{
text-align:center;
}

.btn1,.btn2,.btn3{
position: absolute;
left: 10%;
width: 80%;
animation: zoom 1s alternate infinite;
}

@keyframes zoom {
  0% {
    transform: scale(1); /* 初期サイズ */
  }
  100% {
    transform: scale(1.1); /* 1.2倍に拡大 */
  }
}
.btn1{
bottom:1%;
}

.btn2{
bottom:2%;
}

.btn3{
bottom:1.6%;
}



input{
width:100%;
padding:20px;
border-radius:10px;
border:solid 1px #000;
}

input[type="image"]{
border:none;
width:90%;
}

.required,.err{
color:red;
}

.btn-fix{
position: fixed;
bottom:0;
box-sizing: border-box;
width: clamp(0%, 100%, 700px);
padding: 10px;
}

.btn-fix img{
width:100%;
}

#cta{
margin-top:70px;
}

.copyright{
text-align:center;
font-size: 10px;
background: #000;
padding-top: 5px;

color: white;
}

.copyright a{
color:#007bff;
}



@media (max-width: 700px) {
.copyright span{
display:block;
}
}




/*追記*/
.a02{
  width: 100%;
  background-size: contain;
  background-repeat:repeat;
}

.flow{
    width: 100%;
    background-color: #fff8cc;
}
.a_img{
    
}
.sec_btn{
    background-color: #ffe6aa;
    padding-top: 20px;
    
}

.qa01{
    width: 100%;
  background-image: url(../img/img_07p.jpg);
  background-size: contain;
  background-repeat:repeat;
  padding-top: 20px;
}
.yureru-s {
    animation: yureru-s 2s infinite;
}
@keyframes yureru-s {
    0% {
        transform: translate(2px, 0px);
    }
    5% {
        transform: translate(-2px, 0px);
    }
    10% {
        transform: translate(2px, 0px);
    }
    15% {
        transform: translate(-2px, 0px);
    }
    20% {
        transform: translate(2px, 0px);
    }
    25% {
        transform: translate(-2px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}
.age{
    color: red;
    text-align: center;
    margin-top: -20px;
    font-weight: bold;
    font-size: 12px;
}

.btn_01{
    margin-top: 0px;
    
}
.btn_02{
    margin-bottom: 10px;
}

.btn02{
    margin-top: 20px;
    margin-bottom: 20px;
}

.entry{
    background-image: url(../img/img_entry.jpeg);
}

.a03{
  width: 100%;
  background-image: url(../img/6p.jpg);
  background-size: contain;
  background-repeat:repeat;
  padding-top: 20px;
 padding-bottom: 10px;
  height: 100%;
}


/*アニメーション*/




.anime {
  position: relative;
  display: inline-block;
}

.img_text01 {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
}




.pudding-container01 {
  position: absolute;
  right: 400;
  left: 0;
  margin: 0 auto;
    top:10px;
}

.pudding-container02 {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
    top:120px;
}
.pudding-container03 {
  position: absolute;
  right: 0;
  left: 200;
  margin: 0 auto;
    top:120px;
}


.pudding {
    background-size: cover;
    animation: purine 1.2s linear   normal;
    transform-origin: center bottom;
    /* 上から落ちてくるスタート地点 */
    transform: translateY(0px); 
}


.syashin {
    background-size: cover;
    animation: 1.2s 0s syashin ease infinite;
}
.ok01 {
    background-size: cover;
    animation: 1.7s 0s syashin ease normal;
}
.man50 {
    background-size: cover;
    animation: 2.1s 0s syashin ease normal;
}

.man2 {
    background-size: cover;
    animation: puyon 1.6s linear 0s infinite;
}



@keyframes puyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes syashin {
	79%,
	90%,
	97%,
	100% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
	85% {
		-webkit-transform: translateY(-20px);
		        transform: translateY(-20px);
	}
	94% {
		-webkit-transform: translateY(-4px);
		        transform: translateY(-4px);
	}
	99% {
		-webkit-transform: translateY(-2px);
		        transform: translateY(-2px);
	}
}

@keyframes purine {
    0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
  10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
  20%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
  30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
  50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

   .purun {
      -webkit-animation: purun 0.8s linear 0s 1;
      animation: purun 0.8s linear 0s 1;
    }
    @-webkit-keyframes purun {
      0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
      15%  { -webkit-transform: scale(0.9, 0.9) translate(0%, 5%); }
      30%  { -webkit-transform: scale(1.3, 0.8) translate(0%, 10%); }
      50%  { -webkit-transform: scale(0.8, 1.3) translate(0%, -10%); }
      70%  { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
      100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
    }

@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.top001{
    display: block;
    max-width: 100%;
    height: auto;
}


.zoomFade {
animation: zoomFade 2s ease-in-out infinite;
}
/* zoomFade */
@keyframes zoomFade {
    0% {
        transform: scaleX(1)
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        transform: scaleX(1)
    }
}

.a_img2{
    margin-top: -10px;
}


/* テスト */



.content {
  
  opacity: 0;
}
.content.inview {
  animation-name: fade-in;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  animation-delay: .4s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.pikopiko{
    animation: pikopiko 1s steps(2, start) infinite;
}

@keyframes pikopiko {
  0% {
    transform: rotate(20deg);
  }
  to {
    transform: rotate(-10deg);
  }
}


///0707//

.slideinLeft {
  animation: slideinLeft 3s infinite;
      transition: 1s;
  opacity: 0;
  transform: translateY(20px);
  display: block;
}

@keyframes slideinLeft {
   0% {
    transform: translateY(20px);
  }
   100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.zoomFade02 {
animation: zoomFade 2s ease-in-out infinite;
}
/* zoomFade */
@keyframes zoomFade02 {
    0% {
        transform: scaleX(1)
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        transform: scaleX(1)
    }
}

.fadeInLeft {
    animation: fadeInLeft 0.7s ease 0s 1 normal;
}
/* fadeInLeft */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-800px);
  }
  100% {
    opacity: 1;
  }
}

.fadeInRight {
    animation: fadeInRight 1.5s ease 0s 1 normal;
}
/* fadeInRight */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(160px);
  }
  100% {
    opacity: 1;
    display: block;
  }
}


.toptobottomScale  {
    animation: toptobottomScale 1.4s ease 0s 1 normal;
}
/* toptobottomScale */
@keyframes toptobottomScale {
    0% {
        transform: translateY(-1200px) scale(0.7);
        opacity: .7
    }
    80% {
        transform: translateY(0) scale(0.7);
        opacity: .7
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

/* fadeInTop */
.fadeInTop {
    animation: fadeInTop 0.7s ease 0s 1 normal;
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
  }
}

.circle {
   animation: fuwafuwa 2s infinite;
}

@keyframes fuwafuwa {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0px);
  }
}

.fadeIn {
    transform: translate3d(-200px, 0, 0);
    transition: 1s;
    opacity: 0;
    animation-duration: .20s;
    animation-delay: .10s;
}

.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.fadeIn01 {
  transform: translate3d(-1200px, 0, 0);
    transition: 1s;
    opacity: 0;
    animation-duration: .100s;
    animation-delay: 1s;
}

.fadeIn01.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.topsp{
    margin-top: 0px;
}
.atehama{
    margin-top: 40px;
}





.btn5p{
    margin-bottom: 15px;
}
.sec01{
    padding-top: -10px:
}
.btn0201{
    margin-bottom: 5px;
}

.copyright01{
    background-color: black;
    height: 30px;
}

.tokusyo p{
    color: white;
}

.number {
  font-size: 24px;
  font-weight: bold;
  color: red;
}

.countdown{
    text-align: center;
}

.count{
    color: red;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    line-height: 20px;
}

.top_wrap{
    position: sticky;
    top:0;
  width: 100%; /* 画面幅全体に広げる */
}

.countdown{
 background-color: white;
}

header {
  position: sticky;
  top: 0;
  z-index: 999;
  
}

.top_contain{
position: relative;
}

.top_contain01{
position: absolute;
    top:20px;
}
.top_contain02{
   position: relative; 
}

.countdown_01{
    font-weight: bold;
    font-size: 5px;
}

.zoomin{
    transform: scale(0);
  animation: zoomIn 1s ease-in-out forwards;
}

@keyframes zoomIn {
  to {
    transform: scale(1);
  }
}

.pudding-container05 {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top:0%; 
}

.top_animekoumoku{
    position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top:0%; 
}

.top_animekoumoku {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
    top:120px;
}
.aniconte{
  position: absolute;
  top:0px;

}



.aniko01{
    margin-left: 23%;
}

.koumoku01{
    position: absolute;
    
}

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

.shikaku{
    width: 90%;
    margin: 0 auto;
    position: absolute;
    top: 40px;
    left: 20px;
    text-align: center;
}



.zoomBottomUp01{
    animation: zoomBottomUp 1.0s ease 0s 1 normal;

}
/* zoomBottomUp */
@keyframes zoomBottomUp {
    0% {
        transform: translateY(1200px) scale(0.7);
        opacity: .7
    }
    80% {
        transform: translateY(0) scale(0.7);
        opacity: .7
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}

  

.zoomBottomUp {
  opacity : 0;
  transition : all 3s;
}
  
.zoomBottomUp01{
  opacity : 1;
}

.wrapper {
  padding: 200px 0;
  background-color: #f2f2f2;
}

.aniconte01{
    position: relative;
}

.flip01 {
    animation: flip 0.8s ease 0s 1 normal;
}
/* flip */
@keyframes flip {
    0% {
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        animation-timing-function: ease-out
    }
    40% {
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        animation-timing-function: ease-out
    }
    50% {
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        animation-timing-function: ease-in
    }
    80% {
        transform: perspective(400px) scale3d(0.95, .95, 0.95) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in
    }
    100% {
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in
    }
}

.flip01{
  opacity : 1;
}

.kari{
    height: 30px;
}
.kininaru{
    margin-top: -30px;
}

.shikaku01{
    width: 90%;
    margin: 0 auto;
    position: absolute;
    top: 0px;
    left: 20px;
    text-align: center;
}

.tap{
    margin-top: 20px;
}

.zoomUp01{
    animation: zoomBottomUp 1.0s ease 0s 1 normal;

}
/* zoomBottomUp */
@keyframes zoomBottomUp {
    0% {
        transform: translateY(1200px) scale(0.7);
        opacity: .7
    }
    80% {
        transform: translateY(0) scale(0.7);
        opacity: .7
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}

  

.zoomUp {
  opacity : 0;
  transition : all 2s;
}
  
.zoomUp01{
  opacity : 1;
}


/* slideの枠 */
.cp_cssslider01 {
  overflow: hidden;
  margin: 1em auto;
}
/* 画像のグループ */
.cp_slidewrapper01 {
  width: 400%;/* slideの枚数×100% */
  position: relative;
  display: flex;
  animation: cp_slider01 13s infinite ease;

}
/* 画像単体の設定 */
.cp_slide01_item {
 width: 100%;
}
@keyframes cp_slider01 {
  /* 100%を枚数で割った%に割り振る */
    0% { transform: translateX(0); }
    20%{ transform: translateX(0px); }
   25% { transform: translateX(-25%); }
    45% { transform: translateX(-25%); }
   50% { transform: translateX(-50%); }
    70% { transform: translateX(-50%); }
    75% { transform: translateX(-75%); }
    95% { transform: translateX(-75%); }
    100% { transform: translateX(0px); }

}
.kekka{
    font-size: 8px;
    color:#FFAD90;
    margin-top: -20px;
}
.kekka01{
    font-size: 8px;
    color:#FFAD90;
}
.kekka01{
    font-size: 8px;
    text-align: center;
    color:#e0aa05;
}

.shikaku02{
    width: 90%;
    margin: 0 auto;
    position: absolute;
    top: 30px;
    left: 20px;
    text-align: center;
}

.shikaku03{
    width: 100%;
    margin: 0 auto;
    top: 0;
    left; 0;
    position: absolute;
    margin-top: -20px;

}
.shikaku04{
    width: 100%;
    margin: 0 auto;
    top: 0;
    left; 0;
    position: absolute;
    margin-top: 30px;

}

.space{
    margin-bottom: 20px;
}

.3tap{
    
}

.zoomin01{

}


.zoomin01{
        transform: scale(0);
        animation: zoomIn01 1s ease-in-out forwards;
}

@keyframes zoomIn01 {
  to {
    transform: scale(1);
  }

}
/* zoomBottomUp */
@keyframes zoomin01 {
    0% {
        transform: translateY(1200px) scale(0.7);
        opacity: .7
    }
    80% {
        transform: translateY(0) scale(0.7);
        opacity: .7
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}

  

.zoomin00 {
  opacity : 0;
  transition : all 3s;
}
  
.zoomin01{
  opacity : 1;
}

.touroku{
    margin-top: 250px;
}

.step_conte{
    display: flex;
    overflow: hidden;
}
.step_conte01{
    display: flex;
    width: 100%;
}

.sconte{
    width: 33%;
}
.sconte01{
    width: 50%;
}

.fadeIn02 {
  transform: translate3d(-400px, 0, 0);
    transition: 1s;
    opacity: 0;
    animation-duration: .100s;
    animation-delay: .30s;
}

.fadeIn02.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.fadeIn02a {
  transform: translate3d(400px, 0, 0);
    transition: 1s;
    opacity: 0;
    animation-duration: .100s;
    animation-delay: .30s;
}

.fadeIn02a.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.fadeIn02_01 {
  transform: translate3d(-400px, 0, 0);
    transition: 1s;
    opacity: 0;
    animation-duration: .100s;
    animation-delay: 1s;
}

.fadeIn02_01.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}


.fadeIn03 {
  transform: translate3d(600px, 0, 0);
    transition: 1.2s;
    opacity: 0;
    animation-duration: .200s;
    animation-delay: .40s;
}

.fadeIn03.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
    animation-delay: .40s;
}

.fadeIn04 {
  transform: translate3d(800px, 0, 0);
    transition: 1.4s;
    opacity: 0;
    animation-duration: .300s;
    animation-delay: .50s;
}

.fadeIn04.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
    animation-delay: .60s;
}
.space01{
    margin-top: 30px;
}
.cp{
    z-index: 10;
}

.basyo{
    margin-top: -50px;
    z-index: 20;   
}

.btn01{
    margin-top: -150px;
}

.doubutu{
    margin-top: -30px;
}
.reinbo{
    margin-top: -10px;
}