body {
    font-family: "Noto Sans JP";
    color: var(--col-black);
    background-color: var(--col-bg);
}

/* メインコンテンツ幅 */
#ABOUT,
#ACTIVITY,
#MEMBER,
#CONTACT {
    max-width: 1440px;
    margin: 0 auto;
    padding: 50px 0;
}

video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

/* ヘッダー */
header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: auto;

    & .header {
        padding-top: 10px;
        padding-left: 10px;

        & img {
            width: 120px;
        }
    }

    & nav {
        padding: 10px;

        & ul {
            display: flex;
            justify-content: right;
            gap: 20px;
        }
    }
}

#TOP {
    position: relative;
    width: 100%;
    height: 100vh;

    & .video {
        width: 100%;
        height: 100vh;
    }

    & .title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        margin: 0 auto;
        text-align: center;

        & h1 {
            margin-bottom: 20px;
            font-family: "Josefin Sans";
            font-size: 128px;
            font-weight: bold;
            letter-spacing: 10px;
        }

        & p:nth-of-type(1) {
            font-size: 32px;
            font-weight: 400;
            margin-bottom: 20px;
        }

        & p:nth-of-type(n + 2) {
            font-size: 20px;
            font-weight: 400;
        }
    }
}

#ABOUT {
    & .text {
        width: 50%;
        margin: 0 auto;

        & p {
            line-height: 50px;
            margin-bottom: 20px;
        }

        & p:nth-of-type(2) {
            font-weight: 600;
        }
    }
}

#ACTIVITY {
    & div.container:nth-child(2) {
        background-color: var(--col-blue);
    }
    & div.container:nth-child(3) {
        background-color: var(--col-orange);
    }
    & div.container:nth-child(4) {
        background-color: var(--col-green);
    }

    & .container {
        position: relative;
        z-index: 5;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        width: 85%;
        margin: 0 auto 50px;
        padding: 50px 0;
        background-color: var(--col-white);

        & .image {
            text-align: center;

            & img {
                width: 300px;
                border-radius: 10px;
            }
        }

        & .text {
            width: 90%;
            margin: 0 auto;

            & h3 {
                font-size: 36px;
                font-weight: bold;
                margin-bottom: 20px;
            }

            & p:nth-of-type(n + 1) {
                line-height: 32px;
                /* margin-bottom: 10px; */
            }
        }
    }
}

#MEMBER {
    & .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
        place-items: center;
        width: 85%;
        margin: 0 auto;

        & .content {
            width: 250px;
            margin-bottom: 50px;

            & .image {
                width: 250px;
                height: 250px;
                overflow: hidden;

                & img {
                    width: 100%;
                    transform: translate(1);
                    transition: transform 0.3s ease;
                    overflow: hidden;

                    &:hover {
                        transform: scale(1.1);
                    }

                    &:active {
                        transform: scale(1);
                    }
                }
            }
        }
    }

    & .female {
        & p:nth-of-type(1) {
            color: rgb(255, 99, 99);
            font-size: 20px;
            font-weight: 500;
        }
        & p:nth-of-type(2) {
            color: rgb(255, 99, 99);
        }
    }

    & .male {
        & p:nth-of-type(1) {
            color: rgb(80, 131, 252);
            font-size: 20px;
            font-weight: 500;
        }
        & p:nth-of-type(2) {
            color: rgb(80, 131, 252);
        }
    }
}

#CONTACT {
    & .form {
        width: 60%;
        margin: 0 auto;

        & .content {
            margin-bottom: 30px;

            & label,
            input {
                display: block;
                width: 100%;
                line-height: 20px;
                margin-bottom: 5px;

                & .required {
                    color: var(--col-btn-lightred);
                    font-size: 12px;
                }
            }

            & select {
                display: block;
                width: 100%;
                height: 26px;
                margin-bottom: 5px;
            }

            & textarea {
                display: block;
                width: 100%;
                height: 150px;
                margin-bottom: 5px;
            }
        }

        & .button {
            text-align: center;

            & input {
                width: 200px;
                height: 30px;
                font-size: 16px;
                color: var(--col-white);
                background-color: var(--col-btn-red);
                border: none;
                border-radius: 15px;
                box-shadow: 0 2px 3px 0 var(--col-btn-darkred);
            }

            & input:hover {
                transform: translateY(-2px);
                background-color: var(--col-btn-lightred);
            }

            input:active {
                transform: translateY(0);
                background-color: var(--col-btn-red);
            }
        }
    }
}

/* フッターはcommonで設定 */

/* レスポンシブ */
@media screen and (max-width: 1023px) {
    header {
        & nav {
            & ul {
                gap: 20px;

                & .link-circle {
                    width: 90px;
                    height: 90px;

                    & .link-box {
                        & p {
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }

    #TOP {
        & .title {
            & h1 {
                font-size: 96px;
                letter-spacing: 5px;
            }

            & p:nth-of-type(1) {
                font-size: 24px;
            }

            & p:nth-of-type(n + 2) {
                font-size: 18px;
            }
        }
    }

    #ABOUT {
        & .text {
            width: 60%;
        }
    }

    #ACTIVITY {
        & .container {
            & .image {
                & img {
                    width: 275px;
                }
            }

            & .text {
                & h3 {
                    font-size: 28px;
                }
            }
        }
    }

    #MEMBER {
        & .container {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    #CONTACT {
        & .form {
            width: 70%;
        }
    }
}

@media screen and (max-width: 767px) {
    video {
        height: 100svh;
    }

    header {
        & nav {
            & ul {
                gap: 10px;

                & .link-circle {
                    width: 80px;
                    height: 80px;

                    & .link-box {
                        & p {
                            font-size: 10px;
                        }
                    }
                }
            }
        }
    }

    #TOP {
        & .video {
            height: 90vh;
        }

        & .title {
            & h1 {
                font-size: 64px;
                letter-spacing: 5px;
            }

            & p:nth-of-type(1) {
                font-size: 20px;
            }

            & p:nth-of-type(n + 2) {
                font-size: 14px;
            }
        }
    }

    #ABOUT {
        & .text {
            width: 80%;

            & p {
                line-height: 40px;
            }
        }
    }

    #ACTIVITY {
        & .container {
            grid-template-columns: 1fr;
            gap: 20px;

            & .text {
                width: 80%;

                & h3 {
                    font-size: 24px;
                }
            }
        }
    }

    #MEMBER {
        & .container {
            grid-template-columns: 1fr;
        }
    }

    #CONTACT {
        & .form {
            width: 80%;
        }
    }
}

@media (hover: none) {
    #CONTACT {
        & .form {
            & .button {
                & input:hover {
                    transform: translateY(0px);
                    background-color: var(--col-btn-red);
                }

                input:active {
                    transform: translateY(2px);
                    background-color: var(--col-btn-lightred);
                }
            }
        }
    }

    #MEMBER {
        & .content {
            & .image {
                & img {
                    &:hover {
                        transform: scale(1);
                    }

                    &:active {
                        transform: scale(1.2);
                    }
                }
            }
        }
    }
}