@charset "utf-8";

/*-----------------------------------------------------------------------------------------------*/
/* トップ ---------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.pan { display: none; }
.main .container:not(.footercontents) .midashi { padding-bottom: 0; }
.main .button { margin-top: var(--margin-30); }


/* Movie ----------------------------------------------------------------------------------------*/
.mainimage {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	position: relative;
}
.mainimage video {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.mainimage .text {
	color: var(--color-white);
	font-size: var(--font-m);
	font-weight: var(--weight-b);
	line-height: var(--line-l);
	position: absolute;
	bottom: 5%;
	left: 5%;
	width: 100%;
}


/* お知らせ -------------------------------------------------------------------------------------*/
.main .news .midashi {
	/*display: flex;
	align-items: center;
	justify-content: space-between;*/
	margin-top: 0;
}
.main .news .midashi h2 { padding-bottom: 0; }
/*.main .news .midashi .button { margin-top: 0; }*/

.main .news .swiper-container .newslist {
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0;
}
.main .news .swiper {
	margin: 0 auto;
	width: var(--wrap-width);
	max-width: var(--main-width);
}
.main .news .swiper-button-next,
.main .news .swiper-button-prev { background-color: transparent; }
.main .news .swiper-button-next::after,
.main .news .swiper-button-prev::after { mask-position: center right; }
@media(min-width: 768px) {
	.main .news .swiper-button-next,
	.main .news .swiper-button-prev { display: none; }
}


/* 直島文化村とは -------------------------------------------------------------------------------*/
.main .about .contents {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-80);
}
.main .about h3 { margin-top: var(--margin-20); }
.main .about .comment {
	font-size: var(--font-s);
	margin-top: var(--margin-5);
}


/* 採用情報 -------------------------------------------------------------------------------------*/
.main .container.recruit { margin-top: 0; }
.main .container.recruit::before { content: none; }

.main .recruit .image { position: relative; }
.main .recruit .image .text {
	position: absolute;
	top: 50%;
	left: 4%;
	transform: translateY(-50%);
}
.main .recruit .image .h2 {
	color: var(--color-white);
	font-size: 3.2rem;
	font-weight: var(--weight-b);
	letter-spacing: 0.2em;
}
.main .recruit .image .button { display: none; }

.main .recruit .banner {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-20);
}
/*-----------------------------------------------------------------------------------------------*/





@media(min-width: 530px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* トップ ---------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* Movie ----------------------------------------------------------------------------------------*/
	.mainimage .text br.sp {  display: none; }
	/* 直島文化村とは -------------------------------------------------------------------------------*/
	.main .about .contents {
		flex-direction: row;
		column-gap: 4%;
	}
	.main .about .contents li { width: calc((100% - 4%) / 2); }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 640px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* トップ ---------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* お知らせ -------------------------------------------------------------------------------------*/
	.main .news .button { text-align: right; }
	/* 直島文化村とは -------------------------------------------------------------------------------*/
	.main .about .button { text-align: right; }
	/* 採用情報 -------------------------------------------------------------------------------------*/
	.main .recruit .image .button {
		display: block;
		margin-top: var(--margin-10);
	}
	.main .recruit > .button { display: none; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 768px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* トップ ---------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* Movie ----------------------------------------------------------------------------------------*/
	.mainimage { aspect-ratio: 16 / 9; }
	.mainimage .text {
		letter-spacing: 0.1em;
		bottom: 10%;
	}
	/* 採用情報 -------------------------------------------------------------------------------------*/
	.main .recruit .image .text { left: 10%; }
	.main .recruit .image .button { margin-top: var(--margin-30); }
	.main .recruit .banner {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: var(--margin-20);
	}
	.main .recruit .banner li { width: calc((100% - var(--margin-20)) / 2); }
	.main .recruit .banner li.new { width: 100%; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1024px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* トップ ---------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* Movie ----------------------------------------------------------------------------------------*/
	.mainimage .text {
		font-size: var(--font-l);
		font-weight: var(--weight-r);
		letter-spacing: 0.2em;
	}
	/* 採用情報 -------------------------------------------------------------------------------------*/
	.main .recruit .banner { gap: var(--margin-30); }
	.main .recruit .banner li { width: calc((100% - var(--margin-30)) / 2); }
	/*-----------------------------------------------------------------------------------------------*/
}