/* =============================================================================
   テンプレート「白青緑」（bluegreen） v0.2
   白い枠に、青いボタンのメニュー・緑の見出し・紺色のフッター。880px 幅の2列（左メニュー＋本文）。
   画像は使わず、CSS（色・線・余白・角丸）だけで描く。色は下の変数（テンプレートの設定）で変える。
   もとは「タカミヤ・マリバー環境保護財団」のデザイン。
   ============================================================================= */
:root {
  /* ---- 色（テンプレートの設定。ほかのサイトに使うときは、ここを変える） ---- */
  --c-menu: #042a79;          /* 左メニューのボタン */
  --c-accent: #2e8b57;        /* 見出しの線・印（緑） */
  --c-band: #dff0e3;          /* ページ上部の帯 */
  --c-side-bg: #dbe9f6;       /* 左の列の背景 */
  --c-page-bg: #eaf5fd;       /* ページの外側 */
  --c-footer: #001240;        /* フッター */
  --c-text: #333333;
  --c-link: #0000ee;
  --c-muted: #555555;
  --c-line: #cccccc;
  --c-menu-hi: color-mix(in srgb, var(--c-menu) 75%, #4f8cff);   /* 選んでいる・マウスを乗せたボタン */
  --c-mark: #ffe500;          /* メニューのボタンの印 */
  --c-band-ink: color-mix(in srgb, var(--c-accent) 55%, #000);   /* 帯の文字 */
  --font-body: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  --font-heading: var(--font-body);
  --block-gap: 1em;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--c-text); font-family: var(--font-body); font-size: 16px; background: #fff; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: .5em 1em; }
.main-area { background: var(--c-page-bg); padding-top: 10px; }

/* ---- ヘッダー（ロゴだけ） ---- */
.site-header { background: linear-gradient(#fff, #f2f2f2); border-bottom: 1px solid #ddd; }
.header-in { width: 880px; height: 65px; margin: 0 auto; }
.brand { display: block; float: left; margin: 8px 0 0 6px; font-size: 1.3rem; font-weight: 700; color: #222; text-decoration: none; }
.brand img { display: block; height: 50px !important; width: auto; max-width: 100%; }

/* ---- 白い枠 ---- */
.frame { width: 900px; margin: 0 auto; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.18); }
.hero-slot { padding: 0 10px; }
.hero-slot:empty { display: none; }
.wrap { display: grid; width: 900px; padding: 0 10px; background: var(--c-side-bg); }
.wrap.side-left { grid-template-columns: 220px 660px; }
.wrap.side-right { grid-template-columns: 660px 220px; }
.wrap.one { grid-template-columns: 880px; }
.main-col { padding: 10px 20px 20px; background: #fff; border-top: 1px solid var(--c-line); min-width: 0; }
.wrap.one .main-col { padding-inline: 30px; }
.wrap.one.wide .main-col { padding-inline: 20px; }
.side-nav { border-top: 1px solid var(--c-line); min-width: 0; }
.cms-content { min-height: 500px; font-size: .9rem; line-height: 1.6; --block-gap: 1em; }
.cms-content a:visited { color: #551a8b; }

/* ---- パンくず ---- */
.crumbs { padding: 2px 0 0 8px; font: 10px/1.5 Verdana, Arial, sans-serif; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs:empty { display: none; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: inline; }
.crumbs li { display: inline; }
.crumbs li + li::before { content: " > "; }
.crumbs a, .crumbs a:visited { color: #555; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---- 左メニュー（青いボタン。全階層を開いた形。印は CSS で描く） ---- */
.side-menu { padding: 10px; }
.side-title { display: none; }
.side-menu ul { list-style: none; margin: 0; padding: 0; }
.side-menu .tree { border-bottom: 1px solid var(--c-line); }
.side-menu li { margin: 0; padding: 0; background: none; }
.side-menu a { position: relative; display: block; color: #333; text-decoration: none; }
.side-menu a:visited { color: #333; }
/* 第1階層: 青いボタン。印は黄色の棒、選んでいる所は下向きの三角 */
.side-menu .t1 > a { padding: 15px 4px 10px 22px; font-size: 14px; line-height: 20px; letter-spacing: .06em; color: #fff; background: var(--c-menu);
  border: 1px solid color-mix(in srgb, var(--c-menu) 80%, #fff); border-bottom-color: color-mix(in srgb, var(--c-menu) 80%, #000); }
.side-menu .t1 > a:visited { color: #fff; }
.side-menu .t1 > a::before { content: ""; position: absolute; left: 7px; top: 50%; width: 4px; height: 12px; margin-top: -6px; background: var(--c-mark); }
.side-menu .t1 > a:hover, .side-menu .t1.is-current > a, .side-menu .t1.is-active > a { background: var(--c-menu-hi); }
.side-menu .t1.is-current > a::before, .side-menu .t1.is-active > a::before { width: 0; height: 0; margin-top: -3px; background: none;
  border: 5px solid transparent; border-top: 7px solid var(--c-mark); border-bottom-width: 0; }
/* 第2階層 */
.side-menu .t2 { border: 1px solid #ccc; border-top: 0; background: #f6f6f6; }
.side-menu .t2 + .t2 { border-top: 1px dotted #bbb; }
.side-menu .t2 > a { padding: 10px 5px 10px 15px; font-size: 14px; line-height: 21px; }
.side-menu .t2 > a:hover { background: #efefef; }
.side-menu .t2.is-current { background: #eee; }
.side-menu .t2.is-current > a { padding-left: 20px; }
.side-menu .t2.is-current > a::before { content: ""; position: absolute; left: 7px; top: 50%; margin-top: -4px;
  border: 4px solid transparent; border-left: 5px solid var(--c-accent); border-right-width: 0; }
.side-menu .t2 > ul { margin: 0 -1px -1px; }
/* 第3階層: 小さい四角の印 */
.side-menu .t3 { border: 1px solid #ccc; border-top: 1px dotted #bbb; background: #f6f6f6; }
.side-menu .t3 > a { padding: 10px 5px 10px 32px; font-size: 12px; line-height: 17px; }
.side-menu .t3 > a::before { content: ""; position: absolute; left: 16px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border: 1px solid #aaa; border-radius: 2px; background: #e6e6e6; }
.side-menu .t3 > a:hover, .side-menu .t3.is-current > a { background: #efefef; }
.side-menu .t3.is-current > a::before { border-color: var(--c-accent); background: var(--c-accent); }

/* ---- 見出し（文字と線だけ） ---- */
.cms-content h2, .cms-content h3, .cms-content h4 { color: #333; font-family: var(--font-heading); }
[data-block="heading"] h1 { margin: 8px 0 22px; padding: 6px 0 .3em; font-size: 1.9rem; font-weight: 700; line-height: 1.35; color: #333; border: 0; border-bottom: 3px solid var(--c-accent); }
[data-block="heading"] h2, .cms-content > h2 { margin: 10px 0 12px; padding: 5px 0 2px 7px; font-size: 1.35rem; font-weight: 700; line-height: 1.5; border: 0; border-bottom: 2px solid #cfd8e0; background: none; }
.cms-content h3 { margin: 14px 0 10px; padding: 5px 0 0 5px; font-size: 1.1rem; font-weight: 700; line-height: 1.4; border: 0; border-bottom: 1px solid #ccc; }
.cms-content h4 { margin: 10px 0 5px; padding: 3px 0 2px 8px; font-size: 1rem; border: 0; border-left: 4px solid var(--c-accent); }

/* ---- 文章・リスト ---- */
.cms-content ul { margin: 10px 0; padding-left: 1.4em; }
.cms-content ol { margin: 5px 0; }

/* ---- 画像＋文章（文章が画像の横に回り込む） ---- */
[data-block="textpic"] { display: flow-root; }
[data-block="textpic"] .b-media { float: left; margin: 0 10px 10px 0; max-width: 60%; }
[data-block="textpic"][data-pos="right"] .b-media { float: right; margin: 0 0 10px 10px; }
[data-block="textpic"] .b-media img, [data-block="image"] img { border-radius: 0; }

/* ---- ギャラリー（画像の元の大きさのまま、左から並べる） ---- */
[data-block="gallery"] { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
[data-block="gallery"] figure { flex: 0 1 auto; }
[data-block="gallery"] img, [data-block="gallery"][data-fit="contain"] img { width: auto; max-width: 100%; aspect-ratio: auto; object-fit: initial; background: none; border-radius: 0; }

/* ---- 表（左の列に緑の線、行の区切りは点線） ---- */
[data-block="table"] table { font-size: 12px; line-height: 1.5; border-collapse: separate; border-spacing: 0; }
[data-block="table"] caption { padding-left: 8px; font-size: 14px; }
[data-block="table"] th, [data-block="table"] td { padding: 5px 5px 3px 12px; border: 0; border-bottom: 1px dotted #ccc; background: #fff; }
[data-block="table"] td:first-child, [data-block="table"] th:first-child { width: 20%; padding-left: 10px; border-left: 4px solid var(--c-accent); }
[data-block="table"] tr:nth-child(even) td { background: #f5f5f5; }

/* ---- お知らせの一覧（日付と題名の行。点線で区切る） ---- */
[data-block="news"] ul { margin: 0; padding: 0 10px; list-style: none; border: 0; }
[data-block="news"] li { display: flex; gap: .4em; padding: .6em 0 .5em 5px; margin: 0; border: 0; border-bottom: 1px dotted #bbb; line-height: 1.3em; background: none; }
[data-block="news"] li::before { content: none; }
[data-block="news"] time { flex: none; min-width: 7.8em; color: var(--c-text); font-size: 1em; }
[data-block="news"] a { font-weight: 700; text-decoration: none; }
[data-block="news"] a:hover { text-decoration: underline; }
[data-block="news"] .b-news-cat { font-size: 86%; color: #555; background: none; padding: 0 0 0 5px; border: 0; }
[data-block="news"] .b-more { margin: 0; padding: 4px 6px; font-size: 90%; text-align: right; }
.b-pager { display: flex; flex-wrap: wrap; gap: .2em .8em; margin: .8em 0 1.4em; padding-left: 1em; font-size: 90%; }
.b-pager a, .b-pager a:visited { padding: 0; border: 0; background: none; color: var(--c-link); text-decoration: none; }
.b-pager a[aria-current] { font-weight: 700; color: #555; background: none; border: 0; }
/* トップページ: 先頭のお知らせは、角丸の枠つきの「最新情報」の箱にする */
.cms-content > [data-block="news"]:first-child { border: 2px solid var(--c-menu-hi); border-radius: 8px; overflow: hidden; background: #fff; }
.cms-content > [data-block="news"]:first-child::before { content: "最新情報"; display: block; padding: .5em 1em; font-size: 1.1rem; font-weight: 700; letter-spacing: .1em; color: #fff; background: var(--c-menu-hi); }
.cms-content > [data-block="news"]:first-child ul { padding-top: 4px; }
.cms-content > [data-block="news"]:first-child li:last-child { border-bottom: 0; }

/* ---- お知らせの記事 ---- */
.b-news-head { margin: 0 0 1em; }
.b-news-head .b-news-meta { color: #555; font-size: .9em; }
.b-news-back { margin-top: 1.5em; padding: 10px 0; border-top: 1px dotted #bbb; }

/* ---- メインビジュアル（トップの大きな画像・ページ上部の帯） ---- */
[data-block="hero"], [data-block="hero"][data-height="band"] { --hero-h: 110px; --shade: 0; min-height: 0; background: var(--c-band); color: var(--c-band-ink); border-radius: 0; margin: 0; }
[data-block="hero"] .b-hero-slide { min-height: var(--hero-h); }
[data-block="hero"] .b-hero-slide::after { display: none; }
[data-block="hero"][data-height="medium"] { --hero-h: 260px; background: #fff; }
[data-block="hero"][data-height="band"] .b-hero-text { padding: 0 36px; width: 100%; align-self: center; text-shadow: none; }
[data-block="hero"][data-height="band"] .b-hero-title { margin: 0 !important; font-size: 22px; font-weight: 700; letter-spacing: .08em; color: var(--c-band-ink); }

/* ---- フッター ---- */
.site-footer { clear: both; }
.footer-menu { background: #ececec; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.footer-menu-in { width: 900px; margin: 0 auto; padding: 6px 10px; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; font-size: 10px; display: flex; justify-content: flex-end; }
.footer-nav li { padding: 3px 10px; margin: 0; background: none; }
.footer-nav a { color: #333; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-main { background: var(--c-footer); color: #fff; }
.footer-wrap { width: 880px; margin: 0 auto; padding: 30px 0 20px; border-bottom: 1px solid var(--c-line); }
.site-info { display: flow-root; font-size: 12px; line-height: 1.4; }
.site-info p { margin: 0; }
.site-info a { color: #fff; text-decoration: none; }
.site-info .f-tagline { margin-bottom: 26px; font: 400 24px/1.4 "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; letter-spacing: .1em; }
.site-info .f-logo { float: left; }
.site-info .f-addr { float: right; text-align: left; }
.site-info .f-links { clear: both; padding-top: 24px; text-align: center; font-size: 14px; font-weight: 700; }
.site-info .f-links a { color: #7cc6dc; }
.copy { margin: 0; padding: 10px 10px 8px; text-align: center; font: 700 11px/1.4 Arial, Helvetica, sans-serif; color: #fff; }

/* ---- サイドの部品 ---- */
.side-area:not(:empty) { padding: 10px; }

/* ---- スマホ（1列にして、メニューは本文の下） ---- */
@media (max-width: 920px) {
  .hero-slot { padding: 0; }
  .header-in, .frame, .wrap, .footer-menu-in, .footer-wrap { width: 100%; }
  .header-in { height: auto; min-height: 65px; padding: 0 10px; }
  .brand { margin: 8px 0; }
  .wrap, .wrap.side-left, .wrap.side-right, .wrap.one { display: flex; flex-direction: column; }
  .main-col { order: 1; padding: 10px 16px 20px; }
  .wrap.one .main-col, .wrap.one.wide .main-col { padding-inline: 16px; }
  .side-nav { order: 2; border-top: 0; }
  .side-menu { max-width: 420px; margin: 0 auto; }
  .cms-content { min-height: 0; }
  [data-block="hero"] .b-hero-slide { min-height: 0; aspect-ratio: 880 / 110; }
  [data-block="hero"][data-height="medium"] .b-hero-slide { aspect-ratio: 880 / 260; }
  [data-block="hero"][data-height="band"] .b-hero-text { padding: 0 4%; }
  [data-block="hero"][data-height="band"] .b-hero-title { font-size: clamp(14px, 4.2vw, 22px); }
  [data-block="heading"] h1 { font-size: 1.5rem; }
  .site-info .f-logo, .site-info .f-addr { float: none; }
  .site-info .f-addr { padding-top: 10px; }
  .footer-wrap { padding: 24px 14px 20px; }
  .footer-menu-in { padding-inline: 10px; }
  .site-info .f-links { font-size: 12px; }
  .site-info .f-tagline { font-size: 18px; }
}
@media (max-width: 520px) {
  [data-block="textpic"] .b-media, [data-block="textpic"][data-pos="right"] .b-media { float: none; margin: 0 0 10px; max-width: 100%; }
  [data-block="news"] li { flex-direction: column; gap: .1em; }
}