@charset "utf-8";

/*===============================================
●画面の横幅が769px以上
===============================================*/
@media screen and (min-width : 769px ){
#pc------------------------------------------- {
}
.helo {
	margin-top: 70px;
	height: 540px;
	background-image: url("../images/recruit/h_bg.webp");
	background-position: center top;
	background-size: cover;
	position: relative;
}
.helo .inner {
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	padding-top: 110px;
}
.helo h1 {
	color: #fff;
	font-size: 28px;
	font-weight: 500;
	padding-top: 110px;
}
.helo h1 span {
	font-size: 66px;
	color: #4ed5b5;
	display: block;
	margin-bottom: 55px;
}




.message_section {
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 120px;
}
.message_section .flex {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	align-items: center;
}
.message_section .flex div {
	width: 640px;
	height: 584px;
	background-color: #E9F9F6;
	border-radius: 16px;
}
.ttl_rec {
	font-size: 22px;
	color: #3d3d3d;
	font-weight: 500;
	margin-bottom: 30px;
}
.ttl_rec span {
	display: block;
	font-size: 48px;
	color: #4ed5b5;
	font-weight: normal;
	margin-bottom: 25px;
}
.message_section .flex div .ttl_rec {
	padding-top: 60px;
	position: relative;
	right: -30px;
}
.message_section .flex div h3 {
	font-size: 26px;
	font-weight: 500;
	color: #00c89d;
	position: relative;
	right: -30px;
}
.message_section .flex div p {
	font-size: 17px;
	line-height: 2em;
	text-align: left;
	width: 478px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	position: relative;
	right: -30px;
}
.message_section .flex figure {
	width: 527px;
	position: relative;
	right: -60px;
}





.point_section {
	background-color: #009AD0;
	margin-top: 100px;
	padding-top: 110px;
	padding-bottom: 140px;
}
.point_section .ttl_rec {
	margin-bottom: 40px;
}
.point_section .ttl_rec,
.point_section .ttl_rec span
{
	color: #fff;
}
.point_section ul {
	display: flex;
	justify-content: space-between;
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.point_section ul li {
	width: 340px;
	font-size: 22px;
	font-weight: 500;
	color: #fff;
	line-height: 1.4em;
}
.point_section ul li figure {
	margin-bottom: 10px;
}





.work_section {
	margin-top: 110px;
}
.work_section .ttl_rec+p {
	font-size: 17px;
	color: #000000;
	line-height: 1.6em;
}
.work_section h3 {
	background-color: #54D6B7;
	color: #fff;
	font-size: 28px;
	font-weight: 500;
	height: 71px;
	line-height: 71px;
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	margin-top: 40px;
}
.work_section .box {
	background-color: #E9F9F6;
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
}
.work_section .box .flex {
	display: flex;
	justify-content: center;
	gap: 30px;
	width: 914px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	align-items: center;
	padding-top: 35px;
	padding-bottom: 55px;
}
.work_section .box .flex figure {
	width: 420px;
}
.work_section .box .flex ul li {
	font-size: 19px;
	color: #000;
	line-height: 1.7em;
}
.work_section .box .flex ul li span {
	color: #54D6B7;
	font-size: 13px;
}





.interview_section {
	margin-top: 130px;
	padding-top: 100px;
	background-color: #DAEBF6;
}
.interview_section .ttl_rec {
	margin-bottom: 50px;
}
.interview_section .ttl_rec span {
	color: #0096d2;
}
.interview_section .slick {
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.interview_section .box {
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
	background-color: #F8FBFE;
	border-radius: 16px;
}
.interview_section .box .flex {
	width: 978px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	text-align: left;
	padding-top: 65px;
}
.interview_section .box .flex figure {
	width: 313px;
}
.interview_section .box .flex figure figcaption {
	font-size: 17px;
	margin-top: 5px;
}
.interview_section .box .flex div {
	width: 636px;
}
.interview_section .box .flex div h3 {
	font-size: 22px;
	font-weight: 500;
	margin-bottom: 15px;
}
.interview_section .box .flex div p {
	font-size: 17px;
	line-height: 1.8em;
}
.interview_section .box ul {
	display: flex;
	justify-content: space-between;
	width: 978px;
	margin-left: auto;
	margin-right: auto;
}
.interview_section .box ul li {
	width: 470px;
}



/* =========================================
   Slick 全体の調整
   ========================================= */
.interview_section {
    position: relative;
    padding: 50px 0; /* スライダー上下の余白 */
    overflow: hidden; /* 横スクロールバー防止 */
}

.slick-list {
    overflow: hidden !important;
}

/* ご提示いただいたCSSの微調整（下部の余白やリストのスタイルリセット） */
.interview_section .box {
    padding-bottom: 60px; /* 下部画像のさらに下に余白を追加 */
}
.interview_section .box ul {
    margin-top: 40px; /* 上部テキストとの余白 */
    padding-left: 0;
    list-style: none;
}
.interview_section .box ul li img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   矢印（Prev / Next）のカスタマイズ
   ========================================= */
.slick-prev, 
.slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0; /* テキストを隠す */
    z-index: 10;
    outline: none;
}

/* 1100pxのボックスの外側に配置 */
.slick-prev {
    left: calc(50% - 600px); 
}
.slick-next {
    right: calc(50% - 600px);
}

/* CSSで細い「く」の字を描画 */
.slick-prev::before, 
.slick-next::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    border-top: 3px solid #00B5D1; /* 矢印の色 */
    border-right: 3px solid #00B5D1;
    margin: 0 auto;
}

.slick-prev::before {
    transform: rotate(-135deg); /* 左向きにする */
}
.slick-next::before {
    transform: rotate(45deg);   /* 右向きにする */
}

/* =========================================
   ドットナビゲーションのカスタマイズ
   ========================================= */
.slick-dots {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin-top: 20px; /* ボックスとの間隔 */
}

.slick-dots li {
    margin: 0 6px;
}

.slick-dots li button {
    font-size: 0; /* テキストを隠す */
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: #555555; /* 非アクティブ時の色 */
    border-radius: 50%;  /* 丸くする */
    transition: background 0.3s ease;
}

/* アクティブなスライドのドット色 */
.slick-dots li.slick-active button {
    background: #00B5D1; 
}





.recrut_box {
	width: 800px;
	height: 280px;
	background-color: #E9F9F6;
	margin-left: auto;
	margin-right: auto;
	border-radius: 16px;
	margin-top: 90px;
	margin-bottom: 90px;
}
.recrut_box h2 {
	color: #00bd89;
	font-size: 32px;
	font-weight: 500;
	padding-top: 50px;
	margin-bottom: 20px;
}
.recrut_box h2+p {
	font-size: 17px;
	line-height: 1.8em;
}
.recrut_box a {
	display: block;
	width: 370px;
	padding-right: 30px;
	height: 70px;
	margin-left: auto;
	margin-right: auto;
	background-color: #20D6B7;
	color: #fff;
	text-decoration: none;
	line-height: 70px;
	font-size: 23px;
	border-radius: 100px;
	margin-top: 20px;
	background-image: url("../images/projects/arrow.svg");
	background-size: 27px;
	background-repeat: no-repeat;
	background-position: center right 40px;
	transition: 0.3s;
}
.recrut_box a:hover {
	opacity: 0.7;
	transition: 0.3s;
}
}



/*===============================================
●画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px){

/*===============================================
●sp-tablet
===============================================*/
#sptablet------------------------------------------- {
}
.helo {
	margin-top: 70px;
	height: 60vw;
	background-image: url("../images/recruit/h_bg.webp");
	background-position: center right -20vw;
	background-size: cover;
	position: relative;
}
.helo .inner {
	margin-left: 5vw;
	margin-right: auto;
	display: flex;
	padding-top: 20vw;
}
.helo h1 {
	color: #fff;
	font-size: 6vw;
	font-weight: 500;
	padding-top: 5vw;
	text-align: left;
}
.helo h1 span {
	font-size: 12vw;
	color: #4ed5b5;
	display: block;
	margin-bottom: 5vw;
}




.message_section {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15vw;
}
.message_section .flex {

}
.message_section .flex div {
	background-color: #E9F9F6;
	border-radius: 3vw;
	padding-bottom: 15vw;
}
.ttl_rec {
	font-size: 5vw;
	color: #3d3d3d;
	font-weight: 500;
	margin-bottom: 5vw;
}
.ttl_rec span {
	display: block;
	font-size: 10vw;
	color: #4ed5b5;
	font-weight: normal;
	margin-bottom: 4vw;
}
.message_section .flex div .ttl_rec {
	padding-top: 8vw;
	position: relative;
}
.message_section .flex div h3 {
	font-size: 6vw;
	font-weight: 500;
	color: #00c89d;
	line-height: 1.3em;
}
.message_section .flex div p {
	line-height: 1.8em;
	text-align: left;
	margin-left: 5vw;
	margin-right: 5vw;
	margin-top: 3vw;
}
.message_section .flex figure {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: -10vw;
}





.point_section {
	background-color: #009AD0;
	margin-top: 15vw;
	padding-top: 15vw;
	padding-bottom: 7vw;
}
.point_section .ttl_rec {
	margin-bottom: 10vw;
}
.point_section .ttl_rec,
.point_section .ttl_rec span
{
	color: #fff;
}
.point_section ul {
	margin-left: 5vw;
	margin-right: 5vw;
}
.point_section ul li {
	font-size: 4.5vw;
	font-weight: 500;
	color: #fff;
	line-height: 1.6em;
	margin-bottom: 8vw;
}
.point_section ul li figure {
	margin-bottom: 3vw;
}





.work_section {
	margin-top: 15vw;
}
.work_section .ttl_rec+p {
	color: #000000;
	line-height: 1.6em;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.work_section h3 {
	background-color: #54D6B7;
	color: #fff;
	font-size: 6vw;
	font-weight: 500;
	margin-left: 5vw;
	margin-right: 5vw;
	border-top-left-radius: 3vw;
	border-top-right-radius: 3vw;
	margin-top: 8vw;
	padding-top: 3vw;
	padding-bottom: 3vw;
}
.work_section .box {
	background-color: #E9F9F6;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	border-bottom-left-radius: 3vw;
	border-bottom-right-radius: 3vw;
}
.work_section .box .flex {
	margin-left: 5vw;
	margin-right: 5vw;
	text-align: left;
	align-items: center;
	padding-top: 5vw;
	padding-bottom: 5vw;
}
.work_section .box .flex figure {
	margin-bottom: 3vw;
}
.work_section .box .flex ul li {
	color: #000;
	line-height: 1.5em;
	text-indent: -1em;
	padding-left: 1em;
	margin-bottom: 2vw;
}
.work_section .box .flex ul li span {
	color: #54D6B7;
	font-size: 2.5vw;
}





.interview_section {
	margin-top: 15vw;
	padding-top: 15vw;
	padding-bottom: 15vw;
	background-color: #DAEBF6;
}
.interview_section .ttl_rec {
	margin-bottom: 5vw;
}
.interview_section .ttl_rec span {
	color: #0096d2;
}
.interview_section .slick {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.interview_section .box {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	background-color: #F8FBFE;
	border-radius: 3vw;
}
.interview_section .box .flex {
	margin-left: auto;
	margin-right: auto;
	padding-top: 5vw;
}
.interview_section .box .flex figure {
	width: 40%;
	margin-left: auto;
	margin-right: auto;
}
.interview_section .box .flex figure figcaption {
	font-size: 4vw;
	margin-top: 1vw;
}
.interview_section .box .flex div {
}
.interview_section .box .flex div h3 {
	font-size: 4.5vw;
	font-weight: 500;
	margin-bottom: 3vw;
	margin-top: 3vw;
}
.interview_section .box .flex div p {
	line-height: 1.8em;
	width: 90%;
	font-size: 3.5vw;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.interview_section .box ul {
	display: flex;
	justify-content: space-between;
	margin-left: 5vw;
	margin-right: 5vw;
	margin-top: 4vw;
}
.interview_section .box ul li {
	width: 48%;
}



/* =========================================
   Slick 全体の調整
   ========================================= */
.interview_section {
    position: relative;

}

.slick-list {
    overflow: hidden !important;
}

/* ご提示いただいたCSSの微調整（下部の余白やリストのスタイルリセット） */
.interview_section .box {
    padding-bottom: 8vw; /* 下部画像のさらに下に余白を追加 */
}
.interview_section .box ul {
    margin-top: 5vw; /* 上部テキストとの余白 */
    padding-left: 0;
    list-style: none;
}
.interview_section .box ul li img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   矢印（Prev / Next）のカスタマイズ
   ========================================= */
.slick-prev, 
.slick-next {
    position: absolute;
    top: 20%;
    transform: translateY(-50%);
    width: 5vw;
    height: 5vw;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0; /* テキストを隠す */
    z-index: 10;
    outline: none;
}

/* 1100pxのボックスの外側に配置 */
.slick-prev {
    left: calc(50% - 46vw); 
}
.slick-next {
    right: calc(50% - 43vw);
}

/* CSSで細い「く」の字を描画 */
.slick-prev::before, 
.slick-next::before {
    content: '';
    display: block;
    width: 5vw;
    height: 5vw;
    border-top: 3px solid #00B5D1; /* 矢印の色 */
    border-right: 3px solid #00B5D1;
    margin: 0 auto;
}

.slick-prev::before {
    transform: rotate(-135deg); /* 左向きにする */
}
.slick-next::before {
    transform: rotate(45deg);   /* 右向きにする */
}

/* =========================================
   ドットナビゲーションのカスタマイズ
   ========================================= */
.slick-dots {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin-top: -5vw; /* ボックスとの間隔 */
}

.slick-dots li {
    margin: 0 6px;
}

.slick-dots li button {
    font-size: 0; /* テキストを隠す */
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: #555555; /* 非アクティブ時の色 */
    border-radius: 50%;  /* 丸くする */
    transition: background 0.3s ease;
}

/* アクティブなスライドのドット色 */
.slick-dots li.slick-active button {
    background: #00B5D1; 
}





.recrut_box {
	width: 90%;
	background-color: #E9F9F6;
	margin-left: auto;
	margin-right: auto;
	border-radius: 3vw;
	margin-top: 10vw;
	margin-bottom: 10vw;
	padding-bottom: 8vw;
}
.recrut_box h2 {
	color: #00bd89;
	font-size: 6vw;
	font-weight: 500;
	padding-top: 8vw;
	margin-bottom: 5vw;
}
.recrut_box h2+p {
	line-height: 1.8em;
}
.recrut_box a {
	display: block;
	width: 90%;
	padding-right: 5vw;
	height: 15vw;
	margin-left: auto;
	margin-right: auto;
	background-color: #20D6B7;
	color: #fff;
	text-decoration: none;
	line-height: 15vw;
	font-size: 5vw;
	border-radius: 100px;
	margin-top: 5vw;
	background-image: url("../images/projects/arrow.svg");
	background-size: 6vw;
	background-repeat: no-repeat;
	background-position: center right 5vw;
	transition: 0.3s;
}
.recrut_box a:hover {
	opacity: 0.7;
	transition: 0.3s;
}
}



/*===============================================
●画面の横幅が400pxまで
===============================================*/
@media screen and (max-width:400px){
/*===============================================
●sp400
===============================================*/
#sp400------------------------------------------- {
}
}



/*===============================================
●画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){
/*===============================================
●sp320
===============================================*/
#sp320------------------------------------------- {
}
}



/*===============================================
●画面の横幅が481pxから768pxまで
===============================================*/
@media screen and (min-width:481px) and (max-width:768px) {
/*===============================================
●tablet
===============================================*/
#tab------------------------------------------- {
}
}