/* 予約カレンダー スタイル — Aileen English World 北砂校
 * 雰囲気C（ポップ・元気）／サイトの黄色(#FFD83B)と緑(#3CA945)に合わせた配色 */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #242424;         /* 文字・◯（空き）を強く出す色 */
  --soft: #8a8378;        /* 補助テキスト */
  --line: #F0E3BC;        /* 罫線（黄色系） */
  --sand: #FFF5D6;        /* ヘッダ・時間ラベルの地（サイトの黄色の淡色） */
  --card: #ffffff;
  --accent: #3CA945;      /* アクセント（CTA・今日の列）＝サイトの緑 */
  --yellow: #FFD83B;      /* サイトの黄色（ポイント使い） */
  --x: #D9DCE0;           /* ✕（予約済み） */
}

body { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  font-weight: 500;
  color: var(--ink); background: #fff; line-height: 1.8; font-size: 15px; -webkit-text-size-adjust: 100%; }
.wrap { max-width: 720px; margin: 0 auto; padding: 40px 20px 72px; }

/* ページ上部（教室名＋サイトへ戻る） */
.page-head { max-width: 720px; margin: 0 auto; padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 2px solid var(--sand); }
.page-head__logo { font-size: 17px; font-weight: 900; letter-spacing: .03em; }
.page-head__branch { color: var(--accent); font-size: 14px; margin-left: 4px; }
.page-head__back { font-size: 12.5px; color: var(--soft); text-decoration: none; white-space: nowrap; }
.page-head__back:hover { color: var(--accent); }

.sec-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--accent); }
.sec-title { font-size: 26px; font-weight: 900; letter-spacing: .02em; margin: 4px 0 14px;
  display: inline-block;
  background: linear-gradient(transparent 62%, var(--yellow) 62%);  /* 黄色のマーカー線 */
  padding: 0 4px; }
.cal__lead { font-size: 14px; color: var(--soft); margin-bottom: 22px; }
.cal__lead b { color: var(--accent); }

/* コース選択チップ（メニュー → 時間） */
.course__label { font-size: 12px; font-weight: 700; color: var(--soft); margin: 0 0 8px; }
.course { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.course--time { margin-bottom: 16px; }
.crow { font-size: 13px; font-weight: 700; color: var(--ink); background: var(--card);
  border: 2px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer;
  font-family: inherit;
  transition: all .15s; user-select: none; }
.crow small { color: var(--soft); margin-left: 6px; }
.crow.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.crow.is-on small { color: rgba(255,255,255,.8); }
.course__single { font-size: 14px; color: var(--ink); padding: 8px 2px; font-weight: 700; }
.course__total { font-size: 13px; color: var(--soft); margin-bottom: 20px; }
.course__total b { color: var(--ink); font-size: 16px; }

/* カレンダーの週送り */
.cal__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 12px; }
.cal__navbtn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--line);
  background: var(--card); font-size: 17px; color: var(--accent); font-weight: 700; cursor: pointer; line-height: 1; }
.cal__navbtn:disabled { opacity: .35; cursor: default; }
.cal__range { font-size: 16px; font-weight: 900; min-width: 180px; text-align: center; }

/* カレンダー本体 */
.cal__grid { display: grid; grid-template-columns: 84px repeat(7, 1fr);
  border: 2px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
.cal__cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.cal__cell:nth-child(8n) { border-right: none; }
.cal__grid > .cal__cell:nth-last-child(-n+8) { border-bottom: none; }
.cal__head { background: var(--sand); font-weight: 700; font-size: 12px; flex-direction: column; gap: 1px; padding: 6px 0; }
.cal__head small { font-size: 13px; font-weight: 700; color: var(--soft); }
.cal__head.is-today { background: var(--accent); color: #fff; }
.cal__head.is-today small { color: rgba(255,255,255,.85); }
.cal__head.is-past { opacity: .4; }
.cal__timelabel { background: var(--sand); font-size: 12px; font-weight: 700; color: var(--soft);
  justify-content: flex-end; padding-right: 10px; }
.cal__mark { font-size: 16px; font-weight: 700; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; cursor: default; }
.cal__mark--o { color: var(--ink); cursor: pointer; }
.cal__mark--x { color: var(--x); }
.cal__mark--c { color: #d5dade; }
.cal__mark--o:hover { background: rgba(60,169,69,.14); }
.cal__mark.is-active { background: var(--accent); color: #fff; border-radius: 8px; }

.cal__legend { font-size: 11.5px; color: var(--soft); margin-top: 14px;
  display: flex; flex-wrap: nowrap; gap: 14px; white-space: nowrap; overflow-x: auto; }
.cal__legend .lgi { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.lg { font-weight: 700; }
.lg--o { color: var(--ink); } .lg--x { color: var(--x); } .lg--c { color: #d5dade; }
.cal__note { font-size: 12px; color: var(--soft); margin-top: 9px; }

/* 予約CTA */
.cta { margin-top: 26px; }
.cta__card { background: var(--sand); border: 2px solid var(--line); border-radius: 20px; padding: 26px 22px; text-align: center; }
.cta__label { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--accent); }
.cta__summary { font-size: 17px; font-weight: 900; margin: 10px 0 20px; }
.cta__summary.is-placeholder { color: var(--soft); font-size: 14px; font-weight: 500; }
.cta__buttons { display: flex; flex-direction: column; gap: 10px; }
.btn { display: block; text-decoration: none; font-weight: 700; font-size: 15px; border-radius: 999px; padding: 14px 16px; }
.btn--line { background: var(--accent); color: #fff; }
.btn--tel { background: var(--card); color: var(--ink); border: 2px solid var(--line); }
.cta__note { margin-top: 14px; font-size: 12px; color: var(--soft); }

/* メニューと料金 */
.menu { margin-top: 44px; }
.menu__list { border-top: 1px solid var(--line); margin-top: 12px; }
.menu__list > div { display: flex; align-items: baseline; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.menu__list dt { font-weight: 700; }
.menu__list dt small { font-weight: 500; color: var(--soft); font-size: 12px; margin-left: 10px; }
.menu__list dd { margin-left: auto; font-size: 17px; font-weight: 700; white-space: nowrap; }

@media (min-width: 600px) {
  .cta__buttons { flex-direction: row; }
  .cta__buttons .btn { flex: 1; }
}