@charset "utf-8";
blockquote{display: none;}
body {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: 16px;
	color: #282828;
	background-color: #fff;
}
#wrap{
	overflow: hidden;
}
li{list-style: none;}
.clearfix {}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
img{
	width:100%;
	vertical-align: top;
}
a {
	color: #333;
	text-decoration: none;
}

.spbr{
	display:none;
}
.pcbr{
	display:block;
}

section{
	max-width:750px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}


#wrap{
	max-width:1400px;
	margin:auto;
}
section{
	text-align: center;
}

/* ======================================================
	クーポン（ポップアップ）
====================================================== */
#popupWall{
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	display: none;
}
#popupWall:after{
	display: inline-block;
	height: 100%;
	margin-left: -.05em;
	vertical-align: middle;
	content: "";
}
#popBn{
	z-index: 20;
	position: relative;
	width: 25%;
	margin: 0 auto;
	margin-top:30vh;
	cursor: pointer;
}
/* バツボタン */
#popX{
	position: absolute;
	top: -34px;
	right: 0;
	background: #fff;
	border-radius: 50%;
	cursor: pointer;
}
#popX span{
	display: block;
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 50%;
}
#popX span::before, #popX span::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px;
	height: 22px;
	background: #333;
}
#popX span::before{
	transform: translate(-50%,-50%) rotate(45deg);
}
#popX span::after{
	transform: translate(-50%,-50%) rotate(-45deg);
}


#footerBanner{
	width:100%;
	position: fixed;
	bottom: 0;
	text-align: center;
	z-index: 9999;
	display:none;
}
#footerBanner img{
	width:710px;
}



/****************************************************/
/*	共通												*/
/****************************************************/
.sp{
	display:none;
}

#section1_1_8{
	position: absolute;
	top: 130px;
	left: 516px;
}
#section1_1_1{
	width:396px;
	height:358px;
	position:absolute;
	top:131px;
	left:148px;
}
#section1_1_2{
	width:525px;
	height:415px;
	position:absolute;
	top:218px;
	left:191px;
}
#section1_1_3{
	width:181px;
	height:200px;
	position:absolute;
	top:608px;
	left:215px;
}
#section1_1_4{
	width:181px;
	height:183px;
	position:absolute;
	top:625px;
	left:543px;
	z-index:2;
}
#section1_1_5{
	width:212px;
	height:176px;
	position:absolute;
	top:630px;
	left:365px;
}
#section1_1_6{
	width:239px;
	height:656px;
	position:absolute;
	top:222px;
	left:36px;
}
#section1_1_7{
	width:336px;
	height:276px;
	position:absolute;
	top:822px;
	left:409px;
	z-index:2;
}
#section1_1_8 video {
	border-radius:50%;
}
#section1_1_9{
	width:346px;
	height:307px;
	position:absolute;
	top:790px;
	left:410px;
}
#section1_4_1{
	width:710px;
	height:986px;
	position:absolute;
	top:0px;
	left:0px;
}
#section1_4_2{
	width:674px;
	height:319px;
	position:absolute;
	top:809px;
	left:76px;
}
#section1_5_1{
	width:415px;
	height:782px;
	position:absolute;
	top:-30px;
	left:437px;
}
#section1_5_2{
	width:391px;
	height:212px;
	position:absolute;
	top:10px;
	left:91px;
}
#section1_5_3{
	width:512px;
	height:290px;
	position:absolute;
	top:193px;
	left:0px;
}
#section1_5_4{
	width:257px;
	height:243px;
	position:absolute;
	top:15px;
	left:285px;
}
#section1_6{
	overflow: initial;
}
#section1_6_1{
	width:714px;
	height:435px;
	position:absolute;
	top:265px;
	left:10px;
	z-index:10;
}
#section1_7{
	overflow-x: clip;
	overflow-y: visible;
	height: 582px;
}
#section1_8{
	margin-top: -8px;
	overflow: initial;
}
#section1_8>img{
	position: relative;
	z-index: 3;
}
#section1_8_1{
	width:224px;
	height:192px;
	position:absolute;
	top:-42px;
	left:251px;
	z-index: 3;
}
#section1_8_2{
	width:549px;
	height:67px;
	position:absolute;
	top:143px;
	left:102px;
	z-index: 3;
}
#section1_8_3{
	width: 750px;
	height: 430px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	margin-top: -1px;
}
#section1_8_4{
	width:301px;
	height:49px;
	position:absolute;
	top:43px;
	left:224px;
	z-index: 3;
}

#section2_1{
	overflow: initial;
}
#section2_2{
	overflow: initial;
}
#section2_1_1{
	width:94px;
	height:494px;
	position:absolute;
	top:26px;
	right:10px;
}
#section2_1_2{
	width:230px;
	height:443px;
	position:absolute;
	top:560px;
	right:17px;
	z-index: 10;
}
#section2_1_3{
	width:340px;
	height:438px;
	position:absolute;
	top:165px;
	left:204px;
	filter: drop-shadow(5px 5px 5px #aaa);
}
#section2_3_1{
	width:588px;
	height:221px;
	position:absolute;
	top:56px;
	left:88px;
}
#section2_4_1{
	width:750px;
	height:776px;
	position:absolute;
	top:0px;
	left:0px;
}
#section2_4_2{
	width:750px;
	height:776px;
	position:absolute;
	top:0px;
	left:0px;
}
#section2_5{
	overflow-y: initial;
}
#section2_5_1{
	width:75px;
	height:651px;
	position:absolute;
	top:18px;
	left:79px;
}
#section2_5_1-2{
	width:77px;
	height:650px;
	position:absolute;
	top:18px;
	left:200px;
}
#section2_5_0{
	width:75px;
	height:651px;
	position:absolute;
	top:18px;
	left:79px;
	background-color: #fff;
}
#section2_5_0-2{
	width:77px;
	height:650px;
	position:absolute;
	top:18px;
	left:200px;
	background-color: #fff;
}
#section2_5_2{
	width:595px;
	height:176px;
	position:absolute;
	top:745px;
	left:79px;
}
#section2_6{
	overflow-x: clip;
	overflow-y: visible;
}
#section2_6_1{
	width:256px;
	height:509px;
	position:absolute;
	top:-97px;
	right:-45px;
	z-index:10;
}
#section2_6_2{
	width:730px;
	height:578px;
	position:absolute;
	top:335px;
	left:0px;
}
#section2_6_3{
	width:239px;
	height:252px;
	position:absolute;
	top:243px;
	left:366px;
}
#section2_7_1{
	width:631px;
	height:98px;
	position:absolute;
	top:160px;
	left:60px;
}
#section2_8_1{
	width:695px;
	height:678px;
	position:absolute;
	top:182px;
	left:27px;
}
#section2_8_2{
	width:251px;
	height:709px;
	position:absolute;
	top:331px;
	left:283px;
}
#section2_9_1{
	width:750px;
	height:145px;
	position:absolute;
	top:0px;
	left:0px;
}
#section2_9_2{
	width:750px;
	height:145px;
	position:absolute;
	top:0px;
	left:0px;
}


#section3_2{
	overflow-x: clip;
	overflow-y: visible;
}
#section3_2_1{
	width:340px;
	height:596px;
	position:absolute;
	top:-6px;
	left:34px;
}
#section3_2_2{
	width:340px;
	height:596px;
	position:absolute;
	top:-6px;
	left:375px;
}
#section3_2_3{
	width:340px;
	height:597px;
	position:absolute;
	top:600px;
	left:34px;
}
#section3_2_4{
	width:340px;
	height:597px;
	position:absolute;
	top:600px;
	left:374px;
}
#section3_2_5{
	width:103px;
	height:105px;
	position:absolute;
	top:547px;
	left:325px;
}
#section3_2_6{
	width:600px;
	height:1358px;
	position:absolute;
	top:0px;
	left:77px;
	display:none;
	height:1191px;
	overflow-y:scroll;
}
#section3_2_7{
	width:600px;
	height:1578px;
	position:absolute;
	top:0px;
	left:77px;
	display:none;
	height:1191px;
	overflow-y:scroll;
}
#section3_2_8{
	width:600px;
	height:1967px;
	position:absolute;
	top:0px;
	left:77px;
	display:none;
	height:1191px;
	overflow-y:scroll;
}
#section3_2_9{
	width:601px;
	height:2482px;
	position:absolute;
	top:0px;
	left:77px;
	display:none;
	height:1191px;
	overflow-y:scroll;
}
#section3_3_1{
	width:277px;
	height:193px;
	position:absolute;
	top:65px;
	left:49px;
}
#section3_3_2{
	width:277px;
	height:193px;
	position:absolute;
	top:52px;
	right:44px;
}
#section3_3_3{
	width:322px;
	height:196px;
	position:absolute;
	top:745px;
	left:33px;
}
#section3_3_4{
	width:322px;
	height:198px;
	position:absolute;
	top:765px;
	right:36px;
}
#section3_3_5{
	width:556px;
	height:556px;
	position:absolute;
	top:219px;
	left:97px;
}
#section3_3_6{
	width:512px;
	height:512px;
	position:absolute;
	top:241px;
	left:119px;
}
#section3_3_7{
	width:500px;
	height:500px;
	position:absolute;
	top:260px;
	left:137px;
}
#section3_4{
	z-index: 11;
}
#section3_4_1{
	width:750px;
	height:1330px;
	position:absolute;
	top:0px;
	left:0px;
}
#section3_4_2{
	width:646px;
	height:685px;
	position:absolute;
	top:134px;
	left:56px;
}
#section3_4_3{
	width:148px;
	height:710px;
	position:absolute;
	top:206px;
	right:60px;
}
#section3_5{
	overflow-x: clip;
	overflow-y: visible;
	z-index: 11;
}
#section3_5_1{
	width:750px;
	height:1155px;
	position:absolute;
	top:0px;
	left:0px;
}
#section3_5_2{
	width:750px;
	height:1141px;
	position:absolute;
	top:-25px;
	left:0px;
	z-index: 10;
}
#section3_5_3{
	width:147px;
	height:499px;
	position:absolute;
	top:73px;
	left:55px;
	z-index: 11;
}
#section3_6{
	overflow-x: clip;
	overflow-y: visible;
}
#section3_6_1{
	width:255px;
	height:1051px;
	position:absolute;
	top:0px;
	left:0px;
}
#section3_6_2{
	width:243px;
	height:1051px;
	position:absolute;
	top:0px;
	left:253px;
}
#section3_6_3{
	width:253px;
	height:1051px;
	position:absolute;
	top:0px;
	left:496px;
}
#section3_6_4{
	width:184px;
	height:352px;
	position:absolute;
	top:225px;
	left:27px;
}
#section3_6_5{
	width:98px;
	height:204px;
	position:absolute;
	top:654px;
	left:323px;
}
#section3_6_6{
	width:97px;
	height:260px;
	position:absolute;
	top:198px;
	right:72px;
	z-index: 11;
}
#section3_6_7{
	width:210px;
	height:838px;
	position:absolute;
	top:197px;
	left:410px;
}
#section3_6_8{
	width:345px;
	height:937px;
	position:absolute;
	top:129px;
	left:380px;
	z-index: 10;
}
#section3_6_9{
	width:269px;
	height:508px;
	position:absolute;
	top:712px;
	left:8px;
	z-index: 10;
}
#section3_7_1{
	width:750px;
	height:306px;
	position:absolute;
	top:0px;
	left:0px;
}

#section4_1_1{
	width:473px;
	height:99px;
	position:absolute;
	bottom:38px;
	left:161px;
}
#section4_1_2{
	width:181px;
	height:432px;
	position:absolute;
	top:40px;
	left:47px;
}

#section4_2_1{
	width:283px;
	height:831px;
	position:absolute;
	top:44px;
	left:263px;
}
#section4_2_2{
	background-color: #fff;
	line-height: 2em;
}
#section4_2_2 ul{
	text-align: left;
	padding: 22px 50px;
	font-size: 18px;
	margin:0;
}
#section4_2_2 ul li{
	margin-bottom:5px;
}
#section4_2_2 ul li a{
	text-decoration: underline solid;
}
#section4_2_2 ul li a:hover{
	text-decoration: none;
}


#sectionOffer{
	background-color: #fff;
	padding-bottom: 30px;
}
#sectionOffer img{
	width: 710px;
	height: 150px;
}
#section4_3_1{
	width:736px;
	height:276px;
	position:absolute;
	top:244px;
	left:0px;
}
#section4_3_2{
	width:516px;
	height:206px;
	position:absolute;
	bottom:9px;
	left:116px;
}
#section4_4_1{
	width:750px;
	height:546px;
	position:absolute;
	top:0px;
	left:0px;
}
#section4_4_2{
	width:750px;
	height:546px;
	position:absolute;
	top:0px;
	left:0px;
}
#section4_4_3{
	width:82px;
	height:82px;
	position:absolute;
	top:235px;
	left:334px;
}
#section4_5_1{
	width:375px;
	height:369px;
	position:absolute;
	top:0px;
	left:0px;
}
#section4_5_2{
	width:375px;
	height:369px;
	position:absolute;
	top:0px;
	right:0px;
}
#section4_6_1{
	width:347px;
	height:347px;
	position:absolute;
	top:147px;
	left:220px;
}
#section4_6_2{
	width:145px;
	height:489px;
	position:absolute;
	top:0px;
	right:27px;
}
#section4_6_3{
	width:145px;
	height:489px;
	position:absolute;
	top:0px;
	right:27px;
}
#section4_6_4{
	width:303px;
	height:279px;
	position:absolute;
	bottom:0px;
	left:32px;
}
#section4_8 video{
	position:absolute;
	top:1px;
	left:40px;
}
#section4_9_1{
	width:750px;
	height:699px;
	position:absolute;
	top:49px;
	left:0px;
}
#section4_9_2{
	width:750px;
	height:699px;
	position:absolute;
	top:49px;
	left:0px;
}

#section5_0{
	height: 988px;
}
#section5_1{
	width: 750px;
	height: 988px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
}
#section5_1_1{
	width:237px;
	height:655px;
	position:absolute;
	top:240px;
	left:294px;
}
#section5_2_1{
	width:750px;
	height:223px;
	position:absolute;
	top:0px;
	left:0px;
}
#section5_2_2{
	width:750px;
	height:223px;
	position:absolute;
	top:0px;
	left:0px;
}
#section5_3_1{
	width:604px;
	height:183px;
	position:absolute;
	top:56px;
	left:77px;
}
#section5_4_1{
	width:358px;
	height:293px;
	position:absolute;
	top:148px;
	left:121px;
}
#section5_4_2{
	width:750px;
	height:487px;
	position:absolute;
	top:0px;
	left:0px;
}
#section5_5{
	overflow-x: clip;
	overflow-y: visible;
}
#section5_5_1{
	width:690px;
	height:324px;
	position:absolute;
	top:214px;
	left:21px;
	z-index: 10;
}
#section5_6{
	height:569px;
}
#section5_6_1{
	width:594px;
	height:166px;
	position:absolute;
	bottom:23px;
	left:82px;
}
#section5_7,
#section5_9,
#section6_1{
	margin-top: -8px;
}
#section5_8{
	height:391px;
}
#section5_9_1{
	width:181px;
	height:206px;
	position:absolute;
	top:9px;
	left:20px;
}
#section5_9_2{
	width:181px;
	height:206px;
	position:absolute;
	top:9px;
	left:196px;
}
#section5_9_3{
	width:181px;
	height:206px;
	position:absolute;
	top:9px;
	left:372px;
}
#section5_9_4{
	width:181px;
	height:206px;
	position:absolute;
	top:9px;
	left:548px;
}
#section5_11{
	overflow-x: clip;
	overflow-y: visible;
}
#section5_11_1{
	width:555px;
	height:293px;
	position:absolute;
	top:76px;
	left:126px;
	z-index: 10;
}
#section5_11_2{
	width:83px;
	height:160px;
	position:absolute;
	top:116px;
	left:332px;
}
#section5_12{
	height:427px;
}
#section6_1{
	height:1151px;
}
#section6_1 video{
	position:absolute;
	top:263px;
	left:33px;
}
#section6_1_1{
	width:229px;
	height:489px;
	position:absolute;
	bottom:-47px;
	right:0px;
}
#section6_2>img{
	position: relative;
	z-index: 3;
}
#section6_2_1{
	width: 750px;
	height: 1589px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	margin-top: -1px;
}

/*
#section6_2_1{
	width:652px;
	height:635px;
	position:absolute;
	top:257px;
	left:39px;
}
#section6_2_2{
	width:403px;
	height:475px;
	position:absolute;
	top:293px;
	left:172px;
}
*/
#section6_3_1{
	width:406px;
	height:95px;
	position:absolute;
	top:29px;
	left:30px;
}
#section6_3_2{
	width:406px;
	height:95px;
	position:absolute;
	top:306px;
	right:25px;
}
#section6_3_3{
	width:437px;
	height:98px;
	position:absolute;
	bottom:86px;
	left:30px;
}
#section6_4_1{
	width:682px;
	height:340px;
	position:absolute;
	top:304px;
	left:0px;
}
#section6_4_2{
	width:681px;
	height:340px;
	position:absolute;
	top:643px;
	right:0px;
}
#section6_4_3{
	width:682px;
	height:340px;
	position:absolute;
	bottom:43px;
	left:0px;
}

#section7_1{
	overflow-x: clip;
	overflow-y: visible;
}
#section7_1_1{
	width:201px;
	height:524px;
	position:absolute;
	top:140px;
	left:19px;
	z-index: 10;
}
#section7_1_2{
	width:426px;
	height:322px;
	position:absolute;
	bottom:46px;
	left:163px;
}
#section7_2_1{
	width:383px;
	height:305px;
	position:absolute;
	top:253px;
	left:18px;
	z-index: 10;
}
#section7_2_2{
	width:446px;
	height:354px;
	position:absolute;
	top:193px;
	right:8px;
}
#section7_3_0{
	width:597px;
	height:144px;
	position:absolute;
	top:48px;
	left:77px;
	background-color:#222;
}
#section7_3_1{
	width:597px;
	height:143px;
	position:absolute;
	top:48px;
	left:77px;
}
#section7_4{
	overflow-x: clip;
	overflow-y: visible;
}
#section7_4_1{
	width:180px;
	height:180px;
	position:absolute;
	top:-64px;
	left:-34px;
}
#section7_4_2{
	width:95px;
	height:93px;
	position:absolute;
	top:338px;
	left:50px;
}
#section7_4_3{
	width:151px;
	height:154px;
	position:absolute;
	top:350px;
	right:-83px;
}
#section7_4_4{
	width:319px;
	height:679px;
	position:absolute;
	bottom:123px;
	right:-60px;
}

#cont8{
	padding-bottom: 200px;
	background-color: #fff;
}

#cont8 section{
	position:relative;
}
#cont8 section .arrow{
	width:42px;
	height:19px;
	position:absolute;
	top:51px;
	right:40px;
}

#section8_3_2,
#section8_4_2,
#section8_5_2,
#section8_6_2,
#section8_7_2,
#section8_8_2{
	height:0;
	overflow-y: hidden;
}


#course-description {
	border: 15px solid #F5F5F6;
	margin: 0 auto 20px auto;
	font-size:0.85em;
	padding: 0 2% 0 2%;
	width: 892px;
	height: auto;
	text-align: left;
	line-height: 160%;
}
#course-description dl{
	margin: 2% 0 2% 0;
}
#course-description dt:first-child{
	font-weight:bold;
	margin-bottom:3%;
	font-size:1.25em;
}
#course-description dd{
	line-height:130%;
	margin-bottom:1%;
}
/* ======================================================
	クーポン（LP内）
====================================================== */
#coupon_lp{ 
	padding: 20px 0 0 0;
	width: 100%;
	margin: auto;	
	text-align:center;
}
#coupon_lp img{
	width:628px;
}
/* ======================================================
	クーポンを利用するチェックボックス
====================================================== */
#coupon{
	text-align: center;
	color: #E2317A;
	font-weight: bold;
	font-size: 0.85em;
	margin: 3% auto 3% auto;
}


/****************************************************/
/*	anim											*/
/****************************************************/
.actShutter{
	animation-name: actShutterAnim;
	animation-fill-mode: forwards;
	animation-duration: 0.7s;
	animation-direction:alternate;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}
@keyframes actShutterAnim{
	0%{opacity:0;}
	50%{opacity:1;}
	100%{opacity:0;}
}


.actFloat1,
.actFloat2,
.actFloat3{
	animation-name: actFloatAnim;
	animation-fill-mode: forwards;
	animation-duration: 2s;
	animation-direction:alternate;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}
.actFloat2{
	animation-delay: 1s;
}
.actFloat3{
	animation-delay: 0.5s;
}
@keyframes actFloatAnim{
	0%{margin-top:0px;}
	50%{margin-top:20px;}
	100%{margin-top:0px;}
}
.actFloat4{
	animation-name: actFloatSideAnim;
	animation-fill-mode: forwards;
	animation-duration: 1s;
	animation-direction:alternate;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}
@keyframes actFloatSideAnim{
	0%{transform: translateX(0);}
	50%{transform: translateX(20px);}
	100%{transform: translateX(0);}
}
.actFloat5{
	animation-name: actFloatTBAnim;
	animation-fill-mode: forwards;
	animation-duration: 2s;
	animation-direction:alternate;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}
@keyframes actFloatTBAnim{
	0%{transform: translateY(0);}
	50%{transform: translateY(-20px);}
	100%{transform: translateY(0);}
}

.actSlideshow{
  display: flex;
  animation: loop-slide 20s infinite linear 0s both;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}


.actBounds{
	animation-name: actBoundsAnim;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
	animation-direction:alternate;
	animation-iteration-count:infinite;
	animation-timing-function:ease-out;
}
@keyframes actBoundsAnim{
	0%{scale:1;}
	100%{scale:1.05;}
}


.leftSlide{
	animation-name: leftSlideAnim;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
}
@keyframes leftSlideAnim{
	0%{opacity:0;transform: translateX(-100px);}
	100%{opacity:1;transform: translateX(0px);}
}

.rightSlide{
	animation-name: rightSlideAnim;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
}
@keyframes rightSlideAnim{
	0%{opacity:0;transform: translateX(100px);}
	100%{opacity:1;transform: translateX(0px);}
}

.rightSlideFast{
	animation-name: rightSlideAnim;
	animation-fill-mode: forwards;
	animation-duration: 0.3s;
}
.rightSlideSlow{
	animation-name: rightSlideAnim;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
	animation-delay: 0.5s;
}


.bottomSlide{
	animation-name: bottomSlideAnim;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
}
@keyframes bottomSlideAnim{
	0%{opacity:0;transform: translateY(100px);}
	100%{opacity:1;transform: translateY(0px);}
}

.bottomSlide1{
	animation-name: bottomSlideAnim;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
	animation-delay: 0.3s;
}
.bottomSlide2{
	animation-name: bottomSlideAnim;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
	animation-delay: 0.6s;
}
.bottomSlide3{
	animation-name: bottomSlideAnim;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
	animation-delay: 0.9s;
}


.bottomSlideSlow{
	animation-name: bottomSlideAnim;
	animation-fill-mode: forwards;
	animation-duration: 1s;
}
@keyframes bottomSlideAnim{
	0%{opacity:0;transform: translateY(50px);}
	100%{opacity:1;transform: translateY(0px);}
}

.topSlide{
	animation-name: topSlideAnim;
	animation-fill-mode: forwards;
	animation-duration: 0.7s;
}
.topSlideSlow{
	animation-name: topSlideAnim;
	animation-fill-mode: forwards;
	animation-duration: 1s;
}
@keyframes topSlideAnim{
	0%{opacity:0;transform: translateY(-150px);}
	100%{opacity:1;transform: translateY(0px);}
}



.arrowDown{
	animation-name: arrowDownAnim;
	animation-fill-mode: forwards;
	transform-origin: 0% 0%;
	animation-duration: 1.5s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-out;
	position: relative;
}
@keyframes arrowDownAnim{
	0%{transform: scale(0.3);top:147px;}
	50%{transform: scale(1);top:147px;}
	100%{transform: scale(1);top:147px;}
}


.arrowRotateUP{
	animation-name: arrowRotateUPAnim;
	animation-fill-mode: forwards;
	animation-timing-function:ease-in;
	animation-duration: 0.3s;
	transform-origin:center;
}
@keyframes arrowRotateUPAnim{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(180deg);}
}

.arrowRotateDOWN{
	animation-name: arrowRotateDOWNAnim;
	animation-fill-mode: forwards;
	animation-timing-function:ease-in;
	animation-duration: 0.3s;
	transform-origin:center;
}
@keyframes arrowRotateDOWNAnim{
	0%{transform:rotate(180deg);}
	100%{transform:rotate(360deg);}
}


.actZoomin{
	animation-name: actZoomInAnim;
	animation-duration: 0.4s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
 
@keyframes actZoomInAnim {
	0% {
		transform: scale(0.7);
		opacity: 0;
	}
	80% {
		opacity: 1;
		transform: scale(1.3);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
#section1_2_1 img{
	width:auto;
}
#section1_2_1 {
    width: 0;
    height: 354px;
    overflow: hidden;
}
.actVanishIn{
	animation-name: actVanishInAnim;
	animation-duration: 0.4s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
@keyframes actVanishInAnim {
	100% {
		width:750px;
	}
}

.actTataki{
	animation-name: actTatakiAnim;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
 
@keyframes actTatakiAnim {
	0% {
		transform: translateX(100px);
		transform: translateY(-50px);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(0px);
		transform: translateY(0px);
		opacity: 1;
	}
}

.expansion{
	animation-name: expansionAnim;
	animation-fill-mode: forwards;
	transform-origin: 0% 100%;
	animation-duration: 1.5s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-out;
	position: relative;
}
@keyframes expansionAnim{
	0%{transform: scale(0.1);}
	50%{transform: scale(1);}
	100%{transform: scale(1);}
}


.left_to_right img {
    max-width: 100%;
    animation-name: anime_left_to_right;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-direction: normal;
}
.section6_4_1{opacity:0;}
@keyframes anime_left_to_right {
    0% {
    	opacity:1;
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    }
    100% {
    	opacity:1;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}


#section4_6_1 figure {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 378px;
}
#section4_6_2 figure {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 611px;
}
#section9_3_1 figure {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 153px;
}
#section4_6_1 figure::before ,
#section4_6_2 figure::before ,
#section9_3_1 figure::before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #fff;
}
#section4_6_1.move figure::before ,
#section4_6_2.move figure::before ,
#section9_3_1.move figure::before {
  animation: barAnime forwards 0.5s 1 ease 0.1s normal;
}
#section4_6_1 figure img ,
#section4_6_2 figure img ,
#section9_3_1 figure img {
	opacity: 0;
}
#section4_6_1.move figure img ,
#section4_6_2.move figure img ,
#section9_3_1.move figure img {
  animation: photoAnime forwards 0.5s 1 ease 0.5s normal;
}












#section2_6_1,
#section7_4_4{
	right:0px;
}
.actLittleRight{
	animation-name: actLittleRightAnim;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.actLittleRight2{
	animation-name: actLittleRightAnim2;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

@keyframes actLittleRightAnim {
	0% {
		right: 0px;
	}
	100% {
		right: -45px;
	}
}
@keyframes actLittleRightAnim2 {
	0% {
		right: 0px;
	}
	100% {
		right: -60px;
	}
}

#section2_8_2{
	transform: translateY(280px);
}
.actLittleBottom{
	animation-name: actLittleBottomAnim;
	animation-duration: 0.6s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
 
@keyframes actLittleBottomAnim {
	0% {
		transform: translateY(280px);
	}
	100% {
		transform: translateY(0px);
	}
}

.actDiagonal1{
	animation-name: actDiagonalAnim1;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
 
@keyframes actDiagonalAnim1 {
	0%{opacity:0;transform: translate(250px,-250px);}
	100%{opacity:1;transform: translate(0px,0px);}
}

.actDelayOpacity{
	animation-name: actDelayOpacityAnim;
	animation-duration: 0.2s;
	animation-timing-function: linear;
    animation-delay: 0.5s;
	animation-fill-mode: forwards;
}
 
@keyframes actDelayOpacityAnim {
	0%{opacity:0;}
	100%{opacity:1;}
}
#section5_4_1{
	transform: scale(0.1);
	top: 30px;
}
.bubbleNozzle{
	animation-name: bubbleNozzleAnim;
	transform-origin: 0% 100%;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	animation-timing-function:ease-out;
	transform-origin:top;
	position: relative;
}
@keyframes bubbleNozzleAnim{
	0%{transform: scale(0.1);top: 148px;}
	50%{transform: scale(1);top: 148px;}
	100%{transform: scale(1);top: 148px;}
}
.actBottomSlide4_1,
.actBottomSlide4_2,
.actBottomSlide4_3,
.actBottomSlide4_4{
	animation-name: actBottomSlide4;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	animation-timing-function:ease-out;
}
.actBottomSlide4_2{animation-delay: 0.3s;}
.actBottomSlide4_3{animation-delay: 0.6s;}
.actBottomSlide4_4{animation-delay: 0.9s;}
@keyframes actBottomSlide4{
	0%{opacity:0;transform: translateY(50px);}
	100%{opacity:1;transform: translateY(0px);}
}

@keyframes barAnime{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	68% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@keyframes photoAnime{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#section1_4_1,
#section5_2_1{
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
}

.leftSlidePower{
	animation-name: leftSlidePowerAnim;
	animation-duration: 0.7s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

@keyframes leftSlidePowerAnim {
	100% {
		webkit-clip-path: inset(0);
		clip-path: inset(0);
	}
}
#section3_6_1,
#section3_6_3,
#section4_6_3{
	-webkit-clip-path: inset(0 0 100% 0);
	clip-path: inset(0 0 100% 0);
}
#section3_6_2{
	-webkit-clip-path: inset(100% 0 0 0);
	clip-path: inset(100% 0 0 0);
}
#section2_9_1,
#section6_4_1,
#section6_4_3{
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
}
#section6_4_2{
	-webkit-clip-path: inset(0 0 0 100%);
	clip-path: inset(0 0 0 100%);
}
.slidePower{
	animation-name: slidePowerAnim;
	animation-duration: 0.7s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

@keyframes slidePowerAnim {
	100% {
		webkit-clip-path: inset(0);
		clip-path: inset(0);
	}
}
.actDelayFade{
	animation-name: actDelayFadeAnim;
	animation-duration: 0.3s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-delay: 0.7s;
}

@keyframes actDelayFadeAnim {
	100% {
		opacity:1;
	}
}

#section3_6_9{
	transform: translateX(-350px);
}
.leftSlideIn{
	animation-name: leftSlideInAnim;
	animation-duration: 0.3s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
 
@keyframes leftSlideInAnim {
	0%{transform: translateX(-350px);}
	100%{transform: translateX(0px);}
}

.actShakeBottle{
	animation-name: actShakeBottleAnim;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-iteration-count:infinite;
}
@keyframes actShakeBottleAnim {
	0%{ transform:rotate(7deg);}
	10%{ transform:rotate(-7deg);}
	20%{ transform:rotate(7deg);}
	30%{ transform:rotate(-7deg);}
	40%{ transform:rotate(7deg); }
	100%{ transform:rotate(7deg); }
}

.actScaleUp{
	animation-name: actScaleUpAnim;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
@keyframes actScaleUpAnim {
	0%{ scale:1;}
	50%{ scale:2;}
	100%{ scale:1; }
}

#section4_5_1{
	transform: translateX(-400px);
}
#section4_5_2{
	transform: translateX(400px);
}
.leftSlideIn2{
	animation-name: slideInAnim2;
	animation-duration: 0.3s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;

}
.rightSlideIn2{
	animation-name: slideInAnim2;
	animation-duration: 0.3s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-delay: 0.3s;
}
@keyframes slideInAnim2 {
	100% {
		transform: translateX(0px);
	}
}
#section4_6_4{
	transform: translateY(400px);
}
.bottomSlideIn2{
	animation-name: slideInAnim3;
	animation-duration: 0.3s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-delay: 0.2s;
}
@keyframes slideInAnim3 {
	100% {
		transform: translateY(0px);
	}
}

#section7_2_1{
	transform: translateX(190px);
}
#section7_2_2{
	transform: translateX(-120px);
}
.slideInCenter{
	animation-name: slideInCenterAnim;
	animation-duration: 0.3s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;

}
@keyframes slideInCenterAnim {
	100% {
		transform: translateX(0px);
	}
}

#section2_5_0,
#section2_5_0-2{
	-webkit-clip-path: inset( 0);
	clip-path: inset( 0);
}
.slideLinePower2{
	animation-name: slideLinePowerAnim2;
	animation-duration: 0.7s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
@keyframes slideLinePowerAnim2 {
	100% {
		-webkit-clip-path: inset( 0 100% 0 0);
		clip-path: inset( 0 100% 0 0);
	}
}


#section7_3_0{
	-webkit-clip-path: inset( 0 100% 0 0);
	clip-path: inset( 0 100% 0 0);
}
.slideLinePower{
	animation-name: slideLinePowerAnim;
	animation-duration: 1.2s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
#section7_3_1{
	opacity: 0;
}
.slideLinePowerOpacity{
	animation-name: photoAnime;
	animation-duration: 0.1s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-delay: 0.6s;
}
@keyframes slideLinePowerAnim {
	40% {
		webkit-clip-path: inset(0);
		clip-path: inset(0);
	}
	60% {
		webkit-clip-path: inset(0);
		clip-path: inset(0);
	}
	100% {
		-webkit-clip-path: inset( 0 100% 0 0);
		clip-path: inset( 0 100% 0 0);
	}
}


.btn_box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}



@keyframes btn_animation {
    0% {
        transform: translate(4px, 0px);
    }
    5% {
        transform: translate(-4px, 0px);
    }
    10% {
        transform: translate(4px, 0px);
    }
    15% {
        transform: translate(-4px, 0px);
    }
    20% {
        transform: translate(4px, 0px);
    }
    25% {
        transform: translate(-4px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

.actPoyonBubble {
	animation-name: btn_animation;
	animation-fill-mode: forwards;
	animation-duration: 2s;
	animation-timing-function:ease-out;
	position: relative;
	animation-iteration-count:infinite;
}

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

.actMoveFinger{
	animation-name: actMoveFingerAnim;
	animation-duration: 1.75s;
	animation-fill-mode: forwards;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
}
@keyframes actMoveFingerAnim{
	0%{opacity:1;transform: translate(0px);}
	65%{opacity:1;transform: translate(-30px,-80px);scale:1.0;}
	70%{opacity:1;transform: translate(-30px,-80px);scale:0.9;}
	75%{opacity:1;transform: translate(-30px,-80px);scale:1.0;}
	100%{opacity:0;transform: translate(-30px,-80px);}
}

#section1_5_1{
	transform:rotate(40deg);
	transform-origin:bottom;
}
.bottleRotate{
	animation-name: bottleRotateAnim;
	animation-fill-mode: forwards;
	animation-timing-function:ease-in;
	animation-duration: 0.5s;
}
@keyframes bottleRotateAnim{
	0%{transform:rotate(25deg);}
	100%{transform:rotate(0deg);}
}
#section1_5_4{
	transform: scale(0.1);
}
.bubbleNozzle2{
	animation-name: bubbleNozzleAnim2;
	transform-origin: 100% 0%;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	animation-timing-function:ease-out;
	transform-origin:top rightSlide;
	position: relative;
	animation-delay: 0.5s;
}
@keyframes bubbleNozzleAnim2{
	0%{transform: scale(0.1);opacity: 1;}
	50%{transform: scale(1);opacity: 1;}
	100%{transform: scale(1);opacity: 1;}
}


/* ===== 継続率（円グラフ） ===== */
.circle {
	position: relative;
	width: 500px;
	height: 500px;
	background: #4772C5;
	border-radius: 50%;
	text-align: center;
	overflow: hidden;
	z-index: 2;
}
.circle::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: -250px;
	width: 500px;
	height: 500px;
	background: #fff;
	transform-origin: right 250px;
	z-index: 3;
	animation: rotate-circle-left 1s ease-out forwards;
}
.circle::after {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 250px;
	width: 500px;
	height: 500px;
	background: #fff;
	transform-origin: left 250px;
	z-index: 4;
	animation: rotate-circle-right 1s linear forwards;
}
.circle .circle-inner {
	position: absolute;
	top: 75px;
	left: 75px;
	width: 350px;
	height: 350px;
	background: #fff;
	border-radius: 50%;
	z-index: 5;
}
#circle_outer {
	position: relative;
	top: -13px;
	left: -11px;
	width: 500px;
	height: 500px;
	background: #fff;
	border-radius: 50%;
	z-index: 1;
}
.circle-font {
	position: absolute;
	top: 155px;
	left: 65px;
	z-index: 7;
	font-size:6em;
	text-shadow:2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff;;
}
.circle-font>img{
	width:100%!important;
}

/* ===== 円グラフ ===== */
@keyframes rotate-circle-right {
	0%   {
		transform: rotate(0deg);
		background: #fff;
	}
	50%  {
		transform: rotate(180deg);
		background: #fff;
	}
	50.001% {
		transform: rotate(360deg);
		background: #4772C5;
	}
	100% {
		transform: rotate(360deg);
		background: #4772C5;
	}
}

@keyframes rotate-circle-left {
	0%   { transform: rotate(0deg); }
	50%  { transform: rotate(0deg); }
	100% { transform: rotate(170deg); }
}

.actCircleLT,
.actCircleRT,
.actCircleLB,
.actCircleRB{
	animation-name: actCircleAnim;
	animation-duration: 0.6s;
	animation-fill-mode: forwards;
	animation-timing-function:linear;
}
.actCircleLT{
	transform-origin: 100% 100%;
	animation-delay: 0.5s;
}
.actCircleRT{
	transform-origin: 0% 100%;
	animation-delay: 0.6s;
}
.actCircleLB{
	transform-origin: 100% 0%;
	animation-delay: 0.6s;
}
.actCircleRB{
	transform-origin: 0% 0%;
	animation-delay: 0.5s;
}

@keyframes actCircleAnim{
	0%{transform: scale(0.1);opacity: 1;}
	100%{transform: scale(1);opacity: 1;}
}

.before_after_slider {
	position: absolute;
	overflow: hidden;
	width: 800px;
	max-width: 100%;
	margin: 0 auto;
	top: 0;
}

.box_before {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 50%;
	height: 100%;
	border-right: 5px solid rgba(255, 255, 255, 0.7);
	box-shadow: 10px 0 15px -13px #000;
}

.box_before img {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

.box_before::before {
	content: '';
	z-index: 1;
	position: absolute;
	top: 0;
	right: -44px;
	bottom: 0;
	width: 82px;
	height: 82px;
	margin: auto;
	background-image: url("../images/awa4_04_3.webp");
	background-size: contain;
	background-repeat: no-repeat;
}

.slider_range {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: col-resize;
}

@keyframes shiny {
	0% { left: 0%; }
	20% { left: 150%; }
	100% { left: 150%; }
}

.shiny-btn {
	position: relative;
	display: block;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background-color: #384878;
	overflow: hidden;
}

.shiny-btn::after {
	content: '';
	position: absolute;
	top: -10%;
	left: 0%;
	width: 150px;
	height: 100%;
	transform: scale(2) rotate(20deg);
	background-image: linear-gradient(100deg, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 1) 0%);

	/* アニメーション */
	animation-name: shiny;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

#cont0{
}
#section0_1{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	background-color:#fff;
	width:750px;
	height:100vh;
}
#section0_1 video{
	left: -50%;
	position: absolute;
	height: 100vh;
	width: 1500px;
}
#section0_1_2{
	z-index: 10001;
	scale: 0.1;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 700px;
	height: 450px;
	opacity: 0;
}
.actFlash{
	animation-name: actFlashAnim;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	animation-timing-function:ease-out;
	animation-delay: 4.14s;
}
@keyframes actFlashAnim{
	0%{scale:0.1;opacity: 1;}
	100%{scale:13;opacity: 1;}
}
#cont1,#cont5{opacity:0;}




#section1_1_6{opacity:0;}
#section1_1_3{opacity:0;}
#section1_1_4{opacity:0;}
#section1_1_5{opacity:0;}
#section1_4_2{opacity:0;}
#section1_5_3{opacity:0;}
#section1_5_4{opacity:0;}
#section1_8_2{opacity:0;}
#section2_1_3{opacity:0;}
#section2_3_1{opacity:0;}
#section2_4_1{opacity:0;}
#section2_4_2{opacity:0;}
#section2_5_2{opacity:0;}
#section2_6_2{opacity:0;}
#section2_7_1{opacity:0;}
#section3_3_1{opacity:0;}
#section3_3_2{opacity:0;}
#section3_3_3{opacity:0;}
#section3_3_4{opacity:0;}
#section3_4_1{opacity:0;}
#section3_4_3{opacity:0;}
#section3_5_1{opacity:0;}
#section3_5_3{opacity:0;}
#section3_6_4{opacity:0;}
#section3_6_5{opacity:0;}
#section3_6_6{opacity:0;}
#section3_7_1{opacity:0;}
#section4_2_1{opacity:0;}
#section4_9_1{opacity:0;}
#section4_9_2{opacity:0;}
#section5_1_1{opacity:0;}
#section5_3_1{opacity:0;}
#section5_9_1{opacity:0;}
#section5_9_2{opacity:0;}
#section5_9_3{opacity:0;}
#section5_9_4{opacity:0;}
#section5_11_2{opacity:0;}
#section6_3_1{opacity:0;}
#section6_3_2{opacity:0;}
#section6_3_3{opacity:0;}
#section7_1_1{opacity:0;}
#section7_1_2{opacity:0;}