/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Noto Sans JP', sans-serif; color: #1a1a1a; margin: 0; padding: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

:root {
  --navy: #0d1f4e;
  --gray: #444;
  --navy-mid: #1a3a7a;
  --red: #e63329;
  --yellow: #f5c518;
  --light-blue: #e8f4fd;
  --light-blue2: #d6ecfa;
  --white: #ffffff;
}

/* ===== HEADER ===== */
.site-header { background: var(--navy); padding: 12px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo-img { height: 40px; }
.header-tel { display: flex; align-items: center; gap: 8px; color: #fff; }
.tel-icon { width: 20px; height: 20px; }
.tel-label { font-size: 12px; opacity: 0.8; }
.tel-number { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: 0.05em; }
.tel-hours { font-size: 11px; opacity: 0.7; }
.btn-cta-header { background: var(--red); color: #fff !important; border: none; padding: 10px 20px; border-radius: 30px; font-weight: 700; font-size: 14px; white-space: nowrap; transition: opacity 0.2s; display: inline-block; }
.btn-cta-header:hover { opacity: 0.85; }

/* ===== HERO ===== */
.hero-section {
  position: relative;
  overflow: hidden;
  background: url('assets/hero_bg.jpg') center/cover no-repeat;
  background-color: #0a1840;
}
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 24, 64, 0.65);
  z-index: 0;
}
.hero-bg-overlay { display: none; }

/* メインビジュアルラッパー */
.hero-inner-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 72px 32px 60px;
  min-height: 680px;
  text-align: center;
}

/* SVG + CTAボタンの重ね合わせブロック */
.hero-mainvis-block {
  position: relative;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto 32px;
}

/* mainvis_copy.svg — ブロック全幅 */
.hero-mainvis-img {
  width: 100%;
  height: auto;
  display: block;
}

/* CTAボタン — SVG中央下部に重ねる */
/* SVGのボタンエリアは上から約55〜75%仙8近にある */
.hero-cta-overlay {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translateX(-50%);
  z-index: 2;
  width: 42%;
  max-width: 480px;
}
.hero-cta-link {
  display: block;
  width: 100%;
  transition: transform 0.2s, opacity 0.2s;
}
.hero-cta-link:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}
.hero-cta-img {
  width: 100%;
  height: auto;
  display: block;
}

/* medalバッジ行 — PC: 1行4列 */
.hero-badges-wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}
.hero-medals {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  width: 100%;
}
.hero-medal-item {
  flex: 1 1 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
}
.hero-medal-img {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* 旧クラス互換性維持 */
.hero-illust { display: none; }
.hero-content { display: none; }
.hero-title-img { display: none; }
.hero-badges-img { display: none; }

/* Partner badge */
.partner-badge-img { height: 64px; width: auto; margin-bottom: 16px; }

/* ===== PARTNERS ===== */
.section-partners { background: #fff; border-bottom: 1px solid #eee; padding: 24px 0; overflow: hidden; }
.partners-label { font-size: 13px; color: #888; margin-bottom: 16px; }

/* マーキー（無限横スクロール） */
.marquee-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}
/* 左右のフェードアウト効果 */
.marquee-wrap::before,
.marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrap::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}
.marquee-wrap::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}
.marquee-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 16px;
}
.partner-logo-item {
  flex-shrink: 0;
  width: 200px;
  height: 80px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.partner-logo-item:hover {
  border-color: #aac0e0;
  box-shadow: 0 2px 8px rgba(13,31,78,0.1);
}
.partner-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 8px;
}
/* 旧プレースホルダー互換 */
.logo-placeholder {
  display: inline-block;
  background: #f0f0f0;
  color: #999;
  padding: 10px 28px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== SECTION COMMON ===== */
section { padding: 80px 0; }

/* ===== SECTION HEADER COMMON ===== */

/* 背景の大きな英字（明背景用） */
.section-en-bg {
  display: block;
  font-size: 9vw;
  font-weight: 900;
  color: rgba(13,31,78,0.06);
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;        /* はみ出しOK */
  pointer-events: none;
  user-select: none;
  margin-bottom: -0.7em;    /* 見出しにしっかり重なるよう引き上げ */
  position: relative;
  z-index: 0;
  text-align: right;
}
/* 暗背景セクション用（白文字） */
.section-en-bg-light {
  display: block;
  font-size: 9vw;
  font-weight: 900;
  color: rgba(255,255,255,0.06);
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  margin-bottom: -0.7em;
  position: relative;
  z-index: 0;
  text-align: right;}

/* SP: 改行しない最大サイズ（画面幅に収まる最大値） */
@media (max-width: 767px) {
  .section-en-bg,
  .section-en-bg-light {
    font-size: 10vw;
  }
}

/* 左ボーダー付き見出しブロック（赤＋紺の2本線） */
.section-heading {
  position: relative;
  z-index: 1;
  padding-left: 22px;
  /* 赤い細線（上）＋紺の太線（下）を border-image で再現 */
  border-left: 0;
  margin-bottom: 20px;
  display: inline-block;
}
/* 疑似要素で赤＋紺の2本ボーダーを実現 */
.section-heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    to bottom,
    var(--red) 0%,
    var(--red) 35%,
    var(--navy) 35%,
    var(--navy) 100%
  );
  border-radius: 2px;
}
.section-heading-label {
  display: block;
  font-size: 2.4vw;        /* メインタイトルの3.2vwに近い大きさ */
  font-weight: 700;
  color: var(--red);
  margin-bottom: 2px;
  line-height: 1.4;
}
.section-heading-title {
  display: block;
  font-size: 3.2vw;        /* PC: 画面幅の3.2%で大きく表示 */
  font-weight: 900;
  color: var(--navy);
  line-height: 1.3;
  white-space: nowrap;     /* 改行しない */
  margin: 0;
}
/* 暗背景用（白文字） */
.section-heading-title-light {
  display: block;
  font-size: 3.2vw;
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
  white-space: nowrap;
  margin: 0;
}
/* SP: 改行しない最大サイズ */
@media (max-width: 767px) {
  .section-heading-title,
  .section-heading-title-light {
    font-size: 6.5vw;
    white-space: nowrap;
  }
  .section-heading-label,
  .section-heading-label-yellow {
    font-size: 4.5vw;
  }
}
.section-heading-label-yellow {
  display: block;
  font-size: 2.4vw;
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: 2px;
  line-height: 1.4;
}
/* BENEFITSセクション：ボーダーを黄＋白に */
.section-heading[style*="yellow"]::before {
  background: linear-gradient(
    to bottom,
    var(--yellow) 0%,
    var(--yellow) 35%,
    #fff 35%,
    #fff 100%
  );
}

.section-desc { font-size: 15px; color: #555; line-height: 1.8; position: relative; z-index: 1; }
.section-desc-light { font-size: 15px; color: rgba(255,255,255,0.8); line-height: 1.8; position: relative; z-index: 1; }

/* 後方互換（旧クラス） */
.section-header { margin-bottom: 48px; }
.section-label-red { font-size: 18px; font-weight: 700; color: var(--red); margin-bottom: 4px; }
.section-label-yellow { font-size: 18px; font-weight: 700; color: var(--yellow); margin-bottom: 4px; }
.section-title-main { font-size: 32px; font-weight: 900; color: var(--navy); margin-bottom: 16px; }

/* ===== PROBLEMS ===== */
.section-problems { background: var(--light-blue); }
.problem-card { background: #fff; border-radius: 12px; padding: 28px 24px 20px; height: 100%; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #e8edf5; }
.problem-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.problem-icon { width: 64px; height: 64px; flex-shrink: 0; }
.problem-title { font-size: 22px; font-weight: 700; color: var(--navy); margin: 0; line-height: 1.45; }
.problem-text { font-size: 13px; color: #555; line-height: 1.75; margin-bottom: 16px; }
/* 解決できる企業ラベル */
.problem-solve-label { font-size: 13px; font-weight: 700; color: var(--gray); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.problem-diamond { color: var(--navy); font-size: 10px; }
/* 解決できる企業リスト */
.problem-solve-list { list-style: none; padding: 0; margin: 0 0 12px; border-top: 1px solid #dde4ef; }
.problem-solve-list li { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px dashed #dde4ef; font-size: 13px; color: #333; }
.solve-name { color: #333; }
.solve-count { font-weight: 700; color: var(--navy); }
/* タグ行 */
.problem-tags { font-size: 12px; font-weight: 700; color: var(--navy); margin: 0; line-height: 1.6; }
.problem-tags span{ font-weight: 400;}

/* ===== CTA MID ===== */
.section-cta-mid {
  background: radial-gradient(ellipse at center top, #1e50a2 0%, #0d1f4e 60%, #08122b 100%);
  padding: 4em 0 2em; overflow: hidden;
}

/* CTAボタン（hero_cta_btn.png）— SVG下に中央配置 */
.cta-btn-wrap {
  text-align: center;
  padding: 30px 0;
  line-height: 0;
}
.cta-btn-link {
  display: inline-block;
  transition: transform 0.2s, opacity 0.2s;
}
.cta-btn-link:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}
.cta-btn-img {
  max-width: 480px;
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* SVG max-widthコンテナ */
.cta-svg-wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  line-height: 0;
}
.cta-svg-link {
  display: block;
  width: 100%;
  transition: opacity 0.2s;
}
.cta-svg-link:hover {
  opacity: 0.92;
}
.cta-svg-img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキスト＋画像の2列レイアウト */
.cta-mid-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 32px;
}
.cta-mid-text-block {
  flex: 1;
  min-width: 0;
}
.cta-mid-img-block {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-mid-contact-img {
  max-width: 320px;
  width: 100%;
  height: auto;
  display: block;
}

/* ボタン行 */
.cta-mid-btn-wrap {
  text-align: center;
}

/* 新CTAボタン */
.btn-cta-mid-new {
  display: inline-block;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  padding: 18px 56px;
  border-radius: 40px;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(230,51,41,0.45);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  white-space: nowrap;
}
.btn-cta-mid-new:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(230,51,41,0.55);
  background: #c9261d;
  color: #fff;
}
.cta-arrow {
  font-size: 20px;
  margin-left: 6px;
  vertical-align: middle;
}

/* 旧クラス互換 */
.cta-mid-label { font-size: 13px; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.3); display: inline-block; padding: 4px 16px; border-radius: 20px; margin-bottom: 16px; }
.cta-mid-title { font-size: 30px; font-weight: 900; color: #fff; margin-bottom: 16px; line-height: 1.5; }
.cta-mid-accent { color: var(--yellow); }
.cta-mid-desc { color: rgba(255,255,255,0.8); font-size: 15px; margin-bottom: 0; line-height: 1.8; }
.btn-cta-mid { background: var(--red); color: #fff !important; border: none; padding: 16px 48px; border-radius: 40px; font-size: 18px; font-weight: 700; display: inline-block; box-shadow: 0 4px 16px rgba(230,51,41,0.4); transition: transform 0.2s; }
.btn-cta-mid:hover { transform: translateY(-2px); }

/* ===== COMPARISON ===== */
.section-comparison { background: #fff; }

/* 比較表SVG全幅 */
.comparison-svg-wrap {
  width: 100%;
  overflow: hidden;
}
.comparison-svg-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 新比較表レイアウト */
.comparison-outer {
  position: relative;
  /* イラストが上にはみ出る分の余白 */
  padding-top: 200px;
  /* イラストが左右にはみ出る分の余白 */
  margin-left: 0;
  margin-right: 0;
  overflow: visible;
}

/* 女性イラスト: 比較表左側外に配置、下半身が表の上部に重なる */
.comparison-illust-left {
  position: absolute;
  left: -20px;
  top: 0;
  z-index: 3;
}
.comparison-illust-left img {
  width: 220px;
  display: block;
}

/* 男性イラスト: 比較表右側外に配置、下半身が表の上部に重なる */
.comparison-illust-right {
  position: absolute;
  right: -20px;
  top: 0;
  z-index: 3;
}
.comparison-illust-right img {
  width: 220px;
  display: block;
}

/* 吹き出し: イラストの間・上部中央に絶対配置 */
.comparison-speech-bubble {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  white-space: nowrap;
}
.comparison-speech-bubble img {
  width: 320px;
  max-width: 100%;
  display: block;
}

/* 比較表画像 */
.comparison-table-img {
  position: relative;
  z-index: 1;
}
.comparison-table-img img {
  width: 100%;
  display: block;
}

/* 旧スタイル（未使用） */
.comparison-wrap { display: flex; align-items: flex-start; gap: 24px; }
.comparison-table-wrap { flex: 1; }
.comparison-header-note { background: var(--navy); color: #fff; text-align: center; padding: 12px 24px; border-radius: 8px 8px 0 0; font-size: 15px; font-weight: 700; line-height: 1.5; }
.comparison-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.comparison-table th, .comparison-table td { border: 1px solid #ddd; padding: 12px 16px; text-align: center; vertical-align: middle; }
.th-feature { background: #f5f5f5; font-weight: 700; width: 30%; }
.th-us { background: var(--red); color: #fff; font-weight: 700; width: 25%; }
.th-other { background: #f5f5f5; font-weight: 700; width: 22.5%; }
.td-us { background: #fff5f5; font-weight: 700; color: var(--red); }
.check-circle { color: var(--red); font-size: 18px; }
.cross { color: #999; font-size: 18px; }
.triangle { color: #f5a623; font-size: 18px; }
.td-price { background: #fff5f5; }
.price-free { font-size: 24px; color: var(--red); display: block; }
.td-price-other { color: #666; }

/* ===== WHY US ===== */
.section-why-us { background: #F2F8FF; }
/* 1行3列レイアウト */
.why-us-list { display: flex; flex-direction: row; gap: 24px; align-items: stretch; }

/* 各カード */
.why-us-item {
  flex: 1 1 0;
  background: #084AA6;
  border-radius: 12px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  color: #fff;
  text-align: center;
}

/* 3枚目のカード */
.why-us-item--highlight {}

/* イラストエリア */
.why-us-illust {
  flex: 0 0 auto;
  width: 100%;
  height: 140px;
  background: #93DDFF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.why-us-illust img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
}

/* テキストエリア */
.why-us-content { flex: 1; text-align: left; }
.why-us-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #FFFF59;
  line-height: 1.5;
}
.why-us-text {
  font-size: 13px;
  line-height: 1.8;
  color: #fff;
  margin: 0;
}

/* ===== CASE STUDY ===== */
.section-case-study { background: var(--light-blue); }
.case-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); height: 100%; transition: transform 0.2s; }
.case-card:hover { transform: translateY(-4px); }
.case-img-wrap { background: var(--light-blue2); height: 160px; display: flex; align-items: center; justify-content: center; }
.case-illust { height: 130px; }
.case-body { padding: 20px; }
.case-tag { display: inline-block; background: var(--light-blue); color: var(--navy); font-size: 12px; padding: 3px 12px; border-radius: 12px; margin-bottom: 10px; font-weight: 700; }
.case-title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.4; }
.case-text { font-size: 13px; color: #555; line-height: 1.7; margin-bottom: 12px; }
.case-result { display: flex; align-items: center; justify-content: flex-end; background: var(--light-blue); padding: 8px 16px; border-radius: 8px; }
.result-label { margin:5px 36px 0 0; font-size: 12px; color: #666; }
.result-value { font-size: 24px; font-weight: 900; color: var(--red); }
.result-unit { font-size: 14px; }

/* ===== USER VOICE ===== */
.section-voice { background: #fff; }
.voice-card { background: var(--light-blue); border-radius: 12px; padding: 24px; height: 100%; transition: transform 0.2s; }
.voice-card:hover { transform: translateY(-4px); }
.voice-stars { color: var(--yellow); font-size: 18px; margin-bottom: 12px; }
.voice-text { font-size: 14px; color: #333; line-height: 1.8; margin-bottom: 16px; }
.voice-author { display: flex; align-items: center; gap: 12px; }
.voice-avatar { width: 48px; height: 48px; border-radius: 50%; }
.voice-name { font-size: 14px; font-weight: 700; color: var(--navy); margin: 0 0 24px; }
.voice-company { font-size: 12px; color: #888; margin: 0; }

/* ===== BENEFITS ===== */
.section-benefits { background: var(--light-blue); position: relative; }
.section-benefits .section-title-main { color: var(--navy); }
.benefit-card { background: #fff; border: 1px solid #d8e4f0; border-radius: 16px; padding: 28px 20px 28px; text-align: left; color: var(--navy); height: 100%; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.benefit-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,0.10); }
.benefit-illust { width: 100%; max-width: 180px; height: auto; margin: 0 auto 20px; display: block; }
.benefit-title { font-size: 20px; font-weight: 900; color: #1a2e5a; margin-bottom: 12px; line-height: 1.4; }
.benefit-title span { font-size: 13px; color: var(--yellow); display: block; }
.benefit-text { font-size: 13px; color: #1a2e5a; line-height: 1.7; }
.benefit-card-offset { margin-top: 0; }
@media (min-width: 768px) {
  .benefit-card-offset { margin-top: 32px; }
}

/* ===== NATIONWIDE ===== */
.section-nationwide { background: #F2F8FF; }
.nationwide-inner { display: flex; gap: 40px; align-items: flex-start; }

/* 左側カード */
.nationwide-box {
  flex: 0 0 280px;
  background: #084AA6;
  border-radius: 12px;
  padding: 32px 24px;
  color: #fff;
}
.nationwide-box-title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 16px;
  color: #fff;
}
.nationwide-box-num {
  font-size: 40px;
  color: #FFFF59;
  font-weight: 900;
}
.nationwide-box-desc {
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 20px;
  color: #fff;
}
.nationwide-btn-list { display: flex; flex-direction: column; gap: 8px; }
.nationwide-btn {
  background: #fff;
  color: #084AA6;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 6px;
  text-align: center;
}

/* 地図エリア */
.nationwide-map {
  flex: 1;
  position: relative;
  text-align: center;
}
.map-img { max-width: 100%; display: block; }

/* 地域ラベル */
.map-label {
  position: absolute;
  background: #084AA6;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.map-label-num {
  font-size: 18px;
  font-weight: 900;
  color: #FFFF59;
}
.map-note {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 11px;
  color: #666;
  margin: 0;
}

/* ===== HOW IT WORKS ===== */
.section-how { background: #fff; }
.how-steps { display: flex; align-items: stretch; gap: 0; }

/* カード */
.how-step {
  flex: 1;
  background: #EAF4FF;
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  margin-bottom: 40px;
}

/* STEPバッジ */
.step-badge {
  width: 72px;
  height: 72px;
  background: #084AA6;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: -20px auto 0;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.step-badge-label {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.05em;
}
.step-badge-num {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

/* イラストエリア */
.step-illust-wrap {
  background: #EAF4FF;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 16px 0;
  height: 220px;
  flex-shrink: 0;
}
.step-illust {
  width: 100%;
  max-width: 160px;
  height: 180px;
  object-fit: contain;
  display: block;
}

/* テキスト・ボタンエリア */
.step-body {
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.step-title {
  font-size: 17px;
  font-weight: 900;
  color: #084AA6;
  margin-bottom: 8px;
  line-height: 1.4;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.step-text {
  font-size: 13px;
  color: #333;
  line-height: 1.7;
  margin-bottom: 16px;
  text-align: left;
  width: 100%;
  flex: 1;
}

/* CTAボタン */
.btn-step-cta {
  display: block;
  width: 100%;
  background: #084AA6;
  color: #FFFF59 !important;
  font-size: 15px;
  font-weight: 900;
  padding: 12px 8px;
  border-radius: 8px;
  text-align: center;
  line-height: 1.4;
  transition: opacity 0.2s;
}
.btn-step-cta:hover { background: #084AA6 !important; border: 1px solid #084AA6 !important;}

/* 矢印 */
.step-arrow-tri {
  font-size: 24px;
  color: #084AA6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 4px;
  margin-top: 60px;
}

/* 旧スタイルの互換性維持 */
.btn-navy { background: var(--navy); color: #fff !important; border: none; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 700; transition: opacity 0.2s; display: inline-block; }
.btn-navy:hover { opacity: 0.85; }

/* ===== FAQ ===== */
.section-faq { background: var(--light-blue); }
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

/* FAQ アイテム全体 */
.faq-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

/* Q行（青背景ヘッダー） */
.faq-question-new {
  background: #084AA6;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
}
.faq-question-text {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  flex: 1;
}

/* A行（白背景） */
.faq-answer-new {
  background: #fff;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
}
.faq-answer-text {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin: 0;
  flex: 1;
  padding-top: 4px;
}

/* Q/A バッジ共通 */
.faq-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  flex-shrink: 0;
  line-height: 1;
}
/* Qバッジ：白背景・青文字 */
.faq-badge-q {
  background: #fff;
  color: #084AA6;
}
/* Aバッジ：青背景・白文字 */
.faq-badge-a {
  background: #084AA6;
  color: #fff;
}

/* レスポンシブ */
@media (max-width: 767px) {
  .faq-question-new { padding: 14px 16px; gap: 12px; }
  .faq-question-text { font-size: 14px; }
  .faq-answer-new { padding: 16px; gap: 12px; }
  .faq-answer-text { font-size: 13px; }
  .faq-badge { width: 30px; height: 30px; font-size: 14px; }
}

/* ===== FINAL CTA ===== */
.section-final-cta {
	  background: radial-gradient(ellipse at center top, #1e50a2 0%, #0d1f4e 60%, #08122b 100%);
  padding: 2em 0; overflow: hidden;
}
.final-cta-inner { text-align: center; padding-top: 48px; }
.final-cta-contact-img-wrap { margin-bottom: 32px; }
.final-cta-contact-img { max-width: 600px; width: 100%; height: auto; display: block; margin: 0 auto; }
.final-cta-sub { font-size: 16px; color: rgba(255,255,255,0.8); margin-bottom: 8px; }
.final-cta-title { font-size: 32px; font-weight: 900; color: #fff; margin-bottom: 16px; line-height: 1.5; }
.final-cta-accent { color: var(--yellow); }
.final-cta-desc { font-size: 15px; color: rgba(255,255,255,0.8); margin-bottom: 40px; line-height: 1.8; }
.contact-form-wrap { background: #fff; border-radius: 16px; padding: 40px; max-width: 600px; margin: 0 auto; text-align: left; }
.form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.form-logo { height: 36px; }
.form-icon { width: 36px; height: 36px; }
.form-title { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 4px; text-align: center; }
.form-subtitle { font-size: 13px; color: #888; text-align: center; margin-bottom: 24px; }
.form-group { margin-bottom: 16px; }
.form-group label { font-size: 14px; font-weight: 700; color: var(--navy); display: block; margin-bottom: 6px; }
.form-control { width: 100%; border: 1px solid #ddd; border-radius: 6px; padding: 10px 14px; font-size: 14px; font-family: inherit; transition: border-color 0.2s; }
.form-control:focus { outline: none; border-color: var(--navy); }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-item { font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.form-privacy { font-size: 12px; color: #888; text-align: center; margin-bottom: 16px; }
.form-privacy a { color: var(--navy); text-decoration: underline; }
.form-buttons { display: flex; gap: 12px; justify-content: center; }
.btn-form-back { background: #999; color: #fff; border: none; padding: 12px 28px; border-radius: 30px; font-size: 15px; font-weight: 700; cursor: pointer; }
.btn-form-submit { background: var(--red); color: #fff; border: none; padding: 12px 36px; border-radius: 30px; font-size: 15px; font-weight: 700; box-shadow: 0 4px 12px rgba(230,51,41,0.3); transition: transform 0.2s; cursor: pointer; }
.btn-form-submit:hover { transform: translateY(-2px); }

/* ===== FOOTER ===== */
.site-footer { background: var(--navy); padding: 48px 0 24px; color: rgba(255,255,255,0.7); }
.footer-inner { display: block; gap: 40px; margin-bottom: 32px; text-align: center;}
.footer-logo { height: 48px; margin-bottom: 12px; filter: brightness(0) invert(1); }
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.4); margin: 0 auto; text-align: center;}
ul.footer-link{ text-align: center; font-size: 13px;}
ul.footer-link li{ margin: 8px; display: inline-block;}
ul.footer-link li:hover{ text-decoration: underline;}
.footer-p{ background: white; border-radius: 16px; max-width: 400px; color: #333; margin: 12px auto 0; padding: 8px 0; font-size: 13px;}

/* ===== ANIMATIONS ===== */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.arrow { margin-left: 6px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
	.pc-only{ display: none;}
  .header-center { display: none; }
  .hero-section{ padding: 16px 0;}
  .hero-illust { display: none; }
  .hero-title { font-size: 26px; }
  .hero-num { font-size: 40px; }
  /* Hero スマホ対応 */
  .hero-cta-img{ margin: 3em 0 1em;}
  .hero-inner-wrap { padding: 24px 0 32px; min-height: auto; }
  .hero-mainvis-block { margin-bottom: 20px; }
  .hero-mainvis-img { max-width: 100%; }
  /* CTAオーバーレイ SP調整 */
  .hero-cta-overlay {
	  position: relative;
    width: 80%;
    top: 60%;
  }
  .cta-btn-wrap { padding: 30px 0 0;}
  /* medal SP: 2行2列 */
  .hero-medals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .hero-medal-item {
    padding: 8px 4px;
  }
  .hero-medal-img { max-width: 100%; }
  /* CTA MID スマホ対応 */
.section-cta-mid {
  padding: 2em 0 
}
.step-arrow-tri{ display: none;}
  .cta-mid-inner { flex-direction: column; gap: 24px; margin-bottom: 24px; }
  .cta-mid-img-block { width: 100%; }
  .cta-mid-contact-img { max-width: 100%; }
  .cta-mid-title { font-size: 22px; }
  .btn-cta-mid-new { font-size: 15px; padding: 14px 28px; white-space: normal; text-align: center; }
  /* FINAL CTA スマホ対応 */
  .final-cta-contact-img { max-width: 100%; }
  .final-cta-title { font-size: 24px; }
  /* その他 */
  .section-en-bg, .section-en-bg-light { font-size: 40px; }
  .section-title-main { font-size: 24px; }
  .comparison-wrap { flex-direction: column; }
  .comparison-illust-left, .comparison-illust-right { display: none; }
  .why-us-list { flex-direction: column; }
  .why-us-item { flex-direction: column; align-items: center; text-align: center; }
  .why-us-content { text-align: left; }
  .nationwide-inner { flex-direction: column; }
  .how-steps { flex-direction: column; }
  .step-arrow { display: none; }
  .footer-inner { flex-direction: column; gap: 24px; }
  .contact-form-wrap { padding: 24px 16px; }
}