@charset "UTF-8";

/* ==========================================
   1. 全体・リセット設定
   ========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f7f9fc;
}


/* ==========================================
   部活動セクション（実績・写真）
   ========================================== */
 
.club-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 15px;
}
.club-item {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.club-item img {
    width: 50%;
    height: 300px;
    object-fit: cover;
}
.club-text {
    padding: 15px;
}
.club-text h3 {
    font-size: 1rem;
    color: #2b6cb0;
    margin-bottom: 8px;
}
.club-text p {
    font-size: 0.9rem;
    margin-bottom: 0;
    color: #4a5568;
}

/* すべての画像をレスポンシブル（自動伸縮）縦横比同じ */

.image-container {
  width: 100%; /* 親要素の幅に合わせてレスポンシブ化 */
}

.image-container img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9; /* 例: 16:9の比率にする (正方形なら 1 / 1) */
  object-fit: cover; /* 画像が歪まないようにトリミングして収める */
}