/*
 * Bootstrap 3 互換スタイル
 *
 * Bootstrap 5 で廃止されたクラスのうち、画面で使い続けているものを
 * Bootstrap 3 と同じ見た目・ブレークポイントで再定義する。
 * Bootstrap 3 のブレークポイント: xs < 768px, sm 768px〜991px, md 992px〜1199px, lg 1200px〜
 */

/* ---- 基本の文字・リンク・見出し (Bootstrap 3 に合わせる) ---- */
:root {
    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.42857143;
    --bs-body-color: #333;
    --bs-link-color-rgb: 51, 122, 183;
    --bs-link-hover-color-rgb: 35, 82, 124;
}

h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.1;
}

p {
    margin: 0 0 10px;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
    opacity: 1;
}

a {
    text-decoration: none;
}

    a:hover,
    a:focus {
        text-decoration: underline;
    }

    a.btn:hover,
    a.btn:focus,
    a.navbar-brand:hover,
    a.nav-link:hover {
        text-decoration: none;
    }

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-check-label {
    font-weight: normal;
}

/* ---- コンテナ幅・列の余白 (Bootstrap 3 に合わせる) ---- */
.container,
.row {
    --bs-gutter-x: 30px;
}

/* Bootstrap 3 と同じく、画面幅ごとに固定幅にする (入れ子の .container も同じ幅になる) */
/* (列のクラスと併用している場合は、Bootstrap 3 と同じく列の幅を優先する) */
.container {
    max-width: none;
}

@media (min-width: 768px) {
    .container:not([class*="col-"]) { width: 750px; }
}

@media (min-width: 992px) {
    .container:not([class*="col-"]) { width: 970px; }
}

@media (min-width: 1200px) {
    .container:not([class*="col-"]) { width: 1170px; }
}

/*
 * グリッド (.row / col-*)
 * Bootstrap 5 は flexbox で配置するが、既存画面は Bootstrap 3 の float 前提で作られている
 * (.row の外に列がある、.row の中に列以外の要素がある、など)。
 * そのため Bootstrap 3 と同じ float による配置を再現する。列の幅は Bootstrap 5 のクラスの指定をそのまま使う。
 */
.row {
    display: block;
}

    .row > * {
        flex-shrink: initial;
    }

    /* .row 直下の列以外の要素は、Bootstrap 3 と同じく通常のブロックとして扱う */
    .row > :not([class*="col-"]) {
        width: auto;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

[class*="col-"] {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
}

/* float を中で回り込ませない (Bootstrap 3 の clearfix 相当) */
.container:not(.navbar > .container)::before,
.container:not(.navbar > .container)::after,
.row::before,
.row::after {
    content: " ";
    display: table;
}

.container:not(.navbar > .container)::after,
.row::after {
    clear: both;
}

/* ---- 表示切り替え (hidden-* / visible-*) ---- */
.hidden {
    display: none !important;
}

.visible-xs, .visible-sm, .visible-md, .visible-lg,
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block {
    display: none !important;
}

@media (max-width: 767.98px) {
    .visible-xs, .visible-xs-block { display: block !important; }
    .visible-xs-inline { display: inline !important; }
    .visible-xs-inline-block { display: inline-block !important; }
    table.visible-xs { display: table !important; }
    tr.visible-xs { display: table-row !important; }
    th.visible-xs, td.visible-xs { display: table-cell !important; }
    .hidden-xs { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .visible-sm, .visible-sm-block { display: block !important; }
    .visible-sm-inline { display: inline !important; }
    .visible-sm-inline-block { display: inline-block !important; }
    table.visible-sm { display: table !important; }
    tr.visible-sm { display: table-row !important; }
    th.visible-sm, td.visible-sm { display: table-cell !important; }
    .hidden-sm { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .visible-md, .visible-md-block { display: block !important; }
    .visible-md-inline { display: inline !important; }
    .visible-md-inline-block { display: inline-block !important; }
    table.visible-md { display: table !important; }
    tr.visible-md { display: table-row !important; }
    th.visible-md, td.visible-md { display: table-cell !important; }
    .hidden-md { display: none !important; }
}

@media (min-width: 1200px) {
    .visible-lg, .visible-lg-block { display: block !important; }
    .visible-lg-inline { display: inline !important; }
    .visible-lg-inline-block { display: inline-block !important; }
    table.visible-lg { display: table !important; }
    tr.visible-lg { display: table-row !important; }
    th.visible-lg, td.visible-lg { display: table-cell !important; }
    .hidden-lg { display: none !important; }
}

/* ---- フォーム ---- */
.form-group {
    margin-bottom: 15px;
}

.control-label {
    padding-top: 7px;
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}

@media (min-width: 768px) {
    .form-inline .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }

    .form-inline .form-control,
    .form-inline .form-select {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }

    .form-inline .form-control-static {
        display: inline-block;
    }

    .form-inline .input-group {
        display: inline-table;
        vertical-align: middle;
    }

    .form-inline .control-label {
        margin-bottom: 0;
        vertical-align: middle;
    }
}

/* ---- ボタン (Bootstrap 3 の大きさ・配色に合わせる) ---- */
.btn {
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 12px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 1.42857143;
    --bs-btn-border-radius: 4px;
}

.btn-lg {
    --bs-btn-padding-y: 10px;
    --bs-btn-padding-x: 16px;
    --bs-btn-font-size: 18px;
    --bs-btn-line-height: 1.3333333;
    --bs-btn-border-radius: 6px;
}

.btn-sm {
    --bs-btn-padding-y: 5px;
    --bs-btn-padding-x: 10px;
    --bs-btn-font-size: 12px;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: 3px;
}

/* Bootstrap 3 では <a class="btn" disabled> も無効表示になっていた */
.btn[disabled] {
    pointer-events: none;
    opacity: .65;
    box-shadow: none;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #337ab7;
    --bs-btn-border-color: #2e6da4;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #286090;
    --bs-btn-hover-border-color: #204d74;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #286090;
    --bs-btn-active-border-color: #204d74;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #337ab7;
    --bs-btn-disabled-border-color: #2e6da4;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5cb85c;
    --bs-btn-border-color: #4cae4c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #449d44;
    --bs-btn-hover-border-color: #398439;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #449d44;
    --bs-btn-active-border-color: #398439;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #5cb85c;
    --bs-btn-disabled-border-color: #4cae4c;
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5bc0de;
    --bs-btn-border-color: #46b8da;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #31b0d5;
    --bs-btn-hover-border-color: #269abc;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #31b0d5;
    --bs-btn-active-border-color: #269abc;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #5bc0de;
    --bs-btn-disabled-border-color: #46b8da;
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: #f0ad4e;
    --bs-btn-border-color: #eea236;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ec971f;
    --bs-btn-hover-border-color: #d58512;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ec971f;
    --bs-btn-active-border-color: #d58512;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #f0ad4e;
    --bs-btn-disabled-border-color: #eea236;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #d9534f;
    --bs-btn-border-color: #d43f3a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c9302c;
    --bs-btn-hover-border-color: #ac2925;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #c9302c;
    --bs-btn-active-border-color: #ac2925;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #d9534f;
    --bs-btn-disabled-border-color: #d43f3a;
}

/*
 * Bootstrap 3 には btn-secondary が無く、装飾の無いボタンとして表示されていた。
 * (色はリンク色を継承し、マウスを乗せる・押すと #333 になっていた) 既存画面の見た目を変えないよう、その表示を再現する。
 */
.btn-secondary {
    --bs-btn-color: #337ab7;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #333;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #333;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #337ab7;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.form-control,
.form-select {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    border-color: #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

input.form-control,
select.form-select {
    height: 34px;
}

/* select は Bootstrap 3 と同じくブラウザ標準の矢印で表示する */
.form-select {
    appearance: auto;
    background-image: none;
}

.form-control:focus,
.form-select:focus {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.btn-default {
    --bs-btn-color: #333;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #ccc;
    --bs-btn-hover-color: #333;
    --bs-btn-hover-bg: #e6e6e6;
    --bs-btn-hover-border-color: #adadad;
    --bs-btn-active-color: #333;
    --bs-btn-active-bg: #e6e6e6;
    --bs-btn-active-border-color: #adadad;
    --bs-btn-disabled-color: #333;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #ccc;
    --bs3-btn-focus-border-color: #8c8c8c;
}

/*
 * ---- ボタンを押したときの見た目 (Bootstrap 3 に合わせる) ----
 * - 色は瞬時に切り替える (Bootstrap 5 は 0.15 秒かけて変化する)
 * - 押している間は内側に影を付けて、へこんだ見た目にする
 * - 押している間・マウスを乗せたまま押した場合は、さらに濃い色にする
 * - クリック後もフォーカスの枠と色を残す (Bootstrap 5 はキーボード操作時のみ)
 */
.btn {
    transition: none;
}

.btn-primary { --bs3-btn-focus-border-color: #122b40; }
.btn-success { --bs3-btn-focus-border-color: #255625; }
.btn-info { --bs3-btn-focus-border-color: #1b6d85; }
.btn-warning { --bs3-btn-focus-border-color: #985f0d; }
.btn-danger { --bs3-btn-focus-border-color: #761c19; }

.btn:focus,
.btn:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs3-btn-focus-border-color, var(--bs-btn-hover-border-color));
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    box-shadow: none;
}

.btn:active,
.btn.active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

/* 押したまま (マウスを乗せている・フォーカスがある) のときの色 */
.btn-default:active:hover, .btn-default:active:focus, .btn-default.active:hover {
    --bs-btn-active-bg: #d4d4d4;
    --bs-btn-active-border-color: #8c8c8c;
}

.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary.active:hover {
    --bs-btn-active-bg: #204d74;
    --bs-btn-active-border-color: #122b40;
}

.btn-success:active:hover, .btn-success:active:focus, .btn-success.active:hover {
    --bs-btn-active-bg: #398439;
    --bs-btn-active-border-color: #255625;
}

.btn-info:active:hover, .btn-info:active:focus, .btn-info.active:hover {
    --bs-btn-active-bg: #269abc;
    --bs-btn-active-border-color: #1b6d85;
}

.btn-warning:active:hover, .btn-warning:active:focus, .btn-warning.active:hover {
    --bs-btn-active-bg: #d58512;
    --bs-btn-active-border-color: #985f0d;
}

.btn-danger:active:hover, .btn-danger:active:focus, .btn-danger.active:hover {
    --bs-btn-active-bg: #ac2925;
    --bs-btn-active-border-color: #761c19;
}

/* ---- 文字色 (Bootstrap 3 に合わせる) ---- */
.text-primary { color: #337ab7 !important; }
.text-success { color: #3c763d !important; }
.text-info { color: #31708f !important; }
.text-warning { color: #8a6d3b !important; }
.text-danger { color: #a94442 !important; }
.text-muted { color: #777 !important; }

/* ---- ナビゲーションバー (Bootstrap 3 に合わせる) ---- */
.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px;
    margin-right: 0;
    font-size: 18px;
    line-height: 20px;
}

@media (min-width: 768px) {
    .navbar .navbar-nav.ms-auto {
        margin-right: -15px;
    }

    .navbar > .container > .navbar-brand:first-child {
        margin-left: -15px;
    }

    /* ログイン後メニュー (_LoginPartial): Bootstrap 3 での表示位置・間隔を再現する */
    #mainNavbar {
        margin-right: -15px;
    }

    .navbar-expand-md .navbar-nav .nav-link.nav-box {
        padding: 15px 0 15px 15px;
    }
}

/* ---- 文字揃え (Bootstrap 3 と同じく !important を付けない) ---- */
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ---- 読み取り専用・無効の入力欄 (Bootstrap 3 に合わせて灰色にする) ---- */
.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background-color: #eee;
    opacity: 1;
}

/* ---- リストの余白 (Bootstrap 3 に合わせる) ---- */
ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
}

    ul ul, ul ol, ol ul, ol ol {
        margin-bottom: 0;
    }

/* ---- 表 (Bootstrap 3 に合わせる: セルは上揃え、罫線はセルの上側) ---- */
.table {
    margin-bottom: 20px;
    /* Bootstrap 3 ではセルに背景色・文字色を付けていなかった (行の style 指定が効くようにする) */
    --bs-table-bg: transparent;
    --bs-table-color: currentcolor;
}

    .table > :not(caption) > * > * {
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
        border-bottom-width: 0;
        border-top: 1px solid #ddd;
        box-shadow: none;
    }

    .table > thead > tr > th {
        vertical-align: bottom;
        border-bottom: 2px solid #ddd;
    }

    .table > thead:first-child > tr:first-child > th,
    .table > tbody:first-child > tr:first-child > td,
    .table > tbody:first-child > tr:first-child > th {
        border-top: 0;
    }

.table-sm > :not(caption) > * > * {
    padding: 5px;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #f9f9f9;
    --bs-table-color-type: currentcolor;
}

.table-bordered {
    border: 1px solid #ddd;
}

    .table-bordered > :not(caption) > * > * {
        border: 1px solid #ddd;
    }

    .table-bordered > thead > tr > th {
        border-bottom-width: 2px;
    }

/* ---- Font Awesome 7 のアイコン幅 (5 系と同じく固定幅にしない。fa-fw を付けた場合のみ固定幅) ---- */
:root {
    --fa-width: auto;
}

/* スマートフォン幅ではナビゲーションバーの左右の余白を詰める (Bootstrap 3 の navbar-header 相当) */
@media (max-width: 767.98px) {
    .navbar > .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* Bootstrap 3 ではインラインブロックが行の下端に揃うため、その分ナビゲーションバーが高くなっていた */
    .navbar .visible-xs-inline-block {
        padding-bottom: 5px;
    }
}

/* ---- ラジオボタン・チェックボックス (Bootstrap 3 の余白に合わせる。form-check は除く) ---- */
input[type="radio"]:not(.form-check-input),
input[type="checkbox"]:not(.form-check-input) {
    margin: 4px 0 0;
    line-height: normal;
}

/* スマートフォン幅のメニューボタン (Bootstrap 3 の navbar-toggle の大きさに合わせる) */
.navbar-toggler {
    margin: 8px 15px 8px 0;
    padding: 9px 10px;
    font-size: inherit;
    line-height: 1;
    border: 1px solid #333;
    border-radius: 4px;
}

    .navbar-toggler .navbar-toggler-icon {
        display: block;
        width: 22px;
        height: 14px;
        background-size: 22px 14px;
        /* Bootstrap 3 と同じ白い3本線 (幅 22px・太さ 2px・間隔 4px) */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3e%3cpath stroke='%23fff' stroke-width='2' d='M0 1h22M0 7h22M0 13h22'/%3e%3c/svg%3e");
    }

/*
 * ---- モーダル (Bootstrap 3 の表示位置・大きさ・アニメーションに合わせる) ----
 * Bootstrap 3: 上から 25% の位置からスライドして表示、画面上部に表示 (modal-dialog-centered は存在しなかった)、幅 600px
 */
.modal {
    --bs-modal-margin: 10px;
    --bs-modal-width: none;
    --bs-modal-padding: 15px;
    --bs-modal-header-padding: 15px;
    --bs-modal-border-color: rgba(0, 0, 0, .2);
    --bs-modal-border-radius: 6px;
    --bs-modal-inner-border-radius: 5px;
    --bs-modal-header-border-color: #e5e5e5;
    --bs-modal-footer-border-color: #e5e5e5;
    --bs-modal-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

@media (min-width: 768px) {
    .modal {
        --bs-modal-margin: 30px;
        --bs-modal-width: 600px;
        --bs-modal-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    }
}

.modal-content {
    box-shadow: var(--bs-modal-box-shadow);
}

.modal.fade .modal-dialog {
    transform: translate(0, -25%);
    transition: transform .3s ease-out;
}

.modal.show .modal-dialog {
    transform: translate(0, 0);
}

.modal-dialog-centered {
    display: block;
    min-height: 0;
}

.modal-title {
    margin: 0;
    line-height: 1.42857143;
}

.modal-footer {
    padding: 15px;
}

    .modal-footer > * {
        margin: 0 0 0 5px;
    }

/* 閉じるボタン (Bootstrap 3 の「×」の見た目に合わせる) */
.btn-close {
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
}

    .btn-close::before {
        content: "\00d7";
    }

    .btn-close:hover,
    .btn-close:focus {
        color: #000;
        opacity: .5;
        box-shadow: none;
    }

/* モーダルのヘッダー (Bootstrap 3 は通常のブロック配置で、閉じるボタンは右に回り込む) */
.modal-header {
    display: block;
}

    .modal-header::before,
    .modal-header::after {
        content: " ";
        display: table;
    }

    .modal-header::after {
        clear: both;
    }

    .modal-header .btn-close {
        float: right;
        margin: -2px 0 0;
        padding: 0;
    }

/*
 * button 要素の btn-secondary
 * Bootstrap 3 では背景色を指定していなかったため、ブラウザ標準のボタンの背景色で表示されていた
 */
button.btn-secondary,
input.btn-secondary {
    --bs-btn-color: #333;
    --bs-btn-bg: buttonface;
    --bs-btn-hover-color: #333;
    --bs-btn-hover-bg: buttonface;
    --bs-btn-active-color: #333;
    --bs-btn-active-bg: buttonface;
    --bs-btn-disabled-color: #333;
    --bs-btn-disabled-bg: buttonface;
}

/*
 * ---- アニメーション ----
 * Bootstrap 5 は OS の「アニメーションを減らす」設定 (Windows の「アニメーション効果」オフなど) のとき
 * フェードやスライドを止めるが、Bootstrap 3 は止めていなかったため、同じ動きにする。
 */
@media (prefers-reduced-motion: reduce) {
    .fade {
        transition: opacity .15s linear;
    }

    .collapsing {
        transition: height .35s ease;
    }

    .modal.fade .modal-dialog {
        transition: transform .3s ease-out;
    }
}

/* Bootstrap 5 はページ内リンクでスムーズにスクロールするが、Bootstrap 3 はしなかった */
:root {
    scroll-behavior: auto;
}