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

/*----------------------------------------------------------------------------
 ***                                                                Container
----------------------------------------------------------------------------*/
body {}
body{ border:none;}
#wrap {width: 100%;}

body,h1,h2,h3,h4,h5,h6,td,th,div,p,input,textarea,pre,ul,ol,li,address,header,footer,nav,article,section,aside{
	color:#4D4D4D;
	line-height:1em;
/*    font-family:'メイリオ',"Hiragino kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 'Meiryo UI',Verdana,'ＭＳ Ｐゴシック',sans-serif;*/
    font-family:"游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    
}

/*----------------------------------------------------------------------------
 ***                                                                  Header
----------------------------------------------------------------------------*/
#headerArea {height: auto;padding: 10px 0 10px;border-bottom: 3px solid #00a1c9;border-top: 20px solid #00a1c9;}
#headerAreaLogo {}
#headerAreaInner {height: auto;position: relative; max-width: 860px;margin: 0 auto;}
#headerAreaTitle{}
#headerArea h1{position:initial;}
#headerLink{position: static;width: 248px;top: 0;right: 0;padding: 0;}

#headerArea .ttlTxt{font-size: 11px; color: #fff; font-weight: normal; position: absolute; top: -28px; line-height: 1.6; margin: 0; padding: 0;}
#headerArea .ttlSub{position: absolute; top: -28px;  right: 0; color: #fff; font-size: 11px; text-align: right; width: 400px; line-height: 1.6; margin: 0; padding: 0;}

/*----------------------------------------------------------------------------
***                                                            breadcrumbArea
----------------------------------------------------------------------------*/
#breadcrumbArea{ max-width: 950px; margin: 0 auto;width: 100%;}
#breadcrumbArea li{ float:left; font-size:10px; }
#breadcrumbArea li a{ display:block; background:url(https://www.nova.co.jp/common_images/icon_list03.gif) right 50% no-repeat; padding-right:25px;}




/*----------------------------------------------------------------------------
 ***                                                       Header - gNavi
----------------------------------------------------------------------------*/
#mainView{width: 100%; background: linear-gradient(90deg, #2484c1 0%, #2484c1 50%, #34bb80 50%, #34bb80 100%);}
#mainView .mainTtl{display: block; width: 100%; max-width: 1150px; margin: 0 auto;}
#mainView .mainTtl img {width: 100%; height: auto;}


/*----------------------------------------------------------------------------
 ***                                               contentsArea, mainsection
----------------------------------------------------------------------------*/
#mainSection{width: 100%;}

#contentsArea {}
#contentsAreaInner {}
#contentsArea .section {width: 100%; padding: 5em 0;}
#contentsArea .sectionInner {width: 90%; max-width: 950px; margin: 0 auto;}
#contentsArea .secTtl {font-size: 330%; text-align: center; color: #00698f;}
#contentsArea .secTtl span{background: linear-gradient(#fff0 70%, #a6e5c6 0%);line-height: 1.3;}

/*----------------------------------------------------------------------------
 ***                                                                aboutSec 
----------------------------------------------------------------------------*/
#aboutSec.section {background-color: #eaeff3; padding-top: 1em;}
#aboutSec .aboutHybridBox {background-color: #fff;padding: 3.5em;box-sizing: border-box;margin-bottom: 4em;margin-top: 4em;}
#aboutSec .aboutHybridBox .txt {font-size: 170%; line-height: 1.3; font-weight: bold;}
#aboutSec .aboutHybridBox .txt span {display: block; margin-top: 0.5em;font-size: 170%; color: #00698f; text-decoration: underline;}
#aboutSec .bigTxt {font-size: 200%; line-height: 1.4; font-weight: bold; color: #cc1c24; margin: 0.5em 0 0 0; padding: 0;}

.taikenBtnBox a {display: block; width: 100%; max-width: 350px; background-color: #cc1c24; color: #fff; font-weight: bold; font-size: 160%; padding: 0.7em;border-radius: 2em;margin: 1.2em auto 0 auto; line-height: 1.2}

/*----------------------------------------------------------------------------
 ***                                                                pointUl 
----------------------------------------------------------------------------*/

#pointSec.section {padding-bottom: 0;}
#pointSec .pointUl .pointLi {margin: 5em 0 0 0;}
#pointSec .pointTtlBox {width: 100%; border-left: 10px solid #00698f;padding:  1.5em 2em;box-sizing: border-box;}
#pointSec .pointTtlBox .leftBox {margin-right: 4em; position: relative; width: 14%;}
#pointSec .pointTtlBox .leftBox img {width: 100%; height: auto;}
#pointSec .pointTtlBox .leftBox:after {content: ""; display: block; width: 2px; height: 2em; background-color: #00698f; position: absolute; right: -2em; top: 0.75em;}
#pointSec .pointTtlBox .rightBox {width: 100%;}
#pointSec .pointTtlBox .rightBox .pointTtl {font-size: 240%; margin: 0.2em 0 0.75em 0;}
#pointSec .pointTtlBox .rightBox .pointTtl span {color: #cc1c24;}
#pointSec .pointTtlBox .rightBox .pointDetail {font-size: 135%; line-height: 1.2; padding: 0;}
#pointSec .pointTtlBox .naraBox {width: 900%; max-width: 820px;}



#pointSec .naraBox {margin-top: 2em;}
#pointSec .naraBox .point01case {max-width: 630px; margin: 0 auto;}
#pointSec .naraBox .point01case .point01caseLi {background-color:#e8e8e8; margin-top: 1em;border-radius: 2.5em;position: relative;padding: 0 0 0 5em;}
#pointSec .naraBox .point01case li .caseNum {background-color: #c3d5e8; width: 5em; height: 5em; border-radius: 50%; padding: 0.75em 1em 1em 1em; box-sizing: border-box;position: absolute;left: 0;top:  50%;transform: translateY(-50%);}
#pointSec .naraBox .point01case li .caseNum img {width: 100%; height: auto;}
#pointSec .naraBox .point01case li .caseDetail{width: calc(100% - 7em); padding: 1em; }
#pointSec .naraBox .point01case li .caseDetail .concern {font-size: 120%; font-weight: 500; padding: 0; margin-bottom: 0.5em;}
#pointSec .naraBox .point01case li .caseDetail .solution {font-size: 140%; padding: 0;color: #cc1c24;font-weight: bold;}



#pointSec .naraBox .exampleBox {width: 90%; max-width: 820px; margin: 2.5em auto 0;}
#pointSec .naraBox .exampleBox p {margin: 0; padding: 0;}
#pointSec .naraBox .exampleBox .img {margin-top: 2.5em; width: 100%;}
#pointSec .naraBox .exampleBox .img img{width: 100%; height: auto;}

#pointSec .rightImgBox {width: calc(86% - 5em); margin: 0 0 0 auto;}
#pointSec .rightImgBox img {width: 100%; height: auto;}
#pointSec .rightBtnBox {width: calc(86% - 5em); margin: 0 0 0 auto;}
#pointSec .rightBtnBox a {display: block; background-color: #e3e9ed; width: 80%; max-width: 300px; color: #003d66; font-weight: bold; font-size: 150%; padding: 0.75em; text-align: center; border-radius: 2em;}
#pointSec .rightBtnBox a:hover {text-decoration: none;}
#tokuchouBox { background-color: #2484c2; width: 100%;padding: 5em 0;}
#tokuchouBox .sectionInner{position: relative;}
#tokuchouBox .usagi {width: 15%; padding: 0; position: absolute; bottom: -5em; right: 0;}
#tokuchouBox .usagi img {width: 100%; height: auto;}
#tokuchouBox .tokuchoTtl {font-size: 330%; color: #fff;}
#tokuchouBox .tokuchouUl {width: 100%; align-items:stretch; margin-top: 2em;}
#tokuchouBox .tokuchouUl li {width: 32%; background-color: #fff; padding: 1em;box-sizing: border-box;font-size: 150%;font-weight: bold;}
#tokuchouBox .tokuchouUl li .img {margin-right: 1em;width: 35%;}
#tokuchouBox .tokuchouUl li .img img {width: 100%; height: auto;}
#tokuchouBox .tokuchouUl li:last-child .img {margin-right: 0;}
#tokuchouBox .tokuchouUl li .txt span {display: inline-block; line-height: 1.1; margin-bottom: 0.5em; font-size: 60%;}
#tokuchouBox .btn {width: 90%; max-width: 350px; margin: 3em auto 0 auto; padding:0;}
#tokuchouBox .btn a {display: block; background-color: #b1d4f2; border: 3px solid #fff; border-radius: 2em; color: #003d66; text-align: center; padding: 0.9em; font-size: 170%; font-weight: bold;}
#tokuchouBox .btn a:hover {text-decoration: none;}



#nagareSec { background-color: #c8dae5; width: 100%; padding: 5em 0;}
#nagareSec .nagareTtl {font-size: 330%; color: #00698f; margin-bottom: 1em;}
#nagareSec .nagareOl {}
#nagareSec .nagareLi {background-color: #fff; padding: 2em; margin-bottom: 4.5em; box-sizing: border-box; border: 5px solid #7d96c6; border-radius: 1.5em; position: relative;}
#nagareSec .nagareLi:after {content: url(https://www.nova.co.jp/hybrid/images/img_contents12.png);position: absolute;bottom: -62px;left: 50%;transform: translateX(-50%);}
#nagareSec .nagareLi .txt {font-size: 145%; font-weight: bold; line-height: 1.4;padding: 0;margin: 0;}
#nagareSec .nagareLi .taikenBtnBox {padding: 0; margin: 0;}
#nagareSec .nagareLi.finish { background-color: #055c9b; padding: 1.2em; margin: 0;}
#nagareSec .nagareLi.finish .txt {color: #fff; font-size: 200%;}
#nagareSec .nagareLi.finish:after {display: none;}

#ryoukinSec .bigTxt {font-size: 200%; line-height: 1.4; font-weight: bold; color: #cc1c24; margin: 1em 0 0.3em 0; padding: 0;}
#ryoukinSec .txt {font-size: 150%; line-height: 1.3; font-weight: bold;}
#ryoukinSec .pointRyoukinBox {width: 90%; max-width: 550px; margin: 2em auto 0.5em auto; border: 3px solid #c8dae5;box-sizing: border-box; position: relative;}
#ryoukinSec .pointRyoukinBox .pointRyoukinUl{width: 100%; border: 5px solid #9ebbd8; background-color: #f0f9ff; font-size: 200%; font-weight: bold;box-sizing: border-box;}
#ryoukinSec .pointRyoukinBox .pointRyoukinUl li {margin: 1em 1em 1em 0.5em;}
#ryoukinSec .pointRyoukinBox .pointRyoukinUl .point{display: inline-block; width: 31%; border-right: 1px solid #c5c5c5; margin-right: 1em; padding-right: 0.5em;text-align: center;color: #055c9b;}
#ryoukinSec .pointRyoukinBox .pointRyoukinUl .ryoukin{display: inline-block; width: calc(69% - 2em);/* color: #055c9b; */}
#ryoukinSec .pointRyoukinBox .usagi{position: absolute; right: 0; top: 50%; transform: translate(80%,-50%); text-align: center;}
#ryoukinSec .pointAnnotationBox {width: 90%; max-width: 550px; margin: 0 auto;font-weight: bold;}
#ryoukinSec .ryoukinBox {margin-top: 3em;position: relative;}
#ryoukinSec .ryoukinBox:before {content: ""; display: block; width: 4em; border: 1px solid #bdbdbd; position: relative; top: 0; left: 50%; transform: translateX(-50%);}
#ryoukinSec .ryoukinBox .ttl {font-size: 200%;text-align: center;font-weight: bold;color: #00698f; margin-top: 2em;}
#ryoukinSec .ryoukinTable {width: 90%; max-width: 850px; margin: 1em auto 0 auto; font-size: 130%;border-spacing: 5px;border-collapse: separate;}
#ryoukinSec .ryoukinTable,
#ryoukinSec .ryoukinTable tr,
#ryoukinSec .ryoukinTable th,
#ryoukinSec .ryoukinTable td{border: none; text-align: center; font-weight: bold;vertical-align: middle;}
#ryoukinSec .ryoukinTable th,
#ryoukinSec .ryoukinTable td{padding: 1.25em 0.5em;line-height: 1.2;}
#ryoukinSec .ryoukinTable tr{}
#ryoukinSec .ryoukinTable .time {width: 10%; background-color: #e6ebef; border: solid #cbd7dd; border-width: 0 3px 3px 0;}
#ryoukinSec .ryoukinTable .ekimae,
#ryoukinSec .ryoukinTable .online{width: 30%; border:solid #d6dce0; border-width: 0 3px 3px 0;font-size: 130%;padding: 0;}
#ryoukinSec .ryoukinTable .lessonStyle {font-size: 110%;}
#ryoukinSec .ryoukinTable .lessonStyle span {display: inline-block; line-height: 1.2; margin-bottom: 1em;}
#ryoukinSec .ryoukinTable .lessonStyle.group {background-color: #daf1fb; border: solid #c4d9e3; border-width: 0 3px 3px 0;color: #008df1;}
#ryoukinSec .ryoukinTable .lessonStyle.mtom {background-color: #fbe9f4; border: solid #e1d0db; border-width: 0 3px 3px 0;color: #ef009a;}
#ryoukinSec .ryoukinTable .lessonStyle.mtomPhi {background-color: #eaf5e5; border: solid #cbdbc3; border-width: 0 3px 3px 0;color: #37a300;}
#ryoukinSec .ryoukinTable .midashi th{color: #fff; padding: 0.75em 0.5em;}
#ryoukinSec .ryoukinTable .midashi .lessonStyle,
#ryoukinSec .ryoukinTable .midashi .time {font-size: 110%; background-color: #646464; border: solid #383838; border-width: 0 3px 3px 0;}
#ryoukinSec .ryoukinTable .midashi .ekimae {background-color: #2484c2; border: solid #3063a3; border-width: 0 3px 3px 0; font-size: 110%;}
#ryoukinSec .ryoukinTable .midashi .online {background-color: #34bb80; border:solid #11997d; border-width: 0 3px 3px 0; font-size: 110%;}
#ryoukinSec .txtBox {width: 100%; max-width: 850px; margin: 0.5em auto 0 auto; font-weight: bold; marigin: 0; padding: 0; line-height: 1; font-size: 130%;}
#ryoukinSec .txtBox p {margin: 0; padding: 0;}
.taikenBtnBox a { width: 500px;}
.taikenBtnBox a:hover {text-decoration: none;}

#exampleSec {background-color: #e7edf1; padding: 5em 0;}
#exampleSec .exampleTtl {font-size: 330%; color: #00698f; margin-bottom: 1em;}
#exampleSec .exampleProfileBox {background-color:#ffffff; border: 3px solid #7d96c6; margin: 1em auto 3em;border-radius: 4em;position: relative; max-width: 630px; height: 8.2em; padding: 0 0 0 8em; box-sizing: border-box;}
#exampleSec .exampleProfileBox .img {background-color: #7d96c6; width: 8em; height: 8em; border-radius: 50%; box-sizing: border-box;position: absolute;left: -0.2em;top:  50%;transform: translateY(-50%);overflow: hidden;margin: 0;padding: 0;}
#exampleSec .exampleProfileBox .img img {width: 100%; height: auto;}
#exampleSec .exampleProfileBox .exampleProfileDl {padding: 0.75em 1em;width: 100%;}
#exampleSec .exampleProfileBox .exampleProfileDl dt{color: #cc1c24; font-size: 150%;}
#exampleSec .exampleProfileBox .exampleProfileDl dd.txt {font-size: 120%; line-height: 1.2}
@media screen and (max-width: 769px) {
	#exampleSec .exampleProfileBox {width: 90%; max-width: 420px; margin: 0 auto;}
}

#exampleSec .calendarBox{position:relative; max-width: 850px;}
#exampleSec .calendarBox .calendar {width: 77%; max-width: 650px;}
#exampleSec .calendarBox .img {width: 28%; max-width: 235px;position: absolute; right: 0; bottom: 0;}
#exampleSec .calendarBox .calendar img,
#exampleSec .calendarBox .img img {width: 100%; height: auto;}

#hajimeyoSec .txt {font-size: 220%;line-height: 1.2;margin-top: 1em;font-weight: bold;}
#hajimeyoSec .taikenBtnBox {font-size: 120%;}
/*----------------------------------------------------------------------------
 ***                                                                  footer
----------------------------------------------------------------------------*/
#footerArea {  }
#footerAreaInner {
    max-width: 890px;
    margin: 0 auto;
    padding: 0 20px;
    }
#footerLogo{}
#footerCopyright{}


/*----------------------------------------------------------------------------
 ***                                                              ページトップ
----------------------------------------------------------------------------*/
.pagetop {}

/*----------------------------------------------------------------------------
 ***                                                                   section
----------------------------------------------------------------------------*/
.section { }
.sectionInner {}

/*----------------------------------------------------------------------------
 ***                                                                  footer
----------------------------------------------------------------------------*/
#footerArea {  }
#footerAreaInner {
    max-width: 890px;
    margin: 0 auto;
    padding: 0 20px;
    }
#footerLogo{}
#footerCopyright{}


/*----------------------------------------------------------------------------
 ***                                                              ページトップ
----------------------------------------------------------------------------*/
.pagetop {}

/*----------------------------------------------------------------------------
 ***                                                                   section
----------------------------------------------------------------------------*/
.section { }
.sectionInner {}