/* ============================================================
   calendar.css — くだもの狩りマップ 収穫カレンダー（calendar.html）
   common.css（ヘッダー・フッター等）とセットで読み込む。
   ============================================================ */

.container{max-width:1180px;margin:0 auto;padding:22px 20px 80px}
.breadcrumbs{font-size:12px;color:var(--muted);margin-bottom:14px}
.breadcrumbs a:hover{color:var(--green)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cal-hero{padding:6px 0 18px}
.cal-eyebrow{display:inline-flex;align-items:center;gap:6px;background:var(--green-soft);color:var(--green-dark);font-size:12px;font-weight:800;padding:6px 13px;border-radius:999px;margin-bottom:12px}
.cal-hero h1{font-size:clamp(26px,4vw,36px);line-height:1.35;margin:0 0 10px}
.cal-hero p{font-size:15px;color:var(--muted);line-height:1.8;margin:0}

.cal-regions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cal-region{border:1px solid #d7e4dc;background:#fff;color:#36594a;border-radius:999px;padding:8px 16px;font-weight:800;font-size:14px;cursor:pointer}
.cal-region[aria-selected=true]{background:var(--green);border-color:var(--green);color:#fff}

.cal-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--muted);margin-bottom:12px}
.cal-legend span{display:inline-flex;align-items:center;gap:6px}
.cal-legend i{width:22px;height:12px;border-radius:4px;display:inline-block}
.cal-legend i.peak,.cal-table td.peak::before{background:var(--green)}
.cal-legend i.some,.cal-table td.some::before{background:#bfe3cc}

/* 表は枠の中だけ横スクロール（ページ全体は横に動かさない） */
.cal-scroll{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 18px rgba(28,64,48,.05)}
.cal-table{width:100%;border-collapse:collapse;min-width:640px}
.cal-table th,.cal-table td{border-bottom:1px solid var(--line)}
.cal-table tbody tr:last-child th,.cal-table tbody tr:last-child td{border-bottom:0}
.cal-table thead th{font-size:13px;font-weight:800;color:#4d6a5d;padding:12px 0;text-align:center}
.cal-table thead th .cal-m{font-size:10px}
.cal-table thead th.cal-fruit-col{text-align:left;padding-left:16px}
.cal-fruit-col{position:sticky;left:0;background:#fff;z-index:1;width:200px;text-align:left}
.cal-fruit-col a{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 14px}
.cal-fruit-col a:hover b{color:var(--green)}
.cal-fruit-col .fruit-icon{flex:none;display:grid;place-items:center}
.cal-fruit-col .fruit-icon svg{width:38px;height:38px}
.cal-fruit-col b{display:block;font-size:14px}
.cal-fruit-col small{display:block;font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap}
.cal-table td{position:relative;height:54px;padding:0}
.cal-table td::before{content:"";position:absolute;left:0;right:0;top:50%;height:18px;transform:translateY(-50%)}
/* 帯の両端だけ角を丸める */
.cal-table td:not(.peak):not(.some) + td.peak::before,.cal-table td:not(.peak):not(.some) + td.some::before,.cal-table th + td::before{border-top-left-radius:9px;border-bottom-left-radius:9px;left:3px}
.cal-table td.peak:has(+ td:not(.peak):not(.some))::before,.cal-table td.some:has(+ td:not(.peak):not(.some))::before,.cal-table td:last-child::before{border-top-right-radius:9px;border-bottom-right-radius:9px;right:3px}
/* 今月の列 */
.cal-table .now{background:#fff8e6}
.cal-table thead th.now{color:#b7791f}

.cal-note{font-size:12px;color:var(--muted);line-height:1.8;margin:14px 0 0}

@media(max-width:620px){
  .container{padding:16px 12px 60px}
  .cal-hero h1{font-size:24px}
  .cal-hero p{font-size:13px}
  .cal-region{padding:7px 12px;font-size:13px}
  .cal-table{min-width:560px}
  .cal-fruit-col{width:128px}
  .cal-fruit-col a{gap:6px;padding:6px 6px 6px 8px}
  .cal-fruit-col .fruit-icon svg{width:30px;height:30px}
  .cal-fruit-col b{font-size:12px}
  .cal-fruit-col small{font-size:10px}
  .cal-table td{height:46px}
  .cal-table thead th{font-size:11px}
}