@charset "utf-8";
/* CSS Document */
/* =========================================================
   リマッチ LP / 株式会社 syn
   ※ destyle.css をベースに、LP固有の設定のみ記述
   - モバイルファースト + 768px / 1024px ブレークポイント
   ========================================================= */
/* ---------- CSS変数 ---------- */ :root {
  --orange: #F39C2D;
  --orange-dark: #DC8A1B;
  --orange-light: #FFE7C8;
  --orange-pale: #FFF6EA;
  --line: #06C755;
  --line-dark: #05A848;
  --blue: #4A90C2;
  --blue-dark: #3A7BA8;
  --text: #2E2A26;
  --text-sub: #5A5550;
  --text-mute: #8A8580;
  --bg-blue: #e4f5ff;
  --bg-cream: #FFF8F2;
  --border: #E5E0DC;
  --display: "Noto Sans JP", sans-serif;
}
/* ---------- ベース（destyle.cssに追加する分のみ） ---------- */
html {
  scroll-behavior: smooth
}
body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--text);
  line-height: 1.8;
  background: #fff;
  font-feature-settings: "palt";
}
img {
  max-width: 100%;
  height: auto;
  display: block
}
table {
  border-collapse: collapse
}
button {
  cursor: pointer
}
/* ---------- ユーティリティ ---------- */
@media screen and (min-width: 769px) {
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
     !important
  }
}
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
}
.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  text-align: center;
  color: #1D4E6E;
  letter-spacing: .04em;
  line-height: 1.5;
  margin-bottom: 24px;
}
.section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background: #2D7EAA;
  margin: 14px auto 0;
}
.section-subtitle {
  text-align: center;
  color: var(--text-sub);
  font-size: 18px;
  margin-bottom: 36px
}
/* マーカー風ハイライト（汎用） */
.highlight {
  background: linear-gradient(transparent 50%, #E5F5FF 50%);
  padding: 0 2px;
}
/* ---------- ヘッダー ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 100;
  border-bottom: 1px solid var(--border)
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  max-width: 1200px;
  margin: 0 auto
}
.logo {
  display: inline-block;
  line-height: 0
}
@media screen and (min-width: 769px) {
.logo img {
  height: 68px;
  width: auto;
  background: transparent
}
}
@media screen and (max-width: 768px) {
.logo img {
  height: 50px!important;
  width: auto;
  background: transparent
}	
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px
}
/* 画像ボタン（ヘッダー・ヒーローで使用） */
.btn-img {
  display: inline-block;
  line-height: 0;
  transition: opacity .2s, transform .15s
}
.btn-img:hover {
  opacity: .85;
  transform: translateY(-1px)
}
.btn-img img {
  display: block;
  height: 50px;
  width: auto;
  background: transparent;
  max-width: 100%
}
.btn-img--tel {
  display: none
}
.btn-img--lg img {
  height: 64px
}
/* 旧スタイル版（料金プラン・フッターCTA で使用） */
.tel-link {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  padding: 10px 20px;
  border-radius: 999px;
  transition: background .2s
}
.tel-link:hover {
  background: var(--orange-dark)
}
.tel-link .icon {
  width: 14px;
  height: 14px;
  fill: currentColor
}
.line-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--line);
  color: #fff;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: .85rem;
  transition: background .2s, transform .15s
}
.line-btn:hover {
  background: var(--line-dark);
  transform: translateY(-1px)
}
.line-btn .icon {
  width: 16px;
  height: 16px;
  fill: currentColor
}
body {
  padding-top: 60px
}
@media(min-width:768px) {
  .header-inner {
    padding: 12px 24px
  }
  .tel-link {
    display: inline-flex
  }
  .line-btn {
    padding: 11px 22px;
    font-size: .9rem
  }
  .btn-img--tel {
    display: inline-block
  }
  body {
    padding-top: 68px
  }
  .section-title {
    font-size: 2rem;
    margin-bottom: 32px
  }
  .section-title::after {
    width: 100px;
    margin-top: 18px
  }
}
/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  background: #FFF;
  overflow: hidden;
  padding: 40px 0 0;
}
.hero .container {
  position: relative;
  z-index: 2
}
.hero-text {
  max-width: 560px
}
.hero-tag {
  display: inline-block;
  background: #2D7EAA;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero-title {
  font-weight: 700;
  font-size: 38px !important;
  line-height: 1.55;
  letter-spacing: .02em;
  color: #1D4E6E;
  margin-bottom: 18px;
}
.hero-title .brand {
  display: block;
  color: #2D7EAA;
  font-size: 56px;
  line-height: 1.2;
  margin-top: 12px;
  font-weight: 900;
  letter-spacing: .05em;
}
.hero-desc {
  color: var(--text);
  font-size: 18px !important;
  line-height: 1.85;
  margin-bottom: 20px;
  font-weight: medium !important;
}
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.hero-pills .pill {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: #1D4E6E;
  font-size: .82rem;
  font-weight: 600;
  padding: 6px 26px;
  border-radius: 999px;
  border: 1.5px solid #2D7EAA !important;
}
.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.hero-cta .line-btn {
  font-size: 1rem;
  padding: 14px 28px;
}
.hero-note {
  font-size: 16px;
  color: var(--text);
  margin-top: 6px;
}
.hero-bg {
  width: 100%;
  height: 260px;
  background-image: url('../img/fv.jpg');
  background-size: cover;
  background-position: center;
  margin-top: 32px;
}
@media(min-width:768px) {
  .hero {
    padding: 64px 0 80px;
    min-height: 520px;
  }
  .hero-text {
    max-width: 50%
  }
  .hero-title {
    font-size: 2rem
  }
  .hero-title .brand {
    font-size: 3.4rem
  }
  .hero-desc {
    font-size: .95rem
  }
  .hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    margin-top: 0;
  }
}
@media(min-width:1024px) {
  .hero {
    padding: 80px 0 100px;
    min-height: 580px;
  }
  .hero-title {
    font-size: 2.2rem
  }
  .hero-title .brand {
    font-size: 3.8rem
  }
}

/* ---------- ヒーロー: スマホ最適化 (背景画像化 + 文字縮小) ---------- */
@media(max-width:767px) {
  /* .hero に fv.jpg を背景として設定 */
  .hero {
    padding: 28px 0 32px;
    background-image: url('../img/fv.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 480px;
  }
  /* 背景画像の上に薄い白オーバーレイ
     (高齢者向けLPなのでテキストの可読性を最優先) */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.45);
    z-index: 1;
  }
  /* container は既に z-index:2 が設定済み (基本ルール) */

  /* 単独配置されていた画像エリアを非表示 (背景に統合済み) */
  .hero-bg {
    display: none !important;
  }

  /* hero-text 幅制限を解除 */
  .hero-text {
    max-width: 100%;
  }

  /* タグ「日野市の高齢者見守りサービス」 */
  .hero-tag {
    font-size: 12px;
    padding: 4px 14px;
    margin-bottom: 12px;
  }

  /* タイトル (38px → 24px) */
  .hero-title {
    font-size: 24px !important;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  /* ブランド名「リマッチ」(56px → 34px) */
  .hero-title .brand {
    font-size: 38px;
    margin-top: 6px;
    line-height: 1.15;
  }

  /* 説明文 (18px → 14px) */
  .hero-desc {
    font-size: 14px !important;
    line-height: 1.75;
    margin-bottom: 14px;
  }

  /* ピル */
  .hero-pills {
    gap: 6px;
    margin-bottom: 16px;
  }
  .hero-pills .pill {
    font-size: 11px;
    padding: 4px 14px;
  }

  /* CTA (LINEボタン+電話) - 文字サイズ調整 */
  .hero-cta .line-btn {
    font-size: 14px;
    padding: 10px 20px;
  }
  .hero-note {
    font-size: 13px;
  }

  /* fv-line.png 画像ボタン: アスペクト比保持して歪み防止
     ※ destyle 等の max-width:100% + 親flexの干渉で歪むのを抑制 */
  .hero img[src*="fv-line"] {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    max-height: none !important;
    display: block;
    object-fit: contain;
    margin: 0;
  }
}

/* ---------- リマッチとは ---------- */
.about {
  padding: 64px 0;
  background: #fff
}
.about-lead {
  text-align: center;
  color: var(--text);
  max-width: 1000px;
  margin: 0 auto 40px;
  font-size: 16px;
  line-height: 1.85;
}
.diagram {
  position: relative;
  max-width: 1100px;
  margin: 0 auto
}
.diagram-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 12px;
  position: relative;
  z-index: 2;
}
/* 中央: バッジ + イラスト */
.diagram-center {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  order: -1;
  margin-bottom: 8px;
}
.diagram-center-badge {
  background: #185FA5;
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 24px !important;
  text-align: center;
  line-height: 1.5;
  position: relative;
  z-index: 3;
  margin-bottom: 30px !important;
}
.diagram-center-img {
  width: 65%;
  max-width: 280px;
  margin-top: -8px;
}
.diagram-center-img img {
  width: 100%;
  height: auto
}
/* 四隅: イラスト + ラベル */
.diagram-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.diagram-node-img {
  width: 100%;
  max-width: 180px;
  margin-bottom: -14px;
}
.diagram-node-img img {
  width: 100%;
  height: auto
}
.diagram-node-label {
  background: #185FA5;
  color: #fff;
  padding: 8px 18px;
  border-radius: 6px;
  position: relative;
  z-index: 2;
  min-width: 130px;
}
.diagram-node-title {
  font-weight: 700;
  font-size: 20px !important;
  line-height: 1.3;
}
.diagram-node-sub {
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 2px;
  opacity: .95;
}
/* X字の対角線 (デスクトップのみ表示) */
.diagram-lines {
  display: none
}
/* 下部: タブレットでできること */
.about-bottom {
  text-align: center;
  margin-top: -80px !important;
}
.about-bottom-label {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  color: var(--text);
  font-size: 20px !important;
  margin-bottom: 18px;
  position: relative;
  padding: 0 22px;
}
.about-bottom-label::before, .about-bottom-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--text);
}
.about-bottom-label::before {
  right: 100%
}
.about-bottom-label::after {
  left: 100%
}
.about-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center
}
.pill-orange {
  display: inline-block;
  background: #FE8B15;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  padding: 8px 26px;
  border-radius: 999px;
}
@media(min-width:768px) {
  .about {
    padding: 80px 0
  }
  .about-lead {
    font-size: 1rem
  }
  .diagram-grid {
    grid-template-columns: 1fr 300px 1fr;
    grid-template-rows: auto auto;
    gap: 40px;
    align-items: center;
    justify-items: center;
  }
  .diagram-center {
    grid-column: 2;
    grid-row: 1 / 3;
    order: 0;
    margin-bottom: 0;
  }
  .diagram-center-badge {
    padding: 18px 32px;
    font-size: 1.15rem
  }
  .diagram-center-img {
    width: 100%;
    max-width: 300px
  }
  .node-1 {
    grid-column: 1;
    grid-row: 1;
    align-self: end
  }
  .node-2 {
    grid-column: 3;
    grid-row: 1;
    align-self: end
  }
  .node-3 {
    grid-column: 1;
    grid-row: 2;
    align-self: start
  }
  .node-4 {
    grid-column: 3;
    grid-row: 2;
    align-self: start
  }
  .diagram-node-img {
    max-width: 220px
  }
  .diagram-node-label {
    padding: 10px 24px;
    min-width: 160px
  }
  .diagram-node-title {
    font-size: 1.05rem
  }
  .diagram-node-sub {
    font-size: .78rem
  }
  .diagram-lines {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }
  .pill-orange {
    font-size: 1rem;
    padding: 10px 32px
  }
}

/* ---------- リマッチとは: スマホ最適化 (PCと同じX字レイアウトを保持) ---------- */
@media(max-width:767px) {
  .about {
    padding: 48px 0;
  }
  /* リード文 - スマホ用に文字小さく */
.section-subtitle {
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 32px;
    padding: 0 4px;
  }

  /* グリッド: PCと同じ3カラム X字レイアウト */
  .diagram-grid {
    grid-template-columns: 1fr 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 14px 6px;
    align-items: center;
    justify-items: center;
  }
  /* 中央エリア (1セルで2行ぶち抜き) */
  .diagram-center {
    grid-column: 2;
    grid-row: 1 / 3;
    order: 0;
    margin-bottom: 0;
  }
  /* 四隅の配置 */
  .node-1 {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }
  .node-2 {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
  }
  .node-3 {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
  .node-4 {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
  }
  /* X字対角線をスマホでも表示 */
  .diagram-lines {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }

  /* 中央バッジ (24px → 11px、padding詰めて中央セルに収める) */
  .diagram-center-badge {
    font-size: 11px !important;
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 6px !important;
    line-height: 1.45;
  }
  /* 中央のおばあちゃんイラスト (280px → 120px) */
  .diagram-center-img {
    width: 100%;
    max-width: 120px;
    margin-top: 0;
  }
  /* 四隅: タイトル (20px → 11px) */
  .diagram-node-title {
    font-size: 11px !important;
    line-height: 1.2;
  }
  /* 四隅: サブ (11px → 9px) */
  .diagram-node-sub {
    font-size: 9px;
    line-height: 1.25;
    margin-top: 1px;
  }
  /* 四隅: ラベルボックス */
  .diagram-node-label {
    padding: 4px 5px;
    min-width: 0;
    border-radius: 4px;
  }
  /* 四隅: イラスト (180px → 90px) */
  .diagram-node-img {
    max-width: 90px;
    margin-bottom: -4px;
  }

  /* 下部「タブレットでできること」: 負マージン無効化 */
  .about-bottom {
    margin-top: 28px !important;
  }
  .about-bottom-label {
    font-size: 15px !important;
    margin-bottom: 14px;
    padding: 0 18px;
  }
  .about-bottom-label::before,
  .about-bottom-label::after {
    width: 10px;
  }
  /* オレンジピル */
  .pill-orange {
    font-size: 13px;
    padding: 6px 18px;
  }
  .about-pills {
    gap: 8px;
  }
}

/* ---------- お悩み ---------- */
.worries {
  padding: 64px 0 80px;
  background: var(--bg-cream)
}
.worry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 14px !important;
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
.worry-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 14px 18px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  transition: transform .25s, box-shadow .25s;
}
.worry-text {
  font-size: .85rem;
  line-height: 1.8;
  color: var(--text);
  font-weight: 500;
}
}
@media screen and (max-width: 768px) {
.worry-grid {
  row-gap: 30px !important;
  column-gap: 3px !important;
}
.worry-card {
  background: #fff;
  border-radius: 6px;
  padding: 20px 3px 10px!important;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  transition: transform .25s, box-shadow .25s;
}
.worry-text {
  font-size: 12px!important;
  line-height: 1.5em;
  color: var(--text);
  font-weight: 500;
}
}

.worry-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, .08);
}
.worry-num {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #2D7EAA;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 20px;
  border-radius: 999px;
  letter-spacing: .03em;
  white-space: nowrap;
}
.worry-img-wrap {
  width: 100%;
  max-width: 170px;
  margin: 0 auto 12px;
  background: transparent;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.worry-img-wrap img {
  width: 100%;
  max-width: 167px !important;
  height: auto;
  display: block;
  object-fit: contain;
}
@media(min-width:768px) {
  .worry-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px
  }
  .worry-card {
    padding: 32px 18px 22px
  }
  .worry-num {
    font-size: .85rem;
    padding: 6px 22px
  }
  .worry-img-wrap {
    max-width: 200px;
    margin-bottom: 14px
  }
  .worry-text {
    font-size: 20px
  }
}
/* ---------- 選ばれる理由 ---------- */
.reasons {
  padding: 64px 0 80px;
  background: #fff
}
.reason-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  max-width: 1100px;
  margin: 0 auto;
}
.reason-card {
  background: #fff;
  border: 1.5px solid #BDD7E5;
  border-radius: 16px;
  padding: 36px 20px 24px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.reason-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgba(45, 126, 170, .15);
}
.reason-num {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  background: #FE8B15;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.1rem;
}
.reason-img-wrap {
  width: 100%;
  max-width: 260px;
  margin: 0 auto 14px;
  aspect-ratio: auto;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.reason-img-wrap img {
  width: 100%;
  max-width: 200px !important;
  height: auto;
  display: block;
  object-fit: contain;
}
.reason-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  color: #1D4E6E;
  margin-bottom: 10px;
}
.reason-desc {
  color: var(--text);
  font-size: .9rem;
  line-height: 1.8;
  font-weight: 500;
}
@media(min-width:768px) {
  .reason-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px
  }
  .reason-card {
    padding: 44px 24px 28px
  }
  .reason-num {
    width: 42px;
    height: 42px;
    font-size: 1.3rem;
    top: -21px
  }
  .reason-title {
    font-size: 1.35rem
  }
  .reason-desc {
    font-size: .95rem
  }
}

/* ---------- 選ばれる理由: スマホ2列レイアウト (お悩みセクションと同じ余白・間隔・文字サイズ) ---------- */
@media(max-width:767px) {
  /* 2列グリッド - お悩みと同じ row-gap: 30px / column-gap: 3px */
  .reason-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px !important;
    column-gap: 3px !important;
  }
  /* 3つ目のカードは2列ぶち抜き + 中央寄せ
     ※ max-width + margin:auto より width + justify-self の方が確実 */
  .reason-card:nth-child(3) {
    grid-column: 1 / -1;
    width: calc((100% - 3px) / 2);   /* 1列分の幅と完全に同じ */
    justify-self: center;
  }
  /* カード内部の余白 - お悩みと同じ padding: 20px 3px 10px */
  .reason-card {
    padding: 20px 3px 10px !important;
  }
  /* 画像エリア */
  .reason-img-wrap {
    max-width: 180px;
    margin-bottom: 10px;
  }
  .reason-img-wrap img {
    max-width: 140px !important;
  }
  /* タイトル (お悩みにはタイトル要素がないので現状維持) */
  .reason-title {
    font-size: 1.05rem;
    margin-bottom: 6px;
    line-height: 1.4;
  }
  /* 説明文 - お悩みと同じ 12px / line-height 1.5em */
  .reason-desc {
    font-size: 12px !important;
    line-height: 1.5em;
  }
  /* 番号バッジ */
  .reason-num {
    width: 30px;
    height: 30px;
    font-size: 1rem;
    top: -15px;
  }
}

/* ---------- 5STEP ---------- */
.steps {
  padding: 64px 0 80px;
  background: var(--bg-blue)
}
.step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding-top: 64px;
}
.step-card {
  background: #fff;
  border-radius: 0;
  padding: 16px 16px !important;
  text-align: center;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
/* STEP バッジ (オレンジ円) - カードの上に16px gap で配置 */
.step-badge {
  position: absolute;
  top: -64px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  background: #FE8B15;
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  line-height: 1;
  font-family: var(--display);
}
.step-badge-label {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .05em;
  margin-bottom: 2px
}
.step-badge-num {
  font-size: 1.05rem;
  font-weight: 900
}
/* アイコン円 */
.step-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  background: #FFEDD9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FE8B15;
  flex-shrink: 0;
}
.step-icon svg {
  width: 30px;
  height: 30px;
  fill: currentColor
}
/* STEP3 特殊タグ "＼まずはここから／" */
.step-tag {
  display: block;
  color: #FE8B15;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: .02em;
}
/* タイトル */
.step-title {
  font-family: var(--display);
  font-weight: 700;
  color: #1D4E6E;
  line-height: 1.45;
  margin-bottom: 14px;
  min-height: auto;
  display: block;
}
.step-title-sub {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: #FE8B15
}
.step-title-main {
  font-size: 1.1rem;
  border-bottom: 1px solid #E9F1F6;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
/* 説明文 */
.step-desc {
  color: var(--text);
  font-size: .82rem;
  line-height: 1.75;
}
@media(min-width:768px) {
  .step-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
  }
  /* STEPバッジの中心を貫く横ライン (STEP1〜STEP5の中心の範囲だけ) */
  .step-grid::before {
    content: "";
    position: absolute;
    top: 24px;
    left: calc((100% - 128px) / 10);
    right: calc((100% - 128px) / 10);
    height: 2px;
    background: #2D7EAA;
    z-index: 1;
  }
  .step-card {
    padding: 16px 16px
  }
  /* カード間の三角矢印 (青) */
  .step-card:not(:last-child)::after {
    content: "▶";
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    color: #2D7EAA;
    font-size: 1.2rem;
    z-index: 2;
  }
}

/* ---------- 5STEP: スマホ2列レイアウト ---------- */
@media(max-width:767px) {
  /* 2列グリッド - バッジがカードに被るので gap を縮小、padding-top も縮小 */
  .step-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 12px;
    padding-top: 24px;
  }
  /* 5つ目のSTEPは2列ぶち抜き + 中央寄せ
     ※ max-width + margin:auto より width + justify-self の方が確実 */
  .step-card:nth-child(5) {
    grid-column: 1 / -1;
    width: calc((100% - 12px) / 2);
    justify-self: center;
  }
  /* カード内部余白: 上部はバッジが被るぶん余白を増やす */
  .step-card {
    padding: 30px 10px 14px !important;
  }
  /* バッジを小さく & カード上端に半分被るように
     48px → 40px、top:-64px → -20px (40pxの半分 = 50%被さる) */
  .step-badge {
    width: 40px;
    height: 40px;
    top: -20px;
  }
  .step-badge-label {
    font-size: .5rem;
  }
  .step-badge-num {
    font-size: .9rem;
  }
  /* タイトル(メイン) 1.1rem → 1rem */
  .step-title-main {
    font-size: 1rem;
    padding-bottom: 8px;
    margin-bottom: 10px;
  }
  /* 説明文 - お悩み/選ばれる理由と同じ 12px / 1.5em */
  .step-desc {
    font-size: 12px;
    line-height: 1.5em;
  }
}

/* ---------- 料金プラン ---------- */
.pricing {
  padding: 64px 0 80px;
}
/* 料金ボックス (青いコンテナ) */
.pricing-box {
  background: var(--bg-blue);
  border-radius: 20px;
  padding: 24px 20px;
  max-width: 1200px;
  margin: 0 auto 32px;
}
/* リード "リマッチ ご利用料金" */
.pricing-lead {
  text-align: center;
  margin-bottom: 16px;
}
.pricing-lead-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #1D4E6E;
  margin-bottom: 4px;
  line-height: 1.4;
}
.pricing-lead-sub {
  font-size: .85rem;
  color: #1D4E6E;
  line-height: 1.4;
}
/* プラン2枚のグリッド */
.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}
/* プランカード (共通: モニタープランは縦並び) */
.plan-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 18px 18px;
  position: relative;
  text-align: center;
  border: 3px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform .25s;
}
.plan-card:hover {
  transform: translateY(-3px)
}
/* 月額プラン (featured) - ラベルと価格を横並びにする */
.plan-card.featured {
  border-color: #FE8B15;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: center;
  column-gap: 12px;
  row-gap: 2px;
padding-top:40px;
}
.plan-card.featured .plan-label {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}
.plan-card.featured .plan-price {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
.plan-card.featured .plan-note {
  grid-column: 1 / 3;
  grid-row: 2;
  text-align: center;
}
/* おすすめバッジ */
.plan-badge {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: #E08040;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 0 42px !important;
  border-radius: 50px;
  letter-spacing: .05em;
  white-space: nowrap;
}
/* プランラベル */
.plan-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: #333;
  margin-bottom: 0;
  line-height: 1.4;
}
/* プラン価格 (ネイビーがデフォルト) */
.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 0;
  line-height: 1;
}
.plan-price .num {
  font-weight: 700;
  font-size: 36px !important;
  color: #1D4E6E;
  line-height: 1;
  font-family: "Inter", "Noto Sans JP", sans-serif !important;
}
.plan-price .unit {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}
/* モニタープランは数字をオレンジに */
.plan-card.monitor .plan-price .num {
  color: #FE8B15
}
/* プラン補足 */
.plan-note {
  font-size: .8rem;
  color: #1D4E6E;
  line-height: 1.4;
}
/* LINE CTA (緑のボックス) */
.pricing-cta {
  text-align: center;
  max-width: 500px;
  margin: 4% auto 0 !important;
}
.line-cta-block {
  display: block;
  background: var(--line);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  padding: 10px 20px 20px !important;
  transition: background .2s, transform .15s;
}
.line-cta-block:hover {
  background: var(--line-dark);
  transform: translateY(-1px);
}
/* タイトル: 両脇に画像アイコンを配置できるよう flex 化 */
@media screen and (min-width: 769px) {
.line-cta-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px !important;
  letter-spacing: .02em;
}	
}
@media screen and (max-width: 768px) {
.line-cta-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px !important;
  letter-spacing: .02em;
}	
}

/* タイトル両脇のアイコン画像 */
.line-cta-title-icon {
  display: inline-block;
  width: auto !important;
  height: 24px !important;
  max-width: none !important;
  max-height: none !important;
  flex-shrink: 0;
  object-fit: contain;
}
.line-cta-note {
  display: block;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.5em;
}
@media(min-width:768px) {
  .pricing {
    padding: 80px 0 100px
  }
  .pricing-box {
    padding: 28px 36px;
    border-radius: 24px;
    margin-bottom: 36px
  }
  .pricing-lead {
    margin-bottom: 18px
  }
  .pricing-lead-title {
    font-size: 1.5rem;
    margin-bottom: 2px
  }
  .pricing-lead-sub {
    font-size: .95rem
  }
  .plan-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px
  }
  .plan-card {
    padding: 26px 24px 20px;
    gap: 6px
  }
  .plan-card.featured {
    column-gap: 16px;
    row-gap: 2px
  }
  .plan-label {
    font-size: 1.05rem
  }
  .plan-price .num {
    font-size: 3.4rem
  }
  .plan-price .unit {
    font-size: 1.05rem
  }
  .plan-note {
    font-size: .88rem
  }
  .line-cta-block {
    padding: 22px 32px
  }
  .line-cta-title {
    font-size: 1.2rem;
    gap: 16px
  }
  .line-cta-title-icon {
    height: 28px !important
  }
  .line-cta-note {
    font-size: .85rem
  }
}
@media screen and (max-width: 768px) {
.plan-grid {
margin-top:30px!important;	
}
.plan-card.featured {
padding-left:5px!important;
padding-right:5px!important;
}
.plan-badge {
font-size:16px!important;
top: -15px!important;
}
.line-cta-title {
font-size: 16px!important;
}
.plan-card.featured {
padding-top:30px!important;
}
}

/* ---------- FAQ ---------- */
.faq {
  padding: 64px 0;
  background: var(--bg-cream)
}
.faq-list {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px
}
.faq-item {
  padding: 20px;
  background: #fff;
  border: 1px solid #C5CDD4;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .25s
}
.faq-item.open {
  border-color: #C5CDD4;
}
.faq-q {
  width: 100%;
  text-align: left;
  padding_: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
  transition: background .2s, border-color .25s, padding-bottom .25s
}
.faq-q_:hover {
  background: var(--orange-pale)
}
/* 開いた時のみ Q と A の間に区切り線 */
.faq-item.open .faq-q {
  border-bottom: 1px solid #C5CDD4;
  padding-bottom: 16px;
}
.faq-q-mark {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: #F97316;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px !important;
}
.faq-q-text {
  flex: 1;
  line-height: 1.6
}
.faq-q-arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--orange);
  transition: transform .3s;
  margin-top: 2px
}
.faq-item.open .faq-q-arrow {
  transform: rotate(180deg)
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease
}
.faq-item.open .faq-a {
  max-height: 500px
}
.faq-a-inner {
  padding: 16px 0;
  display: flex;
  gap: 12px;
  font-size: 15px;
  color: var(--text-sub);
  line-height: 1.85
}
.faq-a-mark {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: #F5F5F5;
  color: #888888;
  font-family: var(--display);
  font-weight: 700;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  margin-top: 1px
}
/* ---------- 関連サービス 円相 ---------- */
.related {
  padding: 64px 0;
  background: #fff;
}
.related-lead {
  max-width: 780px;
  margin: 0 auto 28px;
  text-align: center;
  color: var(--text-sub);
  font-size: .82rem;
  line-height: 1.9
}
/* 写真エリア (900px) */
.related-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px !important;
  margin: 0 auto 28px !important;
}
.related-img-wrap {
  overflow: hidden;
  background: #F5E9D9;
  transition: transform .3s
}
.related-img-wrap:hover {
  transform: scale(1.02)
}
.related-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
/* 料金エリア: .related-pricing 自体を青いボックスにする */
.related-pricing {
  background: #2698D7;
  color: #fff;
  border-radius: 8px;
  padding: 18px 10px;
  text-align: center;
  max-width: 450px;
  margin: 70px auto 0;
}
.related-pricing .related-price-btn {
  display: block;
  background: transparent !important;
  color: #fff !important;
  padding: 0 !important;
  border-radius: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0 0 8px;
  transform: none !important;
}
.related-pricing .related-price-btn:hover {
  background: transparent !important;
  transform: none !important;
}
.related-pricing .related-price-box {
  display: block;
  background: transparent !important;
  color: #fff !important;
  padding: 0 !important;
  border-radius: 0;
  min-width: 0 !important;
}
.related-pricing .related-price-main {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 8px;
  color: #fff;
}
.related-pricing .related-price-note {
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff !important;
  margin: 0 !important;
  opacity: .95;
}
@media(min-width:768px) {
  .related-images {
    gap: 28px;
    max-width: 900px !important;
  }
  .related-pricing {
    padding: 22px 44px
  }
  .related-pricing .related-price-btn, .related-pricing .related-price-main {
    font-size: 1.15rem
  }
  .related-pricing .related-price-note {
    font-size: .82rem
  }
}

/* ---------- 関連サービス 円相: スマホ最適化 (画像 1列) ---------- */
@media(max-width:767px) {
  .related-images {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 400px !important;
  }
}

/* ---------- 運営会社 ---------- */
.company {
  padding: 64px 0;
  background: #E5F5FF;
}
.company-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
  background: #FFF;
  padding: 3%;
}
.company-photo-wrap {
  aspect-ratio: 3/4;
  overflow: hidden;
  max-width: 450px;
  justify-self: center;
  background: #E8E4DE;
  width: 100% !important;
}
.company-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
/* 情報エリア 18px に統一 */
.company-info {
  font-size: 18px
}
/* テーブル: 文字 18px・縦余白も少し広めに */
.company-table {
  width: 100%;
  margin-bottom: 24px
}
.company-table th, .company-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: 18px !important;
  line-height: 1.6;
}
.company-table th {
  font-weight: 700;
  color: var(--text);
  width: 120px;
  white-space: nowrap;
  padding-right: 14px;
}
.company-table td {
  color: var(--text-sub)
}
/* 代表者メッセージのラベル */
.company-message-label {
  font-weight: 700;
  color: var(--text);
  margin: 18px 0 10px;
  font-size: 18px !important;
}
/* 代表者メッセージ本文 18px */
@media screen and (min-width: 769px) {
.company-message {
  color: var(--text-sub);
  font-size: 18px !important;
  line-height: 1.9;
}
}
@media screen and (max-width: 768px) {
.company-message {
  color: var(--text-sub);
  font-size: 14px !important;
  line-height: 1.9em;
}
.company-message-label {
  font-size: 16px !important;
}
}

.company-message p + p {
  margin-top: 10px
}
@media(min-width:768px) {
  /* 写真エリアを 200px → 320px に拡大 */
  .company-grid {
    grid-template-columns: 320px 1fr;
    gap: 48px;
  }
  .company-photo-wrap {
    max-width: none;
    justify-self: stretch;
  }
}

/* ---------- 運営会社: スマホ最適化 ---------- */
@media(max-width:767px) {
  /* テーブル文字サイズ */
  .company-table th,
  .company-table td {
    font-size: 14px !important;
  }
  /* th 幅を縮めて td に幅を回す
     120px → 60px、padding-right 14px → 6px */
  .company-table th {
    width: 60px;
    padding-right: 6px;
  }
}

@media(min-width:768px) {
  /* ---------- フッターCTA (無料モニター募集中) ---------- */
  .footer-cta {
    padding: 48px 0 56px;
    background: #5BA9D6;
    text-align: center;
  }
  /* タイトル「無料モニター募集中」+ 両脇に画像アイコン */
  .footer-cta-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    letter-spacing: .04em;
    line-height: 1.5;
  }
  /* タイトル両脇のアイコン画像 */
  .footer-cta-title-icon {
    display: inline-block;
    width: auto !important;
    height: 32px !important;
    max-width: none !important;
    flex-shrink: 0;
    object-fit: contain;
  }
  /* ボタンエリア: 画像ボタン2つ並列 */
  .footer-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;
  }
  .footer-cta-actions a {
    display: inline-block;
    line-height: 0;
    transition: opacity .2s, transform .15s;
  }
  .footer-cta-actions a:hover {
    opacity: .9;
    transform: translateY(-1px);
  }
  /* 画像ボタン: 高さを統一しつつアスペクト比を維持
   ※ destyle.css 等で img に max-width:100% が掛かると width が縮んで歪むので、
     max-width:none で打ち消し + object-fit:contain で念のためアスペクト比を保証 */
  .footer-cta-actions a img {
    display: block;
    height: 72px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
  }
}
@media(min-width:768px) {
  .footer-cta {
    padding: 64px 0 80px
  }
  .footer-cta-title {
    font-size: 2rem;
    gap: 20px;
    margin-bottom: 40px;
  }
  .footer-cta-title-icon {
    height: 40px !important
  }
  .footer-cta-actions {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
  /* PCでは画像をもう少し大きく */
  .footer-cta-actions a img {
    height: 90px !important
  }
}
.footer-copy {
  padding: 14px 0;
  text-align: center;
  font-size: 12px;
  background: #1D4E6E
}
.footer-copy span {
  color: #fff;
}
@media(min-width:768px) {
  .pcNone {
    display: none !important;
  }
}
@media(max-width:767px) {
  .footer-cta {
    padding: 8px 2px 0 !important;
    background: #5BA9D6;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    /* 初期は画面外(下)に隠す + スライドイン用 transition */
    transform: translateY(100%);
    transition: transform .35s ease, visibility 0s linear .35s;
    visibility: hidden;
  }
  /* JSで .is-visible が付与されたら画面内にスライドイン */
  .footer-cta.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform .35s ease, visibility 0s linear 0s;
  }
  /* タイトル「無料モニター募集中」+ 両脇に画像アイコン */
  .footer-cta-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: 16px;
    color: #fff;
    margin-bottom: 2px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    letter-spacing: .04em;
    line-height: 1.5;
  }
  /* タイトル両脇のアイコン画像 */
  .footer-cta-title-icon {
    display: inline-block;
    width: auto !important;
    height: 20px !important;
    max-width: none !important;
    flex-shrink: 0;
    object-fit: contain;
  }
  .spNone {
    display: none !important;
  }
  .footer-cta .container {
    padding: 0 !important;
  }
  .footer-cta-actions a {
    display: inline-block !important;
    width: 49% !important;
  }
  .footer-cta-actions a img {
    width: 100% !important;
  }
  footer {
    margin-bottom: 85px;
  }
}

/* =========================================================
   スマホ全体: セクション余白を半分に + section-title 縮小
   ※ 一番下に置くことで各セクション個別のスマホ調整より後出しで適用
   ========================================================= */
@media(max-width:767px) {
  /* 各セクションの上下padding を半分に
     about: 48px → 24px / その他: 64px,80px → 32px,40px */
  .about {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .worries,
  .reasons,
  .steps,
  .pricing,
  .faq,
  .related,
  .company {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
  }
  /* セクションタイトル h2 を少し小さく
     1.6rem (25.6px) → 1.3rem (20.8px) */
  .section-title {
    font-size: 1.3rem;
    margin-bottom: 18px;
  }
  .section-title::after {
    width: 60px;
    margin-top: 10px;
  }
}

/* =========================================================
   ハンバーガーメニュー (スマホのみ表示)
   ========================================================= */

/* アンカーリンク先のスクロール位置調整（固定ヘッダー分を考慮） */
section[id] {
  scroll-margin-top: 70px;
}
@media(min-width:768px) {
  section[id] {
    scroll-margin-top: 80px;
  }
}

/* ハンバーガーボタン (3本線) */
.menu-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 130;
  flex-shrink: 0;
}
.menu-toggle span {
  position: absolute;
  left: 50%;
  width: 28px;
  height: 3px;
  background: #1D4E6E;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .3s, opacity .3s, top .3s, background .3s;
}
.menu-toggle span:nth-child(1) { top: 11px; }
.menu-toggle span:nth-child(2) { top: 19px; }
.menu-toggle span:nth-child(3) { top: 27px; }

/* 開いた時のXアニメーション */
.menu-toggle.is-open span:nth-child(1) {
  top: 19px;
  transform: translateX(-50%) rotate(45deg);
}
.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.is-open span:nth-child(3) {
  top: 19px;
  transform: translateX(-50%) rotate(-45deg);
}

/* メニューパネル本体 (画面右からスライドイン) */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 320px;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  z-index: 120;
  padding: 80px 0 32px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s ease, visibility 0s linear .3s;
  visibility: hidden;
  box-shadow: -4px 0 16px rgba(0, 0, 0, .08);
}
.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .3s ease, visibility 0s linear 0s;
}

/* メニュー内の閉じる(X)ボタン - メニューパネル右上に配置 */
.mobile-nav-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 5;
}
.mobile-nav-close::before,
.mobile-nav-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 3px;
  background: #1D4E6E;
  border-radius: 2px;
}
.mobile-nav-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.mobile-nav-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.mobile-nav-close:hover::before,
.mobile-nav-close:hover::after {
  background: #2D7EAA;
}

/* メニュー裏のオーバーレイ */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility 0s linear .3s;
}
.mobile-nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s, visibility 0s linear 0s;
}

/* メニューリスト */
.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-nav-list li {
  border-bottom: 1px solid #E5E0DC;
}
.mobile-nav-list li:first-child {
  border-top: 1px solid #E5E0DC;
}
.mobile-nav-list a {
  display: block;
  padding: 18px 24px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: #1D4E6E;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.mobile-nav-list a:hover,
.mobile-nav-list a:active {
  background: var(--bg-blue);
  color: #2D7EAA;
}

/* PC では非表示 */
@media(min-width:768px) {
  .menu-toggle,
  .mobile-nav,
  .mobile-nav-overlay {
    display: none !important;
  }
}

/* =========================================================
   PC版: フッターCTAの2つのボタンが横並びで重ならないようにする
   - .footer-cta-actions の max-width:720px が画像のnatural幅に対して狭く、
     ボタンがコンテナをはみ出して重なるのを防ぐ
   ========================================================= */
@media(min-width:768px) {
  .footer-cta-actions {
    max-width: 1000px !important;
  }
  .footer-cta-actions a {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(50% - 12px);   /* gap 24px の半分を引いた値 */
  }
  .footer-cta-actions a img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   お悩み / 選ばれる理由: 画像のアスペクト比が違うと小さく見える問題の修正
   - 画像エリアの高さを固定して、object-fit: contain で揃える
   ========================================================= */
@media(min-width:768px) {
  /* お悩み: 画像エリア高さ固定 */
  .worry-img-wrap {
    height: 200px;
    max-width: none;
  }
  .worry-img-wrap img {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
  /* 選ばれる理由: 画像エリア高さ固定 */
  .reason-img-wrap {
    height: 220px;
    max-width: none;
  }
  .reason-img-wrap img {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}
@media(max-width:767px) {
  /* スマホ: 画像エリア高さ固定 (PC より小さく) */
  .worry-img-wrap {
    height: 130px;
  }
  .worry-img-wrap img {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
  .reason-img-wrap {
    height: 140px;
  }
  .reason-img-wrap img {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}
/* =========================================================
   WordPress の global-styles-inline-css が body padding を
   0 に上書きする問題への対策
   ========================================================= */
body {
  padding-top: 60px !important;
}
@media(min-width:768px) {
  body {
    padding-top: 68px !important;
  }
}