@charset "utf-8";

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

.main{
	max-width: 870px;
	margin:0 auto;
	padding:80px 20px;
	position: relative;
	display: flex;
	align-items:flex-start;
	justify-content: center;
}

.main .mainstyle{
	margin-top:10px;
}

.main .copy_wrap{
	margin-left:20px;
}

.main .maincopy{
	font-size:50px;
	color:#e15e15;
	line-height: 1.2;
}

.main .read_s{
	margin-top:30px;
	margin-left:20px;
}

@media screen and (max-width: 960px){
	
	.main .maincopy{
		font-size:44px;
	}
	
}

@media screen and (max-width: 768px){

	.main{
		padding:60px 20px 40px;
	}
	
	.main::after{
		content: none;
	}
	
	

}

@media screen and (max-width: 480px){
	
	.main{
		flex-wrap:wrap;
		text-align: center;
		padding:60px 20px 40px;
	}
	
	.main .mainstyle{
		width:100%;
	}
	
	.main .copy_wrap{
		margin-left:0;
	}
	
	.main .maincopy{
		margin-top:10px;
		font-size:6.5vw;
		margin-left:0;
	}
	
	.main .read_s{
		margin-top:20px;
		margin-left:0;
	}

	
	
}



















.image_box{
	max-width:704px;
	margin:0 auto 100px;
	position: relative;
}


.image_box .prot{
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
}

.image_box .prot li{
	position: absolute;
	animation:fuwafuwa 1.5s infinite ease-in-out;
	
}


.image_box .prot li a{
	display: block;
	transition:0.3s all ease-in-out 0s;
}

body:not(.mobile) .image_box .prot li a:hover{
	transform:scale(1.05);
}

	
@keyframes fuwafuwa {
    0% {transform:translateY(0px);}
	50% {transform:translateY(5px);}
    100% {transform:translateY(0);}
}

.image_box .prot li.p01{
	left: 10%;
    top: 9.8%;
	width:30.69%;
}

.image_box .prot li.p02{
	left: 5.5%;
    bottom: 34%;
	width:40.06%;
}

.image_box .prot li.p03{
	left: 0;
    bottom: 18%;
	width:43.75%;
}

.image_box .prot li.p04{
	right:0;
	top:30%;
	width:42.48%;
}

.image_box .prot li.p05{
	right:0;
	bottom:14%;
	width:44.89%;
}

.image_box .prot li.p06{
	right:7.5%;
	bottom:1%;
	width:43.04%;
}

.image_box .prot li.p07{
	right:0;
	bottom:28%;
	width:49.58%;
}

.check_txt{
	max-width:640px;
	margin:0 auto 100px;
}

.check_txt a{
	display: block;
	position: relative;
	font-size:20px;
	color:#FFF;
	text-align: center;
	z-index:1;
	padding:5px 10px;
}

.check_txt a:before{
	content:"";
	position: absolute;
	left:0;
	right:0;
	bottom:0;
	top:0;
	background:#f7b635;
	z-index:-2;
}

.check_txt a:after{
	content:"";
	position: absolute;
	left:0;
	right:0;
	bottom:0;
	top:0;
	background:#ef8707;
	z-index:-1;
	opacity:0;
	transition:0.3s opacity ease-in-out 0s;
}

body:not(.mobile) .check_txt a:hover:after{
	opacity: 1;	
}






@media screen and (max-width: 768px){

	.image_box {
		margin: 0 auto 60px;
	}
	
	.check_txt {
		margin: 0 auto 60px;
	}
	
	.check_txt a{
		font-size:17px;
	}
	
}

@media screen and (max-width: 480px){
	
	.image_box .prot li.p01{
		left: 6%;
    	top: 7.8%;
		width:34.41%;
	}

	.image_box .prot li.p02{
		left: 3%;
		bottom: 33%;
		width:40.67%;
	}

	.image_box .prot li.p03{
		left: -1.5%;
		bottom: 18%;
		width:46.194%;
	}

	.image_box .prot li.p04{
	    right: -4%;
	    top: 30%;
	    width: 47.89%;
	}

	.image_box .prot li.p05{
		right: -5%;
    	bottom: 14%;
    	width: 49.58%;
	}

	.image_box .prot li.p06{
		right: 1%;
    	bottom: 0;
    	width: 49.89%;
	}

	.image_box .prot li.p07{
	    right: 2.5%;
	    bottom: 29%;
	    width: 48.04%;
	}

	.check_txt a{
		font-size:15px;
	}
	
	
}