@charset "utf-8";

/* << INDEX >> ----------------------------------------------------------------
*
* @ 共通
* @ トップページ
* @ サイトマップ
* @ 404
* @ 検索
* @ 投稿｜詳細
* @ アーカイブ
*
* -------------------------------------------------------------------------- */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* @ 共通
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* @ カテゴリーラベル
---------------------------------------------------------------------------- */
.post-data .cat_label {
  display: inline-block;
  width: 120px;
  padding: 4px 0;
  margin-left: 1em;
  color: #fff;
  border-radius: 3px;
  font-size: 0.875em;
  text-align: center;
}

/* @ カラム分割
---------------------------------------------------------------------------- */
.flex_cols {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
/* >>>> 2カラム分割 */
@media screen and (min-width: 481px) {
  .col2 {
    width: calc(((100% - 15px) / 2) - 0.1px);
    margin: 0 15px 15px 0;
  }
  .col2:nth-of-type(2n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 480px) {
  .col2 {
    width: 100%;
    margin: 0 auto 15px;
  }
}

/* >>>> 3カラム分割 */
@media screen and (min-width: 769px) {
  .col3 {
    width: calc(((100% - 15px * 2) / 3) - 0.1px);
    margin: 0 15px 15px 0;
  }
  .col3:nth-of-type(3n) {
    margin-right: 0;
  }
}
@media screen and (min-width: 481px) and ( max-width: 768px) {
  .col3 {
    width: calc(((100% - 15px) / 2) - 0.1px);
    margin: 0 15px 15px 0;
  }
  .col3:nth-of-type(2n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 480px) {
  .col3 {
    width: 100%;
    margin: 0 auto 15px;
  }
}

/* >>>> 4カラム分割 */
@media screen and (min-width: 769px) {
  .col4 {
    width: calc(((100% - 15px * 3) / 4) - 0.1px);
    margin: 0 15px 15px 0;
  }
  .col4:nth-of-type(4n) {
    margin-right: 0;
  }
}
@media screen and (min-width: 481px) and ( max-width: 768px) {
  .col4 {
    width: calc(((100% - 15px) / 2) - 0.1px);
    margin: 0 15px 15px 0;
  }
  .col4:nth-of-type(2n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 480px) {
  .col4 {
    width: 100%;
    margin: 0 auto 15px;
  }
}

/* @ 投稿リスト
---------------------------------------------------------------------------- */
.news-list {
  margin-bottom: 50px;
  background-color: #fff;
}
.news-list ul {
  margin: 0;
  padding: 0;
}
.news-list ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.news-list ul li dl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px;
  border-bottom: dotted 1px #ccc;
}
.news-list ul li dl dt {
  width: 140px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.news-list ul li dl dd {
  margin: 0;
  padding: 0;
}
.news-list ul li dl dd:last-of-type {
  width: calc(100% - (140px + (120px + 10px)));
}
@media screen and (max-width: 768px) {
  .news-list ul li dl dd:last-of-type {
    margin-top: 5px;
    width: 100%;
  }
}
.news-list .cat_label {
  margin-right: 10px;
  width: 120px;
}
.news-list .cat_label span {
  display: block;
  padding: 3px 7px;
  background-color: #aaa;
  color: #fff;
  text-align: center;
  font-size: 0.875rem;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* @ 画像キャプション
---------------------------------------------------------------------------- */
.wp-caption {
  width: auto !important;
}
.wp-caption .wp-caption-text {
  margin: 5px 0;
  text-align: center;
}

/* @ その他
---------------------------------------------------------------------------- */
.wp-pagenavi {
  clear: both;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* @ トップページ
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* @ ヒーロー（キービジュアル）
---------------------------------------------------------------------------- */
#hero {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  background-color: #fff8d2;
}
#hero .hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/top/hero.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Figma 実測（catchcopy 146:74 vs hero 146:72）：
   - hero 1440×600
   - catchcopy 611×200 at (x=679, y=306) → hero相対 (x=679, y=127)
   - 結果：top 21.17% / right 10.42% / width 42.43% で再現
   ※絶対配置で .wrap 制約 + flex 中央寄せの影響を排除 */
#hero .hero-catchcopy {
  position: absolute;
  top: 21.17%;                       /* 127 / 600 */
  right: 10.42%;                     /* 150 / 1440 */
  width: 42.43%;                     /* 611 / 1440 */
  max-width: 611px;
  z-index: 2;                        /* main-content-wave(z=1) より前面に */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
/* catchcopy.svg は preserveAspectRatio="none" + width/height="100%" のため
   ブラウザがアスペクト比を解決できない。viewBox=651×240 を明示 */
#hero .hero-catchcopy img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 651 / 240;
}

/* @ メインコンテンツ背景（カード／CTA／お知らせ／サイドバー全体）
---------------------------------------------------------------------------- */
/* 白テクスチャ（bg-onosyakyo-zentai2.png）を repeat で敷き、フッターと同系統の地に揃える。
   上端は .main-content-wave（SVG）で波形にしてヒーロー下端へ乗り上げ、
   下端は footer の margin-top:80px をネガティブマージンで相殺してフッターと隙間なく接続 */
#main-content {
  position: relative;
  display: flow-root;                          /* 子の margin が親へ collapse するのを防止 */
  background-color: #ffffff;
  background-image: url('../img/top/bg-onosyakyo-zentai2.png');
  background-repeat: repeat;
  background-size: 400px auto;                 /* 微細テクスチャ。footer と同条件 */
  margin-bottom: -80px;                        /* footer margin-top: 80px と打ち消し合い → 隙間ゼロ */
}
@media screen and (max-width: 768px) {
  #main-content {
    margin-bottom: -40px;                      /* footer SP の margin-top: 40px に合わせる */
  }
}

/* >>> 上端の波形装飾：Figma bg-onosyakyo-zentai1.svg のパスを viewBox 1440x135 で踏襲（CSS 1:1）
   - 左ピーク：x=402 で texture top が y=0（hero 下端より 135px 上）
   - 右ディップ：x=971 で texture top が y=97（hero 下端より 38px 上）
   - Figma 実測：hero 高さ 600px に対し wave 深さ 135px = 22.5% */
.main-content-wave {
  position: absolute;
  top: -135px;          /* Figma 実測：hero 下端 → 波形ピークまで 135px */
  left: 0;
  width: 100%;
  height: 135px;
  display: block;
  z-index: 1;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  /* hero 360px に対し 22.5% = 81px → 切りよく 80px */
  .main-content-wave { top: -80px; height: 80px; }
}
@media screen and (max-width: 480px) {
  /* hero 260px に対し 22.5% = 58px */
  .main-content-wave { top: -58px; height: 58px; }
}
@media screen and (max-width: 768px) {
  #hero {
    height: 360px;
  }
  /* SP：catchcopy は中央寄せ（hero が縦に短いため右上配置は窮屈） */
  #hero .hero-catchcopy {
    top: 50%;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    max-width: 480px;
  }
}
@media screen and (max-width: 480px) {
  #hero {
    height: 260px;
  }
  #hero .hero-catchcopy {
    width: 85%;
  }
}

/* @ カテゴリーカード（5項目／ホバーでサブメニュー表示）
---------------------------------------------------------------------------- */
#category-cards {
  position: relative;
  /* category card のホバー submenu が、下の cta-buttons(z=10) と main-area(z=2)
     より前面に出るよう、それより高い z=20 を設定 */
  z-index: 20;
  /* Figma 実測：カード上端(y=563) と hero 下端(y=779) の差 = 216px
     → カードイラスト top がヒーロー画像にダイナミックに食い込む */
  margin-top: -216px;
  /* Figma 実測：cards bottom (y=839) → cta btn top (y=869) = 30px */
  padding-bottom: 30px;
}
@media screen and (max-width: 768px) {
  /* hero 360px の 36% = 130px */
  #category-cards {
    margin-top: -130px;
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 480px) {
  /* SP は 2 カラム小さめサイズ。Figma 比率(36%)継承で hero 下端への食い込みを維持 */
  #category-cards {
    margin-top: -94px;
    padding-bottom: 20px;
  }
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* PC：5 カラム横並び */
.category-card {
  position: relative;
  flex: 0 0 calc((100% - 16px * 4) / 5);
  max-width: 230px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* タブレット：3 カラム（5枚 → 3+2、最終行は中央寄せ） */
@media screen and (max-width: 768px) {
  .category-list {
    gap: 20px 14px;
  }
  .category-card {
    flex: 0 0 calc((100% - 14px * 2) / 3);
    max-width: 200px;
  }
}
/* スマホ：2 カラム（小さめサイズで密度高め）
   小さく揃えることで 5 枚目の orphan の目立たなさを狙う。
   gap も詰めてコンパクトに */
@media screen and (max-width: 480px) {
  .category-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
  }
  .category-card {
    flex: 0 0 calc((100% - 10px) / 2);
    max-width: 160px;
    min-width: 0;
  }
}

/* >>> カードリンク（クリック領域） */
.category-link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}
.category-link:hover {
  transform: translateY(-4px);
}

/* >>> カード本体（ダークカラーのアーチ／BG SVG） */
.card-container {
  position: relative;
  width: 100%;
  /* イラスト上部のはみ出し分を含めた縦比 */
  aspect-ratio: 230 / 276;
  /* SVG illust（preserveAspectRatio="none" 持ち）が想定より縦長に描画されて
     上のカードへ被さるのを防ぐため、card 範囲外への漏れを遮断 */
  overflow: hidden;
}
.card-bg-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.cat-koureisya .card-bg-svg { background-image: url('../img/top/card-bg-1.svg'); }
.cat-syogai    .card-bg-svg { background-image: url('../img/top/card-bg-2.svg'); }
.cat-kosodate  .card-bg-svg { background-image: url('../img/top/card-bg-3.svg'); }
.cat-chiiki    .card-bg-svg { background-image: url('../img/top/card-bg-4.svg'); }
.cat-volunteer .card-bg-svg { background-image: url('../img/top/card-bg-5.svg'); }

/* >>> インナーフレーム（ライトカラー、アーチトップ） */
.card-frame {
  position: absolute;
  /* BG SVG の top 内側に重ねる：BG は container 下部 83.3%（230/276）に配置されているので、
     その上端=container の 16.7% から 60.1%（166/276）分を占める */
  top: 16.7%;
  left: 0;
  right: 0;
  height: 60.1%;
  border: 5px solid;
  border-radius: 35% 35% 4% 4% / 49% 49% 6% 6%;
  box-sizing: border-box;
}
.cat-koureisya .card-frame { border-color: var(--c-cat-koureisya); background-color: var(--c-cat-koureisya-bg); }
.cat-syogai    .card-frame { border-color: var(--c-cat-syogai);    background-color: var(--c-cat-syogai-bg); }
.cat-kosodate  .card-frame { border-color: var(--c-cat-kosodate);  background-color: var(--c-cat-kosodate-bg); }
.cat-chiiki    .card-frame { border-color: var(--c-cat-chiiki);    background-color: var(--c-cat-chiiki-bg); }
.cat-volunteer .card-frame { border-color: var(--c-cat-volunteer); background-color: var(--c-cat-volunteer-bg); }

/* >>> ラベル（BG ダークバンド上に白テキスト）
   Figma 実測（高齢者福祉 146:91 を基準）：
   - card 全体 276px に対し text box は y=225〜253（高さ28）
   - つまり top: 225/276 = 81.52%, bottom: (276-253)/276 = 8.33%
   - font-size 28px / letter-spacing 1.68px (= 0.06em) / Zen Maru Gothic Bold */
.card-label {
  position: absolute;
  top: 81.52%;
  bottom: 8.33%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 6%;
  display: flex;
  align-items: center;          /* text box 内で縦中央寄せ */
  justify-content: center;
  text-align: center;
  font-family: var(--ff-main);
  font-weight: 700;
  font-size: clamp(15px, 1.95vw, 28px);   /* Figma 28px を上限に */
  color: #fff;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

/* >>> イラスト（カード上部にスティックアップ） */
.card-illust {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 28%;
  z-index: 2;
  pointer-events: none;
}
.card-illust .illust {
  position: absolute;
  bottom: 0;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 高齢者：2 体のキャラを並べる */
.cat-koureisya .illust-back {
  left: 4%;
  width: 50%;
  height: 92%;
}
.cat-koureisya .illust-front {
  right: 4%;
  bottom: 0;
  width: 42%;
  height: 78%;
}

/* 障害者：単体イラスト中央 */
.cat-syogai .illust {
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  height: 92%;
}

/* 子育て：単体イラスト中央やや左寄り */
.cat-kosodate .illust {
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 88%;
}

/* 地域福祉：奥に onocity（SVG）、手前に chiiki（人物）
   onocity.svg は preserveAspectRatio="none" + width/height="100%" のため
   ブラウザが viewBox 比率を解決できない。Figma 実寸 166×158 を明示 */
.cat-chiiki .illust-back {
  left: 50%;
  bottom: 32%;
  transform: translateX(-50%);
  width: 70%;
  height: auto;
  aspect-ratio: 166 / 158;
  max-height: 70%;             /* card-illust の 70% を上限に */
}
.cat-chiiki .illust-front {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 85%;
  height: 52%;
}

/* ボランティア：単体イラスト中央 */
.cat-volunteer .illust {
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 92%;
}

/* >>> サブメニュー（ホバーでカード下に展開：モダンなドロップダウン）
   - カードとメニューの隙間は ::before（透明ブリッジ）で連結し、カーソルが抜けても閉じない
   - 角丸14px＋ソフトシャドウ＋上向きカレット（カテゴリー色）で今風の見た目に */
.category-card .submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 100%;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  margin-top: 13px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  z-index: 50;
}
/* ホバー欠け防止：カードとメニュー間の隙間を透明ブリッジで連結 */
.category-card .submenu::before {
  content: '';
  position: absolute;
  top: -15px; left: 0; right: 0; height: 15px;
}
/* 上向きカレット（カテゴリー色）でカードと視覚的につなぐ */
.category-card .submenu::after {
  content: '';
  position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid var(--c-sub1);
}
.cat-koureisya .submenu::after { border-bottom-color: var(--c-cat-koureisya); }
.cat-syogai    .submenu::after { border-bottom-color: var(--c-cat-syogai); }
.cat-kosodate  .submenu::after { border-bottom-color: var(--c-cat-kosodate); }
.cat-chiiki    .submenu::after { border-bottom-color: var(--c-cat-chiiki); }
.cat-volunteer .submenu::after { border-bottom-color: var(--c-cat-volunteer); }

.category-card:hover .submenu,
.category-card:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.category-card .submenu ul {
  margin: 0;
  padding: 8px;
  list-style: none;
}
.category-card .submenu li {
  margin: 0;
  list-style: none;
}
.category-card .submenu a {
  display: block;
  padding: 11px 16px;
  border-radius: 9px;
  font-family: var(--ff-main);
  font-size: 1.0625rem;                   /* 17px */
  line-height: 1.5;
  color: var(--c-text);
  text-decoration: none;
  word-break: break-word;
  transition: background-color 0.15s, color 0.15s;
}
.category-card .submenu a:hover {
  background-color: var(--c-sub1-light);
  color: var(--c-logo-green);
}

/* サブメニュー内の SP 限定項目（高齢者福祉トップへのリンク等）は既定で非表示 */
.category-card .submenu li.sp-only {
  display: none;
}

/* SP（タッチ端末）：サブメニュー付きカード(.has-submenu)は「カード全体タップで開閉」
   ※カードをタップ → サブメニュー展開（先頭に「高齢者福祉」リンク）。再タップ／カード外タップで閉じる
     submenu は絶対配置オーバーレイなのでグリッドを崩さない。JS(config.js)で .is-open を制御
   ※PC は従来どおり（カード＝ページ遷移リンク、ホバーでサブメニュー表示） */
@media (hover: none), (max-width: 768px) {
  /* 開いたカードを兄弟カードより前面に（先頭カードの dropdown が後続カードに隠れるのを防ぐ） */
  .category-card.is-open {
    z-index: 40;
  }
  .category-card .submenu {
    left: 0;
    transform: translateY(-6px);
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 24px);
  }
  /* SP はタップ展開のためカレット／ホバーブリッジは不要 */
  .category-card .submenu::before,
  .category-card .submenu::after { display: none; }
  /* SP ではホバーで開かない（タップのみ） */
  .category-card:hover .submenu,
  .category-card:focus-within .submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  }
  .category-card.is-open .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .category-card .submenu a {
    font-size: 0.9375rem;     /* 15px */
    padding: 10px 16px;
  }
  /* SP では高齢者福祉トップへのリンクを表示 */
  .category-card .submenu li.sp-only {
    display: block;
  }

  /* 開閉インジケータ：ラベルの直後に白い「˅」（テキストと同色・一体化）。視覚のみ＝非操作
     ※カード全体がタップ対象なので独立ボタンは不要 */
  .category-card.has-submenu .card-label::after {
    content: '';
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: 8px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.3s ease;
  }
  .category-card.has-submenu.is-open .card-label::after {
    transform: translateY(2px) rotate(225deg);
  }
}

/* @ CTAボタン（4項目／ホバーでサブメニュー表示）
---------------------------------------------------------------------------- */
/* Figma 実測：btn-list (160:287) x=120 y=869 w=1200 h=110
   各ボタン w=290 h=110, gap=13.33（=40/3）, padding=20, icon-text gap=16
   アイコン SVG は内部に色付き角丸 rect (rx=10) を含む 70x70 構造のため、
   ボタン外枠の border はカテゴリーカラーで同色を CSS で別途指定 */
#cta-buttons {
  position: relative;
  /* submenu を main-area より前面に出すため、main-area(z=2) より高い値に。
     hover 時の submenu は cta-buttons 内の stacking context で描画されるので、
     #cta-buttons 自体を高く積む必要がある */
  z-index: 10;
  padding-bottom: 60px;        /* お知らせセクションへの余白 */
}
@media screen and (max-width: 768px) {
  #cta-buttons { padding-bottom: 40px; }
}
@media screen and (max-width: 480px) {
  #cta-buttons { padding-bottom: 30px; }
}

.cta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;                   /* Figma 13.33 → 13 で揃え */
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 768px) {
  .cta-list {
    justify-content: center;
    gap: 16px;
  }
}

/* PC：4列 */
.cta-card {
  position: relative;
  flex: 0 0 calc((100% - 13px * 3) / 4);
  max-width: 290px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* タブレット：2列（4個 → 2+2） */
@media screen and (max-width: 768px) {
  .cta-card {
    flex: 0 0 calc((100% - 16px) / 2);
    max-width: 320px;
  }
}
/* モバイル：1列 */
@media screen and (max-width: 480px) {
  .cta-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* >>> ボタン本体（白背景＋3pxボーダー＋角丸16） */
.cta-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 17px 20px;            /* btn 110高 - icon 70 = 40 → 上下 17 で中央寄せ */
  background-color: #fff;
  border: 3px solid;
  border-radius: 16px;
  text-decoration: none;
  color: var(--c-text);
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

/* CTAボタン専用カラー（Figma 2024更新：相談=橙/利用=ティール/参加=トープ/協力=ピンク）
   ボタン別クラスに --cta-color を持たせ、枠線・サブメニュー・チェブロン・アイコンで共通参照。
   トップ(.cta-card)／下層サイドバー(.page-cta)の両方で同じ修飾クラスを使う */
.cta-soudan   { --cta-color: #f49758; }
.cta-riyou    { --cta-color: #77b6b5; }
.cta-sanka    { --cta-color: #ac9a8a; }
.cta-kyoryoku { --cta-color: #e27fbc; }

.cta-card .cta-link { border-color: var(--cta-color); }

/* >>> アイコン（70x70・SVG内部に色付き背景rect） */
.cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 70px;
  height: 70px;
}
/* SVG は preserveAspectRatio="none" のため明示固定。viewBox=70x70 */
.cta-icon img {
  display: block;
  width: 70px;
  height: 70px;
  aspect-ratio: 1 / 1;
}
@media screen and (max-width: 480px) {
  .cta-icon { width: 60px; height: 60px; }
  .cta-icon img { width: 60px; height: 60px; }
}

/* >>> ラベル */
.cta-label {
  font-family: var(--ff-main);
  font-weight: 700;
  font-size: 1.75rem;            /* 28px相当 → 大ボタンで連動 */
  letter-spacing: 0.06em;        /* Figma 1.68px ÷ 28 = 0.06 */
  color: var(--c-text);
  line-height: 1.2;
  /* flex 子要素の min-width: auto を解除して shrink を許可 → 拡大時に折返し可 */
  min-width: 0;
  overflow-wrap: anywhere;
}
/* 中間幅でクランプ縮小（24〜28px） */
@media screen and (max-width: 1200px) {
  .cta-label { font-size: clamp(22px, 2.2vw, 28px); }
}
@media screen and (max-width: 480px) {
  .cta-label { font-size: 24px; }
}

/* >>> サブメニュー（CTA用：項目1〜9件と差があるため可変高＋長文ラップ対応） */
/* >>> CTAサブメニュー（モダンなドロップダウン）。ボタン左端に揃え、はみ出しを抑制 */
.cta-card .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(-4px);
  min-width: 100%;
  width: max-content;
  max-width: min(360px, calc(100vw - 24px));
  margin-top: 13px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  z-index: 50;
}
/* ホバー欠け防止：透明ブリッジで隙間を連結 */
.cta-card .submenu::before {
  content: '';
  position: absolute;
  top: -15px; left: 0; right: 0; height: 15px;
}
/* 上向きカレット（ボタン色）。左寄せメニューなのでボタン側＝左寄りに配置 */
.cta-card .submenu::after {
  content: '';
  position: absolute;
  top: -8px; left: 34px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid var(--cta-color);
}
.cta-card:hover .submenu,
.cta-card:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cta-card .submenu ul {
  margin: 0;
  padding: 8px;
  list-style: none;
}
.cta-card .submenu li {
  margin: 0;
  list-style: none;
}
.cta-card .submenu a {
  display: block;
  padding: 11px 16px;
  border-radius: 9px;
  font-family: var(--ff-main);
  font-size: 1.0625rem;                   /* 17px */
  line-height: 1.5;
  color: var(--c-text);
  text-decoration: none;
  word-break: break-word;
  transition: background-color 0.15s, color 0.15s;
}
.cta-card .submenu a:hover {
  background-color: var(--c-sub1-light);
  color: var(--c-logo-green);
}

/* >>> サブメニュー項目を「リンクらしく」：右端に › ＋ ホバー/タップで色付き
   （特に SP のアコーディオンが本文と同化してリンク感が無い問題への対応） */
.category-card .submenu a,
.cta-card .submenu a,
.category-navi-list .submenu a,
.page-cta .submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.category-card .submenu a::after,
.cta-card .submenu a::after,
.category-navi-list .submenu a::after,
.page-cta .submenu a::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-top: 2px solid #c4c4c4;
  border-right: 2px solid #c4c4c4;
  transform: rotate(45deg);
  transition: border-color 0.15s;
}
.category-card .submenu a:hover::after,
.cta-card .submenu a:hover::after,
.category-navi-list .submenu a:hover::after,
.page-cta .submenu a:hover::after {
  border-color: var(--c-logo-green);
}

/* SP：ホバーが無いぶん「タップできる行」と分かるよう、項目間に区切り線＋タップ反応を付与 */
@media (hover: none), (max-width: 768px) {
  .category-card .submenu li:not(:last-child) > a,
  .cta-card .submenu li:not(:last-child) > a,
  .category-navi-list .submenu li:not(:last-child) > a,
  .page-cta .submenu li:not(:last-child) > a {
    border-bottom: 1px solid #ededed;
    border-radius: 0;
  }
  .category-card .submenu a:active,
  .cta-card .submenu a:active,
  .category-navi-list .submenu a:active,
  .page-cta .submenu a:active {
    background-color: var(--c-sub1-light);
    color: var(--c-logo-green);
  }
  .category-card .submenu a:active::after,
  .cta-card .submenu a:active::after,
  .category-navi-list .submenu a:active::after,
  .page-cta .submenu a:active::after {
    border-color: var(--c-logo-green);
  }
}

/* SP（タッチ）：タップで開閉するアコーディオン（.is-open で展開）
   ※ホバー不可端末でもサブメニューに到達できるようにする。JS(config.js)で .is-open を制御 */
@media (hover: none), (max-width: 768px) {
  .cta-card .submenu {
    position: static;
    transform: none;
    min-width: 0;
    width: auto;
    max-width: none;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 0;                /* PC用の1px枠をリセット（閉時に線が出ないように） */
    border-radius: 0 0 10px 10px;
    transition: max-height 0.3s ease, margin-top 0.3s ease;
  }
  /* SP はアコーディオンのためカレット／ホバーブリッジは不要 */
  .cta-card .submenu::before,
  .cta-card .submenu::after { display: none; }
  /* 狭幅デスクトップのホバー発火で横ずれしないように */
  .cta-card:hover .submenu,
  .cta-card:focus-within .submenu {
    transform: none;
  }
  .cta-card.is-open .submenu {
    max-height: 760px;
    margin-top: 8px;
    border-top: 4px solid var(--cta-color);
  }

  /* 開閉インジケータ ▼（タップで開く目印） */
  .cta-card > .cta-link { position: relative; padding-right: 38px; }
  .cta-card > .cta-link::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    opacity: 0.45;
    transition: transform 0.3s ease;
  }
  .cta-card.is-open > .cta-link::after {
    transform: translateY(-35%) rotate(225deg);
  }
}

/* @ メインエリア（サイドバー + お知らせ／2カラム）
---------------------------------------------------------------------------- */
/* Figma 実測：
   - sidebar (160:514) x=120 y=975 w=300 h=808
   - news    (157:104) x=480 y=975 w=840 h=713
   - 間隔 (480-420) = 60px、合計 1200px（.wrap 内ピッタリ） */
#main-area {
  position: relative;
  z-index: 2;
  padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
  #main-area { padding-bottom: 60px; }
}

#main-area .main-area-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  column-gap: 60px;
}
@media screen and (max-width: 1024px) {
  #main-area .main-area-grid {
    grid-template-columns: 260px 1fr;
    column-gap: 40px;
  }
}
@media screen and (max-width: 768px) {
  /* SP：縦並び（お知らせを上、サイドバーを下に） */
  #main-area .main-area-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  #shortcut-sidebar { order: 2; }
  #news-area        { order: 1; }
}

/* @ サイドバー：ショートカット10件
---------------------------------------------------------------------------- */
#shortcut-sidebar {
  /* Figma：first btn が y=60 → 60px の padding-top */
  padding-top: 0;
}
@media screen and (max-width: 768px) {
  #shortcut-sidebar { padding-top: 0; }
}

#shortcut-sidebar .shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 12px;                          /* Figma 12 */
  margin: 0;
  padding: 0;
  list-style: none;
}
#shortcut-sidebar .shortcut-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#shortcut-sidebar .shortcut-link {
  display: flex;
  align-items: center;
  gap: 10px;                          /* icon ⇔ text gap = 44-(10+24) = 10 */
  min-height: 64px;                   /* 文字拡大時は伸びる */
  padding: 8px 14px 8px 10px;         /* left 10（Figma） / right 14（余裕） */
  background: linear-gradient(to right, #FFE88B 0%, #FFFBEC 60%);
  border: 3px solid var(--c-sub1-dark);   /* #E0B300 */
  border-radius: 10px;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--c-text);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
#shortcut-sidebar .shortcut-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(224, 179, 0, 0.30);
  filter: brightness(1.03);
}
#shortcut-sidebar .shortcut-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
/* SVG は preserveAspectRatio="none" のため明示固定。viewBox 24x24 */
#shortcut-sidebar .shortcut-icon img {
  display: block;
  width: 24px;
  height: 24px;
  aspect-ratio: 1 / 1;
}
#shortcut-sidebar .shortcut-text {
  font-family: var(--ff-main);
  font-size: 1.25rem;                /* 20px相当（html font-size 16px 時）→ 大ボタンで連動 */
  font-weight: 500;
  letter-spacing: 0.1em;              /* Figma 2px = 0.1em */
  color: var(--c-text);
  line-height: 1.2;
  /* flex 子要素の min-width: auto を解除して shrink を許可 → 拡大時に折返し可 */
  min-width: 0;
  overflow-wrap: anywhere;
}
@media screen and (max-width: 1024px) {
  /* 中間幅でテキストの大きさを少し縮めて 260px に納める */
  #shortcut-sidebar .shortcut-text {
    font-size: 17px;
    letter-spacing: 0.06em;
  }
}

/* @ お知らせ
---------------------------------------------------------------------------- */
#news-area {
  /* Figma：Frame 14 が y=60 → 60px の padding-top */
  padding-top: 0;
}
@media screen and (max-width: 768px) {
  #news-area { padding-top: 0; }
}

/* >>> 見出し「お知らせ」 */
#news-area .news-heading {
  display: flex;
  align-items: center;
  gap: 14px;                          /* Figma 14 */
  margin: 0 0 30px;
  padding: 0;
  background: none;                   /* 既存 style.css の h2 をリセット */
  color: #000;
  font-family: var(--ff-main);
  font-weight: 500;
  font-size: 2.625rem;                /* Figma 42px → 大ボタンで連動 */
  letter-spacing: 0.2em;              /* Figma 8.4px = 0.2em */
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#news-area .news-heading-icon {
  display: block;
  width: 36px;
  height: 36px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
#news-area .news-heading-text {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  #news-area .news-heading {
    font-size: 32px;
    gap: 10px;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
  }
  #news-area .news-heading-icon {
    width: 28px;
    height: 28px;
  }
}

/* >>> お知らせリスト */
#news-area .topnews-list {
  display: flex;
  flex-direction: column;
  gap: 3px;                            /* Figma 3px */
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
#news-area .topnews-item {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px dashed var(--c-border-news);   /* #BA8D12 */
}

#news-area .topnews-link {
  display: flex;
  align-items: center;
  gap: 14px;                           /* Figma 14（data 124.5 → text 140.5 = 16） */
  padding: 12px 16px;                  /* Figma 12 16 */
  text-decoration: none;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
#news-area .topnews-link:hover {
  background-color: rgba(255, 251, 236, 0.5);
  opacity: 0.85;
}
#news-area .topnews-link.topnews-link--nolink {
  cursor: default;
}
#news-area .topnews-link.topnews-link--nolink:hover {
  background-color: transparent;
  opacity: 1;
}

#news-area .topnews-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  /* Figma data 幅 124.5px ≒ 7em (date 18px 時)。em ベースにすることで
     文字拡大時も date 表示分の幅が連動して広がり、title への貫通を防ぐ */
  min-width: 7em;
}
/* 三角矢印（news-arrow.svg は上向き）→ 90度回転で右向きに */
#news-area .topnews-arrow {
  display: inline-block;
  width: 11px;
  height: 10px;
  background: url('../img/top/news-arrow.svg') no-repeat center / contain;
  transform: rotate(90deg);
  flex-shrink: 0;
}
#news-area .topnews-date {
  font-family: var(--ff-main);
  font-size: 1.125rem;                  /* 18px相当 → 大ボタンで連動 */
  font-weight: 500;
  color: #000;
  line-height: 1.6;
  white-space: nowrap;
}

#news-area .topnews-text {
  font-family: var(--ff-main);
  font-size: 1.125rem;                  /* 18px相当 → 大ボタンで連動 */
  font-weight: 500;
  color: var(--c-text-link);            /* #0066CC */
  text-decoration: underline;
  text-decoration-color: var(--c-text-link);
  text-underline-offset: 2px;
  line-height: 1.6;
  word-break: break-word;
}
#news-area .topnews-link--nolink .topnews-text {
  color: var(--c-text);
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  #news-area .topnews-link {
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 12px;
  }
  #news-area .topnews-meta {
    width: auto;
  }
  #news-area .topnews-date,
  #news-area .topnews-text {
    font-size: 16px;
  }
}

#news-area .topnews-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--c-text);
  font-size: 16px;
}

/* >>> 「一覧を見る」ボタン（Figma：bg #147F08 / box-shadow 0 4px 0 #1B5415） */
#news-area .topnews-more {
  margin: 0;
  text-align: center;
}
#news-area .topnews-more-btn {
  display: inline-block;
  min-width: 200px;
  padding: 14px 28px;
  background-color: var(--c-cta);
  color: #fff;
  font-family: var(--ff-main);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  border-radius: 54px;
  box-shadow: 0 4px 0 var(--c-cta-shadow);  /* #1B5415 */
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#news-area .topnews-more-btn:hover {
  color: #fff;
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--c-cta-shadow);
}
#news-area .topnews-more-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--c-cta-shadow);
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* @ サイトマップ
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.page-sitemaps .sitemaps-list {
  width: 48%;
  float: left;
  margin-left: 4%;
}
.page-sitemaps .sitemaps-list:first-child {
  margin-left: 0;
}
@media screen and (max-width: 768px) {
  .page-sitemaps .sitemaps-list {
    width: 100%;
    float: none;
    margin-left: 0;
  }
}
.page-sitemaps .sitemaps-list ul {
  padding: 0;
}
.page-sitemaps .sitemaps-list ul ul {
  padding-left: 1.5em;
}
.page-sitemaps .sitemaps-list li {
  list-style: none;
}
.page-sitemaps .sitemaps-list li a {
  display: block;
  padding: 0.5em;
  color: inherit;
  border-bottom: 1px dotted #ccc;
  text-decoration: none;
}
.page-sitemaps .sitemaps-list li a:hover {
  text-decoration: none;
  background-color: #f4f9fe;
}
.page-sitemaps .sitemaps-list li a:before {
  font-family: 'FontAwesome';
  font-weight: normal;
  content: "\f105";
  margin-right: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* @ 404
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* @ メッセージ
---------------------------------------------------------------------------- */
.error404 .er404-message {
  text-align: center;
}
.error404 .er404-message:before {
  display: block;
  font-family: 'FontAwesome';
  font-weight: normal;
  font-size: 140px;
  content: "\f071";
  color: #f66;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 768px) {
  .error404 .er404-message:before {
    font-size: 112px;
  }
}
.error404 .er404-message p:first-child {
  font-family: 'Open Sans', sans-serif;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  margin-top: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 768px) {
  .error404 .er404-message p:first-child {
    font-size: 2.25em;
  }
}
.error404 .er404-message p:first-child span {
  font-size: 0.5em;
}

/* @ 検索フォーム
---------------------------------------------------------------------------- */
#er404-search {
  display: flex;
  width: 80%;
  min-width: 280px;
  max-width: 680px;
  margin: 5em auto;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #er404-search {
    margin: 2em auto;
  }
}
#er404-search label:first-of-type {
  width: 100%;
}
#er404-search input[type='text'] {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px;
  border: none;
  border-radius: 0;
  outline: none;
  background-color: #eee;
}
#er404-search input[type='submit'] {
  font-family: 'FontAwesome';
  box-sizing: border-box;
  padding: 0.5em 0.75em;
  height: 100%;
  border: none;
  border-radius: 0;
  outline: none;
  background-color: #2d3339;
  color: #fff;
  font-weight: normal;
  font-size: 1.25em;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: opacity 0.3s;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* @ 検索
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.search #er404-search {
  margin: 3em auto;
}
.search .search-list {
  border-top: 1px solid #ccc;
}
.search .search-list ul {
  display: block;
  margin: 0;
  padding: 0;
}
.search .search-list > a {
  display: block;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s;
  transition: opacity 0.3s;
}
.search .search-list > a:hover {
  opacity: 0.6;
  text-decoration: none;
}
.search .search-list h3 {
  margin-top: 0;
}
.search .search-list p:last-child {
  text-align: right;
  margin-bottom: 0;
  padding-top: 1em;
  border-top: 1px dotted #ccc;
  font-size: 0.875em;
  color: #999;
}
.search .search-count {
  margin: 2em 0;
}
.search-everything-highlight {
  font-weight: bold;
  text-decoration: underline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.search-everything-highlight:before {
  display: none;
}
.search .permalink {
  overflow: hidden;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* @ 投稿｜詳細
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.single .post-data {
  border-bottom: 1px dotted #ccc;
  padding-bottom: 1em;
  margin-bottom: 3em;
  font-weight: bold;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* @ 下層ページ（page.php）
*   Figma 「介護保険・介護に関すること」(node 257:66) を基準にデザイントークン整理
*     - パンくず + カテゴリーナビ（header.php 末尾で出力）
*     - 2 カラム：#page-sidebar 300px ／ #page-contents 残り
*     - 共通見出し階段：.page-h2 / .page-h3 / .page-h4
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* @ 1) パンくずバー
   ------------------------------------------------------------------------- */
#breadcrumb-bar {
  background: #FBF6DF;                  /* ono-syakyo/Main1 */
  padding: 16px 0;
}
/* >>> 既存 #breadcrumb の灰色装飾を上書き（黄背景バー内に収める） */
#breadcrumb-bar #breadcrumb {
  display: block;                       /* 既存の display:none(SP) を打ち消す */
}
#breadcrumb-bar #breadcrumb ul {
  max-width: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow-x: auto;
  font-family: 'Zen Maru Gothic', sans-serif;
}
#breadcrumb-bar #breadcrumb ul li {
  font-size: 1.125rem;                  /* 18px / 文字拡大連動 */
  letter-spacing: 0.06em;               /* 約 1.08px */
  font-weight: 500;
  color: #363636;
}
/* Breadcrumb NavXT 7.5.x の bcn_display_list() は各項目を自動で <li> ラップする一方、
   プラグイン管理画面の Home/Item Template が <li>...</li> を内包しているため
   <li><li>...</li></li> が HTML パーサで隣接 <li>+<li> に分割される。
   結果：各項目につき「空 <li class='...'>」＋「中身 <li>」のペアが出力される。
   → CSS で空 <li> を非表示にし、Home 中身 <li> の separator を抑制する */
#breadcrumb-bar #breadcrumb ul li:empty {
  display: none;
}

/* セパレータ：style.css と同じ FA5 Solid chevron-right (\f105) */
#breadcrumb-bar #breadcrumb ul li:before {
  content: '\f105';
  font-family: 'Font Awesome 5 Solid';
  font-weight: 900;
  padding: 0 10px;
  color: #363636;
}
/* Home の中身 <li> は空マーカー <li class="home"> の直後にあるので隣接セレクタで判定 →
   先頭になる Home に separator が付かないよう抑制 */
#breadcrumb-bar #breadcrumb ul li.home + li:before {
  content: none;
  padding: 0;
}
#breadcrumb-bar #breadcrumb ul li:last-of-type {
  font-weight: 500;                     /* 太字解除 */
}
#breadcrumb-bar #breadcrumb ul li a {
  color: #363636;
  text-decoration: none;
}
#breadcrumb-bar #breadcrumb ul li a:hover {
  text-decoration: underline;
}

/* >>> プラグイン未導入時のフォールバック（最低限ホームリンクのみ表示） */
#breadcrumb-bar:has(#breadcrumb:empty)::after,
#breadcrumb-bar:not(:has(#breadcrumb))::after {
  content: '🏠';
  font-size: 1.125rem;
}

@media screen and (max-width: 768px) {
  #breadcrumb-bar {
    padding: 12px 0;
  }
  #breadcrumb-bar .wrap {
    padding: 0 16px;
  }
}


/* @ 2) カテゴリーナビゲーション（5 色ボタン）
   ------------------------------------------------------------------------- */
/* @ パンくず下〜footer 直前までの紙テクスチャ背景（トップページの #main-content と共通） */
#page-bg-area {
  position: relative;
  display: flow-root;                   /* 子の margin が親 (この #page-bg-area) に collapse して、
                                           パンくず⇔テクスチャ間に白い隙間ができるのを防止 */
  background-color: #ffffff;
  background-image: url('../img/top/bg-onosyakyo-zentai2.png');
  background-repeat: repeat;
  background-size: 400px auto;
  margin-bottom: -80px;                 /* footer margin-top: 80px と打ち消し合い → 隙間ゼロ */
}
@media screen and (max-width: 768px) {
  #page-bg-area {
    margin-bottom: -40px;
  }
}

#category-navi {
  position: relative;                   /* submenu の stacking 起点 */
  z-index: 50;                          /* ホバー時 submenu を #page-main コンテンツより前面に */
  margin-top: 30px;
}
.category-navi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}
.category-navi-list li {
  margin: 0;
  position: relative;
}
.category-navi-list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;                            /* テキスト⇔矢印の隙間 */
  background: var(--cat-color, #6b8d44);
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 20px 10px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;                   /* 28px */
  letter-spacing: 0.06em;               /* 約 1.68px */
  line-height: 1;
  transition: opacity .2s;
}
.category-navi-list li a:hover {
  opacity: .85;
}
/* >>> 現在ページのカテゴリー：テキスト右にインライン下向き三角（Figma Polygon 1: 12×10）
   ※ 直下の > a のみに限定。子孫 a だと配下サブメニューの矢印(>)まで三角に化けるため */
.category-navi-list li.is-current > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #fff;
}

/* >>> サブメニュー（ホバーでカテゴリーボタン直下に展開）
       トップページの .category-card .submenu と同等デザイン */
.category-navi-list li.has-submenu {
  position: relative;
}
.category-navi-list .submenu {
  position: absolute;
  top: 100%;                            /* ボタン直下に密着（gap を作ると hover が外れる） */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  background-color: #fff;
  border-top: 4px solid var(--cat-color, #6b8d44);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 50;
}
.category-navi-list li:hover .submenu,
.category-navi-list li:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.category-navi-list .submenu ul {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}
.category-navi-list .submenu li {
  margin: 0;
  list-style: none;
}
/* SP 限定項目（高齢者福祉トップ等）は既定で非表示。SP メディアクエリで表示 */
.category-navi-list .submenu li.sp-only {
  display: none;
}
.category-navi-list .submenu a {
  display: flex;                        /* 共通 ::after 矢印(>)を効かせるため flex 維持（block だと縦線化） */
  padding: 10px 18px;
  background: none;                     /* ボタンの色背景を打ち消し */
  color: #363636;
  text-align: left;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  font-size: 1.125rem;                  /* 18px */
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-decoration: none;
  word-break: break-word;
  transition: background-color 0.15s, color 0.15s;
}
.category-navi-list .submenu a:hover {
  background-color: #fff8e0;
  color: #147f08;
  opacity: 1;                           /* :hover で a に opacity .85 がかかるのを打ち消し */
}

@media screen and (max-width: 768px) {
  .category-navi-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }
  .category-navi-list li a {
    padding: 14px 6px;
    font-size: 1.125rem;                /* 18px on SP */
    letter-spacing: 0.04em;
  }
  /* SP（タッチ端末）：has-submenu はボタンタップで開閉（トップカードと同じ操作感）
     ※タップ → ドロップダウン展開（先頭に「高齢者福祉トップ」）。再タップ／外タップで閉じる
       PC は従来どおり（ボタン＝ページ遷移、ホバーで表示）。JS(config.js)で .is-open を制御 */
  .category-navi-list li.is-open {
    z-index: 60;                        /* 開いたボタンを前面に（後続ボタンに dropdown が隠れない） */
  }
  .category-navi-list .submenu {
    left: 0;
    transform: translateY(-6px);
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 24px);
  }
  /* SP ではホバーで開かない（タップのみ） */
  .category-navi-list li:hover .submenu,
  .category-navi-list li:focus-within .submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  }
  .category-navi-list li.is-open .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .category-navi-list .submenu li.sp-only {
    display: block;
  }
  /* 開閉インジケータ：ラベル右に白い「˅」（is-current の▼三角は has-submenu では打ち消す） */
  .category-navi-list li.has-submenu > a::after {
    content: '';
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border: 0;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.3s ease;
  }
  .category-navi-list li.has-submenu.is-open > a::after {
    transform: translateY(1px) rotate(225deg);
  }
}
@media screen and (max-width: 480px) {
  .category-navi-list li a {
    font-size: 1rem;                    /* 16px on小SP */
  }
}


/* @ 3) ページ本体：2 カラムレイアウト
   ------------------------------------------------------------------------- */
#page-main {
  position: relative;
  padding: 40px 0 80px;
  background: transparent;              /* #page-bg-area のテクスチャを透かせる */
}
.page-main-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: start;
}
#page-sidebar {
  min-width: 0;
}
#page-contents {
  min-width: 0;                         /* grid 内で長文の overflow 抑制 */
  overflow-wrap: anywhere;
}

@media screen and (max-width: 1024px) {
  .page-main-grid {
    grid-template-columns: 260px 1fr;
    gap: 40px;
  }
}
@media screen and (max-width: 768px) {
  #page-main {
    padding: 30px 0 60px;
  }
  .page-main-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  /* SP のみ：左カラム（CTA4ボタン＋ショートカット）を本文の下へ回す */
  .page-main-grid #page-contents { order: 1; }
  .page-main-grid #page-sidebar  { order: 2; }
}


/* @ 4) サイドバー CTA 4 ボタン（相談したい／利用したい／参加したい／協力したい）
   ------------------------------------------------------------------------- */
.page-cta-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-cta a {
  display: flex;
  align-items: center;
  gap: 20px;                            /* Figma: gap-[20px] */
  background: #fff;
  border: 3px solid var(--cta-color);   /* ボタン別カラー（相談=橙/利用=ティール/参加=トープ/協力=ピンク） */
  border-radius: 10px;
  padding: 0;                           /* Figma: padding なし（icon が左端） */
  text-decoration: none;
  transition: all .2s;
  overflow: hidden;                     /* 角丸内に icon を収める */
}
.page-cta a:hover {
  background: #fff8f1;
  transform: translateY(-2px);
}
.page-cta-icon {
  flex: 0 0 70px;
  display: block;
  width: 70px;                          /* Figma: size-[70px] */
  height: 70px;
}
.page-cta-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.page-cta-label {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;                   /* 28px (Figma: text-[28px]) */
  letter-spacing: 0.06em;               /* 約 1.68px */
  color: #363636;
  line-height: 1.2;
}

/* >>> サイドバーCTA サブメニュー（PC=ホバーでドロップダウン／SP=タップ開閉）
   トップページCTAと同等の導線をサイドバーにも付与。JS(config.js)で .is-open を制御 */
.page-cta { position: relative; }
.page-cta > a { position: relative; }
/* ※開閉インジケータ（▼）は非表示（クライアント要望）。ホバー/タップの開閉動作はそのまま */
.page-cta .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  min-width: 100%;
  max-width: min(360px, calc(100vw - 32px));
  margin-top: 6px;
  background: #fff;
  border-top: 4px solid var(--cta-color);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 60;
}
.page-cta:hover .submenu,
.page-cta:focus-within .submenu,
.page-cta.is-open .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.page-cta .submenu ul { margin: 0; padding: 8px 0; list-style: none; }
.page-cta .submenu li { margin: 0; padding: 0; list-style: none; }
.page-cta .submenu a {
  display: flex;                        /* 共通 ::after 矢印(>)を効かせるため flex 維持（block だと縦線化） */
  border: 0;
  background: none;
  border-radius: 0;
  padding: 9px 16px;
  overflow: visible;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;                 /* 15px */
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #363636;
  text-decoration: none;
  word-break: break-word;
  transition: background-color 0.15s, color 0.15s;
}
.page-cta .submenu a:hover {
  background: #fff8f1;
  color: #6b8d44;
  transform: none;                      /* .page-cta a:hover の translateY を打ち消し */
}

@media screen and (max-width: 768px) {
  /* SP：サブメニュー収容のため 1 カラムに切替（タップ開閉アコーディオン） */
  .page-cta-list {
    flex-direction: column;
    gap: 10px;
  }
  .page-cta {
    width: 100%;
  }
  /* SP でも PC と同じ見た目に統一（アイコン70px・余白0で左端ベタ・ラベル28px）。
     以前の縮小上書き(padding/gap/icon44/label20)は撤去。 */
  /* サブメニューはアコーディオン（静的フロー＋max-height） */
  .page-cta .submenu {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    transition: max-height 0.3s ease, margin-top 0.3s ease;
  }
  .page-cta:hover .submenu,
  .page-cta:focus-within .submenu {
    /* SP ではホバーで開かない（タップのみ）*/
    max-height: 0;
  }
  .page-cta.is-open .submenu {
    max-height: 800px;
    margin-top: 6px;
    border-top: 4px solid var(--cta-color);
  }
}


/* @ 5) サイドバー ショートカット（10 件・index.php と共通デザイン）
   ------------------------------------------------------------------------- */
.page-shortcut-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-shortcut-list li {
  margin: 0;
  padding: 0;
}
.page-shortcut-link {
  display: flex;
  align-items: center;
  gap: 10px;                            /* Figma: gap-[10px] */
  background: linear-gradient(to right, #ffe88b 0%, #fffbec 60%);
  border: 3px solid #e0b300;
  border-radius: 10px;
  padding: 20px 10px;                   /* Figma: px-[10px] py-[20px] */
  text-decoration: none;
  transition: all .2s;
}
.page-shortcut-link:hover {
  background: linear-gradient(to right, #ffe066 0%, #fff5d6 60%);
}
.page-shortcut-icon {
  flex: 0 0 24px;
  width: 24px;                          /* Figma: size-[24px] */
  height: 24px;
}
.page-shortcut-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.page-shortcut-text {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  font-size: 1.25rem;                   /* 20px (Figma: text-[20px]) */
  letter-spacing: 0.1em;                /* 2px tracking */
  color: #363636;
  line-height: 1.2;
}

@media screen and (max-width: 768px) {
  .page-shortcut-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .page-shortcut-link {
    padding: 12px 10px;
  }
  .page-shortcut-text {
    font-size: 1rem;
  }
}

/* 本文内：インデックスページの子ページリンク（care-service 等）
   既存の .page-shortcut-list（黄色カード）を本文で再利用 + 誘導用の右シェブロン */
.page-content .page-banner {
  margin: 0 0 24px;
}
.page-content .page-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.page-content .page-shortcut-list {
  padding-left: 0;                  /* .page-content ul の padding-left:1.6em を打ち消し */
  margin-left: 0;
}
.page-content .page-shortcut-list > li {
  margin: 0;
}
.page-content .page-shortcut-list > li::before {
  content: none;                    /* 「・」中点マーカーを除去 */
}
.page-content .page-shortcut-link,
.page-content .page-shortcut-link:hover {
  justify-content: space-between;   /* テキスト左・シェブロン右 */
  text-decoration: none;            /* .page-content a の下線を打ち消し */
}
.page-content .page-shortcut-link .page-shortcut-text {
  color: #363636;                   /* リンク青(#0066CC)の漏れを打ち消し */
}
.page-content .page-shortcut-link::after {
  content: "\f054";                 /* FA5 Solid chevron-right */
  font-family: 'Font Awesome 5 Solid';
  font-weight: 900;
  color: #e0b300;
  font-size: 1rem;
  flex: 0 0 auto;
}
@media screen and (max-width: 768px) {
  /* 本文内は読みやすさ優先で1カラム維持（サイドバーの2カラム化を上書き） */
  .page-content .page-shortcut-list {
    display: flex;
    grid-template-columns: none;
  }
}


/* 本文内 画像・写真列・横スクロール表（移行コンテンツ共通） */
.page-content img {
  max-width: 100%;
  height: auto;
}
.page-content .photo-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.page-content .photo-row img {
  flex: 0 1 calc(50% - 8px);
  max-width: 480px;
  min-width: 220px;
  border-radius: 8px;
  object-fit: cover;
}
/* 3カラム版（脳トレ配布物など3枚の縦長画像用）。SPでも3枚並びを維持して縮小 */
.page-content .photo-row.cols-3 img {
  flex: 1 1 calc(33.333% - 11px);
  min-width: 0;
  max-width: none;
  object-fit: contain;
}
@media screen and (max-width: 480px) {
  .page-content .photo-row.cols-3 {
    gap: 8px;
  }
  .page-content .photo-row.cols-3 img {
    flex-basis: calc(33.333% - 6px);
  }
}
.page-content .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* @ 6) 共通見出し階段：.page-h2 / .page-h3 / .page-h4
   ------------------------------------------------------------------------- */

/* >>> page-h2：ページタイトル（Figma 2024更新：ベージュ背景＋左の濃茶バー＋濃茶テキスト）
       構造：bg #ece1ce / 左に 8×60px の #4e2f11 バー / gap 20px / pr 20 py 20 pl 0
             text = Zen Maru Gothic Medium 32px / tracking 3.2px(0.1em) / #4e2f11 / leading 1
       注意：H1 はヘッダーロゴ用のため、ページタイトルは H2.page-h2 で出力。
            style.css の global h2（青背景・行間1.75 等）を !important で打ち消す */
.page-h2 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  /* 薄緑地 ＋ 右端にひまわり線画ウォーターマーク（緑トーン）。先方要望：地も緑系で文字と調和 */
  background: #e8f3da url('../img/page/h2-himawari.svg') no-repeat right center / auto 100% !important;
  color: #2e6b1f !important;            /* 濃い緑。薄緑地#e8f3da でコントラスト約5.6 */
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;                     /* Medium */
  font-size: 2rem !important;           /* 32px (global h2 1.5rem を打ち消し) */
  letter-spacing: 0.1em;                /* 3.2px */
  line-height: 1 !important;            /* leading-none */
  border-radius: 0;
  padding: 20px 20px 20px 0 !important; /* py20 / pr20 / pl0（バーは左端フラッシュ） */
  margin: 0 0 40px !important;
  border: none;
  -webkit-font-smoothing: auto;
}
/* 左のアクセントバー（8×60px）：明るい緑（既存の #147F08・#6B8D44 とは差別化） */
.page-h2::before {
  content: '';
  flex: 0 0 8px;
  width: 8px;
  height: 60px;
  background: #3fa535;
}
@media screen and (max-width: 768px) {
  .page-h2 {
    gap: 14px;
    font-size: 1.5rem !important;       /* 24px */
    padding: 16px 16px 16px 0 !important;
    margin-bottom: 30px !important;
  }
  .page-h2::before {
    height: 44px;
  }
}

/* >>> page-h3：セクション見出し（緑ドット下線）
       Figma: text-[26px] tracking-[2.6px] + #147F08 ドット 5px ピッチで横並び
       HTML階層：H1=ロゴ / H2=ページタイトル / H3=セクション見出し
       注意：style.css の global h3 に青背景白文字スタイルが付与されているため、
            ここで background-color / color / padding を明示リセットする必要がある */
.page-content h3,
.page-h3 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  font-size: 1.625rem;                  /* 26px */
  letter-spacing: 0.1em;                /* 約 2.6px */
  color: #363636 !important;            /* global h3 の白文字を打ち消し */
  line-height: 1.4;
  padding: 0 0 14px !important;         /* global h3 の上下 14px / 左 20px をリセット */
  margin: 40px 0 14px;                  /* Figma: 次セクションまで約 40px、本文まで約 13px */
  background-color: transparent !important;       /* global h3 の青背景を打ち消し */
  /* ドット下線（radial-gradient で 5px タイルに 1 ドット） */
  background-image: radial-gradient(circle, #147F08 1px, transparent 1.5px);
  background-size: 5px 3px;
  background-position: left bottom;
  background-repeat: repeat-x;
  border: none;
  position: static;
  -webkit-font-smoothing: auto;
}
.page-content > h3:first-child,
.page-content > .page-h3:first-child {
  margin-top: 0;
}
/* SP：見出し階段を維持（h2:24px > h3:22px > h4:20px）。未指定だと26pxのままで大きすぎ */
@media screen and (max-width: 768px) {
  .page-content h3,
  .page-h3 {
    font-size: 1.375rem;                /* 22px */
    margin-top: 28px;
  }
}

/* >>> info-box：黄色枠ボックス（ほのぼの交流会など）
       Figma の Frame 30：border 1px #ba8d12、padding 20px、内部に
       見出し(page-h4) + 説明文を内包する 1 ブロック */
.info-box {
  border: 1px solid #ba8d12;
  border-radius: 6px;
  padding: 20px;
  margin: 24px 0 32px;
  background: #fff;
}
.info-box > *:first-child { margin-top: 0; }
.info-box > *:last-child  { margin-bottom: 0; }

/* >>> page-h4：サブ見出し（himawari アイコン + 茶字）
       Figma の info-box 内見出し用。global h4 が青文字+padding-left:26px なので上書き */
.page-content h4,
.info-box h4,
.page-h4 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  font-size: 1.25rem;                   /* 20px (Figma: text-[20px]) */
  color: #2e6b1f !important;            /* h2 と同じ濃い緑に統一（旧 #663300 茶） */
  line-height: 1.4;
  margin: 32px 0 14px !important;      /* 見出し上に余白 */
  padding: 0 0 0 30px !important;       /* global h4 padding を打ち消し */
  background: url('../img/top/himawari-small.svg') no-repeat 0 50% / 22px 22px transparent !important;
  border: none !important;
  position: static;
  -webkit-font-smoothing: auto;
}
/* 先頭の h4／info-box見出し は上余白を詰める（前に隙間を作らない） */
.info-box h4 { margin-top: 0 !important; }
.page-content .accordion-body > h4:first-child,
.page-content > h4:first-child,
.page-content .static-section > h4:first-child { margin-top: 0 !important; }


/* @ 6.5) アコーディオン（CFS page_sections を <details>/<summary> でラップ）
       - native <details> で JS なし開閉
       - 先頭セクションは PHP 側で open 属性付き → 初期展開
       - summary 内 H3（page-h3）クリック領域 = アコーディオンの開閉トリガー
       - 右端にカテゴリーカラーの ▼/▲ インジケータ
   ------------------------------------------------------------------------- */
.page-accordion {
  display: block;
}
.accordion-section {
  border: none;
  background: transparent;
  /* details マーカー（▶︎）を非表示 */
}
.accordion-section > summary {
  display: block;
  list-style: none;                     /* デフォルトの三角アイコン削除 */
  cursor: pointer;
  position: relative;
  padding-right: 36px;                  /* インジケータ用余白 */
}
.accordion-section > summary::-webkit-details-marker {
  display: none;                        /* Safari */
}
.accordion-section > summary::marker {
  content: '';                          /* Firefox/Chromium */
}
.accordion-section > summary .page-h3 {
  margin-bottom: 14px;                  /* h3 既定 mb 維持 */
  transition: color .2s;
}
.accordion-section > summary:hover .page-h3 {
  color: #147f08 !important;
}
/* ▼ インジケータ（FA chevron-down） */
.accordion-section > summary::after {
  content: '\f078';                     /* FA5 Solid chevron-down */
  font-family: 'Font Awesome 5 Solid';
  font-weight: 900;
  position: absolute;
  right: 6px;
  top: 0;
  font-size: 1rem;
  color: #147f08;
  transition: transform .25s ease;
}
.accordion-section[open] > summary::after {
  transform: rotate(180deg);            /* 開いてる時は▲ */
  transform-origin: center;
}
.accordion-body {
  padding: 0 0 24px;                    /* 本文と次セクションの隙間 */
}


/* @ 7) ページ本文：段落／リスト／リンク／強調（Figma: text-[18px] leading-[1.6]）
   ------------------------------------------------------------------------- */
.page-content {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1.125rem;                  /* 18px */
  font-weight: 500;                     /* 20260626 (2)土肥様ご依頼：本文を少し太く（400→500 / Zen Maru Gothic Medium） */
  line-height: 1.6;                     /* Figma: leading-[1.6] */
  color: #363636;                       /* ono-syakyo/black */
}
.page-content p {
  margin: 0 0 .6em;                     /* Figma: 段落間ほぼ無し */
  font-weight: 500;                     /* 20260626 (2)：本文を少し太く */
  line-height: 1.6;
}
.page-content li {
  font-weight: 500;                     /* 20260626 (2)：本文を少し太く */
}
.page-content strong,
.page-content b {
  font-weight: 700;                     /* Bold で強調 */
}
.page-content a {
  color: #0066CC;                       /* ono-syakyo/Link Blue */
  text-decoration: underline;
}
.page-content a:hover {
  text-decoration: none;
}

/* >>> リスト：箇条書きは Figma に倣い「・」中点マーカー */
.page-content ul,
.page-content ol {
  margin: .2em 0 1em;
  padding-left: 1.6em;
  list-style: none;
}
.page-content li {
  margin: 0 0 .2em;
  line-height: 1.6;
  position: relative;
}
.page-content ul > li::before {
  content: '・';
  position: absolute;
  left: -1.2em;
  width: 1.2em;
  text-align: center;
  color: #363636;
}
.page-content ol {
  counter-reset: list-counter;
}
.page-content ol > li {
  counter-increment: list-counter;
}
.page-content ol > li::before {
  content: counter(list-counter) ".";
  position: absolute;
  left: -1.6em;
  width: 1.4em;
  text-align: right;
  color: #363636;
}

/* >>> ステップ番号（緑色強調：① ② ③） */
.page-content .step-no {
  display: inline-block;
  color: #147f08;                       /* ono-syakyo/Logo Color */
  font-weight: 700;
  margin-right: .3em;
}

/* >>> 表 */
.page-content table:not(.table_default) {
  border-collapse: collapse;
  margin: 0 0 1.5em;
  width: 100%;
}
.page-content table:not(.table_default) th,
.page-content table:not(.table_default) td {
  padding: .75em 1em;
  border: 1px solid #ddd;
  text-align: left;
}
.page-content table:not(.table_default) th {
  background: #fbf6df;
  font-weight: 500;
  white-space: nowrap;       /* 見出しの折り返し（潰れ）防止。長い場合は table-scroll で横スクロール */
  vertical-align: top;
}

/* >>> 画像（WP 標準の alignright/alignleft/aligncenter を踏襲） */
.page-content img {
  max-width: 100%;
  height: auto;
}
.page-content img.alignright,
.page-content .alignright {
  float: right;
  margin: 4px 0 16px 24px;
}
.page-content img.alignleft,
.page-content .alignleft {
  float: left;
  margin: 4px 24px 16px 0;
}
.page-content img.aligncenter,
.page-content .aligncenter {
  display: block;
  margin: 16px auto;
}
.page-content .clearfix-after {
  clear: both;
}
@media screen and (max-width: 600px) {
  .page-content img.alignright,
  .page-content img.alignleft,
  .page-content .alignright,
  .page-content .alignleft {
    float: none;
    display: block;
    margin: 16px auto;
  }
}

/* >>> PDF 一覧（カードリスト：行 = アイコン + タイトル + 日付）
       static-section 内で繰り返すこと前提。`.pdf-list > a.pdf-item` の構造 */
.pdf-list {
  list-style: none;
  margin: 20px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdf-list > br { display: none; }       /* 管理画面で改行追加されても余白を出さない */
.pdf-list .pdf-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e0d4b3;
  border-radius: 8px;
  color: #363636 !important;
  text-decoration: none !important;
  transition: all .2s;
}
.pdf-list .pdf-item:hover {
  background: #fff8e0;
  border-color: #ba8d12;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}
/* .pdf-icon span は削除済み（config.js が自動付与する a.ico-pdf::before
   のアイコン \f1c1 がカードのリーディングアイコンとして機能） */
.pdf-list .pdf-item.ico-pdf::before {
  /* 既存 a.ico-pdf::before に対する微調整：カード内では大きめに */
  font-size: 1.5rem;
  margin: 0 4px 0 0;
  color: #d33;
  flex: 0 0 auto;
}
.pdf-list .pdf-text {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
.pdf-list .pdf-title {
  font-weight: 500;
  word-break: break-word;
  line-height: 1.45;
}
.pdf-list .pdf-date {
  flex: 0 0 auto;
  color: #888;
  font-size: .875rem;
  white-space: nowrap;
}
@media screen and (max-width: 600px) {
  .pdf-list .pdf-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .pdf-list .pdf-date {
    font-size: .8rem;
  }
}

/* >>> static-section：アコーディオン外で常時表示するブロック */
.static-section {
  margin: 24px 0;
}
.static-section > *:first-child {
  margin-top: 0;
}
.static-section > *:last-child {
  margin-bottom: 0;
}

/* >>> PDF / DOC / XLS / PPT リンクのアイコンは style.css の global
       a.ico-pdf::before などで FontAwesome 4 アイコンが既に付与される
       （config.js が href 末尾を判定し ico-pdf 等のクラスを自動付与）。
       ここでは個別の上書きは行わず、global ルールに任せる。 */


/* ============================================================================
 * @ お問い合わせフォーム（MW WP Form ID:30 用デザイン）
 *   - PC : ラベル左 / 入力右の2カラム
 *   - SP : ラベル上 / 入力下の縦並び
 *   - 住所セクションは内部で更に郵便番号〜ビル名等のサブ行に展開
 * ========================================================================== */
.contact-form {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: #363636;
  width: 100%;                          /* 親要素の幅にフィット */
  max-width: 100%;                      /* max-width も解除して幅を制限しない */
  margin: 0;
}
/* wpautop 等で自動挿入される空 <p> / <br> を無効化（フォーム構造を壊さない） */
.contact-form > p:empty,
.contact-form > br {
  display: none;
}
.contact-form p {
  margin: 0;
}
.contact-form p.contact-form-note,           /* specificity を 0,2,1 にして .contact-form p に勝つ */
.contact-form .contact-form-note {
  background: #fff8e0;
  border-left: 4px solid #ba8d12;
  padding: 14px 18px;
  margin: 0 0 32px;                     /* ノート下の余白 */
  font-size: .95rem;
  border-radius: 0 6px 6px 0;
}

/* 必須バッジ */
.contact-form-req {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #d33;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 3px;
  vertical-align: middle;
  line-height: 1.4;
}

/* 各行：SP は block 縦並び、PC（600px+）で flex 2カラム
   ※ grid 1fr が予期せず縮むケースがあるため flex + min-width: 0 を採用 */
.contact-form-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.contact-form-row {
  display: block;                       /* SP: block で完全縦並び */
  width: 100%;
}
.contact-form-label {
  display: block;
  font-weight: 500;
  color: #363636;
  line-height: 1.4;
  margin: 0 0 8px;                      /* 入力との間隔 */
  padding: 0;
}
.contact-form-label small {
  font-weight: 400;
  font-size: .85em;
  color: #888;
}
.contact-form-input {
  display: block;
  width: 100%;
  min-width: 0;                         /* 子の min-content 制約を解除 */
}

@media screen and (min-width: 600px) {
  .contact-form-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  .contact-form-label {
    flex: 0 0 200px;                    /* ラベル列：200px 固定 */
    width: 200px;
    margin: 0;
    padding-top: 8px;                   /* 入力の中央くらいに置く */
  }
  .contact-form-input {
    flex: 1 1 auto;                     /* 入力列：残り全部使う */
    min-width: 0;                       /* 子の min-content 制約を解除（重要） */
  }
}

/* インプット共通：全 input/textarea を親 (.contact-form-input) の幅にフィット
   ※ MWWPForm が span でラップする可能性に備え、descendant セレクタで対応
   ※ MWWPForm の size 属性（size="20" 等）で固定幅にならないよう !important で 100% を強制
   ※ -webkit-appearance: none でモバイル Safari の独自レンダリングも回避 */
.contact-form .contact-form-input input[type="text"],
.contact-form .contact-form-input input[type="tel"],
.contact-form .contact-form-input input[type="email"],
.contact-form .contact-form-input textarea,
.contact-form .contact-form-sublabel-input input[type="text"] {
  width: 100% !important;
  display: block !important;
}
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
  box-sizing: border-box;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #d0c8a8;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: #363636;
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #bbb;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #147f08;
  box-shadow: 0 0 0 3px rgba(20,127,8,.15);
}
.contact-form textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.7;
}

/* 住所セクション */
.contact-form-address {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-form-address-item {
  /* SP デフォは block（縦並び） */
  display: block;
  padding: 0;
  margin: 0;
}
.contact-form-address-item > .contact-form-sublabel {
  margin: 0 0 4px;
  padding: 0;
}
.contact-form-address-item > .contact-form-sublabel-input {
  margin: 0;
  padding: 0;
}
.contact-form-sublabel {
  display: block;                       /* デフォは block: SPで縦並びにする */
  text-align: left;                     /* 親で text-align: center が来ても左寄せ */
  font-size: .85rem;
  color: #777;
  font-weight: 400;
}
/* 郵便番号 (zip) / 電話番号 (tel) は MWWPForm が <span class="mwform-zip-field">〒<input>-<input></span>
   または <span class="mwform-tel-field"><input>-<input>-<input></span> で出力 */
.contact-form .mwform-zip-field,
.contact-form .mwform-tel-field {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* MWWPForm が入力間に出力する <br> が flex 内で残るとハイフンが下に落ちる */
.contact-form .mwform-zip-field br,
.contact-form .mwform-tel-field br {
  display: none;
}
.contact-form .mwform-zip-field input[type="text"],
.contact-form .mwform-tel-field input[type="text"] {
  width: 90px !important;
  display: inline-block !important;
  vertical-align: middle;
  margin: 0;
  flex: 0 0 auto;
}
/* 都道府県は狭く */
.contact-form input[name="都道府県[data]"],
.contact-form input.p-region {
  max-width: 200px;
}

@media screen and (min-width: 600px) {
  .contact-form-address-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    align-items: center;
  }
  .contact-form-sublabel {
    text-align: right;
  }
  .contact-form-address-item > .contact-form-sublabel {
    margin: 0;                          /* PC: gap が間を埋めるので reset */
  }
}

/* エラーメッセージ（mw_wp_form 自動出力） */
.contact-form .error {
  display: block;
  margin-top: 6px;
  color: #d33;
  font-size: .85rem;
}

/* 送信／戻るボタン */
.contact-form-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.contact-form-action {
  display: inline-block;
}
.contact-form input[type="submit"],
.contact-form input[type="button"],
.contact-form button {
  min-width: 200px;
  padding: 14px 32px;
  border-radius: 30px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .2s;
  -webkit-appearance: none;
  appearance: none;
}
/* MWWPForm の送信系ボタン：submitConfirm（入力画面）と submit（完了送信）
   両方で同じ緑3D風スタイルを適用 */
.contact-form input[type="submit"][name="submitConfirm"],
.contact-form input[type="submit"][name="submit"],
.contact-form input[name="submitConfirm"],
.contact-form input[name="submit"] {
  background: #147f08 !important;
  border: 2px solid #147f08 !important;
  color: #fff !important;
  box-shadow: 0 4px 0 #1b5415 !important;
  border-radius: 30px !important;
  padding: 14px 32px !important;
  min-width: 200px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form input[name="submitConfirm"]:hover,
.contact-form input[name="submitComplete"]:hover {
  background: #1aa00b;
  border-color: #1aa00b;
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #1b5415;
}
.contact-form input[name="submitConfirm"]:active,
.contact-form input[name="submitComplete"]:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1b5415;
}
.contact-form input[name="submitBack"] {
  background: #fff;
  border: 2px solid #d0c8a8;
  color: #363636;
}
.contact-form input[name="submitBack"]:hover {
  background: #f9f6e8;
  border-color: #ba8d12;
}

@media screen and (max-width: 480px) {
  .contact-form-actions {
    flex-direction: column-reverse;
    gap: 12px;
  }
  .contact-form input[type="submit"],
  .contact-form input[type="button"],
  .contact-form button {
    width: 100%;
  }
}

/* @ コピーライト：SPでは「© YYYY 社会福祉法人 小野市社会福祉協議会」に短縮（Copyright と All Rights Reserved. を省略） */
@media screen and (max-width: 768px) {
  .copyright .cr-full { display: none; }
}

/* ============================================================
   地域包括支援センターとは（147）導入
   ============================================================ */
/* このような時に：info-box 内にリスト＋イラスト（右下） */
.houkatsu-riyou{display:flex;gap:20px;align-items:flex-end}
.houkatsu-riyou ul{flex:1 1 auto;margin:0}
.houkatsu-riyou .riyou-figure{flex:0 0 150px;margin:0;line-height:0}
.houkatsu-riyou .riyou-img{width:150px;height:auto;display:block}
.houkatsu-lead{text-align:center;font-weight:700;color:#2e6b1f;margin:0 0 8px}
/* 4分類：既存 .col2 内の info-box を余白0＆均等高さに */
.flex_cols .col2 > .info-box{margin:0;height:100%}
.houkatsu-foot{text-align:center;font-weight:700;color:#2e6b1f;margin:4px 0 0}
/* 4分類ボックス内：下層リンク（落ち着いた白系ボタン） */
.box-link{margin:10px 0 0}
.box-link + .box-link{margin-top:8px}
.box-link a{
  display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  background:#f5f8f2;color:#363636;border:1px solid #cfe3c8;
  font-weight:700;font-size:.9rem;line-height:1.35;
  text-decoration:none;padding:10px 14px;border-radius:8px;
  transition:background .2s,border-color .2s;
}
.box-link a::after{content:"";flex:0 0 auto;margin-left:auto;width:6px;height:6px;border-top:2px solid #2e6b1f;border-right:2px solid #2e6b1f;transform:rotate(45deg)}
.box-link a:hover{background:#eaf2e3;border-color:#2e6b1f}
@media screen and (max-width:480px){
  .houkatsu-riyou{flex-direction:column;align-items:center;gap:10px}
  .houkatsu-riyou .riyou-figure{flex:0 0 auto}
  .houkatsu-riyou .riyou-img{width:130px;margin:0 auto}
}

/* お知らせ詳細：バックナンバー（同カテゴリー・過去6か月） */
.backnumber{margin:36px 0 0;padding-top:20px;border-top:2px solid #e0e0e0}
.backnumber-title{font-weight:700;color:#2e6b1f;margin:0 0 12px;font-size:1.1rem}
.backnumber-list{list-style:none;margin:0;padding:0}
.backnumber-list li{display:flex;gap:14px;align-items:baseline;padding:9px 2px;border-bottom:1px dashed #ddd}
.backnumber-list time{flex:0 0 auto;color:#666;font-size:.9em}

/* 採用について：項目（th）列を広げて折り返し防止 */
.page-content table.recruit-table th{min-width:8em;}

/* 記事詳細：前後ナビ（ベーステーマの青箱＋FontAwesomeを上書き、サイト調に） */
.page-content .pagenavi{display:flex;justify-content:space-between;gap:12px;list-style:none;margin:32px 0 0;padding:24px 0 0;border-top:1px solid #e0e0e0;font-family:inherit;overflow:visible;}
.page-content .pagenavi li{margin:0;padding:0;list-style:none;float:none;}
.page-content .pagenavi li.pagenavi-next{margin-left:auto;}
.page-content .pagenavi a{display:inline-flex;align-items:center;gap:8px;background:#f5f8f2;color:#363636;border:1px solid #cfe3c8;padding:9px 18px;border-radius:8px;font-weight:700;text-decoration:none;transition:background .2s,border-color .2s;}
.page-content .pagenavi a:hover{background:#eaf2e3;border-color:#2e6b1f;opacity:1;}
.page-content .pagenavi-prev a::before{content:"";display:inline-block;width:6px;height:6px;border-left:2px solid #2e6b1f;border-bottom:2px solid #2e6b1f;transform:rotate(45deg);}
.page-content .pagenavi-next a::after{content:"";display:inline-block;width:6px;height:6px;border-top:2px solid #2e6b1f;border-right:2px solid #2e6b1f;transform:rotate(45deg);}
/* 前後ナビ：page-content ol のカウンター番号(1. 2.)を打ち消す */
.page-content .pagenavi > li::before{content:none;}

/* お知らせ一覧（page-archive）：トップのお知らせ(.topnews)と同じ見た目を #page-contents にも適用 */
#page-contents .topnews-list {
  display: flex;
  flex-direction: column;
  gap: 3px;                            /* Figma 3px */
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
#page-contents .topnews-item {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px dashed var(--c-border-news);   /* #BA8D12 */
}

#page-contents .topnews-link {
  display: flex;
  align-items: center;
  gap: 14px;                           /* Figma 14（data 124.5 → text 140.5 = 16） */
  padding: 12px 16px;                  /* Figma 12 16 */
  text-decoration: none;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
#page-contents .topnews-link:hover {
  background-color: rgba(255, 251, 236, 0.5);
  opacity: 0.85;
}
#page-contents .topnews-link.topnews-link--nolink {
  cursor: default;
}
#page-contents .topnews-link.topnews-link--nolink:hover {
  background-color: transparent;
  opacity: 1;
}

#page-contents .topnews-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  /* Figma data 幅 124.5px ≒ 7em (date 18px 時)。em ベースにすることで
     文字拡大時も date 表示分の幅が連動して広がり、title への貫通を防ぐ */
  min-width: 7em;
}
/* 三角矢印（news-arrow.svg は上向き）→ 90度回転で右向きに */
#page-contents .topnews-arrow {
  display: inline-block;
  width: 11px;
  height: 10px;
  background: url('../img/top/news-arrow.svg') no-repeat center / contain;
  transform: rotate(90deg);
  flex-shrink: 0;
}
#page-contents .topnews-date {
  font-family: var(--ff-main);
  font-size: 1.125rem;                  /* 18px相当 → 大ボタンで連動 */
  font-weight: 500;
  color: #000;
  line-height: 1.6;
  white-space: nowrap;
}

#page-contents .topnews-text {
  font-family: var(--ff-main);
  font-size: 1.125rem;                  /* 18px相当 → 大ボタンで連動 */
  font-weight: 500;
  color: var(--c-text-link);            /* #0066CC */
  text-decoration: underline;
  text-decoration-color: var(--c-text-link);
  text-underline-offset: 2px;
  line-height: 1.6;
  word-break: break-word;
}
#page-contents .topnews-link--nolink .topnews-text {
  color: var(--c-text);
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  #page-contents .topnews-link {
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 12px;
  }
  #page-contents .topnews-meta {
    width: auto;
  }
  #page-contents .topnews-date,
  #page-contents .topnews-text {
    font-size: 16px;
  }
}

#page-contents .topnews-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--c-text);
  font-size: 16px;
}


/* バックナンバー(.page-content内)の topnews-item に ・ を出さない */
.page-content .topnews-item::before, #page-contents .topnews-item::before{content:none;}

/* お知らせ（topnews）：直リンクファイルのアイコンを左端でなくタイトル直前に表示 */
#news-area .topnews-link[class*="ico-"]::before,
#page-contents .topnews-link[class*="ico-"]::before{content:none;margin:0;}
#news-area .topnews-link[class*="ico-"] .topnews-text::before,
#page-contents .topnews-link[class*="ico-"] .topnews-text::before{
  font-family:'FontAwesome';font-weight:normal;margin-right:6px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
#news-area .topnews-link.ico-pdf .topnews-text::before,
#page-contents .topnews-link.ico-pdf .topnews-text::before{content:'\f1c1';color:#d96464;}
#news-area .topnews-link.ico-doc .topnews-text::before,
#page-contents .topnews-link.ico-doc .topnews-text::before{content:'\f1c2';color:#3a59a2;}
#news-area .topnews-link.ico-xls .topnews-text::before,
#page-contents .topnews-link.ico-xls .topnews-text::before{content:'\f1c3';color:#498d81;}

/* topnews：ファイルアイコンとNEWバッジに親リンクの青下線を継承させない */
#news-area .topnews-link[class*="ico-"] .topnews-text::before,
#page-contents .topnews-link[class*="ico-"] .topnews-text::before{display:inline-block;text-decoration:none;vertical-align:baseline;}
#news-area .topnews-text .newpost,
#page-contents .topnews-text .newpost{display:inline-block;text-decoration:none;}

/* ページ送り（wp-pagenavi 数字を）：サイト調（緑系）に上書き */
.wp-pagenavi{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;clear:both;margin:36px 0 0;}
.wp-pagenavi span,
.wp-pagenavi a{
  margin:0;min-width:40px;padding:8px 12px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:#2e6b1f;border:1px solid #cfe3c8;border-radius:8px;font-weight:700;line-height:1;text-decoration:none;
  transition:background .2s,border-color .2s,color .2s;
}
.wp-pagenavi a:hover{background:#eaf2e3;border-color:#2e6b1f;color:#2e6b1f;opacity:1;text-decoration:none;}
.wp-pagenavi span.current{background:var(--c-cta,#147f08);border-color:var(--c-cta,#147f08);color:#fff;}
.wp-pagenavi .pages{background:transparent;border:none;color:#666;font-weight:500;}
.wp-pagenavi .extend{background:transparent;border:none;color:#999;min-width:auto;padding:8px 4px;}

/* グローバルナビ（PC）：子メニュー(.sub-menu) のホバー・ドロップダウン */
#header-gnavi > li.menu-item-has-children > a .menu_title::after{
  content:'';display:inline-block;margin-left:6px;vertical-align:middle;
  width:0;height:0;border-style:solid;border-width:5px 4px 0 4px;
  border-color:var(--c-logo-green) transparent transparent transparent;
}
#header-gnavi > li > .sub-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  min-width:240px;margin:0;padding:10px 0;list-style:none;
  background:#fff;border-radius:0 0 10px 10px;box-shadow:0 4px 12px rgba(0,0,0,.1);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:100;
}
#header-gnavi > li:hover > .sub-menu,
#header-gnavi > li:focus-within > .sub-menu{opacity:1;visibility:visible;}
#header-gnavi .sub-menu li{margin:0;list-style:none;border-bottom:1px dotted var(--c-gray);}
#header-gnavi .sub-menu li:last-child{border-bottom:none;}
#header-gnavi .sub-menu li a{
  display:block;padding:10px 16px 10px 24px;position:relative;
  font-family:var(--ff-main);font-size:16px;color:var(--c-text);text-decoration:none;
  transition:background-color .2s,color .2s;
}
#header-gnavi .sub-menu li a::before{
  content:'';position:absolute;top:50%;left:8px;transform:translateY(-50%);
  width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;
  border-color:transparent transparent transparent var(--c-logo-green);
}
#header-gnavi .sub-menu li a:hover{background-color:var(--c-sub1-light);color:var(--c-logo-green);}
#header-gnavi .sub-menu .menu_title{display:inline-block;}

/* CTAサブメニュー：SPもオーバーレイ表示にして開閉時の余白（グリッド押し出し）を解消
   ※category-card と同じく absolute オーバーレイ。2列レイアウトを保ったまま下のコンテンツを押さない */
@media (hover: none), (max-width: 768px) {
  .cta-card { position: relative; }
  .cta-card.is-open { z-index: 40; }
  .cta-card .submenu {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: none;
    margin-top: 8px;
    overflow: visible;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  }
  .cta-card.is-open .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    border-top: 4px solid var(--cta-color);
  }
}

/* CTA：狭幅ではホバー表示を無効化し、クリック(.is-open)だけで開閉（2回目で閉じる）
   ※is-open を後に置くことで「開いた状態＋ホバー中」でも表示を維持 */
@media (hover: none), (max-width: 768px) {
  .cta-card:hover .submenu,
  .cta-card:focus-within .submenu { opacity: 0; visibility: hidden; transform: translateY(-4px); }
  .cta-card.is-open .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ============================================================
   ハンバーガー ドロワー（SP）：サイト調・アニメーション無し
   ※ <details> でアコーディオン（JS不要）。#header-gnavi-sp の既定装飾を上書き
   ============================================================ */
#header-gnavi-sp .drawer{ padding: 0 16px 10px; }

/* 既定(#header-gnavi-sp ul li a)の点線枠・矢印・パディングを打ち消す */
#header-gnavi-sp .drawer ul{ margin:0; padding:0; list-style:none; }
#header-gnavi-sp .drawer li{ margin:0; list-style:none; border:0; }
#header-gnavi-sp .drawer a::before{ content:none !important; }
#header-gnavi-sp .drawer a:hover{ background:transparent; }

/* 検索 */
.drawer-search{ display:flex; gap:8px; margin:0 0 22px; }
.drawer-search input[type="search"]{ flex:1 1 auto; min-width:0; box-sizing:border-box; border:1px solid #cfe3c8; border-radius:10px; padding:13px 14px; font-size:16px; background:#f7faf4; color:var(--c-text); }
.drawer-search-btn{ flex:0 0 auto; border:0; background:var(--c-cta,#147f08); border-radius:10px; padding:0 16px; display:flex; align-items:center; cursor:pointer; }
.drawer-search-btn img{ display:block; filter:brightness(0) invert(1); }

/* セクション見出し */
.drawer-sec{ margin:0 0 20px; }
.drawer-head{ margin:0 0 6px; padding:2px 0 2px 10px; font-size:15px; font-weight:700; letter-spacing:.04em; color:var(--c-logo-green,#147f08); border-left:4px solid var(--c-logo-green,#147f08); }

/* リスト共通 */
#header-gnavi-sp .drawer-list{ border-top:1px solid #ececec; }
#header-gnavi-sp .drawer-list > li{ border-bottom:1px solid #ececec; }

/* 通常リンク */
#header-gnavi-sp .drawer-link{ display:block; padding:15px 8px; font-size:17px; line-height:1.4; color:var(--c-text); text-decoration:none; }
#header-gnavi-sp .drawer-link:active{ background:var(--c-sub1-light); }

/* アコーディオン（details/summary） */
#header-gnavi-sp .drawer-acc > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 8px; font-size:17px; line-height:1.4; color:var(--c-text); }
#header-gnavi-sp .drawer-acc > summary::-webkit-details-marker{ display:none; }
#header-gnavi-sp .drawer-acc > summary::after{ content:''; flex:0 0 auto; width:9px; height:9px; border-right:2.5px solid var(--c-logo-green,#147f08); border-bottom:2.5px solid var(--c-logo-green,#147f08); transform:rotate(45deg) translate(-2px,-2px); }
#header-gnavi-sp .drawer-acc[open] > summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }

/* サブメニュー */
#header-gnavi-sp .drawer-sub{ background:#f7faf4; padding:4px 0 10px; }
#header-gnavi-sp .drawer-sub li + li{ border-top:1px solid #e8efe2; }
#header-gnavi-sp .drawer-sub a{ display:block; padding:12px 8px 12px 22px; font-size:15px; line-height:1.5; color:var(--c-text); text-decoration:none; }
#header-gnavi-sp .drawer-sub a:active{ background:#eaf2e3; color:var(--c-logo-green,#147f08); }

/* その他（ユーティリティ）：小さめ・控えめ */
#header-gnavi-sp .drawer-list--util{ border-top:0; }
#header-gnavi-sp .drawer-list--util > li{ border-bottom:0; }
#header-gnavi-sp .drawer-list--util .drawer-link{ padding:9px 8px; font-size:14px; color:#666; }

/* 善意銀行：ご寄贈のご報告（写真＋キャプションのレスポンシブグリッド） */
.zengin-reports{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin:6px 0 0;}
.zengin-item{border:1px solid #e3e3e3;border-radius:10px;padding:12px;background:#fff;display:flex;flex-direction:column;}
.zengin-item--wide{grid-column:1/-1;}
.zengin-photos{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.zengin-photos img{display:block;width:100%;height:auto;border-radius:6px;}
.zengin-photos.two img{width:calc(50% - 3px);}
.zengin-item--wide .zengin-photos img{width:calc(33.333% - 4px);}
.zengin-cap{margin:10px 0 0;font-size:.92rem;line-height:1.6;color:#363636;}
@media screen and (max-width:480px){
  .zengin-reports{grid-template-columns:1fr 1fr;gap:12px;}
  .zengin-item--wide .zengin-photos img{width:calc(50% - 3px);}
}

/* 善意銀行 ご寄贈のご報告：テーブル版（社協が行追加で更新しやすい） */
.page-content table.zengin-table td.zengin-pic{width:240px;text-align:center;vertical-align:middle;}
.page-content table.zengin-table .zengin-pic img{display:inline-block;width:auto;max-width:130px;height:auto;border-radius:4px;margin:4px;vertical-align:middle;}
.page-content table.zengin-table td{vertical-align:middle;}
@media screen and (max-width:480px){
  .page-content table.zengin-table td.zengin-pic{width:100% !important;}
  .page-content table.zengin-table .zengin-pic img{max-width:46%;}
}

/* 善意銀行 報告画像：サイズ統一＋フルサイズ投稿対策（実寸に関わらずCSSで強制） */
.page-content table.zengin-table .zengin-pic img{
  width:190px !important; height:140px !important; max-width:190px !important;
  object-fit:cover; display:inline-block; border-radius:4px; margin:4px; vertical-align:middle;
}
@media screen and (max-width:480px){
  .page-content table.zengin-table .zengin-pic img{ width:48% !important; height:130px !important; max-width:48% !important; }
}

.page-content table.zengin-table th{white-space:normal;width:13em;}

/* 赤い羽根共同募金：リード（現行サイト風 中央寄せボックス） */
.akaihane-lead{border:1px solid #ddd;border-radius:6px;padding:24px 20px;margin:0 0 24px;text-align:center;background:#fff;}
.akaihane-lead .lead-main{color:#d7000f;font-weight:700;font-size:1.4rem;line-height:1.7;margin:0 0 16px;}
.akaihane-lead .lead-sub{font-weight:700;line-height:1.9;margin:0;}
@media screen and (max-width:480px){ .akaihane-lead .lead-main{font-size:1.15rem;} }

/* 募金百貨店 */
.page-content .bokin-banner{text-align:center;margin:0 0 16px;}
.page-content .bokin-banner img{max-width:520px;}
.page-content .bokin-report{margin:0 0 12px;}
.page-content .bokin-report img{max-width:480px;}

/* ボランティア講座 写真 */
.page-content .vol-photo{margin:8px 0 6px;}
.page-content .vol-photo img{max-width:340px;border-radius:6px;}

/* ===== 2026-06-25 トップCTAボタン：高さを抑える＋PC/タッチ含め改行させない ===== */
#cta-buttons .cta-link {
  padding: 12px 16px;          /* 上下17→12でボタンを低く */
  gap: 10px;
}
#cta-buttons .cta-icon,
#cta-buttons .cta-icon img {
  width: 48px;                 /* アイコン70→48で全体を低く */
  height: 48px;
}
#cta-buttons .cta-label {
  white-space: nowrap;         /* 改行させない（最重要） */
  overflow-wrap: normal;       /* anywhere の文字途中改行を解除 */
  letter-spacing: 0.02em;      /* 0.06→0.02で詰める */
  font-size: clamp(16px, 1.5vw, 24px);  /* 下限を下げて中間幅でも1行に収める */
}
/* タッチ端末で出る開閉インジケータ(▼)分の右余白を縮めて折返し防止 */
@media (hover: none), (max-width: 768px) {
  #cta-buttons .cta-card > .cta-link { padding-right: 28px; }
}
/* タブレット2列・スマホ1列は幅に余裕があるので文字を戻す */
@media screen and (max-width: 768px) {
  #cta-buttons .cta-label { font-size: 22px; }
}
@media screen and (max-width: 480px) {
  #cta-buttons .cta-icon,
  #cta-buttons .cta-icon img { width: 52px; height: 52px; }
  #cta-buttons .cta-label { font-size: 22px; }
}

/* ===== 2026-06-25 サブメニュー：三角カレット撤去＋最上部に親色の横線（旧デザインへ復元） ===== */
/* 三角カレットを撤去（透明ホバーブリッジ ::before は残す＝ホバー欠け防止） */
.category-card .submenu::after,
.cta-card .submenu::after { display: none; }

/* サブメニュー最上部に、該当する親と同じ色の横線 */
.cta-card .submenu { border-top: 4px solid var(--cta-color); }
.category-card .submenu { border-top: 4px solid var(--c-sub1); }
.cat-koureisya .submenu { border-top-color: var(--c-cat-koureisya); }
.cat-syogai    .submenu { border-top-color: var(--c-cat-syogai); }
.cat-kosodate  .submenu { border-top-color: var(--c-cat-kosodate); }
.cat-chiiki    .submenu { border-top-color: var(--c-cat-chiiki); }
.cat-volunteer .submenu { border-top-color: var(--c-cat-volunteer); }

/* ===== 2026-06-25 サブメニュー：上部の色帯をフラット化（上の角丸を0に） ===== */
.cta-card .submenu,
.category-card .submenu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ===== 2026-06-25 サブメニュー：ホバー時の文字色を親色に合わせる（緑固定→親色） ===== */
/* CTA：項目ホバー文字＋矢印を親ボタン色に */
.cta-card .submenu a:hover { color: var(--cta-color); }
.cta-card .submenu a:hover::after { border-color: var(--cta-color); }

/* カテゴリー：項目ホバー文字＋矢印を各カテゴリ色に */
.category-card .submenu a:hover { color: var(--c-sub1); }
.category-card .submenu a:hover::after { border-color: var(--c-sub1); }
.cat-koureisya .submenu a:hover { color: var(--c-cat-koureisya); }
.cat-koureisya .submenu a:hover::after { border-color: var(--c-cat-koureisya); }
.cat-syogai    .submenu a:hover { color: var(--c-cat-syogai); }
.cat-syogai    .submenu a:hover::after { border-color: var(--c-cat-syogai); }
.cat-kosodate  .submenu a:hover { color: var(--c-cat-kosodate); }
.cat-kosodate  .submenu a:hover::after { border-color: var(--c-cat-kosodate); }
.cat-chiiki    .submenu a:hover { color: var(--c-cat-chiiki); }
.cat-chiiki    .submenu a:hover::after { border-color: var(--c-cat-chiiki); }
.cat-volunteer .submenu a:hover { color: var(--c-cat-volunteer); }
.cat-volunteer .submenu a:hover::after { border-color: var(--c-cat-volunteer); }

/* ===== 2026-06-25 カテゴリーサブメニューをPCで左揃えに（中央寄せ→親の左端そろえ） ===== */
@media screen and (min-width: 769px) {
  .category-card .submenu { left: 0; transform: translateY(-4px); }
  .category-card:hover .submenu,
  .category-card:focus-within .submenu { transform: translateY(0); }
}

/* ===== 2026-06-25 main-content-wave：フラット白→テクスチャ入り波形（Figma 289:314 準拠） =====
   テクスチャ(bg-onosyakyo-zentai2.png)を敷き、上端を波形パスでmask。
   background-position:left bottom で帯下端=本体上端のタイル境界を一致させ継ぎ目を消す。
   ※要素は index.php で <svg> → <div> に変更済（既存の位置/サイズ/z-index指定はそのまま流用）*/
.main-content-wave {
  background-color: #ffffff;
  background-image: url('../img/top/bg-onosyakyo-zentai2.png');
  background-repeat: repeat;
  background-size: 400px auto;
  background-position: left bottom;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20135%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2033.13%20C%20152.5%208.9%2C%20207.655%201.63%2C%20402.72%200.05%20C%20646.55%20-1.92%2C%20761.47%2051.93%2C%20971.324%2097.89%20C%201139.21%20134.65%2C%201355.5%2045.99%2C%201440%2033.13%20V%20135%20H%200%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20135%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2033.13%20C%20152.5%208.9%2C%20207.655%201.63%2C%20402.72%200.05%20C%20646.55%20-1.92%2C%20761.47%2051.93%2C%20971.324%2097.89%20C%201139.21%20134.65%2C%201355.5%2045.99%2C%201440%2033.13%20V%20135%20H%200%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left top;
          mask-position: left top;
}

/* ===== 2026-06-25 トップ・カテゴリーカード：スマホ(≤480)を3列×2行・縮小（修正⑤） =====
   既存の ≤480 「2列」指定を上書き。カード内部は%/aspect-ratioで自動縮小、
   ラベルのみ vw で再調整して3列でも1行に収める。PC/タブレットは無変更。 */
@media screen and (max-width: 480px) {
  .category-list {
    gap: 10px 8px;
  }
  .category-card {
    flex: 0 0 calc((100% - 8px * 2) / 3);   /* 3列（5枚→3+2の2行） */
    max-width: 120px;
  }
  /* イラスト・フレームは%基準で自動縮小。ラベル文字だけ vw で縮める */
  .card-label {
    font-size: clamp(10px, 3.4vw, 15px);
    letter-spacing: 0.02em;
    padding: 0 4%;
  }
}

/* ===== 2026-06-25 MVキャッチコピー：SPで「可視MV域」の中央へ（カード食い込み分を考慮） =====
   hero枠の50%だと下部がカード＆波形に覆われ中央に見えない/カードと近接するため、
   可視域(カード食い込み上端まで)の中央＝約32%へ引き上げ。transformの縦中央寄せは流用。
   ※カードは動かさない。PCは無変更。 */
@media screen and (max-width: 768px) {
  #hero .hero-catchcopy { top: 32%; }
}
@media screen and (max-width: 480px) {
  #hero .hero-catchcopy { top: 32%; }
}

/* ===== 2026-06-25 下層ページ サイドバーCTA(.page-cta) ホバー文字色をアイコン色(親色)に ===== */
/* 第2階層以降の「相談/利用/参加/協力したい」ホバーメニュー文字＋矢印を緑固定→各CTA色へ */
.page-cta .submenu a:hover { color: var(--cta-color); }
.page-cta .submenu a:hover::after { border-color: var(--cta-color); }

/* ===== 2026-06-25 (2) 下層サイドバーCTA(.page-cta)をTopページCTAと同サイズに ===== */
/* Top(.cta-link/.cta-icon/.cta-label)に合わせ：アイコン48px・padding12/16・gap10・ラベル24px */
.page-cta a { gap: 10px; padding: 12px 16px; }
.page-cta-icon { flex: 0 0 48px; width: 48px; height: 48px; }
.page-cta-label {
  font-size: clamp(16px, 1.5vw, 24px);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ===== 2026-06-25 横スクロール対策：右端カードのホバーサブメニュー(絶対配置)を左向きに開く ===== */
/* 右端カードで left:0 の絶対配置サブメニューが画面右にはみ出し、横スクロールが出る問題の対策。
   PC(≧769px=サブメニューが絶対配置のとき)だけ、右側2枚のサブメニューを right:0 にして左へ展開。 */
@media screen and (min-width: 769px) {
  .category-card:nth-last-child(-n+2) > .submenu { left: auto; right: 0; }
  .cta-card:nth-last-child(-n+2) > .submenu { left: auto; right: 0; }
}

/* ===== 2026-06-25 横スクロール対策（本命）：SPでカテゴリーサブメニューの絶対配置オーバーレイが
   隠れたまま画面右へはみ出し横スクロールを作る問題。閉時 display:none で領域を作らせない ===== */
@media (hover: none), (max-width: 768px) {
  .category-card .submenu { display: none; }
  .category-card.is-open .submenu { display: block; }
  /* 開いた時のはみ出し防止：3列の右列・最終カードは左向きに開く */
  .category-card:nth-child(3n) > .submenu,
  .category-card:last-child > .submenu { left: auto; right: 0; }
}

/* ===== 2026-06-25 SPカテゴリーサブメニュー：絶対配置オーバーレイ→静的アコーディオンへ
   （カード位置に依らず横はみ出しを完全に解消。カード直下に開き、幅に応じて折返し） ===== */
@media (hover: none), (max-width: 768px) {
  .category-list { align-items: flex-start; }   /* 開いた時に他カードが上にずれないように */
  .category-card .submenu {
    display: block;
    position: static;
    left: auto; right: auto;
    width: auto; min-width: 0; max-width: none;
    max-height: 0; overflow: hidden;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none;
    border-radius: 0 0 10px 10px;
    transition: max-height .3s ease;
  }
  .category-card:hover > .submenu,
  .category-card:focus-within > .submenu { max-height: 0; }   /* SPはホバーで開かない */
  .category-card.is-open > .submenu { max-height: 1500px; }
}

/* ===== 2026-06-25 SPカテゴリーサブメニュー：広いオーバーレイに戻す＋JSで左位置をビューポート内に補正
   （静的アコーディオンの縦伸び解消。位置補正は config.js が行う） ===== */
@media (hover: none), (max-width: 768px) {
  .category-list { align-items: flex-end; }
  .category-card { position: relative; }
  .category-card > .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    width: min(300px, calc(100vw - 24px));
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: none;
    z-index: 50;
  }
  .category-card.is-open > .submenu { display: block; }
}

/* ===== 2026-06-25 サイドバー：項目を1行表示、（各種様式）等の括弧内を小さく ===== */
#shortcut-sidebar .shortcut-text,
.page-shortcut-text { white-space: nowrap; }
.shortcut-sub { font-size: 0.78em; }

/* ===== 2026-06-26 (4)土肥様ご依頼：スマホ表示でCTA（相談/利用/参加/協力）ボタンの高さを
   ショートカット（地域福祉課・介護サービス課 等＝.shortcut-link min-height:64px）と揃える ===== */
@media screen and (max-width: 600px) {
  /* ≤600px は1カラム全幅に（481〜511 の横幅不足を解消） */
  .cta-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* 高さは height:64px(border-box) で固定。右パディングは開閉インジケータ(▼)用に確保 */
  .cta-card > .cta-link {
    height: 64px;
    min-height: 0;
    padding: 6px 38px 6px 16px;   /* アイコン周りの余白感を高さ調整前に近づける */
    gap: 12px;
  }
  /* 64pxに収まる範囲でアイコンを大きめに（高さ調整前の見え方に寄せる） */
  .cta-icon,
  .cta-icon img {
    width: 46px;
    height: 46px;
  }

  /* 下層ページ サイドバーCTA（相談/利用/参加/協力）も同じ64px高さ・アイコン46pxに揃える */
  .page-cta > a {
    box-sizing: border-box;
    height: 64px;
    padding: 6px 16px;
    gap: 12px;
  }
  .page-cta-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
  }
}

/* ===== 2026-06-26 (3)補足：下層カテゴリーナビ 両端サブメニューのはみ出し対策 =====
   PC（5列・ホバー）：先頭=左揃え／末尾=右揃え（769px以上のみ） */
@media screen and (min-width: 769px) {
  .category-navi-list li:first-child .submenu {
    left: 0;
    right: auto;
    transform: translateX(0) translateY(-6px);
  }
  .category-navi-list li:first-child:hover .submenu,
  .category-navi-list li:first-child:focus-within .submenu {
    transform: translateX(0) translateY(0);
  }
  .category-navi-list li:last-child .submenu {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-6px);
  }
  .category-navi-list li:last-child:hover .submenu,
  .category-navi-list li:last-child:focus-within .submenu {
    transform: translateX(0) translateY(0);
  }
}
/* SP（2列・タップ）：右カラム(偶数)のサブメニューを右端揃えにし、
   左カラム(奇数)は左端揃え。幅をコンテンツ内に収めて突き抜けを防止 */
@media screen and (max-width: 768px) {
  .category-navi-list li:nth-child(odd) .submenu {
    left: 0;
    right: auto;
  }
  .category-navi-list li:nth-child(even) .submenu {
    left: auto;
    right: 0;
  }
  .category-navi-list .submenu {
    max-width: calc(100vw - 32px);
  }
}

/* ===== 2026-06-26 (5)土肥様ご依頼：見出しリンク（section_title_url）
   見出し(H3)をそのままリンク化。見出しの見た目は維持し、ホバーで下線＋外部リンクは「↗」を付与 ===== */
.page-content .page-h3--link a {
  color: inherit;
  text-decoration: none;
}
.page-content .page-h3--link a:hover {
  text-decoration: underline;
}
.page-content .page-h3--link a[target="_blank"]::after {
  content: "\2197";        /* ↗ 外部リンク */
  margin-left: .3em;
  font-size: .8em;
  vertical-align: middle;
}

/* ===== 2026-06-26 発行物一覧ページ（page-publications.php）：刊行物ブロックの区切り ===== */
.pub-section { margin: 0 0 40px; }
.pub-section + .pub-section { margin-top: 40px; padding-top: 32px; border-top: 1px dashed #ddd; }
.pub-section > .page-h3 { margin-top: 0; }

/* ===== 2026-06-26 発行物 サムネイル画像＋PDFリンク（pub_thumb / pub_pdf） ===== */
.pub-media { margin: 16px 0; }
.pub-thumb { margin: 0 0 12px; }
.pub-thumb img { max-width: 240px; height: auto; border: 1px solid #e0e0e0; }

/* ===== 2026-06-26 発行物：画像クリックでPDF＋注釈 ===== */
.pub-thumb-link { display: inline-block; }
.pub-thumb-link img { transition: opacity .2s; }
.pub-thumb-link:hover img { opacity: .85; }
.pub-note { font-size: .85em; color: #666; margin: 6px 0 0; }

/* ===== 2026-06-30 発行物ループ表示（複数アイテム：タイトル＋画像→PDF）崩れ防止 ===== */
.pub-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px 24px; }
.pub-item { margin: 0; max-width: 200px; min-width: 0; }
.pub-item-title { display: block; font-weight: 700; font-size: .95em; line-height: 1.4; margin: 0 0 6px; }
.pub-item img { display: block; max-width: 100%; height: auto; border: 1px solid #e0e0e0; }
.pub-item .box-link { display: block; margin: 0; }
@media screen and (max-width: 480px) {
  .pub-list { gap: 16px; }
  .pub-item { max-width: calc(50% - 8px); }
}

/* ===== 2026-06-30 発行物リスト：点除去＋2カラム幅いっぱい ===== */
.pub-list { list-style: none !important; gap: 28px 24px; }
.pub-list .pub-item { list-style: none; max-width: none; flex: 0 0 calc(50% - 12px); }
.pub-list .pub-item::before { content: none !important; }   /* ・ を消す */
.pub-list .pub-item img { width: 100%; }                    /* 列幅いっぱい */
.pub-list .pub-item .box-link { margin-top: 6px; }
@media screen and (max-width: 480px) {
  .pub-list { gap: 18px 14px; }
  .pub-list .pub-item { flex: 0 0 calc(50% - 7px); }
}

/* ===== 2026-06-30 下層カテゴリーナビ：サブメニューのホバー文字色を親色(--cat-color)に ===== */
.category-navi-list .submenu a:hover { color: var(--cat-color, #147f08); }
.category-navi-list .submenu a:hover::after { border-color: var(--cat-color, #147f08); }

/* ===== 2026-07-08 about「組織図」画像：ほんの少し縮小（土肥様ご要望・電話） ===== */
.page-content .org-chart-img { max-width: 90%; }