/*
Theme Name: Lightning Child
Template: lightning
*/

/* ===== Design tokens ===== */
:root{
  --accent:#1d7fff;            /* ブルー */
  --accent-weak:#e9f2ff;
  --text:#263238;
  --muted:#607d8b;
  --bg:#ffffff;
  --card:#f9fafb;
  --radius:14px;
  --shadow:0 8px 20px rgba(0,0,0,.06);
  --container:1120px;
  --ff: Inter, Nunito, "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

html,body{margin:0;padding:0}
body{font-family:var(--ff); color:var(--text); background:var(--bg); line-height:1.7}

/* ===== Headerのロゴ横にテキスト（必要なら） ===== */
.site-header-logo a::after, .site-logo a::after{
  content:" Black Clover";
  margin-left:10px; font-weight:800; color:var(--text); letter-spacing:.02em;
}

/* ===== Utilities ===== */
.container{max-width:var(--container); margin:auto; padding:0 20px}
.section-title{
  text-align:center; font-size:clamp(22px,4vw,32px); font-weight:800;
  color:#3a3a3a; margin:40px 0 18px;
  opacity:0; transform:translateY(18px); animation:fadeInUp .9s ease forwards;
}
.subtext{color:var(--muted); text-align:center; margin:0 auto 30px; max-width:760px}

/* ===== Hero ===== */
.hero{
  position:relative; min-height:72vh; display:grid; place-items:center; isolation:isolate;
  background:#000;
}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35));
  z-index:-1;
}
.hero-inner{ text-align:center; color:#fff; padding:0 20px }
.hero h1{ font-size:clamp(28px,5.2vw,56px); margin:0 0 10px; font-weight:800; letter-spacing:.01em }
.hero p{ color:#e9eef6; font-size:clamp(14px,2.6vw,18px); margin:0 }

/* ===== Image section（見出しは外、本文は画像の上） ===== */
.bg-section{
  position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  margin: 0 auto 56px; max-width:var(--container);
}
.bg-section .bg{
  width:100%; height:420px; background-size:cover; background-position:center;
  filter:saturate(.95);
}
.bg-section .overlay{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:24px; color:#111;
}
.bg-section .overlay .panel{
  background:rgba(255,255,255,.82); backdrop-filter:blur(6px);
  border-radius:12px; padding:22px 18px; max-width:min(92%,880px);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.bg-section .overlay .panel strong{ display:block; font-size:1.15rem; margin-bottom:4px }

/* ===== Cards（参加するには） ===== */
.card-grid{
  display:grid; grid-template-columns:repeat(2, minmax(260px,1fr));
  gap:26px; max-width:var(--container); margin:0 auto 80px; padding:0 20px;
}
.card{
  background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  transform:translateY(0) scale(1); transition:.45s ease transform, .45s ease box-shadow;
}
.card:hover{ transform:translateY(-8px) scale(1.02); box-shadow:0 16px 32px rgba(0,0,0,.12) }
.card img{ width:100%; height:auto; display:block }
.card .body{ padding:22px 18px; text-align:center }
.card h3{ margin:0 0 6px; font-size:1.3rem }
.card p{ margin:0; color:#333 }

/* ===== SNS ===== */
.social{
  background:var(--accent-weak); padding:56px 20px; text-align:center
}
.sns{ display:flex; gap:36px; justify-content:center; flex-wrap:wrap; margin-top:18px }
.sns a img{
  width:60px; height:60px; border-radius:16px; box-shadow:0 6px 14px rgba(0,0,0,.12);
  transition:.28s ease transform, .28s ease box-shadow, .28s ease filter;
}
.sns a:hover img{ transform:translateY(-8px) rotate(-2deg) scale(1.06); box-shadow:0 12px 24px rgba(0,0,0,.18) }

/* ===== Animations ===== */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:translateY(0)} }

/* ===== Responsive ===== */
@media (max-width: 860px){
  .bg-section .bg{ height:360px }
  .card-grid{ grid-template-columns:1fr }
}