@charset "UTF-8";

:root {
    --base: 1440;
    --green: #00acba;
    --green-light: #3CD9D2;
    --green-dark: #007983;
    --navy: #060c4d;
    --purple: #1A1A2E;
    --text-black: #333333;
    --black: #0A0A0A;
    --white: #ffffff;
    --gray: #D7E3E4;
    --bg-cases: #F0FBFC;
    --bg-media-thumb: #E9F4F4;
    --bg-footer: #111111;
    --footer__line: #1F1E1E;
    --font-en: "Cormorant Garamond", "Times New Roman", serif;
    --font-serif: "Noto Serif JP", "Yu Mincho", serif;
    --font-sans: "Noto Sans JP", "Yu Gothic", sans-serif;
    --base: 1440;
}

@media screen and (max-width: 768px) {
    :root {
        --base: 375;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: calc(320 / var(--base) * 100vw);
    color: var(--text-black);
    background: var(--white);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;

    &.is-menu-open {
        overflow: hidden;
    }
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

ul {
    list-style: none;
}

.pc {
    display: block;
}

.sp {
    display: none;
}


/*header*/
.header {
    position: sticky;
    top: 0;
    z-index: 80;
    height: calc(92 / var(--base) * 100vw);
    background: var(--white);

    .header__inner {
        width: 100%;
        max-width: calc(1440 / var(--base) * 100vw);
        padding: 0 calc(60 / var(--base) * 100vw);
        margin: 0 auto;
        display: flex;
        align-items: stretch;
        height: 100%;
        padding-left: calc(78 / var(--base) * 100vw);
        padding-right: calc(60 / var(--base) * 100vw);

        .header__logo {
            display: flex;
            flex: 1 1 auto;
            align-items: center;
            position: relative;

            h1 {
                position: absolute;
                top: -100%;
            }

            img {
                width: calc(140 / var(--base) * 100vw);
                object-fit: cover;
            }
        }

        .header__nav {
            display: flex;
            align-items: center;
            padding: calc(14.02 / var(--base) * 100vw) calc(44.9 / var(--base) * 100vw) calc(14.1 / var(--base) * 100vw) calc(14.4 / var(--base) * 100vw);

            a {
                font-family: var(--font-sans);
                font-size: calc(14.2 / var(--base) * 100vw);
                font-weight: 700;
                letter-spacing: calc(0.8 / var(--base) * 100vw);
                line-height: calc(25.6 / var(--base) * 100vw);
                color: var(--black);
                padding: calc(18.19 / var(--base) * 100vw) calc(19.2 / var(--base) * 100vw) calc(19.78 / var(--base) * 100vw);
                white-space: nowrap;
                transition: color 0.2s ease;

                &:hover {
                    color: var(--green);
                }
            }
        }

        .header__media {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
            width: calc(163 / var(--base) * 100vw);
            height: calc(101 / var(--base) * 100vw);
            border-radius: 0 0 calc(10 / var(--base) * 100vw) calc(10 / var(--base) * 100vw);
            overflow: hidden;
            color: var(--white);
            background: var(--green);
            font-family: var(--font-serif);
            font-size: calc(21 / var(--base) * 100vw);
            font-weight: 700;
            letter-spacing: calc(0.45 / var(--base) * 100vw);
            line-height: calc(28.2 / var(--base) * 100vw);

            small {
                font-size: calc(18 / var(--base) * 100vw);
            }

            &::before {
                content: "";
                position: absolute;
                inset: 0;
                background: url("../img/jobee_media_bg.jpg") center 50% / cover no-repeat;
                opacity: 0.48;
            }

            &::after {
                content: "";
                position: absolute;
                inset: 0;
                background: var(--green);
                opacity: 0.82;
                mix-blend-mode: multiply;
            }

            >span:not(.header__media__dot) {
                position: relative;
                z-index: 1;
            }

            .header__media__dot {
                position: absolute;
                right: calc(6.68 / var(--base) * 100vw);
                bottom: calc(8.49 / var(--base) * 100vw);
                z-index: 1;
                width: calc(18.57 / var(--base) * 100vw);
                height: calc(18.57 / var(--base) * 100vw);
                border-radius: calc(3.54 / var(--base) * 100vw);
                background: var(--white);

                &::before {
                    content: "";
                    position: absolute;
                    top: calc(50% - calc(2 / var(--base) * 100vw));
                    left: calc(50% - calc(3 / var(--base) * 100vw));
                    width: calc(3 / var(--base) * 100vw);
                    height: calc(3 / var(--base) * 100vw);
                    border-top: calc(1.41 / var(--base) * 100vw) solid var(--green);
                    border-right: calc(1.41 / var(--base) * 100vw) solid var(--green);
                    transform: rotate(45deg);
                }
            }
        }

        .menu-toggle,
        .mobile-menu {
            display: none;
        }
    }
}

/*footer*/
.footer {
    position: relative;
    background: var(--bg-footer);

    .pagetop {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        position: absolute;
        top: calc(-50 / var(--base) * 100vw);
        right: 0;
        z-index: 2;

        gap: calc(11.78 / var(--base) * 100vw);
        width: calc(100 / var(--base) * 100vw);
        height: calc(100 / var(--base) * 100vw);
        border-radius: calc(10 / var(--base) * 100vw) 0 0 calc(10 / var(--base) * 100vw);
        color: var(--green);
        background: var(--white);
        font-size: calc(11 / var(--base) * 100vw);
        font-weight: 400;
        letter-spacing: calc(0.8 / var(--base) * 100vw);
        line-height: calc(23.7 / var(--base) * 100vw);

        .pagetop__arrow {
            display: block;
            width: calc(11.78 / var(--base) * 100vw);
            height: calc(11.78 / var(--base) * 100vw);
            border-top: calc(3.05 / var(--base) * 100vw) solid var(--green);
            border-right: calc(3.05 / var(--base) * 100vw) solid var(--green);
            transform: rotate(-45deg);
        }
    }

    .footer__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(47 / var(--base) * 100vw);
        width: min(100%, calc(1328 / var(--base) * 100vw));
        min-height: calc(282 / var(--base) * 100vw);
        margin-inline: auto;
        padding: calc(48 / var(--base) * 100vw) calc(56 / var(--base) * 100vw) calc(30 / var(--base) * 100vw);

        .footer__brand {
            width: calc(144 / var(--base) * 100vw);

            img {
                object-fit: cover;
            }
        }

        .footer__line {
            width: calc(1 / var(--base) * 100vw);
            height: calc(172 / var(--base) * 100vw);
            background: var(--footer__line);
        }

        .footer-info {
            display: grid;
            height: 100%;
            gap: calc(4 / var(--base) * 100vw);
            min-width: calc(175.5 / var(--base) * 100vw);
            color: var(--gray);

            p {
                font-family: var(--font-sans);
                font-size: calc(14 / var(--base) * 100vw);
                font-weight: 700;
                letter-spacing: calc(0.8 / var(--base) * 100vw);
                line-height: calc(23.7 / var(--base) * 100vw);
            }

            address {
                font-style: normal;
                font-family: var(--font-sans);
                font-size: calc(13 / var(--base) * 100vw);
                font-weight: 400;
                letter-spacing: calc(0.8 / var(--base) * 100vw);
                line-height: calc(23.7 / var(--base) * 100vw);
            }

            .footer-map {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: calc(10 / var(--base) * 100vw);
                width: 100%;
                margin-top: calc(6 / var(--base) * 100vw);
                padding: calc(10 / var(--base) * 100vw) calc(40 / var(--base) * 100vw);
                border-radius: calc(7 / var(--base) * 100vw);
                background: var(--footer__line);
                font-family: var(--font-sans);
                font-size: calc(13 / var(--base) * 100vw);
                font-weight: 400;
                letter-spacing: calc(0.8 / var(--base) * 100vw);
                line-height: calc(23.7 / var(--base) * 100vw);
                height: calc(32 / var(--base) * 100vw);

                .footer__arrow {
                    display: block;
                    width: calc(7 / var(--base) * 100vw);
                    height: calc(7 / var(--base) * 100vw);
                    border-top: calc(1 / var(--base) * 100vw) solid var(--gray);
                    border-right: calc(1 / var(--base) * 100vw) solid var(--gray);
                    transform: rotate(45deg);
                }
            }

            .footer-sns {
                display: flex;
                align-items: center;
                width: 100%;
                gap: calc(12 / var(--base) * 100vw);
                padding: calc(13 / var(--base) * 100vw) 0;

                span {
                    font-family: var(--font-sans);
                    font-size: calc(13 / var(--base) * 100vw);
                    font-weight: 400;
                    letter-spacing: calc(0.8 / var(--base) * 100vw);
                    line-height: calc(23.7 / var(--base) * 100vw);
                }

                i {
                    width: calc(22 / var(--base) * 100vw);
                    height: calc(1 / var(--base) * 100vw);
                    background: var(--gray);
                }

                a {
                    display: inline-flex;

                    img {
                        width: calc(19.36 / var(--base) * 100vw);
                        height: calc(19.36 / var(--base) * 100vw);
                        fill: var(--gray);
                        object-fit: cover;
                    }

                    &.x-icon img {
                        width: calc(17.61 / var(--base) * 100vw);
                        height: calc(18 / var(--base) * 100vw);
                        margin-left: calc(1.53 / var(--base) * 100vw);
                    }
                }


            }
        }

        .footer-media {
            display: grid;
            position: relative;
            place-items: center;
            width: calc(333 / var(--base) * 100vw);
            height: calc(172 / var(--base) * 100vw);
            border-radius: calc(10 / var(--base) * 100vw);
            overflow: hidden;
            color: var(--white);
            background: var(--green);
            text-align: center;

            .footer-media__bg,
            .footer-media__overlay {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
            }

            .footer-media__bg {
                object-fit: cover;
            }

            .footer-media__overlay {
                background: var(--green);
                mix-blend-mode: multiply;
            }

            .footer-media__en,
            .footer-media__ja,
            .footer-media__btn {
                position: relative;
                z-index: 1;
            }

            .footer-media__en {
                align-self: end;
                font-family: var(--font-en);
                font-size: calc(50.45 / var(--base) * 100vw);
                font-weight: 400;
                letter-spacing: calc(0.63 / var(--base) * 100vw);
                line-height: calc(50.45 / var(--base) * 100vw);
            }

            .footer-media__ja {
                align-self: start;
                font-family: var(--font-serif);
                font-size: calc(15.77 / var(--base) * 100vw);
                font-weight: 700;
                letter-spacing: calc(0.63 / var(--base) * 100vw);
                line-height: calc(25.75 / var(--base) * 100vw);
            }

            .footer-media__btn {
                display: grid;
                position: absolute;
                right: calc(10.14 / var(--base) * 100vw);
                bottom: calc(10.14 / var(--base) * 100vw);
                place-items: center;
                width: calc(26.25 / var(--base) * 100vw);
                height: calc(26.25 / var(--base) * 100vw);
                border-radius: calc(5 / var(--base) * 100vw);
                color: var(--green);
                background: var(--white);

                .footer-media__arrow {
                    display: block;
                    width: calc(7 / var(--base) * 100vw);
                    height: calc(7 / var(--base) * 100vw);
                    border-top: calc(2 / var(--base) * 100vw) solid var(--green);
                    border-right: calc(2 / var(--base) * 100vw) solid var(--green);
                    transform: rotate(45deg);
                }
            }
        }

        .footer-nav {
            display: grid;
            gap: calc(12 / var(--base) * 100vw);
            color: var(--gray);
            font-family: var(--font-sans);
            font-size: calc(14 / var(--base) * 100vw);
            font-weight: 500;
            letter-spacing: calc(0.8 / var(--base) * 100vw);
            line-height: calc(25.6 / var(--base) * 100vw);

            p {
                display: flex;
                align-items: flex-end;
                justify-content: flex-start;
                font-family: var(--font-serif);
                font-size: calc(12 / var(--base) * 100vw);
                font-weight: 500;
                letter-spacing: calc(0.8 / var(--base) * 100vw);
                line-height: calc(25.6 / var(--base) * 100vw);
                opacity: 0.8;
                gap: calc(9.5 / var(--base) * 100vw);

                span {
                    display: block;
                    bottom: calc(-5 / var(--base) * 100vw);
                    width: calc(11 / var(--base) * 100vw);
                    height: calc(1 / var(--base) * 100vw);
                    background: currentColor;
                    transform: translateY(calc(-5.5 / var(--base) * 100vw));
                }
            }
        }
    }

    .footer-copy {
        width: 100%;
        margin-inline: auto;
        padding: calc(18.18 / var(--base) * 100vw) calc(51.21 / var(--base) * 100vw) calc(19.19 / var(--base) * 100vw) calc(51.2 / var(--base) * 100vw);

        .footer-copy__inner {
            display: flex;
            justify-content: space-between;
            color: var(--white);
            font-family: var(--font-sans);
            font-size: calc(10.4 / var(--base) * 100vw);
            font-weight: 400;
            letter-spacing: calc(0.8 / var(--base) * 100vw);
            line-height: calc(18.72 / var(--base) * 100vw);
        }
    }
}

.container {
    width: min(100%, calc(1440 / var(--base) * 100vw));
    margin-inline: auto;
    padding-inline: calc(28.8 / var(--base) * 100vw);
}

.section {
    padding: calc(76.8 / var(--base) * 100vw) calc(51.2 / var(--base) * 100vw) calc(76.8 / var(--base) * 100vw) calc(51.21 / var(--base) * 100vw);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, calc(372.58 / var(--base) * 100vw));
    min-height: calc(68.2 / var(--base) * 100vw);
    padding: calc(19.6 / var(--base) * 100vw) calc(28 / var(--base) * 100vw);
    border-radius: calc(999 / var(--base) * 100vw);
    color: var(--white);
    background: var(--text-black);
    font-family: var(--font-sans);
    font-size: calc(16 / var(--base) * 100vw);
    font-weight: 700;
    letter-spacing: calc(0.8 / var(--base) * 100vw);
    line-height: calc(28.8 / var(--base) * 100vw);
    transition: opacity 0.2s ease;
    position: relative;
    text-decoration: none;

    &:hover {
        opacity: 0.88;
    }

    .arrow {
        position: absolute;
        top: 50%;
        right: calc(28 / var(--base) * 100vw);
        width: calc(10 / var(--base) * 100vw);
        height: calc(10 / var(--base) * 100vw);
        transform: translateY(-50%);

        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            display: block;
            width: calc(6 / var(--base) * 100vw);
            height: calc(6 / var(--base) * 100vw);
            border-top: calc(1 / var(--base) * 100vw) solid currentColor;
            border-right: calc(1 / var(--base) * 100vw) solid currentColor;
            transform: translate(-50%, -50%) rotate(45deg);
        }
    }
}

.breadcrumb {
    background: var(--white);
    width: 100%;

    .breadcrumb__inner {
        max-width: calc(1440 / var(--base) * 100vw);
        margin: 0 auto;
        padding: calc(12 / var(--base) * 100vw) calc(110 / var(--base) * 100vw);
        min-height: calc(48 / var(--base) * 100vw);
        color: var(--green);
        font-family: var(--font-sans);
        font-size: calc(13 / var(--base) * 100vw);
        font-weight: 400;
        letter-spacing: calc(0.8 / var(--base) * 100vw);
        line-height: calc(23.4 / var(--base) * 100vw);
        display: block;

        a,
        span {
            &::after {
                content: "";
                display: inline-block;
                white-space: normal;
                width: calc(5.19 / var(--base) * 100vw);
                height: calc(5.19 / var(--base) * 100vw);
                border-right: calc(1 / var(--base) * 100vw) solid #666666;
                border-bottom: calc(1 / var(--base) * 100vw) solid #666666;
                transform: translateY(-50%) rotate(-45deg);
                margin: 0 calc(5.5 / var(--base) * 100vw);
            }

            &:last-child::after {
                display: none;
            }
        }
    }
}

.section-head {
    display: grid;
    justify-items: center;
    gap: calc(8.59 / var(--base) * 100vw);
    text-align: center;

    h2 {
        color: var(--green);
        font-family: var(--font-en);
        font-size: calc(64 / var(--base) * 100vw);
        font-weight: 400;
        letter-spacing: calc(0.8 / var(--base) * 100vw);
        line-height: calc(64 / var(--base) * 100vw);
    }

    p {
        color: var(--text-black);
        font-family: var(--font-serif);
        font-size: calc(20 / var(--base) * 100vw);
        font-weight: 700;
        letter-spacing: calc(0.8 / var(--base) * 100vw);
        line-height: calc(32.67 / var(--base) * 100vw);
    }
}

.lead {
    font-family: var(--font-sans);
    color: var(--text-black);
    font-size: calc(16 / var(--base) * 100vw);
    font-weight: 400;
    letter-spacing: calc(0.8 / var(--base) * 100vw);
    line-height: calc(28.8 / var(--base) * 100vw);
    text-align: center;
    margin-top: calc(48 / var(--base) * 100vw);
}

.contact {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
    padding-bottom: calc(105.59 / var(--base) * 100vw);
    min-height: calc(491.05 / var(--base) * 100vw);

    .container {
        display: grid;
        justify-items: center;
    }

    &::before {
        position: absolute;
        inset: 0;
        background: url("../img/hex-texture.png") left top / calc(600 / var(--base) * 100vw) calc(600 / var(--base) * 100vw) repeat;
        content: "";
        opacity: 0.35;
        mix-blend-mode: multiply;
    }

    .section-head h2,
    .section-head p,
    .lead {
        color: var(--white);
    }

    .contact_lead {
        margin: calc(47.4 / var(--base) * 100vw) 0 calc(28.8 / var(--base) * 100vw);
    }
}

/* ==========================================================================
   Pagination (ページネーション)
   ========================================================================== */
.pagination {
    margin: calc(50 / var(--base) * 100vw) auto 0;
    padding: 0 calc(20 / var(--base) * 100vw);
    text-align: center;
}

.pagination .screen-reader-text {
    border: 0;
    clip: rect(calc(1 / var(--base) * 100vw), calc(1 / var(--base) * 100vw), calc(1 / var(--base) * 100vw), calc(1 / var(--base) * 100vw));
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: calc(1 / var(--base) * 100vw);
    margin: calc(-1 / var(--base) * 100vw);
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: calc(1 / var(--base) * 100vw);
    word-wrap: normal !important;
}

.pagination .nav-links {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 / var(--base) * 100vw);
    flex-wrap: wrap;
}


.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(40 / var(--base) * 100vw);
    height: calc(40 / var(--base) * 100vw);
    padding: 0 calc(6 / var(--base) * 100vw);
    font-size: calc(14 / var(--base) * 100vw);
    font-weight: 500;
    color: #333333;
    background-color: #ffffff;
    border: calc(1 / var(--base) * 100vw) solid #e0e0e0;
    border-radius: calc(4 / var(--base) * 100vw);
    text-decoration: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* ホバー時 */
.pagination a.page-numbers:hover {
    color: #ffffff;
    background-color: var(--green);
    border-color: var(--green);
}

.pagination .page-numbers.current {
    color: #ffffff;
    background-color: var(--green);
    border-color: var(--green);
    cursor: default;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    padding: 0 calc(16 / var(--base) * 100vw);
    font-size: calc(13 / var(--base) * 100vw);
}


@media (max-width: 767px) {

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    /*header*/
    .header {
        height: calc(60 / var(--base) * 100vw);

        .header__inner {
            padding: 0 calc(28.8 / var(--base) * 100vw);

            .header__logo {
                img {
                    width: calc(88 / var(--base) * 100vw);
                }
            }

            .header__nav,
            .header__media {
                display: none;
            }

            .menu-toggle {
                display: grid;
                align-self: center;
                gap: calc(5 / var(--base) * 100vw);
                width: calc(22 / var(--base) * 100vw);
                height: calc(16 / var(--base) * 100vw);
                margin-left: auto;
                place-content: center;

                span {
                    display: block;
                    width: calc(22 / var(--base) * 100vw);
                    height: calc(1 / var(--base) * 100vw);
                    background: var(--green);
                }
            }

            .mobile-menu {
                display: block;
                position: fixed;
                inset: 0;
                z-index: 120;
                height: 100dvh;
                overflow: hidden;
                background: var(--white);
                opacity: 0;
                pointer-events: none;
                visibility: hidden;
                transition: opacity 0.2s ease, visibility 0.2s ease;

                &.is-open {
                    opacity: 1;
                    pointer-events: auto;
                    visibility: visible;
                }

                .mobile-menu__panel {
                    position: relative;
                    width: 100vw;
                    /* height: min(calc(517 / var(--base) * 100vw), calc(100dvh - calc(111 / var(--base) * 100vw))); */
                    height: 100%;
                    min-height: 0;
                    background: var(--green);

                    .menu-close {
                        width: 100%;
                        min-height: calc(64 / var(--base) * 100vw);
                        padding: calc(20 / var(--base) * 100vw);
                        position: relative;

                        span {
                            position: absolute;
                            right: calc(20 / var(--base) * 100vw);
                            width: calc(30 / var(--base) * 100vw);
                            height: calc(1 / var(--base) * 100vw);
                            background: #000000;

                            &:first-child {
                                transform: rotate(45deg);
                            }

                            &:last-child {
                                transform: rotate(-45deg);
                            }
                        }
                    }

                    .mobile-menu__nav {
                        display: grid;
                        justify-items: center;
                        padding-top: calc(34.57 / var(--base) * 100vw);
                        color: var(--white);
                        font-family: var(--font-sans);
                        font-size: calc(19 / var(--base) * 100vw);
                        font-weight: 500;
                        letter-spacing: calc(0.8 / var(--base) * 100vw);
                        line-height: calc(25.6 / var(--base) * 100vw);
                        text-align: center;

                        a {
                            padding: calc(18.19 / var(--base) * 100vw) 0 calc(19.78 / var(--base) * 100vw);
                        }
                    }
                }

                .mobile-menu__media {
                    height: calc(111 / var(--base) * 100vw);
                    padding: calc(10 / var(--base) * 100vw) calc(10 / var(--base) * 100vw) 0;
                    overflow: hidden;
                    position: absolute;
                    z-index: 9999;
                    bottom: 0;
                    width: 100%;
                    background: #FFF;

                    .mobile-menu__media_inner {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        z-index: 2;
                        width: 100%;
                        min-height: calc(101 / var(--base) * 100vw);
                        border-radius: calc(10 / var(--base) * 100vw) calc(10 / var(--base) * 100vw) 0 0;
                        overflow: hidden;
                        color: var(--white);
                        background: var(--green);
                        font-family: var(--font-serif);
                        font-size: calc(21 / var(--base) * 100vw);
                        font-weight: 700;
                        letter-spacing: calc(0.45 / var(--base) * 100vw);
                        line-height: calc(28.2 / var(--base) * 100vw);

                        small {
                            font-size: calc(18 / var(--base) * 100vw);
                        }

                        &::before {
                            content: "";
                            position: absolute;
                            inset: 0;
                            background: url("../img/jobee_media_bg.jpg") center 50% / cover no-repeat;
                            opacity: 0.48;
                        }

                        &::after {
                            content: "";
                            position: absolute;
                            inset: 0;
                            background: var(--green);
                            opacity: 0.82;
                            mix-blend-mode: multiply;
                        }

                        >span:not(.mobile-menu__media__dot) {
                            position: relative;
                            z-index: 1;
                        }

                        .mobile-menu__media__dot {
                            position: absolute;
                            right: calc(10.43 / var(--base) * 100vw);
                            bottom: calc(10.43 / var(--base) * 100vw);
                            z-index: 1;
                            width: calc(18.57 / var(--base) * 100vw);
                            height: calc(18.57 / var(--base) * 100vw);
                            border-radius: calc(3.54 / var(--base) * 100vw);
                            background: var(--white);

                            &::before {
                                content: "";
                                position: absolute;
                                top: calc(50% - calc(2 / var(--base) * 100vw));
                                left: calc(50% - calc(3 / var(--base) * 100vw));
                                width: calc(3 / var(--base) * 100vw);
                                height: calc(3 / var(--base) * 100vw);
                                border-top: calc(1.41 / var(--base) * 100vw) solid var(--green);
                                border-right: calc(1.41 / var(--base) * 100vw) solid var(--green);
                                transform: rotate(45deg);
                            }
                        }
                    }
                }
            }
        }

    }

    /*footer*/
    .footer {
        padding-top: 0;

        .pagetop {
            top: calc(-40 / var(--base) * 100vw);
            right: calc(14 / var(--base) * 100vw);
            width: calc(80 / var(--base) * 100vw);
            height: calc(80 / var(--base) * 100vw);
            border-radius: 50%;
            font-size: calc(10 / var(--base) * 100vw);
            gap: 0;

            .pagetop__arrow {
                display: block;
                width: calc(10 / var(--base) * 100vw);
                height: calc(10 / var(--base) * 100vw);
                border-top: calc(3.05 / var(--base) * 100vw) solid var(--green);
                border-right: calc(3.05 / var(--base) * 100vw) solid var(--green);
                transform: rotate(-45deg);
            }
        }

        .footer__inner {
            flex-direction: column;
            gap: calc(28 / var(--base) * 100vw);
            min-height: 0;
            padding: calc(48 / var(--base) * 100vw) calc(51 / var(--base) * 100vw) 0;
            text-align: center;

            .footer__line {
                display: none;
            }

            .footer-info {
                display: grid;
                height: 100%;
                gap: calc(4 / var(--base) * 100vw);
                min-width: 0;
                color: var(--gray);

                p {
                    font-family: var(--font-sans);
                    font-size: calc(14 / var(--base) * 100vw);
                    font-weight: 700;
                    letter-spacing: calc(0.8 / var(--base) * 100vw);
                    line-height: calc(23.7 / var(--base) * 100vw);
                }

                address {
                    font-style: normal;
                    font-family: var(--font-sans);
                    font-size: calc(12 / var(--base) * 100vw);
                    font-weight: 400;
                    letter-spacing: calc(0.8 / var(--base) * 100vw);
                    line-height: calc(23.7 / var(--base) * 100vw);
                }

                .footer-map {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: calc(10 / var(--base) * 100vw);
                    width: 100%;
                    margin-top: calc(6 / var(--base) * 100vw);
                    padding: calc(10 / var(--base) * 100vw) calc(40 / var(--base) * 100vw);
                    border-radius: calc(7 / var(--base) * 100vw);
                    background: var(--footer__line);
                    font-family: var(--font-sans);
                    font-size: calc(13 / var(--base) * 100vw);
                    font-weight: 400;
                    letter-spacing: calc(0.8 / var(--base) * 100vw);
                    line-height: calc(23.7 / var(--base) * 100vw);
                    height: calc(32 / var(--base) * 100vw);

                    .footer__arrow {
                        display: block;
                        width: calc(7 / var(--base) * 100vw);
                        height: calc(7 / var(--base) * 100vw);
                        border-top: calc(1 / var(--base) * 100vw) solid var(--gray);
                        border-right: calc(1 / var(--base) * 100vw) solid var(--gray);
                        transform: rotate(45deg);
                    }
                }

                .footer-sns {
                    justify-content: center;
                }
            }

            .footer-media {
                width: 100%;
                max-width: calc(273 / var(--base) * 100vw);
                height: calc(122 / var(--base) * 100vw);
                border-radius: calc(10 / var(--base) * 100vw);
            }

            .footer-nav {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                row-gap: calc(12 / var(--base) * 100vw);
                column-gap: calc(32 / var(--base) * 100vw);
                justify-items: start;
                color: var(--gray);
                font-family: var(--font-sans);
                font-size: calc(13 / var(--base) * 100vw);
                font-weight: 500;
                letter-spacing: calc(0.8 / var(--base) * 100vw);
                line-height: calc(25.6 / var(--base) * 100vw);

                p {
                    grid-column: 1 / -1;
                    display: flex;
                    align-items: flex-end;
                    justify-content: flex-start;
                    font-family: var(--font-serif);
                    font-size: calc(12 / var(--base) * 100vw);
                    font-weight: 500;
                    letter-spacing: calc(0.8 / var(--base) * 100vw);
                    line-height: calc(25.6 / var(--base) * 100vw);
                    opacity: 0.8;
                    gap: calc(9.5 / var(--base) * 100vw);

                    span {
                        display: block;
                        bottom: calc(-5 / var(--base) * 100vw);
                        width: calc(11 / var(--base) * 100vw);
                        height: calc(1 / var(--base) * 100vw);
                        background: currentColor;
                        transform: translateY(calc(-5.5 / var(--base) * 100vw));
                    }
                }
            }
        }

        .footer-copy {
            padding: calc(18.18 / var(--base) * 100vw) calc(20 / var(--base) * 100vw) calc(19.19 / var(--base) * 100vw);

            .footer-copy__inner {
                display: flex;
                flex-direction: column-reverse;
                justify-content: center;
                gap: calc(10 / var(--base) * 100vw);
                font-size: calc(10.4 / var(--base) * 100vw);
                font-weight: 400;
                letter-spacing: calc(0.8 / var(--base) * 100vw);
                line-height: calc(18.72 / var(--base) * 100vw);
                text-align: center;
            }

            a {
                text-decoration-line: underline;
                text-decoration-style: solid;
                text-underline-offset: 0;
                text-decoration-thickness: 0;
                text-decoration-skip-ink: auto;
            }
        }
    }

    .container {
        padding-inline: calc(28.8 / var(--base) * 100vw);
    }

    .section {
        padding: calc(50.83 / var(--base) * 100vw) 0;
    }

    .btn {
        width: 100%;
        max-width: calc(327 / var(--base) * 100vw);
    }

    .breadcrumb {

        .breadcrumb__inner {
            padding: calc(8 / var(--base) * 100vw) calc(15 / var(--base) * 100vw);
            min-height: calc(40 / var(--base) * 100vw);
        }
    }

    .section-head {
        gap: calc(8.59 / var(--base) * 100vw);

        h2 {
            font-size: calc(48 / var(--base) * 100vw);
            font-weight: 400;
            letter-spacing: calc(0.8 / var(--base) * 100vw);
            line-height: calc(48 / var(--base) * 100vw);
        }

        p {
            font-size: calc(20 / var(--base) * 100vw);
            font-weight: 700;
            letter-spacing: calc(0.8 / var(--base) * 100vw);
            line-height: calc(32.67 / var(--base) * 100vw);
        }
    }

    .lead {
        font-size: calc(16 / var(--base) * 100vw);
        font-weight: 400;
        letter-spacing: calc(0.8 / var(--base) * 100vw);
        line-height: calc(28.8 / var(--base) * 100vw);
    }

    .contact {
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
        padding-bottom: calc(79.63 / var(--base) * 100vw);
        min-height: calc(446.4 / var(--base) * 100vw);

        .contact_lead {
            margin: calc(41.69 / var(--base) * 100vw) 0 calc(28.8 / var(--base) * 100vw);
        }
    }


    /* ==========================================================================
    Pagination (ページネーション)
    ========================================================================== */
    .pagination {
        margin-top: calc(40 / var(--base) * 100vw);
    }

    .pagination .page-numbers {
        min-width: calc(36 / var(--base) * 100vw);
        height: calc(36 / var(--base) * 100vw);
        font-size: calc(13 / var(--base) * 100vw);
    }

    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        padding: 0 calc(12 / var(--base) * 100vw);
    }
}