@charset "utf-8";

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

/**
 * Section
 * ---------------------------------------- */
.kg-main {
	min-height: 100svh;
	padding-bottom: 40px;
}

/* :::::: 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);
}


/**
 * 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: #901627;
	--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;}}