/* ════════════════════════════════════
   講師紹介ページ固有スタイル
════════════════════════════════════ */
.profile-section { background: var(--gray-50); padding: 6rem 0; }
.profile-grid { display: grid; grid-template-columns: 380px 1fr; gap: 5rem; align-items: start; }
.profile-photo-wrap { position: sticky; top: 100px; }
.profile-photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--navy-light), var(--navy)); }
.profile-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray-200); border-radius: var(--r); overflow: hidden; margin-top: 1.5rem; }
.prof-stat { background: var(--white); padding: 1rem; text-align: center; }
.prof-stat-val { font-size: 1.4rem; font-weight: 900; color: var(--teal); line-height: 1; }
.prof-stat-lbl { font-size: .7rem; color: var(--text-muted); margin-top: .3rem; }
.career-timeline { position: relative; padding-left: 2rem; }
.career-timeline::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 0; width: 2px; background: var(--teal); opacity: .25; }
.career-item { position: relative; margin-bottom: 1.75rem; }
.career-dot { position: absolute; left: -2rem; top: .35rem; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 3px solid var(--gray-200); transition: all .3s; }
.career-item:hover .career-dot { border-color: var(--teal); background: var(--teal); }
.career-year { font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: var(--teal); }
.career-title { font-size: .975rem; font-weight: 700; color: var(--text); }
.career-body { font-size: .875rem; color: var(--text-muted); line-height: 1.75; }
.books-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.book-card { background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--gray-100); box-shadow: var(--shadow-sm); display: flex; gap: 1.5rem; padding: 1.75rem; transition: all .3s; }
.book-card:hover { border-color: var(--teal); box-shadow: var(--shadow); transform: translateY(-3px); }
.book-cover { flex-shrink: 0; width: 90px; height: 120px; border-radius: 8px; background: linear-gradient(135deg, var(--navy), var(--navy-light)); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.book-meta { display: flex; flex-direction: column; justify-content: center; }
.book-label { font-size: .65rem; font-weight: 800; letter-spacing: .15em; color: var(--teal); margin-bottom: .4rem; }
.book-title-txt { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.4; margin-bottom: .6rem; }
.book-publisher { font-size: .8rem; color: var(--text-muted); }
.yt-card { background: linear-gradient(135deg, #1a0000, #300a0a); border: 1px solid rgba(255,0,0,.15); border-radius: var(--r-lg); padding: 3rem; display: flex; align-items: center; gap: 3rem; }
.yt-icon { font-size: 5rem; flex-shrink: 0; }
.yt-badge { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .15em; background: #ff0000; color: var(--white); padding: .25rem .8rem; border-radius: 100px; margin-bottom: .6rem; }
.yt-card h3 { font-size: 1.5rem; font-weight: 900; color: var(--white); margin-bottom: .5rem; }
.yt-sub { font-size: 2.5rem; font-weight: 900; color: #ff5f5f; line-height: 1; margin-bottom: .4rem; }
.yt-card p { font-size: .9rem; color: rgba(255,255,255,.6); }
.message-box { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); border-radius: var(--r-lg); padding: 3rem; border-left: 4px solid var(--teal); position: relative; }
.message-box::before { content: '"'; position: absolute; top: 1rem; left: 2rem; font-size: 6rem; font-weight: 900; color: var(--teal); line-height: 1; opacity: .15; }
.message-box blockquote { font-size: 1.1rem; font-weight: 600; color: var(--text); line-height: 1.85; position: relative; z-index: 1; }
.message-box cite { display: block; margin-top: 1.25rem; font-style: normal; font-size: .85rem; color: var(--gray-400); }

@media (max-width: 900px) {
  .profile-section { padding: 4rem 0; }
  .profile-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .profile-photo-wrap { position: static; max-width: 320px; margin: 0 auto; }
  .books-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .yt-card { flex-direction: column; text-align: center; gap: 1.5rem; padding: 2.5rem; }
  .message-box { padding: 2.5rem; }
}
@media (max-width: 600px) {
  .profile-section { padding: 2.5rem 0; }
  .book-card { flex-direction: column; align-items: center; text-align: center; padding: 1.5rem; gap: 1rem; }
  .yt-card { padding: 1.75rem; gap: 1.25rem; }
  .yt-card h3 { font-size: 1.2rem; }
  .yt-sub { font-size: 2rem; }
  .message-box { padding: 1.75rem; }
  .message-box blockquote { font-size: 1rem; }
  .career-timeline { padding-left: 1.5rem; }
  .career-dot { left: -1.5rem; }
}

/* ── プロフィール・本・YT追加スタイル ── */
.profile-name-heading { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 900; color: var(--text); margin-bottom: .4rem; }
.profile-subname { font-size: .9rem; color: var(--text-muted); margin-bottom: 1.75rem; }
.message-box-mb { margin-bottom: 2.5rem; }
.profile-bio { color: var(--text-muted); line-height: 1.9; margin-bottom: 2rem; }
.section-sub-heading { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 1.5rem; }
.img-banner-wrap { margin-top: 3rem; }
.img-banner { width: 100%; border-radius: var(--r-lg); object-fit: cover; max-height: 480px; display: block; }
.book-desc { font-size: .825rem; color: var(--text-muted); margin-top: .7rem; line-height: 1.7; }
.yt-icon-red { color: #ff0000; }
.yt-btn-mt { margin-top: 1.25rem; display: inline-flex; }
.prof-stat-small { font-size: .8rem; }
.yt-sub-unit { font-size: 1.2rem; font-weight: 600; }

/* ── 資格バッジ ── */
.credential-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.cred-badge {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  padding: .3rem .8rem; border-radius: 100px;
  background: rgba(88,195,232,.1);
  border: 1px solid rgba(88,195,232,.25);
  color: var(--teal);
}

/* ── 番号付きキャリアドット ── */
.career-dot--num {
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 900;
  color: var(--white);
  background: var(--teal);
  border: none;
  width: 20px; height: 20px;
  left: -2.25rem; top: .15rem;
}
.career-item:hover .career-dot--num { background: var(--teal-dark); }