/* ============================================================
   TESTPIA リデザイン共通スタイル  common.css
   - Bootstrap 5.3 を前提とした上書き／拡張
   - デザインガイドライン（index.html）準拠
   - 全ページはこの1ファイルを参照（ページ個別CSSは持たない）
   ============================================================ */

/* ===== カラーテーマ定義 =====
   --gd-primary      : メインカラー（ボタン・小ラベル等、白背景上の文字にも使うため
                       全テーマで白背景に対しコントラスト比 4.5:1 以上を確保）
   --gd-primary-dark : 濃色（ヘッダー帯・フッター・ホバー）
   --gd-accent       : サブアクセント（背景・グラデーション等の装飾専用。
                       小さい文字色には使用しない）
   --gd-bg-soft      : 淡色背景
   --gd-text         : 基本テキスト色                                   */
:root{
  --gd-primary:#1d4ed8;
  --gd-primary-dark:#1e3a8a;
  --gd-accent:#3b82f6;
  --gd-bg-soft:#eff6ff;
  --gd-text:#1f2937;
}
html[data-theme="red"]{    --gd-primary:#c0392b; --gd-primary-dark:#7b241c; --gd-accent:#e74c3c; --gd-bg-soft:#fdecea; --gd-text:#2b2b2b; }
html[data-theme="blue"]{   --gd-primary:#397fff; --gd-primary-dark:#1e3a8a; --gd-accent:#3b82f6; --gd-bg-soft:#eff6ff; --gd-text:#1f2937; }
html[data-theme="green"]{  --gd-primary:#15803d; --gd-primary-dark:#14532d; --gd-accent:#22c55e; --gd-bg-soft:#ecfdf5; --gd-text:#1f2937; }
/* yellow: 旧 #b7791f は白背景比 約3.1:1 でWCAG AA不適合のため暗色化 */
html[data-theme="yellow"]{ --gd-primary:#8a5a12; --gd-primary-dark:#6b4509; --gd-accent:#f6c343; --gd-bg-soft:#fffbea; --gd-text:#2b2b2b; }
html[data-theme="white"]{  --gd-primary:#5b6472; --gd-primary-dark:#374151; --gd-accent:#9ca3af; --gd-bg-soft:#fafafa; --gd-text:#1f2937; }
html[data-theme="black"]{  --gd-primary:#111827; --gd-primary-dark:#000000; --gd-accent:#4b5563; --gd-bg-soft:#f3f4f6; --gd-text:#111111; }

/* ===== フォントテーマ ===== */
html[data-font="gothic"]{
  --gd-font-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --gd-font-heading: var(--gd-font-base);
}
html[data-font="mincho"]{
  --gd-font-base: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Times New Roman", serif;
  --gd-font-heading: var(--gd-font-base);
}
body{ color:var(--gd-text); font-family:var(--gd-font-base); }

/* ===== タイポグラフィスケール（ガイドライン準拠） =====
   h1: ページの大見出し（1ページに1つ）
   h2: セクションの大見出し
   h3: カード・パネル・特徴ブロックのタイトル
   h4: ブロック内のサブ見出し
   h5: 補助的な小見出し（※リード文には使わない → .gd-lead を使用）
   h6: 最小の見出し・カテゴリラベル（フッター列見出し等）           */
h1{ font-size:clamp(2rem, 5vw, 3.4rem); font-weight:300; letter-spacing:.14em; line-height:1.4; text-transform:uppercase; font-family:var(--gd-font-heading); }
h2{ font-size:clamp(1.4rem, 2.6vw, 1.9rem); font-weight:400; letter-spacing:.08em; line-height:1.5; font-family:var(--gd-font-heading); }
h3{ font-size:1.15rem; font-weight:600; letter-spacing:.02em; line-height:1.6; font-family:var(--gd-font-heading); }
h4{ font-size:1rem; font-weight:700; letter-spacing:.01em; line-height:1.6; font-family:var(--gd-font-heading); }
h5{ font-size:.9rem; font-weight:700; letter-spacing:0; color:var(--gd-primary-dark); line-height:1.6; font-family:var(--gd-font-heading); }
h6{ font-size:.75rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#9ca3af; line-height:1.6; font-family:var(--gd-font-heading); }

/* 見出し直下のリード文（旧: h5 を流用していた箇所の置き換え用） */
.gd-lead{ font-weight:700; color:var(--gd-accent); font-size:.95rem; line-height:1.8; }

/* 英語アイブロウ（欧文専用。和文には使わない） */
.gd-eyebrow{ display:block; font-size:.75rem; font-weight:600; letter-spacing:.32em; color:var(--gd-primary); text-transform:uppercase; margin-bottom:.8em; }

/* 所在地などの和文小ラベル（アイブロウの和文代替） */
.gd-location{ display:inline-flex; align-items:center; gap:.35em; font-size:.85rem; font-weight:700; color:var(--gd-primary); letter-spacing:.05em; margin-bottom:.6em; }

/* ===== トップ案内バー ===== */
.gd-topbar{ background:var(--gd-primary); color:#fff; font-size:.85rem; }
.gd-topbar a{ color:#fff; text-decoration:none; }
.gd-topbar a.btn-light{ color:var(--gd-primary); } /* a{color:#fff}の上書きでボタン文字が白く潰れるのを防止 */
.gd-topbar a.gd-tel{ font-weight:700; }
.gd-topbar a.gd-tel:hover{ text-decoration:underline; }

/* ===== ヘッダーナビゲーション ===== */
.gd-navbar{ background:#fff !important; border-bottom:3px solid var(--gd-primary); }
.gd-navbar .navbar-brand{ font-weight:700; letter-spacing:.08em; color:var(--gd-primary)!important; font-size:1.3rem; }
.gd-navbar .nav-link{ color:var(--gd-text)!important; font-weight:600; font-size:.92rem; }
.gd-navbar .nav-link:hover, .gd-navbar .nav-link.active{ color:var(--gd-primary)!important; }
.btn-gd-contact{ background:var(--gd-primary); color:#fff; border-radius:30px; padding:.5rem 1.4rem; }
.btn-gd-contact:hover, .btn-gd-contact:focus{ background:var(--gd-primary-dark); color:#fff; }

/* ===== ボタン ===== */
.btn-gd-primary{ background:var(--gd-primary); border-color:var(--gd-primary); color:#fff; }
.btn-gd-primary:hover{ background:var(--gd-primary-dark); border-color:var(--gd-primary-dark); color:#fff; }
.btn-gd-outline{ border:2px solid var(--gd-primary); color:var(--gd-primary); background:transparent; }
.btn-gd-outline:hover{ background:var(--gd-primary); color:#fff; }
.btn-gd-pill{ border-radius:50px; padding:.6rem 2rem; }

/* ===== ヒーロー（下層ページ共通） ===== background:linear-gradient(135deg,var(--gd-bg-soft) 0%, #fff 60%);削除*/
.gd-hero-about{ padding:80px 0; }
.gd-hero-about .gd-visual{ aspect-ratio:4/3; border-radius:16px; background:linear-gradient(135deg,var(--gd-accent),var(--gd-primary)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:3rem; }
.gd-hero-about .gd-hero-lead{ font-size:1.05rem; line-height:2; }

/* ===== ステップフロー =====
   PC: 横並び＋右矢印 ／ モバイル: 縦積み＋下矢印                     */
.gd-step{ text-align:center; position:relative; height:100%; padding:18px; }
.gd-step-num{ width:48px; height:48px; line-height:48px; border-radius:50%; background:var(--gd-primary); color:#fff; font-weight:700; margin:18px auto; font-family:var(--gd-font-base); letter-spacing:0; }
.gd-step .gd-step-tag{ display:block; margin-bottom:10px; font-size:.95rem; color:var(--gd-primary); font-weight:700; letter-spacing:.1em; }
.gd-step h3{ margin-top:10px; font-size:.95rem; font-weight:700; }
/* .gd-step-arrow{ display:flex; align-items:center; justify-content:center; color:var(--gd-accent); font-size:1.4rem; }*/
.gd-step-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* スマホ：下向き ▼ */
.gd-step-arrow::before{
    content:"";
    width:0;
    height:0;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-top:20px solid #ffe100;
}

/* PC（Bootstrap lg以上）：右向き ▶ */
@media (min-width:992px){
    .gd-step-arrow::before{
        border-top:20px solid transparent;
        border-bottom:20px solid transparent;
        border-left:20px solid #ffe100;
        border-right:0;
    }
}
/* ===== 特徴ブロック（魅力・学習ステップ詳細） =====  border-bottom:1px solid #e5e7eb; 削除*/
.gd-feature{ padding:64px 0;}
.gd-feature:last-of-type{ border-bottom:none; }
.gd-feature-num{ font-size:3rem; font-weight:400; line-height:1; letter-spacing:.05em; color:var(--gd-accent); font-family:var(--gd-font-heading); }
.gd-feature-tag{ display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.2em; color:#fff; background:var(--gd-primary); border-radius:30px; padding:.3rem 1rem; margin-bottom:.8rem; }
.gd-feature-visual{ aspect-ratio:4/3; border-radius:14px; background:linear-gradient(135deg,var(--gd-primary),var(--gd-primary-dark)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.4rem; }
.gd-feature-visual-img{ aspect-ratio:4/3; border-radius:14px;  display:flex; align-items:center; justify-content:center;}
.gd-feature-visual-img2{ display:flex; align-items:center; justify-content:center;}
/* PC */
.charm-img-1{ width:180px; }
.charm-img-2{ width:390px; }
.charm-img-3{ width:220px; }
.charm-img-4{ width:270px; }

/* スマホ */
@media (max-width:991.98px){
    .charm-img-1{ width:200px; }
    .charm-img-2{ width:300px; }
    .charm-img-3{ width:250px; }
    .charm-img-4{ width:300px; }
}
/* ===== 情報テーブル ===== */
.gd-info-table th{ background:#fff799; width:140px; color:var(--gd-accent); font-weight:700; white-space:nowrap; }
.gd-info-table th, .gd-info-table td{ padding:.9rem 1rem; border-color:#ffe100; vertical-align:middle; }

/* ===== 課題カード（学校課題ページ） ===== */
.gd-issue-card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:28px; height:100%; }
.gd-issue-card .gd-issue-tag{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.15em; color:#6b7280; border:1px solid #d1d5db; border-radius:30px; padding:.25rem .9rem; margin-bottom:.8rem; }
.gd-issue-card .gd-solution{ background:#D9F8FF; border-radius:8px; padding:16px; margin-top:14px; }
.gd-issue-card .gd-solution .gd-solution-tag{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.15em; color:#fff; background:var(--gd-primary); border-radius:30px; padding:.25rem .9rem; margin-bottom:.6rem; }
.gd-issue-card .icon{ width:52px; height:52px; border-radius:12px; background:var(--gd-bg-soft); color:var(--gd-primary); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px; }

/* ===== 事例セクション（活用事例ページ） ===== */
.gd-case{ padding:64px 0; border-bottom:1px solid #e5e7eb; }
.gd-case:last-of-type{ border-bottom:none; }
.gd-case-logo{ height:48px; max-width:220px; object-fit:contain; }
.gd-case-visual{ aspect-ratio:16/10; border-radius:0px; background:linear-gradient(135deg,var(--gd-primary),var(--gd-primary-dark)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.4rem; overflow:hidden; }
@media (max-width: 767.98px) {
  .gd-case-visual{
    aspect-ratio: 16 / 8;
  }
}
.gd-case-spec{ font-size:.85rem; }
.gd-case-spec th{ background:#fff799; color:var(--gd-accent); font-weight:700; white-space:nowrap; width:110px; padding:.5rem .8rem; border-color:#e5e7eb; }
.gd-case-spec td{ padding:.5rem .8rem; border-color:#e5e7eb; }
.gd-voice-card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:24px; height:100%; position:relative; }
.gd-voice-card .gd-voice-tag{ display:inline-flex; align-items:center; gap:.4em; font-size:.75rem; font-weight:700; letter-spacing:.1em; color:var(--gd-primary); margin-bottom:.8rem; }
.gd-voice-card .gd-voice-tag i{ font-size:1rem; }
.gd-voice-card p{ font-size:.92rem; line-height:1.9; }

/* ===== 料金カード（導入についてページ） ===== */
.gd-price-card{ background:#ffe100; border:0px solid var(--gd-primary); border-radius:16px; padding:48px; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.gd-price-card .gd-price-tag{ display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.2em; color:#ffe100; background:#397fff; border-radius:30px; padding:.35rem 1.2rem; margin-bottom:1rem; }
.gd-price-card .gd-price-main{ font-size:clamp(2.4rem, 6vw, 3.6rem); font-weight:300; color: var(--gd-primary); letter-spacing:.06em; line-height:1.2; }
.gd-price-card .gd-price-main small{ font-size:1.2rem; font-weight:400; }
.gd-price-card .gd-price-tax{ color: var(--gd-primary); font-size:.9rem; }
.gd-price-note{ font-size:.82rem; color:#6b7280; }

/* ===== バッジ ===== */
.gd-badge-primary{ background:var(--gd-primary); color:#fff; border-radius:30px; padding:.3rem .9rem; font-size:.75rem; font-weight:700; }
.gd-badge-accent{ background:#ff65de; color:var(--gd-primary-dark); border-radius:30px; padding:.3rem .9rem; font-size:.75rem; font-weight:700; }
html[data-theme="red"] .gd-badge-accent,
html[data-theme="blue"] .gd-badge-accent,
html[data-theme="green"] .gd-badge-accent,
html[data-theme="black"] .gd-badge-accent{ color:#fff; } /* 濃色アクセントのテーマは白文字 */
.gd-badge-outline{ border:1px solid #d1d5db; color:#6b7280; border-radius:30px; padding:.3rem .9rem; font-size:.75rem; font-weight:700; }

/* ===== ターゲット表（対象ページ） ===== */
.gd-target-table th, .gd-target-table td{ text-align:center; vertical-align:middle; padding:1rem .5rem; border-color:#ffe100; }
.gd-target-table thead th{ background:#ffe100; color:var(--gd-primary); font-weight:700; }
.gd-target-table tbody th{ background:#fff; color:var(--gd-text); font-weight:700; text-align:left; white-space:nowrap; }
.gd-legend{ display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center; font-size:.85rem; }
.gd-legend .dot{ width:14px; height:14px; border-radius:3px; display:inline-block; margin-right:.4em; vertical-align:middle; }

/* ===== サービスカード（タイプ別アプローチ等） ===== */
.gd-service-card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:28px; height:100%; transition:.2s; }
.gd-service-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.06); transform:translateY(-2px); }
.gd-service-card .icon{ width:52px; height:52px; border-radius:12px; background:var(--gd-bg-soft); color:var(--gd-primary); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px; }

/* ===== アラート（注記） ===== */
.gd-alert-info{ background:#fff; border-left:4px solid var(--gd-primary); border-top:1px solid var(--gd-primary); border-right:1px solid var(--gd-primary); border-bottom:1px solid var(--gd-primary);  border-radius:8px; padding:24px; }
.gd-alert-info h3{ font-size:1rem; font-weight:700; }

.gd-alert-info2{ background:#fff; border-left:4px solid var(--gd-primary); border-top:1px solid var(--gd-primary); border-right:1px solid var(--gd-primary); border-bottom:1px solid var(--gd-primary);  border-radius:8px; padding:24px; }
.gd-alert-info2 h3{ font-size:1rem; font-weight:700; }

.gd-alert-info3{ background:#fff; border-left:4px solid var(--gd-primary); border-top:1px solid var(--gd-primary); border-right:1px solid var(--gd-primary); border-bottom:1px solid var(--gd-primary);  border-radius:8px; padding:24px; }
.gd-alert-info3 h3{ font-size:1rem; font-weight:700; }


.gd-alert-info4{ background:#fff; border-left:4px solid var(--gd-primary); border-top:1px solid var(--gd-primary); border-right:1px solid var(--gd-primary); border-bottom:1px solid var(--gd-primary);  border-radius:8px; padding:24px; }
.gd-alert-info4 h3{ font-size:1rem; font-weight:700; }
/* ===== CTAストリップ ===== */
.gd-cta{
    background: var(--gd-accent);
    color: #fff;
    border-radius: 12px;
    padding: 48px;
    text-align: center;
}
.gd-cta h2{ color:#fff; }
.gd-cta .btn-light{ font-weight:700; color:var(--gd-accent); }
.gd-cta .gd-eyebrow{ color:#fff; }

/* ===== フッター ===== */
.gd-footer{ background:var(--gd-accent); color:#fff; }
.gd-footer h6{ color:#fff; font-weight:700; letter-spacing:.05em; }
.gd-footer a{ color:#fff; text-decoration:none; font-size:.9rem; }
.gd-footer a:hover{ color:#fff; }
.gd-footer .gd-copyright{  font-size:.8rem; }

/* ===== テーマ／フォント切替バー（デザイン確認用・本番では削除） ===== */
#themeSwitcher{ position:sticky; top:0; z-index:1050; background:#fff; border-bottom:1px solid #e5e7eb; box-shadow:0 2px 6px rgba(0,0,0,.05); }
#themeSwitcher .gd-back-link{ font-size:.8rem; color:var(--gd-primary); text-decoration:none; font-weight:700; }
#themeSwitcher .gd-back-link:hover{ text-decoration:underline; }
.theme-dot{ width:20px; height:20px; border-radius:50%; display:inline-block; cursor:pointer; border:2px solid #fff; outline:1px solid #d1d5db; }
.theme-dot.active{ outline:2px solid var(--gd-text); }
.theme-dot[data-theme="red"]{ background:#c0392b; }
.theme-dot[data-theme="blue"]{ background:#1d4ed8; }
.theme-dot[data-theme="green"]{ background:#15803d; }
.theme-dot[data-theme="yellow"]{ background:#f6c343; }
.theme-dot[data-theme="white"]{ background:#f5f5f5; }
.theme-dot[data-theme="black"]{ background:#111827; }
.font-toggle-btn{ font-size:.78rem; border:1px solid #d1d5db; background:#fff; padding:.25rem .9rem; border-radius:20px; cursor:pointer; }
.font-toggle-btn.active{ background:var(--gd-primary); color:#fff; border-color:var(--gd-primary); }

/* ===== アクセシビリティ ===== */
a:focus-visible, button:focus-visible{ outline:3px solid var(--gd-accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}