@charset "shift_jis";

section {
line-height:1.5;
}

header .header_wrapper .mainnav {
    font-weight: 300;
}

div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,form,input,textarea,button,table,tr,th,td,article,aside,footer,header,hgroup,nav,section{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

html {width:100% !important; }
body{
	margin: 0 auto;
	font-family: Meiryo,メイリオ,Verdana,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック',sans-serif;
	width: 100%;
	background-color: #FFFFFF;
}
body a{ text-decoration:none;}

#main_box {
	width: 95%;
	margin-top: 16px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	position: relative;
	display: block;
	clear: both;
	padding-top: 16px;
}

ol#pankuzu{ width:100%; margin:0 auto; list-style:none; font-size:14px; overflow:hidden; padding:10px 2.5%; font-weight:300;}
ol#pankuzu  li{ float:left; padding:2px 10px 2px 0px;}
ol#pankuzu  li a{ color:#630; text-decoration:underline;}
ol#pankuzu  li:nth-last-child(1):before { content:"\f054"; font-family:"FontAwesome"; font-weight:200; color:#CC0000; padding:0 5px; }
ol#pankuzu  li a:hover{ color:#E90107;}
#pankuzu li#top { padding-left:5px; padding-top:2px; padding-right:6px; color:#330000;}
#pankuzu li#top:before {
	content:"\f015";
	font-family:"FontAwesome";
	margin-right:5px;
	color:#CC0000;
}

/*-----ヘッダ-----*/
body > header{ width:100%; background-color:#FFFFFF; }
header .header_wrapper{ width:100%; margin:0 auto;}
header .header_wrapper h1{  float:left; background:#FFF; clear:both;}
header .header_wrapper .mainnav { overflow:hidden; }
header .header_wrapper .mainnav ul{ font-size:14px; padding-top:8px;}
header .header_wrapper .mainnav ul li { float:left; color:#333333; border-left: 1px #CCC solid;/* padding:0 20px;*/ background:#E7E7E7; width:50%; display:block; text-align:center; line-height:40px; height:40px;}
header .header_wrapper .mainnav ul li.last { float:none; clear:both; width:100%; color:#333333; border-left: 1px #CCC solid; border-right: 1px #CCC solid !important;}
header .header_wrapper .mainnav ul li a { color:#333333;}
#header_support a{ width: 200px; font-size:15px;}
/*-----フッター-----*/
body > footer{ width:100%; background-color:#663300; display:block; overflow:hidden; padding:10px auto; margin-bottom:-20px;}
footer ul { margin:0 auto;  color:#FFF; padding-top:10px; text-align:center;}
footer ul li { padding:5px; font-size:14px; line-height:25px; margin:0 auto; clear:both;}
footer ul li.copy { width:100%; padding:0; padding-top:5px; font-size:12px; }
footer ul li a{ color:#FFF;}
footer ul li a:hover{ text-decoration:underline;}


#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 77%;
	z-index:100;
}
#page-top a {
    text-align: center;
	display: block;
	border-radius: 5px;
}

.gotop {
	transform: scale(0.9, 0.9);
	transition: all 0.2s ease 0s;
}
.gotop:hover {
	transform:scale(1)
}

/*-----ナビゲーション-----*/

.nav {
	font-size:12px;
}

a:hover {opacity:0.6;
filter:alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";
background:none!important; }



/*===============================================
  画面の横幅が479px以下
===============================================*/
@media screen and (max-width:479px){
header .header_wrapper h1{width: 100%;border-bottom:1px #bdbdbd solid;box-shadow:#e3e3e3 0px 3px 6px 0px;
-webkit-box-shadow:#e3e3e3 0px 3px 6px 0px;
-moz-box-shadow:#e3e3e3 0px 3px 6px 0px;}
ol#pankuzu {
    background-color: rgba(255, 255, 255, 0.5);
    padding:5px;
}

}
/*===============================================
  画面の横幅が480px以上
===============================================*/
@media screen and (min-width:480px){
#main_box { width:799px; margin:0 auto; position:relative;}
#pankuzu_bg{ width:100%;background:#EBEBEB; }
ol#pankuzu{ width:980px; padding:10px 0; background-color: rgba(255,255,255,0.5)}
/*-----ヘッダ-----*/
body > header{ height: 40px;border-bottom:1px #bdbdbd solid; width:100%; min-width:1060px; }
header .header_wrapper{ width:980px; height: 40px;}
header .header_wrapper h1{  float:left; background:none; clear:none;}

	
	
}

@media only screen and (min-device-width:768px)
    and (max-device-width:1024px){
body{ min-width:100%; }
#main_box { max-width:100%;}
ol#pankuzu{ width:100%;}
body > header{ min-width:100%; }
header .header_wrapper{ width:100%;}
body > footer{ min-width:100%; margin-top:17%; }
body > footer ul { width: 100%;}





	}