@charset "utf-8";
/* CSS Document */
/* ##################################################################### */
/*	モバイルレ : 480 px およびそれ以下
/* ##################################################################### */
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);
@import url(https://fonts.googleapis.com/earlyaccess/kokoro.css);
/* ===================================================================== */
/*	基本設定
/* ===================================================================== */
/*
orange #ed895d
green #8cbe3f
blue #29b5ce 
pink #ca4f8a 
purple #6d4692
yellow #f8cb0e 

brown #704d2b
h #965b21
beige #f5f0dd;
*/
/* SPブレ */
/*body{
    box-sizing: border-box;
}*/
/* SPブレ map */
.boxSize2 {
  width: 100%;
  box-sizing: border-box;
  height: auto;
  padding-left: 0px;
  padding-right: 0px;
}
/* SPブレ fb */
.boxSize3 {
  width: 100%;
  box-sizing: border-box;
  height: auto;
}
h1 {
  font-size: 2.2rem;
  font-weight: bold;
  padding-bottom: 25px;
  margin-bottom: 20px;
  background: url("../images/line_01.svg") no-repeat center bottom;
  background-size: 50%;
}
h2 {
  font-size: 1.3rem;
  padding-top: 13px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  color: #fff;
  background: url("../images/h_bk_02.svg") no-repeat center center;
  background-size: contain;
  height: 50px;
}
h3 {
  font-size: 180%;
  font-weight: bold;
}
h4 {
  font-size: 150%;
  font-weight: bold;
  padding-top: 30px;
  padding-bottom: 10px;
}
h1, h2, h3, h4 {
  text-align: center;
}
.tel {
  font-size: 150%;
  font-weight: bold;
  color: #965b21;
}
p {
  color: #333;
  /*font-family: "メイリオ", Meiryo, Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
}
.area {
  /*  padding-top: 50px;
  padding-bottom: 50px;*/
  padding-top: 80px;
  padding-bottom: 80px;
}
.area_s {
  padding-top: 30px;
  padding-bottom: 30px;
}
.areaBottom {
  padding-bottom: 50px;
}
.bg-red {
  background-color: red;
}
.bg-beige {
  background-color: #f5f0dd;
}
.text-orange {
  color: #ed895d;
}
/* drawer 20200914
------------------------------------------*/
.drawer-brand {
  padding-left: 0px;
}
.drawer-brand img {
  width: 80%;
}
.drawer-navbar {}
.drawer-navbar .drawer-brand {
  line-height: 70px;
}
.drawer-container {
  background-color: #fff;
  border-bottom: 4px solid #8cbe3f;
}
.drawer-nav {
  background-color: #8cbe3f;
}
.drawer-navbar .drawer-navbar-header {
  border-bottom: none;
}
.drawer-navbar-header {
  text-align: left;
  height: 70px;
}
.drawer-hamburger {
  padding-top: 22px;
}
.drawer-menu-item {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  font-family: "M PLUS Rounded 1c";
}
.drawer-menu-item:hover {
  color: #ed895d;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  background-color: #8cbe3f;
}
.drawer-navbar .drawer-nav {
  padding-top: 4.75rem;
  padding-left: 1.2rem;
}
/* rainbow
------------------------------------------*/
/* 3px */
.rainbow3px {
  width: 100%;
  height: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  background: repeating-linear-gradient(90deg, #e60033, #e60033 3px, #fff 3px, #fff 6px, #f08300 6px, #f08300 9px, #fff 9px, #fff 12px, #ffd900 12px, #ffd900 15px, #fff 15px, #fff 18px, #3eb370 18px, #3eb370 21px, #fff 21px, #fff 24px, #bce2e8 24px, #bce2e8 27px, #fff 27px, #fff 30px, #0095d9 30px, #0095d9 33px, #fff 33px, #fff 36px, #884898 36px, #884898 39px, #fff 39px, #fff 42px);
}
/* 5px */
.rainbow5px {
  width: 100%;
  height: 5px;
  border: 0;
  background: repeating-linear-gradient(-45deg, #e60033, #e60033 5px, #fff 5px, #fff 10px, #f08300 10px, #f08300 15px, #fff 15px, #fff 20px, #ffd900 20px, #ffd900 25px, #fff 25px, #fff 30px, #3eb370 30px, #3eb370 35px, #fff 35px, #fff 40px, #bce2e8 40px, #bce2e8 45px, #fff 45px, #fff 50px, #0095d9 50px, #0095d9 55px, #fff 55px, #fff 60px, #884898 60px, #884898 65px, #fff 65px, #fff 70px);
}
/* 10px */
.rainbow10px {
  width: 100%;
  height: 10px;
  border: 0;
  background: repeating-linear-gradient(90deg, #e60033, #e60033 10px, #fff 10px, #fff 20px, #f08300 20px, #f08300 30px, #fff 30px, #fff 40px, #ffd900 40px, #ffd900 50px, #fff 50px, #fff 60px, #3eb370 60px, #3eb370 70px, #fff 70px, #fff 80px, #bce2e8 80px, #bce2e8 90px, #fff 90px, #fff 100px, #0095d9 100px, #0095d9 110px, #fff 110px, #fff 120px, #884898 120px, #884898 130px, #fff 130px, #fff 140px);
}
/* 15px */
.rainbow15px {
  width: 100%;
  height: 15px;
  border: 0;
  background: repeating-linear-gradient(-45deg, #e60033, #e60033 15px, #fff 15px, #fff 30px, #f08300 30px, #f08300 45px, #fff 45px, #fff 60px, #ffd900 60px, #ffd900 75px, #fff 75px, #fff 90px, #3eb370 90px, #3eb370 105px, #fff 105px, #fff 120px, #bce2e8 120px, #bce2e8 135px, #fff 135px, #fff 150px, #0095d9 150px, #0095d9 165px, #fff 165px, #fff 180px, #884898 180px, #884898 195px, #fff 195px, #fff 210px);
}
/* 20px */
.rainbow20px {
  width: 100%;
  height: 20px;
  border: 0;
  background: repeating-linear-gradient(90deg, #e60033, #e60033 20px, #fff 20px, #fff 40px, #f08300 40px, #f08300 60px, #fff 60px, #fff 80px, #ffd900 80px, #ffd900 100px, #fff 100px, #fff 120px, #3eb370 120px, #3eb370 140px, #fff 140px, #fff 160px, #bce2e8 160px, #bce2e8 180px, #fff 180px, #fff 200px, #0095d9 200px, #0095d9 220px, #fff 220px, #fff 240px, #884898 240px, #884898 260px, #fff 260px, #fff 280px);
}
/* パステルカラー */
.rainbow20px_pastel {
  width: 100%;
  height: 20px;
  border: 0;
  background: repeating-linear-gradient(-45deg, #ffc6c6, #ffc6c6 20px, #fff 20px, #fff 40px, #ffe2c6 40px, #ffe2c6 60px, #fff 60px, #fff 80px, #ffffc6 80px, #ffffc6 100px, #fff 100px, #fff 120px, #c6ffc6 120px, #c6ffc6 140px, #fff 140px, #fff 160px, #c6ffff 160px, #c6ffff 180px, #fff 180px, #fff 200px, #c6e2ff 200px, #c6e2ff 220px, #fff 220px, #fff 240px, #e2c6ff 240px, #e2c6ff 260px, #fff 260px, #fff 280px);
}
.rainbow_box5px {
  width: 100%;
  margin: 0;
  padding: 15px;
  height: 100px;
  border-radius: 70px;
  background: repeating-linear-gradient(-45deg, #6d4692, #6d4692 5px, #fff 5px, #fff 10px, #f8cb0e 10px, #f8cb0e 15px, #fff 15px, #fff 20px, #ed895d 20px, #ed895d 25px, #fff 25px, #fff 30px, #8cbe3f 30px, #8cbe3f 35px, #fff 35px, #fff 40px, #29b5ce 40px, #29b5ce 45px, #fff 45px, #fff 50px, #ca4f8a 50px, #ca4f8a 55px, #fff 55px, #fff 60px);
}
.rainbow_box {
  font-size: 80%;
  width: auto;
  margin: 5px;
  padding: 20px;
  height: auto;
  border-radius: 70px;
  background-color: hsla(0, 0%, 100%, 1.0);
}
footer .section3 {
  background: url("../images/footer_bk.svg") repeat-x center top;
  background-size: cover;
}
footer .section3 p {
  color: #fff;
}
.btn {
  margin: 1em 0 0.3em;
  min-width: 200px;
  font-family: "M PLUS Rounded 1c";
}
a.btn--yellow.btn--border-dotted {
  border: 3px dotted #000;
}
.btn--orange, a.btn--orange {
  color: #fff;
  background-color: #ca4f8a;
}
.btn--orange:hover, a.btn--orange:hover {
  color: #fff;
  background: #6d4692;
}
.btn--radius, a.btn--radius {
  border-radius: 100vh;
}
.font-required {
  color: #FF0004;
}
/*#recruit,*/
#about_us, #introduction, #contact_us, .infomation {
  background: url("../images/nav_bk.png") repeat top left;
}
#overview {
  background-image: url("../images/logo_m.svg"), url("../images/sun.svg"), url("../images/donguri.svg");
  background-size: 30%, 30%, 20%;
  background-repeat: no-repeat;
  background-color: #f5f0dd;
  background-position: right 30px top 30px, left 30px top 38%, right 10px bottom 750px;
}
#recruit {
  background-image: url("../images/logo_m.svg");
  background-size: 40%;
  background-repeat: no-repeat;
  background-color: #f5f0dd;
  background-position: right 100px top 50%;
}
#about_us dt, #overview dt, .overview dt {
  text-align: center;
  background: url("../images/h_bk_01.svg") no-repeat center top;
  background-size: 40%;
  color: #fff;
  padding-top: 3px;
  min-height: 50px;
  margin-top: 20px;
}
#about_us .yono dt, #overview .yono dt, .overview .yono dt {
  text-align: center;
  background: url("../images/h_bk_01_yono.svg") no-repeat center top;
  background-size: 40%;
  color: #fff;
  padding-top: 3px;
  min-height: 50px;
  margin-top: 20px;
  margin-bottom: 10px;
}
#about_us dd, #overview dd, .overview dd {
  min-height: 30px;
  border-bottom: dotted 1px #ccc;
  margin-bottom: 20px;
}
@media (min-width: 420px) {
  #about_us dt, #overview dt, .overview dt {
    background-size: 40%;
    color: #fff;
    padding-top: 6px;
    min-height: 50px;
    margin-top: 20px;
  }
}
/* facility
----------------------------------------------------------------------------------*/
/*#facility,*/
#haruka_yono {
  background-image: url("../images/nav_bk2.png");
}
#facility p {
  text-align: center;
  font-weight: bold;
  color: #965b21;
  margin-bottom: 30px;
}
/* annual_events
----------------------------------------------------------------------------------*/
#annual_events {
  background-image: url("../images/onpu.svg"), url("../images/butterfly2.svg"), url("../images/star2.svg");
  background-size: 30%, 20%, 35%;
  background-repeat: no-repeat;
  background-color: #f5f0dd;
  background-position: right 30px top 30px, left 30px top 38%, right 10px bottom 350px;
}
#annual_events p {
  text-align: center;
  font-weight: bold;
  color: #965b21;
  margin-bottom: 30px;
}
@media (min-width: 480px) {
  #about_us .yono dt, #overview .yono dt, .overview .yono dt, #about_us dt, #overview dt, .overview dt {
    background-size: 40%;
    padding-top: 10px;
    min-height: 50px;
    margin-top: 0px;
    margin-bottom: 20px;
  }
}
@media (min-width: 576px) {
  h1 {
    font-size: 3rem;
    padding-bottom: 40px;
    margin-bottom: 20px;
    background-size: 50%;
  }
  h2 {
    font-size: 2rem;
    padding-top: 13px;
    padding-bottom: 10px;
    margin-bottom: 30px;
    background-size: contain;
    height: 70px;
  }
  #about_us .yono dt, #overview .yono dt, .overview .yono dt, #about_us dt, #overview dt, .overview dt {
    background-size: 80%;
    padding-top: 5px;
    min-height: 50px;
    margin-top: 0px;
    margin-bottom: 10px;
  }
}
@media (min-width: 768px) {
  .btnBig {
    margin: 0.5em 0;
    min-width: 220px;
    font-size: 1.2rem;
  }
  .area {
    padding-top: 110px;
    padding-bottom: 110px;
  }
  .areaTop {
    padding-top: 110px;
  }
  .areaBottom {
    padding-bottom: 110px;
  }
}
@media (min-width: 993px) {
  .btnBig {
    margin: 1em 0;
    min-width: 280px;
    font-size: 1.2rem;
  }
  h1 {
    background-size: 30%;
  }
  .rainbow_box {
    font-size: 100%;
    min-height: 200px;
  }
  .infomation .rainbow_box {
    min-height: 80px !important;
  }
  .infomation .rainbow_box p {
    margin-bottom: 0px;
  }
  #overview {
    background-image: url("../images/logo_m.svg"), url("../images/sun.svg"), url("../images/donguri.svg");
    background-size: 30%, 20%, 20%;
    background-repeat: no-repeat;
    background-color: #f5f0dd;
    background-position: right 30px top 30px, left 30px center, right 10px bottom 290px;
  }
}
@media (min-width: 1200px) {
  .drawer-brand {
    padding: 10px !important;
  }
  .drawer-brand img {
    width: 100%;
  }
  .drawer-navbar .drawer-brand {
    line-height: 40px;
  }
  .drawer-navbar .drawer-nav {
    height: 70px;
    line-height: 70px;
    padding-top: 0rem;
    padding-left: 0rem;
  }
  .drawer-navbar .drawer-menu-item {
    line-height: 70px;
  }
  .drawer-navbar {
    height: 70px;
    line-height: 70px;
  }
  .drawer-nav {
    background-color: transparent !important;
  }
  .drawer-menu-item {
    color: #8cbe3f;
  }
  .link-current .drawer-menu-item {
    color: #ed895d;
  }
  .drawer-overlay {
    background-color: transparent;
  }
}