:root {
    --clicksize: clamp(40px, calc(10vw - 10px), 60px);
    --clickPosition: clamp(11px, calc(10vw - 20px), 35px);
    --linewidth: calc(var(--clicksize) * 1);
    --linethickness: clamp(4px, calc(0.2vw + 2px), 5px);
    --linespacing: calc(0.2vw + 13px);
    --linespacing: clamp(13.5px, calc(4vw - 10px), 17px);
    --bgmsize: clamp(85px, calc(27vw - 25px), 160px);
    --bgmposition: clamp(6px, calc(2vw - 20px), 10px);
    --ueShitaPhone: clamp(0px, calc(5vw + 25px), 60px);
    --uspp: calc(5% - 5px);
    --footerRightHeight: calc(45svh - 175px);
    --mapHeight: calc(14svh + 70px);
    --navHeight: 85svh;
}

a {
    color: navy;
}

h2 {
    font-size: calc(0.7vw + 25px);
    letter-spacing: 0.1em;
    text-align: center;
}

body {
    overflow-x: hidden;
    position: relative;
    /* font-family: "Noto Sans JP", sans-serif; */
    font-family: "Noto Serif JP", serif;
    font-size: calc(0.5vw + 16px);
    line-height: 1.7;
    letter-spacing: 0.05em;

    .bgm {
        display: block;
        width: var(--bgmsize);
        height: var(--bgmsize);
        position: absolute;
        top: var(--bgmposition);
        left: var(--bgmposition);
        z-index: 5;
        background-image: url("/images/music.avif");
        background-size: cover;
    }

    .start {
        display: block;
    }

    .stop {
        display: none;
        z-index: 6;
    }

    .stop::before,
    .stop::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        border: 1px solid #82cddd;
        border-radius: 50%;
        animation: pulsate 2s linear infinite;
    }

    .stop::after {
        animation-delay: 1s;
    }
}

.season {
    font-size: 50px;
    text-align: center;
    line-height: 100vh;
    letter-spacing: 0.2em;
}



footer {
    margin-top: 30vh;
    background: #da81b2;
    /* background: linear-gradient(to bottom, #da81b2 70%, pink); */
    /* background: linear-gradient(to bottom, rgba(218, 129, 178, 1) 70%, pink); */
    color: white;
    padding-top: calc(1svh + 30px);
    /* 高さ */
    min-height: 100dvh;
    height: 100dvh;
    font-family: "Noto Sans JP", sans-serif;
    position: relative;


    .footer-left {
        text-align: center;

        .footer-title-wrapper {
            display: flex;
            margin: 0 auto;
            width: calc(42vw + 200px);
            width: calc(45vw + 200px);
            max-width: 99vw;

            .footer-icon {
                width: calc(3svh + 45px);
                height: calc(3svh + 45px);

            }

            .footer-title {
                height: calc(3svh + 45px);
                margin-left: 1vw;
                /* 高さ */

                .title,
                .title-a {
                    display: block;
                    /* height: calc(0.7vw + 40px);
                line-height: calc(0.7vw + 40px); */
                    height: calc(2.1svh + 30px);
                    line-height: calc(2.1svh + 30px);
                    font-size: calc(0.75vw + 19px);
                    font-size: clamp(21.5px, calc(4.5vw - 0px), 50px);
                    font-size: clamp(21.5px, calc(5.5vw - 0px), 50px);
                    /* margin-left: 5; */
                    letter-spacing: 0.1em;
                    width: 100%;
                }

                .title-a {
                    font-size: calc(0.4vw + 12px);
                    font-size: clamp(13.2px, calc(3.3vw - 3px), 50px);
                    letter-spacing: 0.45em;
                    text-align: center;
                    height: calc(0.9svh + 15px);
                    line-height: calc(0.9svh + 15px);
                }
            }
        }




        address {
            /* 高さ */
            height: calc(25.5svh + 30px);
            font-size: calc(0.4vw + 19px);
            font-size: calc(0.8vw + 17px);
            padding-top: calc(0.5svh + 30px);
            margin: 0 auto;
            display: block;
            width: calc(37vw + 170px);
            letter-spacing: 0.1em;
            text-align: left;
            /* background: mediumaquamarine; */

            .addressSpan {
                height: 5svh;
                line-height: 5svh;
                display: inline-block;
                margin: 0 auto;
                width: 100%;
            }

            .phone {
                height: 15svh;
                display: flex;
                margin: 0 auto;

                .phoneNum {
                    color: blue;
                    font-size: calc(2vw + 23px);
                    /* padding-top: calc(0.5vh + 20px); */
                    display: block;
                    /* ここ */
                    height: 15svh;
                    line-height: 15svh;
                    /* background: tan; */
                }

                .phoneImage {
                    /* display: inline-block; */
                    height: 15svh;
                    width: 5svh;
                    padding: 1svh 0.3svh;
                    /* vertical-align: -8%; */
                }
            }


        }

        .map {
            /* 高さ */
            height: var(--mapHeight);
            width: calc(var(--mapHeight) * 2.36);
            max-width: 98vw;

        }

        .mapIframe {
            display: none;
            border-radius: 20px;
        }
    }

    .footer-right {
        /* 高さ */
        height: calc(45svh - 175px);
        padding-top: 3svh;
        padding-bottom: 3svh;

        nav {

            ul {

                width: calc(270px + 25vw);
                width: calc(45vw + 180px);
                margin: 0 auto;
                /* height: 100%; */
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                list-style: none;
                text-align: center;

                li {
                    height: calc(calc(var(--footerRightHeight) - 6svh) / 2);
                    line-height: calc(calc(var(--footerRightHeight) - 6svh) / 2);

                    a {
                        color: white;
                        letter-spacing: 0.1em;
                        font-size: calc(0.4svh + 12.5px);
                    }

                    a:hover {
                        color: darkblue;
                        transition: .5s;
                    }
                }
            }
        }
    }

    small {
        text-align: center;
        display: block;
        width: 100vw;
        font-size: calc(0.5vw + 16px);
        /* 高さ */
        height: 11.5dvh;
        line-height: 11.5dvh;
        letter-spacing: 0.1em;
    }
}

/* footer::before {
    content: " ";
    display: block;
    position: absolute;
    top: -5vh;
    left: 0;
    background: #da81b2;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    width: 100vw;
    height: 10vh;
} */

.footerSvg,
.footerSvg2 {
    position: absolute;
    bottom: 90vh;
    display: none;
}

.footerSvg2 {
    position: absolute;
    bottom: 80vh;
}


#nav {
    font-family: "Noto Sans JP", sans-serif;
    position: fixed;
    width: 100vw;
    height: 100lvh;
    z-index: -10;
    opacity: 0;
    overflow-y: hidden;
    background: #e0b5d3;
    background: #e0b5d3;
    background: linear-gradient(150deg, #e0b5d3, #fff9ff);
    background: linear-gradient(150deg, #fff9ff -20%, #e0b5d3);

    ul {
        height: var(--navHeight);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        list-style: none;
        transition: opacity 0.4s ease;
        position: absolute;
        /* 100svhと100lvhを切り替える時、nav->ulが動くのを防止する
        top: 50dvh;
        left: 50dvw;
        transform: translate(-50%, -50%); */
        left: 50vw;
        transform: translateX(-50%);
        top: 7.5svh;
        z-index: 11;

        li {
            user-select: none;
            letter-spacing: 0.1em;
            font-size: clamp(18px, calc(3.2vw + 4px), 27px);
            font-size: clamp(18px, calc(1vw + 2vh + 2px), 27px);
            height: calc(var(--navHeight) / 8);
            line-height: calc(var(--navHeight) / 8);
        }
    }

    .diamond {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 72vh;
        height: 72vh;
        background: rgba(255, 255, 255, 0.2);
        transform: rotate(45deg) translate(-55%, -55%) skew(6deg, 6deg);
        transform-origin: 0 0;
        z-index: 9;
    }

    .leftImage,
    .rightImage {
        display: none;
    }

    @media (min-width: 1025px) {}
}

#nav.visible {
    opacity: 1;
    z-index: 10;
}

#click {
    position: fixed;
    z-index: 999;
    top: calc(var(--clickPosition) * 1.6);
    left: calc(100vw - var(--clicksize) - calc(var(--clickPosition)));
    width: var(--clicksize);
    height: var(--clicksize);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;

    transition: background-color 2s ease;
    transform: rotate(0deg);
}

#click::before,
#click::after {
    content: "";
    width: var(--linewidth);
    height: var(--linethickness);
    background: #000066;
    border-radius: 999px;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    transition: transform 0.4s ease;
}

#click.clickCross {
    box-shadow: none;
}

#click::before {
    transform: translate(-50%, calc(-50% - var(--linespacing) / 2));
}

#click::after {
    transform: translate(-50%, calc(-50% + var(--linespacing) / 2));
}

/* クリック後の状態（バツ印） */
#click.clickCross::before {
    /* 回転させてから移動させる */
    transform: translate(-50%, -50%) rotate(45deg);
}

#click.clickCross::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#ue,
#shita {
    width: var(--ueShitaPhone);
    height: var(--ueShitaPhone);
    display: block;
    color: white;
    background: rgba(0, 0, 102, 0.1);
    position: fixed;
    text-align: center;
    line-height: var(--ueShitaPhone);
    border-radius: 50%;
    font-size: calc(0.7vw + 15px);
    user-select: none;
}

#ue {
    right: var(--uspp);
    bottom: calc(15vh + 10px);
    z-index: 5;
}

#shita {
    right: var(--uspp);
    bottom: calc(15vh - 60px);
    z-index: 5;
    display: none;
}

#phone {
    width: var(--ueShitaPhone);
    height: var(--ueShitaPhone);
    border-radius: 50%;
    text-align: center;
    position: fixed;
    z-index: 999;
    right: var(--uspp);
    bottom: calc(10vh - 20px);

    img {
        width: 80%;
        height: 80%;
    }
}

/* BGMの波紋のアニメーション */
@keyframes pulsate {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}



.now-loading {
    display: none;
    width: 100vw;
    height: 100lvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: #e6afcf;
    animation: now-loading-delete 1s linear 3s forwards;


    #text1 {
        mask: url(#mask1);
    }

    #text2 {
        mask: url(#mask2)
    }

    #text3 {
        mask: url(#mask3)
    }

    .miharaSvg,
    .dentalSvg,
    .clinicSvg {
        svg {
            width: 100%;
        }
    }

    .miharaSvg {
        position: absolute;
        top: 22dvh;
        left: 3vw;
        transform: translate(-3%, -22%);
        width: calc(15vw + 200px);
        height: 15svh;
    }

    .dentalSvg {
        position: absolute;
        display: block;
        height: 15svh;
        top: 50dvh;
        left: 50vw;
        transform: translate(-50%, -50%);
        width: calc(12vw + 165px);
    }

    .clinicSvg {
        position: absolute;
        top: 75dvh;
        left: 75vw;
        transform: translate(-50%, -75%);
        width: calc(11vw + 153px);
        height: 15svh;
    }

    .handwriting {
        position: absolute;

        width: 30%;
        height: auto;
    }

    .handwriting_text {
        fill: #404040;
        fill: #fff
    }

    .handwriting_mask_line {
        fill: none;
        stroke: #fff;
        stroke-width: 7;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 4000px;
        display: inline;
    }

    .mihara-line {
        animation: miharawriting 10s linear 1;
    }

    .dental-line {
        animation: dentalwriting 10s linear 1;
    }

    .clinic-line {
        animation: clinicwriting 10s linear 1;
    }
}

.nowLoadingBlock {
    display: block;
}

@keyframes miharawriting {
    0% {
        stroke-dashoffset: 4000px;
    }

    5% {
        stroke-dashoffset: 4000px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes dentalwriting {
    0% {
        stroke-dashoffset: 4000px;
    }

    12% {
        stroke-dashoffset: 4000px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes clinicwriting {
    0% {
        stroke-dashoffset: 4000px;
    }

    19% {
        stroke-dashoffset: 4000px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

/* ローディング削除用アニメーション */
@keyframes now-loading-delete {
    0% {
        opacity: 1;
        visibility: visible;
    }

    55% {
        transform: translateY(-70lvh);
        opacity: 1;
    }

    60% {
        transform: translateY(-70lvh);
        opacity: 0.9;
    }

    100% {
        transform: translateY(-100lvh);
        opacity: 0.3;
        visibility: hidden;
    }
}

@media (prefers-color-scheme: dark) {
    footer {
        color: #000;
    }
}