@charset "UTF-8";
/* CSS Document */

html,body {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
	margin:0;
	padding:0;
	height: 100%;
   /*フォント*/
	font-family: 'ヒラギノ角ゴシック','Hiragino Sans','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN','ＭＳ Ｐゴシック','MS PGothic','Osaka','Arial',sans-serif;
	font-size: 18px;
	line-height:1.8;
	color: #2b2b2b;
	background: url("images/back.jpg")fixed;
}
a:link {
	color: #2b2b2b;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #2b2b2b;
}
a:hover {
	text-decoration: none;
	color: #175497;
}
a:active {
	text-decoration: none;
	color: #2b2b2b;
}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	html,body {font-size: 16px;}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	html,body {font-size: 16px;}
}



/*---------------------------------------------------------------------------
レイアウト
---------------------------------------------------------------------------*/
#wrap {
	width:100%;
	margin:0 auto;
	padding:0;
	box-sizing:border-box;
}

img {
	max-width: 100%;
	width: auto;
	height: auto;
}

img[src$=".svg"] {
    width: 100%;
}

.clear {clear: both;}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	#wrap {
		width:100%;
		margin:0 auto;
		padding:0;
		box-sizing:border-box;
		overflow:hidden;
	}
}

@media screen and (max-width:736px) {/*スマートフォン*/
	#wrap {
		width:100%;
		margin:0 auto;
		padding:0;
		box-sizing:border-box;
		overflow:hidden;
	}
}

/*-------------------------*/

header,main,footer,div {
	display:block;
	box-sizing:border-box;
}

p,h1,h2,h3,h4,h5,h6 {
	margin:0;
	padding:0;
}

/*-------------------------*/

/*---------------------------------------------------------------------------
header
---------------------------------------------------------------------------*/
header {
	margin: 0 0 40px;
	padding: 0;
	background: #fff;
	position: relative;
	z-index: 9999;
}

/*タイトル部分*/
#h_h1 {
	padding: 16px 16px 8px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	line-height: 1;
}
#h_h1 h1 {width: 40%;}

#h_contact {
	width: 30%;
	margin: 0 0 0 auto;
	line-height: 1;
}
/*-----*/


#h_read {
	width: 100%;
	padding: 0 16px 8px;
	box-sizing: border-box;
}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	#h_h1 h1 {width: 50%;}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	header {
		margin: 0;
		position: relative;
		padding-top: 16%;
		z-index: 9999;
	}
	/*タイトル部分*/
	#h_h1 {
		padding: 0;
		justify-content: space-between;
		align-items: flex-start;
		position: fixed;
		top: 0;
		left: 0;
	}
	#h_h1 h1 {
		width: 100%;
		padding: 8px 16px 0;
		background: #fff;
	}
	#h_contact {display: none;}
	
	#h_read {padding: 0 8px;}
	}

/*-------------------------*/



/*---------------------------------------------------------------------------
main
---------------------------------------------------------------------------*/
main {}

/*幅・共通*/
.block {
	width: 80%;
	margin: 0 10%;
}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	.block {
		width: 90%;
		margin: 0 5%;
	}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	.block {
		width: 90%;
		margin: 0 5%;
	}
}
/*-------------------------*/



/*---------------------------------------------------------------------------
footer
---------------------------------------------------------------------------*/
footer {
	padding: 16px 0;
	box-sizing: border-box;
}

.copy {
	font-size:.75rem;
	text-align:center;
	}

#f_flex {
	padding: 0 4%;
	box-sizing: border-box;
	display: flex;
	font-size: .75rem;
	line-height: 1.25;
}

#f_flex h3 {
	width: 24%;
	border-right: solid 2px #fff;
	margin-right: 32px;
	padding-right: 32px;
}

#f_flex div:nth-child(2) {}

.f_tel {
	width: 72%;
	margin-top: 8px;
}

#map {
	width: 100%;
	padding: 16px 4% 0;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	line-height: 1;
}
#map div {
	width: 24%;
	padding: 0;
	margin-bottom: 16px;
}
#map h4 {
	padding: 8px;
	box-sizing: border-box;
	background: #0068B7;
	color: #fff;
}
#map::after {
	display: block;
	width: 24%;
	content: "";
}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	#f_flex {
		width: 90%;
		margin: 0 auto;
		padding: 0;
	}
	#f_flex h3 {
		width: 48%;
		margin-right: 16px;
		padding-right: 16px;
	}
	
	#map {
		width: 90%;
		margin: 0 auto;
		padding: 16px 0;
		justify-content: space-between;
	}
	#map div {
		width: 24%;
		padding: 0 0 16px;
	}
	#map h4 {
		padding: 4px 8px;
		font-size: 1rem;
	}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	#f_flex {
		width: 90%;
		margin: 0 auto;
		padding: 0;
		display: block;
	}
	#f_flex h3 {
		width: 72%;
		margin-right: 0;
		padding-right: 0;
		border-right: none;
	}
	#f_flex div:nth-child(2) {
		width: 100%;
		margin: 8px 0 0;
	}
	#f_flex div:nth-child(2) br {display: none;}
	
	.f_tel {width: 100%;}
	
	#map {
		width: 90%;
		margin: 0 auto;
		padding: 16px 0 8px;
		justify-content: space-between;
	}
	#map div {
		width: 32%;
		margin-bottom: 4px;
	}
	#map::after {
		content: "";
		width: 32%;
		display: block;
	}
	#map h4 {
		padding: 4px 8px;
		font-size: .8rem;
	}
}
/*-------------------------*/


/*---------------------------------------------------------------------------
 top
---------------------------------------------------------------------------*/
#first {
	padding: 40px 40px 16px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 40px 40px 0 0;
	position: relative;
	color: #595857;
	font-weight: bold;
}

#first_image {
	width: 48%;
	position: absolute;
	top: -80px;
	right: -12.5%;
	overflow: hidden;
}

#first_title {
	font-size: 2rem;
	line-height: 1;
	position: relative;
}
#first_title img {width: 80%;}

#f_group {
	margin: 8px 0 0;
	font-size: 1.25rem;
}
.f_g_kokusan {
	padding: 4px 8px;
	box-sizing: border-box;
	background: #F39A32;
	color: #fff;
	margin-right: 8px;
}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	#first_image {
		width: 40%;
		top: -40px;
		right: -7.5%;
	}
	#first_title {font-size: 1.8rem;}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	#first {
		margin-top: 16px;
		padding: 16px 16px 8px;
		box-sizing: border-box;
		background: #fff;
		border-radius: 16px 16px 0 0;
	}
	#first_image {
		width: 56%;
		top: -48px;
		right: -7.5%;
	}
	#first_title img {width: 72%;}
	#first_title {font-size: 1.25rem;}
	#f_group {font-size: 1rem;}
	.f_g_kokusan {font-size: 80%;}
}

#second {
	padding: 0 40px 40px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 0 0 40px 40px;
}

#second h3 {
	margin: 0 0 8px;
	padding: 4px 8px;
	box-sizing: border-box;
	background: #EA5514;
	color: #fff;
	line-height: 1.25;
}

#second hr {
	border: none;
	margin: 16px 0;
}
.second_float_img {
	float: left;
	margin: 0 16px 0 -40px;
}

ul.shounin {
	margin: 8px 0;
	padding: 8px 16px;
	box-sizing: border-box;
	list-style-type: none;
	background: #FFFBCB;
	color: #595857;
	font-size: 1.25rem;
	font-weight: bold;
}
ul.shounin span {color: #EA5514;}

.shidou_kakomi {
	margin: 8px 0 0;
	padding: 8px 16px;
	box-sizing: border-box;
	border: dotted 2px #EA5514;
	color: #EA5514;
	border-radius: 8px;
	font-weight: bold;
	line-height: 1.4;
}

@media screen and (max-width:736px) {/*スマートフォン*/
	#second {
		padding: 0 16px 16px;
		border-radius: 0 0 16px 16px;
	}
	.second_float_img {margin: 0 16px 0 0;}
	#second h3 {font-size: 1rem;}
	
	ul.shounin {font-size: 1rem;}
}

/*-------------------------*/


/*---------------------------------------------------------------------------
seedで学ぶ算数と国語
---------------------------------------------------------------------------*/
#kokugo,
#sansu {
	padding: 40px 40px 24px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 40px;
	color: #595857;
	display: flex;
	justify-content: space-between;
	margin-bottom: 16px;
	font-weight: bold;
}

#kokugo h3,
#sansu h3 {
	padding: 4px 8px;
	box-sizing: border-box;
	color: #fff;
	line-height: 1.25;
	margin-bottom: 8px;
}

#kokugo hr,
#sansu hr {
	border: none;
	margin: 16px 0;
}

#kokugo ol,
#sansu ol {
	margin: 0;
	padding: 0;
	list-style-type: none;
	counter-reset: number;
}

#kokugo ol li,
#sansu ol li {
	position: relative;
	padding-left: 1.5em;
	line-height: 1.4;
	margin-bottom: 8px;
}

#kokugo ol li::before,
#sansu ol li::before {
  counter-increment: number;
  content: counter(number);
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 80%;
  text-align: center;
}

.manabu_title {width: 26%;}
.manabu_title img {width: 100%;}
.manabu_text {width: 72%;}

.manabu_title {margin-top: -16px;}

@media screen and (max-width:736px) {/*スマートフォン*/
	#kokugo,
	#sansu {
		padding: 16px 16px 8px;
		border-radius: 16px;
		display: block;
	}
	#kokugo h3,
	#sansu h3 {font-size: 1rem;}
	
	.manabu_title,
	.manabu_text {width: 100%;}
	
	.manabu_title {margin-top: 0;}
}

/*国語*/
#kokugo {
	flex-wrap: wrap;
}
#kokugo h3 {background: #A72A58;}

#kokugo ul {
	margin: 0;
	padding: 0 0 0 1.5em;
}

#kokugo ol {color: #DF3468;}
#kokugo ol li::before {border: 1px solid #DF3468;}

#kanken {
	margin: 16px 0;
	padding: 16px;
	box-sizing: border-box;
	background: #FFFBCB;
}
#kanken h3 {
	padding: 4px 8px;
	box-sizing: border-box;
	background: #fff;
	color: #A72A58;
	border: solid 1px #A72A58;
	border-radius: 4px;
}
#kanken h4 {
	color: #DF3468;
	font-size: 1rem;
}

.kokugo_image {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}
.kokugo_image:nth-child(1) {width: 60%;}
.kokugo_image:nth-child(2) {width: 40%;}

@media screen and (max-width:736px) {/*スマートフォン*/
	.kokugo_image {display: block;}
	.kokugo_image:nth-child(1) {width: 100%;}
	.kokugo_image:nth-child(2) {width: 80%;}
}


/*算数*/
#sansu {
}
#sansu h3 {background: #00B9EF;}

#sansu ol {color: #036EB8;}
#sansu ol li::before {border: 1px solid #036EB8;}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
}

/*授業料*/
#price {
	padding: 24px 40px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 40px;
	color: #595857;
	font-weight: bold;
	margin-bottom: 16px;
}

#price div.pr_flex:nth-child(1) {margin-bottom: 16px;}

#price h3 {
	display: block;
	width: 16%;
	margin-right: 16px;
	padding: 4px 8px;
	box-sizing: border-box;
	background: #A72A58;
	color: #fff;
	text-align: center;
	line-height: 1.25;
}

#price ul,
#price ol {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 1.16rem;
}

#price ul li {margin-right: 16px;}
#price ul li::before {content: "●";}

#price ol {
	counter-reset: number;
	margin-top: 8px;
}

#price ol li {
	position: relative;
	padding-left: 1.25em;
	line-height: 1;
	margin-right: 1em;
	margin-bottom: 8px;
}
#price ol li:last-child {margin-right: 0;}

#price ol li::before {
  counter-increment: number;
  content: counter(number);
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #595857;
  border-radius: 50%;
  font-size: 80%;
	line-height: 1.25;
  text-align: center;
}

@media screen and (max-width:736px) {/*スマートフォン*/
	#price {
		padding: 16px;
		border-radius: 16px;
	}
	#price h3 {
		width: 100%;
		font-size: 1rem;
		margin-bottom: 8px;
	}
}

.pr_flex,
.p_menu,
.pr_flex ul,
.pr_flex ol {display: flex;}

.p_menu {
	width: 80%;
	align-items: center;
	flex-wrap: wrap;
	line-height: 1.4;
}

@media screen and (max-width:736px) {/*スマートフォン*/
	.pr_flex,
	.p_menu,
	.pr_flex ul,
	.pr_flex ol {display: block;}
}

.pr_small {font-size: 80%;}
.pr_large {font-size: 120%;}

/*-------------------------*/


/*---------------------------------------------------------------------------
よくある質問
---------------------------------------------------------------------------*/
#faq {
	padding: 24px 40px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 40px;
	color: #595857;
	line-height: 1.4;
}
#faq h3 {
	margin-bottom: 16px;
	text-align: center;
	color: #DE551A;
}
#faq hr {
	border: none;
	margin: 16px 0;
}

#faq *, #faq *:after, #faq *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
#faq .cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 0 1em 0;
}
#faq .cp_actab input {
	position: absolute;
	opacity: 0;
}
/* 質問 */
#faq .cp_actab label {
	font-weight: bold;
	position: relative;
	display: block;
	margin: 0 0 0 0;
	padding: 1em 3em 1em 2.5em;
	line-height: 1.6em;
	cursor: pointer;
	text-indent: 1em;
	border-radius: 0.5em;
	background: #FFFBCB;
}
#faq .cp_actab label::before {
	margin-right: 8px;
	padding: 6px 8px;
	font-size: 1.5em;
	margin-left: -2em;
	content: 'Q';
	background: #DE551A;
	color: #fff;
	border-radius: 50%;
}
#faq .cp_actab label:hover {
	transition: all 0.3s;
	color: #DE551A;
}
/* --質問の＋アイコン */
#faq .cp_actab label::after {
	font-size: 1.7em;
	font-weight: bold;
	line-height: 2em;
	position: absolute;
	top: 0;
	right: 0;
	background: url("images/qa_qrrow.svg") no-repeat center;
	background-size: auto 50%;
	content: '';
	display: inline-block;
	width: 2em;
	height: 2em;
	margin-top: .15em;
	-webkit-transition: transform 0.4s;
	        transition: transform 0.4s;
	opacity: .5;
}
/* 答え */
#faq .cp_actab .cp_actab-content {
	position: relative;
	overflow: hidden;
	max-height: 0;
	padding: 0 0 0 2.5em;
	-webkit-transition: max-height 0.2s;
	        transition: max-height 0.2s;
	border-radius: 0 0 0.5em 0.5em;
}
#faq .cp_actab .cp_actab-content::before {
	font-size: 1.5em;
	position: absolute;
	margin: 0.4em 0 0 -1em;
	padding: 0;
	content: 'A';
	color: #DE551A;
}
#faq .cp_actab .cp_actab-content p {
	margin: 1em 1em 1em 0;
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
#faq .cp_actab input:checked ~ .cp_actab-content {
	max-height: 40em;
	border: 10px solid #FFFBCB;
}
/* 質問をクリックした時のアイコンの動き */
#faq .cp_actab input:checked ~ label {
	color: #DE551A;
	border-radius: 0.5em 0.5em 0 0;
}
/* 質問をクリックした時の+の動き */
#faq .cp_actab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateZ(90deg);
	transform: rotateZ(90deg);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
}
@media screen and (max-width:736px) {/*スマートフォン*/
	#faq {
		padding: 16px;
		border-radius: 16px;
		font-size: 14px;
	}
}

.q_small {
	display: block;
	font-size: .8rem;
	line-height: 1.25;
	text-indent: 0;
}

/*-------------------------*/


/*---------------------------------------------------------------------------
入会までの流れ
---------------------------------------------------------------------------*/
#chart {
	margin: 16px auto 0;
	padding: 24px 40px;
	box-sizing: border-box;
	background: #fff;
	text-align: center;
	border-radius: 40px;
}
#chart h3 {
	text-align: center;
	color: #DE551A;
}

@media screen and (max-width:736px) {/*スマートフォン*/
	#chart {
		padding: 16px;
		border-radius: 16px;
	}
}

/*---------------------------------------------------------------------------
特典・お問い合わせ
---------------------------------------------------------------------------*/
.tokuten {
	margin: 40px auto 0;
}

.subscription {
	width: 720px;
	margin: 0 auto 40px;
	filter: drop-shadow(2px 2px 4px rgba(0,0,0,.3));
}

@media screen and (max-width:736px) {/*スマートフォン*/
	.subscription {
		width: 90%;
		margin: 16px auto;
	}
}

/*アニメーション*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
	animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

.ace_link {
	width: 100%;
	text-align: center;
}

/*---------------------------------------------------------------------------*/