:root {
        --color-text: #514545;
        --color-text-gray: #7E8392;
        --color-bg1: #FAFAF7;
        --color-bg2: #DECCD0;
        --color-brand2: #D8A7B1;

        --fontFamily: "Noto Serif JP", serif;
        --fontFamily2: "Noto Sans", sans-serif;
        --lineHeight: 150%;
        --textAlign: left;

        --grid-template-column: [container-start] var(--mp-container) [content-start] 1fr [content-end] var(--mp-container) [container-end];
        --grid-column-container: container-start / container-end;
        --grid-column-content: content-start / content-end;
        --mp-container: 24px;


        --padding-lr-drawer-nav: 16px;
        --padding-tb-drawer-nav: 32px;

        --header-height: 60px;

        --section-maxWidth: 1280px;
    }

    @media screen and (min-width: 768px) {
        :root {
            --lineHeight: 200%;
            --textAlign: center;
        }
    }

    /* eeo Store reset */
    .ec-layoutRole .ec-layoutRole__contents {
        max-width: unset;
    }

    .ec-layoutRole .ec-layoutRole__main {
        background-color: var(--color-bg);
    }

    /* eeo Store reset*/

    * {
        color: var(--color-text);
        scroll-behavior: smooth;
        font-family: var(--fontFamily2);
    }

    body {
        overflow-x: hidden;
        font-family: var(--fontFamily2);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
    }

    img {
        display: block;
        width: 100%;
    }

    a {
        color: var(--color-text);
    }

    a:hover {
        opacity: .8;
        text-decoration: none;
        cursor: pointer;
    }

    .section__container {
        padding: 40px 24px;
    }

    .section__box {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: var(--section-maxWidth);
        margin: 0 auto;
    }

    .section__title {
        color: var(--color-text);
        text-align: center;
        font-size: 18px;
        font-weight: 700;
        line-height: 150%;
        font-family: var(--fontFamily);
        margin-bottom: 16px;
    }

    .header--otonaoshi {
        border-bottom: 0.5px solid #666;
        background: #FFF;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header__h1 {
        width: fit-content;
        margin: 0 auto;
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .header__logo {
        max-width: 136px;
    }

    .header__text {
        color: var(--color-text);
        text-align: center;
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        letter-spacing: 1.5px;
        font-family: var(--fontFamily);
        padding-left: 10px;
    }

    /* 新着情報 NEWS */
    /* 記事一覧 */
    /* Container for the entire gallery section */
    .gallery__container {
        width: 100%;
    }

    .gallery__grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
        transition: all 0.3s ease-in-out;
    }

    .gallery__item {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        text-decoration: none;
        color: var(--color-text);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .gallery__item:hover {
        transform: translateY(-5px);
    }

    .gallery__container .slide__description-container {
        display: flex;
        padding: 8px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        align-self: stretch;
        flex-grow: 1;
    }

    .gallery__container .slide__imgdiv {
        aspect-ratio: auto;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        object-fit: fill;
    }

    .gallery__container .slide__img {
        height: auto;
        width: 100%;
        object-fit: cover;
    }

    .gallery__container .slide__description {
        font-size: 13px;
        line-height: 140%;
        font-family: var(--fontFamily2);
    }

    .gallery__container .slide__tagcontainer {
        display: flex;
        gap: 4px;
        align-items: center;
    }

    .gallery__container .slide__date {
        color: var(--color-brand2);
        font-size: 12px;
        font-weight: 400;
        line-height: 150%;
        font-family: var(--fontFamily2);
    }

    .gallery__container .slide__category {
        font-size: 12px;
        font-weight: 700;
        line-height: 150%;
        color: var(--color-brand2);
        font-family: var(--fontFamily2);
    }

    @media (min-width: 768px) {
        .gallery__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }

        .gallery__container .slide__imgdiv {
            object-fit: fill;
            border: 1px solid #e5e5e5;
            background-color: var(--color-bg1);
        }
    }

    /* 進め */
    .section--susume {
        padding: 40px 16px;
        background-color: var(--color-bg1);
    }

    .section--susume .susume__box {
        display: block;
        height: fit-content;
    }

    /*.products__list {*/
    /*    display: flex;*/
    /*    width: 100%;*/
    /*    flex-wrap: nowrap;*/
    /*    overflow-x: scroll;*/
    /*}*/

    .section--susume .products__link {
        display: flex;
        padding: 16px 12px;
        flex-direction: column;
        align-items: start;
        gap: 6px;
        flex-shrink: 0;
        border-radius: 6px;
        background: #FFF;
        height: unset;
    }

    .products__title,
    .products__price {
        color: var(--color-text);
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        font-family: var(--fontFamily2);
    }

    .products__price {
        margin-top: auto;
    }

    @media (min-width: 421px) {

        .products__title,
        .products__price {
            font-size: 16px;
        }
    }

    /* SNS */
    .section--sns {
        background-color: white;
    }

    .section--sns .sns__box {
        padding: 0;
    }

    .sns__description {
        font-size: 14px;
        line-height: var(--lineHeight);
        text-align: center;
    }

    .sns__link-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .sns__link {
        display: flex;
        width: 120px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .sns__icon {
        display: flex;
        width: 70px;
        height: 70px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 1000px;
        background: var(--color-text);
    }

    .sns__textsns {
        text-align: center;
        font-size: 11px;
        font-weight: 400;
        line-height: 150%;
    }

    /* FAQ */
    .section--faq {
        background-color: var(--color-bg1);
    }

    .faq__box {
        align-items: flex-start;
        max-width: 800px;
    }

    .question__container {
        margin-top: 10px;
        width: 100%;
    }

    .question__container:hover {
        cursor: pointer;
        opacity: .8;
    }

    .question__container .question__shitsumon {
        padding-bottom: 4px;
    }

    .question__container .question__kotae {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        /* Important: hides the content as the box collapses */
        /* Define transitions for the properties you want to animate */
        transition: max-height 1s ease-in-out,
            opacity 1s ease-in-out;
    }

    .question__container.open .question__kotae {
        opacity: 1;
        max-height: 200px;
        /* Set a max-height large enough for your content */
    }

    .question__container .question__shitsumon svg {
        transition: transform 0.3s ease;
    }

    .question__container.open .question__shitsumon svg {
        transform: rotate(90deg);
    }

    /* eeo store */
    .section--services {
        background-color: var(--color-bg2);
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .section--services .services__box {
        display: flex;
        padding: 20px 14px;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        align-self: stretch;
        border-radius: 6px;
        background: #D0BFC3;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        font-family: var(--fontFamily2);
    }

    .eeostore-logo {
        max-width: 256px;
    }

    .eeostore__description {
        text-align: var(--textAlign);
        font-size: 14px;
        line-height: var(--lineHeight);
        font-family: var(--fontFamily2);
    }

    /* otonaoshi__copy */
    .otonaoshi__copy {
        display: flex;
        height: 56px;
        padding: 0;
        justify-content: center;
        align-items: center;
        gap: 10px;
        background-color: #44423C;
    }

    .otonaoshi__copy-p {
        color: #FFF;
        font-size: 14px;
        font-weight: 400;
        line-height: var(--lineHeight);
        width: 100%;
        text-align: center;
    }