/* =========================================================
  Index hotfix: Fighters image becomes square on mobile only
  - Affects only: #fighters #ftsGrid .media
  - Mobile breakpoint: <= 640px
========================================================= */

@media (max-width: 640px){
  #fighters #ftsGrid .media{
    aspect-ratio: 1 / 1;
  }
}

/* =========================================================
  Index Contact Upgrade
  - 対象：INDEX の Contact セクションのみ
  - 目的：おしゃれ / かっこよく / 他セクションと乖離しない
  - 注意：新規CSSは作らず、このファイルで完結
========================================================= */

#contact .contactPanel{
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 22px;
  background: linear-gradient(180deg, var(--card), var(--card2));
  /* 大枠の線（ボックス感）だけ消す */
  border: 0;
  outline: 0;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}

/* ほんのり赤い“気配”だけ足す */
#contact .contactPanel::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(760px 440px at 14% 0%, rgba(225,6,0,.16), transparent 60%),
    radial-gradient(520px 360px at 92% 18%, rgba(255,59,48,.10), transparent 55%);
  pointer-events:none;
}

#contact .contactPanel > *{
  position:relative;
  z-index:1;
}

#contact .contactIntro{
  max-width: 72ch;
  margin: 0 auto;
}

#contact .contactIntro__title{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
  padding-bottom: 10px;
  position: relative;
}

#contact .contactIntro__title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: min(260px, 60%);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(225,6,0,1), rgba(255,59,48,0));
}

#contact .contactIntro p{
  margin: 10px 0;
  color: rgba(255,255,255,.82);
}

#contact .contactIntro__list{
  list-style:none;
  padding:0;
  margin: 14px 0 10px;
  display:grid;
  gap:10px;
}

#contact .contactIntro__list li{
  position: relative;
  padding: 10px 12px 10px 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}

#contact .contactIntro__list li::before{
  content:"✓";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:13px;
  color: rgba(255,255,255,.92);
  background: rgba(225,6,0,.18);
  border: 1px solid rgba(225,6,0,.35);
}

#contact .contactPanel__cta{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:center;
}

#contact .contactBtn{
  padding: 12px 18px;
  font-size: 15px;
  justify-content: center;
  min-width: 320px;
}

@media (max-width: 640px){
  #contact .contactPanel{
    padding: 18px;
  }
  #contact .contactBtn{
    width:100%;
    min-width: 0;
  }
  #contact .contactIntro{
    max-width: none;
  }
}



#fighters{ background-color: rgba(80,180,255,.035); }
#news{    background-color: rgba(225,6,0,.030); }
#gallery{ background-color: rgba(0,210,170,.028); }
#follow{  background-color: rgba(170,110,255,.024); }
#contact{ background-color: rgba(255,180,80,.022); }


/* =========================================================
  Index Sponsor (no box / no dark plate)
  - 大枠ライン/濃い背景/枠を消して、ロゴを素直に見せる
========================================================= */

#sponsor.sponsorBar{
  padding: 26px 0 18px;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#sponsor.sponsorBar::before,
#sponsor.sponsorBar::after{
  content: none !important;
}

#sponsor .sponsorBar__logos{
  margin-top: 12px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;

  display:flex;
  justify-content:center;
  align-items:center;
  gap: 16px;
}

#sponsor .sponsorBar__logos::before,
#sponsor .sponsorBar__logos::after,
#sponsor .sponsorBar__logo::before,
#sponsor .sponsorBar__logo::after{
  content: none !important;
}

#sponsor .sponsorBar__logo{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#sponsor .sponsorBar__logo img{
  display:block;
  max-width: min(720px, 92vw);
  height:auto;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  border-radius: 14px; /* 角だけ自然に */
}