body {
  font-family: 'Noto Sans JP', sans-serif;
  scroll-behavior: smooth;
}

/* 水玉模様：ヒーロー内の専用レイヤー（オーバーレイの上に表示＝確実に見える）
 * 配置：①タイトル右上  ②画像/CTA左下  ③バッジ「30分の無料電話…」左上
 * サイズ：小さめ／色：薄い緑 */
.hero-polka {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 92% 22%, rgba(134, 239, 172, 0.42) 0%, rgba(134, 239, 172, 0.42) 8%, transparent 8%),
    radial-gradient(circle at 18% 80%, rgba(134, 239, 172, 0.38) 0%, rgba(134, 239, 172, 0.38) 12%, transparent 12%),
    radial-gradient(circle at 12% 4%, rgba(134, 239, 172, 0.42) 0%, rgba(134, 239, 172, 0.42) 6%, transparent 6%);
  background-size: 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}

/* PC・タブレット：同じく薄い緑の水玉 */
@media (min-width: 480px) {
  .hero-polka {
    background-image:
      radial-gradient(circle at 92% 22%, rgba(134, 239, 172, 0.38) 0%, rgba(134, 239, 172, 0.38) 8%, transparent 8%),
      radial-gradient(circle at 18% 80%, rgba(134, 239, 172, 0.34) 0%, rgba(134, 239, 172, 0.34) 12%, transparent 12%),
      radial-gradient(circle at 12% 4%, rgba(134, 239, 172, 0.38) 0%, rgba(134, 239, 172, 0.38) 6%, transparent 6%);
  }
  .lp-center-content {
    background-color: #ffffff;
    background-image: none;
  }
}

/* スマホ表示：479px以下でのみフル幅・中央コンテンツをそのまま表示する仕様のため、狭い幅では発動しない */
@media (max-width: 479px) {
  .lp-main-scroll {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
  }
  .lp-grid-outer {
    display: block !important;
    max-width: none !important;
  }
  .lp-center-wrapper {
    max-width: none !important;
  }
  /* スマホ時はGIF背景を表示しない（重いため）。代わりに薄い単色 */
  .lp-global-bg {
    background-image: none !important;
    background-color: #f0fdf4; /* green-50 */
  }
  /* スマホ時：ヒーロー背景は単色（水玉は .hero-polka レイヤーで表示） */
  .lp-hero-bg {
    background-image: none !important;
    background-color: #f0fdf4;
  }
  /* スマホでは fixed 背景が表示されないため scroll で通常表示（手続きの全体像・実績・お客様の声） */
  #steps,
  #achievement {
    background-attachment: scroll !important;
  }
}

/* 480px〜767px：ウィンドウを狭めても中央コンテンツ（420px）をそのまま表示（md:相当のレイアウトを適用） */
@media (min-width: 480px) and (max-width: 767px) {
  body {
    overflow: hidden;
  }
  .lp-main-scroll {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    min-width: 0;
    padding-top: 4rem !important; /* md:pt-16 */
    padding-bottom: 2rem !important; /* md:pb-8 */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 20;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    display: block;
  }
  .lp-grid-outer {
    display: grid !important;
    grid-template-columns: 1fr 420px 1fr;
    align-content: start;
    max-width: 100%;
    min-height: 0;
  }
  .lp-center-wrapper {
    grid-column: 2;
    min-width: 0;
    width: 420px;
    max-width: none !important;
  }
  .lp-center-content {
    container-type: inline-size;
    container-name: lp-center;
    /* md:相当の中央ボックス見た目 */
    max-width: 420px;
    flex-shrink: 0;
    margin-top: 0.5rem;
    margin-bottom: 4rem;
    background-color: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-radius: 0.75rem;
    overflow: hidden;
  }
}

/* 中央のLPコンテンツ：768px以上で幅固定（モバイル幅感）、スクロールバーはビューポート右端 */
@media (min-width: 768px) {
  .lp-main-scroll {
    width: auto !important;
    scrollbar-gutter: stable;
    display: block;
  }
  /* グリッドで中央に420px固定ボックスを配置（モバイルと同じ幅感） */
  .lp-grid-outer {
    display: grid;
    grid-template-columns: 1fr 420px 1fr;
    align-content: start;
    max-width: 100%;
  }
  .lp-center-wrapper {
    grid-column: 2;
    min-width: 0;
    width: 420px;
  }
  .lp-center-content {
    container-type: inline-size;
    container-name: lp-center;
  }
}
@media (min-width: 1024px) {
  /* 左右サイドバー表示時：グリッド領域をサイドバー幅内に制限 */
  .lp-grid-outer {
    max-width: calc(100% - 21rem - 17px);
  }
}
@media (min-width: 1280px) {
  .lp-grid-outer {
    max-width: calc(100% - 24rem - 17px);
  }
}

/* PC中央ボックス内（420px幅）：スマホ表示と同じレイアウト・フォントサイズ・余白を強制 */
@container lp-center (max-width: 767px) {
  /* レイアウト */
  [class*="md:text-left"] { text-align: center !important; }
  [class*="md:text-right"] { text-align: center !important; }
  [class*="md:justify-start"] { justify-content: center !important; }
  [class*="md:justify-between"] { justify-content: flex-start !important; }
  .container[class*="md:flex"] { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1rem !important; }
  [class*="md:w-3/5"],
  [class*="md:w-2/5"],
  [class*="md:w-1/2"] { width: 100% !important; max-width: 100% !important; }
  [class*="md:mt-0"] { margin-top: 1rem !important; }
  [class*="md:pl-8"],
  [class*="md:pr-8"] { padding-left: 0 !important; padding-right: 0 !important; }
  [class*="md:-mr-6"],
  [class*="lg:-mr-12"] { margin-right: 0 !important; }
  [class*="md:grid-cols-2"],
  [class*="lg:grid-cols-3"],
  [class*="md:grid-cols-3"] { grid-template-columns: 1fr !important; }
  [class*="hidden"][class*="md:block"] { display: none !important; }
  [class*="md:block"][class*="hidden"] { display: none !important; }
  [class*="md:flex"]:not(.container) { flex-direction: column !important; }
  [class*="md:space-y-0"] { flex-direction: column !important; }
  [class*="flex-row-reverse"] { flex-direction: column !important; }
  [class*="md:grid"][class*="md:grid-cols-1"] { display: flex !important; flex-direction: column !important; }
  /* フォントサイズ：スマホ表示と同じに */
  h1[class*="md:text-5xl"],
  h1[class*="lg:text-6xl"] { font-size: 2.25rem !important; line-height: 2.5rem !important; }
  h2[class*="md:text-5xl"] { font-size: 1.875rem !important; line-height: 2.25rem !important; }
  [class*="md:text-5xl"]:not(h1):not(h2),
  [class*="lg:text-6xl"]:not(h1) { font-size: 2.25rem !important; line-height: 2.5rem !important; }
  [class*="md:text-4xl"] { font-size: 1.875rem !important; line-height: 2.25rem !important; }
  [class*="md:text-3xl"] { font-size: 1.5rem !important; line-height: 2rem !important; }
  [class*="md:text-2xl"] { font-size: 1.5rem !important; }
  [class*="md:text-lg"] { font-size: 1rem !important; line-height: 1.5rem !important; }
  [class*="md:text-xl"] { font-size: 1.25rem !important; }
  /* セクション余白：スマホ表示と同じに */
  section[class*="md:pt-20"] { padding-top: 3rem !important; }
  section[class*="md:pb-24"] { padding-bottom: 4rem !important; }
  section[class*="md:py-20"] { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  section[class*="md:py-24"] { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  [class*="md:px-12"],
  [class*="lg:px-20"] { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* 左サイドバーCTA：ボタン内「無料」バッジ（黒背景・暗灰枠の丸） */
.lp-cta-free-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  background-color: #232323;
  color: #f5f5f5;
  border: 2px solid #1f2937; /* gray-800：テキスト色と同系 */
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* 右サイドバー：スタイリッシュなセリフフォントのコピー */
.lp-right-copy {
  font-family: 'Noto Serif JP', serif;
}

/* 左サイドバー：薄緑モザイク背景のCTAボックス（背景50%透過） */
.lp-sidebar-cta-box {
  background-color: rgba(232, 245, 233, 0.5);
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.4) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.4) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

/* ドロワー内CTAボックスのみ：枠線+影のみ、背景なし */
.lp-drawer-cta-box {
  background-color: transparent;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* お客様の声スライダー：横スクロールバー非表示 */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* お客様の声スライダー：各カードが中央に来るよう左右パディング */
.voice-slider-center {
  padding-left: calc((100% - 320px) / 2);
  padding-right: calc((100% - 320px) / 2);
}
@media (min-width: 768px) {
  .voice-slider-center {
    padding-left: calc((100% - 360px) / 2);
    padding-right: calc((100% - 360px) / 2);
  }
}

/* お客様の声スライダー：ページネーションのアクティブ */
.voice-dot.active {
  background-color: rgba(255, 255, 255, 1);
  transform: scale(1.2);
}

/* 給付金受給までの流れ：タイムライン */
.flow-timeline {
  --flow-marker-center: 11px;
  --flow-line-left: 20px;
}
.flow-step-label {
  transform: rotate(-180deg);
  height: 2.5rem;
}
.flow-step-title-row-margin {
  margin-left: calc(var(--flow-line-left) - 32px);
}
@media (min-width: 768px) {
  .flow-timeline .flow-step-title-row-margin {
    margin-left: calc(var(--flow-line-left) - 48px);
  }
}