@charset "utf-8";
/* CSS Document */
/*
Theme Name:
Theme URI:
Description:
Version: 1.0
Author: SUDA WEB TEAM and WEB PROJECT
Author URI: http://www.suda.co.jp
Tags:
*/

/* GO2TOP button */
#page-top { position:fixed; bottom:0px; right:0px; /*font-size: 77%;*/ z-index:100; }
#page-top span { display:none; }
#page-top a { text-decoration:none; color:#fff;padding:0; text-align:center; display:block; border-radius:12px; }
#page-top a img { display:block; width:70px; height:auto; margin:0 0 20px 0; }

html { scroll-behavior: smooth; }



@media only screen and (max-width:767px) {
/* SP */

.pc { display: none; }

#nav-drawer { display: none; position: absolute; top: 10px; right: 10px; }
.nav-unshown { display: none; }
#nav-open { display: inline-block; width: 30px; height: 22px; vertical-align: middle; }
#nav-open span, #nav-open span:before, #nav-open span:after { position: absolute; height: 3px;/*線の太さ*/ width: 25px;/*長さ*/ border-radius: 3px; background: #555; display: block; content: ''; cursor: pointer; }
#nav-open span:before { bottom: -8px; }
#nav-open span:after { bottom: -16px; }
#nav-close { display: none; position: fixed; z-index: 99; top: 0; right: 0; width: 100%; height: 100%; background: black; opacity: 0; transition: .3s ease-in-out; }
#nav-content { overflow: auto; position: fixed; top: 0; right: 0; z-index: 9999; width: 90%; max-width: 300px; height: 100%; background: #000; transition: .3s ease-in-out; -webkit-transform: translateX(-105%); transform: translateX(-105%); }
#nav-input:checked ~ #nav-close { display: block; opacity: .5; }
#nav-input:checked ~ #nav-content { -webkit-transform: translateX(0%); transform: translateX(0%); box-shadow: 6px 0 25px rgba(0,0,0,.15); }
#nav-content ul { width: 90%; display: block; padding: 5%; }
#nav-content ul li { padding: 0; width: 100%; }
#nav-content ul li a { display: block; padding: 20px; text-decoration: none; color: #fff; position: relative; }
#nav-content ul li a:hover { color: #fff; background: #0171BB; }
#nav-content ul li a .triangle3 { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; position: absolute; top: 25px; left: 0px; }
#nav-content ul li a:hover .triangle3 { border-top: 5px solid #fff;}

/* GO2TOP button */
#page-top {bottom:2%; right:10%;}
#page-top a img { max-width:100%;width:60px;padding:2% 4%; background:rgba(255,255,255,0.6); margin:0;}

body { position: relative; }

header { width: 100%; height: auto; /*position: fixed; z-index: 10; background: rgba(255,255,255,0.8);*/ }
#header-l1 { width: 100%; height: auto; padding: 10px 2%; }
header h1 { width: 100%; height: 50px; display: block; margin: 0 auto; }
header h1 a { width: 100%; height: 100%; display: block; text-indent: -9999px; background: url(images/logo.svg) no-repeat; background-size: contain; background-position: center; }


header .telnum { width: 100%; text-align: center; }
header .telnum p { display: block; padding: 0 1rem 1rem 0; }
header .telnum p a.tel-btn {  font-size: 2.0rem; font-weight: bold; color: #000; text-decoration: none; }
header .telnum p span { font-size: 2.6rem; padding-left: 1rem; }
header .telnum a.inq-btn { padding: 1rem 2rem; font-size: 1.6rem; font-weight: bold; background: #ff4500; color: #fff; text-decoration: none; display: inline-block; margin: 0 auto; }
header .telnum a:hover { opacity: 0.7; }

nav { width: 100%; display: none; background: none; padding: 0 0 5px 0; }

.sec_slider { width:100%; height: auto; display: block; position: relative; /*padding-top: 160px;*/ }
.sec_slider .slider { width: 100%; height: auto; display: block; }
.sec_slider .slider-text { display: block; width: 98%; position: absolute; top: 2%; left: 1%; }
.sec_slider h2 { color: #fff; font-weight: bold; font-size: 2.6rem; line-height: 1.4; text-align: center;}
.sec_slider h2 img { width: 100%; height: auto; display: block; }
.sec_slider h3 { width: 70%; margin: 20% 0 0 0%; }
.sec_slider h3 img { width: 100%; height: auto; }
.sec_slider h4 { width: 100%; margin-top: 10%; }
.sec_slider h4 img { height: auto; width: 80%; display: block; margin: 0 auto; filter: drop-shadow(2px 2px 1px rgb(255,255,255)); }

.sections { margin: 0 auto 40px; padding: 20px 0 20px; display: block; width: 96%; margin: 0 auto; }
.sections h3 { width: 100%; margin:20px auto; display: block; text-align: center; font-size: 2.4rem; line-height: 1.4; border-bottom: double 5px #0097E0; position: relative; /*background: url(images/icon01.svg) no-repeat left bottom; background-size:40%;*/ }
.sections p { font-size: 1.6rem; line-height: 1.6; }

.inq-btn-area { width: 90%; margin: 20px auto; padding: 1rem; display: block; /*background: #fffeee;*/ border: solid 10px #e60012; box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.6); border-radius: 20px; }
.inq-btn-area h4 { color: #e60012; padding: 1rem 0; text-align: center; border-bottom: solid 2px #e60012; font-size: 4.0rem; font-weight: bold; letter-spacing: 1rem; }
.inq-btn-area h5 { font-size: 2.0rem; font-weight: bold; color: #000; text-align: center; margin: 2rem auto; display: block; }
.inq-btn-area h5 span:nth-of-type(1) { font-size: 3.0rem; color: #fff; background: #e60012; display: inline-block; padding: 2rem; border-radius: 50%; }
.inq-btn-area h5 span:nth-of-type(2) { font-size: 5rem; font-weight: bold; color: #e60012; display: block; }
.inq-btn-area a { width:100%; display: block; margin: 0 auto; background: #ff4500; padding: 1rem; color: #fff; text-align: center; font-size: 1.4rem; font-weight: bold; text-decoration: none; }
.inq-btn-area a:hover { background: #666; }

.inq-btn-area2 { width: 90%; margin: 20px auto; padding: 2rem; display: block; background: #0097c1; border: solid 10px #0b3c51; box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.6); border-radius: 20px; }
.inq-btn-area2 h4 { color: #fff; padding: 1rem 0; text-align: center; border-bottom: solid 2px #fff; font-size: 3rem; font-weight: bold; letter-spacing: 1rem; }
.inq-btn-area2 h5 { font-size: 2.0rem; font-weight: bold; color: #fff; text-align: center; margin: 2rem auto; display: flex; justify-content: center; align-items: center; }
.inq-btn-area2 h5 span:nth-of-type(1) { font-size: 4.0rem; color: #fff; background: #e60012; display: inline-block; padding: 2rem; border-radius: 50%; }
.inq-btn-area h5 span:nth-of-type(2) { font-size: 10rem; font-weight: bold; color: #e60012; }
.inq-btn-area2 a { width:100%; display: block; margin: 0 auto; background: #fff; padding: 2rem; color: #0b3c51; text-align: center; font-size: 1.4rem; font-weight: bold; text-decoration: none; }
.inq-btn-area2 a:hover { background: #e60012; color: #fff; }
.inq-btn-area img  {width: 90%; display: block; margin: 10px auto;}



#s02 p.lead { width: 100%; margin: 20px auto; line-height: 2.0; text-indent: 1rem; }
#s02 h3 img { width: 60%; }


#s02 .s02-wrap { width: 90%; display: block; margin: 20px auto; }
#s02 .s02-wrap .s02-wrap-cont { width: 100%; margin: 0; padding: 1rem 0; background: none; text-align: center; border-bottom: 3px solid #0097E0; }
#s02 .s02-wrap .s02-wrap-cont h5 { font-size: 2rem; font-weight: bold; color: #333; line-height: 1.4; }
#s02 .s02-wrap .s02-wrap-cont h5 span { color: #e60012; }

#s04 { /*background: #F8F8FF;*/ }
#s04 h4 { width: 100%; background: #e60012; padding: 1rem 0; text-align: center; color:  #fff; font-size: 2.0rem; font-weight: bold; margin: 20px auto; }
#s04 p.lead { width: 100%; margin: 20px auto; line-height: 2.0; text-indent: 1rem; text-align: center; }
.s04-cont-wrap { display: block; width: 100%; margin: 0 auto; }
#s04 .video-wrap { width: 90%; display: flex; flex-wrap: wrap; text-align: center; margin: 20px auto; }
#s04 .video-wrap iframe { width: 100%; height: 150px; margin: 20px auto 0; }
#s04 .video-wrap2 { width: 90%; display: flex; flex-wrap: wrap; text-align: center; justify-content: center; margin: 20px auto; }
#s04 .video-wrap2 iframe { width: 100%; margin: 0 auto 2%; }
.s04-cont { width: 100%; margin: 2% auto; padding: 2%; position:relative;  }
.s04-cont h5 { font-size: 2.0rem; font-weight: normal; position: relative; z-index: 1; color:#0171BB; text-align: left; line-height: 1.8; margin-bottom: 1rem; display: block; }
.s04-cont h5 span.num {  display:block; background: #0097E0; color: #fff; padding:2rem 1rem; border: double 6px #fff; border-radius: 100%; text-align: center; width: 50%; margin: 0 auto; }
.s04-cont h5 span.text { font-size: 2.0rem; font-weight: bold; color:#0097E0; line-height: 1.3; text-align: center; display: block; }
.s04-cont h5 span.smalltext { display:block; font-size: 1.4rem; }
.s04-cont p { line-height: 1.6; padding: 0 2rem; font-size: 1.8rem; margin: 1rem auto; }
.s04-cont .point { width: 100%; margin: 10px auto; display: block; }
.s04-cont .point p { background: #ff4500; color: #fff; padding: 1rem 4rem; border-radius: 50%; font-weight: bold; text-align: center; }
.s04-cont .point2 { width: 100%; margin: 10px auto; display: block; }
.s04-cont .point2 p { background: #ff4500; color: #fff; padding: 1rem 2rem; border-radius: 50%; font-weight: bold; text-align: center; }
.s04-cont-mini-wrap { display: flex; flex-wrap: wrap; margin: 2rem auto; }
.s04-cont-mini-wrap .s04-cont-mini { width: 46%; margin: 2%; font-size: 1.3rem; }
.s04-cont-mini-wrap2 { display: block; margin: 2rem auto; }
.s04-cont-mini-wrap2 .s04-cont-mini { margin: 2%; }

.s04-cont-mini img { width: 100%; height: auto; border: solid 1px #ccc; }
.s04-cont-mini p { text-align: center; font-size: 1.3rem; padding: 0; color: #333; }

/*オンライン夏期講習*/
.summer-2{width:90%; margin: 20px auto; padding: 1rem; display: block; border: solid 10px #004197; box-shadow: 3px 3px 3px 0px rgb(0 0 0 / 60%); border-radius: 20px;}
.summer-2 h4{color:#004197; font-size:3rem; width: 100%;line-height: 2;letter-spacing: -2px; margin: 0; font-weight: bold; text-align: center;}
.summer-2 .midashi{ margin: 0 auto;}
.summer-2 h4.sub{color:#004197; font-size:2rem; width: 100%;line-height: 2;letter-spacing: 0; margin: 0;}
.summer-2 .innner{position: relative; background-color: #fffde9; width: 95%; margin:10px auto; padding: 10px;}
.summer-2 h4 span.title{ background: linear-gradient(transparent 70%, #fffb8e 70%);font-size:2rem;
    letter-spacing: 8px;}
.summer-2 h4 span.title2{font-size:1.6rem;}
.summer-2 h4 span.title3{font-size:4rem;}
.summer-2 .price{border:#004197 5px solid; background-color:#ffffff; padding: 0;}
.summer-2 .price h5{background-color:#004197; color: #ffffff; font-weight: bold; font-size:1.6rem; padding: 5px; line-height: 1.6;}
.summer-2 p{font-size:1.6rem; font-weight: bold; margin-bottom: 10px; line-height: 1.4;}
.summer-2 p span.red{font-size:3rem; color:#e60012; font-weight: bold; font-style: oblique;}
.summer-2 p span.zeikomi{font-size:1.2rem;}
.summer-2 .flex{display:block; margin-bottom: 10px;}
.summer-2 .flex2{display: block; margin: 20px 0; padding:0 20px;}
.summer-2 .flex3{display: flex; flex-direction: column;}
.summer-2 p.hukidashi{text-align: center; margin-top: 10px;}
.summer-2 p.desktop,.summer-2 p.smart,.summer-2 p.tb{background-color: #004197; color:#ffffff; border-radius: 50%;padding: 15px;  text-align: center; margin: 10px 1%; font-size: 1rem;}
.summer-2 .sp-hukidashi{ display: flex; justify-content: space-around;}
.summer-2 a{  width: 100%; display: block; margin: 0 auto; background: #ff4500; padding: 1rem; color: #fff; text-align: center;
font-size: 1.4rem; font-weight: bold; text-decoration: none;}
.summer-2  a:hover { background: #666 }

#s05 {}
#s05 p.lead { width: 100%; margin: 20px auto; line-height: 2.0; text-indent: 1rem; text-align: center; }
#s05 .smallfont { font-size:1.3rem; }
.s05-cont-wrap { display: block; width: 100%; margin: 0 auto; }
.s05-cont p { display: block; font-size: 1.8rem; font-weight: bold; color: #ff4500; margin-top: 1rem; }
.s05-cont { display: block; width: 95%; margin: 2% auto; padding: 20px 10px; background-color: #fff;filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));}
.s05-cont .voice{ display: block; border-bottom: double 4px #000000; margin: 1rem 1% 1% 1%;}
.s05-cont p.initial { display: block; text-align: right; font-size: 1.2rem; color: #000000; }
.s05-cont p{ display: block; font-size: 1.4rem; color: #000000;}
.s05-cont h4 { display: block; font-size: 2rem; font-weight: bold; color:#EB1014;  margin-top: 1rem;}
.s05-cont h5 { display: block; font-size: 1.6rem; font-weight: bold; color:#000000;  margin: 1rem auto 0.5rem;}

.s06-cont-wrap { display: flex; width: 100%; margin: 0 auto; }
.s06-cont { margin: 2%; position:relative }
.s06-cont h4 { font-size: 1.8rem; font-weight: bold; text-align: center; margin-bottom: 1rem; }
.s06-cont dl { width: 100%; padding: 1rem; margin: 1rem auto; border-bottom: dashed 1px #ccc; display: block; font-size: 1.8rem; }
.s06-cont dl dt { width: 100%; margin-right: 1%; font-weight: bold; background: #ccc; padding: 1rem; }
.s06-cont dl dd { width: 100%; line-height: 1.6; }
.s06-cont dl dd span.bigfont { font-weight: bold; color: #e60012; font-size: 2.6rem; }
.s06-cont dl dd span.normal{ color:#000; font-size: 1.6rem;}
.s06-cont dl dd p.august{ font-size: 1.6rem;}
.s06-cont dl dd p.august span{ font-size: 2rem;color:#e60012; font-weight: bold;}
.s06-cont dl dd  p.august span.taxfont { font-size: 1.6rem; color:#444; font-weight: normal; }

.s06-cont ul li span:nth-of-type(1) { width: 20%; }
.s06-cont ul li span:nth-of-type(2) { width: 30%; }
.s06-cont ul li span:nth-of-type(3) { width: 30%; }

.s06-fc-wrap { width: 90%; margin: 20px auto; text-align: center; }
.s06-fc-wrap h5 { margin: 2rem 0; font-size: 2.0rem; color: #000; line-height: 1.4; font-weight: bold; }
.s06-fc-wrap p { font-size: 1.4rem; color: #000; }

/*オンラインここが安心*/
.safety{width:90%; margin: 20px auto; padding: 1.6rem; display: block; border: solid 10px #009944; box-shadow: 3px 3px 3px 0px rgb(0 0 0 / 60%); border-radius: 20px;}
.safety h4 {font-size:1.6rem; width: 100%; line-height: 2; margin-bottom: 10px; font-weight: bold; text-align: center;}
.safety h4.sub {margin-bottom: -10px;}
.safety h4 span{font-size: 2rem; color:#009944;}
.safety h4.sub span{font-size: 2rem; color:#444;}
.safety h4.sub span.red{color:#e60012; font-size: 2rem;}
.safety h4.sub span.light-blue{color:#0098e0; font-size: 2rem;}
.safety .innner{position: relative; background-color: #fffde9; width: 95%; margin: 0 auto; padding: 10px;}
.safety .student{border:#009944 5px solid; background-color:#ffffff; padding: 0; margin-bottom: 30px;}
.safety .parents{border:#009944 5px solid; background-color:#ffffff; padding: 0; margin-bottom: 0px;}
.safety h5{ background-color: #009944; color: #ffffff;font-weight: bold;font-size: 1.6rem;padding: 10px;}
.safety .student ul, .safety .parents ul {margin: 20px 10px;}
.safety .student ol, .safety .parents ol {position: relative; margin: 20px;font-size: 1.6rem;margin-left: 1em;left: 1em;}
.safety .student ol .number, .safety .parents ol .number { position: absolute;display: inline-block;width: 25px;height: 25px;color: #ffffff;background-color: #009944;border-radius: 50%;top: 3px;left: -2em;text-align: center;line-height: 25px;}
.safety .student ol .green, .safety .parents ol .green { display: inline-block; color:#009944; line-height: 30px; font-size: 2.0rem; margin-bottom: 5px;}



.s07-cont-wrap { width: 100%; margin: 0 auto; }
.s07-cont-wrap dl { display: block; margin:1px auto; }
.s07-cont-wrap dl dt { width: 100%; padding: 2rem 1rem 0 2rem; color: #0171BB; font-size: 1.8rem; font-weight: bold; }
.s07-cont-wrap dl dd { width: 100%; padding: 1rem; display: block; font-size: 1.8rem; justify-content: bottom; align-items: center; }.s07-cont-wrap dl dd input { border: solid 1px #666; border-radius: 10px; padding: 1.4rem; margin: 1rem; font-size: 2.0rem; }
.s07-cont-wrap dl dd input[type=text] { width: 100%; }
.s07-cont-wrap dl dd input[type=tel] { width: 100%; }
.s07-cont-wrap dl dd input[type=email] { width: 100%; }
.s07-cont-wrap dl dd input[type=submit] {  display: block; margin: 0 auto; }
.s07-cont-wrap dl dd input[type=reset] {  padding: 0.7rem; font-size: 1.4rem; }
.s07-cont-wrap dl dd textarea { width: 100%; height: 15rem; padding: 1rem; margin: 1rem; font-size: 2.4rem; line-height: 1.6; border: solid 1px #666; border-radius: 10px; }
.summer {width: 90%;margin: 20px auto;padding: 1rem;display: block;border: solid 10px #009944;box-shadow: 3px 3px 3px 0px rgb(0 0 0 / 60%);border-radius: 20px;}
.summer img{width: 90%;display: block;margin: 10px auto;}
.summer a{  width: 100%; display: block; margin: 0 auto; background: #ff4500; padding: 1rem; color: #fff; text-align: center;
font-size: 1.4rem; font-weight: bold; text-decoration: none;}
.summer a:hover { background: #666}


footer { width: 100%; padding: 5rem; text-align: center; background: #333; }
footer p { color: #fff; font-size: 1.8rem; padding: 1rem 0; }
footer p a { color: #fff; }











} @media print, screen and (min-width:768px) {
/* PC */

.sp { display: none; }
#nav-drawer { display: none; }

/* GO2TOP button */
#page-top { position:fixed; bottom:0px; right:20px; /*font-size: 77%;*/ z-index:100; }
#page-top span { display:none; }
#page-top a { text-decoration:none; color:#fff; padding:0; text-align:center; display:block; border-radius:12px; }
#page-top a img { display:block; width:46px; height:46px; margin:0 0 0 0!important; padding:0; background:rgba(255,255,255,0.6); border-radius:10px; }

body { position: relative; }

header { width: 100%; height: auto; }
#header-l1 { width: 100%; height: 80px; display: flex; align-items: flex-end; padding: 10px 2%; }
header h1 { width: 50%; height: 100%; }
header h1 a { width: 100%; height: 100%; display: block; text-indent: -9999px; background: url(images/logo.svg) no-repeat; background-size: contain; background-position: right; }
header .telnum { width: 50%; text-align: right; display: flex; }
header .telnum p { display: inline-block; padding: 1rem 1rem 0; margin-right: 3rem; }
header .telnum p span { font-size: 2.6rem; padding-left: 1rem; }
header .telnum p a.tel-btn {  font-size: 3.0rem; font-weight: bold; color: #000; text-decoration: none; }
header .telnum a.inq-btn { padding: 1rem 2rem; font-size: 1.6rem; font-weight: bold; background: #ff4500; color: #fff; text-decoration: none; }
header .telnum a:hover { opacity: 0.7; }

nav { width: 100%; display: block; background: none; padding: 0 0 5px 0; }
nav ul { width: 100%; display: flex; justify-content: space-around; }
nav ul li { padding: 0; }
nav ul li a { display: block; padding: 2rem; text-decoration: none; color: #333; position: relative; font-size: 1.4rem; font-weight: bold; border-bottom: solid 2px #0097E0; }
nav ul li a:hover { color: #fff; background: #0097E0; }

nav.content-nav { width: 100%; display: block; background: none; padding: 0; margin: 7rem 0 0 0; background: #0097E0;border: solid 2px #0097E0; }
.content-nav a { border: none; color: #fff; }
.content-nav a:hover { background: #fff; color: #0097E0; }
.content-nav li.current a { background: #fff; color: #0097E0; }


.sec_slider { width:100%; height: auto; display: block; position: relative; }
.sec_slider .slider { width: 100%; height: auto; display: block; }
.sec_slider .slider-text { display: block; width: 98%; position: absolute; top: 3%; left: 1%; }
.sec_slider h2 { color: #fff; font-weight: bold; font-size: 3rem; line-height: 1.0; text-align: center;
filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));}
.sec_slider h2 img { width: auto; height: 40px; }
.sec_slider h3 { width: 60%; margin: 1% 0 0 5%; }
.sec_slider h3 img { width: 100%; height: auto; }
.sec_slider h4 { width: 100%; }
.sec_slider h4 img { height: 120px; width: auto; display: block; margin: 0 auto; filter: drop-shadow(2px 2px 1px rgb(255,255,255)); }


.sections { margin: 0 auto 40px; padding: 50px 0 20px; display: block; width: 100%; }
.sections h3 { width: 70%; margin:20px auto; display: block; text-align: center; font-size: 3.2rem; line-height: 1.4; border-bottom: double 5px #0097E0; position: relative; background: url(images/icon01.svg) no-repeat left bottom; background-size:contain; }
.sections p { font-size: 1.6rem; line-height: 1.6; }

.inq-btn-area { width: 70%; margin: 50px auto; padding: 2rem; display: block; /*background: #fffeee;*/ border: solid 10px #e60012; box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.6); border-radius: 20px; }
.inq-btn-area h4 { color: #e60012; padding: 1rem 0; text-align: center; border-bottom: solid 2px #e60012; font-size: 5.0rem; font-weight: bold; letter-spacing: 1rem; }
.inq-btn-area h5 { font-size: 2.0rem; font-weight: bold; color: #000; text-align: center; margin: 2rem auto; display: flex; justify-content: center; align-items: center; }
.inq-btn-area h5 span:nth-of-type(1) { font-size: 4.0rem; color: #fff; background: #e60012; display: inline-block; padding: 2rem; border-radius: 50%; }
.inq-btn-area h5 span:nth-of-type(2) { font-size: 10rem; font-weight: bold; color: #e60012; }
.inq-btn-area a { width:70%; display: block; margin: 0 auto; background: #ff4500; padding: 2rem; color: #fff; text-align: center; font-size: 2.4rem; font-weight: bold; text-decoration: none; }
.inq-btn-area a:hover { background: #666 }

.inq-btn-area2 { width: 70%; margin: 20px auto; padding: 2rem; display: block; background: #0097c1; border: solid 10px #0b3c51; box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.6); border-radius: 20px; }
.inq-btn-area2 h4 { color: #fff; padding: 1rem 0; text-align: center; border-bottom: solid 2px #fff; font-size: 5.0rem; font-weight: bold; letter-spacing: 1rem; }
.inq-btn-area2 h5 { font-size: 3.0rem; font-weight: bold; color: #fff; text-align: center; margin: 2rem auto; display: flex; justify-content: center; align-items: center; }
.inq-btn-area2 h5 span:nth-of-type(1) { font-size: 4.0rem; color: #fff; background: #e60012; display: inline-block; padding: 2rem; border-radius: 50%; }
.inq-btn-area h5 span:nth-of-type(2) { font-size: 10rem; font-weight: bold; color: #e60012; }
.inq-btn-area2 a { width:70%; display: block; margin: 0 auto; background: #fff; padding: 2rem; color: #0b3c51; text-align: center; font-size: 2.4rem; font-weight: bold; text-decoration: none; }
.inq-btn-area2 a:hover { background: #e60012; color: #fff; }
.inq-btn-area2 br{ display: none;}
.inq-btn-area img  {width: 90%; display: block; margin: 30px auto;}


#s02 p.lead{ width: 70%; margin: 20px auto; line-height: 2.0; text-indent: 1rem; }
#s02 h4 { width: 70%; color: #e60012; text-align: center; font-size: 4.0rem; font-weight: bold; margin: 20px auto; }

#s02 .s02-wrap { width: 80%; display: flex; margin: 20px auto; justify-content: center; }
#s02 .s02-wrap .s02-wrap-cont { width:calc(90% / 5); margin: 0 2%; padding: 4rem 1rem; background: #0097E0; border-radius: 50%; height: 150px; text-align: center; }
#s02 .s02-wrap .s02-wrap-cont h5 { font-size: 2.0rem; font-weight: bold; color: #fff; line-height: 1.4; }
#s02 .s02-wrap .s02-wrap-cont h5 span { color: #e60012; }


/*オンライン夏期講習*/
.summer-2{width:70%; margin: 50px auto; padding: 2rem; display: block; border: solid 10px #004197; box-shadow: 3px 3px 3px 0px rgb(0 0 0 / 60%); border-radius: 20px;}
.summer-2 h4{color:#004197; font-size:3rem; width: 100%;line-height: 2;letter-spacing: -2px; margin: 0; font-weight: bold; text-align: center;}
.summer-2 .midashi{ margin: 0 auto;}
.summer-2 h4.sub{color:#004197; font-size:4rem; width: 100%;line-height: 2;letter-spacing: -2px; margin: 0; margin-bottom: -50px;}
.summer-2 .innner{position: relative; background-color: #fffde9; width: 90%; margin: 30px auto; padding: 20px;}
.summer-2 h4 span.title{ background: linear-gradient(transparent 70%, #fffb8e 70%);font-size:8rem;
    letter-spacing: 10px;}
.summer-2 h4 span.title2{font-size:3rem;}
.summer-2 h4 span.title3{font-size:12rem;}
.summer-2 .price{border:#004197 5px solid; background-color:#ffffff; padding: 0;}
.summer-2 .price h5{background-color:#004197; color: #ffffff; font-weight: bold; font-size:2rem; padding: 5px;}
.summer-2 p{font-size:1.8rem; font-weight: bold; margin-bottom: 30px;}
.summer-2 .flex{ justify-content:space-between; }
.summer-2 .flex2 p:first-of-type{ width:70%; }
.summer-2 .flex2 p:nth-of-type(2){ width:30%; text-align:right; }
.summer-2 .flex2 .flex3{ width:30%; }
.summer-2 .flex2 .flex3 p{ width:100%; text-align:right; }

.summer-2 p span.red{font-size:4.5rem; color:#e60012; font-weight: bold; font-style: oblique;}
.summer-2 p span.zeikomi{font-size:2rem;}
.summer-2 .flex{display: flex; justify-content:space-around; flex-wrap:wrap; margin-bottom: 10px;}
.summer-2 .flex2{display: flex; justify-content: space-between; align-items:center; flex-wrap:wrap; margin: 20px 0; padding:0 20px;}
.summer-2 .flex3{display: flex; flex-direction: column; align-items: flex-end;}
.summer-2 .flex3 small{margin-top: -20px;}
.summer-2 .sp-hukidashi{display: flex;}
.summer-2 p.hukidashi{padding:20px 20px 20px 0; margin-left: 0;}
.summer-2 p.desktop{background-color: #004197; color:#ffffff; border-radius: 50%;padding: 20px; margin-right: 20px;}
.summer-2 p.smart{background-color: #004197; color:#ffffff; border-radius: 50%; padding: 20px 30px; margin-right: 20px;}
.summer-2 p.tb{background-color: #004197; color:#ffffff; border-radius: 50%; padding: 20px;}
.summer-2  a{width: 70%; display: block; margin: 0 auto; background: #ff4500; padding: 2rem; color: #fff; text-align: center;font-size: 2.4rem;font-weight: bold;text-decoration: none;}
.summer-2  a:hover { background: #666 }



#s04 { /*background: #F8F8FF;*/ }
#s04 h4 { width: 70%; background: #e60012; padding: 1rem 0; text-align: center; color:  #fff; font-size: 4.0rem; font-weight: bold; margin: 20px auto; }
#s04 p.lead { width: 70%; margin: 20px auto; line-height: 2.0; text-indent: 1rem; text-align: center; }
#s04 .video-wrap { width: 100%; display: block; text-align: center; }
#s04 .video-wrap iframe { width: 560px; height: 315px; }
#s04 .video-wrap2 { width: 100%; display: flex; flex-wrap: wrap; text-align: center; justify-content: center;}
#s04 .video-wrap2 iframe { width: 40%; height: 300px; margin: 2%; }
.s04-cont-wrap { display: block; width: 70%; margin: 0 auto; }
.s04-cont { width: 100%; margin: 2% auto; padding: 2%; position:relative;  }
.s04-cont h5 { font-size: 2.4rem; font-weight: normal; position: relative; z-index: 1; color:#0171BB; text-align: left; line-height: 1.8; margin-bottom: 1rem; display: flex; align-items: center; }
.s04-cont h5 span.num { background: #0097E0; color: #fff; padding:3rem 2rem; margin-right: 2rem; border: double 6px #fff; border-radius: 100%; }
.s04-cont h5 span.text { font-size: 3.0rem; font-weight: bold; color:#0097E0; line-height: 1.3; }
.s04-cont h5 span.smalltext { display:block; font-size: 1.8rem; }
.s04-cont p { line-height: 1.6; padding: 0 2rem; font-size: 1.8rem; margin: 1rem auto; }
.s04-cont .point { width: 70%; margin: 10px auto; display: flex; justify-content: space-around; align-items: center; }
.s04-cont .point p { background: #ff4500; color: #fff; padding: 1rem 3rem; border-radius: 50%; font-weight: bold; font-size: 1.5rem; }
.s04-cont .point2 { width: 100%; margin: 10px auto; display: flex; justify-content: space-around; align-items: center; }
.s04-cont .point2 p { background: #ff4500; color: #fff; padding: 1rem 2rem; border-radius: 50%; font-weight: bold; text-align: center; font-size: 1.5rem; }
.s04-cont-mini-wrap { display: flex; flex-wrap: wrap; margin: 2rem auto; }
.s04-cont-mini-wrap .s04-cont-mini { width: 46%; margin: 2%; }
.s04-cont-mini-wrap2 { display: flex; margin: 2rem auto; }
.s04-cont-mini-wrap2 .s04-cont-mini { margin: 2%; }

.s04-cont-mini img { width: 100%; height: auto; border: solid 1px #ccc; }
.s04-cont-mini p { text-align: center; font-size: 1.3rem; color: #333; padding: 0; }


#s05 h3 br{ display: none;}
#s05 p.lead { width: 70%; margin: 20px auto; line-height: 2.0; text-indent: 1rem; text-align: center; }
#s05 .smallfont { font-size:1.3rem; }
.s05-cont-wrap { display: flex; flex-wrap: wrap; width: 70%; margin: 0 auto; }
.s05-cont { width: 46%; margin: 2%; padding: 20px 10px; background-color: #fff;filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));}
.s05-cont .voice{ display: flex; justify-content: space-between; border-bottom: double 4px #000000; margin: 1rem 1% 1% 1%;}
.s05-cont p.initial { display: block; text-align: right; font-size: 1.2rem; color: #000000; }
.s05-cont p{ display: block; font-size: 1.4rem; color: #000000;}
.s05-cont h4 { display: block; font-size: 1.8rem; font-weight: bold; color:#EB1014;  margin-top: 1rem;}
.s05-cont h5 { display: block; font-size: 1.4rem; font-weight: bold; color:#000000;  margin: 1rem auto 0.5rem; margin-left: 10px;}

.s06-cont-wrap { display: flex; width: 60%; margin: 0 auto; }
.s06-cont { margin: 2%; position:relative; width: 100%; }
.s06-cont h4 { font-size: 1.8rem; font-weight: bold; text-align: center; margin-bottom: 1rem; }
.s06-cont dl { width: 100%; padding: 1rem; margin: 1rem auto; border-bottom: dashed 1px #ccc; display: flex; flex-wrap: wrap; font-size: 1.8rem; }
.s06-cont dl dt { width: 20%; margin-right: 1%; font-weight: bold;  }
.s06-cont dl dd { width: 79%; line-height: 1.6; }
.s06-cont dl dd  span.taxfont {font-size: 0.7em;}
.s06-cont dl dd p.august{ font-size: 2rem;}
.s06-cont dl dd p.august span{ font-size: 3rem;color:#e60012; font-weight: bold;}
.s06-cont dl dd  p.august span.taxfont { font-size: 0.7em; color:#444; font-weight: normal; }
.s06-cont dl dd span.bigfont { font-weight: bold; color: #e60012; font-size: 2.6rem; }
.s06-cont dl dd span.taxfont { font-size: 0.7em; }
.s06-cont dl dd span.normal{font-size: 1.2em;}

.s06-cont ul li span:nth-of-type(1) { width: 20%; }
.s06-cont ul li span:nth-of-type(2) { width: 30%; }
.s06-cont ul li span:nth-of-type(3) { width: 30%; }

.s06-fc-wrap { width: 70%; margin: 20px auto; text-align: center; }
.s06-fc-wrap h5 { margin: 2rem 0; font-size: 3.0rem; color: #000; line-height: 1.4;}
.s06-fc-wrap p { font-size: 2.0rem; color: #000; }

/*オンラインここが安心*/
.safety{width:70%; margin: 50px auto; padding: 2rem; display: block; border: solid 10px #009944; box-shadow: 3px 3px 3px 0px rgb(0 0 0 / 60%); border-radius: 20px;}
.safety h4 {font-size:3rem; width: 100%; line-height: 2; margin: 0; font-weight: bold; text-align: center;}
.safety h4.sub {margin-bottom: -30px;}
.safety h4 span{font-size: 8rem; color:#009944;}
.safety h4.sub span{font-size: 3rem; color:#444;}
.safety h4.sub span.red{color:#e60012; font-size: 3rem;}
.safety h4.sub span.light-blue{color:#0098e0; font-size: 3rem;}
.safety .innner{position: relative; background-color: #fffde9; width: 90%; margin: 30px auto; padding: 20px;}
.safety .student, .safety .parents{border:#009944 5px solid; background-color:#ffffff; padding: 0; margin-bottom: 30px;}
.safety h5{ background-color: #009944; color: #ffffff;font-weight: bold;font-size: 2rem;padding: 10px;}
.safety .student ul, .safety .parents ul {margin: 20px 10px;}
.safety .student ol, .safety .parents ol {margin: 20px 0; font-size: 2rem;}
.safety .student ol .number, .safety .parents ol .number { display: inline-block; width: 25px; height: 25px; color:#ffffff; background-color: #009944; border-radius: 50%; margin-right: 10px; text-align: center; line-height: 25px; margin-bottom: 5px;}
.safety .student ol .green, .safety .parents ol .green { display: inline-block; color:#009944; line-height: 30px; font-size: 2.5rem; margin-bottom: 5px;}

.s07-cont-wrap { width: 1000px; margin: 0 auto; }
.s07-cont-wrap dl { display: flex; margin:1px auto; }
.s07-cont-wrap dl dt { width: 20%; padding: 2rem 1rem 0 2rem; color: #0171BB; font-size: 1.8rem; font-weight: bold; }
.s07-cont-wrap dl dd { width: 80%; padding: 1rem; display: flex; font-size: 1.8rem; justify-content: bottom; align-items: center; }
.s07-cont-wrap dl dd input { border: solid 1px #666; border-radius: 10px; padding: 1.4rem; margin: 1rem; font-size: 2.0rem; }
.s07-cont-wrap dl dd input[type=text] { width: 100%; }
.s07-cont-wrap dl dd input[type=tel] { width: 100%; }
.s07-cont-wrap dl dd input[type=email] { width: 100%; }
.s07-cont-wrap dl dd input[type=submit] { width: 40%; margin-left: 10rem; }
.s07-cont-wrap dl dd input[type=reset] { width: 40%; padding: 0.7rem; font-size: 1.4rem; }
.s07-cont-wrap dl dd textarea { width: 100%; height: 15rem; padding: 1rem; margin: 1rem; font-size: 2.4rem; line-height: 1.6; border: solid 1px #666; border-radius: 10px; }

/*夏期講習案内*/
.summer{width: 70%;margin: 50px auto;padding: 2rem;display: block;border: solid 10px #009944;box-shadow: 3px 3px 3px 0px rgb(0 0 0 / 60%);border-radius: 20px;}
.summer img{width: 90%;display: block;margin: 30px auto;}
.summer  a{width: 70%; display: block; margin: 0 auto; background: #ff4500; padding: 2rem; color: #fff; text-align: center;font-size: 2.4rem;font-weight: bold;text-decoration: none;}
.summer  a:hover { background: #666 }



footer { width: 100%; padding: 5rem; text-align: center; background: #333; }
footer p { color: #fff; font-size: 1.8rem; padding: 1rem 0; }
footer p a { color: #fff; }

}