/*=============================================
* body
*=============================================*/

body {
	color: #333333;
	font-family: "Noto Sans CJK JP", sans-serif;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: 0;
	background: #FFF;
	min-width: inherit;
	min-height: inherit;
	max-height: 100%;
}



/*=============================================
* fonts - DON'T EDIT
*=============================================*/

.fnt-mincho {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.fnt-meiryo {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.fnt-gothic {
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}




/*=============================================
* .fnt - customs
*=============================================*/

.fnt-mincho {
}
.fnt-meiryo {
}
.fnt-gothic {
}
.fnt-garamond {
}

.fnt-noto{
	font-family: 'Noto Serif JP', sans-serif;
}


/*=============================================
* <main>
*=============================================*/

main {
	clear: both;
	width: 100%;
	position: relative;
	overflow: hidden;
}
.wrap {
	width: 1000px;
}



/*=============================================
* <header>
*=============================================*/

header .top{
	min-height: 240px;
	position: relative;
}

header .top .wrap{
	min-height: inherit;
}

header h1 {
	position: absolute;
	top: -9999999px;
	left: 9px;
}
header .logo {
	/* margin-left: -50px; */
}
header .tel {
	position: absolute;
	right: 120px;
	top: 30px;
}
header .contact {
	position: absolute;
	right: 0px;
	top: 30px;
}
header .nav-fl {
	padding-top: 60px;
}

header .nav-fl a{
	padding: 0px 36px;
	font-size: 15px;
	border-left: 1px solid #dddddd;
	text-decoration: none;
}

header .nav-fl a:hover{
	color: #3A68B3;
}

header .nav-fl a:first-child{
	/* margin-left: -50px; */
}

header .nav-fl a:last-child{
	border-right: 1px solid #dddddd;
	/* margin-right: -50px; */
}

.sp-viewer{
	display: none;
}

/*=============================================
* key
*=============================================*/

#key {
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	min-height: 590px;
	position: relative;
}
#key ul {
	min-height: inherit;
}
#key li {
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	min-height: inherit;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}


#key .key-txt{
	z-index: 90;
	position: absolute;
	top: 24px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}

#trigger-overlay{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: 0.4s all;
	-moz-transition: 0.4s all;
	-ms-transition: 0.4s all;
	-o-transition: 0.4s all;
	transition: 0.4s all;
}


#key .key-sp{
	display: none;
}


/* NAV FIXED */
header .nav-fixed .tel-fixed{
	position: relative;
	float: left;
	font-size: 20px;
	color: #000;
	display: inline-block;
	width: 49.9%;
	text-align: center;
	/* border-right: 1px solid #000; */
	padding: 15px 0px;
	background: #fff;
}

header .nav-fixed .tel-fixed::before{
	content:"";
	top: 21px;
	left: 25%;
	position:absolute;
	background:url("../images/shared/icon-phone.png") no-repeat center top;
	width:19px;
	height:19px;
}

header .nav-fixed .btn-fixed{
	height: 60px;
	position: relative;
	float: left;
	font-size: 20px;
	color: #fff;
	display: inline-block;
	width: 50%;
	text-align: center;
	background: #058ad9;
}

header .nav-fixed .btn-fixed a{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	width: 300px;
	padding-left: 10%;
}

header .nav-fixed .btn-fixed a::before{
	content:"";
	top: 6px;
	left: 25%;
	position:absolute;
	background:url("../images/shared/icon-mail.png") no-repeat center top;
	width:22px;
	height:20px;
}

/* ~end NAV FIXED */




.bottom-navi{
	width: 100%;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-ms-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	opacity: 0;
	visibility: hidden;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	bottom: 0;
	left: 0;
	-webkit-transform: translateY(50px);
	-moz-transform: translateY(50px);
	-ms-transform: translateY(50px);
	-o-transform: translateY(50px);
	transform: translateY(50px);
}


.bottom-navi a{
	font-size: 16px;
	line-height: 19px;
	display: inline-block;
	position: relative;
	width: 100%;
}
.bottom-navi .tel-fix {
	padding: 24px 0 24px;
	position: relative;
	text-align: center;
	width: 50%;
	float: left;
	background: #3a68b3;
}
.bottom-navi .tel-fix::before {
	transform: translateY(-50%);
	content:"";
	top: 50%;
	left: 7%;
	position:absolute;
	background:url("../images/shared/icon-phone.png") no-repeat center top;
	width:19px;
	height:19px;
}


.bottom-navi .map {
	position: relative;
	padding: 24px 0 24px;
	width: 50%;
	float: left;
	padding-left: 0;
	background: #b3dc01;
}


.bottom-navi .map a{
	position: relative;
	top: 0;
	left: auto;
	font-size: 13px;
}

.bottom-navi .map a::before{
	content:"";
	top:0;
	left: 14%;
	right:0;
	bottom:0;
	position:absolute;
	background: url("../images/shared/icon-mail.png") no-repeat center top;
	width: 22px;
	height: 20px;
}

.nav-fixed .icon-location-1:before{
	content: '\e80c';
	font-size: 16px;
	left: 50%;
	transform: translateX(-50%);
	top: 5px;
	position: absolute;
}

.bottom-navi #pagetop{
	/* padding: 24px 0 24px; */
	position: relative;
	opacity: 1;
	visibility: visible;
	width: 20%;
	float: right;
	padding-left: 0;
	background: #000;
	min-height: 88px;
	top: 0;
	right: 0;
}

.bottom-navi #pagetop .arrow-up {
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
	position: absolute;
	text-align: center;
	width: 0;
	height: 0;
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	border-bottom: 20px solid white;
}



/*=============================================
* <section>
*=============================================*/

section {
}



/*=============================================
* #socialbuttons
*=============================================*/

#socialbuttons {
}



/*=============================================
* <footer>
*=============================================*/

footer {
}
footer .logo {
}
footer .tel {
}
footer nav {
	font-size: 13px;
	text-align: center;
}

footer .wrap-logo{
	padding-top: 100px;
	padding-bottom: 30px;
}


footer .wrap-logo a{
	float: left;
	display: inline-block;
	margin-right: 30px;
	padding-bottom: 20px;
}

footer .wrap-logo a.clear{
	clear: both;
}

footer .wrap{
	width: 1100px;
}

footer .navi-1{
	font-size: 13px;
	padding-bottom: 10px;
}
footer nav > a {
	padding-left: 15px;
}
footer nav > a + a:before {
	content: "\7C";
	padding-right: 15px;
}
/*=============================================
* copyright
*=============================================*/

address {
	margin-top: 30px;
	padding: 15px 0;
	background: #3A68B3;
	text-align: center;
	font-size: 12px;
	color: #FFF;
}





/*=============================================
* responsive
* responsive
* responsive
* responsive
* responsive
*=============================================*/

@media (max-width:1200px) {
	header .top .nav-fl a {
		
	}

	header .top .nav-fl a img{
		width: 100%;
	}


	header .nav-fl a:first-child{
		margin-left: 0;
	}

	header .nav-fl a:last-child{
		margin-right: 0;
	}

	.wrap{
		margin: 0 2%;
		width: auto;
	}


	footer .wrap{
		width: auto;
	}

	footer .wrap-logo a{
		margin-right: 0;
		text-align: center;
	}

	footer .wrap-logo a img{
		width: 60%;
		height: auto;
		margin: auto;
		text-align: center;
	}

	footer .wrap-logo a:nth-child(even){
		float: right !important;
		clear: unset;
		width: 50%;
	}

	footer .wrap-logo a:nth-child(odd){
		float: left !important;
		width: 50%;
	}	

	footer .wrap-logo a.clear{
		clear: unset !important;
	}	
}



@media (max-width: 1024px) {
	header .nav-fl a:last-child{
		margin-right: -50px;
	}
}



@media (max-width: 979px){
	
	footer {
		padding-bottom: 80px;
	}
	header .nav-fixed.fixed{
		opacity: 1;
		visibility: visible;
		cursor: pointer;
		width: 100%;
		background: rgb(230, 230, 230);
		bottom: 0;
		left: 0;
		right: auto;
		top: auto;
	}
	header .top{
		text-align: center;
		height: auto;
		min-height: auto;
		padding: 3% 0;
	}
	header .top .nav-fl {
		display: none;
	}

	header .tel {
		display: none;
	}
	header .contact {
		display: none;
	}


	#trigger-overlay {
		visibility: visible;
		opacity: 1;
	}


	.bottom-navi.fixed{
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
		z-index: 66;
		visibility: visible;
		width: 100%;
		bottom: 0;
		display: inline-block;
		top: auto;
		height: 78px;
	}

	.bottom-navi .tel-fix::before{
		left: 23%;
	}

	.bottom-navi .map a::before{
		left: 28%;
	}

}


@media (max-width: 979px) and (min-width: 767px){
	#sec1 .tit{

	}

	.wrap-resp{
		width: auto;
		-ms-overflow: hidden;
		overflow: hidden;
	}

}


@media (max-width: 960px) {
	footer nav{
		display: none;
		font-size: 0.7rem !important;
	}
}

@media (max-width: 766px){
	body{
		font-size: 10px;
	}

	.ttl{
		position: static;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
	}

	.tit{
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: auto !important;
		margin-bottom: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important; 
	}

	.img-s{
		text-align: center;
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
	}

	.wrap-box-s{
		margin: auto !important;
	}

	.wrap{
		margin: 0 2%;
		width: auto;
	}


	.wrap-resp{
		width: auto;	
	}


	.sp-viewer{
		display: block;
	}

	.txt{
		width: auto !important;
		font-size: 1rem !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: auto !important;
		margin-bottom: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.txt > span{
		font-size: 1.4rem !important;
	}



	.title{
		text-align: center !important;
		font-size: 1.7rem !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.title-b::before {
		content: "";
		left: 30px;
		bottom: -14px;
		position: absolute;
		background: #250D7F;
		width: 93%;
		height: 2px;
	}

	.list{
		width: auto !important;
		margin: 0 2%;
	}

	.list dt{
		letter-spacing: 0;
		font-size: 1rem !important;
	}

	.list dd{
		font-size: 1.1rem !important;
	}


	.menu{
		width: auto !important;
		margin: 0 6%;
	}

	.menu dt{
		letter-spacing: 0;
		font-size: 1.3rem !important;
	}

	.menu dd{
		font-size: 1rem !important;
	}






	header .top {
		padding: 5% 0;
		text-align: center;
		min-height: auto;
		position: relative;
	}

	footer .wrap-logo a img{
		width: 80%;
		height: auto;
		margin: auto;
		text-align: center;
	}


	.bottom-navi .tel-fix,
	.bottom-navi .map{
		font-size: 1rem;
	}

	

}



@media (max-width: 550px) {
	#key .key-txt img{
		width: 110px;
		height: auto;
	}


	#key {
	    overflow: hidden;
	    min-height: 400px;
	}


	#key .key-sp{
		display: block;
	}
	.bottom-navi .tel-fix::before{
		left: 9%;
	}

	.bottom-navi .map a::before{
		left: 17%;
	}

	.bottom-navi .map a{
		text-indent: 15px;
	}

	
	header .top{
		text-align: left;
		/* margin-top: -8px; */
		/* margin-bottom: -7px; */
		padding: 0;
	}

	header .top .wrap{
		margin: 0;
	}

	header .logo img{
		width: 300px;
		height: auto;
	}
	#trigger-overlay{
	    top: -8px;
	    right: -14px;
	}
}


@media (max-width: 390px) {

	.bottom-navi .tel-fix{
		text-indent: 6%;
	}
	.bottom-navi .tel-fix::before{
		left: 7%;
	}

	.bottom-navi .map a::before{
		left: 10%;
	}

	.bottom-navi .map a{
		text-indent: 10%;
		font-size: 1rem;
	}
}


@media (max-width: 350px) { /* Mobile - Small */
	header .top .logo img{
		width: 260px;
		height: auto;
	}

}





body.nav--opened,
body.nav--opened *,
body.nav--opened *:hover,
body.nav--opened *:focus,
body.nav--opened *:active {
	cursor: none !important;
	touch-action: none !important;
	pointer-events: none !important;
}
body.nav--opened .navBtn,
body.nav--opened #menu_toggle,
body.nav--opened #menu_toggle * {
	touch-action: auto !important;
	pointer-events: visible !important;
}