/* CSS Document */

.bar hr{
	margin: 0;
}

.bar .hr1{
	border-bottom: 1px solid #1C9B45;
}

.bar .hr2{
		border-bottom: 5px solid #1C9B45;
	width: 190px;
	margin-top: -3px;
}


#keyimg{
	background: url("../img/s_keyimg.webp") center center no-repeat;
	height: 400px;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	/*padding-right: 20%;*/
	animation: bg 20s linear infinite;
	 transition : all 5s;
}

@keyframes bg{
	0% {background-position: center center;}
	 50% {background-position: center -10px;}
}

#keyimg p{
	text-align: left;
	color: #fff;
	width: 100%;
	max-width: 480px;
	font-size: 40px;
	line-height: 50px;
	text-shadow: 1px 1px 2px #000;
	/*テキストを1文字ずつだす*/
	animation: typing 1.5s steps(10),
    blink .5s steps(1) infinite alternate;
	overflow: hidden;
	height: 150px;
}

@keyframes typing{
  0% {width: 0;}
}

#s01{
	background: url("../img/bg01.webp") top center no-repeat;
	background-size: cover;
	padding-top: 200px;
	padding-bottom: 80px;
	margin-bottom: 50px;
}




/*グリッジアニメ*/


.glitch-effect{
	color            : #B4B4B4;
	text-shadow      : 0px 0px 6px black, 5px 5px 3px #00A75B, -3px -3px 3px #96007A;
	animation        : glitch-text 3.5s linear infinite;
}
@keyframes glitch-text{
	0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100%{
		text-shadow  : 0px 0px 6px black, 0px 0px 3px #00A75B, 0px 0px 3px #96007A;
		transform    : skewX(0deg);
	}
	41%{
		text-shadow  : 0px 0px 6px black, 5px 5px 3px #00A75B, -3px -3px 3px #96007A;
		transform    : skewX(10deg);
	}
	42%{
		text-shadow  : 0px 0px 6px black, 5px 5px 3px #96007A, -3px -3px 3px #00A75B;
		transform    : skewX(-10deg);
	}
	59%{
		text-shadow  : 0px 0px 6px black, 5px 5px 3px #00A75B, -3px -3px 3px #96007A;
		transform    : skewX(10deg) ;
	}
	60%{
		text-shadow  : 0px 0px 6px black, 5px 5px 3px #00A75B, -3px -3px 3px #96007A;
		transform    : skewX(-10deg) ;
	}
	63%{
		text-shadow  : 0px 0px 6px black, 3px 3px 3px #96007A, -2px -2px 3px #00A75B;
		transform    : skewX(10deg) ;
	}
	70%{
		text-shadow  : 0px 0px 6px black, 7px 7px 3px #00A75B, -7px -7px 3px #96007A;
		transform    : skewX(-20deg) ;
	}
	71%{
		text-shadow  : 0px 0px 6px black, 1px 1px 3px #96007A, -2px -2px 3px #00A75B;
		transform    : skewX(10deg) ;
	}
}
/***********/



#s01 .bg{
	width: 100%;
	max-width: 480px;
	padding-top: 35px;
	padding-bottom: 35px;
	margin: auto;
	background-color: rgba(255,255,255,0.9);
}

#s01 h2{
	width: 90%;
	margin: auto;
	font-size: 26px;
	margin-bottom: 10px;
}

#s01 h2 small{
	display: block;
	font-size: 18px;
	font-weight: bold;
	color: #1A9945;
	line-height: 200%;
}

#s01 .bar{
	width: 90%;
	margin: auto;
	margin-bottom: 25px;
	
}

#s01 .rap{
	width: 90%;
	margin: auto;
}

#s01 .rap .text{
	width: 100%;
	font-size: 18px;
	line-height: 180%;
	margin-bottom: 30px;
}

#s01 .rap .img{
	width: 100%;
}

#s01 .rap .img img{
	width: 100%;
	height: auto;
}

#s02{
	width: 100%;
	margin: auto;
}

#s02 h2{
	width: 90%;
	margin: auto;
	font-size: 26px;
	margin-bottom: 10px;
}

#s02 h2 small{
	display: block;
	font-size: 18px;
	font-weight: bold;
	color: #1A9945;
	line-height: 200%;
}

#s02 .bar{
	width: 90%;
	margin: auto;
	margin-bottom: 80px;
}

#s02 .rap{
	display: block;
	width: 90%;
	margin: auto;
}

#s02 .box03,
#s02 .box02,
#s02 .box01{
	border: 1px solid #ccc;
	position: relative;
	padding-bottom: 50px;
	margin-bottom: 130px;
}


#s02 .rap .icon{
	position: absolute;
	left: 50%;
	top: -51px;
	margin-left: -51px;
}

#s02 .rap .icon img{
	width: 80px;
	height: auto;
}

#s02 .rap h3{
	background: #ECFACF;
	height: 80px;
	text-align: center;
	font-size: 22px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 30px;
	line-height: 160%;
	padding-bottom: 15px;
}

#s02 .box03 img,
#s02 .box02 img,
#s02 .box01 img{
	width: 100%;
	height: auto;
}

#s02 .rap ul{
	padding-left: 10px;
	padding-top: 35px;
}

#s02 .rap li{
	font-size: 16px;
	background: url("../img/object03.webp") left center no-repeat;
	background-size: 15px;
	padding-left: 20px;
	margin-bottom: 15px;
}

#s02 .rap a{
	display: block;
	background: url("../img/object02.webp") center center no-repeat;
	background-size: 80px;
	width: 80px;
	height: 80px;
	position: absolute;
	left: 50%;
	bottom: -51px;
	margin-left: -51px;
	 transition : all 0.2s;
}

#s02 .rap a:hover{
	background: url("../img/object01.webp") center center no-repeat;
	bottom: -55px;
}