@charset "utf-8";
/* ============================================================
   Bootstrap 3 → Bootstrap 5.3.8 互換レイヤー
   「見た目を一切変えない」ための差分吸収。bootstrap.min.css の直後、
   テーマの style.css より前に読み込むこと。

   吸収している差分：
   1. グリッドのガター（BS3 30px / BS5 24px）
   2. .container の最大幅（BS3 750/970/1170 / BS5 540/720/960/1140/1320）
   3. Reboot と normalize の基本タイポグラフィ差
   4. BS5 に無いテーマ独自クラス（col-*-15）
   5. BS5 で廃止された .panel 系（本文 36 箇所・構造ごと変わるため見た目を再現）

   ※ 本文の col-xs-* / col-sm-* などは BS5 のティアに合わせて
     DB 側を書き換え済み（sm→md, md→lg, lg→xl, xs→接頭辞なし）。
     BS3 と BS5 のブレークポイントは 768 / 992 / 1200 で一致するため、
     このティアずらしで挙動が完全に一致する。
   ============================================================ */

/* ── 1〜2. グリッドのガターと .container 幅 ─────────────
   ★このテーマは Bootstrap 3 の変数をカスタマイズしていた★
     -gutter-width: 16px  → .row{margin:0 -8px} / .col-*{padding:0 8px}
     コンテナ幅: 730 / 980 / 980px（BS3 標準の 750/970/1170 ではない）
   BS5 の既定（24px / 540〜1320px）とは全く違うので、実際の値に合わせる。 */

.row,
.container,
.container-fluid {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 0;
}

/* BS5 は 576px から 540px 固定になるが、旧実装は 768px 未満まで幅100% */
@media (min-width: 576px) and (max-width: 767.98px) {
  .container { max-width: none; }
}
@media (min-width: 768px)  { .container { max-width: 730px; } }
@media (min-width: 992px)  { .container { max-width: 980px; } }
@media (min-width: 1200px) { .container { max-width: 980px; } }
@media (min-width: 1400px) { .container { max-width: 980px; } }

/* ── 3. Reboot と normalize の基本差を戻す ───────────── */

/* ★最重要★
   html{font-size:10px} は Bootstrap 3 の _scaffolding が定義していたもので、
   テーマ CSS はこれを前提に rem を使っている（例: font-size:1.4rem = 14px）。
   BS3 を外すと基準が 16px に戻り、全ての rem 指定が 1.6 倍になってしまう。 */
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* BS5 Reboot の body は 1rem（＝上記により 10px）になるため BS3 の値に固定 */
body {
  font-size: 14px;
  line-height: 1.428571429;
}

/* BS3 のリンク色（BS5 は #0d6efd）。
   なお BS3 の a:focus{outline:thin dotted} は、黒い枠が出るとのご指摘を受けて
   すでに styles/site.css で無効化しているため、ここでは復元しない。 */
a { color: #337ab7; text-decoration: none; }
a:hover, a:focus { color: #23527c; text-decoration: underline; }

/* BS3（normalize + scaffolding）の余白に戻す */
p { margin: 0 0 10px; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.1;
}
h4, h5, h6 { margin-top: 10px; }

ul, ol { margin-top: 0; margin-bottom: 10px; padding-left: 40px; }
ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; }

dl { margin-top: 0; margin-bottom: 20px; }
dd { margin-left: 0; }

/* BS5 Reboot は table のキャプション・境界を変える */
table { border-collapse: collapse; border-spacing: 0; }
th { text-align: left; }
caption { padding-top: 8px; padding-bottom: 8px; color: #777; text-align: left; }

/* BS5 Reboot の img{vertical-align:middle} は BS3 と同じなのでそのまま */

/* BS5 Reboot は hr に opacity/margin を入れる */
hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; opacity: 1; }

/* BS5 Reboot の legend / fieldset / label をBS3相当に */
label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; }

/* BS5 Reboot は strong を bolder にする（BS3 は bold） */
b, strong { font-weight: 700; }

/* BS5 Reboot は small を .875em にする（BS3 は 85%） */
small { font-size: 85%; }

/* BS5 は abbr に下線を付ける（BS3 は dotted） */
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* ── 4. BS5 特有のグリッド挙動を BS3 に合わせる ─────
   (a) BS5 は .row の「全ての直接子」に width:100% と左右パディングを与える。
       BS3 は .col-* にしか当てないため、カラム以外の子に余白が増えてしまう。
   (b) BS5 の .breadcrumb は display:flex。BS3 は普通のブロックだった。
   ※ テーマ独自の 5 カラム(.col-md-15)は style.css 側に定義があるので触らない。 */

/* ── グリッド：BS3 と同じ float 方式に戻す ─────────────
   BS5 の .row は display:flex。flex アイテムはマージン相殺をしないため、
   見出しや段落の上下マージンの扱いが変わり行の高さがずれる。
   値の調整では吸収できないのでレイアウト方式ごと BS3 に合わせる。
   （カラム幅の % は BS5 の .col-* をそのまま使うので BS5 のグリッドは活きている）

   ※ BS3 はカラムが .row の直下でなくても float / padding が効いた。
     本文には <div class="row"><div class="contents__main__card">
     <div class="col-5">… のように 1 階層挟む書き方があるため、
     .row > に限定せずカラム自体に指定する。 */

.row { display: block; }
.row::before,
.row::after { content: " "; display: table; }
.row::after { clear: both; }

/* カラムの左右パディング（BS3 は .row の内外を問わず適用） */
.col,
.col-auto,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12 {
  position: relative;
  min-height: 1px;
  padding-right: calc(var(--bs-gutter-x, 16px) * .5);
  padding-left: calc(var(--bs-gutter-x, 16px) * .5);
  margin-top: 0;
}

/* 接頭辞なし（旧 col-xs-*）は常に float */
.col,
.col-auto,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 { float: left; }

/* 各ティアはそのブレークポイント以上でだけ float（BS3 と同じ）。
   これより狭い幅では float しないブロックのままなので、
   BS3 と同様に子要素のマージンが相殺される。 */
@media (min-width: 768px)  { .col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 { float: left; } }
@media (min-width: 992px)  { .col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 { float: left; } }
@media (min-width: 1200px) { .col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12 { float: left; } }

/* ≤480px のガター。旧 CSS はここで
     .container{padding:4px} / .row{margin:-4px} / .col-xs-*{padding:4px}
   としていたが、col-sm-* 以上は 8px のままだった点に注意。 */
@media print, screen and (max-width: 480px) {
  .row,
  .container,
  .container-fluid { --bs-gutter-x: 8px; }

  /* ティア付きカラムは 8px を維持（4px になるのは接頭辞なしのみ） */
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-xl-1,
  .col-xl-2,
  .col-xl-3,
  .col-xl-4,
  .col-xl-5,
  .col-xl-6,
  .col-xl-7,
  .col-xl-8,
  .col-xl-9,
  .col-xl-10,
  .col-xl-11,
  .col-xl-12 {
    padding-right: 8px;
    padding-left: 8px;
  }
  /* 接頭辞なしのカラムは 4px。旧 CSS も .col-xs-* の指定を後に置いて
     ティア付きの 8px より優先させていたので、同じ順序にする
     （例: class="col-md-2 col-4" は 4px になる）。 */
  .col,
  .col-auto,
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    padding-right: 4px;
    padding-left: 4px;
  }
}
/* BS5 の .row > * は「全ての直接子」に左右パディングを与えるが、
   BS3 は .col-* にしか当てない。カラム以外の子の余白を戻す。 */
.row > *:not([class*="col-"]):not([class*="offset-"]) {
  padding-right: 0;
  padding-left: 0;
}

/* BS5 の .breadcrumb は display:flex ＋ 独自の余白・区切り文字を持つ。
   BS3 は単なるブロックだったので戻す（中の ol が幅いっぱいにならなくなるため）。 */
.breadcrumb {
  display: block;
  padding: 0;
  margin-bottom: 0;
  font-size: inherit;
  background-color: transparent;
  border-radius: 0;
}

/* ── 5. BS5 で廃止された .panel 系（BS3 の見た目を再現） ── */

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body { padding: 15px; }
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}
.panel-default { border-color: #ddd; }
.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.panel-group { margin-bottom: 20px; }
.panel-group .panel { margin-bottom: 0; border-radius: 4px; }
.panel-group .panel + .panel { margin-top: 5px; }
.panel-group .panel-heading { border-bottom: 0; }
.panel-group .panel-heading + .panel-collapse > .panel-body { border-top: 1px solid #ddd; }

/* ── 6. BS3 の .collapse.in を BS5 の .show と同義にする ── */
/* （JS 側は js/bs5-compat.js が data-toggle → data-bs-toggle を変換） */
.collapse.in { display: block; }
tr.collapse.in { display: table-row; }
tbody.collapse.in { display: table-row-group; }

/* ── 7. テーブル（BS3 の定義を復元） ─────────────────
   本文の table-striped / table-bordered は 23 箇所中 17 箇所が
   .table を併記していない。BS5 は .table に定義した CSS 変数を使うため、
   .table が無いと縞模様も罫線も消えてしまう。
   BS3 は .table を要求しない書き方だったので、その形で復元する。 */

table { caption-side: top; }

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  color: inherit;
  vertical-align: baseline;
  border-color: #ddd;
}
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #ddd;
  background-color: transparent;
  box-shadow: none;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}

.table-bordered { border: 1px solid #ddd; }
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td { border: 1px solid #ddd; }
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td { border-bottom-width: 2px; }

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #f9f9f9;
  box-shadow: none;
  color: inherit;
}
.table-hover > tbody > tr:hover > * {
  background-color: #f5f5f5;
  box-shadow: none;
  color: inherit;
}

/* ── 8. BS5 の .row > * が持つ左右パディングの詳細度対策 ──
   BS5 は .row>*（詳細度 0,1,1）で padding を当てるため、テーマ側の
   .col-md-15（0,1,0）や .col-* への padding 指定が負けてしまう。
   テーマが独自に padding を決めているカラムだけ、詳細度を上げて戻す。 */

/* ガターは 16px にそろえたので通常時の 8px は BS5 側で一致する。
   テーマが ≤480px で 4px に切り替える分だけ、詳細度を上げて反映する。 */
@media print, screen and (max-width: 480px) {
  .row > .col-xs-15,
  .row > .col-sm-15,
  .row > .col-md-15,
  .row > .col-lg-15 {
    padding-right: 4px;
    padding-left: 4px;
  }
}

/* 入れ子の .row は BS5 標準の width:100% のままで BS3 と同じ見え方になる
   （負のマージン -15px により親の内容幅＋30px に広がる）。
   ここで width:auto にすると flex アイテムとして縮んでしまうので触らない。 */

/* ── 9. BS5 に無い BS3 のタブ／ナビ ─────────────────
   本文には <ul class="nav-tabs"><li class="active"><a class="btn" data-toggle="tab">
   という BS3 の書き方が残っている。BS5 は .nav / .nav-link を前提にしており
   これらのセレクタを持たないため、BS3 の定義を復元する。 */

.nav { padding-left: 0; margin-bottom: 0; list-style: none; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; }
.nav > li > a:focus,
.nav > li > a:hover { text-decoration: none; background-color: #eee; }

.nav-tabs { border-bottom: 1px solid #ddd; }
.nav-tabs > li { float: left; margin-bottom: -1px; }
.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.428571429;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover { border-color: #eee #eee #ddd; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: #555;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  cursor: default;
}

.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* ── 10. ボタン（.btn）の寸法を BS3 に戻す ──────────────
   BS5 の .btn は --bs-btn-font-size:1rem。このテーマは html{font-size:10px}
   なので 10px になってしまう（BS3 は 14px）。高さが 32px→22px と縮み、
   タブなど .btn を使っている箇所すべてがずれるため、変数で戻す。
   左右パディングも BS5 は 0.75rem＝7.5px になるため BS3 の 12px に戻す
   （テーマの .btn{padding-left:0} は狭い画面のメディアクエリ内なので別途効く）。 */

.btn {
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 12px;
  --bs-btn-font-size: 14px;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.428571429;
  --bs-btn-border-radius: 4px;
}

/* BS3 の .btn は white-space:nowrap だったが BS5 は指定なし（normal）。
   タブの見出しなどが折り返して幅が変わるため戻す。 */
.btn { white-space: nowrap; }