@charset "UTF-8";

/* ==========================================================
   about.css
   ----------------------------------------------------------
   【対象ページ】
   - about.php（サークル紹介ページ）専用CSS
   - 他ページでは使わない前提のため、クラス名は短くてもOK
   - style.css（共通）を前提として上書き・拡張する役割
   ========================================================== */


/* ==========================================================
   リード文（ヒーロー直下の説明文）
   ----------------------------------------------------------
   about.php:
     <p class="lead">...</p>
   ========================================================== */
.lead {
  font-size: 18px;
  line-height: 1.8;
  color: var(--muted); /* style.css で定義された落ち着いた文字色 */
}


/* ==========================================================
   強み（features）
   ----------------------------------------------------------
   about.php:
     <div class="features">
       <div class="feature">...</div>
     </div>
   - スマホ：1列
   - PC：3列
   ========================================================== */
.features {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}

.feature h3 {
  margin: 0 0 6px;
}


/* ==========================================================
   KPI（※ 今回の about.php では未使用）
   ----------------------------------------------------------
   以前 or 将来用に用意されているブロック
   例：
     ・在籍人数
     ・年間企画数
   → 今は使っていなくても消さなくてOK
   ========================================================== */
.kpi {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 720px) {
  .kpi {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kpi .item {
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

.kpi .num {
  font-size: 22px;
  font-weight: 800;
}

.kpi .cap {
  font-size: 12px;
  color: var(--muted);
}


/* ==========================================================
   2カラム（安全への取り組み / リーダー紹介）
   ----------------------------------------------------------
   about.php:
     <section class="section container two">
   - スマホ：縦並び
   - PC：左1.4 / 右1 の2カラム
   ========================================================== */
.two {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .two {
    grid-template-columns: 1.4fr 1fr;
  }
}


/* ==========================================================
   リーダー紹介（アバター）
   ----------------------------------------------------------
   about.php:
     <div class="avatar">
       <img ...>
       <div>名前・説明</div>
     </div>
   ========================================================== */
.avatar {
  display: flex;
  gap: 12px;
  align-items: center;
}

.avatar img {
  width: 72px;
  height: 72px;
  border-radius: 999px; /* 完全な円 */
  object-fit: cover;
  border: 1px solid var(--border);
}


/* ==========================================================
   FAQ（※ 今回の about.php では未使用）
   ----------------------------------------------------------
   将来「よくある質問」を追加する場合に即使える
   ========================================================== */
.faq {
  display: grid;
  gap: 10px;
}

.qa {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}

.qa h3 {
  margin: 0 0 6px;
  font-size: 16px;
}


/* ==========================================================
   ギャラリー
   ----------------------------------------------------------
   about.php:
     <div class="gallery">
       <img ...>
     </div>
   - スマホ：2列
   - PC：4列
   ========================================================== */
.gallery {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gallery img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
}