/* =========================================================
   トウコべ 講師紹介ページ用CSS — teachers.css
   ※ このファイルは Sass 管理外です。直接編集してください
     （assets/sass/ のビルド対象ではなく、Sassビルドで上書きされません）
   ※ 全セレクタは .p-teachers 配下にスコープ済み
     （postcss-prefix-selector で生成。再実行手順は README-teachers.md 参照）
   読み込み: header.php の is_page("teachers") 分岐で style.css の後に追加読み込み
   ========================================================= */

:root{
  --bg:#ffffff;
  --bg-alt:#f5f8fa;
  --bg-list:#fafcfd;
  --text:#333333;
  --text-soft:#6b7280;
  --text-mute:#9ca3af;
  --orange:#ff6920;
  --orange-soft:#ffac4b;
  --blue:#6eb6ea;
  --border:#e5e7eb;
  --border-soft:#f3f4f6;
  --cta:linear-gradient(to right,#ff6920,#ffac4b);
  --shadow:0 4px 14px rgba(0,0,0,.06);
  --font:"Noto Sans JP","Roboto","Hiragino Sans","Yu Gothic","メイリオ",sans-serif;
  --max:1120px;
}

/* ---------- base（WP組み込み用：テーマのグローバル指定の打ち消し） ----------
   ※ 元のリセット（* / html / body / img / a）は削除し、.p-teachers スコープで代替 */
.p-teachers,
.p-teachers *{box-sizing:border-box;}
.p-teachers{
  text-align:left; /* テーマの body{text-align:center} を打ち消す */
  font-family:var(--font);
  color:var(--text);
  font-size:15px;
  line-height:1.7;
  font-weight:400; /* テーマの body{font-weight:500 !important} 対策。!important の効力は継承先には及ばず、要素への直接指定が継承値に勝つため !important 不要 */
  -webkit-font-smoothing:antialiased;
}
/* テーマの a:hover,button:hover{opacity:.7} を打ち消す（各ボタンの意図した hover を有効化） */
.p-teachers a:hover,
.p-teachers button:hover{opacity:1;filter:none;}
/* 【写真差し替え】photo-slot 内に img を入れた場合にスロットいっぱいへ表示
   絶対配置で flex フローから外す（photo-slot は display:flex のため、通常フローだと
   img が ::after の円と同じ行に並び、flexアイテムの min-width:auto で縮めず枠からはみ出す。
   WPが付与する width/height 属性・クラスの影響も受けない）。
   下端のブランド帯 ::before(z-index:1) は img より前面のまま */
.p-teachers .photo-slot img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;}
/* img がある場合はプレースホルダーの円を消す（:has() は tag-group の色分けと同方針） */
.p-teachers .photo-slot:has(img)::after{display:none;}
.p-teachers h1,.p-teachers h2,.p-teachers h3,.p-teachers p{margin:0;}

.p-teachers .wrap{max-width:var(--max);margin:0 auto;padding:0 40px;position:relative;z-index:1;}
.p-teachers .section{position:relative;overflow:hidden;}

/* ※ モックの .wp-fixed / .site-header / .gnav / .page-title 等は削除済み
     （ヘッダーとタイトル帯はWPテーマ側の構造 s-lower を使用） */

/* ---------- 装飾（幾何のみ） ---------- */
.p-teachers .deco{position:absolute;inset:0;pointer-events:none;z-index:0;}
.p-teachers .deco span{position:absolute;display:block;}
.p-teachers .deco .ring{border:2px solid var(--orange);border-radius:50%;opacity:.14;}
.p-teachers .deco .dots{
  background-image:radial-gradient(circle,var(--orange) 1.5px,transparent 1.6px);
  background-size:16px 16px;opacity:.14;
}

/* ---------- catch ---------- */
.p-teachers .catch{padding:72px 0 76px;background:#fff;}
.p-teachers .catch__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.p-teachers .catch__title{font-size:38px;font-weight:800;line-height:1.55;letter-spacing:.02em;}
.p-teachers .grad-text{background:var(--cta);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.p-teachers .catch__lead{margin-top:24px;font-size:15px;color:var(--text-soft);line-height:2;max-width:460px;}

/* 写真プレースホルダー（差し替え可） */
.p-teachers .photo-slot{
  background:#eef2f6;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  font-size:11px;color:var(--text-mute);font-family:ui-monospace,monospace;letter-spacing:.08em;
}
/* 高さ固定をやめ aspect-ratio 化（ビューポート幅で比率がつぶれるのを防止）
   旧: catch height:320px（1040px時 488×320 ≒ 1.53:1）/ card height:180px（245×180 ≒ 1.36:1） */
.p-teachers .photo-slot--catch{aspect-ratio:3/2;height:auto;border-radius:12px;}
.p-teachers .photo-slot--card{aspect-ratio:4/3;height:auto;}
.p-teachers .photo-slot--card::after{content:"";width:72px;height:72px;border-radius:50%;background:#dbe3ea;}
.p-teachers .photo-slot--card .tag-photo{position:absolute;top:10px;left:10px;font-size:9px;}

/* ---------- 見出し ---------- */
.p-teachers .heading{text-align:center;margin-bottom:36px;}
.p-teachers .heading__kicker{
  display:inline-flex;align-items:center;gap:12px;
  color:var(--orange);font-size:12px;font-weight:800;letter-spacing:.24em;margin-bottom:12px;
}
.p-teachers .heading__kicker::before,.p-teachers .heading__kicker::after{content:"";width:26px;height:1.5px;background:var(--orange);opacity:.5;}
.p-teachers .heading__title{font-size:36px;font-weight:800;line-height:1.45;letter-spacing:.02em;}
.p-teachers .heading__bar{width:56px;height:4px;background:var(--cta);border-radius:2px;margin:20px auto 0;}

/* ---------- 講師一覧（3列デザイン。旧4列＋badge-courseは廃止） ---------- */
.p-teachers .teachers{padding:76px 0 84px;background:var(--bg-list);}
.p-teachers .teacher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.p-teachers .teacher-card{
  background:#fff;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.p-teachers .teacher-card[hidden]{display:none;}
.p-teachers .teacher-card__body{padding:0 20px 22px;display:flex;flex-direction:column;gap:14px;}
.p-teachers .teacher-card__univ{font-size:17px;font-weight:700;line-height:1.4;}
.p-teachers .teacher-card__meta{font-size:13px;color:var(--text-soft);margin-top:3px;}

/* --- タググループ（指導科目 / 指導種別）: ラベル横並び＋チップ --- */
.p-teachers .tag-group{display:flex;align-items:flex-start;gap:10px;}
.p-teachers .tag-group__label{
  display:flex;align-items:center;gap:6px;flex:0 0 58px;padding-top:3px;
  font-size:11px;font-weight:700;color:var(--text-mute);letter-spacing:.08em;
}
.p-teachers .tag-group__label::before{content:"";width:3px;height:11px;border-radius:1px;background:var(--border);}
.p-teachers .tag-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px;}
.p-teachers .tag{
  font-size:11.5px;font-weight:600;line-height:1.6;padding:4px 10px;
  white-space:nowrap;border-radius:3px;border:1px solid transparent;
}
.p-teachers .tag--subject{background:#fff2e9;color:#c9521a;border-color:rgba(255,105,32,.22);}
.p-teachers .tag--type{background:#eef4f9;color:#4a6b85;border-color:rgba(110,182,234,.35);}
.p-teachers .tag-group:has(.tag--subject) .tag-group__label::before{background:var(--orange);}
.p-teachers .tag-group:has(.tag--type) .tag-group__label::before{background:var(--blue);}

.p-teachers .teacher-card__msg{font-size:13px;color:var(--text-soft);line-height:1.9;padding-top:14px;border-top:1px solid var(--border-soft);}

.p-teachers .more-wrap{text-align:center;}
.p-teachers .note{margin-top:24px;font-size:12.5px;color:var(--text-mute);text-align:center;line-height:1.7;}

/* ---------- buttons ---------- */
.p-teachers .btn{
  appearance:none;cursor:pointer;font-family:var(--font);font-weight:700;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;box-sizing:border-box;border:none;
}
.p-teachers .btn::after{
  content:"";flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background-repeat:no-repeat;background-position:center;
}
.p-teachers .btn-fill{background:var(--cta);color:#fff;box-shadow:0 4px 12px rgba(255,105,32,.25);}
.p-teachers .btn-fill:hover{color:#fff;opacity:.92;}
.p-teachers .btn-fill::after{
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 11 11' fill='none' stroke='%23ff6920' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.5h6M5.5 2.5L8.5 5.5l-3 3'/%3E%3C/svg%3E");
}
.p-teachers .btn-outline{background:#fff;color:var(--orange);border:2px solid var(--orange);box-shadow:0 4px 14px rgba(0,0,0,.06);}
.p-teachers .btn-outline:hover{color:var(--orange);background:#fff8f4;}
.p-teachers .btn-outline::after{
  background-color:#ff6920;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 11 11' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.5h6M5.5 2.5L8.5 5.5l-3 3'/%3E%3C/svg%3E");
}
.p-teachers .btn-cta{width:340px;height:64px;padding:0 24px;font-size:16px;}
.p-teachers .btn-more{width:340px;height:60px;padding:0 24px;font-size:15px;margin-top:36px;}
.p-teachers .btn-more::after{
  width:24px;height:24px;background-color:#ff6920;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 11 11' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 2v7M2 5.5l3.5 3.5L9 5.5'/%3E%3C/svg%3E");
  transition:transform .2s;
}
.p-teachers .btn-more.is-expanded::after{transform:rotate(180deg);}

/* ---------- CTA ---------- */
.p-teachers .cta{padding:72px 0 80px;background:#fff;text-align:center;}
.p-teachers .cta .heading{margin-bottom:20px;}
.p-teachers .cta__lead{margin-bottom:36px;font-size:15px;color:var(--text-soft);line-height:2;}
.p-teachers .cta__buttons{display:flex;gap:20px;justify-content:center;}

/* ※ モックの .site-footer 一式は削除済み（WPテーマ側のフッターを使用） */

/* =========================================================
   SP (〜767px)
   ========================================================= */
@media (max-width:767px){
  .p-teachers{font-size:14px;}
  .p-teachers .wrap{padding:0 20px;}

  .p-teachers .catch{padding:36px 0 40px;}
  .p-teachers .catch__grid{grid-template-columns:1fr;gap:22px;}
  .p-teachers .catch__title{font-size:25px;line-height:1.55;}
  .p-teachers .catch__lead{margin-top:16px;font-size:14px;line-height:1.9;max-width:none;}
  .p-teachers .photo-slot--catch{border-radius:16px;} /* 高さはPC側の aspect-ratio:3/2 を継続適用 */

  .p-teachers .heading{margin-bottom:26px;}
  .p-teachers .heading__kicker{font-size:11px;letter-spacing:.22em;gap:10px;}
  .p-teachers .heading__kicker::before,.p-teachers .heading__kicker::after{width:22px;}
  .p-teachers .heading__title{font-size:24px;line-height:1.5;}
  .p-teachers .heading__bar{width:44px;margin-top:16px;}

  .p-teachers .teachers{padding:48px 0 52px;}
  .p-teachers .teacher-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .p-teachers .photo-slot--card::after{width:40px;height:40px;}
  .p-teachers .teacher-card__body{padding:0 12px 14px;gap:8px;}
  .p-teachers .teacher-card__univ{font-size:12.5px;}
  .p-teachers .teacher-card__meta{font-size:11px;margin-top:2px;}
  .p-teachers .tag-group{flex-direction:column;gap:5px;}
  .p-teachers .tag-group__label{flex:none;padding-top:0;font-size:9.5px;letter-spacing:.06em;}
  .p-teachers .tag-group__label::before{height:10px;}
  .p-teachers .tag-list{gap:4px;}
  .p-teachers .tag{font-size:10px;padding:2px 7px;}
  .p-teachers .teacher-card__msg{
    font-size:11px;line-height:1.7;padding-top:8px;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  }

  .p-teachers .btn-more{width:100%;height:54px;font-size:14px;margin-top:20px;}
  .p-teachers .note{margin-top:20px;font-size:11.5px;}

  .p-teachers .cta{padding:44px 0 48px;}
  .p-teachers .cta__lead{margin-bottom:26px;font-size:13px;line-height:1.9;}
  .p-teachers .cta__buttons{flex-direction:column;gap:12px;}
  .p-teachers .btn-cta{width:100%;height:60px;font-size:15px;}
}

/* =========================================================
   追加デザイン v2：在籍講師のご紹介セクション
   ────────────────────────────────────────────
   ※ このブロックを丸ごと削除すると v1（装飾なしのカード表示）に戻ります。
   ========================================================= */

/* セクション上辺を斜めに切り、前後の白背景との境目をつくる */
.p-teachers .teachers{
  clip-path:polygon(0 40px,100% 0,100% 100%,0 100%);
  padding-top:104px;
  margin-top:-40px;
}

/* 見出し背後のウォーターマーク */
.p-teachers .teachers .heading{position:relative;}
.p-teachers .teachers .heading::before{
  content:"TEACHERS";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:96px;font-weight:800;letter-spacing:.06em;line-height:1;
  color:var(--orange);opacity:.05;white-space:nowrap;pointer-events:none;z-index:0;
}
.p-teachers .teachers .heading__kicker,
.p-teachers .teachers .heading__title,
.p-teachers .teachers .heading__bar{position:relative;z-index:1;}

/* カード：縁取りとホバーの持ち上げ */
.p-teachers .teacher-card{
  border:1px solid var(--border-soft);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.p-teachers .teacher-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  border-color:rgba(255,105,32,.35);
}

/* 写真下部にブランドカラーの帯
   （border-bottom+border-image → ::before に変更。aspect-ratio:4/3 が枠と実表示で一致するようになる） */
.p-teachers .photo-slot--card::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cta);z-index:1;
}

/* 大学名ヘッダを写真に重ねて奥行きを出す（浮きボックス） */
.p-teachers .teacher-card__head{
  position:relative;z-index:2;margin-top:-18px;
  background:#fff;border-radius:5px;padding:12px 14px 13px;
  box-shadow:0 2px 10px rgba(0,0,0,.10);
}

/* 大学名の頭に小さなアクセント */
.p-teachers .teacher-card__univ{display:flex;align-items:center;gap:8px;}
.p-teachers .teacher-card__univ::before{
  content:"";flex-shrink:0;width:4px;height:18px;border-radius:2px;background:var(--cta);
}

@media (max-width:767px){
  .p-teachers .teachers{clip-path:polygon(0 24px,100% 0,100% 100%,0 100%);padding-top:66px;margin-top:-24px;}
  .p-teachers .teachers .heading::before{font-size:54px;}
  .p-teachers .teacher-card__head{margin-top:-13px;padding:7px 9px 8px;border-radius:4px;}
  .p-teachers .teacher-card__univ::before{height:14px;width:3px;}
}