/* ========================================
   Reset & Base
======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  color: #333;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fff;
}

/* 見出しは標準で太く */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/* strong/bも明示的に */
strong, b {
  font-weight: 700;
}

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

/* ========================================
   Site Header (Fixed)
======================================== */
:root {
  --site-header-height: 40px;   /* ヘッダーの高さ(PC) */
}

body {
  padding-top: var(--site-header-height);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--site-header-height);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  z-index: 100;
  padding: 0 5%;     /* 下のセクションと同じ左右マージン */
}

.site-header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-header-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

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

.site-header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;   /* ナビとボタンを右側にまとめる */
}

.site-header-link {
  color: #1a1a1a;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.site-header-link:hover {
  color: #F97316;
}

.site-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F97316;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 20px;
  border-radius: 20px;
  border: 2px solid #F97316;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-header-cta:hover {
  background: #fff;
  color: #F97316;
  transform: translateY(-1px);
}

/* スクロール時に固定ヘッダーで隠れないよう、ジャンプ先のオフセットを確保 */
section[id] {
  scroll-margin-top: var(--site-header-height);
}

/* ========================================
   Site Footer (copyright)
======================================== */
.site-footer {
  width: 100%;
  background: #474a50;
  padding: 14px 5%;     /* ヘッダーと同じ左右マージン */
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer-copyright {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ========================================
   Hero Section
======================================== */
.hero {
  /* === ここで微調整 === */
  --hero-pt: 0px;    /* 「名刺管理の全てがわかる完全ガイドブック」の上の余白 */
  --hero-pb: 0px;    /* 「無料でガイドをダウンロードする」の下の余白 */
  /* ==================== */

  position: relative;
  background-color: #003361;
  background-image:
    linear-gradient(45deg, #001643 25%, transparent 25%),
    linear-gradient(-45deg, #001643 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #00002a 75%),
    linear-gradient(-45deg, transparent 75%, #00002a 75%);
  background-size: 2px 2px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-repeat: repeat;
  padding: var(--hero-pt) 10% var(--hero-pb);
  overflow: hidden;
}

/* ヒーロー全面のyakikomi画像（ドットの上、vector_objectの下） */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/yakikomi_hakei.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* ヒーロー範囲のみに表示する右上装飾画像 (vector_object) */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 45vw;
  height: 45vw;
  background-image: url("images/vector_object.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  pointer-events: none;
  z-index: 2;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  align-items: center;
}

.hero-tag {
  display: inline-block;
  color: #fff;
  font-size: 23px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 1px;
  margin-bottom: 15px;
}

.hero-title {
  color: #fff;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-bottom: 15px;
}

.hero-title .accent {
  display: block;
  font-size: 65px;
}

/* Awards image */
.awards-image {
  margin-bottom: 32px;
  max-width: 480px;
  margin-bottom: 15px;
}

.awards-image img {
  width: 100%;
  height: auto;
}

/* CTA Button */
.cta-wrapper {
  display: inline-block;
  max-width: 480px;
}

.cta-image-link {
  display: block;
  transition: opacity 0.2s, transform 0.2s;
}

.cta-image-link:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.cta-image-link img {
  width: 100%;
  height: auto;
}

.hero-visual {
  position: relative;
  text-align: center;
  transform: translateY(80px);
}

.hero-visual img {
  width: 110%;
  height: auto;
  max-width: 780px;
  margin: 0 auto;
}

/* ========================================
   Stats / Intro Card
======================================== */
.intro-section {
  background-color: #003361;
  background-image:
    linear-gradient(45deg, #00002a 25%, transparent 25%),
    linear-gradient(-45deg, #00002a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #001643 75%),
    linear-gradient(-45deg, transparent 75%, #001643 75%);
  background-size: 2px 2px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  padding: 0 5% 60px;
  position: relative;
  overflow: visible;
}

.intro-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;            /* 100vw → 100% (スクロールバー分のはみ出し防止) */
  height: 100%;
  background-image: url("images/yakikomi_hakei.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;

}



/* 左下の名刺 (meisi_2) */
.deco-card-left {
  /* === ここで微調整 === */
  --left-card-x: -12%;          /* 左からの位置(マイナスで左にはみ出る) */
  --left-card-y: 105%;          /* 上からの位置(intro-card基準) */
  --left-card-shift-y: 0%;     /* 縦の位置補正 (translateY) */
  --left-card-width: 200px;    /* 名刺の幅 */
  --left-card-rotate: 13deg;   /* 回転角度 */
  /* ==================== */

  position: absolute;
  left: var(--left-card-x);
  top: var(--left-card-y);
  transform: translateY(var(--left-card-shift-y)) rotate(var(--left-card-rotate));
  width: var(--left-card-width);
  z-index: 10;
  pointer-events: none;
}

.deco-card-left img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
}

/* 右上の名刺 (meisi_1) */
.deco-card-intro-top {
  /* === ここで微調整 === */
  --intro-top-x: -8%;           /* 右からの位置(マイナスで右にはみ出る) */
  --intro-top-y: -47%;           /* 上からの位置(マイナスで上にはみ出る) */
  --intro-top-width: 220px;     /* 名刺の幅 */
  --intro-top-rotate: 0deg;     /* 回転角度 */
  /* ==================== */

  position: absolute;
  right: var(--intro-top-x);
  top: var(--intro-top-y);
  width: var(--intro-top-width);
  transform: rotate(var(--intro-top-rotate));
  z-index: 10;
  pointer-events: none;
}

.deco-card-intro-top img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
}

.intro-card {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  padding: 50px 40px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "title stats"
    "text  stats";
  column-gap: 10px;
  row-gap: -20px;
  align-items: start;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* テキストwrapper内のtitleをintro-card全幅に展開 */
.intro-text-wrapper {
  display: contents;
}

/* タイトルは左カラムに配置 */
.intro-title {
  /* === ここで微調整(PC) === */
  --intro-title-gap: -30px;   /* タイトル↔本文の距離(マイナスで狭く、プラスで広く) */
  /* ======================== */

  grid-area: title;
  font-size: 37px;
  font-weight: 700;
  color: #333333;
  line-height: 1.3;
  margin-bottom: var(--intro-title-gap);
  position: relative;
  z-index: 5;
}

.intro-text {
  grid-area: text;
  font-size: 17px;
  line-height: 1.7;
  color: #333333;
  position: relative;
  z-index: 5;
}

.stats {
  /* === ここで微調整 === */
  --stats-shift-x: 0px;   /* 右寄せ量(プラスで右にずれる / 0でデフォルト位置) */
  /* ==================== */

  grid-area: stats;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px 20px;
  align-items: end;
  align-self: end;
  position: relative;
  z-index: 1;
  transform: translateX(var(--stats-shift-x));
}

.stats-map {
  /* === ここで微調整 === */
  --stats-map-top: -10px;   /* 日本地図の上の余白 */
  /* ==================== */

  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;   /* 中央→左寄せに変更 */
  margin-top: var(--stats-map-top);
}

.stats-map img {
  /* === ここで微調整 === */
  --map-shift-x: -180px;   /* 画像の左右位置(マイナスでさらに左へ / プラスで右へ) */
  /* ==================== */

  width: 180%;
  height: auto;
  max-width: 180%;
  transform: translateX(var(--map-shift-x));
}

.stat-item {
  /* === ここで微調整 === */
  --stat-line-width: 140px;   /* 横線の長さ(数値ブロック全体の幅) */
  /* ==================== */

  border-bottom: 1px solid #333333;
  padding-bottom: 10px;
  max-width: var(--stat-line-width);
  width: 100%;
  margin-left: auto;          /* 右寄せ(線の右端をstats右端に揃える) */
}

/* 最後のstat-item(製造業率)の下の線を非表示
   .stats内のdiv順: stats-map(1) → stat-item×3(2,3,4) → stats-note(5)
   :last-of-type は stats-note を指すため、明示的に4番目を指定 */
.stat-item:nth-of-type(4) {
  border-bottom: none;
}

.stat-label {
  /* === ここで微調整 === */
  --stat-label-gap: -5px;   /* ラベル↔数値の縦間隔(「導入実績」と「7,500社」の間) */
  /* ==================== */

  font-size: 20px;
  color: #0A0A0A;
  margin-bottom: var(--stat-label-gap);
  font-weight: 500;
}

.stat-value {
  font-size: 37px;
  font-weight: 700;
  color: #003869;
  line-height: 1.2;
}

.stat-value .unit {
  font-size: 20px;
	color: #0A0A0A;
  margin-left: 2px;
}

.stats-note {
  /* === ここで微調整 === */
  --stats-note-top: -20px;   /* 「knowledge Suite導入企業別数値」の上の余白 */
  /* ==================== */

  grid-column: 1 / -1;
  font-size: 11px;
  color: #999;
  text-align: right;
  margin-top: var(--stats-note-top);
}

/* ========================================
   Pain Points Section
======================================== */
.pain-section {
  background: #ECEFF1;
  padding: 50px 5%;
  position: relative;
}

.pain-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.section-title {
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pain-item {
  text-align: center;
  padding: 0 28px;
  border-right: 1px solid #FFFFFF;
}

.pain-item:last-child {
  border-right: none;
}

.pain-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pain-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pain-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
  margin-bottom: 10px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pain-text {
  font-size: 17px;
  line-height: 1.4;
  color: #444;
  text-align: center;
}

/* ========================================
   Recommend Section
======================================== */
.recommend-section {
  background: #ECEFF1;
  padding: 0px 5%;
  position: relative;
  overflow: visible;
}

/* 右上の名刺 (recommend-inner内部基準: meisi_3) */
.deco-card-recommend-top {
  /* === ここで微調整 === */
  --rec-top-x: -6%;           /* 右からの位置(マイナスで右にはみ出る) */
  --rec-top-y: -14%;           /* 上からの位置(マイナスで上にはみ出る) */
  --rec-top-width: 160px;     /* 名刺の幅 */
  --rec-top-rotate: 24deg;    /* 回転角度 */
  /* ==================== */

  position: absolute;
  right: var(--rec-top-x);
  top: var(--rec-top-y);
  width: var(--rec-top-width);
  transform: rotate(var(--rec-top-rotate));
  z-index: 10;
  pointer-events: none;
}

.deco-card-recommend-top img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.25));
}

.recommend-inner {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  padding: 50px 60px;
  position: relative;
}

.recommend-title {
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  color: #F97316;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.recommend-item {
  text-align: center;
}

.recommend-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recommend-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.recommend-item-title {
  font-size: 20px;
  font-weight: 700;
  color: #F97316;
  margin-bottom: 10px;
  display: inline-block;
}

.recommend-text {
  font-size: 17px;
  line-height: 1.4;
  color: #444;
}

/* ========================================
   Form Section (画像デザイン版・2カラム)
   - 左:ガイド説明 / 右:入力フォーム
   - 背景:濃グレー / カードは白
   - ラベルは入力欄の上に配置
   - 「必須」マークは赤いピル型バッジ
======================================== */
.form-section {
  background: #5d6770;
  padding: 50px 5%;
  color: #fff;
  position: relative;
}

.form-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 560px;
  gap: 40px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ===== 左カラム: フォーム説明 ===== */
.form-info {
  display: block;
  color: #fff;
}

.form-info-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
  color: #fff;
}

.form-info-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 22px;
  font-size: 15px;
  font-weight: 700;
}
.form-info-checks span {
  color: #fff;
  letter-spacing: 0.02em;
}

.form-info-subtitle {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}

.form-info-desc {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.9);
}

.contents-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contents-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contents-num {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  color: #5d6770;
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.contents-body {
  flex: 1;
  color: #fff;
  line-height: 1.6;
}
.contents-body strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #fff;
}
.contents-body p {
  font-size: 13px;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

/* ===== 右カラム: フォーム本体カード ===== */
#frontFrm {
  background: #fff;
  border-radius: 10px;
  padding: 28px 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e5e5;
  color: #2E3130;
}

/* table を block 化して縦積みレイアウトに */
.table.table--mailform,
.table--mailform {
  width: 100% !important;
  border-collapse: collapse;
  display: block;
}
.table--mailform tbody {
  display: block;
  width: 100%;
}
.table--mailform tr {
  display: block;
  width: 100%;
  margin-bottom: 12px;
}
.table--mailform th,
.table--mailform td {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  border: none;
  background: transparent;
}

/* ラベル部分（th 内） */
.table--mailform th {
  margin-bottom: 4px;
}
.table--mailform .flex-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.table--mailform .label {
  font-size: 14px;
  font-weight: 700;
  color: #2E3130;
  line-height: 1.4;
}

/* 必須/任意マーク（ピル型） */
.table--mailform .mark {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  border: 1px solid #d94a5a;
  color: #d94a5a;
  background: #fff;
}
.table--mailform .mark__red {
  border-color: #d94a5a;
  color: #d94a5a;
  background: #fff;
}
.table--mailform .mark__gray {
  border-color: #9aa0a6;
  color: #9aa0a6;
  background: #fff;
}

/* 入力欄共通 */
.table--mailform input[type="text"],
.table--mailform input[type="email"],
.table--mailform input[type="tel"],
.table--mailform input[type="number"],
.table--mailform input[type="password"],
.table--mailform textarea,
.table--mailform select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding: 8px 12px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #2E3130;
  background: #fff;
  border: 1px solid #C4C7C5;
  border-radius: 4px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.table--mailform input[type="text"]:focus,
.table--mailform input[type="email"]:focus,
.table--mailform input[type="tel"]:focus,
.table--mailform textarea:focus,
.table--mailform select:focus {
  outline: none;
  border-color: #8E918F;
  box-shadow: 0 0 0 2px rgba(142, 145, 143, 0.15);
}

.table--mailform input::placeholder,
.table--mailform textarea::placeholder {
  color: #9aa0a6;
}

.table--mailform textarea {
  min-height: 80px;
  resize: vertical;
}

/* セレクトボックスの矢印を独自に */
.table--mailform select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%232E3130' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 7px;
  padding-right: 36px;
  cursor: pointer;
}

/* 姓・名の横並び（label-side ul） */
.table--mailform ul.label-side {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.table--mailform ul.label-side li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* メールアドレス・電話番号の sub-text（補足表示） */
.table--mailform .sub-text {
  position: relative;
}
.table--mailform .sub-text > div:first-child {
  position: relative;
}
.table--mailform .sub-text > div:last-child {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #9aa0a6;
  pointer-events: none;
  background: transparent;
}
.table--mailform .sub-text input {
  padding-right: 96px;
}

/* width220（select の固定幅指定）を上書き */
.table--mailform .width220 {
  width: 100% !important;
}

/* チェックボックス */
.table--mailform input[type="checkbox"] {
  position: relative;
  cursor: pointer;
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  border-radius: 3px;
  background-color: #fff;
  border: 1.5px solid #8E918F;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  transition: background 0.15s, border-color 0.15s;
  box-sizing: border-box;
  flex-shrink: 0;
}
.table--mailform input[type="checkbox"]:checked {
  background: #0099d8;
  border-color: #0099d8;
}
.table--mailform input[type="checkbox"]:checked::before {
  position: absolute;
  content: '';
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.table--mailform label {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #2E3130;
  cursor: pointer;
  line-height: 1.6;
}

/* 個人情報の取扱い iframe */
.table--mailform .ifpersonal {
  width: 100%;
  margin-bottom: 10px;
}
.table--mailform iframe.ifpersonal {
  width: 100%;
  height: 130px;
  border: 1px solid #C4C7C5;
  border-radius: 4px;
  background: #fff;
  display: block;
  margin-bottom: 10px;
}
.table--mailform .ifpersonal iframe.ifpersonal {
  margin-bottom: 0;
}

/* 同意リンク文の色（画像では赤系のリンク） */
.table--mailform a[href*="personal"],
.table--mailform label a {
  color: #d94a5a;
  text-decoration: underline;
}

/* エラーテキスト */
.table--mailform .error-txt,
.errorValName {
  display: block;
  color: #d94a5a;
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.4;
  text-align: center;
}

/* reCAPTCHA エリア */
.g-recaptcha,
#warning {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 13px;
  color: #d94a5a;
  margin: 24px 0 12px;
}

/* 送信ボタンエリア */
#cvBtnArea,
.taC.mb15,
.btn {
  text-align: center;
  margin-top: 32px;
}

/* #warning（必須項目未入力の注意文） */
#warning {
  text-align: center;
  font-size: 13px;
  color: #d94a5a;
  font-weight: 700;
  margin: 16px 0 8px;
}
#warning.hide {
  display: none;
}

/* reCAPTCHA エリアの中央寄せ */
.g-recaptcha {
  display: flex;
  justify-content: center;
  margin: 20px 0 8px;
}

/* 送信ボタン本体（DiSCUS風：青背景・白文字・ピル型）
   初期状態 = グレー(無効) / .active クラス付与で青(有効) */
.buttonYellow,
a.buttonYellow,
.Btn_inBox,
a.Btn_inBox {
  display: inline-block;
  padding: 14px 80px;
  min-width: 240px;
  background: #c8c8c8;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  cursor: not-allowed;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  letter-spacing: 0.05em;
  box-shadow: none;
}
/* 無効状態のホバー：変化なし */
.buttonYellow:not(.active):hover,
a.buttonYellow:not(.active):hover,
.Btn_inBox:not(.active):hover,
a.Btn_inBox:not(.active):hover {
  background: #c8c8c8;
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* アクティブ状態（必須項目すべて入力済み） */
.buttonYellow.active,
a.buttonYellow.active,
.Btn_inBox.active,
a.Btn_inBox.active {
  background: #0099d8;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 153, 216, 0.25);
}
.buttonYellow.active:hover,
a.buttonYellow.active:hover,
.Btn_inBox.active:hover,
a.Btn_inBox.active:hover {
  background: #007cb0;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 153, 216, 0.35);
  transform: translateY(-1px);
}

/* 明示的に無効化されている場合（後方互換） */
.buttonYellow.disable,
.Btn_inBox.disable {
  background: #c8c8c8;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
}
.buttonYellow.disable:hover,
.Btn_inBox.disable:hover {
  background: #c8c8c8;
  color: #fff;
  transform: none;
  box-shadow: none;
}
.buttonYellow .next,
.Btn_inBox span {
  color: #fff;
}

/* 旧 #contact 系のフォームCSSを無効化（HTML側に id="contact" が無い場合は影響なしだが念のため） */
#contact .row .box.exp input:not([type="checkbox"]),
#contact .row .box.exp textarea,
#contact .row .box.exp select {
  width: 100%;
  border: 1px solid #C4C7C5;
  border-radius: 4px;
}

/* タブレット・スマホ対応 */
@media (max-width: 768px) {
  .form-inner {
    grid-template-columns: 1fr;
    max-width: 600px;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .form-section {
    padding: 36px 16px;
  }
  #frontFrm {
    /* === ここで微調整(スマホ) === */
    --frontfrm-mt-sp: 20px;     /* #frontFrm の上の余白(スマホ)。距離を空けたいときはここを増やす */
    /* ============================ */
    margin-top: var(--frontfrm-mt-sp);
    padding: 22px 18px;
  }
  .form-inner {
    max-width: 100%;
    gap: 24px;
  }
  .form-info-title {
    font-size: 24px;
  }
  .form-info-subtitle {
    font-size: 18px;
  }
  .form-info-checks {
    gap: 10px 18px;
    font-size: 14px;
  }
  .table--mailform input[type="text"],
  .table--mailform input[type="email"],
  .table--mailform input[type="tel"],
  .table--mailform textarea,
  .table--mailform select {
    font-size: 16px; /* iOS のズーム防止 */
  }
  .table--mailform input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
  .table--mailform input[type="checkbox"]:checked::before {
    left: 6px;
    top: 1px;
    width: 6px;
    height: 12px;
  }
  .buttonYellow,
  a.buttonYellow {
    padding: 14px 50px;
    min-width: 220px;
    width: 100%;
    max-width: 320px;
    font-size: 15px;
  }
}

/* ========================================
   Responsive (中央揃え統一)
======================================== */
@media (max-width: 768px) {
  /* ヘッダー(スマホ) */
  :root {
    --site-header-height: 50px;
  }

  .site-footer {
    padding: 12px 5%;
  }

  .site-footer-copyright {
    font-size: 11px;
  }

  .site-header-inner {
    gap: 16px;
  }

  .site-header-logo img {
    /* === ここで微調整(スマホ) === */
    --site-header-logo-h-sp: 16px;   /* ロゴの高さ(スマホ) */
    /* ============================ */
    height: var(--site-header-logo-h-sp);
  }

  /* スマホではナビ(実績・質問・おすすめ)を非表示 */
  .site-header-nav {
    display: none;
  }

  /* ダウンロードボタンを右に寄せる */
  .site-header-cta {
    font-size: 12px;
    padding: 6px 14px;
    margin-left: auto;
  }

  .hero {
    /* === ここで微調整(スマホ) === */
    --hero-pt-sp: 20px;   /* hero-tagの上の余白(スマホ) ←ここで上の幅を調整 */
    /* ============================ */
    padding: var(--hero-pt-sp) 5% 60px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-tag {
    /* === ここで微調整(スマホ) === */
    --hero-tag-fz-sp: 17px;   /* hero-tagのフォントサイズ(スマホ) */
    /* ============================ */
    font-size: var(--hero-tag-fz-sp);
    margin-bottom: 20px;
  }

  .hero-title {
    /* === ここで微調整(スマホ) === */
    --hero-title-fz-sp: 35px;          /* hero-titleのフォントサイズ(スマホ) */
    --hero-title-accent-fz-sp: 50px;   /* hero-title内の.accent部分(スマホ) */
    /* ============================ */
    font-size: var(--hero-title-fz-sp);
    text-align: center;
  }

  .hero-title .accent {
    font-size: var(--hero-title-accent-fz-sp);
  }

  .awards-image {
    margin-bottom: 24px;
    max-width: 360px;
  }

  .cta-wrapper {
    width: 100%;
    max-width: 400px;
  }

  .hero-visual {
    /* === ここで微調整(スマホ) === */
    --hero-visual-top-sp:-50px;   /* mein_book画像の上の余白(増やすと下にずれる / 減らすと上に寄る) */
    /* ============================ */
    margin-top: var(--hero-visual-top-sp);
  }

  /* 装飾画像はモバイルでは非表示 */
  .deco-card-left,
  .deco-card-right,
  .deco-card-intro-top,
  .deco-card-recommend-top {
    display: none;
  }

  .intro-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "text"
      "stats";          /* スマホ時の表示順: タイトル→本文→地図+数値 */
    padding: 40px 24px;
    text-align: center;
  }

  .intro-title {
    /* === ここで微調整(スマホ) === */
    --intro-title-fz-sp: 20px;   /* intro-titleのフォントサイズ(スマホ) */
    /* ============================ */
    font-size: var(--intro-title-fz-sp);
  }

  .intro-text {
--intro-title-fz-sp: 10px;
    text-align: left;
    display: inline-block;
  }

  .stats {
    grid-template-columns: 1fr;
    justify-items: center;
    transform: none;       /* PC用の右寄せをリセット */
  }

  .stats-map {
    grid-column: 1;
    grid-row: auto;
    max-width: 280px;
    margin: 0 auto 16px;
    justify-content: center;   /* PC用の左寄せをリセット */
  }

  .stats-map img {
    width: 100%;               /* PC用の160%をリセット */
    max-width: 100%;
    transform: none;           /* PC用のtranslateXをリセット */
  }

  .stat-item {
    width: 100%;
    max-width: 280px;
    text-align: center;
    grid-column: 1;       /* 必ず1列目に配置(縦並び確定) */
    margin: 0 auto;       /* スマホでは中央配置(PC側の右寄せをリセット) */
  }

  .stats-note {
    text-align: center;
  }

  .pain-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pain-item {
    /* === ここで微調整(スマホ) === */
    --pain-icon-gap: 10px;     /* アイコン↔タイトル間の距離(スマホ) */
    --pain-title-gap: 10px;    /* タイトル↔テキスト間の距離(スマホ) */
    /* ============================ */

    border-right: none;
    border-bottom: 1px solid #FFFFFF;
    padding: 0 0 32px 0;
  }

  .pain-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .recommend-inner {
    padding: 50px 24px;
  }

  .recommend-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .recommend-item {
    /* === ここで微調整(スマホ) === */
    --recommend-icon-gap: 10px;     /* アイコン↔タイトル間の距離(スマホ) */
    --recommend-title-gap: 10px;    /* タイトル↔テキスト間の距離(スマホ) */
    /* ============================ */
  }

  .form-section {
    /* === ここで微調整(スマホ) === */
    --form-section-pt-sp: 20px;   /* フォーム上の余白(チェックリスト見出しとの距離) */
    /* ============================ */
    padding: var(--form-section-pt-sp) 5% 50px;
  }

  .form-inner {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
  }

  .form-info-checks {
    flex-wrap: wrap;
    justify-content: center;
  }

  .contents-list {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  /* スマホ時は非表示にする要素 */
  .form-info-desc,
  .contents-body p {
    display: none;
  }

  /* 「本ガイドの構成」のテキストは消すが、下線は残す */
  .form-info-subtitle {
    font-size: 0;
    line-height: 0;
    margin: 0 0 16px;
    padding-bottom: 0;
  }

  .section-title,
  .recommend-title {
    font-size: 24px;
    margin-bottom: 40px;
  }

  .form-info-title {
    font-size: 24px;
  }
}

@media (max-width: 500px) {
  .hero-title {
    /* === ここで微調整(極小スマホ <=500px) === */
    --hero-title-fz-xs: 35px;          /* hero-titleのフォントサイズ(極小スマホ) */
    --hero-title-accent-fz-xs: 45px;   /* hero-title内の.accent部分(極小スマホ) */
    /* ====================================== */
    font-size: var(--hero-title-fz-xs);
  }

  .hero-title .accent {
    font-size: var(--hero-title-accent-fz-xs);
  }
}

/* ========================================
   スマホ用 横はみ出し防止(保険)
======================================== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

  /* セクション内の擬似要素や装飾(.deco-card-left など)が
     画面外に出て横スクロールを起こさないようにする */
  .hero,
  .intro-section,
  .pain-section,
  .recommend-section {
    overflow-x: hidden;
  }
}