@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');


/**************************
property reset,tool
**************************/

html {
	font-size: 10px;
}

* {
	margin: 0;
	padding: 0;
	line-height: 1;
	box-sizing: border-box;
}

ul,
li {
	list-style-type: none;
}

img {
	border: 0;
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

table,
th,
td {
	border: none;
}

table,
table th,
table td {
	border-collapse: collapse;
}

#contents td.col_blue {
	background-color: #e5f7ff;
	font-size: 120%;
	font-weight: 900;
}

br.clear,
p.clear {
	clear: both;
	font-size: 0;
	line-height: 0;
	height: 0;
}

#contents p.clear {
	clear: both;
	font-size: 0;
	line-height: 0;
	height: 0;
	margin: 0 1em 0;
}

.clear {
	clear: both;
}

a {
	overflow: hidden;
	color: #5299D3;
	transition: 0.3s;
}

a:visited {
	color: #551a8b;
}

a:active {
	color: #ee0000;
}

.clearfix:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

a:hover img {
	opacity: 0.8;
	-ms-filter: "alpha(opacity=80)";
	filter: alpha(opacity=80);
}

.spShow {
	display: none;
}

.overflow {
	overflow: hidden;
}

.relative {
	position: relative;
}

.fadein {
	opacity: 0;
	transform: translateY(100px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}

.fadein.show {
	opacity: 1;
	transform: translateY(0);
}

/**************************
Layout
**************************/

.maruL {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 300;
}

.maruR {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 400;
}

.maruM {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 500;
}

.maruB {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
}

.maruEB {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 900;
}


.goL {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 200;
}

.goM {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
}

.goSB {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
}

.goB {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
}

.goEB {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
}


body {
	text-align: center;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: 1.6rem;
	color: #323333;
}

header {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	padding: 30px 0;
	display: flex;
	justify-content: space-between;
}

#ids {
	display: flex;
	align-items: center;
	gap: 0 45px;
}

#phoneArea {
	display: flex;
	align-items: center;
	text-align: left;
	gap: 0 10px;
}

#phoneArea p {
	font-weight: 400;
}

#phoneArea p span {
	display: inline-block;
	font-weight: 200;
	font-size: 1.2rem;
	padding-top: 6px;
}

#phoneArea #phone {
	font-weight: 600;
	font-size: 3rem;
}

#phoneArea #phone span {
	font-weight: 500;
	font-size: 2rem;
}


footer {
	padding: 0 0 100px;
	background: url(images/pattern.png);
}

#footerInside {
	background: #FFF;
	padding: 115px 0 0;
}

#footerInside .w1000 {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 78px;
	display: flex;
	gap: 0 100px;
}

#footerInside .flex {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
	margin-left: 50px;
}

#footerInside .flex img {
	width: auto;
	height: 68px;
}

#footerRight {
	text-align: left;
}

#footerRight * {
	line-height: 1.5;
}

#footerRight h2 {
	font-size: 1.4rem;
	font-weight: 400;
	margin-bottom: 10px;
}

#footerRight p strong {
	font-weight: 600;
	font-size: 1.6rem;
}

#footerRight p {
	font-size: 1.4rem;
	margin-bottom: 15px;
}

#footerRight p a {
	color: #323333;
	text-decoration: none;
	font-size: 2.7rem;
	font-weight: 700;
	margin: 0 5px;
}

#footerMenu {
	display: flex;
	justify-content: center;
	gap: 0 28px;
	font-size: 1.5rem;
	margin-bottom: 45px;
}

#footerMenu a {
	color: #343333;
	text-decoration: none;
}

#footerMenu a:hover {
	color: #b71f27;
}

#copyright {
	font-size: 1.3rem;
	font-weight: 200;
	padding-bottom: 42px;
}

#toPageTop {
	position: fixed;
	bottom: 50px;
	right: 20px;
	cursor: pointer;
	background: none;
	border: none;
}

/**********************************************/

.linkBox {
	cursor: pointer;
}

#sec1 {
	background: #FCF6E0;
	padding: 68px 0;
}

#menu {
	margin: 100px auto 0;
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1024px;
}

#menu>div {
	width: 251px;
	height: 202px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: 35px;
}

#menu1 {
	background: url(images/course1.png) no-repeat center center;
	background-size: cover;
}

#menu2 {
	background: url(images/course2.png) no-repeat center center;
	background-size: cover;
}

#menu3 {
	background: url(images/course3.png) no-repeat center center;
	background-size: cover;
}

#menu4 {
	background: url(images/course4.png) no-repeat center center;
	background-size: cover;
}

#menu1::before,
#menu2::before {
	content: '';
	display: block;
	width: 43px;
	height: 49px;
	background-image: url(images/iconPapa.svg);
	background-size: cover;
	position: absolute;
	top: -10px;
	left: -3px;
	filter: drop-shadow(2px 2px 4px #9e9e9fbb);
}

#menu3::before,
#menu4::before {
	content: '';
	display: block;
	width: 41px;
	height: 47px;
	background-image: url(images/iconMama.svg);
	background-size: cover;
	position: absolute;
	top: -4px;
	right: -3px;
	filter: drop-shadow(2px 2px 4px #9e9e9fbb);
}

#menu1::after,
#menu2::after,
#menu3::after,
#menu4::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 9px solid transparent;
	border-left: 9px solid transparent;
	border-top: 10px solid #4b8cca;
	border-bottom: 0;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}

#menu2::after {
	border-top: 10px solid #5A9B81;
}

#menu3::after {
	border-top: 10px solid #D76953;
}

#menu4::after {
	border-top: 10px solid #CE7D10;
}

#menu p {
	line-height: 1.4;
}

#menu p a {
	color: #343333;
	text-decoration: none;
}

#menu .money {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 400;
	font-size: 2.4rem;
}

#menu .money span {
	font-size: 5.4rem;
	font-weight: 500;
}

#menu1 .money {
	color: #4b8cca;
}

#menu2 .money {
	color: #5A9B81;
}

#menu3 .money {
	color: #D76953;
}

#menu4 .money {
	color: #CE7D10;
}

/**********************************************/

#sec2 {
	background: url(images/pattern.png);
	padding: 65px 0;
}

.backBrown {
	padding: 70px 0 35px;
	background: #966436;
}

.backBrown p {
	color: #FFF;
	line-height: 1.6;
	margin-bottom: 30px;
	font-size: 2rem;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 400;
}

.backBrown p.small {
	font-size: 1.5rem;
	font-weight: 300;
}

#overview {
	background: #FFF8E2;
	width: 100%;
	max-width: 1000px;
	margin: 70px auto 0;
	border-radius: 20px;
	padding: 65px 50px 45px;
	position: relative;
}

#overview::before {
	content: '';
	display: block;
	width: 58px;
	height: 61px;
	background-image: url(images/hiyoko1.svg);
	background-size: cover;
	position: absolute;
	top: -30px;
	left: 18%;
}

#overview::after {
	content: '';
	display: block;
	width: 108px;
	height: 57px;
	background-image: url(images/hiyoko2.svg);
	background-size: cover;
	position: absolute;
	top: -30px;
	right: 18%;
}

#overview h2 {
	margin-bottom: 20px;
}

#overview p+h2 {
	margin-top: 45px;
}

#overview p {
	font-size: 23px;
	font-weight: 500;
	line-height: 1.6;
	margin-bottom: 10px;
}

#overview p.small {
	font-size: 1.8rem;
	font-weight: 300;
}

#overview .left {
	width: 42em;
	margin: 0 auto 20px;
}

#overview .left p {
	text-align: left;
	margin-bottom: 10px;
}

p.comment {
	text-indent: -1em;
	margin-left: 1em;
}



/**********************************************/

#sec3 {
	background: #FCF6E0;
	padding: 94px 0 40px;
}

#sec3 h2 {
	margin-bottom: 45px;
	font-size: 2.8rem;
	font-weight: 500;
}

#sec3>div {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 90px;
	padding: 45px 30px 50px;
	background: #FFF;
	border-radius: 20px;
	position: relative;
}

#course1::before,
#course2::before {
	content: '';
	display: block;
	width: 123px;
	height: 140px;
	background-image: url(images/iconPapaL.svg);
	background-size: cover;
	filter: drop-shadow(2px 2px 3px #9e9e9fbb);
	position: absolute;
	top: -35px;
	left: 40px;
}

#course3::before,
#course4::before {
	content: '';
	display: block;
	width: 123px;
	height: 142px;
	background-image: url(images/iconMamaL.svg);
	background-size: cover;
	filter: drop-shadow(2px 2px 3px #9e9e9fbb);
	position: absolute;
	top: -35px;
	right: 40px;
}

#course1 {
	border: 16px solid #6C9DCC;
}

#course2 {
	border: 16px solid #7FB7A1;
}

#course3 {
	border: 16px solid #E9836E;
}

#course4 {
	border: 16px solid #D28621;
}

#sec3 h3 {
	margin-bottom: 30px;
}

#sec3 p.jugyoin {
	font-size: 2.2rem;
	margin-bottom: 50px;
}

.column {
	display: flex;
	justify-content: space-between;
	gap: 0 45px;
}

.column>div {
	text-align: left;
	margin-bottom: 60px;
}

.column>div:first-child {
	width: calc((100% - 45px) / 9 * 4);
}

.column>div:last-child {
	width: calc((100% - 45px) / 9 * 5);
}

#sec3 h4 {
	color: #966436;
	font-size: 2.4rem;
	font-weight: 400;
	background: url(images/bulletHiyoko.svg) no-repeat left center;
	padding: 5px 0 5px 45px;
	margin-bottom: 12px;
}

#sec3 h4 span {
	font-size: 1.8rem;
}

#sec3 ul {
	margin-bottom: 24px;
	margin-left: 25px;
}

#sec3 ul li {
	line-height: 1.4;
	background: url(images/liStandard.svg) no-repeat left top 7px;
	padding-left: 22px;
	font-size: 1.8rem;
}

#sec3 .column p {
	margin-left: 25px;
	margin-bottom: 6px;
}

#sec3 .column p.money {
	font-size: 2.5rem;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 500;

}

#sec3 .column p.money span {
	font-size: 3.8rem;
}

#sec3 .column p.money span.small {
	color: #343333;
	font-size: 1.6rem;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 300;

}

#sec3 #course1 .column p.money {
	color: #4B8CCA;
}

#sec3 #course2 .column p.money {
	color: #5A9B81;
}

#sec3 #course3 .column p.money {
	color: #D76953;
}

#sec3 #course4 .column p.money {
	color: #CE7D10;
}

#sec3 p.toDetail a {
	display: inline-block;
	background: #966436;
	color: #FFF;
	padding: 17px 50px;
	border-radius: 30px;
	font-size: 2.0rem;
	text-decoration: none;
	filter: drop-shadow(2px 2px 3px #9e9e9fbb);
}

.textRed {
	color: #F00;
}

a.phone {
	color: #323333;
	text-decoration: none;
	pointer-events: none;
}

/**********************************************/


/* 599 */
@media screen and (max-width:599px) {
	html {
		font-size: 10px;
	}

	body {
		min-width: 100%;
		-webkit-text-size-adjust: 100%;
		padding: 0;
	}

	body * {
		max-width: 100%;
	}

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

	.pcShow {
		display: none !important;
	}

	.spShow {
		display: block;
	}

	br.spShow {
		display: initial;
	}

	header {
		padding: 15px 10px;
		gap: 0 20px;
	}

	#ids {
		gap: 0 10px;
	}

	#phoneArea {
		display: block;
		text-align: center;
		background: #a26b39;
		color: #FFF;
		padding: 8px 10px;
		border-radius: 10px;
	}

	#phoneArea p {
		font-size: 1.3rem;
		white-space: nowrap;
		margin-bottom: 6px;
	}

	#phoneArea p.spShow {
		font-size: 0.9rem;
		font-weight: 300;
		margin-bottom: 0;
	}

	#phoneArea #phone {
		font-size: 2rem
	}

	#phoneArea #phone span {
		font-size: 1.4rem;
	}

	#phoneArea #phone a.phone {
		color: #FFF;
	}

	#sec1 {
		padding: 50px 20px;
	}

	#menu {
		margin: 50px auto 0;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 10px;
	}

	#menu>div {
		width: 162px;
		height: 132px;
		padding-bottom: 22px;
	}

	#menu1 {
		order: 1;
	}

	#menu2 {
		order: 3;
	}

	#menu3 {
		order: 2;
	}

	#menu4 {
		order: 4;
	}

	#menu1::before,
	#menu2::before {
		content: '';
		display: block;
		width: 31px;
		height: 35px;
	}

	#menu3::before,
	#menu4::before {
		content: '';
		display: block;
		width: 31px;
		height: 36px;
	}

	#menu .money {
		font-size: 1.8rem;
		font-weight: 500;
	}

	#menu .money span {
		font-size: 4rem;
	}

	#menu1::after,
	#menu2::after,
	#menu3::after,
	#menu4::after {
		bottom: 12px;
	}

	#menu p {
		font-size: 1rem;
	}

	#sec2 {
		padding: 55px 0;
	}

	.backBrown {
		padding: 40px 10px 10px;
	}

	.backBrown p {
		font-size: 1.4rem;
		font-weight: 500;
		margin-bottom: 14px;
	}

	.backBrown p.small {
		font-size: 1.2rem;
	}

	#overview {
		width: calc(100% - 40px);
		padding: 45px 20px 25px;
	}

	#overview::before {
		width: 45px;
		height: 48px;
		left: 20px;
	}

	#overview::after {
		width: 91px;
		height: 48px;
		right: 20px;
	}

	#overview h2 img {
		width: 170px;
	}

	#overview p {
		text-align: left;
		font-size: 1.5rem;
	}

	#overview p.small {
		font-size: 1.3rem;
		text-indent: -1em;
		margin-left: 1em;
	}

	#sec3 {
		padding: 70px 10px 40px;
	}

	#sec3 h2 {
		font-size: 2rem;
	}

	#sec3 > div {
		padding: 40px 20px 30px;
	}

	.column > div,
	.column > div:first-child {
		width: 100%;
		margin-bottom: 24px;
	}

	.column > div:last-child,
	.spLast {
		width: 100%;
		margin-bottom: 60px;
	}

	#sec3 h3 {
		margin-bottom: 30px;
	}
	#sec3 h3 img {
		width: auto;
		height: 28px;
	}

	#course1 {
		border: 10px solid #6C9DCC;
	}

	#course2 {
		border: 10px solid #7FB7A1;
	}

	#course3 {
		border: 10px solid #E9836E;
	}

	#course4 {
		border: 10px solid #D28621;
	}

	#course1::before, #course2::before {
		width: 79px;
		height: 90px;
		top: -69px;
		left: 17px;
	}

	#course3::before, #course4::before {
		width: 78px;
		height: 90px;
		top: -69px;
		right: 17px;
	}

	.column {
		display: block;
	}

	#sec3 h4 {
		font-size: 2rem;
		background: url(images/bulletHiyoko.svg) no-repeat left center;
		background-size: auto 3rem;
		padding-left: 3.5rem;
		font-weight: 500;
	}

	#sec3 ul {
		margin-left: 2rem;
	}

	#sec3 ul li {
		font-size: 1.6rem;
		background: url(images/liStandard.svg) no-repeat left top 5px;
		background-size: 15px 15px;
	}

	#sec3 .column p {
		margin-left: 20px;
	}

	#sec3 .column p.money {
		font-size: 1.8rem;
	}

	#sec3 .column p.small {
		font-size: 1.4rem;
	}

	#sec3 .column p.money span.small {
		font-size: 1.4rem;
	}

	#sec3 .column p.money span {
		font-size: 3rem;
	}

	#sec3 p.toDetail a {
		font-size: 1.6rem;
		font-weight: 500;
	}

	#sec3 > div#course4 {
		margin-bottom: 10px;
	}

	footer {
		padding: 0 0 50px;
	}

	#footerInside {
		padding: 60px 20px 40px;
	}

	#footerInside .w1000 {
		display: block;
	}

	.w1000 > div > #banners {
		display: none;
	}

	#footerInside .flex {
		margin: 0 20px 60px;
		gap: 0 20px;
	}

	footer h2.spShow {
		font-size: 1.6rem;
		font-weight: 400;
		margin-bottom: 30px;
	}

	.w1000 > div > p > img {
		width: 250px;
	}

	#footerRight p strong {
		display: block;
		text-align: center;
	}

	#footerRight > p > span.small {
		display: block;
	}

	#footerMenu {
		display: block;
	}

	#footerMenu li {
		margin-bottom: 10px;
	}

	#copyright {
		font-size: 1.2rem;
		line-height: 1.4;
		padding-bottom: 0;
	}

	#toPageTop {
		width: 50px;
		height: 50px;
		bottom: 20px;
		right: 20px;
	}

	a.phone {
		pointer-events: initial;
	}
}