@charset "UTF-8";

/*//////////////////////////////////////////////////////////////////////////////

styles.css

--------------------------------------------------------------------------------

//////////////////////////////////////////////////////////////////////////////*/

/*
 * サイトで共通のスタイルを定義します
 * ========================================================================== */
body {
  height: 100% !important;
  color: #2d2d2d;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  background-color: #f8fff8;
}

/* 見出しのスタイル */
h1,
h2,
h3,
h4,
h5 {
  font-family: "Dosis", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
}

/*ボタン*/
.btn.btn-brown {
  color: #fff;
  background-color: #8B4513;
  border-color: #8B4513;
}
.btn.btn-brown:hover,
.btn.btn-brown:focus {
  background-color: #A0522D;
  border-color: #A0522D;
}

/* btnの下線を消す */
.btn {
  text-decoration: none !important;
}
.btn:hover {
  text-decoration: none !important;
}

/* ==========================================================================
   disabled ボタンの見た目調整
   ========================================================================== */

/* 共通：disabled な btn を薄くする */
.btn:disabled,
.btn.disabled {
  opacity: 0.45;              /* 薄さ（0.4〜0.6で好み調整） */
  cursor: not-allowed;        /* 押せない感 */
  pointer-events: none;       /* クリック不可を保証（tooltipはspan側で拾う） */
  box-shadow: none;
}

/* hover / focus 時も見た目を変えない */
.btn:disabled:hover,
.btn.disabled:hover,
.btn:disabled:focus,
.btn.disabled:focus {
  opacity: 0.45;
  background-color: inherit;
  border-color: inherit;
}

/* tooltip 用ラップ内でも安全に */
.d-inline-block > .btn:disabled {
  pointer-events: none;
}

/************************************************************
問題編集、詳細画面、フォームのラベル
*==============================================================
/* 共通：セクションの見出しバー */
.section-label {
  padding: .4rem .75rem;
  font-weight: 700;
  font-size: .9rem;
  border-radius: .5rem .5rem 0 0;
  color: #fff;
  display: flex;
  align-items: center;
}

/* 直後のフォーム要素との隙間を少し詰める */
.section-label + .form-control,
.section-label + .form-select,
.section-label + textarea,
.section-label + .mt-2,
.section-label + div {
  margin-top: .35rem;
}

/* 科目名：落ち着いたブルー */
.section-label-subject {
  background: #0d6efd; /* Bootstrap primary に近い青 */
}

/* テーマ：少し紫寄りで、重要感を出す */
.section-label-theme {
  background: #6f42c1; /* BS purple 系 */
}

/* 問題：注意を引く赤系 */
.section-label-question {
  background: #d63384; /* red/pink 中間くらい */
}

/* 図版/写真：情報っぽいシアン寄り */
.section-label-info {
  background: #0dcaf0; /* info 系 */
}

/* 小さい説明テキスト（例：※20文字以内）を少し弱めに */
.section-label small {
  font-weight: 400;
  opacity: .9;
}

/* 図版/写真 見出し内の＋ボタンのなじませ */
.section-label-info .btn-light {
  font-size: .75rem;
  padding: .15rem .5rem;
  border-radius: 999px;
}

/* 枠 */
.section-box {
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  background: #fff;
  padding: .75rem;
  margin-top: .25rem;
}

/* タイトル */
.section-title {
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--bs-dark);
}

/* コンテナー枠 */
.container.container-box,
.container-fluid.container-box {
  border: 1px solid rgba(36, 112, 95, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 10px 28px rgba(27, 86, 73, .07);
  padding: 1.5rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

@media (max-width: 991.98px) {
  .container.container-box,
  .container-fluid.container-box {
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1rem;
  }
}

/* ==========================================================
  枠線色
========================================================== */
.border-success {
  border-color: #8fd3b6 !important; /* やさしいミントグリーン */
}
.border-danger {
  border-color: #f3a6a6 !important; /* やさしいサーモンピンク */
}
.border-warning {
  border-color: #f7c97f !important; /* 淡いオレンジ */
}
.border-secondary {
  border-color: #c7cbd1 !important; /* ソフトグレー */
}
/* ===================================================================================== */