@charset "UTF-8";
/* CSS Document */

html { width: 100%;height: 100%;margin: 0;	padding: 0;} 
body{width:100%;height: 100%;margin:0;padding:0; -webkit-text-size-adjust: 100%;font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;-webkit-text-size-adjust: 100%;}
body.fixed {	position: fixed;height: 100vh;}
.clearfix:after {	content: "";	clear: both;	display: block;}
:hover{-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all  0.3s ease;}
.mincho{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

#page-top{ display:block;width:74px;height:56px;padding-top:18px; font-size:24px;text-align: center;text-decoration: none; color:white;position:fixed;right:20px;bottom:20px;background:#000e3d;border-radius: 37px;border: 2px solid white;z-index: 9999;}
#page-top:hover{background:#71abc1;}

@media screen and (min-width:1051px) {
    header {width: 100%;height:156px; margin: 0 auto;}
    
    header article{width: 100%;height:156px;margin: 0 auto;position: fixed;top:0;left: 0;background: white; z-index: 99}
    
    header article section{position: relative;width: 100%; height:156px;margin: 0 auto;padding:0px 0;}
    
    header article section #title{position:absolute;top:0;left: 0;width:100%; margin: 0;padding: 0;}
    header article section #title div{position: relative;width: 1000px; height:100px;margin: 0 auto;}
    header article section #title div h1{position:absolute;top:30px;left: 0;width:320px;margin: 0;padding:0px 0 0px 0;}
    header article section #title div h1 img{width:100%;}
    header article section #title div h1:hover{opacity: 0.5}    
    header article section #title div address{position:absolute;top:25px;right:310px;width:400px;margin: 0;padding:0px 0 0px 0;font-style: normal;text-align: right;font-size: 13px;letter-spacing:1px;}
    header article section #title div #recruit{position:absolute;top:10px;right:125px;width:170px;margin: 0;padding:8px 0;background:#808466;text-align: center;font-size: 16px;letter-spacing: 1px;text-decoration: none;color:white;}
    header article section #title div #recruit:hover{background:#71abc1;color: white}
    header article section #title div #contact{position:absolute;top:55px;right:125px;width:170px;margin: 0;padding:8px 0;background:#eaeadb;text-align: center;font-size: 16px;letter-spacing: 1px;text-decoration: none;color: #231815;}
    header article section #title div #contact .fa-envelope{color:#abad9b;padding-right:  5px}
    header article section #title div #contact:hover{background:#71abc1;color: white}
    header article section #title div #tel{position:absolute;top:50px;right:310px;width:220px;margin: 0;padding:0px 0 0px 0;text-align: center;text-align: center;font-size: 24px;letter-spacing:1px;text-decoration: none;color: #231815;}
    header article section #title div #tel::before{content:'';display: inline-block;width: 30px;height: 25px; margin: 0 5px 0 0;padding: 0 ; background: url("../img/tel.png") no-repeat;background-position: 50% 50%;background-size: auto 100%;}
    a[href^="tel:"]{    pointer-events: none;/*PC版での電話リンクなし*/  }
	header article section #title div #recruit_exclusive{position:absolute;top:10px;right:0%;display:block;width:120px;margin:0;padding:14px 0px;text-align: center;font-size:24px;letter-spacing:2px;text-decoration: none;color:white;background:url("../img/recruit_exclusive.jpg") no-repeat;background-size:cover;font-family: "anton", sans-serif;font-weight: 400;font-style: normal;}
	header article section #title div #recruit_exclusive span{display:block;font-size:13px;letter-spacing:0px;}
	header article section #title div #recruit_exclusive:hover{background:#71abc1;color: white}
    
    .button {display: none}   
    
    header article section nav{position:absolute;bottom:0;left: 0;width:100%; margin: 0;padding: 0;background: #000e3d}
                
    header article section nav ul{width:1000px;  margin: 0 auto;padding: 0;list-style: none;text-align: center;}
    header article section nav ul li{display:inline-block;height: 56px;margin: 0 0 0 0px;padding: 0;/*float: left;*/}
    header article section nav ul li a{display: block;height: 26px;padding: 15px 20px; text-align:center;color: white;font-size: 18px;letter-spacing: 2px;text-decoration: none;}
    header article section nav ul li a:hover{background:#71abc1;}
    
    footer{width: 100%; margin: 0 auto;}
    footer #contact{width: 100%; margin: 0 auto;background: #000034;padding: 60px 0;}
    footer #contact h6{  margin: 0 auto 30px auto;padding: 0;text-align: center;color:white;font-weight: normal;font-size: 32px;letter-spacing: 2px;}
    footer #contact section{width:900px;  margin: 0 auto;padding: 0;text-align: center;}
    footer #contact section #tel{width:448px;  margin: 0;padding: 0;border-right: 1px solid white;text-align: center;float: left;}
    footer #contact section #tel a{width:100%;margin: 0;padding:0px 0 0px 0;text-align: center;font-size: 30px;letter-spacing:5px;text-decoration: none;color:white;}
    footer #contact section #tel a::before{content:'';display: inline-block;width: 40px;height: 35px; margin: 0 10px 0 0;padding: 0 ; background: url("../img/tel.png") no-repeat;background-position: 50% 50%;background-size: auto 100%;}
    footer #contact section #tel p{ margin: 0;padding: 0;font-size:18px;letter-spacing:2px;color:white;}
    footer #contact section #mail{display:block;width:380px;  margin: 0;padding:20px 0; float: right;text-align: center;font-size: 22px;letter-spacing: 2px;text-decoration: none;color: #231815;background: #eaeadb;border-radius: 5px;}    
    footer #contact section #mail .fa-envelope{color:#abad9b;padding-right:  15px}
    footer #contact section #mail:hover{background:#71abc1;color: white}    
    footer #footer{width:900px;  margin: 0 auto;padding:50px 0 30px 0;text-align: center;}
    footer #footer h6{width:320px;margin: 0 auto 10px auto;padding: 0;}
    footer #footer h6 img{width:100%;}
    footer #footer address{margin: 0 auto 20px auto;padding: 0;font-size:13px;letter-spacing: 2px;line-height: 28px; text-decoration: none;font-style: normal;}
    footer #footer div{margin: 0 auto 20px auto;padding: 0;text-align: center;}
    footer #footer div a{display: inline-block;margin: 0 0;padding:2px 20px;font-size:18px;letter-spacing: 2px;text-decoration: none;color: #000034;border-right: 1px solid #000034;text-align: center;}
    footer #footer div a:last-of-type{border-right:none;}
    footer #footer div a:hover{color:#71abc1}
    footer #footer small{margin: 0 auto 0px auto;padding: 0;text-align: center;font-size:12px;letter-spacing: 1px;}
}
    
@media screen and (max-width:1050px) {
    header {width: 100%;height:80px; margin: 0 auto;}
    
    header article{width: 100%;height:80px;margin: 0 auto;background: white;position: fixed;top:0;left: 0;z-index: 999}
    
    header article section{position: relative;width: 100%; height:80px;margin: 0 auto;padding:0px 0;}
    
    header article section #title{position:absolute;top:0;left: 0;width:100%; height:80px; margin: 0;padding: 0;}
    header article section #title div{position: relative;width:100%; height:80px;margin: 0 auto;}
    header article section #title div h1{position:absolute;top:30px;left: 3%;width:30%;max-width: 320px; margin: 0;padding:0px 0 0px 0;}
    header article section #title div h1 img{width:100%;}
    header article section #title div h1:hover{opacity: 0.5}    
    header article section #title div address{display: none}
    header article section #title div #recruit{display:none;}
    header article section #title div #contact{position:absolute;top:0px;right:180px;width:40px; height:50px;margin: 0;padding:30px 0 0px 0;/*background:#eaeadb;*/text-align: center;}
    header article section #title div #contact .fa-envelope{color:#abad9b;margin: 0;padding:0px 0;font-size:25px;letter-spacing: 1px;text-decoration: none;}
    header article section #title div #contact span{display: none}
    header article section #title div #tel{position:absolute;top:0px;right:220px;width:40px;height:55px;margin: 0;padding:25px 0 0px 0;text-align: center;/*background: #71abc1;*/}
    header article section #title div #tel::before{content:'';display: inline-block;width: 26px;height:30px; margin: 0 0;padding: 0 ; background: url("../img/tel.png") no-repeat;background-position: 50% 50%;background-size:100% auto;}    
    header article section #title div #tel span{display: none}
	header article section #title div #recruit_exclusive{position:absolute;top:0px;right:80px;display:block;width:90px;height:62px; margin:0;padding:18px 0 0 0px;text-align: center;font-size:18px;letter-spacing:1px;text-decoration: none;color: white;background:url("../img/recruit_exclusive.jpg") no-repeat;background-size:cover;font-family: "anton", sans-serif;font-weight: 400;font-style: normal;}
	header article section #title div #recruit_exclusive span{display:block;font-size:9px;letter-spacing:0px;}
	header article section #title div #recruit_exclusive:hover{background:#71abc1;color: white}
    
    
    .button{display:block;/*position: fixed;*/	position: absolute;	right:0%;top:0px;width: 80px;height:80px;padding:0px 0 0 0px;margin: 0 0;text-align: center;letter-spacing: 1px; font-size:14px;color: white;background:#000e3d; cursor:pointer;} 
    .button span {display:block;position: absolute;	height:3px;border-radius: 2px;	width:50%;	background:white;right:25%;	-webkit-transition: .35s ease-in-out;	-moz-transition: .35s ease-in-out;	transition: .35s ease-in-out;}
    .button span:nth-child(1) {	top:40%;}
    .button span:nth-child(2) {	top:50%;}
    .button span:nth-child(3) {	top:60%;}    
    
    .open .button span{display:block;}
    .open .button span:nth-child(1) {	top: 50%;	-webkit-transform: rotate(45deg);	-moz-transform: rotate(45deg);	transform: rotate(45deg); }
    .open .button span:nth-child(2) {	width: 0;	left: 50%;}
    .open .button span:nth-child(3) {	top:50%;	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	transform: rotate(-45deg);}
    .open nav {	display: block;	animation-duration: 0.6s;	animation-name: fade-in;} 
        
    @keyframes fade-in { from { opacity:0.1;}        to { opacity:1;}    }
    
    header article section nav{display: none;	width: 100%;	height:100vh;	position:fixed;	top:80px;left: 0;background:rgba(0,14,61,0.8);}
    header article section nav ul{width:94%;margin:0 auto;padding:0;list-style: none;position: fixed;top: 90px;left:3%;height:75vh;overflow-y: scroll;	-webkit-overflow-scrolling: touch;	overflow-scrolling: touch;}
    header article section nav ul li{width:100%;margin: 0 auto 5px auto;font-size:18px;letter-spacing:1px;background:white;border-radius: 5px;}
    header article section nav ul li a{display: block;padding: 16px 20px;text-decoration: none;color:white;background: #000e3d;border-radius: 5px;}
    header article section nav ul li a:hover{background:#71abc1;color: white;border-radius: 5px;}
    
    footer{width: 100%; margin: 0 auto;}
    footer #contact{width: 100%; margin: 0 auto;background: #000034;padding: 30px 0;}
    footer #contact h6{  margin: 0 auto 10px auto;padding: 0;text-align: center;color:white;font-weight: normal;font-size:22px;letter-spacing: 0px;}
    footer #contact section{width:80%;  margin: 0 auto ;padding: 0;text-align: center;}
    footer #contact section > #tel{  margin: 0 auto 10px auto;padding:2px 0 6px 0;text-align: center;/*border: 1px solid #71abc1;border-radius: 5px;*/}
    footer #contact section #tel a{width:100%;margin: 0;padding:0px 0 0px 0;text-align: center;font-size: 20px;letter-spacing:2px;text-decoration: none;color:white;}
    footer #contact section #tel a::before{content:'';display: inline-block; width:22px;height: 30px; margin: 0 10px 0 0;padding: 0 ; background: url("../img/tel.png") no-repeat;background-position: 50% 100%;background-size:100% auto ;}
    footer #contact section #tel p{ margin: 0;padding: 0;font-size:14px;letter-spacing:0px;color:white;}
    footer #contact section #mail{display:block;width:100%;  margin: 0 auto;padding:20px 0;text-align: center;font-size: 20px;letter-spacing: 1px;text-decoration: none;color: #231815;background: #eaeadb;border-radius: 5px;}    
    footer #contact section #mail .fa-envelope{color:#abad9b;padding-right:  15px}
    footer #contact section #mail:hover{background:#71abc1;color: white}    
    footer #footer{width:100%;  margin: 0 auto;padding:30px 0 20px 0;text-align: center;}
    footer #footer h6{width:50%;max-width: 320px; margin: 0 auto 10px auto;padding: 0;}
    footer #footer h6 img{width:100%;}
    footer #footer address{margin: 0 auto 20px auto;padding: 0;font-size:12px;letter-spacing: 0px;line-height: 20px; text-decoration: none;font-style: normal;}
    footer #footer div{width:80%; margin: 0 auto 20px auto;padding: 0;text-align: center;}
    footer #footer div a{display: block;width:100%; margin: 0 auto 0px auto;padding:16px 0px;font-size:16px;letter-spacing: 0px;text-decoration: none;color: #000034;text-align: center;border-top: 1px solid #000034;}
    footer #footer div a:last-of-type{border-bottom: 1px solid #000034;}
    footer #footer div a:hover{color:white;background: #71abc1}
    footer #footer small{margin: 0 auto 0px auto;padding: 0;text-align: center;font-size:12px;letter-spacing: 1px;}
}