@charset "UTF-8";
/* CSS Document */
@media (max-width: 1020px) {
  .hero_inner .pic-tracks {
    translate: -100% 20%;
  }
  /*info+++++*/
  .sec-info-blc .pic-kid {
    translate: -5% 0;
  }
  .info-detail-list {
    grid-template-columns: 1fr 1fr;
  }
  .info-item .pic-teacher {
    translate: -40% 55%;
    z-index: 1;
  }
  .info-item.arw-top {
    grid-area: 2 / 2;
  }
  .info-item.arw-top::before {
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    aspect-ratio: 1 / 1.1667;
    top: 50%;
    left: 1px;
    translate: -100% -50%;
  }
  .info-item.arw-top::before, .info-item.arw-right::before {
    width: 30%;
  }
  .info-item.cnct {
    aspect-ratio: 1/0.4823;
    z-index: 1;
  }
  .info-item:last-child {
    grid-area: 8 / 2;
    z-index: -1;
  }
  .info-item:last-child::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 5px;
    position: absolute;
    left: max(-15px, -2vw);
    top: 0;
    translate: -100% 0;
    background: url("../images/info/thumb05.jpg") no-repeat center/cover;
  }
  .info-item .pic-girl {
    z-index: 1;
  }
  .info-item .pic-hat {
    display: none;
  }
  .info-item.cnct::after {
    content: "";
    width: min(100px, 20vw);
    background: url("../images/info/pic_hat.png") no-repeat center/cover;
    aspect-ratio: 1/0.6667;
    position: absolute;
    top: 0;
    right: 0;
    translate: 25% -50%;
    z-index: 1;
  }
  .info-item .pic-flower {
    top: -100%;
  }
  .info-item .pic-pen {
    right: 40%;
    translate: 50% -50%;
  }
  .info-item:nth-child(8) {
    grid-area: 5/2;
  }
  .info-item:nth-child(9) {
    grid-area: 5/1;
  }
  /*map +++++*/
  .item-map-area {
    grid-template-columns: 1fr;
  }
  .box-access-intro .pic-bus {
    top: max(-100px, -17vw);
    translate: 0 -80%;
  }
  .box-access-intro .pic-bus.is-visible {
    right: 10%;
  }
  /*link +++++++*/
  .box-sec-link .pic-tree {
    translate: 10% 40%;
  }
}
@media (max-width: 768px) {
  #l-nav::before {
    border-radius: 100vmax;
    width: auto;
    height: 0vh;
    aspect-ratio: 1;
    translate: 25% -25%;
    transition: all .5s ease-in;
    transition-delay: .3s;
  }
  #l-nav.is-open::before {
    height: 250vh;
  }
  /*nav +++++++++*/
  .l-nav-inner {
    opacity: 0;
    transition: opacity .5s ease;
    transition-delay: .5s;
  }
  .l-nav-inner > div {
    grid-template-columns: 1fr;
    gap: min(50px, 10vw);
  }
  #l-nav.is-open .l-nav-inner {
    opacity: 1;
  }
  .l-button-area .address {
    display: none;
  }
  #l-nav-menu {
    width: min(500px, 85%);
    display: grid;
    grid-template-columns: auto auto;
    gap: min(30px, 5vw);
    margin-left: auto;
    margin-right: auto;
  }
  #l-nav-menu li:nth-child(n+2) {
    margin-top: 0;
  }
  #l-nav-menu li a {
    -ms-align-items: flex-start;
    align-items: flex-start;
  }
  #l-nav-menu li:nth-child(2) {
    grid-area: 2 / 1 / 3 / 2;
  }
  #l-nav-menu li:nth-child(3) {
    grid-area: 3 / 1 / 4 / 2;
  }
  #l-nav-menu li:nth-child(4) {
    grid-area: 1 / 2 / 2 / 3;
  }
  #l-nav-menu li:nth-child(5) {
    grid-area: 2 / 2 / 3 / 3;
  }
  /*map++++++++++*/
  #map-mdl__learning .pic-btm {
    translate: -35% 40%;
  }
  #map-mdl__garden .pic-btm {
    translate: 0% 60%;
  }
  /*schedule+++++*/
  .schedule-list {
    grid-template-columns: 1fr;
  }
  .schedule-cat {
    justify-content: flex-start;
    padding-left: .8em;
    padding-right: .8em;
  }
  .sec-schedule-blc .pic-flag_btm {
    bottom: min(115px, 25vw);
  }
  /*more+++++++++*/
  .sec-more_list {
    grid-template-columns: min(400px, 80vw);
    justify-content: center;
  }
  .item-more .pic-camera {
    left: 0;
    top: auto;
    bottom: 20%;
    translate: -20% 0;
  }
  .item-more .pic-pen {
    bottom: auto;
    top: 0;
    right: 0;
    left: auto;
    translate:70% 100%;
  }
}
@media (max-width: 480px) {
  .pcView {
    display: none;
  }
  .spView {
    display: block;
  }
  #hum-btn, .round-title > span, .round-title::before, .round-title::after {
    border-width: 2px;
  }
  #hum-btn button, #hum-btn button::before {
    height: 2px;
  }
  #container::before {
    background-image: url("../images/hero_main_sp.jpg");
    background-size: 100%;
  }
  /*title*/
  .title-schedule, .info-title, .access-title, .more-title {
    width: 100%;
    height: min(60px, 16vw);
  }
  .title-schedule svg, .info-title svg, .access-title svg, .more-title svg {
    object-fit: contain;
    height: 100%;
    object-position: center;
  }
  /*hero*/ :root {
    --head-pad: auto;
    --head-asp: 1/1.1413;
  }
  .hero_title .poc-locus {
    top: 70%;
    translate: -55% 0
  }
  .hero_inner {
    padding-bottom: min(100px, 27vw);
  }
  .hero-pic-area {
    background-image: url("../images/wall/mountain_sp.svg");
  }
  #hero::before {
    content: "";
    width: min(56px, 15vw);
    background: url("../images/pic/hooray.png") no-repeat center/cover;
    position: absolute;
    top: 0;
    left: 68%;
    aspect-ratio: 1/0.9686;
    rotate: 10deg;
    translate: 0 -25%;
  }
  .hero_inner .pic-tracks {
    left: 98%;
    rotate: 90deg;
    top: 32%;
  }
  .pic-globe {
    left: 0;
    translate: -20% 50%;
  }
  .pic-leaf {
    top: 80%;
    left: 10%;
  }
  .pic-leaf2 {
    top: 15%;
    right: 40%;
  }
  .pic-kumo {
    width: min(70px, 15vw);
    top: 30%;
    right: 0;
    translate: 15% 0;
  }
  .pic-bag {
    width: min(60px, 15vw);
    right: 0;
    translate: 10% 0;
  }
  .hero_title .pic-bus {
    left: -50%;
    translate: -120% -100%;
  }
  .hero_title .pic-bus.is-visible {
    left: 18%;
  }
  /*intro*/
  .sec-intro-blc .pic-kid {
    left: min(30px, 3vw);
    translate: 0 25%;
  }
  .sec-intro-blc .pic-kid::before {
    content: none;
  }
  .sec-intro-title .pic-sun {
    left: 100%;
    translate: 90% -25%;
  }
  .sec-intro-title .pic-tree {
    translate: 50% -115%;
  }
  .box-intro_comment .pic-grass {
    translate: -20% 0;
  }
  /*map*/
  .box-intro_map .map-title {
    width: min(166.28px, 44vw);
    left: min(25px, 3vw);
  }
  .map-area::before {
    background-image: url("../images/pic/tracks.png");
    aspect-ratio: 1 / 1.6142;
    width: min(94px, 25vw);
    rotate: 50deg;
    right: 12%;
    translate: 0 -65%;
  }
  .map-pin_garden {
    top: 14%;
    right: 10.5%;
  }
  .map-pin_gym {
    top: 45%;
    left: 3%;
  }
  .map-pin_callyroom {
    top: 34%;
    left: 13%;
  }
  .map-pin_learning {
    left: 28%;
    top: 30%;
  }
  .map-pin_classroom {
    top: 26%;
    right: 35%;
  }
  .map-pin_rooftop {
    top: 26%;
    right: 16%;
  }
  .map-pin_hall {
    right: 7%;
    top: 38%;
  }
  .map-pin_ground {
    left: 35%;
  }
  .box-intro_map .pic-bird {
    translate: 0 50%;
    rotate: -10deg;
  }
  .mdl-thumb .thumb {
    aspect-ratio: 1/0.6723;
  }
  #map-mdl__classroom .pic-btm {
    width: min(250px, 35vw);
    translate: 0 20%;
  }
  .mdl-explan {
    padding-left: 0;
    padding-right: 0;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
  .mdl-explan .in-text {
    letter-spacing: .025em;
    text-indent: .025em;
  }
  /*schedule*/
  .schedule-cat {
    background: radial-gradient(circle at 2px 50%, var(--wall-blk) 1px, transparent 1.51px) left bottom / 12px 2px repeat-x, radial-gradient(circle at 6px 50%, var(--wall-blk) 1px, transparent 1.51px) left bottom / 12px 2px repeat-x, linear-gradient(to right, transparent 0 2px, var(--wall-blk) 2px 9px, transparent 9px 12px) left bottom / 12px 2px repeat-x
  }
  .schedule-cat .date span {
    translate: 0 .15em;
  }
  .sec-schedule-blc .pic-flag_top {
    translate: 10% 100%;
  }
  .sec-schedule-blc .pic-flag_btm {
    translate: -12% 50%;
  }
  .fkds-box {
    border-width: 2px;
  }
  .fkds-box::after {
    translate: -50% calc(-100% + 4px);
  }
  /*info*/
  .sec-info-blc .pic-kid {
    translate: -5% -10%;
  }
  .sec-info-blc {
    background-image: url("../images/wall/mountain_lgrn_sp.svg");
  }
  .sec-more-blc::before {
    background-image: url("../images/wall/mountain_lgrn_btm_sp.svg");
    aspect-ratio: 1/0.1173;
  }
  /*more*/
  .item-more {
    padding-bottom: min(50px, 15vw);
  }
  /*link*/
  .box-sec-link .pic-kid {
    translate: 10% -70%;
  }
  .sec-links-blc .pic-leaf3 {
    translate: 100% 18%;
  }
  .box-sec-link .pic-tree {
    translate: 35% 10%;
  }
  .pagetop-wrap {
    margin-top: min(60px, 16vw);
  }
}