@charset "utf-8";


/* bird watching
-------------------------------------------------*/

#bird-watching{
	padding-top:6vw;
}

#bw_ttl{
	position:relative;
	width:100%;
	max-width:970px;
	text-align:center;
	margin:0 auto 42vh;
}
@media screen and (max-width: 500px){
	#bw_ttl{
		margin:0 auto 33vh;
	}
}
	#bw_ttl h1{
		position:relative;
		width:90%;
		max-width:539px;
		min-width:280px;
		margin:0 auto 4vh;
		z-index:1;
	}
	#bw_ttl p{
		position:relative;
		width:90%;
		max-width:700px;
		color:#916b40;
		font-size:1rem;
		font-weight:bold;
		line-height:2;
		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;
	}
@media screen and (max-width: 450px){
	#bw_ttl p{
		text-align:left;
		font-size:.9rem;
	}
	#bw_ttl p br{
		display:none;
	}
}
	#bird1,#bird2,#bird3,#bird4,#bird5,#bird6,#bird7,#bird8{
		position:absolute;
		display:block;
		content:'';
		width:25%;
		background-repeat:no-repeat;
		background-size:contain;
		background-position:0 0;
	}
	#bird1,#bird3,#bird5,#bird7{
		left:0;
		top:0;
	}
	#bird2,#bird4,#bird6,#bird8{
		right:0;
		top:0;
	}
	#bird1{max-width:139px; top:0}
	#bird3{max-width:129px; top:50%}
	#bird5{max-width:107px; top:100%}
	#bird7{width:26%; max-width:166px; left:24%; top:108%}
	
	#bird2{max-width:116px; top:0}
	#bird4{max-width:123px; top:50%}
	#bird6{max-width:119px; top:100%}
	#bird8{width:42%; max-width:255px; right:14%; top:119%}

@media screen and (max-width: 850px){
	#bird1,#bird2,#bird3,#bird4,#bird5,#bird6{
		width:15%;
	}
	#bird1{top:50%}
	#bird3{top:88%}
	#bird5{top:125%}
	#bird7{width:20%; left:24%; top:110%}
	
	#bird2{top:50%}
	#bird4{top:88%}
	#bird6{top:125%}
	#bird8{width:30%; right:14%; top:117%}
}
@media screen and (max-width: 500px){
	#bird2,#bird3,#bird4,#bird5{
		display:none;
	}
	#bird1{width:20%; top:133%}
	#bird6{width:20%; top:105%}
	#bird7{width:27%; left:23%; top:110%}
	#bird8{width:40%; right:4%; top:115%}
}



.bird_list{
	display:flex;
	flex-wrap:wrap;
	margin-bottom:6vh;
}
	.bird_list > article{
		position:relative;
		width:21%;
		margin:0 2% 2rem;
	}
	.bird_list > article img{
		clip-path:url(#mask);
	}
	.bird_list > article:nth-of-type(2n) img{
		clip-path:url(#mask2);
	}
	.bird_list > article:nth-of-type(3n) img{
		clip-path:url(#mask3);
	}
	.bird_list > article h2{
		text-align:center;
		font-size:1rem;
		line-height:1.2;
		margin:.5rem 0 .5rem;
	}
	.bird_list > article p{
		position:relative;
		font-size:.8rem;
		line-height:1.7;
	}
	.bird_list > article p:after{
		content: "";
		display: table;
		clear: both;
	}

	/* IE edgeのみ */
	_:-ms-lang(x), .bird_list > article span{
		display:block;
		overflow:hidden;
		border-radius:50%;
	}
	/* safari */
	_:lang(x)+_:-webkit-full-screen-document, .bird_list > article span{
		display:block;
		overflow:hidden;
		border-radius:50%;
	}
	
	#wing_akagera{
		float:right;
		width:20%;
		height:auto;
		margin:0 0 5px 5px;
	}

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

	#bw_matome{
		position:relative;
		padding-top:6vh;
	}
	#bw_matome p{
		width:70%;
		margin:auto;
		color:#916b40;
		font-size:1rem;
		font-weight:bold;
		line-height:2;
	}
	#bw_matome img{
		position:absolute;
	}
	#bw_matome img.s1{
		left:0;
		top:5vh;
		width:10%;
		max-width:86px;
		min-width:70px;
	}
	#bw_matome img.s2{
		right:-3%;
		top:5vh;
		width:16%;
		max-width:131px;
		min-width:105px;
	}
	#bw_matome img.s3{
		right:25%;
		top:0;
		width:8%;
		max-width:57px;
		min-width:45px;
	}
@media screen and (max-width: 600px){
	#bw_matome p{
		width:100%;
	}
	#bw_matome img.s1{
		position:relative;
		float:left;
		top:inherit;
		margin:0 5px 5px 0;
	}
	#bw_matome img.s2{
		position:relative;
		float:right;
		top:inherit;
		margin:0 0 5px 5px;
	}
}