@charset "utf-8";

	
/* ▼画面領域の横幅が1440px以下の場合に適用【デスクトップ向け】 */
	
@media only screen and (max-width: 1440px){

h1{
	font-size:110%;
}
}

/* ▼画面領域の横幅が1280px以下の場合に適用【デスクトップ向け】 */

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

#wrapper{
	margin:0 auto;width:95%;
}

.main_img{
	margin-top:10px; width:90%;
	text-align:center;background:#ff;
	}
.top_midashi h2{
	font-size:95%;
}

#content{
	width:95%;float:none;margin:0 auto;
	padding:10px 0;	
}
.info_box{
	line-height: 1.8;
}
}
/* ▼画面領域の横幅が959px以下の場合に適用【ラップトップ向け】 */

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

#wrapper{
	width:100%;
}

h1{
	font-size:100%;
}
#header .logo{
	padding-left:10px;margin-bottom: 3px;
	white-space: nowrap;
}
.main_img{
	width:100%;
}
.top_midashi{
	padding-top:8px;
	padding-bottom: 8px;
}
#navi{
	width:100%;margin:auto;
}
ul#topnav{
	clear:both;
	width:100%;
	border-radius:0;
}
ul#topnav li{
	width:33%;
	background:#003f8e;
	color:#ff0000;
	border-right:1px solid #cccccc;
	border-bottom:1px solid #cccccc;
	box-sizing:border-box;
  	-webkit-box-sizing:border-box;
 	-moz-box-sizing:border-box;
}

ul#topnav li:nth-child(3n){border-right:0;width:34%;}
ul#topnav li a{
	width:100%;
	border:0;
	color:#fff;font-size:14px;
}
ul#topnav li:first-child a,ul#topnav li:last-child a{width:100%;}
ul#topnav li.active a,ul#topnav a:hover{background:#2871d7;	color:#f0e68c;}

/* TOPナビのアイコン　--*/
.pink:before{
	color: #e95464; font-size: 1.1em;}

.main_img{
	margin-top:10px; width:95%;
	text-align:center;
}

.info_box{
	clear:both;
	width:auto;
	float:none;margin:0 auto;
	padding:10px 0;
	font-size:15px;line-height: 1.8;
}
.box {
	width: 95%;
	height:160px;
}
.box h4{
	font-size:120%;
	height:25px;
}
.txt{
	width:90%;
	font-size:100%;
	line-height:1.6;
}

/* HYO内のテーブル・配置
--------------------------------------------*/
.hyo_mae{
	width:80%;
}
.hyo_mae h2{
	font-size:110%;
}
.hyo{
	width:80%;
}
#footer {
	font-size: 80%;
	position:relative;
	padding-top:50px;
	
}
}

/* ▼画面領域の横幅が644px以下の場合に適用【スマホ向け】 */

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

ul#topnav li{width:50%;}
ul#topnav li:nth-child(3n){
	border-right:1px solid #cccccc;
	width:50%;}	
ul#topnav li:nth-child(2n),ul#topnav li:nth-child(6n){border-right:0;}

.main_img{
	margin-top:8px; width:100%;
}
.info_box{width:95%;margin:0;
	padding:5px 5px 5px 2px;
}
.box {
	width: 95%;
	height:200px;
	margin-left: 12px;
}
#footer {
	font-size: 80%;
	position:relative;
	padding-top:50px;
	
}
/* HYO内のテーブル・配置
--------------------------------------------*/
.hyo_mae{
	width:95%;
}
.hyo{
	width:95%;
}
}
	
/* ▼画面領域の横幅が380px以下の場合に適用【iPhone向け】 */

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

#content{
	margin-right: 0px;
	margin-left: 0px;
}
ul#topnav li a{
	font-size:13px;
}
div.update dt {
	width: 7em; /* 日付エリアの幅 */
}
div.update dd {
		font-size:100%;
}
.info_box {
	width:auto;
	height:auto;
	margin-left: 12px;
	margin-right: 2px;
}
.info_box img{
	max-width:100%;
	height:auto;
	margin-left: 0px;
	margin-right: 0px;
}
.info_box float img{
	max-width:60%;
	height:auto;
	margin-left: 0px;
	margin-right: 0px;
}
.info_box h3{
	font-size:90%;
}
	
.info_box h5{
	width:auto;
	margin-left: 2px;
}
.box {
	width: 95%;
	height:220px;
}
.txt{
	width:85%;
	font-size:100%;
	line-height:1.6;
}
}