@charset "utf-8";

:root {
    --white: #fff;
    --gray_border: #c5c5c5;
    --gray_border_light: #e9e9e9;
    --gray-bg: #f1f1f1;
    --radius-m: 10px;
}

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

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

figure {
    padding: 0;
    margin: 0;
    font-size: 100%;
    vertical-align: baseline;
    outline: 0;
    background: transparent;
    border: 0;
}

img {
    max-width: 100%;
}

header:has(+ .head) {
    box-shadow: 5px 5px 3px -5px rgb(0 0 0 / 40%);
}

.head {
    width: 92%;
    max-width: 1260px;
    margin-block: 1rem 0;
    margin-inline: auto;
    overflow-x: auto;
    white-space: nowrap;

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

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

    .head_bread {
        font-size: 12px;

        & li {
            display: inline;
            color: #666;
            list-style: none;

            & a {
                color: #666;

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

            &::after {
                margin-inline: 0.5rem;
                color: #666;
                content: "/";
            }

            &:last-child::after {
                content: none;
            }
        }
    }

    .head_h1 {
        padding-inline: 1rem 0;
        margin-block: 2rem 0;
        font-size: 18px;
        font-weight: bold;
        border-inline-start: 6px solid #3d68cc;
    }
}

.hrad_width_md {
    max-width: 960px;
    margin-inline: auto;
}

h2 {
    font-size: 32px;
    font-weight: bold;
}

h3 {
    font-size: 18px;
    font-weight: bold;
}

@media (max-width: 960px) {
    .head {
        margin-block: calc(70px + 0.5rem) 0;

        .head_h1 {
            font-size: 16px;
        }
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 16px;
    }
}

@media (max-width: 499px) {
    .head {
        margin-block: calc(60px + 0.5rem) 0;
    }
}