@charset "utf-8";

@import url(reset.css);

body {
  font-family:
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #231815;
  background-size: 100%;
}

.box>.inner {
  width: 1160px;
  margin: 0 auto;
}

.sp {
  display: none;
}

.pc {
  display: block;
}

/* --------------------------
header 
----------------------------*/

#header {
  background-image: url(../img/kv_bg.jpg);
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0 auto;
  padding: 10px 0;
  overflow: hidden;
  /* ← はみ出した左右を見せない */
  position: relative;
}

/* 中央に固定する「箱」 */
#header .header-inner {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* ← 常に中央にする */
  width: 100%;
  max-width: 1440px;
  /* 大きくなれる上限 */
  min-width: 1160px;
  /* これ以上小さくならない */
}

/* タイトル画像（PC / SP 共通） */
#header .title {
  text-align: center;
  width: 100%;
}

#header .title img {
  width: 100%;
  height: auto;
  padding: 0 60px;
  display: block;
}

/* 日時画像 */
#header .kv_date {
  text-align: center;
  width: 100%;
}

#header .kv_date img {
  width: 100%;
  height: auto;
  padding: 0 300px 30px;
  margin-top: 10px;
  display: block;
}

/* ==========================
   スライダーセクション
========================== */
#photo-slider {
  background: #ffffff;
  padding: 40px 0 0;
  overflow: hidden;
}

.photo-slider-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0;
}

/* 上下の列 */
.slider-row {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

/* 画像の横並び行 */
.slider-track {
  display: flex;
  gap: 8px;
  animation: slide-loop 20s linear infinite; /* 基本は右→左 */
  will-change: transform;
}

/* 写真1枚 */
.slider-item {
  flex: 0 0 auto;
  width: 280px; /* 画像1枚の幅 */
}

.slider-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* 中央タイトル画像（PC/SPは既存の .pc .sp メディアクエリを利用） */
.photo-slider-center {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  overflow: hidden;  /* はみ出した左右を隠す */
}

.photo-slider-center-inner {
  flex: 0 0 auto;
  width: 100%;
  max-width: 1140px; /* 基本は1140px */
  min-width: 900px;  /* 900pxより小さくならない。画面が狭いと左右が切れる */
}

.photo-slider-center-inner img {
  display: block;
  width: 100%;
  height: auto;
}

/* 下段はアニメーション反転（左→右） */
.slider-row--bottom .slider-track {
  animation-direction: reverse;
}

/* スライダーアニメーション */
.slider-track {
  animation: slide-loop 20s linear infinite;
  will-change: transform;
}

/* JS がセットした --slide-width を使う（ここが重要） */
@keyframes slide-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--slide-width)));
  }
}


/* 無限ループ用アニメーション
   JSで中身を2回分に増やしているので、-50%でループ */
@keyframes slide-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-3688px); /* ← 12枚分ピッタリ */
  }
}


/* スマホ向けの微調整（必要に応じて） */
@media (max-width: 767px) {
  #photo-slider {
    padding: 24px 0 0;
  }
  .slider-row {
    margin-bottom: 16px;
  }
  .photo-slider-center {
    margin-bottom: 16px;
  }
}



/* =============================
   PRセクション（波背景）
   ============================= */
.pr-section {
  position: relative;
  padding: 180px 0;
  background: #fff;
  overflow: hidden;
}

.pr-inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 40px;
}

/* 両サイドの波（幅210px固定・縦リピート） */
.pr-section::before,
.pr-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  background-repeat: repeat-y;
  background-size: 200px auto;
  pointer-events: none;
}

.pr-section::before {
  left: 0;
  background-image: url("../img/pr_wave-left.png");
}

.pr-section::after {
  right: 0;
  background-image: url("../img/pr_wave-right.png");
}

/* タイトル３つの画像 */

.pr-head {
  text-align: center;
  margin-bottom: 48px;
}

/* 共通ラッパー：中央寄せ＋左右カット用 */
.pr-copy {
  max-width: 100%;
  margin: 0 auto 16px;
  overflow: hidden;
  /* 画像が最小幅で止まった時に左右をカット */
}

.pr-copy img {
  display: block;
  margin: 0 auto;
}

.pr-copy-1 img {
  width: clamp(650px, 100%, 860px);
  margin-bottom: 20px;
}

.pr-copy-2 img {
  width: clamp(900px, 100%, 1040px);
  margin-bottom: 25px;
}

.pr-copy-3 img {
  width: clamp(600px, 100%, 780px);
}

/* ※ clamp(最小幅, 100%, 基本幅)
   → 画面が広い：基本幅で固定
   → 中くらい：100%で縮む
   → もっと狭い：最小幅で止まり、overflow:hidden で左右が切れる
*/

/* 中央テキスト＆写真４枚 */
.pr-content {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 0 40px;
}

/* テキスト（中央） */
.pr-text-block {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
  font-size: 21px;
  font-weight: 600;
  line-height: 42px;
  color: #333;
  text-align: center;
}

.pr-lead {
  margin-bottom: 20px;
  line-height: 46px;
}

.pr-point {
  font-size: 24px;
  margin: 0 0 20px;
  font-weight: 700;
  color: #e94a3b;
  line-height: 46px;
}

.pr-point span {
  background: linear-gradient(transparent 60%, #ffe4d2 60%);
}

/* 写真（position で配置） */
.pr-photo {
  position: absolute;
  margin: 0;
  z-index: 1;
}

.pr-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 位置指定（お好みで数値調整してください） --- */
/* 左上 */
.pr-photo-1 {
  width: 400px;
  left: -150px;
  top: 0;
}

/* 左下 */
.pr-photo-2 {
  width: 300px;
  left: -80px;
  bottom: 160px;
}

/* 右上 */
.pr-photo-3 {
  width: 400px;
  right: -180px;
  top: -10px;
}

/* 右下 */
.pr-photo-4 {
  width: 300px;
  right: -110px;
  bottom: 50px;
}


/* ==============================
   INFORMATION セクション
============================== */

.info-section {
  background-color: #9cd4f4;

  /* ドット2層（ずらし配置） */
  background-image:
    radial-gradient(#bde4f8 3px, transparent 3px),
    radial-gradient(#bde4f8 3px, transparent 3px);

  /* 各レイヤーのサイズ */
  background-size: 32px 32px, 32px 32px;

  /* 2層目を半分ずらす */
  background-position: 0 0, 16px 16px;

  /* ★ドットを全面に敷き詰める重要ポイント */
  background-repeat: repeat, repeat;
}



/* 中央のコンテンツ幅 */
.info-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 130px 20px 100px;
}

/* 見出し */
.info-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 70px;
}

.info-title img {
  display: block;
  width: 610px;
  max-width: 100%;
  height: auto;
}

/* 上段レイアウト */
.info-main {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 60px;
}

.info-detail {
  flex: 1 1 0;
}

/* 情報リスト */
.info-list {
  margin: 0;
}

.info-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 8px;
  align-items: start;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin-bottom: 20px;
}

.info-row dt {
  padding: 0 14px;
  min-width: 70px;
  border-radius: 15px;
  background: #3467b3;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.08em;
}

.info-row dd {
  margin: 0;
  color: #333;
}

/* 「体験＆観戦：無料」バッジ */
.info-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
}

.info-badge--free {
  background: #faed00;
  color: #333;
}

/* 無料の文字だけ強調 */
.info-badge-free-text {
  color: #ff0000;   /* 赤色 */
  font-size: 25px;  /* 好きなサイズに調整可能 */
  font-weight: 800; /* 太めにしたい場合 */
}


/* 備考テキスト */
.info-note {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 写真 */
.info-photo {
  flex: 0 0 420px;
}

.info-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15);
}

/* 下段：アンバサダー・MC カード全体 */
.info-ambassadors {
  margin-top: 20px;
  margin-bottom: 80px;
  padding: 40px 40px 36px;
  border-radius: 40px;
  background: #1e72c7;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 50px;
  row-gap: 30px;
}

/* 各カラム（左・右） */
.ambassador-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 上段：タイトル＋写真を横並び */
.ambassador-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: center;
}

/* タイトル全体 */
.ambassador-title {
  margin: 0;
  line-height: 1.5;
}

/* 前のラベル部分（小さめ） */
.ambassador-label {
  display: inline-block;
  font-size: 20px;       /* ← フォント小さめ */
  font-weight: 500;
}

/* 名前部分（大きく太く） */
.ambassador-name {
  display: inline-block;
  font-size: 28px;       /* ← 名前を大きく */
  font-weight: 700;
}

/* 写真（丸型） */
.ambassador-photo img {
  display: block;
  width: 180px;
  height: 180px;
  object-fit: cover;
}

/* 下段：本文 */
.ambassador-text p {
  font-size: 18px;
  line-height: 32px;
  margin: 0;
}



/* youtube */ 
.video {
  position: relative;
  width:100%; 
  height:0; 
  padding-top: 56.25%; 
  margin-bottom: 100px;
}

.video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* =============================
   topicsセクション（波背景）
   ============================= */
.topics-section {
  position: relative;
  padding: 180px 0 100px;
  background: #fff;
  overflow: hidden;
}

.topics-inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 140px 100px;
}

/* 両サイドの波（幅210px固定・縦リピート） */
.topics-section::before,
.topics-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180px;
  background-repeat: repeat-y;
  background-size: 180px auto;
  pointer-events: none;
}

.topics-section::before {
  left: 0;
  background-image: url("../img/topics_wave-left.png");
}

.topics-section::after {
  right: 0;
  background-image: url("../img/topics_wave-right.png");
}

.topics-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 70px;
}

.topics-title img {
  display: block;
  width: 460px;
  max-width: 100%;
  height: auto;
}

/* topics コンテンツ全体 */
.topics-block {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

/* 各トピック横並び */
.topic-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

/* 左側テキスト */
.topic-text {
  flex: 1;
}

.topic-title {
  font-size: 40px;
  font-weight: 900;
  margin-bottom: 20px;
  line-height: 1.3;
}

.topic-desc {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
}

/* 右側画像 */
.topic-image {
  flex-shrink: 0;
  width: 460px;
}

.topic-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== topics 追記リンク ===== */
.topic-links {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}

.topic-organizer,
.topic-flyer {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #444;
}

.topic-link {
  color: #d64a7b;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s ease;
}

.topic-link:hover {
  opacity: .75;
}

/* 作成中リンク（見た目はリンク風だが、押せない） */
.topic-link--disabled {
  pointer-events: none;
  opacity: .55;
}



/* ==============================
   4types セクション
============================== */

.types-section {
  background-color: #9cd4f4;

  /* ドット2層（ずらし配置） */
  background-image:
    radial-gradient(#bde4f8 3px, transparent 3px),
    radial-gradient(#bde4f8 3px, transparent 3px);

  /* 各レイヤーのサイズ */
  background-size: 32px 32px, 32px 32px;

  /* 2層目を半分ずらす */
  background-position: 0 0, 16px 16px;

  /* ★ドットを全面に敷き詰める重要ポイント */
  background-repeat: repeat, repeat;
}

.types-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 70px;
}

.types-title img {
  display: block;
  width: 1000px;
  max-width: 100%;
  height: auto;
}

.types-inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 130px 20px 100px;
}

ul.type {
  margin: 0 0 100px 40px;
}

ul.type>li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 70px;
}

ul.type>li>img {
  width: 545px;
}

ul.type>li>div {
  width: calc(100% - 565px);
}

ul.type>li>div>h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

ul.type>li>div>h3>i {
  margin-right: 10px;
}

ul.type>li>div>p {
  font-size: 16px;
  line-height: 30px;
}

/* =============================
   ruleセクション（波背景）
   ============================= */
.rule-section {
  position: relative;
  padding: 180px 0;
  background: #fff;
  overflow: hidden;
}

.rule-inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 140px 100px;
}

/* 両サイドの波（幅210px固定・縦リピート） */
.rule-section::before,
.rule-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180px;
  background-repeat: repeat-y;
  background-size: 180px auto;
  pointer-events: none;
}

.rule-section::before {
  left: 0;
  background-image: url("../img/rule_wave-left.png");
}

.rule-section::after {
  right: 0;
  background-image: url("../img/rule_wave-right.png");
}

/* 見出し */
.rule-heading {
  text-align: center;
  margin-bottom: 60px;
}

.rule-title img {
  display: block;
  margin: 0 auto;
  max-width: 420px;
  width: 100%;
  height: auto;
}

/* 2×2 レイアウト全体 */
.rule-prize-layout {
  display: grid;
  grid-template-columns: 5fr 5fr;  /* 左：表／右：テキスト・ボタン */
  column-gap: 30px;
  row-gap: 60px;
  align-items: flex-start;
  margin-bottom: 50px;
}

.rule-score-layout {
  display: grid;
  grid-template-columns: 7fr 3fr;  /* 左：表／右：テキスト・ボタン */
  column-gap: 30px;
  row-gap: 60px;
  align-items: flex-start;
}

/* 画像共通 */
.rule-figure {
  margin: 0;
}

.rule-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ルール本文 */
.rule-text {
  font-size: 16px;
  color: #333;
  margin: 0 0 12px;
  line-height: 26px;
}

.rule-block-title {
  font-size: 26px;
  line-height: 34px;
  font-weight: 700;
  margin: 0 0 10px;
}

.rule-note {
  font-size: 12px;
  line-height: 18px;
  color: #666;
}

/* チャレンジマッチ 各競技ルールリンク */
.rule-challenge-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rule-challenge-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 240px;
  width: 100%;
  padding: 10px 26px;
  border-radius: 999px;
  border: 4px solid #fbb03b; /* オレンジ系 */
  background: #fff;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.rule-challenge-btn:hover {
  background: #fff7e5;
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.rule-challenge-label {
  flex: 1;
}

.rule-challenge-icon {
  margin-left: 20px;
  flex-shrink: 0;
}

.rule-challenge-icon img {
  display: block;
  width: 20px;   /* 矢印画像のサイズに合わせて調整 */
  height: auto;
}

/* 下側の表とボタンの間の余白調整（必要なら） */
.rule-prize {
  margin-bottom: 10px;
}

/* スマホ用（幅が狭いときは縦並び） */
@media (max-width: 900px) {
  .rule-section {
    padding: 120px 0 120px;
  }

  .rule-layout {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .rule-heading {
    margin-bottom: 40px;
  }

  .rule-block-title {
    font-size: 22px;
  }

  .rule-challenge-btn {
    font-size: 18px;
    padding: 12px 20px;
  }
}

/* エントリーチケット全体 */
.rule-entry {
  width: 100%;
  max-width: 900px;
  margin: 30px auto 150px;
  text-align: center;
}

/* リンク内の画像 */
.rule-entry-link {
  display: inline-block;
  transition: transform 0.25s ease;
}

.rule-entry-link:hover {
  transform: scale(1.03); /* 少し拡大 */
}

.rule-entry-img {
  width: 100%;
  height: auto;
  display: block;
}

/* タイムテーブル */
.time-table {
  width: 100%;
  max-width: 1000px;
  margin: 30px auto 150px;
  text-align: center;
}

.time-table-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.timetable-title img {
  display: block;
  margin: 0 auto 50px;
  max-width: 600px;
  width: 100%;
  height: auto;
}

/* タイムテーブル */
.map-table {
  width: 100%;
  max-width: 1000px;
  margin: 30px auto 150px;
  text-align: center;
}

.map-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 30px;
  margin-bottom: 20px;
}

.map-title img {
  display: block;
  margin: 0 auto 50px;
  max-width: 420px;
  width: 100%;
  height: auto;
}

.map-table p{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

/* sponsor */

.partner-box {
  width: 100%;
  padding: 30px 100px 20px;
  margin: 100px auto 0;
  text-align: center;
}

.partner-title {
  margin-bottom: 60px;
}

.partner-title p {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.partner-title span {
  font-size: 18px;
  font-weight: bold;
  color: #F7931E;
}

.partner-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 40px; 
  justify-content: space-between;
  align-items: center;
}

/* footer */

footer {
  background: #13427f;
  padding: 16px 0 100px;
  text-align: center;
}

footer>p {
  color: #fff;
  font-size: 16px;
}