@import url("default.css");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');

* {-webkit-text-size-adjust:100%;}
a:link {text-decoration:none; color:#000;}
a:visited{text-decoration:none; color:#000;}
a:hover{text-decoration:none; color:#000;}
a:active{text-decoration:none; color:#000;}

body { font-size: .22rem; line-height: 1.6; background-color: #fff; font-family: 'Noto Sans JP', sans-serif;}
.container-fluid { max-width: 1110px;}
.contact-area { max-width: 1210px!important; margin-top: 1rem; text-align: center;}
@media (min-width: 768px) {
    .sp { display: none!important;}
}
@media (max-width: 767px) {
    .pc { display: none!important;}
    .contact-area { margin-top: .4rem;}
    .contact-area img { width: 100%;}
    .sm-mgb10 { margin-bottom: .1rem;}
    .chara { height: 140px;}
    .ttl { text-align: center;}
}

/* accordion */
.accordion dt { background: #ffd9a6; line-height: 1; padding: .1rem 0; position: relative; font-size: .26rem; letter-spacing: .1em; cursor: pointer; margin-top: .05rem;}
.accordion dt div { position: absolute; right: .15rem; bottom: 0; top: 0; margin: auto; width: .3rem; height: .3rem; z-index: 1;}
.accordion dt div:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 2px; background: #000; margin: auto;}
.accordion dt div:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 2px; background: #000; margin: auto; transition: .3s; transform: rotate(90deg);}
.accordion dt.add div:after { transform: rotate(0deg);}
.accordion dd { border-left: .035rem solid #ffd9a6; border-right: .035rem solid #ffd9a6; border-bottom: .035rem solid #ffd9a6;}
.accordion dd .wrap { max-width: 800px!important; padding-top: .25rem; padding-bottom: .3rem;}
.accordion dd .wrap p { font-size: .23rem; letter-spacing: .1em; line-height: .4rem; text-align: left;}
.accordion dd .wrap p span { color: #ff7b00;}
.accordion.v2 dt { background: #fff; font-size: .23rem; font-weight: normal; padding: .23rem; letter-spacing: .1em; border: 1px solid #b7b7b7; border-radius: .08rem; z-index: 1;}
.accordion.v2 dt:after { content: ""; display: block; position: absolute; right: .1rem; border-radius: 50%; height: .3rem; width: .3rem; background: #0086ff; top: 0; bottom: 0; margin: auto;}
.accordion.v2 dt div { width: .2rem; height: .2rem;}
.accordion.v2 dt div:before,
.accordion.v2 dt div:after { background-color: #fff;}
.accordion.v2 dd { position: relative; top: -.1rem; background: rgba(0,134,255,.13); border: none; border-radius: 0 0 .08rem .08rem; padding: .45rem 0 .25rem;}
.accordion.v2 dd .wrap { padding-top: 0; padding-bottom: 0;}
.accordion.v2 dd p { font-size: .18rem; letter-spacing: .1em; margin-top: .1rem;}
.accordion.v2 dd .scroll { overflow-x: scroll;}
@media (max-width: 767px) {
    .accordion dt { text-align: left; padding-left: .15rem;}
    .accordion dd .wrap p[class*="pd"] { font-size: .17rem; line-height: 1.7; padding: .15rem 0!important;}
    .accordion dd .wrap .fs18 { font-size: .14rem!important; line-height: 1.7;}
}

/* global */
.ai-center { align-items: center;}
.ai-bottom { align-items: flex-end;}
.linkbtn { display: inline-block; color: #fff!important; background: #ddd; border: 2px solid #ddd; line-height: 1; padding: .06rem .2rem .1rem; font-weight: bold; font-size: .29rem; letter-spacing: -.1em; border-radius: .25rem; transition: .3s;}
.linkbtn.btn-blue { border-color: #0086ff; background: #0086ff;}
.linkbtn.btn-red { border-color: #ff6480; background: #ff6480;}
.linkbtn.btn-green { border-color: #00bc78; background: #00bc78;}
.linkbtn.btn-yel { border-color: #ffd700; background: #ffd700; color: #000!important; letter-spacing: .1em;}
.linkbtn.btn-blue:hover { background: #fff; color: #0086ff!important;}
.linkbtn.btn-red:hover { background: #fff; color: #ff6480!important;}
.linkbtn.btn-green:hover { background: #fff; color: #00bc78!important;}
.linkbtn.btn-yel:hover { background: #fff;}
.prev-arrow { position: absolute; left: -.2rem; top: 0; bottom: 0; margin: auto; width: .48rem; z-index: 1;}
.next-arrow { position: absolute; right: -.2rem; top: 0; bottom: 0; margin: auto; width: .48rem; z-index: 1;}

/* fixed-btn */
.fixed-btn { position: fixed; bottom: 0; left: 0; width: 100%; font-size: 0; letter-spacing: 0; z-index: 999; text-align: center; display: flex; align-items: stretch; justify-content: center; background: #ff486a; }
.fixed-btn li { display: inline-block; width: 100%; padding: 15px; text-align: center; font-size: .2rem; transform: translate3d(0px, 0px, 0px)!important; opacity: 1!important; position: relative; z-index: 1;}
.fixed-btn li img { box-shadow: 6px 6px 0px 0px rgba( 0,0,0, .25 ); transition: .3s; border-radius: .5em; } 
.fixed-btn li img:hover { box-shadow: 0 0 0 0 rgba( 0,0,0, .25 ); }
.fixed-btn li:nth-child(1) { background: #00ade3;  max-width: 28.57%; }
.fixed-btn li:nth-child(2) { background: #ea5504; max-width: 28.57%; }
.fixed-btn li:nth-child(3) { background: #ff486a; max-width: 42.857%; }
@media (max-width: 768px) {
    .fixed-btn { display: block; }
    .fixed-btn li { padding: 12px; }
    .fixed-btn li img { box-shadow: 2px 2px 0px 0px rgba( 0,0,0, .25 ); border-radius: .25em; } 
    .fixed-btn li:nth-child(1) { display: block; max-width: 45%; }
    .fixed-btn li:nth-child(2) { display: block; max-width: 45%; }
    .fixed-btn li:nth-child(3) { position: absolute; right: 0; top: 0; max-width: 55%; height: 100%; padding: calc( 20px - 1vw ) 12px; }
}
@media (max-width: 375px) {
    .fixed-btn li { padding: 8px; }
}

@media (max-width: 767px) {
    #method .list .detail .linkbtn { font-size: .22rem;}
    .fixed-btn li { padding: .2rem; }
    .fixed-btn li:nth-child(1) img { border-radius: .4em; box-shadow: 0.04rem 0.07rem 0 0 #17789b;}
    .fixed-btn li:nth-child(2) img { border-radius: .4em; box-shadow: 0.04rem 0.07rem 0 0 #a03b15;}
}

header .menu-trg-area { width: 50px; height: 50px; position: absolute; top: 0; bottom: 0; right: 4px; background: none; margin: auto;}
header .menu-trigger,
header .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
header .menu-trigger { position: absolute; right: 12px; top: 0; width: 25px; height: 37px; z-index: 2;}
header .menu-trigger span { position: absolute; left: 0; width: 100%; height: 3px; background-color: #000;}
header .menu-trigger span:nth-of-type(1) { top: 15px;}
header .menu-trigger span:nth-of-type(2) { top: 24.4px;}
header .menu-trigger span:nth-of-type(3) { bottom: 0;}
header .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(20px) rotate(-45deg); transform: translateY(20px) rotate(-45deg); top: 5px;}
header .menu-trigger.active span:nth-of-type(2) { left: 50%; opacity: 0; -webkit-animation: active-menu-bar02 .8s forwards; animation: active-menu-bar02 .8s forwards;}
header .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-20px) rotate(45deg); transform: translateY(-20px) rotate(45deg); bottom: -11px;}
footer { font-size: .2rem; letter-spacing: .04em; text-align: center; margin-top: .4rem; padding-bottom: 1.5rem;}
footer a { text-decoration: underline!important; }
footer p { margin-top: .4rem; }
@media (max-width: 767px) {
    header .menu-trg-area { display: block!important;}
}

#fv { position: relative;}
#fv .bg { display: block; width: 100%;}
#fv .icon { position: absolute; top: 0; left: 0; right: 0; width: 33.3333%; margin: auto;}
#fv .comment { position: absolute; bottom: 5%; left: 10%; width: 45%;}
#fv .comment2 { position: absolute; bottom: 32%; left: 9%; width: 31%;}
#sv { padding: .6rem 0; text-align: center; }
#method { padding: .6rem 0 0;}
#method .ttl { margin-bottom: .5rem; }
#method .head { display: block; margin: .3rem auto 0; position: relative; bottom: -1px;}
#method .list .detail { border: .05rem solid #eee; position: relative; margin-bottom: .6rem; border-radius: .15rem; display: block; overflow: hidden;}
#method .list .detail figure { position: absolute; left: 0; top: 0; width: 33.3333%; height: 100%; background-size: cover; background-position: center;}
#method .list .detail .top-content { padding: 3%; }
#method .list .detail .right-content { padding: .2rem 3%; position: relative;}
#method .list .detail .right-content .linkbtn { margin-top: .3rem; position: absolute; right: 3%; bottom: .2rem; background: #fff; border-radius: 2em;}
#method .list .detail.blue { border-color: #0086ff;}
#method .list .detail.blue .right-content { background: #0086ff; }
#method .list .detail.blue .linkbtn { color: #0086ff!important; }
#method .list .detail.red { border-color: #ff6480;}
#method .list .detail.red .right-content { background: #ff6480; }
#method .list .detail.red .linkbtn { color: #ff6480!important; }
#method .list .detail.green { border-color: #00bc78;}
#method .list .detail.green .right-content { background: #00bc78; }
#method .list .detail.green .linkbtn { color: #00bc78!important; }
#point01 { padding: 1.2rem 0 0; text-align: center;}
#point01 .section-title { padding: .45rem 0 .65rem;}
#point01 .comment { max-width: 8.5rem; margin: 0 auto .75rem;}
#point01 .bg { background: rgba(0,134,255,.15); padding: .7rem 0 1rem;}
#point01 .bg .p1 { margin-bottom: .4rem;}
#point01 .bg .p1_2 { margin-bottom: .5rem;}
#point01 .bg .p2 { margin-bottom: .15rem;}
#point01 .bg .p3 { margin-bottom: .95rem;}
#point02 { padding: .8rem 0 0; text-align: center;}
#point02 .comment { max-width: 8.5rem; margin: .65rem auto 0;}
#point02 .bg { margin-top: .7rem; background: rgba(255,100,128,.1); padding: .55rem 0 1.15rem;}
#point02 .bg .container-fluid { max-width: 983px;}
#point02 .p5 { margin-top: -.15rem; position: relative;}
#point02 .p6 { margin-top: .4rem;}
#point03 { padding: .8rem 0 0; text-align: center;}
#point03 .comment { max-width: 8.5rem; margin: .65rem auto 0;}
#point03 .bg { margin-top: .8rem; background: rgba(0,188,120,.1); padding: .85rem 0 1.15rem;}
#point03 .bg .container-fluid { max-width: 983px;}
#point03 .p5 { margin-top: .6rem;}
#point03 .p6 { margin-top: .6rem;}
#point03 .p7 { margin-top: .45rem;}
#point03 .p8 { margin-top: .35rem;}
/* #point03 .p5 { margin-top: -.15rem; position: relative;} */
#other { padding: .8rem 0 0; text-align: center;}
#other .container-fluid { max-width: 948px;}
#other h2 { margin-bottom: .5rem;}
#voice { padding: .8rem 0 1rem; text-align: center;}
#voice h2 { margin-bottom: .2rem;}
#voice .slider .slider-wrap label { display: block; width: 1.8rem; font-size: .26rem; letter-spacing: .1em; line-height: 1; background: #0086ff; color: #fff; padding: .15rem .55rem .1rem .3rem; position: relative; height: .51rem;}
#voice .slider .slider-wrap label:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 .45rem .51rem 0; border-color: transparent #ffffff transparent transparent; position: absolute; right: 0; top: 0;}
#voice .slider .slider-wrap .contents { border: .06rem solid #0086ff; padding: .8rem 0 .55rem;}
#voice .slider .slider-wrap .contents .container-fluid { max-width: 983px; padding-left: 30px; padding-right: 30px;}
#voice .slider .slider-wrap .contents .text { margin-top: .55rem;}
#price { padding: .8rem 0 1rem; text-align: center; background: rgba(255,255,132,.7);}
#price h2 { margin-bottom: .3rem;}
#price .container-fluid { max-width: 890px;}
#price .slider .slider-wrap { position: relative;}
#price .slider .slider-wrap .head { position: relative; display: block; margin: auto; margin-bottom: -.54rem; z-index: 1;}
#price .slider .slider-wrap .contents { border: .07rem solid #ff6d00; padding: .8rem 0 .55rem; background: #fff; border-radius: .22rem; position: relative;}
#price .slider .slider-wrap .contents .container-fluid { max-width: 820px; padding-left: 30px; padding-right: 30px;}
#price .linkbtn { font-size: .24rem; margin-top: .37rem;}
#price .contact-area { margin-top: .8rem;}

#map { padding: 1.5rem 0 1.2rem;}
#map .gm-style .gm-style-iw-c { padding: 12px;}
#map h2 { text-align: center; margin-bottom: .6rem;}
#map h3 { text-align: center; margin-bottom: .5rem;}
#map ul { margin-bottom: .75rem;}
#map .mw { max-width: 1070px;}
#map .small { font-size: .14rem; letter-spacing: .1em; line-height: .22rem; margin-top: .2rem;}
#map .contact-area { margin-top: .2rem; }

.contact { background: #fff; position: relative; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size: .14rem; letter-spacing: .05em;}
.contact .mw { max-width: 1070px;}
.contact .detail { font-size: .203rem; letter-spacing: .1em; line-height: .38rem; margin-bottom: .5rem;}
.contact .ttl { text-align: center; margin-bottom: .4rem;}
.contact .ttl label { display: block; font-size: .4rem; letter-spacing: .1em; line-height: 1; padding: .35rem 0; margin-top: .2rem; font-weight: bold; border-top: 2px solid #ff0000; border-bottom: 2px solid #ff0000;}
.contact form { margin-bottom: 1.3rem;}
.contact .form { margin-bottom: .3rem; color: #444444;}
.contact .form label { font-size: .26rem; letter-spacing: .1em; display: block; font-weight: bold; margin-bottom: .1rem;}
.contact .form label span { color: #fff; background: #ff0000; font-size: .19rem; display: inline-block; margin-left: .10rem; padding: .03rem .05rem; line-height: 1; border-radius: .2em;}
.contact .form select { height: .48rem; font-size: .28rem; letter-spacing: .1em;}
.contact .form input[type*="text"],
.contact .form input[type*="email"],
.contact .form input[type*="tel"],
.contact .form input[type*="number"],
.contact .form textarea { display: block; width: 100%; padding: .05rem; font-size: .28rem; letter-spacing: .1em; box-shadow: none; border-radius: .2em; text-shadow: none; outline: none; border: 1px solid #b7b7b7;}
.contact .form textarea { height: 1.4rem; margin-bottom: .4rem;}
.contact .form .radio-col { margin-bottom: .1rem; font-size: .28rem; letter-spacing: .1em;}
.contact .form .radio-col span { padding-left: .1rem; position: relative; top: .01rem;}
.contact .form .ib { margin-bottom: .1rem;}
.contact .form .ib span { display: inline-block; width: 65px;}
.contact .form .ib input { display: inline-block; width: 73px; margin-right: .1rem;}
.contact .form .min-font { font-size: .11rem; line-height: 2.3; letter-spacing: 0;}
.contact .buttonWrap { width: 100%; text-align: center; margin-top: .6rem;}
.contact .buttonWrap button { background: #ff0000; border: 3px solid #ff0000; border-radius: .2em; font-size: .65rem; letter-spacing: .1em; font-weight: bold; width: 100%; line-height: 1; padding: .3em 0 .3em; cursor: pointer; color: #fff; box-shadow: .15em .2em 0 0 #a80000; transition: .3s;}
.contact .buttonWrap button:hover { box-shadow: 0 0 0 0 #a80000; color: #ff0000; background: #fff;}

@media (max-width: 767px) {
    #fv .icon { width: 70%;}
    #fv .comment { width: 75%; left: 5%;}
    #fv .comment2 { bottom: 32%; left: 4.5%; width: 49%; }
    #sv { padding: .3rem 0 0; }
    #sv .mgb65 { margin-bottom: .25rem!important; }
    #method .head { width: 100px;}
    #method .list .detail { margin-bottom: .2rem; }
    #method .list .detail .right-content { padding: .2rem 3%;}
    #method .list .detail .right-content .linkbtn { font-size: .14rem; padding: .1rem .15rem; bottom: .05rem; font-weight: bold; right: .05rem; }
    #point01 { padding-top: .4rem; }
    #point01 .comment { margin-bottom: .2rem;}
    #point01 .section-title { padding: .3rem 0 .3rem;}
    #point01 .bg { padding: .4rem 0 .4rem;}
    #point01 .bg .p1 { margin-bottom: 0;}
    #point01 .bg .p3 { margin-bottom: 0;}
    #point02 { padding: .3rem 0 0;}
    #point02 h3 img { width: 254px;}
    #point02 .comment { margin-top: .3rem;}
    #point02 .bg { margin-top: .3rem; padding: .4rem 0 .4rem;}
    #point02 .bg .p2 img { width: 180px;}
    #point02 .p5 { margin-top: -.1rem;}
    #point02 .p6 { margin-top: .2rem;}
    #point03 { padding: .3rem 0 0;}
    #point03 .section-title img { width: 300px;}
    #point03 .bg { margin-top: .3rem; padding: .4rem 0 .4rem;}
    #other h2 img { width: 300px;}
    #other .wrap figure img { width: 200px;}
    #voice { padding: .8rem 0 .4rem;}
    #voice h2 img { width: 260px;}
    #voice h3 { margin-bottom: .3rem; text-align: center;}
    #voice .slider .slider-wrap .contents { padding: .5rem 0 .5rem;}
    #voice .slider .slider-wrap .contents img { width: 100%;}
    #voice .slider .slider-wrap .contents figure img { width: 200px; margin: auto;}
    #voice .slider .slider-wrap .contents .text { margin-top: .2rem;}
    #price { padding: .4rem 0 .5rem;}
    #price .contact-area { margin-top: .4rem;}
    #price .slider .slider-wrap .head { width: 90%;}
    #price .slider .slider-wrap .contents img { width: 100%;}
    #price .slider .slider-wrap img { display: block; margin: auto; }
    #map { padding: .4rem 0 .8rem;}
    #map h2 { margin-bottom: .4rem;}
    #map h3 { margin-bottom: .3rem;}
    #map .googlemap { margin-bottom: .2rem;}
    #map button { width: 57px; padding: .2em 0;}
    #map ul { margin-bottom: .5rem;}
    .contact .ttl { margin-bottom: .2rem;}
    .contact .ttl label { font-size: .25rem; padding: .2rem 0;}
    .contact .detail { font-size: .15rem; line-height: 1.7;}
    .contact .form { margin-bottom: .2rem;}
    .contact .form select { width: 100%;}
    .contact .form label { font-size: .18rem;}
    .contact .form select,
    .contact .form .radio-col { font-size: .18rem;}
    .contact .form input[type*="text"], .contact .form input[type*="email"], .contact .form input[type*="tel"], .contact .form input[type*="number"], .contact .form textarea { font-size: .18rem;}
    .contact .buttonWrap { margin-top: .3rem;}
    .contact .buttonWrap button { font-size: .4rem;}
}


.school_price * { text-align: center;}
.school_price,
#jr_school_price { width: 720px; font-size: 15px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; text-align: center;}
.school_price tr th td,
#jr_school_price th { text-align: center; margin:0 auto;}
.school_price td{ text-align: center; margin:0 auto;}
.school_price tr .em_t,
.school_price tr .jr_t,
.school_price tr .hg_t { color:#FFF; width: 10%; line-height:20px; padding:9px 0 5px; overflow:hidden; border-left: 1px solid #FFF; list-style:none;}
#jr_school_price tr .jr_01,
#jr_school_price tr .jr_02,
#jr_school_price tr .jr_03,
#jr_school_price tr .jr_04 { color:#FFF; width: 20%; line-height:20px; padding:9px 0 5px; overflow:hidden; border-left: 1px solid #FFF;}
.school_price tr th em,
#jr_school_price tr th em { font-size:28px;}
.school_price tr .em_t,
#jr_school_price tr .jr_01,
#jr_school_price tr .jr_02,
#jr_school_price tr .jr_03,
#jr_school_price tr .jr_04 { background: #FF8000;}
.school_price tr .jr_t { background: #00A4E3;}
.school_price tr .hg_t { background: #238C00;}
.school_price tr .price_tit_n,
#jr_school_price tr .price_tit_n { background: #EEE; width: 15%; font-size: 13px; font-weight: bold;}
.school_price tr .price_tit_n,
#jr_school_price tr .price_tit_n { line-height:50px; border: 1px solid #CCC;}
.school_price tr .price_tit_c,
#jr_school_price tr .price_tit_c { background: #D90000; line-height:50px; color: #FFF; border-left: 1px solid #CCC; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; font-weight: bold;}
.school_price tr.p_campaign td,
#jr_school_price tr.p_campaign td { color: #D90000; font-size:17px; font-weight: bold; text-align:center;}
.school_price tr.p_campaign1 td{ text-align:center;}
.school_price tr.p_campaign td span,
#jr_school_price tr.p_campaign td span { font-weight: normal; color: #D90000;}
.school_price tr td,
#jr_school_price tr td { text-align: center; border-top: 1px solid #CCC; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; width: 10%; vertical-align:middle; background-color: #ffffff;}
.school_price tr td span,
#jr_school_price tr td span { font-size:12px; color:#555; /*display:block; line-height:15px;*/}
#jr_school_price tr td { text-align: center;}
.school_price tr #junior_s { width: 50%; height: 80px; padding: 0; margin:0; overflow:hidden;}
.school_price tr #high_s { width: 30%; height: 80px; padding: 0; margin:0; overflow:hidden;}
.school_price tr td a { display:block; width:100%; height:100%; text-align:center; color: #000; line-height:80px;}
.school_price tr #high_s a { height:40px; line-height:20px; padding: 20px 0; margin:0;}
.school_price tr td a:hover { background: #EEE;}
.school_price tr td a span { color: #00A4E3;}