@charset "utf-8";
html{
	height: 100%;
	font-size: 62.5%;/*10px*/
}
/**********  **********/
body {
	height: 100%;
	line-height:1.3;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
/*
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
*/
	color: #000;
	text-align: left;
	background: #FFF;
}
#wrapper{
	width: 100%;
	position: relative;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	background: #FFF;
}
html > #main_contents {
	height: auto;
}
@media all and (min-width: 0px)and (max-width: 640px){
	#main_contents{
		position:relative;
		padding-top:0px;
		padding-bottom:115px;
		width: 100%;

	}
}@media all and (min-width: 641px){
	#main_contents{
		position:relative;
		padding-top:0px;
		padding-bottom:115px;
		width: 100%;
	}
}
/********** footer **********/
footer{
	position: absolute;
	bottom: 0;
	width:100%;
	height:130px;
	text-align:center;
	background-color:#231815;
	color:#FFF;
	padding-top:20px;
}
footer a{
	color:#FFF;
}
/********** ヘッダー **********/
@media all and (min-width: 0px)and (max-width: 640px){
	html{
		font-size: 37.5%;/*7px  43.8 7px*/
	}
	#wrapper{
	    width: 100%;
	    position: relative;
	    height: auto !important;
	    height: 100%;
	    min-height: 100%;
	}
}
@media all and (min-width: 641px)and (max-width: 979px){
	html{
		font-size: 62.5%;/*10px*/
	}
	#wrapper{
	    width: 100%;
	    position: relative;
	    height: auto !important;
	    height: 100%;
	    min-height: 100%;
	}
}
@media all and (min-width: 980px){
	html{
		font-size: 62.5%;/*10px*/
	}
	#wrapper{
	    width: 100%;
	    position: relative;
	    height: auto !important;
	    height: 100%;
	    min-height: 100%;
	}
}

/********** ヘッダー **********/
#header {
	height:55px;
	width:100%;
	background: #ffffff;
	text-align: left;
	position:fixed;
	top:0;
	left:0;
	z-index:10;
	font-size:64%;
}
.header_box{
	width:100%;
	max-width:980px;
	margin:0px auto 0 auto;
}
.logo{
	float:left;
	padding-left:5px;
	padding-top:16px;
}
.logo img{
	margin: 0;
	padding: 0;
	vertical-align: bottom;
	height:34px;
}
.menu_button{
	float:right;
	padding-top:16px;
	padding-right:0px;
}
.tel_icon{
	float:left;
	padding-right:10px;
}
.tel_icon img{
	height:34px;
}
.mail_icon{
	float:left;
	padding-right:5px;
}
.mail_icon img{
	height:34px;
}
@media all and (min-width: 0px) and (max-width: 640px){
	.contents_box{
		margin:0 auto 0 auto;
		padding:0;
		width: 375px;
	}

	.page_topimg_100{
		width:100%;
		margin:0 auto 0;
	
	}
	.page_topimg_100 img{
		width:100%;
		margin:0 auto 0;
	}
}@media all and (min-width: 641px) and (max-width: 900px){
	.contents_box{
		margin:0 auto 0 auto;
		padding:0;
		width: 640px;
	}
	.page_topimg_100{
		width:100%;
		margin:0 auto 0;
	
	}
	.page_topimg_100 img{
		width:100%;
		margin:0 auto 0;
	}
}@media all and (min-width: 901px){
	.contents_box{
		margin:0;
		padding:0;
		width: 100%;
		
	}
	.page_topimg_100{
		width:100%;
		margin:0 auto 0;
	
	}
	.page_topimg_100 img{
		width:100%;
		margin:0 auto 0;
	}
}

/***** linkボタン *****/
.link_btn{
	width:100%;
	margin:40px auto 40px auto;
}
@media all and (min-width: 0px) and (max-width: 640px){
	.link_btn_left{
		width:70%;
		margin:0 auto 10px auto;
	}
	.link_btn_left img{
		width:100%;
	}
	.link_btn_right{
		width:70%;
		margin:0 auto 10px auto
	}
	.link_btn_right img{
		width:100%;
	}
}@media all and (min-width:641px){
	.link_btn_left{
		float:left;
		width:48%;
	}
	.link_btn_left img{
		width:100%;
	}
	.link_btn_right{
		float:right;
		width:48%;
	}
	.link_btn_right img{
		width:100%;
	}
}
.link_btn_full{
	width:100%;
	margin:15px auto 15px;
	padding:10px 0 10px;
}
/********** ボトムメニュー **********/
.bottom_menu{
	width:90%;
	max-width:980px;
	margin:0px auto 0 auto;
	padding-top:20px;
	padding-bottom:20px;
	color: #000;
	text-align:right;
}
.to_top{

}
.to_top img{
	width:20%;
	max-width:100px;
}
/********** 共通 **********/
a {
	color:#FFF;
}
.pref ul{
	width:90%;
	margin:0 auto 0;
}
.pref a{
	font-weight:bold;
	text-decoration: underline solid #333;
}
.clear{
	clear:both;
}
.bar_black{
	padding-top:5px;
	padding-bottom:5px;
	background-color:#000;
	width:100%;
	color:#FFF;
}
.bar_darkbrown{
	padding-top:5px;
	padding-bottom:5px;
	background-color:#331e0b;
	width:100%;
	color:#FFF;
}
.bar_lightbrown{
	padding-top:7px;
	padding-bottom:7px;
	background-color:#c8bb9b;
	width:100%;
	color:#000;
}
.underline{
	border-bottom:solid 1px #000;
	padding-bottom:5px;
	margin-bottom:7px;
}
.underline_lite{
	border-bottom:solid 1px #000;
}
.bg_gray{
	background-color:#DDD;
}
.bg_darkgray{
	background-color:#999;
}
.bg_orange{
	background-color:#f49b01;
}
.border_black{
	border:solid 1px #000;
}
.border_white{
	border:solid 1px #999;
}
.hr_line{
	border-top: 1px solid #999;
}
.black_line{
	border-top: 1px solid #000;
}
.orange_line{
	border-top: 1px solid #f49b01;
}
.line_left{
	border-left:solid 1px #FFF;
}
.bg_black{
	background-color:#000;
}
.bg_white{
	background-color:#FFF;
}
.img_100 img{
	width:100%;
}
.img_90 img{
	width:90%;
	margin:0 auto 0 auto;
}
.img_80 img{
	width:80%;
	margin:0 auto 0 auto;
}
.img_50 img{
	width:50%;
	margin:0 auto 0 auto;
}
.img_40 img{
	width:40%;
	margin:0 auto 0 auto;
}
.img_30 img{
	width:30%;
	margin:0 auto 0 auto;
}
.img_25 img{
	width:25%;
	margin:0 auto 0 auto;
}
.img_20 img{
	width:20%;
	margin:0 auto 0 auto;
}
.text_100{
	width:100%;
}
.text_90{
	width:90%;
	margin:0 auto 0 auto;
}
.text_80{
	width:80%;
	margin:0 auto 0 auto;
}
.text_75{
	width:75%;
	margin:0 auto 0 auto;
}
.text_45{
	width:45%;
	margin:0 auto 0 auto;
}
.m_space_5{
	margin-top:5px;
	margin-bottom:5px;
}
.m_space_10{
	margin-top:10px;
	margin-bottom:10px;
}
.m_space_14{
	margin-top:14px;
	margin-bottom:14px;
}
.m_space_20{
	margin-top:20px;
	margin-bottom:20px;
}
.m_space_30{
	margin-top:30px;
	margin-bottom:30px;
}
.text_left{
	text-align:left;
}
.text_center{
	text-align:center;
}
.text_right{
	text-align:right;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}