@charset "UTF-8";

/* カスタムカラーの定義 */
:root {
  --tgk-base-color: #65a427;
  --tgk-shaded-color: color-mix(in srgb, var(--tgk-base-color) 90%, black 10%);
  --tgk-focus-color: 123, 197, 47;
  --tgk-active-color: color-mix(in srgb, var(--tgk-base-color) 80%, black 20%);

  --tgk-sub-color: #caa846;
  --tgk-sub-shaded-color: color-mix(in srgb, var(--tgk-sub-color) 90%, black 10%);
  --tgk-sub-focus-color: 202, 168, 70;
  --tgk-sub-active-color: color-mix(in srgb, var(--tgk-sub-color) 80%, black 20%);

  --tgk-red-color: #d44148;
  --tgk-red-shaded-color: color-mix(in srgb, var(--tgk-red-color) 90%, black 10%);
  --tgk-red-focus-color: 255, 78, 78;
  --tgk-red-active-color: color-mix(in srgb, var(--tgk-red-color) 80%, black 20%);
}

body {
  background-color: #FFFAF3;
}

/* ▼ Bootstrap のカスタマイズ */
.btn-primary {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--tgk-base-color);
  --bs-btn-border-color: var(--tgk-base-color);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--tgk-shaded-color);
  --bs-btn-hover-border-color: var(--tgk-active-color);
  --bs-btn-focus-shadow-rgb: var(--tgk-focus-color);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--tgk-active-color);
  --bs-btn-active-border-color: var(--tgk-shaded-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--tgk-base-color);
  --bs-btn-disabled-border-color: var(--tgk-base-color);
}

.btn-outline-primary {
  --bs-btn-color: var(--tgk-base-color);
  --bs-btn-border-color: var(--tgk-base-color);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--tgk-base-color);
  --bs-btn-hover-border-color: var(--tgk-base-color);
  --bs-btn-focus-shadow-rgb: var(--tgk-focus-color);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--tgk-base-color);
  --bs-btn-active-border-color: var(--tgk-base-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--tgk-base-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--tgk-base-color);
  --bs-gradient: none;
}

.btn-sub-primary {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--tgk-sub-color);
  --bs-btn-border-color: var(--tgk-sub-color);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--tgk-sub-shaded-color);
  --bs-btn-hover-border-color: var(--tgk-sub-active-color);
  --bs-btn-focus-shadow-rgb: var(--tgk-sub-focus-color);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--tgk-sub-active-color);
  --bs-btn-active-border-color: var(--tgk-sub-shaded-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--tgk-sub-color);
  --bs-btn-disabled-border-color: var(--tgk-sub-color);
}

.btn-red-primary {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--tgk-red-color);
  --bs-btn-border-color: var(--tgk-red-color);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--tgk-red-shaded-color);
  --bs-btn-hover-border-color: var(--tgk-red-active-color);
  --bs-btn-focus-shadow-rgb: var(--tgk-red-focus-color);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--tgk-red-active-color);
  --bs-btn-active-border-color: var(--tgk-red-shaded-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--tgk-red-color);
  --bs-btn-disabled-border-color: var(--tgk-red-color);
}

.nav-tabs {
  --bs-nav-tabs-border-width: 2px;
  --bs-nav-tabs-border-color: var(--tgk-base-color);
  --bs-nav-tabs-border-radius: var(--bs-border-radius);
  --bs-nav-tabs-link-hover-border-color: var(--tgk-base-color) var(--tgk-base-color) var(--tgk-base-color);
  --bs-nav-tabs-link-active-color: var(--bs-white);
  --bs-nav-tabs-link-active-bg: var(--tgk-base-color);
  --bs-nav-tabs-link-active-border-color: var(--tgk-base-color) var(--tgk-base-color) var(--tgk-base-color);
  --bs-nav-link-color: var(--tgk-base-color);
  --bs-nav-link-hover-color: var(--tgk-base-color);
}

.nav-tabs .nav-link {
  border: var(--bs-border-width) solid var(--bs-nav-tabs-border-color);
  margin-left: 2px;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  isolation: isolate;
  color: var(--bs-white);
  background-color: var(--tgk-base-color);
  border-color: var(--bs-nav-tabs-link-hover-border-color);
}

.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link:disabled {
  color: var(--bs-nav-link-disabled-color);
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bs-nav-tabs-link-active-color);
  background-color: var(--bs-nav-tabs-link-active-bg);
  border-color: var(--bs-nav-tabs-link-active-border-color);
}

.nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(101, 164, 39, 0.25);
}

.nav-tabs .dropdown-menu {
  --bs-dropdown-bg: #FFFBD9;
  --bs-dropdown-link-hover-color: var(--bs-white);
  --bs-dropdown-link-hover-bg: var(--tgk-base-color);
  --bs-dropdown-link-active-color: var(--bs-white);
  --bs-dropdown-link-active-bg: var(--tgk-base-color);
}

.table-primary {
  --bs-table-color: #FFF;
  --bs-table-bg: #65a427;
  --bs-table-border-color: #65a427;
  --bs-table-striped-bg: #65a427;
  --bs-table-striped-color: #FFF;
  --bs-table-active-bg: #65a427;
  --bs-table-active-color: #FFF;
  --bs-table-hover-bg: #65a427;
  --bs-table-hover-color: #FFF;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.navbar-brand {
  background-color: #f9ed7c;
}

/* ▲ Bootstrap のカスタマイズ */

/* システムタイトルのバックカラー */
.bg-dark2 {
  /*background-color: #f9ed7c;*/
  background-color: #fbf193;
  /*background-color: #fcf5aa;*/
}

/* システムタイトルの文字スタイル */
.pop-text {
  font-family: "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  /* color: #ff6f61; */
  /* 明るいコーラルカラー */
  color: #caa846;
  letter-spacing: 0.05em;
  /* 少し広めで軽やかに */
  position: relative;
  top: 3px;
  /* 好みで調整 */
}

.table-pink {
  background-color: #f8d7da;
  /* Bootstrapのalert-dangerに近い薄いピンク */
}

span.more-notice,
div.more-notice{
	color: #d48806;
	font-size: 1.2rem;
	border:solid;
	border-radius:5px;
	padding: 0.25rem;
}