@charset "utf-8";

/**
 * 100周年記念玉蘭募金
 * -------------------------------------------------- */
.page-donation {
	--sidespace: min(var(--cw) * 80 / var(--aspect), 80px);
	padding-top: var(--headerHeight);
}

/* :::::: Page title :::::: */
.page-donation .page_title {
	display: grid;
	align-content: center;
	align-items: center;
	z-index: 0;
	position: relative;
	height: min(var(--cw) * 320 / var(--aspect), 320px);
	color: white;
	font: 700 min(var(--cw) * 40 / var(--aspect), 2.5rem) / 1.5 var(--fontSans);
}
.page-donation .page_title .sub {
	font-size: max(60%, .625rem);
}
.page-donation .page_title .bg,
.page-donation .page_title::after {
	z-index: -1;
	position: absolute;
	inset: 0 var(--breakout);
}
.page-donation .page_title .bg,
.page-donation .page_title .bg img {
	max-width: none;
}
.page-donation .page_title img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.page-donation .page_title::after {
	/* content: "";
	background: #8f1627aa;
	mix-blend-mode: darken; */
}
@media (min-width: 768px) {
	.page-donation .page_title {
		padding-left: calc(var(--sidespace) * .5);
	}
	.page-donation .page_title .bg,
	.page-donation .page_title::after {
		inset: 0 var(--breakout);
	}
}
@media (max-width: 767.98px) {
	.page-donation {
		--sidespace: min(var(--cw) * 32 / var(--aspect), 48px);
	}
	.page-donation .page_title {
		margin-right: var(--breakout);
		margin-left: var(--breakout);
		padding-inline: var(--sidespace);
		font-size: min(var(--cw) * 32 / var(--aspect), 2rem);
	}
}

/* :::::: Section :::::: */
.donation_section {
	margin: 80px auto 0;
	padding: 80px var(--sidespace);
	background: #fffe;
}
.donation_section .title {
	margin-bottom: 2em;
	font-weight: 600;
	font-size: 1.75rem;
	text-align: initial;
}
.donation_section .subject {
	color: var(--themecolor);
	margin-top: 2em;
	margin-bottom: 1em;
	padding-bottom: .25em;
	border-bottom: 1px solid currentcolor;
	font-size: 1.125rem;
}
.donation_section .label {
	margin-top: 1em;
	font-size: 1rem;
	line-height: 1.75;
}
.donation_section .num {
	font-size: larger;
	font-family: var(--fontSerif);
}
.donation_section .paragraph {
	margin-top: 1em;
	text-indent: 0;
}
.donation_section .paragraph.-grid,
.donation_section .label + .paragraph {
	margin-top: .5em;
}
.donation_section .button {
	margin: 2em auto;
}
@media (min-width: 768px) {
	.donation_section {
		--aspect: 10;
	}
}
@media (max-width: 767.98px) {
	.donation_section .title {
		font-size: 1.25rem;
	}
	.donation_section .subject {
		font-size: 1rem;
	}
	.donation_section .label {
		font-size: .9375rem;
	}
}
@media (max-width: 479.98px) {
	.donation_section {
		margin-right: calc(var(--sidegap) * -1);
		margin-left: calc(var(--sidegap) * -1);
	}
}

/* :::::: Data :::::: */
.donation_section .data,
.donation_section .datatable {
	margin-top: 1em;
}
.donation_section .data {
	padding-left: 1em;
}
:where(.donation_section) .data dt,
:where(.donation_section) .datatable dt {
	font-weight: 700;
}
:where(.donation_section) .data dt {
	text-indent: -1em;
}
:where(.donation_section) .datatable dt {
	padding: 0 1em;
	background: whitesmoke;
}
:where(.donation_section) .data dt::before {
	content: "";
	display: inline-block;
	position: relative;
	top: -.1em;
	width: .5em;
	height: .5em;
	margin-right: .5em;
	border-radius: .5em;
	vertical-align: middle;
	background: currentcolor;
}
:where(.donation_section) .data dd,
:where(.donation_section) .datatable dd {
	font-size: .9375rem;
}
:where(.donation_section) .data dd + dt,
:where(.donation_section) .datatable dd + dt {
	margin-top: .75em;
}
:where(.donation_section) .data dd:has(.button) {
	margin-left: -1em;
}
@media (min-width: 768px) {
	.donation_section .datatable {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		column-gap: 2em;
	}
	.donation_section .datatable dt {
		grid-column: 1;
		text-align-last: justify;
	}
	.donation_section .datatable dd {
		grid-column: 2;
	}
}
@media (max-width: 767.98px) {
	.donation_section .datatable dt {
		margin-bottom: .5em;
	}
	.donation_section .data dd,
	.donation_section .datatable dd {
		font-size: .8125rem;
	}
	.donation_section .datatable dd {
		padding: 0 1em;
	}
}
@media (max-width: 479.98px) {
	.donation_section .data,
	.donation_section .datatable {
		font-size: .875rem;
	}
	.donation_section .note {
		font-size: .625rem;
	}
}

/* :::::: Other :::::: */
.donation_section .logos {
	display: flex;
	gap: min(var(--cw) * 24 / var(--aspect), 24px);
	margin: .5em 0;
}
.donation_section .logos img {
	width: min(var(--cw) * var(--w) * .3 / var(--aspect), var(--w) * .3px);
}
.donation_section .note {
	padding-left: 1em;
	font-size: .75rem;
	line-height: 1.5;
	text-indent: -1em;
}
.donation_section .datatable + .note {
	margin-top: 1em;
}
.donation_section .-attention {
	color: var(--themecolor);
	font-weight: 600;
}
.donation_section .contact dt {
	padding: 0 1em;
	background: whitesmoke;
}
@media (min-width: 375px) {
	.donation_section .contact {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		gap: .5em 1em;
		margin-top: 1em;
	}
	.donation_section .contact dt {
		grid-column: 1;
		text-align-last: justify;
	}
	.donation_section .contact dd {
		grid-column: 2;
	}
}
@media (max-width: 767.98px) {
	.donation_section .logos {
		gap: calc(var(--cw) * 16 / var(--aspect));
	}
	.donation_section .logos img {
		width: calc(var(--cw) * var(--w) * .16 / var(--aspect))
	}
}
@media (max-width: 479.98px) {
	.donation_section .contact {
		font-size: .875rem;
	}
	.donation_section .note {
		font-size: .625rem;
	}
	.donation_section .logos img {
		width: calc(var(--cw) * var(--w) * .2 / var(--aspect))
	}
}
@media (max-width: 374.98px) {
	.donation_section .contact dt,
	.donation_section .contact dd {
		padding: 0 .5em;
	}
	.donation_section .contact dd {
		margin-top: .25em;
	}
	.donation_section .contact dd + dt {
		margin-top: .5em;
	}
}


/**
 * 駒込学園 100 周年記念ティザーサイト
 * -------------------------------------------------- */
.firstview {
	position: relative;
	height: 100vh;
	height: 100svh;
}
.firstview .splash {
	position: absolute;
	inset: 0;
}
.firstview .splash:not(.is-fin) {
	mix-blend-mode: darken;
}

/* :::::: 玉蘭募金のお願い :::::: */
.firstview .donation {
	display: grid;
	place-items: center;
	z-index: 2;
	position: fixed;
	right: calc(var(--breakout) + var(--sidegap));
	bottom: 1em;
}
.firstview .donation .button {
	width: 320px;
}
/* motion */
.firstview .donation.is-standby {
	transform: translateY(calc(100% + 1em));
}
.firstview .donation.is-anim {
	transition: transform 1.2s .2s var(--easeOut);
}
@media (max-width: 479.98px) {
	.firstview .donation {
		left: calc(var(--breakout) + var(--sidegap));
	}
	.firstview .donation .button {
		width: 100%;
		font-size: .875rem;
	}
}

/* :::::: Until 100th Anniversary :::::: */
.section.-countdown {
	z-index: 1;
	position: relative;
	max-width: 740px;
	margin: 80px auto 0;
	text-align: center;
}
.section.-countdown .lead {
	color: var(--themecolor);
	font: 700 1.75rem / 1.6 var(--fontSerif);
	word-break: auto-phrase;
	text-align: center;
}
.section.-countdown .container {
	margin-top: min(var(--cw) * 40 / var(--aspect), 40px);
	padding: var(--sidegap);
	padding-top: calc(var(--sidegap) * 1.5);
	background: #fffe;
}
.section.-countdown .label {
	color: var(--accentcolor);
	font: 400 2rem / 1.4 var(--fontEn);
	letter-spacing: .08em;
}
.section.-countdown .js-countdown {
	width: fit-content;
	margin: 1em auto 0;
	color: var(--themecolor);
	font-size: 1.625rem;
	line-height: 1;
	white-space: nowrap;
}
.section.-countdown .js-countdown .num {
	display: inline-block;
	position: relative;
	top: -.001em;
	width: 1.4em;
	color: black;
	font-size: 250%;
	font-family: var(--fontNum);
	font-variant-numeric: tabular-nums;
	vertical-align: middle;
}
.section.-countdown .js-countdown .day {
	width: auto;
}
.section.-interlude {
	overflow: hidden;
	margin-top: max(var(--cw) * -24 / var(--aspect), -48px);
	margin-right: var(--breakout);
	margin-left: var(--breakout);
	height: calc(var(--cw) * 60);
	max-height: 800px;
	opacity: .8;
	mix-blend-mode: luminosity;
}
/* forSafari */
_::-webkit-full-page-media, _:future, :root .section.-interlude {
	mix-blend-mode: multiply;
}
.section.-interlude img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
}
/* motion */
.section.-countdown .lead.js-inview .c {
	visibility: hidden
}
.section.-countdown .lead.is-anim .c {
	--delay: 0s;
	animation: appear .8s var(--delay) var(--easeBack) both;
}
@media (max-width: 767.98px) {
	.section.-countdown .lead {
		font-size: calc(var(--cw) * 28 / var(--aspect));
	}
	.section.-countdown .label {
		font-size: calc(var(--cw) * 26 / var(--aspect));
	}
	.section.-countdown .js-countdown {
		font-size: calc(var(--cw) * 20 / var(--aspect));
	}
	.section.-interlude {
		margin-top: calc(var(--cw) * -24 / var(--aspect));
	}
}

/* :::::: ごあいさつ :::::: */
.section.-message .title {
	letter-spacing: .24em;
}
.section.-message .column {
	position: relative;
	padding: calc(var(--sidegap) * 2) var(--sidegap);
}
.section.-message .column + .column {
	margin-top: min(var(--cw) * 80 / var(--aspect), 80px);
}
.section.-message .label {
	z-index: 0;
	position: absolute;
	top: var(--sidegap);
	width: min(var(--cw) * 190 / var(--aspect), 190px);
	color: var(--accentcolor);
}
.section.-message .label svg {
	mask: url(../img/message_mask.svg) center / 100% 100% no-repeat;
}
.section.-message .label::before {
	--size: min(var(--cw) * 180 / var(--aspect), 180px);
	content: "";
	z-index: -1;
	position: absolute;
	top: calc(var(--sidegap) * -1);
	width: var(--size);
	height: var(--size);
	background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="%238f1627" preserveAspectRatio="none"><path d="M0,.291v99.709s10.656-29.21,48.038-39.877C85.421,49.455,99.47,7.439,100,0L0,.291Z"/></svg>') center / 100% 100% no-repeat;
}
.section.-message .label .stroke {
	position: relative;
	top: min(var(--cw) * 8 / var(--aspect), 8px);
	width: 100%;
	height: auto;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 411 411;
}
.section.-message .label.js-inview:not(.is-inview) .stroke {
	stroke-dashoffset: 411;
}
.section.-message .label.js-inview.is-anim .stroke {
	transition: stroke-dashoffset 1s .2s ease;
}
.section.-message .image {
	max-width: 100%;
	margin-top: .75em;
}
.section.-message .image .caption {
	padding-block: .75em;
	border-bottom: 1px solid var(--accentcolor);
	font: 700 1rem / 1.5 var(--fontSerif);
	text-align: center;
}
.section.-message .image .caption b {
	font-size: 150%;
}
@media (min-width: 768px) {
	.section.-message .column {
		--columnside: min(var(--cw) * 80 / var(--aspect), 80px);
		display: grid;
		grid-template-columns: min(var(--cw) * 240 / var(--aspect), 240px) 1fr;
		row-gap: min(var(--cw) * 40 / var(--aspect), 40px);
		column-gap: min(var(--cw) * 80 / var(--aspect), 80px);
		padding: var(--columnside);
		padding-top: min(var(--cw) * 120 / var(--aspect), 120px);
		border-image: var(--linearwhite) 0 fill / 0 / 0 50vw 0 0;
	}
	.section.-message .column + .column {
		grid-template-columns: 1fr min(var(--cw) * 240 / var(--aspect), 240px);
		border-image-outset: 0 0 0 50vw;
	}
	.section.-message .column.-message1 .label {
		left: var(--columnside);
	}
	.section.-message .column.-message1 .label::before {
		left: calc(var(--columnside) * -1);
	}
	.section.-message .column.-message2 .label {
		right: var(--columnside);
	}
	.section.-message .column.-message2 .label::before {
		right: calc(var(--columnside) * -1);
		transform: scaleX(-1);
	}
	.section.-message .subject,
	.section.-message .text {
		grid-column: 2;
	}
	.section.-message .image {
		grid-row: 2;
		grid-column: 1;
	}
	.section.-message .column + .column .subject,
	.section.-message .column + .column .text {
		grid-column: 1;
	}
	.section.-message .column + .column .image {
		grid-column: 2;
	}
}
@media (max-width: 767.98px) {
	.section.-message .column {
		margin-right: var(--breakout);
		margin-left: var(--breakout);
		padding-top: calc(var(--cw) * 120 / var(--aspect));
		background: #fffe;
	}
	.section.-message .label {
		left: var(--sidegap);
	}
	.section.-message .label::before {
		left: calc(var(--sidegap) * -1);
	}
	.section.-message .label::before {
		--size: calc(var(--cw) * 120 / var(--aspect));
		margin-left: calc(var(--sidegap) * -1);
	}
	.section.-message .paragraph:first-of-type {
		margin-top: 1em;
	}
	.section.-message .image .caption {
		font-size: .75rem;
	}
}
@media (max-width: 767.98px) and (min-width: 480px) {
	.section.-message .image {
		float: left;
		width: 200px;
		margin: .5em calc(var(--cw) * 24 / var(--aspect)) .5em 0;
	}
	.section.-message .paragraph:first-of-type {
		margin-top: 1em;
	}
}
@media (max-width: 479.98px) {
	.section.-message .image {
		margin-right: auto;
		margin-left: auto;
	}
	.section.-message .image {
		width: calc(var(--cw) * 240 / var(--aspect));
	}
	.section.-message .subject {
		margin-top: 1em;
	}
}

/* :::::: 100周年記念ロゴ・キャッチフレーズ決定！ :::::: */
.section.-competition .container {
	padding: calc(var(--sidegap) * 2) var(--sidegap);
	background: #fffe;
}
.section.-competition .column {
	margin-top: min(var(--cw) * 80 / var(--aspect), 80px);
}
.section.-competition .label {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 1em;
	font-size: 1.5rem;
}
.section.-competition .label::after {
	content: "";
	position :relative;
	top: .05em;
	border-top: 1px double gainsboro;
}
.section.-competition .grandprize,
.section.-competition .awards {
	margin-top: min(var(--cw) * 24 / var(--aspect), 24px);
}
.section.-competition .competition_title {
	color: var(--accentcolor);
	font-size: 1.25rem;
}
.section.-competition .awards .lineup {
	display: grid;
	margin: 0;
}
.section.-competition .work {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: .5em;
	text-align: center;
}
.section.-competition .work img {
	width: 300px;
	padding: 16px;
	border: 1px solid gainsboro;
	border-radius: 8px;
	background: white;
}
.section.-competition .work .phrase {
	display: grid;
	place-items: center;
	width: 100%;
	height: 5em;
	padding: 16px;
	border: 1px solid gainsboro;
	border-radius: 8px;
	font: 700 min(var(--cw) * 16 / 4.8, 2rem) / 1.5 var(--fontSerif);
	white-space: nowrap;
	background: white;
}
.section.-competition .author {
	display: flex;
	align-items: center;
	column-gap: .5em;
	margin-top: 1em;
	font-size: .875rem;
	line-height: 1.2;
}
.section.-competition .author .tag {
	padding: .15em .75em .25em;
	border-radius: 2em;
	color: white;
	background: #008cab;
}
.section.-competition .author .name {
	font-size: 125%;
}
.section.-competition .author .tag.-j {
	background: #007e41;
}
@media (min-width: 768px) {
	.section.-competition .container {
		padding: min(var(--cw) * 80 / var(--aspect), 80px);
	}
	.section.-competition .column.-logo .awards .lineup {
		grid-template-columns: repeat(3, 1fr);
		gap: min(var(--cw) * 16 / var(--aspect), 16px);
	}
	.section.-competition .column.-copy .awards .lineup {
		grid-template-columns: repeat(2, 1fr);
		gap: min(var(--cw) * 24 / var(--aspect), 24px);
	}
}
@media (max-width: 767.98px) {
	.section.-competition .container {
		margin-right: var(--breakout);
		margin-left: var(--breakout);
	}
	.section.-competition .column {
		margin-top: calc(var(--cw) * 40 / var(--aspect));
	}
	.section.-competition .awards .lineup .item:nth-child(n+2) {
		margin-top: calc(var(--cw) * 24 / var(--aspect));
	}
	.section.-competition .work .phrase {
		font-size: min(var(--cw) * 25 / var(--aspect), 1.5rem);
	}
}

/* :::::: 玉蘭募金のお願い :::::: */
.js-fixedTrigger {
	position: relative;
	height: calc(64px + var(--sidegap));
}
.js-fixedTarget {
	position: fixed;
	inset: auto 0 0;
	width: min(100% - var(--sidegap) * 2, 360px);
	margin: 0 auto var(--sidegap);
}
.js-fixedTarget .button {
	width: 100%;
}
.js-fixedTarget:not(.is-appear) {
	transform: translateY( calc(100% + var(--sidegap) ));
}
.js-fixedTarget.is-anim {
	transition: transform .2s .2s var(--easeOut);
}
.js-fixedTarget.is-anim.is-appear {
	transition-duration: .4s;
}
.js-fixedTarget.is-fixed {
	position: absolute;
	width: min(100%, 360px);
}


/**
 * Component
 * -------------------------------------------------- */
.section {
	margin-top: var(--sectionSpace);
}
.title {
	margin-bottom: min(var(--cw) * 80 / var(--aspect), 80px);
	color: var(--themecolor);
	font: 400 2.5rem / 1.5 var(--fontSans);
	font-feature-settings: "palt";
	word-break: auto-phrase;
	text-align: center;
}
.subject {
	font: 700 2rem / 1.5 var(--fontSerif);
	word-break: auto-phrase;
}
.paragraph {
	font-size: 1rem;
	font-feature-settings: "palt" 1;
	text-indent: 1em;
	text-align: justify;
	line-break: strict;
	overflow-wrap: break-word;
	hanging-punctuation: last allow-end;
}
.paragraph::target-text {
	content: "";
	background-color: #8f162722;
}
.paragraph.-s {
	font-size: .9375rem;
	line-height: 1.75;
}
.paragraph.-grid {
	display: grid;
	column-gap: .5em;
}
.paragraph.-grid dt {
	grid-column: 1;
}
.paragraph.-grid dd {
	grid-column: 2;
}
.paragraph [lang="en"] {
	hyphens: auto;
}
.paragraph .url {
	word-break: break-all;
	text-justify: inter-character;
}
.paragraph small {
	font-size: smaller;
}
.arr {
	overflow: visible;
	width: 1.2em;
	height: auto;
	fill: none;
	stroke: currentcolor;
	stroke-width: .1em;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.button {
	display: grid;
	place-items: center;
	place-content: center;
	width: min(100% - var(--sidegap) * 2, 360px);
	height: 64px;
	padding: 1em;
	border: 2px solid var(--accentcolor);
	border-radius: 80px;
	color: white;
	font: 600 1rem / 1.5 var(--fontSans);
	letter-spacing: .1em;
	background: var(--accentcolor);
}
.button .arr {
	grid-column: 2;
	align-self: center;
	margin-left: .5em;
}
.link {
	color: var(--themecolor);
	background: linear-gradient(currentcolor, currentcolor) left bottom / 100% 1px no-repeat;
}
/* motion */
.subject.js-inview .c {
	visibility: hidden;
}
.subject.is-anim .c {
	--delay: 0s;
	animation: appear .8s var(--delay) var(--easeBack) both;
}
@media (hover) {
	.button {
		transition: color .4s, background .4s;
	}
	.button .arr {
		transition: transform .4s var(--easeOut);
	}
	.button:hover {
		color: var(--accentcolor);
		background: white;
		transition-duration: .1s;
	}
	.button:hover .arr {
		transform: translateX(.25em);
		transition-duration: .1s;
	}
	.link {
		transition: background-size .4s cubic-bezier(.3,1,.7,1);
	}
	.link:hover {
		background-position: right bottom;
		background-size: 0 1px;
		transition-duration: .2s;
	}
}
@media (max-width: 767.98px) {
	.title {
		margin-bottom: calc(var(--cw) * 40 / var(--aspect));
		font-size: 1.5rem;
	}
	.subject {
		font-size: 1.375rem;
	}
	.paragraph {
		font-size: .875rem;
	}
	.paragraph.-s {
		font-size: .8125rem;
	}
}
@media (max-width: 479.98px) {
	.paragraph {
		line-height: 1.75;
	}
}
@media (max-width: 374.98px) {
	.button {
		font-size: .875rem;
	}
}


/**
 * Layout
 * -------------------------------------------------- */
#canvas {
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
#canvas.is-standby {
	opacity: .2;
}
#canvas.is-anim {
	transition: opacity 3s var(--easeOut);
}
.kg-container.is-fixed {
	position: fixed;
	inset: 0;
}
.kg-logo a {
	display: grid;
	align-items: center;
	column-gap: .5em;
	width: fit-content;
	font: 700 min(var(--cw) * 16 / var(--aspect), 1rem) / 1.2 var(--fontSans);
	font-feature-settings: "palt";
}
.kg-logo .symbol {
	grid-area: 1 / 1 / 3 / 2;
	width: 3em;
	height: 3em;
	color: var(--themecolor);
}
.kg-logo b,
.kg-logo strong {
	grid-column: 2;
}
.kg-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 3;
	position: absolute;
	inset: 0 0 auto;
	height: var(--headerHeight);
	padding: 0 var(--sidegap);
}
.kg-header .menu {
	display: flex;
}
.kg-header .menu a {
	padding: 1em;
}
.kg-footer {
	display: grid;
	margin-top: var(--sectionSpace);
	padding: var(--sidegap);
	padding-bottom: calc(var(--sidegap) + 80px);
	border-image: var(--linearwhite) 0 fill / 0 / 0 50vw;
}
.kg-footer .menu {
	display: flex;
	align-items: center;
	font-size: clamp(.625rem, var(--cw) * 16 / var(--aspect), 1rem);
}
.kg-footer .menu a {
	padding: 1em;
}
.kg-footer .menu .arr {
	display: inline-block;
	position: relative;
	top: -.1em;
	margin-left: .5em;
	vertical-align: middle;
}
.kg-footer .copyright {
	margin-top: 2em;
	font-size: clamp(.625rem, var(--cw) * 10 / var(--aspect), .75rem);
	text-align: center;
}
.kg-main {
	width: min(var(--maxWidth), 980px);
	margin: 0 auto;
}
/* motion */
.kg-header.is-standby {
	opacity: 0;
	transform: translateY(-50%);
	pointer-events: none;
}
.kg-header.is-anim {
	transition: opacity 1.2s, transform 1.2s var(--easeOut);
}
@media (min-width: 768px) {
	.kg-footer {
		grid-template-columns: auto 1fr;
		align-items: center;
	}
	.kg-footer .copyright {
		grid-row: 2;
		grid-column: span 2;
	}
	.kg-footer .menu {
		justify-self: end;
	}
}
@media (max-width: 767.98px) {
	.kg-header .menu {
		display: none;
	}
	.kg-footer .menu {
		flex-direction: column;
	}
}


/**
 * Splash
 * -------------------------------------------------- */
.splash {
	--aspect: 7.68;
	display: grid;
	place-items: center;
	align-content: center;
	row-gap: min(var(--cw) * 48 / var(--aspect), 48px);
	min-height: inherit;
	color: var(--themecolor);
	line-height: 0;
}
.splash img,
.splash svg {
	width: 100%;
	height: auto;
}
.splash > * {
	grid-column: 1;
}
.splash .fin,
.splash .symbol,
.splash .logo,
.splash .inline {
	grid-row: 1;
}
.splash .inline {
	align-self: end;
	width: min(var(--cw) * 648 / var(--aspect), 648px);
}
.splash .copy {
	grid-row: 2;
	width: min(var(--cw) * 963 / 10.80, 963px);
	margin-top: min(var(--cw) * 40 / var(--aspect), 40px);
}
.splash .copy:has(.donation) {
	margin-bottom: min(var(--cw) * 40 / var(--aspect), 40px);
}
.splash .hand,
.splash .petal,
.splash .text,
.splash .copy {
	fill: currentcolor;
}
.splash .line {
	width: inherit;
	height: auto;
	stroke: currentcolor;
}
.splash .logo {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	align-content: space-between;
	justify-content: center;
	position: relative;
	aspect-ratio: 444 / 372;
	width: min(var(--cw) * 444 / var(--aspect), 444px);
}
@supports not (aspect-ratio: 444 / 372) {
	.splash .logo {
		height: min(var(--cw) * 372 / var(--aspect), 372px);
	}
}
.splash .logo > * {
	display: block;
	overflow: hidden;
	position: relative;
}
.splash .logo .emblem {
	top: max(var(--cw) * -1 / var(--aspect) , -1px);
	width: min(var(--cw) * 61 / var(--aspect), 61px);
}
.splash .logo .kg {
	top: max(-3 / var(--aspect), -3px);
	left: min(var(--cw) * 1 / var(--aspect), 1px);
	width: min(var(--cw) * 392 / var(--aspect), 392px);
}
.splash .logo .hundred {
	left: max(var(--cw) * -6 / var(--aspect), -6px);
	width: min(var(--cw) * 367 / var(--aspect), 367px);
}
.splash .logo .th {
	overflow: visible;
	align-self: end;
	top: max(var(--cw) * -5 / var(--aspect), -5px);
	left: max(var(--cw) * -8 / var(--aspect), -8px);
	width: min(var(--cw) * 43 / var(--aspect), 43px);
	margin-top: auto;
}
.splash .logo .anniv {
	width: inherit;
}
.splash .fin,
.splash .symbol {
	overflow: hidden;
	position: relative;
	aspect-ratio: 1 / 1;
	width: min(var(--cw) * 313 / var(--aspect), 313px);
	height: min(var(--cw) * 313 / var(--aspect), 313px);
	margin-bottom: min(var(--cw) * 80 / var(--aspect), 80px);
	border-radius: 50%;
}
.splash .symbol {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.splash .fin::after,
.splash .symbol::after {
	content: "";
	position: absolute;
	inset: 0;
	border: min(var(--cw) * 9 / var(--aspect), 9px) solid currentcolor;
	border-radius: 50%;
}
.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 {
	grid-column: 1 / 3;
	place-self: center;
}
.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 svg {
	transform-origin: right bottom;
}
.splash .symbol .hand.-l {
	justify-self: end;
	left: min(var(--cw) * 2 / var(--aspect), 2px);
}
.splash .symbol .hand.-r {
	justify-self: start;
}
.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); }


/* 100年のともしび、未来へ繋ぐ。出現 */
.splash .copy {
	--interval: .025s;
}
.splash .copy.is-standby path {
	transform: translateY(100%);
}
.splash .copy.is-anim path {
	transition: transform .6s var(--easeOut);
}
.splash .copy.is-anim path:nth-of-type(1)  { transition-delay: calc(var(--interval) * 0); }
.splash .copy.is-anim path:nth-of-type(2)  { transition-delay: calc(var(--interval) * 1); }
.splash .copy.is-anim path:nth-of-type(3)  { transition-delay: calc(var(--interval) * 2); }
.splash .copy.is-anim path:nth-of-type(4)  { transition-delay: calc(var(--interval) * 3); }
.splash .copy.is-anim path:nth-of-type(5)  { transition-delay: calc(var(--interval) * 4); }
.splash .copy.is-anim path:nth-of-type(6)  { transition-delay: calc(var(--interval) * 5); }
.splash .copy.is-anim path:nth-of-type(7)  { transition-delay: calc(var(--interval) * 6); }
.splash .copy.is-anim path:nth-of-type(8)  { transition-delay: calc(var(--interval) * 7); }
.splash .copy.is-anim path:nth-of-type(9)  { transition-delay: calc(var(--interval) * 8); }
.splash .copy.is-anim path:nth-of-type(10) { transition-delay: calc(var(--interval) * 9); }
.splash .copy.is-anim path:nth-of-type(11) { transition-delay: calc(var(--interval) * 10); }
.splash .copy.is-anim path:nth-of-type(12) { transition-delay: calc(var(--interval) * 11); }
.splash .copy.is-anim path:nth-of-type(13) { transition-delay: calc(var(--interval) * 12); }
.splash .copy.is-anim path:nth-of-type(14) { transition-delay: calc(var(--interval) * 13); }
.splash .copy.is-anim path:nth-of-type(15) { transition-delay: calc(var(--interval) * 14); }
.splash .copy.is-anim path:nth-of-type(16) { transition-delay: calc(var(--interval) * 15); }

/* 100年のともしび、未来へ繋ぐ。を下へズラす */
.splash .copy:not(.is-fix) {
	transform: translateY(-25vh);
}
.splash .copy.is-anim.is-fix {
	animation: copyFix 1s var(--easeInOut) both;
}
@keyframes copyFix {
	from { transform: translateY(-25vh); }
	to { transform: none; }
}

/* 100th ANNIVERSARY 出現 */
.splash .logo.is-standby .hundred {
	opacity: 0;
	transform: scale(30);
}
.splash .logo.is-standby .th path {
	opacity: 0;
	transform: translateX(max(var(--cw) * -16 / var(--aspect), -16px));
}
.splash .logo.is-standby .emblem > *,
.splash .logo.is-standby .kg > *,
.splash .logo.is-standby .anniv > * {
	transform: translateY(100%);
}
.splash .logo.is-anim .hundred {
	transition: opacity 1s, transform 1s cubic-bezier(.2,1,.3,1);
}
.splash .logo.is-anim .th path {
	transition: opacity .6s, transform .6s var(--easeOut);
	transition-delay: .8s;
}
.splash .logo.is-anim .th path:last-child {
	transition-delay: .9s;
}
.splash .logo.is-anim .emblem > *,
.splash .logo.is-anim .kg > *,
.splash .logo.is-anim .anniv > * {
	transition: transform .6s var(--easeOut);
}
.splash .logo.is-anim .emblem > * {
	transition-delay: 1.1s;
}
.splash .logo.is-anim .kg > * {
	transition-delay: 1.2s;
}
.splash .logo.is-anim .anniv > * {
	transition-delay: 1.3s;
}

/* 100th ANNIVERSARY フェードアウト */
.splash .logo.is-hide {
	opacity: 0;
	transform: scale(.9);
}
.splash .logo.is-anim.is-hide {
	transition: opacity .8s;
	animation: logoFix .8s var(--easeInOut);
}
@keyframes logoFix {
	from { transform: none; }
	to { transform: scale(.9); }
}

/* 円だけ出現 */
.splash .symbol.is-standby {
	opacity: 0;
	transform: scale(.6);
}
.splash .symbol.is-anim {
	transition: opacity .6s, transform .6s var(--easeOut);
}

/* シンボルアニメーション */
.splash .symbol:not(.is-fix) .magnolia .petal {
	opacity: 0;
}
.splash .symbol:not(.is-fix) .magnolia .-p1 {
	transform: rotate(53deg) translate(min(var(--cw) * 4 / var(--aspect), 4px), min(var(--cw) * 4 / var(--aspect), 4px));
}
.splash .symbol:not(.is-fix) .magnolia .-p2 {
	transform: rotate(36deg) translateY(min(var(--cw) * 4 / var(--aspect), 4px));
}
.splash .symbol:not(.is-fix) .magnolia .-p3 {
	transform: rotate(7deg) translateY(min(var(--cw) * 4 / var(--aspect), 4px));
}
.splash .symbol:not(.is-fix) .hand svg {
	opacity: 0;
	transform: rotate(-12deg) translateY(min(var(--cw) * 24 / var(--aspect), 24px));
}
.splash .symbol:not(.is-fix) .line {
	stroke-dashoffset: 30;
}
.splash .symbol:not(.is-fix) .text {
	transform: rotate(-180deg);
}
.splash .symbol:not(.is-fix) .text > * {
	opacity: 0;
}
.splash .symbol.is-anim.is-fix .magnolia .petal {
	transition: opacity .6s, transform .8s var(--easeOut);
	transition-delay: .4s;
}
.splash .symbol.is-anim.is-fix .magnolia .-p2 {
	transition-delay: .5s;
}
.splash .symbol.is-anim.is-fix .magnolia .-p3 {
	/* animation: petal3 1.2s both var(--easeOut);
	animation-delay: .6s; */
	color: currentcolor;
	transform: rotate(0deg) translateY(0);
	transition: opacity .7s var(--easeOut), transform .7s var(--easeOut);
	transition-delay: .6s;
}
.splash .symbol.is-anim.is-fix .magnolia .-p3.is-transparent {
	color: white;
	transform: scale(.8);
	transition: color .6s, transform .6s;
	transition-delay: .1s;
}
/* 合掌 */
.splash .symbol.is-anim.is-fix .hand svg {
	transition: opacity .6s, transform .8s var(--easeOut);
	transition-delay: 1.1s;
}
.splash .symbol.is-anim.is-fix .line {
	transition: stroke-dashoffset .6s var(--easeOut);
	transition-delay: 1.3s;
	mask: url(../img/symbol_mask.svg) center / 100% 100% no-repeat;
}
.splash .symbol.is-anim.is-fix .text {
	--start: 1.5s;
	transition: transform 1.3s var(--easeOut);
	transition-delay: var(--start);
}
.splash .symbol.is-anim.is-fix .text > * {
	transition: opacity .4s;
}
.splash .symbol.is-anim.is-fix .text > *:nth-child(13) { transition-delay: calc(var(--start) + 0.1s); }
.splash .symbol.is-anim.is-fix .text > *:nth-child(12) { transition-delay: calc(var(--start) + 0.1s); }
.splash .symbol.is-anim.is-fix .text > *:nth-child(11) { transition-delay: calc(var(--start) + 0.2s); }
.splash .symbol.is-anim.is-fix .text > *:nth-child(10) { transition-delay: calc(var(--start) + 0.2s); }
.splash .symbol.is-anim.is-fix .text > *:nth-child(9)  { transition-delay: calc(var(--start) + 0.2s); }
.splash .symbol.is-anim.is-fix .text > *:nth-child(8)  { transition-delay: calc(var(--start) + 0.3s); }
.splash .symbol.is-anim.is-fix .text > *:nth-child(7)  { transition-delay: calc(var(--start) + 0.3s); }
.splash .symbol.is-anim.is-fix .text > *:nth-child(6)  { transition-delay: calc(var(--start) + 0.4s); }
.splash .symbol.is-anim.is-fix .text > *:nth-child(5)  { transition-delay: calc(var(--start) + 0.4s); }
.splash .symbol.is-anim.is-fix .text > *:nth-child(4)  { transition-delay: calc(var(--start) + 0.5s); }
.splash .symbol.is-anim.is-fix .text > *:nth-child(3)  { transition-delay: calc(var(--start) + 0.55s); }
.splash .symbol.is-anim.is-fix .text > *:nth-child(2)  { transition-delay: calc(var(--start) + 0.6s); }
.splash .symbol.is-anim.is-fix .text > *:nth-child(1)  { transition-delay: calc(var(--start) + 0.7s); }
@keyframes petal3 {
	from { opacity: 0; transform: rotate(7deg) translateY(min(var(--cw) * 4 / var(--aspect), 4px)); }
	50% { opacity: 1; transform: rotate(0deg) translateY(0); color: currentcolor; }
	to { opacity: 1; color: white; transform: scale(.8); }
}

/* 最後、ロゴと差し替える */
.splash:not(.is-fin) .fin,
.splash.is-fin .symbol {
	opacity: 0;
}
.splash .fin.is-anim,
.splash.is-fin .symbol.is-anim.is-fix {
	transition: opacity .2s;
}
.splash.is-fin .symbol.is-anim.is-fix {
	transition-delay: .1s;
}

/* KOMAGOME GAKUEN 100th ANNIVERSARY */
.splash .inline.is-standby {
	opacity: 0;
	transform: translateY(min(var(--cw) * 24 / var(--aspect), 24px));
}
.splash .inline.is-anim {
	transition: opacity 1s, transform 1s var(--easeOut);
	transition-delay: 1s;
}

/* 透かし
.splash .logo { background: url(img/logo.svg) center / cover no-repeat; }
.splash .symbol { background: url(img/symbol.svg) center / cover no-repeat; } */


/**
 * Utility / JavaScript
 * -------------------------------------------------- */
.u-visuallyhidden {
	position: absolute;
	top: 0;
	left: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
	width: 1px;
	height: 1px;
}
.c {
	display: inline-block;
	font-feature-settings: normal;
}
.c.dash {
	position: relative;
	top: -.075em;
}
.c.pnc {
	margin-right: -.4em;
}
.c.nkgr {
	margin-right: -.2em;
	margin-left: -.2em;
}
.c.bo {
	margin-left: -.3em;
}
.c.bc {
	margin-right: -.3em;
}
.c.ex {
	margin-right: -.2em;
	margin-left: -.2em;
}
@keyframes appear {
	from { opacity: 0; transform: scale(.6); }
	20% { opacity: 1; transform: scale(1.2); }
	40% { transform: scale(.9); }
	60% { transform: scale(1.04); }
	80% { transform: scale(.98); }
	to { opacity: 1; transform: none; }
}

.js-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	position: fixed;
	inset: 0;
	background: white;
}
.js-loading .loader {
	--size: 32px;
	width: var(--size);
	height: var(--size);
	border-radius: var(--size);
	fill: none;
	stroke: var(--themecolor);
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1.2s infinite cubic-bezier(.4,0,.3,1), loading .7s infinite linear;
}
.js-loading.is-loaded {
	opacity: 0;
	transition: opacity .8s;
}
@keyframes loader {
	from { stroke-dashoffset: 230; }
	to { stroke-dashoffset: -230; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
body {
	overscroll-behavior: auto;
	color: black;
	font: 400 normal 1em / 2 var(--fontSans);
	font-feature-settings: "palt";
	letter-spacing: .04em;
	background: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
section[id] {
	scroll-margin-top: var(--headerHeight);
}
:root {
	--cw: 1vw;
	--themecolor: #8f1627;
	--accentcolor: #c2986d;
	--linearwhite: linear-gradient(#fffe, #fffe);
	
	--fontSans: "Noto Sans JP", sans-serif;
	--fontSerif: "Noto Serif JP", serif;
	--fontEn: "Jost", sans-serif;
	--fontNum: "La Belle Aurore", cursive;
	
	--easeIn: cubic-bezier(.3,0,.7,0);
	--easeOut: cubic-bezier(.3,1,.7,1);
	--easeInOut: cubic-bezier(.7,0,.3,1);
	--easeBack: cubic-bezier(.3,1.6,.7,1);
	
	--aspect: 12;
	--sidegap: min(var(--cw) * 24 / var(--aspect), 80px);
	--breakout: calc(50% - var(--cw) * 50);
	--headerHeight: clamp(48px, var(--cw) * 80 / var(--aspect), 80px);
	--sectionSpace: min(var(--cw) * 160 / var(--aspect), 160px);
	--maxWidth: calc(100% - var(--sidegap) * 2);
}
@media (min-width: 768px) {
	.u-md { display: none; }
}
@media (max-width: 767.98px) {
	:root {
		--aspect: 4.8;
		--sectionSpace: calc(var(--cw) * 80 / var(--aspect));
	}
	.u-dt { display: none; }
}
*,*::before,*::after{box-sizing:border-box;}
ul,ol{list-style:none;padding:0;}
img,svg,video,iframe{vertical-align:middle;}
:where(img[height],video[height]){height:auto;}
:where(input,button,textarea,select,small){font:inherit;}
:where(body,h1,h2,h3,h4,p,figure,blockquote,dl,dd){margin:0;}
:where(img,picture,video,iframe){display:inline-block;max-width:100%;}
:where(a){color:inherit;text-decoration:inherit;text-decoration-skip-ink:auto;}
:where(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background:none;}
sub{vertical-align:baseline;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}}