/* =====================================================================
   Base / reset — minimal, token-driven.
   ===================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  letter-spacing: 0.04em; /* looser horizontal spacing to match design A */
  color: var(--color-text);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* guard against accidental horizontal scroll */
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

img, picture, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; cursor: pointer; }

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

/* Visible focus for keyboard users; not removed. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* SP幅（768px以下）でのみ改行させたい <br> に付けるユーティリティ。
   PC・タブレットでは display:none で改行自体を無効化する。
   768pxはLP（layout.css）のSPブレークポイントに合わせている。 */
.u-sp-br { display: none; }
@media (max-width: 768px) {
  .u-sp-br { display: inline; }
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  background: var(--color-navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 16px; text-decoration: none; }

/* Scroll reveal — the .reveal class is added by JS, so no-JS keeps
   everything visible. Elements fade + rise into place when scrolled in. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Left→right "wipe" reveal for section titles + the "このプランにする"
   underline. A soft, wide-feathered mask sweeps across the text — never a
   hard clip-path crop — so the visible/hidden boundary is always a gradual
   veil, not a line. Neutral (fully shown, no animation) outside SP — the
   ≤768px media query in layout.css supplies the actual hidden/animated
   state, so tablet and desktop are unaffected. Deliberately standalone
   (see main.js initWipeReveal): it is never combined with a separate
   parent opacity/translateY fade, which would otherwise compress the
   visible sweep into a shorter, harder-feeling window. */
.reveal-wipe { mask-image: none; -webkit-mask-image: none; opacity: 1; }
@keyframes o2pet-text-wipe {
  0%   { mask-position: 220% 0; -webkit-mask-position: 220% 0; opacity: 0.15; }
  100% { mask-position: 0% 0; -webkit-mask-position: 0% 0; opacity: 1; }
}
.underline-wipe { position: relative; border-bottom: 0 !important; padding-bottom: 4px; }
.underline-wipe::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .reveal-wipe { mask-image: none !important; -webkit-mask-image: none !important; animation: none !important; opacity: 1 !important; }
  .underline-wipe::after { transform: scaleX(1) !important; }
}