/* =========================
   salt color (Bootstrap 5.3)
   ========================= */
@charset "utf-8";

/* ---- Theme tokens ---- */
:root{
  --thema_color: #474787;        /* salt 基本色 (インディゴ寄り) */
  --thema_color-600: #3d3d78;
  --thema_color-700: #343468;

  --link_color: #5865f2;         /* 海系の青紫リンク */
  --link_visited_color:#4a53c8;
  --ring: rgba(88,101,242,.45);  /* フォーカスリング */

  /* Footer は必要になったら使う */
  --footer-grad-1:#0f141a;
  --footer-grad-2:#1b2230;
  --footer-grad-3:#2a3450;
  --footer-link:#a9b7ff;
  --footer-link-hover:#fff;
}

@media (prefers-color-scheme: dark){
  :root{
    --link_color:#aab3ff;
    --link_visited_color:#8e98ff;
    --footer-link:#c7d0ff;
  }
}

/* ---- Focus ring (B5.3) ---- */
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible{
  box-shadow:0 0 0 .25rem var(--ring);
}

/* =========================
   Header（立体感のある斜めグラデ）
   ========================= */
.head_bg_color{
  position: relative;
  background: linear-gradient(
    to bottom right,
    rgba(71,71,135,0.95) 0%,  /* 上: 濃いインディゴ */
    #6a5acd 50%,              /* 中: スレートブルーでハイライト */
    var(--thema_color) 100%   /* 下: ブランドカラーに着地 */
  );
  color:#fff;
}
/* 細いアクセントライン（上端） */
.head_bg_color::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:1px;
  background: #231B59;
  opacity:.45; pointer-events:none;
}
/* 余白調整 */
.head_bg_color .row{ padding-top:8px; padding-bottom:8px; }

/* サイトタブ */
span.site_menu_salt{ background-color:var(--thema_color); }
span.site_menu_salt a{ color:#fff !important; }

/* =========================
   Buttons / Links
   ========================= */
a:link,
a.list-group-item{ color:var(--link_color); }
a:visited{ color:var(--link_visited_color); }

a.btn.btn-primary,
a.btn.btn-danger,
#page-top > a:link{
  color:#fff !important;
}

/* サブカテゴリの salt ボタン */
#sub_category_buttons .btn-salt{
  color:#fff;
  background-color: var(--thema_color);
  border-color: var(--thema_color-600);
}
#sub_category_buttons .btn-salt:hover{
  background-color: var(--thema_color-600);
  border-color: var(--thema_color-700);
}

/* ページトップボタン（色合わせ） */
#page-top > a.btn,
#page-top > a.btn.btn-primary{
  background-color: var(--thema_color) !important;
  border-color: var(--thema_color-600);
  color:#fff;
}

/* 画像ユーティリティ（既存維持） */
.upload400{ max-width:100%; }

/* =========================
   ダークモード
   ========================= */
@media (prefers-color-scheme: dark){
  .head_bg_color{
    background: linear-gradient(
      to bottom right,
      #2f355e 0%,
      #434b7e 45%,
      #2f355e 100%
    );
    color:#fff;
  }

  /* Material 近似トーン（既存踏襲） */
  .badge-warning,.btn-warning{
    background-color:#9E9D24; border-color:#827717; color:#fff;
  }
  .badge-primary,.btn-primary{
    background-color:#1565C0; border-color:#0D47A1; color:#fff;
  }
  .badge-success,.btn-success{
    background-color:#2E7D32; border-color:#1B5E20; color:#fff;
  }
  .badge-danger,.btn-danger{
    background-color:#C62828; border-color:#B71C1C; color:#fff;
  }

  a{ color:#aab3ff; }
}

/* =========================
   追加ユーティリティ（必要なら）
   ========================= */
/* ページネーションを軽く塩味（任意） */
.pagination .page-item.active .page-link{
  background-color: var(--thema_color);
  border-color: var(--thema_color-600);
  color:#fff;
}
.pagination .page-link{
  color: var(--thema_color);
  border-color: rgba(71,71,135,.25);
}
.pagination .page-link:hover{
  color:#343468;
  border-color: rgba(71,71,135,.4);
}