/* ========================================
   RACS Service Site — Shared Stylesheet
   ======================================== */

/* ===== RESET & VARIABLES ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Brand */
  --brand:#2E6B27;
  --brand-dark:#1F5420;
  --brand-light:#4A9A40;
  --brand-bg:#EAF5E8;
  /* Accent */
  --gold:#B5956A;
  --gold-l:#D4C0A4;
  --gold-bg:#F5EDE0;
  --yellow:#F5C842;
  /* Corporate Identity */
  --ci-dark:#1E1B18;
  --ci-gold:#B5956A;
  --ci-gold-sub:#D4C0A4;
  --ci-light:#FDFAF7;
  /* Text (ci-dark derivatives) */
  --ink:#1E1B18;
  --ink-2:rgba(30,27,24,0.75);
  --ink-3:rgba(30,27,24,0.55);
  --ink-4:rgba(30,27,24,0.38);
  --ink-5:rgba(30,27,24,0.18);
  /* Background (ci-light derivatives) */
  --bg:#FDFAF7;
  --bg-2:#F7F4EE;
  --bg-3:#F0EBE2;
  /* Border (gold-based) */
  --border:rgba(181,149,106,0.22);
  --border-2:rgba(181,149,106,0.12);
  /* Typography */
  --f-head:'Noto Sans JP','Inter',-apple-system,sans-serif;
  --f-body:'Noto Serif JP','Inter',-apple-system,serif;
  /* Radii */
  --r-sm:8px;
  --r-md:8px;
  --r-lg:16px;
  --r-xl:24px;
  --r-full:100px;
  /* Shadows */
  --sh-1:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06);
  --sh-2:0 4px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --sh-3:0 12px 40px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
  --sh-brand:0 4px 20px rgba(46,107,39,.18);
  /* Font Sizes (4-step scale) */
  --fs-lg:1.25rem;
  --fs-md:1.0625rem;
  --fs-sm:1rem;
  --fs-xs:0.875rem;
}

/* ===== ACCESSIBILITY: skip-link (WCAG 2.1) ===== */
.skip-link{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip-link:focus{
  width:auto;
  height:auto;
  clip:auto;
  clip-path:none;
  white-space:normal;
  top:0;
  left:0;
  z-index:9999;
  padding:8px 16px;
  background:var(--ci-dark);
  color:var(--ci-light);
  text-decoration:none;
  border-radius:0 0 4px 0;
  outline:2px solid var(--ci-gold);
  outline-offset:2px;
}

/* ===== BASE ===== */
html{font-size:var(--fs-md);scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--ink);background:var(--bg);line-height:1.7;font-size:var(--fs-md);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5,h6,
nav,nav *,.nav-link,.nav-cta,.nav-dl,
.btn,.pcta,.pcta-g,.pcta-o,
.sec-label,.sec-h,.breadcrumb,
.cta-h,.cta-sub,.cta-patent,
.price-tier,.price-name,.price-badge,.price-amount,.price-init-l,.price-init-r,.price-savings p,.price-note,
.footer-links a,.footer-copy,
.comp-hc,.comp-pb,.comp-ps,.comp-po,
.case-type,.case-met-v,
.flow-day{font-family:var(--f-head)}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}

/* ===== LAYOUT ===== */
.w{max-width:1140px;margin:0 auto;padding:0 56px}
section{padding:100px 0}

/* ===== NAV ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;background:rgba(253,250,247,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-2);display:flex;align-items:center;justify-content:space-between;padding:0 48px;transition: box-shadow .3s}
nav.scrolled{box-shadow:var(--sh-1)}
.nav-logo{height:44px;width:auto;object-fit:contain}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-link{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);letter-spacing:.02em;transition:color .2s;position:relative;padding:4px 0}
.nav-link:hover,.nav-link.active{color:var(--brand)}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--brand);border-radius:1px;transform:scaleX(0);transition:transform .2s}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-cta-wrap{display:flex;gap:12px;align-items:center}
.nav-cta-wrap .nav-dl,.nav-cta-wrap .nav-cta{min-width:160px;text-align:center}
.nav-dl{font-size:var(--fs-xs);font-weight:600;color:var(--ci-light);background:var(--gold);padding:0 24px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:0 0 var(--r-md) var(--r-md);transition: background .3s, transform .3s;transform:translateY(-18px)}
.nav-dl:hover{background:var(--gold-l);transform:translateY(0)}
.nav-cta{font-size:var(--fs-xs);font-weight:700;background:var(--brand);color:var(--ci-light);padding:0 24px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:0 0 var(--r-md) var(--r-md);transition: background .3s, transform .3s;box-shadow:var(--sh-brand);transform:translateY(-18px)}
.nav-cta:hover{background:var(--brand-light);transform:translateY(0)}
.nav-ham{display:none}
.mob-menu{display:none}

/* ===== BUTTONS ===== */
.btn{font-family:var(--f-head);font-size:var(--fs-sm);font-weight:700;padding:14px 32px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;gap:8px;transition: background .25s, color .25s, transform .25s, box-shadow .25s, border-color .25s;letter-spacing:.02em;white-space:nowrap;cursor:pointer;border:none}
.btn-g{background:var(--brand);color:var(--ci-light);box-shadow:0 4px 16px rgba(46,107,39,.25)}
.btn-g:hover{background:var(--brand-light);transform:translateY(-2px);box-shadow:0 8px 28px rgba(46,107,39,.22)}
.btn-o{background:var(--bg);color:var(--ink-2);border:1.5px solid var(--brand);box-shadow:0 4px 16px rgba(30,27,24,.1)}
.btn-o:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.btn svg{width:16px;height:16px}

/* ===== SECTION SHARED ===== */
.sec-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);margin-bottom:8px}
.sec-h{font-size:clamp(26px,3.2vw,38px);font-weight:700;line-height:1.35;color:var(--ink);margin-bottom:16px;letter-spacing:-.01em}
.sec-h em{color:var(--brand);font-style:normal}
.sec-sub{font-size:var(--fs-md);color:var(--ink-3);line-height:1.8;max-width:600px}
.sec-top{margin-bottom:56px}
.sec-top.center{text-align:center}
.sec-top.center .sec-sub{margin:0 auto}

/* ===== PAGE HEADER ===== */
.page-header{padding:120px 0 60px;background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);text-align:center}
.page-header .sec-h{margin-bottom:12px}
.page-header .sec-sub{margin:0 auto}
.breadcrumb{font-size:var(--fs-xs);color:var(--ink-4);margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:6px}
.breadcrumb a{color:var(--ink-4);transition:color .2s}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb svg{width:12px;height:12px;color:var(--ink-5)}

/* ===== CTA BANNER ===== */
.cta-banner{padding:72px 0;background:var(--bg);border-top:1px solid var(--border);text-align:center}
.cta-banner .cta-h{font-size:clamp(22px,2.8vw,30px);font-weight:700;line-height:1.4;margin-bottom:8px}
.cta-banner .cta-h em{color:var(--brand);font-style:normal}
.cta-banner .cta-sub{font-size:var(--fs-md);color:var(--ink-3);margin-bottom:28px}
.cta-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;max-width:560px;margin-left:auto;margin-right:auto}
.cta-btns .btn{white-space:nowrap;width:100%}
.cta-patent{font-size:var(--fs-xs);color:var(--ink-4);margin-top:16px;letter-spacing:.06em}

/* ===== FOOTER ===== */
footer{background:var(--ink);padding:32px 48px}
.footer-inner{max-width:1140px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-links{display:flex;gap:24px}
.footer-links a{font-size:var(--fs-xs);color:rgba(253,250,247,.5);transition:color .2s}
.footer-links a:hover{color:rgba(253,250,247,.8)}
.footer-copy{font-size:var(--fs-xs);color:rgba(253,250,247,.35);letter-spacing:.04em}
.footer-copy a{color:inherit;text-decoration:underline;opacity:.7}

/* ===== AI FAQ POPUP ===== */
.fu{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.25,.8,.25,1),transform .6s cubic-bezier(.25,.8,.25,1)}
.fu.on{opacity:1;transform:translateY(0)}
.fu-d1{transition-delay:.1s}
.fu-d2{transition-delay:.2s}
.fu-d3{transition-delay:.3s}

/* ===== Subsidy banner（補助金特設サイトへの控えめCTA：複数ページで共用） ===== */
.subsidy-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;padding:18px 24px;background:var(--brand-bg);border:1px solid var(--border);border-left:4px solid var(--brand);border-radius:var(--r-md);color:var(--ink);transition: border-color .25s, box-shadow .25s, transform .25s}
.subsidy-banner:hover{border-color:var(--brand);box-shadow:var(--sh-1);transform:translateX(2px)}
.subsidy-banner-l{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.subsidy-banner-tag{font-family:var(--f-head);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;background:var(--brand);color:var(--ci-light);padding:4px 10px;border-radius:var(--r-sm)}
.subsidy-banner-t{font-family:var(--f-head);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.subsidy-banner-arrow{width:20px;height:20px;color:var(--brand);flex-shrink:0}

/* ===== RESPONSIVE — TABLET ===== */
@media(max-width:1024px){
  .w{padding:0 32px}
  nav{padding:0 24px}
  section{padding:80px 0}
}

/* ===== RESPONSIVE — MOBILE ===== */
@media(max-width:768px){
  html{font-size:14px}
  nav{padding:0 16px;height:56px}
  .nav-logo{height:42px}
  .nav-links{display:none}
  .nav-cta-wrap .nav-dl{display:none}
  /* Hamburger */
  .nav-ham{display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none;padding:6px;z-index:200;width:40px;height:40px}
  .nav-ham .ham-icon{width:28px;height:auto;display:block}
  .nav-ham .ham-close{display:none;width:22px;height:22px}
  .nav-ham.open .ham-icon{display:none}
  .nav-ham.open .ham-close{display:block}
  /* Mobile menu */
  .mob-menu{display:none;position:fixed;top:56px;left:0;right:0;bottom:0;background:var(--bg);z-index:99;flex-direction:column;padding:32px 20px}
  .mob-menu.open{display:flex}
  .mob-menu a{font-family:var(--f-head);font-size:var(--fs-lg);font-weight:600;color:var(--ink);padding:16px 0;border-bottom:1px solid var(--border-2)}
  .mob-menu a:last-child{border:none}
  .mob-menu .mob-cta{margin-top:24px;display:grid;gap:12px}
  .mob-menu .mob-cta a{font-size:var(--fs-sm);padding:14px;border-radius:var(--r-md);text-align:center;border:none}
  .mob-menu .mob-cta .btn-g{background:var(--brand);color:var(--ci-light)}
  .mob-menu .mob-cta .btn-o{background:var(--bg);color:var(--ink-2);border:1.5px solid var(--brand)}
  /* Layout */
  section{padding:56px 0}
  .w{padding:0 20px}
  .page-header{padding:96px 0 40px}
  .cta-btns{grid-template-columns:1fr;max-width:320px}
  footer{padding:24px 20px}
  .footer-inner{flex-direction:column;text-align:center}
  .footer-links{flex-wrap:wrap;justify-content:center}
  /* Subsidy banner mobile */
  .subsidy-banner{padding:14px 16px}
  .subsidy-banner-t{font-size:var(--fs-xs)}
}

/* ===== NAV HERO THEME (index.html) ===== */
nav.nav--hero{background:transparent;border-bottom:1px solid rgba(253,250,247,.08);backdrop-filter:blur(16px)}
.nav--hero .nav-link{color:rgba(253,250,247,.6)}
.nav--hero .nav-logo-g{display:none}
.nav--hero .nav-logo-w{display:block}
.nav--hero .nav-cta{background:rgba(253,250,247,.1);border:1.5px solid rgba(253,250,247,.2);box-shadow:none}
.nav--hero .ham-icon-w{display:block}
.nav--hero .ham-icon-g{display:none}
.nav--hero .nav-ham .ham-close{color:rgba(253,250,247,.8)}
nav.scrolled .nav-logo-w{display:none}
nav.scrolled .nav-logo-g{display:block}
nav.scrolled .ham-icon-w{display:none}
nav.scrolled .ham-icon-g{display:block}

/* Default: green logo shown, white hidden */
.nav-logo-w{display:none}

/* ===== SECTION BG ALT ===== */
.sec-bg-alt{background:var(--bg-2)}

/* ===== INLINE LINK (v9: replaces inline style="color:var(--brand);text-decoration:underline") ===== */
.inline-link{color:var(--brand);text-decoration:underline}

/* ===== HONEYPOT (v10: racs配下全HTMLで利用可能な共通クラス) ===== */
.honeypot{position:absolute;left:-9999px}

/* ===== FLOW STEP (C-16: pricing/partner 共通化、定義一致のためstyle.cssへ集約) ===== */
.flow-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px;position:relative}

/* ══════════════════════════════
   ACCESSIBILITY: focus-visible（v20d）
   ══════════════════════════════ */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
.nav-ham:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
.nav-ham:focus:not(:focus-visible) {
  outline: none;
}

/* ══════════════════════════════
   ACCESSIBILITY: prefers-reduced-motion (C-13)
   OS設定で「動きを減らす」が有効な場合、transition/animationを最小化
   ══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* 無限ループ系・スクロール系のみ停止（穏やかな単発アニメは維持） */
  .aifaq-btn-dot,
  .aifaq-typing span {
    animation: none !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}