@charset "utf-8";
main {overflow: hidden;}
/*--------------------------------------------------

	Main visual
	
--------------------------------------------------*/
#mv .slider1 .splide__track {
	width: 90%;
	margin-left: auto !important;
	border-top-left-radius: calc(50px + 70 * ((100vw - 375px) / 1545));
	border-bottom-left-radius: calc(50px + 70 * ((100vw - 375px) / 1545));
	overflow: hidden;
}
#mv h1 {
	position: absolute;
	bottom: 4%;
	left: 4vw;
	z-index: 2;
	color: #fff;
	font-weight: 700;
	font-size: 4.15vw;
	text-shadow: 0 0 .3em rgba(0, 0, 0, 20%);
}
@media only screen and ( max-width : 500px ) {
}
/*--------------------------------------------------

	Message

--------------------------------------------------*/
#message {padding-top: calc(100px + 50 * ((100vw - 375px) / 1545));}
#message .inner {max-width: 1120px;}
#message .title {margin-bottom: -3em;}
#message .container {
	align-items: center;
	position: relative;
	z-index: 1;
	padding-bottom: calc(30px + 20 * ((100vw - 375px) / 1545));
}
#message .container::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 40vw;
	height: 70%;
	margin: 0 calc(50% - 50vw);
	border-radius: 120px 0 0 0;
	background: #FFE541;
}
#message .container .wrap {width: 60%;}
#message .container .wrap p {line-height: 2.5;letter-spacing: .02em;}
#message .container .wrap p span {
	border-bottom: 1px solid #707070;
	font-size: calc(18px + 6 * ((100vw - 375px) / 1545));
	line-height: 2;
}
#message .container figure {
	width: 35vw;
	margin: 0 calc(50% - 50vw);
	padding-right: calc(30px + 60 * ((100vw - 375px) / 1545));
}
#message .block {
	position: relative;
	z-index: 1;
	padding-top: calc(100px + 60 * ((100vw - 375px) / 1545));
	padding-bottom: calc(100px + 60 * ((100vw - 375px) / 1545));
	background: rgba(108, 99, 86);
}
#message .block::after {
	content: '';
	opacity: .4;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: url(../img/front/message/bg.webp) no-repeat center / cover;
}
#message .block .wrap p {
	color: #fff;
	font-weight: 400;
	font-size: calc(16px + 2 * ((100vw - 375px) / 1545));
	line-height: 2;
	letter-spacing: .05em;
}
@media only screen and ( max-width : 768px ) {
	#message .title {margin-bottom: calc(60px + 40 * ((100vw - 375px) / 1545));}
	#message .container .wrap {width: 100%;margin-bottom: 40px;}
	#message .container figure {width: 90%;margin: 0;}
}
/*--------------------------------------------------

	Points of works

--------------------------------------------------*/
#works {background: #EFEFEF;}
#works ul.list {display: grid;grid-template-columns: repeat(3, 1fr);gap: calc(20px + 30 * ((100vw - 375px) / 1545));}
#works ul.list li.item {
	padding: calc(15px + 10 * ((100vw - 375px) / 1545));
	padding-bottom: calc(20px + 10 * ((100vw - 375px) / 1545));
	border-radius: calc(40px + 10 * ((100vw - 375px) / 1545));
	background: #fff;
}
#works ul.list li.item figure {
	margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1545));
	overflow: hidden;
	border-radius: 30px 30px 0 0;
}
#works ul.list li.item h3 {
	margin-bottom: calc(10px + 10 * ((100vw - 375px) / 1545));
	color: #FF5700;
	font-weight: 700;
	font-size: calc(18px + 6 * ((100vw - 375px) / 1545));
	text-align: center;
}
#works ul.list li.item .wrap p {margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1545));font-weight: 400;}
#works ul.list li.item .wrap p:last-child {margin-bottom: 0;}
#works ul.list li.item ul {margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1545));}
#works ul.list li.item ul li {position: relative;padding-left: 20px;font-weight: 400;}
#works ul.list li.item ul li::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #FF5700;
}
@media only screen and ( max-width : 1024px ) {
	#works ul.list {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 768px ) {
	#works ul.list {grid-template-columns: repeat(1, 1fr);}
}
/*--------------------------------------------------

	Interview

--------------------------------------------------*/
#interview::before,
#interview::after {
	content: '';
	position: absolute;
	z-index: -1;
	width: 25%;
	height: 45%;
}
#interview::before {
	bottom: 10%;
	left: 0;
	border-bottom-right-radius: calc(50px + 70 * ((100vw - 375px) / 1545));
	background: #F8A17A;
}
#interview::after {
	top: 10%;
	right: 0;
	border-top-left-radius: calc(50px + 70 * ((100vw - 375px) / 1545));
	background: #FFF196;
}
#interview .splide .splide__track ul li {position: relative;overflow: hidden;}
#interview .splide .splide__track ul li a {position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;}
#interview .splide .splide__track ul li figure {position: relative;overflow: hidden;}
#interview .splide .splide__track ul li figure img {transition: transform .3s linear;}
#interview .splide .splide__track ul li:hover figure img {transform: scale(1.03);}
#interview .splide .splide__track ul li figure figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 10px 30px 8px 20px;
	border-radius: 0 120px 0 0;
	background: #51E8F9;
	color: #fff;
	font-size: calc(16px + 4 * ((100vw - 375px) / 1545));
	line-height: 1.2;
}
/*--------------------------------------------------

	Requirement

--------------------------------------------------*/
#requirement .inner {max-width: 1120px;}
.ChangeElem_Btn_Content {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 8px;
	margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1545));
}
.ChangeElem_Btn_Content button {
	position: relative;
	padding: 1.5em 0;
	border: none;
	background: #F7F7F7;
	color: #AAA;
	font-weight: 900;
	font-size: calc(16px + 4 * ((100vw - 375px) / 1545));
	letter-spacing: .1em;
	transition: .3s;
}
.ChangeElem_Btn_Content button.is-active {background: #76FFFE;color: #222;}
.ChangeElem_Panel p.txt {margin: 50px 0;font-weight: 700;letter-spacing: .1em;text-align: center;}
#requirement table {display: block;}
#requirement table tr {
	display: block;
	padding-top: calc(20px + 10 * ((100vw - 375px) / 1545));
	padding-bottom: calc(20px + 10 * ((100vw - 375px) / 1545));
	border-bottom: 1px solid #51E8F9;
}
#requirement table tr th {
	width: calc(223px + 100 * ((100vw - 375px) / 1545));
	padding-left: calc(40px + 40 * ((100vw - 375px) / 1545));
	font-size: 1.6rem;
	letter-spacing: .2em;
	vertical-align: middle;
}
#requirement table tr td {padding-right: 25px;font-weight: 400;letter-spacing: .01em;vertical-align: middle;}
#requirement table tr td p span {font-weight: 700;}
#requirement table tr td .wrap {margin-bottom: calc(20px + 5 * ((100vw - 375px) / 1545));}
#requirement table tr td .wrap:last-child {margin-bottom: 0;}
#requirement table tr td .wrap h3 {
	margin-bottom: calc(15px + 5 * ((100vw - 375px) / 1545));
	font-weight: 700;
	line-height: 1.7;
}
#requirement table tr td .wrap h3 span {padding: .1em .5em;background: #E1E1E1;font-weight: 400;line-height: 1.7;}
#requirement table tr td .wrap figure {
	width: 97%;
	margin: 0 auto;
	margin-top: calc(20px + 10 * ((100vw - 375px) / 1545));
}
#requirement table tr td .wrap figure.list {width: 90%;max-width: 500px;}
#requirement table tr td ul li.item {position: relative;padding-left: 20px;}
#requirement table tr td ul li ul li {position: relative;margin-left: 15px;padding-left: 20px;}
#requirement table tr td ul.normal li.item {padding-left: 0;}
#requirement table tr td ul li ul li::before {content: '└ ';position: absolute;left: 0;}
#requirement table tr td ul li.item::before {position: absolute;left: 0;}
#requirement table tr td ul.rhombus li.item::before {content: '◆';}
#requirement table tr td ul.square li.item::before {content: '■';}
#requirement table tr td ul.asterisk li.item::before {content: '※';}
#requirement table tr td ul.square.gap li.item {margin-bottom: calc(20px + 20 * ((100vw - 375px) / 1545));}
#requirement table tr td ul.square.gap li.item:last-child {margin-bottom: 0;}
#requirement table tr td ul li h4 {font-weight: 700;line-height: 1.7;}
#requirement table tr td ul.square2 li.item h4 {position: relative;padding-left: 20px;}
#requirement table tr td ul.square2 li.item h4::before {content: '■';position: absolute;left: 0;}
#requirement table tr td ul.square2 li.item ul li {margin-left: 0;}
#requirement table tr td ul.rhombus2 li.item h4 {position: relative;padding-left: 20px;}
#requirement table tr td ul.rhombus2 li.item h4::before {content: '◆';position: absolute;left: 0;}
#requirement table tr td ul.rhombus2 li.item ul li {margin-left: 0;}
#requirement table tr td ul.rhombus3 p {position: relative;padding-left: 20px;}
#requirement table tr td ul.rhombus3 p::before {content: '◆';position: absolute;left: 0;}
#requirement table tr td ul.rhombus3 li.item ul li {margin-left: 0;}
@media only screen and ( max-width : 768px ) {
	.ChangeElem_Btn_Content {grid-template-columns: repeat(2, 1fr);}
	#requirement table tr th {
		display: block;
		margin-bottom: 20px;
		padding-left: 10px;
		border-left: 5px solid #51E8F9;
	}
	#requirement table tr td {display: block;padding-right: 0;}
}
@media only screen and ( max-width : 500px ) {
	.ChangeElem_Btn_Content {grid-template-columns: repeat(1, 1fr);}
	.ChangeElem_Btn_Content button {padding: 10px 0;}
}
/*--------------------------------------------------

	Company overview

--------------------------------------------------*/
#company {background: #D4F4F5;}
#company .container {background: #fff;}
#company .container p {
	margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1545));
	font-size: calc(15px + 3 * ((100vw - 375px) / 1545));
	text-align: center;
}
#company .container p:last-child {margin-bottom: 0;}
#company .container p span {font-size: 1.3em;line-height: 1.7;}
#company ol li.item {
	align-items: center;
	width: 97%;
	margin-bottom: calc(30px + 20 * ((100vw - 375px) / 1545));
	border-radius: 7.2em;
	background: #fff;
}
#company ol li.item:nth-of-type(even) {flex-direction: row-reverse;margin-left: auto;}
#company ol li.item:last-child {margin-bottom: 0;}
#company ol li.item figure {width: 50%;}
#company ol li.item .wrap {
	width: 46%;
	padding-top: calc(20px + 10 * ((100vw - 375px) / 1545));
	padding-bottom: calc(20px + 30 * ((100vw - 375px) / 1545));
}
#company ol li.item:nth-of-type(odd) .wrap {padding-right: calc(20px + 60 * ((100vw - 375px) / 1545));}
#company ol li.item:nth-of-type(even) .wrap {padding-left: calc(20px + 60 * ((100vw - 375px) / 1545));}
#company ol li.item .wrap dl {
	display: flex;
	justify-content: center;
	align-items: baseline;
	margin-bottom: calc(10px + 10 * ((100vw - 375px) / 1545));
	padding-bottom: calc(10px + 10 * ((100vw - 375px) / 1545));
	border-bottom: 1px solid #000;
}
#company ol li.item .wrap dl dt {
	margin-right: calc(10px + 10 * ((100vw - 375px) / 1545));
	color: #EFEFEF;
	font-size: calc(50px + 50 * ((100vw - 375px) / 1545));
	line-height: 1;
}
#company ol li.item .wrap dl dd {font-size: calc(20px + 14 * ((100vw - 375px) / 1545));line-height: 1.4;}
#company ol li.item:last-child .wrap dl dd {flex: 1;}
#company ol li.item .wrap dl dd span {color: #51E8F9;}
#company ol li.item .wrap .content {
	width: 80%;
	margin: 0 auto calc(20px + 10 * ((100vw - 375px) / 1545));
	text-align: center;
}
#company ol li.item .wrap .content:last-child {margin-bottom: 0;}
#company ol li.item .wrap .content p {margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1545));line-height: 2;}
#company ol li.item .wrap .content p:last-child {margin-bottom: 0;}
#company ol li.item .wrap .content p span {border-bottom: 1px solid #000;font-weight: 700;}
#company ol li.item .wrap .content img {width: 80%;margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1545));}
#company ol li.item .wrap ul {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;}
#company ol li.item .wrap ul li {
	padding-top: calc(10px + 5 * ((100vw - 375px) / 1545));
	padding-bottom: calc(10px + 5 * ((100vw - 375px) / 1545));
	background: #F2F2F2;
	text-align: center;
}
#company ol li.item .wrap ul li img {width: 80%;margin-bottom: 10px;}
#company ol li.item .wrap ul li p {text-align: center;}
#company .banner_container {padding-bottom: calc(60px + 20 * ((100vw - 375px) / 1545));}
#company .banner_container p {
	margin-bottom: calc(10px + 10 * ((100vw - 375px) / 1545));
	font-size: calc(16px + 4 * ((100vw - 375px) / 1545));
	font-weight: 700;
	letter-spacing: .1em;
	text-align: center;
}
#company .banner_container p span {
	display: inline-block;
	position: relative;
	padding: 0 40px;
	line-height: 1.5;
	text-align: center;
}
#company .banner_container p span::before,
#company .banner_container p span::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 30px;
	height: 2px;
	background: #000;
}
#company .banner_container p span::before {left: 0;transform: rotate(60deg);}
#company .banner_container p span::after {right: 0;transform: rotate(-60deg);}
#company .banner_container a {display: block;width:46%;max-width: 750px;margin: 0 15px 30px;}
@media only screen and ( max-width : 1024px ) {
	#company ol li.item:nth-child(odd) {border-radius: 0 7em 7em 0;}
	#company ol li.item:nth-child(even) {border-radius: 7em 0 0 7em;}
	#company ol li.item figure {width: 100%;}
	#company ol li.item .wrap {width: 100%;padding: 20px 20px 60px;}
	#company ol li.item .wrap dl {align-items: center;justify-content: flex-start;padding-left: 20px;}
	#company ol li.item .wrap .content {width: 90%;}
	#company ol li.item .wrap .content img {width: 100%;}
	#company ol li.item .wrap ul {grid-template-columns: repeat(2, 1fr);max-width: 400px;margin: 0 auto;}
	#company ol li.item .wrap ul li {padding: 15px 10px;}
}
@media only screen and ( max-width : 767px ) {
	#company .banner_container a {width: 100%;}
}
/*--------------------------------------------------

	Entry

--------------------------------------------------*/
#entry {
	padding-top: calc(70px + 110 * ((100vw - 375px) / 1545));
	padding-bottom: calc(30px + 150 * ((100vw - 375px) / 1545));
	border: solid #53EDFF calc(30px + 60 * ((100vw - 375px) / 1545));
}
#entry .wrap p {margin-bottom: calc(40px + 60 * ((100vw - 375px) / 1545));text-align: center;}
#entry .wrap a {
	display: block;
	max-width: 300px;
	margin: 0 auto;
	padding-top: calc(20px + 10 * ((100vw - 375px) / 1545));
	padding-bottom: calc(20px + 10 * ((100vw - 375px) / 1545));
	border-radius: 100px;
	background: #53EDFF;
	color: #fff;
	font-weight: 900;
	letter-spacing: .2em;
	text-align: center;
}