/* ==========================================================================
   1. CSS変数定義（カスタマイズポイント）
   ========================================================================== */

:root {
  /* カラーパレット - ここを変更することで全体の色調を変更可能 */
  --color-primary: #0a0a0a;        /* メイン背景色 */
  --color-secondary: #1a1a1a;      /* セカンダリ背景色 */
  --color-accent: #BBFFF5;         /* アクセントカラー*/
  --color-text: #f8fafc;           /* メインテキスト色 */
  --color-text-hover: #cbd5e1;     /* ホバー時テキスト色 */
  --color-border: #2d3748;         /* ボーダー色 */
  --color-bg: transparent;         /* 全体背景色を透明に変更 */
  
  /* ライブ情報専用カラー */
  --color-live-primary: #e8fff5;   /* ライブ情報のメインカラー（緑系） */
  --color-live-secondary: #187bb5; /* ライブ情報のセカンダリカラー */
  
  /* スペーシング - レイアウト調整用 */
  --spacing-unit: 1rem;
  --spacing-sm: calc(var(--spacing-unit) * 0.5);
  --spacing-md: var(--spacing-unit);
  --spacing-lg: calc(var(--spacing-unit) * 2);
  --spacing-xl: calc(var(--spacing-unit) * 3);
  
  /* トランジション - アニメーション速度調整 */
  --transition-default: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;
  
  /* 影設定 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.35);
  --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   基本設定 (Basic Settings)
   ========================================================================== */

/* Band Connectロゴ（左上固定） */
.bandconnect-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  transition: transform var(--transition-default);
}

.bandconnect-logo a {
  display: block;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 6px;
}

.bandconnect-logo img {
  height: 100px;
  width: auto;
  transition: all var(--transition-default);
  display: block;
}

.bandconnect-logo:hover {
  transform: scale(1.05);
}

.bandconnect-logo:hover img {
  opacity: 0.8;
}

/* ページ全体の基本的なスタイルを定義します */
body {
    /* ページ全体の余白をなくす */
    margin: 0;
    /* 優先して使用するフォントを指定。英語は'Poppins'、日本語は'Noto Sans JP' */
    font-family: 'Noto Sans JP', 'Poppins', sans-serif;
    /* ページの基本的な文字色を設定 */
    color: #333;
    /* フォントを滑らかに表示するための設定 (macOSやiOS向け) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
  /* ========================================
     * Safari対応グラデーション背景
     * ========================================*/

    /* フォールバック色 */
    background-color: #FFF4E6 !important;
    background: #FFF4E6 !important;

    /* Safari対応：シンプルな線形グラデーション */
    background-image:
        -webkit-linear-gradient(135deg,
            #FFF4E6 0%,
            #FDBBCB 20%,
            #A6F2FF 40%,
            #92FFEA 60%,
            #E7BDFF 80%,
            #9333ea 100%
        ),
        linear-gradient(135deg,
            #FFF4E6 0%,
            #FDBBCB 20%,
            #A6F2FF 40%,
            #92FFEA 60%,
            #E7BDFF 80%,
            #9333ea 100%
        ) !important;
    
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
    
    /* Safari特有の設定 */
    -webkit-background-size: 100% 100% !important;
    -webkit-background-attachment: scroll !important;
    min-height: 100vh !important;
}

/* Safari検出用のメディアクエリ */
@supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) and (not (-ms-ime-align: auto)) {
    body {
        background-image:
            -webkit-linear-gradient(135deg,
                #FFF4E6 0%,
                #FDBBCB 15%,
                #A6F2FF 30%,
                #92FFEA 45%,
                #FFFFFF 60%,
                #E7BDFF 80%,
                #9333ea 100%
            ) !important;
    }
}

/* iOS Safari特有の対応 */
@supports (-webkit-touch-callout: none) {
    body {
        background:
            -webkit-linear-gradient(135deg,
                #FFF4E6 0%,
                #FDBBCB 20%,
                #A6F2FF 40%,
                #92FFEA 60%,
                #E7BDFF 80%,
                #9333ea 100%
            ) !important;
        background-attachment: scroll !important;
        -webkit-background-attachment: scroll !important;
    }
}

/* ページのコンテンツを見やすくするためのスタイル（オプション） */
.content {
    padding: 2rem 5%;
    color: #333;
  
}

/* コンテンツ全体を囲むコンテナのスタイル */
.container {
    /* コンテンツの最大幅を1200pxに制限 */
    max-width: 1200px;
    /* コンテナを水平方向中央に配置 */
    margin: 0 auto;
    /* コンテナの内側に余白を設定 (上下40px, 左右20px) */
    padding: 40px 20px;
}


/* ==========================================================================
   ヒーローセクション (Hero Section)
   - メイン画像、アイコン、メンバーリストを含むエリア
   ========================================================================== */

/* ヒーローセクション全体のラッパー */
.hero {
    /* 子要素の `position: absolute` の基準点にするために `relative` を指定 */
    position: relative;
    /* 下の `about` セクションとの間に80pxの間隔を空ける */
    margin-bottom: 80px;
}

/* 画像と枠を管理するラッパー */
.hero .hero-image-wrapper {
    /* ▼▼▼ ご提示のコードをベースに修正 ▼▼▼ */
    display: inline-block;     /* 中の画像に合わせてサイズが決まるようにする */
    padding: 20px;             /* 白い枠部分（PC時） */
    background-color: #ffffff;   /* 枠の色 */
    box-sizing: border-box;    /* padding を含めてサイズ調整 */
    line-height: 0;            /* img下の余分な隙間を防ぐ */
}

/* バンドの写真のスタイル */
.hero .band-photo {
    /* ▼▼▼ ご提示のコードをベースに修正 ▼▼▼ */
    width: 100%;               /* 親（ラッパー）に合わせてサイズ調整 */
    height: auto;              /* 画像の縦横比を維持 */
    display: block;
}

/* バンドロゴ */
.band-logo {
  /* 位置設定 */
  position: absolute;
  bottom: -65px; /* 画像エリアの下端からはみ出す量 */
  right: 40px;   /* 画面の右端からの距離 */
  z-index: 10;   /* 他の要素より手前に表示 */

  /* サイズと形 */
  width: 140px;
  height: 140px;
  border-radius: 50%; /* 正円にする */
  
  /* 中の画像や文字のスタイル */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* はみ出した画像を隠す */

  /* 装飾 */
  background-color: var(--color-accent);
  /*box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); /* 影を少しつけても良い */
}

.band-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* メンバーリストのテキストスタイル */
.member-list {
    /* 親要素(.hero)を基準に絶対配置 */
    position: absolute;
    /* 画像エリアの下端から55pxはみ出す位置に配置 */
    bottom: -20px;
    /* 親要素(.hero)の左端に配置 */
    left: 0;
    /* 幅を動的に計算。全体の幅から、右側のアイコン(130px)と余白(50px)を引いたサイズ */
    width: calc(100% - 180px);
    
    /* `position:absolute` を使うため、デフォルトのマージンをリセット */
    margin: 0;
    /* テキストの色を指定 */
    color: #052036;
    /* フォントサイズを指定 */
    font-size: 15px;
    /* テキストを左揃えにする */
    text-align: left;
    /* テキストが改行された際の行の高さを指定 */
    line-height: 1.4;
}


/* ==========================================================================
   アバウトセクション (About Section)
   - バンド紹介のテキストエリア
   ========================================================================== */

/* モバイル専用の改行要素のスタイル */
/* デフォルト（PC表示）では改行を非表示にする */
.mobile-br {
    display: none;
}

/* Aboutセクション全体のマージン調整用 */
.about {
    /* 上のヒーローセクションとの間に余白を持たせる */
    padding-top: 20px;
}

/* テキストを囲むグレーの背景部分 */
.unified-container {
     /* 背景色をRGBA形式で指定。最後の0.6が透明度(60%)を表す */
    background-color: rgba(74, 88, 130, 0.6);
    /* 文字色を白に指定 */
    color: #ffffff;
    /* 角を30pxの半径で丸くする */
    border-radius: 30px;
    /* 内側の余白 (上下60px, 左右40px) */
    padding: 60px 40px;
}

/* バンド名 (HORIZON SHINE) のスタイル */
.band-name {
    /* 英語フォント'Poppins'を適用 */
    font-family: 'Poppins', sans-serif;
    /* フォントサイズ */
    font-size: 48px;
    /* フォントの太さを細めにする */
    font-weight: 200;
    /* 文字と文字の間隔を広げる */
    letter-spacing: 0.3em;
    /* 上下のマージン */
    margin: 0 0 10px 0;
    /* `letter-spacing`で生じる先頭の余分なスペースを打ち消すためのインデント */
    text-indent: 0.3em;
    /* 中のテキストを中央揃えにする */
    text-align: center;
    /* モバイルSafari対応：強制的に白色を適用 */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* バンド名の日本語表記 (ホライゾン・シャイン) のスタイル */
.band-name-jp {
    font-size: 16px;
    letter-spacing: 0.4em;
    /* 下に50pxのマージンを空ける */
    margin: 0 0 50px 0;
    text-indent: 0.4em;
  /* 中のテキストを中央揃えにする */
    text-align: center;
}

/* 説明文の段落スタイル */
.band-tagline {
    font-size: 15px;
    /* 行の高さをフォントサイズの2倍に設定し、読みやすくする */
    line-height: 1.7;
    /* フォントの太さをやや細めに */
    font-weight: 300;
    /* 一行の最大幅を制限して、文章を読みやすくする */
    max-width: 800px;
    /* 段落ブロック自体を中央に配置し、下の段落との間にスペースを設ける */
    margin: 0 auto 2em auto;
  /* 中のテキストを中央揃えにする */
    text-align: center;
}

/* バンド情報 (MEMBERS, FORMED, STATUS) のラッパー */
.band-stats {
    /* Flexboxを有効にして、子要素を横並びにする */
    display: flex;
    /* 水平方向の中央に配置 */
    justify-content: center;
    /* 各アイテムの間の隙間を40pxに設定 */
    gap: 40px;
    /* 上の説明文との間に30pxのマージンを設ける */
    margin-top: 30px;
    margin-bottom: 60px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.1em;
}

/* バンド情報の値 (4, 2023, ACTIVE) のスタイル */
.stat-number {
    font-size: 24px;
    font-weight: 500;
    /* この行を追加して、文字色を統一します */
    color: #BBFFF5; 
}

/* ==========================================================================
   6. バンド情報セクション
   ========================================================================== */

/* 「BAND INFO」の見出しスタイル - 最高優先度で確実に適用 */
.section-title,
html.template-3 body .section-title,
html.template-3 .container .section-title,
html.template-3 .unified-container .section-title,
html.template-3 .section-title,
body.template-3 .section-title,
.template-3 .section-title,
html body .section-title,
body .section-title,
.container .section-title,
.unified-container .section-title {
    /* ↓↓↓ ここから2行を変更・追加します ↓↓↓ */
    display: inline-flex !important; /* Flexboxを有効にしつつ、要素の幅は中身に合わせる */
    align-items: center !important;  /* 中の要素（点とテキスト）を垂直方向の中央に配置 */
    
    /* ▼▼▼ 以下のスタイルは変更なし ▼▼▼ */
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #08325f !important; /* 濃い紺色 */
    -webkit-text-fill-color: #08325f !important; /* Webkit系ブラウザ用の強制テキスト色 */
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 10px 20px 10px 15px !important; /* 内側の余白 */
    margin-bottom: 40px !important; /* カードとの間隔 */
    border-radius: 0 !important; /* 長方形にする */
    box-shadow: none !important; /* 影を削除 */
    text-align: left !important; /* 左揃えに変更 */
    position: static !important; /* positionをリセット */
    /* モバイルSafari専用の追加対応 */
    -webkit-appearance: none !important;
    -webkit-transform: translateZ(0) !important; /* ハードウェアアクセラレーション強制 */
}

/* ::afterを無効化 */
html.template-3 body .section-title::after,
html.template-3 .container .section-title::after,
html.template-3 .unified-container .section-title::after,
html.template-3 .section-title::after,
body.template-3 .section-title::after,
.template-3 .section-title::after,
html body .section-title::after,
body .section-title::after,
.container .section-title::after,
.unified-container .section-title::after {
    display: none !important;
}

/* 見出しの左側にある丸い点 (このセレクタのスタイルは変更不要です) */
html.template-3 body .section-title::before,
html.template-3 .container .section-title::before,
html.template-3 .unified-container .section-title::before,
html.template-3 .section-title::before,
body.template-3 .section-title::before,
.template-3 .section-title::before,
html body .section-title::before,
body .section-title::before,
.container .section-title::before,
.unified-container .section-title::before {
    content: '' !important;
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #9fa9ba !important; /* 背景色と同じ色 */
    border-radius: 50% !important; /* 正円にする */
    margin-right: 15px !important; /* テキストとの間隔 */
    line-height: 1 !important; /* テキストの上下の余分な余白をリセット */
    flex-shrink: 0 !important; /* Flexboxで縮まないようにする */
    position: static !important; /* positionをリセット */
    /* vertical-align: middle; はFlexboxレイアウトでは無視されるので、削除してもOK */
}

/* モバイルSafari専用の追加対応 */
@supports (-webkit-touch-callout: none) {
    /* バンド名の強制白色適用 */
    .band-name {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    
    /* セクションタイトルの強制適用 */
    .section-title {
        background-color: #ffffff !important;
        background: #ffffff !important;
        color: #08325f !important;
        -webkit-text-fill-color: #08325f !important;
        display: inline-flex !important;
        align-items: center !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        padding: 10px 20px 10px 15px !important;
        margin-bottom: 40px !important;
        text-align: left !important;
        position: static !important;
    }
    
    .section-title::before {
        content: '' !important;
        display: inline-block !important;
        width: 10px !important;
        height: 10px !important;
        background-color: #9fa9ba !important;
        border-radius: 50% !important;
        margin-right: 15px !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
        position: static !important;
    }
    
    .section-title::after {
        display: none !important;
    }
}


/* カードを配置するグリッドコンテナのスタイル */
.band-info-grid {
  /* Flexboxの代わりに、より高度な2次元レイアウトが可能な「CSS Grid」を有効にします */
  display: grid;

  /* 
   * グリッドの列の構成を定義します。これはレスポンシブデザインの要です。
   * repeat(): 繰り返しを指定します。
   * auto-fit: 利用可能なスペースに合わせて、できるだけ多くの列を自動的に配置します。
   * minmax(300px, 1fr): 各列の幅を、最低300pxから最大で利用可能な余白を均等に分けたサイズ(1fr)の間で可変にします。
   *
   * 結果として、画面幅が広いときは複数カラム、狭くなると自動的に1カラムに切り替わります。
   */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1200px));
  
  /* グリッドのアイテム（カード）間の隙間を指定します。（--spacing-lgはCSS変数） */
  gap: var(--spacing-lg);

  /* グリッド全体の下に余白を設けます。（--spacing-lg変数の2倍の高さ） */
  margin-bottom: calc(var(--spacing-lg) * 2);
}

/* メンバーSNSアイコンのスタイル */
.member-sns-icons {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: flex-start;
}

.member-sns-icons .sns-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 16px;
}

.member-sns-icons .sns-icon:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.member-sns-icons .x-icon {
    background-color: #000000;
    color: white;
}

.member-sns-icons .instagram-icon {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.member-sns-icons .facebook-icon {
    background-color: #1877f2;
    color: white;
  
   /* グリッド内のアイテム群全体を水平方向の中央に配置します */
  justify-content: center;
}


/* ==========================================================================
   Information Card (情報カードの共通スタイル)
   ========================================================================== */

/* カード自体のスタイル */
.info-card {
  /* カードの背景色。（--color-secondaryはCSS変数） */
  background: transparent;
  
  /* カードの角を40pxの半径で丸くします */
  border-radius: 40px;
  
  /* カードの内側の余白を指定します */
  padding: var(--spacing-lg);
  
  /* カードの枠線を設定します */
  border: 1px solid rgba(255, 255, 255, 0.5);
  
  /* 
   * ホバー時のアニメーション効果を滑らかにするための設定です。
   * transform（移動）とbox-shadow（影）が変化する際に、指定された時間(--transition-default)をかけてアニメーションさせます。
   */
  transition: transform var(--transition-default), box-shadow var(--transition-default);
}

/* カードにマウスカーソルが乗った時（ホバー時）のスタイル */
.info-card:hover {
  /* Y軸方向（垂直方向）に-5px（つまり上へ5px）移動させ、浮き上がったように見せます */
  transform: translateY(-5px);
  
  /* ホバー時に、より濃い影（変数--shadow-lgで定義）を表示します */
  box-shadow: 0px 10px 25px rgba(255, 255, 255, 0.4);
}


/* ==========================================================================
   Card Content (カード内部の要素のスタイル)
   ========================================================================== */

/* カード内のh3見出し（'Contact'など）のスタイル */
.info-card h3 {
  /* 見出しの文字色をアクセントカラーに設定します */
  color: var(--color-accent);
  
  /* 見出しの下に余白を設けます */
  margin-bottom: var(--spacing-md);
  
  /* 見出しの文字サイズを設定します */
  font-size: 1.3rem;

  text-align: left; 

  /* アイコンとテキストを垂直方向（上下）の中央に揃えます */
  align-items: center;

  /* アイコンとテキストの間に0.5remの隙間を設けます */
  gap: 0.5rem;
}

/* カード内の段落（メールアドレスなど）のスタイル */
.info-card p {
  /* 行の高さを1.7倍に設定し、テキストを読みやすくします */
  line-height: 1.7;
  
  /* 段落の文字色を指定します */
  color: solid #ffffff;
  
  text-align: left;
}


/* ==========================================================================
   Detailed Information List (詳細情報リストのスタイル)
   ========================================================================== */

/* 詳細情報リスト（info-itemの親）のスタイル */
.info-details {
  /* 中の情報アイテム(.info-item)をFlexboxで管理します */
  display: flex;
  
  /* アイテムを縦方向に並べます */
  flex-direction: column;

  /* アイテム間の垂直方向の隙間を指定します */
  gap: var(--spacing-md);
}

/* 各情報アイテム（「ジャンル」などの一行）のスタイル */
.info-item {
  /* アイテムの上下の内部余白 */
  padding-bottom: 0.75rem;
  padding-top: 0.75rem;
  
  /* アイテムの下に区切り線を表示します */
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  
  /* 行の高さを調整します */
  line-height: 1.6;

  /* 文字色を指定します */
  color: solid #ffffff;
  
  text-align: left;
}

/* 最初の情報アイテムにだけ適用されるスタイル */
.info-item:first-child {
  /* 最初のアイテムの上の余白を調整します（基本スタイルと同じ値ですが、リセット目的で明記されている可能性があります） */
  padding-top: 0.75rem;
}

/* 最後の情報アイテムにだけ適用されるスタイル */
.info-item:last-child {
  /* 最後のアイテムの下にある区切り線を消します */
  border-bottom: none;
  
  /* 最後のアイテムの下の余白 */
  padding-bottom: 0.75rem;
}

/* ラベル部分（'ジャンル:'など）の<strong>タグのスタイル */
.info-item strong {
  /* ラベルの文字色をアクセントカラーに設定します */
  color: var(--color-accent);

  /* 文字の太さを600に設定します (boldより少し細い) */
  font-weight: 600;
  
  /* ラベルと値の間に右側の余白（隙間）を設けます */
  margin-right: 0.5rem;
}

/* メンバーリスト */
.members-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 50px; /* row-gap, column-gap */
}

.member-card {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* メンバーアイコン */
.member-photo {
    flex-shrink: 0;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    /* 1. ボーダーを少し太くすると見栄えが良くなります */
    border: 1px solid rgba(255, 255, 255, 0.95);
    overflow: hidden;
    background-color: none; /* 画像が読み込めない場合の背景 */
    
    /* 2. 内側に余白を追加します (この値で隙間の大きさを調整) */
    padding: 8px; 
    
    /* 3. paddingを加えても全体のサイズが変わらないように設定 */
    box-sizing: border-box; 
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像が円の中に歪まずに収まるようにする */

    /* 4. 画像自体も円形にしておくと、背景が見えた時に綺麗です */
    border-radius: 50%; 
}


/* メンバー情報テキスト */
.member-info {
    color: #ffffff;
}

.member-name {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.member-instrument {
    color: var(--color-accent);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.member-profile {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
}

/* ==========================================================================
   8. バンド履歴セクション
   ========================================================================== */
.content-section{
  margin-top: 60px;
  margin-bottom: 60px;
}

.band-story-content {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 0px;
}

.story-card {
  /*background: rgba(255, 255, 255, 0.1);*/
  border-radius: 30px;
  padding: var(--spacing-lg);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: transform var(--transition-default), box-shadow var(--transition-default);
  position: relative;
  overflow: hidden;
}

.story-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  /*background: linear-gradient(to bottom, var(--color-accent), #ffffff);*/
}

.story-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 25px rgba(255, 255, 255, 0.4);
}

.story-text {
  color: #ffffff;
  line-height: 1.5;
  font-size: 0.9rem;
  text-align: justify;
  font-weight: 300;
}

/* ==========================================================================
   9. ニュースセクション
   ========================================================================== */

.news-section {
  /*background: var(--color-primary);*/
  padding: var(--spacing-md) 0;
  margin: calc(var(--spacing-md) / 2) 0;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.news-card {
  /*background: var(--color-secondary);*/
  border-radius: 40px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: transform var(--transition-default), box-shadow var(--transition-default);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0px 10px 25px rgba(255, 255, 255, 0.4);
}

.news-photo {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-accent), #9333ea);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

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

.news-placeholder {
  color: white;
  font-size: 3rem;
  opacity: 0.7;
}

.news-info {
  padding: 1.5rem;
  flex: 1;
}

.news-date {
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.news-title {
  color: var(--color-text);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.news-content {
  color: var(--color-text);
  line-height: 1.6;
  font-size: 0.95rem;
}

.news-actions {
    /* --- 水平方向の中央揃え（ここがポイント） --- */
    /* 4. ラッパーを画面の横幅いっぱいに広げる */
    left: 0;
    width: 100%;

    /* 5. Flexboxを使って、中のアイテム（ボタン）を水平中央に配置 */
    display: flex;
    justify-content: center;

    /* 他の要素より手前に表示させるための設定 */
    z-index: 10;
  
    margin-top: 30px;
}

.past-news-btn{
  background-color: rgba(255, 255, 255, 0.2); /* ボタンの背景色 */
    color: #ffffff;             /* 文字とアイコンの色 */
    border-radius: 999px;        /* 完全なカプセル型にする */
    
    /* サイズと余白 */
    padding: 16px 40px; /* 内側の余白 (上下16px, 左右40px) */

    /* 文字のスタイル */
    font-size: 18px;
    font-weight: 400;
    text-decoration: none; /* aタグの下線を消す */
    
    /* その他 */
    border: none; /* buttonタグのデフォルト枠線を消す */
    cursor: pointer; /* マウスカーソルを指マークにする */
    transition: background-color 0.2s ease-in-out; /* ホバー時の色変化を滑らかに */
}


.past-news-btn:hover {
    background-color: #bec2d4; /* 少し明るい色に変化させる */
}

/* ==========================================================================
   10. ライブ情報セクション
   ========================================================================== */

.live-section {
  padding: var(--spacing-md) 0;
  margin: calc(var(--spacing-md) / 2) 0;
}

.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.live-card {
  /*background: var(--color-secondary);*/
  border-radius: 24px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: transform var(--transition-default), box-shadow var(--transition-default);
  position: relative;
  overflow: hidden;
}

.live-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-live-primary), var(--color-live-secondary));
}

.live-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 5px 15px rgba(255, 255, 255, 0.3);
}

.live-date {
  color: var(--color-live-primary);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.live-title {
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  line-height: 1.4;
}

.live-venue {
  color: var(--color-live-primary);
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.live-actions {
    /* --- 水平方向の中央揃え（ここがポイント） --- */
    /* 4. ラッパーを画面の横幅いっぱいに広げる */
    left: 0;
    width: 100%;

    /* 5. Flexboxを使って、中のアイテム（ボタン）を水平中央に配置 */
    display: flex;
    justify-content: center;

    /* 他の要素より手前に表示させるための設定 */
    z-index: 10;
  
    margin-top: 30px;
}

.past-live-btn{
  background-color: rgba(255, 255, 255, 0.2); /* ボタンの背景色 */
    color: #ffffff;             /* 文字とアイコンの色 */
    border-radius: 999px;        /* 完全なカプセル型にする */
    
    /* サイズと余白 */
    padding: 16px 40px; /* 内側の余白 (上下16px, 左右40px) */

    /* 文字のスタイル */
    font-size: 18px;
    font-weight: 400;
    text-decoration: none; /* aタグの下線を消す */
    
    /* その他 */
    border: none; /* buttonタグのデフォルト枠線を消す */
    cursor: pointer; /* マウスカーソルを指マークにする */
    transition: background-color 0.2s ease-in-out; /* ホバー時の色変化を滑らかに */
}


.past-live-btn:hover {
    background-color: #bec2d4; /* 少し明るい色に変化させる */
}

/* ==========================================================================
   11. ギャラリーセクション
   ========================================================================== */

.gallery-section {
  /*background: var(--color-primary);*/
  padding: var(--spacing-md) 0;
  margin: calc(var(--spacing-md) / 2) 0;
}

.gallery-subsection {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  margin-bottom: calc(var(--spacing-lg) * 2);
}

.gallery-subtitle {
    display: inline-flex;
    align-items: center;
    position: relative;
    text-align: center;
    
    /* デザイン */
    background-color: transparent; 
    border: 1px solid rgba(255, 255, 255, 0.6); 
    color: #ffffff;

    /* フォント */
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;

    /* 余白と配置 */
    padding: 10px 20px 10px 15px;
    margin-top: -80px;  /* ← ここの値を調整 */
    margin-bottom: 20px;
}

.gallery-subtitle::before {
  content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%; /* 正円にする */
    margin-right: 15px;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.photos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .photos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .photos-grid {
    grid-template-columns: 1fr;
  }
}

.photo-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-default), box-shadow var(--transition-default);
  aspect-ratio: 1;
}

.photo-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.4);
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   YouTube動画ギャラリーセクション
   ========================================================================== */

/* セクション全体のラッパー */
.gallery-subsection {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

/* 動画グリッドのコンテナ */
.youtube-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* 各動画カードの共通スタイル */
.youtube-card {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* PC用とモバイル用の両方のラッパーに適用する共通スタイル */
.youtube-embed,
.youtube-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* PC用 iframe */
.youtube-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* モバイル用 サムネイル */
.youtube-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.youtube-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.youtube-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.youtube-play-button {
    color: #ffffff;
    font-size: 50px;
    opacity: 0.8;
    transition: transform 0.3s ease;
}
.youtube-link:hover .youtube-thumb-img {
    transform: scale(1.05);
}
.youtube-link:hover .youtube-play-button {
    transform: scale(1.1);
}

/* PC表示（画面幅 768px 以上）のデフォルト設定 */
.mobile-only {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.desktop-only {
    visibility: visible;
    opacity: 1;
}

/* ==========================================================================
   12. SNSセクション
   ========================================================================== */

.sns-section {
  padding: var(--spacing-lg) 0; /* 上下の余白を少し確保 */
  margin-top: 40px;
}

/* SNSリンク全体を囲むラッパー */
.sns-links {
  display: flex; /* Flexboxを有効にして、子要素を横並びにする */
  
  /* ▼▼▼【ここが重要】▼▼▼ */
  justify-content: flex-start; /* 左寄せにする */
  
  align-items: center; /* アイコンの垂直位置を中央に揃える */
  gap: var(--spacing-xl); /* 各アイコン間の隙間を広めに設定 */
  
  /* 横幅いっぱいに広がらないように最大幅と中央配置を設定 */
  max-width: 1200px; 
  margin: 0 auto;
  padding: 0 var(--spacing-lg); /* 左右の余白 */
  
  flex-wrap: wrap; /* 画面が狭くなった時に折り返す */
}

/* 各SNSリンクのスタイル */
.sns-link {
  /* ▼▼▼【ここが重要】枠と背景をなくす ▼▼▼ */
  background: none;
  border: none;
  
  text-decoration: none;
  color: #ffffff; /* 通常時のアイコンの色（グレー系） */
  
  /* ▼▼▼【ここが重要】ホバーエフェクトの準備 ▼▼▼ */
  transition: color 0.2s ease-in-out;
}

/* ホバー時のスタイル */
.sns-link:hover {
  /* ▼▼▼【ここが重要】色だけが変わるようにする ▼▼▼ */
  /*color: #395c7a; /* ホバー時のアイコンの色（濃い青系） */
  
  /* transformとbox-shadowをリセット */
  transform: none; 
  box-shadow: none;
}

/* アイコン自体のスタイル */
.sns-link i {
  /* アイコンのサイズ */
  font-size: 2rem; 
  /* テキストとの間の余白は不要なのでリセット */
  margin-bottom: 0;
  /* ▼▼▼【重要】色の継承とトランジションを追加 ▼▼▼ */
  color: inherit; /* 親要素(aタグ)の色を常に継承する */
  transition: color 0.2s ease-in-out; /* 色の変化を滑らかに */
}

/* テキスト（span）は今回は不要なので非表示にする */
.sns-link span {
  display: none;
}

.sns-link.sns-twitter:hover,
.sns-link.sns-twitter:hover i { /* アイコンにも直接適用 */
    color: #000000;
}
.sns-link.sns-instagram:hover,
.sns-link.sns-instagram:hover i {
    color: #E4405F;
}
.sns-link.sns-youtube:hover,
.sns-link.sns-youtube:hover i {
    color: #FF0000;
}
.sns-link.sns-facebook:hover,
.sns-link.sns-facebook:hover i {
    color: #1877F2;
}


/* ==========================================================================
   レスポンシブ調整 (Responsive Adjustments)
   - 画面幅に応じてレイアウトを最適化します。
   - CSSは下に書かれたものが優先されるため、小さい画面用の設定を後に書きます。
   ========================================================================== */

/* ▼▼▼ タブレット向け調整 (画面幅が992px以下で適用) ▼▼▼ */
@media (max-width: 992px) { 
    /* --- バンドロゴのタブレット用調整 --- */
    .band-logo {
        /* サイズを小さくします */
        width: 120px;  /* この数値を変更してサイズ調整 */
        height: 120px; /* この数値を変更してサイズ調整 */

        /* 位置を調整します */
        bottom: -55px; /* 画像エリアからはみ出す量を調整 */
        right: 10px;   /* 画面右端からの距離を調整 */
    }

    /* --- メンバー一覧グリッドの調整 --- */
    .members-grid {
        /* グリッドのアイテム間の隙間を調整します (行間 50px, 列間 30px) */
        gap: 50px 30px;
    }

    /* --- 各メンバーカードの調整 --- */
    .member-card {
        /* カード内のアイコンとテキストの間の隙間を20pxに狭めます */
        gap: 20px;
    }

    /* --- メンバー写真の調整 --- */
    .member-photo {
        /* アイコンのサイズを少し小さくします (幅140px, 高さ140px) */
        width: 140px;
        height: 140px;
    }

    /* --- メンバー名のテキスト調整 --- */
    .member-name {
        /* メンバー名の文字サイズを20pxに小さくします */
        font-size: 20px;
    }

    /* --- 担当楽器のテキスト調整 --- */
    .member-instrument {
        /* 担当楽器の文字サイズを15pxに小さくします */
        font-size: 15px;
    }

    /* --- プロフィール文のテキスト調整 --- */
    .member-profile {
        /* プロフィール文の文字サイズを13pxに小さくします */
        font-size: 13px;
    }
  
    .youtube-grid {
        grid-template-columns: repeat(2, 1fr); /* 2列レイアウト */
    }
}


/* ▼▼▼ スマートフォン向け調整 (画面幅が768px以下で適用) ▼▼▼ */
/* 992px以下の設定に加えて、さらに上書きされます */
@media (max-width: 768px) {

    /* --- ページ全体のコンテナ調整 --- */
    .container {
        /* 画面左右の余白をさらに狭くします (上下20px, 左右15px) */
        padding: 20px 15px;
    }

    /* --- バンド名のテキスト調整 --- */
    .band-name {
        /* バンド名のフォントサイズを小さくして、画面に収まるようにします */
        font-size: 36px;
        /* ▼▼▼ この行を追加します ▼▼▼ */
        line-height: 1.2; /* 行の高さをフォントサイズの1.2倍にする */
        /* モバイル版でも白色を強制適用 */
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    .band-name-jp {
        /* 日本語表記のバンド名も同様に小さくします */
        font-size: 14px;
    }
  
  .bandconnect-logo {
    top: 15px;
    left: 15px;
  }
  
  .bandconnect-logo img {
    height: 45px;
  }

    /* --- Aboutセクションのコンテナ調整 --- */
    .about-content {
        /* コンテナの内側の余白を狭めます (上下40px, 左右20px) */
        padding: 40px 20px;
    }

    .band-tagline{
      /* ▼▼▼ この行を追加または変更します ▼▼▼ */
    letter-spacing: -0.05em; /* 字間を調整 */
    }

    /* --- バンド情報の統計部分の調整 --- */
    .band-stats {
        /* 横並びから縦並びに変更します */
        flex-direction: column;
        /* アイテム間の隙間を狭めます */
        gap: 10px;
        /* 縦並びになったアイテムを中央に揃えます */
        align-items: center;
    }
  
  /* --- 全体を囲むグレーのコンテナの余白調整 --- */
    .unified-container {
        /* コンテナの内側の余白を狭めます (上下30px, 左右20px) */
        /* この左右の「20px」の数値を変更すると、余白が変わります */
        padding: 30px 10px;
        
        /* 角の丸みも少し小さくするとバランスが良くなります */
        border-radius: 20px; 
    }

    /* --- ヒーローセクションの調整 --- */
    .hero {
        /* 下のセクションとの間隔を狭めます */
        margin-bottom: 60px;
    }
  
    /* --- モバイル専用の改行タグの調整 --- */
    .mobile-br {
        /* PCでは非表示だった改行タグを、モバイルでのみ有効にします */
        display: inline;
    }

    /* --- ヒーローセクション内のメンバーリストの調整 --- */
    .member-list {
        /* 画像からはみ出す位置を調整します */
        bottom: -35px;
        /* 画面幅に合わせて横幅を調整します */
        width: calc(100% - 100px);
        /* 文字サイズを小さくします */
        font-size: 12px;
        /* 行の高さを調整して、折り返しても詰まりすぎないようにします */
        line-height: 1.5;
        
    }
  
  /* --- バンドロゴのモバイル用調整 --- */
    .band-logo {
        /* サイズを小さくします */
        width: 80px;  /* この数値を変更してサイズ調整 */
        height: 80px; /* この数値を変更してサイズ調整 */

        /* 位置を調整します */
        bottom: -35px; /* 画像エリアからはみ出す量を調整 */
        right: 10px;   /* 画面右端からの距離を調整 */
    }
  
  /* --- ヒーローセクションの枠を調整 --- */
    .hero .hero-image-wrapper {
        padding: 10px; /* 枠の幅を10pxに変更 */
    }

    /* --- メンバー一覧グリッドのレイアウト変更 --- */
    .members-grid {
        /* 2カラムから1カラムのレイアウトに変更します */
        grid-template-columns: 1fr;
        /* メンバー間の縦の隙間を40pxに設定します */
        gap: 40px;
    }

    /* --- メンバー写真の調整 --- */
    .member-photo {
        /* アイコンのサイズをさらに小さくします (幅130px, 高さ130px) */
        width: 110px;
        height: 110px;
    }
  
  .story-card {
    /* 上下は30px、左右は20pxの余白に設定 */
    padding: 20px 20px;
}
  
  /* --- ニュースグリッドのモバイル用調整 --- */
    .news-grid {
        /* 左右の余白を狭くします */
        /* この数値を変更してお好みの余白に調整してください */
        padding-left: 10px;
        padding-right: 10px;
    }
  
  .live-grid {
        /* 左右の余白を狭くします */
        /* この数値を変更してお好みの余白に調整してください */
        padding-left: 10px;
        padding-right: 10px;
    }
  
   /* 表示/非表示を逆転させる */
    .mobile-only {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
    .desktop-only {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    #subtitle-photos {
        /* 文字サイズを少し小さくして、横幅を節約 */
        font-size: 1.1rem; 
    }

    /* レイアウトを1列にする */
    .youtube-grid {
        grid-template-columns: 1fr;
    }
  
  /* --- SNSリンクのモバイル用調整 --- */
    .sns-links {
        /* アイコン群を中央揃えにする */
        justify-content: center;
        /* アイコン間の隙間を少し狭くする */
        gap: var(--spacing-lg);
    }
  
}
/* ==========================================================================
   モーダル・ライトボックス関連スタイル
   ========================================================================== */

/* バックトゥトップボタン */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-accent), #9333ea);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: all var(--transition-default);
    box-shadow: var(--shadow-lg);
}

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.back-to-top i {
    color: var(--color-primary);
    font-size: 20px;
}

/* ライトボックス */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow);
}

.lightbox-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}

.lightbox-content img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 30px;
    cursor: pointer;
    transition: color var(--transition-default);
}

.lightbox-close:hover {
    color: var(--color-accent);
}

/* ニュース詳細モーダル */
.news-detail-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.news-detail-modal-content {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.news-detail-modal-header {
    padding: 20px 20px 0;
    text-align: right;
}

.news-detail-modal-close {
    font-size: 24px;
    cursor: pointer;
    color: #666;
    transition: color var(--transition-default);
}

.news-detail-modal-close:hover {
    color: #333;
}

.news-detail-modal-body {
    padding: 0 20px 20px;
}

.news-detail-date {
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;
}

.news-detail-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.news-detail-photo {
    margin: 15px 0;
}

.news-detail-photo img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.news-detail-content {
    line-height: 1.6;
    color: #555;
}

/* 過去のニュースモーダル */
.news-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.news-modal-content {
    background: white;
    border-radius: 12px;
    max-width: 800px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.news-modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-modal-header h3 {
    margin: 0;
    color: #333;
}

.news-modal-close {
    font-size: 24px;
    cursor: pointer;
    color: #666;
    transition: color var(--transition-default);
}

.news-modal-close:hover {
    color: #333;
}

.news-modal-body {
    padding: 20px;
}

.past-news-item {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

.past-news-item:last-child {
    border-bottom: none;
}

.past-news-date {
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
}

.past-news-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.past-news-content {
    line-height: 1.6;
    color: #555;
    margin-bottom: 10px;
}

.past-news-photo {
    margin-top: 10px;
}

.past-news-photo img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 8px;
}

/* ライブ履歴モーダル */
.live-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.live-modal-content {
    background: white;
    border-radius: 12px;
    max-width: 800px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.live-modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.live-modal-header h3 {
    margin: 0;
    color: #333;
}

.live-modal-close {
    font-size: 24px;
    cursor: pointer;
    color: #666;
    transition: color var(--transition-default);
}

.live-modal-close:hover {
    color: #333;
}

.live-modal-body {
    padding: 20px;
}

.past-live-item {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

.past-live-item:last-child {
    border-bottom: none;
}

.past-live-date {
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
}

.past-live-time {
    margin-left: 10px;
}

.past-live-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.past-live-venue {
    margin-bottom: 10px;
    color: #555;
}

.past-live-venue i {
    margin-right: 5px;
    color: #666;
}

.past-live-venue a {
    color: var(--color-accent);
    text-decoration: none;
}

.past-live-venue a:hover {
    text-decoration: underline;
}

.past-live-details {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 14px;
    color: #666;
}

.past-live-price i,
.past-live-order i {
    margin-right: 5px;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
    
    .back-to-top i {
        font-size: 18px;
    }
    
    .news-detail-modal-content,
    .news-modal-content,
    .live-modal-content {
        margin: 10px;
        max-height: 90vh;
    }
    
    .lightbox-content {
        max-width: 95%;
        max-height: 95%;
    }
    
    .lightbox-close {
        top: -35px;
        font-size: 25px;
    }
}
/* Safari専用CSS - テンプレート3用の根本的な修正版 */

/* Safari検出の確実性を向上 - より具体的な条件 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Safari専用のスタイル */
    
    
    /* 基本的な背景色の強制指定 */
    html {
        background: transparent !important;
        background-color: transparent !important;
    }

    body {
        background: transparent !important;
        background-color: transparent !important;
        color: #f8fafc !important;
    }
    
    /* 全てのセクション要素に対する強制的な背景色指定 */
    section,
    .content-section,
    .hero-section,
    .members-section,
    .news-section,
    .gallery-section,
    .sns-section,
    .youtube-section,
    .band-info-section,
    .live-info-section,
    .story-section {
        background: #0a0a0a !important;
        background-color: #0a0a0a !important;
        /* Safari特有の色空間問題を回避 */
        color-profile: sRGB !important;
        -webkit-color-correction: sRGB !important;
    }
    
    /* カード要素の背景色 */
    .info-card,
    .member-card,
    .story-card,
    .news-card,
    .live-card,
    .youtube-card {
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
        border: 1px solid #2d3748 !important;
        color-profile: sRGB !important;
        -webkit-color-correction: sRGB !important;
    }
    
    /* バンド名の白色強制適用（グラデーションを無効化） */
    .band-name {
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: #ffffff !important;
        color: #ffffff !important;
        color-profile: sRGB !important;
        -webkit-color-correction: sRGB !important;
    }
    
    /* 楽器タグの背景色 */
    .member-instrument {
        background: #BBFFF5 !important;
        background-color: #BBFFF5 !important;
        color: #000000 !important;
        color-profile: sRGB !important;
        -webkit-color-correction: sRGB !important;
    }
    
    /* コンテナ要素の背景色 */
    .container,
    .main-content,
    .content-wrapper,
    .band-info-grid {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    /* モーダル要素の背景色 */
    .news-modal-content,
    .live-modal-content,
    .news-detail-modal-content {
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
        border: 1px solid #2d3748 !important;
        color-profile: sRGB !important;
        -webkit-color-correction: sRGB !important;
    }
    
    .news-modal-header,
    .live-modal-header {
        background: #0a0a0a !important;
        background-color: #0a0a0a !important;
        color-profile: sRGB !important;
        -webkit-color-correction: sRGB !important;
    }
}

/* iOS Safari専用の追加対応 */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-text-size-adjust: 100% !important;
        -webkit-font-smoothing: antialiased !important;
    }
    
    /* iOS Safari特有の色空間問題への対応 */
    * {
        -webkit-color-correction: sRGB !important;
        color-profile: sRGB !important;
    }
}