:root {
  --white: #fff;
  --sky-blue-650: #00a9bf;
  --sky-blue-600: #00bcd4;
  --sky-blue-200: #99e4ee;
  --sky-blue-50: #e6f8fb;
  --red-100: #fcd8d5;
  --gray-600: #4d6269;
  --gray-400: #8e9b9f;
  --gray-300: #afb7ba;
  --gray-150: #e0e2e3;
  --gray-50: #f9f9f9;
}

#redoc-container, #redoc-container * {
  font-family: 'Noto Sans JP', sans-serif !important;
}

#redoc-container code, #redoc-container pre, #redoc-container pre *,
#redoc-container kbd, #redoc-container samp {
  font-family: SFMono-Regular, Consolas, monospace !important;
  line-height: 1.5 !important;
}
html,
body {
  background-color: var(--white);
}

/* 見出し・本文 */
#redoc-container h1, #redoc-container h2, #redoc-container h3,
#redoc-container h4, #redoc-container h5, #redoc-container h6 {
  font-weight: 700 !important;
}

#redoc-container h1 {
  font-size: 40px !important;
  line-height: 1.5 !important;
}

#redoc-container h2 {
  font-size: 24px !important;
  line-height: 1.5 !important;
}

#redoc-container h5 {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

#redoc-container p, #redoc-container li, #redoc-container td {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

#redoc-container .sc-gFAWRd, #redoc-container .sc-cfxfcM, #redoc-container .sc-fxwrCY {
  font-size: 12px !important;
}

#redoc-container .sc-gFAWRd {
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--gray-600) !important;
}
#redoc-container .sc-dAlyuH {
  color: var(--gray-600) !important;
}
#redoc-container .sc-fxwrCY {
  color: #017180 !important;
}
#redoc-container .sc-fjvvzt {
  color: rgb(255 255 255 / 90%) !important;
}
.sc-cWSHoV {
  color: var(--gray-600) !important;
}

/* タグ見出しとエンドポイント見出しで説明文との間隔がズレる不具合の補正 */
#redoc-container .XMnSL,
#redoc-container .fepPBW {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
#redoc-container .wnFnm p {
  margin-top: 0 !important;
}

/* コードブロックのシンタックスカラー */
#redoc-container .token.property,
#redoc-container .token.number {
  color: var(--sky-blue-200) !important;
}
#redoc-container .token.boolean {
  color: var(--red-100) !important;
}

/* Authorizations / タブの余計な枠を消す */
.react-tabs__tab-list .tab-success, .react-tabs__tab-list .tab-error {
  border: none !important;
  transition: background-color 0.15s ease;
}

/* Response samples タブ: 非選択タブだけホバーで薄い白を乗せる */
.react-tabs__tab-list .tab-success:not(.react-tabs__tab--selected):hover,
.react-tabs__tab-list .tab-error:not(.react-tabs__tab--selected):hover {
  cursor: pointer;
  background-color: rgb(255 255 255 / 15%) !important;
}

.sc-iMTnTL {
  cursor: pointer;
}

.sc-iMTnTL h5 {
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sc-iMTnTL svg {
  border-radius: 4px;
  fill: var(--gray-600) !important;
  transition: background-color 0.15s ease, fill 0.15s ease;
}

/* AUTHORIZATIONS: ラベルのホバー。#redoc-container を付けて .sc-dAlyuH の色指定に負けないようにする */
#redoc-container .sc-iMTnTL:hover h5 {
  color: var(--sky-blue-600) !important;
  background-color: var(--gray-50) !important;
}

#redoc-container .sc-iMTnTL:hover svg {
  background-color: var(--gray-50) !important;
  fill: var(--sky-blue-600) !important;
}

/* 検索ボックス */
#redoc-container .sc-iapWAC {
  position: relative !important;
  box-sizing: border-box !important;
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  width: auto !important;
  height: 48px !important;
  padding: 12px 16px !important;
  margin: 0 16px !important;
  background-color: var(--white) !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: 8px !important;
  transition: border-color 0.15s ease;
}
#redoc-container .sc-iapWAC:focus-within {
  border: 2px solid var(--sky-blue-600) !important;
}
#redoc-container .sc-iapWAC svg {
  display: none !important;
}
/* 検索候補内のメソッドバッジは非表示 */
#redoc-container .sc-iapWAC .operation-type {
  display: none !important;
}
#redoc-container .sc-iapWAC .sc-kRRyDe {
  right: 22px !important;
  width: auto !important;
  height: 28px !important;
  font-size: 22px !important;
  line-height: 28px !important;
  color: var(--gray-600) !important;
  cursor: pointer;
}

/* ReDoc純正の検索結果パネルは無効化 */
#redoc-container .sc-iapWAC > .sc-dtBdUo,
#redoc-container .sc-iapWAC > .sc-gvZAcH {
  display: none !important;
}
#redoc-container .sc-iapWAC::before {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS4wMjgyNiAxMC44NzQ4QzUuMDI4MjYgNy42MTI5NiA3Ljc1MjUgNC45Njg3IDExLjExMyA0Ljk2ODdDMTQuNDczNiA0Ljk2ODcgMTcuMTk3OCA3LjYxMjk2IDE3LjE5NzggMTAuODc0OEMxNy4xOTc4IDE0LjEzNjcgMTQuNDczNiAxNi43ODA5IDExLjExMyAxNi43ODA5QzcuNzUyNSAxNi43ODA5IDUuMDI4MjYgMTQuMTM2NyA1LjAyODI2IDEwLjg3NDhaTTExLjExMyAzQzYuNjMyMzMgMyAzIDYuNTI1NjcgMyAxMC44NzQ4QzMgMTUuMjIzOSA2LjYzMjMzIDE4Ljc0OTYgMTEuMTEzIDE4Ljc0OTZDMTIuODY2OSAxOC43NDk2IDE0LjQ5MDcgMTguMjA5NSAxNS44MTc2IDE3LjI5MTJMMTkuMjYxMyAyMC43MDQ0QzE5LjY1MzIgMjEuMDkyOCAyMC4yOTUzIDIxLjA5OTMgMjAuNjk1NCAyMC43MTg5QzIxLjA5NTYgMjAuMzM4NiAyMS4xMDIzIDE5LjcxNTMgMjAuNzEwNCAxOS4zMjY5TDE3LjMxMDUgMTUuOTU3MUMxOC41MDU2IDE0LjU4NTUgMTkuMjI2MSAxMi44MTE4IDE5LjIyNjEgMTAuODc0OEMxOS4yMjYxIDYuNTI1NjcgMTUuNTkzNyAzIDExLjExMyAzWiIgZmlsbD0iIzRENjI2OSIvPgo8L3N2Zz4K");
  background-repeat: no-repeat;
  background-size: contain;
}

#redoc-container .search-input {
  padding: 0 !important;
  margin-left: 0 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--gray-600) !important;
  background: transparent !important;
  border: none !important;
}

/* 検索ナビゲーター（1/N ＋ ▲▼） */
#formrun-search-nav {
  position: fixed;
  z-index: 30;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(51 65 71 / 15%);
}

#formrun-search-nav-count {
  font-size: 14px;
  color: var(--gray-600);
}

#formrun-search-nav-buttons {
  display: flex;
  gap: 4px;
}

#formrun-search-nav-prev,
#formrun-search-nav-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 12px;
  color: var(--gray-600);
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  transition: background-color 0.15s ease;
}
#formrun-search-nav-prev:hover,
#formrun-search-nav-next:hover {
  background-color: var(--gray-50);
}

#formrun-search-nav-prev:disabled,
#formrun-search-nav-next:disabled {
  cursor: default;
  opacity: 0.4;
}

/* サイドバー */
#redoc-container .sc-eyvILC {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  min-height: 60px !important;
  padding: 8px 16px !important;
  background-color: var(--white) !important;
  border-bottom: 1px solid var(--gray-150) !important;
  transition: background-color 0.15s ease;
}
#redoc-container .sc-eyvILC.-depth2 {
  padding-left: 24px !important;
}
#redoc-container .sc-eyvILC:hover {
  background-color: var(--gray-50) !important;
}
#redoc-container .sc-eyvILC.active {
  background-color: var(--sky-blue-50) !important;
}
#redoc-container .sc-eyvILC.active > span:last-child {
  color: var(--gray-600) !important;
}

#redoc-container .sc-eyvILC svg {
  width: 20px !important;
  height: 20px !important;
  fill: var(--gray-600) !important;
}

/* タグ見出しとエンドポイント名でReDoc純正のまま使うとフォントサイズが微妙に異なるため統一。
   項目名が長い場合は2行までに折り返し、それ以降は省略記号 */
#redoc-container .sc-gfoqjT {
  display: -webkit-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: 2 !important;
  font-size: 14px !important;
  -webkit-box-orient: vertical !important;
}

/* 省略された項目名にホバーした時のツールチップ（formrun Master Badgeの HoverGuide 準拠） */
#formrun-tooltip {
  position: fixed;
  z-index: 40;
  display: none;
  max-width: 240px;
  padding: 2px 8px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--white);
  overflow-wrap: anywhere;
  pointer-events: none;
  background-color: var(--gray-400);
  border-radius: 4px;
}

#redoc-container .menu-content {
  box-sizing: border-box !important;
  padding-top: 84px !important;
  background-color: var(--white) !important;
}

/* バッジ */
#redoc-container .operation-type {
  display: inline-block !important;
  height: auto !important;
  min-height: auto !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* Responses アコーディオンボタン */
.sc-kzqdkY:focus,
.sc-kzqdkY:focus-visible,
.sc-kzqdkY:active {
  outline: none !important;
  box-shadow: none !important;
}

#redoc-container .sc-kzqdkY {
  display: flex !important;
  align-items: center !important;
  padding: 8px !important;
  box-shadow: 0 1px 3px rgb(51 65 71 / 15%) !important;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

#redoc-container .sc-kzqdkY:hover {
  cursor: pointer;
  box-shadow: 0 2px 6px rgb(51 65 71 / 22%) !important;
}

/* コピー/展開/折りたたみボタン */
.sc-koXPp button {
  padding: 4px 8px !important;
  margin-right: 8px !important;
  background-color: rgb(255 255 255 / 8%) !important;
  border: 1px solid rgb(255 255 255 / 30%) !important;
  border-radius: 4px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sc-koXPp button:last-child {
  margin-right: 0 !important;
}

.sc-koXPp button:hover {
  background-color: rgb(255 255 255 / 20%) !important;
  border-color: rgb(255 255 255 / 60%) !important;
}

/* ダウンロードボタン */
a[download] {
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  background-color: var(--sky-blue-600) !important;
  border: none !important;
  border-radius: 8px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a[download]:hover {
  cursor: pointer;
  background-color: var(--sky-blue-650) !important;
}

/* テーブル */
table td,
table th {
  padding: 8px 8px 8px 0 !important;
}

/* ロゴ（h1内に埋め込む場合の予備。実際はJSでdocument.bodyに追加する。） */
h1 .formrunLogo {
  margin-right: 8px;
  vertical-align: middle;
}