@charset "UTF-8";
/* ==========================================================
   カラオケCHIKARA 営業時間カレンダー
   セルの塗りで開店時刻を示すカラーブロック型
     ピンク＝10:00 OPEN ／ イエロー＝11:00 OPEN
   日付は黒、土曜は青、日曜・祝日は赤。

   ※ 既存サイトの style3.css / smp/main/style.css の影響を受けないよう
      すべて .chikara-calendar 配下にスコープしている
   ========================================================== */

.chikara-calendar {
  --ink: #1b1f27;
  --muted: #949aa4;
  --navy: #0f2f8f;
  --red: #e0004d;
  --blue: #1a4fd6;

  --t10-bg: #ffe1ea;
  --t10-ink: #d1003f;
  --t11-bg: #fff3cd;
  --t11-ink: #a56a00;

  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
               "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  color: var(--ink);
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.chikara-calendar *,
.chikara-calendar *::before,
.chikara-calendar *::after { box-sizing: border-box; }

.chikara-calendar .cal-inner {
  padding: 22px 22px 18px;
}
.chikara-calendar .cal-months {
  display: flex;
  gap: 22px;
}
.chikara-calendar .cal-month {
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border-radius: 12px;
  padding: 0 10px 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

/* ---- 月見出し ---- */
.chikara-calendar .cal-month__title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 0 -10px 6px;
  padding: 11px 0;
  background: var(--navy);
  border-radius: 12px 12px 0 0;
  color: #fff;
  font-weight: 700;
}
.chikara-calendar .cal-month__y { font-size: 12px; opacity: .8; letter-spacing: .04em; }
.chikara-calendar .cal-month__m { font-size: 19px; line-height: 1; letter-spacing: .02em; }

/* ---- グリッド ---- */
.chikara-calendar .cal-grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 3px;
  margin: 0;
}
.chikara-calendar .cal-wd {
  padding: 4px 0 2px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}
.chikara-calendar .cal-wd.is-sun { color: var(--red); }
.chikara-calendar .cal-wd.is-sat { color: var(--blue); }

.chikara-calendar .cal-day {
  height: 60px;
  padding: 6px 2px 7px;
  border-radius: 8px;
  text-align: center;
  vertical-align: middle;
}
.chikara-calendar .cal-day.is-blank { background: transparent; }

/* 日付は黒。土曜は青／日曜・祝日は赤で曜日見出しと色を揃える */
.chikara-calendar .cal-day__num {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 9px;
  color: var(--ink);
}
.chikara-calendar .cal-day.is-sat .cal-day__num { color: var(--blue); }
.chikara-calendar .cal-day.is-sun .cal-day__num,
.chikara-calendar .cal-day.is-holiday .cal-day__num { color: var(--red); }

.chikara-calendar .cal-day__time { display: block; line-height: 1; }
.chikara-calendar .cal-day__time b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.chikara-calendar .cal-day__time i {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .1em;
  opacity: .7;
}

.chikara-calendar .is-t10 { background: var(--t10-bg); }
.chikara-calendar .is-t10 .cal-day__time { color: var(--t10-ink); }
.chikara-calendar .is-t11 { background: var(--t11-bg); }
.chikara-calendar .is-t11 .cal-day__time { color: var(--t11-ink); }

/* 今日（calendar.js が付与） */
.chikara-calendar .cal-day.is-today {
  box-shadow: inset 0 0 0 2px var(--navy);
}

/* ---- 凡例・注記 ---- */
.chikara-calendar .cal-legend {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.chikara-calendar .cal-legend__item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
}
.chikara-calendar .cal-legend__item b { font-size: 13px; letter-spacing: -.02em; }
.chikara-calendar .cal-legend__item.is-t10 { background: var(--t10-bg); color: var(--t10-ink); }
.chikara-calendar .cal-legend__item.is-t11 { background: var(--t11-bg); color: var(--t11-ink); }

.chikara-calendar .cal-note {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: #7c828c;
  text-align: center;
}

/* ---- タブレット以下：2ヶ月を縦積み ---- */
@media (max-width: 767px) {
  .chikara-calendar .cal-inner { padding: 14px 10px 12px; }
  .chikara-calendar .cal-months { flex-direction: column; gap: 14px; }
  .chikara-calendar .cal-month { padding: 0 6px 10px; }
  .chikara-calendar .cal-month__title { margin: 0 -6px 4px; padding: 9px 0; }
  .chikara-calendar .cal-month__m { font-size: 17px; }
  .chikara-calendar .cal-grid { border-spacing: 2px; }
  .chikara-calendar .cal-day { height: 54px; border-radius: 6px; padding: 5px 1px 6px; }
  .chikara-calendar .cal-day__num { font-size: 11px; margin-bottom: 7px; }
  .chikara-calendar .cal-day__time b { font-size: 12px; }
  .chikara-calendar .cal-day__time i { font-size: 7px; margin-top: 1px; }
  .chikara-calendar .cal-legend { margin-top: 12px; }
}

/* ---- 小型スマホ（SP版 #wrappbody が 320px になる幅） ---- */
@media (max-width: 374px) {
  .chikara-calendar .cal-inner { padding: 12px 6px 10px; }
  .chikara-calendar .cal-month { padding: 0 4px 8px; }
  .chikara-calendar .cal-month__title { margin: 0 -4px 4px; }
  .chikara-calendar .cal-grid { border-spacing: 1.5px; }
  .chikara-calendar .cal-day { height: 50px; padding: 4px 0 5px; }
  .chikara-calendar .cal-day__num { font-size: 10px; margin-bottom: 5px; }
  .chikara-calendar .cal-day__time b { font-size: 11px; }
  .chikara-calendar .cal-legend__item { padding: 5px 10px; }
}