/* =============================================
   FC Club — main.css
   黒 #1A1A1A / 黄 #FFE000 / 水 #4A8FBF
   ============================================= */

/* 0. Reset ───────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family:var(--font-base); color:var(--color-text); background:var(--color-white); line-height:1.8; -webkit-font-smoothing:antialiased; }
img  { max-width:100%; height:auto; display:block; }
a    { color:inherit; text-decoration:none; }
ul   { list-style:none; }

/* 1. Layout ──────────────────────────────── */
.container { width:min(var(--container), 100% - var(--container-padding) * 2); margin-inline:auto; }
.section    { padding-block:var(--space-2xl); }

/* 2. Typography ──────────────────────────── */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--space-lg); gap:var(--space-sm); }
.section-label { font-family:var(--font-en); font-size:var(--text-xs); font-weight:700; letter-spacing:.25em; color:var(--color-gold); display:block; margin-bottom:.25rem; }
.section-title { font-family:var(--font-en); font-size:var(--text-3xl); font-weight:700; color:var(--color-black); line-height:1.2; }

/* 3. ロゴ ────────────────────────────────── */
.logo-text { font-family:var(--font-en); font-size:1.35rem; font-weight:700; letter-spacing:.05em; color:var(--color-black); }
.logo-accent { color:var(--color-gold); }

/* 4. ボタン ──────────────────────────────── */
.more-btn {
  font-family:var(--font-en); font-size:var(--text-xs); font-weight:700; letter-spacing:.15em;
  color:var(--color-black); border:2px solid var(--color-black);
  padding:.5em 1.4em; border-radius:100px;
  transition:background var(--transition),color var(--transition);
  white-space:nowrap;
}
.more-btn:hover { background:var(--color-black); color:var(--color-white); }

.cta-btn {
  display:inline-block; font-family:var(--font-en); font-weight:700; font-size:var(--text-lg);
  letter-spacing:.15em; background:var(--color-gold); color:var(--color-black);
  padding:.9em 3em; border-radius:100px;
  transition:opacity var(--transition),transform var(--transition);
}
.cta-btn:hover { opacity:.85; transform:translateY(-2px); }

/* 5. Header ──────────────────────────────── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(0,0,0,.08);
  transition:background var(--transition);
}
.site-header.is-scrolled { background:rgba(255,255,255,1); box-shadow:var(--shadow-sm); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:68px; padding-inline:var(--container-padding); max-width:var(--container); margin-inline:auto; }
.site-logo__link { display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.site-logo__img,
.site-logo .custom-logo,
.site-logo img { height:48px; width:auto; display:block; flex-shrink:0; }
.site-logo__img--drawer { height:56px; }
.logo-name { font-family:var(--font-en); font-weight:700; font-size:clamp(.95rem,1.8vw,1.2rem); line-height:1.3; letter-spacing:.05em; color:var(--color-black); display:flex; flex-wrap:wrap; gap:.25em .4em; max-width:12em; }
.logo-name__word { white-space:nowrap; }
.logo-name__initial { color:var(--color-gold); }
.logo-name--light { color:#fff; }
.sp-drawer__logo { display:flex; align-items:center; gap:.65rem; }

/* グローバルナビ */
.global-nav__list { display:flex; gap:var(--space-md); align-items:center; }
.global-nav__list a { font-family:var(--font-en); font-size:var(--text-sm); font-weight:600; letter-spacing:.08em; color:var(--color-black); position:relative; padding-bottom:4px; }
.global-nav__list a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--color-gold); transition:width var(--transition); }
.global-nav__list a:hover::after, .global-nav__list .current-menu-item > a::after { width:100%; }

/* ハンバーガー */
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:26px; height:2px; background:var(--color-black); transition:transform var(--transition),opacity var(--transition); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* SP ドロワー */
.sp-drawer { position:fixed; inset:0 0 0 auto; width:min(320px,85vw); background:var(--color-black); padding:var(--space-xl) var(--space-md); transform:translateX(100%); transition:transform .35s ease; z-index:200; }
.sp-drawer.is-open { transform:translateX(0); }
.sp-drawer__close { position:absolute; top:1rem; right:1rem; background:none; border:none; color:var(--color-white); font-size:1.5rem; cursor:pointer; }
.sp-drawer__logo .logo-text { color:var(--color-white); font-size:1.5rem; }
.sp-drawer__list { margin-top:var(--space-lg); display:grid; gap:var(--space-sm); }
.sp-drawer__list a { font-family:var(--font-en); font-size:var(--text-xl); font-weight:700; color:var(--color-white); letter-spacing:.1em; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.1); display:block; transition:color var(--transition); }
.sp-drawer__list a:hover { color:var(--color-gold); }
.sp-drawer__sns { display:flex; gap:var(--space-sm); margin-top:var(--space-lg); }
.sp-drawer__sns a { color:var(--color-gold); }
.sp-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .35s; z-index:190; }
.sp-overlay.is-open { opacity:1; pointer-events:auto; }

/* 6. Hero ────────────────────────────────── */
.hero { position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--color-black); }
.hero__slider, .swiper-wrapper, .swiper-slide { height:100%; }
.hero__slide-img { height:100%; background-size:cover; background-position:center; filter:brightness(.55); transition:transform 8s ease; }
.swiper-slide-active .hero__slide-img { transform:scale(1.05); }
.hero__slide-placeholder { background:linear-gradient(135deg,#111 0%,#2a2a2a 100%); }
.swiper-pagination { bottom:80px !important; }
.swiper-pagination-bullet { background:#fff; opacity:.5; width:8px; height:8px; }
.swiper-pagination-bullet-active { background:var(--color-gold); opacity:1; width:24px; border-radius:4px; }

/* ヒーローオーバーレイ */
.hero__overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; z-index:2; padding:var(--space-md); }
.hero__label { font-family:var(--font-en); font-size:var(--text-xs); letter-spacing:.3em; opacity:.7; margin-bottom:var(--space-sm); }
.hero__title { display:flex; align-items:center; gap:.2em; font-family:var(--font-en); font-size:clamp(4rem,12vw,9rem); font-weight:700; line-height:1; margin-bottom:.2em; }
.hero__title--club { flex-direction:column; gap:.1em; font-size:clamp(2.4rem,8vw,5.5rem); letter-spacing:.04em; }
.hero__title-row { display:flex; align-items:center; gap:.2em; }
.hero__title-row--sub { font-size:.55em; letter-spacing:.18em; }
.hero__title-en { color:#fff; }
.hero__title-iv { color:var(--color-gold); text-shadow:0 0 40px rgba(255,224,0,.5); }
.hero__sub { font-size:var(--text-sm); opacity:.8; letter-spacing:.1em; }

/* NEXT MATCH ティッカー */
.hero__next-match { position:absolute; bottom:0; left:0; right:0; z-index:3; background:var(--color-gold); color:var(--color-black); display:flex; align-items:center; gap:var(--space-md); padding:.6rem var(--space-md); font-family:var(--font-en); font-size:var(--text-sm); font-weight:700; flex-wrap:wrap; }
.hero__next-match-label { background:var(--color-black); color:var(--color-gold); padding:.2em .8em; border-radius:100px; font-size:var(--text-xs); letter-spacing:.1em; white-space:nowrap; }
.hero__next-match-vs em { font-style:normal; margin-inline:.4em; opacity:.6; }
.hero__next-match-venue { font-weight:400; opacity:.7; font-size:var(--text-xs); }

/* 7. News ────────────────────────────────── */
.news-section { background:var(--color-bg); }
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); }
.news-card { background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--transition),box-shadow var(--transition); }
.news-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.news-card__link { display:block; }
.news-card__thumb { aspect-ratio:16/9; overflow:hidden; }
.news-card__thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.news-card:hover .news-card__thumb img { transform:scale(1.04); }
.news-card__body { padding:var(--space-sm); }
.news-card__date { font-family:var(--font-en); font-size:var(--text-xs); color:var(--color-text-sub); display:block; margin-bottom:.3rem; }
.news-card__title { font-size:var(--text-sm); font-weight:700; line-height:1.5; }

/* 8. Match Results ───────────────────────── */
.match-section { background:#fff; }
.match-list { display:grid; gap:.75rem; }
.match-row { background:var(--color-bg); border-radius:var(--radius-md); padding:var(--space-sm) var(--space-md); display:grid; grid-template-columns:auto 1fr; gap:.5rem var(--space-md); align-items:center; border-left:4px solid var(--color-border); transition:border-color var(--transition); }
.match-row:hover { border-color:var(--color-gold); }
.match-row__meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.match-row__meta time { font-family:var(--font-en); font-weight:700; font-size:var(--text-sm); color:var(--color-black); white-space:nowrap; }
.match-row__league { font-size:var(--text-xs); background:var(--color-black); color:#fff; padding:.15em .6em; border-radius:4px; }
.match-row__ha { font-size:var(--text-xs); font-family:var(--font-en); font-weight:700; padding:.15em .6em; border-radius:4px; }
.match-row__ha--home { background:var(--color-gold); color:var(--color-black); }
.match-row__ha--away { background:var(--color-blue); color:#fff; }
.match-row__ha--neutral { background:var(--color-border); color:var(--color-black); }
.match-row__teams { display:flex; align-items:center; gap:var(--space-sm); flex-wrap:wrap; }
.match-row__us, .match-row__opp { font-weight:700; font-size:var(--text-sm); flex:1; }
.match-row__us { text-align:right; }
.match-row__opp { text-align:left; }
.match-row__score { display:flex; align-items:center; gap:.4em; font-family:var(--font-en); font-size:var(--text-2xl); font-weight:700; min-width:90px; justify-content:center; background:#fff; border-radius:var(--radius-sm); padding:.2em .6em; }
.match-row__score-sep { color:var(--color-text-sub); font-size:var(--text-lg); }
.match-row__score--win   { background:var(--color-gold); color:var(--color-black); }
.match-row__score--lose  { background:var(--color-black); color:#fff; }
.match-row__score--draw  { background:var(--color-blue);  color:#fff; }
.match-row__score-tbd { font-size:var(--text-sm); color:var(--color-text-sub); }
.match-row__venue { grid-column:1/-1; font-size:var(--text-xs); color:var(--color-text-sub); }

/* 9. Instagram ───────────────────────────── */
.instagram-section { background:var(--color-bg-dark); }
.instagram-section .section-label { color:var(--color-gold); }
.instagram-section .section-title { color:#fff; }
.instagram-section .more-btn { color:#fff; border-color:#fff; }
.instagram-section .more-btn:hover { background:#fff; color:var(--color-black); }
/* Smash Balloon のグリッドを上書き */
.instagram-section .sbi_photo_wrap { border-radius:var(--radius-sm); overflow:hidden; }

/* プレースホルダー（プラグイン未設定時） */
.instagram-placeholder { background:rgba(255,255,255,.05); border:2px dashed rgba(255,255,255,.2); border-radius:var(--radius-lg); padding:var(--space-xl); text-align:center; margin-top:var(--space-lg); }
.instagram-placeholder__inner { max-width:480px; margin-inline:auto; }
.instagram-placeholder__title { font-size:var(--text-lg); font-weight:700; color:#fff; margin-block:var(--space-sm); }
.instagram-placeholder__steps { text-align:left; display:inline-block; margin-block:var(--space-sm); color:rgba(255,255,255,.7); font-size:var(--text-sm); display:grid; gap:.5rem; counter-reset:step; }
.instagram-placeholder__steps li { display:flex; gap:.5em; }
.instagram-placeholder__steps li::before { content:counter(step); counter-increment:step; background:var(--color-gold); color:var(--color-black); width:1.5em; height:1.5em; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8em; font-weight:700; flex-shrink:0; margin-top:.1em; }
.instagram-placeholder__link { display:inline-block; margin-top:var(--space-md); color:var(--color-gold); font-weight:700; border-bottom:1px solid var(--color-gold); }

/* 10. Sponsor ────────────────────────────── */
.sponsor-section { background:#fff; }
.sponsor-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-md); align-items:center; }
.sponsor-item { transition:opacity var(--transition); }
.sponsor-item:hover { opacity:.7; }
.sponsor-item--gold   img { height:80px; width:auto; }
.sponsor-item--silver img { height:60px; width:auto; }
.sponsor-item--bronze img { height:44px; width:auto; }
.sponsor-item__name { font-weight:700; font-size:var(--text-sm); padding:.5em 1em; background:var(--color-bg); border-radius:var(--radius-sm); }
.sponsor-recruit { text-align:center; margin-top:var(--space-lg); font-size:var(--text-sm); color:var(--color-text-sub); }
.sponsor-recruit a { color:var(--color-blue); font-weight:700; }

/* 11. CTA Section ────────────────────────── */
.cta-section { background:var(--color-black); text-align:center; padding:var(--space-2xl) var(--space-md); }
.cta-section__label { font-family:var(--font-en); font-size:var(--text-xs); letter-spacing:.3em; color:var(--color-gold); display:block; margin-bottom:.5rem; }
.cta-section__title { font-family:var(--font-en); font-size:clamp(var(--text-3xl),5vw,var(--text-5xl)); font-weight:700; color:#fff; margin-bottom:.5rem; }
.cta-section__title--fude { font-family:'Yuji Syuku','Yuji Boku',serif; font-size:clamp(2rem,5.5vw,4.2rem); letter-spacing:.06em; line-height:1.35; }
.cta-section__sub { color:rgba(255,255,255,.6); font-size:var(--text-sm); margin-bottom:var(--space-lg); }

/* 12. Footer ─────────────────────────────── */
.site-footer { background:var(--color-black); color:#fff; padding:var(--space-xl) var(--space-md) var(--space-md); }
.footer-inner { max-width:var(--container); margin-inline:auto; display:grid; gap:var(--space-lg); }
.footer-brand { display:flex; flex-direction:column; gap:.5rem; }
.footer-logo .logo-text { font-size:1.5rem; }
.footer-team-name { font-size:var(--text-xs); color:rgba(255,255,255,.5); }
.footer-nav__list { display:flex; flex-wrap:wrap; gap:var(--space-sm) var(--space-md); }
.footer-nav__list a { font-family:var(--font-en); font-size:var(--text-xs); letter-spacing:.1em; color:rgba(255,255,255,.6); transition:color var(--transition); }
.footer-nav__list a:hover { color:var(--color-gold); }
.footer-sns { display:flex; gap:var(--space-sm); }
.footer-sns__link { display:flex; align-items:center; gap:.4em; color:rgba(255,255,255,.6); font-size:var(--text-xs); transition:color var(--transition); }
.footer-sns__link:hover { color:var(--color-gold); }
.footer-copy { font-size:var(--text-xs); color:rgba(255,255,255,.3); padding-top:var(--space-md); border-top:1px solid rgba(255,255,255,.08); }

/* 13. ページ共通 ─────────────────────────── */
.page-hero { background:var(--color-black); color:#fff; padding:var(--space-2xl) var(--space-md) var(--space-lg); margin-top:68px; }
.page-hero__label { font-family:var(--font-en); font-size:var(--text-xs); letter-spacing:.3em; color:var(--color-gold); display:block; margin-bottom:.5rem; }
.page-hero__title { font-family:var(--font-en); font-size:clamp(var(--text-3xl),5vw,var(--text-4xl)); font-weight:700; }
.page-hero__sub { color:rgba(255,255,255,.6); font-size:var(--text-sm); margin-top:.5rem; }

.page-content { padding-block:var(--space-2xl); }

/* 14. 選手カード ─────────────────────────── */
.player-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--space-md); }
.player-card { background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); text-align:center; transition:transform var(--transition),box-shadow var(--transition); }
.player-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.player-card__photo { aspect-ratio:4/5; overflow:hidden; background:var(--color-bg); }
.player-card__photo img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.player-card:hover .player-card__photo img { transform:scale(1.04); }
.player-card__body { padding:.75rem .5rem; }
.player-card__number { font-family:var(--font-en); font-size:var(--text-3xl); font-weight:700; color:var(--color-gold); line-height:1; }
.player-card__position { font-family:var(--font-en); font-size:var(--text-xs); font-weight:700; background:var(--color-black); color:#fff; padding:.15em .6em; border-radius:100px; display:inline-block; margin:.2rem 0; }
.player-card__name { font-size:var(--text-sm); font-weight:700; margin:.25rem 0; }
.player-card__grade { font-size:var(--text-xs); color:var(--color-text-sub); }

/* 15. フェードイン ───────────────────────── */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
.fade-in.is-visible { opacity:1; transform:translateY(0); }

/* =============================================
   Responsive（768px以下）
   ============================================= */
@media (max-width: 768px) {
  .global-nav { display:none; }
  .hamburger  { display:flex; }
  .site-header .logo-name { display:none; }
  .news-grid  { grid-template-columns:1fr 1fr; }
  .match-row  { grid-template-columns:1fr; }
  .match-row__teams { justify-content:center; }
  .match-row__us, .match-row__opp { flex:none; font-size:var(--text-xs); }
  .hero__next-match { font-size:var(--text-xs); gap:var(--space-sm); }
  .hero__title { font-size:clamp(3rem,15vw,6rem); }
  .hero__title--club { font-size:clamp(1.8rem,10vw,3.5rem); }
}
@media (max-width: 480px) {
  .news-grid { grid-template-columns:1fr; }
  .hero__next-match-venue { display:none; }
}