@charset "UTF-8";

:root {
    --white: white; 
    --yellow: #E8C62E;
    --blue: #4087EB;
    --gray: #F2F2F2;
    --d-gray: #959595;
    --text-color: #000;
    --red: #EB4043;
}

.d-gray {
    color: var(--d-gray);
}


* {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-style: normal;
}

/* ======================================
breadcrumbs
====================================== */
#breadcrumbs {
    * {
        color: var(--d-gray);
        font-weight: 400;
        font-size: .8rem;
    }
}

/* ======================================
general
====================================== */
html {
    scroll-padding-top: 100px;
}

.container {
    margin-right: 15px;
    margin-left: 15px;
}

@media (min-width: 1530px) {
    .container {
        max-width: 1500px;
        margin: 0 auto;
    }
}

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

a {
    text-decoration: none;
}


/* ======================================
header
====================================== */
header {
    background-color: var(--white);
    position: fixed;
    z-index: 999;
    width: 100%;

    svg {
        vertical-align: baseline !important;
    }

    ul, ol {
        list-style: none;
    }
}

.header-container {
    padding: 1em 20px 1em;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--white);
    max-width: 1500px;
    margin: 0 auto;

    .logo-box {
        width: 50%;

        a {
            display: inline-block;
            width: 150px;
        }
    }
}


.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    /* transition: max-height 0.3s ease-out, opacity 0.3s ease-out; */
    overflow: hidden;

}

#menu-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
    /* PCでは非表示 */
}

#menu {
    display: none;
    width: 100vw;
    z-index: -1;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    right: 0;
    background-color: var(--white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 80px 1em 1em;
}

#menu[hidden] {
    display: none !important;
}

#menu-toggle {
    display: inline-block;
}

#menu.show {
    max-height: 500px;
    opacity: 1;
    display: block;
    top: 0;
    bottom: auto;
    animation: .5s cubic-bezier(0.68, -0.55, 0.27, 1.55) menuAnime;
}

@keyframes menuAnime {
    from {
        top: -400px;
        bottom: 100%;
    }
    to {
        top: 0;
        bottom: auto;
    }
}

#menu > * {
    margin-bottom: 1rem;
}

#open.hide {
    display: none;
}

#close {
    display: none;
}

#close.show {
    display: block;
}

#menu ul li a {
    display: inline-block;
    margin: .3em .3em;
}

#menu ul li::before {
    content: "";
    width: 3px;
    height: 1.2em;
    background-color: var(--blue);
    display: inline-block;
}

#menu a.active {
    background-color: var(--blue);
    color: var(--white);
    border-radius: 1px;
    transition: all .5s;
}


@media (min-width:768px) {
    .header-container {
        align-items: center;

        .logo-box {
            width: auto;
        }
    }

    #site-navigation {
        display: none;
    }

    #menu {
        display: block;
        opacity: 1;
        position: inherit;
        z-index: 10;
        background-color: inherit;
        padding: 0;
        box-shadow: none;
        width: 80%;
        overflow: visible;

        ul {
            display: flex;
            justify-content: right;
            padding: 0;
            margin: 0;

            li {
                padding: 0;
                margin: 0;
                position: relative;
                &::before {
                    display: none;
                }
                a {
                    margin: 0 .8em;
                    padding: 0 .2em;
                    position: relative;
                    overflow: hidden;

                    &:hover {
                        /* color: white; */
                    }

                    &::after {
                        content: '';
                        display: inline-block;
                        background-color: var(--blue);
                        width: 100%;
                        height: 3px;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 0;
                        height: 100%;
                        transition: all 0.6s ease 0s;
                        background-color: var(--blue);
                        z-index: -1;
                        border-radius: 1px;
                    }

                    &:hover::before {
                        width: 100%;
                    }
                }
            }
        }

        .btn {
            display: none;
        }
    }
}

/* ======================================
front-page
====================================== */
main {
    padding-top: 100px;
}

.front {
    .hero {
        small {
            font-weight: 600;
            
            &::before {
                content: "";
                background: no-repeat center/cover url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="%234087EB" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>');
                display: inline-block;
                width: 21px;
                height: 28px;
                margin-right: .2em;
            }
        }


        h1 {
            letter-spacing: -.04em;
            font-weight: 700;

            span {
                &.small {
                    font-weight: 700;
                    font-size: .75em;
                    letter-spacing: -.1em;
                }

            }
            .line {
                position: relative;
                font-weight: 700;
                /* border-bottom: 9px solid var(--yellow); */

                &::after {
                    content: "";
                    background-color: var(--yellow);
                    width: 100%;
                    height: .3em;
                    position: absolute;
                    top: 75%;
                    left: 0;
                    z-index: -1;
                }
            }
        }
    }    

    .video-container {
        margin: 2em auto;
        padding: 0 15px;
        max-width: 1000px;
    }
}

.free {
    display: flex;
    justify-content: space-between;
    margin: 30px auto 30px;

    .circle {
        width: 30vw;
        position: relative;
        max-width: 170px;

        &::after {
            content: "";
            display: inline-block;
            position: relative;
            z-index: 1;
            width: 100%;
            aspect-ratio: 1/1;
            filter: drop-shadow(0px 0px 5px var(--gray));
            background: 
            no-repeat url('data:image/svg+xml;utf-8,<svg viewBox="0 0 103 103" xmlns="http://www.w3.org/2000/svg"><path d="M49.4806 1.83814C50.6253 0.796215 52.3747 0.796216 53.5194 1.83815L54.6515 2.86863C55.627 3.75659 57.0681 3.90313 58.2024 3.22972L59.5188 2.44822C60.8498 1.65804 62.5634 2.01021 63.4749 3.26123L64.3764 4.49852C65.1532 5.56466 66.5353 5.9983 67.782 5.56701L69.2287 5.06648C70.6915 4.5604 72.2992 5.25032 72.9402 6.65922L73.5742 8.05265C74.1205 9.25334 75.387 9.95631 76.6949 9.78479L78.2128 9.58574C79.7475 9.38448 81.1834 10.3839 81.5277 11.893L81.8682 13.3855C82.1616 14.6716 83.2607 15.6151 84.5764 15.7104L86.1032 15.821C87.6471 15.9328 88.8524 17.2008 88.8859 18.7483L88.919 20.2788C88.9475 21.5976 89.8341 22.7431 91.1037 23.1012L92.5771 23.5169C94.0668 23.9372 94.9922 25.4219 94.7134 26.9444L94.4378 28.4503C94.2002 29.7478 94.8381 31.0483 96.0096 31.6547L97.3692 32.3585C98.7438 33.07 99.3514 34.7106 98.7719 36.1459L98.1987 37.5654C97.7048 38.7886 98.0679 40.1909 99.0933 41.0207L100.283 41.9837C101.487 42.9574 101.752 44.6867 100.895 45.9759L100.048 47.251C99.3178 48.3498 99.3912 49.7964 100.229 50.8157L101.2 51.9985C102.183 53.1945 102.094 54.9417 100.996 56.0322L99.9093 57.1106C98.9731 58.0399 98.7538 59.4717 99.3688 60.6387L100.083 61.9929C100.804 63.3622 100.366 65.0558 99.0703 65.9028L97.789 66.7405C96.6849 67.4623 96.1818 68.8206 96.5494 70.0875L96.976 71.5578C97.4073 73.0443 96.6369 74.615 95.1973 75.1838L93.7735 75.7464C92.5467 76.2312 91.7805 77.4605 91.8856 78.7754L92.0075 80.3014C92.1307 81.8444 91.0599 83.2278 89.5353 83.4952L88.0274 83.7597C86.7282 83.9876 85.7302 85.0375 85.5684 86.3466L85.3806 87.8659C85.1908 89.4021 83.8633 90.5417 82.3161 90.4967L80.7859 90.4523C79.4673 90.4139 78.2784 91.2414 77.8564 92.4912L77.3667 93.9417C76.8715 95.4082 75.3418 96.2572 73.8353 95.9017L72.3454 95.5501C71.0615 95.2472 69.7304 95.8184 69.0654 96.9576L68.2937 98.2798C67.5135 99.6166 65.8442 100.14 64.4401 99.4889L63.0514 98.8445C61.8548 98.2893 60.436 98.5809 59.5553 99.563L58.5333 100.703C57.4999 101.855 55.7594 102.032 54.5152 101.111L53.2846 100.201C52.2243 99.416 50.7757 99.416 49.7154 100.201L48.4848 101.111C47.2406 102.032 45.5001 101.855 44.4667 100.703L43.4447 99.563C42.564 98.5809 41.1452 98.2893 39.9486 98.8445L38.5599 99.4889C37.1558 100.14 35.4865 99.6166 34.7063 98.2798L33.9346 96.9577C33.2696 95.8184 31.9385 95.2472 30.6546 95.5501L29.1647 95.9017C27.6582 96.2572 26.1285 95.4082 25.6333 93.9417L25.1436 92.4912C24.7216 91.2414 23.5327 90.4139 22.2141 90.4523L20.6839 90.4967C19.1367 90.5417 17.8092 89.4021 17.6194 87.8659L17.4316 86.3466C17.2698 85.0375 16.2719 83.9876 14.9726 83.7597L13.4647 83.4952C11.9401 83.2278 10.8692 81.8444 10.9925 80.3014L11.1144 78.7754C11.2195 77.4605 10.4533 76.2312 9.22645 75.7464L7.80269 75.1838C6.36314 74.615 5.59268 73.0443 6.02402 71.5578L6.45063 70.0875C6.81822 68.8206 6.31514 67.4623 5.21102 66.7405L3.92966 65.9028C2.63408 65.0558 2.19557 63.3622 2.91732 61.9929L3.63115 60.6387C4.24624 59.4717 4.0269 58.0399 3.09067 57.1106L2.00417 56.0321C0.905598 54.9417 0.81699 53.1945 1.7996 51.9985L2.77143 50.8157C3.60883 49.7964 3.6822 48.3498 2.95221 47.251L2.10503 45.9759C1.24845 44.6867 1.51337 42.9574 2.71662 41.9837L3.90666 41.0207C4.9321 40.1909 5.29517 38.7886 4.80129 37.5654L4.22814 36.1459C3.64862 34.7106 4.25622 33.07 5.63084 32.3585L6.99037 31.6547C8.16185 31.0483 8.79977 29.7478 8.56223 28.4503L8.28656 26.9444C8.00782 25.4219 8.93323 23.9372 10.4229 23.5169L11.8963 23.1012C13.1659 22.7431 14.0525 21.5976 14.081 20.2788L14.1141 18.7483C14.1476 17.2008 15.3529 15.9328 16.8968 15.821L18.4236 15.7104C19.7393 15.6151 20.8384 14.6716 21.1318 13.3855L21.4723 11.893C21.8166 10.3839 23.2525 9.38448 24.7872 9.58574L26.3051 9.78479C27.613 9.95631 28.8795 9.25334 29.4258 8.05265L30.0598 6.65922C30.7008 5.25032 32.3085 4.5604 33.7713 5.06648L35.2181 5.56701C36.4647 5.9983 37.8468 5.56466 38.6236 4.49852L39.5251 3.26123C40.4366 2.01021 42.1502 1.65804 43.4812 2.44822L44.7976 3.22972C45.9319 3.90313 47.373 3.75659 48.3485 2.86863L49.4806 1.83814Z" fill="%234087EB" /><path d="M51.5 7L56.002 7.22831L60.4578 7.91092L64.8217 9.0408L69.0488 10.6064L73.0959 12.5916L76.9214 14.976L80.4861 17.7353L83.7533 20.841L86.6895 24.2613L89.2647 27.9611L91.4523 31.9025L93.23 36.0449L94.5794 40.346L95.4868 44.7615L95.9429 49.2461V53.7539L95.4868 58.2385L94.5794 62.654L93.23 66.9551L91.4523 71.0975L89.2647 75.0389L86.6895 78.7387L83.7533 82.159L80.4861 85.2647L76.9214 88.024L73.0959 90.4084L69.0488 92.3936L64.8217 93.9592L60.4578 95.0891L56.002 95.7717L51.5 96L46.998 95.7717L42.5422 95.0891L38.1783 93.9592L33.9512 92.3936L29.9041 90.4084L26.0786 88.024L22.5139 85.2647L19.2467 82.159L16.3105 78.7387L13.7353 75.0389L11.5477 71.0975L9.77003 66.9551L8.42057 62.654L7.51316 58.2385L7.05711 53.7539V49.2461L7.51316 44.7615L8.42057 40.346L9.77003 36.0449L11.5477 31.9025L13.7353 27.9611L16.3105 24.2613L19.2467 20.841L22.5139 17.7353L26.0786 14.976L29.9041 12.5916L33.9512 10.6064L38.1783 9.0408L42.5422 7.91092L46.998 7.22831L51.5 7Z" fill="%23E8C62E" /></svg>');;
        }

        &:before {
            content: "";
            display: inline-block;
            width: 40%;
            aspect-ratio: 2/3;
            background-color: var(--yellow);
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% 0;
            z-index: 1;
        }

        svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        .text {
            position: absolute;
            z-index: 5;
            top: 45%;
            left: 50%;
            translate: -50% -50%;
            text-align: center;
            text-shadow: .9px .9px .9px #eee,
                -.9px -.9px .9px #eee,
                -.9px .9px .9px #eee,
                .9px -.9px .9px #eee,
                .9px 0px .9px #eee,
                -.9px -0px .9px #eee,
                0px .9px .9px #eee,
                0px -.9px .9px #eee;
            color: var(--blue);

            p {
                font-weight: 800;
                white-space: pre;
                line-height: 1.05;

                &:nth-of-type(1) {
                    font-size: 1em;
                }

                &:nth-of-type(2) {
                    font-size: 2em;
                }
            }
        }
    }
}

.btn {
    margin-top: 2em;
    margin-bottom: 2em;
    /* width: 100%; */

    a {
        border-radius: 9999px;
        background-color: var(--white);
        border: 3px solid var(--blue);
        display: inline-block;
        width: 100%;
        text-align: center;
        color: var(--blue);
        padding: .6em 1em;
        
        span {
            display: flex;
            align-items: center;
            justify-content: center;

            svg {
                height: 1em;
                width: auto;
                fill: var(--blue);
                margin-left: .5em;
            }
        }
    }

    &.blue {
        margin-left: 15px;
        margin-right: 15px;

        a {
            border: none;
            background-color: var(--blue);
            color: var(--white);

            svg {
                fill: var(--white);
            }
        }
    }
}

.tel {
    /* width: 95%; */
    /* margin: 0 auto; */

    h2 {
        margin: 0;
    }

    & > p {
        line-height: 1;
    }

    & > div {
        display: flex;
        align-items: flex-end;
        /* justify-content: center; */

        svg {
            width: 2.5rem;
            display: inline-block;
            margin-right: .2em;
        }
        
        .number {

            small {
                font-size: 12px;
                line-height: 1;
                vertical-align: bottom;
            }

            p {
                font-weight: 700;
                line-height: 1;
                white-space: pre;
                letter-spacing: -.05em;
            }
        }
    }

}

section.vis {
    position: relative;
    width: 100%;
    padding: 2em 15px;
    background-color: var(--blue);
    margin-top: min(11vw, 150px);

    &::before {
        content: '';
        width: 100%;
        height: auto;
        display: inline-block;
        position: absolute;
        bottom: 99%;
        left: 50%;
        translate: -50% 0;
        aspect-ratio: 16/1;
        z-index: 1;
        /* background: no-repeat url('data:image/svg+xml;utf-8,<svg class="heading" xmlns="http://www.w3.org/2000/svg"> <path fill="%234087EB" d="M-108,25.859C-108,25.859 -96.41,16.117 -85.432,6.89C-74.666,-2.16 -57.513,-2.314 -46.529,6.54C-45.811,7.119 -45.09,7.7 -44.369,8.281C-32.107,18.165 -13.018,18.165 -0.757,8.281C-0.437,8.024 -0.117,7.766 0.203,7.508C11.925,-1.941 30.174,-1.941 41.897,7.508C42.536,8.023 43.176,8.539 43.815,9.055C55.538,18.504 73.787,18.504 85.51,9.055C86.149,8.539 86.789,8.023 87.428,7.508C99.15,-1.941 117.4,-1.941 129.122,7.508C129.761,8.023 130.401,8.539 131.04,9.055C142.762,18.504 161.012,18.504 172.734,9.055C173.374,8.539 174.014,8.023 174.653,7.508C186.375,-1.941 204.625,-1.941 216.345,7.508C216.987,8.023 217.625,8.539 218.266,9.055C229.988,18.504 248.236,18.504 259.958,9.055C260.599,8.539 261.237,8.023 261.879,7.508C273.601,-1.941 291.849,-1.941 303.57,7.508C304.212,8.023 304.85,8.539 305.492,9.055C317.213,18.504 335.461,18.504 347.187,9.055C347.825,8.539 348.463,8.023 349.104,7.508C360.826,-1.941 379.074,-1.941 390.799,7.508C391.437,8.023 392.075,8.539 392.717,9.055C404.438,18.504 422.686,18.504 434.408,9.055C435.05,8.539 435.688,8.023 436.329,7.508C448.051,-1.941 466.299,-1.941 478.021,7.508C489.236,16.547 500.79,25.859 500.79,25.859" /> </svg>'); */
        background-image: url(../img/water-wave.svg);
        background-repeat: repeat;
        background-size: cover;
    }

    &::after {
        content: '';
        width: 100%;
        height: auto;
        display: inline-block;
        position: absolute;
        top: 99%;
        left: 50%;
        translate: -50% 0;
        aspect-ratio: 16/1;
        scale: -1 -1;
        z-index: 1;
        /* background: no-repeat url('data:image/svg+xml;utf-8,<svg class="heading" xmlns="http://www.w3.org/2000/svg"> <path fill="%234087EB" d="M-108,25.859C-108,25.859 -96.41,16.117 -85.432,6.89C-74.666,-2.16 -57.513,-2.314 -46.529,6.54C-45.811,7.119 -45.09,7.7 -44.369,8.281C-32.107,18.165 -13.018,18.165 -0.757,8.281C-0.437,8.024 -0.117,7.766 0.203,7.508C11.925,-1.941 30.174,-1.941 41.897,7.508C42.536,8.023 43.176,8.539 43.815,9.055C55.538,18.504 73.787,18.504 85.51,9.055C86.149,8.539 86.789,8.023 87.428,7.508C99.15,-1.941 117.4,-1.941 129.122,7.508C129.761,8.023 130.401,8.539 131.04,9.055C142.762,18.504 161.012,18.504 172.734,9.055C173.374,8.539 174.014,8.023 174.653,7.508C186.375,-1.941 204.625,-1.941 216.345,7.508C216.987,8.023 217.625,8.539 218.266,9.055C229.988,18.504 248.236,18.504 259.958,9.055C260.599,8.539 261.237,8.023 261.879,7.508C273.601,-1.941 291.849,-1.941 303.57,7.508C304.212,8.023 304.85,8.539 305.492,9.055C317.213,18.504 335.461,18.504 347.187,9.055C347.825,8.539 348.463,8.023 349.104,7.508C360.826,-1.941 379.074,-1.941 390.799,7.508C391.437,8.023 392.075,8.539 392.717,9.055C404.438,18.504 422.686,18.504 434.408,9.055C435.05,8.539 435.688,8.023 436.329,7.508C448.051,-1.941 466.299,-1.941 478.021,7.508C489.236,16.547 500.79,25.859 500.79,25.859" /> </svg>'); */
        background-image: url(../img/water-wave.svg);
        background-repeat: repeat;
        background-size: cover;
    }

    * {
        color: var(--white);
    }

    & >svg {
        position: absolute;
        top: 0;
        left: 50%;
        translate: -50% 0;
        width: 100%;
        z-index: -1;
        fill: var(--blue);
    }

    .img-box {
        margin: 3em auto 0;
        width: 60%;
        display: block;
        max-width: 500px;

        svg {
            fill: var(--white);
        }
    }

}

.section {
    padding: min(11vw, 150px) 0;
}

.sec-ttl {
    text-align: center;
    font-weight: 600;
    margin-bottom: 2.5em;
    
    &::before {
        content: attr(sub-text);
        color: var(--blue);
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        display: block;
    }
}

.commitment {
    background-color: var(--gray);

    .cards {
        padding-left: 0;

        .card {
            border-radius: 5px;
            overflow: hidden;
            padding-left: 0;
            margin-bottom: 3em;
            /* filter: drop-shadow(0px 3px 3px rgb(146, 146, 146)); */
            box-shadow: 0 3px 3px rgb(146, 146, 146);
            background: var(--white);

            .heading {
                text-align: center;
                background-color: var(--blue);
                padding: .5em;
                color: var(--white);

                h3 {
                    font-weight: 700;
                    margin-bottom: 0;
                }
            }

            .img-box {
                overflow: hidden;
                aspect-ratio: 360/165;
                position: relative;

                img {
                    scale: 1.1;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    translate: -50% -50%;

                    &.d {
                        top: 75%;
                    }

                }
            }

            .text {
                background-color: var(--white);
                padding: 1.2em 1em;
            }
        }
    }
}


.service {
    background-color: var(--gray);

    .cards {
        padding-left: 0;

        .card {
            border-radius: 5px;
            overflow: hidden;
            padding-left: 0;
            margin-bottom: 3em;
            /* filter: drop-shadow(0px 3px 3px rgb(146, 146, 146)); */
            box-shadow: 0 3px 3px rgb(146, 146, 146);
            
            .heading {
                text-align: center;
                background-color: var(--blue);
                padding: .5em;
                color: var(--white);

                h3 {
                    font-weight: 700;
                    margin-bottom: 0;

                    &::before {
                        content: attr(sub-text);
                        color: var(--white);
                        font-size: 12px;
                        font-weight: 600;
                        text-align: center;
                        display: block;
                    }
                }
            }

            .img-box {
                background-color: var(--white);
                width: 100%;

                .inner {
                    width: 100%;
                    padding-top: 90%;
                    background-color: var(--white);
                    position: relative;
                    
                    img {
                        position: absolute;
                        width: 80%;
                        left: 50%;
                        translate: -50% 0;
                    }
                }

            }
        }

        /* トイレのトラブル */
        .card:nth-of-type(1) {

            .balloon-box:nth-of-type(1) {
                top: 20px;
                right: 20px;
            }

            .balloon-box:nth-of-type(2) {
                bottom: 20px;
                left: 20px;
            }

            .img-box {
                img {
                    top: 70px;
                }
            }
        }

        /* お風呂のトラブル */
        .card:nth-of-type(2) {

            .balloon-box:nth-of-type(1) {
                top: 20px;
                left: 20px;
            }

            .balloon-box:nth-of-type(2) {
                bottom: 20px;
                right: 20px;
            }

            .img-box {
                img {
                    top: 40px;
                }
            }
        }

        /* キッチンのトラブル */
        .card:nth-of-type(3) {

            .balloon-box:nth-of-type(1) {
                top: 20px;
                left: 20px;
            }

            .balloon-box:nth-of-type(2) {
                bottom: 20px;
                right: 20px;
            }

            .img-box {
                img {
                    top: 40px;
                }
            }
        }

        /* 洗面化粧台のトラブル */
        .card:nth-of-type(4) {

            .balloon-box:nth-of-type(1) {
                top: 20px;
                right: 20px;
            }

            .balloon-box:nth-of-type(2) {
                bottom: 20px;
                right: 20px;
            }

            .img-box {
                img {
                    top: 40px;
                    left: 35%;
                    width: 50%;
                }
            }
        }

        /* その他のトラブル */
        .card:nth-of-type(5) {

            .balloon-box:nth-of-type(1) {
                top: 20px;
                right: 20px;
            }

            .balloon-box:nth-of-type(2) {
                bottom: 20px;
                right: 20px;
            }

            .balloon-box:nth-of-type(3) {
                bottom: 20%;
                left: 20px;
            }

            .img-box {
                img {
                    top: 50%;
                    width: 50%;
                    translate: -50% -50%;
                }
            }
        }
    }
}

.balloon-box {
    position: absolute;
    z-index: 1;

    .balloon {
        position: relative;
        display: inline-block;
        color: var(--white);
        background: var(--blue);
        border-radius: 9999px;
        padding: .4em 2em;

        &::before {
            content: "";
            position: absolute;
            border: 15px solid transparent;
        }

        &.balloon-1 {
            &::before {
                top: 100%;
                left: 50%;
                border-top: 15px solid var(--blue);
            }
        }

        &.balloon-2 {
            &::before {
                bottom: 100%;
                left: 50%;
                border-bottom: 15px solid var(--blue);
            }
        }

        p {
            margin: 0;
            padding: 0;
            font-weight: 700;
        }
    }
}


.flow {
    background-color: var(--gray);

    ol {
        padding-left: 0;

        .card {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 auto 3em;
            max-width: 500px;

            &::before {
                content: attr(data-number);
                display: inline-block;
                position: absolute;
                top: 0;
                left: 0;
                color: var(--blue);
                font-weight: 700;
            }

            &:not(:last-child) {
                &::after {
                    content: "";
                    position: absolute;
                    border: 15px solid transparent;
                    top: 110%;
                    left: 50%;
                    border-top: 15px solid var(--blue);
                    translate: -50% 0;
                }
            }

            .icon {
                position: relative;
                margin-right: 1em;
                flex-basis: 30%;

                .inner {
                    width: 100%;
                    padding-top: 100%;
                    border-radius: 50%;
                    background-color: var(--white);
                }

                svg {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    translate: -50% -50%;
                    fill: var(--d-gray);
                    width: 40%;
                }
            }

            .text {
                flex-basis: 70%;

                h3 {
                    font-weight: 600;
                }

                p {
                    a {
                        text-decoration: underline;
                    }
                }
            }

            &:nth-of-type(3) {
                svg {
                    width: 30%;
                }
            }
        }

    }
}


.contact {

    .wpcf7 {
        max-width: 500px;
        margin: 0 auto;
    }

    label {
        margin-bottom: 1em;
    }
    
    input,
    textarea {
        background-color: #E7E7E7;
        border: none;
        border-radius: 5px;
        padding: .2em .5em;
        font-size: 1.2em;
        width: 100%;
        margin-top: .3em;

        &::placeholder {
            color: var(--d-gray);
        }

        &[type=text] {
            
        } 
    }

    .must {
        color: var(--white);
        background-color: var(--red);
        border-radius: 5px;
        padding: .1em .4em;
        font-size: .75em;
        margin-left: .5em;
    }
    
    .wpcf7-form {

        & input[type="radio"] {
            display: none;
        }

        .wpcf7-radio {

            &.radio-box {

                display: flex;
                justify-content: space-between;
                margin-top: .3em;

                .wpcf7-list-item {
                    margin-left: 0;
                }
    
                label {
                    border-radius: 5px;
                    padding: .2em .5em;
                    background-color: var(--white);
                    color: var(--blue);
                    border: 1px solid var(--blue);

                    &.active {
                        background-color: var(--blue);
                        box-shadow: none;
                        display: block;
                        color: var(--white);
                    }
                }
            }
        }

        input[type="checkbox"] {
            width: auto;
            scale: 1.6;
            display: inline-block;
            margin-right: .5em;
            accent-color: var(--red);
        }

        .privacy {
            text-decoration: underline;
        }

        .btn {
            input {
                border-radius: 9999px;
                background-color: var(--blue);
                /* border: 3px solid var(--blue); */
                display: inline-block;
                width: 100%;
                text-align: center;
                color: var(--white);
                padding: .6em 1em;
            }
        }
    }

}

.frame {
    margin: 0 auto;
    max-width: 1500px !important;
}

@media (min-width: 375px) {
    .frame {
        max-width: 375px;
    }
}

@media (min-width: 576px) {
    .frame {
        max-width: 576px;
    }
}

@media (min-width: 768px) {
    .btn {
        max-width: 350px;
    }

    .frame {
        max-width: none;
    }
    .frame-1 {
        max-width: 768px;
    }
    .front {
        .frame {
            & > .container {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
    
                .free {
                    /* flex-direction: column; */
                    margin: 0;
    
                    .circle {
                        width: 12vw;
                        min-width: 90px;
                    }
                }
            }

        }

        .main-info {
            /* display: flex; */
            /* justify-content: space-evenly; */
            /* align-items: flex-start; */
            /* margin: 2em 0; */

            .btn {
                /* margin: 0; */
                max-width: 350px;
            }
        }
    }

    .commitment,
    .service {
        .cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
    }

    .wpcf7 {
        box-shadow: 0 0 4px var(--d-gray);
        border-radius: 5px;
        background-color: var(--white);
        padding: 1em;
    }

}

@media (min-width: 992px) {
    .commitment,
    .service {
        .cards {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 2rem;

            .card {
                margin-bottom: 0;
            }
        }
    }
}

@media (min-width: 1200px) {
    .free {
        justify-content: right;
    }

    .commitment,
    .service {
        .cards {
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 2rem;

            .card {
                .img-box {
                    aspect-ratio: 5/3;

                    img {
                        &.d {
                            top: 50%;
                        }
                    }
                }
            }
        }
    }
}

@media (min-width:1800px) {
    section.vis {
        padding: 4em 0;

        &::before,
        &::after {
            display: none;
        }
    }
}

/* ======================================
cta
====================================== */
.cta {
    position: relative;
    width: 100%;
    padding: 2em 15px;
    /* overflow: hidden; */
    background-color: var(--blue);

    &::before {
        content: '';
        width: 100%;
        height: auto;
        display: inline-block;
        position: absolute;
        bottom: 99%;
        left: 50%;
        translate: -50% 0;
        aspect-ratio: 16/1;
        z-index: 1;
        background-image: url(../img/water-wave.svg);
        background-repeat: repeat;
        background-size: cover;
    }

    &::after {
        content: '';
        width: 100%;
        height: auto;
        display: inline-block;
        position: absolute;
        top: 99%;
        left: 50%;
        translate: -50% 0;
        aspect-ratio: 16/1;
        scale: -1 -1;
        z-index: 1;
        background-image: url(../img/water-wave.svg);
        background-repeat: repeat;
        background-size: cover;
    }

    .img-box {
        margin: 0 auto 2em;
        width: 60%;
        display: block;
        max-width: 500px;

        svg {
            fill: var(--white);
        }
    }

    .text {
        /* display: flex; */
        justify-content: space-between;
        text-align: center;

        p {
            color: var(--white);

            span {
                color: var(--yellow);
                font-weight: 700;
                /* border-bottom: 3px solid var(--white); */
                position: relative;
                z-index: 1;
                text-shadow:
                        .6px .6px .6px #333, -.6px -.6px .6px #333,
                        -.6px .6px .6px #333, .6px -.6px .6px #333,
                        .6px 0px .6px #333, -.6px -0px .6px #333,
                        0px .6px .6px #333, 0px -.6px .6px #333;
                padding: 0 .1em;

                &::after {
                    content: "";
                    background-color: var(--white);
                    width: 100%;
                    height: 1.3em;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    z-index: -1;
                    border-radius: 3px;
                }
            }
        }
    }

    & >svg {
        position: absolute;
        top: 0;
        left: 50%;
        translate: -50% 0;
        width: 100%;
        z-index: -1;
        fill: var(--blue);
        scale: 1.1;
        top: 10%;
    }

    .btn {
        * {
            color: var(--text-color);
        }
    }

    .tel {
        * {
            color: var(--white);
        }

        svg {
            fill: var(--white);
            width: 2rem;
            display: inline-block;
            margin-right: .3em;
        }

        .number {
            p {
                position: relative;
                z-index: 1;

                &::after {
                    content: "";
                    background-color: var(--yellow);
                    width: 100%;
                    height: .3em;
                    position: absolute;
                    top: 90%;
                    left: 0;
                    z-index: -1;
                }
            }
        }
    }

    svg {
        &.heading {
            position: absolute;
            top: 0;
        }
    }

    .free {
        .circle {
            .text {
                p {
                    color: var(--blue);
                }
            }
        }
    }
}


@media (min-width:768px) {
    .cta {
        .free {
            width: 50%;
            margin: 0;
        }
    }

    .flex {
        display: flex;
        gap: 1em;
        justify-content: space-around;
        align-items: flex-start;
        margin: 2rem 0 0;

        .info {
            width: 50%;
            margin-left: 1em;
        }
    }
}


@media (min-width:992px) {
    .cta {
        .tel {
            svg {
                width: 2.5rem;
            }
        }
    }
}

@media (min-width:1800px) {
    .cta {
        padding: 4em 0;
        &::before,
        &::after {
            display: none;
        }
    }
}


/* ======================================
footer
====================================== */
footer {
    padding: min(11vw, 150px) 15px 3em;
    text-align: center;

    * {
        color: #373737;
    }

    ul, ol {
        list-style: none;
    }

    .footer-logo {
        a {
            display: block;
            width: 60%;
            margin: 0 auto;

            img {
                filter: saturate(0);
            }
        }

        .footer-info {
            margin-top: 1em;
            display: flex;
            justify-content: space-between;

            p {
                font-size: 15px;
                font-weight: 600;
                white-space: pre;
            }
        }
    }

    .footer-nav {
        margin: 2em 0;
        ul {
            padding-left: 0;
            display: flex;
            justify-content: space-around;

            li {

                a {
                    font-weight: 600;
                }
            }
        }
    }

    .footer-legal {
        * {
            color: var(--d-gray);
            font-size: 14px;
        }
    }
    
    .footer-copyright {
        p {
            color: var(--d-gray);
            /* font-size: 14px; */
        }
    }
}

@media (min-width: 768px) {
    .footer-flex {
        display: flex;
        justify-content: space-between;

        .footer-logo {
            text-align: left;

            a {
                margin: 0;
                width: 100%;
            }

            .footer-info {
                flex-direction: column;
            }
        }
        
        .footer-nav-box {

            .footer-nav {
                li {
                    margin-left: 2em;
                }
            }

            .footer-legal {
                text-align: right;
            }

            .footer-copyright {
                text-align: right;
            }
        }
    }
}






/* ======================================
404
====================================== */
.error-404 {
    text-align: center;
    padding: 100px 20px 50px;
    color: #333;
    background-color: #f5f5f5;
}

.error-404 .container {
    max-width: 600px;
    margin: 0 auto;
}

.error-404 .logo {
    margin-bottom: 20px;
}

.error-404 .message h1 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.error-404 .message p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 20px;
}

.error-404 .back-to-home .button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    color: #fff;
    background-color: #0073aa;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.error-404 .back-to-home .button:hover {
    background-color: #005177;
}


/* ======================================
company,
tokusho
====================================== */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;

}

.company,
.tokusho {
    .container {
        table {
            width: 100%;
            margin-top: 5em;

            tr {
                display: flex;
                flex-direction: column;
                border-top: 1px solid var(--d-gray);
                padding: 1em .5em;

                &:last-child {
                    border-bottom: 1px solid var(--d-gray);
                }

                th {
                    font-weight: 600;
                }

                td {
                    font-weight: 400;

                    a {
                        font-weight: 400;
                        text-decoration: underline;
                    }
                }
            }
        }
    }

    .btn {
        margin-bottom: 5em;
    }
}


/* ======================================
privacy-policy
====================================== */
.privacy {

    ol, ul {
        /* list-style-type: decimal; */
    }

    .lower-roman {
        list-style-type: lower-roman;
    }

    .container {
        
        section {
            margin: 2em 0;
        }

        .main-text {
            * {
                font-size: 1rem !important;
                font-weight: 400;
            }

            h2 {
                font-weight: 600 !important;
            }

        }

        
    }
    
}

.company,
.tokusho,
.privacy {
    .cta {
        margin-top: min(11vw, 150px);
    }
}