/* =========================================================
   第1期改修（2026-10）追加スタイル
   - 差し色（アクセント1色）／登録CTA（ヘッダー・メインビジュアル・スマホ固定）
   - 問い合わせ入口3本のカード／専門職ページの職種一覧
   既存CSSの後に読み込む（functions.php の tsp_improve_styles）
========================================================= */

:root {
  /* 差し色（2026-10-02 竹内さん指示：紺をメイン、青緑をサブ）。グレー基調は維持する。
     メイン（紺）  … 登録ボタン、「無料」バッジ、入口カードの強調、フォームの案内枠
     サブ（青緑）  … 英字の小見出し、選択中の選択肢、一覧の点・見出しの線、リンクのホバー
     以前の案：橙 #c8551b（控え：backup_before/tsp-improve.css.orange） */
  --tsp-accent: #1f4e79;
  --tsp-accent-dark: #163a5a;
  --tsp-accent-soft: #e9eff6;
  --tsp-sub: #0f766e;
  --tsp-sub-dark: #0b5a54;
  --tsp-sub-soft: #e6f3f1;
}

/* ---------------------------------------------------------
   共通：「無料」バッジ
--------------------------------------------------------- */
.tsp-cta-free {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px;
  margin-right: 8px;
  border-radius: 3px;
  background: var(--white);
  color: var(--tsp-accent);
  vertical-align: 0.1em;
}

/* ---------------------------------------------------------
   ヘッダー：グローバルメニュー右端の登録ボタン（PCはスクロールで追従）
--------------------------------------------------------- */
#header .tsp-cta-btn {
  font-family: var(--font-figtree);
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 12px 22px;
  border: 1px solid var(--tsp-accent);
  border-radius: 5px;
  background-color: var(--tsp-accent);
  color: var(--white);
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

#header .tsp-cta-btn:hover {
  background-color: var(--tsp-accent-dark);
  border-color: var(--tsp-accent-dark);
  transform: translateY(-1px);
}

#header .nav-section {
  gap: 24px;
}

#header .contact-btn {
  white-space: nowrap;
}

/* メニュー項目が多くなったので、幅の狭いPCでは間隔を詰める */
@media (max-width: 1240px) {
  #header.main-header {
    padding: 0 32px;
  }
  #header .main-nav {
    gap: 18px;
  }
  #header .nav-link,
  #header .contact-btn,
  #header .tsp-cta-btn {
    font-size: 15px;
  }
  #header .contact-btn {
    padding: 12px 16px;
  }
}

/* モバイルメニュー内の登録ボタン */
#header .mobile-contact-btn.tsp-cta-mobile {
  background-color: var(--tsp-accent);
  border-color: var(--tsp-accent);
  color: var(--white);
  font-weight: 600;
}

#header .mobile-contact-btn.tsp-cta-mobile:hover {
  background-color: var(--tsp-accent-dark);
  border-color: var(--tsp-accent-dark);
}

#header .mobile-contact-btn + .mobile-contact-btn {
  margin-top: 12px;
}

/* ---------------------------------------------------------
   トップ：メインビジュアルの主CTA
--------------------------------------------------------- */
.main-visual-btn.tsp-mv-cta {
  padding: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.main-visual-btn.tsp-mv-cta:hover {
  transform: none;
  box-shadow: none;
  background: none;
}

.tsp-mv-cta .tsp-mv-primary {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  background-color: var(--tsp-accent);
  padding: 18px 40px;
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.tsp-mv-cta .tsp-mv-primary:hover {
  background-color: var(--tsp-accent-dark);
  transform: translateY(-2px);
}

.tsp-mv-cta .tsp-mv-secondary {
  display: inline-block;
  font-size: 14px;
  color: var(--bk);
  padding: 10px 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.85);
  transition: background-color 0.2s ease;
}

.tsp-mv-cta .tsp-mv-secondary:hover {
  background: #ffffff;
}

@media (max-width: 768px) {
  .tsp-mv-cta .tsp-mv-primary {
    font-size: 16px;
    padding: 16px 22px;
  }
  .tsp-mv-cta .tsp-mv-secondary {
    font-size: 13px;
  }
}

/* ---------------------------------------------------------
   スマホ：画面下部に固定の登録ボタン（右側配置）
--------------------------------------------------------- */
.tsp-sp-cta {
  display: none;
}

@media (max-width: 768px) {
  .tsp-sp-cta {
    display: flex;
    align-items: center;
    position: fixed;
    right: 12px;
    bottom: 14px;
    z-index: 900;
    padding: 14px 18px;
    border-radius: 999px;
    background-color: var(--tsp-accent);
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    text-decoration: none;
  }
  .tsp-sp-cta:active {
    background-color: var(--tsp-accent-dark);
  }
  /* 固定ボタンがフッター最下部の文字に重ならないよう余白を確保 */
  #footer .copyright {
    padding-bottom: 72px;
  }
}

/* ---------------------------------------------------------
   問い合わせ入口3本（フッター・お問い合わせページ）
--------------------------------------------------------- */
#footer .wrapper .link-box.tsp-entrance {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 767px) {
  #footer .wrapper .link-box.tsp-entrance {
    grid-template-columns: 1fr;
  }
}

.tsp-entrance a.link-item:first-child {
  border-left: 4px solid var(--tsp-accent);
}

.tsp-entrance a.link-item:first-child h3 {
  color: var(--tsp-accent-dark);
}

@media (max-width: 767px) {
  #co-qa .wrapper .link-box.tsp-entrance {
    flex-direction: column;
    gap: 14px;
  }
  #co-qa .wrapper .link-box.tsp-entrance a.link-item {
    width: 100%;
  }
  #co-qa .link-box.tsp-entrance .link-item h3 {
    min-height: 0;
  }
}

/* ---------------------------------------------------------
   見出しの差し色（英字サブタイトルのみ。和文見出しはグレー基調のまま）
--------------------------------------------------------- */
.item-title .en {
  color: var(--tsp-sub);
}

/* 本文中のリンクのホバー */
main a:not([class]):hover,
.news-item:hover .news-text {
  color: var(--tsp-sub-dark);
}

/* ---------------------------------------------------------
   専門職ページ：取扱い職種・業界
--------------------------------------------------------- */
#role .box .item.item-03 {
  margin-bottom: 60px;
  padding-left: 60px;
}

#role .box .item.item-03 .text-item {
  margin-bottom: 30px;
}

.tsp-joblist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 2026-10-20：生命保険・損害保険・年金の3区分 */
  gap: 30px;
  margin-bottom: 30px;
}

.tsp-joblist-col {
  border: 1px solid #7d7d7d;
  background: linear-gradient(117deg, #f4f4f4 15.02%, #f5f5f5 47.53%, #ddd 85.07%);
  padding: 24px 28px;
}

.tsp-joblist-head {
  font-family: var(--font-figtree);
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 4px solid var(--tsp-sub);
}

.tsp-joblist-col ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tsp-joblist-col li {
  position: relative;
  padding-left: 16px;
}

.tsp-joblist-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tsp-sub);
}

.tsp-joblist-cta {
  text-align: center;
}

.tsp-cta-inline {
  display: inline-block;
  font-weight: 700;
  color: var(--white);
  background-color: var(--tsp-accent);
  padding: 16px 36px;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}

.tsp-cta-inline:hover {
  background-color: var(--tsp-accent-dark);
}

@media (max-width: 767px) {
  #role .box .item.item-03 {
    padding-left: 0;
  }
  .tsp-joblist-grid {
    grid-template-columns: 1fr;
  }
  .tsp-joblist-col ul {
    grid-template-columns: 1fr;
  }
}

/* スマホ：書籍の告知バナー（画面下の帯）が出ている間は、登録ボタンをバナーの上へ */
@media (max-width: 767px) {
  body.has-book-float .tsp-sp-cta {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

/* スマホ：reCAPTCHA のバッジ（右下）がある本番環境では、登録ボタンをバッジの上へ。
   書籍バナーも出ている場合は、バッジをさらに上へ逃がす */
@media (max-width: 767px) {
  body:has(.grecaptcha-badge) .tsp-sp-cta {
    bottom: calc(86px + env(safe-area-inset-bottom));
  }
  body.has-book-float:has(.grecaptcha-badge) .tsp-sp-cta {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }
  body.has-book-float .grecaptcha-badge {
    bottom: 170px !important;
  }
}

/* ---------------------------------------------------------
   問い合わせフォーム（第1期改修）
--------------------------------------------------------- */
.tsp-form-lead {
  background: var(--tsp-accent-soft);
  border-left: 4px solid var(--tsp-accent);
  padding: 14px 18px;
  margin-bottom: 30px;
  font-size: var(--font-size-xs);
  line-height: 1.8;
}

.tsp-req-mark {
  font-weight: 700;
  color: var(--tsp-accent-dark);
}

.contact-form .form-section {
  margin-bottom: 28px;
}

.tsp-form-note {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  color: var(--gray5);
}

.tsp-form-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 40px 0 28px;
  color: var(--gray5);
  font-size: 14px;
}

.tsp-form-divider::before,
.tsp-form-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray1);
}

/* 選択肢をタイル状に並べる（スマホでも押しやすい大きさ） */
.tsp-checkbox-grid .wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.tsp-checkbox-grid .wpcf7-list-item {
  margin: 0;
}

.tsp-checkbox-grid .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray1);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tsp-checkbox-grid .wpcf7-list-item label:hover {
  border-color: var(--gray4);
}

.tsp-checkbox-grid .wpcf7-list-item label:has(input:checked) {
  border-color: var(--tsp-sub);
  background: var(--tsp-sub-soft);
}

.tsp-checkbox-grid input[type="checkbox"] {
  accent-color: var(--tsp-sub);
  width: 18px;
  height: 18px;
  flex: none;
}

.tsp-checkbox-grid .tsp-free {
  margin-top: 10px;
}

/* これまでのご経験：生命保険・損害保険・年金の区分ごとに選択肢を並べる（2026-10-20） */
.tsp-exp-group {
  margin-bottom: 16px;
}

.tsp-exp-head {
  font-weight: 700;
  margin: 0 0 8px;
  padding-left: 10px;
  border-left: 4px solid var(--tsp-sub);
}

@media (max-width: 767px) {
  .tsp-checkbox-grid .wpcf7-checkbox {
    grid-template-columns: 1fr;
  }
  .tsp-form-note {
    display: block;
    margin: 4px 0 0;
  }
}

/* キャリア相談ページ：求職者フォームへの誘導 */
.tsp-career-cta {
  text-align: center;
  padding: 30px 20px;
  border: 1px solid var(--gray1);
  border-radius: 10px;
  background: #fafafa;
}

.tsp-career-cta p {
  margin-bottom: 20px;
  line-height: 1.9;
}

/* 2026-10-14：専門職の説明文（私たちについて） */
.tsp-prof-lead {
  margin: 0 0 32px;
  line-height: 1.9;
}
.tsp-prof-lead a {
  color: var(--tsp-accent);
  text-decoration: underline;
  white-space: nowrap;
}

/* 2026-10-14：求職者フォームのプルダウン（経験年数） */
.tsp-seekers-form select.form-input {
  max-width: 240px;
  appearance: auto;
}

/* 2026-10-14：入口カード「無料 転職サポート・キャリアサポート」の折り返し */
.tsp-entrance .link-item h3 {
  flex-wrap: wrap;
  align-items: center;
}
.tsp-entrance .link-item h3 .tsp-cta-free {
  white-space: nowrap;
  flex-shrink: 0;
}
.tsp-entrance .link-item h3 .tsp-nw {
  display: inline-block;
  white-space: nowrap;
}

/* 2026-10-19：日本語の改行を文節単位にする（語の途中や助詞の前で折り返さない）
   Chrome・Edge は auto-phrase、未対応のブラウザは js/tsp-linebreak.js（BudouX）で対応 */
body {
  line-break: strict;        /* 行頭に「ー」「ュ」や句読点が来ないようにする */
  word-break: auto-phrase;
  overflow-wrap: break-word; /* 長いURLなどははみ出さずに折り返す */
}
h1, h2, h3, h4, h5, h6, .btn, button, a[class*="btn"], dt, th, label {
  text-wrap: balance;        /* 見出し・ボタンは行の長さをそろえる */
}
p, li, dd, td, figcaption {
  text-wrap: pretty;         /* 本文は最後の行が1〜2文字だけにならないようにする */
}
/* 語の途中で折り返したくない語をまとめる（テンプレート側で span.tsp-nw を付ける） */
.tsp-nw {
  display: inline-block;
  white-space: nowrap;
}