@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
/* CSS Document */
* { margin: 0; padding: 0; }
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


body {
  background: url(../images/bg.png) repeat center center;
  position: relative;
  font-family: "游ゴシック Medium", "游ゴシック", "游ゴシック体", "Yu Gothic Medium", "YuGothic", "メイリオ", sans-serif;
  font-size: 16px ;
  font-weight: 500;
	line-height: 1.5em;
  color: #424242;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/*-----------------------------------------
  共通で使える
-----------------------------------------*/
section{text-align: left; padding:60px 0;}
.w1200 {  max-width: 1200px; margin: 0 auto; position: relative;}
.text {  text-align: left; }
@media screen and (max-width: 1199px){
.w1200 { width: 95%; margin: 0 auto;padding: 0;}
}
@media screen and (max-width: 768px) {
	section{padding:40px 0;}
}
.b {  font-weight: bold;}
.img_c { display: block; margin-left: auto; margin-right: auto; max-width: 100%; }
.img_l{display: block; float:left; margin-right: 20px;}
.img_r{display: block; float:right; margin-left: 20px;}
::selection
{    background: #fff7b8;}

/* for Firefox */
::-moz-selection
{    background: #fff7b8;}

/* レイアウト関連 */
.outer {
  box-sizing: border-box;
  width: 92%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}


input, button, select, textarea {
  border: none;
  outline: none;
  border-radius: 5px;
  border: #c4c3c3 1px solid;
  background-color: white;
  font-size: 1.5em;
  padding: 0.5em;
}
@media screen and (max-width: 768px) {
  input, button, select, textarea {

    max-width: 100% !important;
    padding: 0.5em;
  }
}

@media screen and (max-width: 768px) {
  textarea {
    width: 100% !important;
  }
}

input[type=submit], input[type=button] {
  font-family: "游ゴシック Medium", "游ゴシック", "游ゴシック体", "Yu Gothic Medium", "YuGothic", "メイリオ", sans-serif;
  cursor: pointer;
  border: 2px solid #4fcaba;
background: url(../images/form_arrow.png) right center no-repeat #4fcaba;
  color: #fff;
  display: block;
  font-size: 2.4em;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  max-width: 100% !important;
  padding: 0.2em 2.0em 0.2em 1.0em;
	margin:1.2em auto 1.5em;
	-webkit-transition: 0.3s cubic-bezier(0.18, 0.45, 0.25, 1);
    -o-transition: 0.3s cubic-bezier(0.18, 0.45, 0.25, 1);
    transition: 0.3s cubic-bezier(0.18, 0.45, 0.25, 1);
}
input[type=submit]:hover, input[type=button]:hover {
  border: 2px solid #4fcaba;
  background: url(../images/form_arrow_o.png) right center no-repeat #ffffff;
  color: #4fcaba;
  transition: all ease 0.3s;
	transform: scale(1.03);
}


@media screen and (max-width: 768px) {
  input[type=submit], input[type=button] {
    font-size: 1.18em;
    width: 70%;
	  background-size: 15px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
	  margin-right: 15%;
  margin-left: 15%;
  }
	input[type=submit]:hover, input[type=button]:hover {background-size: 15px;}
	
}


/* フッター部分 */
.totop {
  position: fixed;
  bottom: 3em;
  right: calc(4.375em + 1em);
  z-index: 9;
}
@media screen and (max-width: 768px) {
  .totop {
    right: calc(9.3vw + 1em);
	  bottom: 5em;
  }
}
.totop a {
  box-sizing: border-box;
  display: -ms-flexbox;
  /* prefix -> -webkit- */
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  /* no prefix */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #44c5aa;
  width: 4.375em;
  height: 4.375em;
  border-radius: 50%;
}
.totop a:after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  border-top: 1px solid #fcf7c6;
  border-right: 1px solid #fcf7c6;
  margin-top: 0.5em;
  transform: rotate(-45deg);
}
@media screen and (max-width: 768px) {
  .totop a {
    width: 9.3vw;
    height: 9.3vw;
  }
  .totop a:after {
    width: 0.5em;
    height: 0.5em;
    margin-top: 0.25em;
  }
}

footer.footer .copyBox {
  background-color: #fff;
  text-align: center;
  padding: 1em 0;
  font-size: 0.8em;
}
@media screen and (max-width: 768px) {
  footer.footer .copyBox {
    font-size: 0.6em;
  }
}

/* コンテンツ内 */
.mainVisual {
  background: url(../images/main.jpg) no-repeat center center/cover;
	height: 560px;
}
@media screen and (max-width: 768px) {
  .mainVisual {
    background: url(../images/main_sp.jpg) top center/100%; height: 75vw;
  }
}
.mainVisual .maininner {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 850px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 769px) {.only_sp {display:none;}}
@media screen and (max-width: 768px) {
	.only_pc {display:none;}
}
.mainVisual h1 {  display: inline-block;}
.mainVisual h1 img {  width: 100%; margin-bottom:1em;}

.mainform {max-width:1200px; margin:15px auto; text-align: center; }

@media screen and (max-width: 768px) {
.mainVisual h1 img {margin-bottom:0;width: 100%; margin-right: 0; margin-left: 0; }
.mainform {width:90%; margin:5px 5%; font-size: 0.8em; }
.form_input_input {margin-bottom: 10px;}
}

.formcatch{font-size: 2.0em; line-height: 1.6em; font-weight: bold; color:#4c413d; margin:50px auto 20px;}
.formmailflame {width:100%; display: flex; align-items: center; justify-content: center;}
.mainform label img {width:190px; padding:0 15px;}

@media screen and (max-width: 768px) {
	.formcatch{font-size: 1.4em;margin:20px auto 10px;}
	.formmailflame{flex-direction: column;}
	.mainform label img {width:50%; margin:0 25%!important;}
}

.formbtn {
width:80%; max-width:560px;
display: block;
text-align: center;
margin:20px auto 50px;
-webkit-transition: 0.3s cubic-bezier(0.18, 0.45, 0.25, 1);
-o-transition: 0.3s cubic-bezier(0.18, 0.45, 0.25, 1);
transition: 0.3s cubic-bezier(0.18, 0.45, 0.25, 1);
}
.formbtn:hover {
  transition: all ease 0.3s;
	transform: scale(1.03);
}


@media screen and (max-width: 768px) {
.formbtn {
width: 80%;
margin:10px auto 0;
  }
	.formbtn img {width:100%;}
.formbtn:hover {background-size: 15px;}
	
}
/*-----------------------------------------
  nayami
-----------------------------------------*/
.nayami {width:100%; background: url("../images/nayami_bg.png") no-repeat center center #e9dbd1; background-size: contain;}
.nayami h2 { width:50%; text-align: center;background-color: #fff; font-size: 2.0em; line-height: 1.8em; font-weight: bold;padding: 30px 20px; margin:0 auto; position: relative;}
.nayami h2 .serif { width:90%;background: url(../images/nayami_mark01.png) no-repeat left top, url(../images/nayami_mark02.png) no-repeat right bottom; background-size: 20px auto; margin:20px 5%;}
@media screen and (max-width: 1100px){
	.nayami h2 { width:80%;}
	.nayami h2 .serif { width:90%; margin:20px auto;}
}
.nayami h2:before {	content:"";width: 65px;height: 54px;background: url(../images/nayami_icon.png) no-repeat;background-size:cover;position: absolute;right:calc(50% - 32px);top:-25px;transition:transform 0.15s linear;}

.nayami-list {width:70%; margin: 50px 10% 30px 20%; }
.nayami-list li {width:100%;background: url(../images/nayami_check.png) no-repeat left top; background-size: 21px auto; padding-left:30px; font-size: 1.4em; margin:20px 0;}

.nayami_copy {width:100%; text-align: center;font-size: 2.0em; line-height: 1.8em; font-weight: bold;margin:50px 0 30px;}
.nayami_serif{width:80%;background: url(../images/nayami_mark03.png) no-repeat left top, url(../images/nayami_mark04.png) no-repeat right bottom; background-size: 20px auto; margin:40px auto;}
.wavy {background: url("../images/text_wavybg.png") repeat-x; padding-bottom: 80px;}
@media screen and (max-width: 768px){
.nayami {background-color:#e9dbd1; background-image: none;}
.nayami h2 {width:90%; font-size: 1.1em; line-height: 1.5em; padding: 20px 10px;}
.nayami h2 .serif { width:100%; background-size: 10px auto; margin:10px 0 20px;}
.nayami h2:before {	content:"";width: 33px;height: 27px;background: url(../images/nayami_icon.png) no-repeat;background-size:cover;position: absolute;right:calc(50% - 16px);top:-10px;transition:transform 0.15s linear;}
.nayami-list {width:100%; margin: 40px 0 20px 0; }
.nayami-list li {width:96%; background: url(../images/nayami_check.png) no-repeat left 3px; background-size: 15px auto; padding-left:20px; font-size: 1.0em; margin:15px 2%;}
.nayami_copy {font-size: 1.1em; line-height: 1.5em; margin:40px 0 20px;}
.nayami_serif{width:100%; background-size: 15px auto; margin:20px auto;}
.wavy {background: url("../images/text_wavybg_sp.png") repeat-x; padding-bottom: 40px;}
}

/*-----------------------------------------
  what
-----------------------------------------*/
.what {width:100%; background-color:#fbf6f1; }
.what h2 { width:50%; max-width: 350px; text-align: center;background-color: #e9dbd1; font-size: 2.0em; line-height: 1.8em; font-weight: bold;padding: 50px 0 30px; margin:0 auto; position: relative;}
@media screen and (max-width: 1100px){
	.what h2 { width:70%;}
}
.what h2:before {	content:"";width: 65px;height: 54px;background: url(../images/what_icon.png) no-repeat;background-size:cover;position: absolute;right:calc(50% - 32px);top:-25px;transition:transform 0.15s linear;}

.what_copy {width:100%; text-align: center; margin:30px 0;font-size: 1.2em; line-height: 1.7em;}
.wavy2 {background: url("../images/text_wavybg2.png") repeat-x; padding-bottom: 40px;}
.green {color:#4fcaba;}

.whatwrap {width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 60px 0;}
.what_text{width:45%; margin:10px 2.5%;}
.what_text_title {width: 100%;border-bottom:solid 1px #4fcaba; padding: 20px 0 10px 45px;background: url(../images/what_title_icon.png) no-repeat left top; background-size: 35px auto; font-size: 1.5em; font-weight: bold;margin-bottom: 30px;}
.what_img {width:50%; text-align: center;margin:10px 0;}

@media screen and (max-width: 768px){
.what h2 {width:70%; font-size: 1.1em; line-height: 1.5em; padding: 20px 10px 10px;}
.what h2:before {	content:"";width: 33px;height: 27px;background: url(../images/what_icon.png) no-repeat;background-size:cover;position: absolute;right:calc(50% - 16px);top:-17px;transition:transform 0.15s linear;}
.what_copy {font-size: 1.1em; line-height: 1.5em; margin:20px 0;}
.wavy2 {background: url("../images/text_wavybg_sp.png") repeat-x; padding-bottom: 40px;}
.what_text{width:100%; margin:0 0;}	
.what_text_title { padding: 20px 0 10px 45px; background-size: 35px auto; font-size: 1.2em; margin-bottom: 30px;}
.what_img img {width:80%;}
.order1 {order: 1;}
.order2 {order: 2;}
}
/*-----------------------------------------
  have
-----------------------------------------*/
.have {width:100%; background: url("../images/have_bg.jpg") no-repeat center center #e9dbd1; background-size: cover; }
.have h2 { width:70%; max-width: 550px; text-align: center;background-color: #fff; font-size: 2.0em; line-height: 1.8em; font-weight: bold;padding: 50px 0 30px; margin:0 auto; position: relative;}
@media screen and (max-width: 1100px){
	.have h2 { width:90%;}
}
.have h2:before {	content:"";width: 68px;height: 65px;background: url(../images/have_icon.png) no-repeat;background-size:cover;position: absolute;right:calc(50% - 34px);top:-25px;transition:transform 0.15s linear;}
.have_copy {width:100%; text-align: center; margin:30px 0;font-size: 1.1em; line-height: 1.7em;}

@media screen and (max-width: 768px){
.have {background: url("../images/have_bg_sp.jpg") no-repeat center center #e9dbd1; }
.have h2 {width:90%; font-size: 1.1em; line-height: 1.5em; padding: 20px 10px 10px;}
.have h2:before {content:"";width: 34px;height: 32px;background: url(../images/have_icon.png) no-repeat;background-size:cover;position: absolute;right:calc(50% - 17px);top:-18px;transition:transform 0.15s linear;}
.have_copy {font-size: 1.0em; line-height: 1.5em; margin:20px 0;}
}
/*-----------------------------------------
  voice
-----------------------------------------*/
.voice {width:100%; background: #e4f7f3; }
.voice h2 { width:30%; max-width: 200px; text-align: center;background-color: #fff; font-size: 2.0em; line-height: 1.8em; font-weight: bold;padding: 30px 0 10px; margin:0 auto; position: relative;}
@media screen and (max-width: 1100px){
.voice h2 { width:60%;}
}
.voice h2:before {	content:"";width: 63px;height: 57px;background: url(../images/voice_icon.png) no-repeat;background-size:cover;position: absolute;right:calc(50% - 32px);top:-30px;transition:transform 0.15s linear;}
.voice_wrap {width:80%; max-width:1060px;margin:20px auto; padding: 30px 40px 40px; background-color: #fff;}
.voice_title {width:80%; text-align: center; font-size: 1.6em; line-height: 1.8em; color: #54bab9;font-family: 'Noto Serif JP', serif; font-weight: 700; margin:30px auto;background: url(../images/nayami_mark01.png) no-repeat left top, url(../images/nayami_mark02.png) no-repeat right bottom; background-size: 15px auto; padding:10px 0 20px;}
.voice_title2 {width:100%; text-align: center; font-size: 1.6em; line-height: 1.8em; color: #54bab9;font-family: 'Noto Serif JP', serif; font-weight: 700; margin:30px auto;background: url(../images/nayami_mark01.png) no-repeat left top, url(../images/nayami_mark02.png) no-repeat right bottom; background-size: 15px auto; padding:10px 0 20px;}
.voice_wrap p {margin-bottom: 20px;}
@media screen and (max-width: 1100px){
.voice_title {width:100%; font-size: 1.6em; line-height: 1.8em; margin:30px auto; padding:10px 0 20px;}
.voice_title2 {width:100%; font-size: 1.6em; line-height: 1.8em; margin:30px auto; padding:10px 0 20px;}
}
@media screen and (min-width: 1101px){
	.only_1101over {display:none;}
}
@media screen and (max-width: 768px){
.voice h2 {width:70%; font-size: 1.1em; line-height: 1.5em; padding: 20px 10px 10px;}
.voice h2:before {	content:"";width: 31px;height: 28px;background: url(../images/voice_icon.png) no-repeat;background-size:cover;position: absolute;right:calc(50% - 16px);top:-10px;transition:transform 0.15s linear;}
.voice_wrap {width:100%; margin:20px auto; padding: 10px 20px 20px;}
.voice_title,.voice_title2 {width:100%; font-size: 1.2em; line-height: 1.5em; margin:10px auto 20px; background-size: 7px auto 10px ; padding:10px 0;}
}
/*-----------------------------------------
  study
-----------------------------------------*/
.study {width:100%; background: #b1a69f; }
.study_wrap {width:100%; background-color: #fff; padding: 40px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.study h2 { width:100%; text-align: center;font-size: 2.0em; line-height: 1.8em; font-weight: bold; padding: 10px 0 40px; background: url(../images/study_titlebg.jpg) no-repeat center bottom; color: #54bab9;}
.study_box {width:47%; border: solid 1px #54bab9;padding: 40px 0; text-align: center; margin:20px auto;}
.study_title {font-size: 1.5em; font-weight: bold; margin-bottom: 20px;}
.yb {background: linear-gradient(transparent 50%, rgba(255, 240, 190, 0.9) 50%);}

@media screen and (max-width: 768px){
.study_wrap { padding: 30px 20px; }
.study h2 { font-size: 1.3em; line-height: 1.5em;}
.study_box {width:100%; padding: 20px 10px; margin-bottom: 10px;}
.study_title {font-size: 1.1em; }
}

/*-----------------------------------------
  teacher
-----------------------------------------*/
.teacher {width:100%; background: #e9dbd1; }
.teacher h2 { width:40%; max-width: 230px; text-align: center;background-color: #fff; font-size: 2.0em; line-height: 1.8em; font-weight: bold;padding: 30px 0 10px; margin:0 auto 30px; position: relative;}
@media screen and (max-width: 1100px){
.teacher h2 { width:60%;}
}
.teacher h2:before {content:"";width: 68px;height: 65px;background: url(../images/have_icon.png) no-repeat;background-size:cover;position: absolute;right:calc(50% - 34px);top:-25px;transition:transform 0.15s linear;}
.teacher_wrap {width:100%; margin:20px auto; padding: 30px 40px 30px 50px; background-color: #fff; display: flex; justify-content: space-between; }
.teacher_txt{width:55%;}
.teacher_img {width:40%; text-align: center; padding-top:20px;}
.teacher_img img {width:100%;max-width: 460px;}
.teacher_name {width:100%; font-size: 1.6em; font-family: 'Noto Serif JP', serif; font-weight: 700; margin:10px auto;border-bottom: solid 2px #e9dbd1; padding:10px 0 30px;}
.teacher_name span {font-size: 0.8em;}
.teacher_occu {width:100%; text-align: right; font-weight: bold; font-size: 0.9em;}
.teacher_catch {font-size: 1.5em; line-height: 1.7em; color:#54bab9; font-weight: bold;}
.teacher_wrap p {margin: 20px 0;}
@media screen and (max-width: 768px){
.teacher h2 {width:70%; font-size: 1.1em; line-height: 1.5em; padding: 20px 10px 10px;}
.teacher h2:before {	content:"";width: 34px;height: 32px;background: url(../images/have_icon.png) no-repeat;background-size:cover;position: absolute;right:calc(50% - 17px);top:-10px;transition:transform 0.15s linear;}
.teacher_wrap { padding: 20px; flex-direction: column;}
.teacher_txt{width:100%;}
.teacher_img {width:100%; display: flex; justify-content: center; padding-top:5px;}
.teacher_img img {width:100%;}
.teacher_name {width:100%; font-size: 1.3em; margin:10px auto;border-bottom: solid 2px #e9dbd1; padding:10px 0 10px;}
.teacher_name span {font-size: 0.7em;}
.teacher_occu {font-size: 0.8em; margin-bottom: 20px;}
.teacher_catch {font-size: 1.3em; line-height: 1.5em; }
.teacher_wrap p {margin: 20px 0;}
}

/*-----------------------------------------
  message
-----------------------------------------*/
.message {width:100%; background: url("../images/message_bg.png") no-repeat right bottom #def0ec; background-size: 30%; }
.message h2 { width:40%; max-width: 220px; text-align: center;background-color: #fff; font-size: 2.0em; line-height: 1.8em; font-weight: bold;padding: 30px 0 10px; margin:0 auto 30px; position: relative;}
@media screen and (max-width: 1100px){
.message h2 { width:60%;}
}
.message h2:before {content:"";width: 63px;height: 60px;background: url(../images/message_icon.png) no-repeat;background-size:cover;position: absolute;right:calc(50% - 32px);top:-25px;transition:transform 0.15s linear;}
.message_wrap {width:100%; margin:20px auto; text-align: center;font-size: 1.1em; line-height: 1.8em;}

@media screen and (max-width: 768px){
.message {width:100%; background-color: #def0ec; background-image: none; }
.message h2 {width:70%; font-size: 1.1em; line-height: 1.5em; padding: 20px 10px 10px;}
.message h2:before {	content:"";width: 32px;height: 30px;background: url(../images/message_icon.png) no-repeat;background-size:cover;position: absolute;right:calc(50% - 16px);top:-10px;transition:transform 0.15s linear;}
.message_wrap { font-size: 1.0em; padding-bottom: 0; margin-bottom: -40px;}
	.message_wrap img {width:50%;}
}


/* フェードイン用のCSS */
.animation {
   opacity: 0;
   transform: translateY(20px);
   transition: all 1.3s 0s ease-out;
 }