/* 支払明細書ツールの紹介ページ用（会社サイトの style.css の上に、重ねて使います） */

:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; border-radius: 6px; }

/* ボタン：文字が読みやすいよう、アクセント色を、少し濃くします */
.btn-cta { background: #4F6E53; color: var(--white); box-shadow: var(--shadow); }
.btn-cta:hover { background: #435E47; transform: translateY(-2px); opacity: 1; }

/* Hero */
.pay-hero { position: relative; overflow: hidden; padding: 84px 0 72px; }
.pay-hero .blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; }
.pay-hero .blob.b1 { width: 340px; height: 340px; background: var(--moss); opacity: .22; top: -100px; right: -60px; }
.pay-hero .blob.b2 { width: 260px; height: 260px; background: var(--accent-soft); opacity: .5; bottom: 40px; left: -110px; }
.pay-hero-grid > * { min-width: 0; }
.pay-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.pay-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--moss); font-weight: 700; font-size: .78rem; letter-spacing: .15em; margin-bottom: 16px; font-family: 'Zen Maru Gothic', sans-serif; }
.pay-hero .eyebrow svg { width: 16px; height: 16px; }
.pay-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 900; margin: 0 0 8px; line-height: 1.3; color: var(--ink); }
.pay-hero .catch { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: #4F6E53; margin: 0 0 18px; }
.pay-hero .lead { font-size: 1.02rem; color: var(--ink-soft); margin: 0 0 28px; max-width: 34em; }
.pay-hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.micro { font-size: .84rem; color: var(--ink-soft); margin: 14px 0 0; }
.micro + .micro { margin-top: 4px; }

/* 支払明細書の見本（ツールが実際に作る書類と同じ作り） */
.paper { position: relative; margin: 0; justify-self: center; width: 100%; max-width: 500px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 40px -18px rgba(31, 58, 61, .35); transform: rotate(1.2deg); }
.paper .ptag { position: absolute; top: -12px; left: 16px; z-index: 2; background: var(--ink); color: var(--surface); font-family: 'Zen Maru Gothic', sans-serif; font-size: .74rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; }
.fit { overflow: hidden; width: 100%; height: 520px; }
.doc { width: 640px; padding: 30px 32px 36px; transform-origin: top left; background: #fff; text-align: left; letter-spacing: 0; font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif; font-size: 11px; line-height: 1.35; color: #222; }
.doc .ttl { text-align: center; font-size: 24px; letter-spacing: 10px; margin: 0 0 18px; font-weight: 700; }
.doc table { border-collapse: collapse; width: 100%; }
.doc .list th, .doc .list td { border: 1px solid #888; padding: 5px 6px; }
.doc .list th { background: #eee; }
.doc .r { text-align: right; }
.doc .c { text-align: center; }
.doc .sum { width: 52%; margin-left: 48%; margin-top: 10px; }
.doc .sum td { border: 1px solid #888; padding: 5px 6px; }
.doc .tot td { font-weight: bold; font-size: 13px; background: #f3f3f3; }
.doc .note { margin-top: 16px; border: 1px solid #888; padding: 8px; }
.stamp { position: absolute; right: -10px; bottom: -22px; width: 84px; height: 84px; border-radius: 50%; border: 3px solid #4F6E53; color: #4F6E53; background: rgba(255, 253, 249, .92); display: grid; place-items: center; text-align: center; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 18px; line-height: 1.15; letter-spacing: .06em; transform: rotate(-10deg); }

/* Facts */
.facts-band { padding: 0 0 8px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.facts li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.facts strong { display: block; font-family: 'Zen Maru Gothic', sans-serif; font-size: 1.02rem; color: var(--ink); margin-bottom: 2px; }
.facts span { font-size: .86rem; color: var(--ink-soft); }

/* Features */
.pay-table { max-width: 860px; margin: 0 auto; }
.pay-table th { width: 250px; }

/* 見出し（2行のとき、行間が開きすぎないように） */
.pay-hero .nb, .section-head .nb { white-space: nowrap; }
.section-head h2 { line-height: 1.5; }
.section-head p { max-width: 40em; margin-left: auto; margin-right: auto; }

/* Steps */
.steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin: 0 auto; }
.steps-grid .card h3 .nb, .steps-grid .card h3 span { display: block; font-size: .78rem; font-weight: 500; color: var(--ink-soft); margin-top: 2px; }

/* Data / panels */
.pay-panel { max-width: 860px; margin: 0 auto; padding: 32px 36px; }
.pay-list { margin: 0 0 20px; padding-left: 1.3em; color: var(--ink-soft); }
.pay-list li { margin: 8px 0; }
.pay-warn { margin: 0; font-size: .9rem; }

/* FAQ */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; padding: 0 24px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 28px 18px 0; position: relative; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: #4F6E53; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px; color: var(--ink-soft); font-size: .94rem; }

/* CTA band */
.cta-band { background: #E4EBDF; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.cta-band h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 8px; }
.cta-band p { color: var(--ink); margin: 0 0 22px; }
.cta-band .micro { margin: 14px 0 0; color: var(--ink-soft); }
.cta-band .micro + .micro { margin-top: 4px; }
.cta-band a:not(.btn) { color: var(--ink); text-decoration: underline; }

/* Terms */
.terms-panel { padding: 32px 36px; }
ol.terms { margin: 0; padding-left: 1.5em; font-size: .92rem; line-height: 1.9; color: var(--ink-soft); }
ol.terms > li { margin: 12px 0; }
ol.terms b { color: var(--ink); }
ol.terms ul { margin: 4px 0; padding-left: 1.3em; }
ol.terms ul li { margin: 3px 0; }

/* Footer notes */
.legal { max-width: 860px; text-align: left; color: var(--ink-soft); font-size: .8rem; line-height: 1.8; }
.legal p { margin: 0 0 8px; }

@media (max-width: 860px) {
  .steps-grid { grid-template-columns: 1fr; }
  .pay-hero { padding: 48px 0 56px; }
  .pay-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .pay-hero-text { text-align: center; }
  .pay-hero .eyebrow { justify-content: center; }
  .pay-hero .lead { margin-left: auto; margin-right: auto; }
  .pay-hero .cta-row { justify-content: center; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .pay-table th { width: 130px; }
  .pay-panel, .terms-panel { padding: 24px 20px; }
  .paper { max-width: 440px; }
}
@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr; }
  .stamp { width: 68px; height: 68px; font-size: 14px; right: -4px; bottom: -18px; }
  .pay-table th, .pay-table td { display: block; width: auto; }
  .pay-table th { border-bottom: none; padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }