/* ==========================================================================
   楽天ペイ履歴読み取りツール 公式ページ — 共通スタイル
   デザイントークンは doc/公式ページ_実装指示書.md §3 に準拠。
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700&family=Noto+Sans+JP:wght@400;500&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  --paper: #FAFAF8;
  --paper-raised: #FFFFFF;
  --ink: #23211C;
  --gold: #C79A3A;
  --gold-deep: #A67C2B;
  --gold-tint: #F3E8D2;
  --gold-ink: #7A5615;   /* ゴールドを「文字色」として使う専用の濃色（本文サイズでもWCAG AA 4.5:1を満たす）。
                             背景・下線・アイコンには --gold / --gold-deep を使い、これは文字にのみ使う */
  --slate: #5A6270;      /* 副次テキスト。#6B7280だと小さめの文字でAA(4.5:1)をギリギリしか満たさないため少し深くした */
  --slate-tint: #E4E1D9;
  --clean: #5B8C7B;
  --clean-deep: #47705F; /* 白文字を乗せる緑背景（CSVモチーフのヘッダー行）専用の濃色 */
  --clean-tint: #E7EEEB;
  --line-green: #06C755; /* LINE公式ボタン専用。ブランド基調色ではなくボタン意匠としてのみ使用 */

  --font-display: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-mono: 'Roboto Mono', 'SFMono-Regular', Consolas, monospace;

  --max-width: 1080px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  color-scheme: light;
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
ul, ol { padding-left: 1.3em; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}
p { margin: 0 0 1em; }

/* ---------- フォーカス可視性 ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- モーション抑制 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- レイアウト共通 ---------- */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.site-header {
  border-bottom: 1px solid var(--slate-tint);
  background: var(--paper);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.86rem, 0.7rem + 1.4vw, 1.05rem);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  white-space: nowrap;
}
.brand small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--slate);
  display: none;
}
@media (min-width: 480px) {
  .brand small { display: inline; }
}
.header-link {
  font-size: 0.86rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--slate);
  padding-bottom: 2px;
  white-space: nowrap;
}
.header-link:hover, .header-link:focus-visible {
  color: var(--gold-ink);
  border-color: var(--gold-deep);
}

section {
  padding: 56px 0;
}
section + section {
  border-top: 1px solid var(--slate-tint);
}
.section-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.8em;
}
h2.section-title {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
  margin-bottom: 0.5em;
}
.section-lead {
  color: var(--slate);
  max-width: 640px;
  margin-bottom: 1.6em;
}

/* ---------- ヒーロー ---------- */
.hero .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 48px;
}
@media (min-width: 860px) {
  .hero .wrap {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    padding-top: 64px;
    padding-bottom: 64px;
  }
}
.hero h1 {
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1.45;
}
.hero h1 .accent {
  background: linear-gradient(transparent 62%, var(--gold-tint) 62%);
}
.hero .subcopy {
  font-size: 1.05rem;
  color: var(--ink);
  opacity: 0.85;
  max-width: 46ch;
}

/* ---------- CTA ---------- */
.cta-line {
  margin-top: 1.8em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.line-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--line-green);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(6, 199, 85, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.line-cta:hover, .line-cta:focus-visible {
  background: #05b34c;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(6, 199, 85, 0.34);
}
.line-cta svg { flex: none; }
.cta-note {
  font-size: 0.8rem;
  color: var(--slate);
}

/* ---------- 署名モチーフ: スクショ→CSV ---------- */
.motif {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
@media (max-width: 559px) {
  .motif {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .motif .motif-arrow { transform: rotate(90deg); }
}

.motif-panel {
  background: var(--paper-raised);
  border: 1px solid var(--slate-tint);
  border-radius: var(--radius-m);
  padding: 14px;
  box-shadow: 0 10px 30px rgba(35, 33, 28, 0.06);
}
.motif-panel .motif-caption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* before: スクショ風 */
.mock-shot {
  border-radius: var(--radius-s);
  overflow: hidden;
  border: 1px solid var(--slate-tint);
  background: #fff;
}
.mock-shot .statusbar {
  height: 16px;
  background: #3a3a38;
}
.mock-shot .row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  font-size: 0.72rem;
  border-bottom: 1px dashed var(--slate-tint);
  color: var(--ink);
}
.mock-shot .row:last-child { border-bottom: none; }
.mock-shot .row .store {
  opacity: 0.85;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mock-shot .row .amt { font-family: var(--font-mono); white-space: nowrap; flex: none; }
.mock-shot .row.skewed .store { margin-left: 6px; }

/* after: CSV風 */
.mock-csv {
  border-radius: var(--radius-s);
  overflow: hidden;
  border: 1px solid var(--clean);
  background: var(--clean-tint);
}
.mock-csv .csv-head {
  display: grid;
  grid-template-columns: 2.1fr 3fr 1.4fr;
  gap: 6px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: var(--clean-deep);
}
.mock-csv .csv-row {
  display: grid;
  grid-template-columns: 2.1fr 3fr 1.4fr;
  gap: 6px;
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: var(--paper-raised);
  border-bottom: 1px solid var(--clean-tint);
}
.mock-csv .csv-row:last-child { border-bottom: none; }
.mock-csv .csv-row .amt { text-align: right; }
.mock-csv .csv-row span, .mock-csv .csv-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.motif-arrow {
  color: var(--gold-deep);
  width: 30px;
  height: 30px;
}
@media (prefers-reduced-motion: no-preference) {
  .motif-arrow {
    animation: nudge 2.4s ease-in-out infinite;
  }
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
@media (max-width: 559px) {
  @media (prefers-reduced-motion: no-preference) {
    .motif-arrow { animation: nudge-v 2.4s ease-in-out infinite; }
  }
}
@keyframes nudge-v {
  0%, 100% { transform: rotate(90deg) translateX(0); }
  50% { transform: rotate(90deg) translateX(4px); }
}

/* ---------- 導入文 ---------- */
.intro p { max-width: 68ch; }

/* ---------- 使い方3ステップ ---------- */
.steps {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}
.step {
  background: var(--paper-raised);
  border: 1px solid var(--slate-tint);
  border-radius: var(--radius-m);
  padding: 22px 20px;
  position: relative;
}
.step .num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gold-ink);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  display: block;
}
.step h3 { font-size: 1.05rem; margin-bottom: 0.4em; }
.step p { color: var(--slate); margin: 0; font-size: 0.92rem; }

/* ---------- 特長 ---------- */
.features {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .features { grid-template-columns: repeat(3, 1fr); }
}
.feature {
  padding: 20px;
  border-radius: var(--radius-m);
  background: var(--paper-raised);
  border: 1px solid var(--slate-tint);
}
.feature .icon {
  width: 28px;
  height: 28px;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.feature h3 { font-size: 0.98rem; margin-bottom: 0.35em; }
.feature p { color: var(--slate); font-size: 0.88rem; margin: 0; }

/* ---------- プライバシー要約 ---------- */
.privacy-summary {
  background: var(--clean-tint);
  border-radius: var(--radius-l);
  padding: 30px clamp(20px, 4vw, 40px);
}
.privacy-summary ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4em;
  display: grid;
  gap: 12px;
}
.privacy-summary li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
}
.privacy-summary li svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--clean);
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.link-arrow:hover, .link-arrow:focus-visible { color: var(--gold-ink); border-color: var(--gold-deep); }

/* ---------- 料金 ---------- */
.pricing-card {
  background: var(--paper-raised);
  border: 1px solid var(--gold);
  border-radius: var(--radius-m);
  padding: 28px clamp(20px, 4vw, 34px);
  max-width: 640px;
}
.pricing-card .badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold-ink);
  background: var(--gold-tint);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.pricing-card p { margin: 0; color: var(--ink); }

/* ---------- 注意事項 ---------- */
.notice-box {
  border: 1px solid var(--slate);
  border-left: 4px solid var(--gold-deep);
  border-radius: var(--radius-s);
  padding: 18px 20px;
  background: var(--paper-raised);
}
.notice-box p { margin: 0; font-size: 0.92rem; color: var(--ink); }
.notice-box strong { color: var(--gold-ink); }

/* ---------- フッター ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
}
.site-footer .wrap {
  padding-top: 44px;
  padding-bottom: 32px;
}
.site-footer .footer-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  margin-bottom: 28px;
}
@media (min-width: 640px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
.site-footer h4 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold);
  margin-bottom: 0.6em;
  letter-spacing: 0.04em;
}
.site-footer p, .site-footer li { color: #d7d4c9; font-size: 0.88rem; }
.site-footer a { color: #d7d4c9; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--gold); }
.footer-disclaimer {
  font-size: 0.78rem;
  color: #a9a69b;
  line-height: 1.9;
  border-top: 1px solid #3a3830;
  padding-top: 20px;
}
.footer-bottom {
  margin-top: 20px;
  font-size: 0.76rem;
  color: #8f8c81;
}

/* ---------- プライバシーポリシーページ ---------- */
.policy {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}
.policy h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
  margin-bottom: 0.3em;
}
.policy .updated {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--slate);
  margin-bottom: 2em;
}
.policy .lede {
  color: var(--slate);
  margin-bottom: 2.4em;
}
.policy h2 {
  font-size: 1.08rem;
  margin-top: 2.2em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--slate-tint);
}
.policy p, .policy li { font-size: 0.96rem; }
.policy ul { margin-bottom: 1.2em; }
.policy .note {
  background: var(--clean-tint);
  border-radius: var(--radius-s);
  padding: 14px 16px;
  font-size: 0.9rem;
  margin: 1em 0;
}
.policy .appendix {
  margin-top: 3em;
  padding-top: 2em;
  border-top: 2px solid var(--gold-tint);
}
.policy .appendix h2 { border-bottom: none; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2.6em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  font-size: 0.92rem;
}
.back-link:hover, .back-link:focus-visible { color: var(--gold-ink); border-color: var(--gold-deep); }