/*
 * くすくすイベント予約フォーム
 * すべて .kr の中に閉じ込める（サイト既存のデザインには影響させない）。文字の書体はサイトのものを引き継ぐ。
 * スマホ（片手・子ども連れ）で押しやすいよう、押せる場所は高さ48px以上にする。
 */
.kr {
  --kr-accent: #e8798c;
  --kr-accent-dark: #c9566b;
  --kr-annual: #fdeef1;
  --kr-open: #fff8e1;
  --kr-border: #e5dcd6;
  --kr-text: #4a3f3a;
  --kr-muted: #7a6e68;
  --kr-ok: #2e7d4f;
  --kr-wait: #b26a00;
  --kr-error: #c0392b;
  max-width: 640px;
  margin: 0 auto;
  color: var(--kr-text);
  line-height: 1.7;
  box-sizing: border-box;
  scroll-margin-top: 80px; /* 完了時にスクロールしたとき、固定ヘッダーの下に隠れないように */
}
.kr *, .kr *::before, .kr *::after { box-sizing: inherit; }
/* display を指定した要素でも hidden 属性で確実に隠す（指定しないと display:block が勝って表示されてしまう） */
.kr [hidden] { display: none !important; }

.kr-loading, .kr-empty, .kr-error, .kr-done {
  padding: 20px 16px;
  border-radius: 12px;
  background: #faf6f3;
  text-align: center;
}
.kr-loading { color: var(--kr-muted); }
.kr-error { color: var(--kr-error); background: #fdecea; }
.kr-form-error { background: none; padding: 0; text-align: left; margin: 8px 0; min-height: 1em; }
.kr-tel { text-align: center; font-size: 0.95em; color: var(--kr-muted); margin-top: 16px; }
.kr-tel a { color: var(--kr-accent-dark); font-weight: bold; white-space: nowrap; }

.kr-month { margin: 0 0 28px; }
.kr-month-title {
  font-size: 1.25em;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--kr-accent);
}
.kr-cat { font-size: 1.05em; margin: 18px 0 8px; padding: 6px 10px; border-radius: 8px; }
.kr-cat-annual { background: var(--kr-annual); }
.kr-cat-open { background: var(--kr-open); }
.kr-notice { color: var(--kr-muted); font-size: 0.95em; }

.kr-event {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px;
  margin: 0 0 10px;
  border: 1px solid var(--kr-border);
  border-radius: 12px;
  background: #fff;
  min-height: 48px;
}
label.kr-event { cursor: pointer; }
label.kr-event:has(input:checked) { border-color: var(--kr-accent); box-shadow: 0 0 0 2px var(--kr-accent) inset; }
.kr-event input[type="checkbox"] { width: 26px; height: 26px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--kr-accent); }
.kr-av-before { opacity: 0.75; }
.kr-event-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kr-event-when { font-size: 0.9em; color: var(--kr-muted); }
.kr-event-name { font-weight: bold; font-size: 1.05em; word-break: break-word; }
.kr-event-desc { font-size: 0.9em; color: var(--kr-muted); white-space: pre-wrap; }
.kr-badge { align-self: flex-start; font-size: 0.8em; padding: 1px 8px; border-radius: 999px; margin-top: 2px; }
.kr-badge-available { background: #e3f4ea; color: var(--kr-ok); }
.kr-badge-waitlist { background: #fff1dc; color: var(--kr-wait); }
.kr-badge-before { background: #eee; color: var(--kr-muted); }

.kr-applicant { margin-top: 8px; }
.kr-field, .kr-child { display: block; margin: 0 0 16px; }
.kr-label { display: block; font-weight: bold; margin-bottom: 4px; }
.kr input[type="text"], .kr input[type="tel"], .kr input[type="email"], .kr select, .kr textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 16px; /* iPhoneで入力時に勝手に拡大されないよう16px以上 */
  border: 1px solid var(--kr-border);
  border-radius: 10px;
  background: #fff;
  color: var(--kr-text);
}
.kr textarea { min-height: 96px; resize: vertical; font-family: inherit; line-height: 1.5; }
.kr-age { display: flex; gap: 8px; margin-top: 8px; }
.kr-age select { flex: 1; }
.kr-check { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; }
.kr-check input { width: 24px; height: 24px; accent-color: var(--kr-accent); flex-shrink: 0; }
.kr-annual { border: 1px solid var(--kr-border); border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; background: var(--kr-annual); }
.kr-annual legend { padding: 0 4px; }
.kr-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.kr-summary { font-weight: bold; margin: 8px 0 0; }

.kr-btn {
  display: block;
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 12px;
  font-size: 1.05em;
  font-weight: bold;
  cursor: pointer;
}
.kr-submit { background: var(--kr-accent); color: #fff; margin-top: 8px; }
.kr-submit:hover { background: var(--kr-accent-dark); }
.kr-submit:disabled { background: #ccc; cursor: wait; }
.kr-btn-sub { background: #fff; color: var(--kr-accent-dark); border: 1px solid var(--kr-accent); margin: 0 0 16px; }

.kr-done { text-align: left; background: #fff; border: 1px solid var(--kr-border); }
.kr-results { list-style: none; padding: 0; margin: 0 0 16px; }
.kr-result { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px dashed var(--kr-border); }
.kr-result-label { margin-top: 2px; }
.kr-result-reserved .kr-result-label { color: var(--kr-ok); }
.kr-result-waitlist .kr-result-label { color: var(--kr-wait); }
.kr-result-duplicate .kr-result-label { color: var(--kr-muted); }