@charset "UTF-8";

/* ====================================
	共通
==================================== */

/*コンテンツ*/
section:not(.headtitleArea){padding: 70px 0;}
section:last-child{ padding-bottom:0; }
section .st-btn{ text-align:center; }
@media print, screen and (max-width:1240px){
	section:not(.headtitleArea){ padding:70px 20px 70px; }
}
@media print, screen and (max-width:768px){
	section:not(.headtitleArea){ padding:40px 20px 40px; }
}

/* ====================================
	下層部見出し
==================================== */
.next-main-heading{
	margin-bottom:60px;
	padding-left:36px;
	font-size:3.4rem;
	line-height:4.4rem;
	font-weight:500;
	position:relative;
}
.next-main-heading:after{
	content:"";
	width:20px;
	height:6px;
	display:block;
	background:linear-gradient(45deg,rgba(0, 116, 191, 1) 0%, rgba(14, 184, 174, 1) 100%);
	position:absolute;
	left:0;
	top:.5em;
}

/* ====== *下層ヘッダータイトル* ====== */
#headtitleArea{
	padding:180px 100px 40px;
	position:relative;
}

#headtitleArea h1 .en{
	margin-bottom:10px;
	display:inline-block;
	padding:0;
	font-size:12rem;
	line-height:12rem;
	font-weight:400;
	letter-spacing:-0.02em;
	background:linear-gradient(45deg, rgba(0, 116, 191, 1) 0%, rgba(14, 184, 174, 1) 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
#headtitleArea h1{
	display:inline-flex;
	flex-direction:column;
	font-size:2.2rem;
	font-weight:400;
}
#headtitleArea:after{
	content:"";
	width:544px;
	height:544px;
	display:block;
	position:absolute;
	top: -20px;
	right:-50px;
	-webkit-mask-image:url(../img/plus.svg);
	mask-image:url(../img/plus.svg);
	-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;
	-webkit-mask-position:center;
	mask-position:center;
	-webkit-mask-size:100%;
	mask-size:100%;
	z-index:-1;
}
#headtitleArea:before{
	content:"";
	width:140px;
	height:154px;
	display:block;
	position:absolute;
	background:url(../img/plus-sub.png) no-repeat 100% / cover;
	bottom:-38px;
	right:27.5%;
	z-index:-2;
}
@media print, screen and (max-width:1600px){
	#headtitleArea:before {
		bottom: -20px;
		right: 36.5%;
	}
}
@media print, screen and (max-width:1240px){
	#headtitleArea {
		padding:180px 340px 40px 20px;
	}
	#headtitleArea:after {
		width:380px;
		height:380px;
	}
	#headtitleArea h1 .en {
		font-size:9rem;
		line-height:9rem;
	}
}
@media print, screen and (max-width: 768px){
	#headtitleArea:after {
		width:260px;
		height:260px;
		top:30px;
	}
	#headtitleArea:before {
		width:70px;
		height:79px;
		bottom: 50px;
		right: 30%;
	}
	#headtitleArea {padding:200px 140px 40px 20px;}
	#headtitleArea h1 .en {
		font-size: 6.5rem;
		line-height: 6.5rem;
	}
	#headtitleArea h1 { font-size:1.8rem; }
}

@media print, screen and (max-width:400px) {
	#headtitleArea {padding: 180px 110px 40px 20px;}
	#headtitleArea:after {
		width:220px;
		height:220px;
	}
	#headtitleArea h1 .en {
		font-size: 5.6rem;
		line-height: 5.6rem;
	}
}


.bread-list{
	padding: 40px 100px 70px;
	position:relative;
	z-index:1;
}
.bread-list ol{
	display:inline-block;
	width:100%;
	padding: 15px 25px;
	display:inline-block;
	background:#fff;
	border-radius:5px;
	box-shadow:0 0 10px rgba(0, 116, 191, .1);
}
.bread-list li{
	display:inline;
	align-items:center;
}
.bread-list li a{
	letter-spacing:.05em;
}
.bread-list li:not(:last-child) a{ color:#666; }
.bread-list li a:hover{
	color:#222;
	text-decoration:underline;
}
.bread-list li:not(:last-child)::after{
	content:"";
	width:20px;
	height:10px;
	display:inline-block;
	background:#0074bf;
	-webkit-mask-image:url(../img/simple-arrow.svg);
	mask-image:url(../img/simple-arrow.svg);
	-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;
	-webkit-mask-position:center;
	mask-position:center;
	-webkit-mask-size:8px 8px;
	mask-size:8px 8px;
}
@media (max-width:1240px) {
	.bread-list{ padding:0px 20px; }
}
@media (max-width:768px) {
	.bread-list ol{
		padding:10px 20px;
	}
	.bread-list li{ font-size:1.4rem; }
	.bread-list li a{ font-size:1.4rem; }
}

.jump-list{margin:60px 100px 0;display:flex;flex-wrap:wrap;gap:25px;}
.jump-list li{width:calc((100% - 75px) / 4);}

.jump-list li a{ margin-top:70px; position:relative; }
.jump-list li a{
	width:100%;
	margin:0 auto;
	padding: 16px 60px 16px 20px;
	display:inline-block;
	color: #333;
	font-size: 2rem;
	text-align:left;
	border-radius:50px;
	background:#fff;
	box-shadow:0 0 10px rgba(0, 116, 191, .1);
	position:relative;
	transition:all .3s ease;
}
.jump-list li a:after{
	content:"";
	width:50px;
	height:50px;
	padding:22px;
	border-radius:50%;
	background:linear-gradient(45deg,rgba(0, 116, 191, 1) 0%, rgba(14, 184, 174, 1) 100%);
	position:absolute;
	top:50%;
	right:6px;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transition:all .3s ease;
	z-index:0;
}
.jump-list li a:before{
	content:"";
	display:block;
	width:14px;
	height:14px;
	background:#fff;
	-webkit-mask-image:url(../img/standard-arrow.svg);
	mask-image:url(../img/standard-arrow.svg);
	-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;
	-webkit-mask-position:center;
	mask-position:center;
	-webkit-mask-size:14px 14px;
	mask-size:14px 14px;
	right:24px;
	top:50%;
	position:absolute;
	transition:all .3s;
	z-index:1;
	transform:translateY(-50%) rotate(90deg);
}
.jump-list li a:hover:after {
	width:60px;
	height:60px;
	right:0px;
}
@media print, screen and (max-width:1240px){
	.jump-list{ width:calc(100% - 40px); margin:60px 20px 30px; }
	.jump-list li{ width:calc((100% - 25px) / 2); }
	.jump-list li a{min-width:100%;width:100%;font-size:1.6rem;}
}
@media print, screen and (max-width:768px){
	.jump-list{
		flex-direction:column;
		gap:10px;
	}
	.jump-list li{ width:100%; }
}




/* ====================================
	仕事を知る
==================================== */
#jobs #headtitleArea:after{
	background:url(../img/head-job-img.jpg) no-repeat 100% / cover;
}


#interviewArea{ margin:0 100px; }

@media print, screen and (max-width:1240px){
	#interviewArea{ margin:0; }
}
@media print, screen and (max-width:1024px){
	.next-main-heading{
		margin-bottom:30px;
		padding-left:20px;
		font-size:2.6rem;
		line-height:3.6rem;
		font-weight:500;
		position:relative;
	}
	.next-main-heading:after{
		content:"";
		width:12px;
		height:4px;
		display:block;
		background:linear-gradient(45deg,rgba(0, 116, 191, 1) 0%, rgba(14, 184, 174, 1) 100%);
		position:absolute;
		left:0;
		top:.5em;
	}
}


/*インタビューのリスト*/
#interviewArea ul{display:flex;gap:18px;margin-top:80px;}
#interviewArea ul > li{
	width:calc((100% - 54px) / 4);
	border-radius:5px;
	overflow:hidden;
	position:relative;
}
#interviewArea > ul li .text-wrap{
	width:100%;
	padding:20px 25px;
	color:#fff;
	position:absolute;
	bottom:0;
	z-index:1;
}
#interviewArea > ul li dl dt{
	font-size:2.4rem;
	line-height:3.4rem;
}

#interviewArea > ul li dl dd{
	font-size:1.8rem;
	font-weight:700;
}
#interviewArea > ul li dl dd span{
	margin-left:20px;
	font-size:1.4rem;
	font-weight:500;
}
#interviewArea > ul li .text-wrap:after{
	content:"";
	height:180px;
	width:100%;
	display:block;
	background-position:bottom;
	position:absolute;
	bottom:0;
	left:0;
	z-index:-1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#interviewArea > ul .mem01 .text-wrap:after{ background-image:linear-gradient(180deg, rgba(0, 116, 191, 0), rgba(0, 116, 191, 1)); }
#interviewArea > ul .mem02 .text-wrap:after{ background-image:linear-gradient(180deg, rgba(5, 184, 182, 0), rgba(5, 184, 182, 1)); }
#interviewArea > ul .mem03 .text-wrap:after{ background-image:linear-gradient(180deg, rgba(230, 93, 158, 0), rgba(230, 93, 158, 1)); }
#interviewArea > ul .mem04 .text-wrap:after{ background-image:linear-gradient(180deg, rgba(241, 144, 19, 0), rgba(241, 144, 19, 1)); }

#interviewArea > ul li img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top;
	transition:transform .4s ease;
}

#interviewArea > ul li a::before {
	content:"";
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity .4s ease;
	z-index:1;
}
#interviewArea > ul .mem01 a::before { background:rgba(0, 116, 191, .35); }
#interviewArea > ul .mem02 a::before { background:rgba(5, 184, 182, .35); }
#interviewArea > ul .mem03 a::before { background:rgba(230, 93, 158, .35); }
#interviewArea > ul .mem04 a::before { background:rgba(241, 144, 19, .35); }

#interviewArea > ul li a:hover::before { opacity:1; }
#interviewArea > ul li a:hover img { transform:scale(1.1); }
#interviewArea > ul li .text-wrap { z-index:2; }

#interviewArea > ul .mem01:hover{
	box-shadow:0 0 10px rgba(0, 116, 191, .35);
}
#interviewArea > ul .mem02:hover{
	box-shadow:0 0 10px rgba(5, 184, 182, .35);
}
#interviewArea > ul .mem03:hover{
	box-shadow:0 0 10px rgba(230, 93, 158, .35);
}
#interviewArea > ul .mem04:hover{
	box-shadow:0 0 10px rgba(241, 144, 19, .35);
}

@media print, screen and (max-width:1240px){
	#interviewArea{ width:100%; }
}
@media print, screen and (max-width:1080px){
	#interviewArea .heading-wrap{ display:block; }
	#interviewArea .heading-wrap p{ margin-bottom:50px;text-align:left; }
	#interviewArea > ul{ flex-wrap:wrap; }
	#interviewArea > ul > li{ width:calc((100% - 18px) / 2); }
}
@media print, screen and (max-width:1024px){
	#interviewArea ul{ margin-top:40px; }
}
@media print, screen and (max-width:768px){
	#interviewArea > ul > li{ width:100%; }
	#interviewArea > ul > li dl dt{
		font-size: 2.2rem;
		line-height: 3.2rem;
	}
	#interviewArea > ul li dl dd { font-size:1.6rem; }
}


#interviewArea > ul > li{ position:relative; }
#interviewArea > ul > li:before{
	content:"";
	display:block;
	width:20px;
	height:20px;
	bottom:20px;
	border-radius:50%;
	background:#fff;
	position:absolute;
	right:15px;
	transition:all .3s;
	z-index:3;
}
#interviewArea > ul > li:after{
	content:"";
	width:20px;
	height:20px;
	display:block;
	right:15px;
	position:absolute;
	transition:all .3s;
	background:#0074bf;
	-webkit-mask-image:url('../img/simple-arrow.svg');
	mask-image:url(
	'../img/simple-arrow.svg');
	-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;
	-webkit-mask-position:center;
	mask-position:center;
	-webkit-mask-size:8px 8px;
	mask-size:8px 8px;
	bottom:20px;
	z-index:4;
	transform:rotate(90deg);
}
#interviewArea > ul .mem01:after{
	background:#0074bf;
}
#interviewArea > ul .mem02:after{
	background:#05b8b6;
}
#interviewArea > ul .mem03:after{
	background:#e65d9e;
}
#interviewArea > ul .mem04:after{
	background:#f19013;
}
#interviewArea > ul > li:hover:before{ width:30px; height:30px; right:10px; bottom:15px; }

#interview-wrap > section:nth-of-type(odd) .imagebox > p{
	width:100%;
	padding-left:100px;
	overflow:hidden;
}
#interview-wrap > section:nth-of-type(even) .imagebox > p{
	width:100%;
	padding-right:100px;
	overflow:hidden;
}
#interview-wrap > section .imagebox img{
	width:100%;
}
#interview-wrap > section .imagebox{ position:relative; }
#interview-wrap > section .imagebox > div{
	width:576px;
	position:absolute;
}
#interview-wrap > section:nth-of-type(odd) .imagebox > div{left:0;top: 10%;}
#interview-wrap > section:nth-of-type(even) .imagebox > div{right:0;bottom: 10%;border-radius:5px 5px 0 0;}

#interview-wrap > section .imagebox h3 .en{
	display:block;
	margin-bottom: 15px;
	font-size:1.6rem;
	color:#666;
	font-weight: 600;
}
#interview-wrap > section .imagebox h3 strong{
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom:1px solid #dee1e2;
	display:block;
	font-size:3.2rem;
	line-height:4.8rem;
	font-weight:700;
	-webkit-background-clip:text;
	color:transparent;
}
#interview-wrap > section .imagebox > div > div{
	background:#fff;
	padding: 30px 50px 50px 60px;
	position:relative;
}
#interview-wrap .interview01 .imagebox > div > div:after{
	background-image:linear-gradient(180deg, #0074bf, #fff);
}
#interview-wrap .interview02 .imagebox > div > div:after{
	background-image:linear-gradient(180deg, #0eb8ae, #fff);
}
#interview-wrap .interview03 .imagebox > div > div:after{
	background-image:linear-gradient(180deg, #e65d9e, #fff);
}
#interview-wrap .interview04 .imagebox > div > div:after{
	background-image:linear-gradient(180deg, #f19013, #fff);
}

#interview-wrap > section .imagebox.imagebox > div > div:after{
	content:"";
	display:block;
	width:7px;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
#interview-wrap > section .imagebox > div p{
	font-size:2.2rem;
	font-weight:500;
}
#interview-wrap > section .imagebox > div p span{
	margin-top: 10px;
	display:block;
	font-size:1.6rem;
}
#interview-wrap .in-image > .scene-image {
	width:480px;
	height:380px;
	margin: 0 0 60px 60px;
	border-radius:10px;
	overflow:hidden;
	float:right;
}
#interview-wrap .in-image > .scene-image::after {
	content:".";
	display:block;
	height:0.1em;
	clear:both;
	visibility:hidden;
	speak:none;
}
#interview-wrap > section > section{ margin:100px 160px 0; padding:0; }

#interview-wrap > section > section:last-child{
	margin-bottom:0;
}
#interview-wrap .talkArea h4{
	display:flex;
	font-size:2.4rem;
	line-height:3.8rem;
	margin-bottom:40px;
}
#interview-wrap .talkArea h4:before{
	content:"Q.";
	display:block;
	width: 3rem;
	margin-right:10px;
	color:#B5C6D1;
	font-size: 2.8rem;
	line-height:3rem;
	font-weight:700;
	background: linear-gradient(180deg, rgba(0, 116, 191, 1) 0%, rgba(14, 184, 174, 1) 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
#interview-wrap .talkArea p{
	font-weight:500;
	line-height:4rem;
	letter-spacing:.06em;
}
#interview-wrap .schedule{
	padding:40px;
	background:#fff;
	border-radius:15px;
	overflow:hidden;
	position:relative;
}
#interview-wrap .schedule + .schedule{ margin-top:40px; }
#interview-wrap .schedule:after{
	content:"";
	display:block;
	width:330px;
	height:330px;
	background:url(../../jobs/img/clock.png) 100% / 100% no-repeat;
	position:absolute;
	top:-10px;
	right:-20px;
}

#interview-wrap .schedule > div{ display:flex; gap:60px; }
#interview-wrap .schedule > div > div{ width:50%; }

#interview-wrap .schedule h5{
	margin-bottom:30px;
	padding-bottom:20px;
	border-bottom:1px solid #dee1e2;
	color:#333;
	font-size:2.2rem;
	line-height:2.8rem;
}
#interview-wrap .schedule dl{
	display:flex;
	align-items:flex-start;
	gap:30px;
}
#interview-wrap .schedule > div > div > dl:not(:last-child){ min-height:100px; }

#interview-wrap .schedule dl + dl{margin-top:20px;}
#interview-wrap .schedule dt{
	width:85px;
	display:inline-block;
	padding:8px 2px;
	text-align:center;
	font-size:1.8rem;
	line-height:2.4rem;
	font-weight:700;
	border-radius:5px;
	background:linear-gradient(45deg, rgba(0, 116, 191, 1) 0%, rgba(14, 184, 174, 1) 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	background:#eff2f3;
	position:relative;
}
#interview-wrap .schedule dd{
	width:calc(100% - 125px);
	padding-top:6px;
	font-size:1.8rem;
	line-height:2.8rem;
	font-weight:500;
}
#interview-wrap .schedule dd span{
	display:block;
	font-size:1.6rem;
}
#interview-wrap .schedule dt:after{
	content:'';
	display:block;
	height:48px;
	width:7px;
	background:url(../../jobs/img/dots-line.png) 100% / 100% no-repeat;
	position:absolute;
	top:62px;
	right:4rem;
}
#interview-wrap .schedule > div > div > dl:last-child dt:after{
	display:none;
}

@media print, screen and (max-width:1399px){
	#interview-wrap > section .imagebox > div > div { padding:30px 40px 40px 50px; }
	#interview-wrap > section .imagebox > div{ width:38%; }
}
@media print, screen and (max-width:1240px){
	#interview-wrap > section { padding-left:0; padding-right:0; }
	#interview-wrap > section > section{ margin:50px 20px 0; }
	#interview-wrap > section .imagebox > p{ padding:0!important; }
	#interview-wrap > section:nth-of-type(even) .imagebox > div{ bottom:20px; }
	#interview-wrap > section:nth-of-type(odd) .imagebox > div{ top:20px; }
	#interview-wrap > section .imagebox > div p { font-size:1.8rem; }
	#interview-wrap > section .imagebox > div p span {
		margin-top:5px;
		display:block;
		font-size:1.4rem;
	}
	#interview-wrap > section .imagebox h3 strong {
		font-size: 2.4rem;
		line-height:3.4rem;
	}
	#interview-wrap > section .imagebox h3 .en {
		margin-bottom:10px;
		font-size:1.4rem;
	}
	#interview-wrap .in-image > .scene-image{
		width:40%;
		height:auto;
		margin:30px 0 30px 30px;
	}
	#interview-wrap .talkArea h4{ margin-bottom:30px; }
}

@media print, screen and (max-width:1024px){
	#interview-wrap > section:nth-of-type(even) .imagebox > div,
	#interview-wrap > section:nth-of-type(odd) .imagebox > div{
		width:100%;
		position:static;
	}
	#interview-wrap > section .imagebox img {
		object-fit:cover;
	}

	#interview-wrap .schedule dt{
		width:60px;
		font-size:1.6rem;
		line-height:2.2rem;
	}
	#interview-wrap .schedule dd{
		width:calc(100% - 90px);
		font-size:1.6rem;
		line-height:2.6rem;
	}
	#interview-wrap .schedule dd span{
		font-size:1.4rem;
	}
	#interview-wrap .schedule dt:after { right:3rem; }
	#interview-wrap .schedule:after {
		width:200px;
		height:200px;
	}
	#interview-wrap > section .imagebox > div > div { margin:0; }
	#interview-wrap .talkArea h4{ margin-bottom:30px; }
}


@media print, screen and (max-width:787px){
	#interview-wrap .in-image > .scene-image{
		float:none;
		width:100%;
		margin:20px 0 30px;
		border-radius:0;
	}

	#interview-wrap .in-image > .scene-image img{ width:100%; }
	#interview-wrap .talkArea h4{
		font-size:2rem;
		line-height:3.4rem;
		margin-bottom:15px;
	}
	#interview-wrap .talkArea h4:before {
		margin-right:5px;
		font-size: 2rem;
	}
	#interview-wrap .schedule > div {
		flex-direction:column;
		gap:20px;
	}
	#interview-wrap .schedule > div > div{ width:100%; }
	#interview-wrap .schedule > div > div:not(:last-child) > dl:last-child dt:after{ display:block; }
	#interview-wrap .schedule > div > div:not(:last-child) > dl:last-child{ min-height:100px; }

	#interview-wrap .schedule h5 {
		margin-bottom:15px;
		padding-bottom:10px;
		font-size:1.8rem;
		line-height:2.8rem
	}
	#interview-wrap > section .imagebox > div p { font-size:1.6rem; }
	#interview-wrap .schedule{ padding:20px; }
}
#personalArea{
	margin:0 100px;
	padding:120px 0 0;
}
#personalArea > div{display:flex;align-items: center;gap:70px;}

#personalArea > div > p{ width:50%; text-align:center; }
#personalArea .conditions-list{
	max-width:600px;
}
#personalArea .conditions-list > dl dt{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	font-size:2.8rem;
	line-height:4rem;
	font-weight:700;
}
#personalArea .conditions-list > dl dt:before{
	content:"";
	height: 14px;
	width:14px;
	margin-right:20px;
	border-radius:50%;
}
#personalArea .conditions-list > dl:first-child dt:before{ background:#dc296c; }
#personalArea .conditions-list > dl:nth-child(2) dt:before{ background:#f19013; }
#personalArea .conditions-list > dl:nth-child(3) dt:before{ background:#06b8b6; }
#personalArea .conditions-list > dl dd{ line-height:3.2rem; }
#personalArea .conditions-list > dl + dl{ margin-top:60px; }

@media print, screen and (max-width:1300px){
	#personalArea .conditions-list{ max-width:calc(50% - 50px); }
}
@media print, screen and (max-width:1240px){
	#personalArea {margin:0;padding:70px 20px 0;}
	#personalArea > div{ gap:50px; }
	#personalArea .conditions-list > dl dt {
		margin-bottom:20px;
		font-size:2.4rem;
		line-height:3.2rem;
	}
}
@media print, screen and (max-width:1024px){
	#personalArea > div { flex-direction:column; }
	#personalArea > div > p,
	#personalArea .conditions-list{ width:100%; max-width:100%; }
	#personalArea .conditions-list > dl + dl{ margin-top:40px; }
}
@media print, screen and (max-width:787px){
	#personalArea .conditions-list > dl dt {
		margin-bottom:10px;
		font-size:2rem;
		line-height:3rem;
	}
}



/* ====================================
	私たちについて
==================================== */

/*会社概要*/
#aboutus #headtitleArea:after{
	background:url(../img/head-aboutus-img.jpg) no-repeat 100% / cover;
}
#aboutus #companyArea{ margin:0 100px; }
.table-wrap{margin-left:100px;border-top:1px solid #0eb8ae;background:#fff;}
.table-wrap dl{ display:flex; border-bottom:1px solid #0eb8ae; }

.table-wrap dl dt{
	width:170px;
	background:#e6f8f7;
}
.table-wrap dl dt,
.table-wrap dl dd{
	padding: 20px 20px;
	color: #333;
}
.table-wrap dl dd{line-height:3.2rem;width:calc(100% - 170px);}
.table-wrap dl dd p + p{ margin-top:1em; }
.table-wrap dl dd ul,
.table-wrap dl dd ol{ list-style:none; }
.table-wrap dl dd ol li{ text-indent:-1.25em; padding-left:1.25em; }
.table-wrap dl dd ul li{text-indent:-1em; padding-left:1em;}
.table-wrap dl dd ul li:before{ content:"・"; }

/*ヒストリー*/
#aboutus #historyArea{ margin:0 100px; }
#aboutus #historyArea > div{margin-left:100px;}
#aboutus #historyArea dl{
	display:flex;
	gap:115px;
	justify-content:space-between;
	padding-bottom:60px;
	position:relative;
}
#aboutus #historyArea dl dt{
	min-width:340px;
	font-size:1.8rem;
	font-weight:700;
	color:#666666;
	position:relative;
}
#aboutus #historyArea dl:not(:last-child):after{
	content:"";
	width:4px;
	height:100%;
	display:block;
	background:#dee1e2;
	position:absolute;
	left:323px;
	top:30px;
}
#aboutus #historyArea dl:before{
	content:"";
	width:30px;
	height:30px;
	display:block;
	border-radius:50%;
	background:#f58db6;
	position:absolute;
	left:310px;
	top:30px;
	z-index:2;
}
#aboutus #historyArea dl dt span{
	display:block;
	padding:0;
	font-size:8rem;
	line-height:8rem;
	font-family:"Lexend";
	font-weight:700;
	letter-spacing:0.06em;
	background:linear-gradient(45deg, rgba(0, 116, 191, 1) 0%, rgba(14, 184, 174, 1) 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
#aboutus #historyArea dl dt .year{width: 230px;}
#aboutus #historyArea dl dt .year > span + span{ margin-top:50px; }

#aboutus #historyArea dl dt .year > span + span:before {
	content:"-";
	display:block;
	background:linear-gradient(45deg, rgba(0, 116, 191, 1) 0%, rgba(14, 184, 174, 1) 100%);
	position:absolute;
	left:1.1em;
	top:70px;
	background:linear-gradient(45deg, rgba(0, 116, 191, 1) 0%, rgba(14, 184, 174, 1) 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	transform:rotate(90deg);
}
#aboutus #historyArea dl dd{
	margin-top:30px;
	width:calc(100% - 455px);
	font-size: 1.8rem;
	line-height: 3.2rem;
	font-weight: 700;
	color: #333;
}
#aboutus #historyArea dl dd img{
	width:100%;
	max-width: 400px;
	border-radius: 5px;
	margin-top:30px;
}
#aboutus #historyArea dl dd .bunner-image img{
	border-radius:0;
	border:1px solid #dee1e2;
	max-width: 653px;
}
@media print, screen and (max-width:1240px){
	#aboutus #historyArea,
	#aboutus #companyArea{ margin:0px; }
	#aboutus #historyArea > div,
	#aboutus #companyArea .table-wrap{ margin-left:20px; }
}
@media print, screen and (max-width:1023px){
	#aboutus #historyArea dl {margin-left:40px;display:block;}
	#aboutus #historyArea dl dd,
	#aboutus #historyArea dl dt{ width:100%; }

	#aboutus #historyArea dl:not(:last-child):after {
		content:"";
		width:2px;
		height:100%;
		display:block;
		background:#dee1e2;
		position:absolute;
		left:-48px;
		top:30px;
	}
	#aboutus #historyArea dl:before {
		width:25px;
		height:25px;
		left:-60px;
		top:30px;
	}
	#aboutus #historyArea dl dt span {
		font-size:6rem;
		line-height:6rem;
	}
	#aboutus #historyArea dl dt .year{display:block;width: 100%;}
	#aboutus #historyArea dl dt .year > span{
		display:inline;
	}
	#aboutus #historyArea dl dt .year > span + span:before {
		display:inline-block;
		transform:none;
		position:static;
	}
}

@media print, screen and (max-width:768px) {
	#aboutus #historyArea > div,
	#aboutus #companyArea .table-wrap {
		margin-left:0;
	}
	.table-wrap dl{ display:block; }
	.table-wrap dl dt,
	.table-wrap dl dd {
		padding:20px 10px;
		width:100%;
	}
	#aboutus #historyArea dl dd{
	font-size: 1.6rem;
	line-height: 2.8rem;
	}
	#aboutus #historyArea dl dt span {
		font-size:5.4rem;
		line-height:5.4rem;
	}
	#aboutus #historyArea dl:not(:last-child):after {
		left: -29px;
	}
	#aboutus #historyArea dl:before {
		left: -40px;
	}
}
@media print, screen and (max-width:400px) {
	#aboutus #historyArea dl dt span {
		font-size:4rem;
		line-height:4rem;
	}
}


/* ====================================
	募集要項　営業職
==================================== */
#requirements > section:not(.headtitleArea){
	margin:0 100px;
}
@media print, screen and (max-width:1240px){
	#requirements > section:not(.headtitleArea){ margin:0; }
	#requirements > section .table-wrap{ margin-left:20px; }
}
@media print, screen and (max-width:768px) {
	#requirements > section .table-wrap{
		margin-left:0;
	}
}

/*エントリーボタン*/
.con-entry-button{
	display:flex;
	justify-content:center;
}
.con-entry-button a{
	width:406px;
	display:flex;
	margin-top:50px;
	padding:30px 40px;
	border-radius:10px;
	border-radius:50px;
	font-size:2rem;
	color:#fff;
	font-weight: 700;
	background:linear-gradient(45deg, rgba(0, 116, 191, 1) 0%, rgba(14, 184, 174, 1) 100%);
	background-position:right bottom;
	position:relative;
	transition:background-position .3s ease;
}
.con-entry-button a:after{
	content:"";
	width:14px;
	height:14px;
	display:block;
	background:#fff;
	-webkit-mask-image:url(../img/standard-arrow.svg);
	mask-image:url(../img/standard-arrow.svg);
	-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;
	-webkit-mask-position:center;
	mask-position:center;
	-webkit-mask-size:14px 14px;
	mask-size:14px 14px;
	right:40px;
	top:50%;
	transform:translateY(-50%);
	position:absolute;
	transition:all .3s;
}
.con-entry-button a:hover {
	background-size:200% 200%;
}
.con-entry-button a:hover:after{
	right:30px;
}
@media print, screen and (max-width:768px) {
	.con-entry-button a{
		width:100%;
		max-width:406px;
		margin-top: 30px;
		padding: 20px 30px;
		font-size:1.8rem;
	}
}
.flowgroup{ padding-bottom:50px; display:flex; align-items:center; gap:70px; position:relative; }
.flowgroup:not(:last-child):before{
	content:"";
	width:4px;
	height:100%;
	display:block;
	background:#dee1e2;
	position:absolute;
	left:52px;
	top:30px;
}

.flowgroup > p{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	line-height:2rem;
	width:110px;
	height:110px;
	color:#fff;
	font-weight:500;
	border-radius:50%;
	background:linear-gradient(45deg, rgba(0, 116, 191, 1) 0%, rgba(14, 184, 174, 1) 100%);
	z-index:1;
}
.flowgroup > p > span{display:block;font-size:4rem;line-height:3.2rem;font-weight:700;}
.flowgroup dl{
	width:calc(100% - 180px);
	padding:30px;
	background:#fff;
	border-radius:5px;
	box-shadow: 0 0 10px rgba(0, 116, 191, .1);
}
.flowgroup dl dt{ margin-bottom:10px; font-size:2.4rem; line-height:3.4rem; }
.flowWrap{ margin-left:100px; }

@media print, screen and (max-width:1240px){
	.flowWrap{ margin-left:20px; }
}
@media print, screen and (max-width:768px) {
	.flowWrap{ margin-left:0; }
	.flowgroup > p{
		width:80px;
		height:80px;
		font-size:1.4rem;
	}
	.flowgroup > p > span {
		font-size:3.2rem;
		line-height:3.2rem;
	}
	.flowgroup:not(:last-child):before {
		left:38px;
		top:40px;
	}
	.flowgroup dl {
		padding:20px;
		width:calc(100% - 100px);
	}
	.flowgroup dl dt {
		font-size:2rem;
		line-height:3rem
	}
	.flowgroup { gap:20px; }
}

#flowArea { padding-bottom:120px; }

#requirements.sales #headtitleArea:after{
	background:url(../img/head-sales-img.jpg) no-repeat 100% / cover;
}

/* ====================================
	エントリーフォーム
==================================== */
#entry #headtitleArea:after{
	background:url(../img/head-entry-img.jpg) no-repeat 100% / cover;
}
#entry > section:not(.headtitleArea){
	margin:0 100px;
}
.formWrap{ margin-left:100px; }
@media print, screen and (max-width:1240px){
	.formWrap{ margin-left:20px; }
	#entry > section:not(.headtitleArea){ margin:0; }
}
@media print, screen and (max-width:768px) {
	.formWrap{ margin-left:0; }
}

#entry .formWrap a{
	color:#0074bf;
	text-decoration:underline;
}

#entry form{margin-top: 60px;}
#entry .visually-hidden{
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px
}
#entry .checktext{ margin-top:50px; text-align:center; }
#entry .c-checkbox{
	padding-left: 22px;
	margin-right: 10px;
	margin-bottom: 8px;
	display: inline-block;
}

#entry .c-checkbox.c-checkbox__vertical {
	display:block;
}
#entry .c-checkbox .c-checkbox__input:checked + .c-checkbox__label::after {
	transform:translateY(-50%) scale(1);
}
#entry .c-checkbox .c-checkbox__input[aria-hidden=true] + .c-checkbox__label {
	opacity:0.5;
}
#entry .c-checkbox .c-checkbox__input[aria-hidden=true] + .c-checkbox__label::before {
	background-color:#eee;
}
#entry .c-checkbox .c-checkbox__input[aria-hidden=true] + .c-checkbox__label::after {
	content:none;
}
#entry .c-checkbox__label{
	margin-bottom: 0;
	vertical-align: middle;
	position:relative;
}
#entry .c-checkbox__label::before,
#entry .c-checkbox__label::after{
	content: "";
	position: absolute;
	display: block;
}
#entry .c-checkbox__label::before {
	top: 50%;
	left: -26px;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	transform: translateY(-50%);
	pointer-events: none;
	background-color: #fff;
	border: 1px solid #222222;
	transition: background-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.3s cubic-bezier(0.19, 1, 0.2d2, 1);
}
#entry .c-checkbox__label::after {
	top: 50%;
	left: -25px;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	transform: translateY(-50%) scale(0);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: center center;
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
	transition: background-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

#entry .c-checkbox .c-checkbox__input:checked + .c-checkbox__label::before {
	background-color: #0074bf;
}
#entry .c-checkbox .c-checkbox__input:checked + .c-checkbox__label::after {
	transform: translateY(-50%) scale(1);
}
#entry .checkformError{ display:block; }

#entry :disabled{
	background:#888888!important;
	cursor: default!important;
}
#entry .c-checkbox .c-checkbox__input:focus + .c-checkbox__label::before {
	box-shadow:0 0 0 2px #222222!important;
}
#entry .formWrap input[tylpe="text"]{ width:60%; min-width:300px; }
#entry .formWrap dl:not(.tel-box){
	display:flex;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px #e0e0e0 solid;
	gap: 60px;
}
#entry .formWrap dl:not(.tel-box) dt{width: 300px;font-weight:700;}
#entry .formWrap dl:not(.tel-box) dt span{
	padding: 3px 15px;
	margin-left:10px;
	font-size: 1.4rem;
	line-height: 2.4rem;
	font-weight: 500;
	border-radius: 3px;
	background: #f58db6;
}
#entry .formWrap dl:not(.tel-box) dd{width: calc(100% - (300px + 60px));}
#entry .formWrap input[type="radio"]{ margin:0 0 0 3px; }
#entry .formWrap .form_btn input{
	width: 406px;
	display: flex;
	margin-top: 50px;
	padding: 30px 40px;
	border-radius: 50px;
	border:none;
	font-size: 2rem;
	color: #fff;
	font-weight: 700;
	background: linear-gradient(45deg, rgba(0, 116, 191, 1) 0%, rgba(14, 184, 174, 1) 100%);
	background-position: right bottom;
	position: relative;
	transition: background-position .3s ease;
}
#entry .formWrap .form_btn input:hover {
	background-size: 200% 200%;
}
#entry .formWrap .form_btn{
	display: flex;
	justify-content: center;
	gap: 20px;
}

@media print, screen and (max-width:768px) {
	#entry .formWrap input[type="submit"]{ width:100%; font-size:1.8rem; }
}
#entry.thankyou .formWrap h3,
#entry.confirm .formWrap h3,
#entry.error .formWrap h3{
	color: #0074bf;
	font-size: 2.4rem;
	line-height: 3.4rem;
	padding-bottom: 15px;
	margin-bottom: 25px;
	border-bottom: 1px solid;
}
#entry.thankyou .formWrap * +h3,
#entry.confirm .formWrap * +h3,
#entry.error .formWrap * +h3{ margin-top:20px; }

#entry.thankyou .tel-box{
	display: flex;
	align-items:baseline;
	margin-top:20px;
	gap:10px;
}
#entry.thankyou .tel-box dd{ font-size:1.8rem; }

#entry.thankyou .tel-box dd{
	font-size: 4rem;
	line-height: 5rem;
	font-weight: 400;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
}
#entry .formWrap .form_btn .backBtn{
	background:#fff;
	color:#888;
	border: 2px solid #888;
	transition: background .3s ease;
}
#entry .formWrap .form_btn .backBtn:hover{
	color:#fff;
	border: 2px solid #888;
	background:#888;
}
#entry .formWrap .month,
#entry .formWrap .day{
	width: 3em;
}
#entry .formWrap .year{ width:4em; }
#entry .formWrap .year,
#entry .formWrap .month,
#entry .formWrap .day{
	margin:0 5px;
}
@media print, screen and (max-width:768px) {
	#entry .formWrap dl:not(.tel-box) { flex-direction:column; gap:20px; }
	#entry .formWrap dl:not(.tel-box) dt,
	#entry .formWrap dl:not(.tel-box) dd{ width:100%; }
}
@media print, screen and (max-width:768px) {
	#entry.thankyou .formWrap h3,
	#entry.confirm .formWrap h3,
	#entry.error .formWrap h3{font-size: 2rem;}
	#entry.thankyou .tel-box{ flex-direction: column; }
	#entry .formWrap .form_btn input{
		width:100%;
		max-width:406px;
		margin-top: 30px;
		padding: 20px 30px;
		font-size: 1.8rem;
	}
	#entry .formWrap .form_btn { flex-direction: column; align-items: center; }
	#entry .formWrap .form_btn input + input{ margin-top:0!important; }
	#entry .formWrap input[tylpe="text"]{ width:100%; }
}