/* ═══════════════════════════════════════════════════════════════
   にじいろのぽけっと 共通テーマ（2026-09-10 BOSS指示: 白・さっぱり・清潔・見やすい・かわいい・おしゃれ）
   各ページの <style> の後に読み込んで上書きする。色や角丸はここだけ直せば全ページに効く。
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#FFFFFF; --card:#FFFFFF;
  --text:#33302E; --muted:#8C8681;
  --line:#EEE9E6;                      /* 罫線・カードの縁 */
  --accent:#FF6F91;  --accent-soft:#FFE7ED;   /* 主役色(コーラルピンク) */
  --sky:#5AB8E8;     --sky-soft:#E3F3FB;
  --r1:#FF8FAB;--r2:#FFB347;--r3:#FFE066;--r4:#90E89F;--r5:#7DD8F8;--r6:#B39DDB;
  --shadow:rgba(60,40,30,.06);
  --radius:20px;
  --tint-pink:#FFE9EF; --tint-peach:#FFF0E0; --tint-lemon:#FFF7D6;
  --tint-mint:#E3F7E8; --tint-sky:#E2F3FB;   --tint-lav:#EEE9F8;
}
body{background:#fff;color:var(--text)}
.header{background:#fff}
.rainbow-bar{height:2px;opacity:1;margin:0 20px}

/* ─ ログイン ─ */
#login{background:#fff}
.login-logo img{filter:drop-shadow(0 8px 16px rgba(255,111,145,.22))}
.login-title{font-size:28px;letter-spacing:2px;color:var(--text)}
.login-brand{margin-bottom:34px}
.form-label{color:var(--muted)}
.form-input{border:1.5px solid var(--line);box-shadow:none;border-radius:16px;text-align:center;
            font-size:22px;letter-spacing:6px;font-weight:700;padding:14px 18px}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.login-btn{background:var(--accent);box-shadow:0 8px 20px rgba(255,111,145,.28);border-radius:16px;letter-spacing:1px}
.login-err{color:var(--accent)}
.login-note{color:var(--muted)}

/* ─ ヘッダー・戻るボタン ─ */
.role-chip{background:var(--accent-soft);color:var(--accent);border:1px solid #FFD3DD}
.back, a[href='/menu']{background:#fff!important;color:var(--text)!important;border:1.5px solid var(--line);
                         box-shadow:0 1px 2px rgba(0,0,0,.03)}
.header .ttl,.ttl{color:var(--text)}

/* ─ メニュー(タイル) ─ */
.greet{color:var(--muted);font-weight:700}
.tiles{gap:12px}
.tile{border:1.5px solid var(--line)!important;box-shadow:0 1px 2px rgba(0,0,0,.03);padding:18px 16px 16px;border-radius:var(--radius)}
.tile:active{background:#FAFAFA}
.tile .ic{width:50px;height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;
          font-size:24px;margin-bottom:14px;background:var(--tint,#F4F1EF)}
.tile.c1{--tint:var(--tint-pink)}.tile.c2{--tint:var(--tint-peach)}.tile.c3{--tint:var(--tint-lemon)}
.tile.c4{--tint:var(--tint-mint)}.tile.c5{--tint:var(--tint-sky)}.tile.c6{--tint:var(--tint-lav)}
.tile .nm{font-size:16px;letter-spacing:.3px}
.tile .ds{color:var(--muted);font-size:11.5px}
.help-card{border:1.5px solid var(--line);box-shadow:none}
.help-step{background:#FAF8F7}
.foot button{color:var(--muted)}

/* ─ 定休日カレンダー ─ */
.monthbar button{box-shadow:none;border:1.5px solid var(--line);width:38px;height:38px;color:var(--text)}
.monthbar .ym{letter-spacing:1px}
.cal{border:1.5px solid var(--line);box-shadow:none;padding:14px 10px 16px;border-radius:var(--radius)}
.dow{color:var(--muted);font-size:11px;margin-bottom:8px}
.dow .sun{color:var(--accent)}.dow .sat{color:var(--sky)}
.grid{gap:6px 4px}
.day{border-radius:50%;border-width:2px;font-size:15px;font-weight:700}
.day.sun{color:var(--accent)}.day.sat{color:var(--sky)}
.day.closed{background:var(--accent-soft);color:#D9456C}
.legend{color:var(--muted)}
.legend .lc::before{background:var(--accent-soft);border:1px solid #FFD3DD;border-radius:50%}
.edit-note{background:var(--tint-lemon);color:#6b5300;border-radius:14px}
.note{color:var(--muted)}
.toast{background:var(--text)}

/* ─ アルバム ─ */
.month-chip{box-shadow:none;border:1.5px solid var(--line);color:var(--muted)}
.month-chip.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 14px rgba(255,111,145,.28)}
.dl-btn{background:var(--sky);box-shadow:0 6px 16px rgba(90,184,232,.28)}
.photo-cell{box-shadow:none;background:#F4F1EF;border-radius:14px}
.event-card{border:1.5px solid var(--line);box-shadow:none}
.event-count{background:#F7F5F4}
.more-btn{box-shadow:none;border:1.5px solid var(--line);color:var(--accent)}
.help-card.warn{background:var(--tint-peach);border-color:#FFD9B3}
.help-strong{background:var(--tint-lemon)}
.upd-chip{color:var(--muted)}
.bottom-nav{background:rgba(255,255,255,.96);border-top:1px solid var(--line)}
.nav-item.active .nav-icon{background:var(--accent-soft);box-shadow:none}
.nav-item.active .nav-label{color:var(--accent)}
.new-badge,.event-title .new-inline{background:var(--accent)}

/* ─ 2026-09-10 BOSS指示(入り口): 濃いピンクのベタ塗り廃止・にじいろカラーはロゴ(フクロウ)の実色に ─ */
:root{
  /* kids2416.jp ロゴのフクロウから抽出: マゼンタ/オレンジ/黄/緑/青/紫 */
  --n1:#D80078; --n2:#F09000; --n3:#F0D818; --n4:#18A848; --n5:#0060D8; --n6:#780090;
}
.rainbow{background:linear-gradient(90deg,var(--n1),var(--n2),var(--n3),var(--n4),var(--n5),var(--n6));
         -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.rainbow-bar{background:linear-gradient(90deg,var(--n1),var(--n2),var(--n3),var(--n4),var(--n5),var(--n6));height:2px}
.login-logo img{filter:drop-shadow(0 8px 14px rgba(0,0,0,.10))}
.login-btn{background:#fff;color:var(--text);border:1.5px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.05);font-weight:800}
.login-btn:active{background:#FAF8F7}
.form-input:focus{border-color:#BFB7B2;box-shadow:0 0 0 4px #F1EEEC}
.month-chip.active{background:var(--text);border-color:var(--text);box-shadow:none}
.role-chip{background:#F7F5F4;color:var(--muted);border-color:var(--line)}

/* ─ 2026-09-10 BOSS指示②: 虹グラデ全廃・ボタンはボタンと分かる形に ─ */
.rainbow{background:none;-webkit-text-fill-color:currentColor;color:var(--muted)}
.rainbow-bar{background:var(--line);height:1px}
.logo-text span{background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
.login-brand{color:var(--muted);font-weight:700;letter-spacing:1px}
/* ボタン: フクロウの黄色で塗る(ブランド色・ピンクではない・押せると分かる)。文字は濃色 */
.login-btn{background:#F7D83B;color:#33302E;border:none;border-radius:16px;
           box-shadow:0 6px 16px rgba(247,216,59,.35);font-weight:800;font-size:17px}
.login-btn:active{background:#EFCB1F;transform:scale(.98)}

/* ─ 2026-09-10 BOSS指示③: 黄色は淡く・ラベル中央・園名行は消す ─ */
.login-btn{background:#FFF1A8;color:#4A4030;box-shadow:0 4px 12px rgba(255,241,168,.5)}
.login-btn:active{background:#FFE98A}
.form-label{text-align:center}
#login .login-brand{display:none}
.login-title{margin-bottom:26px}

/* ─ 2026-09-10 BOSS指示④: PCで見た時はスマホ幅の白い柱＋左右は淡い色 ─ */
@media (min-width:600px){
  html{background:#FBF7E8}
  body{max-width:520px;margin:0 auto;background:#fff;min-height:100vh;box-shadow:0 0 0 1px var(--line)}
  .bottom-nav{max-width:520px;left:0;right:0;margin:0 auto}
  .toast{max-width:480px}
}
@media (min-width:600px){ .rainbow-bar{width:auto;margin:0 20px} }

/* ─ 2026-09-10 BOSS指示⑤(アルバム): 左右の白余白を詰めて目一杯・ホームボタンは月チップ行の右・アイコン無し ─ */
.home-btn,.back{flex-shrink:0;font-size:12px;font-weight:800;color:var(--text);background:#fff;border:1.5px solid var(--line);
                border-radius:99px;padding:7px 13px;text-decoration:none;white-space:nowrap;line-height:1}
#gallery .header{padding:12px 8px 6px}
#gallery .header-top{margin-bottom:10px}
#gallery .rainbow-bar{margin:0 8px}
#gallery .main{padding:14px 6px}
#gallery .photo-grid{gap:3px}
.event-card{border-radius:16px}
@media (min-width:600px){ #gallery .rainbow-bar{margin:0 8px} }

/* ─ 2026-09-10 BOSS指示⑥: アルバムのPC幅で内側にもう1段の余白(旧ルール max-width:430px)が残っていた→撤去。
   ボタン色は入り口の「ひらく」と同じ淡いレモンで統一 ─ */
:root{ --btn:#FFF1A8; --btn-text:#4A4030; --btn-press:#FFE98A; --btn-line:#F3E08A; }
@media (min-width:480px){
  #login,#gallery{max-width:none;margin:0;box-shadow:none}
  #gallery{background:#fff}
  .bottom-nav,.modal{max-width:520px}
}
.dl-btn{background:var(--btn);color:var(--btn-text);box-shadow:0 4px 12px rgba(255,241,168,.5)}
.dl-btn:active{background:var(--btn-press)}
.month-chip.active{background:var(--btn);border-color:var(--btn-line);color:var(--btn-text);box-shadow:none}
.nav-item.active .nav-icon{background:var(--btn)}
.nav-item.active .nav-label{color:var(--btn-text)}
.more-btn{color:var(--btn-text);background:var(--btn);border-color:var(--btn-line)}
#androidInstallBtn{background:var(--btn);color:var(--btn-text);box-shadow:none}
.monthbar button:active{background:var(--btn)}

/* ─ 2026-09-10 BOSS指示⑦: ボタンは「もっと薄く淡く」＋役割ごとに別のパステル ─ */
:root{
  --p-lemon:#FFF6C4; --p-lemon-line:#F6E9A0;
  --p-mint:#DDF5E6;  --p-mint-line:#BFE6CC;
  --p-sky:#E0F1FB;   --p-sky-line:#BFDFF2;
  --p-peach:#FFEBDA; --p-peach-line:#F8D3B8;
  --p-lav:#ECE7F8;   --p-lav-line:#D6CCEE;
  --btn-text:#3F3A36;
}
.login-btn{background:var(--p-lemon);box-shadow:0 4px 12px rgba(246,233,160,.45)}
.login-btn:active{background:#FFF0A6}
.dl-btn{background:var(--p-mint);color:var(--btn-text);box-shadow:none;border:1.5px solid var(--p-mint-line)}
.dl-btn:active{background:#CFEFDB}
.month-chip.active{background:var(--p-sky);border-color:var(--p-sky-line);color:var(--btn-text)}
.nav-item.active .nav-icon{background:var(--p-sky)}
.more-btn{background:var(--p-peach);border-color:var(--p-peach-line);color:var(--btn-text)}
#androidInstallBtn{background:var(--p-lav);color:var(--btn-text);border:1.5px solid var(--p-lav-line)}
.monthbar button:active{background:var(--p-sky)}

/* ─ 2026-09-11 ホーム(メニュー): 父兄・夜契約は「うちの子」写真＋ボタン横並び ─ */
.kid-photo{margin:2px 0 14px;border-radius:var(--radius);overflow:hidden;background:#F4F1EF;
           aspect-ratio:4/3;border:1.5px solid var(--line)}
.kid-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tiles.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
.tiles.row .tile{padding:14px 8px 12px;text-align:center;border-radius:18px}
.tiles.row .tile .ic{margin:0 auto 10px;width:46px;height:46px;font-size:22px;border-radius:14px}
.tiles.row .tile .nm{font-size:14px;margin-bottom:0}
.tiles.row .tile .ds{display:none}
.help-link{text-align:center;margin-top:26px}
.help-link button{background:none;border:none;color:var(--muted);font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer}
#home .main{padding:14px 12px 20px}
#home .header .sub{display:none}  /* スケッチ通りフクロウ＋題名だけ */
/* 2026-09-11 父兄ホームのボタンは4つ横並び(アルバム・申請・定休日・書類) */
.tiles.row{gap:8px}
.tiles.row .tile{padding:12px 4px 10px;border-radius:16px}
.tiles.row .tile .ic{width:42px;height:42px;font-size:21px;border-radius:13px;margin-bottom:8px}
.tiles.row .tile .nm{font-size:13px;letter-spacing:0;white-space:nowrap}
/* 2026-09-11 BOSS指示: 父兄ホームのボタンは大きく 2×2 */
.tiles.row{grid-template-columns:1fr 1fr;gap:12px}
.tiles.row .tile{padding:22px 10px 18px;border-radius:20px}
.tiles.row .tile .ic{width:60px;height:60px;font-size:30px;border-radius:18px;margin-bottom:12px}
.tiles.row .tile .nm{font-size:17px}

/* ─ 2026-09-11 BOSS指示: 父兄ホーム 角をキツく・4ボタン同色(入口の黄色をさらに薄く)・アイコン無し・文字は茶・枠線なし ─ */
.kid-photo{border-radius:10px;border:none}
.tiles.row .tile{border-radius:10px;border:none!important;box-shadow:none;
                 background:#FFF9DC!important;padding:26px 10px 24px}
.tiles.row .tile .ic{display:none}
.tiles.row .tile .nm{color:#7A5A2E;font-size:17px;margin:0}
.tiles.row .tile:active{background:#FFF1A8!important}
/* 2026-09-11 BOSS指示: 蛍光ペン寄りの黄色・ボタンは正方形 */
.tiles.row .tile{background:#FAFF8F!important;aspect-ratio:1/1;padding:0;display:flex;align-items:center;justify-content:center}
.tiles.row .tile:active{background:#F2FF5C!important}
/* 2026-09-11 BOSS指示: 色をやさしく・文字2倍・右下寄せ */
.tiles.row .tile{background:#FCFFB8!important;align-items:flex-end;justify-content:flex-end;padding:0 14px 12px 0}
.tiles.row .tile:active{background:#F7FF8C!important}
.tiles.row .tile .nm{font-size:34px;line-height:1;letter-spacing:0}
/* 2026-09-11 BOSS指示: ボタン90%・文字を薄く */
.tiles.row{width:90%;margin:0 auto}
.tiles.row .tile .nm{font-weight:500;color:#A0825C}
/* 2026-09-11 BOSS指示: 文字を白に */
.tiles.row .tile .nm{color:#fff}
/* 2026-09-11 BOSS指示: 父兄ホームは背景水色・ボタン塗りなし・枠線白 */
body:has(#home:not(.hide)){background:#DDF1FB}
#home .header{background:transparent;border-bottom-color:rgba(255,255,255,.7)}
#home .role-chip{background:#fff;border-color:#fff}
.tiles.row .tile{background:transparent!important;border:2px solid #fff!important}
.tiles.row .tile:active{background:rgba(255,255,255,.35)!important}
/* 2026-09-11 BOSS指示: 青をもう少し強く */
body:has(#home:not(.hide)){background:#BFE3F7}
/* 2026-09-11 BOSS指示: 見本の青(#5491E6) */
body:has(#home:not(.hide)){background:#5491E6}
#home .header .ttl{color:#fff}
#home .header{border-bottom-color:rgba(255,255,255,.35)}
#home .help-link button,#home .foot button,#home .greet,#home .note{color:rgba(255,255,255,.85)}
/* 2026-09-11 BOSS指示: ボタンは横一列に4つ(正方形のまま・文字は収まる大きさに) */
/* minmax(0,1fr) = 「アルバム」等の長い文字で列を押し広げない。1fr のままだと画面幅320pxの
   小さいiPhoneで4つ分が収まらず、ホームが横にはみ出した(2026-09-15 修正) */
.tiles.row{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
.tiles.row .tile{padding:0 7px 7px 0}
.tiles.row .tile .nm{font-size:16px;white-space:nowrap}
/* 幅の狭い端末(iPhone SE 第1世代など320px)は文字を一段小さくして4つを収める */
@media (max-width:360px){
  .tiles.row{gap:6px}
  .tiles.row .tile{padding:0 5px 6px 0}
  .tiles.row .tile .nm{font-size:14px}
}
#home .foot-note{color:rgba(255,255,255,.75)!important}
/* 2026-09-11 BOSS指示: 背景は白に戻し、ボタン文字と枠線を濃い青 */
body:has(#home:not(.hide)){background:#fff}
#home .header{border-bottom-color:var(--line)}
#home .header .ttl{color:var(--text)}
#home .role-chip{background:var(--accent-soft);border-color:#FFD3DD}
#home .help-link button,#home .foot button,#home .greet,#home .note,#home .foot-note{color:var(--muted)!important}
.tiles.row .tile{border-color:#2F6FD6!important}
.tiles.row .tile .nm{color:#2F6FD6}
.tiles.row .tile:active{background:#E8F0FC!important}
/* 2026-09-11 BOSS指示: 父兄ホームの文字は全部濃い青で統一 */
#home,#home .header .ttl,#home .greet,#home .note,#home .foot-note,#home .help-link button,#home .foot button,
#home .help-card,#home .help-card .h,#home .help-step{color:#2F6FD6!important}
#home .role-chip{background:#E8F0FC;border-color:#C9DAF5;color:#2F6FD6}
/* 2026-09-11 BOSS指示: 右上チップは塗りなし */
#home .role-chip{background:transparent;border:1.5px solid #2F6FD6;color:#2F6FD6}
/* 2026-09-11 BOSS指示: 題名下の横線も濃い青 */
#home .header{border-bottom:1.5px solid #2F6FD6}
#home .rainbow-bar{display:none}
/* 2026-09-11 BOSS指示: 名前チップの角をキツく */
#home .role-chip{border-radius:8px}
/* 2026-09-11 BOSS指示: 横線は両端まで届かせない(内側20pxで止める) */
#home .header{border-bottom:none}
#home .rainbow-bar{display:block;height:1.5px;background:#2F6FD6;margin:0 20px;border-radius:0}
/* 2026-09-11 BOSS指示: 写真とボタンの間隔を横線と写真の間隔(30px)に揃える */
#home .kid-photo{margin-bottom:30px}
/* 2026-09-11 定休日: 夜のみ休の色(終日=ピンク系は既存) */
.day.night{background:#EEE9F8;color:#6A3FA8}
.legend .ln::before{background:#EEE9F8;border:1px solid #D9CAF3;border-radius:50%}
/* 2026-09-11 BOSS指示: 定休日の「休」「夜休」文字を消す */
.day.closed::after,.day.night::after{content:none}
#gallery .logo-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Safariはflexの子に min-width:0 が無いと縮まず「…」が効かない(iPhone実機で題名がホームの下に潜った 2026-09-11) */
#gallery .logo{overflow:hidden}
#gallery .logo-text{min-width:0;flex:1 1 auto;display:block}
/* 2026-09-11 BOSS指示(訂正): 「ホーム」はヘッダー行の右端(固定表示ではない)。見た目は白ピル＋薄い縁で全ページ統一 */
.home-right{margin-left:auto!important;flex-shrink:0;background:#fff!important;color:var(--text,#33302E)!important;border:1.5px solid var(--line,#EEE9E6)!important;
  border-radius:99px!important;padding:8px 14px!important;font-size:12px!important;font-weight:800!important;text-decoration:none!important;line-height:1!important;
  white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.03)!important;display:inline-block!important}
.home-right:active{background:#FAF8F7!important}
/* 2026-09-11 BOSS指示: 書類のボタンは父兄ホームと同じ作り(塗りなし・2px枠・同色文字・アイコン無し・角10px)。大きさ形は従来通り。色は緑(#1E9E4A・フクロウの緑寄り) */
.doc{background:transparent!important;border:2px solid #1E9E4A!important;border-radius:10px!important;color:#1E9E4A!important}
.doc:active{background:#E8F6EC!important}
.doc .ic{display:none}
.doc .nm{color:#1E9E4A;font-weight:500;font-size:17px}
.doc .mt{color:#1E9E4A;opacity:.75}
/* 2026-09-11 BOSS指示: 更新日は出さない */
.doc .mt{display:none}
/* 2026-09-11 BOSS指示: 書類ページ=ボタンの高さは更新日があった時と同じ(約72px)・題名/ホーム/横線も同じ緑 */
body.pg-docs .doc{padding:25px 14px!important}
body.pg-docs .header .ttl{color:#1E9E4A}
body.pg-docs .home-right{border-color:#1E9E4A!important;color:#1E9E4A!important;border-width:1.5px!important}
body.pg-docs .rainbow-bar{height:1.5px;background:#1E9E4A;margin:0 20px}
/* 2026-09-11 BOSS指示: 書類ボタンの文字は左上 */
body.pg-docs .doc{align-items:flex-start!important;padding:12px 14px 38px!important}
/* 2026-09-11 BOSS指示(アルバム): 月チップ「すべて」の塗りなし(選択中は枠と文字を濃く)・新着Zipボタンは塗りなし・太字なし・アイコン無し */
#gallery .month-chip.active{background:transparent;border-color:var(--text);color:var(--text);box-shadow:none}
#gallery .dl-btn.sm{background:transparent;border:1.5px solid var(--line);color:var(--text);font-weight:500;box-shadow:none}
#gallery .dl-btn.sm:active{background:#FAF8F7}
/* ─ 2026-09-11 BOSS指示: スタッフホームは父兄ホームの作りをまねる。ボタンの大きさは従来の2×2(幅=半分・高さ144px)のまま ─ */
.tiles.row.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:16px}  /* 上余白14+16=30(父兄の横線→写真と同じ) */
.tiles.row.two .tile{aspect-ratio:auto;height:144px;padding:0 14px 12px 0}
.tiles.row.two .tile .nm{font-size:20px}
/* ─ 2026-09-11 スタッフ「給与」画面(/pay): 文字・枠線・ホームはスタッフホームと同じ青 ─ */
body.pg-pay .home-right{border-color:#2F6FD6!important;color:#2F6FD6!important;border-width:1.5px!important}
/* ─ 2026-09-11 BOSS指示: 夜契約ホームの4つ目は押せないダミー枠(見た目は他と同じ青枠・中身なし) ─ */
.tiles.row .tile.blank{pointer-events:none}
.tiles.row .tile.blank:active{background:transparent!important}
/* ─ 2026-09-11 BOSS指示: スタッフホームの下に横長「月次」ボタン(高さは他の半分・文字は同じ右下) ─ */
.tiles.row.two .tile.wide{grid-column:1/-1;height:144px}  /* 2026-09-11 BOSS指示: 2倍(上のボタンと同じ高さ) */

/* 2026-09-11 BOSS指示: 昼父兄ホームの4ボタンの下に長細いLINEボタン(全幅・低め・文字中央) */
.tiles.row .tile.slim{grid-column:1/-1;aspect-ratio:auto;height:48px;align-items:center;justify-content:center;padding:0;margin-top:4px}
.tiles.row .tile.slim .nm{font-size:16px}

/* 2026-09-17 BOSS指示: 「明細・請求書」だけは上の4つと同じ高さにする。
   4列・gap 8px なので 正方形タイルの一辺 = (並びの横幅 - gap×3) ÷ 4。
   cqw(=容れ物の幅の1%)で出すので画面幅が変わっても常に揃う。
   1行目の 85px は cqw が効かない古い端末(iOS15以前)向けの目安。LINEの細いボタンは48pxのまま */
.tiles.row{container-type:inline-size}
/* 2026-09-17 BOSS指示: 文字の位置も上の4つと同じ「右下」に（slimの中央寄せを打ち消す） */
.tiles.row .tile.slim.bills{height:85px;height:calc((100cqw - 24px) / 4);
  align-items:flex-end;justify-content:flex-end;padding:0 7px 7px 0}
@media (max-width:360px){   /* この幅ではgapが6px・文字14px・余白5px(上の .tiles.row と揃える) */
  .tiles.row .tile.slim.bills{height:calc((100cqw - 18px) / 4);padding:0 5px 6px 0}
  .tiles.row .tile.slim.bills .nm{font-size:14px}
}

/* 2026-09-17 BOSS指示: 昼父兄ホームは4つの下に「明細・請求書」と「LINE」を半分ずつ横並び。
   4列のうち2列ずつ使う。高さ・文字位置(右下)・余白・字の大きさは上の4つと同じ */
.tiles.row .tile.half{grid-column:span 2;aspect-ratio:auto;
  height:85px;height:calc((100cqw - 24px) / 4);
  align-items:flex-end;justify-content:flex-end;padding:0 7px 7px 0;margin-top:4px}
@media (max-width:360px){
  .tiles.row .tile.half{height:calc((100cqw - 18px) / 4);padding:0 5px 6px 0}
  .tiles.row .tile.half .nm{font-size:14px}
}

/* 2026-09-11 BOSS指示: 写真とボタンの間を詰める(30→18px) */
#home .kid-photo{margin-bottom:18px}

/* 2026-09-17 BOSS指摘「使い方が見にくい・見出しと文章の境目があいまい」
   色は父兄ホームの濃い青のまま。見出しの上に細い区切り線を入れ、本文は少し薄く・行間を広げて差をつける */
#home .help-card{padding:8px 16px 18px}
#home .help-card .h{font-size:16px;font-weight:800;margin-bottom:10px;padding-top:16px;border-top:1.5px solid #D9E6F8}
#home .help-card .h:first-child{border-top:none;padding-top:8px}
#home .help-card p{font-size:13px;line-height:1.85;opacity:.82}
#home .help-card .help-step{margin:10px 0;opacity:.95}