/* Clear water, white reading surfaces, and the existing navy/gold identity. */
:root {
  --navy: #0b2c46;
  --navy-2: #174a6b;
  --ink: #17374d;
  --muted: #50697b;
  --line: #d4e6ee;
  --aqua: #38a8c3;
  --aqua-dark: #086e90;
  --paper: #f1f8fc;
  --shadow: 0 20px 60px rgba(26, 91, 125, .10);
  --water-image: url("./water-surface.webp");
}

/* Keep long labels and the cancellation table usable on narrow screens. */
.contact-grid > *, .pricing-wrap > * { min-width: 0; }
.contact-button { padding-top: 12px; padding-bottom: 12px; }
.contact-button small { font-size: .875rem; line-height: 1.6; }
.cancellation-scroll { overflow-x: auto; }
.cancellation-scroll .cancellation-table { min-width: 440px; }
@media (max-width: 520px) {
  .cancellation-scroll::before { content: "表は左右にスクロールできます"; display: block; margin-bottom: 10px; font-size: .875rem; color: var(--muted); }
}

@media (max-width:760px) { html { scroll-padding-bottom:calc(110px + env(safe-area-inset-bottom)); } }

body { background: #fff; }
.site-header { border-color: var(--line); background: rgba(255,255,255,.96); }
.nav .nav-cta { background: var(--navy); }
.nav .nav-cta:hover { background: var(--aqua-dark); }

.hero { color: var(--navy); background: #e9f7fc; }
.hero::before {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: linear-gradient(90deg, rgba(248,253,255,.97) 0%, rgba(248,253,255,.93) 30%, rgba(242,251,255,.66) 55%, rgba(224,246,254,.12) 100%), var(--water-image);
  background-size: cover;
  background-position: center, center right;
  pointer-events: none;
}
.hero::after {
  inset: auto 0 0;
  width: auto;
  height: 110px;
  border-radius: 0;
  background: linear-gradient(0deg, #fff, rgba(255,255,255,0));
  filter: none;
  pointer-events: none;
}
.hero .eyebrow { color: #806022; }
.hero h1 { color: var(--navy); }
.hero h1 em { color: #0d708f; }
.hero .product-label { color: #315b74; }
.hero-lead { color: #405f75; }
.hero-note { color: #4a6679; }
.hero-note::before { background: #2999b9; box-shadow: 0 0 0 5px rgba(41,153,185,.10); }
.hero .button--ghost { color: var(--navy); border-color: #91bacd; background: rgba(255,255,255,.93); }
.hero .button--ghost:hover { color: var(--navy); background: #fff; border-color: var(--aqua-dark); }
.hero-device { border: 1px solid rgba(255,255,255,.95); box-shadow: 0 28px 65px rgba(14,76,110,.17); transform: rotate(1deg); }
.hero-card { border: 1px solid #d3e8f0; background: rgba(255,255,255,.96); color: var(--navy); box-shadow: 0 14px 36px rgba(24,92,123,.12); }
.hero-card span { color: #806022; }
.hero-card small { color: #50697b; }
.trust-strip { background: #fff; border-color: var(--line); }

.section--paper { background: linear-gradient(155deg, #f5fbfe 0%, #edf7fc 60%, #f8fcfe 100%); }
#fresca { background: linear-gradient(180deg, #fff 0%, #fff 72%, #f5fbfe 100%); }
.image-frame { background: #fff; border: 1px solid var(--line); }
.info-callout { background: #edf8fc; border-left-color: var(--gold); }
.effects-section {
  background-color: #eaf6fb;
  background-image: linear-gradient(120deg, rgba(241,250,254,.97), rgba(232,247,253,.88)), var(--water-image);
  background-size: cover;
  background-position: center;
}
.effect-card, .benefit-card, .price-card, .terms-panel, .social-card, .installation-card { background: #fff; border-color: var(--line); }
.effect-card { box-shadow: 0 10px 28px rgba(36,107,141,.04); }
.price-card--featured { border-color: #4dabc9; box-shadow: 0 14px 38px rgba(27,117,151,.10); }
.price-badge { color: #075f7d; background: #e5f5fb; }
.price-card--featured .price-badge { background: #dcf1fa; }
.price-card .price { margin-bottom: 8px; }
.price-card .price-tax-total { margin: 0 0 22px; color: var(--navy); font-size: 1rem; font-weight: 700; line-height: 1.6; }
.button--outline { color: var(--aqua-dark); border-color: #a7cbdc; }
.button--outline:hover { background: #eef8fc; }
.cancellation-table thead { background: #eaf6fc; }
.installation-section { background: linear-gradient(180deg, #fff 0%, #f5fbfe 100%); }
.installation-photo { background: #edf6fa; }
.installation-contact { background: #e8f6fc; border: 1px solid #d6eaf3; }
#flow { background: #fff; }
.support-panel { background: #f2f9fd; }
.salon-guide { color: var(--navy); border: 1px solid #d1e5f0; background: linear-gradient(140deg, #fff 20%, #e5f4fc 100%); box-shadow: var(--shadow); }
.salon-guide .eyebrow { color: #806022; }
.salon-guide p, .salon-guide ul { color: #446579; }
.social-card { box-shadow: 0 12px 36px rgba(33,92,123,.05); }
#faq { background: #fff; }
.contact {
  background-color: #e5f4fc;
  background-image: linear-gradient(105deg, rgba(245,251,254,.97), rgba(232,247,254,.85)), var(--water-image);
  background-position: center;
  background-size: cover;
}
.contact-actions { background: #fff; border-color: #d0e5ef; box-shadow: var(--shadow); }
.business-section { color: var(--ink); border-top: 1px solid var(--line); background: linear-gradient(180deg, #f6fbfe, #eaf5fb); }
.business-section .section-head h2 { color: var(--navy); }
.business-section .section-head p { color: var(--muted); }
.business-card { color: var(--navy); background: #fff; border-color: #d0e4ef; box-shadow: 0 12px 30px rgba(24,83,115,.04); }
.business-card .tag { color: #806022; }
.business-card p { color: var(--muted); }
.business-card .business-link { color: var(--aqua-dark); }
footer { background: #0b2c46; color: #c3d5e1; }
.mobile-cta { background: rgba(11,44,70,.97); }
:focus-visible { outline-color: #a67519; }

/* Keep the policy page in the same light, clear visual system. */
.legal-page { color: var(--ink); background: linear-gradient(135deg, #edf8fd, #fff 50%, #edf7fc); }
.legal-page > header { color: var(--navy); background: #fff; border-bottom: 1px solid var(--line); }
.legal-page > header a { color: var(--navy); }
.legal-page > main { margin-top: 32px; margin-bottom: 40px; padding: 36px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.legal-page .contact { padding: 24px; background: #f1f9fd; border-color: var(--line); }
.legal-page .contact h2 { font-size: 1.2rem; letter-spacing: normal; }
.legal-page a { color: var(--aqua-dark); }
.legal-page footer a { color: #fff; }

@media (max-width: 760px) {
  .hero::before {
    background-image: linear-gradient(180deg, rgba(248,253,255,.97) 0%, rgba(248,253,255,.94) 38%, rgba(240,250,255,.28) 75%, rgba(232,246,254,.1) 100%), var(--water-image);
    background-position: center, 64% center;
  }
  .hero-device { box-shadow: 0 20px 46px rgba(14,76,110,.15); }
  .hero-card { background: rgba(255,255,255,.97); }
  .effects-section, .contact { background-position: center, 65% center; }
  .legal-page > main { padding: 26px 22px; margin-top: 22px; }
  .legal-page footer { padding-bottom: 26px; }
}