/*タブレット・スマホ設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

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

/*全体の幅を一括設定
---------------------------------------------------------------------------*/
header,#menubar,.contents,#pagetop {
	margin: 0 3%;
}
	.gallery01 { width:100%; }
}



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

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロックの設定*/
#menubar-s {
	display: block;	/*小さい端末用(画面幅800px以下)メニューを非表示から表示に切り替える*/
	position: relative;z-index: 3;
	padding-top: 20px;
}
#top #menubar-s {
	margin-top: -130px;	/*上の「.mt-top」の数字と合わせる*/
	}
/*メニュー１個あたりの設定*/
#menubar-s li {
	float: left;
	width: 48%;		/*幅*/
	margin: 0 1% 10px 1%;	/*上、右、下、左へ、メニューの外側に空けるスペース*/
}
#menubar-s li a {
	text-decoration: none;
	display: block;
	text-align: center;
	line-height: 50px;		/*行間（高さ）*/
	border: 1px solid #666;	/*枠線の幅、線種、色*/
	border-radius: 10px;	/*角丸のサイズ*/
}
#menubar-s li a:hover {
	border: 1px solid #EE751D;	/*枠線の幅、線種、色*/
}

/*大きな端末用(画面幅801px以上)メニューを非表示にする*/
#menubar {
	display: none;
}

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

#sub  #menubar_hdr {
	border: 1px solid #000;	/*トップページでの枠線の幅、線種、色*/
}
/*３本のバー（1本あたり）*/
#sub #menubar_hdr span {
	display: block;
	border-top: 3px solid #000;	/*枠線の幅、線種、色*/
	margin-bottom: 7px;			/*バー同士の余白*/
}
#sub #menubar_hdr span {
	border-top: 3px solid #000;	/*トップページでの枠線の幅、線種、色*/
}

/*コンテンツ
---------------------------------------------------------------------------*/
/*見出しのタイプ違い設定（トップページの挨拶で使っている大きな見出し）*/
.type1 {
	font-size: 40px !important;
}

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

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

/*テーブル ta2
---------------------------------------------------------------------------*/
/*ta2設定*/
.ta2 {
/*	font-size: 14px;*/
}
/*一番左の列の設定。メニュータイトルが入っている所。*/
.ta2 th {
}
.ta2 th,
.ta2 td {
	padding: 5px ;
}
/*写真用*/
.ta2 img.menu-img {
	width: 100px;
}

/*その他
---------------------------------------------------------------------------*/
body.s-n .sub {display: none;}
.pt70 {padding-top: 0px;}
.fr2,.fl2 {
	text-align:left;
	clear:both;
	float: none;
	margin: 0;
	margin-bottom: 10px;
	width: 100% !important;
	}

.btn01 {
	width:40%;
	}

.ul02 li {
	margin-right:10px;
	}

}


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

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header {
	text-align: left;	/*内容を左寄せに変更*/
}
/*ロゴ画像*/
#logo img {
	width: 220px;	/*画像幅*/
	padding-top: 38px;	/*画像の上にあける余白*/
}

/*GALLERYページ
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list {
	width: 30%;	/*ボックスの幅*/
}

/*COUPONページ
---------------------------------------------------------------------------*/
/*段落タグ*/
#coupon p {
	left: 0%;
	width: 90%;
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル内の左側*/
.ta1 th {
	width: 90px;
	padding: 5px;
}
/*テーブル内の右側*/
.ta1 td {
	width: auto;
	padding: 5px;
}

/*テーブル ta2
---------------------------------------------------------------------------*/
/*写真用*/
.ta2 img.menu-img {
	float: none;
	display: block;
}
/*テーブル ta3
---------------------------------------------------------------------------*/
/*ta3設定*/
.ta3 {
	font-size: 85%;
}


/*その他
---------------------------------------------------------------------------*/
.ws,.wl {width: 95%;}
.fr,.fl{
	text-align:center;
	clear:both;
	float: none;
	margin: 0;
	margin-bottom: 10px;
	width: 100% !important;
	}
.sh {display: block;}
.pc {display: none;}

}


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

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

/*トップページ以外のメイン画像。
#subimgのcss設定はここのみです。あまりに画像が細長くなるので、一旦幅を200%にして中央のみ切り抜いています。
細長いまま全体を出したいならここのブロック全部削除して下さい。
---------------------------------------------------------------------------*/
#subimg {
	width: 200%;
	position: relative;
	left: -50%;
}

/*コンテンツ
---------------------------------------------------------------------------*/
.contents {
	padding: 10px 0;
}
/*見出しのタイプ違い設定（トップページの挨拶で使っている大きな見出し）*/
.type1 {
	font-size: 20px !important;
}

/*サブコンテンツ内のメニュー
---------------------------------------------------------------------------*/
/*メニュー１個ごとの設定*/
.sub ul.submenu li a {
	padding: 10px;	/*メニュー内の余白*/
}

/*GALLERYページ
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list {
	width: 47%;	/*ボックスの幅*/
}

/*テーブル ta2
---------------------------------------------------------------------------*/
.ta2 td,
.ta2 th {
	padding: 3px;	/*ボックス内の余白*/
}
/*一番左の列の設定。メニュータイトルが入っている所。*/
.ta2 th {
	width: 100px;
}

/*MENUページのページ内メニュー
---------------------------------------------------------------------------*/
ul.navmenu {
	padding-top: 0px;
	padding-bottom: 20px;
	text-align: left;
}
ul.navmenu li {
	display: block;
	padding: 10px;
}

/*その他
---------------------------------------------------------------------------*/
.fs1 {font-size: 14px;}
}