/* KYABEL v6 / SITE 104 — responsive.css
   MASTER §7 の幅区分に合わせた調整。カラム減少→縦積み→余白調整→写真比率→
   折畳み→表カード化→見出しサイズの順で適用する。 */

/* 〜479px（基準） */
body { padding-bottom: calc(var(--h-ctabar) + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) { body { padding-bottom: 0; } }

.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
.hero__facts { grid-template-columns: 1fr; }

@media (min-width: 480px) {
  .hero__facts { grid-template-columns: repeat(2, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* 480〜767px */
@media (min-width: 560px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* 768〜1023px */
@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .section { padding: var(--sp-9) 0; }
  .cal__cell { aspect-ratio: auto; min-height: 68px; }
}

/* 1024〜1439px */
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .cal__cell { min-height: 76px; }
}

/* 1440px以上 */
@media (min-width: 1440px) {
  :root { --w-container: 1200px; }
}

/* ナビの折り返し防止（1025〜1279pxの境界帯対策） */
@media (min-width: 1100px) and (max-width: 1240px) {
  .hdr__nav ul { gap: var(--sp-4); }
  .hdr__nav a { font-size: 0.875rem; }
}

/* 横スクロール防止の保険 */
html, body { max-width: 100%; }
.container, .container--narrow { width: 100%; }

/* カレンダーは小幅でも数字が切れないよう最小幅を保証しつつグリッド内で縮小 */
@media (max-width: 359px) {
  .cal__day { font-size: 0.8125rem; }
  .cal__mark { font-size: 0.5625rem; }
}