@charset "utf-8";
/*(タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/


/*画面幅1150px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1150px){

/*コンテナー（HPを囲むブロック）
---------------------------------------------------------------------------*/
#container{
	width: auto;
	margin: 0px 2%;
}


}
/*画面幅1000px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1000px){

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar a{
	padding: 0 5px;	/*上下、左右にあけるメニュー内の余白*/
}

}
/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

#logo img{
	width: 250px;	/*画像幅*/
	padding: 15px 0px 0px 20px;	/*ロゴの余白。上、右、下、左の順。*/
}



/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロックの設定*/
#menubar-s{
	margin-bottom: 15px;
	overflow: hidden;
box-sizing: border-box;
}
/*メニュー１個あたりの設定*/
#menubar-s li{
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	width:32%;
	margin-right: 1%;
	margin-bottom: 1%;
box-sizing: border-box;
}
#menubar-s a{
	display: block;
	text-decoration: none;
	line-height: 35px;	/*高さ*/
	text-align: center;
	background: -webkit-linear-gradient(#fff, #cacaca);	/*グラデーション*/
	background: linear-gradient(#fff, #cacaca);			/*同上*/
	border-radius: 20px;
	border: 1px solid #999;
}
#menubar-s li:nth-child(even){
	margin-right: 0;
}
/*小さな端末用メニューを非表示から表示に切り替える*/
#menubar-s{
	display: block;
}
/*(左サイドメニュー)を非表示にする*/
.cccc{
	display: none;
}

/*左側メニューをスマホでは非表示にする*/
#menubar{
	display: none;
}

/*aboutを非表示から表示に切り替える*/
#sub .box1{
	display: block;
}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr{
	display: block;
	position: absolute;
	top: 24px;	/*上から24pxの場所に配置*/
	right: 30px;	/*右から5%の場所に配置*/
	width:20px;	/*幅*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	padding: 7px 5px 2px;	/*上、左右、下へのボックス内余白*/
}
/*３本のバー（1本あたり）*/
#menubar_hdr span{
	display: block;
	border-top: 1px solid #fff;	/*枠線の幅、線種、色*/
	margin-bottom: 5px;	/*バー同士の余白*/
color:white;
font-size:10px;
}



/*main,subコンテンツ
---------------------------------------------------------------------------*/
#main, #sub{
	float: none;
	width: auto;
	overflow: hidden;
}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
section#new h2.open{
	background: url(../image2/btn_minus.png) no-repeat right center/34px 34px, linear-gradient(#ed0000, #cb0000);
}
section#new h2.close{
	background: url(../image2/btn_plus.png) no-repeat right center/34px 34px, linear-gradient(#ed0000, #cb0000);
}

/*その他
---------------------------------------------------------------------------*/
body.s-n #sub{
	display: none;
}

/*コンテンツ内のボックス（list）設定　　各種コンテンツ
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/

.list{
	float: left;/*左に回り込み*/
	width: 31%;/*幅*/
	overflow: hidden;

	margin-left: 1.5%;/*ボックス同士の左右間の余白*/
	margin-bottom: 20px;/*ボックス同士の上下間の余白*/
	border: 1px solid #ccc;/*枠線の幅、線種、色*/
	border-radius: 6px;/*角丸のサイズ。この行削除すれば通常の長方形になる。*/
	height: 60px;/*高さ(CMS専用)*/
	height: 60px;/*高さ（下の「.list a」の高さと揃える）*/
	line-height: 1.4;
	position: relative;

	border: solid 1px #ccc;/*線の線種、幅、色*/
	background: -webkit-linear-gradient(#fff, #eee);/*グラデーション*/
	background: linear-gradient(#fff, #eee);/*同上*/
	border: 1px solid #ccc;/*枠線の幅、線種、色*/
	border-radius: 6px;/*角丸のサイズ。この行削除すれば通常の長方形になる。*/
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 0px 0px 3px rgba(0,0,0,0.2);/*同上*/
box-sizing: border-box;
}

.list a{
	display: block;
	/*---overflow: auto;--スクロールバー非表示-*/
	text-decoration: none;
	height: 60px;/*高さ(CMS専用)*/
	height: 60px;/*高さ（上の「.list」の高さと揃える）*/
}


.list a:hover{
	background: #000;/*マウスオン時の背景色*/
	color: #fff;/*マウスオン時の文字色*/
}

/*ボックス内の画像設定*/
.list .img{
	height: auto;	/*画像の高さ*/
}



/*その他のコンテンツ*/

.list2{
	float: left;/*左に回り込み*/
	width: 31%;/*幅*/
	overflow: visible;

	margin-left: 1.5%;/*ボックス同士の左右間の余白*/
	margin-bottom: 20px;/*ボックス同士の上下間の余白*/
	border: solid 1px #ccc;/*線の線種、幅、色*/
	background: -webkit-linear-gradient(#fff, #eee);/*グラデーション*/
	background: linear-gradient(#fff, #eee);/*同上*/
	border: 1px solid #ccc;/*枠線の幅、線種、色*/
	border-radius: 6px;/*角丸のサイズ。この行削除すれば通常の長方形になる。*/
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
box-sizing: border-box;
}

.list2 a{
	display: block;
	/*---overflow: auto;--スクロールバー非表示-*/
	text-decoration: none;
	height: 30px;/*高さ(CMS専用)*/
	height: 30px;/*高さ（上の「.list」の高さと揃える）*/
}


.list2 a:hover{
	background: #000;/*マウスオン時の背景色*/
	color: #fff;/*マウスオン時の文字色*/
}

/*ボックス内の画像設定*/

.list2 .img{
	width: 100%;/*画像の幅*/
	height: 140px;/*画像の高さ*/
	padding-bottom: 10px;/*画像下に空ける余白*/
}


}
/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){


#logo img{
	width: 250px;	/*画像幅*/
	padding: 15px 0px 0px 20px;	/*ロゴの余白。上、右、下、左の順。*/
}

}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*メニュー１個あたりの設定*/
#menubar-s li{
	width:49%;
}
.we{
	width: 100%;/*幅*/
}

.list{

	width: 48%;/*幅*/
}
.list2{
	width: 48%;/*幅*/
}
#logo img{
	width: 250px;	/*画像幅*/
	padding: 20px 0px 0px 20px;	/*ロゴの余白。上、右、下、左の順。*/
}

/*全体の設定
---------------------------------------------------------------------------*/
body{
	font-size: 15px;	/*文字サイズ*/
	line-height: 1.6;	/*行間*/
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header{
	height: 80px;	/*高さ*/
	border-radius: 0px 0px 10px 0px;	/*角丸のサイズ。左上、右上、右下、左下への順番。*/
	margin-bottom: 20px;	/*下のコンテンツとの間にあけるスペース*/
}
/*ロゴ画像*/
#logo img{
	width: 200px;	/*画像幅*/
	padding: 28px 0px 0px 20px;	/*ロゴの余白。上、右、下、左の順。*/
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロックの設定*/
#menubar-s{
	margin-bottom: 20px;

}
/*メニュー１個あたりの設定*/
/*3/21暫定解除#menubar-s li{
	float: none;
	width:48%;
	margin-right: 0;
box-sizing: border-box;
}
#menubar-s a{
	border-radius: 10px;
}

----------------*/


/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr{
	top: 15px;	/*上から24pxの場所に配置*/
}

/*サブコンテンツ内のメニュー
---------------------------------------------------------------------------*/
#sub ul.submenu li a{
	padding: 10px 10px;	/*メニュー内の余白。上下、左右への設定。*/
}

/*その他
---------------------------------------------------------------------------*/
.ws,.wl{
	width: 95%;
}
img.fr,img.fl{
	float: none;margin: 0;width: 100%;
}
.sh{
	display: block;
}
.pc{
	display: none;
}



}
/*画面幅360px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:360px){


/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ロゴ画像*/
#logo img{
	padding: 26px 0px 0px 10px;	/*ロゴの余白。上、右、下、左の順。*/
}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr{
	right: 15px;	/*右から15pxの場所に配置*/
}



 


}