: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-55: 0.055em;
    --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;
    --p260-spa: 13.5vw;
    --p250-spa: 13vw;
    --p220-spa: 11.5vw;
    --p210-spa: 10.9vw;
    --p200-spa: 10.4vw;
    --p190-spa: 9.9vw;
    --p180-spa: 9.3vw;
    --p160-spa: 8.3vw;
    --p150-spa: 7.8vw;
    --p140-spa: 7.3vw;
    --p130-spa: 6.7vw;
    --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;

    /* 文字サイズ */
    /* 45〜100px */
    --45to100: clamp(45px,5.2vw,100px);
    /* 45〜85px */
    --45to85: clamp(45px,4.4vw,85px);
    /* 42〜85px */
    --42to85: clamp(42px,4.4vw,85px);
    /* 28〜65px */
    --28to65: clamp(28px,3.4vw,65px);
    /* 24〜60px */
    --24to60: clamp(24px,3.4vw,60px);
    /* 20〜48px */
    --20to48: clamp(20px,2.5vw,48px);
    /* 24〜42px */
    --24to42: clamp(24px,2.1vw,42px);
    /* 22〜42px */
    --22to42: clamp(22px,2.1vw,42px);
    /* 22〜40px */
    --22to40: clamp(22px,2vw,40px);
    /* 22〜38px */
    --22to38: clamp(22px,1.9vw,38px);
    /* 22〜30px */
    --22to30: clamp(22px,1.6vw,30px);
    /* 18〜30px */
    --18to30: clamp(18px,1.6vw,30px);
    /* 18〜28px */
    --18to28: clamp(18px,1.5vw,28px);
    /* 16〜28px */
    --16to28: clamp(16px,1.5vw,28px);
    /* 18〜26px */
    --18to26: clamp(18px,1.4vw,26px);
    /* 16〜24px */
    --16to24: clamp(16px,1.2vw,24px);
    /* 14〜24px */
    --14to24: clamp(14px,1.2vw,24px);
    /* 16〜22px */
    --16to22: clamp(16px,1.1vw,22px);
    /* 16〜20px */
    --16to20: clamp(16px,1vw,20px);
    /* 14〜22px */
    --14to22: clamp(14px,1.1vw,22px);
    /* 12〜22px */
    --12to22: clamp(12px,1.1vw,22px);
    /* 14〜20px */
    --14to20: clamp(14px,1vw,20px);
    /* 16〜18px */
    --16to18: clamp(16px,0.9vw,18px);
    /* 14〜18px */
    --14to18: clamp(14px,0.9vw,18px);
    /* 12〜18px */
    --12to18: clamp(12px,0.9vw,18px);
    /* 14〜16px */
    --14to16: clamp(14px,0.8vw,16px);
    /* 12〜16px */
    --12to16: clamp(12px,0.8vw,16px);
    /* 11〜16px */
    --11to16: clamp(11px,0.8vw,16px);
    /* 12〜15px */
    --12to15: clamp(12px,0.7vw,15px);
    /* 10〜14px */
    --10to14: clamp(10px,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;

    /* カラー */
    --black: #191919;
    --yellow: #FFE43E;
    --l-yellow: #FFFAB4;
    --blue: #4678D2;
    --l-blue: #EDF2FC;
    --m-blue: #B9D2F5;
    --gray: #C8C8C8;


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

    --wave-height: clamp(40px, 5.2vw, 96px);
    /* 速度差：前面=速い / 背面=遅い */
    --wave-speed-front: 18s;
    --wave-speed-back: 30s;
    --wave-back-opacity: .5;
    /* タイル幅 */
    --wave-tile-front: clamp(640px, 100vw, 1600px);
    --wave-tile-back:  clamp(760px, 120vw, 1800px);
}

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

body {
    font-family: var(--ff-zenkaku);
    color: var(--black);
    letter-spacing: var(--lsp-50);
    font-size: var(--14to18);
    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 {
    padding-top: 30px;
    /* padding-left: var(--p130-spa); */
    padding-left: var(--p160-spa);
    padding-right: var(--p160-spa);
    height: 110px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: 0.3s;

    .scroll-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: var(--p30-spa);
        transition: 1s;

        h1 {
        width: 21.2vw;
        min-width: 250px;
        max-width: 408px;
    }

    nav {
        ul {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: var(--p45-spa);
            font-weight: var(--fw-700);
            background-color: #fff;
            border-radius: var(--p60-spa);
            height: 80px;
            box-shadow: 0 2px 15px rgba(25,25,25,0.1);
            padding-left: var(--p80-spa);

            .menu {
                position: relative;
                padding-left: 20px;

                a {
                    transition: 0.3s;
                }

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

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

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

            .menu-contact {
                width: 12.5vw;
                height: 100%;
                background-color: var(--blue);
                border-radius: var(--p60-spa);
                transition: 0.3s;

                &:hover {

                    transition: 0.3s;
                    background-color: var(--yellow);

                    a {
                        color: var(--blue);
                        transition: 0.3s;
                    }
                }

                a {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    text-align: center;
                    transition: 0.3s;

                }
            }
        }
    }
    }
}

.pc-header.is-scrolled {
    
    .scroll-wrap {
        background-color: #fff;
        border-radius: var(--p60-spa);
        box-shadow: 0 2px 15px rgba(25,25,25,0.1);


        nav {
            ul {
                background-color: inherit;
                border-radius: 0;
                box-shadow: none;
                transition: 1s;
            }
        }
    }
}

.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;

        &::after {
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 8.5px solid transparent;
            border-bottom: 8.5px solid transparent;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

    }

}

.normal-btn {
    width: 23.4vw;
    transition: 0.3s;

    &:hover {
        transition: 0.3s;
        transform: scale(1.02);
    }

    a {
        padding: var(--p40-spa);
        font-size: var(--14to24);
        transition: 0.3s;

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

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

.blue-btn {
    background-color: var(--blue);

    a {
        color: #fff;

        &::after {
            border-left: 15px solid #fff;
        }
    }
}

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

    a {
        color: var(--black);

        &::after {
            border-left: 15px solid var(--blue);
        }
    }
}

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

    &:hover {
        transition: 0.3s;
        transform: scale(1.03);
    }

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

        &::after {
            right: var(--p60-spa);
        }
    }
}

/* 波背景 */

.bl-bg {
    padding-top: 12.5vw;
    position: relative;

    &::before {
        content: "";
        display: block;
        width: 100%;
        height: 13.5vw;
        background-image: url(../images/common/blue-wave1_pc.png);
        background-repeat: no-repeat;
        background-size: 100% 13.5vw;
        position: absolute;
        top: 0;
        right: 0;
    }

    .container {
        background-color: var(--l-blue);
    }
}


/* お問い合わせ */

.contact {
    padding-top: var(--p100-spa);
    position: relative;
    z-index: 1;

    .wave-divider{
    position: absolute;
    left: 0; right: 0;
    top: calc(-1 * var(--wave-height) + 1px);
    height: var(--wave-height);
    pointer-events: none;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: visible;
  }

    /* 2レイヤーを疑似要素で作る：背面（:before）、前面（:after） */
    .wave-divider::before,
    .wave-divider::after{
    content:"";
    position:absolute; inset:0;
    background-repeat: repeat-x;
    background-size: var(--wave-tile-w) 100%;
    will-change: background-position;
  }

    /* 背面の波（半透明・少し上に持ち上げて重なり感） */
    .wave-divider::before{
    background-size: var(--wave-tile-back) 100%;
    animation: wave-move-back var(--wave-speed-back) linear infinite;
    opacity: var(--wave-back-opacity);
    transform: translateY(calc(var(--wave-height) * -0.12));
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,60 C100,0 200,0 300,60 S500,120 600,60 800,0 900,60 1100,120 1200,60 V120 H0 Z' fill='%23ffffff'/></svg>");
  }

    /* 前面の波（完全白） */
    .wave-divider::after{
    background-size: var(--wave-tile-front) 100%;
    animation: wave-move-front var(--wave-speed-front) linear infinite;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,60 C100,0 200,0 300,60 S500,120 600,60 800,0 900,60 1100,120 1200,60 V120 H0 Z' fill='%23ffffff'/></svg>");
  }


    .bg-white {
        background-color: #fff;
        padding-top: var(--p100-spa);
        padding-left: var(--p310-spa);
        padding-right: var(--p310-spa);
        padding-bottom: var(--p140-spa);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--p100-spa);
        background-image: url(../images/common/contact-bg_pc.jpg);
        background-position: right bottom;
        background-repeat: no-repeat;
        background-size: 40.6vw 18.5vw;

        .text-wrap {

            width: 31.2vw;

            h3 {
                display: flex;
                align-items: flex-end;
                justify-content: flex-start;
                gap: var(--p20-spa);
                font-size: var(--16to24);
                margin-bottom: var(--p60-spa);
                font-weight: var(--fw-700);

                img {
                    width: 21.1vw;
                }
            }

            p.pc-view {
                font-size: var(--16to18);
                line-height: var(--lh-26);
            }
        }
    }
}

    /* 右→左へループ（タイル幅ぶんだけ動かす） */
    @keyframes wave-move-front{
        from{ background-position: 0 0; }
        to  { background-position: calc(-1 * var(--wave-tile-front)) 0; }
    }
    @keyframes wave-move-back{
        from{ background-position: 0 0; }
        to  { background-position: calc(-1 * var(--wave-tile-back)) 0; }
    }

    @media (prefers-reduced-motion: reduce){
        .wave-divider::before,
        .wave-divider::after{ animation: none; }
    }

/* フッター */
footer {
    background-color: var(--blue);
    padding: var(--p100-spa) var(--p160-spa) var(--p110-spa);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

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

        small {
            font-size: var(--10to14);
            font-family: var(--ff-arial);
            color: #fff;
        }
    }

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

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

                a {
                    span {
                        position: relative;
                        display: block;
                        font-size: var(--14to18);
                        color: #fff;
                        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: var(--p40-spa);
    right: 0;
    z-index: 900;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .6s ease, transform .6s ease;
    width: 110px;
}

.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) {

    .pc-header {
        padding-left: var(--p80-spa);
        padding-right: var(--p80-spa);
    }

    .contact {
        .bg-white {
            padding-left: var(--p200-spa);
            padding-right: var(--p200-spa);
        }
    }
} 


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

}

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

    :root {
        /* 余白 */
        --p200-spa: 53.3vw;
        --p190-spa: 50.6vw;
        --p180-spa: 48vw;
        --p170-spa: 45.3vw;
        --p160-spa: 42.6vw;
        --p150-spa: 40vw;
        --p140-spa: 37.3vw;
        --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;

        /* タイル幅 */
        --wave-tile-front: clamp(640px, 100vw, 1600px);
        --wave-tile-back:  clamp(760px, 120vw, 1800px);
        
    }

    html {
        font-size: 62.5%;
    }

    .pc-view {
        display: none;
    }

    .sp-view {
        display: block;
    }

    .pc-header {
        display: none;
    }

    .sp-header {
        display: block;
        padding-left: var(--p20-spa);
        /* padding-left: var(--p10-spa); */
        padding-right: var(--p15-spa);
        padding-top: var(--p10-spa);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;

        .scroll-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: var(--p10-spa);
            transition: 1s;

            h1 {
            width: 230px;
        }

        .hbg-btn {
            width: 50px;
            height: 50px;
            background-color: var(--blue);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 27px;
            }
        }
        }

        nav {
            position: fixed;
            top: 0;
            right: -100%;
            opacity: 0;
            transition: 0.5s;
            width: 86.6vw;
            min-width: 325px;
            height: 100vh;
            z-index: 10000;
            background-color: var(--blue);
            padding-top: 42.9vw;
            padding-left: var(--p40-spa);
            padding-right: var(--p40-spa);
            padding-bottom: var(--p160-spa);
            border-radius: var(--p30-spa) 0 0 var(--p30-spa);

            .hbg-btn {
                width: 50px;
                height: 50px;
                position: absolute;
                background-color: #fff;
                top: 20px;
                right: 15px;
                border-radius: 50%;

                span {
                    content: "";
                    display: block;
                    width: 24px;
                    height: 3px;
                    border: 2px solid var(--blue);
                    border-radius: 3px;
                    background-color: var(--blue);
                    position: absolute;

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

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

            ul {

                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                width: 80%;

                li {
                    text-align: center;

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

        nav.open {
            right: 0;
            opacity: 1;
            transition: 0.5s;
        }
    }

    .sp-header.is-scrolled {
        .scroll-wrap {
            background-color: #fff;
            border-radius: 50px;
            transition: 1s;
        }
    }

    /* ボタン */

    .l-btn {
        a {
            &::after {
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent;
            }
        }
    }

    .normal-btn {
        width: 66.5vw;
        margin-left: auto;
        margin-right: auto;
        
        a {
            padding: var(--p25-spa);

            &::after {
                right: var(--p25-spa);
            }
        }

        &:hover {
            transition: 0s;
            transform: scale(1);
        }
    }

    .blue-btn {
        a {
            &::after {
                border-left: 10px solid #fff;
            }
        }
    }

    .y-btn {
        a {
            &::after {
                border-left: 10px solid var(--blue);
            }
        }
    }

    .con-btn {
        width: 80vw;
        min-width: 325px;
        transition: 0s;

        &:hover {
            transition: 0s;
            transform: scale(1);
        }

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

    .contact {
        padding: 0;

        .bg-white {
            padding-left: var(--p25-spa);
            padding-right: var(--p25-spa);
            padding-top: var(--p90-spa);
            padding-bottom: var(--p80-spa);
            flex-direction: column;
            background-image: url(../images/common/contact-bg_sp.jpg);
            background-size: 100% 33.3vw;
            gap: var(--p30-spa);
            
            .text-wrap {
                width: auto;
                h3 {
                    margin-bottom: var(--p20-spa);

                    img {
                        width: 57vw;
                    }
                }
            }
        }
    }

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

        .logo-wrap {
            margin-left: auto;
            margin-right: auto;
            text-align: center;

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

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

    

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

        img {
            width: 100%;
        }
    }

    .bl-bg {
        &::before {
            background-image: url(../images/common/blue-wave1_sp.png);
            height: 16vw;
        }
    }


    
}

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

    .spm-view {
        display: block;
    }

}