@charset "UTF-8";
/* CSS Document */
.pc{display: block;}
.sp{display: none;}

/*MV & common*/
#netschool h1{width:100%; font-size: 0; text-align: center;}
#netschool .content{padding: 0 20px;}
#netschool .content .content-inner{max-width:1200px; width:100%; margin: auto;background-color: #FFF; }
#netschool .site-main{width:100%; max-width: 1200px; margin: auto}
#netschool .site-main .leedtext{font-size: 20px; text-align: center; padding: 50px; box-sizing: border-box;background-color: #FFF;}
#netschool .content .content-inner .cBlock{max-width:1000px; margin: auto; width:100%;}

/*CV area*/
#netschool .cv{background-color: #FFF; width:96%; max-width:1000px; margin:50px auto 120px; font-size: 0;background-image: url("../img/bg.jpg"); background-size: cover; padding: 30px;}
#netschool .cv .btn{width:48%; margin: 1%; display: inline-block; vertical-align: top; text-align: center;}
#netschool .cv .btn p{font-size: 16px;}
#netschool .moredetail img{max-width:550px;}

/*VOICE*/
#netschool #voice .cBlock{padding-bottom: 30px;}
#netschool #voice h2 img{max-width:450px; margin-bottom: 0;}
#netschool #voice .slide{ padding:20px; box-sizing: border-box; max-width:510px;}
#netschool #voice .slide p{ margin: 0;}
#netschool #voice .slide .voicetextbox{background-color: #FFF; border-radius: 0 0 20px 20px; padding: 20px;}
#netschool #voice .slide .pict{padding: 0;  box-sizing: border-box;}
#netschool #voice .student .slide .subject{font-weight: bold; color:#38af46; font-size: 16px; margin-top: 10px; }
#netschool #voice .student .slide .voicetextbox .voiceInner{background-color: #effae8; border-radius: 10px; padding: 20px;}
#netschool #voice .parent .slide .subject{font-weight: bold; color:#e6002d; font-size: 16px; margin-top: 10px; }
#netschool #voice .parent .slide .voicetextbox .voiceInner{background-color: #ffeeeb; border-radius: 10px; padding: 20px;}
#netschool #voice .graduate .slide .subject{font-weight: bold; color:#0084f0; font-size: 16px; margin-top: 10px; }
#netschool #voice .graduate .slide .voicetextbox .voiceInner{background-color: #e9f2fd; border-radius: 10px; padding: 20px;}


/*achievement*/
#netschool .graph{width:90%; max-width:580px; margin: 0 auto 50px; font-size: 12px;}
#netschool #achievements{background-color: #d7e7fe; padding: 50px 0;}
#netschool .map{margin-bottom: 20px;}
#netschool .maptext{text-align: center; font-size: 24px; font-weight: bold;}

/*faq*/
#netschool #faq{padding: 50px 0;}
#netschool #faq h2 img{margin-bottom: 50px;}
#netschool #faq dl{margin: 0 auto 30px;}
#netschool #faq dl p{font-size: 16px;}
#netschool #faq dl dt{padding: 15px 30px 15px 80px; background-image: url("../img/q.jpg"); background-repeat: no-repeat; background-position: 10px 50%; background-size: 56px; font-size: 18px;}
#netschool #faq dl dd{padding:10px;}
#netschool #faq dl dd .answer{font-size: 20px; font-weight: bold; color: #010066;padding: 10px 0;}
#netschool #faq dt { cursor: pointer; position: relative; padding-right: 20px;}
#netschool #faq dt span{border-bottom: 2px solid #010066;}
#netschool #faq dt::after { content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; border-right: 2px solid #000; border-bottom: 2px solid #000; transition: transform 0.3s ease;}
#netschool #faq dt.active::after { transform: translateY(-50%) rotate(225deg);}
#netschool #faq dd { display: none; margin: 0 0 1em;}

/*OPEN CAMPUS*/
#netschool #opencampus{padding: 50px 0; margin-bottom: 0;}
#netschool #opencampus .bgtype{margin-bottom: 30px;}
#netschool #opencampus .bgtype p{ width:80%; font-size: 16px; text-align: center; margin:20px auto 20px;}
#netschool #opencampus .movie{width:90%; max-width:750px; background-color: #787b7d; margin: 80px auto 80px; position: relative;padding-top:50%;}
#netschool #opencampus .movie img{position: absolute; top: 3%; left:0; width:100%;}
#netschool #opencampus .movie iframe{position: absolute; top: 15%; left:50%; transform: translateX(-50%);width:90%; height:75%;}


/*FLOW*/
#netschool #flow{padding: 0 0 50px;}
#netschool #flow h2 img{margin-bottom: 50px;}
#netschool #flow .cBox{width: 90%; margin: 0 auto 30px; max-width: 600px; font-size: 12px;}
#netschool #flow .cBox p{margin-bottom:30px;}
#netschool #flow .cBox p img{max-width: 520px;}

/*FEATURE*/
#netschool #point h2 img{height: 140px; margin-bottom: 50px;}
#netschool #point h3{font-size: 20px; font-weight: bold;color: #000066; text-align: left; margin-bottom: 20px;}
#netschool #point h3 img{display: inline-block; vertical-align: middle; width:120px; margin-right: 20px;}
#netschool #point h3 span{display: inline-block; vertical-align: middle;}
#netschool #point .reasonBox{overflow: hidden; width: 100%; margin: 0 auto 0;}
#netschool #point .reasonBox .reasonTxt{width:60%; padding-left: 140px; box-sizing: border-box; display: inline-block; vertical-align: top; margin: 0 3% 0 0 ;}
#netschool #point .reasonBox .reasonTxt .Annotation{font-size: 12px; color: #999999}
#netschool #point .reasonBox .slider-wrapper{width:35%; display: inline-block; vertical-align: top;}
#netschool #point .reasonBox .pointimg{width:35%; display: inline-block; vertical-align: top;}
#netschool #student{background-color: #d7eec7; margin-bottom: 80px;}
#netschool #parents{background-color: #f0d1ca; margin-bottom: 80px;}
#netschool #graduate{background-color: #d7e7fd; margin-bottom: 80px;}

/*accordion*/
.ac { max-height: 100px; overflow: hidden; position: relative; transition: all 0.4s ease;}
.ac.open { max-height: 1000px; /* 十分に大きな値 */}
.ac::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(to bottom, rgba(202, 231, 240, 0), rgba(202, 231, 240, 1)); pointer-events: none; z-index: 1;}
.ac.open::after { display: none;}
.acbtn{	margin-top: 20px;}


/*scrollin*/
.fade-up-section { opacity: 0; transform: translateY(24px) scale(0.985); transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;}
.fade-up-section.in-view { opacity: 1; transform: translateY(0) scale(1);}

/*FLOATING*/
#netschool .floating {
  position: fixed;
  bottom: 0px;                       /* 表示位置 */
  left: 50%;
  transform: translate(-50%, 40px);   /* 初期：X 中央 ＋ 下に40px */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease,
              transform 0.5s ease;

  /* 見た目 */
  background-color: #FFF;
  font-size: 0;
  padding: 2%;
  width: 100%;                 /* 必要に応じて max-width:1200px も */
  z-index: 1000;

}

#netschool .floating.show {
  transform: translate(-50%, 0);     /* 表示時：Y軸だけ0に */
  opacity: 1;
  pointer-events: auto;
	background-image: url("../img/bg.jpg");
	text-align: center;
	background-size: cover;
}

/* ボタン幅など */
#netschool .floating .btn {
  display: inline-block;
  width: 46%;
  margin: 0 2%;
	max-width:480px;
}




/* レスポンシブ対応 */
@media (max-width: 768px) {
.pc{display: none;}
.sp{display: block;}
#netschool .content{padding: 0;}
	
/*MV & common*/
#netschool .site-main .leedtext{font-size: 4.2vw; text-align: center; padding: 10% 5%; background-color: #FFF;}
#netschool .content .content-inner .cBlock{max-width:1000px; margin: auto; width:100%;}
#netschool img{width:100%;}


/*CV area*/
#netschool .cv{background-color: #FFF; width:100%; max-width:1000px; margin:5% auto 10% ; font-size: 0;}
#netschool .cv .btn{width:100%; margin: 0 0 2%; display: inline-block; vertical-align: top; text-align: center;}
#netschool .cv .btn p{font-size: 3.4vw;}
#netschool .moredetail img{max-width:550px;}

/*VOICE*/
#netschool #voice h2 img{max-width:100%; margin-bottom: 0;}
#netschool #voice .slide{ padding:10px; box-sizing: border-box; max-width:100%; width: 100%;}
#netschool #voice .slide p{ margin: 0;}
#netschool #voice .slide .voicetextbox{background-color: #FFF; border-radius: 0 0 20px 20px; padding: 5%;}
#netschool #voice .slide .pict{padding: 0;  box-sizing: border-box;}
#netschool #voice .student .slide .subject{font-weight: bold; color:#38af46; font-size: 3.2vw; margin-top: 10px; }
#netschool #voice .student .slide .voicetextbox .voiceInner{background-color: #effae8; border-radius: 10px; padding: 5%;}
#netschool #voice .parent .slide .subject{font-weight: bold; color:#e6002d; font-size: 3.2vw; margin-top: 10px; }
#netschool #voice .parent .slide .voicetextbox .voiceInner{background-color: #ffeeeb; border-radius: 10px; padding: 5%;}
#netschool #voice .graduate .slide .subject{font-weight: bold; color:#0084f0; font-size: 3.2vw; margin-top: 10px; }
#netschool #voice .graduate .slide .voicetextbox .voiceInner{background-color: #e9f2fd; border-radius: 10px; padding: 5%;}

/*achievement*/
#netschool .graph{width:90%; max-width:580px; margin: 0 auto 5%; font-size: 2.8vw;}
#netschool #achievements{background-color: #d7e7fe; padding: 5% 0 5%;}
#netschool .map{margin-bottom: 5%;}
#netschool .maptext{text-align: center; font-size: 4.6vw; font-weight: bold;}

/*faq*/
#netschool #faq{padding: 5% 0;}
#netschool #faq h2 img{max-width:100%; margin-bottom: 5%;}
#netschool #faq dl{margin: 0 auto 2%;}
#netschool #faq dl p{font-size: 3.4vw;}
#netschool #faq dl dt{padding: 20px 30px 20px 80px; background-image: url("../img/q.jpg"); background-repeat: no-repeat; background-position: 10px 50%; background-size: 50px; font-size: 3.6vw;}
#netschool #faq dl dd{padding:5%;}
#netschool #faq dl dd .answer{font-size: 24px; font-weight: bold; color: #0084f0;}
#netschool #faq dt { cursor: pointer; position: relative; padding-right: 20px;}
#netschool #faq dt::after { content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; border-right: 2px solid #000; border-bottom: 2px solid #000; transition: transform 0.3s ease;}
#netschool #faq dt.active::after { transform: translateY(-50%) rotate(225deg);}
#netschool #faq dd { display: none; margin: 0 0 1em;}

/*OPEN CAMPUS*/
#netschool #opencampus{padding: 5% 0; margin-bottom: 0;}
#netschool #opencampus .bgtype{position: inherit;margin:5% 0;}
#netschool #opencampus .bgtype p{position: inherit; width:90%; margin: 5%; font-size: 3.4vw;}
#netschool #opencampus .movie{width:100%; max-width:750px; background-color: #777b7d; margin: 10% auto; position: relative;padding-top: 60%;}
#netschool #opencampus .movie img{position: absolute; top: 3%; left:0; width:100%;}
#netschool #opencampus .movie iframe{position: absolute; top: 20%; left:50%; transform: translateX(-50%);width:90%; height:75%;}


/*FLOW*/
#netschool #flow{padding: 0 0 5%; }
#netschool #flow h2 img{max-width:550px;margin-bottom: 30px;}
#netschool #flow .cBox{width: 90%; margin: 0 auto 30px; max-width: 600px; font-size: 12px;}
#netschool #flow .cBox p{margin-bottom:30px;}
#netschool #flow .cBox p img{max-width: 550px;}
	
/*FEATURE*/
#netschool #point{padding: 0 5% 5%;}
#netschool #point h2 img{height: 120px; margin-bottom: 30px;}
#netschool #point h3{font-size: 20px; font-weight: bold;color: #000066; text-align: left; margin-bottom: 20px;}
#netschool #point h3 img{display: inline-block; vertical-align: middle; width:120px; margin-right: 20px;}
#netschool #point h3 span{display: inline-block; vertical-align: middle;}
#netschool #point .reasonBox{overflow: hidden; width: 100%; margin: 0 auto 5%;}
#netschool #point .reasonBox .reasonTxt{width:100%; padding:0;display: block; vertical-align: top; margin: 0 0 5% 0 ;}
#netschool #point .reasonBox .reasonTxt .Annotation{font-size: 2.8vw;}
#netschool #point .reasonBox .slider-wrapper{width:100%; display:block;}
#netschool #point .reasonBox .pointimg{width:100%; display:block; margin-bottom: 10%}
#netschool #student{background-color: #d7eec7; margin-bottom: 10%;}
#netschool #parents{background-color: #f0d1ca; margin-bottom: 10%;}
#netschool #graduate{background-color: #d7e7fd; margin-bottom: 10%;}


/*accordion*/
.ac { max-height: 100px; overflow: hidden; position: relative; transition: max-height 0.5s ease;}
.ac.open { max-height: 1000px; /* 十分に大きな値 */}
.ac::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(to bottom, rgba(202, 231, 240, 0), rgba(202, 231, 240, 1)); pointer-events: none; z-index: 1;}
.ac.open::after { display: none;}
.acbtn{	margin-top: 20px;}


/*scrollin*/
.fade-up-section { opacity: 0; transform: translateY(24px) scale(0.985); transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;}
.fade-up-section.in-view { opacity: 1; transform: translateY(0) scale(1);}
	
	
	
	
	
	
	
	
	
	
	
}