@charset "utf-8";
/* CSS Document */

*:first-child+html body {padding-left:1px;}/* for IE7 */ blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, select, span, textarea, td, th, ul {margin:0;padding:0;} ol, ul {list-style:none;} q:before, q:after {content: '';} table {border-spacing:0;font-size:100%;} /* tables still need 'cellspacing="0"' */ a img, fieldset, img {border:0;vertical-align:middle;}

a { text-decoration: none; color: #333 }
a:hover { opacity: 0.8 }

.fw-b { font-weight: bold }
.color3A89F0 { color: #3A89F0 }
.color2F9836 { color: #2F9836 }

html { font-size: 16px; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; line-height: 1.8; scroll-behavior: smooth }
body { width: 100%; margin: 0 auto; color: #333 }
.container { width: 1050px; margin: 0 auto }

.pc-only { display: block }
.sp-only { display: none }

header { padding: 15px 0; position: sticky; top: 0; left: 0; background-color: #FFF; z-index: 10 }
header h1 { font-size: 14px; float: left }
header h1 span { font-size: 22px; font-weight: bold; display: block; color: #FF5E00 }
header .head_r { float: right }
header .head_r ul { display: flex; flex-wrap: nowrap; justify-content: space-between; width: 600px }
header .head_r li { width: calc(100% / 3 - 20px); text-align: center; font-size: 14px }
header .head_r li a { display: block; width: 180px; padding: 5px 10px; border-radius: 10px }
header .head_r li img { padding-right: 10px }
header .head_r li.tel a { display: inline; padding: 0 }
header .head_r li.tel span { font-size: 18px }
header .head_r li.mail, header .head_r li.join { margin-top: 10px }
header .head_r li.mail a { background-color: #FFC74E; color: #333 }
header .head_r li.join a { background-color: #FF5E00; color: #FFF }

nav { padding: 20px 0; clear: both }
nav ul { display: flex; flex-wrap: nowrap; justify-content: space-between }
nav ul li { width: calc( 100% / 7 ) ; list-style: none; text-align: center }
nav ul li+ li { border-left: 0; border-right: 1px solid #333 }
nav ul li a { display: block; text-decoration: none; color: #333 }
nav ul li a:hover { text-decoration: underline }
nav ul li { border-left: 1px solid #333; border-right: 1px solid #333 }

section { clear: both; text-align: center; padding: 45px 0; overflow: hidden }
section.bg_orange { background-color: #FFC74E }


section h4 { font-size: 36px }
section h4 span { display: block; font-size: 24px }
section.bg_orange h4 span { color: #FFF }

section ul.flex { display: flex; flex-wrap: wrap; justify-content: space-between }

section .button_more { clear: both }
section .button_more a { position: relative; display: block; border: 2px solid #FF5E00; border-radius: 25px; width: fit-content; margin: 80px auto 30px auto; background-color: #FFF; padding: 10px 80px; color: #FF5E00 }
section .button_more a img { position: absolute; right: 20px }

section#mv { background: url("assets/mv_pc.png") #FFC74E no-repeat; background-position: center center; height: 540px; text-align: left; position: relative; z-index: 2}
section#mv h2 { font-size: 26px }
section#mv h3 { font-size: 36px; padding: 20px 0 }
section#mv h3 span { display: none }

.slider { margin-top: 0px; position: relative; z-index: 1 }
.slider .slick-slide { margin-right: 16px }
.slider .slick-slide img { width: 180px; height: 180px; object-fit: cover; border-radius: 20px }

/*section#sub { background: url("assets/sub_bg_pc.png") no-repeat; background-position: center center; height: 725px }*/
section#sub { padding-bottom: 120px }
section#sub h2 { font-size: 36px }
section#sub h2 span { font-size: 48px; color: #FF5E00 }
section#sub p { padding: 30px 0; font-size: 16px; line-height: 2 }
section#sub .pr { margin-top: 20px }
section#sub .pr a { background-color: #FFF3D5; display: block; padding: 15px; width: 45%; margin: 0 auto }
section#sub .pr a img { padding-left: 10px }
section#sub .sub_bg { position: relative }
section#sub .sub_bg img { position: absolute; border-radius: 50% }
section#sub .sub_bg img.sub_01 { top: -40px; left: -115px; width: 250px; height: 250px }
section#sub .sub_bg img.sub_02 { top: 285px; left: -195px; width: 160px; height: 160px }
section#sub .sub_bg img.sub_03 { top: 0px; right: -187px; width: 380px; height: 380px }
section#sub .sub_bg img.sub_04 { top: 490px; left: -60px; width: 250px; height: 250px }
section#sub .sub_bg img.sub_05 { top: 450px; right: -30px; width: 300px; height: 300px }


section#pr { background-color: #F3F3F3 }
section#pr h5 { font-size: 22px }
section#pr p { margin: 20px 0 }

section#reason ul li { margin: 30px auto; background-color: #FFF; border-radius: 25px; clear: both; box-shadow: 10px 10px 15px -5px rgba(0, 0, 0, 0.5); overflow: hidden }
section#reason ul li img { width: 100% }
section#reason ul li:nth-child(odd) .reason_img { float: left; width: 40% }
section#reason ul li:nth-child(odd) .reason_txt { float: right; width: 60% }
section#reason ul li:nth-child(even) .reason_img { float: right; width: 40% }
section#reason ul li:nth-child(even) .reason_txt { float: left; width: 60% }
section#reason .reason_txt { padding: 30px 40px; overflow: hidden; font-size: 14px; text-align: left }
section#reason h5 { font-size: 24px; margin: 20px 0; text-align: left }
section#reason h5 span { display: block; font-size: 18px; color: #FF5E00 }

section#lesson ul#class { margin: 50px 0 }
section#lesson ul#class li { width: calc(100% / 2 - 30px); border-radius: 25px; overflow: hidden; text-align: left }
section#lesson h4 span { color: #FF5E00 }
section#lesson ul#class li:nth-child(1) { background-color: #3A89F0 }
section#lesson ul#class li:nth-child(2) { background-color: #2F9836 }
section#lesson ul#class li img { width: 100% }
section#lesson ul#class li .lesson_txt { padding: 30px; color: #FFF }
section#lesson ul#class li .lesson_txt h5 { font-size: 20px }
section#lesson ul#class li .lesson_txt p { font-size: 14px; padding: 15px 0 0 0 }
section#lesson ul#class li .lesson_txt a.more { display: block; color: #FFF; padding: 20px 0 0 0 }
section#lesson ul#class li .lesson_txt a.more img { width: inherit; margin-left: 10px; vertical-align: top }
section#lesson #flow { background-color: #FFF3D5; border-radius: 25px; padding: 30px }
section#lesson #flow h6 { font-size: 24px; padding: 10px 0 20px 0 }
section#lesson #flow p { font-size: 14px; text-align: left; font-weight: normal }
section#lesson #flow ul { margin: 20px 0 }
section#lesson #flow ul li { width: calc(100% / 2 - 20px); text-align: left; margin-bottom: 30px }
section#lesson #flow img { width: 100% }

section#price p.attention { color: #FF2F00; font-size: 24px; padding: 15px 0 }
section#price ul { text-align: left; margin-top: 40px }
section#price ul li { position: relative; width: calc(100% / 2 - 30px); background-color: #FFF; padding: 20px 30px; border-radius: 25px }
section#price ul li .icon { color: #F00; position: absolute; top: 20px; right: 20px; padding: 5px; border-radius: 10px; font-size: 16px; border: 1px solid }
section#price ul li h5 { font-size: 24px; border-bottom: 5px solid; padding: 10px 0 }
section#price ul li dl { font-size: 18px; margin: 15px 0; font-weight: bold; display: flex; flex-wrap: wrap; width: 100% }
section#price ul li dl dt { width: 30% }
section#price ul li dl dd { width: 70% }
section#price ul li p { clear: both; color: #333; margin-bottom: 15px; font-size: 14px }
section#price h5 { font-size: 22px; padding: 40px 0 30px 0 }

section#coach { background-color: #FCECEC }
section#coach h4 span { color: #FF7391 }
section#coach ul li { width: calc( 100% /2 - 30px); font-size: 24px }
section#coach ul li h5 span { display: block; font-size: 16px }
section#coach .circle { padding: 40px 0 }
section#coach .circle img { width: 250px; height: 250px; border-radius: 50% }
section#coach #coach_list { width: 70%; margin: 0 auto }
section#coach #coach_list p { font-size: 16px }

section#access { background-color: #EEFAED }
section#access h4 { margin-bottom: 40px }
section#access h4 span { color: #2F9836 }
section#access .box_l { float: left; width: 45% }
section#access .box_r { float: right; width: 50% }
section#access .box_l h1 { font-size: 24px }
section#access .box_l dl { margin-top: 20px; overflow: hidden; font-size: 14px }
section#access .box_l dt { float: left; text-align: left; font-weight: bold; width: 25%; padding: 5px 0 }
section#access .box_l dd { float: left; text-align: left; width: 75%; padding: 5px 0 }
section#access .box_l p { margin: 15px 0; font-size: 14px; text-align: left }
section#access .box_l img { margin: 10px 0; width: 100% }

section#link ul li { width: calc(100% / 2 - 25px); font-size: 24px; text-align: left }
section#link ul li a { display: block; padding: 40px }
section#link ul li a span { display: block; font-size: 14px }
section#link ul li#qa { background-color: #F5EDE5; border-radius: 25px }
section#link ul li#voice { background-color: #F7ECF7; border-radius: 25px }
section#link ul li#qa a span { color: #8F4A3A }
section#link ul li#voice a span { color: #9743BE }

section#news { background-color: #F3F3F3 }
section#news h4 { float: left; /*margin-top: 65px*/ }
section#news h4 span { color: #A1A1A1 }
section#news ul { width: 70%; float: right; margin-bottom: 40px }
section#news ul li { width: 100%; border-bottom: 1px solid #AAA; text-align: left; padding: 15px 0 }
section#news ul li span { display: block; font-size: 14px }
section#news ul li:last-child { border-bottom: none }

section#aux .block { background-color: #FFF3D5; border-radius: 25px; padding: 45px }
section#aux .block h4 { font-size: 24px; margin-bottom: 35px }
section#aux .block li { width: calc(100% / 2 - 30px); text-align: center; margin-bottom: 20px }
section#aux .block li a { display: block; padding: 15px; border-radius: 10px; font-weight: bold }
section#aux .block li img { padding-right: 10px }
section#aux .block li.tel span { font-size: 24px }
section#aux .block li.mail a { background-color: #FFC74E; color: #333 }
section#aux .block li.join a { background-color: #FF5E00; color: #FFF }

article { margin: 0 auto }

footer { background-color: #F3F3F3; padding: 50px 0 20px 0; overflow: hidden }
footer h1 span { display: block; font-size: 16px }
footer .box_l { float: left; width: 60% }
footer .box_r { float: right; width: 35%; background-color: #FFF; padding: 30px }
footer ul { overflow: hidden; margin: 20px 0 }
footer ul li { float: left; font-weight: bold; padding: 0 15px; text-align: left; font-size: 14px }
footer p { font-size: 14px; margin-bottom: 30px }
footer .box_r li { width: 100%; text-align: center; margin-bottom: 20px }
footer .box_r li:last-child { margin-bottom: 0 }
footer .box_r li a { display: block; padding: 15px; border-radius: 10px }
footer .box_r li img { padding-right: 10px }
footer .box_r li.tel span { font-size: 24px }
footer .box_r li.mail a { background-color: #FFC74E; color: #333 }
footer .box_r li.join a { background-color: #FF5E00; color: #FFF }



.table_wrap { overflow-x : auto; /* 横スクロール */ }
.sample3 { width: 100%; min-width: 600px; /* 幅が600px以下になったらスクロール */ table-layout: fixed; border-collapse: collapse; white-space: nowrap }
.sanple3 th { background: #FFF3D5 }
.sample3 th, .sample3 td { font-size: 14px; border: 1px solid #333; padding: 8px; background: #FFF; text-align: center; vertical-align: middle; box-sizing: border-box }
.sample3 td { font-size: 15px }
.sample3 tr:nth-child(even) th, .sample3 tr:nth-child(even) td { background: #FFF }
.sample3 thead th { /*border-radius: 6px 6px 0 0;*/ color: #333 }
.sample3 thead th:nth-child(1) { background-color: #FFF3D5; color: #000; width: 240px }
.sample3 thead th:nth-child(2) { background: #FFF3D5 }
.sample3 thead th:nth-child(3) { background: #FFF3D5 }
.sample3 thead th:nth-child(4) { background: #FFF3D5 }
.sample3 thead th:nth-child(5) { background: #FFF3D5 }
.sample3 thead th:nth-child(6) { background: #FFF3D5 }
/*.sample3 tbody tr:first-child th{ border-radius: 6px 6px 0 0 }
.sample3 tbody tr:last-child th, .sample3 tbody tr:last-child td{ border-radius: 0 0 6px 6px }
.sample3 thead th:nth-child(3) { border-top:solid 4px #6f9b12; border-left:solid 4px #6f9b12; border-right:solid 4px #6f9b12 }
.sample3 tbody td:nth-child(3) { border-left:solid 4px #6f9b12; border-right:solid 4px #6f9b12 }
.sample3 tbody tr:last-child td:nth-child(3){ border-bottom:solid 3px #6f9b12 }
*/
.marker-pink { background: linear-gradient(transparent 80%,#faa2b1 80%) }
.marker-green { background: linear-gradient(transparent 80%, #2F9836 80%) }
.marker-blue { background: linear-gradient(transparent 80%, #3A89F0 80%) }

@media screen and (max-width: 480px) {
.table_wrap { position: relative }

/* 幅が480px以下になったら矢印を表示 */
.table_wrap::before { content: 'スクロール'; font-size: 12px; color: #ccc; position: absolute; top: 0; left: 5px }
.table_arrow { display: block; position: relative }
.table_arrow::before { content: ''; position: absolute; top: 20px; left: 5px; width: 100px; height: 1px; background:#ccc }
.table_arrow::after { content: ''; position: absolute; top: 15px; left: 90px; width: 15px; height:1px; background:#ccc; transform: rotate(35deg)}

}



@media screen and (max-width: 760px) {
	.container { width: 90% }
	.pc-only { display: none }
	.sp-only { display: block }

	section ul.flex { display: block }

	section#sub .container .sub_bg { display: none }
	section#sub .pr a { width: 100%; padding: 15px 5px }
	
	section#reason ul li:nth-child(odd) .reason_img, section#reason ul li:nth-child(odd) .reason_txt { float: none; width: 100% }
	section#reason ul li:nth-child(even) .reason_img, section#reason ul li:nth-child(even) .reason_txt { float: none; width: 100% }
	
	section#lesson ul#class li { width: 100%; margin-bottom: 50px }
	
	section#lesson #flow ul li, section#price ul li, section#link ul li { width: 100%; margin-bottom: 20px }
	
	section#access .box_l, section#access .box_r { float: none; width: 100% }
	
	section#news h4 { float: none; text-align: left }
	section#news ul { float: none; width: 100% }
	
	section#aux .block li { width: 100% }
	
	footer .box_l { float: none; width: 100% }
	footer .box_r { display: none }
	
	iframe { width: 100% }
	nav ul { display: block }
	nav ul li { width: 100%; border: none }
	nav ul li+ li { border: none }
	
	section#mv { padding: 0; background: none; background-color: #FFC74E; text-align: left; position: relative; z-index: 2}
	section#mv img { width: 100% }
	section#mv h2 { font-size: 18px; padding: 20px 0 10px 0 }
	section#mv h3 { font-size: 28px; padding: 0 }
	section.slider { padding: 0 0 45px 0; background-color: #FFC74E }

	.menu-wrapper { position: relative }
	.menu-icon { width: 40px; height: 30px; position: fixed; top: 20px; right: 20px; cursor: pointer; z-index: 4; display: inline-block }
	.menu-icon span { display: block; height: 4px; margin: 6px 0; background: #333; border-radius: 2px; transition: 0.4s }

	/* ハンバーガーがXに変形 */
	#menu-toggle:checked + .menu-icon span:nth-child(1) { transform: translateY(10px) rotate(45deg) }
	#menu-toggle:checked + .menu-icon span:nth-child(2) { opacity: 0 }
	#menu-toggle:checked + .menu-icon span:nth-child(3) { transform: translateY(-10px) rotate(-45deg) }

	/* オーバーレイ背景 */
	.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: 0.4s; z-index: 3 }

	#menu-toggle:checked ~ .overlay { opacity: 1; pointer-events: auto }

	/* メニュー本体（左から出す） */
	.menu { position: fixed; top: 0; right: -250px; /* ← 初期位置を左へ */ width: 250px; height: 100%; background: #fff; box-shadow: 2px 0 8px rgba(0,0,0,0.2); transition: right 0.4s ease; z-index: 3 }
	#menu-toggle:checked ~ .menu { right: 0; /* ← 開いたときは左0へ */ }
	.menu ul { list-style: none; padding: 60px 20px }
	.menu li { margin: 20px 0 }
	.menu a { text-decoration: none; color: #333; font-size: 1.2rem; transition: color 0.3s }
	.menu a:hover { color: #007bff}
	
}