@charset "UTF-8";

/* ==========================================================
   hero.css
   ----------------------------------------------------------
   ヒーロー共通スタイル
   - index.php（トップ）
   - about.php（サークル紹介）
   - 将来のLP / 固定ページ
   ========================================================== */

/* ===== Hero（スライダー） ===== */
.hero{
  padding:28px 16px;
  background: linear-gradient(180deg,#fff,#fff7f0);
}

.hero-viewport{
  position:relative;
  overflow:hidden;
}

/* 横スライド */
.hero-track{
  display:flex;
  transition: transform .5s ease;
  will-change: transform;
}

.hero-slide{ min-width:100%; }

/* 1枚の中身（テキスト＋画像） */
.hero-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}

.hero h1{
  font-size:28px;
  margin:4px 0 8px;
  line-height:1.2;
}

@media(min-width:720px){
  .hero h1{ font-size:36px; }
}
@media(min-width:900px){
  .hero-inner{ grid-template-columns:1.15fr .85fr; }
}

/* 画像枠 */
.hero-visual{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  height:280px;
  background:#000;
}
.hero-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* スライダーの左右ボタン */
.hero-ctrls{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.hero-btn{
  pointer-events:auto;
  margin:0 6px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.9);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ドット */
.hero-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:8px;
  display:flex;
  gap:6px;
  justify-content:center;
}
.hero-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background: rgba(0,0,0,.2);
}
.hero-dot.is-active{ background: rgba(0,0,0,.6); }