/* =========================================================
   ★イベント事業 ページ専用スタイル (デザイン忠実再現版)
========================================================= */

/* ベースカラー（エメラルドグリーン） */
:root {
  --spejo-color: #2fb5bc;
}
.bread {
    display: flex;
    max-width: 996px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 24px;
    font-size: 14px;
}

/* ページ全体のタイトル */
.event_project_section .top_sec_title {
  margin-bottom: 60px;
}

/* --------------------------------------
 * イベントコンテンツエリア
 * -------------------------------------- */
.event_content_list {
  display: flex;
  flex-direction: column;
  gap: 80px; /* セクション間の余白 */
}

/* 各イベントセクション（スライド風） */
.event_section {
  background-color: #fff; /* 背景は白 */
  padding: 60px 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* 軽い影をつける */
}

/* 各イベント共通画像スタイル */
.event_section img {
  border-radius: 10px; /* 角を少し丸く */
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* イベントヘッダー */
.event_header {
  border-bottom: 2px solid #ddd;
  padding-bottom: 20px;
  margin-bottom: 40px;
  align-items: center;
}

.event_logo {
  width: 50px;
  margin-right: 20px;
}
.event_logo img {
  border-radius: 0; /* ロゴは丸くしない */
}

.event_title {
  font-size: 130%;
  font-weight: bold;
  color: #000;
  margin: 0;
}

/* イベントボディ共通スタイル */
.event_body {
  align-items: flex-start;
  gap: 40px;
}

/* イベントテキスト共通スタイル */
.event_text {
  flex: 1;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
}
.event_text p {
  margin-bottom: 20px;
  font-size: 130%;
}

/* オンライン、全国マップ用のテキストエリア */
.event_body_online .event_text,
.event_body_map .event_text {
  width: 100%;
  text-align: left;
}


/* --------------------------------------
 * 1. PK最強決定戦
 * -------------------------------------- */

/* 左右をバランス良く配置し、余白を設ける */
#event_pk .event_body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px; /* 左右カラム間の余白 */
}

/* 左カラム（テキストとスタジアム画像） */
#event_pk .event_text {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 30px; /* テキストと画像間の余白 */
}

/* テキストの行間を少し広くして読みやすく */
#event_pk .event_text p {
  margin-bottom: 0;
  line-height: 1.8;
}

#event_pk .event_sub_img_list {
  width: 100%;
}

/* 右カラム（100万円ボードとメインバナー） */
#event_pk .event_main_img_group {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 20px; /* 上下画像間の余白 */
}

/* 画像をおしゃれに見せる共通スタイル */
#event_pk .event_body img {
  width: 100%;
  height: auto;
  border-radius: 16px; /* 角丸をつけて柔らかい印象に */
  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* うっすら影をつけて立体感を出す */
  display: block;
}

/* スマホ用のレスポンシブ調整 */
@media screen and (max-width: 768px) {
  #event_pk .event_body {
    flex-direction: column;
    gap: 30px;
  }
  #event_pk .event_text,
  #event_pk .event_main_img_group {
    width: 100%;
  }
}

/* --------------------------------------
 * 4. こどもたちの全国マップ (image_7.png)
 * -------------------------------------- */
#event_map .event_body_map {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
#event_map .event_text {
  text-align: left;
}
#event_map .event_note {
  font-size: 100%;
  color: #666;
  margin: 0;
}
#event_map .event_img_map_main {
  width: 100%;
}
/* 開催地パネル (image_7.pngのデザインを静的に再現) */
#event_map .event_map_locations_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
#event_map .event_location_panel {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
#event_map .event_location_panel img {
  width: 100%;
  height: 100%;
}
#event_map .location_info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  color: #fff;
}
#event_map .location_label {
  color: var(--spejo-color);
  font-weight: bold;
}
#event_map .location_label span {
  font-size: 1.5rem;
}

/* --------------------------------------
 * 5. オンラインイベント (image_6.png)
 * -------------------------------------- */
#event_online .event_body_online {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
#event_online .event_text {
  text-align: left;
}
/* 6枚の画像を3列2行グリッドで配置 */
#event_online .event_img_online_small {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
}
#event_online .event_img_online_small img {
  width: 100%;
  height: 100%;
}

/* =========================================
   全イベント共通：画像のスタイリング
   （角丸、影、はみ出し防止）
========================================= */
.event_section img {
    width: 100%;
    height: auto;
    border-radius: 16px; /* 角丸を全画像に適用 */
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 影を全画像に適用 */
    display: block;
}

/* --------------------------------------
 * 2. RedBull Four 2 Score
 * -------------------------------------- */
#event_redbull .event_body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

/* 左カラム：テキスト */
#event_redbull .event_text {
    width: 40%; /* 画像側の比重を大きくするためテキストは少し細め */
}

/* 右カラム：画像を縦に2枚並べる */
#event_redbull .event_main_img_grid {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 既存のユーティリティクラス（flex-hなど）を上書きして縦並びに */
#event_redbull .event_sub_img_list_v {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* --------------------------------------
 * 3. サッカー教室イベント
 * -------------------------------------- */
#event_school .event_body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

/* 左カラム：テキスト ＋ 縦並び画像2枚 */
#event_school .event_text {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
#event_school .event_sub_img_grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 右カラム：縦並び画像3枚（メイン＋サブ2枚） */
#event_school .event_main_img_grid {
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#event_school .event_sub_img_list_v {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* --------------------------------------
 * 6. Football Assist CUP
 * -------------------------------------- */
#event_cup .event_body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

/* 左カラム：テキスト ＋ メインバナー */
#event_cup .event_text {
    width: 55%; /* バナーを大きく見せるために少し広め */
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 右カラム：縦並びスナップ画像2枚 */
#event_cup .event_main_img_grid {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#event_cup .event_sub_img_list_v {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* =========================================
   スマートフォン向けの表示調整（レスポンシブ）
========================================= */
@media screen and (max-width: 768px) {
    /* 左右カラムを解除し、全て縦積みにする */
    .event_body {
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    /* スマホ表示では全カラムを横幅100%に */
    .event_text,
    .event_main_img_grid,
    #event_redbull .event_text,
    #event_redbull .event_main_img_grid,
    #event_school .event_text,
    #event_school .event_main_img_grid,
    #event_cup .event_text,
    #event_cup .event_main_img_grid {
        width: 100% !important;
    }
}


/* =========================================
   PK最強決定戦セクションのレイアウト調整
========================================= */

/* 左右をバランス良く配置し、余白を設ける */
#event_pk .event_body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px; /* 左右カラム間の余白 */
}

/* 左カラム（テキストとスタジアム画像） */
#event_pk .event_text {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px; /* テキストと画像間の余白 */
}

/* テキストの行間を少し広くして読みやすく */
#event_pk .event_text p {
    margin-bottom: 0;
    line-height: 1.8;
}

#event_pk .event_sub_img_list {
    width: 100%;
}

/* 右カラム（100万円ボードとメインバナー） */
#event_pk .event_main_img_group {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px; /* 上下画像間の余白 */
}

/* 画像をおしゃれに見せる共通スタイル */
#event_pk .event_body img {
    width: 100%;
    height: auto;
    border-radius: 16px; /* 角丸をつけて柔らかい印象に */
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* うっすら影をつけて立体感を出す */
    display: block;
}

/* =========================================
   スマートフォン向けの表示調整（レスポンシブ）
========================================= */
@media screen and (max-width: 768px) {
    #event_pk .event_body {
        flex-direction: column;
        gap: 20px;
    }
    #event_pk .event_text,
    #event_pk .event_main_img_group {
        width: 100%;
    }
}

/* =========================================================
   ★スマホ用レスポンシブ対応
========================================================= */
@media screen and (max-width: 768px) {
  /* グリッドを解除し、全て縦並びに */
  .event_content_list {
    gap: 50px;
  }
  .event_section {
    padding: 40px 20px;
  }
  .event_title {
    font-size: 1.6rem;
  }
  .event_body {
    display: flex !important;
    flex-direction: column;
    gap: 30px;
  }
  
  /* スマホでのフォントサイズ調整 */
  .spejo_main_title {
    font-size: 9vw; 
  }
  .spejo_sub_title {
    font-size: 1.2rem;
  }
  .spejo_desc_text, .event_text {
    font-size: 1rem; 
    line-height: 1.6;
    margin-bottom: 30px;
  }
  
  /* 各イベント固有のスタイル（スマホ用縦並び） */
  .event_text,
  .event_images_pk_right,
  .event_sub_images_redbull_right,
  .event_sub_images_school_right,
  .event_images_cup_right {
    width: 100%;
  }
  
  /* 画像リストを横並びに直す（元のデザインでは縦並びだったもの） */
  .event_images_pk_right,
  .event_sub_images_redbull_right,
  .event_sub_images_school_right,
  .event_images_cup_right {
    flex-direction: row;
    width: 100%;
  }
  .event_img_pk_medium,
  .event_img_redbull_small,
  .event_img_school_small,
  .event_images_cup_right .event_img_cup_medium {
    width: calc((100% - 20px) / 2);
  }
  .event_img_pk_large,
  .event_images_cup_right .event_img_cup_large {
    width: 100%;
  }

  /* Assist CUPの右側：集合写真の上にミディアム画像を配置 */
  .event_images_cup_right {
    flex-direction: column;
  }
  .event_images_cup_right .event_img_cup_medium {
    width: 100%;
  }

  /* Assist CUPの中央：2枚のスモール画像を横並びに */
  .event_sub_images_cup_center {
    flex-direction: row;
  }
  .event_sub_images_cup_center .event_img_cup_small {
    width: calc((100% - 20px) / 2);
  }
}