/*
 * SlideHub カスタム CSS: 株式会社アトラクタ (https://www.attractor.co.jp) 風（公開ページ刷新後のデザイン用）
 * 管理画面 > カスタムコンテンツ > CSS に貼り付けて使う。テーマは default を想定。
 *
 * 刷新後のデザインは色や角丸を CSS 変数（--sh-*）で決めているので、主にその値をアトラクタに合わせる。
 *   - 生成り色の背景 (#FAFAF7)、暖色寄りの黒 (#141210)、ベージュの罫線 (#E6E0D8)
 *   - アクセントはオレンジ (#E8621A / ボタン #F0591B)
 *   - 見出しは明朝 (Shippori Mincho)、メニューとボタンは DM Sans
 *   - ヘッダーは半透明の生成り + 下罫線、フッターはほぼ黒 (#0E0C0A)
 *   - セクション見出しの上に、オレンジの短い罫線
 */
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap");

/* ---------- 色・文字・角丸 ---------- */
.slidehub_body {
  --at-or: #E8621A;
  --at-or2: #F28040;
  --at-btn-or: #F0591B;
  --at-btn-or-hover: #D84E15;
  --at-orb: #FEF4EE;
  --at-footer: #0E0C0A;
  --at-font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif;
  --at-font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --sh-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  --sh-desk: #FAFAF7;
  --sh-paper: #FFFFFF;
  --sh-ink: #141210;
  --sh-muted: #8A8178;
  --sh-rule: #E6E0D8;
  --sh-stage: #1A1714;
  --sh-stage-ink: #F5F1EA;
  --sh-stage-muted: #A89F94;
  --sh-stage-rule: rgba(245, 241, 234, .12);
  --sh-accent: var(--at-or);
  --sh-radius: 4px;
  --sh-sheet-shadow: 0 1px 2px rgba(20, 18, 16, .06), 0 6px 18px rgba(20, 18, 16, .06);

  --bs-primary: var(--at-or);
  --bs-primary-rgb: 232, 98, 26;
  --bs-link-color: var(--at-or);
  --bs-link-color-rgb: 232, 98, 26;
  --bs-link-hover-color: var(--at-btn-or-hover);
  --bs-link-hover-color-rgb: 216, 78, 21;
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 4px;
}

[data-bs-theme="dark"] .slidehub_body {
  --sh-desk: #141210;
  --sh-paper: #1E1B18;
  --sh-ink: #F0EBE3;
  --sh-muted: #A89F94;
  --sh-rule: #332E29;
  --sh-stage: #0B0908;
  --sh-sheet-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3);
  --at-orb: #2A1A10;
  --bs-link-color: var(--at-or2);
  --bs-link-color-rgb: 242, 128, 64;
}

/* 見出しは明朝 */
.slidehub_body h1, .slidehub_body h2, .slidehub_body h3,
.slidehub_body .h1, .slidehub_body .h2, .slidehub_body .h3,
.slidehub_body .sh-hero-title,
.slidehub_body .sh-slide-title {
  font-family: var(--at-font-serif);
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---------- ヘッダー ---------- */
/* 半透明の生成り + 下罫線。「ヘッダー反転」の設定がオンでも生成りにする */
.slidehub_body .site-header {
  --bs-navbar-color: #3C3830;
  --bs-navbar-hover-color: var(--at-or);
  --bs-navbar-active-color: var(--at-or);
  --bs-navbar-brand-color: var(--sh-ink);
  --bs-navbar-brand-hover-color: var(--sh-ink);
  background: color-mix(in srgb, var(--sh-desk) 88%, transparent);
  border-bottom: 1px solid var(--sh-rule);
  min-height: 64px;
}

[data-bs-theme="dark"] .slidehub_body .site-header {
  --bs-navbar-color: #D6CFC5;
}

.slidehub_body .site-header .navbar-brand {
  font-family: var(--at-font-display);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: .01em;
}

.slidehub_body .site-header .nav-link {
  font-family: var(--at-font-display);
  font-size: .93rem;
  font-weight: 400;
}

.slidehub_body .site-header .navbar-nav .nav-link.active {
  box-shadow: none;
  color: var(--at-or);
}

.slidehub_body .site-header .site-search .form-control {
  background: var(--sh-paper);
  border-color: var(--sh-rule);
}

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

.slidehub_body .site-header .site-icon-button:hover {
  background: var(--at-orb);
  color: var(--at-or);
}

.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%2860, 56, 48, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .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%28240, 235, 227, 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 {
  box-shadow: 0 8px 24px rgba(20, 18, 16, .08);
}

.slidehub_body .dropdown-item:hover,
.slidehub_body .dropdown-item:focus {
  background: var(--at-orb);
  color: var(--at-or);
}

/* ---------- 見出し ---------- */
/* セクション見出しの上に、オレンジの短い罫線を付ける。下の罫線は消す */
.slidehub_body .sh-section-head {
  position: relative;
  border-bottom: 0;
  padding-top: .9rem;
  padding-bottom: 0;
}

.slidehub_body .sh-section-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--at-or);
}

.slidehub_body .sh-section-head h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.slidehub_body .sh-section-head a {
  font-family: var(--at-font-display);
  color: #3C3830;
}

[data-bs-theme="dark"] .slidehub_body .sh-section-head a {
  color: var(--sh-muted);
}

.slidehub_body .sh-section-head a::after {
  content: " ›";
  color: var(--at-or);
}

.slidehub_body .sh-section-head a:hover {
  color: var(--at-or);
}

/* ---------- ボタン・タグ ---------- */
.slidehub_body .btn {
  font-family: var(--at-font-display);
  font-weight: 500;
}

.slidehub_body .btn-primary,
.slidehub_body .site-header .site-upload-button {
  --bs-btn-bg: var(--at-btn-or);
  --bs-btn-border-color: var(--at-btn-or);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: var(--at-btn-or-hover);
  --bs-btn-hover-border-color: var(--at-btn-or-hover);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-bg: var(--at-btn-or-hover);
  --bs-btn-active-border-color: var(--at-btn-or-hover);
  --bs-btn-disabled-bg: var(--at-btn-or);
  --bs-btn-disabled-border-color: var(--at-btn-or);
}

/* お知らせ一覧のラベルのように、枠線付きのオレンジ文字にする */
.slidehub_body .sh-tag:hover {
  background: var(--at-orb);
  border-color: var(--at-or2);
  color: var(--at-or);
}

.slidehub_body .sh-tag.active {
  background: var(--at-or);
  border-color: var(--at-or);
  color: #FFFFFF;
}

.slidehub_body .pagination {
  --bs-pagination-hover-color: var(--at-or);
  --bs-pagination-hover-bg: var(--at-orb);
  --bs-pagination-active-bg: var(--at-btn-or);
  --bs-pagination-active-border-color: var(--at-btn-or);
  --bs-pagination-active-color: #FFFFFF;
}

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

.slidehub_body .custom-footer .site-footer-brand .fw-bold {
  color: #FFFFFF;
  font-family: var(--at-font-display);
  font-weight: 500;
}

.slidehub_body .custom-footer a,
.slidehub_body .custom-footer .site-footer-links a {
  color: #CCCCCC;
}

.slidehub_body .custom-footer a:hover,
.slidehub_body .custom-footer .site-footer-links a:hover {
  color: var(--at-or2);
}