/* =========================================================
   春光学園 home 固有上書き (style.css の後に読込)
   目標: InDesign原稿 (design_full.png 1389x4500) と 100% 一致
   検証幅 = 1389px (PCレイアウト >860px)
   ========================================================= */

:root{
  --ink-dark:#2C2A28;   /* ヘッダー/フッターの住所・電話 = 濃いチャコール */
}

/* ---------------------------------------------------------
   1. ヘッダー (住所/電話の色・職員募集アイコン・MENU)
   --------------------------------------------------------- */
@media (min-width:860px){
  body.home .hdr{padding:30px 54px;gap:30px}

  /* 住所・電話: 小塚ゴシック + 濃いチャコール (現状の灰色は誤り) */
  .hdr__addr{
    font-family:var(--font-g);
    color:var(--ink-dark);
    font-size:15px;line-height:1.75;letter-spacing:.02em;
    margin-left:10px;font-weight:400;
  }
  .hdr__addr svg{width:14px;height:14px;color:var(--ink-dark);stroke-width:2;margin-right:6px}

  /* 職員募集: 人物+虫眼鏡アイコン(水色#95D3E2) + 下に濃色テキスト(小塚) */
  .hdr__right{gap:34px}
  .recruit-mini{
    width:auto;height:auto;border:none;background:transparent;border-radius:0;
    flex-direction:column;gap:6px;
    color:var(--ink-dark);font-family:var(--font-g);font-size:14px;font-weight:400;letter-spacing:.04em;
  }
  .recruit-mini .ic-recruit{width:44px;height:44px;color:var(--aqua-btn)}
  .recruit-mini:hover{transform:scale(1.03)}

  /* MENU: 水色#95D3E2 塗りつぶし円 + 白い太い3本線 + 白MENU (設計はかなり大きい) */
  .burger{
    width:92px;height:92px;gap:9px;
    background:var(--aqua-btn);
    box-shadow:0 6px 16px rgba(149,211,226,.45);
  }
  .burger span{width:42px;height:4px;border-radius:3px;background:#fff}
  .burger small{font-size:13px;margin-top:5px;letter-spacing:.12em}
  body.home .hdr.is-stuck .burger{width:62px;height:62px;gap:5px}
  body.home .hdr.is-stuck .burger span{width:28px;height:3px}
  body.home .hdr.is-stuck .burger small{font-size:9px;margin-top:2px}

  /* ロゴ: 設計実測 (mark+text ~95px) */
  .hdr__logo img{height:96px}
}

/* ---------------------------------------------------------
   2. ヒーロー (大見出しを設計の比率まで拡大)
   --------------------------------------------------------- */
@media (min-width:860px){
  .hero__copy{
    font-size:clamp(64px,6.9vw,114px);
    bottom:6%;line-height:1;letter-spacing:.012em;
    font-family:var(--font-g);font-weight:900;
  }
  .hero__copy .sm{font-size:.62em}
}

/* ---------------------------------------------------------
   3. intro (テキスト行間・葉の水彩配置・サイズを設計どおりに)
   設計: 左に2枚(青緑縞 + 緑/黄)、右に1枚(水色)
   --------------------------------------------------------- */
@media (min-width:860px){
  .intro{padding:120px 60px 86px}

  /* 葉: 設計 ds_hero.png 実測位置 (1389幅基準) */
  .intro__leaf.l1{width:126px;top:-10px;left:8%;opacity:.95;animation:floaty 6s ease-in-out infinite}
  .intro__leaf.l2{width:130px;top:44px;left:17%;opacity:.95;animation:floaty 7s ease-in-out .6s infinite}
  .intro__leaf.l3{width:124px;top:48px;right:5%;opacity:.95;animation:floaty 6.5s ease-in-out .3s infinite}

  .intro>.reveal{max-width:1000px;margin:0 auto}
  .intro p{font-size:18px;line-height:2.6;letter-spacing:.12em;color:var(--ink-dark);font-family:var(--font-g)}
  .intro .lead{margin-top:22px;white-space:nowrap;line-height:1.6}
  .intro .lead .lead-aqua{font-family:var(--font-r);color:var(--aqua);font-weight:500;font-size:30px;letter-spacing:.04em}
  .intro .lead .lead-aqua b{font-weight:500;font-size:1em}   /* 設計は均一サイズ(極端な大小なし) */
  .intro .lead .lead-rest{color:var(--ink-dark);font-size:18px;font-family:var(--font-g)}

  /* ---------------------------------------------------------
     4. CTA box (左テキスト + 右に水色塗りボタン約1/3幅)
     --------------------------------------------------------- */
  .cta-box{
    flex-direction:row;width:min(1010px,calc(100% - 90px));margin:64px auto 8px;
    padding:0;overflow:hidden;align-items:stretch;min-height:132px;
    border:2px solid var(--aqua-line);border-radius:28px;background:transparent;box-shadow:none;
  }
  .cta-box__txt{
    flex:1;padding:26px 50px;font-size:24px;text-align:left;
    display:block;line-height:1.7;
    color:var(--aqua);font-family:var(--font-r);font-weight:500;
  }
  .cta-box__txt b{font-size:1.14em;font-weight:700;display:inline}
  .cta-box .btn-pill{
    border-radius:0;min-width:326px;justify-content:center;font-size:25px;
    background:var(--aqua-btn);color:#fff;font-family:var(--font-r);font-weight:500;
    letter-spacing:.06em;box-shadow:none;gap:12px;
  }
  .cta-box .btn-pill svg{width:18px;height:18px;stroke-width:2.4}
  .cta-box .btn-pill:hover{transform:none;background:var(--aqua-btn-d)}
}

/* ---------------------------------------------------------
   5. ロゴマークについて (タイトル新丸ゴ拡大 / ロゴ大 / 葉配置 / 本文幅)
   --------------------------------------------------------- */
@media (min-width:860px){
  .popcard{
    width:min(1010px,calc(100% - 130px));margin:104px auto;gap:58px;padding:0;
    align-items:center;
  }
  .popcard__pic .pic-card{padding:30px 26px;border-radius:12px;box-shadow:0 8px 26px rgba(150,140,120,.12)}
  .popcard img{width:218px}
  .popcard__dots{gap:11px;margin-top:18px}
  .popcard__dots i{width:10px;height:10px}
  .popcard__dots i.on{background:var(--aqua-btn)}

  .popcard__body{max-width:570px}
  .popcard__body h3{
    font-family:var(--font-r);color:var(--aqua);font-size:28px;font-weight:500;
    letter-spacing:.1em;margin-bottom:16px;
  }
  .popcard__body p{
    font-size:15.5px;line-height:2.25;max-width:570px;color:var(--ink-dark);
    font-family:var(--font-g);text-align:justify;letter-spacing:.02em;
  }

  /* 葉: 設計 ds_logomark.png — 左下に青緑縞、右上に緑、右下に青緑 */
  .pop-leaf{display:block;opacity:.95}
  .pop-leaf.p1{width:94px;left:-8%;top:36%;animation:floaty 7s ease-in-out infinite}
  .pop-leaf.p2{width:110px;right:-10%;top:-16%;animation:floaty 6s ease-in-out .4s infinite}
  .pop-leaf.p3{width:100px;right:-9%;top:36%;animation:floaty 7.5s ease-in-out .8s infinite}
}

/* ---------------------------------------------------------
   6. マーキー (ヒーロー大見出しと同格の特大白文字)
   --------------------------------------------------------- */
@media (min-width:860px){
  .marquee{margin:78px 0}
  .marquee span{font-size:clamp(72px,7vw,116px);font-family:var(--font-g);font-weight:900}
  .marquee .sm{font-size:.62em}
}

/* ---------------------------------------------------------
   7. インスタグラム (タイトル拡大 / 4枚横並び)
   --------------------------------------------------------- */
@media (min-width:860px){
  .insta{max-width:1130px;margin:0 auto;padding:36px 40px 70px}
  .insta__title{font-size:30px;gap:13px;font-family:var(--font-r);color:var(--aqua);font-weight:500;letter-spacing:.12em}
  .insta__title svg{width:32px;height:32px}
  .insta__head{max-width:1050px;margin:18px auto 24px;gap:15px}
  .insta__head img{width:58px;height:58px}
  .insta__head b{font-size:17px;font-family:var(--font-r);color:var(--aqua-d)}
  .insta__head span{font-size:13.5px;color:var(--ink-soft)}
  .insta__grid{grid-template-columns:repeat(4,1fr);gap:26px;max-width:1050px;margin:0 auto}
  .insta__grid img{border-radius:4px}
}

/* ---------------------------------------------------------
   8. フッター (PAGE TOP / ナビ(丸ゴ+大ドット) / 住所色 / インスタ)
   --------------------------------------------------------- */
@media (min-width:860px){
  .pagetop{width:98px;height:98px;font-size:12px;margin:40px auto 48px;background:var(--aqua-pale);color:var(--aqua-d)}

  .foot-wrap{max-width:1260px;margin:0 auto}
  .foot-tree.ft-l{width:92px;left:5.5%;top:2px;animation:floaty 7s ease-in-out infinite}
  .foot-tree.ft-r{width:94px;right:4.5%;top:40px;animation:floaty 6.4s ease-in-out .5s infinite}

  .foot-nav{gap:48px 72px;padding:48px 150px 16px}
  .foot-nav a{font-family:var(--font-r);font-size:20px;font-weight:500;color:var(--ink-dark);letter-spacing:.06em;gap:11px}
  .foot-nav a::before{width:15px;height:15px;background:var(--aqua-btn)}
  .foot-nav a:hover{color:var(--aqua-d)}

  .foot-dots{max-width:1250px;margin:96px auto 0;border-top:4px dotted var(--aqua-line)}

  .foot{
    max-width:1200px;margin:0 auto;padding:56px 20px 90px 7%;
    display:flex;align-items:center;justify-content:flex-start;gap:54px;text-align:left;
  }
  .foot img{height:96px;margin:0}
  .foot__info{font-family:var(--font-g);font-size:15px;line-height:2.0;color:var(--ink-dark)}
  .foot__info svg{width:14px;height:14px;margin-right:6px;color:var(--ink-dark);stroke-width:2}
  .foot-insta{
    margin-top:0;font-family:var(--font-r);font-size:19px;font-weight:500;
    color:var(--ink-dark);gap:10px;
  }
  .foot-insta svg{width:26px;height:26px;color:var(--aqua-d)}
  .foot-insta:hover{color:var(--aqua-d)}
}