@charset "utf-8";
/* CSS Document */

body, html {
    margin: 0;
    box-sizing: border-box;
}
img {
	vertical-align: bottom;	
}

p {
	margin: 0;
}


.contentWrap {
    max-width: 640px;
    margin: 0 auto;
	display: block;
}

.contentWrap img {
    vertical-align: bottom;
    width: 100%;
    display: block;
}


.flow-navi {
    position: fixed;
    bottom: 1%;
    right: 1%;
    z-index: 2;
    max-width: 150px;
}




/*---------------offer-----------------*/

.btn_youtube {
	    width: 92%;
    margin: 0 auto 4%;
}

.offer_01 {
    position: relative;
}
.btn_01 {
    position: absolute;
    bottom: 16%;
    left: 38%;
	width: 57%;
}


.offer_02 {
    position: relative;
}
	.btn_02 {
    position: absolute;
    bottom: 8%;
    left: 8%;
    width: 85%;
} 
	.offer_02_n {
    position: absolute;
    top: 14%;
    left: 18%;
    width: 65%;
}
	.offer_02_s {
    position: absolute;
    top: 28%;
    left: 18%;
    width: 65%;
}
.kiran {
  opacity: 1;
  overflow: hidden;
  cursor: pointer;
}
.offer_02_n.kiran::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.offer_02_n.kiran:hover::before {
  animation: kiran 0.5s linear 1;
}
 
@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}


.offer_0304 {
    position: relative;
}
.btn_0304 {
    position: absolute;
    bottom: 23%;
    left: 9%;
	width: 83%;
}

/*---------------// offer-----------------*/



/*---------------fv-----------------*/
.fv {
	position: relative;
}
.fv_comment {
	position: absolute;
	bottom: 38%;
	left: 40%;
	width: 58%;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 3s;
}



/*------------お悩み--------------*/
.onayami {
	position: relative;
}
.onayami_title {
	position: absolute;
	bottom: 67%;
}

.fuwa {
	position: relative;
}


.fuwa_1 {
    position: absolute;
    bottom: 44%;
    left: 2%;
    width: 32%;
    animation-name: fuwafuwa;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;
}

@keyframes fuwafuwa {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-10px)
    }
}


.fuwa_2 {
    position: absolute;
    bottom: 41%;
    left: 34%;
    width: 32%;
    animation-name: fuwafuwa2;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 3s;
}
@keyframes fuwafuwa2 {
    0% {
        transform: translate(0,0px)
    }

    100% {
        transform: translate(0,30px)
    }
}


.fuwa_3 {
    position: absolute;
    bottom: 44%;
    left: 66%;
    width: 32%;
    animation-name: fuwafuwa;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}



/*------------3つのポイント--------------*/
.point {
	position: relative;
}
.point_title {
	position: absolute;
	bottom: 77%;
}

.point_title_work_mama {
    position: absolute;
    bottom: 80%;
    width: 76%;
    left: 12%;
}

/*------------レッスン内容--------------*/
.lesson {
	position: relative;
}

.lesson_title {
	position: absolute;
	bottom: 0%;
	
}

.lesson_1,.lesson_2,.lesson_3 {
	position: relative;
}
.lesson_in {
	position: absolute;
	bottom: 0;
	cursor: pointer;
}

/*------------講師紹介--------------*/
.result {
	position: relative;
}
.result_01 {
	position: absolute;
	bottom: 33%;
	left: 12%;
	width: 45%;
}
.result_02 {
	position: absolute;
	bottom: 26%;
	left: 54%;
	width: 42%;
	animation-delay: 0.2s!important;
	opacity: 0;
}
.result_03 {
	position: absolute;
	bottom: 0;
	left: 7%;
	width: 42%;
	animation-delay: 0.3s!important;
	opacity: 0;
}
.result_04 {
	position: absolute;
	bottom: 0;
	left: 45%;
	width: 54%;
	animation-delay: 0.4s!important;
	opacity: 0;
}

.mile {
	position: relative;
}
.mile_e {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%
}






/*------------voice--------------*/
.voice {
	position: relative;
}
.voice_title {
	position: absolute;
	bottom: 0;
}



/*------------footer---------------*/


.footer_menu{
	list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}



/* poyopoyo*/

.poyopoyo {
  animation: poyopoyo 1.5s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}




/* 斜めスライドイン*/
.slide-skew_1.is-animated.active {
  animation: slide-skew_1 1.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes slide-skew_1 {
  0% {
    transform: translate(-180px,-30px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}


.slide-skew_2.is-animated.active {
  animation: slide-skew_2 1.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes slide-skew_2 {
  0% {
    transform: translate(180px,50px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}







/*下からスライドイン*/
.Slide_In.active{
	animation-name:Slide_In;
	animation-duration:1.2s;
}

@keyframes Slide_In {
    0% {
		transform: translate(0,50%);
		opacity: 0;
	}

    100% {
        transform: translate(0,0px);
		opacity: 1;	
    }
}
	
	



.poyoyon3.is-animated.active {
  animation: poyoyon3 2.5s;
  opacity: 1;
}
@keyframes poyoyon3 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}