/* =====================================================
   生成AI道場 CTAボタン（50〜60代UX向け改善版）
   ===================================================== */
.btn-ai-cta {
  background-color: #1455a6 !important;   /* ブランドブルー */
  color: #ffffff !important;              /* 白文字 */
  border: 3px solid #ffffff !important;   /* 枠線を太く（2px → 3px） */
  border-radius: 6px !important;          /* 角丸を6pxへ */
  
  padding: 14px 38px !important;          /* ゆったり押しやすい */
  font-size: 1.15rem !important;          /* シニアでも読みやすい */
  font-weight: 700 !important;            /* 太字で視認性UP */
  letter-spacing: 0.04em;                 /* 読みやすく広げる */

  /* 影を追加して背景から浮かせる（超重要） */
  box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;
  transition: all 0.25s ease;             /* ホバー時の滑らかさ */
}

/* ホバー時（押したくなる視覚効果） */
.btn-ai-cta:hover {
  background-color: #0b3f7a !important;   /* 少し暗いブルー */
  box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
  transform: translateY(-2px);            /* 少し浮く */
  color: #ffffff !important;
}


.section-split-bg {
  position: relative;
  overflow: hidden;
  /* グラデーションを右方向へ反転 */
  background: linear-gradient(
    100deg,
    #0f3f7d 0%,      /* 左端：濃いブルー */
    #1455a6 30%,     /* メイン軸ブルー */
    #dfe6f2 75%,     /* 明るい青みグレー */
    #ffffff 100%     /* 右端：白 */
  ) !important;
  background-attachment: fixed;
}

/* 背景模様を左側に配置（逆転対応） */
.section-split-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../common/images/generative-ai-top-bg-1200-800.webp");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  opacity: 0.25;
  z-index: 1;
  pointer-events: none;
}

/* コンテンツ前面 */
.section-split-bg .container {
  position: relative;
  z-index: 2;
}

/* ---------- モバイル対応 ---------- */
@media (max-width: 767px) {
  .section-split-bg {
    background: linear-gradient(
      180deg,
      #1455a6 0%,
      #dfe6f2 50%,
      #ffffff 100%
    ) !important;
  }

  .section-split-bg::before {
    background-position: center top;
    background-size: 90%;
    opacity: 0.3;
  }
}


.middle td{
    vertical-align: middle;  
}
.bg-color td{
    background-color: #cc3333;
    border-color: #c0c0c0;
}

.table_box::-webkit-scrollbar {
    width: 10px; 
    height: 10px; 
}

.table_box::-webkit-scrollbar-track {
    background: #cc3333;
    border-radius: 5px; 
}

.table_box::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 5px;
}

.table_box::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.table-scroll {
  overflow: scroll;
}

.table-area {
  width: 100%;
  margin: 0 auto;
  overflow-x: scroll;
}

table.sp-table {
  width: 100%;
  min-width: 900px;
  margin: 5em auto 2em;
}


table.sp-table, 
table.sp-table td, 
table.sp-table th {
  border: 1px solid #595959;
  border-collapse: collapse;
}

table.sp-table td, 
table.sp-table th {
  font-size: .8rem;
  padding: 1em;
  box-sizing: border-box;
}

table.sp-table th {
  color: #333;
  background-color: #DEE1E6;
}

table.sp-table td.more-btn a {
  color: #fff;
  display: block;
  width: 100%;
  padding: 1em 0;
  text-align: center;
  background-color: #FD4E4F;
  border-radius: 30px;
}

@media screen and (min-width: 1025px){
  .table-area {overflow-x: auto;}
  
  table.sp-table {width: 60%;}
}


{
  …
  "icons": [
    …
    {
      "src": "..common/images/favicon/maskable_icon.png",
      "sizes": "357x357",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
  …
}

/* 背景ブルー */
.bg-color-generative-ai {
  background: #0b4a9f;
}

/* 白カード（左・中央のみ） */
.white-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.25);
}

/* タイトル（円・バー共通） */
.chart-title {
  font-weight: 700;
  color: #0b318f;
  border-left: 4px solid #0b318f;
  padding-left: .6rem;
}

/* 円画像 */
.donut-img {
  max-width: 260px;
}

/* バーチャート */
.animated-bars { list-style:none; padding:0; margin:0; }
.animated-bars li { margin-bottom: 1.4rem; }

.animated-bars span {
  display:block;
  margin-bottom:.3rem;
  font-size:.95rem;
  color:#333;
}

/* バーのアニメーション */
.bar {
  width:0%;
  height:12px;
  border-radius:6px;
  background:linear-gradient(90deg,#0b318f,#2a9fd6);
  animation:grow-bar 1.4s ease forwards;
}

@keyframes grow-bar {
  from { width:0%; }
  to   { width:var(--value); }
}

/* 各バーのディレイ */
.animated-bars li:nth-child(2) .bar { animation-delay:.2s; }
.animated-bars li:nth-child(3) .bar { animation-delay:.3s; }
.animated-bars li:nth-child(4) .bar { animation-delay:.4s; }
.animated-bars li:nth-child(5) .bar { animation-delay:.5s; }
.animated-bars li:nth-child(6) .bar { animation-delay:.6s; }

/* レスポンシブ（タブレット〜SPは縦並び） */
@media (max-width: 992px) {
  .donut-img { max-width:220px; }
}

@media (max-width: 768px) {
  .donut-img { max-width:200px; margin-bottom:20px; }
}


/* 全体レイアウト調整 */
.program-section {
  background: #eef3fb;
  padding: 40px 20px;
  border-radius: 12px;
}

/* 見出し（プログラム構成 / チケット制メニュー etc.） */
.program-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0b318f;
  border-left: 6px solid #0b318f;
  padding-left: 12px;
  margin-bottom: 24px;
}

/* 左コラム・右コラムの調整 */
.program-col-box {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border: 1px solid #d7dbe5;
}

/* LEVEL1 / LEVEL2 ラベル */
.level-tag {
  background: #0b318f;
  color: #fff;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 8px;
  display: inline-block;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

/* チケット説明タイトル */
.ticket-title {
  font-size: 1.2rem;
  color: #0b318f;
  font-weight: 700;
  margin-bottom: 8px;
}

/* 説明文 */
.description-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
}

/* 青背景ボックス（チケット制メニュー上部） */
.blue-menu-box {
  background: #dfe9fc;
  padding: 14px 18px;
  border-radius: 10px 10px 0 0;
  font-weight: 700;
  color: #0b318f;
  border-bottom: 1px solid #bcd0f6;
}

/* オープンプライス枠 */
.open-price-box {
  background: #0b318f;
  color: #fff;
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
}

/* Level1 / Level2 テーブル */
.level-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  text-align: center;
}

.level-table th {
  background: #dfe9fc;
  color: #0b318f;
  font-weight: 700;
  padding: 12px;
  border: 1px solid #cbd9f5;
}

.level-table td {
  background: #fff;
  padding: 14px;
  border: 1px solid #dae0ec;
  font-size: 0.95rem;
}

/* 画像のスタイル */
.program-img {
  border-radius: 8px;
  max-width: 100%;
  border: 1px solid #e1e1e1;
}
.level-table {
  table-layout: fixed;   /* これで列幅が均等になる */
  width: 100%;
}
.level-table td, 
.level-table th {
  width: 50%;            /* 各列を50%に固定 */
}

/* レスポンシブ */
@media (max-width: 768px) {
  .program-title { font-size: 1.5rem; }
  .open-price-box { font-size: 1.1rem; }
  .level-table th, .level-table td { font-size: 0.85rem; }
}


/* =========================
   比較テーブル（完全版）
========================= */

.compare-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.95rem;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

/* ヘッダー */
.compare-table thead th {
  padding: 14px;
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid #e1e6ef;
  background: #ffffff;
}

/* 左右丸角 */
.compare-table thead th:first-child {
  border-top-left-radius: 12px;
}
.compare-table thead th:last-child {
  border-top-right-radius: 12px;
}

/* ★ 他社AI講座（グレー） */
.other-col {
  background-color: #f3f3f7 !important;
  color: #333 !important;
  font-weight: 600;
}

/* ★ 生成AI道場（ブランドブルー #1455a6） */
.dojo-col {
  background-color: #1455a6 !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* 各セル */
.compare-table td {
  padding: 14px;
  border-bottom: 1px solid #eceff5;
}

/* 最終行 */
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* 左列（比較項目）常に白 */
.compare-table tbody td:first-child {
  background: #ffffff !important;
  font-weight: 600;
  color: #333;
}

/* 中間列の偶数行ストライプ（必要なら） */
.compare-table tbody tr:nth-child(even) td:not(.other-col):not(.dojo-col) {
  background: #f9f9fc;
}
/************************************************************
   比較テーブル：50〜60代向けに文字・行間を最適化（完全版）
*************************************************************/

/* 生成AI道場（青背景）の文字を大きく・読みやすく */
.compare-table .dojo-col div.cell-wrap {
  font-size: 1.05rem;       /* 約16.8px → 視認性UP */
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/* 他社AI講座（グレー背景）も統一 */
.compare-table .other-col div.cell-wrap {
  font-size: 1.03rem;       /* 約16.5px */
  line-height: 1.6;
}

/* 左列（比較項目） */
.compare-table tbody td:first-child div.cell-wrap {
  font-size: 1.03rem;
  font-weight: 700;
  line-height: 1.65;
  color: #333;
}

/* 各セル共通：縦方向に少し余裕を持たせて圧迫感を解消 */
.compare-table td {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/************************************************************
   4つの力（説明文）の行間を改善 ― 息苦しさを完全解消
*************************************************************/
.cell-wrap {
  font-size: 1.05rem;     /* 約16.8px */
  line-height: 1.75;      /* 行間を広く → 読みやすさ劇的Up */
  letter-spacing: 0.01em;
}


/***********************************************************
  受講者層カード（audience-section）最適化：完全版
***********************************************************/

.audience-section {
  padding: 48px 10px;
}

/* 見出し */
.audience-section h2 {
  font-size: 2rem !important;
  line-height: 1.4;
  margin-bottom: 1rem;
  color: #000;
}

/* カード */
.audience-card {
  background: #fff;
  border-radius: 16px;
  padding: 26px 26px 32px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  border: 1px solid #eef0f5;
  transition: all .25s ease;
  height: 100%;
}

.audience-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

/* バッジ（text-5 の影響を完全無視して表示） */
.audience-badge {
  font-size: 1rem !important;       /* ← text-5 を上書き */
  font-weight: 700 !important;
  color: #ffffff !important;
  padding: 6px 16px !important;
  border-radius: 10px !important;
  display: inline-block !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

/* 色 */
.badge-a { background:#1455a6 !important; }
.badge-b { background:#0078b8 !important; }
.badge-c { background:#009e96 !important; }
.badge-d { background:#7a5bd9 !important; }

/* カード内見出し */
.audience-head {
  font-size: 1.25rem !important;
  font-weight: 700;
  color: #0b318f;
  margin-bottom: 12px;
  line-height: 1.4;
}

/* 声（悩み） */
.audience-voice {
  color: #444;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  margin-bottom: 16px;
}

/* 理由 */
.audience-reason {
  color: #333;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

/* SP調整 */
@media (max-width:768px){
  .audience-section h2 { font-size:1.7rem !important; }
  .audience-card { padding:20px; }
  .audience-head { font-size:1.1rem !important; }
  .audience-voice, .audience-reason { font-size:1rem !important; }
}


/* FAQ セクション */
.faq-section {
  background: #f5f6f8;
}

/* カード全体 */
.faq-card {
  background: #fff;
  border: 1px solid #d8dce5;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* チェックは非表示 */
.faq-toggle {
  display: none;
}

/* Q 部分 */
.faq-question {
  display: flex;
  align-items: center;
  padding: 18px 20px;
  cursor: pointer;
  background: #ffffff;
  transition: background 0.3s ease;
}

/* Qアイコン */
.faq-q-icon {
  background: #1455a6;
  color: #fff;
  font-weight: 700;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 1rem;
}

/* Qテキスト */
.faq-q-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0b318f;
  flex-grow: 1;
  line-height: 1.5;
}

/* 開閉アイコン */
.faq-question::after {
  content: "+";
  font-size: 1.6rem;
  font-weight: 600;
  color: #0b318f;
  margin-left: 12px;
  transition: transform 0.3s ease;
}

/* 開いた場合のアイコン */
.faq-toggle:checked + .faq-question::after {
  content: "−";
  transform: rotate(0);
}

/* 開いた時の背景変化 */
.faq-toggle:checked + .faq-question {
  background: #eef3fb;
}

/* A部分 */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: #f8f9fc;
  padding: 0 20px;
  transition: max-height 0.35s ease, padding 0.3s ease;
}

/* A アイコン */
.faq-a-icon {
  background: #0b318f;
  color: #fff;
  font-weight: 700;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  font-size: 0.9rem;
}

/* A テキスト */
.faq-answer p {
  font-size: 1.15rem;
  line-height: 1.8;
  color: #333;
  margin: 0;
  margin-top: 14px;
}

/* 開いた時の高さ */
.faq-toggle:checked + .faq-question + .faq-answer {
  max-height: 600px;
  padding-top: 20px;
  padding-bottom: 24px;
}

/* スマホ用 */
@media (max-width: 576px) {
  .faq-q-text {
    font-size: 1.1rem;
  }
  .faq-answer p {
    font-size: 1.05rem;
  }
}


.ai-skills-list dt {
  font-weight: 600;
  margin-top: 1.2em;
  font-size: 1.15em;
}

.ai-skills-list dd {
  margin-left: 0;
  margin-bottom: 0.8em;
  line-height: 1.7;
}

.ai-skills-summary {
  margin-top: 1.5em;
  line-height: 1.8;
}     
.ai-final-section {
  background: #f4f5f8;
}

.ai-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.ai-final-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0b318f;
}

.ai-lead {
  font-size: 1.4rem;
  line-height: 1.7;
  color: #333;
}

.ai-skill-list dt {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 1.1em;
}

.ai-skill-list dd {
  margin-left: 0;
  line-height: 1.7;
  margin-bottom: 0.7em;
  color: #444;
}

.ai-side-box img {
  border-radius: 10px;
}

.ai-side-box .btn-primary {
  background: #1455a6;
  border: none;
  letter-spacing: 0.05em;
  font-weight: 700;
}

/**************************************************************
  生成AI道場｜詳細説明セクション（長文）区切り改善：完全版
  セクション1〜5が明確に分かれ、シニアUXにも最適
**************************************************************/

/* 左寄せの区切り（セクション開始線） */
.section-divider {
  width: 80px;
  height: 5px;
  background: #1455a6;
  border-radius: 3px;
  margin: 64px 0 32px 0 !important; /* ← 左寄せのため margin-left なし */
}

/* 2) 各セクション見出しの余白強化 */
.ai-detail-text h3 {
  font-size: 1.55rem !important;
  line-height: 1.45 !important;
  margin-top: 0 !important;     /* 余白は divider に任せる */
  margin-bottom: 1.6rem !important;
  max-width: 820px;
}

/* 3) 長文（本体）は既存スタイルを維持（可読性最適） */
.ai-detail-text {
  max-width: 720px !important;   /* 行長を40〜46文字に維持 */
  margin-left: auto;
  margin-right: auto;
}

/* 文字の読みやすさ向上（既存ベース＋補強） */
.ai-detail-text p,
.ai-detail-text ul li {
  font-size: 1.07rem !important;
  line-height: 1.8 !important;
  margin-bottom: 1.4em !important;
  letter-spacing: 0.01em;
}

/* 箇条書きの調整 */
.ai-detail-text ul {
  padding-left: 1.4em;
  margin-bottom: 1.6em;
}

@media (max-width: 576px) {
  .section-divider {
    margin: 48px auto 28px auto;
  }
  .ai-detail-text {
    max-width: 92%;
  }
}
/* h3（長文セクション見出し）の余白調整 */
.ai-detail-heading {
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  color: #0b318f;
  margin-top: 0 !important;      /* dividerが余白を担当 */
  margin-bottom: 24px !important; /* 統一された下余白 */
  line-height: 1.4;
}
</style>
<style>
/* 1) 長文の横幅（行長）を最適化：860px → 720px */
.ai-detail-text {
  max-width: 720px !important;
}

/* 2) 受講者層カードの文字サイズUP（14px → 16px） */
.audience-card p,
.audience-card li,
.audience-card .audience-voice,
.audience-card .audience-reason {
  font-size: 1.05rem !important; /* 16.8px */
  line-height: 1.65 !important;
}

/* 3) 比較表と青背景の間の余白を明確化 */
.dojo-gap {
  height: 48px !important;
}

/* 4) 比較表セルの縦方向のゆとりを拡大 */
.compare-table td {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}