@charset "UTF-8";

section {
    padding-top: 0;
}

#recruit-mainvisual {
    height: 100vh;
    width: 100%;
    padding-top: 100px;
    display: grid;
    position: sticky;
    top: 0;
    z-index: -1;

    .recruit-mainvisual-container {
        max-width: 65%;
        margin: auto;
        display: grid;
        place-items: center;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);

        .div1 {
            grid-row: span 2 / span 2;
        }

        .div3 {
            grid-column-start: 3;
            grid-row-start: 1;
        }

        .div4 {
            grid-column: span 2 / span 2;
            grid-column-start: 2;
            grid-row-start: 2;
            padding: 0 4%;
            display: grid;
            place-items: center;
            font-size: var(--font-size-m);
            text-align: center;
        }
    }
}

#registration {
    .t-align-l {
        text-align: left;
    }

    .t-align-c {
        text-align: center;
    }

    h3+p {
        margin-bottom: 32px;
    }

    .registration-box {
        margin-bottom: 64px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;

        .box {
            width: 20%;
            padding: 16px 8px;
            flex-grow: 1;
            display: flex;
            /* フレックスボックスを適用 */
            flex-direction: column;
            /* 縦方向のレイアウト */
            justify-content: center;
            /* 上下中央揃え */
            align-items: center;
            /* 水平方向も中央揃え（必要なら） */

            p {
                padding: 0 8px;
                text-align: left;
            }
        }
    }

    .announce {
        margin-bottom: var(--margin-bottom-l);

        .pr-announce {
            margin-bottom: var(--margin-bottom-m);
        }

        .post-announce {
            li {
                list-style: disc;
                list-style-position: inside;
            }
        }

        p+p {
            margin-bottom: var(--margin-bottom-m);
        }
    }

    .flow {
        padding-bottom: var(--margin-bottom-m);

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

.recruit-banner {
    text-align: center;
}

#faq {
    section {
        margin-bottom: 0;
    }

    h4 {
        margin-bottom: 16px
    }

    .about-usage {
        margin-bottom: 0;
        padding-bottom: 48px;
    }
}

@media (width <=960px) {
    #recruit-mainvisual {
        .recruit-mainvisual-container {
            max-width: 100%;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr) auto;

            .div1 {
                grid-row: span 2 / span 2;
            }

            .div3 {
                grid-column-start: 2;
            }

            .div4 {
                grid-column: span 2 / span 2;
                grid-row-start: 3;
                padding: 34px 4%;
                display: grid;
                place-items: center;
                font-size: var(--font-size-m);
                text-align: center;
            }

        }
    }
}

@media (width <=430px) {
    #recruit-mainvisual {
        .recruit-mainvisual-container {
            max-width: 100%;
            margin: auto;
            display: grid;
            place-items: center;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, 1fr);

            .div1 {
                grid-row: span 2 / span 2;
            }

            .div3 {
                grid-column-start: 2;
            }

            .div4 {
                grid-column: span 2 / span 2;
                grid-row-start: 3;
                padding: 0 4%;
                display: grid;
                place-items: center;
                font-size: var(--font-size-m);
                text-align: center;
            }
        }
    }

    #registration {
        .registration-box {
            margin-bottom: 64px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 16px;

            .box {
                width: 100%;

                p {
                    padding: 0;
                    text-align: center;
                }
            }
        }

        .announce {
            margin-bottom: var(--margin-bottom-l);

            .pr-announce {
                margin-bottom: var(--margin-bottom-m);
            }

            .post-announce {
                li {
                    list-style: disc;
                    list-style-position: inside;
                }
            }

            p+p {
                margin-bottom: var(--margin-bottom-m);
            }
        }

        .flow {
            li {
                list-style-type: decimal;
                list-style-position: inside;
            }
        }
    }
}