
.topVisual { background: #FFF; position: relative; border-radius: 0 0 1000px 1000px / 0 0 100px 100px; margin: 90px -100px 0; color: #FFF; }
.topVisual .inner { height: 80vh; min-height: 410px; position: relative; display: flex; flex-direction: column; justify-content: center; text-shadow: 0 0 10px #0003; }
.topVisual h2 { font-size: 60px; line-height: 90px; display: block; margin-top: -90px; }
.topVisual h2 small { font-size: 30px; line-height: 60px; }
.topVisual p { font-size: 24px; line-height: 40px; display: block; margin-top: 40px; }

.topWorry { margin: 0; padding: 120px 0; position: relative; }
.topWorry:before { content: ""; display: block; width: 100%; height: 120px; background-color: #FCE883; background-image: radial-gradient(#FFF6 2px, transparent 0), radial-gradient(#FFF6 2px, transparent 0); background-size: 20px 20px; background-position: 0 0, 10px 10px; position: absolute; bottom: 0; }
.topWorry:after { content: ""; display: block; width: calc(100% + 240px); height: 120px; background: #FFF; position: absolute; bottom: 0; border-radius: 0 0 1000px 1000px / 0 0 100px 100px; margin: 0 -100px; }
.topWorry h3 { font-size: 60px; font-weight: 900; line-height: 80px; text-align: center; }
.topWorry h3 b { color: #F23345; }
.topWorry ul  { display: flex; justify-content: space-between; margin: 60px 0; }
.topWorry ul li { width: 360px; height: 360px; border-radius: 180px; font-size: 32px; font-weight: 700; line-height: 40px; text-align: center; }
.topWorry ul li.worry1 { background: #FEF6F9; }
.topWorry ul li.worry2 { background: #FFFDF2; }
.topWorry ul li.worry3 { background: #F2F7FB; }
.topWorry ul li figcaption { display: block; }
.topWorry ul li figcaption b { display: block; color: #F23345; }
.topWorry p { font-size: 24px; font-weight: 600; line-height: 50px; text-align: center; }


.topReason { padding: 120px 0; background-color: #FCE883; background-image: radial-gradient(#FFF6 2px, transparent 0), radial-gradient(#FFF6 2px, transparent 0); background-size: 20px 20px; background-position: 0 0, 10px 10px; position: relative; border-radius: 0 0 1000px 1000px / 0 0 100px 100px; margin: 0 -100px; }
.topReason:before { content: ""; display: block; width: 100%; height: 120px; background: #FFF; position: absolute; bottom: 0; }
.topReason:after { content: ""; display: block; width: calc(100% + 240px); height: 120px; background-color: #FCE883; background-image: radial-gradient(#FFF6 2px, transparent 0), radial-gradient(#FFF6 2px, transparent 0); background-size: 20px 20px; background-position: 0 0, 10px 10px; position: absolute; bottom: 0; border-radius: 0 0 1000px 1000px / 0 0 100px 100px; margin: 0 -100px; }

.topReason h3 { font-size: 60px; font-weight: 900; line-height: 60px; text-align: center; }
.topReason h3 span { display: block; color: #0067B7; font-size: 30px; line-height: 30px; margin: 20px 0 0; }
.topReason ul { display: flex; justify-content: space-between; margin: 60px 0 0; }
.topReason ul li { width: 360px; }
.topReason ul li figure { position: relative; }
.topReason ul li figure img { width: 360px; height: 360px; border-radius: 180px; font-size: 32px; font-weight: 700; line-height: 40px; text-align: center; }
.topReason ul li figure figcaption { display: flex; flex-direction: column; justify-content: center; position: absolute; left: 0; bottom: 0; width: 100px; height: 100px; border-radius: 50px; background: #0067B7; color: #FFF; text-align: center; font-size: 16px; line-height: 20px; }
.topReason ul li figure figcaption b { display: block; font-size: 40px; line-height: 40px; }
.topReason ul li span { display: block; background: #FFF; border-radius: 10px; padding: 20px; font-size: 16px; line-height: 25px; margin: 20px 0 0; }
.topReason ul li span b { display: block; text-align: center; font-size: 20px; line-height: 30px; margin: 0 0 10px; }

.topAbout { padding: 120px 0; position: relative; }
.topAbout:before { content: ""; display: block; width: 100%; height: 120px; background-color: #FEF3C1; background-image: radial-gradient(#FFF6 2px, transparent 0), radial-gradient(#FFF6 2px, transparent 0); background-size: 20px 20px; background-position: 0 0, 10px 10px; position: absolute; bottom: 0; }
.topAbout:after { content: ""; display: block; width: calc(100% + 240px); height: 120px; background: #FFF; position: absolute; bottom: 0; border-radius: 0 0 1000px 1000px / 0 0 100px 100px; margin: 0 -100px; }

.topAbout h2 { font-size: 60px; font-weight: 900; line-height: 60px; text-align: center; margin: 0; }
.topAbout h2 span { display: block; color: #0067B7; font-size: 30px; line-height: 30px; margin: 20px 0 0; }
.topAbout .about { width: 100%; }

.topAbout .about ul { display: flex; justify-content: space-between; margin: 60px 0; }
.topAbout .about ul li { width: 360px; }
.topAbout .about ul li figure { }
.topAbout .about ul li figure img { width: 100%; border-radius: 20px; }
.topAbout .about h3 { display: block; background: #FFFC; color: #221717; width: 240px; height: 60px; position: relative; text-align: left; font-size: 20px; line-height: 60px; float: right; margin: -80px 40px 0 0; padding: 0 15px; box-sizing: border-box; border-radius: 30px; }
.topAbout .about h3 i { position: absolute; right: 15px; font-size: 30px; line-height: 60px; }

.topAbout .school { width: 1000px; margin: 0 auto; background: #FEFAE6; padding: 20px; border-radius: 20px; display: flex; justify-content: space-between; }
.topAbout .school section { width: 440px; text-align: center; }
.topAbout .school section h3 { font-size: 40px; line-height: 50px; }
.topAbout .school section h3 small { display: block; color: #F43545; font-size: 20px; line-height: 30px;  }
.topAbout .school section p { font-size: 20px; line-height: 40px; }
.topAbout .school section p small { display: block; font-size: 16px; line-height: 20px; }

.topAbout .school ul { text-align: center; }
.topAbout .school ul li { margin: 20px 0 0; }
.topAbout .school ul li.tel a { color: #F43545; }
.topAbout .school ul li.tel a b { display: flex; align-items: center; justify-content: center; font-size: 40px; line-height: 40px; }
.topAbout .school ul li.tel a b i { font-size: 24px; margin-right: 8px; }
.topAbout .school ul li.tel a small { display: block; line-height: 30px; font-size: 20px; font-weight: 500; color: #221717; }
.topAbout .school ul li.detail a { width: 300px; height: 60px; border: solid 2px #F43545; background: #FFF; color: #F43545; display: block; border-radius: 30px; box-sizing: border-box; text-align: center; position: relative; font-size: 24px; font-weight: 700; line-height: 56px; margin: 0 auto; }
.topAbout .school ul li.detail a i { position: absolute; right: 20px; font-size: 32px; line-height: 56px; }
.topAbout .school ul li.sns a { display: inline-block; color: #221717; font-size: 24px; font-weight: 600; line-height: 30px; }


.topAbout .bbbday { width: 1000px; margin: 60px auto 0; }
.topAbout .bbbday section { text-align: center; }
.topAbout .bbbday section h3 { font-size: 40px; line-height: 50px; }
.topAbout .bbbday section p { font-size: 20px; line-height: 40px; color: #F43545; }

.topAbout .bbbday ul { text-align: center; display: flex; justify-content: center; }
.topAbout .bbbday ul li { margin: 30px 15px 0; }
.topAbout .bbbday ul li a { display: block; background: #FEFAE6; padding: 20px; border-radius: 20px; color: #221717; }
.topAbout .bbbday ul li a figure { width: 240px; height: 150px; display: flex; align-items: center; overflow: hidden; border-radius: 10px;}
.topAbout .bbbday ul li a figure img { width: 100%;  }
.topAbout .bbbday ul li a h4 {  font-size: 24px; line-height: 25px; margin-top: 10px; }
.topAbout .bbbday ul li a address { font-size: 14px; line-height: 15px; font-style: normal; margin-top: 10px; }
.topAbout .bbbday ul li a p { border: solid 2px #F43545; background: #FFF; color: #F43545; font-size: 16px; line-height: 36px; position: relative; border-radius: 20px; margin-top: 10px; }
.topAbout .bbbday ul li a p i { position: absolute; right: 10px; font-size: 24px; line-height: 36px; }

.topInfo { padding: 60px 0 120px; position: relative; background-color: #FEF3C1; background-image: radial-gradient(#FFF6 2px, transparent 0), radial-gradient(#FFF6 2px, transparent 0); background-size: 20px 20px; background-position: 0 0, 10px 10px; }
.topInfo:before { content: ""; display: block; width: 100%; height: 120px; background: #FFF; position: absolute; bottom: 0; }
.topInfo:after { content: ""; display: block; width: calc(100% + 240px); height: 120px; background-color: #FEF3C1; background-image: radial-gradient(#FFF6 2px, transparent 0), radial-gradient(#FFF6 2px, transparent 0); background-size: 20px 20px; background-position: 0 0, 10px 10px; position: absolute; bottom: 0; border-radius: 0 0 1000px 1000px / 0 0 100px 100px; margin: 0 -100px; }
.topInfo .inner { position: relative; }
.topInfo figure.image { position: absolute; bottom: -120px; right: 0; z-index: 1; }
.topInfo section { display: flex; align-items: end; justify-content: space-between; }
.topInfo h3 { font-size: 36px; font-weight: 900; line-height: 40px; }
.topInfo h3 span { color: #0067B7; font-size: 18px; margin-left: 10px; }
.topInfo p { text-align: right; }
.topInfo p a { color: #221717; font-size: 16px; font-weight: 700; line-height: 25px; }
.topInfo p a i { color: #0067B7; margin: 0 5px 0 0; }
.topInfo ul { width: 1100px; margin: 30px auto 0; padding: 40px 40px 10px; box-sizing: border-box; background: #FFF; border-radius: 20px; }
.topInfo li { padding: 0 0 30px; }
.topInfo li a { color: #221717; font-size: 16px; display: flex; justify-content: left; align-items: center; }
.topInfo li a time { width: 140px; font-weight: 600; }
.topInfo li a b { width: 140px; background: #0067B7; color: #FFF; line-height: 30px; text-align: center; border-radius: 15px; }
.topInfo li a h4 { width: 700px; margin: 0 0 0 20px; line-height: 25px; }

@media only screen and (max-width: 1600px) {
}

@media only screen and (max-width: 1260px) {
	.topVisual { margin-top: 60px; padding: 0; }
	.topVisual .inner { width: calc(100% - 200px); padding: 0 15px; }
	.topVisual h2 { font-size: 7vw; line-height: 1.5em; margin-top: -60px; }
	.topVisual h2 small { font-size: 4vw; line-height: 1.5em; }

	.topWorry .inner { padding: 0 15px; }
	.topWorry h3 { font-size: 48px; line-height: 60px; }
	.topWorry ul li { width: 30vw; height: 30vw; border-radius: 50%; font-size: 24px; line-height: 30px; }
	.topWorry p { font-size: 20px; line-height: 40px; }
	.topWorry p br.pc { display: inline !important; }

	.topReason .inner { width: calc(100% - 200px); padding: 0 15px; }
	.topReason ul li { width: 30vw; }
	.topReason ul li figure img { width: 30vw; height: 30vw; border-radius: 50%; }
	.topReason ul li figure figcaption { width: 80px; height: 80px; border-radius: 40px; }
	.topReason ul li figure figcaption b { font-size: 32px; line-height: 40px; }

	.topAbout .inner { padding: 0 15px; }
	.topAbout .about { width: 100%; }

	.topAbout .about ul li { width: 30vw; }
	.topAbout .about h3 { width: 100%; height: 40px; line-height: 40px; float: none; margin: -40px 0 0 0; padding: 0 10px; border-radius: 0 0 20px 20px; }
	.topAbout .about h3 i { position: absolute; right: 15px; font-size: 30px; line-height: 40px; }

	.topAbout .school { width: 100%; margin: 0; box-sizing: border-box; }
	.topAbout .school section { width: 360px; }
	.topAbout .school figure { width: calc(100% - 380px); }

	.topAbout .bbbday { width: 100%; margin: 60px auto 0; }

	.topAbout .bbbday ul { justify-content: space-between; }
	.topAbout .bbbday ul li { width: 30vw; margin: 30px 0 0; }
	.topAbout .bbbday ul li a figure { width: auto; height: 15vw; }
	.topAbout .bbbday ul li a h4 b { display: block; }
	.topAbout .bbbday ul li a address { line-height: 20px; }

	.topInfo .inner { padding: 0 15px; }
	.topInfo ul { width: 100%; margin: 30px 0 0; }
	.topInfo li a h4 { width: auto; }
}


@media only screen and (max-width: 520px) {
	.topVisual { }
	.topVisual .inner { height: 410px; }
	.topVisual p { display: none; }

	.topWorry { padding: 60px 0; box-sizing: border-box; margin: 0; }
	.topWorry:before { height: 60px; }
	.topWorry:after { height: 60px; }
	.topWorry h3 { font-size: 30px; line-height: 40px; }
	.topWorry ul  { display: block; margin: 30px 0; }
	.topWorry ul li { width: 100%; height: auto; border-radius: 10px; font-size: 24px; line-height: 40px; text-align: left; margin: 0 0 15px;}
	.topWorry ul li figure { display: flex; align-items: center; }
	.topWorry ul li figure img { width: 148px; height: 100px; margin-right: 10px; }
	.topWorry ul li figcaption { }
	.topWorry ul li figcaption b { }
	.topWorry p { font-size: 18px; line-height: 30px; padding: 0; text-align: left; }
	.topWorry p br.pc { display: none !important; }


	.topReason { padding: 60px 0; box-sizing: border-box; margin: 0; }
	.topReason:before { height: 60px; }
	.topReason:after { height: 60px; }
	.topReason .inner { width: 100%; }
	.topReason h3 { font-size: 36px; line-height: 40px; }
	.topReason h3 span { font-size: 16px; line-height: 30px; margin: 0; }
	.topReason ul  { display: block; margin: 30px 0; }
	.topReason ul li { width: 100%; margin: 0 0 15px; }
	.topReason ul li figure { width: 100%; height: 50vw; display: flex; align-items: center; overflow: hidden; border-radius: 10px 10px 0 0; }
	.topReason ul li figure img { width: 100%; height: auto; border-radius: 0; }
	.topReason ul li figure figcaption { width: 60px; height: 60px; left: 15px; bottom: 15px; font-size: 12px; line-height: 15px; }
	.topReason ul li figure figcaption b { font-size: 30px; line-height: 30px; }
	.topReason ul li span { margin: 0; border-radius: 0 0 10px 10px; }
	.topReason p { font-size: 18px; line-height: 30px; padding: 0 15px; text-align: left; }


	.topAbout { padding: 60px 0; box-sizing: border-box; margin: 0; }
	.topAbout:before { height: 60px; }
	.topAbout:after { height: 60px; }
	.topAbout .inner { padding: 0 15px; box-sizing: border-box; }
	.topAbout h2 { font-size: 36px; line-height: 40px; }
	.topAbout h2 span { font-size: 16px; line-height: 30px; margin: 0; }


	.topAbout .about ul { display: block; margin: 30px 0; box-sizing: border-box; }
	.topAbout .about ul li { width: 100%; margin: 0 0 15px; }
	.topAbout .about ul li figure { width: 100%; padding: 0; }
	.topAbout .about ul li figure img { width: 100%; border-radius: 10px; }
	.topAbout .about h3 { margin: -40px 0 0; border-radius: 0 0 10px 10px; }


	.topAbout .school { width: 100%; margin: 0; padding: 15px; border-radius: 10px; display: block; box-sizing: border-box; }
	.topAbout .school section { width: 100%; text-align: center; }
	.topAbout .school section h3 { font-size: 36px; line-height: 40px; }
	.topAbout .school section h3 small { font-size: 16px; line-height: 30px;  }
	.topAbout .school section p { font-size: 16px; line-height: 30px; text-align: center; padding: 0 0 15px; }
	.topAbout .school section p small { font-size: 14px; line-height: 15px; }
	.topAbout .school figure { width: 100%; }

	.topAbout .school ul { display: block; text-align: center; }
	.topAbout .school ul li { margin: 0 0 15px; }
	.topAbout .school ul li.tel a { }
	.topAbout .school ul li.tel a b { font-size: 40px; line-height: 40px; }
	.topAbout .school ul li.tel a b i { font-size: 24px; margin-right: 8px; }
	.topAbout .school ul li.tel a small { display: block; line-height: 30px; font-size: 20px; font-weight: 500; color: #221717; }
	.topAbout .school ul li.detail a { width: 300px; height: 60px; border: solid 2px #F43545; background: #FFF; color: #F43545; display: block; border-radius: 30px; box-sizing: border-box; text-align: center; position: relative; font-size: 24px; font-weight: 700; line-height: 56px; margin: 0 auto; }
	.topAbout .school ul li.detail a i { position: absolute; right: 20px; font-size: 32px; line-height: 56px; }
	.topAbout .school ul li.sns a { display: inline-block; color: #221717; font-size: 24px; font-weight: 600; line-height: 30px; }


	.topAbout .bbbday { width: 100%; margin: 30px 0 0; }
	.topAbout .bbbday section { text-align: center; }
	.topAbout .bbbday section h3 { font-size: 36px; line-height: 40px; }
	.topAbout .bbbday section p { font-size: 18px; line-height: 30px; color: #F43545; }

	.topAbout .bbbday ul { text-align: center; display: block; }
	.topAbout .bbbday ul li { width: 100%; margin: 30px 0 0; }
	.topAbout .bbbday ul li a { display: block; background: #FEFAE6; padding: 15px; border-radius: 10px; }
	.topAbout .bbbday ul li a figure { width: 100%; height: auto; display: flex; align-items: center; overflow: hidden; border-radius: 5px;}
	.topAbout .bbbday ul li a figure img { width: 100%;  }
	.topAbout .bbbday ul li a h4 {  font-size: 24px; line-height: 25px; margin-top: 10px; }
	.topAbout .bbbday ul li a h4 b {  display: inline; }
	.topAbout .bbbday ul li a address { font-size: 16px; line-height: 30px; margin-top: 0; }
	.topAbout .bbbday ul li a p { border: solid 2px #F43545; background: #FFF; color: #F43545; font-size: 16px; line-height: 36px; position: relative; border-radius: 20px; margin-top: 10px; }
	.topAbout .bbbday ul li a p i { position: absolute; right: 10px; font-size: 24px; line-height: 36px; }



	.topInfo { padding: 60px 0; box-sizing: border-box; margin: 0; }
	.topInfo:before { height: 60px; }
	.topInfo:after { height: 60px; }
	.topInfo .inner { padding: 0 15px; box-sizing: border-box; }

	.topInfo figure.image { width: 150px; top: auto; bottom: -60px; }

	.topInfo section { }
	.topInfo h3 { font-size: 32px; line-height: 40px; margin: 0; }
	.topInfo h3 span { font-size: 16px; line-height: 20px; margin: 0; display: block; }
	.topInfo p { width: auto; }
	.topInfo p a { font-size: 16px; line-height: 25px; }
	.topInfo p a i { margin: 0 5px 0 0; }

	.topInfo ul { width: 100%; margin: 30px 0 0; padding: 0; border-radius: 10px; }
	.topInfo li { margin: 0; }
	.topInfo li a { flex-wrap: wrap; padding: 15px; }
	.topInfo li a time { width: auto; margin-right: 10px; }
	.topInfo li a b { width: 100px; font-size: 12px; line-height: 20px;}
	.topInfo li a h4 { width: 100%; margin: 0; }


}