.serviceTop { height: 310px; background: url(../img/service/top.jpg) center; background-size: cover; position: relative; border-radius: 0 0 1000px 1000px / 0 0 100px 100px; margin: 90px -100px 0; padding: 90px 0 0; box-sizing: border-box; }
.serviceTop h2 { display: block; font-size: 60px; line-height: 80px; color: #FFF; text-shadow: 0 0 10px #0003; }
.serviceTop h2 span { display: block; font-size: 30px; font-weight: bold; line-height: 40px; }

.serviceAbout { padding: 60px 0 120px; background: #FFF; position: relative; }
.serviceAbout: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; }
.serviceAbout: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; }

.serviceAbout h3 { font-size: 60px; font-weight: 900; line-height: 60px; text-align: center; padding: 60px 0 0; }
.serviceAbout h3 span { display: block; color: #0067B7; font-size: 30px; line-height: 30px; margin: 20px 0 0; }
.serviceAbout p { font-size: 24px; font-weight: 700; line-height: 40px; text-align: center; margin: 60px 0 0; }

.serviceProgram { 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; }
.serviceProgram:before { content: ""; display: block; width: 100%; height: 120px; background: #FFF; position: absolute; bottom: 0; }
.serviceProgram: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; }

.serviceProgram h3 { font-size: 60px; font-weight: 900; line-height: 60px; text-align: center; margin: 0; }
.serviceProgram h3 span { display: block; color: #0067B7; font-size: 30px; line-height: 30px; margin: 20px 0 0; }

.serviceProgram section { display: flex; justify-content: space-between; margin: 60px auto 0; width: 1100px; background: #FFF; border-radius: 20px; padding: 40px; box-sizing: border-box; }
.serviceProgram section div { width: 580px; }
.serviceProgram section h4 { font-size: 40px; line-height: 60px; border-bottom: dotted 4px #0067B7; padding: 0 0 20px; }
.serviceProgram section p { font-size: 16px; line-height: 25px; margin: 20px 0 0; }

.serviceProgram section.si figure,
.serviceProgram section.oral figure { order: 2; }
.serviceProgram section figure img { border-radius: 20px; }

.serviceFlow { padding: 120px 0; }
.serviceFlow h3 { font-size: 60px; font-weight: 900; line-height: 60px; text-align: center; margin: 0; }
.serviceFlow h3 span { display: block; color: #0067B7; font-size: 30px; line-height: 30px; margin: 20px 0 0; }

.serviceFlow section { margin: 60px 0 0; }
.serviceFlow section h4 { font-size: 36px; text-align: center; }
.serviceFlow section ul { width: 1100px; margin: 30px auto 0; padding: 0 40px 40px; border-radius: 20px; }
.serviceFlow section ul li { display: flex; justify-content: space-between; align-items: start; padding: 40px 0 0; position: relative; }
.serviceFlow section ul li:before { content: ""; height: 100%; position: absolute; left: 68px; top: 70px; }
.serviceFlow section ul li time { color: #FFF; width: 140px; font-size: 16px; font-weight: 700; line-height: 30px; border-radius: 15px; text-align: center; }
.serviceFlow section ul li div { width: 860px; }
.serviceFlow section ul li h5 { font-size: 24px; line-height: 30px; margin: 0; }
.serviceFlow section ul li p { font-size: 16px; line-height: 25px; margin: 10px 0 0; }

.serviceFlow section.weekday { }
.serviceFlow section.weekday h4 { color: #00C2DE; }
.serviceFlow section.weekday ul { background: #F2FCFD; }
.serviceFlow section.weekday ul li:before { border-left: dotted 4px #00C2DE; }
.serviceFlow section.weekday ul li:last-child:before { border-left: 0; }
.serviceFlow section.weekday ul li time { background: #00C2DE; }


.serviceFlow section.holiday { }
.serviceFlow section.holiday h4 { color: #E74692; }
.serviceFlow section.holiday ul { background: #FEF6F9; }
.serviceFlow section.holiday ul li:before { border-left: dotted 4px #E74692; }
.serviceFlow section.holiday ul li:last-child:before { border-left: 0; }
.serviceFlow section.holiday ul li time { background: #E74692; }


@media only screen and (max-width: 1260px) {
	.serviceTop { margin-top: 60px; }
	.serviceTop .inner { width: calc(100% - 200px); padding: 0 15px; }

	.serviceProgram .inner { width: calc(100% - 200px); padding: 0 15px; }
	.serviceProgram section { width: 100%; }
	.serviceProgram section figure { width: 280px; }
	.serviceProgram section div { width: calc(100% - 320px); }
	
	.serviceFlow .inner { padding: 0 15px; }
	.serviceFlow section ul { width: 100%; }
	.serviceFlow section ul li div { width: calc(100% - 180px); }
}


@media only screen and (max-width: 520px) {
	.serviceTop { height: 140px; padding: 0; }
	.serviceTop .inner { padding: 30px 15px 0; }
	.serviceTop h2 { font-size: 32px; ; line-height: 40px; }
	.serviceTop h2 span { font-size: 16px; line-height: 20px; }

	.serviceAbout { padding: 60px 0; margin: 0; }
	.serviceAbout .inner { padding: 0 15px; }
	.serviceAbout:before { height: 60px;}
	.serviceAbout:after { height: 60px;}

	.serviceAbout h3 { font-size: 32px; ; line-height: 40px; padding: 0; }
	.serviceAbout h3 span { font-size: 16px; line-height: 20px; }
	.serviceAbout p { font-size: 16px; line-height: 25px; margin: 15px 0; text-align: left; }

	.serviceAbout ul { width: 100%; margin: 0; padding: 0; }
	.serviceAbout ul li { width: 100%; }
	.serviceAbout ul li section { display: block; }

	.serviceAbout ul li section div { width: 100%; padding: 0; }
	.serviceAbout ul li section div h4 { font-size: 32px; line-height: 40px; padding: 0; }
	.serviceAbout ul li section div h5 { font-size: 16px; line-height: 20px; margin: 10px 0; }
	.serviceAbout ul li section div p { font-size: 16px; line-height: 25px; padding: 15px; border-radius: 20px; }


	.serviceProgram { padding: 60px 0; margin: 0; }
	.serviceProgram .inner { width: 100%; padding: 0 15px; }
	.serviceProgram:before { height: 60px;}
	.serviceProgram:after { height: 60px;}

	.serviceProgram h3 { font-size: 32px; ; line-height: 40px; }
	.serviceProgram h3 span { font-size: 16px; line-height: 20px; }
	
	.serviceProgram section { display: block; padding: 15px; margin: 30px 0 0; width: 100%; border-radius: 10px; }
	.serviceProgram section figure { width: 100%; padding: 0 0 15px; }
	.serviceProgram section figure img { border-radius: 5px; }
	.serviceProgram section div { width: 100%; }
	.serviceProgram section h4 { font-size: 24px; line-height: 30px; padding: 0 0 15px; }
	.serviceProgram section p { margin: 15px 0 0; }


	.serviceEvent:before { height: 60px;}
	.serviceEvent:after { height: 60px;}

	.serviceEvent .inner { width: 100%; padding: 0 15px; }
	.serviceEvent ul { display: block; margin: 30px 0 0; }
	.serviceEvent ul li { width: 100%; margin: 15px 0 0; background: #FFF; display: flex; position: relative; }


	.serviceFlow { padding: 60px 0; margin: 0; }
	.serviceFlow .inner { width: 100%; padding: 0 15px; }
	.serviceFlow:before { height: 60px;}
	.serviceFlow:after { height: 60px;}

	.serviceFlow section { margin: 30px 0 0; }
	.serviceFlow section h4 { font-size: 24px; text-align: center; }
	.serviceFlow section ul { width: 100%; margin: 30px auto 0; padding: 0 15px 15px; border-radius: 10px; }
	.serviceFlow section ul li { display: block; padding: 15px 0 0; position: relative; }
	.serviceFlow section ul li:before { content: none; }
	.serviceFlow section ul li div { width: 100%; }
	.serviceFlow section ul li h5 { font-size: 20px; line-height: 30px; margin: 15px 0 0; }
	.serviceFlow section ul li p { font-size: 16px; line-height: 25px; margin: 5px 0 15px; }
	.serviceFlow section ul li time { display: block; width: 100%; font-size: 20px; line-height: 30px; }

	.serviceFlow section.weekday { }
	.serviceFlow section.weekday h4 { color: #00C2DE; }
	.serviceFlow section.weekday ul { background: #F2FCFD; }
	.serviceFlow section.weekday ul li:before { border-left: dotted 4px #00C2DE; }
	.serviceFlow section.weekday ul li:last-child:before { border-left: 0; }
	.serviceFlow section.weekday ul li time { background: #00C2DE; }


	.serviceFlow section.holiday { }
	.serviceFlow section.holiday h4 { color: #E74692; }
	.serviceFlow section.holiday ul { background: #FEF6F9; }
	.serviceFlow section.holiday ul li:before { border-left: dotted 4px #E74692; }
	.serviceFlow section.holiday ul li:last-child:before { border-left: 0; }
	.serviceFlow section.holiday ul li time { background: #E74692; }
}