/* 支援プログラム｜学習・宿題支援  (Jimdoウィジェット用 / #gk-program 内のみに適用) */
#gk-program{
  --gk-green:#17803A; --gk-lime:#8DC21F; --gk-orange:#F39800;
  --gk-ink:#2B3A2F; --gk-sub:#55635A; --gk-pale:#F2F8EC; --gk-cream:#FFF8EC; --gk-line:#D9E6D2;
  font-family:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif !important;
  color:var(--gk-ink) !important; font-size:16px !important; line-height:1.85 !important;
  max-width:960px; margin:0 auto !important; padding:0 4px; box-sizing:border-box;
}
#gk-program *{box-sizing:border-box;}
#gk-program h1,#gk-program h2,#gk-program h3,#gk-program h4{
  font-family:"Zen Maru Gothic","BIZ UDPGothic",sans-serif !important; color:var(--gk-ink) !important;
  line-height:1.45 !important; margin:0 0 .6em !important; padding:0 !important; border:0 !important; background:none !important; letter-spacing:.02em;
}
#gk-program p{margin:0 0 1em !important;}
#gk-program ul{margin:0 0 1em !important; padding-left:1.3em !important;}
#gk-program li{margin:0 0 .35em !important;}
#gk-program img{max-width:100%; height:auto; display:block;}
#gk-program a{color:var(--gk-green);}
#gk-program section{margin:0 0 64px !important;}

/* ---------- ボタン ---------- */
#gk-program .gk-btns{display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 0;}
#gk-program .gk-btn{display:inline-block; padding:13px 26px !important; border-radius:999px; font-weight:bold; text-decoration:none !important; font-size:15px; line-height:1.4;}
#gk-program .gk-btn-main{background:var(--gk-orange) !important; color:#fff !important;}
#gk-program .gk-btn-line{background:#06C755 !important; color:#fff !important;}
#gk-program .gk-btn-sub{background:#fff !important; color:var(--gk-green) !important; border:2px solid var(--gk-green);}
#gk-program .gk-btn:hover{opacity:.88;}
#gk-program .gk-btn:focus-visible,#gk-program a:focus-visible{outline:3px solid var(--gk-orange); outline-offset:3px;}

/* ---------- TOP(左文章・右写真) ---------- */
#gk-program .gk-hero{display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center; padding:28px 0 8px;}
#gk-program .gk-eyebrow{display:inline-block; font-size:13px; color:var(--gk-green); background:var(--gk-pale); border-radius:6px; padding:3px 10px; margin-bottom:12px;}
#gk-program .gk-hero h1{font-size:32px !important; font-weight:900 !important; color:var(--gk-green) !important; line-height:1.45 !important; letter-spacing:.04em;}
#gk-program .gk-hero h1 span{display:block;}

/* ---------- 写真・プレースホルダー(4:3) ---------- */
#gk-program .gk-photo{margin:0 !important;}
#gk-program .gk-photo img,#gk-program .gk-ph{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;}
#gk-program .gk-ph{display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; background:repeating-linear-gradient(45deg,#F7FAF4 0 12px,#EEF4E8 12px 24px); border:2px dashed #B9CFAE; color:var(--gk-sub); font-size:13px;}
#gk-program .gk-photo figcaption{font-size:13px; color:var(--gk-sub); margin-top:6px; font-style:normal;}
#gk-program .gk-photos{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0;}
#gk-program .gk-photos.two{grid-template-columns:repeat(2,1fr);}

/* ---------- 見出し ---------- */
#gk-program .gk-sec-title{font-size:25px !important; font-weight:700; padding-bottom:10px !important; border-bottom:3px solid var(--gk-lime) !important; margin-bottom:18px !important;}
#gk-program .gk-sec-title .num{font-family:"Zen Maru Gothic",sans-serif; color:var(--gk-green); font-size:30px; margin-right:10px;}
#gk-program .gk-sec-title .tag{display:inline-block; font-size:13px; font-weight:normal; color:#fff; background:var(--gk-green); border-radius:6px; padding:1px 10px; margin-left:10px; vertical-align:middle;}
#gk-program .gk-lead{color:var(--gk-sub);}

/* ---------- お悩み ---------- */
#gk-program .gk-worries{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
#gk-program .gk-worry{background:#fff; border:2px solid var(--gk-line); border-radius:16px; padding:18px 20px;}
#gk-program .gk-worry .q{font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:17px; margin-bottom:10px !important;}
#gk-program .gk-worry .a{background:var(--gk-pale); border-radius:10px; padding:12px 14px; font-size:15px; margin:0 !important;}
#gk-program .gk-worry .a strong{display:block; color:var(--gk-green);}
#gk-program .gk-worry .a a{display:inline-block; margin-top:6px; font-weight:bold;}

/* ---------- 流れ(3段) ---------- */
#gk-program .gk-flow{display:flex; align-items:stretch; gap:10px; margin:18px 0 24px;}
#gk-program .gk-flow .box{flex:1; background:var(--gk-pale); border-radius:14px; padding:16px; text-align:center;}
#gk-program .gk-flow .box strong{display:block; font-family:"Zen Maru Gothic",sans-serif; font-size:18px; color:var(--gk-green);}
#gk-program .gk-flow .box span{font-size:13px; color:var(--gk-sub);}
#gk-program .gk-flow .arrow{align-self:center; color:var(--gk-orange); font-size:22px; font-weight:bold;}
#gk-program .gk-note{background:var(--gk-cream); border-left:6px solid var(--gk-orange); border-radius:0 12px 12px 0; padding:18px 20px;}
#gk-program .gk-note h3{font-size:18px !important;}
#gk-program .gk-note p:last-child{margin-bottom:0 !important;}

/* ---------- ステップ ---------- */
#gk-program .gk-steps{list-style:none !important; padding:0 !important; margin:18px 0 !important; counter-reset:gk;}
#gk-program .gk-steps > li{position:relative; padding:14px 16px 14px 64px !important; margin:0 0 10px !important; background:#fff; border:1px solid var(--gk-line); border-radius:12px;}
#gk-program .gk-steps > li::before{counter-increment:gk; content:counter(gk); position:absolute; left:14px; top:14px; width:36px; height:36px; border-radius:50%; background:var(--gk-green); color:#fff; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:18px; display:flex; align-items:center; justify-content:center;}
#gk-program .gk-steps h4{font-size:17px !important; margin-bottom:2px !important;}
#gk-program .gk-steps p{margin:0 !important; font-size:15px;}
#gk-program .gk-steps .ex{display:block; margin-top:4px; font-size:14px; color:var(--gk-sub);}
#gk-program .gk-steps .ex::before{content:"あそび・教材例:"; color:var(--gk-green); font-weight:bold;}

/* ---------- カード群 ---------- */
#gk-program .gk-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0;}
#gk-program .gk-cards.two{grid-template-columns:repeat(2,1fr);}
#gk-program .gk-cards.four{grid-template-columns:repeat(4,1fr);}
#gk-program .gk-card{background:var(--gk-pale); border-radius:14px; padding:16px 18px;}
#gk-program .gk-card h4{font-size:16px !important; color:var(--gk-green) !important;}
#gk-program .gk-card p,#gk-program .gk-card ul{font-size:14.5px; margin-bottom:0 !important;}
#gk-program .gk-card .badge{display:inline-block; font-size:12px; background:#fff; color:var(--gk-green); border-radius:6px; padding:0 8px; margin-bottom:6px;}
#gk-program .gk-box{border:2px solid var(--gk-lime); border-radius:16px; padding:18px 22px; margin:20px 0;}
#gk-program .gk-box h3{font-size:18px !important;}
#gk-program .gk-box ul{margin-bottom:0 !important;}

/* ---------- CTA(運動あそびページと同じ見た目) ---------- */
#gk-program .gk-cta{background:none !important; padding:0 !important;}
#gk-program .gk-cta-head{display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center; margin-bottom:20px;}
#gk-program .gk-bases{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:10px 0 40px;}
#gk-program .gk-bases a{display:block; background:#fff; border-radius:12px; padding:12px 16px; text-decoration:none !important; color:var(--gk-ink) !important; font-size:14px; border:1px solid var(--gk-line);}
#gk-program .gk-bases a strong{display:block; color:var(--gk-ink); font-weight:normal; font-size:14px;}
#gk-program .gk-contact{background:var(--gk-green); color:#fff; border-radius:16px; padding:26px 24px 22px; margin-bottom:40px;}
#gk-program .gk-contact h3{color:#fff !important; font-size:26px !important; margin-bottom:14px !important;}
#gk-program .gk-contact .gk-tel{display:block; text-align:center; font-family:"Zen Maru Gothic",sans-serif; font-size:32px; font-weight:700; color:#fff !important; text-decoration:none !important; line-height:1.3;}
#gk-program .gk-contact .hours{text-align:center; font-size:15px; margin:6px 0 0 !important;}
#gk-program .gk-contact .gk-btns{justify-content:center; margin-top:14px;}
#gk-program .gk-btn-white{background:#fff !important; color:var(--gk-green) !important;}
#gk-program .gk-line-box{background:#fff; border:2px solid #7ED99A; border-radius:14px; padding:18px 16px; margin-bottom:40px;}
#gk-program .gk-line-box h3{font-size:16px !important;}
#gk-program .gk-line-box p{font-size:15px; margin-bottom:14px !important;}
#gk-program .gk-links{display:flex; flex-wrap:wrap; gap:10px; margin:0;}
#gk-program .gk-link-btn{display:inline-block; padding:12px 20px !important; border:2px solid var(--gk-green); border-radius:999px; color:var(--gk-green) !important; background:#fff; font-weight:bold; font-size:15px; line-height:1.4; text-decoration:none !important;}
#gk-program .gk-link-btn:hover{background:var(--gk-pale);}

/* ---------- スマホ ---------- */
@media (max-width:760px){
  #gk-program .gk-hero,#gk-program .gk-cta-head{grid-template-columns:1fr; gap:18px;}
  #gk-program .gk-hero h1{font-size:26px !important;}
  #gk-program .gk-sec-title{font-size:21px !important;}
  #gk-program .gk-worries,#gk-program .gk-cards,#gk-program .gk-cards.two,#gk-program .gk-cards.four,#gk-program .gk-bases{grid-template-columns:1fr;}
  #gk-program .gk-photos,#gk-program .gk-photos.two{grid-template-columns:1fr 1fr;}
  #gk-program .gk-flow{flex-direction:column;}
  #gk-program .gk-flow .arrow{transform:rotate(90deg);}
  #gk-program .gk-contact h3{font-size:21px !important;}
  #gk-program .gk-contact .gk-tel{font-size:28px;}
  #gk-program .gk-link-btn{width:100%; text-align:center;}
  #gk-program .gk-btn{width:100%; text-align:center;}
}

/* ---------- 教材イメージ(文字カード・数の図) ---------- */
#gk-program .gk-visual{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; background:var(--gk-cream); border-radius:16px; padding:22px 16px; margin:18px 0;}
#gk-program .gk-visual .cap{flex-basis:100%; text-align:center; font-size:14px; color:var(--gk-sub); margin:4px 0 0 !important;}
#gk-program .gk-kana{display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; background:#fff; border:3px solid var(--gk-green); border-radius:10px; font-family:"Zen Maru Gothic",sans-serif; font-size:34px; font-weight:700; color:var(--gk-ink); transform:rotate(-3deg);}
#gk-program .gk-kana:nth-child(2n){border-color:var(--gk-orange); transform:rotate(3deg);}
#gk-program .gk-kana:nth-child(3n){border-color:var(--gk-lime);}
#gk-program .gk-kana small{font-size:20px; align-self:flex-end; margin-bottom:10px;}
#gk-program .gk-triad{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;}
#gk-program .gk-triad .t{background:#fff; border-radius:12px; padding:10px 16px; text-align:center; min-width:96px; border:2px solid var(--gk-line);}
#gk-program .gk-triad .t b{display:block; font-family:"Zen Maru Gothic",sans-serif; font-size:30px; color:var(--gk-green); line-height:1.2;}
#gk-program .gk-triad .t span{font-size:13px; color:var(--gk-sub);}
#gk-program .gk-triad .eq{color:var(--gk-orange); font-weight:bold; font-size:22px;}
#gk-program .gk-dots{letter-spacing:4px; color:#E0473A !important;}

/* ===== 2026-09-29 スマホ表示修正:ヒーロー写真を一番上に ===== */
@media (max-width:760px){
  #gk-program .gk-hero > .gk-photo{order:-1 !important;}
}