@media(max-width: 959px){
	header#pcheader{ display:none; }
}

@media(min-width: 960px){
	header#spheader{ display:none; }
}
header#spheader{
	background-color:#fff !important;
	/*CVボタンも追従する場合
	position:fixed;
	top:0;
  	z-index: 9999;*/
}


.noscroll{
	overflow:hidden;
}


/*========= 一段目のヘッダー設定 ===============*/

#sphead1 { /*追従しない場合
	position:fixed;
	top:0;
  	z-index: 9999;*/
	box-shadow:0 1px 2px #ccc;
	background:#fff;
	
	/**/
	height:65px;
	margin-right:0; /*bootstrap3row設定打消し*/
	margin-left:0; /*bootstrap3row設定打消し*/
	width:100%;
}

/*スクロールしたら境界線入れる*/
#sphead1.scroll{
	border-bottom:2px solid yellow;
	height:60px;
}


#sphead1 div{ /*各アイテム共通*/
	position:absolute;
	top:0;
}

/*ロゴ*/
#sphead1 #logo{
	position:relative;
	height:65px;
	/*width:70px;
	text-align:center;*/
}
#sphead1 #logo a{
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
}

/*ロゴ横アイコン*/
#sphead1 .sphead1-item{
	position:relative;
	height:50px;
	top:5px;
	border-left:1px solid #efefef;
}

/* htmlにて指定
.sphead1-item-line{
	width:100px;
}
.sphead1-item-tel{
	width:65px;
}
.sphead1-item-menu{
	width:65px;
}
*/
.sphead1-item-menu{
	z-index:5000;
}

#sphead1 .sphead1-item a{
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 outline:0;
}

#sphead1 .sphead1-item .openbtn{
 position: absolute;
 top: 40%;
 transform: translateY(-50%);
}


.icontext{
    position: relative;
    font-size: 10px;
    text-align: center;
    padding-right: 5px;
    white-space:nowrap;
}

/*ロゴ*/
#sphead1 #logo img{
    max-width: 180px;
    margin-left: 15px;
}

/*========= 二段目のCVボタン設定 ===============*/

/*CVボタンも追従する場合
#main {
	margin-top:110px;
}
*/
/*sphead1だけ追従する場合
#sphead2{
	margin-top:65px;
}
*/

.sphead2-taiken{
	background-color:orange;
	text-align:center;
	font-weight:500;
}

.sphead2-request{
	background-color:gold;
	text-align:center;
	font-weight:500;
}


.sphead2-request a , .sphead2-taiken a , .sphead2-line a {
	text-decoration:none;
	display:block;
	margin:0;
}

/*画面下部に追従する場合*/
.cv-active{
	position:fixed;
	bottom:0;
  	z-index: 1000;
  	width:100%;
	box-shadow:0 5px 10px #333;
}

.sphead2-line{
	background-color:#07C755;
	text-align:center;
	font-weight:500;
}
.sphead2-line a{
	color:#fff !important;
}
.cv-active .sphead2-taiken a ,
.cv-active .sphead2-request a,
.cv-active .sphead2-line a{
	padding-top:15px;
	padding-bottom:15px;
	font-size:12px;
	text-decoration:none;
	line-height:1em;
}


/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 3000;
    /*ナビのスタート位置と形状*/
	top:0;/*ヘッダーの高さに合わせる*/
	padding-top:60px;
   	margin-top:0;
   	margin-right:0;
	right: -120%;
	width:100%;
	height: 100vh;/*ナビの高さ*/
	/*background:rgba(255,255,255,0.9); 背景を若干透過*/
	background:#fff;
    /*動き*/
	transition: all 0.6s;
}

/*背景透過度を下げる（二重に）
#g-nav-list{
	background:rgba(255,255,255,0.5);
}
*/
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
}

/*ナビゲーション内の余白*/
.g-nav-contents , .g-nav-bottomlink {
    padding:20px 35px;
}

/*メニュー最下部のイベントバナー*/
.g-nav-bottomlink{
	margin:0;
	background-color:#FCF8E3;
	
}

#g-nav ul.g-nav-ul , #g-nav .g-nav-link{
	margin-bottom:20px;
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
	position: relative;
}

/*リストアイコン*/
#g-nav li:after {
content: "";
background: url(https://www.wa-juku.co.jp/course/k/img/headicon-arrow-right.png) no-repeat;
display: inline-block;
width: 6px;
height: 6px;
position: absolute;
top: 0;
bottom: 0;
right: 5%;
margin: auto 0;
}

#g-nav li a{
	color: #000;
	text-decoration: none;
	padding:8px;
	display: block;
	border-bottom:1px dotted #ccc;
}

/*メニュー下のCVボタン*/
#g-nav .g-nav-link{
	padding:0;
}

#g-nav .g-nav-link .sphead2-taiken , 
#g-nav .g-nav-link .sphead2-request {
	width:100%;/*
	padding:10px;*/
}

#g-nav .g-nav-link img{
	padding:0;
}


/*========= ハンバーガーボタンのためのCSS ===============*/
.openbtn{
	/*position:fixed;
    z-index: 9999;*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 1px;
    border-radius: 2px;
	background-color: #000;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

/*スクロール時にメニューだけ追従*/
.sphead1-item-menu.scrollmenu{
	position:fixed !important;
	top:5px;
	right:5px;
	border-radius:5px;
	background:#fff;
	box-shadow:0 0 3px #666;
}

.sphead1-item-menu.scrollmenu .openbtn{
	right:8px !important;
}

/*========= 電話モーダルのための追加設定 ===============*/

.modal {
	/*margin-top:68px; ヘッダー追従しないので不要*/
	/*width:95%;*/
}

/*========= 学年別に見るSP用ハンバーガーメニュー追加設定 ===============*/
  #g-nav label {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }

  #g-nav input {
    display: none;
  }

  #g-nav .accshow {
    height: 0;
    overflow: hidden;
  }

  #g-nav .cssacc:checked + .accshow {
    height: auto;
    margin-left:16%;
  }

   #g-nav .bg_plus {
    padding: 8px;
    display: block;
    border-bottom: 1px dotted #ccc;
  }
   #g-nav .bg_plus:after {
    background: none;
  }

  #g-nav .accshow li:after {
	right: 3%;
 }
 #g-nav .accshow_li {
	padding:12px 8px;
 }
 #g-nav .li_last a {
	border-bottom:none;
}
.plus {
	margin-right:1%;
}