:root {

    /* 文字間 */
    --lsp-200: 0.2em;
    --lsp-180: 0.18em;
    --lsp-120: 0.12em;
    --lsp-110: 0.11em;
    --lsp-100: 0.1em;
    --lsp-80: 0.08em;
    --lsp-70: 0.07em;
    --lsp-60: 0.06em;
    --lsp-50: 0.05em;
    --lsp-45: 0.045em;
    --lsp-40: 0.04em;
    --lsp-30: 0.03em;
    --lsp-20: 0.02em;
    --lsp-10: 0.01em;

    /* 固有の余白 */
    --p310-spa: 16.1vw;
    --p250-spa: 13vw;
    --p220-spa: 11.5vw;
    --p210-spa: 10.9vw;
    --p200-spa: 10.4vw;
    --p180-spa: 9.3vw;
    --p160-spa: 8.3vw;
    --p150-spa: 7.8vw;
    --p140-spa: 7.3vw;
    --p120-spa: 6.3vw;
    --p110-spa: 5.7vw;
    --p100-spa: 5.2vw;
    --p90-spa: 4.7vw;
    --p80-spa: 4.1vw;
    --p70-spa: 3.6vw;
    --p65-spa: 3.4vw;
    --p60-spa: 3.1vw;
    --p50-spa: 2.7vw;
    --p45-spa: 2.3vw;
    --p40-spa: 2.1vw;
    --p35-spa: 1.8vw;
    --p30-spa: 1.5vw;
    --p25-spa: 1.3vw;
    --p20-spa: 1vw;
    --p15-spa: 0.8vw;
    --p10-spa: 0.52vw;

    /* 文字サイズ */
    /* 25〜52px */
    --25to52: clamp(25px,2.7vw,52px);
    /* 22〜42px */
    --22to42: clamp(22px,2.2vw,42px);
    /* 26〜38px */
    --26to38: clamp(26px,2vw,38px);
    /* 22〜38px */
    --22to38: clamp(22px,2vw,38px);
    /* 20〜38px */
    --20to38: clamp(20px,2vw,38px);
    /* 20〜32px */
    --20to32: clamp(20px,1.6vw,32px);
    /* 18〜32px */
    --18to32: clamp(18px,1.6vw,32px);
    /* 18〜26px */
    --18to26: clamp(18px,1.4vw,26px);
    /* 16〜28px */
    --16to28: clamp(16px,1.5vw,28px);
    /* 16〜24px */
    --16to24: clamp(16px,1.2vw,24px);
    /* 16〜22px */
    --16to22: clamp(16px,1.1vw,22px);
    /* 14〜24px */
    --14to24: clamp(14px,1.2vw,24px);
    /* 12〜22px */
    --12to22: clamp(12px,1.1vw,22px);
    /* 16〜20px */
    --16to20: clamp(16px,1vw,20px);
    /* 14〜20px */
    --14to20: clamp(14px,1vw,20px);
    /* 14〜18px */
    --14to18: clamp(14px,0.9vw,18px);
    /* 13〜18px */
    --13to18: clamp(13px,0.9vw,18px);
    /* 11〜16px */
    --11to16: clamp(11px,0.8vw,16px);
    /* 12〜18px */
    --12to18: clamp(12px,0.9vw,18px);
    /* 12〜14px */
    --12to14: clamp(12px,0.7vw,14px);


    /* 行送り */
    --lh-33: 3.3;
    --lh-30: 3;
    --lh-26: 2.6;
    --lh-24: 2.4;
    --lh-23: 2.3;
    --lh-22: 2.2;
    --lh-21: 2.1;
    --lh-20: 2;
    --lh-19: 1.9;
    --lh-18: 1.8;
    --lh-16: 1.6;
    --lh-14: 1.4;

    /* 太さ */
    --fw-900: 900;
    --fw-800: 800;
    --fw-700: 700;
    --fw-600: 600;
    --fw-500: 500;
    --fw-400: 400;

    /* カラー */
    --navy: #192D5A;
    --yellow: #FADC5A;
    --l-gray: #F0F2F5;
    --d-gray: #BEC3C8;
    --green: #82CD7D;
    --pink: #F0969B;
    --blue: #8CD7F0;


    /* フォント */
    --ff-zenkaku: "Zen Kaku Gothic New", sans-serif;
    --ff-mont: "Montserrat", sans-serif;
    --ff-arial: Arial, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--ff-zenkaku);
    color: var(--navy);
    letter-spacing: var(--lsp-50);
    font-size: var(--13to18);
    font-weight: var(--fw-500);
}

a {
    display: block;
}

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

.sp-view {
    display: none;
}

.spm-view {
    display: none;
}

/* header */

.pc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--p60-spa);
    height: 105px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: transparent;
    box-shadow: none;
    transition: 0.3s;

    h1 {
        width: 12vw;
        min-width: 150px;
        max-width: 232px;
    }

    nav {
        ul {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: var(--p35-spa);
            font-weight: var(--fw-700);

            .menu {
                position: relative;
                padding-top: 38px;

                a {
                    transition: 0.3s;
                }

                &::before {
                    content: "";
                    display: block;
                    width: 100%;
                    height: 5px;
                    background-color: var(--yellow);
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                    transition: 0.3s;
                }

                &:hover {
                    a {
                        color: var(--yellow);
                        transition: 0.3s;
                    }

                    &::before {
                        opacity: 1;
                        transition: 0.3s;
                    }
                }
            }

            .menu-contact {
                width: 170px;
                height: 105px;
                background-color: var(--navy);

                &:hover {
                    a {
                        color: var(--yellow);
                        transition: 0.3s;

                        svg {
                            path {
                                fill: var(--yellow);
                                transition: fill 0.3s ease;
                            }
                        }
                    }
                    }

                a {
                    padding-top: 25px;
                    color: #fff;
                    text-align: center;
                    transition: 0.3s;

                    svg {
                        margin-bottom: 10px;
                        margin-left: auto;
                        margin-right: auto;
                        display: block;

                        path {
                            transition: fill 0.3s ease;
                        }
                    }

                }
            }
        }
    }
}

.pc-header.is-scrolled {
    background-color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
}

.sp-header {
    display: none;
}

/* ボタン */

.l-btn {

    border-radius: 100px;

    a {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: var(--fw-700);
        position: relative;

        img {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    }

}

.lg-btn,.dn-btn {
    width: 20.8vw;
    min-width: 300px;
    margin-left: auto;
    margin-right: auto;
    &:hover {

        a {
            img {
                right: var(--p35-spa);
                transition: 0.3s;
            }
        }

    }
    
    a {
        padding: 33px;

        img {
            right: var(--p40-spa);
            transition: 0.3s;
        }
    }
}

.lg-btn {
    background-color: var(--l-gray);
    transition: 0.3s;

    &:hover {
        transition: 0.3s;
        opacity: 0.8;
    }
}

.dn-btn {
    background-color: var(--navy);
    transition: 0.3s;

    &:hover {
        transition: 0.3s;
        opacity: 0.8;
    }

    a {
        color: #fff;
    }
}

.y-btn {
    background-color: var(--yellow);
}

.con-btn {
    width: 31vw;
    min-width: 350px;
    transition: 0.3s;

    &:hover {
        transition: 0.3s;
        opacity: 0.8;

        a {
            img {
                right: 2.8vw;
                transition: 0.3s;
            }
        }
    }

    a {
        padding: var(--p50-spa);
        font-size: var(--16to24);

        img {
            right: var(--p60-spa);
            transition: 0.3s;
        }
    }
}

.t-sec {
    .en-ttl {
        font-size: var(--12to22);
        font-weight: var(--fw-700);
        letter-spacing: var(--lsp-60);
        position: relative;
        width: fit-content;
        font-family: var(--ff-mont);

        &::before {
            content: "";
            display: block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--yellow);
            position: absolute;
        }
    }
}

/* お問い合わせ */

.contact {
    background-color: var(--navy);
    background-image: url(../images/common/footer-bg.png);
    background-size: 42.7vw 19.8vw;
    background-position: bottom right;
    background-repeat: no-repeat;
    padding: var(--p120-spa) var(--p310-spa) var(--p140-spa);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--p100-spa);

    .text-wrap {
        color: #fff;

        .p-en__wrap {
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            gap: var(--p25-spa);
            margin-bottom: var(--p50-spa);

            .jp-ttl {
                font-size: var(--26to38);
                letter-spacing: var(--lsp-60);
            }

            .en-ttl {
                font-size: var(--12to22);
                letter-spacing: var(--lsp-60);
                padding-left: 27px;

                &::before {
                    left: 0;
                    top: calc(50% - 6px);
                }
            }
        }

        p {
            font-size: var(--13to18);
            letter-spacing: var(--lsp-30);
            line-height: var(--lh-24);
        }
    }
}

/* フッター */
footer {
    padding: var(--p80-spa) var(--p150-spa) var(--p90-spa);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .logo-wrap {
        p {
            width: 12vw;
            min-width: 200px;
            margin-bottom: var(--p30-spa);
        }

        small {
            font-size: var(--12to14);
            font-family: var(--ff-arial);
        }
    }

    .menu-wrap.pc-footer {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--p80-spa);

        ul {
            li {
                margin-bottom: var(--p30-spa);
                font-weight: var(--fw-700);
                padding-left: 25px;

                a {
                    span {
                        position: relative;
                        display: block;
                        font-size: var(--13to18);
                        padding-left: 25px;
                        transition: 0.3s;

                        &::before {
                            content: "";
                            display: block;
                            width: 10px;
                            height: 10px;
                            background-color: var(--yellow);
                            border-radius: 50%;
                            position: absolute;
                            top: calc(50% - 5px);
                            left: 0;
                            opacity: 0;
                            transition: 0.3s;
                        }

                        &:hover {
                            color: var(--yellow);
                            transition: 0.3s;

                            &::before {
                                opacity: 1;
                                transition: 0.3s;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ページトップ */
.pagetop {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 900;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .6s ease, transform .6s ease;
    width: 80px;
}

.pagetop.is-hidden {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none; /* 非表示時はクリック不可 */
}


@media screen and (max-width:1600px) {
    html {
        font-size: 57%;
    }

    .pc-view {
        display: block;
    }

}

@media screen and (max-width:1400px) {
    .contact {
        padding: var(--p120-spa) var(--p220-spa) var(--p140-spa);

        .text-wrap {
            p {
                br {
                    display: none;
                }
            }
        }
    }
} 


@media screen and (max-width:1200px) {
    html {
        font-size: 52%;
    }

}

@media screen and (max-width:768px) {

    :root {
        /* 余白 */
        --p150-spa: 40vw;
        --p130-spa: 34.6vw;
        --p120-spa: 32vw;
        --p100-spa: 26.5vw;
        --p90-spa: 24vw;
        --p80-spa: 21vw;
        --p70-spa: 18.6vw;
        --p65-spa: 17.3vw;
        --p60-spa: 16vw;
        --p55-spa: 14.6vw;
        --p50-spa: 13.3vw;
        --p45-spa: 12vw;
        --p40-spa: 10.5vw;
        --p35-spa: 9.3vw;
        --p30-spa: 8vw;
        --p25-spa: 6.5vw;
        --p20-spa: 5.3vw;
        --p15-spa: 4vw;
        --p10-spa: 2.6vw;
        --p5-spa: 1.3vw;

        /* 文字サイズ */
        /* 13〜16px */
        --13to16: clamp(13px,3.4vw,16px);
    }

    html {
        font-size: 62.5%;
    }

    .pc-view {
        display: none;
    }

    .sp-view {
        display: block;
    }

    .pc-header {
        display: none;
    }

    .sp-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: var(--p20-spa);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;

        h1 {
            width: 130px;
        }

        .hbg-btn {
            width: 60px;
            height: 60px;
            background-color: var(--navy);
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 24px;
                height: 24px;
            }
        }

        nav {
            position: fixed;
            top: 0;
            right: -100%;
            transition: 0.7s;
            width: 58vw;
            min-width: 210px;
            height: 100vh;
            z-index: 10000;
            background-color: var(--navy);
            padding-top: 18.3vw;
            padding-left: var(--p20-spa);
            padding-right: var(--p20-spa);
            padding-bottom: var(--p40-spa);
        }

        nav.open {
            right: 0;
            transition: 0.5s;

            &::after {
                content: "";
                display: block;
                max-width: 200px;
                width: 30.6vw;
                height: 34.5vw;
                background-image: url(../images/common/shinozaki-icon.png);
                background-size: contain;
                background-repeat: no-repeat;
                position: absolute;
                bottom: var(--p20-spa);
                left: 50%;
                transform: translateX(-50%);
            }

            .hbg-btn {
                width: 30px;
                height: 30px;
                position: absolute;
                top: 10px;
                right: 20px;

                span {
                    content: "";
                    display: block;
                    width: 30px;
                    height: 2.5px;
                    background-color: #fff;
                    position: absolute;

                    &:nth-child(1) {
                        top: 20px;
                        left: 0;
                        transform: rotateZ(45deg);
                    }

                    &:nth-child(2) {
                        top: 20px;
                        left: 0;
                        transform: rotateZ(-45deg);
                    }
                }
            }

            ul {
                li {
                    border-bottom: 1px solid rgba(255,255,255,0.2);

                    &:first-child {
                        border-top: 1px solid rgba(255,255,255,0.2);
                    }

                    a {
                        padding: var(--p20-spa);
                        color: #fff;
                        font-weight: var(--fw-700);
                        font-size: var(--13to18);
                    }
                }
            }
        }
    }

    .sp-header.is-scrolled {
            background-color: #fff;
            box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
    }

    /* ボタン */
    .lg-btn, .dn-btn {
        width: 66vw;
        min-width: 250px;
        border: none;
        transition: 0s;

        a {
            padding: 25px;

            img {
                right: var(--p25-spa);
                width: 22px;
            }
        }

        &:hover {
            a {
                img {
                    right: var(--p25-spa);
                }
            }
        }
    }

    .lg-btn {
        &:hover {
            border: none;
            transition: 0s;
        }
    }

    .dn-btn {
        &:hover {
            border: none;
            transition: 0s;
        }
    }

    .con-btn {
        width: 86.5vw;
        min-width: 325px;
        border: none;
        transition: 0s;

        &:hover {
            transition: 0s;
            border: none;

            a {
                img {
                    right: var(--p30-spa);
                }
            }
        }

        a {
            padding: var(--p25-spa);

            img {
                width: 5.8vw;
                height: 5.8vw;
                min-width: 22px;
                min-height: 22px;
                right: var(--p30-spa);
            }
        }
    }

    footer {
        padding: var(--p40-spa) var(--p25-spa) var(--p40-spa);

        .logo-wrap {
            margin-left: auto;
            margin-right: auto;

            p {
                margin-left: auto;
                margin-right: auto;
                width: 22.9vw;
                min-width: 87px;
                margin-bottom: var(--p20-spa);
            }
        }

        .menu-wrap.pc-footer {
            display: none;
        }
    }

    .contact {
        flex-direction: column;
        gap: 0;
        padding: var(--p60-spa) var(--p30-spa) var(--p80-spa);
        background-image: url(../images/common/footer-bg_sp.png);
        background-size: 100%;
        background-position: bottom center;
        
        .text-wrap {
            .p-en__wrap {
                margin-bottom: var(--p25-spa);

                .en-ttl {
                    font-size: 8.5vw;
                }
            }
        }
    }

    /* ページトップ */
    .pagetop {
        width: var(--p60-spa);
        min-width: 60px;

        img {
            width: 100%;
        }
    }


    
}

@media screen and (max-width:500px) {

    .spm-view {
        display: block;
    }

}