@charset "UTF-8";
/* ==========================================================================
   calenda.css  森のカレンダー（行事一覧 index.cfm / 詳細 view.cfm）専用CSS
   --------------------------------------------------------------------------
   ・配色は com_item.css の変数（--forest 等）だけを使う
     → com_acce.css の「黒地に黄文字」「黄地に黒文字」テーマでも自動で切り替わる
   ・文字サイズは rem 指定 → 文字サイズ切替（S/M/L）に追従する
   ・共通クラス .visually-hidden は com_acce.css のものを利用
   ========================================================================== */

/* 固定ヘッダーとの重なりを調整したい場合はここで指定（通常は header.css 側で対応） */
:root {
  --cal-top-offset: 0px;
}

.cal-page {
  line-height: 1.7;/* com_layout.css の body は line-height:0.9rem のため、このページ内で上書き */
  font-size: 0.95rem;
  padding-top: var(--cal-top-offset);
}
.cal-wrap {
  max-width: 60rem;
  margin-inline: auto;
  padding-bottom: 4.5rem;
}
.cal-wrap:focus { outline: none; }/* スキップリンクで移動した時の枠 */

/* キーボード操作時のフォーカス表示 */
.cal-page a:focus-visible,
.cal-page button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ページヘッダー（com_item.css の .page-head を調整） */
.cal-page .page-head { margin: 0 0 1.2rem; }
.cal-page .page-head h1 {
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  line-height: 1.4;
  color: var(--forest);
}
.cal-page .page-head .lead {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 0.3rem;
}

/* ==========================================================================
   ボタン・リンク
   ========================================================================== */
.cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--forest);
  border-radius: var(--radius-s);
  background: var(--forest);
  color: var(--forest-contrast);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.cal-btn:hover { background: var(--forest-2); border-color: var(--forest-2); }
.cal-btn--sub {
  background: var(--paper-2);
  color: var(--forest);
}
.cal-btn--sub:hover {
  background: var(--paper);
  color: var(--forest);
  border-color: var(--forest-2);
}

/* ==========================================================================
   月の切り替え（「前の月」「次の月」を大きなボタンにして、月名を中央に表示）
   ========================================================================== */
.cal-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.8rem 1rem;
  margin: 1rem 0 0.7rem;
}
.cal-month {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  line-height: 1.3;
  color: var(--forest);
}
.cal-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 56px;
  max-width: 15rem;
  padding: 0.4rem 1.1rem;
  border: 2px solid var(--forest);
  border-radius: var(--radius-m);
  background: var(--forest);
  color: var(--forest-contrast);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.cal-nav-btn:hover { background: var(--forest-2); border-color: var(--forest-2); }
.cal-nav-btn--prev { justify-self: start; }
.cal-nav-btn--next { justify-self: end; flex-direction: row-reverse; text-align: right; }
.cal-nav-btn__arrow {/* 矢印はCSSで描画（文字コードに依存しない） */
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.cal-nav-btn--prev .cal-nav-btn__arrow { transform: rotate(-135deg); margin-left: 0.25rem; }
.cal-nav-btn--next .cal-nav-btn__arrow { transform: rotate(45deg); margin-right: 0.25rem; }
.cal-nav-btn__text { display: flex; flex-direction: column; line-height: 1.3; }
.cal-nav-btn__label { font-size: 0.78rem; font-weight: 500; }
.cal-nav-btn__month { font-size: 1.1rem; font-weight: 700; white-space: nowrap; }

/* 「今月を表示」「今日の予定へ」 */
.cal-subnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
}

/* ==========================================================================
   休館日のご案内・凡例
   ========================================================================== */
.cal-notice {
  margin: 0 0 0.8rem;
  padding: 0.7rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 5px solid var(--clay);
  border-radius: var(--radius-s);
  font-size: 0.9rem;
  line-height: 1.7;
}
.cal-notice strong { color: var(--clay); }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.cal-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ==========================================================================
   チップ（休館日・今日・複数日の初日/開催中/最終日）
   ========================================================================== */
.cal-chip {
  display: inline-block;
  padding: 0 0.65rem;
  border: 1px solid var(--indigo);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}
.cal-chip--start { background: var(--indigo); color: var(--paper-2); }
.cal-chip--mid   { background: var(--paper-2); color: var(--indigo); }
.cal-chip--end   { background: var(--paper); color: var(--indigo); border-width: 2px; }

.cal-closed {
  display: inline-block;
  padding: 0 0.8rem;
  border: 1px solid var(--clay);
  border-radius: 999px;
  color: var(--clay);
  font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
}
.cal-today-chip {
  display: inline-block;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--forest);
  color: var(--forest-contrast);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.7;
}

/* ==========================================================================
   期間のある行事（複数日にまたがる行事のまとめ）
   ========================================================================== */
.cal-span {
  margin: 0 0 1.6rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}
.cal-h3 {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--forest);
}
.cal-span__note { margin: -0.3rem 0 0.8rem; font-size: 0.82rem; color: var(--ink-soft); }
.cal-span__list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cal-span__item { display: grid; gap: 0.3rem; }
.cal-span__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.9rem;
}
.cal-span__title {
  font-weight: 700;
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cal-span__title:hover { color: var(--forest-2); }
.cal-span__period { font-size: 0.85rem; color: var(--ink-soft); }

/* 月全体を日数で等分した横バー（装飾。内容は文字でも提供している） */
.cal-span__track {
  display: grid;
  grid-template-columns: repeat(var(--days, 31), 1fr);
  height: 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.cal-span__bar { grid-row: 1; background: var(--indigo); }
.cal-span__scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--ink-soft);
}

/* ==========================================================================
   日ごとの一覧
   ========================================================================== */
.cal-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--paper-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.cal-day {
  display: grid;
  grid-template-columns: 7.4rem 1fr;
  border-top: 1px solid var(--line);
  scroll-margin-top: 9rem;
}
.cal-day:first-child { border-top: 0; }

/* 左：日付（大きな文字を囲みに入れる。例：「1日（木曜日）」） */
.cal-day__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.5rem;
  background: var(--paper);
  border-right: 1px solid var(--line);
  text-align: center;
}
.cal-day__date time { display: block; width: 100%; }
.cal-day__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0.3rem 0.2rem 0.4rem;
  background: var(--paper-2);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-m);
  color: var(--ink);
  line-height: 1.2;
}
.cal-day__main { display: flex; align-items: baseline; justify-content: center; gap: 0.1rem; }
.cal-day__num {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.1;
}
.cal-day__unit { font-size: 1rem; font-weight: 700; }
.cal-day__wd { margin-top: 0.1rem; font-size: 0.8rem; font-weight: 500; }
/* 土曜（藍）・日曜と祝日（陶土色） */
.cal-day.is-sat .cal-day__box { color: var(--indigo-2); border-color: var(--indigo-2); }
.cal-day.is-sun .cal-day__box { color: var(--clay); border-color: var(--clay); }

/* 今日（色だけでなく「今日」の文字でも示す） */
.cal-day.is-today .cal-day__box {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--forest-contrast);
}
.cal-day__today {
  padding: 0 0.7rem;
  border: 1px solid var(--forest);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.6;
}

/* 右：内容 */
.cal-day__body { min-width: 0; padding: 0.6rem 1rem; }

/* 休館日の日は少し沈んだ背景にする */
.cal-day.is-closed { background: var(--paper); }
.cal-closed-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.7rem;
  margin: 0;
}
.cal-closed-row + .cal-events { margin-top: 0.6rem; }
.cal-closed__note { font-size: 0.82rem; color: var(--ink-soft); }

.cal-holiday {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clay);
}
.cal-holiday__note { display: inline-block; margin-left: 0.8rem; font-weight: 500; color: var(--ink); }
.cal-none { margin: 0; color: var(--ink-soft); }

/* 予定のない日は低くまとめる（囲みは残す） */
.cal-day.is-empty .cal-day__date { padding-block: 0.35rem; }
.cal-day.is-empty .cal-day__box {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.3rem;
  padding: 0.15rem 0.3rem;
}
.cal-day.is-empty .cal-day__num { font-size: 1.4rem; }
.cal-day.is-empty .cal-day__unit { font-size: 0.85rem; }
.cal-day.is-empty .cal-day__wd { margin-top: 0; font-size: 0.75rem; }
.cal-day.is-empty .cal-day__body { padding-block: 0.3rem; display: flex; align-items: center; }

/* ==========================================================================
   行事（1件）
   ========================================================================== */
.cal-events {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cal-ev {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
  padding: 0.5rem 0.8rem;
  background: var(--paper);
  border-left: 5px solid var(--sage-deep);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.cal-ev--multi { border-left-color: var(--indigo); }

.cal-ev__time {
  flex: 0 0 7.2rem;
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.cal-ev__main { flex: 1 1 14rem; min-width: 0; }
.cal-ev__title {
  font-weight: 700;
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cal-ev__title:hover { color: var(--forest-2); }
.cal-ev__place {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.cal-ev__span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ==========================================================================
   詳細ページ（view.cfm）
   ========================================================================== */
.cal-detail {
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.cal-detail__head {
  padding: 1.2rem 1.4rem;
  background: var(--forest);
  color: var(--forest-contrast);
}
.cal-detail__date { margin: 0 0 0.3rem; font-size: 0.9rem; }
.cal-detail__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.45;
}
.cal-dl { margin: 0; padding: 0.3rem 1.4rem 0.8rem; }
.cal-dl__row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.2rem 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
}
.cal-dl__row:first-child { border-top: 0; }
.cal-dl dt { font-weight: 700; color: var(--forest); }
.cal-dl dd { margin: 0; line-height: 1.9; overflow-wrap: anywhere; }
.cal-dl dd a { color: var(--forest); text-underline-offset: 3px; }
.cal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
}

/* ==========================================================================
   スマホ
   ========================================================================== */
@media (max-width: 640px) {
  .cal-toolbar { grid-template-columns: 1fr 1fr; }
  .cal-month { grid-column: 1 / -1; grid-row: 1; }
  .cal-nav-btn { max-width: none; width: 100%; padding: 0.4rem 0.7rem; }
  .cal-nav-btn--prev, .cal-nav-btn--next { justify-self: stretch; }
  .cal-nav-btn__month { font-size: 1rem; }
  .cal-day { grid-template-columns: 5.6rem 1fr; }
  .cal-day__date { padding-inline: 0.3rem; }
  .cal-day__num { font-size: 1.9rem; }
  .cal-day__wd { font-size: 0.72rem; }
  .cal-day__body { padding: 0.55rem 0.7rem; }
  .cal-ev__time { flex-basis: 100%; }
  .cal-ev__time--none { display: none; }
  .cal-dl { padding-inline: 1rem; }
  .cal-dl__row { grid-template-columns: 1fr; }
  .cal-detail__head { padding: 1rem; }
}