/*
 * SlideHub カスタム CSS: Ryuzee.com (https://www.ryuzee.com) 風（公開ページ刷新後のデザイン用）
 * 管理画面 > カスタムコンテンツ > CSS に貼り付けて使う。テーマは default を想定。
 *
 * 刷新後のデザインは色や角丸を CSS 変数（--sh-*）で決めているので、主にその値を Ryuzee.com に合わせる。
 *   - ヘッダーは濃いグレー (#333) にロゴ画像、メニューは Poppins 13px 太字・字間 1px、ホバーはミント (#1ABC9C)
 *   - 背景 #F2F6FB / 文字 #0B1220 / 主色 #3098D0 / リンク #287FB0
 *   - 角丸なし、ボタンはピル型、フッターは青い帯 (#2A7FA8)
 */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap");

/* ---------- 色・文字・角丸 ---------- */
.slidehub_body {
  --rz-blue-deep: #2870A8;
  --rz-blue: #3098D0;
  --rz-blue-band: #2A7FA8;
  --rz-header: #333333;
  --rz-header-link: #F7F7F7;
  --rz-mint: #1ABC9C;
  --rz-link: #287FB0;
  --rz-link-hover: #1F6791;
  --rz-font-nav: Poppins, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;

  --sh-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sh-desk: #F2F6FB;
  --sh-paper: #FFFFFF;
  --sh-ink: #0B1220;
  --sh-muted: #556176;
  --sh-rule: #E6EAF0;
  --sh-stage: #0B1220;
  --sh-stage-ink: #F2F6FB;
  --sh-stage-muted: #9EABBF;
  --sh-accent: var(--rz-blue);
  --sh-radius: 0;
  --sh-sheet-shadow: 0 10px 28px rgba(11, 18, 32, .08);

  --bs-primary: var(--rz-blue);
  --bs-primary-rgb: 48, 152, 208;
  --bs-link-color: var(--rz-link);
  --bs-link-color-rgb: 40, 127, 176;
  --bs-link-hover-color: var(--rz-link-hover);
  --bs-link-hover-color-rgb: 31, 103, 145;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
}

[data-bs-theme="dark"] .slidehub_body {
  --sh-desk: #0E1420;
  --sh-paper: #151D2B;
  --sh-ink: #E8EDF5;
  --sh-muted: #9EABBF;
  --sh-rule: #253044;
  --sh-stage: #070B12;
  --sh-sheet-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  --bs-link-color: #6BB8E3;
  --bs-link-color-rgb: 107, 184, 227;
  --bs-link-hover-color: #8FCBEC;
  --bs-link-hover-color-rgb: 143, 203, 236;
}

/* ---------- ヘッダー ---------- */
/* Ryuzee.com と同じく高さ 60px。ロゴ | 区切り線 | メニュー */
.slidehub_body .site-header {
  --bs-navbar-color: var(--rz-header-link);
  --bs-navbar-hover-color: var(--rz-mint);
  --bs-navbar-active-color: var(--rz-mint);
  --bs-navbar-brand-color: #FFFFFF;
  --bs-navbar-brand-hover-color: #FFFFFF;
  --bs-navbar-padding-y: 0;
  background: var(--rz-header);
  backdrop-filter: none;
  border-bottom: 0;
  min-height: 60px;
}

/* サイト名の文字の代わりに Ryuzee.com のロゴ画像を出す（文字は読み上げ用に残す） */
.slidehub_body .site-header .navbar-brand {
  display: block;
  width: 75px;
  height: 60px;
  margin: 0;
  padding: 0;
  background: url("https://www.ryuzee.com/images/logo-dark@2x.webp") no-repeat left center / 75px 60px;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

.slidehub_body .site-header .nav-link {
  font-family: var(--rz-font-nav);
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 1px;
}

@media (min-width: 992px) {
  .slidehub_body .site-header .navbar-brand {
    box-sizing: content-box;
    padding-right: 30px;
    margin-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .08);
  }

  .slidehub_body .site-header .navbar-nav .nav-link {
    padding: 19px 15px;
  }

  /* 今いる場所は、下線ではなくミントの文字色で示す */
  .slidehub_body .site-header .navbar-nav .nav-link.active {
    box-shadow: none;
  }
}

.slidehub_body .site-header .nav-link:hover,
.slidehub_body .site-header .nav-link:focus,
.slidehub_body .site-header .nav-link.active,
.slidehub_body .site-header .nav-link.show {
  color: var(--rz-mint);
}

.slidehub_body .site-header .site-search .form-control {
  background: rgba(255, 255, 255, .08);
  color: #FFFFFF;
}

.slidehub_body .site-header .site-search .form-control::placeholder {
  color: rgba(255, 255, 255, .55);
}

.slidehub_body .site-header .site-search .form-control:focus {
  background: rgba(255, 255, 255, .14);
  border-color: var(--rz-mint);
}

.slidehub_body .site-header .site-search-icon,
.slidehub_body .site-header .site-icon-button,
.slidehub_body .site-header .site-signin-button {
  color: var(--rz-header-link);
}

.slidehub_body .site-header .site-icon-button:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--rz-mint);
}

.slidehub_body .site-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28247, 247, 247, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.slidehub_body .dropdown-menu {
  border-radius: 0;
  box-shadow: 0 10px 28px rgba(11, 18, 32, .08);
}

.slidehub_body .dropdown-item:hover,
.slidehub_body .dropdown-item:focus {
  color: var(--rz-blue);
}

/* ---------- 見出し ---------- */
/* セクション見出しの下線を、左だけ主色にする */
.slidehub_body .sh-section-head {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--sh-rule);
  background: linear-gradient(var(--rz-blue), var(--rz-blue)) no-repeat left bottom / 48px 3px;
}

/* ---------- ボタン ---------- */
.slidehub_body .btn {
  border-radius: 999px;
  font-weight: 600;
}

.slidehub_body .btn-primary {
  --bs-btn-bg: var(--rz-blue);
  --bs-btn-border-color: var(--rz-blue);
  --bs-btn-hover-bg: var(--rz-blue-deep);
  --bs-btn-hover-border-color: var(--rz-blue-deep);
  --bs-btn-active-bg: var(--rz-blue-deep);
  --bs-btn-active-border-color: var(--rz-blue-deep);
  --bs-btn-disabled-bg: var(--rz-blue);
  --bs-btn-disabled-border-color: var(--rz-blue);
  box-shadow: 0 14px 30px rgba(48, 152, 208, .22);
}

/* ヘッダーのアップロードボタンも主色にする（「ヘッダー反転」の設定がオンでも） */
.slidehub_body .site-header .site-upload-button {
  --bs-btn-bg: var(--rz-blue);
  --bs-btn-border-color: var(--rz-blue);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: var(--rz-blue-deep);
  --bs-btn-hover-border-color: var(--rz-blue-deep);
  --bs-btn-hover-color: #FFFFFF;
  box-shadow: none;
}

.slidehub_body .form-control,
.slidehub_body .form-select,
.slidehub_body .input-group-text {
  border-radius: 0;
}

.slidehub_body .site-header .site-search .form-control {
  border-radius: 999px;
}

.slidehub_body .form-control:focus,
.slidehub_body .form-select:focus {
  border-color: var(--rz-blue);
  box-shadow: 0 0 0 .2rem rgba(48, 152, 208, .2);
}

/* ---------- フッター ---------- */
.slidehub_body .custom-footer {
  background: var(--rz-blue-band);
  border-top: 0;
  color: rgba(255, 255, 255, .85);
}

.slidehub_body .custom-footer .site-footer-brand .fw-bold,
.slidehub_body .custom-footer a,
.slidehub_body .custom-footer .site-footer-links a {
  color: #FFFFFF;
}

.slidehub_body .custom-footer a {
  font-weight: 600;
}