@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;
}
.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; }
.single-product .woocommerce-product-gallery__trigger { display: none !important; }
.single-product .woocommerce-product-gallery__image a { pointer-events: none !important; cursor: default !important; }
.single-product .woocommerce-product-gallery__image img { pointer-events: auto !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;
}