/* トップページ ヒーロースライダー
   デザイン案（トップページ_デザイン案.html）のヒーローを、既存テーマと衝突しないよう
   sfh- 接頭辞で切り出したもの。装飾は講師紹介ページ準拠（白5px枠・角丸34px・青のハード影）。 */

.sfh{
  --sfh-blue:#0878b2; --sfh-sky:#5cb3e4; --sfh-coral:#ff6b5e; --sfh-yellow:#ffe600;
  background:#202020;color:#fff;position:relative;overflow:hidden;
  border-bottom:7px solid var(--sfh-yellow);
}
.sfh::before,.sfh::after{content:"";position:absolute;border-radius:50%;
  border:5px solid rgba(255,255,255,.28)}
.sfh::before{width:330px;height:330px;background:var(--sfh-blue);top:-150px;right:-90px}
.sfh::after{width:180px;height:180px;background:var(--sfh-coral);left:-90px;bottom:-55px}

.sfh-in{max-width:1640px;margin:0 auto;padding:38px 20px 56px;position:relative;z-index:1}

/* 1000px以上：左に動画、右に連動する文字 */
@media(min-width:1000px){
  .sfh-in{display:grid;grid-template-columns:minmax(0,1080px) minmax(300px,340px);
    gap:40px;justify-content:center;align-items:center;padding:56px 20px}
  .sfh-slider-wrap{grid-column:1}
  .sfh-caption{grid-column:2}
}
/* 1000px未満：水色丸が上に重なって文字が読めなくなるため外へ逃がす。
   下の余白はコーラル丸が概要とリンクに掛からない高さに取る */
@media(max-width:999px){
  .sfh::before{width:240px;height:240px;top:-186px;right:-70px}
  .sfh::after{width:170px;height:170px;left:-86px;bottom:-95px}
  .sfh-in{padding-top:54px;padding-bottom:100px}
}

.sfh-slider-wrap{position:relative}
.sfh-slider{position:relative;z-index:2;border-radius:34px;overflow:hidden;background:#111;
  border:5px solid #fff;box-shadow:16px 18px 0 0 var(--sfh-blue)}
@media(max-width:759px){
  .sfh-slider{border-radius:22px;border-width:4px;box-shadow:10px 11px 0 0 var(--sfh-blue)}
}
.sfh-track{position:relative;aspect-ratio:16/9}
.sfh-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.sfh-slide.is-on{opacity:1;pointer-events:auto}
.sfh-slide img{width:100%;height:100%;object-fit:cover;display:block}

.sfh-pr{position:absolute;top:11px;left:11px;z-index:4;background:rgba(0,0,0,.62);color:#fff;
  font-family:Inter,sans-serif;font-size:10px;font-weight:800;letter-spacing:.12em;
  padding:3px 8px;border-radius:99px}
.sfh-pr[hidden]{display:none}

.sfh-dots{position:absolute;left:0;right:0;bottom:10px;z-index:3;
  display:flex;justify-content:center;gap:7px}
.sfh-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background .15s,transform .15s}
.sfh-dots button[aria-current="true"]{background:var(--sfh-yellow);transform:scale(1.25)}

.sfh-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.42);color:#fff;display:grid;place-items:center}
.sfh-nav:hover{background:rgba(0,0,0,.72)}
.sfh-nav svg{width:14px;height:14px;fill:currentColor}
.sfh-nav.prev{left:9px} .sfh-nav.next{right:9px}

/* 表示中のスライドに合わせて差し替わる欄 */
.sfh-caption{transition:opacity .26s ease}
.sfh-caption[hidden]{display:none}
@media(max-width:999px){ .sfh-caption{margin-top:20px} }
.sfh-kind{font-family:Inter,sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.16em;
  color:var(--sfh-sky);margin:0 0 10px}
/* auto-phrase は日本語を文節で折る（非対応ブラウザでは従来どおりの折り返し） */
.sfh-title{font-size:23px;font-weight:900;line-height:1.5;letter-spacing:-.02em;
  color:#fff;margin:0 0 12px;word-break:auto-phrase}
.sfh-desc{font-size:15px;line-height:1.85;color:#c9d3de;margin:0 0 18px}
.sfh-desc:empty{display:none}
.sfh-link{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:800;
  color:var(--sfh-yellow);text-decoration:none}
.sfh-link:hover{text-decoration:underline}