/* ============================================================
   保育参観予約システム — 保護者向けスタイル  v3.1.0
   ============================================================ */

#sk-root {
  --sk-g:   #00a05c;  --sk-gl: #d6f5e8;   /* concept green */
  --sk-co:  #f7b146;  --sk-col:#fef8ec;   /* concept orange */
  --sk-bl:  #10b7ee;  --sk-bll:#e0f6fd;   /* concept blue */
  --sk-gy:  #6b7280;  --sk-gyl:#f3f4f6;
  --sk-tx:  #1f2937;  --sk-bd: #e5e7eb;
  --sk-rad: 11px;     --sk-red:#dc2626;
  --sk-amb: #e09a30;

  font-family:'Noto Sans JP','Hiragino Sans','Meiryo',sans-serif;
  font-size:16px; line-height:1.6; color:var(--sk-tx);
  width:100%; max-width:100%; box-sizing:border-box; overflow-x:hidden;
}
#sk-root *,#sk-root *::before,#sk-root *::after{box-sizing:border-box;}
#sk-root button,#sk-root input,#sk-root select{font-family:'Noto Sans JP','Hiragino Sans','Meiryo',sans-serif;}

/* ── タブ ────────────────────────────── */
#sk-root .sk-tabs{display:flex;border-bottom:2px solid var(--sk-gl);margin-bottom:20px;}
#sk-root .sk-tab{flex:1;padding:12px 6px;border:none;background:none;font-size:.88em;font-weight:500;color:var(--sk-gy);cursor:pointer;border-bottom:3px solid transparent;transition:.2s;}
#sk-root .sk-tab.on{color:var(--sk-g);border-bottom-color:var(--sk-g);}

/* ── ステップ ────────────────────────── */
#sk-root .sk-step{display:none;}
#sk-root .sk-step.on{display:block;}
#sk-root #sk-s4 .sk-fg,
#sk-root #sk-s4 .sk-cafe-q,
#sk-root #sk-s4 .sk-sibnote,
#sk-root #sk-s4 .sk-btn,
#sk-root #sk-s4 #sk-s4al,
#sk-root #sk-s5 .sk-sbox,
#sk-root #sk-s5 .sk-al,
#sk-root #sk-s5 .sk-btn{max-width:620px;margin-left:auto;margin-right:auto;display:block;}
#sk-root .sk-si{display:flex;align-items:center;gap:4px;margin-bottom:16px;}
#sk-root .sk-sd{width:8px;height:8px;border-radius:50%;background:var(--sk-bd);transition:.2s;}
#sk-root .sk-sd.done{background:var(--sk-g);}
#sk-root .sk-sd.cur{background:var(--sk-g);width:22px;border-radius:4px;}
#sk-root .sk-sl{font-size:.73em;color:var(--sk-gy);margin-left:auto;}
#sk-root .sk-h3{font-size:1.08em;font-weight:700;margin:0 0 13px;}
#sk-root .sk-sub{font-size:1.05em;font-weight:700;color:var(--sk-g);margin:0 0 13px;}
#sk-root .sk-back{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--sk-g);font-size:.87em;font-weight:500;cursor:pointer;margin-bottom:12px;padding:0;}
#sk-root .sk-loading{text-align:center;padding:32px;color:var(--sk-gy);font-size:.88em;}

/* ── グループカード ──────────────────── */
#sk-root .sk-gg{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:8px;}
@media(min-width:520px){#sk-root .sk-gg{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}}
#sk-root .sk-gc{container-type:inline-size;background:#fff;border:2px solid var(--sk-bd);border-radius:var(--sk-rad);padding:16px 10px 14px;cursor:pointer;text-align:center;transition:.2s;aspect-ratio:1.1;}
#sk-root .sk-gc:hover,#sk-root .sk-gc.on{border-color:var(--sk-g);background:var(--sk-gl);}
#sk-root .sk-gc .ge{display:flex;justify-content:center;margin-bottom:8px;color:var(--sk-g);}
#sk-root .sk-gc .ge img{width:clamp(48px,62cqw,110px);height:auto;aspect-ratio:1;object-fit:contain;transition:transform .2s;}
#sk-root .sk-gc:hover .ge img{transform:scale(1.1);}
#sk-root .sk-gc .gn{font-size:clamp(.72em,8cqw,1em);font-weight:700;color:var(--sk-g);line-height:1.4;}
#sk-root .sk-gc .gs{font-size:clamp(.58em,6cqw,.76em);color:var(--sk-gy);margin-top:4px;line-height:1.5;}

/* ── チップ ──────────────────────────── */
#sk-root .sk-s2-header{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
#sk-root .sk-s2-img img{width:72px;height:72px;object-fit:contain;flex-shrink:0;}
#sk-root .sk-s2-header .sk-h3{margin:0;}

#sk-root .sk-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px;}
#sk-root .sk-chip{padding:11px 20px;border:2px solid var(--sk-bd);border-radius:100px;background:#fff;font-size:1em;font-weight:600;cursor:pointer;transition:.2s;}
#sk-root .sk-chip:hover,#sk-root .sk-chip.on{border-color:var(--sk-g);background:var(--sk-gl);color:var(--sk-g);}

/* ══════════════════════════════════════
   保護者向けカレンダー（Step 3）
══════════════════════════════════════ */

#sk-root .sk-pcal{border:2px solid var(--sk-gl);border-radius:var(--sk-rad);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);background:#fff;margin-bottom:14px;}
#sk-root .sk-pcal-nav{display:flex;align-items:center;justify-content:space-between;background:var(--sk-g);color:#fff;padding:11px 14px;}
#sk-root .sk-pcal-title{font-size:1em;font-weight:700;letter-spacing:.02em;}
#sk-root .sk-pcal-nav-btn{background:rgba(255,255,255,.2);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:1.15em;display:flex;align-items:center;justify-content:center;transition:background .15s;line-height:1;}
#sk-root .sk-pcal-nav-btn:hover{background:rgba(255,255,255,.35);}

#sk-root .sk-pcal-legend{display:flex;gap:8px;flex-wrap:wrap;padding:9px 12px;background:#f9fafb;border-bottom:1px solid var(--sk-bd);}
#sk-root .sk-pcal-leg{display:inline-flex;align-items:center;gap:5px;font-size:.72em;font-weight:700;color:#555;}
#sk-root .sk-pcal-leg::before{content:'';width:11px;height:11px;border-radius:3px;flex-shrink:0;}
#sk-root .sk-pcal-leg-ok::before{background:#d6f5e8;border:1.5px solid var(--sk-g);}
#sk-root .sk-pcal-leg-wl::before{background:#fef0d0;border:1.5px solid var(--sk-amb);}
#sk-root .sk-pcal-leg-full::before{background:#fee2e2;border:1.5px solid var(--sk-red);}

#sk-root .sk-pcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:10px 8px;background:#fff;}
#sk-root .sk-pcal-dow{text-align:center;font-size:.7em;font-weight:700;padding:4px 0 6px;color:#888;}
#sk-root .sk-pcal-dow.sun{color:var(--sk-red);}
#sk-root .sk-pcal-dow.sat{color:#10b7ee;}

#sk-root .sk-pcal-cell{border-radius:8px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:2px solid transparent;transition:transform .12s,box-shadow .12s,border-color .12s;position:relative;cursor:default;}
#sk-root .sk-pcal-cell.empty,#sk-root .sk-pcal-cell.past{background:#f9fafb;}
#sk-root .sk-pcal-cell.none{background:#f9fafb;}
#sk-root .sk-pcal-cell.past .sk-pcal-num,#sk-root .sk-pcal-cell.none .sk-pcal-num{color:#d1d5db;}

#sk-root .sk-pcal-cell.avail{background:#d6f5e8;border-color:#80e4b8;cursor:pointer;}
#sk-root .sk-pcal-cell.avail:hover{transform:scale(1.06);box-shadow:0 3px 10px rgba(0,160,92,.25);border-color:var(--sk-g);z-index:1;}
#sk-root .sk-pcal-cell.avail .sk-pcal-num{color:#007a46;font-weight:700;}

#sk-root .sk-pcal-cell.waitlist{background:#fef0d0;border-color:#fbd88a;cursor:pointer;}
#sk-root .sk-pcal-cell.waitlist:hover{transform:scale(1.06);box-shadow:0 3px 10px rgba(247,177,70,.2);border-color:var(--sk-amb);z-index:1;}
#sk-root .sk-pcal-cell.waitlist .sk-pcal-num{color:#b07818;font-weight:700;}

#sk-root .sk-pcal-cell.full{background:#fee2e2;border-color:#fca5a5;cursor:pointer;}
#sk-root .sk-pcal-cell.full:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(220,38,38,.15);border-color:var(--sk-red);z-index:1;}
#sk-root .sk-pcal-cell.full .sk-pcal-num{color:#991b1b;font-weight:700;}

#sk-root .sk-pcal-cell.selected{border-color:#10b7ee!important;box-shadow:0 0 0 3px rgba(16,183,238,.2)!important;transform:scale(1.06);z-index:2;}

#sk-root .sk-pcal-cell.avail.sun .sk-pcal-num,#sk-root .sk-pcal-cell.avail.sat .sk-pcal-num{color:inherit;}
#sk-root .sk-pcal-cell.none.sun .sk-pcal-num,#sk-root .sk-pcal-cell.past.sun .sk-pcal-num{color:#fca5a5;}
#sk-root .sk-pcal-cell.none.sat .sk-pcal-num,#sk-root .sk-pcal-cell.past.sat .sk-pcal-num{color:#b3e8fa;}

#sk-root .sk-pcal-num{font-size:.9em;font-weight:600;line-height:1;}
#sk-root .sk-pcal-badge{font-size:.62em;font-weight:700;line-height:1;padding:1px 4px;border-radius:3px;}
#sk-root .sk-pcal-badge.ok{background:rgba(0,160,92,.15);color:#007a46;}
#sk-root .sk-pcal-badge.wl{background:rgba(247,177,70,.15);color:#b07818;}
#sk-root .sk-pcal-badge.full{background:rgba(220,38,38,.12);color:#991b1b;}
/* ★ カレンダーセル内のカフェアイコン */
#sk-root .sk-pcal-cafe{font-size:.6em;line-height:1;opacity:.8;}

/* 詳細パネル */
#sk-root .sk-pcal-detail{background:#fff;border:2px solid var(--sk-bd);border-radius:var(--sk-rad);padding:16px;margin-bottom:14px;animation:skDetailIn .18s ease;}
@keyframes skDetailIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
#sk-root .sk-pcal-det-date{font-size:1em;font-weight:700;margin-bottom:4px;}
#sk-root .sk-pcal-det-time{font-size:.88em;color:var(--sk-gy);margin-bottom:4px;}
/* ★ カフェ情報バナー */
#sk-root .sk-pcal-det-cafe{font-size:.82em;background:#fef0d0;color:#b07818;border:1px solid #fbd88a;padding:6px 10px;border-radius:7px;margin-bottom:8px;}
#sk-root .sk-pcal-det-note{font-size:.8em;color:var(--sk-gy);margin-bottom:10px;}
#sk-root .sk-pcal-det-status{font-size:.85em;font-weight:500;padding:8px 12px;border-radius:7px;margin-bottom:12px;}
#sk-root .sk-pcal-det-status.ok{background:var(--sk-gl);color:#007a46;}
#sk-root .sk-pcal-det-status.wl{background:#fef0d0;color:#b07818;}
#sk-root .sk-pcal-det-status.full{background:#fee2e2;color:#991b1b;}

/* ══════════════════════════════════════
   ★ サポーターズカフェ質問（Step 4）
══════════════════════════════════════ */

#sk-root .sk-cafe-q{
  background:#fffbeb;
  border:2px solid #fbd88a;
  border-radius:var(--sk-rad);
  padding:14px 16px;
  margin-bottom:16px;
}

#sk-root .sk-cafe-q-header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}
#sk-root .sk-cafe-icon-big{font-size:1.6em;line-height:1;flex-shrink:0;}
#sk-root .sk-cafe-qlabel{font-size:.9em;font-weight:700;color:#b07818;margin-bottom:3px;}
#sk-root .sk-cafe-qtime{font-size:.78em;color:#b07818;}

#sk-root .sk-cafe-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

#sk-root .sk-cafe-opt{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 10px;
  border:2px solid #fbd88a;
  border-radius:9px;
  background:#fff;
  cursor:pointer;
  font-size:.9em;
  font-weight:500;
  color:#b07818;
  transition:background .15s,border-color .15s;
}
#sk-root .sk-cafe-opt input[type="radio"]{
  width:16px;height:16px;margin:0;flex-shrink:0;accent-color:var(--sk-g);cursor:pointer;
}
#sk-root .sk-cafe-opt:hover{background:#fef0d0;border-color:var(--sk-amb);}
#sk-root .sk-cafe-opt.on{
  background:var(--sk-gl);
  border-color:var(--sk-g);
  color:var(--sk-g);
  font-weight:700;
}

#sk-root .sk-cafe-err{
  font-size:.78em;color:var(--sk-red);margin-top:8px;
}
#sk-root .sk-cafe-status{
  font-size:.8em;font-weight:700;margin:6px 0 4px;padding:4px 8px;border-radius:6px;
}
#sk-root .sk-cafe-status.open{color:#b07818;background:#fef0d0;}
#sk-root .sk-cafe-status.full{color:#dc2626;background:#fee2e2;}
#sk-root .sk-cafe-opt.disabled{opacity:.4;cursor:not-allowed;}
#sk-root .sk-cafe-opt.disabled input{cursor:not-allowed;}

/* ── フォーム ────────────────────────── */
#sk-root .sk-fg{margin-bottom:14px;}
#sk-root .sk-fg label{display:block;font-size:.82em;font-weight:700;margin-bottom:5px;}
#sk-root .sk-req{color:var(--sk-co);margin-left:2px;}
#sk-root .sk-fg input,#sk-root .sk-fg select{width:100%;padding:11px 13px;border:2px solid var(--sk-bd);border-radius:8px;font-size:.93em;outline:none;transition:.2s;background:#fff;-webkit-appearance:none;appearance:none;}
#sk-root .sk-fg input:focus,#sk-root .sk-fg select:focus{border-color:var(--sk-g);}
#sk-root .sk-fn{font-size:.73em;color:var(--sk-gy);margin-top:4px;display:block;}
#sk-root .sk-sibnote{font-size:.77em;color:var(--sk-gy);background:#f9fafb;border-radius:8px;padding:9px 12px;margin:-6px 0 14px;border-left:3px solid var(--sk-bd);}

/* ── サマリー ────────────────────────── */
#sk-root .sk-sbox{background:var(--sk-gl);border-radius:var(--sk-rad);padding:14px;margin-bottom:16px;}
#sk-root .sk-sr{display:flex;font-size:.86em;margin-bottom:7px;}
#sk-root .sk-sr:last-child{margin-bottom:0;}
#sk-root .sk-sl2{color:var(--sk-gy);width:82px;flex-shrink:0;font-size:.79em;}
#sk-root .sk-sv{font-weight:500;}

/* ── ボタン ──────────────────────────── */
#sk-root .sk-btn{width:100%;padding:12px;border:none;border-radius:8px;font-size:.95em;font-weight:700;cursor:pointer;transition:.2s;margin-bottom:9px;display:block;text-align:center;}
#sk-root .sk-btn:last-child{margin-bottom:0;}
#sk-root .sk-bp{background:var(--sk-g);color:#fff;}
#sk-root .sk-bp:hover{background:#008a4e;}
#sk-root .sk-bp:disabled{background:#9ca3af;cursor:not-allowed;}
#sk-root .sk-bs{background:#fff;color:var(--sk-g);border:2px solid var(--sk-g);}
#sk-root .sk-bc{background:var(--sk-amb);color:#fff;}
#sk-root .sk-bc:hover{background:#c08020;}
#sk-root .sk-bo{background:#fff;color:var(--sk-gy);border:2px solid var(--sk-bd);}
#sk-root .sk-bo:hover{border-color:var(--sk-g);color:var(--sk-g);}

/* ── アラート ────────────────────────── */
#sk-root .sk-al{padding:10px 13px;border-radius:8px;font-size:.82em;margin-bottom:13px;}
#sk-root .sk-a-ok{background:var(--sk-gl);color:#007a46;border-left:4px solid var(--sk-g);}
#sk-root .sk-a-err{background:#fee2e2;color:#991b1b;border-left:4px solid var(--sk-red);}
#sk-root .sk-a-info{background:#e0f6fd;color:#0a8ab3;border-left:4px solid #10b7ee;}

/* ── 予約確認タブ ────────────────────── */
#sk-root .sk-sect-title{font-size:.78em;font-weight:700;color:var(--sk-gy);margin-bottom:8px;}
#sk-root .sk-rc{background:#fff;border:2px solid var(--sk-bd);border-radius:var(--sk-rad);padding:14px;margin-bottom:10px;}
#sk-root .sk-rc h4{font-size:.9em;margin:0 0 7px;color:var(--sk-g);}
#sk-root .sk-rc .rd{font-size:.81em;color:var(--sk-gy);margin-bottom:3px;}
#sk-root .sk-rc .rd span{color:var(--sk-tx);font-weight:500;}
#sk-root .sk-rc.wl{border-color:var(--sk-co);}
#sk-root .sk-rc.wl h4{color:var(--sk-co);}
#sk-root .sk-rc.notified{border-color:#10b7ee;border-left-width:4px;}
#sk-root .sk-rc.notified h4{color:#10b7ee;}
#sk-root .sk-wl-notified{background:#e0f6fd;color:#0a8ab3;border-left:3px solid #10b7ee;padding:6px 10px;border-radius:6px;font-size:.78em;margin:4px 0 6px;}
#sk-root .sk-empty{text-align:center;padding:18px 0;color:var(--sk-gy);font-size:.85em;}

/* ── 完了画面 ────────────────────────── */
#sk-root .sk-cmp{text-align:center;padding:8px 0 20px;}
#sk-root .sk-ci{font-size:3.2em;margin-bottom:8px;}
#sk-root .sk-ct{font-size:1.15em;font-weight:700;margin:0 0 6px;}
#sk-root .sk-cid{font-size:.95em;font-weight:700;color:var(--sk-g);letter-spacing:.04em;margin:0 0 8px;min-height:1.4em;}
#sk-root .sk-cs{font-size:.82em;color:var(--sk-gy);margin:0 0 18px;}

/* ── クラスチップ 空き状態バッジ ────── */
#sk-root .sk-chip-st{display:inline-block;margin-left:5px;font-size:.68em;font-weight:700;padding:1px 5px;border-radius:8px;vertical-align:middle;line-height:1.4;}
#sk-root .sk-chip-ok  {background:#d6f5e8;color:#007a46;}
#sk-root .sk-chip-wl  {background:#fef0d0;color:#b07818;}
#sk-root .sk-chip-full{background:#fee2e2;color:#991b1b;}

/* ── カレンダー下の全滅案内 ──────────── */
#sk-root .sk-pcal-notice-full{background:#fef8ec;border-left:4px solid #e09a30;border-radius:8px;padding:10px 13px;font-size:.82em;color:#b07818;margin-top:10px;line-height:1.7;}

/* ── 日程詳細の補足ヒント ─────────────  */
#sk-root .sk-pcal-det-hint{font-size:.78em;color:#10b7ee;background:#e0f6fd;border-radius:6px;padding:7px 10px;margin:6px 0;}

/* ── 連絡先ヒント ───────────────────── */
#sk-root .sk-contact-hint{font-size:.77em;min-height:1.4em;margin-top:3px;transition:color .15s;}
#sk-root .sk-contact-hint.cht-email{color:#00a05c;}
#sk-root .sk-contact-hint.cht-phone{color:#10b7ee;}
#sk-root .sk-contact-hint.cht-invalid{color:#dc2626;}

/* ── レスポンシブ ────────────────────── */
@media(max-width:420px){
  #sk-root .sk-gg{grid-template-columns:1fr 1fr;}
  #sk-root .sk-pcal-cell{min-height:44px;}
  #sk-root .sk-pcal-badge{display:none;}
  #sk-root .sk-pcal-num{font-size:.82em;}
  #sk-root .sk-cafe-opts{grid-template-columns:1fr;}
}

/* ── 締め切り済み・受付前セル ─────────────────────── */
#sk-root .sk-pcal-cell.closed {
  background: #f3f4f6;
  border: 2px solid #d1d5db;
  cursor: pointer;
}
#sk-root .sk-pcal-cell.closed:hover {
  background: #e5e7eb;
  transform: scale(1.03);
}
#sk-root .sk-pcal-cell.closed .sk-pcal-num { color: #9ca3af; }

#sk-root .sk-pcal-badge.closed {
  background: #e5e7eb;
  color: #6b7280;
}
#sk-root .sk-pcal-det-status.closed {
  background: #f3f4f6;
  color: #6b7280;
  border-left: 3px solid #9ca3af;
  padding: 8px 12px;
  border-radius: 7px;
  margin-bottom: 12px;
  font-size: .85em;
}