@charset "utf-8";

main {
    padding-block: 0 4rem;

    & * {
        box-sizing: border-box;
    }

    & a {
        color: #333;
        text-decoration: none;
    }
}

#top {
    margin-block: 3rem 0;
    margin-inline: auto;
}

.top__h2 {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    width: 92%;
    max-width: 960px;
    margin-inline: auto;

    .top__h2--icon {
        width: 32px;
        fill: #3d68cc;
    }
}

#category {
    width: 92%;
    max-width: 960px;
    margin-block: 3rem 0;
    margin-inline: auto;

    .category__wrap {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem 3%;
        margin-block: 1.5rem 0;
    }

    .category__box {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        justify-content: center;
        padding-block: 1rem;
        padding-inline: 0.8rem;
        font-size: 18px;
        font-weight: bold;
        border: 2px solid var(--gray_border);
        border-radius: var(--radius-m);
        box-shadow: var(--shadow_weak);

        &.category__box--all {
            grid-column: 1 / 5;
            padding-block: 2.5rem;
            font-size: 28px;
            border-radius: 10px;
        }

        &.category__box--text_long {
            font-size: 14px;
        }

        &:hover {
            background-color: #f1f1f1;
        }

        & img {
            width: 40%;
            padding: 0.4rem;
            background-color: #fff;
            border-radius: var(--radius-m);
        }

        & p {
            flex-grow: 1;
            text-align: center;
        }
    }
}

#select {
    width: 92%;
    max-width: 960px;
    margin-block: 4.5rem 0;
    margin-inline: auto;

    .select__box {
        display: block;
        width: 100%;
        padding-block: 3rem;
        padding-inline: 1rem;
        margin-block: 1rem 0;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        border: 3px solid var(--gray_border);
        border-radius: 20px;
        box-shadow: var(--shadow_weak);

        &:hover {
            background-color: #f1f1f1;
        }
    }

    .select__wrap {
        margin-block: 2rem 0;
    }

    .select__head {
        display: flex;
        gap: 1.5rem;
        align-items: baseline;
    }

    /* ========================= ヘッダー ========================= */
    .search__wrapper {
        box-sizing: border-box;
        width: 100%;
        margin-block: 1rem 0;
        margin-inline: auto;
        border-radius: 10px;
        border-radius: 100vmax;
        box-shadow: var(--shadow_weak);

        & #repcal_header_search_form {
            position: relative;
            box-sizing: border-box;
            display: flex;
            width: 100%;
            height: 4.5rem;
            padding: 0;
            margin-block: 0;
            margin-inline: 0;
            overflow: visible;
            background-color: var(--white);
            border: 1px solid #a8a8a8;
            border-radius: 100vmax;
        }

        & #repcal_header_search_word {
            width: 100%;
            padding-block: 0;
            padding-inline: 2rem 6.15rem;
            text-overflow: ellipsis;
            font-size: 16px;
            border: none;
            border-radius: 100vmax;

            &:focus {
                outline: 2px solid #3d68cc;
            }

            &:focus.is-suggest-open {
                border-radius: 40vmax 100vmax 100vmax 0;
            }

            &::placeholder {
                color: #aaa;
            }
        }

        & #repcal_header_search_button {
            position: absolute;
            top: 0;
            right: -1px;
            width: 100px;
            height: 100%;
            font-family: FontAwesome;
            font-size: 32px;
            color: #fff;
            cursor: pointer;
            outline: none;
            background: #3d68cc;
            border: none;
            border-radius: 0 90vmax 90vmax 0;
        }
    }

    .ui-menu .ui-menu-item-wrapper {
        box-sizing: border-box;
        padding: 10px 1.8rem;
    }

    .search__model {
        font-size: 14px;
        color: #3d68cc;

        &:hover {
            text-decoration: underline;
        }
    }
}

#flow {
    padding-block: 6rem 8rem;
    margin-block: 10rem 0;
    background-color: #f1f1f1;

    .flow__contents {
        width: 92%;
        max-width: 960px;
        margin-inline: auto;
    }

    .flow__wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3%;
        margin-block: 2rem 0;

        .flow__link--box {
            display: flex;
            gap: 1.5rem;
            align-items: center;
            justify-content: center;
            padding-block: 3rem;
            padding-inline: 1rem;
            font-size: 20px;
            font-weight: bold;
            background-color: #fff;
            border: 2px solid;
            border-radius: var(--radius-m);
            box-shadow: var(--shadow_weak);
        }

        .flow__link--rep {
            color: #3d68cc;

            & use {
                fill: #3d68cc;
            }

            &:hover {
                background-color: #eaf0ff;
            }
        }

        .flow__link--cal {
            color: #0c8a4d;

            & use {
                fill: #0c8a4d;
            }

            &:hover {
                background-color: #e9faf1;
            }
        }

        .flow__link--cal_about {
            position: relative;
            display: inline-block;
            grid-row: 2;
            grid-column: 2;
            padding-block: 0 0.5rem;
            padding-inline: 0 1rem;
            margin-block: 3rem 0;
            font-weight: bold;
            color: #0c8a4d;
            text-decoration: none;
            border-block-end: 2px solid;

            &::before,
            &::after {
                position: absolute;
                top: calc(50% - 3px);
                right: 2px;
                width: 11px;
                height: 3px;
                content: "";
                background-color: #0c8a4d;
                border-radius: 100vmax;
                transform-origin: calc(100% - 1px) 50%;
            }

            &::before {
                transform: rotate(42deg);
            }

            &::after {
                transform: rotate(-42deg);
            }

            &:hover {
                opacity: 0.7;
            }
        }

        .flow__icon--wrap {
            display: flex;
            gap: 0.3rem;
            align-items: center;
        }

        .flow__icon {
            width: 40px;
            aspect-ratio: 1 / 1;
        }
    }
}

#excel {
    width: 92%;
    max-width: 960px;
    margin-block: 8rem 0;
    margin-inline: auto;

    .excel__wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-block: 3rem;
        padding-inline: 3rem;
        line-height: 2;
        border: 1px solid #ccc;
        border-radius: var(--radius-m);
    }

    .excel__link {
        position: relative;
        display: block;
        width: fit-content;
        padding-block: 1rem;
        padding-inline: 3.5rem 5rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        text-decoration: none;
        background-color: #3d68cc;
        border-radius: 100vmax;

        .fa {
            margin-inline: 0 1rem;
            font-size: 18px;
        }

        &::before,
        &::after {
            position: absolute;
            top: calc(50% - 2px);
            right: 30px;
            width: 18px;
            height: 5px;
            content: "";
            background-color: #fff;
            border-radius: 100vmax;
            transform-origin: calc(100% - 2px) 50%;
        }

        &::before {
            transform: rotate(45deg);
        }

        &::after {
            transform: rotate(-45deg);
        }

        &:hover {
            opacity: 0.7;
        }
    }
}

@media (max-width: 960px) {
    #top {
        margin-block: 1.8rem 0;
    }

    .top__h2 {
        gap: 0.8rem;

        .top__h2--icon {
            width: 24px;
        }
    }

    #select {
        & h2 {
            gap: 1rem;
        }

        .select__icon {
            width: 24px;
            margin-block: 2px 0;
        }

        .search__wrapper {
            & #repcal_header_search_form {
                height: 4rem;
                border-radius: 20px;
            }

            & #repcal_header_search_word {
                padding-inline: 1rem calc(50px + 0.5rem);
                border-radius: 20px;
            }

            & #repcal_header_search_button {
                width: 50px;
                font-size: 20px;
                border-radius: 0 20px 20px 0;
            }
        }
    }

    #category {
        margin-block: 1rem 0;

        .category__wrap {
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-block: 0.5rem 0;
        }

        .category__box {
            flex-direction: column;
            gap: 0;
            padding-block: 0.5rem;
            padding-inline: 0.5rem;

            &.category__box--all {
                grid-column: 1/3;

                & p {
                    font-size: 22px;
                }
            }

            & p {
                font-size: 14px;
            }

            & img {
                width: 50%;
            }
        }
    }

    #flow {
        padding-block: 3.5rem 5rem;
        margin-block: 6rem 0;

        .flow__wrap {
            .flow__icon {
                width: 32px;
            }

            .flow__link--box {
                flex-direction: column;
                gap: 0.5rem;
                padding-block: 2rem;
                padding-inline: 0.5rem;
                font-size: 14px;
            }

            .flow__link--cal_about {
                grid-column: 1 / 3;
            }
        }
    }

    #excel {
        margin-block: 6rem 0;

        .excel__wrap {
            flex-direction: column;
            gap: 1.5rem;
            padding-block: 2rem;
            padding-inline: 2rem;
            font-size: 14px;
        }

        .excel__link {
            width: 100%;
            padding-inline: 0.5rem 1.5rem;

            &::before,
            &::after {
                right: 15px;
                width: 14px;
                height: 4px;
            }
        }
    }
}