/* roulang page: index */
:root {
      --bg: #F4F1EA;
      --bg-alt: #E8E4DA;
      --ink: #161616;
      --ink-soft: #4A4742;
      --line: #D7D1C6;
      --brand: #2F4F4A;
      --brand-deep: #1E3330;
      --accent: #A36A3A;
      --dark: #141716;
      --on-dark: #EDE8DE;
      --paper: #FBF8F1;
      --white: #FFFdf8;
      --danger: #8B3A2F;
      --radius: 2px;
      --container: 1200px;
      --gutter: 28px;
      --header-top: 40px;
      --header-main: 72px;
      --ease: cubic-bezier(.22, 1, .36, 1);
      --shadow: 0 10px 30px rgba(22, 22, 22, .04);
      --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
      --font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      --read: 38em;
      --space-section: 112px;
      --sticky-bar: 64px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: var(--font-sans);
      font-size: 16px;
      line-height: 1.8;
      color: var(--ink);
      background: var(--bg);
      letter-spacing: .01em;
      text-rendering: optimizeLegibility;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { color: var(--brand); text-decoration: none; transition: color .25s var(--ease), border-color .25s var(--ease); }
    a:hover { color: var(--accent); }
    button, input, select, textarea { font-family: inherit; font-size: inherit; }
    button { cursor: pointer; border: 0; background: none; }
    h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.03em; line-height: 1.25; color: var(--ink); margin: 0; }
    p { margin: 0 0 1em; }
    ul, ol { margin: 0; padding: 0; list-style: none; }
    table { border-collapse: collapse; width: 100%; }
    :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
    .skip-link {
      position: absolute; left: 16px; top: -48px; z-index: 10000;
      background: var(--brand); color: var(--white); padding: 10px 16px;
    }
    .skip-link:focus { top: 12px; color: var(--white); }
    .container { width: min(100% - 40px, var(--container)); margin: 0 auto; }
    .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 12px; letter-spacing: .18em; text-transform: none;
      color: var(--brand); font-weight: 500; margin-bottom: 16px;
    }
    .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--brand); }
    .section { padding: var(--space-section) 0; position: relative; }
    .section-alt { background: var(--bg-alt); }
    .section-head { max-width: var(--read); margin-bottom: 48px; }
    .section-head h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 16px; }
    .section-head p { color: var(--ink-soft); font-size: 16px; line-height: 1.85; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px; padding: 0 22px; border-radius: var(--radius);
      font-size: 15px; font-weight: 500; letter-spacing: .04em;
      transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
      white-space: nowrap;
    }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover, .btn-primary:active { background: var(--brand-deep); color: #fff; transform: translateY(-1px); }
    .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
    .btn-ghost:hover { background: var(--ink); color: var(--bg); }
    .btn-line { border: 1px solid currentColor; background: transparent; }
    .btn-on-dark { border-color: var(--on-dark); color: var(--on-dark); }
    .btn-on-dark:hover { background: var(--on-dark); color: var(--dark); }
    .btn-block { width: 100%; }
    .badge {
      display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
      border: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); border-radius: 0;
      letter-spacing: .06em;
    }
    .site-header {
      position: sticky; top: 0; z-index: 80; background: rgba(244, 241, 234, .92);
      backdrop-filter: blur(10px); border-bottom: 1px solid transparent;
      transition: background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    }
    .site-header.is-scrolled {
      background: #efebe3; border-bottom-color: var(--line);
      box-shadow: 0 8px 24px rgba(22, 22, 22, .05);
    }
    .site-header.is-scrolled .header-main { min-height: 60px; }
    .header-top {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      min-height: var(--header-top); border-bottom: 1px solid var(--line);
      font-size: 12px; color: var(--ink-soft);
    }
    .header-top .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100% - 40px, var(--container)); }
    .top-left, .top-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
    .trust-marks { display: flex; gap: 14px; }
    .trust-marks span { position: relative; padding-left: 10px; }
    .trust-marks span::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; background: var(--brand); transform: translateY(-50%); }
    .top-right a { color: var(--ink-soft); min-height: 44px; display: inline-flex; align-items: center; }
    .top-right a:hover { color: var(--brand); }
    .header-main { min-height: var(--header-main); display: flex; align-items: center; }
    .header-main .container { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
    .logo {
      font-family: var(--font-serif); font-size: 20px; color: var(--ink); font-weight: 600;
      letter-spacing: -.04em; min-height: 44px; display: inline-flex; align-items: center; gap: 10px;
    }
    .logo-mark {
      width: 18px; height: 18px; border: 1px solid var(--brand);
      display: grid; place-items: center; color: var(--brand); font-size: 11px;
    }
    .nav-list { display: flex; justify-content: center; gap: 4px 18px; flex-wrap: wrap; }
    .nav-list a {
      color: var(--ink); font-size: 14px; min-height: 44px; display: inline-flex; align-items: center;
      position: relative; font-weight: 500;
    }
    .nav-list a::after {
      content: ""; position: absolute; left: 0; bottom: 10px; width: 0; height: 1px; background: var(--brand);
      transition: width .28s var(--ease);
    }
    .nav-list a:hover::after, .nav-list a.is-active::after { width: 22px; }
    .nav-toggle {
      display: none; width: 44px; height: 44px; border: 1px solid var(--line);
      position: relative;
    }
    .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
      position: absolute; left: 12px; width: 18px; height: 1px; background: var(--ink);
    }
    .nav-toggle span { top: 21px; }
    .nav-toggle span::before { content: ""; top: -6px; }
    .nav-toggle span::after { content: ""; top: 6px; }
    .hero {
      min-height: 90vh; padding: 36px 0 48px; display: flex; align-items: stretch;
      background:
        linear-gradient(180deg, rgba(244,241,234,.2), rgba(244,241,234,1) 96%),
        repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(47,79,74,.05) 48px),
        repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(47,79,74,.05) 48px);
    }
    .hero-grid {
      display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
      gap: 48px; align-items: center; min-height: calc(90vh - 48px);
    }
    .hero-copy { max-width: 42em; }
    .hero-brand { font-family: var(--font-serif); font-size: 14px; color: var(--brand); letter-spacing: .2em; margin-bottom: 18px; }
    .hero-title {
      font-size: clamp(36px, 4.6vw, 58px); font-weight: 600; line-height: 1.18;
      margin-bottom: 14px; max-width: 12em;
    }
    .hero-sub { font-size: 18px; color: var(--brand-deep); margin-bottom: 18px; font-weight: 500; }
    .hero-lead { color: var(--ink-soft); font-size: 15px; line-height: 1.85; margin-bottom: 22px; max-width: 36em; }
    .hero-points { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
    .hero-points li {
      border: 1px solid var(--line); min-height: 40px; display: inline-flex; align-items: center;
      padding: 0 12px; font-size: 13px; color: var(--ink);
    }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
    .hero-slide { display: none; opacity: 0; transform: translateY(16px); }
    .hero-slide.is-active { display: block; animation: fadeUp .45s var(--ease) forwards; }
    .hero-visual { position: relative; }
    .hero-card {
      border: 1px solid var(--line); background: var(--paper); overflow: hidden; position: relative;
    }
    .hero-card img {
      width: 100%; height: min(62vh, 560px); object-fit: cover;
      transform: scale(1.04); animation: kenburns 14s linear infinite alternate;
    }
    .hero-caption {
      display: flex; justify-content: space-between; gap: 12px; align-items: center;
      padding: 14px 16px; border-top: 1px solid var(--line); font-size: 13px;
    }
    .hero-caption strong { font-family: var(--font-serif); font-weight: 600; }
    .hero-controls {
      display: flex; align-items: center; gap: 18px; margin-top: 8px;
    }
    .progress-track { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
    .progress-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brand); }
    .hero-controls.is-playing .progress-bar { animation: progress 6.5s linear; }
    .slide-nums { display: flex; gap: 8px; }
    .slide-nums button {
      min-width: 44px; min-height: 44px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
      font-size: 13px; border-bottom: 1px solid transparent;
    }
    .slide-nums button.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
    .selling-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
    .selling-item {
      display: grid; grid-template-columns: 120px 1fr auto; gap: 28px; align-items: center;
      padding: 36px 8px; border-bottom: 1px solid var(--line); transition: background .28s var(--ease);
    }
    .selling-item:hover { background: rgba(47, 79, 74, .04); }
    .selling-no {
      font-family: var(--font-sans); font-size: 42px; color: var(--brand); font-weight: 500;
      font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1;
    }
    .selling-item h3 { font-size: 28px; margin-bottom: 8px; }
    .selling-item p { color: var(--ink-soft); margin: 0; max-width: 36em; font-size: 15px; }
    .selling-result {
      text-align: right; font-size: 13px; color: var(--brand-deep); border-left: 1px solid var(--line);
      padding-left: 24px; min-width: 220px;
    }
    .selling-result b { display: block; font-size: 20px; font-family: var(--font-serif); color: var(--ink); margin-bottom: 4px; }
    .intro-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
    .intro-photo { border: 1px solid var(--line); overflow: hidden; }
    .intro-photo img { width: 100%; height: 520px; object-fit: cover; display: block; }
    .intro-copy h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 18px; }
    .intro-copy p { color: var(--ink-soft); max-width: var(--read); }
    .intro-facts { display: grid; gap: 14px; margin-top: 28px; }
    .intro-facts li {
      display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: start;
      padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px;
    }
    .intro-facts b { color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }
    .scene-stage { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: stretch; }
    .scene-visual { border: 1px solid var(--line); overflow: hidden; background: var(--paper); position: relative; min-height: 420px; }
    .scene-visual img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
    .scene-sign {
      position: absolute; left: 16px; bottom: 16px; background: var(--paper);
      border: 1px solid var(--line); padding: 10px 14px; font-size: 13px;
    }
    .scene-tabs { display: flex; flex-direction: column; }
    .scene-tab {
      text-align: left; border-bottom: 1px solid var(--line); padding: 18px 8px 18px 0;
      min-height: 88px; color: var(--ink); width: 100%;
    }
    .scene-tab strong { display: block; font-family: var(--font-serif); font-size: 20px; margin-bottom: 6px; }
    .scene-tab span { color: var(--ink-soft); font-size: 14px; }
    .scene-tab.is-active { color: var(--brand-deep); }
    .scene-tab.is-active strong { box-shadow: inset 0 -2px 0 var(--brand); }
    .scene-panel { display: none; padding-top: 18px; }
    .scene-panel.is-active { display: block; animation: fadeUp .35s var(--ease) forwards; }
    .scene-panel ol { margin: 12px 0 16px; }
    .scene-panel li {
      display: grid; grid-template-columns: 28px 1fr; gap: 10px; margin-bottom: 10px;
      color: var(--ink-soft); font-size: 15px;
    }
    .scene-panel li i {
      font-style: normal; color: var(--brand); font-variant-numeric: tabular-nums; font-weight: 600;
    }
    .scene-result {
      border: 1px solid var(--line); padding: 14px 16px; font-size: 14px; background: var(--paper);
    }
    .adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .adv-card {
      border: 1px solid var(--line); padding: 28px 24px 22px; background: var(--paper);
      min-height: 260px; display: flex; flex-direction: column; transition: border-color .28s var(--ease), transform .28s var(--ease);
    }
    .adv-card:hover { border-color: var(--brand); transform: translateY(-3px); }
    .adv-card .no { font-size: 34px; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
    .adv-card h3 {
      font-size: 20px; margin: 12px 0 10px; position: relative; display: inline-block;
    }
    .adv-card:hover h3::after {
      content: ""; position: absolute; left: 0; bottom: -6px; width: 28px; height: 2px; background: var(--brand);
    }
    .adv-card p { color: var(--ink-soft); font-size: 15px; flex: 1; }
    .adv-rule { font-size: 12px; color: var(--brand-deep); border-top: 1px solid var(--line); padding-top: 12px; letter-spacing: .04em; }
    .sol-grid { display: grid; grid-template-columns: 1.7fr .9fr; gap: 20px; align-items: stretch; }
    .sol-stack { display: grid; gap: 20px; }
    .sol-card { border: 1px solid var(--line); background: var(--paper); overflow: hidden; display: grid; }
    .sol-card.large { min-height: 560px; grid-template-rows: 1.1fr auto; }
    .sol-card img { width: 100%; height: 100%; object-fit: cover; min-height: 180px; }
    .sol-body { padding: 22px 22px 24px; }
    .sol-body h3 { font-size: 24px; margin-bottom: 10px; }
    .sol-body p, .sol-body li { color: var(--ink-soft); font-size: 15px; }
    .sol-body ul { margin: 12px 0 18px; }
    .sol-body li { padding-left: 14px; position: relative; margin-bottom: 6px; }
    .sol-body li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 1px; background: var(--brand); }
    .cases { background: var(--dark); color: var(--on-dark); padding: var(--space-section) 0;
      background-image:
        linear-gradient(rgba(20,23,22,.92), rgba(20,23,22,.94)),
        repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(237,232,222,.06) 48px),
        repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(237,232,222,.06) 48px);
    }
    .cases h2, .cases .eyebrow { color: var(--on-dark); }
    .cases .eyebrow { color: #c9b79a; }
    .cases .eyebrow::before { background: #c9b79a; }
    .cases-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
    .cases-lead { font-size: clamp(32px, 4vw, 52px); max-width: 8em; }
    .case-row {
      border-top: 1px solid rgba(237,232,222,.18); padding: 22px 0;
      display: grid; grid-template-columns: 140px 1fr 160px; gap: 18px;
    }
    .case-row:last-child { border-bottom: 1px solid rgba(237,232,222,.18); }
    .case-row b { font-family: var(--font-serif); font-size: 18px; color: var(--on-dark); }
    .case-row p { margin: 0; color: rgba(237,232,222,.78); font-size: 14px; }
    .case-kpi { color: #c9b79a; font-variant-numeric: tabular-nums; font-size: 14px; }
    .compare-table { width: 100%; border: 1px solid var(--line); background: var(--paper); }
    .compare-table th, .compare-table td {
      text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px;
    }
    .compare-table th { background: var(--bg-alt); font-family: var(--font-serif); font-weight: 600; }
    .compare-table tr:last-child td { border-bottom: 0; }
    .compare-table td:first-child { color: var(--ink-soft); width: 46%; }
    .compare-table td:last-child { color: var(--ink); }
    .warn-map { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
    .timeline { position: relative; padding-left: 28px; }
    .timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
    .timeline li { position: relative; margin-bottom: 28px; }
    .timeline li::before {
      content: ""; position: absolute; left: -25px; top: 8px; width: 9px; height: 9px;
      border: 1px solid var(--brand); background: var(--bg); border-radius: 0;
    }
    .timeline h3 { font-size: 20px; margin-bottom: 8px; }
    .timeline p { color: var(--ink-soft); font-size: 15px; margin: 0; }
    .warn-board { border: 1px solid var(--line); background: var(--paper); padding: 28px; }
    .warn-board h3 { font-size: 22px; margin-bottom: 14px; }
    .warn-board ul { display: grid; gap: 12px; }
    .warn-board li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; font-size: 14px; color: var(--ink-soft); }
    .warn-board b { color: var(--brand); font-variant-numeric: tabular-nums; }
    .metrics { background: var(--bg-alt); padding: 56px 0; }
    .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
    .metric { border-right: 1px solid var(--line); padding-right: 16px; }
    .metric:last-child { border-right: 0; }
    .metric b {
      display: block; font-size: clamp(32px, 4vw, 48px); font-family: var(--font-sans);
      font-variant-numeric: tabular-nums; color: var(--accent); letter-spacing: -.04em; line-height: 1.1;
    }
    .metric span { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 14px; }
    .stories { display: grid; gap: 72px; }
    .story { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
    .story.reverse { grid-template-columns: .95fr 1.05fr; }
    .story.reverse .story-copy { order: 2; }
    .story-photo { border: 1px solid var(--line); overflow: hidden; }
    .story-photo img { width: 100%; height: 420px; object-fit: cover; }
    .story-copy h3 { font-size: 28px; margin: 10px 0 14px; }
    .story-copy p { color: var(--ink-soft); }
    .story-steps { margin-top: 18px; display: grid; gap: 10px; }
    .story-steps li { font-size: 14px; padding-left: 18px; position: relative; color: var(--ink); }
    .story-steps li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--brand); }
    .review-trust { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; color: var(--ink-soft); font-size: 12px; letter-spacing: .12em; }
    .review-trust span { border: 1px solid var(--line); min-height: 36px; display: inline-flex; align-items: center; padding: 0 12px; }
    .reviews { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }
    .review {
      border: 1px solid var(--line); background: var(--paper); padding: 28px 24px; min-height: 240px;
      display: flex; flex-direction: column; transition: border-color .28s var(--ease);
    }
    .review:hover { border-color: var(--brand); }
    .review p { flex: 1; font-size: 15px; color: var(--ink); }
    .review footer { font-size: 13px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 12px; }
    .news-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: minmax(180px, auto); gap: 18px; }
    .news-card { border: 1px solid var(--line); background: var(--paper); display: grid; grid-template-rows: 160px 1fr; overflow: hidden; }
    .news-card.wide { grid-column: 1 / 2; grid-row: 1 / 3; grid-template-rows: 240px 1fr; }
    .news-card img { width: 100%; height: 100%; object-fit: cover; }
    .news-body { padding: 18px 18px 20px; }
    .news-body time { display: block; font-size: 12px; color: var(--ink-soft); letter-spacing: .08em; margin-bottom: 8px; }
    .news-body h3 { font-size: 18px; margin-bottom: 8px; }
    .news-body p { font-size: 14px; color: var(--ink-soft); margin: 0; }
    .faq-list { border-top: 1px solid var(--line); }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-q {
      width: 100%; text-align: left; min-height: 64px; display: flex; justify-content: space-between; align-items: center;
      gap: 18px; padding: 18px 4px; font-size: 18px; font-family: var(--font-serif); color: var(--ink);
    }
    .faq-q .plus { width: 18px; height: 18px; position: relative; flex: none; }
    .faq-q .plus::before, .faq-q .plus::after {
      content: ""; position: absolute; background: var(--brand); transition: transform .28s var(--ease);
    }
    .faq-q .plus::before { left: 0; right: 0; top: 8px; height: 1px; }
    .faq-q .plus::after { top: 0; bottom: 0; left: 8px; width: 1px; }
    .faq-item.is-open .plus::after { transform: rotate(90deg); opacity: 0; }
    .faq-a { height: 0; overflow: hidden; transition: height .32s var(--ease); }
    .faq-a-inner { padding: 0 8px 22px 24px; color: var(--ink-soft); max-width: 42em; font-size: 15px; }
    .guarantee { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0; }
    .guarantee-row { display: grid; grid-template-columns: repeat(4, 1fr); }
    .g-item { padding: 28px 22px; border-right: 1px solid var(--line); min-height: 120px; }
    .g-item:last-child { border-right: 0; }
    .g-item h3 { font-size: 18px; margin-bottom: 8px; }
    .g-item p { margin: 0; font-size: 14px; color: var(--ink-soft); }
    .contact-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 64px; align-items: start; }
    .expect { margin: 24px 0 0; display: grid; gap: 12px; }
    .expect li { padding-left: 18px; position: relative; color: var(--ink-soft); }
    .expect li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--accent); }
    .contact-side { font-size: 14px; color: var(--ink-soft); margin-top: 22px; }
    .form {
      border: 1px solid var(--line); background: var(--paper); padding: 28px 26px 24px;
    }
    .form-row { margin-bottom: 16px; }
    .form label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--ink); }
    .form input, .form select, .form textarea {
      width: 100%; min-height: 46px; border: 0; border-bottom: 1px solid var(--line);
      background: transparent; color: var(--ink); padding: 8px 0; border-radius: 0;
    }
    .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-bottom-color: var(--brand); }
    .form .error { color: var(--danger); font-size: 12px; min-height: 18px; margin-top: 4px; }
    .form-success { display: none; padding: 18px; border: 1px solid var(--brand); color: var(--brand-deep); font-size: 14px; margin-bottom: 14px; }
    .form.is-ok .form-success { display: block; }
    .site-footer { background: #ece7dc; border-top: 1px solid var(--line); padding: 56px 0 28px; font-size: 13px; color: var(--ink-soft); }
    .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr .9fr; gap: 32px; margin-bottom: 36px; }
    .footer-brand { font-family: var(--font-serif); color: var(--ink); font-size: 20px; margin-bottom: 10px; }
    .footer-grid a { color: var(--ink-soft); display: inline-flex; min-height: 32px; align-items: center; }
    .footer-grid a:hover { color: var(--brand); }
    .footer-bottom { border-top: 1px solid var(--line); padding-top: 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .sticky-cta {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
      background: var(--brand-deep); color: var(--on-dark);
      transform: translateY(110%); transition: transform .3s var(--ease);
      padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    }
    .sticky-cta.is-show { transform: none; }
    .sticky-cta .container { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; }
    .sticky-cta p { margin: 0; font-size: 14px; }
    .sticky-cta a.tel { color: var(--on-dark); min-height: 44px; display: inline-flex; align-items: center; }
    .drawer {
      position: fixed; inset: 0; background: var(--bg); z-index: 90; display: none; padding: 24px;
    }
    .drawer.is-open { display: block; }
    .drawer a { display: flex; min-height: 52px; align-items: center; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 18px; }
    .drawer-close { min-width: 44px; min-height: 44px; border: 1px solid var(--line); float: right; }
    .modal {
      position: fixed; inset: 0; background: rgba(20,23,22,.55); z-index: 95; display: none; align-items: center; justify-content: center; padding: 24px;
    }
    .modal.is-open { display: flex; }
    .modal-box { background: var(--paper); border: 1px solid var(--line); max-width: 640px; width: 100%; padding: 28px; max-height: 80vh; overflow: auto; }
    .rank-list { border: 1px solid var(--line); background: var(--paper); }
    .rank-list li {
      display: grid; grid-template-columns: 48px 1fr 90px; gap: 12px; align-items: center;
      padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px;
    }
    .rank-list li:last-child { border-bottom: 0; }
    .rank-list b { color: var(--brand); font-variant-numeric: tabular-nums; }
    .quiz { display: grid; gap: 14px; }
    .quiz-q { border: 1px solid var(--line); background: var(--paper); padding: 18px; }
    .quiz-q h3 { font-size: 18px; margin-bottom: 10px; }
    .quiz-opts { display: flex; flex-wrap: wrap; gap: 8px; }
    .quiz-opts button {
      min-height: 44px; padding: 0 14px; border: 1px solid var(--line); color: var(--ink);
    }
    .quiz-opts button.is-on { border-color: var(--brand); color: var(--brand); }
    .quiz-result { display: none; margin-top: 8px; padding: 14px; border: 1px solid var(--brand); }
    .quiz-result.is-show { display: block; }
    @keyframes fadeUp { to { opacity: 1; transform: none; } }
    @keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.12); } }
    @keyframes progress { from { width: 0; } to { width: 100%; } }
    @media (max-width: 1440px) {
      .container { width: min(100% - 48px, 1180px); }
    }
    @media (max-width: 1024px) {
      :root { --space-section: 88px; }
      .header-main .container { grid-template-columns: 1fr auto; }
      .nav { display: none; }
      .nav-toggle { display: inline-block; }
      .hero-grid, .intro-grid, .scene-stage, .sol-grid, .cases-grid, .warn-map, .contact-grid, .story, .story.reverse { grid-template-columns: 1fr; }
      .story.reverse .story-copy { order: 0; }
      .adv-grid, .reviews, .news-grid, .metrics-grid, .footer-grid, .guarantee-row { grid-template-columns: 1fr 1fr; }
      .news-card.wide { grid-column: auto; grid-row: auto; }
      .selling-item { grid-template-columns: 80px 1fr; }
      .selling-result { grid-column: 2; text-align: left; border: 0; padding: 8px 0 0; min-width: 0; }
      .case-row { grid-template-columns: 1fr; }
      .hero-card img, .intro-photo img, .story-photo img { height: 360px; min-height: 280px; }
    }
    @media (max-width: 768px) {
      .header-top .trust-marks { display: none; }
      .hero { min-height: auto; padding-top: 24px; }
      .hero-title { font-size: 34px; }
      .adv-grid, .reviews, .news-grid, .metrics-grid, .footer-grid, .guarantee-row, .sol-grid { grid-template-columns: 1fr; }
      .metric { border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; }
      .compare-table thead { display: none; }
      .compare-table, .compare-table tbody, .compare-table tr, .compare-table td { display: block; width: 100%; }
      .compare-table td { border-bottom: 0; padding: 8px 16px; }
      .compare-table tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
      .compare-table td:first-child { color: var(--ink); font-weight: 600; }
      .sticky-cta .container { grid-template-columns: 1fr; text-align: center; }
      .g-item { border-right: 0; border-bottom: 1px solid var(--line); }
      .scene-tabs { display: flex; flex-direction: row; overflow-x: auto; gap: 0; }
      .scene-tab { min-width: 78%; flex: none; }
    }
    @media (max-width: 520px) {
      :root { --space-section: 64px; }
      .container { width: min(100% - 28px, var(--container)); }
      .hero-title { font-size: 32px; }
      .selling-item { grid-template-columns: 1fr; padding: 24px 0; }
      .selling-item h3 { font-size: 22px; }
      .btn { width: 100%; }
      .hero-actions .btn { width: auto; }
      .top-left { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
      .hero-card img { transform: none; }
      .hero-slide { opacity: 1; transform: none; }
    }