/* 創造教室こびとのおうち
   INDEX専用CSS 統合版
   現行INDEX内のstyle 3ブロックを出現順のまま統合
   表示確認後にHTML側のstyleを削除する
*/

/* ==================================================
	   全体
	   ================================================== */

	body {
		color: #554f49;
		background: #d8d1c7;
	}

	#wrapper {
		background: transparent;
	}

	#main {
		background: #f7f4ef;
		color: #554f49;
		overflow: hidden;
	}

	#content {
		text-align: center;
	}

	#content p {
		color: #5f5851;
		line-height: 2;
		text-align: center;
	}

	#content h2 {
		color: #4d453e;
		text-align: center;
	}

	#content h3 {
		color: #5b5047;
		text-align: center;
	}

	#content img {
		max-width: 100%;
		height: auto;
	}


	/* ==================================================
	   HEADER
	   ================================================== */

	#header {
		text-align: center;
		padding: 4.5em 2em 4em 2em;

background-size: cover;
		background-position: center;
	}

	#header h1 {
		color: #ffffff;
		font-weight: 400;
		letter-spacing: 0.08em;
		text-shadow: 0 2px 6px rgba(0,0,0,0.28);
	}

	#header p {
		color: #ffffff;
		margin-left: auto;
		margin-right: auto;
		line-height: 1.9;
		text-shadow: 0 1px 4px rgba(0,0,0,0.35);
	}


	/* ==================================================
	   NAVIGATION
	   ================================================== */

	#nav {
		background: #eee9e1;
		text-align: center;
		border-bottom: 1px solid #d9d1c6;
	}

	#nav ul {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
	}

	#nav ul li {
		text-align: center;
	}

	#nav ul li a {
		color: #5b534c;
		text-align: center;
	}

	#nav ul li a:hover {
		color: #8a694e;
		background: rgba(255,255,255,0.45);
	}

	#nav ul li a.active {
		color: #4d4138;
		background: #f7f4ef;
		font-weight: 500;
	}


	/* ==================================================
	   MAIN
	   ================================================== */

	#content.main {
		padding-top: 4em;
	}

	#content header.major {
		text-align: center;
		margin-bottom: 2.5em;
	}

	#content header.major h2 {
		line-height: 1.6;
	}

	#content header.major h2:after {
		background-color: #bca58e;
		background-image: none;
	}


	/* ==================================================
	   TOP画像
	   ================================================== */

	.hero-photo {
		max-width: 700px;
		margin: 0 auto 3em auto;
	}

	.hero-photo img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 10px;
		box-shadow: 0 5px 18px rgba(70, 60, 50, 0.16);
	}


	/* ==================================================
	   導入文
	   ================================================== */

	.intro-text {
		max-width: 850px;
		margin: 0 auto;
	}

	.intro-text p {
		margin-bottom: 1.4em;
	}


	/* ==================================================
	   教育方針
	   ================================================== */

	.philosophy {
		display: flex;
		justify-content: center;
		align-items: stretch;
		flex-wrap: wrap;
		gap: 20px;
		margin: 3em auto 0 auto;
	}

	.philosophy-item {
		width: calc(33.333% - 20px);
		min-width: 250px;
		padding: 2.5em 2em;
		background: #eee8df;
		border: 1px solid #ded4c8;
		border-radius: 10px;
		text-align: center;
	}

	.philosophy-item h3 {
		color: #594b40;
		margin-bottom: 1em;
	}

	.philosophy-item p {
		color: #655d55;
		margin: 0;
	}


	/* ==================================================
	   区切り
	   ================================================== */

	#content hr {
		margin: 5em 0;
		border: 0;
		border-top: 1px solid #ded7cf;
	}


	/* ==================================================
	   入会案内
	   ================================================== */

	.admission-text {
		max-width: 850px;
		margin: 0 auto 4em auto;
	}


	/* ==================================================
	   クラスカード
	   ================================================== */

	#content ul.features {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		gap: 20px;
		width: 100%;
		margin: 2em auto 0 auto;
		padding: 0;
		list-style: none;
	}

	#content ul.features li {
		display: flex;
		flex-direction: column;
		width: 280px;
		padding: 2.3em 1.5em;
		margin: 0;
		background: #eee8df;
		border: 1px solid #dacfc2;
		border-radius: 10px;
		text-align: center;
		color: #554f49;
	}

	#content ul.features li h3 {
		display: block;
		color: #51463d;
		margin: 0 0 0.8em 0;
	}

	#content ul.features li p {
		display: block;
		color: #665d55;
		margin: 0 0 1.5em 0;
	}

	#content ul.features li a.button {
		display: inline-block;
		color: #625447;
		margin: auto auto 0 auto;
	}


	/* ==================================================
	   ボタン
	   ================================================== */

	#content .actions {
		justify-content: center;
		text-align: center;
	}

	.button {
		border-color: #aa9480;
		color: #665548;
	}

	.button:hover {
		border-color: #856a54;
		color: #856a54;
	}

	.button.primary {
		background: #8c715b;
		box-shadow: none;
		color: #ffffff;
	}

	.button.primary:hover {
		background: #78604e;
	}


	/* ==================================================
	   保護者様の声
	   ================================================== */

	.voice-area {
		max-width: 800px;
		margin: 0 auto;
		padding: 3em 2em;
		background: #e9e2d8;
		border: 1px solid #dacfc2;
		border-radius: 10px;
	}


	/* ==================================================
	   親子クラス
	   ================================================== */

	.oyako-area {
		max-width: 900px;
		margin: 0 auto;
	}

	.oyako-area p {
		margin-bottom: 2em;
	}


	/* ==================================================
	   実績
	   ================================================== */

	.history-area {
		max-width: 850px;
		margin: 0 auto;
		padding: 3em 2em;
		background: #f0ebe4;
		border-top: 1px solid #d8cec2;
		border-bottom: 1px solid #d8cec2;
	}


	/* ==================================================
	   お知らせ
	   ================================================== */

	.information-row {
		display: flex;
		justify-content: center;
		align-items: stretch;
		flex-wrap: wrap;
		gap: 30px;
		margin: 3em auto 0 auto;
	}

	.information-item {
		width: 340px;
		max-width: 100%;
		padding: 2em;
		background: #eee8df;
		border: 1px solid #dacfc2;
		border-radius: 10px;
		text-align: center;
	}

	.information-item img {
		display: block;
		margin: 0 auto 1.5em auto;
		border-radius: 6px;
	}

	.information-item h3 {
		margin-bottom: 1.5em;
	}


	/* ==================================================
	   TOPICS
	   ================================================== */

	.news-area {
		max-width: 800px;
		margin: 0 auto;
		padding: 2.5em;
		background: #e9e2d8;
		border: 1px solid #dacfc2;
		border-radius: 10px;
	}

	.news-area p {
		margin-bottom: 0.8em;
	}

/* ==================================================
   LINK
   ================================================== */

/* 通常のテキストリンク */
#content a:not(.button) {
	color: #82664f;
}

#content a:not(.button):hover {
	color: #5f4938;
}

/* 通常ボタン */
#content a.button {
	color: #665548 !important;
}

/* 通常ボタン hover */
#content a.button:hover {
	color: #856a54 !important;
}

/* 塗りつぶしボタン */
#content a.button.primary {
	color: #ffffff !important;
}

#content a.button.primary:hover {
	color: #ffffff !important;
}

	/* ==================================================
	   FOOTER
	   ================================================== */

	#footer {
		text-align: center;
		color: #eee8e1;
	}

	#footer section {
		text-align: center;
	}

	#footer h2 {
		text-align: center;
		color: #ffffff;
	}

	#footer p {
		text-align: center;
		color: #eee8e1;
	}

	#footer .actions {
		justify-content: center;
	}


	/* ==================================================
	   SMARTPHONE
	   ================================================== */

	@media screen and (max-width: 736px) {

		#header {
			padding: 3.5em 1.5em 3em 1.5em;
		}

		#nav ul {
			display: block;
		}

		#nav ul li {
			display: block;
		}

		.philosophy {
			display: block;
		}

		.philosophy-item {
			width: 100%;
			min-width: 0;
			margin-bottom: 1em;
		}

		#content ul.features {
			display: block;
		}

		#content ul.features li {
			width: 100%;
			margin-bottom: 1em;
		}

		.information-row {
			display: block;
		}

		.information-item {
			width: 100%;
			margin-bottom: 1.5em;
		}

		.voice-area,
		.news-area,
		.history-area {
			padding: 2em 1em;
		}

	}

#content header.major h2 {
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN",
		"Meiryo", sans-serif;
}


/* 本文文字を濃くする */
#content p {
	color: #403c38;
}

.intro-text p,
.philosophy-item p,
.admission-text p,
.oyako-area p,
.history-area p,
.information-item p,
.news-area p,
#content ul.features li p {
	color: #403c38;
}

.philosophy-item .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.2em;
	height: 3.2em;
	margin-bottom: 1.2em;
	border: 1px solid #bca58e;
	border-radius: 50%;
	color: #8c715b;
	font-size: 1.4em;
}

#content ul.features li .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3em;
	height: 3em;
	margin: 0 auto 1.2em auto;
	border: 1px solid #bca58e;
	border-radius: 50%;
	color: #8c715b;
	font-size: 1.3em;
}

/* 保護者様の声 */
.voice-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 2.5em 0;
}

.voice-item {
	padding: 2em;
	background: #f7f4ef;
	border: 1px solid #d8cec2;
	border-radius: 10px;
	text-align: left;
}

.voice-item .voice-class {
	margin: 0 0 0.35em 0;
	padding: 0;
	text-align: left !important;
	font-weight: bold;
	color: #7a6655 !important;
}

.voice-item p {
	margin: 0;
	text-align: left !important;
	line-height: 1.9;
}

@media screen and (max-width: 736px) {
	.voice-list {
		grid-template-columns: 1fr;
	}
}

	
/* 親子クラス：小さい元画像を拡大しない */
.oyako-layout {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 28px;
	max-width: 850px;
	margin: 0 auto;
}

.oyako-photo {
	flex: 0 0 auto;
}

.oyako-photo img {
	display: block;
	width: auto;
	max-width: 150px;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
	box-shadow: 0 3px 10px rgba(70, 60, 50, 0.12);
}

.oyako-copy {
	flex: 1 1 auto;
	text-align: left;
}

.oyako-copy h2,
.oyako-copy h3,
.oyako-copy p {
	text-align: left !important;
}

.oyako-copy p {
	margin-bottom: 1.2em;
}

.oyako-copy .actions {
	justify-content: center !important;
	text-align: center !important;
	margin-top: 1.5em;
}

@media screen and (max-width: 736px) {
	.oyako-layout {
		display: block;
	}

	.oyako-photo {
		margin-bottom: 1.5em;
	}

	.oyako-copy,
	.oyako-copy h2,
	.oyako-copy h3,
	.oyako-copy p {
		text-align: center !important;
	}

	.oyako-copy .actions {
		justify-content: center !important;
		text-align: center !important;
	}
}

/* 日本語見出しの数字を含めフォントを統一 */
#content h3 {
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN",
		"Meiryo", sans-serif;
}


/* 25年の実績 */
.history-number {
	margin: 0;
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN",
		"Meiryo", sans-serif;
	font-size: 4.6em;
	font-weight: 500;
	line-height: 1;
	color: #8c715b;
	text-align: center;
}

.history-years {
	width: max-content;
	margin: 0.35em auto 1.8em auto !important;
	padding-left: 0.22em;
	font-size: 1.35em;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1;
	text-align: center !important;
	color: #7a6a5d !important;
}

.history-area p {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 736px) {
	.history-number {
		font-size: 3.6em;
	}
}


/* 教室からのお知らせ：画像を主役にしたカード */
.information-row {
	max-width: 850px;
	margin: 3em auto 0 auto;
	gap: 28px;
}

.information-item {
	display: flex;
	flex-direction: column;
	width: 360px;
	padding: 0 0 2em 0;
	overflow: hidden;
	background: #f7f4ef;
	border: 1px solid #dacfc2;
	border-radius: 10px;
}

.information-item > img,
.information-item > a:first-child {
	display: block;
	margin: 0 auto 1.6em auto;
}

.information-item > a:first-child img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
	border-radius: 0;
}

.information-item > img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
	border-radius: 0;
}

.information-item h3 {
	margin: 0 1.2em 1.2em 1.2em;
}

.information-item > a.button {
	align-self: center;
	margin-top: auto;
}

@media screen and (max-width: 736px) {
	.information-item {
		width: 100%;
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
	}
}


/* TOPICS / こびとつうしん */
.news-area {
	max-width: 850px;
	padding: 3em;
}

.news-area h3 {
	margin-bottom: 1.5em;
}

.news-area p {
	max-width: 680px;
	margin: 0 auto 0.9em auto;
	padding: 0.8em 1em;
	border-bottom: 1px solid #d8cec2;
}

.news-area p:last-child {
	border-bottom: 0;
}

.news-area a:not(.button) {
	font-weight: 500;
	text-decoration: none;
}

@media screen and (max-width: 736px) {
	.news-area {
		padding: 2em 1em;
	}
}


/* FOOTER 仕上げ */
#footer {
	max-width: 1000px;
	margin: 0 auto;
	padding-top: 3.5em;
}

#footer section {
	padding: 0 2em;
}

#footer section h2 {
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN",
		"Meiryo", sans-serif;
	margin-bottom: 1em;
}

#footer section p {
	line-height: 1.9;
}

#footer .actions.special {
	justify-content: center;
	margin-top: 1.5em;
}

#footer .button {
	min-width: 180px;
}

#footer .copyright {
	width: 100%;
	margin-top: 2.5em;
	padding-top: 2em;
	border-top: 1px solid rgba(255,255,255,0.18);
	text-align: center;
	font-size: 0.85em;
}

@media screen and (max-width: 736px) {
	#footer {
		padding-top: 2.5em;
	}

	#footer section {
		padding: 0 1em;
	}
}


/* FOOTER 背景と位置を柔らかく調整 */
#footer {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 3.5em 2em 2em 2em;
	background: #756b62;
	color: #f5f1ec;
	border-radius: 0;
}

#footer section {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

#footer h2,
#footer p,
#footer a {
	color: #f5f1ec;
}

#footer .button {
	border-color: rgba(255,255,255,0.55);
	color: #ffffff !important;
}

#footer .copyright {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	color: #e8e1da;
}

@media screen and (max-width: 736px) {
	#footer {
		padding: 2.5em 1.2em 1.5em 1.2em;
	}
}


/* ==================================================
   HEADER / NAVIGATION 仕上げ
   ================================================== */

#header {
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2.2em 2em 2.4em 2em;
background-size: cover;
	background-position: center 45%;
	overflow: visible;
}

#header h1 {
	margin: 0 0 0.35em 0;
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN",
		"Meiryo", sans-serif;
	font-size: 2.35em;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.10em;
	color: #ffffff;
	text-shadow: 0 2px 8px rgba(0,0,0,0.34);
}

#header p {
	margin: 0;
	max-width: 760px;
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN",
		"Meiryo", sans-serif;
	font-size: 1.02em;
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.04em;
	color: #ffffff;
	text-align: center;
	text-shadow: 0 2px 6px rgba(0,0,0,0.40);
}

#nav {
	background: rgba(247,244,239,0.97);
	border-bottom: 1px solid #d8d0c6;
	box-shadow: 0 3px 12px rgba(70,60,50,0.07);
}

#nav ul {
	min-height: 64px;
}

#nav ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 0 1.15em;
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN",
		"Meiryo", sans-serif;
	font-size: 0.90em;
	letter-spacing: 0.02em;
	color: #554b43;
}

#nav ul li a.active {
	background: #eee8df;
	color: #4b4038;
}

#nav ul li a:hover {
	background: #e8e0d6;
	color: #4b4038;
}

@media screen and (max-width: 980px) {
	#nav ul li a {
		padding-left: 0.75em;
		padding-right: 0.75em;
		font-size: 0.82em;
	}
}

@media screen and (max-width: 736px) {
	#header {
		min-height: 330px;
		padding: 4em 1.4em 3.5em 1.4em;
	}

	#header h1 {
		font-size: 1.75em;
	}

	#header p {
		font-size: 0.92em;
		line-height: 1.8;
	}

	#nav ul {
		min-height: 0;
	}

	#nav ul li a {
		min-height: 46px;
		padding: 0.7em 1em;
		font-size: 0.9em;
	}
}


/* ナビが本文へ重ならないよう固定表示を解除 */
#nav,
#nav.alt {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
}

#main {
	clear: both;
	position: relative;
	z-index: 1;
}

#content.main {
	padding-top: 4em;
}


/* ヘッダー上部の余白・文字切れ対策 */
@media screen and (max-width: 736px) {
	#header {
		min-height: 0 !important;
		padding: 2em 1.2em 2.2em 1.2em !important;
	}
}

#header h1,
#header p {
	position: relative;
	z-index: 2;
	overflow: visible;
}


/* TOP導入文が隠れる問題の修正 */
#main {
	margin-top: 0 !important;
	transform: none !important;
	overflow: visible !important;
}

#content.main {
	position: relative !important;
	top: auto !important;
	margin-top: 0 !important;
	padding-top: 3em !important;
	overflow: visible !important;
}

#content > header.major:first-child,
#content > .intro-text {
	position: relative !important;
	top: auto !important;
	z-index: 10 !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

#content > .intro-text {
	display: block !important;
	max-width: 850px;
	margin: 0 auto !important;
	padding: 0 1em 1em 1em;
}

#content > .intro-text p {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	color: #403c38 !important;
}


/* ヘッダー・ナビ・本文を通常の縦方向レイアウトに固定 */
#header,
#nav,
#main,
#content {
	float: none !important;
	transform: none !important;
}

#header {
	position: relative !important;
	z-index: 1 !important;
}

#nav,
#nav.alt {
	position: relative !important;
	z-index: 2 !important;
	margin: 0 !important;
}

#main {
	position: relative !important;
	z-index: 1 !important;
	margin: 0 auto !important;
	overflow: visible !important;
}

#content.main {
	position: relative !important;
	margin: 0 !important;
	padding-top: 4em !important;
	overflow: visible !important;
}

/* TOP導入部に上下の安全な余白を確保 */
#content > header.major:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

#content > header.major:first-child + div {
	clear: both !important;
	position: relative !important;
	margin-top: 1.5em !important;
	margin-bottom: 2.5em !important;
	overflow: visible !important;
}


/* ==================================================
   TOP AREA FINAL RESET
   ================================================== */

/* 全体の明るさを抑える */
body {
	background: #c9c1b7 !important;
	color: #3f3a35 !important;
}

#wrapper {
	background: transparent !important;
}

#main {
	background: #ebe6df !important;
	color: #3f3a35 !important;
	border-radius: 0 !important;
}

/* ヘッダーを落ち着いた暗めの写真背景へ */
#header {
	position: relative !important;
	min-height: 430px !important;
	margin: 0 !important;
	padding: 4.5em 1.5em 4.5em 1.5em !important;
text-align: center !important;
	overflow: visible !important;
}

#header h1 {
	margin: 0 0 0.4em 0 !important;
	color: #ffffff !important;
	font-size: 2.1em !important;
	line-height: 1.35 !important;
	text-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
}

#header p {
	margin: 0 !important;
	color: #f5f0ea !important;
	font-size: 1em !important;
	line-height: 1.8 !important;
	text-align: center !important;
	text-shadow: 0 2px 5px rgba(0,0,0,0.35) !important;
}

/* ナビは明るすぎないグレージュ */
#nav,
#nav.alt {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	margin: 0 !important;
	background: #d8d0c6 !important;
	border-bottom: 1px solid #bfb5aa !important;
	box-shadow: none !important;
}

#nav ul {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#nav ul li {
	display: block !important;
	margin: 0 !important;
}

#nav ul li a {
	display: block !important;
	min-height: 0 !important;
	padding: 0.9em 1em !important;
	color: #403a35 !important;
	background: transparent !important;
	font-size: 0.9em !important;
	line-height: 1.4 !important;
}

#nav ul li a.active {
	background: #c8beb3 !important;
	color: #302c28 !important;
}

#nav ul li a:hover {
	background: #cfc6bc !important;
	color: #302c28 !important;
}

/* 本文開始位置を固定し、重なりを排除 */
#content.main {
	position: relative !important;
	top: auto !important;
	margin: 0 !important;
	padding: 3.2em 2em 4em 2em !important;
	background: #ebe6df !important;
	overflow: visible !important;
}

#content > header.major:first-child {
	position: relative !important;
	z-index: 1 !important;
	margin: 0 0 2em 0 !important;
	padding: 0 !important;
}

#content > header.major:first-child h2 {
	color: #3d3732 !important;
	line-height: 1.55 !important;
}

/* TOP導入文を通常表示に固定 */
#content > header.major:first-child + div {
	display: block !important;
	position: relative !important;
	z-index: 1 !important;
	max-width: 860px !important;
	margin: 0 auto 2.8em auto !important;
	padding: 1.5em 2em !important;
	background: #ded7ce !important;
	border: 1px solid #cfc5ba !important;
	border-radius: 8px !important;
	overflow: visible !important;
}

#content > header.major:first-child + div p {
	display: block !important;
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	color: #332f2b !important;
	text-align: center !important;
	line-height: 1.95 !important;
	margin: 0 0 1.2em 0 !important;
}

#content > header.major:first-child + div p:last-child {
	margin-bottom: 0 !important;
}

/* その他本文も少し濃く */
#content p {
	color: #3d3935 !important;
}

/* スマホ */
@media screen and (max-width: 736px) {
	#header {
		min-height: 330px !important;
		padding: 3em 1em 3em 1em !important;
	}

	#header h1 {
		font-size: 1.65em !important;
	}

	#header p {
		font-size: 0.92em !important;
	}

	#nav ul {
		display: block !important;
	}

	#nav ul li a {
		padding: 0.75em 1em !important;
	}

	#content.main {
		padding: 2.4em 1.1em 3em 1.1em !important;
	}

	#content > header.major:first-child + div {
		padding: 1.2em 1em !important;
	}
}


/* 最小フッター */
#footer.simple-footer {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 1.5em 1em 1.3em 1em !important;
	background: #756b62 !important;
	text-align: center !important;
}

#footer.simple-footer .footer-name {
	margin: 0 0 0.45em 0 !important;
	padding: 0 !important;
	color: #f5f1ec !important;
	font-weight: 500;
	text-align: center !important;
}

#footer.simple-footer .copyright {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: #e8e1da !important;
	font-size: 0.82em;
	text-align: center !important;
}


/* 25年の実績：控えめな記念表現 */
.history-area {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	padding: 3.2em 2.5em 3em 2.5em;
	background: linear-gradient(135deg, #e9e2d9 0%, #f3eee8 50%, #e8e0d6 100%);
	border-top: 1px solid #cdbfae;
	border-bottom: 1px solid #cdbfae;
}

.history-number {
	margin: 0 !important;
	font-size: 4.3em !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	color: #8a6f55 !important;
	text-align: center !important;
}

.history-years {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 1em;
	width: 100% !important;
	margin: 0.45em auto 1.7em auto !important;
	padding: 0 !important;
	font-size: 1.2em !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	color: #75604d !important;
}

.history-years::before,
.history-years::after {
	content: "";
	display: block;
	width: 58px;
	height: 1px;
	background: #b7a28d;
}

.history-area .major {
	margin-bottom: 1.4em !important;
}

.history-area .major h2 {
	margin-bottom: 0 !important;
	color: #443b34 !important;
	letter-spacing: 0.04em;
}

.history-area > p:last-child {
	max-width: 700px;
	margin: 0 auto !important;
	color: #4a433d !important;
	line-height: 2;
}

@media screen and (max-width: 736px) {
	.history-area {
		padding: 2.5em 1.2em;
	}

	.history-number {
		font-size: 3.5em !important;
	}

	.history-years::before,
	.history-years::after {
		width: 35px;
	}
}


/* mainimg_2Ba.png（900×279）に合わせたヘッダー */
#header {
	min-height: 279px !important;
	padding: 2.2em 1.5em !important;
}

@media screen and (max-width: 736px) {
	#header {
		min-height: 0 !important;
		aspect-ratio: 900 / 279;
		padding: 1.4em 1em !important;
	}
}


/* ヘッダーを少し高くし、画像上の霞を除去 */
#header {
	min-height: 330px !important;
	padding: 3em 1.5em !important;
}

@media screen and (max-width: 736px) {
	#header {
		min-height: 250px !important;
		aspect-ratio: auto !important;
		padding: 2em 1em !important;
	}
}


/* ヘッダー直下のナビと導入部を整理 */
#nav,
#nav.alt {
	background: #d6cec4 !important;
	border-bottom: 1px solid #bfb5aa !important;
	box-shadow: none !important;
}

#nav ul {
	min-height: 54px !important;
}

#nav ul li a {
	min-height: 54px !important;
	padding: 0.75em 0.95em !important;
	font-size: 0.88em !important;
	font-weight: 500 !important;
	color: #3f3934 !important;
}

#nav ul li a.active {
	background: #c7bdb2 !important;
	color: #2f2a26 !important;
}

#nav ul li a:hover {
	background: #cec4b9 !important;
	color: #2f2a26 !important;
}

/* TOP導入部 */
#content.main {
	background: #e7e1da !important;
}

#content > header.major:first-child {
	max-width: 900px;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 1.6em !important;
}

#content > header.major:first-child h2 {
	color: #3b3530 !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
}

#content > header.major:first-child + div {
	max-width: 880px !important;
	margin: 0 auto 3em auto !important;
	padding: 1.7em 2.2em !important;
	background: #dcd4cb !important;
	border: 1px solid #c9beb2 !important;
	border-radius: 10px !important;
	box-shadow: 0 3px 10px rgba(65,55,45,0.06);
}

#content > header.major:first-child + div p {
	color: #302c28 !important;
	line-height: 2 !important;
}

@media screen and (max-width: 736px) {
	#nav ul li a {
		min-height: 44px !important;
		padding: 0.65em 1em !important;
	}

	#content > header.major:first-child + div {
		padding: 1.4em 1.1em !important;
	}
}


/* 親子クラス：画像を文章上部へ */
.oyako-layout {
	display: block !important;
	max-width: 850px !important;
	margin: 0 auto !important;
}

.oyako-photo {
	display: block !important;
	margin: 0 auto 1.6em auto !important;
	text-align: center !important;
}

.oyako-photo img {
	display: block !important;
	width: auto !important;
	max-width: 150px !important;
	height: auto !important;
	margin: 0 auto !important;
}

.oyako-copy {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
}

.oyako-copy h2,
.oyako-copy h3 {
	text-align: center !important;
}

.oyako-copy p {
	max-width: 760px !important;
	margin: 0 auto 1.4em auto !important;
	text-align: left !important;
}

.oyako-copy .actions {
	justify-content: center !important;
	text-align: center !important;
	margin-top: 1.5em !important;
}


/* ナビ文字を上下中央に固定 */
#nav ul {
	align-items: stretch !important;
}

#nav ul li {
	display: flex !important;
	align-items: stretch !important;
}

#nav ul li a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 54px !important;
	min-height: 54px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: 1.2 !important;
}

@media screen and (max-width: 736px) {
	#nav ul li {
		display: block !important;
	}

	#nav ul li a {
		height: 44px !important;
		min-height: 44px !important;
	}
}


/* ==================================================
   PAGE SPACING REVIEW
   ページ全体の縦余白を統一
   ================================================== */

/* セクション区切りの空白を縮小 */
#content hr {
	margin: 3.2em 0 !important;
}

/* 大見出し下の余白 */
#content header.major {
	margin-bottom: 1.8em !important;
}

/* 本文段落 */
#content p {
	margin-bottom: 1.05em;
}

/* 導入部 */
#content > header.major:first-child {
	margin-bottom: 1.3em !important;
}

#content > header.major:first-child + div {
	margin-bottom: 2.2em !important;
}

/* 教育方針 */
.philosophy {
	margin-top: 2em !important;
}

.philosophy-item {
	padding-top: 2em !important;
	padding-bottom: 2em !important;
}

/* 入会案内 */
.admission-text {
	margin-bottom: 2.6em !important;
}

/* クラスカード */
#content ul.features {
	margin-top: 1.5em !important;
	margin-bottom: 0 !important;
}

#content ul.features li {
	padding-top: 2em !important;
	padding-bottom: 2em !important;
}

#content ul.features li p {
	margin-bottom: 1.1em !important;
}

/* 保護者様の声 */
.voice-area {
	padding-top: 2.4em !important;
	padding-bottom: 2.4em !important;
}

.voice-area header.major {
	margin-bottom: 1.4em !important;
}

.voice-list {
	margin-top: 1.6em !important;
	margin-bottom: 1.8em !important;
}

.voice-item {
	padding: 1.6em !important;
}

.voice-item .voice-class {
	margin-bottom: 0.2em !important;
}

.voice-area .actions {
	margin-top: 1.2em !important;
	margin-bottom: 0 !important;
}

/* 親子クラス */
.oyako-area {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.oyako-photo {
	margin-bottom: 1.2em !important;
}

.oyako-copy h2 {
	margin-bottom: 0.55em !important;
}

.oyako-copy h3 {
	margin-bottom: 1em !important;
}

.oyako-copy p {
	margin-bottom: 1em !important;
}

.oyako-copy .actions {
	margin-top: 1.1em !important;
	margin-bottom: 0 !important;
}

/* 25年 */
.history-area {
	padding-top: 2.6em !important;
	padding-bottom: 2.6em !important;
}

.history-area .major {
	margin-bottom: 1.1em !important;
}

/* お知らせ */
.information-row {
	margin-top: 2em !important;
}

.information-item {
	padding-bottom: 1.6em !important;
}

.information-item h3 {
	margin-bottom: 1.1em !important;
}

/* TOPICS */
.news-area {
	padding-top: 2.3em !important;
	padding-bottom: 2.3em !important;
}

.news-area header.major {
	margin-bottom: 1.3em !important;
}

/* スマホはさらに詰める */
@media screen and (max-width: 736px) {
	#content hr {
		margin: 2.4em 0 !important;
	}

	#content header.major {
		margin-bottom: 1.4em !important;
	}

	.voice-area,
	.history-area,
	.news-area {
		padding-top: 1.8em !important;
		padding-bottom: 1.8em !important;
	}

	.voice-list {
		margin-top: 1.2em !important;
		margin-bottom: 1.4em !important;
	}
}


/* ==================================================
   STELLAR INSPIRED SOFT GRADIENT
   幼児教室向け：淡いピンク → ブルー
   ================================================== */

body {
	background:
		linear-gradient(
			160deg,
			#e8cbd2 0%,
			#e6d7d7 22%,
			#dddcd9 45%,
			#d5dfe2 68%,
			#c9dce4 100%
		) fixed !important;
}

/* ページ外周にグラデーションを見せる */
#wrapper {
	background: transparent !important;
}

/* 本文は半透明にして外側の色をわずかに拾う */
#main {
	background: rgba(239, 234, 228, 0.94) !important;
}

/* ヘッダー画像は現在の状態を維持 */
#header {
}

/* ナビも少しだけ背景色になじませる */
#nav,
#nav.alt {
	background: rgba(220, 211, 207, 0.96) !important;
}

/* 本文内部は白くしすぎない */
#content.main {
	background: rgba(235, 230, 224, 0.94) !important;
}

/* 最下部はブルーグレーへ自然につなぐ */
#footer.simple-footer {
	background: rgba(92, 103, 108, 0.88) !important;
}


/* ==================================================
   にじみ絵風 背景
   淡いピンク・水色・黄色を柔らかく重ねる
   ================================================== */

body {
	background:
		radial-gradient(circle at 12% 10%,
			rgba(244, 181, 199, 0.78) 0%,
			rgba(244, 181, 199, 0.38) 18%,
			rgba(244, 181, 199, 0) 39%),
		radial-gradient(circle at 88% 22%,
			rgba(172, 214, 231, 0.78) 0%,
			rgba(172, 214, 231, 0.36) 20%,
			rgba(172, 214, 231, 0) 42%),
		radial-gradient(circle at 24% 54%,
			rgba(247, 219, 159, 0.62) 0%,
			rgba(247, 219, 159, 0.28) 19%,
			rgba(247, 219, 159, 0) 40%),
		radial-gradient(circle at 78% 70%,
			rgba(235, 181, 211, 0.58) 0%,
			rgba(235, 181, 211, 0.25) 19%,
			rgba(235, 181, 211, 0) 41%),
		radial-gradient(circle at 40% 92%,
			rgba(170, 215, 226, 0.66) 0%,
			rgba(170, 215, 226, 0.30) 21%,
			rgba(170, 215, 226, 0) 43%),
		linear-gradient(
			155deg,
			#f2dfe3 0%,
			#eee5df 34%,
			#e9e5d9 58%,
			#dce8eb 100%
		) !important;
	background-attachment: fixed !important;
}

#wrapper {
	background: transparent !important;
}

/* 色が本文にも薄く透けるようにする */
#main {
	background: rgba(247, 243, 238, 0.82) !important;
	box-shadow: 0 8px 30px rgba(75, 65, 60, 0.10);
}

#content.main {
	background: rgba(244, 240, 235, 0.78) !important;
}

/* 導入部も完全な単色にしない */
#content > header.major:first-child + div {
	background: rgba(232, 222, 216, 0.76) !important;
}

/* 保護者の声などの箱も背景色をわずかに透過 */
.voice-item,
.information-item {
	background-color: rgba(247, 244, 239, 0.84) !important;
}

/* ヘッダー画像は変更しない */
#header {
}


/* ==================================================
   にじみ絵を本文面へ直接表示
   ================================================== */
#main,
#content.main {
	background:
		radial-gradient(circle at 8% 8%,
			rgba(246, 174, 196, 0.42) 0%,
			rgba(246, 174, 196, 0.18) 18%,
			rgba(246, 174, 196, 0) 38%),
		radial-gradient(circle at 92% 25%,
			rgba(157, 211, 232, 0.42) 0%,
			rgba(157, 211, 232, 0.17) 20%,
			rgba(157, 211, 232, 0) 40%),
		radial-gradient(circle at 18% 52%,
			rgba(250, 216, 145, 0.34) 0%,
			rgba(250, 216, 145, 0.14) 19%,
			rgba(250, 216, 145, 0) 39%),
		radial-gradient(circle at 85% 72%,
			rgba(238, 176, 209, 0.36) 0%,
			rgba(238, 176, 209, 0.15) 20%,
			rgba(238, 176, 209, 0) 41%),
		radial-gradient(circle at 35% 96%,
			rgba(151, 207, 225, 0.38) 0%,
			rgba(151, 207, 225, 0.15) 20%,
			rgba(151, 207, 225, 0) 42%),
		linear-gradient(155deg, #f6ecec 0%, #f2ede5 48%, #e8f0f2 100%) !important;
}

/* 主要な情報ボックスは読みやすさを維持 */
#content > header.major:first-child + div,
.voice-item,
.information-item {
	background-color: rgba(250, 247, 243, 0.76) !important;
}


/* ==================================================
   にじみ絵：部分使い版
   本文は落ち着いたグレージュへ戻す
   ================================================== */

/* ページ全体は読みやすい単色 */
body {
	background: #c9c1b7 !important;
}

#main,
#content.main {
	background: #e9e4de !important;
}

/* TOP導入部：淡いピンク＋水色 */
#content > header.major:first-child + div {
	background:
		radial-gradient(circle at 12% 20%,
			rgba(218, 166, 181, 0.26) 0%,
			rgba(218, 166, 181, 0) 42%),
		radial-gradient(circle at 88% 75%,
			rgba(151, 190, 205, 0.24) 0%,
			rgba(151, 190, 205, 0) 43%),
		#ded8d1 !important;
}

/* 保護者様の声：ごく淡いピンクとベージュ */
.voice-area {
	background:
		radial-gradient(circle at 8% 15%,
			rgba(215, 161, 181, 0.22) 0%,
			rgba(215, 161, 181, 0) 38%),
		radial-gradient(circle at 92% 85%,
			rgba(205, 184, 151, 0.20) 0%,
			rgba(205, 184, 151, 0) 40%),
		#e5dfd8 !important;
	border-radius: 12px;
}

/* 声のカード自体は文字を読みやすく */
.voice-item {
	background: rgba(244, 240, 235, 0.92) !important;
}

/* 25 YEARS：ピンク・ブルー・ベージュを控えめに */
.history-area {
	background:
		radial-gradient(circle at 12% 25%,
			rgba(213, 158, 178, 0.25) 0%,
			rgba(213, 158, 178, 0) 40%),
		radial-gradient(circle at 88% 25%,
			rgba(143, 184, 202, 0.24) 0%,
			rgba(143, 184, 202, 0) 40%),
		radial-gradient(circle at 50% 100%,
			rgba(207, 185, 150, 0.20) 0%,
			rgba(207, 185, 150, 0) 42%),
		#e4ddd5 !important;
}

/* 教室からのお知らせ：薄いブルーとピンク */
.information-row {
	position: relative;
	padding: 2em 1.5em;
	border-radius: 12px;
	background:
		radial-gradient(circle at 5% 15%,
			rgba(150, 190, 207, 0.20) 0%,
			rgba(150, 190, 207, 0) 38%),
		radial-gradient(circle at 95% 85%,
			rgba(218, 166, 184, 0.20) 0%,
			rgba(218, 166, 184, 0) 38%),
		#e3ddd6;
}

.information-item {
	background: rgba(246, 242, 237, 0.94) !important;
}

/* 通常本文の文字は濃く維持 */
#content p,
#content li,
#content h2,
#content h3 {
	text-shadow: none !important;
}


/* ==================================================
   明度を一段落とす最終調整
   ================================================== */
body {
	background: #aaa29a !important;
}

#main,
#content.main {
	background: #d7d0c8 !important;
}

/* TOP導入部 */
#content > header.major:first-child + div {
	background:
		radial-gradient(circle at 12% 20%,
			rgba(184, 137, 151, 0.22) 0%,
			rgba(184, 137, 151, 0) 42%),
		radial-gradient(circle at 88% 75%,
			rgba(121, 158, 172, 0.21) 0%,
			rgba(121, 158, 172, 0) 43%),
		#cec6be !important;
}

/* 保護者様の声 */
.voice-area {
	background:
		radial-gradient(circle at 8% 15%,
			rgba(181, 132, 149, 0.19) 0%,
			rgba(181, 132, 149, 0) 38%),
		radial-gradient(circle at 92% 85%,
			rgba(169, 148, 119, 0.18) 0%,
			rgba(169, 148, 119, 0) 40%),
		#d2cbc3 !important;
}

.voice-item {
	background: rgba(229, 223, 216, 0.94) !important;
}

/* 25 YEARS */
.history-area {
	background:
		radial-gradient(circle at 12% 25%,
			rgba(179, 129, 146, 0.21) 0%,
			rgba(179, 129, 146, 0) 40%),
		radial-gradient(circle at 88% 25%,
			rgba(117, 153, 169, 0.20) 0%,
			rgba(117, 153, 169, 0) 40%),
		radial-gradient(circle at 50% 100%,
			rgba(168, 148, 118, 0.17) 0%,
			rgba(168, 148, 118, 0) 42%),
		#d1c9c0 !important;
}

/* お知らせ */
.information-row {
	background:
		radial-gradient(circle at 5% 15%,
			rgba(120, 158, 174, 0.18) 0%,
			rgba(120, 158, 174, 0) 38%),
		radial-gradient(circle at 95% 85%,
			rgba(181, 133, 150, 0.18) 0%,
			rgba(181, 133, 150, 0) 38%),
		#d1cac2 !important;
}

.information-item {
	background: rgba(230, 224, 217, 0.95) !important;
}

/* 本文文字は濃いまま維持 */
#content p,
#content li {
	color: #332f2b !important;
}


/* ==================================================
   眩しさ低減：低明度・低彩度版
   ================================================== */
body {
	background: #827b75 !important;
}

#main,
#content.main {
	background: #c5bdb5 !important;
}

/* 通常の本文面を一段暗いグレージュへ */
#content {
	color: #292623 !important;
}

#content > header.major:first-child + div {
	background:
		radial-gradient(circle at 12% 20%,
			rgba(151, 108, 121, 0.18) 0%,
			rgba(151, 108, 121, 0) 42%),
		radial-gradient(circle at 88% 75%,
			rgba(91, 128, 142, 0.18) 0%,
			rgba(91, 128, 142, 0) 43%),
		#bdb4ac !important;
}

/* 保護者様の声 */
.voice-area {
	background:
		radial-gradient(circle at 8% 15%,
			rgba(151, 105, 120, 0.16) 0%,
			rgba(151, 105, 120, 0) 38%),
		radial-gradient(circle at 92% 85%,
			rgba(137, 118, 91, 0.15) 0%,
			rgba(137, 118, 91, 0) 40%),
		#c0b7af !important;
}

.voice-item {
	background: rgba(210, 202, 194, 0.96) !important;
}

/* 25 YEARS */
.history-area {
	background:
		radial-gradient(circle at 12% 25%,
			rgba(148, 104, 118, 0.17) 0%,
			rgba(148, 104, 118, 0) 40%),
		radial-gradient(circle at 88% 25%,
			rgba(91, 126, 141, 0.17) 0%,
			rgba(91, 126, 141, 0) 40%),
		#bfb6ad !important;
}

/* お知らせ */
.information-row {
	background:
		radial-gradient(circle at 5% 15%,
			rgba(91, 127, 143, 0.16) 0%,
			rgba(91, 127, 143, 0) 38%),
		radial-gradient(circle at 95% 85%,
			rgba(150, 106, 121, 0.16) 0%,
			rgba(150, 106, 121, 0) 38%),
		#bfb7af !important;
}

.information-item {
	background: rgba(211, 203, 195, 0.96) !important;
}

#content p,
#content li {
	color: #292623 !important;
}


/* ==================================================
   にじみ絵：装飾だけに限定
   本文面は単色で可読性を優先
   ================================================== */

body {
	background: #817a74 !important;
}

#main,
#content.main {
	background: #c8c0b8 !important;
}

/* 通常本文は完全な単色 */
#content > header.major:first-child + div,
.voice-area,
.history-area,
.information-row {
	position: relative;
	overflow: hidden;
	background: #bdb5ad !important;
}

/* にじみは上端・角だけに置く */
#content > header.major:first-child + div::before,
.voice-area::before,
.history-area::before,
.information-row::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 14px;
	background:
		linear-gradient(
			90deg,
			rgba(155, 105, 121, 0.72) 0%,
			rgba(155, 105, 121, 0.30) 18%,
			rgba(151, 132, 102, 0.24) 42%,
			rgba(91, 130, 146, 0.30) 70%,
			rgba(91, 130, 146, 0.68) 100%
		);
	filter: blur(4px);
}

/* 右下にも小さな色のにじみ */
#content > header.major:first-child + div::after,
.voice-area::after,
.history-area::after,
.information-row::after {
	content: "";
	position: absolute;
	z-index: 0;
	right: -35px;
	bottom: -35px;
	width: 115px;
	height: 115px;
	border-radius: 50%;
	background: rgba(117, 153, 168, 0.16);
	filter: blur(22px);
}

/* 内容は装飾より前面へ */
#content > header.major:first-child + div > *,
.voice-area > *,
.history-area > *,
.information-row > * {
	position: relative;
	z-index: 1;
}

/* カードも明るくしすぎない */
.voice-item,
.information-item {
	background: #cec6be !important;
}

/* 文字は濃く固定 */
#content p,
#content li,
#content h2,
#content h3 {
	color: #282522 !important;
}


/* ナビゲーション仕上げ */
#nav,
#nav.alt {
	background: #bdb5ad !important;
	border-top: 0 !important;
	border-bottom: 1px solid #a79f98 !important;
	box-shadow: none !important;
}

#nav ul li a {
	color: #302c29 !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
}

#nav ul li a.active {
	background: #aaa19a !important;
	color: #211f1d !important;
}

#nav ul li a:hover {
	background: #b1a8a1 !important;
	color: #211f1d !important;
}


/* ==================================================
   最終背景：淡いピンク → グレージュ → 淡いブルー
   参考スクリーンショット再現
   ================================================== */

/* ページ全体の色の流れ */
body {
	background:
		linear-gradient(
			180deg,
			#ddd0d3 0%,
			#d8ced0 18%,
			#d3cec8 44%,
			#c8cac8 66%,
			#bcc9cf 100%
		) fixed !important;
}

/* Stellarの外周は透明 */
#wrapper {
	background: transparent !important;
}

/* 本文全体も同じ流れを見せる */
#main,
#content.main {
	background:
		linear-gradient(
			180deg,
			rgba(222, 210, 214, 0.96) 0%,
			rgba(216, 209, 207, 0.96) 24%,
			rgba(207, 204, 198, 0.96) 52%,
			rgba(196, 202, 202, 0.96) 74%,
			rgba(184, 199, 205, 0.96) 100%
		) !important;
}

/* ナビは淡いグレージュ */
#nav,
#nav.alt {
	background: rgba(205, 203, 194, 0.96) !important;
	border-bottom: 1px solid rgba(120, 115, 108, 0.25) !important;
}

/* 各カード・囲みは背景の色を少し拾う */
#content > header.major:first-child + div,
.philosophy-item,
#content ul.features li,
.voice-area,
.voice-item,
.history-area,
.information-item,
.news-area {
	background: rgba(238, 234, 228, 0.72) !important;
	border-color: rgba(120, 112, 103, 0.22) !important;
	box-shadow: none !important;
}

/* にじみ・帯など後付け装飾は停止 */
#content > header.major:first-child + div::before,
#content > header.major:first-child + div::after,
.voice-area::before,
.voice-area::after,
.history-area::before,
.history-area::after,
.information-row::before,
.information-row::after {
	content: none !important;
	display: none !important;
}

/* お知らせエリア自体は透明にして全体グラデを見せる */
.information-row {
	background: transparent !important;
}

/* 文字は濃く維持 */
#content p,
#content li,
#content h2,
#content h3 {
	color: #302d2a !important;
	text-shadow: none !important;
}

/* フッターは青みのあるグレーへ自然につなぐ */
#footer.simple-footer {
	background: rgba(87, 94, 98, 0.92) !important;
}

/* ヘッダー画像は現在のまま */
#header {
}


/* ==================================================
   背景色調整：ピンクとブルーをさらに淡く
   ================================================== */

body {
	background:
		linear-gradient(
			180deg,
			#eee3e6 0%,
			#e9e1e1 18%,
			#ddd8d2 45%,
			#d8d9d5 67%,
			#d6e1e6 100%
		) fixed !important;
}

#main,
#content.main {
	background:
		linear-gradient(
			180deg,
			rgba(236, 227, 229, 0.95) 0%,
			rgba(230, 224, 221, 0.95) 26%,
			rgba(218, 213, 207, 0.95) 53%,
			rgba(213, 216, 214, 0.95) 74%,
			rgba(207, 220, 226, 0.95) 100%
		) !important;
}

#nav,
#nav.alt {
	background: rgba(218, 214, 207, 0.96) !important;
}

/* カード類は少し透ける程度にして背景になじませる */
#content > header.major:first-child + div,
.philosophy-item,
#content ul.features li,
.voice-area,
.voice-item,
.history-area,
.information-item,
.news-area {
	background: rgba(241, 238, 233, 0.76) !important;
	border-color: rgba(120, 112, 103, 0.18) !important;
}


#content ul.features li .class-card-link span.button {
	color: #665548 !important;
	-webkit-text-fill-color: #665548 !important;
}


/* ==================================================
   右端・補助リンクタブ
   通常時は細く、マウスを重ねると左へ広がる
   ================================================== */
.side-link-tabs {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 7px;
	pointer-events: none;
}

.side-link-tabs a {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 58px;
	height: 46px;
	margin: 0;
	padding: 0 15px;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;

	background: rgba(245, 235, 238, 0.86) !important;
	border: 1px solid rgba(105, 88, 83, 0.24);
	border-right: 0;
	border-radius: 13px 0 0 13px;

	color: #493d38 !important;
	-webkit-text-fill-color: #493d38 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	font-size: 0.88em;
	font-weight: 600;
	line-height: 1;

	box-shadow: 0 3px 12px rgba(70, 58, 54, 0.10);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);

	transition:
		width 0.28s ease,
		background-color 0.28s ease,
		box-shadow 0.28s ease;
}

/* 通常時は先頭の短い表示だけ見せる */
.side-link-tabs a .tab-short {
	display: inline-block;
	min-width: 28px;
	text-align: center;
	margin-right: 14px;
	font-size: 0.90em;
	letter-spacing: 0.02em;
}

.side-link-tabs a .tab-label {
	display: inline-block;
	opacity: 0;
	transition: opacity 0.18s ease 0.06s;
}

/* hoverで左方向へ展開 */
.side-link-tabs a:hover,
.side-link-tabs a:focus-visible {
	width: 205px;
	background: rgba(222, 211, 229, 0.94) !important;
	color: #382f2b !important;
	-webkit-text-fill-color: #382f2b !important;
	box-shadow: 0 5px 16px rgba(70, 58, 54, 0.16);
}

.side-link-tabs a:hover .tab-label,
.side-link-tabs a:focus-visible .tab-label {
	opacity: 1;
}

/* 4本をわずかに色分け。ただしサイトの淡色系に統一 */
.side-link-tabs a:nth-child(2) {
	background: rgba(239, 231, 218, 0.88) !important;
}

.side-link-tabs a:nth-child(3) {
	background: rgba(225, 235, 238, 0.88) !important;
}

.side-link-tabs a:nth-child(4) {
	background: rgba(235, 225, 234, 0.88) !important;
}

/* タッチ端末ではhover展開に頼らず、文字を読める横型にする */
@media screen and (max-width: 736px) {
	.side-link-tabs {
		top: auto;
		right: 0.6em;
		bottom: 0.8em;
		transform: none;
		gap: 5px;
	}

	.side-link-tabs a,
	.side-link-tabs a:hover,
	.side-link-tabs a:focus-visible {
		width: 132px;
		height: 38px;
		padding: 0 10px;
		border-right: 1px solid rgba(105, 88, 83, 0.24);
		border-radius: 10px;
		font-size: 0.76em;
	}

	.side-link-tabs a .tab-short {
		min-width: 24px;
		margin-right: 7px;
	}

	.side-link-tabs a .tab-label {
		opacity: 1;
	}
}



/* ==================================================
   メインナビ：手しごとワークショップ追加対応
   ================================================== */
#nav > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}

#nav > ul > li > a {
	padding-left: 1.05em;
	padding-right: 1.05em;
	white-space: nowrap;
}

/* 関連教室・プログラムはフッター直前の補助導線 */
.sub-navigation-inner a {
	color: #493d38 !important;
	-webkit-text-fill-color: #493d38 !important;
	font-weight: 600;
}

@media screen and (max-width: 1100px) and (min-width: 737px) {
	#nav > ul > li > a {
		padding-left: 0.72em;
		padding-right: 0.72em;
		font-size: 0.91em;
	}
}



/* 追従3タブ：アクセス・ブログ・年間予定 */
.side-link-tabs a {
	width: 62px;
}

.side-link-tabs a:hover,
.side-link-tabs a:focus-visible {
	width: 178px;
}

.side-link-tabs a .tab-short {
	min-width: 32px;
	margin-right: 13px;
}

@media screen and (max-width: 736px) {
	.side-link-tabs a,
	.side-link-tabs a:hover,
	.side-link-tabs a:focus-visible {
		width: 126px;
	}
}



/* ==================================================
   最下部：TOPへ戻る
   ================================================== */
.page-top-return {
	width: 100%;
	margin: 0;
	padding: 1.4em 1em 1.6em 1em;
	text-align: center;
	background: rgba(236, 228, 224, 0.72);
	border-top: 1px solid rgba(105, 92, 84, 0.16);
}
.page-top-return a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	padding: 0.8em 1.4em;
	border: 1px solid rgba(95, 78, 69, 0.30);
	border-radius: 999px;
	background: rgba(255,255,255,0.42);
	color: #493d38 !important;
	-webkit-text-fill-color: #493d38 !important;
	font-weight: 600;
	text-decoration: none !important;
	text-shadow: none !important;
}
.page-top-return a:hover {
	background: rgba(220, 208, 226, 0.62);
	border-color: rgba(126, 104, 120, 0.40);
	color: #382f2b !important;
	-webkit-text-fill-color: #382f2b !important;
}
@media screen and (max-width: 736px) {
	.page-top-return { padding: 1.1em 0.8em 1.3em 0.8em; }
	.page-top-return a { min-width: 140px; padding: 0.75em 1.2em; font-size: 0.92em; }
}

html, body, #wrapper {
    background:
        radial-gradient(circle at 4% 12%, rgba(247,187,202,.62) 0%, rgba(247,187,202,.30) 17%, rgba(247,187,202,0) 38%),
        radial-gradient(circle at 96% 19%, rgba(182,218,232,.52) 0%, rgba(182,218,232,.24) 19%, rgba(182,218,232,0) 40%),
        radial-gradient(circle at 8% 55%, rgba(248,216,176,.48) 0%, rgba(248,216,176,.22) 19%, rgba(248,216,176,0) 41%),
        radial-gradient(circle at 92% 74%, rgba(175,211,231,.58) 0%, rgba(175,211,231,.26) 21%, rgba(175,211,231,0) 43%),
        radial-gradient(circle at 13% 91%, rgba(240,186,199,.44) 0%, rgba(240,186,199,.19) 20%, rgba(240,186,199,0) 42%),
        linear-gradient(155deg, #f6e8e8 0%, #f5eee7 30%, #f2eee6 52%, #edf1ee 72%, #e5eef4 100%) !important;
    background-attachment: fixed !important;
}

#main, #content, #content.main {
    background: transparent !important;
}

.philosophy-item, .voice-item, .class-card, .information-row, .history-area, .admission-box {
    background-color: rgba(255,255,255,.54) !important;
}

#nav {
    background: rgba(239,229,216,.88) !important;
}

#footer {
    background: rgba(231,219,215,.52) !important;
}

/* 共通補助ナビ：旧asideの主要導線を全ページ共通で使える形に整理 */
.sub-navigation {
    width: 100%;
    margin: 0;
    padding: 1.15em 1.25em;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(239,216,222,.92) 0%, rgba(232,224,218,.94) 50%, rgba(218,229,235,.92) 100%) !important;
    border-top: 1px solid rgba(105,92,84,.20);
    border-bottom: 1px solid rgba(105,92,84,.20);
}
.sub-navigation-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.sub-navigation-inner a {
    display: block;
    padding: .55em 1.05em;
    color: #433a34 !important;
    -webkit-text-fill-color: #433a34 !important;
    font-size: .92em;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none !important;
    text-shadow: none !important;
    background: transparent !important;
    border-right: 1px solid rgba(85,72,64,.22);
}
.sub-navigation-inner a:last-child { border-right: 0; }
.sub-navigation-inner a:hover {
    color: #312a26 !important;
    -webkit-text-fill-color: #312a26 !important;
    background: rgba(210,190,214,.48) !important;
}
@media screen and (max-width: 736px) {
    .sub-navigation { padding: .9em .7em; }
    .sub-navigation-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sub-navigation-inner a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: .6em .45em;
        font-size: .86em;
        text-align: center;
        border-right: 0;
        border-bottom: 1px solid rgba(85,72,64,.18);
    }
}

.fixed-access-link:hover {
    background: rgba(211, 226, 235, 0.94);
    color: #302a26 !important;
    -webkit-text-fill-color: #302a26 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(64, 54, 48, 0.20);
}

.fixed-access-link:focus-visible {
    outline: 2px solid #76675d;
    outline-offset: 3px;
}

@media screen and (max-width: 736px) {
    .fixed-access-link {
        right: 12px;
        bottom: 12px;
        min-width: 108px;
        min-height: 44px;
        padding: 0.65em 0.95em;
        font-size: 0.88em;
    }
}

.voice-item .voice-class {
	text-align: center !important;
}

/* 保護者様の声：リンクボタン文字サイズ */
.voice-area .actions .button {
	font-size: 1.1em !important;
}

/* 教室からのお知らせ：見出しと内容の間隔調整 */
/* 教室からのお知らせ：3行をコンパクトに */
.information-item h3 {
	margin: 0 1.2em 0.15em 1.2em !important;
	line-height: 1.35 !important;
}

.information-item p {
	margin: 0 1em 0.45em 1em !important;
	line-height: 1.5 !important;
}

.information-item > a.button {
	margin-top: 0.4em !important;
}


/* お知らせ → TOPICS の間隔を大幅に縮める */
.information-row + hr {
	margin: 0.5em 0 !important;
}

/* 教室からのお知らせ → TOPICS の間隔を縮める */
.information-row {
	padding-bottom: 0.4em !important;
	margin-bottom: 0 !important;
}

.information-row + hr {
	margin: 0.4em 0 !important;
}



/* ヘッダー文字を背景から少し浮かせる */
#header h1,
#header p {
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.65),
		0 0 12px rgba(0, 0, 0, 0.35) !important;
}

#header h1 {
	font-weight: 600 !important;
}


/* ヘッダーのキャッチコピーを明確に表示 */
#header > p {
	font-size: 1.15em !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	line-height: 1.9 !important;
	color: #ffffff !important;
	text-shadow:
		0 2px 5px rgba(0, 0, 0, 0.85),
		0 0 14px rgba(0, 0, 0, 0.65) !important;
}

/* ヘッダータイトルを大きく */
#header h1 {
	font-size: 2.5em !important;
}

/* ==================================================
   INDEX HEADER IMAGE DISPLAY FINAL
   画像ファイル名はHTML側で指定
   少人数クラスと同じ表示方式
   ================================================== */
#header {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #d8d1c7 !important;
    min-height: min(66.6667vw, 760px) !important;
    height: auto !important;
    overflow: visible !important;
}

#header h1,
#header p {
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media screen and (max-width: 736px) {
    #header {
        min-height: 66.6667vw !important;
        height: auto !important;
        padding: 1.4em 1em !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}