@charset "utf-8";
/*
Theme Name: Lightning Child 
Theme URI: ★ テーマの公式サイトなどのURL（空欄でも可） ★
Template: lightning
Description: ★ テーマの説明（空欄でも可） ★
Author: ★ テーマ作成者の名前（空欄でも可） ★
Tags: 
Version: 0.1.2
*/


.mainSection-col-two{
	float:none;
    margin: 0 auto;
	width:100%;
}

.panel-grid-cell{
	margin:0 auto;
}


/* 共通 */
html{
	font-size: 62.5%;
}

body{
  color:rgb(74,88,108);
	overflow-x: hidden;
	position:relative;
	z-index:-1;
	font-size:1.6rem;/* 16px*/
	/* line-height: 2; */
}


h1 {
	font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(2.8rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
	line-height: 1.3;
}

h2 {
	font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
	line-height: 1.3;
}

img{
  width: 50%;
}

.br::before {
	content: "\A" ;
	white-space: pre ;
}

/*ヘッダー*/
.container{
  display:grid;
  grid-template-columns:100%;

}

.navigation{
  width: 100%;
  height:60px;
  display:flex;
  justify-content:center;
  align-items:center;
  position: fixed;
  background:#fff;
  box-shadow:0 2px 3px rgba(165,165,180,0.3);
  z-index: 1000;
}

.menuLink1,
.menuLink2,
.menuLink3,
.menuLink4,
.menuLink5,
.menuLink6 {
	width:100%;
	display: block;
	text-align: center;
	height: 60px;
	padding-top: 5px;
	transition:0.4s;
  line-height: 1.5;
}

.menuLink5,
.menuLink6{
	padding-top:5px;
}

.menuButton5{
	height: 50px;
	width: 70%;
	border-radius: 90px;
	margin: 0 auto;
	box-shadow: 0px 0px 5px 3px #f6b403;

}

.menuButton6{
	height: 50px;
	width: 70%;
	border-radius: 90px;
	margin: 0 auto;
	background:#f6b403;
}

.menuLink1:hover,
.menuLink2:hover,
.menuLink3:hover,
.menuLink4:hover{
	background: #76D4C7;
	transition:0.4s;
	letter-spacing:8px;
	text-align:center;
	color:#fff;
}

.menuLink3:hover,
.menuLink4:hover{
	letter-spacing:4px;
}

.menuLink5:hover,
.menuLink6:hover{
	letter-spacing:8px;
	transition:0.4s;
	background: #fff;
}

.menu{
	color: #4A586C;
	position: relative;
	display:block;
	top: 3px;
}

.menuLink5 .menu{
	color:#f6b403;
	font-weight:bold;
}

.menuLink6 .menu{
	color:#fff;
	font-weight:bold;
}

.menuLink5 .menu,
.menuLink6 .menu{
	top: 1px;
}

.menuLink1:hover .menu,
.menuLink2:hover .menu,
.menuLink3:hover .menu,
.menuLink4:hover .menu{
	color:#fff;
}

.menuLink1:hover .menuEn,
.menuLink2:hover .menuEn,
.menuLink3:hover .menuEn,
.menuLink4:hover .menuEn,
.menuLink5:hover .menuEn,
.menuLink6:hover .menuEn{
	color:yellow;
}

.menuEn{
	color:#A4E2DA;
	font-size:12px;
}

.logo{
	height: 65px;
	width: auto;
	margin-left: 20px;
	position: relative;
	top: 2px;

}

.TopContent{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 60px;
}

/* メインコンテンツ */
.MainTop{
  position: relative;
	top: 60px;
	z-index:-1;
}

.TitleWrap{
		width: 70%;
		min-width: 1000px;
		transform-box: fill-box;
		position: absolute;
		justify-content: start;
    max-width: 1315px;
	}

.TitleTop{
	display: block;
	width: 100%;
	text-align: left;
	font-weight: bold;
	font-size: 1.7rem;
}

.TitleText1{
	color: #195048;
	width: 50%;
	position: relative;
	display: block;
	margin-bottom: 50px;
	white-space: nowrap;
}

.TitleText2{
	color: #19283E;
	width: 50%;
	display: block;
	position: relative;
}

.red{
	color:#FF4F41;
	font-weight:bold;
}

.WrapSvgbgTop{
  position: relative;
  width: 100%;
  height: 100vh;
  margin:auto;
}

.svgbg {
  position: relative;
  top: 0;
  /* background-size: 100% auto; */
  width: 100%;

}

.minSvg{
	min-width:780px;
}

/*.minSvg5{
.minSvg6,
.minSvg7,
.minSvg8{
	width:70%;
	min-width:780px;
	position:absolute;
	max-width: 1315px; 

}*/

#Left,
#Up,
#Bottom{
	position: relative;
	max-width: 90%;
	height: auto;
	width: 90%;
}

#RightTop{
	width: 100%;
	position: relative;
	max-width: 100%;
	height: auto;

}

#RightBottom5,
#RightBottom6,
#RightBottom7,
#RightBottom8,
#Bottom5,
#Bottom6,
#Bottom7,
#Bottom8{
height: auto;
width: 35%;
max-width: 35%;
position: relative;
cursor:pointer;
transition:.4s;
}

#RightBottom5:hover,
#RightBottom6:hover,
#RightBottom7:hover,
#RightBottom8:hover,
#Bottom5:hover,
#Bottom6:hover,
#Bottom7:hover,
#Bottom8:hover{
	opacity:0.7;
	transition:.4s;
}

.moreSvg{
	width:100%;
	background-image:linear-gradient(180deg, #FFFBF3 0%, #FFF3D9 100%);
}

.moreSvgSmall5,
.moreSvgSmall6,
.moreSvgSmall7,
.moreSvgSmall8{
	display:none;
}

.minSvg9,
.minSvg14{
	width:70%;
	min-width:780px;
	position:absolute;
}

.minSvg10{
	width: 70%;
	max-width: 700px;
	min-width: 780px;
	padding: 150px 0;
	position: relative;
	z-index:1;
}

.minSvg13{
	max-width: 700px;
	width: 70%;
	min-width: 780px;
	position: absolute;
	top:150px;
}

.minSvg11{
	position: relative;
	top: 40px;
}

.minSvg12,
.minSvg13{
	max-width: 700px;
	width: 70%;
	min-width: 780px;
	top:150px;
}

.svgUp,
.svgBottom{
	display:none;
}

.contents05 .wrap_svgbg .svgbg .svgLeft,
.contents07 .wrap_svgbg .svgbg .svgLeft{
	width: 60%;
	max-width: 800px;
	/* margin: 0 auto; */
  position: relative;
  z-index: 1;
}

.contents06 .wrap_svgbg .svgbg .svgLeft,
.contents08 .wrap_svgbg .svgbg .svgLeft{
	width: 40%;
	max-width: 600px;
	display: block;
	padding: 0 25px;
	position: relative;
	align-items: start;
	justify-content: start;
	z-index: 1;
}

.contents05 .wrap_svgbg .svgbg .svgRight,
.contents07 .wrap_svgbg .svgbg .svgRight{
	width: 40%;
	max-width: 600px;
	display: block;
	padding: 0 25px;
	position: relative;
	align-items: start;
	justify-content: start;
	z-index: 1;
}

.contents06 .wrap_svgbg .svgbg .svgRight,
.contents08 .wrap_svgbg .svgbg .svgRight{
	width: 60%;
	max-width: 800px;
	/* margin: 0 auto; */
  position: relative;
  z-index: 1;
}

.contents01,
.contents02,
.contents03,
.contents04,
.contents05,
.contents06,
.contents07,
.contents08,
/* .contents09, */
.contents10,
.contents11,
.contents12,
.contents13,
.contents14,
.contents15,
.contents16,
.contents17,
.contents18,
.contents19{
  height:auto;
  margin:0 auto;
  text-align:center;
  position: relative;
  z-index: -1;
}

.contents02{
	padding-top: 20px;
}

.contents03,
.contents13,
.contents17,
.contents18{
	background:#F0F2FA;
	padding: 100px 0;

}

.contents05,
.contents06,
.contents07,
.contents08{
	padding:100px 0;
}

.contents11{
	height: 100vh;
	width: 100%;
}

.contents18{
	position: relative;
	margin-bottom: 60px;
	padding: 0 0 100px 0;
  z-index: 1;
}

.contents04{
	padding: 100px 0 0 0;
}

.contents09,
.contents14{
	display: flex;
	background: #76D4C7;
	height: 230px;
}

.contents09:hover,
.contents14:hover{
	opacity:0.8;
	cursor:pointer;
	transition:.3s;
	box-shadow: 0 15px 30px -5px rgba(0,0,0,.25), 0 0 5px rgba(0,0,0,.1);
	transform: translateY(-4px);
}

.wrapLeft{
	position: relative;
	width: 100%;
	height: auto;
}

.wrapLeft:before {
  content: "";
  display: block;
  padding-top: 75%;
}

.imgLeft{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 90%;
	margin: auto;
	max-width: 1230px;
}

.contents12{
	padding-top:150px;
}

.contents15,
.contents16{
	padding-top: 100px;
}

.contents19{
	width: 100%;
	height: 800px;
	display: block;
	background:#798AA3;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

}

.wrap_svgbg{
  position: relative;
  width: 100%;
  margin:auto;

}

.svgbgTop{
  position: relative;
  top: 0;
  /* background: url("svg/kumo.svg") no-repeat; */
  background-size: 100% auto;
  width: 100%;
  overflow:hidden;
}

.ImgTop{
	width: 50%;
	/* min-width: 1000px; */
	transform-box: fill-box;
	position: absolute;
	right: -30px;
}

.ImgBack,
.ImgTitle{
  width:100%;
  transform-box: fill-box;
}

.contents05 .wrap_svgbg .svgbg .ImgBack,
.contents06 .wrap_svgbg .svgbg .ImgBack,
.contents07 .wrap_svgbg .svgbg .ImgBack,
.contents08 .wrap_svgbg .svgbg .ImgBack{
	position:absolute;
	height:100%;
}


.contents10 .wrap_svgbg .svgbg .ImgBack{
	position: absolute;
	height: 100%;
}

.ItemTitle{
  height:300px;
}

.ItemText{
	font-size: 4vh;
	font-weight:bold;
}

/* ---アコーディオン--- */
.clearFix{
	width:100%;
	/* height:auto !important; */
	/* margin-top: 100px; */
	/* display:flex; */
}

.more{
	width:100%;
	color:#fff;
	text-align:left;
	font-size:16px;
	position: relative;
	top:0;
	width: 50%;
	height:65px;
	display:flex;
	background-image:url('../img/more.svg');
	background-repeat:no-repeat;
	background-size:100px;
	transition:all 1.2s linear;
	background-position: center;
	outline:none;
}

#inner5,
#inner6,
#inner7,
#inner8{
	overflow-y: hidden;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	width:100%;
	height:auto;
	display:block;
	padding:0;
	text-align:left;
	-webkit-user-select:text;
			-ms-user-select:text;
					-moz-user-select:text;
			 user-select:text;
}

/* ---ここまで--- */

.wrap_svgbg:before {
  content:"";
  display: block;
  /* padding-top: 41%;  */
  }

.wrap{
  width: 50%;
  display: block;
  margin: 0 auto;

}

.fee{
	width: 400px;
	height: 300px;
	margin: auto;
	background: #fff;
	display:block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	box-shadow: 0px 0px 8px 0px;
	z-index: 1;
}

.feebg1{
	width: 100%;
	height: 50%;
	position: relative;
	background:#FFFDF7;
	display: block;
}

.feebg2{
	width: 100%;
	height: 50%;
	position: relative;
	background: #32A091;
	display: block;
}

.feetitle{
	position: relative;
	top: 80px;
	font-size: 34px;
	font-weight: bold;
}

.feetext{
	position: relative;
	top: 100px;
	font-size: 24px;
	font-weight: bold;
}

#feecount{
	color: #777;
	font-size: 24px;
	width: 60%;
	height: 50px;
	padding: 0 15px;
	border: 3px solid #32A091;
	border-radius: 16px;
	-webkit-box-shadow: 0 0 0px 1000px white inset !important;
	background: #fff;
	text-align: center;
	position: relative;
	top: 70px;
	outline: none;
}


#feeSend{
	width: 60%;
	height: 45px;
	color: white;
	font-size: 20px;
	font-weight: bold;
	margin: 15px auto 20px;
	border-bottom: 2px solid #A4E2DA;
	border-radius: 40px;
	background-image: linear-gradient(179deg, #A4E2DA 0%, #26786D 100%);
	position: relative;
	top: 70px;
	cursor: pointer;
	transition: .2s;
	outline: none;

}

#feeSend:hover{
	border-radius:20px;
	transition:.2s;
	opacity:.8;
  box-shadow: inset 0 -2px #D8DDE4;
}

#feeSend:active{
  top: 71px;
  outline: none;
  box-shadow: none;
}

.feeWrap{
	display: block;
    /* width: 500px; */
    height: 300px;
    position: absolute;
    /* margin: auto; */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.feeIntroWrap,
.feeYearlyWrap{
	color:#fff;
	height: 50%;
	font-size: 28px;
}

.feeIntroWrap{
	padding-top: 150px;
}

.feeYearlyWrap{
	padding-top: 30px;
}

.feeIntro,
.feeYearly{
	margin: 10px;
}

.feeIntroEnd{
	margin: 10px;
	font-size:20px;
	top: 6px;
	position: relative;
}

/* 問合せ入力 */
#inquiryName,
#inquiryPhone,
#inquiryMail,
#inquiryText{
	padding:20px 10px 20px;
  width:100%;
  
}

#inquiryF{
	height:auto;
  width:100%;
  padding: 0 0 100px 0;
}

#inquiryText{
  height:300px !important;
}

.InputWrap{
	position:block;
  display:inline;
  margin:40px 0;
}

.InputText{
	position:relative;
  font-size:16px;
  font-weight:bold;
	justify-content:left;
	align-items:center;
	display:flex;
	margin:50px 0 0 0;
	width:100%;
}

#signSend,
#Clear{
  width: 100%;
  height: 100%;
  outline:none;
}


/* チェックスイッチ */
.cp_ipradio {
	width: 90%;
	margin:0 auto 4em auto;
  text-align: left;
  font-weight:bold;
}

.cp_ipradio input[type='radio'] {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.cp_ipradio label {
	position: relative;
	display: inline-block;
	margin-right: 30px;
	padding-right: 10px;
	padding-left: 35px;
	cursor: pointer;
}
.cp_ipradio label::before {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	display: block;
	width: 24px;
	height: 24px;
	content: ' ';
	border: 2px solid #da3c41;
	border-radius: 4px;
}
.cp_ipradio input[type='radio'] + label::before {
	border-radius: 18px;
}
.cp_ipradio input[type='radio']:checked + label {
	padding-left: 10px;
	color: #ffffff;
}
.cp_ipradio input[type='radio']:checked + label::before {
	top: 0;
	width: 100%;
	height: 100%;
	background: #da3c41;
}

.cp_ipradio label, .cp_ipradio label::before {
	-webkit-transition: 0.25s all ease;
	        transition: 0.25s all ease;
}

/* 学年選択 */
.Category,
.Organization{
  color:#777;
  height:35px;
  padding: 0 0 0 15px;
  width: 100%;
  font-size: 14px;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  background: #fff;
  outline: none;
}

#inquiryName,
#inquiryArea,
#inquiryPhone,
#inquiryMail,
#inquiryText{
	color:#777;
	width: 100%;
	height: 35px;
	margin:0;
	padding:0 0 0 15px;
	font-size:14px;
	border: 1px solid #ebebeb;
	border-radius: 4px;
	-webkit-box-shadow: 0 0 0px 1000px white inset !important;
	background:#fff;
	outline:none;
}


/* 送信ボタン */
.ButtonWrap{
  display:flex;
  margin: 100px 0;
}

.SendButton,
.ClearButton{
	position: relative;
	margin:15px auto 20px;
	width: 42%;
	height: 45px;
	font-size: 18px;
	color: white;
	cursor: pointer;
	transition:.2s;
	outline:none;
	border-radius: 5px;
}

.SendButton:hover,
.ClearButton:hover{
	border-radius:30px;
	transition:.2s;
	opacity:.8;
}

.SendButton:hover{
	box-shadow: inset 0 -2px #FFABCE;
}

.ClearButton:hover{
  box-shadow: inset 0 -2px #D8DDE4;
}

.SendButton:active,
.ClearButton:active{
  top: 1px;
  outline: none;
  box-shadow: none;
}

.SendButton{
	background-image:linear-gradient(45deg, #F55192 0%, #FFABCE 100%);
	border-bottom: 2px solid #FFABCE;
}

.ClearButton{
	background-image:linear-gradient(45deg, #4A586C 0%, #D8DDE4 100%);
	border-bottom: 2px solid #D8DDE4;
}



.fade{ 
    opacity:0;
}

  .fadeInUp{
		min-width: 600px;
    transition: all 1.0s ease-in;
    transform: translateY(-60px);
		opacity: 1 !important;
		
  }

	.fadeIn{
		transition: all 0.5s ease-in;
		transform: translateY(-40px);
		opacity: 1 !important;
	}
	
/* ---ハンバーガーメニュー--- */
.hm_wrap{
	display:none;
}

/* ---アコーディオン--- */

.acd-check{
	display: none;
}
.acd-label{
	width: 60%;
	min-width: 780px;
	background: #F0F2FA;
	margin: 0 auto;
	justify-content: center;
	display: flex;
	position: relative;
	left: 35px;
	z-index: 2;
}

.acd-label:after{
	height: 59px;
	content: url(../img/plus.svg);
	padding: 30px 20px;
	position: relative;
	right:66px;	
}

.acd-content{
	height:0;
	width: 60%;
	min-width: 780px;
	visibility: hidden;
	background: #F0F2FA;
	margin: 0 auto;
	display: flex;
	position: relative;
	left: 35px;
	justify-content: center;
	opacity: 0;
	z-index: 1;
	transition: .5s;
}

.acd-content:after{
	height: auto;
	content: url(../img/minus.svg);
	position: relative;
	z-index: 30;
	padding: 18px 20px;
	opacity: 0;
	right:66px;
}

.acd-check:checked + .acd-label:after{
	height:59px;
	/* content: '-'; */
	content: url(../img/minus.svg);
}

.acd-check:checked + .acd-label + .acd-content{
	height: auto;
	opacity: 1;
	visibility: visible;
	text-align: center;
	position: relative;
	z-index: 1;	
	transition: .7s;
}

.question{
	min-width:780px;
	position: relative;
	padding-top:15px;
}

.answer{
	min-width:780px;
	position: relative;
}

footer{
	position:relative;
}

.footerWrap{
	height: 100%;
	width: 70%;
	margin: 0 auto;
}

.footerLeft,
.footerRight{
	width: 50%;
	height: 80%;
	margin: 0;
	display: block;
}

.footerLeft{
	margin-right: 10px;
}

.footerRight{
	margin-left: 10px;
}

.footerMenu,
.footercompany{
	color: #fff;
	width: 100%;
	margin: 0 auto;
	border-bottom: 1px solid #fff;
	display:block;
	line-height: 35px;
	text-align:left;
}

.menuLink,
.company{
	color: #fff;
	line-height: 35px;
	text-align: left;
	display: block;
}

.map {
	height: auto;
	width:auto;
	position: relative;
	padding-bottom: 75%;
	margin:0;
}
   
.map iframe{
	position: absolute;
	top: 0;
	width: 100% !important;
	height: 100% !important;
	max-height: 300px;
	min-width: 300px;
	}
	
.footerBottom{
	font-size:12px;
	width: 715px;
	margin: 0 auto;
	border-top: 1px solid #fff;
	position:relative;
	bottom: 50px;
}

.copyRight{
	color:#fff;
	position: relative;
  line-height: 30px;

}

































/* モーダル */

#modaloutCase5,
#modaloutCase6,
#modaloutCase7,
#modaloutCase8{
	color: #fff;
	height:80%;
  width: 65%;
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
	transition: 1s;
  z-index: 20000;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  display:block;
  justify-content:unset;
  align-items:unset;
}

#modaloutCase5 p,
#modaloutCase6 p,
#modaloutCase7 p,
#modaloutCase8 p{
	line-height: 3;
	/* margin: 0; */
  background:#50a3a2;
  background: linear-gradient(top left, rgb(38,120,109),rgb(164,226,218));
  background: -webkit-linear-gradient(top left, rgb(38,120,109),rgb(164,226,218));
  background: -moz-linear-gradient(top left, rgb(38,120,109),rgb(164,226,218));
	/* background: -ms-linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%); */

}

#modaloutCase5.hidden5,
#modaloutCase6.hidden6,
#modaloutCase7.hidden7,
#modaloutCase8.hidden8{
	opacity:0;
	transition:.9s;
	z-index:-10;

	
}

#cover{
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top:0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index:10000;
  cursor:pointer;
}

#cover.hidden5,
#cover.hidden6,
#cover.hidden7,
#cover.hidden8{
	display:none;
	transition:.9s;
}

.modal{
	color:rgb(80,80,80);
	height: 100%;
	background:#fff ;
  text-align:left;
	padding:10px 5px 10px 7px;
	display:block;
	overflow-y: scroll;
  -webkit-overflow-scrolling:touch;
  -webkit-transform: translateZ(0px);

}
  
.modal-lower{
  display:block;
  font-size:14px;
  position: relative;
  top:0;
  width: 100%;
  padding:10px 0px 10px 10px;
  margin:10px 0 15px 0;
  height:auto;
  background: white;
  border-bottom: 1px solid #c4c4c4;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.modal-upper{
  font-size:14px;
  position: relative;
  top:0;
  width: 100%;
  padding:10px 0px 10px 10px;
  margin:10px 0 15px 0;
  height:auto;
  background: white;
  border-bottom: 1px solid #c4c4c4;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

#close5,
#close6,
#close7,
#close8{
	color:#fff;
	cursor: pointer;
	width: 30px;
	height:30px;
	background:rgba(0,0,0,0.2);
	text-align: center;
	line-height: 20px;
	margin:0 10px 0 0;
	position:absolute;
	right:0;
	top:10px;
	border-radius:180px;
	-webkit-appearance:button-bevel;
  border:none;	
  outline: none;
}

#close5:focus,
#close5:hover,
#close6:focus,
#close6:hover,
#close7:focus,
#close7:hover,
#close8:focus,
#close8:hover{
	background:rgba(0,0,0,0.5);
	transition:.3s;
}