:root {
    --oneColor: hsl(340 50% 40%);
    --twoColor: hsl(210 50% 40%);
    --threeColor: hsl(310 50% 40%);
    --fourColor: hsl(199 50% 40%);
    /* HSL(199, 100%, 33%) */
}

body {
    /* padding-top: calc(1vh + 10px); */

    header {
        overflow-x: hidden;

        /* margin-top: calc(10vh + 20px); */
        /* background: lavenderblush; */

        /* h1 {
            padding-top: calc(15vh + 50px);
            font-size: calc(1.5vw + 25px);
            text-align: center;
            font-family: "Noto Sans JP", sans-serif;
            letter-spacing: 0.15em;
        } */

        h1 {
            font-size: calc(1.5vw + 24px);
            font-weight: bold;
            letter-spacing: 0.1em;
            width: calc(15vw + 180px);
            width: 100vw;
            width: 30vh;
            height: 30vh;

            /* line-height: 20vh; */
            text-align: center;
            /* padding-top: calc(10vh + 20px); */
            padding: 0;
            margin: 0;
            font-family: "Zen Maru Gothic", sans-serif;
            background: rgba(55, 255, 255, 0.8);
            background: #dbedff;
            border-radius: 50%;
            position: absolute;
            z-index: 6;
            top: 3vh;
            right: 7%;
            /* border: solid 2px gray; */
            outline: dashed 2px gray;
            outline-offset: -10px;


            letter-spacing: none;
            user-select: none;

            span {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                /* background: tomato; */
            }
        }

        .message {
            position: absolute;
            z-index: 3;
            top: 70vh;
            left: 5%;
            background: #dbedff;
            border-radius: 20px;
            padding: 3vw;
            font-size: calc(1vw + 16px);
            outline: dashed 2px gray;
            outline-offset: -10px;
        }

        .headerFilter {
            width: 100vw;
            height: 100vh;
            background-color: rgb(255 255 255 / 0.25);
            background-color: rgb(255 255 255 / 0.15);
            position: absolute;
            z-index: 2;
            top: 0;
            /* display: none; */
        }

        .headerImageContainer {
            overflow: hidden;
            position: absolute;
            background: tan;
            width: 80vw;
            height: 80vh;
            top: 10vh;
            left: 10vw;

            .headerImage {
                width: 80vw;
                height: 80vh;

                /* background-position: bottom center; */
                position: absolute;

                border-radius: 40px;

                /* アニメーション */
                opacity: 0;
                transition: opacity 0.8s ease-in-out;
            }

            .headerImage::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: inherit;
                /* HTMLで書いたstyleを引き継ぐ */
                background-size: cover;
                background-position: center;
                transform: scale(1.1);
            }

            .headerImage.active {
                opacity: 1;
                z-index: 1;
            }

            .headerImage.active::after {
                animation: zoom 10s linear forwards;
            }
        }





        height: 100vh;


    }

    main {



        h3 {
            text-align: center;
            font-weight: bold;
            padding: calc(8vh + 20px) 0 calc(2vh + 20px);
            padding: calc(4vh + 20px) 0 calc(6vh + 20px);
            letter-spacing: 0.1em;
            font-size: calc(0.7vw + 18px);
            font-size: calc(1.5vw + 19px);
            font-family: "Noto Sans JP", sans-serif;
            font-family: "Zen Maru Gothic", sans-serif;
        }



        article {
            width: calc(50vw + 200px);
            max-width: 93vw;
            margin: 0 auto;
            margin: 0 0 0 5vw;
            padding: 0 3vw;
            background: whitesmoke;
            background-size: cover;
            background-position: center;
            box-shadow:
                0 1px 2px rgba(0, 0, 0, 0.07),
                0 2px 4px rgba(0, 0, 0, 0.07),
                0 4px 8px rgba(0, 0, 0, 0.07),
                0 8px 16px rgba(0, 0, 0, 0.07);





            h2 {
                padding: calc(10vh + 20px) 0 calc(7vh + 20px);
                padding: calc(4vh + 20px) 0 calc(6vh + 20px);
                letter-spacing: 0.1em;
                font-size: calc(1.5vw + 19px);
                text-align: center;
                font-weight: bold;
                font-family: "Noto Sans JP", sans-serif;
                font-family: "Noto Serif JP", sans-serif;
                font-family: "Zen Maru Gothic", sans-serif;
            }

            p {
                line-height: 1.9;
                line-height: 2.7;
            }

            span {
                background: linear-gradient(to top, moccasin 25%, transparent 25%);
                font-weight: bold;
            }

            ul {
                /* background: violet; */
                margin: calc(4vh + 30px) 0;


                li {
                    list-style-position: inside;
                }
            }

            blockquote {
                margin: 50px 0;

                p {
                    font-weight: bold;
                    color: cadetblue;
                }

                a {
                    font-weight: bold;
                }
            }

            position: relative;

            .catRight {
                display: block;
                position: absolute;
                top: 50%;
                right: -50%;
                transform: translate(0, -50%);
                user-select: none;
            }

            .catLeft {
                display: block;
                position: absolute;
                top: 50%;
                left: -55%;
                transform: translate(0, -50%);
                user-select: none;
            }

            .sonoda {
                display: block;
                position: absolute;
                top: 50%;
                left: -55%;
                transform: translate(0, -50%);
                height: 95%;
                user-select: none;
            }

        }


        .firstArticle {
            /* 背景全体の色（真っ白より少しクリーム色にすると目に優しいです） */
            background-color: #fafafa;

            /* 縦線と横線をグラデーションで描画 */
            background-image:
                linear-gradient(rgba(163, 217, 211, 0.3) 1px, transparent 1px),
                /* 横線（薄いミントグリーン） */
                linear-gradient(90deg, rgba(163, 217, 211, 0.3) 1px, transparent 1px);
            /* 縦線 */

            /* マス目のサイズ（20px × 20px） */
            background-size: 50px 50px;

            /* 要素の内側の余白 */
            padding: 40px;

            /* 角を丸くすると、よりマイルドな印象になります */
            border-radius: 10px;
            border: 1px solid #e0eeed;
            margin: 5vw 0 0 5vw;
        }

        .sonoda {
            position: absolute;
            right: 0;
            height: 75vh;
        }

        .sonoda1 {
            top: 125vh;
        }

        .sonoda2 {
            top: 240vh;
            left: 10vh;
        }

        .sonoda3 {
            top: 360vh;
        }

        .sonoda4 {
            top: 460vh;
            left: 10vh;
        }





        .secondArticle {
            /* 背景全体の色（真っ白より少しクリーム色にすると目に優しいです） */
            background-color: #fafafa;

            /* 縦線と横線をグラデーションで描画 */
            background-image:
                linear-gradient(rgba(163, 217, 211, 0.3) 1px, transparent 1px),
                /* 横線（薄いミントグリーン） */
                linear-gradient(90deg, rgba(163, 217, 211, 0.3) 1px, transparent 1px);
            /* 縦線 */

            /* マス目のサイズ（20px × 20px） */
            background-size: 50px 50px;

            /* 要素の内側の余白 */
            padding: 40px;

            border-radius: 10px;
            border: 1px solid #e0eeed;
            margin: 5vw 0 0 40vw;
        }

        .word {
            margin: 10vh 0 5vh;
            padding: 5vh;

            p,
            cite {
                line-height: 3;
            }

            .bold {
                font-weight: bold;
            }
        }

        .desease {
            width: 100vw;
            width: calc(50vw + 200px);
            margin: 10vh auto 0;
            max-width: 93vw;

            ul {
                display: flex;
                flex-wrap: wrap;

                li {
                    list-style: none;
                    width: calc(25vw + 100px);
                    height: calc(12vw + 50px);
                    max-width: calc(93vw / 2);
                    text-align: center;
                    /* line-height: calc(12vw + 50px); */
                    box-sizing: border-box;
                    font-weight: bold;



                    button {
                        width: 100%;
                        height: 100%;
                        letter-spacing: 0.2em;
                    }
                }

                li:nth-child(1) {
                    /* background: hsl(150 100% 95%); */
                    border: var(--oneColor) solid 3px;
                    color: var(--oneColor);
                }

                li:nth-child(2) {
                    border: var(--twoColor) solid 3px;
                    color: var(--twoColor);
                }

                li:nth-child(3) {
                    border: var(--threeColor) solid 3px;
                    color: var(--threeColor);

                }

                li:nth-child(4) {
                    border: var(--fourColor) solid 3px;
                    color: var(--fourColor);
                }



                li:hover {
                    transition: .5s;
                    color: white;
                }

                li:nth-child(1):hover {
                    background: var(--oneColor);
                }

                li:nth-child(2):hover {
                    background: var(--twoColor);
                }

                li:nth-child(3):hover {
                    background: var(--threeColor);
                }

                li:nth-child(4):hover {
                    background: var(--fourColor);
                }

            }
        }



        .healthDialog[open] {
            opacity: 1;
            scale: 1;
        }

        .healthDialog.is-closing {
            scale: 0.75;
            opacity: 0;
        }

        @starting-style {
            .healthDialog[open] {
                opacity: 0;
                scale: 0.75;
            }
        }

        .healthDialog {
            /* transition: scale 1s ease, display 1s allow-discrete, overlay 1s allow-discrete; */
            position: fixed;
            top: 0;
            max-width: none;
            max-height: none;
            width: 100vw;
            height: 100lvh;
            padding: calc(2vw + 2vh);

            opacity: 0;

            scale: 0.75;

            transition: .4s;

            article {
                width: calc(60vw + 80px);
                padding: calc(2vw + 2vh);
                background: white;
                margin: 0 auto;

                p {
                    line-height: 2;
                }

                cite,
                a {
                    line-height: 2.5;
                }

                span {
                    background: linear-gradient(to top, moccasin 25%, transparent 25%);
                    font-weight: bold;
                }
            }

            .healthCloseButton {

                position: fixed;
                z-index: 999;
                z-index: 999999999;
                top: calc(var(--clickPosition) + 10px);
                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);
                outline: none;
            }

            .healthCloseButton::before,
            .healthCloseButton::after {
                content: "";
                width: var(--linewidth);
                height: var(--linethickness);
                background: black;
                border-radius: 999px;

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

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

                transition: transform 0.4s ease;
            }

            .healthCloseButton.clickCross {
                box-shadow: none;
            }

            .healthCloseButton::before {
                transform: translate(-50%, calc(-50% - var(--linespacing) / 2));
                transform: translate(-50%, -50%) rotate(45deg);
            }

            .healthCloseButton::after {
                transform: translate(-50%, calc(-50% + var(--linespacing) / 2));
                transform: translate(-50%, -50%) rotate(-45deg);
            }

        }

        .sugarIssues {
            background: hsl(340 50% 40%);
            background: hsl(340 50% 75%);
        }

        .stroke {
            background: hsl(210 50% 40%);
            background: hsl(210 50% 75%);
        }

        .memoryLoss {
            background: hsl(310 50% 40%);
            background: hsl(310 50% 75%);
        }

        .earlyBirth {
            background: hsl(199 50% 40%);
            background: hsl(199 50% 75%);
        }

    }


}

@keyframes zoom {
    0% {
        transform: scale(1.0);
    }

    100% {
        transform: scale(1.2);
    }
}