/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/

:root{
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",
    "Noto Sans JP", sans-serif;
}
body{ font-family: var(--font-base); }


/* --- Gutenbergの全幅ブロックを本当に画面端まで広げる --- */
.entry-content .alignfull{
  width:100vw;                 /* 画面幅いっぱい */
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* === 左右分割ヒーロー === */
.hero-split{
  display:flex;
  min-height:70vh; /* 画面の7割を目安に */
}
.hero-half{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:3rem 1rem;
  overflow:hidden;
}
.hero-half .hero-bg{
  position:absolute;
  inset:0;        /* top/right/bottom/left:0 */
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  filter:brightness(0.85); /* 背景を少し落として文字を読みやすく */
}
.hero-content{
  position:relative;
  z-index:1;
  color:#fff;
  max-width:640px;
  padding:0 1rem;
}
.hero-content h2{
  font-size:clamp(1.6rem, 2.5vw + 1rem, 2.6rem);
  line-height:1.25;
  margin:0 0 0.75rem;
}
.hero-copy{
  margin:0 0 1.25rem;
  font-size:clamp(0.95rem, 1.2vw + .6rem, 1.15rem);
  opacity:.95;
}
.btn{
  display:inline-block;
  padding:.9rem 1.4rem;
  border-radius:9999px;
  background:#00A7CF; color:#fff; text-decoration:none;
  border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18); }
.btn-outline{ background:transparent; border-color:#fff; }
.btn-outline:hover{ background:#fff; color:#111; }

.hero-kids .btn{ background:#F8B400; color:#111; }  /* 左：子ども */
.hero-adults .btn{ background:#00A7CF; }            /* 右：大人  */

/* モバイルは上下2段 */
@media (max-width: 768px){
  .hero-split{ flex-direction:column; }
  .hero-half{ min-height:50vh; }
}

/* Lightning のセクション余白に馴染ませたい場合の微調整（任意） */
.vk_posts .hero-split{ margin-top:0; }


/* ===============================
   無料体験セクション（lp-cta）
================================= */
.lp-cta {
  text-align: center;
  background: linear-gradient(180deg, #f9fcff 0%, #edf7ff 100%);
  padding: 60px 20px;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  max-width: 1080px;
  margin-inline: auto;
}

.lp-cta h2 {
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 28px);
  margin-bottom: 0.5em;
}

.lp-cta p {
  margin-bottom: 1.2em;
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
}

.lp-cta .cta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 1.6em;
}

/* アイコン行 */
.lp-cta .icon-row{
  display:flex; flex-wrap:wrap; gap:14px;
  justify-content:center; margin:.6rem 0 1rem;
  font-weight:700; letter-spacing:.02em;
}
.lp-cta .icon-row p, .icon-row li{ margin:0; list-style:none } /* 段落/リスト両対応 */


/* ---- ボタン共通 ---- */
/* .lp-cta .btn {
  display: inline-block;
  padding: 0.9em 1.6em;
  border-radius: 999px;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
} */

/* ヒーロー内と色を揃える */
/* .btn-kids {
  background-color: #FFB100;
  color: #222;
}
.btn-adult {
  background-color: #2FB3D1;
  color: #fff;
} */

/* ホバー時 */
.btn-kids:hover {
  background-color: #ffcd4a;
}
.btn-adult:hover {
  background-color: #40c9e3;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .lp-cta {
    padding: 48px 16px;
  }
  .lp-cta .cta-row {
    flex-direction: column;
    align-items: center;
  }
  .lp-cta .btn {
    width: 90%;
    max-width: 320px;
  }
}

/* ==== 実績セクション：強調版 ==== */
.proof-highlight{
  max-width:1080px;
  margin:60px auto;
  padding:0 20px;
  text-align:center;
}
.proof-highlight h2{
  font-weight:700;
  font-size:clamp(22px,2.5vw,28px);
  margin-bottom:1.5em;
  position:relative;
}
.proof-highlight h2::after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  background:#0078d7;
  margin:10px auto 0;
  border-radius:2px;
}
.proof-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  list-style:none;
  padding:0;
  margin:0;
}
.proof-cards li{
  background:#fff;
  border:1px solid #e4eaf3;
  border-radius:12px;
  padding:28px 20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.03);
  transition:transform .2s, box-shadow .2s;
}
.proof-cards li:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 14px rgba(0,0,0,0.08);
}
.proof-cards .icon{
  font-size:2rem;
  margin-bottom:.4em;
}
.proof-cards strong{
  display:block;
  font-size:1.1rem;
  margin-bottom:.4em;
  color:#111;
}
.proof-cards p{
  font-size:.95rem;
  color:#444;
  margin:0;
  line-height:1.6;
}
.proof-cards li:nth-child(6) {
  background: linear-gradient(180deg,#fffef7 0%,#fff8e7 100%);
  border-color: #f0e1a6;
}
.proof-cards li:nth-child(6) .icon {
  font-size:2.2rem;
}

@media(max-width:768px){
  .proof-cards li{padding:20px 16px}
}

/* ===== 実績ギャラリー ===== */
.achievement-gallery{
  text-align:center;
  background: linear-gradient(180deg, #f9fcff 0%, #edf7ff 100%);
  padding: 60px 20px;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}
/* 内側の幅を .lp-cta と同等（1080px）に制限 */
.achievement-gallery__inner{
  max-width:1080px;
  margin-inline:auto;
}
.achievement-gallery h2 {
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}
.achievement-gallery .lead {
  color: #555;
  margin-bottom: 2rem;
}
/* ===== 実績ギャラリー：トリミングなし版 ===== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1.8rem;
  justify-items:center;
  align-items:start;
}

/* カード */
.gallery-grid figure{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
  padding:.5rem;
  display:flex;
  flex-direction:column; /* ← キャプションがあっても崩れにくく */
}
.gallery-grid figure:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 12px rgba(0,0,0,.08);
}

/* 画像エリア：高さを固定して全アイテムを揃える */
.gallery-grid img{
  width:100%;
  height:260px;              /* ← 高さを統一（PC） */
  object-fit:contain;        /* ← 切らない（上下/左右に余白が出てもOK） */
  object-position:center;
  background:#f5f7fb;        /* ← 余白部分の色（薄いグレー） */
  border-radius:8px;
  display:block;
  margin-bottom:.6rem;
}

/* キャプション：行数違いでガタつきにくく */
.gallery-grid figcaption{
  font-size:.9rem;
  color:#333;
  padding:0 .6rem .8rem;
  text-align:center;
  line-height:1.4;
  min-height:2.4em;          /* ← 1～2行想定で高さを揃える */
}

/* スマホ：基本も切らない (contain) のまま */
@media (max-width: 600px){
  .gallery-grid img{ height:220px; }  /* 基本高さ */

  /* ← 縦長(ポートレート)だけ少し大きくして読みやすく */
  .gallery-grid figure.portrait img,
  .gallery-grid img.portrait{
    height:300px;               /* 必要なら 280〜320px で調整 */
  }

  .gallery-grid figure{ max-width:520px; width:100%; margin-inline:auto; }
  .gallery-grid figcaption{ font-size:.85rem; min-height:2.4em; }
}

/* 受講者の声 */
.voices{
	padding:3rem 1rem;
	max-width: 1080px;
	margin-inline: auto;
	background:#fff;
}
.voices h2{ text-align:center; margin-bottom:.25rem; font-weight:700; }
.voices-lead{ text-align:center; color:#555; margin-bottom:2rem; }

.voice-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}

.voice-card{
  background:#fff; border:1px solid #e9edf2; border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  padding:1.1rem 1.1rem 1rem; position:relative;
  display:flex; flex-direction:column; gap:.75rem; min-height:220px;
}
.voice-card blockquote{ margin:0; padding-left:2.25rem; position:relative; }
.voice-card blockquote:before{
  content:"“"; position:absolute; left:.2rem; top:-.2rem;
  font-size:2.2rem; line-height:1; color:#8aa4d1; font-weight:700;
}
.voice-card p{ margin:0; color:#333; line-height:1.7; }
.voice-meta{ font-size:.85rem; color:#667; margin-top:auto; }

.voice-tag{
  position:absolute; top:.8rem; right:.8rem;
  font-size:.75rem; padding:.18rem .55rem; border-radius:999px;
  background:#e9f2ff; color:#2056b4; border:1px solid #cfe3ff;
}
.tag-parent{ background:#fff3da; color:#885b00; border-color:#ffe1a6; }
.tag-kids{ background:#eafcf1; color:#0d7a40; border-color:#c8f1d9; }

/* CTA */
.voices-cta{ text-align:center; margin-top:2rem; }
.voices-cta .vk_button_link{ border-radius:999px; padding:.9rem 1.4rem; }

/* スマホ微調整 */
@media (max-width:600px){
  .voice-card{ padding:1rem; }
  .voice-card blockquote{ padding-left:2rem; }
}


/* 親ラッパ */
.kids-courses{background:#eee;padding:3.5rem 1rem}
.kids-courses__inner{max-width:1080px;margin-inline:auto}
.kids-title{text-align:center;font-weight:700;margin:0}
.kids-title .num-strong{font-weight:700;font-size:1.2em;color:#245dae}
.kids-lead{text-align:center;color:#555;margin:.6rem 0 2rem}

/* 3カラム */
.kids-cols{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kids-col{background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:1rem;box-shadow:0 2px 8px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:.8rem;align-items:center}

/* 番号バッジ（画像上の”01〜03”をCSS化） */
.num-badge{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;background:#e9f2ff;border:1px solid #cfe3ff;color:#2056b4;margin-top:.4rem}

/* 画像フレーム（VKの傾き風を軽量に再現） */
.kids-fig{width:100%;max-width:300px}
.kids-fig img{width:100%;height:auto;border-radius:10px;display:block;aspect-ratio:3/2;object-fit:cover;background:#f5f7fb}
.kids-fig.tilt-right{transform:rotate(1.5deg)}
.kids-fig.tilt-left{transform:rotate(-1.5deg)}

/* ボタンを全体統一 */
/* .vk_button_link.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  padding:.9rem 1.2rem;border-radius:999px;border:1px solid transparent;
  background:#2258df;color:#fff;text-align:center;width:100%;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease
} */
.vk_button_link.btn:hover{
	transform:translateY(-1px);
	box-shadow:0 6px 12px rgba(0,0,0,.12);
/* 	background:none; */
}
/* .btn-orange{background:#f1721b}.btn-orange:hover{background:#d76415}
.btn-green{background:#118248}.btn-green:hover{background:#0e6e3d}
 */
/* メディアテキスト：比率FIX＋余白 */
.media-lite{--bg:#dfe7f933; background:var(--bg); padding:1rem; border-radius:12px}
.media-lite .wp-block-media-text__media{max-width:clamp(220px, var(--media-w,30%), 360px)}
.media-lite .wp-block-media-text__media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px}
.media-lite .wp-block-media-text__content{padding:0 0 0 1rem}
@media(max-width:782px){
  .media-lite .wp-block-media-text__content{padding:1rem 0 0}
}

/* 見出し中の番号（01/02/03） */
.num-inline{font-size:1.1em;color:#245dae}

/* ===== Palette（画像準拠） ===== */
:root{
  --c-blue:   #245DAE;
  --c-cyan:   #00A6C8; /* 新規：マイクラ用 */
  --c-green:  #197547;
  --c-blue-h: #245DAE; /* hover同値で色変化なし */
  --c-cyan-h: #00A6C8;
  --c-green-h:#197547;
}

/* ボタン色（hoverで色を変えない） */
.vk_button_link.btn { color:#fff; border:none; box-shadow:none; transition:none; }
.vk_button_link.btn:hover { color:#fff; background:inherit; transform:none; box-shadow:none; }

.btn-blue  { background:var(--c-blue)  !important; }
.btn-cyan  { background:var(--c-cyan)  !important; }
.btn-green { background:var(--c-green) !important; }

.btn-blue:hover  { background:var(--c-blue-h)  !important; }
.btn-cyan:hover  { background:var(--c-cyan-h)  !important; }
.btn-green:hover { background:var(--c-green-h) !important; }

/* 見出し色のヘルパ */
.heading-blue  { color:var(--c-blue)  !important; }
.heading-cyan  { color:var(--c-cyan)  !important; }
.heading-green { color:var(--c-green) !important; }
.heading-underline{position:relative;display:inline-block;padding-bottom:.15rem}
.heading-underline::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.28rem;background:currentColor;opacity:.18;border-radius:4px}

/* ===== 画像フレーム（白フチ＋軽い影＝サンプルの雰囲気） ===== */
.kids-fig img,
.course-card img,
.wp-block-image img.is-style-vk-image-photoFrame-tilt-right,
.wp-block-image img.is-style-vk-image-photoFrame-tilt-left{
  background:#fff; padding:.5rem; border:1px solid #eee; border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* ===== 3カードのタイトル色をそれぞれに ===== */
/* 例：左（青）・中（橙）・右（緑） */
.kids-cols .kids-col:nth-child(1) h3,
.course-grid > li:nth-child(1) h3 { color:var(--c-blue); }
.kids-cols .kids-col:nth-child(2) h3,
.course-grid > li:nth-child(2) h3 { color:var(--c-orange); }
.kids-cols .kids-col:nth-child(3) h3,
.course-grid > li:nth-child(3) h3 { color:var(--c-green); }

/* ===============================
   プログラミングコース共通
   =============================== */

/* セクション全体 */
.programming-section {
  padding: 3rem 1rem;
  background: #fff;
  max-width: 1080px;
  margin-inline: auto;
}

/* 中央見出し */
.programming-section h2 {
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.programming-section p.has-text-align-center {
  color: #555;
  margin-bottom: 2rem;
  line-height: 1.7;
}

/* 3カラム配置 */
.programming-section .wp-block-columns {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

/* 各カラム */
.programming-section .wp-block-column {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 1rem;
  text-align: center;
}

/* 小見出し（例：基礎スキル学習） */
.programming-section .wp-block-column p strong mark {
  background: transparent !important;
  color: #f1721b; /* オレンジで統一 */
}

/* 画像 */
.programming-section figure {
  margin: 0 auto 0.5rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.programming-section figure img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #fff;
  padding: 0.4rem;
  border: 1px solid #eee;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  aspect-ratio: 4/3; /* 比率固定（CLS防止） */
  object-fit: cover;
}

/* キャプション */
.programming-section figcaption {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #333;
  margin-top: 0.3rem;
}

/* ===============================
   マイクラ部分でも同一クラス利用OK
   =============================== */

/* 背景を切り替えたい場合 */
.minecraft-section {
  padding: 3rem 1rem;
  background: linear-gradient(180deg, #f9fcff 0%, #edf7ff 100%);
  max-width: 1080px;
  margin-inline: auto;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

/* h2タイトル強調 */
.minecraft-section h2 {
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #245dae; /* ブルー寄り */
}

.minecraft-section p.has-text-align-center {
  color: #555;
  margin-bottom: 2rem;
}

/* カラムレイアウト共通 */
.minecraft-section .wp-block-columns {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ===============================
   スマホ調整
   =============================== */
@media (max-width: 600px) {
  .programming-section,
  .minecraft-section {
    padding: 2rem 1rem;
  }

  .programming-section figure img,
  .minecraft-section figure img {
    aspect-ratio: auto; /* モバイルで高さが詰まる場合 */
  }

  .programming-section figcaption,
  .minecraft-section figcaption {
    font-size: 0.85rem;
  }
}