@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;}
#content{
	width:95%;float:none;
	padding:10px 0;	
	margin:0 auto;width:95%;
}
.top_midashi h2{font-size:95%;}
}

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

#wrapper{width:100%;}
#content{width:100%;}
.main_img{width:100%;}

h1{font-size:100%;}
#header .logo{padding-left:10px;margin-bottom: 3px;white-space: nowrap;}

.top_midashi{
	margin:0 auto;width:95%;
	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;}

.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%;}
.resizeimage img { width: 75%; }
.br-sp { display:none; }

.box {
	width: 95%;
	height:200px;
	margin-left: 12px;
}
.info_box{
    position: relative;	width:75%;
	margin-top:1%;
	padding-left: 3.5%;
}
#footer {
	font-size: 80%;
	position:relative;
	padding-top:50px;
	
}
/* HYO内のテーブル・配置
--------------------------------------------*/
.hyo_mae{
	width:95%;
}
.hyo{
	width:95%;
}
}

/* ▼画面領域の横幅が400以上の場合に改行する設定 */
@media screen and (max-width: 400px){
.br-pc {display: none; }

}
	
/* ▼画面領域の横幅が380px以下の場合に適用【iPhone向け】 */

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

#content{
	margin-right: 0px;
	margin-left: 0px;
}
ul#topnav li a{
	font-size:13px;
}
.info_box {
	width:auto;	height:auto;
	margin-left: 3%;margin-right: 2%;
}
.info_box img{
	max-width:100%;
	height:auto;
	margin-left: 0px;
	margin-right: 0px;
	}
.box {
	width: 95%;
	height:220px;
}
.txt{
	width:85%;
	font-size:100%;
	line-height:1.6;
}
.br-sp { display:none; }
}