@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
HOME
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.home-article {
	padding-top: initial;
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- ページヘッダー
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.home-header {
	display: flex;
	position: sticky;
	top: 0;
	height: 100vh;
	justify-content: center;
	align-items: center;
}
@media (max-width: 360px) {
	.home-header {
		/* height: auto !important;
		aspect-ratio: 360 / 640; */
	}
}

.home-header .img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask: center center / calc(100% - var(--padding-inline) * 2) calc(100% - var(--padding-inline) * 2) no-repeat;
	mask: center center / calc(100% - var(--padding-inline) * 2) calc(100% - var(--padding-inline) * 2) no-repeat;
	transition: 0.3s linear;
	object-position: 72% center;
}
@media (min-width: 768px) {
	.home-header .img {
		/* padding: 40px; */
		/* object-position: top center; */
		object-position: 72% 15%;
	}
}

.home-header._change .img {
	-webkit-mask-size: 120% 120%;
	mask-size: 120% 120%;
}

.home-header._hide .img {
	opacity: 0;
}

@media (orientation: portrait) {
.home-header .img {
	-webkit-mask-image: url("../img/home/header-mask_portrait.svg");
	mask-image: url("../img/home/header-mask_portrait.svg");
}
}

@media (orientation: landscape) {
.home-header .img {
	-webkit-mask-image: url("../img/home/header-mask_landscape.svg");
	mask-image: url("../img/home/header-mask_landscape.svg");
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- インサート
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.home-insert01 {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-top: 100vh;
}

.home-insert01 .img {
	width: 36%;
}

@media (min-width: 768px) {
.home-insert01 .img {
	display: block;
	width: min(23%, 348px);
	margin-left: min(11%, 90px);
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- イントロ
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.home-intro {
	--content-width: 1600px;
	padding-top: var(--padding-block);
}
@media (min-width: 768px) {
	.home-intro {
		padding-top: calc(var(--padding-block) * 2);
	}
}

.home-intro .inner {
	display: grid;
	gap: 48px 6%;
}

@media (min-width: 768px) {
.home-intro .inner {
	grid-template-columns: min(47%, 620px) auto;
	justify-content: space-between;
}

.home-intro .image {
	grid-row: 1;
	grid-column: 2;
}

.home-intro .text {
	align-self: center;
}
}

@media (max-width: 767.9px) {
.home-intro .image {
	margin-inline: 20px var(--padding-inline_negative);
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- ABOUT
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.home-about {
	display: grid;
	max-width: 1920px;
	margin-inline: auto;
	padding-bottom: initial;
	row-gap: 48px;
}

.home-about .text {
	padding-inline: var(--padding-inline);
}

@media (min-width: 768px) {
.home-about {
	grid-template-columns: auto min(47%, 770px);
	justify-content: start;
}

.home-about .text {
	padding-left: 14%;
	align-self: center;
}

.home-about .button {
	margin-inline: initial;
}
}

@media (max-width: 767.9px) {
.home-about .img {
	width: calc(100% - var(--padding-inline) - 20px);
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- インサート
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.home-insert02 {
	max-width: var(--content-width);
	margin-inline: auto;
}

.home-insert02 .img {
	display: block;
	max-width: 36%;
	margin-left: auto;
}

@media (min-width: 768px) {
.home-insert02 .img {
	width: min(23%, 348px);
	margin-right: auto;
	transform: translateX(38%);
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- NEWS
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.home-news {
	background: #d0e7e9;
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- REPORTS & ARCHIVES
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.home-archives {
	background: #fbf2df;
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- PROGRAMS
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.home-programs {
	--content-width: 1760px;
	--home-programs-interval: calc(var(--padding-inline) / 2);
	padding-bottom: calc(var(--padding-block) + var(--home-programs-interval) * 3);
	background: #eebc9f;
}

.home-programs.fixed .heading_en {
	position: sticky;
	top: var(--padding-inline);
}

.home-programs-ul {
	display: grid;
	row-gap: 3em;
}

.home-programs-li {
	display: grid;
	position: sticky;
	top: var(--padding-inline);
	padding: calc(var(--padding-inline) * 1.5) var(--padding-inline);
	border: 1px solid;
	background: #fff;
	gap: 1.2em 4%;
}

.home-programs-li:nth-child(2) {
	transform: translateY(var(--home-programs-interval));
}

.home-programs-li:nth-child(3) {
	transform: translateY(calc(var(--home-programs-interval) * 2));
}

.home-programs-li:nth-child(4) {
	transform: translateY(calc(var(--home-programs-interval) * 3));
}

.home-programs-li .img {
	width: 100%;
	background: rgb(var(--color_main_rgb), 0.1);
	object-fit: cover;
	aspect-ratio: 4 / 3;
	-webkit-mask: url("../img/common/image-mask.svg") center center / 100% 100% no-repeat;
	mask: url("../img/common/image-mask.svg") center center / 100% 100% no-repeat;
}

.home-programs-li .text {
	/* height: 21em; */
	display: flex;
	flex-direction: column;
	height: stretch;
}

.home-programs-li .heading {
	display: -webkit-box;
	overflow: hidden;
	margin-bottom: 0.3em;
	font-size: clamp(24px, calc(100vw * 26 / 1024), 50px);
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.home-programs-li .name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--color_main);
	font-weight: 700;
	font-size: 1.1em;
	font-family: var(--font_en);
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.home-programs-li .description {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.home-programs-li .button {
	margin-top: 1em;
}

@media (min-width: 768px) {
	.home-programs-li {
		top: 8em;
		top: var(--padding-inline);
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	.home-programs-li .img {
		grid-row: 1;
		grid-column: 2;
	}

	.home-programs-li .button {
		margin-inline: initial;
	}
}

@media (max-width: 767.9px) {
	.home-programs-li .button {
		width: 100%;
	}
}