@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
/* clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 共通設定およびスマートフォン向けのスタイル
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

html,body{
height: 100%;
}

body{
width:100%;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:1em;
font-feature-settings : "palt";
color:#333;
background: url(../images/common/back.png);
margin:0;
padding:0;
}



body {
   /*  font-family: 'Noto Sans JP', sans-serif;*/
}




.disp_none{
	display: none;
	}


img{
	max-width:100%;
	height:auto;
}

.img_center{
	display: block;
	margin: 0 auto 15px;
}

.clear_float{
clear: both;
}

div.but_posi{
	max-width: 100%;
	text-align: center;
	margin:  0 auto 0.5em;
}



#layout{
width:100%;
   -moz-box-sizing: border-box;
  box-sizing: border-box;
margin:0 auto;
position:relative;
min-height:100%;
height: auto !important;
height: 100%;
}

body > #layout {
height: auto;
}

#main{
width: 1024px;
   -moz-box-sizing: border-box;
  box-sizing: border-box;
background: rgba( 255, 255, 255, 0.75 );
margin: 0 auto ;
padding: 0 0 18em 0;
}


.footer_menu_box{
	float: left;
	margin: 0.2em 0.5em 1.5em ;
	padding: 0;
	}



#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5em;
  font-size: 1em;
  text-align: center;
    background:#066395;
  color: #fff;
  padding: 0.5em 0 ;
}

#footer ul{
	margin : 8px auto 0;
}

#footer li {
display: inline;
text-align: center;
}


#footer li a{
	color: #f5f5f5;
	text-decoration: none;
	font-size: 12px;
}

#fot_txt{
	line-height: 1.5;
	padding: 1em 0 0;
	margin: 0 auto 0;
	}






/*ヘッドイメージ*/

.head_title{
	background: #fff;
	margin: 0 auto ;
	padding: 4px 0;
	}
	
.head_title .head_img{
	width: 1024px;
	margin: 0 auto;
}	

.head_title .float_title_l{
	float: left;
	}
	
.head_title .float_title_r{
	float: right;
	}
	
.head_title .float_title_r img{
    position:relative;
    top:20px;
}
	
.head{
	background: #007cbe;
	margin: 0 auto ;
}

.head h1{
	color: #f5f5f5;
	font-size: 1em;
	font-weight: 300;
	padding: 8px 0;
}

.head .h1_title{
	width: 1024px;
	margin: 0 auto;
}





/*nav*/
nav.head_menu {
	width: 100%;
	background: #066395;
	margin: 0px auto;
	padding:  0;
}

nav.head_menu ul{
	width: 1024px;
	text-align: left;
	margin: 0 auto;
	padding: 12px 12px 0;
}

nav.head_menu li{
	display: inline-block;
	white-space: nowrap;
	border-bottom: 3px #0b85f7 solid;
	font-weight: 400;
	font-size: 16px;
	margin: 0;
	padding: 0 0 9px;
}

nav.head_menu li a{
	text-decoration: none;
	color: #fff;
	padding: 0 6px;
}

nav.head_menu li a:hover{
	color: #d3d3d3;
		border-bottom: 3px #f8e00b solid;
	padding: 0 6px 6px;
}




nav.head_menu li a.active{
	border-bottom: 3px #f8e00b solid;
	padding: 0 6px 6px;
}


nav.head_menu  .no_boder , nav.head_menu  .no_boder a.active{
	border-bottom: hidden;
	margin: 0;
	padding: 0;
}

nav.head_menu .mobi_disp{
	display: none;
}


@media only screen and (max-width: 736px) {/*スマホ*/


	#layout{
		width:100%;
		border: none;
	}
	
#main{
width: 100%;
margin: 0 auto ;
padding: 0 0 15em 0;
}

	

	
#footer {
  text-align: center;
}

#fot_txt{
font-size: 14px;
	}


	

/*ヘッドイメージ*/

.head_title{
	margin: 0 auto ;
	padding: 0;
	}
	
.head_title .head_img{
	width: 100%;
	margin: 0 auto;
}	

.head_title .float_title_l{
	float: none;
	text-align: center;
	}
	
.head_title .float_title_r{
	background: #f5f5f5;
	float: none;
	text-align: center;
	
	}
	
.head_title .float_title_r img{
    position:relative;
    top:0px;
}
	
.head{
	clear: both;
	margin: 0 auto ;
}

.head h1{
	color: #fff;
	font-size: 16px;
	text-indent: 5px;
	font-weight: 400;
	padding: 12px 0;
}

.head .h1_title{
	width: 100%;
	margin: 0 auto;
}

nav.head_menu ul{
	width: auto;
}


nav.head_menu .mobi_disp{
	display:inline;
}


}/*スマホ*/


@media only screen and  (min-width: 737px) and (max-width: 1024px) {
#layout{
    width:100%;
     margin: 0;
    padding: 0;
 }


#main{
    width:100%;
     margin: 15px auto;
 }
 
 .head{
	 clear: both;
 }
 
.head .h1_title{
	width: 100%;
	margin: 0 auto;
}

.head_title .head_img{
	width: 100%;
	margin: 0 auto;
}


nav.head_menu ul{
	width: auto;
}

	
}