@charset "UTF-8";
main {
  background-color: #ffffcc;
}

/*====================================================
 top-wrapper
 ====================================================*/
#top-wrapper {
  background-image: url("../img/index.png");
  background-position: center 40px;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 800px;
  position: relative;
  background-color: white;
}
#top-wrapper .slogan {
  position: absolute;
  top: 42%;
  left: min(300px, 25vw);
}
#top-wrapper .slogan h1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 800;
}
#top-wrapper .slogan h1 span {
  font-size: 1.4em;
}
#top-wrapper .slogan p {
  padding: 20px 0;
  color: #484848;
}
#top-wrapper .slogan .title_moji {
  display: grid;
  grid-template-columns: minmax(0, 180px);
  margin-right: 0.5em;
}
#top-wrapper .slogan .title_moji img {
  max-width: 40px;
}
#top-wrapper .slogan .title_moji .kakko {
  justify-self: left;
  margin-bottom: -0.5em;
}
#top-wrapper .slogan .title_moji .hanten {
  justify-self: right;
  transform: rotate(180deg);
  margin-top: -0.5em;
}
#top-wrapper .slogan .title_moji div {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  row-gap: 0.25em;
  line-height: 1;
}
#top-wrapper .slogan .title_moji div .sub {
  font-size: 1em;
}
#top-wrapper .slogan .title_moji div .name {
  font-size: 4.5em;
}
#top-wrapper .slogan .phone_slogan {
  display: none;
}
#top-wrapper .slogan .btn_box {
  display: flex;
  justify-content: space-between;
}
#top-wrapper .slogan .btn_box span {
  display: inline-block;
  width: calc(50% - 20px);
  background-color: rgb(247, 135, 135);
  border-radius: 4px;
  text-align: center;
  padding: 10px 0;
  color: white;
  font-weight: 700;
}
#top-wrapper .link {
  line-height: 1.5em;
  background-color: #6699cc;
  border-radius: 50%;
  width: 145px;
  height: 145px;
  position: absolute;
  top: 20%;
  right: min(400px, 22.2222222222vw - 2%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
}
#top-wrapper .link a {
  color: white;
  text-align: center;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 145px);
  justify-content: center;
  align-items: center;
}
#top-wrapper .active {
  background-color: #2b4e71;
  transition: all 0.5s;
}

/*====================================================
 main-wrapper
 ====================================================*/
#main-wrapper,
#main-wrapper2,
#main-wrapper3 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#main-wrapper .background-wrapper,
#main-wrapper2 .background-wrapper,
#main-wrapper3 .background-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 共通の円 */
  /* 薄い青い円 */
  /* 濃い青い円 */
}
#main-wrapper .background-wrapper .circle,
#main-wrapper2 .background-wrapper .circle,
#main-wrapper3 .background-wrapper .circle {
  position: absolute;
}
#main-wrapper .background-wrapper .circle--light,
#main-wrapper2 .background-wrapper .circle--light,
#main-wrapper3 .background-wrapper .circle--light {
  width: min(1350px, 95vw);
  background-color: #99ccff; /* lightblue */
  top: max(200px, 5vw);
  right: max(-400px, -20vw);
}
#main-wrapper .background-wrapper .circle--dark,
#main-wrapper2 .background-wrapper .circle--dark,
#main-wrapper3 .background-wrapper .circle--dark {
  width: min(1350px, 95vw);
  background-color: #6699cc; /* steelblue */
  top: min(150px, 6vw);
  left: max(-150px, -3vw);
}
#main-wrapper .background-wrapper .bird,
#main-wrapper2 .background-wrapper .bird,
#main-wrapper3 .background-wrapper .bird {
  position: absolute;
  right: max(50px, 2vw);
  top: 1vw;
  z-index: 3;
  max-width: 300px;
}

/*====================================================
 motto
 ====================================================*/
#motto {
  width: 100%;
  font-weight: 700;
}
#motto .container {
  display: grid;
  grid-template-areas: "motto motto children children children" "motto motto children children children" ".  .  children children children" ".  .  hope hope hope" "hope2 hope2 hope2 portrait portrait" ".  .  .  link .  ";
  grid-template-columns: repeat(5, minmax(0, 20vw));
  grid-template-rows: min(280px, 30vw) min(280px, 30vw);
  grid-auto-rows: min(200px, 20vw);
  grid-auto-flow: column;
  padding-top: min(180px, 15vw);
  margin-bottom: 2em;
}
#motto .motto {
  z-index: 999;
  grid-area: motto;
  display: flex;
  flex-flow: column;
  justify-content: center;
  row-gap: 2em;
  width: -moz-fit-content;
  width: fit-content;
  align-self: start;
  justify-self: center;
  grid-row: 1/3;
}
#motto .motto .title span {
  color: #f6dd5a;
}
#motto .motto ul {
  display: flex;
  justify-content: space-around;
  width: -moz-fit-content;
  width: fit-content;
  -moz-column-gap: 1em;
       column-gap: 1em;
  letter-spacing: 0.2em;
}
#motto .motto ul li {
  position: relative;
  font-size: 1.2em;
  line-height: 1.1em;
  width: 1.5em;
  text-align: center;
  color: white;
}
#motto .motto ul li .icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 auto 0.5em auto;
  background-image: url(../img/face-smile-regular.svg);
  background-size: cover;
  filter: invert(100%) sepia(1%) saturate(0%) hue-rotate(177deg) brightness(102%) contrast(102%);
}
#motto .motto ul li .text {
  display: block;
  color: white;
  height: 20em;
  margin-left: 0.15em;
}
#motto .children {
  z-index: 2;
  grid-area: children;
  max-width: 700px;
  display: block;
  border-radius: 20px;
  width: 100%;
  justify-self: right;
  align-self: center;
  margin-top: 6em;
}
#motto .hope {
  background-color: #d8eefb;
  color: #336699;
  z-index: 3;
  padding: 2% 4%;
  display: flex;
  flex-flow: column;
  row-gap: 2em;
  border-radius: 20px;
  max-width: 1000px;
  height: -moz-fit-content;
  height: fit-content;
  justify-self: center;
  grid-column: 1/6;
  grid-row: 3/6;
  margin-top: 3em;
}
#motto .hope ul {
  display: flex;
  justify-content: center;
  -moz-column-gap: 2em;
       column-gap: 2em;
}
#motto .hope ul li {
  background-color: #ff9933;
  color: white;
  padding: 0.5em 2em;
  border-radius: 20px;
}
#motto .hope2 {
  color: white;
  z-index: 6;
  grid-area: hope2;
  grid-column: 1/5;
  grid-row: 4/6;
  align-self: center;
  justify-self: center;
}
#motto .hope2 span {
  font-size: 2em;
}
#motto .hope2 p {
  font-size: 1.2em;
}
#motto .portrait {
  grid-column: 4/6;
  grid-row: 4/6;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  max-width: 280px;
  width: 100%;
  max-height: 280px;
  height: 100%;
  background-image: url("../teacher/img/teacher_1.png");
  background-size: cover;
  background-repeat: no-repeat;
  border: 12px solid #99ccff;
  border-radius: 50%;
  z-index: 6;
  text-align: center;
  color: white;
  align-self: start;
  justify-self: center;
  margin-top: 20px;
  position: relative;
}
#motto .portrait span {
  background-color: #fff;
  padding: 0.25em 1em;
  color: #336699;
  border-radius: 20px;
  position: absolute;
  bottom: 1em;
  right: 0;
}
#motto .link {
  line-height: 1.5em;
  background-color: #6699cc;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  z-index: 7;
  right: calc(25vw - 2%);
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 4/5;
  grid-row: 5/7;
  align-self: end;
  transition: all 0.5s;
}
#motto .link a {
  color: white;
  text-align: center;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 200px);
  justify-content: center;
  align-items: center;
}
#motto .link.active {
  background-color: #2b4e71;
  transition: all 0.5s;
}

/*====================================================
 features
 ====================================================*/
#features {
  margin-bottom: 2%;
}
#features .container {
  display: grid;
  grid-template-areas: "title title" "link_box f_up_box";
  grid-template-columns: min(600px, 60vw) minmax(0px, 40vw);
  grid-template-rows: min(200px, 20vw) min(700px, 60vw);
  grid-auto-rows: max(100px, 20vw);
  grid-auto-flow: column;
}
#features .title {
  grid-area: title;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  justify-self: center;
  grid-column: 1/2;
}
#features .title h2 {
  color: #5892be;
}
#features .title span {
  color: #f08518;
  font-weight: 700;
}
#features .link_box {
  grid-area: link_box;
  position: relative;
  display: grid;
  height: min(600px, 60vw);
}
#features .link_box img {
  border-radius: 50%;
  border: 12px solid #99ccff;
}
#features .link_box .book {
  z-index: 2;
  justify-self: center;
}
#features .link_box .soroban {
  z-index: 3;
  justify-self: right;
  align-self: end;
}
#features .link_box .link {
  align-self: end;
  line-height: 1.5em;
  width: 250px;
  height: 250px;
  background-color: #6699cc;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  transition: all 0.5s;
}
#features .link_box .link a {
  color: white;
  text-align: center;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 250px);
  justify-content: center;
  align-items: center;
}
#features .link_box .link.active {
  background-color: #2b4e71;
  transition: all 0.5s;
}
#features .link_box .flower {
  border: none;
  border-radius: 0;
  max-width: 100px;
  max-height: 125px;
  justify-self: end;
}
#features .child {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  grid-area: 1/1;
}
#features .f_up_box {
  grid-area: f_up_box;
  position: relative;
  display: grid;
  height: min(700px, 60vw);
}
#features .f_up_box .f_up {
  position: absolute;
  display: grid;
  grid-template-columns: minmax(0, auto);
  grid-template-rows: minmax(0, auto);
  grid-auto-rows: 50px;
  text-align: center;
  row-gap: 2em;
}
#features .f_up_box .f_up h3 {
  color: #6699cc;
  font-size: 2em;
  justify-self: start;
}
#features .f_up_box .f_up h3 .title_h3 {
  font-size: 0.7em;
  margin-left: -0.3em;
}
#features .f_up_box .f_up h3 .number {
  color: #ffffcc;
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  background-color: #6699cc;
  border-radius: 4px;
  margin-right: 0.5em;
}
#features .f_up_box .f_up h3 .caution {
  display: block;
  width: 80%;
  font-size: 0.5em;
}
#features .f_up_img {
  position: relative;
  background-color: #fff;
  border: 2px solid #ff6666;
  border-radius: 10px;
  justify-self: end;
  align-self: center;
  max-width: 200px;
  width: 100%;
  padding: 10px 5px;
}
#features .f_up_img span {
  color: #ff6666;
  font-size: 1.2em;
  font-weight: bold;
}
#features .f_up_img img {
  position: absolute;
  bottom: -15px;
  right: -40px;
  max-width: 100px;
}
#features .f_1 {
  justify-self: start;
  margin-left: min(1em, 5vw);
  margin-top: 3em;
  height: 150px;
}
#features .f_2 {
  justify-self: start;
  align-self: center;
  margin-left: min(2em, 5vw);
  height: 150px;
}
#features .bird_2 {
  max-width: 200px;
  align-self: end;
  justify-self: center;
}

/*====================================================
 purpose
 ====================================================*/
#purpose {
  background-color: #6699cc;
  border: 50px solid #99ccff;
  height: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  margin: 0 auto 100px auto;
}
#purpose .container {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: minmax(0, 1200px);
  row-gap: 1em;
  text-align: center;
  position: relative;
}
#purpose .container img {
  margin: auto;
  max-width: 400px;
}
#purpose .container p {
  color: white;
}
#purpose .container .dot {
  font-weight: bold;
  color: #fff;
}
#purpose .container .title span {
  color: #ffcc66;
}
#purpose .container .purpose_box {
  background-color: #fff;
  border-radius: 4px;
  max-width: 500px;
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: minmax(0, 100%);
  align-items: center;
  color: #6699cc;
  margin: 1em auto;
  width: 100%;
}
#purpose .container .purpose_box span {
  font-size: 1.2em;
}
#purpose .container .purpose_box .red {
  font-size: 2em;
  color: red;
}
#purpose .container .leaf {
  position: absolute;
  bottom: -20px;
  right: -140px;
  max-width: 160px;
}

/*====================================================
 footer
 ====================================================*/
footer {
  background-image: url("../img/footer.png");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 1920px;
  width: 100%;
  height: 430px;
  margin: 0 auto;
  font-weight: 700;
}
footer .footer_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: absolute;
  width: 100%;
  bottom: 20px;
  margin-bottom: 20px;
}
footer .footer_inner .f_title_logo {
  width: calc(50% - 10px);
}
footer .footer_inner .f_nav {
  display: flex;
  width: calc(50% - 10px);
  justify-content: center;
  -moz-column-gap: 2em;
       column-gap: 2em;
  color: #6699cc;
  align-self: end;
  margin-bottom: 1em;
}
footer .footer_inner .f_nav ul {
  display: flex;
  justify-content: center;
  -moz-column-gap: 2em;
       column-gap: 2em;
}
footer .footer_inner .f_info {
  width: 100%;
  display: flex;
  justify-content: center;
  -moz-column-gap: 2em;
       column-gap: 2em;
  padding: 1em 2em;
  margin-bottom: 1em;
}
footer .footer_inner .f_info span {
  color: #286491;
}
footer .footer_inner .fa-location-pin {
  color: #336699;
  font-size: 1.2em;
  position: relative;
  background-color: transparent;
}
footer .footer_inner .fa-phone {
  font-size: 1em;
  background-color: #336699;
  padding: 0.25em;
}
footer .copyright {
  position: absolute;
  bottom: 0;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #6699cc;
  width: 100%;
}
footer .copyright span {
  color: white;
}
footer .copyright:before {
  content: "";
  max-width: 830px;
  width: 100%;
  height: 16px;
  position: absolute;
  top: -16px;
  left: 0;
  background-image: url(../img/bottom_line.png);
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(-1, 1);
}/*# sourceMappingURL=top_page.css.map */