.none-from-tb {
    display: none;
}

.for-tb,
.from-tb {
    display: block;
}

header {
    #hamburger-menu {
        justify-content: space-evenly;
    }
}

footer {
    padding-bottom: 52px;

    table {
        scale: 1.7;
    }
}

#hero {
    .eye-catch {
        padding-left: 69px;

        &::before {
            background-size: 230%;
        }

        .img-container {
            width: 120px;
            height: 120px;
            margin-left: 20px;
        }

        strong {
            font-size: 24px;

            >span {
                font-size: 32px;
                letter-spacing: .1em;
            }
        }
    }

    .banner {
        h2 {
            font-size: 56px;

            >span {
                font-size: 30px;

                span {
                    font-size: 24px;
                }
            }

        }

        small {
            font-size: 15px;
        }
    }
}

#about {

    >div,
    article {

        strong,
        p {
            width: 370px;
        }
    }

    >div {
        position: relative;

        .bg-img {
            width: 80%;
            height: 80%;
            margin-left: auto;
        }

        strong {
            -webkit-text-stroke: white 2px;
            paint-order: stroke;
            position: absolute;
            top: 40%;
            left: 10%;
        }
    }

    article {
        &:first-of-type {
            background-image: linear-gradient(to top, white 50%, transparent 60%);
            padding-top: calc(25svh + (100svh - 204px) / 2);
        }

        &:last-of-type {
            height: 100svh;
            padding-top: calc(25svh + (100svh - 338px) / 2);
            background-image: linear-gradient(to top, white 50%, transparent 60%);

            &::before {
                background-image: url("../assets/imgs/黒いわんちゃん.jpg");
                background-size: 230%;
                background-position: 60% 245%;
            }

            h3,
            p,
            strong {
                width: 679px;
            }

            strong {
                span {
                    &:not(:first-of-type) {
                        display: inline-block;
                    }
                }
            }
        }

        h3,
        p {
            width: 564px;
        }
    }
}

#menu {
    .menu-article {
        width: 518px;

        &:nth-of-type(odd) {
            .img-container {
                &:first-of-type {
                    margin-top: 50px;
                }

                &:last-of-type {
                    margin-bottom: 50px;
                }
            }
        }

        &:nth-of-type(even) {
            .img-container {
                &:first-of-type {
                    margin-bottom: 50px;
                }

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

    .row {
        margin-top: 60px;

        .img-container {
            width: 35.5vw;
        }
    }
}

#staff {
    padding-bottom: 74px;

    h2 {
        margin-bottom: 92px;
    }

    article {
        margin-bottom: 84px;
    }

    .btn-container {
        swiper-container {
            width: 77%;
            margin: 0 auto;

            swiper-slide {
                width: 50%;

            }
        }

    }

    .staff-article {
        width: 76%;
    }

    .to-archive {
        margin-top: 147px;
    }
}

#news {
    padding-bottom: 69px;

    h2 {
        margin-bottom: 74px;
    }

    .btn-container {
        .row {
            margin-top: 51px;
        }
    }

    .news-article {
        text-align: left;
        display: flex;
        gap: 25px;
        width: 77%;
        padding-right: 20px;
        padding-left: 20px;
        margin: 0 auto;

        &:first-of-type {
            border-top: none;
        }

        time {
            width: 148px;
            margin: 0 0 23px;
            flex-shrink: 0;
        }
    }
}

#access {
    h2 {
        margin-bottom: 75px;
    }

    address,
    p {
        width: 437px;
    }

    .access-article {
        margin-top: 18px;
    }

    >a {
        &:first-of-type {
            .access-article {
                margin-top: 39px;
            }
        }
    }

    .iframe-container {
        margin: 42px auto;
    }
}

#eye-catch {
    height: 480px;

    /* .img-container {
        margin-left: calc(6vw + 100px);
    } */

    h2 {
        font-size: 48px;
        line-height: 1em;
        text-align: center;
        display: flex;
        align-items: center;
        gap: 33px;
        padding-top: 88px;
        padding-left: 183px;

        span {
            display: inline;
            padding-top: 0;
        }
    }

    .keseran-container {
        .keseran {
            &:nth-of-type(1) {
                top: 136px;
                left: 105px;
                width: 56px;
            }

            &:nth-of-type(2) {
                top: 85px;
                left: 411px;
                width: 85px;
            }

            &:nth-of-type(3) {
                top: 216px;
                width: 99px;
            }

            &:nth-of-type(4) {
                top: 192px;
                left: 530px;
                width: 135px;
            }

            &:nth-of-type(5) {
                top: 313px;
                left: 121px;
                width: 85px;
            }

            &:nth-of-type(6) {
                top: 327px;
                left: 453px;
                width: 77px;
            }
        }
    }
}

#menu-prime {
    &::before {
        height: calc(100% - 480px);
    }
}

#menu-sticky {

    button {
        width: 164px;

        &::before {
            right: calc((100% - 7em) / 2);
        }

        .from-tb {
            display: inline;
        }
    }
}

#normal-menu,
#reserve-menu {
    .menu-article {
        width: 486px;

        h4,
        p,
        dl:first-of-type {
            width: 404px;
            margin-right: auto;
            margin-left: auto;
        }

        dl {
            &:first-of-type {
                dd {
                    span {
                        &:last-of-type {
                            display: inline-block;
                        }
                    }
                }
            }
        }
    }

    .notice {
        >p {
            font-size: 24px;
        }

        >article {
            h5 {
                font-size: 48px;
            }

            >p {
                font-size: 32px;
            }

            article {
                display: flex;
                gap: 52px;
                width: 720px;

                h6 {
                    width: 276px;
                    flex-shrink: 0;
                    padding-left: 75px;
                }
            }
        }
    }
}

#menu-notice {
    font-size: 24px;
    padding-bottom: 186px;

    span {
        &:first-of-type {
            font-size: 32px;
        }
    }
}

#staff-prime {
    .btn-container {
        p {
            font-size: 28px;

            span {
                font-size: 22px;
            }
        }

        button {
            display: inline-block;
            width: 315px;

            &:first-of-type {
                margin-right: 10px;
            }

            &:last-of-type {
                margin-left: 10px;
            }
        }
    }

    .link-container {
        font-size: 20px;
    }
}

#therapist-staff,
#guide-staff {

    h3 {
        width: 652px;
    }

    .staff-article {
        width: 642px;
        display: flex;
        justify-content: center;
        gap: 67px;
        margin: 100px auto;

        .thumb {
            margin: 0;
        }

        >div {
            &:nth-of-type(2) {
                flex-grow: 1;
            }
        }

        p {
            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }
}

#access-prime {
    #eye-catch {
        &::before {
            background-size: contain;
            background-position: calc(100vw - 568px);
            mask-image: linear-gradient(to right, transparent 50%, black 100%);
        }
    }
}

#map-container {
    >p {
        font-size: 28px;

        span {
            font-size: 24px;
        }
    }

    .row-from-pc {
        p {
            font-size: 28px;
            margin-left: 145px;
        }
    }

    .iframe-container {
        width: 480px;
    }

    .info {
        width: 480px;
    }

    article {
        width: 480px;
        margin: 0 auto;

        h3 {
            margin: 0;
        }

        dl {
            width: unset;
            margin-left: 0;

            dd {
                span {
                    display: inline;
                }
            }
        }
    }

    a {
        font-size: 24px;
        width: 480px;
        margin-left: auto;
        margin-right: auto;

        .img-container {
            width: 24px;
        }
    }
}

#route-guide {
    padding-bottom: 84px;

    h3 {
        line-height: 47px;
        width: 700px;
        height: 47px;
        margin-right: auto;
        margin-left: auto;
    }

    >.btn-container {
        display: flex;
        justify-content: center;
        gap: 40px;

        button {
            margin-right: 0;
            margin-left: 0;
        }
    }

    .normal-link {
        margin-bottom: 84px;
    }
}

#kitahama-route,
#yodoyabashi-route {
    width: 467px;

    article {
        left: -12px;

        .btn-container {
            button {
                &.prev-btn {
                    left: 10px;
                }

                &.next-btn {
                    right: 10px;
                }
            }

            .swiper-pagination-bullets {
                gap: 5px;

                .swiper-pagination-bullet {
                    width: 10px;
                }
            }
        }
    }
}

#handicap-prime {
    #eye-catch {
        h2 {
            font-size: 48px;
            padding-left: 56px;

            span {
                font-size: 24px;
            }
        }
    }
}

#handicap-content {
    padding-top: 59px;
    padding-bottom: 60px;
    
    p {
        &:first-of-type {
            font-size: 32px;
        }

        &:last-of-type {
            font-size: 24px;
        }
    }

    strong {
        font-size: 32px;
    }
}

@media screen and (orientation: landscape) {
    #about {

        >div,
        article {
            height: 100svh;
        }

        article {
            &:first-of-type {
                height: 100svh;
            }

            &:last-of-type {
                height: 150svh;
                padding-top: calc(60svh + (100svh - 338px) / 2);

                &::before {
                    background-position-y: 135%;
                }
            }
        }
    }
}