@charset "utf-8";
/* # =================================================================
#### font-family
# ================================================================= */
html{
	font-family : 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
/* # =================================================================
#### font-size
# ================================================================= */
html{
	font-size : 62.5%;/* fontのベースサイズを10pxに指定 */
}
body{
	font-size :1.6rem;/* 16px */
}
h1{
	font-size : 36px;/* IE8以下とAndroid4.3以下用フォールバック */
	font-size : calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変 */
}
h2{
	font-size : 24px;/* IE8以下とAndroid4.3以下用フォールバック */
	font-size : calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変 */
}
h3{
	font-size : 20px;/* IE8以下とAndroid4.3以下用フォールバック */
	font-size : calc(1.8rem + ((1vw - 0.64rem) * 0.3571));/* 18px~20pxで可変 */
}
h4{
	font-size : 18px;/* IE8以下とAndroid4.3以下用フォールバック */
	font-size : calc(1.6rem + ((1vw - 0.64rem) * 0.3571));/* 16px~18pxで可変 */
}
p,a,li,dt,dd,th,td{
	font-size : 16px;/* IE8以下とAndroid4.3以下用フォールバック */
	font-size : calc(1.4rem + ((1vw - 0.64rem) * 0.3571));/* 14px~16pxで可変 */
}
@media (min-width: 1200px) {/* 1200px以上*/
h1{
	font-size : 3.6rem;/* 36px */
}
h2{
	font-size : 2.4rem;/* 24px */
}
h3{
	font-size : 2.0rem/* 20px */
}
h4{
	font-size : 1.8rem/* 18px */
}
p,a,li,dt,dd,th,td{
	font-size : 1.6rem;/* 16px */
}
}
@media screen and (max-width: 640px) {/* 640px以下*/
h1{
	font-size : 2.4rem;/* 24px */
}
h2{
	font-size : 2rem;/* 20px */
}
h3{
	font-size : 1.8rem/* 18px */
}
h4{
	font-size : 1.6rem/* 16px */
}
p,a,li,dt,dd,th,td{
	font-size : 1.4rem;/* 14px */
}
}
/* # =================================================================
#### table
# ================================================================= */
table{
	border-collapse : collapse;
	width : 100%;
}
table,
th,
td{
	border : 1px solid #000;
	padding : 10px;
	text-align : center;
}
/* # =================================================================
#### common
# ================================================================= */
body{
	position : relative;
}
img{
	display :block;
}
a{
	text-decoration : none;
	transition : 0.5s;
}
a:hover{
	transition : 0.5s;
}
ol li,ul li{
	list-style : none;
}
/*  */
main{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	background : #E5E8EA;
	padding : 30px 0;
}
/* # =================================================================
#### header
# ================================================================= */
header{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 15px 0;
}
.header_inner{
	position : relative;
	display :-webkit-box;
	display :-ms-flexbox;
	display :flex;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
	-webkit-box-pack : justify;
	-ms-flex-pack : justify;
	justify-content : space-between;
	width : 1200px;
	height : auto;
	margin : 0 auto 5px;
}
.header_inner .left_box{
	position : relative;
	display : block;
	width : 50%;
	height : auto;
}
.header_inner .left_box h1{
	position : relative;
	display : inline-block;
	width : 95px;
	height : auto;
}
.header_inner .left_box p {
	position : relative;
	display : inline-block;
	color : #0860A8;
	font-size : 13px;
	top : -19px;
	left : 10px;
}
.header_inner .left_box h1 a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.header_inner .left_box h1 a:hover{
	opacity : 0.5;
}
.header_inner .left_box h1 a img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.header_inner .right_box{
	position : relative;
	display :-webkit-box;
	display :-ms-flexbox;
	display :flex;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
	-webkit-box-pack : end;
	-ms-flex-pack : end;
	justify-content : flex-end;
	width : 50%;
	height : auto;
}
.header_inner .right_box .contact_box{
	position : relative;
	display : block;
	width : 230px;
	height : auto;
}
.header_inner .right_box a.en_link{
	position : relative;
	display : block;
	width : 50px;
	height : auto;
	margin-left : 30px;
}
.header_inner .right_box a.en_link:hover{
	opacity : 0.5;
}
.header_inner .right_box a.en_link img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* header footer 共通 */
.contact_box{

}
.contact_box span{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 5px;
}
.contact_box a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.contact_box a:hover{
	opacity : 0.5;
}
.contact_box a img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* nav */
nav.header{
	position : relative;
	display : block;
	width : 1200px;
	height : auto;
	margin : 0 auto;
}
.menu{
	position : relative;
	display :-webkit-box;
	display :-ms-flexbox;
	display :flex;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
	-webkit-box-pack : end;
	-ms-flex-pack : end;
	justify-content : flex-end;
	width : 100%;
	height : auto;
	z-index : 10000;
}
.menu .menu_list{
	width : auto;
}
.menu .menu_list > a{
	border-right : 1px solid #ccc;
	display : block;
	padding : 3px 25px;
	text-align : center;
	transition : .3s;
	color : #323232;
	font-family : 'NOTO SANS JP';
}
.menu .menu_list > a:hover{
	color : #fff;
	background : #0860A8;
}
.menu_contents{
	background : #0860A8;
	display : none;
	position : absolute;
	top : 100%;
	left : 0;
	width : 100%;
	padding : 20px 0 20px 35px;
}
.menu_contents p.title{
	position : relative;
	display : inline-block;
	width : 153.05px;
	height : auto;
	color : #fff;
	border-bottom : 1px solid #fff;
	margin-right : 140px;
	top : -76px;
}
.menu_contents ul{
	position : relative;
	display : inline-block;
	width : auto;
	height : auto;
}
.menu_contents li{
	position : relative;
	display : inline-block;
	width : 140px;
	height : auto;
	margin-right : 35px;
}
.menu_contents li:last-child{
	margin-right : 0;
}
.menu_contents li a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.menu_contents li a:hover{
	opacity : 0.5;
}
.menu_contents li a img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* # =================================================================
#### footer
# ================================================================= */
#page-top{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	background : #E5E8EA;
}
#page-top a{
	position : relative;
	display : block;
	width : 80px;
	height : 40px;
	margin : 0 auto;
	background : url(../images/common/pagetop.png)no-repeat;
	background-size : cover;
}
#page-top a:hover{
	opacity : 0.5;
}
/* 本体 */
footer{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	background : #1A1A1A;
	padding : 30px 0;
}
footer .wrap{
	position : relative;
	display :-webkit-box;
	display :-ms-flexbox;
	display :flex;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
	-webkit-box-pack : justify;
	-ms-flex-pack : justify;
	justify-content : space-between;
	width : 1200px;
	height : auto;
	margin : 0 auto 50px;
}
/* footer_logo */
.footer_logo{
	position : relative;
	display : block;
	width : 25%;
	height : auto;
}
.footer_logo h2{
	position : absolute;
	display :-webkit-box;
	display :-ms-flexbox;
	display :flex;
	-webkit-box-pack : center;
	-ms-flex-pack : center;
	justify-content : center;
	-webkit-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	top : 0;
	bottom : 0;
	left : 0;
	right : 0;
	margin : auto;
	width : 140px;
	height : 89px;
}
.footer_logo h2 a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.footer_logo h2 a:hover{
	opacity : 0.5;
}
.footer_logo h2 a img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* footer_center */
.footer_center{
	position : relative;
	display : block;
	width : 50%;
	height : auto;
	border-left : 1px solid #fff;
	border-right : 1px solid #fff;
}
.footer_center .contact_box{
	position : relative;
	display : block;
	width : 340px;
	margin : 0 auto 15px;
	padding-bottom : 15px;
	border-bottom : 1px solid #fff;
}
.footer_center .contact_box a{
	margin : 10px 0;
}
.footer_center .contact_box span{
	color : #fff;
	font-size : 20px;
}
.footer_center .contact_box span.small{
	font-size : 16px;
}
.footer_center span.info{
	position : relative;
	display : block;
	width : 340px;
	margin : 0 auto;
	color : #fff;
}
/* footer_nav */
.footer_nav{
	position : relative;
	display : block;
	width : 25%;
	height : auto;
	padding-left : 30px;
	padding-top : 30px;
}
.footer_nav ul{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.footer_nav ul li{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.footer_nav ul li a{
	position : relative;
	display : inline-block;
	width : auto;
	height : auto;
	color : #fff;
}
.footer_nav ul li a:after{
	content : ">";
	position : absolute;
	display : block;
	right : -20px;
	top : 0;
	bottom : 0;
	margin : auto;
	font-size : 20px;
}
.footer_nav ul li a:hover{
	opacity : 0.5;
}
.footer_link{
	position : relative;
	display : block;
	width : 190px;
	height : 41px;
	margin-top : 50px;
}
.footer_link a{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	background : url(../images/common/mail_1.png)no-repeat;
	background-size : cover;
}
.footer_link a:hover{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	background : url(../images/common/mail_2.png)no-repeat;
	background-size : cover;
}
/*  */
small{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	color : #fff;
}
/*  */
footer.sp{
	display : none;
}
/* # =================================================================
#### front
# ================================================================= */
/* slider */
.slide-box {
}
/*  */
h2.main_headline{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 20px;
}
h2.main_headline span{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	color : #0860A8;
	font-size : 18px;
	font-weight : normal;
	margin-bottom : 10px;
}
h2.main_headline img{
	position : relative;
	display : block;
	width : 500px;
	height : auto;
	margin : 0 auto;
}
/*  */
ul.front{
	position : relative;
	display :-webkit-box;
	display :-ms-flexbox;
	display :flex;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
	-webkit-box-pack : justify;
	-ms-flex-pack : justify;
	justify-content : space-between;
	width : 1000px;
	height : auto;
	margin : 0 auto 20px;
	padding : 0;
}
ul.front li a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
ul.front li a:hover{
	opacity : 0.5;
}
ul.front li a img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
ul.front.two li{
	position : relative;
	display : block;
	width : 49%;
	height : auto;
}
ul.front.three li{
	position : relative;
	display : block;
	width : 32%;
	height : auto;
}
/* # =================================================================
#### ハンバーガー
# ================================================================= */
.drawer.drawer--top{
	display : none;
}
.drawer-hamburger{
	width : 35px;
	padding : 0px 0 10px;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before{
	height : 3px;
}
span.menu_name {
	font-size : 12px;
	font-weight : bold;
	top : 7px;
	position : relative;
}
/*  */
.drawer-nav{

}
.nav_wrap{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 30px 15px 150px;
}
nav.drawer-nav .menu{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
nav.drawer-nav .menu li{

}
nav.drawer-nav .menu li a{
	position : relative;
	display : inline-block;
	width : auto;
	height : auto;
	color : #323232;
	padding : 5px 15px;
}
nav.drawer-nav .menu li a:hover{
	color : #0860A8;
}
































/* # =================================================================
#### footer
# ================================================================= */