@charset "utf-8";


/* insect
-------------------------------------------------*/

#insect{
	padding-top:6vw;
}

#ins_ttl{
	position:relative;
	width:100%;
	max-width:970px;
	text-align:center;
	margin:0 auto 3rem;
}
	#ins_ttl h1{
		position:relative;
		width:min(90%,331px);
		margin:0 auto 2vh;
		z-index:1;
	}
	#ins_ttl p{
		position:relative;
		width:90%;
		max-width:700px;
		color:#2487af;
		font-size:1rem;
		font-weight:bold;
		line-height:1.7;
		text-shadow:	0 0 4px rgb(255,255,255), 0 0 6px rgb(255,255,255), 0 0 8px rgb(255,255,255),
						0 0 4px rgb(255,255,255), 0 0 6px rgb(255,255,255), 0 0 8px rgb(255,255,255);
		margin:0 auto;
		z-index:1;
	}
	#illst_1,#illst_2,#illst_3,#illst_4,#illst_5,#illst_6{
		position:absolute;
	}
	#illst_1{width:26%; max-width:241px; top:0}
	#illst_2{width:24%; max-width:227px; left:0; bottom:0}
	#illst_3{width: 9%; max-width: 87px; left:22%; bottom:25%}
	#illst_4{width:27%; max-width:261px; right:0; top:0}
	#illst_5{width:16%;max-width:153px; right:0; top:44%}
	#illst_6{width:19%;max-width:182px; right:12%; bottom:0}
	#illst_7{width:42%; max-width:407px; margin:1rem auto 0}

@media(max-width: 559px){
	#ins_ttl h1{
		margin:0 auto 2vh;
	}
	#ins_ttl p{
		font-size:.9rem;
	}
	#ins_ttl p br{
		display:none;
	}
	#illst_1,#illst_3,#illst_4,#illst_5,#illst_6{
		display:none;
	}
	#illst_2{width:40%; left:1%; bottom:-3%}
	#illst_7{width:52%; margin:1rem 0 0 47%}
}



.insect_list{
	display:flex;
	flex-wrap:wrap;
}
	.insect_list > article{
		position:relative;
		width:21%;
		margin:0 2% 2rem;
	}
	.insect_list > article img{
		clip-path:url(#mask);
	}
	.insect_list > article:nth-of-type(2n) img{
		clip-path:url(#mask2);
	}
	.insect_list > article:nth-of-type(3n) img{
		clip-path:url(#mask3);
	}
	.insect_list > article h2{
		text-align:center;
		font-size:1rem;
		line-height:1.2;
		margin:.5rem 0 .8rem;
	}
	.insect_list > article h2 span{
		display:block;
		text-align:center;
		font-size:.8rem;
		font-weight:normal;
		margin-top:3px;
	}
	.insect_list > article p.desc{
		position:relative;
		text-align: justify;
		font-size:.8rem;
		line-height:1.5;
	}
	.insect_list > article p.desc:after{
		content: "";
		display: table;
		clear: both;
	}
	.insect_list > article p.desc a{
		text-decoration:underline !important;
	}

	/* IE edgeのみ */
	_:-ms-lang(x), .insect_list > article span{
		display:block;
		overflow:hidden;
		border-radius:50%;
	}
	/* safari */
	_:lang(x)+_:-webkit-full-screen-document, .insect_list > article span{
		display:block;
		overflow:hidden;
		border-radius:50%;
	}

@media screen and (max-width: 768px){
	.insect_list > article{
		width:29%;
	}
}
@media screen and (max-width: 500px){
	.insect_list{
		justify-content:space-between;
	}
	.insect_list > article{
		width:45%;
	}
}

	#ins_matome{
		position:relative;
		width:70%;
		padding-top:6vh;
	}
	#ins_matome p{
		margin:auto;
		color:#2487af;
		font-size:1rem;
		font-weight:bold;
		line-height:1.8;
	}
	#ins_matome .illst_8{
		float:right;
		width:min(50%,206px);
		margin:0 0 20px 1.5rem;
	}
@media screen and (max-width: 559px){
	#ins_matome{
		width:90%;
	}
	#ins_matome .illst_8{
		display:block;
		float:inherit;
		width:min(80%,206px);
		margin:0 auto 2rem;
	}
}