@font-face {
    font-display: swap;
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/fonts/NotoSansJP-Medium.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 800;
    src: url('/assets/fonts/NotoSansJP-Bold.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Noto Serif JP';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/fonts/NotoSerifJP-Medium.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Noto Serif JP';
    font-style: normal;
    font-weight: 800;
    src: url('/assets/fonts/NotoSerifJP-Bold.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/fonts/Oswald-Medium.woff2') format('woff2');
    /* 数字とスラッシュのみ */
    unicode-range: U+0030-0039, U+002F;
}
@font-face {
    font-display: swap;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/Oswald-Bold.woff2') format('woff2');
    /* 数字とスラッシュのみ */
    unicode-range: U+0030-0039, U+002F;
}

.container {
    width: auto;
    max-width: 850px;
    padding: 0 20px;
}

.container-sm {
    width: auto;
    max-width: 700px;
    padding: 30px;
}

@media screen and (max-width: 576px) {
    .container-sm {
        padding: 20px;
    }

    header img.trimming {
        object-fit: cover;
        width: 810px;
        aspect-ratio: 4 / 1;
    }
}

body {
    font-family: 'Noto Sans JP', serif;
    font-weight: 500;
}

.serif {
    font-family: 'Noto Serif JP', serif;
}

.palt {
    font-feature-settings: "palt";
}

.fw-bold {
    font-weight: 800 !important;
}

.btn {
    box-shadow: 2px 2px 4px gray;
    transition: transform .1s;
    word-break: break-all;
}

.btn:active {
    transform: translateY(2px);
}

.form-control-lg, .form-select-lg {
    font-size: 1rem;
}

.form-control::placeholder {
    color:#ffaabb;
}

.form-control, .form-select, .form-control:focus, .form-select:focus, .form-check-box, .optional {
    background-color: #fafafa;
}

input:not([type=radio], [type=checkbox]):invalid, select:invalid, textarea:invalid, .required, .is-invalid {
    background-color: #fff6f6;
}

.form-check-input {
    transform: scale(1.4);
}

.form-check-input[type=checkbox] {
    border-radius: 0;
}

.form-check-input:checked {
    background-color: #dc3545;
    border-color: #dc3545;
}

.invalid-feedback {
    display: block;
    font-weight: 800;
}

table.confirm > tbody > tr > th {
    width: 30%;
    font-weight: 500;
}

@media screen and (max-width: 576px) {
    table.confirm > tbody > tr > th {
        display: none;
    }

    table.confirm > tbody > tr > td:before {
        content: attr(data-label);
        display: block;
        font-weight: 800;
        font-size: .875rem;
        color: #dc3545;
    }
}