@charset "UTF-8";

:root {
  /* 各OS搭載の最新・美しいゴシック体を優先するシステムフォントスタック */
  --font-gothic: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
}

@font-face {
	font-family: "JosefinSans-Bold";
	src:url('../fonts/JosefinSans-Bold.ttf');
}

html{
    height: 100%;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

body{
	overflow: auto; 
	margin:0 auto;
	max-width: 100%;
	height: 100%;
	font-family: var(--font-gothic);
	font-weight: 300;
}
main .wrap{
	margin:0 auto;
	width:100%;
}
img{
    max-width: 100%;
    height: auto;
}

a {
  color: #464749;
  text-decoration: none;
}

/*********************************
**********************************
header
**********************************
*********************************/
.header{
	z-index:100;
}

.drawer{
 display: flex;
 flex-direction: row;
 flex-wrap:  wrap;
 align-items: center;
 position: relative;
 height: 70px;
 padding: 0 0 0 5px;
}

#logo {
  width: calc(100% - 200px);
  display:block;
  margin:0 ;
}

#logo a.mainlogoImg {
	margin:5px 0 0 5px;
	background: url(../img/HeaderFooterN/headerNewMainLogo.svg) top 0px left no-repeat;
	display:block;
	width:175px;
	height:60px;	
}
#logo a.mainlogoImg:hover{
	opacity:0.7;
}
@media only screen and (min-width: 450px) {
#logo a.mainlogoImg {
	margin-left: 13px;	
}
}
@media only screen and (min-width: 500px) {
#logo a.mainlogoImg {
	margin-left: 20px;	
}
}

/*********************************
ヘッダー塾生・検討の方ボタン
*********************************/
.headerTopLink{
	width:120px;
	margin:5px 0 0 ;
	display: flex;
	flex-wrap:  wrap;
	position: relative;	
	right:-5px ;
}
.headerTopLink a{
	display:block;
	width:60px;
	height:60px;
	margin:0;
}
.headerTopLink a:hover{
	opacity:0.7;
}
.headerTopLink a.studentButton {
	background: url(../img/HeaderFooterN/headerTopLink_student.svg) top 5px center no-repeat,
				#009BE0;	
	border-radius:20px 0 0 20px;
}
.headerTopLink a.visitorButton {
	background: url(../img/HeaderFooterN/headerTopLink_visitor.svg) top 5px center no-repeat,
				#003D85;	
	border-radius:0 20px 20px 0;	
}
@media only screen and (min-width: 850px) {
.headerTopLink{
	width:120px;
	margin:8px 0 0 ;
	right:410px ;
	z-index:10;
}
.headerTopLink a.studentButton {
	background: url(../img/HeaderFooterN/headerTopLink_student.svg) top 5px center no-repeat,
				#009BE0;		
}
.headerTopLink a.visitorButton {
	background: url(../img/HeaderFooterN/headerTopLink_visitor.svg) top 5px center no-repeat,
				#222;	
}
}

nav.headerNavi{
 width: 100%;
 height: 80px;
 position: relative;
 background: #fff;
 overflow: auto;
}

/*ナビゲーション部分*/
.menu ul li a {
	display:block;
	transition: all 0.2s 0s ease;
}
.menu ul li a:hover{
	opacity:0.75;
}

.menu{
  text-align:center;
  background:#fff;
  transition: .5s ease;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}

@media screen and (max-width: 2799px) {
.menu{  
  position: fixed;
  width:100%;
  top:0px;
  z-index:101;
  text-align:left;
  overflow-y: auto;
  height:100%; 
  -webkit-overflow-scrolling: touch;
}
}

/*OPEN時の動き*/
.menu.open {
 transform: translateX(0%);
}

/*トグルボタンのスタイルを指定*/
.Toggle {
    display: block;
    position: fixed;    
    width: 70px;
    height: 70px;
    cursor: pointer;
    z-index: 200;
 	right:0;	
	background: url(../img/HeaderFooterN/headerHamburger_text.svg) bottom 5px center no-repeat,
				#000;
}
.Toggle.active {
	background:#ab0a40;
} 
.Toggle span {
    display: block;
    position: absolute;
    width: 30px;
	right:21px;
    border-bottom: solid 3px #fff;
    -webkit-transition: .35s ease-in-out;	
    -moz-transition: .35s ease-in-out;		
    transition: .35s ease-in-out;			
}
.Toggle span:nth-child(1) {
    top:22px;
} 
.Toggle span:nth-child(2) {
    top: 30px;
} 
.Toggle span:nth-child(3) {
    top: 38px;
}
.Toggle.active span:nth-child(1) {
    top: 30px;   
    transform: rotate(-45deg);
}
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 30px;   
    transform: rotate(45deg);
}
.Toggle.active span:nth-child(3) {
    top: 30px;   
}

/*********************
塾生・検討の方エリア
*********************/
.headerMenuChoice{
	width: 90%;
	max-width:650px;
	margin: 30px auto;
}
.headerMenuChoice .btnLarea a{
	width:100%;
	color:#fff;
	display:block;
	padding: 20px 0;
	padding-left:85px;
	margin:10px 0;
	border-radius:75px;
	font-size:16px;
	line-height:15px;
	box-shadow: 0 3px #d6d6d6;
}
.headerMenuChoice .btnLarea a.student{
	background: url(../img/HeaderFooterN/hamMenuIconL_vispo.svg) left 13px center no-repeat,
  				url(../img/HeaderFooterN/button_arrow_W.svg) center right 15px no-repeat,
				#4d9ccd;
    background-size: 60px, 25px, auto;
}
.headerMenuChoice .btnLarea a.visitor{
	background: url(../img/HeaderFooterN/hamMenuIconL_student.svg) left 13px center no-repeat,
				url(../img/HeaderFooterN/button_arrow_W.svg) center right 15px no-repeat,
				#555;
	background-size: 60px, 25px, auto;
}
.headerMenuChoice .btnLarea a b{
	font-family: var(--font-gothic);
	font-weight: 700;
	font-size:1.6em;
	line-height:1.2em;
}
.headerMenuChoice .btnLarea a span{
	display:block;
	margin-top:3px;
	opacity:0.9;
}
@media screen and (min-width: 768px) {
.headerMenuChoice{
	display:flex;
	flex-wrap:  wrap;
}
.headerMenuChoice .btnLarea a{
	width:318px;
	color:#fff;
	display:block;
	padding: 33px 0 23px 95px;
	margin:8px 0;
	border-radius:65px;
	font-size:16px;
	line-height:20px;
}

.headerMenuChoice .btnLarea a span{
	margin-top:3px;
	opacity:0.9;
}
.headerMenuChoice .btnLarea a.visitor{
	margin-right:14px;
}
}

/*********************
SNSボタンエリア
*********************/
.headerMenuSNS{
	padding:30px 0 30px;
}
.headerMenuSNS .snsModalButton{
	width: 156px;
	margin:3px auto;
	display: flex;
	flex-wrap:  wrap;
}
.headerMenuSNS .snsModalButton a{
	width: 30px;	
	height:26px;
	display:block;
	margin-right:12px;
}
.headerMenuSNS .snsModalButton a:last-child {
	margin-right:0;
}
.headerMenuSNS .snsModalButton a.twitter{
	background:url(../img/HeaderFooterN/iconBanner_twitterG.svg) center center no-repeat;
}
.headerMenuSNS .snsModalButton a.instagram{
	background:url(../img/HeaderFooterN/iconBanner_instaG.svg) center center no-repeat;
}
.headerMenuSNS .snsModalButton a.youtube{
	background:url(../img/HeaderFooterN/iconBanner_youtubeG.svg) center center no-repeat;
}
.headerMenuSNS .snsModalButton a.line{
	background:url(../img/HeaderFooterN/iconBanner_lineG.svg) center center no-repeat;
}
@media screen and (min-width: 768px) {
.headerMenuSNS .snsModalButton{
	width: 198px;
	margin:-10px auto 12px;
}
.headerMenuSNS .snsModalButton a{
	width: 36px;	
	height:36px;
	margin:0 15px;
}
.headerMenuSNS .snsModalButton a.twitter{
	background:url(../img/HeaderFooterN/iconBanner_twitterG.svg) center center no-repeat;
	background-size:36px;
}
.headerMenuSNS .snsModalButton a.instagram{
	background:url(../img/HeaderFooterN/iconBanner_instaG.svg) center center no-repeat;
	background-size:36px;
}
.headerMenuSNS .snsModalButton a.youtube{
	background:url(../img/HeaderFooterN/iconBanner_youtubeG.svg) center center no-repeat;
	background-size:36px;
}
.headerMenuSNS .snsModalButton a.line{
	background:url(../img/HeaderFooterN/iconBanner_lineG.svg) center center no-repeat;
	background-size:36px;
}
}

/*********************
メインリンクエリア
*********************/
.headerMenuWrap{
	width: 90%;
	max-width:650px;
	margin: 0 auto;
	border-bottom:3px solid #f5f5f5;
}
/*====================================================================
多層アコーディオン設定
====================================================================*/
.headerAC .level {
	width: 100%;
	margin: 0 auto;
	background:#fff;
	border-bottom:none;
}
.headerAC .level:last-child {
	border-bottom:none;
}

.headerAC .level .acHeader {
  color: #464749;
  font-size: 14px;
  font-family: var(--font-gothic);
  font-weight: 700; 
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition-duration: 0.2s;
  border-top:3px solid #f5f5f5;
	overflow: hidden;
  -webkit-overflow-scrolling:auto; 
}
.headerNavi .headerAC .level .level .acHeader {
	background:	#f6f6f6;
	border-bottom:4px solid #fff;
	border-top:none;
	padding-left:10px;
}

.headerAC .level .acHeader b{	 
	 font-size:1.5em;
}
@media screen and (min-width: 768px) {
.headerAC .level .acHeader {
  font-size: 17px; 
}
}
.headerAC .level .hamMenu_price,
.headerAC .level .hamMenu_discount,
.headerAC .level .hamMenu_feature,
.headerAC .level .hamMenu_study,
.headerAC .level .hamMenu_vistadia,
.headerAC .level .hamMenu_test,
.headerAC .level .hamMenu_school,
.headerAC .level .hamMenu_mail,
.headerAC .level .hamMenu_sns,
.headerAC .level .hamMenu_vistOnline {
	display:block;
	padding: 30px 0 30px 70px;
}
.headerAC .level .hamMenu_price { background: url(../img/HeaderFooterN/hamMenuIcon_price.svg) left center no-repeat; }
.headerAC .level .hamMenu_discount { background: url(../img/HeaderFooterN/hamMenuIcon_discount.svg) left center no-repeat; }
.headerAC .level .hamMenu_feature { background: url(../img/HeaderFooterN/hamMenuIcon_feature.svg) left center no-repeat; }
.headerAC .level .hamMenu_vistadia { background: url(../img/HeaderFooterN/hamMenuIcon_vistadia.svg) left center no-repeat; }
.headerAC .level .hamMenu_vistadia {
	position: relative;
	box-sizing: border-box;
	min-height: 82px;
	padding: 28px 40px 8px 70px;
}
.headerAC .level .hamMenu_vistadia::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 70px;
	width: 90px;
	height: 15px;
	background: url(../img/HeaderFooterN/hamMenuIcon_new.svg) left center no-repeat;
}
.headerAC .level .hamMenu_vistadia .vistadiaMenuTitle b,
.headerAC .level .hamMenu_vistadia .vistadiaMenuTitle small {
	display: block;
}
.headerAC .level .hamMenu_vistadia .vistadiaMenuTitle b {
	font-size: 21px;
	line-height: 1.15;
}
.headerAC .level .hamMenu_vistadia .vistadiaMenuTitle small {
	font-size: 13px;
	line-height: 1.35;
}
.headerAC .level .hamMenu_study { background: url(../img/HeaderFooterN/hamMenuIcon_study.svg) left center no-repeat; }
.headerAC .level .hamMenu_test { background: url(../img/HeaderFooterN/hamMenuIcon_test.svg) left center no-repeat; }
.headerAC .level .hamMenu_school { background: url(../img/HeaderFooterN/hamMenuIcon_school.svg) left center no-repeat; }
.headerAC .level .hamMenu_mail { background: url(../img/HeaderFooterN/hamMenuIcon_mail.svg) left center no-repeat; }
.headerAC .level .hamMenu_sns { background: url(../img/HeaderFooterN/hamMenuIcon_SNS.svg) left center no-repeat; }
.headerAC .level .hamMenu_vistOnline { background: url(../img/HeaderFooterN/hamMenuIcon_vistOnline.svg) left center no-repeat; }

.headerAC .level .acInner a {
	font-size: 14px;
	font-family: var(--font-gothic);
	font-weight: 700;
	padding: 22px 0;
	border-bottom:1px solid #f5f5f5;
}
.headerNavi .headerAC .level .acInner a {
	background:url(../img/HeaderFooterN/button_arrow.svg) center right 10px no-repeat,
  			#f6f6f6;
	border-bottom:4px solid #fff;
	padding: 22px 10px;
}
.headerNavi .headerAC .level .acInner a:last-child {
	border-bottom:none;
}

.headerAC .level .acInner a.bgPR,
.headerAC .level .acInner a.bgJH,
.headerAC .level .acInner a.bgH {
	padding: 26px 0 26px 69px;
	margin:7px 0;
	border-radius:6px;
	border-bottom:1px solid #f5f5f5;
	color:#fff;
	font-size: 19px;
}

.headerAC .level .acInner a.bgPR {
	background:url(../img/HeaderFooterN/arrowNewBg_bk.svg) center right 15px no-repeat,
				url(../img/HeaderFooterN/hamMenuIcon_primarySchool.svg) center left 13px no-repeat,
  			#333;
}
.headerAC .level .acInner a.bgJH {
	background:url(../img/HeaderFooterN/arrowNewBg_bk.svg) center right 15px no-repeat,
				url(../img/HeaderFooterN/hamMenuIcon_JHSchool.svg) center left 13px no-repeat,
  			#333;
}
.headerAC .level .acInner a.bgH {
	background:url(../img/HeaderFooterN/arrowNewBg_bk.svg) center right 15px no-repeat,
				url(../img/HeaderFooterN/hamMenuIcon_HSchool.svg) center left 13px no-repeat,
  			#333;
}
.headerAC .level .acInner a b{
	font-size:1.6em;
}
.headerAC .level .acInner a span{
	display:block;
	font-size:0.8em;
	margin:0 0 3px;
}
.headerAC .level .acInner a span.subText{
	font-size:0.9em;
	margin:7px 0 0;
	color:#459ed1;
	font-family: var(--font-gothic);
	font-weight: 500;
}

.headerNavi .headerAC .level .level .acInner a {
	background:url(../img/HeaderFooterN/button_arrow_Gray.svg) center right 10px no-repeat,
  			#e6e6e6;
	border-bottom:4px solid #fff;
	padding: 22px 10px;
}

.headerAC .level .level .level .acInner a {
	background:url(../images/arrowR_Bk.svg) center right 15px no-repeat,
  			#ccc;
  	border-bottom:1px solid #bbb;
}
.headerAC .level .acInner .acHeader {
    font-size: 14px;
	font-family: var(--font-gothic);
	font-weight: 700;
	padding: 22px 0;
	background:	#fff;
	border-bottom:1px solid #f5f5f5;
	border-top:none;
}

.headerAC .level .acInner .acHeader b {
    font-size:1.4em;
}
.headerAC .level .acInner .acHeader.open {
    background: #f6f6f6;
    color:#009BE0;
}

@media screen and (min-width: 768px) {
.headerAC .level .acInner a { font-size: 17px; }
.headerAC .level .acInner a.bgPR, .headerAC .level .acInner a.bgJH, .headerAC .level .acInner a.bgH { font-size: 23px; }
.headerAC .level .level .acInner a { font-size: 17px; }
.headerAC .level .acInner .acHeader { font-size: 17px; }
}

.headerAC .level .level .acInner  .acHeader {
	background: url(../images/topPage_ArrowBg_darkblue.svg) center right -17px no-repeat,
    			#ddd;
	border-bottom:1px solid #ccc;
}
.headerAC .level .level .acInner  .acHeader.open {
	background: url(../images/topPage_ArrowBg_navy.svg) center right -17px no-repeat,
    			#444;
}
.headerAC .level .acInner .acInner .acInner .acHeader {
  background:#547294;
  padding: 12px 8%;
}
.headerAC .acHeader.open {
	background: #fff;
	color:#009BE0;
}

.headerAC .level .acInner .acInner .acInner .acHeader a{
  display:block;
  color:#222;
  background:url(../images/arrowIconR.svg) center right 10px no-repeat,
  			#fff;
  padding: 22px 0;
	border-radius:30px;
	text-align:center;
	margin:24px 0;
	transition: .3s;
}
.headerAC .level .acInner .acInner .acInner .acHeader a:hover{
	background:url(../images/arrowIconR.svg) center right 20px no-repeat, #f2e97e;	
	border-radius:12px;
}
.headerAC .level .acHeader .i_box {
  display: flex; justify-content: center; align-items: center; position: absolute;
  top: 50%; right: 0px; width: 40px; height: 40px; margin-top: -20px; box-sizing: border-box;
  -webkit-transform: rotate(45deg); transform: rotate(45deg); transform-origin: center center; transition-duration: 0.2s;
}
.headerAC .level .level .acHeader .i_box { right: 0px; }
.headerAC .level .acHeader .i_box .one_i {
  display: block; width: 18px; height: 18px; -webkit-transform: rotate(45deg); transform: rotate(45deg); transform-origin: center center; transition-duration: 0.2s; position: relative;
}
.headerAC .level .acHeader.open .i_box { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
.headerAC .level .acHeader .i_box .one_i:before, 
.headerAC .level .acHeader .i_box .one_i:after {
  display: flex; content: ''; background-color: #333; border-radius: 10px; width: 20px; height: 2px; position: absolute; top: 9px; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); transform-origin: center center;
}
.headerAC .level .acHeader .i_box .one_i:before { width: 2px; height: 20px; top: 0; left: 9px; }
.headerAC .level .acHeader.open .i_box .one_i:before { content: none; }
.headerAC .level .acHeader.open .i_box .one_i:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.headerAC .level .acInner { display: none; padding: 0; box-sizing: border-box; }
.headerAC .level .acInner .box_one { height: 300px; }
.headerAC .level .acInner p.txt_a_ac { margin: 0; }
.headerAC .level .acHeader .i_box .one_i:before, 
.headerAC .level .acHeader .i_box .one_i:after { background-color: #464749; }
.headerAC .level .acHeader.open .i_box .one_i:before, 
.headerAC .level .acHeader.open .i_box .one_i:after { background-color: #009BE0; }

.menu ul li.headerMenuLogo{ padding:0px 0 0 20px; border-bottom:1px solid #ddd; height:70px; }
.menu ul li.headerMenuLogo a{ margin:0 0 ; background: url(../img/HeaderFooterN/changeNewSky/headerNewMainLogo.svg) top 10px left no-repeat; background-size: contain; display:block; width:140px; height:70px; border-top:none;	}
@media screen and (min-width: 768px) {
.menu ul li.headerMenuLogo{ height:80px; }
.menu ul li.headerMenuLogo a{ width:180px; height:77px; }
}

/*********************************
ヘッダーサブメニュータイトル
*********************************/
.menuSubTitleArea{ width:100%; color:#464749; padding:0px 0 15px; }
.menuSubTitleArea h3{ font-size:22px; margin-bottom:5px; font-family: var(--font-gothic); font-weight: 700; }
.menuSubTitleArea h4{ font-family: "JosefinSans-Bold"; font-size:12px; color: #7fa2db; }
.menuSubTitleArea p{ font-size:13px; margin:5px 0 0; font-family: var(--font-gothic); font-weight: 500; }
.menuSubTitleArea h4 span{ color: #aaa; }
.borderZone { width:100%; border-top:5px solid #ccc; padding-top: 15px; margin-top: 25px; }
.borderZone h4{ font-family: "JosefinSans-Bold" !important; padding:0 !important; }

/* ====================================
   全幅メガメニュー(ドロップダウン)の構築
   ==================================== */

/* ボタン群エリア */
.headerTopMenu{
  	width:100%;
  	position:absolute;
  	top: 80px; 
  	left: 0;
  	z-index:100;
  	display: flex;
	flex-wrap:  wrap;
	background:#fff;
}
.et_pb_module {
	width:20%;
}
.secList {
    position: relative; /* ▲ 配置用 */
	display:block;
	width:100%;
	font-size:11.5px;
	line-height:14px;
	color:#000;
	background:#fff;
	text-decoration: none;
	border: none;
	transition: background-color 0.2s, color 0.2s;
	cursor: pointer;
	height:94px;
	padding:0 2px;
}
.headerTopMenu .price,
.headerTopMenu .feature,
.headerTopMenu .study,
.headerTopMenu .experience,
.headerTopMenu .online {
	display:block;
	width:100%;
	padding: 45px 0 7px;
}
.headerTopMenu .price{ background: url(../img/HeaderFooterN/headerTopIcon_price.svg) top 2px center no-repeat; }
.headerTopMenu .feature{ background: url(../img/HeaderFooterN/headerTopIcon_feature.svg) top 2px center no-repeat; }
.headerTopMenu .study{ background: url(../img/HeaderFooterN/headerTopIcon_study.svg) top 2px center no-repeat; }
.headerTopMenu .experience{ background: url(../img/HeaderFooterN/headerTopIcon_experience.svg) top 2px center no-repeat; }
.headerTopMenu .online{ background: url(../img/HeaderFooterN/headerTopIcon_online.svg) top 2px center no-repeat; }
  
/* ★ タブ選択時のデザイン（スマホ・PC共通で紺色＋白文字化） */
.secList.active {
	background-color: #001e69; /* 紺色背景 */
	color: #fff; /* 白文字 */
	opacity: 1; 
	border: none;
}
/* ★ 選択したボタンの下からグレーの▲が飛び出す */
.secList.active::after {
    content: "";
    position: absolute;
    bottom: -1px; /* メニューの上にかぶさるようにマイナス指定 */
    left: 50%;
    transform: translateX(-50%);
    border: 12px solid transparent;
    border-bottom: 12px solid #e6e7e8; /* ボタンと同じ紺色 */
    z-index: 120; /* メニュー(99)より前面へ */
}

/* --- ドロップダウンメニューのラッパー (全幅展開) --- */
.megaMenuWrapper {
    position: absolute;
    top: 174px; /* スマホ時は nav(80px) + ボタン(94px) の下 */
    left: 0;
    width: 100%;
    z-index: 99;
}

/* ★ アニメーション：透明化をせず、高さのみでブラインドのようにスライドダウン */
.section {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-out;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
.section.is-open {
    grid-template-rows: 1fr;
    z-index: 10;
}
.headerMenuInner {
    background: #e6e7e8;
    width: 100%;
    padding: 0 4%; /* アニメーションのため上下の余白は子要素へ */
    border-bottom: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden; /* 高さが0になる時に隠すため必須 */
}

/* 内部の余白設定（上下paddingはここで行う） */
.headerMenuInnerContent {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    padding: 20px 0 30px;
}

/* --- 各種ボタンのデザイン --- */
.menuBtn_long { width:100%; }
.menuBtn_long a, .menuBtn_longW a{ background: url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; padding:20px 25px 20px 140px; margin: 0 0 20px; width: 100%; border-radius:20px; display:block; color:#464749; box-shadow: 0 3px #d6d6d6; }
.menuBtn_longW a{ color:#000; }
.menuBtn_long a h4, .menuBtn_longW a h4{ font-size:14px; font-family: var(--font-gothic); font-weight: 700; }
.menuBtn_long a h4 b, .menuBtn_longW a h4 b{ font-size:1.5em; }
.menuBtn_long a p, .menuBtn_longW a p{ font-size:13px; line-height:1.4em; margin: 12px 0 0; color:#464749; }
.priceBtn .menuBtn_long a p{ line-height:1.65em; margin-bottom:10px; }
.menuBtn_long a h6{ display:inline; font-size:9px; background:#444; color:#ddd; padding:1px 10px; margin:10px 0 }
.menuBtn_long a h5, .menuBtn_longW a h5{ font-size:10px; color:#464749;; margin-top:7px; font-family: var(--font-gothic); font-weight: 500; }
.menuBtn_long a h5 b{ font-size:2.4em; font-family: "JosefinSans-Bold"; }
.menuBtn_long a h5 small{ font-size:0.8em; }
.menuBtn_long a h5 small span{ font-size:1.4em; font-family: "JosefinSans-Bold"; }
.menuBtn_long a p b{ font-size:1.2em; font-family: var(--font-gothic); font-weight: 700; color:#464749; }
.menuBtn_longW a p{ color:#222; }

.menuBtn_sub { width:100%; background: url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: 30px, auto; margin: 0 0 10px; width: 100%; border-radius:20px; box-shadow: 0 3px #d6d6d6; }
.menuBtn_sub a{ background: #fff; padding:25px 30px 25px 95px; width: 100%; display:block; color:#464749; }
.priceBtn .menuBtn_sub a{ background: url(../img/HeaderFooterN/headerMenuSubIcon_coin.svg) left 20px center no-repeat; width: 100%; display:block; }
.menuBtn_sub a h4{ font-size:12px; font-family: var(--font-gothic); font-weight: 700; }
.menuBtn_sub a h4 b{ font-size:1.5em; }
.menuBtn_long a h4 span, .menuBtn_longW a h4 span{ display:block; }

.menuBtn_basic50 { width:100%; display:flex; flex-wrap: wrap; }
.menuBtn_basic50 a{ background: url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: 30px, auto; padding: 10px 20px 19px; width: calc(50% - 5px); margin-right:10px; margin-bottom:10px; text-align:center; border-radius:20px; display:block; box-shadow: 0 3px #d6d6d6; }
.menuBtn_basic50 a:nth-child(2n){ margin-right:0; }
.menuBtn_basic50 h4{ font-size:12px; font-family: var(--font-gothic); font-weight: 700; padding: 80px 5px 5px; }
.menuBtn_basic50 h4 b{ font-size:1.8em; }
.menuBtn_basic50 h4 span{ display:block; }
.menuBtn_basic50 p{ font-size:11px; line-height:1.3em; margin: 1px 0 0; color:#444; text-align:left; }

/* 各種アイコン付与用 */
.menuBtn_basic50 h4.startDiscount{ background: url(../img/HeaderFooterN/headerMenuSubIcon_startDiscount.svg) top 0px center no-repeat; }
.menuBtn_basic50 h4.changeVist{ background: url(../img/HeaderFooterN/headerMenuSubIcon_changeVist.svg) top 0px center no-repeat; background-size: 75px; }
.menuBtn_basic50 h4.phylosophy{ background: url(../img/HeaderFooterN/iconNew_philosophy.svg) top 0px center no-repeat; background-size: 75px; }
.menuBtn_basic50 h4.landscape{ background: url(../img/HeaderFooterN/iconNew_landscape.svg) top 0px center no-repeat; background-size: 75px; }
.menuBtn_basic50 h4.shingaku{ background: url(../img/HeaderFooterN/iconNew_shingaku.svg) top 0px center no-repeat; background-size: 75px; }
.menuBtn_basic50 h4.other{ background: url(../img/HeaderFooterN/iconNew_other.svg) top 0px center no-repeat; background-size: 75px; }
.menuBtn_basic50 h4.vistTest{ background: url(../img/HeaderFooterN/iconNew_test.svg) top 0px center no-repeat; background-size: 75px; }
.menuBtn_basic50 h4.vistBook{ background: url(../img/HeaderFooterN/iconNew_book.svg) top 0px center no-repeat; background-size: 75px; }
.menuBtn_basic50 p{ font-size:13px; line-height:1.4em; text-align:left; margin:8px 0 0; }

.priceBtn .menuBtn_long a{ margin-bottom: 10px; }
.priceBtn .menuBtn_long a.ELschool{ background: url(../img/HeaderFooterN/headerMenuIcon_ELschool.svg) left 15px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; }
.priceBtn .menuBtn_long a.JHschool{ background: url(../img/HeaderFooterN/headerMenuIcon_JHschool.svg) left 15px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; }
.priceBtn .menuBtn_long a.Hschool{ background: url(../img/HeaderFooterN/headerMenuIcon_Hschool.svg) left 15px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; }
.priceBtn .menuBtn_long a h4{ font-size:15px; margin-bottom:15px; }
.priceBtn .menuBtn_long a h4 b{ font-size:1.7em; position: relative; z-index: 2; padding:0 5px; }
.priceBtn .menuBtn_long a h4 b::before {
	display: block; content: ""; width: 100%; height: 10px; background-color: #7fa2db; opacity:0.5; position:absolute; bottom: -2px; left: 0; border-radius: 10px; z-index: -1;
}

.subArea { width:100%; border-top:5px solid #ccc; padding-top: 15px; margin-top: 25px; }

.priceBtn .menuBtn_sub a.coin{ background: url(../img/HeaderFooterN/icon_zero.svg) left 15px center no-repeat; }
.priceBtn .menuBtn_sub a.brother{ background: url(../img/HeaderFooterN/icon_brother.svg) left 15px center no-repeat; }
.priceBtn .menuBtn_sub a.start{ background: url(../img/HeaderFooterN/icon_start.svg) left 15px center no-repeat; }
.priceBtn .menuBtn_sub a.change{ background: url(../img/HeaderFooterN/icon_change.svg) left 15px center no-repeat; }
.priceBtn .menuBtn_sub a h4{ font-size:12px; }
.priceBtn .menuBtn_sub a h4 b{ font-size:1.9em; }
.priceBtn .menuBtn_sub a p{ font-size:13px; line-height:1.3em; margin: 7px 0 0; color:#444; }

.experienceBtn .menuBtn_long a{ margin-bottom: 10px; }
.experienceBtn .menuBtn_long a.taiken{ background: url(../img/HeaderFooterN/headerMenuIcon_experience.svg) left 20px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; }
.experienceBtn .menuBtn_long a.brochure{ background: url(../img/HeaderFooterN/headerMenuIcon_brochure.svg) left 20px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; }
.experienceBtn .menuBtn_long a h4 b{ font-size:24px; margin-bottom:8px; }
.experienceBtn .menuBtn_long a h4{ font-size:14px; font-family: var(--font-gothic); font-weight: 700; margin-bottom:6px; }
.experienceBtn .menuBtn_longW a{ background: url(../img/HeaderFooterN/headerMenuSubIcon_brochure.svg) left 20px center no-repeat, #fff; }

.featureBtn .menuBtn_long a, .featureBtn .menuBtn_longW a{ margin-bottom: 10px; }
.featureBtn .menuBtn_long a.features{ background: url(../img/HeaderFooterN/headerMenuIcon_feature.svg) left 20px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; }
.featureBtn .menuBtn_long a.comparison{ background: url(../img/HeaderFooterN/headerMenuSubIcon_comparison.svg) left 20px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; }
.featureBtn .menuBtn_long a h4 b{ font-size:22px; margin-bottom:8px; }
.featureBtn .menuBtn_long a h4{ font-size:14px; font-family: var(--font-gothic); font-weight: 500; margin-bottom:6px; }
.featureBtn .menuBtn_longW a.philosophy{ background: url(../img/HeaderFooterN/headerMenuSubIcon_philosophy.svg) left 20px center no-repeat, #fff; }
.featureBtn .menuBtn_longW a h4{ font-size:13px; font-family: var(--font-gothic); font-weight: 300; margin-bottom:6px; }
.featureBtn .menuBtn_longW a h4 b{ font-size:1.7em; font-family: var(--font-gothic); font-weight: 700; }

.studyBtn .subArea { border-top:1px solid #fff; padding-top: 25px; margin-top: 25px; }
.studyBtn .menuBtn_long a, .studyBtn .menuBtn_longW a{ margin-bottom: 10px; }

.studyBtn .menuBtn_long a.vistadia{ background: url(../img/HeaderFooterN/iconL_vistadia.svg) left 20px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; }
.studyBtn .menuBtn_long a.quiz{ background: url(../img/HeaderFooterN/iconL_quiz.svg) left 20px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; }
.studyBtn .menuBtn_longW a.soundnovel{ background: url(../img/HeaderFooterN/iconL_novel.svg) left 20px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; }
.studyBtn .menuBtn_longW a.japaneseIdiom{ background: url(../img/HeaderFooterN/iconL_japaneseIdiom.svg) left 20px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; }
.studyBtn .menuBtn_long a.testTaisaku{ background: url(../img/HeaderFooterN/iconL_testTaisaku.svg) left 20px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; }
.studyBtn .menuBtn_long a.exam{ background: url(../img/HeaderFooterN/iconL_exam.svg) left 20px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; margin-bottom: 10px; }
.studyBtn .menuBtn_long a h4 b{ font-size:22px; margin-bottom:8px; }
.studyBtn .menuBtn_long a h4{ font-size:13px; font-family: var(--font-gothic); font-weight: 300; margin-bottom:6px; }
.studyBtn .menuBtn_longW a h4{ font-size:13px; font-family: var(--font-gothic); font-weight: 300; margin-bottom:6px; }
.studyBtn .menuBtn_basic50 h4.hyakunin{ background: url(../img/HeaderFooterN/iconNew_hyakunin.svg) top 0px center no-repeat; background-size: 75px; }
.studyBtn .menuBtn_basic50 h4.englishWord{ background: url(../img/HeaderFooterN/iconNew_englishWord.svg) top 0px center no-repeat; background-size: 75px; }
.studyBtn .menuBtn_basic50 h4.download{ background: url(../img/HeaderFooterN/iconNew_download.svg) top 0px center no-repeat; background-size: 75px; }
.studyBtn .menuBtn_basic50 h4.scienceLabo{ background: url(../img/HeaderFooterN/iconNew_scienceLabo.svg) top 0px center no-repeat; background-size: 75px; }
.studyBtn .menuBtn_basic50 h4.news{ background: url(../img/HeaderFooterN/iconNew_news.svg) top 0px center no-repeat; background-size: 75px; }
.studyBtn .menuBtn_basic50 h4.shinanjo{ background: url(../img/HeaderFooterN/iconNew_shinanjo.svg) top 0px center no-repeat; background-size: 75px; }

.menuBtn_basic { width:100%; display:flex; flex-wrap: wrap; }
.menuBtn_basic a{ background: url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: 30px, auto; padding:10px 20px 19px; width: 49%; margin-right:2%; margin-bottom:10px; text-align:center; border-radius:20px; display:block; box-shadow: 0 3px #d6d6d6; }
.menuBtn_long a.vistOnline{ background: url(../img/HeaderFooterN/iconL_vistONLINE.svg) left 20px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: auto, 30px, auto; }
.experienceBtn .menuBtn_basic a:nth-child(2n){ margin-right:0; }

.onlineBtn .menuBtn_basic a{ padding:10px 20px 18px; width: 32%; margin-right:2%; }
.onlineBtn .menuBtn_basic a:nth-child(3n){ margin-right:0; }
.onlineBtn .menuBtn_basic h4{ font-size:22px; padding:75px 5px 0px; }
.menuBtn_basic h4{ font-size:18px; font-family: var(--font-gothic); font-weight: 700; padding:52px 5px 10px; }
.menuBtn_basic h4.math{ background: url(../img/HeaderFooterN/iconNew_math2.svg) top 0px center no-repeat; background-size: 70px; }
.menuBtn_basic h4.english{ background: url(../img/HeaderFooterN/iconNew_english2.svg) top 0px center no-repeat; background-size: 70px; }
.menuBtn_basic h4.japanese{ background: url(../img/HeaderFooterN/iconNew_japanese2.svg) top 0px center no-repeat; background-size: 70px; }
.menuBtn_basic h4.science{ background: url(../img/HeaderFooterN/iconNew_science2.svg) top 0px center no-repeat; background-size: 70px; }
.menuBtn_basic h4.socialS{ background: url(../img/HeaderFooterN/iconNew_socialS2.svg) top 0px center no-repeat; background-size: 70px; }
.menuBtn_basic p{ font-size:13px; line-height:1.35em; text-align:left; margin:0px 0; }

.experienceBtn .menuBtn_basic h4{ font-size:14px; padding:80px 5px 5px; line-height:1.4em; }
.experienceBtn .menuBtn_basic h4 span{ display:block; font-size:1.5em; }
.experienceBtn .menuBtn_basic h4.mail{ background: url(../img/HeaderFooterN/iconNew_mail.svg) top 0px center no-repeat; background-size:75px; }
.experienceBtn .menuBtn_basic h4.line{ background: url(../img/HeaderFooterN/iconNew_line.svg) top 0px center no-repeat; background-size:75px; }
.experienceBtn .menuBtn_basic h4.map{ background: url(../img/HeaderFooterN/iconNew_map.svg) top 0px center no-repeat; background-size:75px; }
.experienceBtn .menuBtn_basic h4.telephone{ background: url(../img/HeaderFooterN/iconNew_telephone.svg) top 0px center no-repeat; background-size:75px; }

.onlineBtn .menuBtn_sub a{ background: url(../img/HeaderFooterN/iconNew_entry.svg) left 10px center no-repeat, url(../img/topPageN/button_arrow_Wbg_W.svg) bottom 6px right 6px no-repeat, #fff; background-size: 75px, 30px, auto; padding:25px 20px 25px 90px; margin: 0 0 20px; width: 100%; border-radius:20px; display:block; }
.onlineBtn .menuBtn_sub a h4{ font-size:14px; }
.onlineBtn .menuBtn_sub a p{ font-size:13px; line-height:1.35em; margin-top:10px; }

.menuBtn_subM { width:100%; margin-top: 25px; }
.menuBtn_subM a{ background: url(../img/HeaderFooterN/headerMenuSubIcon_telephone.svg) left 20px center no-repeat, #fff; padding:10px 20px 10px 90px; margin: 0 auto 30px; width: 66%; border-radius:20px; display:block; color:#000; }
.menuBtn_subM a h4{ font-size:12px; font-family: var(--font-gothic); font-weight: 700; }
.menuBtn_subM a h4 b{ font-size:1.65em; }
.menuBtn_subM a p{ font-size:11px; line-height:1.3em; margin: 4px 0 0; color:#444; }

.headerMenuInner h5.subMenu_text{ font-size:12px; width:100%; border-top:1px solid #fff; padding-top: 10px; margin: 15px 0 12px; color:#000; }
.headerMenuInner h5.subMenu_text b{ font-size:1.6em; font-family: var(--font-gothic); font-weight: 700; }


/*********************************
PC用設定（メガメニュー・カラム化）
*********************************/
@media screen and (min-width: 750px) {
/* スマホ設定をリセットし、ヘッダー右上のボタン群として配置 */
.headerTopMenu {
  	margin-top: -90px;
  	width: 400px;
  	right: 80px;
  	top: auto; 
  	left: auto;
  	position: absolute;
  	z-index: 100;
  	display: flex;
	flex-wrap: wrap;
	background: transparent;
}
.et_pb_module {
	width:80px;
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;
	height:90px;
}

/* トグルボタン（PC用） */
.Toggle { height: 90px; width:80px; }
.Toggle span { width: 30px; right:26px; }
.Toggle span:nth-child(1) { top:36px; } 
.Toggle span:nth-child(2) { top: 44px; } 
.Toggle span:nth-child(3) { top: 52px; }
.Toggle.active span:nth-child(1) { top: 44px; }
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) { top: 44px; transform: rotate(45deg); }
.Toggle.active span:nth-child(3) { top: 44px; }

nav.headerNavi{ height: 80px; background: #023F86; }
#logo a.mainlogoImg { margin:5px 0 0 10px; background: url(../img/HeaderFooterN/headerNewMainLogoW.svg) top 0px left no-repeat; }
.secList { height:89px; }


/* --- PC用メガメニュー(全幅ドロップダウン)のレイアウト展開 --- */
.megaMenuWrapper {
    top: 80px; /* navの直下に展開 */
}

/* フレックスボックスによる横並び・マルチカラム化 */
.headerMenuInnerContent {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

/* 各カラムに均等割り当てベース */
.mega-column {
    flex: 1;
}

/* サブエリア（右カラムなど）の装飾リセット＋区切り線 */
.headerMenuInnerContent > .subArea.mega-column {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
    border-left: 2px dashed #ccc;
    padding-left: 40px;
}

/* PCでは不要な区切り線を非表示にするユーティリティ */
.hide-on-pc {
    border-top: none !important;
    margin-top: 30px !important;
    padding-top: 0 !important;
}

} /* -- PC設定END -- */


/*********************************
モーダルエリア等・フローティングボタン 
*********************************/
/* 既存のモーダルボタン（位置を左に移動・スクロール表示対応・下からふわっと出現） */
#page-top label { 
    background:url(../img/HeaderFooterN/modalWindowButton.svg) center center no-repeat; 
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.4)); 
    width:60px; 
    height:60px; 
    display:block; 
    position: fixed; 
    cursor: pointer; 
    z-index:30; 
    bottom: 20px; 
    left: 10px; 
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(30px);
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease; 
}
#page-top label.is-visible { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0);
}
#page-top label:hover { opacity:0.9; }

/* 上に戻るボタン 新規追加（スクロール表示対応・下からふわっと出現・PCでも円形） */
#return-top { 
    display: block; 
    position: fixed; 
    z-index: 30; 
    bottom: 20px; 
    right: 10px; 
    width: 50px; 
    height: 50px; 
    background-color: #111; 
    border: 5px solid #fff; 
    border-radius: 18px; 
    background-image: url(../img/HeaderFooterN/arrowUp.svg); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 24px 24px; 
    cursor: pointer; 
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.4)); 
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(30px);
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease, background-color 0.2s ease; 
    box-sizing: border-box; 
}
#return-top.is-visible { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0);
}
#return-top:hover { opacity: 0.9; }

@media only screen and (min-width: 700px) { 
    #page-top label { background:url(../img/HeaderFooterN/modalWindowButtonL.svg) center center no-repeat; width:124px; height:60px; } 
}

.modal_wrap input{ display: none; }
.modal_overlay{ display: flex; justify-content: center; overflow: auto; position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background: rgba(0,0,0,0.75); opacity: 0; transition: opacity 0.5s, transform 0s 0.5s; transform: scale(0); }
.modal_trigger{ position: absolute; width: 100%; height: 100%; }
.modal_content{ align-self: center; width: 92%; max-width: 650px; padding: 0px 0px; box-sizing: border-box; background: #fff; line-height: 1.4em; transform: scale(0.3); transition: 0.5s; border-radius:20px; filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.9)); }
.close_button{ position: absolute; top: 0px; right: 0px; font-size: 24px; width:44px; height:44px; cursor: pointer; background:#777; border-radius:0 19px 0 0; background:url(../img/HeaderFooterN/iconModal_closeBtn.svg) center center no-repeat; }
.modal_wrap input:checked ~ .modal_overlay{ opacity: 1; transform: scale(1); transition: opacity 0.5s; }
.modal_wrap input:checked ~ .modal_overlay .modal_content{ transform: scale(1); }
.modal_content .contactText{ padding:12px 0 12px 50px; font-size:12px; color:#999; border-bottom:1px solid #ccc; font-family: var(--font-gothic); font-weight: 700; background:url(../img/HeaderFooterN/iconBanner_contact.svg) center left 20px no-repeat; height:44px; text-align:left; }
.modal_content .mainWrap{ width:100%; padding:0 20px; }
.modal_content .btnLarea a{ width:100%; color:#fff; display:block; padding: 20px 0 12px 65px; margin:13px 0 7px; border-radius:7px; font-size:13px; line-height:15px; text-align:left; }
.modal_content .btnLarea a.student{ background: url(../img/HeaderFooterN/iconModal_student.svg) bottom 12px left 10px no-repeat, url(../img/HeaderFooterN/arrowNewBg_bk.svg) center right 15px no-repeat, #009BE0; }
.modal_content .btnLarea a.visitor{ background: url(../img/HeaderFooterN/iconModal_visitor.svg) bottom 12px left 10px no-repeat, url(../img/HeaderFooterN/arrowNewBg_bk.svg) center right 15px no-repeat, #003D85; }
.modal_content .btnLarea a b{ font-family: var(--font-gothic); font-weight: 700; font-size:1.7em; }
.modal_content .btnLarea a span{ display:block; margin-top:3px; opacity:0.9; }
.modal_content a.telBtn{ background: url(../img/HeaderFooterN/iconModal_telephone.svg) left 20px center no-repeat, #000; padding:10px 20px 10px 90px; margin: 25px auto; width: 250px; border-radius:30px; display:block; color:#fff; border:none; text-align:left; }
.modal_content a.telBtn h4{ font-size:12px; font-family: var(--font-gothic); font-weight: 700; }
.modal_content a.telBtn h4 b{ font-size:1.65em; }
.modal_content a.telBtn p{ font-size:10px; line-height:1.3em; margin: 0 0; color:#aaa; }
.modal_content ul{ width:100%; max-width:800px; margin:7px auto; display:flex; flex-wrap:wrap; }
.modal_content ul li{ width:32%; margin:0; margin-right:2%; margin-bottom:2%; border-radius:7px; text-align: center; background:#ddd; transition: all 0.25s ease; border:none; }
.modal_content ul li:hover{ background:#ebeef7; }
.modal_content ul li a{ display:block; padding:65px 5px 5px; font-size:12px; line-height:14px; color:#000; font-family: var(--font-gothic); font-weight: 700; }
.modal_content ul li a span{ display:block; }
.modal_content ul li a.blackboard{ background: url(../img/HeaderFooterN/iconModal_blackboard.svg) top 0px center no-repeat; }
.modal_content ul li a.mail{ background: url(../img/HeaderFooterN/iconModal_mail.svg) top 0px center no-repeat; }
.modal_content ul li a.catalog{ background: url(../img/HeaderFooterN/iconModal_catalog.svg) top 0px center no-repeat; }
.modal_content ul li a.absence{ background: url(../img/HeaderFooterN/iconModal_absence.svg) top 0px center no-repeat; }
.modal_content ul li a.late{ background: url(../img/HeaderFooterN/iconModal_late.svg) top 0px center no-repeat; }
.modal_content ul li a.interview{ background: url(../img/HeaderFooterN/iconModal_interview.svg) top 0px center no-repeat; }
.modal_content ul li:nth-child(3n){ margin-right:0; }
.modal_content .modalSNS{ padding:7px 0; border-top:1px solid #ccc; }
.modal_content .snsModalButton{ width: 138px; margin:3px auto; display: flex; flex-wrap: wrap; }
.modal_content .snsModalButton a{ width: 30px; height:26px; display:block; margin:0 8px; }
.modal_content .snsModalButton a.twitter{ background:url(../img/HeaderFooterN/iconBanner_twitterG.svg) center center no-repeat; }
.modal_content .snsModalButton a.instagram{ background:url(../img/HeaderFooterN/iconBanner_instaG.svg) center center no-repeat; }
.modal_content .snsModalButton a.line{ background:url(../img/HeaderFooterN/iconBanner_lineG.svg) center center no-repeat; }
@media only screen and (min-width: 700px) {
.modal_content .contactText{ padding:17px 0 12px 72px; font-size:15px; background:url(../img/HeaderFooterN/iconBanner_contact.svg) center left 25px no-repeat; background-size:36px; height:54px; }
.close_button{ width:54px; height:54px; background:url(../img/HeaderFooterN/iconModal_closeBtnL.svg) center center no-repeat; }
.modal_content .mainWrap{ padding:0 70px; }
.modal_content ul li a{ padding:65px 5px 10px; font-size:17px; line-height:20px; }
.modal_content .btnLarea a{ padding: 28px 0 20px 105px; font-size:16px; line-height:18px; }
.modal_content .btnLarea a.student{ background: url(../img/HeaderFooterN/iconModal_student.svg) top 5px left 20px no-repeat, url(../img/HeaderFooterN/arrowNewBg_bk.svg) center right 15px no-repeat, #009BE0; background-size:70px, 40px, 40px; }
.modal_content .btnLarea a.visitor{ background: url(../img/HeaderFooterN/iconModal_visitor.svg) top 5px left 20px no-repeat, url(../img/HeaderFooterN/arrowNewBg_bk.svg) center right 15px no-repeat, #003D85; background-size:70px, 40px, 40px; }
.modal_content .snsModalButton{ width: 174px; margin:5px auto; }
.modal_content .snsModalButton a{ width: 34px; height:34px; margin:0 12px; }
.modal_content .snsModalButton a.twitter{ background-size:34px; }
.modal_content .snsModalButton a.instagram{ background-size:34px; }
.modal_content .snsModalButton a.line{ background-size:34px; }
}

/*********************************
フッター (既存そのまま)
*********************************/
footer { margin:0 auto; color: #fff; width:100%; text-align:center; background: url(../img/HeaderFooterN/image_FooterVISPO.svg) top center no-repeat; padding: 80px 0 0 0; margin-top:-120px; }
footer .GoToTop{ position: relative; z-index:4; }
footer .GoToTop:before { content: ""; position: absolute; background: url(../img/HeaderFooterN/goToTop_vispo.svg) top center no-repeat; width: 100%; height: 50px; top:-50px; left:0; z-index: 3; }
footer .GoToTop a{ width:92%; max-width: 500px; margin:0 auto -46px; border-radius: 5px; border: solid 3px #000; background:#fff; position: relative; text-align:center; padding:30px 0; display:block; }
footer .GoToTop a p{ color:#000; font-size:12px; font-family: var(--font-gothic); font-weight: 700; display:inline-block; }
footer .GoToTop a p::before { content: url(../img/HeaderFooterN/iconGoToTop.svg); position: relative; vertical-align: middle; padding-right:8px; }
.footerArea{ background: #000; padding: 50px 0 0 0; }
footer .socialmedia{ padding:20px 0; margin:0; }
footer .socialmedia h4{ color: #009BE0; font-family: var(--font-gothic); font-weight: 700; margin:15px 0 25px; font-size: 12px; }
footer .socialmedia ul{ display: table; margin: 0px auto 0; padding:0px 0 0 0; }
footer .socialmedia ul li{ display: table-cell; }
footer .socialmedia ul li a{ width:40px; height:40px; margin:0 10px; display:block; transition: all 0.2s; }
footer .socialmedia ul li a:hover{ opacity:0.5; }
footer .socialmedia ul li:nth-child(1) >a{ background: url(../img/HeaderFooterN/iconFooter_Twitter.svg) top center no-repeat; }
footer .socialmedia ul li:nth-child(2) >a{ background: url(../img/HeaderFooterN/iconFooter_Facebook.svg) top center no-repeat; }
footer .socialmedia ul li:nth-child(3) >a{ background: url(../img/HeaderFooterN/iconFooter_Instagram.svg) top center no-repeat; }
footer .socialmedia ul li:nth-child(4) >a{ background: url(../img/HeaderFooterN/iconFooter_Line.svg) top center no-repeat; }
footer .feature{ text-align:left; padding:40px 0; }
footer .feature ul{ margin:0 auto; width:90%; border-top:1px solid #222; }
footer .feature ul li a{ font-size:12px; font-weight:bold; text-indent:10px; display:block; color:#eee; padding:15px 0; border-bottom:1px solid #222; position: relative; transition: all 0.2s; }
footer .feature ul li a span{ color:#097db0; font-size:11px; font-family: "TitilliumWeb-Light"; left:50%; position: absolute; }
footer .feature ul li a:hover{ color:#001e69; }
footer .feature ul li a:hover span{ color:#777; }
footer .contents{ margin:0 auto; padding:10px 0 10px; width:100%; display:flex; flex-wrap:wrap; text-align: left; }
footer .contents .subFooterLinks{ width:50%; margin:0 0 50px; }
footer .contents .subFooterLinks h4{ color:#aaa; font-size:14px; padding:13px 0 ; font-weight:bold; text-indent:35px; }
footer .contents .subFooterLinks:nth-child(1) h4{ background: url(../img/HeaderFooterN/footerIcon_contents.svg) left center no-repeat; }
footer .contents .subFooterLinks:nth-child(2) h4{ background: url(../img/HeaderFooterN/footerIcon_pencil.svg) left center no-repeat; }
footer .contents .subFooterLinks:nth-child(3) h4{ background: url(../img/HeaderFooterN/footerIcon_school.svg) left center no-repeat; }
footer .contents .subFooterLinks:nth-child(4) h4{ background: url(../img/HeaderFooterN/footerIcon_mail.svg) left center no-repeat; }
footer .contents .subFooterLinks:nth-child(5) h4{ background: url(../img/HeaderFooterN/footerIcon_etc.svg) left center no-repeat; }
footer .contents .subFooterLinks ul, footer .contents .subFooterLinks h4{ width:80%; margin:0 10%; }
footer .contents .subFooterLinks ul{ border-top:1px solid #222; }
footer .contents .subFooterLinks ul li a{ font-size:12px; color:#fff; padding:15px 0; border-bottom:1px solid #222; display:block; transition: all 0.2s; }
footer .contents .subFooterLinks ul li a:hover{ color:#ccc; }
footer .footerLink{ background: #222; padding:20px 0 20px 0; text-align:left; }
footer .footerLink ul{ margin:0 auto; width:90%; }
footer .footerLink ul li a{ font-size:10px; color:#fff; transition: all 0.2s; }
footer .footerLink ul li a:hover{ opacity:0.5; }
footer .footerLink ul li{ display:inline-block; padding:0 10px; margin:2px 0; }
footer .footerLink ul li:last-child{ border-right:none; }
footer .vistLogo{ padding:30px 0 20px ; margin:0; }
footer .vistLogo a { width:150px; height:40px; display: block; background: url(../img/HeaderFooterN/footerVistLogo.svg); margin:0 0 0 5%; transition: all 0.2s; }
footer .vistLogo a:hover { opacity:0.7; }
footer h4.copyright { text-align: center; font-size:11px; color:#ddd; padding:0px 0 30px 5%; display:block; }

@media only screen and (min-width: 768px) {
footer { background-size:280px; padding: 0px 0 0 0; margin: -40px 0 0 0; }
footer .GoToTop a p{ font-size:16px; }
footer .socialmedia ul li a{ border-right:none; }
footer .feature ul{ margin:0 auto 40px; width:90%; max-width:1000px; display:flex; flex-wrap:wrap; border-top:none; }
footer .feature ul li{ width:48%; margin-right:4%; }
footer .feature ul li:nth-child(2n){ margin-right:0; }
footer .feature ul li a{ font-size:14px; font-weight:normal; text-indent:35px; background: url(../img/HeaderFooterN/footerIcon_contents.svg) left center no-repeat; color:#fff; padding:18px 0; border-bottom:1px solid #222; }
footer .feature ul li:nth-child(1) a{ background: url(../img/HeaderFooterN/footerIcon_vist.svg) left center no-repeat; border-top:1px solid #222; }
footer .feature ul li:nth-child(2) a{ background: url(../img/HeaderFooterN/footerIcon_price.svg) left center no-repeat; border-top:1px solid #222; }
footer .feature ul li:nth-child(3) a{ background: url(../img/HeaderFooterN/footerIcon_calendar.svg) left center no-repeat; }
footer .feature ul li:nth-child(4) a{ background: url(../img/HeaderFooterN/footerIcon_discount.svg) left center no-repeat; }
footer .feature ul li a span{ color:#bbb; font-size:13px; left:50%; }
footer .feature ul li a:hover{ color:#ccc; }
footer .feature ul li a:hover span{ color:#888; }
footer .contents{ margin:0 auto; padding:0; width:100%; max-width:1000px; width:90%; }
footer .contents .subFooterLinks{ width:30%; margin:0 0 50px 0; margin-right:5%; }
footer .contents .subFooterLinks:nth-child(3n){ margin-right:0; }
footer .contents .subFooterLinks h4{ color:#aaa; font-size:15px; text-indent:37px; }
footer .contents .subFooterLinks ul{ border-top:1px solid #222; }
footer .contents .subFooterLinks ul li a{ border-bottom:1px solid #222; font-size:14px; }
footer .contents .subFooterLinks ul, footer .contents .subFooterLinks h4{ width:100%; margin:0 0 ; }
footer .companyArea{ display:flex; flex-flow: row-reverse; max-width:1000px; width:90%; margin:0 auto; }
footer .companyArea .footerLink{ width: calc( 100% - 230px ) ; }
footer .footerLink{ background: #000; padding: 0; }
footer .footerLink ul{ width:100%; }
footer .footerLink ul li{ margin:3px 0; }
footer .footerLink ul li a{ font-size:11px; }
footer .companyArea .vistLogo{ width:190px; padding:0 0 0 0px; margin-right:40px; }
footer .vistLogo a { width:190px; height:50px; background: url(../img/HeaderFooterN/footerVistLogo.svg); background-size:contain; margin:0; }
footer h4.copyright { text-align: center; font-size:12px; color:#aaa; padding:25px 0 50px 0; }
}

@media only screen and (min-width: 1000px) {
footer .contents .subFooterLinks{ width:22%; margin-right:4%; }
footer .contents .subFooterLinks:nth-child(3n){ margin-right:4%; }
footer .contents .subFooterLinks:nth-child(4n){ margin-right:0; }
footer .companyArea{ width:100%; }
footer .companyArea .vistLogo{ padding:0; }
}

.cd-auto-hide-header { background-color: #001e69; }
.cd-auto-hide-header .logo a { background: url(../img/HeaderFooter/VistLogo.svg); }
.cd-auto-hide-header .nav-trigger { border-left: 1px solid #444; background-position: top center; background-repeat: no-repeat; }
.cd-primary-nav > ul a:hover, .cd-primary-nav > ul a.active { color: #bbb; }

#footer{ background: none; }
.Toggle.active { background: url(../images/headerHamburger_textClose.svg) bottom 5px center no-repeat, #a30a30; }