/* ==========================================================
   営業カレンダー（inc/calendar.php の calendar_render() 用）
   正方形の中に、画像と同じ比率で要素を配置する。
   .kfcal-inner の font-size を「幅の1%」にし、中身はすべて em で指定しているので、
   表示幅が変わっても画像のように全体が拡大縮小される。
   ========================================================== */

.kfcal-section {
  padding: 40px 15px 0;
}
.kfcal-wrap {
  max-width: 600px;
  margin: 0 auto;
}

.kfcal {
  --kfcal-overlay: .45;
  --kfcal-red: #b93a2e;
  --kfcal-navy: #2d4a7c;
  --kfcal-text: #222;
  --kfcal-sub: #767676;

  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  container-type: inline-size;
  background: #e8eef5;
  color: var(--kfcal-text);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  line-height: 1.2;
}
/* aspect-ratio 非対応ブラウザ向け */
@supports not (aspect-ratio: 1 / 1) {
  .kfcal { height: 0; padding-bottom: 100%; }
}

.kfcal-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}
.kfcal-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--kfcal-overlay));
}

.kfcal-inner {
  position: absolute;
  inset: 0;
  font-size: 6px;                        /* 600px 表示時の幅1% */
  font-size: min(6px, calc((100vw - 30px) / 100));
  font-size: 1cqw;
}

/* 見出し（月） */
.kfcal-head {
  position: absolute;
  left: 17.5%;
  top: 8.5%;
  display: flex;
  align-items: flex-end;
  white-space: nowrap;
}
.kfcal-month-num {
  font-size: 13em;
  font-weight: 400;
  line-height: .8;
}
.kfcal-month-name {
  margin: 0 0 .3em 1em;
  font-size: 3.3em;
  letter-spacing: .12em;
}

/* 凡例 */
.kfcal-legend {
  position: absolute;
  left: 67%;
  top: 8.5%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kfcal-legend li {
  display: flex;
  align-items: center;
  gap: 2.4em;
  margin-bottom: 1.2em;
  line-height: 1;
}
.kfcal-legend-text {
  font-size: 3em;
  letter-spacing: .08em;
}

.kfcal-mark {
  display: inline-block;
  flex-shrink: 0;
  width: 6em;
  height: 6em;
  border-radius: 50%;
  box-sizing: border-box;
}
.kfcal-mark-closed { border: .3em solid var(--kfcal-red); }
.kfcal-mark-event  { border: 1em double var(--kfcal-navy); }

/* 日付グリッド */
.kfcal-grid {
  position: absolute;
  left: 9.9%;
  width: 79.2%;
  top: 25.5%;
  height: 57.25%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 6fr repeat(5, 10.25fr);
}
.kfcal-rows-6 .kfcal-grid { grid-template-rows: 6fr repeat(6, 8.54fr); }
.kfcal-rows-4 .kfcal-grid { grid-template-rows: 6fr repeat(4, 10.25fr) 10.25fr; }

.kfcal-wd {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.9em;
  letter-spacing: .03em;
}
.kfcal-wd-sun { color: #d33a3a; }
.kfcal-wd-sat { color: #2c5aa6; }

.kfcal-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}
.kfcal-day > span {
  position: relative;
  z-index: 1;
  font-size: 4.1em;
  line-height: 1;
}
.kfcal-day.is-other > span { color: var(--kfcal-sub); }
.kfcal-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.kfcal-day::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8.1em;
  height: 8.1em;
  border-radius: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}
.kfcal-rows-6 .kfcal-day::before { width: 7.2em; height: 7.2em; }
.kfcal-day.is-closed::before { border: .3em solid var(--kfcal-red); }
.kfcal-day.is-event::before  { border: 1.2em double var(--kfcal-navy); }

/* 下部の文言 */
.kfcal-foot {
  position: absolute;
  right: 8.5%;
  bottom: 5.5%;
  color: #3a3a3a;
  text-shadow: 0 0 .4em rgba(255, 255, 255, .9);
}
.kfcal-foot p {
  margin: 0;
  font-size: 2.55em;
  font-size: max(2.55em, 10px);          /* スマホで小さくなりすぎないように */
  letter-spacing: .08em;
  line-height: 1.35;
}