@charset "utf-8";

/**
 * 駒込学園 100 周年記念ティザーサイト
 * -------------------------------------------------- */
:where(.kg-contents) {
	container: wrapper / inline-size;
	font-size: clamp(.625rem, 12cqi / 3.75, 1rem);
	background: linear-gradient(to bottom, #80244e22, #59254f22, #b3244e22);
}
:where(.kg-contents).is-fixed {
	position: fixed;
	inset: 0;
}

/* :::::: Splash :::::: */
.kg-splash {
	display: grid;
	place-items: center;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100svh;
	background: white;
}
.kg-splash > * {
	grid-area: 1 / 1;
}
.kg-splash .lead {
	z-index: 1;
	color: var(--themecolor2);
	font: 700 normal 2rem / 1.4 var(--fontSerif);
	white-space: nowrap;
	text-align: center;
	font-size: min(22cqi / 3.75, 2rem);
}
@media (min-width: 768px) {
	.kg-splash .lead br {
		display: none;
	}
}
.kg-splash .lead .c {
	display: inline-block;
}
.kg-splash .roughline {
	z-index: 1;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: white;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 121 121;
	stroke-width: 0;
	stroke-dashoffset: 121;
}
.kg-splash .sphere {
	display: inherit;
	place-content: center;
	position: absolute;
	inset: 0;
	mix-blend-mode: darken;
}
.kg-splash .sphere > * {
	width: 100%;
	height: 100%;
}
.kg-splash .canvas {
	opacity: .1;
}
/* リード文を一文字ずつ表示したのちフェードアウト */
.kg-splash.is-standby .roughline {
	stroke-width: 2.4;
	stroke-dashoffset: 0;
}
.kg-splash .lead.is-standby .c {
	opacity: 0;
	transform: scale3d(.6,.6,1);
}
.kg-splash .lead.is-hide {
	opacity: 0;
	transform: scale(1.2);
	filter: blur(4px);
}
.kg-splash.is-anim .roughline {
	transition: stroke-width 1.1s, stroke-dashoffset 1.4s;
	transition-timing-function: cubic-bezier(0.12, 0, 0.39, 0), cubic-bezier(0.61, 1, 0.88, 1);
	transition-delay: .2s;
}
.kg-splash .lead.is-anim .c {
	--delay: .1s;
	animation: charaApp .6s both;
	animation-delay: var(--delay);
}
.kg-splash .lead.is-anim {
	transition: opacity .6s, transform .6s var(--easeIn), filter .6s;
}
@keyframes charaApp {
	from { opacity: 0; transform: scale3d(.6,.6,1); }
	20% { opacity: 1; transform: scale3d(1.2,1.2,1); }
	50% { transform: scale3d(.92,.92,1); }
	80% { transform: scale3d(1.02,1.02,1); }
	to { opacity: 1; transform: none; }
}

/* :::::: KeyVisual :::::: */
.kg-keyvisual {
	display: grid;
	place-items: center;
	row-gap: var(--sidegap);
	position: relative;
	height: 100svh;
	margin-top: 100svh;
	padding: var(--sidegap);
	padding-top: var(--headerHeight);
}
.kg-keyvisual > * {
	grid-area: 1 / 1;
}
.kg-keyvisual .logo {
	display: grid;
	row-gap: 1em;
	font: 700 normal 1rem / 1.4 var(--fontSans);
	font-size: clamp(.625rem, 10cqi / 3.75, .875rem);
}
.kg-keyvisual .logo img {
	width: 100%;
}
.kg-keyvisual .logo .catchcopy {
	letter-spacing: .4em;
	white-space: nowrap;
	text-indent: .4em;
}
.kg-keyvisual .image {
	align-self: start;
	z-index: -1;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 2em;
	background: #f4eaee;
}
.kg-keyvisual .image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, #80244e33, #59254f33, #b3244e33);
}
.kg-keyvisual .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .5;
}

/* :::::: Canvas :::::: */
.kg-canvas {
	pointer-events: none;
	position: absolute;
	inset: 100svh 0 var(--sidegap);
}
.kg-canvas.is-standby {
	visibility: hidden;
	opacity: 0;
}
.kg-canvas.is-anim {
	transition: opacity 1s;
}
.kg-canvas .icon {
	--scale: 2;
	--color: var(--themecolor3);
	display: grid;
	position: absolute;
	color: var(--color);
	font: normal 1rem / 1 var(--fontIcon);
	font-size: calc(var(--scale) * 1rem);
}
.kg-canvas .icon .i {
	grid-area: 1 / 1;
	font-style: inherit;
}
.kg-canvas .icon .i:not(.is-anim) {
	opacity: 0;
	transform: scale(.6);
}
.kg-canvas .icon .i.is-anim {
	animation: popn .6s;
}
.kg-canvas .icon .i.is-hide {
	animation: hidden .2s;
}
@keyframes popn {
	from { opacity: 0; transform: scale3d(.6,.6,1); }
	40% { opacity: 1; transform: scale3d(1.2,1.2,1); }
	80% { opacity: 1; transform: scale3d(.96,.96,1); }
	to { opacity: 1; transform: scale3d(1.001,1.001,1); }
}
@keyframes hidden {
	from { opacity: 1; transform: scale3d(1.001,1.001,1); }
	to { opacity: 0; transform: scale3d(.6,.6,1); }
}


/**
 * Section
 * ---------------------------------------- */
.kg-main {
	padding-bottom: 40px;
}
.kg-section {
	position: relative;
	width: var(--maxWidth);
	max-width: 960px;
	margin: var(--sectionSpace) auto;
}

/* :::::: CountDown :::::: */
.kg-section.countdown .lead {
	color: var(--themecolor);
	font: 700 normal 2rem / 1.4 var(--fontSerif);
	font-size: min(22cqi / 3.75, 2rem);
	text-align: center;
}
.kg-section.countdown .lead .c {
	display: inline-block;
}
.kg-section.countdown .lead.js-inview .c {
	opacity: 0;
	transform: translateY(.5em);
}
.kg-section.countdown .lead.is-anim .c {
	--delay: .1s;
	transition: opacity .6s, transform .6s var(--easeOut);
	transition-delay: var(--delay);
}
.kg-section.countdown .container {
	margin-top: 2em;
	padding: 2.4em;
	border-radius: 2rem;
	color: white;
	font-size: min(12cqi / 3.75, 1.2rem);
	text-align: center;
	background: var(--themecolor);
}
@media (min-width: 768px) {
	.kg-section.countdown .lead br {
		display: none;
	}
}
.kg-section.countdown .label {
	color: inherit;
}
.kg-section.countdown .kg-countdown {
	margin-top: .5em;
	font-weight: 700;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}
.kg-section.countdown .kg-countdown span {
	position: relative;
	top: .05em;
	font: 400 2.4em / 1 var(--fontEn);
}

/* :::::: Message :::::: */
.kg-section.message {
	padding: var(--sidegap);
}
.kg-section.message::before {
	content: "";
	z-index: -1;
	position: absolute;
	inset: 0;
	background: #fffc;
	backdrop-filter: blur(4px);
}
.kg-section.message.-l::before {
	margin-left: var(--breakout);
	border-radius: 0 2rem 2rem 0;
}
.kg-section.message.-r::before {
	margin-right: var(--breakout);
	border-radius: 2rem 0 0 2rem;
}
.kg-section.message .subject {
	margin-bottom: 1em;
}
.kg-section.message .photo {
	max-width: 300px;
}
.kg-section.message .photo img {
	border-radius: 2rem;
}
.kg-section.message .photo .caption {
	margin-top: .5em;
	line-height: 1.4;
	font-family: var(--fontSerif);
	text-align: center;
}
.kg-section.message .photo img {
	width: 100%;
	max-width: none;
}
@media (min-width: 768px) {
	.kg-section.message {
		padding: calc(var(--sidegap) * 2);
	}
	.kg-section.message .photo {
		margin-bottom: 1em;
	}
	.kg-section.message.-l .photo {
		float: left;
		margin-right: var(--sidegap);
	}
	.kg-section.message.-r .photo {
		float: right;
		margin-left: var(--sidegap);
	}
	.kg-section.message .photo + .paragraph {
		margin-top: -.4em;
	}
}
@media (max-width: 767.98px) {
	.kg-section.message .photo {
		margin-inline: auto;
	}
	.kg-section.message .photo + .paragraph {
		margin-top: 2em;
	}
}

/* :::::: 100周年寄付のお願い :::::: */
.kg-section.cta .button {
	height: 4em;
	font-size: clamp(.75rem, 20cqi / 3.75, 1.5rem);
	letter-spacing: .1em;
	text-indent: .1em;
}


/**
 * Header / Footer
 * ---------------------------------------- */
.kg-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 1;
	position: absolute;
	inset: 0 0 auto;
	width: var(--maxWidth);
	height: var(--headerHeight);
	margin-inline: auto;
}
.kg-header.is-standby {
	pointer-events: none;
	opacity: 0;
	transform: translateY(-25%);
}
.kg-header.is-anim {
	transition: opacity 1.2s, transform 1.2s var(--easeOut);
}
.kg-header .name .symbol {
	color: var(--themecolor);
}
.kg-header .cta {
	color: var(--themecolor);
	font-weight: 700;
	letter-spacing: .1em;
}
.kg-footer {
	width: var(--maxWidth);
	max-width: 960px;
	margin: 40px auto 0;
	padding-block: var(--sidegap);
	color: white;
	border-image: linear-gradient(var(--themecolor), var(--themecolor)) 0 fill / 0 / 0 50vw;
}
.kg-footer .address {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
	max-width: 18rem;
}
.kg-footer .address dt + dd {
	margin-top: .5em;
}
.kg-footer .address dd {
	line-height: 1.5;
}
.kg-footer .copyright {
	margin-top: 2em;
	font-size: clamp(.625rem, 10cqi / 3.75, .75rem);
	text-align: center;
}
@media (min-width: 768px) {
	.kg-header .cta {
		letter-spacing: .25em;
	}
	.kg-footer {
		display: flex;
		align-items: end;
		justify-content: space-between;
	}
}


/**
 * Component
 * ---------------------------------------- */
:where(.kg-contents) .name {
	display: grid;
	align-items: center;
	column-gap: .5em;
	width: fit-content;
	line-height: 1.2;
	font-weight: 700;
}
:where(.kg-contents) .name .symbol {
	grid-area: 1 / 1 / 3 / 2;
	width: 3em;
	height: 3em;
}
:where(.kg-contents) .name b,
:where(.kg-contents) .name strong {
	grid-column: 2;
}
:where(.kg-contents) .label {
	color: var(--themecolor3);
	font-size: inherit;
	font-family: var(--fontEn);
}
:where(.kg-contents) .subject {
	color: var(--themecolor2);
	font: 700 normal 2rem / 1.4 var(--fontSerif);
	font-size: clamp(1.25rem, 22cqi / 3.75, 2rem);
}
:where(.kg-contents) .paragraph {
	font-size: clamp(.75rem, 14cqi / 3.75, 1rem);
	line-break: strict;
	overflow-wrap: break-word;
	hyphens: auto;
	text-align: justify;
	text-indent: 1em;
}
:where(.kg-contents) .paragraph + .paragraph {
	margin-top: 1em;
}
:where(.kg-contents) .link {
	padding-bottom: .25em;
	background: linear-gradient(currentcolor, currentcolor) left bottom / 100% 1px no-repeat;
}
:where(.kg-contents) .link .arr {
	position: relative;
	top: -.1em;
	margin-left: .25em;
	vertical-align: middle;
}
:where(.kg-contents) .arr {
	overflow: visible;
	width: .8em;
	height: auto;
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@media (hover) {
	:where(.kg-contents) .link {
		transition: background-size .4s cubic-bezier(.3,1,.7,1);
	}
	:where(.kg-contents) .link:hover {
		background-position: right bottom;
		background-size: 0 1px;
		transition-duration: .2s;
	}
}
:where(.kg-contents) .button {
	display: grid;
	place-items: center;
	position: relative;
	width: 100%;
	height: 3em;
	margin-inline: auto;
	padding-inline: 2em 3em;
	border: 2px solid var(--themecolor);
	border-radius: 80px;
	color: var(--themecolor);
	font: 700 1.5rem / 1.4 var(--fontSerif);
	background: white;
}
:where(.kg-contents) .button .arr {
	position: absolute;
	top: 50% - .4em;
	right: 2em;
}
@media (hover) {
	:where(.kg-contents) .button {
		transition: color .4s, background .4s;
	}
	:where(.kg-contents) .button:hover {
		color: white;
		background: var(--themecolor);
		transition-duration: .1s;
	}
}
@media (max-width: 767.98px) {
	:where(.kg-contents) .button {
		padding-inline: 1em 2em;
	}
	:where(.kg-contents) .button .arr {
		right: 1em;
	}
}


/**
 * Utility / JavaScript
 * -------------------------------------------------- */
.u-visuallyhidden {
	position: absolute;
	top: 0;
	left: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
	width: 1px;
	height: 1px;
}
.js-charaSeparation {
	font-feature-settings: normal;
}
.js-charaSeparation .pnc {
	margin-inline-end: -.4em;
}
.js-charaSeparation .nkgr {
	margin-inline: -.2em;
}
.js-charaSeparation .bo {
	margin-inline-start: -.3em;
}
.js-charaSeparation .bc {
	margin-inline-end: -.3em;
}
.kg-loading {
	display: grid;
	place-items: center;
	position: fixed;
	inset: 0;
	background: white;
}
.kg-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;
}
.kg-loading.is-loaded {
	opacity: 0;
	transition: opacity .4s;
}
@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 / 1.8 var(--fontSans);
	font-feature-settings: "palt";
	background: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
:root {
	--sidegap: min(24cqi / 3.75, 48px);
	--sectionSpace: min(64cqi / 3.75, 120px);
	--themecolor: #80244e;
	--themecolor2: #59254f;
	--themecolor3: #b3244e;
	--fontSans: "Noto Sans JP", sans-serif;
	--fontSerif: "Shippori Mincho", serif;
	--fontEn: "Gravitas One", cursive;
	--fontIcon: "Yarndings 12", system-ui;
	--easeIn: cubic-bezier(.3,0,.7,0);
	--easeOut: cubic-bezier(.3,1,.7,1);
	--easeInOut: cubic-bezier(.7,0,.3,1);
	--headerHeight: 80px;
	--maxWidth: calc(100% - var(--sidegap) * 2);
	--breakout: calc(50% - 50cqi);
}
*,*::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;}}