/* =========================================
   1. 基本設定（全体）
   ========================================= */
body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.6;
  background-color: #f9f9f9;
  /* 基本は真ん中寄せ。ヘッダーで上書きします */
  text-align: center; 
}

/* メインコンテンツの幅を制限して中央に置く */
main {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* セクションごとの区切り */
section {
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

/* 見出しも中央揃え */
h2 {
  display: block;
  text-align: center;
  margin-top: 30px;
}

/* =========================================
   2. ヘッダー（左右分かれ・スリム維持）
   ========================================= */
.main-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(10, 25, 47, 0.9); /* 深い紺・透け感 */
  backdrop-filter: blur(10px);
  width: 100%;
  text-align: left; /* ヘッダー内の基本文字位置をリセット */
}

.header-content {
  display: flex;
  justify-content: space-between; /* 左右に分ける */
  align-items: center;
  padding: 15px 10px; /* スリムな厚み */
  max-width: 100%; /* ヘッダーが広がりすぎないように */
  margin: 0 auto;    /* ヘッダー自体を中央に */
}

.header-content a {
  color: #fff;
  text-decoration: none;
}

h1 {
  margin: 0;
  font-size: 1.3rem;
}

/* ボタンの並び */
.nav-buttons {
  display: flex;
  gap: 15px;
}

/* ボタンの中の余白調整 */
h1 span,
.blog-button span {
  display: inline-block;
  padding: 2px 8px;
}

/* =========================================
   3. 予定表（スプレッドシート）
   ========================================= */
.sheet-container {
  width: 100%;
  margin: 20px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sheet-container iframe {
  width: 95%; /* 画面端にピッタリすぎないように調整 */
  height: 550px;
  border: 2px solid #0a192f;
  border-radius: 8px;
}

/* カウントダウンの見た目 */
.test-counter {
  background-color: #fff;
  border: 2px solid #0a192f;
  border-radius: 15px;
  padding: 20px;
  margin: 20px auto;
  max-width: 400px; /* あまり横に広がりすぎないように */
}

#test-countdown {
  font-size: 1.2rem;
  font-weight: bold;
}

/* <span>で囲んだ数字部分を赤く大きく */
#test-countdown span {
  color: #ff3333;
  font-size: 2.5rem;
  margin: 0 5px;
  font-family: 'Arial', sans-serif;
}

/* 共有ファイルボタン（スプレッドシート風の緑） */
.open-sheet-btn {
  display: block;
  background-color: #217346;
  color: white !important;
  text-decoration: none;
  padding: 12px;
  border-radius: 8px;
  margin: 10px auto;
  max-width: 300px;
  font-weight: bold;
}

/* 音源ボタンの基本スタイル */
.music-btn {
  display: block;
  color: white !important;
  text-decoration: none;
  padding: 15px;
  border-radius: 8px;
  margin: 8px;
  font-weight: bold;
  transition: transform 0.2s; /* 押した感を出す */
}

.music-btn:active {
  transform: scale(0.95);
}

/* パート別の色分け */
.soprano { background-color: #ff6b6b; } /* 赤系 */
.alto    { background-color: #feca57; } /* 黄系 */
.tenor   { background-color: #48dbfb; } /* 青系 */
.piano   { background-color: #54a0ff; } /* 濃い青 */

/* ボタンを横並び（スマホでは縦）にする設定 */
.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
}

/* 音源ボタンを並べる（横並び＆スマホ対応） */
.music-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列で並べる */
  gap: 15px;
  max-width: 500px;
  margin: 20px auto;
}

/* パート別ボタンのデザイン */
.music-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px; /* 少し高さを出すと押しやすい */
  color: white !important;
  text-decoration: none;
  font-weight: bold;
  border-radius: 12px;
  font-size: 1.1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 各パートのカラー（2-3のイメージで！） */
.soprano { background: #ff7675; }
.alto    { background: #fab1a0; }
.tenor   { background: #74b9ff; }
.piano   { background: #a29bfe; }

/* 共有ファイル用（緑） */
.open-sheet-btn {
  display: block;
  background-color: #27ae60;
  color: white !important;
  text-decoration: none;
  padding: 15px;
  border-radius: 8px;
  margin: 10px auto;
  max-width: 400px;
}

/* 区切り線 */
hr {
  border: 0;
  height: 1px;
  background: #ccc;
  margin: 40px 0;
}

/* 秘密エリアを少し暗くして「特別感」を出す */
.admin-only {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 15px;
  border: 1px dashed #999;
}

#pass-input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 150px;
}

.login-btn {
  padding: 10px 15px;
  background-color: #0a192f;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* アニメーションの定義 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* mainタグの中身にアニメーションを適用 */
main {
  animation: fadeInUp 0.8s ease-out;
}

/* セクションごとに少し遅れて出すとかっこいい */
section {
  animation: fadeInUp 1s ease-out;
}

/* 音源ボタンとファイルボタンに共通の設定 */
.music-btn, .open-sheet-btn, .login-btn {
  transition: all 0.3s ease; /* 変化を滑らかにする */
}

/* マウスを置いた時（ホバー） */
.music-btn:hover, .open-sheet-btn:hover {
  transform: translateY(-5px); /* 5px上に浮く */
  box-shadow: 0 8px 15px rgba(0,0,0,0.2); /* 影を強くする */
  filter: brightness(1.1); /* 少し明るくする */
}

/* クリックした瞬間 */
.music-btn:active, .open-sheet-btn:active {
  transform: translateY(0); /* 戻る */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.main-header h1 span {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* タイトルに触ると少し大きくなる */
.main-header h1:hover span {
  transform: scale(1.1) rotate(-2deg);
  color: #ffeb3b; /* 星っぽく黄色く光る */
}

/* ブログ全体の枠組み */
.blog-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 20px;
}

/* 記事1つ分の箱 */
.blog-post {
  background: white;
  padding: 20px;
  border-radius: 15px;
  text-align: left; /* 記事の中身は左寄せが見やすい */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border: 1px solid #eee;
  transition: transform 0.3s ease;
}

.blog-post:hover {
  transform: scale(1.02); /* 触ると少し大きくなる */
}

/* 日付のデザイン */
.post-date {
  font-size: 0.9rem;
  color: #888;
  font-weight: bold;
}

/* ブログ内の見出し */
.blog-post h3 {
  margin: 10px 0;
  color: #0a192f;
  border-left: 5px solid #0a192f; /* 左側にアクセントの棒 */
  padding-left: 10px;
}

/* ブログ内の写真 */
.blog-post img {
  width: 100%;
  max-height: 300px;
  object-fit: cover; /* 画像を枠に収める */
  border-radius: 10px;
  margin-top: 15px;
}

/* トップ画像を横いっぱいに広げる設定 */
.top-image {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  
  /* これ！見えない文字の行間をゼロにする */
  line-height: 0; 
  font-size: 0;
}

.top-image img {
  width: 100%;        /* 枠いっぱいに広げる */
  height: 350px;      /* スマホならこれくらいがちょうどいい（好みで変えてOK） */
  object-fit: cover;  /* 画面いっぱいに広げつつ、いい感じに切り抜く */
  display: block;
}