@charset "utf-8";

.top_image {
  height: 0;
  background: url(../images/index/top_img.jpg) center / cover no-repeat;
  /* (画像の高さ / 画像の横幅) × 100 */
  padding-top: 66.40625%;
}

.top_image::before, .top_image::after {
  content: "";
  width: 150px;
  height: 45px;
  position: absolute;
  bottom: 13px;
  background-size: contain;
  background-repeat: no-repeat;
}

.top_image::before {
  left: 0;
  background-image: url(../images/index/top_illust.svg);
}

.top_image::after {
  right: 0;
  background-image: url(../images/index/top_illust.svg);
  transform: scale(-1, 1);
}

@media print, screen and (min-width: 600px) {
  .top_image::before, .top_image::after {
    width: 250px;
    height: 70px;
    bottom: 9px;
  }
}

@media print, screen and (min-width: 1025px) {
  .top_image::before, .top_image::after {
    width: 439px;
    bottom: 0px;
    height: 146px;
  }
}

/* ===================================
ABOUT
=================================== */

.start {
  padding: 2em 0 3em;
}

.start::before, .start::after {
  display: none;
}

.start .arch {
  margin-bottom: 1em;
}

.start .welcome {
  width: 95%;
  margin: 0 auto 0.8em;
  position: relative;
  font-family: "keifont";
  font-size: 1.3em;
  color: #FF8000;
  font-weight: normal;
  line-height: 1.5em;
}

.start .txt {
  width: 90%;
  margin: 0 auto;
}

.start .txt p {
  margin-bottom: 0.7em;
  font-weight: 300;
  line-height: 1.8em;
  text-align: left;
  z-index: 999;
}

@media print, screen and (min-width: 600px) {
  .start .welcome {
    font-size: 1.5em;
  }
  .start .txt p {
    font-size: 1.05em;
    text-align: center;
  }
  .start .txt p .br_pc {
    display: inline-block;
  }
}

@media print, screen and (min-width: 1025px) {
  .start {
    padding: 3.5em 0 4em;
  }
  .start .welcome {
    font-size: 2em;
  }
  .start .txt p {
    font-size: 1.18em;
  }
}

/* ===================================
WELCOME - 装飾
=================================== */

.illust_come {
  margin-top: 2em;
  padding-top: 17em;
  display: block;
  position: relative;
  pointer-events: none;
}

.illust_come img {
  width: 100%;
  display: block;
}

.illust_come .left_img01 {
  width: 180px;
  position: absolute;
  top: 0;
  left: 5%;
}

.illust_come .left_img01 img {
  border-radius: 58% 42% 50% 50% / 49% 52% 48% 51%;
}

.illust_come .left_img01::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: -5px;
  top: -5px;
  border: 2px dashed #FFBCC9;
  border-radius: 58% 42% 50% 50% / 49% 52% 48% 51%;
  z-index: 99;
}

.illust_come .left_img01::after {
  content: "";
  width: 35%;
  height: 30%;
  position: absolute;
  right: -14px;
  bottom: -3px;
  border-radius: 58% 42% 50% 50% / 49% 52% 48% 51%;
  background-size: 8px 8px;
  background-image: radial-gradient(#ff97ce 15%, transparent 20%);
  z-index: 999;
}

.illust_come .left_img02 {
  width: 150px;
  position: absolute;
  bottom: 50px;
  left: 5%;
  z-index: 999;
}

.illust_come .right_illust01 {
  width: 146px;
  position: absolute;
  top: 40px;
  right: 6%;
  z-index: 9999;
}

.illust_come .right_illust01::before {
  content: "";
  display: block;
  position: absolute;
  background: url(../images/index/wel_illust03.svg) left / contain no-repeat;
}

@media print, screen and (min-width: 600px) {
  .about .txt p {
    font-size: 1.05em;
  }
  .about .txt .br_pc {
    display: block;
  }
  .illust_come {
    width: 100%;
    height: 390px;
    margin-top: 0;
    position: absolute;
    overflow: hidden;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .illust_come .left_img01 {
    top: 90px;
    left: auto;
    right: calc(50% + 192px);
  }
  .illust_come .left_img01::after {
    background-size: 14px 14px;
  }
  .illust_come .left_img02 {
    top: 0;
    left: auto;
    right: calc(50% + 160px);
  }
  .illust_come .right_illust01 {
    width: 175px;
    top: 31px;
    left: calc(50% + 212px);
    right: auto;
  }
}

@media print, screen and (min-width: 1025px) {
  .illust_come {
    height: 480px;
    padding: 0;
    overflow: visible;
  }
  .illust_come .left_img01 {
    top: 144px;
    max-width: 303px;
    width: 20%;
    left: 8%;
    right: auto;
  }
  .illust_come .left_img02 {
    top: 56px;
    max-width: 220px;
    width: 14%;
    left: 15%;
    right: auto;
  }
  .illust_come .right_illust01 {
    width: 19%;
    max-width: 300px;
    top: 254px;
    right: 5%;
    left: auto;
  }
  .illust_come .right_illust01::before {
    width: 166px;
    height: 200px;
    top: -203px;
    right: 4px;
  }
}

@media print, screen and (min-width: 1300px) {
  .illust_come .left_img02 {
    top: 30px;
  }
  .illust_come .right_illust01 {
    max-width: 290px;
    right: 9%;
  }
  .illust_come .right_illust01::before {
    width: 211px;
    height: 226px;
    top: -242px;
    right: 32px;
  }
}

/* ===================================
ABOUT
=================================== */

.about {
  display: block;
  position: relative;
  text-align: center;
}

.about .illust01 {
  width: 60%;
  max-width: 260px;
  display: block;
  position: absolute;
  top: -3.5em;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 99;
}

.about_inner {
  padding: 3em 0 2.5em;
  position: relative;
  overflow: hidden;
}

.about h2 {
  margin: 0 auto 0.8em;
  font-weight: normal;
  z-index: 99;
}

.about .txt {
  width: 90%;
  margin: 0 auto;
  position: relative;
  text-align: left;
}

.about .txt::before {
  content: "";
  width: 5em;
  height: 5em;
  position: absolute;
  top: -115px;
  left: -22px;
  background: url(../images/index/about_left01.svg) left / contain no-repeat;
}

.about .txt::after {
  content: "";
  width: 5em;
  height: 5em;
  position: absolute;
  bottom: -60px;
  right: 0;
  background: url(../images/index/about_right01.svg) left / contain no-repeat;
}

.about .txt p {
  width: 100%;
  margin: 0 auto 1.5em;
  position: relative;
  font-weight: 300;
  line-height: 2.3em;
  z-index: 99;
}

.about .txt p .big_txt {
  font-family: "GenJyuuGothic-P-Bold";
  font-size: 1.2em;
  color: #ff4a4a;
  border-bottom: 2px solid #ff4a4a;
}

.policy3 {
  display: flex;
  flex-wrap: wrap;
}

.policy3 div {
  width: 60%;
  margin: 0 auto 1.5em;
  position: relative;
}

.policy3 div:last-child {
  margin-bottom: 0;
}

.policy3 div:hover {
  transition: 1s;
  opacity: 0.7;
}

.policy3 div img {
  width: 100%;
  border-radius: 50%;
  border-style: solid;
  border-width: 7px;
}

.policy3 div::before {
  display: block;
  position: absolute;
  top: -14px;
  left: 2px;
  font-family: "GenJyuuGothic-P-Bold";
  font-size: 3.5em;
  color: #fff;
}

/* 個別設定 */

.policy3 .one img {
  border-color: #009b4e;
}
.policy3 .one::before {
  content: "01";
  text-shadow: 2px 2px 0px #009b4e, -2px 2px 0px #009b4e, 2px -2px 0px #009b4e, -2px -2px 0px #009b4e, 2px 0px 0px #009b4e, 0px 2px 0px #009b4e, -2px 0px 0px #009b4e, 0px -2px 0px #009b4e;
}

.policy3 .two img {
  border-color:#0B74D1;
}

.policy3 .two::before {
  content: "02";
  text-shadow: 2px 2px 0px #0B74D1, -2px 2px 0px #0B74D1, 2px -2px 0px #0B74D1, -2px -2px 0px #0B74D1, 2px 0px 0px #0B74D1, 0px 2px 0px #0B74D1, -2px 0px 0px #0B74D1, 0px -2px 0px #0B74D1;
}

.policy3 .three img {
  border-color: #E88521;
}

.policy3 .three::before {
  content: "03";
  text-shadow: 2px 2px 0px #E88521, -2px 2px 0px #E88521, 2px -2px 0px #E88521, -2px -2px 0px #E88521, 2px 0px 0px #E88521, 0px 2px 0px #E88521, -2px 0px 0px #E88521, 0px -2px 0px #E88521;
}

.policy3 button {
  width: 90%;
  margin: 0 auto;
  padding: 0.7em 0;
  margin-top: -2em;
  position: relative;
  font-family: 'SourceHanSans-Regular';
  color: #fff;
  font-size: 1.25em;
  letter-spacing: 0.1em;
  border-radius: 10px 50px/50px 10px;
  cursor: pointer;
  z-index: 999;
}

.policy3 .one button {
  background: #009B4E;
}

.policy3 .two button {
  background: #0B74D1;
}

.policy3 .three button {
  background: #E88521;
}

.policy3 .three::after {
  content: "";
  width: 6em;
  height: 6em;
  position: absolute;
  bottom: 12px;
  right: -21px;
  background-image: url(../images/index/about_right02.svg);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 999;
}

@media print, screen and (min-width: 600px) {
  .about h2 .br_sp {
    display: none;
  }
  .about .txt p {
    font-size: 1.18em;
    line-height: 2.7em;
  }
  .about_inner {
    padding: 4em 0;
  }
  .policy3 {
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .policy3 div {
    width: 30%;
    margin: 0 0.5em;
  }
  .policy3 .two {
    margin-top: 2.5em;
  }
  .about .txt {
    text-align: center;
  }
  .about .txt::before {
    width: 12em;
    height: 12em;
    top: -85px;
    left: -25px;
  }
  .about .txt::after {
    width: 7em;
    height: 8em;
    top: 0;
    right: 0;
  }
  .policy3 .three::after {
    width: 11em;
    height: 11em;
    bottom: 50px;
    right: auto;
    left: calc(50% + 200px);
  }
}

@media print, screen and (min-width: 768px) {
  .policy3 div {
    width: 25%;
    margin: 0 auto;
  }
}

@media print, screen and (min-width: 1025px) {
  .policy3 div {
    margin: 0 2em;
  }
  .policy3 div img {
    border-width: 9px;
  }
  .about .txt::before {
    width: 15em;
    height: 15em;
    top: -105px;
    left: 50px;
  }
  .about .txt::after {
    width: 12em;
    height: 13em;
    top: -13px;
    right: -38px;
  }
}

/* ===================================
OTHER 子ども達
=================================== */

.other::before {
  content: "";
  width: 200px;
  height: 180px;
  position: absolute;
  top: -52px;
  left: 16px;
  background: url(../images/index/other_left.svg) left / contain no-repeat;
  z-index: 999;
  animation: move-y .7s infinite alternate ease-in-out;
  display: inline-block;
}

.other::after {
  content: "";
  width: 130px;
  height: 150px;
  position: absolute;
  top: -1px;
  right: 32px;
  background: url(../images/index/other_right.svg) left / contain no-repeat;
  z-index: 999;
  animation: move-y .8s infinite alternate ease-in-out;
  display: inline-block;
}

@media print, screen and (min-width: 1025px) {
  .other::before {
    width: 220px;
    height: 207px;
    top: -79px;
  }
  .other::after {
    width: 150px;
    height: 180px;
    top: -74px;
  }
}

@media print, screen and (min-width: 1500px) {
  .other::before {
    width: 260px;
    height: 250px;
    top: -139px;
    left: auto;
    right: calc(50% + 490px);
  }
  .other::after {
    width: 178px;
    height: 230px;
    top: -114px;
    right: auto;
    left: calc(50% + 570px);
  }
}

/* ===================================
OTHER
=================================== */

.other {
  width: 100%;
  padding: 9em 0 14em;
  display: block;
  position: relative;
  text-align: center;
  background-color: #fff;
  background-image: repeating-linear-gradient(0deg, #ffdcb1 0px 1px, transparent 1px 70px), repeating-linear-gradient(90deg, #ffdcb1 0px 1px, transparent 1px 70px);
}

.other_inner {
  display: flex;
  flex-wrap: wrap;
}

.other_inner .box {
  width: 80%;
  margin: 0 auto 1.5em;
  padding: 0.1em;
  display: block;
  color: #000;
  text-align: left;
  font-weight: 500;
  border: 2px solid #000;
  border-radius: 10px;
  background-color: #fff;
}

.other_inner .box:hover {
  transition: 1s;
  opacity: 0.7;
}

.other_inner .box:last-child {
  margin-bottom: 0;
}

.other_inner .box img {
  width: 100%;
  display: block;
  border-radius: 10px 10px 0 0;
}

.other_inner .box p {
  margin: 1em 0.5em;
  position: relative;
  vertical-align: middle;
}

.other_inner .box p::after {
  content: "";
  width: 2.5em;
  height: 2.5em;
  position: absolute;
  top: -2px;
  right: 0;
  background: url(../images/index/other_next.svg) left / contain no-repeat;
}

.other .link {
  font-family: "keifont";
  font-size: 1.1em;
  color: #fff;
  font-weight: normal;
  background-color: #FF4A4A;
  box-shadow: 0px 8px 0 #c5b4b4;
}

.other .link span::before {
  border-left-color: #fff;
}

.other_comment {
  width: 95%;
  height: 13em;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  bottom: -10px;
  text-align: left;
}

.other_comment img {
  width: 115px;
}

.other_comment p {
  width: 250px;
  margin-top: 1em;
  padding: 1.5em 0 1.5em 1em;
  position: relative;
  font-weight: 500;
}

.other_comment p span {
  color: #ff8000;
}

.other_comment p:before, .other_comment p::after {
  content: "";
  background: url(../images/index/other_illust_cmt.svg) left / contain no-repeat;
  width: 100%;
  height: 3px;
  position: absolute;
  left: -5px;
}

.other_comment p:before {
  top: -5px;
  transform: rotate(-8deg);
}

.other_comment p::after {
  bottom: -5px;
  transform: rotate(8deg);
}

@media print, screen and (min-width: 600px) {
  .other_inner .box {
    width: 60%;
  }
  .other_inner .box p::after {
    top: -6px;
  }
}

@media print, screen and (min-width: 768px) {
  .other_inner {
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .other_inner .box {
    width: 30%;
    margin: 0 auto;
    padding: 0.2em;
  }
  .other_inner .box:nth-child(2) {
    margin-top: -2em;
  }
  .other .link {
    font-size: 1.4em;
  }
}

@media print, screen and (min-width: 1025px) {
  .other {
    padding: 9em 0;
  }
  .other_inner .box p {
    margin: 1.2em 0.5em;
    font-size: 1.2em;
  }
  .other_comment {
    width: 28%;
    left: 10px;
    transform: none;
    -webkit-transform: none;
  }
}

@media print, screen and (min-width: 1450px) {
  .other_comment {
    height: 15.5em;
    left: auto;
    right: calc(50% + 261px);
  }
  .other_comment img {
    width: 140px;
  }
  .other_comment p {
    width: 100%;
    padding: 2em 0 2em 1em;
    margin-top: 2em;
    line-height: 1.8em;
  }
  .other_comment p span {
    font-size: 1.1em;
  }
}

/* ===================================
FACEBOOK & INFORMATION
=================================== */

.blue {
  padding-top: 3em;
  display: block;
}

.illust_blue img {
  display: none;
}

.fb_inner {
  width: 100%;
  padding-bottom: 10em;
  text-align: center;
  overflow: hidden;
}

.fb_inner h2 {
  margin-bottom: 1.2em;
}

.phone {
  width: 80%;
  max-width: 280px;
  margin: 0 auto;
  position: relative;
  border: 5px solid #333;
  border-radius: 20px;
  background-color: #E6E6E6;
}

.phone::before {
  content: "";
  width: 100px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url(../images/index/facebook_mobile.svg) center / contain no-repeat;
}

.fb_frame {
  width: 90%;
  max-width: 450px;
  height: 335px;
  margin: 3em auto;
  position: relative;
  background-color: #fff;
  border: 5px solid #333;
  border-radius: 10px;
  overflow: hidden;
}

@media print, screen and (min-width: 600px) {
  .fb_inner h2::before {
    margin-right: 0.3em;
  }
  .illust_blue {
    width: 100%;
    height: 262px;
    position: absolute;
    top: -50px;
    overflow: hidden;
    pointer-events: none;
  }
  .illust_blue img {
    display: block;
    position: absolute;
  }
  .illust_blue .deco_01 {
    width: 150px;
    height: 150px;
    top: 13px;
    left: 20px;
    z-index: 99;
  }
  .illust_blue .deco_02 {
    width: 150px;
    height: 150px;
    top: -17px;
    right: 20px;
    z-index: 99;
  }
}

@media print, screen and (min-width: 768px) {
  .blue {
    padding-top: 4em;
  }
  .phone {
    max-width: 340px;
  }
  .fb_inner {
    padding-bottom: 0;
  }
  .fb_inner .fb_frame {
    height: 450px;
  }
}

@media print, screen and (min-width: 1400px) {
  .illust_blue .deco_01 {
    width: 190px;
    height: 190px;
    top: 70px;
    left: auto;
    right: calc(50% + 600px);
  }
  .illust_blue .deco_02 {
    width: 230px;
    height: 190px;
    right: auto;
    left: calc(50% + 600px);
  }
}