@charset "utf-8";

/*

Theme Name: 株式会社キーシステム

Author: Kotaro Saito

Description:  株式会社キーシステム のテーマ

version: 1.0.0

*/



/*common

-----------------------------------------------------------------------------------------*/

html,body{

	width: 100%;

	margin: 0 auto;

	padding: 0;

	text-align: center;

	font-family: "Zen Kaku Gothic Antique", sans-serif;

	font-size: 16px;

	color: rgba(60, 60, 60, 1);

}



.font-montserrat {

  font-family: "Montserrat", sans-serif;

}



.font-roboto {

  font-family: "Roboto Slab", serif;

}



@media screen and (min-width:768px) {

.sp{

	display: none;

}

}



@media screen and (max-width:767px) {

.pc{

	display: none;

}



html,body{

	font-size: 14px;

}

}





/*header

-----------------------------------------------------------------------------------------*/

.header-top{

	position: fixed;

	top: 0;

	z-index: 999;

	width: 100%;

	border-bottom: 1px solid rgba(255, 255, 255, 1);

	box-shadow: 1px 1px 3px rgba(29, 64, 111, 0.45);

	height: 100px;

}



.logo-img{

	width: 100px;

	margin: 10px auto 10px 50px;

}



.header-top::after{

	position: absolute;

	content: '';

	top: 0;

	right: 100px;

	width: 1px;

	height: 1000px;

	background-color: rgba(255, 255, 255, 1);

	box-shadow: 1px 1px 3px rgba(29, 64, 111, 0.45);

}



button.drawer-hamburger{

	width: 50px;

	padding-top: 40px;

}



.drawer--right button.drawer-hamburger, .drawer--right.drawer-open .drawer-nav, .drawer--right.drawer-open .drawer-navbar button.drawer-hamburger {

    right: 13px;

}



span.drawer-hamburger-icon, span.drawer-hamburger-icon:after, span.drawer-hamburger-icon:before{

	background-color: rgba(255, 255, 255, 1);

	box-shadow: 1px 1px 3px rgba(29, 64, 111, 0.45);

}



span.drawer-hamburger-icon:after{ 

	top: 15px;

}



span.drawer-hamburger-icon:before {

	top: -15px;

}



	.drawer-open .drawer-hamburger-icon {

		box-shadow: none;

	}





.drawer--right.drawer-open button.drawer-hamburger {

	right: 13px;

}



nav.drawer-nav{

	background-color: transparent;

	width: 790px;

}



.drawer--right nav.drawer-nav {

    right: -790px;

}



.drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-nav, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {

    right: 90px;

}



.drawer-menu{

	gap: 80px;

	align-items: center;

}



.header-link{

	color: rgba(255, 255, 255, 1);

	font-size: 1.4rem;

	text-shadow: 1px 1px 3px rgba(29, 64, 111, 0.45);

}



.header-contact{

	width: 350px;

	background-color: rgba(255, 255, 255, 1);

	color: rgba(30, 102, 196, 1);

	font-size: 1.4rem;

	height: 99px;

	display: block;

	padding-top: 30px;

}



.logo-contact{

	width: 25px;

	display: inline-block;

	margin-left: 25px;

}



.logo-contact-white{

	display: none;

	width: 25px;

	margin-left: 25px;



}



.header-contact:hover .logo-contact-white{

	display: inline-block;

}



.header-contact:hover .logo-contact{

	display: none;

}





.header-menu{

	color: rgba(30, 102, 196, 1);

	margin-bottom: 20px;

	display: inline-block;

}



.header-link:hover{

	color: rgba(30, 102, 196, 1);

}



.drop_menu{

	position: relative;

}



.child_menu{

	position: absolute;

	display: none;

	transition: .6s;

	padding-bottom: 50px;

}

/* ホバー時 */

.drop_menu:hover .child_menu {

	transition: .6s;

	display: block;

	background-color: rgba(255, 255, 255, 1);

	width: 200px;

	left: -30px;

	top: 100%;

	text-align: left;

	padding: 20px 15px 0;

	border: 1px solid rgba(30, 102, 196, 1);

	font-size: 1rem;

	text-shadow: none;

}



.header-sp{

	display: none;

}



@media screen and (max-width:1023px) {

	.logo-img{

		margin-left: 30px;

	}



	.drawer-menu {

		gap: 30px;

	}



	.header-contact {

		width: 250px;

	}



	nav.drawer-nav {

		width: 590px;

	}

}







@media screen and (max-width:767px) {



	button.drawer-hamburger {

		padding-top: 20px;

	}



	.header-top::after{

		display: none;

	}



	.header-top{

		height: 70px;

		background-color: rgba(255, 255, 255, 1);

	}



	.logo-img{

		width: 70px;

		margin: 7px auto 5px 30px;

	}



	span.drawer-hamburger-icon, span.drawer-hamburger-icon:after, span.drawer-hamburger-icon:before{

		background-color: rgba(30, 102, 196, 1);

	}



	nav.drawer-nav{

		background-color: rgba(229, 245, 253, 1);

		width: 300px;

	}



	.drawer-menu{

		display: block;

	}



	.header-pc{

		display: none;

	}



	.header-sp{

		display: block;

	}



	.header-sp-link{

		font-size: 20px;

		color: rgba(30, 102, 196, 1);

		text-align: left;

		display: block;

		margin-bottom: 20px;

	}



	.drawer--right nav.drawer-nav {

		padding: 100px 30px 0;

	}



	.header-contact {

		width: 240px;

		height: 70px;

		padding-top: 25px;

		font-size: 20px;

	}



	.header-sp-link2{

		margin-bottom: 5px;

	}

}



/*footer

-----------------------------------------------------------------------------------------*/

div.copy-right{

	padding: 35px 0;

	color: rgba(255, 255, 255, 1);

	background-color: rgba(30, 102, 196, 1);

}



.footer-box{

	justify-content: space-between;

	align-items: center;



}



.footer-flex{

	gap: 50px;

}



.footer-logo{

	width: 330px;

}



.footer-link{

	color: rgba(255, 255, 255, 1);

}



@media screen and (max-width:1023px) {

	.footer-logo {

		width: 300px;

	}



	.footer-flex {

		gap: 20px;

	}



}

@media screen and (max-width:767px) {

	div.copy-right {

    padding: 15px 0;

	}



	.footer-logo {

		margin-bottom: 10px;

		width: 250px;

	}

}







/*single

-----------------------------------------------------------------------------------------*/



@media screen and (max-width:767px) {

}





/*404

-----------------------------------------------------------------------------------------*/

div.error-message{

	font-size: 150%;

}



@media screen and (max-width:767px) {

div.error-message{

	font-size: 120%;

}

}