@charset "utf-8";

.page-home {
	color: white;
}

/**
 * ステートメント
 * -------------------------------------------------- */
.home_statement {
	display: grid;
	place-content: center;
	row-gap: calc(var(--defgap) * .5);
	position: relative;
	min-height: 100dvh;
}
.home_statement .emblem {
	z-index: -1;
	--imgMin: 160;
	--imgMax: 280;
	width: var(--imgSize);
	fill: url(#svg-grad-light);
	opacity: .4;
	mix-blend-mode: multiply;
	filter: blur(4px);
}
.home_statement :is(.c-title, .c-lead, .c-paragraph, .c-check) {
	filter: drop-shadow(0 2px 8px #80233422);
}
.home_statement .c-title {
	--fontMin: 24;
	--fontMax: 30;
	padding-bottom: .25em;
}
.home_statement .c-lead,
.home_statement .c-paragraph {
	font-feature-settings: "halt" 1;
}
.home_statement .c-lead {
	font-weight: 700;
	--fontMin: 24;
	--fontMax: 30;
}
.home_statement .c-paragraph {
	font-weight: 700;
	--fontMin: 14;
	--fontMax: 18;
	line-height: 2.25;
}
.home_statement .c-check {
	margin-top: 2em;
}
.home_statement .c-maincopy {
	pointer-events: none;
	position: absolute;
	right: calc(var(--breakout) + .5em);
	top: 0;
	--fontMin: 48;
	--fontMax: 96;
	line-height: 1.2;
	white-space: nowrap;
	writing-mode: vertical-rl;
	mask: linear-gradient(to left, #0008, #0001);
}
@media screen and (max-width: 767.98px) {
	.home_statement .emblem {
		position: absolute;
	}
}
@media print, (min-width: 768px) {
	.home_statement {
		grid-template-columns: auto auto;
		align-items: center;
		gap: calc(var(--defgap) * .75) calc(var(--defgap) * 2);
		--sectionWidth: min(var(--cw) * 860 / var(--aspect), 860px);
	}
	.home_statement .emblem {
		grid-area: 1/ 1 / 3 / 2;
		place-self: start end;
		margin-top: calc(var(--defgap) * -4);
		margin-inline: calc(var(--defgap) * -1.5);
	}
	.home_statement .c-title {
		grid-area: 1 / 1 / 3 / 2;
	}
	.home_statement .c-lead,
	.home_statement .c-paragraph,
	.home_statement .c-check {
		grid-column: 2;
	}
	.home_statement .c-lead {
		grid-row: 1;
	}
	.home_statement .c-paragraph {
		grid-row: 2;
	}
	.home_statement .c-check {
		grid-row: 3;
	}
	.home_statement .c-check {
		justify-self: end;
		margin-top: calc(var(--defgap) * -1.75);
	}
}

/**
 * Pick up
 * -------------------------------------------------- */
.home_pickup1, .home_pickup2 {
	display: grid;
	grid-auto-flow: dense;
	place-content: center;
	color: var(--themecolor);
}
:is(.home_pickup1, .home_pickup2) .c-title {
	padding-left: 1em;
}
:is(.home_pickup1, .home_pickup2) .c-subject {
	padding-bottom: .5em;
	border-image: linear-gradient(to left, #ffaba900, #ff8461b3 2em) 1 / 0 0 1px;
}
:is(.home_pickup1, .home_pickup2) .c-paragraph {
	margin-top: 1em;
	line-height: 2;
	letter-spacing: .1em;
}
@media print, (min-width: 768px) {
	.home_pickup2 {
		--sectionWidth: min(var(--cw) * 900 / var(--aspect), 900px);
	}
	:is(.home_pickup1, .home_pickup2) .c-paragraph {
		word-break: auto-phrase;
	}
}

/* :::::: 記念ロゴ・キャッチフレーズについて :::::: */
.home_logoslogan {
	display: grid;
	grid-auto-flow: dense;
	align-items: center;
	justify-items: center;
	margin-top: calc(var(--defgap) * .25);
	fill: currentcolor;
	--chamfer: calc(var(--defgap) * .3);
	mask: linear-gradient(white, white),
		radial-gradient(circle at left top, #fff var(--chamfer), #fff0 var(--chamfer)),
		radial-gradient(circle at right top, #fff var(--chamfer), #fff0 var(--chamfer)),
		radial-gradient(circle at left bottom, #fff var(--chamfer), #fff0 var(--chamfer)),
		radial-gradient(circle at right bottom, #fff var(--chamfer), #fff0 var(--chamfer));
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.home_logoslogan .image {
	display: grid;
	justify-items: center;
	row-gap: .75em;
}
.home_logoslogan .image .logo {
	width: 90%;
}
.home_logoslogan .image .copy {
	width: 100%;
}
.home_logoslogan .c-subject,
.home_logoslogan .c-paragraph {
	justify-self: start;
}
.home_logoslogan .c-subject {
	width: 100%;
}
.home_logoslogan .c-check {
	grid-column: span 1;
	margin-top: 2em;
	text-align: center;
}
.home_logoslogan .c-check .t {
	grid-row: 1 / 3;
	white-space: nowrap;
}
.home_logoslogan .c-check .dottoline {
	display: none;
}
@media screen and (max-width: 767.98px) {
	.home_logoslogan {
		grid-template-columns: repeat(2, auto);
	}
	.home_logoslogan > * {
		grid-column: span 2;
	}
	.home_logoslogan .image {
		width: calc(var(--defgap) * 5);
		fill: currentcolor;
	}
	.home_logoslogan .c-subject {
		margin-top: 1em;
		border-image-outset: 0 0 0 var(--sideshift);
	}
}
@media print, (min-width: 768px) {
	.home_logoslogan {
		grid-template-columns: repeat(3, auto);
		column-gap: var(--defgap);
	}
	.home_logoslogan .image {
		grid-row: 1 / 4;
		width: calc(var(--defgap) * 5);
	}
	.home_logoslogan .c-subject,
	.home_logoslogan .c-paragraph {
		grid-column: 2 / 4;
	}
	.home_logoslogan .c-check {
		grid-row: 3;
	}
}

/* :::::: ごあいさつ・記念事業 :::::: */
.home_greeting, .home_project, .home_news {
	display: grid;
	grid-template-columns: 6fr 4fr;
	margin-top: calc(var(--defgap) * .25);
	border-radius: 0 0 calc(var(--defgap) * 2) 0;
	--chamfer: calc(var(--defgap) * .3);
	mask: linear-gradient(white, white),
		radial-gradient(circle at left top, #fff var(--chamfer), #fff0 var(--chamfer)),
		radial-gradient(circle at right top, #fff var(--chamfer), #fff0 var(--chamfer));
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
:is(.home_greeting, .home_project, .home_news) .c-subject {
	grid-area: 1 / 1;
	align-self: center;
	row-gap: .4em;
	padding-bottom: 1em;
	border-image-outset: 0 0 0 var(--sideshift);
}
:is(.home_greeting, .home_project) .image {
	--imgMin: 128;
	--imgMax: 128;
	grid-area: 1 / 2;
}
:is(.home_greeting, .home_project, .home_news) .image img {
	width: var(--imgSize);
	border-radius: 50%;
}
:is(.home_greeting, .home_project) .c-paragraph {
	grid-area: 2 / 1 / 3 / 3;
	margin-top: 1em;
}
.home_news .news_lineup {
	margin-top: 1em;
}
.home_news .news_lineup.is-comingsoon {
	padding-top: 1em;
	text-align: center;
}
:is(.home_greeting, .home_project) .c-check {
	grid-area: 3 / 1 / 4 / 3;
	margin: 1em 0 0 auto;
}
.home_news .c-check {
	margin: 1em 0 0 auto;
}
@media screen and (max-width: 767.98px) {
	.home_pickup2 {
		row-gap: var(--defgap);
	}
	.home_news .c-subject {
		margin-top: 1em;
	}
	.home_news .image {
		--imgMin: 128;
		--imgMax: 128;
		grid-area: 1 / 2;
	}
	.home_news .news_lineup {
		grid-column: span 2;
	}
	.home_news .c-check {
		grid-column: span 2;
	}
}
@media print, (min-width: 768px) {
	.home_pickup2 {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--defgap);
	}
	.home_pickup2 .c-title,
	.home_pickup2 .home_news {
		grid-column: span 2;
	}
	.home_news {
		grid-template-columns: 1fr 2fr;
		column-gap: var(--defgap);
		margin-top: var(--defgap);
	}
	.home_news .c-subject {
		grid-area: 1 / 2;
	}
	.home_news .image {
		grid-area: 1 / 1 / 4 / 2;
		align-self: center;
	}
	.home_news .news_lineup {
		grid-area: 2 / 2;
	}
	.home_news .c-check {
		grid-area: 3 / 2;
	}
}

/**
 * ニュース一覧
 * -------------------------------------------------- */
.news_lineup {
	-fontMin: 12;
	--fontMax: 15;
	font-size: var(--fontSize);
}
.news_lineup .item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25em 1em;
	position: relative;
	padding: 1em 0 1em .5em;
}
.news_lineup .item:not(:last-child) {
	border-image: linear-gradient(to left, #ccc0, #ccc 4em) 1 / 0 0 1px;
}
.news_lineup .date {
	font-size: 87.5%;
	font-family: var(--fontEn);
}
.news_lineup .category {
	display: flex;
	flex-wrap: wrap;
	gap: .25em;
	font-size: 70%;
	line-height: 1.2;
}
.news_lineup .category .tag {
	padding: .25em .5em;
	border: 1px solid currentcolor;
	border-radius: .2em;
}
.news_lineup .subject {
	flex-basis: 100%;
}
.news_lineup .subject a {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.news_lineup .subject a::before {
	content: "";
	position: absolute;
	inset: 0;
}
.news_lineup .subject .a {
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
	translate: -.25em 0;
}
@media (hover) {
	.news_lineup .subject .a {
		translate: -.25em 0;
		transition: translate .4s var(--easeOut);
	}
	.news_lineup .item:hover .subject .a {
		translate: 0;
		transition-duration: .2s;
	}
}
@media screen and (max-width: 767.98px) {
	.news_lineup .item {
		flex-wrap: wrap;
	}
	.news_lineup .subject {
		flex-basis: 100%;
	}
}

/**
 * カウントアップ年数
 * -------------------------------------------------- */
.home_countupyear,
.home_countupyear .years,
.home_countupyear .photos {
	display: grid;
	place-items: center;
	place-content: center;
}
.home_countupyear {
	width: auto;
	height: 100lvh;
	margin-inline: calc(var(--defgap) * -1);
	pointer-events: none;
	user-select: none;
	/* mix-blend-mode: luminosity; */
}
.home_countupyear > * {
	grid-area: 1 / 1;
}
.home_countupyear .years {
	z-index: 2;
	position: relative;
}
.home_countupyear .years p {
	display: flex;
	--fontMin: 100;
	--fontMax: 200;
	font: 300 var(--fontSize) / 1.1 var(--fontEn);
	font-variant-numeric: tabular-nums;
}
.home_countupyear .years p > * {
	width: .6em;
	text-align: center;
}
.home_countupyear .years p > :first-child {
	text-align: right;
}
.home_countupyear .years p > :last-child {
	text-align: left;
}
.home_countupyear .photos {
	perspective: 240px;
}
.home_countupyear .photos li {
	grid-area: 1 / 1;
	width: 40vw;
	height: fit-content;
}
@media screen and (max-width: 767.98px) {
	/* MEMO: Xはjs */
	.home_countupyear .photos li:nth-of-type(6n+1) { translate: 0 -200%; }
	.home_countupyear .photos li:nth-of-type(6n+2) { translate: 0 160%; }
	.home_countupyear .photos li:nth-of-type(6n+3) { translate: 0 80%; }
	.home_countupyear .photos li:nth-of-type(6n+4) { translate: 0 -120%; }
	.home_countupyear .photos li:nth-of-type(6n+5) { translate: 0 180%; }
	.home_countupyear .photos li:nth-of-type(6n+6) { translate: 0 -40%; }
}
@media print, (min-width: 768px) {
	.home_countupyear .photos {
		perspective: 400px;
	}
	.home_countupyear .photos li {
		width: 25vw;
	}
	/* MEMO: Yはjs */
	.home_countupyear .photos li:nth-of-type(6n+1) { translate: -120% 0; }
	.home_countupyear .photos li:nth-of-type(6n+2) { translate: 80% 0; }
	.home_countupyear .photos li:nth-of-type(6n+3) { translate: 40% 0; }
	.home_countupyear .photos li:nth-of-type(6n+4) { translate: -40% 0; }
	.home_countupyear .photos li:nth-of-type(6n+5) { translate: 100% 0; }
	.home_countupyear .photos li:nth-of-type(6n+6) { translate: -20% 0; }
}

/* :::::: 駒込学園100年の歩み :::::: */
.home_history {
	display: grid;
	align-content: center;
	position: relative;
	height: 100vh;
}
.home_history .c-subject .ico {
	fill: url(#svg-grad-emblem);
}
.home_history .c-subject .suckerline {
	--suckerShift: calc(var(--sectionWidth) * .5 - var(--cw) * .5);
	grid-column: 1 / 3;
	border-image-source: linear-gradient(to left, #fff0 var(--lineStart), #fff var(--lineEnd));
}
.home_history .c-subject .suckerline::before,
.home_history .c-subject .suckerline::after {
	background: #fff;
}
.home_history .c-paragraph {
	margin-top: 2em;
	padding-left: calc(var(--emblemSize) * 1.5);
	--fontMin: 14;
	--fontMax: 16;
	line-height: 2;
	letter-spacing: .1em;
}
.home_history .text {
	display: grid;
}
.home_history .c-check {
	justify-self: end;
	margin-top: 2em;
}
.home_history .image {
	overflow: hidden;
	margin-top: 2em;
	margin-inline: var(--breakout);
}
.history_photos {
	display: grid;
	grid-auto-flow: column;
	gap: calc(var(--defgap) * .25);
	--imgMin: 160;
	--imgMax: 240;
}
.history_photos li {
	width: fit-content !important;
}
.history_photos img {
	max-width: none;
	width: auto;
	height: var(--imgSize);
}
.home_history .c-maincopy {
	pointer-events: none;
	position: absolute;
	top: calc(50% - 4em);
	--fontMin: 64;
	--fontMax: 128;
	line-height: 1.2;
	white-space: nowrap;
	writing-mode: vertical-rl;
	mask: linear-gradient(to left, #0008, #0001);
}
@media screen and (max-width: 767.98px) {
	.home_history .c-maincopy {
		left: var(--breakout);
	}
}
@media print, (min-width: 768px) {
	.home_history {
		--sectionWidth: min(var(--cw) * 720 / var(--aspect), 720px);
	}
	.home_history .text {
		width: min(var(--cw) * 520 / var(--aspect), 520px);
	}
	.home_history .c-maincopy {
		right: calc(var(--breakout) + .5em);
	}
}
/* Animation
.history_photos {
	animation: showcase 180s linear infinite;
} */
@keyframes showcase {
	from { translate: 0 0; }
	to { translate: calc(var(--reelWidth) * -1) 0; }
}

/* :::::: 100年先に残したい学園風景 :::::: */
.home_special {
	--sectionWidth: calc(var(--cw) - var(--defgap) * 2);
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	min-height: 100svh;
}
@media print, (min-width: 768px) {
	.home_special {
		--sectionWidth: min(var(--cw) * 520 / var(--aspect), 520px);
	}
}
.home_special .text {
	position: relative;
	width: inherit;
}
.home_special .c-subject .t {
	display: grid;
	letter-spacing: .15em;
}
.home_special .c-subject .sub {
	font-size: 64%;
}
.home_special .c-subject .ico {
	fill: url(#svg-grad-emblem);
}
.home_special .c-subject .suckerline {
	--suckerShift: calc(var(--sectionWidth) * .5 - var(--cw) * .5);
	border-image-source: linear-gradient(to left, #fff0 var(--lineStart), #fff var(--lineEnd));
}
.home_special .c-subject .suckerline::before,
.home_special .c-subject .suckerline::after {
	background: #fff;
}
.home_special .c-paragraph {
	margin-top: 2em;
	padding-left: calc(var(--emblemSize) * 1.5);
	--fontMin: 14;
	--fontMax: 16;
	line-height: 2;
	letter-spacing: .1em;
}
.home_special .c-maincopy {
	pointer-events: none;
	position: absolute;
	--fontMin: 64;
	--fontMax: 128;
	line-height: 1.2;
	white-space: nowrap;
	mask: linear-gradient(to top, #0001, #0008);
}
.home_special .text .c-maincopy {
	right: calc(var(--sectionWidth) * .5 - var(--cw) * .5 + var(--defgap) * 2);
	bottom: -1.5em;
}
.home_special .image .c-maincopy {
	left: 26%;
	bottom: var(--defgap);
}
.home_special .image {
	position: relative;
	width: 2000px;
	height: 100svh;
	margin-left: calc(var(--cw) * .5 - var(--sectionWidth) * .5);
}
.home_special .photo {
	display: grid;
	row-gap: .5em;
	z-index: 1;
	position: absolute;
	width: min(var(--cw) * var(--w) / var(--aspect), var(--w) * 1px);
}
.home_special .caption {
	--fontMin: 10;
	--fontMax: 12;
	font-size: var(--fontSize);
	line-height: 1.2;
}
@media screen and (max-width: 767.98px) {
	.home_special .photo {
		width: min(var(--cw) * (var(--w) * .6) / var(--aspect), var(--w) * .6px);
	}
}
.home_special .photo:nth-child(1) { --w: 384; bottom: 0; left: 0; }
.home_special .photo:nth-child(2) { --w: 200; top: 16%;  left: 16%; }
.home_special .photo:nth-child(3) { --w: 288; top: 44%;  left: 32%; }
.home_special .photo:nth-child(4) { --w: 176; top: 0;    left: 40%; }
.home_special .photo:nth-child(5) { --w: 272; top: 0;    right: 28%; }
.home_special .photo:nth-child(6) { --w: 312; bottom: 0; right: 16%; }
.home_special .photo:nth-child(7) { --w: 380; top: 16%;  right: 0; }
.home_special .photo:nth-child(1) .caption,
.home_special .photo:nth-child(6) .caption {
	order: -1;
}
.home_special .c-check {
	position: absolute;
	right: 0;
	bottom: var(--defgap);
}

/* :::::: 間奏 :::::: */
.home_interlude {
	height: 200vh;
	margin-top: var(--sectionSpace);
}

/* :::::: 一隅を照らす人たち :::::: */
.home_interview {
	display: grid;
	color: var(--themecolor);
}
.home_interview .text {
	display: grid;
}
.home_interview .c-subject .suckerline {
	grid-column: 1 / 3;
	padding-top: .75em;
}
.home_interview .c-subject .suckerline::before,
.home_interview .c-subject .suckerline::after {
	left: calc(var(--sectionWidth) * .5 - var(--cw) * .5);
}
.home_interview .c-paragraph {
	margin-top: 1.75em;
	padding-left: calc(var(--emblemSize) * 1.5);
	--fontMin: 14;
	--fontMax: 16;
	line-height: 2;
	letter-spacing: .1em;
}
.home_interview .c-check {
	justify-self: end;
	margin-top: 2em;
}
.home_interview .image {
	overflow: hidden;
}
.interview_photos {
	display: grid;
}
.interview_photos li {
	width: fit-content;
}
.interview_photos li:nth-child(1) {
	--imgMin: 176;
	--imgMax: 312;
}
.interview_photos li:nth-child(2) {
	--imgMin: 120;
	--imgMax: 240;
}
.interview_photos li:nth-child(3) {
	--imgMin: 136;
	--imgMax: 328;
}
.interview_photos a {
	display: block;
}
.interview_photos img {
	width: var(--imgSize);
	border-radius: 50%;
}
@media screen and (max-width: 767.98px) {
	.home_interview .image {
		margin-inline: calc(var(--defgap) * -1);
	}
	.interview_photos {
		display: grid;
		grid-template: auto auto / 1fr auto;
	}
	.interview_photos li:nth-child(1) {
		grid-area: 1 / 1;
	}
	.interview_photos li:nth-child(2) {
		grid-area: 2 / 1;
		justify-self: end;
	}
	.interview_photos li:nth-child(3) {
		place-self: center end;
		grid-area: 1 / 2 / 3 / 3;
	}
}
@media print, (min-width: 768px) {
	.home_interview {
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: calc(var(--defgap) * 2);
	}
	.home_interview .text {
		width: min(var(--cw) * 380 / var(--aspect), 380px);
	}
	.home_interview .image {
		margin-right: calc(var(--sectionWidth) * .5 - var(--cw) * .5);
	}
	.interview_photos {
		grid-template-columns: auto 1fr;
	}
	.interview_photos li:nth-child(2) {
		grid-area: 2 / 2;
		justify-self: start;
		margin-top: max(var(--cw) * -56 / var(--aspect), -56px);
		margin-bottom: max(var(--cw) * -32 / var(--aspect), -32px);
	}
	.interview_photos li:nth-child(3) {
		grid-area: 3 / 1;
		margin-right: max(var(--cw) * -48 / var(--aspect), -48px);
	}
	.interview_photos img {
		min-width: var(--imgSize);
	}
}

/* :::::: 記念ムービー :::::: */
.home_movie {
	display: grid;
	position: relative;
	margin-top: 50vh;
	padding: var(--defgap);
	border: 1px solid #ffffff80;
}
.home_movie::before,
.home_movie::after {
	content: "";
	position: absolute;
	inset: calc(var(--defgap) * .5);
	height: 6px;
	background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="7" viewBox="0 0 6 7" style="fill:none;stroke:%23ffffff80"><path d="M6.75-1L-.75,8M12.75-1l-7.5,9M.75-1l-7.5,9"/></svg>') center / contain repeat-x;
	mask: linear-gradient(to top, #0000, #000);
}
.home_movie::before {
	bottom: auto;
}
.home_movie::after {
	top: auto;
}
.home_movie .c-subject {
	white-space: nowrap;
}
.home_movie .c-subject .ico {
	fill: url(#svg-grad-emblem);
}
.home_movie .c-subject .sub {
	font-size: 40%;
}
.movie_lineup {
	width: min(var(--cw) * 480 / var(--aspect), 480px);
}
.movie_lineup .js-modal {
	margin-block: .5em;
	vertical-align: middle;
}
.movie_lineup .label,
.movie_lineup .title {
	--fontMin: 14;
	--fontMax: 18;
}
.movie_lineup .label {
	display: flex;
	align-items: center;
	column-gap: .5em;
	font: 350 var(--fontSize) / 1.2 var(--fontEn);
	letter-spacing: .08em;
}
.movie_lineup .label .num {
	font-weight: inherit;
	font-size: 112%;
}
.movie_lineup .label .dottoline {
	order: -1;
	width: 1em;
	margin-left: calc(var(--dotsize) + 0.3em);
}
.movie_lineup .title {
	justify-self: center;
	font-size: var(--fontSize);
	line-height: 1.5;
	letter-spacing: .1em;
}
.movie_lineup .title::before {
	content: "「";
}
.movie_lineup .title::after {
	content: "」";
}
.movie_lineup .thumb {
	--imgMin: 500;
	--imgMax: 400;
	text-align: center;
}
.movie_lineup .thumb .wrap {
	overflow: hidden;
}
.movie_lineup .thumb :is(.wrap, .icon) {
	display: grid;
	place-items: center;
}
.movie_lineup .thumb :is(.wrap, .icon) > * {
	grid-area: 1 / 1;
}
.movie_lineup .thumb .icon {
	z-index: 1;
	--size: min(var(--cw) * 80 / var(--aspect), 80px);
	--length: calc(80px * 3.141592653589);
	width: var(--size);
	height: var(--size);
}
.movie_lineup .thumb .icon .c {
	overflow: visible;
	width: 100%;
	fill: none;
	stroke: white;
	stroke-dasharray: calc(var(--length) * .92) calc(var(--length) * .28);
}
.movie_lineup .thumb .icon .p {
	width: 37.5%;
	margin-left: 10%;
	fill: url(#svg-grad-play);
}
.movie_lineup .splide {
	--space: 48px;
	width: 100%;
}
.movie_lineup .splide__track {
	width: 100%;
	overflow: visible;
	mask: linear-gradient(to left, #0000, #000 var(--space), #000 calc(100% - var(--space)), #0000) center / contain no-repeat;
}
.movie_lineup .list {
	display: flex;
}
.movie_lineup .item {
	max-width: 80%;
	margin-right: 4%;
}
.movie_lineup .item::after {
	content: attr(data-title);
	position: absolute;
	top: calc(100% + .25em);
	left: 0;
	width: 100%;
}
.movie_lineup .splide__arrow {
	cursor: pointer;
	z-index: 1;
	position: absolute;
	top: 0;
	width: 48px;
	height: 100%;
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.movie_lineup .splide__arrow--prev {
	left: 0;
}
.movie_lineup .splide__arrow--prev svg {
	scale: -1 1;
}
.movie_lineup .splide__arrow--next {
	right: 0;
}
@media (hover) {
	.movie_lineup .js-modal {
		cursor: pointer;
	}
	.movie_lineup .thumb {
		position: relative;
	}
	.movie_lineup .thumb::before {
		content: "";
		z-index: 1;
		position: absolute;
		inset: 0;
		background: #0004;
		transition: opacity .6s;
	}
	.movie_lineup .thumb .icon,
	.movie_lineup .js-modal .thumb img {
		transition: scale .6s var(--easeOut);
	}
	.movie_lineup .js-modal:not(:hover) .thumb::before {
		opacity: 0;
	}
	.movie_lineup .js-modal:hover .icon {
		scale: .94;
	}
	.movie_lineup .js-modal:hover .thumb img {
		scale: 1.04;
	}
	.movie_lineup .js-modal:hover .thumb::before,
	.movie_lineup .js-modal:hover .icon,
	.movie_lineup .js-modal:hover .thumb img {
		transition-duration: .4s;
	}
}
@media screen and (max-width: 767.98px) {
	.home_movie {
		padding-bottom: calc(var(--defgap) * 3);
	}
	.home_movie .c-subject {
		justify-self: center;
		padding-block: calc(var(--defgap) * 3);
		padding-right: 1em;
	}
	.movie_lineup {
		width: min(var(--cw) - var(--defgap) * 2, 480px);
		margin-inline: calc(var(--defgap) * -1);
	}
	.movie_lineup .splide {
		width: inherit;
	}
	.movie_lineup .thumb .icon {
		--size: min(var(--cw) * 40 / var(--aspect), 80px);
	}
}
@media print, (min-width: 768px) {
	.home_movie {
		grid-template-columns: 1fr 2fr;
		place-items: center;
		column-gap: calc(var(--defgap) * 2);
		width: min(var(--cw) * 1000 / var(--aspect), 1000px);
		padding-block: calc(var(--defgap) * 1.5);
	}
	.movie_lineup .splide__arrow--prev {
		left: -8px;
	}
	.movie_lineup .splide__arrow--next {
		right: -8px;
	}
}

/**
 * オープニングスプラッシュ
 * -------------------------------------------------- */
#introduction {
	display: grid;
	align-items: center;
}
#introduction > * {
	grid-area: 1 / 1;
}
.home_count100 {
	display: grid;
	place-items: center;
	height: 100svh;
}
.count100 {
	display: grid;
	align-items: center;
	justify-content: center;
	transition: opacity .4s;
}
.count100.is-standby {
	opacity: 0;
}
.count100 > * {
	grid-area: 1 / 1;
	color: var(--themecolor);
	fill: var(--themecolor);
	clip-path: inset(0);
}
.count100 .count {
	display: grid;
	grid-template-columns: repeat(2, auto);
	height: 1.25em;
	--fontMin: 40;
	--fontMax: 48;
	font: 400 var(--fontSize) / 1 var(--fontEn);
	mask: linear-gradient(to top, #0000, #000 20% 80%, #0000) center no-repeat;
	/* clip-path: inset(0); */
}
.count100 .count svg {
	width: .75em;
	height: 1.25em;
}
.count100 :is(.num1, .num10) {
	display: grid;
	justify-items: center;
}
.count100 .num100 {
	opacity: 0;
	scale: .8;
}
.count100 .num10 {
	justify-self: end;
	transition: translate .5s var(--easeInOut);
}
.count100 .num1 {
	justify-self: start;
	transition: translate .6s var(--easeInOut);
}
.count100.is-standby :is(.num1, .num10) .n0 { grid-row: 1; }

.count100 :is(.num1, .num10)[data-count="0"] .n0,
.count100 :is(.num1, .num10)[data-count="1"] .n1,
.count100 :is(.num1, .num10)[data-count="2"] .n2,
.count100 :is(.num1, .num10)[data-count="3"] .n3,
.count100 :is(.num1, .num10)[data-count="4"] .n4,
.count100 :is(.num1, .num10)[data-count="5"] .n5,
.count100 :is(.num1, .num10)[data-count="6"] .n6,
.count100 :is(.num1, .num10)[data-count="7"] .n7,
.count100 :is(.num1, .num10)[data-count="8"] .n8,
.count100 :is(.num1, .num10)[data-count="9"] .n9 { grid-row: 2; }

.count100 :is(.num1, .num10)[data-count="0"] .n9,
.count100 :is(.num1, .num10)[data-count="1"] .n0,
.count100 :is(.num1, .num10)[data-count="2"] .n1,
.count100 :is(.num1, .num10)[data-count="3"] .n2,
.count100 :is(.num1, .num10)[data-count="4"] .n3,
.count100 :is(.num1, .num10)[data-count="5"] .n4,
.count100 :is(.num1, .num10)[data-count="6"] .n5,
.count100 :is(.num1, .num10)[data-count="7"] .n6,
.count100 :is(.num1, .num10)[data-count="8"] .n7,
.count100 :is(.num1, .num10)[data-count="9"] .n8 { grid-row: 1; }

.count100 .num1[data-count="0"],
.count100 .num1[data-count="2"],
.count100 .num1[data-count="4"],
.count100 .num1[data-count="6"],
.count100 .num1[data-count="8"] { animation: up1 .15s both; }
.count100 .num1[data-count="1"],
.count100 .num1[data-count="3"],
.count100 .num1[data-count="5"],
.count100 .num1[data-count="7"],
.count100 .num1[data-count="9"] { animation: up2 .15s both; }

.count100 .num10[data-count="0"],
.count100 .num10[data-count="2"],
.count100 .num10[data-count="4"],
.count100 .num10[data-count="6"],
.count100 .num10[data-count="8"] { animation: up3 .25s both; }
.count100 .num10[data-count="1"],
.count100 .num10[data-count="3"],
.count100 .num10[data-count="5"],
.count100 .num10[data-count="7"],
.count100 .num10[data-count="9"] { animation: up4 .25s both; }

@keyframes up1 { from { translate: 0 0; } to { translate: 0 -1.25em; } }
@keyframes up2 { from { translate: 0 0; } to { translate: 0 -1.25em; } }
@keyframes up3 { from { translate: 0 0; } to { translate: 0 -1.25em; } }
@keyframes up4 { from { translate: 0 0; } to { translate: 0 -1.25em; } }

.count100.is-fix .count {
	opacity: 0;
	scale: .8;
	transition: opacity .2s, scale .2s var(--easeOut);
}
.count100.is-fix .num100 {
	opacity: 1;
	scale: 1;
	transition: opacity .8s, scale .8s var(--easeOut);
}
.count100.is-fixed .num100 {
	animation: finish 1s var(--easeIn) both;
}
@keyframes finish {
	from { opacity: 1; scale: none; }
	80% { opacity: 0; }
	to { opacity: 0; scale: .4; }
}

/* :::::: Light Up Your World. :::::: */
.home_maincopy {
	display: grid;
	align-items: center;
	min-height: 100svh;
}
.home_maincopy .c-maincopy {
	--fontMin: 72;
	--fontMax: 96;
	filter: url(#svg-filter-morph); /* js でアニメーション */
}
@media screen and (max-width: 767.98px) {
	.home_maincopy .c-maincopy {
		margin-inline-start: -.25em;
	}
}
@media print, (min-width: 768px) {
	.home_maincopy {
		justify-items: center;
	}
}

/* :::::: 100年のともしび、未来へつなぐ。 :::::: */
.home_logosplash {
	place-self: center;
}
.p-logosplash {
	display: grid;
	place-items: center;
	min-height: 100lvh;
}
.splash {
	--aspect: 640;
	display: grid;
	place-items: center;
	align-content: center;
	row-gap: calc(var(--defgap) * 1.6);
	color: white;
	fill: white;
	line-height: 0;
	mix-blend-mode: screen;
}
.logosplash-pin-spacer {
	mix-blend-mode: screen;
}
.splash > * {
	grid-area: 1 / 1;
}
.splash svg {
	width: 100%;
}
.splash :is(.circle, .symbol, .logo) {
	display: grid;
	position: relative;
	width: min(var(--cw) * 313 / var(--aspect), 313px);
	height: min(var(--cw) * 313 / var(--aspect), 313px);
	border-radius: 50%;
}
.splash .circle {
	z-index: 1;
	overflow: visible;
	fill: none;
	stroke: white;
	stroke-width: 9;
	stroke-linecap: round;
	stroke-dasharray: 960 960;
}
.splash .c-copy {
	grid-row: 2;
	width: min(var(--cw) * 480 / var(--aspect), 480px);
}
@media screen and (max-width: 767.98px) {
	.home_logosplash {
		padding-bottom: calc(var(--defgap) * 2);
	}
}
@media print, (min-width: 768px) {
	.splash {
		--aspect: 1200;
		row-gap: calc(var(--defgap) * 1.2);
	}
	.splash .c-copy {
		width: min(var(--cw) * 640 / var(--aspect), 640px);
	}
}
/* Layout */
.splash .petal {
	stroke: black;
}
.splash .line {
	width: inherit;
	height: auto;
	stroke: white;
}
.splash .symbol {
	overflow: hidden;
	grid-template-columns: 1fr 1fr;
}
.splash .symbol > * {
	grid-row: 1;
}
.splash .symbol .-l {
	grid-column: 1;
}
.splash .symbol .-r {
	grid-column: 2;
	transform: scaleX(-1);
}
.splash .symbol .line,
.splash .symbol .text,
.splash .symbol .circle {
	grid-column: 1 / 3;
}
.splash .symbol .line {
	stroke-dasharray: 30 30;
}
.splash .symbol .hand {
	align-self: end;
	position: relative;
	top: max(var(--cw) * -6 / var(--aspect), -6px);
	width: min(var(--cw) * 51 / var(--aspect), 51px);
}
.splash .symbol .hand.-l {
	justify-self: end;
	left: min(var(--cw) * 2 / var(--aspect), 2px);
}
.splash .symbol .hand.-r {
	justify-self: start;
}
.splash .symbol .hand > * {
	transform-origin: right bottom;
}
.splash .symbol .magnolia {
	display: grid;
	place-items: end;
	position: relative;
}
.splash .symbol .magnolia.-r {
	left: min(var(--cw) * 2 / var(--aspect), 2px);
}
.splash .symbol .magnolia .petal {
	grid-area: 1/ 1;
	position: relative;
	width: min(var(--w) * var(--cw) * 1 / var(--aspect), var(--w) * 1px);
	transform-origin: right bottom;
}
.splash .symbol .magnolia .-p1 { --w: 133; top: max(var(--cw) * -4 / var(--aspect), -4px); right: max(var(--cw) * -3 / var(--aspect), -3px); }
.splash .symbol .magnolia .-p2 { --w: 107; top: max(var(--cw) * -8 / var(--aspect), -8px); right: max(var(--cw) * -10 / var(--aspect), -10px); }
.splash .symbol .magnolia .-p3 { --w: 79;  top: max(var(--cw) * -4 / var(--aspect), -4px); right: max(var(--cw) * -30 / var(--aspect), -30px); }
.splash .symbol .text {
	--deg: 13.5deg;
	--shift: translateY(max(var(--cw) * -125.5 / var(--aspect), -125.5px));
	display: grid;
	place-items: center;
	rotate: -3.8deg;
	translate: .75px -.75px;
}
.splash .symbol .text > * {
	grid-area: 1 / 1;
	width: min(var(--cw) * 24 / var(--aspect), 24px);
}
.splash .symbol .text svg:nth-of-type(1)  { transform: rotate(calc(var(--deg) * -5.98))    var(--shift); }
.splash .symbol .text svg:nth-of-type(2)  { transform: rotate(calc(var(--deg) * -5.05)) var(--shift); }
.splash .symbol .text svg:nth-of-type(3)  { transform: rotate(calc(var(--deg) * -3.98)) var(--shift); }
.splash .symbol .text svg:nth-of-type(4)  { transform: rotate(calc(var(--deg) * -2.95))  var(--shift); }
.splash .symbol .text svg:nth-of-type(5)  { transform: rotate(calc(var(--deg) * -2.02))    var(--shift); }
.splash .symbol .text svg:nth-of-type(6)  { transform: rotate(calc(var(--deg) * -1.02))    var(--shift); }
.splash .symbol .text svg:nth-of-type(7)  { transform: rotate(calc(var(--deg) * .05))    var(--shift); }
.splash .symbol .text svg:nth-of-type(8)  { transform: rotate(calc(var(--deg) * 1.08))   var(--shift); }
.splash .symbol .text svg:nth-of-type(9)  { transform: rotate(calc(var(--deg) * 2.4))   var(--shift); }
.splash .symbol .text svg:nth-of-type(10) { transform: rotate(calc(var(--deg) * 3.3))   var(--shift); }
.splash .symbol .text svg:nth-of-type(11) { transform: rotate(calc(var(--deg) * 4.15))  var(--shift); }
.splash .symbol .text svg:nth-of-type(12) { transform: rotate(calc(var(--deg) * 5))     var(--shift); }
.splash .symbol .text svg:nth-of-type(13) { transform: rotate(calc(var(--deg) * 5.95))  var(--shift); }

/* :::::: Motion :::::: */
.splash .circle {
	rotate: 270deg;
}
.splash.is-standby .circle {
	rotate: -45deg;
	stroke-dashoffset: 960;
}
.splash.is-standby .symbol .magnolia .petal {
	opacity: 0 !important;
}
.splash.is-standby .symbol .magnolia .-p1 {
	transform: rotate(53deg) translate(min(var(--cw) * 4 / var(--aspect), 4px), min(var(--cw) * 4 / var(--aspect), 4px));
}
.splash.is-standby .symbol .magnolia .-p2 {
	transform: rotate(36deg) translateY(min(var(--cw) * 4 / var(--aspect), 4px));
}
.splash.is-standby .symbol .magnolia .-p3 {
	transform: rotate(7deg) translateY(min(var(--cw) * 4 / var(--aspect), 4px));
}
.splash.is-standby .symbol .hand svg {
	opacity: 0;
	transform: rotate(-12deg) translateY(min(var(--cw) * 24 / var(--aspect), 24px));
}
.splash.is-standby .symbol .line {
	stroke-dashoffset: 30;
}
.splash.is-standby .symbol .text {
	transform: rotate(-180deg);
}
.splash.is-standby .symbol .text > * {
	opacity: 0;
}
.splash .c-copy {
	opacity: 1;
	filter: url(#svg-filter-water); /* js でアニメーション */
}
/* Transition */
.splash.is-motion .circle {
	transition: rotate 1.2s var(--easeInOut), stroke-dashoffset 1.2s var(--easeInOut);
}
.splash.is-motion .symbol .magnolia .petal {
	transition: opacity .8s, transform .8s var(--easeOut);
	backface-visibility: hidden;
}
.splash.is-motion .symbol .magnolia .-p3 {
	fill: white;
	transform: rotate(0deg) translateY(0);
}
.splash.is-motion .symbol .magnolia .-p3.is-transparent {
	fill: black;
	transform: scale(.8);
	transition: fill .4s, transform .4s;
	will-change: fill, transform;
}
.splash.is-motion .symbol .hand svg {
	transition: opacity .4s, transform .6s var(--easeOut);
}
.splash.is-motion .symbol .line {
	transition: stroke-dashoffset .8s var(--easeOut);
	mask: url(../img/splash/symbol_mask.svg) center / 100% 100% no-repeat;
}
.splash.is-motion .symbol .text {
	transition: transform 1.3s var(--easeOut);
}
.splash.is-motion .symbol .text > * {
	transition: opacity .4s;
}
/* Timing */
.splash.is-motion .symbol .magnolia .petal { transition-delay: .7s; }
.splash.is-motion .symbol .magnolia .-p2   { transition-delay: .8s; }
.splash.is-motion .symbol .magnolia .-p3   { transition-delay: .9s; }
.splash.is-motion .symbol .hand svg        { transition-delay: 1.5s; }
.splash.is-motion .symbol .line            { transition-delay: 1.8s; }
.splash.is-motion .symbol .text {
	--start: 1.8s;
	transition-delay: var(--start);
}
.splash.is-motion .symbol .text > *:nth-child(13) { transition-delay: calc(var(--start) + 0.1s); }
.splash.is-motion .symbol .text > *:nth-child(12) { transition-delay: calc(var(--start) + 0.1s); }
.splash.is-motion .symbol .text > *:nth-child(11) { transition-delay: calc(var(--start) + 0.2s); }
.splash.is-motion .symbol .text > *:nth-child(10) { transition-delay: calc(var(--start) + 0.2s); }
.splash.is-motion .symbol .text > *:nth-child(9)  { transition-delay: calc(var(--start) + 0.2s); }
.splash.is-motion .symbol .text > *:nth-child(8)  { transition-delay: calc(var(--start) + 0.3s); }
.splash.is-motion .symbol .text > *:nth-child(7)  { transition-delay: calc(var(--start) + 0.3s); }
.splash.is-motion .symbol .text > *:nth-child(6)  { transition-delay: calc(var(--start) + 0.4s); }
.splash.is-motion .symbol .text > *:nth-child(5)  { transition-delay: calc(var(--start) + 0.4s); }
.splash.is-motion .symbol .text > *:nth-child(4)  { transition-delay: calc(var(--start) + 0.5s); }
.splash.is-motion .symbol .text > *:nth-child(3)  { transition-delay: calc(var(--start) + 0.55s); }
.splash.is-motion .symbol .text > *:nth-child(2)  { transition-delay: calc(var(--start) + 0.6s); }
.splash.is-motion .symbol .text > *:nth-child(1)  { transition-delay: calc(var(--start) + 0.7s); }

/* 最後、一枚絵と差し替える */
.splash.is-fix.is-motion .symbol,
.splash.is-fix.is-motion .logo {
	transition: opacity .4s var(--easeOut);
}
.splash.is-fix.is-motion .symbol {
	transition-delay: .2s;
}
.splash.is-fix .symbol,
.splash:not(.is-fix) .logo {
	opacity: 0;
}
/* 透かし */
/* .splash .symbol { background: url(../img/splash/symbol.svg) center / cover no-repeat; } */

/* :::::: スクロールダウン :::::: */
.home_scrolldown {
	place-self: end start;
	display: flex;
	align-items: center;
	column-gap: .5em;
	position: relative;
	bottom: 50%;
	font-family: var(--fontEn);
	transform-origin: left bottom;
	rotate: 90deg;
}
.home_scrolldown .dottoline {
	scale: -1 1;
	width: 3em;
}
/* Motion */
.home_scrolldown.is-standby > * {
	opacity: 0;
	translate: -1em 0;
}
.home_scrolldown.is-motion > * {
	transition: opacity .6s, translate .6s var(--easeOut);
}
@media screen and (max-width: 767.98px) {
	.home_scrolldown {
		bottom: 10em;
	}
}