@charset "UTF-8";

/* ==========================================
   1. DESIGN VARIABLES & RESET
   ========================================== */
:root {
  --bg-beige: #eee5da;
  --bg-card-beige: #f4eee2;
  --bg-dark: #1c1715;
  --text-main: #231f20;
  --text-sub: #726658;
  --text-gold-title: #b37926;
  --text-gold: #b38b4d;
  --text-gold02: #cab388;
  --text-white: #ffffff;
  --text-navy: #162144;
  
  --border-line: #d3c7b3;

  /* フォント定義：和文はすべて游明朝体へ統合 */
  --font-serif: "yu-mincho-pr6n", "YuMincho", serif;
  --font-sans: "yu-mincho-pr6n", "YuMincho", serif;
  --font-en: "kepler-std-condensed-display", serif;
  --font-script: "allura", cursive;
}

html, body.symphony-page {
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--bg-beige) !important;
  color: var(--text-main) !important;
  font-family: var(--font-serif) !important;
  -webkit-font-smoothing: antialiased;
}

.symphony-page * {
  box-sizing: border-box !important;
  font-family: var(--font-serif);
}

/* 筆記体指定クラス */
.font-script {
  font-family: var(--font-script), cursive !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* 英文フォント一括指定 */
.hero-main,
.hero-sub,
.head-en,
.choir-title-en,
.side-head-en,
.notes-head-en,
.dark-head-en,
.v-en,
.p-name-en,
.a-part,
.btn-buy-ticket,
.d-date {
  font-family: var(--font-en) !important;
}

/* 和文・補足情報の明朝体強制指定 */
.p-title,
.card-address,
.head-jp,
.a-info,
.a-name,
.choir-title-jp,
.choir-desc,
.notes-title-jp,
.notes-desc,
.d-title,
.symphony-footer {
  font-family: var(--font-serif) !important;
}

.site-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  background-color: var(--bg-beige);
}

section{
	margin:0;
}

p {
  color: inherit;
}

/* ==========================================
   2. HERO SECTION（PC/SP共通の土台のみ。
      PC配置の最終値は本ファイル末尾の
      「HERO — desktop, single source of truth」
      ブロックに一本化してあります）
   ========================================== */
.hero-section {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  height: 100vh;
  overflow: hidden;
}

.hero-bg-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.hero-overlay {
  position: absolute;
  inset: 0;
}

/* テキスト群：幅に応じて位置も可変に */
.hero-title-wrap {
  position: absolute;
  top: 18%;              /* ← ここを頭頂部に合う値に調整 */
  left: clamp(20vw, 4vw, 30%);
  transform: none;        /* translateY(-50%) を削除 */
  z-index: 10;
  text-align: left;
  max-width: 46vw;
}

/* 和文タイトル：福島章恭の / 第九 */
.hero-main {
  font-size: clamp(3.12rem, 6vw, 5.62rem) !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em;
  color: var(--text-main) !important;
  font-family: "Yu Mincho Pr6N", "YuMincho Pr6N", "Yu Mincho", "YuMincho", serif !important;
  white-space: nowrap;
}

/* 「第九」を金色・改行して一回り大きく */
.hero-main .hero-main-line2 {
  display: block;
  color: var(--text-gold) !important;
  font-size: 1.35em;
  letter-spacing: 0.12em;
  margin-top: 0.15em;
  margin-left: 0.6em;
  text-align: right;
}

/* 英文シリーズ名 */
.hero-series {
  font-feature-settings: "ss01" 1;
  font-variant-ligatures: none;
  font-kerning: normal;
  font-family: "kepler-std-display", serif;
  font-weight: 500 !important;
  font-optical-sizing: auto;
  text-transform: none !important;
  font-size: clamp(1.92rem, 3.6vw, 3.43rem) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.01em;
  color: var(--text-gold) !important;
  margin: 1.8em 0 0.4em 0 !important;
}

.hero-series .hs-line2 {
  display: block;
  font-family: "kepler-std-display" !important;
}

/* 日時・会場情報 */
.hero-info {
  color: var(--text-main);
}

.hero-date {
  font-size: clamp(1.14rem, 1.92vw, 1.87rem) !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
  margin: 0 0 0.2em 0 !important;
  letter-spacing: 0.02em;
  color: var(--text-main) !important;
  white-space: nowrap;
}

.hero-place {
  font-size: clamp(1.14rem, 1.92vw, 1.87rem) !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  letter-spacing: 0.02em;
  color: var(--text-main) !important;
  white-space: nowrap;
}

/* PCの日時はSP用改行を無効化 */
/* .br-sp-hero {
  display: none;
} */
/* --- スマホ表示時 (768px以下) --- */
@media screen and (max-width: 768px) {
  .hero-section {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .hero-bg-wrap {
    min-height: 0;
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
  }

  .hero-bg {
    height: 100%;
    min-height: 0;
    object-position: 30% 25%;
    transform: scale(1.3);
    transform-origin: 100% 100%;
  }

  /* テキスト群：上から自然に縦積み（均等配置はしない） */
  .hero-title-wrap {
    top: 15% !important;
    left: 3% !important;
    transform: none !important;
    width: 58%;
    height: auto;               /* 高さ100%をやめる */
    padding: 0;
    display: block;             /* flexをやめて通常フロー */
    box-sizing: border-box;
    text-align: left;
  }

  /* 和文タイトル */
  .hero-main {
    font-size: 11vw !important;
    margin: 0 !important;
	letter-spacing:0.1em;
    line-height: 1.2 !important;
    white-space: nowrap;        /* 「福島章恭の」を1行に */
  }

  .hero-main .hero-main-line2 {
    font-size: 1.3em;
    margin-left: 0;
	margin-top: 0;
    text-align: left !important;
  }

  /* シリーズ名（タイトルとの間に案のようなゆとり） */
  .hero-series {
    font-size: 5.5vw !important;
    line-height: 1.1 !important;
    margin: 2em 0 0 0 !important;
  }

  /* 日時・会場（シリーズ名の下にひとまとまり） */
  .hero-info {
    margin-top: 1em;
  }

  .hero-date {
    font-size: 3.8vw !important;
    line-height: 1.3 !important;
  }
/* 日時の改行をSPだけ有効化 */
/*  .br-sp-hero {
    display: inline !important;
  } */
  .hero-place {
    font-size: 3.8vw !important;
    line-height: 1.55 !important;
    white-space: nowrap;
  }
}
/* ==========================================
   3. STATEMENT (構造分離版)
   ========================================== */
.sec-statement {
  padding: 80px 4% 100px;
}

/* 全体の外枠：ここは通常のブロック要素（縦並び）に戻す */
.statement-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: block !important; /* 親要素の横並び設定を強制解除 */
}

/* ------------------------------------------
   ① キャッチコピーエリア（全幅・カラム外）
   ------------------------------------------ */
.statement-header-wrap {
  width: 100% !important;
  margin-bottom: 50px !important;
  display: block !important;
}

.copy-heading {
  width: 100% !important;
  font-size: clamp(2rem, 3.2vw, 2.7rem) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--text-main);
  letter-spacing: 0.05em;
  margin: 0 !important;
  text-align: left;
}

/* ------------------------------------------
   ② 下部 2カラムエリア（本文 ＆ 指揮者）
   ------------------------------------------ */
.statement-content-wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 60px !important;
  width: 100% !important;
}

/* 左カラム：本文 */
.statement-body {
  flex: 1 !important;
  min-width: 0 !important; /* フレックスアイテムの突き抜け防止 */
}

.copy-paragraphs p {
  font-size: 1rem !important;
  font-weight: 600;
  line-height: 1.8 !important;
  margin-bottom: 25px !important;
  color: var(--text-main);
  letter-spacing: 0.03em;
}

.copy-paragraphs .p-strong {
  font-weight: 700 !important;
  margin-top: 35px !important;
}

/* 右カラム：指揮者プロフィール */
.statement-profile {
  width: 200px !important;
  flex-shrink: 0 !important;
  text-align: center;
  margin-top: 35%;
}

.profile-thumb {
  width: 200px;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 0 !important; /* テーマ側の角丸をリセット */
}

.profile-thumb img {
  width: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  border-radius: 0 !important; /* テーマ側の角丸をリセット */
}

.profile-meta {
  text-align: left;
}

.p-title {
  display: block;
  font-size: 1rem;
  font-weight:600;
  line-height:1.5;
}

.p-name-jp {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin:  0 !important;
  letter-spacing: 0.05em;
}

.p-name-en {
  font-size: 1rem;
  color: var(--text-gold);
  letter-spacing: 0.1em;
  display: block;
}

/* スマホ対応 */
.br-sp {
  display: none;
}

@media (max-width: 768px) {
    .copy-heading {
    font-size: 5.6vw !important;
    text-align: center !important;
    white-space: nowrap !important;   /* <br>以外の勝手な改行を防ぐ */
  }
  .statement-content-wrap {
    flex-direction: column !important;
    gap: 40px !important;
  }
  .statement-profile {
    width: 100% !important;
    margin-top: 20px !important;

  }
  /* profile-metaのSP用中央寄せ設定 */
  .profile-meta {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* 子要素やテキストも確実に中央揃えにする場合 */
  .profile-meta * {
    text-align: center !important;
  }
}
/* ==========================================
   14. STATEMENT PROFILE 配置調整
   ボックスは右寄せ／中のテキストは左寄せ
   ========================================== */

/* --- PC：フレックス内で右端に寄せる --- */
.statement-profile {
  margin-left: auto !important;   /* フレックスアイテムを右端へ */
  margin-right: 0 !important;
  text-align: left !important;
}
.profile-meta {
  text-align: left !important;
}

/* --- SP：縦積み時、ボックスを右寄せ・中身は左寄せ --- */
@media (max-width: 768px) {
  /* 親を縦積みしつつ、右端揃えにする */
  .statement-content-wrap {
    align-items: flex-end !important;
  }

  .statement-profile {
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;   /* 右寄せ */
    margin-right: 0 !important;
    margin-top: 0 !important;
    text-align: left !important;
    align-self: flex-end !important;
  }

  /* 12番の中央寄せ指定を上書きして左寄せに戻す */
  .profile-meta {
    text-align: left !important;
    display: block !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .profile-meta * {
    text-align: left !important;
  }
}
/* ==========================================
   4. TICKET HERO CARD
   ========================================== */
.sec-ticket-hero {
  padding: 0 4% 90px;
  margin-bottom:90px;
}

.ticket-card {
  position: relative;
  background-color: #ffffff;
  padding: 60px 40px;
  text-align: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 5px 25px rgba(0,0,0,0.03);
  color: var(--text-main) !important;
}

.ticket-card * {
  color: var(--text-main);
}

.card-frame-tl {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 80px;
  height: 80px;
  border-top: 1px solid var(--text-gold);
  border-left: 1px solid var(--text-gold);
}

.card-frame-tl::after {
  content: "";
  position: absolute;
  top: 6px;
  left: -6px;
  width: 80px;
  height: 80px;
  border-top: 1px solid var(--text-gold);
  border-left: 1px solid var(--text-gold);
}

.card-frame-br {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 80px;
  height: 80px;
  border-bottom: 1px solid var(--text-gold);
  border-right: 1px solid var(--text-gold);
}

.card-frame-br::after {
  content: "";
  position: absolute;
  bottom: 6px;
  right: -6px;
  width: 80px;
  height: 80px;
  border-bottom: 1px solid var(--text-gold);
  border-right: 1px solid var(--text-gold);
}

.card-title {
  font-size: 2.7rem !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  color: var(--text-main) !important;
  line-height: 1.3 !important;
}

.card-date {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  color: var(--text-main) !important;
}

.card-place {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--text-main) !important;
}

.card-address {
  font-size: 0.82rem !important;
  color: var(--text-main) !important;
  margin-top: 4px !important;
}

.card-btn-wrap {
  margin-top: 35px;
}

.btn-buy-ticket {
  display: inline-block;
  line-height: 0;
  text-decoration: none !important;
  transition: opacity 0.3s;
}
 
.btn-buy-ticket img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}
 
.btn-buy-ticket:hover {
  opacity: 0.9;
}

/* スマホ表示（768px以下）の TICKET HERO CARD 調整 */
@media screen and (max-width: 768px) {
  .sec-ticket-hero {
    padding: 0 4% 40px;
  }
  
  .ticket-card {
    width: 100%;
  }

  .card-frame-tl {
    width: 45px;
    height: 45px;
    top: 15px;
    left: 15px;
  }

  .card-frame-br {
    width: 45px;
    height: 45px;
    bottom: 15px;
    right: 15px;
  }

  .card-frame-tl::after,
  .card-frame-br::after {
    width: 45px;
    height: 45px;
  }

  .card-title {
    font-size: 1.76rem !important;   /* 元2.2remから2割減 */
    margin: 6px 0 18px 0 !important; /* 縦余白を詰める */
  }

  .card-date {
    font-size: 1.2rem !important;
    margin-bottom: 14px !important;  /* 詰める */
  }

  .card-place {
    font-size: 1rem !important;
  }

  .card-address {
    font-size: 0.9rem !important;
  }

  .card-btn-wrap {
    margin-top: 34px;                /* 詰める */
  }

  .btn-buy-ticket img {
    max-width: 280px;
  }
}

/* ==========================================
   共通タイトル構造 (Meet the Artists, Join the Choir, Conductor's Notes)
   ========================================== */
.head-title-block {
  position: relative;
  width: 320px;
  flex-shrink: 0;
  margin-top: 25px; /* 上部への飛び出しを確保 */
}

/* 筆記体（全タイトル共通） */
.head-title-block .head-script {
  font-size: 5.2rem !important;
  color: var(--text-gold02) !important;
  position: absolute !important;
  top: -42px !important;
  left: -50px !important;
  transform: rotate(-12deg) !important;
  z-index: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  line-height: 1 !important;
}

/* メイン英文（全タイトル共通） */
.head-title-block .head-en {
  font-size: 7rem !important;
  font-weight: 400 !important;
  margin: 0 0 0 35px !important;
  letter-spacing: 0.02em !important;
  position: relative !important;
  z-index: 2 !important;
  line-height: 1 !important;
  text-align: left !important;
}

/* ==========================================
   5. MEET THE ARTISTS
   ========================================== */
.sec-artists {
  padding: 60px 4% 90px;
  max-width: 1000px;
  margin: 0 auto;
}

.sec-head-center {
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sec-head-center .head-title-block {
  margin-left: auto;
  margin-right: auto;
}

.head-jp {
  font-size: 1.3rem;
  color: var(--text-main);
  display: block;
  margin-top: 15px;
  text-align: center;
  letter-spacing: 0.15em;
  font-weight: 600;
}

.artists-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.artists-grid .artist-card:nth-child(2),
.artists-grid .artist-card:nth-child(4) {
  transform: translateY(5%);
}

.a-photo {
  width: 100%;
  aspect-ratio: 3 / 3.8;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 10px 10px 0px rgba(202, 179, 136, 1);
}

.a-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.a-info {
  text-align: center;
  font-size: 1.3rem !important;
  margin: 0 !important;
}

.a-part {
  margin-right: 8px;
  font-size:2rem;
  font-weight: 600;
}

.a-name {
  font-weight: 600;
}

/* 出演者：Profileリンク（歌手名の下） */
.a-profile {
  display: inline-block;
  margin-top: 5px;
  font-size: 1.2rem;
  color: var(--text-gold) !important;
  text-decoration: none !important;
  border-bottom: 3px solid var(--text-gold);
  padding:0 1rem 2px 1rem;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
}

.a-profile:hover {
  opacity: 0.7;
}

.artist-card {
  text-align: center;
  margin-bottom:2rem;
}
.orchestra-info{
  margin-top: 40px;	
}
.orchestra-info p {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 2;
}

/* 飾り（lace画像） */
.ornament-icon {
  text-align: center;
  margin: 2rem auto 1rem auto;
}

.ornament-icon img {
  display: inline-block;
  width: 100px;
  height: auto;
}

/* Meet the Artists 専用のタイトル中央揃え調整 */
.sec-artists .head-title-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.sec-artists .head-title-block .head-script {
  left: 50% !important;
  transform: translateX(-50%) translateX(-50px) rotate(-12deg) !important;
}

.sec-artists .head-title-block .head-en {
  margin-left: 0 !important;
  text-align: center !important;
}

/* --- Artists 余白調整 --- */
/* 「Artists」と「出演者」の間を半分に（元 margin-top:15px → 7px） */
.sec-artists .head-jp {
  margin-top: 7px !important;
}
/* 「出演者」と「飾り」の間を半分に（元 上 2rem → 1rem） */
/* 「飾り」と写真の間を1.5倍に（元 下 1rem → 1.5rem） */
.sec-artists .sec-head-center .ornament-icon {
  margin: 1rem auto 1.5rem auto !important;
}
.sec-partners {
  padding: 20px 4% 90px;
  max-width: 1000px;
  margin: 0 auto;
}

.sec-partners .head-title-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 0 !important;
}

.sec-partners .head-title-block .head-en {
  margin-left: 0 !important;
  text-align: center !important;
  font-size: 7rem !important;
}

.partners-box {
  border: 2px solid #cab388;
  width: 700px;
  margin: 20px auto 0;   /* 「協力」との間を半分に（元40px） */
  padding: 40px 20px;
  text-align: center;
}

/* 「Partners」と「協力」の間を半分に（Artistsと同サイズ） */
.sec-partners .head-jp {
  margin-top: 7px !important;
}

.partner-name {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  line-height: 2 !important;
  margin: 0 !important;
  color: var(--text-main);
  letter-spacing: 0.05em;
}

/* ==========================================
   6. JOIN THE CHOIR
   ========================================== */
.sec-choir {
  padding: 60px 4% 120px;
  max-width: 1000px;
  margin: 0 auto;
}

.choir-top-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 50px;
}

.choir-lead {
  flex: 1;
  max-width: 550px;
}

.choir-title-jp {
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  margin: 0 0 27px !important;   /* 下の文との間を1.5倍に（元18px） */
}

.choir-desc {
  font-size: 0.9rem !important;
  line-height: 1.9 !important;
  margin: 0 0 20px !important;
}

/* Choir：View Detailsボタン */
.choir-btn-wrap {
  margin-top: 30px;
  max-width: fit-content;
}

.btn-view-details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 5px 60px;
  border-top: 2px solid var(--text-navy);
  border-bottom: 2px solid var(--text-navy);
  font-family: "kepler-std-display", serif !important;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-navy) !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
  width:fit-content;
}

.btn-view-details:hover {
  opacity: 0.8;
}

.btn-view-details .btn-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-image: url("img/symphony_no9/black_arrow_01.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 会場カードグリッド（PC: 横3列） */
.venue-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; 
  gap: 20px !important;
}

.venue-card {
  background-color: var(--bg-card-beige) !important;
  padding: 25px 20px 20px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.v-city {
  font-size: 1.95rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.v-en {
  font-size: 1rem;
  line-height:1.2;
  font-weight:900;
  color: var(--text-gold);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 15px;
}

.v-hall {
  font-size: 0.85rem !important;
  margin-bottom: 30px !important;
}

.v-link {
  font-size: 0.8rem;
  color: var(--text-gold) !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--text-gold);
  padding-bottom: 2px;
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}

/* 会場カード：View more矢印画像 */
.v-link-arrow {
  display: inline-block;
  width: 16px;
  height: 10px;
  background-image: url("img/symphony_no9/gold_arrow_02.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* PCのときだけ .v-link を右下に揃える */
@media screen and (min-width: 769px) {
  .venue-card {
    display: flex !important;
    flex-direction: column !important;
  }

  .v-link {
    float: none !important;      /* float解除 */
    margin-top: auto !important; /* 下端へ押し出す */
    align-self: flex-end !important; /* 右寄せ */
  }
}
/* ==========================================
   8. CONDUCTOR'S NOTES
   ========================================== */
.sec-notes {
  padding: 60px 4% 90px;
  max-width: 1000px;
  margin: 0 auto;
}

.notes-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 50px;
}

.notes-left {
  width: 320px;
  flex-shrink: 0;
}

.notes-right {
  flex: 1;
  min-width: 0;
}

.notes-title-jp {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0 0 16px 0 !important;
  color: var(--text-main);
  letter-spacing: 0.05em;
  text-align: center !important;   /* 中央揃え（PC・SP） */
}

.notes-desc {
  font-size: 0.88rem !important;
  color: var(--text-main);
  line-height: 1.6 !important;
  margin: 0 0 35px 0 !important;
  text-align: center !important;   /* 中央揃え（PC・SP） */
}

/* Notes：Read Moreボタン（テーマの .view-back-btn / .button-style を参考にしたサイズ感） */
.notes-btn-wrap {
  margin-top: 40px;
  max-width: fit-content;
}

.btn-read-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 5px 60px;
  border-top: 2px solid var(--text-gold02);
  border-bottom: 2px solid var(--text-gold02);
  font-family: "kepler-std-display", serif !important;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-gold02) !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
  width:fit-content;
}

.btn-read-more:hover {
  opacity: 0.8;
}

.btn-read-more .btn-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-image: url("img/symphony_no9/gold_arrow_01.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ==========================================
   9. TICKETS (DARK) (背景全幅＆インナー1000px中央寄せ)
   ========================================== */
section#sec-tickets{
	margin-bottom:100px !important;
}
.sec-tickets-dark {
  background-color: var(--bg-dark);
  color: var(--text-white);
  padding: 80px 6%;
  width: 100vw;                     /* セクション背景を画面幅いっぱいに指定 */
  margin-left: calc(-50vw + 50%);   /* 親の幅制限を解除して画面全幅に展開 */
  margin-right: calc(-50vw + 50%);
  box-sizing: border-box;
}

.tickets-dark-inner {
  max-width: 1000px;  /* sec-choir等と同じ最大幅 */
  width: 100%;
  padding: 0 60px;
  margin: 0 auto;     /* インナー要素自体を中央寄せ */
  text-align: left;   /* 中身のテキストは左寄せ */
}

.dark-head-en {
  font-size: 5.5rem !important;
  font-weight: 400 !important;
  margin: 0 0 30px !important;
  color: var(--text-white) !important;
  letter-spacing: 0.05em;
  line-height: 1 !important;
  word-break: break-word;
  text-align: left;
}

.dark-text {
  text-align: left;
}

.dark-text p {
  font-size: 0.95rem !important;
  line-height: 1.9 !important;
  margin-bottom: 10px !important;
  color: #d0c8be !important;
  text-align: left;
}

@media screen and (max-width: 768px) {
  section#sec-tickets {
    margin: 0;
  }
  .sec-tickets-dark {
    padding: 50px 4%;
  }
  .tickets-dark-inner {
    width: 100%;
	padding: 0 10px;
  }
  .dark-text {
    padding: 0 10px;
  }
  .dark-head-en {
    font-size: 7rem !important;
    margin-bottom: 20px !important;
  }
}

/* ==========================================
   10. NOTE FETCH STYLES
   ========================================== */
.diary-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--border-line) !important;
  width: 100% !important;
}

.diary-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--border-line) !important;
}

.diary-item-link {
  display: flex !important;
  align-items: center !important;
  gap: 25px !important;
  padding: 20px 0 !important;
  text-decoration: none !important;
  color: inherit !important;
  width: 100% !important;
  transition: opacity 0.3s !important;
}

.diary-item-link:hover {
  opacity: 0.75 !important;
}

.d-thumb {
  width: 130px !important;
  height: 85px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  background-color: var(--text-gold) !important;
}

.d-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.d-thumb-placeholder {
  width: 100% !important;
  height: 100% !important;
  background-color: var(--text-gold) !important;
}

.d-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.d-date {
  font-size: 1.3rem !important;
  color: var(--text-gold) !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.05em !important;
  display: block !important;
}

.d-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--text-main) !important;
  margin: 0 !important;
  display: block !important;
}

.loading-msg, .note-error {
  padding: 20px 0 !important;
  font-size: 0.85rem !important;
  color: var(--text-sub) !important;
}

/* ==========================================
   11. FOOTER
   ========================================== */
.symphony-footer {
  text-align: center;
  padding: 40px 20px;
  font-size: 0.75rem;
  color: var(--text-sub);
}

/* 公式サイトへのリンク（フッター上） */
.official-link-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 6% 60px;
  display: flex;
  justify-content: center;
}

.official-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 20px 60px;
  border: 1px solid var(--text-navy);
  font-family: "kepler-std-display", serif !important;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-navy) !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
  width: fit-content;
  line-height:1;
}

.official-link:hover {
  opacity: 0.8;
}

/* ==========================================
   12. RESPONSIVE (共通・全体制御)
   ========================================== */
@media (max-width: 768px) {
  .statement-container, 
  .choir-top-flex, 
  .two-col-layout, 
  .notes-container {
    flex-direction: column !important;
    gap: 30px !important;
  }
  
  .col-left, 
  .notes-left,
  .head-title-block {
    width: 100% !important;
  }

  .artists-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .head-title-block .head-script {
    font-size: 3.8rem !important;
    top: -28px !important;
    left: -35px !important;
  }

  .head-title-block .head-en {
    font-size: 7rem !important;
    margin: 0 0 0 15px !important;
  }

  .sec-partners .head-title-block .head-en {
    font-size: 7rem !important;
    margin: 0 !important;
  }
   .sec-partners .partner-name{
    font-size:1rem !important;
  }
  /* Join the / Conductor's タイトルブロックをSPで中央寄せ */
  .sec-choir .head-title-block,
  .sec-notes .head-title-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .sec-choir .head-title-block .head-en,
  .sec-notes .head-title-block .head-en {
    margin-left: 0 !important;
    text-align: center !important;
  }

  .sec-choir .head-title-block .head-script,
  .sec-notes .head-title-block .head-script {
    left: 50% !important;
    transform: translateX(-50%) translateX(-40px) rotate(-12deg) !important;
  }

  /* 「Choir」と「ルートヴィヒ・…」の間を半分に */
  .sec-choir .choir-top-flex {
    gap: 15px !important;
  }

  /* 「Notes」と「福島章恭のノート」の間を半分に */
  .sec-notes .notes-container {
    gap: 15px !important;
  }

  /* noteの右カラムをSPで横幅いっぱいに */
  .notes-right {
    width: 100% !important;
    flex: none !important;
  }

  .d-thumb {
    width: 100px !important;
    height: 65px !important;
  }

  .partners-box {
	 max-width:100%;
	 margin-left:0;
	 margin-right:0;
  }

  /* 合唱団員募集 */
  .choir-lead {
    width: 100% !important;
	max-width:100%;
  }

  .choir-desc {
    font-size: 1.2rem !important;
  }
/* 会場カード（スマホ: 縦1列/縦並び） */
  .venue-grid {
    grid-template-columns: 1fr !important;
  }

  .choir-btn-wrap,
  .notes-btn-wrap {
	margin:30px auto;
  }
}

/* ==========================================
   フェードインアニメーション
   ========================================== */
.fade-in-sec {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.fade-in-sec.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================
   13. ADDITIONAL OVERRIDES (追加調整)
   ========================================== */

/* ------------------------------------------
   PC/SP 共通
   ------------------------------------------ */

/* 指揮者の写真をはずす */
.profile-thumb {
  display: none !important;
}

/* 協力のところリンク（hoverで色が薄くなる以外は現状維持） */
.partner-name a {
  color: inherit !important;
  text-decoration: none !important;
  transition: opacity 0.3s !important;
}
.partner-name a:hover {
  opacity: 0.7 !important;
}

/* フォントサイズを1remに統一 */
.choir-desc {
  font-size: 1rem !important;
}
.v-hall {
  font-size: 1rem !important;
}
.dark-text p {
  font-size: 1rem !important;
}
.notes-desc {
  font-size: 1rem !important;
}

/* TICKET(dark)のpadding上下を2倍に */
.sec-tickets-dark {
  padding-top: 160px !important;
  padding-bottom: 160px !important;
}

/* 公式サイトリンク：border 2px・テキストbold */
.official-link {
  border: 2px solid var(--text-navy) !important;
  font-weight: 700 !important;
}

/* ARTISTS・Partnersの上下を2割詰める */
.sec-artists {
  padding-top: 48px !important;
  padding-bottom: 72px !important;
}
.sec-partners {
  padding-top: 16px !important;
  padding-bottom: 72px !important;
}

/* 出演者のフォントサイズを1割下げる */
.a-info {
  font-size: 1.17rem !important;
}
.a-part {
  font-size: 1.8rem !important;
}

/* Profileの下線を2px・テキストbold */
.a-profile {
  border-bottom: 2px solid var(--text-gold) !important;
  font-weight: 700 !important;
}

/* btn-view-details のテキスト/ボーダーカラーを#000000 */
.btn-view-details {
  color: #000000 !important;
  border-top-color: #000000 !important;
  border-bottom-color: #000000 !important;
  font-weight: 700 !important;
}

/* View Details / Read More を太字に（PC・SP共通） */
.btn-read-more {
  font-weight: 700 !important;
}

/* v-link を bold */
.v-link {
  font-weight: 700 !important;
}

/* ==========================================
   15. STATEMENT 下部画像
   ========================================== */
.statement-image-wrap {
  width: 100%;
  max-width: 800px;   /* PCでの最大幅 */
  margin: 60px auto 0;
}

.statement-image {
  display: block;
  width: 100%;
  height: auto;
}
/* ------------------------------------------
   SP限定 (768px以下)
   ------------------------------------------ */
@media screen and (max-width: 768px) {
	.hero-bg-wrap{
		height:400px;
	}
	
  /* .hero-bg の画像の高さをさらに2割出す（右寄せ許容） */
  .hero-bg {
    height: 100% !important;
  }

  /* .hero-sub の (1827–2027) 前で改行 */
  .hero-sub span {
    display: block !important;
	font-size: inherit !important;   /* 親と同じサイズに揃える */
    line-height: inherit !important;
    letter-spacing: inherit !important;
    font-weight: inherit !important;
	font-family:inherit !important;
  }

  /* .copy-heading フォント2割減・中央揃え */
  .copy-heading {
    font-size: 1.24rem !important;
    text-align: center !important;
  }

  /* .ticket-card の高さを伸ばす */
  .ticket-card {
    padding: 60px 20px 45px 20px !important;
  }
	.sec-head-center{
		margin-bottom:0;
	}
  /* .choir-title-jp：ルートヴィヒ・ヴァンの後で改行・中央揃え */
  .choir-title-jp {
    text-align: center !important;
	margin-bottom:30px;   /* 下の文との間を1.5倍に（元20px） */
  }
  .choir-title-jp span {
    display: block !important;
	line-height:1;
  }
  .a-photo{
		width:95%;
	}
}

/* 旧字「福︀」を出すため、トップpage .fukushima と同じフォント指定に統一 */
.hero-main,
.card-title,
.p-name-jp,
.notes-title-jp,
.official-link {
  font-family: "Yu Mincho Pr6N", "YuMincho Pr6N", "Yu Mincho", "YuMincho", serif !important;
}

/* STATEMENTはSPのみJSに依存せず必ず表示・CSSでフェードイン（iPhone対策） */
@media screen and (max-width: 768px) {
  .sec-statement.fade-in-sec {
    opacity: 1 !important;
    transform: none !important;
    animation: statementFadeIn 1s ease-out both !important;
  }
}
@keyframes statementFadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   16. HERO — desktop (>=769px), single source of truth
   これ以前にファイル内に散在していた
   「HERO BALANCE」「PC text safety」「HERO final alignment」
   「HERO position refinement」「HERO desktop: text-safe lane」
   「HERO PC：テキストを現在の1.3倍」等、同じ .hero-bg /
   .hero-title-wrap を繰り返し !important で上書きしていた
   重複ブロックはすべて削除し、ここに一本化しました。
   (translateX(10vw) のような「画像を中央方向へ引っぱる」指定は
   Macなど横幅の広い画面で画像とテキストが中央に寄る原因だったため撤去)
   ========================================== */
@media screen and (min-width: 769px) {
  .hero-section {
    height: 100vh;
  }

  .hero-bg {
    object-position: right bottom;
  }

  .hero-title-wrap {
    top: clamp(102px, 17vh, 162px);
    left: clamp(165px, 16.5vw, 275px);
    width: min(35vw, 460px);
    max-width: 460px;
  }

  .hero-main {
    font-size: clamp(3.9rem, 6.5vw, 6.24rem);
  }

  .hero-main .hero-main-line2 {
    margin-left: 0;
    text-align: left;
  }

  .hero-series {
    font-size: clamp(1.95rem, 3.12vw, 3.38rem);
  }

  .hero-date,
  .hero-place {
    font-size: clamp(1.17rem, 1.56vw, 1.56rem);
  }
}

/* Ticket情報：項目名の視認性を強化 */
#sec-tickets .dark-text p {
  margin: 0 0 30px !important;
  padding-left: 18px;
  border-left: 2px solid var(--text-gold02);
  color: #f2ede7 !important;
}

#sec-tickets .dark-text p:last-child {
  margin-bottom: 0 !important;
}

#sec-tickets .dark-text strong {
  display: inline-block;
  margin-bottom: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--text-gold02);
  color: var(--text-gold02) !important;
  font-size: 1.18rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

@media screen and (max-width: 768px) {
  #sec-tickets .dark-text p {
    margin-bottom: 26px !important;
    padding-left: 14px;
  }

  #sec-tickets .dark-text strong {
    font-size: 1.1rem !important;
  }
}