/* =====================================================================
   public.css — 公開ページ（モック pb01 準拠）
   共通トークン/部品は base.css / components.css を併用。
   ===================================================================== */
.pub-body { background: #fff; }

/* ナビ */
.pub-nav { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 0 32px; height: 64px;
  display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.pub-nav .logo { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: #0f172a; text-decoration: none; }
.pub-nav .logo-mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #00a9d3, #0098bf);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.pub-nav .logo-img { height: 32px; width: auto; max-width: 230px; display: block; }
.pub-nav .menu { display: flex; gap: 28px; }
.pub-nav .menu a { font-size: 13.5px; color: #475569; text-decoration: none; font-weight: 500; }
.pub-nav .menu a:hover { color: #0098bf; }
.pub-nav .menu a.active { color: #0098bf; font-weight: 700; }
.pub-nav .right { display: flex; gap: 12px; align-items: center; }
.pub-nav .login-btn { background: #fff; border: 1.5px solid #00a9d3; color: #0098bf; padding: 7px 18px;
  border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pub-nav .login-btn:hover { background: #00a9d3; color: #fff; }
.pub-nav .apply-btn { background: #00a9d3; color: #fff; padding: 8px 18px; border-radius: 8px;
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pub-nav .apply-btn:hover { background: #0098bf; }
.pub-nav .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 38px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; padding: 0; }
.pub-nav .nav-burger span { display: block; width: 18px; height: 2px; background: #475569; border-radius: 2px; margin: 0 auto; transition: transform .2s, opacity .2s; }
.pub-nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pub-nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.pub-nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* 狭い幅：インラインメニュー→ハンバーガー＋ドロワー */
.pub-nav .menu-auth { display: none; }  /* PCは .right のボタン。スマホはドロワー内でのみ表示 */

@media (max-width: 900px) {
  .pub-nav .nav-burger { display: flex; }
  .pub-nav .logo-img { height: auto; max-height: 40px; }  /* 固定heightを外して縦横比を維持（縦伸び防止） */
  .pub-nav .menu { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid #e2e8f0; box-shadow: 0 10px 24px rgba(15,23,42,.10);
    padding: 6px 24px 12px; display: none; }
  .pub-nav.nav-open .menu { display: flex; }
  .pub-nav .menu a { font-size: 15px; padding: 13px 4px; border-bottom: 1px solid #f1f5f9; }
  .pub-nav .menu a:last-child { border-bottom: none; }
  /* スマホ：ログイン/申し込むはドロワー内へ。ヘッダー右はバーガーのみにしてロゴを確保 */
  .pub-nav .menu-auth { display: block; }
  .pub-nav .menu-apply { color: #0098bf; font-weight: 700; }
  .pub-nav .right .login-btn, .pub-nav .right .apply-btn { display: none; }
}

/* パンくず */
.breadcrumb-bar { background: #f8fafc; border-bottom: 1px solid #f1f5f9; padding: 10px 32px; font-size: 11.5px; color: #94a3b8; }
.breadcrumb-bar a { color: #64748b; text-decoration: none; }
.breadcrumb-bar i { margin: 0 8px; font-size: 9px; }
.breadcrumb-bar span { color: #475569; }

/* ヒーロー */
.pub-hero { background: linear-gradient(135deg, #e6f7fc, #f5f3ff); padding: 56px 32px 64px; text-align: center; }
.pub-hero .label { display: inline-block; background: #fff; color: #0098bf; font-size: 11px; font-weight: 700;
  padding: 5px 14px; border-radius: 16px; letter-spacing: .08em; margin-bottom: 16px; border: 1px solid #cdeef7; }
.pub-hero h1 { font-size: 32px; color: #0f172a; margin-bottom: 12px; font-weight: 700; }
.pub-hero .en { font-size: 12px; color: #94a3b8; letter-spacing: .2em; margin-bottom: 16px; }
.pub-hero .lead { font-size: 14px; color: #475569; line-height: 1.8; max-width: 680px; margin: 0 auto; }

/* コンテナ */
.pub-container { max-width: 1180px; margin: 0 auto; padding: 40px 32px; }

/* カテゴリ */
.cat-bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.cat-pill { padding: 9px 22px; border: 1.5px solid #e2e8f0; background: #fff; border-radius: 22px;
  font-size: 12.5px; font-weight: 600; color: #475569; cursor: pointer; transition: all .15s; }
.cat-pill:hover { border-color: #00a9d3; color: #0098bf; }
.cat-pill.active { background: #00a9d3; color: #fff; border-color: #00a9d3; }
.cat-pill .count { opacity: .7; font-size: 10.5px; margin-left: 4px; }

/* 表示切替 */
.view-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; }
.archive-select { display: flex; gap: 8px; align-items: center; }
.archive-select i { color: #94a3b8; }
.archive-select select { padding: 7px 32px 7px 12px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 13px; color: #334155; font-family: inherit; appearance: none; background: #fff; }
.view-toggle { display: inline-flex; background: #f1f5f9; border-radius: 8px; padding: 3px; }
.view-toggle button, .view-toggle a { background: transparent; border: none; padding: 6px 14px; cursor: pointer;
  font-size: 12px; color: #64748b; border-radius: 6px; font-weight: 600; font-family: inherit;
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
@media (max-width: 560px) {
  .view-toggle a .vt-label { display: none; }     /* スマホはアイコンのみ */
  .view-toggle a { padding: 7px 12px; gap: 0; }
}
.view-toggle button.active, .view-toggle a.active { background: #fff; color: #0098bf; box-shadow: 0 1px 2px rgba(0,0,0,.05); }

/* 講座カードグリッド */
.program-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 40px; }
.program-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden;
  transition: all .15s; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.program-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.06); border-color: #cdeef7; }
.pc-visual { position: relative; padding: 18px 18px 16px; min-height: 130px; color: #fff; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; }
.pc-ended { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(15,23,42,.8); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pc-new { position: absolute; top: 12px; left: 12px; z-index: 3; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(239,68,68,.45); }
.list-new { display: inline-block; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.ch-new { display: inline-block; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 1px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.ended-link { font-size: 12.5px; font-weight: 700; color: #64748b; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid #e2e8f0; border-radius: 8px; } .ended-link:hover { color: #0e7490; border-color: #cdeef7; background: #f0fbff; }
.pc-visual::before { content: ''; position: absolute; right: -30px; bottom: -30px; width: 120px; height: 120px;
  border-radius: 50%; background: rgba(255,255,255,.12); }
.pc-visual::after { content: ''; position: absolute; right: 30px; top: -20px; width: 60px; height: 60px;
  border-radius: 50%; background: rgba(255,255,255,.08); }
.pc-visual.theme-cyan   { background: linear-gradient(135deg, #00a9d3, #06b6d4); }
.pc-visual.theme-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.pc-visual.theme-green  { background: linear-gradient(135deg, #10b981, #059669); }
.pc-visual.theme-orange { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.pc-visual.theme-pink   { background: linear-gradient(135deg, #ec4899, #be185d); }
.pc-visual.theme-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }
.pc-visual.has-img::before, .pc-visual.has-img::after { display: none; }
.pc-visual.has-img { background-color: #1e293b; }
.pc-no { font-size: 10px; opacity: .85; letter-spacing: .1em; margin-bottom: 6px; position: relative; z-index: 1; }
.pc-title { font-size: 15px; font-weight: 700; line-height: 1.4; position: relative; z-index: 1; max-width: 88%; }
.pc-instr { display: flex; align-items: center; gap: 8px; margin-top: 14px; position: relative; z-index: 1; }
.pc-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.25);
  border: 2px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.pc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pc-instr .name { font-size: 12px; font-weight: 600; }
.pc-instr .role { font-size: 10px; opacity: .85; }
.pc-meta { padding: 14px 18px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.pc-desc { font-size: 11.5px; color: #475569; line-height: 1.55; }
.pc-row { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: #64748b; }
.pc-row i { color: #94a3b8; margin-right: 4px; font-size: 10px; }
.pc-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.pc-foot { padding: 12px 18px; border-top: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
.pc-foot .availability { font-size: 11px; color: #059669; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.pc-foot .availability i { font-size: 6px; }
.pc-foot .availability.warn { color: #ea580c; }
.pc-foot .arrow { font-size: 11px; color: #0098bf; font-weight: 600; }
/* 企業研修（カスタマイズ）の出し分け表示 */
.pc-row .corp-quote { color: #4338ca; font-weight: 700; }
.corp-pill { font-size: 11px; font-weight: 700; color: #4338ca; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 999px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 5px; }
.corp-pill i { font-size: 9px; }
.corp-pill.sm { font-size: 10.5px; padding: 2px 8px; }

/* スリムなページ見出し（スライダーを上に置くレイアウト用） */
.program-heading { text-align: center; margin: 8px 0 18px; }
.program-heading .ph-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #0098bf; }
.program-heading h1 { font-size: 22px; font-weight: 800; color: #0f172a; margin: 4px 0 8px; }
.program-heading p { font-size: 13px; color: #64748b; line-height: 1.8; margin: 0 auto; max-width: 640px; }
.program-heading p strong { color: #334155; font-weight: 700; }

/* 企業研修ショーケース（中央配置カルーセル・全幅バンド） */
.corp-show { width: 100%; background: linear-gradient(180deg, #faf9ff, #f1f2ff); border-block: 1px solid #e9e7fb; padding: 32px 0 28px; margin: 0 0 6px; }
.corp-show-head { text-align: center; margin-bottom: 18px; }
.corp-show-label { font-size: 12px; font-weight: 700; color: #6d28d9; display: inline-flex; align-items: center; gap: 6px; }
.corp-show-title { font-size: 22px; font-weight: 800; color: #1e1b4b; margin: 6px 0 0; }
.corp-show-stage { position: relative; }
.corp-show-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px max(16px, calc(50% - 290px)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.corp-show-track::-webkit-scrollbar { display: none; }
.cs-slide { flex: 0 0 min(580px, 82vw); scroll-snap-align: center; text-decoration: none; transform: scale(.86); opacity: .5; transition: transform .35s ease, opacity .35s ease; cursor: pointer; }
.cs-slide.is-active { transform: scale(1); opacity: 1; cursor: pointer; }
.cs-visual { position: relative; height: 300px; border-radius: 18px; overflow: hidden; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; box-shadow: 0 16px 44px rgba(15,23,42,.20); }
.cs-visual.theme-orange { background-image: linear-gradient(135deg, #fb923c, #c2410c); } .cs-visual.theme-purple { background-image: linear-gradient(135deg, #a78bfa, #6d28d9); } .cs-visual.theme-cyan { background-image: linear-gradient(135deg, #22d3ee, #0e7490); } .cs-visual.theme-green { background-image: linear-gradient(135deg, #34d399, #047857); } .cs-visual.theme-indigo { background-image: linear-gradient(135deg, #818cf8, #4338ca); } .cs-visual.theme-pink { background-image: linear-gradient(135deg, #f472b6, #be185d); }
.cs-badge { position: absolute; top: 18px; left: 18px; font-size: 11px; font-weight: 700; color: #4338ca; background: rgba(255,255,255,.94); padding: 4px 11px; border-radius: 999px; }
.cs-date { position: absolute; top: 16px; right: 16px; font-size: 14px; font-weight: 800; color: #fff; background: rgba(15,23,42,.48); padding: 6px 14px; border-radius: 999px; letter-spacing: .04em; backdrop-filter: blur(2px); }
.cs-date i { font-size: 11px; margin-right: 4px; opacity: .85; }
.cs-date.done { background: rgba(5,150,105,.85); }
.cs-foot { display: flex; align-items: center; gap: 14px; }
.cs-avatar { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; background-size: cover; background-position: center; border: 3px solid rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.cs-avatar.is-initial { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); color: #4338ca; font-size: 24px; font-weight: 800; }
.cs-foot-text { min-width: 0; }
.cs-title { color: #fff; font-size: 25px; font-weight: 900; line-height: 1.38; text-shadow: 0 2px 14px rgba(0,0,0,.45); letter-spacing: .01em; }
.cs-instr { color: rgba(255,255,255,.92); font-size: 13px; font-weight: 700; margin-top: 6px; text-shadow: 0 1px 8px rgba(0,0,0,.5); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cs-instr-org { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.78); }
.cs-instr-org::before { content: "・"; }
.cs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 46px; height: 46px; border-radius: 50%; border: none; background: #fff; color: #4338ca; cursor: pointer; font-size: 15px; box-shadow: 0 6px 18px rgba(15,23,42,.16); display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.cs-arrow:hover { background: #4338ca; color: #fff; }
.cs-prev { left: 10px; } .cs-next { right: 10px; }
.corp-show-caption { text-align: center; max-width: 660px; margin: 20px auto 0; min-height: 96px; }
.cs-cap-meta { font-size: 12px; font-weight: 700; color: #6d28d9; letter-spacing: .03em; margin-bottom: 8px; }
.cs-cap-desc { font-size: 14px; color: #334155; line-height: 1.8; margin: 0 0 10px; }
.cs-cap-price { font-size: 17px; font-weight: 800; color: #1e1b4b; margin: 0 0 14px; display: inline-flex; align-items: center; gap: 7px; }
.cs-cap-price i { font-size: 13px; color: #6d28d9; }
.cs-cap-cta { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: #fff; background: #4338ca; padding: 10px 22px; border-radius: 999px; text-decoration: none; transition: background .15s; }
.cs-cap-cta:hover { background: #312e81; }
.corp-divider { display: flex; align-items: center; text-align: center; color: #94a3b8; font-size: 12.5px; font-weight: 700; margin: 26px 0 20px; gap: 14px; }
.corp-divider::before, .corp-divider::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }
@media (max-width: 640px) {
  .corp-show-title { font-size: 18px; }
  .cs-visual { height: 220px; padding: 18px; } .cs-title { font-size: 20px; }
  .cs-arrow { width: 38px; height: 38px; } .cs-prev { left: 4px; } .cs-next { right: 4px; }
}

/* タグ */
.tag { display: inline-block; border-radius: 4px; font-size: 9.5px; padding: 2px 6px; font-weight: 600; }
.tag-blue { background: #cdeef7; color: #0098bf; }

/* CTA */
.cta-section { background: #f8fafc; border-radius: 14px; padding: 36px; text-align: center; margin-bottom: 32px; }
.cta-section h3 { font-size: 20px; color: #0f172a; margin-bottom: 8px; }
.cta-section p { font-size: 13px; color: #64748b; line-height: 1.7; margin-bottom: 20px; }
.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-buttons .btn { padding: 12px 28px; font-size: 14px; }

/* フッター */
.pub-footer { background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 32px; text-align: center; font-size: 11.5px; color: #64748b; }
.pub-footer .links { margin-bottom: 12px; }
.pub-footer .links a { color: #475569; text-decoration: none; margin: 0 12px; font-size: 12px; }
.pub-footer .links a:hover { color: #0098bf; }
.pub-footer .copy { color: #94a3b8; font-size: 10.5px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.pub-footer .copy span + span::before { content: "/"; margin: 0 7px; color: #cbd5e1; }
@media (max-width: 640px) {
  .pub-footer .copy { flex-direction: column; gap: 4px; line-height: 1.7; }
  .pub-footer .copy span + span::before { content: none; }  /* 縦並びでは区切りを消す */
  .pub-footer .copy .c-addr { order: 1; }
  .pub-footer .copy .c-tel  { order: 2; }
  .pub-footer .copy .c-name { order: 3; margin-top: 4px; }   /* © 会社名を一番下に */
}

/* レスポンシブ（モバイルファースト調整） */
@media (max-width: 768px) {
  .pub-nav { padding: 0 16px; }
  .pub-nav .menu { padding-left: 16px; padding-right: 16px; }   /* ドロワー内余白を画面に合わせる */
  .pub-container { padding: 28px 16px; }
  .pub-hero { padding: 40px 20px 48px; }
  .pub-hero h1 { font-size: 26px; }
  .breadcrumb-bar { padding: 10px 16px; }
}
@media (max-width: 480px) {
  .pub-nav .logo { font-size: 14px; }
  .pub-nav .logo-img { max-width: 200px; }  /* ログイン/申込をドロワーへ移し余白ができた分ロゴを広く */
  .pub-nav .right { gap: 8px; }
  .pub-nav .login-btn, .pub-nav .apply-btn { padding: 7px 12px; font-size: 12.5px; }
  .view-bar { flex-direction: column; gap: 12px; align-items: stretch; }
}

/* スマホでは中央寄せブロックを左寄せに（共通ルール） */
@media (max-width: 640px) {
  .pub-hero, .cta-section { text-align: left; }
}

/* フリーワード検索 */
.search-box { display: flex; align-items: center; gap: 8px; max-width: 560px; margin: 0 auto 24px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 24px; padding: 6px 8px 6px 16px; }
.search-box i { color: #94a3b8; }
.search-box input { flex: 1; min-width: 0; border: none; outline: none; font-size: 14px; background: transparent; }
.search-box i { flex-shrink: 0; }
.search-box .btn { border-radius: 18px; flex-shrink: 0; white-space: nowrap; }
@media (max-width: 560px) {
  .search-box { padding: 5px 6px 5px 14px; gap: 6px; margin-bottom: 18px; }
  .search-box input { font-size: 15px; }        /* タップ時のズーム防止＆見やすく */
  .search-box .btn { padding: 9px 16px; }
}

/* 階層ピル（a要素化） */
.cat-pill { text-decoration: none; }

/* 開催形式フィルタ */
.format-bar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.fmt-pill { padding: 6px 16px; border: 1px solid #e2e8f0; background: #fff; border-radius: 18px;
  font-size: 12px; font-weight: 600; color: #475569; text-decoration: none; }
.fmt-pill:hover { border-color: #00a9d3; color: #0098bf; }
.fmt-pill.active { background: #0098bf; color: #fff; border-color: #0098bf; }

/* 適用中フィルタ */
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filter-chips .chip-label { font-size: 12px; color: #94a3b8; }
.chip { background: #eff6ff; color: #0369a1; border: 1px solid #bfdbfe; border-radius: 14px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; }
.chip a { color: #0369a1; margin-left: 4px; text-decoration: none; font-weight: 700; }
.chip-clear { font-size: 12px; color: #94a3b8; text-decoration: none; }
.chip-clear:hover { color: #0098bf; }

/* 件数・並び替え */
.result-count { font-size: 13px; color: #475569; }
.view-bar-right { display: flex; align-items: center; gap: 16px; }
.sort-links { display: flex; gap: 12px; font-size: 12.5px; }
.sort-links a { color: #94a3b8; text-decoration: none; font-weight: 600; }
.sort-links a.active { color: #0098bf; }

/* ページネーション */
.pagination { display: flex; justify-content: center; gap: 6px; margin-bottom: 48px; }
.pagination .btn { padding: 6px 14px; min-width: 38px; }
.pagination .btn.disabled { opacity: .4; pointer-events: none; }

/* リスト表示 */
.program-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.list-row { display: grid; grid-template-columns: 5px 1.5fr 0.9fr 1.4fr auto 18px; gap: 16px; align-items: center;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 18px; text-decoration: none; color: inherit; transition: all .15s; }
.list-row:hover { border-color: #cdeef7; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.list-bar { align-self: stretch; border-radius: 4px; min-height: 40px; }
.list-bar.theme-cyan   { background: #06b6d4; }
.list-bar.theme-purple { background: #8b5cf6; }
.list-bar.theme-green  { background: #10b981; }
.list-bar.theme-orange { background: #f59e0b; }
.list-bar.theme-pink   { background: #ec4899; }
.list-bar.theme-indigo { background: #6366f1; }
.list-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.list-tags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.list-instr { font-size: 12px; color: #475569; }
.list-instr i, .list-meta i { color: #94a3b8; margin-right: 3px; }
.list-meta { font-size: 12px; color: #64748b; line-height: 1.7; }
.list-avail { font-size: 12px; color: #059669; font-weight: 600; white-space: nowrap; }
.list-arrow { color: #0098bf; font-weight: 700; font-size: 14px; }
@media (max-width: 768px) {
  .list-row { grid-template-columns: 5px 1fr; gap: 4px 12px; }
  .list-bar { grid-row: 1 / -1; }
  .list-row .list-instr, .list-row .list-meta, .list-row .list-avail { grid-column: 2; }
  .list-arrow { display: none; }
}

/* =========================================================
   お申し込みフォーム（PB-02）
   ========================================================= */
.apply-container { max-width: 880px; }

/* 法務・固定ページ */
.legal-page { max-width: 820px; }
.legal-page > p { font-size: 13.5px; color: #475569; line-height: 1.9; margin-bottom: 12px; }
.legal-page h2 { font-size: 16px; color: #0f172a; margin: 28px 0 10px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.legal-page ul { padding-left: 20px; margin: 0 0 12px; }
.legal-page li { font-size: 13.5px; color: #475569; line-height: 1.9; }
.legal-updated { font-size: 12px; color: #94a3b8; margin-bottom: 24px; }
.legal-page table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 16px; }
.legal-page th, .legal-page td { border: 1px solid #e2e8f0; padding: 10px 12px; text-align: left; }
.legal-page th { background: #f8fafc; color: #475569; font-weight: 700; }
.legal-page table.toku th { width: 34%; vertical-align: top; white-space: nowrap; }
.legal-page a { color: #0098bf; text-decoration: underline; }
.login-hint { background: linear-gradient(90deg, #e6f7fc, #f5f3ff); border: 1px solid #cdeef7; border-radius: 12px;
  padding: 16px 20px; margin-bottom: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.login-hint .lh-info { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #0f172a; }
.login-hint .lh-info i { font-size: 20px; color: #0098bf; }
.login-hint .lh-info strong { font-weight: 700; }
.login-hint .lh-info p { font-size: 11.5px; color: #64748b; margin: 2px 0 0; }
.login-hint a { background: #00a9d3; color: #fff; padding: 9px 18px; border-radius: 8px; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.login-hint a:hover { background: #0098bf; }

.stepper { display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
.step-item { display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.step-num { width: 32px; height: 32px; border-radius: 50%; background: #e2e8f0; color: #94a3b8; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.step-item.active .step-num { background: #00a9d3; color: #fff; }
.step-item.done .step-num { background: #10b981; color: #fff; }
.step-label { font-size: 12.5px; color: #94a3b8; font-weight: 500; }
.step-item.active .step-label { color: #0098bf; font-weight: 700; }
.step-line { width: 60px; height: 2px; background: #e2e8f0; }

.form-section { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px 28px; margin-bottom: 20px; }
.form-section-title { font-size: 14px; font-weight: 700; color: #0f172a; padding-bottom: 12px; margin: 0 0 18px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 8px; }
.form-section-title i { color: #00a9d3; }
.form-section-title .step-no { background: #e6f7fc; color: #0098bf; font-size: 11px; padding: 3px 8px; border-radius: 4px; margin-right: 4px; font-weight: 700; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.required { background: #fee2e2; color: #dc2626; font-size: 9.5px; padding: 1px 6px; border-radius: 3px; margin-left: 6px; font-weight: 700; }
.optional { color: #94a3b8; font-size: 10.5px; margin-left: 6px; font-weight: 500; }

.course-select { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; margin-bottom: 12px; display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center; cursor: pointer; }
.course-select:hover { border-color: #cdeef7; background: #e6f7fc; }
.course-select.selected { border-color: #00a9d3; background: #e6f7fc; }
.course-select input[type=checkbox] { width: 20px; height: 20px; cursor: pointer; }
.course-info { display: block; min-width: 0; }
.course-info .name { display: block; font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.course-info .meta { display: block; font-size: 11.5px; color: #64748b; }
.course-info .meta i { color: #94a3b8; margin-right: 4px; font-size: 10px; }
.course-info .meta .sep { color: #cbd5e1; margin: 0 6px; }
.course-num { background: #cdeef7; color: #0098bf; font-size: 11px; padding: 4px 10px; border-radius: 6px; font-weight: 700; white-space: nowrap; }
.course-avail { font-size: 12px; color: #059669; font-weight: 700; white-space: nowrap; text-align: right; }

/* スマホ：STEP見出しの「講座一覧を見る」を独立行に落として見出しに余白を確保。
   希望講座カードは残席を名称の下段に回し、メタの行間を広げて読みやすく。 */
@media (max-width: 640px) {
  .form-section-title { flex-wrap: wrap; row-gap: 6px; }
  .form-section-title > a { margin-left: 0 !important; order: 5; width: 100%; text-align: right; }
  .course-select { grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; }
  .course-info .meta { line-height: 1.8; }
  .course-avail { grid-column: 2; text-align: left; margin-top: 4px; font-size: 12.5px; }
}

.attendee-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.ac-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ac-head .ac-no { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #0098bf; }
.ac-head .ac-no .badge { background: #00a9d3; color: #fff; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.ac-head .ac-remove { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 12px; }
.ac-head .ac-remove:hover { color: #dc2626; }
.add-att-btn { width: 100%; padding: 12px; background: #fff; border: 2px dashed #cbd5e1; border-radius: 10px; color: #94a3b8; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.add-att-btn:hover { border-color: #00a9d3; color: #0098bf; }

.notice-box { background: #fffbeb; border-left: 4px solid #f59e0b; border-radius: 8px; padding: 14px 18px; margin-bottom: 20px; font-size: 12px; color: #92400e; line-height: 1.7; }
.notice-box i { color: #f59e0b; margin-right: 4px; }
.consent-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px 20px; margin-bottom: 24px; }
.consent-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #334155; line-height: 1.6; margin-bottom: 10px; }
.consent-row:last-child { margin-bottom: 0; }
.consent-row input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; cursor: pointer; }
.consent-row a { color: #0098bf; text-decoration: underline; }
.consent-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed #e2e8f0; font-size: 12px; color: #64748b; line-height: 1.7; }
.submit-area { text-align: center; padding: 32px 0; }
.support-info { background: #f8fafc; border-radius: 10px; padding: 16px 20px; text-align: center; font-size: 12px; color: #64748b; line-height: 1.7; margin-bottom: 24px; }
.support-info strong { color: #0f172a; font-size: 14px; }
.support-info i { color: #0098bf; margin-right: 4px; }

@media (max-width: 640px) {
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .login-hint { flex-direction: column; align-items: stretch; text-align: left; }
  .login-hint a { text-align: center; }
  .step-line { width: 28px; }
  .step-label { display: none; }
}

/* =========================================================
   講座詳細（PB-01b）
   ========================================================= */
.course-hero { color: #fff; padding: 48px 0 56px; position: relative; overflow: hidden; }
.course-hero::before { content: ''; position: absolute; right: -80px; bottom: -80px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.08); }
.course-hero-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: center; position: relative; z-index: 1; }
.ch-no { font-size: 11px; letter-spacing: .1em; opacity: .9; background: rgba(255,255,255,.18); display: inline-block; padding: 4px 10px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; }
.ch-title { font-size: 32px; font-weight: 700; line-height: 1.35; margin-bottom: 12px; color: #fff; }
.ch-sub { font-size: 15px; opacity: .92; line-height: 1.7; margin-bottom: 22px; max-width: 600px; }
.ch-tags { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
.ch-tags .tag { background: rgba(255,255,255,.2); color: #fff; padding: 4px 12px; font-size: 11.5px; border-radius: 14px; font-weight: 600; }
.ch-instr { display: flex; align-items: center; gap: 12px; }
.ch-instr .av { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.25); border: 2px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.ch-instr .name { font-size: 14px; font-weight: 700; }
.ch-instr .org { font-size: 11px; opacity: .85; }
.ch-side { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 22px; }
.ch-side .label { font-size: 10.5px; opacity: .85; letter-spacing: .06em; margin-bottom: 4px; font-weight: 600; }
.ch-side .value { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.ch-side .value i { opacity: .8; margin-right: 6px; font-size: 13px; }
.ch-side .apply-cta { display: block; background: #fff; color: #0098bf; padding: 12px; border-radius: 10px; text-align: center; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.08); margin-top: 4px; }
.ch-side .apply-cta:hover { background: #f0fdff; }
.ch-side .fav-btn { position: static; top: auto; right: auto; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 11px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.55); color: #fff; }
.ch-side .fav-btn:hover { background: rgba(255,255,255,.28); }
.ch-side .fav-btn.is-fav { background: #ef4444; border-color: #ef4444; color: #fff; }
.ch-side .fav-btn .fav-btn-label::after { content: '気になるリストに追加'; }
.ch-side .fav-btn.is-fav .fav-btn-label::after { content: '気になるリストに登録済み'; }

.detail-container { max-width: 1180px; margin: 0 auto; padding: 48px 32px; display: grid; grid-template-columns: 1fr 320px; gap: 40px; }
.detail-main, .detail-side { min-width: 0; }
.dx-section { margin-bottom: 40px; }
.dx-section-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #0f172a; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9; margin-bottom: 18px; }
.dx-section-title .ico { width: 32px; height: 32px; border-radius: 8px; background: #e6f7fc; color: #0098bf; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.dx-text { font-size: 14px; color: #334155; line-height: 1.85; }
.dx-text p { margin-bottom: 12px; }
.dx-text img, .section-card img { max-width: 100%; height: auto; border-radius: 6px; }

.recommend-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.recommend-item { background: #f8fafc; border-left: 3px solid #00a9d3; border-radius: 8px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.recommend-item .num { background: #00a9d3; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.recommend-item p { font-size: 13px; color: #334155; line-height: 1.6; }

.schedule-list { display: flex; flex-direction: column; gap: 10px; }
.schedule-item { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 16px 18px; display: grid; grid-template-columns: 70px 1fr auto; gap: 18px; align-items: center; transition: all .15s; }
.schedule-item:hover { border-color: #00a9d3; }
.sched-date { text-align: center; background: #e6f7fc; border-radius: 8px; padding: 10px 0; }
.sched-date .d { font-size: 22px; font-weight: 700; color: #0098bf; line-height: 1; }
.sched-date .m { font-size: 10.5px; color: #64748b; margin-top: 3px; }
.sched-info .row1 { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.sched-info .row2 { font-size: 11.5px; color: #64748b; }
.sched-info .row2 i { color: #94a3b8; margin-right: 4px; font-size: 10px; }
.sched-info .row2 .sep { color: #cbd5e1; margin: 0 6px; }
.sched-avail { font-size: 12px; font-weight: 600; text-align: right; margin-bottom: 6px; }
.sched-avail.ok { color: #059669; }
.sched-avail.full { color: #b91c1c; }
.sched-cta { background: #00a9d3; color: #fff; padding: 7px 16px; border-radius: 7px; font-size: 12px; font-weight: 600; text-decoration: none; display: inline-block; }
.sched-cta:hover { background: #0098bf; }

.instr-card { background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-radius: 14px; padding: 24px; display: grid; grid-template-columns: 100px 1fr; gap: 22px; align-items: flex-start; }
.instr-card .av { width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(135deg, #00a9d3, #0098bf); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; }
.instr-card .name { font-size: 17px; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.instr-card .name .kana { font-size: 12px; font-weight: 600; color: #b4bdc9; margin-left: 7px; letter-spacing: .02em; }
.instr-card .headline { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 15px; line-height: 1.3; }
.instr-card .org { font-size: 12px; color: #0098bf; margin-bottom: 12px; font-weight: 600; }
.instr-card .bio { font-size: 12.5px; color: #475569; line-height: 1.75; }
.av-photo { background-size: cover !important; background-position: center; background-repeat: no-repeat; color: transparent !important; }
.instr-card .av.av-photo { box-shadow: 0 4px 14px rgba(15,23,42,.12); }

.side-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; }
.side-card-title { font-size: 13px; font-weight: 700; color: #0f172a; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 6px; }
.side-card-title i { color: #0098bf; font-size: 12px; }
.fee-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; }
.fee-row .lbl { color: #64748b; }
.fee-row .val { color: #0f172a; font-weight: 600; }
.fee-row.total { font-weight: 700; }
.fee-row.total .val { color: #0098bf; font-size: 16px; }
.fee-note { font-size: 10.5px; color: #94a3b8; margin-top: 8px; line-height: 1.55; }
.related-card { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed #f1f5f9; text-decoration: none; color: inherit; }
.related-card:last-child { border-bottom: none; }
.related-thumb { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; }
.related-thumb.t-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.related-thumb.t-green { background: linear-gradient(135deg, #10b981, #059669); }
.related-thumb.t-orange { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.related-thumb.t-pink { background: linear-gradient(135deg, #ec4899, #be185d); }
.related-thumb.t-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }
.related-info .name { font-size: 12.5px; font-weight: 700; color: #0f172a; line-height: 1.4; margin-bottom: 3px; }
.related-info .meta { font-size: 10.5px; color: #94a3b8; }

.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 18px; }
.faq-q { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.faq-q .q-mark { width: 24px; height: 24px; border-radius: 50%; background: #00a9d3; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.faq-a { font-size: 12.5px; color: #475569; line-height: 1.7; padding-left: 36px; }

.bottom-cta-wrap { background: linear-gradient(135deg, #e6f7fc, #f5f3ff); padding: 60px 32px; }
.bottom-cta { max-width: 1116px; margin: 0 auto; background: #fff; border-radius: 18px; padding: 48px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; box-shadow: 0 8px 32px rgba(0,169,211,.10); }
.bottom-cta .bc-label { font-size: 11.5px; font-weight: 700; color: #0098bf; letter-spacing: .08em; margin-bottom: 10px; }
.bottom-cta h2 { font-size: 24px; color: #0f172a; margin-bottom: 12px; font-weight: 700; line-height: 1.4; }
.bottom-cta p { font-size: 13.5px; color: #475569; line-height: 1.7; max-width: 520px; }
.bottom-cta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 220px; }
.bottom-cta-actions .btn { padding: 14px 24px; justify-content: center; font-size: 14px; }

.related-section { max-width: 1180px; margin: 0 auto; padding: 48px 32px 56px; }
.related-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.related-head h2 { font-size: 18px; color: #0f172a; font-weight: 700; display: flex; align-items: center; gap: 10px; margin: 0; }
.related-head h2 i { color: #0098bf; }
.related-head .all-link { font-size: 12.5px; color: #0098bf; font-weight: 600; text-decoration: none; }
.related-slider { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rel-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; transition: all .15s; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.rel-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.06); border-color: #cdeef7; }
.rel-visual { height: 110px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; color: #fff; }
.rel-visual::before { content: ''; position: absolute; right: -30px; bottom: -30px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,.12); }
.rel-visual .name { font-size: 14px; font-weight: 700; line-height: 1.4; position: relative; z-index: 1; }
.rel-meta { padding: 14px 16px; }
.rel-meta .row1 { font-size: 12px; color: #475569; margin-bottom: 8px; }
.rel-meta .row1 i { color: #94a3b8; margin-right: 4px; font-size: 10px; }
.rel-meta .row2 { display: flex; justify-content: space-between; align-items: center; }
.rel-meta .tags { display: flex; gap: 4px; }

.back-to-list { text-align: center; padding: 0 32px 48px; }
.back-to-list a { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #e2e8f0; padding: 12px 28px; border-radius: 30px; font-size: 13.5px; font-weight: 600; color: #475569; text-decoration: none; transition: all .15s; }
.back-to-list a:hover { border-color: #00a9d3; color: #0098bf; background: #e6f7fc; }

/* 詳細ページ レスポンシブ */
@media (max-width: 900px) {
  .course-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .detail-container { grid-template-columns: 1fr; gap: 28px; padding: 32px 16px; }
  .recommend-list { grid-template-columns: 1fr; }
  .bottom-cta { grid-template-columns: 1fr; padding: 32px; gap: 24px; }
  .related-slider { grid-template-columns: 1fr; }
  .course-hero { padding: 36px 0 44px; }
  .course-hero-inner { padding: 0 16px; }
  .ch-title { font-size: 24px; }
}
@media (max-width: 640px) {
  .schedule-item { grid-template-columns: 56px 1fr; gap: 12px; }
  .schedule-item > div:last-child { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
  .instr-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  /* 関連講座：縦長の1カラムをやめ、横スワイプのスライダーに */
  .related-section { padding: 32px 0 40px; }
  .related-head { padding: 0 16px; }
  .related-slider { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 16px 10px; scrollbar-width: none; }
  .related-slider::-webkit-scrollbar { display: none; }
  .related-slider .rel-card { flex: 0 0 78%; scroll-snap-align: start; }
}

/* =====================================================================
   気になる（♡）リスト機能（一覧・詳細共通）
   ===================================================================== */
.fav-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #94a3b8;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; box-shadow: 0 2px 6px rgba(15,23,42,.15);
  transition: transform .12s, color .12s, background .12s;
}
.fav-btn:hover { color: #ef4444; transform: scale(1.1); }
.fav-btn.is-fav { background: #ef4444; color: #fff; }
.fav-btn.is-fav i { font-weight: 900; }
.program-card { position: relative; }
/* fav-btn は valid HTML のため <a> の外（ラッパー内）に置く。ラッパーを配置基準にする */
.program-card-wrap { position: relative; display: flex; }
.program-card-wrap > .program-card { flex: 1; width: 100%; }
.list-row-wrap { position: relative; }
.list-row { position: relative; padding-right: 52px; }
.fav-btn--list { top: 50%; right: 12px; transform: translateY(-50%); width: 30px; height: 30px; font-size: 13px; }
.fav-btn--list:hover { transform: translateY(-50%) scale(1.1); }

/* 詳細ページ用：テキスト併記の気になるボタン */
.fav-btn--detail {
  position: static; width: auto; height: auto; border-radius: 8px;
  gap: 8px; padding: 12px 22px; font-size: 14px; font-weight: 700;
  border: 1px solid #fecaca; background: #fff; color: #ef4444; box-shadow: none;
}
.fav-btn--detail:hover { background: #fef2f2; transform: none; }
.fav-btn--detail.is-fav { background: #ef4444; color: #fff; border-color: #ef4444; }
.fav-btn--detail .fav-btn-label::after { content: '気になる'; }
.fav-btn--detail.is-fav .fav-btn-label::after { content: '気になる 登録済み'; }

/* 固定ボタン（FAB） */
.fav-fab {
  position: fixed; top: 76px; right: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 9px 16px 9px 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(15,23,42,.12);
  font-size: 13px; font-weight: 700; color: #0f172a;
}
.fav-fab i { color: #ef4444; font-size: 15px; }
.fav-fab:hover { border-color: #ef4444; }
.fav-count {
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 640px) {
  .fav-fab-label { display: none; }
  .fav-fab { padding: 11px; top: 66px; right: 12px; }
}

/* モーダル */
.fav-modal { position: fixed; inset: 0; z-index: 200; }
.fav-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.fav-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: 380px; max-width: 92vw;
  background: #fff; box-shadow: -8px 0 30px rgba(15,23,42,.2);
  display: flex; flex-direction: column; animation: favSlide .2s ease;
}
@keyframes favSlide { from { transform: translateX(20px); opacity: .6; } to { transform: none; opacity: 1; } }
.fav-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #e2e8f0; }
.fav-panel-head h3 { margin: 0; font-size: 16px; }
.fav-x { background: none; border: 0; font-size: 18px; color: #94a3b8; cursor: pointer; }
.fav-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.fav-item { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #f1f5f9; }
.fav-item .fi-name { flex: 1; font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.5; }
.fav-item .fi-name a { color: #0f172a; }
.fav-item .fi-name a:hover { color: #0098bf; }
.fav-item .fi-remove { background: none; border: 0; color: #cbd5e1; cursor: pointer; font-size: 15px; }
.fav-item .fi-remove:hover { color: #ef4444; }
.fav-item.is-ended .fi-name a { color: #94a3b8; }
.fi-ended { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 700; color: #64748b; background: #f1f5f9; padding: 1px 8px; border-radius: 999px; vertical-align: middle; }
.fav-ended-note { font-size: 11px; color: #94a3b8; margin: 0 0 10px; line-height: 1.6; } .fav-ended-note i { color: #0e7490; margin-right: 4px; }
#favApply.is-disabled { background: #e2e8f0; color: #94a3b8; pointer-events: none; box-shadow: none; }
.fav-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #94a3b8; padding: 30px; }
.fav-empty i { font-size: 34px; margin-bottom: 12px; color: #cbd5e1; }
.fav-empty p { font-size: 13px; line-height: 1.8; }
.fav-panel-foot { padding: 16px 20px; border-top: 1px solid #e2e8f0; text-align: center; }