.heroSection {
    position: relative;

    background-image: url(/img/bg-hero.jpg);
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    padding: 48px 5%;

    .inner-medium {
        place-items: center start;
    }

    .hero--catchCopy {
        font-size: 4.8rem;
        /* line-height: 1.5; */
        color: var(--white);
        /* box-shadow: 0 0 4px var(--black); */
    }

    .hero--catchCopy--bg {
        display: inline-block;
        background-color: var(--primary-bland-color);
        /* background-color: var(--primary-bland-color-dark); */
        padding: 4px 16px 10px;
        margin-top: 8px;
    }
}


@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .heroSection {
        background-position-x: 70%;

        .hero--catchCopy {
            font-size: 2.8rem;
            margin-bottom: 180px;
            /* line-height: 1.85; */
        }

        .hero--catchCopy--bg {
            padding-top: 8px;
            padding-bottom: 14px;
        }
    }
}

.strengthSection {
    padding: 16px 0;
    background-color: var(--primary-bg-color);

    .media {
        align-items: center;
        justify-content: right;
    }

    .media--body {
        flex-basis: 50%;

        
        padding-left: var(--left-edge-to-inner-medium);
    }

    .media-reverse {
        justify-content: right;
        flex-direction: row-reverse;

        .media--body {
            padding-left: 0;
            /* media-textの幅に統一感を持たせる為に`--left-edge-to-inner-medium`を使用 */
            padding-right: var(--left-edge-to-inner-medium);
        }
    }

    .media--imgBox {
        flex-basis: 50%;
    }

    .media--title {
        color: var(--white);
    }

    .media--text {
        color: var(--white);
    }
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .strengthSection {

        padding: 48px;
        row-gap: 32px;

        .media {
            flex-direction: column-reverse;
            row-gap: 16px;

        }

        .media-reverse {
            flex-direction: column-reverse;
        }

        .media--imgBox {
            width: 100%;
        }
        
        .media--body {
            margin-left: 0;
        }
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .strengthSection {
        padding: 5%;
    }
}

.menuSection {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    /* background-color: var(--secondary-bg-color); */

    row-gap: 24px;

    .media {
        justify-content: right;
        column-gap: 48px;
    }

    .media--imgBox {
        flex-basis: 50%;
    }

    .media--body {
        flex-basis: 50%;
        padding-left: calc((100% - var(--inner-medium)) / 2);
    }

}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .menuSection {

        .media {
            flex-direction: column-reverse;
            padding-left: 5%;
            padding-right: 5%;
            row-gap: 24px;
        }

        .media--imgBox {
            width: 100%;
        }

        .media--body {
            width: 100%;
        }
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .menuSection {

        .media--body {
            row-gap: 20px;
        }
    }
}

.situationSection {

    background-color: var(--secondary-bg-color);

    .img {
        /* aspect-ratio: 16/9; */
    }

}

.storeSection {
    background-color: var(--secondary-bg-color);
}

.accessSection {

    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    row-gap: 32px;

    .access--header {
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
    }

    .access--bottom {
        width: 100%;
    }

    .nearbyList {
        width: 100%;
        padding-left: 24px;
    }

    .nearbyItem {
        list-style: square;
        font-size: var(--fontsize-medium);
        line-height: 1.5;
    }
}