/* デジタルイメージの基本設定 */
body {
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, 'hare Tech Mono', monospace; */
    font-family: 'Orbitron', sans-serif; /* タイトルはSF感のあるフォント */
    background-color: #0d1117; /* 暗い背景 */
    color: #00ff66; /* 明るいシアン（デジタル感） */
    margin: 0;
    padding: 0;
    text-align: center;
}

header {
    padding: 30px 20px;
    background-color: #0f131a; /* ヘッダーの背景 */
    margin-bottom: 30px;
    border-bottom: 2px solid #00ff66;
}

h1 {
    font-size: 2.5em;
    letter-spacing: 5px; /* デジタルな文字間隔 */
    text-shadow: 0 0 10px rgba(0, 255, 34, 0.7); /* ネオン風の光 */
}

/* メンバーカードのレイアウト */
.member-grid {
    /* モノスペースフォントの例 */
.digital-code-style {
  /*
  ユーザーの環境にある一般的なモノスペースフォントを優先順位で指定。
  'monospace'は、どの環境にもある等幅フォントを指す一般的なフォントファミリー名。
  */
  font-family: 'Consolas', 'Monaco', 'Lucida Console', 'Courier New', monospace;
  font-size: 1.1em; /* 見やすいサイズに調整 */
  letter-spacing: 1px; /* 文字間隔を少し開けると、より機械的な印象に */
}
    
    display: flex;
    justify-content: center; /* 中央寄せを維持 */
    flex-wrap: wrap; 
    gap: 30px;
    padding: 20px;
    /* 2x2の配置を担保するための最大幅とマージン調整 */
    max-width: 700px; /* カード幅(280px) x 2 + ギャップ(30px) + 余白 ＝ 約700px */
    margin: 0 auto 40px; /* 中央揃えと下にマージン */
}

/* メンバーカードのデザイン */
.member-card {
    background-color: #161b22; /* カードの背景 */
    border: 1px solid #34455c; /* デジタルな境界線 */
    border-radius: 8px;
    padding: 20px;
    width: 280px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer; /* クリック可能であることを示す */
    position: relative;
    overflow: hidden;
}

/* ホバー時のデジタル効果 */
.member-card:hover {
    transform: translateY(-5px) scale(1.02); /* わずかに浮き上がる */
    background-color: #0d1117; /* 背景を少し明るく */
}

.member-name {
    color: #00ff66; /* 別の明るい色で強調 */
    margin-top: 0;
    border-bottom: 1px dashed #00ff66;
    padding-bottom: 10px;
}

.role {
    font-style: 'Orbitron';
    color: #00ff66;
    margin-bottom: 15px;
}

.bio {
    font-size: 0.95em;
    line-height: 1.6;
}

.click-info {
    display: block;
    margin-top: 15px;
    font-size: 0.8em;
    color: #00ff66; /* アクションを促す色 */
    font-weight: bold;
}


.section-title {
    color: #ffcc00; /* 顧問用の強調色 */
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.8em;
    letter-spacing: 2px;
}

.teacher-section {
    /* 大きめの枠にするために幅を広く設定 */
    width: 90%; 
    max-width: 800px; /* メンバーカードのグリッドより広く */
    margin: 20px auto 60px; /* 中央揃えと上下マージン */
    
    background-color: #213c58; /* メンバーとは異なる背景色 */
    border: 3px solid #ffcc00; /* ゴールド/オレンジ系の強調線 */
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.8); /* 強調色の光 */
    
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: left; /* テキストを左寄せに */
}

/* ホバー時の先生枠のデジタル効果 */
.teacher-section:hover {
    transform: translateY(-8px) scale(1.01); /* 大きく浮き上がる */
    box-shadow: 0 0 35px rgba(255, 204, 0, 1.2); /* さらに光を強める */
    background-color: #284768;
}

.teacher-name {
    font-size: 2em;
    color: #ffcc00;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #ffcc00;
    padding-bottom: 10px;
}

/* 先生の枠内のテキストは白系に */
.teacher-section .role,
.teacher-section .bio {
    color: #ffffff;
}

.teacher-section .click-info {
    color: #ff6666; /* アクションを促す色 */
}