/* =============================================================
   福井大学フィルハーモニー管弦楽団：共通CSS
   GitHubでの保存先：assets/css/style.css

   【探す順番】
   1 共通設定 → 2 基本設定 → 3 共通部品 → 4 ヘッダー
   → 5 ページ別 → 6 フッター → 7 スマートフォン向け

   【更新するとき】
   ・色や文字サイズは「1 共通設定」を変更する。
   ・文章や演奏会情報はHTMLや_data内で変更する。
   ・.名前はHTMLのclass、#名前はHTMLのidに対応する。
   ・marginは外側、paddingは内側の余白。pxは大きさの単位。
   ・var(--名前)は共通設定の値を読み込む。
   ・同じ対象では、指定が詳しい設定が優先される。
     指定の詳しさが同じなら、後に書いた設定が優先される。
   ・各ルールは、おおむね配置→大きさ→余白→文字→色・枠の順。
   ・同じ設定を末尾へ追加し続けず、既存の該当箇所を修正する。
   ・768pxのメニュー切り替え境界はassets/js/menu.jsとそろえる。
   ============================================================= */


/* ===== 1 共通設定：色5種類・文字サイズ4種類 ===== */
:root {
  /* 色：白い背景と薄い灰色の区切り線は、各箇所に固定値で書く。 */
  --color-main: #325675;        /* メインの青：見出し・ヘッダー・フッター */
  --color-accent: #cda04f;      /* 装飾の金：線・強調・暗い背景の見出し */
  --color-bg-page: #7793ab;     /* ページ外側の背景 */
  --color-text-body: #333333;   /* 本文の文字 */
  --color-link: #785916;        /* 白背景のリンク・小見出し用の濃い金 */

  /* 文字サイズ：場所ではなく役割で選ぶ。 */
  --fs-title: 28px;            /* ページ名 */
  --fs-heading: 22px;          /* ページ内の区分 */
  --fs-subtitle: 18px;         /* 演奏会名・記事名・項目名 */
  --fs-body: 16px;             /* 本文・メニュー・フッター */
}


/* ===== 2 基本設定：余白の初期化・本文・リンク ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: var(--fs-body);
  color: var(--color-text-body);
  background-color: var(--color-bg-page);
}

/* キーボードでリンクやボタンを選択したとき、選択位置を見えるようにする。 */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}


main {
  width: 80%;
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
  overflow-wrap: anywhere;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

main img {
  display: block;
  width: 90%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

main h2.heading {
  margin-bottom: 20px;
  padding-left: 10px;
  font-size: var(--fs-heading);
  color: var(--color-main);
  border-left: 3px solid var(--color-main);
}

main h3 {
  margin-bottom: 10px;
  font-size: var(--fs-subtitle);
  color: var(--color-link);
}

main p {
  margin-bottom: 20px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-body);
}

main a {
  text-decoration: underline;
  color: var(--color-link);
  transition: color 0.3s;
}

main a:hover {
  color: var(--color-main);
}



/* ===== 3 共通部品：タイトル・画像・演奏会表示 ===== */
/* ページ名：class="page-title"を使う。
   現在のHTMLでも動くよう、mainの最初のh2.headingも対象にする。 */

.page-title,
main > h2.heading:first-child {
  margin-bottom: 24px;
  padding-left: 0;
  font-size: var(--fs-title);
  color: var(--color-main);
  border-left: none;
}

/* 新しい区分・項目を追加する場合の共通クラス。既存のheadingも引き続き使える。 */

.section-title {
  margin-bottom: 20px;
  padding-left: 10px;
  font-size: var(--fs-heading);
  color: var(--color-main);
  border-left: 3px solid var(--color-main);
}

.item-title {
  margin-bottom: 10px;
  font-size: var(--fs-subtitle);
  color: var(--color-link);
}

/* 地図などの共通画像 */

.pic {
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
}

.pic img {
  display: block;
  width: 100%;
  height: auto;
}

/* HOMEと過去一覧で共用する演奏会1件の表示 */

.concert-entry {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #cccccc;
}

.concert-entry:last-of-type {
  border-bottom: none;
}

main .concert-flyer,
.card .concert-flyer {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 12px auto 20px;
}


/* ===== 4 ヘッダー・メニュー：_includes/header.html ===== */
header {
  width: 100%;
  padding: 20px 0;
  text-align: center;
  background-color: #ffffff;
}

header a {
  text-decoration: none;
  color: #000000;
}

header img {
  width: 80%;
  max-width: 600px;
  height: auto;
}

/* PCメニュー */

.pc_menu nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc_menu nav ul li {
  margin: 0 15px;
}

.pc_menu nav ul li a {
  display: inline-block;
  padding: 10px 15px;
  font-size: var(--fs-body);
  text-decoration: none;
  color: #000000;
  border-radius: 5px;
  transition: color 0.3s, background-color 0.3s;
}

.pc_menu nav ul li a:hover {
  color: var(--color-accent);
}

.pc_menu nav ul li.active a {
  color: #ffffff;
  background-color: var(--color-main);
}

/* スマートフォン用メニュー。開閉はmenu.js。 */

.mo_menu {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: none;
  align-items: center;
}

.mo_menu .btn {
  cursor: pointer;
  font: inherit;
  background-color: #ffffff;
  z-index: 1001;
  /* 開いたメニューより前面に置き、同じボタンで閉じられるようにする */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--color-main);
  position: relative;
}

.mo_menu .btn span {
  position: relative;
  display: block;
  width: 25px;
  height: 3px;
  margin: 4px 0;
  background-color: var(--color-main);
}

.mo_menu .btn span::before,
.mo_menu .btn span::after {
  position: absolute;
  left: 0;
  width: 25px;
  height: 3px;
  background-color: var(--color-main);
  content: "";
  transition: transform 0.3s ease;
}

.mo_menu .btn span::before {
  top: -8px;
}

.mo_menu .btn span::after {
  top: 8px;
}

/* ドロワーメニュー */

#mo-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  display: none;
  width: min(320px, 85vw);
  height: 100%;
  padding-top: 80px;
  background-color: #ffffff;
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

#mo-nav ul {
  list-style: none;
}

#mo-nav ul li {
  text-align: center;
  border-bottom: 1px solid #cccccc;
}

#mo-nav ul li a {
  display: block;
  width: 100%;
  padding: 20px;
  font-size: var(--fs-body);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #000;
  overflow: hidden;
}

#mo-nav ul li a:hover {
  background-color: var(--color-accent);
}

#mo-nav ul li.active a {
  color: #ffffff;
  background-color: var(--color-bg-page);
}


/* ===== 5 ページ別：HOME → 団紹介 → 新歓 → 過去一覧 → ニュース ===== */
/* HOME：団紹介の帯 */

.top-overview {
  width: 100%;
  padding: 28px 40px;
  text-align: center;
  background-color: var(--color-main);
}

.top-overview h3 {
  margin-bottom: 10px;
  font-size: var(--fs-subtitle);
  color: var(--color-accent);
}

.top-overview p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: #ffffff;
}

.top-overview img {
  display: block;
  width: 90%;
  max-width: 800px;
  height: auto;
  margin: 20px auto 0;
}

/* HOME：開催予定の演奏会とご支援のカード */

/* カードを最低300px程度で並べ、収まらなければ自動で次の行へ。
   狭い画面では画面幅を優先し、横にはみ出さないようにする。 */

.top-bg {
  padding: 40px 20px;
  background-color: var(--color-bg-page);
}

.top-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.card {
  min-width: 0;
  padding: 24px;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  background-color: #ffffff;
  border-radius: 16px;
}

.card h2.heading {
  margin-bottom: 16px;
  padding-left: 10px;
  font-size: var(--fs-heading);
  color: var(--color-main);
  border-left: 3px solid var(--color-main);
}

.card h3 {
  margin-bottom: 10px;
  font-size: var(--fs-subtitle);
  color: var(--color-link);
}

.card p {
  margin-bottom: 12px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-body);
}

.card a {
  text-decoration: underline;
  color: var(--color-link);
  transition: color 0.3s;
}

.card a:hover {
  color: var(--color-main);
}

/* 団紹介：年間の活動。月と説明の間隔はgapで調整。 */

.timeline {
  margin: 24px 0 40px;
  padding-left: 24px;
  border-left: 3px solid #cccccc;
}

.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

/* タイムラインの点 */

.timeline-item::before {
  position: absolute;
  top: 6px;
  left: -31px;
  width: 12px;
  height: 12px;
  background-color: #cccccc;
  border: 2px solid #ffffff;
  border-radius: 50%;
  content: "";
}

.timeline-item.highlight::before {
  top: 4px;
  left: -33px;
  width: 16px;
  height: 16px;
  background-color: var(--color-accent);
}

.timeline-month {
  min-width: 48px;
  padding-top: 2px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-text-body);
}

.timeline-month.accent {
  font-weight: bold;
  color: var(--color-accent);
}

.timeline-month.main {
  font-weight: bold;
  color: var(--color-main);
}

.timeline-content h3 {
  margin-bottom: 4px;
  font-size: var(--fs-subtitle);
  color: var(--color-main);
}

.timeline-content p {
  margin-bottom: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-body);
}

/* 団紹介：一日の活動。各段階の枠と番号。 */

.daily-flow {
  margin: 24px 0;
}

.flow-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 12px;
}

.flow-step.highlight {
  border-width: 2px;
  border-color: var(--color-main);
}

.flow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  font-size: var(--fs-body);
  font-weight: bold;
  color: var(--color-text-body);
  background-color: #cccccc;
  border-radius: 50%;
  flex-shrink: 0;
}

.flow-icon.main {
  color: #ffffff;
  background-color: var(--color-main);
}

.flow-body h3 {
  margin-bottom: 4px;
  font-size: var(--fs-subtitle);
  color: var(--color-main);
}

.flow-body p {
  margin-bottom: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-body);
}

.flow-arrow {
  margin: 4px 0;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  color: var(--color-accent);
}

/* 新歓：よくある質問。質問と回答の見た目。 */

.faq {
  margin-bottom: 24px;
  padding-left: 12px;
  border-left: 3px solid var(--color-accent);
}

.faq .faq-q {
  margin-bottom: 4px;
  font-size: var(--fs-subtitle);
  font-weight: bold;
  color: var(--color-main);
}

.faq .faq-a {
  margin-bottom: 0;
  color: var(--color-text-body);
}

/* 過去一覧：演奏会の見た目は「3 共通部品」で共用。 */

/* ニュース：記事同士の区切りと画像の最大幅。 */

.news-entry {
  padding: 24px 0;
  overflow-wrap: anywhere;
  border-top: 1px solid #cccccc;
}

.news-entry .pic img {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
}


/* ===== 6 フッター：_includes/footer.html ===== */
footer {
  width: 100%;
  color: #ffffff;
  background-color: var(--color-main);
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px;
}

.footer-item {
  min-width: 160px;
  padding: 8px 0;
}

.footer-item h4 {
  margin-bottom: 8px;
  padding-bottom: 4px;
  font-size: var(--fs-body);
  font-weight: bold;
  color: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}

.footer-item p {
  margin-bottom: 4px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
}

.footer-item a {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-body);
  text-decoration: none;
  color: rgba(255,255,255,0.85);
  transition: color 0.2s;
}

.footer-item a:hover {
  color: var(--color-accent);
}

.footer-item img {
  display: block;
  width: 140px;
  height: auto;
  margin-bottom: 8px;
}

/* メールアドレスは文章中に置く。他の案内リンクは縦並びのまま。 */

.footer-item p a {
  display: inline;
  overflow-wrap: anywhere;
}


/* ===== 7 スマートフォン向け：画面幅が小さい場合だけ変更 ===== */
/* 768px以下：PCメニューからスマートフォン用メニューに切り替える。 */

@media (max-width: 768px) {
  .mo_menu {
    display: block;
  }

  .pc_menu {
    display: none;
  }

  main {
    width: 90%;
  }

  /* ロゴと右上のメニューボタンが重ならないよう右側に余白を確保 */

  header {
    padding: 12px 72px 12px 12px;
  }

  header img {
    width: 100%;
    max-width: 100%;
  }
}

/* 600px以下：カードを1列、フッターと画像を縦並びにする。 */

@media (max-width: 600px) {
  .top-cards {
    grid-template-columns: 1fr;
  }

  .footer-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  main img {
    width: 100%;
    margin: 0;
    object-fit: contain;
  }
}