/* =========================
   calendar CTA (鹿lender grid) - CLEAN
========================= */

.calendar-cta {
  position: relative;
  width: 100%;
  padding: 90px 16px;
  background: #222222;
}

.calendar-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.calendar-cta__title {
  font-size: 3rem;
  letter-spacing: 0.02em;
  margin: 0 0 48px;
}

/* ① 曜日行（7列） */
.calendar-cta__dow {
  width: 100%;
  max-width: 980px;
  margin: 0 auto 10px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

/* グリッド本体 */
.calendar-cta__grid {
  width: 100%;
  max-width: 980px;
  margin: 0 auto 34px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* 各マス（セル内比率で制御したいので container-type を有効化） */
.calendar-cta__cell{
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255,255,255,0.7);
  overflow: hidden;
  container-type: size;
}

/* =========================
   イラスト（WebP）
   - セル内 % 指定（img-x/img-y/img-w/img-h）
   - “中央下”を基準に配置する（調整しやすい）
========================= */
.calendar-cta__num{
  position: absolute;

  /* セル内の比率（0〜100%） */
  left: var(--img-x, 50%);
  top:  var(--img-y, 62%);

  width:  var(--img-w, 78%);
  height: var(--img-h, 78%);

  object-fit: contain;
  z-index: 1;

  /* クリックできる */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* “中央下”基準に揃える */
  transform: translate(-50%, -100%) scale(var(--img-s, 1));
  transform-origin: 50% 100%;

  will-change: transform;
}

/* =========================
   背景の数字
   - 左下固定（めり込みOK）
   - セルサイズに合わせて拡大縮小（cqmin）
========================= */
.calendar-cta__bgnum{
  position: absolute;

  left:   var(--num-x, 6%);
  bottom: var(--num-y, 6%);

  color: #cdcdcd;
  z-index: 0;
  user-select: none;
  pointer-events: none;

  line-height: 1;

  transform:
    scale(var(--num-s, 1))
    rotate(var(--num-r, 0deg));
  transform-origin: left bottom;
}

/* フォントサイズ（セル基準） */
@supports (font-size: 1cqmin){
  .calendar-cta__bgnum{
    /* デフォルト 45 くらいが “背景数字感” 出やすい */
    font-size: calc(var(--num-fs, 45) * 1cqmin);
  }
}
@supports not (font-size: 1cqmin){
  .calendar-cta__bgnum{ font-size: 2.2rem; }
}

/* =========================
   ぷるぷる（クリックで可愛く揺れる）
   ※ transform を上書きするので、ベースと同じ translate を毎フレーム書く
========================= */
.calendar-cta__num.is-wiggle {
  animation: deerWiggle 1000ms ease-in-out;
}

@keyframes deerWiggle {
  0%   { transform: translate(-50%, -100%) scale(var(--img-s, 1)); }

  12%  { transform: translate(-50%, -100%) scale(var(--img-s, 1)) rotate(-6deg); }
  24%  { transform: translate(-50%, -100%) scale(var(--img-s, 1)) rotate( 6deg); }
  36%  { transform: translate(-50%, -100%) scale(var(--img-s, 1)) rotate(-5deg); }
  48%  { transform: translate(-50%, -100%) scale(var(--img-s, 1)) rotate( 5deg); }
  60%  { transform: translate(-50%, -100%) scale(var(--img-s, 1)) rotate(-3deg); }
  72%  { transform: translate(-50%, -100%) scale(var(--img-s, 1)) rotate( 3deg); }

  100% { transform: translate(-50%, -100%) scale(var(--img-s, 1)); }
}

/* =========================
   Calendar CTA: 必ず全部表示（ロード完了まで待つ）
========================= */
.calendar-cta.is-loading .calendar-cta__grid {
  visibility: hidden; /* レイアウトは維持したまま非表示 */
}

.calendar-cta.is-loading .calendar-cta__inner {
  position: relative;
}

.calendar-cta.is-loading .calendar-cta__inner::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 120px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.28);
  border-top-color: rgba(255,255,255,0.9);
  animation: k0299-spin 0.8s linear infinite;
}

@keyframes k0299-spin {
  to { transform: rotate(360deg); }
}

/* =========================
   ボタン
========================= */
.calendar-cta__button {
  display: inline-block;
  padding: 14px 32px;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.1em;
  margin-top: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.calendar-cta__button:hover {
  background-color: #fff;
  color: #000;
}

/* SP */
@media (max-width: 600px) {
  .calendar-cta { padding: 70px 14px; }
  .calendar-cta__dow { font-size: 0.72rem; gap: 0; }
  .calendar-cta__grid { gap: 0; }
}