@charset "utf-8"; 
/* CSS Document */
/*----------------------------------------------------------------------------
 ***                                                                Container
----------------------------------------------------------------------------*/
body{min-width: 0;background: url(/app/ai-ryugaku/images/main_bg_pc.jpg)no-repeat;background-position: center;background-size: cover; background-attachment: fixed;position: relative;}
#main_content{filter:drop-shadow(0px 0px 10px #989898);max-width:500px ; width:100%; margin: auto;;position: relative;background: #fff;}

.secInner{margin: 40px 0;}
.secInner.w95{width: 95%;margin: 40px auto;}

.nengaBnrP{margin: 1.3em 0;}


/*PCのみの固定背景*/
#pc_bg{display: flex;flex-wrap: nowrap;justify-content: space-between;align-items: flex-start;width: 100%;position: fixed;height: 100%;}
#pc_bg .leftBox,
#pc_bg .rightBox{width:calc(50% - 250px); display: flex;flex-direction: column;justify-content: center;height: 100%;}

#pc_bg .leftBox .logo{margin-bottom: 2vw;}
#pc_bg .leftBox .dl_txt{font-size: 40px;font-weight: bold;color: #1247b0;}
#pc_bg .leftBox .storeBox li{margin-bottom: 0.5em;}
#pc_bg .nova-studentLink a{font-size: 20px;}

#pc_bg .friendBox{max-width: 70%;margin:0 auto 2em;}
#pc_bg .friendBox .friend-txt01{animation: slideIn-left 2s cubic-bezier(0.2, 0.6, 0.2, 1) 1 forwards;animation-delay: 0.5s;opacity: 0;}
#pc_bg .friendBox .friend-txt02{text-align: end;animation: slideIn-right 2s cubic-bezier(0.2, 0.6, 0.2, 1) 1 forwards;animation-delay: 1s;opacity: 0;}
#pc_bg .friendBox .friend-txt03{animation: slideIn-left 2s cubic-bezier(0.2, 0.6, 0.2, 1) 1 forwards;animation-delay: 1.5s;opacity: 0;}

@keyframes slideIn-right {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  60%,100% {
    opacity: 1;
  }
}
@keyframes slideIn-left {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
 

#pc_bg .friendBox img{max-width: 100%; height: auto;}
#pc_bg .menuBox{background: #fff;padding: 4% 2em 3%;width: 60%;border-radius: 15px;margin:5vh auto 0;max-width: 380px;}
#pc_bg .menuBox .menu{color: #1247b0;font-weight: bold;font-size: 25px;}
#pc_bg .menuBox ul li{border-top: 1px solid #000;font-weight: 500;}
#pc_bg .menuBox ul li:last-child{border-bottom: 1px solid #000;}
#pc_bg .menuBox ul li a{display: block;color: #000;padding: 4% 0;font-size: 18px;}
#pc_bg .menuBox ul li a:hover{background: #e7f4fd;}


@media screen and (max-width:1300px){
    #pc_bg .rightBox{display: none;}
    #pc_bg .leftBox{width: calc(100% - 500px);padding-top: 5vh;}
    #main_content{margin: 0 0vw 0 auto;}
    
}
@media screen and (max-width:1000px){
    #pc_bg .leftBox{display: none;}
    #main_content{margin: 0 auto;}
    
}
/*----------------------------------------------------------------------------
 ***                                                                  Header
----------------------------------------------------------------------------*/
header{position: absolute;}
header .headerBox{display: flex;flex-wrap: nowrap;justify-content: space-between;align-items: center;padding: 0.5em 1em;}
header .headerBox .headerLogo{width: 40%;}
header .headerBox .headerDl{width: 50%;;max-width:285px;text-align: center; }
header .headerBox .headerDl a{display: block;background: #1247b0;color: #fff;font-weight: bold;font-size:145%;filter: drop-shadow(0px 5px 1px #989898);border-radius: 50vw;padding: 0 0.5em;}


/*----------------------------------------------------------------------------
 ***                                                                  
共通
----------------------------------------------------------------------------*/


.ttl-h2{text-align: center;color: #1247b0;font-size: 250%;margin-bottom: 0.5em;line-height: 1.2;}
.bg_blue{background: #1247b0;color: #fff;display: inline-block;padding: 0em 0.5em;font-weight: 500;}

.blue-storeSec{background: #e7f4fd;border-top: 8px solid #1247b0;border-bottom: 8px solid #1247b0;padding: 1em 0;}
.storeBox-Ul{display: flex;flex-wrap: wrap;justify-content: space-between;width: 80%;margin: auto;}
.storeBox-Ul li{width: 49%;}
.storesub{font-size: 190%;font-weight: bold;}
.studentTxt{padding: 10px 0 0;}
.nova-studentLink a{border: 1px solid #37b2d4;color: #37b2d4;border-radius: 50vw;padding: 0.2em 2em;display: inline-block;background:#fff;}
.nova-studentLink a:hover{background: #37b2d4;color: #fff;}

/*----------------------------------------------------------------------------
 ***                                                                   titleBox
----------------------------------------------------------------------------*/
#mainSec{background:  url(/app/ai-ryugaku/images/main_bg01.jpg)no-repeat;background-position: top center;background-size: contain;padding: 3em 0 0;min-height:645px; }
#mainSec .ttl-h1{margin-top: 1em;}
#mainSec .ttl-h1 .s-font{font-size: 160%;}
#mainSec .ttl-h1 .main-Ttl{color: #fff;display: inline-block;padding: 0em 0.4em;font-size:260%; background: linear-gradient(90deg,#37b2d4 0%,#f173b6 100%);}

#mainSec .storeBox{margin-top: 100%;}
#mainSec .storeBox .sub-Ttl{font-size: 190%;font-weight: bold;}
#mainSec .storeBox .storeBox-Ul{display: flex;flex-wrap: nowrap;justify-content: center;align-items: center;margin: 0 auto;}
#mainSec .storeBox .storeBox-Ul li{width: 46%;margin: 0 0.5em;}


/*----------------------------------------------------------------------------
 ***                                                                   airyugaku
----------------------------------------------------------------------------*/

#airyugaku .txt{font-size: 130%;margin-bottom: 0.5em;font-weight: 500;}
#airyugaku .txt .bg_blue{font-size: 130%;margin-top: 0.4em;}
#airyugaku .ekimaeBox{background: #e7f4fd;padding: 1em 0;margin: 2em 0 0;}
#airyugaku .ekimaeBox .img{width: 90%;margin: auto;}
#airyugaku .ekimaeBox .ekimae_txt{font-weight: 500;}
#airyugaku .ekimaeBox .ekimae_txt span{background: linear-gradient(transparent 70%, #fff 70%);font-size: 150%;}

/*----------------------------------------------------------------------------
 ***                                                                   app_contents
----------------------------------------------------------------------------*/

#app_contents .appBox{margin-bottom: 2em;}
#app_contents .appBox .ttl-h3{background:  linear-gradient(90deg,#37b2d4 0%,#f173b6 100%);color: #fff;padding: 0.3em 0;text-align: center;font-size: 170%;font-weight: bold;border-radius: 50vw;margin-bottom:0.5em ;}
#app_contents .appBox .pointBox{margin:0em 1em 0.5em;}
#app_contents .appBox .pointBox .pointTxt{position: relative;font-weight: 500;font-size: 120%;line-height: 1.5;}
#app_contents .appBox .pointBox .pointTxt::before{content: "";background: url(/app/ai-ryugaku/images/img_icon_01.png)no-repeat;width: 28px;height: 26px;display: inline-block;margin: 0 10px -5px 0;background-size: cover;}
#app_contents .slider{position: relative;margin-top: 4em;}
#app_contents .slider .sl_box .imgBox{width: 70%;margin: auto;}
#app_contents .slick-dots{position: absolute;top: -2em;left: 0;right: 0;margin: auto;display: flex;justify-content: center;}
#app_contents .slick-dots li {position: relative;display: inline-block;width: 15px;height: 15px;margin: 0 5px;padding: 0;cursor: pointer;}
#app_contents .slick-dots li button {font-size: 0;line-height: 0;display: block;width: 15px;height: 15px;padding: 5px;cursor: pointer;color: transparent;border: 0;outline: none;background: #e5e5e5;}
#app_contents .slick-dots li.slick-active  button{background: #1247b0;}
#app_contents .slick-arrow{position: absolute;top: -2.5em;z-index: 1;}
#app_contents .slick-next{right: 8vw;}
#app_contents .slick-prev{left: 8vw;}

#app_contents #aifriendSec .friendTxtBox{background: #ffedf7;padding: 1.5em 1em 1em;margin-top: -1em;}
#app_contents #aifriendSec .friendTxtBox .txt{font-size: 110%;font-weight: 500;line-height: 1.5;}

/*----------------------------------------------------------------------------
 ***                                                                  solution
----------------------------------------------------------------------------*/
#solution .TtlBox{background: url(/app/ai-ryugaku/images/img_contents04.jpg)no-repeat;background-size: cover;display: flex;flex-direction: column;background-position: center;}
#solution .TtlBox .ttl-h2{justify-content: center;align-items: center;margin-bottom: 0;font-size: 200%;padding: 2em 0;filter: drop-shadow(0px 0px 2px #989898);}
#solution .grayBox{background: #f1f1f1;padding: 2em 0;position: relative;}
#solution .grayBox .icon{width: 15%;margin: auto;}
#solution .grayBox .problem{font-size: 160%;position: relative;font-weight: 500;}
#solution .grayBox .problem::before{content: "";display: block;background: url(/app/ai-ryugaku/images/img_icon_03.png)no-repeat;width: 45px;height: 51px;position: absolute;left: 2em;top: -30px;}
#solution .grayBox .problem::after{content: "";display: block;background: url(/app/ai-ryugaku/images/img_icon_03.png)no-repeat;width: 45px;height: 51px;position: absolute;right: 2em;top: -30px;transform: rotateY(180deg);}
#solution .grayBox .problem_list{width: 80%;margin: auto;}
#solution .grayBox .problem_list li{background: linear-gradient(transparent 50%, #fff 50%);font-size: 110%;margin-bottom: 0.5em;}
#solution .grayBox .problem_next{position: absolute;bottom: -20px;left: 0;right: 0;margin: auto;}
#solution .causeBox{margin-top: 1em;}
#solution .causeBox .causeTtl{margin-top: 1.5em;font-size: 160%;font-weight: bold;}
#solution .causeBox .causeTtl span{color: #9690c4;border: 1px solid #9690c4;padding: 0.2em 2em;}
#solution .causeBox .causeTxt{font-size: 115%;}
#solution .causeBox .causeTxt span{color: #c0272d;}
#solution .airyugakuBox{margin: 2em auto;}
#solution .airyugakuBox .ttl-h3{font-size: 150%;display: block;}
#solution .airyugakuBox .ttl-h3 .bg_blue{padding: 0.3em 2em;border-radius: 50vw;}

#solution .OutputBox{position: relative;margin-top: 1em;padding-top: 0.5em;}
#solution .OutputBox .OutputTxt{font-size: 130%;font-weight: bold;line-height: 1.6;margin-left:0.5em;}
#solution .OutputBox .OutputTxt span{display: block;color: #1247b0;font-size: 140%;margin-top: 0.2em;line-height: 1.3;}
#solution .OutputBox .improvement{background: linear-gradient(90deg,#37b2d4 0%,#f173b6 100%);margin: 0.5em 0 0;padding: 0.5em 0.8em;font-size: 115%;}
#solution .OutputBox .improvement .txt{color: #fff;font-weight: 500;line-height: 1.5;}
#solution .OutputBox .app_img{position: absolute;right: 4%;top: 0;bottom: 0;margin: auto;width: 38%;filter:drop-shadow(2px 3px 3px #666);}

/*----------------------------------------------------------------------------
 ***                                                                  priceSec
----------------------------------------------------------------------------*/
#priceSec .secInner{margin: 100px auto 40px;}
#priceSec .priceBox{margin: 1em auto 0.5em;}
#priceSec .priceBox .priceTxt{font-size: 120%;line-height: 1.2;font-weight: 500;}
#priceSec .priceBox .priceTxt .M-font{font-size: 150%;font-weight: bold;}
#priceSec .priceBox .priceTxt .L-font{font-size: 240%;font-weight: bold;display: inline-block;padding: 0 0.1em 0 0.2em;}
#priceSec .priceBox .redTxt{font-size: 150%;color: #c0272d;font-weight: bold;}
#priceSec .storeBox .storesub {font-size: 150%;padding: 0;}
#priceSec .storeBox .storesub span{background: linear-gradient(transparent 50%, #e7f4fd 50%);padding: 0 0.5em;display: inline-block;}
#priceSec .storeBox .storesub2{font-size: 130%;font-weight: 500;}


/*----------------------------------------------------------------------------
 ***                                                                 faqSec
----------------------------------------------------------------------------*/
#faqSec .faqBox dl{margin: 1.5em auto;}
#faqSec .faqBox dl dt{font-weight: bold;background: #ffedf7;display: block;margin-bottom: 0.3em;font-size: 120%;padding: 0.2em 0.5em;}
#faqSec .faqBox dl dd{font-size: 100%;line-height: 1.5;padding: 0 0.5em;}


/*----------------------------------------------------------------------------
 ***                                                                  footer
----------------------------------------------------------------------------*/
#formLinkSec,
#footerArea{font-size: 60%;max-width: 500px;width: 100%;margin: auto;}
#footerContentList{width:100%;}
#footerContentList .contentList .sitePageListBox.bottomBox{display: block;}

@media screen and (max-width:499px){
    header .headerBox .headerDl{width: 55%; }
    header .headerBox .headerDl a{font-size: 115%;padding: 0.2em 0.5em;}
 
    .storeBox-Ul{width: 90%;}
    .studentTxt{font-size: 80%;}
    .storesub{font-size: 160%;}
    .ttl-h2{font-size:200%; }
    
    #mainSec .ttl-h1 .s-font{font-size: 130%;}
    #mainSec .ttl-h1 .main-Ttl{font-size:190%; }
    #mainSec .storeBox .sub-Ttl{font-size: 150%;}
    
    #airyugaku .txt{font-size:100%; line-height: 1.8;}
    #airyugaku .ekimaeBox .ekimae_txt span{font-size:120%; }
    
    #app_contents .appBox .ttl-h3{font-size:140%; padding: 0.2em 0;}
    #app_contents .appBox .pointBox .pointTxt{font-size:100%; }
    #app_contents .appBox .pointBox .pointTxt::before{width: 22px;height: 20px;}
    #app_contents .slider{margin-top: 3em;}
    #app_contents .slick-arrow{width: 15px;}
    #app_contents .slick-prev{left: 25vw;}
    #app_contents .slick-next{right: 25vw;}
    #aifriendSec{margin-top: -2em;}
    
    #solution .TtlBox .ttl-h2{font-size:155%; }
    #solution .grayBox .problem{font-size: 130%;}
    #solution .grayBox .problem::after,
    #solution .grayBox .problem::before{background-size: contain;width:32px;height: 37px;top: -42px; }
    #solution .grayBox .problem_list{width: 90%;}
    #solution .grayBox .problem_list li{font-size: 95%;}
    #solution .grayBox .problem_next{width: 10%;bottom: -15px;}
    #solution .causeBox .causeTtl{font-size: 130%;margin-bottom: 0.5em;}
    #solution .causeBox .causeTtl span{padding: 0.2em 1em;}
    #solution .causeBox .causeTxt{font-size:100%; }
    #solution .airyugakuBox .ttl-h3{font-size: 130%;}
    #solution .OutputBox .OutputTxt{font-size: 100%;}
    #solution .OutputBox .improvement{font-size: 90%;}
    
    #priceSec .priceBox .priceTxt{font-size: 100%;}
    #priceSec .priceBox .redTxt{font-size: 120%;}
    #priceSec .storeBox .storesub{font-size: 135%;}
    #priceSec .storeBox .storesub2{font-size: 110%;}
    
    #faqSec .faqBox dl dt{font-size: 110%;}
    #faqSec .faqBox dl dd{font-size: 95%;}
    
    
    
    
}


/*----------------------------------------------------------------------------
 ***                                                               生徒用LP用
----------------------------------------------------------------------------*/

#studentLP .studentTxt{font-size:150%;color: #000; }
#studentLP header{left: 0;right: 0;margin: auto;}
#studentLP header .headerBox{display: block;}
#studentLP header .headerBox .headerLogo{margin: auto;}
#studentLP #mainSec .storeBox{margin-top: 110%;}
#studentLP #mainSec .storeBox .sub-Ttl{font-size:165%; }

#studentLP #solution .ttl-h2{margin-bottom: 0;font-size: 175%;}
#studentLP #solution .ttl-h2 span{padding: 0.3em 2em;border-radius: 50vw;}
#studentLP #studentSec{margin: 100px auto 40px;background: #e7f4fd;padding:0 0 0.1em 0; }
#studentLP #studentSec .TtlBox{background: url(/app/ai-ryugaku/images/img_contents04.jpg)no-repeat;background-size:cover;display: flex;flex-direction: column;background-position: center;}
#studentLP #studentSec .TtlBox .ttl-h2{justify-content: center;align-items: center;margin-bottom: 0;font-size: 200%;padding: 2em 0;filter: drop-shadow(0px 0px 2px #989898);}
#studentLP #studentSec .TxtBox{margin-top: 1em;}
#studentLP #studentSec .TxtBox .txt{font-size: 110%;}
#studentLP #studentSec .TxtBox .txt span{font-weight: bold;}
#studentLP #studentSec .TxtBox .txt.lastTxt{font-size: 140%;font-weight: bold;}

#studentLP #priceSec .secInner{margin: 40px 0;}
#studentLP #priceSec .student_priceBox .priceTxt span{color: #666666;}
#studentLP #priceSec .cp_price{margin-top: 1em; background: #e7f4fd;border-top: 8px solid #1247b0;border-bottom: 8px solid #1247b0;padding: 1em 0;}
#studentLP #priceSec .cp_price .sarani{font-size: 150%;font-weight: 500;line-height: 1;}
#studentLP #priceSec .cp_price .cpTtl{font-size: 170%;font-weight: bold;color: #c0272d;line-height: 1;}
#studentLP #priceSec .priceEnd{font-size: 130%;font-weight: 500;}
@media screen and (max-width:499px){
    #studentLP #mainSec .storeBox{margin-top: 115vw;}
    #studentLP #mainSec{padding: 1.5em 0 0;}
    #studentLP #mainSec .storeBox .sub-Ttl{font-size:135%;line-height: 1.8; }
    #studentLP #solution .ttl-h2{font-size:150%; }
    #studentLP #studentSec .TtlBox .ttl-h2{font-size: 160%;padding: 1.8em;}
    #studentLP #studentSec .TxtBox .txt{font-size: 100%;line-height: 1.8;}
    #studentLP #priceSec .cp_price .sarani{font-size: 130%;}
    #studentLP #priceSec .cp_price .cpTtl{font-size:140%; }
    #studentLP #priceSec .priceEnd{font-size: 120%;}
}