/* 公開側コラム（?act=column・?act=column_detail）。261010 A 案。261026 からお知らせ（?act=news・news_detail）とサイトマップ（?act=sitemap）も使う
   カードはトップの「コラム・お役立ち情報」（top.css .blog-*）と同じ見た目をこのページ用に持つ。見出しの型もトップの .section-* と同じ値 */
.col-page{max-width:1140px;margin:0 auto;padding:20px 24px 64px}
/* 261101 コラムとお知らせの一覧・詳細、サイトマップはページの地を #ffffff に（玉井さん 16:52・17:42。13:49 の #fafafa から変更）。このCSSを使うほかのページは common.css の地のまま */
body:has(.col-page--column),body:has(.col-page--news),body:has(.col-page--sitemap){background:#fff}
.col-breadcrumb{font-size:.8125rem;color:var(--text-light);margin-bottom:22px}
.col-breadcrumb a{color:inherit;text-decoration:none}
.col-breadcrumb a:hover{text-decoration:underline}
.col-head{text-align:center;margin-bottom:44px}
/* 261010 見出しの下の余白を、同じ形のトップの見出し（top.css .section-header の margin-bottom:44px）にそろえる（元 32px） */
.col-title-en{font-family:var(--sgn-font-en);font-size:1.1rem;font-weight:400;font-stretch:75%;color:var(--primary);letter-spacing:.09em;line-height:1.4;margin-bottom:4px;text-transform:uppercase}
.col-title{font-family:var(--sgn-font-head);font-size:1.6rem;font-weight:900;color:var(--sgn-ink-head);line-height:1.5;margin:0}
.col-divider{width:48px;height:3px;background:var(--primary);margin:12px auto 0;border-radius:3px}

/* カテゴリ */
.col-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:28px}
.col-cat{padding:7px 16px;border-radius:50px;border:1.5px solid var(--border);background:var(--white);color:var(--text-light);font-size:.82rem;font-weight:600;text-decoration:none;line-height:1.4}
.col-cat:hover{border-color:var(--primary-light);color:var(--primary)}
.col-cat.is-on{background:var(--primary);border-color:var(--primary);color:#fff}

/* 一覧カード */
.col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.col-card{display:block;background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);text-decoration:none;color:inherit;transition:all .35s}
.col-card:hover{box-shadow:var(--shadow-hover);border-color:var(--primary-light);transform:translateY(-2px)}
.col-card-img{height:170px;overflow:hidden;background:var(--bg-alt)}
.col-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.col-card:hover .col-card-img img{transform:scale(1.04)}
.col-card-body{padding:16px}
.col-card-cat{font-size:.72rem;color:var(--primary);font-weight:700;margin-bottom:6px;background:var(--primary-light);display:inline-block;padding:2px 10px;border-radius:4px}
.col-card-title{font-size:.88rem;font-weight:600;line-height:1.6;margin-bottom:8px;color:var(--sgn-ink-head)}
.col-card-date{font-size:.72rem;color:var(--text-muted)}
.col-empty{text-align:center;color:var(--text-light);padding:40px 0;font-size:.85rem}

/* ページ送り */
.col-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:36px 0 0}
.col-pager a,.col-pager span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:var(--white);color:var(--text);font-size:.88rem;text-decoration:none}
.col-pager a:hover{border-color:var(--primary);color:var(--primary)}
.col-pager .is-on{background:var(--primary);border-color:var(--primary);color:#fff}
.col-pager .is-off{opacity:.35}

/* 詳細 */
.col-article{max-width:800px;margin:0 auto}
.col-article-head{margin-bottom:24px}
.col-article-cat{font-size:.72rem;color:var(--primary);font-weight:700;background:var(--primary-light);display:inline-block;padding:2px 10px;border-radius:4px}
.col-article-title{font-family:var(--sgn-font-head);font-size:1.5rem;font-weight:900;color:var(--sgn-ink-head);line-height:1.5;margin:8px 0}
.col-article-date{font-size:.8rem;color:var(--text-muted)}
.col-hero{margin:0 0 24px;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-alt)}
.col-hero img{width:100%;height:auto;display:block}
.col-lead{font-size:1rem;line-height:1.9;color:var(--text);margin:0 0 32px}
.col-box{margin:0 0 36px}
.col-box-title{font-family:var(--sgn-font-head);font-size:1.15rem;font-weight:700;color:var(--sgn-ink-head);line-height:1.5;margin:0 0 14px;padding:6px 0 6px 14px;border-left:4px solid var(--primary)}
.col-box-img{margin:0 0 16px;border-radius:var(--radius);overflow:hidden;background:var(--bg-alt)}
.col-box-img img{width:100%;height:auto;display:block}
.col-box-text{font-size:.95rem;line-height:1.9;color:var(--text)}
/* 261026 本文の [文字](URL) のリンク。色は公式サイトのURLリンク（detail.css #basic-info .info-website-link）と同じ #ca3660（白地で 4.99:1。--primary は 3.24:1 で足りない） */
.col-box-text a{color:var(--primary-ink);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
/* 261027 本文の md（## 見出し・**太字**・リスト・表。lib/public_column.php pubColumnTextHtml）
   common.css の *{margin:0;padding:0}・ul{list-style:none} を本文の中だけ戻す。h2 は区画の見出し .col-box-title と同じ見た目、表は料金表 .sgn-table--cols に合わせた
   番号の色はリンクと同じ #ca3660（--primary-dark は 3.89:1 で足りない）。表の見出しのセルと1列目は語の途中で折らない（「宿泊|型」になっていた）。
   ほかの列は文章が入るので折る。料金表のように全部 nowrap にはしない
   261107 ただし6列以上の表は枠に入りきらず横に送るので、料金表（common.css の 700px 以下）と同じく全部のセルを折らない。
   列の幅が見出しの字数で決まり「読谷|村」「生後4か|月未満」、備考が2字ずつ13行になっていた（玉井さん L984・L991・id 2001 の委託施設 26列・id 1999 の8列）。
   マスの中で改行したいときは md に <br> と書く（lib/public_column.php pubColumnTable。nowrap でも <br> では改行する）
   見出しのセルと1列目は keep-all をやめて nowrap に。Safari（WebKit）の keep-all は「（」の直後で折り「課税世帯自己負担額（|宿泊型）」になっていた。
   1列目は短い項目名の前提（長い文を入れると1行のまま列が広がる） */
.col-box-text h2{font-family:var(--sgn-font-head);font-size:1.15rem;font-weight:700;color:var(--sgn-ink-head);line-height:1.5;margin:36px 0 14px;padding:6px 0 6px 14px;border-left:4px solid var(--primary)}
.col-box-text h3{font-family:var(--sgn-font-head);font-size:1.05rem;font-weight:700;color:var(--sgn-ink-head);line-height:1.5;margin:28px 0 10px;padding:0 0 6px;border-bottom:1px solid #e9e2dc}
.col-box-text h4{font-size:.98rem;font-weight:700;color:var(--sgn-ink-head);line-height:1.6;margin:22px 0 8px}
.col-box-text>h2:first-child,.col-box-text>h3:first-child,.col-box-text>h4:first-child{margin-top:0}
/* 261029 目次（[文字](#英数字)）の飛び先が追従するヘッダーの下に隠れないようにする。値はコラムのページのヘッダーの実測の高さ（1000 以上 107.63・769〜999 105.59・768 以下 61。ミテクレ 14幅×7本）
   はじめ top.css の #banner-subsidy の 156 を流用し、769〜999 で見出しの上に約50px 空いたので 106 に直した */
.col-box-title[id],.col-box-text [id]{scroll-margin-top:108px}
@media(max-width:999px){.col-box-title[id],.col-box-text [id]{scroll-margin-top:106px}}
@media(max-width:768px){.col-box-title[id],.col-box-text [id]{scroll-margin-top:61px}}
.col-box-text strong{font-weight:700;color:var(--sgn-ink-head)}
.col-box-text ul,.col-box-text ol{margin:14px 0 18px;padding-left:2em}
.col-box-text ul{list-style:disc}
.col-box-text ol{list-style:decimal}
.col-box-text li{margin:0 0 10px}
.col-box-text li::marker{color:var(--primary-ink);font-weight:700}
.col-box-text li>ul,.col-box-text li>ol{margin:8px 0 0}
.col-tbl{margin:16px 0 32px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.col-tbl table{width:100%;min-width:480px;border-collapse:separate;border-spacing:0;border:1px solid #e9e2dc;border-radius:12px;overflow:hidden;background:#fff}
.col-tbl th,.col-tbl td{padding:13px 16px;border-right:1px solid #e9e2dc;border-bottom:1px solid #e9e2dc;text-align:left;vertical-align:middle}
.col-tbl th{background:#fcf5f5;color:var(--sgn-ink-body);font-size:.8125rem;font-weight:900;line-height:1.6;white-space:nowrap}
.col-tbl td{color:var(--text);font-size:.875rem;line-height:1.75}
.col-tbl td:first-child{white-space:nowrap}
.col-tbl table:has(th:nth-child(6)) th,.col-tbl table:has(th:nth-child(6)) td{white-space:nowrap}
.col-tbl th:last-child,.col-tbl td:last-child{border-right:0}
.col-tbl tbody tr:last-child td{border-bottom:0}

/* 前後の記事・一覧へ */
/* 261028 V19 記事ごとの広告タグの置き場（本文の幅にそろえ、広い広告は枠の中で横に送る） */
.col-ad{max-width:800px;margin:36px auto 0;overflow-x:auto}
.col-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:800px;margin:44px auto 20px}
.col-nav a{display:block;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--white);text-decoration:none;color:var(--text);font-size:.85rem;line-height:1.5}
.col-nav a:hover{border-color:var(--primary)}
.col-nav-label{display:block;font-size:.72rem;color:var(--primary);font-weight:700;margin-bottom:4px}
.col-nav .is-next{text-align:right}
.col-back{display:block;width:fit-content;margin:0 auto;padding:12px 32px;border-radius:50px;border:1.5px solid var(--primary);color:var(--primary);background:var(--white);font-weight:700;font-size:.9rem;text-decoration:none;transition:all .2s}
.col-back:hover{background:var(--primary);color:#fff}

/* 261026 お知らせ一覧（?act=news）。行はトップの「お知らせ」（top.css .news-*）と同じ値。詳細（?act=news_detail）はコラム詳細の部品のまま */
.nw-list{max-width:800px;margin:0 auto}
.nw-item{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--border);align-items:baseline;text-decoration:none;color:inherit}
.nw-date{font-size:.78rem;color:var(--text-muted);flex-shrink:0;min-width:100px}
.nw-tag{font-size:.7rem;padding:3px 10px;border-radius:50px;font-weight:700;flex-shrink:0;background:var(--primary-light);color:var(--primary)}
.nw-text{font-size:.85rem;color:var(--text)}
.nw-item:hover .nw-text{color:var(--primary)}

/* 261026 サイトマップ（?act=sitemap）。区分の見出しはコラム詳細の .col-box-title と同じ値 */
.sm-body{max-width:800px;margin:0 auto}
.sm-sec{margin:0 0 36px}
.sm-title{font-family:var(--sgn-font-head);font-size:1.15rem;font-weight:700;color:var(--sgn-ink-head);line-height:1.5;margin:0 0 14px;padding:6px 0 6px 14px;border-left:4px solid var(--primary)}
.sm-sub{font-size:.85rem;font-weight:700;color:var(--text-light);margin:20px 0 8px}
.sm-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 24px;margin:0;padding:0}
.sm-links--pref{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.sm-links a{display:inline-block;padding:6px 0;font-size:.9rem;line-height:1.6;color:var(--text)}
.sm-links a::before{content:"\203A";margin-right:6px;color:var(--primary);font-weight:700}
.sm-links a:hover{color:var(--primary);text-decoration:underline}

@media(max-width:900px){
  .col-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .col-title-en{font-size:.9rem}
  .col-title{font-size:1.3rem}
  .col-divider{width:40px;margin-top:10px}
  .nw-item{flex-wrap:wrap;gap:8px}
  /* 題名は常に下の段へ（top.css の .news-text と同じ。入るかどうかで行ごとに形が変わり、左端がそろわなかった） */
  .nw-text{flex-basis:100%}
}
@media(max-width:600px){
  .col-grid{grid-template-columns:1fr}
  .col-article-title{font-size:1.25rem}
  .col-nav{grid-template-columns:1fr}
  .col-nav>span:empty{display:none}
  .col-nav .is-next{text-align:left}
}
@media(max-width:480px){
  .col-page{padding:16px 16px 48px}
}