@charset "utf-8";

/* =================
ここからmain
==================== */
/* main visのスリック調べていれる */
.main {
    margin-top: 70px;

}

/* slider */
.mainVisSP__slider {
    display: block;
    /*  ヘッダーを含めて全画面表示になるよう計算 */
    height: calc(100vh - 70px);
    object-fit: cover;
    padding: 0;
    line-height: 0;
    position: relative;
}

/* divだけでなく、pictureタグ内のImgにも同じ設定かける */
.mainVisSP__slider img {
    height: calc(100vh - 70px);
    object-fit: cover;
    width: 100%;
}

.mainTitleSP {
    position: absolute;
    top: 57.7%;
    left: 4.5%;
}

.logoSP {
    width: 171px;
    height: 117px;
}

.mainTitleSP__detail {
    display: flex;
    flex-direction: column;
}

.mainTitleSP__place {
    padding: 5px 15px;
    background: rgba(255, 255, 255, 0.80);
    text-align: center;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    margin-top: 15px;
    width: 180px;
}

.mainTitleSP__txt {
    padding: 5px 15px;
    background: rgba(255, 255, 255, 0.80);
    text-align: center;
    font-weight: 500;
    margin-top: 5px;
    font-size: 1.6rem;
    width: 260px;
}

/* slider ここまで */

.mainTopics {
    padding: var(--contentPadding);
    justify-content: center;
}

.mainTopics__title {
    text-align: center;
    font-family: "Zen Maru Gothic";
    font-size: 2rem;
    margin-top: 50px;
}

.mainTopics__txt {
    text-align: center;
    font-size: 1.6rem;
    margin-top: 20px;
}

.brPC {
    display: none;
}

.mainTopicsVis {
    display: none;
}

.btn {
    margin: 30px auto;
}

/* pc main */
@media screen and (min-width: 769px) {
    .main {
        margin-top: 110px;
    }

    .mainTopics {
        margin-top: 100px;
    }

    .brSP {
        display: none;
    }

    .brPC {
        display: block;
    }

    /* slider */
    .mainVisSP__slider {
        /*  ヘッダーを含めて全画面表示になるよう計算 */
        height: calc(100vh - 110px);
        position: relative;
    }

    .mainVisSP__slider img {
        height: calc(100vh - 110px);
        object-fit: cover;
    }


    .mainTitleSP {
        position: absolute;
        top: 39.1%;
        left: 4.8%;
        margin-top: 30px;
    }
    
    .logoSP {
        width: 313px;
        height: 200px;
    }
    
    .mainTitleSP__place {
        padding: 5px 40px;
        font-size: 3rem;
        width: 411px;
    }
    
    .mainTitleSP__txt {
        margin-top: 20px;
        padding: 5px 40px;
        margin-top: 10px;
        font-size: 3.6rem;
        width: 604px;
    }

    /* slider ここまで */

    .mainTopics__title {
        margin-top: 0;
    }

    .mainTopicsVis {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 70px;
    }

    .mainTopicsVis__small {
        width: 13.8%;
        height: auto;
    }

    .btn {
        margin-top: 70px;
    }
}

/* pc 769px */


/* ==================
ここからPlan
===================== */
.section.section--plan {
    padding: var(--contentPadding);
}

.topic {
    margin-top: 50px;
}

.detail {
    text-align: center;
    margin-top: 30px;
}

.plan__item {
    padding: 20px 20px;
    background: var(--primary-beige);
    margin-top: 30px;
    justify-content: center;
}

.planDetail__title {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin-top: 20px;
}

.planDetail__title__name {
    color: var(--primary-brown);
    font-family: Sacramento;
    font-size: 3.2rem;
    line-height: 1.2;
}

.planDetail__title__txt {
    font-size: 2.4rem;
}

.planDetail__txt {
    margin-top: 20px;
}

.btn.btn--plan753 {
    width: 270px;
}

.btn.btn--plan {
    width: 220px;
}

.plan__item--second {
    background: var(--primary-green);
    margin-top: 30px;
    padding: 20px 20px;
    justify-content: center;
}

/* pc plan */
@media screen and (min-width: 769px) {

    .section.section--plan {
        padding: var(--contentPaddingPC);
    }

    .topic {
        margin-top: 100px;
    }

    .detail {
        margin-top: 50px;
    }

    .plan__item,
    .plan__item--second {
        margin-top: 50px;
        padding: 30px 30px;
        display: flex;
    }

    .planTitle {
        display: block;
    }

    .plan__img {
        width: 37%;
        /* height: 85%; */
        height: auto;
        object-fit: contain;
    }

    .plan__item--second {
        margin-top: 50px;
    }

    .planDetail {
        margin-left: 30px;
        gap: 20px;
    }


    .planBtn {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 20px;
        margin-top: 20px;
    }

    .btn.btn--plan,
    .btn.btn--plan753 {
        margin: 0;
    }
}

/* pc 769px */


/* ====================
ここからlocation
======================== */
.section.section--location {
    padding: var(--contentPadding);
}

.locationTitle {
    padding: 20px 20px;
}

.location__item {
    margin-top: 30px;
    box-shadow: 7px 7px 4px 0px #E4DDD5;
}

.locationTitle__name {
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    background: var(--primary-beige);
    /* タイポグラフィ */
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
}

.locationTitle__txt {
    margin-top: 10px;
}

.locationTitle__detail {
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--secondary-brown);
    border-bottom: 1px solid var(--secondary-brown);
    margin-top: 10px;
    /* タイポグラフィ */
    font-size: 2rem;
    font-weight: 500;
}

.locationTitle__detailTxt {
    margin-top: 10px;
}

/* pc plan */
@media screen and (min-width: 769px) {

    .section.section--location {
        padding: var(--contentPaddingPC);
    }

    .location {
        display: flex;
        margin-top: 50px;
        gap: 2.5%;
        row-gap: 30px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .location__item {
        margin-top: 0;
        width: 31.6%;
        /* min-width: 380px; */
        min-width: 262px;
    }

    .locationTitle__txt {
        min-height: 310px;
    }
}

/* pc 769px */

/* ======================
ここからevent
========================== */

.section.section--event {
    margin-top: 50px;
}

.event {
    background: #F4F4F4;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 50px;
    padding: 30px 20px;
}

.topic.topic--event {
    margin-top: 0;
}



.eventInfo__item {
    padding: 10px 10px 20px;
    background: var(--primary-white);
    margin-top: 30px;
}

.eventName__title {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    /* タイポグラフィ */
    font-size: 2rem;
    font-weight: 500;
}

.eventName__txt {
    margin-top: 20px;
}

.eventDetail {
    margin-top: 20px;
}

.eventDetail__past__title,
.eventDetail__place__title {
    padding: 5px 10px;
    border-top: 1px solid var(--secondary-brown);
    border-bottom: 1px solid var(--secondary-brown);
    width: 138px;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    min-width: 135px;
}

.eventDetail__past__txt,
.eventDetail__place__txt {
    margin: 10px auto;
    text-align: left;
}

.vis {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.vis__baby {
    width: 48%;
}

.notice {
    margin-top: 30px;
}

.noticeDetail {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 518px;
    position: relative;
}

.noticeDetail__icon {
    width: 25px;
    height: 19px;
    position: absolute;
    top: 4px;
    left: 90px;
}

.noticeDetail__txt {
    text-align: center;
}

.sns {
    margin-top: 10px;
    display: flex;
    gap: 20px;
    justify-content: center;
}



.sns__detailGroup {
    display: flex;
    flex-direction: column;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--primary-white);
    align-items: center;
    justify-content: center;
}

.sns__icon {
    width: 30px;
    height: 30px;
}

.sns__txt {
    color: var(--primary-brown);
    text-align: center;
    font-size: 1.4rem;
    font-weight: 500;
}

.sns__detailGroup:hover {
    opacity: 0.5;
}

/* pc plan */
@media screen and (min-width: 769px) {
    .section.section--event {
        margin-top: 100px;
        padding: 0px 8.3% 50px;
    }

    .event {
        padding: 50px 30px 100px;
    }

    .eventInfo__item {
        background: var(--primary-white);
        padding: 30px 20px 20px;
        /* display: flex; */
    }

    .info {
        display: flex;
        gap: 20px;
    }

    .eventName {
        padding: 0;
        gap: 20px;
    }

    .eventName__title,
    .eventName__txt {
        margin-top: 0;
    }

    .eventInfo__img {
        width: 39%;
        height: auto;
        object-fit: cover;

    }

    .eventDetail {
        margin-top: 0;
    }


    .eventDetail__past,
    .eventDetail__place {
        display: flex;
        justify-content: left;
        margin-top: 10px;
        align-items: center;
        flex-direction: row;
    }


    .eventDetail__past__txt,
    .eventDetail__place__txt {
        margin: 0 0 0 10px;
    }
    
    .eventDetail__past__title,
    .eventDetail__place__title {
        margin: 0;
    }

    .vis {
        display: flex;
        padding: 20px 0;
        justify-content: space-between;
        margin-top: 0;
    }

    .vis__baby {
        width: 22%;
    }

    .info--location {
        display: flex;
        flex-direction: row-reverse;
        gap: 20px;
    }

   .notice {
    margin-top: 50px;
   }
  
   .noticeDetail__icon {
    position: absolute;
    top: 4px;
    left: 40px;

}
}

/* pc 769px */

/* ==============
footer
================= */
.footer {
    margin-top: 50px;
    padding: 30px 20px;
    background-image: url(../images/bg__footerSP.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.footerGroup__title {
    font-size: 2.4rem;
    font-weight: 500;
}

.address {
    margin-top: 20px;
}

.btn.btn--footer {
    width: 266px;
    background: var(--primary-brown);
    color: var(--primary-white);
    font-weight: 500;
    margin-top: 20px;
    margin-left: 0;
}

.btn.btn--footer::after {
    border-top: solid 2px var(--primary-white);
    border-right: solid 2px var(--primary-white);

}

/* sns */
.footerSns {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    justify-content: right;
}

.footerSns__detailGroup {
    display: flex;
    flex-direction: column;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--primary-white);
    align-items: center;
    justify-content: center;
}

.footerSns__icon {
    width: 30px;
    height: 30px;
}

.footerSns__txt {
    color: var(--primary-brown);
    text-align: center;
    font-size: 1.4rem;
    font-weight: 500;
}

/* sns ここまで */

.privacy {
    display: flex;
    margin-top: 20px;
    justify-content: right;
    font-size: 1.4rem;
}

.copy {
    display: flex;
    margin-top: 10px;
    justify-content: right;
    font-size: 1.4rem;
}


/* pc footer */
@media screen and (min-width: 769px) {
    .footer {
        padding: 50px 8.3%;
        background-image: url(../images/bg__footerPC.jpg);
    }

    .footerSns {
        margin-top: 0;
    }

    .btn.btn--footer {
        margin: 30px 0px 0px;
    }

    .privacy {
        margin-top: 15px;
    }

    .privacy,
    .copy {
        font-size: 1.5rem;
    }

}