/*
 * design-a-modern.css
 * KnowDo job_seeker — クリーンカード デザインオーバーライド
 *
 * 適用方法: header.php の既存 <link> タグ群の末尾に以下を追加
 *   <link rel="stylesheet" media="all" href="<?php echo base_url('assets/zzzdemo-jobseeker') ?>/css/design-a-modern.css">
 *
 * ルール: PHP・JS・HTML テンプレート変更なし。CSS のみ。
 */

/* ============================================================
   1. CSS 変数（カラーパレット）
   ============================================================ */
:root {
  --brand:       #30B1A5;
  --brand-dark:  #1d8c82;
  --brand-light: #f0faf9;
  --brand-pale:  #e6f7f6;
  --text-main:   #1a202c;
  --text-sub:    #718096;
  --text-mute:   #a0aec0;
  --border:      #e8edf3;
  --bg-page:     #f0f4f8;
  --bg-card:     #ffffff;
  --shadow-sm:   0 2px 10px rgba(0,0,0,0.06);
  --shadow-hover:0 8px 28px rgba(48,177,165,0.16);
  --radius-card: 14px;
  --radius-tag:  6px;
  --radius-btn:  10px;
}

/* ============================================================
   2. ページ背景
   ============================================================ */
body {
  background-color: var(--bg-page) !important;
}

#contents {
  background-color: var(--bg-page) !important;
}

/* ============================================================
   3. ヘッダー
   ============================================================ */
header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  padding: 0 !important;
  height: 68px !important;
  overflow: hidden !important;
}

/* header .inner を flex 化して縦横揃えを制御
   - padding 上下を 0 にすることで header 自身の padding:15px のみが効き、
     #header-links { top:15px } と同じ基準位置になり上下中央が揃う */
header .inner {
  max-width: none !important;
  padding: 0 24px !important;
  height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
}

/* ロゴ
   - width: 25% = one.fourth 列と同幅 → 検索フォーム列の中心に水平位置を合わせる
   - justify-content: center で画像を左右中央寄せ
   - align-items: center + flex で縦中央揃え（ナビ項目の上下中心と一致） */
header p.logo {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

header ._logo {
  height: 50px !important;
  width: auto !important;
}

/* 「トップ」非表示
   ロゴ（header.php:239）が同じ base_url() にリンクしているため重複
   未ログイン時はロゴが '#' になるが、そのケースでもナビ全体が非表示になるため問題なし */
#header-links ul.pc li:first-child {
  display: none !important;
}

/* 「ログアウト」非表示（フッターに同一リンクあり・重複のため） */
#header-links ul.pc li:has(> a.button.btn-dark) {
  display: none !important;
}

/* ナビリンクのアイコン（icon-angle-right）非表示 */
#header-links ul.pc li a i[class*="icon-angle"] {
  display: none !important;
}

/* #header-links レイアウト — absolute を解除して flex に参加させる */
#header-links {
  position: static !important;
  margin-left: 0 !important;
}

#header-links ul.pc {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#header-links ul.pc li {
  margin: 0 !important;
}

/* PC ナビリンク */
#header-links ul.pc li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--text-sub) !important;
  text-decoration: none !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  transition: color 0.15s, background 0.15s !important;
}
#header-links ul.pc li a:hover {
  color: var(--brand) !important;
  background: var(--brand-light) !important;
}

/* ボタン内アイコン（icon-comment 等）をテキストと揃える */
#header-links ul.pc li a i[class*="icon-"] {
  font-size: 1.4rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* ボタン li の間隔を広げる */
#header-links ul.pc li:has(> a.button) {
  margin-left: 8px !important;
}

/* ===== ヘッダーボタン共通（ステータス管理・メッセージ・コンテンツ） ===== */
#header-links ul.pc li a.button.blue,
#header-links ul.pc li a.button.orange,
#header-links ul.pc li a.button.green {
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 1.4rem !important;
  padding: 8px 18px !important;
  line-height: 1 !important;
}

/* ホバー時: ボタン背景をブランドグリーンに統一、文字は白を維持 */
#header-links ul.pc li a.button.blue:hover,
#header-links ul.pc li a.button.orange:hover,
#header-links ul.pc li a.button.green:hover {
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #fff !important;
}

/* ステータス管理（blue）個別設定 */
#header-links ul.pc li a.button.blue {
  background: var(--brand) !important;
  border-color: var(--brand-dark) !important;
}

/* ============================================================
   4. セクション基本枠（.sec-basic）
   ============================================================ */
.sec-basic {
  background: transparent !important;
  /* header .inner と max-width・padding を揃えることで
     p.logo の width:25% がコンテンツ列の25%と一致する */
  max-width: 1100px !important;
  padding: 24px 24px !important;
  margin: 0 auto !important;
}

/* ページタイトル */
.sub-tit h2 {
  font-size: 1.875rem !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  border-bottom: 2px solid var(--brand) !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
}

/* ============================================================
   5. 求人カード（.kyujin）
   ============================================================ */
.kyujin {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  position: relative !important;
}

.kyujin:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--brand) !important;
}

/* ============================================================
   6. 求人画像（.kyujin-img）
   ============================================================ */
.kyujin-img {
  width: 100% !important;
  height: 180px !important;
  background-size: cover !important;
  background-position: center center !important;
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
  overflow: hidden !important;
}

.kyujin-img:hover {
  opacity: 0.85 !important;
}

/* ============================================================
   7. 求人タイトル（.kyujin h2）
   ============================================================ */
.kyujin h2 {
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  line-height: 1.55 !important;
  padding: 20px 24px 10px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ============================================================
   8. 企業名（.sub-tit h6）
   ============================================================ */
.kyujin .sub-tit {
  padding: 10px 22px 4px !important;
}

.kyujin .sub-tit h6 {
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--text-sub) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 企業ロゴ */
.kyujin .sub-tit .comlogo {
  height: 24px !important;
  width: auto !important;
  border-radius: 4px !important;
  object-fit: contain !important;
}

/* ============================================================
   9. タグセクション（.tags-chosho）
   ============================================================ */
.kyujin .tags-chosho {
  padding: 12px 22px !important;
  background-color: #fff !important;  /* inline style を上書き */
  border-top: 1px solid #f3f5f8 !important;
}

.kyujin .tags-chosho:last-child {
  padding-bottom: 18px !important;
  border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
}

/* ============================================================
   9-A. エリア + 働き方 横並びラッパー（.tags-chosho-pair）
   - PC: 2列 flex で右隣に並べる
   - モバイル: 縦積みに fallback
   ============================================================ */
.kyujin .tags-chosho-pair {
  display: flex !important;
  border-top: 1px solid #f3f5f8 !important;
}

/* ペア内の各 tags-chosho は border-top を持たない（pair が担う） */
.kyujin .tags-chosho-pair .tags-chosho {
  flex: 1 !important;
  border-top: none !important;
  border-left: 1px solid #f3f5f8 !important;
}

.kyujin .tags-chosho-pair .tags-chosho:first-child {
  border-left: none !important;
}

/* ペア全体が :last-child のとき（カードの最後）に角丸を付ける */
.kyujin .tags-chosho-pair:last-child .tags-chosho:first-child {
  border-radius: 0 0 0 var(--radius-card) !important;
}
.kyujin .tags-chosho-pair:last-child .tags-chosho:last-child {
  border-radius: 0 0 var(--radius-card) 0 !important;
}

@media only screen and (max-width: 767px) {
  .kyujin .tags-chosho-pair {
    flex-direction: column !important;
  }
  .kyujin .tags-chosho-pair .tags-chosho {
    border-left: none !important;
    border-top: 1px solid #f3f5f8 !important;
  }
  .kyujin .tags-chosho-pair .tags-chosho:first-child {
    border-top: none !important;
  }
  .kyujin .tags-chosho-pair:last-child .tags-chosho:first-child {
    border-radius: 0 !important;
  }
  .kyujin .tags-chosho-pair:last-child .tags-chosho:last-child {
    border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
  }
}

/* ============================================================
   10. セクションラベル（.tags-kyujin）
   ============================================================ */
.kyujin .tags-kyujin {
  display: inline-block !important;
  background-color: var(--brand-light) !important;
  color: var(--brand-dark) !important;
  border: 1px solid var(--brand) !important;
  border-radius: 20px !important;
  padding: 5px 16px !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  margin: 0 0 8px 0 !important;
  cursor: default !important;
}

.kyujin .tags-kyujin:hover {
  opacity: 1 !important;
  cursor: default !important;
}

/* ============================================================
   11. タグアイテム（a[rel="tag"]）
   ============================================================ */
.kyujin .tags-chosho a,
.kyujin .tag-result a {
  display: inline-block !important;
  background-color: #f7fafc !important;
  color: #4a5568 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-tag) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  margin-right: 6px !important;
  margin-bottom: 6px !important;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}

.kyujin .tags-chosho a:hover,
.kyujin .tag-result a:hover {
  background-color: var(--brand-light) !important;
  border-color: var(--brand) !important;
  color: var(--brand-dark) !important;
}

/* マッチタグ（おすすめ時のオレンジハイライト）は維持 */
.kyujin .tags-chosho a.message.alert.orange,
.kyujin .tag-result a.message.alert.orange {
  background-color: #fff3e0 !important;
  border-color: #fb8c00 !important;
  color: #e65100 !important;
}

/* ============================================================
   12. CTA ボタン（詳細・応募はこちら）
   ============================================================ */
.kyujin button.asphalt,
.kyujin .button.asphalt,
.kyujin a.button.asphalt {
  background-color: var(--brand) !important;
  border-color: var(--brand-dark) !important;
  color: #ffffff !important;
  border-radius: var(--radius-btn) !important;
  font-weight: 700 !important;
  font-size: 1.55rem !important;
  padding: 16px 32px !important;
  width: 100% !important;
  letter-spacing: 0.05em !important;
  transition: background-color 0.15s, box-shadow 0.15s !important;
  margin-top: 6px !important;
  box-shadow: 0 3px 10px rgba(48,177,165,0.35) !important;
}

.kyujin button.asphalt:hover,
.kyujin .button.asphalt:hover,
.kyujin a.button.asphalt:hover {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 16px rgba(29,140,130,0.45) !important;
}

/* ============================================================
   13. 本文テキスト（descriptions）
   ============================================================ */
.kyujin .tags-chosho p {
  font-size: 1.35rem !important;
  color: var(--text-sub) !important;
  line-height: 1.7 !important;
  margin-top: 6px !important;
}

/* ============================================================
   14. メッセージ共通（件数・未公認アラート・データなし）
   --- 共通変数 ---
     font-size    : 1.4rem (= 14px, html{font-size:10px} 基準)
     padding-left : 38px  (left:10px + icon~14px + gap)
     ::before left: 10px / top:50% / margin-top:-0.7em (icon高さの半分)
   ============================================================ */

/* ── 共通 ::before アイコン位置・サイズ ── */
p.info.message.small::before,
div.alert.message::before,
div.error.message::before {
  left: 10px !important;
  top: 50% !important;
  margin-top: -0.7em !important;
  padding: 0 !important;
  font-size: 1.4rem !important;
}

/* ── 件数表示（list_part.php:43） ── */
p.info.message.small {
  font-size: 1.4rem !important;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
  color: var(--text-sub) !important;
  background: var(--brand-pale) !important;
  border: 1px solid #b2ebe4 !important;
  border-radius: 8px !important;
  padding: 8px 16px 8px 38px !important;
  margin-bottom: 16px !important;
  position: relative !important;
}
p.info.message.small::before {
  color: var(--brand) !important;
}
p.info.message.small .red,
p.info.message.small strong.red {
  color: var(--brand-dark) !important;
  font-weight: 800 !important;
}

/* ── 未公認アラート（list_part.php:31 — authorize == JOB_AUTHORIZE[0]） ── */
div.alert.message {
  font-size: 1.4rem !important;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
  border-radius: 8px !important;
  padding: 10px 16px 10px 38px !important;
  margin-bottom: 16px !important;
  line-height: 1.6 !important;
  position: relative !important;
}

/* ── データなし（list_part.php:225 — $datas が空のとき） ── */
div.error.message {
  font-size: 1.4rem !important;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
  border-radius: 8px !important;
  padding: 10px 16px 10px 38px !important;
  margin-bottom: 16px !important;
  line-height: 1.6 !important;
  position: relative !important;
}

/* ============================================================
   15. ページネーション（.paging-box）
   ============================================================ */
.paging-box {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 18px 0 !important;
}

.paging-box a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  background: #fff !important;
  color: var(--text-sub) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 1.3rem !important;
  text-decoration: none !important;
  transition: border-color 0.15s, background 0.15s, color 0.15s !important;
}

.paging-box a.button:hover {
  background: var(--brand-light) !important;
  border-color: var(--brand) !important;
  color: var(--brand-dark) !important;
}

.paging-box a.button.selected {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}

.paging-box a.button[disabled] {
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/* ============================================================
   16. 左メニュー（検索フォームラッパー）
   ============================================================ */
#left-menu {
  padding-right: 16px !important;
}

.left-inner {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
  padding: 0 !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
}

/* フォーム内の「検索条件」見出し */
.left-inner > form > p strong,
#Job-Search-Form > p strong {
  display: block !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  color: var(--text-mute) !important;
  padding: 14px 18px 10px !important;
  border-bottom: 1px solid var(--border) !important;
  margin: 0 !important;
}

/* フリーワード入力 */
#Job-Search-Form input[type="text"] {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 1.4rem !important;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
  color: var(--text-main) !important;
  background: white !important;
  outline: none !important;
  transition: border-color 0.15s !important;
  box-sizing: border-box !important;
}
#Job-Search-Form input[type="text"]:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(48,177,165,0.12) !important;
}

/* 検索ボタン（虫眼鏡画像をラップするaタグ） */
#Job-Search-Form > a {
  display: block !important;
  margin: 8px 18px 0 !important;
}
#Job-Search-Form > a img {
  width: 100% !important;
  height: 44px !important;   /* 入力欄の高さ(font 1.4rem + padding)に揃える */
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 8px !important;
  opacity: 0.9 !important;
  transition: opacity 0.15s !important;
}
#Job-Search-Form > a:hover img {
  opacity: 1 !important;
}

/* フリーワードエリア全体のパディング */
#Job-Search-Form > label:first-of-type {
  display: block !important;
  padding: 14px 18px 0 !important;
}

/* ============================================================
   16-A. 検索フォーム内部（#search-form）
   ============================================================ */
#search-form {
  padding: 0 !important;
}

/* 各検索ブロック（gap-bottom cf） */
#search-form > div.gap-bottom {
  border-bottom: 1px solid var(--border) !important;
  padding: 0 !important;
  margin: 0 !important;
}
#search-form > div.triple-gap-bottom {
  border-bottom: 1px solid var(--border) !important;
  padding: 0 !important;
  margin: 0 !important;
}
#search-form > div:last-child {
  border-bottom: none !important;
}

/* セクション内の row */
#search-form .row {
  padding: 14px 18px !important;
  margin: 0 !important;
}

/* セクション見出し（p > icon + テキスト） */
#search-form .row > div > p {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
  color: var(--text-main) !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* ============================================================
   16-B. チェックボックス（.checkbox01）
   ============================================================ */
.checkbox01 {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 8px !important;
  font-size: 1.4rem !important;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
}

/* カテゴリグループ見出し（h3） */
.checkbox01 h3 {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
  color: var(--text-mute) !important;
  background: #f7fafc !important;
  padding: 5px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  margin-bottom: 6px !important;
}

/* ラベル行 */
.checkbox01 label {
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  padding: 2px 0 !important;
  cursor: pointer !important;
  border-radius: 5px !important;
  transition: background 0.1s !important;
}
.checkbox01 label:hover {
  background: var(--brand-light) !important;
}

/* チェックボックス本体（非表示のまま） */
.checkbox01-input {
  display: none !important;
}

/* カスタムチェックボックス外枠 */
.checkbox01-parts {
  padding-left: 28px !important;
  position: relative !important;
  font-size: 1.4rem !important;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
  color: var(--text-main) !important;
  line-height: 1.5 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
.checkbox01-parts::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 3px !important;
  left: 2px !important;
  width: 17px !important;
  height: 17px !important;
  border: 1.5px solid #cbd5e0 !important;
  border-radius: 4px !important;
  background: white !important;
  transition: border-color 0.15s, background 0.15s !important;
}

/* チェック済みスタイル */
.checkbox01-input:checked + .checkbox01-parts {
  color: var(--brand-dark) !important;
  font-weight: 600 !important;
}
.checkbox01-input:checked + .checkbox01-parts::before {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}
.checkbox01-input:checked + .checkbox01-parts::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  /* ::before box: top:3, left:2, 17×17px → center (10.5, 11.5)
     element 5×10px → place center at (10.5, 11.5): left=10.5-2.5=8, top=11.5-5=6.5≈6
     transform-origin:center で要素中心を回転軸にする */
  top: 6px !important;
  left: 8px !important;
  width: 5px !important;
  height: 10px !important;
  transform: rotate(40deg) !important;
  transform-origin: center center !important;
  border-bottom: 2.5px solid #fff !important;
  border-right: 2.5px solid #fff !important;
}

/* ラジオボタンも同スタイルで統一 */
input[type="radio"].checkbox01-input + .checkbox01-parts::before {
  border-radius: 50% !important;
}
input[type="radio"].checkbox01-input:checked + .checkbox01-parts::before {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}
input[type="radio"].checkbox01-input:checked + .checkbox01-parts::after {
  /* ::before circle: top:3, left:2, 17×17px → center (10.5, 11.5)
     dot 7×7px → center at (10.5,11.5): left=10.5-3.5=7, top=11.5-3.5=8 */
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: white !important;
  border: none !important;
  top: 8px !important;
  left: 7px !important;
  transform: none !important;
}

/* ============================================================
   16-C. 「さらに表示」ボタン（.more）
   ============================================================ */
.more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: white !important;
  color: var(--brand-dark) !important;
  border: 1.5px solid var(--brand) !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
  margin: 6px 0 4px 0 !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
}
.more:hover {
  background: var(--brand-light) !important;
}

/* ============================================================
   16-D. モバイル用「検索項目」開閉ラベル（.nav-open）
   PC では search_form_part.php のインライン <style> が非表示にするが、
   design-a-modern.css 側でも明示して静的プレビューとの一貫性を保つ
   ============================================================ */
@media screen and (min-width: 768px) {
  .nav-open {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .nav-open {
    display: block !important;
    background: var(--brand) !important;
    color: white !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    user-select: none !important;
  }
  .nav-open::before {
    right: 16px !important;
    font-size: 1.4rem !important;
  }
}

/* ============================================================
   16-E. 検索フォーム内ボタン
   ============================================================ */
.left-inner button,
.left-inner input[type="submit"],
.left-inner input[type="button"] {
  border-radius: 8px !important;
}

/* ============================================================
   17. 「戻る」ボタン — 情報一覧では不要なため非表示
   ============================================================ */
.sec-basic > .arrow.tc {
  display: none !important;
}

/* ============================================================
   18. モバイル対応補完
   ============================================================ */
@media only screen and (max-width: 767px) {
  .sec-basic {
    padding: 16px 14px !important;
  }

  .kyujin {
    margin-bottom: 14px !important;
  }

  .kyujin h2 {
    font-size: 1.55rem !important;
    padding: 18px 16px 10px !important;
  }

  .kyujin .sub-tit {
    padding: 8px 16px 2px !important;
  }

  .kyujin .tags-chosho {
    padding: 10px 16px !important;
  }

  .kyujin button.asphalt,
  .kyujin .button.asphalt {
    padding: 17px 28px !important;
    font-size: 1.55rem !important;
  }

  /* モバイルでの左メニュー（検索フォーム）スタイル調整 */
  #left-menu {
    padding-right: 0 !important;
    margin-bottom: 14px !important;
  }

  .left-inner {
    padding: 16px 14px !important;
  }
}

/* ============================================================
   20. フッター（footer#footer）
   動的: $supportFooter（テナント名）, date('Y')（著作権年）, ログイン別リンク
   ============================================================ */
footer#footer {
  background: var(--text-main) !important;
  padding: 28px 24px 20px !important;
  margin-top: 40px !important;
}

/* リンクリスト */
footer#footer .footer_ul {
  text-align: center !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  list-style: none !important;
}

footer#footer .footer_ul li {
  display: inline-block !important;
  margin: 0 !important;
}

footer#footer .footer_ul li a {
  display: inline-block !important;
  padding: 6px 14px !important;
  font-size: 1.3rem !important;
  color: #a0aec0 !important;
  text-decoration: none !important;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
  transition: color 0.15s !important;
  border-right: 1px solid #2d3748 !important;
}

footer#footer .footer_ul li:last-child a {
  border-right: none !important;
}

footer#footer .footer_ul li a:hover {
  color: var(--brand) !important;
}

/* コピーライト */
footer#footer #copyright {
  text-align: center !important;
  font-size: 1.1rem !important;
  color: #4a5568 !important;
  margin: 0 !important;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
}