/* ========================== */
/* カスタムプロパティ定義    */
/* ========================== */
:root {
  /* レイアウト */
  --max-width-pc: 720px;
  --max-width-btn: 370px;
  --padding-mobile: 16px;
  --padding-tablet: 24px;
  --cta-padding-top: 26px;
  --cta-padding-bottom: 50px;
  --cta-padding-top-pc: 40px;
  --cta-padding-bottom-pc: 60px;

  /* カラー */
  --color-bg: #fff;
  --color-btn-bg: #017A75;
  --color-btn-text: #ffffff;
  --color-text-main: #00498A;

  /* フォント */
  --font-family-main: 'Rounded Mplus 1c Bold', 'Rounded Mplus 1c', 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;

  /* ボタン */
  --btn-height: 66px;
  --btn-radius: 50px;
  --btn-shadow: 4px 6px 15px rgba(0, 0, 0, 0.2), 2px 3px 5px rgba(0, 0, 0, 0.31);
  --btn-shadow-hover: 6px 9px 20px rgba(0, 0, 0, 0.25), 4px 6px 8px rgba(0, 0, 0, 0.31);
}

/* ========================== */
/* グローバルリセット         */
/* ========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  /* rem単位の基準を明確にする。これで1rem = 16px */
  font-size: 16px; /* 親ページからの影響を受けにくいようにpxで指定 */
}

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-main);
  background-color: var(--color-bg);
  padding-bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ========================== */
/* レイアウト調整             */
/* ========================== */
main,
.lp-image-style,
.lp-footer-style,
footer {
  width: 100%;
  margin: 0;
  padding: 0;
  /* overflow: hidden; ← ここを削除！！ */
}

/* ========================== */
/* 画像調整（レスポンシブ対応＋隙間対策） */
/* ========================== */

/* 画像：基本設定 */
.lp-image-style img,
.lp-footer-style img,
footer img,
img.responsive {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* pictureタグ：画像コンテナもブロック化＋隙間ゼロ */
.lp-image-style picture {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

/* 画像ブロックのpタグ余白削除（WordPressが勝手に入れるやつ） */
.lp-image-style p {
  margin: 0;
}

/* 親コンテナ：行間ゼロ化（画像間スペース対策の要） */
.lp-image-style {
 position: relative
  font-size: 0;
  line-height: 0;
}

/* ========================== */
/* ボタンラッパー共通         */
/* ========================== */
.button-wrapper,
.floating-btn {
  width: 100%;
  max-width: var(--max-width-pc);
  margin: 0 auto;
  padding: 0 var(--padding-mobile);
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

/* ========================== */
/* ボタンデザイン             */
/* ========================== */
.btn-main {
  width: 100%;
  max-width: var(--max-width-btn);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  height: var(--btn-height);
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 22px;
  font-family: 'M PLUS Rounded 1c';
  line-height: 120%;
  letter-spacing: -0.01em;
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  margin: 0 auto;
  
}

.btn-main:hover {
  transform: translateY(-3px);
  box-shadow: var(--btn-shadow-hover);
}

.btn-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.4;
}

.button-subtext {
  font-size: 12px;
  color: #D8F1F0;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 400;
  margin-top: 4px;
}


/* ========================== */
/* 固定フッターボタン         */
/* ========================== */

/* =========================================== */
/* ✅ 全ブラウザ共通：基準位置を必ず設定 */
/* =========================================== */
.floating-btn {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10000;
  pointer-events: auto;
  background: none;
  width: 100%;
  bottom: 8px; /* ← これが大事。最低値として残す */
  transform: translateZ(0); /* GPUレンダリングでズレ防止 */
  padding: 0 var(--padding-mobile);
}

/* ✅ Safe Area（iPhoneノッチ）対応するブラウザだけ上書き */
@supports (bottom: env(safe-area-inset-bottom)) {
  .floating-btn {
    bottom: calc(8px + env(safe-area-inset-bottom)); /* ← !important いらん */
  }
}


/* ========================== */
/* 中間CTAラッパー            */
/* ========================== */
.contact-button-container {
  width: 100%;
  max-width: var(--max-width-pc);
  margin: 0 auto;
  padding: var(--cta-padding-top) var(--padding-mobile) var(--cta-padding-bottom);
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
}

/* ========================== */
/* 中間CTAテキスト            */
/* ========================== */
.promo-text {
  padding: 20px var(--padding-mobile);
  font-size: 20px;
  font-family: 'M PLUS Rounded 1c';
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.04em;
  color: var(--color-text-main);
  width: 100%;
}

/* ===================================================================== */
/* 親要素に設定されたrow-gapをリセットして隙間をなくす */
/* ===================================================================== */
.lp-image-style {
    row-gap: 0 !important;
    gap: 0 !important; /* 念のためgapプロパティ自体もリセット */
}