@charset "UTF-8";

/************************************************** common */

.ads{
	margin-top: 30px;
}

.dispn{
	display: none;
}
img,amp-img{
	max-width: 100%;
	box-shadow: 0px 0px 5px #999;  
	-moz-box-shadow: 0px 0px 5px #999;  
	-webkit-box-shadow: 0px 0px 5px #999;
}

a{
	color: #333;
}
a:hover{
	color: #dd0000;
}
a:hover img{
	opacity: 0.8;
	box-shadow: 0px 0px 5px #555;  
	-moz-box-shadow: 0px 0px 5px #555;  
	-webkit-box-shadow: 0px 0px 5px #555;
}

.google{
	color: #164BC0;
}
.yahoo{
	color: #b20000;
}

.red{
	color: #dd0000;
}


/************************************************** base */

html,body{
	height: 100%;
	width: 100%;
}
body{
	color: #333;
	line-height: 2rem;
	font-size: 1.4rem;
}

#wrap{
	margin: 0 auto;
	padding: 0 5px;
	width: 100%;
	max-width: 1200px;
}
#header{
	padding: 10px 10px 0 10px;
	border-bottom: 2px #669900 solid;
}
#footer{
	margin-top: 100px;
	padding: 30px 10px;
	border-top: 2px #669900 solid;
	text-align: center;
}


#fmenu{
	position: fixed;
	bottom: 5px;
	right: 5px;
	line-height: 1em;
}
#fmenu div{
	padding: 0 3px;
	display: inline-block;
}
#fmenu a{
	padding: 8px 10px;
	
	background: rgba(102,153,0,0.9);
	color: #fff;
	display: block;
	text-decoration: none;
	
	border: 1px #fff solid;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	box-shadow: 0px 0px 5px #999;  
	-moz-box-shadow: 0px 0px 5px #999;  
	-webkit-box-shadow: 0px 0px 5px #999;
}

@media screen and (min-width:769px){
	#fmenu{
		display: none;
	}
}


/************************************************** header */

h1 a{
	width: 200px;
	height: 50px;
	background: url(/img/shuhenkankyo.png) no-repeat;
	background-size: contain;
	display: block;
	vertical-align: middle;
}
h1 a span{
	display: none;
}
#header p{
	padding: 0 0 0 10px;
	font-size: 1.5rem;
	display: inline-block;
	vertical-align: middle;
}

.tomenu{
	padding-top: 5px;
	font-size: 1.8rem;
	text-align: right;
}

/************************************************** contents */

/* 概要 */
.summary{
	margin: 0 auto;
	padding: 30px 0 0 0;
	max-width: 650px;
}
.summary p{
	padding: 10px 0 0 0;
}

h2{
	margin-top: 60px;
	padding: 10px 20px 5px 20px;
	border-bottom: 2px #669900 solid;
	font-size: 1.8rem;
	font-weight: normal;
}

h3{
	margin-top: 30px;
	font-size: 1.5rem;
	font-weight: normal;
}
.box3 h3{
	margin-top: 15px;
	text-align: left;
}
li h3{
	font-weight: bold;
}


.box{
	margin-top: 30px;
	padding: 0 20px;
}

.box1,.box2,.box3{
	margin-top: 0;
}
.box1 p,.box2 p,.box3 p{
	margin-top: 5px;
}
.box2 .box{
	margin-top: 30px;
	padding: 0 20px;
	width: 50%;
	vertical-align: top;
	display: inline-block;
}
.box3{
/* text-align: center;*/
}
.box3 .box{
	margin-top: 30px;
	padding: 0 20px;
	width: 33.33333%;
	text-align: left;
	vertical-align: top;
	display: inline-block;
}

.box3 ul li{
	margin-top: 10px;
}

/* 画像 */
.img{
	margin-top: 10px;
	width: 100%;
	max-width: 1000px;
	text-align: center;
}
.img img{
	margin: 0 auto;
	max-width: 100%;
	max-height: 100%;
	text-align: center;
}
.box3 img{
	max-height: 250px;
}
.box3 .img a{
	display: block;
}

.box3 .img + p{
	padding-top: 15px;
}

/* 画像 スマホスクリーンショット表示用 */
.box3.sp-ss .img{
	padding: 10px 10px 5px 10px;
	background: #f1f1f1;
}
.box3.sp-ss img{
	max-height: 225px;
	background-size: contain;
}


.mainimg h2{
	margin-top: 10px;
	text-align: center;
}
.mainimg p{
	text-align: left;
}


/* ul, ol */
ul{
	margin-top: 15px;
	padding-left: 25px;
}
	ul li{
		margin-top: 10px;
		list-style: disc;
	}
	ul ul{
		margin-top: 10px;
	}
	ul li li{
		list-style: circle;
	}
ol{
	margin-top: 15px;
	padding-left: 25px;
}
	ol li{
		margin-top: 20px;
		list-style: decimal;
	}

/*
.ranking li,
.ranking li h3{
	margin-top: 5px;
	font-size: 1.4rem;
	font-weight: bold;
}
.ranking li{
	margin-top: 15px;
}
	.ranking ul{
		margin-top: 5px;
	}
	.ranking ul li{
		margin-top: 5px;
		list-style: disc;
		font-size: 1.3rem;
		font-weight: normal;
	}
*/


.ranking ol{
	padding-left: 0;
}
.ranking ol li{
	margin-top: 10px;
	list-style: none;
}
.ranking ol ul{
	padding-left: 30px;
}
.ranking ol ul li{
	margin-top: 0;
	list-style: disc;
}
.ranking ol li span{
	padding-right: 15px;
	width: 50px;
	display: inline-block;
	text-align: right;
}
.ranking ol li h3{
	font-size: 1.5rem;
	font-weight: bold;
}
.ranking ol li h3 span{
	width: auto;
	text-align: left;
}


/* リンク */
ul.links li{
	width: 33.333%;
	display: inline-block;
}


/************************************************** responsive */

/* iPad L未満 */
@media screen and (max-width:1023px){
	.box3 .box,
	ul.links li{
		width: 50%;
	}
}
/* iPad P未満 */
@media screen and (max-width:767px){
	#header{
		padding: 10px 0 0 0;
	}
	h1 a{
		margin: 0 auto;
		text-align: center;
	}
	h2{
		margin-top: 70px;
		padding: 10px 0 5px 0;
	}
	.box3 .box,
	ul.links li{
		width: 100%;
	}
	.box{
		padding: 0;
	}
	/* PC用改行無効化 */
	.sp{
		display: none;
	}
}






/************************************************** AdSense */

.gad,.gad *{
	margin: 0;
	padding: 0;
	vertical-align: top;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}
.gad{
	margin: 20px auto 0 auto;
	padding: 0;
	width: 100%;
	max-width: 1000px;
}
.gad2 div,
.gad3 div{
	padding: 10px;
	width: 50%;
	text-align: center;
	display: inline-block;
}
.gad3 div{
	width: 33.33%;
}
@media screen and (max-width:768px){
	.gad3 div{
		width: 50%;
	}
	.gad3 div:nth-of-type(3){
		display: none;
	}
}
@media screen and (max-width:767px){
	/* SPで画面内に複数の広告表示は禁止なので必ず 2,3 を非表示にする */
	.gad2 div,
	.gad3 div{
		width: 100%;
		display: block;
	}
}








/* AdSense */
.gad,.gad *{
	margin: 0;
	padding: 0;
	vertical-align: top;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}
.gad{
	margin: 20px auto 0 auto;
	padding: 0;
	width: 100%;
	max-width: 1100px;
}
.gad2 div,
.gad3 div{
	padding: 10px;
	width: 50%;
	text-align: center;
	display: inline-block;
}
.gad3 div{
	width: 33.33%;
}
@media screen and (max-width:960px){
	.gad2 div,
	.gad3 div{
		width: 50%;
	}
	.gad3 div:nth-of-type(3){
		display: none;
	}
}
@media screen and (max-width:640px){
	.gad2 div,
	.gad3 div{
		padding: 10px 0;
		width: 100%;
		display: block;
	}
}