:root {
  --amane-teal: #2a9d8f;
  --amane-teal-dark: #1d6d63;
  --amane-lime: #c9d64b;
  --amane-brown: #4a3f35;
  --amane-nari: #f7f4ee;
}

/* ===== Bootstrap の primary（青）をブランドのティールに揃える =====
   Bootstrap の本体（CDN の bootstrap.min.css）は変えず、CSS 変数を上書きする。
   白い文字を載せる塗りは濃いティール #1d6d63（白との差 6.1:1）。
   明るいティール #2a9d8f は白との差が 3.3:1 で、文字を載せるには足りないので、フォーカスの枠と影にだけ使う。 */
:root {
  --bs-primary: #1d6d63;
  --bs-primary-rgb: 29, 109, 99;
  --bs-primary-text-emphasis: #0c2c28;
  --bs-primary-bg-subtle: #d2e2e0;
  --bs-primary-border-subtle: #a5c5c1;
  --bs-link-color: #1d6d63;
  --bs-link-color-rgb: 29, 109, 99;
  --bs-focus-ring-color: rgba(42, 157, 143, .25);
}
/* ボタンは、クラスごとに Bootstrap が色を直に書いているため、ボタンの変数を上書きする */
.btn-primary {
  --bs-btn-bg: #1d6d63;
  --bs-btn-border-color: #1d6d63;
  --bs-btn-hover-bg: #165a52;
  --bs-btn-hover-border-color: #165a52;
  --bs-btn-focus-shadow-rgb: 42, 157, 143;
  --bs-btn-active-bg: #124a44;
  --bs-btn-active-border-color: #124a44;
  --bs-btn-disabled-bg: #1d6d63;
  --bs-btn-disabled-border-color: #1d6d63;
}
.btn-outline-primary {
  --bs-btn-color: #1d6d63;
  --bs-btn-border-color: #1d6d63;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1d6d63;
  --bs-btn-hover-border-color: #1d6d63;
  --bs-btn-focus-shadow-rgb: 42, 157, 143;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #165a52;
  --bs-btn-active-border-color: #165a52;
  --bs-btn-disabled-color: #1d6d63;
  --bs-btn-disabled-border-color: #1d6d63;
}
/* フォームのフォーカス（Bootstrap は青を直に書いている） */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--amane-teal);
  box-shadow: 0 0 0 .25rem rgba(42, 157, 143, .25);
}
.form-check-input:checked {
  background-color: #1d6d63;
  border-color: #1d6d63;
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: #1d6d63;
}

body {
  font-family: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

a {
  color: var(--amane-teal-dark);
}
a:hover {
  color: var(--amane-teal);
}

code, pre, kbd, samp {
  font-family: monospace;
}

/* ===== ヘッダー（アースカラー：淡いベージュ＋ティール） ===== */
.site-header .navbar {
  background-color: #efe9df !important;
  border-bottom: 3px solid var(--amane-teal);
  box-shadow: none;
}
.site-header .navbar-brand {
  color: var(--amane-teal-dark);
}
.site-header .navbar-brand .fw-bold {
  color: var(--amane-teal-dark);
}
.site-header .text-primary {
  color: var(--amane-teal-dark) !important;
}
.site-header .navbar-nav .nav-link {
  color: var(--amane-brown);
  white-space: nowrap; /* 日英併記の名前を途中で折り返さない */
}
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus,
.site-header .navbar-nav .nav-link.active {
  color: var(--amane-teal-dark);
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
  background-color: #efe9df;
  color: var(--amane-teal-dark);
}

/* ===== ヘッダーの検索欄（common/search-form.phtml） =====
   ボタンとフォーカスの色は、上の primary の上書きに揃えている */
.site-header .header-search .form-control {
  min-width: 0;
  background-color: #fff;
  border-color: #cfc5b5;
}
.site-header .header-search .form-control:focus {
  border-color: var(--amane-teal); /* 上の #cfc5b5 のほうが詳細度が高いので、ここでも指定する */
}
.site-header .header-search .btn-outline-primary {
  flex-shrink: 0;
}
/* メニューは 1200px 未満で折りたたむ（header.phtml の navbar-expand-xl）。
   横に並ぶとき（xl 以上）は幅を決める。折りたたみ時はメニューの下に全幅。
   1200〜1399px（中身の幅 1116px）は、ロゴ約210px・メニュー約690px・検索欄約185px で1行に収めるため、
   メニューの左右の余白と文字、検索欄を少し詰める。検索欄は足りなければ 8rem まで縮む */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-header .navbar { --bs-navbar-nav-link-padding-x: .35rem; }
  .site-header .navbar-nav .nav-link { font-size: .95rem; }
  .site-header .header-search { flex: 0 1 11rem; min-width: 8rem; }
}
@media (min-width: 1400px) {
  .site-header .header-search { flex: 0 0 16rem; }
}
@media (max-width: 1199.98px) {
  .site-header .header-search { width: 100%; padding-bottom: .5rem; }
}

/* ===== フッター（アースカラー：こげ茶＋ティール） ===== */
.site-footer {
  background-color: #3a2f28 !important;
  border-top: 3px solid var(--amane-teal);
}
.site-footer .text-white-50 {
  color: #cabfb0 !important;
}
.site-footer a {
  color: #e8e0d4;
}
.site-footer a:hover {
  color: #ffffff;
}
.site-footer .border-secondary {
  border-color: rgba(255,255,255,.15) !important;
}

/* ===== ヘッダーロゴ画像の高さ制御 ===== */
.site-header .navbar-brand img {
  height: 40px;
  max-height: 40px;
  width: auto;
}

/* ===== 資料のページの埋め込みのビューア（IiifViewers の iframe、class="amane-iiif-viewer"）の高さ =====
   今までの 600px の 1.5 倍（900px）。ただし、パソコンでは画面の高さの 90%、幅の狭い画面（Bootstrap の md 未満）では 80% を超えない。
   svh はアドレスバーが出ている状態の高さ（Safari 15.4・Chrome 108 から）。知らないブラウザでは 2 つ目が無視され、vh の指定が使われる。
   min() を知らない古いブラウザでは、iframe の height="900" の属性が使われる。 */
.amane-iiif-viewer {
  height: min(900px, 90vh);
  height: min(900px, 90svh);
}
@media (max-width: 767.98px) {
  .amane-iiif-viewer {
    height: min(900px, 80vh);
    height: min(900px, 80svh);
  }
}