/* =====================================================
   I'm Hopping — Components (v3 / Refined)
   Header / Buttons / Cards / Footer / Pills / Process / etc.
   ===================================================== */

/* =========================
 * Header
 * ========================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  /* 半透明（白50%）＋ 後方ボカシ（20px）。背後を通る要素がぼけて見える */
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: saturate(200%) blur(20px);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.site-header[data-scrolled="true"] {
  /* スクロール後も同じ透過度・ボカシを継続 */
  background: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
/* backdrop-filter 非対応ブラウザ向けのフォールバック */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(255, 255, 255, 0.95);
  }
  .site-header[data-scrolled="true"] {
    background: var(--color-white);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--header-h);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text);
  line-height: 1;
}
.site-header__logo img {
  height: 30px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .site-header__logo img { height: 34px; }
}
.site-header__logo span {
  font-family: var(--font-en-serif);
  font-weight: var(--fw-bold);
  font-size: 22px;
  color: var(--color-text);
}

/* Nav (PC) */
.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav { display: block; }
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.site-nav__list a {
  position: relative;
  font-family: var(--font-en-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  padding: 14px 8px;   /* タップ領域確保（縦≈44px） */
  letter-spacing: 0.02em;
  text-decoration: none;
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--color-btn-primary);
  border-radius: 1px;
  transition: right var(--dur-1) var(--ease);
}
.site-nav__list a.is-current::after { right: 0; }
@media (hover: hover) {
  .site-nav__list a:hover::after { right: 0; }
  .site-nav__list a:hover { opacity: 1; }
}

/* Hamburger — simple 3-line icon, no border/box */
.site-header__hamburger {
  display: inline-flex;
  width: 44px;       /* WCAG 2.5.5 タップ領域 44px 確保 */
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  color: var(--color-text);
  background: transparent;
  border: 0;
  padding: 0;
}
@media (min-width: 1024px) {
  .site-header__hamburger { display: none; }
}
.site-header__hamburger span,
.site-header__hamburger span::before,
.site-header__hamburger span::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 0;
  position: relative;
  transition: transform var(--dur-1) var(--ease);
}
.site-header__hamburger span::before,
.site-header__hamburger span::after {
  content: "";
  position: absolute;
  left: 0;
}
.site-header__hamburger span::before { top: -8px; }
.site-header__hamburger span::after  { top:  8px; }

body[data-drawer="open"] .site-header__hamburger span {
  background: transparent;
}
body[data-drawer="open"] .site-header__hamburger span::before {
  top: 0; transform: rotate(45deg);
}
body[data-drawer="open"] .site-header__hamburger span::after {
  top: 0; transform: rotate(-45deg);
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: var(--z-drawer);
  background: var(--color-white);
  padding: var(--space-lg) var(--container-pad) var(--space-xl);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              visibility var(--dur-2) var(--ease);
}
body[data-drawer="open"] .mobile-drawer {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-drawer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
.mobile-drawer__list a {
  display: block;
  padding: var(--space-sm) 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
@media (hover: hover) {
  .mobile-drawer__list a:hover {   opacity: 0.7; }
}
.mobile-drawer__footnote {
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  margin-top: var(--space-lg);
}

/* =========================
 * Buttons — pill, blue, シンプル
 * ========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 36px;
  border-radius: var(--radius-pill);
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.btn:focus-visible {
  outline: 2px solid var(--color-btn-primary);
  outline-offset: 3px;
}

.btn .btn__arrow {
  display: inline-block;
  font-family: var(--font-en-sans);
  transition: transform 0.3s var(--ease);
}
@media (hover: hover) {
  .btn:hover .btn__arrow {   transform: translateX(4px); }
}

/* Primary — vivid green sweeps in from left on hover */
.btn--primary {
  background: var(--color-btn-primary);
  color: var(--color-white);
  border-color: var(--color-btn-primary);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease, border-color 0.4s ease;
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--color-green-accent) 0%,
    var(--color-green) 100%);
  transform: translateX(-101%);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
  pointer-events: none;
}
@media (hover: hover) {
  .btn--primary:hover {
    color: var(--color-black);
    border-color: var(--color-green);
    background: var(--color-btn-primary);
    opacity: 1;}
}
@media (hover: hover) {
  .btn--primary:hover::before {
    transform: translateX(0);}
}

/* Secondary */
.btn--secondary {
  background: var(--color-white);
  color: var(--color-btn-primary);
  border-color: var(--color-btn-primary);
}
@media (hover: hover) {
  .btn--secondary:hover {
    background: var(--color-btn-primary);
    color: var(--color-white);
    opacity: 1;}
}

/* Legacy mapping — accent / ghost / outline-light / download → primary or secondary */
.btn--accent {
  background: var(--color-btn-primary);
  color: var(--color-white);
  border-color: var(--color-btn-primary);
}
@media (hover: hover) {
  .btn--accent:hover {
    background: var(--color-btn-primary-hover);
    border-color: var(--color-btn-primary-hover);
    color: var(--color-white);
    opacity: 1;}
}

.btn--ghost {
  background: transparent;
  color: var(--color-btn-primary);
  border-color: var(--color-btn-primary);
}
@media (hover: hover) {
  .btn--ghost:hover {
    background: var(--color-btn-primary);
    color: var(--color-white);
    border-color: var(--color-btn-primary);
    opacity: 1;}
}

.btn--download {
  background: var(--color-white);
  color: var(--color-btn-primary);
  border-color: var(--color-white);
}
@media (hover: hover) {
  .btn--download:hover {
    background: var(--color-btn-primary);
    color: var(--color-white);
    border-color: var(--color-white);
    opacity: 1;}
}

.btn--outline-light {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.6);
}
@media (hover: hover) {
  .btn--outline-light:hover {
    background: var(--color-white);
    color: var(--color-btn-primary);
    border-color: var(--color-white);
    opacity: 1;}
}

/* On dark backgrounds — invert primary so contrast holds */
.on-dark .btn--primary,
.on-black .btn--primary {
  background: var(--color-white);
  color: var(--color-btn-primary);
  border-color: var(--color-white);
}
@media (hover: hover) {
  .on-dark .btn--primary:hover,
.on-black .btn--primary:hover {
    background: var(--color-green-accent);
    color: var(--color-black);
    border-color: var(--color-green-accent);}
}
.on-dark .btn--secondary,
.on-black .btn--secondary {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
@media (hover: hover) {
  .on-dark .btn--secondary:hover,
.on-black .btn--secondary:hover {
    background: var(--color-white);
    color: var(--color-btn-primary);
    border-color: var(--color-white);}
}

/* On green backgrounds — primary stays blue (contrast on green is fine) */
.on-green .btn--primary,
.section--green .btn--primary {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
@media (hover: hover) {
  .on-green .btn--primary:hover,
.section--green .btn--primary:hover {
    background: var(--color-btn-primary);
    color: var(--color-white);
    border-color: var(--color-btn-primary);}
}

/* Text-link button (kept simple) */
.btn--text {
  background: transparent;
  color: var(--color-btn-primary);
  padding: 6px 0;
  border-radius: 0;
  border: 0;
  font-weight: var(--fw-medium);
}
@media (hover: hover) {
  .btn--text:hover {
    opacity: 0.7;
    color: var(--color-btn-primary);}
}
.on-dark .btn--text,
.on-black .btn--text { color: var(--color-green-accent); }

.btn--lg {
  font-size: var(--fs-body);
  padding: 18px 40px;
}
.btn--sm {
  font-size: var(--fs-small);
  padding: 12px 22px;   /* タップ領域 44px 確保（高さ ≈ 44px） */
}
.btn--block { width: 100%; }

/* Removed "hop" idle animation */
.btn--hop { animation: none; }

/* Button group helper */
.btn-group {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}

/* =========================
 * Cards — minimal, no shadow / no thick border
 * ========================= */
.card {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: opacity 0.2s ease;
}
@media (hover: hover) {
  .card:hover {   opacity: 1; }
}

.card--soft {
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

/* Issue card */
.card--issue {
  background: transparent;
  border: 0;
  padding: 0;
}
.card--issue .card__num {
  display: inline-block;
  font-family: var(--font-en-serif);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin-bottom: var(--space-sm);
}
.card--issue h3 {
  font-size: var(--fs-h3);
  line-height: 1.45;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
  font-weight: var(--fw-bold);
}
.card--issue p {
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}
.card--issue .card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-small);
  color: var(--color-btn-primary);
  margin-top: var(--space-xs);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* Service card */
.card--service,
.service-flow__card {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  background: transparent;
  border: 0;
  border-radius: var(--radius-lg);
  border-top: 1px solid var(--color-border);
}
.card--service .card__step,
.service-flow__card .card__step {
  display: inline-block;
  font-family: var(--font-en-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-sub);
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin-bottom: var(--space-sm);
  line-height: 1;
}
.card--service h3,
.service-flow__card h3 {
  font-size: var(--fs-h3);
  line-height: 1.45;
  margin-bottom: var(--space-sm);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text);
  font-weight: var(--fw-bold);
}
.card--service .card__price,
.service-flow__card .card__price {
  display: inline-block;
  padding: 4px 12px;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-sm);
  font-family: var(--font-jp);
}

.card--service .card__price-text,
.service-flow__card .card__price-text {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-jp);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-sub);
}
.card--service .card__price-label,
.service-flow__card .card__price-label {
  font-weight: var(--fw-regular);
  margin-right: 2px;
}
.card--service .card__note,
.service-flow__card .card__note {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--color-text-sub);
}
.card--service .card__link,
.service-flow__card .card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  font-weight: var(--fw-medium);
  color: var(--color-btn-primary);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* Service card on dark backgrounds */
.on-blue .card--service,
.on-blue .service-flow__card,
.on-black .card--service,
.on-black .service-flow__card,
.section--black .card--service,
.section--black .service-flow__card {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.16);
  color: var(--color-white);
}
.on-blue .card--service h3,
.on-blue .service-flow__card h3,
.on-black .card--service h3,
.on-black .service-flow__card h3,
.section--black .card--service h3,
.section--black .service-flow__card h3 {
  color: var(--color-green-accent);
}
.on-blue .card--service p,
.on-blue .service-flow__card p,
.on-black .card--service p,
.on-black .service-flow__card p,
.section--black .card--service p,
.section--black .service-flow__card p {
  color: rgba(255,255,255,0.82);
}
.on-blue .card--service .card__step,
.on-blue .service-flow__card .card__step,
.on-black .card--service .card__step,
.on-black .service-flow__card .card__step,
.section--black .card--service .card__step,
.section--black .service-flow__card .card__step {
  color: rgba(255,255,255,0.65);
}
.on-blue .card--service .card__price-text,
.on-blue .service-flow__card .card__price-text,
.on-black .card--service .card__price-text,
.on-black .service-flow__card .card__price-text,
.section--black .card--service .card__price-text,
.section--black .service-flow__card .card__price-text {
  color: rgba(255,255,255,0.7);
}
.on-blue .card--service .card__link,
.on-blue .service-flow__card .card__link,
.on-black .card--service .card__link,
.on-black .service-flow__card .card__link,
.section--black .card--service .card__link,
.section--black .service-flow__card .card__link {
  color: var(--color-green-accent);
}

/* Service actions row */
.service-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* =========================
 * Value card (used on dark / blue sections)
 * ========================= */
.card--value {
  padding: var(--space-md);
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.16);
  border-radius: 0;
  color: var(--color-white);
}
.card--value .card__num {
  display: inline-block;
  font-family: var(--font-en-serif);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  color: var(--color-green-accent);
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin-bottom: var(--space-sm);
}
.card--value h3 {
  color: var(--color-green-accent);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-sm);
}
.card--value p {
  color: rgba(255,255,255,0.82);
  font-size: var(--fs-body);
}

/* =========================
 * Info card (final CTA grid)
 * ========================= */
.card--info {
  background: transparent;
  border: 0;
  padding: 0;
}
.card--info .card__num {
  display: inline-block;
  font-family: var(--font-en-serif);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  color: var(--color-btn-primary);
  background: transparent;
  padding: 0;
  margin-bottom: var(--space-xs);
}
.card--info h4 {
  color: inherit;
  font-size: var(--fs-h3);
  margin-bottom: var(--space-xs);
}
.card--info p {
  color: var(--color-text-sub);
  font-size: var(--fs-small);
}

/* =========================
 * Footer
 * ========================= */
.site-footer {
  background: var(--color-black);
  color: rgba(255,255,255,0.78);
  padding-block: var(--space-xl) var(--space-lg);
}
.site-footer a {
  color: rgba(255,255,255,0.78);
}
@media (hover: hover) {
  .site-footer a:hover {   color: var(--color-green-accent); opacity: 1; }
}

.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-lg);
  }
}

.site-footer__brand .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}
.site-footer__brand .footer-logo img {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}
.site-footer__brand .footer-logo span {
  font-family: var(--font-en-serif);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  color: var(--color-white);
}
.site-footer__brand .footer-tagline {
  font-family: var(--font-en-serif);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--color-green-accent);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}
.site-footer__brand .footer-essence {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.55);
  line-height: var(--lh-base);
}

.footer-col h4 {
  font-family: var(--font-en-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-green-accent);
  margin-bottom: var(--space-sm);
}
.footer-col ul li {
  margin-bottom: var(--space-xs);
}
.footer-col ul li a {
  font-size: var(--fs-small);
}

.site-footer__bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.5);
}
@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
}

/* =========================
 * Breadcrumb
 * ========================= */
.breadcrumb {
  padding-block: var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-text-sub);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.breadcrumb li:not(:last-child)::after {
  content: "/";
  color: var(--color-text-sub);
  font-family: var(--font-en-sans);
}
.breadcrumb a { color: var(--color-text-sub); }
@media (hover: hover) {
  .breadcrumb a:hover {   color: var(--color-text); opacity: 1; }
}
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: var(--fw-medium); }

/* =========================
 * Price badge / pill / tag
 * ========================= */
.price-badge {
  display: inline-block;
  padding: 4px 14px;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  font-family: var(--font-jp);
}
.price-badge--on-dark {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.4);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-en-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  line-height: 1.4;
}
.pill--accent {
  background: var(--color-green-light);
  color: var(--color-text);
  border-color: transparent;
}
.pill--blue {
  background: var(--color-btn-primary);
  color: var(--color-white);
  border-color: transparent;
}
.pill--ghost {
  background: transparent;
  color: var(--color-text);
}
.pill--dark {
  background: var(--color-text);
  color: var(--color-white);
  border-color: transparent;
}
.on-dark .pill,
.on-black .pill,
.on-blue .pill {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.4);
}

/* =========================
 * Quote / Issue list
 * ========================= */
.quote-block {
  padding: var(--space-md);
  background: var(--color-green-light);
  border: 0;
  border-left: 3px solid var(--color-green);
  border-radius: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: 1.7;
  position: relative;
}
.quote-block::before { display: none; }

.quote-block--indigo {
  background: transparent;
  color: var(--color-white);
  border-left-color: var(--color-green-accent);
}

.issue-list {
  padding: var(--space-md);
  background: var(--color-green-light);
  border: 0;
  border-radius: var(--radius-md);
}
.issue-list__title {
  display: block;
  font-family: var(--font-en-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-sub);
  margin-bottom: var(--space-xs);
}
.issue-list ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.issue-list li {
  position: relative;
  padding-left: var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-text);
  line-height: 1.7;
}
.issue-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  background: var(--color-green);
  border-radius: 50%;
}

/* Deliverables */
.deliverables {
  padding: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.deliverables h4 {
  font-family: var(--font-en-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-sub);
  margin-bottom: var(--space-xs);
}
.deliverables ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.deliverables li {
  position: relative;
  padding-left: var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-text);
  line-height: 1.7;
}
.deliverables li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-btn-primary);
  font-weight: var(--fw-bold);
}

/* =========================
 * Process timeline
 * ========================= */
.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  position: relative;
}
@media (min-width: 1024px) {
  .process {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
  }
}
.process::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}
@media (min-width: 1024px) {
  .process::before {
    left: 0; right: 0;
    top: 11px; bottom: auto;
    width: 100%; height: 1px;
  }
}
.process__step {
  position: relative;
  padding-left: var(--space-lg);
}
@media (min-width: 1024px) {
  .process__step {
    padding-left: 0;
    padding-top: var(--space-lg);
  }
}
.process__step::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-btn-primary);
}
@media (min-width: 1024px) {
  .process__step::before {
    left: 0; top: 4px;
  }
}

/* === Process 流れアニメ ===
   PC 表示で、各ドットが右隣のステップ位置までスライド → ふっと消えて元位置に戻る、
   を繰り返す。ステップ間で 0.6 秒ずらすことで、左から右へ流れる視覚を作る。 */
@media (min-width: 1024px) {
  .process__step::before {
    animation: process-dot-slide 3.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    will-change: transform, opacity;
  }
  .process__step:nth-child(1)::before { animation-delay: 0.0s; }
  .process__step:nth-child(2)::before { animation-delay: 0.6s; }
  .process__step:nth-child(3)::before { animation-delay: 1.2s; }
  .process__step:nth-child(4)::before { animation-delay: 1.8s; }
  .process__step:nth-child(5)::before { animation-delay: 2.4s; }
}

@keyframes process-dot-slide {
  /* 0〜70% で隣ステップ位置までスライドし、薄くなる */
  0%   { transform: translateX(0);                       opacity: 1; }
  60%  { transform: translateX(clamp(160px, 18vw, 260px)); opacity: 0.55; }
  72%  { transform: translateX(clamp(160px, 18vw, 260px)); opacity: 0; }
  /* 一瞬で元位置に戻し（不可視）、ふわっと出現 */
  73%  { transform: translateX(0);                       opacity: 0; }
  100% { transform: translateX(0);                       opacity: 1; }
}

/* アニメーションを抑制したいユーザーには止める */
@media (prefers-reduced-motion: reduce) {
  .process__step::before {
    animation: none;
  }
}
.process__num {
  font-family: var(--font-en-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-sub);
  background: transparent;
  padding: 0;
  margin-bottom: var(--space-xs);
  display: inline-block;
  line-height: 1;
}
.process__step h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-xs);
  line-height: 1.4;
  color: var(--color-text);
}
.process__step p {
  font-size: var(--fs-small);
  color: var(--color-text-sub);
}

/* On dark variants */
.on-dark .process::before,
.on-black .process::before,
.on-blue .process::before { background: rgba(255,255,255,0.2); }
.on-dark .process__step h3,
.on-black .process__step h3 { color: var(--color-green-accent); }
.on-dark .process__step p,
.on-black .process__step p { color: rgba(255,255,255,0.78); }

/* =========================
 * Accordion
 * ========================= */
.accordion {
  border-top: 1px solid var(--color-border);
}
.accordion details {
  border-bottom: 1px solid var(--color-border);
}
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-md) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-family: var(--font-jp);
  line-height: 1.5;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-btn-primary);
  border: 1px solid var(--color-btn-primary);
  border-radius: 50%;
  font-family: var(--font-en-sans);
  font-weight: var(--fw-medium);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--dur-1) var(--ease);
}
.accordion details[open] summary::after {
  content: "−";
  background: var(--color-btn-primary);
  color: var(--color-white);
}
.accordion__content {
  padding: 0 0 var(--space-md);
  color: var(--color-text);
  font-size: var(--fs-body);
  max-width: 56em;
}

/* =========================
 * dl
 * ========================= */
.def-list {
  border-top: 1px solid var(--color-border);
}
.def-list div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .def-list div {
    grid-template-columns: 180px 1fr;
    gap: var(--space-md);
  }
}
.def-list dt {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-sub);
  letter-spacing: 0.02em;
}
.def-list dd {
  font-size: var(--fs-body);
  color: var(--color-text);
  margin: 0;
}
.def-list__note {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--fs-small);
  color: var(--color-text-sub);
}

/* =========================
 * CTA Banner
 * ========================= */
.cta-banner {
  background: var(--color-green);
  color: var(--color-black);
  padding-block: var(--space-xl);
}

/* =========================
 * Anchor menu
 * ========================= */
.anchor-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.anchor-menu a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  background: var(--color-white);
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
@media (hover: hover) {
  .anchor-menu a:hover {
    background: var(--color-btn-primary);
    color: var(--color-white);
    border-color: var(--color-btn-primary);
    opacity: 1;}
}
.anchor-menu a::before {
  content: "→";
  font-family: var(--font-en-sans);
  color: currentColor;
}

/* =========================
 * Form
 * ========================= */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.form-field label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.form-field input,
.form-field textarea,
.form-field select {
  font-family: inherit;
  font-size: var(--fs-body);
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  transition: border-color var(--dur-1) var(--ease);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 0;
  border-color: var(--color-btn-primary);
  box-shadow: 0 0 0 3px rgba(30, 79, 216, 0.15);
}

/* =========================
 * Logo grid (works)
 * ========================= */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 768px) {
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .logo-grid { grid-template-columns: repeat(6, 1fr); }
}
.logo-grid__cell {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
  font-family: var(--font-en-sans);
  font-weight: var(--fw-medium);
  color: var(--color-text-sub);
  text-align: center;
  padding: var(--space-sm);
  font-size: var(--fs-small);
  transition: background-color var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .logo-grid__cell:hover {
    background: var(--color-green-light);
    color: var(--color-text);}
}
@media (min-width: 1024px) {
  .logo-grid__cell:nth-child(6n) { border-right: 0; }
}
@media (max-width: 1023px) {
  .logo-grid__cell:nth-child(3n) { border-right: 0; }
}
@media (max-width: 767px) {
  .logo-grid__cell:nth-child(2n) { border-right: 0; }
  .logo-grid__cell:nth-child(3n) { border-right: 1px solid var(--color-border); }
}

/* =========================
 * Hoppy mascot helpers
 * ========================= */
.hoppy {
  width: 100%;
  height: auto;
  display: block;
}
.hoppy--xs { max-width: 40px; }
.hoppy--sm { max-width: 64px; }
.hoppy--md { max-width: 100px; }
.hoppy--lg { max-width: 180px; }
.hoppy--xl { max-width: 280px; }
.hoppy--bounce { animation: none; }