@charset "UTF-8";
@media screen and (max-width : 1260px) {
	.pc { display: none !important; }
	.is-animation #gNav { top: 0 !important; }
	img { max-width: 100%; }
}
@media screen and (min-width : 1259px) {
	.sp { display: none !important; }
}

a {
	color: #005AAB;
	transition: all 0.3s ease;
	text-decoration: none;
}
a:hover {
	opacity: 0.6;
}
.inner {
	width: 1100px;
	margin: 0 auto;
	padding: 0;
	 box-sizing: border-box;
}


/* header */
#header { position: fixed; top: 0; width: 100%; height: 90px; z-index: 20; transition: .3s; display: flex; justify-content: right; background: #FFFE; }
#header #headerLogo a { display: block; background: url(../img/common/hd_logo.png) left no-repeat; background-size: 50px; line-height: 50px; position: absolute; top: 20px; left: 30px; padding: 0 0 0 60px; font-size: 30px; font-weight: 900; color: #1A1A1A; }
#header #headerLogo a span { font-size: 16px; font-weight: bold; margin-left: 10px; }


#header ul.pcnav { display: flex; }
#header ul.pcnav li { }
#header ul.pcnav li a { display: block; padding: 15px 30px; background: #D9E6EF; text-align: center; position: relative; }
#header ul.pcnav li a b { display: block; font-size: 32px; line-height: 40px; font-weight: 900; color: #005BAB; }
#header ul.pcnav li a b i { font-size: 24px; color: #005BABCC; }
#header ul.pcnav li a span { display: block; font-size: 12px; font-weight: normal; line-height: 20px; color: #1A1A1A; }

#header ul.pcnav li.job a { width: 200px; padding: 0; background: #005BAB; font-size: 16px; line-height: 90px; color: #FFF; }
#header ul.pcnav li.job a i { position: absolute; right: 20px; line-height: 90px; }
#header ul.pcnav li.entry a { width: 200px; padding: 0; background: #ED1F1D; font-size: 16px; line-height: 90px; color: #FFF; }
#header ul.pcnav li.entry a i { position: absolute; right: 20px; line-height: 90px; }



#header ul.btnav { position: fixed; top: 180px; right: 0; }
#header ul.btnav li a { background: #005BAB; display: block; color :#FFF; width: 60px; font-size: 16px; box-sizing: border-box; text-align: center; padding: 20px 0; box-sizing: border-box; writing-mode: vertical-rl; line-height: 60px; box-shadow: 0 0 5px #0003; }
#header ul.btnav li.entry a { background: #ED1F1D; }
#header ul.btnav li a i { font-size: 20px; margin: 0 0 5px; }
#header ul.btnav li a:hover { opacity: 0.8; }
#header ul.mnnav {}


/* navi */
#header #menu{
	display: block;
	background: #221717;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
}
#header #menu p {
	width: 100%;
	color: #FFF;
	font-size: 11px;
	font-weight: normal;
	line-height: 15px;
	text-align: center;
	margin-top: 15px;
}
.menu1,
.menu1 span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.menu1 {
	position: relative;
	width: 80px;
	height: 80px;
}
.menu1 span {
	position: absolute;
	left: 0;
	width: 40%;
	height: 3px;
	left:30%;
	background-color: #fff;
}
.menu1 span:nth-of-type(1) {
	top: 35px;
}
.menu1 span:nth-of-type(2) {
	top: 45px;
}
.menu1 span:nth-of-type(3) {
	bottom: 22px;
}
.menu1.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
.menu1.active span:nth-of-type(2) {
	opacity: 0;
}
.menu1.active span:nth-of-type(3) {
	-webkit-transform: translateY(-10px) rotate(45deg);
	transform: translateY(-10px) rotate(45deg);
}


/* gnav */
#gnav { }
#gnav ul.pc { display: flex; justify-content: right; }
#gnav ul.pc li { padding: 0 30px 0 0; position: relative; }
#gnav ul.pc li a { display: block; font-size: 16px; font-weight: bold; color: #1A1A1A; line-height: 90px; }

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

}

#gnav.open { opacity: 1; transition: all 0.25s; transform: translate(0); }
@keyframes slide-in {
	50% {
		opacity: 0;
		transform: translateX(-10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

#gnav.close { opacity: 1; animation: fade-out 0.25s ease-out forwards; }
@keyframes fade-out {
	100% {
		opacity: 0;
	}
}


#gnav ul.list li {
	font-size: 16px;
	font-weight: 700;
	position: relative;
	border:none !important;
	float: none;
}
#gnav ul.list li a {
	display: block;
	width: 100%;
	height: auto;
	padding:10px;
	font-size:1em;
	border:none;
	border-bottom:solid 1px #EDEDED;
	box-sizing: border-box;
	text-align: left;
	color: #221717;
}
#gnav ul.list li li {
	font-size: 14px;
	font-weight: normal;
}
#gnav ul.list li li a {
	display: block;
	width: 100%;
	height: auto;
	padding:5px 20px;
	font-size:1em;
	border:none;
	border-bottom:solid 1px #EDEDED;
	box-sizing: border-box;
	text-align: left;
	color: #221717;
}
#gnav ul.list li a:hover {
	background: #DBE000;
	border-radius: 5px;
}


#gnav ul.btn {
  	display: block;
	text-align: left;
	padding: 15px 25px 0;
	float: left;
	border: none;

}
#gnav ul.btn li {
	border: none;
	margin: 0 10px 0 0;
}
#gnav ul.btn li a {
	border: solid 1px #EDEDED;
}

/* sub */
#gnav ul.pc ul.sub {
	position: absolute;
	visibility: hidden;
	top: 15px;
	left: 25px;
	opacity: 0;
	z-index: 20;
	background: #FFFE;
	transition: all .3s ease;
	box-shadow: 0 0 10px #0001;
}

#gnav ul.pc ul.sub li {
	padding: 0;
	border-bottom: 1px solid #E6E6E6;
}
#gnav ul.pc ul.sub li:last-child {
	border-bottom: none;
}

#gnav ul.pc ul.sub li a {
	font-size: 16px;
	font-weight: normal;
	line-height: 40px;
	padding: 0 15px;
	white-space: nowrap;
}
#gnav ul.pc ul.sub li a i {
	margin: 0 0 0 5px;
	font-size: 12px;
}

#gnav ul.pc ul.sub li a:hover {
	background: #EE771C;
	color: #FFF;
	opacity: 1;
}
#gnav ul.pc li:hover ul.sub {
	top: 25px;
	visibility: visible;
	opacity: 1;
}

/* bottom */
#bottom { width:100%; float: left; padding: 160px 0 80px; }
.bottomBtn { }
.bottomBtn figure { text-align: center; }
.bottomBtn h3 { font-size: 36px; font-weight: 900; line-height: 50px; text-align: center; padding: 20px 0; }
.bottomBtn p { font-size: 16px; line-height: 30px; text-align: center; }
.bottomBtn ul { width: 1260px; margin: 60px auto 0; display: flex; justify-content: center; }
.bottomBtn ul li { margin: 0 20px; }
.bottomBtn li a { width: 420px; height: 80px; display: block; color: #FFF; border-radius: 40px; text-align: center; line-height: 80px; font-size: 24px; padding: 0 40px; box-sizing: border-box; }
.bottomBtn li a span+i { float: right; line-height: 80px; }
.bottomBtn li.contact a { background: linear-gradient(to right, #E60012, #CF0001); }
.bottomBtn li.tel a { background: linear-gradient(to right, #005BAB, #002073); }


/* footer */
#footer { width:100%; float: left; background: #EBF2F7; }
#footer .inner { position: relative; display: flex; justify-content: space-around; padding: 80px 0; }

.footerInfo { }
.footerInfo #footerLogo { margin: 0 0 20px; }
.footerInfo #footerLogo a { display: block; background: url(../img/common/ft_logo.png) left no-repeat; background-size: 50px; line-height: 50px; padding: 0 0 0 60px; font-size: 30px; font-weight: 900; color: #1A1A1A; }

.footerInfo p { font-size: 36px; font-weight: 900; margin: 0 0 10px; }
.footerInfo p a { color: #005BAB; }
.footerInfo p a i { font-size: 28px; color: #005BABCC; }

.footerInfo ul.pcnav { }
.footerInfo ul.pcnav li { font-size: 16px; line-height: 30px; }
.footerInfo ul.pcnav li b { font-size: 20px; }

.footerNavi { display: flex; justify-content: end; align-items: start; }
.footerNavi a { color: #1A1A1A; }

.footerNavi ul { padding: 0 0 0 60px; }
.footerNavi li { font-size: 16px; font-weight: 700; line-height: 30px; padding: 0 0 15px; }
.footerNavi li ul { padding: 0; }
.footerNavi li ul+ul { }
.footerNavi li ul li { margin: 0 0 0 2em; padding: 0; font-weight: normal; list-style: disc; }


.footerCopyright { background: #FFF; text-align: center; clear: both; font-size: 14px; line-height: 80px; }
.footerCopyright a { color: #1A1A1A; }

.pagetop a { font-size: 20px; background: #005BAB33; color: #FFF; text-align: center; line-height: 80px; width: 80px; display: block; position: fixed; bottom: 0; right: 0; }
.pagetop a:hover { background: #005BAB; opacity: 1; }



/* //////////////////////////////////////// SMARTPHONE  //////////////////////////////////////// */
@media only screen and (max-width: 1260px) {
	#header { height: 70px; position: fixed; top: 0; background: #FFF; }
	#header #headerLogo { position: absolute; top: 0; left: 0;  z-index: 9999; height: 70px; background: #FFF; border-bottom: solid 1px #E6E6E6; }

	#header #headerLogo a { width: 220px; height: 50px; top: 10px; left: 10px; background: url(../img/common/hd_logo.png) no-repeat; background-size: contain; }
	#header.recruit #headerLogo a { width: 270px; }

	.inner { width: 100%; }

	/* navi */
	.menu1 { width: 70px; height: 70px; }
	.menu1 span { width: 40%; height: 3px; left:30%; }
	.menu1 span:nth-of-type(1) { top: 32px; }
	.menu1 span:nth-of-type(2) { top: 40px; }
	.menu1 span:nth-of-type(3) { bottom: 18px; }
	.menu1.active span:nth-of-type(1) { -webkit-transform: translateY(7px) rotate(-45deg); transform: translateY(7px) rotate(-45deg); }
	.menu1.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg); }




	/* gnav */
	#gnav{ float: none; width: 100%; max-width: 400px; height: 100%; position: fixed; top: 0; right: 0; z-index: 9998; opacity: 0; transition: all 0.25s; transform: translate(100%,-100%); background: #FAFAFAFA; padding: 70px 0 0; display: block; overflow-y: auto; box-sizing: border-box; }
	#gnav ul { display: block; text-align: left; clear: both; float: none; border: none; padding:0; margin: 0 15px; }
	#gnav.open ul { transform: translateX(-10%); opacity: 0; animation: slide-in 0.5s ease-out forwards; }
	#gnav ul li { font-size: 18px; line-height: 20px; border-top: solid 1px #E6E6E6; }
	#gnav ul li a { display: block; color: #221717; padding: 10px 0; }
	#gnav ul li ul { margin: 0; }
	#gnav ul li li { font-size: 14px; line-height: 15px; }
	#gnav ul li li a { padding: 10px; }
	#gnav ul li li a i { margin: 0 0 0 5px; font-size: 10px; }



	#header ul.btnav { position: static; display: flex; padding: 0 10px; margin: 15px 0; }
	#header ul.btnav li { width: 100%; margin: 0 5px; }

	#header ul.btnav li a { background: #005BAB; display: block; color :#FFF; width: 100%; height: 70px; font-size: 14px; box-sizing: border-box; text-align: center; padding: 10px 0 0; box-sizing: border-box; border-radius: 6px; opacity: 1; writing-mode: initial; box-shadow: none; line-height: 20px; }
	#header ul.btnav li a i { display: block; font-size: 24px; margin: 0 0 5px; }
	#header ul.btnav li a:hover { opacity: 1; }

	/* bottom */
	#bottom { padding: 80px 0; }

	.bottomBtn { }
	.bottomBtn figure { }
	.bottomBtn h3 { font-size: 32px; }
	.bottomBtn p { }
	.bottomBtn ul { width: 100%; margin: 30px auto 0; flex-wrap: wrap; }
	.bottomBtn ul li { margin: 30px 20px 0; }
	.bottomBtn li a { width: 400px; }
	.bottomBtn li a span+i { }
	.bottomBtn li.contact a { }
	.bottomBtn li.tel a { }


	/* footer */
	.footerBtn h3 { width: 100%; margin: 30px auto; }

	.footerBtn ul { width: 100%; }
	.footerBtn ul li { }
	.footerBtn ul li a { width: 320px; height: 160px; }

	.footerNavi { display: none; }

	.footerInfo { text-align: center; }
	.footerInfo .inner { padding: 60px 0; }
	.footerInfo #footerLogo { }
	.footerInfo #footerLogo a { width: 180px; text-align: right; margin: 0 auto; }

	.footerInfo ul.pcnav { margin: 0 15px; }
	.footerInfo ul.pcnav li { font-size: 16px; line-height: 25px; }
	.footerInfo ul.pcnav li b { }
	.footerInfo ul.pcnav li a { }

	.footerCopyright { padding: 15px 0; font-size: 12px; line-height: 15px; }
	.footerCopyright a { }
}
@media only screen and (max-width: 520px) {
	#header.recruit #headerLogo a { width: 220px; line-height: 30px; }
	#header.recruit #headerLogo a span {display: block; line-height: 20px; margin-left: 0; }

	/* bottom */
	#bottom { padding: 40px 20px; box-sizing: border-box; }
	.bottomBtn h3 { font-size: 24px; line-height: 40px; }
	.bottomBtn h3 br { display: none; }
	.bottomBtn ul { display: flex; margin: 0 auto; }
	.bottomBtn ul li { margin: 20px 0 0; }
	.bottomBtn li a { width: 300px; padding: 0 15px; height: 60px; line-height: 60px; font-size: 20px; }
	.bottomBtn li a span+i { line-height: 60px; }
	.bottomBtn li.contact a { }
	.bottomBtn li.tel a { }

	/* footer */

	#footer { padding: 0; }
	#footer .inner { padding: 30px 0; }
	.footerBtn h3 { width: 100%; margin: 0 auto; font-size: 24px; line-height: 30px; }
	.footerBtn h3 span { font-size: 16px; line-height: 20px; }

	.footerBtn ul { width: 100%; margin: 0 auto; padding: 0 15px; display: block; box-sizing: border-box; }
	.footerBtn ul li { width: 100%; margin: 30px 0 0; }
	.footerBtn ul li a { width: 300px; height: 150px; margin: 0 auto; }

	.footerInfo .inner { padding: 30px 0; }

	.footerCopyright { padding: 15px 70px 15px 15px; font-size: 12px; line-height: 15px; text-align: left; }
	.footerCopyright a { }

	.pagetop a { line-height: 60px; width: 60px; }


}


/* recruit */
.topInformation { width: 100%; margin: 120px 0 0; padding: 120px 0 0; float: left; border-top: solid 2px #EDEDED; }
.topInformation h3 { font-size: 40px; line-height: 60px; position: relative; text-align: center; }
.topInformation h3:after { content: ""; border-bottom: solid 2px #005BAB; width: 40px; position: absolute; bottom: 40px; margin-left: -20px; }
.topInformation h3 span { display: block; color: #005BAB; font-size: 20px; line-height: 40px; }
.topInformation ul { display: flex; justify-content: space-around; margin: 60px 0 0; }
.topInformation ul li a { display: block; width: 520px; background: #E5EEF6; text-align: center; padding: 40px 0; }
.topInformation ul li a figure { height: 80px; display: flex; align-items: center; justify-content: center; }
.topInformation ul li a h4 { font-size: 20px; line-height: 40px; }

.topAccess { width: 100%; margin: 0; padding: 120px 0 0; float: left; }
.topAccess h3 { font-size: 40px; line-height: 60px; position: relative; text-align: center; margin: 0 0 60px; }
.recruit ~ .topAccess h3:after { content: ""; border-bottom: solid 2px #005BAB; width: 40px; position: absolute; bottom: 40px; margin-left: -20px; }
.topAccess h3 span { display: block; color: #005BAB; font-size: 20px; line-height: 40px; }

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

	.topInformation { margin: 80px 0 0; padding: 80px 0 0; }
	.topInformation h3 { }
	.topInformation h3:after { }
	.topInformation h3 span { }
	.topInformation ul { margin: 60px 0 0; justify-content: center; }
	.topInformation ul li { margin: 0 15px; }
	.topInformation ul li a { width: 300px; padding: 30px 0; }
	.topInformation ul li a figure { }
	.topInformation ul li a h4 { }

	.topAccess { padding: 80px 0 0; }
	.topAccess h3 { }
	.topAccess h3:after { }
	.topAccess h3 span { }

}


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

	.topInformation { }
	.topInformation h3 { }
	.topInformation h3:after { }
	.topInformation h3 span { }
	.topInformation ul { display: block; margin: 0; }
	.topInformation ul li { margin: 40px 20px 0; }
	.topInformation ul li a { width: 100%; padding: 20px 0; }
	.topInformation ul li a figure { height: 80px; display: flex; align-items: center; justify-content: center; }
	.topInformation ul li a h4 { font-size: 20px; line-height: 40px; }

	.topAccess { }
	.topAccess h3 { }
	.topAccess h3:after { }
	.topAccess h3 span { }

}