/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --color-ink: #022639;
  --color-body: #3C5666;
  --color-muted: #55707F;
  --color-muted-light: #B9CCD8;
  --color-muted-pale: #A9B6BF;
  --color-blue: #036EB7;
  --color-blue-hover: #025A96;
  --color-blue-light: #6FB4E4;
  --color-green: #00A97D;
  --color-green-dark: #0A6E54;
  --color-orange: #F29600;
  --color-white: #FFFFFF;
  --color-error: #A94442;

  --color-border: #E6ECF1;
  --color-border-mid: #B9C9D4;
  --color-border-light: #C9D6E2;
  --color-border-header: #E3EAEF;
  --color-border-plan: #EDF2F5;
  --color-border-divider: #DCE7E2;

  --color-dark-bg: #0A2138;
  --color-dark-bg-alt: #08243D;
  --color-dark-bg-deep: #011A27;
  --color-dark-teal: #072C33;
  --color-dark-card: #0C2A45;

  --color-bg-light: #F2F6F9;
  --color-bg-bar: #E5EAF0;
  --color-bg-green-pale: #E9F4EE;
  --color-bg-green-soft: #D9EDE3;
  --color-bg-blue-soft: #D8E4F2;
  --color-bg-blue-circle: #E7F0FA;
  --color-bg-green-circle: #E8F4EF;
  --color-bg-thanks: #E6F6F1;
  --color-bg-footer-link: #9FB4C0;
  --color-bg-footer-copy: #6E8794;

  --color-hero-grad-start: #EDF4FA;
  --color-hero-grad-mid: #DDE8F3;
  --color-hero-grad-end: #DFF0E8;
  --color-support-grad-start: #F1F6FA;
  --color-support-grad-mid: #EBF1F7;
  --color-support-grad-end: #EAF4EF;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 14px;
  --radius-4xl: 18px;
  --radius-5xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 12px rgba(2, 38, 57, 0.08);
  --shadow-md: 0 6px 18px rgba(2, 38, 57, 0.04);
  --shadow-lg: 0 8px 20px rgba(2, 38, 57, 0.07);
  --shadow-xl: 0 8px 24px rgba(2, 38, 57, 0.05);
  --shadow-2xl: 0 12px 30px rgba(2, 38, 57, 0.07);
  --shadow-card: 0 16px 36px rgba(2, 38, 57, 0.14);
  --shadow-hero-node: 0 10px 26px rgba(2, 38, 57, 0.08);
  --shadow-btn: 0 8px 20px rgba(242, 150, 0, 0.28);
  --shadow-header: 0 4px 16px rgba(2, 38, 57, 0.06);
  --shadow-fixed-cta: 0 -8px 24px rgba(2, 38, 57, 0.10);
  --shadow-plan-featured: 0 16px 36px rgba(0, 169, 125, 0.14);
  --shadow-why-card: 0 20px 48px rgba(2, 38, 57, 0.18);
  --shadow-sample-back: 0 20px 50px rgba(2, 38, 57, 0.14);
  --shadow-sample-front: 0 24px 56px rgba(2, 38, 57, 0.16);

  --spacing-section-y: clamp(64px, 8vw, 112px);
  --spacing-section-x: 24px;
  --container-max: 1000px;
  --container-narrow: 840px;
  --container-form: 720px;
  --container-wide: 1240px;

  --font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-body);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-blue);
}

a:hover {
  color: var(--color-blue-hover);
}

input,
textarea,
button,
summary {
  font-family: inherit;
}

summary::-webkit-details-marker {
  color: var(--color-blue);
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.u-pc {}
.u-flow {}
.u-flex-none {
  flex: none;
}
.u-nowrap {
  white-space: nowrap;
}

.is-hidden {
  display: none !important;
}

.u-br-sp {
  display: none;
}

@media (max-width: 820px) {
  .u-pc {
    display: none !important;
  }
  .u-br-pc {
    display: none;
  }
  .u-br-sp {
    display: inline;
  }
}

@media (max-width: 999px) {
  .u-flow {
    display: none !important;
  }
}

/* ==========================================================================
   Layout
   ========================================================================== */
.l-container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.l-container--narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.l-container--wide {
  max-width: var(--container-wide);
  margin: 0 auto;
}

.l-container--form {
  max-width: var(--container-form);
  margin: 0 auto;
}

/* ==========================================================================
   Section (shared)
   ========================================================================== */
.c-section {
  padding: var(--spacing-section-y) var(--spacing-section-x);
}

.c-section--hero {
  padding: 164px max(0px, calc((100% - var(--container-max)) / 2)) 112px;
  background:
    radial-gradient(1000px 640px at 88% 8%, rgba(3, 110, 183, 0.22), transparent 65%),
    radial-gradient(800px 560px at 6% 92%, rgba(0, 169, 125, 0.20), transparent 62%),
    linear-gradient(150deg, var(--color-hero-grad-start) 0%, var(--color-hero-grad-mid) 48%, var(--color-hero-grad-end) 100%);
}

.c-section--dark {
  background:
    radial-gradient(900px 560px at 88% 6%, rgba(3, 110, 183, 0.35), transparent 60%),
    radial-gradient(760px 520px at 8% 96%, rgba(0, 169, 125, 0.28), transparent 58%),
    linear-gradient(150deg, var(--color-dark-bg-alt) 0%, var(--color-dark-bg) 52%, var(--color-dark-teal) 100%);
}

.c-section--white {
  background: var(--color-white);
}

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

.c-section--light-grad {
  background:
    radial-gradient(900px 560px at 90% 6%, rgba(3, 110, 183, 0.10), transparent 60%),
    radial-gradient(760px 500px at 6% 94%, rgba(0, 169, 125, 0.10), transparent 58%),
    linear-gradient(150deg, var(--color-support-grad-start) 0%, var(--color-support-grad-mid) 50%, var(--color-support-grad-end) 100%);
}

.c-section--form {
  background: var(--color-ink);
  scroll-margin-top: 60px;
}

.c-section--faq {
  scroll-margin-top: 70px;
}

.c-section--sample {
  scroll-margin-top: 70px;
}

.c-section__head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.c-section__head--steps {
  margin-bottom: clamp(48px, 6vw, 88px);
}

.c-section__head--support,
.c-section__head--plan,
.c-section__head--flow,
.c-section__head--faq {
  margin-bottom: clamp(40px, 5vw, 64px);
}

.c-section__head--sample {
  margin-bottom: clamp(40px, 5vw, 72px);
}

.c-section__label {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.c-section__label--blue {
  color: var(--color-blue);
}

.c-section__label--blue-light {
  color: var(--color-blue-light);
}

.c-section__label--green {
  color: var(--color-green);
}

.c-section__head .c-section__label {
  margin-bottom: 10px;
}

.c-section__label--center {
  text-align: center;
}

.c-section__title {
  margin: 0 0 20px;
  color: var(--color-ink);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

.c-section__title--center {
  text-align: center;
  font-size: clamp(24px, 2.8vw, 38px);
  margin-bottom: 0;
}

.c-section__title--center-lead {
  text-align: center;
  font-size: clamp(24px, 2.8vw, 38px);
  margin-bottom: 18px;
}

.c-section__title--white {
  color: var(--color-white);
}

.c-section__title--form {
  color: var(--color-white);
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.6;
  margin-bottom: 16px;
}

.c-section__lead {
  margin: 0 0 clamp(40px, 5vw, 72px);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.9;
}

.c-section__lead--center {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.c-section__lead--white {
  color: var(--color-muted-light);
}

.c-section__lead--form {
  margin: 0;
  color: var(--color-muted-light);
  font-size: 15px;
}

.c-section__lead--steps {
  margin: 0;
  text-align: center;
  color: var(--color-muted-light);
}

.c-section__rule {
  display: inline-block;
  width: 44px;
  height: 2px;
  background: var(--color-green);
  margin-bottom: 20px;
}

.c-section__rule--wide {
  width: 56px;
}

.c-section__footnote {
  max-width: var(--container-max);
  margin: clamp(32px, 4vw, 48px) auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
}

.c-section__closing {
  text-align: center;
  margin-top: clamp(48px, 6vw, 80px);
}

.c-section__closing--problem {
  margin-top: clamp(48px, 6vw, 88px);
}

.c-section__closing-text {
  margin: 0 0 14px;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 900;
  color: var(--color-ink);
  letter-spacing: 0.04em;
  line-height: 1.8;
}

.c-section__closing-text--white {
  color: var(--color-white);
  font-size: clamp(17px, 1.6vw, 22px);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  background: var(--color-orange);
  color: var(--color-white);
  font-weight: 700;
  white-space: nowrap;
  border: 1.5px solid var(--color-orange);
  box-sizing: border-box;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.c-btn:hover {
  background: var(--color-white);
  color: var(--color-orange);
  border-color: var(--color-orange);
  box-shadow: none;
}

.c-btn:hover svg,
.c-btn:hover svg * {
  stroke: currentColor;
}

.c-btn:active {
  transform: scale(0.98);
}

.c-btn--header {
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--radius-lg);
}

.c-btn--hero {
  font-size: 19px;
  padding: 18px 30px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-btn);
}

.c-btn--cta-bar {
  gap: 12px;
  font-weight: 900;
  font-size: clamp(15px, 1.4vw, 19px);
  padding: 20px 32px;
  border-radius: var(--radius-xl);
  letter-spacing: 0.04em;
  flex: 1 1 280px;
  max-width: 420px;
}

.c-btn--plan {
  font-size: 17px;
  padding: 18px 30px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-btn);
}

.c-btn--submit {
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.04em;
  padding: 18px 30px;
  border-radius: var(--radius-xl);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
}

.c-btn--fixed {
  width: 100%;
  font-size: 16px;
  padding: 14px 20px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-btn);
}

/* ==========================================================================
   Header
   ========================================================================== */
#site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: blur(8px);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--color-border-header);
  box-shadow: var(--shadow-header);
}

.c-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.c-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.c-header__logo img {
  height: 22px;
  display: block;
}

.c-header__actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.c-header__nav {
  display: flex;
  gap: 24px;
}

.c-header__link {
  text-decoration: none;
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
}

/* ==========================================================================
   Hero / KV
   ========================================================================== */
.c-hero__grid {
  max-width: none;
  width: min(100%, var(--container-max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

.c-hero__badge {
  display: inline-block;
  margin: 0 0 24px;
  background: var(--color-white);
  color: var(--color-green);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-green);
}

.c-hero__title {
  margin: 0 0 24px;
  color: var(--color-ink);
  font-size: 42px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-wrap: pretty;
}

.c-hero__title-nowrap {
  white-space: nowrap;
}

.c-hero__lead {
  margin: 0 0 16px;
  color: var(--color-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.9;
}

.c-hero__lead--last {
  margin-bottom: 32px;
}

.c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}

.c-hero__visual {
  justify-self: center;
  width: 100%;
  max-width: 520px;
  position: relative;
  margin-bottom: 40px;
  container-type: inline-size;
  container-name: hero-visual;
}

.c-hero__diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.c-hero__ring {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 11%;
  bottom: 11%;
  border: 1.5px dashed var(--color-border-mid);
  border-radius: 50%;
}

.c-hero__axis-x {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 1px;
  background: var(--color-border-light);
}

.c-hero__axis-y {
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 50%;
  width: 1px;
  background: var(--color-border-light);
}

.c-hero__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 4;
}

.c-hero__node--top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
}

.c-hero__node--bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
}

.c-hero__node--left {
  left: 0;
  top: 50%;
  width: clamp(72px, 22cqi, 110px);
  transform: translateY(calc(-1 * clamp(30px, 7.5cqi, 38px)));
}

.c-hero__node--right {
  right: 0;
  top: 50%;
  width: clamp(72px, 22cqi, 110px);
  transform: translateY(calc(-1 * clamp(30px, 7.5cqi, 38px)));
}

.c-hero__node-icon {
  position: relative;
  width: clamp(52px, 15cqi, 76px);
  height: clamp(52px, 15cqi, 76px);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-hero-node);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-hero__node--left .c-hero__node-icon {
  margin: 0 auto;
}

.c-hero__node-badge {
  position: absolute;
}

.c-hero__node-badge--top {
  right: -4px;
  bottom: -2px;
}

.c-hero__node-badge--side {
  right: -6px;
  bottom: -2px;
}

.c-hero__node-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink);
  text-align: center;
}

.c-hero__node-label--block {
  display: block;
  margin-top: 6px;
}

.c-hero__node-label-sub {
  font-size: 10px;
  font-weight: 500;
}

/* 診断書：円の中心（A4縦比率） */
.c-hero__card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: clamp(128px, 36cqi, 168px);
  aspect-ratio: 210 / 297;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  padding: clamp(12px, 3.2cqi, 16px) clamp(10px, 2.6cqi, 13px);
}

.c-hero__card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: clamp(10px, 3cqi, 14px);
  padding-bottom: clamp(8px, 2.4cqi, 10px);
  border-bottom: 1px solid var(--color-border-light);
}

.c-hero__card-title {
  font-size: clamp(10px, 2.6cqi, 12px);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.35;
}

.c-hero__card-tag {
  font-size: 8px;
  font-weight: 700;
  color: var(--color-green);
  border: 1px solid var(--color-green);
  border-radius: var(--radius-sm);
  padding: 2px 5px;
  white-space: nowrap;
}

.c-hero__card-rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  min-height: 0;
}

.c-hero__card-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.c-hero__card-row svg {
  flex: none;
  width: 12px;
  height: 12px;
}

.c-hero__card-bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--color-bg-bar);
}

.c-hero__trust {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.c-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  padding: 4px 20px;
}

.c-hero__trust-item + .c-hero__trust-item {
  border-left: 1px solid var(--color-border-light);
}

.c-hero__trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* KV scan animation */
.kv-scan {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
}

.kv-scan__glow {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  z-index: 0;
  background: conic-gradient(
    from 90deg,
    transparent 0deg,
    transparent 280deg,
    rgba(3, 110, 183, 0.08) 310deg,
    rgba(3, 110, 183, 0.35) 345deg,
    rgba(242, 150, 0, 0.55) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: kv-spin 6.5s linear infinite;
}

.kv-scan__arm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 0;
  z-index: 1;
  transform-origin: left center;
  animation: kv-spin 6.5s linear infinite;
}

.kv-scan__pointer {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  transform: translate(50%, -50%);
  filter: drop-shadow(0 2px 6px rgba(2, 38, 57, 0.14));
  opacity: 0.88;
}

.kv-scan__pointer-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  animation: kv-spin-reverse 6.5s linear infinite;
}

@keyframes kv-spin {
  to { transform: rotate(360deg); }
}

@keyframes kv-spin-reverse {
  to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .kv-scan__glow,
  .kv-scan__arm,
  .kv-scan__pointer-inner {
    animation: none;
  }
}

/* ==========================================================================
   Problem
   ========================================================================== */
.c-problem__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px 0;
}

.c-problem__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 28px;
}

.c-problem__item + .c-problem__item {
  border-left: 1px dashed rgba(255, 255, 255, 0.3);
}

.c-problem__icon-wrap {
  position: relative;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.c-problem__icon-badge {
  position: absolute;
  border-radius: 50%;
  background: var(--color-dark-bg);
  border: 1.5px solid var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-problem__icon-badge--cross {
  right: -26px;
  bottom: -6px;
  width: 44px;
  height: 44px;
}

.c-problem__icon-badge--cross-alt {
  right: -18px;
  bottom: -2px;
  width: 44px;
  height: 44px;
}

.c-problem__icon-badge--question {
  right: -30px;
  top: 14px;
  width: 48px;
  height: 48px;
  border-style: dashed;
  color: var(--color-orange);
  font-size: 22px;
  font-weight: 700;
}

.c-problem__item-title {
  margin: 0 0 12px;
  color: var(--color-white);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.c-problem__item-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-muted-light);
}

/* ==========================================================================
   Cause
   ========================================================================== */
.c-cause__flow {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
}

.c-cause__step {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.c-cause__step-icon {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-cause__step-icon--badge {
  position: relative;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-cause__step-badge {
  position: absolute;
  right: -14px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-cause__step-badge--alt {
  right: -16px;
  bottom: 6px;
}

.c-cause__step-num {
  margin: 14px 0 6px;
  color: var(--color-blue);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.c-cause__step-title {
  margin: 0 0 8px;
  color: var(--color-ink);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.c-cause__step-desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-body);
  letter-spacing: 0.02em;
}

.c-cause__connector {
  height: 44px;
  border-left: 1.5px dashed var(--color-muted);
  margin: 10px 0;
}

.c-cause__status {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.5px dashed var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-cause__status--ok {
  border-style: solid;
  border-color: var(--color-green);
}

.c-cause__arrow {
  flex: 0 1 70px;
  min-width: 32px;
  height: 92px;
  display: flex;
  align-items: center;
  transition: opacity 0.45s ease, filter 0.45s ease;
}

/* 順番フォーカス（01→04） */
.c-cause__flow.is-spotlight .c-cause__step {
  opacity: 0.38;
  transform: scale(0.96);
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
  filter: grayscale(0.25);
}

.c-cause__flow.is-spotlight .c-cause__arrow {
  opacity: 0.28;
}

.c-cause__flow.is-spotlight .c-cause__step.is-focused {
  opacity: 1;
  transform: scale(1.04);
  filter: none;
}

.c-cause__flow.is-spotlight .c-cause__arrow.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(3, 110, 183, 0.35));
}

.c-cause__flow.is-spotlight .c-cause__step.is-focused .c-cause__step-num {
  color: var(--color-green);
}

.c-cause__flow.is-spotlight .c-cause__step.is-focused .c-cause__status {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 6px rgba(242, 150, 0, 0.12);
}

.c-cause__flow.is-spotlight .c-cause__step.is-focused .c-cause__status--ok {
  border-color: var(--color-green);
  box-shadow: 0 0 0 6px rgba(0, 169, 125, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .c-cause__flow.is-spotlight .c-cause__step,
  .c-cause__flow.is-spotlight .c-cause__arrow {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ==========================================================================
   CTA bar
   ========================================================================== */
.c-cta-bar {
  background: var(--color-dark-bg);
  padding: clamp(36px, 5vw, 64px) var(--spacing-section-x);
}

.c-cta-bar__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.c-cta-bar__content {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  flex: 1 1 480px;
  min-width: 0;
}

.c-cta-bar__text {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 900;
  line-height: 2;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

/* ==========================================================================
   Sample
   ========================================================================== */
.c-sample__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.c-sample__visual {
  position: relative;
  width: 100%;
  min-height: clamp(380px, 46vw, 560px);
}

.c-sample__card-back {
  position: absolute;
  left: 0;
  top: 4%;
  width: 62%;
  aspect-ratio: 1 / 1.35;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sample-back);
  transform: rotate(-5deg);
  padding: clamp(16px, 2.4vw, 30px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.c-sample__card-rule {
  height: 2px;
  background: var(--color-blue);
  margin-bottom: 14px;
}

.c-sample__card-type {
  margin: 0 0 auto;
  color: var(--color-blue);
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 700;
}

.c-sample__card-title {
  margin: 0 0 12px;
  color: var(--color-ink);
  font-size: clamp(17px, 2vw, 27px);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.c-sample__card-note {
  margin: 0 0 auto;
  color: var(--color-body);
  font-size: clamp(11px, 1.1vw, 14px);
}

.c-sample__card-check {
  align-self: center;
  margin-bottom: 8%;
}

.c-sample__card-front {
  position: absolute;
  right: 0;
  top: 0;
  width: 66%;
  aspect-ratio: 1 / 1.35;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sample-front);
  transform: rotate(2deg);
  overflow: hidden;
  animation: sample-report-glow 4.5s ease-in-out infinite;
}

.c-sample__card-front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0) 58%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 120% 0;
  animation: sample-report-shine 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.c-sample__card-front img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

@keyframes sample-report-glow {
  0%, 100% {
    box-shadow:
      var(--shadow-sample-front),
      0 0 0 0 rgba(3, 110, 183, 0);
  }
  50% {
    box-shadow:
      var(--shadow-sample-front),
      0 0 28px 2px rgba(3, 110, 183, 0.18),
      0 0 12px 0 rgba(0, 169, 125, 0.12);
  }
}

@keyframes sample-report-shine {
  0%, 25% { background-position: 120% 0; }
  55%, 100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .c-sample__card-front {
    animation: none;
  }
  .c-sample__card-front::after {
    animation: none;
    display: none;
  }
}

.c-sample__heading {
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-ink);
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.c-sample__heading--sm {
  margin-bottom: 18px;
}

.c-sample__heading--note {
  margin-bottom: 10px;
  font-size: clamp(17px, 1.6vw, 22px);
}

.c-sample__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.c-sample__list-item {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: 0.04em;
}

.c-sample__divider {
  border: none;
  border-top: 1px dashed var(--color-border-light);
  margin: 28px 0;
}

.c-sample__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.c-sample__tag {
  background: var(--color-bg-green-pale);
  color: var(--color-green-dark);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: var(--radius-md);
}

.c-sample__note {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-body);
}

/* ==========================================================================
   Steps（0: 診断 → 1〜3: 並列の選択肢）
   ========================================================================== */
.c-steps__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vw, 40px);
  padding-top: 24px;
}

.c-steps__start {
  width: 100%;
  display: flex;
  justify-content: center;
}

.c-steps__card--start {
  max-width: 320px;
  width: 100%;
  min-height: 0;
  border: 1.5px solid rgba(0, 169, 125, 0.45);
  box-shadow:
    var(--shadow-2xl),
    0 0 0 4px rgba(0, 169, 125, 0.08);
}

.c-steps__card--start .c-steps__card-text {
  white-space: nowrap;
}

.c-steps__bridge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(100%, 520px);
}

.c-steps__bridge-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 180, 228, 0.55), transparent);
}

.c-steps__bridge-label {
  flex: none;
  color: var(--color-blue-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding: 8px 16px;
  border: 1px solid rgba(111, 180, 228, 0.45);
  border-radius: var(--radius-pill);
  background: rgba(10, 33, 56, 0.35);
}

.c-steps__plans {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
}

.c-steps__or {
  flex: none;
  align-self: center;
  color: var(--color-blue-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0 4px;
  opacity: 0.9;
}

.c-steps__card {
  position: relative;
  flex: 1 1 160px;
  max-width: 220px;
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  padding: 36px 20px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.c-steps__card--plan {
  min-height: 0;
  justify-content: center;
}

.c-steps__num {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-green);
  color: var(--color-green);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.c-steps__card-title {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.c-steps__card-text {
  margin: 0;
  font-size: 14px;
  color: var(--color-body);
  line-height: 1.8;
}

.c-steps__card-scope {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-green);
  letter-spacing: 0.04em;
}

.c-steps__footer {
  margin: clamp(36px, 5vw, 56px) 0 0;
  text-align: center;
  font-size: clamp(14px, 1.3vw, 16px);
  color: var(--color-muted-light);
  font-weight: 500;
  line-height: 1.9;
}

/* ==========================================================================
   Support
   ========================================================================== */
.c-support__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 24px;
}

.c-support__card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-xl);
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.c-support__icon-wrap {
  position: relative;
  flex: none;
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-support__icon-bg {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 50%;
}

.c-support__icon-bg--blue-left {
  left: 0;
  bottom: 6px;
  background: var(--color-bg-blue-circle);
}

.c-support__icon-bg--green-right {
  right: 4px;
  top: 6px;
  background: var(--color-bg-green-circle);
}

.c-support__icon-bg--blue-center {
  left: 4px;
  top: 8px;
  background: var(--color-bg-blue-circle);
}

.c-support__icon-bg--green-top {
  right: 0;
  top: 10px;
  background: var(--color-bg-green-circle);
}

.c-support__icon {
  position: relative;
}

.c-support__body {
  flex: 1 1 240px;
  min-width: 0;
}

.c-support__label {
  margin: 0 0 6px;
  color: var(--color-green);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.c-support__title {
  margin: 0 0 12px;
  color: var(--color-ink);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.c-support__text {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-body);
}

.c-support__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0 0 14px;
}

.c-support__plans-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-muted);
}

.c-support__plans {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.c-support__plan-tag {
  font-size: 13px;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid;
}

.c-support__plan-tag--blue {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.c-support__plan-tag--green {
  border-color: var(--color-green);
  color: var(--color-green);
}

/* ==========================================================================
   Why
   ========================================================================== */
.c-why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.c-why__panel {
  background: linear-gradient(155deg, var(--color-dark-card) 0%, var(--color-dark-bg) 55%, #082C33 100%);
  border-radius: var(--radius-5xl);
  padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 48px);
  box-shadow: var(--shadow-why-card);
}

.c-why__panel-label {
  margin: 0 0 8px;
  color: var(--color-green);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.c-why__panel-rule {
  display: inline-block;
  width: 44px;
  height: 2px;
  background: var(--color-green);
  margin-bottom: 24px;
}

.c-why__panel-title {
  margin: 0 0 20px;
  color: var(--color-white);
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

.c-why__panel-lead {
  margin: 0 0 clamp(32px, 4vw, 48px);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.9;
  color: var(--color-muted-light);
}

.c-why__icons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}

.c-why__icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.c-why__icon-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-white);
}

.c-why__diagram-wrap {
  max-width: 420px;
  margin: 0 auto;
}

.c-why__diagram {
  width: 100%;
  height: 34px;
}

.c-why__badge-wrap {
  text-align: center;
}

.c-why__badge {
  display: inline-block;
  border: 1.5px solid var(--color-green);
  color: var(--color-white);
  background: rgba(0, 169, 125, 0.18);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 8px 26px;
  border-radius: var(--radius-pill);
}

.c-why__reason {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
}

.c-why__reason-rail {
  flex: none;
  width: clamp(56px, 5vw, 76px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-why__reason-num {
  font-size: clamp(40px, 4vw, 54px);
  font-weight: 700;
  line-height: 1;
  color: #C9DAD4;
}

.c-why__reason-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--color-green);
  margin-top: 12px;
}

.c-why__reason-line {
  flex: 1;
  width: 1.5px;
  background: var(--color-green);
  margin-top: 4px;
}

.c-why__reason-body {
  flex: 1;
  min-width: 0;
  padding-bottom: 8px;
}

.c-why__reason-body--last {
  padding-bottom: 0;
}

.c-why__reason-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.c-why__reason-icon-wrap {
  flex: none;
  width: 92px;
  display: flex;
  justify-content: center;
}

.c-why__reason-text {
  flex: 1 1 220px;
  min-width: 0;
}

.c-why__reason-title {
  margin: 0 0 10px;
  color: var(--color-ink);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.c-why__reason-desc {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-body);
}

.c-why__reason-highlight {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-green);
}

.c-why__reason-divider {
  border: none;
  border-top: 1px solid var(--color-border-divider);
  margin: 28px 0;
}

/* ==========================================================================
   Plan
   ========================================================================== */
.c-plan__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.c-plan__card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  padding: 32px 28px;
  background: var(--color-white);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
}

.c-plan__card--featured {
  border: 2px solid var(--color-green);
  position: relative;
  box-shadow: var(--shadow-plan-featured);
}

.c-plan__badge {
  position: absolute;
  top: -14px;
  left: 24px;
  background: var(--color-green);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
}

.c-plan__name {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.c-plan__name--starter { color: var(--color-blue); }
.c-plan__name--standard { color: var(--color-green); }
.c-plan__name--premium { color: var(--color-orange); }

.c-plan__desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.7;
  min-height: 44px;
}

.c-plan__price {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 900;
  color: var(--color-ink);
}

.c-plan__price-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
}

.c-plan__features {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  flex: 1;
}

.c-plan__feature {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--color-border-plan);
}

.c-plan__feature-label {
  color: var(--color-muted);
}

.c-plan__feature-value {
  color: var(--color-ink);
  font-weight: 700;
}

.c-plan__feature-value--green {
  color: var(--color-green);
  font-weight: 700;
}

.c-plan__feature-value--muted {
  color: var(--color-muted-pale);
}

.c-plan__note {
  margin: 24px 0 0;
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.9;
}

.c-plan__cta {
  text-align: center;
  margin-top: 40px;
}

.c-plan__cta-text {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--color-muted);
}

/* ==========================================================================
   Flow
   ========================================================================== */
.c-flow__layout {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
}

.c-flow__panel {
  flex: 3 1 460px;
  min-width: 0;
  background: var(--color-bg-green-soft);
  border-radius: var(--radius-4xl);
  padding: clamp(20px, 2.4vw, 32px);
}

.c-flow__panel--blue {
  flex: 1.2 1 210px;
  background: var(--color-bg-blue-soft);
}

.c-flow__panel-head {
  text-align: center;
  margin-bottom: 24px;
}

.c-flow__panel-title {
  margin: 0 0 12px;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 900;
  letter-spacing: 0.1em;
}

.c-flow__panel-title--green { color: var(--color-green); }
.c-flow__panel-title--blue { color: var(--color-blue); }

.c-flow__panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 700;
}

.c-flow__panel-badge--green {
  border: 1px solid #C4E0D4;
  color: var(--color-green-dark);
}

.c-flow__panel-badge--blue {
  border: 1px solid #C3D7EC;
  color: var(--color-blue);
}

.c-flow__steps-wrap {
  position: relative;
}

.c-flow__steps-line {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 22px;
  height: 2px;
  background: var(--color-green);
}

.c-flow__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.c-flow__step-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.c-flow__step-num {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -22px;
  flex: none;
}

.c-flow__step-num--blue {
  background: var(--color-blue);
}

.c-flow__step-card {
  background: var(--color-white);
  border: 1px solid #DCEBE2;
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-lg);
  padding: 38px 20px 24px;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 2.8em 64px 2.4em;
  justify-items: center;
  align-items: start;
  text-align: center;
  row-gap: 12px;
  flex: 1;
}

.c-flow__step-card--blue {
  border-color: #CCDCEE;
}

.c-flow__step-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.c-flow__step-label--green { color: var(--color-green); }
.c-flow__step-label--blue { color: var(--color-blue); }

.c-flow__step-title {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.c-flow__step-card > svg {
  width: 64px;
  height: 64px;
  display: block;
  flex: none;
}

.c-flow__step-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-body);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.c-flow__bridge {
  flex: none;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.c-flow__bridge-label {
  font-size: 12px;
  font-weight: 700;
}

.c-flow__bridge-label--green { color: var(--color-green); }
.c-flow__bridge-label--blue { color: var(--color-blue); }

.c-flow__bridge-line {
  height: 60px;
  border-left: 1.5px dashed #9FB8C6;
}

.c-flow__bridge-dots {
  width: 100%;
  border-top: 2px dotted var(--color-blue);
}

.c-flow__optional-step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.c-faq__list {
  display: grid;
  gap: 12px;
}

.c-faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}

.c-faq__q {
  cursor: pointer;
  padding: 20px 22px;
  font-weight: 700;
  color: var(--color-ink);
  font-size: 15px;
  letter-spacing: 0.02em;
}

.c-q:hover,
.c-faq__q:hover {
  color: var(--color-blue);
}

.c-faq__a {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-body);
}

/* ==========================================================================
   Form
   ========================================================================== */
.c-form {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: clamp(24px, 4vw, 40px);
  display: grid;
  gap: 20px;
}

.c-form__field {}

.c-form__label {
  display: block;
  font-weight: 700;
  color: var(--color-ink);
  font-size: 14px;
  margin-bottom: 6px;
}

.c-form__label--checkbox {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  color: var(--color-ink);
  cursor: pointer;
}

.c-form__req {
  color: var(--color-error);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  margin-left: 6px;
}

.c-form__label--checkbox .c-form__req {
  margin-left: 4px;
}

.c-form__opt {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  margin-left: 6px;
}

.c-form__hint {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 400;
  margin-left: 8px;
}

.c-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-md);
  font-size: 16px;
  color: var(--color-ink);
}

.c-input--textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.7;
  font-family: inherit;
}

.c-input--file {
  padding: 10px 14px;
  background: var(--color-white);
}

.c-input:focus {
  border-color: var(--color-blue);
  outline: 2px solid rgba(3, 110, 183, 0.25);
}

.c-form__checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--color-blue);
  flex: none;
  transform: translateY(3px);
}

.c-form__error {
  color: var(--color-error);
  font-size: 13px;
  margin-top: 4px;
}

.c-form__note {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.8;
}

.c-form__thanks {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
}

.c-form__thanks-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-bg-thanks);
  color: var(--color-green);
  font-size: 26px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.c-form__thanks-title {
  margin: 0 0 12px;
  color: var(--color-ink);
  font-size: 20px;
  font-weight: 700;
}

.c-form__thanks-text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.9;
}

.c-form__thanks-note {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
}

.c-form__head {
  text-align: center;
  margin-bottom: 36px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.c-footer {
  background: var(--color-dark-bg-deep);
  padding: 40px 24px;
}

.c-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.c-footer__logo {
  height: 20px;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.c-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.c-flink {
  color: var(--color-bg-footer-link);
  font-size: 13px;
  text-decoration: none;
}

.c-flink:hover {
  color: var(--color-white);
}

.c-footer__copy {
  margin: 0;
  color: var(--color-bg-footer-copy);
  font-size: 12px;
}

/* ==========================================================================
   Fixed CTA
   ========================================================================== */
#fixed-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--color-border-header);
  box-shadow: var(--shadow-fixed-cta);
}

#fixed-cta.is-visible {
  display: block;
}

/* ==========================================================================
   Mobile / SP（末尾に置き、PCルールを上書きする）
   ========================================================================== */
@media (max-width: 820px) {
  :root {
    --spacing-section-x: 16px;
    --spacing-section-y: clamp(48px, 12vw, 80px);
  }

  html {
    overflow-x: clip;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .c-section__title--form {
    font-size: clamp(17px, 4.4vw, 19px);
  }

  /* Header */
  .c-header__inner {
    padding: 10px 16px;
    gap: 12px;
  }

  .c-header__logo img {
    height: 18px;
  }

  .c-btn--header {
    font-size: 13px;
    padding: 8px 14px;
  }

  /* Problem */
  .c-problem__grid {
    gap: 0;
  }

  .c-problem__item {
    padding: 24px 8px;
  }

  .c-problem__item + .c-problem__item {
    border-left: none;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
  }

  .c-problem__icon-wrap {
    height: 96px;
    margin-bottom: 20px;
  }

  /* Cause */
  .c-cause__flow {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }

  .c-cause__arrow {
    display: none;
  }

  .c-cause__step {
    flex: none;
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 44px;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    text-align: left;
    padding: 16px 0;
  }

  .c-cause__step + .c-cause__step {
    border-top: 1px dashed var(--color-border-light);
  }

  .c-cause__step-icon,
  .c-cause__step-icon--badge {
    grid-column: 1;
    grid-row: 1 / 4;
    height: 56px;
    align-self: center;
    justify-self: center;
  }

  .c-cause__step-icon svg,
  .c-cause__step-icon--badge > svg {
    width: 48px;
    height: 48px;
  }

  .c-cause__step-badge {
    width: 22px;
    height: 22px;
    right: -6px;
    bottom: 2px;
  }

  .c-cause__step-badge svg {
    width: 20px;
    height: 20px;
  }

  .c-cause__step-num {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.06em;
    align-self: end;
    line-height: 1.2;
  }

  .c-cause__step-title {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 17px;
    letter-spacing: 0.04em;
    align-self: center;
    line-height: 1.3;
  }

  .c-cause__step-desc {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    align-self: start;
  }

  .c-cause__connector {
    display: none;
  }

  .c-cause__status {
    grid-column: 3;
    grid-row: 1 / 4;
    width: 44px;
    height: 44px;
    justify-self: end;
    align-self: center;
  }

  .c-cause__status svg {
    width: 22px;
    height: 22px;
  }

  /* CTA bar */
  .c-cta-bar__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 20px;
  }

  .c-cta-bar__content {
    flex: none;
    flex-direction: column;
    align-items: center;
  }

  .c-cta-bar__text {
    font-size: 16px;
    line-height: 1.8;
  }

  .c-btn--cta-bar {
    width: 100%;
    max-width: none;
    flex: none;
    white-space: normal;
    font-size: 15px;
    padding: 16px 20px;
  }

  /* Sample */
  .c-sample__grid {
    gap: 28px;
  }

  .c-sample__visual {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    aspect-ratio: 1 / 1.08;
    min-height: 0;
  }

  .c-sample__card-back {
    width: 58%;
    padding: 14px;
  }

  .c-sample__card-front {
    width: 64%;
  }

  .c-sample__card-title {
    font-size: 15px;
  }

  /* Steps */
  .c-steps__layout {
    gap: 24px;
    padding-top: 12px;
  }

  .c-steps__card--start {
    max-width: min(320px, 100%);
    padding: 32px 16px 20px;
  }

  .c-steps__card--start .c-steps__card-text {
    white-space: nowrap;
    font-size: 13px;
  }

  .c-steps__bridge {
    width: 100%;
    gap: 10px;
  }

  .c-steps__bridge-label {
    font-size: 12px;
    padding: 7px 12px;
    white-space: normal;
    text-align: center;
  }

  .c-steps__plans {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .c-steps__card--plan {
    flex: none;
    width: 100%;
    max-width: 320px;
  }

  .c-steps__footer {
    padding: 0 4px;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* Support */
  .c-support__card {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px;
  }

  .c-support__icon-wrap {
    width: 96px;
    height: 96px;
  }

  /* Why */
  .c-why__panel {
    padding: 28px 20px;
  }

  .c-why__icons {
    gap: 12px;
  }

  /* Plan */
  .c-plan__grid {
    gap: 28px;
  }

  .c-plan__card {
    padding: 28px 20px;
  }

  .c-plan__desc {
    min-height: 0;
  }

  .c-btn--plan {
    width: 100%;
    white-space: normal;
  }

  /* Flow */
  .c-flow__layout {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .c-flow__panel,
  .c-flow__panel--blue {
    flex: none;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }

  .c-flow__steps-line {
    display: none;
  }

  .c-flow__steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .c-flow__step-card {
    width: 100%;
  }

  /* FAQ */
  .c-faq__q {
    font-size: 15px;
    padding: 16px 18px;
  }

  .c-faq__a {
    font-size: 14px;
    padding: 0 18px 16px;
  }

  /* Form */
  .c-form {
    padding: 20px 16px;
    gap: 18px;
  }

  .c-btn--submit {
    width: 100%;
    white-space: normal;
  }

  .c-form__thanks-title {
    font-size: 20px;
  }

  /* Footer */
  .c-footer {
    padding: 32px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .c-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .c-footer__nav {
    gap: 14px 18px;
  }
}

/* KV：1000px未満はコンパクト化（1000px以上は最大幅時と同一サイズ） */
@media (max-width: 999px) {
  .c-section--hero {
    padding: clamp(116px, 13vw, 148px) var(--spacing-section-x) clamp(64px, 8vw, 96px);
  }

  .c-hero__grid {
    gap: 16px 20px;
  }

  .c-hero__grid > div:first-child {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .c-hero__visual {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-bottom: 0;
    align-self: center;
  }

  .c-hero__diagram {
    width: 100%;
    max-width: min(100%, 380px);
    margin: 0 auto;
  }

  .c-hero__trust {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    gap: 10px 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    justify-self: start;
    align-self: center;
  }

  .c-hero__trust-item {
    padding: 0;
    font-size: 12px;
    gap: 8px;
  }

  .c-hero__trust-item + .c-hero__trust-item {
    border-left: none;
  }

  .c-hero__trust-icon {
    width: 32px;
    height: 32px;
  }

  .c-hero__title {
    font-size: clamp(22px, 3.2vw, 32px);
  }

  .c-hero__lead {
    font-size: clamp(15px, 2vw, 17px);
  }

  .c-btn--hero {
    font-size: 17px;
  }

  .c-hero__title-nowrap {
    white-space: nowrap;
  }
}

/* KV：700px未満はコピー・図を縦積み */
@media (max-width: 699px) {
  .c-hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .c-hero__grid > div:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .c-hero__visual {
    grid-column: 1;
    grid-row: 2;
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }

  .c-hero__diagram {
    max-width: none;
  }

  .c-hero__trust {
    grid-column: 1;
    grid-row: 3;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 8px 0;
  }

  .c-hero__trust-item {
    padding: 4px 12px;
  }

  .c-hero__trust-item + .c-hero__trust-item {
    border-left: 1px solid var(--color-border-light);
  }

  .c-hero__title-nowrap {
    white-space: normal;
  }
}

/* KV スマホ：余白・タイポ調整 */
@media (max-width: 680px) {
  .c-section--hero {
    padding-top: 96px;
    padding-bottom: 56px;
  }

  .c-hero__badge {
    margin-bottom: 16px;
    font-size: 12px;
    padding: 8px 14px;
  }

  .c-hero__title {
    font-size: clamp(22px, 6.2vw, 28px);
    margin-bottom: 18px;
  }

  .c-hero__lead {
    font-size: 15px;
    line-height: 1.8;
  }

  .c-hero__lead--last {
    margin-bottom: 24px;
  }

  .c-hero__actions {
    margin-bottom: 0;
  }

  .c-hero__actions .c-btn,
  .c-btn--hero {
    width: 100%;
    white-space: normal;
    font-size: 16px;
    padding: 16px 20px;
    text-align: center;
  }

  .c-hero__node--top,
  .c-hero__node--bottom {
    width: 110px;
  }

  .c-hero__node-label {
    font-size: 11px;
  }

  .c-hero__card {
    width: clamp(116px, 34cqi, 148px);
    padding: 12px 10px;
  }

  .c-hero__trust-item + .c-hero__trust-item {
    border-left: none;
  }

  .c-hero__trust {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .c-hero__node--left,
  .c-hero__node--right {
    width: 72px;
  }

  .c-hero__node-icon {
    width: 52px;
    height: 52px;
  }

  .c-hero__node-label-sub {
    display: none;
  }

  .c-section__label {
    letter-spacing: 0.16em;
  }
}