@charset "utf-8";

#l-main {
	max-width: none;
	padding: 0;
}

.LastUpDate {
	margin: 20px auto 0;
}

/* Visual
---------------------------------*/
#vis {
	position: relative;
	width: 100%;
	overflow: hidden;
}

#vis ul {
	position: relative;
	width: 100%;
	height: 0;
	padding: 31.4286% 0 0 0;
}

#vis_pic li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.5s;
	z-index: 8;
}

#vis_pic li.active {
	opacity: 1;
	z-index: 9;
}

#vis_txt {
	position: absolute;
	z-index: 9;
	top: 50%;
	left: 0;
	width: min(42.86%, 600px);
	height: min(62.72%, 276px);
	padding-right: 2%;
	transform: translate(0, -50%);
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--color-whi);
	border-radius: 0 20px 20px 0;
}

#vis_txt h1 {
	display: flex;
	justify-content: center;
	align-items: start;
	flex-direction: column;
	color: #000;
	font-size: min(calc(3.2vw - 4px), 35px);
	text-align: left;
}

#vis_txt strong {
	margin: 0.3em 0 0.9em;
	font-family: var(--font-koburina-w6);
}

#vis_txt span {
	display: block;
	font-size: 0.74em;
	line-height: 1.62;
}

@media screen and (max-width: 767px) {
	#vis {
		height: 241px;
		padding: 0;
	}

	#vis_pic img {
		position: relative;
		width: auto;
		max-width: none;
		height: 241px;
	}

	#vis_pic li:nth-child(1) img {
		left: 60%;
		transform: translate(-60%, 0);
	}

	#vis_pic li:nth-child(2) img {
		left: 62%;
		transform: translate(-62%, 0);
	}

	#vis_pic li:nth-child(3) img {
		left: 60%;
		transform: translate(-60%, 0);
	}

	#vis_pic li:nth-child(4) img {
		left: 49%;
		transform: translate(-49%, 0);
	}

	#vis_txt {
		position: absolute;
		z-index: 9;
		top: 50%;
		left: 0;
		width: calc(36vw + 57px);
		height: auto;
		padding: 20px 0;
	}

	#vis_txt h1 {
		font-size: calc(0.655vw + 15.542px);
	}
}

@media screen and (min-width: 540px) {
	#vis_txt strong {
		margin: 0.1em 0 0.5em;
	}

	#vis_txt .spbr {
		display: none;
	}
}

/* MAIN
------------------------------------------------------------------*/
.su-contents {
	max-width: 1252px;
	margin: 0 auto;
	padding-inline: 26px;
}

.su-contents_bg {
	margin-top: 100px;
	padding: 1px 0 100px;
	background: #f5f5f5;
}

.sustaina_title {
	margin-top: 2.8em;
	font-size: 3.5rem;
	line-height: 1.4;
	/*	font-family: "Koburina Gothic W6 JIS2004", "Hiragino Kaku Gothic Pro", Meiryo, Sans-Serif;*/
	color: #333;
}

.sustaina_title span {
	display: inline-block;
}

.sustaina_title+p {
	margin-top: 1.2em;
	line-height: 1.88;
}

@media screen and (max-width:767px) {
	.su-contents {
		padding-inline: 15px;
	}

	.su-contents .su-fs {
		font-size: 1.4rem;
	}

	.su-contents_bg {
		margin-top: 50px;
		padding: 1px 0 30px;
	}

	.sustaina_title {
		margin-top: 50px;
	}

	.sustaina_title {
		font-size: calc(0.889vw + 17.16px);
	}
}


a.over {
	transition: opacity 200ms;
}

a.over:hover {
	opacity: 0.7;
}

.sustaina_index_imgover {
	transition: opacity 0.4s ease-in-out 0s;
}

.sustaina_index_imgover:hover {
	opacity: 0.8;
}

.sustaina_index_imgover img {
	transition: transform 0.4s ease-in-out 0s;
}

.sustaina_index_imgover:hover img {
	transform: scale(1.1, 1.1);
}

.sustaina_top_grid a {
	position: relative;
	display: block;
	height: 100%;
	padding-bottom: clamp(20px, calc(5.2vw - 15px), 50px);
	color: var(--color-primary);
	text-decoration: none;
	transition: opacity 0.4s ease-in-out 0s;
}

.sustaina_top_grid a[target]::after {
	content: url(/assets_ren/images/icon-blank3.svg);
	position: absolute;
	bottom: 0;
	right: 0;
	width: 21px;
	height: 21px;
	font-size: 0;
}

@media screen and (max-width:767px) {
	.sustaina_top_grid a[target]::after {
		transform: scale(0.8);
	}
}


.sustaina_top_grid .su-fs {
	display: block;
	line-height: 1.43;
}


/* サステナビリティ活動
---------------------------------------- */
#sustaina_top_brand {
	display: grid;
	gap: min(calc(3.2vw - 9px), 30px);
	grid-template-columns: repeat(4, 1fr);
	padding: 60px 0 0 0;
}

#sustaina_top_brand .sustaina_pic {
	aspect-ratio: 160 / 83;
	border-radius: 10px;
	overflow: hidden;
}

#sustaina_top_brand .sustaina_txt {
	padding: 28px 0 0 0;
}

.view_more {
	display: inline-flex;
	gap: 12px;
	margin: 35px 0 0 0;
	font-size: 1.6rem;
	font-family: var(--font-Roboto);
	color: #00b195;
	text-decoration: none;
}

@media screen and (max-width:767px) {
	#sustaina_top_brand {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 10px;
		padding: 30px 0 0 0;
	}

	#sustaina_top_brand .sustaina_txt {
		padding: 14px 0 0 0;
	}

	.view_more img {
		width: 21px;
		height: 21px;
	}

	#sustaina_top_brand+div {
		text-align: center
	}
}




/* ベネッセアートサイト直島
---------------------------------*/
#sustaina_top_naoshima {
	position: relative;
	margin-top: 32px;
	overflow: hidden;
	border-radius: clamp(10px, calc(2vw - 6px), 20px);
}

#sustaina_top_naoshima img {
	position: relative;
}

@media screen and (max-width:767px) {
	#sustaina_top_naoshima img {
		width: auto;
		max-width: none;
		height: 203px;
		left: 55%;
		transform: translate(-55%, 0);
	}
}

#sustaina_top_naoshima ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#sustaina_top_naoshima .c-button-type3 {
	width: max(32%, 260px);
}

#sustaina_top_naoshima a {
	border: none;
}

#sustaina_top_naoshima a:hover {
	opacity: 1;
}

/* TOP NAV
---------------------------------*/
#sustaina_top_nav {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: min(calc(4.2vw + 3.2px), 55px) min(calc(2.1vw + 4px), 30px);
	margin-top: 62px;


}

#sustaina_top_nav a {
	text-decoration: none;
}

#sustaina_top_nav .arw_ani {
	margin: 0 0 1em 0;
}

#sustaina_top_nav .arw_ani a {
	font-size: 2.4rem;
}

.sustaina_top_nav-sub li {
	margin: 0.4em 0;
}

#sustaina_top_nav .sustaina_top_nav-sub li::before {
	top: 0.60em;
}

.sustaina_top_nav-sub li:last-child {
	margin-bottom: 0;
}

.sustaina_top_nav-sub a {
	display: inline-flex;
	font-size: 1.4rem;
	line-height: 1.5;
	color: var(--color-primary);
}

.sustaina_top_nav-col,
.sustaina_top_nav-span,
.sustaina_top_nav-row {
	background: var(--color-whi);
}

.sustaina_top_nav-col {
	border-radius: clamp(10px, calc(2vw - 6px), 20px);
	overflow: hidden;
}

.sustaina_top_nav-colpic {
	overflow: hidden;

}

.sustaina_top_nav-coltxt {
	padding: 30px min(calc(2.1vw + 4px), 30px);
}

.sustaina_top_nav-span {
	grid-column: span 2;
	display: flex;
	border-radius: clamp(10px, calc(2vw - 6px), 20px);
	overflow: hidden;
}

.sustaina_top_nav-spantxt {
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 0 50px;

}

#sustaina_top_nav .sustaina_top_nav-spantxt .arw_ani {
	margin: 0.5em 0;
}

.sustaina_top_nav-split {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 20px;
}

.sustaina_top_nav-row {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 0 0 25px;
	border-radius: clamp(10px, calc(2vw - 6px), 20px);
}

#sustaina_top_nav .sustaina_top_nav-row a {
	font-size: 1.8rem;
}

@media (max-width:1024px) {
	.sustaina_top_nav-row {
		min-height: 3em;
	}

	.sustaina_top_nav-span {
		grid-column: span 3;
	}
}

@media (max-width:1024px) {
	.sustaina_top_nav-split {
		grid-column: span 3;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
	}

}

@media screen and (max-width:767px) {
	#sustaina_top_nav {
		display: block;
		max-width: 460px;
		margin: 30px auto 0;
	}

	#sustaina_top_nav .arw_ani a {
		font-size: 1.8rem;
	}

	#sustaina_top_nav .sustaina_top_nav-sub li::before {
		top: 0.6em;
	}

	#sustaina_top_nav>li:nth-child(-n+2) {
		margin-bottom: 20px;
	}

	.sustaina_top_nav-colpic img {
		margin: -10% 0;
	}

	.sustaina_top_nav-coltxt {
		padding: 20px 25px 25px;
	}

	.sustaina_top_nav-span {
		margin: 20px 0;
		border-radius: 10px;
	}

	.sustaina_top_nav-spanpic {
		display: none;
	}

	.sustaina_top_nav-spantxt {
		padding: 20px 25px;
	}


	.sustaina_top_nav-split {
		display: block;
	}
}

/* 動画で見るベネッセ
 -------------------------------------*/
#sustaina_channel_movie {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(3, 1fr);
	padding: 60px 0 0 0;
}

#sustaina_channel_movie a {
	padding-bottom: 40px;
}

#sustaina_channel_movie .sustaina_pic {
	border-radius: clamp(10px, calc(2vw - 6px), 20px);
}

#sustaina_channel_movie .sustaina_txt {
	padding: 28px 0 0 0;
}

#sustaina_channel_movie .sustaina_pic {
	position: relative;
}

#sustaina_channel_movie .sustaina_pic::after {
	position: absolute;
	content: url(/benesseinfo/sustainability/images/movie.svg);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#sustaina_channel_movie .sustaina_txt span {
	display: inline-block;
}

@media screen and (max-width:767px) {
	#sustaina_channel_movie a {
		padding-bottom: 0;
		margin-bottom: 30px;
	}

	#sustaina_channel_movie .sustaina_txt {
		padding: 12px 0 0 0;
	}

	#sustaina_channel_movie {
		display: block;
		max-width: 460px;
		margin: 0 auto;
		padding: 30px 0 0 0;
	}
}


/* 関連サイト・コンテンツ
 -------------------------------------*/

#sustaina_top_related {
	display: grid;
	gap: min(calc(6.3vw - 18px), 60px);
	grid-template-columns: repeat(2, 1fr);
	padding: 60px 0 0 0;
}

#sustaina_top_related a {
	padding-bottom: 60px;
	background: var(--color-whi);
	border-radius: clamp(10px, calc(2vw - 6px), 20px);
	overflow: hidden;
}

#sustaina_top_related .sustaina_pic {
	overflow: hidden;
}

#sustaina_top_related .sustaina_txt {
	display: block;
	padding: 20px min(calc(2vw + 4px), 30px);
}

#sustaina_top_related strong {
	display: block;
	margin: 0.5em 0;
	line-height: 1.3;
}

#sustaina_top_related a[target]::after {
	bottom: 30px;
	right: 30px;
}

@media screen and (max-width:767px) {
	#sustaina_top_related {
		display: block;
		max-width: 460px;
		margin: 0 auto;
		padding: 30px 0 0 0;
	}

	#sustaina_top_related a {
		padding-bottom: 0;
		margin-bottom: 20px;
	}

	#sustaina_top_related .sustaina_pic img {
		margin: -2% 0;
	}

	#sustaina_top_related .sustaina_txt {
		padding: 10px 40px 15px 20px;
	}

	#sustaina_top_related a[target]::after {
		bottom: 10px;
		right: 10px;
	}
}