/* =========================================================
   919ベル 公式HP CSS
   ========================================================= */

/* 01. 色・幅・角丸などの共通設定 */
:root {
      --c-bg: #fffdf7;
      --c-bg-alt: #faf6ef;
      --c-text: #363636;
      --c-text-sub: #636363;
      --c-accent: #c5901a;
      --c-btn: #5c4033;
      --c-btn-hover: #48332a;
      --c-white: #fff;
      --c-border: #ddd6c8;
      --c-footer-bg: #3a3530;
      --c-footer-text: #d5d0c8;
      --font: "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
      --mw: 880px;
      --r: 6px;
    }

    /* 02. ベース設定 */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 96px;
    }

    body {
      margin: 0;
      font-family: var(--font);
      font-size: 15px;
      line-height: 1.9;
      color: var(--c-text);
      background: var(--c-bg);
      word-break: break-word;
      overflow-wrap: break-word;
    }

    a {
      color: var(--c-btn);
    }

    a:focus-visible {
      outline: 3px solid var(--c-accent);
      outline-offset: 3px;
    }

    ul,
    ol {
      margin: 0;
      padding-left: 1.25em;
    }

    li {
      margin: .35rem 0;
    }

    /* 03. ヘッダー */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--c-white);
      border-bottom: 1px solid var(--c-border);
    }

    .header-inner {
      max-width: var(--mw);
      margin: 0 auto;
      padding: 0 1.25rem;
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .site-logo {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      color: var(--c-text);
      font-size: 1.05rem;
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
    }

    .site-logo .ico {
      display: inline-grid;
      place-items: center;
      width: 1.65rem;
      height: 1.65rem;
      border-radius: 50%;
      background: var(--c-accent);
      color: #2a2115;
      font-size: .95rem;
    }

    .exit-link {
      padding: .32rem .72rem;
      border: 1px solid var(--c-border);
      border-radius: 999px;
      background: var(--c-bg-alt);
      color: var(--c-text-sub);
      font-size: .76rem;
      font-weight: 700;
      line-height: 1.4;
      text-decoration: none;
      white-space: nowrap;
    }

    /* 04. ページ内ナビ */
    .site-nav {
      background: var(--c-white);
      border-bottom: 1px solid var(--c-border);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .nav-list {
      max-width: var(--mw);
      margin: 0 auto;
      padding: 0 .75rem;
      display: flex;
      gap: .1rem;
      list-style: none;
    }

    .nav-list a {
      display: block;
      padding: .58rem .7rem;
      color: var(--c-text-sub);
      font-size: .78rem;
      text-decoration: none;
      white-space: nowrap;
      border-bottom: 2px solid transparent;
    }

    .nav-list a:hover,
    .nav-list a:focus {
      color: var(--c-text);
      border-bottom-color: var(--c-accent);
    }

    /* 05. トップ・ファーストビュー */
    .hero {
      padding: 3.1rem 1.25rem 2.7rem;
      text-align: center;
      background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-alt) 100%);
      border-bottom: 1px solid var(--c-border);
    }

    .hero-in,
    .sec-in,
    .ft-in {
      max-width: var(--mw);
      margin: 0 auto;
    }

    /* トップの白い説明ボックス */
    .hero-message {
      max-width: 700px;
      margin: 0 auto 1.65rem;
      padding: 1.15rem;
      background: var(--c-white);
      border: 1px solid var(--c-border);
      border-radius: var(--r);
      box-shadow: 0 10px 24px rgba(92, 64, 51, .08);
      text-align: left;
    }

    /* トップの対象者リスト */
    .hero-targets {
      margin: 0;
      padding-left: 1.16em;
      color: var(--c-text);
      font-size: 1.18rem;
      font-weight: 700;
      line-height: 1.7;
    }

    .hero-targets li {
      margin: .2rem 0;
    }

    /* トップの大見出し */
    .hero-copy {
      max-width: 760px;
      margin: 0 auto 1.2rem;
      color: var(--c-text);
      font-size: 1.85rem;
      line-height: 1.55;
      font-weight: 800;
      text-align: center;
    }

    /* トップの締め文と補足説明 */
    .hero-closing,
    .hero-support {
      margin: 0 auto;
      max-width: 700px;
      font-weight: 800;
      text-align: center;
    }

    .hero-closing {
      color: var(--c-text);
      font-size: 1.08rem;
      line-height: 1.65;
    }

    .hero-support {
      margin-top: .55rem;
      margin-bottom: 1.65rem;
      color: var(--c-text-sub);
      font-size: .94rem;
      line-height: 1.75;
    }

    /* 06. ボタン */
    .hero-btns,
    .button-row {
      display: grid;
      gap: .75rem;
      justify-content: center;
    }

    .btn {
      display: inline-block;
      min-width: 250px;
      padding: .82rem 1.4rem;
      border-radius: var(--r);
      font-size: .94rem;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
    }

    .btn--p {
      background: var(--c-btn);
      color: var(--c-white);
    }

    .btn--p:hover {
      background: var(--c-btn-hover);
      color: var(--c-white);
    }

    .btn--s {
      background: var(--c-white);
      color: var(--c-btn);
      border: 1.5px solid var(--c-btn);
    }

    /* 07. セクション共通 */
    .sec {
      padding: 3.4rem 1.25rem;
    }

    .sec--alt {
      background: var(--c-bg-alt);
    }

    .sec-title {
      margin: 0 0 1.35rem;
      padding-bottom: .45rem;
      border-bottom: 2px solid var(--c-accent);
      font-size: 1.24rem;
      line-height: 1.45;
      letter-spacing: .02em;
    }

    .sec p {
      margin: 0;
    }

    .sec p + p {
      margin-top: .8rem;
    }

    /* 08. 支援内容リスト */
    .svc-list {
      display: grid;
      gap: .65rem;
      padding-left: 0;
      list-style: none;
    }

    .svc-list li {
      position: relative;
      padding: .72rem .9rem .72rem 1.8rem;
      background: var(--c-white);
      border: 1px solid var(--c-border);
      border-radius: var(--r);
      font-size: .92rem;
    }

    .svc-list li::before {
      content: "";
      position: absolute;
      top: 1.12rem;
      left: .75rem;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--c-accent);
    }

    /* 09. 支援機関向けリスト */
    .dot-list {
      margin-top: .8rem;
    }

    /* 10. ご相談・ご紹介の流れ */
    .flow {
      counter-reset: step;
      padding-left: 0;
      list-style: none;
    }

    .flow li {
      counter-increment: step;
      position: relative;
      margin-bottom: .8rem;
      padding: 1rem .9rem 1rem 3.2rem;
      background: var(--c-white);
      border: 1px solid var(--c-border);
      border-radius: var(--r);
    }

    .flow li::before {
      content: counter(step);
      position: absolute;
      top: 1rem;
      left: .85rem;
      display: grid;
      place-items: center;
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 50%;
      background: var(--c-accent);
      color: var(--c-white);
      font-size: .8rem;
      font-weight: 700;
    }

    .flow-t {
      margin-bottom: .2rem;
      font-weight: 700;
    }

    .flow-d,
    .tm {
      color: var(--c-text-sub);
      font-size: .88rem;
    }

    /* 11. よくある質問 */
    .faq-item {
      margin-bottom: 1rem;
      padding: 1.1rem;
      background: var(--c-white);
      border: 1px solid var(--c-border);
      border-radius: var(--r);
    }

    .faq-q {
      margin-bottom: .4rem;
      font-size: .92rem;
      font-weight: 700;
    }

    .faq-q::before {
      content: "Q. ";
      color: var(--c-accent);
    }

    .faq-a {
      color: var(--c-text-sub);
      font-size: .88rem;
    }

    .faq-a::before {
      content: "A. ";
      color: var(--c-accent);
      font-weight: 700;
    }

    /* 12. お問い合わせ */
    .ct-boxes {
      display: grid;
      gap: .8rem;
    }

    .ct-box {
      padding: 1.2rem;
      background: var(--c-white);
      border: 1px solid var(--c-border);
      border-radius: var(--r);
    }

    .ct-label {
      margin-bottom: .3rem;
      font-size: .88rem;
      font-weight: 700;
    }

    .ct-val {
      margin-bottom: .2rem;
      color: var(--c-btn);
      font-size: 1.12rem;
      font-weight: 700;
    }

    .ct-val a {
      color: inherit;
      text-decoration: none;
    }

    .ct-note,
    .ts {
      color: var(--c-text-sub);
      font-size: .8rem;
    }

    /* 13. 注意書き・安全メモ */
    .note,
    .safety {
      margin-top: .9rem;
      padding: .72rem .9rem;
      color: var(--c-text-sub);
      font-size: .82rem;
      line-height: 1.75;
      border-radius: 0 var(--r) var(--r) 0;
    }

    .note {
      background: var(--c-bg-alt);
      border-left: 3px solid var(--c-border);
    }

    .safety {
      border: 1px dashed var(--c-border);
      border-radius: var(--r);
    }

    /* 14. 小さな調整用クラス */
    .mt1 {
      margin-top: .8rem;
    }

    .mt2 {
      margin-top: 1.5rem;
    }

    .center {
      text-align: center;
    }

    /* 15. フッター */
    .site-footer {
      padding: 2.2rem 1.25rem;
      background: var(--c-footer-bg);
      color: var(--c-footer-text);
      font-size: .82rem;
      line-height: 1.8;
    }

    .ft-name {
      margin-bottom: .25rem;
      font-size: 1rem;
      font-weight: 700;
    }

    .ft-desc,
    .ft-safety,
    .ft-copy {
      color: #aaa6a0;
    }

    .ft-contact,
    .ft-links,
    .ft-safety {
      margin-top: .8rem;
    }

    .site-footer a {
      color: #f5e6b8;
    }

    .ft-safety {
      padding-top: .8rem;
      border-top: 1px solid #555;
      font-size: .75rem;
    }

    .ft-copy {
      margin-top: 1rem;
      font-size: .72rem;
    }

    /* 16. スマホ下部の固定相談ボタン */
    .fixed-consult {
      position: fixed;
      right: 14px;
      bottom: 14px;
      z-index: 120;
      display: inline-block;
      padding: .86rem 1.15rem;
      border-radius: 999px;
      background: var(--c-btn);
      color: var(--c-white);
      font-size: .92rem;
      font-weight: 800;
      line-height: 1;
      text-decoration: none;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    }

    /* 17. タブレット・PC向け調整 */
    @media (min-width: 768px) {
      body {
        font-size: 16px;
      }

      .header-inner {
        min-height: 58px;
      }

      /* 05. トップ・ファーストビュー */
    .hero {
        padding: 4.5rem 2rem 3.5rem;
      }

      /* トップの大見出し */
    .hero-copy {
        font-size: 2rem;
      }

      /* トップの白い説明ボックス */
    .hero-message {
        padding: 1.35rem;
      }

      /* トップの対象者リスト */
    .hero-targets {
        font-size: 1.24rem;
      }

      /* 06. ボタン */
    .hero-btns,
      .button-row {
        display: flex;
        flex-wrap: wrap;
      }

      /* 07. セクション共通 */
    .sec {
        padding: 4.4rem 2rem;
      }

      .sec-title {
        font-size: 1.34rem;
      }

      .svc-list,
      /* 12. お問い合わせ */
    .ct-boxes {
        grid-template-columns: 1fr 1fr;
      }

      /* 16. スマホ下部の固定相談ボタン */
    .fixed-consult {
        display: none;
      }
    }

/* 18. 個人情報ページ */
.privacy-page {
  width: min(100% - 32px, 820px);
  margin: 0 auto;
  padding: 28px 0 44px;
}

.privacy-back {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 14px;
}

.privacy-page h1 {
  margin: 0 0 18px;
  font-size: 26px;
  line-height: 1.4;
}

.privacy-page h2 {
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
  font-size: 19px;
}

.privacy-page p {
  margin: 0 0 12px;
}