/********ヘッダー********/
header#header{
	position:fixed; left:0; right 0; top:0;
	width:100%;
	height: 50px;
	/*padding-top:12.0vw;
	box-shadow:0 0 8px 0 rgba(0,0,0,0.24);*/
	color:#ffffff;
	z-index:9999;
}

header#header #header_inner{
	position:absolute; left:0; right: 0; top:-4px;
	width:100%;
	height:100%;
}

header#header #header_inner #logo{
	position:absolute; right:0; top:0;
	display:block;
	width:100%;
	height:100%;
	background:url(/images/logo.png?0000) center center / auto 50% no-repeat;
	text-indent:-9999px;
}
header#header #header_inner #logo a{display:block; width:100%; height:100%;}




/********LINE友達登録画面********/
.line_btn{
	display: block;
	width: 80%;
	margin: 0 auto;
	border-radius: 100px;
	height: 48px;
	line-height: 44px;
	font-size: 16px;
	text-align: center;
	color: #ffffff;
	font-weight: 600;
	background: #0ec54a;
}

.line_btn::before{
	content:"\e5c8";
	display:inline-block;
	vertical-align:middle;
	margin:0 1px 2px 0;
	font-family:"Material Symbols Outlined";
	font-size: 16px;
	/*font-weight:normal;*/
	line-height:0;
}


.regist_cont{
	padding: 0 0 8%;
}

.regist_cont .line_btn{ margin: 20px auto 40px;}


.safety_text{
	line-height: 1.4;
	padding: 16px;
	background: #ffffcc;
	color: #404040;
	margin: 8% auto 8%;
	font-size: 12px;
}

.check_cont{
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.check_cont .checkbox{
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 2px 5px 0 0;
}

.check_cont label{
	font-size: 14px;
}


.addition{
	border: 2px solid rgba(0,0,0,0.7);
	padding: 16px;
	border-radius: 8px;
	font-size: 12px;
	color: rgba(0,0,0,0.7);
	background: #eefbff;
}





/********************** アニメーション設定 ************************/
.sa {
	opacity: 0;
	transition: all .5s ease;
}

.sa.show {
	opacity: 1;
	transform: none;
}

.sa--up {
	transform: translate(0, 100px);
}

.anime01{
	position: relative;
	opacity: 0;
	bottom: -2em;
}

.anime01-active{
	opacity: 1 !important;
	bottom: 0 !important;
	transition: 1s;
}

.anime02{
	position: relative;
	opacity: 0;
	left: -2em !important;
}

.anime02-active{
	opacity: 1 !important;
	left: 0 !important;
	transition: 1s;
}

.anime03{
	position: relative;
	opacity: 0;
	right: -2em;
}

.anime03-active{
	opacity: 1 !important;
	right: 0 !important;
	-webkit-transition: 1s;
	-moz-transition: 1s ;
	transition: 1s;
}

.anime04{
	position: relative;
	overflow: hidden;
}

.anime04-active:before{
	animation: barAnime forwards 1.5s 1 ease 0.1s normal;
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #001448;
}

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


.anime05,
.anime06,
.anime07,
.anime08,
.anime09{
	opacity: 0;
}

.anime05-active,
.anime06-active,
.anime07-active,
.anime08-active,
.anime09-active{
	animation: img-opacity 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	overflow: hidden;
	position: relative;
}

.anime05-active:before,
.anime06-active:before,
.anime07-active:before,
.anime08-active:before,
.anime09-active:before{
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
	left:0;
	top:0;
}

.anime05-active:before{
	background: #ffffff;
}

.anime06-active:before,
.anime07-active:before{
	background: #ffde00;
}

.anime08-active:before,
.anime09-active:before{
	background: #fdc600;
}


.anime05-active:before{
	animation: anime05-active 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anime06-active:before{
	animation: anime06-active 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anime07-active:before{
	animation: anime07-active 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anime08-active:before{
	animation: anime08-active 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anime09-active:before{
	animation: anime09-active 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


.anime10{
	position: relative;
	opacity: 0;
}

.anime10-active{
	opacity: 1;
	transition: 1s;
	animation: grow 1s forwards;
	transform-origin: center;

}

@keyframes grow {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}



@keyframes img-opacity {
	100% {
		opacity: 1;
	}
}

@keyframes anime06-active{
	100% {
		transform: translateX(100%);
	}
}

@keyframes anime08-active{
	100% {
		transform: translateX(100%);
	}
}

@keyframes anime05-active{

	100% {
		transform: translateX(-100%);
	}
}

@keyframes anime07-active{

	100% {
		transform: translateX(-100%);
	}
}

@keyframes anime09-active{

	100% {
		transform: translateX(-100%);
	}
}

.bounce_in{
	position: relative;
	opacity: 0;
}
.bounce_in-active{
	opacity: 1;
	transition: 0.5s;
	animation: bounce_in 2s ease;
}

	@keyframes bounce_in{
		0%{transform: scale(.3);}
		25%{transform: scale(1.05);}
		50%{transform: scale(.9);}
		60%{transform: scale(1.05);}
		70%{transform: scale(.9);}
		80%{transform: scale(1.05);}
		100%{transform: scale(1);}
	}



.fuwafuwa {
    animation: fuwafuwa 3s linear infinite;
} 
/* fuwafuwa */
@keyframes fuwafuwa {
  0% { transform: translateY(-4px) }
  33.33333% { transform: translateY(-8px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(-4px) }
}

.delay-time01{ animation-delay: 0.2s;}
.delay-time02{ animation-delay: 0.4s;}
.delay-time03{ animation-delay: 0.6s;}
.delay-time04{ animation-delay: 0.8s;}
.delay-time05{ animation-delay: 1.0s;}
.delay-time06{ animation-delay: 1.2s;}
.delay-time07{ animation-delay: 1.4s;}