/* =============================================
   PCC THEME - Seminar Page Styles
   セミナーページ固有スタイル
   ============================================= */

/* VISUAL HERO */
.pcc-visual-hero { background: #f5f5f5; height: 280px; overflow: hidden; position: relative; width: 100%; }
.pcc-visual-hero-bg { position: absolute; inset: 0; }
.pcc-visual-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.24; }
.pcc-visual-hero-float { position: absolute; right: 40px; top: 30px; width: 50px; }
.pcc-visual-hero-float img { width: 100%; }
.pcc-visual-hero-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; }
.pcc-visual-hero-en { font-size: 18px; font-weight: 700; color: #33333b; letter-spacing: 0.26px; margin-top: 8px; }
.pcc-visual-hero-ja { font-size: 32px; font-weight: 700; color: #038e8e; letter-spacing: -0.23px; margin-bottom: 8px; }

/* MESSAGE */
.pcc-message-section { background: #038e8e; display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; padding: 56px 24px; width: 100%; text-align: center; color: #fff; }
.pcc-message-heading { font-size: 36px; font-weight: 700; line-height: 1.3; }
.pcc-message-body { font-size: 17px; line-height: 1.8; }

/* SEMINAR LIST */
.pcc-seminar-list-section { background: #fff; padding: 72px 120px; width: 100%; }
.pcc-seminar-list-inner { display: flex; flex-direction: column; gap: 48px; align-items: center; width: 100%; }

/* TAB NAV */
.pcc-tab-nav { display: flex; align-items: stretch; width: 100%; border: 1px solid #e6e0eb; border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.pcc-tab-item-active { background: #0055cc; display: flex; align-items: center; justify-content: center; padding: 12px 16px; cursor: pointer; }
.pcc-tab-item-active span { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; }
.pcc-tab-item { background: #fff; border-left: 1px solid #e6e0eb; display: flex; align-items: center; justify-content: center; padding: 12px 16px; cursor: pointer; }
.pcc-tab-item span { font-size: 14px; font-weight: 700; color: #33333b; white-space: nowrap; }
.pcc-tab-item:hover { background: #f5f5f5; }

/* SEMINAR CARDS */
.pcc-seminar-cards { display: flex; gap: 16px; align-items: flex-start; width: 100%; overflow-x: auto; padding-bottom: 8px; }
.pcc-seminar-cards::-webkit-scrollbar { height: 4px; }
.pcc-seminar-cards::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 2px; }
.pcc-seminar-cards::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
.pcc-seminar-card { width: 300px; flex-shrink: 0; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.pcc-seminar-card-img-area { height: 180px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pcc-seminar-card-img-area > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcc-seminar-card-img-title { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; }
.pcc-seminar-card-caption { border-bottom: 3px solid #038e8e; padding-bottom: 6px; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.pcc-seminar-card-title-img { font-size: 18px; font-weight: 700; color: #fff; text-align: center; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.pcc-seminar-card-body { background: #fff8e5; padding: 16px 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.pcc-seminar-card-chip { background: #fff; border-radius: 9999px; display: inline-flex; height: 20px; align-items: center; padding: 2px 10px; }
.pcc-seminar-card-chip span { font-size: 11px; font-weight: 700; color: #6c757d; white-space: nowrap; }
.pcc-seminar-card-name { font-size: 14px; font-weight: 700; color: #0055cc; line-height: 1.3; margin-top: 4px; }
.pcc-seminar-card-date { font-size: 11px; font-weight: 700; color: #33333b; line-height: 1.3; }

/* HOW SECTION */
.pcc-how-section { background: #fff8e5; border-radius: 24px; padding: 48px; width: 100%; }
.pcc-how-inner { display: flex; flex-direction: column; gap: 32px; }
.pcc-how-title { font-size: 24px; font-weight: 700; color: #038e8e; text-align: center; }
.pcc-how-body { font-size: 15px; color: #33333b; line-height: 1.7; text-align: center; }
.pcc-how-cards { display: flex; gap: 24px; align-items: stretch; justify-content: center; flex-wrap: wrap; }
.pcc-how-card { background: #fff; border-radius: 16px; padding: 24px; flex: 1; min-width: 200px; max-width: 260px; display: flex; flex-direction: column; gap: 12px; }
.pcc-how-card-icon { width: 48px; height: 48px; background: #038e8e; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.pcc-how-card-icon img { width: 28px; height: 28px; object-fit: contain; filter: brightness(10); }
.pcc-how-card-title { font-size: 16px; font-weight: 700; color: #038e8e; }
.pcc-how-card-text { font-size: 14px; color: #33333b; line-height: 1.6; }

/* FAQ */
.pcc-faq-section { background: #f9f9fb; border-radius: 24px; padding: 48px; width: 100%; }
.pcc-faq-title { font-size: 24px; font-weight: 700; color: #038e8e; text-align: center; margin-bottom: 32px; }
.pcc-faq-body { font-size: 15px; color: #555; line-height: 1.6; text-align: center; margin-bottom: 32px; }
.pcc-faq-list { display: flex; flex-direction: column; width: 100%; }
.pcc-faq-item { border-bottom: 1px solid #e6e0eb; }
.pcc-faq-q { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; cursor: pointer; }
.pcc-faq-q-icon { width: 28px; height: 28px; background: #038e8e; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.pcc-faq-q-icon span { font-size: 14px; font-weight: 700; color: #fff; }
.pcc-faq-q-text { font-size: 16px; font-weight: 700; color: #33333b; line-height: 1.5; flex: 1; }
.pcc-faq-a { display: flex; gap: 16px; align-items: flex-start; padding: 0 0 20px; }
.pcc-faq-a-icon { width: 28px; height: 28px; background: #fff8e5; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.pcc-faq-a-icon span { font-size: 14px; font-weight: 700; color: #038e8e; }
.pcc-faq-a-text { font-size: 15px; color: #33333b; line-height: 1.7; flex: 1; }

/* RESPONSIVE - Seminar */
@media (max-width: 768px) {
  .pcc-visual-hero { height: 200px; }
  .pcc-visual-hero-ja { font-size: 24px; }
  .pcc-message-section { padding: 40px 20px; }
  .pcc-message-heading { font-size: 22px; }
  .pcc-message-body { font-size: 14px; }
  .pcc-seminar-list-section { padding: 40px 16px; }
  .pcc-seminar-list-inner { gap: 32px; }

  /* タブナビを横スクロール */
  .pcc-tab-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pcc-tab-nav::-webkit-scrollbar { display: none; }
  .pcc-tab-item, .pcc-tab-item-active { flex-shrink: 0; }

  /* セミナーカードを縦並び */
  .pcc-seminar-cards { flex-direction: column; align-items: center; overflow-x: visible; }
  .pcc-seminar-card { width: 100%; max-width: 420px; }

  .pcc-how-section { padding: 32px 20px; }
  .pcc-how-cards { flex-direction: column; align-items: center; }
  .pcc-how-card { max-width: 100%; width: 100%; flex-direction: row; gap: 16px; }
  .pcc-how-card-icon { flex-shrink: 0; }

  .pcc-faq-section { padding: 32px 20px; }
}