/* =========================================================
   春光学園 — 学園の様子 (life.html) ページ固有CSS
   参照: refs/life-full.png (InDesign原稿) を完全再現
   style.css は触らず、ここで上書き/追加のみ
   ========================================================= */

.life-main{position:relative;overflow:hidden}

/* ---------------------------------------------------------
   ① intro (学園の様子)
   --------------------------------------------------------- */
.life-intro{
  position:relative;
  padding:30px 26px 22px;
  text-align:center;
}
.life-intro .sec-head{margin:6px 0 14px}
.life-intro__txt{
  font-size:13px;color:var(--ink2);line-height:2.1;letter-spacing:.06em;
  max-width:560px;margin:0 auto;
}
.life-deco{position:absolute;pointer-events:none;z-index:0}
.life-intro .li-leaf1{width:38px;top:6px;left:14px}
.life-intro .li-leaf2{width:34px;top:60px;right:16px;display:none}

/* ---------------------------------------------------------
   ② ココスカ ヒーロー写真 (横幅いっぱい・角丸)
   --------------------------------------------------------- */
.life-hero{
  position:relative;
  margin:8px 14px 0;
}
.life-hero__img{
  width:100%;height:auto;display:block;
  border-radius:4px;
  object-fit:cover;
}

/* ---------------------------------------------------------
   大見出し マーキー (style.css の .marquee を流用 — 追加調整)
   --------------------------------------------------------- */
.life-main .marquee{margin:18px 0}

/* ---------------------------------------------------------
   ③ 思い出写真館 (ギャラリー)
   --------------------------------------------------------- */
.memory{position:relative;padding:8px 16px 6px}
.memory .sec-head{margin:6px 0 12px}
.memory__lead{
  font-size:11.5px;color:var(--ink2);line-height:1.95;letter-spacing:.04em;
  text-align:center;max-width:600px;margin:0 auto 18px;
}

.gallery{position:relative;max-width:640px;margin:0 auto}
.gal-deco{position:absolute;pointer-events:none;z-index:0;opacity:.95}
.gal-deco.gd-leaf{width:46px;top:30px;left:-2px}
.gal-deco.gd-round{width:64px;bottom:120px;right:-4px}

.gallery__main{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:0 30px;
  z-index:1;
}
.gallery__main-img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:3px;display:block;
}
.gal-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:none;background:transparent;cursor:pointer;
  color:var(--ink-soft);display:flex;align-items:center;justify-content:center;
  z-index:2;transition:color .3s,transform .3s;
}
.gallery__main .gal-arrow--prev{left:0}
.gallery__main .gal-arrow--next{right:0}
.gal-arrow svg{width:24px;height:24px}
.gal-arrow:hover{color:var(--aqua-d);transform:translateY(-50%) scale(1.12)}

/* サムネイル列 */
.gallery__thumbs{
  display:flex;align-items:center;gap:6px;
  margin-top:10px;padding:0 4px;
  position:relative;z-index:1;
}
.gallery__thumbs .gal-arrow{position:static;transform:none;flex-shrink:0;width:26px;height:26px}
.gallery__thumbs .gal-arrow svg{width:18px;height:18px}
.gallery__thumbs .gal-arrow:hover{transform:scale(1.12)}
.gallery__thumbs-row{
  flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;
}
.gallery__thumbs-row img{
  width:100%;aspect-ratio:1/0.82;object-fit:cover;
  border-radius:3px;display:block;
  transition:transform .4s var(--ease-soft),box-shadow .4s;
  cursor:pointer;
}
.gallery__thumbs-row img:hover{transform:scale(1.03);box-shadow:0 6px 16px rgba(120,150,150,.2)}

/* スライド式サムネ(JSで有効化): 4枚固定窓+端で押し出し、選択枠はオーバーレイで移動 */
.gallery__thumbs-row.is-slider{display:block;overflow:hidden;position:relative}
.gallery__thumbs-track{display:flex;gap:7px;will-change:transform}
.gallery__thumbs-hl{
  position:absolute;top:0;height:100%;border:2px solid var(--aqua-btn);border-radius:3px;
  box-shadow:0 4px 12px rgba(143,209,225,.45);pointer-events:none;box-sizing:border-box;z-index:3;
}

.memory .dots{margin:30px 28px 24px}

/* ---------------------------------------------------------
   ④ 横須賀の魅力 (ここよこ リンク)
   --------------------------------------------------------- */
.yokosuka{text-align:center;padding:2px 0 8px}
.yokosuka__btn{
  display:inline-block;
  background:var(--aqua-btn);color:#fff;
  font-family:var(--font-r);font-weight:500;font-size:13px;letter-spacing:.08em;
  padding:9px 26px;border-radius:24px;
  box-shadow:0 3px 9px rgba(143,209,225,.34);
  transition:transform .45s var(--ease-soft),background .45s,box-shadow .45s;
}
.yokosuka__btn:hover{transform:scale(1.02);background:var(--aqua-btn-d);box-shadow:0 6px 16px rgba(116,194,214,.45)}
.yokosuka__sub{
  margin-top:12px;font-size:12px;color:var(--ink2);
  font-family:var(--font-r);letter-spacing:.06em;
}

/* ---------------------------------------------------------
   ⑤ 学園の一日 (タイムライン)
   --------------------------------------------------------- */
.daylife{position:relative;padding:30px 18px 10px}
.daylife .sec-head{margin:6px 0 12px}
.daylife__lead{
  font-size:11.5px;color:var(--ink2);line-height:1.95;letter-spacing:.04em;
  text-align:center;max-width:600px;margin:0 auto 18px;
}

.timeline{list-style:none;max-width:760px;margin:0 auto;padding:0}
.tl-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr minmax(0,250px) 1fr;
  align-items:center;
  min-height:118px;
  padding:6px 0;
}
.tl-center{display:flex;align-items:flex-start;gap:12px;justify-content:flex-start}
.tl-bullet{
  width:42px;height:auto;flex-shrink:0;margin-top:2px;
  opacity:.96;
}
.tl-text{display:flex;flex-direction:column;line-height:1.45}
.tl-time{
  font-family:var(--font-r);color:var(--aqua);font-weight:500;
  font-size:18px;letter-spacing:.1em;
}
.tl-title{
  font-family:var(--font-r);color:var(--aqua);font-weight:500;
  font-size:18px;letter-spacing:.06em;margin-top:1px;
}
.tl-note{
  font-size:11px;color:var(--ink2);letter-spacing:.02em;margin-top:4px;line-height:1.6;
}

/* デコ枠 */
.tl-deco{position:relative;height:100%;min-height:100px;width:100%;align-self:stretch}
.tl-deco--left{justify-self:stretch}
.tl-deco--right{justify-self:stretch}
.tl-deco img{position:absolute;pointer-events:none;max-width:none}

/* 左列の装飾は中央寄り(右端)に・右列は中央寄り(左端〜中)に配置 */

/* 6:30 起床 — 風車/時計 (左) */
.tl-deco .d-clock{width:96px;right:14px;top:50%;transform:translateY(-50%)}

/* 7:00 朝食 — パン/コーヒー (右) */
.tl-deco .d-bread{width:116px;left:18px;top:50%;transform:translateY(-50%)}
.tl-deco .d-coffee{width:54px;left:120px;top:52%;transform:translateY(-50%)}

/* 8:00 登園 — 鞄/鉛筆 (左) */
.tl-deco .d-bag{width:92px;right:10px;bottom:8px}
.tl-deco .d-pencils{width:30px;right:96px;bottom:24px;transform:rotate(-6deg)}
.tl-deco .d-pencil{width:26px;right:108px;bottom:6px;transform:rotate(-2deg)}

/* 15:00 下校 — ボール/鳥 (右) */
.tl-deco .d-ball{width:46px;left:18px;top:14px}
.tl-deco .d-bird{width:96px;left:74px;top:50%;transform:translateY(-46%)}

/* 16:00 入浴・夕食 — カレー(左) / 風呂(右) */
.tl-deco .d-curry{width:104px;right:14px;top:50%;transform:translateY(-50%)}
.tl-deco .d-bath{width:128px;left:30px;top:50%;transform:translateY(-46%)}

/* 20:00 就寝 — 月/猫/ランプ (左) */
.tl-deco .d-moon{width:46px;right:128px;top:10px}
.tl-deco .d-cat{width:64px;right:62px;bottom:2px}
.tl-deco .d-lamp{width:74px;right:8px;bottom:0}

.daylife+.dots{margin:26px 28px}

/* ---------------------------------------------------------
   ⑥ 広報誌
   --------------------------------------------------------- */
.bulletin{position:relative;padding:18px 18px 26px;text-align:center;overflow:hidden}
.bulletin .sec-head{margin:6px 0 12px}
.bulletin__lead{
  font-size:11.5px;color:var(--ink2);line-height:1.95;letter-spacing:.04em;
  max-width:600px;margin:0 auto 16px;
  padding:0 54px;       /* SP: 左右の装飾葉・木を避けて本文を読みやすく */
  position:relative;z-index:1;
}
.bulletin__btn{
  display:inline-block;
  background:var(--aqua-btn);color:#fff;
  font-family:var(--font-r);font-weight:500;font-size:12px;letter-spacing:.08em;
  padding:7px 22px;border-radius:22px;
  box-shadow:0 3px 9px rgba(143,209,225,.32);
  transition:transform .45s var(--ease-soft),background .45s,box-shadow .45s;
}
.bulletin__btn:hover{transform:scale(1.02);background:var(--aqua-btn-d);box-shadow:0 6px 16px rgba(116,194,214,.45)}
.bl-deco{position:absolute;pointer-events:none;z-index:0}
.bulletin .bl-leaf-l{width:40px;top:14px;left:4px}
.bulletin .bl-tree-r{width:50px;top:10px;right:4px}

/* =========================================================
   PC レイアウト (min-width:860px) — 原稿忠実
   ========================================================= */
@media (min-width:860px){

  /* ① intro — 設計: タイトル中央 / 本文は中央寄せ枠内で左揃え / 左に小さな葉のみ */
  .life-intro{padding:60px 60px 16px}
  .life-intro .sec-head{font-size:33px;letter-spacing:.16em;margin:0 0 22px}
  .life-intro__txt{
    font-size:18.5px;line-height:1.95;letter-spacing:.08em;color:var(--ink2);
    max-width:474px;margin:0 auto;text-align:left;
  }
  .life-intro .li-leaf1{width:80px;top:104px;left:7.4%;animation:floaty 6.5s ease-in-out infinite}
  .life-intro .li-leaf2{display:none}

  /* ② hero — 設計: 横幅約77% / 角丸 / 写真の実比(850:640≈4:3)そのまま */
  .life-hero{max-width:none;width:76.9%;margin:24px auto 0;padding:0}
  .life-hero__img{border-radius:8px;aspect-ratio:850/640;object-fit:cover}

  /* marquee — 設計: ヒーロー直後に大きな余白 */
  .life-main .marquee{margin:78px 0}

  /* ③ ギャラリー — 設計: メイン写真は幅約58%・矢印は写真外側 */
  .memory{padding:56px 40px 10px;max-width:1100px;margin:0 auto}
  .memory .sec-head{font-size:31px;letter-spacing:.14em;margin:0 0 16px}
  .memory__lead{font-size:16px;line-height:1.85;letter-spacing:.03em;color:var(--ink2);margin-bottom:38px;max-width:760px}
  .gallery{max-width:892px}
  .gal-deco.gd-leaf{width:86px;top:60px;left:-178px;animation:floaty 7s ease-in-out infinite}
  .gal-deco.gd-round{width:140px;top:474px;right:-150px;bottom:auto;animation:floaty 6.4s ease-in-out .4s infinite}
  .gallery__main{padding:0 50px}
  .gallery__main-img{border-radius:6px;aspect-ratio:3/2;object-position:center 38%}
  .gal-arrow{width:44px;height:44px}
  .gal-arrow svg{width:32px;height:32px}
  .gallery__main .gal-arrow--prev{left:-8px}
  .gallery__main .gal-arrow--next{right:-8px}
  .gallery__thumbs{margin-top:20px;gap:12px;padding:0 58px}
  .gallery__thumbs .gal-arrow{width:34px;height:34px}
  .gallery__thumbs .gal-arrow svg{width:24px;height:24px}
  .gallery__thumbs-row{gap:14px}
  .gallery__thumbs-track{gap:14px}
  .memory .dots{max-width:900px;margin:56px auto 36px}

  /* ④ 横須賀 */
  .yokosuka__btn{font-size:16px;padding:11px 40px;border-radius:30px}
  .yokosuka__sub{font-size:15px;margin-top:18px}

  /* ⑤ タイムライン — 設計: 各行に十分な高さ・余白 */
  .daylife{padding:76px 40px 20px;max-width:1100px;margin:0 auto}
  .daylife .sec-head{font-size:31px;letter-spacing:.14em;margin:0 0 16px}
  .daylife__lead{font-size:16px;line-height:1.85;letter-spacing:.03em;color:var(--ink2);margin-bottom:56px;max-width:680px}
  .timeline{max-width:900px}
  .tl-row{grid-template-columns:1fr minmax(0,372px) 1fr;min-height:230px}
  .tl-center{gap:18px}
  .tl-bullet{width:58px}
  .tl-time{font-size:25px}
  .tl-title{font-size:25px}
  .tl-note{font-size:13.5px;margin-top:6px}
  .tl-deco{min-height:150px}

  .tl-deco .d-clock{width:140px;right:34px}
  .tl-deco .d-bread{width:150px;left:24px}
  .tl-deco .d-coffee{width:66px;left:182px;top:58%}
  .tl-deco .d-bag{width:118px;right:24px;bottom:12px}
  .tl-deco .d-pencils{width:40px;right:124px;bottom:34px}
  .tl-deco .d-pencil{width:34px;right:142px;bottom:10px}
  .tl-deco .d-ball{width:60px;left:36px;top:18px}
  .tl-deco .d-bird{width:128px;left:104px}
  .tl-deco .d-curry{width:144px;right:36px}
  .tl-deco .d-bath{width:176px;left:46px}
  .tl-deco .d-moon{width:62px;right:172px;top:14px}
  .tl-deco .d-cat{width:88px;right:84px;bottom:2px}
  .tl-deco .d-lamp{width:100px;right:18px;bottom:2px}

  .daylife+.dots{max-width:880px;margin:96px auto 70px}

  /* ⑥ 広報誌 */
  .bulletin{padding:54px 40px 46px;max-width:1100px;margin:0 auto}
  .bulletin .sec-head{font-size:31px;letter-spacing:.14em;margin:0 0 18px}
  .bulletin__lead{font-size:16px;line-height:1.85;letter-spacing:.03em;color:var(--ink2);margin-bottom:26px}
  .bulletin__btn{font-size:13px;padding:7px 26px;border-radius:24px}
  .bulletin .bl-leaf-l{width:78px;top:20px;left:6%;animation:floaty 7s ease-in-out infinite}
  .bulletin .bl-tree-r{width:104px;top:6px;right:5.5%;animation:floaty 6.4s ease-in-out .5s infinite}
}

/* =========================================================
   SP 調整 (〜859px) — 1カラム読みやすく
   ========================================================= */
@media (max-width:859px){
  /* タイムライン: 中央列を主役にしつつデコは左右の細列に小さく収める */
  .tl-row{grid-template-columns:58px 1fr 58px}
  .tl-center{justify-content:flex-start;gap:9px}
  .tl-deco{min-height:84px}
  .tl-deco img{left:auto;right:auto}

  /* 左列(中央寄り=右端)に主役アイコン1つ / 鉛筆など副次は非表示でスッキリ */
  .tl-deco .d-clock{width:50px;right:4px;top:50%;transform:translateY(-50%)}
  .tl-deco .d-bag{width:50px;right:4px;bottom:8px}
  .tl-deco .d-pencils,
  .tl-deco .d-pencil,
  .tl-deco .d-coffee,
  .tl-deco .d-moon{display:none}
  .tl-deco .d-curry{width:54px;right:2px;top:50%;transform:translateY(-50%)}
  .tl-deco .d-cat{width:40px;right:18px;bottom:2px;left:auto}
  .tl-deco .d-lamp{width:42px;right:0;bottom:0}

  /* 右列(中央寄り=左端)に主役アイコン */
  .tl-deco .d-bread{width:56px;left:2px;top:50%;transform:translateY(-50%)}
  .tl-deco .d-ball{width:30px;left:2px;top:8px}
  .tl-deco .d-bird{width:52px;left:6px;top:50%;transform:translateY(-44%)}
  .tl-deco .d-bath{width:62px;left:0;top:50%;transform:translateY(-46%)}

  .gal-deco.gd-leaf{width:34px;left:2px;top:20px}
  .gal-deco.gd-round{width:44px;right:2px;bottom:130px}
}

/* ヒーロー写真の右下の水彩(050-09) — 先方指摘で追加 */
.life-hero{position:relative}
.hero-deco-r{position:absolute;right:6%;bottom:-18px;width:64px;z-index:3;pointer-events:none}
@media (min-width:860px){ .hero-deco-r{width:104px;right:7%;bottom:-34px} }

/* =========================================================
   SP専用(<860px): 本文/画像に干渉する装飾を非表示(先方指摘 2026-06-25)
   - hero-deco-r: トップ画像右下のイラスト(トップ画像に被る)
   - gal-deco: 思い出写真館の葉・丸(2枚とも削除指示)
   - bl-deco: 広報誌の葉・木(2枚とも削除指示)
   ========================================================= */
@media (max-width:859px){
  .hero-deco-r,
  .gal-deco,
  .bl-deco{
    display:none;
  }
}

/* 思い出写真館: 選択中サムネイルの強調(ギャラリー機能 2026-06-25) */
.gallery__thumbs-row img.is-active{outline:2px solid var(--aqua-btn);outline-offset:1px;box-shadow:0 4px 12px rgba(143,209,225,.4)}