@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*
  Theme Name: hinode-shokokai
  Description: 日の出商工会 テーマスタイル
  Version: 1.1
*/


/* ================================================================
   CSS カスタムプロパティ（変数）
   - ここを変更すれば全体のカラー・サイズが一括で変わります
   ================================================================ */

:root {
  /* --- ブランドカラー --- */
  --color-primary:        #00a0a0; /* メインティール */
  --color-primary-light:  #00a7aa; /* ナビ上部グラデ用 */
  --color-primary-pale:   #d2f1f1; /* 淡いティール（背景・hover） */
  --color-primary-hover:  #a7caca; /* ボタンhover */

  --color-accent:         #f0b31c; /* オレンジ（地域向け） */
  --color-accent-pale:    #fcefd2; /* 淡いオレンジ（背景） */
  --color-accent-hover:   #f3d798; /* オレンジhover */
  --color-accent-step:    #f4db5f; /* ステップボックス */

  /* --- テキスト・汎用 --- */
  --color-text:           #000;
  --color-text-muted:     #222;
  --color-text-hover:     #898989;
  --color-link:           #00a0a0;
  --color-white:          #fff;
  --color-red:            #ff0000;

  /* --- 背景 --- */
  --color-bg-white:       #fff;
  --color-bg-gray:        #edeceb;
  --color-bg-green:       #e9f5f5;
  --color-bg-dark:        #000;

  /* --- ボーダー --- */
  --color-border:         #cac7c5;

  /* --- フォント --- */
  --font-base:   'Noto Sans JP', sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;
  --line-height-text: 1.88;

  /* --- レイアウト --- */
  --container-max:   1240px;
  --container-1080:  1080px;
  --header-h-pc:     168px;
  --header-h-sp:      60px;
  --nav-h:            58px;

  /* --- ブレイクポイント（メディアクエリ内で直接使用） ---
     ≤1240px : タブレット・SP共通
     ≤768px  : スマートフォン
     ≤640px  : 小型SP
     ≤425px  : 極小SP（特定セクション用）
  */

  /* --- 角丸 --- */
  --radius-sm:   6px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  /* --- トランジション --- */
  --transition: 0.2s ease-out;
}


/* ================================================================
   リセット CSS
   ================================================================ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block;
}

ol, ul {
  list-style: revert;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ================================================================
   ベーススタイル
   ================================================================ */

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

html, body {
  height: 100%; /* レイアウト高さ計算に必要 */
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg-white);
  line-height: var(--line-height-base);
  -webkit-text-size-adjust: none;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-text-hover);
  transition: color var(--transition);
}

a:hover img {
  opacity: 0.6;
  transition: opacity var(--transition);
}


/* ================================================================
   レイアウト共通
   ================================================================ */

/* --- コンテナ（最大幅 1240px） --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  clear: both;
  position: relative;
  z-index: 100;
  overflow: visible;
}

/* --- コンテナ（最大幅 1080px） --- */
.container_1080 {
  width: 100%;
  max-width: var(--container-1080);
  height: 100%;
  margin: 0 auto;
  clear: both;
  position: relative;
  z-index: 100;
  overflow: visible;
}

/* --- 表示切り替え --- */
.sp { display: none; }

@media only screen and (max-width: 1240px) {
  .pc { display: none; }
  .sp { display: block; }
}


/* ================================================================
   タイポグラフィ
   ================================================================ */

h2 {
  font-size: clamp(30px, calc(30px + (44 - 30) * ((100vw - 375px) / (1240 - 375))), 44px);
  font-weight: bold;
  text-align: center;
  color: var(--color-primary);
  margin: 0;
  padding: 0;
  word-break: auto-phrase;
}

h3 {
  word-break: auto-phrase;
}

p {
  font-size: var(--font-size-base);
  font-weight: normal;
  line-height: var(--line-height-text);
  padding: 0 0 1em;
  text-align: justify;
}

/* --- ユーティリティクラス --- */
.font18_b   { font-size: 18px; font-weight: bold; }
.alignleft  { float: left;  padding: 0 15px 15px 10px; }
.alignright { float: right; padding: 0 10px 15px 15px; }
.aligncenter {
  padding: 20px 0;
  text-align: center;
  display: block;
  margin: 0 auto;
}


/* ================================================================
   ボタン共通
   ================================================================ */

/* --- 基本ボタン（→ 付き） --- */
.btn_basic {
  display: flex;
  justify-content: center;
}

.btn_basic a {
  background-color: var(--color-primary);
  width: 240px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: 500;
  transition: all var(--transition);
}

.btn_basic a:hover {
  background-color: var(--color-primary-hover);
}

.btn_basic a::after {
  content: '→';
  position: relative;
  right: -22px;
}

/* --- 白抜きバリアント --- */
.btn_basic.white a {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-white);
}

.btn_basic.white a:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* --- 高さ 90px バリアント（広告ページ用） --- */
.btn_basic.height_90 a {
  background-color: var(--color-primary);
  width: 200px;
  height: 90px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.btn_basic.height_90 a:hover {
  background-color: var(--color-primary-hover);
}

.btn_basic.height_90 a::after {
  content: ''; /* → アイコンなし */
}


/* ================================================================
   ヘッダー
   ================================================================ */

header.site-header {
  background: var(--color-bg-white);
  width: 100%;
  height: var(--header-h-pc);
  margin: 0 auto;
  z-index: 999;
  position: fixed;
  top: unset;
  transition: all var(--transition);
  filter: drop-shadow(0 0 1px #999);
}

/* スクロール時に非表示 */
header.site-header.hide {
  transform: translateY(-100%);
}

.box_header {
  width: 100%;
  height: 110px;
  position: relative;
  background-color: var(--color-bg-white);
}

.box_header h1#logo {
  position: absolute;
  top: 26px;
  left: 80px;
}

.box_header h1#logo a {
  display: block;
  width: 372px;
  height: 64px;
  text-indent: -9999px;
  background: url(images/logo.png) no-repeat;
}

.header_tel {
  position: absolute;
  top: 31px;
  right: 293px;
}

.header_moushikomi {
  position: absolute;
  top: 31px;
  right: 80px;
}

.header_moushikomi a {
  display: block;
  width: 180px;
  height: 48px;
}

@media only screen and (max-width: 1240px) {
  header.site-header {
    height: var(--header-h-sp);
  }
}


/* ================================================================
   ナビゲーション（PC）
   ================================================================ */

nav.pc {
  width: 100%;
  position: relative;
  z-index: 1000;
  /* 上半分 #00a7aa / 下半分 #00a0a0 の2色分割背景 */
  background: linear-gradient(
    to bottom,
    var(--color-primary-light) 0%,
    var(--color-primary-light) 50%,
    var(--color-primary) 50%,
    var(--color-primary) 100%
  );
}

nav.pc > ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav.pc > ul > li {
  position: relative;
  flex: 1;
  max-width: 160px;
  border-left: 1px solid rgb(255 255 255);
}

nav.pc > ul > li:last-child {
  border-right: 1px solid rgba(255, 255, 255, 1);
}

/* 親メニュー項目 */
nav.pc > ul > li > a,
nav.pc > ul > li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);
  padding: 0 10px;
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background var(--transition);
  box-sizing: border-box;
}

nav.pc > ul > li > a:hover,
nav.pc > ul > li > span:hover,
nav.pc > ul > li:hover > a,
nav.pc > ul > li:hover > span {
  background: var(--color-primary-pale);
  color: var(--color-primary);
}

/* サブメニュー（ドロップダウン） */
nav.pc .has-sub {
  position: relative;
}

nav.pc .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 9999;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  transform-origin: top center;
  transform: scale(1, 0);
  transition:
    opacity 0.25s ease,
    transform 0.32s ease,
    max-height 0.32s ease,
    visibility 0.32s ease;
}

nav.pc .has-sub:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  max-height: 500px;
  transform: scale(1, 1);
}

nav.pc .sub-menu li {
  margin: 0;
  padding: 0;
}

nav.pc .sub-menu li a {
  display: block;
  padding: 12px 20px;
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  box-sizing: border-box;
  transition: background var(--transition);
}

/* 事業者の方へ（ティール系） */
nav.pc .business > .sub-menu { background: #0aa5a9; }
nav.pc .business > .sub-menu li a { background: var(--color-primary); }
nav.pc .business > .sub-menu li a:hover {
  color: var(--color-primary);
  background: var(--color-primary-pale);
}

/* 地域の皆様へ（オレンジ系） */
nav.pc .local > .sub-menu { background: var(--color-accent); }
nav.pc .local > .sub-menu li a { background: var(--color-accent); }
nav.pc .local > .sub-menu li a:hover {
  color: var(--color-accent);
  background: var(--color-accent-pale);
}


/* ================================================================
   ナビゲーション（SP）
   ================================================================ */

.menu-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.menu-box .menu-btn {
  position: relative;
  top: 0;
  right: 0;
}

/* メニュー全体の開閉 */
.menu-box ul {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease, visibility 0.4s;
  width: 100%;
  background-color: var(--color-primary);
  list-style: none;
  position: absolute;
  top: 60px;
}

.menu-box.active > ul {
  max-height: 1000px;
  opacity: 1;
  visibility: visible;
  padding: 0;
  transition: max-height 0.5s ease-in-out, opacity 0.4s ease;
}

/* アコーディオン式サブメニュー */
.menu-box ul.toggle {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-box ul.toggle.open {
  max-height: 1000px;
  opacity: 1;
  visibility: visible;
  padding: 10px 0;
}

.menu-box ul.toggle li a {
  display: block;
  color: var(--color-white);
  padding: 11px 20px 11px 35px;
  text-decoration: none;
}

.menu-box ul li {
  margin: 0;
  height: auto;
  color: var(--color-white);
  border-bottom: 1px solid var(--color-white);
}

.menu-box ul.toggle li {
  border-bottom: none;
}

.menu-box ul.local li {
  background-color: var(--color-accent);
}

.menu-box ul li a {
  display: block;
  padding: 11px 20px;
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--font-size-base);
  position: relative;
}

/* リンク右側の矢印アイコン */
.menu-box ul li a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: translateY(-70%) rotate(315deg);
  transition: transform 0.25s ease;
}

/* ハンバーガーボタン */
.menu-btn::before {
  content: '';
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  background: var(--color-primary) url(images/menu_open.png) no-repeat 50%;
  float: right;
}

.menu-btn.active::before {
  background: var(--color-primary) url(images/menu_close.png) no-repeat 50%;
}

.menu-box ul li p {
  font-size: var(--font-size-base);
  color: var(--color-white);
  padding: 40px 18px;
  line-height: 1.8em;
}

.menu-box ul li .sp_sns a {
  display: inline-block;
  padding: 0 13px 0 0;
}

.menu-box ul li p a {
  padding: 0;
  font-size: 13px;
  display: initial;
}

@media only screen and (max-width: 1240px) {

  .menu-box h1#logo {
    position: absolute;
    top: 13px;
    left: 23px;
  }

  .menu-box h1#logo a {
    display: block;
    width: 194px;
    height: 33px;
    text-indent: -9999px;
    background: url(images/logo.png) no-repeat;
    background-size: cover;
  }

  .menu-box ul.toggle {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
    position: relative;
    padding: 0;
  }

  .menu-box ul.toggle.open {
    max-height: 500px;
    opacity: 1;
    top: unset;
    padding: 0;
  }

  /* サブメニュートグルタイトル */
  .menu-box .menu-toggle-title {
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
  }

  /* ＋アイコン（横線） */
  .menu-box .menu-toggle-title::before {
    content: "";
    position: absolute;
    top: 60%;
    right: 16px;
    width: 14px;
    height: 11px;
    border-top: 2px solid var(--color-white);
    transform: translateY(-70%) rotate(0deg);
    transition: transform 0.25s ease;
  }

  /* ＋アイコン（縦線） */
  .menu-box .menu-toggle-title::after {
    content: "";
    position: absolute;
    top: 40.5%;
    right: 10.5px;
    transform: translateY(-30%) rotate(270deg);
    width: 14px;
    height: 14px;
    border-top: 2px solid var(--color-white);
    transition: transform 0.25s ease;
  }

  /* open 時は縦線を横に回転（－に変化） */
  .menu-box .menu-toggle-title.open::after {
    top: 65%;
    right: 16px;
    transform: translateY(-70%) rotate(0deg);
  }

  .menu-box .toggle li a {
    display: block;
    padding: 10px 0 10px 40px;
  }

}


/* ================================================================
   メインコンテンツ余白
   ================================================================ */

main {
  padding: var(--header-h-pc) 0 0;
}

@media only screen and (max-width: 1240px) {
  main {
    padding: var(--header-h-sp) 0 0;
  }
}


/* ================================================================
   トップページ > スライダー
   ================================================================ */

#slider {
  width: 100%;
  padding: 20px 0;
  background: var(--color-bg-white);
  overflow: hidden;
  box-sizing: border-box;
}

#slider .slider_wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  touch-action: pan-y;
}

#slider .box_slider {
  display: flex;
  gap: 20px;
  will-change: transform;
}

#slider .slider_img {
  flex: 0 0 min(1240px, 82%);
  max-width: 1240px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-sizing: border-box;
  user-select: none;
}

#slider .slider_img a {
  display: block;
  -webkit-user-drag: none;
}

#slider .slider_img img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 矢印ボタン */
#slider .slider_arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 20;
  padding: 0;
}

#slider .slider_arrow::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-top: 6px solid var(--color-white);
  border-right: 6px solid var(--color-white);
}

#slider .slider_arrow.prev::before { transform: rotate(-135deg); }
#slider .slider_arrow.next::before { transform: rotate(45deg); }

/* SP 専用画像の切り替え */
#slider .slider_img img.for_sp { display: none; }

@media screen and (max-width: 1024px) {
  #slider .slider_img {
    flex: 0 0 88%;
    max-width: none;
    border-radius: var(--radius-lg);
  }
}

@media screen and (max-width: 767px) {
  #slider { padding: 20px 0; }
  #slider .box_slider { gap: 10px; }
  #slider .slider_img {
    flex: 0 0 90%;
    max-width: none;
    border-radius: var(--radius-md);
  }
  #slider .slider_img img.for_pc { display: none; }
  #slider .slider_img img.for_sp { display: block; }

  #slider .slider_arrow { width: 40px; height: 40px; }
  #slider .slider_arrow::before { width: 18px; height: 18px; border-width: 3px; }
  #slider .slider_arrow.prev::before { margin-left: 17px; }
  #slider .slider_arrow.next::before { margin-left: 5px; }
}


/* ================================================================
   トップページ > 2カラム分岐（事業者 / 地域）
   ================================================================ */

.separate_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.inn_50 { width: 50%; }

.inn_50_img {
  text-align: center;
  margin: 0 0 33px;
}

/* --- 事業者エリア（ティール） --- */
.inn_businesses {
  background-color: var(--color-primary-pale);
  padding: 110px 0;
}

.inn_businesses img {
  max-width: 356px;
  width: 100%;
  height: auto;
}

/* --- 地域エリア（オレンジ） --- */
.inn_local {
  background-color: var(--color-accent-pale);
  padding: 112px 0 110px;
}

.inn_local img {
  max-width: 420px;
  width: 100%;
  height: auto;
}

h2.separate {
  line-height: 1;
  margin: 0 0 46px;
  padding: 0;
  color: var(--color-text);
}

h2.separate span {
  display: block;
  font-size: clamp(14px, calc(14px + (20 - 14) * ((100vw - 375px) / (1240 - 375))), 20px);
  padding: 16px 0 0;
}

/* リストボタン 共通 */
.inn_50 ul {
  max-width: 83%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
}

.inn_50 ul li { word-break: auto-phrase; }

.inn_50 ul li a {
  display: flex;
  height: 100px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--color-white);
  border-radius: 20px;
  line-height: 1.29;
  text-align: center;
  background-repeat: no-repeat;
  background-position: 23px 50%;
}

/* 事業者リスト */
.inn_50 ul.list_busi li { width: calc(50% - 10px); }
.inn_50 ul.list_busi li a {
  background-color: var(--color-primary);
  font-size: clamp(18px, calc(18px + (28 - 18) * ((100vw - 375px) / (1240 - 375))), 28px);
  padding-left: 73px;
}
.inn_50 ul.list_busi li a:hover {
  background-color: var(--color-primary-hover);
  transition: all var(--transition);
}

/* 事業者 アイコン */
.inn_50 ul.list_busi li.busi_01 a { background-image: url(images/icon-about.png); }
.inn_50 ul.list_busi li.busi_02 a { background-image: url(images/icon-consultation.png); }
.inn_50 ul.list_busi li.busi_03 a { background-image: url(images/icon-loan-system.png); }
.inn_50 ul.list_busi li.busi_04 a { background-image: url(images/icon-expert.png); }
.inn_50 ul.list_busi li.busi_05 a { background-image: url(images/icon-insurance.png); }
.inn_50 ul.list_busi li.busi_06 a { background-image: url(images/icon-activities.png); }
.inn_50 ul.list_busi li.busi_07 a { background-image: url(images/icon-join.png); }
.inn_50 ul.list_busi li.busi_08 a { background-image: url(images/icon-ad.png); }

/* 地域リスト */
.inn_50 ul.list_local li { width: 100%; }
.inn_50 ul.list_local li a {
  background-color: var(--color-accent);
  font-size: clamp(18px, calc(18px + (28 - 18) * ((100vw - 375px) / (1240 - 375))), 28px);
}
.inn_50 ul.list_local li a:hover {
  background-color: var(--color-accent-hover);
  transition: all var(--transition);
}

/* 地域 アイコン */
.inn_50 ul.list_local li.local_01 a { background-image: url(images/icon-search.png); }
.inn_50 ul.list_local li.local_02 a { background-image: url(images/icon-reform.png); }
.inn_50 ul.list_local li.local_03 a { background-image: url(images/icon-map.png); }
.inn_50 ul.list_local li.local_04 a { background-image: url(images/icon-point.png); }

@media only screen and (max-width: 1240px) {
  .separate_wrap { flex-direction: column; }
  .inn_50 { width: 100%; }
  .inn_businesses { padding: 45px 0 48px; }
  .inn_businesses img { width: 64%; }
  .inn_50 ul { max-width: 90%; }
  .inn_50 ul li a {
    min-height: 60px;
    height: auto;
    border-radius: var(--radius-sm);
    background-position: 11px 50%;
    background-size: 33px;
  }
  .inn_50 ul.list_busi li a { padding-left: 40px; }
  .inn_50_img { margin: 0 0 15px; }
  h2.separate { margin: 0 0 30px; }
  .inn_local { padding: 45px 0 48px; }
  .inn_local img { width: 75%; }
}


/* ================================================================
   トップページ > お知らせスライダー
   ================================================================ */

#top_news {
  position: relative;
  padding: 100px 0 110px;
}

#top_news h2 { margin: 0 0 60px; }

#top_news_slider { padding: 16px 0 60px; }

#top_news_slider .container_1240 {
  max-width: 1240px;
  width: calc(100% - 40px);
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

/* スライダー本体 */
.news_slider_wrap { position: relative; }

.news_slider_view {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
}

.news_slider_view::-webkit-scrollbar { display: none; }

.news_slider_track {
  display: flex;
  gap: 50px;
}

.news_slide_item {
  flex: 0 0 calc((100% - 100px) / 3);
  scroll-snap-align: start;
  min-width: 0;
}

/* カード */
.news_card {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.news_card_thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 24px;
  margin-bottom: 16px;
  background: #ddd;
}

.news_card_thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition);
}

.news_card:hover .news_card_thumb img {
  transform: scale(1.04);
}

.news_card_body { min-width: 0; }

.news_card_title {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 58px;
  word-break: normal;
}

.news_card_meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.news_card_cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  min-height: 28px;
  padding: 0 16px;
  border: 1px solid var(--color-text);
  border-radius: 9999px;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.news_slide_item a:hover .news_card_cat { color: var(--color-text); }

.news_card_date {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.news_card_excerpt {
  font-size: var(--font-size-base);
  line-height: 1.5;
  margin: 0;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 矢印ボタン */
.news_slider_btn {
  position: absolute;
  top: 219px;
  width: 67px;
  height: 67px;
  border: none;
  background: #11a6a6;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.25s ease, visibility 0.25s ease, background var(--transition);
}

.news_slider_btn:hover { background: var(--color-primary-hover); }

.news_slider_btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border-top: 7px solid var(--color-white);
  border-right: 7px solid var(--color-white);
  transform-origin: center;
}

.news_slider_btn.prev { left: -105px; }
.news_slider_btn.prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.news_slider_btn.next { right: -105px; }
.news_slider_btn.next::before { transform: translate(-65%, -50%) rotate(45deg); }

.news_slider_btn.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media screen and (max-width: 1180px) {
  #top_news { padding: 50px 0; }
  #top_news h2 { margin: 0; }
  .news_slider_btn.prev { left: -20px; }
  .news_slider_btn.next { right: -20px; }
}

@media screen and (max-width: 900px) {
  .news_slider_track { gap: 28px; }
  .news_slide_item { flex: 0 0 calc((100% - 28px) / 2); }
}

@media screen and (max-width: 640px) {
  #top_news_slider { padding: 30px 0; }
  .news_slider_track { gap: 20px; }
  .news_slide_item { flex: 0 0 100%; }
  .news_slider_btn { top: 120px; width: 30px; height: 30px; }
  .news_slider_btn.prev { left: -5px; }
  .news_slider_btn.next { right: -5px; }
  .news_card_title { font-size: var(--font-size-base); min-height: 76px; }
  .news_card_excerpt { font-size: 14px; }
  .news_slider_btn::before { width: 12px; height: 12px; border-top: 3px solid var(--color-white); border-right: 3px solid var(--color-white); }
}


/* ================================================================
   トップページ > グリーンプラザ
   ================================================================ */

#greenplaza {
  position: relative;
  padding: 100px 0 110px;
  background-color: var(--color-primary);
}

#greenplaza h2 {
  color: var(--color-white);
  margin: 0 0 60px;
}

.plaza_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 60px;
  max-width: 915px;
  margin: 0 auto;
}

.plaza_img img {
  max-width: 430px;
  width: 100%;
  height: auto;
}

.plaza_txt p { color: var(--color-white); }

#greenplaza .btn_basic {
  justify-content: left;
  position: relative;
  top: 52px;
}

@media only screen and (max-width: 1240px) {
  #greenplaza {
    padding: 40px 20px 74px;
  }
  #greenplaza h2 {
    margin: 0 0 36px;
    line-height: normal;
  }
}

@media only screen and (max-width: 768px) {
  #greenplaza .btn_basic {
    justify-content: center;
    top: 13px;
  }
}


/* ================================================================
   トップページ > リンクバナー
   ================================================================ */

#link_banner {
  position: relative;
  padding: 110px 0;
  background-color: var(--color-bg-gray);
}

.banner_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  max-width: 1000px;
  margin: 0 auto 50px;
}

.banner_wrap.last { margin: 0 auto; }

.banner_img img {
  display: block;
  max-width: 300px;
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 768px) {
  #link_banner { padding: 50px 10px; }
  .banner_wrap { gap: 20px; margin: 0 auto 20px; }
  .banner_img { width: 42%; }
}


/* ================================================================
   フッター
   ================================================================ */

footer {
  border-top: 1px solid var(--color-border);
  padding: 110px 0 28px;
  position: relative;
  z-index: 100;
}

.footer_wrap {
  padding: 0 0 100px;
  display: flex;
  justify-content: space-between;
}

h1#footer_logo { margin: 0 0 40px; }

h1#footer_logo a {
  display: block;
  width: 372px;
  height: 64px;
  text-indent: -9999px;
  background: url(images/logo.png) no-repeat;
}

.footer_txt p {
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.38;
  color: var(--color-text);
}

nav.footer_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 70px;
  flex-direction: row;
  justify-content: flex-end;
}

nav.footer_nav ul { list-style: none; }

nav.footer_nav ul li a {
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 2;
}

nav.footer_nav ul li a:hover {
  color: var(--color-text-hover);
  transition: color var(--transition);
}

nav.footer_nav ul.left { margin-top: -4px; }

nav.footer_nav ul.businesses {
  list-style: disc;
  color: var(--color-primary);
}

nav.footer_nav ul.local {
  list-style: disc;
  color: var(--color-accent);
}

nav.footer_nav ul li.head {
  font-size: var(--font-size-base);
  font-weight: 500;
  text-indent: -1.5em;
}

nav.footer_nav ul.businesses li.head {
  color: var(--color-primary);
  list-style: none;
}

nav.footer_nav ul.local li.head {
  color: var(--color-accent);
  list-style: none;
}

.copy { font-size: 14px; }

@media only screen and (max-width: 1240px) {
  footer { padding: 50px 25px 73px; }
  h1#footer_logo { margin: 0 0 25px; }
  .footer_txt {
    float: unset;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin: 0 0 30px;
    align-content: center;
  }
  nav.footer_nav { justify-content: center; }
}

@media only screen and (max-width: 768px) {
  .footer_wrap {
    padding: 0 0 40px;
    flex-direction: column;
    align-items: flex-start;
    max-width: 372px;
    margin: 0 auto;
  }
  h1#footer_logo a {
    width: 320px;
    background-size: contain;
  }
  /* SP では箇条書きナビを非表示 */
  nav.footer_nav ul.businesses,
  nav.footer_nav ul.local { display: none; }
}


/* ================================================================
   SP 固定 お問い合わせバー（768px 以下）
   ================================================================ */

.sp_contact { display: none; }

@media only screen and (max-width: 768px) {
  .sp_contact {
    position: fixed;
    bottom: 0;
    background-color: var(--color-bg-white);
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    padding: 0 20px;
    z-index: 101;
  }

  .sp_contact a {
    display: block;
    width: 100%;
    height: 40px;
    color: var(--color-white);
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    padding: 8px 0 0 26px;
    border-radius: var(--radius-sm);
  }

  .sp_moushikomi { width: 50%; }
  .sp_moushikomi a {
    background: #eb6d8e url(images/icon-join-w.png) no-repeat calc(50% - 55px) 50%;
  }

  .sp_tel { width: 50%; }
  .sp_tel a {
    background: #009e96 url(images/icon-tel-w.png) no-repeat calc(50% - 49px) 50%;
  }
}


/* ================================================================
   サブページ 共通
   ================================================================ */

#sub { padding: 20px 0 0; }

/* ページタイトルエリア */
.page_title {
  width: 100%;
  height: 200px;
  background-color: var(--color-primary-pale);
}

.title_wrap {
  display: flex;
  height: 200px;
  flex-wrap: wrap;
  align-content: center;
}

.page_title h2 {
  font-size: clamp(26px, calc(26px + (48 - 26) * ((100vw - 375px) / (1240 - 375))), 48px);
  font-weight: bold;
  text-align: left;
  color: var(--color-text);
  margin: -15px 0 0;
  padding: 0 0 0 102px;
  line-height: 1.5;
  background-repeat: no-repeat;
  background-position: 0 16px;
}

.page_title h2 span.page_subtitle {
  display: block;
  font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 375px) / (1240 - 375))), 18px);
  font-weight: 500;
  padding: 3px 0 0;
}

/* パンくず */
.breadcrumb { font-size: 14px; padding: 4px 0; }
.breadcrumb a { color: var(--color-text); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-text-hover); transition: color var(--transition); }

/* キャッチコピーエリア */
.catch { padding: 105px 0 70px; }

.catch_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.catch_txt {
  max-width: 700px;
  width: 100%;
}

.catch_txt h3 {
  font-size: clamp(24px, calc(24px + (30 - 24) * ((100vw - 375px) / (1240 - 375))), 30px);
  font-weight: bold;
  text-align: left;
  color: var(--color-primary);
  line-height: normal;
  padding: 0 0 24px;
}

/* ユーティリティ */
.color_green { color: var(--color-primary); }
.bg_green     { background-color: var(--color-bg-green); }
.only_sp      { display: none; }

/* テーブル 共通（basic） */
table.basic {
  width: 100%;
  margin: 0 0 16px;
  font-size: 18px;
}

table.basic tr {
  display: flex;
  gap: 30px;
}

table.basic th {
  width: 27.5%;
  padding: 26px 20px 26px 30px;
  font-weight: 500;
  text-align: left;
  border-bottom: 2px solid var(--color-primary);
}

table.basic td {
  width: 100%;
  padding: 26px 20px 26px 30px;
  font-weight: normal;
  text-align: left;
  border-bottom: 2px solid var(--color-primary-pale);
}

/* テーブル（リスト型） */
table.list_type { width: 100%; }

table.list_type th {
  width: 25%;
  font-size: var(--font-size-base);
  font-weight: bold;
  text-align: left;
  vertical-align: top;
  padding: 0 0 10px;
}

table.list_type td {
  font-size: var(--font-size-base);
  font-weight: normal;
  text-align: left;
  vertical-align: top;
  padding: 0 0 10px;
}

@media only screen and (max-width: 1240px) {
  #sub { padding: 0; }
  .page_title { height: 146px; }
  .title_wrap { height: 146px; padding: 22px; }
  .page_title h2 {
    margin: -9px 0 0;
    padding: 0 0 0 78px;
    background-position: 0 8px;
    background-size: 50px;
  }
  .breadcrumb { padding: 4px 22px; }
  .catch { padding: 45px 22px 50px; }
  .catch_wrap { flex-direction: column; align-items: center; gap: 20px; }
  .catch_txt { max-width: unset; }

  table.basic tr { gap: 0; flex-direction: column; }
  table.basic th { width: 100%; padding: 0 0 7px; border-bottom: none; }
  table.basic td { padding: 0 0 26px; margin: 0 0 25px; border-bottom: 2px solid var(--color-primary); }
}


/* ================================================================
   地域向けページ 共通（オレンジ系）
   ================================================================ */

#sub.orange .page_title {
  width: 100%;
  height: 200px;
  background-color: var(--color-accent-pale);
}

#title_image_bg {
  width: 100%;
  height: 510px;
  background-position: 50%;
  background-size: cover;
  position: relative;
}

@media only screen and (max-width: 1240px) {
  #sub.orange .page_title { height: 146px; }
  #title_image_bg.search_bg { height: 300px; }
  .only_pc { display: none; }
  .only_sp { display: block; }
}


/* ================================================================
   サブページ > 組織概要（about）
   ================================================================ */

.page_title h2.h2_about { background-image: url(images/icon-about-g.png); }

.about_01 {
  position: relative;
  padding: 100px 0 110px;
}

.card_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 52px;
  margin: 60px 0 0;
}

.card {
  max-width: 594px;
  background: var(--color-bg-white);
  overflow: hidden;
}

.card-header {
  background-color: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  padding: 15px;
}

.card-header h3 { font-size: 24px; font-weight: bold; }

.card-header h3 span.font_18b {
  display: block;
  font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 375px) / (1240 - 375))), 18px);
}

.card-body {
  position: relative;
  padding: 25px 30px 20px;
}

.info-list.right_list { margin: 30px 0 0; }

.info-list div { display: flex; margin-bottom: 12px; line-height: 1.4; }
.info-list dt  { flex: 0 0 130px; font-weight: bold; }
.info-list dd  { margin: 0; flex: 1; }

.about_02 {
  position: relative;
  padding: 100px 0 85px;
}

p.font_18r { text-align: right; font-size: 18px; }

.about_03 {
  position: relative;
  padding: 100px 0 110px;
}

.about_03 h2 { margin: 0 0 47px; }

.line_box {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  margin: 40px 0 0;
}

.line_box_txt {
  max-width: 780px;
  width: 100%;
  border-top: 2px solid var(--color-primary);
}

.font_18b { font-size: 18px; font-weight: bold; padding: 0 0 4px; }

.inn_line {
  border-bottom: 2px solid var(--color-primary);
  padding: 22px 0 9px;
}

.line_box_img img {
  max-width: 400px;
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 1240px) {
  #page_about .catch_img { padding: 0; }
  .about_01 { padding: 40px 22px 50px; }
  .card { max-width: unset; width: 100%; }
  .card-body { padding: 20px 22px 10px; }
  .info-list div { flex-direction: column; margin-bottom: 16px; }
  .info-list dt { flex: unset; margin-bottom: 8px; }
  .card_wrap { gap: 30px; margin: 24px 0 0; }
  .about_02 { padding: 40px 22px 30px; }
  .about_03 { padding: 40px 22px 50px; }
  .line_box { gap: 30px; margin: 15px 0 0; }
}


/* ================================================================
   サブページ > ご挨拶（greeting）
   ================================================================ */

.page_title h2.h2_greeting { background-image: url(images/icon-greeting-g.png); }

#page_greeting {
  background-color: var(--color-bg-dark);
  padding: 0 0 150px;
}

.img_greeting {
    text-align: center;
}

.img_greeting img {
  max-width: 1560px;
  width: 100%;
  height: auto;
}

h2.h2_60b_white {
  font-size: clamp(30px, calc(30px + (60 - 30) * ((100vw - 375px) / (1240 - 375))), 60px);
  color: var(--color-white);
  padding: 76px 0 80px;
}

h2.under_white {
  color: var(--color-white);
  margin: 0 auto 68px;
  width: fit-content;
  position: relative;
}

h2.under_white::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
}

.greeting_01 p { color: var(--color-white); padding: 0 0 2em; }

.box_cast_large {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  margin: 0 0 87px;
}

.box_cast_large .img_cast img {
  max-width: 450px;
  width: 100%;
  height: auto;
}

.txt_cast {
  color: var(--color-white);
  max-width: 570px;
}

.job_title { font-size: 20px; font-weight: bold; padding: 0 0 3px; }

.cast_name {
  font-size: 30px;
  font-weight: bold;
  padding: 0 0 19px;
}

.cast_name span.col_red { color: var(--color-red); }

.cast_name span.kana {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 500;
}

.box_cast_middle_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 45px;
  margin: 0 0 36px;
}

.box_cast_middle {
  max-width: 330px;
  text-align: center;
  margin: 0 0 30px;
}

.box_cast_middle .img_cast img {
  max-width: 330px;
  width: 100%;
  height: auto;
}

.greeting_03 p { color: var(--color-white); }

h2.normal_red { color: var(--color-red); padding: 0 0 40px; }

@media only screen and (max-width: 1240px) {
  #page_greeting { padding: 0 22px 40px; }
  h2.h2_60b_white { padding: 33px 0 17px; }
  h2.under_white { margin: 0 auto 40px; }
  .box_cast_large { gap: 20px; margin: 0 0 33px; justify-content: center; }
  .job_title, .cast_name { text-align: center; }
  .box_cast_middle_wrap { gap: 30px; }
  .box_cast_middle { margin: 0; }
  h2.normal_red { padding: 0 0 14px; }
  .img_greeting img.only_pc { display: block; }
  .img_greeting img.only_sp { display: none; }
}

@media only screen and (max-width: 425px) {
  .img_greeting img.only_pc { display: none; }
  .img_greeting img.only_sp { display: block; }
}


/* ================================================================
   サブページ > 経営相談（consulting）
   ================================================================ */

.page_title h2.h2_consulting { background-image: url(images/icon-consultation-g.png); }

#page_consulting { background-color: var(--color-bg-white); padding: 0; }
#page_consulting .catch_txt { max-width: 680px; }

.consulting_01 {
  position: relative;
  padding: 100px 0 80px;
}

.consulting_01 h2 { padding: 0 0 46px; }

p.align_center { text-align: center; }

.card_wrap_2 { margin: 42px 0 0; }

.card_2 {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  justify-content: center;
}

.card_mid {
  max-width: 390px;
  background: var(--color-bg-white);
  margin: 0 0 30px;
}

.card_mid ul li {
  margin: 0 0 0 23px;
  font-weight: 500;
  padding: 0 0 6px;
  text-indent: -5px;
}

@media only screen and (max-width: 1240px) {
  .consulting_01 { padding: 40px 22px 50px; }
  .consulting_01 h2 { padding: 0 0 13px; }
  .card_wrap_2 { margin: 10px 0 0; }
  .card_mid { margin: 0; }
}

@media only screen and (max-width: 768px) {
  #page_consulting .catch_txt h3 { word-break: normal; }
}


/* ================================================================
   サブページ > 融資制度（financing）
   ================================================================ */

.page_title h2.h2_financing {
  background-image: url(images/icon-financing-g.png);
  word-break: auto-phrase;
}

#page_financing { background-color: var(--color-bg-white); padding: 0; }

.financing_01 {
  position: relative;
  padding: 100px 0 80px;
}

.financing_01 h2 { padding: 0 0 46px; }

/* セクション見出し帯（ティール） */
h3.green_belt {
  font-size: clamp(22px, calc(22px + (30 - 22) * ((100vw - 375px) / (1240 - 375))), 30px);
  font-weight: bold;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-primary);
  padding: 10px 0 12px;
  margin: 40px 0 60px;
}

.box_white_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  margin: 0 0 26px;
}

.box_white {
  max-width: 390px;
  background-color: var(--color-bg-white);
  padding: 30px 30px 10px;
}

/* 番号付きタイトル */
.number_title {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
  color: var(--color-primary);
  padding: 0 0 26px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.circle_number {
  display: block;
  width: 30px;
  height: 30px;
  background-color: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  border-radius: 15px;
  line-height: 28px;
  padding: 0 8px;
  margin: 0 16px 0 0;
}

.block_white {
  background-color: var(--color-bg-white);
  padding: 30px 60px 45px;
  margin: 46px 0 0;
}

.line_financing .inn_line { display: flex; }
.line_financing .line_box_img img { max-width: 350px; width: 100%; height: auto; }
.line_financing .number_title { width: 215px; padding: 0; }
.line_financing .line_box_txt { border-top: none; }
.line_financing .inn_line { padding: 30px 0 16px; }
.line_financing .line_box { margin: -13px 0 0; }

.financing_02 {
  position: relative;
  padding: 100px 0 110px;
}

.financing_02 h2 { padding: 0 0 46px; }

.other_yushi { margin: 28px 0 48px; }

.other_yushi h3 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
  color: var(--color-primary);
  padding: 0 0 20px;
}

.other_yushi ul li {
  margin: 0 0 0 26px;
  padding: 0 0 3px;
  line-height: var(--line-height-text);
}

.other_yushi ul li span.column_left {
  font-size: var(--font-size-base);
  font-weight: bold;
  display: inline-block;
  width: 136px;
}

.financing_03 {
  position: relative;
  padding: 100px 0 110px;
}

.financing_03 h2 { padding: 0 0 46px; }

table.financing_type th { width: 13%; }

@media only screen and (max-width: 1240px) {
  .financing_01 { padding: 40px 22px 50px; }
  .financing_01 h2 { padding: 0 0 10px; }
  h3.green_belt { margin: 20px 0 30px; }
  .box_white { padding: 22px 20px 0; }
  .number_title { padding: 0 0 15px; }
  .block_white { padding: 22px 22px 1px; margin: 10px 0 40px; }
  .line_financing .inn_line { flex-direction: column; gap: 12px; padding: 30px 0 8px; }
  .line_box_img { margin: 0 auto; text-align: center; }
  .box_white_wrap { justify-content: center; }
  .financing_02 { padding: 40px 22px 30px; }
  .financing_02 h2 { padding: 0 0 10px; }
  table.financing_type tr { display: flex; flex-direction: column; }
  table.financing_type th { width: 100%; }
  .financing_03 { padding: 40px 22px 50px; }
  .financing_03 h2 { padding: 0 0 10px; }
}

@media only screen and (max-width: 768px) {
  .line_financing .line_box_img img { width: 80%; }
}


/* ================================================================
   サブページ > 専門家派遣（expert-dispatch）
   ================================================================ */

.page_title h2.h2_expert-dispatch { background-image: url(images/icon-expert-g.png); }

#page_expert-dispatch { background-color: var(--color-bg-white); padding: 0; }

.expert_01 {
  position: relative;
  padding: 110px 0;
}

.block_white.type_expert {
  padding: 50px 50px 7px;
  margin: 0;
}

.box_expert {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.txt_expert_wrap { max-width: 630px; width: 100%; }
.txt_expert  { margin: 0 0 33px; }
.txt_expert2 { margin: 0; }

.txt_expert h3 {
  font-size: clamp(20px, calc(20px + (24 - 20) * ((100vw - 375px) / (1240 - 375))), 24px);
  font-weight: bold;
  line-height: 1.25;
  color: var(--color-primary);
  padding: 0 0 20px;
}

.txt_expert ul.first { margin: 0 0 37px; }

.txt_expert ul li {
  margin: 0 0 0 26px;
  padding: 0 0 3px;
  line-height: var(--line-height-text);
}

.txt_expert ul li span.column_left {
  font-size: var(--font-size-base);
  font-weight: bold;
  display: inline-block;
  width: 277px;
}

.txt_expert ul.first li span.column_left  { width: 277px; }
.txt_expert ul.second li span.column_left { width: 93px; }

.img_expert img { max-width: 480px; width: 100%; height: auto; }

table.expert_type th  { width: 50%; }
table.expert_type2 th { width: 18%; }

@media only screen and (max-width: 1240px) {
  #page_expert-dispatch .catch_img { margin: 0; text-align: center; }
  #page_expert-dispatch .catch_img img { max-width: 368px; width: 75%; height: auto; }
  .expert_01 { padding: 50px 22px; }
  .block_white.type_expert { padding: 23px 20px; }
  table.expert_type tr,
  table.expert_type2 tr { display: flex; flex-direction: column; }
  table.expert_type th,
  table.expert_type2 th { width: 100%; }
  .txt_expert { margin: 0 0 20px; }
  .img_expert { margin: -30px 0 0; }
}


/* ================================================================
   サブページ > 共済・保険（insurance）
   ================================================================ */

.page_title h2.h2_insurance { background-image: url(images/icon-insurance-g.png); }

#page_insurance { background-color: var(--color-bg-white); padding: 0; }

.insurance_01 {
  position: relative;
  padding: 110px 0;
}

.insurance_01 h2 { padding: 0 0 46px; }

h3.black_24b {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
  text-align: center;
  color: var(--color-text);
  padding: 0 0 26px;
}

.box_itaku {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  max-width: 930px;
  margin: 72px auto 0;
}

.txt_itaku { max-width: 471px; width: 100%; }

.txt_itaku h3 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
  color: var(--color-primary);
  padding: 0 0 20px;
}

.txt_itaku ul.first { margin: 0 0 39px; list-style: none; }
.txt_itaku ul.second { margin: 0 0 3px; list-style: none; }
.txt_itaku ul.first li,
.txt_itaku ul.second li { margin: 0; }
.txt_itaku ul li { margin: 0 0 0 26px; padding: 0 0 3px; line-height: var(--line-height-text); font-weight: bold; }
.txt_itaku ul li ul li { font-weight: normal; }
.txt_itaku ul li ul { list-style: disc; margin: 6px 0 0 38px; }

.txt_itaku ul li ul li span.column_left {
  font-size: var(--font-size-base);
  font-weight: normal;
  display: inline-block;
  width: 243px;
}

.txt_itaku ul li span.column_right {
  font-size: var(--font-size-base);
  font-weight: normal;
  display: inline-block;
  padding: 0 0 0 21px;
}

.img_itaku img { max-width: 434px; width: 100%; height: auto; }

.insurance_02 {
  position: relative;
  padding: 110px 0;
}

.insurance_02 h2 { padding: 0 0 46px; }

.kyousai { margin: 38px 0 0; }
.kyousai h3 { font-size: 24px; font-weight: bold; line-height: 1.25; color: var(--color-primary); padding: 0 0 23px; }
.kyousai ul li { margin: 0 0 0 26px; padding: 0 0 11px; line-height: 2.3; }

.insurance_03 {
  position: relative;
  padding: 110px 0;
}

.insurance_03 h2 { padding: 0 0 46px; }

.box_shindan {
  display: flex;
  flex-wrap: wrap;
  gap: 52px;
  max-width: 923px;
  margin: 0 auto;
}

.txt_shindan { max-width: 600px; width: 100%; }
.txt_shindan h3.black_24b { text-align: left; }

.txt_shindan ul li {
  margin: 0 0 0 26px;
  padding: 0 0 3px;
  line-height: var(--line-height-text);
}

.txt_shindan ul li span.column_left {
  font-size: var(--font-size-base);
  font-weight: bold;
  display: inline-block;
  width: 98px;
}

.img_shindan img { max-width: 271px; width: 100%; height: auto; }

@media only screen and (max-width: 1240px) {
  .insurance_01 { padding: 40px 22px 50px; }
  .insurance_01 h2 { padding: 0 0 10px; }
  .insurance_01 .box_white_wrap { gap: 30px; margin: 0; }
  .box_itaku { margin: 30px auto 0; }
  .txt_itaku ul li ul { margin: 6px 0 0 22px; }
  .txt_itaku ul li ul li span.column_left { width: 217px; }
  .txt_itaku ul.first { margin: 0 0 20px; }
  .txt_itaku ul li span.column_right { padding: 0; }
  .img_itaku { max-width: 434px; width: 100%; text-align: center; }
  .insurance_02 { padding: 40px 22px 30px; }
  .insurance_02 h2 { padding: 0 0 10px; }
  .kyousai h3 { font-size: 22px; }
  .insurance_03 { padding: 40px 22px 50px; }
  .insurance_03 h2 { padding: 0 0 26px; line-height: 1.3; }
  .txt_shindan ul li span.column_left { display: flex; width: auto; }
  .img_shindan { max-width: 271px; width: 100%; margin: 0 auto; text-align: center; }
  .box_shindan { gap: 20px; }
}

@media only screen and (max-width: 768px) {
  .img_itaku img  { width: 80%; }
  .img_shindan img { width: 80%; }
}


/* ================================================================
   サブページ > 活動紹介（activities）
   ================================================================ */

.page_title h2.h2_activities { background-image: url(images/icon-activities-g.png); }

#page_activities { background-color: var(--color-bg-white); padding: 0; }

.activities_01 {
  position: relative;
  padding: 100px 0 20px;
}

.activities_01 h2 { padding: 0 0 46px; }

.bukai_cont { margin: 43px 0 92px; }

.bukai_box_white {
  max-width: 930px;
  width: 100%;
  background-color: var(--color-bg-white);
  padding: 50px;
  margin: 0 auto 60px;
}

.bukai_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
}

.txt_bukai { max-width: 450px; width: 100%; position: relative; }

.txt_bukai h3 {
  font-size: 30px;
  font-weight: bold;
  color: var(--color-primary);
  position: relative;
  padding: 0 0 19px;
  margin: 0 0 25px;
}

/* 見出し下線 */
.txt_bukai h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
}

.txt_bukai h4 { font-size: 20px; font-weight: bold; color: var(--color-text); padding: 0 0 12px; }

.katudou { margin: 15px 0 0; }

.img_bukai { max-width: 330px; width: 100%; height: auto; }

.activities_02 {
  position: relative;
  padding: 100px 0 80px;
}

.activities_02 h2 { padding: 0 0 46px; }

.iinkai_table { max-width: 685px; margin: 36px auto 0; }
.iinkai_table table.list_type th { width: 30%; }

.activities_img_box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin: 15px 0 0;
}

.activities_img { width: 25%; height: 100%; overflow: hidden; }

.activities_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media only screen and (max-width: 1240px) {
  .activities_01 { padding: 40px 22px 20px; }
  .activities_01 h2 { padding: 0 0 15px; }
  .bukai_cont { margin: 20px 0 50px; }
  .bukai_box_white { padding: 20px; margin: 0 auto 30px; }
  .txt_bukai h3 { font-size: 24px; }
  .activities_02 { padding: 40px 22px 50px; }
  .activities_02 h2 { padding: 0 0 15px; }
  .iinkai_table { margin: 10px auto 0; }
}

@media screen and (max-width: 767px) {
  .activities_img_box { height: auto; overflow: visible; margin: 0; }
  .activities_img { width: 50%; height: auto; }
  .activities_img img { height: auto; object-fit: contain; }
  .txt_bukai { max-width: unset; }
  .img_bukai { max-width: 330px; width: 100%; text-align: center; }
  .img_bukai img { width: 75%; height: auto; }
  .bukai_wrap { gap: 10px; }
  table.list_type tr { display: flex; flex-direction: column; }
  table.list_type th { width: 100%; }
  .iinkai_table table.list_type th { width: 100%; }
  .activities_02 { padding: 25px 22px 50px; }
}


/* ================================================================
   サブページ > 入会案内（membership）
   ================================================================ */

.page_title h2.h2_membership { background-image: url(images/icon-join-g.png); }

#page_membership { background-color: var(--color-bg-white); padding: 0; }
#page_membership h2 { padding: 0 0 46px; }

.membership_01 {
  position: relative;
  padding: 100px 0 84px;
}

.box_white h3 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  color: var(--color-text);
  padding: 0 0 20px;
}

.box_white:last-child h3 { padding: 0 0 52px; }

.membership_02 {
  position: relative;
  padding: 100px 0 90px;
}

.box_member {
  display: flex;
  flex-wrap: wrap;
  max-width: 920px;
  gap: 59px;
  margin: 35px auto 0;
}

p.font_24b { font-size: 24px; font-weight: bold; line-height: 1.67; padding: 0 0 19px; }

.membership_03 {
  position: relative;
  padding: 100px 0 54px;
}

.box_voice {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
  margin: 0 0 54px;
}

.box_voice:last-child { flex-direction: row-reverse; }

.txt_voice { max-width: 400px; }

.membership_04 {
  position: relative;
  padding: 100px 0 90px;
}

.membership_05 {
  position: relative;
  padding: 100px 0 110px;
}

.pdf_link { margin: 36px 0 28px; }

.hiyou {
  background-color: var(--color-bg-white);
  padding: 34px 60px 60px;
}

@media only screen and (max-width: 1240px) {
  #page_membership .catch_img { margin: 0; }
  .membership_01 { padding: 40px 22px 40px; }
  #page_membership h2 { padding: 0 0 38px; line-height: 1.2; }
  .box_white:last-child h3 { padding: 0 0 20px; }
  .membership_02 { padding: 40px 22px 50px; }
  .box_member { gap: 17px; margin: 5px auto 0; }
  .membership_03 { padding: 40px 22px 5px; }
  .membership_04 { padding: 45px 22px 24px; }
  .membership_05 { padding: 50px 22px; }
  .hiyou { padding: 24px 20px 2px; }
}


/* ================================================================
   サブページ > 広告・事業者情報（business-info）
   ================================================================ */

.page_title h2.h2_business-info { background-image: url(images/icon-ad-g.png); }

#page_business-info { background-color: var(--color-bg-white); padding: 0; }

#page_business-info .btn_basic { display: flex; justify-content: flex-end; margin: 41px 0 0; }

#page_business-info .catch_img { margin: 0 29px 0 0; }
#page_business-info .catch_img img { max-width: 411px; width: 100%; height: auto; }

.business_01 {
  position: relative;
  padding: 110px 0 80px;
}

.business_01 h3.green_belt { margin: 0 0 60px; }
.business_01 .box_white:last-child .number_title { padding: 0 0 54px; }

.business_02 {
  position: relative;
  padding: 100px 0 110px;
}

.business_02 h2 { padding: 0 0 46px; }

.entry_txt_wrap {
  display: flex;
  flex-wrap: wrap;
  max-width: 1018px;
  margin: 0 auto 26px;
}

.entry_txt_wrap .circle_number { font-size: 24px; font-weight: bold; margin: 5px 16px 0 0; }

.entry_txt { font-size: 24px; font-weight: bold; }

.inn_p {
  font-size: var(--font-size-base);
  font-weight: normal;
  line-height: var(--line-height-text);
  text-align: left;
  color: var(--color-text);
}

.entry_btn_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  justify-content: center;
}

#page_business-info .btn_basic.height_90 { justify-content: center; margin: 41px 0 0; }

@media only screen and (max-width: 1240px) {
  #page_business-info .btn_basic { justify-content: center; margin: 0 0 13px; }
  .business_01 { padding: 50px 22px 30px; }
  .business_01 h3.green_belt { margin: 0 0 30px; }
  .business_02 { padding: 40px 22px 54px; }
  .entry_txt_wrap { flex-wrap: nowrap; }
  .entry_txt { line-height: 1.25; }
  .inn_p { padding: 16px 0 0; display: block; }
  #page_business-info .btn_basic.height_90 { margin: 0; }
  .entry_btn_wrap { gap: 30px; }
}


/* ================================================================
   地域向け > 業者検索（search-index）
   ================================================================ */

.page_title h2.h2_search-index { background-image: url(images/icon-search-y.png); }

#page_search-index { background-color: var(--color-bg-white); padding: 0; }

#title_image_bg.search_bg { background-image: url(images/11_search.jpg); }

.title_search {
  position: absolute;
  top: 100px;
  z-index: 110;
}

.box_search { padding: 110px 0 30px; position: relative; }

.search_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.search_link {
  width: 33.3%;
  height: 200px;
  margin: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 3px solid var(--color-primary-pale);
}

.search_03 { border-right: 3px solid var(--color-primary-pale); }
.search_05 { border-right: 3px solid var(--color-primary-pale); }

.search_link a {
  display: flex;
  width: 60%;
  height: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: var(--color-text);
  line-height: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.search_link a:hover { color: var(--color-text-hover); transition: color var(--transition); }
.search_link img { width: fit-content; }

.link_txt { display: block; padding: 25px 0 0; }

/* サブ検索リスト */
.sub_search {
  padding: 110px 0 106px;
  border-bottom: none;
}

.sub_search .search_03 { border-right: none; }

.sub_search .search_link {
  min-width: 110px;
  width: 20%;
  height: 120px;
  margin: 0;
  border-left: 2px solid var(--color-primary-pale);
}

.sub_search .search_05 { border-right: 2px solid var(--color-primary-pale); }
.sub_search .search_link a { width: 80%; font-size: 20px; }
.sub_search .link_txt { padding: 16px 0 0; }

/* 検索結果エリア */
.search_cont { padding: 0 0 90px; }
.search_cont h2 { color: var(--color-text); margin: 0 0 70px; }

.search_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
}

.search_core { max-width: 590px; width: 100%; margin: 0 0 5px; }

.search_cont .search_core h2 {
  font-size: clamp(24px, calc(24px + (36 - 24) * ((100vw - 375px) / (1240 - 375))), 36px);
  text-align: left;
  border-bottom: 4px solid var(--color-primary);
  padding: 0 0 22px;
  margin: 0 0 40px;
}

.search_core_img {
  position: relative;
  margin: 0 0 30px;
}

/* 外部リンクアイコン */
.search_core_img::after {
  content: "";
  position: absolute;
  width: 35px;
  height: 35px;
  background: url(images/external-link.png) no-repeat;
  text-indent: -9999px;
  bottom: 10px;
  right: 10px;
}

.search_core_img img { display: block; max-width: 590px; width: 100%; height: auto; }
.search_core_txt { margin: 0 0 10px; }

.search_core_txt h3 {
  font-size: clamp(20px, calc(20px + (26 - 20) * ((100vw - 375px) / (1240 - 375))), 26px);
  font-weight: bold;
  line-height: 1.38;
  min-height: 92px;
  word-break: normal;
}

.search_core table.basic tr { gap: 20px; }
.search_core table.basic th { padding: 15px 10px; vertical-align: top; }
.search_core table.basic td { padding: 15px 10px; vertical-align: top; }
.search_core table.basic a { color: var(--color-text); text-decoration: none; }
.search_core table.basic a:hover { color: var(--color-text-hover); transition: color var(--transition); }

@media only screen and (max-width: 1240px) {
  #title_image_bg.search_bg { background-position: 70% 50%; }
  #title_image_bg.search_bg .title_search { top: 25px; left: 7%; }
  .box_search { padding: 50px 0 0; }
  .search_list { flex-direction: column; align-items: center; }
  .search_link { width: 100%; height: auto; margin: 0 0 55px; border-left: none; }
  .link_txt { padding: 23px 0 0; font-size: 24px; }
  .search_03, .search_05 { border-right: none; }
  .box_search.sub_search { padding: 50px 22px 20px; }
  .sub_search .search_list { flex-direction: revert; }
  .sub_search .search_link img { max-width: 60px; height: auto; }
  .sub_search .link_txt { padding: 13px 0 0; font-size: 14px; word-break: auto-phrase; }
  .search_cont { padding: 0 22px 5px; }
  .search_cont h2 { margin: 0 0 30px; }
  .search_wrap { gap: 10px; justify-content: center; }
  .search_cont .search_core h2 { padding: 0 0 17px; margin: 0 0 30px; }
  .search_core_txt h3 { min-height: revert; padding: 0 0 20px; }
  .search_core table.basic tr { gap: 0; }
  .search_core table.basic th { padding: 0; }
  .search_core table.basic td { padding: 6px 0 25px; word-break: break-all; }
}

@media only screen and (max-width: 768px) {
  .page_title h2.h2_search-index { word-break: normal; }
  .sub_search .search_link { margin: 0 0 20px; }
  .sub_search .search_03 { border-right: 2px solid var(--color-primary-pale); }
  .sub_search .search_04 { margin-left: -2px; }
}


/* ================================================================
   地域向け > リフォーム（reform）
   ================================================================ */

.page_title h2.h2_reform {
  background-image: url(images/icon-reform-y.png);
  color: var(--color-text);
}

#title_image_bg.reform_bg { background-image: url(images/12_reform.jpg); }

.title_reform {
  position: absolute;
  top: 198px;
  z-index: 110;
}

.bg_orange { background-color: #fdf5e8; }

.reform_01 {
  position: relative;
  padding: 100px 0 80px;
}

.reform_01 h2 { padding: 0 0 46px; color: var(--color-accent); }

.reform_wrap_1 { margin: 66px 0 85px; position: relative; }

/* セクション見出し帯（オレンジ） */
h3.orange_belt {
  font-size: clamp(22px, calc(22px + (30 - 22) * ((100vw - 375px) / (1240 - 375))), 30px);
  font-weight: bold;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-accent);
  padding: 10px 0 12px;
  margin: 0 0 60px;
}

.point_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 70px;
  margin: 0 0 60px;
}

.box_point {
  max-width: 585px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.txt_point { max-width: 399px; }

.txt_point h4 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.33;
  text-align: left;
  color: var(--color-accent);
  padding: 0 0 20px;
}

.hojyo_wrap {
  background-color: var(--color-bg-white);
  padding: 36px 60px 60px;
  margin: 10px 0 90px;
}

.hojyo_wrap table.basic { margin: 0; }
.hojyo_wrap table.basic th { border-bottom: 2px solid var(--color-accent); }
.hojyo_wrap table.basic td { line-height: 1.67; border-bottom: 2px solid var(--color-accent-pale); }

.keisan_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 70px;
}

.txt_keisan_m {
  font-size: clamp(18px, calc(18px + (20 - 18) * ((100vw - 375px) / (1240 - 375))), 20px);
  font-weight: bold;
}

.txt_keisan_l {
  font-size: clamp(20px, calc(20px + (28 - 20) * ((100vw - 375px) / (1240 - 375))), 28px);
  font-weight: bold;
  padding: 0 0 20px;
}

.img_keisan img { max-width: 320px; width: 100%; height: auto; }

.reform_02 {
  position: relative;
  padding: 100px 0 90px;
}

.reform_02 h2 { padding: 0 0 41px; color: var(--color-accent); }

.flow_important {
  font-size: clamp(20px, calc(20px + (24 - 20) * ((100vw - 375px) / (1240 - 375))), 24px);
  font-weight: bold;
  padding: 0;
  margin: 0 0 60px;
  text-align: center;
}

.step_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0 0 53px;
}

.box_step {
  max-width: 225.55px;
  background-color: var(--color-accent-step);
  padding: 18px;
}

.step_count {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-text);
  line-height: 30px;
  margin: 0 0 22px;
}

.step_txt {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  color: var(--color-text);
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 15px;
}

.box_step p { padding: 0; }

.download_wrap { margin: 65px 0 0; }

.download_wrap h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: var(--color-text);
  margin: 0 0 52px;
}

.box_download {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 750px;
  margin: 0 auto 17px;
}

.box_download p { font-size: 18px; font-weight: 500; text-align: left; color: var(--color-text); padding: 0; }

.btn_download a {
  display: block;
  width: 140px;
  height: 30px;
  background-color: var(--color-accent);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: var(--color-white);
  transition: all var(--transition);
}

.btn_download a:hover { background-color: var(--color-accent-hover); }

@media only screen and (max-width: 1240px) {
  .page_title h2.h2_reform { word-break: normal; }
  #title_image_bg { height: 300px; }
  .title_reform { top: 23px; left: 10%; }
  .reform_01 { padding: 40px 22px 50px; }
  .reform_01 h2 { padding: 0 0 20px; word-break: normal; line-height: 1.25; }
  .reform_wrap_1 { margin: 20px 0 0; }
  .box_point { gap: 20px; justify-content: center; }
  .point_wrap { gap: 30px; margin: 0 0 20px; }
  .reform_01 h3.orange_belt { margin: 0 0 25px; }
  .hojyo_wrap { padding: 20px 20px 10px; margin: 10px 0 30px; }
  .hojyo_wrap table.basic th { border-bottom: none; }
  .hojyo_wrap table.basic td { border-bottom: 2px solid var(--color-accent); }
  .keisan_wrap { gap: 20px; }
  .reform_02 { padding: 40px 22px 50px; }
  .step_wrap { justify-content: center; }
}

@media only screen and (max-width: 768px) {
  #title_image_bg.reform_bg {
    background-image: url(images/12_reform_768.jpg);
    background-position: 50% 79%;
  }
  .title_reform { top: 23px; left: 50%; margin-left: -165px; }
  .img_keisan { max-width: 320px; width: 100%; text-align: center; }
  .img_keisan img { width: 80%; }
  .box_step { max-width: 330px; }
  .step_txt { height: auto; margin: 0 0 8px; }
  .step_count { margin: 0 0 15px; }
  .download_wrap { margin: 6px 0 0; }
  .download_wrap h3 { margin: 0 0 20px; }
  .box_download p { font-size: var(--font-size-base); line-height: 1.38; padding: 0 0 6px; }
  .box_download { flex-wrap: nowrap; gap: 20px; align-items: center; }
  .btn_download a { width: 100px; height: 38px; font-size: 14px; padding: 7px 0 0; }
}


/* ================================================================
   地域向け > 紹介マップ（introduction-map）
   ================================================================ */

.page_title h2.h2_introduction-map {
  background-image: url(images/icon-map-y.png);
  color: var(--color-text);
}

#title_image_bg.intro_bg { background-image: url(images/13_introduction_map.jpg); }

.title_intro {
  position: absolute;
  top: 96px;
  z-index: 110;
}

.intro_01 {
  position: relative;
  padding: 100px 0 105px;
}

.intro_01 h2 { padding: 0 0 46px; color: var(--color-accent); }

.map_1 { margin: 43px 0 53px; }
.map_2,
.map_3 { margin: 53px 0 0; }

.map_1 img,
.map_2 img,
.map_3 img { max-width: 1240px; width: 100%; height: auto; }

@media only screen and (max-width: 1240px) {
  .title_intro { top: 36px; left: 50%; margin-left: -165px; }
  .intro_01 { padding: 40px 22px 50px; }
  .intro_01 h2 { padding: 0 0 15px; }
  .map_1 { margin: 20px 0 0; }
  .map_2,
  .map_3 { margin: 30px 0 0; }
}


/* ================================================================
   地域向け > 日の出カード（hinode-card）
   ================================================================ */

.page_title h2.h2_hinode-card {
  background-image: url(images/icon-point-y.png);
  color: var(--color-text);
}

#title_image_bg.card_bg { background-image: url(images/14_hinode_card.jpg); }

.title_card {
  position: absolute;
  top: 73px;
  left: 50%;
  margin-left: -230px;
  z-index: 110;
}

.card_01 {
  position: relative;
  padding: 100px 0 105px;
}

.card_01 h2 { padding: 0 0 50px; color: var(--color-accent); }
.card_01 .step_wrap { margin: 0 0 60px; }

.card_container { max-width: 734px; margin: 0 auto; }

.coco_wrap {
  background-color: var(--color-bg-white);
  border: 3px solid #fcca0d;
  padding: 8px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
}

.coco_l {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: var(--color-accent);
}

.coco_r { font-size: var(--font-size-base); line-height: var(--line-height-text); text-align: left; width: 490px; }

.coco_guide {
  margin: 57px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
}

.txt_coco { width: 540px; }

.txt_large {
  font-size: clamp(22px, calc(22px + (24 - 22) * ((100vw - 375px) / (1240 - 375))), 24px);
  font-weight: bold;
  padding: 0 0 15px;
}

.coco_guide p { padding: 0 0 45px; }

.card_02 {
  position: relative;
  padding: 100px 0 105px;
}

.card_02 h2 { padding: 0 0 50px; color: var(--color-primary) !important; }

.merit_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 90px;
  margin: 37px 0 0;
}

.merit_txt h3 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
  text-align: left;
  color: var(--color-primary);
  padding: 0 0 24px;
}

.img_card img { max-width: 497px; width: 100%; height: auto; }

@media only screen and (max-width: 1240px) {
  .title_card { top: 19px; left: 50%; margin-left: -165px; }
  .card_01 { padding: 40px 0 30px; }
  .card_01 h2 { padding: 0 0 25px; }
  .card_01 .step_wrap { margin: 0 0 40px; }
  .coco_wrap { margin: 0 22px; gap: 6px; justify-content: center; }
  .coco_guide { margin: 35px 0 0; gap: 0; padding: 0 22px; }
  .coco_guide p { padding: 0 0 20px; }
  .img_coco { display: none; }
  .card_02 { padding: 40px 22px 50px; }
  .card_02 h2 { padding: 0 0 26px; line-height: 1.3; }
  .merit_wrap { gap: 20px; margin: 20px 0 0; }
}

@media only screen and (max-width: 768px) {
  #title_image_bg.card_bg { background-image: url(images/14_hinode_card_768.jpg); }
}


/* ================================================================
   お知らせ 一覧・詳細（news）
   ================================================================ */

.page_title h2.h2_post { background-image: url(images/icon-news-g.png); }

#news { padding: 105px 0 110px; }

/* カテゴリフィルターリンク */
.news_link { margin: 0 0 105px; }

.news_link ul {
  display: flex;
  flex-wrap: wrap;
  gap: 57px;
  list-style: none;
  justify-content: center;
}

.news_link ul li { position: relative; }

.news_link ul li a {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text);
  transition: all var(--transition);
}

/* アンダーラインアニメーション */
.news_link ul li a::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 4px;
  background-color: var(--color-primary);
  transition: all var(--transition);
}

.news_link ul li a:hover,
.news_link ul li a.current {
  color: var(--color-primary);
}

.news_link ul li a:hover::after,
.news_link ul li a.current::after {
  width: 100%;
}

/* アーカイブリスト */
#news .news_archive_list {
  display: flex;
  flex-wrap: wrap;
  gap: 60px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#news .news_archive_list li {
  width: calc((100% - 56px) / 3);
  list-style: none;
}

/* ページネーション */
.wp-pagenavi { text-align: center; margin: 90px 0 30px; }

.wp-pagenavi a:hover,
.wp-pagenavi span.current {
  border-color: #009e96 !important;
  background-color: #009e96;
  color: var(--color-white);
}

.wp-pagenavi a,
.wp-pagenavi span {
  text-decoration: none !important;
  border: 1px solid var(--color-text) !important;
  color: var(--color-text);
}

/* 記事詳細 */
.news_post { max-width: 1024px; margin: 0 auto; }

.time_cat {
  border-bottom: 4px solid var(--color-text);
  padding: 0 0 40px;
  margin: 0 0 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.news_post h2 {
  font-size: clamp(24px, calc(24px + (30 - 24) * ((100vw - 375px) / (1240 - 375))), 30px);
  font-weight: bold;
  line-height: 1.33;
  text-align: justify;
  color: var(--color-text);
  padding: 0 0 45px;
}

.news_thumbnail { margin: 0 0 40px; }
.news_thumbnail img { max-width: 1024px; width: 100%; height: auto; }

.news_content { margin: 0 0 110px; }

/* ← 一覧へ戻るボタン */
.news_post .btn_basic a { padding: 0 16px 0 0; }
.news_post .btn_basic a::before { content: '←'; position: relative; left: -70px; }
.news_post .btn_basic a::after  { content: none; }

@media only screen and (max-width: 1240px) {
  #news { padding: 45px 22px 50px; }
  .news_link { margin: 0 0 40px; }
  .news_link ul { gap: 30px; }
  .time_cat { padding: 0 0 25px; }
}

@media only screen and (max-width: 768px) {
  #news .news_archive_list { justify-content: center; gap: 40px 28px; }
  #news .news_archive_list li { width: calc((100% - 56px) / 2); }
}

@media only screen and (max-width: 618px) {
  #news .news_archive_list li { min-width: 340px; width: 100%; }
  .news_card_title { font-size: var(--font-size-base); min-height: auto; }
}


/* ================================================================
   サブページ > グリーンプラザ詳細
   ================================================================ */

.page_title h2.h2_green-plaza { background-image: url(images/icon-green-plaza-g.png); }

#page_green-plaza .catch_img { padding: 0 43px 0 0; }

.plaza_01 {
  position: relative;
  padding: 45px 0 50px;
}

.mainimg_plaza { text-align: center; margin: 0 0 60px; }
.mainimg_plaza img { max-width: 1024px; width: 100%; height: auto; }

.box_gaiyou {
  background-color: var(--color-bg-green);
  padding: 30px;
  margin: 0 0 55px;
}

.box_gaiyou p { line-height: 1.5; padding: 0; }

.wrap_gaiyou {
  display: flex;
  flex-wrap: wrap;
  gap: 33px;
  margin: 0 0 25px;
}

.gaiyou { max-width: 270px; }
.gaiyou_img { margin: 0 0 23px; }

.gaiyou_txt {
  position: relative;
  height: 294px;
}

.gaiyou_txt p { line-height: 1.5; padding: 0 0 25px; }

.gaiyou_txt_obi_1 {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  height: 30px;
  padding: 0;
  margin: 0 0 17px;
}

.gaiyou_txt_obi_2 {
  background-color: #d4e8e8;
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: bold;
  text-align: center;
  height: 30px;
  padding: 2px 0;
  position: absolute;
  width: 100%;
  bottom: 0;
}

.plaza_01 h3 { line-height: 1.25; color: var(--color-white); padding: 16px 0; }

.plaza_01 h4 {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-primary);
  line-height: 1.5;
  padding: 0 0 17px;
}

.gaiyou_other { margin: 0 0 40px; }
.gaiyou_other p { padding: 0 0 5px; }
.gaiyou_table { margin: 0 0 66px; }
.plaza_01 .gaiyou_table h3 { padding: 0; }

@media only screen and (max-width: 1240px) {
  #page_green-plaza .catch_img { padding: 0; }
  .plaza_01 { padding: 0 22px 10px; }
  .mainimg_plaza { margin: 0 0 30px; }
  .plaza_01 h3 { padding: 11px 0; }
  .wrap_gaiyou { justify-content: center; }
  .gaiyou_img { margin: 0 0 15px; }
  .gaiyou_table { margin: 0 0 20px; }
}


/* ================================================================
   サブページ > アクセス（access）
   ================================================================ */

.page_title h2.h2_access { background-image: url(images/icon-access-g.png); }

#page_access { padding: 0 0 110px; }

.access_01 { padding: 105px 0 0; position: relative; }

.gmap {
  width: 100%;
  max-width: 1024px;
  margin: 120px auto 0;
}

.gmap iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 800;
}

@media only screen and (max-width: 1240px) {
  .page_title h2.h2_access { word-break: normal; }
  .access_01 { padding: 50px 22px 0; }
  .gmap { margin: 20px auto 0; }
  #page_access { padding: 0 0 50px; }
}


/* ================================================================
   サブページ > リンク集（links）
   ================================================================ */

.page_title h2.h2_links { background-image: url(images/icon-link-g.png); }

#page_links { padding: 0 0 110px; }

.links_01 { padding: 105px 0 0; position: relative; }

.links_01 h3 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
  color: var(--color-primary);
  padding: 0 0 24px;
}

.box_links { margin: 0 0 39px; }
.box_links a { color: var(--color-text); text-decoration: none; }
.box_links a:hover { color: var(--color-text-hover); transition: color var(--transition); }
.box_links_txt { margin: 0 0 9px; }
.box_links_txt span.font_b { font-weight: bold; display: inline-block; padding: 0 0 8px; }

@media only screen and (max-width: 1240px) {
  .page_title h2.h2_links { word-break: normal; }
  .links_01 { padding: 44px 22px 0; }
  .links_01 h3 { font-size: 22px; padding: 0 0 20px; word-break: normal; }
  .box_links { margin: 0 0 15px; }
  #page_links { padding: 0 0 40px; }
}


/* ================================================================
   サブページ > プライバシーポリシー（privacy-policy）
   ================================================================ */

.page_title h2.h2_privacy-policy { background-image: url(images/icon-privacy-g.png); }

#page_privacy-policy { padding: 0 0 70px; }

.policy_01 { padding: 105px 0 0; position: relative; }

.box_policy { margin: 30px 0; }

.box_policy h3 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.67;
  text-align: justify;
  color: var(--color-text);
  padding: 0 0 12px;
}

/* 番号付きリスト（カスタム） */
.box_policy ol.modern-list {
  list-style: none;
  counter-reset: num;
  padding-left: 0;
}

.box_policy ol.modern-list li {
  counter-increment: num;
  position: relative;
  padding-left: 20px;
  margin-bottom: 0;
  line-height: var(--line-height-text);
}

.box_policy ol.modern-list li::before {
  content: counter(num);
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-text);
  color: var(--color-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

@media only screen and (max-width: 1240px) {
  .policy_01 { padding: 40px 22px 0; }
  .box_policy { margin: 20px 0; }
  #page_privacy-policy { padding: 0 0 35px; }
}


/* ================================================================
   サブページ > 基本方針（basic-policy）
   ================================================================ */

.page_title h2.h2_basic-policy { background-image: url(images/icon-security-g.png); }

#page_basic-policy { padding: 0 0 70px; }

.basic_01 { padding: 105px 0 0; position: relative; }

.basic_01 p { padding: 0 0 50px; }

.basic_01 p.basic_p {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.67;
  text-align: left;
}

@media only screen and (max-width: 1240px) {
  .page_title h2.h2_basic-policy { word-break: normal; }
  .basic_01 { padding: 35px 22px 0; }
  .basic_01 p { padding: 0 0 30px; }
  #page_basic-policy { padding: 0 0 25px; }
}