/*
Theme Name: ためしてGo! LP
Theme URI: https://example.com/tameshitego
Author: Tameshitego Team
Author URI: https://example.com
Description: ためしてGo! ランディングページ専用テーマ - 話題の商品を無料でお試しできるサービスのLP
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tameshitego-lp
Tags: one-column, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-primary: #da545b;
  --color-primary-hover: #c44a50;
  --color-primary-light: #fff0f0;
  --color-secondary: #06c755;
  --color-secondary-hover: #05b04c;
  --color-accent: #ffd700;
  --color-accent-pink: #f5a0b0;
  --color-dark: #333333;
  --color-text: #444444;
  --color-text-light: #777777;
  --color-bg: #ffffff;
  --color-bg-light: #fff8f0;
  --color-bg-pink: #f9e5e6;
  --color-bg-cream: #fdf5e6;
  --color-bg-gray: #f5f5f5;
  --color-border: #e0e0e0;

  /* Typography (clamp: 390px → 1920px) */
  --font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --font-size-xs: clamp(0.625rem, 0.593rem + 0.13vw, 0.75rem);     /* 10px → 12px */
  --font-size-sm: clamp(0.75rem, 0.718rem + 0.13vw, 0.875rem);     /* 12px → 14px */
  --font-size-base: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);      /* 14px → 16px */
  --font-size-md: clamp(0.875rem, 0.812rem + 0.26vw, 1.125rem);    /* 14px → 18px */
  --font-size-lg: clamp(1rem, 0.937rem + 0.26vw, 1.25rem);         /* 16px → 20px */
  --font-size-xl: clamp(1.125rem, 1.030rem + 0.39vw, 1.5rem);      /* 18px → 24px */
  --font-size-2xl: clamp(1.25rem, 1.092rem + 0.65vw, 1.875rem);    /* 20px → 30px */
  --font-size-3xl: clamp(1.375rem, 1.151rem + 0.92vw, 2.25rem);     /* 22px → 36px */
  --font-size-4xl: clamp(1.75rem, 1.494rem + 1.05vw, 2.75rem);     /* 28px → 44px */

  /* Spacing (clamp: 390px → 1920px) */
  --space-xs: clamp(0.25rem, 0.187rem + 0.26vw, 0.5rem);           /* 4px → 8px */
  --space-sm: clamp(0.75rem, 0.687rem + 0.26vw, 1rem);             /* 12px → 16px */
  --space-md: clamp(1rem, 0.873rem + 0.52vw, 1.5rem);              /* 16px → 24px */
  --space-lg: clamp(1.5rem, 1.244rem + 1.05vw, 2.5rem);            /* 24px → 40px */
  --space-xl: clamp(2.5rem, 2.118rem + 1.57vw, 4rem);              /* 40px → 64px */
  --space-2xl: clamp(3rem, 2.491rem + 2.09vw, 5rem);               /* 48px → 80px */
  --space-section: clamp(3rem, 2.171rem + 3.40vw, 6.25rem);        /* 48px → 100px */

  /* Layout */
  --content-width: 1360px;
  --content-width-narrow: 960px;
  --header-height: 72px;

  /* Borders & Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
  opacity: 0.8;
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

.l-container {
  max-width: var(--content-width);
  margin-inline: auto;
}

.l-container--narrow {
  max-width: var(--content-width-narrow);
}

.l-section {
  padding-block: var(--space-section);
}

.l-section--bg-light {
  background-color: var(--color-bg-light);
}

.l-section--bg-pink {
  background-color: var(--color-bg-pink);
}

.l-section--bg-gray {
  background-color: var(--color-bg-gray);
}

.u-desktop-only {
  display: none;
}

@media (min-width: 1280px) {
  .u-desktop-only {
    display: inline;
  }
}

/* Section Headers */
.section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: clamp(2.5rem, 0.716rem + 7.32vw, 9.5rem);           /* 40px → 72px */
}

.section-header__dots {
  display: flex;
  gap: 20px;
}

.section-header__title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: #000;
  line-height: clamp(2rem, 1.744rem + 1.05vw, 3rem);               /* 32px → 48px */
  letter-spacing: 1.44px;
  text-align: center;
}

.section-header__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}

.section-header__line::before,
.section-header__line::after {
  content: "";
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent-pink), transparent);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: var(--font-size-sm);
  padding: clamp(0.5rem, 0.125rem + 0.417vw, 0.625rem) clamp(1.5rem, 0rem + 1.667vw, 2rem);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.hero__cta-button,
.trust__bottom-cta,
.benefits__cta,
.cta__card-button {
  will-change: translate, scale;
  animation: cta-nudge 4.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

/* Stagger the loop slightly so multiple CTAs don't sync */
.trust__bottom-cta { animation-delay: 0.35s; }
.benefits__cta { animation-delay: 0.7s; }
.cta__card-button { animation-delay: 1.05s; }

.hero__cta-button:hover,
.trust__bottom-cta:hover,
.benefits__cta:hover,
.cta__card-button:hover,
.hero__cta-button:focus-visible,
.trust__bottom-cta:focus-visible,
.benefits__cta:focus-visible,
.cta__card-button:focus-visible {
  animation-play-state: paused;
  translate: 0 -2px;
  scale: 1.02;
  opacity: 1;
}

@keyframes cta-nudge {
  0%,
  78%,
  100% {
    translate: 0 0;
    scale: 1;
  }
  82% {
    translate: 0 -3px;
    scale: 1.01;
  }
  86% {
    translate: 0 0;
    scale: 1;
  }
  90% {
    translate: 0 -2px;
    scale: 1.008;
  }
  94% {
    translate: 0 0;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta-button,
  .trust__bottom-cta,
  .benefits__cta,
  .cta__card-button {
    animation: none !important;
    translate: none !important;
    scale: 1 !important;
  }
}

.btn-cta:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  opacity: 1;
}

.btn-cta--lg {
  font-size: var(--font-size-lg);
  padding: 18px 48px;
}

.btn-cta--green {
  background-color: var(--color-secondary);
}

.btn-cta--green:hover {
  background-color: var(--color-secondary-hover);
}

.btn-cta--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-cta--outline:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   Site Header
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.98);
  height: var(--header-height);
  transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 40px;
  max-width: none;
  padding-inline: 0;
  padding-left: clamp(2rem, 1.332rem + 1.39vw, 3rem);
  padding-right: clamp(1.75rem, 1.249rem + 1.043vw, 2.5rem);
}

.site-header__logo {
  flex-shrink: 0;
}

.site-header__logo img {
  height: clamp(1.75rem, 1.249rem + 1.043vw, 2.5rem);
  width: auto;
}

.site-header__nav {
  flex: 1;
}

.site-header__nav .nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 1.249rem + 1.043vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

.site-header__nav .nav-list li a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.75rem, 0.625rem + 0.261vw, 0.938rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__nav .nav-list li a::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  background: url('assets/images/nav-icon.png') center / contain no-repeat;
  flex-shrink: 0;
}

.site-header__nav .nav-list li a:hover {
  color: var(--color-primary);
  opacity: 1;
}

.site-header__cta {
  flex-shrink: 0;
}

/* Hamburger Menu Toggle */
.site-header__menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger-svg {
  display: block;
  width: 60px;
  height: 24px;
}

.close-svg {
  display: none;
  width: 60px;
  height: 20px;
}

.site-header__nav-logo {
  display: none;
}

.site-header__nav-cta {
  display: none;
}

.nav-list__top-link {
  display: none;
}

/* Body offset for fixed header */


/* ==========================================================================
   Campaigns Section
   ========================================================================== */

.campaigns.l-section {
  padding-top: var(--space-section);
  padding-bottom: clamp(5rem, 3.406rem + 6.54vw, 11.25rem);        /* 80px → 180px */
  padding-right: 20px;
  padding-left: 20px;
}

.campaigns .section-header__title {
  letter-spacing: 2.16px;
}

.campaigns__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 0.734rem + 3.14vw, 4.5rem) 20px;             /* row: 24px → 72px */
}

.campaign-card {
  overflow: hidden;
}

.campaign-card__thumbnail {
  border-radius: clamp(0.375rem, 0.217rem + 0.65vw, 1rem);            /* 6px → 16px */
  overflow: hidden;
  margin: 0;
  aspect-ratio: 440 / 247;
  background-color: var(--color-bg-gray);
}

.campaign-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campaign-card__body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 12px;
}

.campaign-card__status {
  width: 18px;
  height: 18px;
  background-color: #4d4d4d;
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 0.15em;
}

.campaign-card__title {
  font-weight: 500;
  font-size: var(--font-size-md);
  color: #000;
  flex: 1;
  min-width: 0;
  text-wrap: auto;
}

.campaigns__action {
  text-align: center;
  margin-top: clamp(2.5rem, 1.830rem + 2.75vw, 5.125rem);          /* 40px → 82px */
}

.campaigns__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #4d4d4d;
  border-radius: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);         /* 12px → 20px */
  width: clamp(18.75rem, 16.52rem + 9.15vw, 27.5rem);                /* 300px → 440px */
  height: clamp(2.875rem, 2.651rem + 0.92vw, 3.75rem);               /* 46px → 60px */
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.campaigns__button:hover {
  background-color: #333;
  opacity: 1;
}

.campaigns__button-text {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 0.873rem + 0.52vw, 1.5rem);                 /* 16px → 24px */
  letter-spacing: clamp(0.64px, 0.035rem + 0.02vw, 0.96px);          /* 0.64px → 0.96px */
  margin-right: 2%;
}

.campaigns__button-icon {
  position: absolute;
  right: clamp(0.625rem, 0.593rem + 0.13vw, 0.75rem);                /* 10px → 12px */
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
  width: clamp(1.625rem, 1.467rem + 0.65vw, 2.25rem);                /* 26px → 36px */
  height: clamp(1.625rem, 1.467rem + 0.65vw, 2.25rem);               /* 26px → 36px */
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4d4d4d;
}

/* ==========================================================================
   How-To Section
   ========================================================================== */

.howto {
  background-color: var(--color-bg-pink);
  padding-block: var(--space-section);
  position: relative;
}

.howto::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: clamp(1.625rem, 1.282rem + 1.41vw, 3.313rem);             /* 26px → 53px */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 53' preserveAspectRatio='none'%3E%3Cpath d='M0 53 C0 53, 480 0, 960 0 S1920 53, 1920 53 L1920 53 L0 53 Z' fill='%23f9e5e6'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.howto .section-header__title {
  letter-spacing: 2.16px;
}

.section-header__dot {
  display: block;
  width: clamp(0.714rem, 0.578rem + 0.56vw, 1.25rem);                /* 11.429px → 20px */
  height: clamp(0.714rem, 0.578rem + 0.56vw, 1.25rem);               /* 11.429px → 20px */
  aspect-ratio: 1 / 1;
  background-color: var(--color-primary);
  border-radius: clamp(0.148rem, 0.106rem + 0.17vw, 0.313rem);       /* 2.362px → 5px */
}

.howto__steps {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}

.howto-step__card {
  background: #fff;
  border-radius: 20px;
  padding: clamp(2.5rem, 2.181rem + 1.31vw, 3.75rem) clamp(1.25rem, 1.091rem + 0.65vw, 1.875rem) clamp(1.75rem, 1.560rem + 0.78vw, 2.5rem);  /* 40/20/28 → 60/30/40 */
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.2);
  width: clamp(18.75rem, 16.52rem + 9.15vw, 27.5rem);   /* 300px → 440px */
}

.howto-step--1 .howto-step__card {
  height: clamp(16.438rem, 13.33rem + 12.75vw, 28.625rem);  /* 263px → 458px */
}

.howto-step--2 .howto-step__card {
  height: clamp(20.938rem, 18.261rem + 10.98vw, 31.438rem); /* 335px → 503px */
}

.howto-step--3 .howto-step__card {
  height: clamp(27.938rem, 25.134rem + 11.5vw, 38.938rem);  /* 447px → 623px */
}

.howto-step__badge {
  display: inline-block;
  background-color: var(--color-primary);
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(1.125rem, 0.998rem + 0.52vw, 1.625rem);         /* 18px → 26px */
  line-height: 1.15;
  padding: 0.563rem clamp(1.25rem, 1.060rem + 0.78vw, 2rem);       /* 9px, 20px → 32px */
  border-radius: 60px;
  position: absolute;
  top: -24px;
  left: 26%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.howto-step__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 200px;
  margin-bottom: 16px;
}

.howto-step__img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.howto-step--1 .howto-step__img {
  width: 389.847px;
height: 375.62px;
margin-top: -140px;
margin-left: 52px;
}

.howto-step--2 .howto-step__img {
  width: 384.498px;
  height: 354.954px;
  margin-top: -140px;
  margin-left: 8px;
}

.howto-step__img--character {
  width: 296.008px;
  height: 204px;
  margin-top:-56px
}

.howto-step__line-logo {
  position: absolute;
  bottom: 10px;
  right: 10%;
  width: 80px;
  height: 80px;
}

.howto-step__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: #000;
  margin-bottom: 12px;
  line-height: 1.4;
  text-align: center;
}

.howto-step__title span {
  background-image: linear-gradient(
    to bottom,
    transparent 33%,
    yellow 33%,
    yellow 88%,
    transparent 88%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.15em;
}

.howto-step__desc {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: #000;
  line-height: 1.5;
  text-align: center;
}

/* ==========================================================================
   Trust Section
   ========================================================================== */

.trust {
  position: relative;
  z-index: 6;
  padding-block: var(--space-section);
  background: linear-gradient(to bottom, var(--color-bg-pink) 65%, #4D4D4D 100%);
  padding-bottom: 0px;
  border-radius: 0 0 60% 86% / 0 0 6% 6%;
}

.trust .section-header {
  align-items: flex-end;
}

.trust .section-header__dots {
  margin-bottom: clamp(0.644rem, 0.585rem + 0.24vw, 0.875rem);      /* 10.3px → 14px — align dots to 2nd title line */
}

.trust .section-header__title {
  font-weight: 600;
}

.section-header__title-line {
  display: block;
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 20px;
  margin-top: 83px;
}

.trust-point {
  display: flex;
  justify-content: center;
}

.trust-point__circle {
  width: clamp(25rem, 17.5rem + 8.333vw, 27.5rem);             /* 280px → 440px */
  height: clamp(25rem, 17.5rem + 8.333vw, 27.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.25rem, 0.931rem + 1.31vw, 2.5rem) clamp(1rem, 0.776rem + 0.92vw, 1.875rem);  /* 20/16 → 40/30 */
  padding-top: 70px;
  text-align: center;
}

.trust-point__icon {
  margin-bottom: 20px;
  line-height: 0;
}

.trust-point:nth-child(1) .trust-point__icon,
.trust-point:nth-child(3) .trust-point__icon {
  margin-bottom: clamp(1.5rem, -0.791rem + 3.575vw, 3.5rem);
}

.trust-point__icon img {
  width: clamp(3rem, 2.681rem + 1.31vw, 4.25rem);                  /* 48px → 68px */
  height: auto;
  object-fit: contain;
}

.trust-point__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 0.856rem + 0.849vw, 1.875rem);
  line-height: 1.47;
  color: #000;
  margin-bottom: 12px;
  text-align: center;
}

.trust-point__title span {
  background-image: linear-gradient(
    to bottom,
    transparent 39%,
    yellow 39%,
    yellow 91%,
    transparent 91%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.15em;
}

.trust-point__desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(0.9rem, 0.499rem + 0.626vw, 1.25rem);
  line-height: 1.5;
  color: #000;
  max-width: 330px;
}

/* Trust Bottom Image */

.trust__bottom {
  position: relative;
  z-index: 10;
  margin-top: clamp(4.5rem, 1.824rem + 10.98vw, 15rem);
}

.trust__bottom-image {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  opacity: 0.8;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.30));
}

.trust__bottom-image img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1400px) {
.trust-point__circle {
  width: clamp(16.875rem, 3.293rem + 24.119vw, 25rem);             /* 280px → 440px */
  height: clamp(16.875rem, 3.293rem + 24.119vw, 25rem);
  padding: clamp(1.25rem, 0.931rem + 1.31vw, 2.5rem) clamp(1rem, 0.776rem + 0.92vw, 1.875rem);  /* 20/16 → 40/30 */
}

}

@media (max-width: 768px) {
  .trust__bottom-image img {
    height: clamp(48.375rem, 33.801rem + 59.79vw, 62.5rem);    /* 774px@390 → 1000px@768 */
    object-fit: cover;
    object-position: top;
  }
  .trust .section-header {
    align-items: center;
  }
  .campaigns.l-section {
    padding-top: var(--space-section);
    padding-bottom: clamp(5rem, 3.406rem + 6.54vw, 11.25rem);        /* 80px → 180px */
    padding-right: 0px;
    padding-left: 0px;
  }
}

.trust__bottom-bg {
  position: absolute;
  z-index: 2;
  top: clamp(11rem, -1.152rem + 25.283vw, 29.188rem);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(32rem, 8.115rem + 49.696vw, 67.75rem);
  height: clamp(10rem, 4.154rem + 12.163vw, 18.75rem);
  border-radius: clamp(2.363rem, 2.199rem + 0.67vw, 3rem);
  background: #F9E5E6;
}

/* Trust Bottom Bubbles */

.trust__bottom-bubble {
  position: absolute;
  z-index: 3;
  scale: 0;
  opacity: 0;
}

.trust__bottom-bubble.is-visible {
  animation: bubble-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.trust__bottom-bubble--01.is-visible { animation-delay: 0.45s; }
.trust__bottom-bubble--02.is-visible { animation-delay: 0.3s; }
.trust__bottom-bubble--03.is-visible { animation-delay: 0.15s; }
.trust__bottom-bubble--04.is-visible { animation-delay: 0s; }

@keyframes bubble-pop {
  0% {
    opacity: 0;
    scale: 0;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

.trust__bottom-bubble--01 {
  width: clamp(13.049rem, 10.486rem + 10.51vw, 23.103rem);
  height: clamp(5.126rem, 4.119rem + 4.13vw, 9.075rem);
  top: clamp(1.875rem, -4.976rem + 28.10vw, 28.75rem);
  left: clamp(-0.75rem, -5.020rem + 17.52vw, 16rem);
}

.trust__bottom-bubble--02 {
  width: clamp(10.783rem, 8.665rem + 8.69vw, 19.091rem);
  height: clamp(4.487rem, 3.606rem + 3.62vw, 7.945rem);
  top: clamp(-3.625rem, -10.412rem + 27.84vw, 23rem);
  left: clamp(1.25rem, -7.098rem + 34.25vw, 34rem);
}

.trust__bottom-bubble--03 {
  width: clamp(12.172rem, 9.782rem + 9.81vw, 21.550rem);
  height: clamp(4.782rem, 3.843rem + 3.85vw, 8.467rem);
  top: clamp(-7.5rem, -15.434rem + 32.55vw, 23.625rem);
  left: clamp(11rem, -4.804rem + 64.837vw, 73rem);
}

.trust__bottom-bubble--04 {
  width: clamp(13rem, 10.407rem + 10.64vw, 23.177rem);
  height: clamp(4rem, 3.162rem + 3.44vw, 7.293rem);
  top: clamp(-0.5rem, -8.961rem + 34.71vw, 32.688rem);
  left: clamp(11rem, -7.242rem + 74.837vw, 82.563rem);
}

.trust__bottom-phone {
  position: absolute;
  z-index: 3;
  top: clamp(4rem, -7.358rem + 23.632vw, 21rem);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(5.965rem, 4.971rem + 4.08vw, 9.869rem);
  height: clamp(11.625rem, 9.685rem + 7.96vw, 19.232rem);
  filter: drop-shadow(
    clamp(0.394rem, 0.367rem + 0.11vw, 0.5rem)
    clamp(0.197rem, 0.183rem + 0.06vw, 0.25rem)
    clamp(0.984rem, 0.916rem + 0.28vw, 1.25rem)
    rgba(0, 0, 0, 0.30)
  );
}

.trust__bottom-badge {
  position: absolute;
  z-index: 3;
  top: clamp(11rem, -2.362rem + 27.802vw, 31rem);
  left: calc(50% + clamp(4.295rem, 3.654rem + 2.63vw, 6.810rem));
  width: clamp(2.695rem, 2.429rem + 1.09vw, 3.738rem);
  height: clamp(2.788rem, 2.512rem + 1.13vw, 3.867rem);
}

.trust__bottom-cta {
  position: absolute;
  z-index: 4;
  top: clamp(14rem, 0.053rem + 29.018vw, 34.875rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(18.75rem, 13.015rem + 23.53vw, 41.25rem);
  height: clamp(5.5rem, 3.37rem + 4.432vw, 8.688rem);
  padding-top: clamp(0.8rem, 0.332rem + 0.973vw, 1.5rem);
  border-radius: clamp(3.125rem, 2.328rem + 3.27vw, 6.25rem);
  background: #DA545B;
  box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.31);
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.trust__bottom-cta:hover {
  background-color: #c44a50;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 8px 10px 28px 0 rgba(0, 0, 0, 0.38);
  opacity: 1;
}

.trust__bottom-cta-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(0.813rem, 0.637rem + 0.72vw, 1.5rem);
  line-height: clamp(0.945rem, 0.677rem + 1.10vw, 2rem);
  color: #FFF;
  text-align: center;
  padding-left: 1%;
}

.trust__bottom-cta-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(0.3rem, 0.083rem + 0.452vw, 0.625rem);
}

.trust__bottom-cta-main span {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(1.375rem, 1.087rem + 1.18vw, 2.5rem);
  line-height: normal;
  letter-spacing: clamp(0.028rem, 0.022rem + 0.024vw, 0.05rem);
  color: #FFF;
}

.trust__bottom-cta-main img {
  width: clamp(1.438rem, 1.167rem + 1.11vw, 2.5rem);
  height: clamp(1.438rem, 1.167rem + 1.11vw, 2.5rem);
}

/* ==========================================================================
   Testimonials Section
   ========================================================================== */

.testimonials {
  position: relative;
  z-index: 5;
  overflow: hidden;
  padding-block: 0;
  margin-top: clamp(-5rem, -2.854rem - 1.79vw, -4rem);   /* -64px@1024 → -80px@1920 */
  background-color: #4D4D4D;
}

.testimonials__bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
}

/* Section Header overrides for dark background */
.testimonials__header {
  align-items: flex-end;
  margin-bottom: clamp(2rem, 1.609rem + 1.57vw, 3.5rem);
  margin-top: clamp(6.25rem, 4.657rem + 6.536vw, 12.5rem);
}

.testimonials__title {
  color: #fff;
}

.testimonials .section-header__dot {
  background-color: var(--color-primary);
}

/* --- Decorative Photos --- */
.testimonials__photo {
  position: absolute;
  border-radius: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);        /* 12px@390 → 20px@1920 */

  background-color: #6b6b6b;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Mobile-first photo positions (≤1024px):
   Photos alternate left/right, sized ~60% of viewport on mobile.
   Vertically distributed using % so they track section height. */
.testimonials__photo--01 {
  background-image: url("assets/images/testimonials-photo-01.png");
  width: clamp(9.375rem, 5.439rem + 16.17vw, 15.625rem);             /* 150px@390 → 250px@1024 */
  height: clamp(9.375rem, 5.439rem + 16.17vw, 15.625rem);
  top: 11%;
  left: -3%;
}

.testimonials__photo--02 {
  background-image: url("assets/images/testimonials-photo-02.png");
  width: clamp(10rem, 5.357rem + 19.07vw, 17.5rem);                  /* 160px@390 → 280px@1024 */
  height: clamp(10rem, 5.357rem + 19.07vw, 17.5rem);
  top: 24%;
  right: -5%;
}

.testimonials__photo--03 {
  background-image: url("assets/images/testimonials-photo-03.png");
  width: clamp(9.375rem, 5.439rem + 16.17vw, 15rem);                 /* 150px@390 → 240px@1024 */
  height: clamp(9.375rem, 5.439rem + 16.17vw, 15rem);
  top: 41%;
  left: -3%;
}

.testimonials__photo--04 {
  background-image: url("assets/images/testimonials-photo-04.png");
  width: clamp(9.375rem, 4.732rem + 19.07vw, 15rem);                 /* 150px@390 → 240px@1024 */
  height: clamp(9.375rem, 4.732rem + 19.07vw, 15rem);
  top: 55.5%;
  right: -5%;
}

.testimonials__photo--05 {
  background-image: url("assets/images/testimonials-photo-05.png");
  width: clamp(9.375rem, 5.439rem + 16.17vw, 15rem);                 /* 150px@390 → 240px@1024 */
  height: clamp(9.375rem, 5.439rem + 16.17vw, 15rem);
  top: 70.5%;
  left: -3%;
}

/* --- Cards Container --- */
.testimonials__cards {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1.117rem + 1.57vw, 3rem);                      /* 24px@390 → 48px@1920 */
  padding-block: clamp(1rem, 0.617rem + 1.57vw, 2.5rem);             /* 16px@390 → 40px@1920 */
}

/* --- Individual Card --- */
.testimonials__card {
  max-width: clamp(21rem, 14.882rem + 25.1vw, 45rem);                /* 336px@390 → 720px@1920 */
}

.testimonials__card--left,
.testimonials__card--right {
  align-self: center;
}

/* --- Speech Bubble --- */
.testimonials__card-bubble {
  position: relative;
  overflow: visible;
  padding: clamp(1.75rem, 1.494rem + 1.05vw, 2.75rem) clamp(1.75rem, 1.494rem + 1.05vw, 2.75rem);  /* 28px@390 → 44px@1920 */
}

/* SVG bubble background (includes tail shape + drop shadow from Figma) */
.testimonials__card-bg {
  position: absolute;
  z-index: 0;
  overflow: visible;
  max-width: none;
}

/* Desktop/Mobile SVG switching: mobile-first (show mobile, hide desktop) */
.testimonials__card-bg--desktop {
  display: none;
}

.testimonials__card-bg--mobile {
  display: block;
}

/* Mobile left bubble SVG positioning:
   viewBox 0 0 381.5 315.5, shape rect at x:11.025-361.025 y:35.025-295.025 (350x260)
   Tail extends upward from y:35.025 to y:11.025 (24px above body)
   SVG extends: 3.15% left, 11.1% top, 5.85% right, 6.49% bottom beyond content */
.testimonials__card--left .testimonials__card-bg--mobile {
  top: -11.1%;
  left: -3.15%;
  width: 109%;
  height: 117.59%;
}

/* Mobile right bubble SVG positioning:
   viewBox 0 0 381.5 348.5, shape rect at x:11.025-361.025 y:35.025-328.025 (350x293)
   Tail extends upward from y:35.025 to y:11.025 (24px above body)
   SVG extends: 3.15% left, 10.04% top, 5.85% right, 5.88% bottom beyond content */
.testimonials__card--right .testimonials__card-bg--mobile {
  top: -10.04%;
  left: -3.15%;
  width: 109%;
  height: 115.92%;
}

/* Content wrapper sits above the SVG background.
   Mobile-first: column layout (icon above text, stacked vertically). */
.testimonials__card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;                                                     /* 14px (Figma mobile: icon-to-text gap) */
}

/* --- Card Icon (avatar) --- */
.testimonials__card-icon {
  flex-shrink: 0;
  width: clamp(3.303rem, 2.917rem + 1.58vw, 5rem);                  /* 52.85px@390 → 80px@1920 */
  height: clamp(3.271rem, 2.89rem + 1.57vw, 5rem);                  /* 52.34px@390 → 80px@1920 */
  background-image: url("assets/images/testimonials-avatar.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- Card Content --- */
.testimonials__card-content {
  flex: 1;
  min-width: 0;
}

.testimonials__card-text {
  font-size: clamp(1rem, 0.874rem + 0.52vw, 1.25rem);               /* 16px@390 → 20px@1920 */
  font-weight: 700;
  line-height: clamp(1.773rem, 1.585rem + 0.78vw, 2.25rem);         /* 28.35px@390 → 36px@1920 */
  color: #000;
  margin: 0;
}

.testimonials__card-name {
  font-size: clamp(0.875rem, 0.749rem + 0.52vw, 1.25rem);           /* 14px@390 → 20px@1920 */
  font-weight: 500;
  color: #000;
  margin: clamp(0.5rem, 0.373rem + 0.52vw, 1rem) 0 0;              /* 8px@390 → 16px@1920 */
}

/* --- Decorative Vertical Dots --- */
.testimonials__dots-vertical {
  position: relative;
  top: clamp(-5rem, -6.275rem + 5.229vw, 0rem);                                                          /* TODO: 仮の値。調整後に clamp() 化 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 0.873rem + 0.52vw, 1.5rem);                      /* 16px@390 → 24px@1920 */
  padding-top: clamp(1.5rem, 1.117rem + 1.57vw, 3rem);             /* 24px@390 → 48px@1920 */
  padding-bottom: clamp(5rem, 1.686rem + 13.595vw, 18rem);              /* 80px@390 → 144px@1920 */
}

.testimonials__dots-vertical span {
  display: block;
  width: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);               /* 12px@390 → 20px@1920 */
  height: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
  border-radius: 5px;
  background: #fff;
  opacity: 0.5;
}

/* --- Mobile layout (≤1024px) --- */
@media (max-width: 1024px) {
  .testimonials__card {
    max-width: clamp(21.875rem, 10.726rem + 45.741vw, 40rem);                    /* ~350px@390, scales up slightly */
    width: 100%;
  }

  .testimonials__card--left,
  .testimonials__card--right {
    align-self: center;
  }

  .testimonials__header {
    align-items: center;
    margin-bottom: clamp(1.5rem, 1.25rem + 1.04vw, 2.5rem);
  }
}

/* --- Desktop layout (≥1025px): zigzag cards, larger photos at edges --- */
@media (min-width: 1025px) {

  /* Switch SVGs: show desktop (sideways tails), hide mobile (upward tails) */
  .testimonials__card-bg--desktop {
    display: block;
  }

  .testimonials__card-bg--mobile {
    display: none;
  }

  /* Desktop left bubble SVG positioning:
     viewBox 0 0 788 288, shape rect at x:42-762 y:14-262 (720x248)
     SVG extends: 5.83% left, 5.65% top, 3.61% right, 10.48% bottom beyond content */
  .testimonials__card--left .testimonials__card-bg--desktop {
    top: -5.65%;
    left: -5.83%;
    width: 109.44%;
    height: 116.13%;
  }

  /* Desktop right bubble SVG positioning:
     viewBox 0 0 788.471 323, shape rect at x:14-734 y:14-297 (720x283)
     SVG extends: 1.94% left, 4.95% top, 7.57% right, 9.19% bottom beyond content */
  .testimonials__card--right .testimonials__card-bg--desktop {
    top: -4.95%;
    left: -1.94%;
    width: 109.51%;
    height: 114.14%;
  }

  /* Desktop inner layout: horizontal (icon beside text) */
  .testimonials__card-inner {
    flex-direction: row;
    gap: clamp(0.75rem, 0.559rem + 0.78vw, 1.5rem);                    /* 12px@390 → 24px@1920 */
  }

  /* Desktop right cards: reverse order so icon is on the right */
  .testimonials__card--right .testimonials__card-inner {
    flex-direction: row-reverse;
  }

  .testimonials__cards {
    gap: clamp(2rem, 1.49rem + 2.09vw, 4rem);                           /* 32px → 64px */
  }

  .testimonials__card {
    width: clamp(21rem, 14.882rem + 25.1vw, 45rem);                     /* 336px@390 → 720px@1920 — Figma bubble body width */
  }

  /* Restore zigzag alignment on desktop */
  .testimonials__card--left {
    align-self: flex-start;
    margin-left: 1.5rem;
  }

  .testimonials__card--right {
    align-self: flex-end;
    margin-left: 0;
    margin-right: clamp(0.5rem, 0.245rem + 1.05vw, 1.5rem);
  }

  /* Desktop photo sizes & positions (override mobile % positioning).
     clamp() slopes from 390-1920 range; the clamp min/max naturally constrain. */
  .testimonials__photo--01 {
    width: clamp(9.375rem, 6.198rem + 13.04vw, 19.313rem);              /* 150px@390 → 309px@1920 */
    height: clamp(9.375rem, 6.198rem + 13.04vw, 19.313rem);
    top: clamp(14rem, 12.855rem + 1.79vw, 15rem);                        /* 224px@1025 → 240px@1920 */
    left: clamp(1.25rem, 0.287rem + 3.92vw, 5rem);                      /* 20px@390 → 80px@1920 */
  }

  .testimonials__photo--02 {
    width: clamp(10rem, 6.633rem + 13.83vw, 22.938rem);                  /* 160px@390 → 367px@1920 */
    height: clamp(10rem, 6.633rem + 13.83vw, 22.938rem);
    top: clamp(25rem, 19.274rem + 8.939vw, 30rem);                       /* 400px@1025 → 880px@1920 */
    right: 0;
  }

  .testimonials__photo--03 {
    width: clamp(9.375rem, 6.069rem + 13.56vw, 20.188rem);              /* 150px@390 → 323px@1920 */
    height: clamp(9.375rem, 6.069rem + 13.56vw, 20.188rem);
    top: clamp(46rem, 36.838rem + 14.302vw, 54rem);                       /* updated */
    left: 0;
  }

  .testimonials__photo--04 {
    width: clamp(10rem, 6.633rem + 13.83vw, 22.938rem);                  /* 160px@390 → 367px@1920 */
    height: clamp(10rem, 6.633rem + 13.83vw, 22.938rem);
    top: auto;
    bottom: clamp(33rem, 80.196rem - 39.33vw, 55rem);                    /* 880px@1025 → 528px@1920 */
    right: 0;
  }

  .testimonials__photo--05 {
    width: clamp(9.375rem, 6.198rem + 13.04vw, 19.063rem);              /* 150px@390 → 305px@1920 */
    height: clamp(9.375rem, 6.198rem + 13.04vw, 19.063rem);
    top: auto;
    bottom: clamp(17rem, 57.759rem - 33.97vw, 36rem);                     /* 576px@1025 → 272px@1920 */
    left: clamp(1.25rem, 0.287rem + 3.92vw, 7rem);                      /* 20px@390 → 112px@1920 */
  }
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */

.faq {
  position: relative;
  z-index: 2;
  padding-block: var(--space-section);
  background-color: var(--color-bg-pink);
  padding-right: 20px;
  padding-left: 20px;
  border-radius: 0 0 40% 40% / 0 0 3% 3%;;
}

.faq .section-header__title {
  letter-spacing: 2.16px;
  white-space: nowrap;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-item {
  background: #fff;
  border-radius: 20px;
  padding: var(--space-md) clamp(1.5rem, 0.991rem + 2.09vw, 3.5rem); /* 16/24 → 24/56 */
}

.faq-item__question {
  display: flex;
  align-items: baseline;
  gap: 24px;
}

.faq-item__label {
  font-size: clamp(1.25rem, 1.060rem + 0.78vw, 2rem);              /* 20px → 32px */
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.faq-item__label--q {
  color: var(--color-primary);
}

.faq-item__label--a {
  color: #000;
  font-weight: 500;
}

.faq-item__question-text {
  font-size: clamp(1.125rem, 0.966rem + 0.65vw, 1.75rem);          /* 18px → 28px */
  font-weight: 700;
  color: #000;
}

.faq-item__answer {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-top: 20px;
}

.faq-item__answer-text {
  font-size: var(--font-size-lg);
  color: #000;
  line-height: clamp(1.5rem, 1.373rem + 0.52vw, 2rem);             /* 24px → 32px */
}

/* ==========================================================================
   Benefits Section - さらにさらに!!
   ========================================================================== */

/*
 * Figma measurements (source of truth):
 *   PC  (1920px): node 367:46
 *   SP  (390px):  node 367:48
 *
 * clamp() base: 390px → 1920px
 */

.benefits {
  position: relative;
  z-index: 6;
  background-color: var(--color-bg-pink);
  padding-top: clamp(7.875rem, 5.645rem + 9.15vw, 16.625rem);          /* 126px@390 → 266px@1920 (reserve space for banner lower half) */
  border-radius: 40% 40% 0 0 / 3% 3% 0 0;
  margin-top: clamp(-5rem, -2.943rem - 8.44vw, -13.125rem);             /* -80px@390 → -210px@1920 */
}

/* --- Background image (decorative, layered on top of pink bg) --- */

.benefits__bg {
  position: absolute;
  top: 1.75rem;                                                          /* 28px from section top */
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.benefits__bg-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 40% 40% 0 0 / 3% 3% 0 0;
}

/* --- Banner (decorative header image) --- */

.benefits__banner {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  transform: translateY(-50%);                                           /* pull up by half its own height to overlap previous section */
  pointer-events: none;
  overflow: hidden;
  scale: 0;
  opacity: 0;
}

.benefits__banner.is-visible {
  animation: bubble-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.benefits__banner-image {
  max-width: none;
  display: block;
  width: clamp(29.915rem, 23.383rem + 26.8vw, 63.313rem);              /* 478.6px → 1013px */
  height: auto;
}

/* --- Body (pink background) --- */

.benefits__body {
  position: relative;
  z-index: 1;
  padding-top: clamp(5rem, 8.765rem - 3.14vw, 8rem);                    /* 128px@390 → 80px@1920 */
  padding-bottom: clamp(3.75rem, 2.284rem + 6.01vw, 9.5rem);           /* 60px → 152px */
}

.benefits__body .l-container {
  position: relative;
  z-index: 2;
}

/* --- Cards grid --- */

.benefits__cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 0.993rem + 1.05vw, 2.25rem);                    /* 20px → 36px */
}

@media (min-width: 1025px) {
  .benefits__cards {
    flex-direction: row;
    justify-content: center;
    gap: clamp(1.25rem, -1.279rem + 5.26vw, 1.875rem);                /* 20px → 30px */
  }
}

/* --- Single card --- */

.benefits__card {
  background: #fff;
  border-radius: clamp(0.984rem, 0.932rem + 0.21vw, 1.25rem);         /* 15.75px → 20px */
  overflow: hidden;
  width: clamp(21.875rem, 21.492rem + 1.57vw, 23.375rem);             /* 350px → 374px */
  flex-shrink: 0;
}

@media (min-width: 1025px) {
  .benefits__card {
    width: clamp(29rem, 14.255rem + 23.017vw, 41.875rem);              /* 480px → 670px */
  }
}

/* --- Card thumbnail --- */

.benefits__card-thumbnail {
  margin: clamp(0.625rem, 0.497rem + 0.52vw, 1.125rem);               /* 10px → 18px */
  margin-bottom: 0;
}

.benefits__card-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(0.394rem, 0.348rem + 0.19vw, 0.5rem);          /* 6.3px → 8px */
  mix-blend-mode: multiply;
}

/* --- Card content --- */

.benefits__card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1rem, 0.873rem + 0.52vw, 1.5rem);                    /* 16px → 24px */
  padding-top: clamp(0.75rem, 0.622rem + 0.52vw, 1.25rem);            /* 12px → 20px */
}

/* Title with yellow highlight bar */
.benefits__card-title-wrap {
  position: relative;
  display: inline-block;
}

.benefits__card-highlight {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: clamp(1.125rem, 1.093rem + 0.13vw, 1.438rem);               /* 18px → 23px */
  background-color: yellow;
  z-index: 0;
}

.benefits__card-title {
  position: relative;
  z-index: 1;
  font-size: clamp(1.375rem, 1.311rem + 0.26vw, 1.625rem);            /* 22px → 26px */
  font-weight: 700;
  color: #000;
  line-height: normal;
  white-space: nowrap;
  margin: 0;
}

@media (min-width: 1025px) {
  .benefits__card-title {
    font-size: clamp(1.625rem, 0.544rem + 2.25vw, 2rem);              /* 26px → 32px */
  }
}

.benefits__card-desc {
  font-size: clamp(0.984rem, 0.952rem + 0.13vw, 1.109rem);            /* 15.75px → 17.75px */
  color: #000;
  line-height: clamp(1.575rem, 1.488rem + 0.36vw, 1.919rem);          /* 25.2px → 30.7px */
  text-align: center;
  max-width: clamp(18.75rem, 18.112rem + 2.61vw, 21.25rem);           /* 300px → 340px */
  margin-top: clamp(0.5rem, 0.436rem + 0.26vw, 0.75rem);              /* 8px → 12px */
}

@media (min-width: 1025px) {
  .benefits__card-desc {
    font-size: clamp(1.109rem, -0.023rem + 2.36vw, 1.25rem);          /* 17.75px → 20px */
    line-height: clamp(1.919rem, 0.615rem + 2.71vw, 2rem);            /* 30.7px → 32px */
  }
}

/* --- Decorative dots separator --- */

.benefits__dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.679rem, 0.556rem + 0.51vw, 1.168rem);                  /* 10.86px → 18.69px */
  margin-top: clamp(2rem, 1.745rem + 1.05vw, 3rem);                   /* 32px → 48px */
  margin-bottom: clamp(2rem, 1.745rem + 1.05vw, 3rem);
}

.benefits__dot {
  display: block;
  width: clamp(0.714rem, 0.659rem + 0.23vw, 0.938rem);                /* 11.43px → 15px */
  height: clamp(0.714rem, 0.659rem + 0.23vw, 0.938rem);
  border-radius: clamp(0.148rem, 0.136rem + 0.05vw, 0.195rem);        /* 2.36px → 3.13px */
  background-color: var(--color-primary);
  opacity: 0.5;
}

@media (min-width: 1025px) {
  .benefits__dot {
    width: 1.25rem;                                                     /* 20px */
    height: 1.25rem;
    border-radius: 0.313rem;                                            /* 5px */
  }
}

/* --- Bottom CTA area (trust__bottom pattern: relative container + absolute children) --- */

.benefits__bottom {
  position: relative;
  z-index: 10;
  height: clamp(36.1rem, 34.341rem + 7.216vw, 43rem);                 /* 352px@390 → 804px@1920 */
}

/* --- Bubble images (absolute, 1 left + 2 right) --- */

.benefits__bubble {
  position: absolute;
  z-index: 3;
  scale: 0;
  opacity: 0;
}

.benefits__bubble.is-visible {
  animation: bubble-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.benefits__bubble--01.is-visible { animation-delay: 0.3s; }
.benefits__bubble--02.is-visible { animation-delay: 0.15s; }
.benefits__bubble--03.is-visible { animation-delay: 0s; }

/*
 * Bubble --01 (left): "まだ知られていない名商品が見つかる！"
 *   Desktop: x=358 y=8746  w=462 h=182   (relative to section, top of bottom area ~ y=8650)
 *   Mobile:  x=-12 y=8937  w=224 h=88
 *
 *   top: 87px@390 → 96px@1920
 *   left: -12px@390 → 358px@1920
 */
.benefits__bubble--01 {
  width: clamp(14rem, 11.162rem + 11.64vw, 28.875rem);                 /* 224px → 462px */
  height: clamp(5.516rem, 4.39rem + 4.62vw, 11.375rem);               /* 88.26px → 182px */
  top: clamp(-3rem, 2.647rem - 4.71vw, 1.5rem);                        /* 24px@390 → -48px@1920 */
  left: clamp(0rem, -6.627rem + 27.19vw, 26rem);              /* -12px → 358px (from left edge of viewport) */
}

.benefits__bubble--02 {
  width: clamp(15.063rem, 11.999rem + 12.58vw, 31.063rem);             /* 241px → 497px */
  height: clamp(4.759rem, 3.792rem + 3.97vw, 9.813rem);               /* 76.14px → 157px */
  top: clamp(-10rem, -3.098rem - 5.75vw, -4.5rem);                      /* -72px@390 → -160px@1920 */
  left: clamp(8rem, -7.213rem + 62.41vw, 67.68rem);              /* 133px → 1083px */
}

.benefits__bubble--03 {
  width: clamp(15.063rem, 11.999rem + 12.58vw, 31.063rem);             /* 241px → 497px */
  height: clamp(4.759rem, 3.792rem + 3.97vw, 9.813rem);               /* 76.14px → 157px */
  top: 6rem;                 /* 155px → 226px */
  left: clamp(9rem, -7.68rem + 68.432vw, 74.438rem);             /* 165px → 1191px */
}

/* --- Phone mockup (centered) --- */

.benefits__phone {
  position: absolute;
  z-index: 3;
  top: clamp(0rem, 16.313rem - 13.59vw, 13rem);                        /* 208px@390 → 0px@1920 */
  left: 50%;
  transform: translateX(-50%);
  width: clamp(6rem, 4.515rem + 6.093vw, 11.826rem);            /* 186px → 368.72px */
  filter: drop-shadow(
    clamp(0.394rem, 0.367rem + 0.11vw, 0.5rem)
    clamp(0.197rem, 0.183rem + 0.06vw, 0.25rem)
    clamp(0.984rem, 0.916rem + 0.28vw, 1.25rem)
    rgba(0, 0, 0, 0.30)
  );
}

/* --- Badge (decorative, right of phone) --- */

.benefits__badge {
  position: absolute;
  z-index: 3;
  top: clamp(13.8rem, 19.948rem - 5.12vw, 18.7rem);                     /* 299.2px@390 → 220.8px@1920 */
  left: calc(50% + clamp(4.295rem, 3.654rem + 2.63vw, 6.810rem));     /* offset right of center */
  width: clamp(2.695rem, 2.492rem + 0.83vw, 3.738rem);                /* 43.11px → 59.80px */
  height: clamp(2.788rem, 2.576rem + 0.87vw, 3.867rem);               /* 44.60px → 61.87px */
}

/* --- CTA button (absolute positioned, identical to trust__bottom-cta) --- */

.benefits__cta {
  position: absolute;
  z-index: 4;
  bottom: clamp(9rem, 6.757rem + 9.203vw, 17.8rem);                       /* 144px@390 → 400px@1920 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(20.375rem, 16.222rem + 17.04vw, 41.25rem);             /* 326px → 660px */
  height: clamp(5.75rem, 5.174rem + 2.36vw, 8.688rem);                /* 92px → 139px */
  padding-top: clamp(1.3rem, 1.249rem + 0.209vw, 1.5rem);
  border-radius: clamp(3.125rem, 2.328rem + 3.27vw, 6.25rem);
  background: #DA545B;
  box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.31);
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.benefits__cta:hover {
  background-color: #c44a50;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 8px 10px 28px 0 rgba(0, 0, 0, 0.38);
  opacity: 1;
}

.benefits__cta-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(0.813rem, 0.637rem + 0.72vw, 1.5rem);              /* 13px → 24px */
  line-height: clamp(0.945rem, 0.677rem + 1.10vw, 2rem);
  color: #FFF;
  text-align: center;
  padding-left: 1%;
}

.benefits__cta-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.benefits__cta-main span {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(1.375rem, 1.087rem + 1.18vw, 2.5rem);              /* 22px → 40px */
  line-height: normal;
  letter-spacing: clamp(0.028rem, 0.022rem + 0.024vw, 0.05rem);       /* 0.44px → 0.8px */
  color: #FFF;
}

.benefits__cta-main img {
  width: clamp(1.438rem, 1.167rem + 1.11vw, 2.5rem);                  /* 23px → 40px */
  height: clamp(1.438rem, 1.167rem + 1.11vw, 2.5rem);
}

/* ==========================================================================
   Legal / Terms Pages (page template)
   ========================================================================== */

.is-line-ad {
  background-color: #fff;
}

.is-line-ad a:hover {
  opacity: 1;
}

.line-ad-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(6px);
}

.line-ad-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 0.558rem + 0.78vw, 1.5rem);                     /* 12px → 24px */
  padding-inline: clamp(1.25rem, 0.931rem + 1.31vw, 2.5rem);         /* 20px → 40px */
  padding-block: clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem);        /* 12px → 18px */
  max-width: var(--content-width);
  margin-inline: auto;
}

.line-ad-header__logo img,
.line-ad-header__logo a img {
  height: clamp(1.75rem, 1.494rem + 1.05vw, 2.75rem);                /* 28px → 44px */
  width: auto;
}

.line-ad-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(2.5rem, 2.245rem + 1.05vw, 3.5rem);                  /* 40px → 56px */
  padding-inline: clamp(1.25rem, 1.027rem + 0.92vw, 2.125rem);       /* 20px → 34px */
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #12d463 0%, var(--color-secondary) 45%, #05a849 100%);
  color: #fff;
  font-weight: 900;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: clamp(0.875rem, 0.811rem + 0.26vw, 1.125rem);           /* 14px → 18px */
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 0.125rem 0 rgba(0, 95, 48, 0.45),
    0 0.35rem 0.65rem rgba(0, 0, 0, 0.14),
    0 0.65rem 1.25rem rgba(6, 199, 85, 0.22);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.line-ad-header__cta:hover,
.line-ad-header__cta:focus-visible {
  background: linear-gradient(180deg, #14dc68 0%, var(--color-secondary-hover) 45%, #059944 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1),
    0 0.2rem 0 rgba(0, 95, 48, 0.4),
    0 0.45rem 0.85rem rgba(0, 0, 0, 0.16),
    0 0.85rem 1.65rem rgba(6, 199, 85, 0.28);
  opacity: 1;
}

.line-ad-page {
  padding-top: clamp(2.25rem, 1.868rem + 1.57vw, 3.75rem);           /* 36px → 60px */
  padding-bottom: clamp(2.5rem, 1.863rem + 2.61vw, 5rem);            /* 40px → 80px */
}

.line-ad-steps__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.931rem + 1.31vw, 2.5rem);         /* 20px → 40px */
}

.line-ad-steps__kicker {
  margin: 0 auto clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem);
  width: fit-content;
  max-width: 100%;
  padding: clamp(0.375rem, 0.343rem + 0.13vw, 0.5rem)
           clamp(0.875rem, 0.748rem + 0.52vw, 1.375rem);
  border-radius: var(--radius-pill);
  background: rgba(218, 84, 91, 0.10);
  border: 1px solid rgba(218, 84, 91, 0.28);
  color: #da545b;
  font-weight: 900;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: clamp(0.875rem, 0.811rem + 0.26vw, 1.125rem);          /* 14px → 18px */
  letter-spacing: 0.04em;
  text-align: center;
}

.line-ad-steps__title {
  margin: 0;
  text-align: center;
  font-weight: 900;
  color: #da545b;
  font-size: clamp(1.25rem, 1.027rem + 0.92vw, 2.125rem);            /* 20px → 34px */
  line-height: clamp(1.9rem, 1.545rem + 1.46vw, 3.3rem);
  letter-spacing: 0.04em;
}

.line-ad-steps__title-line {
  display: block;
}

.line-ad-steps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 0.745rem + 1.05vw, 2rem);                         /* 16px → 32px */
  margin-top: clamp(1.75rem, 1.494rem + 1.05vw, 2.75rem);            /* 28px → 44px */
  align-items: stretch;
}

@media (min-width: 900px) {
  .line-ad-steps__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 0.74rem + 2.09vw, 3.25rem);                  /* 20px → 52px */
  }
}

.line-ad-step__card {
  position: relative;
  background: #fff;
  border: 2px solid rgba(218, 84, 91, 0.35);
  border-radius: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);         /* 12px → 20px */
  padding: clamp(1.25rem, 1.027rem + 0.92vw, 2.125rem);             /* 20px → 34px */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .line-ad-step {
    position: relative;
  }

  .line-ad-step:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(clamp(1.25rem, 0.74rem + 2.09vw, 3.25rem) / -2);
    top: 50%;
    translate: 50% -50%;
    width: clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem);             /* 12px → 18px */
    height: clamp(1.5rem, 1.308rem + 0.78vw, 2.25rem);              /* 24px → 36px */
    background: linear-gradient(180deg, transparent, rgba(218, 84, 91, 0.6), transparent);
    clip-path: polygon(0 0, 100% 50%, 0 100%, 20% 50%);
    opacity: 0.75;
    pointer-events: none;
  }
}

.line-ad-step__badge {
  margin: 0;
  align-self: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: clamp(4.25rem, 3.645rem + 2.48vw, 6.625rem);               /* 68px → 106px */
  height: clamp(2.25rem, 2.027rem + 0.92vw, 3.125rem);             /* 36px → 50px */
  border-radius: var(--radius-pill);
  border: 2px solid rgba(218, 84, 91, 0.35);
  background: #fff;
  color: #da545b;
  font-weight: 900;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: clamp(1rem, 0.904rem + 0.39vw, 1.375rem);             /* 16px → 22px */
  letter-spacing: 0.02em;
}

.line-ad-step__heading {
  margin: clamp(0.75rem, 0.622rem + 0.52vw, 1.25rem) 0 0;          /* 12px → 20px */
  text-align: center;
  color: #da545b;
  font-weight: 900;
  font-size: clamp(1rem, 0.904rem + 0.39vw, 1.375rem);            /* 16px → 22px */
  line-height: 1.3;
}

.line-ad-step__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(0.875rem, 0.747rem + 0.52vw, 1.375rem);        /* 14px → 22px */
  padding-block: clamp(0.5rem, 0.404rem + 0.39vw, 0.875rem);       /* 8px → 14px */
}

.line-ad-step__icon {
  max-width: 100%;
  height: auto;
}

.line-ad-step__desc {
  margin: clamp(0.75rem, 0.622rem + 0.52vw, 1.25rem) 0 0;         /* 12px → 20px */
  text-align: center;
  color: #4d4d4d;
  font-weight: 500;
  font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);            /* 14px → 16px */
  line-height: clamp(1.5rem, 1.373rem + 0.52vw, 2rem);            /* 24px → 32px */
}

.line-ad-cta {
  margin-top: clamp(2.25rem, 1.804rem + 1.83vw, 4rem);            /* 36px → 64px */
}

.line-ad-marquee {
  margin-top: clamp(2rem, 1.427rem + 2.35vw, 4.25rem);           /* 32px → 68px */
}

.line-ad-marquee__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.931rem + 1.31vw, 2.5rem);      /* 20px → 40px */
}

.line-ad-marquee__title {
  margin: 0;
  text-align: center;
  font-weight: 900;
  color: #da545b;
  font-size: clamp(1rem, 0.904rem + 0.39vw, 1.375rem);            /* 16px → 22px */
  line-height: 1.35;
  letter-spacing: 0.03em;
}

.line-ad-marquee__viewport {
  margin-top: clamp(1rem, 0.841rem + 0.65vw, 1.625rem);           /* 16px → 26px */
  overflow: hidden;
  border-radius: clamp(1rem, 0.808rem + 0.78vw, 1.75rem);         /* 16px → 28px */
  background: rgba(218, 84, 91, 0.06);
  border: 1px solid rgba(218, 84, 91, 0.18);
  position: relative;
  padding-inline: clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem);    /* 12px → 18px */
  padding-top: clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem);       /* 12px → 18px */
  padding-bottom: clamp(1.75rem, 1.431rem + 1.31vw, 3rem);        /* 28px → 48px (reserve note space) */
}

.line-ad-marquee__track {
  --line-ad-marquee-gap: clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem); /* 12px → 18px */
  display: flex;
  width: max-content;
  gap: 0;
  animation: line-ad-marquee-scroll 26s linear infinite;
  will-change: transform;
}

.line-ad-marquee__group {
  display: flex;
  align-items: center;
  gap: var(--line-ad-marquee-gap);
  padding-right: var(--line-ad-marquee-gap); /* keep seam spacing consistent */
}

.line-ad-marquee__item {
  display: block;
  flex-shrink: 0;
  border-radius: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);      /* 12px → 20px */
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  background: #f5f5f5;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.line-ad-marquee__item:hover,
.line-ad-marquee__item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
  opacity: 1;
}

.line-ad-marquee__img {
  display: block;
  width: clamp(12rem, 9.643rem + 9.67vw, 21.25rem);               /* 192px → 340px */
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

.line-ad-marquee__note {
  position: absolute;
  right: clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem);             /* 12px → 18px */
  bottom: clamp(0.5rem, 0.436rem + 0.26vw, 0.75rem);              /* 8px → 12px */
  margin: 0;
  font-size: clamp(0.688rem, 0.656rem + 0.13vw, 0.813rem);        /* 11px → 13px */
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.55);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(218, 84, 91, 0.16);
  padding: 0.35em 0.6em;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

@keyframes line-ad-marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .line-ad-marquee__track {
    animation: none;
    transform: none;
  }
}

.line-ad-cta__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.931rem + 1.31vw, 2.5rem);      /* 20px → 40px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 0.745rem + 1.05vw, 2rem);                      /* 16px → 32px */
  background: #da545b;
  border-radius: clamp(1rem, 0.808rem + 0.78vw, 1.75rem);         /* 16px → 28px */
  padding: clamp(1.5rem, 1.149rem + 1.44vw, 2.875rem);           /* 24px → 46px */
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
  .line-ad-cta__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
}

.line-ad-cta__title {
  margin: 0;
  color: #fff;
  font-weight: 900;
  font-size: clamp(1.125rem, 1.030rem + 0.39vw, 1.5rem);          /* 18px → 24px */
  line-height: 1.3;
  letter-spacing: 0.03em;
}

.line-ad-cta__text {
  margin: clamp(0.5rem, 0.436rem + 0.26vw, 0.75rem) 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);            /* 14px → 16px */
  line-height: 1.7;
}

.line-ad-cta__button {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(2.875rem, 2.588rem + 1.18vw, 4rem);               /* 46px → 64px */
  padding-inline: clamp(1.5rem, 1.117rem + 1.57vw, 3rem);         /* 24px → 48px */
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.line-ad-cta__button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.08) 65%,
    transparent 100%
  );
  width: 55%;
  height: 100%;
  left: 0;
  top: 0;
  animation: floating-cta-shine 3.4s ease-in-out infinite;
  animation-delay: 0.3s;
  pointer-events: none;
  z-index: 1;
}

.line-ad-cta__button:hover,
.line-ad-cta__button:focus-visible {
  background: var(--color-secondary-hover);
  opacity: 1;
}

.line-ad-cta__button-text {
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: 900;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: clamp(1rem, 0.904rem + 0.39vw, 1.375rem);            /* 16px → 22px */
  letter-spacing: 0.03em;
}

.line-ad-footer {
  margin-top: clamp(2.5rem, 1.863rem + 2.61vw, 5rem);             /* 40px → 80px */
  padding-block: clamp(1.25rem, 1.027rem + 0.92vw, 2.125rem);     /* 20px → 34px */
  border-top: 1px solid var(--color-border);
  color: rgba(0, 0, 0, 0.6);
}

.line-ad-footer__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.931rem + 1.31vw, 2.5rem);      /* 20px → 40px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 0.558rem + 0.78vw, 1.5rem);                 /* 12px → 24px */
  flex-wrap: wrap;
}

.line-ad-footer__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 0.748rem + 0.52vw, 1.375rem);              /* 14px → 22px */
  flex-wrap: wrap;
}

.line-ad-footer__link {
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
  font-size: clamp(0.75rem, 0.718rem + 0.13vw, 0.875rem);         /* 12px → 14px */
  text-decoration: none;
}

.line-ad-footer__link:hover,
.line-ad-footer__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.line-ad-footer__copyright {
  margin: 0;
  font-size: clamp(0.75rem, 0.718rem + 0.13vw, 0.875rem);
}

/* 広告LP: 右下固定 LINE CTA */
@keyframes floating-cta-shine {
  0% {
    transform: translateX(-130%) skewX(-18deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  38% {
    transform: translateX(260%) skewX(-18deg);
    opacity: 1;
  }
  50%,
  100% {
    transform: translateX(260%) skewX(-18deg);
    opacity: 0;
  }
}

body.is-line-ad {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(4.5rem, 3.75rem + 2vw, 6rem));
}

.line-ad-float-cta {
  position: fixed;
  right: clamp(0.75rem, 0.373rem + 1.57vw, 2rem);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(0.75rem, 0.373rem + 1.57vw, 2rem));
  z-index: 998;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(18.75rem, calc(100vw - 1.5rem));
  padding: clamp(0.75rem, 0.654rem + 0.39vw, 1rem) clamp(1rem, 0.873rem + 0.52vw, 1.5rem);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #12d463 0%, var(--color-secondary) 45%, #05a849 100%);
  color: #fff;
  font-weight: 900;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: clamp(0.813rem, 0.737rem + 0.33vw, 1rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 0.15rem 0 rgba(0, 95, 48, 0.48),
    0 0.45rem 0.85rem rgba(0, 0, 0, 0.16),
    0 0.85rem 1.75rem rgba(6, 199, 85, 0.28),
    0 1.15rem 2.25rem rgba(0, 0, 0, 0.12);
  transition: translate 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  overflow: hidden;
}

.line-ad-float-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.08) 65%,
    transparent 100%
  );
  width: 55%;
  height: 100%;
  left: 0;
  top: 0;
  animation: floating-cta-shine 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.line-ad-float-cta:hover,
.line-ad-float-cta:focus-visible {
  background: linear-gradient(180deg, #14dc68 0%, var(--color-secondary-hover) 45%, #059944 100%);
  translate: 0 -2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1),
    0 0.22rem 0 rgba(0, 95, 48, 0.42),
    0 0.55rem 1.1rem rgba(0, 0, 0, 0.18),
    0 1rem 2rem rgba(6, 199, 85, 0.34),
    0 1.35rem 2.75rem rgba(0, 0, 0, 0.14);
  opacity: 1;
}

.line-ad-float-cta:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}

.line-ad-float-cta__text {
  display: block;
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .line-ad-float-cta {
    transition: none;
  }

  .line-ad-header__cta {
    transition: none;
  }

  .line-ad-header__cta:hover,
  .line-ad-header__cta:focus-visible {
    transform: none;
  }

  .line-ad-float-cta:hover,
  .line-ad-float-cta:focus-visible {
    translate: none;
  }

  .line-ad-float-cta::after {
    animation: none;
    opacity: 0;
  }

  .line-ad-cta__button::after {
    animation: none;
    opacity: 0;
  }
}

.legal-page {
  padding-top: calc(var(--header-height) + clamp(2.5rem, 1.863rem + 2.61vw, 5rem)); /* 40px@390 → 80px@1920 (+ fixed header) */
  padding-bottom: clamp(4rem, 3.235rem + 3.14vw, 7rem);                              /* 64px@390 → 112px@1920 */
}

.legal-page__inner {
  max-width: var(--content-width-narrow);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.931rem + 1.307vw, 2.5rem);                        /* 20px@390 → 40px@1920 */
}

.legal-page__title {
  font-size: clamp(1.5rem, 1.181rem + 1.31vw, 2.75rem);                              /* 24px@390 → 44px@1920 */
  font-weight: 700;
  line-height: 1.3;
  color: #000;
  margin: 0;
}

.legal-page__header {
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.legal-page__content {
  margin-top: var(--space-xl);
}

.legal-page__content p + p {
  margin-top: 1em;
}

.legal-page__content h2,
.legal-page__content h3 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: #000;
  line-height: 1.4;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
}

.legal-page__content ul,
.legal-page__content ol {
  padding-left: 1.5em;
  margin-top: 1em;
}

.legal-page__content li + li {
  margin-top: 0.25em;
}

.legal-page__content a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.campaigns-page {
  /* Push content below fixed header */
  padding-top: var(--header-height);
}

.campaigns-page__section {
  padding-right: 20px;
  padding-left: 20px;
}

/* First section: extra top padding (SP: 80px, PC: 208px from header bottom) */
.campaigns-page__section:first-child {
  padding-top: clamp(5rem, 2.961rem + 8.37vw, 13rem);               /* 80px → 208px */
}

/* Between sections: SP 120px, PC 120px (consistent gap) */
.campaigns-page__section + .campaigns-page__section {
  padding-top: 7.5rem;                                                /* 120px */
}

/* Page 2+: 実施中セクションが先頭になるため first-child と同じ余白を適用 */
.campaigns-page__section--only {
  padding-top: clamp(5rem, 2.961rem + 8.37vw, 13rem);               /* 80px → 208px */
}

/* Last campaign section bottom padding before CTA */
.campaigns-page__section--active {
  padding-bottom: clamp(5rem, 3.406rem + 6.54vw, 11.25rem);         /* 80px → 180px */
}

/* Section header title */
.campaigns-page__section .section-header__title {
  letter-spacing: clamp(0.083rem, 0.050rem + 0.13vw, 0.135rem);     /* 1.32px → 2.16px */
}

/* ---------------------------------------------------------------------------
   Campaign grid – standard (実施中: 2col mobile → 3col desktop)
   --------------------------------------------------------------------------- */

.campaigns-page__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 0.734rem + 3.14vw, 4.5rem)                     /* row: 24px → 72px */
       clamp(0.875rem, 0.799rem + 0.31vw, 1.25rem);                 /* col: 14px → 20px */
}

@media (min-width: 1025px) {
  .campaigns-page__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Campaign grid – featured (新着・ピックアップ: first card full-width on mobile)
   --------------------------------------------------------------------------- */

.campaigns-page__grid--featured {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 0.734rem + 3.14vw, 4.5rem)
       clamp(0.875rem, 0.799rem + 0.31vw, 1.25rem);
}

/* Mobile: first card spans full width */
.campaigns-page__grid--featured .campaign-card:first-child {
  grid-column: 1 / -1;
}

@media (min-width: 1025px) {
  .campaigns-page__grid--featured {
    grid-template-columns: repeat(3, 1fr);
  }

  .campaigns-page__grid--featured .campaign-card:first-child {
    grid-column: auto;
  }
}

/* ---------------------------------------------------------------------------
   Pagination (実施中セクション下部)
   --------------------------------------------------------------------------- */

.campaigns-page__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 0.605rem + 3.66vw, 5rem);                      /* 24px → 80px */
  margin-top: clamp(2.5rem, 1.830rem + 2.75vw, 5.125rem);           /* 40px → 82px */
}

.campaigns-page__pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.25rem, 1.868rem + 1.57vw, 3.75rem);               /* 36px → 60px */
  height: clamp(2.25rem, 1.868rem + 1.57vw, 3.75rem);              /* 36px → 60px */
  border-radius: 50%;
  border: 2px solid #4d4d4d;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: #4d4d4d;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.campaigns-page__pagination-btn svg {
  width: 40%;
  height: 40%;
}

.campaigns-page__pagination-btn--next {
  background: #4d4d4d;
  color: #fff;
}

.campaigns-page__pagination-btn--next:hover {
  background: #333;
  border-color: #333;
}

.campaigns-page__pagination-btn--prev:not(.is-disabled):hover {
  background: #f5f5f5;
}

.campaigns-page__pagination-btn--next.is-disabled {
  background: #4d4d4d;
}

.campaigns-page__pagination-btn.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

a.campaigns-page__pagination-btn {
  text-decoration: none;
}

.campaigns-page__pagination-text {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 0.873rem + 0.52vw, 1.5rem);               /* 16px → 24px */
  letter-spacing: clamp(0.04rem, 0.035rem + 0.02vw, 0.06rem);      /* 0.64px → 0.96px */
  color: #000;
}


.campaign-detail {
  padding-top: var(--header-height);
}

.campaign-detail__article > .l-container {
  padding-inline: 20px;
}


.campaign-detail__layout {
  display: grid;
  grid-template-columns: 1fr;
  padding-top: clamp(2.5rem, 0.588rem + 7.843vw, 10rem);               /* 76px → 208px */
}

@media (min-width: 1025px) {
  .campaign-detail__layout {
    grid-template-columns: 680fr 620fr;
    column-gap: 60px;
    align-items: start;
  }
}

.campaign-detail__thumbnail {
  margin: 0;
}

.campaign-detail__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(0.375rem, 0.216rem + 0.65vw, 1rem);             /* 6px → 16px */
  object-fit: cover;
  aspect-ratio: 680 / 382;
}

.campaign-detail__share {
  display: flex;
  align-items: center;
  gap: clamp(0.813rem, 0.758rem + 0.21vw, 1.013rem);                   /* 13px → 16.2px */
  margin-top: clamp(1.25rem, 1.090rem + 0.76vw, 2rem);                 /* 20px → 32px */
  justify-content: flex-end;
}


  .campaign-detail__share {
    justify-content: flex-start;
    margin-top: 20px;
  }


.campaign-detail__share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050505;
  transition: opacity 0.3s ease;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-right: clamp(0.5rem, 0.436rem + 0.26vw, 0.75rem);             /* 8px → 12px */
}

.campaign-detail__share-link:last-child {
  margin-right: 0;
}

.campaign-detail__share-link:hover {
  opacity: 0.6;
}

.campaign-detail__share-link svg {
  display: inline-block;
  width: clamp(1.125rem, 1.029rem + 0.39vw, 1.5rem);                   /* 18px → 24px */
  height: clamp(1.125rem, 1.029rem + 0.39vw, 1.5rem);
}


.campaign-detail__badges {
  display: flex;
  gap: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);                     /* 12px → 20px */
  margin-top: 0.5rem;
}

@media (min-width: 1025px) {
  .campaign-detail__badges {
    margin-top: 0;
  }
}

.campaign-detail__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(1.563rem, 1.451rem + 0.46vw, 2rem);                    /* 25px → 32px */
  padding-inline: clamp(0.625rem, 0.561rem + 0.26vw, 0.875rem);        /* 10px → 14px */
  border-radius: 5px;
  font-size: clamp(0.875rem, 0.811rem + 0.26vw, 1.125rem);             /* 14px → 18px */
  font-weight: 500;
  letter-spacing: clamp(0.07rem, 0.065rem + 0.02vw, 0.09rem);          /* 1.12px → 1.44px */
  color: #fff;
  line-height: 1;
}

.campaign-detail__badge--new {
  background-color: #da545b;
}

.campaign-detail__badge--active {
  background-color: #4d4d4d;
}


.campaign-detail__title {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.436rem + 0.26vw, 0.75rem);                      /* 8px → 12px */
  font-size: clamp(1.25rem, 1.123rem + 0.52vw, 1.75rem);               /* 20px → 28px */
  font-weight: 700;
  color: #000;
  margin-top: clamp(1rem, 0.873rem + 0.52vw, 1.5rem);                  /* 16px → 24px */
  line-height: 1.4;
}


.campaign-detail__body {
  margin-top: clamp(0.75rem, 0.686rem + 0.26vw, 1rem);                 /* 12px → 16px */
}

.campaign-detail__body p {
  font-size: clamp(0.875rem, 0.779rem + 0.39vw, 1.25rem);              /* 14px → 20px */
  line-height: clamp(1.563rem, 1.387rem + 0.72vw, 2.25rem);            /* 25px → 36px */
  color: #000;
  font-weight: 500;
}

.campaign-detail__body p + p {
  margin-top: 1em;
}

.campaign-detail__body h2,
.campaign-detail__body h3 {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.436rem + 0.26vw, 0.75rem);                      /* 8px → 12px */
  font-size: clamp(1.125rem, 1.029rem + 0.39vw, 1.5rem);               /* 18px → 24px */
  font-weight: 700;
  color: #000;
  margin-top: clamp(2.5rem, 2.245rem + 1.05vw, 3.5rem);                /* 40px → 56px */
  line-height: 1.4;
}

.campaign-detail__body h2::before,
.campaign-detail__body h3::before {
  content: '';
  flex-shrink: 0;
  width: clamp(1rem, 0.888rem + 0.46vw, 1.438rem);                     /* 16px → 23px */
  height: clamp(1rem, 0.888rem + 0.46vw, 1.438rem);
  background: #4d4d4d;
  border-radius: 5px;
}

.campaign-detail__body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: clamp(1.5rem, 1.309rem + 0.78vw, 2.25rem);               /* 24px → 36px */
  margin-bottom: clamp(1.5rem, 1.309rem + 0.78vw, 2.25rem);
}

.campaign-detail__body ul,
.campaign-detail__body ol {
  font-size: clamp(0.875rem, 0.779rem + 0.39vw, 1.25rem);              /* 14px → 20px */
  line-height: clamp(1.563rem, 1.387rem + 0.72vw, 2.25rem);
  color: #000;
  font-weight: 500;
  padding-left: 1.5em;
  margin-top: 1em;
}

.campaign-detail__separator {
  border: none;
  border-top: 1px solid #ccc;
  margin-top: clamp(3.75rem, 2.794rem + 3.92vw, 7.5rem);               /* 60px → 120px */
}

.campaign-detail__back {
  display: flex;
  justify-content: center;
  margin-top: clamp(5rem, 4.681rem + 1.31vw, 6.25rem);                 /* 80px → 100px */
}

.campaign-detail__back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 0.436rem + 0.26vw, 0.75rem);                      /* 8px → 12px */
  width: clamp(18.75rem, 16.52rem + 9.15vw, 27.5rem);                  /* 300px → 440px */
  height: clamp(2.875rem, 2.652rem + 0.92vw, 3.75rem);                 /* 46px → 60px */
  background-color: #4d4d4d;
  border-radius: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);           /* 12px → 20px */
  text-decoration: none;
  color: #fff;
  font-size: clamp(1rem, 0.873rem + 0.52vw, 1.5rem);                   /* 16px → 24px */
  font-weight: 700;
  letter-spacing: clamp(0.04rem, 0.035rem + 0.02vw, 0.06rem);          /* 0.64px → 0.96px */
  transition: background-color 0.3s ease;
}

.campaign-detail__back-btn:hover {
  background-color: #333;
  color: #fff;
  opacity: 1;
}

.campaign-detail__back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.625rem, 1.466rem + 0.65vw, 2.25rem);                  /* 26px → 36px */
  height: clamp(1.625rem, 1.466rem + 0.65vw, 2.25rem);
  background: #fff;
  border-radius: 50%;
  flex-shrink: 0;
}

.campaign-detail__back-icon svg {
  width: 60%;
  height: 60%;
  color: #4d4d4d;
}

/* ---------------------------------------------------------------------------
   Recommend section (おすすめのキャンペーン)
   --------------------------------------------------------------------------- */

.campaign-detail__recommend {
  padding-top: clamp(7.5rem, 6.672rem + 3.4vw, 10.75rem);              /* 120px → 172px */
  padding-bottom: clamp(5rem, 3.406rem + 6.54vw, 11.25rem);            /* 80px → 180px */
  padding-inline: 20px;
}

/* ---------------------------------------------------------------------------
   Campaign card link wrapper (shared across listing & detail pages)
   --------------------------------------------------------------------------- */

.campaign-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}

.campaign-card-link:hover {
  opacity: 0.8;
}

/* ==========================================================================
   CTA Section
   ========================================================================== */

.cta {
  position: relative;
  z-index: 1;
  margin-top: -44px;           /* -80px@390 → -210px@1920 */
}

.cta__bg {
  display: block;
  width: 100%;
}

.cta__bg-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 319 / 160;
  object-fit: cover;
  opacity: 0.8;
}

/* CTA Card Badge (mobile only) */
.cta__card-badge {
  display: none;
}

@media (max-width: 768px) {
  .trust__bottom-bubble {
    transform: translateY(clamp(18.75rem, 12.946rem + 23.81vw, 24.375rem));  /* 300px@390 → 390px@768 */
  }
  .cta__bg-image {
    height: clamp(40.063rem, 33.033rem + 28.84vw, 46.875rem);       /* 641px@390 → 750px@768 */
    object-fit: cover;
    object-position: top;
    opacity: 0.95;
  }
  .trust__bottom-bg {
    position: absolute;
    z-index: 2;
    top: clamp(31rem, 18.619rem + 50.794vw, 43rem);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(21.875rem, 10.183rem + 47.97vw, 67.75rem);
    height: clamp(12.375rem, 10.749rem + 6.67vw, 18.75rem);
    border-radius: clamp(2.363rem, 2.199rem + 0.67vw, 3rem);
    background: #F9E5E6;
  }
  .trust__bottom-cta {
    position: absolute;
    z-index: 4;
    top: clamp(34.5rem, 21.087rem + 55.026vw, 47.5rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: clamp(18.75rem, 13.015rem + 23.53vw, 41.25rem);
    height: clamp(5.75rem, 5.002rem + 3.07vw, 8.688rem);
    padding-top: clamp(1.25rem, 1.186rem + 0.261vw, 1.5rem);
    border-radius: clamp(3.125rem, 2.328rem + 3.27vw, 6.25rem);
    background: #DA545B;
    box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.31);
    text-decoration: none;
    box-sizing: border-box;
  }
  .trust__bottom-cta-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
  }
  .trust__bottom-phone {
    position: absolute;
    z-index: 3;
    top: clamp(25.5rem, 13.119rem + 50.794vw, 37.5rem);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(5.965rem, 4.971rem + 4.08vw, 9.869rem);
    height: clamp(11.625rem, 9.685rem + 7.96vw, 19.232rem);
    filter: drop-shadow(
      clamp(0.394rem, 0.367rem + 0.11vw, 0.5rem)
      clamp(0.197rem, 0.183rem + 0.06vw, 0.25rem)
      clamp(0.984rem, 0.916rem + 0.28vw, 1.25rem)
      rgba(0, 0, 0, 0.30)
    );
  }
  .cta__card-phone {
    bottom: auto;
    top: clamp(-5.875rem, -0.034rem - 12.17vw, -3rem);              /* -48px@390 → -94px@768 */
  }
  .cta__card-badge {
    display: block;
    position: absolute;
    z-index: 3;
    top: 0.8rem;
    right: clamp(3.5rem, 1.437rem + 8.466vw, 5.5rem);
    width: clamp(2.695rem, 2.429rem + 1.09vw, 3.738rem);
    height: clamp(2.788rem, 2.512rem + 1.13vw, 3.867rem);
  }
  .trust__bottom-badge {
    position: absolute;
    z-index: 3;
    top: clamp(32rem, 19.103rem + 52.91vw, 44.5rem);
    left: calc(50% + clamp(4.295rem, 3.654rem + 2.63vw, 6.810rem));
    width: clamp(2.695rem, 2.429rem + 1.09vw, 3.738rem);
    height: clamp(2.788rem, 2.512rem + 1.13vw, 3.867rem);
  }
}

.cta__overlay {
  position: absolute;
  top: clamp(3rem, -4.516rem + 15.639vw, 14.25rem);                /* 138px → 228px */
  left: 50%;
  transform: translateX(-50%);
  width: clamp(21.875rem, 17.519rem + 17.87vw, 38.965rem);          /* 350px → 623.446px */
  height: auto;
}

@media (min-width: 769px) {
  .cta__overlay {
    left: 41.38%;
    transform: none;
  }
}

/* CTA Card */
.cta__card {
  position: absolute;
  top: clamp(13rem, 2.811rem + 21.199vw, 28.25rem);             /* 274px → 452px */
  left: 50%;
  transform: translateX(-50%);
  width: clamp(40rem, 26.137rem + 28.844vw, 60.75rem);           /* 350px → 972px */
  height: clamp(8rem, 2.747rem + 10.93vw, 15.863rem);          /* 198px → 253.8px */
  border-radius: 2.363rem;                                           /* 37.8px (mobile) */
  background: #F9E5E6;
  box-shadow: 7.2px 7.2px 36px 0 rgba(0, 0, 0, 0.35);
  overflow: visible;
}

@media (min-width: 769px) {
  .cta__card {
    border-radius: 1.125rem;                                         /* 18px */
  }
}

/* CTA Card Phone */
.cta__card-phone {
  position: absolute;
  bottom: 0px;
  left: clamp(1.875rem, 1.397rem + 1.96vw, 3.75rem);               /* 30px → 60px */
  width: clamp(5.965rem, 2.780rem + 13.07vw, 18.460rem);            /* 95.447px → 295.357px */
  z-index: 1;
  filter: drop-shadow(6.3px 3.15px 15.75px rgba(0, 0, 0, 0.30));
}

@media (min-width: 769px) {
  .cta__card-phone {
    filter: none;
  }
}

/* CTA Card Button (mobile: trust__bottom-cta style) */
.cta__card-button {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(18.75rem, 13.015rem + 23.53vw, 41.25rem);
  height: clamp(5.75rem, 5.002rem + 3.07vw, 8.688rem);
  padding-top: clamp(1.25rem, 1.186rem + 0.261vw, 1.5rem);
  border-radius: clamp(3.125rem, 2.328rem + 3.27vw, 6.25rem);
  background: #DA545B;
  box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.31);
  text-decoration: none;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .cta__card-button {
    top: clamp(1rem, -0.837rem + 3.823vw, 3.75rem);
    left: clamp(12.75rem, 4.733rem + 16.681vw, 24.75rem);
    transform: none;
    flex-direction: row;
    align-items: center;
    width: clamp(25rem, 20.991rem + 8.341vw, 31rem);
    height: clamp(6rem, 4.789rem + 2.52vw, 7.813rem);
    padding: 0;
    border-radius: 5.625rem;                                      /* 90px */
  }
}

/* CTA Button Icon (desktop only) */
.cta__card-button-icon-wrap {
  display: none;
}

@media (min-width: 769px) {
  .cta__card-button-icon-wrap {
    display: block;
    position: relative;
    width: clamp(5.5rem, 4.581rem + 1.911vw, 6.875rem);
    max-width: 6.864rem;                                             /* 109.823px */
    aspect-ratio: 1 / 1;
    margin-left: 0.5rem;
    flex-shrink: 0;
  }

  .cta__card-button-icon-wrap::before {
    content: "";
    position: absolute;
    inset: 4px;
    background: #fff;
    border-radius: 50%;
  }

  .cta__card-button-icon {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* CTA Button Text */
.cta__card-button-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.3rem;
}

.cta__card-button-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(0.813rem, 0.637rem + 0.72vw, 1.5rem);
  line-height: clamp(0.945rem, 0.677rem + 1.10vw, 2rem);
  color: #FFF;
  text-align: center;
}

.cta__card-button-main {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(1.375rem, 1.087rem + 1.18vw, 2.5rem);
  line-height: normal;
  letter-spacing: clamp(0.028rem, 0.022rem + 0.024vw, 0.05rem);
  color: #FFF;
  text-align: center;
}

@media (min-width: 769px) {
  .cta__card-button-sub {
    font-size: clamp(1rem, 0.766rem + 0.487vw, 1.35rem);                                              /* 21.6px */
    line-height: 1.8rem;                                             /* 28.8px */
  }

  .cta__card-button-main {
    font-size: clamp(1.6rem, 1.166rem + 0.904vw, 2.25rem);                                              /* 36px */
    letter-spacing: 0.045rem;                                        /* 0.72px */
  }
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
  width: 100%;
}

.hero__top {
  position: relative;
}

.hero__top::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #DA545B;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

/* White fill below the curve to mask the pink overlay */
.hero__top::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1920 / 53;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 53' preserveAspectRatio='none'%3E%3Cpath d='M1960 42.54C1925.76 39.1 1893.88 36.1 1863.29 33.42L1858.34 32.99C1850.61 32.32 1842.94 31.66 1835.36 31.03C1532.28 4.86 1222.77 0.66 959.9 0C552.72 4.03 244.34 17.15-40 42.53L-40 53L1960 53Z' fill='white'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}

.hero__image {
  display: block;
  width: 100%;
  margin-top: clamp(1.875rem, 5.629rem - 3.13vw, 4.125rem);        /* 30px at 1920px → 66px at 769px */
  height: auto;
  aspect-ratio: 1920 / 574;
  object-fit: cover;
  animation: hero-zoom-out 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes hero-zoom-out {
  0% {
    opacity: 0;
    scale: 1.08;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

.hero__overlay {
  position: absolute;
  top: clamp(2.854rem, 5.94vw, 7.125rem);                          /* 45.7px at 769px → 114px at 1920px */
  left: clamp(6.706rem, 13.96vw, 16.75rem);                        /* 107.3px at 769px → 268px at 1920px */
  width: clamp(16.769rem, 34.90vw, 41.875rem);                     /* 268.3px at 769px → 670px at 1920px */
  z-index: 3;
  animation: hero-pop-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@keyframes hero-pop-in {
  0% {
    opacity: 0;
    scale: 0.3;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

.hero__overlay-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 670 / 332;
}

.hero__vector {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 3;
  margin-top: -1px;
}


.hero__bottom {
  position: relative;
  background: #fff;
  /* top padding: 49px@1920 → 20px@390 */
  padding-top: clamp(1.25rem, 0.881rem + 1.51vw, 3.063rem);
  /* bottom padding: 87px@1920 → 40px@390 */
  padding-bottom: clamp(2.5rem, 1.903rem + 2.45vw, 5.438rem);
}

.hero__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* gap: ~66px@1920 → 20px@768 (desktop only, mobile is vertical) */
  gap: clamp(0.75rem, -1.505rem + 4.692vw, 4.125rem);
  max-width: 1920px;
  margin: 0 auto;
  /* side padding: 142px@1920 → 20px@390 */
  padding: 0 20px;
}

/* Brand logos: above CTA */
.hero__brand-logos {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__brand-logos-img {
  display: block;
  width: min(43.75rem, 100%);
  height: auto;
  object-fit: contain;
}

/* Company logo grid: 4 cols x 2 rows */
.hero__logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* gap: 10px@1920 → 8px@390 */
  gap: clamp(0.3rem, 0.083rem + 0.452vw, 0.625rem);
  flex: 1 1 0;
  min-width: 0;
  /* max-width: 438px@1920 (4×102 + 3×10) */
  max-width: clamp(12rem, 6.435rem + 22.81vw, 27.375rem);
}

.hero__logo-placeholder {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  background-color: #D9D9D9;
  overflow: hidden;
}

/* Center: Phone + CTA area */
.hero__cta-area {
  position: relative;
  flex-shrink: 1;
  min-width: 0;
  /* Phone is absolutely positioned and extends above the button; reserve space so it does not overlap brand logos (hero-phone.png 329×428) */
  /* 24px@390 → 81px@1920 */
  padding-top: clamp(1.5rem, 0.592rem + 3.726vw, 5.063rem);
}

/* Phone: absolutely positioned, bottom-aligned with CTA, overlaps left side */
.hero__phone {
  position: absolute;
  left: clamp(1.5rem, 1.166rem + 0.695vw, 2rem);
  bottom: 6px;
  /* width: 164px@1920 → 86px@390 */
  width: clamp(4rem, -0.176rem + 8.688vw, 10.25rem);
  height: auto;
  z-index: 2;
}

.hero__cta-wrap {
  position: relative;
}

.hero__cta-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* width: 627px@1920 → 326px@390 */
  width: clamp(16rem, 0.508rem + 32.234vw, 39.188rem);
  max-width: 100%;
  /* height: 139px@1920 → 92px@390 */
  height: clamp(4.1rem, 1.035rem + 6.378vw, 8.688rem);
  /* padding-left to offset text past phone overlap: ~164px@1920 → ~86px@390 */
  padding-left: clamp(4.5rem, 0.658rem + 7.993vw, 10.25rem);
  background-color: #DA545B;
  /* border-radius: 100px@1920 → 50px@390 */
  border-radius: clamp(3.125rem, 2.491rem + 2.61vw, 6.25rem);
  text-decoration: none;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
}

.hero__cta-button:hover {
  opacity: 0.85;
}

.hero__cta-sub {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 800;
  /* 24px@1920 → 13px@390 */
  font-size: clamp(0.6rem, -0.001rem + 1.251vw, 1.5rem);
  color: #fff;
  /* line-height: 32px@1920 → 15px@390 */
  line-height: clamp(0.938rem, 0.722rem + 0.88vw, 2rem);
}

.hero__cta-main {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 900;
  /* 40px@1920 → 22px@390 */
  font-size: clamp(1rem, -0.002rem + 2.085vw, 2.5rem);
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Flower decoration: top-right of CTA button */
.hero__flower {
  position: absolute;
  /* top: -3.2rem@1920 → -1.8rem@390 */
  top: clamp(-3.2rem, -1.444rem - 1.46vw, -1.8rem);
  /* right: -10px@1920 → -5px@390 */
  right: clamp(3rem, 2.49rem + 2.092vw, 5rem);
  /* width: 60px@1920 → 30px@390 */
  width: clamp(1.875rem, 1.494rem + 1.57vw, 3.75rem);
  height: auto;
  z-index: 3;
}

/* Note text */
.hero__note {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  /* 14px@1920 → 12px@390 */
  font-size: clamp(0.75rem, 0.724rem + 0.10vw, 0.875rem);
  color: #000;
  text-align: right;
  max-width: 1920px;
  /* margin-top: 24px@1920 → 12px@390 */
  margin: clamp(0.75rem, 0.597rem + 0.63vw, 1.5rem) auto 0;
  /* side padding: 142px@1920 → 20px@390 */
  padding: 0 clamp(1.25rem, -0.294rem + 6.34vw, 8.875rem);
}

/* Mobile-only: combined logo grid below CTA */
.hero__bottom-logos-mobile {
  display: none;
}

@media (max-width: 768px) {
  .hero__image {
    aspect-ratio: 390 / 450;
  }

  .hero__overlay {
    top: 114px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(21.375rem, 14.54rem + 28.042vw, 28rem);
  }

  .hero__overlay-image {
    aspect-ratio: 342 / 264;
  }

  /* Mobile: vertical layout */
  .hero__bottom-inner {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .hero__brand-logos {
    padding: 0 clamp(1.25rem, 0.869rem + 1.57vw, 2.5rem);
    box-sizing: border-box;
  }

  .hero__cta-area {
    width: 100%;
    /* At least previous 28px; scale up slightly so overlap does not return on narrow phones */
    padding-top: clamp(1.75rem, 1.497rem + 0.65vw, 2.25rem);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }

  /* Hide desktop logo grids on mobile */
  .hero__logos--left,
  .hero__logos--right {
    display: none;
  }

  /* Mobile logo grid: 4 cols x 2 rows */
  .hero__bottom-logos-mobile {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.5rem, 0.374rem + 0.52vw, 1rem);
    width: 100%;
    box-sizing: border-box;
    /* margin-top: 12px from CTA bottom */
    margin-top: clamp(0.75rem, 0.624rem + 0.52vw, 1.25rem);
    /* padding: 20px sides */
    padding: 0 clamp(1.25rem, 0.869rem + 1.57vw, 2.5rem);
  }

  .hero__bottom-logos-mobile .hero__logo-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .hero__phone {
    left: clamp(3.25rem, -7.325rem + 43.386vw, 13.5rem);
  }
  .hero__cta-sub {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-weight: 800;
    /* 24px@1920 → 13px@390 */
    font-size: clamp(0.813rem, 0.673rem + 0.57vw, 1.5rem);
    color: #fff;
    /* line-height: 32px@1920 → 15px@390 */
    line-height: clamp(0.938rem, 0.722rem + 0.88vw, 2rem);
  }
  .hero__cta-main {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-weight: 900;
    /* 40px@1920 → 22px@390 */
    font-size: clamp(1.375rem, 1.147rem + 0.94vw, 2.5rem);
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1.2;
  }
  .hero__phone {
    position: absolute;
    left: clamp(1.85rem, -7.075rem + 36.614vw, 10.5rem);
    bottom: 6px;
    width: clamp(5.375rem, 4.384rem + 4.06vw, 10.25rem);
  }
  .hero__cta-button {
    width: clamp(20.375rem, 16.557rem + 15.66vw, 39.188rem);
    height: clamp(5.75rem, 5.154rem + 2.44vw, 8.688rem);
    /* padding-left to offset text past phone overlap: ~164px@1920 → ~86px@390 */
    padding-left: clamp(5.375rem, 4.384rem + 4.06vw, 10.25rem);
  }
  .hero__logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* gap: 10px@1920 → 8px@390 */
    gap: clamp(0.5rem, 0.474rem + 0.10vw, 0.625rem);
    flex: 1 1 0;
    min-width: 0;
    /* max-width: 438px@1920 (4×102 + 3×10) */
    max-width: clamp(12rem, 6.435rem + 22.81vw, 27.375rem);
  }
  .hero__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: ~66px@1920 → 20px@768 (desktop only, mobile is vertical) */
    gap: clamp(1.25rem, -0.665rem + 3.99vw, 4.125rem);
    max-width: 1920px;
    margin: 0 auto;
    /* side padding: 142px@1920 → 20px@390 */
    padding: 0 clamp(1.25rem, -0.294rem + 6.34vw, 8.875rem);
  }
  .cta__overlay {
    top: clamp(8.625rem, 7.192rem + 5.88vw, 14.25rem);                /* 138px → 228px */      /* 350px → 623.446px */
  }
  .cta__card {
    position: absolute;
    top: clamp(22rem, 17.873rem + 16.931vw, 26rem);             /* 274px → 452px */
    left: 50%;
    transform: translateX(-50%);
    width: clamp(21.875rem, 11.967rem + 40.65vw, 60.75rem);           /* 350px → 972px */
    height: clamp(12.375rem, 11.485rem + 3.65vw, 15.863rem);          /* 198px → 253.8px */
    border-radius: 2.363rem;                                           /* 37.8px (mobile) */
    background: #F9E5E6;
    box-shadow: 7.2px 7.2px 36px 0 rgba(0, 0, 0, 0.35);
    overflow: visible;
  }
}

/* ==========================================================================
   Site Footer
   ========================================================================== */

.site-footer {
  background-color: #4d4d4d;
  color: #fff;
  height: 418px;
}

.site-footer__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Main row: Logo + Nav + Contact in one line */
.site-footer__main {
  display: flex;
  align-items: center;
  padding-top: 60px;
  padding-left: clamp(2.5rem, -1.25rem + 4.167vw, 3.75rem);
  gap: clamp(3rem, -2.25rem + 5.833vw, 4.75rem);
}

.site-footer__logo {
  flex-shrink: 0;
}

.site-footer__logo img {
  width: clamp(9rem, 5rem + 6.25vw, 12.5rem);

  aspect-ratio: 200 / 58.27;
}

.site-footer__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, -1.714rem + 4.241vw, 3.375rem);
  flex-shrink: 0;
}

.footer-nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, -3.125rem + 5.417vw, 3.375rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav-list li a {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.032rem + 0.52vw, 0.656rem);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.8rem, 0.286rem + 0.804vw, 1.25rem);
  font-style: normal;
  font-weight: 500;
}

.footer-nav-list li a::before {
  content: "";
  display: block;
  width: clamp(1.3rem, 0.882rem + 0.654vw, 1.666rem);
  height: clamp(1.3rem, 0.882rem + 0.654vw, 1.666rem);
  aspect-ratio: 1 / 1;
  background: url('assets/images/footer-nav-icon.png') center / contain no-repeat;
  flex-shrink: 0;
}

.footer-nav-list li a:hover {
  opacity: 0.7;
}

.footer-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(14rem, 3.5rem + 11.667vw, 17.5rem);                /* 240px → 280px */
  height: clamp(2.687rem, 0.623rem + 2.293vw, 3.375rem);             /* 44px → 54px */
  background-color: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: 67px;
  text-decoration: none;
  padding: 0;
}

/* Bottom row: Legal + Company + Copyright */
.site-footer__bottom {
  margin-top: 60px;
  text-align: center;

}

.site-footer__legal {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, -0.338rem + 5.49vw, 6.25rem);                   /* 16px → 100px */
  margin-bottom: var(--space-md);
}

.site-footer__legal a {
  color: #fff;
  font-size: clamp(0.875rem, -0.25rem + 1.25vw, 1.25rem);
  font-weight: 500;
}

.site-footer__company {
  font-size: clamp(0.875rem, -0.25rem + 1.25vw, 1.25rem);
  font-weight: 500;
  margin-bottom: 70px;
}

.site-footer__company a {
  color: #fff;
  text-decoration: underline;
}

.site-footer__copyright {
  font-size: clamp(0.75rem, 0.375rem + 0.417vw, 0.875rem);
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   Floating LINE CTA (viewport-fixed, bottom-right)
   ========================================================================== */

.floating-cta-line {
  position: fixed;
  right: clamp(0.75rem, 0.373rem + 1.57vw, 2rem);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(0.75rem, 0.373rem + 1.57vw, 2rem));
  z-index: 998;
  line-height: 0;
  border-radius: clamp(0.5rem, 0.436rem + 0.26vw, 0.75rem);
  box-shadow: var(--shadow-lg);
  transition: translate 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.floating-cta-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 35%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.12) 65%,
    transparent 100%
  );
  width: 55%;
  height: 100%;
  left: 0;
  top: 0;
  animation: floating-cta-shine 3.4s ease-in-out infinite;
  animation-delay: 0.6s;
  pointer-events: none;
  z-index: 1;
}

.floating-cta-line:hover {
  translate: 0 -2px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  opacity: 1;
}

.floating-cta-line:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}

.floating-cta-line__img {
  display: block;
  position: relative;
  z-index: 0;
  /* 正方形（狭い画面では幅に合わせて縮小しつつ 1:1 を維持） */
  width: min(13rem, calc(100vw - 1.5rem));
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Hide while mobile nav overlay is open (toggle sits at z-index 1001) */
body.menu-open .floating-cta-line {
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .floating-cta-line {
    transition: none;
  }

  .floating-cta-line:hover {
    translate: none;
  }

  .floating-cta-line::after {
    animation: none;
    opacity: 0;
  }
}

/* ==========================================================================
   Responsive: Howto steps (max-width: 1279px)
   ========================================================================== */

@media (max-width: 1279px) {
  .howto__steps {
    flex-direction: column;
    align-items: center;
    gap: clamp(5rem, 3.684rem + 5.399vw, 8rem);
    max-width: clamp(18.75rem, 7.917rem + 44.444vw, 41.25rem);
    margin-inline: auto;
  }

  .howto-step {
    width: 100%;
  }

  .howto-step--1 .howto-step__card,
  .howto-step--2 .howto-step__card,
  .howto-step--3 .howto-step__card {
    height: auto;
    width: 100%;
  }
  .howto-step__badge {
    left: 22%;
  }
  .howto__steps {
    margin-top: clamp(6rem, 4.684rem + 5.399vw, 9rem);
  }
  .howto-step__visual {
    margin-bottom: clamp(-1.875rem, -3.135rem + 5.17vw, 1rem);      /* -30px @390 → 16px @1279 */
  }
  .howto-step--1 .howto-step__img {
  margin-top: clamp(-10rem, -10.822rem + 3.37vw, -8.125rem);        /* -160px @390 → -130px @1279 */
}
}
.faq .l-container {
  padding-inline: revert;
  margin-bottom: clamp(8rem, 7.49rem + 2.092vw, 10rem);
}
/* ==========================================================================
   Responsive: Tablet (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  .l-container {
    padding-inline: clamp(1.25rem, 0.482rem + 3.15vw, 2.5rem);        /* 20px @ 390px → 40px @ 1024px */
  }

  .faq .l-container {
    padding-inline: revert;
  }

  .campaigns__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .benefits {        /* 126px@390 → 266px@1920 (reserve space for banner lower half) */
    border-radius: 70% 70% 0 0 / 3% 3% 0 0;          /* -80px@390 → -210px@1920 */
  }
  
  .benefits__bg-img {
    border-radius: 70% 70% 0 0 / 3% 3% 0 0;
}
.campaign-detail__badges {
                  /* 12px → 20px */
  margin-top: 1.5rem;
}
}

/* ==========================================================================
   Responsive: Trust grid stack (max-width: 1200px)
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  .trust__grid {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 20px;
    margin-top: 40px;
  }

  .trust-point:last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .trust-point__circle {
    width: 100%;
    max-width: clamp(18.75rem, 7.917rem + 44.444vw, 41.25rem);
    height: auto;
    aspect-ratio: 1;
  }

  .trust-point__icon img {
    width: clamp(3rem, 1.373rem + 6.677vw, 6.38rem);
    height: auto;
    object-fit: contain;
  }
  .trust-point:nth-child(1) .trust-point__icon, .trust-point:nth-child(3) .trust-point__icon {
    margin-bottom: 2rem;
}
.trust-point__title {
  font-size: clamp(1.5rem, 1.198rem + 0.627vw, 1.6rem);
  margin-bottom: 14px;
  text-align: center;
}
.trust-point__desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(0.9rem, 0.499rem + 0.626vw, 1.25rem);
  line-height: 1.5;
  color: #000;
  max-width: 330px;
}
.cta__overlay {
  width: clamp(18rem, -6.125rem + 50.196vw, 26rem);
  top: 7rem;
}
.benefits__bg {
  position: absolute;
  height: 1280px;
}
}

@media (max-width: 768px) {
  .trust__grid {
    grid-template-columns: 1fr;
    max-width: clamp(18.75rem, 7.917rem + 44.444vw, 41.25rem);
    margin-inline: auto;
    gap: 20px;
    margin-top: 40px;
  }

  .trust-point__circle {
    width: 100%;
    max-width: clamp(18.75rem, 7.917rem + 44.444vw, 41.25rem);
    height: auto;
    aspect-ratio: 1;
  }

  .trust-point__icon img {
    width: clamp(3rem, 1.373rem + 6.677vw, 6.38rem);
    height: auto;
    object-fit: contain;
  }
  .trust-point__title {
    font-size: clamp(1.3rem, 0.784rem + 2.116vw, 1.8rem);
    margin-bottom: 12px;
}
.trust-point__desc {
  font-size: clamp(0.9rem, 0.539rem + 1.481vw, 1.25rem);
}
.trust-point:nth-child(1) .trust-point__icon, .trust-point:nth-child(3) .trust-point__icon {
  margin-top: clamp(1rem, -0.032rem + 4.233vw, 2rem);
  margin-bottom: clamp(1.5rem, 0.468rem + 4.233vw, 2.5rem);
}
.faq {
  border-radius: 0 0 50% 50% / 0 0 1% 1%;;
}
}

/* ==========================================================================
   Responsive: Header Mobile (max-width: 1439px)
   ========================================================================== */

@media (max-width: 1439px) {
  :root {
    --header-height: 100px;
  }

  .site-header__inner {
    position: relative;
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .site-header__logo {
    position: absolute;
    top: 48px;
    left: 28px;
  }

  .site-header__logo img {
    width: 123.565px;
    height: 36px;
    aspect-ratio: 127 / 37;
  }

  .site-header__menu-toggle {
    display: block;
    position: absolute;
    top: 60px;
    right: 28px;
    z-index: 1001;
  }

  /* Toggle hamburger / close icons */
  body.menu-open .hamburger-svg {
    display: none;
  }

  body.menu-open .close-svg {
    display: block;
  }

  .site-header__nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 28px 60px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    height: 85%;
    bottom: auto;
    border-radius: 0 0 40% 40% / 0 0 2% 2%;;
  }

  .site-header__nav.is-open {
    transform: translateX(0);
  }

  /* Mobile menu logo (top-left) */
  .site-header__nav-logo {
    display: block;
    position: absolute;
    top: 48px;
    left: 28px;
  }

  .site-header__nav-logo img {
    width: 123.565px;
    height: 36px;
  }

  /* Top link visible in mobile */
  .site-header__nav .nav-list .nav-list__top-link {
    display: list-item;
  }

  .site-header__nav .nav-list {
    flex-direction: column;
    gap: 36px;
    align-items: center;
    margin-top:48px;
  }

  .site-header__nav .nav-list li a {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: clamp(0.875rem, 0.829rem + 0.191vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.56px;
    color: #000;
    text-decoration: none;
  }

  /* Hide nav icon in mobile menu */
  .site-header__nav .nav-list li a::before {
    display: none;
  }

  /* Mobile menu CTA */
  .site-header__nav-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 72px;
    background-color: #DA545B;
    border-radius: 50px;
    text-decoration: none;
    margin-top: auto;
  }

  .site-header__nav-cta-sub {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #fff;
    text-align: center;
  }

  .site-header__nav-cta-main {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.4;
    color: #fff;
    letter-spacing: 0.32px;
  }

  .site-header__cta {
    display: none;
  }

  body.menu-open {
    overflow: hidden;
  }

  /* Footer responsive */
  .site-footer {
    height: 776px;
  }

  .site-footer__main {
    flex-direction: column;
    align-items: center;
    padding-top: 76px;
    padding-left: 0;
    gap: var(--space-lg);
  }

  .site-footer__nav {
    flex-direction: column;
    width: 100%;
  }

  .footer-nav-list {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }

  .footer-nav-cta {
    margin-top: 32px;
  }

  .site-footer__legal {
    align-items: center;
    gap: 44px;
  }
  .site-footer__bottom {
    margin-top: 78px;
  }
  .site-footer__company {
    margin-bottom: 78px;
  }
  .footer-nav-list li a {
    gap: clamp(0.5rem, 0.032rem + 0.52vw, 0.656rem);
    font-size: clamp(0.8rem, 0.286rem + 0.804vw, 1.25rem);
  }
}

/* ==========================================================================
   Responsive: Mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* Section header mobile: dots above title only */
  .section-header {
    flex-direction: column;
    gap: 0;
  }

  .section-header__dots:last-child {
    display: none;
  }

  .section-header__dots:first-child {
    gap: 12px;
    margin-bottom: 16px;
  }

  .campaigns__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .testimonials__cards {
    gap: 5rem;
    padding-block: 6rem;
  }
  .testimonials {
    margin-top: 0rem;   /* border-radius隙間を埋める */
  }
  .testimonials__header {
    margin-top: clamp(9rem, 7.968rem + 4.233vw, 10rem);
  }
}

@media (max-width: 1024px) {
  .trust {
    background: linear-gradient(to bottom, var(--color-bg-pink) 70%, #4D4D4D 100%);
    border-radius: 0 0 60% 86% / 0 0 6% 6%;
  }
  }

@media (max-width: 768px) {
.trust {
  background: linear-gradient(to bottom, var(--color-bg-pink) 78%, #4D4D4D 100%);
  border-radius: 0 ;
}
}

@media (min-width: 1025px) and (max-width: 1720px) {
.testimonials__photo--04 {
  width: clamp(10rem, 6.633rem + 13.83vw, 22.938rem);                  /* 160px@390 → 367px@1920 */
  height: clamp(10rem, 6.633rem + 13.83vw, 22.938rem);
  top: auto;
  bottom: clamp(54rem, 49.06rem + 7.711vw, 56rem);                    /* 880px@1025 → 528px@1920 */
  right: 0;
}

.testimonials__photo--05 {
  width: clamp(9.375rem, 6.198rem + 13.04vw, 19.063rem);              /* 150px@390 → 305px@1920 */
  height: clamp(9.375rem, 6.198rem + 13.04vw, 19.063rem);
  top: auto;
  bottom: clamp(36rem, 31.06rem + 7.711vw, 38rem);                     /* 576px@1025 → 272px@1920 */
  left: clamp(1.25rem, 0.287rem + 3.92vw, 7rem);                      /* 20px@390 → 112px@1920 */
}
}

/* ==========================================================================
   Scroll Animations
   ========================================================================== */

[data-anim] {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-anim="fade-up"] {
  transform: translateY(20px);
}

[data-anim="fade-left"] {
  transform: translateX(-20px);
}

[data-anim="fade-right"] {
  transform: translateX(20px);
}

[data-anim="scale-in"] {
  transform: scale(0.9);
}

[data-anim="fade-in"] {
  /* opacity: 0 only */
}

[data-anim].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero__overlay,
  .hero__image {
    animation: none !important;
  }
  .trust__bottom-bubble,
  .benefits__bubble,
  .benefits__banner {
    scale: 1 !important;
    opacity: 1 !important;
    animation: none !important;
  }
}