@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;
}


.pcbr{
	display:none;
}
.spbr{
	display:block;
}
#wrap img{
	width:100%;
}


/* ======================================================
	クーポン（ポップアップ）
====================================================== */
#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: 90%;
	margin: 0 auto;
	margin-top:30vh;
	cursor: pointer;
}
#popBn img{
	width:100%;
}
/* バツボタン */
#popX{
	position: absolute;
	top: -26px;
	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: 2px;
	height: 17px;
	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:94%;
}

/****************************************************/
/*	共通												*/
/****************************************************/
section{
	width:100%;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.pc{
	display:none;
}

#section1_1 video{
	position: absolute;
	top: 18vw;
	left: 71vw;
	width: 26vw;
}
#section1_1_1{
	width:57vw;
	position:absolute;
	top:15vw;
	left:16vw;
}
#section1_1_2{
	width:73vw;
	position:absolute;
	top:28vw;
	left:22vw;
}
#section1_1_3{
	width:23vw;
	position:absolute;
	top:83vw;
	left:28vw;
}
#section1_1_4{
	width:23vw;
	position:absolute;
	top:86vw;
	left:73vw;
z-index:2;
}
#section1_1_5{
	width:26vw;
	position:absolute;
	top:86vw;
	left:49vw;
}
#section1_1_6{
	width:32vw;
	position:absolute;
	top:31vw;
	left:4vw;
}
#section1_1_7{
	width:45vw;
	position:absolute;
	top:108vw;
	left:54vw;
	z-index:2;

}
#section1_1_8 video {
	border-radius:50%;
}
#section1_1_9{
	width:45vw;
	position:absolute;
	top:106vw;
	left:57vw;
}
#section1_4_1{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
#section1_4_2{
	width:89vw;
	position:absolute;
	top:110vw;
	left:11vw;
}
#section1_5_1{
	width:52vw;
	position:absolute;
	top:-2vw;
	left:59vw;
}
#section1_5_2{
	width:50vw;
	position:absolute;
	top:0;
	left:12vw;
}
#section1_5_3{
	width:66vw;
	position:absolute;
	top:28vw;
	left:0px;
}
#section1_5_4{
	width:34vw;
	position:absolute;
	top:3vw;
	left:36vw;
}
#section1_6{
	overflow: initial;
}
#section1_6_1{
	width:95vw;
	position:absolute;
	top:36vw;
	left:2vw;
	z-index:10;
}
#section1_7 video{
	width:100%;
}

#section1_8{
	margin-top: -5px;
	overflow: initial;
}
#section1_8>img{
	position: relative;
	z-index: 3;
}
#section1_8_1{
	width:29vw;
	position:absolute;
	top:-5vw;
	left:35vw;
	z-index: 3;
}
#section1_8_2{
	width:71vw;
	position:absolute;
	top:19vw;
	left:15vw;
	z-index: 3;
}
#section1_8_3{
	width:100%;
	height: 52vw;
	position:absolute;
	top:0;
	left:0;
	z-index: 2;
}
#section1_8_4{
	width:40vw;
	position:absolute;
	top:6vw;
	left:30vw;
	z-index: 3;
}

#section2_1{
	overflow: initial;
}
#section2_2{
	overflow: initial;
}
#section2_1_1{
	width:12vw;
	position:absolute;
	top:5vw;
	right:2vw;
}
#section2_1_2{
	width:31vw;
	position:absolute;
	top:75vw;
	right:2vw;
	z-index: 10;
}
#section2_1_3{
	width:45vw;
	position:absolute;
	top:21vw;
	left:28vw;
	filter: drop-shadow(5px 5px 5px #aaa);
}
#section2_3_1{
	width:80vw;
	position:absolute;
	top:8vw;
	left:11vw;
}
#section2_4_1{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
#section2_4_2{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
#section2_5{
	overflow-y: initial;
}


#section2_5_1{
	width:9.5vw;
	position:absolute;
	top:3vw;
	left:11vw;
}
#section2_5_1-2{
	width:9.7vw;
	position:absolute;
	top:3vw;
	left:27vw;
}
#section2_5_0{
	width:9.5vw;
	height:86vw;
	position:absolute;
	top:3vw;
	left:11vw;
	background-color: #fff;
}
#section2_5_0-2{
	width:9.7vw;
	height:86vw;
	position:absolute;
	top:3vw;
	left:27vw;
	background-color: #fff;
}



#section2_5_2{
	width:77vw;
	position:absolute;
	top:100vw;
	left:12vw;
}
#section2_6{
	overflow-x: clip;
	overflow-y: visible;
}
#section2_6_1{
	width:35vw;
	position:absolute;
	top:-14vw;
	right:-6vw;
	z-index:10;
}
#section2_6_2{
	width:100vw;
	position:absolute;
	top:44vw;
	left:0;
}
#section2_6_3{
	width:32vw;
	position:absolute;
	top:33vw;
	left:48vw;
}
#section2_7_1{
	width:85vw;
	position:absolute;
	top:21vw;
	left:7vw;
}
#section2_8_1{
	width:90vw;
	position:absolute;
	top:27vw;
	left:6vw;
}
#section2_8_2{
	width:33vw;
	position:absolute;
	top:47vw;
	left:39vw;
}
#section2_9_1{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
#section2_9_2{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}


#section3_2{
	overflow-x: clip;
	overflow-y: visible;
}
#section3_2_1{
	width:45vw;
	position:absolute;
	top:0vw;
	left:5vw;
}
#section3_2_2{
	width:45vw;
	position:absolute;
	top:0vw;
	left:50vw;
}
#section3_2_3{
	width:45vw;
	position:absolute;
	top:80vw;
	left:5vw;
}
#section3_2_4{
	width:45vw;
	position:absolute;
	top:80vw;
	left:50vw;
}
#section3_2_5{
	width:13vw;
	position:absolute;
	top:73vw;
	left:44vw;
}
#section3_2_6{
	width:94vw;
	height: 100vh;
	position:absolute;
	top:0px;
	left:3vw;
	display:none;
	overflow-y:scroll;
}
#section3_2_7{
	width:94vw;
	height: 100vh;
	position:absolute;
	top:0px;
	left:3vw;
	display:none;
	overflow-y:scroll;
}
#section3_2_8{
	width:94vw;
	height: 100vh;
	position:absolute;
	top:0px;
	left:3vw;
	display:none;
	overflow-y:scroll;
}
#section3_2_9{
	width:94vw;
	height: 100vh;
	position:absolute;
	top:0px;
	left:3vw;
	display:none;
	overflow-y:scroll;
}
#section3_3_1{
	width:35vw;
	position:absolute;
	top:9vw;
	left:9vw;
}
#section3_3_2{
	width:35vw;
	position:absolute;
	top:8vw;
	right:7vw;
}
#section3_3_3{
	width:41vw;
	position:absolute;
	top:102vw;
	left:5vw;
}
#section3_3_4{
	width:41vw;
	position:absolute;
	top:104vw;
	right:7vw;
}
#section3_3_5{
	width:76vw;
	position:absolute;
	top:30vw;
	left:11vw;
}
#section3_3_6{
	width:74vw;
	position:absolute;
	top:31vw;
	left:12vw;
}
#section3_3_7{
	width:62vw;
	position:absolute;
	top:50vw;
	left:19vw;
}
#section3_4{
	z-index: 11;
}
#section3_4_1{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
#section3_4_2{
	width:91vw;
	position:absolute;
	top:15vw;
	left:6vw;
}
#section3_4_3{
	width:20vw;
	position:absolute;
	top:28vw;
	right:8vw;
}
#section3_5{
	overflow-x: clip;
	overflow-y: visible;
}
#section3_5_1{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
#section3_5{
	overflow-x: clip;
	overflow-y: visible;
}
#section3_5_2{
	width:100%;
	position:absolute;
	top:-6vw;
	left:0px;
	z-index: 11;
}
#section3_5_3{
	width:20vw;
	position:absolute;
	top:9vw;
	left:7vw;
	z-index: 12;
}
#section3_6{
	overflow-x: clip;
	overflow-y: visible;
}
#section3_6_1{
	width:33vw;
	position:absolute;
	top:0px;
	left:0px;
}
#section3_6_2{
	width:31.652vw;
	position:absolute;
	top:0px;
	left:33.3vw;
}
#section3_6_3{
	width:33vw;
	position:absolute;
	top:0px;
	left:66vw;
}
#section3_6_4{
	width:23vw;
	position:absolute;
	top:29vw;
	left:4vw;
}
#section3_6_5{
	width:13vw;
	position:absolute;
	top:87vw;
	left:42vw;
}
#section3_6_6{
	width:12vw;
	position:absolute;
	top:28vw;
	right:10vw;
	z-index: 11;
}
#section3_6_7{
	width:27vw;
	position:absolute;
	top:29vw;
	left:50vw;
}
#section3_6_8{
	width:45vw;
	position:absolute;
	top:18vw;
	left:49vw;
	z-index: 10;
}
#section3_6_9{
	width:37vw;
	position:absolute;
	top:93vw;
	left:0vw;
	z-index: 10;
}
#section3_7_1{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}

#section4_1_1{
	width:65vw;
	position:absolute;
	top:39vw;
	left:20vw;
}
#section4_1_2{
	width:22vw;
	position:absolute;
	top:8vw;
	left:6vw;
}
#section4_2_1{
	width:38vw;
	position:absolute;
	top:3vw;
	left:36vw;
}
#section4_2_2{
	background-color: #fff;
	line-height: 6vw;
}
#section4_2_2 ul{
	text-align: left;
	padding: 3vw 7vw;
	font-size: 14px;
	margin:0;
}
#section4_2_2 ul li{
	margin-bottom:0px;
}
#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: 6vw;
	text-align: center;
}
#sectionOffer img{
	width: 90vw;
	height: 20vw;
}
#section4_3_1{
	width:100vw;
	position:absolute;
	top:33vw;
	left:0px;
}
#section4_3_2{
	width:70vw;
	position:absolute;
	bottom:1vw;
	left:15vw;
}
#section4_4_1{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
#section4_4_2{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
#section4_4_3{
	width:12vw;
	position:absolute;
	top:29vw;
	left:44vw;
}
#section4_5_1{
	width:50vw;
	position:absolute;
	top:0px;
	left:0px;
}
#section4_5_2{
	width:50vw;
	position:absolute;
	top:0px;
	right:0px;
}
#section4_6_1{
	width:50vw;
	position:absolute;
	top:20vw;
	left:29vw;
}
#section4_6_2{
	width:20vw;
	position:absolute;
	top:0px;
	right:5vw;
}
#section4_6_3{
	width:20vw;
	position:absolute;
	top:0px;
	right:5vw;
}
#section4_6_4{
	width:40vw;
	position:absolute;
	bottom:0px;
	left:5vw;
}
#section4_8 video{
	position:absolute;
	top:0vw;
	left:5.5vw;
	width:88.9vw;
}
#section4_9_1{
	width:100vw;
	position:absolute;
	top:5vw;
	left:0vw;
}
#section4_9_2{
	width:100vw;
	position:absolute;
	top:6vw;
	left:0vw;
}
#section5_0{
	height: 100vh;
}
#section5_1{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	background-image: url(../images/awa5_01_sp.webp);
	background-size: cover;
	background-position: center;
}
#section5_1>img{ display:none;}

#section5_1_1{
	width:40vw;
	position:absolute;
	top:44vw;
	left:36vw;
}
#section5_2_1{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
#section5_2_2{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
#section5_3_1{
	width:85vw;
	position:absolute;
	top:7vw;
	left:7vw;
}
#section5_4_1{
	width:47vw;
	position:absolute;
	top:21vw;
	left:16vw;
}
#section5_4_2{
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
#section5_5{
	overflow-x: clip;
	overflow-y: visible;
}
#section5_5_1{
	width:95vw;
	position:absolute;
	top:32vw;
	left:2vw;
	z-index: 10;
}
#section5_6 video,
#section5_8 video,
#section5_12 video{
	width:100vw;
}
#section5_6_1{
	width:82vw;
	position:absolute;
	bottom:4vw;
	left:9vw;
}
#section5_7,
#section5_9,
#section6_1{
	margin-top: -5px;
}
#section5_9_1{
	width:24vw;
	position:absolute;
	top:2vw;
	left:3vw;
}
#section5_9_2{
	width:24vw;
	position:absolute;
	top:2vw;
	left:27vw;
}
#section5_9_3{
	width:24vw;
	position:absolute;
	top:2vw;
	left:51vw;
}
#section5_9_4{
	width:24vw;
	position:absolute;
	top:2vw;
	left:75vw;
}
#section5_11{
	overflow-x: clip;
	overflow-y: visible;
}
#section5_11_1{
	width:76vw;
	position:absolute;
	top:10vw;
	left:15vw;
	z-index: 10;
}
#section5_11_2{
	width:10vw;
	position:absolute;
	top:17vw;
	left:43vw;
}

#section6_1 video{
	position:absolute;
	top:34vw;
	left:4.55vw;
	width: 91%;
}
#section6_1_1{
	width:32vw;
	position:absolute;
	bottom:-8vw;
	right:0px;
}
#section6_2>img{
	position: relative;
	z-index: 3;
}
#section6_2_1{
	width:88vw;
	height:105vw;
	position:absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
}
#section6_3_1{
	width:49vw;
	position:absolute;
	top:3vw;
	left:8vw;
}
#section6_3_2{
	width:49vw;
	position:absolute;
	top:43vw;
	left:44vw;
}
#section6_3_3{
	width:54vw;
	position:absolute;
	top:147vw;
	left:7vw;
}
#section6_4_1{
	width:90vw;
	position:absolute;
	top:40vw;
	left:0px;
}
#section6_4_2{
	width:90vw;
	position:absolute;
	top:86vw;
	right:0px;
}
#section6_4_3{
	width:90vw;
	position:absolute;
	bottom:6vw;
	left:0px;
}

#section7_1{
	overflow-x: clip;
	overflow-y: visible;
}
#section7_1_1{
	width:27vw;
	position:absolute;
	top:19vw;
	left:3vw;
	z-index: 10;
}
#section7_1_2{
	width:55vw;
	position:absolute;
	bottom:8vw;
	left:22vw;
}
#section7_2_1{
	width:54vw;
	position:absolute;
	top:32vw;
	left:3vw;
	z-index: 10;
}
#section7_2_2{
	width:55vw;
	position:absolute;
	top:28vw;
	right:1vw;
}
#section7_3_0{
	width:80vw;
	height:20vw;
	position:absolute;
	top:6vw;
	left:10vw;
	background-color:#222;
}
#section7_3_1{
	width:77vw;
	position:absolute;
	top:6vw;
	left:12vw;
}
#section7_4{
	overflow-x: clip;
	overflow-y: visible;
}
#section7_4_1{
	width:28vw;
	position:absolute;
	top:-6vw;
	left:-4vw;
}
#section7_4_2{
	width:13vw;
	position:absolute;
	top:44vw;
	left:5vw;
}
#section7_4_3{
	width:21vw;
	position:absolute;
	top:49vw;
	right:-11vw;
}
#section7_4_4{
	width:40vw;
	position:absolute;
	bottom:17vw;
	right:-8vw;
}

#cont8 section{
	position:relative;
}
#cont8 section .arrow{
	width:6vw;
	position:absolute;
	top:7vw;
	right:5.5vw;
}

#section8_3_2,
#section8_4_2,
#section8_5_2,
#section8_6_2,
#section8_7_2,
#section8_8_2{
	height:0;
	overflow-y: hidden;
}
#section8_16{
	margin-top: -6px;	
}

#section1_7{
	overflow-x: clip;
	overflow-y: visible;
	height: 78vw;
}
#section5_6{
	height:76vw;
}
#section5_8{
	height:52vw;
}
#section5_12{
	height:57vw;
}
#section6_1{
	height:153vw;
}


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


#course-description {
	text-align: left;
	height:auto;
	max-width:100%;
	padding: 0 4%;
	font-size:0.85em;
	line-height: 160%;
	border: 10px solid #F5F5F6;

}
#course-description dl{
	margin: 4% 0 2% 0;
}
#course-description dt,#course-description dd{
		color:#636363;
}
#course-description dt{
	font-weight:bold;
	margin-bottom:4%;
	font-size:1em;
}
#course-description dt:first-child{
	font-weight:bold;
	margin-bottom:5%;
	font-size:1.1em;
}
#course-description dd{
	line-height:150%;
	margin-bottom:3%;
}

/* ======================================================
	クーポン（LP内）
====================================================== */
#coupon_lp{ 
	/*padding: 30px 0;*/
	padding: 20px 0 0 0;
	width: 90%;
	margin: auto;	
}

#coupon_lp img{
	width:100%;
    margin: 4% auto 4% auto;
}
#coupon{
	text-align: center;
    color: #E2317A;
    font-weight: bold;
    font-size: 1.35em;
    margin: 4% auto 4% 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);}
}

#sliderWrap{
	height: 49vw;
}

#sliderWrap {
	display: flex;
	height: 49vw;
	overflow: hidden;
}
.slider{
	display:flex;
}


.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;
}
.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;
}
@keyframes rightSlideAnim{
	0%{opacity:0;transform: translateX(100px);}
	100%{opacity:1;transform: translateX(0px);}
}

.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);}
}


.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(-50px);}
	100%{opacity:1;transform: translateY(0px);}
}



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


.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;
	height:48vw;
}
#section1_2_1 {
    width: 0;
    height: 48vw;
    overflow: hidden;
}
.actVanishIn{
	animation-name: actVanishInAnim;
	animation-duration: 0.4s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
@keyframes actVanishInAnim {
	100% {
		width:100%;
	}
}

.actTataki{
	animation-name: actTatakiAnim;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
 
@keyframes actTatakiAnim {
	0% {
		transform: translateX(200px);
		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: 60vw;
}
#section4_6_2 figure {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 90vw;
}
#section9_3_1 figure {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 20vw;
}
#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;
}

@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;
	}
}


#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: -8vw;
	}
}
@keyframes actLittleRightAnim2 {
	0% {
		right: 0px;
	}
	100% {
		right: -10vw;
	}
}

#section2_8_2{
	transform: translateY(80px);
}
.actLittleBottom{
	animation-name: actLittleBottomAnim;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
 
@keyframes actLittleBottomAnim {
	0% {
		transform: translateY(80px);
	}
	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(50px,-50px);}
	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: 0px;
}
.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: 21vw;}
	50%{transform: scale(1);top: 21vw;}
	100%{transform: scale(1);top: 21vw;}
}
.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.1s;
}
@keyframes slideInAnim3 {
	100% {
		transform: translateY(0px);
	}
}

#section7_2_1{
	transform: translateX(90px);
}
#section7_2_2{
	transform: translateX(-80px);
}
.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);
	}
}

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

@keyframes btn_animation {
    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);
    }
}

@keyframes poyon {
  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%); }
}

.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);}
	50%{opacity:1;transform: translate(-30px,-80px);}
	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: 70vw;
	height: 70vw;
	background: #4772C5;
	border-radius: 50%;
	text-align: center;
	overflow: hidden;
	z-index: 2;
}
.circle::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: -35vw;
	width: 70vw;
	height: 70vw;
	background: #fff;
	transform-origin: right 35vw;
	z-index: 3;
	animation: rotate-circle-left 1s ease-out forwards;
}
.circle::after {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 35vw;
	width: 70vw;
	height: 70vw;
	background: #fff;
	transform-origin: left 35vw;
	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: -17vw;
	left: -5vw;
	width: 70vw;
	height: 70vw;
	background: #fff;
	border-radius: 50%;
	z-index: 1;
}
.circle-font {
	position: absolute;
	top: 17vw;
	left: 10vw;
	width:55vw;
	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(160deg); }
}

.actCircleLT,
.actCircleRT,
.actCircleLB,
.actCircleRB{
	animation-name: actCircleAnim;
	animation-duration: 0.3s;
	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;
}

.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;
}

#cont0{
}
#section0_1{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	background-color:#fff;
	width:100vw;
	height:100vh;
}
#section0_1 video{
	position: absolute;
	height: 100vh;
	top: 50%;
	left: 51%;
	transform: translateX(-50%) translateY(-50%);
	min-width: 100%;
	min-height: 100%;
}
#section0_1_2{
	z-index: 10001;
	scale: 0.1;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 70vw;
	height: 45vw;
	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;}

@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;
}


#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;}