@charset "utf-8";

/* ===================================================================== */
/* Utility * /
/* ===================================================================== */
.fs-60 {font-size: 60%;}
.fs-65 {font-size: 65%;}
.fs-70 {font-size: 70%;}
.fs-75 {font-size: 75%;}
.fs-80 {font-size: 80%;}
.fs-85 {font-size: 85%;}
.fs-90 {font-size: 90%;}
.fs-95 {font-size: 95%;}
.fs-105 {font-size: 105%;}
.fs-110 {font-size: 110%;}
.fs-115 {font-size: 115%;}
.fs-120 {font-size: 120%;}
.fs-130 {font-size: 130%;}
.fs-140 {font-size: 140%;}
.fs-150 {font-size: 150%;}
.fs-160 {font-size: 160%;}
.fs-170 {font-size: 170%;}
.fs-180 {font-size: 180%;}
.fs-190 {font-size: 190%;}
.fs-200 {font-size: 200%;}

.mgB-08 {margin-bottom: .8rem;}
.mgB-16 {margin-bottom: 1.6rem;}
.mgB-24 {margin-bottom: 2.4rem;}
.mgB-32 {margin-bottom: 3.2rem;}
.mgB-40 {margin-bottom: 4.0rem;}
.mgB-48 {margin-bottom: 4.8rem;}

.font-B {font-weight: bold;}

.text-L {text-align: left !important;}
.text-C {text-align: center !important;}
.text-R {text-align: right !important;}

.float-L {float: left;}
.float-R {float: right;}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.c-01 {color: #66b52c;}
.bg-01 {background-color: #66b52c;}
.bg-GY {background-color: #f2f2f2;}

.empha {
  color: #fff150;
  font-size: 1.2em;
}

.marker {
  background: linear-gradient(transparent 70%, #fff150 30%);
}

.mincho {
  font-family: '游明朝', 'Yu Mincho', 'ヒラギノ明朝 ProN W3',
  'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
}

.wf-sawarabimincho {font-family: "Sawarabi Mincho"; }
.m-plus {font-family: 'M PLUS 1p', sans-serif;}
.o-sans {font-family: 'Open Sans', sans-serif;}
.noto-sans {font-family: 'Noto Sans JP', sans-serif;}
.ms-delafield {font-family: 'Mrs Saint Delafield', cursive;}
.tangerine {font-family: 'Tangerine', cursive;}
.josefin-sans {font-family: 'Josefin Sans', sans-serif;}
.oswald {font-family: 'Oswald', sans-serif;}
.cardo {font-family: 'Cardo', sans-serif;}

/* -----------------------------------------------------------
 <br> Responsive
----------------------------------------------------------- */
@media screen and (min-width: 481px) {

  .br-sp {display: none;}

}

@media screen and (max-width: 480px) {

  .br-pc {display: none;}

}

/* ===================================================================== */
/* Base * /
/* ===================================================================== */
html {
  height: 100%;
  font-size: 62.5%;
}

body {
  width: 100%;
  height: 100%;
  font-family: /*-apple-system, BlinkMacSystemFont,*/ 'Helvetica Neue', Helvetica,
  '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック','Yu Gothic',
  'Hiragino Kaku Gothic ProN','メイリオ', arial, Meiryo,
  'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 1.6rem;
  line-height: 1.8;
  text-align: justify;
  text-justify: inter-ideograph;
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
  letter-spacing: .16em;
  /*color: #4d4d4d;*/
  color: #000;
}

section {
  padding: 6.4rem 0;
  border-bottom: 1px solid #f4f4f4;
  position: relative;
  z-index: 1;
}

img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.wrapper {
  width: 100%;
  background-color: #fff;
  position: relative;
}

.content {
  position: relative;
  z-index: 1;
}

.container {
  width: 1240px;
  height: 100%;
  padding: 0;
  margin: 0 auto;
}

.text-box {
  width: 61.8%;
  margin: 0 auto 4.8rem;
}

@media only screen and (max-width: 1480px) {

  .container {
    width: 1200px;
    padding: 0 20px;
  }

}

@media only screen and (max-width: 980px) {

  .text-box {

  }

}

@media only screen and (max-width: 767px) {

  .text-box {

  }

}

@media only screen and (max-width: 560px) {

  .text-box {

  }

}

/* -----------------------------------------------------------
fot Smartphone
----------------------------------------------------------- */
@media only screen and (max-width: 1240px) {

  html {
    font-size: 58.5937%;
  }

  .container {
    width: 90%;
  }

}

@media only screen and (max-width: 560px) {

  html {
    font-size: 54.6875%;
  }

  .container {
    width: 90%;
    padding: 0 10px;
  }

}

@media only screen and (max-width: 480px) {

  section {
    padding: 6.4rem 0;
  }

}

/* ===================================================================== */
/* Link * /
/* ===================================================================== */
a, a:link, a:active {
  color: #888;
  text-decoration: none;
  outline: none;
  transition: .3s;
}

a:hover {
  color: #66b52c;
  text-decoration: none;
  transition: .3s;
}

a img {
  border: none;
  transition: .3s;
}

a:hover img {
  opacity: .5;
  transition: .3s;
}

/* ===================================================================== */
/* Effects * /
/* ===================================================================== */
.effectIn {
  transition: 1.0s;
  opacity: 0;
}
.effectOut {
  transition: 1.0s;
  opacity: 1.0;
}

.effectIn1 {
  transition: 1.0s;
  transform: translate(0, 60px);
  opacity: .1;
}
.effectOut1 {
  transition: 1.0s;
  transform: translate(0, 0px);
  opacity: 1.0;
}

.effectIn2 {
  transition: 1.0s;
  transform: translate(-60px, 0);
  opacity: .1;
}
.effectOut2 {
  transition: 1.0s;
  transform: translate(0, 0px);
  opacity: 1.0;
}

.effectIn3 {
  transition: 1.0s;
  transform: translate(60px, 0);
  opacity: .1;
}
.effectOut3 {
  transition: 1.0s;
  transform: translate(0, 0px);
  opacity: 1.0;
}

@keyframes zoom {
  0% {
    transform: scale(1.0);
    filter: blur(6px);
  }
  100% {
    transform: scale(1.1);
    filter: blur(0);
  }
}

@keyframes scroll {
  0% {height: 0;}
  75% {height: 96px;}
  100% {height: 96px;}
}

@keyframes title {
  0% {color: transparent;}
  80% {color: transparent;}
  100% {color: #000;}
}
@keyframes title-bg {
  0% {width: 0; left: 0;}
  50% {width: 100%; left: 0;}
  100% {width: 100%; left: 100%;}
}

@keyframes title-zoom {
  0% {width: 120%; height: 120%; top: -10%; left: -10%;}
  100% {width: 100%; height: 100%; top: 0; left: 0;}
}
@keyframes title-zoom-TL {
  0% {top: -10%; left: -10%;}
  100% {top: 0; left: 0;}
}
@keyframes title-zoom-TR {
  0% {top: -10%; right: -10%;}
  100% {top: 0; right: 0;}
}
@keyframes title-zoom-BL {
  0% {left: -10%; bottom: -10%;}
  100% {left: 0; bottom: 0;}
}
@keyframes title-zoom-BR {
  0% {right: -10%; bottom: -10%;}
  100% {right: 0; bottom: 0;}
}

/* ===================================================================== */
/* Layout * /
/* ===================================================================== */
.flex-C {
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-flex-flow: row nowrap;
  display: flex;
  justify-content: center;
  flex-flow: row nowrap;
}

.flex-L {
  display: -webkit-flex;
  -webkit-justify-content: flex-start;
  -webkit-flex-flow: row nowrap;
  display: flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
}

.flex-R {
  display: -webkit-flex;
  -webkit-justify-content: flex-start;
  -webkit-flex-flow: row-reverse nowrap;
  display: flex;
  justify-content: flex-start;
  flex-flow: row-reverse nowrap;
}

.flex-wrap {
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

/* ===================================================================== */
/* Object Fit * /
/* ===================================================================== */
.object-fit {
  object-fit: cover;
  font-family: 'object-fit: cover;'; /*IE対策*/
}

.img-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.img-wrap::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
.img-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;'; /*IE対策*/
  object-position: center center;
}

/* ===================================================================== */
/* Header * /
/* ===================================================================== */
#header {
  width: 100%;
  position: fixed;
  z-index: 9999;
}

.header-menu ul {
  width: 98%;
  margin: 0 1%;
}

.header-menu li {
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-flex-flow: column nowrap;
  display: flex;
  justify-content: center;
  flex-flow: column nowrap;
}

.header-menu li a {
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-flex-flow: column nowrap;
  display: flex;
  justify-content: center;
  flex-flow: column nowrap;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #0f0c48;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: .16rem;
  padding: 1.6rem 2.4rem;
}

.header-menu li a:hover {
  color: #ed3353;
}

.header-menu li.header-logo {
  margin-right: auto;
}

.header-menu li.header-logo img {
  width: 60px;
}

/* -----------------------------------------------------------
Smaller
----------------------------------------------------------- */
.smaller .header-menu {
  background-color: #0f0c48;
  box-shadow: 0 0 12px rgba(0,0,0,.1);
}

.smaller .header-menu li a {
  color: #fff;
  font-size: .8em;
  padding: 1.28rem 1.92rem;
}
.smaller .header-menu li a:hover {
  color: #ed3353;
}

.smaller .header-menu li.header-logo img {
  width: 50px;
}

/* ===================================================================== */
/* Drower Menu * /
/* ===================================================================== */
.drawer-box .drawer-hamburger {
  width: 3.2rem;
  padding-top: 3.2rem;
  padding-left: 3.2rem;
  padding-right: 3.2rem;
  padding-bottom: 4.8rem;
  margin-top: 0;
  background-color: transparent;
  z-index: 9999;
  transition: .6s;
}
.page .drawer-box .drawer-hamburger {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.drawer--top.drawer-open .drawer-box .drawer-hamburger {
  background-color: transparent;
  transition: .6s;
}

.drawer-box .drawer-hamburger-icon,
.drawer-box .drawer-hamburger-icon::before,
.drawer-box .drawer-hamburger-icon::after {
  height: 2px;
  background-color: #0f0c48;
}
.drawer-box .drawer-hamburger-icon::after {
  width: 80%;
  margin-left: 20%;
}
.drawer-open .drawer-box .drawer-hamburger-icon {
    background-color: transparent;
}
.drawer-open .drawer-box .drawer-hamburger-icon::before,
.drawer-open .drawer-box .drawer-hamburger-icon::after {
  height: 3px;
  background-color: #fff;
}
.drawer-open .drawer-box .drawer-hamburger-icon::after {
  width: 100%;
  margin-left: 0;
}

.drawer--top.drawer-open .drawer-box .drawer-nav {
  padding-top: 20%;
  padding-bottom: 10%;
  background-color: #66b52c;
  top: -1px;
  z-index: 9998;
}

.drawer-box .header-logo {
  border-bottom: none;
  margin: 0 auto 2.4rem;
}
.drawer-box .header-logo img {
  width: 18rem;
  margin: 2.4rem auto;
}

.drawer-box .drawer-menu {
  padding: 1.6rem;
}

.drawer-box .drawer-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  position: relative;
}

.drawer-box .drawer-menu li::before {
  font-family: "Material Icons";
  content: "\e5cc";
  position: absolute;
  top: .8rem;
  right: .8rem;
  color: #fff;
}
.drawer-box .drawer-menu li.header-logo::before {
  content: "";
}

.drawer-box .drawer-menu li a {
  display: block;
  color: #fff;
  padding: .8rem;
  padding-right: 1.6rem;
}

.drawer-box .drawer-menu li a:hover {
  border-bottom: none;
}

.drawer-open .drawer-overlay {
  z-index: 9000;
  background-color: rgba(255, 255, 255, .1);
}

@media only screen and (min-width: 981px) {

  .drawer-box {
    display: none;
  }

}

@media only screen and (max-width: 980px) {

  .header-menu li:not(.header-logo) {
    display: none;
  }

}

@media only screen and (max-width: 460px) {

  .drawer-box .drawer-hamburger {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }

}

/* -----------------------------------------------------------
Header Scroll
----------------------------------------------------------- */
.smaller .drawer-box .drawer-hamburger {
  padding-top: 2.8rem;
  padding-bottom: 3rem;
  background-color: transparent;
  transition: .6s;
}
.smaller .drawer-box .drawer-hamburger-icon,
.smaller .drawer-box .drawer-hamburger-icon::before,
.smaller .drawer-box .drawer-hamburger-icon::after {
  height: 2px;
  background-color: #fff;
}
.drawer-open .smaller .drawer-box .drawer-hamburger-icon {
  background-color: transparent;
}

/* ===================================================================== */
/* Title * /
/* ===================================================================== */
.title-1 {
  text-align: center;
  margin-bottom: 4.8rem;
}
.title-1 h2 {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #66b52c;
  font-size: 3.2rem;
  font-weight: bold;
  padding: 1.6rem;
  position: relative;
}
.title-1 h2 span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  font-size: 1.4rem;
  letter-spacing: .08rem;
}
/*.title-1 h2::before,
.title-1 h2::after {
  content: "";
  width: 6.4rem;
  height: 2px;
  background-color: #66b52c;
  position: absolute;
  bottom: 2.4rem;
}
.title-1 h2::before {
  left: 0;
}
.title-1 h2::after {
  right: 0;
}*/

.title-2 {
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #66b52c;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2.4rem;
}

/* ===================================================================== */
/* CTA * /
/* ===================================================================== */
.cta-area {
  padding: 9.6rem 0 6.4rem;
  position: relative;
  z-index: 1;
}
.cta-area::before,
.cta-area::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.cta-area::before {
  background: url("img/cta_bg-01.jpg") no-repeat center center;
  background-size: cover;
  filter: grayscale(.3) brightness(.5);
}
.cta-area::after {
  background-color: #0f0c48;
  mix-blend-mode: soft-light;
}

.cta-area .container {
  position: relative;
  z-index: 1;
}

.cta-area p {
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}

.link-box {
  width: 40%;
  text-align: center;
  margin: 4.8rem auto;
}

.link-box a {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 1.6rem 6.4rem;
  box-sizing: border-box;
  background: #ed3353;
  border-radius: 40px;
  box-shadow: 0 0 12px rgba(0,0,0,.2);
  position: relative;
}
.link-box a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2.4rem;
  bottom: 0;
  margin: auto;
}
.link-box.request a::before {
  width: 45px;
  height: 30px;
  background: url("img/icon_study.svg") no-repeat center center;
  background-size: cover;
}
.link-box.search a::before {
  width: 30px;
  height: 30px;
  background: url("img/icon_search.svg") no-repeat center center;
  background-size: cover;
}
.link-box a::after {
  font-family: "Material Icons";
  content: "\e5cc";
  color: #ed3353;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 0;
  right: 2.4rem;
  bottom: 0;
  margin: auto;
  transition: .3s;
}

.link-box a:hover {
  transform: scale(.95);
  background: #0f0c48;
  box-shadow: 0 0 6px rgba(0,0,0,.2);
}
.link-box a:hover::after {
  color: #0f0c48;
  transition: .3s;
}

.page-link {
  padding-top: 9.6rem;
  margin-top: -9.6rem;
}

@media only screen and (max-width: 980px) {

  .link-box {
    width: 60%;
  }

}

@media only screen and (max-width: 640px) {

  .link-box {
    width: 100%;
  }

}

@media only screen and (max-width: 400px) {

  .link-box a {
    padding: 1.6rem;
  }
  .link-box a::after {
    font-size: 20px;
    width: 20px;
    height: 20px;
  }

}

/* ===================================================================== */
/* Breadcrumb * /
/* ===================================================================== */
.breadcrumb {
  padding-top: 6.4rem;
  border-bottom: 1px solid #f4f4f4;
  position: relative;
  z-index: 1;
}

.breadcrumb ol {
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  list-style-type: none;
}

.breadcrumb li {
  display: inline-block;
  color: #4d4d4d;
  font-size: 1.36rem;
  letter-spacing: .08rem;
}

.breadcrumb li a {
  color: #4d4d4d;
}
.breadcrumb li a:hover {
  color: #66b52c;
  text-decoration: underline;
}

.breadcrumb li:first-child::before,
.breadcrumb li::before {
  vertical-align: -1px;
  letter-spacing: 0;
}
/*.breadcrumb li:first-child::before {
  font-family: 'Material Icons';
  content: "\e88a";
}*/
.breadcrumb li:not(:first-child)::before {
  font-family: 'Material Icons';
  content: "\e5cc";
  display: inline-block;
  margin-left: .2em;
}

/* ===================================================================== */
/* Line * /
/* ===================================================================== */
.line::after {
  content: "";
  width: 1px;
  background: #000;
  position: absolute;
  top: -48px;
  left: 0;
  right: 0;
  margin: auto;
  animation: scroll 1.2s ease-in infinite;
  -webkit-animation: scroll 1.2s ease-in infinite;
  -moz-animation: scroll 1.2s ease-in infinite;
}

.bg-wrap {
  width: 100%;
  background-color: #fff;
  position: relative;
}

.bg-line {
  position: relative;
}
.bg-line::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #66b52c;
  position: absolute;
  top: 0;
  left: 50%;
}
.bg-line::after {
  content: "";
  width: 70%;
  height: 100%;
  border-left: 1px solid #66b52c;
  border-right: 1px solid #66b52c;
  position: absolute;
  top: 0;
  left: 15%;
}

/* ===================================================================== */
/* Page Top * /
/* ===================================================================== */
.page-top {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #66b52c;
  cursor: pointer;
  position: fixed;
  right: 2%;
  bottom: 2%;
  z-index: 100;
}
.page-top span {
  color: #fff;
  font-size: 50px;
  transition: .3s;
}
.page-top:hover span {
  line-height: .8;
  transition: .3s;
}

@media only screen and (max-width: 560px) {



}

/* ===================================================================== */
/* Footer * /
/* ===================================================================== */
#footer {
  font-family: 'Open Sans', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  background-color: #0f0c48;
  position: relative;
  z-index: 1;
}

.footer-menu {
  padding: 4.8rem 0;
}

.footer-menu ul {
  list-style-type: none;
  -webkit-flex-flow: row wrap;
  -webkit-align-items: center;
  flex-flow: row wrap;
  align-items: center;
}

.footer-menu li a {
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  padding: .8rem 1.6rem;
}
.footer-menu li:not(.footer-logo) a::before {
  font-family: "Material Icons";
  content: "\e5cc";
  vertical-align: -2px;
}
.footer-menu li:not(.footer-logo):hover a {
  color: #ed3353;
}

.footer-menu li.footer-logo {
  width: 100%;
  text-align: center;
  margin-bottom: 1.6rem;
}
.footer-menu li.footer-logo a {
  display: inline-block;
}
.footer-menu li.footer-logo img {
  width: 80px;
  margin: 0 auto .8rem;
}
.footer-menu li.footer-logo p {
  font-family: 'Cardo', sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  font-size: 2rem;
  font-weight: 500;
}

.footer-copy {
  text-align: center;
  padding: .8rem 0;
  background-color: #101012;
}

.footer-copy p {
  color: #fff;
  font-size: 1rem;
  letter-spacing: .16rem;
}