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

	MAIN VISUAL

--------------------------------------------------*/
#mv {
	display: flex;
	flex-direction: row-reverse;
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, #03DAAC 10%, #B3F6A5 30% 100%);
}
#mv .content {
	position: absolute;
	bottom: 45%;
	left: 13vw;
	z-index: 1;
	transform: translateY(50%);
	width: 100%;
	margin-left: 10px;
}
#mv .content h1 {font-weight: 700;font-size: 2.8vw;letter-spacing: .1em;}
#mv .content h1 span {display: flex;align-items: center;margin: 1.5% 0;}
#mv .content h1 span img {width: 24vw;margin: 0 2% 0 -10px;}
#mv .splide {width: 65%;margin-left: auto;}
@media only screen and ( max-width : 768px ) {
	#mv {flex-direction: column-reverse;margin-top: 80px;}
	#mv .content {
		position: initial;
		transform: none;
		padding: 6% 0;
		background: linear-gradient(90deg, #03DAAC 10%, #B3F6A5 30% 100%);
	}
	#mv .content h1 {
		width: 90%;
		max-width: calc(1000px + 2 * ((100vw - 375px) / 1605));
		margin: 0 auto;
	}
	#mv .content h1 {font-size: 9vw;}
	#mv .content h1 span img {width: 70vw;}
	#mv .splide {width: 100%;}
}
/*--------------------------------------------------

	MESSAGE

--------------------------------------------------*/
#message {background: linear-gradient(90deg, #D1F5E5, #E1F3D9);}
#message .container {margin-bottom: calc(40px + 30 * ((100vw - 375px) / 1605));}
#message .container h3 {
	margin-bottom: calc(20px + 20 * ((100vw - 375px) / 1605));
	font-weight: 700;
	font-size: calc(18px + 6 * ((100vw - 375px) / 1605));
	text-align: center;
}
#message .container p {line-height: 2;text-align: center;}
#message ul {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1;
}
#message ul::before {
	content: '';
	position: absolute;
	left: 5%;
	z-index: -1;
	width: 66%;
	height: 5px;
    background: #1AAA87;
}
#message ul::after {
	content:  '';
	position:  absolute;
    top: 50%;
    left: 69.7%;
	z-index: -1;
	transform: translate(50%, -50%);
    border-style: solid;
    border-width: 11.5px 0 11.5px 12px;
    border-color: transparent transparent transparent #1AAA87;
}
#message ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 220px;
	height: 220px;
	margin-right: 10px;
	border-radius: 50%;
	background: #fff;
}
#message ul li:nth-child(3) {margin-right: 30px;}
#message ul li:nth-child(4) {width: 280px;height: 280px;margin-right: 0;}
#message ul li .content {text-align: center;}
#message ul li .content h4 {
	margin-bottom: calc(10px + 5 * ((100vw - 375px) / 1605));
	color: #1AAA87;
	font-weight: 700;
	font-size: calc(16px + 4 * ((100vw - 375px) / 1605));
	text-align: center;
}
#message ul li .content img {margin-bottom: calc(10px + 5 * ((100vw - 375px) / 1605));}
#message ul li:nth-child(1) .content img {width: 20%;}
#message ul li:nth-child(2) .content img {width: 30%;}
#message ul li:nth-child(3) .content img {width: 43%;}
#message ul li:nth-child(4) .content img {width: 28%;}
#message ul li .content p {line-height: 1.6;letter-spacing: 0;text-align: center;}
@media only screen and ( max-width : 768px ) {
	#message ul {display: block;}
	#message ul::before {left: 50%;transform: translateX(-50%);width: 5px;height: 70%;}
	#message ul::after {top: 69.5%;left: 50%;transform: translate(-50%, 0) rotate(90deg);}
	#message ul li {margin: 0 auto 10px;}
	#message ul li:nth-child(3) {margin: 0 auto 20px;}
	#message ul li:nth-child(4) {margin: 0 auto;}
}
@media only screen and ( max-width : 500px ) {
	#message .container h3 {text-align: left;}
	#message .container p {text-align: left;}
}
/*--------------------------------------------------

	BUSINESS

--------------------------------------------------*/
#business .txt {margin-bottom: calc(30px + 20 * ((100vw - 375px) / 1605));text-align: center;}
#business .container {
	max-width: 557px;
	margin: 0 auto calc(30px + 20 * ((100vw - 375px) / 1605));
	padding: calc(15px + 15 * ((100vw - 375px) / 1605));
	background: #F4FBF1;
	text-align: center;
}
#business .container img {width: 90%;}
#business ul {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px 20px;}
#business ul li {display: flex;}
#business ul li figure {
	width: calc(55px + 15 * ((100vw - 375px) / 1605));
	margin-right: calc(10px + 10 * ((100vw - 375px) / 1605));
}
#business ul li .content {flex: 1;}
#business ul li .content h3 {
	margin-bottom: 5px;
	color: #1AAA87;
	font-weight: 700;
	font-size: calc(14px + 2 * ((100vw - 375px) / 1605));
	line-height: 1.4;
}
#business ul li .content p {font-size: 1.3rem;line-height: 1.4;}
@media only screen and ( max-width : 768px ) {
	#business ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 500px ) {
	#business ul {grid-template-columns: repeat(1, 1fr);gap: 20px;}
}
/*--------------------------------------------------

	WORK STYLE

--------------------------------------------------*/
#work_style {overflow: hidden;background: #F7F7F7;}
#work_style .block1 {margin-bottom: calc(50px + 50 * ((100vw - 375px) / 1605));}
#work_style .block1 ul li {
	align-items: flex-start;
	position: relative;
	margin-bottom: calc(30px + 20 * ((100vw - 375px) / 1605));
}
#work_style .block1 ul li:nth-of-type(odd) {flex-direction: row-reverse;}
#work_style .block1 ul li::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 60%;
	height: 550px;
}
#work_style .block1 ul li:nth-of-type(odd)::before {
	left: -10vw;
	background: url(../img/work_style/point/bg_triangleL.svg) no-repeat center left / 100%;
}
#work_style .block1 ul li:nth-of-type(even)::before {
	right: -10vw;
	background: url(../img/work_style/point/bg_triangleR.svg) no-repeat center right / 100%;
}
#work_style .block1 ul li:last-child {margin-bottom: 0;}
#work_style .block1 ul li figure {width: 50%;}
#work_style .block1 ul li .content {width: 45%;}
#work_style .block1 ul li .content p.point {
	display: flex;
	align-items: center;
	margin-bottom: calc(10px + 10 * ((100vw - 375px) / 1605));
	color: #1AAA87;
	font-size: calc(20px + 4 * ((100vw - 375px) / 1605));
}
#work_style .block1 ul li .content p.point img {width: 46px;margin-right: 15px;}
#work_style .block1 ul li .content h3 {
	margin-bottom: calc(10px + 10 * ((100vw - 375px) / 1605));
	font-weight: 700;
	font-size: calc(18px + 6 * ((100vw - 375px) / 1605));
}
#work_style .block2 {margin-bottom: calc(50px + 50 * ((100vw - 375px) / 1605));}
#work_style .block2 ul {display: grid;grid-template-columns: repeat(3, 1fr);gap: calc(10px + 10 * ((100vw - 375px) / 1605));}
#work_style .block2 ul li {
	padding-top: calc(20px + 20 * ((100vw - 375px) / 1605));
	padding-bottom: calc(18px + 12 * ((100vw - 375px) / 1605));
	text-align: center;
}
#work_style .block2 ul li:nth-child(odd) {background: #19DFBE;}
#work_style .block2 ul li:nth-child(even) {background: #ABE338;}
#work_style .block2 ul li p {
	margin-bottom: calc(24px + 26 * ((100vw - 375px) / 1605));
	color: #fff;
	font-weight: 700;
	font-size: calc(14px + 10 * ((100vw - 375px) / 1605));
	text-align: center;
}
#work_style .block2 ul li p span {
	display: block;
	font-size: calc(16px + 14 * ((100vw - 375px) / 1605));
	line-height: 1.4;
	text-align: center;
}
#work_style .block2 ul li:nth-child(1) img {width: calc(36px + 34 * ((100vw - 375px) / 1605));;}
#work_style .block2 ul li:nth-child(2) img {width: calc(41px + 39 * ((100vw - 375px) / 1605));;}
#work_style .block2 ul li:nth-child(3) img {width: calc(41px + 39 * ((100vw - 375px) / 1605));;}
#work_style .block2 ul li:nth-child(4) img {width: calc(44px + 41 * ((100vw - 375px) / 1605));;}
#work_style .block2 ul li:nth-child(5) img {width: calc(72px + 66 * ((100vw - 375px) / 1605));;}
#work_style .block2 ul li:nth-child(6) img {width: calc(36px + 34 * ((100vw - 375px) / 1605));;}
#work_style .block3 {
	padding: calc(20px + 30 * ((100vw - 375px) / 1605));
	padding-top: calc(30px + 20 * ((100vw - 375px) / 1605));
	background: #fff;
}
#work_style .block3 .ttl_content {margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1605));}
#work_style .block3 .ttl_content h3 {
	margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1605));
	font-weight: 700;
	font-size: calc(18px + 6 * ((100vw - 375px) / 1605));
	text-align: center;
}
#work_style .block3 .ttl_content p {margin-bottom: calc(15px + 10 * ((100vw - 375px) / 1605));text-align: center;}
#work_style .block3 .ttl_content p:last-child {margin-bottom: 0;}
#work_style .block3 .container {margin-bottom: calc(40px + 35 * ((100vw - 375px) / 1605));}
#work_style .block3 .container:last-child {margin-bottom: 0;}
#work_style .block3 .container .career_content {padding: 20px;border: 1px solid #25AE8D;}
#work_style .block3 .container .career_content h4 {margin-bottom: 10px;color: #1AAA87;font-weight: 700;text-align: center;}
#work_style .block3 .container .career_content p.txt {margin-bottom: 10px;text-align: center;}
#work_style .block3 .container:nth-child(1) .career_content figure {width: 85%;margin: 0 auto;}
#work_style .block3 .container .career_content ul {display: grid;grid-template-columns: repeat(7, 1fr);gap: 10px;}
#work_style .block3 .container .career_content ul li {
	justify-content: center;
	align-items: center;
	padding: 25px 0;
	border-radius: 10px;
	background: #F7F7F7;
	text-align: center;
}
#work_style .block3 .container .career_content ul li img {width: 40%;margin-bottom: 15px;}
#work_style .block3 .container .career_content ul li:nth-child(2) img {width: 32%;}
#work_style .block3 .container .career_content ul li:nth-child(3) img {width: 28%;}
#work_style .block3 .container .career_content ul li p {width: 100%;font-weight: 700;line-height: 1.2;text-align: center; font-size: 0.85em;}
#work_style .block3 .container .career_content .flex_content {margin-bottom: 20px;}
#work_style .block3 .container .career_content .flex_content table {width: 48%;}
#work_style .block3 .container .career_content .flex_content table tr {display: block;margin-bottom: 5px;}
#work_style .block3 .container .career_content .flex_content table tr:last-child {margin-bottom: 0;}
#work_style .block3 .container .career_content .flex_content table tr th {vertical-align: middle;}
#work_style .block3 .container .career_content .flex_content table tr th span {
	display: block;
	width: 100px;
	padding: 4px 10px;
	border-radius: 15px;
	background: #1AAA87;
	color: #fff;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
}
#work_style .block3 .container .career_content .flex_content table:nth-child(2) tr th span {background: #19DFBE;}
#work_style .block3 .container .career_content .flex_content table:nth-child(2) tr:last-child th span {background: #63F280;}
#work_style .block3 .container .career_content .flex_content table tr td {padding-left: 10px;vertical-align: middle;}
#work_style .block3 .container .career_content p.txtR {text-align: right;}
@media only screen and ( max-width : 1024px ) {
	#work_style .block3 .container .career_content ul {grid-template-columns: repeat(3, 1fr);}
}
@media only screen and ( max-width : 768px ) {
	#work_style .block1 {max-width: 500px;margin: 0 auto 50px;}
	#work_style .block2 ul li:nth-child(1) {order: 1;}
	#work_style .block2 ul li:nth-child(2) {order: 2;}
	#work_style .block2 ul li:nth-child(3) {order: 4;}
	#work_style .block2 ul li:nth-child(4) {order: 3;}
	#work_style .block2 ul li:nth-child(5) {order: 5;}
	#work_style .block2 ul li:nth-child(6) {order: 6;}
	#work_style .block1 ul li::before {top: 65%;width: 112%;}
	#work_style .block1 ul li figure {width: 100%;margin-bottom: 20px;}
	#work_style .block1 ul li .content {width: 100%;}
	#work_style .block2 ul {grid-template-columns: repeat(2, 1fr);}
	#work_style .block3 .container .career_content figure {max-width: 250px;margin: 0 auto;}
	#work_style .block3 .container .career_content .flex_content table {width: 100%;}
	#work_style .block3 .container .career_content .flex_content table tr th {display: none;margin: 20px 0 10px;}
	#work_style .block3 .container .career_content .flex_content table:nth-child(1) tr th {margin-top: 10px;}
	#work_style .block3 .container .career_content .flex_content table tr:nth-child(1) th {display: block;}
	#work_style .block3 .container .career_content .flex_content table:nth-child(2) tr:last-child th {display: block;}
	#work_style .block3 .container .career_content .flex_content table tr th span {width: 100%;}
	#work_style .block3 .container .career_content .flex_content table tr td {padding-left: 0;}
}
@media only screen and ( max-width : 500px ) {
	#work_style .block3 .container .career_content ul {grid-template-columns: repeat(2, 1fr);}
}
/*--------------------------------------------------

	INTERVIEW

--------------------------------------------------*/
#interview .inner {max-width: calc(1530px + 2 * ((100vw - 375px) / 1605));}
#interview ul {display: flex;flex-wrap: wrap;justify-content: center;gap: 30px;}
#interview ul li {
	position: relative;
	z-index: 1;
	width: calc((100% - 90px)/4);
	min-width: 300px;
	padding-bottom: 30px;
	background: #fff;
	transition: color 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#interview ul li:hover {transform: translateY(0);}
#interview ul li:before {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: '';
	transition: transform 0.2s, background-color 0.2s;
	transform: translate(10px, 10px);
	background-color: #E5FBF8;
}
#interview ul li:hover:before {transform: translate(5px, 5px);}
#interview ul li::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #fff;
	transition: .3s;
}
#interview ul li a {position: absolute;top: 0;left: 0;z-index: 2;width: 100%;height: 100%;}
#interview ul li figure {overflow: hidden;}
#interview ul li figure img {transition: ease-in-out .5s;}
#interview ul li:hover figure img {transform: scale(1.1);}
#interview ul li .content {position: relative;z-index: 1;margin-top: -20px;}
#interview ul li:hover .content::before {right: 0;bottom: 0;}
#interview ul li h3 {
	position: relative;
	z-index: 1;
	max-width: 200px;
	margin: -1em auto 0 0;
	padding: 5px 10px;
	background: #00CB7F;
	color: #fff;
	font-weight: 700;
}
#interview ul li .content {padding: 45px 20px 20px;}
#interview ul li .content p {margin-bottom: 20px;font-size: calc(15px + 3 * ((100vw - 375px) / 1605));}
#interview ul li .wrap {
	align-items: flex-end;
	position: absolute;
	right: 20px;
	bottom: 25px;
	left: 20px;
}
#interview ul li .wrap p.department span {
	margin-left: 15px;
	color: #ccc;
	font-size: calc(11px + 2 * ((100vw - 375px) / 1605));
}
#interview ul li .wrap p.read {
	display: inline-block;
	position: relative;
	padding-right: 30px;
	font-size: calc(11px + 2 * ((100vw - 375px) / 1605));
}
#interview ul li .wrap p.read::before {
	content: '';
	position: absolute;
	bottom: -1px;
	left: -5px;
	transform: skew(45deg);
	width: 100%;
	height: 8px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	transition: .3s;
}
#interview ul li:hover .wrap p.read::before {width: 110%;}
@media only screen and ( max-width : 1024px ) {
	#interview ul li {width: calc((100% - 30px)/2);}
}
@media only screen and ( max-width : 500px ) {
	#interview ul {gap: 50px;}
	#interview ul li {width: 100%;}
}
/*--------------------------------------------------

	CHARACTER

--------------------------------------------------*/
#character {background: #F7F7F7;}
#character ul {display: grid;grid-template-columns: repeat(3, 1fr);gap: calc(20px + 20 * ((100vw - 375px) / 1605));}
#character ul li {
	padding: 40px 20px;
	border-radius: 20px;
	background: #fff;
}
#character ul li h3 {
	margin-bottom: 20px;
	color: #00CB7F;
	font-weight: 700;
	font-size: calc(16px + 4 * ((100vw - 375px) / 1605));
	text-align: center;
}
#character ul li p {letter-spacing: .15em;}
@media only screen and ( max-width : 1024px ) {
	#character ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 500px ) {
	#character ul {grid-template-columns: repeat(1, 1fr);}
}
/*--------------------------------------------------

	REQUIREMENT

--------------------------------------------------*/
#requirement p.txt {text-align: center;}
.ChangeElem_Btn_Content {display: flex;}
.ChangeElem_Btn_Content button {
	position: relative;
	width: calc(100% / 4);
	padding: 2em 0;
	border: 2px solid #F5F5F5;
	border-left: 2px solid #EBEBEB;
	background: #F5F5F5;
	font-size: calc(14px + 2 * ((100vw - 375px) / 1605));
	letter-spacing: .2em;
	text-align: center;
	transition: .3s;
}
.ChangeElem_Btn_Content button:nth-child(1) {border-left: 0;}
.ChangeElem_Btn_Content button.is-active {
	z-index: 1;
	border: 2px solid #29AA87;
	border-bottom: none;
	background: #fff;
	color: #25AE8D;
	font-weight: 700;
}
#requirement .ChangeElem_Panel {
	position: relative;
	top: -2px;
	padding-top: calc(30px + 30 * ((100vw - 375px) / 1605));
	border-top: 2px solid #29AA87;
}
#requirement table {max-width: 900px;margin: 0 auto;}
#requirement table tr {display: block;padding: 15px 0;border-bottom: 1px solid #ccc;}
#requirement table tr:first-child {padding-top: 0;}
#requirement table tr:last-child {padding-bottom: 0;border-bottom: 0;}
#requirement table tr th {
	width: 190px;
	padding-left: 30px;
	font-weight: 700;
	letter-spacing: .2em;
	vertical-align: top;
}
#requirement table tr td {vertical-align: middle;letter-spacing: .2em;}
#requirement table tr td p {margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1605));}
#requirement table tr td p:last-child {margin-bottom: 0;}
#requirement table tr td ul {margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1605));}
#requirement table tr td ul:last-child {margin-bottom: 0;}
#requirement table tr td ul li {position: relative;padding-left: 18px;}
#requirement table tr td ul li::before {position: absolute;left: 0;}
#requirement table tr td ul.square li::before {content: '■';}
#requirement table tr td ul.dot li::before {content: '・';}
#requirement table tr td ul.asterisk li::before {content: '※';}
#requirement table tr td strong {font-weight: bold;}
@media only screen and ( max-width : 768px ) {
	.ChangeElem_Btn_Content {display: block;border-bottom: none;}
	.ChangeElem_Btn_Content button {width: 100%;margin-bottom: 5px;padding: 10px 0;}
	.ChangeElem_Btn_Content button:last-child {margin-bottom: 0;}
	.ChangeElem_Btn_Content button.is-active {border-bottom: 2px solid #29AA87;}
	#requirement .ChangeElem_Panel {border-top: none;}
	#requirement table tr {padding-top: 0;border-bottom: none;}
	#requirement table tr th {
		display: block;
		width: 100%;
		margin-bottom: 5px;
		padding: 0 0 5px;
		border-bottom: 1px solid #ccc;
	}
	#requirement table tr td {display: block;}
}