@charset "utf-8";

body{
font-size:16px;
background: url(../images/p0113_l_remake2.png);
font-family: "Zen Maru Gothic", sans-serif;
overflow-x: hidden;
}

main{
        max-width: 1170px;
        margin: 0 auto;
        padding: 0 30px;
}



/* 【共通】section全体 ↓↓↓ */
.special-background{
  position: relative;
  z-index: 1;
}
.special-background::before{
  position: absolute;
    inset: 0;
    content: "";
    display: block;
    /* background: url(../images/p0153_remake.png);
    background-size: cover;
    background-repeat: repeat; */
    background: #FFF59D;
    z-index: -1;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    /* height: calc(100%); */
    height: 100%;
    /* clip-path: polygon(
    0% 5%, 5% 4.1%, 10% 3.5%, 15% 3.1%, 20% 3%, 25% 3.1%, 30% 3.5%, 35% 4.1%, 40% 5%, 45% 5.9%, 50% 6.5%, 55% 6.9%, 60% 7%, 65% 6.9%, 70% 6.5%, 75% 5.9%, 80% 5%, 85% 4.1%, 90% 3.5%, 95% 3.1%, 100% 3%, 
    100% 95%, 95% 95.9%, 90% 96.5%, 85% 96.9%, 80% 97%, 75% 96.9%, 70% 96.5%, 65% 95.9%, 60% 95%, 55% 94.1%, 50% 93.5%, 45% 93.1%, 40% 93%, 35% 93.1%, 30% 93.5%, 25% 94.1%, 20% 95%, 15% 95.9%, 10% 96.5%, 5% 96.9%, 0% 97%
  ); */
  }


  #contact > .special-background::before{
    clip-path: polygon(
        0% 5%, 5% 4.1%, 10% 3.5%, 15% 3.1%, 20% 3%, 25% 3.1%, 30% 3.5%, 35% 4.1%, 
        40% 5%, 45% 5.9%, 50% 6.5%, 55% 6.9%, 60% 7%, 65% 6.9%, 70% 6.5%, 75% 5.9%, 
        80% 5%, 85% 4.1%, 90% 3.5%, 95% 3.1%, 100% 3%, 

        100% 100%, 
        0% 100%)!important;
  }



div.padding-tb{
    padding: 70px 0 70px !important;
}
div.padding-t{
    padding: 70px 0 0 !important;
}

br.pc-br{
  display: block;
}
br.sp-br{
  display: none;
}
/* 【共通】section全体 ↑↑↑ */



/* slider ↓↓↓ */
/* .mainimage-wrapper {
  width: 100%;
  margin: auto;
}
.mainimage-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}
.swiper-button-next::after , .swiper-button-prev::after{
    color:#4CAF50;
}
.swiper-pagination{
    color:#4CAF50;
}
.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
  }

  .swiper{
    margin-top:65px;
          height: auto;
    vertical-align: top;
    width: 100vw;
    margin-left: calc(50% - 50vw)!important;
    max-height: 500px;
        } */

        .slider-wrapper{
          position: relative;
        }

#slider {
     width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 100vh;
}


/* 上下にふわふわ揺れる動き */
@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* 背景のストライプが流れる動き */
@keyframes stripe-move {
  from { background-position: 0 0; }
  to { background-position: 56px 0; }
}

.slider-message {
  background-size: 56px 56px;
  animation: floating 3.5s ease-in-out infinite, stripe-move 2s linear infinite; 

  position: absolute;
 bottom: 15px;
    right: 3px;

  display: flex;
    text-align: center;
    font-weight: 700;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        -45deg,
        #ffb406,
        #ffb406 5px,
        #ff9d00 5px,
        #ff9d00 10px
    );
    color: #fff;
    flex-direction: column;
    font-size: 20px;
    line-height: 1.6;
    box-sizing: border-box;
}

.slider-message span{
 display: inline-block;
 background: #fff;
 color: #ff9d00;
 padding: 3px 15px;
 border-radius: 999px;
 margin-bottom: 10px;
 box-sizing: border-box;
 font-size: 16px;
}

/* slider ↑↑↑ */


/* 【共通】h1 ↓↓↓ */
h1.h1-normal {
   font-size: 2.4rem;
    text-align: center;
    color: #4CAF50;
    position: relative;
    font-family: "Kiwi Maru", serif!important;
margin-bottom:15px;
}
/* 【共通】h1 ↑↑↑ */



/* 【共通】h2 ↓↓↓ */
h2.h2-normal{
margin-bottom: 20px;
font-family: "Kiwi Maru", serif!important;
position: relative;
   font-size: 2.0rem;
    text-align: center;
    color: #333;
    padding-bottom:20px;
}

h2.h2-normal:after {
content: '';
  position: absolute;
  border-bottom: 10px dotted #4CAF50;
  width: 50px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
/* 【共通】h2 ↑↑↑ */



/* 【共通】h3 ↓↓↓ */
h3.h3-normal{
   color: #fff;
  padding: 0.2rem 0.5em 0.2rem 1.5rem;
  display: block;
  background: #4CAF50;
  border-radius: 25px;
  box-sizing: border-box;
  margin-bottom: 1.0rem;
  font-size: 20px;
  width: 100%;
}
/* 【共通】h3 ↑↑↑ */


/* 【共通】h4 ↓↓↓ */
h4.h4-normal{
font-size: 16px;
  color: #333;
  padding-left: 0.8em;
      margin-bottom: 1.0rem;
  border-left: 5px solid #4CAF50;
}
/* 【共通】h4 ↑↑↑ */



/*【共通】h2直下のdiv ↓↓↓ */
div.content-inner , div.content-subinner , div.content-subitem{
margin: 0 auto;
}
div.content-inner{
text-align:left;
}
div.content-subinner , div.content-subitem{
width: 90%;
}


div.content-inner > p{
margin:0 0 2.2rem 0;
text-align:center;
}

div.one-item{
  margin-bottom: 50px;
}
div.one-item:last-child{
  margin-bottom: 0;
}

div.content-subinner > div{
  margin-bottom: 30px;
}
div.content-subinner > div:last-child{
  margin-bottom: 0;
}

/* 【共通】h2直下のdiv ↑↑↑ */





/* 影付きリスト */
ul.shadowed-list{
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
    }

    ul.shadowed-list-characteristic{
      grid-template-columns: repeat(3, 1fr);
    }

    ul.shadowed-list-contact{
      grid-template-columns: repeat(2, 1fr);
    }

ul.shadowed-list-contact li{
  padding: 15px;
  height: 100%;
}


    .full-width{
  grid-column: 1 / -1;
}

    /* ul.shadowed-list > li:nth-child(2) {
        margin-top: 50px;
    } */

    ul.shadowed-list > li.mt50-listitem {
        margin-top: 50px;
    }

    ul.shadowed-list > li{
      position: relative;
    display: flex;
    background: #fff;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 10px;
    align-items: center;
    justify-content: flex-start;
    /* height: 100%; */
    border: 2px solid #4CAF50;
    box-shadow: 12px 12px 0px 0px #4CAF50;
    }

    div.shadowed-item > h4::after{
      background: #4CAF50;
    content: "";
    position: absolute;
    width: 25px;
    height: 3px;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    }
    div.shadowed-item > p{
    padding: 0 15px;
    }
    /* 影付きリスト */



    /* リストNo. */
span.list-number-admission,span.list-number-characteristic{
text-align: center;
    margin: 0 auto;
    font-size: 1.8rem;
    line-height: 1;
    background-image: url(../images/kindergarten-list-noicon.svg);
    background-size: cover;
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: absolute;
    font-weight: 700;
    }

    span.list-number-characteristic{
      top: -30px;
    left: -25px;
    }

    span.list-number-admission{
      top: -30px;
    left: -25px;
    /* bottom: -30px;
    left: -30px; */
    }
    /* 【共通】h2直下のdiv ↑↑↑ */

    

    /* 当園の特徴 ↓↓↓ */
    div.shadowed-item > img{
    width: 100%;
    height: auto;
    text-align: center;
    display: block;
    margin-top: auto;
    }

    div.shadowed-item > h4{
      padding: 15px 15px 30px;
    text-align: center;
    font-weight:700;
    color: #4CAF50;
    font-size:1.4rem;
    position: relative;
    }

  
.flipLeftTopTrigger{
  opacity: 0;
}

.flipLeftTop{
  animation-name: flipLeftTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes flipLeftTopAnime {
  from {
    transform: translate(-20px,80px) rotate(-15deg);
    opacity: 0;
  }
  to {
    transform: translate(0,0) rotate(0deg);
    opacity: 1;
  }
}

/* 当園の特徴 ↑↑↑ */




/* クラス分け ↓↓↓ */
ul.class-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    align-items: stretch;
}

ul.class-list li {
    position: relative;
}

.icon-block {
  margin-top: auto;
    border-radius: 10px;
    padding: 30px 20px 20px;
    text-align: center;
    position: relative;
    transition: transform .3s ease;
}



.zoo-icon{
    top: -25px;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    z-index: 10;
    transition: transform 0.3s ease;
  transform: translateX(-50%) scale(1.0);
}
.icon-block:hover .zoo-icon{
  transform: translateX(-50%) scale(1.25);
}


.chick{
  background: #FFE054;
  transition: all 0.3s;
}
.rabbit{
  background: #FF99AB;
  transition: all 0.3s;
}
.sheep{
  background: #A3D1FF;
  transition: all 0.3s;
}

.icon-block.chick:hover{
  background: #FFD100;
}
.icon-block.rabbit:hover{
  background: #FF758F;
}
.icon-block.sheep:hover{
  background: #7FBFFF;
}

/* 吹き出しのデザイン */
.bubble {
    background: -webkit-repeating-linear-gradient(
        -45deg,
        #fff9bf,
        #fff9bf 5px,
        #FFF59D 5px,
        #FFF59D 10px
    );
  background: repeating-linear-gradient(
        -45deg,
        #fff9bf,
        #fff9bf 5px,
        #FFF59D 5px,
        #FFF59D 10px
    );
    padding: 15px;
    border-radius: 999px;
    font-size: 18px;
    font-weight: bold;
    width: 100%;
    position: relative;
    /* height: 100%; */
    border: 3px dotted #4CAF50;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.05);


    position: absolute; 
    bottom: 100%;
    left: 0;
    margin-bottom: 30px;
    
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    z-index: 20;
}


/* クラスがついた時の状態 */
.class-list li.is-active .bubble {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}




/* 吹き出しのしっぽ（三角形） */
.bubble::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 10px solid #4CAF50;
    z-index: 1;
}

/* 吹き出しのしっぽ：塗り（前面に配置） */
.bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
    border-top: 8px solid #fff2b8;
    z-index: 2;
}

/* 年齢タグの装飾 */
.age-tag {
    display: inline-block;
    padding: 2px 12px;
    background: #fff;
    border-radius: 999px;
    font-size: 16px;
    margin: 0 0 0 10px;
    font-weight: 400;
}

/* クラス分け ↑↑↑ */





/* 1日の流れ ↓↓↓ */
.chick-color{
  background: #FFE054!important;
  color: #333!important;
}
.rabbit-color{
  background: #FF99AB!important;
  color: #333!important;
}
.sheep-color{
  background: #A3D1FF!important;
  color: #333!important;
}


.flow-wrapper {
    position: relative;
    margin: 0 auto;
}
.left-content_paddingtop {
padding: 30px 10px 10px!important;
}

.left-content > h3 {
  color: #fff;
}

div.left-content {
  display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    margin: 0 auto;
        flex-direction: column;
        position: relative;
        padding: 10px;
}

div.left-content::after{
  width: 100%;
    height: 20px;
    right: 0;
    bottom: -20px;
    z-index: 10;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    top: auto;
    content: "";
    position: absolute;
}


.time-colorA,.time-colorB,.time-colorC,.time-colorD,.time-colorE,.time-colorF,.time-colorG,.time-colorH,.time-title {
        display: grid;
        grid-template-columns: 1fr 6fr;
    box-sizing: border-box;
    border-radius: 10px;
    }


.right-content {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}
.right-content > ul{
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      text-align: center;
    width: 100%;
    height: 100%;
      overflow: visible!important;
}
.right-content > ul > li {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #333;
    text-align: left;
   position: relative;
}

ul.class-table-title {
padding: 0!important;
}

ul.class-table-title li {
    display: flex;
    flex-direction: column;
    border-radius: 10px 10px 0 0;;
    box-sizing: border-box;
    padding: 20px 10px 10px 10px;
    text-align: center;
    position: relative;
    overflow:visible!important;
}


.right-content > ul > li:nth-child(1) { background: #fff8da;}
.right-content > ul > li:nth-child(2) { background: #fff0f4; }
.right-content > ul > li:nth-child(3) { background: #f3f9ff; }

.right-content > ul > li:nth-child(1)::after ,
.right-content > ul > li:nth-child(2)::after ,
.right-content > ul > li:nth-child(3)::after ,
.right-content > ul > li:nth-child(1)::before,
.right-content > ul > li:nth-child(2)::before,
.right-content > ul > li:nth-child(3)::before{
  position: absolute;
  content: "";
  left: 50%;
  transform: translateX(-50%);
}

ul.class-table-title > li::after ,
ul.class-table-title > li::before,
.time-colorG .right-content > ul > li:nth-child(1)::before,
.time-colorG .right-content > ul > li:nth-child(1)::after {
    display: none;
}

ul.time-list-last > li::before,
ul.time-list-last > li::after {
    display: none !important;
}
.right-content > ul > li:nth-child(1)::before,
.right-content > ul > li:nth-child(2)::before,
.right-content > ul > li:nth-child(3)::before{
  bottom: -3px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  z-index: 5;
}
.right-content > ul > li:nth-child(1)::after ,
.right-content > ul > li:nth-child(2)::after ,
.right-content > ul > li:nth-child(3)::after{
  height: 24px;
  width: 0;
  bottom: 0;
}




.right-content > ul > li:nth-child(1)::before{
  border-top:8px solid #FFE054;
}

.right-content > ul > li:nth-child(2)::before{
  border-top:8px solid #FF99AB;
}
.right-content > ul > li:nth-child(3)::before{
  border-top:8px solid #A3D1FF;
}

.right-content > ul > li:nth-child(1)::after{
  border-left: 3px dotted #FFE054;
}
.right-content > ul > li:nth-child(2)::after{
  border-left: 3px dotted #FF99AB;
}
.right-content > ul > li:nth-child(3)::after{
  border-left: 3px dotted #A3D1FF;
}



.right-content,
.right-content > ul {
  overflow: visible;
}


ul.class-table-title li img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
        top: -30px;
}


.time-colorA > div.left-content{ background: #c8e100;}
.time-colorB > div.left-content{ background: #b6da0b;}
.time-colorC > div.left-content{ background: #a5d317;}
.time-colorD > div.left-content{ background: #93cc22;}
.time-colorE > div.left-content{ background: #81c42e;}
.time-colorF > div.left-content{ background: #6fbd39;}
.time-colorG > div.left-content{ background: #5eb645;}
.time-colorH > div.left-content{ background: #4caf50;}

.time-colorA > div.left-content::after{ background: #c8e100;}
.time-colorB > div.left-content::after{ background: #b6da0b;}
.time-colorC > div.left-content::after{ background: #a5d317;}
.time-colorD > div.left-content::after{ background: #93cc22;}
.time-colorE > div.left-content::after{ background: #81c42e;}
.time-colorF > div.left-content::after{ background: #6fbd39;}
.time-colorG > div.left-content::after{ background: #5eb645;}

div.left-content > svg{
  width: 60px;
  height: 60px;
}


/* .right-content > ul > li.time-full-width{
  grid-column: 1 / 4; 
    width: 100%;
    text-align: center;
    padding: 15px 0;
    border-radius: 0 0 10px 10px;
    background: #F0FFF4!important; 
    display: flex;
    justify-content: center;
    align-items: center;
} */

.day-catchphrase{
  position: absolute;
  right: 0;
  transform: rotate(-6deg);
  /* left: 50%;
  transform: rotate(-6deg) translateX(-50%); */
  bottom: 0;
  font-weight: 700;
  font-family: "Hachi Maru Pop", cursive;
  color: #4CAF50;
}
/* 1日の流れ ↑↑↑ */



/* 年間行事 リメイク ↓↓↓ */
div.season-wrapper{
  position: relative;
}

.season-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.season-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}


.icon-autumn, .icon-spring, .icon-summer, .icon-winter {
    display: flex;
    width: 70px;
    height: 70px;
    color: #fff;
    text-align: center;
    font-size: 2.4rem;
        align-items: center;
    justify-content: center;
    font-size: 26px;
}

.icon-spring{
    padding: 15px 0 0 20px;
    border-radius: 100% 0 0;
    background: #ff8390;
}
.icon-summer {
    padding: 15px 20px 0 0;
    background: #fac142;
    border-radius: 0 100% 0 0;
}
.icon-autumn {
    padding: 0 0 15px 20px;
    background: #c34f01;
    border-radius: 0 0 0 100%;
}
.icon-winter {
    padding: 0 20px 15px 0;
    background: #237da1;
    border-radius: 0 0 100%;
}


.season-text-wrapper{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.content-spring, .content-summer, .content-autumn, .content-winter {
  min-height: 385px;
  border-radius: 10px;
  background-size: contain;
  box-sizing: border-box;
}
.content-spring{
  background: #ffe5e8;
}
.content-summer{
  background: #fffbd4;
}
.content-autumn{
  background: #ffebde;
}
.content-winter {
  background: #e0f7ff;
}

.content-spring > div.content-item,
.content-summer > div.content-item,
.content-autumn > div.content-item,
.content-winter > div.content-item {
  display: flex;
  margin-bottom: 20px;
}
.content-spring > div.content-item:last-child,
.content-summer > div.content-item:last-child,
.content-autumn > div.content-item:last-child,
.content-winter > div.content-item:last-child {
  margin-bottom: 0;
}

.content-spring,.content-summer {
  padding: 20px 20px 70px 20px;
}

.content-autumn, .content-winter {
  padding: 70px 20px 20px 20px;
}

.season-text-wrapper h4{
  background: #fff;
    /* position: relative; */

    display: flex;
    text-align: center;
    font-weight: 700;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: #4CAF50;
    border: #4CAF50 1px solid;
    padding: 5px;
    font-size: 16px;
    margin-right: 10px;
}
div.sp-season-h3 {
    display: none;
}
/* .season-text-wrapper h4::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
    right: 0;
    border: 5px solid transparent;
    border-left: 5px solid #4CAF50;
} */

.event-list li::before{
  background: url(../images/kindergarten-list-noicon.svg);
      position: absolute;
    content: "";
    left: 0;
    width: 15px;
    height: 15px;
    top: 0.3rem;
}
.event-list li{
      position: relative;
    padding-left: 20px;
    margin-bottom: 0.4rem;
    list-style: none;
}
.event-list li:last-child{
  margin-bottom: 0;
}
/* 年間行事 リメイク ↑↑↑ */



/* 入学案内 ↓↓↓ */
/* ul.admission-list li:nth-child(2),ul.admission-list li:nth-child(3),ul.admission-list li:nth-child(4){
padding: 30px 15px 15px!important;
}
ul.admission-list li h4 {
  color: #4CAF50;
  font-size: 20px;
  padding: 2px 15px;
  background: #fff;
  border-radius: 999px;
  margin-bottom: 10px;
}

ul.admission-list li{
    text-align: center;
    margin: 0 auto;
        position: relative;
        padding: 15px;
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 20px;
}

ul.admission-list li::after{
  width: 100%;
    height: 20px;
    right: 0;
    bottom: -20px;
    z-index: 10;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    top: auto;
    content: "";
    position: absolute;
}

ul.admission-list li:nth-child(1){ background: #c8e100;}
ul.admission-list li:nth-child(2){ background: #b6da0b;}
ul.admission-list li:nth-child(3){ background: #a5d317;}
ul.admission-list li:nth-child(4){ background: #93cc22;}

ul.admission-list li:nth-child(1)::after{ background: #c8e100;}
ul.admission-list li:nth-child(2)::after{ background: #b6da0b;}
ul.admission-list li:nth-child(3)::after{ background: #a5d317;}
ul.admission-list li:nth-child(4)::after{ 
  background: #93cc22;
  content: none;
}

ul.admission-list li img{
  width: 100%;
  height: auto;
}
ul.admission-list li div p{
  text-align: left;
} */




ul.admission-list-remake{
  list-style: none;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 40px;
}
ul.admission-list-remake li{
  position: relative;
}

.admission-img{
  position: relative;
}

.admission-img img{
  border-radius: 10px;
  width: 100%;
  height: auto;
      vertical-align: bottom;
}

.admission-text h4 {
  color: #4caf50;
  font-size: 20px;
  /* margin: 40px 0 10px; */
  margin: 10px 0;
  padding-bottom: 5px;
  border-bottom: 2px solid #4caf50;
}

ul.admission-list-remake li::after ,
ul.admission-list-remake li::before{
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: -35px;
}

ul.admission-list-remake li::after{
  border-bottom: 6px dotted #4caf50;
  height: 24px;
  width: 40px;
  bottom: 0;
} 
ul.admission-list-remake li::before{
  /* border-top:8px solid #FFE054; */
  bottom: -3px;
  width: 0;
  height: 0;
  z-index: 5;
  border-left: 8px solid #4caf50;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
/* 入学案内 ↑↑↑ */


/* 諸費用 */
.cost-table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-top: 1px solid #4CAF50;
}

.cost-table th,
.cost-table td{
  padding: 10px;
  box-sizing: border-box;
}

.cost-table th{
  width: 350px;
  text-align: center;
  color: #333;
  font-weight: 700;
  background: #f2ffc1;
  border-bottom: 1px solid #4CAF50;
}

.cost-table td{
  text-align: right;
  font-size: 22px;
  font-weight: 700;
  border-bottom: 1px solid #4CAF50;
}

.targetage,
.cost-unit{
  font-size: 16px;
}

.targetage{
  margin-right: 10px;
}

.cost-table tfoot th,
.cost-table tfoot td{
  border-top: 4px double #4CAF50;
  border-bottom: 1px solid #4CAF50;
  font-weight: 700;
  background: #cff6a3;;
}

.cost-table tfoot td{
  color: #aa0202;
}
/* 諸費用 */



/* 質問 ↓↓↓ */
ul.qa-wrapper > li {
  border:#94e798 1px solid;
  border-radius: 10px;
  box-sizing: border-box;
  list-style: none;
  overflow: hidden;
  margin-bottom: 10px;
}

ul.qa-wrapper > li:last-child {
  margin-bottom: 0;
}

/* 質問部分 */
ul.qa-wrapper > li > div {
      display: flex;
  align-items: center;
  padding: 15px;
  justify-content: space-between;
}
ul.qa-wrapper > li > div.question {
  background:#94e798;
  transition: all 0.3s;
  cursor: pointer; /* ← クリックできることを示す */
}
ul.qa-wrapper > li > div.question:hover svg{
  transition: transform 0.5s ease-out;
}

/* ホバーで色変更（自然） */
ul.qa-wrapper > li > div.question:hover {
  background:#4CAF50;
  box-sizing: border-box;
}
ul.qa-wrapper > li > div.question:hover svg{
  transition: transform 0.3s ease-in; 
  transform: scale(1.5);
}

/* 回答部分 */
ul.qa-wrapper > li > .answer {
  background: url(../images/qa-bg.png);
background-size: cover !important;
  max-height: 0;            /* ← 初期は閉じている */
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 15px;          /* 開く前は縦パディングなし */
}
ul.qa-wrapper > li > div.answer{
    width: 100%!important;
    display: block!important;
}
ul.qa-wrapper > li > div.answer> div{
    width: 100%!important;
}

/* 開いた状態 */
ul.qa-wrapper > li.open .answer {
  max-height: 500px;
  padding: 15px;
}


/* Q / A マーク */
ul.qa-wrapper > li > div > div > span {
  background: #fff;
  padding: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

/* テキスト間のマージン */
ul.qa-wrapper > li > div > div > p {
  margin-left: 10px;
}

ul.qa-wrapper > li > div > div{
  display: flex;
  align-items: center;
}

/* 通常状態 */
ul.qa-wrapper > li .question svg {
  transition: transform 0.3s ease;
  transform: rotate(0deg) scale(1);
}

/* ホバー（閉じている時：＋が拡大） */
ul.qa-wrapper > li:not(.open) .question:hover svg {
  transform: rotate(0deg) scale(1.5);
}

/* 開いた状態（×） */
ul.qa-wrapper > li.open .question svg {
  transform: rotate(45deg) scale(1);
}

/* 開いた状態でホバー（×のまま拡大） ← これが今回の肝 */
ul.qa-wrapper > li.open .question:hover svg {
  transform: rotate(45deg) scale(1.5);
}
/* 質問 ↑↑↑ */






/* 園長の紹介 ↓↓↓ */
 ul.list-content > li{
      position: relative;
      padding-left:20px;
      margin-bottom: 0.4rem;
      list-style: none;
 }

  ul.list-content > li:last-child{
      margin-bottom: 0;
 }

 ul.list-content > li > svg{
    position: absolute;
    content: "";
    left: 0;
    width: 15px;
    height: 15px;
    top: 0.3rem;
 }


 div.principal-grid{
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
div.principal-img{
  margin: 0 auto;
}
div.principal-grid > img{
border-radius: 10px;
}
div.principal-text >.name{
font-size: 1.8rem;
color: #4CAF50;
font-weight: 700;
margin-bottom:1.0rem;
}
div.principal-text .name > span{
font-size: 1.2rem;
display: block;
}
div.principal-profile > div > ul{
list-style: none;
/* margin: 0 auto;
width: 90%; */
}
/* 園長の紹介 ↑↑↑ */



/* form ↓↓↓ */
.contact-buttun svg {
position: absolute;
content:"";
transform: translateY(-50%);
top: 50%;
right: 15px;
}
.contact-buttun {
display: block;
background: #fac23f;
border-radius: 5px;
font-size: 16px;
line-height: 1.0em;
font-weight: normal;
text-decoration: none;
color: #fff;
transition: all 0.3s;
border: solid 1px #fac23f;
color: #333;
font-weight: 600;
position: relative;
padding: 10px 48px 10px 10px;
line-height: 1.5;
text-align: left;
margin: 0 auto;
box-sizing: border-box;
text-align: center;
margin-top:20px;
width: 90%;
}
.contact-buttun:hover {
border: solid 1px #ff8000;
background: #fff;
color: #ff8000;
}
.contact-buttun:hover svg{
fill: #ff8000;
transition: all 0.3s;
}

a.contact-method{
  color: #4CAF50!important;
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
}


div.contact-method-inner{
  color: #4CAF50!important;
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  position: relative;

  padding-left: 40px;
}
div.contact-method-inner svg{
  position: absolute;
  content: "";
  top:50%;
  transform: translateY(-50%);
  width:30px;
  height: 30px;
  fill:#4CAF50;
  left:0;
}


form {
    background: #fff;
    padding: 20px;
    margin: 0 auto;
    border-radius: 10px;
    text-align: left;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}
input, textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 16px;
}
textarea {
    resize: vertical;
    height: 120px;
}
form button {
    background-color: #fac23f;
    color: #333;
    border: none;
    padding: 10px;
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}
form button:hover {
    background-color: #ff8000;
}
/* form ↑↑↑ */



/* 補足 ↓↓↓ */
body a{
text-decoration: none;
color:#000;
}
.br-sp{
  display: none;
}
.br-pc{
  display: block;
}
.mb40{
    margin-bottom: 40px;
}

/* ※付list */
div.annotation-content > ul > li{
  margin-bottom: 0.4rem;
  list-style: none;
  position: relative;
  padding-left:20px;
 }

div.annotation-content > ul > li:last-child{
  margin-bottom: 0;
 }

div.annotation-content > ul > li > span.annotation-icon{
  position: absolute;
  content: "";
  left: 0;
}
/* 補足 ↑↑↑ */


/* ページトップ ↓↓↓ */
/*========= ページトップのためのCSS ===============*/
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:30px;
	z-index: 999;
	opacity: 0;
	transform: translateY(150px);
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(150px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(150px);
  }
}

/*画像の切り替えと動き*/
#page-top a {
    /*aタグの形状*/
	display: block;
	width: 100px;
	height: 100px;
	color: #333;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
    /*背景画像の指定*/
	background: url("../images/pagetopB.png") no-repeat center;
	background-size: contain;
}

#page-top.floatAnime a{
	width: 100px;
	height: 130px;
    /*背景画像の指定*/
	background: url("../images/pagetopA.png") no-repeat center;
	background-size: contain;
    /*アニメーションの指定*/
	animation: floatAnime 2s linear infinite;
	opacity: 0;
}

@keyframes floatAnime {
  0% { transform: translateX(0); opacity: 0; }
  25% { transform: translateX(-6px);opacity: 1; }
  50% { transform: translateX(0) }
  100% { transform: translateX(6px);opacity: 1; }
}

/*Page Topと書かれたテキストの位置*/
#page-top span{
    position: absolute;
    bottom: -20px;
    right: 20px;
	color: #666;
}
/*検証のためのCSS*/
/* section{
padding: 500px 0;
} */

/* ページトップ ↑↑↑ */



/* スクロールをしたら要素を動かす ↓↓↓ */
.fadeUpTrigger{
opacity: 0;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* スクロールをしたら要素を動かす ↑↑↑ */