* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy: #003153;
  --pale: #EAEDF1;
  --accent: #0B8BEE;
}
html, body {
  background: #fff;
  -webkit-font-smoothing: antialiased;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Sans", sans-serif;
  color: #111;
}
a { color: inherit; text-decoration: none; }

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--navy);
  padding: 16px 22px;
  display: flex; justify-content: space-between; align-items: center;
}
.nav .brand {
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.005em;
}
.nav .menu {
  width: 36px; height: 36px;
  background: #fff; color: var(--navy);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px;
}

/* ---------- Section base ---------- */
section {
  padding: 88px 22px 96px;
}
.dark  { background: var(--navy); color: #fff; }
.light { background: var(--pale);  color: var(--navy); }

.hd { margin-bottom: 44px; }
.hd .en {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin-bottom: 10px;
}
.hd .jp {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.82;
  letter-spacing: 0.02em;
}
.light .hd .en { color: var(--accent); }

/* ---------- HERO ---------- */
.hero { padding: 90px 22px 110px; position: relative; overflow: hidden; }
.hero-lead, .hero-brand, .hero-scroll { position: relative; z-index: 2; }

/* Bychance signature: two lines meeting by chance behind the wordmark */
.hero-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-lines path {
  fill: none;
  stroke: rgba(11, 139, 238, 0.32);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: drawLine 5.5s cubic-bezier(0.65, 0.02, 0.36, 1) 0.4s forwards;
}
.hero-lines .meet {
  fill: rgba(11, 139, 238, 0.85);
  opacity: 0;
  transform-origin: center;
  animation: meetPoint 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 5.4s forwards;
}
.hero-lines .meet-glow {
  fill: rgba(11, 139, 238, 0.25);
  opacity: 0;
  animation: meetGlow 2s ease 5.6s infinite;
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
@keyframes meetPoint {
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes meetGlow {
  0%, 100% { opacity: 0; transform: scale(1); }
  50%      { opacity: 1; transform: scale(2.5); }
}

  66%      { transform: translate(25px, -35px) scale(1.12); opacity: 0.4; }
}

.hero-lead {
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: 60px;
  opacity: 0.92;
}
.hero-brand {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 90px;
}
.hero-scroll {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.hero-scroll .txt {
  font-family: "Helvetica Neue", monospace;
  font-size: 11px;
  letter-spacing: 0.25em;
  opacity: 0.55;
  text-transform: lowercase;
}
.hero-scroll .line {
  width: 1px; height: 64px;
  background: rgba(255,255,255,0.22);
  position: relative;
  overflow: visible;
}
.hero-scroll .line::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1.5px;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  animation: scrollDrop 2.2s cubic-bezier(0.55, 0.06, 0.68, 0.19) infinite;
}
@keyframes scrollDrop {
  0%   { transform: translateY(0);    opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(64px); opacity: 0; }
}

/* ---------- SERVICES ---------- */
.svc-list {
  display: flex; flex-direction: column;
  gap: 36px;
}
.svc-item {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 22px;
}
.svc-item h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.svc-item p {
  font-size: 14.5px;
  line-height: 1.9;
  opacity: 0.85;
}

/* ---------- ABOUT ---------- */
.light .svc-item { border-top-color: rgba(0,49,83,0.2); }
.about-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #C4CBD3;
  margin-top: 8px;
  margin-bottom: 0;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.about-history {
  margin-top: 56px;
  border-top: 1px solid rgba(0,49,83,0.2);
  padding-top: 40px;
}
.about-history h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}
.history-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,49,83,0.13);
  font-size: 13.5px;
  line-height: 1.75;
}
.history-row .yr {
  opacity: 0.6;
  font-family: "Helvetica Neue", monospace;
  font-size: 12.5px;
}

/* ---------- APPROACH ---------- */

/* ---------- COMPANY ---------- */
.company-table {
  border-top: 1px solid rgba(0,49,83,0.2);
}
.company-row {
  border-bottom: 1px solid rgba(0,49,83,0.2);
  padding: 18px 0;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  font-size: 14px;
  line-height: 1.65;
}
.company-row .k { opacity: 0.6; }

/* ---------- CONTACT ---------- */
.contact-lead {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 32px;
  max-width: 460px;
}
.contact-btn {
  display: inline-block;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  padding: 15px 28px;
  font-size: 14px;
  letter-spacing: 0.03em;
  border-radius: 30px;
}

/* ---------- FOOTER ---------- */
footer {
  background: var(--pale);
  color: var(--navy);
  padding: 60px 22px 48px;
}
footer .brand-huge {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}
footer .foot-links {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13.5px;
  margin-bottom: 40px;
}
footer .copy {
  font-size: 11px;
  opacity: 0.55;
  padding-top: 20px;
  border-top: 1px solid rgba(0,49,83,0.18);
}

/* ============ PC breakpoint (>= 768px) ============ */
@media (min-width: 768px) {
  .nav {
    padding: 22px 60px;
  }
  .nav .brand { font-size: 20px; }

  section {
    padding: 140px 60px 150px;
  }

  .hd { margin-bottom: 64px; }
  .hd .en { font-size: 108px; }
  .hd .jp { font-size: 16px; }

  .hero { padding: 160px 60px 180px; }
  .hero-lead { font-size: 18px; margin-bottom: 90px; }
  .hero-brand { font-size: 152px; margin-bottom: 140px; }

  .svc-intro, .approach-intro { font-size: 17px; }
  .svc-item h3, .approach-item h3 { font-size: 26px; }
  .svc-item p, .approach-item p { font-size: 16px; }
  .svc-list, .approach-list { gap: 48px; }

  .about-photo { aspect-ratio: 16 / 9; height: auto; }
  .about-history { margin-top: 80px; padding-top: 56px; }
  .about-history h4 { font-size: 17px; margin-bottom: 30px; }
  .history-row { grid-template-columns: 130px 1fr; font-size: 15px; padding: 14px 0; }
  .history-row .yr { font-size: 14px; }

  .company-row { grid-template-columns: 200px 1fr; font-size: 15.5px; padding: 22px 0; }

  .contact-lead { font-size: 18px; }
  .contact-btn { padding: 17px 34px; font-size: 15px; }

  footer { padding: 90px 60px 60px; }
  footer .brand-huge { font-size: 88px; }
  footer .foot-links { font-size: 15px; gap: 12px; }
}

/* ============ Wide PC (>= 1200px) — centered container ============ */
@media (min-width: 1200px) {
  .nav, section, footer {
    padding-left: max(60px, calc((100% - 1080px) / 2));
    padding-right: max(60px, calc((100% - 1080px) / 2));
  }
  .hero-brand { font-size: 180px; }
  .hd .en { font-size: 128px; }
}
/* ============ ANIMATIONS ============ */

/* 1. Scroll-triggered fade-in-up */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children (delay each) */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.55s; }
.reveal-stagger.in-view > *:nth-child(7) { transition-delay: 0.65s; }

/* 2. Hero brand letter-by-letter reveal (page load) */
.hero-brand span {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px);
  animation: heroLetter 1.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes heroLetter {
  to { opacity: 1; transform: translateY(0); }
}
.hero-lead, .hero-scroll {
  opacity: 0;
  animation: heroFade 1.0s ease forwards;
}
.hero-lead { animation-delay: 0.1s; }
.hero-scroll { animation-delay: 1.7s; }
@keyframes heroFade {
  to { opacity: 1; }
}

/* 3. Line reveal (borders extend left→right on view) */
.line-reveal {
  position: relative;
  border-top: none !important;
}
.line-reveal::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.22);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.light .line-reveal::before {
  background: rgba(0,49,83,0.22);
}
.line-reveal.in-view::before {
  transform: scaleX(1);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .hero-brand span, .hero-lead, .hero-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .line-reveal::before { transform: scaleX(1) !important; }
}

/* ============ Business (事業内容) section ============ */
.biz-list {
  display: flex;
  flex-direction: column;
  gap: 44px;
  margin-top: 20px;
}
.biz-item {
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.biz-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.biz-num {
  font-family: "Helvetica Neue", "Arial", monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent);
  opacity: 0.9;
  flex-shrink: 0;
}
.biz-verb {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.biz-bullets {
  list-style: none;
  padding-left: 0;
  margin: 0 0 22px 0;
}
.biz-bullets li {
  font-size: 14.5px;
  line-height: 1.9;
  padding-left: 1.1em;
  position: relative;
  opacity: 0.88;
}
.biz-bullets li::before {
  content: "・";
  position: absolute;
  left: 0;
  opacity: 0.55;
}
.biz-desc {
  font-size: 14px;
  line-height: 1.95;
  opacity: 0.75;
  margin: 8px 0 0;
}
@media (min-width: 768px) {
  .biz-list { gap: 68px; }
  .biz-item { padding-top: 44px; }
  .biz-num { font-size: 15px; }
  .biz-verb { font-size: 30px; }
  .biz-bullets li { font-size: 16.5px; }
  .biz-desc { font-size: 16px; }
  .biz-head { gap: 24px; margin-bottom: 24px; }
}

/* ============ Full-screen menu overlay ============ */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 68px; }
@media (min-width: 768px) { section[id] { scroll-margin-top: 90px; } }

.nav .menu { cursor: pointer; user-select: none; }

.menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 100;
  padding: 20px 22px 40px;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.55s cubic-bezier(0.65, 0.02, 0.36, 1);
  pointer-events: none;
  overflow-y: auto;
}
.menu-overlay.open {
  transform: translateY(0);
  pointer-events: auto;
}
.menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu-brand {
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.005em;
}
.menu-close {
  width: 36px; height: 36px;
  background: #fff; color: var(--navy);
  border: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.menu-links {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1;
  justify-content: center;
  padding: 40px 6px;
}
.menu-links a {
  color: #fff;
  text-decoration: none;
  display: block;
}
.menu-links .en {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.menu-links .jp {
  font-size: 12px;
  opacity: 0.55;
  margin-top: 4px;
  letter-spacing: 0.02em;
  display: block;
}
.menu-foot {
  font-size: 11px;
  opacity: 0.4;
  letter-spacing: 0.05em;
  padding-top: 20px;
}
body.menu-open { overflow: hidden; }
@media (min-width: 768px) {
  .menu-overlay { padding: 26px 60px 60px; }
  .menu-links .en { font-size: 56px; }
  .menu-links .jp { font-size: 14px; margin-top: 6px; }
  .menu-links { gap: 44px; padding: 60px 20px; }
}

/* Sub-section within Services (fit content integration) */
@media (min-width: 768px) {
}

/* About us section: photo has breathing room below before next section */
@media (min-width: 768px) {
}

/* Logo marks integrated across site */
.nav .brand { display: flex; align-items: center; gap: 8px; }
.nav .brand-mark {
  height: 22px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .nav .brand-mark { height: 26px; }
}

.menu-brand { display: flex; align-items: center; gap: 8px; }
.menu-brand-mark {
  height: 22px;
  width: auto;
  display: block;
}

footer .footer-mark {
  height: 40px;
  width: auto;
  display: block;
  margin: 0 auto 22px;
  opacity: 0.9;
}
@media (min-width: 768px) {
  footer .footer-mark { height: 56px; margin-bottom: 30px; }
}
footer .brand-huge {
  text-align: center;
}
/* ============ v22 additions ============ */

/* Nav CTA */
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-cta {
  display: none;
  border: 1px solid rgba(255,255,255,0.55);
  color: #fff;
  border-radius: 30px;
  padding: 9px 20px;
  font-size: 13px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.nav-cta:hover { background: rgba(255,255,255,0.1); }
@media (min-width: 768px) {
  .nav-cta { display: inline-block; font-size: 14px; padding: 11px 24px; }
}

/* Message block (under hero) */
.message { padding-top: 0; }
.message p {
  font-size: 17px;
  line-height: 2.0;
  margin-bottom: 26px;
  max-width: 720px;
}
.message p:last-child { margin-bottom: 0; }
.message .lead { font-weight: 700; letter-spacing: -0.005em; }
@media (min-width: 768px) {
  .message p { font-size: 21px; line-height: 2.05; margin-bottom: 32px; max-width: 860px; }
}

/* Full-width photo band */
.photo-band { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 768px) { .photo-band { aspect-ratio: 21 / 8; } }

/* Service cards (top page) */
.svc-cards { display: flex; flex-direction: column; gap: 0; }
.svc-card {
  padding: 26px 0 28px;
  border-bottom: 1px solid rgba(0,49,83,0.18);
}
.svc-card:first-child { border-top: 1px solid rgba(0,49,83,0.18); }
.svc-card .num {
  font-family: "Helvetica Neue", Arial, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}
.svc-card h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
}
.svc-card p { font-size: 14.5px; line-height: 1.9; opacity: 0.85; margin-bottom: 14px; }
@media (min-width: 768px) {
  .svc-card { padding: 40px 0 42px; display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
  .svc-card .head { grid-column: 1; }
  .svc-card .body { grid-column: 2; }
  .svc-card h3 { font-size: 24px; margin-bottom: 0; }
  .svc-card p { font-size: 16px; margin-bottom: 16px; }
}

/* "more" link */
.more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.more::after {
  content: '';
  width: 16px; height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
.more:hover::after { width: 26px; }
.dark .more { color: #7ec2f7; }

/* Process steps (top page) */
.steps { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.step {
  padding: 24px 0 26px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step:first-child { border-top: 1px solid rgba(255,255,255,0.2); }
.step .term {
  font-family: "Helvetica Neue", Arial, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #7ec2f7;
}
.step .txt { font-size: 15.5px; line-height: 1.8; }
@media (min-width: 768px) {
  .step { flex-direction: row; align-items: baseline; gap: 40px; padding: 34px 0 36px; }
  .step .term { width: 170px; flex-shrink: 0; font-size: 14px; }
  .step .txt { font-size: 18px; }
}

/* Section intro paragraph */
.sec-lead { font-size: 15px; line-height: 1.9; margin-bottom: 34px; max-width: 680px; }
@media (min-width: 768px) { .sec-lead { font-size: 17px; margin-bottom: 44px; } }

/* Detail pages */
.page-hd { margin-bottom: 40px; }
.page-hd .eyebrow {
  font-family: "Helvetica Neue", Arial, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
  display: block;
  margin-bottom: 16px;
}
.page-hd h1 {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .page-hd { margin-bottom: 60px; }
  .page-hd h1 { font-size: 42px; }
  .page-hd .eyebrow { font-size: 13px; }
}
.back {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 56px; font-size: 13.5px;
}
.back::before { content: ''; width: 18px; height: 1px; background: currentColor; }
@media (min-width: 768px) { .back { margin-top: 80px; font-size: 15px; } }

/* Contact form */
.form { max-width: 560px; margin-top: 8px; }
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  opacity: 0.85;
}
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 3px;
  padding: 13px 14px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  -webkit-appearance: none;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.8; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.field .note { font-size: 12.5px; opacity: 0.6; margin-top: 8px; line-height: 1.7; }
.submit {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  padding: 15px 34px;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.04em;
  border-radius: 30px;
  cursor: pointer;
  margin-top: 6px;
}
.submit:hover { background: var(--accent); color: #fff; }
@media (min-width: 768px) {
  .field label { font-size: 14px; }
  .field input, .field textarea { font-size: 16px; padding: 14px 16px; }
  .submit { font-size: 15px; padding: 16px 38px; }
}

/* --- refinements --- */
@media (min-width: 768px) {
  .svc-card { grid-template-columns: 360px 1fr; gap: 48px; }
  .svc-card h3 { font-size: 22px; line-height: 1.5; }
}
.biz-desc { max-width: 780px; }
.page-hd + .biz-bullets { max-width: 780px; }

/* --- v22.1 --- */
.step .sub { font-size: 13.5px; line-height: 1.85; opacity: 0.62; }
@media (min-width: 768px) {
  .step { align-items: start; }
  .step .body { flex: 1; }
  .step .sub { font-size: 14.5px; margin-top: 8px; }
}
.svc-more { margin-top: 34px; }
.svc-detail { border-top: 1px solid rgba(255,255,255,0.22); padding-top: 40px; margin-top: 52px; }
.svc-detail:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.svc-detail h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.005em; margin-bottom: 6px;
}
.svc-detail .n {
  font-family: "Helvetica Neue", Arial, monospace;
  font-size: 12px; letter-spacing: 0.12em; color: #7ec2f7;
  display: block; margin-bottom: 12px;
}
@media (min-width: 768px) {
  .svc-detail { padding-top: 56px; margin-top: 72px; }
  .svc-detail h2 { font-size: 30px; margin-bottom: 10px; }
  .svc-detail .n { font-size: 14px; }
}
@media (min-width: 768px) {
  .step .body { max-width: 700px; }
}

/* ============ 日本語の折り返し制御 ============ */
body {
  word-break: auto-phrase;   /* 文節単位で改行する（Chromium系） */
  line-break: strict;
  text-wrap: pretty;         /* 最終行が1語だけになるのを避ける */
}
.hd .en, .hero-brand, footer .brand-huge, .menu-links .en { word-break: normal; }
h1, h2, h3, .step .txt, .svc-card h3, .message .lead, .page-hd h1 {
  text-wrap: balance;        /* 見出しは行長を均す */
}

/* --- v22.2: 本文の幅を罫線・画像と揃える --- */
.message p,
.sec-lead,
.biz-desc,
.page-hd + .biz-bullets,
.svc-card p {
  max-width: none;
}
@media (min-width: 768px) {
  .step .body { max-width: none; }
}
@media (min-width: 768px) { .form { max-width: 700px; } }