@media (min-width: 680px) {
    :root {
        --kumaSize: clamp(320px, calc(22vw + 22vh), 550px);
    }

    body {
        header {
            padding-top: clamp(0px, calc(35vw + 30px), 15vh);

            h1 {
                padding-top: calc(4vh - 10px);
                font-size: clamp(0px, calc(3.4vw + 20px), 45px);
                width: calc(30vw + 180px);
            }
        }

        main {
            .newsWrapper {
                .news {

                    h2 {
                        font-size: calc(1.5vw + 25px);
                        padding: 6vh 0 3vh 0;
                    }

                    width: clamp(0px, calc(50vw + 160px), 100vw);
                    width: clamp(0px, calc(60vw + 160px), 100vw);

                    ul {
                        padding: 0 calc(1vw + 15px) 4vh calc(1vw + 15px);
                        padding: 0 calc(2vw + 30px) 4vh calc(2vw + 30px);
                    }
                }
            }
        }

    }

}

@media (min-width: 1025px) {
    :root {
        --newsWidth: min(100vw, calc(40vw + 600px));
        --newsWidth: 100vw;
    }

    body {
        header {
            height: 100vh;

            h1 {
                padding: 0;
                position: absolute;
                top: 2.5vw;
                right: calc(3vw - 30px);
                left: initial;
                bottom: initial;
                font-size: clamp(0px, calc(2vw + 10px), 50px);
            }

            .container {
                user-select: none;
                padding: 5%;
                display: block;
                position: absolute;
                bottom: 5vh;
                left: 5vh
            }

            .block {
                width: 160px;
                height: 160px;
                /* width: 250px;
                height: 250px; */
                margin: auto;
            }

            .circleText {
                overflow: visible;
                animation: rotation 18s linear infinite;

                .circleText__circle {
                    fill: none;
                }

                .circleText__text {
                    fill: #000;
                    font-size: 12px;
                    font-size: 10px;
                    font-size: 14.5px;
                    fill: steelblue;
                    letter-spacing: 0.15em;
                }
            }






        }



        main {
            .newsWrapper {
                border: 0px;
                background: aliceblue;
                height: 100vh;
                width: 100vw;



                .news {
                    background-image: url("/images/board3.avif");
                    background-size: cover;
                    background-size: contain;
                    background-repeat: no-repeat;
                    height: 100vh;
                    width: var(--newsWidth);
                    height: calc(var(--newsWidth) * 1.35);
                    height: 100vh;
                    width: min(calc(100vh * 1.35), 100vw);
                    margin: 0 auto;

                    color: white;

                    h2 {
                        padding: 6vh 0 3vh 0;
                        padding: calc(23vh - 35px) 0 calc(4vh - 10px) 0;
                        color: white;
                        font-size: calc(1.3vw + 25px);
                    }

                    ul {
                        width: clamp(0px, calc(60vh + 200px), 90vw);
                        padding: 0 calc(2vw + 30px) 4vh calc(2vw + 30px);
                        margin: 0 auto;
                        background: rgba(255, 255, 255, 0.1);

                        li {
                            line-height: 1.8;
                            letter-spacing: 0.1em;
                            list-style: square;
                            list-style-position: inside;
                            font-size: calc(0.6vw + 18px);
                            border-bottom: solid 1px azure;
                            border-bottom-style: dashed;
                        }
                    }



                }
            }

            .firstArticle,
            .secondArticle {
                width: 75vw;
            }

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

                        li {
                            transition: .4s;
                            background: #eeeeee;
                            border-radius: 20px;
                        }

                        li:hover {
                            background: white;
                            /* box-shadow: [水平方向のオフセット] [垂直方向のオフセット] [ぼかしの半径] [広がり] [色]; */
                            box-shadow: 2px 2px 30px 0px #888888;
                        }
                    }



                }
            }
        }


    }

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

}