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

 2023.12.22

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

 * タグの設定

---------------------------------------------- */
a {
	display: inline-block;
	outline:none;
	color: #363636;
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
    transition: all .3s ease;
}
input,
input[type="submit"],
input[type="button"],
input[type="text"],
button {
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	box-sizing: border-box;
	outline: none;
	font-style: normal;
	font-weight: 300;
	font-family: "hiragino-kaku-gothic-pron", 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;
}
select {
	font-family: "hiragino-kaku-gothic-pron", sans-serif;
    -webkit-appearance: none;
	 -moz-appearance: none;
    appearance: none;
}
select::-ms-expand{
	font-family: "hiragino-kaku-gothic-pron", sans-serif;
	display: none;
}
/*------------------------------------------------*/
html {
	margin: 0;
	padding: 0;
	background: #F8F8F8;
	color: #363636;
	font-style: normal;
	font-weight: 300;
	font-size: 62.5%;
	line-height: 1.8;
	font-family: "hiragino-kaku-gothic-pron", sans-serif;
	font-style: normal;
	-webkit-font-smoodting: antialiased;
	-moz-osx-font-smoodting: grayscale;
	word-break: break-all;
}
body {font-size: calc(13px + 3 * ((100vw - 375px) / 1605));line-height: 1.8;}
h2,h3,h4,h5 {line-height: 1.5;}
p {font-size: calc(13px + 3 * ((100vw - 375px) / 1605));line-height: 1.8;}
ul,li,th,td,dt,dd,figcaption {line-height: 1.8;}
main {position: relative;background: #F8F8F8;}
.GaramondPremierProR {font-family: "garamond-premier-pro", serif;font-weight: 400;font-style: normal;}
.A-OTFRyuminPr6N {font-family: "a-otf-ryumin-pr6n", serif;font-weight: 300;font-style: normal;}
.DIN2014R {font-family: "din-2014", sans-serif;font-weight: 400;font-style: normal;}
.inner {width: 90%;max-width: calc(1716px + 2 * ((100vw - 375px) / 1605));margin: 0 auto;}
.inner-s {max-width: 800px; margin: 0 auto;}
.blank {padding-top: calc(40px + 60 * ((100vw - 375px) / 1605));padding-bottom: calc(60px + 40 * ((100vw - 375px) / 1605));}
.blank2 {padding-top: calc(40px + 10 * ((100vw - 375px) / 1605));padding-bottom: calc(60px + 40 * ((100vw - 375px) / 1605));}
.flexbox {display: flex;flex-wrap: wrap;justify-content: space-between;}
.title_container {margin-bottom: calc(40px + 30 * ((100vw - 375px) / 1605));}
.title_container h2 {margin-bottom: 10px;padding-bottom: 10px;text-align: center;}
.title_container h2 .visual .line {font-size: calc(28px + 20 * ((100vw - 375px) / 1605));}
.title_container p.jp {font-size: calc(15px + 3 * ((100vw - 375px) / 1605));text-align: center;}
.title_container p.jp span {text-align: center;}
.title_container p.subttl {
	margin-top: calc(30px + 15 * ((100vw - 375px) / 1605));
	text-align: center;
}
.button {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 293px;
	margin: 0 auto;
	padding: 15px 0;
	border: none;
	background: linear-gradient(-45deg, #646E8C, #081A40);
	color: #fff;
	font-size: calc(16px + 4 * ((100vw - 375px) / 1605));
	text-align: center;
	transition: .3s;
	user-select: none;
}
.button:hover {background-position: 99% 50%;color: #fff;}
.button::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -5;
	transform-origin: left top;
	transform: scale(0, 1);
	height: 100%;
	background: #363636;
	transition: transform .3s;
}
.button:hover::before {transform-origin: left top;transform: scale(1, 1);}
.button::after {
	content: '';
	position: absolute;
	right: 20px;
	bottom: 50%;
	transform: translateY(50%);
	width: 12%;
	height: 100%;
	background: url(img/arrowR-wht.svg) no-repeat right / 100%;
	transition: .3s;
}
span.projects_tag {
	display: inline-block;
	padding: 7px 1.5em 5px;
	background: #79C252;
	color: #fff;
	font-size: calc(11px + 5 * ((100vw - 375px) / 1605));
	line-height: 1;
}
span.projects_tag.skyblue {background: #1DB4D8;}
span.projects_tag.red {background: #D81D1D;}
a[href^="tel:"] {pointer-events: none;}
.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 : 768px ) {
	a[href^="tel:"] {pointer-events: visible;}
	.pc {display: none;}
	.sp {display: block;}
}
/*------------------------------------------------

    header

------------------------------------------------*/
header {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100px;
	padding: 10px 4vw 10px 2vw;
	background: #fff;
	transition: .3s;
}
header.transform {background: #fff;}
header .header_box {display: flex;align-items: center;height: 100%;}
header .logo {position: relative;z-index: 101;width: calc(280px + 80 * ((100vw - 1024px) / 956));}
header .header_btn {display: none;}
header nav {width: 100%;}
header nav ul {display: flex;align-items: center;justify-content: flex-end;}
header nav ul li {margin-left: calc(40px + 40 * ((100vw - 1024px) / 956));}
header nav ul li:first-child {margin-left: 0;}
header nav ul li a {
	position: relative;
	color: #023059;
	font-size: calc(14px + 4 * ((100vw - 1024px) / 956));
	text-align: center;
}
header nav ul li.page a::after {	
	content: '';
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translate(-50%, 0);
	width: 0;
	height: 2px;
	background: #023059;
	transition: all .6s ease 0s;
}
header nav ul li.page a:hover::after {width: 100%;}
/* dropdown menu */
header nav ul li.has-child {position: relative;}
header nav ul li.has-child::before {
    content: '';
    position: absolute;
	left: 50%;
    bottom: 20px;
    z-index: 1;
    transform: translate(-50%, 0) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: .75px solid #111;
    border-bottom: .75px solid #111;
    transition: .3s;
}
header nav ul li.has-child:hover::before {transform: translate(0, 50%) rotate(-135deg);}
header nav ul li.has-child a.tab_title {display: flex;justify-content: center;align-items: center;height: 100px;}
header nav ul li.has-child ul {
	display: block;
	visibility: hidden;
	opacity: 0;
    position: absolute;
    top: 100%;
	left: -30px;
	width: max-content;
    max-width: 500px;
	z-index: 1;
	transition: all .3s;
}
header nav ul li.has-child:hover ul {visibility: visible;opacity: 1;}
header nav ul li.has-child ul li {position: relative;margin: 0;}
header nav ul li.has-child ul li:last-child {border-bottom: 0;}
header nav ul li.has-child ul li a {display: block;position: relative;padding: 15px 20px;line-height: 1.4;text-align: left;}
header nav ul li.has-child ul li:nth-child(1) a {background: #E7E0F2;color: #5229A4;}
header nav ul li.has-child ul li:nth-child(2) a {background: #DBE4F0;color: #346AB4;}
header nav ul li.has-child ul li:nth-child(3) a {background: #EAF8D9;color: #8DC24A;}
header nav ul li.has-child ul li:hover a {color: #fff;}
header nav ul li.has-child ul li:nth-child(1):hover a {background: #5229A4;}
header nav ul li.has-child ul li:nth-child(2):hover a {background: #346AB4;}
header nav ul li.has-child ul li:nth-child(3):hover a {background: #8DC24A;}
header nav ul li.has-child ul li a:hover::after {width: 100%;}
#sp-menu {display: none;}
@media only screen and ( max-width : 768px ) {
	header {height: auto;}
	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: 5px 10px 0 0;
		color: #023059;
		font-size: calc(16px + 4 * ((100vw - 375px) / 649));
		letter-spacing: .04em;
		line-height: 1;
		user-select: none;
	}
	header .header_btn p::after {	
		content: '';
		position: absolute;
		left: 0;
		bottom: -2px;
		width: 0;
		height: 1px;
		background: #023059;
		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: #023059;
		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 nav {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: -100vh;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 100vh;
		padding: 0 10px;
		overflow: hidden;
		overflow-y: scroll;
		background: #F2F7FB;
		transition: all .3s linear;
	}
	header nav.clicked {top: 0%;box-shadow: -2px 2px 3px rgba(0, 0, 0, .2);}
	header nav ul {display: block;width: 86%;max-width: 400px;}
	header nav ul li {margin: 0 0 3.5vh;text-align: center;}
	header nav ul li.tel {margin-bottom: 5vh;}
	header nav ul li.last {margin-bottom: 0;}
	header nav.clicked ul li {opacity: 0;animation: fadeRigth .5s ease forwards;}
	@keyframes fadeRigth {
		from {
			opacity: 0;
			-webkit-transform: translate3d(50px, 0, 0);
			transform: translate3d(50px, 0, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}
	header nav ul li:nth-of-type(1) {animation-delay: .35s;}
	header nav ul li:nth-of-type(2) {animation-delay: .4s;}
	header nav ul li:nth-of-type(3) {animation-delay: .45s;}
	header nav ul li:nth-of-type(4) {animation-delay: .5s;}
	header nav ul li:nth-of-type(5) {animation-delay: .55s;}
	header nav ul li:nth-of-type(6) {animation-delay: .6s;}
	header nav ul li a {
		padding: 10px;
		font-size: 1.6rem;
		transition: all .6s cubic-bezier(.77, 0, .175, 1);
	}
	header nav ul li.page a {padding: 12px 24px 8px;}
	header nav ul li.page a:hover {opacity: 1;color: #fff;transition-delay: .6s;}
	header nav ul li.page a::after,
	header nav ul li.page a::before {
		content: '';
		position: absolute;
		top: 0;
		width: 0;
		height: 100%;
		transition: inherit;
		z-index: -1;
	}
	header nav ul li.page a::before {
		left: 0;
		width: 0;
		height: 100%;
		border-top: 1px solid #023059;
		border-bottom: 1px solid #023059;
		transition: inherit;
		z-index: -1;
	}
	header nav ul li.page a::after {top: 1px;right: 0;}
	header nav ul li.page a:hover:before {width: 100%;transition-delay: 0s;}
	header nav ul li.page a:hover:after {width: 100%;background-color: #023059;transition-delay: .4s;}
	/* dropdown menu */
	header nav ul li.has-child::before {display: none;}
	header nav ul li.has-child a.tab_title {display: inline-block;position: relative;height: auto;}
	header nav ul li.has-child a.tab_title::before,
	header nav ul li.has-child a.tab_title::after {
		content: '';
		position: absolute;
		right: -20px;
		bottom: 46%;
		left: initial;
		transform: translate(-50%, -50%);
		width: 15px;
		height: 1px;
		background: #222;
		transition: .3s;
	}
	header nav ul li.has-child a.tab_title::before {transform: translate(-50%, -50%) rotate(0deg);}
	header nav ul li.has-child a.tab_title::after {transform: translate(-50%, -50%) rotate(-90deg);}
	header nav ul li.has-child.active a.tab_title::after {transform: translate(-50%, -50%) rotate(0deg);}
	header nav ul li.has-child ul {
		display: none;
		opacity: 1;
		visibility: visible;
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
		transition: none;
	}
	header nav ul li.has-child ul li a {
		border-bottom: 1px solid #fff;
		background: #E6DED5;
		font-size: 1.4rem;
		text-align: center;
	}
}
/*--------------------------------------------------

	RECRUIT

--------------------------------------------------*/
#recruit {position: relative;background: #fff;}
#recruit::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 40%;
	background: linear-gradient(-45deg, #081A40, #646E8C);
}
#recruit .container {flex-direction: row-reverse;align-items: center;}
#recruit .container figure {width: 49%;}
#recruit .container .content {width: 49%;}
#recruit .container .content p {
	margin-bottom: calc(40px + 140 * ((100vw - 375px) / 1605));
	font-size: calc(16px + 8 * ((100vw - 375px) / 1605));
}
#recruit .container .content .button {
	max-width: 336px;
	padding: 16px 0;
	background: #fff;
	color: #363636;
	font-weight: 300;
	font-size: calc(13px + 3 * ((100vw - 375px) / 1605));
	letter-spacing: .06em;
}
#recruit .container .content .button:hover {color: #fff;}
#recruit .container .content .button::before {background: #363636;}
#recruit .container .content .button::after {
	right: 20px;
	width: 17%;
	background: url(img/arrowR-blk.svg) no-repeat right / 100%;
}
#recruit .container .content .button:hover::after {background-image: url(img/arrowR-wht.svg);}
@media only screen and ( max-width : 768px ) {
	#recruit::before {display: none;}
	#recruit .container figure {width: 100%;margin-bottom: 30px;}
	#recruit .container .content {width: 100%;}
	#recruit .container .content p {text-align: center;}
	#recruit .container .content .button {border: 1px solid #363636;}
}
/*--------------------------------------------------

    footer

--------------------------------------------------*/
footer {position: relative;background: #FAFAFA;}
footer .container {
	padding-top: calc(30px + 40 * ((100vw - 375px) / 1605));
	padding-bottom: calc(50px + 50 * ((100vw - 375px) / 1605));
}
footer .container .contentL {margin-bottom: 40px;}
footer .container .contentL p.logo {
	margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1605));
	max-width: calc(200px + 160 * ((100vw - 320px) / 1600));
}
footer .container .contentL p.logo {
	margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1605));
	max-width: calc(220px + 140 * ((100vw - 320px) / 1600));
}
footer .container .contentL .wrap {margin-bottom: calc(10px + 10 * ((100vw - 375px) / 1605));}
footer .container .contentL .wrap:last-child {margin-bottom: 0;}
footer .container .contentL .wrap p {font-size: calc(10px + 3 * ((100vw - 375px) / 1605));}
footer .container .contentL .wrap dl {font-size: calc(10px + 3 * ((100vw - 375px) / 1605));}
footer .container .contentL .wrap dl dt {float: left;width: calc(70px + 10 * ((100vw - 375px) / 1605));}
footer .container .contentL .wrap dl dd {padding-left: calc(70px + 10 * ((100vw - 375px) / 1605));;}
footer .container .contentR {flex: 1;justify-content: flex-end;gap: 7%;}
footer .container .contentR .wrap h4 {
	margin-bottom: 20px;
	font-weight: 700;
	font-size: calc(14px + 5 * ((100vw - 320px) / 1600));
	letter-spacing: .1em;
}
footer .container .contentR .wrap ul {gap: 0 calc(40px + 60 * ((100vw - 320px) / 1600));}
footer .container .contentR .wrap ul li {position: relative;margin-bottom: 20px;padding-left: 15px;}
footer .container .contentR .wrap ul li:last-child {margin-bottom: 0;}
footer .container .contentR .wrap ul li::before {content: '-';position: absolute;left: 5px;}
footer .container .contentR .wrap p {
	margin-bottom: 20px;
	font-weight: 700;
	font-size: calc(14px + 5 * ((100vw - 320px) / 1600));
	letter-spacing: .1em;
}
footer .container .contentR .wrap p:last-child {margin-bottom: 0;}
footer .container .contentR a {position: relative;}
footer .container .contentR a::before {
	content: '';
	display: block;
	position: absolute;
	bottom: -5px;
	right: 0;
	left: auto;
	width: 0;
	height: 1px;
	background-color: #363636;
	transition: .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
footer .container .contentR a:hover::before {width: 100%;right: auto;left: 0;}
footer small {
	display: block;
	padding: 15px 0;
	background: #fff;
	font-size: calc(12px + 4 * ((100vw - 320px) / 1600));
	letter-spacing: .05em;
	text-align: center;
}
@media only screen and ( max-width : 1024px ) {
	footer .container p.logo {max-width: 100%;margin-bottom: 40px;}
	footer .container .contentR {    flex: initial;justify-content: flex-start;gap: 8%;width: 100%;}
}
@media only screen and ( max-width : 768px ) {
	footer {overflow: hidden;}
	footer .container {padding-bottom: 0;}
	footer .container .contentR {justify-content: flex-start;gap: 30px;}
	footer .container .contentR .wrap:last-child {width: 120%;margin: 0 -6%;}
	footer .container .contentR .wrap:last-child p {margin-bottom: 0;}
	footer .container .contentR .wrap:last-child p a {display: block;padding: 10px 15px;}
	footer .container .contentR .wrap:last-child p:nth-child(odd) a {background: #efefef;}
	footer .container .contentR .wrap:last-child p:nth-child(even) a {background: #fff;}
	footer .container .contentR .wrap:last-child p a::before {bottom: 0;}
}
/*--------------------------------------------------

　   back top

--------------------------------------------------*/
#page-top a {
	display: flex;
	justify-content:center;
	align-items:center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #081A40;
	color: #fff;
	line-height: 60px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition:all .3s;
}
#page-top a img {
	width: 30px;
	transform: rotate(-90deg) scale(1, -1);
}
#page-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 99;
	opacity: 0;
	transform: translateY(100px);
}
#page-top.UpMove {animation: UpAnime .5s forwards;}
@keyframes UpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
#page-top.DownMove {animation: DownAnime .5s forwards;}
@keyframes DownAnime{
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 1;
		transform: translateY(100px);
	}
}
@media only screen and ( max-width : 991px ) {
	#page-top {right: 0;bottom: 0;}
	#page-top a {width: 60px;height: 60px;border-radius: 0;}
}
/*-----------------------------------------------

	404 Not Found

------------------------------------------------*/
#notfound {padding-top: calc(100px + 60 * ((100vw - 375px) / 1605));}
#notfound h2 {margin-bottom: calc(30px + 20 * ((100vw - 375px) / 1605));text-align: center;}
#notfound h2 span {display: block;margin-bottom: 10px;font-size: 2.5em;text-align: center;}
#notfound p {margin-bottom: calc(20px + 20 * ((100vw - 375px) / 1605));text-align: center;}