@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* 学習ガイドセクションの上マージンを「このサイトの特徴」に合わせる */
.guide-top-section {
    margin-top: 44px;
}

/* 小見出しとリストの間のpadding調整 */
.guide-top-block-title {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

/* 「記事一覧を見る」サイズ・マージン調整 */
.guide-top-more {
    display: block;
    text-align: right;
    font-size: 15px;
    margin-top: -16px;
    margin-bottom: 16px;
}


/* =============================================
   FontAwesome アイコン カラー設定
   カードアイコンのみテーマカラーを適用
   セクションタイトルアイコンは継承色のまま
   ============================================= */

/* G検定：カードアイコン → パープル */
.gk-card-icon i.fas {
  color: #667eea;
}

/* ITパスポート：カードアイコン → グリーン */
.ip-card-icon i.fas {
  color: #11998e;
}

/* 基本情報技術者試験：カードアイコン → オレンジ */
.fe-card-icon i.fas {
  color: #f7971e;
}

/* ホーム・資格一覧：資格カードアイコン → 資格ごとの色 */
.shikaku-card-icon i.fa-brain {
  color: #667eea;
}
.shikaku-card-icon i.fa-laptop-code {
  color: #11998e;
}
.shikaku-card-icon i.fa-code {
  color: #f97316;
}

/* ホーム「このサイトの特徴」カードアイコン → グレー */
.feature-card-icon i.fas {
  color: #777;
}


/* ============================================================
   資格ラボ カスタムスタイル
   移植元: 外観 > カスタマイズ > 追加CSS
   移植日: 2026-04-11
   ============================================================

   目次
   1.  ベース・リセット
   2.  ヘッダー
   3.  ナビゲーション
   4.  コンテンツ幅・ホームレイアウト
   5.  ヒーローセクション（ホーム用 .home-hero-full）
   6.  対応資格グリッド（.shikaku-grid / .shikaku-card）
   7.  このサイトの特徴グリッド（.feature-grid / .feature-card）
   8.  ウィジェット・サイドバー
   9.  フッター
   10. 共通ボタン（.shk-btn）
   11. サブキャッチ・ヒーロー（.subcatch）
   12. モバイルレスポンシブ
   13. その他ユーティリティ
   ============================================================ */

/* --------------------------------------------------------
   1. ベース・リセット
   -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box !important; }
body { background: #f0f8f5 !important; color: #1a2e5a !important; }
a { text-decoration: none !important; }

/* --------------------------------------------------------
   2. ヘッダー
   -------------------------------------------------------- */
#header {
  background: #ffffff !important;
  border-bottom: 2px solid #cce8e0 !important;
  box-shadow: 0 2px 16px rgba(26,46,90,0.07) !important;
}
#header .header-in,
.header-container .wrap {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
#header .header-description,
#header .site-description,
.header-catchphrase,
p.site-description { display: none !important; }
.logo-header {
  text-align: center !important;
  padding: 6px 0 !important;
}
.logo-header .site-name-text-link {
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
.logo-menu-button .menu-button-in {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------
   3. ナビゲーション
   -------------------------------------------------------- */
#navi { background: #ffffff !important; }
#navi .navi-in {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  justify-content: center !important;
}
#navi .navi-in > ul > li > a {
  color: #1a2e5a !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
}
#navi .navi-in > ul > li > a:hover {
  color: #3a7fbf !important;
  opacity: 1 !important;
}
@media (min-width: 641px) {
  #navi.skl-nav-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    background: #fff !important;
    animation: skl-nav-slidein 0.2s ease !important;
  }
  #skl-nav-spacer { display: none; }
  #skl-nav-spacer.active { display: block; }
  @keyframes skl-nav-slidein {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }
}

/* --------------------------------------------------------
   4. コンテンツ幅・ホームレイアウト
   -------------------------------------------------------- */
.home #sidebar, .home .sidebar { display: none !important; }
.home #container, .home #content,
.home #main, .home .main {
  width: 100% !important; max-width: 100% !important;
  padding: 0 !important; margin: 0 !important;
}
.home .content-in { display: block !important; }
.home .article,
.home .entry-content {
  max-width: 1000px !important;
  margin-left: auto !important; margin-right: auto !important;
  padding: 24px 24px 40px !important;
}
.home .entry-title, .home .sns-share-buttons,
.home .sns-follow-buttons, .home .byline,
.home .entry-meta, .home .toc, .home #toc,
.home .sns-share, .home .sns-follow,
.home #author-info { display: none !important; }

/* --------------------------------------------------------
   5. ヒーローセクション（ホーム用）
   -------------------------------------------------------- */
.home-hero-full {
  position: relative !important;
  width: 100% !important;
  height: 460px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  margin-bottom: 44px !important;
  box-shadow: 0 6px 32px rgba(26,46,90,0.14) !important;
  background-color: #f0f8f5 !important;
  background-image: none !important;
}
.home-hero-full::after {
  content: " " !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 54% !important;
  background-image: url(https://shikakulab.jp/wp/wp-content/uploads/shikakulab-topvisual.jpg) !important;
  background-size: cover !important;
  background-position: center top !important;
  border-radius: 0 18px 18px 0 !important;
  z-index: 0 !important;
}
.home-hero-overlay {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  bottom: 0 !important; width: 58% !important;
  background: linear-gradient(to left,
    rgba(240,248,245,0) 0%,
    rgba(240,248,245,0.92) 22%,
    rgba(240,248,245,0.96) 60%,
    rgba(240,248,245,0.99) 100%) !important;
  pointer-events: none !important;
}
.home-hero-text-wrap {
  position: absolute !important;
  top: 50% !important; left: 36px !important;
  transform: translateY(-50%) !important;
  width: 380px !important;
  z-index: 2 !important;
  background: rgba(248,252,250,0.97) !important;
  border-radius: 14px !important;
  padding: 26px 24px !important;
  box-shadow: 0 4px 28px rgba(26,46,90,0.13) !important;
}
.home-hero-badge {
  display: inline-block !important;
  background: #d6f5ee !important;
  color: #1a6b5a !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  margin-bottom: 18px !important;
  border: 1.5px solid #9addd2 !important;
  letter-spacing: 0.04em !important;
}
.home-hero-text-wrap h2 {
  font-size: 1.6rem !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  font-weight: 800 !important;
  color: #1a2e5a !important;
  line-height: 1.25 !important;
  margin: 0 0 16px !important;
  letter-spacing: -0.02em !important;
}
.home-hero-text-wrap p {
  font-size: 0.93rem !important;
  color: #2a5070 !important;
  line-height: 1.85 !important;
  margin: 0 0 26px !important;
}
.home-hero-btn {
  display: inline-block !important;
  background: #1a2e5a !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 30px !important;
  border-radius: 9px !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 4px 16px rgba(26,46,90,0.28) !important;
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s !important;
}
.home-hero-btn:hover {
  background: #3a7fbf !important;
  box-shadow: 0 7px 24px rgba(58,127,191,0.38) !important;
  transform: translateY(-2px) !important;
}
.shikaku-card h4 span[id],
.feature-card h4 span[id],
.home-hero-text-wrap h2 span[id] { display: inline !important; }

/* --------------------------------------------------------
   6. 対応資格グリッド
   -------------------------------------------------------- */
.shikaku-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 40px !important;
}
.shikaku-card {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 22px !important;
  box-shadow: 0 2px 12px rgba(26,46,90,0.07) !important;
  border: 1.5px solid #d4eae4 !important;
  display: block !important;
  color: #1a2e5a !important;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s !important;
}
.shikaku-card:hover {
  box-shadow: 0 6px 24px rgba(26,46,90,0.13) !important;
  transform: translateY(-3px) !important;
  border-color: #3a7fbf !important;
}
.shikaku-card-badge {
  display: inline-block !important;
  background: #d6f5ee !important;
  color: #1a6b5a !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
  border: 1px solid #9addd2 !important;
}
.shikaku-card-icon {
  font-size: 2rem !important;
  margin-bottom: 10px !important;
  line-height: 1 !important;
}
.shikaku-card h4 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1a2e5a !important;
  margin: 0 0 8px !important;
}
.shikaku-card p {
  font-size: 0.85rem !important;
  color: #4a6a8a !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------
   7. このサイトの特徴グリッド
   -------------------------------------------------------- */
.feature-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 12px !important;
}

.feature-card {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 24px !important;
  box-shadow: 0 2px 12px rgba(26,46,90,0.07) !important;
  border: 1.5px solid #d4eae4 !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}

.feature-card:hover {
  box-shadow: 0 6px 24px rgba(26,46,90,0.11) !important;
  transform: translateY(-2px) !important;
}

.feature-card-icon {
  font-size: 1.8rem !important;
  margin-bottom: 12px !important;
  line-height: 1 !important;
}

.feature-card h4 {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #1a2e5a !important;
  margin: 0 0 8px !important;
}

.feature-card p {
  font-size: 0.83rem !important;
  color: #4a6a8a !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* タブレット */
@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* スマホ */
@media (max-width: 640px) {
  .feature-grid {
    grid-template-columns: 1fr !important;
  }

  .feature-card {
    padding: 20px !important;
  }
}

/* --------------------------------------------------------
   8. ウィジェット・サイドバー
   -------------------------------------------------------- */
.widget_title {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #1a2e5a !important;
  border-bottom: 2px solid #cce8e0 !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}

/* --------------------------------------------------------
   9. フッター
   -------------------------------------------------------- */
#footer {
  background: #1a2e5a !important;
  color: #cce8e0 !important;
  margin-top: 56px !important;
}
#footer a { color: #9addd2 !important; }
#footer a:hover { color: #ffffff !important; background-color: transparent !important; }
.footer-copyright { color: #9ab8cc !important; font-size: 0.8rem !important; }
.footer-bottom-logo { display: block !important; top: 2px !important; }
.footer-bottom-logo .site-name-text-link { text-decoration: none !important; }

/* --------------------------------------------------------
   10. 共通ボタン（.shk-btn）
   -------------------------------------------------------- */
.shk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-width: 220px;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
  box-sizing: border-box;
}
.shk-btn:hover { transform: translateY(-1px); text-decoration: none; }
.shk-btn:focus { outline: 3px solid rgba(37, 99, 235, .22); outline-offset: 2px; }
.shk-btn--nav { background: #1e3a8a; color: #ffffff; box-shadow: 0 10px 24px rgba(30, 58, 138, .22); }
.shk-btn--nav:hover { background: #1b357d; color: #ffffff; }
.shk-btn--product { background: #2563eb; color: #ffffff; box-shadow: 0 10px 24px rgba(37, 99, 235, .24); }
.shk-btn--product:hover { background: #1f57d6; color: #ffffff; }
.shk-btn--wide { min-width: 240px; }
.shk-btn--full { display: flex; width: 100%; min-width: 0; }

/* --------------------------------------------------------
   11. サブキャッチ・ヒーロー（記事・商品ページ用）
   -------------------------------------------------------- */
body:has(.subcatch) .breadcrumb,
body:has(.subcatch) .eye-catch-wrap { display: none !important; }
body:has(.subcatch) .eye-catch { display: none !important; }
body:has(.subcatch) #content { margin-top: 0; }
.subcatch {
  --hero-bleed: 32px;
  width: calc(100% + (var(--hero-bleed) * 2));
  max-width: calc(100% + (var(--hero-bleed) * 2));
  margin: 0 calc(var(--hero-bleed) * -1) 56px;
  min-height: clamp(440px, 52vw, 620px);
  padding: clamp(18px, 2.6vw, 30px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.05) 100%),
    url("https://shikakulab.jp/wp/wp-content/uploads/itpassport-starter-kit.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* LP個別ヒーロー画像（page-id 単位の上書き）
   - 各固定ページのアイキャッチ画像と同URLをヒーロー背景にする
   - page-id をフックにする（スラッグ変更に影響されない）
   - 相対URLで本番・stg両方に対応（サイズ違いURLは使わない）
   - Migrated from WordPress Customizer Additional CSS (custom_css post 82, 2026-05-14)
     残りの重複・stg URLハードコード分は削除済み
   - 2026-05-15 追加：本番反映後の prod page-id を併記
       free-start-kit              : stg 1052 / prod 1097
       starter-kit                 : stg 1054 / prod 429
       frequent-questions-commentary: stg 1056 / prod 958
       mock-test-100               : stg 1058 / prod 1083
       30day-start-set             : stg 1060 / prod 974 */
body.page-id-1052 .subcatch,
body.page-id-1097 .subcatch {
  background-image:
    linear-gradient(90deg, rgba(3, 7, 18, 0.78), rgba(15, 23, 42, 0.48), rgba(15, 23, 42, 0.18)),
    url("/wp/wp-content/uploads/lp-itpassport-free-start-kit.png");
}
body.page-id-1054 .subcatch,
body.page-id-429 .subcatch {
  background-image:
    linear-gradient(90deg, rgba(3, 7, 18, 0.78), rgba(15, 23, 42, 0.48), rgba(15, 23, 42, 0.18)),
    url("/wp/wp-content/uploads/lp-itpassport-starter-kit.png");
}
body.page-id-1056 .subcatch,
body.page-id-958 .subcatch {
  background-image:
    linear-gradient(90deg, rgba(3, 7, 18, 0.78), rgba(15, 23, 42, 0.48), rgba(15, 23, 42, 0.18)),
    url("/wp/wp-content/uploads/lp-itpassport-frequent-questions-commentary.png");
}
body.page-id-1058 .subcatch,
body.page-id-1083 .subcatch {
  background-image:
    linear-gradient(90deg, rgba(3, 7, 18, 0.78), rgba(15, 23, 42, 0.48), rgba(15, 23, 42, 0.18)),
    url("/wp/wp-content/uploads/lp-itpassport-mock-test-100.png");
}
body.page-id-1060 .subcatch,
body.page-id-974 .subcatch {
  background-image:
    linear-gradient(90deg, rgba(3, 7, 18, 0.78), rgba(15, 23, 42, 0.48), rgba(15, 23, 42, 0.18)),
    url("/wp/wp-content/uploads/lp-itpassport-30day-start-set.png");
}
.subcatch, .subcatch * { box-sizing: border-box; }
.subcatch__card {
  width: min(620px, 100%);
  text-align: center;
  background: rgba(255,255,255,0.76);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 22px 24px 20px;
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 24px;
  box-shadow: 0 12px 34px rgba(15,23,42,0.10);
}
.subcatch__eyebrow {
  display: inline-block; margin-bottom: 14px; padding: 6px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  color: #1d4ed8; background: rgba(255,255,255,0.88); border-radius: 999px;
}
.subcatch__title {
  margin: 0 0 16px; font-size: clamp(30px, 4vw, 42px); line-height: 1.2;
  font-weight: 800; color: #111827; text-shadow: 0 1px 0 rgba(255,255,255,0.72);
}
.subcatch__title span { display: block; font-size: 0.78em; }
.subcatch__desc {
  margin: 0 0 18px; font-size: clamp(15px, 1.5vw, 17px);
  color: #374151; text-shadow: 0 1px 0 rgba(255,255,255,0.62);
}
.subcatch__price {
  margin: 0 0 18px; font-size: clamp(28px, 2.5vw, 30px);
  font-weight: 800; color: #111827; text-shadow: 0 1px 0 rgba(255,255,255,0.62);
}
.subcatch__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; max-width: 420px; min-height: 52px; padding: 14px 22px;
  border-radius: 999px; text-decoration: none; font-size: 16px;
  line-height: 1.4; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 10px 24px rgba(29,78,216,0.25);
}
.subcatch__note-main { margin: 0; font-size: 14px; font-weight: 700; color: #2b3a55; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
.subcatch__note-sub { margin: 4px 0 0; font-size: 12px; color: #6b7280; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }

/* --------------------------------------------------------
   12. モバイルレスポンシブ
   -------------------------------------------------------- */
@media (max-width: 767px) {
  .subcatch { --hero-bleed: 16px; margin-bottom: 42px; padding: 14px; }
  .subcatch__card { width: 100%; padding: 18px 16px 16px; border-radius: 20px; }
  .subcatch__title { font-size: 28px; margin-bottom: 12px; }
  .subcatch__desc  { font-size: 14px; margin-bottom: 14px; }
  .subcatch__price { font-size: 26px; margin-bottom: 14px; }
  .subcatch__btn   { min-height: 48px; font-size: 15px; }
}
@media (max-width: 640px) {
  .home-hero-full { height: auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
  .home-hero-overlay { display: none !important; }
  .home-hero-full::after {
    position: relative !important; top: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important; height: 260px !important; order: -1 !important;
    flex-shrink: 0 !important; border-radius: 18px 18px 0 0 !important; background-position: center 15% !important;
  }
  .home-hero-text-wrap {
    position: relative !important; top: auto !important; left: auto !important;
    transform: none !important; width: auto !important; order: 0 !important;
    margin: 0 !important; border-radius: 0 0 14px 14px !important;
    box-shadow: none !important; background: rgba(248,252,250,0.97) !important; padding: 22px 20px !important;
  }
  .home-hero-text-wrap h2 { font-size: 1.45rem !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: break-word !important; line-height: 1.4 !important; }
  .home-hero-text-wrap p { font-size: 0.875rem !important; line-height: 1.65 !important; }
  .home-hero-btn { display: block !important; text-align: center !important; width: 100% !important; box-sizing: border-box !important; padding: 13px 16px !important; font-size: 0.95rem !important; }
  .section-head h3 { font-size: 1.1rem !important; }
  .feature-grid { grid-template-columns: 1fr ; }
  .home .article { padding: 0 2px !important; }
  #header { display: none !important; }
  #skl-nav-search-btn, #skl-nav-search-box, #skl-nav-cart-btn { display: none !important; }
  .shk-btn { width: 100%; min-width: 0; padding: 14px 20px; font-size: 15px; }
}
@media (max-width: 430px) {
  .subcatch { padding: 12px; }
  .subcatch__card { padding: 16px 14px 14px; }
  .subcatch__eyebrow { font-size: 12px; padding: 5px 10px; }
  .subcatch__title { font-size: 26px; }
}

/* --------------------------------------------------------
   13. その他ユーティリティ
   -------------------------------------------------------- */
.sns-share { display: none !important; }
.sns-follow { display: none !important; }
.grecaptcha-badge { visibility: hidden; }
.section-head { margin-bottom: 18px !important; margin-top: 8px !important; }
.section-head h3 {
  font-size: 1.1rem !important; font-weight: 700 !important; color: #1a2e5a !important;
  padding-left: 13px !important; border-left: 4px solid #3a7fbf !important;
  margin: 0 !important; line-height: 1.4 !important; letter-spacing: 0.02em !important;
}
.single-product .related-entry-card-wrap,
.single-product .related-posts,
.single-product .related-list,
.single-product .related-articles,
.single-product .related-entry-heading,
.single-product .related-entry-border-partition { display: none !important; }

/* ============================================================
   資格別 CSS（固定ページから順次移植）
   ============================================================ */

/* ----------------------------------------------------------
   G検定 (.gk-)
   ---------------------------------------------------------- */

/* --- G検定: G検定トップ（post 5）--- */
.gk-hub{max-width:860px;margin:0 auto;padding:20px}
.gk-hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border-radius:16px;padding:40px 32px;margin-bottom:36px;text-align:center}
.gk-hero h2{font-size:24px;margin:0 0 12px;color:white;background:transparent}
.gk-hero p{margin:0 0 20px;opacity:.9;font-size:16px;line-height:1.7}
.gk-stats{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.gk-stat{text-align:center}
.gk-stat-num{font-size:18px;font-weight:800;display:block}
.gk-stat-label{font-size:12px;opacity:.8}
.gk-sec-title{font-size:17px;font-weight:700;color:#555;margin:0 0 14px;padding-left:12px;border-left:4px solid #667eea}
.gk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:28px}
.gk-card{background:white;border:1px solid #e2e8f0;border-radius:12px;padding:18px 16px;text-decoration:none;color:#333;box-shadow:0 2px 6px rgba(0,0,0,.05);transition:all .2s;display:block}
.gk-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.1);border-color:#667eea;text-decoration:none;color:#333}
.gk-card-icon{font-size:22px;margin-bottom:8px}
.gk-card-title{font-weight:700;font-size:16px;margin-bottom:4px}
.gk-card-desc{font-size:13px;color:#888}

/* --- G検定: G検定 練習問題（post 19）--- */
.quiz-container { max-width: 900px; margin: 0 auto; padding: 20px; }
.quiz-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.quiz-section { display: none; }
.gk-page-header { background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.gk-page-header h2 { color: #fff; font-size: 24px; font-weight: 800; margin: 0 0 4px; background: transparent; border: none; padding: 0; }
.gk-page-header .page-subtitle { color: rgba(255,255,255,0.95); font-size: 16px; font-weight: 700; margin: 0 0 8px; display: block; }
.gk-page-header .page-desc { color: rgba(255,255,255,0.85); font-size: 16px; margin: 0; }
.quiz-section .section-header { display: none !important; }
.section-header {
  background: linear-gradient(135deg, var(--section-color), var(--section-color2));
  color: white; padding: 20px 24px; border-radius: 12px; margin-bottom: 24px;
}
.question-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.question-num {
  display: inline-block; background: #667eea; color: #fff;
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; margin-right: 8px;
}
.question-text { font-size: 16px; font-weight: 600; color: #2d3748; margin-bottom: 16px; line-height: 1.6; }
.option-btn {
  padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 8px;
  background: white; cursor: pointer; text-align: left; font-size: 14px;
  transition: all 0.15s; color: #4a5568; line-height: 1.5;
}
.option-btn:hover:not(:disabled) { border-color: #667eea; background: #f0f4ff; color: #667eea; }
.explanation {
  margin-top: 16px; padding: 14px 16px; background: #fffbeb;
  border-left: 4px solid #f6ad55; border-radius: 0 8px 8px 0;
  font-size: 14px; color: #744210; display: none; line-height: 1.6;
}
.explanation.show { display: block; }
.score-bar {
  background: #f7fafc; border-radius: 12px; padding: 16px 24px;
  margin-bottom: 24px; display: flex; align-items: center; gap: 16px;
}
.score-num { font-size: 24px; font-weight: 800; color: #667eea; }
.progress-fill { height: 8px; border-radius: 999px; background: #667eea; transition: width 0.3s; }

/* --- G検定: G検定 模擬テスト（post 20）--- */
:root{--ac:#667eea;--ac2:#764ba2}
/* 共通レイアウト */
.mock-hd{color:white;padding:24px;border-radius:16px;margin-bottom:20px;text-align:center}
/* G検定テーマカラー */
.gk-mock { max-width: 860px; padding: 20px; }
.gk-mock .mock-hd{background:linear-gradient(135deg,#667eea,#764ba2)}
.mock-hd h2{margin:0 0 8px 0;font-size:24px}
.tbar{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:12px;padding:12px 20px;margin-bottom:16px}
.gk-mock .tbar{box-shadow:0 2px 12px rgba(102,126,234,.15)}
#timerDisplay{font-size:2em;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:2px}
.gk-mock #timerDisplay{color:#667eea}
@keyframes pulse{0%,100%{opacity:1}}
.pnum{font-size:1.2em;font-weight:700}
.gk-mock .pnum{color:#667eea}
.pfill{height:8px;border-radius:20px;transition:width .3s}
.gk-mock .pfill{background:linear-gradient(90deg,#667eea,#764ba2)}
.qcard{background:white;border-radius:12px;padding:20px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.gk-mock .qcard{border-left:4px solid #667eea}
.fe-mock .qcard{border-left:4px solid #f7971e}
.obtn:hover:not(:disabled){border-color:#667eea;background:#f0f4ff}
.obtn.sel{border-color:#667eea;background:#ebf0ff;font-weight:600}
.sbadge{display:inline-block;font-size:.75em;padding:2px 8px;border-radius:20px;margin-bottom:8px;font-weight:600}
.gk-mock .sbadge{background:rgba(102,126,234,.1);color:#667eea}
.subbtn{color:white;border:none;padding:16px 48px;border-radius:50px;font-size:1.1em;font-weight:700;cursor:pointer;transition:transform .2s}
.gk-mock .subbtn{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px rgba(102,126,234,.4)}
.rpanel{display:none;color:white;border-radius:16px;padding:32px;text-align:center;margin-top:20px}
.gk-mock .rpanel{background:linear-gradient(135deg,#667eea,#764ba2)}
.retrybtn{background:white;border:none;padding:12px 36px;border-radius:50px;font-size:1em;font-weight:700;cursor:pointer}
.gk-mock .retrybtn{color:#667eea}
#start-screen{text-align:center;padding:32px 20px 24px;background:linear-gradient(135deg,#f8f9ff 0%,#eef0ff 100%);border-radius:12px;margin-bottom:16px}
.start-stat-num{font-size:29px;font-weight:800;display:block}
.gk-mock .start-stat-num{color:#667eea}
#startBtn{color:white;border:none;border-radius:50px;padding:16px 48px;font-size:18px;font-weight:700;cursor:pointer}
.gk-mock #startBtn{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 14px rgba(102,126,234,.4)}
.mock-hd h2{color:white;background:transparent}

/* --- G検定: G検定 勉強法・参考書（post 21）--- */
.sg-wrap *{box-sizing:border-box;}
.sg-hero{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:16px;padding:32px;margin-bottom:32px;text-align:center;}
.sg-hero h1{margin:0 0 8px;font-size:26px;}
.sg-hero p{margin:0;opacity:.9;font-size:15px;}
.sg-section{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:28px;margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.sg-section h2{font-size:20px;color:#2d3748;margin:0 0 20px;padding-bottom:12px;border-bottom:3px solid #667eea;display:flex;align-items:center;gap:8px;}
.sg-section h3{font-size:16px;color:#4a5568;margin:20px 0 10px;}
.sg-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
.sg-tab{padding:8px 18px;border:2px solid #e2e8f0;border-radius:25px;cursor:pointer;font-size:13px;font-weight:600;background:#fff;color:#4a5568;transition:all .2s;}
.sg-tab.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;color:#fff;}
.sg-content{display:none;}
.sg-content.active{display:block;}
.sg-step{display:flex;gap:16px;margin-bottom:20px;align-items:flex-start;}
.sg-step-num{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;}
.sg-step-body h4{margin:0 0 6px;font-size:15px;color:#2d3748;}
.sg-step-body p{margin:0;font-size:14px;color:#718096;line-height:1.7;}
.sg-book{display:flex;gap:16px;padding:16px;border:1px solid #e2e8f0;border-radius:10px;margin-bottom:14px;align-items:flex-start;transition:box-shadow .2s;}
.sg-book:hover{box-shadow:0 4px 12px rgba(102,126,234,.15);}
.sg-book-icon{font-size:36px;flex-shrink:0;}
.sg-book h4{margin:0 0 4px;font-size:15px;color:#2d3748;}
.sg-book p{margin:0 0 6px;font-size:13px;color:#718096;line-height:1.6;}
.sg-book .sg-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600;}
.sg-badge.beginner{background:#e6fffa;color:#276749;}
.sg-badge.standard{background:#ebf4ff;color:#1a56db;}
.sg-badge.advanced{background:#faf5ff;color:#6b21a8;}
.sg-timeline{position:relative;padding-left:30px;}
.sg-timeline::before{content: " ";position:absolute;left:10px;top:0;bottom:0;width:2px;background:#e2e8f0;}
.sg-tl-item{position:relative;margin-bottom:20px;}
.sg-tl-item::before{content: " ";position:absolute;left:-24px;top:6px;width:12px;height:12px;border-radius:50%;background:#667eea;border:2px solid #fff;box-shadow:0 0 0 2px #667eea;}
.sg-tl-item h4{margin:0 0 4px;font-size:15px;color:#2d3748;}
.sg-tl-item p{margin:0;font-size:13px;color:#718096;line-height:1.7;}
.sg-tip{background:#fffbeb;border-left:4px solid #f6ad55;padding:12px 16px;border-radius:0 8px 8px 0;margin-bottom:12px;font-size:14px;color:#744210;line-height:1.7;}
.sg-domain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:16px;}
.sg-domain{border-radius:10px;padding:14px;border:1px solid;}
.sg-domain h4{margin:0 0 6px;font-size:14px;font-weight:700;}
.sg-domain p{margin:0;font-size:13px;line-height:1.6;}
.sg-info-box{background:#f7faff;border:1px solid #c3dafe;border-radius:10px;padding:18px;margin-bottom:16px;}
.sg-info-box h4{margin:0 0 8px;color:#1a56db;font-size:15px;}
.sg-info-box ul{margin:0;padding-left:20px;}
.sg-info-box li{font-size:14px;color:#4a5568;margin-bottom:4px;line-height:1.6;}

/* ----------------------------------------------------------
   ITパスポート（quiz- / mock- / sg- ※ ip- 相当）
   ---------------------------------------------------------- */

/* --- ITパスポート: ITパスポートトップ（post 223）--- */
.ip-hub{max-width:860px;margin:0 auto;padding:20px}
.ip-hero{background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);color:white;border-radius:16px;padding:40px 32px;margin-bottom:36px;text-align:center}
.ip-hero h2{font-size:24px;font-weight:700;margin-bottom:12px;background-color:transparent;color:#fff}
.ip-hero p{font-size:16px;opacity:.9;margin-bottom:24px}
.ip-stats{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.ip-stat{text-align:center}
.ip-stat-num{font-size:18px;font-weight:800;display:block}
.ip-stat-label{font-size:12px;opacity:.8}
.ip-sec-title{font-size:17px;font-weight:700;color:#555;margin:0 0 14px;padding-left:12px;border-left:4px solid #11998e}
.ip-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:28px}
.ip-card{background:white;border:1px solid #eee;border-radius:12px;padding:16px;transition:all .2s;display:block;text-decoration:none;color:#333;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.ip-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.1);border-color:#11998e;text-decoration:none;color:#333}
.ip-card-icon{font-size:22px;margin-bottom:8px}
.ip-card-title{font-weight:700;font-size:16px;margin-bottom:4px}
.ip-card-desc{font-size:13px;color:#777}

/* --- ITパスポート: ITパスポート 勉強法・参考書（post 231）--- */
.ip-sg-wrap *{box-sizing:border-box;}
.ip-sg-hero{background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff;border-radius:16px;padding:32px;margin-bottom:32px;text-align:center;}
.ip-sg-hero h1{margin:0 0 8px;font-size:26px;color:#fff;background:transparent;}
.ip-sg-hero p{margin:0;opacity:.9;font-size:15px;}
.ip-sg-section{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:28px;margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.ip-sg-section h2{font-size:20px;color:#2d3748;margin:0 0 20px;padding-bottom:12px;border-bottom:3px solid #11998e;display:flex;align-items:center;gap:8px;}
.ip-sg-section h3{font-size:16px;color:#4a5568;margin:20px 0 10px;}
.ip-sg-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
.ip-sg-tab{padding:8px 18px;border:2px solid #e2e8f0;border-radius:25px;cursor:pointer;font-size:13px;font-weight:600;background:#fff;color:#4a5568;transition:all .2s;}
.ip-sg-tab.active{background:linear-gradient(135deg,#11998e,#38ef7d);border-color:transparent;color:#fff;}
.ip-sg-content{display:none;}
.ip-sg-content.active{display:block;}
.ip-sg-step{display:flex;gap:16px;margin-bottom:20px;align-items:flex-start;}
.ip-sg-step-num{background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;}
.ip-sg-step-body h4{margin:0 0 6px;font-size:15px;color:#2d3748;}
.ip-sg-step-body p{margin:0;font-size:14px;color:#718096;line-height:1.7;}
.ip-sg-book{display:flex;gap:16px;padding:16px;border:1px solid #e2e8f0;border-radius:10px;margin-bottom:14px;align-items:flex-start;transition:box-shadow .2s;}
.ip-sg-book:hover{box-shadow:0 4px 12px rgba(17,153,142,.15);}
.ip-sg-book-icon{font-size:36px;flex-shrink:0;}
.ip-sg-book h4{margin:0 0 4px;font-size:15px;color:#2d3748;}
.ip-sg-book p{margin:0 0 6px;font-size:13px;color:#718096;line-height:1.6;}
.ip-sg-book .ip-sg-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600;}
.ip-sg-badge.beginner{background:#e6fffa;color:#276749;}
.ip-sg-badge.standard{background:#ebf4ff;color:#1a56db;}
.ip-sg-badge.advanced{background:#faf5ff;color:#6b21a8;}
.ip-sg-timeline{position:relative;padding-left:30px;}
.ip-sg-timeline::before{content: " ";position:absolute;left:10px;top:0;bottom:0;width:2px;background:#e2e8f0;}
.ip-sg-tl-item{position:relative;margin-bottom:20px;}
.ip-sg-tl-item::before{content: " ";position:absolute;left:-24px;top:6px;width:12px;height:12px;border-radius:50%;background:#11998e;border:2px solid #fff;box-shadow:0 0 0 2px #11998e;}
.ip-sg-tl-item h4{margin:0 0 4px;font-size:15px;color:#2d3748;}
.ip-sg-tl-item p{margin:0;font-size:13px;color:#718096;line-height:1.7;}
.ip-sg-tip{background:#f0faf7;border-left:4px solid #11998e;padding:12px 16px;border-radius:0 8px 8px 0;margin-bottom:12px;font-size:14px;color:#1a4a44;line-height:1.7;}
.ip-sg-domain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:16px;}
.ip-sg-domain{border-radius:10px;padding:14px;border:1px solid;}
.ip-sg-domain h4{margin:0 0 6px;font-size:14px;font-weight:700;}
.ip-sg-domain p{margin:0;font-size:13px;line-height:1.6;}
.ip-sg-info-box{background:#f0faf7;border:1px solid #9ae6b4;border-radius:10px;padding:18px;margin-bottom:16px;}
.ip-sg-info-box h4{margin:0 0 8px;color:#11998e;font-size:15px;}
.ip-sg-info-box ul{margin:0;padding-left:20px;}
.ip-sg-info-box li{font-size:14px;color:#4a5568;margin-bottom:4px;line-height:1.6;}

/* --- ITパスポート: ITパスポート 練習問題（post 233）--- */
.quiz-wrap { max-width: 860px; margin: 0 auto; padding: 20px; }
/* ITパスポート練習問題: スコアバーのテーマカラー */
.quiz-wrap .score-num { color: #11998e; }
.quiz-wrap .progress-fill { background: #11998e; }
.quiz-tab {
  padding: 8px 16px; border: 2px solid; border-radius: 20px;
  cursor: pointer; font-size: 14px; font-weight: 700;
  transition: all 0.2s; background: #fff; color: #555; opacity: 1;
}
.quiz-tab.active { transform: scale(1.03); box-shadow: 0 4px 12px rgba(0,0,0,0.15); color: #fff; border-color: transparent; }
.itp-page-header { background: linear-gradient(135deg, #11998e, #38ef7d); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.itp-page-header h2 { color: #fff; font-size: 24px; font-weight: 800; margin: 0 0 4px; background: transparent; border: none; padding: 0; }
.itp-page-header .page-subtitle { color: rgba(255,255,255,0.95); font-size: 16px; font-weight: 700; margin: 0 0 8px; display: block; }
.itp-page-header .page-desc { color: rgba(255,255,255,0.85); font-size: 16px; margin: 0; }
.quiz-section.active { display: block; }
.section-header h2 { margin: 0 0 4px 0; font-size: 24px; color: white; background: transparent; }
.section-header p { margin: 0; opacity: 0.9; font-size: 16px; }
.score-text { font-size: 14px; color: #4a5568; font-weight: 500; }
.progress { flex: 1; background: #e2e8f0; border-radius: 999px; height: 8px; }
.reset-btn {
  padding: 8px 16px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: white; cursor: pointer; font-size: 13px; color: #718096;
}
.reset-btn:hover { background: #f7fafc; }
.question-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.q-num {
  display: inline-block; background: var(--section-color); color: #fff;
  font-size: 12px; font-weight: 700; padding: 2px 8px;
  border-radius: 8px; margin-right: 8px;
}
.options { display: flex; flex-direction: column; gap: 8px; }
.option-btn.correct { border-color: #48bb78; background: #f0fff4; color: #276749; }
.option-btn.wrong { border-color: #fc8181; background: #fff5f5; color: #742a2a; }
.option-btn:disabled { cursor: not-allowed; }
.result-area {
  margin-top: 10px; font-size: 13px; padding: 8px 12px;
  border-radius: 6px; display: none;
}
.result-area.show { display: block; }
.result-area.ok { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }
.result-area.ng { background: #fff5f5; color: #9b2335; border: 1px solid #feb2b2; }

/* --- ITパスポート: ITパスポート 模擬テスト（post 245）--- */
:root{--ac:#11998e;--ac2:#38ef7d}
/* ITパスポート模擬テスト: IPテーマカラー */
.ip-mock { max-width: 860px; padding: 20px; }
.ip-mock .mock-hd{background:linear-gradient(135deg,#11998e,#38ef7d)}
.ip-mock .tbar{box-shadow:0 2px 12px rgba(17,153,142,.15)}
.ip-mock #timerDisplay{color:#11998e}
.ip-mock .pnum{color:#11998e}
.ip-mock .pfill{background:linear-gradient(90deg,#11998e,#38ef7d)}
.ip-mock .qcard{border-left:4px solid #11998e}
.ip-mock .obtn.sel{border-color:#11998e;background:#e6faf7}
.ip-mock .sbadge{background:rgba(17,153,142,.1);color:#11998e}
.ip-mock .subbtn{background:linear-gradient(135deg,#11998e,#38ef7d);box-shadow:0 4px 15px rgba(17,153,142,.4)}
.ip-mock .rpanel{background:linear-gradient(135deg,#11998e,#38ef7d)}
.ip-mock .retrybtn{color:#11998e}
.ip-mock .start-stat-num{color:#11998e}
.ip-mock #startBtn{background:linear-gradient(135deg,#11998e,#38ef7d);box-shadow:0 4px 14px rgba(17,153,142,.4)}
.mock-hd p{margin:0;opacity:.9;font-size:16px}
#timerDisplay.danger{color:#e53e3e;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.tlabel{font-size:.8em;color:#888}
.pinfo{text-align:right}
.pwrap{background:#eee;border-radius:20px;height:8px;margin-top:6px;width:200px}
.qcard.answered{border-left-color:#48bb78;opacity:.85}
.qnum{font-size:.8em;color:#888;font-weight:600;margin-bottom:6px}
.qtext{font-size:1em;font-weight:600;line-height:1.7;margin-bottom:14px}
.opts{display:grid;gap:8px}
.obtn{padding:10px 16px;border:2px solid #e2e8f0;border-radius:8px;background:white;cursor:pointer;text-align:left;font-size:.9em;transition:all .2s;line-height:1.5}
.obtn:hover:not(:disabled){border-color:#11998e;background:#f0fff8}
.obtn.sel{border-color:#11998e;background:#e6faf7;font-weight:600}
.obtn.correct{border-color:#48bb78;background:#f0fff4;color:#276749}
.obtn.wrong{border-color:#fc8181;background:#fff5f5;color:#c53030}
.obtn:disabled{cursor:default}
.submit-area{text-align:center;margin:30px 0}
.subbtn:hover{transform:translateY(-2px)}
.subbtn:disabled{opacity:.5;cursor:default;transform:none}
.rpanel.show{display:block}
.rscore{font-size:3.5em;font-weight:900;margin:16px 0}
.rgrade{font-size:1.3em;font-weight:700;margin-bottom:8px}
.rsub{opacity:.85;font-size:.95em;margin-bottom:20px}
.uwarn{background:#fff5f5;border:1px solid #fc8181;color:#c53030;padding:12px 16px;border-radius:8px;margin-bottom:16px;display:none;font-size:.9em}
#start-screen h3{font-size:22px;color:#4a5568;margin:0 0 20px;font-weight:700}
.start-stats{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.start-stat{background:white;border-radius:10px;padding:14px 20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.08);min-width:80px}
.start-stat-label{font-size:14px;color:#718096}
#startBtn:hover{opacity:.9}
.qhide{display:none!important}

/* ----------------------------------------------------------
   基本情報技術者試験 (.fe-)
   ---------------------------------------------------------- */

/* --- 基本情報: FEトップ（post 322）--- */
.fe-hub{max-width:860px;margin:0 auto;padding:20px}
.fe-hero{background:linear-gradient(135deg,#f7971e 0%,#ffd200 100%);color:white;border-radius:16px;padding:40px 32px;margin-bottom:36px;text-align:center}
.fe-hero h2{font-size:24px;font-weight:700;margin-bottom:12px;background-color:transparent;color:#fff}
.fe-hero p{font-size:16px;opacity:.9;margin-bottom:24px}
.fe-stats{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.fe-stat{text-align:center}
.fe-stat-num{font-size:18px;font-weight:800;display:block}
.fe-stat-label{font-size:12px;opacity:.8}
.fe-sec-title{font-size:15px;font-weight:700;color:#555;margin:0 0 14px;padding-left:12px;border-left:4px solid #f7971e}
.fe-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:28px}
.fe-card{background:white;border:1px solid #eee;border-radius:12px;padding:16px;transition:all .2s;display:block;text-decoration:none;color:#333;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.fe-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.1);border-color:#f7971e;text-decoration:none;color:#333}
.fe-card-icon{font-size:22px;margin-bottom:8px}
.fe-card-title{font-weight:700;font-size:14px;margin-bottom:4px}
.fe-card-desc{font-size:12px;color:#777}

/* --- 基本情報: FE 科目A 練習問題（post 343）--- */
.fe-prac{max-width:860px;margin:0 auto;padding:20px}
.fe-explain{margin-top:12px;padding:12px;background:#fffde7;border-left:4px solid #ffd200;border-radius:4px;font-size:14px;display:none}
.fe-explain.show{display:block}
.fe-prac-score{text-align:center;padding:20px;background:linear-gradient(135deg,#f7971e,#ffd200);border-radius:10px;color:#fff;margin:20px 0;display:none}
.fe-prac-score.show{display:block}
.fe-prac-score h3{font-size:24px;margin:0 0 8px}
.fe-prac-btn{margin-top:16px;padding:12px 24px;border-radius:8px;border:none;background:linear-gradient(135deg,#f7971e,#ffd200);color:#fff;font-size:16px;font-weight:bold;cursor:pointer;display:block;width:100%}
.fe-prac-btn:hover{opacity:.85}
.fe-progress{height:8px;background:#e0e0e0;border-radius:4px;margin:16px 0}
.fe-progress-bar{height:8px;background:linear-gradient(135deg,#f7971e,#ffd200);border-radius:4px;transition:.3s}

/* --- 基本情報: FE 科目A 模擬テスト（post 345）--- */
.fe-mock{max-width:860px;margin:0 auto;padding:20px}
.fe-mock-timer-wrap{position:sticky;top:0;z-index:100;background:#fff;border-bottom:2px solid #f7971e;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.fe-mock-timer.warning{color:#e74c3c;animation:blink .8s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.fe-mock-progress{font-size:13px;color:#777}
.fe-mock-start-btn,.fe-mock-submit-btn{background:linear-gradient(135deg,#f7971e,#ffd200);color:#fff;border:none;padding:16px 48px;border-radius:50px;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(247,151,30,.4)}
.fe-mock-start-btn:hover,.fe-mock-submit-btn:hover{opacity:.9;transform:translateY(-1px)}
.fe-mock-q-cat{display:inline-block;font-size:.75em;padding:2px 8px;border-radius:20px;margin-bottom:8px;font-weight:600;background:rgba(247,151,30,.1);color:#f7971e}
.fe-mock .obtn:hover{border-color:#f7971e;background:#fff8ee}
.fe-mock .obtn.sel{border-color:#f7971e;background:#fff3e0;font-weight:600}
.fe-mock-exp{margin-top:10px;font-size:13px;color:#555;background:#fafafa;border-left:3px solid #f7971e;padding:8px 12px;border-radius:0 6px 6px 0;display:none}
.fe-mock-exp.show{display:block}
.fe-mock-submit-wrap{text-align:center;padding:24px 0 16px}
.fe-mock-result{background:#fff;border:2px solid #f7971e;border-radius:16px;padding:32px;text-align:center;margin-top:20px;display:none}
.fe-mock-result.show{display:block}
.fe-mock-result h3{font-size:22px;font-weight:800;color:#f7971e;margin-bottom:12px}
.fe-mock-result p{font-size:16px;color:#555;margin-bottom:8px}
.fe-mock-score{font-size:3.5em;font-weight:800;color:#f7971e}
.fe-mock-retry{margin-top:20px;background:#f7971e;color:#fff;border:none;padding:12px 32px;border-radius:50px;font-size:15px;font-weight:700;cursor:pointer}
.fe-mock-retry:hover{opacity:.9}

/* --- 基本情報: FE 科目B 練習問題（post 736）--- */
.fe-prac-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.fe-prac-tab{padding:8px 16px;border-radius:20px;border:2px solid #f7971e;background:#fff;color:#c8660a;cursor:pointer;font-size:14px;font-weight:bold;transition:.2s}
.fe-prac-tab.active{background:#f7971e;color:#fff;border-color:transparent}
.fe-q-card{background:#fff;border:1px solid #e0e0e0;border-radius:10px;padding:20px;margin:16px 0;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.fe-q-num{display:inline-block;background:#f7971e;color:#fff;border-radius:8px;padding:2px 8px;font-size:13px;font-weight:bold;margin-right:8px}
.fe-q-text{font-size:16px;font-weight:bold;margin-bottom:16px;line-height:1.6}
.fe-choices{list-style:none;padding:0;margin:0}
.fe-choices li{padding:10px 14px;margin:6px 0;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:.2s;font-size:15px}
.fe-choices li:hover{border-color:#f7971e;background:#fff8f0}
.fe-choices li.correct{background:#e8f5e9;border-color:#4caf50;color:#2e7d32}
.fe-choices li.wrong{background:#ffebee;border-color:#f44336;color:#c62828}
.fe-explanation{margin-top:14px;padding:12px 16px;background:#fffde7;border-left:4px solid #ffd200;border-radius:4px;font-size:14px;color:#555;display:none}
.fe-explanation.show{display:block}
.section-header{background:linear-gradient(135deg,#f7971e,#ffd200);border-radius:12px;padding:24px;margin-bottom:24px}
.section-header h2{color:#fff;font-size:24px;font-weight:800;margin:0 0 4px;border:none;padding:0;background: transparent}
.section-header p{color:rgba(255,255,255,0.85);margin:0;font-size:16px}
.section-header .page-subtitle{color:rgba(255,255,255,0.95);font-size:16px;font-weight:700;margin:0 0 8px;display:block}
.fe-prac-section{display:none}
.fe-prac-section.active{display:block}
.fe-pseudo{background:#1e1e2e;color:#cdd6f4;border-radius:8px;padding:16px 20px;font-size:14px;line-height:1.8;margin:12px 0 16px;overflow-x:auto;white-space:pre;border-left:4px solid #f7971e}
.fe-pseudo .indent1{padding-left:2em}
.fe-pseudo .indent2{padding-left:4em}
.fe-score-bar{background:#f7fafc;border-radius:12px;padding:16px 24px;margin-bottom:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.fe-score-label{font-size:14px;color:#718096;font-weight:500;margin-bottom:0}
.fe-score-num{font-size:24px;font-weight:800;color:#f7971e;line-height:1.8}
.fe-prog-wrap{flex:1;min-width:80px}
.fe-prog-bg{height:8px;background:#e2e8f0;border-radius:999px}
.fe-prog-fill{height:8px;background:#f7971e;border-radius:999px;width:0%;transition:width 0.3s}
.fe-reset-btn{padding:8px 16px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer;font-size:13px;color:#718096;white-space:nowrap}
.fe-reset-btn:hover{background:#f7fafc}

/* --- 基本情報: FE 科目B 模擬テスト（post 737）--- */
.fe-mock-hero{background:linear-gradient(135deg,#f7971e 0%,#ffd200 100%);color:#fff;border-radius:16px;padding:32px;margin-bottom:28px;text-align:center}
.fe-mock-hero h2{font-size:24px;font-weight:700;margin-bottom:8px;background-color:transparent;color:#fff}
.fe-mock-hero p{font-size:16px;opacity:.9;margin:0}
.fe-mock-meta{display:flex;justify-content:center;gap:28px;margin-top:16px;flex-wrap:wrap}
.fe-mock-meta span{font-size:13px;background:rgba(255,255,255,.25);padding:6px 14px;border-radius:20px;font-weight:600}
.fe-mock-timer-wrap{position:sticky;top:0;z-index:100;background:#fff;border-bottom:2px solid #f7971e;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;display:none}
.fe-mock-timer{font-size:2em;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:2px;color:#f7971e}
.fe-mock-timer.warning{color:#e74c3c;animation:fe-blink .8s infinite}
@keyframes fe-blink{0%,100%{opacity:1}50%{opacity:.3}}
.fe-mock-progress{font-size:13px;color:#888}
.fe-mock-start-wrap{text-align:center;padding:32px 20px 24px;background:linear-gradient(135deg,#fff8f0 0%,#fff3e0 100%);border-radius:12px;margin-bottom:16px}
.fe-mock-btn{display:inline-block;background:linear-gradient(135deg,#f7971e,#ffd200);color:#fff;border:none;padding:16px 48px;border-radius:50px;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 4px 15px rgba(247,151,30,.4);transition:.2s}
.fe-mock-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(247,151,30,.5)}
.fe-mock-btn:disabled{background:#ccc;box-shadow:none;cursor:not-allowed;transform:none}
.fe-mock-questions{display:none}
.fe-mock-badge{display:inline-block;border-radius:12px;padding:2px 10px;font-size:12px;font-weight:600;margin-left:6px}
.fe-mock-badge.algo{background:#e3f2fd;color:#1565c0}
.fe-mock-badge.sec{background:#fce4ec;color:#880e4f}
.fe-mock-choices{list-style:none;padding:0;margin:0}
.fe-mock-choices li{padding:10px 16px;margin:0;border:2px solid #e2e8f0;border-radius:8px;background:white;cursor:pointer;transition:all .2s;font-size:.9em;line-height:1.5}
.fe-mock-choices li:hover{border-color:#f7971e;background:#fff8ee}
.fe-mock-choices li.selected{border-color:#f7971e;background:#fff3e0;font-weight:600}
.fe-mock-result{display:none;padding:30px 0}
.fe-mock-score-card{background:linear-gradient(135deg,#f7971e 0%,#ffd200 100%);color:#fff;border-radius:16px;padding:32px;text-align:center;margin-bottom:28px}
.fe-mock-score-card h3{font-size:20px;font-weight:700;margin:0 0 12px;color:#fff}
.fe-mock-score-big{font-size:3.5em;font-weight:900;line-height:1}
.fe-mock-score-label{font-size:15px;opacity:.9;margin-top:8px}
.fe-mock-pass{font-size:18px;font-weight:700;margin-top:16px;padding:8px 24px;border-radius:20px;display:inline-block}
.fe-mock-pass.pass{background:#4caf50;color:#fff}
.fe-mock-pass.fail{background:#f44336;color:#fff}
.fe-mock-review{margin-top:24px}
.fe-mock-review-item{background:#fff;border:1px solid #e0e0e0;border-radius:10px;padding:18px;margin:12px 0;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.fe-mock-review-item.correct-item{border-left:4px solid #4caf50}
.fe-mock-review-item.wrong-item{border-left:4px solid #f44336}
.fe-mock-review-q{font-size:14px;font-weight:600;margin-bottom:10px;color:#333}
.fe-mock-review-ans{font-size:13px;margin:4px 0}
.fe-mock-review-ans .correct-label{color:#2e7d32;font-weight:700}
.fe-mock-review-ans .wrong-label{color:#c62828;font-weight:700}
.fe-mock-review-exp{font-size:13px;color:#555;margin-top:8px;padding:10px;background:#fffde7;border-radius:6px;border-left:3px solid #ffd200}
.fe-mock-submit-wrap{text-align:center;margin:30px 0}
.fe-pseudo .kw{color:#cba6f7;font-weight:bold}
.fe-pseudo .op{color:#89dceb}
.fe-pseudo .num{color:#fab387}
.fe-pseudo .comment{color:#6c7086;font-style:italic}
.fe-mock-hero .toc { display: none !important; }
.fe-mock-start-title{font-size:22px;font-weight:700;color:#4a5568;margin-bottom:20px}
.fe-mock-stats{display:flex;justify-content:center;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.fe-mock-stat{background:white;border-radius:10px;padding:14px 20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.08);min-width:80px}
.fe-mock-stat-num{display:block;font-size:29px;font-weight:800;color:#f7971e}
.fe-mock-stat-label{display:block;font-size:14px;color:#718096}

/* ============================================================
   FE 科目A 模擬テスト 追記CSS
   ============================================================ */
.fe-mock { max-width: 860px; padding: 20px; }
.fe-mock .mock-hd{background:linear-gradient(135deg,#f7971e,#ffd200);color:#fff;padding:24px;border-radius:16px;margin-bottom:20px;text-align:center}
.fe-mock .mock-hd h2{margin:0 0 8px 0;font-size:24px;color:#fff;background:transparent}
.fe-mock .mock-hd p{margin:0;opacity:.9;font-size:16px}

#fe-start-screen{text-align:center;padding:32px 20px 24px;background:linear-gradient(135deg,#fff8f0 0%,#fff3e0 100%);border-radius:12px;margin-bottom:16px}
#fe-start-screen h3{font-size:22px;color:#4a5568;margin:0 0 20px;font-weight:700}
.fe-mock .start-stats{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.fe-mock .start-stat{background:#fff;border-radius:10px;padding:14px 20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.08);min-width:80px}
.fe-mock .start-stat-num{font-size:29px;font-weight:800;display:block;color:#f7971e}
.fe-mock .start-stat-label{font-size:14px;color:#718096}
#feStartBtn{background:linear-gradient(135deg,#f7971e,#ffd200);color:#fff;border:none;border-radius:50px;padding:16px 48px;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(247,151,30,.4)}
#feStartBtn:hover{opacity:.9}

.fe-mock .tbar{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:12px;padding:12px 20px;margin-bottom:16px;box-shadow:0 2px 12px rgba(247,151,30,.15)}
#feTimerDisplay{font-size:2em;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:2px;color:#f7971e}
#feTimerDisplay.danger{color:#e53e3e;animation:pulse 1s infinite}
.fe-mock .pnum{font-size:1.2em;font-weight:700;color:#f7971e}
.fe-mock .pfill{height:8px;border-radius:20px;background:linear-gradient(90deg,#f7971e,#ffd200);transition:width .3s}
.fe-mock .pwrap{background:#eee;border-radius:20px;height:8px;margin-top:6px;width:200px}
.fe-mock .tlabel{font-size:.8em;color:#888}
.fe-mock .pinfo{text-align:right}

.fe-mock .qcard{background:#fff;border-radius:12px;padding:20px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,.08);border-left:4px solid #f7971e}
.fe-mock .qcard.answered{border-left-color:#48bb78;opacity:.9}
.fe-mock .sbadge{display:inline-block;font-size:.75em;padding:2px 8px;border-radius:20px;margin-bottom:8px;font-weight:600;background:rgba(247,151,30,.1);color:#f7971e}
.fe-mock .qnum{font-size:.8em;color:#888;font-weight:600;margin-bottom:6px}
.fe-mock .qtext{font-size:1em;font-weight:600;line-height:1.7;margin-bottom:14px}
.fe-mock .opts{display:grid;gap:8px}
.fe-mock .obtn{padding:10px 16px;border:2px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer;text-align:left;font-size:.9em;transition:all .2s;line-height:1.5}
.fe-mock .obtn:hover:not(:disabled){border-color:#f7971e;background:#fff8ee}
.fe-mock .obtn.sel{border-color:#f7971e;background:#fff3e0;font-weight:600}
.fe-mock .obtn.correct{border-color:#48bb78;background:#f0fff4;color:#276749}
.fe-mock .obtn.wrong{border-color:#fc8181;background:#fff5f5;color:#c53030}
.fe-mock .obtn:disabled{cursor:default}
.fe-mock .fe-mock-exp{margin-top:10px;font-size:13px;color:#555;background:#fafafa;border-left:3px solid #f7971e;padding:8px 12px;border-radius:0 6px 6px 0;display:none}
.fe-mock .fe-mock-exp.show{display:block}

.fe-mock .uwarn{background:#fff5f5;border:1px solid #fc8181;color:#c53030;padding:12px 16px;border-radius:8px;margin-bottom:16px;display:none;font-size:.9em}
.fe-mock .submit-area{text-align:center;margin:30px 0}
.fe-mock .subbtn{background:linear-gradient(135deg,#f7971e,#ffd200);color:#fff;border:none;padding:16px 48px;border-radius:50px;font-size:1.1em;font-weight:700;cursor:pointer;box-shadow:0 4px 15px rgba(247,151,30,.4)}
.fe-mock .subbtn:hover{transform:translateY(-2px)}
.fe-mock .subbtn:disabled{opacity:.5;cursor:default;transform:none}

.fe-mock .rpanel{display:none;color:#fff;border-radius:16px;padding:32px;text-align:center;margin-top:20px;background:linear-gradient(135deg,#f7971e,#ffd200)}
.fe-mock .rpanel.show{display:block}
.fe-mock .rscore{font-size:3.5em;font-weight:900;margin:16px 0}
.fe-mock .rgrade{font-size:1.3em;font-weight:700;margin-bottom:8px}
.fe-mock .rsub{opacity:.9;font-size:.95em;margin-bottom:20px}
.fe-mock .retrybtn{background:#fff;border:none;padding:12px 36px;border-radius:50px;font-size:1em;font-weight:700;cursor:pointer;color:#f7971e}

@media (max-width: 767px){
  .fe-mock{padding:16px 12px}
  .fe-mock .tbar{flex-direction:column;align-items:flex-start;gap:12px}
  .fe-mock .pinfo{text-align:left;width:100%}
  .fe-mock .pwrap{width:100%}
  #feStartBtn,.fe-mock .subbtn{width:100%;padding:14px 20px}
}

/* =============================================
   FE 科目B 模擬テスト 追記CSS
   ============================================= */
.fe-mock .qhide {
  display: none !important;
}

.fe-mock .pnum {
  color: #f7971e;
}

.fe-mock .pfill {
  background: linear-gradient(90deg, #f7971e, #ffd200);
}

.fe-mock #fe-mock-b-submit-area {
  text-align: center;
  margin: 30px 0 24px;
}

.fe-mock .subbtn {
  background: linear-gradient(135deg, #f7971e, #ffd200);
  box-shadow: 0 4px 15px rgba(247,151,30,.4);
  color: #fff;
  border: none;
  padding: 16px 48px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
}

.fe-mock .subbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(247,151,30,.5);
}

.fe-mock .subbtn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.fe-mock .uwarn {
  display: none;
  background: #fff5f5;
  border: 1px solid #fc8181;
  color: #c53030;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 0 0 16px;
  font-size: 14px;
}

.fe-mock #fe-mock-b-qarea {
  display: block;
}

.fe-mock .fe-mock-q-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #f7971e;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

.fe-mock .fe-mock-q-head {
  margin-bottom: 8px;
}

.fe-mock .fe-mock-q-cat {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(247,151,30,.1);
  color: #f7971e;
}

.fe-mock .fe-mock-q-num {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 12px;
  line-height: 1.4;
}

.fe-mock .fe-mock-q-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  color: #1f2937;
  margin-bottom: 14px;
}

.fe-mock .fe-mock-choices {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.fe-mock .fe-mock-choices li {
  padding: 10px 16px;
  margin: 0;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all .2s;
  font-size: 14px;
  line-height: 1.6;
  color: #334155;
}

.fe-mock .fe-mock-choices li:hover {
  border-color: #f7971e;
  background: #fff8ee;
}

.fe-mock .fe-mock-choices li.selected {
  border-color: #f7971e;
  background: #fff3e0;
  font-weight: 600;
}

.fe-mock .fe-mock-review-q .fe-mock-badge {
  margin-right: 6px;
}

@media (max-width: 767px) {
  .fe-mock .subbtn {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
  }

  .fe-mock .fe-mock-q-card {
    padding: 16px;
  }

  .fe-mock .fe-mock-q-text {
    font-size: 15px;
  }
}

/* --- G検定 練習問題：正解・不正解表示 --- */
.quiz-container .result-area{
  margin-top:14px;
  padding:12px 14px;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  line-height:1.6;
  display:none;
}
.quiz-container .result-area.show{display:block;}
.quiz-container .result-area.ok{
  background:#f0fff4;
  border:1px solid #9ae6b4;
  color:#276749;
}
.quiz-container .result-area.ng{
  background:#fff5f5;
  border:1px solid #fc8181;
  color:#c53030;
}
.quiz-container .question-card .explanation{
  margin-top:12px;
}

/* ITパスポート練習問題：解説文を他資格と同じ見た目に統一 */
.quiz-wrap .question-card .explanation {
  margin-top: 16px;
  padding: 14px 16px;
  background: #fffbeb;
  border-left: 4px solid #f6ad55;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: #744210;
  display: none;
  line-height: 1.6;
}

.quiz-wrap .question-card .explanation.show {
  display: block;
}

/* --- FE 科目A 練習問題：正解・不正解表示 追記 --- */
.fe-result-area{
  display:none;
  margin-top:12px;
  padding:10px 14px;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  line-height:1.6;
}
.fe-result-area.show{display:block}
.fe-result-area.ok{
  background:#e8f5e9;
  color:#2e7d32;
  border:1px solid #c8e6c9;
}
.fe-result-area.ng{
  background:#ffebee;
  color:#c62828;
  border:1px solid #ffcdd2;
}

/* --- FE 科目B 練習問題：正解・不正解表示 --- */
.fe-q-result{display:none;margin-top:12px;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:700;line-height:1.6}
.fe-q-result.show{display:block}
.fe-q-result.ok{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}
.fe-q-result.ng{background:#ffebee;color:#c62828;border:1px solid #ef9a9a}

/* ==============================
   WooCommerce商品ページ：前後ナビ・関連記事のサムネイルだけ非表示
   ※ページネーション自体は残す
   ============================== */

body.single-product .pager-post-navi img,
body.single-product .pager-post-navi figure,
body.single-product .pager-post-navi .card-thumb,
body.single-product .pager-post-navi .no-image,
body.single-product .pager-post-navi .prev-post-thumb,
body.single-product .pager-post-navi .next-post-thumb,
body.single-product .pager-post-navi .post-navi-thumb,
body.single-product .pager-post-navi .navi-entry-card-thumb,
body.single-product .related-entry-card-thumb,
body.single-product .related-list .card-thumb,
body.single-product .related-list figure,
body.single-product .related-list img,
body.single-product .related-list .no-image {
  display: none !important;
}

/* サムネイルを消した後の余白調整 */
body.single-product .pager-post-navi .card-content,
body.single-product .pager-post-navi .navi-entry-card-content,
body.single-product .related-entry-card-content,
body.single-product .related-list .card-content {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* 前後ナビのテキスト表示を崩さない */
body.single-product .pager-post-navi a,
body.single-product .pager-post-navi .a-wrap {
  align-items: center !important;
}


/* =====================================================================
   資格ラボ 共通デザインシステム（ql- prefix）— v2.5
   ---------------------------------------------------------------------
   v2.5 ブラッシュアップ:
   - Cocoon 親テーマの .entry-content h1〜h6 装飾（左縦線・グレー背景・
     枠・影・下線・::before/::after）を .ql-top 内で完全リセット
   - ql-top 系セレクタを全て .entry-content プレフィックス付きで詳細度確保
     （例: .entry-content .ql-top__title）→ Cocoon 既定スタイルに勝つ
   - ボーダーレイヤー・最終CTAの白帯誤検知を解消
   - !important は基本不使用。打ち消し用の限定箇所のみ理由付きで使用
   .ql-top スコープ。Cocoon / 既存記事 / 既存LP には影響しない。
   ===================================================================== */

/* -----------------------------
   トークン
   ----------------------------- */
:root {
  --ql-navy: #10213f;
  --ql-navy-deep: #07162d;
  --ql-blue: #1f6feb;
  --ql-blue-deeper: #1858c2;
  --ql-blue-soft: #eaf3ff;
  --ql-cyan: #1fb6ff;
  --ql-cyan-soft: #d8ecff;
  --ql-gold: #c9a227;
  --ql-bg: #f6f8fc;
  --ql-bg-soft: #f0f4fa;
  --ql-bg-blue: #eaf2fb;
  --ql-surface: #ffffff;
  --ql-text: #1f2937;
  --ql-text-soft: #4b5565;
  --ql-muted: #6b7280;
  --ql-border: #dbe3ef;
  --ql-success: #16a34a;

  --ql-radius-sm: 8px;
  --ql-radius: 14px;
  --ql-radius-lg: 20px;
  --ql-radius-xl: 28px;

  --ql-shadow-sm: 0 1px 2px rgba(16,33,63,.04), 0 2px 6px rgba(16,33,63,.04);
  --ql-shadow: 0 4px 14px rgba(16,33,63,.06), 0 2px 6px rgba(16,33,63,.04);
  --ql-shadow-md: 0 10px 24px rgba(16,33,63,.08), 0 3px 8px rgba(16,33,63,.05);
  --ql-shadow-lg: 0 18px 40px rgba(16,33,63,.10), 0 6px 14px rgba(16,33,63,.06);
  --ql-shadow-glow: 0 30px 60px rgba(7,22,45,.30);

  --ql-container: 1240px;
  --ql-gap: 28px;

  --ql-ease: cubic-bezier(.2,.7,.2,1);
}

/* =====================================================================
   ★ Cocoon 親テーマ見出し装飾リセット（.ql-top スコープ内のみ）
   ---------------------------------------------------------------------
   Cocoon の .entry-content h2/h3 などには左縦線、グレー背景、枠、影、
   下線などが付いており、それが ql-top 内の見出しに混入する。
   ここで .entry-content .ql-top 配下の全見出しに対して、これらを
   無効化する。
   詳細度: .entry-content .ql-top :is(h1〜h6) = (0,3,1)
           Cocoon の .entry-content h2 = (0,1,1) → 確実に勝つ
   ===================================================================== */
.entry-content .ql-top :is(h1, h2, h3, h4, h5, h6) {
  background: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  padding: 0;
  margin: 0;
  color: inherit;
  line-height: inherit;
  font-weight: inherit;
}
.entry-content .ql-top :is(h1, h2, h3, h4, h5, h6)::before,
.entry-content .ql-top :is(h1, h2, h3, h4, h5, h6)::after {
  content: none;
  display: none;
  background: none;
  border: 0;
}

/* -----------------------------
   共通: コンテナ
   ----------------------------- */
.ql-container {
  width: 100%;
  max-width: var(--ql-container);
  margin-inline: auto;
  padding-inline: 32px;
  box-sizing: border-box;
}

/* -----------------------------
   共通: ボタン
   ----------------------------- */
.ql-btn {
  --ql-btn-bg: var(--ql-blue);
  --ql-btn-fg: #fff;
  --ql-btn-bd: var(--ql-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 15px 32px;
  border-radius: 999px;
  border: 1.5px solid var(--ql-btn-bd);
  background: var(--ql-btn-bg);
  color: var(--ql-btn-fg);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform .18s var(--ql-ease),
    box-shadow .18s var(--ql-ease),
    background .18s var(--ql-ease),
    color .18s var(--ql-ease),
    border-color .18s var(--ql-ease);
  box-shadow: var(--ql-shadow-sm);
  white-space: nowrap;
}
.ql-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--ql-shadow);
  text-decoration: none;
}
.ql-btn:focus-visible {
  outline: 3px solid rgba(31,111,235,.45);
  outline-offset: 2px;
}
.ql-btn:active {
  transform: translateY(0);
  box-shadow: var(--ql-shadow-sm);
}
.ql-btn--primary {
  --ql-btn-bg: var(--ql-blue);
  --ql-btn-fg: #fff;
  --ql-btn-bd: var(--ql-blue);
  box-shadow: 0 8px 18px rgba(31,111,235,.28);
}
.ql-btn--primary:hover {
  --ql-btn-bg: var(--ql-blue-deeper);
  --ql-btn-bd: var(--ql-blue-deeper);
  color: #fff;
  box-shadow: 0 12px 28px rgba(31,111,235,.34);
}
.ql-btn--secondary {
  --ql-btn-bg: #fff;
  --ql-btn-fg: var(--ql-navy);
  --ql-btn-bd: var(--ql-border);
}
.ql-btn--secondary:hover {
  --ql-btn-bg: var(--ql-blue-soft);
  --ql-btn-fg: var(--ql-navy);
  --ql-btn-bd: #c9d8ee;
}
.ql-top-hero .ql-btn--secondary,
.ql-final-cta .ql-btn--secondary {
  --ql-btn-bg: rgba(255,255,255,.10);
  --ql-btn-fg: #fff;
  --ql-btn-bd: rgba(255,255,255,.46);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ql-top-hero .ql-btn--secondary:hover,
.ql-final-cta .ql-btn--secondary:hover {
  --ql-btn-bg: rgba(255,255,255,.18);
  --ql-btn-fg: #fff;
  --ql-btn-bd: rgba(255,255,255,.65);
}
.ql-top-hero .ql-btn,
.ql-final-cta .ql-btn {
  min-height: 58px;
  padding: 16px 36px;
  font-size: 1.05rem;
}

/* -----------------------------
   共通: リンクリスト（末尾矢印に統一・FA優先）
   ----------------------------- */
.ql-link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ql-link-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  color: var(--ql-text);
  text-decoration: none;
  font-size: .98rem;
  transition: color .18s var(--ql-ease);
  flex-wrap: wrap;
}
.ql-link-list a::after {
  content: "›";
  display: inline-block;
  margin-left: 4px;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--ql-blue);
  transition: transform .2s var(--ql-ease), color .2s var(--ql-ease);
  flex-shrink: 0;
}
.ql-link-list a:hover { color: var(--ql-blue); text-decoration: none; }
.ql-link-list a:hover::after { transform: translateX(2px); color: var(--ql-blue-deeper); }
.ql-link-list a:has(.fas)::after,
.ql-link-list a:has(.far)::after,
.ql-link-list a:has(.fal)::after,
.ql-link-list a:has(.fab)::after { content: none; }

/* トップ用カード型リンク */
.ql-link-list--top {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ql-link-list--top li { display: flex; }
.ql-link-list--top a {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18px 22px;
  background: var(--ql-surface);
  border: 1px solid var(--ql-border);
  border-radius: var(--ql-radius);
  box-shadow: var(--ql-shadow-sm);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ql-text);
  transition: transform .2s var(--ql-ease), box-shadow .2s var(--ql-ease), border-color .2s var(--ql-ease);
  flex-wrap: wrap;
}
.ql-link-list--top a::after {
  content: "→";
  margin-left: auto;
  color: var(--ql-blue);
  font-size: 1.1em;
  font-weight: 700;
  transition: transform .2s var(--ql-ease), color .2s var(--ql-ease);
  flex-shrink: 0;
}
.ql-link-list--top a:hover {
  transform: translateY(-1px);
  box-shadow: var(--ql-shadow-md);
  border-color: #c9d8ee;
  color: var(--ql-navy);
}
.ql-link-list--top a:hover::after { transform: translateX(3px); color: var(--ql-blue-deeper); }
.ql-link-list--top a:has(.fas)::after,
.ql-link-list--top a:has(.far)::after,
.ql-link-list--top a:has(.fal)::after,
.ql-link-list--top a:has(.fab)::after { content: none; }

/* -----------------------------
   FontAwesome 5 アイコン対応（v2.5 微調整）
   ---------------------------------------------------------------------
   テキストとの間隔を 8px に拡大、サイズは .82em に縮小（行頭記号感を排除）。
   chevron は末尾配置で hover 時 3px 右へ。アイコン色は青（リンク色から
   独立）で、過剰アニメなしの上品な動き。
   ----------------------------- */
.ql-top a .fas,
.ql-top a .far,
.ql-top a .fal,
.ql-top a .fab {
  display: inline-block;
  vertical-align: middle;
  font-size: .82em;
  line-height: 1;
  color: inherit;
  transition: transform .2s var(--ql-ease), color .2s var(--ql-ease);
}
.ql-top a > .fas:first-child,
.ql-top a > .far:first-child,
.ql-top a > .fal:first-child,
.ql-top a > .fab:first-child {
  margin-right: 8px;
  font-size: .8em;
  color: var(--ql-blue);
}
.ql-top a > .fa-chevron-right,
.ql-top a > .fa-arrow-right,
.ql-top a > .fa-angle-right,
.ql-top a > .fa-caret-right,
.ql-top a > .fa-long-arrow-alt-right {
  margin-left: 8px;
  margin-right: 0;
  font-size: .78em;
  color: var(--ql-blue);
}
.ql-top a:hover > .fa-chevron-right,
.ql-top a:hover > .fa-arrow-right,
.ql-top a:hover > .fa-angle-right,
.ql-top a:hover > .fa-caret-right,
.ql-top a:hover > .fa-long-arrow-alt-right {
  transform: translateX(3px);
  color: var(--ql-blue-deeper);
}

/* =====================================================================
   トップページ v2.5  （.entry-content .ql-top スコープで詳細度確保）
   ===================================================================== */

/* -----------------------------
   フルブリード + セクション余白統一
   ----------------------------- */
.entry-content .ql-top {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 120px 0;
  box-sizing: border-box;
  background: var(--ql-surface);
  overflow-x: clip;
}
.entry-content .ql-top .ql-container {
  max-width: var(--ql-container);
  position: relative;
  z-index: 1;
}

/* -----------------------------
   共通見出し v2.5
   ---------------------------------------------------------------------
   既に上の Cocoonリセットで h2 等の装飾は無効化済み。
   ここでは ql-top__title 用に上品な見出しスタイルを再適用。
   ----------------------------- */
.entry-content .ql-top .ql-top__header {
  margin: 0 auto 80px;
  max-width: 880px;
  padding: 0;
  background: none;
  border: 0;
}
.entry-content .ql-top .ql-top__header--center { text-align: center; }

.entry-content .ql-top .ql-top__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--ql-blue);
  text-transform: uppercase;
}
.entry-content .ql-top .ql-top__eyebrow::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--ql-cyan), var(--ql-blue));
  flex-shrink: 0;
}
.entry-content .ql-top .ql-top__header--center .ql-top__eyebrow {
  justify-content: center;
}
.entry-content .ql-top .ql-top__header--center .ql-top__eyebrow::before {
  content: "";
  display: inline-block;
  background: linear-gradient(90deg, transparent, var(--ql-blue));
}
.entry-content .ql-top .ql-top__header--center .ql-top__eyebrow::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--ql-blue), transparent);
  flex-shrink: 0;
}

.entry-content .ql-top .ql-top__title {
  margin: 0 0 22px;
  padding: 0;
  background: none;
  border: 0;
  font-size: clamp(2.05rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: .015em;
  color: var(--ql-navy);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.entry-content .ql-top .ql-top__lead {
  margin: 0;
  padding: 0;
  font-size: 1.06rem;
  line-height: 2;
  color: var(--ql-text-soft);
  max-width: 720px;
}
.entry-content .ql-top .ql-top__header--center .ql-top__lead {
  margin-inline: auto;
}

/* -----------------------------
   ヒーロー
   ----------------------------- */
.entry-content .ql-top.ql-top-hero {
  position: relative;
  padding: 152px 0 132px;
  background: var(--ql-navy-deep);
  color: #fff;
  isolation: isolate;
}
.entry-content .ql-top .ql-top-hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}
.entry-content .ql-top .ql-top-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transform: scale(1.04);
  filter: saturate(1.06) contrast(1.02);
}
.entry-content .ql-top .ql-top-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 520px at 92% 100%, rgba(31,182,255,.16), transparent 60%),
    linear-gradient(110deg,
      rgba(7,22,45,.90) 0%,
      rgba(7,22,45,.78) 28%,
      rgba(16,33,63,.52) 58%,
      rgba(16,33,63,.20) 82%,
      rgba(16,33,63,.05) 100%);
}
.entry-content .ql-top.ql-top-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 25% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 25% 50%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: -1;
}
.entry-content .ql-top .ql-top-hero__inner { display: block; }
.entry-content .ql-top .ql-top-hero__content { max-width: 660px; }

.entry-content .ql-top .ql-top-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--ql-cyan-soft);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.entry-content .ql-top .ql-top-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ql-cyan);
  box-shadow: 0 0 10px rgba(31,182,255,.7);
  flex-shrink: 0;
}
/* ヒーロー h1 — Cocoonリセット後のクリーンな見出し */
.entry-content .ql-top .ql-top-hero__title {
  margin: 0 0 28px;
  padding: 0;
  background: none;
  border: 0;
  font-size: clamp(2.4rem, 5vw, 3.7rem);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: .005em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.30);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.entry-content .ql-top .ql-top-hero__lead {
  margin: 0 0 40px;
  max-width: 600px;
  font-size: clamp(1.05rem, 1.3vw, 1.16rem);
  line-height: 2;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 14px rgba(0,0,0,.32);
}
.entry-content .ql-top .ql-top-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}
.entry-content .ql-top .ql-top-hero__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.entry-content .ql-top .ql-top-hero__meta li {
  position: relative;
  padding: 8px 18px 8px 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.95);
  font-size: .9rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.entry-content .ql-top .ql-top-hero__meta li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ql-cyan);
  box-shadow: 0 0 10px rgba(31,182,255,.6);
}

/* -----------------------------
   できること（features）
   ----------------------------- */
.entry-content .ql-top.ql-top-features { background: var(--ql-bg); }
.entry-content .ql-top .ql-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.entry-content .ql-top .ql-feature {
  position: relative;
  padding: 40px 30px;
  background: var(--ql-surface);
  border: 1px solid var(--ql-border);
  border-radius: var(--ql-radius-lg);
  box-shadow: var(--ql-shadow-sm);
  transition: transform .2s var(--ql-ease), box-shadow .2s var(--ql-ease);
}
.entry-content .ql-top .ql-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--ql-shadow-md);
}
.entry-content .ql-top .ql-feature__num {
  margin: 0 0 18px;
  padding: 0;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: .12em;
  background: linear-gradient(90deg, var(--ql-blue), var(--ql-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ql-blue);
}
/* カード内見出し — Cocoon h3 装飾を完全に排除済みの上で再適用 */
.entry-content .ql-top .ql-feature__title {
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--ql-navy);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.entry-content .ql-top .ql-feature__text {
  margin: 0;
  font-size: 1rem;
  line-height: 2;
  color: var(--ql-text-soft);
}

/* -----------------------------
   学びたい資格を選ぶ
   ---------------------------------------------------------------------
   カード上部のアクセントラインは、border-top に切り替えて
   border-radius と完全に追従させる（疑似要素方式から変更）。
   ----------------------------- */
.entry-content .ql-top.ql-top-certs { background: var(--ql-surface); }
.entry-content .ql-top .ql-certs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.entry-content .ql-top .ql-cert {
  position: relative;
  padding: 44px 32px 36px;
  background: var(--ql-surface);
  border: 1px solid var(--ql-border);
  border-top: 5px solid var(--ql-blue);
  border-radius: var(--ql-radius-lg);
  box-shadow: var(--ql-shadow-sm);
  transition: transform .2s var(--ql-ease), box-shadow .2s var(--ql-ease), border-color .2s var(--ql-ease);
  display: flex;
  flex-direction: column;
}
/* 種類別アクセント色（border-top のみ。border-radius は親で揃う） */
.entry-content .ql-top .ql-cert--itp { border-top-color: var(--ql-blue); }
.entry-content .ql-top .ql-cert--gk  { border-top-color: #7c3aed; }
.entry-content .ql-top .ql-cert--fe  { border-top-color: #f59e0b; }
.entry-content .ql-top .ql-cert:hover {
  transform: translateY(-4px);
  box-shadow: var(--ql-shadow-md);
}
.entry-content .ql-top .ql-cert--itp {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 6px 20px rgba(31,111,235,.10), var(--ql-shadow-sm);
}
.entry-content .ql-top .ql-cert__tag {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 22px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ql-blue-soft);
  color: var(--ql-blue);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.entry-content .ql-top .ql-cert--gk .ql-cert__tag { background: #f3e8ff; color: #7c3aed; }
.entry-content .ql-top .ql-cert--fe .ql-cert__tag { background: #fff1dc; color: #c2580b; }
/* カード見出し — Cocoon h3 装飾打ち消し済みの上で再適用 */
.entry-content .ql-top .ql-cert__title {
  margin: 0 0 14px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ql-navy);
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.entry-content .ql-top .ql-cert__text {
  margin: 0 0 26px;
  font-size: 1.02rem;
  line-height: 1.95;
  color: var(--ql-text-soft);
}
.entry-content .ql-top .ql-cert__links {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.entry-content .ql-top .ql-cert__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  color: var(--ql-blue);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: color .18s var(--ql-ease);
  flex-wrap: wrap;
}
.entry-content .ql-top .ql-cert__links a::after {
  content: "›";
  display: inline-block;
  margin-left: 4px;
  font-size: 1.05em;
  font-weight: 700;
  transition: transform .2s var(--ql-ease), color .2s var(--ql-ease);
  flex-shrink: 0;
}
.entry-content .ql-top .ql-cert__links a:hover { color: var(--ql-blue-deeper); }
.entry-content .ql-top .ql-cert__links a:hover::after { transform: translateX(2px); }
.entry-content .ql-top .ql-cert__links a:has(.fas)::after,
.entry-content .ql-top .ql-cert__links a:has(.far)::after,
.entry-content .ql-top .ql-cert__links a:has(.fal)::after,
.entry-content .ql-top .ql-cert__links a:has(.fab)::after { content: none; }

/* -----------------------------
   ITパスポート集中導線（淡ブルー帯 / 上下フェード）
   ----------------------------- */
.entry-content .ql-top.ql-top-itp {
  position: relative;
  background:
    radial-gradient(900px 380px at 100% 0%, rgba(31,182,255,.12), transparent 60%),
    linear-gradient(180deg, var(--ql-bg-blue) 0%, #f4f8fd 100%);
}
.entry-content .ql-top.ql-top-itp::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
  pointer-events: none;
}
.entry-content .ql-top.ql-top-itp::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(0deg, rgba(246,248,252,.7), transparent);
  pointer-events: none;
}
.entry-content .ql-top .ql-itp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 36px;
  align-items: stretch;
}
.entry-content .ql-top .ql-itp-routes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.entry-content .ql-top .ql-itp-route {
  position: relative;
  padding: 28px 26px 30px;
  background: var(--ql-surface);
  border: 1px solid var(--ql-border);
  border-radius: var(--ql-radius);
  box-shadow: var(--ql-shadow-sm);
  display: flex;
  flex-direction: column;
}
.entry-content .ql-top .ql-itp-route__step {
  margin: 0 0 12px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--ql-blue);
}
.entry-content .ql-top .ql-itp-route__title {
  margin: 0 0 10px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--ql-navy);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.entry-content .ql-top .ql-itp-route__text {
  margin: 0 0 18px;
  font-size: .98rem;
  line-height: 1.9;
  color: var(--ql-text-soft);
}
.entry-content .ql-top .ql-itp-route__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ql-blue);
  font-size: .98rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s var(--ql-ease);
  flex-wrap: wrap;
}
.entry-content .ql-top .ql-itp-route__link::after {
  content: "→";
  transition: transform .2s var(--ql-ease);
  flex-shrink: 0;
}
.entry-content .ql-top .ql-itp-route__link:has(.fas)::after,
.entry-content .ql-top .ql-itp-route__link:has(.far)::after,
.entry-content .ql-top .ql-itp-route__link:has(.fal)::after,
.entry-content .ql-top .ql-itp-route__link:has(.fab)::after { content: none; }
.entry-content .ql-top .ql-itp-route__link:hover { color: var(--ql-blue-deeper); }
.entry-content .ql-top .ql-itp-route__link:hover::after { transform: translateX(3px); }

/* 主力教材 PICKUP — border-top でアクセント */
.entry-content .ql-top .ql-itp-pickup {
  position: relative;
  padding: 48px 44px 44px;
  border-radius: var(--ql-radius-xl);
  background:
    radial-gradient(700px 260px at 100% 0%, rgba(31,182,255,.16), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #c9d8ee;
  border-top: 5px solid var(--ql-blue);
  box-shadow: var(--ql-shadow-md);
  display: flex;
  flex-direction: column;
}
.entry-content .ql-top .ql-itp-pickup__tag {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 22px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--ql-navy);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.entry-content .ql-top .ql-itp-pickup__title {
  margin: 0 0 18px;
  padding: 0;
  background: none;
  border: 0;
  font-size: clamp(1.35rem, 1.9vw, 1.6rem);
  font-weight: 800;
  color: var(--ql-navy);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.entry-content .ql-top .ql-itp-pickup__text {
  margin: 0 0 24px;
  font-size: 1.04rem;
  line-height: 1.95;
  color: var(--ql-text);
}
.entry-content .ql-top .ql-itp-pickup__points {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.entry-content .ql-top .ql-itp-pickup__points li {
  position: relative;
  padding-left: 30px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ql-text);
}
.entry-content .ql-top .ql-itp-pickup__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ql-blue), var(--ql-cyan));
  box-shadow: inset 0 0 0 5px #fff, 0 0 0 1px rgba(31,111,235,.25);
}
.entry-content .ql-top .ql-itp-pickup .ql-btn {
  align-self: flex-start;
  margin-top: auto;
}

/* 単品教材 SUB */
.entry-content .ql-top .ql-itp-sub {
  margin-top: 44px;
  padding: 32px;
  background: var(--ql-surface);
  border: 1px solid var(--ql-border);
  border-radius: var(--ql-radius-lg);
}
.entry-content .ql-top .ql-itp-sub__lead {
  margin: 0 0 20px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ql-navy);
}
.entry-content .ql-top .ql-itp-sub__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.entry-content .ql-top .ql-itp-sub__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--ql-border);
  border-radius: var(--ql-radius-sm);
  background: var(--ql-bg);
  text-decoration: none;
  color: inherit;
  transition: transform .2s var(--ql-ease), border-color .2s var(--ql-ease), background .2s var(--ql-ease);
}
.entry-content .ql-top .ql-itp-sub__item:hover {
  transform: translateY(-1px);
  border-color: #c9d8ee;
  background: #fff;
}
.entry-content .ql-top .ql-itp-sub__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ql-navy);
  line-height: 1.55;
}
.entry-content .ql-top .ql-itp-sub__desc {
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ql-text-soft);
}
.entry-content .ql-top .ql-itp-sub__note {
  margin: 0;
  font-size: .88rem;
  line-height: 1.75;
  color: var(--ql-muted);
}

/* -----------------------------
   学習ロードマップ
   ----------------------------- */
.entry-content .ql-top.ql-top-roadmap { background: var(--ql-bg); }
.entry-content .ql-top .ql-roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.entry-content .ql-top .ql-roadmap__item {
  position: relative;
  padding: 36px 28px;
  background: var(--ql-surface);
  border: 1px solid var(--ql-border);
  border-radius: var(--ql-radius-lg);
  box-shadow: var(--ql-shadow-sm);
}
.entry-content .ql-top .ql-roadmap__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 0 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ql-blue), #2a86ff);
  color: #fff;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 8px 20px rgba(31,111,235,.30);
}
.entry-content .ql-top .ql-roadmap__title {
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--ql-navy);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.entry-content .ql-top .ql-roadmap__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.95;
  color: var(--ql-text-soft);
}

/* -----------------------------
   人気の学習ガイド
   ----------------------------- */
.entry-content .ql-top.ql-top-guides { background: var(--ql-surface); }

/* -----------------------------
   最終CTA — v2.5（白帯誤検知の決定的解消）
   ---------------------------------------------------------------------
   .ql-final-cta .ql-top__title が Cocoon の h2 装飾（薄グレー背景帯）
   を引きずっていた問題を完全リセット。背景なし・border なし・
   白文字で濃紺グラデの上に直接乗る構成。
   ----------------------------- */
.entry-content .ql-top.ql-top-cta {
  padding: 104px 0 124px;
  background: var(--ql-surface);
}
.entry-content .ql-top .ql-final-cta {
  position: relative;
  padding: 96px 64px 100px;
  border-radius: var(--ql-radius-xl);
  background:
    radial-gradient(900px 360px at 100% 0%, rgba(31,182,255,.26), transparent 60%),
    linear-gradient(135deg, var(--ql-navy) 0%, #173260 70%, var(--ql-navy-deep) 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--ql-shadow);
}
.entry-content .ql-top .ql-final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
}
.entry-content .ql-top .ql-final-cta > * {
  position: relative;
  z-index: 1;
}

/* eyebrow 中央配置 + シアン両側ライン */
.entry-content .ql-top .ql-final-cta .ql-top__eyebrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 22px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ql-cyan-soft);
  font-size: .78rem;
  letter-spacing: .28em;
}
.entry-content .ql-top .ql-final-cta .ql-top__eyebrow::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ql-cyan));
  flex-shrink: 0;
}
.entry-content .ql-top .ql-final-cta .ql-top__eyebrow::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--ql-cyan), transparent);
  flex-shrink: 0;
}

/* ★ 最重要: title の白帯誤検知を完全リセット → 白文字で濃紺背景上に */
.entry-content .ql-top .ql-final-cta .ql-top__title {
  margin: 0 auto 20px;
  padding: 0;
  background: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  font-size: clamp(1.95rem, 3.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .015em;
  max-width: 760px;
  text-shadow: 0 2px 24px rgba(0,0,0,.20);
}
.entry-content .ql-top .ql-final-cta .ql-top__lead {
  margin: 0 auto 36px;
  padding: 0;
  background: none;
  border: 0;
  max-width: 680px;
  color: rgba(255,255,255,.85);
  font-size: 1.05rem;
  line-height: 1.95;
  text-shadow: 0 1px 12px rgba(0,0,0,.20);
}
.entry-content .ql-top .ql-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* -----------------------------
   レスポンシブ
   ----------------------------- */
/* 〜1280px */
@media screen and (max-width: 1280px) {
  .entry-content .ql-top { padding: 108px 0; }
  .entry-content .ql-top.ql-top-hero { padding: 132px 0 116px; }
  .entry-content .ql-top .ql-top__header { margin-bottom: 64px; }
}

/* 〜1024px */
@media screen and (max-width: 1024px) {
  .entry-content .ql-top { padding: 92px 0; }
  .entry-content .ql-top .ql-top__header { margin-bottom: 52px; }
  .entry-content .ql-top.ql-top-hero { padding: 108px 0 92px; }
  .entry-content .ql-top .ql-top-hero__content { max-width: 100%; }
  .entry-content .ql-top .ql-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .entry-content .ql-top .ql-certs    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .entry-content .ql-top .ql-certs > .ql-cert:nth-child(3) { grid-column: 1 / -1; }
  .entry-content .ql-top .ql-itp-grid { grid-template-columns: 1fr; gap: 28px; }
  .entry-content .ql-top .ql-roadmap  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .entry-content .ql-top .ql-link-list--top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-content .ql-top .ql-final-cta { padding: 72px 44px 76px; }
}

/* 〜768px */
@media screen and (max-width: 768px) {
  .entry-content .ql-top { padding: 72px 0; }
  .entry-content .ql-top .ql-container { padding-inline: 22px; }
  .entry-content .ql-top .ql-top__header { margin-bottom: 40px; }
  .entry-content .ql-top.ql-top-hero { padding: 88px 0 72px; }
  .entry-content .ql-top .ql-top-hero__title { font-size: clamp(1.95rem, 7vw, 2.5rem); }
  .entry-content .ql-top .ql-top-hero__lead { font-size: 1rem; line-height: 1.9; }
  .entry-content .ql-top .ql-top-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .entry-content .ql-top .ql-top-hero__actions .ql-btn { width: 100%; }
  .ql-top-hero .ql-btn,
  .ql-final-cta .ql-btn {
    min-height: 54px;
    padding: 14px 26px;
    font-size: 1rem;
  }
  .entry-content .ql-top .ql-top-hero__image { object-position: 50% 18%; }
  .entry-content .ql-top .ql-top-hero__overlay {
    background:
      radial-gradient(700px 380px at 95% 100%, rgba(31,182,255,.16), transparent 60%),
      linear-gradient(180deg,
        rgba(7,22,45,.92) 0%,
        rgba(7,22,45,.78) 60%,
        rgba(16,33,63,.55) 100%);
  }
  .entry-content .ql-top.ql-top-itp::before,
  .entry-content .ql-top.ql-top-itp::after { height: 64px; }

  .entry-content .ql-top .ql-features { grid-template-columns: 1fr; gap: 14px; }
  .entry-content .ql-top .ql-certs    { grid-template-columns: 1fr; gap: 18px; }
  .entry-content .ql-top .ql-certs > .ql-cert:nth-child(3) { grid-column: auto; }
  .entry-content .ql-top .ql-itp-routes    { grid-template-columns: 1fr; }
  .entry-content .ql-top .ql-itp-pickup    { padding: 32px 28px; }
  .entry-content .ql-top .ql-itp-pickup__title { font-size: 1.22rem; }
  .entry-content .ql-top .ql-itp-sub { padding: 24px; margin-top: 32px; }
  .entry-content .ql-top .ql-itp-sub__list { grid-template-columns: 1fr; }
  .entry-content .ql-top .ql-roadmap       { grid-template-columns: 1fr; gap: 14px; }
  .entry-content .ql-top .ql-link-list--top { grid-template-columns: 1fr; }
  .entry-content .ql-top .ql-final-cta { padding: 64px 28px 68px; border-radius: var(--ql-radius-lg); }
  .entry-content .ql-top .ql-final-cta__actions { flex-direction: column; }
  .entry-content .ql-top .ql-final-cta__actions .ql-btn { width: 100%; }

  .entry-content .ql-top .ql-top__eyebrow::before,
  .entry-content .ql-top .ql-top__header--center .ql-top__eyebrow::after,
  .entry-content .ql-top .ql-final-cta .ql-top__eyebrow::before,
  .entry-content .ql-top .ql-final-cta .ql-top__eyebrow::after { width: 24px; }
}

/* 〜480px */
@media screen and (max-width: 480px) {
  .entry-content .ql-top .ql-container { padding-inline: 18px; }
  .entry-content .ql-top { padding: 60px 0; }
  .entry-content .ql-top.ql-top-hero { padding: 76px 0 60px; }
  .entry-content .ql-top .ql-top__title { font-size: 1.55rem; line-height: 1.4; }
  .entry-content .ql-top .ql-top__lead  { font-size: 1rem; }
  .entry-content .ql-top .ql-feature,
  .entry-content .ql-top .ql-roadmap__item,
  .entry-content .ql-top .ql-itp-route { padding: 28px 22px; }
  .entry-content .ql-top .ql-cert        { padding: 36px 24px 28px; }
  .entry-content .ql-top .ql-itp-pickup  { padding: 28px 22px; }
  .entry-content .ql-top .ql-itp-pickup__title { font-size: 1.14rem; }
  .entry-content .ql-top .ql-final-cta { padding: 52px 22px 56px; }
  .entry-content .ql-top .ql-final-cta .ql-top__title { font-size: 1.55rem; }
  .ql-btn { padding: 14px 24px; font-size: .98rem; }
  .entry-content .ql-top .ql-top-hero__image { object-position: 50% 12%; }
}


/* =====================================================================
   v2.6.1 — ヘッダー下〜ヒーロー前の不要余白を最小限解消
   ---------------------------------------------------------------------
   v2.6 で .article / .content-in / .wrap までラッパー解除した結果
   トップが右寄り崩れしたため撤回。本v2.6.1 は v2.5 をベースに
   .entry-content の上下 padding のみを 0 にする最小調整に限定。
   重要:
   - .article / .content-in / .wrap は触らない（Cocoon中央寄せ維持）
   - .entry-content の max-width / margin / 左右 padding は維持
     （.entry-content の content-box の中央位置が画面中央と一致した
       ままにすることで、.ql-top のフルブリード計算が崩れない）
   - !important は HEAD 既存
     `.home .entry-content { padding: 24px 24px 40px !important }` を
     部分上書きするための最小限使用。padding-top / padding-bottom のみ
     0 化し、padding-left / padding-right は維持される。
   - :has(> .ql-top) ゲートで通常記事・他ホームページに無影響。
   ===================================================================== */

/* (1) .article / .entry-content の上下 padding のみ 0 にする
   v2.8 更新: 子孫セレクタ :has(.ql-top) に緩める。
   v2.7 までの :has(> .ql-top) は「直接子」だけにマッチするため、
   Gutenberg / wpautop が間に空 <p> 等を挟むと不発の可能性があった。
   :has(.ql-top) なら「子孫のどこかに .ql-top」でマッチして確実。
   重要: 左右 padding / max-width / margin は触らない。 */
body.home .article:has(.ql-top),
body.home .entry-content:has(.ql-top),
body.page-id-64 .article:has(.ql-top),
body.page-id-64 .entry-content:has(.ql-top) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* (2) .ql-top セクション同士の上下 margin のみゼロに統一
       重要: margin 一括指定（margin: 0 等）は使用禁止。
       .ql-top 本体定義の margin-left / margin-right: calc(50% - 50vw)
       （フルブリードに必須）を上書きしてしまい、画面が右寄りに崩れる。
       上下方向のみを margin-top / margin-bottom で個別指定し、
       margin-inline (left/right) は触らない。 */
.entry-content > .ql-top {
  margin-top: 0;
  margin-bottom: 0;
}

/* (3) WP wpautop が挿入する空 p / br を非表示（トップ限定）。
   body.home / body.page-id-64 でゲートしているので通常記事に影響なし。 */
body.home .entry-content > p:empty,
body.home .entry-content > br,
body.page-id-64 .entry-content > p:empty,
body.page-id-64 .entry-content > br { display: none; }

/* (4) .ql-top-itp 上下フェード擬似要素を無効化（端切れ感の要因排除） */
.entry-content .ql-top.ql-top-itp::before,
.entry-content .ql-top.ql-top-itp::after {
  content: none;
  display: none;
}


/* =====================================================================
   v2.7 — 仕上げ調整
   ---------------------------------------------------------------------
   (B) ボタン内 FontAwesome アイコンと擬似要素はボタン文字色を継承
       → 青背景・透過背景でも chevron が確実に見える
   (C) .ql-top スコープ内 リンク hover の赤文字を青系（#1f6feb）に統一
       → Cocoon親テーマのデフォルト a:hover（赤系）を打ち消す
   重要:
   - .ql-top の margin-left/right: calc(50% - 50vw) は触らない
   - .article / .content-in / .wrap の max-width / margin は触らない
   ===================================================================== */

/* (B) ボタン内 FontAwesome アイコンはボタンの color を継承
   既存 `.ql-top a > .fa-chevron-right { color: var(--ql-blue) }` の
   青色指定を、より高い詳細度の `.ql-top a.ql-btn > ...` で打ち消す。
   ボタン色（白 or 紺）と統一されて読みやすい。 */
.ql-top a.ql-btn > .fas,
.ql-top a.ql-btn > .far,
.ql-top a.ql-btn > .fal,
.ql-top a.ql-btn > .fab {
  color: inherit;
  transform: none;
}
.ql-top a.ql-btn:hover > .fas,
.ql-top a.ql-btn:hover > .far,
.ql-top a.ql-btn:hover > .fal,
.ql-top a.ql-btn:hover > .fab {
  color: inherit;
  transform: none;
}

/* ボタン内の擬似要素（::before / ::after）も親 color を継承 */
.ql-top .ql-btn::before,
.ql-top .ql-btn::after {
  color: inherit;
}

/* 暗背景上ボタンのアイコン色を明示的に白にして可読性確保 */
.ql-top-hero .ql-btn > .fas,
.ql-top-hero .ql-btn > .far,
.ql-top-hero .ql-btn > .fal,
.ql-top-hero .ql-btn > .fab,
.ql-final-cta .ql-btn > .fas,
.ql-final-cta .ql-btn > .far,
.ql-final-cta .ql-btn > .fal,
.ql-final-cta .ql-btn > .fab {
  color: #fff;
}

/* PICKUP / 主力教材の primary ボタン（青背景）内 FA を白に */
.ql-itp-pickup .ql-btn--primary > .fas,
.ql-itp-pickup .ql-btn--primary > .far,
.ql-itp-pickup .ql-btn--primary > .fal,
.ql-itp-pickup .ql-btn--primary > .fab {
  color: #fff;
}

/* (C) .ql-top スコープ内のリンク hover を青系（#1f6feb = --ql-blue）に統一
   Cocoon親テーマの a:hover デフォルト（赤系）を抑止。
   .ql-btn は除外（color は --ql-btn-fg = 白を維持）。 */
.ql-top a:not(.ql-btn):hover,
.ql-top a:not(.ql-btn):focus {
  color: var(--ql-blue);
}
/* hover 時のリンク内 FA アイコンも青系に */
.ql-top a:not(.ql-btn):hover > .fas,
.ql-top a:not(.ql-btn):hover > .far,
.ql-top a:not(.ql-btn):hover > .fal,
.ql-top a:not(.ql-btn):hover > .fab,
.ql-top a:not(.ql-btn):focus > .fas,
.ql-top a:not(.ql-btn):focus > .far,
.ql-top a:not(.ql-btn):focus > .fal,
.ql-top a:not(.ql-btn):focus > .fab {
  color: var(--ql-blue);
}

/* 暗背景セクション内（ヒーロー / 最終CTA）の通常リンク hover は
   赤や濃青ではなく、可読性のあるシアン寄りで明るく */
.ql-top-hero a:not(.ql-btn):hover,
.ql-top-hero a:not(.ql-btn):focus,
.ql-final-cta a:not(.ql-btn):hover,
.ql-final-cta a:not(.ql-btn):focus {
  color: var(--ql-cyan-soft);
}


/* =====================================================================
   v2.8 — 余白・横スクロール・hover赤の確実な解決
   ---------------------------------------------------------------------
   v2.7 で残った3つの問題:
   (1) ヘッダー下・フッター上の余白 → main/#main/#content/.l-main の
       Cocoon親由来の縦方向 padding/margin が残っていた可能性
   (2) 横スクロール → .ql-top の width:100vw がスクロールバー幅を含み、
       body の overflow-x がデフォルト visible のため body にも反映
   (3) hover時の赤文字 → Cocoon親の .entry-content a:hover が
       v2.7 の .ql-top a:not(.ql-btn):hover(0,2,1) と同詳細度で
       後勝ちor !important で勝っていた可能性

   重要:
   - .article / .content-in / .wrap の width / max-width /
     margin-left / margin-right は触らない（横方向は完全維持）
   - 縦方向の padding-top / padding-bottom / margin-top / margin-bottom
     のみ最小限で調整
   - .ql-top の margin-left / margin-right: calc(50% - 50vw) は触らない
   - !important は v2.7 で残った Cocoon親 hover 色の打ち消しと
     既存 !important 打ち消し用に最小限で使用
   ===================================================================== */

/* (A) main 系コンテナの縦方向余白を 0 化（保険）
   #main / .main / main / #content / .l-main の上下 padding/margin を、
   トップページかつ .ql-top あり時のみ 0 に。
   width / max-width / margin-left / margin-right は触らない。 */
body.home main:has(.ql-top),
body.home #main:has(.ql-top),
body.home .main:has(.ql-top),
body.home #content:has(.ql-top),
body.home .l-main:has(.ql-top),
body.page-id-64 main:has(.ql-top),
body.page-id-64 #main:has(.ql-top),
body.page-id-64 .main:has(.ql-top),
body.page-id-64 #content:has(.ql-top),
body.page-id-64 .l-main:has(.ql-top) {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* (B) 横スクロール抑止
   .ql-top の width:100vw はスクロールバー幅を含むため、
   ビューポート clientWidth を超えて body に横スクロールが出る。
   body 自体に overflow-x: clip をかけて出ないようにする。
   :has(.ql-top) ゲートで通常記事や他ページには影響しない。
   clip 非対応ブラウザのため hidden を併記。 */
body.home:has(.ql-top),
body.page-id-64:has(.ql-top) {
  overflow-x: hidden;
  overflow-x: clip;
}

/* (C) hover時の赤文字を確実に青系へ
   .entry-content .ql-top a:not(.ql-btn):hover (詳細度 0,3,1) +
   !important で Cocoon親の .entry-content a:hover を確実に上書き。
   ボタン (.ql-btn) は除外して白文字を維持。 */
.entry-content .ql-top a:not(.ql-btn):hover,
.entry-content .ql-top a:not(.ql-btn):focus {
  color: var(--ql-blue) !important;
}
.entry-content .ql-top a:not(.ql-btn):hover .fas,
.entry-content .ql-top a:not(.ql-btn):hover .far,
.entry-content .ql-top a:not(.ql-btn):hover .fal,
.entry-content .ql-top a:not(.ql-btn):hover .fab,
.entry-content .ql-top a:not(.ql-btn):focus .fas,
.entry-content .ql-top a:not(.ql-btn):focus .far,
.entry-content .ql-top a:not(.ql-btn):focus .fal,
.entry-content .ql-top a:not(.ql-btn):focus .fab {
  color: var(--ql-blue) !important;
}

/* 暗背景セクションの hover は薄シアンで可読性確保 */
.entry-content .ql-top-hero a:not(.ql-btn):hover,
.entry-content .ql-top-hero a:not(.ql-btn):focus,
.entry-content .ql-final-cta a:not(.ql-btn):hover,
.entry-content .ql-final-cta a:not(.ql-btn):focus {
  color: var(--ql-cyan-soft) !important;
}

/* ボタンの hover/focus は白文字を強制維持（Cocoon親の赤色指定を打ち消す） */
.entry-content .ql-top a.ql-btn:hover,
.entry-content .ql-top a.ql-btn:focus {
  color: var(--ql-btn-fg) !important;
}
/* 暗背景上のボタン（hero / cta）は文字色を白に強制 */
.entry-content .ql-top-hero a.ql-btn:hover,
.entry-content .ql-top-hero a.ql-btn:focus,
.entry-content .ql-final-cta a.ql-btn:hover,
.entry-content .ql-final-cta a.ql-btn:focus {
  color: #fff !important;
}
.entry-content .ql-top-hero a.ql-btn:hover .fas,
.entry-content .ql-top-hero a.ql-btn:hover .far,
.entry-content .ql-top-hero a.ql-btn:hover .fal,
.entry-content .ql-top-hero a.ql-btn:hover .fab,
.entry-content .ql-final-cta a.ql-btn:hover .fas,
.entry-content .ql-final-cta a.ql-btn:hover .far,
.entry-content .ql-final-cta a.ql-btn:hover .fal,
.entry-content .ql-final-cta a.ql-btn:hover .fab,
.entry-content .ql-itp-pickup a.ql-btn:hover .fas,
.entry-content .ql-itp-pickup a.ql-btn:hover .far,
.entry-content .ql-itp-pickup a.ql-btn:hover .fal,
.entry-content .ql-itp-pickup a.ql-btn:hover .fab {
  color: #fff !important;
}


/* =====================================================================
   v2.9 — ヘッダー下・フッター上の余白を最小限で除去
   ---------------------------------------------------------------------
   v2.8 で main 系コンテナの上下 padding/margin は 0 化したが、
   .article 直接子 / .entry-content 周辺に残る Cocoon 標準要素
   （.entry-header / .breadcrumb / .related-entries / .pager-post-navi /
    .author-box / .entry-footer 等）が縦方向余白を作っていたと推定。
   また、.ql-top-cta の padding-bottom 124px がフッター直前の白帯。

   対処（縦方向のみ、横方向は触らない）:
   (A) Cocoon 標準の記事ヘッダー/フッター系要素をトップ限定で非表示
   (B) .ql-top-cta の padding-bottom を 48px に縮小
   (C) .entry-content 配下の最初の .ql-top の margin-top を 0 に強制

   重要（壊さない）:
   - 横スクロール対策 v2.8 (body.home:has(.ql-top) overflow-x: clip) 維持
   - hover赤対策 v2.8 (.entry-content .ql-top a:not(.ql-btn):hover) 維持
   - ボタン色（白）維持
   - .ql-top の margin-left/right: calc(50% - 50vw) 維持
   - .article / .content-in / .wrap の幅・横margin は触らない
   ===================================================================== */

/* (A) Cocoon 標準の記事ヘッダー/フッター系要素をトップ限定で非表示
   トップは LP 用途のため、これら記事構造要素は不要。
   :has(.ql-top) ゲートで通常記事に影響なし。 */
body.home:has(.ql-top) .entry-header,
body.home:has(.ql-top) .entry-footer,
body.home:has(.ql-top) .breadcrumb,
body.home:has(.ql-top) .breadcrumb-area,
body.home:has(.ql-top) .breadcrumb-wrap,
body.home:has(.ql-top) .related-entries,
body.home:has(.ql-top) .post-related,
body.home:has(.ql-top) .pager-post-navi,
body.home:has(.ql-top) .author-box,
body.home:has(.ql-top) .under-entry-content,
body.home:has(.ql-top) .under-content,
body.home:has(.ql-top) .comment-area,
body.home:has(.ql-top) .comment-respond,
body.page-id-64:has(.ql-top) .entry-header,
body.page-id-64:has(.ql-top) .entry-footer,
body.page-id-64:has(.ql-top) .breadcrumb,
body.page-id-64:has(.ql-top) .breadcrumb-area,
body.page-id-64:has(.ql-top) .breadcrumb-wrap,
body.page-id-64:has(.ql-top) .related-entries,
body.page-id-64:has(.ql-top) .post-related,
body.page-id-64:has(.ql-top) .pager-post-navi,
body.page-id-64:has(.ql-top) .author-box,
body.page-id-64:has(.ql-top) .under-entry-content,
body.page-id-64:has(.ql-top) .under-content,
body.page-id-64:has(.ql-top) .comment-area,
body.page-id-64:has(.ql-top) .comment-respond {
  display: none !important;
}

/* (B) .ql-top-cta の padding-bottom を縮小（フッター直前の白帯を短縮）
   .ql-final-cta カードの内側 padding は維持されるため CTA 自体は窮屈
   にならず、CTA カード下〜フッター間の余白だけが短くなる。 */
.entry-content .ql-top.ql-top-cta {
  padding-bottom: 48px;
}

/* (C) .entry-content 配下の最初の .ql-top（通常 .ql-top-hero）の
   margin-top を 0 に強制。Cocoon 親要素由来の margin-collapse 等を
   最終的に打ち消す保険。 */
.entry-content .ql-top:first-child,
.entry-content .ql-top.ql-top-hero {
  margin-top: 0;
}

/* スマホ向け: 最終CTAの padding-bottom をさらに小さく */
@media screen and (max-width: 768px) {
  .entry-content .ql-top.ql-top-cta {
    padding-bottom: 36px;
  }
}
@media screen and (max-width: 480px) {
  .entry-content .ql-top.ql-top-cta {
    padding-bottom: 28px;
  }
}


/* =====================================================================
   v2.10 — 資格試験 公式アップデート ニュースリスト
   ---------------------------------------------------------------------
   .ql-top-updates セクション内のニュースリスト用スタイル。
   機能カード（.ql-features / .ql-feature）ではなく、
   日付＋タグ＋タイトル＋要約＋公式リンクの縦リスト表示。
   1件でも自然に見え、5件並んでも美しいレイアウト。
   既存の横スクロール対策・hover青・ボタン白文字を壊さない。
   全セレクタは .entry-content .ql-top.ql-top-updates スコープで限定。
   ===================================================================== */

/* リスト */
.entry-content .ql-top.ql-top-updates .ql-update-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 各ニュース項目（カード状） */
.entry-content .ql-top.ql-top-updates .ql-update-item {
  position: relative;
  padding: 28px 32px;
  background: var(--ql-surface);
  border: 1px solid var(--ql-border);
  border-radius: var(--ql-radius);
  box-shadow: var(--ql-shadow-sm);
  transition:
    transform .2s var(--ql-ease),
    box-shadow .2s var(--ql-ease),
    border-color .2s var(--ql-ease);
}
.entry-content .ql-top.ql-top-updates .ql-update-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--ql-shadow);
  border-color: #c9d8ee;
}

/* メタ情報（日付・タグ・種別） */
.entry-content .ql-top.ql-top-updates .ql-update-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  line-height: 1.5;
}

/* 更新日 */
.entry-content .ql-top.ql-top-updates .ql-update-item__date {
  color: var(--ql-navy);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* 資格タグ・種別タグ（ピル型） */
.entry-content .ql-top.ql-top-updates .ql-update-item__tag,
.entry-content .ql-top.ql-top-updates .ql-update-item__type {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  white-space: nowrap;
}

/* 資格タグ: 青系（メインのカテゴリ） */
.entry-content .ql-top.ql-top-updates .ql-update-item__tag {
  background: var(--ql-blue-soft);
  color: var(--ql-blue);
}

/* 種別タグ: ニュートラルグレー（控えめなサブカテゴリ） */
.entry-content .ql-top.ql-top-updates .ql-update-item__type {
  background: var(--ql-bg);
  color: var(--ql-text-soft);
  border: 1px solid var(--ql-border);
}

/* タイトル: Cocoon h3 装飾を完全リセットしてニュース見出しとして自然に */
.entry-content .ql-top.ql-top-updates .ql-update-item__title {
  margin: 0 0 10px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .005em;
  color: var(--ql-navy);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.entry-content .ql-top.ql-top-updates .ql-update-item__title::before,
.entry-content .ql-top.ql-top-updates .ql-update-item__title::after {
  content: none;
  display: none;
}

/* 要約 */
.entry-content .ql-top.ql-top-updates .ql-update-item__summary {
  margin: 0 0 16px;
  font-size: .98rem;
  line-height: 1.9;
  color: var(--ql-text-soft);
}
.entry-content .ql-top.ql-top-updates .ql-update-item__summary:last-child {
  margin-bottom: 0;
}

/* 公式リンク */
.entry-content .ql-top.ql-top-updates .ql-update-item__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ql-blue);
  font-size: .94rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s var(--ql-ease);
  flex-wrap: wrap;
}
.entry-content .ql-top.ql-top-updates .ql-update-item__link:hover,
.entry-content .ql-top.ql-top-updates .ql-update-item__link:focus {
  color: var(--ql-blue-deeper) !important;
  text-decoration: none;
}

/* リンク内 chevron（FontAwesome 5）の上品な配置と動き */
.entry-content .ql-top.ql-top-updates .ql-update-item__link > .fa-chevron-right,
.entry-content .ql-top.ql-top-updates .ql-update-item__link > .fas,
.entry-content .ql-top.ql-top-updates .ql-update-item__link > .far {
  color: inherit;
  font-size: .8em;
  margin-left: 4px;
  transition: transform .2s var(--ql-ease);
}
.entry-content .ql-top.ql-top-updates .ql-update-item__link:hover > .fa-chevron-right,
.entry-content .ql-top.ql-top-updates .ql-update-item__link:hover > .fas,
.entry-content .ql-top.ql-top-updates .ql-update-item__link:hover > .far {
  transform: translateX(3px);
}

/* スマホ向けレスポンシブ */
@media screen and (max-width: 768px) {
  .entry-content .ql-top.ql-top-updates .ql-update-item {
    padding: 24px 22px;
  }
  .entry-content .ql-top.ql-top-updates .ql-update-item__title {
    font-size: 1.08rem;
  }
  .entry-content .ql-top.ql-top-updates .ql-update-item__summary {
    font-size: .94rem;
    line-height: 1.85;
  }
  .entry-content .ql-top.ql-top-updates .ql-update-item__date {
    font-size: .82rem;
  }
}
@media screen and (max-width: 480px) {
  .entry-content .ql-top.ql-top-updates .ql-update-list {
    gap: 12px;
  }
  .entry-content .ql-top.ql-top-updates .ql-update-item {
    padding: 22px 18px;
  }
}

/* WooCommerce 商品ページ説明欄：資格ラボ共通 */
.woocommerce div.product .woocommerce-tabs .panel .shk-product-detail {
  width: 100%;
  max-width: none;
  margin: 0;
  color: #1f2937;
  font-size: 16px;
  line-height: 1.85;
  box-sizing: border-box;
}

.woocommerce div.product .woocommerce-tabs .panel .shk-product-detail h3 {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-left: 6px solid #9ca3af;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #111827;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.5;
}

.woocommerce div.product .woocommerce-tabs .panel .shk-product-detail h4 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.6;
}

.woocommerce div.product .woocommerce-tabs .panel .shk-product-detail p {
  margin: 0 0 1.1em;
}

.woocommerce div.product .woocommerce-tabs .panel .shk-product-detail ul,
.woocommerce div.product .woocommerce-tabs .panel .shk-product-detail ol {
  margin: 0;
  padding-left: 1.3em;
}

.woocommerce div.product .woocommerce-tabs .panel .shk-product-detail li {
  margin: 0 0 .55em;
}

.woocommerce div.product .woocommerce-tabs .panel .shk-product-box {
  margin: 0 0 28px;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-sizing: border-box;
}

.woocommerce div.product .woocommerce-tabs .panel .shk-product-box--note {
  background: #f8fafc;
}

.woocommerce div.product .woocommerce-tabs .panel .shk-product-box > :last-child {
  margin-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs .panel .shk-product-links {
  margin: 0;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .woocommerce div.product .woocommerce-tabs .panel .shk-product-detail {
    font-size: 15px;
  }

  .woocommerce div.product .woocommerce-tabs .panel .shk-product-detail h3 {
    font-size: 19px;
  }

  .woocommerce div.product .woocommerce-tabs .panel .shk-product-box {
    padding: 16px;
  }
}


/* =====================================================================
   v2.11 — ITパスポート商品ラインアップ（緊急修正）
   ---------------------------------------------------------------------
   HTMLに新追加されたクラス
   .ql-itp-products / .ql-itp-products__featured / .ql-itp-products__grid /
   .ql-product-item / .ql-product-item__tag / .ql-product-item__title /
   .ql-product-item__text / .ql-product-item__link / .ql-itp-pickup__action
   にスタイル定義がなく、4商品が縦積み表示になっていた問題を修正。

   全セレクタは .entry-content .ql-top.ql-top-itp スコープで限定。
   主力カード（.ql-itp-products__featured）は既存の .ql-itp-pickup を
   そのまま活かす想定で、ラッパーのみ最小限の定義。
   グリッドは auto-fit + minmax(220px, 1fr) で、商品が増減しても
   自然に折り返す柔軟設計。

   既存の横スクロール対策・hover青・ボタン白文字を壊さない。
   ===================================================================== */

/* (A) 商品ブロック全体ラッパー（主力 + グリッドの間隔制御） */
.entry-content .ql-top.ql-top-itp .ql-itp-products {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* (B) 主力カード — 既存 .ql-itp-pickup を内包する想定。
   ラッパー自体は配置のみ担当。 */
.entry-content .ql-top.ql-top-itp .ql-itp-products__featured {
  display: flex;
  flex-direction: column;
}

/* (C) 主力カード内のアクションエリア（CTAボタンなどを配置） */
.entry-content .ql-top.ql-top-itp .ql-itp-pickup__action {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* (D) 4商品グリッド
   auto-fit + minmax(220px, 1fr) で:
   - PC（広幅）: 4列で並ぶ
   - タブレット（中幅）: 2〜3列に自動折返し
   - スマホ: 1列（@media で明示）
   - 商品が増減しても見た目が崩れない */
.entry-content .ql-top.ql-top-itp .ql-itp-products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* (E) 各商品カード */
.entry-content .ql-top.ql-top-itp .ql-product-item {
  position: relative;
  padding: 24px 22px;
  background: var(--ql-surface);
  border: 1px solid var(--ql-border);
  border-radius: var(--ql-radius);
  box-shadow: var(--ql-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    transform .2s var(--ql-ease),
    box-shadow .2s var(--ql-ease),
    border-color .2s var(--ql-ease);
}
.entry-content .ql-top.ql-top-itp .ql-product-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--ql-shadow);
  border-color: #c9d8ee;
}

/* (F) 商品タグ（ピル型） */
.entry-content .ql-top.ql-top-itp .ql-product-item__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--ql-blue-soft);
  color: var(--ql-blue);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  margin: 0 0 4px;
  white-space: nowrap;
}

/* (G) 商品名 — Cocoon の h4 等の装飾を完全リセット */
.entry-content .ql-top.ql-top-itp .ql-product-item__title {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: .005em;
  color: var(--ql-navy);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.entry-content .ql-top.ql-top-itp .ql-product-item__title::before,
.entry-content .ql-top.ql-top-itp .ql-product-item__title::after {
  content: none;
  display: none;
}

/* (H) 商品説明文 */
.entry-content .ql-top.ql-top-itp .ql-product-item__text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--ql-text-soft);
  flex-grow: 1;
}

/* (I) 商品リンク（FA chevron 込み、カード下部揃え） */
.entry-content .ql-top.ql-top-itp .ql-product-item__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ql-blue);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s var(--ql-ease);
  flex-wrap: wrap;
  align-self: flex-start;
}
.entry-content .ql-top.ql-top-itp .ql-product-item__link:hover,
.entry-content .ql-top.ql-top-itp .ql-product-item__link:focus {
  color: var(--ql-blue-deeper) !important;
  text-decoration: none;
}
.entry-content .ql-top.ql-top-itp .ql-product-item__link > .fa-chevron-right,
.entry-content .ql-top.ql-top-itp .ql-product-item__link > .fas,
.entry-content .ql-top.ql-top-itp .ql-product-item__link > .far {
  color: inherit;
  font-size: .8em;
  margin-left: 2px;
  transition: transform .2s var(--ql-ease);
}
.entry-content .ql-top.ql-top-itp .ql-product-item__link:hover > .fa-chevron-right,
.entry-content .ql-top.ql-top-itp .ql-product-item__link:hover > .fas,
.entry-content .ql-top.ql-top-itp .ql-product-item__link:hover > .far {
  transform: translateX(3px);
}

/* (J) スマホ向け */
@media screen and (max-width: 768px) {
  .entry-content .ql-top.ql-top-itp .ql-itp-products { gap: 24px; }
  .entry-content .ql-top.ql-top-itp .ql-itp-products__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .entry-content .ql-top.ql-top-itp .ql-product-item {
    padding: 22px 20px;
  }
}
@media screen and (max-width: 480px) {
  .entry-content .ql-top.ql-top-itp .ql-product-item {
    padding: 20px 18px;
  }
  .entry-content .ql-top.ql-top-itp .ql-product-item__title {
    font-size: .98rem;
  }
}


/* =====================================================================
   v2.12 — ITパスポート集中導線の品質仕上げ
   ---------------------------------------------------------------------
   v2.11 で 4商品が縦積み崩れから回復したが、以下が残課題:
   - 主力カードが横長すぎて右に余白
   - 目的別4カードが小さく読みにくい
   - 全体のまとまり感が弱い

   v2.12 対処:
   - .ql-itp-grid を「左ルート 0.85fr / 右商品 1.35fr」の比率に再調整
     → 右の商品エリアを広めに確保
   - .ql-itp-products__grid を auto-fit から 2列固定（PC）に変更
     → 2×2 のカード構成で1枚あたりの幅をしっかり確保
   - 主力カード .ql-itp-pickup のサイズと余白を全体調整
   - 商品カードの文字サイズ（title / text）を読みやすく拡大
   - .ql-itp-products の gap を縮めて主力カードと4枚の関係を強化

   全セレクタは .entry-content .ql-top.ql-top-itp スコープ限定。
   既存の横スクロール対策・hover青・ボタン白文字を壊さない。
   ===================================================================== */

/* (A) ITパスポート集中導線 全体グリッドの比率調整
   左ルートを少し小さく、右の商品エリアを広めに（5商品が読みやすく並ぶ） */
.entry-content .ql-top.ql-top-itp .ql-itp-grid {
  grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.35fr);
  gap: 32px;
  align-items: start;
}

/* (B) 主力カード — padding を整え、横長すぎる印象を解消 */
.entry-content .ql-top.ql-top-itp .ql-itp-products__featured .ql-itp-pickup,
.entry-content .ql-top.ql-top-itp .ql-itp-pickup {
  padding: 36px 36px 32px;
}
.entry-content .ql-top.ql-top-itp .ql-itp-pickup__title {
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 1.7vw, 1.45rem);
  line-height: 1.5;
}
.entry-content .ql-top.ql-top-itp .ql-itp-pickup__text {
  margin: 0 0 20px;
  font-size: 1rem;
  line-height: 1.95;
}
.entry-content .ql-top.ql-top-itp .ql-itp-pickup__points {
  margin: 0 0 24px;
  gap: 10px;
}
.entry-content .ql-top.ql-top-itp .ql-itp-pickup__points li {
  font-size: .96rem;
}

/* (C) 商品ラインアップ全体ラッパー — 主力カードと4枚の距離を詰めて
   「ひとつの教材ラインアップ」としてのまとまりを強化 */
.entry-content .ql-top.ql-top-itp .ql-itp-products {
  gap: 20px;
}

/* (D) 目的別 4 商品グリッド — PCで 2列×2行 固定 */
.entry-content .ql-top.ql-top-itp .ql-itp-products__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* (E) 各商品カード — padding と内側 gap を調整、高さ揃え */
.entry-content .ql-top.ql-top-itp .ql-product-item {
  padding: 22px 22px 20px;
  gap: 8px;
  min-height: 100%;
}

/* (F) 商品名 — 読みやすさ優先 */
.entry-content .ql-top.ql-top-itp .ql-product-item__title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.55;
}

/* (G) 商品説明文 — 読みやすさ優先 */
.entry-content .ql-top.ql-top-itp .ql-product-item__text {
  font-size: .88rem;
  line-height: 1.8;
}

/* (H) 商品リンク — フォントウェイトとサイズを最終調整 */
.entry-content .ql-top.ql-top-itp .ql-product-item__link {
  font-size: .9rem;
  margin-top: 6px;
}

/* (I) 中間幅（タブレット〜中型ノート）: 4商品が小さくなりすぎないよう、
   1列に折り返す代わりに、左右カラムを縦積みにして商品を 2列維持 */
@media screen and (max-width: 1024px) {
  .entry-content .ql-top.ql-top-itp .ql-itp-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .entry-content .ql-top.ql-top-itp .ql-itp-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* (J) スマホ: 1列、padding 控えめ、文字読みやすさ維持 */
@media screen and (max-width: 768px) {
  .entry-content .ql-top.ql-top-itp .ql-itp-products__featured .ql-itp-pickup,
  .entry-content .ql-top.ql-top-itp .ql-itp-pickup {
    padding: 28px 24px 26px;
  }
  .entry-content .ql-top.ql-top-itp .ql-itp-pickup__title {
    font-size: 1.18rem;
  }
  .entry-content .ql-top.ql-top-itp .ql-itp-pickup__text {
    font-size: .96rem;
  }
  .entry-content .ql-top.ql-top-itp .ql-itp-products {
    gap: 18px;
  }
  .entry-content .ql-top.ql-top-itp .ql-itp-products__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .entry-content .ql-top.ql-top-itp .ql-product-item {
    padding: 22px 22px 20px;
  }
  .entry-content .ql-top.ql-top-itp .ql-product-item__title {
    font-size: 1rem;
  }
  .entry-content .ql-top.ql-top-itp .ql-product-item__text {
    font-size: .9rem;
  }
}

@media screen and (max-width: 480px) {
  .entry-content .ql-top.ql-top-itp .ql-itp-products__featured .ql-itp-pickup,
  .entry-content .ql-top.ql-top-itp .ql-itp-pickup {
    padding: 24px 20px 22px;
  }
  .entry-content .ql-top.ql-top-itp .ql-itp-pickup__title {
    font-size: 1.1rem;
  }
  .entry-content .ql-top.ql-top-itp .ql-product-item {
    padding: 20px 18px;
  }
}


/* =====================================================================
   v2.13 — ITパスポート教材ラインアップ（新クラス対応）
   ---------------------------------------------------------------------
   HTML側に新しく追加された .ql-top-materials セクション内のクラス
   .ql-materials / .ql-materials__featured / .ql-materials__grid /
   .ql-material-card / .ql-material-card--featured /
   .ql-material-card__tag / .ql-material-card__title /
   .ql-material-card__text / .ql-material-card__action /
   .ql-material-card__link
   にスタイル定義がなく崩れていた問題を修正。

   構成: 主力カード（横長1枚）+ 通常4カード（PC 2x2 / モバイル 1列）
   全セレクタは .entry-content .ql-top.ql-top-materials スコープで限定。
   既存の .ql-itp-products / .ql-product-item 用CSS（v2.11 / v2.12）には
   一切影響しない（別セクション）。
   横スクロール対策・hover青・ボタン白文字を壊さない。
   ===================================================================== */

/* (A) セクション全体 — 上品な薄ブルーグレーグラデ背景 */
.entry-content .ql-top.ql-top-materials {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}

/* (B) ラインアップ全体ラッパー — max-width で中央寄せ、縦に積む */
.entry-content .ql-top.ql-top-materials .ql-materials {
  max-width: 1040px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* (C) 主力カードラッパー（あれば） */
.entry-content .ql-top.ql-top-materials .ql-materials__featured {
  display: flex;
  flex-direction: column;
}

/* (D) 通常 4 商品グリッド — PC 2 列固定、768px 以下で 1 列 */
.entry-content .ql-top.ql-top-materials .ql-materials__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* (E) カード共通（通常カード） */
.entry-content .ql-top.ql-top-materials .ql-material-card {
  position: relative;
  padding: 24px 24px;
  background: var(--ql-surface);
  border: 1px solid var(--ql-border);
  border-radius: var(--ql-radius-lg);
  box-shadow: var(--ql-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    transform .2s var(--ql-ease),
    box-shadow .2s var(--ql-ease),
    border-color .2s var(--ql-ease);
}
.entry-content .ql-top.ql-top-materials .ql-material-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ql-shadow);
  border-color: #c9d8ee;
}

/* (F) 主力カード — 横長、上端アクセント、上品な影 */
.entry-content .ql-top.ql-top-materials .ql-material-card--featured {
  padding: 36px 40px;
  border-radius: var(--ql-radius-xl);
  background:
    radial-gradient(700px 260px at 100% 0%, rgba(31,182,255,.14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #c9d8ee;
  box-shadow: var(--ql-shadow-md);
  gap: 14px;
}
.entry-content .ql-top.ql-top-materials .ql-material-card--featured::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 5px;
  border-top-left-radius: var(--ql-radius-xl);
  border-top-right-radius: var(--ql-radius-xl);
  background: linear-gradient(90deg, var(--ql-blue), var(--ql-cyan));
  pointer-events: none;
  z-index: 1;
}

/* (G) タグ（共通：ピル型） */
.entry-content .ql-top.ql-top-materials .ql-material-card__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ql-blue-soft);
  color: var(--ql-blue);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  white-space: nowrap;
  margin: 0;
}

/* 主力カードのタグはネイビー塗りつぶし */
.entry-content .ql-top.ql-top-materials .ql-material-card--featured .ql-material-card__tag {
  background: var(--ql-navy);
  color: #fff;
  letter-spacing: .12em;
  padding: 6px 14px;
  font-size: .78rem;
}

/* (H) タイトル — Cocoon h3/h4 装飾を完全リセット */
.entry-content .ql-top.ql-top-materials .ql-material-card__title {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: .005em;
  color: var(--ql-navy);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.entry-content .ql-top.ql-top-materials .ql-material-card__title::before,
.entry-content .ql-top.ql-top-materials .ql-material-card__title::after {
  content: none;
  display: none;
}
/* 主力カードのタイトルは大きく */
.entry-content .ql-top.ql-top-materials .ql-material-card--featured .ql-material-card__title {
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.5;
}

/* (I) 説明文 */
.entry-content .ql-top.ql-top-materials .ql-material-card__text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--ql-text-soft);
  flex-grow: 1;
}
/* 主力カードの説明文 */
.entry-content .ql-top.ql-top-materials .ql-material-card--featured .ql-material-card__text {
  font-size: 1rem;
  line-height: 1.95;
  color: var(--ql-text);
  flex-grow: 0;
}

/* (J) アクション（CTA配置） */
.entry-content .ql-top.ql-top-materials .ql-material-card__action {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.entry-content .ql-top.ql-top-materials .ql-material-card--featured .ql-material-card__action {
  margin-top: 12px;
}

/* (K) リンク（通常カード — 青系テキストリンク） */
.entry-content .ql-top.ql-top-materials .ql-material-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ql-blue);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s var(--ql-ease);
  align-self: flex-start;
  flex-wrap: wrap;
}
.entry-content .ql-top.ql-top-materials .ql-material-card__link:hover,
.entry-content .ql-top.ql-top-materials .ql-material-card__link:focus {
  color: var(--ql-blue-deeper) !important;
  text-decoration: none;
}
.entry-content .ql-top.ql-top-materials .ql-material-card__link > .fa-chevron-right,
.entry-content .ql-top.ql-top-materials .ql-material-card__link > .fas,
.entry-content .ql-top.ql-top-materials .ql-material-card__link > .far {
  color: inherit;
  font-size: .8em;
  margin-left: 2px;
  transition: transform .2s var(--ql-ease);
}
.entry-content .ql-top.ql-top-materials .ql-material-card__link:hover > .fa-chevron-right,
.entry-content .ql-top.ql-top-materials .ql-material-card__link:hover > .fas,
.entry-content .ql-top.ql-top-materials .ql-material-card__link:hover > .far {
  transform: translateX(3px);
}
/* 主力カード内に .ql-btn--primary が入る場合は v2.7-v2.8 の白文字対策が
   そのまま効くため、ここでは色を上書きしない。 */

/* (L) スマホ向け */
@media screen and (max-width: 768px) {
  .entry-content .ql-top.ql-top-materials .ql-materials {
    gap: 18px;
  }
  .entry-content .ql-top.ql-top-materials .ql-materials__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .entry-content .ql-top.ql-top-materials .ql-material-card {
    padding: 22px 22px;
  }
  .entry-content .ql-top.ql-top-materials .ql-material-card--featured {
    padding: 28px 26px;
    gap: 12px;
  }
  .entry-content .ql-top.ql-top-materials .ql-material-card--featured .ql-material-card__title {
    font-size: 1.18rem;
  }
  .entry-content .ql-top.ql-top-materials .ql-material-card--featured .ql-material-card__text {
    font-size: .96rem;
  }
}
@media screen and (max-width: 480px) {
  .entry-content .ql-top.ql-top-materials .ql-material-card {
    padding: 20px 18px;
  }
  .entry-content .ql-top.ql-top-materials .ql-material-card--featured {
    padding: 24px 20px;
  }
  .entry-content .ql-top.ql-top-materials .ql-material-card--featured .ql-material-card__title {
    font-size: 1.1rem;
  }
}


/* =====================================================================
   v2.14 — ITパスポート教材ラインアップ 比較リスト形式
   ---------------------------------------------------------------------
   HTMLが 1商品=1行 のリスト形式（.ql-material-row 系）に変わったため、
   これに対応するスタイルを追加。
   PC は「タグ | タイトル+説明 | リンク」の3カラム grid、
   スマホ（768px以下）は縦積みに切替。

   全セレクタは .entry-content .ql-top.ql-top-materials スコープ限定。
   旧 .ql-material-card 系（v2.13）は HTML で使われていないが、
   削除はせず残置（影響なし — 別クラス名のため衝突なし）。

   既存の横スクロール対策・hover青・ボタン白文字を壊さない。
   ===================================================================== */

/* (A) リスト全体ラッパー */
.entry-content .ql-top.ql-top-materials .ql-material-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* (B) 各行 — PC 3カラムレイアウト */
.entry-content .ql-top.ql-top-materials .ql-material-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 22px 26px;
  background: var(--ql-surface);
  border: 1px solid var(--ql-border);
  border-radius: var(--ql-radius);
  box-shadow: var(--ql-shadow-sm);
  transition:
    transform .2s var(--ql-ease),
    box-shadow .2s var(--ql-ease),
    border-color .2s var(--ql-ease);
}
.entry-content .ql-top.ql-top-materials .ql-material-row:hover {
  transform: translateY(-1px);
  box-shadow: var(--ql-shadow);
  border-color: #c9d8ee;
}

/* (C) featured 行 — 同じリズムの中で青系で目立たせる */
.entry-content .ql-top.ql-top-materials .ql-material-row--featured {
  border-color: #b8cdec;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  box-shadow: 0 6px 18px rgba(31,111,235,.08), var(--ql-shadow-sm);
}
.entry-content .ql-top.ql-top-materials .ql-material-row--featured:hover {
  border-color: #9fbce4;
  box-shadow: 0 10px 24px rgba(31,111,235,.12), var(--ql-shadow);
}

/* (D) タグ（左カラム）— ピル型、幅 130px 内で中央配置 */
.entry-content .ql-top.ql-top-materials .ql-material-row__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ql-blue-soft);
  color: var(--ql-blue);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

/* featured のタグはネイビー塗りつぶし */
.entry-content .ql-top.ql-top-materials .ql-material-row--featured .ql-material-row__tag {
  background: var(--ql-navy);
  color: #fff;
  letter-spacing: .12em;
}

/* (E) 中央 body（タイトル + 説明文） */
.entry-content .ql-top.ql-top-materials .ql-material-row__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* (F) タイトル — Cocoon h3 装飾を完全リセット */
.entry-content .ql-top.ql-top-materials .ql-material-row__title {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .005em;
  color: var(--ql-navy);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.entry-content .ql-top.ql-top-materials .ql-material-row__title::before,
.entry-content .ql-top.ql-top-materials .ql-material-row__title::after {
  content: none;
  display: none;
}
/* featured のタイトルは少し強く */
.entry-content .ql-top.ql-top-materials .ql-material-row--featured .ql-material-row__title {
  font-size: 1.08rem;
  font-weight: 800;
}

/* (G) 説明文 */
.entry-content .ql-top.ql-top-materials .ql-material-row__text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--ql-text-soft);
}

/* (H) アクション（右カラム） */
.entry-content .ql-top.ql-top-materials .ql-material-row__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* (I) リンク（小さめテキストリンク + FA chevron） */
.entry-content .ql-top.ql-top-materials .ql-material-row__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ql-blue);
  font-size: .94rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ql-ease);
}
.entry-content .ql-top.ql-top-materials .ql-material-row__link:hover,
.entry-content .ql-top.ql-top-materials .ql-material-row__link:focus {
  color: var(--ql-blue-deeper) !important;
  text-decoration: none;
}
.entry-content .ql-top.ql-top-materials .ql-material-row__link > .fa-chevron-right,
.entry-content .ql-top.ql-top-materials .ql-material-row__link > .fas,
.entry-content .ql-top.ql-top-materials .ql-material-row__link > .far {
  color: inherit;
  font-size: .8em;
  margin-left: 2px;
  transition: transform .2s var(--ql-ease);
}
.entry-content .ql-top.ql-top-materials .ql-material-row__link:hover > .fa-chevron-right,
.entry-content .ql-top.ql-top-materials .ql-material-row__link:hover > .fas,
.entry-content .ql-top.ql-top-materials .ql-material-row__link:hover > .far {
  transform: translateX(3px);
}

/* (J) スマホ — 768px以下は縦積み */
@media screen and (max-width: 768px) {
  .entry-content .ql-top.ql-top-materials .ql-material-list {
    gap: 12px;
  }
  .entry-content .ql-top.ql-top-materials .ql-material-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 18px;
    align-items: stretch;
  }
  .entry-content .ql-top.ql-top-materials .ql-material-row__tag {
    align-self: flex-start;
    min-width: 0;
    padding: 5px 12px;
  }
  .entry-content .ql-top.ql-top-materials .ql-material-row__action {
    justify-content: flex-start;
    margin-top: 4px;
  }
  .entry-content .ql-top.ql-top-materials .ql-material-row__link {
    font-size: .98rem;
    padding: 6px 0;
  }
  .entry-content .ql-top.ql-top-materials .ql-material-row__title {
    font-size: 1.04rem;
  }
  .entry-content .ql-top.ql-top-materials .ql-material-row--featured .ql-material-row__title {
    font-size: 1.1rem;
  }
  .entry-content .ql-top.ql-top-materials .ql-material-row__text {
    font-size: .92rem;
  }
}

@media screen and (max-width: 480px) {
  .entry-content .ql-top.ql-top-materials .ql-material-row {
    padding: 18px 16px;
  }
}


/* =====================================================================
   v2.15 — ITパスポート学習ハブ レイアウト整え
   ---------------------------------------------------------------------
   商品ラインアップが別セクション（.ql-top-materials）に分離された結果、
   .ql-top-itp 内には「学習ガイド → 練習問題 → 模擬テスト → PDF教材」の
   4ステップ学習ハブだけが残るが、過去の v2.12 までで .ql-itp-grid を
   2カラム構成（左ルート / 右商品）にしていた名残で、現在は左カラムだけが
   使われ右側に余白が出て、4カードが小さく弱く見えていた。

   対処:
   - .ql-itp-grid を 1カラムに切替 + max-width 1080px 中央寄せ
   - .ql-itp-routes を PC 4列 / 1024px以下 2列 / 768px以下 1列
   - カードを大きく（padding 30x26）
   - STEP ラベルを上品なピル型バッジに（番号導線が一目で分かる）
   - タイトル 1.1rem / 説明 0.96rem で読みやすく

   全セレクタは .entry-content .ql-top.ql-top-itp スコープ限定。
   既存の .ql-itp-pickup / .ql-itp-products / .ql-product-item 系は
   別セクション化された HTML では使われていないため、ここでは触らない。
   横スクロール対策・hover青・ボタン白文字は壊さない。
   ===================================================================== */

/* (A) ITパスポート集中導線のグリッドを 1カラム化、中央寄せ
   v2.5 / v2.12 の 2カラム指定を打ち消す */
.entry-content .ql-top.ql-top-itp .ql-itp-grid {
  grid-template-columns: 1fr;
  max-width: 1080px;
  margin-inline: auto;
  gap: 0;
  align-items: stretch;
}

/* (B) 4ステップを PC 4列で中央配置 */
.entry-content .ql-top.ql-top-itp .ql-itp-routes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 100%;
}

/* (C) 各ステップカード — padding 拡張、内側余白に呼吸感 */
.entry-content .ql-top.ql-top-itp .ql-itp-route {
  padding: 30px 26px;
  border-radius: var(--ql-radius-lg);
  gap: 0;
}

/* (D) STEP ラベルを上品なピル型バッジに
   学習導線の優先順位（1→2→3→4）が一目で分かる視覚アクセント */
.entry-content .ql-top.ql-top-itp .ql-itp-route__step {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0 0 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(31,111,235,.08), rgba(31,182,255,.08));
  color: var(--ql-blue);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.5;
  border: 1px solid rgba(31,111,235,.20);
}

/* (E) タイトル — Cocoon装飾は v2.5 でリセット済、サイズだけ調整 */
.entry-content .ql-top.ql-top-itp .ql-itp-route__title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ql-navy);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* (F) 説明文 — 読みやすさ重視 */
.entry-content .ql-top.ql-top-itp .ql-itp-route__text {
  margin: 0 0 20px;
  font-size: .96rem;
  line-height: 1.85;
  color: var(--ql-text-soft);
  flex-grow: 1;
}

/* (G) リンク — カード下端揃え（既存の margin-top: auto を維持） */
.entry-content .ql-top.ql-top-itp .ql-itp-route__link {
  font-size: .96rem;
  margin-top: auto;
}

/* (H) レスポンシブ */
@media screen and (max-width: 1024px) {
  .entry-content .ql-top.ql-top-itp .ql-itp-routes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}
@media screen and (max-width: 768px) {
  .entry-content .ql-top.ql-top-itp .ql-itp-routes {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .entry-content .ql-top.ql-top-itp .ql-itp-route {
    padding: 26px 22px;
  }
}
@media screen and (max-width: 480px) {
  .entry-content .ql-top.ql-top-itp .ql-itp-route {
    padding: 24px 20px;
  }
  .entry-content .ql-top.ql-top-itp .ql-itp-route__title {
    font-size: 1.04rem;
  }
}


/* =====================================================================
   v2.16 — トップページ ヘッダー直下／フッター直上 残余白の決定的除去
   ---------------------------------------------------------------------
   ステージングのスクリーンショットで確認された残課題：
   (上赤枠) ナビ直下〜ヒーロー上端に薄い帯（約 18px）が残る
   (下赤枠) 最終CTA下〜フッター上に淡ミントの帯（約 90px）が残る

   原因（Cocoon 親 style.css の継承）:
   - .entry-content { margin-top: 1em; margin-bottom: 3em; }
   - .article       { margin-bottom: 2em; }

   v2.6.1 / v2.8 / v2.9 ではこれらを padding / 子孫 main 系のみ 0 化して
   いたが、.entry-content / .article 自身の **margin** はそのまま残り、
   body 背景（ミント）が透けて見える状態だった。

   対処（縦方向の margin のみ、横方向は触らない）:
   - body.home / body.page-id-64 で :has(.ql-top) ゲート
   - .entry-content の margin-top / margin-bottom を 0
   - .article の margin-bottom を 0
   - !important は Cocoon 親の継承を確実に打ち消すための最小限使用

   壊さない:
   - .ql-top の margin-left/right: calc(50% - 50vw)（フルブリード）維持
   - .article / .content-in / .wrap の width / max-width / 横 margin は触らない
   - 通常記事・他ホームページ・サブページには :has(.ql-top) で無影響
   ===================================================================== */

body.home .entry-content:has(.ql-top),
body.page-id-64 .entry-content:has(.ql-top) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.home .article:has(.ql-top),
body.page-id-64 .article:has(.ql-top) {
  margin-bottom: 0 !important;
}


/* =====================================================================
   v2.17 — 下層ページ共通デザインシステム（.ql-page 系）
   ---------------------------------------------------------------------
   採用方針（前ターンの C案：既存温存＋共通追加のハイブリッド）:
   - IT パスポート / G検定 / 基本情報技術者 のサブトップ・ガイド・
     その他下層ページで共通利用する、白背景ベースのデザインシステム。
   - 資格別カラーは小さなアクセントのみ。修飾子（.ql-page--itp /
     .ql-page--gk / .ql-page--fe）でアクセント変数を切り替える。
   - 既存の .ql-top（トップ用） / .skl-quiz（プラグイン） / .fe-hub /
     .ip-hub / .gk-hub（既存サブトップ）/ .woocommerce には一切手を
     入れない。すべての内部クラスは .ql-page スコープに限定する。
   - 文字サイズ基準: 本文 16px、カード本文 15px、ラベル 14px。
     12px 多用なし。line-height 1.65〜1.8。

   命名規約（BEM 風）:
   - ブロック: .ql-page, .ql-section, .ql-card, .ql-grid, .ql-timeline,
              .ql-note, .ql-tip, .ql-warn, .ql-cta, .ql-page-hero
   - エレメント: __title / __text / __step / __icon （BEM の __ 連結）
   - 修飾子: .ql-page--itp / --gk / --fe （資格別アクセント切替）
   - ユーティリティ: .ql-fa-itp / --gk / --fe / --blue / --cyan / --navy / --muted

   壊さない（影響境界）:
   - .ql-top 関連は別スコープ。.ql-page 内には .ql-top が出ない設計
   - .skl-quiz は通常 .ql-page 配下に置かない（独立ページ）
   - .article h2 / .entry-content h2 のような広域セレクタは使わない
   - 既存 .fe-hub / .ip-hub / .gk-hub のクラス定義は触らない
   ===================================================================== */

/* --- (1) 追加トークン（既存 :root を上書きせず、新キーのみ追加） --- */
:root {
  --ql-page-width: 1080px;
  --ql-page-pad-x: clamp(20px, 4vw, 32px);

  /* デフォルトアクセント（修飾子なしの .ql-page は青系） */
  --ql-page-accent: var(--ql-blue);
  --ql-page-accent-soft: var(--ql-blue-soft);

  /* 資格別アクセント（.ql-page--xxx で参照） */
  --ql-accent-itp: #11998e;
  --ql-accent-itp-soft: #e6faf4;
  --ql-accent-gk: #7c3aed;
  --ql-accent-gk-soft: #f3e8ff;
  --ql-accent-fe: #f59e0b;
  --ql-accent-fe-soft: #fff1dc;

  /* tip / warn の系統色 */
  --ql-tip-bg: #fffbeb;
  --ql-tip-bd: #f6ad55;
  --ql-tip-fg: #744210;
  --ql-warn-bg: #fff5f5;
  --ql-warn-bd: #fc8181;
  --ql-warn-fg: #9b2335;
}

/* --- (2) ラッパー --- */
.ql-page {
  width: 100%;
  max-width: var(--ql-page-width);
  margin: 0 auto;
  padding: 0 var(--ql-page-pad-x);
  box-sizing: border-box;
  color: var(--ql-text);
  font-size: 16px;
  line-height: 1.75;
}
.ql-page *,
.ql-page *::before,
.ql-page *::after { box-sizing: border-box; }

.ql-page--itp { --ql-page-accent: var(--ql-accent-itp); --ql-page-accent-soft: var(--ql-accent-itp-soft); }
.ql-page--gk  { --ql-page-accent: var(--ql-accent-gk);  --ql-page-accent-soft: var(--ql-accent-gk-soft);  }
.ql-page--fe  { --ql-page-accent: var(--ql-accent-fe);  --ql-page-accent-soft: var(--ql-accent-fe-soft);  }

/* --- (3) Cocoon 親見出し装飾リセット（.ql-page スコープ内のみ） --- */
.ql-page :is(h1, h2, h3, h4, h5, h6) {
  background: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  padding: 0;
  margin: 0;
  color: inherit;
  line-height: 1.45;
  font-weight: 700;
}
.ql-page :is(h1, h2, h3, h4, h5, h6)::before,
.ql-page :is(h1, h2, h3, h4, h5, h6)::after {
  content: none;
  display: none;
}

/* --- (4) ヒーロー（白カード＋細いアクセントバー） --- */
.ql-page .ql-page-hero {
  position: relative;
  background: var(--ql-surface);
  border: 1px solid var(--ql-border);
  border-left: 3px solid var(--ql-page-accent);
  border-radius: var(--ql-radius);
  padding: 28px 32px;
  margin: 0 0 32px;
  box-shadow: var(--ql-shadow-sm);
}
.ql-page .ql-page-kicker {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ql-page-accent);
  text-transform: uppercase;
}
.ql-page .ql-page-kicker .fas,
.ql-page .ql-page-kicker .far,
.ql-page .ql-page-kicker .fal,
.ql-page .ql-page-kicker .fab {
  margin-right: 6px;
}
.ql-page .ql-page-title {
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ql-navy);
}
.ql-page .ql-page-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--ql-text-soft);
}

/* --- (5) セクション --- */
.ql-page .ql-section {
  margin: 0 0 36px;
}
.ql-page .ql-section:last-child {
  margin-bottom: 0;
}
.ql-page .ql-section-title {
  position: relative;
  margin: 0 0 18px;
  padding: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ql-navy);
}
.ql-page .ql-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--ql-page-accent);
}
.ql-page .ql-section-lead {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ql-text-soft);
}

/* --- (6) グリッド & カード --- */
.ql-page .ql-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 0 0 8px;
}
.ql-page .ql-card {
  display: block;
  background: var(--ql-surface);
  border: 1px solid var(--ql-border);
  border-radius: var(--ql-radius);
  padding: 22px 20px;
  text-decoration: none;
  color: var(--ql-text);
  box-shadow: var(--ql-shadow-sm);
  transition:
    transform .18s var(--ql-ease),
    box-shadow .18s var(--ql-ease),
    border-color .18s var(--ql-ease);
}
.ql-page a.ql-card:hover,
.ql-page a.ql-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ql-shadow-md);
  border-color: var(--ql-page-accent);
  color: var(--ql-text);
  text-decoration: none;
}
.ql-page a.ql-card:focus-visible {
  outline: 3px solid var(--ql-page-accent-soft);
  outline-offset: 2px;
}
.ql-page .ql-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1;
  color: var(--ql-page-accent);
}
.ql-page .ql-card-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ql-navy);
}
.ql-page .ql-card-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ql-text-soft);
}

/* --- (7) タイムライン --- */
.ql-page .ql-timeline {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 4px 0 4px 32px;
}
.ql-page .ql-timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--ql-page-accent-soft);
  border-radius: 1px;
}
.ql-page .ql-timeline-item {
  position: relative;
  margin: 0 0 24px;
}
.ql-page .ql-timeline-item:last-child {
  margin-bottom: 0;
}
.ql-page .ql-timeline-item__step {
  position: absolute;
  left: -32px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  background: var(--ql-page-accent);
  color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ql-page-accent-soft);
}
.ql-page .ql-timeline-item__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ql-navy);
}
.ql-page .ql-timeline-item__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ql-text-soft);
}

/* --- (8) note / tip / warn --- */
.ql-page .ql-note {
  background: var(--ql-bg-blue);
  border: 1px solid #c3dafe;
  border-left: 4px solid var(--ql-blue);
  border-radius: 0 var(--ql-radius-sm) var(--ql-radius-sm) 0;
  padding: 14px 18px;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ql-text);
}
.ql-page .ql-note > :first-child { margin-top: 0; }
.ql-page .ql-note > :last-child { margin-bottom: 0; }

.ql-page .ql-tip {
  background: var(--ql-tip-bg);
  border-left: 4px solid var(--ql-tip-bd);
  border-radius: 0 var(--ql-radius-sm) var(--ql-radius-sm) 0;
  padding: 12px 16px;
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ql-tip-fg);
}

.ql-page .ql-warn {
  background: var(--ql-warn-bg);
  border-left: 4px solid var(--ql-warn-bd);
  border-radius: 0 var(--ql-radius-sm) var(--ql-radius-sm) 0;
  padding: 12px 16px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--ql-warn-fg);
}

/* --- (9) CTA ラッパー（.ql-btn / .ql-link-list は既存を流用） --- */
.ql-page .ql-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 24px 0 0;
}

/* --- (10) FontAwesome アクセント色ヘルパー（ユーティリティ）
       例: <i class="fas fa-book-open ql-fa-fe" aria-hidden="true"></i>
       サイズや余白は文脈側（.ql-card-icon など）で制御し、ここは color のみ。 */
.ql-fa-itp   { color: var(--ql-accent-itp); }
.ql-fa-gk    { color: var(--ql-accent-gk);  }
.ql-fa-fe    { color: var(--ql-accent-fe);  }
.ql-fa-blue  { color: var(--ql-blue);  }
.ql-fa-cyan  { color: var(--ql-cyan);  }
.ql-fa-navy  { color: var(--ql-navy);  }
.ql-fa-muted { color: var(--ql-muted); }

/* --- (11) レスポンシブ --- */
@media (max-width: 768px) {
  .ql-page .ql-page-hero { padding: 22px 22px; }
  .ql-page .ql-page-title { font-size: 24px; }
  .ql-page .ql-page-lead { font-size: 16px; }
  .ql-page .ql-section { margin-bottom: 28px; }
  .ql-page .ql-section-title { font-size: 20px; }
  .ql-page .ql-grid { grid-template-columns: 1fr; gap: 12px; }
  .ql-page .ql-card { padding: 18px 18px; }
  .ql-page .ql-timeline { padding-left: 28px; }
  .ql-page .ql-timeline-item__step { left: -28px; }
}

@media (max-width: 480px) {
  .ql-page .ql-page-hero { padding: 20px 18px; }
  .ql-page .ql-page-title { font-size: 22px; }
  .ql-page .ql-section-title { font-size: 19px; }
  .ql-page .ql-card-title { font-size: 16px; }
}


/* =====================================================================
   v2.18 — .ql-page 採用ページのパンくず・ページ見出し中央寄せ
   ---------------------------------------------------------------------
   実DOM（Cocoon親テーマ tmp/breadcrumbs-page.php, content.php, body-top.php）:

     <body class="page page-id-XXX ...">
       <div id="content-in" class="content-in wrap">
         <main id="main" class="main ...">
           <div id="breadcrumb" class="breadcrumb breadcrumb-page">…</div>  ← .article の外
           <article class="article ...">
             <header class="article-header entry-header">
               <h1 class="entry-title">…</h1>                                ← .article の中
             </header>
             <div class="entry-content">
               <div class="ql-page ql-page--XXX">…</div>
             </div>
           </article>
         </main>
       </div>
     </body>

   設計の要点:
   - .breadcrumb は .article の外なので、.article:has(.ql-page) では選択
     できない。代わりに #main:has(.ql-page) で .ql-page を含む main 内に
     限定する。
   - .entry-title / .article-header は .article 内のため、
     .article:has(.ql-page) でそのまま当てる。
   - 通常記事・トップ・クイズ等（.ql-page 非保有）には :has(.ql-page) で
     ゲートしているため無影響。
   - 既存 v2.16（body.home / body.page-id-64 で .ql-top の margin リセット）
     とは body セレクタが排他のため干渉しない。
   ===================================================================== */

/* (1) パンくず — .ql-page と同じ幅で中央寄せ、本文より控えめに */
body.page #main:has(.ql-page) .breadcrumb {
  max-width: var(--ql-page-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--ql-page-pad-x);
  margin-bottom: 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ql-text-soft);
  background: none;
}
body.page #main:has(.ql-page) .breadcrumb a {
  color: var(--ql-text-soft);
  text-decoration: none;
  transition: color .15s var(--ql-ease);
}
body.page #main:has(.ql-page) .breadcrumb a:hover {
  color: var(--ql-page-accent);
  text-decoration: underline;
}
body.page #main:has(.ql-page) .breadcrumb .breadcrumb-home,
body.page #main:has(.ql-page) .breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 2px;
}
body.page #main:has(.ql-page) .breadcrumb .breadcrumb-caption {
  font-size: 14px;
}

/* (2) ページ見出し — 中央寄せ、Cocoon装飾リセット、下マージン確保 */
body.page .article:has(.ql-page) .article-header,
body.page .article:has(.ql-page) .entry-header {
  background: none;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 auto 24px;
  text-align: center;
}
body.page .article:has(.ql-page) .entry-title {
  max-width: var(--ql-page-width);
  margin: 0 auto 32px;
  padding: 0 var(--ql-page-pad-x);
  text-align: center;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--ql-navy);
  background: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}
body.page .article:has(.ql-page) .entry-title::before,
body.page .article:has(.ql-page) .entry-title::after {
  content: none;
  display: none;
  background: none;
  border: 0;
}

/* (3) レスポンシブ */
@media (max-width: 768px) {
  body.page #main:has(.ql-page) .breadcrumb {
    margin-bottom: 14px;
    font-size: 13px;
  }
  body.page #main:has(.ql-page) .breadcrumb .breadcrumb-caption {
    font-size: 13px;
  }
  body.page .article:has(.ql-page) .entry-title {
    margin-bottom: 24px;
  }
}


/* =====================================================================
   v2.19 — .ql-page 下層共通デザインのアクセント抑制・タイムライン強化
   ---------------------------------------------------------------------
   v2.17 ベースに対する2点の微調整:

   (1) カード内 FontAwesome アイコンを共通ブルーに統一
       - v2.17 で .ql-card-icon の color を --ql-page-accent にしていた
         ため、.ql-page--fe では全カードアイコンがオレンジ一色になり、
         資格別アクセントが強すぎた。
       - ここで .ql-page .ql-card .ql-card-icon 配下の FA を --ql-blue に
         上書き。本文側の .ql-fa-fe / --itp / --gk もカード文脈ではブルー
         に統一される。
       - カード外（.ql-page-kicker, .ql-cta 内ボタン, .ql-link-list,
         .ql-note 内など）の .ql-fa-X は v2.17 通り資格色が効く。
       - .ql-fa-fe / .ql-fa-itp / .ql-fa-gk の定義そのものは温存。

   (2) タイムライン縦線をロードマップ風に強化
       - v2.17 の .ql-timeline::before（全体縦線、色 --ql-page-accent-soft）
         は .ql-page--fe では #fff1dc で非常に淡く視認性が低かった。
       - 全体線を無効化し、item ごとに --ql-border 色で「自分の step 下
         → 次 item の step 上」を結ぶ線を引く。最終 item は線を出さない。
       - 番号丸の後ろを通る控えめな線。番号丸の見た目・サイズ・色は
         v2.17 のまま維持。

   スコープ: いずれも .ql-page 配下のみ。.ql-top / .skl-quiz / 旧
   .fe-* / .ip-* / .gk-* / .sg-* / .ip-sg-* には到達しない。
   ===================================================================== */

/* (1) カード内 FA アイコン色を青系に統一（資格別アクセントを抑制） */
.ql-page .ql-card .ql-card-icon,
.ql-page .ql-card .ql-card-icon .fas,
.ql-page .ql-card .ql-card-icon .far,
.ql-page .ql-card .ql-card-icon .fal,
.ql-page .ql-card .ql-card-icon .fab {
  color: var(--ql-blue);
}

/* (2) タイムライン縦線（ロードマップ風） */

/* v2.17 の .ql-timeline::before（全体縦線、視認性低）を無効化 */
.ql-page .ql-timeline::before {
  content: none;
  display: none;
}

/* item ごとに「自分の step 下端 → 次 item の step 上端」を結ぶ縦線
   - left: PC -21px / SP -17px は step 中央（line center = step center）
   - top: 28px は step（top:0, height:24px）の下端 + 4px 余白
   - bottom: -28px は item margin-bottom:24px + step 上の余白 4px
   - 線色は --ql-border で控えめ
   - 番号丸は z-index 上層になるため線は丸の背面を通る */
.ql-page .ql-timeline-item::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 28px;
  bottom: -28px;
  width: 2px;
  background: var(--ql-border);
  border-radius: 1px;
}

/* 最終 item は線を出さない（末尾で不自然に伸びるのを防ぐ） */
.ql-page .ql-timeline-item:last-child::before {
  content: none;
  display: none;
}

/* レスポンシブ: padding-left: 28px / step left: -28px に対応 */
@media (max-width: 768px) {
  .ql-page .ql-timeline-item::before {
    left: -17px;
  }
}


/* =====================================================================
   v2.20 — .skl-quiz クイズページ共通の幅・ページヘッダー・スマホ表示調整
   ---------------------------------------------------------------------
   背景:
   - G検定 practice / mock-test を新クイズエンジンへ差し替えた結果、
     `.skl-quiz` 採用ページでは v2.18（.ql-page 採用ページ限定の中央寄せ）
     が効かず、パンくず・ページ見出しが左寄せのまま残っている。
   - クイズカードの max-width は プラグイン側で 860px だが、`.ql-page`
     ガイドページ系の 1080px とトンマナが揃わない。
   - スマホ結果画面で内部要素が overflow する可能性が出ている。

   方針（すべて `.skl-quiz` 採用ページ限定、`:has(.skl-quiz)` ゲート）:
   (1) パンくず中央寄せ（v2.18 と同じ思想で .skl-quiz ゲート版）
   (2) ページ見出し中央寄せ（v2.18 と同じ思想で .skl-quiz ゲート版）
   (3) `.skl-quiz` の max-width を --ql-page-width (1080px) に拡張
   (4) スマホ overflow 対策（長文の折り返しを保証）

   壊さない（影響境界）:
   - .ql-top（トップページ）: .skl-quiz が出ない設計 → 無影響
   - .ql-page（ガイドページ）: v2.18 で既に中央寄せ済み、:has(.skl-quiz) で
     ゲートしているので二重適用なし
   - 旧 .fe-/.ip-/.gk-/.sg- 系: .skl-quiz を含まないため :has() ゲートで無影響
   - WooCommerce / LP: 同上、.skl-quiz を含まないため無影響
   - プラグイン本体 CSS（assets/css/skl-quiz.css）には触らない
   - 既存 .skl-quiz 関連定義（box-sizing: border-box は既存）はそのまま流用

   実DOM（v2.18 で確認済、.ql-page のときと同じ Cocoon 親テンプレート）:
     <body class="page page-id-XXX ...">
       <main id="main">
         <div class="breadcrumb breadcrumb-page">…</div>   ← .article の外
         <article class="article ...">
           <header class="article-header entry-header">
             <h1 class="entry-title">…</h1>                ← .article の中
           </header>
           <div class="entry-content">
             <div class="skl-quiz" id="..." data-skl-quiz-set="...">…</div>
           </div>
         </article>
       </main>
     </body>
   ===================================================================== */

/* (1) パンくず — 中央寄せ + .ql-page と同じ最大幅 */
body.page #main:has(.skl-quiz) .breadcrumb {
  max-width: var(--ql-page-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--ql-page-pad-x);
  margin-bottom: 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ql-text-soft);
  background: none;
}
body.page #main:has(.skl-quiz) .breadcrumb a {
  color: var(--ql-text-soft);
  text-decoration: none;
  transition: color .15s var(--ql-ease);
}
body.page #main:has(.skl-quiz) .breadcrumb a:hover {
  color: var(--ql-blue);
  text-decoration: underline;
}
body.page #main:has(.skl-quiz) .breadcrumb .breadcrumb-home,
body.page #main:has(.skl-quiz) .breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 2px;
}
body.page #main:has(.skl-quiz) .breadcrumb .breadcrumb-caption {
  font-size: 14px;
}

/* (2) ページ見出し — 中央寄せ + Cocoon 装飾リセット + 下マージン */
body.page .article:has(.skl-quiz) .article-header,
body.page .article:has(.skl-quiz) .entry-header {
  background: none;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 auto 24px;
  text-align: center;
}
body.page .article:has(.skl-quiz) .entry-title {
  max-width: var(--ql-page-width);
  margin: 0 auto 32px;
  padding: 0 var(--ql-page-pad-x);
  text-align: center;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--ql-navy);
  background: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}
body.page .article:has(.skl-quiz) .entry-title::before,
body.page .article:has(.skl-quiz) .entry-title::after {
  content: none;
  display: none;
  background: none;
  border: 0;
}

/* (3) .skl-quiz クイズカードの max-width を .ql-page と揃える
       プラグイン側は 860px、ここで 1080px へ拡張。
       詳細度: body.page .article:has(.skl-quiz) .skl-quiz = (0,4,1)
       vs プラグインの .skl-quiz = (0,1,0) → 上書き成立 */
body.page .article:has(.skl-quiz) .skl-quiz {
  width: 100%;
  max-width: var(--ql-page-width);
  margin-left: auto;
  margin-right: auto;
}

/* (4) スマホ結果画面・解説まとめの overflow 対策
   ---------------------------------------------------------------------
   プラグインは .skl-quiz * { box-sizing: border-box } を既に持つが、
   問題本文・解説・レビュー本文・サマリー本文・正誤フィードバックの
   <p> 子要素には overflow-wrap が未指定の箇所があり、長い URL や
   句読点のない日本語/英数字混在テキストでスマホ幅を突破する可能性。
   ここでテキスト系コンテナに overflow-wrap: anywhere を保証する。
   namespace は .skl-quiz 配下のみのため、:has() ゲートは不要。 */
.skl-quiz .skl-quiz__question-body,
.skl-quiz .skl-quiz__question-body p,
.skl-quiz .skl-quiz__choice-text,
.skl-quiz .skl-quiz__feedback,
.skl-quiz .skl-quiz__explanation-body,
.skl-quiz .skl-quiz__review-question,
.skl-quiz .skl-quiz__review-question p,
.skl-quiz .skl-quiz__review-explanation,
.skl-quiz .skl-quiz__summary-body,
.skl-quiz .skl-quiz__wrong-item {
  overflow-wrap: anywhere;
  word-break: normal;
  min-width: 0;
}

/* flex 親側にも min-width: 0 を保証（縮められないと子の overflow-wrap が無効化される） */
.skl-quiz .skl-quiz__summary-head,
.skl-quiz .skl-quiz__wrong-items,
.skl-quiz .skl-quiz__review-list,
.skl-quiz .skl-quiz__review-item,
.skl-quiz .skl-quiz__review-head {
  min-width: 0;
}

/* (5) レスポンシブ — 768px 以下でパンくず・見出しを少しコンパクトに */
@media (max-width: 768px) {
  body.page #main:has(.skl-quiz) .breadcrumb {
    margin-bottom: 14px;
    font-size: 13px;
  }
  body.page #main:has(.skl-quiz) .breadcrumb .breadcrumb-caption {
    font-size: 13px;
  }
  body.page .article:has(.skl-quiz) .entry-title {
    margin-bottom: 24px;
  }
}


/* =====================================================================
   v2.21 — トップページ商品リストCTAの縦中央揃え
   ---------------------------------------------------------------------
   問題:
     `.ql-top-materials` の `.ql-material-row` は CSS Grid (130px 1fr auto)
     で align-items: center を指定しており、3カラム(タグ / 本文 / 右CTA)が
     縦中央に揃う設計。
     しかし、実DOMで `.ql-material-row__action` は `<p>` 要素として出力
     されており、Cocoon親テーマの `.entry-content p` 既定マージン
     (margin-bottom 系) が `<p>` の margin-box に含まれるため、grid の
     align-items: center が margin-box の中心を揃えた結果、視覚的には
     リンクテキストが「やや上寄り」に見えていた。

   修正方針(最小):
     - `.ql-material-row__action`(つまり該当 <p>)の上下マージンを 0 に
       リセットし、margin-box = 内容ボックス と一致させる。
     - これにより grid の縦中央揃えが視覚的にも中央へ落ちる。
     - モバイル(<=768px)では既存の margin-top: 4px(縦積み時の上余白)
       が必要なので、メディアクエリで再付与する。
     - 既存 padding / display / align-items 設定は触らない。

   スコープ:
     - `.entry-content .ql-top.ql-top-materials .ql-material-row__action`
       でトップページの商品リスト限定。他セクション・他ページには無影響。
   ===================================================================== */

/* PC: 縦マージンを 0 にリセット → grid align-items: center が機能 */
.entry-content .ql-top.ql-top-materials .ql-material-row__action {
  margin-top: 0;
  margin-bottom: 0;
}

/* モバイル: 既存の縦積み時の上余白 (margin-top: 4px) を維持
   ※ v2.14 の `.ql-material-row__action { margin-top: 4px; }` を再適用 */
@media screen and (max-width: 768px) {
  .entry-content .ql-top.ql-top-materials .ql-material-row__action {
    margin-top: 4px;
    margin-bottom: 0;
  }
}


/* =====================================================================
   v2.22 — スマホ用ハンバーガーメニュー
   ---------------------------------------------------------------------
   背景:
     Cocoon 親テーマの `mobile_button_layout_type` が 'none' に設定されて
     いるため、Cocoon 標準のモバイルヘッダー/フッターのメニューボタン
     (.mobile-header-menu-buttons / .navi-menu-button 等) が一切 DOM に
     出力されない。一方で PC ナビ (#navi) は @media (max-width: 1023px)
     で Cocoon 既定で非表示になるため、スマホでグローバルナビにアクセス
     する手段が無くなっていた。

   修正方針:
     - Cocoon 側設定は変更しない。
     - 子テーマ functions.php で wp_body_open フックに、独自ハンバーガー
       ボタン + ドロワー + バックドロップ を追加 (HTML のみ、inline JS/CSS
       なし)。
     - ドロワー中身は wp_nav_menu(NAV_MENU_HEADER) で既存メインメニュー
       を再利用。
     - 開閉ロジックは javascript.js に集約。
     - 表示制御 (PC では完全非表示 / スマホでのみ出現) を本 CSS で実装。

   スコープ:
     - .skl-mobile-menu-toggle / .skl-mobile-menu / .skl-mobile-menu-backdrop
       配下のみ。Cocoon 親テーマ要素は触らない。
   ===================================================================== */

/* デフォルト (PC幅): ハンバーガー一式は完全非表示。PCナビは現状維持。 */
.skl-mobile-menu-toggle,
.skl-mobile-menu,
.skl-mobile-menu-backdrop {
  display: none;
}

@media (max-width: 768px) {

  /* --- ハンバーガーボタン (画面右上 fixed / v2.22.1 半透明ガラス調) --- */
  .skl-mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    right: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
    color: #3a3a5c;
    cursor: pointer;
    z-index: 10001;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
  }

  /* WP管理バー表示時 (admin-bar 46px + 余白10px) */
  body.admin-bar .skl-mobile-menu-toggle {
    top: 56px;
  }

  .skl-mobile-menu-toggle:hover,
  .skl-mobile-menu-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.42);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    outline: none;
  }

  /* 3本線アイコン (CSS のみ、画像/絵文字なし) */
  .skl-mobile-menu-toggle__bars {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 16px;
  }
  .skl-mobile-menu-toggle__bars > span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: top 0.2s ease, transform 0.2s ease, opacity 0.15s ease;
  }
  .skl-mobile-menu-toggle__bars > span:nth-child(1) { top: 1px; }
  .skl-mobile-menu-toggle__bars > span:nth-child(2) { top: 7px; }
  .skl-mobile-menu-toggle__bars > span:nth-child(3) { top: 13px; }

  /* 開状態 (× 印に変形) */
  .skl-mobile-menu-toggle[aria-expanded="true"] .skl-mobile-menu-toggle__bars > span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }
  .skl-mobile-menu-toggle[aria-expanded="true"] .skl-mobile-menu-toggle__bars > span:nth-child(2) {
    opacity: 0;
  }
  .skl-mobile-menu-toggle[aria-expanded="true"] .skl-mobile-menu-toggle__bars > span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }

  /* --- ドロワー (画面右からスライドイン / v2.22.1 半透明ガラス調) --- */
  .skl-mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: min(82vw, 320px);
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    padding: 64px 0 24px;
    background: rgba(248, 252, 255, 0.9);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-left: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: -8px 0 28px rgba(15, 23, 42, 0.14);
    transform: translateX(100%);
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    visibility: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 10000;
  }

  body.admin-bar .skl-mobile-menu {
    padding-top: 110px;
  }

  .skl-mobile-menu[aria-hidden="false"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s linear 0s;
  }

  /* --- バックドロップ (タップで閉じる / v2.22.1 半透明 + 軽ブラー) --- */
  .skl-mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    z-index: 9999;
  }
  .skl-mobile-menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
  }

  /* --- ドロワー内メニューリスト --- */
  .skl-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .skl-mobile-menu__list li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #eef0f6;
  }
  .skl-mobile-menu__list a {
    display: block;
    padding: 14px 20px;
    font-size: 15px;
    line-height: 1.4;
    color: #3a3a5c;
    text-decoration: none;
    transition: background 0.15s;
  }
  .skl-mobile-menu__list a:hover,
  .skl-mobile-menu__list a:focus-visible {
    background: #f3f6fc;
    color: #3a3a5c;
    outline: none;
  }
  .skl-mobile-menu__list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fafbfd;
  }
  .skl-mobile-menu__list .sub-menu a {
    padding-left: 36px;
    font-size: 14px;
    color: #555578;
  }

  /* ドロワーオープン時、背面の縦スクロールを抑止 */
  body.skl-mobile-menu-open {
    overflow: hidden;
  }
}

/* =====================================================================
   ★ 個別投稿ページ (single post) - .ql-article*
   ---------------------------------------------------------------------
   子テーマ single.php で <article class="ql-page ql-article ql-page--itp|--gk|--fe">
   をルートに使うため、ヒーロー/メタ/アイキャッチ/本文の追加スタイルを
   body.single-post スコープで定義する。
   - .ql-page / .ql-page-hero / .ql-page-kicker / .ql-page-title /
     .ql-section の既存スタイルはそのまま継承
   - 追加要素は .ql-article-meta / .ql-article-eyecatch / .ql-article-body /
     .ql-article-nav のみ
   - body.single-post スコープなので固定ページ・カテゴリ・検索には波及しない
   ===================================================================== */
body.single-post .ql-article {
  /* .ql-page を継承（max-width: 1080px / 中央寄せ / padding-x） */
}

/* ヒーロー：既存 .ql-page-hero（白カード + アクセントバー）を継承 */
body.single-post .ql-article-title {
  /* .ql-page-title を継承（28px navy 太字） */
}

/* メタ行（カテゴリ + 公開日 / 更新日） */
body.single-post .ql-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ql-text-soft);
}
body.single-post .ql-article-meta__cat {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ql-page-accent, var(--ql-blue));
  background: var(--ql-page-accent-soft, var(--ql-blue-soft));
  border-radius: 999px;
}
body.single-post .ql-article-meta__date {
  color: var(--ql-muted);
}

/* アイキャッチ画像（中央揃え） */
body.single-post .ql-article-eyecatch {
  margin: 0 auto 28px;
  padding: 0;
  text-align: center;
}
body.single-post .ql-article-eyecatch__img {
  display: block;
  max-width: 720px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--ql-radius);
  box-shadow: var(--ql-shadow-sm);
}

/* 本文セクション */
body.single-post .ql-article-body {
  /* .ql-section を継承（margin: 0 0 36px） */
}
body.single-post .ql-article-body .entry-content {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ql-text);
}

/* 本文 h2：資格ラボの section-title 風（左下アクセントバー） */
body.single-post .ql-article-body h2 {
  position: relative;
  margin: 44px 0 18px;
  padding: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ql-navy);
}
body.single-post .ql-article-body h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--ql-page-accent, var(--ql-blue));
  display: block;
}

/* 本文 h3：左縦線の小見出し */
body.single-post .ql-article-body h3 {
  margin: 28px 0 12px;
  padding: 0 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ql-navy);
  border-left: 3px solid var(--ql-page-accent, var(--ql-blue));
}

/* 本文 段落・リスト */
body.single-post .ql-article-body p {
  margin: 0 0 16px;
}
body.single-post .ql-article-body ul,
body.single-post .ql-article-body ol {
  margin: 0 0 18px;
  padding-left: 1.6em;
}
body.single-post .ql-article-body li {
  margin: 4px 0;
}

/* 本文 リンク */
body.single-post .ql-article-body a {
  color: var(--ql-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.single-post .ql-article-body a:hover {
  color: var(--ql-blue-deeper);
}

/* 本文 テーブル */
body.single-post .ql-article-body .wp-block-table,
body.single-post .ql-article-body figure.wp-block-table {
  margin: 0 0 18px;
  overflow-x: auto;
}
body.single-post .ql-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 15px;
  background: var(--ql-surface);
}
body.single-post .ql-article-body th,
body.single-post .ql-article-body td {
  padding: 10px 12px;
  border: 1px solid var(--ql-border);
  text-align: left;
  vertical-align: top;
}
body.single-post .ql-article-body th {
  background: var(--ql-bg-soft);
  font-weight: 700;
}

/* 本文 区切り */
body.single-post .ql-article-body hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--ql-border);
}

/* 本文 画像（本文内画像が出てきた場合の保険） */
body.single-post .ql-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ql-radius-sm);
}

/* 前後記事ナビ（控えめ） */
body.single-post .ql-article-nav {
  max-width: var(--ql-page-width);
  margin: 32px auto 0;
  padding: 0 var(--ql-page-pad-x);
}
body.single-post .ql-article-nav .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
body.single-post .ql-article-nav .nav-previous a,
body.single-post .ql-article-nav .nav-next a {
  display: block;
  padding: 14px 16px;
  background: var(--ql-surface);
  border: 1px solid var(--ql-border);
  border-radius: var(--ql-radius-sm);
  color: var(--ql-text);
  text-decoration: none;
  transition: box-shadow .18s var(--ql-ease), transform .18s var(--ql-ease);
}
body.single-post .ql-article-nav .nav-previous a:hover,
body.single-post .ql-article-nav .nav-next a:hover {
  box-shadow: var(--ql-shadow-sm);
  transform: translateY(-1px);
}
body.single-post .ql-article-nav .nav-next {
  text-align: right;
}
body.single-post .ql-article-nav .ql-article-nav__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ql-muted);
}
body.single-post .ql-article-nav .ql-article-nav__title {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ql-navy);
  line-height: 1.5;
}

/* スマホ調整 */
@media (max-width: 600px) {
  body.single-post .ql-article-body .entry-content {
    font-size: 15px;
    line-height: 1.8;
  }
  body.single-post .ql-article-body h2 {
    margin-top: 36px;
    font-size: 20px;
  }
  body.single-post .ql-article-body h3 {
    font-size: 16px;
  }
  body.single-post .ql-article-body table {
    font-size: 14px;
  }
  body.single-post .ql-article-eyecatch__img {
    max-width: 100%;
    border-radius: var(--ql-radius-sm);
  }
  body.single-post .ql-article-nav .nav-links {
    grid-template-columns: 1fr;
  }
  body.single-post .ql-article-nav .nav-next {
    text-align: left;
  }
}

/* =====================================================================
   v2.20 — パンくず統一中央寄せ + .ql-page 系の Cocoon 大見出し非表示
   ---------------------------------------------------------------------
   v2.18 で「固定ページの entry-title を中央寄せに restyle」していたが、
   実際は本文の .ql-page-hero 内 h1 (.ql-page-title) と重複表示になっていた。
   v2.20 では entry-title を完全に非表示にし、.ql-page-title を実際の見出
   しとして見せる。

   同時に、v2.18 のパンくず中央寄せ (body.page #main:has(.ql-page))
   ルールを、子テーマ category.php / single.php (個別記事) でも有効化する。

   スコープ:
   - body.page (固定ページ全般、body_class が page を持つもの)
   - body.archive.category (カテゴリトップ、子テーマ category.php)
   - body.single-post (個別記事、子テーマ single.php)
   いずれも :has(.ql-page) ゲート付きなので、.ql-page 非使用ページ
   (LP=no-page-title / 商品 / 検索 / カート / チェックアウト) に影響なし。

   検索 (body.search) は Cocoon の tmp/breadcrumbs.php が
   is_single()||is_tax()||is_category() でしか発火しないため、現状
   breadcrumb 要素自体が出ない。スコープに含めず影響なし。
   ===================================================================== */

/* (1) Cocoon の article-header / entry-title を非表示
       — body.page かつ本文に .ql-page を含むとき限定
       — v2.18 の同セレクタの restyle (max-width / margin / font-size)
         を後勝ちで display: none に上書きする */
body.page .article:has(.ql-page) .article-header,
body.page .article:has(.ql-page) .entry-header,
body.page .article:has(.ql-page) .entry-title {
  display: none;
}

/* (2) パンくず中央寄せ — category.php / single.php 用
       v2.18 の body.page スコープと同じ装飾を適用 */
body.archive.category #main:has(.ql-page) .breadcrumb,
body.single-post     #main:has(.ql-page) .breadcrumb {
  max-width: var(--ql-page-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--ql-page-pad-x);
  margin-bottom: 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ql-text-soft);
  background: none;
}
body.archive.category #main:has(.ql-page) .breadcrumb a,
body.single-post     #main:has(.ql-page) .breadcrumb a {
  color: var(--ql-text-soft);
  text-decoration: none;
  transition: color .15s var(--ql-ease);
}
body.archive.category #main:has(.ql-page) .breadcrumb a:hover,
body.single-post     #main:has(.ql-page) .breadcrumb a:hover {
  color: var(--ql-page-accent, var(--ql-blue));
  text-decoration: underline;
}
body.archive.category #main:has(.ql-page) .breadcrumb .breadcrumb-home,
body.archive.category #main:has(.ql-page) .breadcrumb .breadcrumb-item,
body.single-post     #main:has(.ql-page) .breadcrumb .breadcrumb-home,
body.single-post     #main:has(.ql-page) .breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 2px;
}
body.archive.category #main:has(.ql-page) .breadcrumb .breadcrumb-caption,
body.single-post     #main:has(.ql-page) .breadcrumb .breadcrumb-caption {
  font-size: 14px;
}

/* (3) レスポンシブ */
@media (max-width: 768px) {
  body.archive.category #main:has(.ql-page) .breadcrumb,
  body.single-post     #main:has(.ql-page) .breadcrumb {
    margin-bottom: 14px;
    font-size: 13px;
  }
  body.archive.category #main:has(.ql-page) .breadcrumb .breadcrumb-caption,
  body.single-post     #main:has(.ql-page) .breadcrumb .breadcrumb-caption {
    font-size: 13px;
  }
}

/* =====================================================================
   v2.20.5 — 学習ガイドトップ /guide/ 限定：[guide_index] 連続ブロック余白
   ---------------------------------------------------------------------
   /guide/ (page-id=383) の [guide_index] ショートコード
   (shikakulab_guide_index) は親カテゴリ毎に .guide-index-block を連続出力
   する。しかし .guide-index-block には親テーマ・子テーマともに CSS マージンが
   定義されていないため、G検定ブロックと ITパスポートブロックの間が詰まって
   表示される。
   このページ限定で、隣接する .guide-index-block 間に .ql-section と同じ
   36px の余白を入れて統一感を取る。
   ===================================================================== */
body.page-id-383 .guide-index-block + .guide-index-block {
  margin-top: 36px;
}

/* =====================================================================
   v2.20.6 — 商品ページ限定：Cocoon 側アイキャッチの重複表示を非表示
   ---------------------------------------------------------------------
   WooCommerce 商品ページでは商品画像が WC の
   .woocommerce-product-gallery / .wp-post-image として描画される一方、
   Cocoon 親テーマの tmp/eye-catch.php も has_post_thumbnail() の判定で
   .eye-catch-wrap > figure.eye-catch を記事ヘッダ位置に出力する。
   結果、同一画像（product_image_id == thumbnail_id）が画面上に
   2 回表示されてしまうため、商品ページ限定で Cocoon 側の
   .eye-catch-wrap を非表示にする。
   - 影響範囲: body.single-product のみ
   - WC の .woocommerce-product-gallery / 関連商品サムネは触らない
   - 記事詳細 (body.single-post) / LP (body.page) / カテゴリ
     (body.archive.category) / 検索 (body.search) には適用されない
   ===================================================================== */
body.single-product .eye-catch-wrap {
  display: none !important;
}

/* =====================================================================
   v2.21 (2026-05-15) — デザイン・文言ピンポイント修正
   ---------------------------------------------------------------------
   Fix 1: 資格トップ .ql-page-hero .ql-cta 内 .ql-btn--secondary の hover 文字色を
           #1f6feb（青系）に統一。
           - 親テーマ（Cocoon）の :hover カラーが赤系で上書きされていた問題への対症
           - hover の背景・通常時の色・サイズ・余白・角丸・影は変更しない
           - 対象は .ql-page-hero .ql-cta スコープのみ（LP / 商品 / 記事ボタンへ波及せず）
   Fix 3: 記事本文（.entry-content）内 .shk-btn の文字色を白で維持し、
           .shk-btn を含む段落を中央寄せ
           - Cocoon 親テーマの .entry-content a 色上書きへの対症
           - .shk-btn--product / --nav / --full / --wide の既存背景・サイズ・角丸は維持
           - スコープは .entry-content 内の a.shk-btn のみ
   Fix 4: LP .subcatch__title （h2）の親テーマ既定背景を消去
           - 大見出し自体の背景が出ていた問題への対症
           - .subcatch__card 全体の角丸背景は残す（このルールは h2 のみ対象）
           - 5 LP 全件で一律に背景を出さない（既存インライン style と整合）
   ===================================================================== */

/* Fix 1: ヒーロー右側 .ql-btn--secondary hover 文字色 */
body .entry-content .ql-page-hero .ql-cta .ql-btn--secondary:hover,
.ql-page-hero .ql-cta .ql-btn--secondary:hover {
  color: #1f6feb !important;
}

/* Fix 3: 記事内 CTA ボタン .shk-btn の文字色を #fff で維持
   （Cocoon 親テーマの .entry-content a カラー上書きへの対症） */
.entry-content a.shk-btn,
.entry-content a.shk-btn:link,
.entry-content a.shk-btn:visited,
.entry-content a.shk-btn:hover,
.entry-content a.shk-btn:active,
.entry-content a.shk-btn:focus {
  color: #ffffff !important;
}
/* Fix 3: 記事内 .shk-btn を含む段落を中央寄せ */
.entry-content p:has(> a.shk-btn) {
  text-align: center;
}

/* Fix 4: LP .subcatch__title h2 の親テーマ既定背景を消去
   .subcatch__card 全体の角丸背景には影響しない */
.subcatch__title {
  background: none !important;
  border: none !important;
}