/* =====================================================
   名古屋市立第二斎場 : 標準幅レイアウト（ライト固定）
   最終更新: 2025-10-25
   ===================================================== */
:root{
  color-scheme: light;
  --bg:#ffffff;
  --text:#222;
  --muted:#666;
  --line:#e6e6e6;
  --brand:#0a73b7;
  --container:1080px;
  --radius:14px;
}

*,
*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0;padding:0;background:var(--bg);color:var(--text); }
body{
  font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  line-height:1.75;
  font-size:clamp(14px,1.6vw,16px);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--brand); }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* アクセシビリティ：スクリーンリーダー専用テキスト */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ========= レイアウト：標準幅コンテナ ========= */
.container{ max-width:var(--container); width:92%; margin:0 auto; }

/* スキップリンク */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; display:inline-block; background:#000; color:#fff; padding:8px 12px;
}

/* ========= ヘッダー／ナビ（スクロール縮小対応） ========= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--line);
  transition: background .2s ease, box-shadow .2s ease, -webkit-backdrop-filter .2s ease, backdrop-filter .2s ease;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 0;
  transition: padding .2s ease;
}
.brand{ display:inline-flex; align-items:center; gap:8px; }
.brand-title{
  font-weight:700; letter-spacing:.02em; line-height:1.05;
  font-size: clamp(18px, 2.0vw, 20px);
}

.site-header.scrolled{
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.site-header.scrolled .topbar{ padding:14px 0; }

.global-nav ul{ margin:0; padding:0; list-style:none; display:flex; gap:20px; }
.global-nav a{ display:inline-block; padding:8px 2px; border-bottom:2px solid transparent; }
.global-nav a:hover{ border-color:var(--brand); }

.nav-toggle{ display:none; }
.hamburger{ display:none; width:28px; cursor:pointer; align-items:center; justify-content:center; }
.hamburger span{ display:block; height:2px; background:#333; width:100%; }
.hamburger span+span{ margin-top:4px; }

@media (max-width:768px){
  .hamburger{ display:inline-flex; }
  .global-nav{ display:none; }
  .nav-toggle:checked + label + .global-nav{
    display:block; background:#fff; border-top:1px solid var(--line);
  }
  .global-nav ul{ flex-direction:column; padding:8px 0; gap:0; }
  .global-nav li a{ display:block; padding:12px 0; border-bottom:1px solid var(--line); }
}

/* ========= ヒーロー ========= */
.hero-banner{
  border-bottom:1px solid var(--line);
  background:#fff;
  height:auto;
  overflow:visible;
}
.hero-banner img{
  width:100%;
  height:auto;     /* ←これが肝 */
  object-fit: unset;
}

@media (max-width: 560px){
  .hero-banner img{
    object-fit: contain;
    object-position: center;
  }
}

/* ========= パンくず ========= */
.breadcrumb{ background:#fff; border-bottom:1px solid var(--line); }
.breadcrumb ol{
  margin:0; padding:8px 0;
  list-style:none; display:flex; gap:8px; flex-wrap:wrap; color:var(--muted);
}
.breadcrumb a{ color:var(--muted); }
.breadcrumb li+li::before{ content:"›"; color:var(--muted); margin:0 4px 0 2px; }

/* ========= セクション ========= */
.section{ padding:20px 0 40px; }
.sec-title{ font-size:clamp(18px,2.4vw,22px); margin:0 0 14px; border-left:4px solid var(--brand); padding-left:10px; }

/* ========= 重要なお知らせ帯 ========= */
.notice-strip{ background:#f7fafc; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.strip-text{ margin:0; padding:10px 0; color:#333; }
.strip-text strong{ font-weight:700; margin-right:8px; color:var(--brand); }

/* ========= お知らせ ========= */
.news-list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.news-item{ border-bottom:1px solid var(--line); }
.news-link{ display:flex; align-items:baseline; gap:16px; padding:12px 0; }
.news-date{ flex:0 0 auto; color:var(--muted); font-size:.95em; width:8.5ch; }
.news-text{ flex:1 1 auto; line-height:1.6; }
.news-link:hover .news-text{ text-decoration:underline; }
.more{ margin-top:12px; }

/* ========= ボタン ========= */
/* ===== サイト全体の標準ボタン（.btn）を見やすく ===== */

.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  border:1px solid #bcd4e6;     /* 薄い青枠 */
  background:#f4f9ff;           /* ごく薄い青背景 */
  color:#0a73b7;                /* ブランド色 */
  font-weight:600;              /* 少し太字で視認性UP */
  transition: background .2s, border-color .2s;
}

/* ホバー時 */
.btn:hover{
  background:#e9f3ff;           /* 少し濃い青に */
  border-color:#0a73b7;         /* 青のラインで強調 */
  color:#0a73b7;
}


/* ========= 表（料金など） ========= */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
}
.table thead th{
  background:#f7fafc; font-weight:700; text-align:left; border-bottom:1px solid var(--line);
}
.table th, .table td{ padding:10px 12px; border-bottom:1px solid var(--line); }
.table tr:last-child th, .table tr:last-child td{ border-bottom:0; }

.table caption{
  font-weight:700; text-align:left; padding:10px 12px; background:#fff;
  border:1px solid var(--line); border-bottom:0; border-radius: var(--radius) var(--radius) 0 0;
}
.table-fee{ border-radius: 0 0 var(--radius) var(--radius); }

/* 等幅（3列同じ幅） */
.table-fee.eq3{ table-layout: fixed; width: 100%; }
.table-fee.eq3 col{ width: calc(100% / 3); }

/* 中央寄せオプション */
.table-fee.centered thead th,
.table-fee.centered tbody th[scope="row"],
.table-fee.centered td{
  text-align: center !important;
  vertical-align: middle;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ========= アクセス（左：マップ｜右：内容） ========= */
.access-grid{ display:grid; gap:16px; }
@media (min-width: 900px){
  .access-grid{ grid-template-columns: 1.4fr 1fr; align-items:start; }
}
.map-wrap{
  border:1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.04); background: #fff;
}
.map-frame{ width:100%; aspect-ratio:16/9; border:0; }
@supports not (aspect-ratio: 16 / 9){
  .map-wrap{ position: relative; padding-top:56.25%; }
  .map-wrap .map-frame{ position:absolute; inset:0; width:100%; height:100%; }
}
.map-actions{ margin-top:10px; }
.map-actions a{ color: var(--brand); font-weight:600; }

/* 右カラムボックス */
.info-box{
  border:1px solid var(--line); border-radius: var(--radius);
  background:#fff; padding:14px; box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.info-title{ margin:0 0 8px; font-weight:700; font-size:1.05em; }

/* 定義リスト */
.def{ margin:0; }
.def > div{
  display:grid; grid-template-columns:7em 1fr;
  gap:12px; padding:8px 0; border-bottom:1px solid var(--line);
}
.def > div:last-child{ border-bottom:0; }
.def dt{ color:var(--muted); }
.def dd{ margin:0; }
.def.tight > div{ padding:6px 0; }

/* ========= 利用の流れ ========= */
.steps{ margin:0; padding:0; list-style:none; display:grid; gap:14px; }
@media (min-width:560px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{
  border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:14px;
  min-height:140px; position:relative;
}
.step-num{
  position:absolute; top:10px; right:12px;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; background:#eef3f8; color:#285b84; font-weight:700;
}
.step-title{ margin:0 0 6px; font-size:1.02em; font-weight:700; }

/* ========= 月間カレンダー（外部JSON読み込み） ========= */
.month-controls{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0 16px;
}
.cal-year,.cal-month{
  padding:6px 10px; border:1px solid var(--line); border-radius:10px; background:#fff;
}

/* 休場日バッジ（セル内） */
.badge-closed{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:#222; color:#fff; font-size:.85em; line-height:1.6;
}

/* カレンダー本体 */
.month-calendar{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.cal-head{
  padding:10px 12px;
  background:#f7fafc;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:flex-start;   /* ← 左寄せ */
  gap:16px;                     /* ← タイトルとサマリの間隔 */
  flex-wrap:nowrap;             /* ← 改行しない */
}
.cal-title{
  margin:0;
  font-size:1.1em;
  font-weight:700;
  white-space:nowrap;           /* タイトルを折り返さない */
}
.cal-summary{
  margin-left:0;                /* 右寄せをやめる */
  color:#555;
  font-size:.95em;
  white-space:nowrap;           /* サマリも折り返さない */
  overflow:hidden;
  text-overflow:ellipsis;       /* 幅不足時は…で省略 */
}

/* “形”を作る肝 */
.cal-grid{ display:grid; }
.cal-grid-month{ grid-template-columns: repeat(7, 1fr); }

.cal-dow, .cal-cell{
  padding:10px 8px; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  text-align:center;
}
.cal-grid-month > *:nth-child(7n){ border-right:0; } /* 土曜の右線消し */
.cal-dow{ background:#fff; font-size:.9em; color:var(--muted); font-weight:600; }

/* ヘッダーの日/土だけ色を変える（数字はそのまま） */
.cal-grid-month .cal-dow:nth-child(1){ color:#d32f2f; } /* 日曜 */
.cal-grid-month .cal-dow:nth-child(7){ color:#1976d2; } /* 土曜 */

.cal-cell{ min-height:64px; position:relative; }
.cal-cell.is-out{ background:#fafafa; color:#bbb; }

/* 休場日のセル背景（薄いピンク） */
.cal-cell.is-closed{ background:#fff3f7; }

/* 数字丸（休場日は黒反転のまま） */
.cal-day{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; font-weight:600;
}
.cal-cell.is-closed .cal-day{ background:#222; color:#fff; }

/* バッジとメモ */
.cal-cell.is-closed .badge-closed{ display:inline-block; margin-top:6px; }
.cal-note{ display:block; font-size:.8em; color:#333; margin-top:6px; line-height:1.3; }

@media (max-width:560px){
  .cal-cell{ min-height:56px; }
  .cal-day{ width:28px; height:28px; }
}

/* ========= フッター ========= */
.site-footer{ border-top:1px solid var(--line); padding:26px 0; color:var(--muted); font-size:.95em; background:#fff; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.footer-nav a{ margin-left:16px; }
@media (max-width:560px){
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-nav a{ margin-left:0; margin-right:16px; display:inline-block; }
}

/* ========= ユーティリティ ========= */
.note{ color:#555; }
.small{ font-size:.92em; }
@media (max-width:768px){ a,button,.hamburger{ min-height:44px; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }
@media print{
  .site-header,.site-footer,.notice-strip{ border:0; }
  a::after{ content:""; }
}

/* PDFリンクの簡易バッジ */
.file-link::after{
  content:"PDF";
  display:inline-block;
  margin-left:8px;
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.85em;
  color:#555;
  background:#fff;
}

/* 関連リンク（市公式サイトへのカードリンク） */
.link-cards{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.link-card .card-a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); transition: border-color .15s ease, color .15s ease;
}
.link-card .card-a:hover{ border-color: var(--brand); color: var(--brand); }
.card-title{ font-weight:700; }
.card-meta{ color:var(--muted); font-size:.92em; }

/* 外部リンクっぽい矢印（任意） */
.link-card .card-a::after{
  content:"↗"; margin-left:8px; color:var(--muted);
}

/* === ハンバーガー：縦積み + 「×」アニメ（追記） === */
.hamburger{
  /* 既存: display:none; width:28px; は活かす */
  height:28px;
  flex-direction:column;        /* ← 三本線を縦に並べる */
  align-items:center;
  justify-content:center;
}
.hamburger span{
  /* 既存: display:block; height:2px; width:100%; background:#333; は活かす */
  border-radius:2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* チェック時に「×」へ */
#nav:checked + .hamburger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
#nav:checked + .hamburger span:nth-child(2){ opacity:0; }
#nav:checked + .hamburger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }



/* フェード＋Ken Burns（拡大1.05→1.12） */
@keyframes hero_fade{
  0%   { opacity:0; transform:scale(1.05) translate3d(0, 0, 0); }
  5%   { opacity:1; }
  33%  { opacity:1; transform:scale(1.12) translate3d(6px, 4px, 0); }
  38%  { opacity:0; }
  100% { opacity:0; }
}

/* 省エネ設定の人にはアニメ停止＋1枚目のみ表示 */
@media (prefers-reduced-motion: reduce){
  .hero__slides img{
    animation: none !important;
    opacity: 0;
  }
  .hero__slides img:nth-child(1){ opacity:1; }
}

/* 料金表の一番下の行に下線をつける */
.table-fee tbody tr:last-child th,
.table-fee tbody tr:last-child td {
  border-bottom: 1px solid #ccc; /* 色はお好みで */
}

/* 開場時間・休場日の表の一番下の行に下線 */
.section[aria-label="開場時間と休場"] .table tbody tr:last-child th,
.section[aria-label="開場時間と休場"] .table tbody tr:last-child td {
  border-bottom: 1px solid #ccc;
}

/* 斎場施設利用料金テーブルのスマホ最適化 --------------------- */

@media (max-width: 600px) {

  .table-fee {
    table-layout: fixed;     /* 各セルを均等に計算しやすくする */
  }

  /* スマホ時：全セル折り返しを許可 */
  .table-fee th,
  .table-fee td {
    white-space: normal;       /* nowrap を解除 */
    word-break: break-word;    /* 長い単語も折り返す */
    overflow-wrap: anywhere;   /* どこでも折ってOK（英数字も） */
  }

  /* centered の nowrap もスマホだけ上書きしておく */
  .table-fee.centered thead th,
  .table-fee.centered tbody th[scope="row"],
  .table-fee.centered td {
    white-space: normal;
  }

  /* 3列テーブル専用（eq3） */
  .table-fee.eq3 colgroup col:first-child {
    width: 50%;              /* 種別（名前）列：半分 */
  }
  .table-fee.eq3 colgroup col:nth-child(2),
  .table-fee.eq3 colgroup col:nth-child(3) {
    width: 25%;              /* 料金列：1/4ずつ */
  }
}

/* 文字色だけで強調（背景・枠なし） */
.nav-highlight {
  color: #c0392b !important; /* 濃い赤で目立たせる */
  font-weight: bold;         /* 太字で強調 */
}


/* 施設紹介：写真＋文章の左右交互レイアウト */
.facility-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 48px;
  gap: 32px;
}

.facility-row.reverse {
  flex-direction: row-reverse;
}

.facility-img img {
  width: 100%;
  max-width: 420px;
  border-radius: 8px;
  display: block;
}

.facility-text {
  flex: 1;
  min-width: 260px;
}

.facility-text h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  font-weight: 600;
}

.facility-text p {
  line-height: 1.7;
}

/* アクセスマップ風：写真メイン・説明小さめ */
.facility-large {
  margin-bottom: 48px;
}

.facility-large img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.facility-large figcaption {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #555;
  text-align: center;
  line-height: 1.6;
}

/* 写真：説明 = 2:1 の横並びレイアウト */
.facility-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}

.facility-flex.reverse {
  flex-direction: row-reverse; /* 左右逆にする */
}

/* 写真エリア（2） */
.facility-flex .flex-img {
  flex: 2;
}

.facility-flex .flex-img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* 説明エリア（1） */
.facility-flex .flex-text {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.facility-flex .flex-text h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.facility-flex .flex-text p {
  margin: 0;
  line-height: 1.7;
}

/* スマホ時は縦並び */
@media (max-width: 768px) {
  .facility-flex,
  .facility-flex.reverse {
    flex-direction: column;
  }
}