#induction h2, h3, h5 {
      color: #004c99;
    }

    #induction .card {
      border: none;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      border-radius: 1rem;
    }

    #induction .btn-primary {
      background-color: #007bff;
      border: none;
    }

    #induction .btn-primary:hover {
      background-color: #0069d9;
    }

    #induction .btn-outline-primary {
      border-color: #ffc107;
      color: #004c99;
      font-weight: 500;
      background-color: white;
    }

    #induction .btn-outline-primary:hover {
      background-color: #fff7d6;
      border-color: #ffb300;
      color: black;
    }

    #induction .course-card {
      background-color: white;
      transition: all 0.3s ease;
    }

    #induction .course-card:hover {
      transform: scale(1.03);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    }

    #induction .diagnosis-step, .result-card {
      display: none;
    }

    #induction #step1 {
      display: block;
    }

    /* スクロール領域：高さを制限して、ここだけスクロールさせる */
    .news-wrapper {
      max-height: 60vh;
      /* 画面高さの60%（好みで調整） */
      overflow-y: auto;
      border: 1px solid rgba(0, 0, 0, 0.06);
      background: #fff;
      padding: 0.5rem;
      border-radius: .5rem;
    }

    #loading {
      padding: 1rem 0;
      color: #666;
    }

    .hero .carousel-item {
      height: 400px;
      /* 高さ固定 */
      position: relative;
    }

    .hero .bg {
      width: 100%;
      height: 100%;
      background-size: contain;
      /* 縦横比維持 */
      background-repeat: no-repeat;
      background-position: center;
    }

    .calutop1 {
      background-image: url('../img/2025C0.jpg');
    }

    .calutop2 {
      background-image: url('../img/2025C1.jpg');
    }

    .calutop3 {
      background-image: url('../img/2025C2.jpg');
    }

    .calutop4 {
      background-image: url('../img/2025R1.png');
    }

    .tecimg-host {
      background-size: cover;
      /* 画像を縦横比を保ったまま全体に広げる */
      background-position: left;
      /* 画像の中央を基準に表示 */
      background-repeat: no-repeat;
      /* 画像を繰り返さない */
      min-height: 100%;
      /* グリッドの高さに合わせる */
    }

    .tecimg {
      background-image: url(../img/teacher.jpg);
      background-position: center !important;
    }

    .tecimg-k {
      background-image: url(../img/dramer.jpg);
    }

    .tecimg-t {
      background-image: url(../img/vocal.jpg);
    }

    .tecimg-U {
      background-image: url(../img/teacU.jpg);
    }

    .tecimg-KP {
      background-image: url(../img/KP.jpg);
    }

    .bgrainbow {
      background: linear-gradient(90deg, rgba(194, 248, 100, 0.475) 0%, rgba(17, 24, 230, 0.241) 100%);
      border-radius: 12px;
    }

    .hero .carousel-caption {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .hero .carousel-caption h1 {
      font-size: 2rem;
      color: #fff;
    }

    .hero .carousel-caption p {
      font-size: 1.2rem;
      color: #fff;
    }

    .outline-text {
      background-color: rgba(255, 255, 255, 0.3);
      /* 白半透明 */
      backdrop-filter: blur(5px);
      padding: 2rem;
      border-radius: 0.5rem;
      color: #f9f7f7;
      text-shadow: 1px 1px 3px rgba(17, 59, 196, 0.934);
    }

    .outline-textb {
      background-color: rgba(255, 255, 255, 0.3);
      /* 白半透明 */
      backdrop-filter: blur(5px);
      padding: 2rem;
      border-radius: 0.5rem;
      color: #212020;
      text-shadow: 1px 1px 3px rgba(146, 247, 118, 0.501);
    }

    .card-hover {
      transition: background-color 0.3s, border-color 0.3s;
      /* なめらかに */
      cursor: pointer;
      /* ホバー時にカーソルをポインタに */
    }

    .card-hover:hover {
      background-color: #e6f2ff;
      /* 薄い青 */
      border: 2px solid #0066cc;
      /* 濃い青ボーダー */
    }

    .flow {
      display: flex;
      align-items: center;
      gap: 30px;
      margin: 50px;
      flex-wrap: wrap;
    }

    .step {
      padding: 15px 25px;
      border: 2px solid #333;
      border-radius: 8px;
      background: #f9f9f9;
      text-align: center;
      min-width: 150px;
      position: relative;
    }

    .step.active {
      background: #e6f2ff;
      border-color: #0066cc;
    }

    .arrow {
      font-size: 24px;
      align-self: center;
    }

    .hidden {
      display: none;
    }

    .choice-btn {
      margin-top: 10px;
      padding: 5px 10px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .choice-btn.yes {
      background-color: #4caf50;
      color: #fff;
    }

    .choice-btn.no {
      background-color: #f44336;
      color: #fff;
    }

    #reset-btn {
      margin: 30px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }

    :root {
      --brand-green: #28a745;
    }

    /* ---- カラー基調: 黄色基調のグリーンブルー ---- */
    :root {
      --brand-green: #2bb673;
      --brand-blue: #1a9ecb;
      --accent-yellow: #ffeb3b;
      --card-bg: #ffffff;
      --muted: #6c757d;
    }

    body {
      font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
      /*background: #fafafa;*/
      color: #222;
    }

    /* ヘッダー / ナビ */
    .header-top {
      background: linear-gradient(90deg, var(--brand-green), var(--brand-blue));
      color: #fff;
    }

    .navbar-brand {
      color: var(--accent-yellow) !important;
      font-weight: 700;
    }

    /* フィルター領域 */
    .filter-bar {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
      padding: 18px;
    }

    /* パンくず／説明 */
    .page-lead h1 {
      font-size: 1.6rem;
      font-weight: 700;
    }

    .page-lead p {
      color: var(--muted);
    }

    /* コースカード */
    .course-card {
      border-radius: 12px;
      transition: transform .18s ease, box-shadow .18s ease;
      overflow: hidden;
      cursor: pointer;
      background: var(--card-bg);
      border: 2px solid rgba(54, 171, 243, 0.55);
      /* height: 100%; */
    }

    .course-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 30px rgba(10, 30, 60, 0.08);
    }

    .course-card .thumb {
      height: 140px;
      background-size: cover;
      background-position: center;
    }

    .course-card .card-body {
      padding: 16px;
    }

    .course-meta {
      font-size: .9rem;
      color: var(--muted);
      margin-bottom: 6px;
    }

    /* 受講形態バッジ */
    .badge-mode {
      background: rgba(26, 158, 203, 0.08);
      color: var(--brand-blue);
      border-radius: 6px;
      padding: 4px 8px;
      font-weight: 600;
      font-size: .85rem;
    }

    /* モーダルのキャプション */
    .course-modal .modal-body h3 {
      margin-top: 0;
    }

    .course-modal .modal-body .meta {
      color: var(--muted);
      margin-bottom: 10px;
    }

    /* ステッカー（おすすめ） */
    .sticker {
      position: absolute;
      top: 12px;
      left: 12px;
      background: var(--accent-yellow);
      color: #000;
      padding: 6px 10px;
      border-radius: 999px;
      font-weight: 700;
      font-size: .85rem;
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    }

    /* 空の状態 */
    .empty-note {
      color: var(--muted);
      padding: 40px 0;
      text-align: center;
    }

    /* レスポンシブ微調整 */
    @media (max-width:767px) {
      .page-lead h1 {
        font-size: 1.3rem;
      }

      .course-card .thumb {
        height: 120px;
      }
    }

    /* モーダル全体：グラデーション＋立体感 */
    .modal-content.modal-elegant {
      /* グラデーションは淡いブルー系＋グレー系で大人っぽく */
      background: linear-gradient(135deg, #e0f3ff 0%, #f9f9ff 100%) !important;
      border-radius: 16px;
      border: 2px solid #a0c4ff;
      /* ほんのり青い枠 */
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      /* ふわっと浮く影 */
      overflow: hidden;
      /* 内側の区切り線を角丸に合わせる */
    }

    /* ヘッダー部分：下の区切り線を装飾 */
    .modal-header {
      border-bottom: 3px double #a0c4ff;
      /* 二重線の区切り */
      padding: 1rem 1.5rem;
      background: linear-gradient(90deg, #d7ecff 0%, #eaf5ff 100%);
      /* うっすら横グラデ */
    }

    /* フッターも同じテイストで */
    .modal-footer {
      border-top: 3px double #a0c4ff;
      padding: 1rem 1.5rem;
      background: linear-gradient(90deg, #eaf5ff 0%, #d7ecff 100%);
    }

    /* タイトルはシンプル＆強調 */
    .modal-header .modal-title {
      font-weight: 700;
      font-size: 1.4rem;
      color: #0056b3;
      /* 落ち着いた青 */
    }

    .card-gradient {
      background: linear-gradient(to bottom left,
          /* 右上 → 左下 */
          rgba(209, 238, 25, 0.35) 0%,
          /* 明るい黄色（右上） */
          rgba(255, 221, 0, 0) 100%
          /* ほぼ透明（左下） */
        );
      border-radius: 0.5rem;
      /* 角を少し丸める（お好み） */
      padding: 1rem;
      /* 余白 */
    }

    .body-userbility {
      line-height: 1.7;
      font-size: 1.05rem;
      margin-bottom: 1.2em;
    }

    #modal-desc p {
      line-height: 1.8;
      margin-bottom: 1rem;
    }

    .blue-s {
      color: rgba(0, 0, 255, 0.561);
      /* 青色に指定 */
      font-size: 80%;
      /* 元のサイズより小さくする */
    }

    svg {
      width: 100%;
      height: auto;
      max-width: 900px;
      display: block;
      margin: auto;
    }

    text {
      font-size: 16px;
      fill: #333;
    }

    .logo {
      height: 80%;
      /* ナビバー高さの80%で常にスケーリング */
      width: auto;
      /* アスペクト比維持 */
      object-fit: contain;
      /* はみ出し防止 */
      max-height: 60px;
      /* 上限を設定 */
    }

    .border-left-green {
      border-left: 4px solid #9acd32;
      padding-left: 12px;
      /* 文字と縦棒の間に余白 */
    }