@charset "UTF-8";
/*
Theme Name: honbu
Theme URI: https://otagaisama.or.jp/
Author: 新美デザイン事務所
Description: 社会福祉法人 世田谷ボランティア協会 公式サイト用テーマ（2026年リニューアル）
Version: 1.0.0
Requires at least: 7.0
Requires PHP: 8.4
License: GNU General Public License v2 or later
Text Domain: honbu
*/

/** Design Tokens
========================================================================== */

:root {
  /* ── Colors: Brand ─────────────────────────── */
  --color-brand-green:    #009045;   /* メニューアイコン, タブ「すべて」, お知らせタグ枠 */
  --color-lime:           #a8ca03;   /* アクティブライン, 見出し下線, フォローボタン */
  --color-cta:            #ff9433;   /* CTAボタン, Pick Up!下線 */

  /* ── Colors: Text ──────────────────────────── */
  --color-text:           #333;      /* 本文 */
  --color-text-mid:       #4d4d4d;   /* 見出し, リンク */
  --color-text-light:     #666;      /* 日付 */
  --color-text-muted:     #999;      /* コピーライト */

  /* ── Colors: Border ────────────────────────── */
  --color-border:         #cacaca;   /* 枠線, 区切り線 */
  --color-border-light:   #b1b1b1;   /* 点線区切り */

  /* ── Colors: Background ────────────────────── */
  --color-bg-white:       #fff;
  --color-bg-hover:       #f5f5f5;   /* ボタンホバー */
  --color-bg-salmon:      #f2d9ce;   /* 寄付セクション */
  --color-bg-green-light: #d9e8d3;   /* 採用セクション */
  --color-bg-cream:       #f9efdc;   /* 事業セクション, 拠点見出し */
  --color-info-border:    #39b34a;   /* すぐわかる枠線 */
  --color-link-blue:      #0072ba;   /* もっと見るリンク */
  --color-link-hover:     #007a3b;   /* 2026-07-30追加：テキストリンクhover用の濃緑。
                                        #009045は白背景で4.1:1とWCAG AA(4.5:1)未達のため、
                                        文字色にはAA適合(約5.5:1)のこちらを使う */

  /* ── Colors: Category dots ─────────────────── */
  --color-cat-volunteer:  #FF66CC;
  --color-cat-event:      #23BEF0;
  --color-cat-staff:      #B088FF;
  --color-cat-etc:        #999999;
  --color-cat-setagaya:   #A8CA03;

  /* ── Typography ────────────────────────────── */
  /* 2026-07-30修正：Webフォント(Noto Sans JP)を先頭に。ローカルフォント優先だと
     インストール状況によりMac/Windowsで太さの解釈が変わるため、全環境で
     同一の配信フォントを使い表示を統一する。 */
  --font-family:          "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --fs-body:              16px;
  --fs-heading-section:   19px;
  --fs-heading-en:        25px;
  --fs-heading-badge:     25px;
  --fs-heading-desc:      17.5px;
  --fs-menu-label:        1.0625rem; /* 17px */
  --fs-footer-link:       13px;
  --fs-date:              11.5px;
  --fs-small:             12px;
  --fs-tag:               9px;
  --fw-normal:            400;
  --fw-medium:            480;
  --fw-semi:              500;
  --fw-bold:              700;
  --fw-black:             900;

  /* ── Layout ────────────────────────────────── */
  --content-max-width:    1160px;
  --radius-btn:           5px;
  --radius-tab:           14px;
  --radius-pill-sm:       20px 0 20px 0;
  --radius-pill-lg:       32px 0 32px 0;
  --btn-height:           50px;
  --icon-arrow-w:         10px;
  --icon-arrow-h:         17px;

  /* ── Shadows ───────────────────────────────── */
  --shadow-card:          0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-banner:        4px 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-banner-hover:  4px 4px 14px rgba(0, 0, 0, 0.2);
}

/** Reset & Base
========================================================================== */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family);
  font-size: 16px;
  color: var(--color-text);
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
}

input,
button,
textarea,
select {
  font: inherit;
}

/** WordPress Core Classes
========================================================================== */

/* --- アライメント --- */
.alignleft {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 1em;
}

.alignright {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
}

.alignwide,
.alignfull {
  margin-left: auto;
  margin-right: auto;
}

/* --- キャプション --- */
.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: 0.85em;
  opacity: 0.7;
  margin-top: 0.4em;
}

/* --- ギャラリー --- */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- スクリーンリーダー用 --- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.screen-reader-text:focus {
  display: block;
  width: auto;
  height: auto;
  padding: 0.5em 1em;
  clip: auto;
  z-index: 100000;
}

/* --- スティッキー投稿 --- */
.sticky {
  /* 必要に応じてスタイルを追加 */
}

/** Layout（仮）
========================================================================== */

.site-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  flex: 1;
}

.inner {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

header .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:16px 0px 5px 0;
}

.logo img{
  width:239px;
  height:auto
  }

.MV img{
  width:1160px;
  height:auto
  }

.utility-link{
  align-self: flex-end;
  font-size:0.8125rem;
  font-weight:bold
  }

.utility-link li{
  display:inline;
  margin-left:26px
  }

/* 2026-07-30追加：hover統一方針（灰リンク＝濃緑+下線）に合わせる */
.utility-link li a:hover,
.utility-link li a:focus-visible {
  color: var(--color-link-hover);
  text-decoration: underline;
}
  
.MV {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.site-footer {
  text-align: center;
}

/** Utility
========================================================================== */

/* PCのみ表示 */
.u-pc {
  display: block;
}

/* SPのみ表示 */
.u-sp {
  display: none;
}

@media (max-width: 768px) {
  .u-pc {
    display: none;
  }
  .u-sp {
    display: block;
  }
}


/** Main Menu – 全ページ共通（header.phpへ移設＝シェル統合 2026-07-07）  (section C)
========================================================================== */
 
.main-menu {
  background: var(--color-bg-white);
}
 
.main-menu__list {
  display: flex;
  max-width: var(--content-max-width);
  margin: 0 auto;
}
 
.main-menu__item {
  flex: 1;
  position: relative;
}
 
/* ── Dashed separators ── */
.main-menu__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 11px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-border) 0,
    var(--color-border) 3px,
    transparent 3px,
    transparent 6px
  );
}
 
.main-menu__item:last-child::after {
  content: '';
  position: absolute;
  right: 0;
  top: 14px;
  bottom: 11px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-border) 0,
    var(--color-border) 3px,
    transparent 3px,
    transparent 6px
  );
}
 
/* ── Link ── */
.main-menu__item > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
  gap: 12px;
  position: relative;
}
 
/* ── Underline (base – invisible) ── */
.main-menu__item > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 4px;
  background: var(--color-lime);
  opacity: 0;
  transition: opacity 0.2s ease;
}
 
/* 2026-07-30：hover時の下線を透明度ゼロ（＝opacity 1・完全表示）に変更。旧値は0.4。 */
.main-menu__item > a:hover::after {
  opacity: 1;
}

.main-menu__item.is-active > a::after {
  opacity: 1;
}
 
/* ── Icon ── */
.main-menu__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
}
 
.main-menu__icon svg {
  width: 34px;
  height: 34px;
  fill: var(--color-brand-green);
}
 
/* ── Label ── */
.main-menu__label {
  font-size: 1.0625rem;          /* 17px */
  font-weight: 500;
  line-height: 1;
}
 
/* ── SP: hide main-menu ── */
@media (max-width: 768px) {
  .main-menu {
    display: none;
  }
}


/** sec-info ─ 新着ボランティア情報 & お知らせ
========================================================================== */

/* ── セクション全体 ───────────────────────── */
.sec-info {
  padding: 24px 0;
}

/* ── 2カラムグリッド ──────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  align-items: stretch;
}

/* ── 左カラム：新着ボランティア情報 ────────── */
.info-vol {
  background: var(--color-bg-white);
  border: 2px solid var(--color-border);
  border-radius: 5px;
  padding: 30px 28px;
  min-height: 696px; 
  display: flex;
  flex-direction: column;
}

/* ---- 見出し行 ---- */
.info-vol__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 12px;
}

.info-vol__title {
  font-size: 19px;
  font-weight: 500;
  color: var(--color-text-mid);
  margin: 0;
  line-height: 1.4;
}

.info-vol__hint {
  font-size: 13px;
  color: var(--color-text-mid);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 16px;
}

/* ---- 検索＋投稿ボタン行 ---- */
.info-vol__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
}

.info-vol__search {
  display: flex;
  gap: 8px;
}

.info-vol__search-input {
  width: 269px;
  height: 50px;
  border: 2px solid var(--color-text-mid);
  border-radius: 3px;
  padding: 0 14px;
  font-size: 12px;
  color: var(--color-text);
  background: var(--color-bg-white);
}

.info-vol__search-input::placeholder {
  color: var(--color-border);
}

.info-vol__search-btn {
  width: 111px;
  height: 50px;
  border: 2px solid var(--color-text);
  border-radius: 3px;
  background: var(--color-bg-white);
  font-size: 15px;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s;
}

.info-vol__search-btn:hover {
  background: var(--color-bg-hover);
}

/* ---- 共通ボタンスタイル（投稿する／もっと見る） ---- */
.info-vol__post-btn,
.info-vol__more-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--color-cta);
  color: var(--color-bg-white);
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.info-vol__post-btn:hover,
.info-vol__more-btn:hover {
  opacity: 0.85;
}

/* 矢印はボタン右辺から統一位置 */
.info-vol__post-btn .icon-arrow-btn,
.info-vol__more-btn .icon-arrow-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 17px;
  fill: var(--color-bg-white);
}

.info-vol__post-btn {
  width: 168px;
  padding: 0 36px 0 14px;
  flex-shrink: 0;
}

.info-vol__more-btn {
  min-width: 196px;
  padding: 0 36px 0 20px;
}

/* ---- カテゴリータブ ---- */
.info-vol__tabs {
  display: flex;
  gap: 14px;
  margin-bottom: 8px;
  flex-wrap: nowrap;
}

.info-vol__tab {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 14px;
  border: none;
  color: var(--color-bg-white);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
  font-weight:bold
}

.info-vol__tab:hover {
  opacity: 0.8;
}

/* ---- 投稿リスト ---- */
.info-vol__list {
  list-style: none;
  padding: 0 0 0 14px;
  margin: 0;
}

/* 2026-07-30：タブ切り替え時、該当カテゴリーの投稿が0件の場合の表示 */
.info-vol__empty {
  padding: 12px 0;
  color: #999;
  font-size: 14px;
}

/* 2026-07-07：D行のDOMをSPカンプ構造（7/4指示＝__main内にメタ行＋タイトル）へ統一。
   以下は旧「日付｜ピン｜本体」流し込みのPC見た目を新DOMで等価再現した書き換え。旧値は各行に併記 */
.info-vol__item {
  display: flex;
  align-items: flex-start;
}

.info-vol__main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;                 /* （旧 __item-body gap:12px） */
  padding: 14px 4px 14px 0;  /* （旧 __item-body） */
  border-bottom: 1px dashed var(--color-border-light); /* （旧 __item-body） */
  min-width: 0;
}

/* メタ行（ピン・ドット・日付）。表示順は日付先頭＝PCカンプ準拠（order:-1で並べ替え） */
.info-vol__meta {
  display: flex;
  align-items: flex-start;
  gap: 12px;                 /* （旧：本体gap12の等価再現） */
  flex-shrink: 0;
}

/* 日付 */
.info-vol__date {
  order: -1;                 /* （新DOMはピン→ドット→日付。PCは日付先頭のため並べ替え） */
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--color-text-light);
  padding-top: 2px;          /* （旧16px −本体上14px） */
  line-height: 1.4;
}

/* ピン留めアイコン */
.info-vol__pin {
  flex-shrink: 0;
  width: 30px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5px;          /* （旧19px −本体上14px） */
}

.info-vol__pin .icon-pin {
  width: 18px;
  height: 18px;
  fill: var(--color-text-mid);
  transform: rotate(30deg);
}

/* カテゴリードット（旧 __cat-dot。SPカンプの __dot に改称） */
.info-vol__dot {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-top: 5px;
}

/* 見出しリンク */
.info-vol__link {
  flex: 1;
  font-size: 16px;
  color: var(--color-text-mid);
  line-height: 1.7;
  text-decoration: none;
  min-width: 0;
  font-weight:500
}

.info-vol__link:hover,
.info-vol__link:focus-visible {
  color: var(--color-link-hover); /* 2026-07-30：全サイト統一（緑+下線） */
  text-decoration: underline;
}

/* 右矢印（点線と点線の中央） */
.info-vol__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  align-self: center;
  margin-left: 4px;
}

.info-vol__arrow .icon-arrow {
  width: 8px;
  height: 14px;
  fill: var(--color-text-mid);
}

/* ---- もっと見るボタン ---- */
.info-vol__more {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

/** sec-info ─ 協会からのお知らせ（右カラム追記分）
========================================================================== */

/* ── 右カラム：協会からのお知らせ ──────────── */
.info-news {
  background: var(--color-bg-white);
  border: 2px solid var(--color-border);
  border-radius: 5px;
  padding: 30px 24px 20px 22px;
  max-height: 520px;
  display: flex; 
  flex-direction: column;
}

.info-news__title {
  font-size: 19px;
  font-weight: 500;
  color: var(--color-text-mid);
  margin: 0 ;
  line-height: 1.4;
}

/* ---- リスト ---- */
.info-news__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-news__item {
  padding: 10px 0 8px;
  border-bottom: 1px dashed var(--color-border-light);
}

/* ---- メタ行（日付＋タグ）---- */
.info-news__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.info-news__date {
  font-size: 11px;
  color: var(--color-text-mid);
  white-space: nowrap;
}

.info-news__tag {
  display: inline-block;
  padding: 2px 10px 1px 10px;
  border: 2px solid var(--color-brand-green);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-text-mid);
  line-height: 1.2;
  white-space: nowrap;
  font-family: "メイリオ","Meiryo";
}


/* ---- 本文行（ピン＋タイトル）---- */
.info-news__body {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.info-news__pin {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}

.info-news__pin .icon-pin {
  width: 18px;
  height: 18px;
  fill: var(--color-text-mid);
  transform: rotate(30deg);
}

.info-news__link {
  font-size: 14px;
  color: var(--color-text-mid);
  line-height: 1.7;
  text-decoration: none;
  font-weight:500
}

.info-news__link:hover,
.info-news__link:focus-visible {
  color: var(--color-link-hover); /* 2026-07-30：全サイト統一（緑+下線） */
  text-decoration: underline;
}

/* ---- もっと見るリンク ---- */
.info-news__more {
  text-align: right;
  margin-top: 14px;
}

.info-news__more-link {
  font-size: 16px;
  color: var(--color-link-blue);
  text-decoration: underline;
}

.info-news__more-link:hover {
  text-decoration: none;
}

/* ── 右カラムラッパー ── */
.info-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── info-vol 内部スクロール ── */
.info-vol__scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── info-news 内部スクロール ── */
.info-news__scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── 「もっと見る」底固定（両方共通）── */
.info-vol__more,
.info-news__more {
  flex-shrink: 0;
}

/** info-about ─ すぐわかる！世田谷ボランティア協会
    （2026-07-12修正指示：PCは支給SVG「すぐわかる.svg」＝@2x原稿に完全準拠。全数値＝SVG値÷2。
      構造＝__canvas（PC絶対配置の基準）＞ __body（SP用フロー行）。
      SP値はSPカンプ（template-design-toppage-sp.html）のまま＝SPトップ固有章で定義）
========================================================================== */

/* ── 共通スキン（PC/SP共用）── */
.info-about {
  display: flex;
  align-items: center;               /* PC：箱が伸びた場合はSVG構図ごと垂直センター */
  text-decoration: none;
  background: var(--color-bg-white);
  border: 5px solid var(--color-info-border);   /* SVG: stroke10÷2 */
  transition: opacity 0.2s;
  flex: 1;
}

.info-about:hover {
  opacity: 0.85;
}

.info-about__canvas {
  display: block;
  width: 100%;
}

.info-about__label { color: var(--color-text-mid); }

.info-about__text {
  display: flex;
  flex-direction: column;
}

.info-about__title {
  font-weight: 700;
  color: var(--color-text-mid);
}

.info-about__sub {
  color: var(--color-text-mid);
  padding-left: 3px;                 /* SVG: x差6÷2（SP準拠値と同値） */
}

.info-about__arrow {
  fill: var(--color-text-mid);
  flex-shrink: 0;
}

/* ── PC（769px〜）＝SVG準拠ジオメトリ（座標は枠5px内側＝__canvas基準）── */
@media (min-width: 769px) {
  .info-about {
    border-radius: 7.5px;            /* SVG: 外径15÷2（rx10+stroke5） */
    min-height: 156.5px;             /* SVG: 313÷2 */
  }
  .info-about__canvas {
    position: relative;
    height: 146.5px;                 /* 156.5 − 枠5×2 */
  }
  .info-about__label {
    position: absolute;
    left: 15.5px; top: 11.5px;       /* SVG: x40.9, グリフ上端y34.5 */
    font-size: 14px;                 /* SVG: 28px÷2（文字送り実測583px/21字より確定） */
    font-weight: 700;                /* SVG: NotoSansCJKjp-Bold */
    line-height: 1;
  }
  /* .info-about__body はPCでは無次元ラッパー（子は__canvas基準の絶対配置） */
  .info-about__bulb {
    position: absolute;
    left: 94.4px; top: 53.8px;       /* SVG: x198.9, y117.7 */
    width: 29px; height: 38.7px;     /* SVG: 58×77.3 ÷2 */
  }
  .info-about__text {
    position: absolute;
    left: 129px; top: 50px;          /* SVG: タイトルx268・ベースラインy160.16（ascent≒0.88em換算） */
  }
  .info-about__title {
    font-size: 28.5px;               /* SVG: 57px÷2 */
    line-height: 1;
  }
  .info-about__sub {
    font-size: 15px;                 /* SVG: 30px÷2 */
    font-weight: 700;                /* SVG: Boldファミリー継承 */
    line-height: 1;
    margin-top: 7.5px;               /* SVG: ベースライン差48.24÷2＝24.12を再現 */
  }
  .info-about__arrow {
    position: absolute;
    right: 19.3px;                   /* SVG: 右端から48.6÷2（枠5px控除） */
    top: 50%;
    transform: translateY(-50%);     /* SVG: 箱の垂直中心 */
    width: 10.5px; height: 18px;     /* SVG: 21×36 ÷2 */
  }
}

/** sec-services ─ 事業を知る
========================================================================== */

.sec-services {
  background-color: var(--color-bg-cream);
  background-image:
    url('images/illust-street.png'),
    url('images/illust-bg-left.png'),
    url('images/illust-bg-right.png');
  background-repeat: no-repeat;
  background-position:
    calc(50% - 1px) 177px,
    calc(50% - 208px) 553px,
    calc(50% + 220px) 527px;
  background-size:
    933px auto,
    693px auto,
    665px auto;
  padding: 82px 0 85px;
  overflow: hidden;
}

/* ── Heading badge ── */
.sec-services__heading {
  width: 276px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: var(--color-bg-white);
  border-radius: 32px 0 32px 0;
  font-size: 25px;
  font-weight: 500;
  color: var(--color-text-mid);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

/* ── Description ── */
.sec-services__desc {
  margin-top: 120px;
  text-align: center;
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--color-text);
}

/* ── Card rows ── */
.svc-cards__row {
  display: flex;
  justify-content: center;
  gap: 35px;
  margin-top: 44px;
}

.svc-cards__row--2 {
  gap: 30px;
  margin-top: 38px;
}

/* ── Card ── */
.svc-card {
  display: block;
  width: 340px;
  height: 340px;
  background: var(--color-bg-white);
  border-radius: 5px;
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.svc-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* ── Card head ── */
.svc-card__head {
  position: relative;
  height: 105px;
}

.svc-card__num {
  position: absolute;
  left: 19px;
  top: 14px;
  font-size: 35px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-text-mid);
}

.svc-card__title {
  position: absolute;
  left: 60px;
  top: 46px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-mid);
}

/* ── Card arrow ── */
.svc-card__head .icon-arrow {
  position: absolute;
  right: 22px;
  top: 60px;
  transform: translateY(-50%);
  width: 10px;
  height: 17px;
  fill: var(--color-text-mid);
}

/* Card 3 : 2-line title vertically centered to match other cards */
.svc-card--multiline .svc-card__title {
  left: 57px;
  top: 32px;
}

/* Card 5 : subtitle centered with title */
.svc-card__sub {
  position: absolute;
  left: 150px;
  top: 41px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-mid);
}

/* ── Card image ── */
.svc-card__img {
  padding: 0 21px;
}

.svc-card__img img {
  width: 100%;
  height: 198px;
  object-fit: cover;
  border-radius: 5px;
}

/** sec-banner ─ バナーエリア（Pick Up!）
========================================================================== */

/* ── セクション ── */
.sec-banner {
  padding: 0 0 50px;
}

/* ── 見出し ───────────────────────────────── */
.sec-banner__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Pick Up! */
.sec-banner__title-en {
  font-size: 25px;
  font-weight: 500;
  color: var(--color-text-mid);
  letter-spacing: 0.2em;
  line-height: 1;
}

/* オレンジライン（240×7, var(--color-cta), round cap） */
.sec-banner__title-en::after {
  content: '';
  display: block;
  width: 240px;
  height: 7px;
  background: var(--color-cta);
  border-radius: 4px;
  margin-top: 8px;
}

/* ピックアップ */
.sec-banner__title-ja {
  display: block;
  font-size: 19px;
  font-weight: 500;
  color: var(--color-text-mid);
  letter-spacing: 0.2em;
  line-height: 1;
  margin-top: 6px;
}

/* ── 常設エリア ─────────────────────────── */
.banner-fixed {
  display: flex;
  gap: 16px;
  margin-top: 25px;
  align-items: flex-start;
}

.banner-fixed__item {
  display: block;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s;
}

.banner-fixed__item:hover {
  box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.2);
}

.banner-fixed__item img {
  width: auto;
  height: 102px;
  display: block;
}

/* ── カルーセル ─────────────────────────── */
.banner-carousel {
  margin-top: 52px;
  padding: 7px 0 0;
  position: relative;
}

/* スライド画像 */
.banner-carousel .splide__slide a {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s;
}

.banner-carousel .splide__slide a:hover {
  box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.2);
}

.banner-carousel .splide__slide img {
  height: auto;                          /* → height: 102px; */
}

/* バナー画像のないスライド（リンクなし） */
.banner-carousel .splide__slide > img {
  border-radius: 4px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
}

/* ── 矢印ボタン ── */
.banner-carousel .splide__arrow {
  background: rgba(26, 26, 26, 0.5);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  opacity: 1;
  transition: background 0.2s;
}

.banner-carousel .splide__arrow:hover {
  background: rgba(26, 26, 26, 0.7);
}

.banner-carousel .splide__arrow svg {
  fill: var(--color-bg-white);
  width: 12px;
  height: 12px;
}

.banner-carousel .splide__arrow--prev {
  left: 10px;
}

.banner-carousel .splide__arrow--next {
  right: 10px;
}

.banner-fixed {
  align-items: flex-start;   /* ← 追加 */
}


/** sec-facilities ─ お近くの拠点・施設
========================================================================== */

/* ── セクション ── */
.sec-facilities {
  padding: 80px 0 70px;
}

/* ── 見出しラベル ─────────────────────────── */
.sec-facilities__heading {
  width: 351px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: var(--color-bg-cream);
  border-radius: 32px 0 32px 0;
  font-size: 25px;
  font-weight: 500;
  color: var(--color-text-mid);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

/* ── 説明文 ───────────────────────────────── */
.sec-facilities__desc {
  margin-top: 38px;
  text-align: center;
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--color-text);
}

/* ── カードグリッド（5拠点） ──────────────── */
.facilities-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  margin-top: 60px;
}

/* ── カード共通 ───────────────────────────── */
.facilities-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border: 1px solid var(--color-text-mid);
  border-radius: 5px;
  padding: 26px 20px 16px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s ease;
}

.facilities-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* ── アイコン ─────────────────────────────── */
.facilities-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin-bottom: 8px;
}

.facilities-card__icon .icon-building {
  width: 25px;
  height: 33px;
  fill: var(--color-brand-green);
}

.facilities-card__icon .icon-people-roof {
  width: 31px;
  height: 26px;
  fill: var(--color-lime);
}

/* ── カード名称 ───────────────────────────── */
.facilities-card__name {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--color-text);
}

/* ── カード内矢印 ─────────────────────────── */
.facilities-card .icon-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 17px;
  fill: var(--color-border-light);
}

/* ── 福祉事業部カード（外部リンク） ────────── */
.facilities-external-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.facilities-card--external {
  flex-direction: row;
  justify-content: center;
  width: 231px;
  min-height: 95px;
  padding: 20px 36px 20px 24px;
}

.facilities-card--external .facilities-card__name {
  font-size: 16px;
}

.facilities-card--external .icon-external {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 19px;
  height: 19px;
  fill: var(--color-border);
}

/** sec-donate ─ ご寄付のお願い
========================================================================== */

.sec-donate {
  background: var(--color-bg-salmon);
  padding: 33px 0 37px;
}

/* ── ピル型見出し（小）── */
.sec-donate__heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 197px;
  height: 46px;
  margin: 0 0 0 21px;
  background: var(--color-bg-white);
  border-radius: 20px 0 20px 0;
  font-size: 19px;
  font-weight: 400;
  color: var(--color-text-mid);
  line-height: 1;
}

/* ── 本文 ── */
.sec-donate__text {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--color-text);
  line-height: 1.75;
  margin: 0;
}

/* ── ボタンエリア ── */
.sec-donate__action {
  display: flex;
  justify-content: flex-end;
  margin: 0 33px 0 0;
}

/* ── ボタン（共通仕様準拠） ── */
.sec-donate__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 197px;
  height: 50px;
  background: var(--color-cta);
  color: var(--color-bg-white);
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 0 36px 0 20px;
  transition: opacity 0.2s;
}

.sec-donate__btn:hover {
  opacity: 0.85;
}

.sec-donate__btn .icon-arrow-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 17px;
  fill: var(--color-bg-white);
}

/** sec-instagram ─ 協会の日常（Instagram）
========================================================================== */

/* ── セクション ── */
.sec-instagram {
  padding: 50px 0 60px;
}

/* ── ヘッダー行 ───────────────────────────── */
.sec-instagram__header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 35px;
}

/* ── 見出し（sec-banner__heading と同一フォーマット）── */
.sec-instagram__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Instagram（= title-en） */
.sec-instagram__title-en {
  font-size: 25px;
  font-weight: 500;
  color: var(--color-text-mid);
  letter-spacing: 0.2em;
  line-height: 1;
}

/* グリーンライン（240×7, var(--color-lime), round cap） */
.sec-instagram__title-en::after {
  content: '';
  display: block;
  width: 240px;
  height: 7px;
  background: var(--color-lime);
  border-radius: 4px;
  margin-top: 8px;
}

/* 協会の日常（= title-ja） */
.sec-instagram__title-ja {
  display: block;
  font-size: 19px;
  font-weight: 500;
  color: var(--color-text-mid);
  letter-spacing: 0.2em;
  line-height: 1;
  margin-top: 6px;
}

/* ── Instagramアイコン ─────────────────────── */
.sec-instagram__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

/* ── フォローボタン（オレンジボタンと同一フォーマット、色のみ変更、矢印なし）── */
.sec-instagram__follow-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: 180px;
  padding: 0 24px;
  background: var(--color-lime);
  color: var(--color-bg-white);
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.sec-instagram__follow-btn:hover {
  opacity: 0.85;
}

/* ── フィード（Smash Balloon） ────────────── */
.sec-instagram__feed {
  /* レイアウトはSmash Balloonプラグイン側で制御 */
}

/** sec-recruit ─ 一緒に働く仲間を募集しています
========================================================================== */

.sec-recruit {
  background: var(--color-bg-green-light);
  padding: 29px 0 47px;
}

/* ── ピル型見出し（小）── */
.sec-recruit__heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 372px;
  height: 58px;
  margin: 0 0 0 9px;
  background: var(--color-bg-white);
  border-radius: 20px 0 20px 0;
  font-size: 19px;
  font-weight: 400;
  color: var(--color-text-mid);
  line-height: 1;
}

/* ── 本文 ── */
.sec-recruit__text {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--color-text);
  line-height: 1.75;
  margin: 30px 0 0;
}

/* ── ボタンエリア ── */
.sec-recruit__action {
  display: flex;
  justify-content: flex-end;
  margin: 0 33px 0 0;
}

/* ── ボタン（共通仕様準拠） ── */
.sec-recruit__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 197px;
  height: 50px;
  background: var(--color-cta);
  color: var(--color-bg-white);
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 0 36px 0 20px;
  transition: opacity 0.2s;
}

.sec-recruit__btn:hover {
  opacity: 0.85;
}

.sec-recruit__btn .icon-arrow-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 17px;
  fill: var(--color-bg-white);
}

/** site-footer ─ フッター
========================================================================== */

.site-footer {
  background: var(--color-bg-white);
}

/* ── フッターナビ（4カラム）───────────────── */
.footer-nav {
  display: grid;
  grid-template-columns: 279px 323px 253px 1fr;
  padding: 44px 0 47px 58px;
  text-align: left;
}

/* ── カラム共通 ── */
.footer-nav__col {
  min-width: 0;
}

/* ── カラム見出し（16px Bold）── */
.footer-nav__heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
  margin: 0;
}

/* Col 4 の「その他」見出し（ボランティア情報の下） */
.footer-nav__heading--sub {
  margin-top: 37px;
}

/* ── リンクリスト ── */
.footer-nav__list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}

.footer-nav__list li {
  font-size: 13px;
  line-height: 1.4;
  margin-top: 12px;
}

.footer-nav__list li:first-child {
  margin-top: 0;
}

.footer-nav__list li a {
  color: var(--color-text-mid);
  text-decoration: none;
  font-weight:500
}

.footer-nav__list li a:hover,
.footer-nav__list li a:focus-visible {
  color: var(--color-link-hover); /* 2026-07-30：全サイト統一（緑+下線） */
  text-decoration: underline;
}

/* ── " - " 付きインデント項目（Col 1：協会概要 等） ── */
.footer-nav__item--indent a::before {
  content: ' -\00a0';
  color: var(--color-text);
}

/* ── 太字項目（Col 1：採用について／寄付について） ── */
.footer-nav__item--strong a {
  font-weight: 900;
  color: var(--color-text-mid);
}

/* ── em-space インデント項目（Col 2：サブ項目） ── */
.footer-nav__item--em a::before {
  content: '\3000';
}

/* ── サブカテゴリ見出し（Col 2：13px Black var(--color-text)） ── */
.footer-nav__sub-head {
  font-weight: 900;
  color: var(--color-text);
  line-height: 18px;
}

.footer-nav__sub-head a {
  font-weight: 900;
  color: var(--color-text);
}

/* サブカテゴリ間の40pxギャップ */
.footer-nav__sub-head--gap {
  margin-top: 22px;
}

/* 括弧付きサブラベル */
.footer-nav__sub-label {
  font-weight: 900;
  color: var(--color-text);
}

/* ── 外部リンクアイコン ── */
.icon-ext {
  display: inline-block;
  width: 14px;
  height: 14px;
  fill: var(--color-border);
  vertical-align: middle;
  margin-left: 6px;
  flex-shrink: 0;
}

/* ── フッター情報（下部・中央寄せ）──────────── */
.footer-info {
  text-align: center;
  padding: 60px 0 50px;
}

.footer-org {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.8;
}

.footer-address {
  font-size: 14px;
  color: var(--color-text);
  margin: 8px 0 0;
  line-height: 1.8;
}

.footer-tel {
  font-size: 14px;
  color: var(--color-text);
  margin: 4px 0 0;
  line-height: 1.8;
}

.footer-copy {
  margin: 24px 0 0;
}

.footer-copy small {
  font-size: 13px;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}
/** ================================================================
 *  Common Components（下層ページ共通）
 *  ================================================================
 *  トップページの既存BEMクラスはそのまま維持。
 *  下層ページでは以下の汎用クラスを直接使用する。
 *  ================================================================ */

/* ── btn-cta: CTAボタン（オレンジ・矢印付き）──────── */

.btn-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  background: var(--color-cta);
  color: var(--color-bg-white);
  border-radius: var(--radius-btn);
  font-size: 16px;
  font-weight: var(--fw-semi);
  text-decoration: none;
  white-space: nowrap;
  padding: 0 36px 0 20px;
  transition: opacity 0.2s;
}

.btn-cta:hover {
  opacity: 0.85;
}

.btn-cta .icon-arrow-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon-arrow-w);
  height: var(--icon-arrow-h);
  fill: var(--color-bg-white);
}

/* ── btn-green: フォローボタン等（ライムグリーン）──── */

.btn-green {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  min-width: 180px;
  padding: 0 24px;
  background: var(--color-lime);
  color: var(--color-bg-white);
  border-radius: var(--radius-btn);
  font-size: 16px;
  font-weight: var(--fw-semi);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.btn-green:hover {
  opacity: 0.85;
}

/* ── heading-pill: ピル型見出し ────────────────────── */

.heading-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-white);
  font-weight: var(--fw-normal);
  color: var(--color-text-mid);
  line-height: 1;
}

/* 小サイズ（寄付・採用セクション） */
.heading-pill--sm {
  border-radius: var(--radius-pill-sm);
  font-size: 19px;
}

/* 大サイズ（事業を知る・拠点施設セクション） */
.heading-pill--lg {
  border-radius: var(--radius-pill-lg);
  font-size: 25px;
  font-weight: var(--fw-semi);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

/* ── heading-en: 英字＋下線見出し ─────────────────── */

.heading-en {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.heading-en__title {
  font-size: 25px;
  font-weight: var(--fw-semi);
  color: var(--color-text-mid);
  letter-spacing: 0.2em;
  line-height: 1;
}

.heading-en__title::after {
  content: '';
  display: block;
  width: 240px;
  height: 7px;
  border-radius: 4px;
  margin-top: 8px;
}

/* 下線の色はセクションごとに指定 */
.heading-en__title--orange::after { background: var(--color-cta); }
.heading-en__title--lime::after   { background: var(--color-lime); }

.heading-en__sub {
  display: block;
  font-size: 19px;
  font-weight: var(--fw-semi);
  color: var(--color-text-mid);
  letter-spacing: 0.2em;
  line-height: 1;
  margin-top: 6px;
}

/* ── icon-arrow: 右矢印アイコン（リスト項目用）───── */

.icon-arrow {
  width: var(--icon-arrow-w);
  height: var(--icon-arrow-h);
  fill: var(--color-text-mid);
  flex-shrink: 0;
}

.icon-arrow--light {
  fill: var(--color-border-light);
}

/* ── icon-arrow-btn: 右矢印アイコン（ボタン内）───── */

.icon-arrow-btn {
  width: var(--icon-arrow-w);
  height: var(--icon-arrow-h);
  fill: var(--color-bg-white);
}

/* ── icon-pin: ピン留めアイコン ─────────────────── */

.icon-pin {
  width: 18px;
  height: 18px;
  fill: var(--color-text-mid);
  transform: rotate(30deg);
}

/* ── icon-ext: 外部リンクアイコン（footer等で使用）── */
/* ※ .icon-ext は既存定義あり（footer セクション内）   */

/* ── sec-bg: セクション背景色 ─────────────────────── */

.sec-bg--salmon      { background: var(--color-bg-salmon); }
.sec-bg--green-light  { background: var(--color-bg-green-light); }
.sec-bg--cream        { background: var(--color-bg-cream); }

/* ── card-base: カード共通 ────────────────────────── */

.card-base {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border: 1px solid var(--color-text-mid);
  border-radius: var(--radius-btn);
  padding: 26px 20px 16px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s ease;
}

.card-base:hover {
  box-shadow: var(--shadow-card);
}

/* ── inner: コンテンツ最大幅ラッパー（既存と同じ）── */
/* .inner は既存定義あり（Layout セクション内）        */


/** ================================================================
   ▼▼ ここから下層シェル統合の追補（2026-07-07）。
   出典：sp-base v2（sha 44f29aacdca69db9）＋PC下層カンプ確定値。
   ================================================================ */

/** 追補トークン（sp-base v2 の :root のうち style.css 未定義分のみ。
    --color-cat-event は既存定義と同値のため省略）
========================================================================== */
:root {
  --color-bg-blue-light:  #daeaf4;
  --sp-header-h:  56px;
  --sp-inner-pad: 16px;
  /* 投稿カテゴリ色（下層確定＝posts-list/post-detailカンプ実値） */
  --color-cat-recruit:  #FF66CC;
  --color-cat-paid:     #B088FF;
  --color-cat-ward:     #A8CA03;
  --color-cat-grant:    #5BA3C9;
  --color-cat-disaster: #E8734A;
  --color-cat-other:    #999999;
}

/** 重要なお知らせ帯（.alert-band）＝デバイス共通
    SP値が正式値としてPC実装にも展開（2026-07-06クライアント確定）。
    マークアップはトップのみ搭載（下層非搭載）。表示連携はCPT工程で実装。
    該当のお知らせが無い期間は帯ごと出力しない。
========================================================================== */
.alert-band{ background:var(--color-bg-salmon); max-width:var(--content-max-width); margin:0 auto; } /* （7/3修正指示：PCカンプの帯フォーマットに統一。幅は2026-07-07指示でMV幅＝1160に修正。SPは1160未満のため従来どおり全幅） */
.alert-band__link{ display:block; padding:9px 16px; line-height:1.6; } /* （7/3修正指示） */
.alert-band__label{
  display:block;                                  /* （7/4修正指示：「重要なお知らせ」の後で改行）※SPのみ。PCは直下mediaで上書き */
  font-size:12px; font-weight:700; color:#d7000f; /* （7/3修正指示：PCカンプ準拠の注意色。実値要照合） */
}
@media (min-width: 769px) {
  .alert-band__label{ display:inline-block; margin-right:16px; } /* （7/12修正指示：PCは「重要なお知らせ」で改行しない＝本文と同一行。PCカンプ準拠） */
}
.alert-band__text{ font-size:13px; color:#333; text-decoration:underline; text-underline-offset:2px; } /* （7/3修正指示：下線リンク＝PCカンプ準拠） */

/** PC下層 共通シェル（769px〜）＝PC下層カンプ確定値
    メインメニュー：トップ＝大（既存C章のまま）／下層＝コンパクト。
    body:not(.home) で下層のみ上書き（トップは body.home のため対象外）。
========================================================================== */
body:not(.home) .main-menu__item::before,
body:not(.home) .main-menu__item:last-child::after { top: 10px; bottom: 8px; }
body:not(.home) .main-menu__item > a { padding: 12px 0; gap: 7px; }
body:not(.home) .main-menu__item > a::after { height: 3px; }
body:not(.home) .main-menu__icon { height: 24px; }
body:not(.home) .main-menu__icon svg { width: 24px; height: 24px; }
body:not(.home) .main-menu__label { font-size: 1rem; }

@media (min-width: 769px) {
  /* パンくず（PC下層カンプ準拠） */
  .breadcrumb {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 16px 0 0;
    font-size: 13px;
    color: var(--color-text-light);
  }
  .breadcrumb a { color: var(--color-text-light); }
  .breadcrumb a:hover { color: var(--color-link-hover); text-decoration: underline; } /* 2026-07-30：AA適合濃緑 */
  .breadcrumb .sep { margin: 0 8px; color: var(--color-border); }
  .breadcrumb .current { color: var(--color-text); font-weight: 700; }
}

/** SP共通（〜768px）＝sp-base v2転写
    転写除外：カンプ体裁一式／u-pc・u-sp直書き（既存Utility章が担当）／
    :root（上の追補トークンへ）／リセット群（既存Reset章と同一のため）／
    お知らせ帯（デバイス共通のため上の独立ブロックへ）。
    実装値化2点：.sp-nav の width と padding-top（各行内に注記）。
    それ以外は sp-base v2 と同一文字列（出自タグ付き）。
========================================================================== */
@media (max-width: 768px) {

/* ---------------- 共通 .inner（width/max-width/margin＝style.css準拠のため転写省略。派生分のみ） ---------------- */
.inner{ padding:0 var(--sp-inner-pad); } /* （派生：PC padding無し→SP左右16px。コンテンツ幅343px） */

/* ---------------- photo-frame（下層確定・そのまま） ---------------- */
.photo-frame { position:relative; width:100%; aspect-ratio:3/2; background:var(--color-bg-hover);
  border:1px dashed var(--color-border); border-radius:var(--radius-btn); overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.photo-frame.has-image { border-color:transparent; background:transparent; }
.photo-frame::after { content:attr(data-label); font-size:13px; color:var(--color-text-muted);
  position:absolute; pointer-events:none; }
.photo-frame img { width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.photo-frame img[data-failed] { display:none; }

/* ---------------- A. ヘッダー ---------------- */
.site-header{
  position:sticky; top:0; z-index:1001; /* （SP新規：sticky採用＝要判断④。z1001＝パネル(1000)より前面で開時も×操作可） */
  height:56px;                          /* （SP新規：--sp-header-h） */
  background:#fff;                      /* （準拠） */
}
.site-header .inner{
  display:flex; justify-content:space-between; align-items:center; /* （準拠） */
  height:100%;            /* （SP新規） */
  padding:0 8px 0 16px;   /* （派生：PC 16px 0 5px 0） */
}
.logo img{ width:180px; /* （派生：239px） */ height:auto; }
/* ハンバーガー（SP新規） */
.hamburger{
  width:48px; height:48px;                                                        /* （SP新規） */
  display:flex; flex-direction:column; align-items:center; justify-content:center;/* （SP新規） */
  background:none; border:none; padding:0; cursor:pointer; font-family:inherit;   /* （SP新規：button既定打消し） */
}
.hamburger__bars{ display:flex; flex-direction:column; gap:4px; } /* （SP新規）バー3px＋gap4px＝中心ピッチ7px */
.hamburger__bar{
  width:24px; height:3px; background:var(--color-brand-green); border-radius:2px; /* （SP新規） */
  transition:transform .25s, opacity .25s;                                        /* （SP新規） */
}
.hamburger__label{
  margin-top:3px; font-size:9px; font-weight:700; color:var(--color-brand-green); line-height:1; /* （SP新規）可視ラベルは「メニュー」固定（aria-labelのみJSで切替＝実装準拠） */
}
/* 開状態：中心ピッチ7px→±7pxで3本が中央一致（幾何確認済み） */
body.is-nav-open .hamburger__bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }   /* （SP新規） */
body.is-nav-open .hamburger__bars span:nth-child(2){ opacity:0; }                                  /* （SP新規） */
body.is-nav-open .hamburger__bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* （SP新規） */

/* ---------------- A2. ハンバーガーパネル #sp-nav（SP新規） ---------------- */
.sp-nav{
  position:fixed; top:0;                                        /* （SP新規） */
  width:100%; left:0;                                           /* （SP新規）※実装値化＝ビューア枠対応の式を置き換え */
  height:100dvh;                                                /* （SP新規） */
  padding-top:calc(var(--sp-header-h) + 4px);                   /* （SP新規）※実装値化＝+4px（ビューア上余白分の加算を除去） */
  background:#fff; z-index:1000; overflow-y:auto;               /* （SP新規） */
  opacity:0; visibility:hidden; transition:.25s;                /* （SP新規） */
}
body.is-nav-open .sp-nav{ opacity:1; visibility:visible; } /* （SP新規） */
body.is-nav-open{ overflow:hidden; }                        /* （SP新規：背景スクロール固定） */
.sp-nav li a{ position:relative; display:block; } /* （SP新規：行末矢印の位置基準） */
.sp-nav .icon-arrow{
  position:absolute; right:14px;               /* （SP新規） */
  top:50%; transform:translateY(-50%);         /* （SP新規：縦位置） */
  width:8px; height:14px; fill:var(--color-border-light); /* （SP新規：全行＝矢印C 8×14 #b1b1b1） */
}
/* メイン4項目（PC .main-menu の項目・順序・アイコンを継承） */
.sp-nav__main li a{
  display:flex; align-items:center; /* （SP新規） */
  gap:12px;                          /* （準拠：main-menu gap12） */
  padding:15px 16px;                 /* （SP新規） */
}
.sp-nav__main li + li a{ border-top:1px dashed var(--color-border); } /* （派生：PC縦2px破線セパレータ→水平1px破線） */
.sp-nav__icon{ width:26px; height:26px; /* （派生：34px） */ fill:var(--color-brand-green); /* （準拠） */ }
.sp-nav__label{ font-size:17px; font-weight:500; color:#333; line-height:1.4; } /* （準拠：main-menu__label） */
.sp-nav__main li.is-current > a{ background:var(--color-bg-green-light); } /* （SP新規v2：パネル現在地＝残課題2の7/7採用。各ページのliへis-current付与） */
.sp-nav__main li.is-current .sp-nav__label{ font-weight:700; } /* （SP新規v2：現在地ラベル強調） */
/* ユーティリティ4項目（header.phpから移設・順序準拠） */
.sp-nav__utility{ border-top:2px solid var(--color-border); } /* （SP新規：区画上端のみ。ul要素に付与＝7-補2） */
.sp-nav__utility li a{
  padding:13px 16px; /* （SP新規） */
  font-size:15px;    /* （派生：utility-link 13px） */
  font-weight:700;   /* （準拠：utility-link bold） */
  color:#4d4d4d;     /* （SP新規：PCは色指定なし＝#333継承） */
}
/* フッター限定3項目（要判断⑤）※区画境界なし（文字太さで区別） */
.sp-nav__extra li a{
  padding:13px 16px;                              /* （SP新規） */
  font-size:15px; font-weight:500; color:#4d4d4d; /* （準拠：footer-nav__list a） */
}

/* ---------------- 見出し title-en / title-ja（トップ確定・無改変継承。定義位置のみ本ブロックへ移動。::afterの色はページ側で .sec-XXX .title-en::after として指定する運用＝トップ準拠） ---------------- */
.title-en{ display:block; font-size:20px; font-weight:500; letter-spacing:.2em; line-height:1; } /* （派生：準拠25px→7/3修正指示で縮小） */
.title-en::after{ content:""; display:block; width:160px; height:5px; border-radius:4px; margin-top:6px; } /* （派生：準拠240×7・mt8→7/3修正指示で縮小） */
.title-ja{ display:block; font-size:15px; font-weight:500; letter-spacing:.2em; margin-top:5px; line-height:1; } /* （派生：準拠19px・mt6→7/3修正指示で縮小。line-height:1は3-3確定） */

/* ---------------- K. フッター（モバイルフッター＝SP新規＋下層確定） ---------------- */
.site-footer{ background:#fff; text-align:center; } /* （準拠） */
.footer-info{
  border-top:1px solid var(--color-border); /* （下層確定。PC元値：border無し） */
  padding:40px 0 36px;                      /* （下層確定。PC元値：60px 0 50px） */
}
.footer-info__name{ font-size:16px; font-weight:700; line-height:1.8; } /* （準拠：実値は3-2） */
.footer-info__address{ font-size:14px; margin-top:8px; } /* （準拠） */
.footer-info__tel{ font-size:14px; margin-top:4px; }     /* （準拠） */
/* SNS行（SP新規）：PCフッターにSNSリンクは存在しない */
.footer-sns{ margin-top:22px; display:flex; justify-content:center; gap:26px; } /* （SP新規） */
.footer-sns__item{ display:flex; flex-direction:column; align-items:center; gap:4px; } /* （SP新規） */
.footer-sns__item svg{ width:30px; height:30px; } /* （SP新規：30pxモノクロ#4d4d4d） */
.footer-sns__label{ font-size:10px; color:var(--color-text-light); line-height:1; } /* （SP新規） */
/* .footer-links：footer.php既存マークアップ（u-sp）にSP新規スタイル。
   ※CSS先頭の .u-sp{display:block} と同詳細度のため本ブロックを後方に置き後勝ちでflex化（7-補2） */
.footer-links{
  margin-top:20px;                                       /* （SP新規） */
  display:flex; flex-wrap:wrap; justify-content:center;  /* （SP新規） */
  gap:8px 18px;                                          /* （SP新規） */
}
.footer-links a{
  font-size:14px;  /* （派生：footer-nav 13px） */
  font-weight:500; /* （準拠：footer-nav__list li a） */
  color:#4d4d4d;   /* （準拠：footer-nav__list li a） */
}
.footer-copy{ margin-top:24px; } /* （準拠） */
.footer-copy small{ font-size:13px; color:var(--color-text-muted); letter-spacing:.05em; } /* （準拠） */


/* ================================================================
   ▼▼ 以下、下層フェーズ新設（base-B）。出自タグ：（準拠）＝PC下層カンプ実値
   そのまま／（派生：元値）／（SP新規）。値ブレ裁定は引き継ぎノート参照 ▼▼
   【規律メモ】ページ側でgridを書く際は必ず minmax(0,1fr)＋アイテムmin-width:0
   （1frブローアウト再発防止・トップ実績）。
   ================================================================ */

/* ---------------- L1. パンくず ---------------- */
.breadcrumb{ padding:12px var(--sp-inner-pad) 0; /* （派生：PC 16px 0 0＋左右はmax-width→SPは左右16px） */
  font-size:13px; color:var(--color-text-light); /* （準拠） */
  line-height:1.6; /* （派生：1→SPは折返し前提のため行間確保） */ }
.breadcrumb a{ color:var(--color-text-light); } /* （準拠） */
.breadcrumb a:hover{ color:var(--color-link-hover); text-decoration:underline; } /* （準拠／2026-07-30：AA適合濃緑） */
.breadcrumb .sep{ margin:0 6px; color:var(--color-border); } /* （派生：margin 0 8px→SP幅節約で6px） */
.breadcrumb .current{ color:var(--color-text); font-weight:700; } /* （準拠） */

/* ---------------- L2. ページタイトル ---------------- */
.page-title-area{ padding:20px var(--sp-inner-pad) 0; } /* （派生：PC 32px 0 0） */
.page-title-bar{ display:flex; align-items:stretch; border-bottom:2px solid var(--color-border); /* （準拠） */
  gap:12px; padding-bottom:16px; /* （派生：gap16→12／pb28→16） */ }
.page-title-bar__accent{ width:6px; flex-shrink:0; background:var(--color-brand-green); border-radius:3px; } /* （準拠：❸確定＝緑。7/7修正でservices PCカンプも緑に統一済み＝残課題1解決） */
.page-title-bar__text{ flex:1; } /* （準拠） */
.page-title-bar__label{ font-size:12px; color:var(--color-text-muted); letter-spacing:.15em; margin-bottom:6px; line-height:1; } /* （準拠：多数派。posts-listのmb4は不採用） */
.page-title-bar h1{ font-weight:700; color:var(--color-text-mid); /* （準拠） */
  font-size:22px; line-height:1.45; /* （派生：28px/1.5→SP縮小） */ }

/* ---------------- L3. ページ本体・骨格 ---------------- */
.page-body{ padding:28px var(--sp-inner-pad) 48px; } /* （派生：PC 40px 0 60px。post-detail=上0/posts-list=上32はページ側で上書き） */
.page-lead{ margin-top:16px; /* （派生：22px） */
  font-size:16px; line-height:2; color:var(--color-text); /* （準拠。servicesの15pxはSPでは本文16px原則に統一） */ }
.content-section{ margin-bottom:40px; } /* （派生：48px多数派/40px(gber)→SP統一40px） */
.content-section:last-child{ margin-bottom:0; } /* （準拠） */
.content-section p{ font-size:16px; line-height:2; } /* （準拠） */
.section-heading{ font-weight:700; color:var(--color-text-mid); line-height:1.4; border-left:4px solid var(--color-lime); /* （準拠） */
  font-size:19px; padding-left:12px; margin:0 0 16px; /* （派生：21px/14px/mb20→SP縮小） */ }

/* ---------------- L4. ボタン・アイコン ---------------- */
.btn-cta{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:50px; padding:0 36px 0 20px; background:var(--color-cta); color:var(--color-bg-white);
  border-radius:var(--radius-btn); font-size:16px; font-weight:500; white-space:nowrap;
  transition:opacity .2s; } /* （準拠：service-detail実値＝トップdonate/recruitの197×50共通仕様と同一。幅はコンテンツ依存） */
.btn-cta:hover{ opacity:.85; } /* （準拠） */
.btn-cta .icon-arrow-btn{ position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:10px; height:17px; fill:var(--color-bg-white); } /* （準拠：矢印A） */
.btn-cta--sm{ display:inline-flex; align-items:center; justify-content:center;
  padding:0 20px; background:var(--color-cta); color:var(--color-bg-white); border-radius:var(--radius-btn);
  font-size:13px; font-weight:700; white-space:nowrap; transition:opacity .2s; /* （準拠） */
  height:40px; } /* （派生：38px→タップ目標。トップ投稿ボタンh40の前例に統一） */
.btn-cta--sm:hover{ opacity:.85; } /* （準拠） */
.btn-outline{ display:inline-flex; align-items:center; justify-content:center;
  padding:0 20px; background:var(--color-bg-white); border:1.5px solid var(--color-border);
  border-radius:var(--radius-btn); font-size:13px; font-weight:700; color:var(--color-text-mid);
  white-space:nowrap; transition:border-color .2s; /* （準拠） */
  height:40px; } /* （派生：38px→同上） */
.btn-outline:hover{ border-color:var(--color-text-mid); } /* （準拠） */
.icon-ext{ display:inline-block; width:14px; height:14px; fill:#cacaca; vertical-align:middle; margin-left:6px; flex-shrink:0; } /* （準拠：8ページ共通値。posts-list/post-detailの11px版はページ側上書き） */
.icon-ext-sm{ width:12px; height:12px; fill:var(--color-link-blue); flex-shrink:0; } /* （準拠：service-detail/gber同値） */

/* ---------------- L5. ページ内ジャンプ ---------------- */
.jump-nav{ background:var(--color-bg-hover); border-radius:var(--radius-btn); /* （準拠） */
  padding:14px 16px; margin-bottom:28px; /* （派生：16px 20px／mb32(fc)・36(fd,sd)→SP統一28） */ }
.jump-nav__label{ font-size:12px; color:var(--color-text-muted); margin-bottom:10px; } /* （準拠） */
.jump-nav__list{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } /* （準拠） */
.jump-nav__sep{ color:var(--color-border); font-size:14px; } /* （準拠：facilitiesのみ使用だが3ページ部品の付属としてbase収載） */
.jump-pill{ display:inline-block; border-radius:20px; border:1.5px solid var(--color-border);
  background:var(--color-bg-white); font-size:13px; font-weight:700; color:var(--color-text-mid);
  transition:border-color .2s,color .2s; /* （準拠） */
  padding:8px 14px; } /* （派生：6px 16px→タップ高さ確保で上下+2） */
.jump-pill:hover{ border-color:var(--color-brand-green); color:var(--color-link-hover); } /* （準拠／2026-07-30：文字のみAA適合濃緑・枠は準拠） */
.content-section[id], .fac-card[id], #search-form{ scroll-margin-top:calc(var(--sp-header-h) + 8px); } /* （SP新規v2：sticky着地見切れ回避＝fc/fd/pl/sd同型行4例の昇格。残課題9の7/7消化） */

/* ---------------- L6. 定義リスト行 info-row ---------------- */
.info-row{ display:flex; gap:10px; border-bottom:1px dashed var(--color-border); font-size:14px; line-height:1.6; /* （準拠） */
  padding:8px 0; } /* （派生：6px(fc,sd)/8px(fd)→SP統一8px） */
.info-row--last{ border-bottom:none; } /* （準拠） */
.info-row__label{ font-weight:700; color:var(--color-text-light); font-size:13px; /* （準拠） */
  flex:0 0 5em; } /* （SP新規：PC 40/60/96pxのページ可変→SP既定5em。ページ側で上書き可） */
.info-row__value{ flex:1; color:var(--color-text); } /* （準拠） */
.info-row__note{ font-size:13px; color:var(--color-text-muted); margin-top:2px; } /* （準拠） */

/* ---------------- L7. タグ・バッジ（posts-list基準。post-detailは1段大をページ側上書き） ---------------- */
.cat-tag{ display:inline-block; font-size:11px; font-weight:700; padding:2px 10px; border-radius:3px; white-space:nowrap; line-height:1.5; } /* （準拠：posts-list値） */
.cat-tag--recruit{ background:var(--color-cat-recruit); color:#fff; } /* （準拠） */
.cat-tag--event{ background:var(--color-cat-event); color:#fff; } /* （準拠） */
.cat-tag--paid{ background:var(--color-cat-paid); color:#fff; } /* （準拠） */
.cat-tag--ward{ background:var(--color-cat-ward); color:#fff; } /* （準拠） */
.cat-tag--grant{ background:var(--color-cat-grant); color:#fff; } /* （準拠） */
.cat-tag--disaster{ background:var(--color-cat-disaster); color:#fff; } /* （準拠） */
.cat-tag--other{ background:var(--color-cat-other); color:#fff; } /* （準拠） */
.status-badge{ display:inline-block; font-size:11px; font-weight:700; padding:2px 10px; border-radius:3px; white-space:nowrap; line-height:1.5; } /* （準拠：posts-list値） */
.status-badge--open{ background:var(--color-bg-green-light); color:var(--color-brand-green); } /* （準拠） */
.status-badge--closed{ background:var(--color-bg-hover); color:var(--color-text-muted); } /* （準拠） */
.attr-tag{ display:inline-block; font-size:10px; padding:2px 8px; border-radius:3px; background:var(--color-bg-hover); color:var(--color-text-mid); white-space:nowrap; } /* （準拠：posts-list値） */

} /* /@media (max-width: 768px) SP共通おわり */


/** ================================================================
   ▼▼ CPT工程の追補（2026-07-07）：PC下層L2/L3骨格＋お知らせ系の暫定スタイル
   ================================================================ */

/* PC下層 L2ページタイトル・L3本体骨格（769px〜）＝PC下層カンプの実値
   （値ブレの裁定はsp-base v2の出自コメントに準拠：label mb6＝多数派／
    page-body 40px 0 60px＝多数派。posts-list等のページ固有差は工程③でページ側上書き） */
@media (min-width: 769px) {
  .page-title-area{ max-width:var(--content-max-width); margin:0 auto; padding:32px 0 0; }
  .page-title-bar{ display:flex; align-items:stretch; gap:16px; padding-bottom:28px; border-bottom:2px solid var(--color-border); }
  .page-title-bar__accent{ width:6px; flex-shrink:0; background:var(--color-brand-green); border-radius:3px; }
  .page-title-bar__text{ flex:1; }
  .page-title-bar__label{ font-size:12px; color:var(--color-text-muted); letter-spacing:.15em; margin-bottom:6px; line-height:1; }
  .page-title-bar h1{ font-size:28px; font-weight:700; line-height:1.5; color:var(--color-text-mid); letter-spacing:.02em; }
  .page-body{ max-width:var(--content-max-width); margin:0 auto; padding:40px 0 60px; }
}

/* お知らせ一覧・詳細（暫定＝お知らせ系のカンプ未確定。工程③以降で正式デザインに差し替え）
   タグの見た目は既存 .info-news__tag を再利用。デバイス共通の控えめな値のみ */
.news-list{ margin-top: 4px; }
.news-row{ padding: 14px 0; border-bottom: 1px dashed var(--color-border); }
.news-row__meta{ display: flex; align-items: center; gap: 10px; }
.news-row__date{ font-size: 13px; color: var(--color-text-light); }
.news-row__link{ display: inline-block; margin-top: 4px; font-size: 16px; line-height: 1.7; }
.news-row__link:hover{ color: var(--color-link-hover); text-decoration: underline; } /* 2026-07-30：AA適合濃緑 */
.news-single__meta{ display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.news-single__back{ margin-top: 40px; }

/* ページ送り（暫定：paginate_links / the_posts_pagination 両対応の最低限） */
.pagination-nav{ margin-top: 32px; }
.pagination-nav ul{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pagination-nav .page-numbers,
.navigation.pagination .page-numbers{
  display: inline-block; min-width: 36px; padding: 6px 10px; text-align: center;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-btn);
  font-size: 14px; color: var(--color-text-mid); background: var(--color-bg-white);
}
.pagination-nav .page-numbers.current,
.navigation.pagination .page-numbers.current{
  border-color: var(--color-brand-green); color: var(--color-brand-green); font-weight: 700;
}
.pagination-nav a.page-numbers:hover,
.navigation.pagination a.page-numbers:hover{ border-color: var(--color-text-mid); }
.navigation.pagination .nav-links{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 32px; }


/** ================================================================
   ▼▼ 工程③の追補（2026-07-07）：ボランティア情報 一覧・詳細
   出典：design-posts-list-pc／design-post-detail-pc（新台帳sha 0cb8012d…／58f47038…）
        template-design-posts-list-sp／template-design-post-detail-sp（v9台帳一致）
   構成：デバイス共通の実装補助 → PC（769px〜）逐語転写 → SP（〜768px）逐語転写。
   タグ類（cat-tag等）はPC転写に含み、768px以下は既存base転写（同値）が担当。
   ================================================================ */

/* ---- 実装補助（デバイス共通・実装新規） ---- */
.page-body--postslist{ padding-top:32px; }  /* （準拠：posts-list PC/SP同値の予約上書き） */
.page-body--postdetail{ padding-top:28px; } /* （準拠：post-detail PCインラインstyleの複製＝原則1） */
.back-nav .btn-outline{ height:44px; padding:0 28px; font-size:14px; } /* （準拠：PCカンプのインラインstyle複製＝原則1） */
.req-grid--noimg{ grid-template-columns:minmax(0,1fr); } /* （実装新規：画像添付なし時は1列） */
.search-inline{ display:flex; gap:8px; } /* （トップ確定型。PCではSP用検索ボタンが非表示のため入力のみの1行） */
.search-inline .search-field{ flex:1; min-width:0; }
/* チェックボックス・ラジオの実装（カンプは静的装飾のため実入力を不可視で併設） */
.filter-check{ position:relative; }
.filter-check input,
.status-chip input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.filter-check__box{ position:relative; }
.filter-check input:checked + .filter-check__box{ background:var(--color-brand-green); border-color:var(--color-brand-green); }
.filter-check input:checked + .filter-check__box::after{ content:''; position:absolute; left:4px; top:1px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }

/* ================================================================
   PC（769px〜）＝design-posts-list-pc 逐語転写（.page-lead〜pager。
   btn-cta等の既存重複を含むが同値のため実害なし）
   ================================================================ */
@media (min-width: 769px) {

.page-lead { font-size: 16px; /* style.css body 準拠（15pxではない）*/ line-height: 2; color: var(--color-text); margin-top: 22px; }

/* ===== Page Body ===== */
.page-body { max-width: var(--content-max-width); margin: 0 auto; padding: 32px 0 60px; }

/* ===== Buttons (from ❶/❹) ===== */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 28px;
  background: var(--color-cta); color: var(--color-bg-white);
  border-radius: var(--radius-btn); font-size: 14px; font-weight: 700;
  white-space: nowrap; transition: opacity 0.2s;
}
.btn-cta:hover { opacity: 0.85; }
.btn-cta--lg { height: 48px; padding: 0 40px; font-size: 15px; }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 20px;
  background: var(--color-bg-white); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn); font-size: 13px; font-weight: 700;
  color: var(--color-text-mid); white-space: nowrap; transition: border-color 0.2s;
}
.btn-outline:hover { border-color: var(--color-text-mid); }
.btn-outline--lg { height: 44px; padding: 0 36px; font-size: 14px; }

/* ===== Icon ext ===== */
.icon-ext { width: 11px; height: 11px; fill: var(--color-text-muted); vertical-align: -1px; margin-left: 3px; }

/* ===== ❼ Post Button — style.css .info-vol__post-btn 準拠（テンプレート設置箇所）===== */
.post-btn-wrap {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-end;
}
.post-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; /* style.css: .info-vol__post-btn 準拠 */
  padding: 0 36px 0 20px; /* style.css: .info-vol__post-btn padding 応用 */
  background: var(--color-cta); color: #fff;
  border-radius: var(--radius-btn); /* style.css 準拠: 5px */
  font-size: 16px; font-weight: 500; /* style.css: .info-vol__post-btn 準拠 */
  white-space: nowrap; transition: opacity 0.2s;
}
.post-btn:hover { opacity: 0.85; /* style.css: CTA共通hover 準拠 */ }
.post-btn .icon-arrow-btn {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 17px; fill: #fff; /* style.css: .info-vol__post-btn .icon-arrow-btn 準拠 */
}

/* ===== ❼ Search Form（style.css: .info-vol 枠線準拠）===== */
.search-form {
  background: var(--color-bg-white);
  border: 2px solid var(--color-border); /* style.css: .info-vol 準拠 */
  border-radius: var(--radius-btn); /* style.css: .info-vol 準拠 */
  padding: 24px;
  margin-bottom: 20px;
}
.search-row {
  display: flex; gap: 24px; align-items: flex-end;
  margin-bottom: 18px;
}
.search-group { }
.search-group--keyword { flex: 1; max-width: 480px; }
.search-group--status { flex-shrink: 0; }
.search-group__label { font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.search-field {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--color-text-mid); /* style.css: .info-vol__search-input 準拠 */
  border-radius: 3px; /* style.css: .info-vol__search-input 準拠 */
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg-white);
  font-family: var(--font-family);
  outline: none;
  transition: border-color 0.2s;
}
.search-field::placeholder { color: var(--color-border); /* style.css: .info-vol__search-input::placeholder 準拠 */ }
.search-field:focus { border-color: var(--color-brand-green); }

/* status chips — ❼新規：❹ .jump-pill ベースの募集状態トグル */
.status-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-white);
  font-size: 13px; font-weight: 700;
  color: var(--color-text-mid);
  cursor: pointer;
  transition: all 0.2s;
}
.status-chip:hover { border-color: var(--color-text-mid); }
.status-chip.is-selected { border-color: var(--color-brand-green); background: var(--color-bg-green-light); color: var(--color-brand-green); }
.status-chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}

/* filter toggle */
.filter-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  font-size: 13px; font-weight: 700;
  color: var(--color-link-blue);
  cursor: pointer;
  border: 1.5px solid var(--color-link-blue);
  border-radius: 20px;
  background: var(--color-bg-white);
  font-family: var(--font-family);
  transition: background 0.2s, color 0.2s;
}
.filter-toggle:hover { background: var(--color-bg-blue-light); }
.filter-toggle__caret { font-size: 11px; }

/* filter body */
.filter-body { border-top: 1px dashed var(--color-border); padding-top: 16px; display: none; }
.filter-body.is-open { display: block; }
.filter-group--detail { margin-bottom: 14px; }
.filter-group--detail:last-child { margin-bottom: 0; }
.filter-checks { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.filter-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--color-text);
  padding: 4px 0;
  cursor: pointer;
}
.filter-check__box {
  width: 16px; height: 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-bg-white);
  flex-shrink: 0;
}

/* search submit — ❼修正：style.css .info-vol__search-btn 準拠（オレンジCTAではない）*/
.search-submit {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.btn-search {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 40px;
  border: 2px solid var(--color-text); /* style.css: .info-vol__search-btn 準拠 */
  border-radius: 3px; /* style.css: .info-vol__search-btn 準拠 */
  background: var(--color-bg-white);
  font-size: 15px; /* style.css: .info-vol__search-btn 準拠 */
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-family);
  transition: background 0.2s;
}
.btn-search:hover { background: var(--color-bg-hover); /* style.css: .info-vol__search-btn:hover 準拠 */ }
.search-reset {
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.search-reset:hover { color: var(--color-text-mid); }

/* ===== ❼ Active Condition Chips ===== */
.conditions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.conditions__label { font-size: 12px; color: var(--color-text-muted); font-weight: 700; flex-shrink: 0; }
.cond-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px;
  border-radius: 14px;
  background: var(--color-bg-salmon);
  font-size: 12px; font-weight: 700;
  color: var(--color-text-mid); /* ❼修正：オレンジはCTA専用。装飾チップには非オレンジ色 */
  cursor: pointer;
  transition: opacity 0.2s;
}
.cond-chip:hover { opacity: 0.7; }
.cond-chip__x { font-size: 14px; line-height: 1; }

/* ===== ❼ Result Meta ===== */
.result-meta {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
}
.result-count { font-size: 14px; color: var(--color-text-mid); }
.result-count strong { color: var(--color-text); font-size: 18px; }
.sort-select {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--color-text-muted);
}
.sort-btn {
  display: inline-flex; align-items: center;
  padding: 5px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-bg-white);
  font-size: 13px; color: var(--color-text-mid);
  cursor: pointer;
}

/* ===== ❼ Post List（style.css: .info-vol 枠線・.info-vol__item-body 区切り線 準拠）===== */
.post-list {
  background: var(--color-bg-white);
  border: 2px solid var(--color-border); /* style.css: .info-vol 準拠 */
  border-radius: var(--radius-btn); /* style.css: .info-vol 準拠 */
  margin-bottom: 28px;
}
.post-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 20px;
  border-bottom: 1px dashed var(--color-border-light); /* style.css: .info-vol__item-body 準拠 */
  transition: background 0.15s;
}
.post-item:last-child { border-bottom: none; }
.post-item:hover { background: var(--color-bg-hover); }
.post-item__pin {
  width: 30px; flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 5px;
}
.post-item__pin svg {
  width: 18px; height: 18px;
  fill: var(--color-text-mid);
  transform: rotate(30deg);
}
.post-item__body { flex: 1; min-width: 0; }
.post-item__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.post-item__title {
  font-size: 16px; font-weight: 500; color: var(--color-text-mid); /* style.css: .info-vol__link 準拠 */
  line-height: 1.7; /* style.css: .info-vol__link 準拠 */
  transition: color 0.15s;
}
.post-item:hover .post-item__title { color: var(--color-link-hover); } /* 2026-07-30：AA適合濃緑 */
.post-item--closed .post-item__title { color: var(--color-text-muted); }
.post-item--closed:hover .post-item__title { color: var(--color-text-light); }
.post-item__date { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }

/* category tags */
.cat-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 2px 10px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.5;
}
/* category tags */
.cat-tag--recruit   { background: var(--color-cat-recruit); color: #fff; }
.cat-tag--event     { background: var(--color-cat-event); color: #fff; }
.cat-tag--paid      { background: var(--color-cat-paid); color: #fff; }
.cat-tag--ward      { background: var(--color-cat-ward); color: #fff; }
.cat-tag--grant     { background: var(--color-cat-grant); color: #fff; }
.cat-tag--disaster  { background: var(--color-cat-disaster); color: #fff; }
.cat-tag--other     { background: var(--color-cat-other); color: #fff; }

/* status badge */
.status-badge {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 2px 10px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.5;
}
.status-badge--open   { background: var(--color-bg-green-light); color: var(--color-brand-green); }
.status-badge--closed { background: var(--color-bg-hover); color: var(--color-text-muted); }

/* attribute tags */
.attr-tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--color-bg-hover);
  color: var(--color-text-mid);
  white-space: nowrap;
  line-height: 1.5;
}

/* ===== ❼ Pagination ===== */
.pagination-area { text-align: center; margin-bottom: 0; }
.btn-more { margin-bottom: 20px; }
.pager { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.pager__item {
  min-width: 34px; height: 34px;
  padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-bg-white);
  color: var(--color-text-mid);
  transition: all 0.2s;
  cursor: pointer;
}
.pager__item:hover { border-color: var(--color-text-mid); color: var(--color-text); }
.pager__item.is-current {
  background: var(--color-brand-green); /* ❼修正：オレンジはCTA専用。状態表示は --color-brand-green（❻拠点ナビと統一）*/
  border-color: var(--color-brand-green);
  color: #fff; font-weight: 700;
  cursor: default;
}
.pager__item.is-current:hover { border-color: var(--color-brand-green); color: #fff; }

/* ---- design-post-detail-pc 逐語転写（Post Title Block〜Back Nav） ---- */

/* ===== ❽ Post Title Block（投稿タイトル — ワイヤーフレームD準拠）===== */
.post-title-area { max-width: var(--content-max-width); margin: 0 auto; padding: 28px 0 0; }
.post-title-block { padding-bottom: 20px; border-bottom: 2px solid var(--color-border); }
.post-title-block__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.post-title-block__date { font-size: 13px; color: var(--color-text-muted); letter-spacing: 0.05em; margin-bottom: 6px; }
.post-title-block h1 { font-size: 24px; font-weight: 700; line-height: 1.6; color: var(--color-text); }

/* ===== ❽ Closed Notice — ❽新規：募集終了時の注意書き（仕様書準拠）===== */
.closed-notice {
  padding: 14px 18px;
  background: var(--color-bg-salmon);
  border-left: 4px solid var(--color-cta);
  border-radius: var(--radius-btn);
  margin-bottom: 28px;
}
.closed-notice__title { font-size: 14px; font-weight: 700; color: #d4613a; }
.closed-notice__text { font-size: 13px; color: var(--color-text-mid); margin-top: 4px; }

/* ===== ❽ Post Content（本文 — style.css .info-vol 枠線準拠）===== */
.post-content {
  background: var(--color-bg-white);
  border: 2px solid var(--color-border); /* style.css: .info-vol 準拠 */
  border-radius: var(--radius-btn); /* style.css: .info-vol 準拠 */
  padding: 24px;
  margin-bottom: 28px;
}
.post-content__body { font-size: 16px; /* style.css body 準拠（15pxではない）*/ line-height: 2; color: var(--color-text); }

/* ===== ❽ Requirements Grid（募集要項 — style.css .info-vol 枠線準拠）===== */
.req-section {
  background: var(--color-bg-white);
  border: 2px solid var(--color-border); /* style.css: .info-vol 準拠 */
  border-radius: var(--radius-btn); /* style.css: .info-vol 準拠 */
  padding: 24px;
  margin-bottom: 28px;
}
.req-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.req-item { margin-bottom: 18px; }
.req-item:last-child { margin-bottom: 0; }
.req-item__label {
  font-size: 14px; font-weight: 700; color: var(--color-text);
  padding-left: 12px; border-left: 3px solid var(--color-brand-green);
  margin-bottom: 6px; line-height: 1.4;
}
.req-item__value { font-size: 14px; color: var(--color-text); line-height: 1.8; padding-left: 15px; }
.req-images__label { font-size: 12px; color: var(--color-text-muted); margin-bottom: 10px; }

/* ===== Photo Frame（❹で確立：img fallback対応）===== */
.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2; /* ❹確定 */
  background: var(--color-bg-hover); /* ❹確定 */
  border: 1px dashed var(--color-border); /* ❹確定 */
  border-radius: var(--radius-btn);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.photo-frame:last-child { margin-bottom: 0; }
.photo-frame.has-image { border-color: transparent; background: transparent; }
.photo-frame::after { content: attr(data-label); font-size: 13px; color: var(--color-text-muted); position: absolute; pointer-events: none; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.photo-frame img[data-failed] { display: none; }

/* ===== ❽ PDF Attachment（添付資料 — style.css .info-vol 枠線準拠）===== */
.attach-section {
  background: var(--color-bg-white);
  border: 2px solid var(--color-border); /* style.css: .info-vol 準拠 */
  border-radius: var(--radius-btn); /* style.css: .info-vol 準拠 */
  padding: 20px 24px;
  margin-bottom: 28px;
}
.attach-label { font-size: 12px; font-weight: 700; color: var(--color-text-muted); margin-bottom: 10px; }
.attach-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  font-size: 13px; font-weight: 700; color: var(--color-text-mid);
  transition: border-color 0.2s;
}
.attach-link:hover { border-color: var(--color-text-mid); }
.attach-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  color: #fff; background: var(--color-link-blue); /* ❽修正：オレンジはCTA専用。ファイル系は --color-link-blue（❶ドキュメントリンク準拠）*/
  padding: 1px 6px; border-radius: 2px; line-height: 1.5;
}

/* ===== ❽ Contact Table（問合せ先 — ❸ .info-table 応用）===== */
.contact-section { margin-bottom: 28px; }
.contact-heading { font-size: 18px; font-weight: 700; color: var(--color-text); margin-bottom: 14px; }
.contact-tbl {
  width: 100%; border-collapse: collapse;
  font-size: 14px; background: var(--color-bg-white);
  border: 1px solid var(--color-border); border-radius: var(--radius-btn); overflow: hidden;
}
.contact-tbl td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); vertical-align: top; line-height: 1.7; }
.contact-tbl tr:last-child td { border-bottom: none; }
.contact-tbl .c-key {
  width: 130px; background: var(--color-bg-hover);
  color: var(--color-text-mid); font-weight: 700; white-space: nowrap;
}
.contact-tbl .c-note { display: block; font-size: 11px; color: var(--color-brand-green); margin-top: 2px; }

/* ===== ❽ GBER Note ===== */
.gber-note {
  padding: 12px 16px;
  background: var(--color-bg-blue-light);
  border-radius: var(--radius-btn);
  margin-bottom: 28px;
}
.gber-note__text { font-size: 13px; color: var(--color-text-mid); line-height: 1.8; }
.gber-note__text a { color: var(--color-link-blue); font-weight: 700; }
.gber-note__text a:hover { text-decoration: underline; }

/* ===== ❽ Back Nav ===== */
.back-nav { text-align: center; margin-bottom: 0; }

} /* /@media (min-width:769px) 工程③PCおわり */

/* ================================================================
   SP（〜768px）＝posts-list／post-detail SPカンプのページ固有CSSを逐語転写
   （出自タグ付き。一覧の表示順＝乙案はモディファイア .page-body--postslist で限定適用）
   ================================================================ */
@media (max-width: 768px) {

/* ---- 予約上書き（ノート§5） ---- */
.page-body--postslist{ padding-top:32px; } /* （準拠：PC 32px 0 60px。base28pxの予約上書き＝ノート§5。実装＝一覧ページ限定のためモディファイア化） */

/* ---- 表示順の再配置（7/7修正指示・乙案） ---- */
.page-body--postslist{ display:flex; flex-direction:column; } /* （7/7修正指示・乙案：SPのみ表示順変更のためのフレックス化。DOM順＝PC準拠を維持。実装＝一覧ページ限定のためモディファイア化） */
.page-body--postslist .search-form{ order:1; margin-top:28px; margin-bottom:0; } /* （7/7修正指示・乙案：フォームのみ末尾へ＝他要素は既定order:0でDOM順のまま。末尾配置に伴い上28px/下0（元＝下20px）。読み上げ順はDOM準拠＝アンカー直後にフォーム） */
.search-jump{ margin-bottom:14px; } /* （SP新規：末尾フォームへのアンカーピル行） */
/* #search-formのページ内ジャンプ着地行はbase v2へ昇格（7/7・残課題9消化） */

/* ---- ページタイトル行の投稿ボタン ---- */
.page-title-bar{ flex-wrap:wrap; } /* （SP新規：投稿ボタンを段落ちさせる。1段目＝アクセント＋タイトル） */
.post-btn-wrap{ flex:0 0 100%; min-width:0; display:flex; justify-content:flex-end; margin-top:14px; } /* （派生：PC右下寄せcolumn→SPは全幅行の右寄せ） */
.post-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; height:50px; padding:0 36px 0 20px; background:var(--color-cta); color:#fff; border-radius:var(--radius-btn); font-size:16px; font-weight:500; white-space:nowrap; transition:opacity .2s; } /* （準拠：style.css .info-vol__post-btn系＝base btn-ctaと同値） */
.post-btn:hover{ opacity:.85; } /* （準拠） */
.post-btn .icon-arrow-btn{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:10px; height:17px; fill:#fff; } /* （準拠：矢印A） */

/* ---- 検索フォーム（❼） ---- */
.search-form{ background:var(--color-bg-white); border:2px solid var(--color-border); border-radius:var(--radius-btn); margin-bottom:20px; /* （準拠） */
  padding:16px; } /* （派生：24px→SP内余白） */
.search-row{ display:flex; margin-bottom:18px; /* （準拠） */
  flex-direction:column; align-items:stretch; gap:16px; } /* （派生：横並びgap24・下端揃え→SP縦積みgap16） */
.search-group--keyword{ flex:1; /* （準拠） */
  max-width:none; } /* （派生：480px→SP全幅） */
.search-group--status{ flex-shrink:0; } /* （準拠） */
.search-group__label{ font-size:13px; font-weight:700; color:var(--color-text); margin-bottom:8px; } /* （準拠） */
.search-inline{ display:flex; gap:8px; } /* （トップ確定：info-vol__search＝7/7修正指示A案の1行型コンテナ） */
.search-field{ flex:1; min-width:0; height:40px; /* （トップ確定：info-vol__search-input） */
  border:1px solid var(--color-border-light); border-radius:3px; padding:0 12px; /* （7/7修正指示：枠線・余白をSPトップ実値に統一。元＝2px・#4d4d4d・pad10 14） */
  font-size:16px; font-family:inherit; /* （トップ確定：iOS自動ズーム回避16px＝当ページ旧派生と同値） */
  color:var(--color-text); background:var(--color-bg-white); outline:none; transition:border-color .2s; } /* （準拠：PC下層値を継続） */
.search-field::placeholder{ color:var(--color-border); font-size:12px; } /* （トップ確定：表示12px） */
.search-field:focus{ border-color:var(--color-brand-green); } /* （準拠） */

/* status chips（❼新規・jump-pillベース） */
.status-chips{ display:flex; gap:10px; flex-wrap:wrap; } /* （準拠。7/7裁定：wrap維持＝スクロール化・縮小は不要） */
.status-chip{ display:inline-flex; align-items:center; gap:6px; border-radius:20px; border:1.5px solid var(--color-border); background:var(--color-bg-white); font-size:13px; font-weight:700; color:var(--color-text-mid); cursor:pointer; transition:all .2s; /* （準拠） */
  padding:8px 16px; } /* （派生：6px 16px→jump-pillと同じタップ高さ+2裁定） */
.status-chip:hover{ border-color:var(--color-text-mid); } /* （準拠） */
.status-chip.is-selected{ border-color:var(--color-brand-green); background:var(--color-bg-green-light); color:var(--color-brand-green); } /* （準拠） */
.status-chip__dot{ width:8px; height:8px; border-radius:50%; background:currentColor; } /* （準拠） */

.chips-row{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; } /* （7/7修正指示：チップ＋絞り込みトグルを同一行化。※375pxではトグル文言長により2段に折返し） */

/* filter toggle・filter body */
.filter-toggle{ display:inline-flex; align-items:center; gap:6px; padding:8px 18px; font-size:13px; font-weight:700; color:var(--color-link-blue); cursor:pointer; border:1.5px solid var(--color-link-blue); border-radius:20px; background:var(--color-bg-white); font-family:var(--font-family); transition:background .2s,color .2s; } /* （準拠） */
.filter-toggle:hover{ background:var(--color-bg-blue-light); } /* （準拠） */
.filter-toggle__caret{ font-size:11px; } /* （準拠） */
.filter-body{ border-top:1px dashed var(--color-border); padding-top:16px; display:none; } /* （準拠） */
.filter-body.is-open{ display:block; } /* （準拠） */
.filter-group--detail{ margin-bottom:14px; } /* （準拠） */
.filter-group--detail:last-child{ margin-bottom:0; } /* （準拠） */
.filter-checks{ display:flex; flex-wrap:wrap; gap:4px 20px; } /* （準拠） */
.filter-check{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--color-text); cursor:pointer; /* （準拠） */
  padding:6px 0; } /* （派生：4px 0→タップ高さ確保） */
.filter-check__box{ width:16px; height:16px; border:1.5px solid var(--color-border); border-radius:3px; background:var(--color-bg-white); flex-shrink:0; } /* （準拠） */

/* search submit（❼修正：非オレンジの検索ボタン） */
/* （7/7修正指示：旧「この条件で検索する」送信ブロック＝.search-submitは廃止。検索は上部1行型ボタンへ） */
.btn-search{ width:64px; height:40px; flex-shrink:0; /* （トップ確定：info-vol__search-btn） */
  border:1px solid var(--color-border-light); border-radius:3px; font-size:14px; /* （7/7修正指示：枠線をSPトップ実値に統一。元＝h46・2px・#333・15px） */
  background:#fff; color:#333; cursor:pointer; transition:background .2s; font-family:inherit; } /* （トップ確定） */
.btn-search:hover{ background:var(--color-bg-hover); } /* （準拠：PC下層hover挙動を継続） */
.filter-reset-row{ margin-top:14px; } /* （SP新規：リセット移設先の行間） */
.search-reset{ font-size:13px; color:var(--color-text-muted); text-decoration:underline; cursor:pointer; } /* （準拠） */
.search-reset:hover{ color:var(--color-text-mid); } /* （準拠） */

/* ---- 適用中の条件チップ（❼） ---- */
.conditions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; } /* （準拠） */
.conditions__label{ font-size:12px; color:var(--color-text-muted); font-weight:700; flex-shrink:0; } /* （準拠） */
.cond-chip{ display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border-radius:14px; background:var(--color-bg-salmon); font-size:12px; font-weight:700; color:var(--color-text-mid); cursor:pointer; transition:opacity .2s; } /* （準拠：非オレンジ＝❼修正の色裁定込み） */
.cond-chip:hover{ opacity:.7; } /* （準拠） */
.cond-chip__x{ font-size:14px; line-height:1; } /* （準拠） */

/* ---- 件数・並び順（❼） ---- */
.result-meta{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px; } /* （準拠：wrap既定によりSPは自然2段化） */
.result-count{ font-size:14px; color:var(--color-text-mid); } /* （準拠） */
.result-count strong{ color:var(--color-text); font-size:18px; } /* （準拠） */
.sort-select{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--color-text-muted); } /* （準拠） */
.sort-btn{ display:inline-flex; align-items:center; padding:5px 14px; border:1.5px solid var(--color-border); border-radius:var(--radius-btn); background:var(--color-bg-white); font-size:13px; color:var(--color-text-mid); cursor:pointer; } /* （準拠） */

/* ---- 投稿リスト（❼） ---- */
.post-list{ background:var(--color-bg-white); border:2px solid var(--color-border); border-radius:var(--radius-btn); margin-bottom:28px; } /* （準拠） */
.post-item{ display:flex; align-items:flex-start; border-bottom:1px dashed var(--color-border-light); transition:background .15s; /* （準拠） */
  gap:10px; padding:14px 12px; } /* （派生：gap12・pad16px 20px→SP圧縮） */
.post-item:last-child{ border-bottom:none; } /* （準拠） */
.post-item:hover{ background:var(--color-bg-hover); } /* （準拠） */
.post-item__pin{ flex-shrink:0; display:flex; align-items:flex-start; justify-content:center; padding-top:5px; /* （準拠） */
  width:24px; } /* （派生：30px→SP圧縮。ピン有無の字下げ揃えは維持） */
.post-item__pin svg{ width:18px; height:18px; fill:var(--color-text-mid); transform:rotate(30deg); } /* （準拠） */
.post-item__body{ flex:1; min-width:0; } /* （準拠：min-width:0は規律メモとも整合） */
.post-item__tags{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:6px; } /* （準拠） */
.post-item__title{ font-size:16px; font-weight:500; color:var(--color-text-mid); line-height:1.7; transition:color .15s; } /* （準拠） */
.post-item:hover .post-item__title{ color:var(--color-link-hover); } /* （準拠／2026-07-30：AA適合濃緑） */
.post-item--closed .post-item__title{ color:var(--color-text-muted); } /* （準拠） */
.post-item--closed:hover .post-item__title{ color:var(--color-text-light); } /* （準拠） */
.post-item__date{ font-size:12px; color:var(--color-text-muted); margin-top:4px; } /* （準拠） */

/* ---- ページネーション（❼） ---- */
.pagination-area{ text-align:center; margin-bottom:0; } /* （準拠） */
.btn-more{ margin-bottom:20px; } /* （準拠） */
.btn-outline--lg{ height:44px; padding:0 36px; font-size:14px; } /* （準拠：PC --lg実値。base .btn-outline(h40)への付加修飾） */
.pager{ display:flex; gap:4px; justify-content:center; flex-wrap:wrap; } /* （準拠：wrap既定によりSPは2段化） */
.pager__item{ min-width:34px; height:34px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; border:1px solid var(--color-border); border-radius:var(--radius-btn); background:var(--color-bg-white); color:var(--color-text-mid); transition:all .2s; cursor:pointer; } /* （準拠） */
.pager__item:hover{ border-color:var(--color-text-mid); color:var(--color-text); } /* （準拠） */
.pager__item.is-current{ background:var(--color-brand-green); border-color:var(--color-brand-green); color:#fff; font-weight:700; cursor:default; } /* （準拠：❼修正＝状態表示は緑統一） */
.pager__item.is-current:hover{ border-color:var(--color-brand-green); color:#fff; } /* （準拠） */

/* ---- post-detail SPページ固有 ---- */

/* ---- 予約上書き（ノート§5） ---- */
/* .page-body上パディング＝下の共通「--postdetail」28pxで付与（PCインラインstyleの準拠複製） */

/* ---- タグ類の1段大上書き（ノート§5・PC詳細値） ---- */
.cat-tag{ font-size:12px; padding:3px 12px; } /* （準拠：base一覧値11px/2px 10pxの1段大上書き） */
.status-badge{ font-size:12px; padding:3px 12px; } /* （準拠：同上） */
.attr-tag{ font-size:11px; padding:3px 10px; } /* （準拠：base一覧値10px/2px 8pxの1段大上書き） */

/* ---- 記事ヘッダー（投稿タイトル＝ワイヤーフレームD準拠） ---- */
.post-title-area{ padding:20px var(--sp-inner-pad) 0; } /* （派生：PC 28px 0 0→base L2 page-title-areaと同裁定＝上20・左右16px） */
.post-title-block{ padding-bottom:20px; border-bottom:2px solid var(--color-border); } /* （準拠） */
.post-title-block__tags{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; } /* （準拠） */
.post-title-block__date{ font-size:13px; color:var(--color-text-muted); letter-spacing:.05em; margin-bottom:6px; } /* （準拠） */
.post-title-block h1{ font-weight:700; line-height:1.6; color:var(--color-text); /* （準拠） */
  font-size:22px; } /* （派生：24px→SPのh1はbase L2の22pxに統一＝page-title-bar h1(22px)との序列逆転回避） */

/* ---- 募集終了の注意書き ---- */
.closed-notice{ padding:14px 18px; background:var(--color-bg-salmon); border-left:4px solid var(--color-cta); border-radius:var(--radius-btn); margin-bottom:28px; } /* （準拠） */
.closed-notice__title{ font-size:14px; font-weight:700; color:#d4613a; } /* （準拠） */
.closed-notice__text{ font-size:13px; color:var(--color-text-mid); margin-top:4px; } /* （準拠） */

/* ---- 本文枠（style.css .info-vol 枠線準拠） ---- */
.post-content{ background:var(--color-bg-white); border:2px solid var(--color-border); border-radius:var(--radius-btn); margin-bottom:28px; /* （準拠） */
  padding:16px; } /* （派生：24px→SP内余白。posts-list search-formの24→16と同裁定） */
.post-content__body{ font-size:16px; line-height:2; color:var(--color-text); } /* （準拠：本文16px＝style.css body準拠） */

/* ---- 募集要項＋画像 ---- */
.req-section{ background:var(--color-bg-white); border:2px solid var(--color-border); border-radius:var(--radius-btn); margin-bottom:28px; /* （準拠） */
  padding:16px; } /* （派生：24px→SP内余白） */
.req-grid{ display:grid; gap:24px; align-items:start; /* （準拠） */
  grid-template-columns:minmax(0,1fr); } /* （派生：1.4fr 1fr 2列→SP1列縦積み＝要項の下に画像。minmax(0,1fr)＝base規律メモ） */
.req-grid > *{ min-width:0; } /* （SP新規：規律メモ） */
.req-item{ margin-bottom:18px; } /* （準拠） */
.req-item:last-child{ margin-bottom:0; } /* （準拠） */
.req-item__label{ font-size:14px; font-weight:700; color:var(--color-text); padding-left:12px; border-left:3px solid var(--color-brand-green); margin-bottom:6px; line-height:1.4; } /* （準拠） */
.req-item__value{ font-size:14px; color:var(--color-text); line-height:1.8; padding-left:15px; } /* （準拠） */
.photo-frame{ margin-bottom:10px; } /* （準拠：PCページCSSの余白。base photo-frameは余白なし＝同一文字列維持のためページ側で付与） */
.photo-frame:last-child{ margin-bottom:0; } /* （準拠） */

/* ---- 添付資料（style.css .info-vol 枠線準拠） ---- */
.attach-section{ background:var(--color-bg-white); border:2px solid var(--color-border); border-radius:var(--radius-btn); margin-bottom:28px; /* （準拠） */
  padding:16px; } /* （派生：20px 24px→SP内余白） */
.attach-label{ font-size:12px; font-weight:700; color:var(--color-text-muted); margin-bottom:10px; } /* （準拠） */
.attach-link{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1.5px solid var(--color-border); border-radius:var(--radius-btn); font-size:13px; font-weight:700; color:var(--color-text-mid); transition:border-color .2s; } /* （準拠） */
.attach-link:hover{ border-color:var(--color-text-mid); } /* （準拠） */
.attach-badge{ display:inline-block; font-size:10px; font-weight:700; color:#fff; background:var(--color-link-blue); padding:1px 6px; border-radius:2px; line-height:1.5; } /* （準拠：ファイル系バッジは--color-link-blue＝PC❽裁定） */

/* ---- 問合せ・申込み（❸ .info-table 応用） ---- */
.contact-section{ margin-bottom:28px; } /* （準拠） */
.contact-heading{ font-size:18px; font-weight:700; color:var(--color-text); margin-bottom:14px; } /* （準拠） */
.contact-tbl{ width:100%; border-collapse:collapse; font-size:14px; background:var(--color-bg-white); border:1px solid var(--color-border); border-radius:var(--radius-btn); overflow:hidden; } /* （準拠） */
.contact-tbl td{ padding:10px 14px; border-bottom:1px solid var(--color-border); vertical-align:top; line-height:1.7; } /* （準拠） */
.contact-tbl tr:last-child td{ border-bottom:none; } /* （準拠） */
.contact-tbl .c-key{ width:130px; background:var(--color-bg-hover); color:var(--color-text-mid); font-weight:700; white-space:nowrap; } /* （準拠：ラベル幅130px維持＝about/fdのth120px準拠維持と同扱い。e-mail等の長値はtable自動レイアウトの列詰めで吸収） */

/* ---- GBER掲載注記 ---- */
.gber-note{ padding:12px 16px; background:var(--color-bg-blue-light); border-radius:var(--radius-btn); margin-bottom:28px; } /* （準拠） */
.gber-note__text{ font-size:13px; color:var(--color-text-mid); line-height:1.8; } /* （準拠） */
.gber-note__text a{ color:var(--color-link-blue); font-weight:700; } /* （準拠） */
.gber-note__text a:hover{ text-decoration:underline; } /* （準拠） */

/* ---- 一覧へ戻る ---- */
.back-nav{ text-align:center; margin-bottom:0; } /* （準拠。ボタン寸法h44/pad0 28/14px＝PCインラインstyleの準拠複製＝原則1） */

} /* /@media (max-width:768px) 工程③SPおわり */


/* ================================================================
   u-pc / u-sp の最終上書き（2026-07-07修正）
   工程③でボタン類（.filter-toggle等）にdisplay指定が付き、後勝ちで
   出し分けを破っていたため、ファイル末尾で!importantにより確定させる。
   ================================================================ */
@media (min-width: 769px) { .u-sp { display: none !important; } }
@media (max-width: 768px) { .u-pc { display: none !important; } }


/* ================================================================
   ▼▼ SPトップ固有（2026-07-07）：template-design-toppage-sp 転写 ▼▼
   base転写済み・工程③既収載と重複しない差分のみ（出自タグ保持）。
   実装調整3点＝矢印ラッパー維持／svc-cards--sp→.svc-cards＋行contents化／
   カード画像の直img寸法。:root（--sp-*）とsp-nav__utilityはbase v2側が正のため非転写。
   ================================================================ */
@media (max-width: 768px) {

/* ---------------- :root トークン（下層確定・下層①〜⑧と完全一致） ---------------- */
/* （準拠：main-menu__label） */
/* ユーティリティ4項目（header.phpから移設・順序準拠） */
/* （7/3修正指示：下線リンク＝PCカンプ準拠） */

/* ---------------- B. MV ---------------- */
.MV{ max-width:1160px; margin:8px auto 0; }

/* （準拠）8px＝お知らせ帯との間のみ。MV直下は詰めたまま（直後に sec-info の padding 24px 0 が続く＝v1確定） */
.MV img{
  width:100%; height:auto; aspect-ratio:375/210; object-fit:cover; /* （SP専用MV素材 MV_sp.jpg 750×420＝表示375×210のretina2x。7/4受領・反映＝要判断③解決。旧PC素材用のobject-position補正（calc(50% - 8px)）は撤去。2026-08-06修正：高さ固定→縦横比固定＝横向きでもコピー文言まで全体が切れず表示） */
}

/* ---------------- D. 情報エリア（sec-info：新着→お知らせ→すぐわかる の縦積み） ---------------- */
.sec-info{ padding:24px 0; }

/* （準拠） */
.info-grid{
  display:grid;                          /* （準拠） */
  grid-template-columns:minmax(0, 1fr); /* （派生：1.2fr 1fr）※minmax(0,…)はSP新規＝1frの暗黙min(auto)が内容幅でトラックを375px枠外へ広げる「グリッド・ブローアウト」の防止 */
  gap:20px;                              /* （準拠） */
  align-items:stretch;                   /* （準拠） */
}

.info-vol, .info-right{ min-width:0; }

/* （SP新規：グリッドアイテムの自動最小幅を解放＝343px内に確実に収める） */
.info-right{ display:flex; flex-direction:column; gap:20px; }

/* （準拠のままSPで使用：news→about間の20pxを確保。ラッパごと維持＝3-3） */

/* --- 新着ボランティア情報 --- */
.info-vol{
  display:flex; flex-direction:column;                      /* （準拠） */
  border:2px solid var(--color-border); border-radius:5px;  /* （準拠） */
  padding:22px 16px;                                        /* （派生：30px 28px） */
  /* min-height:696px → SPでは解除（派生） */
}

.info-vol__title{ font-size:19px; font-weight:500; color:#4d4d4d; line-height:1.4; }

/* （準拠） */
/* SP内部順は要判断⑦：タイトル→検索(mt14)→ヒント(mt12・右寄せ)→投稿(mt6・右寄せ)→タブ(mt16)→リスト→もっと見る
   ※PCの .info-vol__header ラッパはSPでは使わない（7-補2） */
/* 7/4修正指示：内部順＝【見出し＋投稿ボタン（同一行・ボタン右寄せ）】→検索（全幅）→タブ→リスト→もっと見る。ヒント文は削除 */
.info-vol__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; /* （7/4修正指示：見出しと「投稿する」を横並び・右寄せ） */
}

.info-vol__search{
  margin-top:12px;       /* （7/3修正指示） */
  display:flex; gap:8px; /* （準拠）※7/4修正指示：幅75%右寄せ→全幅へ戻し */
}

.info-vol__search-input{
  flex:1;                /* （派生：269px固定） */
  min-width:0;           /* （SP新規：flex縮小許可） */
  height:40px;           /* （派生：50px→7/4指示：投稿ボタンと同じ40px） */
  border:1px solid var(--color-border-light); border-radius:3px; padding:0 12px; /* （派生：準拠2px #4d4d4d→7/4指示で1px・#b1b1b1に淡色化） */
  font-size:16px;        /* （派生：12px→iOS自動ズーム回避のため16px維持） */
  font-family:inherit;   /* （SP新規：フォーム既定打消し） */
}

.info-vol__search-input::placeholder{ color:var(--color-border); font-size:12px; }

/* （準拠：PC表示12pxを維持） */
.info-vol__search-btn{
  width:64px;            /* （派生：111px→84px→7/3修正指示で64px） */
  height:40px;           /* （派生：50px→7/4指示：投稿ボタンと同じ40px） */
  flex-shrink:0;         /* （SP新規） */
  border:1px solid var(--color-border-light); border-radius:3px; font-size:14px;  /* （派生：準拠2px #333→7/4指示で1px・#b1b1b1に淡色化。font15→14） */
  background:#fff; color:#333; cursor:pointer; transition:background .2s;         /* （準拠：3-3確定フル） */
  font-family:inherit;   /* （SP新規：フォーム既定打消し） */
}

/* 共通オレンジボタン（準拠仕様のグループ記法。7/3修正指示でサイズのみ縮小） */
.info-vol__post-btn,
.info-vol__more-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; /* （準拠） */
  background:var(--color-cta); color:#fff; border-radius:var(--radius-btn); /* （準拠） */
  font-weight:500; white-space:nowrap; /* （準拠） */
}

.info-vol__post-btn .icon-arrow-btn,
.info-vol__more-btn .icon-arrow-btn{
  position:absolute; right:12px; top:50%; transform:translateY(-50%); /* （準拠。right14→12） */
  width:8px; height:14px; fill:#fff;                                  /* （派生：矢印A 10×17→7/3修正指示のサイズ感） */
}

.info-vol__post-btn{ height:40px; padding:0 28px 0 14px; font-size:14px; }

/* （派生：168×50・16px→7/3修正指示で縮小） */
.info-vol__more-btn{ height:44px; min-width:176px; padding:0 30px 0 18px; font-size:15px; }

/* （派生：196×50・16px→7/3修正指示：全体バランスで微縮小） */
/* 2026-08-06修正（クライアント指示・電話確定）：横スワイプ式は職員が発見できず廃止。
   グリッド2列で折り返し表示（1段につき2カテゴリーまで・以降は改行）に変更。
   旧実装（7/3指示：flex nowrap＋overflow-x:auto＋スクロールバー非表示）は撤去。 */
.info-vol__tabs{
  margin-top:16px;   /* （SP新規） */
  margin-bottom:8px; /* （準拠） */
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;           /* （派生：14px） */
}

/* （7/3修正指示） */
.info-vol__tab{
  width:100%; text-align:center; /* （2026-08-06：グリッド2列化に伴いセル全幅・中央揃え） */
  padding:5px 14px; border-radius:14px; font-size:13px; font-weight:bold; color:#fff;      /* （準拠） */
  border:none; line-height:1.4; font-family:inherit; white-space:nowrap; cursor:pointer;   /* （準拠：3-3確定フル） */
  /* .is-active：style.cssに専用スタイルなし（クラスマーカーのみ）→ カンプもクラス付与のみ（準拠） */
}

.info-vol__list{ padding-left:0; }

/* （派生：14px） */
/* 7/4修正指示：行構成＝1行目【ピン｜色ドット｜日付(YYYY-MM-DD)】＋2行目【タイトル】。右端に矢印（行の天地中央＝前回指示を維持） */
.info-vol__item{
  display:flex; align-items:center; gap:8px;           /* （7/4修正指示：本文ブロック＋右端矢印） */
  padding:12px 0;                                      /* （派生：14px 4px 14px 0） */
  border-bottom:1px dashed var(--color-border-light);  /* （準拠） */
}

.info-vol__main{ flex:1; min-width:0; }

/* （7/4修正指示：メタ行＋タイトルの縦ブロック） */
.info-vol__meta{ display:flex; align-items:center; }

/* （7/4修正指示：ピン｜ドット｜日付の1行目） */
.info-vol__pin{
  width:13px; margin-right:6px; /* （7/4修正指示：ピン右の空きを従来約13px→6pxへ半減） */
  flex-shrink:0;                /* （SP新規：固定寸維持） */
}

.info-vol__pin .icon-pin{
  width:13px; height:13px;               /* （派生：16px） */
  fill:#4d4d4d; transform:rotate(30deg); /* （準拠） */
}

.info-vol__dot{
  width:16px; height:16px; border-radius:3px; /* （準拠：テキストなしの色アイコン） */
  margin-right:8px; flex-shrink:0;            /* （7/4修正指示：ドット右は全角スペース相当の8px） */
}

.info-vol__date{ font-size:12px; color:var(--color-text-light); line-height:1.4; }

/* （派生：メタ行化に伴い12px/#666＝7/4修正指示） */
.info-vol__link{ display:block; margin-top:2px; font-size:15px; font-weight:500; color:#4d4d4d; line-height:1.6; }

/* （派生：準拠16px→7/4指示で15pxに確定。2行目タイトル） */
.info-vol__arrow{ flex-shrink:0; display:flex; } /* （実装調整：PC用ラッパーを維持しラッパー側で寸法確保） */
.info-vol__arrow .icon-arrow{ width:8px; height:14px; fill:#4d4d4d; }

/* （準拠：行末矢印A 8×14。前回指示どおり右端・行中央で維持） */
.info-vol__more{ display:flex; justify-content:flex-end; margin-top:18px; }

/* （準拠） */

/* --- 協会からのお知らせ --- */
.info-news{
  border:2px solid var(--color-border); border-radius:5px; /* （準拠） */
  padding:22px 16px 18px;                                  /* （派生：30px 24px 20px 22px） */
  max-height:none;                                         /* （派生：PC 520px→SPでは解除。2026-07-30：コメントのみで未実装だったため追記） */
}

/* SPは内部スクロールを解除し全件を通常表示（2026-07-30） */
.info-news__scroll{ overflow-y:visible; }

.info-news__title{ font-size:19px; font-weight:500; color:#4d4d4d; line-height:1.4; }

/* （準拠） */
/* .info-news__scroll：PC内部スクロール用div。マークアップは準拠のまま維持。
   SPは max-height 解除につき内部スクロール不要のためSP用CSSは与えない（3-3） */
.info-news__item{ padding:10px 0 8px; border-bottom:1px dashed var(--color-border-light); }

/* （準拠） */
.info-news__meta{ display:flex; gap:10px; margin-bottom:4px; flex-wrap:wrap; }

/* （準拠） */
.info-news__date{ font-size:11px; color:#4d4d4d; }

/* （準拠） */
.info-news__tag{
  border:2px solid var(--color-brand-green); border-radius:4px; /* （準拠：濃緑＝組織アイデンティティのタグ枠） */
  font-size:10px; font-weight:700; color:#4d4d4d;               /* （派生：準拠9px→7/4修正指示で10px。太さ・色は準拠） */
  padding:2px 10px 1px 10px; line-height:1.2;                   /* （準拠） */
  font-family:"メイリオ","Meiryo";                               /* （準拠：フォント指定原文どおり＝3-3） */
  white-space:nowrap;                                           /* （準拠：3-3確定フル） */
}

.info-news__body{ display:flex; gap:6px; }

/* （準拠） */
.info-news__link{ font-size:14px; font-weight:500; color:#4d4d4d; line-height:1.7; }

/* （準拠） */
.info-news__more{ text-align:right; margin-top:14px; }

/* （準拠） */
.info-news__more-link{ font-size:16px; color:var(--color-link-blue); text-decoration:underline; }

/* （準拠） */

/* --- すぐわかる！世田谷ボランティア協会（info-about） --- */
/* （7/12レスポンシブ化：マークアップ2層化に伴い、旧 .info-about 直下のフローを __canvas へ移設。
    見た目の値はSPカンプ準拠のまま不変。共通スキンはPC/SP共用章（info-about章）側） */
.info-about{
  border-radius:5px;                                                                /* （準拠） */
  padding:15px 20px 22px;                                                           /* （派生：15px 25px 22px＝左右25→20） */
}

.info-about__canvas{ display:flex; flex-direction:column; align-items:center; justify-content:center; } /* （準拠：3-3確定フル＝旧.info-aboutの縦フローを移設） */

.info-about__label{ align-self:flex-start; font-size:12px; line-height:1.4; } /* （準拠） */

/* （準拠） */
.info-about__body{
  display:flex; align-items:center; justify-content:center; gap:10px; /* （準拠） */
  margin-top:8px; position:relative;                                   /* （準拠） */
  width:100%;                                                          /* （準拠：3-3確定フル） */
}

.info-about__bulb{ width:28px; height:38px; } /* （準拠） */

.info-about__title{ font-size:24px; line-height:1.3; } /* （派生：準拠29px→7/4指示で24px） */

.info-about__sub{ font-size:12px; margin-top:2px; line-height:1.4; } /* （派生：準拠15px→7/4指示で12px） */

.info-about__arrow{
  position:absolute; right:0; top:50%; transform:translateY(-50%); /* （準拠） */
  width:10px; height:17px;                                          /* （準拠：矢印A 10×17 #4d4d4d） */
} /* （7/12：旧セレクタ「.info-about__body .icon-arrow」はfront-page.phpの実クラスと不一致だったため修正） */

/* ---------------- E. Pick Up!（sec-banner）※配置＝PC順のまま情報エリア直後（要判断②） ---------------- */
.sec-banner{ padding:0 0 14px; }

/* （準拠） */
.title-en{ display:block; font-size:20px; font-weight:500; letter-spacing:.2em; line-height:1; }

/* （派生：準拠240×7・mt8→7/3修正指示で縮小） */
.sec-banner .title-en::after{ background:var(--color-cta); }

/* （準拠） */
.sec-instagram .title-en::after{ background:var(--color-lime); }

/* （準拠：黄緑＝構造的アクセント） */
.title-ja{ display:block; font-size:15px; font-weight:500; letter-spacing:.2em; margin-top:5px; line-height:1; }

/* （派生：準拠19px・mt6→7/3修正指示で縮小。line-height:1は3-3確定） */
/* 常設バナー（要判断①＝実装どおり3点。2列＝2＋1・3点目左） */
.banner-static{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); /* （派生：flex→grid2列）※minmax(0,…)はSP新規＝ブローアウト防止 */
  gap:12px;        /* （派生：16px） */
  margin-top:20px; /* （派生：25px） */
}

.banner-static__item{ border-radius:4px; overflow:hidden; box-shadow:4px 4px 8px rgba(0,0,0,.12); }

/* （準拠） */
.banner-static__item img{ width:100%; }

/* （派生：height102px固定） */
/* 7/4修正指示：カルーセルを固定バナー直下へ（WFのフッター直前案は保留＝確認用）。スライド＝固定バナーと同サイズ（2枚表示・gap12） */
.banner-carousel{
  margin-top:12px;   /* （7/4修正指示：固定バナーのgapと同じ12pxで直下に連結） */
  padding:7px 0 0;   /* （準拠） */
  position:relative; /* （準拠） */
}

.banner-carousel .splide__slide a{ display:block; border-radius:4px; overflow:hidden; box-shadow:4px 4px 8px rgba(0,0,0,.12); }

/* （準拠：常設と同じr4＋shadow） */
.banner-carousel .splide__slide img{ width:100%; }

/* （準拠） */
/* Splide自動生成の矢印に準拠CSSを当てる */
.banner-carousel .splide__arrow{ width:34px; height:34px; border-radius:50%; background:rgba(26,26,26,.5); }

/* （準拠：34px円） */
.banner-carousel .splide__arrow svg{ width:12px; height:12px; fill:#fff; }

/* （準拠） */
.banner-carousel .splide__arrow--prev{ left:10px; }

/* （準拠） */
.banner-carousel .splide__arrow--next{ right:10px; }

/* （準拠） */

/* ---------------- F. 事業を知る（sec-services） ---------------- */
.sec-services{
  background:var(--color-bg-cream); /* （準拠） */
  padding:30px 0;                   /* （派生：82px 0 85px→7/4指示：上下30pxに統一） */
  overflow:hidden;                  /* （準拠） */
}

/* F・G共通の見出しバッジ（3-3確定） */
.sec-services__title,
.sec-facilities__title{
  display:flex; align-items:center; justify-content:center; /* （準拠：3-3確定） */
  margin:0 auto;                                             /* （準拠：中央寄せ＝3-3確定） */
  color:#4d4d4d;                                             /* （準拠：3-3確定） */
  font-weight:500; letter-spacing:.2em; text-indent:.2em;    /* （準拠） */
}

.sec-services__title{
  width:276px; height:65px; border-radius:32px 0 32px 0; background:#fff; font-size:25px; /* （準拠） */
}

.sec-services__illust{
  margin-top:28px; width:100%; /* （SP新規配置：PC背景イラスト「街並み」を見出し直下のインラインimgで継承。建物2点はSP非表示＝要判断⑨） */
  aspect-ratio:343/46; object-fit:cover; object-position:left center; /* （7/3修正指示：686×46素材＝2連のうち左1つ分のみ表示） */
}

.sec-services__desc{
  margin-top:22px;    /* （派生：120px＝PC背景街並み分の空き） */
  text-align:left;    /* （派生：準拠center→7/4指示で左寄せ） */
  font-size:16px; line-height:1.75; color:#333; /* （派生：準拠17.5px→7/4指示で16px。行間・色は準拠） */
}

.svc-cards{ /* （実装調整：カンプの.svc-cards--spを実装コンテナへ。行ラッパーは下でcontents化） */
  display:flex; flex-direction:column; /* （SP新規：5枚縦積み） */
  margin-top:22px;                     /* （派生：準拠44px＝svc-cards__row→7/4指示で22px） */
  gap:20px;                            /* （派生：30〜35px） */
}

.svc-card{
  display:block;                                        /* （SP新規） */
  width:100%;                                           /* （派生：340px固定→343px） */
  height:auto;                                          /* （派生：準拠340→7/4指示300px→2026-08-06：説明文常時表示化に伴い固定解除） */
  background:#fff; border-radius:5px; overflow:hidden;  /* （準拠） */
}

.svc-card__head{ position:relative; height:84px; }

/* （派生：準拠105→7/4指示：写真上の空き約44→22pxに半減） */
.svc-card__num{ position:absolute; left:19px; top:14px; font-size:35px; font-weight:500; }

/* （準拠） */
.svc-card__title{ position:absolute; left:60px; top:33px; font-size:19px; font-weight:500; line-height:1.5; }

/* （派生：準拠top46→7/4指示で33px） */
.svc-card--multiline .svc-card__title{ left:57px; top:21px; }

/* （派生：準拠top32→7/4指示で21px） */
.svc-card__sub{ position:absolute; left:150px; top:30px; font-size:13px; font-weight:400; line-height:1.5; }

/* （派生：準拠top41→7/4指示で30px。--hassub） */
.svc-card__head .icon-arrow{
  position:absolute; right:22px; top:50px; transform:translateY(-50%); /* （派生：準拠top60→7/4指示で50px） */
  width:10px; height:17px; fill:#4d4d4d;                                /* （準拠：矢印B＝svcカード専用パス） */
}

.svc-card__img{ padding:0 21px; }

/* （準拠） */
.svc-card__img .photo-frame{ height:auto; aspect-ratio:301/198; } /* （2026-08-06修正：横向き時の帯状クロップ対策。基準幅375pxでは従来どおり198px） */
.svc-card__img img{ display:block; width:100%; height:auto; aspect-ratio:301/198; object-fit:cover; } /* （実装調整＋2026-08-06修正：高さ固定→縦横比固定。横向きでも比率を保って表示） */

/* （準拠：img height198px。7-補2の文脈別上書き） */

/* ---------------- G. お近くの拠点・施設（sec-facilities） ---------------- */
.sec-facilities{ padding:30px 0; }

/* （派生：80px 0 70px→7/4指示：上下30pxに統一） */
.sec-facilities__title{
  width:fit-content; max-width:100%; padding:0 30px; height:60px; font-size:23px; /* （派生：351×65・25px＝375px幅超過対策。要判断⑩） */
  background:var(--color-bg-cream); border-radius:32px 0 32px 0;                  /* （準拠） */
}

.sec-facilities__desc{
  margin-top:26px;                        /* （派生：38px） */
  text-align:left;                        /* （派生：準拠center→7/4指示で左寄せ） */
  font-size:16px; line-height:1.75;       /* （派生：準拠17.5px→7/4指示で16px。行間は準拠） */
}

.facilities-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); /* （派生：5列）※minmax(0,…)はSP新規＝ブローアウト防止 */
  gap:12px;        /* （派生：28px） */
  margin-top:30px; /* （派生：60px） */
  /* 烏山（5枚目）は左単独＝v1確定の意図どおり */
}

.facilities-card{
  display:block; position:relative;             /* （SP新規：矢印の位置基準） */
  border:1px solid #4d4d4d; border-radius:5px;  /* （準拠） */
  padding:20px 10px 14px;                       /* （派生：26px 20px 16px） */
}

.facilities-card__icon{
  height:36px; margin-bottom:8px;                            /* （準拠） */
  display:flex; align-items:center; justify-content:center;  /* （SP新規：枠内中央合わせ） */
}

.facilities-card__icon .icon-building{ width:25px; height:33px; fill:var(--color-brand-green); }

/* （準拠：濃緑＝組織アイデンティティ） */
.facilities-card__icon .icon-people-roof{ width:31px; height:26px; fill:var(--color-lime); }

/* （準拠） */
.facilities-card__name{ font-size:15px; font-weight:400; line-height:1.5; text-align:center; color:#333; }

/* （準拠ベース） */
.facilities-card__name .facilities-card__area{ font-size:16px; }

/* （7/4修正指示：土地名を+1px） */
.facilities-card__name .facilities-card__type{ font-size:13px; }

/* （7/4修正指示：種別を-2px＝「ボランティアビューロー」の折返し解消。要判断⑪はこれで解決） */
.facilities-card .icon-arrow{
  position:absolute;
  right:8px;                           /* （派生：14px） */
  top:50%; transform:translateY(-50%); /* （準拠：3-3確定） */
  width:10px; height:17px; fill:var(--color-border-light); /* （準拠：矢印C 10×17 #b1b1b1） */
}

/* 7/3修正指示：福祉事業部カードは他拠点と同格（グリッド6枚目・同サイズ・同整列）。専用の別置きスタイルは廃止 */
.facilities-card__icon .icon-external{ width:19px; height:19px; fill:var(--color-border); }

/* （準拠サイズ19×19 #cacaca のままアイコン枠内へ） */

/* ---------------- H. ご寄付のお願い（sec-donate） ---------------- */
.sec-donate{
  background:var(--color-bg-salmon); /* （準拠） */
  padding:30px 0 34px;               /* （派生：33px 0 37px） */
}

.sec-donate__title{
  display:inline-flex; align-items:center; justify-content:center;         /* （準拠：3-3＝両見出しinline-flex） */
  width:197px; height:46px; border-radius:20px 0 20px 0; background:#fff;  /* （準拠） */
  font-size:19px; font-weight:400; line-height:1;                          /* （準拠） */
  margin:0; /* （派生：PC margin:0 0 0 21px→innerの左余白16pxに統一） */
}

.sec-donate__text{
  margin-top:14px;      /* （派生：PC margin:0） */
  text-align:left;      /* （派生：center。v1確定） */
  font-size:16px; font-weight:500; /* （準拠） */
  letter-spacing:.05em; /* （派生：.2em＝375px幅での折返し乱れ回避） */
  line-height:1.75;     /* （準拠） */
}

.sec-donate__action{
  display:flex; justify-content:center; /* （派生：右寄せ margin:0 33px 0 0。v1「中央でも可」→7/4指示で中央に確定） */
  margin:16px 0 0;                      /* （派生：PC margin:0 33px 0 0／2026-07-30修正：PCの右余白33px残存で中央がずれるため左右を0にリセット） */
}

/* H・Jボタン：共通オレンジボタン仕様を各クラスで個別記述（style.css構成準拠＝7-補2） */
.sec-donate__btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; /* （準拠） */
  width:197px; height:50px; padding:0 36px 0 20px;                                    /* （準拠：197×50共通仕様） */
  background:var(--color-cta); color:#fff; border-radius:var(--radius-btn);           /* （準拠） */
  font-size:16px; font-weight:500; white-space:nowrap;                                /* （準拠） */
}

.sec-donate__btn .icon-arrow-btn{
  position:absolute; right:14px; top:50%; transform:translateY(-50%); /* （準拠） */
  width:10px; height:17px; fill:#fff;                                 /* （準拠） */
}

/* ---------------- I. Instagram（sec-instagram） ---------------- */
.sec-instagram{ padding:30px 0; }

/* （派生：準拠50px 0 60px→7/4指示：上下30pxに統一） */
.sec-instagram__header{
  display:flex; align-items:center; /* （準拠） */
  gap:16px;                         /* （派生：24px） */
  margin-bottom:0;                  /* （派生：35px→0。直後 ig-grid の mt24 で間隔） */
}

.sec-instagram__icon{ width:32px; height:32px; }

/* （派生：準拠42px→7/3修正指示で縮小。84×84実素材の縮小表示） */
.ig-follow-btn{
  display:inline-flex; align-items:center; justify-content:center; /* （準拠） */
  height:34px; padding:0 14px; min-width:0;                        /* （派生：準拠 min-width180×h50・pad24→7/4指示で縮小＝見出し行に同居。min-width:0＝PC用.sec-instagram__follow-btnの180pxリーク解消：7/12修正＝右パディングはみ出しの原因） */
  margin-left:auto;                                                /* （7/4指示：見出し行の右端へ） */
  background:var(--color-lime);                                    /* （準拠） */
  color:#fff; flex-shrink:0; transition:opacity .2s;               /* （準拠：3-3確定フル） */
  font-size:12px; font-weight:500;                                 /* （派生：準拠16px→7/4指示で縮小）※矢印なし（準拠） */
}

.ig-grid{
  margin-top:24px;                                     /* （SP新規） */
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); /* （SP新規：2列グリッド。minmax(0,…)＝ブローアウト防止） */
  gap:4px;                                             /* （SP新規） */
}

.ig-grid .photo-frame{ aspect-ratio:1/1; border-radius:0; }

/* （SP新規：7-補2の文脈別上書き） */

/* ---------------- J. 一緒に働く仲間を募集しています（sec-recruit） ---------------- */
.sec-recruit{
  background:var(--color-bg-green-light); /* （準拠） */
  padding:26px 0 34px;                    /* （派生：29px 0 47px） */
}

.sec-recruit__title{
  display:inline-flex; align-items:center; justify-content:center; /* （準拠：3-3＝両見出しinline-flex） */
  width:auto; max-width:100%; padding:0 22px; /* （派生：372px固定＝375px超過対策） */
  height:58px;                                /* （準拠） */
  margin:0;                                   /* （派生：PC margin:0 0 0 9px） */
  background:#fff; border-radius:20px 0 20px 0; font-size:19px; font-weight:400; /* （準拠） */
}

.sec-recruit__text{
  margin-top:18px;      /* （派生：PC margin:30px 0 0） */
  text-align:left;      /* （派生：center） */
  font-size:16px; font-weight:500; /* （準拠） */
  letter-spacing:.05em; /* （派生：.2em＝375px幅での折返し乱れ回避） */
  line-height:1.75;     /* （準拠） */
}

.sec-recruit__action{
  display:flex; justify-content:center; /* （派生：右寄せ margin:0 33px 0 0→7/4指示で中央に確定） */
  margin:16px 0 0;                      /* （派生：PC margin:0 33px 0 0／2026-07-30修正：PCの右余白33px残存で中央がずれるため左右を0にリセット） */
}

.sec-recruit__btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; /* （準拠） */
  width:197px; height:50px; padding:0 36px 0 20px;                                    /* （準拠：197×50共通仕様） */
  background:var(--color-cta); color:#fff; border-radius:var(--radius-btn);           /* （準拠） */
  font-size:16px; font-weight:500; white-space:nowrap;                                /* （準拠） */
}

.sec-recruit__btn .icon-arrow-btn{
  position:absolute; right:14px; top:50%; transform:translateY(-50%); /* （準拠） */
  width:10px; height:17px; fill:#fff;                                 /* （準拠） */
}

.svc-cards__row{ display:contents; } /* （実装調整：PCの2行ラッパーをSPでは透過＝カード5枚が.svc-cardsの直下扱いで縦積みになる） */

/* ---- 実装調整の追補（2026-07-07・スクリーンショット指摘対応） ---- */
.main-menu{ display:none; } /* （実装調整：カンプC章＝SPはハンバーガーに集約（マークアップごと省略）。実装はPC用にマークアップを保持するため非表示化） */
.facilities-external-wrap{ display:contents; } /* （実装調整：PCの別枠ラッパーを透過＝7/3指示「福祉事業部カードはグリッド6枚目・同サイズ・同整列」をSPで成立させる） */
.facilities-card--external{ width:auto; } /* （実装調整：PC固定幅231pxの解除。枠線・余白等はSPの.facilities-cardが適用される） */

/* ---- 実装調整の追補2（2026-07-07・指摘9件対応） ---- */
/* 新着：投稿ボタン＝PC固定幅168pxの解除（カンプはh40・pad0 28 0 14のみ＝幅は内容なり） */
.info-vol__post-btn{ width:auto; }
/* 新着リスト：PC等価再現用の指定（display:flex・二重点線・余白・日付先頭）をSPで打消し＝カンプの「メタ行→タイトル」2行構成へ */
.info-vol__main{ display:block; padding:0; border-bottom:none; }
.info-vol__meta{ gap:0; }
.info-vol__date{ order:0; padding-top:0; }
.info-vol__pin{ padding-top:0; }
.info-vol__dot{ margin-top:0; }
/* 固定バナー：PCのheight:102px固定を解除＝width:100%で縦横比維持 */
.banner-static__item img{ height:auto; }
/* 事業カード：下空き18px（7/4指示）を余白で確定（高さ固定300pxは解除＝中身なり） */
.svc-card{ height:auto; }
.svc-card__img{ padding:0 21px 18px; }
/* 2026-08-06修正：クライアント指摘対応。ホバーが無い端末でも文言に到達できるよう、
   SPは説明文を常時表示（下層「事業を知る」ページSPの表示方式＝7/7指示と同じ解決） */
.svc-card__desc{
  display:block;
  padding:12px 21px 18px;
  font-size:16px; line-height:1.8; color:var(--color-text);
}
/* 拠点・施設：実装の名称はspanのためブロック化→text-align:center（カンプ準拠）を有効に */
.facilities-card__name{ display:block; }
/* Instagram：見出し下線をフォローボタンと同居できる幅へ（160px→120px＝行内収まりの実装調整） */
.sec-instagram .title-en::after{ width:120px; }
/* Instagramフィード2列化：プラグイン（instagram-feed）出力へ直接グリッドを適用する実装調整。要実機確認 */
.ig-grid{ display:block; }
.ig-grid #sb_instagram, .ig-grid #sbi_images{ width:100% !important; padding:0 !important; float:none !important; }
.ig-grid #sbi_images{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:4px !important; }
.ig-grid #sbi_images .sbi_item{ width:auto !important; margin:0 !important; padding:0 !important; float:none !important; }
.ig-grid .sbi_photo_wrap, .ig-grid .sbi_photo{ width:100% !important; height:auto !important; display:block; }

/* ---- 実装調整の追補3（2026-07-07・指摘4件対応） ---- */
/* 新着：入力欄・枠のカンプ実値（転写漏れの補完＝トップSPカンプ逐語） */
.info-vol{
  display:flex; flex-direction:column;                      /* （準拠） */
  border:2px solid var(--color-border); border-radius:5px;  /* （準拠） */
  padding:22px 16px;                                        /* （派生：30px 28px） */
}
.info-vol__search-input{
  flex:1;                /* （派生：269px固定） */
  min-width:0;           /* （SP新規：flex縮小許可） */
  height:40px;           /* （派生：50px→7/4指示：投稿ボタンと同じ40px） */
  border:1px solid var(--color-border-light); border-radius:3px; padding:0 12px; /* （派生：準拠2px #4d4d4d→7/4指示で1px・#b1b1b1に淡色化） */
  font-size:16px;        /* （派生：12px→iOS自動ズーム回避のため16px維持） */
  font-family:inherit;   /* （SP新規：フォーム既定打消し） */
}
.info-vol__search-input::placeholder{ color:var(--color-border); font-size:12px; } /* （準拠：PC表示12pxを維持） */
/* 事業カード：下余白18pxをカード側で確定（前回のimg余白指定を移設・強化） */
.svc-card{ height:auto; padding-bottom:18px; }
.svc-card__img{ padding:0 21px; }
/* Instagram：画像をすべて1:1に統一（プラグイン出力向け・要実機確認） */
.ig-grid #sbi_images .sbi_item{ aspect-ratio:1 / 1; overflow:hidden; }
.ig-grid .sbi_photo_wrap{ height:100% !important; }
.ig-grid .sbi_photo{ height:100% !important; background-size:cover !important; background-position:center !important; display:block; }
.ig-grid .sbi_photo img{ width:100% !important; height:100% !important; object-fit:cover; }

/* ---- 実装調整の追補4（2026-07-07・指摘3件対応） ---- */
/* 新着：検索フォームを幅80%に（2026-07-07指示。従来の全幅から変更＝検索ボタンが余裕を持って収まる） */
.info-vol__search{ width:100%; } /* （2026-07-07ユーザー確定：80%→100%） */
/* 事業カード：カード間の縦間隔（2026-07-07指示の案を採用＝行ラッパーを縦flex・gap22px） */
.svc-cards__row{ display:flex; flex-direction:column; gap:22px; }
.svc-cards__row--2{ margin-top:22px; } /* （PCの38pxを打消し＝行1と行2の間も22pxに統一） */

} /* /@media (max-width:768px) SPトップ固有おわり */


/* ================================================================
   事業カード ホバー説明（2026-07-07・ワイヤーフレームB準拠：
   マウスオーバーで見出し・写真→説明文に切替。PCのみ＝768px以下は非表示）
   ================================================================ */
@media (min-width: 769px) {
.svc-card{ position: relative; }
.svc-card__desc{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 28px;
  background: var(--color-bg-white);
  color: var(--color-text-mid);
  font-size: 16px; line-height: 1.9; /* 2026-07-07指示：14→16px */
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.svc-card:hover .svc-card__desc{ opacity: 1; transform: none; }
}


/* ================================================================
   ▼▼ 工程④A：汎用固定ページの本文装飾（entry-content）2026-07-07
   カンプなしページ用の最低限セット。トーンはbase・下層骨格に準拠。
   デバイス共通（数値はPC基準・SPでも破綻しない範囲）
   ================================================================ */
.entry-content > * + *{ margin-top: 1em; }
/* 見出し＝カンプ共通語彙に統一（7/12指摘対応：旧＝緑帯の派生装飾を廃止。
   カンプ下層8ページのh2は全て .section-heading のため準拠へ変更） */
.entry-content h2{ /* （準拠：section-heading。SP実値＝sp-base 19px/12px） */
  font-size: 19px; font-weight: 700; color: var(--color-text-mid); line-height: 1.4;
  padding-left: 12px; border-left: 4px solid var(--color-lime);
  margin-top: 2.2em;
}
.entry-content h2:first-child{ margin-top: 0; }
@media (min-width: 769px){
  .entry-content h2{ font-size: 21px; padding-left: 14px; } /* （準拠：section-heading PC実値） */
}
.entry-content h3{ /* （準拠：sub-heading-sm＝body基準16px太字・バーなし。旧＝req-item__label応用を廃止） */
  font-size: 16px; font-weight: 700; color: var(--color-text-mid); line-height: 1.5;
  margin-top: 1.8em;
}
.entry-content p{ font-size: 16px; line-height: 1.8; color: var(--color-text); } /* （基準＝body 16px/1.8 準拠） */
.entry-content a{ color: var(--color-link-blue); text-decoration: underline; }
.entry-content a:hover{ text-decoration: none; }
.entry-content ul, .entry-content ol{ padding-left: 1.5em; font-size: 16px; line-height: 1.8; }
.entry-content li + li{ margin-top: .4em; }
.entry-content li::marker{ color: var(--color-brand-green); }
.entry-content hr{ border: 0; border-top: 1px dashed var(--color-border-light); margin: 1.6em 0; } /* （点線区切り＝一覧の区切り線 準拠） */
.entry-content table{
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--color-bg-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-btn); overflow: hidden;
}
.entry-content th, .entry-content td{ padding: 10px 14px; border: 1px solid var(--color-border); vertical-align: top; line-height: 1.7; text-align: left; }
.entry-content th{ background: var(--color-bg-hover); color: var(--color-text-mid); font-weight: 700; white-space: nowrap; } /* （contact-tbl .c-key 準拠） */
.entry-content img{ max-width: 100%; height: auto; border-radius: var(--radius-btn); }
/* 注記ボックス（薄サーモン＝closed-notice系の語彙） */
.entry-content .note{
  padding: 12px 16px; background: var(--color-bg-salmon);
  border-left: 4px solid var(--color-cta); border-radius: var(--radius-btn);
  font-size: 14px; line-height: 1.8; color: var(--color-text-mid);
}
/* 原稿の【画像：…】指定の仮枠（実画像差し替えまでの目印） */
.entry-content .img-todo{
  border: 1px dashed var(--color-border); border-radius: var(--radius-btn);
  background: var(--color-bg-hover); color: var(--color-text-muted);
  font-size: 13px; padding: 28px 16px; text-align: center;
}
/* ---- よくある質問（Q&Aカード＝白カード2px枠＋点線区切りの語彙） ---- */
.faq-item{
  background: var(--color-bg-white);
  border: 2px solid var(--color-border); border-radius: var(--radius-btn);
}
.faq-item + .faq-item{ margin-top: 14px; }
.faq-q{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px dashed var(--color-border-light);
  font-size: 16px; font-weight: 700; color: var(--color-text); line-height: 1.7;
}
.faq-a{ display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; }
.faq-a > div{ flex: 1; min-width: 0; }
.faq-mark{
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff; line-height: 1;
}
.faq-mark--q{ background: var(--color-brand-green); }
.faq-mark--a{ background: var(--color-lime); }

/* ================================================================
   ▼▼ 工程④B：下層シンプルページ実装 2026-07-12
   本文HTML（貼り付け運用）で共通部品を流用するための最小追記
   ================================================================ */
/* （SP新規＝工程④B）entry-content内で .btn-cta を使う際の a汎用スタイル（青・下線）の打ち消し */
.entry-content .btn-cta{ color: var(--color-bg-white); text-decoration: none; }
.entry-content .btn-cta:hover{ text-decoration: none; }
/* （SP新規＝工程④B）サイトマップページ：階層ul（entry-contentのli語彙に子階層の余白だけ追加） */
.entry-content ul ul{ margin-top: .4em; }
.entry-content .sitemap-note{ font-size: 13px; color: var(--color-text-muted); } /* サブラベル（事業区分など）用 */

/* ================================================================
   ▼▼ 工程⑤A：フォーム 2026-07-12
   お問い合わせ（CF7）／ボランティア情報投稿フォーム（USP Pro）
   カンプなしページ＝既存トークンからの派生。
   プラグインが生成するマークアップに依存しないよう、.form-page 配下の
   「素のフォーム要素」へ最小のスキンを当てる方式（CF7・USP共用）。
   実値の出自：入力枠＝.search-field（border-light・radius3・16px＝iOS自動
   ズーム回避）／送信ボタン＝.btn-cta（--color-cta・高さ50・radius-btn）／
   注意色＝#d7000f（7/3修正指示の注意色と同値）。
   ================================================================ */

/* ---- 入力要素の共通スキン ---- */
.form-page input[type="text"],
.form-page input[type="email"],
.form-page input[type="url"],
.form-page input[type="tel"],
.form-page input[type="number"],
.form-page input[type="date"],
.form-page textarea,
.form-page select{
  width:100%; max-width:560px; /* （派生：本文列でのフォーム可読幅。textarea・SPは全幅） */
  border:1px solid var(--color-border-light); border-radius:3px; /* （準拠：.search-field） */
  padding:10px 12px; font-size:16px; font-family:inherit; line-height:1.5; /* （準拠：16px＝iOS自動ズーム回避） */
  color:var(--color-text); background:var(--color-bg-white);
  outline:none; transition:border-color .2s;
}
.form-page textarea{ max-width:none; min-height:200px; resize:vertical; }
.form-page select{ width:auto; min-width:200px; max-width:100%; }
.form-page input[type="text"]:focus,
.form-page input[type="email"]:focus,
.form-page input[type="url"]:focus,
.form-page input[type="tel"]:focus,
.form-page input[type="number"]:focus,
.form-page input[type="date"]:focus,
.form-page textarea:focus,
.form-page select:focus{ border-color:var(--color-brand-green); }
.form-page ::placeholder{ color:var(--color-border); } /* （準拠：.search-field::placeholder） */

/* ---- チェックボックス・ラジオ・ファイル ---- */
.form-page input[type="checkbox"],
.form-page input[type="radio"]{ accent-color:var(--color-brand-green); width:16px; height:16px; vertical-align:-2px; }
.form-page input[type="file"]{ font-size:14px; max-width:100%; }
.form-page fieldset{ border:0; margin:0; padding:0; min-width:0; } /* （リセット：USPのfieldset想定） */
.form-page label{ line-height:1.8; }

/* ---- 必須マーク ---- */
.form-page sup{ color:#d7000f; font-weight:700; } /* （USP＝ラベル内 <sup>*</sup> 運用への対応） */
.form-required{ /* （CF7＝本テーマ側で書くフォーム本文のラベルに付与するバッジ） */
  display:inline-block; margin-left:6px; padding:1px 8px;
  font-size:11px; font-weight:700; line-height:1.6;
  color:var(--color-bg-white); background:#d7000f; border-radius:2px; vertical-align:2px;
}

/* ---- 送信ボタン（.btn-cta 準拠。input/button要素のため別建て） ---- */
.form-page input[type="submit"],
.form-page button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:220px; max-width:100%; height:50px; padding:0 32px; /* （準拠：--btn-height） */
  background:var(--color-cta); color:var(--color-bg-white);
  border:0; border-radius:var(--radius-btn);
  font-size:16px; font-weight:var(--fw-semi); font-family:inherit;
  cursor:pointer; transition:opacity .2s;
}
.form-page input[type="submit"]:hover,
.form-page button[type="submit"]:hover{ opacity:.85; }

/* ---- CF7：項目ブロック（フォーム本文＝管理画面貼り付けの語彙） ---- */
.form-page .form-field{ margin-bottom:20px; }
.form-page .form-field > label{ display:block; font-size:14px; font-weight:700; color:var(--color-text); margin-bottom:6px; }
.form-page .form-submit{ margin-top:28px; }

/* ---- CF7：検証・応答メッセージ ---- */
.form-page .wpcf7-not-valid-tip{ display:block; margin-top:4px; font-size:12px; color:#d7000f; }
.form-page .wpcf7 form .wpcf7-response-output{
  margin:24px 0 0; padding:12px 16px;
  border:2px solid var(--color-border); border-radius:var(--radius-btn); /* （準拠：.info-vol枠線の語彙） */
  font-size:14px; line-height:1.7;
}
.form-page .wpcf7 form.sent .wpcf7-response-output{ border-color:var(--color-brand-green); color:var(--color-brand-green); }
.form-page .wpcf7 form.invalid .wpcf7-response-output,
.form-page .wpcf7 form.unaccepted .wpcf7-response-output,
.form-page .wpcf7 form.failed .wpcf7-response-output,
.form-page .wpcf7 form.aborted .wpcf7-response-output,
.form-page .wpcf7 form.spam .wpcf7-response-output{ border-color:#d7000f; color:#d7000f; }


/* ================================================================
   ▼▼ 案B-1（2026-07-13）：事業を知る（services）＋事業詳細（service-detail）
   出典：design-services-pc.html／design-service-detail-pc.html（原則1＝PC正）
        template-design-services-sp.html／template-design-service-detail-sp.html
   構成：①デバイス共通（新設部品）→②PC（769px〜）→③SP（〜768px）。
   出自タグ：（準拠）＝カンプ実値そのまま／（派生：元値）／（実装調整）。
   規律メモ：gridは必ずminmax(0,1fr)＋アイテムmin-width:0（base-B規律の継承）。
   servicesページの上書きは .sec-services--page、service-detailページの
   上書きは .page-body--service でスコープ（トップ・他下層への波及防止）。
   ================================================================ */

/* ---- ①デバイス共通 ---- */

/* H4小小見出し（PC/SP同値） */
.sub-heading-sm{ font-size:16px; font-weight:700; color:var(--color-text-mid); line-height:1.5; margin-bottom:12px; } /* （準拠） */

/* 番号リスト numbered-list（列数はデバイス別＝②③。行スタイルは同値） */
.numbered-list{ counter-reset:num-list; display:grid; } /* （準拠） */
.numbered-list li{
  min-width:0; /* （実装調整：規律メモ。SPカンプはSP新規、PCへも適用） */
  counter-increment:num-list;
  font-size:15px; color:var(--color-text); padding:8px 0 8px 38px; position:relative;
  line-height:1.6; border-bottom:1px dashed var(--color-border); /* （準拠） */
}
.numbered-list li::before{
  content:counter(num-list);
  position:absolute; left:0; top:7px; width:26px; height:26px; border-radius:50%;
  background:var(--color-brand-green); color:var(--color-bg-white);
  font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; /* （準拠） */
}

/* 囲みボックス callout-box（paddingのみデバイス別＝②③） */
.callout-box{ margin-top:20px; background:var(--color-bg-blue-light); border-radius:var(--radius-btn); } /* （準拠） */
.callout-box__title{ font-size:16px; font-weight:700; color:var(--color-link-blue); margin-bottom:10px; } /* （準拠） */
.callout-box__body{ font-size:14px; line-height:1.9; color:var(--color-text); } /* （準拠） */

/* 相談窓口カード office-card（グリッド列数はデバイス別＝②③） */
.office-card{
  min-width:0; /* （実装調整：規律メモ） */
  background:var(--color-bg-white);
  border:2px solid var(--color-border);
  border-radius:var(--radius-btn);
  padding:20px;                    /* （準拠：PC/SP同値） */
  transition:box-shadow .25s ease; /* （準拠） */
}
.office-card:hover{ box-shadow:0 4px 16px rgba(0,0,0,0.08); } /* （準拠） */
.office-card__name{ font-size:17px; font-weight:700; color:var(--color-text); margin-bottom:12px; line-height:1.4; } /* （準拠） */
.office-card__info{ margin-top:0; } /* （準拠） */

/* 外部リンクボタン btn-outline--ext（PC/SP同値。base btn-outlineへの付加修飾） */
.btn-outline--ext{
  border-color:var(--color-link-blue); color:var(--color-link-blue);
  height:44px; padding:0 24px; font-size:14px; gap:8px; /* （準拠） */
}
.btn-outline--ext:hover{ background:var(--color-bg-blue-light); border-color:var(--color-link-blue); } /* （準拠） */

/* チラシリンク flyer（PC/SP同値。photo-frame方式＝SPカンプ本文変換T2を両デバイスで採用） */
.flyer-row{ display:flex; gap:20px; margin-top:20px; flex-wrap:wrap; } /* （準拠） */
.flyer-link{ display:block; border:1px solid var(--color-border); border-radius:var(--radius-btn); overflow:hidden; transition:box-shadow .25s ease; } /* （準拠） */
.flyer-link:hover{ box-shadow:0 4px 16px rgba(0,0,0,0.1); } /* （準拠） */
.flyer-link img{ display:block; width:100%; height:auto; } /* （準拠） */
.flyer-link.photo-frame{ aspect-ratio:285/403; } /* （準拠：SPカンプ新規＝photo-frame既定3/2の上書き。チラシ縦横比） */

/* 事業サブナビのカード svc-index__card（グリッド列数・外側余白はデバイス別＝②③） */
.svc-index__card{
  min-width:0; /* （実装調整：規律メモ） */
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;                     /* （準拠） */
  background:var(--color-bg-white);
  border:2px solid var(--color-border);
  border-radius:var(--radius-btn);
  transition:box-shadow .2s;             /* （準拠） */
}
.svc-index__card:hover{ box-shadow:0 2px 8px rgba(0,0,0,0.08); } /* （準拠） */
.svc-index__card--current{ border-color:var(--color-brand-green); background:var(--color-bg-green-light); } /* （準拠：現在地ハイライト） */
.svc-index__num{
  width:28px; height:28px; border-radius:50%;
  background:var(--color-text-mid); color:var(--color-bg-white);
  font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; /* （準拠） */
}
.svc-index__card--current .svc-index__num{ background:var(--color-brand-green); } /* （準拠） */
.svc-index__body{ flex:1; min-width:0; } /* （準拠＋min-width:0＝規律メモ） */
.svc-index__name{ font-size:15px; font-weight:700; color:var(--color-text); line-height:1.4; } /* （準拠） */
.svc-index__sub{ font-size:12px; color:var(--color-text-muted); line-height:1.4; margin-top:2px; } /* （準拠） */
.svc-index__arrow{ fill:var(--color-border); width:8px; height:14px; flex-shrink:0; } /* （準拠） */
.svc-index__card--current .svc-index__arrow{ fill:var(--color-brand-green); } /* （準拠） */

/* ---- ②PC（769px〜） ---- */
@media (min-width: 769px) {

/* -- PC下層共通部品の初出（SP baseのL3〜L6に対応するPC値。B-2以降で再利用） -- */
.section-heading{
  font-size:21px; font-weight:700; color:var(--color-text-mid); line-height:1.4;
  padding-left:14px; border-left:4px solid var(--color-lime); margin:0 0 20px; /* （準拠：❸確定） */
}
.content-section{ margin-bottom:48px; } /* （準拠：❸確定） */
.content-section:last-child{ margin-bottom:0; } /* （準拠） */
.content-section p{ font-size:16px; line-height:2; } /* （準拠） */
.jump-nav{ background:var(--color-bg-hover); border-radius:var(--radius-btn); padding:16px 20px; margin-bottom:36px; } /* （準拠） */
.jump-nav__label{ font-size:12px; color:var(--color-text-muted); margin-bottom:10px; } /* （準拠） */
.jump-nav__list{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } /* （準拠） */
.jump-pill{
  display:inline-block; padding:6px 16px; border-radius:20px; border:1.5px solid var(--color-border);
  background:var(--color-bg-white); font-size:13px; font-weight:700; color:var(--color-text-mid);
  transition:border-color .2s, color .2s; /* （準拠） */
}
.jump-pill:hover{ border-color:var(--color-brand-green); color:var(--color-link-hover); } /* （準拠／2026-07-30：文字のみAA適合濃緑・枠は準拠） */
.info-row{ display:flex; gap:10px; padding:6px 0; border-bottom:1px dashed var(--color-border); font-size:14px; line-height:1.6; } /* （準拠：sd実値。fc=padding同・fdはページ側上書き） */
.info-row--last{ border-bottom:none; } /* （準拠） */
.info-row__label{ flex:0 0 60px; font-weight:700; color:var(--color-text-light); font-size:13px; } /* （準拠：sd実値60px。fc40px/fd96pxはページ側上書き＝SP base既定5emと同方式） */
.info-row__value{ flex:1; color:var(--color-text); } /* （準拠） */
.icon-ext-sm{ width:12px; height:12px; fill:var(--color-link-blue); flex-shrink:0; } /* （準拠：SP base同値のPC初出） */
.btn-cta--sm{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 20px; background:var(--color-cta); color:var(--color-bg-white);
  border-radius:var(--radius-btn); font-size:13px; font-weight:700; white-space:nowrap; transition:opacity .2s; /* （準拠：PCは38px。SP baseの40pxはタップ目標の派生） */
}
.btn-cta--sm:hover{ opacity:.85; } /* （準拠） */

/* -- service-detail固有（PC） -- */
.content-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:start; } /* （準拠：❸確定） */
.content-grid > *{ min-width:0; } /* （実装調整：規律メモ） */
.numbered-list{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 24px; } /* （準拠：1fr 1fr→minmax化は実装調整） */
.callout-box{ padding:20px 24px; } /* （準拠） */
.office-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } /* （準拠：1fr 1fr→minmax化は実装調整） */
.office-card--half{ grid-column:1 / -1; max-width:calc(50% - 8px); } /* （実装調整：PCカンプ5枚目インラインstyleのクラス化＝原則1の例外裁定。SPカンプ本文変換T3の受け） */
.page-body--service{ padding-top:22px; } /* （実装調整：リード＝本文貼り付け先頭運用。カンプのtitle-area内リードmt22を再現） */
.page-body--service .page-lead{ margin-top:0; margin-bottom:40px; } /* （実装調整：リード下＝カンプpage-body上40pxを再現） */
.page-body--service .btn-cta{
  position:relative; height:50px; padding:0 36px 0 20px; font-size:16px; font-weight:500; /* （準拠：sd実値＝50px矢印型。工程③PCの44px型をページ内で上書き） */
}
.page-body--service .btn-cta .icon-arrow-btn{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:10px; height:17px; fill:var(--color-bg-white); /* （準拠：矢印A） */
}
.svc-subnav{
  max-width:var(--content-max-width); margin:0 auto;
  padding:40px 0 48px;
  border-top:1px solid var(--color-border); /* （準拠） */
}
.svc-subnav .section-heading{ margin-bottom:16px; } /* （準拠） */
.svc-index{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; } /* （準拠：1fr 1fr→minmax化は実装調整） */

/* -- services（一覧）固有の上書き（PC） -- */
.sec-services--page{ background-image:none; margin-top:40px; } /* （準拠：下層servicesカンプ＝イラスト無し・mt40。padding82/85はトップ定義を継承） */
.sec-services--page .svc-cards__row{ margin-top:36px; } /* （準拠：トップ44の上書き。row--2の38・gapは同値継承） */
.sec-services--page .svc-card{ height:auto; } /* （準拠：カンプ注記「heightのみauto」＝トップ340px固定の解除） */
.sec-services--page .svc-card__body{ padding:14px 21px 18px; } /* （準拠：下層追加＝説明文） */
.sec-services--page .svc-card__desc{
  position:static; inset:auto; display:block; padding:0; background:transparent;
  opacity:1; transform:none; pointer-events:auto; transition:none; /* （実装調整：トップPCのホバー切替オーバーレイを打ち消し＝下層は常時表示） */
  font-size:14px; line-height:1.9; color:var(--color-text); /* （準拠） */
}

} /* /@media (min-width:769px) 案B-1 PCおわり */

/* ---- ③SP（〜768px） ---- */
@media (max-width: 768px) {

/* -- service-detail固有（SP）＝SPカンプ逐語 -- */
.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr); /* （派生：PC 1.4fr 1fr 2列→SP1列） */
  gap:28px;                            /* （準拠） */
  align-items:start;                   /* （準拠） */
}
.content-grid > *{ min-width:0; }      /* （SP新規：規律メモ） */
.numbered-list{
  grid-template-columns:minmax(0,1fr); /* （派生：PC2列→SP1列） */
  gap:6px;                             /* （準拠：PC行間6px。列間24pxは1列化で消滅） */
}
.callout-box{ padding:16px; } /* （派生：PC 20px 24px→SP内余白16px。post-detail attach-section同裁定） */
.office-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr); /* （派生：PC2列→SP1列。fc fac-grid同裁定） */
  gap:16px;                            /* （準拠） */
}
.page-body--service .info-row__label{ flex:0 0 60px; } /* （準拠：PC60px＝base既定5emの上書き。SPカンプはページ側bare＝実装ではスコープ化して他ページのbase既定を維持） */
.page-body--service{ padding-top:16px; } /* （実装調整：リード＝本文貼り付け先頭運用。カンプのtitle-bar下16pxを再現） */
.page-body--service .page-lead{ margin-top:0; margin-bottom:28px; } /* （実装調整：リード下＝base page-body上28pxを再現） */
.svc-subnav{
  border-top:1px solid var(--color-border); /* （準拠） */
  padding:28px var(--sp-inner-pad) 48px;    /* （派生：PC 40px 0 48px→上28・左右SP直付け＝fd sibling-nav同） */
}
.svc-index{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; } /* （派生：PC2列→SP1列） */

/* -- services（一覧）固有の上書き（SP）＝トップF-block（SPトップ固有）流用＋下層固有 -- */
.sec-services--page{ margin-top:28px; } /* （派生：PC 40px→SP縮小。padding30px 0はトップSP定義を継承） */
.sec-services--page .sec-services__heading{
  width:fit-content; max-width:100%; padding:0 30px; height:60px; font-size:23px; /* （派生：PC 276×65・25px→8文字幅超過のため拠点見出し（要判断⑩）と同裁定。flex等はグローバル定義を継承） */
}
.sec-services--page .svc-cards__row{ margin-top:22px; } /* （準拠：SPカンプ.svc-cards--sp mt22。縦積み・gap22はトップSP追補4の定義を継承） */
.sec-services--page .svc-card{ padding-bottom:0; } /* （実装調整：トップSPの下余白18px打消し＝写真下余白はbodyのpadding-topが規定＝7/7カンプ注記） */
.sec-services--page .svc-card__body{ padding:12px 16px 16px; } /* （派生：PC 14px 21px 18px→SPカード内余白） */
.sec-services--page .svc-card__desc{ display:block; font-size:16px; line-height:1.9; color:var(--color-text); margin:0; } /* （派生：PC14px→SPのみ16px＝7/7クライアント指示。トップSPのdisplay:noneを上書き） */

} /* /@media (max-width:768px) 案B-1 SPおわり */

/* ================================================================
   ▼▼ 案B-2（2026-07-13）：拠点・施設一覧（facilities）＋拠点・施設詳細（facility-detail）
   出典：design-facilities-pc.html／design-facility-detail-pc.html（原則1＝PC正）
        template-design-facilities-sp.html／template-design-facility-detail-sp.html
   構成：①デバイス共通（新設部品）→②PC（769px〜）→③SP（〜768px）。
   出自タグ：（準拠）＝カンプ実値そのまま／（派生：元値）／（実装調整）。
   規律メモ：gridは必ずminmax(0,1fr)＋アイテムmin-width:0（base-B規律の継承）。
   facilitiesページの上書きは .page-body--facilities、facility-detailページの
   上書きは .page-body--facility でスコープ（info-rowラベル幅等の波及防止）。
   命名の実装調整：カンプの .info-grid（fd利用案内2列）はトップページの既存
   .info-grid（新着情報1.2fr 1fr）と名称衝突のため .fd-info-grid に改名。
   ================================================================ */

/* ---- ①デバイス共通 ---- */

/* タグ（地域＝緑／種別＝青。PC/SP同値） */
.tag{ display:inline-block; font-size:12px; font-weight:700; padding:3px 12px; border-radius:14px; line-height:1.4; } /* （準拠） */
.tag--area{ background:var(--color-bg-green-light); color:var(--color-brand-green); } /* （準拠） */
.tag--type{ background:var(--color-bg-blue-light); color:var(--color-link-blue); } /* （準拠） */

/* 拠点カード fac-card（グリッド列数はデバイス別＝②③。カード自体はPC/SP同値） */
.fac-card{
  min-width:0;                          /* （実装調整：規律メモ。SPカンプはSP新規、PCへも適用） */
  background:var(--color-bg-white);
  border:2px solid var(--color-border);
  border-radius:var(--radius-btn);
  padding:20px;                         /* （準拠） */
  transition:box-shadow .25s ease;      /* （準拠） */
}
.fac-card:hover{ box-shadow:0 4px 16px rgba(0,0,0,0.08); } /* （準拠） */
.fac-card__name{ font-size:18px; font-weight:700; color:var(--color-text); margin-top:8px; line-height:1.4; } /* （準拠） */
.fac-card__name--sm{ font-size:16px; } /* （準拠） */
.fac-card__img{ margin-top:12px; } /* （準拠） */
.fac-card__img img{ border-radius:var(--radius-btn); } /* （準拠） */
.fac-card__img .photo-frame{ margin-bottom:0; } /* （実装調整：PC側photo-frame既定のmb10（post-detail由来）を打ち消し。SPは元より0） */
.fac-card__info{ margin-top:14px; } /* （準拠） */
.fac-card__actions{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; } /* （準拠） */

/* 併設施設ボックス also-box（PC/SP同値） */
.also-box{ margin-top:12px; padding:10px 14px; background:var(--color-bg-hover); border-radius:var(--radius-btn); } /* （準拠） */
.also-box__title{ font-size:11px; font-weight:700; color:var(--color-text-light); margin-bottom:4px; } /* （準拠） */
.also-item{ font-size:13px; color:var(--color-text); line-height:1.8; } /* （準拠） */

/* 拠点間ナビの現在地（sibling-pill本体はデバイス別＝②③。現在地色は同値） */
.sibling-pill--current{ background:var(--color-brand-green); border-color:var(--color-brand-green); color:var(--color-bg-white); } /* （準拠） */
.sibling-pill--current:hover{ background:var(--color-brand-green); border-color:var(--color-brand-green); color:var(--color-bg-white); } /* （準拠） */

/* 導入部 intro（写真2枚並びはPC/SP共通＝SPカンプ裁定「写真のみのため1列化不要」） */
.intro-section{ margin-bottom:36px; } /* （準拠） */
.intro-photos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-bottom:20px; } /* （準拠：minmax化はSPカンプ規律メモをPCへも適用） */
.intro-photos .photo-frame{ min-width:0; margin-bottom:0; } /* （実装調整：規律メモ＋PC側photo-frame既定mb10の打ち消し＝グリッド行高ずれ防止） */
.intro-text{ font-size:16px; line-height:2; color:var(--color-text); } /* （準拠） */

/* 地図枠 map-frame（photo-frame同方式・比率4/3。PC/SP同値） */
.map-frame{
  position:relative; width:100%; aspect-ratio:4/3; background:var(--color-bg-hover);
  border:1px dashed var(--color-border); border-radius:var(--radius-btn); overflow:hidden;
  display:flex; align-items:center; justify-content:center; /* （準拠） */
}
.map-frame::after{ content:attr(data-label); font-size:13px; color:var(--color-text-muted); position:absolute; pointer-events:none; } /* （準拠） */
.map-frame.has-image{ border-color:transparent; background:transparent; } /* （準拠） */
.map-frame img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; } /* （準拠） */
.map-frame img[data-failed]{ display:none; } /* （準拠） */
.map-actions{ display:flex; justify-content:flex-end; margin-top:10px; } /* （準拠） */

/* 会議室カード room-card（グリッド列数はデバイス別＝②③。カード自体はPC/SP同値） */
.room-card{
  min-width:0;                          /* （実装調整：規律メモ） */
  background:var(--color-bg-white);
  border:2px solid var(--color-border);
  border-radius:var(--radius-btn);
  padding:20px;                         /* （準拠） */
  transition:box-shadow .25s ease;      /* （準拠） */
}
.room-card:hover{ box-shadow:0 4px 16px rgba(0,0,0,0.08); } /* （準拠） */
.room-card__header{ display:flex; align-items:center; gap:8px; margin-bottom:10px; } /* （準拠） */
.room-card__name{ font-size:17px; font-weight:700; color:var(--color-text); line-height:1.4; } /* （準拠） */
.room-card__floor{
  display:inline-block; font-size:12px; font-weight:700; padding:3px 12px; border-radius:14px;
  background:var(--color-bg-green-light); color:var(--color-brand-green); line-height:1.4; white-space:nowrap; /* （準拠：tag--area同値） */
}
.room-card__img{ margin-top:10px; } /* （準拠） */
.room-card__img .photo-frame{ margin-bottom:0; } /* （実装調整：PC側photo-frame既定mb10の打ち消し） */
.room-card__desc{ margin-top:10px; font-size:14px; line-height:1.8; color:var(--color-text); } /* （準拠） */

/* 注意書きボックス note-box（PC/SP同値。callout-boxのクリーム背景版） */
.note-box{ margin-top:20px; padding:16px 20px; background:var(--color-bg-cream); border-radius:var(--radius-btn); font-size:14px; line-height:1.9; color:var(--color-text-mid); } /* （準拠） */

/* 申請書リンク doc-link（PC/SP同値。ブルー＋ファイルアイコン） */
.doc-link-section{ margin-top:20px; } /* （準拠） */
.doc-link-section__title{ font-size:15px; font-weight:700; color:var(--color-text); margin-bottom:8px; } /* （準拠） */
.doc-link{
  display:inline-flex; align-items:center; gap:8px; padding:12px 16px;
  border:1.5px solid var(--color-border); border-radius:var(--radius-btn);
  font-size:14px; font-weight:700; color:var(--color-link-blue);
  transition:border-color .2s, box-shadow .2s; /* （準拠） */
}
.doc-link:hover{ border-color:var(--color-link-blue); box-shadow:0 2px 8px rgba(0,0,0,0.06); } /* （準拠） */
.doc-link .icon-file{ width:16px; height:16px; fill:var(--color-link-blue); flex-shrink:0; } /* （準拠） */

/* 物品チップ item（グリッド列数はデバイス別＝②③。チップ・見出しはPC/SP同値） */
.item-grid{ margin-top:20px; } /* （準拠：SPカンプでクラス化＝PCインラインstyleの受け。列数・gapは②③） */
.item-group{ margin-bottom:20px; } /* （準拠） */
.item-group:last-child{ margin-bottom:0; } /* （準拠） */
.item-group__title{ font-size:15px; font-weight:700; color:var(--color-text); margin-bottom:10px; } /* （準拠） */
.item-list{ display:flex; flex-wrap:wrap; gap:8px; } /* （準拠） */
.item-chip{
  display:inline-block; padding:8px 16px; background:var(--color-bg-white);
  border:1.5px solid var(--color-border); border-radius:var(--radius-btn);
  font-size:14px; color:var(--color-text); line-height:1.4; /* （準拠） */
}

/* 印刷料金表 pricing-table（PC/SP同値） */
.pricing-table{ width:100%; border-collapse:collapse; } /* （準拠） */
.pricing-table th,
.pricing-table td{ padding:10px 14px; font-size:14px; line-height:1.6; text-align:left; border-bottom:1px solid var(--color-border); } /* （準拠） */
.pricing-table th{ width:120px; background:var(--color-bg-hover); font-weight:700; color:var(--color-text-light); vertical-align:top; } /* （準拠） */
.pricing-table td{ color:var(--color-text); } /* （準拠） */
.note-small{ font-size:12px; color:var(--color-text-muted); margin-top:2px; } /* （準拠：pricing-table内注記。単独クラスとして定義＝カンプの .pricing-table .note-small と同値） */

/* ---- ②PC（769px〜） ---- */
@media (min-width: 769px) {

/* -- PC下層共通部品の追補（B-1初出分への追加） -- */
.jump-nav__sep{ color:var(--color-border); font-size:14px; } /* （準拠：SP base同値のPC初出。facilitiesのみ使用） */
.info-row__note{ font-size:13px; color:var(--color-text-muted); margin-top:2px; } /* （準拠：SP base同値のPC初出） */

/* -- facilities（一覧）固有（PC） -- */
.fac-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } /* （準拠：1fr 1fr→minmax化は実装調整） */
.page-body--facilities .info-row__label{ flex:0 0 40px; } /* （準拠：fc実値40px＝B-1既定60pxのページ側上書き） */

/* -- facility-detail（詳細）固有（PC） -- */
.sibling-nav{ max-width:var(--content-max-width); margin:16px auto 0; display:flex; gap:8px; flex-wrap:wrap; } /* （準拠） */
.sibling-pill{
  display:inline-block; padding:7px 16px; border-radius:20px; border:1.5px solid var(--color-border);
  background:var(--color-bg-white); font-size:13px; font-weight:700; color:var(--color-text-mid);
  white-space:nowrap; transition:border-color .2s, color .2s, background .2s; /* （準拠） */
}
.sibling-pill:hover{ border-color:var(--color-brand-green); color:var(--color-link-hover); } /* （準拠／2026-07-30：文字のみAA適合濃緑・枠は準拠） */
.fd-info-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; align-items:start; } /* （準拠：1fr 1fr→minmax化は実装調整。改名＝ブロック冒頭メモ） */
.fd-info-grid > *{ min-width:0; } /* （実装調整：規律メモ） */
.room-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } /* （準拠：1fr 1fr→minmax化は実装調整） */
.item-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; } /* （準拠：PCカンプ・インラインstyleのクラス化＝SPカンプの例外裁定をPCで受ける） */
.item-grid > *{ min-width:0; } /* （実装調整：規律メモ） */
.page-body--facility .info-row{ padding:8px 0; } /* （準拠：fd実値8px＝B-1既定6pxのページ側上書き） */
.page-body--facility .info-row__label{ flex:0 0 96px; } /* （準拠：fd実値96px＝項目名が長いため。B-1既定60pxのページ側上書き） */

} /* /@media (min-width:769px) 案B-2 PCおわり */

/* ---- ③SP（〜768px） ---- */
@media (max-width: 768px) {

/* -- facilities（一覧）固有（SP）＝SPカンプ逐語 -- */
.fac-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr); /* （派生：PC2列→SP1列。minmax(0,1fr)＝規律メモ） */
  gap:16px;                            /* （準拠） */
}
.page-body--facilities .info-row__label{ flex:0 0 40px; } /* （準拠：fc実値40px＝base既定5emの上書き。SPカンプはページ側bare＝実装ではスコープ化＝B-1と同裁定） */

/* -- facility-detail（詳細）固有（SP）＝SPカンプ逐語 -- */
.sibling-nav{
  margin:16px 0 0;                                /* （準拠） */
  padding:0 var(--sp-inner-pad);                  /* （派生：SP左右16px＝breadcrumb同様の直付け） */
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr)); /* （準拠：7/7修正指示＝一段2個の2列グリッド） */
  gap:8px;                                        /* （準拠） */
}
.sibling-pill{
  min-width:0;                                              /* （準拠：SPカンプ規律メモ） */
  display:flex; align-items:center; justify-content:center; /* （準拠：7/7修正指示＝外枠統一の中央配置） */
  height:36px;                                              /* （準拠：7/7修正指示＝タップ高36px） */
  padding:0 8px;                                            /* （準拠：7/7修正指示） */
  border-radius:20px;                                       /* （準拠：h36でカプセル形にクランプ） */
  border:1.5px solid var(--color-border); background:var(--color-bg-white); /* （準拠） */
  font-size:11px;                                           /* （準拠：7/7修正指示＝13→11px縮小） */
  font-weight:700; color:var(--color-text-mid); white-space:nowrap; /* （準拠） */
  transition:border-color .2s, color .2s, background .2s;   /* （準拠） */
}
.sibling-pill:hover{ border-color:var(--color-brand-green); color:var(--color-link-hover); } /* （準拠／2026-07-30：文字のみAA適合濃緑・枠は準拠） */
.fd-info-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr); /* （派生：PC2列→SP1列。DOM順＝読み順を維持） */
  gap:28px;                            /* （準拠：縦間隔として維持） */
  align-items:start;                   /* （準拠） */
}
.fd-info-grid > *{ min-width:0; }      /* （準拠：SPカンプ規律メモ） */
.room-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr); /* （派生：PC2列→SP1列＝fac-grid同裁定） */
  gap:16px;                            /* （準拠） */
}
.page-body--facility .info-row__label{ flex:0 0 96px; } /* （準拠：fd実値96px＝base既定5emの上書き。スコープ化＝B-1と同裁定） */

} /* /@media (max-width:768px) 案B-2 SPおわり */

/* ================================================================
   ▼▼ 案B-3（2026-07-13）：協会について（about）＋世田谷版GBER（banner-item-gber）
   カンプ：design-about-pc／design-banner-item-gber-pc（PC＝原則1の正）
           template-design-about-sp／template-design-banner-item-gber-sp（SP）
   構成：①デバイス共通 → ②PC（769px〜） → ③SP（〜768px）
   （準拠）＝カンプ実値そのまま／（派生：元値）／（実装調整）＝理由付き
   ================================================================ */

/* ---- ①デバイス共通 ---- */

/* about：テキスト＋写真グリッドの小見出し（PC/SP同値） */
.content-grid__subtitle{ font-size:17px; font-weight:700; color:var(--color-brand-green); margin-bottom:12px; line-height:1.5; } /* （準拠） */
.content-grid .photo-frame{ height:200px; aspect-ratio:auto; margin-bottom:0; } /* （準拠：PC photo-placeholder＝高さ200px。mb0＝PC base photo-frame mb10の打消し＝B-2前例） */

/* about：動画プレースホルダー（PC/SP同値。動画完成次第差し替え） */
.video-placeholder{ width:100%; aspect-ratio:16/9; background:var(--color-text); border-radius:var(--radius-btn); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; margin-top:16px; } /* （準拠） */
.video-placeholder__icon{ width:48px; height:48px; fill:var(--color-bg-white); opacity:.5; } /* （準拠） */
.video-placeholder__label{ font-size:13px; color:var(--color-bg-white); opacity:.5; } /* （準拠） */

/* about：協会概要テーブル（paddingのみ②③） */
.info-table{ width:100%; border-collapse:collapse; } /* （準拠） */
.info-table th, .info-table td{ font-size:15px; line-height:1.8; border-bottom:1px solid var(--color-border); text-align:left; vertical-align:top; } /* （準拠） */
.info-table th{ width:120px; font-weight:700; color:var(--color-text-mid); white-space:nowrap; background:var(--color-bg-hover); } /* （準拠：th120px＝PC/SP同値） */
.info-table td{ color:var(--color-text); } /* （準拠） */
.info-table .sub-label{ font-weight:700; color:var(--color-text-mid); } /* （準拠） */

/* about：文書リンクグリッド（列数のみ②③）
   ※カンプの .doc-link は案B-2「申請書リンク .doc-link」と名称衝突→ .doc-card に改名
   （B-2 .info-grid→.fd-info-grid と同裁定。テンプレも同名で作成済み） */
.doc-grid{ display:grid; gap:10px; } /* （準拠：gap10） */
.doc-grid > *{ min-width:0; } /* （実装調整：規律メモ） */
.doc-card{ display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--color-bg-white); border:1px solid var(--color-border); border-radius:var(--radius-btn); font-size:15px; font-weight:500; color:var(--color-link-blue); transition:background .2s; } /* （準拠：カンプ.doc-linkの実値） */
.doc-card:hover{ background:var(--color-bg-hover); text-decoration:underline; } /* （準拠） */
.doc-card__icon{ width:18px; height:18px; fill:var(--color-link-blue); flex-shrink:0; } /* （準拠） */

/* gber＝自作固定ページ：タイトル下の横長写真（photo-frame方式・本文貼り付け先頭運用） */
.photo-frame--page{ height:90px; aspect-ratio:auto; margin-bottom:0; } /* （準拠：PC page-photo-placeholder＝全幅×90px。部品のみphoto-frame方式へ置換＝SPカンプ裁定。mb0＝B-2前例の打消し。実装調整：貼り付け運用化に伴い .page-title-area スコープ→モディファイアへ変更＝裁定改） */

/* gber：H3小見出し（font-sizeのみ②③） */
.subheading{ font-weight:700; color:var(--color-text-mid); padding-bottom:8px; border-bottom:3px solid var(--color-lime); display:inline-block; margin:0 0 16px; line-height:1.4; } /* （準拠） */

/* gber：手順ステップ（step gapのみ②③） */
.steps{ margin-top:16px; } /* （準拠） */
.step{ display:flex; align-items:flex-start; padding:10px 0; } /* （準拠） */
.step__number{ width:32px; height:32px; border-radius:50%; background:var(--color-brand-green); color:var(--color-bg-white); font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; } /* （準拠） */
.step__text{ font-size:16px; line-height:1.8; padding-top:4px; } /* （準拠） */

/* gber：外部リンク・文書リンク（note余白のみ②③） */
.link-external{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:16px; font-weight:700; color:var(--color-link-blue); } /* （準拠） */
.link-external:hover{ text-decoration:underline; } /* （準拠） */
.link-external__note{ font-size:13px; color:var(--color-text-light); font-weight:400; } /* （準拠） */
.link-doc{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-size:16px; font-weight:700; color:var(--color-link-blue); } /* （準拠） */
.link-doc:hover{ text-decoration:underline; } /* （準拠） */
.link-doc__icon{ width:18px; height:18px; fill:var(--color-link-blue); flex-shrink:0; } /* （準拠） */

/* ---- ②PC（769px〜） ---- */
@media (min-width: 769px) {

/* -- about（PC） -- */
.info-table th, .info-table td{ padding:14px 16px; } /* （準拠） */
.history-table{ width:100%; border-collapse:collapse; } /* （準拠） */
.history-table td{ padding:10px 12px; font-size:14px; line-height:1.8; border-bottom:1px solid var(--color-border); vertical-align:top; color:var(--color-text); } /* （準拠） */
.history-table .col-year{ width:80px; font-weight:700; color:var(--color-text-mid); white-space:nowrap; } /* （準拠） */
.history-table .col-month{ width:48px; color:var(--color-text-light); white-space:nowrap; } /* （準拠） */
.doc-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } /* （準拠：1fr 1fr→minmax化は実装調整＝規律メモ） */

/* -- gber＝自作固定ページ（PC） -- */
.page-body--free{ padding-top:20px; } /* （実装調整：写真＝本文貼り付け先頭運用。カンプのtitle-area内写真mt20を再現＝B-1リード運用と同裁定） */
.page-body--free .page-lead{ margin-bottom:40px; } /* （実装調整：リード下＝カンプpage-body上40pxを再現＝B-1と同裁定。margin-top22はbase継承） */
.subheading{ font-size:19px; } /* （準拠） */
.step{ gap:14px; } /* （準拠） */
.link-external__note{ margin-left:4px; } /* （準拠） */
.page-body--free .content-section{ margin-bottom:40px; } /* （準拠：gber PCカンプ＝40px。base48pxのページ側上書き＝SP統一40pxと整合） */

} /* /@media (min-width:769px) 案B-3 PCおわり */

/* ---- ③SP（〜768px） ---- */
@media (max-width: 768px) {

/* -- about（SP） -- */
.page-body--about .content-grid{ gap:16px; } /* （派生：aboutカンプ16px。base（B-1 SP）28pxのページ側上書き＝スコープ化） */
.info-table th, .info-table td{ padding:12px; } /* （派生：14px 16px→SP幅節約） */
/* 沿革テーブル：7/7修正指示＝年月でいったん改行し、内容を画面幅いっぱいに
   （マークアップ＝PC3列テーブル準拠のまま、CSSで行を縦積み化） */
.history-table, .history-table tbody{ display:block; width:100%; } /* （7/7修正指示：ブロック化。border-collapseは非適用となるため非収載） */
.history-table tr{ display:block; padding:10px 0; border-bottom:1px solid var(--color-border); } /* （7/7修正指示：PC tdの1px罫・上下10pxを行単位へ移設） */
.history-table td{ display:block; font-size:14px; line-height:1.8; color:var(--color-text); } /* （準拠：文字周り。罫線・余白はtr側へ移設） */
.history-table .col-year{ display:inline-block; margin-right:8px; font-weight:700; color:var(--color-text-mid); white-space:nowrap; } /* （準拠：太字・色・nowrap／7/7修正指示：幅80px撤去→年月を同一行に） */
.history-table .col-year:empty{ display:none; } /* （7/7修正指示：年省略行は月のみ左端から表示＝空セルのmargin残り防止） */
.history-table .col-month{ display:inline-block; color:var(--color-text-light); white-space:nowrap; } /* （準拠：色・nowrap／7/7修正指示：幅48px撤去） */
.doc-grid{ grid-template-columns:minmax(0,1fr); } /* （派生：PC2列→SP1列＝「2024年度 事業報告」等が2列幅では折返すため＝SPカンプ裁定） */
.doc-card[id]{ scroll-margin-top:calc(var(--sp-header-h) + 8px); } /* （実装調整：footer既存アンカー #budget/#report/#board の着地見切れ回避＝B-2 scroll-margin行と同型） */

/* -- gber＝自作固定ページ（SP） -- */
.page-body--free{ padding-top:16px; } /* （実装調整：写真＝本文貼り付け先頭運用。カンプの写真mt16を再現） */
.page-body--free .page-lead{ margin-bottom:28px; } /* （実装調整：リード下＝base page-body上28pxを再現＝B-1と同裁定。margin-top16はbase継承） */
.subheading{ font-size:17px; } /* （派生：19px→SP縮小。base section-heading 21→19と同勾配） */
.step{ gap:12px; } /* （派生：14px） */
.link-external{ flex-wrap:wrap; } /* （派生：SPはURL＋注記が1行に収まらないため折返し許容＝SPカンプ） */
.link-external__note{ width:100%; margin:4px 0 0; } /* （派生：margin-left 4px→SPは2行目へ落とす＝SPカンプ） */

} /* /@media (max-width:768px) 案B-3 SPおわり */

/* ================================================================
   ▼▼ 工程⑤B：投稿フォーム実機検証対応 2026-07-13
   （案B-4返却後にフォーム工程チャットで統合。出自＝7/13実機検証）
   ================================================================ */

/* USP Proのファイル選択プレビューを非表示。
   複数ファイル欄でプレビューが全欄に複製されるプラグイン不具合への対処
   （USP Pro 4.6.2で実機確認）。プレビューJSは「Include USP JavaScript」に
   同梱で、切ると複数アップロード自体が死ぬためCSSで抑止する。
   実機HTML確認の結果、プレビューの実体は img ではなく、空の div.usp-preview に
   JSが a要素を注入し背景画像で表示する構造（USP注入のインラインCSS準拠）。
   よって .usp-preview ごと非表示にする。選択確認はボタン横のファイル名表示で足りる。 */
.form-page .usp-preview { display: none !important; }
.form-page form img { display: none !important; } /* 予備（img注入型に変わった場合の保険） */

/* ================================================================
   ▼▼ 各種ダウンロードページ（page-download.php）統合 2026-07-19
   （カンプ確定 7/18：design-download-pc / template-design-download-sp。
   本文＝固定ページ直書き運用＝content-download-initial.html）
   名寄せ・流用の裁定：
   ・資料リンク＝案B-2「申請書リンク .doc-link」を流用（カンプ準拠＝同意匠）
   ・格子＝案B-3「.doc-grid」（gap10・PC2列/SP1列・min-width:0済み）を流用。
     downloadカンプPCの列間gap14はgap10へ名寄せ（差4pxのみ・裁定＝流用優先）
   ・PCゾーン追加なし（上記流用で全て充足）
   ================================================================ */

/* ---- ①デバイス共通 ---- */

/* download：B-3格子×B-2チップの充填（aboutの.doc-gridは.doc-card使用のため影響なし） */
.doc-grid .doc-link{ display:flex; } /* （実装調整：inline-flex→格子内全幅化。min-width:0はB-3 .doc-grid>*で充足） */
.page-download .doc-grid{ margin-top:4px; } /* （準拠：downloadカンプ。aboutのdoc-gridへ影響させないスコープ化） */

/* download：ファイル追加予定（空セクション用プレースホルダー。PC/SP同値） */
.file-pending{ margin-top:4px; width:100%; height:70px; background:var(--color-bg-hover);
  border:1px dashed var(--color-border); border-radius:var(--radius-btn);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--color-text-muted); letter-spacing:.05em; } /* （準拠：downloadカンプ＝page-photo-placeholder派生h70） */

/* download：保護ファイル用（チャイルドライン個人情報ファイル向け。当面未使用＝
   雛形リンクは固定ページ本文内にコメントアウトで同梱） */
.doc-link--locked{ color:var(--color-text-mid); } /* （準拠：downloadカンプ） */
.doc-link--locked .icon-lock{ width:14px; height:14px; fill:var(--color-cta); flex-shrink:0; } /* （準拠） */
.locked-note{ font-size:13px; color:var(--color-text-light); margin-top:8px; line-height:1.8; } /* （準拠） */

/* download：セクション注記・ページ誘導リンク（PC/SP同値） */
.section-note{ font-size:13px; color:var(--color-text-light); margin-top:12px; line-height:1.8; } /* （準拠：downloadカンプ） */
.section-note a{ color:var(--color-link-blue); font-weight:700; } /* （準拠） */
.section-note a:hover{ text-decoration:underline; } /* （準拠） */
.link-page{ color:var(--color-link-blue); font-weight:700; } /* （準拠：downloadカンプ＝gber系ブルー太字） */
.link-page:hover{ text-decoration:underline; } /* （準拠） */

/* ---- ③SP（〜768px） ---- */
@media (max-width: 768px) {

/* download：ページ内目次の2列格子整列（7/18修正指示＝sibling-nav 7/7方式準拠。
   .page-downloadスコープ＝本ページ限定。他ページのjump-navはbase既定のまま） */
.page-download .jump-nav__list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; } /* （準拠：sibling-nav 7/7＝2列格子。gap8＝base継承値と同値） */
.page-download .jump-pill{
  min-width:0;                                              /* （準拠：規律メモ） */
  display:flex; align-items:center; justify-content:center; /* （派生：base inline-block→sibling-nav 7/7＝外枠統一の中央配置） */
  text-align:center;               /* （派生：折返し時の中央揃え） */
  min-height:36px; height:auto;    /* （派生：sibling-nav h36固定→最長18字ラベルは2列幅で1行不可のため2行折返しを許容。行内高さはグリッドstretchで統一） */
  padding:6px 8px;                 /* （派生：base 8px 14px→2列幅・2行時の余白調整） */
  font-size:11px;                  /* （派生：base 13px→sibling-nav 7/7裁定と同値） */
  line-height:1.35;                /* （派生：2行折返し用） */
}

} /* /@media (max-width:768px) downloadおわり */