@charset "UTF-8";
/* CSS Document */ :root {
  --fnt-base: 'Zen Maru Gothic', "Hiragino Maru Gothic Pro", "Hiragino Kaku Gothic Pro", "Yu Gothic", sans-serif;
  --fnt-done: 'Darumadrop One', var(--fnt-base);
  --wall-grn: #1B8834;
  --wall-org: #DF712D;
  --wall-ylw: #FFF95C;
  --wall-blk: #1E1E1E;
  --wall-lgrn: #CAE557;
  --in-out: cubic-bezier(1, 0, 0, 1);
  --easing: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --transit: .3s var(--easing);
}
/*Common 
===============================================================*/
body {
  font-family: var(--fnt-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  font-size: min(15px, 3.6vw);
  font-weight: 400;
  width: 100%;
}
.inner {
  width: min(1200px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: min(50px, 6vw);
  padding-right: min(50px, 6vw);
}
.fl {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.fl_c {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.ai_c {
  -ms-align-items: center;
  align-items: center;
}
.jc_c {
  justify-content: center;
}
.spView {
  display: none;
}
.fnt-done {
  font-family: var(--fnt-done);
}
a.cvr {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
/*header/nav  
===============================================================*/
/*SPButton
====================*/
#hum-btn {
  width: min(100px, 14.13vw);
  aspect-ratio: 1;
  position: fixed;
  top: min(30px, 4vw);
  right: min(30px, 3vw);
  z-index: calc(infinity);
  border-radius: 100vmax;
  background-color: var(--wall-grn);
  border: 3px solid #000;
  transition: all .3s;
  cursor: pointer;
}
#hum-btn button {
  position: absolute;
  top: calc(50% - min(5px, .75vw));
  left: 50%;
  translate: -50% -50%;
  display: block;
  background-color: #000;
  width: 27%;
  height: 3px;
  padding: 0;
  margin: 0;
  border: none;
  box-sizing: border-box;
  border-radius: 3px;
  transition: all .3s;
}
#hum-btn button::before {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background-color: #000;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
#hum-btn button::before {
  top: min(10px, 1.5vw);
}
#hum-btn.open {
  border-color: #fff;
}
#hum-btn.open button {
  rotate: 45deg;
  top: 50%;
  background-color: #fff;
}
#hum-btn.open button::before {
  top: 0;
  rotate: 90deg;
  background-color: #fff;
}
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
#l-nav {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 100dvh;
  top: 0;
  left: 0;
  transition: all .3s;
  
  z-index: 9;
  color: #fff;
  overflow-y: scroll;
}
#l-nav::before{
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--wall-grn);
  position: fixed;
  right: 0;
  top: 0;
}
#l-nav.is-open {
  opacity: 1;
  visibility: visible;
}
.l-nav-inner {
  min-height: 100%;
  display: grid;
  grid-template-columns: 100%;
  -ms-align-items: center;
  align-items: center;
  align-self: flex-start;
  padding-top: min(100px, 25vw);
  padding-bottom: min(100px, 15vw);
}
.l-nav-inner > div{
  width: 100%;
  display: grid;
  -ms-align-items: flex-end;
  align-items: flex-end;
  grid-template-columns: auto 37%;
}
#l-nav-menu li:nth-child(n+2) {
  margin-top: min(40px, 5vw);
}
#l-nav-menu li a {
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  font-weight: 700;
  font-size: min(16px, 3.6vw);
  gap: 10px;
}
#l-nav-menu li a .en {
  font-size: min(40px, calc(100vw/12));
  font-family: var(--fnt-done);
}

.l-nav-button {
  margin-top: min(50px, 5vw);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
}
.l-nav-button a {
  width: min(410px, 100%);
  height: min(90px, 20vw);
  display: grid;
  place-content: center;
  background: url("../images/nav/wave-button.svg") no-repeat center/100%;
  background-color: var(--wall-org);
  -webkit-mask-image: url("../images/nav/wave-button.svg");
  mask-image:url("../images/nav/wave-button.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-position:center;
  mask-position:center;
}
.l-nav-button a::before{
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--wall-ylw);
  position: absolute;
  top: 0;
  left: 0;
  scale:0 1;
  transition:scale .5s var(--easing);
  transform-origin: left center;
}
.l-nav-button a span {
  font-size: min(20px, 4.2vw);
  padding-right: 2em;
  font-weight: 700;
  translate:0 -1px;
}
.l-nav-button a span::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  background-image: url("../images/arrow.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 1.2em;
  aspect-ratio: 1 / 0.519;
  transition: all var(--transit);
  transform-origin: left center;
}
@media(hover) {
  #l-nav-menu li a:hover .en {
    rotate: -8deg;
  }
  .l-nav-button a:hover{
    color: var(--wall-org);
  }
  .l-nav-button a:hover span::before {
    background-image: url(../images/hvr-arrow_org.svg);
    width: 1.5em;
    aspect-ratio: 1 / 0.4545;
    translate: 40% -50%;
  }
  .l-nav-button a:hover::before{
    scale:1 1;
  }
}
.l-button-area {
  gap: min(70px, 10vw);
}
.l-button-area .map-button {
  flex: 1;
}
.map-button {
  width: min(360px, 53vw);
}
.map-button a {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: 50%;
  place-content: center;
  background-color: var(--wall-ylw);
  border-radius: 100vmax;
}
.map-button a::after {
  content: "";
  width: 130%;
  background: url("../images/nav/button-forest.png") no-repeat center/cover;
  aspect-ratio: 1/0.279;
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
}
.map-button .pic-bird {
  top: 0;
  left: 0;
  width: min(120px, 14vw);
  scale: -1 1;
  translate: -50% 25%;
}
.l-button-area .address {
  width: 100%;
  font-weight: 700;
}
.l-button-area .address .in-title {
  font-size: min(24px, 5vw);
}
.l-button-area .address p {
  margin-top: 1em;
  line-height: calc(28/14);
}
@media(hover) {
  .map-button a:hover span {
    rotate: -8deg;
  }
  .map-button a:hover::after {
    translate: -50% -5%;
  }
}
/*header
====================*/
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: min(25px, 6vw) min(30px, 3vw);
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  z-index: 10;
  pointer-events: none;
}
.h-logo {
  width: min(140px, 23vw);
  pointer-events: auto;
}
.h-logo::after{
  content: "";
  width: min(70px, 10vw);
  aspect-ratio:1/0.7968;
  position: absolute;
  background: url("../images/pic/hana.png") no-repeat center/cover;
  bottom: max(-20px,-3vw);
  left: 0;
  translate: 0 100%;
}
/*Navi
====================*/
/*Container 
===============================================================*/ :root {
  --head-pad: 555px;
  --head-asp: 1/.3854;
}
#container {
  width: 100%;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#container::-webkit-scrollbar{
  display:none;
}
#container::before {
  content: "";
  width: 100%;
  aspect-ratio: var(--head-asp);
  min-height: var(--head-pad);
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("../images/hero_main.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}
.hero-pic-area {
  width: 100%;
  min-height: var(--head-pad);
  aspect-ratio: var(--head-asp);
}
.pos-pic {
  position: absolute;
}
.pic-globe {
  width: min(55px, 12vw);
  top: 50%;
  left: clamp(-4.375rem, -8.92rem + 22.73vw, 7.125rem);
  translate: 50% 50%;
}
.pic-leaf {
  width: min(58px, 10vw);
  top: 28%;
  left: clamp(3.75rem, -0.114rem + 19.32vw, 11.375rem);
  scale: -1 1;
  translate: 0 0;
}
.pic-leaf2 {
  width: min(45px, 8vw);
  top: 20%;
  right: clamp(3.75rem, -0.114rem + 19.32vw, 20.375rem);
  translate: 100% 0;
}
.pic-kumo {
  width: min(100px, 12vw);
  top: 45%;
  right: clamp(1.25rem, -1.705rem + 14.77vw, 9.375rem);
  translate: 100% 0;
}
.pic-bag {
  width: min(90px, 10vw);
  top: 72%;
  right: min(270px, 15vw);
}
/*main
===============================================================*/
main {
  background: linear-gradient(rgba(255, 255, 255, 0) calc(100vw * 0.075), rgba(255, 255, 255, 1) calc(100vw * 0.075));
  position: relative;
  margin-top: calc(-100vw * 0.081);
}
.hero-pic-area {
  background-image: url("../images/wall/mountain.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
  pointer-events: none;
}
/*hero
=====================================*/
#hero {
  width: 100%;
  padding-top: min(70px, 10vw);
}
#hero::before {
  content: "";
  width: min(72px, 15vw);
  background: url("../images/pic/hooray.png") no-repeat center/cover;
  position: absolute;
  top: 0;
  left: 58%;
  aspect-ratio: 1/0.9686;
  rotate: 10deg;
  translate: 0 -10%;
}
.hero_inner {
  display: grid;
  grid-template-columns: min(674px, 73vw);
  place-content: center;
  height: 100%;
  padding-bottom: calc((100vw*0.1067) + min(40px, 12vw));
}
.hero_text {
  scale: 1.025;
  translate: 0 -30%;
}
.hero_title .pic-bus {
  width: min(136px, 25vw);
  scale: -1 1;
  left: -100%;
  top: 0;
  translate: -120% -70%;
  transition: left 4s;
  rotate: -14deg;
}
.hero_title .pic-bus.is-visible {
  left: 0;
}
.hero_inner .pic-tracks {
  height: min(255px, 35vw);
  aspect-ratio: 1/1.6142;
  left: 100%;
  top: 0;
  rotate: 65deg;
  translate: -100% -3%;
}
.hero_inner .pic-tracks img {
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.hero_title .poc-locus {
  aspect-ratio: 1/0.755;
  width: min(360px, 45vw);
  top: 20%;
  left: 0;
  translate: -75% 0;
}
/*Content
=========================================================================*/
#content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100vw + 2px);
  background: url("../images/wall/wave_green.svg") no-repeat top center/cover;
  aspect-ratio: 1/0.1067;
  translate: -50% calc(-100% + 1px);
}
.top-text {
  font-size: min(18px, 3.7vw);
  font-weight: 700;
  line-height: calc(32/14);
  text-align: center;
}
/*title setting*/
.sec-title {
  font-size: min(37.25px, calc(100vw/15));
}
.round-title {
  width: 100%;
}
.round-title::before, .round-title::after {
  content: "";
  height: calc(50% - 3px);
  aspect-ratio: 1;
  border: 3px solid var(--wall-blk);
  background-color: var(--wall-org);
  position: absolute;
}
.round-title::before {
  left: 0;
  top: 0;
}
.round-title::after {
  bottom: 0;
  right: 0;
}
.round-title > span {
  display: grid;
  height: min(60px, 14vw);
  place-content: center;
  border: 3px solid var(--wall-blk);
  border-radius: 100vmax;
  font-size: min(24px, calc(100vw/20));
  font-weight: 700;
  z-index: 2;
  line-height: 1;
}
.round-title > span > span{
  translate:0 -1px;
}
.round-title.wht > span {
  background-color: #fff;
}
.round-title.ylw > span {
  background-color: var(--wall-ylw);
}
/*button setting*/
.rect-button {
  width: min(360px, 67vw);
}
.rect-button a {
  display: grid;
  height: min(80px, 12vw);
  width: 100%;
  place-content: center;
  background-color: var(--wall-blk);
  border-radius: 10px;
  color: #fff;
  font-size: min(20px, 4.8vw);
  font-weight: 700;
  letter-spacing: .05em;
  overflow: hidden;
}
.rect-button a::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--wall-org);
  position: absolute;
  left: 0;
  top: 50%;
  translate: -100% -50%;
  transition: translate var(--transit);
}
.rect-button a::after {
  content: "";
  width: 1.2em;
  aspect-ratio: 1/0.519;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("../images/arrow.svg");
  position: absolute;
  right: 1em;
  top: 50%;
  translate: 0 -50%;
  transition: all var(--transit);
  z-index: 1;
  transform-origin: left center;
}
.rect-button a > span{
  translate:0 -1px;
}
.rect-button.wht a {
  background: #fff;
  color: var(--wall-org);
}
.rect-button.wht a::before {
  background-color: var(--wall-ylw);
}
.rect-button.wht a::after {
  background-image: url("../images/arrow_org.svg");
}
@media(hover) {
  .rect-button a:hover::before {
    translate: 0 -50%;
  }
  .rect-button a:hover::after {
    translate: 15% -50%;
    background-image: url("../images/hvr-arrow.svg");
    width: 1.5em;
    aspect-ratio: 1/0.4545;
  }
  .rect-button.wht a:hover::after {
    background-image: url("../images/hvr-arrow_org.svg");
  }
}
/*intro
=============================================================*/
.sec-intro-blc {
  background-color: var(--wall-grn);
  padding-top: min(80px, 19.5vw);
  background: linear-gradient(var(--wall-grn) 60%, #fff 60%);
}
.sec-intro-blc .pic-kid {
  top: 0;
  left: clamp(1.25rem, -3.682rem + 24.66vw, 14.813rem); /*20-237*/
  width: min(125px, 20vw);
  translate: 0 -85%;
}
/*
.sec-intro-blc .pic-kid::before {
  content: "";
  width: 250%;
  aspect-ratio: 1/0.755;
  background: url("../images/pic/locus.png") no-repeat center/cover;
  position: absolute;
  bottom: 0;
  right: 80%;
  translate: 0 -60%;
}
*/
.box-intro_comment {
  display: grid;
  grid-template-columns: auto;
  place-items: center;
  gap: min(40px, 10.5vw);
  color: #fff;
  padding-bottom: min(180px, 40vw);
}
.sec-intro-title {
  width: min(596px, 56vw);
}
.sec-intro-title .pic-sun {
  width: min(70px, 12.5vw);
  aspect-ratio: 1/1.0556;
  position: absolute;
  top: 0;
  left: 0;
  translate: -100% -50%;
}
.sec-intro-title .pic-tree {
  top: 0;
  right: 0;
  width: min(130px, 16.5vw);
  translate: 120% -110%;
}
.box-intro_comment .pic-grass {
  bottom: min(160px, 18vw);
  left: 0;
  width: min(58px, 9.6vw);
}
/*map +++++++++++++++++++*/
.box-intro_map .map-title {
  position: absolute;
  width: min(263px, 18%);
  z-index: 1;
  top: 0;
  left: 27%;
  translate: 0 -70%;
}
.box-intro_map .pic-bird {
  width: min(125px, 17vw);
  bottom: 22.5%;
  left: 16%;
  opacity: 0;
}
.box-intro_map .pic-bird img {
  scale: -1 1;
  rotate: 10deg;
}
.box-intro_map .pic-bird.is-visible {
  opacity: 1;
  animation: slidein 2s ease-in-out forwards;
}
.map-area {
  position: relative;
  display: block;
}
.map-area::before {
  content: "";
  width: 16%;
  aspect-ratio: 1/2.1657;
  position: absolute;
  top: 0;
  right: 21.5%;
  translate: 0 -54%;
  z-index: 1;
  background-image: url("../images/pic/tracks_long.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.map-area::after {
  content: "";
  height: min(244px, 40vw);
  aspect-ratio: 1/1.6142;
  background: url("../images/pic/tracks.png") no-repeat center/cover;
  position: absolute;
  bottom: 0;
  left: min(clamp(7.125rem, 1.239rem + 29.43vw, 23.313rem), 30vw);
  translate: 0 40%;
  scale: -1 1;
  rotate: -40deg;
  z-index: 1;
}
.map-mdl-open {
  cursor: pointer;
}
.map-title-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  pointer-events: none;
}
.map-pin {
  position: absolute;
  width: min(72px, 12vw);
  pointer-events: auto;
  cursor: pointer;
}
.map-pin {
  opacity: 0;
  transition: opacity .3s ease, scale .3s ease;
}
.map-pin.is-view {
  opacity: 1;
}
.map-pin.is-view img {
  animation: guwang 2s infinite;
  animation-timing-function: linear;
  transform-origin: center;
}
/*pin*/
.map-pin_garden {
  top: 13.5%;
  right: 20.5%;
}
.map-pin_gym {
  top: 47%;
  left: 21%;
}
.map-pin_callyroom {
  top: 36.5%;
  left: 30%;
}
.map-pin_learning {
  top: 30.5%;
  left: 45%;
}
.map-pin_classroom {
  top: 27%;
  right: 36%;
}
.map-pin_rooftop {
  top: 26%;
  right: 25%;
}
.map-pin_hall {
  right: 15.5%;
  top: 38%;
}
.map-pin_ground {
  top: 50%;
  left: 46%;
}
.map-pin_forest {
  right: 35%;
  bottom: 25%;
}
.map-pin:hover {
  scale: 1.1;
}
.map-pin img {
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.map-pin:hover img, .map-pin.active img {
  animation: none;
}
.map-pin::before {
  content: attr(data-alt);
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -150%;
  z-index: 1;
  white-space: nowrap;
  font-size: min(10px, 2.8vw);
  background: rgba(255, 255, 255, .8);
  padding: 5px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity .3s;
  font-weight: 600;
}
@media(hover) {
  .map-pin.active::before, .map-pin:hover::before {
    opacity: 1;
  }
}
/*modal +++++*/
.mdl-contents {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(6px);
  z-index: calc(infinity);
}
.mdl-contents-wrap {
  height: 100%;
  display: grid;
  overflow: hidden;
  align-content: start;
  grid-template-columns: min(580px, 100%);
  place-content: center;
  padding: min(130px, 15vw) min(50px, 5vw);
}
.js-mdl-close {
  position: absolute;
  bottom: -1px;
  right: 0;
  width: min(60px, 12vw);
  aspect-ratio: 1;
}
#map-mdl__learning {
  --item-clr: var(--wall-org);
}
#map-mdl__garden {
  --item-clr: #B7E05A;
}
#map-mdl__hall {
  --item-clr: #FFB5B5;
}
#map-mdl__ground {
  --item-clr: #78BFB4;
}
#map-mdl__rooftop {
  --item-clr: #2BB8D9;
}
#map-mdl__classroom {
  --item-clr: #EFD0A7;
}
#map-mdl__forest {
  --item-clr: #67B151;
}
#map-mdl__callyroom {
  --item-clr: #9ABCEB;
}
#map-mdl__gym {
  --item-clr: #FDD95E;
}
.mdl-map-contents {
  padding-bottom: min(55px, 15vw);
}
.mdl-map-contents::before {
  content: "";
  width: 100%;
  height: calc(100% - min(77px, 17vw));
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--item-clr);
  border-radius: min(40px, 10vw) min(40px, 10vw) 0 min(40px, 10vw);
}
.mdl-thumb {
  width: min(440px, 75%);
  margin-left: auto;
  margin-right: auto;
}
.mdl-thumb .thumb {
  border-radius: min(40px, 10vw);
  overflow: hidden;
  border: min(10px, 1.5vw) solid var(--item-clr);
  aspect-ratio: 1/0.5455;
}
.mdl-thumb .thumb img {
  object-fit: cover;
  height: 100%;
  object-position: center bottom;
}
.mdl-thumb .thumb img.op-cnt{
  object-position: center;
}
.mdl-thumb .pic-ex {
  left: 0;
  top: 0;
  width: min(70px, 14vw);
  translate: -50% 50%;
  z-index: 1;
  rotate: -35deg;
}
.mdl-explan {
  padding-left: min(70px, 6vw);
  padding-right: min(70px, 6vw);
  margin-top: min(25px, 10vw);
  font-weight: 700;
  max-height: 80svh;
  overflow-y: scroll;
  z-index: 1;
}
.mdl-explan .in-title {
  font-size: min(22px, calc(100vw/18.75));
  text-align: center;
}
.mdl-explan .in-text {
  line-height: calc(27/15);
  letter-spacing: .05em;
  text-indent: .05em;
  margin-top: 1em;
}
#map-mdl__learning .pic-top {
  width: min(145px, 30vw);
  right: 0;
  bottom: 0;
  translate: 10% 10%;
  rotate: 15deg;
}
#map-mdl__learning .pic-btm {
  width: min(90px, 20vw);
  left: 0;
  bottom: 0;
  translate: -35% -20%;
}
#map-mdl__garden .pic-top {
  bottom: 0;
  left: 50%;
  width: 100%;
  translate: -50% 25%;
}
#map-mdl__garden .pic-btm {
  width: min(100px, 18vw);
  translate: -70% 10%;
}
#map-mdl__garden .pic-btm::before {
  content: "";
  background: url("../images/map/jump.png") no-repeat center/cover;
  width: 100%;
  aspect-ratio: 1/0.2925;
  position: absolute;
  right: 0;
  top: 10%;
  translate: 110% 0;
}
#map-mdl__hall .pic-top {
  bottom: 0;
  right: 0;
  width: min(170px, 30vw);
  translate: 10% 20%;
}
#map-mdl__hall .pic-btm {
  bottom: 0;
  left: 0;
  width: min(110px, 20vw);
  translate: -10% 30%;
}
#map-mdl__ground .pic-left {
  width: min(160px, 25vw);
  bottom: 0;
  left: 0;
  translate: -50% 40%;
}
#map-mdl__ground .pic-right {
  bottom: 0;
  right: 0;
  width: min(70px, 10vw);
  translate: 50% 20%;
}
#map-mdl__rooftop .pic-top {
  width: min(100px, 20vw);
  top: 0;
  right: 0;
  translate: -10% -50%;
  rotate: 25deg;
}
#map-mdl__rooftop .pic-top2 {
  bottom: 0;
  width: 45%;
  right: 0;
  translate: 20% 10%;
}
#map-mdl__rooftop .pic-btm {
  width: min(130px, 25vw);
  bottom: 0;
  right: 0;
  translate: -100% 45%;
}
.anime-sun {
  animation: sun-breathe 2.5s ease-in-out infinite;
}
@keyframes sun-breathe {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.15);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.15);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
#map-mdl__classroom .pic-top {
  right: 0;
  bottom: 0;
  width: min(100px, 16vw);
  translate: 20% 40%;
}
#map-mdl__classroom .pic-btm {
  left: 0;
  bottom: 0;
  width: min(250px, 42vw);
  translate: -40% 40%;
}
#map-mdl__forest .pic-top {
  top: 0;
  right: 0;
  width: min(95px, 20vw);
  translate: 25% 25%;
}
#map-mdl__forest .pic-btm {
  bottom: 0;
  left: 0;
  width: min(140px, 25vw);
  translate: -55% 20%;
}
#map-mdl__callyroom .pic-top {
  right: 0;
  bottom: 0;
  width: min(60px, 15vw);
  translate: 45% 30%;
  rotate: -5deg;
}
#map-mdl__callyroom .pic-btm {
  width: min(130px, 24vw);
  bottom: 0;
  left: 0;
  translate: -15% 50%;
}
#map-mdl__callyroom .pic-top img {
  transform-origin: top 20% center;
}
#map-mdl__gym .pic-top {
  width: min(100px, 20vw);
  right: 0;
  bottom: 0;
  rotate: -10deg;
  translate: 0% 15%;
}
#map-mdl__gym .pic-btm {
  left: 0;
  bottom: 0;
  width: min(210px, 30vw);
  translate: -10% 35%;
}
/*schedule
===================================================================*/
.title-schedule {
  width: 8em;
}
.sec-schedule-blc {
  padding-top: min(170px, 30vw);
  padding-bottom: min(300px, 40vw);
  margin-top: -1px;
  background: #fff;
}
.sec-schedule-blc .pic-flag_top, .sec-schedule-blc .pic-flag_btm {
  width: min(180px, 25vw);
}
.sec-schedule-blc .pic-flag_top {
  right: 0;
  top: 0;
  translate: 10% 0;
}
.sec-schedule-blc .pic-flag_btm {
  bottom: min(330px, 50vw);
  left: 0;
  scale: -1 1;
  translate: -12% -50%;
}
.item-sec-schedule {
  width: min(780px, 100%);
}
.item-sec-schedule:nth-of-type(1) {
  margin-top: min(150px, 16vw);
}
.item-sec-schedule:nth-of-type(2) {
  margin-top: min(140px, 20vw);
}
.item-sec-schedule > .rect-button {
  margin-top: min(100px, 6vw);
}
.comingsoon{
  margin-top: min(80px, 8vw);
  display: flex;
  justify-content: center;
}
.comingsoon > p{
  padding-bottom: min(20px, 4vw);
  padding-left: .92em;
  padding-right: .92em;
  background: radial-gradient(circle at 3px 50%, var(--wall-blk) 1.5px, transparent 1.51px) left bottom / 12px 3px repeat-x, radial-gradient(circle at 9px 50%, var(--wall-blk) 1.5px, transparent 1.51px) left bottom / 12px 3px repeat-x, linear-gradient(to right, transparent 0 3px, var(--wall-blk) 3px 9px, transparent 9px 12px) left bottom / 12px 3px repeat-x;
  background-repeat: repeat-x;
  background-position: left bottom;
  font-size: min(25px,calc(100vw/18));
  font-weight: 600;
  z-index: 1;
}
.comingsoon.bird > p::before{
  content: "";
  z-index: -1;
  width: min(4em,16vw);
  aspect-ratio:1/0.6667;
  background-image: url("../images/pic/bird.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  right: 0;
  bottom: 0;
  translate:45% 65%;
  rotate:-15deg;
}
.schedule-list {
  width: 100%;
  margin-top: min(40px, 4vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 min(40px, 3vw);
}
.schedule-cat {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  font-weight: 500;
  align-items: center;
  gap: 1em;
  padding-top: min(16px, calc(4vw - 4px));
  padding-bottom: min(20px, 4vw);
  background: radial-gradient(circle at 3px 50%, var(--wall-blk) 1.5px, transparent 1.51px) left bottom / 12px 3px repeat-x, radial-gradient(circle at 9px 50%, var(--wall-blk) 1.5px, transparent 1.51px) left bottom / 12px 3px repeat-x, linear-gradient(to right, transparent 0 3px, var(--wall-blk) 3px 9px, transparent 9px 12px) left bottom / 12px 3px repeat-x;
  background-repeat: repeat-x;
  background-position: left bottom;
}
.schedule-cat .date {
  font-size: min(40px, calc(100vw/12.5));
  font-weight: 700;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  gap: .35em;
  white-space: nowrap;
  line-height: 1;
}
.schedule-cat .date span {
  font-size: min(18px, 3.7vw);
  background-color: var(--wall-blk);
  color: #fff;
  border-radius: 100vmax;
  translate: 0 .25em;
  width: 1.85em;
  aspect-ratio:1;
  display: grid;
  place-content:center;
  padding-bottom: min(3px,.5vw);
  text-align: center;
}
.schedule-cat .sche-title {
  font-size: min(16px, 3.7vw);
  line-height: calc(20/16);
}
.schedule-cat.pass {
  padding-right: 2.7em;
}
.schedule-cat.pass::before {
  content: "済";
  font-size: min(18px, 4vw);
  font-weight: 700;
  background-color: var(--wall-org);
  border-radius: 100vmax;
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  color: #fff;
  width: 1.75em;
  aspect-ratio: 1;
  border: 3px solid var(--wall-blk);
  display: grid;
  place-content: center;
  line-height: .25;
  overflow: hidden;
  padding-bottom: 1px;
  
  
}
.fkds-box {
  width: min(520px, 100%);
  margin-top: min(86px, 10vw);
  border: 3px solid var(--wall-blk);
  padding: min(40px, 4vw) min(20px, 3vw) min(40px, 5vw);
  gap: min(24px, 2vw);
  background-color: #fff;
}
.fkds-box::before, .fkds-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: min(37px, 7vw);
  aspect-ratio: 1.125;
}
.fkds-box::before {
  background: var(--wall-blk);
  translate: -50% -100%;
}
.fkds-box::after {
  background: #ffff;
  translate: -50% calc(-100% + 6px);
}
.fkds-text {
  font-size: min(22px, 4vw);
  line-height: calc(36/20);
  text-align: center;
  font-weight: 700;
}
/*info
===================================================================*/
.sec-info-blc {
  background-color: var(--wall-grn);
  padding-bottom: min(280px, 40vw);
  background-image: url("../images/wall/mountain_lgrn.svg");
  background-position: bottom -1px center;
  background-repeat: no-repeat;
  background-size: 100%;
}
.sec-info-blc .pic-kid {
  width: min(210px, 38vw);
  right: 0;
  top: calc(-100vw*0.1067);
  translate: -50% 15%;
}
.info-title {
  width: 4em;
}
.sec-info-blc::before {
  content: "";
  width: calc(100vw + 2px);
  aspect-ratio: 1 / 0.1067;
  position: absolute;
  top: 2px;
  left: 50%;
  translate: -50% -100%;
  background-image: url("../images/wall/wave_green.svg");
  background-position: center;
  background-size: auto 100%;
  scale: -1 1;
}
.box-sec-info {
  padding-top: min(80px, 15vw);
}
.box-sec-info .top-text {
  color: #fff;
  font-size: min(18px, 4vw);
  margin-top: min(60px, 5vw);
  letter-spacing: .05em;
  text-indent: .05em;
}
.info-detail-list {
  width: min(660px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: min(15px, 2vw);
  margin-top: min(100px, 15vw);
  z-index: 1;
}
.info-item {
  aspect-ratio: 1;
  border-radius: 5px;
  display: grid;
  place-items: center;
  place-content: center;
  text-align: center;
  font-size: min(16px, 3.6vw);
  font-weight: 700;
  gap: .5em;
  --item-clr:var(--wall-grn);
  --item-wall:var(--wall-grn);
  color: var(--item-clr);
  background-color: var(--item-wall);
  opacity: 0;
  translate:0 10%;
  transition:all var(--transit);
}
.info-item:first-child{
  z-index: 1;
}
.info-item.row{
  z-index: -1;
}
.info-item.is-view{
  opacity: 1;
  translate:0 0;
}
.info-item.wht-item {
  --item-wall: #fff;
  --item-clr: var(--wall-grn);
}
.info-item.grn-item {
  --item-wall: #0E4A23;
  --item-clr: #fff;
}
.info-item.lgrn-item {
  --item-wall: #E9F7B1;
  --item-clr: #01501C;
}
.info-item.cnct {
  aspect-ratio: auto;
  grid-column: span 2;
}
.info-item.cnct::before {
  content: "";
  width: 17%;
  aspect-ratio: 1.125;
  position: absolute;
  right: 0;
  bottom: 1px;
  z-index: 1;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  background-color: #fff;
  translate: -95% 100%;
}
.info-item p {
  line-height: calc(20/16);
}
.info-item .main {
  font-size: min(32px, 6vw);
  line-height: calc(44/32);
}
.info-item.thumb-item .thumb {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 5px;
  isolation: isolate;
}
.info-item.thumb-item .thumb img {
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.info-item .pic-teacher {
  width: min(130px, 24vw);
  bottom: 0;
  left: 0;
  translate: -90% 10%;
}
.info-item .pic-leaf3 {
  width: min(130px, 40%);
  top: 0;
  right: 0;
  translate: 25% -25%;
  z-index: 1;
}
.info-item .pic-hat {
  width: min(100px, 20vw);
  top: 0;
  left: 0;
  translate: -50% -50%;
}
.info-item .pic-flower {
  width: min(130px, 25vw);
  top: 0;
  left: 0;
  translate: -60% -60%;
}
.info-item .pic-pen {
  width: min(115px, 20vw);
  right: 0;
  top: 0;
  translate: 75% -50%;
}
.info-item .pic-colortry {
  width: min(70px, 13vw);
  top: 0;
  left: 0;
  translate: -50% -50%;
}
.info-item .pic-girl {
  width: min(140px, 25vw);
  bottom: 0;
  left: 0;
  translate: -55% 50%;
}
.info-item .pic-pot {
  width: min(65px, 13vw);
  bottom: 0;
  left: 0;
    translate: -65% 30%;
  z-index: 1;
}
.info-item .pic-acorns {
  width: min(55px, 10vw);
  top: 0;
  right: 0;
  translate: 45% -65%;
}
.info-item.arw-top::before {
  content: "";
  background-color: var(--item-wall);
  width: 36%;
  aspect-ratio: 1/0.8571;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  position: absolute;
  left: 50%;
  top: 1px;
  translate: -50% -100%;
}
.info-item.arw-right::before {
  content: "";
  width: 33%;
  aspect-ratio: 1/1.1667;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  background-color: var(--item-wall);
  position: absolute;
  right: 1px;
  top: 50%;
  translate: 100% -50%;
  z-index: 1;
}
/*access
===================================================================*/
.sec-access-blc {
  background-color: var(--wall-lgrn);
  padding-top: min(100px, 12vw);
  padding-bottom: min(150px, 12vw);
}
.box-access-intro {
  gap: min(60px, 5vw);
}
.access-title {
  width: 6em;
}
.item-map-area {
  width: min(990px, 100%);
  display: grid;
  grid-template-columns: 60% auto;
  gap: min(30px, 8vw) min(40px, 8vw);
  -ms-align-items: center;
  align-items: center;
  font-weight: 700;
  margin-top: min(80px, 15vw);
}
.box-access-intro .pic-bus {
  width: min(136px, 25vw);
  top: 100%;
  right: -50vw;
  transition: right 4s;
  translate: 100% 100%;
  /*  rotate: 10deg;*/
}
.box-access-intro .pic-bus.is-visible {
  right: 0%;
}
.box-access-intro .pic-bus.is-visible img {
  animation: boooom 1.6s steps(4, end) 3 forwards;
}
.item-map-area .detail p.att-text {
  margin-top: 1.8em;
  padding-left: 1.125em;
}
.item-map-area .detail p.att-text::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}
.root-list {
  font-size: min(17px, 3.8vw);
}
.root-list > li {
  padding-left: 1.8em;
}
.root-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -.15em;
  width: 1.3em;
  aspect-ratio: 1;
  background: #fff;
  border: 2px solid;
  border-radius: 100vmax;
}
.root-list > li:nth-child(n+2) {
  margin-top: .85em;
}
.root-list > li.bdr-org::before {
  border-color: var(--wall-org);
}
.root-list > li.bdr-wblue::before {
  border-color: #78BFB4;
}
/*more
===================================================================*/
.sec-more-blc {
  background-image: url("../images/wall/more.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: calc((100vw*0.0933) + min(50px, 12vw));
  padding-bottom: min(210px, 20vw);
}
.sec-more-blc::before {
  content: "";
  width: 100%;
  aspect-ratio: 1/0.0933;
  position: absolute;
  top: -1px;
  left: 50%;
  translate: -50% 0;
  background-image: url("../images/wall/mountain_lgrn_btm.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.more-title {
  width: 4em;
}
.box-sec-more {
  gap: min(100px, 15vw);
}
.sec-more_list {
  width: min(840px, 100%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.item-more {
  padding: min(50px, 15vw) min(30px, 5vw) min(65px, 15vw);
  display: grid;
  grid-template-rows: subgrid;
  grid-area: span 3;
  gap: min(30px, 5vw);
  justify-content: center;
}
.item-more::before {
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: min(112px, 30vw);
  position: absolute;
  top: 0;
  left: 0;
}
.item-more .in-title {
  font-family: var(--fnt-done);
  font-size: min(32px, calc(100vw/12));
  text-align: center;
}
.item-more .thumb {
  display: grid;
  grid-template-rows: min(144px, 35vw);
}
.item-more .thumb img {
  object-fit: contain;
  object-position: center;
  height: 100%;
}
.item-more .in-text {
  font-weight: 700;
  text-align: center;
  letter-spacing: .05em;
  line-height: calc(27/15);
}
@media(hover) {
  .item-more:hover .thumb {
    rotate: -10deg;
  }
}
.item-more .pic-kid1 {
  left: 0;
  top: 50%;
  width: min(73px, 20%);
  translate: -10% -25%;
}
.item-more .pic-camera {
  bottom: 0;
  right: 0%;
  width: min(75px, 15vw);
  translate: 25% -100%;
}
.item-more .pic-pen {
  width: min(100px, 20vw);
  bottom: 0;
  right: 0%;
  translate: 10% 30%;
}
.item-more .pic-kid2 {
  right: 0;
  width: min(150px, 44%);
  rotate: 22deg;
  translate: 0 -27%;
}
/*links
===================================================================*/
.sec-links-blc {
  background-color: var(--wall-org);
  padding-top: min(100px, 15vw);
  padding-bottom: min(150px, 18vw);
}
.sec-links-blc::before {
  content: "";
  width: 100%;
  background: url("../images/wall/wave_org.svg") no-repeat center/100%;
  aspect-ratio: 1/0.0333;
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% calc(-100% + 1px);
}
.link-title {
  width: 10.75em;
}
.box-sec-link {
  gap: min(30px, 7vw);
}
.box-sec-link .pic-kid {
  top: max(-100px, -15vw);
  right: 0;
  width: min(150px, 24vw);
  scale: -1 1;
  translate: -50% -70%;
}
.box-sec-link .pic-tree {
  width: min(90px, 14vw);
  left: 0;
  bottom: max(-150px, -18vw);
  z-index: 1;
  translate: 200% 0;
}
.sec-links-blc .pic-leaf3 {
  width: min(50px, 8vw);
  bottom: 0;
  right: clamp(3.125rem, -4.83rem + 39.77vw, 25rem);
  z-index: 1;
  translate: 100% -100%;
}
/*footer
=====================================*/
footer {
  background-color: var(--wall-grn);
  padding-top: min(70px, 8vw);
  padding-left: min(50px, 6vw);
  padding-right: min(50px, 6vw);
  color: #fff;
  font-weight: 700;
}
footer::before {
  content: "";
  width: 100%;
  background: url("../images/wall/wave_footer.svg") no-repeat center/100%;
  aspect-ratio: 1/0.0333;
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% calc(-100% + 1px);
}
.footer-inner {
  width: min(970px, 100%);
  margin-right: auto;
  margin-left: auto;
}
.footer-inner .pic-bird {
  width: min(125px, 17vw);
  right: -50%;
  bottom: 50%;
  transition: all 2s ease;
}
.footer-inner .pic-bird.is-visible {
  right: 0;
  bottom: 0;
}
.foot-address .in-title {
  font-size: min(30px, calc(100vw/20));
  letter-spacing: .1em;
  text-indent: .1em;
}
.foot-address .in-text {
  line-height: calc(24/14);
  margin-top: 1em;
  letter-spacing: .05em;
  text-indent: .05em;
}
.footer-inner .copy {
  padding-top: min(70px, 10vw);
  font-size: min(14px, 3.4vw);
}
.pagetop-wrap {
  display: grid;
  grid-template-columns: min(380px, 40vw);
  justify-content: center;
  overflow: hidden;
}
#pagetop {
  cursor: pointer;
  translate: 0 8%;
  gap: min(15px, 3vw);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
}
#pagetop .text {
  font-family: var(--fnt-done);
  font-size: min(24px, 5vw);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  padding-top: .5em;
}
#pagetop .text::before {
  content: "";
  width: .25em;
  aspect-ratio: 1;
  border: 3px solid;
  border-color: #fff #fff transparent transparent;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  border-radius: 3px;
  rotate: -45deg;
}
@media(hover) {
  #pagetop:hover {
    translate: 0 5%;
  }
}