/* ===============================
   基本リセット（必要最低限）
================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #fff;
    max-width: 1500px;
    margin: 0 auto;
}

/* 画像は常に縮小に対応 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 見出しなどは必要になったら調整 */
h1, h2, h3, h4, h5 {
    font-weight: 700;
    line-height: 1.4;
}

/* コンテンツ幅（LPでよく使う） */
.container {
    width: min(1900px, 90%);
    margin: 0 auto;
}




/* ===============================
   セクション共通
================================= */
.section {
    padding: 80px 0;
}

/* ===============================
   ボタン共通
================================= */
.btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: 16px;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn-primary {
    background: #0A2540;
    color: #fff;
}

.btn-primary:hover {
    opacity: 0.85;
}

/* ===============================
   レスポンシブ（スマホ）
================================= */
@media (max-width: 768px) {
    .header {
        padding: 12px;
    }
    .section {
        padding: 60px 0;
    }
    .btn {
        width: 100%;
        padding: 16px;
    }
    
}




/* ===============================
   ヘッダー全体
================================= */
.header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    padding: 8px 0;
    position: sticky;
    top: 0;
    z-index: 999;
}

/* 上段レイアウト：ロゴ｜中央｜ボタン */
.header-inner {
    display: flex;
    align-items: stretch; /* 高さそろえる */
    justify-content: space-between;
    gap: 32px;
}

/* 左：ロゴ */
.header-logo {
    display: flex;
    align-items: center; /* 縦中央寄せ */
}

.header-logo img {
    height: 50px;
    width: auto;
    display: block;
}

/* 中央：電話 + ナビ（上下） */
/* 電話エリアを中央寄せ */
.header-center {
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    margin: 0 auto;  /* ★中央寄せの決め手 */
    gap: 12px;       /* 電話アイコンとテキストの距離 */
}

/* 電話エリア全体（既存ならそのまま、なければ追加） */
.header-tel {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* 「お急ぎの方はこちら」 */
.tel-text {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

/* 電話リンク全体を横並び＆装飾なしに */
.header-tel-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;   /* ★ 下線を消す */
    color: #000;             /* ★ 青リンクを黒に */
}

.header-tel-link:visited {
    color: #000;
}

.header-tel-link:hover {
    opacity: 0.8;
}

/* 電話アイコン */
.tel-icon {
    width: 20px;
    height: auto;
}

/* 電話番号 */
.tel-number {
    font-size: 22px;
    font-weight: 700;
}

/* 下段ナビ */
.header-nav ul {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 4px 0 0;
}

.header-nav li {
    list-style: none;
}

.header-nav a {
    text-decoration: none;
    color: #333;
    font-size: 15px;
    font-weight: 700;
    transition: 0.2s;
}

.header-nav a:hover {
    color: #1B263B;
}

/* 右：お問い合わせボタン */
.header-btn {
    background: #E60012;
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;      /* 縦中央 */
    justify-content: center;  /* 横中央 */
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    transition: 0.3s;
}

.header-btn:hover {
    opacity: 0.85;
}


/* ===============================
   ハンバーガーメニュー ボタン
================================= */

/* PCでは非表示、SPで表示にするのでデフォルトは非表示 */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-left: 12px;
    background: none;
    border: none;
    cursor: pointer;
}

/* 3本線 */
.hamburger-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: 0.3s;
}

/* 開いているときのアニメーション（お好みで） */
.hamburger-btn.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-btn.is-open span:nth-child(2) {
    opacity: 0;
}
.hamburger-btn.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* 980px以上では × ボタンを非表示（SPのみ表示） */
@media (min-width: 981px) {
    .nav-close-btn {
        display: none;
    }
}

/* ===============================
   スマホ対応
================================= */


@media (max-width: 980px) {

  /* ヘッダー全体の並び：
     1行目：ロゴ | 電話 | ハンバーガー
     2行目：CTAボタン
     メニューはハンバーガー押下時に全画面オーバーレイで表示
  */
  .header-inner {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;                 /* 2段構成にする */
      align-items: center;
      justify-content: space-between;
      gap: 8px;
  }

  /* ロゴ：左端 */
  .header-logo {
      flex: 0 0 auto;
  }

  .header-logo img {
      height: 40px;                    /* 少し小さめ */
  }

  /* 中央：電話エリア */
  .header-center {
      flex: 1 1 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      width: auto;                     /* 100% 指定を解除 */
  }

  .header-tel {
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
  }

  /* ハンバーガー：右端 */
  .hamburger-btn {
      display: flex;                   /* 980px以下で表示 */
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 32px;
      height: 32px;
      padding: 0;
      margin-left: 12px;
      background: none;
      border: none;
      cursor: pointer;
  }

  .hamburger-btn span {
      display: block;
      width: 100%;
      height: 3px;
      background: #333;
      border-radius: 2px;
      transition: 0.3s;
  }

  /* 開いているときのバツ印アニメーション（任意） */
  .hamburger-btn.is-open span:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
  }
  .hamburger-btn.is-open span:nth-child(2) {
      opacity: 0;
  }
  .hamburger-btn.is-open span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
  }

  /* CTAボタン：2段目にフル幅で配置 */
  .header-btn {
      order: 3;                        /* 1行目の要素の下に来るように */
      flex: 0 0 100%;
      width: 100%;
      max-width: 320px;
      margin: 6px auto 0;
      font-size: 14px;
      padding: 10px 16px;
  }

  /* ▼▼ ハンバーガーメニューの全画面オーバーレイ ▼▼ */

  /* デフォルトは非表示 */
  .header-nav {
      display: none;
      position: fixed;
      inset: 0;                        /* top:0; right:0; bottom:0; left:0; と同じ */
      background: #C1272D;             /* マスク＋背景色 */
      z-index: 9999;                   /* 画面の最前面に */
  }

  /* 開いたとき */
  .header-nav.is-open {
      display: block;
  }

  /* 右上の閉じるボタン（×） */
  .header-nav .nav-close-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 32px;
      height: 32px;
      background: none;
      border: none;
      color: #FFFFFF;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
  }

  /* メニューリスト：画面の右上寄りに縦並び表示 */
  .header-nav ul {
      position: absolute;
      top: 80px;
      right: 32px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      text-align: right;
  }

  .header-nav li {
      list-style: none;
  }

  .header-nav a {
      display: inline-block;
      color: #FFFFFF;
      text-decoration: none;
      font-size: 18px;
      font-weight: 700;
      padding: 4px 0;
  }
}




/* ===============================
   ファーストビュー（FV）
================================= */
.fv {
    padding: 80px 0 100px; /* 下に余白を多めに → 右下画像スペース */
    margin-bottom: 80px;
    background-image: url("../img/fv-background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fv-inner {
    position: relative; /* .fv-right の absolute の基準 */
}

/* 左側ブロック */
.fv-left {
    width: 95%;
}

/* =========================
   メインコピー（2行）
========================= */
/* h1 全体 */
.fv-title {
    width: 95%;
    /* max-width: 720px; */
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 28px;
}

/* ---------- 1行目 ---------- */
/* 1行目：初期費用0でオフィス環境を */
.fv-title-line1 {
    display: block;
    margin-bottom: 10px;
    font-size: clamp(42px, 6vw, 72px);  /* ← あなたの指定どおり */
    white-space: nowrap;                /* ★ここで1行固定 */
}

/* 赤帯（初期費用0） */
.fv-title-line1 .fv-title-highlight {
    font-size: inherit; /* ★ 親行のサイズを継承 */
    margin-right: 4px; /* ← ここキモ！デフォよりかなり詰める */
    padding: 6px 16px; /* ← 少し細くして帯の長さも調整 */
}

/* 「オフィス環境を」（最大72px） */
.fv-title-office {
    display: inline-block;
    position: relative;
    padding: 6px 12px 10px;
    margin-left: -2px;      /* ← ‘で’ にほんの少し食い込ませる */
    color: #333;
    z-index: 1;
    font-size: clamp(36px, 4.5vw, 56px); /* ★ 最大72px */
}

.fv-title-office::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%) skewX(-18deg);
    width: 120%;
    border-bottom: 4px solid #C1272D;
    border-radius: 999px;
    z-index: -1;
}

/* ---------- 2行目 ---------- */
.fv-title-line2 {
    display: block;
    margin-top: 12px;
    font-size: clamp(42px, 6vw, 60px);  /* ★ 最大96px */
}

/* 赤帯（まるごとセットアップ） */
.fv-title-line2 .fv-title-highlight {
    font-size: inherit; /* 親行に合わせる */
    padding: 6px 20px;
}

/* 赤帯（初期費用0／まるごとセットアップ！共通） */
.fv-title-highlight {
    background: #C1272D;
    color: #fff;
    padding: 10px 20px;
    display: inline-block;
    margin: 2px 4px 2px 0;
}

/* 「オフィス環境を」＋下の斜めライン */
.fv-title-office {
    display: inline-block;
    position: relative;
    padding: 6px 18px 10px;
    color: #333;
    z-index: 1;
}

.fv-title-office::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%) skewX(-18deg);
    width: 90%;
    border-bottom: 16px solid #C1272D;
    border-radius: 999px;
    z-index: -1;
}

/* サブコピー */
.fv-lead {
    font-size: clamp(18px, 3.5vw, 26px);
    font-weight: 600;
    margin: 24px 0 32px;
}

/* =========================
   丸バッジ（3つ）
========================= */
.fv-badges {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 999;
}

.fv-badge {
    width: clamp(140px, 23vw, 200px);
    height: clamp(140px, 23vw, 200px);
    border-radius: 50%;
    background: #C1272D;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fv-badge-text {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
}

/* ★ 数字だけ大きくする用 */
.fv-num {
    display: inline-block;
    font-size: 1.8em;  /* ← ここで強調度合いを調整（1.6〜2.0あたりで好みで） */
    font-weight: 900;
    line-height: 1.1;
}

/* 丸バッジ＋人物写真のラッパー */
 .fv-badges-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

/* すでにある .fv-badges はこのままでOK */

.fv-men {
    width: 400px;
    height: auto;
    position: absolute;
    left: 40%;
    top: 40%;

}



/* =========================
   右側画像（円グラフ）
========================= */
.fv-right {
    position: absolute;
    right: -4%;
    bottom: -10%;
}

.fv-service-image {
    width: clamp(300px, 32vw, 500px);  /* 260〜420で可変 */
    height: auto;
    display: block;
}

/* ===============================
   FV レスポンシブ
================================= */

@media (max-width: 1340px) {
  .fv-men {
    display: none !important;    /* 女性画像を非表示 */
  }
}

/* ===============================
   1280px 以上（PC）：左寄せ ＋ 女性画像あり
================================= */
@media (min-width: 1000px) {

  .fv-badges-wrap {
    justify-content: flex-start;  /* 左寄せ */
    gap: 32px;
  }

   
  .fv-men {
    display: block;  /* 女性画像を表示 */
  }
}


/* ===============================
   1280px 以下（タブレット・SP）：
   ・丸３つを中央よせ横並び
   ・女性画像は非表示
================================= */
@media (max-width: 1279px) {

  .fv-men {
    display: none !important;    /* 女性画像を非表示 */
  }
}


@media (max-width: 1279px) {
  .fv-badges {
    flex-wrap: nowrap;   /* 折り返させない */
    justify-content: center;
  }
}


@media (max-width: 1000px) {
    .fv-left {
        max-width: 1000px;
    }
    /* 画像を絶対配置から通常フローに戻す */
    .fv-right {
        position: static;
        right: auto;
        bottom: auto;
        text-align: center; /* 保険で中央揃え */
        margin-top: 40px;
    }

    /* 画像を中央寄せ */
    .fv-service-image {
        width: clamp(300px, 60vw, 500px);  /* ← 適正値に調整 */
        height: auto;
        display: block;
        margin: 0 auto; /* ★中央揃えの決め手 */
    }

}

/* 980px以下：丸３つを逆三角形に配置 */
/* @media (max-width: 980px) {

    .fv-service-image {
        width: clamp(220px, 60vw, 360px);
    }

    .fv-badge {
        width: 130px;
        height: 130px;
        margin: 0;
    }
    .fv-badge-text {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
    }
} */

@media (max-width: 768px) {
    .fv {
        padding: 60px 0 60px;
    }

   

    .fv-title {
        width: 100%;
        font-size: clamp(26px, 6vw, 32px);
    }

    .fv-title-line1 {
        white-space: normal;           /* 幅が足りないので折り返し許可 */
    }

    @media (max-width: 768px) {

   
}

    .fv-badges {
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
    }

    .fv-badge {
        width: 120px;
        height: 120px;
    }

    .fv-badge-text {
        font-size: 13px;
    }
}

@media (max-width: 430px) {

  /* 追加：FV左ブロックを全幅にして中央に揃える */
  .fv-left {
      width: 100%;
      margin: 0 auto;   /* 念のため中央寄せを明示 */
  }

}







/* ===============================
   Strengths セクション
================================= */

.strengths {
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

.strengths-box {
    background: #1B263B;
    color: #FFFFFF;
    width: 90%;
    max-width: 1900px; /* ← 今後すべて統一 */
    padding: 40px 20px;
    border-radius: 20px;
    text-align: center;
}

/* 上文 */
.strengths-subtitle {
    font-size: clamp(20px, 2vw, 28px);
    margin-bottom: 14px;
}

/* メインタイトル */
.strengths-title {
    font-size: clamp(32px, 3vw, 40px);
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* 注意書き */
.strengths-note {
    font-size: clamp(24px, 1.6vw, 28px);
    opacity: 0.9;
}






/* ===============================
   CTA セクション
================================= */
.cta-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.cta-inner {
    width: 90%;
    max-width: 1900px; /* 共通max-width */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    text-align: center;
}

.cta-left {
    flex: 1;
}

.cta-right {
    flex: 0 0 250px;
    display: flex;
    justify-content: center;
}

.cta-image {
    width: 100%;
    height: auto;
    display: block;
}

/* h2（大見出し） */
.cta-heading {
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}

/* 中見出し */
.cta-subheading {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}

/* 説明文 */
.cta-note {
    font-size: clamp(14px, 1.6vw, 20px);
    opacity: 0.85;
    line-height: 1.4;
}

/* ボタンエリア（PC：横並び） */
.cta-buttons {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
}

/* 共通ボタンスタイル */
.cta-btn {
    flex: 1 1 auto;
    max-width: 520px;
    width: 100%;
    padding: 24px 32px;
    border-radius: 12px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: left;
    line-height: 1.5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* アイコン＆テキスト */
.cta-btn-icon {
    flex-shrink: 0;
}

.cta-btn-icon img {
    width: 96px;
    height: auto;
    display: block;
}

.cta-btn-text {
    display: block;
}

.cta-btn-line1 {
    display: block;
    margin-bottom: 4px;
}

.cta-btn-line2,
.cta-btn-line3,
.cta-tel-time {
    display: block;
    font-size: 0.9em;
}

.cta-tel-number {
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 800;
}

/* 左ボタン（フォーム）は少し小さめ、右ボタン（TEL）は少し大きめイメージ */
.cta-btn--form {
    background-color: #E60012;
    max-width: 420px;
}

.cta-btn--tel {
    background-color: #E60012;
    max-width: 520px;
}

/* ホバー時（PC） */
.cta-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}




/* ===============================
   CTA 1280px 以下
   - 画像を消してテキスト＋ボタンだけ
================================= */


@media (max-width: 1280px) {
    .cta-right {
        display: none !important;
    }

}

@media (max-width: 900px) {
    .cta-section {
        padding: 60px 0;
    }

    .cta-inner {
        width: 94%;
        gap: 24px;
    }

    .cta-heading {
        font-size: 24px;
    }

    .cta-subheading {
        font-size: 18px;
    }

    .cta-note {
        font-size: 14px;
    }

    /* ボタンは横並びのまま（〜768pxまではここでOK） */
    .cta-buttons {
        justify-content: center;
        gap: 24px;
        margin-top: 40px;
    }

    .cta-btn {
        padding: 20px 20px;
        border-radius: 10px;
        font-size: 15px;
        gap: 18px;
    }

    .cta-btn-icon img {
        width: 80px;
    }

    .cta-tel-number {
        font-size: 22px;
    }
}

/* ===============================
   CTA 768px 以下
   - ボタンを縦並び＆幅70%に
================================= */
@media (max-width: 768px) {

    .cta-section {
        padding: 60px 0;
    }

    .cta-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* ボタン縦並び */
    .cta-buttons {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 20px;
      margin-top: 32px;
  }

    .cta-btn {
        width: 70%;
        max-width: 480px;
        margin: 0 auto;
        padding: 18px 18px;
        gap: 16px;
        line-height: 1.5;
        text-align: left;
    }

    .cta-btn--form,
    .cta-btn--tel {
        width: 70%;
        max-width: 480px;
    }

    .cta-btn-icon img {
        width: 64px;
    }

    .cta-btn-line1 {
        font-size: 1rem;
    }

    .cta-btn-line2,
    .cta-btn-line3,
    .cta-tel-time {
        font-size: 0.9rem;
    }

    .cta-tel-number {
        font-size: 1.6rem;
    }
}

/* ===============================
   CTA 430px 以下
   - さらに細かく文字・余白を調整
================================= */
@media (max-width: 430px) {

    .cta-section {
        padding: 40px 0;
    }

    .cta-heading {
        font-size: 20px;
    }

    .cta-subheading {
        font-size: 16px;
    }

    .cta-note {
        font-size: 13px;
    }

    .cta-buttons {
        gap: 16px;
        margin-top: 28px;
    }

    .cta-btn {
        width: 70%;
        max-width: 420px;
        padding: 14px 14px;
        border-radius: 12px;
        font-size: 14px;
        gap: 12px;
        line-height: 1.4;
    }

    .cta-btn-icon img {
        width: 52px;
    }

    .cta-btn-line1 {
        font-size: 0.82rem;
    }

    .cta-btn-line2,
    .cta-btn-line3,
    .cta-tel-time {
        font-size: 0.7rem;
    }

    .cta-tel-number {
        font-size: 1rem;
    }
}





/* ===============================
   CTA 900px 以下
================================= */
@media (max-width: 900px) {
  /* .cta-section {
    padding: 60px 0;
  }

  .cta-inner {
    width: 94%;
    gap: 24px;
  } */

  /* 右の写真は非表示 */
  /* .cta-right {
    display: none !important;
  }

  .cta-heading {
    font-size: 22px;
  }

  .cta-subheading {
    font-size: 18px;
  }

  .cta-note {
    font-size: 14px;
  } */

  /* ボタンは横並びのまま */
  /* .cta-buttons {
    justify-content: center;
    flex-direction: row;   /* ← ここで横並びを固定 */
    /* gap: 24px;
    margin-top: 40px;
  } */

  /* .cta-btn {
    padding: 18px 20px;
    border-radius: 10px;
    font-size: 16px;
    gap: 16px;
  }

  .cta-btn-icon img {
    width: 72px;
  } */

  /* 固定px幅だと縮まらないので、割合指定に変更 */
  /* .cta-btn--form,
  .cta-btn--tel {
    width: 45%;
    max-width: none;
  }

  .cta-tel-number {
    font-size: 24px;
  } */
}



/* =========================
    Pain セクション
========================= */

.pain {
    width: 100%;
    max-width: 1900px;
    margin: 0 auto;
    padding: 60px 40px;
    /* border: 5px solid #C1272D;      セクション全体の枠線 */
    /* border-radius: 15px;           */
}

.pain-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    text-align: center;
    line-height: 1.6;
    color: #333;
    margin-bottom: 40px;
}

/* 下段：左右配置 */
.pain-content {
    display: flex;
    justify-content: center;   /* ← 両カラムを中央寄せ */
    align-items: stretch;
    column-gap: 60px;          /* ← 2カラムの間の余白（お好みで40〜80px） */
}

/* 左の画像（45%） */
.pain-image {
    width: 50%;
}

.pain-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 右側リスト（55%） */
.pain-list {
    width: 50%;
    display: flex;           /* ★ 子要素を縦方向に広げる */
    flex-direction: column;  /* チェックリストを縦に並べる */
    justify-content: center; /* ★ 中央寄せで画像中央と揃う */
}

.pain-list ul {
    margin: auto 0;      /* ★ 上下方向の中央に揃う */
    padding: 0;
}

.pain-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
}

/* ✔ のスタイル */
.pain-check {
    color: #C1272D;      /* ← 指定どおり赤色 */
    font-size: 24px;
    font-weight: 700;
    margin-right: 12px;
    line-height: 1.2;
}

.pain-text {
    font-size: clamp(24px, 1.6vw, 32px);
    line-height: 1.6;
    color: #333;
    font-weight: 600;
}

.pain-em {
    color: #C1272D;
    font-weight: 700;
    font-size: calc(1em + 2px);
}

/* SP対応（幅768以下） */
@media (max-width: 768px) {
    .pain {
        padding: 40px 20px;
    }

    .pain-content {
        flex-direction: column;
        gap: 30px;
    }

    .pain-image,
    .pain-list {
        width: 100%;
    }

    .pain-title {
        font-size: clamp(22px, 5vw, 32px);
    }

    .pain-check {
        font-size: 20px;
    }
}



/* ▼▼ セクション間の逆三角形 ▼▼ */
.section-arrow {
    width: 0;
    height: 0;
    margin: 0 auto; /* 中央に配置 */
    border-left: 200px solid transparent;   /* ← お好みで調整OK */
    border-right: 200px solid transparent;  /* ← お好みで調整OK */
    border-top: 100px solid #1B263B;        /* 三角形の色（今回は赤） */
}



/* =========================
    Service セクション
========================= */

.service {
    width: 90%;
    max-width: 1900px;
    margin: 60px auto 80px;
    padding: 60px 40px;
    border: 5px solid #C1272D;  /* 全体ボーダー */
    border-radius: 15px;        /* 角丸 */
    background: #fff;
}

/* 見出し */
.service-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.6;
    color: #333;
}

/* 上部メイン画像（円柱グラフ） */
.service-main-visual img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 40px;
}

/* 中段2行テキスト */
.service-lead {
    text-align: center;
    margin-bottom: 50px;
}

.service-lead p {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.7;
    color: #333;
}

/* 下段：2カラム構造 */
.service-bottom {
    display: flex;
    justify-content: center;
    align-items: stretch;   /* 高さ揃え */
    column-gap: 50px;       /* カラム間の余白 */
}

/* 左40% */
.service-bottom-left {
    width: 40%;
}

.service-bottom-left img {
    width: 100%;
    height: auto;
    display: block;
}

/* 右55% */
.service-bottom-right {
    width: 55%;
}

.service-bottom-right img {
    width: 100%;
    height: auto;
    display: block;
}

/* ▼▼ レスポンシブ（SP時：縦並び） ▼▼ */
@media (max-width: 768px) {

    .service {
        padding: 40px 20px;
    }

    .service-bottom {
        flex-direction: column;
        row-gap: 30px;
    }

    .service-bottom-left,
    .service-bottom-right {
        width: 100%;
    }

    .service-title {
        font-size: clamp(22px, 5vw, 32px);
    }

    .service-lead p {
        font-size: clamp(16px, 4vw, 20px);
    }
}



/* =========================
   Plan セクション
========================= */

.plan {
    width: 90%;
    max-width: 1900px;
    margin: 100px auto;
    background: #fff;
}

/* 上段：2カラム（PC時） */
.plan-top {
    display: flex;
    justify-content: space-between;
    align-items: stretch;      /* ← 右カラムに高さを持たせたいので stretch に */
    column-gap: 50px;
    margin-bottom: 60px;
}

.sp-plan-bottom {
    display: none;
}

@media (max-width: 900px) {
    .plan {
    margin: 50px auto;
}
}


/* 430px 以下（スマホ） */
@media (max-width: 430px) {

    /* ▼ セクション自体を幅100%、余白ゼロにする */
    .plan {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* ▼ 内側の余白をなくす */
    .plan-inner {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* PC用画像を非表示 */
    .plan-bottom {
        display: none;
    }

    /* ▼ SP画像の表示調整 */
    .sp-plan-bottom {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* ▼ SP画像すべてを画面幅いっぱいに */
    .sp-plan-bottom img {
        width: 100%;
        height: auto;
        display: block; /* ← これで左右の隙間も消える */
    }

    /* plan-top（上段）もスマホでは不要なら非表示に */
    .plan-top {
        display: none;
    }
}






/* =========================
   Solution セクション
========================= */

/* セクション全体：幅80％で中央寄せ */
#solution {
  padding: 80px 0;
}

.solution-inner {
  width: 90%;
  max-width: 1500px;          /* 必要なら 1900px でもOK */
  margin: 0 auto;
}

/* 見出し */
.solution-heading {
  text-align: center;
  font-size: clamp(32px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 60px;
}

/* 各悩みブロック共通 */
.solution-item {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 60px;
}

/* 悩み②だけ左右反転 */
.solution-item.solution-item--reverse {
  flex-direction: row-reverse;
}

/* 画像20％ / テキスト80％ */
.solution-img-wrap {
  flex: 0 0 20%;
}

.solution-img {
  width: 100%;
  height: auto;
  display: block;
}

.solution-text {
  flex: 0 0 80%;
}

/* 1行目：悩みラベル＋見出し */
.solution-lead {
  margin: 0 0 12px;
  font-size: clamp(18px, 2.2vw, 24px);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

/* 「悩み①〜③」 */
.solution-label {
  color: #C1272D;
  font-weight: 700;
  margin-right: 16px;
}

/* 見出しテキスト */
.solution-lead-text {
  font-weight: 700;
}

/* 2行目以降の本文 */
.solution-body {
  margin: 0;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.8;
}

/* ▼ SP対応：縦並びにする */

@media (max-width: 900px) {
    #solution {
        padding: 0;
    }
}

@media (max-width: 768px) {
  .solution-item,
  .solution-item.solution-item--reverse {
    flex-direction: column;
    align-items: flex-start;
  }

  .solution-img-wrap,
  .solution-text {
    flex: 0 0 auto;
    width: 100%;
  }

  .solution-item {
    margin-bottom: 40px;
  }

  .solution-heading {
    font-size: clamp(22px, 5vw, 30px);
    margin-bottom: 40px;
  }

  .solution-img {
    width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
}
}



/* =========================
   flow セクション
========================= */

.flow-section {
    width: 100%;
    padding: 80px 0;
    background: #fff;
}

/* 中央揃え用の内側ラッパ */
.flow-inner {
    width: 100%;
    max-width: 1900px; /* ★ ユーザー指定 */
    margin: 0 auto;
    text-align: center;
}

/* 上：flow-1.png（幅90%） */
.flow-image-large img {
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto 60px;
}

/* 下：flow-2.png（幅70%） */
.flow-image-small img {
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .flow-section {
        padding: 0;
        margin-bottom: 40px;
    }
}


/* SP：画像幅を少し広げると最も綺麗 */
@media (max-width: 768px) {
    .flow-image-large img {
        width: 100%;
    }
    .flow-image-small img {
        width: 90%;
    }
}




/* =========================
   FAQ セクション
========================= */

.faq {
  width: 80%;
  max-width: 1000px;
  margin: 120px auto;
}

.faq-inner {
  background: #1b263b;
  border-radius: 15px;
  padding: 40px 0 30px;
}

/* 見出し */
.faq-heading {
  text-align: center;
  color: #333;
  margin-bottom: 100px;
  font-size: clamp(24px, 2.4vw, 32px);
}

.faq-heading span {
  display: block;
  font-size: 0.8em;
  margin-top: 4px;
}

/* 各アイテム全体 */
.faq-item {
  background: #ffffff;
  margin: 0 auto 10px;
  width: calc(100% - 30px);
  border-radius: 10px;
  overflow: hidden;
}

/* 質問部（Q行） */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: #1b263b;
  color: #ffffff;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  text-align: left;
}

.faq-q-label {
  font-weight: 700;
  font-size: 18px;
}

.faq-q-text {
  flex: 1;
  font-size: 15px;
  line-height: 1.6;
}

/* 右端の三角 ▼ */
.faq-arrow {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #ffffff;
  transition: transform 0.25s ease;
}

/* 開いている時は▲に */
.faq-item.is-open .faq-arrow {
  transform: rotate(180deg);
}

/* 回答部（A行） */
.faq-answer {
  background: #ffffff;
  color: #333333;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.faq-answer p {
  padding: 16px 24px 20px;
  font-size: 14px;
  line-height: 1.7;
}

/* A. ラベル */
.faq-a-label {
  font-weight: 700;
  margin-right: 4px;
}

/* 開いている時に高さを自動に近づけるため大きめのmax-heightをセット */
.faq-item.is-open .faq-answer {
  max-height: 500px; /* 1問あたりこれだけあれば十分に収まる想定 */
}

@media (max-width: 900px) {
    .faq {margin: 40px auto;
    }
}

/* SP の微調整 */
@media (max-width: 768px) {
  .faq-inner {
    padding: 28px 0 20px;
  }

  .faq-item {
    width: calc(100% - 20px);
  }

  .faq-question {
    padding: 14px 18px;
  }

  .faq-answer p {
    padding: 12px 18px 16px;
  }
}



/* =====================================
   MAP SECTION
===================================== */
/* セクション全体 */
.map-section {
    width: 90%;
    max-width: 1900px;
    margin: 80px auto;
    padding: 60px;
    border: 5px solid #C1272D;
    border-radius: 15px;
    background: #fff;
}

/* 横並びレイアウトの親 */
.map-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/* 左ブロック */
.map-left {
    width: 70%;
}

/* 見出し */
.map-heading {
    font-size: clamp(32px, 3vw, 48px);
    font-weight: 700;
    margin-bottom: 8px;
}

.map-note {
    font-size: clamp(14px, 1vw, 18px);
    margin-bottom: 24px;
}

/* 赤いボタン3つ */
.map-tags {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.map-tag {
    background: #C1272D;
    color: #fff;
    font-size: clamp(16px, 1.5vw, 22px);
    padding: 12px 32px;
    border-radius: 30px;
    font-weight: 700;
    display: inline-block;
}

/* 下の説明文章 */
.map-text {
    font-size: clamp(16px, 1.2vw, 20px);
    line-height: 1.7;
}

/* 右側：地図画像 */
.map-right {
    width: 30%;
    display: flex;
    justify-content: center;
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
}

/* スマホ・タブレット（〜900px）：地図を背景に、テキストを上に載せる */
@media (max-width: 900px) {

  .map-section {
    position: relative;
    overflow: hidden;
    padding: 100px 16px;                /* 余白を少し減らす */
  }

  /* 地図を背景として敷く（全体が入るように） */
  .map-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/map-1.png");
    background-repeat: no-repeat;
    background-position: center center;  /* 中央に表示 */
    background-size: contain;           /* ★ 画像全体が入るようにフィット */
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
  }

  /* 中身は全部、背景の上に載せる */
  .map-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }

  .map-left {
    width: 100%;
  }

  /* 右側の地図画像は使わない（背景にしたため） */
  .map-right {
    display: none;
  }

  .map-heading {
    font-size: clamp(24px, 5vw, 32px);
    margin-bottom: 8px;
  }

  .map-note {
    margin-bottom: 16px;
  }

  /* ★ タグ3つは900px以下でもずっと横並び ★ */
  .map-tags {
    display: flex;
    flex-wrap: nowrap;                 /* 折り返さない */
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    max-width: 480px;                  /* ここで横幅を制限 */
    margin: 0 auto 24px;
    gap: 8px;
  }

  .map-tag {
    flex: 1 1 0;
    box-sizing: border-box;
    padding: 10px 6px;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;               /* 1行に収める */
    border-radius: 999px;
    text-align: center;
  }

  .map-text {
    font-size: 14px;
    line-height: 1.6;
  }
}




/* =========================
   Footer
========================= */
/* ===== Footer Base ===== */
#footer {
    background: #FFFFFF;
    padding: 60px 0;
    margin-top: 100px;
    border-top: 5px solid #C1272D;
}

.footer-inner {
    width: 90%;
    max-width: 1400px;
    margin: auto;
}

/* ===== 上段：ロゴ・電話・ボタン ===== */
.footer-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 50px;
}

/* ロゴ */
.footer-logo img {
    width: 180px;
    height: auto;
}

/* 電話ブロック */
.footer-tel {
    text-align: center;
}

.footer-tel-text {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.footer-tel-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    text-decoration: none;
    color: #1B263B;
    font-weight: 700;
    font-size: 22px;
}

.footer-tel-icon {
    width: 28px;
    height: auto;
}

/* お問い合わせボタン */
.footer-btn {
    background: #E60012;
    color: #fff;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
    min-width: 180px;
}

.footer-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

/* ===== 中段：会社概要テーブル ===== */
.footer-company {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 40px;
}

.footer-row {
    display: flex;
    border-bottom: 1px solid #ddd;
    padding: 18px 0;
}

.footer-row:last-child {
    border-bottom: none;
}

.footer-label {
    width: 180px;
    font-size: 20px;
    font-weight: 700;
    color: #C1272D;
}

.footer-value {
    font-size: 20px;
    font-weight: 500;
    color: #333;
}

/* ===== コピーライト ===== */
.footer-copy {
    text-align: center;
    font-size: 16px;
    color: #555;
    margin-top: 20px;
}

/* ===== SP レスポンシブ ===== */
@media (max-width: 768px) {

    .footer-top {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .footer-row {
        flex-direction: column;
        gap: 10px;
    }

    .footer-label {
        width: auto;
    }
}










/* =====================================================
   contact.html 専用スタイル
====================================================== */

.contact-section {
    margin-top: 100px;
}

.contact-main {
  padding: 80px 0 120px;
}

.contact-inner {
  width: 90%;
  max-width: 720px;
  margin: 0 auto;
  color: #333;
}

.contact-heading-block {
    text-align: center;
}

.contact-title {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 24px;
}

.contact-lead,
.contact-note {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 12px;
}

.contact-note {
  margin-top: 12px;
}

.contact-form {
  margin-top: 40px;
}

/* 各行 */
.contact-row {
  margin-bottom: 22px;
}


/* ラベルの親ボックス：横並びにして余白を調整 */
.contact-label-wrapper {
    display: flex;
    align-items: center;
    gap: 10px; /* ←ここが黒ラベルと必須ラベルの間隔 */
    margin-bottom: 4px; /* ←入力欄との余白（詰め気味） */
}

/* 黒いラベル（会社名など） */
.contact-label-black {
    background: #000;
    color: #fff;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    display: inline-block;
}

/* 必須ラベル（灰色塗り） */
.contact-label-required {
    background: #e5e5e5;
    color: #333;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
}
/* 共通 input / textarea */
.contact-input,
.contact-textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  box-sizing: border-box;
}

.contact-input:focus,
.contact-textarea:focus {
  outline: none;
  border-color: #1B263B;
}

/* お名前（姓・名） */
/* --- お名前：横並び 50%ずつ --- */
.contact-name-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.contact-name-col {
    width: 50%;
}

.contact-name-label {
    display: block;
    font-size: 14px;
    margin-top: 6px;
    color: #333;
}

.contact-name-col .contact-input {
    width: 100%;
}

/* プライバシー文言 */
.contact-privacy {
  font-size: 12px;
  line-height: 1.7;
  margin-top: 8px;
}

.contact-privacy a {
  color: #333;
  text-decoration: underline;
}

/* 送信ボタン */
.contact-submit-wrap {
  text-align: center;
  margin-top: 32px;
}

.contact-submit-btn {
  display: inline-block;
  min-width: 260px;
  padding: 14px 32px;
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  background-color: #1B263B;
  color: #fff;
  cursor: pointer;
}

.contact-submit-btn:hover {
  opacity: 0.9;
}


/* 例：セレクトの矢印カスタム（必須ではない） */
select.contact-input {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: url("../img/icon-select.png"); /* 矢印画像があれば */
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 32px; /* 矢印ぶんの余白 */
}


/* スマホ調整 */
@media (max-width: 599px) {
  .contact-main {
    padding: 60px 0 80px;
  }

  .contact-row-name .contact-name-fields {
    flex-direction: row; /* そのまま横並びだが、狭い場合は column にしてもOK */
    gap: 10px;
  }
}



/* ===============================
   430px 以下の細かい調整
================================= */
@media (max-width: 430px) {

  /* 全体の文字を少しだけ小さめに */
  body {
    font-size: 14px;
  }

  /* ヘッダー周り */
  .header {
    padding: 6px 0;
  }

  .header-inner {
    gap: 8px;
  }

  .header-logo img {
    height: 40px;
  }

  .header-tel {
      flex-direction: column;
      gap: 4px;
  }
  .header-tel-link {
      flex-direction: column;
      gap: 2px;
  }

  .tel-number {
    font-size: 18px;
  }

  .header-nav ul {
    gap: 10px;
  }

  .header-nav a {
    font-size: 13px;
  }

  .header-btn {
    font-size: 14px;
    padding: 10px 18px;
  }

  /* FV 周り */
  .fv {
    padding: 40px 0 40px;
    margin-bottom: 40px;
  }

  .fv-title {
    margin-bottom: 18px;
  }

  .fv-lead {
    font-size: 15px;
    margin: 16px 0 24px;
  }

  .fv-badge {
    width: 100px;
    height: 100px;
  }

  .fv-badge-text {
    font-size: 11px;
  }

  /* strengths */
  .strengths {
    padding: 0 0 40px;
  }

  .strengths-box {
    padding: 28px 16px;
  }

  /* 三角 */
  .section-arrow {
    border-left: 100px solid transparent;   /* ← お好みで調整OK */
    border-right: 100px solid transparent;  /* ← お好みで調整OK */
    border-top:50px solid #1B263B;        /* 三角形の色（今回は赤） */
}

  /* CTA共通 */
  /* .cta-section {
    padding: 40px 0;
  }

  .cta-heading {
    font-size: 20px;
  }

  .cta-subheading {
    font-size: 16px;
  }

  .cta-note {
    font-size: 13px;
  } */

  /* ボタンを縦並びにする */
  /* .cta-buttons {
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
  }

  .cta-btn {
    width: 100%;
    max-width: 100%;
    padding: 16px 16px;
    border-radius: 12px;
    font-size: 14px;
    gap: 14px;
    line-height: 1.4;
  }

  .cta-btn-icon img {
    width: 52px;
  }

  .cta-btn-line1 {
    font-size: 1rem;
  }

  .cta-btn-line2,
  .cta-btn-line3,
  .cta-tel-time {
    font-size: 0.85rem;
  }

  .cta-tel-number {
    font-size: 1.6rem;
  } */

  /* pain */
  .pain {
    padding: 32px 16px;
  }

  .pain-title {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .pain-content {
    column-gap: 24px;
  }

  /* pain：430px以下で✔とテキストの高さをそろえ、文字を小さくする */
  .pain-list li {
    align-items: center;        /* ✔とテキストを縦方向中央揃え */
    margin-bottom: 14px;        /* 行間を少し詰める */
  }

  .pain-check {
    font-size: 18px;            /* ✔は少し小さめに */
    line-height: 1;             /* 上下の余白を詰める */
    margin-right: 8px;          /* テキストとの間隔を少し狭める */
  }

  .pain-text {
    font-size: 14px;            /* テキストを小さくして1行に収まりやすく */
    line-height: 1.4;           /* 行送りを詰める */
  }

  /* service */
  .service {
    padding: 32px 16px;
    margin: 0 auto 60px;
  }

  /* plan */
  .plan {
    padding: 32px 16px;
    margin: 60px auto;
  }

  .plan-right-text {
    font-size: 20px;
  }

  .plan-example-label {
    font-size: 18px;
  }

  /* solution */
  #solution {
    padding: 60px 0;
  }

  .solution-inner {
    width: 90%;
  }

  .solution-heading {
    font-size: 22px;
    margin-bottom: 32px;
  }

  /* flow */
  .flow-section {
    padding: 40px 0;
  }

  /* FAQ */
  .faq {
    width: 90%;
    margin: 80px auto;
  }

  .faq-heading {
    margin-bottom: 40px;
    font-size: 20px;
  }

  /* MAP */
  .map-section {
    padding: 32px 16px;
    margin: 60px auto;
  }

  .map-heading {
    font-size: 22px;
  }

  /* MAP：430px以下でタグ3つを横並びに収める */
  .map-tags {
      display: flex;
      justify-content: space-between;  /* 横方向に均等配置 */
      align-items: stretch;
      flex-wrap: nowrap;               /* 折り返さず1行に収める */
      gap: 4px;                        /* 隙間をさらに狭める */
  }

  .map-tag {
      flex: 1 1 0;                     /* 3つを等幅に伸ばす */
      box-sizing: border-box;
      text-align: center;
      padding: 12px 10px;                /* 余白を小さくして高さと幅を節約 */
      font-size: 11px;                 /* 文字サイズを小さめに */
      line-height: 1.2;                /* 行間も詰める */
      white-space: nowrap;             /* 1行に収める（改行させない） */
  }

  /* Footer */
  #footer {
    padding: 40px 0;
    margin-top: 60px;
  }

  .footer-row {
    padding: 12px 0;
  }

  .footer-label,
  .footer-value {
    font-size: 16px;
  }

  .footer-copy {
    font-size: 14px;
  }

  /* contact ページ */
  .contact-main {
    padding: 60px 0 80px;
  }

  .contact-title {
    font-size: 22px;
  }

  .contact-lead,
  .contact-note {
    font-size: 13px;
  }

  .contact-label-black {
    font-size: 14px;
    padding: 4px 12px;
  }

  .contact-label-required {
    font-size: 12px;
    padding: 4px 10px;
  }

  .contact-input,
  .contact-textarea {
    font-size: 14px;
    padding: 8px 10px;
  }

  /* FVタイトルを2行に強制する（1行目と2行目をそれぞれ1行で表示） */
  .fv-title-line1,
  .fv-title-line2 {
      display: block;
      white-space: nowrap !important; /* 1行に収める（途中で折り返さない） */
      font-size: 24px;                /* ベースを24pxに統一 */
  }
  .fv-title {
      text-align: left;
  }
}



/* =====================================
   SP固定CTA（共通）
===================================== */

.sp-fixed-cta {
    display: none;              /* デフォルトは非表示 → 400px以下で表示 */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 10px;
    z-index: 9999;
    background: transparent;    /* 背景はボタンで埋まるので透明 */
}

.sp-cta-btn {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 8px;
    border-radius: 999px;
    margin: 0 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* 左：電話ボタン */
.sp-cta-btn--tel {
    background: #000;           /* 黒系：お電話 */
}

/* 右：フォームボタン */
.sp-cta-btn--form {
    background: #C1272D;        /* 赤系：フォーム */
}

/* ===============================
   400px 以下のレイアウト調整
   （ヘッダー固定＋下部CTA固定）
================================= */
@media (max-width: 430px) {

  /* 画面上下に余白を確保（固定ヘッダー＆固定CTAぶん） */
  body {
    padding-top: 0;        /* ヘッダー直下からFVを表示するため上の余白をなくす */
    padding-bottom: 80px;  /* 下固定CTAぶんの余白 */
  }

  /* ヘッダー：画面上部に固定 */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 6px 10px;
    z-index: 9000;
  }

  /* ロゴ＋ハンバーガーだけに絞るイメージ */
  .header-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  /* 中央の電話エリアのテキストだけ非表示（ハンバーガーは残す） */
  .header-tel {
    display: none;
  }

  /* ヘッダーの大きいCTAボタンは非表示 */
  .header-btn {
    display: none;
  }

  /* ロゴ */
  .header-logo img {
    height: 32px;
  }

  /* ハンバーガーは右上に */
  .hamburger-btn {
    display: flex;
  }

  /* 400px以下でSP固定CTAを表示 */
  .sp-fixed-cta {
    display: flex;
  }

  .fv-badges-wrap img {
    display: none;
  }

  .fv-title {
    margin-top: 30px;
  }

  /* 「初期費用0」部分（赤帯） */
  .fv-title-line1 .fv-title-highlight {
    font-size: 24px !important;
  }

  /* 「まるごとセットアップ！」部分（赤帯） */
  .fv-title-line2 .fv-title-highlight {
    font-size: 24px !important;
  }

  /* 「で」「オフィス環境を」の部分（黒文字） */
  .fv-title-office,
  .fv-title-line1 {
    font-size: 24px !important;
  }
  .fv-title-line2 {
    margin-top: 0;
}
  .fv-title-line1 {
        margin-bottom: 0;       /* 幅が足りないので折り返し許可 */
    }

    .fv-title-office::after {
    border-bottom: 5px solid #C1272D;
    left: 45%;
}
    .fv-title-office {
        margin-left: 0;
        padding-left: 0;
    }
    .strengths-subtitle {
        font-size: 16px;
    }
    .strengths-title {
        font-size: 20px;
    }
    .strengths-note {
        font-size: 16px;
    }
    .service-title {
        font-size: 20px;
    }

    .plan {
    margin: 10px auto;
    }
    #solution {
    padding: 0;
    }

}