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

 2025.06.05

--------------------------------------------*/
/* DIN 2014 */
@import url("https://use.typekit.net/fuz1wbk.css");
/* ----------------------------------------------

 * タグの設定

---------------------------------------------- */
a {
	display: inline-block;
	outline:none;
	color: #000;
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
    transition: all .5s ease;
	user-select: none;
}
a.link {position: absolute;top: 0;left: 0;z-index: 2;width: 100%;height: 100%;}
input,
input[type="submit"],
input[type="button"],
button {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	box-sizing: border-box;
	outline: none;
	color: #000;
	font-style: normal;
	font-weight: 400;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",  "Noto Sans JP", "BIZ UDPGothic", Meiryo, sans-serif;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="button"],
input[type="text"],
input[type="submit"],
input[type="image"],
textarea {
   -webkit-appearance: none;
   appearance: none;
   border-radius: 0;
   color: #000;
}
select {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",  "Noto Sans JP", "BIZ UDPGothic", Meiryo, sans-serif;
    -webkit-appearance: none;
	 -moz-appearance: none;
    appearance: none;
}
select::-ms-expand{
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",  "Noto Sans JP", "BIZ UDPGothic", Meiryo, sans-serif;
}
/*------------------------------------------------*/
html {
	margin: 0;
	padding: 0;
	background: #fff;
	color: #000;
	font-size: 62.5%;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",  "Noto Sans JP", "BIZ UDPGothic", Meiryo, sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.7;
	-webkit-font-smoodting: antialiased;
	-moz-osx-font-smoodting: grayscale;
	word-break: break-all;
}
body {font-size: clamp(14px, calc(1rem + 0.5vw), 16px);line-height: 1.7;}
body.clicked {
    overflow: hidden;
    padding-right: calc(100vw - 100%);
}
main {position: relative;}
section {position: relative;z-index: 1;}
h2,h3,h4,h5,span {line-height: 1.4;}
p {font-size: clamp(14px, calc(1rem + 0.5vw), 16px);line-height: 1.7;}
li,th,td,dt,dd,figcaption {line-height: 1.7;}
a img {-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.DIN2014BD {font-family: "din-2014", sans-serif;font-weight: 700;font-style: normal;}
.DIN2014R {font-family: "din-2014", sans-serif;font-weight: 400;font-style: normal;}
.inner {width: 90%;max-width: 1220px;margin: 0 auto;}
.blank {
	padding-top: clamp(70px, calc(70px + 80 * ((100vw - 375px) / 1545)), 150px);
	padding-bottom: clamp(70px, calc(70px + 80 * ((100vw - 375px) / 1545)), 150px);
}
.blank2 {padding-top: clamp(70px, calc(70px + 80 * ((100vw - 375px) / 1545)), 150px);}
.flexbox {display: flex;flex-wrap: wrap;justify-content: space-between;}
/* title */
.title_common {margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);}
.title_common h2 {color: #000F6A;font-size: clamp(32px, calc(32px + 10 * ((100vw - 375px) / 1545)), 42px);}
.title_common p {font-size: clamp(14px, calc(14px + 6 * ((100vw - 375px) / 1545)), 20px);}
.pr_wrap {margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);}
.pr_wrap p {text-align: center;}
/* read */
a.read {
	display: block;
	position: relative;
	z-index: 1;
	max-width: 408px;
	overflow: hidden;
	padding: 20px 30px;
	background: #000A6A;
	color: #fff;
	font-weight: 500;
}
a.read::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	transform-origin: left top;
	transform: scale(0, 1);
	background: #7B80CB;
	transition: transform .3s;
}
a.read:hover::before {transform-origin: left top;transform: scale(1, 1);}
a.read::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	width: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	height: 100%;
	background: url(img/common/Icon_arrowR.svg) no-repeat center / 100%;
	transition: .3s;
}
.pc,.pc2 {display: block;}
.sp,.sp2 {display: none;}
@media only screen and ( max-width : 1024px ) {
	.pc2 {display: none;}
	.sp2 {display: block;}
}
@media only screen and ( max-width : 767px ) {
	html,body,h2,h3,h4,h5,p,li,th,td,dt,dd,figcaption,span {letter-spacing: .05em;}
	.pc {display: none;}
	.sp {display: block;}
}
/*------------------------------------------------

    header

------------------------------------------------*/
header {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	padding-left: 1.5vw;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 16%);
	background: #fff;
	transition: .3s;
}
header .header_box {display: flex;justify-content: space-between;align-items: center;height: 100%;}
header .logo {width: clamp(120px, calc(120px + 200 * ((100vw - 375px) / 1545)), 320px);}
header .header_btn {display: none;}
header nav {flex: 1;}
header nav .container {display: flex;justify-content: flex-end;align-items: center;}
header nav .container ul {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(10px, calc(10px + 50 * ((100vw - 375px) / 1545)), 60px);
	margin-right: clamp(10px, calc(10px + 50 * ((100vw - 375px) / 1545)), 60px);
}
header nav .container ul li a {position: relative;font-size: clamp(12px, calc(0.75rem + 0.4vw), 15px);text-align: center;}
header nav .container ul li a::before {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1px;
	background: #000;
	transition: .3s;
}
header nav .container ul li a:hover::before {width: 100%;}
header nav .container .wrap {display: flex;width: clamp(260px, calc(260px + 200 * ((100vw - 375px) / 1545)), 460px);}
header nav .container .wrap .phone {
	display: flex;
    flex-direction: column;
    justify-content: center;
	width: 100%;
	max-width: clamp(130px, calc(130px + 100 * ((100vw - 375px) / 1545)), 230px);
	text-align: center;
}
header nav .container .wrap .phone p {font-size: clamp(10px, calc(0.625rem + 0.3vw), 12px);text-align: center;}
header nav .container .wrap .phone a {margin: 3px 0;font-size: clamp(23px, calc(1.4375rem + 0.65vw), 33px);text-align: center;}
header nav .container .wrap a.entry {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	position: relative;
	z-index: 5;
	width: 100%;
	max-width: clamp(130px, calc(130px + 100 * ((100vw - 375px) / 1545)), 230px);
	padding: clamp(20px, calc(20px + 15 * ((100vw - 375px) / 1545)), 35px);
	padding-top: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	padding-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	overflow: hidden;
	background: #000A6A;
	color: #fff;
	font-size: clamp(18px, calc(1.125rem + 0.35vw), 23px);
	text-align: center;
}
header nav .container .wrap a.entry::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	transform-origin: left top;
	transform: scale(0, 1);
	background: #7B80CB;
	transition: transform .3s;
}
header nav .container .wrap a.entry:hover::after {transform-origin: left top;transform: scale(1, 1);}
header nav .container .wrap a.entry img {max-width: clamp(22px, calc(22px + 3 * ((100vw - 375px) / 1545)), 25px);}
#sp-menu {display: none;}
@media only screen and ( max-width : 1024px ) {
	#js-black-bg {
		display: block;
		opacity: 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 5;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #000A6A;
		visibility: hidden;
		transition: opacity 0.4s, visibility 0.4s;
		cursor: pointer;
		user-select: none;
	}
	#js-black-bg.clicked {opacity: .5;visibility: visible;}
	header {height: 60px;}
	header .header_btn {
		display: flex;
		align-items: center;
		position: absolute;  
		top: 50%;
		right: 5%;
		transform: translate(0%, -50%);
		z-index: 200;
		cursor: pointer;
	}
	header .header_btn p {
		position: relative;
		margin-right: 10px;
		font-size: clamp(16px, calc(16px + 4 * ((100vw - 375px) / 1545)), 20px);
		line-height: 1;
		user-select: none;
	}
	header .header_btn p::after {	
		content: '';
		position: absolute;
		left: 0;
		bottom: -2px;
		width: 0;
		height: 1px;
		background: #000;
		transition: all .6s cubic-bezier(.77, 0 ,.175, 1);
	}
	header .header_btn:hover p {cursor: pointer;}
	header .header_btn:hover p::after {width: 100%;}
	header .header_btn #sp-menu {
		display: block;
		position: relative;
		z-index: 10;
		width: 24px;
		height: 18px;
		cursor: pointer;
		user-select: none;
	}
	header .header_btn #sp-menu span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 4px;
		background-color: #000;
		transition: all .5s;
	}
	header .header_btn #sp-menu span:nth-of-type(1) {top: 0;}
	header .header_btn #sp-menu span:nth-of-type(2) {top: 8px;}
	header .header_btn #sp-menu span:nth-of-type(3) {bottom: 0;}
	header .header_btn.clicked #sp-menu span:nth-of-type(1) {transform: translateY(8px) rotate(-45deg);}
	header .header_btn.clicked #sp-menu span:nth-of-type(2) {left: 50%;opacity: 0;animation: bar02 .8s forwards;}
	@keyframes bar02 {
		100% {height: 0;}
	}
	header .header_btn.clicked #sp-menu span:nth-of-type(3) {transform: translateY(-8px) rotate(45deg);}
	header .logo {position: relative;top: initial;left: initial;width: 250px;}
	header nav {
		position: fixed;
		top: 60px;
		right: -100%;
		bottom: 0;
		z-index: 100;
		width: 60%;
		max-width: 400px;
		padding: 0 20px;
		background: #fff;
		transition: all 0.3s ease;
	}
	header nav.clicked {right: 0;box-shadow: -2px 2px 3px rgba(0, 0, 0, .2);}
	header nav .container {
		flex-direction: column;
		justify-content: center;
		position: absolute;
		top: 20px;
		right: 20px;
		bottom: 20px;
		left: 20px;
	}
	header nav .container ul {flex: none;display: block;width: 86%;max-width: 400px;margin: 0 0 30px;}
	header nav .container ul li {margin-bottom: 20px;text-align: center;}
	header nav .container ul li a {font-size: 14px;}
	header nav .container .wrap {display: block;width: 100%;max-width: 200px;margin: 0 auto;}
	header nav .container .wrap .phone {max-width: 100%;margin-bottom: 15px;}
	header nav .container .wrap a.entry {max-width: 100%;}
}
@media only screen and ( min-width : 1025px ) {
	#js-black-bg {display: none;}
}
/*------------------------------------------------

    CONTENTS │ コンテンツ

------------------------------------------------*/
#contents {padding-bottom: 0;}
#contents .title_common h2 {margin-bottom: 10px;text-align: center;}
#contents .title_common p {font-size: clamp(10px, calc(10px + 4 * ((100vw - 375px) / 1545)), 14px);text-align: center;}
#contents ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(40px, calc(40px + 40 * ((100vw - 375px) / 1545)), 80px);
}
#contents ul li {position: relative;}
#contents ul li figure {overflow: hidden;}
#contents ul li figure img {transition: .3s;}
#contents ul li:hover figure img {transform: scale(1.1);}
#contents ul li .wrap {
	padding-top: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	padding-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	background: #F4F4F4;
}
#contents ul li .wrap p {
	font-weight: 600;
	font-size: clamp(16px, calc(16px + 2 * ((100vw - 375px) / 1545)), 18px);
	text-align: center;
}
@media only screen and ( max-width : 767px ) {
	#contents ul {grid-template-columns: repeat(1, 1fr);}
}
/*------------------------------------------------

    APPLICATION │ 募集職種一覧

------------------------------------------------*/
#application .title_common h2 {color: #000;}
#application ul li {
	position: relative;
	width: 50%;
	height: clamp(164px, calc(164px + 100 * ((100vw - 375px) / 1545)), 264px);
}
#application ul li::before {background: no-repeat center / cover;}
#application ul li:nth-child(1)::before {background-image: url(img/common/application/bg01.webp);}
#application ul li:nth-child(2)::before {background-image: url(img/common/application/bg03.webp);}
#application ul li::after {
	content: '';
	position: absolute;
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	border: 4px solid #D3D6FF;
}
#application ul li:nth-child(2)::after {border-color: #FFE8D9;}
#application ul li h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	color: #fff;
	font-weight: 600;
	font-size: clamp(18px, calc(18px + 2 * ((100vw - 375px) / 1545)), 20px);
	text-align: center;
}
@media only screen and ( max-width : 767px ) {
	#application ul li {width: 100%;}
}
/*------------------------------------------------

    ENTRY │ エントリー

------------------------------------------------*/
#entry {background: #EAEBFA;}
#entry .inner {max-width: 1520px;}
#entry .container {
	position: relative;
	padding: 20px;
	padding-top: clamp(70px, calc(70px + 20 * ((100vw - 375px) / 1545)), 90px);
	padding-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);
	background: #fff;
}
#entry .container .title_wrap {position: absolute;top: 5%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
#entry .container .title_wrap h2 {
	margin-bottom: clamp(5px, calc(5px + 5 * ((100vw - 375px) / 1545)), 10px);
	font-size: clamp(42px, calc(42px + 20 * ((100vw - 375px) / 1545)), 62px);
	line-height: 1;
	text-align: center;
}
#entry .container .title_wrap p {font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);text-align: center;}
#entry .container .wrap h3 {
	margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);
	letter-spacing: .1em;
	text-align: center;
}
#entry .container .wrap ul {display: flex;justify-content: center;align-items: center;}
#entry .container .wrap ul li:nth-child(1) {
	margin-right: clamp(25px, calc(25px + 20 * ((100vw - 375px) / 1545)), 45px);
	padding-right: clamp(25px, calc(25px + 20 * ((100vw - 375px) / 1545)), 45px);
	border-right: 1px solid #000;
}
#entry .container .wrap ul li:nth-child(2) {max-width: 300px;}
#entry .container .wrap ul li p {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	margin-bottom: 20px;
	font-size: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 28px);
	letter-spacing: .1em;
}
#entry .container .wrap ul li p a {font-size: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);letter-spacing: 0;}
#entry .container .wrap ul li dl {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: clamp(15px, calc(15px + 15 * ((100vw - 375px) / 1545)), 30px);
}
#entry .container .wrap ul li dl dt {
	padding: 2px 20px;
	border: 1px solid #000;
	font-size: clamp(10px, calc(10px + 4 * ((100vw - 375px) / 1545)), 14px);
	letter-spacing: .1em;
	text-align: center;
}
#entry .container .wrap ul li dl dd {font-size: clamp(10px, calc(10px + 4 * ((100vw - 375px) / 1545)), 14px);letter-spacing: .1em;}
#entry .container .wrap ul li a.view {
	display: block;
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 15px 4vw 15px 3vw;
	background: #000F6A;
	color: #fff;
	font-weight: 600;
	font-size: clamp(14px, calc(14px + 6 * ((100vw - 375px) / 1545)), 20px);
	letter-spacing: .1em;
	text-align: center;
}
#entry .container .wrap ul li a.view::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	transform-origin: left top;
	transform: scale(0, 1);
	background: #7B80CB;
	transition: transform .3s;
}
#entry .container .wrap ul li a.view:hover::before {transform-origin: left top;transform: scale(1, 1);}
#entry .container .wrap ul li a.view::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	width: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	height: 100%;
	background: url(img/common/Icon_arrowR.svg) no-repeat center / 100%;
}
@media only screen and ( max-width : 1024px ) {
	#entry .container .wrap ul {flex-direction: column;gap: 20px;}
	#entry .container .wrap ul li:nth-child(1) {margin-right: 0;padding-right: 0;border-right: none;}
	#entry .container .wrap ul li:nth-child(2) {width: 100%;}
}
/*------------------------------------------------

    footer

------------------------------------------------*/
footer {background: #fff;}
footer .container {
	align-items: flex-start;
	padding-top: clamp(50px, calc(50px + 42 * ((100vw - 375px) / 1545)), 92px);
	padding-bottom: clamp(60px, calc(60px + 53 * ((100vw - 375px) / 1545)), 113px);
}
footer .container .logo_wrap {width: 30%;}
footer .container .logo_wrap .logo {
	max-width: clamp(260px, calc(260px + 200 * ((100vw - 375px) / 1545)), 460px);
	margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);
}
footer .container .logo_wrap p span {display: block;margin-top: 20px;}
footer .container .nav_wrap {width: 60%;}
footer .container .nav_wrap ul {width: 30%;}
footer .container .nav_wrap ul li {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
footer .container .nav_wrap ul li:last-child {margin-bottom: 0;}
footer .container .nav_wrap ul li a {position: relative;line-height: 1.4;}
footer .container .nav_wrap ul li a::before {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 1px;
	background: #000;
	transition: .3s;
}
footer .container .nav_wrap ul li a:hover::before {width: 100%;}
footer small {
	display: block;
	padding: 12px 0 10px;
	background: #000F6A;
	color: #fff;
	font-size: clamp(10px, calc(10px + 4 * ((100vw - 375px) / 1545)), 14px);
	text-align: center;
}
@media only screen and ( max-width : 767px ) {
	footer .container .logo_wrap {width: 100%;margin-bottom: 40px;text-align: center;}
	footer .container .logo_wrap p {text-align: center;}
	footer .container .logo_wrap p span {text-align: center;}
	footer .container .nav_wrap {width: 100%;}
	footer .container .nav_wrap ul {justify-content: center;width: 100%;margin-bottom: 30px;}
	footer .container .nav_wrap ul:last-child {margin-bottom: 0;}
	footer .container .nav_wrap ul li {margin-bottom: 10px;text-align: center;}
}
/*-----------------------------------------------

	404 Not Found

------------------------------------------------*/
#notfound {padding-top: calc(130px + 70 * ((100vw - 375px) / 1545));padding-bottom: calc(70px + 30 * ((100vw - 375px) / 1545));}
#notfound h2 {margin-bottom: 50px;text-align: center;}
#notfound h2 span {display: block;font-size: 2.3em;text-align: center;}
#notfound p {margin-bottom: 40px;text-align: center;}
#notfound a {
	display: block;
	position: relative;
	z-index: 1;
	width: 70%;
	max-width: 300px;
	margin: 0 auto;
	padding: 15px;
	border: 1px solid #222;
	background: #222;
	color: #fff;
	text-align: center;
}
#notfound a:hover {color: #222;}
#notfound a::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
	z-index: -5;
	background: #fff;
	color: #222;
}
#notfound a:hover::after {transform-origin: left top;transform: scale(1, 1);}
#notfound a span {display: block;position: relative;text-align: center;}