@charset "UTF-8";


/* キービジュアル */
.key-visual {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100vw; 
    height: auto;
    max-height: 95vh;
    margin-left: calc(50% - 50vw);
}


.key-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.key-img::after {
    content: '';
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    aspect-ratio: 4 / 1;
    width: 100%;
    height: auto;
    background: url(../images/key-frame.webp) no-repeat center bottom / cover;

}


.childcare-fv .key-img {
    background: url(../images/child-key.webp) no-repeat center top / cover;
}


/*-------------------- 概要 --------------------*/

#overview .title h3,
#uniform .title h3{
    background-color: #fff;
}

.en {
    display: block;
    margin: 0 auto;
    border-radius: 3vw;
}

dl {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 3vw auto 0;
    line-height: 2;
    font-family: "Zen Maru Gothic", sans-serif;
}

dt {
    width: 20%; 
    padding: .8em 0 .8em 1.5em ;
    border-bottom: solid 2.5px #FBCC5A;
    font-weight: 600;
    opacity: 0;
    transition: 0.2s ease;
}

.active dt {
    opacity: 1;
}

dt span {
    display: inline-block;
}

dd {
    width: 80%;
    padding: .8em 0 .8em .8em;
    border-bottom: solid 2.5px #FBCC5A;
    font-weight: 500;
    opacity: 0;
    transition: 0.2s ease;
}
.active dd {
    opacity: 1;
}

dd span {
    display: inline-block;
}

.sitelink {
    border-bottom: solid 2px #723615;
    color: #723615;
}

/* ----------私達の思い---------- */

h3 {
    font-size: 2em;
}

#thoughts {
    position: relative;
}

#thoughts .flex {
    position: relative;
    gap: 2em;
    align-items: center;
    margin-bottom: 5vw;
}

#thoughts .wrap_img {
    position: relative;
    z-index: 1;
    aspect-ratio: 12 / 10;
    padding: 3vw;
    text-align: center;
}
#thoughts .wrap_img img.enchou {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 3vw;
}

.flex-wrap-inner {
    position: relative;
    width: 100%;
    margin:  0 auto;
}
.flex-wrap-inner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    aspect-ratio: 5 / 4;
    width: auto;
    height: 70vw;
    max-height: 700px;
    background: url(../images/about/about_bg.webp) no-repeat center / contain;
    opacity: 0;
    transition: .5s .2s ease;
}
.active .flex-wrap-inner::before {
    opacity: 1;
}

#thoughts h2 {
    position: relative;
    z-index: 5;
}

#thoughts h3 {
    position: relative;
    transform: translateY(.5em);
    margin-bottom: .25em;
    opacity: 0;
    color: #723615;
    transition: .5s .2s ease;
}
#thoughts.active h3 {
    opacity: 1;
    transform: translateY(0);
}

#thoughts p {
    position: relative;
    z-index: 5;
    transform: translateY(.5em);
    text-align: justify;
    opacity: 1;
    transition: .5s .4s ease;
}
#thoughts.active p {
    transform: translateY(0);
    opacity: 1;
}

/* 装飾 */

.deco-width {
    position: absolute;
    z-index: 2;
    height: auto;
}

.deco-width img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

.t-deco,
.u-deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    margin-left: calc(50% - 50vw);
}

.u-deco {
    transform: translateY(-10%);
}

.t-deco .t-deco-inner,
.tu-deco-inner,
.u-deco-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.deco img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.t-deco .deco-item.deco-item1 {
    top: -5%;
    transform: translate(-5% , 0);
    aspect-ratio: 10 / 7;
    width: min(20vw , 20em);
    animation: t-tree 10s ease-in-out infinite;
}

@keyframes t-tree {
  0%, 85%, 100% {
    transform: translate(-5% , 0) rotate(0);
  }
  90% {
    transform: translate(-5% , 0) rotate(5deg);
  }
  96% {
    transform: translate(-5% ,0) rotate(0);
  }
  
}

.u-deco .deco-item.deco-item {
    right: 0;
    transform: translate(10% , 0);
    aspect-ratio: 10 / 7;
    width: min(15vw, 15em);
    animation: u-tree 10s ease-in-out infinite;
}
@keyframes u-tree {
  0%, 85%, 100% {
    transform: translate(10% , 0) rotate(0);
  }
  90% {
    transform: translate(10% , 0) rotate(-5deg);
  }
  96% {
    transform: translate(10% ,0) rotate(0);
  }
  
}

.thoughts-deco2 {
    top: 0;
    right: 0;
    transform: translate(-10%, 100%) rotate(-20deg);
    aspect-ratio: 10 / 7;
    width: min(6vw, 5em);
    height: auto;
    opacity: 0;
    transition: .5s ease;
}
.active .thoughts-deco2  {
    opacity: 1;
    transform: translate(-80% , -10%) rotate(0);
}

.thoughts-deco3 {
    top: 0;
    right: 0;
    transform: translate(100%, 200%) rotate(-20deg);
    aspect-ratio: 10 / 7;
    width: min(4vw, 3em);
    height: auto;
    opacity: 0;
    transition: .5s .2s ease;
}
.active .thoughts-deco3 {
    opacity: 1;
    transform: translate(-20%, 100%) rotate(0);
}

.thoughts-deco4 {
    bottom: 0;
    right: 0;
    transform: translate(0, 200%);
    aspect-ratio: 10 / 7;
    width: min(6vw, 5em);
    height: auto;
}
.thoughts-deco5 {
    bottom: 0;
    left: 0;
    transform: translate(0, 130%) rotate(-15deg);
    display: flex;
    gap: 1em;
    aspect-ratio: 10 / 7;
    width: min(6vw, 5em);
    height: auto;
}

.foot1 {
    transform: translate(0%,50%);
}

.thoughts-deco6 {
    bottom: 0;
    left: 0;
    transform: translate(-50%, -25%) rotate(-15deg);
    display: flex;
    gap: 1em;
    aspect-ratio: 10 / 7;
    width: min(6vw, 5em);
    height: auto;

}

.foot2 {
    transform: translate(0%, 0%) rotate(-30deg);
}

.foot3 {
    transform: translate(0%,50%);
}
.thoughts-deco7 {
    bottom: 0;
    left: 0;
    transform: translate(-100%, -150%) rotate(-15deg);
    display: flex;
    gap: 1em;
    aspect-ratio: 10 / 7;
    width: min(6vw, 5em);
    height: auto;
}

.foot4 {
    transform: translate(0%, 0%) rotate(-14deg);
}

.foot5 {
    transform: translate(0%,50%);
}


.food .thoughts-deco5 img,
.food .thoughts-deco6 img,
.food .thoughts-deco7 img {
    opacity: 0;
    transition: .5s ease;
}

.food.active .thoughts-deco6 img,
.food.active .thoughts-deco5 img,
.food.active .thoughts-deco7 img {
    opacity: 1;
}

.food.active .thoughts-deco5 img:nth-child(1) {
       transition: .5s .2s ease;
}
.food.active .thoughts-deco6 img:nth-child(2) {
       transition: .5s .4s ease;
}
.food.active .thoughts-deco6 img:nth-child(1) {
       transition: .5s .6s ease;
}
.active .thoughts-deco7 img:nth-child(2) {
       transition: .5s .8s ease;
}
.food.active .thoughts-deco7 img:nth-child(1) {
       transition: .5s 1s ease;
}

/* ----------施設紹介---------- */

#introduction.section {
    padding: 5vw 0 min(15vw, 10em) 0;
}

#introduction .section-inner {
    width: 90%;
}

#introduction .flex {
    position: relative;
    gap: 2em;
    align-items: center;
    margin: 0 auto 12em auto;
}

#introduction .int_img {
    position: relative;
    z-index: 1;
    width: 50%;
    border-radius: 3vw;
}

.introduction_text {
    position: relative;
    width: 50%;
}
.introduction_text::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 5 / 3;
    width: auto;
    height: 25em;
    background: url(../images/bg-w.webp) no-repeat center / contain;
}

.intro_inner {
    margin: 0 auto;
    width: 80%;
}

.introduction_text p {
    position: relative;
    z-index: 5;
    transform: translateY(1em);
    opacity: 0;
    transition: .5s .6s ease;
}
.active .introduction_text p {
    transform: translateY(0);
    opacity: 1;
}

.introduction_text p.intro_title {
    line-height: 2;
    font-size: 1.6em;
    font-weight: 700;
    transition: .5s .4s ease;
}

/* 装飾 */

.int-deco1 {
    top: 0;
    right: 15%;
    transform: translate(50%, -100%);
    display: flex;
    gap: 1em;
    aspect-ratio: 10 / 4.7;
    width: 5em;
}
.int-deco1 img {
    animation: about-deco 15s ease-in-out infinite;
}
.int-deco1 img:nth-child(2) {
    animation: about-deco 18s ease-in-out infinite;
}

.int-deco2 {
    bottom: 0;
    left: 0;
    transform: translate(10%, 100%) rotate(0);
    width: 8em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .int-deco2 {
    opacity: 1;
    transform: translate(0%, 120%) rotate(8deg);
}

.int-deco3 {
    bottom: 0;
    right: 0;
    transform: translate(0%, 120%) scaleX(-1);
    width: 1.5em;
}
.active .int-deco3 {
    will-change: transform, opacity;
    animation: int-leaf 4s ease-in-out forwards; 
}

@keyframes int-leaf {
  0% {
    opacity: 0;
    transform: translate(0%, -100%) rotate(0deg) scaleX(-1);
  }
  10% {
    opacity: 1;
  }

  25% {
    transform: translate(20%, 100%) rotate(15deg) scaleX(-1);
  }

  50% {
    transform: translate(-20%, 200%) rotate(-10deg) scaleX(-1);
  }

  75% {
    transform: translate(15%, 300%) rotate(20deg) scaleX(-1);
  }

  100% {
    opacity: 0;
    transform: translate(-10%, 400%) rotate(30deg) scaleX(-1);
  }
  
}


.int-deco4 {
    top: 0;
    right: 0;
    transform: translate(0%, -50%);
    width: 8em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .int-deco4 {
    opacity: 1;
    transform: translate(0%, -70%);
}

.int-deco5 {
    bottom: 0;
    right: 0;
    transform: translate(10%, 50%) rotate(-5deg);
    width: 2em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .int-deco5 {
    opacity: 1;
    transform: translate(0%, 70%) rotate(0);
}

.int-deco6 {
    bottom: 0;
    left: 0;
    transform: translate(0%, 100%);
    width: 2em;
}
.int-deco6 img {
    animation: about-deco 12s ease-in-out infinite;
}

.int-deco7 {
    bottom: 0;
    left: 0;
    transform: translate(80%, 120%);
    width: 3em;
}
.int-deco7 img {
   animation: about-deco 18s ease-in-out infinite;
}

.int-deco8 {
    top: 0;
    right: 0;
    transform: translate(-80%, -10%) rotate(90deg);
    width: 4em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .int-deco8 {
    opacity: 1;
    transform: translate(-70%, -80%) rotate(75deg);
}


.int-deco9 {
    bottom: 0;
    left: 0;
    transform: translate(70%, 100%) rotate(-90deg);
    width: 4em; 
    opacity: 0;
    transition: .5s 1s ease;
}
.active .int-deco9 {
    opacity: 1;
    transform: translate(50%, 100%) rotate(-90deg);
}

.int-deco10 {
    bottom: 0;
    right: 0;
    transform: translate(0%, 170%);
    width: 4em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .int-deco10 {
    opacity: 1;
    transform: translate(0%, 150%);
}

.int-deco11 {
    top: 0;
    right: 0;
    transform: translate(10%, -80%) rotate(5deg);
    width: 6em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .int-deco11 {
    opacity: 1;
    transform: translate(0%, -100%);
}

.int-deco12 {
    bottom: 0;
    right: 0;
    transform: translate(0%, 120%);
    width: 4em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .int-deco12 {
    opacity: 1;
     transform: translate(0%, 100%);
}


.int-deco13 {
    bottom: 0;
    left: 0;
    transform: translate(0%, 100%);
    width: 5em;
    text-align: center;
}
.int-deco13 img {
    width: calc(100% / 2 - 1em);
    height: auto;
    object-fit: contain;
    animation: about-deco 10s ease-in-out infinite;
}
.int_flex {
    position: absolute;
    top: 70%;
    transform: translate(0,-30%);
    display: flex;
    gap: 2.5em;
    height: auto;
}
.int-deco13 img.img_2 {
    animation-delay: .3s;
}
.int-deco13 img.img_3 {
    animation-delay: .6s;
}

.int-deco14 {
    top: 0;
    right: 0;
    transform: translate(-60%, -80%) scale(.8);
    width: 5em;
    text-align: center;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .int-deco14 {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
}

.int-deco15 {
    bottom: 0;
    left: 0;
    transform: translate(0%, 100%);
    width: 2.5em;
}
.int-deco15 img {
    animation: about-deco 10s ease-in-out infinite;
}
.int-deco16 {
    bottom: 0;
    left: 0;
    transform: translate(130%, 140%);
    width: 2.5em;
}
.int-deco16 img {
    animation: about-deco 12s ease-in-out infinite;
}

.int-deco17 {
    bottom: 0;
    right: 0;
    transform: translate(-150%, 140%);
    display: flex;
    gap: 1em;
    width: 2.5em;
}
.int-deco17 img {
    transform: translateX(-10%);
    opacity: 0;
    transition: .5s 1s ease;
}
.int-deco17 img:nth-child(1) {
    transition: .5s 1.5s ease;
}
.active .int-deco17 img {
    opacity: 1;
    transform: translateX(0);
}

.int-deco18 {
    top: 0;
    right: 0;
    transform: translate(-100%, -100%);
    width: 4em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .int-deco18 {
    opacity: 1;
}

.int-deco19 {
    top: -5%;
    right: 0;
    transform: translate(-68%, -55%);
    width: 3.5em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .int-deco19 {
    opacity: 1;
}

.int-deco20 {
    bottom: 0;
    right: 0;
    transform: translate(-70%, 120%) rotate(90deg);
    width: 3.5em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .int-deco20 {
    opacity: 1;
    transform: translate(-70%, 100%) rotate(90deg);
}

.int-deco21 {
    bottom: -50%;
    left: 0;
    transform: translate(0%, 10%);
    width: 4em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .int-deco21 {
    opacity: 1;
    transform: translate(0%, 0%);
}

/* 杜の家 */
.house {
    padding: 1.5em;
    border: solid 5px #F7D061;
    border-radius: 5vw;
    background: #fff;
}

.house-inner {
    padding: 1.5em;
    border: dashed 5px #F7D061;
    border-radius: 4vw;
}

.house-top {
    display: flex;
    gap: 2em;
    padding-bottom: 2em;
    opacity: 0;
}


.house-text {
    position: relative;
}

.house-text h3,
.house-text p,
.house-bottom-img p {
    color: #723615;
}

.house-bottom {
    position: relative;
    display: flex;
    gap: 1em;
    width: 100%;
}


.house-bottom-img {
    width: calc(100% / 3);
    height: auto;
    border-radius: 3em;
    text-align: center;
    opacity: 0;
    transition: .5s ease;
}
.active .house-bottom-img {
    opacity: 1;
}
.active .house-bottom-img:nth-child(2) {
    transition: .5s .2s ease;
}
.active .house-bottom-img:nth-child(3) {
    transition: .5s .4s ease;
}

#introduction .house-bottom-img img {
    width: 100%;
    padding-bottom: 1em;
    border-radius: 3vw;
}

.house-bottom-img p {
    font-size: 1.5em;
}

/* 装飾 */

.h-deco1 {
    top: 0;
    right: 0;
    aspect-ratio: 2 / 1;
    width: 5em;
}
.h-deco2 {
    bottom: 0;
    left: 0;
    transform: translate(-20%,20%);
    aspect-ratio: 2 / 1;
    width: 2.5em;
}
.int-deco0 {
    bottom: 0;
    left: 0;
    transform: translate(250%,0);
    aspect-ratio: 1 / 1;
    width: 5em;
}
.int-deco00 {
    bottom: 0;
    left: 0;
    transform: translate(120%,0);
    aspect-ratio: 1 / 1;
    width: 5em;
}
.int-deco000 {
    bottom: 0;
    right: 0;
    transform: translate(-120%,0);
    width: 5em;
    aspect-ratio: 2 / 1;
}

/* ----------制服---------- */

.uniform-wrap {
    position: relative;
}

#uniform .flex {
    justify-content: center;
    text-align: center;
    gap: 3em;

}

.uniform-kind {
    width: 40%;
}

.kind_img {
    padding-bottom: 2em;
}

.uniform-kind img {
    border-radius: 3vw;
}

.kind-blue {
    display: inline-block;
    padding: 0em 3em;
    border-radius: 2em;
    font-size: 1.5em;
    color: #fff;
    background: #2EA7E0;
}
.kind-red {
    display: inline-block;
    padding: 0em 3em;
    border-radius: 2em;
    font-size: 1.5em;
    background: #F24D2C;
    color: #fff;
}

/* 装飾 */

.uni-deco1 {
    bottom: 0;
    left: 0;
    aspect-ratio: 1 / 2;
    width: 4em;
    transform: scaleX(-1) translate(-40%,50%);
}
.uni-deco2 {
    top: 0;
    left: 0;
    aspect-ratio: 5 / 3;
    width: 15em;
    transform: scaleX(-1) translate(75%,-20%);
}
.uni-deco3 {
    bottom: 0;
    left: 0;
    aspect-ratio: 5 / 4;
    width: 4em;
    transform: translate(-100%,-100%);
}
.uni-deco4 {
    bottom: 0;
    right: 0;
    aspect-ratio: 2 / 1;
    width: 4em;
    transform: translate(50%,50%);
}




@media screen and (max-width: 1023px){
    .intro_inner {
        width: 100%;
    }
}



@media screen and (max-width: 768px){
   
  .en {
    aspect-ratio: 5 / 3;
    margin-bottom: 1.5em;
  }

  dl {
    width: 100%;
    margin: 0 auto;
  }

  dt {
    width: 25%;
    padding: .5em 0;

  }
  dd {
    width: 75%;
    padding: .5em 0 .5em .5em;
  }


    /* 園長先生 */

    #thoughts.section {
    padding: 20vw 0 40vw 0;
    }

    #thoughts .flex {
    flex-direction: column;
    }

    #thoughts .flex-wrap:nth-child(1) {
    max-height: 400px;
    }

    #thoughts .flex-wrap {
    width: 100%;
    padding: 0;
    }

    .flex-wrap-inner {
        max-width: 600px;
    }




    #thoughts .flex {
        gap: 1em;
    }

    #thoughts h3 {
        font-size: 1.71em;
        transition: .5s ease;
    }

    #thoughts.active h3 {
        transform: translateY(1em);
        opacity: 0;
    }

    #thoughts h3.active  {
        transform: translateY(0);
        opacity: 1;
    }

    #thoughts.active p {
        transform: translateY(.5em);
        opacity: 0;
    }

    #thoughts p.active {
        transform: translateY(0);
        opacity: 1;
    }


    .flex-wrap-inner::before {
        top: auto;
        bottom: 0;
        transform: translate(-50% , 10%);
        height: 180vw;
        max-height: 48em;
    }

    .t-deco .deco-item.deco-item1 {
        width: 8em;
        top: 0;
    }

    .t-deco, .u-deco {
        z-index: 2;
        pointer-events: none;
    }

    .thoughts-deco2 {
        width: 3em;
    }

    .thoughts-deco3 {
        width: 2em;
    }

    .thoughts-deco4 {
        width: 4em;
        transform: translate(0 , 100%);
    }

    .thoughts-deco5,
    .thoughts-deco6,
    .thoughts-deco7 {
        gap: .5em;
        width: 2em;
    }

    .thoughts-deco5 {
        transform: translate(100%, 400%) rotate(-30deg);
    }

    .thoughts-deco6 {
        transform: translate(0% , 250%) rotate(-15deg);
    }

    .thoughts-deco7 {
        transform: translate(-100% , 100%) rotate(-15deg);
    }


  /* 施設紹介 */


    .introduction_text::before {
        border-radius: 5em;
        width: 100vw;
        height: 100%;
        padding: 3em 0;
        aspect-ratio: initial;
        background: #fff;

    }

    #introduction .flex {
        flex-direction: column;
        max-width: 600px;
        margin: 0 auto 10em auto;
    }

    #introduction .flex:nth-child(odd) {
        flex-direction: column-reverse;
    }

    #introduction .int_img {
        width: 100%;
    }

    .introduction_text {
        width: 100%;
        
    }

    .int-deco14 {
        width: 4em;
        transform: translate(-50% , -38%);
    }

    /* 杜のいえ */

    #introduction.section {
        padding: 10vw  0 20vw 0 ;
    }

    .house-top{
        display: block;
    }

    .house {
        padding: .5em;
        border: solid 3px #F7D061;
    }

    .house-inner {
        padding: 2em;
        border: dashed 3px #F7D061;
    }

    .house-top h3 {
        text-align: center;
        margin-bottom: .5em;
    }
    
    .house-bottom {
        flex-direction: column;
        gap: 2em;
    }
    .house-bottom-img {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .house-bottom-img p {
        font-size: 1.28em;
        text-align: center;
    }

  #introduction .house-bottom-img img {
    padding-bottom: 0;
  }

  #introduction.bg_1::after {
    transform: translateY(50%) scaleY(-1);
  }
  
  .int-deco000 {
    transform: translate(0 , 0);
    width: 4em;
  }

  .int-deco0 {
    width: 3em;
    transform: translate(150% , 0);
  }
  
    .int-deco00 {
        width: 2.5em;
        transform: translate(50% , 0);
        
    }


    /* 制服 */

    .uniform-wrap {
        max-width: 500px;
        margin: 0 auto;
    }

    #uniform .flex {
        flex-direction: column;
    }

    .uniform-kind {
        width: 100%;
        opacity: 0;
        transition: .5s ease;
    }
    .uniform-kind.active {
        opacity: 1;
    }
    
    .kind_img {
        padding-bottom: 1em;

    }

    .uni-deco1 {
        width: 3em;
        transform: translate(-10% , 60%) scaleX(-1);
    }

}






@media screen and (max-width: 480px){

    .house {
        padding: 0;
    }
    .house-inner {
        padding: 5vw;
        border: 0;
    }

  

}