/* ========================== */
/* カスタムプロパティ定義    */
/* ========================== */
: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', '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, body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-main);
  background-color: var(--color-bg);
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

/* ========================== */
/* レイアウト調整             */
/* ========================== */
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 {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

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

/* ========================== */
/* ボタンラッパー共通         */
/* ========================== */
.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;
  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);
}

/* ========================== */
/* 固定フッターボタン         */
/* ========================== */
.floating-btn {
  position: fixed;
  bottom: 16px;
  left: 0;
  right: 0;
  z-index: 10000;
  pointer-events: auto;
  background: none;
  width: 100%;
  padding: 0 var(--padding-mobile);
}

/* ========================== */
/* 中間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: clamp(20px, calc(1.1rem + 1vw), 26px);
  font-family: var(--font-family-main);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.04em;
  color: var(--color-text-main);
  width: 100%;
}

/* ========================== */
/* レスポンシブ対応           */
/* ========================== */
@media screen and (min-width: 768px) {
  .contact-button-container {
    padding: var(--cta-padding-top-pc) var(--padding-tablet) var(--cta-padding-bottom-pc);
  }

  .button-wrapper,
  .floating-btn {
    max-width: var(--max-width-pc);
    padding: 0 var(--padding-tablet);
  }
}