@charset "UTF-8";
/* CSS Document */ :root {
  --fnt-base: 'Zen Kaku Gothic Antique', "Hiragino Kaku Gothic Pro", "Yu Gothic", sans-serif;
  --fnt-done: 'Darumadrop One', var(--fnt-base);
  --fnt-tsuku-a:fot-tsukuardgothic-std,var(--fnt-base);
  --clr-grn:#3A7D5A;
  --clr-org:#E36228;
  --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(16px, 3.6vw);
  font-weight: 500;
  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(170px, 17vw);
  aspect-ratio: 1/0.8294;
  position: fixed;
  top: 0;
  right: 0;
  z-index: calc(infinity);
  transition: all .3s;
  cursor: pointer;
  background: url("../images/hum_leaf.svg") no-repeat top right/cover;
}
#hum-btn button {
  position: absolute;
  top: calc(50% - min(5px, .75vw));
  left: 55%;
  translate: -50% -50%;
  display: block;
  background-color: #fff;
  width: min(38px,6vw);
  height: min(3px,.4vw);
  padding: 0;
  margin: 0;
  border: none;
  box-sizing: border-box;
  border-radius: 3px;
  transition: all .3s;
}
#hum-btn button::before
,#hum-btn button::after{
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: min(3px,.5vw);
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
#hum-btn button::before {
  top: max(-10px, -1.8vw);
}
#hum-btn button::after {
  top: min(10px, 1.8vw);
}
#hum-btn.open {
  background-image: none;
}
#hum-btn.open button {
  rotate: 45deg;
  top: 50%;
  background-color: #fff;
}
#hum-btn.open button::before{
  top: 0;
  rotate: 90deg;
}
#hum-btn.open button::after{
  bottom: auto;
  top: 0;
  rotate:90deg;
}
.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;
  color: #175244;
  z-index: 9;
  overflow-y: scroll;
  background-color: #91C13A;
}
/*
#l-nav::before{
  content: "";
  width: 100%;
  height: 100%;
  background-color:#91C13A;
  position: fixed;
  right: 0;
  top: 0;
}
*/
#l-nav.is-open {
  opacity: 1;
  visibility: visible;
}
.l-nav-inner {
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: min(840px,82%);
  -ms-align-items: center;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  padding-top: min(100px, 25vw);
  padding-bottom: min(100px, 15vw);
}
.l-nav-inner > div{
  gap:min(40px,5.33vw);
}
.l-nav_menu{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:8px min(20px,5.33vw);
}
.l-nav_menu > li{
  background-color: #fff;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: subgrid;
  grid-area: span 2;
  text-align: center;
  padding: min(50px,5vw) min(20px,3vw) min(58px,5.33vw);
  border-radius: 30px;
  gap:min(20px,3vw);
}
.l-nav_title{
  display: grid;
  grid-template-columns: 77%;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
}
.l-nav_menu > li .text{
  font-size: min(18px,3.6vw);
  font-weight: 700;
  letter-spacing: .1em;
  text-indent: .1em;
}
@media(hover){
  .l-nav_menu > li:hover .l-nav_title{
    rotate: -6deg;
  }
}
.l-nav_pic{
  position: absolute;
  bottom: 0;
  left: 50%;
  translate:-50% 0;
  height: 50px;
  width: min(840px,82%);
  padding-bottom: min(40px,5vw);
  text-align: center;
}
.l-nav_pic .copy{
  font-size: min(12px,3.2vw);
  font-weight: 700;
  color: #fff;
}
.pic-nav-teacher_lf{
  width: min(85px,20vw);
  left: 0;
  bottom: 0;
}
.pic-nav-teacher_lf #tc{
  transition:translate .3s;
  transition-delay: .5s;
}
.pic-nav-teacher_rt{
  width: min(56px,14vw);
  right: 0;
  bottom: 0;
  transition:translate .3s;
  transition-delay: .85s;
}
.pic-nav-teacher_lf #tc
,.pic-nav-teacher_rt{
  translate:0 50%;
}
.is-open .pic-nav-teacher_lf #tc,
.is-open .pic-nav-teacher_rt{
  translate:0 0;
}
/*header
====================*/
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: min(50px, 6vw) min(50px, 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(268px, 38.78vw);
  pointer-events: auto;
}
/*Navi
====================*/

/*Container 
===============================================================*/ :root {
  --head-pad: 555px;
  --head-asp: 1/.3854;
}
#container {
  width: 100%;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  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;
  min-height: 100vh;
}
#container::-webkit-scrollbar{
  display:none;
}
.pos-pic {
  position: absolute;
}

/*main
===============================================================*/
main{
  flex: 1;
}
/*hero
=====================================*/
#hero{
  background-image:url("../images/wall/hero_wall_pc.svg"),linear-gradient(#C4E2EA calc(100vw*0.2),#F4FAC9 calc(100vw*0.2));
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom center;
  padding-bottom: min(380px,65vw);
}
.pic-hero-treat{
  width: min(400px,65vw);
  right: 0;
  top: 25%;
  translate:15% 0;
}
.hero_inner{
  width: min(1200px,100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: min(50px,4vw);
  padding-right: min(50px,4vw);
  display: grid;
  grid-template-columns: auto;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  gap:min(50px,7.7vw);
  margin-top: -11.5vw;
}
.hero_inner::before{
  content: "";
  background: url( "../images/pic/flower01.svg") no-repeat center/cover;
  width: min(100px,15vw);
  aspect-ratio:1/0.5952;
  position: absolute;
  left: 0;
  top: 60%;
  translate:-150% 0;
}
.hero-title{
  width: min(542px,82vw);
  z-index: 2;
}
.hero_inner .sub-text{
  font-weight: 700;
  font-size: min(20px,4.27vw);
  color: var(--clr-grn);
  text-align: center;
  line-height: calc(28/16);
  z-index: 2;
  letter-spacing: .1em;
  text-indent: .1em;
}
.hero_inner .pic-flower{
  width: min(157px,25vw);
  left: 0;
  bottom: 0;
  translate:-15% 0;
}
.hero_inner .pic-go{
  width: min(200px,34vw);
  right: min(25px,2vw);
  bottom: 0;
  translate:0 60%;
  z-index: 1;
}
/*Content
=========================================================================*/
#content{
  margin-top: -1px;
}
.top-text{
  font-size: min(18px,3.7vw);
  line-height: calc(40/18);
  font-weight: 700;
  text-align: center;
  color: var(--clr-grn);
  letter-spacing: .05em;
  text-indent: .05em;
}
.in-text{
  line-height: calc(32/16);
}
/*button setting*/

/*schedule
=============================================================*/
.sec-oneday-blc{
  background-color: #DDF5AB;
}
.sec-oneday-blc::before{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: min(360px,20vw);
  aspect-ratio:1/1.7241;
  background-image: url("../images/pic/tree.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}
@media(max-width:480px){
  .sec-oneday-blc::before{
    background-image: url("../images/pic/tree_sp.svg");
    aspect-ratio:1/2.7778;
  }
}
.pic-road .pic-bus{
  right: 0;
  bottom: 0;
  z-index: 1;
  translate:100% 0;
  transition: translate 4s;
}
.pic-road .pic-bus.is-visible{
  translate:-150% -30%;
  animation: boooom 1.6s steps(4, end) 3 forwards;
}
.pic-bus img{
  width: min(170px,25vw);
}
.pic-oneday01_wind01{
  right: 0;
  top: 25%;
  width: min(250px,26vw);
}
.pic-oneday01_wind02{
  width: min(273px,30vw);
  right: 0;
  bottom: 0;
  translate:0 -180%;
  rotate:-10deg;
}
.pic-oneday-intro_dot{
  width: min(486px,52vw);
  left: 0;
  top: min(200px,20vw);
  translate:-45% 50%;
}
.pic-oneday-intro_grass{
  width: min(58px,12vw);
  top: 100%;
  left: 0;
  translate:0 100%;
}
.pic-oneday01_tree01{
  right: 0;
  top: 50%;
  width: min(100px,26vw);
  translate:15% 0;
}
.pic-oneday01_tree01 img{
  transform-origin: bottom center;
}
.pic-oneday01_tree02{
  width: min(150px,12vw);
  left: 0;
  bottom: 0;
  translate:0 -50%;
}
.pic-oneday2_tree01{
  right: 0;
  top: 0;
  width: min(120px,16vw);
  translate:0 -65%;
}
.pic-oneday2_tree01::before{
  content: "";
  width: 230%;
  aspect-ratio:1/0.2933;
  background-image: url("../images/pic/bubble.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 0;
  translate:16% 100%;
}
.pic-oneday2_grass_lf{
  left: 0;
  width: min(120px,15vw);
  top: 60%;
  translate:-20% 0;
}
.pic-oneday2_grass_rt{
  right: 0;
  width: min(120px,18vw);
  top: 25%;
  translate:20% 0;
}
.pic-oneday2_tree2{
  width: min(70px,13vw);
  left: min(100px,10vw);
  top: 40%;
}
.pic-oneday2_tree2::before{
  content: "";
  width: min(345px,50vw);
  aspect-ratio:1/0.2933;
  background-image: url("../images/pic/bubble.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 0;
  translate:25% 72%;
}
.pic-oneday2_tree3{
  width: min(40px,6vw);
  top: 75%;
  left: min(150px,8vw);
}
.pic-oneday4_tree4{
  width: min(45px,10vw);
  right: min(150px,8vw);
  top: 50%;
}
.pic-oneday4_tree4 img{
  transform-origin: bottom center;
}
.pic-oneday4_flower{
  width: min(130px,25vw);
  position: absolute;
  top: 70%;
  right: 0;
  right: min(250px,4vw);
  translate:-50% 0;
}
.pic-oneday3_ball{
  width: min(47px,8vw);
  top: 0;
  left: 0;
  opacity: 0;
  transition:opacity .3s;
  translate:0 50%;
}
.pic-oneday3_ball.is-visible {
  opacity: 1;
}
.pic-oneday3_ball.is-visible > img{
  animation: 2s ease-in-out forwards;
  animation-name: bound;
}
.pic-oneday3_ccl{
  width: min(278px,30vw);
  right: -1px;
  top: 50%;
}
.pic-oneday3_wind{
  width: min(400px,32vw);
  top: 70%;
  left: 0;
  translate:-20% 0;
}
/*detail*/
.oneday-title{
  width: min(516px,73vw);
}
.sec-oneday-box{
  display: grid;
  grid-template-columns: min(1020px,100%);
  justify-content: center;
  padding-left: min(50px,4vw);
  padding-right: min(50px,4vw);
  margin-left: auto;
  margin-right: auto;
  gap:min(140px,30vw);
}
.sec-oneday-box.block01{
  background-image: url("../images/wall/block01_wall.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom center;
  padding-bottom: min(200px,30vw);
}
.sec-oneday-box.block02{
  margin-top: -1px;
  background-color: #f4fac9;
  padding-top: min(100px,26vw);
  background-image: url("../images/wall/block02_wall.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom center;
  padding-bottom: min(130px,30vw);
}
.sec-oneday-box.block03{
  background-color: #C4E2EA;
  margin-top: -1px;
  padding-top: min(140px,26vw);
  padding-bottom: min(80px,10vw);
}
.sec-oneday_intro{
  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;
  gap:min(40px,8vw);
}
.sec-oneday_list{
  display: grid;
  place-items:center;
}
.item-oneday.rect{
  width: min(580px,80vw);
}
.item-oneday .title{
  position: absolute;
}
.oneday-rect-box.is-visible .title{
  animation: poyon .8s ease-in-out;
}
.oneday-box01 .title{
  right: 0;
  top: 50%;
  translate:10% -50%;
  width: 36%;
}
.oneday-box05 .title{
  width: 42%; 
  top: 55%;
  left: 0;
  translate:-40% -50%;
}
.oneday-rect-box{
  background: #fff;
  border-radius: min(20px,5.33vw);
  padding: min(46px,12vw) min(10px,3vw);
  display: grid;
  grid-template-columns: min(368px,76%);
  place-items:center;
  place-content:center;
  gap:min(20px,5vw);
  z-index: 1;
}
.oneday-rect-box .timeline{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  font-weight: 700;
  color: var(--clr-org);
  text-align: center;
  line-height: 1.2;
  translate:0 -40%;
}
.oneday-rect-box .timeline .time{
  font-size: min(40px,8.5vw);
  transform-origin: left top;
  font-family: var(--fnt-tsuku-a);
}
.oneday-rect-box .in-title{
  position: absolute; 
}
.oneday-box01 .in-title{
  top: 0;
  left: min(60px,7vw);
  width: min(286px,50vw);
  translate:0 -50%;
}
.oneday-box05 .in-title{
  width: min(346px,100%);
  top: 100%;
  right: 0;
  translate:25% -25%;
}
.oneday-rect-box .in-text{
  font-weight: 700;
  text-align: center;
}
.oneday-box01 .pic-teacher01
,.oneday-box01 .pic-teacher01_parts{
  width: min(100px,16vw);
  position: absolute;
  left: 0;
  bottom: 0;
  transition-delay: 3s;
  transition:translate .2s,rotate .3s;
}
.oneday-box01 .pic-teacher01{
  translate:-20% -20%;
  rotate:10deg;
}
.oneday-box01 .pic-teacher01_parts{
  translate:-55% -20%;
}
.oneday-box01 .pic-teacher01.is-visible{
  translate:-82% -20%;
  rotate:0deg;
}
.oneday-box01 .pic-teacher01_parts.is-visible{
  translate:-80% -20%;
}
.block01 .sec-oneday_list{
  gap:min(100px,26vw);
}
.block02 .sec-oneday_list{
  gap:min(175px,26vw);
}
.block03 .sec-oneday_list{
  gap:min(200px,35vw);
}
.item-oneday.ccl{
  width: min(769px,100%);
  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;
}
.oneday-ccl-box .thumb{
  width: min(442px,85vw);
  z-index: 1;
}
.oneday-ccl-box .thumb.is-visible{
  animation: poyon 1s ease-in-out;
}
.oneday-ccl-box.pos-lf{
  margin-right: auto;
}
.oneday-ccl-box.pos-rt{
 margin-left: auto; 
}
.oneday-box03{
  margin-top: max(-70px,-5vw);
}
.oneday-box04 .thumb{
  translate:20% 0;
}
/*box05*/
.oneday-box05 .oneday-rect-box .timeline{
  left: min(15px,3vw);
}
.oneday-box05 .pic-teacher02
,.oneday-box05 .pic-teacher02_parts{
  width: min(180px,27vw);
  right: min(30px,3vw);
}
.oneday-box05 .pic-teacher02{
  top: 2px;
  translate:0 -30%;
  transition-delay: 3s;
  transition:translate .2s,rotate .3s;
}
.oneday-box05 .pic-teacher02.is-visible{
  translate:0 -100%;
}
.oneday-box05 .pic-teacher02_parts{
  top: 0;
  translate:0 -50%;
}
/*box08*/
.oneday-box08 .pic-teacher03{
  width: min(210px,37%);
  right: 0;
  bottom: 0;
  translate:-10% 30%;
  transition:translate .2s;
}
.oneday-box08 .pic-teacher03.is-visible{
  translate:-10% 95%;
}
.oneday-box08 .timeline{
  translate: -22.5% -40%;
}
.oneday-box08 .title{
  width: min(245px,40%);
  top: 50%;
  right: 0;
  translate:25% 0;
}
.oneday-box08 .in-title{
  width: min(257px,42%);
  bottom: 0;
  left: 0;
  translate:-15% 70%;
}
/*box10*/
.oneday-box10{
  margin-top: min(100px,12vw);
}
.oneday-box10 .in-title{
  width: min(200px,40vw);
  right: 0;
  bottom: 0;
  rotate:-25deg;
  z-index: 2;
  translate:-15% 100%;
  transform-origin: left top; 
}
/*dot line*/
.js-dot-line{
  position: absolute;
}
.js-dot-path {
  fill: none; stroke: var(--clr-grn); stroke-linecap: round; stroke-width: 7px; 
}
@media (max-width:480px) {
  .js-dot-path { stroke-width: 4px; }
}
.blk01-line_1{
  top: 65%;
  left: 50%;
  translate:-100% 0;
  width: min(150px,26%);
}
.blk01-line_2{
  width: min(290px, 120%);
  top: 50%;
  right: 0;
  translate:25% 0;
}
.blk01-line_3{
  width:min(190px,75%);
  bottom: 0;
  left: 0;
  translate: 0% 40%;
}
.blk02-line_1{
  width: min(120px,25vw);
  bottom: 95%;
  left: 35%;
  translate:0 0;
}
.blk02-line_2{
  width: min(300px,120%);
  right: 50%;
  bottom: 80%;
}
.blk02-line_3{
  width: min(240px,120%);
  left: 0;
  top: 80%;
  translate:-40% 0;
  rotate:-10deg;
}
.blk03-line_1{
  width: min(220px,60%);
  bottom: 95%;
  left: 25%;
}
.blk03-line_2{
  width: min(180px,30%);
  top: 85%;
  right: 50%;
  translate:0 0;
}
.blk03-line_3{
  width: min(326px,120%);
  bottom: 0;
  left:30%;
  translate:0 70%;
}
.wall-oneday_hill{
  background-color: #C4E2EA;
  margin-top: -1px;
}
.hill-pic-wrap{
  position: absolute;
  width: min(1440px,100%);
  height: 100%;
  left: 50%;
  top: 0;
  translate:-50% 0;
  z-index: 1;
}
.pic-hill-tree{
  width: min(386px,43vw);
  right: min(100px,10vw);
  bottom: 0;
  translate:0 12%;
}

.pic-hill-flower01
,.pic-hill-flower02{
  width: min(120px,18vw);
}
.pic-hill-flower01{
  width: min(120px,18vw);
  left: 0;
  top: 50%;
  translate:50% -50%;
}
.pic-hill-flower02{
  top: 50%;
  left: 0;
  translate:-50% 0;
}
.pic-hill-rabbit{
  width: min(100px,16vw);
  bottom: 0;
  left: min(160px,12vw);
  translate: 50% 25%;
}
/*after school +++++++++++++++++++++++++++++++++++++++++++++++*/
.sec-after-blc{
  margin-top: -1px;
  background-color: #91C13A;
}
.sec-after-box{
  display: grid;
  grid-template-columns: min(1100px, 100%);
  padding-left: min(50px, 6vw);
  padding-right: min(50px, 6vw);
  justify-content: center;
}
.sec-after-wall::before{
  content: "";
  width: min(230px,20vw);
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("../images/pic/tree_after.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
  aspect-ratio:1/2.9412;
  translate:0 -18%;
  z-index: 1;
}
.pic-after_acorns{
  width: min(100px,10vw);
  left: 80%;
  bottom: 0;
  translate:0 100%;
}
.pic-after_acorns g.anime-yura{
  transform-box: fill-box;
  transform-origin: center;
  translate: -15% -5%;
}
/*detail*/
.sec-after_intro{
  width: min(790px,100%);
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  padding-left: min(50px,4vw);
  padding-right: min(50px,4vw);
}
.after-title{
  width: min(525px,72vw);
  margin-left: auto;
}
.sec-after_intro .top-text{
  color: #fff;
  margin-top: min(20px,5vw);
}
.after-wid-item{
  display: grid;
  -ms-align-items: flex-start;
  align-items: flex-start;
}
.after-wid-item .comment{
  display: grid;
  place-content:center;
}
.after-wid-item .comment > div{
  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;
  gap:min(20px,5vw);
}
.after-wid-item .comment .in-text{
  text-align: center;
  font-weight: 600;
}
.after-min-item{
  width: min(450px,100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: #fff;
  gap:min(30px,4vw);
  z-index: 1;
}
.after-wid-item.is-visible .comment::before{
  animation: poyon .85s;
}
.after-min-item.rt{
  margin-left: auto;
}
.after-min-item .comment{
  font-weight: 600;
}
.after-min-item .comment .in-title{
  font-size: min(26px,5.333vw);
}
.after-min-item .comment .in-text{
  margin-top: 1em;
  font-size: min(16px,3.4vw);
}
/*aft block01*/
.sec-after-box.block01{
  margin-top: min(160px,35vw);
}
.sec-after-box.block01::before{
  content: "";
  width: min(200px,10vw);
  aspect-ratio:1/3;
  background-image: url("../images/wall/after01_lf.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  translate:0 5%;
}
.sec-after-box.block01 .after-wid-item .comment{
  color: var(--clr-grn);
}
.sec-after-box.block01 .after-wid-item .comment > div{
/*  grid-template-columns: min(378px,100%);*/
}
.sec-after-box.block01 .after-wid-item{
  grid-template-columns: auto 56%;
}
.sec-after-box.block01 .after-wid-item .comment::before{
  content: "";
  width: 150%;
  mask-image:url( "../images/wall/mask-after01.png");
  mask-size:cover;
  mask-repeat:no-repeat;
  mask-position:center;
  background-color: #F4FAC9;
  aspect-ratio:1/0.6799;
  position: absolute;
  left: 60%;
  top: 50%;
  translate:-50% -50%;
}
.sec-after-box.block01 .after-wid-item.is-visible .comment::before{
  
}
.sec-after-box.block01 .after-wid-item .in-title{
  width: min(280px,50vw);
  margin-right: auto;
}
.sec-after-box.block01 .after-wid-item .in-text{
  margin-left: auto;
}
.sec-after-box.block01 .after-wid-item .thumb{
  margin-top: min(50px,10vw);
}
.js-fall-leaf{
  translate:0 -100%;
  opacity: 0;
  transition:opacity .3s;
  animation-delay: .5s;
}
.js-fall-leaf.is-visible{
  animation: leafFall 1.4s ease forwards;
  opacity: 1;
}
.pic-leaf_afr_intro{
  right: max(-50px,-4vw);
  bottom: 0;
  width: min(70px,12vw);
}
.pic-leaf_after01{
  right: min(-45px,-6vw);
  top: 0;
  width: min(70px,12vw);
}
.pic-aftr01-piyo{
  width: min(43px,8vw);
  left: 50%;
  top: 0;
  translate: -50% -95%;
  z-index: 1;
}
.pic-aftr01-piyo img{
  transform-origin: bottom center;
}
.pic-leaf_after03{
  right: 0;
  top: max(-70px,-12vw);
  width: min(60px,10vw);
  z-index: 1;
}
.pic-leaf_after04{
  width: min(60px,10vw);
  z-index: 1;
  right: 0;
  bottom: min(70px,10vw);
}
.pic-leaf_after05{
  width: min(60px,10vw);
  bottom: min(70px,10vw);
  right: 20%;
  z-index: 1;
}
.pic-hash_aftr04{
  width: min(68px,12vw);
  top: 0;
  left: 0;
  translate:100% -250%;
  rotate:10deg;
}
.pic-leaf_after_hill{
  width: min(80px,14vw);
  left:min(150px,10vw);
  top: 35%;
}
/*aft block02*/
.sec-after-box.block02{
  margin-top: min(70px,16vw);
}
.pic-aftr-blk02{
  width: min(680px,46vw);
  left: 0;
  bottom: 0;
  translate:0 0;
  aspect-ratio:1/0.8197;
}
.sec-after-box.block02::before{
  content: "";
  width: min(487px,32vw);
  aspect-ratio:1/0.9317;
  background-image: url("../images/wall/after02_rt.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  translate:0 -80%;
}
.sec-after-box.block02 .after-wid-item .comment{
  color: #fff;
  margin-left: auto;
  margin-top: min(140px,8vw);
  padding-right: min(50px,4vw);
}
.sec-after-box.block02 .after-wid-item{
  grid-template-columns: auto min(486px,50%);
  justify-content: flex-end;
}
.sec-after-box.block02 .after-wid-item .thumb{
  z-index: 1;
}
.sec-after-box.block02 .after-wid-item .comment::before{
  content: "";
  width: 170%;
  mask-image:url("../images/wall/mask-after02.png");
  mask-size:cover;
  mask-repeat:no-repeat;
  mask-position:center;
  background-color: var(--clr-grn);
  aspect-ratio:1/0.7078;
  position: absolute;
  right: max(-60px, -4vw);
  top: 50%;
  translate:0% -50%;
}
.sec-after-box.block02 .after-wid-item .comment::after{
  content: "";
  width: min(33px,8vw);
  background-image: url("../images/pic/hash01.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  aspect-ratio:1/1.8529;
  position: absolute;
  right: 0;
  bottom: 0;
}
.sec-after-box.block02 .after-wid-item .comment > div{
  translate:-3em 0;
}
.sec-after-box.block02 .after-wid-item .comment .in-title{
  margin-left: auto;
  width: min(258px,46vw)
}
/*aft block03*/
.sec-after-box.block03{
  margin-top: max(-60px,-5vw);
}
.sec-after-box.block03::before{
  content: "";
  width: min(435px,35vw);
  aspect-ratio:1/1.25;
  background-image: url("../images/wall/after03_rt.svg");
  background-size: cover;
  background-position: right center;
  position: absolute;
  right: 0;
  top: 0;
  translate:0 30%;
}
.sec-after-box.block03 .after-wid-item{
  grid-template-columns: auto min(500px,45%);
  justify-content: flex-start;
  color: #fff;
}
.sec-after-box.block03 .after-wid-item::after{
  content: "";
  width: min(60px, 10vw);
  aspect-ratio:1/0.8287;
  background-image: url("../images/pic/leaf04.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: max(-45px,-5vw);
  left: 0;
  translate:0 -100%;
  opacity: 0;
  transition: opacity .3s;
}
.sec-after-box.block03.is-visible .after-wid-item::after{
  animation: leafFall 1.4s ease forwards;
  opacity: 1;
}
.sec-after-box.block03 .after-wid-item .comment::before{
  content: "";
  width: 170%;
  mask-image:url("../images/wall/mask-after03.png");
  mask-size:cover;
  mask-repeat:no-repeat;
  mask-position:center;
  background-color: #175244;
  aspect-ratio:1/0.8093;
  position: absolute;
  left: 50%;
  top: 50%;
  translate:-50% -50%;
}
.sec-after-box.block03 .after-wid-item .comment .in-title{
  margin-left: auto;
  width: min(280px,50vw);
}
.sec-after-box.block03 .after-wid-item .thumb{
  margin-top: min(100px,10vw);
}
.sec-after-box.block02 .after-min-item{
  margin-top: min(130px,30vw);
}
/*aft block04*/
.sec-after-box.block04 .after-wid-item{
  grid-template-columns: auto min(486px,45%);
  justify-content: flex-end;
  color: #175244;
}
.sec-after-box.block04 .after-wid-item .thumb{
  z-index: 1;
  margin-top: min(60px,8vw);
}
.sec-after-box.block04 .after-wid-item .comment::before{
  content: "";
  width: 150%;
  mask-image:url("../images/wall/mask-after04.png");
  mask-size:cover;
  mask-repeat:no-repeat;
  mask-position:center;
  background-color: #FFF25E;
  aspect-ratio:1/0.7525;
  position: absolute;
  left: 40%;
  top: 45%;
  translate:-50% -50%;
}
.sec-after-box.block04 .after-wid-item .comment .in-title{
  width: min(380px,68vw);
}
.wall-after_hill{
  margin-top: -14%;
  z-index: 1;
}

/*program*/
.sec-program-blc{
  background: #fff;
  margin-top: -1px;
  z-index: 2;
  padding-top: min(80px,10vw);
  padding-bottom: min(150px,18vw);
}
.program-title{
  width: min(625px,100%);
  text-align: center;
}
.pic-leaf_pgm{
  width: min(80px,12vw);
  top: max(-80px,-10vw);
  right: 2em;
}
.sec-program-box{
  gap:min(80px,8vw);
}
.program-title .ttl-text{
  color: #91C13B;
  font-weight: 600;
  font-size: min(20px,3.6vw);
}
.program-title h2{
  margin-top: 10px;
  width: min(624px,100%);
}
.program-item{
  width: min(862px,100%);
  display: grid;
  grid-template-columns: min(400px,45%) auto;
  gap:min(30px,8vw) min(60px,5vw);
  -ms-align-items: center;
  align-items: center;
}
.program-item .in-text{
  color: var(--clr-grn);
  font-weight: 700;
  line-height: calc(42/16);
}
/*footer
=====================================*/
footer {
  background-color: #FFF35E;
  font-weight: 700;
}
/*footer more*/
.foot-more-box{
  gap:min(60px,8vw);
  z-index: 1;
}
.more-title {
  gap:min(20px,3vw);
}
.more-title .title{
  width: min(240px,26vw);
}
.more-title .ttl-text{
  font-size: min(20px,3.6vw);
  color: #175244;
  letter-spacing: .1em;
  text-indent: .1em;
}
.round-button {
  width: min(460px, 82vw);
}
.round-button a {
  display: grid;
  height: min(100px, 18vw);
  width: 100%;
  place-content: center;
  background-color: var(--wall-org);
  border-radius: 100vmax;
  color: #fff;
  font-size: min(18px, 3.7vw);
  font-weight: 700;
  letter-spacing: .05em;
  overflow: hidden;
}
.round-button a::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #91C13B;
  position: absolute;
  left: 0;
  top: 50%;
  translate: -100% -50%;
  transition: translate var(--transit);
}
.round-button.hvr-grn a::before{
  background-color: var(--wall-grn);
}
.round-button a::after {
  content: "";
  width: 2.222em;
  aspect-ratio: 1;
  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;
  transition-delay: .2s;
}
@media(hover) {
  .round-button a:hover::before {
    translate: 0 -50%;
  }
  .round-button a:hover::after {
    translate: 15% -50%;
    background-image: url("../images/hvr-arrow.svg");
  }
}
/*footer about*/
.wall-mountain{
  width: 100%;
  aspect-ratio:1/0.3333;
}
.wall-mountain svg{
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.foot-about-blc{
  background:linear-gradient(rgba(23,82,68,0) 2px,rgba(23,82,68,1) 2px);
  margin-top: max(-60px,-3vw);
  color: #fff;
  padding-bottom: min(30px,5vw);
  text-align: center;
}
.foot-about-box{
  margin-top: calc(-100vw*0.1139);
}
#foot-about-teacher{
  translate:0 8%;
  transition: translate var(--in-out) .5s;
  transition-delay: .5s;
}
footer.is-visible #foot-about-teacher{
  translate:0 0;
}
.foot-scname{
  font-size: min(36px,6vw);
}
.foot-info{
  font-size: min(18px,3.6vw);
  line-height: calc(32/18);
  margin-top: min(20px,2.6vw);
}
.foot-info > * + *{
  margin-top: 1em;
}
/*pagetop*/
.pagetop-wrap {
  display: grid;
  grid-template-columns: min(380px, 40vw);
  justify-content: center;
  overflow: hidden;
}
footer .copy{
  font-size: min(14px,3.4vw);
  margin-top: min(100px,16vw)
}
#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%;
  }
}