/* 親子クラス専用CSS */

/* 創造教室こびとのおうち
   乳児 親子クラス専用CSS
   旧oyako.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 {
		text-align: center;
		padding: 4.5em 2em 4em 2em;

		background:
			linear-gradient(
				rgba(87, 73, 62, 0.72),
				rgba(87, 73, 62, 0.72)
			),
			var(--oyako-header-image);

		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 2px 7px rgba(45, 35, 32, 0.72), 0 1px 2px rgba(45, 35, 32, 0.90);
	}

	#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;
	}

	#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;
	}

	.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;
	}

	.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;
	}

	#content a:not(.button) {
		color: #82664f;
	}

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

	#content a.button {
		color: #665548 !important;
	}

	#content a.button:hover {
		color: #856a54 !important;
	}

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

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

	#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;
	}

	@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;
	}

	.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;
		}
	}

	.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 {
		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 {
		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 {
		min-height: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 2.2em 2em 2.4em 2em;
		background:
			linear-gradient(
				rgba(62, 53, 46, 0.50),
				rgba(62, 53, 46, 0.62)
			),
			var(--oyako-header-image);
		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;
	}

	#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;
	}

	#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;
	}

	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;
		background:
			linear-gradient(rgba(48,42,37,0.72), rgba(48,42,37,0.72)),
			var(--oyako-header-image) center center / cover no-repeat !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;
	}

	#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;
	}

	.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;
		}
	}

	#header {
		min-height: 279px !important;
		padding: 2.2em 1.5em !important;
		background:
			linear-gradient(rgba(48,42,37,0.42), rgba(48,42,37,0.42)),
			var(--oyako-header-image) center center / cover no-repeat !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;
		background: var(--oyako-header-image) center center / cover no-repeat !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;
	}

	#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;
		}
	}

	#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;
	}

	.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;
	}

	.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;
		}
	}

	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 {
		background: var(--oyako-header-image) center center / cover no-repeat !important;
	}

	#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;
	}

	.voice-item {
		background: rgba(244, 240, 235, 0.92) !important;
	}

	.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;
	}

	#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;
	}

	.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;
	}

	.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;
	}

	#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 {
		background: var(--oyako-header-image) center center / cover no-repeat !important;
	}

	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;
	}

	.philosophy {
		gap: 18px !important;
		margin-top: 2.2em !important;
	}

	.philosophy-item {
		padding: 2.1em 1.8em !important;
		background: rgba(239, 235, 229, 0.76) !important;
		border: 1px solid rgba(150, 138, 126, 0.20) !important;
		border-radius: 12px !important;
		box-shadow: none !important;
	}

	.philosophy-item h3 {
		margin-bottom: 0.8em !important;
	}

	.philosophy-item p {
		line-height: 1.9 !important;
	}

	.admission-text {
		max-width: 780px !important;
		margin: 0 auto 2.2em auto !important;
	}

	.admission-text p {
		margin-bottom: 0.9em !important;
	}

	#content ul.features {
		gap: 18px !important;
		margin-top: 1.4em !important;
	}

	#content ul.features li {
		width: 270px !important;
		padding: 1.8em 1.35em !important;
		background: rgba(239, 235, 229, 0.78) !important;
		border: 1px solid rgba(150, 138, 126, 0.20) !important;
		border-radius: 12px !important;
		box-shadow: none !important;
	}

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

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

	#content ul.features li .button,
	.admission-text + .actions .button {
		min-width: 132px;
	}

	#content hr {
		margin: 2.8em 0 !important;
	}

	.schedule-area {
		max-width: 820px;
		margin: 2em auto 3em;
	}

	.schedule-box {
		margin: 0 0 1.5em;
		padding: 2em 2.2em;
		background: rgba(241, 238, 233, 0.82);
		border: 1px solid rgba(110, 100, 92, 0.25);
		border-radius: 12px;
	}
.course-row {
		display: grid;
		grid-template-columns: 100px 1fr;
		gap: 1.3em;
		padding: 1em 0;
		border-bottom: 1px solid rgba(110, 100, 92, 0.16);
		text-align: left;
	}

	.course-row p {
		margin: 0 !important;
	}

	.class-info > div {
		display: grid;
		grid-template-columns: 100px 1fr;
		gap: 1.3em;
		padding: 0.9em 0;
		border-bottom: 1px solid rgba(110, 100, 92, 0.16);
		text-align: left;
	}

	.class-info dt {
		font-weight: 600;
		color: #574943;
	}

	.class-info dd {
		margin: 0;
	}

	.schedule-note {
		margin-top: 1.5em !important;
		padding: 1em;
		background: rgba(255, 255, 255, 0.42);
		border-radius: 7px;
		text-align: center !important;
	}

	.passport {
		margin-top: 1.5em;
		padding: 1.2em;
		background: rgba(255, 255, 255, 0.42);
		border-radius: 7px;
		text-align: center;
	}

	.application-box {
		text-align: center;
	}

	.application-box p {
		text-align: center !important;
	}

	@media screen and (max-width: 600px) {
		.schedule-box {
			padding: 1.5em 1.2em;
		}

		.course-row,
		.class-info > div {
			grid-template-columns: 1fr;
			gap: 0.25em;
		}
	}

#content.main,
	#content.main p,
	#content.main td {
		color: #45413f;
	}

	#content.main h2 {
		color: #4a403c;
	}
#content.main strong,
	#content.main b {
		color: #403b38;
	}

	#content.main a:not(.button) {
		color: #72534d;
	}

	#content.main a:not(.button):hover {
		color: #513b37;
	}

/* 親子クラス：外部CSS化後の最終保護 */
#header {
	background-image: var(--oyako-header-image) !important;
}