@charset "utf-8";

/*
	PC用スタイル大
*/
@media screen and (min-width: 1100px) {
	
#container { padding-top:78px; }
	
#header { width:100%; margin:0 auto; z-index:1000; position:fixed; height:78px; background:rgba(255,255,255,0.8); left:0; top:0; }
#header a:hover { text-decoration:none; }
#header-inner { }
#header .logo-group { transition:0.3s ease-in-out;  }
#header .logo-group:hover { opacity:0.7; }
#header .logo-group img { position:absolute; left:60px; top:50%; transform:translateY(-50%); width:183px; }
#header .header-gnav .nav-group { position:absolute; right:263px; top:0; white-space:nowrap; }
#header .header-gnav .nav-group .nav > ul li { list-style-type:none; margin:0 0 0 55px; padding:0; display:inline-block; line-height:78px; }
#header .header-gnav .nav-group .nav > ul li a { line-height:78px; display:inline-block; position:relative; }
#header .header-gnav .nav-group .nav > ul li.aboutus a:after,
#header .header-gnav .nav-group .nav > ul li.our-business a:after,
#header .header-gnav .nav-group .nav > ul li.recruit a:after { content:""; display:block; background:#069BF8; width:0%; height:5px; position:absolute; left:0; bottom:2px; transition:0.3s ease-in-out; }
#header .header-gnav .nav-group .nav > ul li.aboutus a:hover:after,
#header .header-gnav .nav-group .nav > ul li.our-business a:hover:after,
#header .header-gnav .nav-group .nav > ul li.recruit a:hover:after,
body.aboutus #header .header-gnav .nav-group .nav > ul li.aboutus a:after,
body.our-business #header .header-gnav .nav-group .nav > ul li.our-business a:after,
body.recruit #header .header-gnav .nav-group .nav > ul li.recruit a:after { width:100%; }
#header .header-gnav .nav-group .nav > ul li.contact a { line-height:44px; width:166px; height:44px; background:#192F53; color:#fff; text-align:center; border-radius:50px; transition:background 0.3s ease-in-out; }
#header .header-gnav .nav-group .nav > ul li.contact a:hover { background:#163C91; }
#header .header-gnav .sns { position:absolute; right:60px; top:0; height:100%; }
#header .header-gnav .sns li { display:inline-block; line-height:78px; margin:0 0 0 25px; padding:0; }
#header .header-gnav .sns li a { vertical-align:top; position:relative; display:inline-block; }
#header .header-gnav .sns li a img { vertical-align:top; transition:0.3s ease-in-out; }
#header .header-gnav .sns .facebook a { width:34.88px; top:21.67px; background:url(/zk/assets/img/common/ico_facebook_on.svg) no-repeat; background-size:contain; }
#header .header-gnav .sns .facebook a:hover img { opacity:0; }
#header .header-gnav .sns .youtube a { width:38.4px; top:25.5px; background:url(/zk/assets/img/common/ico_youtube_on.svg) no-repeat; background-size:contain; }
#header .header-gnav .sns .youtube a:hover img { opacity:0; }
	
}

/*
	PC用スタイル小
*/
@media screen and (min-width: 769px) and (max-width: 1099px) {
	
#container { padding-top:72px; }


#header .pc { display:none!important; }
#header .sp { display:block!important; }
#header img.sp { display:inline-block!important; }
#header { width:100%; margin:0 auto; z-index:1000; position:fixed; height:72px; background:#fff; left:0; top:0;  }
#header a:hover { text-decoration:none; }
#header-inner { }
#header .logo-group { transition:0.3s ease-in-out;  }
#header .logo-group:hover { opacity:0.7; }
#header .logo-group img { position:absolute; left:18px; top:19px; width:145px; }
#header .header-gnav { /* display:none; */ position:absolute; background:#fff; width:100%; height:0; top:72px; opacity:0; overflow-y:auto; pointer-events:none; transition:0.2s ease-in-out; }
#header .header-gnav.isopen { opacity:1; height:100vh; padding:0 0 80px; pointer-events:auto; /* display:block; */ }
#header #sp-menu .btn { cursor:pointer; display:block; width:34px; height:20px; position:absolute; right:26px; top:26px; transition:0.2s ease-in-out; z-index:20; }
#header #sp-menu .btn:hover { opacity:0.7 }
#header #sp-menu .btn i { width:34px; height:2px; background:#163C91; display:block; position:absolute; left:0; top:0; transform-origin: 50% 0%; transition:0.5s ease-in-out; }
#header #sp-menu .btn i:nth-child(1) { top:0px; }
#header #sp-menu .btn i:nth-child(2) { top:9px; }
#header #sp-menu .btn i:nth-child(3) { top:18px; }
#header #sp-menu.isopen .btn i { transform-origin:center center; }
#header #sp-menu.isopen .btn i:nth-child(1) { top:7px; transform:rotate(45deg); }
#header #sp-menu.isopen .btn i:nth-child(2) { opacity:0; }
#header #sp-menu.isopen .btn i:nth-child(3) { top:7px; transform: rotate(-45deg); }

#header .header-gnav .nav-group { margin:35px 0px;  }
#header .header-gnav .nav-group > .nav ul { margin:0; }
#header .header-gnav .nav-group > .nav:last-child ul { border-bottom:none; }
#header .header-gnav .nav-group > .nav li { list-style-type:none; margin:0 0 50px; padding:0; text-align:center; }
#header .header-gnav .nav-group > .nav a { color:#222; font-weight:500; transition:0.3s ease-in-out; }
#header .header-gnav .nav-group > .nav a:hover { opacity:0.7; }
#header .header-gnav .nav-group > .nav li:last-child a { border-bottom:none; }
#header .header-gnav .utils ul { display:block; text-align:center; }
#header .header-gnav .utils li { list-style-type:none; display:inline-block; margin:0 12px 0; padding:0; }
#header .header-gnav .utils li a { font-size:14px; color:#222; transition:0.3s ease-in-out; }
#header .header-gnav .utils li a:hover { opacity:0.7; }
#header .header-gnav .sns ul { display:block; text-align:center; margin-bottom:50px; }
#header .header-gnav .sns li { display:inline-block; margin:0 12px 0; padding:0; }
#header .header-gnav .sns li a { vertical-align:top; position:relative; display:inline-block; }
#header .header-gnav .sns li a img { vertical-align:top; transition:0.3s ease-in-out; }
#header .header-gnav .sns .facebook a { width:34.88px; top:1.67px; background:url(/zk/assets/img/common/ico_facebook_on.svg) no-repeat; background-size:contain; }
#header .header-gnav .sns .facebook a:hover img { opacity:0; }
#header .header-gnav .sns .youtube a { width:38.4px; top:5.5px; background:url(/zk/assets/img/common/ico_youtube_on.svg) no-repeat; background-size:contain; }
#header .header-gnav .sns .youtube a:hover img { opacity:0; }



}




/*
	SP用スタイル
*/
@media screen and (max-width: 768px) {
	
	
#container { padding-top:72px; }

#header .pc { display:none!important; }
#header .sp { display:block!important; }
#header img.sp { display:inline-block!important; }
#header { width:100%; margin:0 auto; z-index:1000; position:fixed; height:72px; background:#fff; left:0; top:0;  }
#header a:hover { text-decoration:none; }
#header-inner { }
#header .logo-group { transition:0.3s ease-in-out;  }
#header .logo-group:hover { opacity:0.7; }
#header .logo-group img { position:absolute; left:18px; top:19px; width:145px; }
#header .header-gnav { /* display:none; */ position:absolute; background:#fff; width:100%; height:0; top:72px; opacity:0; overflow-y:auto; pointer-events:none; transition:0.2s ease-in-out; }
#header .header-gnav.isopen { opacity:1; height:100vh; overflow:scroll; padding:0 0 150px; pointer-events:auto; /* display:block; */ }
#header #sp-menu .btn { cursor:pointer; display:block; width:34px; height:20px; position:absolute; right:26px; top:26px; transition:0.2s ease-in-out; z-index:20; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer; }
#header #sp-menu .btn:hover { opacity:0.7 }
#header #sp-menu .btn i { width:34px; height:2px; background:#163C91; display:block; position:absolute; left:0; top:0; transform-origin: 50% 0%; transition:0.5s ease-in-out; }
#header #sp-menu .btn i:nth-child(1) { top:0px; }
#header #sp-menu .btn i:nth-child(2) { top:9px; }
#header #sp-menu .btn i:nth-child(3) { top:18px; }
#header #sp-menu.isopen .btn i { transform-origin:center center; }
#header #sp-menu.isopen .btn i:nth-child(1) { top:7px; transform:rotate(45deg); }
#header #sp-menu.isopen .btn i:nth-child(2) { opacity:0; }
#header #sp-menu.isopen .btn i:nth-child(3) { top:7px; transform: rotate(-45deg); }

#header .header-gnav .nav-group { margin:35px 0px;  }
#header .header-gnav .nav-group > .nav ul { margin:0; }
#header .header-gnav .nav-group > .nav:last-child ul { border-bottom:none; }
#header .header-gnav .nav-group > .nav li { list-style-type:none; margin:0 0 50px; padding:0; text-align:center; }
#header .header-gnav .nav-group > .nav a { color:#222; font-weight:500; transition:0.3s ease-in-out; }
#header .header-gnav .nav-group > .nav a:hover { opacity:0.7; }
#header .header-gnav .nav-group > .nav li:last-child a { border-bottom:none; }
#header .header-gnav .utils ul { display:block; text-align:center; }
#header .header-gnav .utils li { list-style-type:none; display:inline-block; margin:0 12px 0; padding:0; }
#header .header-gnav .utils li a { font-size:14px; color:#222; transition:0.3s ease-in-out; }
#header .header-gnav .utils li a:hover { opacity:0.7; }
#header .header-gnav .sns ul { display:block; text-align:center; margin-bottom:50px; }
#header .header-gnav .sns li { display:inline-block; margin:0 12px 0; padding:0; }
#header .header-gnav .sns li a { vertical-align:top; position:relative; display:inline-block; }
#header .header-gnav .sns li a img { vertical-align:top; transition:0.3s ease-in-out; }
#header .header-gnav .sns .facebook a { width:34.88px; top:1.67px; background:url(/zk/assets/img/common/ico_facebook_on.svg) no-repeat; background-size:contain; }
#header .header-gnav .sns .facebook a:hover img { opacity:0; }
#header .header-gnav .sns .youtube a { width:38.4px; top:5.5px; background:url(/zk/assets/img/common/ico_youtube_on.svg) no-repeat; background-size:contain; }
#header .header-gnav .sns .youtube a:hover img { opacity:0; }

	
}