:root {
    --kumaSize: clamp(320px, calc(45vw + 140px), 550px);
}

body {
    .welfareHidden[open] {
        opacity: 1;
        scale: 1;
    }

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



    .welfareHidden.is-closing {
        animation: fadeOut 0.3s ease forwards;
    }

    /* .welfareHidden[open] {
        opacity: 1;
        scale: 1;
    }

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

    @keyframes fadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    } */
    .welfareHidden[open] {
        opacity: 1;
        scale: 1;
    }

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

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

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

    .welfareHidden {
        position: fixed;
        top: 0;
        max-width: none;
        max-height: none;
        width: 100vw;
        height: 100lvh;
        background-image: url("/images/mokume.avif");
        background-size: cover;
        opacity: 0;
        transition: .4s;


        article {
            background-color: rgba(2400, 248, 255, 0.8);
            /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 224, 0.5)); */
            width: calc(60vw + 80px);
            position: absolute;
            top: 50vh;
            left: 50vw;
            transform: translate(-50%, -50%);
            padding: calc(2vw + 2vh);


            h2 {
                padding: 0 0 calc(3vh + 0px) 0;
                /* color: white;
                text-shadow: 2px 2px 10px #000000; */
                font-family: "Noto Sans JP", sans-serif;
                font-family: "Zen Maru Gothic", sans-serif;
                font-weight: bold;
            }

            img {
                width: calc(56vw + 80px - 4vh);
                max-width: 350px;
                display: block;
                margin: calc(3vh + 20px) auto;
                border-radius: 10px;
            }

            p {
                margin: 0 auto;
                line-height: 1.9;
            }
        }




        .welfareCloseButton {

            position: fixed;
            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;
        }

        .welfareCloseButton::before,
        .welfareCloseButton::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;
        }

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

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

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

    }

    header {
        overflow-x: hidden;
        height: 100dvh;
        height: 100svh;
        padding-top: clamp(0px, calc(38vw + 30px), 30vh);
        position: relative;

        .kuma {
            background-image: url("/images/kuma.avif");
            background-size: cover;
            width: var(--kumaSize);
            height: var(--kumaSize);
            margin: 0 auto;
        }

        h1 {
            font-size: calc(1.5vw + 24px);
            font-weight: bold;
            letter-spacing: 0.1em;
            width: calc(15vw + 180px);
            text-align: center;
            padding-top: calc(2vh + 20px);
            margin: 0 auto;
            font-family: "Zen Maru Gothic", sans-serif;
        }

        .container {
            display: none;
        }
    }

    main {
        width: 100vw;
        position: relative;

        .newsWrapper {
            background: white;
            background-image: url("/images/news.avif");
            background-size: cover;



            .news {
                padding-bottom: 7vh;



                h2 {
                    padding: 7vh 0 2vh 0;
                    color: midnightblue;
                    font-size: calc(0.7vw + 25px);
                    letter-spacing: 0.1em;
                    text-align: center;
                }


                ul {

                    background-color: rgba(255, 255, 255, 0.4);
                    width: 100%;
                    padding: 0 calc(1vw + 15px) 4vh calc(1vw + 15px);

                    li {
                        line-height: 1.7;
                        letter-spacing: 0.1em;
                        list-style: square;
                        list-style-position: inside;
                        font-size: calc(0.9vw + 15px);
                        border-bottom: solid 1px azure;
                        border-bottom-style: dashed;
                        padding-top: calc(3vh + 10px);
                    }
                }

                /* width: calc(40vw + 176px); */
                width: clamp(0px, calc(50vw + 160px), 100vw);
                margin: 0 auto;

                color: black;
            }
        }

        .firstArticle,
        .secondArticle {
            h2 {
                padding: calc(2vh + 20px) 0;
            }

            width: clamp(328px, 100vw - 32px, 600px);
            margin: 0 auto;
            line-height: 2.2;
            padding: calc(2vh + 20px) 0;
            position: relative;

            .catRight {
                position: absolute;
                top: 0;
                right: 0;
            }
        }

        .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: calc(2vh + 20px) auto;
        }


        .welfare {
            background: white;
            max-width: 100vw;
            padding-bottom: 5vh;

            h2 {
                padding: 7vh 0 2vh 0;
                font-size: calc(0.7vw + 25px);
            }

            /* display: none; */
            p {
                text-align: center;
                padding: 2vh 0 7vh 0;
                font-size: calc(0.6vw + 18px);
            }

            .bImages {
                width: 100%;

                ul {
                    width: 96vw;
                    margin: 0 auto;
                    display: grid;
                    grid-template-columns: repeat(auto-fill, 30vw);
                    /* gap: 1fr; */
                    justify-content: space-between;


                    li {
                        list-style-type: none;
                        width: 90%;
                        padding: 5%;


                        img {
                            display: block;
                            user-select: none;
                            width: 100%;
                            height: 100%;
                        }

                        button {
                            display: block;
                            user-select: none;
                            width: 100%;
                            height: 100%;
                        }
                    }




                }


            }
        }



    }
}