@charset "utf-8";

/*メインビジュアル用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("mainimg.css?v=24");


/*CSSカスタムプロパティ（サイト全体の色や余白を一括管理）
---------------------------------------------------------------------------*/
:root {
	/*さくら色（パステル）*/
	--sakura: #f6c6d1;
	--sakura-light: #fdf2f5;
	--sakura-deep: #d9798f;		/*小さな装飾・アクセント用*/
	--sakura-text: #5b3540;		/*さくら色ボタンの文字色*/

	/*グリーン（やわらかめ）*/
	--green: #9bd3b4;
	--green-light: #f0f8f3;
	--green-deep: #4f9b74;		/*見出しのアクセントなど*/
	--green-text: #2c5e45;		/*グリーンボタンの文字色*/

	--text: #4a4a4a;
	--text-light: #7a7a7a;
	--line: #ece6e8;
	--white: #fff;

	--header-h: 60px;
	--gutter: 20px;		/*左右の余白（スマホ）*/
	--maxw: 1080px;
	--radius: 16px;

	--font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--font-round: "Zen Maru Gothic", "Noto Sans JP", "Hiragino Maru Gothic ProN", sans-serif;
}

@media (min-width: 900px) {
	:root {
		--header-h: 76px;
		--gutter: 40px;
	}
}


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

html {
	scroll-padding-top: var(--header-h);	/*ページ内リンクで見出しがヘッダーに隠れないように*/
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-base);
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: 0.04em;
	color: var(--text);
	background: var(--white);
	overflow-x: hidden;
}
@media (min-width: 900px) {
	body {font-size: 16px;}
}

body.menu-open {overflow: hidden;}

img {max-width: 100%;height: auto;vertical-align: middle;}
figure {margin: 0;}
a {color: var(--green-deep);transition: opacity 0.3s, background-color 0.3s, color 0.3s;}
a:hover {opacity: 0.8;}
strong {font-weight: 700;background: linear-gradient(transparent 65%, var(--sakura-light) 65%);}

/*スマホだけ／PCだけ表示する改行など*/
.sp {display: inline;}
@media (min-width: 900px) {.sp {display: none;}}

.center {text-align: center;}

/*本文へ移動（キーボード操作用）*/
.skip {
	position: absolute;left: -9999px;top: 0;z-index: 1000;
	background: var(--white);padding: 8px 16px;
}
.skip:focus {left: 8px;top: 8px;}


/*ボタン
---------------------------------------------------------------------------*/
.btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	line-height: 1.5;
	padding: 0.7em 1.4em;
	border-radius: 999px;
}
.btn:hover {opacity: 1;filter: brightness(1.03);transform: translateY(-1px);}
.btn-sakura {background: var(--sakura);color: var(--sakura-text);}
.btn-green {background: var(--green);color: var(--green-text);}
.btn-line {background: #06c755;color: #fff;}	/*LINEのブランドカラー*/
.btn-lg {width: 100%;max-width: 460px;padding: 1em 1.5em;font-size: 1.05em;border-radius: var(--radius);}
.btn-sub {display: block;font-size: 0.75em;font-weight: 500;opacity: 0.85;margin-top: 0.2em;}


/*ヘッダー
---------------------------------------------------------------------------*/
#header {
	position: fixed;
	z-index: 100;
	top: 0;left: 0;right: 0;
	height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--gutter);
	background: rgba(255,255,255,0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}

/*ロゴ（ページの大見出しh1を兼ねる。見た目はロゴのまま）*/
.site-title {margin: 0;font-size: inherit;font-weight: inherit;line-height: inherit;}
.logo {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	text-decoration: none;
	color: var(--text);
	font-family: var(--font-round);
}
.logo-sub {font-size: 11px;color: var(--text-light);}
.logo-main {font-size: 15px;font-weight: 700;white-space: nowrap;}
.logo-sub {white-space: nowrap;}
.logo-main::before {
	content: "";
	display: inline-block;
	width: 0.7em;height: 0.7em;
	margin-right: 0.35em;
	border-radius: 0 50% 0 50%;	/*花びら風*/
	background: var(--sakura);
}

/*ヘッダー右側（SNS・申し込みボタン・メニューボタン）*/
.header-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

/*SNSロゴ（ヘッダー・フッター共通）*/
.sns {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}
.sns a {
	display: flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--text);
}
.sns-instagram img {width: 24px;height: 24px;}
.sns-note img {width: auto;height: 15px;}
#header .sns-note img {width: auto;height: 18px;}	/*ヘッダーは「n」のアイコン*/
#header .sns a {min-height: 44px;padding: 0 2px;}	/*指で押しやすい高さ*/
.header-right {flex-shrink: 0;}

/*とても幅の狭いスマホ向けに少し詰める*/
@media (max-width: 359px) {
	.logo-main {font-size: 13px;}
	.logo-sub {font-size: 10px;}
	.header-right, #header .sns {gap: 6px;}
	.sns-note img {height: 13px;}
	#header .sns-note img {height: 16px;}
}

/*ヘッダーの「入学をご希望の方へ」（PCのみ。控えめな枠線ボタン）*/
.header-adm {
	display: none;
	padding: 0.45em 1.1em;
	border: 1.5px solid var(--green);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	color: var(--green-text);
	text-decoration: none;
	white-space: nowrap;
}
.header-adm:hover, .header-adm[aria-current="page"] {background: var(--green-light);opacity: 1;}

/*ヘッダーの「資料請求・見学予約」（PCのみ）。「入学をご希望の方へ」と同じ枠線ボタンで、色はさくら色*/
.header-cta {
	padding: 0.45em 1.1em;
	border: 1.5px solid var(--sakura-deep);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sakura-text);
	text-decoration: none;
	white-space: nowrap;
}
.header-cta:hover {background: var(--sakura-light);opacity: 1;}

/*「入学までの流れ」の下の「入学をご希望の方へ」。ヘッダーと同じ枠線ボタンを大きくしたもの*/
.adm-outline {
	display: inline-block;
	width: 100%;
	max-width: 460px;
	padding: 0.9em 1.5em;
	border: 2px solid var(--green);
	border-radius: 999px;
	background: var(--white);
	font-family: var(--font-round);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.5;
	color: var(--green-text);
	text-decoration: none;
}
.adm-outline span {display: block;font-family: var(--font-base);font-size: 12px;font-weight: 500;color: var(--text-light);}
.adm-outline:hover {background: var(--green-light);opacity: 1;}

/*メニュー最上部の「入学をご希望の方へ」（スマホで目立たせる）*/
.nav-adm {
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: 12px 16px;
	border-radius: var(--radius);
	background: var(--white);
	border: 2px solid var(--green);
	text-align: center;
	text-decoration: none;
	font-family: var(--font-round);
	font-weight: 700;
	font-size: 16px;
	color: var(--green-text);
	line-height: 1.4;
}
.nav-adm span {display: block;font-family: var(--font-base);font-size: 12px;font-weight: 500;color: var(--text-light);}

/*ヘッダーの申し込みボタン（PCのみ）*/
.header-cta {display: none;}

/*ハンバーガーボタン（全画面幅共通）*/
#menu-btn {
	position: relative;
	width: 44px;height: 44px;
	margin-right: -8px;
	border: none;
	background: transparent;
	cursor: pointer;
}
#menu-btn span {
	position: absolute;
	left: 10px;
	width: 24px;height: 2px;
	border-radius: 2px;
	background: var(--text);
	transition: 0.3s;
}
#menu-btn span:nth-child(1) {top: 14px;}
#menu-btn span:nth-child(2) {top: 21px;}
#menu-btn span:nth-child(3) {top: 28px;}
#menu-btn[aria-expanded="true"] span:nth-child(1) {transform: translateY(7px) rotate(45deg);}
#menu-btn[aria-expanded="true"] span:nth-child(2) {opacity: 0;}
#menu-btn[aria-expanded="true"] span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}

/*開閉メニュー（ヘッダーの下に全画面で表示。スクロールしなくても全項目が見えるように詰めて配置）*/
#nav {
	position: fixed;
	top: var(--header-h);left: 0;right: 0;
	height: calc(100vh - var(--header-h));
	height: calc(100dvh - var(--header-h));
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
	overflow-y: auto;		/*極端に画面が低い端末のときだけスクロール*/
	overscroll-behavior: contain;	/*メニュー内のスクロールが背面のページに伝わらないように*/
	background: var(--sakura-light);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}
#nav.open {opacity: 1;visibility: visible;}
#nav ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 420px;
}
#nav li a {
	display: block;
	padding: 11px 4px;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	color: var(--text);
	text-decoration: none;
	font-weight: 500;
	text-align: center;
}
.nav-cta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}
.nav-cta .btn {padding: 0.8em 1em;}

/*背の低い画面（小さいスマホ）では詰めて、メニューがスクロールせずに収まるように*/
@media (max-height: 720px) {
	#nav {gap: 14px;}
	#nav li a {padding: 9px 4px;}
	.nav-cta {gap: 8px;}
	.nav-cta .btn {padding: 0.65em 1em;}
}
@media (max-height: 600px) {
	#nav {gap: 10px;padding-top: 10px;padding-bottom: 10px;}
	.nav-adm {padding: 6px 12px;font-size: 15px;}
	#nav li a {padding: 6px 4px;}
	.nav-cta {gap: 6px;}
	.nav-cta .btn {padding: 0.5em 1em;}
}

@media (min-width: 900px) {
	.logo-main {font-size: 20px;}
	.header-right {gap: 16px;}
	.sns {gap: 14px;}
	.sns-instagram img {width: 28px;height: 28px;}
	.sns-note img {height: 20px;}
	#header .sns-note img {height: 20px;}
	.header-cta {display: inline-block;}
	.header-adm {display: inline-block;}
	.logo-sub {font-size: 12px;}
	.logo-main {font-size: 20px;}
	#nav li a {font-size: 17px;padding: 14px 4px;}
}

/*メインビジュアルのキャッチコピー
---------------------------------------------------------------------------*/
#mainimg .catch {
	position: absolute;
	z-index: 2;
	left: var(--gutter);
	right: var(--gutter);
	bottom: 12%;
	color: var(--text);
}
.catch-main {
	display: inline;
	margin: 0;
	font-family: var(--font-round);
	font-weight: 700;
	font-size: clamp(20px, 5.8vw, 44px);
	line-height: 2;
	letter-spacing: 0.05em;
	padding: 0.15em 0.4em;
	background: rgba(255,255,255,0.88);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	border-radius: 6px;
}
@media (min-width: 900px) {
	#mainimg .catch {left: 8%;bottom: 14%;}
}


/*セクション共通
---------------------------------------------------------------------------*/
.section {padding: 72px 0;}
@media (min-width: 900px) {
	.section {padding: 112px 0;}
}

.inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.inner.narrow {max-width: 780px;}

.bg-sakura {background: var(--sakura-light);}
.bg-green {background: var(--green-light);}

/*見出し*/
.ttl {
	margin: 0 0 40px;
	text-align: center;
	font-family: var(--font-round);
	font-weight: 700;
	font-size: clamp(22px, 5.6vw, 32px);
	line-height: 1.5;
	letter-spacing: 0.08em;
}
.ttl .en {
	display: block;
	margin-bottom: 0.4em;
	font-family: var(--font-base);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--green-deep);
}
.ttl .en::before, .ttl .en::after {
	content: "";
	display: inline-block;
	width: 6px;height: 6px;
	margin: 0 10px 2px;
	border-radius: 0 50% 0 50%;
	background: var(--sakura);
	vertical-align: middle;
}
@media (min-width: 900px) {
	.ttl {margin-bottom: 56px;}
}

.sub-ttl {
	margin: 40px 0 20px;
	text-align: center;
	font-family: var(--font-round);
	font-size: 18px;
}


/*想い
---------------------------------------------------------------------------*/
#message p {margin: 0 0 1.4em;}
#message .lead {
	text-align: center;
	font-family: var(--font-round);
	font-weight: 700;
	font-size: clamp(22px, 6vw, 30px);
	color: var(--green-deep);
	margin-bottom: 1.2em;
}
/*PCでも本文は左揃え。1行が長くなりすぎないよう幅を絞って中央に配置*/
#message .lead ~ p {max-width: 40em;margin-left: auto;margin-right: auto;}


/*特色
---------------------------------------------------------------------------*/
.feature {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 56px;
}
.feature figure {position: relative;}
/*写真の右下に「※イメージ」*/
.img-note {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,0.85);
	font-size: 11px;
	line-height: 1.6;
	color: var(--text-light);
}
.feature figure img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
}
.feature .num {
	margin: 0;
	font-family: var(--font-round);
	font-size: 32px;
	line-height: 1;
	color: var(--sakura-deep);
	letter-spacing: 0.05em;
}
.feature h3 {
	margin: 4px 0 12px;
	font-family: var(--font-round);
	font-size: 22px;
	color: var(--text);
}
.feature p {margin: 0 0 1em;}

@media (min-width: 900px) {
	.feature {
		flex-direction: row;
		align-items: center;
		gap: 56px;
		margin-bottom: 80px;
	}
	.feature figure {flex: 0 0 46%;}
	.feature .text {flex: 1;}
	.feature:nth-of-type(even) {flex-direction: row-reverse;}
}

.soft-cta {
	text-align: center;
	font-size: 14px;
	color: var(--text-light);
}
.soft-cta p {margin: 0 0 14px;}
.soft-cta .btn-mid {
	width: 100%;
	max-width: 380px;
	padding: 1em 1.5em;
	font-size: 16px;
	box-shadow: 0 4px 14px rgba(217,121,143,0.25);	/*さくら色のやわらかい影で少しだけ浮かせる*/
}
.soft-cta .btn-mid::after {
	content: "";
	display: inline-block;
	width: 7px;height: 7px;
	margin-left: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	vertical-align: 2px;
}
.soft-cta .btn-mid {flex-direction: row;}
.soft-cta .soft-cta-sub {margin: 12px 0 0;font-size: 13px;}
.soft-cta .soft-cta-sub a {font-weight: 700;}


/*キャンパスのようす（スマホ：横スクロール／PC：グリッド）
---------------------------------------------------------------------------*/
#campus .center {margin: 0 0 32px;}

.gallery {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin: 0 calc(-1 * var(--gutter));
	padding: 0 var(--gutter) 12px;
	scrollbar-width: thin;
}
.gallery figure {
	flex: 0 0 78%;
	scroll-snap-align: center;
}
.gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
}
.gallery figcaption {
	padding: 12px 4px 0;
	font-size: 14px;
	line-height: 1.7;
}
.gallery figcaption b {
	display: block;
	font-family: var(--font-round);
	font-size: 16px;
	margin-bottom: 4px;
	color: var(--green-deep);
}

@media (min-width: 700px) {
	.gallery {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 24px;
		overflow: visible;
		margin: 0;
		padding: 0;
	}
}
@media (min-width: 1000px) {
	.gallery {grid-template-columns: repeat(3, 1fr);}
}


/*卒業までのしくみ
---------------------------------------------------------------------------*/
#study .center {margin: 0;}

.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}
.steps li {
	position: relative;
	background: var(--white);
	border-radius: var(--radius);
	padding: 20px 20px 16px 72px;
}
.step-no {
	position: absolute;
	left: 20px;top: 20px;
	width: 36px;height: 36px;
	display: grid;place-items: center;
	border-radius: 50%;
	background: var(--green);
	color: var(--green-text);
	font-weight: 700;
}
.steps h4 {margin: 0 0 4px;font-size: 17px;font-family: var(--font-round);}
.steps p {margin: 0;font-size: 14px;line-height: 1.75;}

@media (min-width: 900px) {
	.steps {grid-template-columns: repeat(4, 1fr);}
	.steps li {padding: 64px 20px 20px;text-align: center;}
	.step-no {left: 50%;transform: translateX(-50%);}
	.steps p {text-align: left;}
}

.require {
	margin: 40px auto 0;
	max-width: 640px;
	padding: 24px;
	background: var(--white);
	border: 2px solid var(--green);
	border-radius: var(--radius);
}
.require h3 {margin: 0 0 8px;text-align: center;font-family: var(--font-round);font-size: 18px;}
.require ul {margin: 0;padding-left: 1.3em;}

.points {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.points li {
	position: relative;
	padding: 14px 16px 14px 48px;
	background: var(--white);
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.6;
}
.points li br {display: none;}
.points li::before {
	content: "";
	position: absolute;
	left: 20px;top: 50%;
	width: 14px;height: 8px;
	margin-top: -6px;
	border-left: 3px solid var(--green-deep);
	border-bottom: 3px solid var(--green-deep);
	transform: rotate(-45deg);
}
@media (min-width: 900px) {
	.points {grid-template-columns: repeat(3, 1fr);}
	.points li {border-radius: var(--radius);padding: 20px 16px 20px 52px;}
	.points li br {display: inline;}
}


/*入学のかたち（新入学・転入学・編入学）
---------------------------------------------------------------------------*/
.adm-lead {margin: -16px 0 32px;}
.adm-cards {list-style: none;margin: 0;padding: 0;display: grid;gap: 16px;}
.adm-card {background: var(--white);border-radius: var(--radius);padding: 24px 22px 20px;}
.adm-tag {
	display: inline-block;
	margin: 0 0 10px;
	padding: 2px 16px;
	border-radius: 999px;
	background: var(--sakura);
	color: var(--sakura-text);
	font-family: var(--font-round);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.08em;
}
.adm-tag-green {background: var(--green);color: var(--green-text);}
.adm-tag-yellow {background: #f7e3a3;color: #5e4a12;}	/*ロゴの蝶の黄色をやわらかくした色*/
.adm-card h3 {margin: 0 0 8px;font-family: var(--font-round);font-size: 18px;line-height: 1.5;}
.adm-card p:not(.adm-tag) {margin: 0;font-size: 14px;line-height: 1.8;}
.adm-note {margin: 24px 0 0;font-size: 14px;color: var(--text-light);}
.pc-br {display: none;}	/*PCのときだけ改行*/
@media (min-width: 900px) {
	.adm-cards {grid-template-columns: repeat(3, 1fr);gap: 24px;}
	.adm-card {padding: 28px 24px 24px;text-align: center;}
	.adm-card p:not(.adm-tag) {text-align: left;}
	.pc-br {display: inline;}
}


.adm-more {
	display: inline-block;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 700;
}
.adm-more::after {content: " ›";}
.to-admission {margin-top: 8px;text-align: center;}


/*入学までの流れ
---------------------------------------------------------------------------*/
.flow {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: flow;
}
.flow li {
	position: relative;
	padding: 0 0 32px 56px;
	counter-increment: flow;
}
.flow li::before {
	content: counter(flow);
	position: absolute;
	left: 0;top: 0;
	width: 40px;height: 40px;
	display: grid;place-items: center;
	border-radius: 50%;
	background: var(--sakura);
	color: var(--sakura-text);
	font-weight: 700;
}
.flow li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 19px;top: 44px;bottom: 4px;
	border-left: 2px dotted var(--sakura);
}
.flow h3 {margin: 4px 0 6px;font-family: var(--font-round);font-size: 18px;}
.flow p {margin: 0;}


/*お知らせ
---------------------------------------------------------------------------*/
.news {padding: 48px 0;}
@media (min-width: 900px) {
	.news {padding: 72px 0;}
}

.news-ttl {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 16px;
	font-family: var(--font-round);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.08em;
}
.news-ttl .en {
	font-family: var(--font-base);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--green-deep);
}

.news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}
.news-list > li {border-bottom: 1px solid var(--line);}

/*1件分（日付＋タイトル）。本文があるときは押すと開く*/
.news-item summary, .news-item .news-head {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 36px 14px 4px;
	line-height: 1.6;
	color: var(--text);
	text-decoration: none;
}
.news-item summary {list-style: none;cursor: pointer;}
.news-item summary::-webkit-details-marker {display: none;}
.news-date {
	font-size: 13px;
	color: var(--green-deep);
	letter-spacing: 0.05em;
}
.news-title {font-weight: 500;}

/*右端の矢印（本文あり：下向き、リンク：右向き）*/
.news-item summary::after, .news-item a.news-head::after {
	content: "";
	position: absolute;
	right: 12px;top: 50%;
	width: 8px;height: 8px;
	border-right: 2px solid var(--text-light);
	border-bottom: 2px solid var(--text-light);
	transition: transform 0.3s;
}
.news-item summary::after {margin-top: -7px;transform: rotate(45deg);}
.news-item details[open] summary::after {margin-top: -2px;transform: rotate(-135deg);}
.news-item a.news-head::after {margin-top: -4px;transform: rotate(-45deg);}

/*固定したお知らせ（タイトルの前にピン）*/
.news-pin {
	display: inline-block;
	margin-right: 6px;
	font-size: 0.95em;
	line-height: 1;
}

.news-body {
	margin: 0;
	padding: 0 4px 16px;
	font-size: 14px;
	white-space: pre-wrap;	/*シートで入れた改行をそのまま表示*/
}
.news-body a {font-weight: 700;}

.news-more {
	display: block;
	margin: 20px auto 0;
	padding: 0.6em 2em;
	border: 1px solid var(--green);
	border-radius: 999px;
	background: var(--white);
	color: var(--green-text);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.news-more[hidden] {display: none;}

@media (min-width: 700px) {
	.news-item summary, .news-item .news-head {
		flex-direction: row;
		align-items: baseline;
		gap: 24px;
	}
	.news-date {flex: 0 0 6.5em;}
}


/*よくある質問（details/summaryで開閉）
---------------------------------------------------------------------------*/
.faq details {
	background: var(--white);
	border-radius: var(--radius);
	margin-bottom: 12px;
}
.faq summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 18px 52px 18px 52px;
	font-weight: 700;
	line-height: 1.6;
}
.faq summary::-webkit-details-marker {display: none;}
.faq summary::before {
	content: "Q";
	position: absolute;
	left: 18px;top: 16px;
	font-family: var(--font-round);
	font-size: 18px;
	color: var(--sakura-deep);
}
.faq summary::after {
	content: "";
	position: absolute;
	right: 22px;top: 50%;
	width: 9px;height: 9px;
	margin-top: -7px;
	border-right: 2px solid var(--text-light);
	border-bottom: 2px solid var(--text-light);
	transform: rotate(45deg);
	transition: transform 0.3s;
}
.faq details[open] summary::after {transform: rotate(-135deg);margin-top: -2px;}
.faq .answer {
	position: relative;
	padding: 0 20px 20px 52px;
}
.faq .answer::before {
	content: "A";
	position: absolute;
	left: 18px;top: 0;
	font-family: var(--font-round);
	font-size: 18px;
	line-height: 1.6;
	color: var(--green-deep);
}
.faq .answer p {margin: 0;}


/*お問い合わせ
---------------------------------------------------------------------------*/
#contact {
	background:
		radial-gradient(circle at 10% 0%, var(--sakura-light) 0, transparent 45%),
		radial-gradient(circle at 90% 100%, var(--green-light) 0, transparent 45%);
}
#contact p {margin: 0 0 1em;}
#contact .note {font-weight: 700;color: var(--green-deep);}
.cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
}


/*LINEで相談（お問い合わせ内）*/
.line-box {
	max-width: 460px;
	margin: 32px auto 0;
	padding: 24px 20px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.line-box .line-logo {margin: 0 0 12px;}
.line-box .line-logo img {height: 34px;width: auto;}
.line-box .line-lead {font-size: 14px;margin: 0 0 16px;}
.line-qr {display: none;}	/*QRコードはPCのときだけ表示*/
@media (min-width: 900px) {
	.line-qr {display: block;margin: 20px auto 0;}
	.line-qr img {width: 140px;height: 140px;}
	.line-qr figcaption {font-size: 12px;color: var(--text-light);}
}


/*フッター
---------------------------------------------------------------------------*/
footer {
	background: var(--green-light);
	padding: 56px 0 0;
	font-size: 14px;
}
.footer-inner {
	display: grid;
	gap: 32px;
}
@media (min-width: 900px) {
	.footer-inner {grid-template-columns: 1fr 1fr;gap: 48px;}
}
.footer-name {
	margin: 0 0 16px;
	font-family: var(--font-round);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
}
.footer-name span {display: block;font-size: 13px;font-weight: 500;color: var(--text-light);}

footer dl {
	display: grid;
	grid-template-columns: 4.5em 1fr;
	gap: 6px 8px;
	margin: 0 0 20px;
}
footer dt {font-weight: 700;}
footer dd {margin: 0;}

.week {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background: var(--white);
	border-radius: 10px;
	overflow: hidden;
	text-align: center;
	font-size: 13px;
}
.week th, .week td {padding: 8px 0;border-bottom: 1px solid var(--line);}
.week tr:last-child td {border-bottom: none;}
.week th:first-child, .week td:first-child {width: 30%;}
.week th {background: var(--sakura-light);font-weight: 500;}

.footer-sns {margin-top: 24px;}
.footer-sns p {margin: 0 0 8px;font-size: 13px;color: var(--text-light);}
.footer-sns .sns {gap: 12px;flex-wrap: wrap;}
.footer-sns .sns a {
	min-height: 48px;
	padding: 8px 18px;
	background: var(--white);
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
}
.footer-sns .sns-instagram img {width: 24px;height: 24px;}
.footer-sns .sns-note img {height: 18px;}
.footer-sns .sns-line img {height: 22px;width: auto;}

.footer-map {
	position: relative;
	padding-top: 75%;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--white);
}
.footer-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;height: 100%;
	border: 0;
}

.copyright {
	margin: 48px 0 0;
	text-align: center;
	color: var(--text-light);
}



/*スマホ用：画面下の固定申し込みボタン
---------------------------------------------------------------------------*/
#fixed-cta {
	position: fixed;
	z-index: 90;
	left: 0;right: 0;bottom: 0;
	display: flex;
	gap: 8px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255,255,255,0.95);
	border-top: 1px solid var(--line);
	transform: translateY(110%);
	transition: transform 0.3s;
}
#fixed-cta.show {transform: none;}
#fixed-cta .btn {padding: 0.75em 0.5em;font-size: 14px;}
#fixed-cta .btn-sakura {flex: 1;}
#fixed-cta .btn-line, #fixed-cta .btn-green {flex: 0 0 24%;}
#fixed-cta .btn {white-space: nowrap;}
@media (max-width: 359px) {
	#fixed-cta {gap: 6px;padding-left: 8px;padding-right: 8px;}
	#fixed-cta .btn {font-size: 12px;padding-left: 0.4em;padding-right: 0.4em;}
	#fixed-cta .btn-line, #fixed-cta .btn-green {flex: 0 0 21%;}
}

/*固定ボタンがフッターに重ならないように余白*/
footer {padding-bottom: 72px;}

@media (min-width: 900px) {
	#fixed-cta {display: none;}
	footer {padding-bottom: 0;}
}


/*ページの上部へ戻るボタン
---------------------------------------------------------------------------*/
.pagetop {
	position: fixed;
	z-index: 80;
	right: 16px;
	bottom: 88px;
	width: 44px;height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.95);
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}
.pagetop::before {
	content: "";
	position: absolute;
	left: 50%;top: 50%;
	width: 10px;height: 10px;
	margin: -2px 0 0 -5px;
	border-left: 2px solid var(--green-deep);
	border-top: 2px solid var(--green-deep);
	transform: rotate(45deg);
}
.pagetop.show {opacity: 1;visibility: visible;}
@media (min-width: 900px) {
	.pagetop {bottom: 24px;right: 24px;}
}


/*スクロールして画面に入ったら、下からふわっと表示（js/main.jsで.is-visibleを付与）
---------------------------------------------------------------------------*/
.fade-up {
	opacity: 0;
	transform: translateY(20px);
}
.fade-up.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 1.5s 0.8s, transform 1.5s 0.8s;
}


/*動きを減らす設定の人にはアニメーションを控える
---------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {transition: none !important;animation: none !important;}
	.fade-up {opacity: 1 !important;transform: none !important;}
}


/*入学をご希望の方へ（/admission/）
---------------------------------------------------------------------------*/
.page-head {
	margin-top: var(--header-h);
	padding: 56px 0 40px;
	background:
		radial-gradient(circle at 12% 20%, var(--sakura-light) 0, transparent 55%),
		radial-gradient(circle at 88% 90%, var(--green-light) 0, transparent 55%);
	text-align: center;
}
.page-head .year {
	display: inline-block;
	margin: 0 0 12px;
	padding: 2px 16px;
	border-radius: 999px;
	background: var(--white);
	border: 1px solid var(--sakura);
	font-size: 13px;
	color: var(--sakura-text);
}
.page-head h1 {
	margin: 0 0 16px;
	font-family: var(--font-round);
	font-size: clamp(24px, 6.4vw, 36px);
	letter-spacing: 0.08em;
}
.page-head p {margin: 0;font-size: 14px;}

/*タブ*/
.tabs {
	position: sticky;
	top: var(--header-h);
	z-index: 50;
	display: flex;
	gap: 8px;
	max-width: 780px;
	margin: 0 auto;
	padding: 12px var(--gutter);
	background: rgba(255,255,255,0.95);
}
.tab {
	flex: 1;
	padding: 12px 8px;
	border: 2px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	font: inherit;
	font-family: var(--font-round);
	font-weight: 700;
	font-size: 15px;
	color: var(--text-light);
	cursor: pointer;
	line-height: 1.4;
}
.tab small {display: block;font-size: 11px;font-weight: 500;}
.tab[aria-selected="true"].tab-new {background: var(--sakura);border-color: var(--sakura);color: var(--sakura-text);}
.tab[aria-selected="true"].tab-trans {background: var(--green);border-color: var(--green);color: var(--green-text);}
.panel[hidden] {display: none;}

.block {margin: 0 0 56px;}
.block-ttl {
	margin: 0 0 20px;
	padding-left: 14px;
	border-left: 4px solid var(--sakura);
	font-family: var(--font-round);
	font-size: 20px;
	line-height: 1.5;
}
.panel-trans .block-ttl {border-left-color: var(--green);}
.block > p {margin: 0 0 1em;}

/*流れ（縦のステップ）*/
.steps-v {list-style: none;margin: 0;padding: 0;counter-reset: st;}
.steps-v li {
	position: relative;
	padding: 0 0 28px 56px;
	counter-increment: st;
}
.steps-v li::before {
	content: counter(st);
	position: absolute;
	left: 0;top: 0;
	width: 40px;height: 40px;
	display: grid;place-items: center;
	border-radius: 50%;
	background: var(--sakura);
	color: var(--sakura-text);
	font-weight: 700;
}
.panel-trans .steps-v li::before {background: var(--green);color: var(--green-text);}
.steps-v li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 19px;top: 44px;bottom: 4px;
	border-left: 2px dotted var(--sakura);
}
.panel-trans .steps-v li:not(:last-child)::after {border-left-color: var(--green);}
.steps-v h3 {margin: 6px 0 4px;font-family: var(--font-round);font-size: 17px;}
.steps-v p {margin: 0;font-size: 14px;}
.steps-v .who {
	display: inline-block;
	margin-left: 6px;
	padding: 0 8px;
	border-radius: 4px;
	background: var(--green-light);
	font-size: 11px;
	font-weight: 500;
	vertical-align: 2px;
}
.steps-v .first {
	display: block;
	margin-top: 6px;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--sakura-light);
	font-size: 13px;
}

/*表*/
.info-table {width: 100%;border-collapse: collapse;font-size: 14px;background: var(--white);}
.info-table th, .info-table td {padding: 12px;border: 1px solid var(--line);text-align: left;vertical-align: top;}
.info-table th {width: 7em;background: var(--sakura-light);font-weight: 700;}
.sched {width: 100%;border-collapse: collapse;font-size: 14px;background: var(--white);}
.sched th, .sched td {padding: 10px 8px;border: 1px solid var(--line);text-align: center;}
.sched thead th {background: var(--sakura-light);font-size: 13px;}
.sched tbody th {text-align: left;white-space: nowrap;}
.sched .yen {font-weight: 700;color: var(--sakura-text);}
.note {font-size: 13px;color: var(--text-light);}
.box {padding: 20px;border-radius: var(--radius);background: var(--white);border: 1px solid var(--line);}
.box ul {margin: 0;padding-left: 1.2em;}

/*スマホでは日程表をカード状に*/
@media (max-width: 599px) {
	.sched thead {display: none;}
	.sched, .sched tbody, .sched tr, .sched th, .sched td {display: block;width: 100%;}
	.sched tr {margin-bottom: 12px;border: 1px solid var(--line);border-radius: 12px;overflow: hidden;}
	.sched th, .sched td {border: none;border-top: 1px solid var(--line);text-align: left;padding: 8px 14px;}
	.sched tbody th {border-top: none;background: var(--sakura-light);}
	.sched td::before {content: attr(data-label);display: inline-block;width: 7.5em;font-size: 12px;color: var(--text-light);}
}

.kind {display: grid;gap: 12px;margin-bottom: 8px;}
.kind div {padding: 16px 18px;border-radius: var(--radius);background: var(--white);border: 1px solid var(--line);}
.kind b {display: block;font-family: var(--font-round);font-size: 16px;}
@media (min-width: 700px) {.kind {grid-template-columns: 1fr 1fr;}}

.facility {margin: 0;padding: 16px 20px;border-radius: var(--radius);background: var(--green-light);font-size: 13px;}

/*提出書類チェックリスト*/
.check-group {margin: 0 0 20px;padding: 18px 18px 8px;border-radius: var(--radius);background: var(--white);border: 1px solid var(--line);}
.check-group h3 {margin: 0 0 4px;font-family: var(--font-round);font-size: 16px;}
.check-group .when {margin: 0 0 10px;font-size: 12px;color: var(--text-light);}
.checklist {list-style: none;margin: 0;padding: 0;}
.checklist li {border-top: 1px solid var(--line);}
.checklist label {display: flex;gap: 12px;align-items: flex-start;padding: 12px 2px;cursor: pointer;}
.checklist input {flex: 0 0 auto;width: 20px;height: 20px;margin: 2px 0 0;accent-color: var(--sakura-deep);}
.panel-trans .checklist input {accent-color: var(--green-deep);}
.checklist b {display: block;font-size: 14px;}
.checklist span {display: block;font-size: 12px;color: var(--text-light);line-height: 1.7;}
.checklist .only {display: inline-block;margin-left: 4px;padding: 0 6px;border-radius: 4px;background: var(--sakura-light);font-size: 11px;color: var(--sakura-text);}
.checklist input:checked + div b {text-decoration: line-through;opacity: .6;}
.dl-link {display: block;margin: 4px 0 0;padding: 14px 18px;border-radius: var(--radius);background: var(--green-light);font-size: 14px;font-weight: 700;text-decoration: none;color: var(--green-text);}
.dl-link::after {content: " ↗";}
.timing {padding: 18px 20px;border-radius: var(--radius);background: var(--green-light);}
.timing p {margin: 0;}
.timing .big {font-family: var(--font-round);font-weight: 700;font-size: 17px;margin-bottom: 6px;}

.sub-switch {display: inline-flex;margin: 0 0 16px;padding: 4px;border-radius: 999px;background: var(--green-light);}
.sub-btn {padding: 8px 22px;border: none;border-radius: 999px;background: transparent;font: inherit;font-weight: 700;font-size: 14px;color: var(--text-light);cursor: pointer;}
.sub-btn[aria-pressed="true"] {background: var(--white);color: var(--green-text);box-shadow: 0 1px 4px rgba(0,0,0,.08);}
.page-head .back {margin: 0 0 16px;font-size: 12px;color: var(--text-light);}