/* ── MOCO Works utilities (shared across templates) ── */

/* Page sections */
.page-section { padding: 96px 0; background: var(--white); }
.page-section--alt { background: var(--off-white); }
.page-section--flush { padding: 0; background: transparent; }

/* Section intro */
.sec-intro > div:last-child { padding-left: 24px; }
.sec-intro--spaced { margin-bottom: 64px; }
.section-head-center { text-align: center; margin-bottom: 64px; }
.sec-title--center { text-align: center; }
.sec-title--center-lg { text-align: center; margin-bottom: 52px; }
.sec-title--kpi { margin-bottom: 32px; font-size: clamp(24px, 3vw, 36px); }
/* 本文幅は .container に委ねる（520px 等の個別 max-width は設けない） */
.sec-body--center { text-align: center; }

/* Eyebrow variants */
.eyebrow--amber { color: var(--amber); }
.eyebrow--center { display: block; text-align: center; margin-bottom: 16px; }
.eyebrow--band { color: var(--amber); margin-bottom: 20px; }

/* Text / links */
.text-amber { color: var(--amber); }
.link-amber { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.link-amber:hover { color: var(--amber-lt); }
.lnk-arr--ink { color: var(--ink); }
.text-strong { display: block; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.text-muted-sm { margin-top: 10px; font-size: 13px; color: var(--mid); }
.text-note-sm { font-size: 13px; opacity: 0.7; }
.legal-strong { color: var(--ink); font-weight: 700; }

/* Layout */
.u-max-800 { max-width: 800px; margin-inline: auto; }
.u-mt-64 { margin-top: 64px; }

/* Service: flow arrow */
.flow-arrow {
  display: flex;
  align-items: center;
  font-size: 28px;
  color: var(--amber);
}

/* Service: report bar widths */
.report-bar-fill--w68 { width: 68%; }
.report-bar-fill--w90 { width: 90%; }
.report-bar-fill--w100 { width: 100%; }

/* Service: growth bar heights */
.growth-bar--h12 { height: 12%; }
.growth-bar--h15 { height: 15%; }
.growth-bar--h19 { height: 19%; }
.growth-bar--h28 { height: 28%; }
.growth-bar--h37 { height: 37%; }
.growth-bar--h48 { height: 48%; }
.growth-bar--h59 { height: 59%; }
.growth-bar--h70 { height: 70%; }
.growth-bar--h79 { height: 79%; }
.growth-bar--h87 { height: 87%; }
.growth-bar--h93 { height: 93%; }
.growth-bar--h100 { height: 100%; }

/* Service: pricing */
.price-suffix { font-size: 14px; font-weight: 400; }
.price-suffix--lg { font-size: 28px; font-weight: 400; }
.price-suffix--md { font-size: 24px; font-weight: 400; }
.price-disclaimer {
  text-align: center;
  font-size: 12px;
  color: var(--mid);
  margin-top: 24px;
}

/* Service: FAQ block */
.faq-section { max-width: 800px; margin-inline: auto; }
.faq-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 36px 40px;
  background: var(--white);
  border: 1px solid var(--line);
}
.faq-teaser-text {
  margin: 0;
  font-size: 14px;
  color: var(--mid);
  line-height: 1.85;
}
@media (max-width: 768px) {
  .faq-teaser {
    padding: 28px 24px;
    flex-direction: column;
    align-items: flex-start;
  }
}
.faq-item summary {
  transition: color 0.4s var(--ease), background 0.4s var(--ease);
}
.faq-item summary::after {
  transition: transform 0.45s var(--ease), color 0.4s var(--ease);
}
.faq-item .faq-body {
  overflow: hidden;
}
.faq-item.is-animating .faq-body {
  will-change: height, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .faq-item summary,
  .faq-item summary::after,
  .faq-item .faq-body {
    transition: none !important;
  }
}

/* Ghost numbers */
.sec-ghost-num--amber { color: rgba(107, 138, 224, 0.1); }
body.moco-page-neko .sec-ghost-num--amber,
.neko .sec-ghost-num--amber { color: rgba(201, 106, 32, 0.1); }
.activity-icon--lg { font-size: 26px; }

/* Contact */
.contact-eyebrow { display: block; margin-bottom: 20px; }

/* SP only line break */
br.br-sp { display: none; }
@media (max-width: 768px) {
  br.br-sp { display: block; }
}

/* PC only line break */
br.br-pc { display: block; }
@media (max-width: 768px) {
  br.br-pc { display: none; }
}