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

	FIX LIST
	
--------------------------------------------------*/
ul.fix_list {position: fixed;right: 0;bottom: 12%;z-index: 10;overflow: hidden;border-radius: 3vw 0 0 3vw;}
ul.fix_list li a {
	display: block;
	padding: 2.5vw 1.5vw 2vw;
	background: #f5fcff;
	color: #4067E8;
	font-size: 1.2vw;
	line-height: 1.2;
	text-align: center;
	width: 155px;
}
ul.fix_list li:nth-child(2) a {background: linear-gradient(45deg, #599DF8, #2441E2);color: #fff;}
ul.fix_list li a img {display: block;width: 45%;margin: 0 auto 22%;}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	ul.fix_list li a{
		font-size: 2.4vw;
		width: 135px;
	}
}
@media only screen and ( max-width : 767px ) {
	ul.fix_list {bottom: 4%;}
	ul.fix_list li a {
		font-size: 3vw;
		width: 80px;
	}
}

/*--------------------------------------------------

	MAIN VISUAL
	
--------------------------------------------------*/
#mv figure {width: 80%;margin-left: auto;}
#mv h1 {position: absolute;top: 27%;left: 4vw;margin-bottom: 13%;font-size: 2vw;line-height: 1.5;}
#mv h1 span {
	display: block;
	margin-top: 5%;
	color: #4067E8;
	font-weight: bold;
	font-size: 1.8em;
	line-height: 1.3;
	letter-spacing: -.02em;
}
#mv ul.point_list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1vw;
	position: absolute;
	bottom: 15%;
	left: 4vw;
}
/*#mv ul.point_list li {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 2.5vw 1.5vw 1.5vw;
	overflow: hidden;
	border-radius: 1em;
	background: #1F9A59;
	color: #fff;
	font-weight: bold;
	font-size: 1.3vw;
	line-height: 1.4;
	text-align: center;
}*/
/*#mv ul.point_list li span {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4vw;
	height: 4vw;
	padding-bottom: 2%;
	border-radius: 50%;
	background: #fff;
	color: #1F9A59;
	font-size: 2vw;
}*/
#mv ul.point_list li {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 2.5vw 1.5vw 1.5vw;
	overflow: visible; /* hiddenからvisibleに変更 */
	border-radius: 1em;
	background: #4067E8;
	color: #fff;
	font-weight: bold;
	font-size: 1.2vw;
	line-height: 1.4;
	text-align: center;
}

#mv ul.point_list li span {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4vw;
	height: 4vw;
	border-radius: 50%;
	background: #fff;
	color: #1F9A59;
	font-size: 2vw;
	font-weight: bold;
}

#mv ul.point_list li span {
	display: flex;
	justify-content: center;
	align-items: center; /* flex-endからcenterに変更 */
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4vw;
	height: 4vw;
	/* padding-bottom: 2%; この行を削除 */
	border-radius: 50%;
	background: #fff;
	color: #4067E8;
	font-size: 2vw;
	font-weight: bold; /* 必要に応じて追加 */
}
@media only screen and ( max-width : 767px ) {
	#mv {padding-top: 40%;}
	#mv figure {width: 100%;}
	#mv h1 {top: 17%;font-size: 4vw;}
	#mv h1 span {font-size:1.6em;}
	#mv ul.point_list {
		position: absolute;
		bottom: -7%;
		left: 2vw;
		right: 2vw;
		padding: 1em;
		grid-template-columns:repeat(2, 1fr);
	}
	#mv ul.point_list li {padding: 4vw 0 2vw;font-size: 3.4vw;}
	#mv ul.point_list li span {width: 6vw;height: 6vw;font-size: 3vw;}
	#mv h3.toptext {
		position: absolute;
		bottom: -14%;        /* point_listより下に配置 */
		left: 4vw;
		right: 4vw;
		text-align: center;
		font-size: 3.5vw;   /* フォントサイズも調整 */
		line-height: 1.4;
		margin: 0;
	.mt50 {margin-top: 50px;}
	}
}
/*--------------------------------------------------

	MESSAGE │ メッセージ

--------------------------------------------------*/


#message h3 {
	margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);
	color: #000050;
	font-size: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 28px);
	text-align: center;
}
#message .container {align-items: flex-start;flex-direction: row-reverse;}
#message .container figure {width: 49%;}
#message .container .wrap {width: 48%;}
#message .container .wrap h4 {
	margin-bottom: clamp(15px, calc(15px + 5 * ((100vw - 375px) / 1545)), 20px);
	color: #4067E8;
	font-size: clamp(22px, calc(22px + 11 * ((100vw - 375px) / 1545)), 33px);
}
#message .container .wrap .content p {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#message .container .wrap .content p:last-child {margin-bottom: 0;}
@media only screen and (max-width: 767px){
	#message .container figure {width: 100%;margin-bottom: 30px;}
	#message .container .wrap {width: 100%;}
	#message .blank {margin-top: 50px;}
}
/*--------------------------------------------------

	MERIT │ ソエルガーデンで働く魅力

--------------------------------------------------*/
#merit {
	padding-top: clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px);
	padding-bottom: clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px);
	background: url(../img/front/merit/bg.webp) no-repeat center / cover;
}
#merit .block {
	width: 90%;
	margin: 0 auto;
	padding-top: clamp(70px, calc(70px + 60 * ((100vw - 375px) / 1545)), 130px);
	padding-bottom: clamp(70px, calc(70px + 80 * ((100vw - 375px) / 1545)), 150px);
	background: #fff;
}
#merit .block ul li {align-items: center;margin-bottom: clamp(50px, calc(50px + 50 * ((100vw - 375px) / 1545)), 100px);}
#merit .block ul li:nth-child(odd) {flex-direction: row-reverse;}
#merit .block ul li:last-child {margin-bottom: 0;}
#merit .block ul li figure {width: 46%;}
#merit .block ul li .container {width: 50%;}
#merit .block ul li .container .title_wrap {margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);}
#merit .block ul li .container .title_wrap p {
	color:  #7EB9D6;
	font-size: clamp(24px, calc(24px + 12 * ((100vw - 375px) / 1545)), 36px);
	letter-spacing: .1em;
}
#merit .block ul li .container .title_wrap p span {font-size: 2em;}
#merit .block ul li .container .title_wrap h3 {
	display: inline-block;
	color: #3953E5;
	font-size: clamp(18px, calc(18px + 14 * ((100vw - 375px) / 1545)), 32px);
	letter-spacing: .03em;
}
#merit .block ul li .container .title_wrap h3 img {
	display: block;
	width: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 24px);
	margin-left: clamp(70px, calc(70px + 80 * ((100vw - 375px) / 1545)), 150px);
}
#merit .block ul li .container .txt_wrap p {margin-bottom: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);}
#merit .block ul li .container .txt_wrap p strong {font-weight: bold;}
#merit .block ul li .container .txt_wrap p span {display: block; font-size: 0.8em; margin-top:1em; line-height:1.6; }
#merit .block ul li .container .txt_wrap p span.mt0 {margin-top: 0;}
#merit .block ul li .container .txt_wrap p:last-child {margin-bottom: 0;}
@media only screen and ( max-width: 767px ) {
	#merit .block ul li:nth-child(odd)::before,
	#merit .block ul li:nth-child(even)::before {background: linear-gradient(0deg, #fff 20%, #DBF0FF);}
	#merit .block ul li figure {width: 100%;margin-bottom: 30px;}
	#merit .block ul li .container {width: 100%;}
}
/*--------------------------------------------------

	SCHEDULE │ １日の仕事の流れの例

--------------------------------------------------*/
#schedule .inner {max-width: 1000px;}
#schedule ul li {
	width: 32%;
	padding: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	border: 6px solid #6A7FF0;
	border-radius: 30px;
}
#schedule ul li:nth-child(1) {border-color: #6DBFF2;}
#schedule ul li:nth-child(2) {border-color: #F7CD41;}
#schedule ul li figure {
	width: 70%;
	margin: 0 auto clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
}
#schedule ul li h3 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-size: clamp(18px, calc(18px + 14 * ((100vw - 375px) / 1545)), 32px);
	letter-spacing: .02em;
	text-align: center;
}
#schedule ul li p {margin-bottom: 10px;}
#schedule ul li p:last-child {margin-bottom: 0;}
#schedule ul li p a {
	display: block;
	padding: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	border: 5px solid #6A7FF0;
	border-radius: 3em;
	background: #6A7FF0;
	color: #fff;
	font-size: clamp(18px, calc(18px + 14 * ((100vw - 375px) / 1545)), 32px);
	letter-spacing: .02em;
	text-align: center;
}
#schedule ul li:nth-child(1) p a {border-color: #6DBFF2;background: #6DBFF2;}
#schedule ul li:nth-child(2) p a {border-color: #F7CD41;background: #F7CD41;}
#schedule ul li:nth-child(1) p:nth-of-type(2) a {background: #fff;color: #6DBFF2;}
#schedule ul li:nth-child(2) p:nth-of-type(2) a {background: #fff;color: #F7CD41;}
@media only screen and ( max-width: 767px ) {
	#schedule ul {justify-content: center;}
	#schedule ul li {width: calc(100% / 2 - 20px);margin: 10px;}
	#schedule ul li:last-child {margin-bottom: 0;}
}
/*--------------------------------------------------

	INTERVIEWE │ インタビュー

--------------------------------------------------*/
#interview {background: #F5FAFC;}
#interview ul {gap: 20px;}
#interview ul li {
	position: relative;
	margin-top: clamp(100px, calc(100px + 40 * ((100vw - 375px) / 1545)), 140px);
	padding: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
	background: #fff;
}
#interview ul li .wrap {
	display: inline-flex;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	bottom: 100%;
	left: 0;
	padding: 10px clamp(30px, calc(30px + 40 * ((100vw - 375px) / 1545)), 70px);
	border-radius: 30px 30px 0 0;
	background: #4067E8;
}
#interview ul li .wrap h3 {color: #fff;font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px);}
#interview ul li .wrap h3 span {font-size: 1.8em;}
#interview ul li .wrap p {color: #fff;}
#interview ul li dl {display: flex;width: 95%;margin: 0 auto;}
#interview ul li dl dt {
	width: clamp(200px, calc(200px + 70 * ((100vw - 375px) / 1545)), 270px);
	margin-right: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
}
#interview ul li dl dd {
	flex: 1;
	position: relative;
	padding: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	border: 3px solid #C9D5DB;
	border-radius: 20px;
	letter-spacing: 0;
}
#interview ul li dl dd::before,
#interview ul li dl dd::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
}
#interview ul li dl dd::before {left: -30px;border-right: 30px solid #C9D5DB;}
#interview ul li dl dd::after {left: -25px;border-right: 30px solid #fff;}
@media only screen and ( max-width: 767px ) {
	#interview ul li .wrap {width: 100%;}
	#interview ul li dl {display: block;width: 100%;}
	#interview ul li dl dt {margin: 0 auto 30px;}
	#interview ul li dl dd {width: 100%;}
	#interview ul li dl dd::before,
	#interview ul li dl dd::after {
		top: inherit;
		bottom: 100%;
		left: 50%;
		transform: translate(-50%, 0);
		border-top: initial;
		border-right: 20px solid transparent;
		border-bottom: 30px solid #C9D5DB;
		border-left: 20px solid transparent;
	}
	#interview ul li dl dd::after {bottom: 98%;border-bottom: 30px solid #fff;}
}
@media only screen and ( max-width: 500px ) {
	#interview ul li .wrap {display: block;}
}
/*--------------------------------------------------

	MORE INFO │ まだまだあるソエルガーデンの魅力

--------------------------------------------------*/
#more_info .inner {max-width: 1320px;}
#more_info ul {display: grid;grid-template-columns: repeat(3, 1fr);gap: clamp(30px, calc(30px + 30 * ((100vw - 375px) / 1545)), 60px);}
#more_info ul li {
	position: relative;
	padding-top: clamp(25px, calc(25px + 20 * ((100vw - 375px) / 1545)), 45px);
	padding-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	border-radius: 20px;
	box-shadow: 0 3px 18px rgba(165, 182, 183, 16%);
	background: no-repeat center / 50%;
	color: #1004A2;
	letter-spacing: 0;
}
#more_info ul li:nth-child(1) {background-image: url(../img/front/more_info/txt01.svg);}
#more_info ul li:nth-child(2) {background-image: url(../img/front/more_info/txt02.svg);}
#more_info ul li:nth-child(3) {background-image: url(../img/front/more_info/txt03.svg);}
#more_info ul li:nth-child(4) {background-image: url(../img/front/more_info/txt04.svg);}
#more_info ul li:nth-child(5) {background-image: url(../img/front/more_info/txt05.svg);}
#more_info ul li:nth-child(6) {background-image: url(../img/front/more_info/txt06.svg);}
#more_info ul li:nth-child(7) {background-image: url(../img/front/more_info/txt07.svg);}
#more_info ul li:nth-child(8) {background-image: url(../img/front/more_info/txt08.svg);}
#more_info ul li:nth-child(9) {background-image: url(../img/front/more_info/txt09.svg);}
#more_info ul li .wrap h3 {
	font-size: clamp(18px, calc(18px + 14 * ((100vw - 375px) / 1545)), 32px);
	text-align: center;
}
#more_info ul li .wrap p {letter-spacing: 0;text-align: center;}
#more_info ul li .wrap p.count {font-size: clamp(27px, calc(27px + 20 * ((100vw - 375px) / 1545)), 47px);}
#more_info ul li .wrap p.count span {font-size: 1.6em;}
#more_info ul li .wrap p.big {font-size: clamp(24px, calc(24px + 20 * ((100vw - 375px) / 1545)), 44px);}
#more_info ul li .wrap p.med {font-size: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);}
#more_info ul li .wrap p.med span {font-size: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);}
#more_info ul li .wrap p.small {font-size: clamp(14px, calc(14px + 14 * ((100vw - 375px) / 1545)), 28px);}
@media only screen and ( max-width: 767px ) {
	#more_info ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width: 500px ) {
	#more_info ul {grid-template-columns: repeat(1, 1fr);}
	#more_info ul li {position: relative;padding: 0;}
	#more_info ul li::before {content: '';display: block;padding-top: 50%;}
	#more_info ul li .wrap {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 90%;}
}
/*--------------------------------------------------

	JOB LIST │ 募集職種一覧

--------------------------------------------------*/
#job_list {background: #F5FAFC;}
#job_list .block {background: #fff;}
#job_list .block .container {max-width: 1320px;margin: 0 auto;padding: 0 10px;}
#job_list .block .container .wrap {margin-bottom: clamp(40px, calc(40px + 40 * ((100vw - 375px) / 1545)), 80px);}
#job_list .block .container .wrap:last-child {margin-bottom: 0;}
#job_list .block .container .wrap h3 {
	position: relative;
	margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	font-size: clamp(18px, calc(18px + 12 * ((100vw - 375px) / 1545)), 30px);
}
#job_list .block .container .wrap h3::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px dotted #555;
}
#job_list .block .container .wrap h3 span.in {
	position: relative;
	z-index: 1;
	padding-right: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	background: #fff;
}
#job_list .block .container .wrap h3 span.in span {font-size: 1.4em;}
#job_list .block .container .wrap:nth-of-type(1) h3 span.in span {color: #5EBBF5;}
#job_list .block .container .wrap:nth-of-type(2) h3 span.in span {color: #4E67F2;}
#job_list .block .container .wrap ul {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;}
#job_list .block .container .wrap ul li a {
	display: block;
	padding: 10px;
	border-radius: 10px;
	color: #fff;
	font-size: clamp(14px, calc(14px + 14 * ((100vw - 375px) / 1545)), 28px);
	line-height: 1.2;
	text-align: center;
}
#job_list .block .container .wrap:nth-of-type(1) ul li a {background: #5EBBF5;}
#job_list .block .container .wrap:nth-of-type(2) ul li a {background: #4E67F2;}
#job_list .block .container .wrap .content {margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);}
#job_list .block .container .wrap .content:last-child {margin-bottom: 0;}
#job_list .block .container .wrap .content h4 {margin-bottom: clamp(6px, calc(6px + 10 * ((100vw - 375px) / 1545)), 14px);}
@media only screen and ( max-width: 1024px ) {
	#job_list .block .container .wrap ul {grid-template-columns: repeat(3, 1fr);}
}
@media only screen and ( max-width: 767px ) {
	#job_list .block .container .wrap ul {grid-template-columns: repeat(2, 1fr);gap: 10px;}
}
/*--------------------------------------------------

	REQUIREMENT │ 採用情報

--------------------------------------------------*/
#entry {background: linear-gradient(45deg, #4FB6F7, #3333FF);}
#entry .inner {max-width: 946px;}
#entry .container {
	position: relative;
	padding: 20px;
	padding-top: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	padding-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);
	border-radius: 40px;
	background: #fff;
}
#entry .container a {
	display: block;
	position: relative;
	max-width: clamp(470px, calc(470px + 100 * ((100vw - 375px) / 1545)), 570px);
	margin: 0 auto;
	padding: 25px 0;
	border-radius: 40px;
	background: linear-gradient(45deg, #4FB6F7, #3333FF);
	color: #fff;
	font-size: clamp(16px, calc(16px + 4 * ((100vw - 375px) / 1545)), 20px);
	letter-spacing: .02em;
	text-align: center;
}
#entry .container a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
	width: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	height: 100%;
	background: url(../img/common/Icon_arrowR.svg) no-repeat center / 100%;
	transition: .3s;
}
#entry .container a:hover::after {right: 3%;}