@charset "utf-8";

/*-----------------------------------------------------------------------------------------------*/
/* 採用情報 -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.main { padding-bottom: 0; }
.main .background {
	background-color: var(--bg-body-2);
	margin-top: var(--margin-120);
	padding-bottom: var(--margin-120);
}

/*.job { margin-top: 180px; }
.work,
.interview,
.life { margin-top: 0; }
.job,
.work,
.interview,
.life { padding: 80px 0; }
.life { padding-bottom: 120px; }
.job::before,
.work::before,
.interview::before,
.life::before { content: none; }
.job,
.work { background-color: var(--bg-blue-r); }
.interview,
.life { background-color: var(--bg-blue); }*/

/*.container.yokuikiru .comment { margin-top: -10px; }*/


/* メインイメージ -------------------------------------------------------------------------------*/
.mainimage { position: relative; }
.mainimage .text {
	background-color: var(--bg-blue-r);
	color: var(--color-white);
	padding: 6vw 7vw;
	position: absolute;
	bottom: 10vw;
	left: 0;
}
.mainimage .title {
	font-size: 9vw;
	font-weight: var(--weight-b);
	letter-spacing: 0.15em;
}
.mainimage .catch {
	font-size: 5vw;
	font-weight: var(--weight-m);
	line-height: var(--line-s);
	letter-spacing: 0.12em;
	margin: 2.5vw 0;
}
.mainimage .comment {
	font-size: 3.1vw;
	font-weight: var(--weight-m);
	line-height: var(--line-s);
	letter-spacing: 0.06em;
}


/* 新卒者向け：最新情報 -------------------------------------------------------------------------*/
.main .midashi#news {
	margin-top: var(--margin-60);
	padding-top: calc(var(--header-h) + var(--margin-20));
}
.main .container.news {
	margin-top: 0;
	padding-top: 0;
}


/* 新卒者向け：募集職種 -------------------------------------------------------------------------*/
.main .container#type,
.main .container.career { margin-top: 0; }
.main .container#type::before,
.main .container.career:before { content: none; }

.main .recruitlist {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-30);
}

.main .recruitlist a {
	border: var(--color-border-r) solid 1px;
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-20);
	padding: var(--margin-20);
	transition: border-color 0.2s ease-out;
}

.main .recruitlist .image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	position: relative;
}
.main .recruitlist .image img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease-out;
}

.main .recruitlist .title {
	font-size: var(--font-m);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
}
.main .recruitlist .comment {
	font-size: var(--font-ms);
	line-height: var(--line-l);
	margin-top: var(--margin-5);

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.main .recruitlist .button { margin-top: var(--margin-30); }

/* hover */
.main .recruitlist a:hover { border-color: var(--bg-button-hover); }
.main .recruitlist a:hover .button .a { background-color: var(--bg-button-hover); }
.main .recruitlist a:hover .image img { transform: scale(1.02); }


/* キャリア・アルバイト採用情報はこちら ---------------------------------------------------------*/
.main .banner {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-20);
}


/* 直島文化村とは --------------------------------------------------------------------------------*/
.main .about .contents {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-30);
	margin-top: var(--margin-60);
}
.main .about .button { margin-top: var(--margin-30); }


/* 求める人材像 ---------------------------------------------------------------------------------*/
.main .want .comment { margin-top: var(--margin-30); }
.main .want .circle {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--margin-10);
	margin: 0 auto;
	max-width: var(--main-width-s);
}
.main .want .circle li {
	aspect-ratio: 1 / 1;
	background-color: #5e5e5e;
	border-radius: 50%;
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-ss);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
	text-align: center;
	width: calc((100% - (var(--margin-10) * 2)) / 3);
	max-width: 200px;
}

.main .want .comment { font-weight: var(--weight-b); }


/* 総支配人からのメッセージ ---------------------------------------------------------------------*/
.main #message {
	margin-top: var(--margin-60);
	padding-top: calc(var(--header-h) + var(--margin-20));
}
.main #message .image { position: relative; }
.main #message .text {
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
}
.main #message h2 {
	color: var(--color-white);
	font-size: var(--font-l);
	letter-spacing: 0;
	padding-bottom: 0;
}
.main #message .button { margin-top: var(--margin-30); }
.main #message .image .button { display: none; }


/* 仕事を知る -----------------------------------------------------------------------------------*/
.main .button.long { margin-top: 0; }
/*-----------------------------------------------------------------------------------------------*/





@media(min-width: 530px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 採用情報 -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* 新卒者向け：募集職種 -------------------------------------------------------------------------*/
	.main .recruitlist a {
		flex-direction: row;
		column-gap: var(--margin-20);
	}
	.main .recruitlist .image {
		width: 40%;
		max-width: 300px;
	}
	.main .recruitlist .text { flex: 1; }
	.main .recruitlist .button { text-align: right; }
	/* 求める人材像 ---------------------------------------------------------------------------------*/
	.main .want .circle { gap: var(--margin-20); }
	.main .want .circle li {
		font-size: var(--font-s);
		width: calc((100% - (var(--margin-20) * 2)) / 3);
	}
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 640px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 採用情報 -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* メインイメージ -------------------------------------------------------------------------------*/
	.mainimage .text {
		padding: 20px 25px 22px;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}
	.mainimage .title {
		font-size: 3.8rem;
		letter-spacing: 0.25em;
	}
	.mainimage .catch {
		font-size: 2.1rem;
		letter-spacing: 0.2em;
		margin: 20px 0 23px;
	}
	.mainimage .comment {
		font-size: 1.3rem;
		letter-spacing: 0.1em;
	}
	.mainimage .comment br { display: none; }
	/* 新卒者向け：最新情報 -------------------------------------------------------------------------*/
	.main .news .button { text-align: right; }
	/* 直島文化村とは -------------------------------------------------------------------------------*/
	.main .about .contents {
		flex-direction: row-reverse;
		column-gap: var(--margin-30);
	}
	.main .about .image { width: 45%; }
	.main .about .text { flex: 1; }
	.main .about .button { text-align: right; }
	/* 総支配人からのメッセージ ---------------------------------------------------------------------*/
	.main #message h2 { font-size: 2.8vw; }
	.main #message .button { text-align: right; }
	/* 先輩インタビュー -----------------------------------------------------------------------------*/
	.main #interview .button { text-align: right; }
	/* 働く環境を知る -------------------------------------------------------------------------------*/
	.main #work .button { text-align: right; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 768px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 採用情報 -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.mainimage .text {
		padding: 20px 25px 22px;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}
	.mainimage .title {
		font-size: 3.8rem;
		letter-spacing: 0.25em;
	}
	.mainimage .catch {
		font-size: 2.1rem;
		letter-spacing: 0.2em;
		margin: 20px 0 23px;
	}
	.mainimage .comment {
		font-size: 1.3rem;
		letter-spacing: 0.1em;
	}
	.mainimage .comment br { display: none; }
	/* 新卒者向け：募集職種 -------------------------------------------------------------------------*/
	.main .recruitlist a {
		column-gap: var(--margin-30);
		padding: var(--margin-30);
	}
	/* キャリア・アルバイト採用情報はこちら ---------------------------------------------------------*/
	.main .banner {
		flex-direction: row;
		column-gap: var(--margin-20);
	}
	.main .banner li { width: calc((100% - var(--margin-20)) / 2); }
	/* 求める人材像 ---------------------------------------------------------------------------------*/
	.main .want .circle li { font-size: var(--font-m); }
	/* 総支配人からのメッセージ ---------------------------------------------------------------------*/
	.main #message .text { left: 11vw; }
	.main #message h2 { font-size: 2.8vw; }
	.main #message .button { display: none; }
	.main #message .image .button {
		display: block;
		margin-top: 2.5vw;
		text-align: center;
	}
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1024px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 採用情報 -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/*.main .job,
	.main .work,
	.main .interview,
	.main .life { padding: 120px 0; }
	.main .life { padding-bottom: 180px; }*/
	/* メインイメージ -------------------------------------------------------------------------------*/
	.mainimage .text { padding: 2.5vw 3vw 2.8vw; }
	.mainimage .title { font-size: 3.75vw; }
	.mainimage .catch {
		font-size: 2.0vw;
		margin: 2.5vw 0 3vw;
	}
	.mainimage .comment { font-size: 1.25vw; }
	/* 求める人材像 ---------------------------------------------------------------------------------*/
	.main .want .circle li { font-size: var(--font-ll); }
	.main .want .comment { text-align: center; }
	/* 総支配人からのメッセージ ---------------------------------------------------------------------*/
	.main #message .text { left: 12%; }
	.main #message h2 { font-size: 2.8rem; }
	.main #message .image .button { margin-top: 25px; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1280px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 採用情報 -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* 求める人材像 ---------------------------------------------------------------------------------*/
	.main .want .comment { font-size: var(--font-l); }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1600px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 採用情報 -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* 総支配人からのメッセージ ---------------------------------------------------------------------*/
	.main #message .text { left: 175px; }
	.main #message h2 { font-size: 3.0rem; }
	/*-----------------------------------------------------------------------------------------------*/
}