@charset "UTF-8";

/* =====================================================================================
   TABLE OF CONTENTS（目次）
   ─────────────────────────────────────────────────────────────────────────────────────
   目的のセクションへ移動するには、番号（例："=== 09."）でページ内検索してください。

   01. CSS Custom Properties ......... カラー変数・影・スペーシング
   02. Base / Reset .................. html, body, * リセット
   03. Links ......................... リンク色
   04. Typography .................... 見出し(h1-h6)・段落・テキスト
   05. Navigation .................... ヘッダー・ナビゲーション・ロゴ
   06. Layout Utilities .............. .section-pad, footer 位置など
   07. Section Titles ................ .sub_t01, .green-label など見出し装飾
   08. Background Colors ............. .back01 〜 .back05
   09. Buttons ....................... .info-btn, .rainbow-btn, .slider-btn など
   10. Cards ......................... .rainbow-card, section .card
   11. Icon Boxes .................... 目的から探す .ic_box
   12. Swiper / Hero Slider .......... ヒーロースライダー
   13. Info Section .................. 商工会議所とは .bg_logo
   14. Social Icons .................. SNS アイコン
   15. News Tabs ..................... インフォメーション タブ・ニュースアイテム
   16. Rainbow Cards（所報） ......... .rainbow-thumb
   17. Banner Links .................. .banner-grid バナーリンク
   18. Pagination .................... ページネーション
   19. Single Post Navigation ........ 記事前後固定ナビ
   20-21. Contact Form 7 ............. 末尾「Contact Form 7 スタイル」に統合済み
   22. Definition List ............... dl / dt / dd
   23. Image Alignment ............... .alignright, .alignleft, .aligncenter
   24. Fade-up Animation ............. .js-fadeup スクロールアニメ
   25. Header Search ................. ヘッダー内検索フォーム
   26. Contact Page Cards ............ 末尾「contact-card」に統合済み
   27. Anchor Offset ................. :target スクロール位置補正
   28. Footer ........................ フッター #site-footer
   29. Category Page ................. カテゴリ一覧ページ
   30. Single Post Page .............. 記事詳細ページ
   31. Mega Dropdown ................. 目的から探す メガドロップダウン
   32. Page Hero ..................... 固定ページ ヒーロー
   33. Text Boxes .................... 文字枠（ボーダー / 塗り / グラデ / Spotlight / ラベル）
   34. Alignment Utilities ........... .box-left / .box-center / .box-right
   35. Highlights & Markers .......... .hl-* / .mk-* / .bet-*
   36. Profile Page .................. プロファイルページ .pro-lead-row
   37. Triangle ...................... .triangle-down
   38. Card Grid ..................... テーブル代替グリッド .card-grid-3
   39. Table ......................... テーブル table / thead / tbody
   40. Mobile Padding Fix ............ Bootstrap .px-5 スマホ上書き
   41. Icon List ...................... .list-icon アイコン付きリスト
   42. Card Grid ..................... 2×4カードグリッド・Kenteiカードグリッド
   43. Kaichou Wrap .................. 会長挨拶 画像回り込み .kaichou-wrap
   44. Image Modal ................... ライトボックス .img-modal-overlay
   45. Search Highlight .............. 検索キーワード mark.search-highlight
   46. Contact Page .................. お問合せページ .page-template-page-contact
   47. Contact Cards ................. お問合せカード .contact-card
   48. Contact Form 7 ................ .wpcf7 入力・バリデーション・送信ボタン
   ─────────────────────────────────────────────────────────────────────────────────────
   50. Mobile Layout ................. スマホ専用レイアウトをここに集約
     50-A. コンテナ・ px 系余白リセット .. .container / .px-5 / .px-4 / .px-3
     50-B. Page Hero ................. タイトルバー
     50-C. Page Article .............. コンテンツ本体余白
   ===================================================================================== */

/* =====================================================================================
   01. CSS Custom Properties（カラーシステム）
   ===================================================================================== */
:root {
  /* コーポレートグリーン */
  --green-primary:   #097040;
  --green-hover:     #12833c;
  --green-pressed:   #0f6b31;
  --green-light:     #b7d8b9;
  --green-medium:    #3cb371;
  --green-dark:      #003629;
  --green-pale:      #e8f5ec;

  /* テキスト（DESIGN.md準拠） */
  --text-primary:    #1c2b33;
  --text-secondary:  #5d6c7b;
  --text-muted:      #65676b;

  /* サーフェス */
  --surface-white:   #ffffff;
  --surface-gray:    #f1f4f7;
  --surface-warm:    #f7f8fa;
  --surface-dark:    #1c1e21;

  /* ボーダー */
  --divider:         #dee3e9;
  --border-input:    #ced0d4;

  /* アクセント（カテゴリ色） */
  --color-amber:     #d97706;   /* WCAG対応のやや暗いアンバー */
  --color-purple:    #7c3aed;
  --color-pink:      #db2777;
  --color-red:       #dc2626;
  --color-gray:      #4b5563;
  --color-slate:     #535666;

  /* 影 */
  --shadow-sm:       0 2px 4px 0 rgba(0,0,0,0.08);
  --shadow-md:       0 8px 24px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.06);
  --shadow-lg:       0 12px 28px 0 rgba(0,0,0,0.18), 0 2px 4px 0 rgba(0,0,0,0.08);

  /* ヘッダー高さ（アンカーオフセット用） */
  --header-h: 120px;

  /* スペーシング */
  --section-pad-y:   80px;
  --section-pad-y-md: 64px;
  --section-pad-y-sm: 48px;
}

/* =====================================================================================
   02. Base / Reset
   ===================================================================================== */
/* Safari の flexbox/grid で min-height が auto に解釈されるバグの回避策 */
* {
  min-height: 0vw;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--text-primary);
  font-family: "M PLUS Rounded 1c", sans-serif;
  min-height: 100vh;
  margin: 0 !important;
  padding-top: 0 !important;
  line-height: 1.8;
  background-color: var(--surface-white);
}

/* =====================================================================================
   03. Links（リンク色）
   ===================================================================================== */
a:link    { color: var(--text-primary); }
a:visited { color: var(--text-primary); }
a:active  { color: var(--surface-white); }
a:hover   { color: var(--green-primary); text-decoration: none; }

.wh_lin :link    { color: white; }
.wh_lin :visited { color: white; }
.wh_lin :active  { color: white; }
.wh_lin :hover   { color: rgba(255,255,255,0.8); text-decoration: none; }

/* =====================================================================================
   04. Typography（見出し・テキスト・フォント）
   ===================================================================================== */
/* 本文・見出しのフォントサイズ（clamp値）は css/fluid-typography.css の
   CSS変数（--fs-body, --fs-h1〜--fs-h6）を共通定義として参照しています。
   サイズを変える場合は fluid-typography.css 側を編集してください。 */
p {
  color: var(--text-secondary);
  line-height: 1.8;
}

h1, h2, h3, h4, h5 {
  padding-top: 0.2em;
  color: var(--text-primary);
  font-weight: 600;
}

h1 {
  line-height: 1.3;
  letter-spacing: 0.1em;
}

h2 {
  line-height: 1.4;
  letter-spacing: 0.08em;
}

h3 {
  line-height: 1.5;
  letter-spacing: 0.06em;
}

h4 {
  line-height: 1.6;
  letter-spacing: 0.005em;
}

h5 {
  line-height: 1.7;
  letter-spacing: 0.03em;
}

h6 {
  line-height: 1.6;
  letter-spacing: normal;
}

.c_wh { color: white; }

/* 視覚的には非表示だがスクリーンリーダー/SEOには読み上げられるh1用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.under_600 {
  text-decoration-line: underline;
  font-weight: 600;
  line-height: 3rem;
}

.tx_c { text-align: center; }

.color-red { color: var(--color-red); }

.underline {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.strong {
  font-weight: 600;
}
/* =====================================================================================
   05. Navigation（ヘッダー・ナビゲーション・フロストガラス）
   ===================================================================================== */
header.sticky-top {
  z-index: 1030;
  overflow: visible;
}
header.sticky-top .navbar,
header.sticky-top .navbar-collapse,
header.sticky-top .navbar-nav {
  overflow: visible;
}

header.sticky-top .navbar {
  border-bottom: 2px solid var(--green-primary);
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

header.sticky-top .navbar.scrolled {
  box-shadow: var(--shadow-md);
}

.sticky-top {
  background-color: transparent;
}

.navbar .navbar-nav .nav-link {
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
  border-radius: 100px;
  padding: 0.4rem 0.9rem;
  letter-spacing: 0.02em;
}

/* ホバー時（!important を避けるため親セレクタで詳細度を上げる） */
header .navbar-nav .nav-link:hover {
  background-color: var(--green-primary);
  color: #fff;
}

/* アクティブ時 */
header .navbar-nav .nav-link.active {
  color: var(--green-primary);
  font-weight: 700;
}

.navbar-brand img {
  width: clamp(220px, 44vw, 460px);
  height: auto;
  display: block;
  max-width: 100%;
}

/* ロゴのラッパー（モバイル時は直下にバナーを表示） */
.navbar-brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  flex-shrink: 0;
  max-width: 60%;
}

/* バナー共通スタイル */
.navbar-sub-img {
  height: auto;
  width: auto;
  display: block;
}

/* モバイル用（ロゴ直下・右寄せ）：初期表示し、lg以上で非表示 */
.navbar-sub-img--mobile {
  max-height: clamp(16px, 3.2vw, 28px);
  margin-top: 2px;
  margin-left: auto;
}

/* デスクトップ用（検索窓左）：初期非表示、lg以上で表示 */
.navbar-sub-img--desktop {
  display: none;
  max-height: 40px;
  margin-right: 0.9rem;
}

@media (min-width: 992px) {
  .navbar-sub-img--mobile {
    display: none;
  }
  .navbar-sub-img--desktop {
    display: block;
  }
}

/* タブレット・スマホ：ロゴ幅に応じてラッパー幅も調整 */
@media (max-width: 991.98px) {
  .navbar-brand-wrap {
    max-width: 65%;
  }
}
@media (max-width: 575.98px) {
  .navbar-brand-wrap {
    max-width: 70%;
  }
  .navbar-sub-img--mobile {
    max-height: clamp(12px, 3.6vw, 20px);
  }
}

/* 検索行（バナー＋検索フォーム） */
.header-search-row {
  gap: 0.5rem;
}


/* =====================================================================================
   06. Layout Utilities（レイアウト補助）
   ===================================================================================== */
.no-gutters {
  margin: 0;
  padding: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
  margin: 0;
  padding: 0;
}

footer {
  position: sticky;
  top: 100vh;
  width: 100%;
}

/* セクション余白（DESIGN.md: 64–80px）
   Bootstrap の pt-5 / py-4 系をオーバーライドしないよう .section-pad クラスで制御 */
.section-pad {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}
@media (max-width: 991.98px) {
  .section-pad { padding-top: var(--section-pad-y-md); padding-bottom: var(--section-pad-y-md); }
}
@media (max-width: 575.98px) {
  .section-pad { padding-top: var(--section-pad-y-sm); padding-bottom: var(--section-pad-y-sm); }
}

/* =====================================================================================
   07. Section Title Styles（セクション見出しスタイル）
   ===================================================================================== */

/* --- .sub_t01：中央区切り線タイトル --- */
.sub_t01 {
  position: relative;
  text-align: center;
  padding: 20px 0;
  color: var(--green-primary);
  font-weight: 600;
}
.sub_t01:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background: var(--green-light);
}
.sub_t01 span {
  position: relative;
  padding: 0 1.5em;
  background: var(--surface-white);
}

/* --- .sub_t02：オレンジ版 中央区切り線タイトル --- */
.sub_t02 {
  position: relative;
  text-align: center;
  padding: 20px 0;
  color: var(--color-amber);
  font-weight: 600;
}
.sub_t02:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background: #fde68a;
}
.sub_t02 span {
  position: relative;
  padding: 0 1.5em;
  background: var(--surface-white);
}

/* --- グリーンラベル見出し --- */
.green-title-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 3px;
}
.green-title-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--green-primary) 0%, var(--green-light) 100%);
  border-radius: 0 2px 2px 0;
}

.green-label {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 10px 48px 10px 24px;
  background: var(--green-primary);
  color: #fff;
  font-size: var(--fs-fluid-lg);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 20px 0 0 0;
}
.green-label::after {
  content: "";
  position: absolute;
  top: 0;
  right: -32px;
  width: 64px;
  height: 100%;
  background: var(--surface-white);
  transform: skewX(-30deg);
}

/* --- グレーラベル見出し --- */
.grey-title-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 3px;
}
.grey-title-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--color-slate);
}

.grey-label {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 10px 48px 10px 24px;
  background: var(--color-slate);
  color: #fff;
  font-size: var(--fs-fluid-lg);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 20px 0 0 0;
}
.grey-label::after {
  content: "";
  position: absolute;
  top: 0;
  right: -32px;
  width: 64px;
  height: 100%;
  background: var(--green-light);
  transform: skewX(-30deg);
}

@media (max-width: 991.98px) {
  .green-label { padding: 8px 44px 8px 18px; }
  .grey-label  { padding: 8px 44px 8px 18px; }
}
@media (max-width: 576px) {
  .green-label { padding: 8px 40px 8px 16px; }
  .grey-label  { padding: 8px 40px 8px 16px; }
  .green-title-wrap::after,
  .grey-title-wrap::after { height: 3px; }
}

/* =====================================================================================
   08. Background Colors（背景色ユーティリティ）
   ===================================================================================== */
.back01 { background-color: var(--green-light); }
.back02 { background-color: var(--green-medium); }
.back03 { background-color: var(--green-light); }
.back04 { background-color: var(--green-dark); }
.back05 { background-color: var(--surface-white); }

/* =====================================================================================
   09. Buttons（ピル型ボタン）
   ===================================================================================== */

/* --- Primary：グリーンピル --- */
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-primary);
  border: 2px solid var(--green-primary);
  color: #fff;
  border-radius: 100px;
  padding: 10px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
a.btn.info-btn:link,
a.btn.info-btn:visited { color: #fff; }
.info-btn:hover,
.info-btn:focus {
  background: var(--surface-white);
  border-color: var(--green-primary);
  color: var(--green-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.info-btn:focus-visible {
  outline: 2px solid var(--green-primary);
  outline-offset: 3px;
}
a.btn.info-btn:hover,
a.btn.info-btn:focus { color: var(--green-primary); }

/* Block-editor button variant: .info-btn wraps .wp-element-button */
.wp-block-button.info-btn .wp-element-button {
  background: var(--green-primary);
  border: 2px solid var(--green-primary);
  color: #fff;
  border-radius: 100px;
  padding: 10px 28px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.wp-block-button.info-btn .wp-element-button:hover,
.wp-block-button.info-btn .wp-element-button:focus {
  background: var(--surface-white);
  border-color: var(--green-primary);
  color: var(--green-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.wp-block-button.info-btn .wp-element-button:focus-visible {
  outline: 2px solid var(--green-primary);
  outline-offset: 3px;
}
.info-btn-right {
  display: block;
  width: fit-content;
  margin-left: auto;
}

/* --- Secondary（amber）--- */
.info-btn1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-amber);
  border: 2px solid var(--color-amber);
  color: #fff;
  border-radius: 100px;
  padding: 10px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
a.btn.info-btn1:link,
a.btn.info-btn1:visited { color: #fff; }
.info-btn1:hover,
.info-btn1:focus {
  background: var(--surface-white);
  border-color: var(--color-amber);
  color: var(--color-amber);
  transform: translateY(-2px);
}
.info-btn1:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 3px;
}
a.btn.info-btn1:hover,
a.btn.info-btn1:focus { color: var(--color-amber); }

/* --- Rainbow ボタン --- */
.rainbow-btn {
  background: var(--green-primary);
  border: 2px solid var(--green-primary);
  color: #fff;
  border-radius: 100px;
  padding: 8px 20px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.rainbow-btn:hover,
.rainbow-btn:focus {
  background: var(--surface-white);
  border-color: var(--green-primary);
  color: var(--green-primary);
  transform: translateY(-2px);
}
.rainbow-btn:focus-visible {
  outline: 2px solid var(--green-primary);
  outline-offset: 3px;
}
a.btn.rainbow-btn:link,
a.btn.rainbow-btn:visited         { color: #fff; }
a.btn.rainbow-btn:hover,
a.btn.rainbow-btn:focus           { color: var(--green-primary); }

.rainbow-btn-right {
  display: block;
  width: fit-content;
  margin-left: auto;
}

/* --- Slider ボタン --- */
.slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 10px 24px;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  background: var(--btn-bg, var(--green-primary));
  color: var(--btn-text, #fff);
  border: 2px solid rgba(255,255,255,0.3);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.slider-btn:hover {
  background: var(--btn-bg-hover, var(--btn-bg, var(--green-primary)));
  color: var(--btn-text-hover, var(--btn-text, #fff));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.slider-btn:visited { color: var(--btn-text, #fff) !important; }
.slider-btn:visited:hover,
.slider-btn:visited:active { color: var(--btn-text-hover, var(--btn-text, #fff)) !important; }
.slider-btn:visited .btn-arrow { color: white; }

.btn-arrow {
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.2s ease;
}
.slider-btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* --- カテゴリボタン（一覧を見る） ---
 *
 * ★ デザインを変えたいときはここだけ編集する ★
 *
 * カテゴリ色は下の「カテゴリ色の定義」セクションで --cat-color を1行変えるだけ。
 * ホバーの見た目を変えたいときは :hover ブロックだけ編集する。
 * 新しいカテゴリを追加するには .btn-{name} { --cat-color: ...; } を1行追加する。
 * ------------------------------------------------- */
.btn-cat {
  /* 通常状態：淡色塗りつぶし */
  background: var(--cat-color);
  border: 2px solid var(--cat-border, var(--cat-color));
  color: var(--cat-text, #333);
  padding: 8px 20px;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn-cat:hover,
.btn-cat:focus {
  /* ホバー状態：白抜き */
  background: var(--surface-white);
  border-color: var(--cat-border, var(--cat-color));
  color: var(--cat-text, #333) !important;
  transform: translateY(-2px);
  text-decoration: none;
}
a.btn-cat,
a.btn-cat:visited          { color: var(--cat-text, #333) !important; text-decoration: none; }
a.btn-cat:hover,
a.btn-cat:focus            { color: var(--cat-text, #333) !important; text-decoration: none; }
a.btn-cat:active           { text-decoration: none; }

/* Contact Form 送信ボタン */
.btn_contact7 {
  text-align: center;
}
.btn_contact7 input {
  width: 70%;
  background-color: var(--green-primary);
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  letter-spacing: 0.2em;
  border: 2px solid var(--green-primary);
  border-radius: 100px;
  padding: 12px 32px;
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.btn_contact7 input:hover {
  background-color: var(--surface-white);
  color: var(--green-primary);
}

@media screen and (min-width: 992px) {
  /* PC幅では最大幅の制約のみ（他は共通スタイルを継承） */
  .btn_contact7 input {
    max-width: 100%;
  }
}

/* =====================================================================================
   10. Cards（カード）
   ===================================================================================== */
/* Rainbow・所報カードなどテーマ用カード */
.rainbow-card,
section .card {
  border-radius: 20px;
  border: 1px solid var(--divider);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
section .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
section .card.shadow-sm {
  box-shadow: var(--shadow-sm);
}

/* =====================================================================================
   11. Icon Boxes（目的から探す）
   ===================================================================================== */
.ic_box {
  display: block;
  text-decoration: none;
  color: var(--text-primary);
  width: 205px; /* Safari の日本語字幅計算差分を考慮して190→205px */
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  border-radius: 20px;
  background-color: transparent;
  text-align: center;
  font-weight: 1000; /* ブラウザが900に丸める：元の値を維持 */
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

/* 各カテゴリの枚線色 */
.ic_box:nth-child(1) { border-color: #0a7c48; }
.ic_box:nth-child(2) { border-color: #b45309; }
.ic_box:nth-child(3) { border-color: #be185d; }
.ic_box:nth-child(4) { border-color: #1d4ed8; }
.ic_box:nth-child(5) { border-color: #c2410c; }
.ic_box:nth-child(6) { border-color: #6d28d9; }

/* ホバー時：各色で塗りつぶし */
.ic_box:nth-child(1):hover { background-color: #d1f0e0; }
.ic_box:nth-child(2):hover { background-color: #fde9c0; }
.ic_box:nth-child(3):hover { background-color: #fce4f0; }
.ic_box:nth-child(4):hover { background-color: #dbeafe; }
.ic_box:nth-child(5):hover { background-color: #fde8d8; }
.ic_box:nth-child(6):hover { background-color: #e8d9fc; }
/* h1-h5の font-weight:600 を上書きし、元の太さに戻す */
.ic_box h3 {
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  font-weight: 900;
  white-space: nowrap; /* Safari でも改行させない */
}
.ic_icon-wrap {
  width: 90px;
  height: 90px;
  margin: 0 auto 0.6rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.ic_size {
  font-size: 3em;
  line-height: 1;
  transition: color 0.25s ease;
}

/* 各アイコンの色 */
.ic_box:nth-child(1) .ic_size { color: #6ec49a; }
.ic_box:nth-child(2) .ic_size { color: #f0a84a; }
.ic_box:nth-child(3) .ic_size { color: #f07ab0; }
.ic_box:nth-child(4) .ic_size { color: #6fa3ef; }
.ic_box:nth-child(5) .ic_size { color: #f0845a; }
.ic_box:nth-child(6) .ic_size { color: #a87ee8; }
.ic_box:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* xxl（1400px+）では全カードを1段に並べる
   6 × (200px + m-2 × 2) = 6 × 216px = 1296px ≤ xxl container 内幅 */
@media (min-width: 1400px) {
  .back01 .d-flex {
    flex-wrap: nowrap !important;
  }
  .ic_box {
    width: 200px;
  }
}

/* =====================================================================================
   12. Swiper / Hero Slider（ヒーロースライダー）
   ===================================================================================== */
.slide-inner {
  position: relative;
  width: 100%;
  height: var(--swiper-h, 50vh);
  min-height: var(--swiper-min-h, 300px);
  overflow: hidden;
}
.slide-inner picture,
.slide-inner picture img {
  display: block;
  width: 100%;
  height: 100%;
}
.slide-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide-inner.is-clickable { cursor: pointer; }

/* キャプション */
.slide-caption {
  position: absolute;
  top: 50%;
  left: 12%;
  transform: translateY(-50%);
  max-width: 600px;
  color: #fff;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.slide-caption::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: rgba(0,0,0,0.28);
  z-index: -1;
  border-radius: 16px;
  backdrop-filter: blur(2px);
}
.slide-title {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 700;
  margin: 0;
  color: white;
  font-family: "Noto Serif JP";
  align-self: flex-start;
  text-align: left;
  width: 100%;
  line-height: 1.3;
}
.slide-text {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  margin: 0;
  color: rgba(255,255,255,0.93);
  padding-left: 0.5em;
  align-self: flex-start;
  text-align: left;
  width: 100%;
}
.slide-caption .slider-btn {
  align-self: flex-end;
}

/* スライドアニメ */
.js-anim-title,
.js-anim-text,
.js-anim-btn {
  opacity: 0;
  transform: translateY(12px);
}
.swiper-slide.is-anim .js-anim-title {
  animation: capIn 0.65s ease forwards;
}
.swiper-slide.is-anim .js-anim-text {
  animation: capIn 0.65s ease forwards;
  animation-delay: 0.12s;
}
.swiper-slide.is-anim .js-anim-btn {
  animation: capIn 0.65s ease forwards;
  animation-delay: 0.24s;
}
@keyframes capIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Swiper ページネーション・ナビ */
.swiper-pagination-bullet {
  background-color: var(--green-primary);
  height: 10px;
  width: 10px;
  opacity: 0.6;
}
.swiper-pagination-bullet-active {
  opacity: 1;
}
.swiper-button-next,
.swiper-button-prev {
  --swiper-navigation-color: var(--green-primary);
}

/* SP */
@media (max-width: 767px) {
  .slide-inner { height: var(--swiper-h, 50vh); }
  .slide-caption {
    top: auto;
    bottom: 8%;
    left: 5%;
    right: 5%;
    transform: none;
    max-width: none;
    text-align: center;
  }
  .slide-caption::before { inset: -14px; border-radius: 14px; }
  .slide-text { display: none; }
  .sp-text-on .slide-text { display: block; }
  .sp-text-off .slide-text { display: none; }
}

/* =====================================================================================
   13. Info Section（商工会議所とは）
   ===================================================================================== */
.bg_logo {
  background: url("../images/zenkei_bg.jpg") no-repeat center center;
  background-size: 60% auto;
  min-height: 16vh;
  border-radius: 16px;
}

/* =====================================================================================
   14. Social Icons（SNS アイコン）
   ===================================================================================== */
.back03 .col-12 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.back03 .col-12 img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.back03 .col-12 img:hover {
  transform: scale(1.12);
  opacity: 0.85;
}

/* =====================================================================================
   15. News Tabs（インフォメーション）
   ===================================================================================== */

/* タブ共通 ---
 * ★ デザインを変えたいときはここだけ編集する ★
 * ホバー動作は btn-cat と共通の rainbow-btn スタイル。
 * 色は下の「タブ色の定義」セクションで --cat-color を変えるだけ。
 * ------------------------------------------------- */
.nav-tabs {
  flex-wrap: wrap;
  overflow-x: auto;
  border-bottom: none;
  gap: 0.5rem;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link {
  /* 通常状態：色塗りつぶし */
  background: var(--cat-color);
  border: 2px solid var(--cat-border, var(--cat-color));
  border-radius: 100px;
  margin-right: 0;
  font-weight: 600;
  color: var(--cat-text, #333);
  white-space: nowrap;
  font-size: 1.2rem;
  padding: 0.45rem 1rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.nav-tabs .nav-link:not(.active):hover,
.nav-tabs .nav-link:not(.active):focus {
  /* ホバー状態：白抜き（btn-cat / rainbow-btn 共通スタイル） */
  background: var(--surface-white);
  border-color: var(--cat-border, var(--cat-color));
  color: var(--cat-text, #333) !important;
  transform: translateY(-2px);
  filter: none;
}
.nav-tabs .nav-link.active {
  color: var(--text-primary) !important;
  border: 1.5px solid var(--divider);
  background-color: var(--surface-white) !important;
}

/* タブ色の定義 ---
 * ★ 色を変えたいときは --cat-color だけ変える ★
 * ★ 新カテゴリ追加は .tab-{name} { --cat-color: ...; } を1行追加するだけ ★
 * ------------------------------------------------- */
.tab-new     { --cat-color: #d1f0e0; --cat-border: #7dcfaa; --cat-text: #0a5c35; }
.tab-seminar { --cat-color: #fde9c0; --cat-border: #f5c97a; --cat-text: #92540a; }
.tab-exam    { --cat-color: #e8d9fc; --cat-border: #c4a8f7; --cat-text: #5b21b6; }
.tab-event   { --cat-color: #fce4f0; --cat-border: #f4a8d0; --cat-text: #9d1a5a; }
.tab-subsidy { --cat-color: #fdd5d5; --cat-border: #f5a5a5; --cat-text: #991b1b; }
.tab-other   { --cat-color: #e2e5e9; --cat-border: #b0b7c0; --cat-text: #374151; }

/* すべてタブ */
#newsTab .nav-link.tab-all {
  --cat-color: #d1f0e0;
  --cat-border: #7dcfaa;
  --cat-text: #0a5c35;
  color: #0a5c35;
}
#newsTab .nav-link.tab-all:not(.active):hover,
#newsTab .nav-link.tab-all:not(.active):focus {
  color: #0a5c35 !important;
}
#newsTab .nav-link.tab-all.active {
  color: var(--text-primary);
}

/* タブコンテンツ */
.tab-pane,
.info-content-wrap {
  padding: 0 1.25rem 1rem;
  border-radius: 16px;
  background: var(--surface-white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--divider);
  margin-top: 0.5rem;
}

/* ニュースアイテム */
.news-item {
  display: grid;
  grid-template-columns: 9.5em 7.5em 1fr;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  row-gap: 0.15rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--green-light);
}
.news-item:last-child { border-bottom: none; }
.news-item p { margin-top: -0.2rem; }

.news-meta { display: contents; }

.news-item .news-label {
  grid-column: 1;
  grid-row: 1 / span 2;
  white-space: nowrap;
  margin-top: 12px;
}
.news-item .news-date {
  grid-column: 2;
  grid-row: 1 / span 2;
  white-space: nowrap;
  align-self: center;
}
.news-item h5,
.news-item .news-title {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  font-size: var(--fs-h5); /* 見出し階層上h3だが見た目は元のh5サイズを維持 */
  line-height: 1.4;
}

/* Rainbowカードタイトル：見出し階層上h3だが見た目は元のh4サイズを維持 */
.card-title {
  font-size: var(--fs-h4);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4em;
}

/* NEW バッジ（投稿から14日間表示） */
.new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1em 0.75em;
  border-radius: 999px;
  background-color: #e02020;
  color: #fff;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
  white-space: nowrap;
  flex-shrink: 0;
}
.news-item .news-excerpt {
  grid-column: 3;
  grid-row: 2;
  margin: 0;
}

.news-date { font-size: 0.875rem; color: var(--text-secondary); }

.news-excerpt {
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-item a { font-weight: 700; }

/* カテゴリラベル */
.news-label {
  font-size: 1rem;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  white-space: nowrap;
  text-align: center;
}

.label-new      { background-color: #d1f0e0; color: #0a5c35; }
.label-seminar  { background-color: #fde9c0; color: #92540a; }
.label-exam     { background-color: #e8d9fc; color: #5b21b6; }
.label-event    { background-color: #fce4f0; color: #9d1a5a; }
.label-subsidy  { background-color: #fdd5d5; color: #991b1b; }
.label-other    { background-color: #e2e5e9; color: #374151; }
.label-page     { background-color: #dbeafe; color: #1e40af; }
.label-rainbow  { background-color: #b7d8b9; color: #003629; }

/* --- カテゴリ色の定義 ---
 * ★ 色を変えたいときはここの --cat-color だけ変える ★
 * ★ 新カテゴリ追加は .btn-{name} { --cat-color: ...; } を1行追加するだけ ★
 * ------------------------------------------------- */
.btn-new     { --cat-color: #d1f0e0; --cat-border: #7dcfaa; --cat-text: #0a5c35; }
.btn-seminar { --cat-color: #fde9c0; --cat-border: #f5c97a; --cat-text: #92540a; }
.btn-exam    { --cat-color: #e8d9fc; --cat-border: #c4a8f7; --cat-text: #5b21b6; }
.btn-event   { --cat-color: #fce4f0; --cat-border: #f4a8d0; --cat-text: #9d1a5a; }
.btn-subsidy { --cat-color: #fdd5d5; --cat-border: #f5a5a5; --cat-text: #991b1b; }
.btn-other   { --cat-color: #e2e5e9; --cat-border: #b0b7c0; --cat-text: #374151; }

/* SP */
@media (max-width: 767.98px) {
  .news-item {
    display: block;
  }
  .news-meta {
    display: block;
  }
  .news-excerpt { display: none; }
  .news-date {
    display: block;
    margin-bottom: 0.2rem;
  }
  .news-label {
    display: block;
    margin-bottom: 0.15rem;
  }
  .news-item a {
    display: block;
    font-weight: 700;
  }
  #newsTab { margin-bottom: 0.75rem; }
  .nav-tabs .nav-link {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
  }
}

@media (max-width: 576px) {
  h2 { font-size: 1.25rem; }
  .news-item { font-size: 0.875rem; }
  .nav-tabs .nav-link {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
  }
}

/* =====================================================================================
   16. 所報 Rainbow Cards
   ===================================================================================== */
.rainbow-thumb {
  aspect-ratio: 3 / 4;
  background: var(--surface-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  border-bottom: 1px solid var(--divider);
}
.rainbow-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* =====================================================================================
   17. Banner Links（バナーリンクグリッド）
   ===================================================================================== */
.banner-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.banner {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.banner:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.banner img {
  width: 100%;
  height: 80px;
  object-fit: contain;
  object-position: center;
  background-color: #fff;
  display: block;
  transition: transform 0.3s ease;
}
.banner:hover img {
  transform: scale(1.04);
}

@media (max-width: 1024px) {
  .banner-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .banner-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================================
   18. Pagination（ページネーション）
   ===================================================================================== */
.page-item.active .page-link {
  background-color: var(--green-primary);
  border-color: var(--green-primary);
  color: #fff;
  border-radius: 100px;
}
.page-link,
.page-item:first-child .page-link,
.page-item:last-child .page-link {
  border-radius: 100px;
  margin: 0 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.page-link:hover {
  color: var(--green-primary);
  border-color: var(--green-primary);
}
.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.25);
}

/* =====================================================================================
   19. Single Post Navigation（記事前後固定ナビ）
   ===================================================================================== */
.single-nav-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(255,255,255,0.95);
  border-top: 2px solid var(--green-primary);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.single { padding-bottom: 0; }

/* .text-muted はスコープをナビ固定バー内に限定 */
.single-nav-fixed a,
.single-nav-fixed .text-muted {
  display: inline-block;
  padding: 0;
  margin-top: 10px;
}
.single-nav-fixed .text-muted {
  color: #bfbdbc;
}

/* =====================================================================================
   20-21. Contact Form 7 → セクション末尾「Contact Form 7 スタイル」に統合
   ===================================================================================== */

/* =====================================================================================
   22. Definition List（dl / dt / dd）
   ===================================================================================== */
dl { padding: 20px 0; }
dt { padding-bottom: 5px; font-weight: 400; }

@media screen and (min-width: 768px) {
  dt { clear: left; float: left; width: 25%; }
  dd { margin-left: 25%; }
}

/* =====================================================================================
   23. Image Alignment（投稿内）
   ===================================================================================== */
img.alignright  { display: block; margin: 0 0 0 auto; }
img.alignleft   { display: block; margin: 0 auto 0 0; }
img.aligncenter { display: block; margin: 0 auto; }

/* =====================================================================================
   24. Fade-up Animation（スクロールアニメーション）
   ===================================================================================== */
.js-fadeup {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s ease, transform 0.75s ease;
  will-change: opacity, transform;
}
.js-fadeup.is-in {
  opacity: 1;
  transform: translateY(0);
}
.js-fadeup[data-delay] {
  transition-delay: var(--delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js-fadeup {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================================
   25. Header Search（ヘッダー検索フォーム）
   ===================================================================================== */
.header-search-input {
  width: 260px;
  max-width: 100%;
  border: 1.5px solid var(--border-input);
  border-radius: 100px;
  padding: 6px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.header-search-input:focus {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
  outline: none;
}
.header-search .btn {
  background: var(--green-primary);
  border: 2px solid var(--green-primary);
  color: #fff;
  border-radius: 100px;
  padding: 6px 20px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.header-search .btn:hover,
.header-search .btn:focus {
  background: var(--surface-white);
  border-color: var(--green-primary);
  color: var(--green-primary);
  box-shadow: var(--shadow-md);
}
@media (max-width: 991.98px) {
  .header-search-input { width: 100%; }
}

/* =====================================================================================
   26. Contact Page Cards → セクション末尾「contact-card」に統合
   ===================================================================================== */

/* =====================================================================================
   27. Anchor Offset（アンカーオフセット：ヘッダー分ずらす）
   ===================================================================================== */
:target {
  scroll-margin-top: var(--header-h);
}

@media (max-width: 767.98px) {
  :root { --header-h: 340px; }
}

/* =====================================================================================
   28. Footer（フッター）
   ===================================================================================== */
footer#site-footer {
  background-color: var(--green-primary);
  border-top: 4px solid var(--green-medium);
}
footer#site-footer p,
footer#site-footer h3 {
  color: rgba(255,255,255,0.9);
}
footer#site-footer h3 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
footer#site-footer a:link,
footer#site-footer a:visited {
  color: rgba(255,255,255,0.75);
}
footer#site-footer a:hover {
  color: var(--green-light);
  text-decoration: none;
}

/* =====================================================================================
   29. Category Page（カテゴリ一覧ページ）
   ===================================================================================== */
.cat-article {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  overflow: hidden;
  margin-bottom: 2.5rem;
  padding: 2rem 2.5rem 2.5rem;
}
.cat-description {
  color: var(--text-secondary);
  font-size: 0.95rem;
  border-left: 6px double var(--green-primary);
  box-shadow: inset 3px 0 0 var(--green-light);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}
.cat-list {
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid var(--divider);
  margin-bottom: 0;
}
.cat-list .news-item {
  display: grid;
  grid-template-columns: 7.5em 9.5em 1fr;
  align-items: start;
  padding: 1rem 1.25rem;
  border-bottom: 1px dashed var(--green-light);
  column-gap: 1rem;
}
.cat-list .news-item:last-child { border-bottom: none; }
.cat-list .news-title {
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s;
  display: block;
  line-height: 1.5;
}
.cat-list .news-title:hover { color: var(--green-primary); }
.cat-list .news-excerpt {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
  .cat-article { padding: 1.25rem 1rem 1.5rem; }
  .cat-list .news-item {
    display: block;
    padding: 0.85rem 1rem;
  }
  .cat-list .news-date {
    display: block;
    margin-bottom: 0.2rem;
  }
  .cat-list .news-label {
    display: inline-block;
    margin-bottom: 0.3rem;
  }
  .cat-list .news-excerpt { display: none; }
}

/* =====================================================================================
   30. Single Post Page（記事詳細ページ）
   ===================================================================================== */

.single-hero {
  background: #f7f9f7;
  border-bottom: 1px solid #e4ebe6;
  padding: 0 0 1.75rem;
}
.single-hero__accent {
  height: 3px;
  background: var(--green-primary);
}
.single-hero__inner { padding-top: 1.5rem; }
.single-hero__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.single-hero__date {
  color: #888;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.single-hero__title {
  color: var(--text-primary);
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}
.single-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: #aaa;
}
.single-breadcrumb a {
  color: var(--green-primary);
  text-decoration: none;
  transition: opacity 0.2s;
}
.single-breadcrumb a:hover { opacity: 0.75; }
.single-breadcrumb__sep { margin: 0 0.1rem; }
.single-breadcrumb__current {
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
.single-body-wrap {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}
.single-article {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.single-article__content {
  padding: 2.5rem 2.5rem 2rem;
  line-height: 1.9;
  color: var(--text-primary);
  font-size: 1rem;
  border-left: 4px solid var(--green-primary);
}
.single-article__content p { margin-bottom: 1.4em; }
.single-article__content h2 {
  position: relative;
  font-size: 1.2rem;
  font-weight: 700;
  border-left: 3px solid var(--green-primary);
  padding-left: 0.9rem;
  margin: 2rem 0 1rem;
}
.single-article__content h2::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--green-primary);
}
.single-article__content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 1.5rem 0 0.75rem;
}
.single-article__content a {
  color: var(--green-primary);
  text-decoration: underline;
}
/* 固定ページ内セクション見出し */
.page-section__heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green-dark);
  padding: 0.6rem 1rem;
  border-left: 3px solid var(--green-primary);
  background: var(--green-pale);
  border-radius: 0 8px 8px 0;
  margin-bottom: 1.5rem;
}
.page-section__heading::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--green-primary);
}
.page-section__icon {
  color: var(--green-primary);
  font-size: 1rem;
}

.single-article__back {
  padding: 1.5rem 2.5rem 2.5rem;
  border-top: 1px solid var(--divider);
}
.single-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--green-primary);
  color: #fff !important;
  border: none;
  border-radius: 50px;
  padding: 0.65rem 2rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 3px 12px rgba(22,163,74,0.35);
  text-decoration: none !important;
}
.single-back-btn:hover {
  background: var(--green-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(22,163,74,0.4);
  color: #fff !important;
}
.single-back-btn__arrow { transition: transform 0.2s; }
.single-back-btn:hover .single-back-btn__arrow { transform: translateX(-3px); }
.single-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.single-pager__item { display: flex; }
.single-pager__item--next { justify-content: flex-end; }
.single-pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  max-width: 100%;
  box-shadow: var(--shadow-sm);
}
.single-pager__link:hover {
  border-color: var(--green-primary);
  box-shadow: 0 4px 16px rgba(22,163,74,0.15);
  transform: translateY(-2px);
  text-decoration: none;
}
.single-pager__link--empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--divider);
  border-radius: 10px;
  background: var(--surface-gray);
}
.single-pager__dir {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--green-primary);
  letter-spacing: 0.05em;
}
.single-pager__ttl {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.5;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 640px) {
  .single-pager { grid-template-columns: 1fr; }
  .single-pager__item--next { justify-content: flex-start; }
  .single-article__content { padding: 1.5rem 1.25rem 1.25rem; }
  .single-article__back { padding: 1rem 1.25rem 1.5rem; }
  .single-hero__title { font-size: var(--fs-fluid-xl); }
}

/* =====================================================================================
   31. Mega Dropdown（目的から探す メガドロップダウン）
   ===================================================================================== */

.nav-mokuteki .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.3em;
  vertical-align: middle;
  border: none;
  content: '▾';
  font-size: 0.7em;
  transition: transform 0.2s;
}
.nav-mokuteki .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.mokuteki-dropdown {
  padding: 1rem;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  border-top: 3px solid var(--green-primary);
  z-index: 9999 !important;
}

/* デスクトップ：ホバーでも表示・右端に収まるよう right:0 固定 */
@media (min-width: 992px) {
  .mokuteki-dropdown {
    min-width: 380px;
    right: 0 !important;
    left: auto !important;
  }
  .nav-mokuteki:hover > .mokuteki-dropdown {
    display: block !important;
    animation: dropdown-in 0.18s ease;
  }
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mokuteki-dropdown__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.mokuteki-dropdown__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.9rem 0.5rem 0.75rem;
  border-radius: 10px;
  background: transparent;
  border: 2px solid transparent;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  text-align: center;
  line-height: 1.3;
}

/* 各アイテムの枚線色 */
.mok-item-1 { border-color: #0a7c48; }
.mok-item-2 { border-color: #b45309; }
.mok-item-3 { border-color: #be185d; }
.mok-item-4 { border-color: #1d4ed8; }
.mok-item-5 { border-color: #c2410c; }
.mok-item-6 { border-color: #6d28d9; }

/* ホバー時：各色で塗りつぶし */
.mok-item-1:hover { background-color: #d1f0e0; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); text-decoration: none; }
.mok-item-2:hover { background-color: #fde9c0; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); text-decoration: none; }
.mok-item-3:hover { background-color: #fce4f0; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); text-decoration: none; }
.mok-item-4:hover { background-color: #dbeafe; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); text-decoration: none; }
.mok-item-5:hover { background-color: #fde8d8; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); text-decoration: none; }
.mok-item-6:hover { background-color: #e8d9fc; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); text-decoration: none; }

.mokuteki-dropdown__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.mokuteki-dropdown__icon {
  font-size: 1.5rem;
  line-height: 1;
}

/* 各アイコンの色 */
.mok-item-1 .mokuteki-dropdown__icon { color: #6ec49a; }
.mok-item-2 .mokuteki-dropdown__icon { color: #f0a84a; }
.mok-item-3 .mokuteki-dropdown__icon { color: #f07ab0; }
.mok-item-4 .mokuteki-dropdown__icon { color: #6fa3ef; }
.mok-item-5 .mokuteki-dropdown__icon { color: #f0845a; }
.mok-item-6 .mokuteki-dropdown__icon { color: #a87ee8; }

/* モバイル：ドロップダウンをインライン展開 */
@media (max-width: 991px) {
  .mokuteki-dropdown {
    min-width: 0;
    width: 100%;
    position: static !important;
    box-shadow: none;
    border-radius: 8px;
    border-top: none;
    border-left: 3px solid var(--green-primary);
    animation: none;
    float: none;
    transform: none !important;
  }
  .mokuteki-dropdown__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* スマホ：js で .sp-open が付いたとき表示 */
  .mokuteki-dropdown.sp-open {
    display: block !important;
  }
}

/* =====================================================================================
   32. Page Hero（固定ページ ヒーロー）
   ===================================================================================== */
.page-hero {
  background: var(--surface-warm);
  border-bottom: 3px solid var(--green-primary);
  position: relative;
  overflow: hidden;
  padding: 2.5rem 0 2rem;
}
.page-hero::before {
  content: '';
  position: absolute;
  right: -100px;
  top: -100px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22,163,74,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero::after {
  content: none;
}
.page-hero__inner {
  padding-left: 1.6rem;
  border-left: none;
  position: relative;
}
.page-hero__inner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--green-medium) 0%, var(--green-primary) 50%, var(--green-dark) 100%);
  border-radius: 3px;
}
.page-hero__inner::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 10%;
  bottom: 10%;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--green-light) 30%, var(--green-light) 70%, transparent 100%);
  border-radius: 2px;
}
.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--green-primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.page-hero__eyebrow::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--green-primary);
  border-radius: 2px;
}
.page-hero__title {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.3;
  margin-bottom: 0.85rem;
  letter-spacing: -0.02em;
}
.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.page-hero__breadcrumb a {
  color: var(--green-primary);
  text-decoration: none;
  transition: color 0.15s;
}
.page-hero__breadcrumb a:hover { color: var(--green-dark); }
.page-hero__sep { opacity: 0.6; }
.page-hero__breadcrumb__sep { opacity: 0.6; }

.page-body-wrap {
  margin: 2.5rem 0;
  padding: 0;
}
.page-article {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 20px rgba(0,54,41,0.07);
  border: 1px solid var(--divider);
  overflow: hidden;
  animation: fadeup 0.5s ease both;
}
.page-article__content {
  padding: 2.5rem 3rem;
  color: var(--text-primary);
  line-height: 1.85;
}
.page-article__content p { margin-bottom: 1.3em; }
.page-article__content h2 {
  position: relative;
  font-size: clamp(1.75rem, 5vw, 1.95rem);
  font-weight: 700;
  color: var(--green-dark);
  border-left: 5px solid var(--green-primary);
  padding-left: 0.9rem;
  margin: 2rem 0 0.9rem;
}
.page-article__content h2::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--green-primary);
}
.page-article__content h3 {
  font-size: clamp(1.5rem, 4.5vw, 1.75rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 1.5rem 0 0.6rem;
}
.page-back-wrap {
  background: var(--surface-warm);
  border-top: 1px solid var(--divider);
}
.page-article__back {
  padding: 1.5rem 3rem 2rem;
  border-top: 1px solid var(--divider);
  text-align: center;
}

/* contact ページ固有 */
.page-contact-wrap {
  padding: 2rem 3rem 2.5rem;
}
.page-contact-wrap .page-section { margin-bottom: 2.5rem; }

/* Page Hero / Page Article スマホ調整 → セクション50-B / 50-C に統合済み */

/* =====================================================================================
   33. Text Boxes（文字枠スタイル）
   ─────────────────────────────────────────────────────────────────────────────────────
   ★ CSS Custom Properties で色を自由に上書きできます ★

   【ボーダー系】  --tb-border: 枠線色  --tb-bg: 背景色  --tb-color: 文字色
   【塗りつぶし系】--tb-bg: 背景色(単色)  --tb-color: 文字色
   【グラデーション系】--tb-grad: グラデーション文字列をまるごと上書き
   【Spotlight系】 --tb-spot-c: 中心色  --tb-spot-m: 中間色  --tb-spot-e: 両端色

   使用例:
     <div class="text-box-border" style="--tb-border:#e11d48; --tb-bg:#fff1f2;">...</div>
     <div class="text-box-filled" style="--tb-bg:#7c3aed;">...</div>
     <div class="text-box-grad" style="--tb-grad:linear-gradient(to right,#f97316,#db2777);">...</div>
   ===================================================================================== */

/* =====================================================================
   ボーダー系 共通エンジン
   ===================================================================== */

/* 全ボーダー */
.text-box-border {
  --tb-border: var(--green-primary);
  --tb-bg:     var(--green-pale);
  --tb-color:  var(--text-primary);
  border: 2px solid var(--tb-border);
  background:  var(--tb-bg);
  color:       var(--tb-color);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* 左ボーダー */
.text-box-border-left {
  --tb-border: var(--green-primary);
  --tb-bg:     var(--green-pale);
  --tb-color:  var(--text-primary);
  border-left: 5px solid var(--tb-border);
  background:  var(--tb-bg);
  color:       var(--tb-color);
  padding: 0.85rem 1.2rem;
  border-radius: 0 8px 8px 0;
  margin: 1rem 0;
  line-height: 1.8;
}

/* 二重ボーダー */
.text-box-border-double {
  --tb-border: var(--green-primary);
  --tb-bg:     var(--surface-white);
  --tb-color:  var(--text-primary);
  border: 3px double var(--tb-border);
  background:  var(--tb-bg);
  color:       var(--tb-color);
  padding: 1rem 1.25rem;
  border-radius: 6px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* 破線ボーダー */
.text-box-border-dashed {
  --tb-border: var(--green-primary);
  --tb-bg:     var(--surface-white);
  --tb-color:  var(--text-primary);
  border: 2px dashed var(--tb-border);
  background:  var(--tb-bg);
  color:       var(--tb-color);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* ボーダー系 inline */
.text-box-border-inline {
  --tb-border: var(--green-primary);
  --tb-bg:     var(--green-pale);
  --tb-color:  var(--text-primary);
  display: inline-block;
  border: 2px solid var(--tb-border);
  background:  var(--tb-bg);
  color:       var(--tb-color);
  padding: 0.25em 1em;
  border-radius: 6px;
  line-height: 1.8;
}
.text-box-border-left-inline {
  --tb-border: var(--green-primary);
  --tb-bg:     var(--green-pale);
  --tb-color:  var(--text-primary);
  display: inline-block;
  border-left: 5px solid var(--tb-border);
  background:  var(--tb-bg);
  color:       var(--tb-color);
  padding: 0.25em 1em 0.25em 0.85em;
  border-radius: 0 6px 6px 0;
  line-height: 1.8;
}

/* ボーダー系プリセット色 */
.text-box-border--green  { --tb-border: var(--green-primary); --tb-bg: var(--green-pale);        --tb-color: var(--text-primary); }
.text-box-border--amber  { --tb-border: var(--color-amber);   --tb-bg: #fff8ed;                  --tb-color: var(--text-primary); }
.text-box-border--blue   { --tb-border: #2563eb;              --tb-bg: #eff6ff;                  --tb-color: var(--text-primary); }
.text-box-border--red    { --tb-border: var(--color-red);     --tb-bg: #fff5f5;                  --tb-color: var(--text-primary); }
.text-box-border--purple { --tb-border: var(--color-purple);  --tb-bg: #f5f0ff;                  --tb-color: var(--text-primary); }
.text-box-border--gray   { --tb-border: var(--color-gray);    --tb-bg: var(--surface-gray);      --tb-color: var(--text-primary); }
.text-box-border--dark   { --tb-border: var(--green-dark);    --tb-bg: var(--surface-warm);      --tb-color: var(--text-primary); }

/* =====================================================================
   塗りつぶし系 共通エンジン
   ===================================================================== */

.text-box-filled {
  --tb-bg:    var(--green-primary);
  --tb-color: #fff;
  background: var(--tb-bg);
  color:      var(--tb-color);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  line-height: 1.8;
}
.text-box-filled strong { color: var(--tb-color); }
.text-box-filled a      { color: rgba(255,255,255,0.85); text-decoration: underline; }

.text-box-filled-inline {
  --tb-bg:    var(--green-primary);
  --tb-color: #fff;
  display: inline-block;
  background: var(--tb-bg);
  color:      var(--tb-color);
  padding: 0.25em 1em;
  border-radius: 6px;
  line-height: 1.8;
}

/* 塗りつぶし系プリセット色 */
.text-box-filled--green  { --tb-bg: var(--green-primary); }
.text-box-filled--dark   { --tb-bg: var(--green-dark);    }
.text-box-filled--amber  { --tb-bg: var(--color-amber);   }
.text-box-filled--blue   { --tb-bg: #2563eb;              }
.text-box-filled--red    { --tb-bg: var(--color-red);     }
.text-box-filled--purple { --tb-bg: var(--color-purple);  }
.text-box-filled--gray   { --tb-bg: var(--color-gray);    }

/* =====================================================================
   グラデーション系 共通エンジン
   ===================================================================== */

.text-box-grad {
  --tb-grad:  linear-gradient(to right, var(--green-medium), var(--green-primary));
  --tb-color: #fff;
  background: var(--tb-grad);
  color:      var(--tb-color);
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1rem 0;
  line-height: 1.8;
}
.text-box-grad strong { color: #fff; }
.text-box-grad a      { color: rgba(255,255,255,0.85); text-decoration: underline; }

.text-box-grad-inline {
  --tb-grad:  linear-gradient(to right, var(--green-medium), var(--green-primary));
  --tb-color: #fff;
  display: inline-block;
  background: var(--tb-grad);
  color:      var(--tb-color);
  padding: 0.25em 1em;
  border-radius: 6px;
  line-height: 1.8;
}

/* グラデーションプリセット */
.text-box-grad--green      { --tb-grad: linear-gradient(to right,  #3cb371, #097040); }
.text-box-grad--green-dark { --tb-grad: linear-gradient(to right,  #097040, #003629); }
.text-box-grad--amber      { --tb-grad: linear-gradient(to right,  #fbbf24, #d97706); }
.text-box-grad--ocean      { --tb-grad: linear-gradient(to right,  #06b6d4, #2563eb); }
.text-box-grad--sunset     { --tb-grad: linear-gradient(to right,  #f97316, #db2777); }
.text-box-grad--sakura     { --tb-grad: linear-gradient(to right,  #f9a8d4, #7c3aed); }
.text-box-grad--aurora     { --tb-grad: linear-gradient(to right,  #097040, #06b6d4); }
.text-box-grad--fire       { --tb-grad: linear-gradient(to right,  #fbbf24, #dc2626); }
.text-box-grad--night      { --tb-grad: linear-gradient(to right,  #1e3a5f, #7c3aed); }
.text-box-grad--mint       { --tb-grad: linear-gradient(to right,  #6ee7b7, #15803d); }
.text-box-grad--green-diag      { --tb-grad: linear-gradient(135deg, #3cb371, #097040); }
.text-box-grad--green-dark-diag { --tb-grad: linear-gradient(135deg, #097040, #003629); }
.text-box-grad--amber-diag      { --tb-grad: linear-gradient(135deg, #fbbf24, #d97706); }
.text-box-grad--ocean-diag      { --tb-grad: linear-gradient(135deg, #06b6d4, #2563eb); }
.text-box-grad--sunset-diag     { --tb-grad: linear-gradient(135deg, #f97316, #db2777); }
.text-box-grad--sakura-diag     { --tb-grad: linear-gradient(135deg, #f9a8d4, #7c3aed); }
.text-box-grad--aurora-diag     { --tb-grad: linear-gradient(135deg, #097040, #06b6d4); }
.text-box-grad--fire-diag       { --tb-grad: linear-gradient(135deg, #fbbf24, #dc2626); }
.text-box-grad--night-diag      { --tb-grad: linear-gradient(135deg, #1e3a5f, #7c3aed); }
.text-box-grad--mint-diag       { --tb-grad: linear-gradient(135deg, #6ee7b7, #15803d); }

/* =====================================================================
   Spotlight系 共通エンジン
   ===================================================================== */

.text-box-spot {
  --tb-spot-c: #3cb371;
  --tb-spot-m: #097040;
  --tb-spot-e: #003629;
  --tb-color:  #fff;
  background: radial-gradient(ellipse at center,
    var(--tb-spot-c) 0%, var(--tb-spot-c) 40%,
    var(--tb-spot-m) 70%, var(--tb-spot-e) 100%);
  color:      var(--tb-color);
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1rem 0;
  line-height: 1.8;
}
.text-box-spot strong { color: #fff; }
.text-box-spot a      { color: rgba(255,255,255,0.85); text-decoration: underline; }

.text-box-spot-inline {
  --tb-spot-c: #3cb371;
  --tb-spot-m: #097040;
  --tb-spot-e: #003629;
  --tb-color:  #fff;
  display: inline-block;
  background: radial-gradient(ellipse at center,
    var(--tb-spot-c) 0%, var(--tb-spot-c) 40%,
    var(--tb-spot-m) 70%, var(--tb-spot-e) 100%);
  color:      var(--tb-color);
  padding: 0.25em 1.5em;
  border-radius: 6px;
  line-height: 1.8;
}

/* Spotlight プリセット */
.text-box-spot--green  { --tb-spot-c:#3cb371;  --tb-spot-m:#097040;  --tb-spot-e:#003629; }
.text-box-spot--amber  { --tb-spot-c:#fcd34d;  --tb-spot-m:#d97706;  --tb-spot-e:#92400e; }
.text-box-spot--ocean  { --tb-spot-c:#38bdf8;  --tb-spot-m:#2563eb;  --tb-spot-e:#1e1b4b; }
.text-box-spot--sunset { --tb-spot-c:#fb923c;  --tb-spot-m:#db2777;  --tb-spot-e:#7c1d4b; }
.text-box-spot--night  { --tb-spot-c:#818cf8;  --tb-spot-m:#4f46e5;  --tb-spot-e:#0f172a; }
.text-box-spot--fire   { --tb-spot-c:#fde047;  --tb-spot-m:#ef4444;  --tb-spot-e:#7f1d1d; }
.text-box-spot--mint   { --tb-spot-c:#6ee7b7;  --tb-spot-m:#059669;  --tb-spot-e:#064e3b; }
.text-box-spot--dark   { --tb-spot-c:#4b5563;  --tb-spot-m:#1f2937;  --tb-spot-e:#000;    }

/* =====================================================================
   ラベル付きボックス 共通エンジン
   ===================================================================== */

.text-box-label {
  --box-color: var(--green-primary);
  --box-bg:    var(--green-pale);
  position: relative;
  border: 2px solid var(--box-color);
  border-radius: 10px;
  padding: 1.6rem 1.25rem 1.1rem;
  margin: 2rem 0 1rem;
  background: var(--box-bg);
  line-height: 1.8;
}
.text-box-label__title {
  position: absolute;
  top: -0.85em;
  left: 1rem;
  background: var(--box-color);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.15em 0.9em;
  border-radius: 100px;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .text-box-label__title {
    white-space: normal;
    border-radius: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    line-height: 1.4;
    top: auto;
    position: relative;
    left: auto;
    right: auto;
    display: block;
    margin: -1.6rem -1.25rem 0.75rem;
    border-radius: 8px 8px 0 0;
  }
  .text-box-label {
    padding-top: 1rem;
  }
}

/* ラベルプリセット色 */
.text-box-label--green  { --box-color: var(--green-primary); --box-bg: var(--green-pale); }
.text-box-label--amber  { --box-color: var(--color-amber);   --box-bg: #fff8ed; }
.text-box-label--blue   { --box-color: #2563eb;              --box-bg: #eff6ff; }
.text-box-label--red    { --box-color: var(--color-red);     --box-bg: #fff5f5; }
.text-box-label--purple { --box-color: var(--color-purple);  --box-bg: #f5f0ff; }
.text-box-label--gray   { --box-color: var(--color-gray);    --box-bg: var(--surface-gray); }

/* --- 旧クラス名エイリアス（後方互換）--- */
.text-box-left-green  { border-left: 10px solid var(--green-primary); background: var(--green-pale);   color: var(--text-primary); padding: 0.85rem 1.2rem; border-radius: 0 8px 8px 0; margin: 1rem 0; line-height: 1.8; }
.text-box-left-amber  { border-left: 10px solid var(--color-amber);   background: #fff8ed;             color: var(--text-primary); padding: 0.85rem 1.2rem; border-radius: 0 8px 8px 0; margin: 1rem 0; line-height: 1.8; }
.text-box-left-blue   { border-left: 10px solid #2563eb;              background: #eff6ff;             color: var(--text-primary); padding: 0.85rem 1.2rem; border-radius: 0 8px 8px 0; margin: 1rem 0; line-height: 1.8; }
.text-box-left-red    { border-left: 10px solid var(--color-red);     background: #fff5f5;             color: var(--text-primary); padding: 0.85rem 1.2rem; border-radius: 0 8px 8px 0; margin: 1rem 0; line-height: 1.8; }
.text-box-left-purple { border-left: 10px solid var(--color-purple);  background: #f5f0ff;             color: var(--text-primary); padding: 0.85rem 1.2rem; border-radius: 0 8px 8px 0; margin: 1rem 0; line-height: 1.8; }
.text-box-left-gray   { border-left: 10px solid var(--color-gray);    background: var(--surface-gray); color: var(--text-primary); padding: 0.85rem 1.2rem; border-radius: 0 8px 8px 0; margin: 1rem 0; line-height: 1.8; }
.text-box-left-dark   { border-left: 10px solid var(--green-dark);    background: var(--surface-warm); color: var(--text-primary); padding: 0.85rem 1.2rem; border-radius: 0 8px 8px 0; margin: 1rem 0; line-height: 1.8; }
.text-box-left-pink   { border-left: 10px solid var(--color-pink);    background: #fdf2f8;             color: var(--text-primary); padding: 0.85rem 1.2rem; border-radius: 0 8px 8px 0; margin: 1rem 0; line-height: 1.8; }
/* inline バリエーション */
.text-box-left-green-inline  { display: inline-block; border-left: 5px solid var(--green-primary); background: var(--green-pale);   color: var(--text-primary); padding: 0.25em 1em 0.25em 0.85em; border-radius: 0 6px 6px 0; line-height: 1.8; }
.text-box-left-amber-inline  { display: inline-block; border-left: 5px solid var(--color-amber);   background: #fff8ed;             color: var(--text-primary); padding: 0.25em 1em 0.25em 0.85em; border-radius: 0 6px 6px 0; line-height: 1.8; }
.text-box-left-blue-inline   { display: inline-block; border-left: 5px solid #2563eb;              background: #eff6ff;             color: var(--text-primary); padding: 0.25em 1em 0.25em 0.85em; border-radius: 0 6px 6px 0; line-height: 1.8; }
.text-box-left-red-inline    { display: inline-block; border-left: 5px solid var(--color-red);     background: #fff5f5;             color: var(--text-primary); padding: 0.25em 1em 0.25em 0.85em; border-radius: 0 6px 6px 0; line-height: 1.8; }
.text-box-left-purple-inline { display: inline-block; border-left: 5px solid var(--color-purple);  background: #f5f0ff;             color: var(--text-primary); padding: 0.25em 1em 0.25em 0.85em; border-radius: 0 6px 6px 0; line-height: 1.8; }
.text-box-left-gray-inline   { display: inline-block; border-left: 5px solid var(--color-gray);    background: var(--surface-gray); color: var(--text-primary); padding: 0.25em 1em 0.25em 0.85em; border-radius: 0 6px 6px 0; line-height: 1.8; }
.text-box-left-dark-inline   { display: inline-block; border-left: 5px solid var(--green-dark);    background: var(--surface-warm); color: var(--text-primary); padding: 0.25em 1em 0.25em 0.85em; border-radius: 0 6px 6px 0; line-height: 1.8; }
.text-box-left-pink-inline   { display: inline-block; border-left: 5px solid var(--color-pink);    background: #fdf2f8;             color: var(--text-primary); padding: 0.25em 1em 0.25em 0.85em; border-radius: 0 6px 6px 0; line-height: 1.8; }
.text-box-green {
  border: 2px solid var(--green-primary);
  background: var(--green-pale);
  color: var(--text-primary);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  line-height: 1.8;
}
.text-box-amber {
  border: 2px solid var(--color-amber);
  background: #fff8ed;
  color: var(--text-primary);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  line-height: 1.8;
}
.text-box-blue {
  border: 2px solid #2563eb;
  background: #eff6ff;
  color: var(--text-primary);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  line-height: 1.8;
}
.text-box-red {
  border: 2px solid var(--color-red);
  background: #fff5f5;
  color: var(--text-primary);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* --- 二重ボーダーボックス（double） --- */
.text-box-double {
  --tb-border: var(--green-primary);
  --tb-bg:     var(--surface-white);
  --tb-color:  var(--text-primary);
  border: 3px double var(--tb-border);
  padding: 1rem 1.25rem;
  border-radius: 6px;
  background: var(--tb-bg);
  color: var(--tb-color);
  margin: 1rem 0;
  line-height: 1.8;
}

/* --- 破線ボーダーボックス（dashed） --- */
.text-box-dashed {
  --tb-border: var(--green-primary);
  --tb-bg:     var(--surface-white);
  --tb-color:  var(--text-primary);
  border: 2px dashed var(--tb-border);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: var(--tb-bg);
  color: var(--tb-color);
  margin: 1rem 0;
  line-height: 1.8;
}

/* --- 塗りつぶし系 --- */

/* グリーン背景 白テキスト */
.text-box-filled-green {
  background: var(--green-primary);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  line-height: 1.8;
}
.text-box-filled-green a {
  color: var(--green-light);
  text-decoration: underline;
}

/* ダークグリーン背景 */
.text-box-filled-dark {
  background: var(--green-dark);
  color: rgba(255,255,255,0.92);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* アンバー背景 */
.text-box-filled-amber {
  background: var(--color-amber);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* --- ポイントボックス（アイコン付き） --- */
.text-box-point {
  position: relative;
  border: 2px solid var(--green-primary);
  border-radius: 10px;
  padding: 1rem 1.25rem 1rem 3.5rem;
  background: var(--green-pale);
  margin: 1.2rem 0;
  line-height: 1.8;
}
.text-box-point::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  background: var(--green-primary);
  color: #fff;
  border-radius: 15%;
  font-weight: 900;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  padding-top: 1px;
}

/* ノートアイコン */
.text-box-note {
  position: relative;
  border-left: 5px solid var(--color-amber);
  background: #fff8ed;
  padding: 0.85rem 1.2rem 0.85rem 3.2rem;
  border-radius: 0 8px 8px 0;
  margin: 1rem 0;
  line-height: 1.8;
}
.text-box-note::before {
  content: '※';
  position: absolute;
  left: 0.75rem;
  top: 0.9rem;
  font-size: 1rem;
  color: var(--color-amber);
  font-weight: 700;
}

/* --- シャドウカード型 --- */
.text-box-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
  border: 1px solid var(--divider);
  line-height: 1.8;
}

/* =====================================================================================
   塗りつぶしグラデーション型文字枠
   命名規則: .text-box-grad-{color}-{direction}
     color     : green / amber / blue / red / purple / teal / sunset / ocean / sakura
     direction : lr (左→右) | tb (上→下) | diag (斜め 45度)
   ===================================================================================== */

/* --- 旧系統共通基盤（-lr / -tb / -diag / -spot- / -label で終わるクラス専用） --- */
.text-box-grad-green-lr, .text-box-grad-green-tb, .text-box-grad-green-diag,
.text-box-grad-green-dark-lr, .text-box-grad-green-dark-tb, .text-box-grad-green-dark-diag,
.text-box-grad-amber-lr, .text-box-grad-amber-tb, .text-box-grad-amber-diag,
.text-box-grad-ocean-lr, .text-box-grad-ocean-tb, .text-box-grad-ocean-diag,
.text-box-grad-sunset-lr, .text-box-grad-sunset-tb, .text-box-grad-sunset-diag,
.text-box-grad-sakura-lr, .text-box-grad-sakura-tb, .text-box-grad-sakura-diag,
.text-box-grad-aurora-lr, .text-box-grad-aurora-tb, .text-box-grad-aurora-diag,
.text-box-grad-fire-lr, .text-box-grad-fire-tb, .text-box-grad-fire-diag,
.text-box-grad-night-lr, .text-box-grad-night-tb, .text-box-grad-night-diag,
.text-box-grad-mint-lr, .text-box-grad-mint-tb, .text-box-grad-mint-diag,
.text-box-grad-spot-green, .text-box-grad-spot-amber, .text-box-grad-spot-ocean,
.text-box-grad-spot-sunset, .text-box-grad-spot-night, .text-box-grad-spot-fire,
.text-box-grad-spot-mint, .text-box-grad-spot-dark,
.text-box-grad-label {
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1rem 0;
  line-height: 1.8;
  border: none;
}
.text-box-grad-green-lr strong, .text-box-grad-green-tb strong, .text-box-grad-green-diag strong,
.text-box-grad-green-dark-lr strong, .text-box-grad-green-dark-tb strong, .text-box-grad-green-dark-diag strong,
.text-box-grad-amber-lr strong, .text-box-grad-amber-tb strong, .text-box-grad-amber-diag strong,
.text-box-grad-ocean-lr strong, .text-box-grad-ocean-tb strong, .text-box-grad-ocean-diag strong,
.text-box-grad-sunset-lr strong, .text-box-grad-sunset-tb strong, .text-box-grad-sunset-diag strong,
.text-box-grad-sakura-lr strong, .text-box-grad-sakura-tb strong, .text-box-grad-sakura-diag strong,
.text-box-grad-aurora-lr strong, .text-box-grad-aurora-tb strong, .text-box-grad-aurora-diag strong,
.text-box-grad-fire-lr strong, .text-box-grad-fire-tb strong, .text-box-grad-fire-diag strong,
.text-box-grad-night-lr strong, .text-box-grad-night-tb strong, .text-box-grad-night-diag strong,
.text-box-grad-mint-lr strong, .text-box-grad-mint-tb strong, .text-box-grad-mint-diag strong,
.text-box-grad-spot-green strong, .text-box-grad-spot-amber strong, .text-box-grad-spot-ocean strong,
.text-box-grad-spot-sunset strong, .text-box-grad-spot-night strong, .text-box-grad-spot-fire strong,
.text-box-grad-spot-mint strong, .text-box-grad-spot-dark strong { color: #fff; }

/* ============================================================
   サイトカラー系グラデーション
   ============================================================ */

/* グリーン（ライト→プライマリ） */
.text-box-grad-green-lr   { background: linear-gradient(to right,  #3cb371, #097040); }
.text-box-grad-green-tb   { background: linear-gradient(to bottom, #3cb371, #097040); }
.text-box-grad-green-diag { background: linear-gradient(135deg,    #3cb371, #097040); }

/* グリーン（プライマリ→ダーク） */
.text-box-grad-green-dark-lr   { background: linear-gradient(to right,  #097040, #003629); }
.text-box-grad-green-dark-tb   { background: linear-gradient(to bottom, #097040, #003629); }
.text-box-grad-green-dark-diag { background: linear-gradient(135deg,    #097040, #003629); }

/* アンバー（ライト→ダーク） */
.text-box-grad-amber-lr   { background: linear-gradient(to right,  #fbbf24, #d97706); }
.text-box-grad-amber-tb   { background: linear-gradient(to bottom, #fbbf24, #d97706); }
.text-box-grad-amber-diag { background: linear-gradient(135deg,    #fbbf24, #d97706); }

/* ============================================================
   ビビッド系グラデーション
   ============================================================ */

/* ocean （シアン→ブルー） */
.text-box-grad-ocean-lr   { background: linear-gradient(to right,  #06b6d4, #2563eb); }
.text-box-grad-ocean-tb   { background: linear-gradient(to bottom, #06b6d4, #2563eb); }
.text-box-grad-ocean-diag { background: linear-gradient(135deg,    #06b6d4, #2563eb); }

/* sunset （オレンジ→ピンク） */
.text-box-grad-sunset-lr   { background: linear-gradient(to right,  #f97316, #db2777); }
.text-box-grad-sunset-tb   { background: linear-gradient(to bottom, #f97316, #db2777); }
.text-box-grad-sunset-diag { background: linear-gradient(135deg,    #f97316, #db2777); }

/* sakura （ピンク→パープル） */
.text-box-grad-sakura-lr   { background: linear-gradient(to right,  #f9a8d4, #7c3aed); }
.text-box-grad-sakura-tb   { background: linear-gradient(to bottom, #f9a8d4, #7c3aed); }
.text-box-grad-sakura-diag { background: linear-gradient(135deg,    #f9a8d4, #7c3aed); }

/* aurora （グリーン→シアン） */
.text-box-grad-aurora-lr   { background: linear-gradient(to right,  #097040, #06b6d4); }
.text-box-grad-aurora-tb   { background: linear-gradient(to bottom, #097040, #06b6d4); }
.text-box-grad-aurora-diag { background: linear-gradient(135deg,    #097040, #06b6d4); }

/* fire （イエロー→レッド） */
.text-box-grad-fire-lr   { background: linear-gradient(to right,  #fbbf24, #dc2626); }
.text-box-grad-fire-tb   { background: linear-gradient(to bottom, #fbbf24, #dc2626); }
.text-box-grad-fire-diag { background: linear-gradient(135deg,    #fbbf24, #dc2626); }

/* night （ネイビー→パープル） */
.text-box-grad-night-lr   { background: linear-gradient(to right,  #1e3a5f, #7c3aed); }
.text-box-grad-night-tb   { background: linear-gradient(to bottom, #1e3a5f, #7c3aed); }
.text-box-grad-night-diag { background: linear-gradient(135deg,    #1e3a5f, #7c3aed); }

/* mint （ミント→ライム） */
.text-box-grad-mint-lr   { background: linear-gradient(to right,  #6ee7b7, #15803d); }
.text-box-grad-mint-tb   { background: linear-gradient(to bottom, #6ee7b7, #15803d); }
.text-box-grad-mint-diag { background: linear-gradient(135deg,    #6ee7b7, #15803d); }

/* ============================================================
   ラベル付きグラデーションボックス
   .text-box-grad-label と併用して使う
   ============================================================ */
.text-box-grad-label {
  position: relative;
  padding-top: 2rem;
  border-radius: 10px;
  margin: 2rem 0 1rem;
  line-height: 1.8;
}
.text-box-grad-label .text-box-label__title {
  position: absolute;
  top: -0.85em;
  left: 1rem;
  background: rgba(0,0,0,0.3);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.15em 0.9em;
  border-radius: 100px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

/* ============================================================
   中央明るめ・両端暗め（radial / spotlight）グラデーション
   ============================================================ */

/* グリーン spotlight */
.text-box-grad-spot-green {
  background: radial-gradient(ellipse at center, #3cb371 0%, #3cb371 40%, #097040 70%, #003629 100%);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* アンバー spotlight */
.text-box-grad-spot-amber {
  background: radial-gradient(ellipse at center, #fcd34d 0%, #fcd34d 40%, #d97706 70%, #92400e 100%);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* ocean spotlight */
.text-box-grad-spot-ocean {
  background: radial-gradient(ellipse at center, #38bdf8 0%, #38bdf8 40%, #2563eb 70%, #1e1b4b 100%);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* sunset spotlight */
.text-box-grad-spot-sunset {
  background: radial-gradient(ellipse at center, #fb923c 0%, #fb923c 40%, #db2777 70%, #7c1d4b 100%);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* night spotlight */
.text-box-grad-spot-night {
  background: radial-gradient(ellipse at center, #818cf8 0%, #818cf8 40%, #4f46e5 70%, #0f172a 100%);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* fire spotlight */
.text-box-grad-spot-fire {
  background: radial-gradient(ellipse at center, #fde047 0%, #fde047 40%, #ef4444 70%, #7f1d1d 100%);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* mint spotlight */
.text-box-grad-spot-mint {
  background: radial-gradient(ellipse at center, #6ee7b7 0%, #6ee7b7 40%, #059669 70%, #064e3b 100%);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* モノクロ spotlight（白抜き文字） */
.text-box-grad-spot-dark {
  background: radial-gradient(ellipse at center, #4b5563 0%, #4b5563 40%, #1f2937 70%, #000 100%);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* spotlight 系共通 strong / a */
[class^="text-box-grad-spot-"] strong,
[class*=" text-box-grad-spot-"] strong { color: #fff; }
[class^="text-box-grad-spot-"] a,
[class*=" text-box-grad-spot-"] a { color: rgba(255,255,255,0.8); text-decoration: underline; }

/* --- ストライプ背景型 --- */
.text-box-stripe {
  background: repeating-linear-gradient(
    -45deg,
    var(--green-pale),
    var(--green-pale) 4px,
    var(--surface-white) 4px,
    var(--surface-white) 12px
  );
  border: 2px solid var(--green-primary);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  line-height: 1.8;
}

/* ─────────────────────────────────────────────────────────────────────────────────────
   33-B. Text Boxes / Inline（テキスト幅追従型 inline-block 文字枠）
   全幅型クラスに -inline を付けるだけで使える
   ───────────────────────────────────────────────────────────────────────────────────── */

/* 共通属性：幅をテキストに合わせ、ブロックを最左から並べる */
[class$="-inline"],
[class*="-inline "] {
  display: inline-block;
}

/* --- ボーダー系 inline --- */
.text-box-left-green-inline {
  display: inline-block;
  border-left: 5px solid var(--green-primary);
  background: var(--green-pale);
  color: var(--text-primary);
  padding: 0.25em 1em 0.25em 0.85em;
  border-radius: 0 6px 6px 0;
  line-height: 1.8;
}
.text-box-green-inline {
  display: inline-block;
  border: 2px solid var(--green-primary);
  background: var(--green-pale);
  color: var(--text-primary);
  padding: 0.25em 1em;
  border-radius: 6px;
  line-height: 1.8;
}
.text-box-amber-inline {
  display: inline-block;
  border: 2px solid var(--color-amber);
  background: #fff8ed;
  color: var(--text-primary);
  padding: 0.25em 1em;
  border-radius: 6px;
  line-height: 1.8;
}
.text-box-blue-inline {
  display: inline-block;
  border: 2px solid #2563eb;
  background: #eff6ff;
  color: var(--text-primary);
  padding: 0.25em 1em;
  border-radius: 6px;
  line-height: 1.8;
}
.text-box-red-inline {
  display: inline-block;
  border: 2px solid var(--color-red);
  background: #fff5f5;
  color: var(--text-primary);
  padding: 0.25em 1em;
  border-radius: 6px;
  line-height: 1.8;
}
.text-box-double-inline {
  display: inline-block;
  border: 3px double var(--green-primary);
  background: var(--surface-white);
  color: var(--text-primary);
  padding: 0.25em 1em;
  border-radius: 4px;
  line-height: 1.8;
}
.text-box-dashed-inline {
  display: inline-block;
  border: 2px dashed var(--green-primary);
  background: var(--surface-white);
  color: var(--text-primary);
  padding: 0.25em 1em;
  border-radius: 6px;
  line-height: 1.8;
}

/* --- 塗りつぶし inline --- */
.text-box-filled-green-inline {
  display: inline-block;
  background: var(--green-primary);
  color: #fff;
  padding: 0.25em 1em;
  border-radius: 6px;
  line-height: 1.8;
}
.text-box-filled-dark-inline {
  display: inline-block;
  background: var(--green-dark);
  color: rgba(255,255,255,0.92);
  padding: 0.25em 1em;
  border-radius: 6px;
  line-height: 1.8;
}
.text-box-filled-amber-inline {
  display: inline-block;
  background: var(--color-amber);
  color: #fff;
  padding: 0.25em 1em;
  border-radius: 6px;
  line-height: 1.8;
}

/* --- グラデーション inline（横） --- */
.text-box-grad-green-lr-inline       { display: inline-block; background: linear-gradient(to right, #3cb371, #097040);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-green-dark-lr-inline  { display: inline-block; background: linear-gradient(to right, #097040, #003629);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-amber-lr-inline       { display: inline-block; background: linear-gradient(to right, #fbbf24, #d97706);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-ocean-lr-inline       { display: inline-block; background: linear-gradient(to right, #06b6d4, #2563eb);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-sunset-lr-inline      { display: inline-block; background: linear-gradient(to right, #f97316, #db2777);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-sakura-lr-inline      { display: inline-block; background: linear-gradient(to right, #f9a8d4, #7c3aed);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-aurora-lr-inline      { display: inline-block; background: linear-gradient(to right, #097040, #06b6d4);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-fire-lr-inline        { display: inline-block; background: linear-gradient(to right, #fbbf24, #dc2626);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-night-lr-inline       { display: inline-block; background: linear-gradient(to right, #1e3a5f, #7c3aed);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-mint-lr-inline        { display: inline-block; background: linear-gradient(to right, #6ee7b7, #15803d);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }

/* --- グラデーション inline（斜め） --- */
.text-box-grad-green-diag-inline      { display: inline-block; background: linear-gradient(135deg, #3cb371, #097040);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-green-dark-diag-inline { display: inline-block; background: linear-gradient(135deg, #097040, #003629);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-amber-diag-inline      { display: inline-block; background: linear-gradient(135deg, #fbbf24, #d97706);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-ocean-diag-inline      { display: inline-block; background: linear-gradient(135deg, #06b6d4, #2563eb);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-sunset-diag-inline     { display: inline-block; background: linear-gradient(135deg, #f97316, #db2777);  color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-sakura-diag-inline     { display: inline-block; background: linear-gradient(135deg, #f9a8d4, #7c3aed); color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-aurora-diag-inline     { display: inline-block; background: linear-gradient(135deg, #097040, #06b6d4); color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-fire-diag-inline       { display: inline-block; background: linear-gradient(135deg, #fbbf24, #dc2626); color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-night-diag-inline      { display: inline-block; background: linear-gradient(135deg, #1e3a5f, #7c3aed); color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }
.text-box-grad-mint-diag-inline       { display: inline-block; background: linear-gradient(135deg, #6ee7b7, #15803d); color:#fff; padding:0.25em 1em; border-radius:6px; line-height:1.8; }

/* --- Spotlight inline --- */
.text-box-grad-spot-green-inline  { display: inline-block; background: radial-gradient(ellipse at center, #3cb371 0%, #3cb371 40%, #097040 70%, #003629 100%); color:#fff; padding:0.25em 1.5em; border-radius:6px; line-height:1.8; }
.text-box-grad-spot-amber-inline  { display: inline-block; background: radial-gradient(ellipse at center, #fcd34d 0%, #fcd34d 40%, #d97706 70%, #92400e 100%); color:#fff; padding:0.25em 1.5em; border-radius:6px; line-height:1.8; }
.text-box-grad-spot-ocean-inline  { display: inline-block; background: radial-gradient(ellipse at center, #38bdf8 0%, #38bdf8 40%, #2563eb 70%, #1e1b4b 100%); color:#fff; padding:0.25em 1.5em; border-radius:6px; line-height:1.8; }
.text-box-grad-spot-sunset-inline { display: inline-block; background: radial-gradient(ellipse at center, #fb923c 0%, #fb923c 40%, #db2777 70%, #7c1d4b 100%); color:#fff; padding:0.25em 1.5em; border-radius:6px; line-height:1.8; }
.text-box-grad-spot-night-inline  { display: inline-block; background: radial-gradient(ellipse at center, #818cf8 0%, #818cf8 40%, #4f46e5 70%, #0f172a 100%); color:#fff; padding:0.25em 1.5em; border-radius:6px; line-height:1.8; }
.text-box-grad-spot-fire-inline   { display: inline-block; background: radial-gradient(ellipse at center, #fde047 0%, #fde047 40%, #ef4444 70%, #7f1d1d 100%); color:#fff; padding:0.25em 1.5em; border-radius:6px; line-height:1.8; }
.text-box-grad-spot-mint-inline   { display: inline-block; background: radial-gradient(ellipse at center, #6ee7b7 0%, #6ee7b7 40%, #059669 70%, #064e3b 100%); color:#fff; padding:0.25em 1.5em; border-radius:6px; line-height:1.8; }
.text-box-grad-spot-dark-inline   { display: inline-block; background: radial-gradient(ellipse at center, #4b5563 0%, #4b5563 40%, #1f2937 70%, #000 100%); color:#fff; padding:0.25em 1.5em; border-radius:6px; line-height:1.8; }

/* =====================================================================================
   34. Alignment Utilities（配置補助）
   .box-left / .box-center / .box-right を親要素に付けるだけ
   ===================================================================================== */

/* 左寄せ（デフォルト） */
.box-left {
  display: flex;
  justify-content: flex-start;
}
.box-left > * {
  width: fit-content;
  max-width: 100%;
}

/* 中央寄せ */
.box-center {
  display: flex;
  justify-content: center;
}
.box-center > * {
  width: fit-content;
  max-width: 100%;
}

/* 右寄せ */
.box-right {
  display: flex;
  justify-content: flex-end;
}
.box-right > * {
  width: fit-content;
  max-width: 100%;
}

/* =====================================================================================
   35. Highlights & Markers（ハイライト・マーカースタイル）
   ===================================================================================== */

/* グリーンハイライト（アンダーライン） */
.hl-green {
  background: linear-gradient(transparent 55%, rgba(9,112,64,0.25) 55%);
}
.hl-yellow {
  background: linear-gradient(transparent 55%, rgba(253,224,71,0.65) 55%);
}
.hl-pink {
  background: linear-gradient(transparent 55%, rgba(249,168,212,0.55) 55%);
}
.hl-blue {
  background: linear-gradient(transparent 55%, rgba(147,197,253,0.55) 55%);
}

/* --- マーカー（全色塗り） --- */
.mk-green  { background: rgba(9,112,64,0.18);  padding: 0.05em 0.3em; border-radius: 3px; }
.mk-yellow { background: rgba(253,224,71,0.7);  padding: 0.05em 0.3em; border-radius: 3px; }
.mk-pink   { background: rgba(249,168,212,0.55); padding: 0.05em 0.3em; border-radius: 3px; }
.mk-blue   { background: rgba(147,197,253,0.55); padding: 0.05em 0.3em; border-radius: 3px; }

/* --- ベター（太字 + 色） --- */
.bet-green  { font-weight: 700; color: var(--green-primary); }
.bet-amber  { font-weight: 700; color: var(--color-amber); }
.bet-red    { font-weight: 700; color: var(--color-red); }
.bet-blue   { font-weight: 700; color: #2563eb; }

/* =====================================================================================
   36. Profile Page（プロファイルページ）
   ===================================================================================== */
.pro-lead-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 1.5rem 0;
}
.pro-lead-img {
  flex: 0 0 45%;
  max-width: 45%;
}
.pro-lead-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.pro-lead-text {
  flex: 1;
}
.pro-lead-text h2 {
  margin-top: 0;
  margin-bottom: 0.6em;
}
.pro-lead-text h5 {
  margin: 0;
}
@media (max-width: 767px) {
  .pro-lead-row {
    flex-direction: column;
    padding: 1rem;
  }
  .pro-lead-img {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
}

/* =====================================================================================
   37. Triangle（三角形）
   ===================================================================================== */

.triangle-down {
  --triangle-size: 16px;
  --triangle-color: var(--green-primary);
  width: 0;
  height: 0;
  border-left: var(--triangle-size) solid transparent;
  border-right: var(--triangle-size) solid transparent;
  border-top: var(--triangle-size) solid var(--triangle-color);
  display: inline-block;
}

/* サイズバリエーション */
.triangle-down--sm { --triangle-size:  8px; }
.triangle-down--md { --triangle-size: 16px; }
.triangle-down--lg { --triangle-size: 24px; }
.triangle-down--xl { --triangle-size: 40px; }

/* カラーバリエーション */
.triangle-down--amber  { --triangle-color: var(--color-amber); }
.triangle-down--red    { --triangle-color: var(--color-red); }
.triangle-down--white  { --triangle-color: #fff; }

/* 中央寄せパターン */
.triangle-down--center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================================================
   38. Card Grid（テーブル代替グリッド）
   ===================================================================================== */

/* ===== Service Card Grid ===== */
.service-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 575.98px) {
  .service-card-grid {
    grid-template-columns: 1fr;
  }
}

/* 3列バリアント：!important で基底クラスの全ブレークポイントを確実に上書き */
.service-card-grid.service-card-grid--3col {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 767.98px) {
  .service-card-grid.service-card-grid--3col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 479.98px) {
  .service-card-grid.service-card-grid--3col {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Service Card ===== */
.service-card {
  background: var(--surface-white);
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 1.4rem 1.6rem 1.4rem 1.4rem;
  max-width: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--green-medium) 0%, var(--green-primary) 60%, var(--green-dark) 100%);
  border-radius: 4px 0 0 4px;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* バッジ（番号アイコン）行 */
.service-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

/* 丸バッジ */
.badge-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-medium) 0%, var(--green-primary) 60%, var(--green-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 4px 12px rgba(9, 112, 64, 0.30);
}

/* "service" 縦書きラベル */
.badge-circle .svc-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.80);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  text-transform: uppercase;
}

/* 番号 */
.badge-circle .svc-num {
  font-size: 34px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin-left: 10px;
  letter-spacing: -0.02em;
}

/* タイトル */
.service-title {
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0.01em;
}

/* 区切り線 */
.service-card hr {
  border: none;
  border-top: 2px solid var(--green-light);
  margin: 0.75rem 0 0.9rem;
}

/* 本文 */
.service-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin: 0;
}

/* スマホ */
@media (max-width: 575.98px) {
  .service-card {
    padding: 1.1rem 1.25rem 1.1rem 1.2rem;
  }
  .badge-circle {
    width: 60px;
    height: 60px;
  }
  .badge-circle .svc-num {
    font-size: 28px;
    margin-left: 8px;
  }
  .badge-circle .svc-label {
    font-size: 9px;
    left: 4px;
  }
}


/* 3列 */
.card-grid-3 {
  border: 1px solid var(--divider);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1.5em;
}

.card-grid-3__header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--green-primary);
}

.card-grid-3__header > div {
  padding: 0.6em 0.75em;
  color: #fff;
  font-weight: 700;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.card-grid-3__header > div:last-child {
  border-right: none;
}

.card-grid-3__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card-grid-3__cell {
  padding: 0.75em 1em;
  border-right: 1px solid var(--divider);
  border-top: 1px solid var(--divider);
}

.card-grid-3__cell:nth-child(3n) {
  border-right: none;
}

.card-grid-3__cell--title {
  background-color: var(--surface-white);
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.card-grid-3__cell--body {
  background-color: #fff8ed;
}

.card-grid-3__cell h5,
.card-grid-3__cell p {
  margin: 0;
}

.card-grid-3__item:nth-child(3n) {
  border-right: none;
}

.card-grid-3__item:nth-child(even) {
  background-color: #fff8ed;
}

/* 1列 */
.card-grid-1 {
  border: 1px solid var(--divider);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1.5em;
}

.card-grid-1__header {
  background-color: var(--green-primary);
  padding: 0.6em 0.75em;
}

.card-grid-1__header > div {
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.card-grid-1__body {
  padding: 0.75em 1em;
}

/* レスポンシブ：スマホ時は縦積み */
@media (max-width: 768px) {
  .card-grid-3__header {
    grid-template-columns: 1fr;
  }

  .card-grid-3__header > div {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    text-align: left;
  }

  .card-grid-3__header > div:last-child {
    border-bottom: none;
  }

  .card-grid-3__row {
    grid-template-columns: 1fr;
  }

  .card-grid-3__cell {
    border-right: none;
  }
}

/* =====================================================================================
   39. Table（テーブル）
   ===================================================================================== */
.wp-block-table table,
.entry-content table,
table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.5em;
  font-size: 0.95em;
  line-height: 1.6;
}

.wp-block-table th,
.wp-block-table td,
.entry-content table th,
.entry-content table td,
table th,
table td {
  padding: 0.75em 1em;
  border: 1px solid var(--divider);
  text-align: left;
  vertical-align: middle;
}

/* ヘッダー行 */
.wp-block-table thead th,
.entry-content table thead th,
table thead th {
  background-color: var(--green-primary);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-color: var(--green-primary);
  text-align: center;
}

/* 縞模様（ストライプ） */
.wp-block-table tbody tr:nth-child(even),
.entry-content table tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
  background-color: #fff8ed;
}

.wp-block-table tbody tr:nth-child(odd),
.entry-content table tbody tr:nth-child(odd),
table tbody tr:nth-child(odd) {
  background-color: var(--surface-white);
}

/* ホバー */
.wp-block-table tbody tr:hover,
.entry-content table tbody tr:hover,
table tbody tr:hover {
  background-color: var(--green-light);
  transition: background-color 0.2s ease;
}

/* 均等幅テーブル */
.table-equal {
  table-layout: fixed;
}

.table-equal th,
.table-equal td {
  width: calc(100% / 3);
}

/* tbody th（左列が見出しの場合） */
.wp-block-table tbody th,
.entry-content table tbody th,
table tbody th {
  background-color: var(--green-pale);
  font-weight: 600;
  color: var(--green-dark);
  white-space: nowrap;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .wp-block-table,
  .entry-content table,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ol・ul モバイル時の左右余白を縮小 */
  ul,
  ol {
    padding-left: 1.25rem;
    padding-right: 0;
  }

  /* テーブル th・td モバイル時縮小 */
  table th,
  table td {
    font-size: 0.8em;
    padding: 0.5em 0.6em;
  }

  table tbody th {
    white-space: normal;
    min-width: 5em;
  }
}


/* =====================================================================================
   40. Mobile Padding Fix → セクション50「Mobile Layout」に統合済み
   ===================================================================================== */

/* =====================================================================================
   41. Icon List（アイコン付きリスト）
   ─────────────────────────────────────────────────────────────────────────────────────
   使い方：
     <ul class="list-icon">
       <li><i class="fa-solid fa-circle-right"></i>テキスト</li>
     </ul>

   色を変える（CSS変数）：
     <ul class="list-icon" style="--li-icon-color: var(--color-amber);">...</ul>
     --li-icon-color  : アイコンの色。デフォルトは var(--green-primary)
   ===================================================================================== */

/*
   使い方：
     <ul class="list-icon">
       <li><i class="fa-solid fa-circle-right"></i>テキスト</li>
     </ul>

   色を変えるには CSS変数 --li-icon-color を上書き：
     <ul class="list-icon" style="--li-icon-color: var(--color-amber);">...</ul>
*/
.list-icon {
  --li-icon-color: var(--green-primary);
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0;
}
.list-icon li {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-bottom: 0.45em;
  line-height: 1.75;
}
.list-icon li > i {
  flex-shrink: 0;
  color: var(--li-icon-color);
  font-size: 1em;
  transition: transform 0.15s ease;
}
.list-icon li:hover > i {
  transform: translateX(3px);
}

/* =====================================================================================
   41-B. PDF Link Icon（PDFリンクアイコン）
   使い方: <a href="..." class="pdf-link" target="_blank">...ファイル名...</a>
   ===================================================================================== */
.pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.18s ease;
}
.pdf-link::after {
  content: '\f1c1'; /* fa-file-pdf */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 1.2em;
  color: #dc2626;
  flex-shrink: 0;
  line-height: 1;
}
.pdf-link:hover {
  color: #dc2626;
  text-decoration: underline;
}


.text-red {
  color: #e00;
}

/* =====================================================================================
   42-A. Kentei Card Grid（検定ページ専用 3列カードグリッド）  ← 42に含む
   ===================================================================================== */

.kentei-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 0.5rem;
}

.kentei-card {
  background: var(--surface-white);
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}
.kentei-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--green-medium) 0%, var(--green-primary) 60%, var(--green-dark) 100%);
  border-radius: 4px 0 0 4px;
}
.kentei-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-light);
}

/* バッジ＋タイトル行 */
.kentei-card__badge {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* 丸バッジ：h3相当サイズ（clamp で h3 の font-size に合わせる） */
.kentei-card__circle {
  flex-shrink: 0;
  width:  clamp(44px, 5vw, 56px);
  height: clamp(44px, 5vw, 56px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-medium) 0%, var(--green-primary) 60%, var(--green-dark) 100%);
  box-shadow: 0 3px 10px rgba(9, 112, 64, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.kentei-card__circle .svc-label {
  font-size: 9px;
  color: rgba(255,255,255,0.80);
  font-weight: 600;
  letter-spacing: 0.06em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-transform: uppercase;
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}
.kentei-card__circle .svc-num {
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-left: 8px;
}

/* タイトル */
.kentei-card__title {
  font-size: clamp(1.1rem, 1.75vw, 1.35rem);
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0.01em;
}
.kentei-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.kentei-card__title a:hover {
  color: var(--green-primary);
}

/* 区切り線 */
.kentei-card hr {
  border: none;
  border-top: 2px solid var(--green-light);
  margin: 0.75rem 0 0.85rem;
}

/* 説明文 */
.kentei-card__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin: 0;
}

/* レスポンシブ */
@media (max-width: 767.98px) {
  .kentei-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
@media (max-width: 479.98px) {
  .kentei-card-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================================
   42. Card Grid 2×4 / Kentei（カードグリッド）
   ─────────────────────────────────────────────────────────────────────────────────────
   使い方：
     <div class="card-grid-2x4">
       <a class="card-grid-2x4__item" href="#">
         <div class="card-grid-2x4__thumb">
           <img src="..." alt="...">
         </div>
         <div class="card-grid-2x4__body">
           <span class="card-grid-2x4__label">カテゴリ</span>
           <h3 class="card-grid-2x4__title">タイトル</h3>
           <p class="card-grid-2x4__excerpt">説明文テキスト</p>
         </div>
       </a>
       ... （計8枚）
     </div>

   オプション用クラス：
     .card-grid-2x4--shadow  : カードに影を付ける
     .card-grid-2x4--hover-lift : ホバーで浮き上がるエフェクト（デフォルトON）
   ===================================================================================== */

.card-grid-2x4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* カード1枚 */
.card-grid-2x4__item {
  display: flex;
  flex-direction: column;
  background: var(--surface-white);
  border: 1px solid var(--divider);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.2s ease;
}
.card-grid-2x4__item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-light);
  text-decoration: none;
  color: var(--text-primary);
}

/* サムネイル */
.card-grid-2x4__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-gray);
  flex-shrink: 0;
}
.card-grid-2x4__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.card-grid-2x4__item:hover .card-grid-2x4__thumb img {
  transform: scale(1.04);
}

/* ボディ */
.card-grid-2x4__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem 1.25rem;
  flex: 1;
}

/* ラベル（カテゴリなど） */
.card-grid-2x4__label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--green-pale);
  color: var(--green-primary);
  border: 1px solid var(--green-light);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2em 0.85em;
  white-space: nowrap;
}

/* タイトル */
.card-grid-2x4__title {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 説明文 */
.card-grid-2x4__excerpt {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 日付 */
.card-grid-2x4__date {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 0.4rem;
  letter-spacing: 0.03em;
}

/* バリアント：影強め */
.card-grid-2x4--shadow .card-grid-2x4__item {
  box-shadow: var(--shadow-md);
}
.card-grid-2x4--shadow .card-grid-2x4__item:hover {
  box-shadow: var(--shadow-lg);
}

/* レスポンシブ ─ タブレット縦：2列維持、ギャップ縮小 */
@media (max-width: 767.98px) {
  .card-grid-2x4 {
    gap: 1rem;
  }
  .card-grid-2x4__body {
    padding: 0.85rem 1rem 1rem;
  }
  .card-grid-2x4__title {
    font-size: 0.9rem;
  }
}

/* レスポンシブ ─ スマホ：1列に切り替え */
@media (max-width: 479.98px) {
  .card-grid-2x4 {
    grid-template-columns: 1fr;
  }
}

/* スマホ全体余白調整 → セクション50「Mobile Layout」に統合済み */

/* =====================================================================================
   43. Kaichou Wrap（会長挨拶 画像回り込み）
   ===================================================================================== */
.kaichou-wrap {
  overflow: hidden;
}
.kaichou-img {
  float: right;
  width: 230px;
  height: auto;
  margin: 0 0 1rem 1.5rem;
  display: block;
}
@media (max-width: 575.98px) {
  .kaichou-img {
    float: none;
    width: 100%;
    max-width: 280px;
    margin: 0 auto 1rem;
  }
}

/* =====================================================================================
   44. Image Modal（ライトボックス）
   ===================================================================================== */
a.img-lightbox img {
  cursor: zoom-in;
  transition: opacity 0.2s ease;
}
a.img-lightbox:hover img {
  opacity: 0.85;
}
.img-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, background 0.35s ease, visibility 0s linear 0.35s;
}
.img-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  background: rgba(0, 0, 0, 0.82);
  transition: opacity 0.35s ease, background 0.35s ease, visibility 0s linear 0s;
}
.img-modal-inner {
  position: relative;
  max-width: 90vw;
  max-height: 88vh;
  transform: scale(0.82);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.34, 1.26, 0.64, 1), opacity 0.35s ease;
}
.img-modal-overlay.is-open .img-modal-inner {
  transform: scale(1);
  opacity: 1;
}
.img-modal-inner img {
  display: block;
  max-width: 90vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.img-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  background: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  transition: background 0.2s, color 0.2s;
}
.img-modal-close:hover {
  background: #333;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .img-modal-overlay,
  .img-modal-overlay.is-open,
  .img-modal-inner,
  .img-modal-overlay.is-open .img-modal-inner {
    transition: none;
    transform: none;
  }
}

/* =====================================================================================
   45. Search Highlight（検索キーワードハイライト）
   ===================================================================================== */
mark.search-highlight {
  background: linear-gradient(transparent 40%, #ffe066 40%);
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
  font-style: inherit;
  font-weight: inherit;
}

/* =====================================================================================
   46. Contact Page（お問合せページ 外枠）
   ===================================================================================== */
/* .page-template-page-contact .page-article → 他ページと同じ白背景に統一（別途スタイルなし） */

.page-template-page-contact .page-section {
  margin-bottom: 2rem;
}

/* =====================================================================================
   47. Contact Cards（お問合せカード）
   ===================================================================================== */
.contact-card {
  background: var(--surface-white);
  border: 1.5px solid var(--divider);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.contact-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.contact-card--green {
  border-top: 4px solid var(--green-primary);
}
.contact-card--amber {
  border-top: 4px solid var(--color-amber);
}
.contact-card--address {
  border-top: 4px solid var(--green-light);
}
.contact-card-icon {
  font-size: 2.2rem;
  margin-bottom: 0.8rem;
  line-height: 1;
}
.contact-card--green  .contact-card-icon { color: var(--green-primary); }
.contact-card--amber  .contact-card-icon { color: var(--color-amber); }
.contact-card--address .contact-card-icon { color: var(--green-primary); }

/* =====================================================================================
   48. Contact Form 7（入力・バリデーション・送信ボタン）
   ===================================================================================== */

/* お問合せページ 案内文（固定ページブロック） */
.contact-form-lead {
  background: var(--green-pale);
  border-left: 4px solid var(--green-primary);
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.4rem !important;
  margin-bottom: 2rem !important;
}
.contact-form-lead__text {
  font-size: 0.97rem !important;
  color: var(--text-primary) !important;
  line-height: 1.9 !important;
  margin-bottom: 0.5rem !important;
}
.contact-form-lead__note {
  font-size: 0.82rem !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}

/* .page-id-73 .page-article → 他ページと同じ白背景に統一（別途スタイルなし） */

/* フォームラッパー */
.wpcf7 {
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  background: var(--surface-white);
  border: 1.5px solid var(--divider);
  border-top: 4px solid var(--green-primary);
  border-radius: 12px;
  padding: 2rem 2.25rem;
  box-shadow: var(--shadow-sm);
}

/* テーブルレイアウト（CF7 デフォルト table 使用時）
.wpcf7 table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.wpcf7 table th,
.wpcf7 table td {
  padding: 0.75rem 0;
  vertical-align: top;
  border-bottom: 1px solid var(--divider);
  line-height: 1.7;
}
.wpcf7 table th {
  width: 38%;
  font-weight: 700;
  color: var(--text-primary);
  padding-right: 1.5rem;
  white-space: nowrap;
}

/* 必須マーク */
.wpcf7 .req,
.wpcf7 abbr[title] {
  color: #dc2626;
  font-style: normal;
  margin-left: 0.25em;
  font-size: 0.82em;
}

/* テキスト入力・セレクト共通 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 0.6rem 0.9rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--surface-white);
  border: 1.5px solid var(--border-input);
  border-radius: 8px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  appearance: none;
  -webkit-appearance: none;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(9,112,64,0.15);
}

/* テキストエリア */
.wpcf7 textarea {
  resize: vertical;
  min-height: 140px;
}

/* セレクトボックス（矢印追加） */
.wpcf7 select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23097040' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.2rem;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* ラベルテキスト 共通 */
.wpcf7 label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

/* brを非表示にしてflexで整列 */
.wpcf7 label > br { display: none; }

/* 入力欄ラッパーは幅100%に折り返し */
.wpcf7 label > .wpcf7-form-control-wrap {
  flex: 0 0 100%;
  margin-top: 0.2rem;
}

/* 必須・任意ピル（CSSのみ / JS不要） */
.wpcf7 label:has([aria-required="true"])::before {
  content: '必須';
  order: 2;
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #dc2626;
  border-radius: 4px;
  padding: 0.2em 0.55em;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* 任意ピル */
.wpcf7 label:not(:has([aria-required="true"]))::before {
  content: '任意';
  order: 2;
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--surface-gray);
  border: 1px solid var(--divider);
  border-radius: 4px;
  padding: 0.2em 0.55em;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ラベルテキストノードは order:1, ラッパーは order:3 で整列 */
.wpcf7 label > .wpcf7-form-control-wrap {
  order: 3;
}

/* ラジオ・チェックボックス */
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.4rem;
  accent-color: var(--green-primary);
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.wpcf7 .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin-right: 1.2rem;
  margin-bottom: 0.3rem;
}
.wpcf7 .wpcf7-list-item label {
  cursor: pointer;
  color: var(--text-primary);
}

/* span.wpcf7-form-control-wrap（インラインラッパー）*/
.wpcf7 span.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* バリデーションエラー */
.wpcf7 .wpcf7-not-valid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
}
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: #dc2626;
}

/* 送信ボタンの段落を右寄せ */
.wpcf7 p:has(input[type="submit"]) {
  text-align: right;
}

/* 送信ボタン */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
  display: inline-block;
  padding: 0.75rem 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--green-primary);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 12px rgba(9,112,64,0.25);
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
  background: var(--green-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(9,112,64,0.32);
}
.wpcf7 input[type="submit"]:active,
.wpcf7 .wpcf7-submit:active {
  background: var(--green-pressed);
  transform: none;
}

/* スピナー（送信中） */
.wpcf7 .wpcf7-spinner {
  margin-left: 0.75rem;
  vertical-align: middle;
}

/* レスポンスメッセージ */
.wpcf7 .wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 0.85rem 1.2rem;
  border-radius: 8px;
  font-size: 0.95rem;
  border: none;
}
/* 成功 */
.wpcf7.sent .wpcf7-response-output {
  background: var(--green-pale);
  color: #0a5c35;
  border-left: 4px solid var(--green-primary);
}
/* エラー */
.wpcf7.failed .wpcf7-response-output,
.wpcf7.invalid .wpcf7-response-output,
.wpcf7.spam   .wpcf7-response-output,
.wpcf7.unaccepted .wpcf7-response-output {
  background: #fff5f5;
  color: #991b1b;
  border-left: 4px solid #dc2626;
}

/* フォームラッパーカード（フォーム全体を囲うカード） */
.contact7 {
  background: var(--surface-white);
  border: 1.5px solid var(--divider);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 767px) {
  .contact7 {
    padding: 1.25rem 1rem;
  }
  .wpcf7 table th,
  .wpcf7 table td {
    display: block;
    width: 100%;
    padding-right: 0;
  }
  .wpcf7 table th {
    border-bottom: none;
    padding-bottom: 0.25rem;
    font-size: 0.9rem;
  }
  .wpcf7 table td {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-card,
  .wpcf7 input[type="submit"],
  .wpcf7 .wpcf7-submit {
    transition: none;
    transform: none;
  }
}

/* =====================================================================================
   50. Mobile Layout（スマホ専用レイアウト）
   ─────────────────────────────────────────────────────────────────────────────────────
   スマホ表示に関するレイアウト調整をここに集約します。
   ブレークポイント：
     max-width: 767px  … スマホ縦（主）
     max-width: 575px  … 小型スマホ（補助）
   ===================================================================================== */

/* -----------------------------------------------------------------------
   50-A. コンテナ・Bootstrap px 系 余白リセット
   ----------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Bootstrap .container の左右余白 */
  .container,
  .container-fluid {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* px-5（48px）・px-4（32px）→ 4px */
  .px-5,
  .px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* px-3（16px）→ 4px */
  .px-3 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* -----------------------------------------------------------------------
   50-B. Page Hero（固定ページ タイトルバー）
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  .page-hero            { padding: 1rem 0 0.75rem; }
  .page-hero__title     { font-size: 1.4rem; }
  .page-hero::after     { display: none; }
}

/* -----------------------------------------------------------------------
   50-C. Page Article（固定ページ コンテンツ本体）
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  .page-article__content { padding: 1rem 0.5rem; }
  .page-article__back    { padding: 1rem 1.25rem 1.5rem; }
  .page-contact-wrap     { padding: 1.5rem 1rem 2rem; }
}

/* -----------------------------------------------------------------------
   51. セミナー告知ブロックパターン (ycci/seminar-notice)
   ----------------------------------------------------------------------- */

/* ── ラッパー全体 ── */
.ycci-seminar-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1rem;
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--text-primary);
}

/* ── タイトル（投稿画面のタイトル欄を使用） ── */

/* ── 基本情報テーブル ── */
.ycci-seminar-info-table table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}
.ycci-seminar-info-table td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--divider);
  vertical-align: middle;
}
.ycci-seminar-info-table td:first-child {
  width: 120px;
  background-color: var(--surface-gray);
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}
.ycci-seminar-info-table td a {
  color: var(--color-purple);
  text-decoration: underline;
}

/* ── セクション見出し（左ボーダー） ── */
.ycci-section-heading {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  margin-bottom: 1rem;
  border-left: 5px solid var(--green-primary);
  background: transparent;
}

/* ── 詳細テキストボックス ── */
.ycci-detail-box {
  border: 1px solid var(--divider);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: #fff;
}
.ycci-detail-box p {
  margin: 0 0 0.75rem;
}
.ycci-detail-box p:last-child {
  margin-bottom: 0;
}
.ycci-detail-box a {
  color: var(--color-purple);
  font-weight: 700;
}

/* ── 詳細情報テーブル ── */
.ycci-seminar-detail-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.ycci-seminar-detail-table td {
  padding: 0.85rem 1rem;
  border: 1px solid var(--divider);
  vertical-align: top;
}
.ycci-seminar-detail-table td:first-child {
  width: 80px;
  background-color: var(--surface-gray);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* ── モバイル対応 ── */
@media (max-width: 600px) {
  .ycci-seminar-info-table td:first-child,
  .ycci-seminar-detail-table td:first-child {
    width: 70px;
    font-size: 0.85rem;
    padding: 0.6rem 0.5rem;
  }
  .ycci-seminar-info-table td,
  .ycci-seminar-detail-table td {
    padding: 0.6rem 0.6rem;
    font-size: 0.9rem;
  }
  .ycci-detail-box {
    padding: 1rem;
  }
}

/* ── CF7 プライバシーポリシー同意チェックボックス ── */
.wpcf7-acceptance-wrap label::before {
  content: none !important;
}
.wpcf7-acceptance-wrap {
  margin: 1.25rem 0;
  padding: 0.9rem 1rem;
  background-color: var(--surface-gray, #f5f5f5);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
}
.wpcf7-acceptance-wrap label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}
.wpcf7-acceptance-wrap input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  cursor: pointer;
}
.wpcf7-acceptance-wrap a {
  color: var(--brand, #1a73e8);
  text-decoration: underline;
}
.wpcf7-not-valid-tip {
  color: #d63638;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

/* ── CF7 ハニーポット（ボット対策のおとりフィールド）── */
.wpcf7-hp-wrap {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}