@charset "UTF-8";

/* ====================
common
==================== */
:root {
    --primary-white: #FDFDF6;
    --primary-brown: #6D6554;
}

html {
    font-size: 62.5%;
}

body {
    font-family: "Zen Kaku Gothic New", 'Noto Sans JP', Arial, sans-serif;
    color: var(--primary-brown);
    background-color: var(--primary-white);
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

.leaf__pc {
    padding-top: 100px;
}

/* common 768px */
@media screen and (max-width:768px) {
    .leaf__pc {
        padding-top: 50px;
    }
}/* common 768px end */

/* ====================
header
==================== */
.header {
    background-color: var(--primary-white);
    padding: 50px 6.9% 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.header__topic--sp {
    display: none;
}

.menuButton--sp {
    display: none;
}


/* nav 表示時 */
.nav {
    background-color: #F4DADA;
    width: 50%;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.4s;
}

.nav__btn {
    width: 100%;
    position: relative;
}

.nav__btn--pc {
    position: absolute;
    top: 79px;
    right: 13.8%;
}

.nav__btn--sp {
    display: none;
}

.nav__list {
    margin-top: 231px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 70px;
}

.nav__item {
    color: #5E523B;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

/* nav active */
.nav.active {
    transform: translateX(0);
}

/* header 768px */
@media screen and (max-width:768px) {
    .header {
        padding: 20px 5.3%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .header__topic--sp {
        display: block;
    
    }
    .header__topic--pc {
        display: none;
    }

    .menuButton--sp {
        display: block;
    }
    
    .menuButton--pc {
        display: none;
    }

    .nav {
        width: 100%;
    }

    .nav__btn--pc {
        display: none;
    }
    
    .nav__btn--sp {
        display: block;
        position: absolute;
        top: 29px;
        right: 5.3%;
    }

    .nav__list {
        margin-top: 128px;
        gap: 50px;
    }
    

    .nav__item {
        color: #5E523B;
        font-size: 1.6rem;
    }
    

}/* header 768px end */


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

.main {
    margin-top: 250px;
}

/* mainVisual */
.mainVisual {
    padding: 0 7% 100px;
    text-align: center;
}

.mainVisual--pc {
    width: 80%;
}

.mainVisual--sp {
    display: none;
}

/* main 768px */
@media screen and (max-width:768px) {
    .main {
        margin-top: 108px;
    }

    .mainVisual {
        padding: 20px 3.3% 50px;
    }
    
    .mainVisual--sp {
        display: none;
    }
}/* main 768px end */


/* detail */
.detail {
    padding: 130px 0 200px;
    text-align: center;
    position: relative;
}

.detail__title {
    font-size: 3.2rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    position: relative;
}

.detail__title::before {
    content: '';
    display: inline-block;
    width: 154px;
    height: 165px;
    aspect-ratio: 154/165;
    background-image: url(../images/flower_PC_top.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    /* right: 144px; */
    right: 10%;
    top: -83px;
}

.detail__title::after {
    content: '';
    display: inline-block;
    width: 516px;
    height: 32px;
    aspect-ratio: 129/8;
    background-image: url(../images/leaf_detailTitle_PC.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    /* top: 68px;
    left: 462px; */
    top: 68px;
    left: 50%;
    transform: translateX(-50%); 
}

.detail__text {
    padding: 0 5%;
    margin-top: 102px;
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 2.0;
    position: relative;
}

.spBr {
    display: none;
}

.detail__text::after {
    content: '';
    display: inline-block;
    width: 154px;
    height: 165px;
    aspect-ratio: 154/165;
    background-image: url(../images/flower_PC_bottom.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 9.2%;
    bottom: -170px;
}

/* detail 1024px */
@media screen and (max-width:1024px) {
    .detail__title::before {
        top: -130px;
        right: 50px;
    }
}/* detail 1024px end */

/* detail 768px */
@media screen and (max-width:768px) {
    .detail {
        padding: 50px 8% 70px;
    }
    
    .detail__title {
        font-size: 2rem;
        font-weight: 400;
        letter-spacing: 0.1em;
        position: relative;
    }

    .detail__title::before {
        width: 100px;
        height: 100px;
        aspect-ratio: 60.08/64.00;
        position: absolute;
        right: 0px;
        top: -33px;
    }

    .detail__title::after {
        content: '';
        display: inline-block;
        width: 271px;
        height: 17px;
        background-image: url(../images/leaf_detailTitle_SP.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 59px;
        left: 50%;
        transform: translateX(-50%); 
    }

    .detail__text {
        text-align: justify;
        line-height: 1.7;
        font-size: 1.4rem;
        font-weight: 400;
        letter-spacing: 0.1em;
    }

    .spBr {
        display: block;
    }    

    .detail__text::after {
        display: none;
    }
}/* detail 768px end */

/* detail 550px */
@media screen and (max-width:550px) {
    .detail__title::before {
        width: 60.079px;
        height: 64px;
    }
}/* detail 550px end */

/* section intro */
.intro {
    padding: 200px 10.4%;
    background-image: url(../images/background_intro.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.intro__topic {
    padding-bottom: 22px;
    text-align: center;
}

.intro__topic--sp {
    display: none;
}

.intro__item {
    padding: 40px 8.7%;
    margin-top: 78px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    border-radius: 15px;
    background: rgba(253, 253, 246, 0.90);
}

.flex--reverse {
    flex-direction: row-reverse;
}

.intro__img {
    max-width: 400px;
    height: 300px;
}

.intro__txt {
    text-align: justify;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.7;
}

/* intro 1024px */
@media screen and (max-width:1024px) {
    .intro__item {
        flex-direction: column;
        gap: 0;
    }

    .intro__txt {
        margin-top: 50px;
    }
}/* intro 1024px end */

/* intro 768px */
@media screen and (max-width:768px) {
    .intro {
        padding: 55px 13.3% 100px;
        background-image: url(../images/background_intro_SP.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .intro__topic {
        padding: 70px 0 0;
    }

    .intro__topic--sp {
        display: inline-block;
    }

    .intro__topic--pc {
        display: none;
    }

    .intro__item {
        padding: 25px 7.2%;
        margin-top: 70px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        background: rgba(253, 253, 246, 0.90);
    }

    .intro__item:last-of-type {
        margin-top: 50px;
    }

    .intro__img {
        width: 235px;
        height: 176px;
    }

    .intro__txt {
        font-size: 1.6rem;
        line-height: 1.6;
    }

}/* intro 768px end */


/* section news */
.news {
    padding: 200px 10.4%;
    text-align: center;
    position: relative;
}

.news::before {
    content: '';
    display: inline-block;
    width: 235px;
    height: 230px;
    background-image: url(../images/green_PC_intro.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 32px;
    top: 72px;
}

.news__topic--sp {
    display: none;
}

.news__list {
    margin-top: 100px;
}

.news__item {
    display: flex;
    max-width: 1140px;
    height: 200px;
    justify-content: center;
    align-items: center;
    gap: 70px;
    margin: 70px auto 0;
}

.news__detail {
    text-align: start;
}

.news__item img {
    width: 300px;
    height: 200px;
}

.news__topic time {
    font-size: 2.4rem;
    font-weight: 400;
}

.news__topic span {
    margin-left: 30px;
    font-size: 2rem;
    font-weight: 400;
}

.news__txt {
    margin-top: 43px;
    font-size: 1.8rem;
    font-weight: 400;
}

/* news 900px */
@media screen and (max-width:900px) {
    .news::before {
        display: none;
    }
}/* news 900px end */

/* news 768px */
@media screen and (max-width:768px) {
    .news {
        padding: 0 13.3% 50px;
        text-align: center;
    }

    .news__topic--sp {
        display: inline-block;
        margin-top: 75px;
    }

    .news__topic--pc {
        display: none;
    }

    .news__list {
        margin-top: 70px;
    }

    .news__item {
        height: auto;
        display: block;
        margin-top: 0;
        padding-bottom: 50px;
    }

    .news__item:last-of-type {
        padding-bottom: 0;
    }

    .news__item img {
        width: 275px;
        height: 183px;
    }

    .news__detail {
        margin-top: 15px;
        text-align: center;
    }
    
    .news__topic time {
        font-size: 1.6rem;
        font-weight: 400;
    }
    
    .news__topic span {
        font-size: 1.6rem;
    }
    
    .news__txt {
        margin-top: 15px;
        text-align: justify;
        font-size: 1.4rem;
        font-weight: 400;
    }

}/* news 768px end */


/* section shop */
.shop {
    padding: 150px 10.4% 200px;
    text-align: center;
    position: relative;
}

.shop::before {
    content: '';
    display: inline-block;
    width: 284px;
    height: 258px;
    background-image: url(../images/green_PC_shop.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: -0.4px;
    top: 15px;
}

.shop__topic--sp {
    display: none;
}

.map {
    margin-top: 100px;
    width: 100%;
    height: 497px;
}

.address {
    margin-top: 50px;
    font-size: 2.4rem;
    font-weight: 400;
}

.spBr {
    display: none;
}

.shop__detail {
    margin-top: 20px;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.5;
}

.shop__park {
    margin-top: 30px;
    font-size: 2.2rem;
    font-weight: 400;
}

/* shop 768px */
@media screen and (max-width:768px) {
    .shop {
        padding: 50px 13.3%;
    }

    .shop::before {
        display: none;
    }

    .shop__topic--sp {
        margin-top: 20px;
        display: inline-block;
    }

    .shop__topic--pc {
        display: none;
    }
    
    .map {
        margin-top: 70px;
        width: 100%;
        height: 183px;
    }

    .address {
        margin-top: 37px;
        text-align: center;
        font-size: 1.6rem;
        font-weight: 400;
    }

    .spBr {
        display: block;
    }
    
    .shop__detail {
        font-size: 1.5rem;
    }

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

}/* shop 768px */


/* ====================
footer
==================== */
.menu__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
}

.menu__item {
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.copy {
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    padding: 113px 0;
    text-align: center;
}

/* footer 768px */
@media screen and (max-width:768px) {
    .menu {
        display: none;
    }

    .copy {
        padding: 50px 0 100px;
        position: relative;
    }

    .small {
        font-size: 1.3rem;
        font-weight: 400;
        letter-spacing: 0.05em;
    }
}