@charset 'UTF-8';


/*

    Base

*/

/*  color  */
:root {
	--main-color: #ff5f9b;
	--purple-color: #b69cf7;
	--cyan-color: #6fe0ee;
	--accent-color: #ffff00;
	--text-color: #221a1e;
	--page-color: #fff7fa;
	--outline-color: #ffdfe9;
	--gray-color: #999999;
	--line-color: #000000;
	--gradient: linear-gradient(90deg, #ff5f9b 0%, #b1a2f7 50%, #6fe0ee 100%);
	--round-font: 'Zen Maru Gothic', 'ヒラギノ丸ゴ ProN', 'Hiragino Maru Gothic ProN', sans-serif;
	--display-font: 'WDXL Lubrifont JP N', 'Zen Maru Gothic', sans-serif;
}

/*  box model  */
*, *:before, *:after {
	box-sizing: border-box;
}

/*  webkit  */
body {
	-webkit-text-size-adjust: 100%;
}
a {
	-webkit-tap-highlight-color: rgba(255,255,255,0.4);
}
img {
	-webkit-touch-callout: none;
	max-width: 100%;
}
iframe {
	max-width: 100%;
}

/*  scroll  */
html { scroll-behavior: smooth;}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto;}}
main section[id], footer.global[id] { scroll-margin-top: 9rem;}

/*  font  */
html { font-size: 8px;}
@media screen and (min-width: 480px)  { html { font-size: 9px;}}
@media screen and (min-width: 768px)  { html { font-size: 10px;}}
/*  100vw はスクロールバーを含むため、実際の表示幅で 1400px = 140rem になるようにする  */
@media screen and (min-width: 1024px) and (max-width: 1399px) {
	html { font-size: calc((100vw - var(--scrollbar, 0px)) / 140);}
}
@media screen and (min-width: 1400px) { html { font-size: 10px;}}
body {
	font-family: var(--round-font);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--text-color);
	background-color: var(--page-color);
}
a {
	color: var(--main-color);
	transition: all 0.1s linear;
}
a:hover { opacity: 0.7;}

/*  page  */
div.page {
	position: relative;
	max-width: 140rem;
	margin: 0 auto;
	background-color: var(--page-color);
}
div.page > * {
	position: relative;
	z-index: 1;
}

/*  decoration  */
div.decoration {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
div.decoration span {
	position: absolute;
	top: 0;
	writing-mode: vertical-rl;
	font-family: var(--display-font);
	font-size: 21rem;
	line-height: 1;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px var(--outline-color);
	transform-origin: 50% 50%;
	transform: rotate(180deg);
}
div.decoration span.left  { left: 2.5rem;  animation: decoration-up 150s linear infinite;}
div.decoration span.right { right: 2.5rem; animation: decoration-down 150s linear infinite;}

/*  one repetition of the phrase is 1/8 of the string, so the loop is seamless  */
@keyframes decoration-up {
	from { transform: rotate(180deg) translateY(0);}
	to   { transform: rotate(180deg) translateY(12.5%);}
}
@keyframes decoration-down {
	from { transform: rotate(180deg) translateY(0);}
	to   { transform: rotate(180deg) translateY(-12.5%);}
}
@media screen and (min-width: 1024px) {
	div.decoration { display: block;}
}





/*

    Common modules

*/

/*  reader only  */
.reader {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/*  wrapper  */
div.wrapper {
	max-width: 121rem;
	margin: 0 auto;
	padding: 0 2rem;
}
div.wrapper.narrow {
	max-width: 90rem;
}

/*  section heading  */
h2.section, h3.section {
	font-family: var(--round-font);
	font-weight: 900;
	font-size: 3.4rem;
	line-height: 1.4;
	color: var(--main-color);
	text-align: center;
}
p.section-lead {
	margin: 1.5em 0 0;
	font-size: 1.5rem;
	text-align: center;
}

/*  button  */
a.button {
	display: inline-block;
	padding: 0.35em 1.3em;
	border-radius: 2em;
	background-color: #ffffff;
	color: var(--main-color);
	font-family: var(--round-font);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}
a.button.gradient {
	border-radius: 0;
	padding: 1em 2em;
	background: var(--gradient);
	color: #ffffff;
	font-weight: normal;
	letter-spacing: 0.1em;
}

/*  marker  */
.marker { color: var(--accent-color);}

/*  line break tuned for wide screens only  */
br.wide { display: none;}

/*  entry box  */
div.entry {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.5rem 1rem;
	text-align: center;
	color: #ffffff;
	background-color: var(--main-color);
}
div.entry.document { background-color: var(--purple-color);}
div.entry p { margin: 0;}
div.entry p.label {
	font-family: var(--round-font);
	font-weight: 500;
	font-size: 1.35rem;
	letter-spacing: 0.05em;
}
div.entry p.title {
	font-family: var(--round-font);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.35;
}
div.entry p.action { margin-top: 1.25em;}
div.entry.document a.button { color: var(--purple-color);}

/*  hashtags  */
div.hashtags {
	display: flex;
	overflow: hidden;
	padding: 1.4em 0;
}
div.hashtags ul {
	display: flex;
	flex: none;
	margin: 0;
	padding: 0;
	animation: marquee 40s linear infinite;
}
div.hashtags ul li {
	margin: 0 1.2em;
	list-style: none;
	white-space: nowrap;
	font-family: var(--round-font);
	font-weight: 700;
	font-size: 1.8rem;
	color: var(--purple-color);
}
div.hashtags ul li.pink { color: var(--main-color);}
@keyframes marquee {
	from { transform: translateX(0);}
	to   { transform: translateX(-100%);}
}

/*  instagram band  */
section.snsband {
	display: flex;
	flex-wrap: wrap;
}
section.snsband div.caption {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem;
	box-sizing: border-box;
	text-align: center;
	color: #ffffff;
	background: var(--gradient);
}
section.snsband div.caption p { margin: 0;}
section.snsband div.caption p.label {
	font-size: 1.4rem;
	letter-spacing: 0.1em;
}
section.snsband div.caption p.name {
	font-family: var(--round-font);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.35;
}
section.snsband div.caption p.account {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	font-family: var(--round-font);
	font-weight: 700;
	font-size: 1.8rem;
}
section.snsband div.caption p.account svg { fill: currentColor;}
/*  the link wraps the icon and the label, so it carries the row layout  */
section.snsband div.caption p.account a {
	display: flex;
	align-items: center;
	gap: 0.4em;
	color: inherit;
}
/*
   The photos are laid out as one row of squares that scrolls from right
   to left. The script duplicates the list until it covers the band, so
   the loop has no gap, and only turns the animation on when the photos
   are wider than the band.
*/
section.snsband div.photos {
	flex: 1 1 100%;
	display: flex;
	min-width: 0;
	height: 12rem;
	overflow: hidden;
}
section.snsband div.photos ul {
	display: flex;
	flex: none;
	margin: 0;
	padding: 0;
}
section.snsband div.photos.marquee ul {
	animation: marquee var(--marquee-duration, 60s) linear infinite;
}
section.snsband div.photos li {
	flex: none;
	width: 12rem;
	margin: 0;
	list-style: none;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}

/*
   The Instagram bands are filled from the API, so they stay a fixed
   grid with no animation: 4 x 2 on phones, one row of 7 on wide screens.
*/
section.snsband.instagram div.photos {
	display: block;
	height: auto;
}
section.snsband.instagram div.photos ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
	height: 100%;
}
section.snsband.instagram div.photos li {
	width: auto;
	aspect-ratio: 1 / 1;
}

/*
   Some of the squares open the real Instagram card in a popup, so they are
   buttons. The photo sits on the button itself, not on the list item.
   The KA official band instead links straight out to the post, so its
   squares are anchors (a.post) sharing the same look.
*/
section.snsband.instagram div.photos button.post,
section.snsband.instagram div.photos a.post {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	color: inherit;
	background-color: transparent;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: opacity 0.1s linear;
	-webkit-appearance: none;
	appearance: none;
}
section.snsband.instagram div.photos button.post:hover,
section.snsband.instagram div.photos a.post:hover { opacity: 0.7;}
section.snsband.instagram div.photos button.post:disabled { cursor: default;}
section.snsband.instagram div.photos button.post:disabled:hover { opacity: 1;}
section.snsband.instagram div.photos button.post span.label,
section.snsband.instagram div.photos a.post span.label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}





/*

    Header

*/
header.global {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--page-color);
}
header.global div.container {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	padding: 1rem 2rem;
}

/*  sitetop  */
header.global div.sitetop { flex: 1;}
header.global div.sitetop a {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--text-color);
}
header.global div.sitetop img {
	width: auto;
	height: 4.6rem;
}
header.global div.sitetop span.name {
	font-family: var(--round-font);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 0.02em;
}

/*  menubutton  */
header.global div.menubutton {
	position: relative;
	width: 3.4rem;
	height: 2.6rem;
	cursor: pointer;
	order: 3;
}
header.global div.menubutton span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--main-color);
	transition: all 0.2s ease;
}
header.global div.menubutton span:nth-child(1) { top: 0;}
header.global div.menubutton span:nth-child(2) { top: 50%; margin-top: -1px;}
header.global div.menubutton span:nth-child(3) { bottom: 0;}
header.global div.menubutton.open span:nth-child(1) { top: 50%; margin-top: -1px; transform: rotate(45deg);}
header.global div.menubutton.open span:nth-child(2) { opacity: 0;}
header.global div.menubutton.open span:nth-child(3) { bottom: 50%; margin-bottom: -1px; transform: rotate(-45deg);}

/*  global navigation  */
nav.global {
	position: fixed;
	top: 0;
	right: 0;
	width: 26rem;
	max-width: 80%;
	height: 100%;
	padding-top: 8rem;
	box-sizing: border-box;
	background-color: #ffffff;
	box-shadow: 0 0 2rem rgba(0,0,0,0.15);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
}
nav.global.open { transform: translateX(0);}
nav.global ul {
	margin: 0;
	padding: 0;
}
nav.global ul li {
	margin: 0;
	list-style: none;
	border-bottom: 1px var(--outline-color) solid;
}
nav.global ul li a {
	display: block;
	padding: 1.4em 2em;
	font-family: var(--round-font);
	font-weight: 700;
	color: var(--text-color);
}

/*  shortcut  */
header.global ul.shortcut {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	order: 2;
}
header.global ul.shortcut li {
	margin: 0;
	list-style: none;
}
header.global ul.shortcut li a {
	display: block;
	color: var(--text-color);
}
header.global ul.shortcut li a svg { fill: currentColor; display: block;}





/*

    Hero

*/
section#hero div.mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	padding: 1px 0;
	background-color: var(--line-color);
}
section#hero div.cell {
	overflow: hidden;
}
section#hero div.cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*  the visible part of each photo follows the design comp  */
section#hero div.classroom img { object-position: 100% 50%;}
section#hero div.campus    img { object-position: 42% 50%;}
section#hero div.student   img { object-position: 0 50%;}
section#hero div.makeup    img { object-position: 22% 50%;}
section#hero div.street    img { object-position: 72% 50%;}
section#hero div.dance     img { object-position: 25% 50%;}
section#hero div.beauty    img { object-position: 38% 50%;}
section#hero div.cell p { margin: 0;}

/*  opening  */
section#hero div.opening {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.8rem 1rem;
	text-align: center;
	color: #ffffff;
	background-color: var(--main-color);
	order: 1;
}
section#hero div.opening p.date {
	font-family: var(--round-font);
	font-weight: 700;
	font-size: 1.55rem;
	line-height: 1.85;
	letter-spacing: 0.1em;
}
section#hero div.opening p.name {
	font-family: var(--round-font);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.45;
}
section#hero div.opening p.course {
	font-family: var(--round-font);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.75;
}

/*  catch  */
section#hero div.catch {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3.5rem 2rem;
	text-align: center;
	color: #ffffff;
	background: var(--gradient);
	order: 4;
}
section#hero div.catch p.copy {
	font-family: var(--round-font);
	font-weight: 900;
	font-size: 3.8rem;
	line-height: 1.14;
	letter-spacing: 0.02em;
}
section#hero div.catch p.lead {
	margin-top: 1.4em;
	font-family: var(--round-font);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.87;
}

/*  scheme  */
section#hero div.scheme {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.5rem 2rem;
	text-align: center;
	color: #ffffff;
	background-color: var(--purple-color);
	order: 9;
}
section#hero div.scheme p.copy {
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.02em;
}
section#hero div.scheme p.lead {
	margin-top: 0.2em;
	font-size: 1.5rem;
	line-height: 1.85;
}

/*  entries and photos  */

/*
   On narrow screens the cells stack in a single column, so the text
   blocks (opening / catch / scheme) and the photo pairs are ordered
   alternately instead of grouping all photos at the bottom.
*/
section#hero div.student   { order: 2; aspect-ratio: 1 / 1;}
section#hero div.campus    { order: 3; aspect-ratio: 1 / 1;}
section#hero div.booking   { order: 5;}
section#hero div.document  { order: 6;}
section#hero div.street    { order: 7; aspect-ratio: 1 / 1;}
section#hero div.dance     { order: 8; aspect-ratio: 1 / 1;}
section#hero div.makeup    { order: 10; aspect-ratio: 1 / 1;}
section#hero div.beauty    { order: 11; aspect-ratio: 1 / 1;}
section#hero div.classroom { display: none;}





/*

    Concept

*/
section#concept { padding: 5rem 0;}

/*
   The heading text is wrapped in a span so that the marker does not
   become a flex item of its own and split the line in two.
*/
section#concept h2.ribbon {
	display: flex;
	align-items: center;
	border: 1px var(--line-color) solid;
	min-height: 8rem;
	padding: 1.2rem 2rem;
	font-family: var(--round-font);
	font-weight: 900;
	font-size: 2.1rem;
	letter-spacing: 0.02em;
	color: #ffffff;
	background: var(--gradient);
}
/*  the blocks are pulled up by 1px so that their borders overlap  */
section#concept div.body {
	margin-top: -1px;
	padding: 2rem;
	background-color: #ffffff;
	border: 1px var(--line-color) solid;
}
section#concept div.body p {
	margin: 0;
	line-height: 2;
}
section#concept div.body p + p {
	margin-top: 1.6em;
}
section#concept ul.photos {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1px;
	margin: -1px 0 0;
	padding: 1px;
	background-color: var(--line-color);
}
section#concept ul.photos li {
	margin: 0;
	list-style: none;
	aspect-ratio: 2 / 1;
	overflow: hidden;
}
/*  the narrow cell is half as wide, so a square fills the same height  */
section#concept ul.photos li:not(.wide) { aspect-ratio: 1 / 1;}
section#concept ul.photos li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
section#concept ul.photos li:not(.wide) img { object-position: 28% 50%;}
section#concept div.voice { margin-top: -1px;}
section#concept div.portrait {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 1px var(--line-color) solid;
	border-bottom: none;
}
section#concept div.portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
	display: block;
}
section#concept blockquote {
	margin: 0;
	border: 1px var(--line-color) solid;
	padding: 2.4rem 2.6rem;
	background-color: var(--purple-color);
	color: #ffffff;
	font-style: normal;
}
section#concept blockquote:before { content: none;}
section#concept blockquote p {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.9;
}
section#concept blockquote footer {
	margin-top: 1.5em;
	font-size: 1.4rem;
	text-align: right;
}





/*

    Future

*/
section#future { padding: 5rem 0 0;}

/*
   Each path bundles one route with the two dream cards that belong to
   it, so that on narrow screens the study path and the entertainment
   path stay grouped instead of alternating.
*/
section#future div.paths {
	display: grid;
	gap: 1px;
	padding: 1px;
	margin-top: 4rem;
	background-color: var(--line-color);
}
section#future div.path {
	display: grid;
	gap: 1px;
	background-color: var(--line-color);
}
section#future div.route {
	position: relative;
	display: flex;
	min-height: 40rem;
	overflow: hidden;
}
section#future div.route img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section#future div.route div.text {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 3rem 2.5rem;
	box-sizing: border-box;
}
section#future div.route h3 {
	font-family: var(--round-font);
	font-weight: 900;
	font-size: 2.6rem;
	line-height: 1.22;
}
/*  inline のままにして禁則処理を保つ  */
.thin {
	margin: 0 -0.25em;
}
section#future div.route h3 span.thin { margin: 0 -0.3em;}

/*  丸ゴシックはカッコの字面が広く、次の文字と詰まって見えるため、本文だけ左右に余白を足す  */
span.bracket {
	margin: 0 0.12em;
}
section#future div.route p {
	margin: 2.4em 0 0;
	font-size: 1.4rem;
	line-height: 1.95;
}
section#future div.path.work div.route img { object-position: 23% 50%;}

/*
   The study route carries dark text over a photo whose towers are dark
   at both edges, so a white scrim covers the band the text sits in and
   fades out over the sky below it.
*/
section#future div.path.study div.route:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.72) 52%, rgba(255, 255, 255, 0) 82%);
	pointer-events: none;
}
section#future div.path.study div.text {
	color: var(--text-color);
	text-shadow: 0 0 0.6em #ffffff, 0 0 1.2em rgba(255, 255, 255, 0.9);
}
section#future div.path.work  div.text { color: #ffffff;}
section#future div.path.work  div.route p { margin-top: auto; padding-top: 3em;}

/*  dreams  */
section#future ul.dreams {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin: 0;
	padding: 0;
	background-color: var(--line-color);
}
section#future ul.dreams li {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
	list-style: none;
	min-height: 34rem;
	overflow: hidden;
	background-color: var(--line-color);
}
/*
   The caption text is wrapped in a span so that the inline elements the
   script inserts for punctuation do not become separate flex items.
*/
section#future ul.dreams li p.caption {
	flex: 0 0 11rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 1rem;
	box-sizing: border-box;
	text-align: center;
	font-family: var(--round-font);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.5;
	color: #ffffff;
}
section#future ul.dreams li img {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	object-fit: cover;
	display: block;
}
section#future ul.dreams li.pink   p.caption { background-color: var(--main-color);}
section#future ul.dreams li.purple p.caption { background-color: var(--purple-color);}
section#future ul.dreams li.pink.caption-top      img { object-position: 48% 0;}
section#future ul.dreams li.pink.caption-bottom   img { object-position: 17% 0;}
section#future ul.dreams li.purple.caption-top    img { object-position: 34% 50%;}
section#future ul.dreams li.purple.caption-bottom img { object-position: 38% 0;}





/*

    Curriculum

*/
section#curriculum { padding: 6rem 0;}
section#curriculum div.wrapper.narrow { margin-top: 4rem;}
section#curriculum div.point {
	position: relative;
	margin-bottom: 4rem;
}
section#curriculum div.point p.number {
	margin: 0 0 0.2em;
	font-family: var(--display-font);
	font-size: 4.4rem;
	line-height: 1;
	letter-spacing: 0.02em;
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transform: rotate(-8deg);
	transform-origin: left bottom;
}
section#curriculum div.point div.photo {
	aspect-ratio: 2 / 1;
	overflow: hidden;
}
section#curriculum div.point div.photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
section#curriculum div.point div.text {
	padding: 2rem 2.4rem;
	background: var(--gradient);
	color: #ffffff;
}
section#curriculum div.point h3 {
	font-family: var(--round-font);
	font-weight: 700;
	font-size: 1.9rem;
}
section#curriculum div.point p {
	margin: 0.9em 0 0;
	font-size: 1.4rem;
	line-height: 1.85;
}





/*

    Schedule

*/
section#schedule { padding: 5rem 0 6rem;}
section#schedule h2.headline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6em;
}
section#schedule h2.headline span.en {
	font-family: var(--display-font);
	font-size: 3.6rem;
	letter-spacing: 0.02em;
}
section#schedule h2.headline span.ja {
	font-family: var(--display-font);
	font-size: 1.8rem;
}
section#schedule h2.headline:after {
	content: '';
	flex: 1 1 4rem;
	height: 1px;
	background-color: var(--line-color);
}

/*  case  */
section#schedule div.case { margin-top: 4rem;}
section#schedule div.portrait {
	width: 18rem;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px var(--line-color) solid;
	float: left;
	margin: 0 2rem 1rem 0;
}
section#schedule div.portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
section#schedule div.lead p.number {
	margin: 0;
	font-family: var(--display-font);
	font-size: 2rem;
	letter-spacing: 0.05em;
}
section#schedule div.lead p.number span.person {
	margin-left: 0.9em;
	font-family: var(--round-font);
	font-weight: 700;
	font-size: 0.7em;
	letter-spacing: 0.08em;
}
section#schedule div.lead h3 {
	font-family: var(--display-font);
	font-size: 2.2rem;
	line-height: 1.3;
	letter-spacing: 0.02em;
}
section#schedule div.lead h3 .marker {
	color: inherit;
	background: linear-gradient(transparent 46%, var(--accent-color) 46%, var(--accent-color) 92%, transparent 92%);
}
section#schedule p.notes {
	margin: 1em 0 0;
	font-size: 1.3rem;
	text-align: right;
}

/*  timetable  */

/*
   Cell separators are drawn as the table background showing through
   1px border-spacing gaps. A collapsed 1px border can round away to
   nothing on fractional zoom or high-DPI screens, so the gap is used
   instead to keep the grid always visible.
*/
section#schedule table.timetable {
	clear: both;
	width: 100%;
	table-layout: fixed;
	margin-top: 2rem;
	font-size: 1.3rem;
	text-align: center;
	border-collapse: separate;
	border-spacing: 1px;
	background-color: var(--line-color);
}
section#schedule table.timetable th,
section#schedule table.timetable td {
	padding: 0.9em 0.2em;
	border: none;
	text-align: center;
	vertical-align: middle;
	line-height: 1.35;
}
section#schedule table.timetable th {
	background-color: var(--gray-color);
	color: #ffffff;
	font-weight: normal;
}
section#schedule table.timetable th.day {
	width: 26%;
	letter-spacing: 0.02em;
}
section#schedule table.timetable thead th.day { background-color: var(--page-color);}
section#schedule table.timetable td { background-color: #ffffff; font-weight: bold;}
section#schedule table.timetable td.pink   { background-color: var(--main-color); color: #ffffff;}
section#schedule table.timetable td.purple { background-color: var(--purple-color);}
section#schedule table.timetable td.cyan   { background-color: var(--cyan-color);}

/*  topics  */
section#schedule div.topics {
	position: relative;
	z-index: 0;
	margin-top: 3rem;
}
section#schedule div.topic {
	position: relative;
	overflow: hidden;
	margin-bottom: 3rem;
}
section#schedule div.topic:before {
	content: '';
	position: absolute;
	left: -4rem;
	top: -3rem;
	width: 26rem;
	height: 26rem;
	border-radius: 50%;
	background-color: #ffffff;
	opacity: 0.6;
	z-index: -1;
}
section#schedule div.topic img {
	float: right;
	width: 14rem;
	margin: 0 0 1rem 1.5rem;
}
section#schedule div.topic h4 {
	font-family: var(--display-font);
	font-size: 1.9rem;
	line-height: 1.25;
}
section#schedule div.topic p {
	margin: 1em 0 0;
	font-size: 1.4rem;
	line-height: 1.6;
}

/*  feature band  */
section#schedule div.feature {
	position: relative;
	margin: 5rem 0;
	padding: 2rem;
	background-color: #ffffff;
	border: 1px var(--line-color) solid;
}
section#schedule div.feature:after {
	content: '';
	position: absolute;
	left: 0.8rem;
	top: 0.8rem;
	right: -0.8rem;
	bottom: -0.8rem;
	background: repeating-linear-gradient(-45deg, var(--line-color) 0 1px, transparent 1px 5px);
	z-index: -1;
}
section#schedule div.feature div.photo {
	width: 14rem;
	float: left;
	margin: 0 2rem 1rem 0;
}
section#schedule div.feature div.photo img { display: block; width: 100%;}
section#schedule div.feature h3 {
	font-family: var(--display-font);
	font-size: 2.6rem;
	line-height: 1.25;
}
section#schedule div.feature p {
	margin: 1em 0 0;
	font-size: 1.4rem;
	line-height: 1.7;
}
section#schedule div.feature p.tags { margin-top: 1.5em;}





/*

    Partner

*/
section#partner { padding: 0 0 6rem;}
section#partner hr {
	border-bottom: 1px var(--line-color) solid;
	margin: 0 0 6rem;
}
section#partner ul.logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2rem 4rem;
	margin: 5rem 0 0;
	padding: 0;
}
section#partner ul.logos li {
	margin: 0;
	list-style: none;
}
section#partner ul.logos li img {
	height: 3.6rem;
	width: auto;
	display: block;
}
section#partner p.summary {
	margin: 3rem 0 0;
	font-size: 1.4rem;
	line-height: 1.9;
	text-align: center;
}
section#partner div.history { margin-top: 6rem;}
section#partner div.history h3.section { text-align: left;}
section#partner div.history div.text p {
	margin: 1.5em 0 0;
	line-height: 1.9;
}
section#partner div.history p.action { margin-top: 2em;}
section#partner div.history p.action a.button {
	display: inline-block;
	padding: 1em 2.5em;
	border-radius: 0;
	background: var(--gradient);
	color: #ffffff;
	font-weight: normal;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
}
section#partner ul.photos {
	display: grid;
	gap: 0;
	margin: 3rem 0 0;
	padding: 0;
}
/*  the negative margins let the neighbouring borders sit on each other  */
section#partner ul.photos li {
	margin: 0 -1px -1px 0;
	list-style: none;
	overflow: hidden;
	border: 1px var(--line-color) solid;
}
section#partner ul.photos li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
section#partner ul.photos li.interview { aspect-ratio: 2 / 1;}
section#partner ul.photos li.lesson    { aspect-ratio: 2 / 1;}





/*

    FAQ

*/
section#faq { padding: 6rem 0;}
section#faq dl.questions {
	margin: 4rem 0 0;
	border: 1px var(--line-color) solid;
	border-bottom: none;
	background-color: #ffffff;
}
section#faq dl.questions dt {
	font-weight: normal;
	border-bottom: 1px var(--line-color) solid;
}
section#faq dl.questions dt button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	width: 100%;
	padding: 1.4em 1.6em;
	margin: 0;
	border: none;
	background: none;
	font-family: var(--round-font);
	font-weight: 700;
	font-size: 1.7rem;
	line-height: 1.4;
	color: var(--main-color);
	text-align: left;
	cursor: pointer;
}
section#faq dl.questions dt button:after {
	content: '';
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	background:
		linear-gradient(var(--main-color), var(--main-color)) center / 100% 2px no-repeat,
		linear-gradient(var(--main-color), var(--main-color)) center / 2px 100% no-repeat;
	transition: transform 0.2s ease;
}
section#faq dl.questions dt.open button:after {
	background: linear-gradient(var(--main-color), var(--main-color)) center / 100% 2px no-repeat;
}
section#faq dl.questions dd {
	display: none;
	margin: 0;
	padding: 1.4em 1.6em;
	border-bottom: 1px var(--line-color) solid;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.8;
}
section#faq dl.questions dt.open + dd { display: block;}





/*

    Footer

*/
footer.global { margin-top: 4rem;}
footer.global div.map {
	aspect-ratio: 5 / 3;
}
footer.global div.map iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}
footer.global div.sign {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem;
	text-align: center;
	color: #ffffff;
	background: var(--gradient);
}
footer.global div.sign p { margin: 0;}
/*  kept small enough to stay on one line at 375px  */
footer.global div.sign p.label { font-size: 1.25rem;}
footer.global div.sign p.name {
	font-size: 3rem;
	font-weight: normal;
	letter-spacing: 0.02em;
}
footer.global div.sign p.course {
	font-family: var(--round-font);
	font-weight: 500;
	font-size: 1.6rem;
}
footer.global div.access {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
footer.global div.map    { grid-column: span 2;}
footer.global div.sign   { grid-column: span 2;}
footer.global div.spacer { display: none;}
footer.global div.school {
	grid-column: span 2;
	position: relative;
	padding: 2rem;
	background-color: #ffffff;
}
footer.global div.school dl {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 0.4em 0;
	margin: 0;
	font-size: 1.4rem;
}
footer.global div.school dl dt { font-weight: normal;}
footer.global div.school dl dd { margin: 0;}
footer.global div.school dl dd a { color: inherit;}
footer.global div.school p.sns {
	position: absolute;
	right: 2rem;
	bottom: 2rem;
	margin: 0;
}
footer.global div.school p.sns svg { width: 3rem; height: 3rem;}
footer.global div.school p.sns a { color: var(--text-color); display: block;}
footer.global div.school p.sns svg { fill: currentColor; display: block;}
footer.global p.copyright {
	margin: 2em 0;
	font-size: 1.2rem;
	text-align: center;
}




/*

    Instagram post modal

*/

/*
   The official Instagram embed will not render below 326px and its inside
   cannot be styled, so the card is shown here at its own size instead of
   being squeezed into the band. The widths are written in px on purpose:
   the root font size drops to 8px on phones, so 326px in rem would fall
   short of the embed minimum and break the card.
*/
#postmodal[hidden] { display: none;}
/*  the overlay itself scrolls, so a tall card never clips the close button  */
#postmodal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6rem 1rem 2rem;
	overflow-y: auto;
}
#postmodal div.backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba(34, 26, 30, 0.72);
}
#postmodal div.panel {
	position: relative;
	z-index: 1;
	margin: auto;
	width: min(92vw, 400px);
	min-width: 326px;
	border-radius: 0.4rem;
	background-color: #ffffff;
}
#postmodal button.close {
	position: absolute;
	top: -4.4rem;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.6rem;
	height: 3.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--text-color);
	background-color: #ffffff;
	cursor: pointer;
	transition: opacity 0.1s linear;
	-webkit-appearance: none;
	appearance: none;
}
#postmodal button.close:hover { opacity: 0.7;}
#postmodal div.embed { min-height: 12rem;}

/*  the embed replaces this, so it only shows while Instagram is loading  */
#postmodal div.embed p.loading {
	margin: 0;
	padding: 4rem 2rem;
	color: var(--gray-color);
	font-size: 1.4rem;
	text-align: center;
}
#postmodal div.embed p.loading a { color: var(--main-color);}

/*  Instagram writes its own margin and shadow, and sizes the card to the box  */
#postmodal div.embed blockquote.instagram-media,
#postmodal div.embed iframe.instagram-media {
	width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}
body.modalopen { overflow: hidden;}





/*

    Tablet

*/
@media screen and (min-width: 768px) {

	/*  common  */
	h2.section, h3.section { font-size: 4.4rem;}
	div.hashtags ul li { font-size: 2rem;}

	/*  concept  */
	section#concept h2.ribbon { font-size: 2.4rem;}

	/*  schedule  */
	section#schedule div.lead h3 { font-size: 2.6rem;}

	/*  footer  */
	footer.global div.sign p.label { font-size: 1.4rem;}

	/*  photo band  */
	section.snsband div.photos { height: 16.8rem;}
	section.snsband div.photos li { width: 16.8rem;}

}





/*

    PC (design canvas 1400px)

*/
@media screen and (min-width: 1024px) {

	/*  common  */
	br.wide { display: inline;}

	/*  photo band: the caption moves beside the photos  */
	section.snsband { flex-wrap: nowrap; height: 16.8rem;}
	section.snsband div.caption { flex: 0 0 39.3rem;}
	section.snsband div.caption p.name { font-size: 2.25rem;}
	section.snsband div.photos { flex: 1 1 auto; height: auto;}
	section.snsband.instagram div.photos ul { grid-template-columns: repeat(7, 1fr);}
	section.snsband.instagram div.photos li { aspect-ratio: auto;}
	section.snsband.instagram div.photos li:nth-child(8) { display: none;}

	/*  header  */
	header.global div.container {
		gap: 3rem;
		padding: 1.6rem 4.6rem 1.6rem 4rem;
	}
	header.global div.sitetop img { height: 5.4rem;}
	header.global div.sitetop span.name { font-size: 1.5rem;}
	header.global div.menubutton { display: none;}
	nav.global {
		position: static;
		width: auto;
		max-width: none;
		height: auto;
		padding-top: 0;
		background: none;
		box-shadow: none;
		transform: none;
		overflow: visible;
	}
	nav.global ul { display: flex; gap: 3.1rem;}
	nav.global ul li { border-bottom: none;}
	nav.global ul li a {
		padding: 0;
		font-size: 1.5rem;
		white-space: nowrap;
	}

	/*  hero  */
	/*  画面幅いっぱいに敷くブロック  */
	section#hero,
	div.hashtags,
	section.snsband,
	section#future div.paths {
		width: calc(100vw - var(--scrollbar, 0px));
		margin-left: calc(50% - 50vw + var(--scrollbar, 0px) / 2);
	}
	section#hero div.mosaic {
		width: 100%;
		grid-template-columns: 92fr 300fr 452fr 148fr 152fr 154fr 102fr;
		grid-template-rows: repeat(3, 14.9rem);
	}
	section#hero div.cell { aspect-ratio: auto !important; order: 0 !important;}
	section#hero div.classroom { display: block; grid-column: 1; grid-row: 1 / 3;}
	section#hero div.campus    { grid-column: 1; grid-row: 3;}
	section#hero div.opening   { grid-column: 2; grid-row: 1;}
	section#hero div.student   { grid-column: 2; grid-row: 2 / 4;}
	section#hero div.catch     { grid-column: 3; grid-row: 1 / 3;}
	section#hero div.scheme    { grid-column: 3; grid-row: 3;}
	section#hero div.booking   { grid-column: 4; grid-row: 1;}
	section#hero div.makeup    { grid-column: 5; grid-row: 1;}
	section#hero div.street    { grid-column: 4 / 6; grid-row: 2 / 4;}
	section#hero div.dance     { grid-column: 6 / 8; grid-row: 1 / 3;}
	section#hero div.document  { grid-column: 6; grid-row: 3;}
	section#hero div.beauty    { grid-column: 7; grid-row: 3;}
	section#hero div.opening { padding: 1.2rem;}
	section#hero div.opening p.date { font-size: 1.55rem;}
	section#hero div.opening p.name { font-size: 2rem;}
	section#hero div.catch { padding: 2rem;}
	section#hero div.catch p.copy { font-size: 4.45rem;}
	section#hero div.catch p.lead { margin-top: 1.5em;}
	section#hero div.scheme p.copy { font-size: 3rem;}

	/*  concept  */
	section#concept { padding: 7rem 0 3rem;}
	section#concept div.wrapper {
		max-width: 120.1rem;
		display: grid;
		grid-template-columns: 1fr 45rem;
		align-items: start;
	}
	section#concept div.voice { margin-left: -1px;}
	section#concept h2.ribbon {
		min-height: 15.2rem;
		padding: 2rem 4rem;
		font-size: 3.4rem;
	}
	section#concept div.body {
		margin: -1px 0 0 15rem;
		padding: 4.4rem 4.3rem;
	}
	section#concept ul.photos {
		width: 45.1rem;
		grid-template-columns: 30rem 1fr;
		margin-top: -1px;
	}
	/*
	   Both cells are sized by height here. The narrow one needs the square
	   ratio cleared at the same specificity as the rule that sets it, or it
	   stays as wide as it is tall and covers the frame line on its right.
	*/
	section#concept ul.photos li { aspect-ratio: auto; height: 14.9rem;}
	section#concept ul.photos li:not(.wide) { aspect-ratio: auto;}
	section#concept div.voice { margin-top: 0;}
	section#concept div.portrait {
		width: 30rem;
		height: 30.1rem;
		aspect-ratio: auto;
	}
	section#concept blockquote { padding: 2.6rem 3rem;}

	/*  future  */
	section#future { padding: 6rem 0 0;}
	section#future div.paths { grid-template-columns: 1fr 1fr;}
	section#future div.route { min-height: 69rem;}
	section#future div.route div.text { padding: 4.3rem 4.5rem;}
	section#future div.route h3 { font-size: 4.6rem;}
	section#future div.route p { font-size: 1.5rem;}
	section#future div.path.study div.text { text-align: right;}

	section#future ul.dreams li { min-height: 51.8rem;}
	section#future ul.dreams li p.caption { flex: 0 0 17.3rem; font-size: 1.8rem;}

	/*  curriculum  */
	section#curriculum { padding: 9rem 0;}
	section#curriculum div.wrapper.narrow { margin-top: 6rem;}
	section#curriculum div.point {
		min-height: 30rem;
		margin-bottom: 3.7rem;
	}
	section#curriculum div.point p.number {
		position: absolute;
		top: 6rem;
		margin: 0;
		font-size: 8.5rem;
	}
	section#curriculum div.point.right p.number { left: 0;}
	/*  回転後の見た目の下端が右型 (.right) より下にずれるため、パネルと重ならないよう引き上げる  */
	section#curriculum div.point.left  p.number { right: 0; top: 1rem; transform-origin: right bottom;}
	section#curriculum div.point div.photo {
		width: 60rem;
		height: 30rem;
		aspect-ratio: auto;
	}
	section#curriculum div.point.right div.photo { margin-left: auto;}
	section#curriculum div.point div.text {
		position: absolute;
		bottom: 0;
		width: 60rem;
		padding: 2.4rem 3.6rem;
	}
	section#curriculum div.point.right div.text { left: 0;}
	section#curriculum div.point.left  div.text { right: 0;}
	section#curriculum div.point h3 { font-size: 2rem;}
	section#curriculum div.point p { font-size: 1.42rem; line-height: 1.9;}

	/*  schedule  */
	section#schedule { padding: 8rem 0 4rem;}
	section#schedule h2.headline span.en { font-size: 5.8rem;}
	section#schedule h2.headline span.ja { font-size: 2.4rem;}
	section#schedule div.case {
		display: grid;
		grid-template-columns: 75.5rem 35.5rem;
		gap: 10rem;
		margin-top: 6rem;
	}
	section#schedule div.profile { position: relative;}
	section#schedule div.portrait {
		position: absolute;
		left: 1px;
		top: 0;
		float: none;
		width: 30rem;
		height: 30.1rem;
		margin: 0;
		aspect-ratio: auto;
	}
	section#schedule div.lead { padding-left: 35rem; min-height: 19.5rem;}
	/*  カンプでは CASE #02・#03 のブロックが 5px 右にずれている  */
	section#schedule div.case.long div.profile { margin-left: 0.5rem;}
	section#schedule div.case.long div.lead { position: relative; z-index: 2; margin-right: -45rem;}
	section#schedule div.case.long div.topics { padding-top: 27.5rem;}
	section#schedule div.lead p.number { font-size: 2.8rem;}
	section#schedule div.lead h3 { white-space: nowrap; font-size: 5.8rem;}
	section#schedule table.timetable {
		width: 60rem;
		margin: 3rem 0 0 15rem;
		font-size: 1.5rem;
	}
	section#schedule table.timetable thead th { height: 7.4rem;}
	section#schedule table.timetable tbody th,
	section#schedule table.timetable tbody td { height: 7.4rem;}
	section#schedule table.timetable th.day { width: 25%;}
	section#schedule div.topics { margin-top: 0; padding-top: 4.5rem;}
	section#schedule div.topic { margin-bottom: 5rem;}
	section#schedule div.topic img { width: 15rem;}
	section#schedule div.topic h4 { font-size: 3rem;}
	/*  the comp sets this text smaller so it clears the floated photo  */
	section#schedule div.topic p { font-size: 1.2rem;}
	section#schedule div.feature {
		display: grid;
		grid-template-columns: 18rem 30rem 1fr;
		align-items: center;
		gap: 0 2rem;
		margin: 4rem 0 8rem;
		padding: 0;
	}
	section#schedule div.feature div.photo {
		width: auto;
		float: none;
		margin: 0;
		align-self: stretch;
		overflow: hidden;
	}
	section#schedule div.feature div.photo img { height: 100%; object-fit: cover;}
	section#schedule div.feature h3 { font-size: 4.7rem; text-align: center;}
	section#schedule div.feature div.text { padding: 3rem 3rem 3rem 0;}
	section#schedule div.feature p { font-size: 1.5rem;}
	section#schedule div.feature p:first-child { margin-top: 0;}

	/*  partner  */
	section#partner { padding: 0 0 9rem;}
	section#partner ul.logos li img { height: 5.2rem;}
	section#partner p.summary { font-size: 1.5rem;}
	section#partner div.history {
		display: grid;
		grid-template-columns: 1fr 45rem;
		gap: 5rem;
		margin-top: 11rem;
		align-items: start;
	}
	section#partner div.history div.text { padding-left: 15rem;}
	section#partner div.history h3.section { white-space: nowrap; margin-right: -20rem;}
	section#partner div.history div.text p { font-size: 1.6rem;}
	section#partner ul.photos {
		position: relative;
		display: block;
		height: 45rem;
		margin: 0;
	}
	section#partner ul.photos li { position: absolute; margin: 0; aspect-ratio: auto;}
	section#partner ul.photos li.interview { right: 0; top: 0; width: 30rem; height: 15rem;}
	section#partner ul.photos li.lesson    { left: 0; top: 14.9rem; width: 30rem; height: 30rem;}
	/*  the square frame crops a wide photo, so it is anchored on the teacher  */
	section#partner ul.photos li.lesson img { object-position: 75% 50%;}

	/*  faq  */
	section#faq { padding: 9rem 0;}
	section#faq dl.questions dt button { padding: 1.15em 1.9em; font-size: 2rem;}
	section#faq dl.questions dd { padding: 1.4em 2em; font-size: 1.5rem;}

	/*  footer  */
	footer.global { margin-top: 6rem;}
	footer.global div.access {
		display: grid;
		grid-template-columns: 55rem 15rem 15rem 40rem 15rem;
		grid-template-rows: 15rem 15rem;
		gap: 0;
		padding: 0;
		background: none;
	}
	footer.global div.access > * {
		border: 1px var(--line-color) solid;
		margin: 0 -1px -1px 0;
	}
	footer.global div.access > div.school,
	footer.global div.access > div.spacer { margin-right: 0;}
	footer.global div.access > div.map,
	footer.global div.access > div.entry,
	footer.global div.access > div.school { margin-bottom: 0;}
	footer.global div.map    { grid-column: 1; grid-row: 1 / 3;}
	footer.global div.sign   { grid-column: 2 / 5; grid-row: 1;}
	footer.global div.spacer { grid-column: 5; grid-row: 1; display: block; border: none; margin: 0;}
	footer.global div.entry.booking  { grid-column: 2; grid-row: 2;}
	footer.global div.entry.document { grid-column: 3; grid-row: 2;}
	footer.global div.school { grid-column: 4 / 6; grid-row: 2;}
	footer.global div.map { aspect-ratio: auto; height: auto;}
	footer.global div.sign { padding: 1.5rem;}
	footer.global div.sign p.name { font-size: 3.6rem;}
	footer.global div.school { padding: 2rem 2.6rem;}
	footer.global div.school p.sns { right: 2.9rem; bottom: 3.3rem;}
	footer.global div.entry p.action { margin-top: 0.6em;}
	footer.global div.school dl { grid-template-columns: 6.2rem 1fr; gap: 0.4em 0; font-size: 1.3rem;}

}





/*

    Wide

*/
@media screen and (min-width: 1024px) {

	div.wrapper { padding: 0;}

}