/*
Theme Name: Iroletter 20260721 Child
Template: iroletter-20260721
Description: 彩り文字協会 公式サイト 子テーマ（認定講師一覧ページの追加・ナビ項目の追加・既存の講師紹介から認定講師を除外。親テーマは無改変）
Version: 0.14.0
Text Domain: iroletter
*/
/* この style.css は functions.php で親の style.css の後に読み込ませている（親は親の CSS しか enqueue しないため） */

/* ヘッダーのナビが7項目になったぶん、間隔を 40px → 28px に詰める（幅1280pxで1行に収めるため。2026-09-15 Ryota決定） */
.header-nav {
  gap: 28px;
}
/* 2026-09-30 ナビを7項目・長い文言（認定講師一覧／講師一覧）にしたため、幅ごとに収め方を変える。
   文字は途中で折らない（nowrap）。お問い合わせボタンが画面の右外へ押し出されない幅の区切りは、901〜1400pxを1px刻みで実測して決めた */
.header-nav a {
  white-space: nowrap;
}
@media (max-width: 1319px) {
  .header-nav {
    gap: 18px;
    padding-right: 24px;
  }
}
@media (max-width: 1239px) {
  .header-nav {
    gap: 12px;
  }
  .header-nav a {
    font-size: 13px;
  }
}
/* 1100px以下はナビ7項目とお問い合わせボタンが1行に入らないので、900px以下と同じハンバーガーメニューに切り替える */
@media (max-width: 1100px) {
  .header-nav {
    display: none;
  }
  .btn-contact-header {
    display: none;
  }
  .hamburger {
    display: flex;
    margin-left: auto;
    align-self: center;
    position: relative;
    z-index: 101;
  }
}

/* 地域の絞り込みから「オンライン」を隠す（紐づき講師0件のため。2026-08-24 に本番の「追加CSS」へ入れたものと同じ1行。
   子テーマへ切り替えると「追加CSS」は引き継がれないので、ここに持たせて消えないようにする） */
.filter-tag[data-type="area"][data-value="オンライン"] {
  display: none;
}

/* 認定講師一覧の冒頭「彩り文字アーティスト認定講師とは」（2026-09-28 追加）。見出し・本文の書体と色は協会についてページの tokuchou をそのまま使う */
.cert-intro-section {
  padding-top: 60px;
  padding-bottom: 0;
}
.cert-intro {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.cert-intro-heading {
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .cert-intro-section {
    padding-top: 40px;
  }
  .cert-intro {
    text-align: left;
  }
  .cert-intro-heading {
    font-size: 18px;
    letter-spacing: 0.1em;
    text-align: center;
  }
}

/* =============================
   2026-10-06 彩り文字アーティスト養成講座（page-artist-course.php）
   書体・色は既存（本文＝ゴシック／見出し＝明朝／ピンク #e28c93・背景 #FFFBFB）に合わせる
   ============================= */
.course-section { padding: 80px 0 100px; }
.course-body { max-width: 900px; margin: 0 auto; font-family: var(--font-gothic); }
.course-lead { font-size: 18px; line-height: 2; margin-bottom: 64px; }
.course-h2 {
  font-family: var(--font-mincho);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 72px 0 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0d6d8;
}
.course-text { line-height: 2; margin-bottom: 16px; }
.course-table-wrap { overflow-x: auto; margin-bottom: 28px; }
.course-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.7; }
.course-table th, .course-table td { border: 1px solid #ecdfe0; padding: 16px 18px; vertical-align: top; text-align: left; }
.course-table thead th { font-family: var(--font-mincho); font-weight: 500; background: #faf6f6; }
.course-table thead th span { display: block; font-size: 13px; font-weight: 400; color: #777; }
.course-table tbody th { font-weight: 500; white-space: nowrap; background: #faf6f6; width: 8em; }
.course-table .is-course { background: #FFFBFB; }
.course-table thead th.is-course { background: #fbe9ea; }
.course-table strong { color: #c9636d; }
.course-list { list-style: disc; padding-left: 1.4em; line-height: 2; }
.course-steps { list-style: decimal; padding-left: 1.6em; line-height: 2; }
.course-steps li { margin-bottom: 6px; }
.course-cta { text-align: center; margin: 44px 0 8px; }
.course-cta .btn-primary { max-width: 100%; box-sizing: border-box; white-space: normal; }
.course-cta-label { min-width: 0; overflow-wrap: anywhere; }
.course-faq-item { border-bottom: 1px solid #f0e8e8; padding: 22px 0; }
.course-faq-item dt { font-weight: 700; margin-bottom: 10px; display: flex; gap: 12px; }
.course-faq-item dd { margin: 0; line-height: 2; display: flex; gap: 12px; }
.course-faq-mark {
  flex: 0 0 auto;
  font-family: var(--font-mincho);
  color: #e28c93;
  font-weight: 700;
  width: 1.2em;
}
.course-faq-mark.is-a { color: #8fb6cf; }
@media (max-width: 768px) {
  .course-section { padding: 48px 0 72px; }
  .course-lead { font-size: 16px; margin-bottom: 40px; }
  .course-h2 { font-size: 21px; margin: 52px 0 20px; }
  /* スマホは横スクロールにせず、項目ごとに縦へ積む（養成講座の列が画面外へ隠れるため） */
  .course-table, .course-table tbody, .course-table tr, .course-table th, .course-table td { display: block; width: auto; }
  .course-table thead { display: none; }
  .course-table { font-size: 15px; border: none; }
  .course-table tr { border: 1px solid #ecdfe0; margin-bottom: 14px; }
  .course-table th, .course-table td { border: none; padding: 10px 14px; }
  .course-table tbody th { width: auto; white-space: normal; border-bottom: 1px solid #ecdfe0; }
  .course-table td::before { content: attr(data-label); display: block; font-size: 12px; color: #888; margin-bottom: 2px; }
  .course-table td.is-course::before { color: #c9636d; }
  .course-cta .btn-primary { padding: 16px 20px; }
}

/* Local review banner */
.preview-note{padding:14px 20px;background:#fff1c9;color:#493b22;font:14px/1.7 sans-serif;text-align:center}

body > .preview-note, main > .preview-note:first-child{margin-top:72px}

.course-step-part{display:inline-block}
@media(max-width:768px){
 .course-cta .btn-primary{width:100%;padding:16px 12px;gap:8px;justify-content:center;font-size:clamp(14px,3.8vw,17px);letter-spacing:0;line-height:1.8}
 .course-cta-line{display:block;white-space:nowrap}
 .course-cta .btn-contact-circle{width:26px;height:26px;flex:0 0 26px}
}

.course-nav-group{position:relative;display:flex;align-items:center;gap:4px;height:100%}
.course-nav-toggle{border:0;background:transparent;color:#666;font:inherit;padding:8px 2px;cursor:pointer}
.course-nav-submenu{display:none;position:absolute;top:100%;left:-20px;min-width:170px;background:#fff;border:1px solid #ecdfe0;box-shadow:0 6px 16px #00000012;padding:8px 0;z-index:1000}
.course-nav-submenu a{display:block;padding:12px 20px;white-space:nowrap}
.course-nav-group:hover .course-nav-submenu,.course-nav-group:focus-within .course-nav-submenu,.course-nav-group.is-open .course-nav-submenu{display:block}
.sp-nav .sp-course-child{padding-left:52px;font-size:16px;color:#9c626b}

/* 2026-10-07 Codex版の追加分（パンくず・画像・受講生の声ボタン・声ページ冒頭）を移植 */
.review-breadcrumb{max-width:1000px;margin:0 auto;padding:18px 24px;font-family:var(--font-gothic,sans-serif);font-size:13px;color:#76696b;line-height:1.8}
.review-breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px 12px;list-style:none;padding:0;margin:0}
.review-breadcrumb li+li:before{content:"›";margin-right:12px;color:#aaa}
.review-breadcrumb a{color:inherit;text-decoration:none}.review-breadcrumb a:hover{text-decoration:underline}
.course-interview-button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:60px;padding:16px 28px;border:1px solid #a35f6b;border-radius:4px;background:#a35f6b;color:#fff!important;text-decoration:none!important;font-family:var(--font-gothic,sans-serif);font-size:16px;line-height:1.7;max-width:100%;box-sizing:border-box}
.course-interview-button:hover{background:#874b56}.course-interview-button:focus-visible{outline:3px solid #65444b;outline-offset:4px}
.course-section-image{margin:24px 0 30px}.course-section-image img{display:block;width:100%;height:auto;border-radius:6px}.course-section-image figcaption{font-family:var(--font-gothic,sans-serif);font-size:12px;line-height:1.7;color:#786f70;margin-top:8px}
.voice-page header{padding-top:24px}
@media(max-width:600px){.review-breadcrumb{padding:14px 20px;font-size:12px}.course-interview-button{width:100%;gap:16px;padding:16px 18px;text-align:center}.course-section-image{margin:20px 0 24px}}

.teacher-instagram-link{color:#a35f6b;text-decoration:underline;text-underline-offset:4px}.teacher-instagram-link:hover{color:#874b56}

.voice-page .voice-overview{padding:24px;margin-bottom:32px;background:#fff;border-radius:12px}.voice-overview h2{font-size:24px;line-height:1.6;margin:0 0 18px}.voice-overview p{font-family:var(--font-gothic,sans-serif);font-size:16px;line-height:1.9;margin:0 0 16px}.voice-overview .voice-editorial-note{font-size:13px;color:#666}.voice-topic-nav{border-top:1px solid #eadcde;padding-top:18px}.voice-topic-nav h3{font-size:18px;margin:0 0 12px}.voice-topic-nav ul{padding-left:20px;margin:0}.voice-topic-nav li{margin:12px 0}.voice-topic-nav a{color:#a35f6b;text-decoration:underline;text-underline-offset:4px}.voice-page .v[id]{scroll-margin-top:100px}@media(max-width:600px){.voice-page .voice-overview{margin:0 16px 24px;padding:20px}.voice-overview h2{font-size:21px}}

.voice-bottom-note{padding:0 20px;margin:28px 0 0}.voice-bottom-note .voice-editorial-note{font-family:var(--font-gothic,sans-serif);font-size:13px;line-height:1.9;color:#666}

/* 本番：固定ヘッダー(72px)の下から始める（後ろの規則に上書きされないよう末尾に置く） */
.review-breadcrumb{margin:72px auto 0}

/* 動画サムネイルの縦横比を先に確定：遅延読み込みで枠の高さが縮み、目次リンクの飛び先がずれるのを防ぐ */
.v .play{aspect-ratio:16/9;height:auto}
.v .play img{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover}

/* 2026-10-20 表示を軽くする：背景のグラデーション画像を子テーマの軽いWebP（175KB→117KB）に差し替え。親の他の指定（cover・位置）はそのまま */
.section--bg-pink,
.cards-section{background-image:url('assets-img/back-grade.webp')}

/* 2026-10-20 v0.12 表示を軽くする：スマホでは背景の中央の縦帯だけを使う（117KB→約40KB）。
   スマホの該当セクションは縦長（全157ページ中3か所・最も低いもので高さ1,564px）で、cover の指定上もともと中央の幅約250px分しか見えていない。
   切り出したのは元画像の中央640px×全高＝幅767pxまで見える範囲は今と同じ。 */
@media (max-width: 767px) {
  .section--bg-pink,
  .cards-section{background-image:url('assets-img/back-grade-sp.webp')}
}