@charset "UTF-8";

 /*========
 fadeIn 
 ========*/

 .fadeIn{
    opacity: 0;
    transition: 1.5s;
}

.fadeIn.animated{
    opacity: 1;
}   
 
 /* ======================= 
top common
 ======================= */

 :root {
    --primary-white: #F1E7DF;
    --primary-black: #46332F;
    --primary-pink: #E38B75;
    --primary-beige: #E6CCB5;
    --contentWidth: 83.6%;
    --contentPadding: 8.2%;
 }


 .btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 53%;
    max-width: 100%;
    min-width: 180px;
    height: 30px;
    background: var(--primary-pink);
    border: 1px solid var(--primary-pink);
    border-radius: 40px;
    box-sizing: border-box;
    padding: 0 36px 0 36px;
    color: var(--primary-white);
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition-duration: 0.4s;
    position: absolute; 
    bottom: 90px;
    -webkit-transition: all .3s;
    transition: all .3s;
 }

 .btn:hover {
    color: var(--primary-pink, #E38B75);
    border:2px solid var(--primary-pink, #E38B75);
    background-color: var(--primary-white, #F1E7DF);
  }

.section__title{
    max-width: 100%;
    margin-top: 30%;
}

/* top__common PC */
@media screen and (min-width: 960px) {
    .btn{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        max-width: 100%;
        min-width: 180px;
        height: 40px;
        margin-top: 200px;
        background: var(--primary-pink);
        border: 1px solid var(--primary-pink);
        border-radius: 40px;
        box-sizing: border-box;
        padding: 0 36px 0 36px;
        color: var(--primary-white);
        font-size: 1.5rem;
        letter-spacing: 0.1em;
        line-height: 1.3;
        text-align: center;
        text-decoration: none;
        font-size: 2.0rem;
        -webkit-transition: all .3s;
        transition: all .3s;
 }

    .btn:hover {
        color: var(--primary-pink, #E38B75);
        border:2px solid var(--primary-pink, #E38B75);
        background-color: var(--primary-white, #F1E7DF);
    }


    .section__title{
        max-width: 100%;
        margin-top: 150px;
    }
}


 /* ======================= 
main
 ======================= */

 /* top slide */
.main__top{
    position: relative;
    display: flex;
    background-image: url(../img/top_mainimg01_SP.webp);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100svh;
    flex-direction:column;
    align-items:center;
    padding-bottom: 10%;
}

.main__title{
    width: 70%;
    margin-top: 200px;
}

.scroll{
    width: 8%;
    text-align: center;
    position: absolute;
    bottom: 20px;
}

/* main__top PC */
@media screen and (min-width: 960px){
    .main__top{
        position: relative;
        display: flex;
        background-image: url(../img/top_mainimg01_PC.webp);
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 100svh;
        flex-direction:column;
        align-items:center;
        padding-bottom: 10%;
    }

    .main__title{
        max-width: 30%;
        margin: 140px 0 0 600px;
    }

    .scroll{
        position: absolute;
        bottom: 20px;
        width: 40px;
        text-align: center;
    }

}


/* about slide */
.main__about{
    display: flex;
    background-image: url(../img/top_about_slide.webp);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100svh;
    flex-direction:column;
    align-items:center;
    position: relative;
}

.about__txt{
    display: block;
    font-size: 1.4rem;
    position: absolute; 
    bottom: 200px;
    width: 100%;
    background-color: rgba(241,231,223,0.3);
    padding: 20px;

}

/* about slide PC */
@media screen and (min-width: 960px){
    .main__about{
        display: flex;
        background-image: url(../img/about_slide_PC.webp);
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 100svh;
        flex-direction:column;
        align-items:center;
    }

    .about__txt{
        font-size: 2.0rem;
        color: var(--primary-black, #46332F);
        margin-top: 30px;
    }

}
/* gallery slide */
.main_gallery{
    display: flex;
    background-image: url(../img/top_gallery_slide.webp);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100svh;
    flex-direction:column;
    align-items:center;
    position: relative;
}

.gallery__txt{
    display: block;
    font-size: 1.4rem;
    position: absolute; 
    bottom: 200px;
    width: 100%;
    background-color: rgba(241,231,223,0.3);
    padding: 20px;
}

/* gallery slide PC */
@media screen and (min-width: 960px){
    .main_gallery{
        display: flex;
        background-image: url(../img/gallery_slide_PC.webp);
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 100svh;
        flex-direction:column;
        align-items:center;
    }

    .gallery__txt{
        font-size: 2.0rem;
        margin-top: 30px;
    }
}


/* news silde */

.main_news{
    display: flex;
    position: relative;
    background-image: url(../img/top_news_slide.webp);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100svh;
    flex-direction:column;
    align-items:center;
    position: relative;
    padding: 58px 24px 58px 24px;

}

.section__title--news{
    width: 100%;
    height: 20%;
}

.section__title--news img{
    height: 100%;
}

.news__txt{
    width: 100%;
    font-size: 1.2rem;
    margin-top: 2%;
}

.news__list {
    display: flex;
    background-color: var(--primary-white, #F1E7DF);
    border-radius: 30px;
    padding: 0 20px;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 4%;
}


.news__content{
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 20px 0;
}

.news__list li{
    border-bottom: 4px dotted var(--primary-beige, #E6CCB5)
}


.news__list li:last-child{
    border-bottom: none;
}

.news__img{
    width: 34%;
    max-width: 40%;
    border-radius: 10px; 
}

.item__txt{
    gap: 8px;
    font-size: 1.2rem;
    text-align: left;
}

.news__time{
    font-size: 1.0rem;
}

.news__topic{
    font-size: 1.3rem;
}

.btn--news{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 53%;
    max-width: 100%;
    min-width: 180px;
    height: 30px;
    background: var(--primary-pink);
    border: 1px solid var(--primary-pink);
    border-radius: 40px;
    box-sizing: border-box;
    padding: 0 36px 0 36px;
    color: var(--primary-white);
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition-duration: 0.4s;
    margin-top: 8%;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.btn--news:hover {
    color: var(--primary-pink, #E38B75);
    border:2px solid var(--primary-pink, #E38B75);
    background-color: var(--primary-white, #F1E7DF);
}


/* news slide PC */
@media screen and (min-width: 530px){
    .main_news{
        display: flex;
        position: relative;
        background-image: url(../img/top_news_slide_PC.webp);
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 100svh;
        flex-direction:column;
        align-items:center;
        position: relative;
        padding: 0 16%;
    }

    .section__title--news{
        max-width: 100%;
        margin-top: 100px;
    }

    .news__txt{
        font-size: 1.8rem;
        margin-top: 2%;
    }

    .news__list {
        display: flex;
        background-color: var(--primary-white, #F1E7DF);
        border-radius: 30px;
        padding: 40px;
        flex-direction: row;
        gap: 0;
        margin-top: 2%;
        align-items: flex-start;
        gap:2%;
        height: auto;
    }

    .news__list li{
        width: 30%;
        border-bottom: none;
    }


    .news__list a{
        display: flex;
        gap: 8px;
        flex-direction: column;
        height: 100%;
    }
    

    .news__img{
        display: flex;
        max-width: 100%;
        height: 50%;
        width: 100%;
    }

    .item__txt{
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: left;
        width: 100%;
        padding-left: 8px;
    }

    .news__time{
        font-size: 1.4rem;
    }
    
    .news__topic{
        font-size: 1.6rem;
    }

    .btn--news{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        max-width: 100%;
        min-width: 180px;
        height: 40px;
        margin-top: 200px;
        background: var(--primary-pink);
        border: 1px solid var(--primary-pink);
        border-radius: 40px;
        box-sizing: border-box;
        padding: 0 36px 0 36px;
        color: var(--primary-white);
        font-size: 1.5rem;
        letter-spacing: 0.1em;
        line-height: 1.3;
        text-align: center;
        text-decoration: none;
        transition-duration: 0.4s;
        font-size: 2.0rem;

        position: absolute;
        bottom: 20px;
        -webkit-transition: all .3s;
        transition: all .3s;
     }
    
    .btn--news:hover {
        color: var(--primary-pink, #E38B75);
        border:2px solid var(--primary-pink, #E38B75);
        background-color: var(--primary-white, #F1E7DF);
    }

}

/* contact slide */
.main_contact{
    display: flex;
    background-image: url(../img/top_contact_slide.webp);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100svh;
    flex-direction:column;
    align-items:center;
    padding-bottom: 10%;
    position: relative;
}


.contact__txt{
    margin-top: 20px;
    font-size: 1.4rem;
    width: 100%;
    background-color: rgba(241, 231, 223, 0.3);
    padding: 20px;
}

.contact__insta{
    margin-top: 50px;
    width: 100%;
}

/* contact slide PC */
@media screen and (min-width: 960px){
    .main_contact{
        display: flex;
        background-image: url(../img/contact_slide_PC.webp);
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 100svh;
        flex-direction:column;
        align-items:center;
        padding-bottom: 10%;
    }

    .contact__txt{
        margin-top: 0;
        font-size: 1.8rem;
    }
}

/* footerSlide */

.slide-animation {
    display: flex;
    gap: 40px;
    overflow: hidden;
    height: 70svh;
    align-items: center;
    max-width: 150%;
}

.slide-contents {
    display: flex;
    gap: 40px;
    animation: loopAnimation 30s linear infinite;
}

.slide-animation li {
    width: 200px;
    position: relative;
}

.footer__img--01{
    position: absolute;
    top: 0;
}

.footer__img--02{
    position: absolute;
    top: 50px;
}

.footer__img--03{
    position: absolute;
    top:200px ;
}

.footer__img--04{
    position: absolute;
    top:70px ;
}

.footer__img--05{
    position: absolute;
    top:-20px ;

}

.footer__img--05 img{
    border-radius: 10px;
}

.footer__img--06{
    position: absolute;
    top:100px ;
}

.footer__img--06 img{
    border-radius: 20px;
    height: 80%;
}

.footer__img--07{
    position: absolute;
    top:70px ;
}

.footer__img--07 img{
    border-radius: 20px;
}



@keyframes loopAnimation {
    0% {
    transform: translate(0%);
    }
    100% {
    transform: translate(-100%);
    }
}