/* PCサイズから作る場合 */
@media (max-width: 1399.98px) {}

@media (max-width: 1199.98px) {

    /* ------------------------------------------------------------ */
    /* COMPONENTS */
    .container {
        width: 90%;
    }

    /* ------------------------------------------------------------ */
    /* ------------------------------------------------------------ */
    /* kodawari */
    .kodawari__img {
        width: 45%;
    }

    .kodawari-cards {
        gap: 5rem;
    }

    .kodawari-card {
        width: 50%;
    }

    /* menu */
    .menu-card {
        width: calc(100% / 3 - 2rem);
    }

    /* access */
    .access-section {
        padding: 10rem 4rem 8rem;
    }

    .access__img {
        width: 40%;
    }

    .access-info ul {
        gap: 3rem;
    }

    .group__shop {
        width: 100%;
    }

    .group__shop-img {
        width: calc(100% / 4);
    }
}

@media (max-width: 991.98px) {

    /* ------------------------------------------------------------ */
    /* HEADER */
    .header {
        padding: 0 4rem;
    }

    /* ------------------------------------------------------------ */

    /* ------------------------- NAV ------------------------- */
    .header__nav ul {
        gap: 2rem;
    }

    .header__nav--icon {
        margin-left: 2rem;
    }

    .header__logo {
        width: 16rem;
    }

    /* ------------------------------------------------------------ */

    /* ------------------------------------------------------------ */
    /* MAIN */
    .hero__img {
        height: 40vh;
        object-fit: cover;
    }

    /* ------------------------------------------------------------ */
    /* ------------------------------------------------------------ */
    /* kodawari */
    .kodawari-content {
        flex-direction: column;
    }

    .kodawari__img {
        width: 50rem;
    }

    .kodawari-cards {
        flex-direction: column;
        align-items: center;
    }

    .kodawari-card {
        width: 50rem;
    }

    /* menu */
    .menu-card {
        width: calc(100% / 2 - 2rem);
    }

    .menu-card:nth-child(4) {
        margin-bottom: 3.8rem;
    }

    .menu--second {
        padding: 10rem 0;
    }

    /* access */
    .access-area {
        flex-direction: column;
        align-items: center;
    }

    .access__img {
        width: 50rem;
    }

    /* ------------------------------------------------------------ */
    /* ------------------------------------------------------------ */
    /* FOOTER */
    .footer__logo {
        width: 20rem;
    }

    /* ------------------------------------------------------------ */
}

@media (max-width: 767.98px) {}

@media (max-width: 575.98px) {

    /* ------------------------------------------------------------ */
    /* HEADER */
    .header {
        display: none;
    }

    /* ------------------------------------------------------------ */
    /* ------------------------- NAV ------------------------- */
    .navi--sp {
        display: block;
        position: fixed;
        left: 50%;
        bottom: 1rem;
        transform: translate(-50%);
        z-index: 99;
    }

    .navi--sp ul {
        display: flex;
        justify-content: center;
        gap: 2.6rem;
    }

    .navi--sp ul li {
        background-color: #2C2C2C;
        border: #FFFFFF solid 1px;
        border-radius: 2rem;
        width: 8.4rem;
        height: 3.1rem;
    }

    .navi--sp ul li a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-weight: 700;
        font-size: 1.5rem;
        color: #F8F8F8;
    }

    /* ------------------------------------------------------------ */
    /* MAIN */
    .hero__img--sp {
        display: block;
        width: 100%;
        height: auto;
    }

    .hero__img {
        display: none;
    }

    .hero__logo {
        width: 20rem;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .hero__icon {
        display: block;
        width: 3rem;
        position: absolute;
        top: 2rem;
        right: 2rem;
    }

    .hero__icon img {
        width: 100%;
        height: auto;
    }

    /* ------------------------------------------------------------ */
    /* ------------------------- HEADING ------------------------- */
    .heading {
        font-size: 2.6rem;
        letter-spacing: 2.6px;
    }

    .heading__text--under {
        font-size: 1.6rem;
        letter-spacing: 0.8px;
    }

    .heading__text--under::before {
        width: 10rem;
    }

    /* ------------------------------------------------------------ */
    /* kodawari */
    .kodawari {
        padding: 6rem 0;
    }

    .kodawari-content {
        padding: 4rem 0 8rem;
    }

    .kodawari__img {
        width: 100%;
    }

    .kodawari__text {
        font-size: 1.5rem;
        letter-spacing: 0.75px;
        line-height: 3rem;
    }

    .kodawari-cards {
        gap: 4rem;
    }

    .kodawari-card {
        width: 100%;
        padding: 3.4rem 0 3.2rem;
    }

    .kodawari-card img {
        width: 13.3rem;
    }

    .kodawari-card__img--second {
        margin-top: 0;
    }

    .kodawari-card h3 {
        font-size: 2rem;
        letter-spacing: 2px;
        line-height: 3.2rem;
        padding: 1.6rem 0;
    }

    .kodawari-card p {
        font-size: 1.5rem;
        letter-spacing: 1.5px;
        line-height: 2rem;
    }

    /* menu */
    .menu {
        padding: 6rem 0;
    }

    .menu-cards {
        padding: 4.2rem 0 3rem;
        gap: 3.8rem;
    }

    .menu-card {
        width: 100%;
        padding: 2.5rem 2.75rem 4rem;
    }

    .menu-card:nth-child(1),
    .menu-card:nth-child(2),
    .menu-card:nth-child(3),
    .menu-card:nth-child(4) {
        margin-bottom: 0;
    }

    .menu-card h3 {
        padding: 4.1rem 0 1.6rem;
    }

    .menu-card p {
        font-size: 1.5rem;
        letter-spacing: 0.75px;
    }

    .menu__text {
        font-size: 1.5rem;
        letter-spacing: 1.5px;
        line-height: 2.4rem;
    }

    .menu--second {
        padding: 6rem 0;
    }

    /* access */
    .access {
        padding: 6rem 0;
    }

    .access-section {
        padding: 4rem 1.8rem 5rem;
    }

    .access-area {
        gap: 2.2rem;
        padding: 2.5rem 0 1.8rem;
    }

    .access__img {
        width: 100%;
    }

    .access-info ul {
        gap: 1rem;
    }

    .access-info__heading {
        font-size: 1.5rem;
        width: 6rem;
    }

    .access-info__item {
        font-size: 1.5rem;
    }

    .access__map {
        height: 16.8rem;
    }

    .group__shop {
        gap: 1.1rem;
        padding-top: 6rem;
        flex-wrap: wrap;
    }

    .group__shop-img {
        width: calc(100% / 2 - 0.55rem);
    }

    /* ------------------------------------------------------------ */
    /* ------------------------------------------------------------ */
    /* FOOTER */
    .footer {
        padding: 7.9rem 0 6rem;
        position: relative;
    }

    .footer__logo {
        width: 16.8rem;
    }

    .button--top {
        display: block;
        width: 3rem;
        height: 3rem;
        border: #FFFFFF solid 1px;
        border-radius: 50%;
        position: absolute;
        top: 2.4rem;
        right: 2rem;
    }

    .button--top::before {
        content: "";
        border-top: #FFFFFF solid 1px;
        border-left: #FFFFFF solid 1px;
        display: block;
        width: 6px;
        height: 6px;
        position: absolute;
        top: 10px;
        left: 11px;
        transform: rotate(45deg);
    }

    .button--top::after {
        content: "";
        display: block;
        width: 1px;
        height: 8px;
        background-color: #FFFFFF;
        position: absolute;
        top: 10px;
        left: 13.7px;
    }

    /* ------------------------------------------------------------ */
    /* ------------------------------------------------------------ */
    /* HELPER*/
    .br-sp-off {
        display: none;
    }

    .br-sp-on {
        display: block;
    }

    /* ------------------------------------------------------------ */
}