/* FolderOS: existing brand, clearer first visit and mobile layout. */
:root { --folder-ink:#82500c; }
body { font-size:16px; }
a,button,summary { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; border:0; }
:focus-visible { outline:3px solid #1f5b8c; outline-offset:5px; }
section[id], main { scroll-margin-top:130px; }
.skip-link { position:fixed;left:16px;top:-100px;z-index:100;background:white;color:#163f63;padding:12px 20px;border-radius:8px; }
.skip-link:focus { top:12px; }
header .wrap { max-width:1180px; }
.nav nav { display:flex;align-items:center;gap:22px; }
.nav nav a { white-space:nowrap; }
.hero { background:#f6f7f5;padding:64px 0 60px;text-align:left;border-bottom:1px solid var(--line); }
.hero-layout { max-width:1180px;display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center; }
.hero .badge { font-size:12px;margin-bottom:24px;padding:6px 12px;background:transparent;box-shadow:none; }
.hero h1 { font-size:clamp(30px,3.1vw,46px);line-height:1.55;letter-spacing:-.035em; }
.hero h1 span { color:#99600e; }
.hero p.lead { margin:22px 0 0;font-size:20px;line-height:1.8; }
.hero-description { color:#536174;font-size:16px;margin-top:16px;max-width:540px; }
.hero .cta { justify-content:flex-start;margin-top:28px;gap:12px; }
.hero .btn { font-size:15px;padding:13px 21px; }
.hero-points { display:flex;flex-wrap:wrap;gap:7px 18px;list-style:none;margin-top:24px;color:#536174;font-size:13px; }
.hero-points li::before { content:'✓';margin-right:7px;color:#82500c;font-weight:800; }
.hero .maker { font-size:12px!important;max-width:510px; }
/* Microsoft Store の入口（2026-10-01）。主役は「相談」のまま、1人で試す人のための1行 */
.store-line { margin-top:14px;font-size:14px;color:#536174; }
.store-line a { color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px; }
.store-line span { display:inline-block;margin-left:10px;font-size:12px;color:#7a8696; }
.store-line.center { text-align:center;margin-top:18px; }
#contact .store-line { color:inherit;opacity:.9; }
#contact .store-line a { color:inherit; }
.hero-visual { position:relative;min-width:0;height:530px;overflow:hidden;border-radius:4px 48px 4px 4px;background:#394044;box-shadow:0 24px 50px #2633401a; }
.hero-visual img { width:100%;height:100%;object-fit:cover;object-position:46% center;display:block; }
.hero-visual::after { content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(15,24,30,.86));pointer-events:none; }
.hero-visual figcaption { position:absolute;left:30px;right:24px;bottom:52px;z-index:1;color:white; }
.hero-visual figcaption strong { display:block;font-size:30px;line-height:1.6;margin:14px 0 10px;letter-spacing:.03em; }
.hero-visual figcaption>span:last-child { font-size:14px; }
.scene-label { font-size:12px;letter-spacing:.1em;color:#f7d399; }
.image-note { position:absolute;bottom:14px;left:30px;z-index:1;color:#e2e8ef;font-size:12px; }
section:not(.hero) h2 { line-height:1.5; }
.card { box-shadow:none; }
.card p { font-size:16px; }
.start-steps { display:grid;grid-template-columns:repeat(3,1fr);list-style:none;gap:30px;margin-top:36px; }
.start-steps li { border-top:1px solid #d2dbe4;padding-top:22px; }
.step-number { font-size:32px;font-weight:800;color:#9a6617;line-height:1; }
.start-steps h3 { font-size:18px;margin:18px 0 10px; }
.start-steps p { color:#64748b; }
.faq-layout { display:grid;grid-template-columns:.8fr 1.2fr;gap:50px; }
.faq-layout h2 { font-size:30px; }
.faq-list { border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line);padding:21px 0; }
.faq-list summary { cursor:pointer;font-size:16px;font-weight:700;padding-right:12px; }
.faq-list summary::marker { color:#99600e; }
.faq-list details p { margin:14px 0 0;color:#64748b;font-size:16px; }
.faq-list details[open] summary { color:#163f63; }
#demo .btn:disabled { cursor:wait; }
#demo-result table { min-width:580px; }
.fd-kpi .vs { display:inline;margin:0; }
#how .fd-dept .ct,#how .fd-dept.pick .go,#how .fd-kpi .lb { font-size:12px; }
#fd-stage:empty::before { content:'会社のフォルダを読み、部門ごとの状況を確認する操作デモです。JavaScriptを有効にすると体験できます。';color:#64748b; }
@media (max-width:980px) { .hero-layout { gap:28px;grid-template-columns:1.1fr 1fr; }.hero h1 { font-size:32px; }.hero-visual { height:550px; }.hero .badge { font-size:12px; }.nav nav { gap:14px; } }
@media (max-width:760px) { .nav { height:auto;min-height:66px;flex-wrap:wrap;gap:10px;padding-top:12px;padding-bottom:12px; }.nav nav { flex-wrap:wrap;gap:10px 18px; }.nav nav a { font-size:14px; }.hero { padding:38px 0 44px; }.hero-layout { grid-template-columns:1fr;gap:30px; }.hero h1 { font-size:clamp(28px,5.5vw,40px); }.hero .badge { font-size:12px;line-height:1.7; }.hero-visual { height:330px;border-radius:4px 36px 4px 4px; }.hero-visual img { object-position:center 48%; }.hero-visual figcaption strong { font-size:26px; }.hero .cta { margin-top:24px; }.start-steps { grid-template-columns:1fr;gap:24px; }.start-steps li { display:grid;grid-template-columns:52px 1fr;column-gap:16px; }.start-steps h3 { margin:0;align-self:center; }.start-steps p { grid-column:2;margin-top:10px; }.faq-layout { grid-template-columns:1fr;gap:28px; }.faq-layout h2 br { display:none; }.faq-layout h2 { font-size:26px; }.brief { padding:20px 16px; }.fdemo-stage { padding:20px 14px; }.wrap { padding-left:20px;padding-right:20px; }.nav { padding-top:12px;padding-bottom:12px; } }
@media (max-width:400px) { .nav nav { gap:8px 12px;width:100%; }.nav .btn.sm { padding:9px 12px; }.hero .cta { flex-direction:column;align-items:stretch;text-align:center; }.hero-points { gap:6px 12px; }.hero-visual figcaption { left:22px; }.image-note { left:22px; }#how .fd-depts { grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important; }*,*::before,*::after { animation:none!important;transition:none!important; } }
@media (max-width:760px) {
  .nav { display:grid;grid-template-columns:max-content max-content minmax(0,1fr);gap:4px 8px; }
  .nav .logo { grid-column:1 / 3;grid-row:1; }
  .nav nav { display:contents; }
  .nav nav a { display:flex;align-items:center;min-height:36px; }
  .nav nav .btn.sm { grid-column:3;grid-row:1;justify-self:end;justify-content:center;min-height:44px;padding:9px 12px; }
  .hero p.lead { font-size:18px;text-wrap:balance; }
  .hero-points { font-size:14px; }
}