/* =========================================
   古典経営実践会 LP - style.css (clean)
   ========================================= */

/* ===== CSS Variables ===== */
:root{
  --bg:#fdfaf3;
  --ink:#222;
  --muted:#bfc3c6;
  --brand:#c0392b;
  --brand-d:#a93226;
  --paper:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.08);

  /* Triangle glow */
  --p1:#B7413E;  /* top    */
  --p2:#244152;  /* right  */
  --p3:#2F7C65;  /* left   */

  /* モバイル前提：PCでも中身はこれ以上広がらない */
  --content-width: 680px;
  --content-width-wide: 960px; /* voices など広め用（任意） */

  --pink:        #e91e63;   /* メインのピンク */
  --pink-soft:   #ff9ac4;   /* 柔らかいピンク */
  --pink-strong: #d81b60;   /* 濃いめ・締め色 */
  
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0;
overflow-x: hidden; /* ← 横スクロールバーを根絶 */ }
body{
  font-family:'Noto Sans JP',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.8;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; }

/* Container */
.container{
  width:100%;
  max-width:var(--content-width);
  padding-inline:16px;
  margin-inline:auto;
}

/* Headings */
h1,h2,h3{ line-height:1.3; margin:0 0 .6em; }
h1{ font-size: clamp(28px, 5vw, 52px); font-weight:800; }
h2{ font-size: clamp(22px, 3vw, 36px); font-weight:700; }
h3{ font-size: 20px;
  font-weight:700;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  text-align: center;
}
.lead{ font-size: clamp(15px, 2.2vw, 20px); color:#e7eaee; }

/* Hero Catch Copy */
h1.reveal-up{
  line-height:1.6;
  letter-spacing:.05em;
  text-align:center;
  margin:0 auto;
  max-width:22ch;
}
.lead-white{
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  font-size: clamp(18px, 2.6vw, 24px);
  line-height:1.9;
  color:#fff;
  font-weight:400;
  text-align:center;
}
@media (max-width: 960px){
  h1.reveal-up{ line-height:1.75; max-width:24ch; }
}
@media (max-width: 600px){
  h1.reveal-up{ font-size:clamp(20px,6vw,30px); line-height:1.6; max-width:26ch; }
}

/* Buttons */
.btn{
  display:inline-block; border-radius:10px; padding:14px 22px; text-decoration:none;
  font-weight:700; transition:.2s transform ease, .2s background ease, .2s color ease, .2s border-color ease;
  border:2px solid transparent; line-height:1;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-d); }
.btn-ghost{ background:transparent; color:var(--brand); border-color:var(--brand); }
.btn-ghost:hover{ background:var(--brand); color:#fff; }
.btn-small{ padding:8px 14px; font-size:.9rem; }

/* Sections */
.section{ padding:80px 0; }

/* =========================================
   Header (sticky / black)
   ========================================= */
.site-header{
  position: sticky; top:0; z-index:1000;
  background:#000; color:#fff;
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:72px; padding:12px 0;
}
/* Brand logo */
.brand{ margin:0; line-height:0; display:flex; align-items:center; }
.brand a{ display:flex; align-items:center; text-decoration:none; }
.brand img{ height:48px; width:auto; display:block; }

/* Nav */
.nav{ display:flex; gap:18px; align-items:center; }
.nav a{
  color:#fff; text-decoration:none; font-weight:400; line-height:1;
  font-size:12px; padding-block:10px; opacity:.95; transition:.2s color ease,.2s opacity ease;
}
.nav a:hover{ color:var(--brand); opacity:1; }
@media (max-width: 960px){
  .nav a{ font-size:16px; }
}

/* =========================================
   Hero
   ========================================= */
.hero{
  position:relative; min-height:78vh;
  display:grid; place-items:center; text-align:center; color:#fff; overflow:hidden;
  background:transparent !important; /* ← 背景は固定レイヤーに任せる */
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.35), rgba(0,0,0,.55));
  z-index:1;
}
.hero-content{ position:relative; z-index:2; }
.cta-row{ margin-top:20px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Scroll indicator */
.scroll-indicator{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  color:#fff; text-decoration:none; z-index:2;
  animation: floatY 2s ease-in-out infinite;
}
@keyframes floatY { 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,-6px);} }

/* =========================================
   Triangle SVG
   ========================================= */
.tri-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.tri-base{ stroke: rgba(255,255,255,.22); stroke-width:2; fill:none; }
.tri-glow{
  stroke:#fff; stroke-width:4; fill:none; stroke-linecap:round;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.95));
}
/* === Hero legend dots (正しさ / 賢さ / 美しさ) === */
.tri-legend{
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;              /* 「…」と次の●の間隔 */
  color:#fff;
  opacity:.9;
  flex-wrap:wrap;        /* 狭い画面で折り返しOK */
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  margin-right:6px;      /* ●とラベルのすき間 */
  flex:0 0 auto;
}
.dot-1{ background: var(--p1); } /* 正しさ */
.dot-2{ background: var(--p2); } /* 賢さ */
.dot-3{ background: var(--p3); } /* 美しさ */


/* =========================================
   Content Blocks
   ========================================= */

#pains{
  background-color: #fff;
}
#kaiketsu{
  background-color: rgb(25, 138, 230);
}
.section_kaiketsu{
  padding: 0;
}
#merrit{
  background-color: #fff;
}
.select_img{
  margin-top: 20px;
}
.select_text{
  color: #fff;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  text-align: center;
  
  
}
.teacher_text{
  color: #fff;
  font-weight: normal;
  font-size: 14px;
}
.program_text{
  font-weight: normal;
  font-size: 18px;
}
.program_lead{
  font-size: 12px;
}
#program{
  background-color: #fff;
  color: #000;
}
#contents{
  background-color: #fff;
}
#messeage{
  background-color: #000;
}
.last_messeage{
  text-align: center;
  margin-top: 30px;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  font-size: 12px;
}

/* === Voices: YouTube cards === */
.video-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
figure.video{ margin:0; }
.video-16x9{
  position:relative; width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
}
.video-16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
figure.video figcaption{ margin-top:8px; color:#e7eaee; font-size:.95rem; text-align:left; }

/* FAQ */
.faq-item{ background:var(--paper); border-radius:12px; margin-bottom:12px; padding:0 18px; box-shadow:var(--shadow); }
.faq-item summary{ cursor:pointer; padding:16px 6px; font-weight:700; list-style:none; }
.faq-item[open] summary{ color:var(--brand); }
.faq-item p{ margin:0 0 18px; color:#444; }

/* Apply */
.apply-form{ background:var(--paper); padding:22px; border-radius:14px; box-shadow:var(--shadow); }
.apply-form .grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.apply-form label{ display:flex; flex-direction:column; gap:8px; font-weight:600; }
.apply-form input, .apply-form textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #ddd; font:inherit; background:#fff;
}
.apply-form input:focus, .apply-form textarea:focus{
  outline:none; border-color: var(--brand); box-shadow:0 0 0 3px rgba(192,57,43,.12);
}
.apply-form .wide{ grid-column:1 / -1; }
.form-note{ color:#6b6b6b; font-size:.9rem; margin-top:10px; }

/* Footer */
.site-footer{ padding:26px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; }
.to-top{ text-decoration:none; color:#e7eaee; }
.to-top:hover{ color:var(--brand); }
.footer{
  text-align: center;
  margin: auto;
}

/* Floating CTA */
.floating-cta{
  position:fixed; right:16px; bottom:16px; z-index:999;
  background:var(--brand); color:#fff; text-decoration:none; padding:14px 18px; border-radius:999px;
  box-shadow: var(--shadow); font-weight:800;
  transform: translateY(120%); opacity:0; transition:.3s ease;
}
.floating-cta.show{ transform: translateY(0); opacity:1; }

/* Reveal */
.reveal-up{ 
  opacity:0;
  transform: translateY(16px);
  transition:.7s ease;
  
}
h2{
  text-align: center;
  padding-bottom: 20px;
}
.reveal-fade{ opacity:0; transition:.8s ease; }
.reveal-up.active{ opacity:1; transform:none; }
.reveal-fade.active{ opacity:1; }
.delay-1{ transition-delay:.12s; } .delay-2{ transition-delay:.24s; }

/* Responsive quickies */
@media (max-width: 960px){
  .apply-form .grid{ grid-template-columns:1fr; }
}

/* === Hamburger button === */
.nav-toggle{
  display:none; width:40px; height:40px;
  border:0; background:transparent; position:relative; cursor:pointer; z-index:1001;
}
.nav-toggle span{
  position:absolute; left:8px; right:8px; height:3px; background:#fff; transition:.25s ease; border-radius:2px;
}
.nav-toggle span:nth-child(1){ top:12px; }
.nav-toggle span:nth-child(2){ top:19px; }
.nav-toggle span:nth-child(3){ top:26px; }
.site-header.is-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-header.is-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile panel */
@media (max-width: 960px){
  .nav-toggle{ display:block; }
  .nav{
    position:fixed; top:0; right:0; height:100vh; width:min(82vw, 360px);
    background:#000; color:#fff; z-index:1000;
    display:flex; flex-direction:column; align-items:flex-start;
    padding:88px 20px 20px;
    transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.6,.2,1);
    border-left:1px solid rgba(255,255,255,.08);
    box-shadow:-24px 0 48px rgba(0,0,0,.35);
  }
  .nav a{
    width:100%; color:#fff; font-weight:700; padding:14px 10px;
    opacity:0; transform: translateY(6px);
    transition: opacity .28s ease, transform .28s ease;
  }
  .site-header.is-open .nav{ transform:translateX(0); }
  .site-header.is-open .nav a{ opacity:1; transform:none; }
  .site-header.is-open .nav a:nth-child(1){ transition-delay:.06s; }
  .site-header.is-open .nav a:nth-child(2){ transition-delay:.10s; }
  .site-header.is-open .nav a:nth-child(3){ transition-delay:.14s; }
  .site-header.is-open .nav a:nth-child(4){ transition-delay:.18s; }
  .site-header.is-open .nav a:nth-child(5){ transition-delay:.22s; }
  .nav .btn.btn-small{
    margin-top:8px; width:100%; text-align:center;
    opacity:0; transform: translateY(6px); transition:opacity .28s ease, transform .28s ease;
  }
  .site-header.is-open .nav .btn.btn-small{ opacity:1; transform:none; transition-delay:.26s; }
  body.is-locked{ overflow:hidden; }
}
/* Overlay（暗幕） */
.nav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:999; backdrop-filter:blur(2px);
}
.site-header.is-open + .nav-backdrop{ opacity:1; pointer-events:auto; }

/* 低モーション設定の人に配慮 */
@media (prefers-reduced-motion: reduce){
  .nav, .nav a, .nav-backdrop{ transition:none !important; animation:none !important; }
}

/* === 全ページ共通の固定背景レイヤー === */
.page-bg{
  position: fixed; inset: 0; z-index: -1;
  background: url('./images/hero.jpg') center/cover no-repeat;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}
.page-bg::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.10) 40%, rgba(0,0,0,0) 70%);
}
/* === セクションの黒パネルを撤去 === */
.section.has-pane > .container::before{
  content:none !important;
  display:none !important;
}
.page-bg::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.60); /* ← 濃さは .18〜.30 で好み調整 */
}
/* Heroだけ濃くならないように（全体ベールに統一） */
.hero-overlay{
  background: none !important;
}
/* === Pains: あっさり✓アイコン＆軽い区切り線 === */

/* 行スタイルはそのままでもOK。区切り線だけ少し淡くする */
.pains-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
}
.pains-list li{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 2px;
  border-bottom:1px dashed rgba(255,255,255,.12); /* より淡く */
  line-height:1.8;
}

/* 白丸 + 黒チェック：常に中央に配置 */
.picon{
  --size: 24px;   /* 丸の直径（20〜28pxで好み調整） */
  --tick: 2.5px;  /* ✓の線の太さ（2〜3px推奨） */
  display: grid;
  place-items: center;         /* ← 中央寄せの肝 */
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #fff;
  margin-top: 4px;             /* テキストとの段差微調整（0〜6pxで） */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.08) inset,
    0 1px 3px rgba(0,0,0,.25);
}

.picon::after{
  content: "";
  display: block;              /* グリッドの子にする */
  width:  calc(var(--size) * 0.46);
  height: calc(var(--size) * 0.30);
  border-left:  var(--tick) solid #111;  /* 黒チェック */
  border-bottom: var(--tick) solid #111;
  transform: rotate(-45deg);
  /* さらに視覚中心に寄せたい時は下の1行を解放して微調整 */
  transform: translateY(-10%) rotate(-45deg);
}

/* === 画像のふわっとリビール === */
.reveal-img{
  opacity: 0;
  transform: translateY(14px) scale(.985);
  filter: blur(6px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.6,.2,1),
    filter .8s ease;
  will-change: transform, opacity, filter;
}
.reveal-img.active{
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* 画像要素をラップする場合のにじみ対策 */
.reveal-img img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;        /* お好みで */
  box-shadow: var(--shadow); /* お好みで */
}

/* アニメ弱め設定の人には即表示 */
@media (prefers-reduced-motion: reduce){
  .reveal-img{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}
/* ——— 赤＆サイズ：よく使う汎用ユーティリティ ——— */
.hl{ color: var(--brand, #c0392b); font-weight: 800; } /* まずはブランド赤で太く */
.hl--pure{ color:#e53935; }                            /* 純赤にしたい時 */


.hl-lg{  font-size: 1.15em; }                          /* 親より少し大きく */
.hl-xl{  font-size: clamp(1.15em, 3.5vw, 1.6em); }     /* 画面に応じてグッと大きく */
.hl-xxl{ font-size: clamp(1.3em, 4.5vw, 2.0em); }      /* さらに強調 */

/* ——— Pink highlight utilities ——— */
.hl-pink        { color: var(--pink);        font-weight: 800; }
.hl-pink--soft  { color: var(--pink-soft);   font-weight: 700; }
.hl-pink--strong{ color: var(--pink-strong); font-weight: 800; }

/* サイズ拡張（赤と同じ思想） */
.hl-pink-lg  { font-size: 1.15em; }
.hl-pink-xl  { font-size: clamp(1.15em, 3.5vw, 1.6em); }
.hl-pink-xxl { font-size: clamp(1.3em,  4.5vw, 2.0em); }

/* 暗い背景でも読みやすく（縁取り） */
.hl-pink-outline{
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ピンクの下線（テキスト下に太めライン） */
.hl-pink-underline{
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% .12em no-repeat;
  color: var(--pink);
}

/* ピンクのマーカーっぽい背景（丸みのあるタグ風） */
.hl-pink-bg{
  color:#fff;
  background: var(--pink);
  padding: .08em .4em;
  border-radius: .35em;
  line-height: 1;
  white-space: nowrap;
}

/* ちょっと贅沢なグラデ文字（見出し用） */
.hl-pink-grad{
  background: linear-gradient(20deg, #ff9ac4, #ff4da1 60%, #ff74a7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* 暗め背景で読みやすさUP（必要なときだけ併用） */
.hl-outline{
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* 改行させたくない強調なら（任意） */
.hl-nowrap{ white-space: nowrap; }

/* === 縦スパイン：白いラインが下へ伸びて残る === */
:root{
  --spine-w: 2px;               /* 線の太さ */
  --spine-h: 110px;             /* 既定の高さ（インラインで上書き可） */
  --spine-color: #fff;          /* 色（白） */
}

.section-spine{
  width: var(--spine-w);
  height: var(--spine-h);
  margin: 28px auto;            /* 中央配置。左/右寄せは .left/.right を追加 */
  background: var(--spine-color);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,255,255,.25); /* ほんのり発光（不要なら削除） */

  /* 入場アニメ（1回だけ）：上から下へ“伸びる” */
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  transition:
    transform .9s cubic-bezier(.2,.7,.2,1),
    opacity   .4s ease;
}

/* 画面に入ったら発火 → 伸びたまま維持 */
.section-spine.active{
  transform: scaleY(1);
  opacity: 1;
}

/* 左右寄せ（必要なら） */
.section-spine.left  { margin-left: 0;  margin-right: auto; }
.section-spine.right { margin-left: auto; margin-right: 0; }

/* モーション弱設定の人には即表示 */
@media (prefers-reduced-motion: reduce){
  .section-spine{ transform:none !important; opacity:1 !important; transition:none !important; }
}
.on-dark { color:#fff !important; }
.on-light{ color:#000 !important; }
/* sticky header オフセット（PC/スマホで高さを変える） */
[id] { scroll-margin-top: 84px; }
@media (max-width: 960px){
  [id] { scroll-margin-top: 72px; }
}
/* 既存 .floating-cta を少し調整 */
.floating-cta{
  position:fixed;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:999;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  padding:14px 18px;
  border-radius:999px;
  box-shadow: var(--shadow);
  font-weight:800;
  /* ← ここがポイント：横移動は transform でやる */
  transform: translate(0, 120%);
  opacity:0;
  transition: transform .32s cubic-bezier(.2,.6,.2,1), opacity .28s ease;
  will-change: transform;
}
.floating-cta.show{
  transform: translate(0, 0);
  opacity:1;
}
/* フッターが見えたら左下へ“スライド” */
.floating-cta.shift-left.show{
  transform: translate(var(--cta-shift-x, 0px), 0);
}
/* ===== Teachers ===== */
:root{ --teacher-photo-size: 112px; }

.teachers-grid{
  display:grid; gap:40px;
  grid-template-columns: 1fr;
  max-width: var(--content-width-wide, 960px);
  margin-inline:auto;
}
@media (min-width: 820px){
  .teachers-grid{ grid-template-columns: 1fr 1fr; }
}

.teacher-card{
  position:relative;
  background:#fff;
  color:var(--ink);
  border:1px solid #cfd8dc;            /* 薄い枠線 */
  border-radius:12px;
  padding:72px 22px 24px;              /* 上は写真ぶん広め */
  box-shadow: var(--shadow);
}

/* 顔写真（円形・カード上端に少し被せる） */
.teacher-photo{
  position:absolute; top:-36px; left:22px;   /* 左カードの既定位置 */
  width:var(--teacher-photo-size); height:var(--teacher-photo-size);
  border-radius:50%; object-fit:cover;
  border:6px solid #fff;                     /* 白縁で映えさせる */
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.t-right .teacher-photo{ left:auto; right:22px; } /* 右カードは右寄せ */

.teacher-head{ text-align:center; margin-bottom:8px; }
.teacher-title{ font-weight:700; font-size:clamp(16px,2.5vw,18px); }
.teacher-name{  font-weight:800; font-size:clamp(20px,3vw,24px); }

.teacher-lead{
  text-align:center; color:#333; margin:6px auto 16px;
}

/* ---- dashed 区切り + “Message” 見出し ---- */
.teacher-sep{
  display:flex; align-items:center; gap:12px;
  margin:12px 0 16px;
}
.teacher-sep::before,
.teacher-sep::after{
  content:""; flex:1; border-bottom:1px dashed #90a4ae;
}
.teacher-sep .label{
  color:#1e88e5; font-weight:700; white-space:nowrap;
}

/* 本文 */
.teacher-msg{ margin:0; color:#333; line-height:1.9; }

/* reveal の白文字指定をカード内で打ち消し（念のため） */
.teacher-card .reveal-up,
.teacher-card.reveal-up { color: inherit; }
/* ==== Teacher section quick fix ==== */

/* 1) 写真は表示112px（元が336でもOK） */
:root{
  --teacher-photo-size: 120px; /* 好みで 120/128 にしてもOK */
}
.teacher-photo{
  width: var(--teacher-photo-size);
  height: var(--teacher-photo-size);
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 var(--teacher-photo-size);
  display: block;
  top:-28px;
}
/* Teachers: 単一画像の見た目調整 */
#teacher .select_img{
  width: 100%;
  max-width: 520px;      /* ←ここで見た目サイズを決める（480〜560pxあたりがバランス良し） */
  display: block;
  margin: 12px auto 0;   /* 中央寄せ */
  border-radius: 12px;   /* 任意の角丸 */
  box-shadow: var(--shadow); /* 任意の影 */
}

/* さらに狭い画面ではもう一段階小さく */
@media (max-width: 420px){
  #teacher .select_img{ max-width: 440px; } /* 端末幅に合わせて自然に縮む */
}
/* 広めのコンテナ（既存の変数を活用） */
.container-wide{ max-width: var(--content-width-wide, 960px); }

/* 講師カード */
/* グリッドは常に1列（PCでも縦積み） */
.teacher-grid{
  display:grid;
  grid-template-columns: 1fr !important;
  gap: 18px;
}

/* カード本体：ダーク背景で読みやすく */
.teacher-card{
  background: rgba(0,0,0,.65);
  color:#fff;
  border-radius:16px;
  overflow:hidden;            /* 角丸に画像を沿わせる */
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  display:block;              /* 念のため */
}

/* 写真は上・横いっぱい、ほどよい高さでトリミング */
.teacher-photo{
  display:block;
  width:100%;
  aspect-ratio: 4 / 3;        /* 好みで 1/1（正方形）にもできる */
  object-fit: cover;          /* いい感じに切り抜き */
  object-position: center;    /* 顔が中央に来るように */
  max-height: clamp(180px, 32vh, 280px);
}


/* テキスト部は下に */
.teacher-body{
  padding: 16px 18px 20px;
}

/* 見出しや役割の体裁 */
.teacher-name{
  font-size: 18px;
  font-weight: 800;
  margin: 4px 0 2px;
}
.teacher-role{
  font-size: 14px;
  opacity: .85;
  margin: 0 0 10px;
}

/* 本文（初期は5行でクランプ。開くと全文表示） */
.teacher-message{
  font-size: 15px;
  line-height: 1.9;
}
.teacher-message.clamp{
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ボタン */
.teacher-more{
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.55);
  background: transparent;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.teacher-more:hover{ background: rgba(255,255,255,.08); }

/* 開いた状態（カードに .expanded が付く） */
.teacher-card.expanded .teacher-message{
  -webkit-line-clamp: unset;
  display: block;
}
/* ===== Teacher cards (fix & override) ===== */
.container-wide{ max-width: var(--content-width-wide, 960px); margin-inline:auto; padding-inline:16px; }

.teacher-grid{
  display:grid; gap:20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.teacher-card{
  display:flex; gap:16px; align-items:flex-start;
  background: rgba(0,0,0,.62);  /* しっかり読める暗さ */
  color:#fff;
  padding:16px; border-radius:14px; box-shadow: var(--shadow);
}

/* ここがポイント：カード内の写真は“通常フロー”にする */
.teacher-grid .teacher-photo{
  position: static !important;   /* ← 絶対配置を打ち消す */
  top:auto !important; left:auto !important; right:auto !important;

  flex:0 0 auto;
  width:132px; height:132px;     /* 見せるサイズ（好みで 120–160px） */
  border-radius:12px;
  object-fit:cover;
  background:#000;
  border:4px solid rgba(255,255,255,.14);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}
@media (min-width: 720px){
  .teacher-grid .teacher-photo{ width:148px; height:148px; }
}

.teacher-body{ flex:1 1 auto; min-width:0; }

.teacher-name{
  margin:0 0 4px; font-size:18px; font-weight:800; line-height:1.4;
}
.teacher-role{
  margin:15px 0 10px; font-size:14px; color:#e7eaee;
}

/* 本文は初期5行で折り畳み。expanded時に解除（JS対応済み） */
.teacher-message{
  margin:0;
  border-top:1px solid rgba(255,255,255,.28);
  margin-top:10px;      /* 役割との間 */
  padding-top:10px;     /* ラインから本文の余白 */
}
.teacher-message.clamp{
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.teacher-card.expanded .teacher-message{ -webkit-line-clamp:unset; display:block; }

/* ボタン */
.teacher-more{
  margin-top:10px; padding:6px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,.55); background:transparent; color:#fff; font-weight:700; cursor:pointer;
}
.teacher-more:hover{ background:rgba(255,255,255,.08); }

/* 念のため：カード内の .reveal-up に白色を継承させる */
.teacher-card .reveal-up{ color: inherit; }
/* ===== Teachers (stacked, photo on top) ===== */
#teachers .teacher-grid{
  display: grid;
  grid-template-columns: 1fr;   /* PCでも縦積み */
  gap: 20px;
}

#teachers .teacher-card{
  display: block !important;    /* どの既存指定より優先 */
  background: rgba(0,0,0,.68);
  color: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* 写真は“上・横幅いっぱい”に固定 */
/* 写真をやや小さく・上寄せでトリミング弱め */
#teachers .teacher-photo{
  aspect-ratio: 4 / 3;                 /* 正方形より背が低く、顔が切れにくい */
   max-height: clamp(120px, 24vw, 200px); /* もっと控えめ版 */
  width: auto;
  object-fit: cover;                    /* 画質優先で切るときは少しだけ */
  object-position: 50% 22%;             /* 顔が上に来やすい「上寄せ」 */
  display: block;
  margin: 0 auto 12px;
}


/* テキストは“下”にまとめる */
#teachers .teacher-body{
  padding: 16px 18px 20px;
}

#teachers .teacher-name{
  margin: 4px 0 2px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
}
#teachers .teacher-role{
  margin: 10px 0;
  font-size: 14px;
  color: #e7eaee;
  text-align: center;
}

/* 本文は最初だけ5行で省略、展開で全文表示 */
#teachers .teacher-message{
  margin: 0;
  line-height: 1.9;
  border-top: 1px solid rgba(255,255,255,.28);
  padding-top: 10px;
  color: #fff;
}
#teachers .teacher-message.clamp{
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#teachers .teacher-card.expanded .teacher-message{
  -webkit-line-clamp: unset;
  display: block;
}

/* ボタン */
#teachers .teacher-more{
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.55);
  background: transparent;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
#teachers .teacher-more:hover{
  background: rgba(255,255,255,.08);
}
/* PCでは常に全文表示＆ボタン非表示 */
#teachers .teacher-more{
  display:none;              /* 既定は非表示 */
  margin-top:10px;
  padding:10px 14px;
  font-weight:700;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.4);
  background:transparent;
  color:#fff;
  cursor:pointer;
}

/* スマホ時だけ：本文を行数でクランプ、溢れたらボタン表示 */
@media (max-width: 960px){
  #teachers .teacher-card .teacher-message{
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;   /* ← 表示行数。好みで 5～8 に調整 */
    overflow:hidden;
    position:relative;
  }
  /* 下端をふわっとさせる（任意） */
  #teachers .teacher-card .teacher-message::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:2.4em;
    background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.35));
    pointer-events:none;
  }

  /* 折りたたみ時のみ「続きを読む」を出すためのフラグ */
  #teachers .teacher-card.has-overflow .teacher-more{ display:inline-flex; }

  /* 展開中：行数制限解除＆フェード消す、ボタン文言はJSで切替 */
  #teachers .teacher-card.is-expanded .teacher-message{
    -webkit-line-clamp: unset;
  }
  #teachers .teacher-card.is-expanded .teacher-message::after{ content:none; }
}