/* 合同会社HLNパートナーズ コーポレートサイト v2（2026-11-07）。Web フォントは読まない（端末の標準書体）。 */

:root {
  --bg: #08090a;
  --bg-2: #0f1011;
  --bg-3: #161718;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .13);
  --text: #f7f8f8;
  --text-2: #d0d6e0;
  --muted: #9ba1aa;
  --dim: #7c8088;
  --btn: #e5e5e6;
  --ok: #4cb782;          /* 完了 */
  --run: #8fa6ff;         /* 実行中 */
  --human: #f2b84b;       /* 人の承認（サイト全体でこの色だけを「人が判断する所」に使う） */
  --radius: 12px;
  --wrap: 1200px;
  --pad: 32px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.8; letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; font-feature-settings: "palt" 1;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--bg); padding: 8px 12px; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--run); outline-offset: 2px; border-radius: 4px; }

/* ---------- 下書きの帯（公開時に消す） ---------- */
.draft { color: var(--human); font-size: 12px; margin-top: 40px; }
.show-sp { display: none; }
.tbd { color: var(--human); background: rgba(242, 184, 75, .1); border: 1px dashed rgba(242, 184, 75, .45); border-radius: 4px; padding: 0 6px; font-size: .86em; white-space: nowrap; }

/* ---------- ヘッダー ---------- */
.header { position: sticky; top: 0; z-index: 50; background: rgba(8, 9, 10, .72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
.header-in { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.brand-mark { width: 22px; height: 22px; flex: none; }
.brand small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: .02em; line-height: 1.2; }
.brand-txt { line-height: 1.15; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { font-size: 13px; color: var(--muted); padding: 6px 12px; border-radius: 999px; transition: color .15s, background .15s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, .05); }
.header .btn { margin-left: 8px; }
.menu-btn { display: none; margin-left: 4px; width: 44px; height: 44px; border: 0; background: none; color: var(--text); cursor: pointer; border-radius: 8px; }
.menu-btn span { display: block; width: 18px; height: 1.5px; background: currentColor; margin: 4px auto; transition: transform .2s; }
.sheet { display: none; }

/* ---------- ボタン ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--btn); color: var(--bg); border: 1px solid var(--btn); transition: background .15s; white-space: nowrap; }
.btn:hover { background: #fff; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn-ghost { background: rgba(255, 255, 255, .04); color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, .09); }
.more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); margin-top: 20px; }
.more::after { content: "→"; transition: transform .15s; }
.more:hover { color: var(--text); }
.more:hover::after { transform: translateX(3px); }

/* ---------- 最初の画面 ---------- */
.hero { padding: 120px 0 96px; overflow: hidden; }
.hero h1 { font-size: 56px; line-height: 1.16; letter-spacing: -.025em; max-width: 13.5em; }
.hero h1 .l { display: block; }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 28px; }
.hero-sub { color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 34em; }
.hero-cta { display: flex; align-items: center; gap: 20px; flex: none; }
.hero-cta a.text { font-size: 14px; color: var(--text-2); }
.hero-cta a.text:hover { color: var(--text); }

/* 製品画面（HTML で描いた見本） */
.app-wrap { position: relative; margin-top: 10px; }
.app-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(rgba(8, 9, 10, 0), var(--bg)); pointer-events: none; }
.app { display: grid; grid-template-columns: 210px 1fr 300px; min-width: 980px; height: 470px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px 14px 0 0; border-bottom: 0; overflow: hidden; font-size: 13px; line-height: 1.5; box-shadow: 0 -20px 80px rgba(143, 166, 255, .05); }
.app-side { border-right: 1px solid var(--line); padding: 14px 10px; color: var(--muted); }
.app-ws { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; padding: 4px 8px 14px; }
.app-ws i { width: 18px; height: 18px; border-radius: 5px; background: #2a2c31; display: grid; place-items: center; font-style: normal; font-size: 10px; }
.app-side p { font-size: 11px; color: var(--dim); padding: 14px 8px 6px; }
.app-side li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; }
.app-side li.on { background: rgba(255, 255, 255, .06); color: var(--text); }
.app-side li b { margin-left: auto; font-weight: 500; font-size: 11px; color: var(--human); }
.ico { width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 4px; opacity: .8; flex: none; }
.ico.c { border-radius: 50%; }
.app-main { padding: 18px 26px; overflow: hidden; }
.app-crumb { color: var(--dim); font-size: 12px; display: flex; gap: 8px; align-items: center; }
.app-crumb em { font-style: normal; font-size: 10px; border: 1px solid var(--line-2); color: var(--muted); padding: 1px 6px; border-radius: 4px; }
.app-main h3 { font-size: 18px; letter-spacing: -.01em; margin: 14px 0 4px; color: var(--text); }
.app-main .desc { color: var(--muted); font-size: 13px; }
.steps { margin-top: 16px; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.steps code { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.st { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.st.ok::before { background: var(--ok); }
.st.run { color: var(--run); }
.st.run::before { background: var(--run); box-shadow: 0 0 0 0 rgba(143, 166, 255, .6); animation: pulse 1.8s infinite; }
.st.human { color: var(--human); }
.st.human::before { background: var(--human); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(143, 166, 255, .55); } 70% { box-shadow: 0 0 0 6px rgba(143, 166, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(143, 166, 255, 0); } }
.app-panel { border-left: 1px solid var(--line); padding: 18px; background: rgba(255, 255, 255, .012); }
.app-panel h4 { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
.review { background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px; }
.review .who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--human); margin-bottom: 8px; }
.review .who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--human); }
.review p { color: var(--text-2); font-size: 12.5px; }
.review dl { margin: 12px 0 0; font-size: 12px; }
.review dl div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.review dt { color: var(--dim); }
.review dd { margin: 0; color: var(--text-2); }
.review .acts { display: flex; gap: 8px; margin-top: 12px; }
.review .acts span { flex: 1; text-align: center; font-size: 12px; padding: 6px 0; border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted); }
.review .acts span.p { background: var(--btn); color: var(--bg); border-color: var(--btn); font-weight: 600; }
.log { margin-top: 14px; font-size: 12px; color: var(--dim); }
.log li { padding: 4px 0; }
.log b { color: var(--muted); font-weight: 500; }
.sample-tag { margin-top: 64px; font-size: 12px; color: var(--dim); text-align: right; }
.nw { display: inline-block; }

/* 使う技術の列 */
.stack { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 0 0; flex-wrap: wrap; }
.stack li { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text-2); opacity: .85; }
.stack-note { font-size: 12px; color: var(--dim); margin-top: 16px; }

/* ---------- 区画 ---------- */
.sec { padding: 128px 0; border-top: 1px solid var(--line); }
.sec.first { border-top: 0; }
.statement { font-size: 36px; line-height: 1.45; letter-spacing: -.02em; font-weight: 600; max-width: 30em; }
.statement span { color: var(--muted); }
.figs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 88px; border-top: 1px solid var(--line); }
.fig { padding: 28px 28px 0 0; }
.fig + .fig { padding-left: 28px; border-left: 1px solid var(--line); }
.fig svg { width: 100%; max-width: 220px; height: 150px; margin: 8px 0 28px; color: var(--muted); }
.fig h3 { font-size: 16px; letter-spacing: -.01em; }
.fig p { color: var(--muted); font-size: 14px; margin-top: 6px; line-height: 1.7; }
.fig .no { font-family: var(--mono); font-size: 12px; color: var(--dim); }

.feat-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.feat-head h2 { font-size: 44px; line-height: 1.18; letter-spacing: -.025em; }
.feat-head h2 .l { display: block; }
.feat-head p { color: var(--muted); font-size: 15px; max-width: 32em; }
.feat-head p strong { color: var(--text); font-weight: 600; }
.visual { position: relative; margin-top: 64px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 13px; line-height: 1.5; }
.feat-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 48px; margin-top: 36px; font-size: 13px; }
.feat-foot > p:first-child { color: var(--dim); }
.feat-foot ul { display: flex; flex-wrap: wrap; gap: 6px 0; }
.feat-foot li { color: var(--text-2); }
.feat-foot li + li::before { content: "／"; color: var(--dim); margin: 0 10px; }
.feat-foot .ff-also { grid-column: 2; color: var(--muted); }

/* 見本の画面：LP の一覧 */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 11px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th { font-weight: 500; color: var(--dim); font-size: 12px; }
.tbl td { color: var(--text-2); }
.tbl td.m { color: var(--muted); }
.tbl tr:last-child td { border-bottom: 0; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.chip.ok { color: var(--ok); border-color: rgba(76, 183, 130, .35); }
.chip.run { color: var(--run); border-color: rgba(143, 166, 255, .35); }
.chip.human { color: var(--human); border-color: rgba(242, 184, 75, .4); }
.vbar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.vbar b { color: var(--text); font-weight: 600; font-size: 13px; white-space: nowrap; }
.vbar .chip { white-space: nowrap; }
.vbar .sp { margin-left: auto; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 見本の画面：バナーのサイズ */
.sizes { display: flex; flex-wrap: wrap; gap: 18px; padding: 24px 18px; align-items: flex-end; }
.sizes { gap: 28px; padding: 28px 22px 22px; }
.bn { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bn i { display: block; border: 1px solid var(--line-2); border-radius: 3px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 6px, rgba(255, 255, 255, 0) 6px 12px); }
.bn figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.bn figcaption .st { font-family: var(--font); }
.checks { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.checks div { padding: 14px 18px; }
.checks div + div { border-left: 1px solid var(--line); }
.checks dt { color: var(--dim); font-size: 12px; }
.checks dd { margin: 4px 0 0; color: var(--text-2); }

/* 見本の画面：運用のリズム */
.cal { display: grid; grid-template-columns: repeat(3, 1fr); }
.cal > div { padding: 18px; }
.cal > div + div { border-left: 1px solid var(--line); }
.cal h4 { font-size: 12px; color: var(--muted); font-weight: 500; display: flex; justify-content: space-between; }
.cal li { margin-top: 10px; padding: 10px 12px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.cal li .st { margin-left: auto; }

/* 見本の画面：AI 検索 */
.tree { display: grid; grid-template-columns: 1.1fr 1fr; }
.tree > div { padding: 20px 22px; }
.tree > div + div { border-left: 1px solid var(--line); }
.tree h4 { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 12px; }
.node { padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); display: inline-block; background: var(--bg-3); }
.kids { margin: 10px 0 0 18px; border-left: 1px solid var(--line-2); padding-left: 16px; }
.kids li { position: relative; padding: 5px 0; color: var(--text-2); }
.kids li::before { content: ""; position: absolute; left: -16px; top: 50%; width: 10px; border-top: 1px solid var(--line-2); }
.kids li.m { color: var(--dim); }
.chk li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.chk li:last-child { border-bottom: 0; }
.chk li .st { margin-left: auto; flex: none; }

/* 進め方（横一列の線と点） */
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 1px solid var(--line-2); }
.timeline li { position: relative; padding: 32px 28px 0 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--muted); }
.timeline li:first-child::before { background: var(--text); border-color: var(--text); }
.timeline h3 { font-size: 16px; }
.timeline p { color: var(--muted); font-size: 14px; margin-top: 6px; line-height: 1.7; }
.timeline .out { color: var(--dim); font-size: 12px; margin-top: 10px; }

/* 実績のカード */
.cards { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; margin-top: 64px; }
.card { border-radius: var(--radius); padding: 28px; min-height: 300px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--bg-2); }
.card .ind { font-size: 13px; color: var(--muted); }
.card h3 { font-size: 22px; line-height: 1.45; letter-spacing: -.015em; margin-top: 10px; }
.card ul { margin-top: auto; padding-top: 24px; font-size: 13px; color: var(--muted); }
.card li { padding: 6px 0; border-top: 1px solid var(--line); }
.card.light { background: linear-gradient(160deg, #eef0f6 0%, #d9dcea 100%); border-color: transparent; color: #121316; }
.card.light .ind, .card.light ul { color: #4b4f58; }
.card.light li { border-color: rgba(0, 0, 0, .1); }
.cards-note { display: flex; justify-content: space-between; gap: 16px; margin-top: 20px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }

/* 締めの相談 */
.cta { text-align: center; padding: 160px 0 150px; border-top: 1px solid var(--line); }
.cta h2 { font-size: 40px; line-height: 1.3; letter-spacing: -.025em; }
.cta p { color: var(--muted); margin: 18px auto 0; max-width: 30em; }
.cta .acts { display: flex; justify-content: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.cta .mail { font-size: 13px; color: var(--dim); margin-top: 18px; }
.cta .mail a { color: var(--muted); border-bottom: 1px solid var(--line-2); }

/* ---------- フッター ---------- */
.footer { border-top: 1px solid var(--line); padding: 64px 0 48px; font-size: 13px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer h3 { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.footer li { padding: 3px 0; }
.footer li a { color: var(--muted); }
.footer li a:hover { color: var(--text); }
.footer-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; color: var(--dim); font-size: 12px; flex-wrap: wrap; }

/* ---------- 下層ページ ---------- */
.page-head { padding: 112px 0 72px; }
.page-head .eyebrow { font-size: 13px; color: var(--muted); }
.page-head h1 { font-size: 52px; line-height: 1.18; letter-spacing: -.025em; margin-top: 12px; }
.page-head p { color: var(--muted); max-width: 34em; margin-top: 20px; }
.toc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; }
.toc a { font-size: 13px; color: var(--text-2); border: 1px solid var(--line-2); padding: 6px 14px; border-radius: 999px; }
.toc a:hover { background: rgba(255, 255, 255, .05); }
.split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; }
.split h2 { font-size: 32px; line-height: 1.3; letter-spacing: -.02em; }
.split .lead { color: var(--muted); margin-top: 14px; font-size: 14px; }
.body p + p { margin-top: 14px; }
.body p { color: var(--text-2); }
.kv { margin-top: 28px; border-top: 1px solid var(--line); }
.kv div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd { margin: 0; color: var(--text-2); }
.pipeline { margin-top: 8px; border-top: 1px solid var(--line); }
.pipeline li { display: grid; grid-template-columns: 56px 12em 1fr auto; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pipeline code { font-family: var(--mono); color: var(--dim); font-size: 13px; }
.pipeline h3 { font-size: 16px; }
.pipeline p { color: var(--muted); font-size: 14px; }
.pipeline li.human h3 { color: var(--human); }
.rules li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.rules li:first-child { border-top: 1px solid var(--line); }
.rules .no { font-family: var(--mono); color: var(--dim); font-size: 13px; padding-top: 2px; }
.rules h3 { font-size: 17px; }
.rules p { color: var(--muted); margin-top: 6px; font-size: 14px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 32px 20px 0; position: relative; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; color: var(--muted); font-weight: 400; font-size: 18px; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--muted); padding: 0 0 20px; }
.svc-list li { display: grid; grid-template-columns: 1fr auto; padding: 16px 0; border-bottom: 1px solid var(--line); gap: 16px; }
.svc-list li:first-child { border-top: 1px solid var(--line); }
.svc-list span { color: var(--muted); font-size: 13px; }
.mail-box { margin-top: 28px; padding: 28px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg-2); }
.mail-box p { color: var(--muted); font-size: 14px; }
.mail-box .acts { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.mail-box ol { margin-top: 12px; color: var(--text-2); font-size: 14px; counter-reset: q; }
.mail-box ol li { padding: 4px 0 4px 1.6em; position: relative; counter-increment: q; }
.mail-box ol li::before { content: counter(q) "."; position: absolute; left: 0; color: var(--dim); font-family: var(--mono); font-size: 13px; }

/* ---------- 出てくる動き（JS があるときだけ） ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- 幅ごと ---------- */
@media (max-width: 1080px) {
  .app { grid-template-columns: 190px 1fr 280px; }
  .feat-head h2 { font-size: 38px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .cards .card:first-child { grid-column: 1 / -1; min-height: 240px; }
}
@media (max-width: 860px) {
  :root { --pad: 24px; }
  .nav, .header .btn-ghost { display: none; }
  .menu-btn { display: block; }
  .header-in { gap: 8px; }
  .header .btn { margin-left: auto; }
  .sheet { display: block; position: fixed; inset: 64px 0 auto 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--pad) 24px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }
  .menu-open .sheet { opacity: 1; transform: none; visibility: visible; }
  .menu-open .menu-btn span:first-child { transform: translateY(2.75px) rotate(45deg); }
  .menu-open .menu-btn span:last-child { transform: translateY(-2.75px) rotate(-45deg); }
  .sheet a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .hero { padding: 130px 0 64px; }
  .hero h1 { font-size: 34px; line-height: 1.3; letter-spacing: -.02em; }
  .hero-row { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 20px; }
  .hero-sub { font-size: 15px; }
  .sample-tag { margin-top: 40px; text-align: left; font-size: 12px; }
  .app-wrap { margin-right: calc(var(--pad) * -1); }
  .app { min-width: 760px; height: 400px; grid-template-columns: 170px 1fr 0; }
  .app-panel { display: none; }
  .stack { gap: 12px 22px; justify-content: flex-start; padding-top: 28px; }
  .stack li { font-size: 14px; }
  .sec { padding: 80px 0; }
  .statement { font-size: 22px; line-height: 1.6; }
  .figs { grid-template-columns: 1fr; margin-top: 48px; border-top: 0; }
  .fig, .fig + .fig { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 96px 1fr; gap: 0 18px; align-items: start; }
  .fig svg { grid-row: 1 / span 3; width: 96px; height: 80px; margin: 0; }
  .feat-head { grid-template-columns: 1fr; gap: 16px; }
  .feat-head h2 { font-size: 27px; line-height: 1.32; }
  .visual { margin-top: 36px; }
  .feat-foot { grid-template-columns: 1fr; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); }
  .feat-foot .ff-also { grid-column: 1; }
  .checks { grid-template-columns: 1fr 1fr; }
  .checks div:nth-child(3) { border-left: 0; }
  .checks div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .cal { grid-template-columns: 1fr; }
  .cal > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .tree { grid-template-columns: 1fr; }
  .tree > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .timeline { grid-template-columns: 1fr; margin-top: 40px; }
  .timeline::before { left: 4px; right: auto; top: 6px; bottom: 6px; border-top: 0; border-left: 1px solid var(--line-2); }
  .timeline li { padding: 0 0 28px 30px; }
  .timeline li::before { top: 7px; }
  .cards { grid-template-columns: 1fr; margin-top: 40px; }
  .card { min-height: 0; padding: 24px; }
  .card h3 { font-size: 19px; }
  .cta { padding: 96px 0; }
  .cta h2 { font-size: 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .page-head { padding: 64px 0 48px; }
  .page-head h1 { font-size: 32px; }
  .split { grid-template-columns: 1fr; gap: 24px; }
  .split h2 { font-size: 24px; }
  .kv div { grid-template-columns: 1fr; gap: 2px; }
  .pipeline li { grid-template-columns: 44px 1fr; gap: 4px 12px; }
  .pipeline li p, .pipeline li .chip { grid-column: 2; }
  .pipeline li .chip { justify-self: start; }
}
@media (max-width: 380px) {
  .brand small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .st.run::before { animation: none; }
  * { transition: none !important; }
}
@media (max-width: 860px) {
  .svc-list li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 860px) {
  .footer li a { display: inline-block; padding: 10px 0; }
  .footer li { padding: 0; }
  .toc a { padding: 11px 16px; }
  .more { padding: 10px 0; margin-top: 10px; }
}
@media (max-width: 860px) {
  .header .btn-sm { height: 40px; padding: 0 16px; }
  .brand { padding: 8px 0; }
}
@media (max-width: 860px) {
  .hide-sp { display: none; }
  .show-sp { display: inline; }
  .hero-cta { gap: 24px; }
}
@media (max-width: 860px) {
  .hero h1 { font-size: 38px; line-height: 1.18; }
  .hero h1 .nw { display: block; }
}
@media (max-width: 370px) {
  .hero h1 { font-size: 34px; }
}

/* 2026-11-07 審査の指摘で直した所 */
.bn i { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 8px; overflow: hidden; }
.bn i.wide { flex-direction: row; align-items: center; justify-content: flex-start; padding: 0 8px 0 26px; }
.bn s { display: block; text-decoration: none; }
.bn .b-lg { position: absolute; left: 7px; top: 7px; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .35); }
.bn i.wide .b-lg { top: 50%; transform: translateY(-50%); width: 10px; height: 10px; }
.bn .b-hd { width: 72%; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.bn .b-cta { width: 38%; min-width: 22px; height: 9px; border-radius: 999px; background: var(--btn); }
.bn i.wide .b-hd { width: 55%; height: 5px; }
.bn i.wide .b-cta { width: 18%; height: 7px; margin-left: auto; }
.feat-foot { grid-template-columns: auto 1fr; gap: 6px 28px; }
.feat-foot .ff-also { grid-column: 2; }
.cards .card:not(.light) { min-height: 0; }
@media (max-width: 860px) {
  .app-wrap { margin-right: 0; }
  .app-wrap::after { height: 70px; }
  .app { min-width: 0; height: auto; grid-template-columns: 1fr; border-radius: 14px 14px 0 0; }
  .app-side { display: none; }
  .app-main { padding: 16px 16px 4px; }
  .app-panel { display: block; border-left: 0; border-top: 1px solid var(--line); padding: 16px 16px 40px; }
  .app-panel .log { display: none; }
  .steps li { grid-template-columns: 28px 1fr auto; }
  .feat-foot { grid-template-columns: 1fr; }
  .feat-foot .ff-also { grid-column: 1; }
}
@media (max-width: 860px) {
  .vbar { flex-wrap: wrap; row-gap: 4px; }
}
@media (max-width: 860px) {
  .tbl th:nth-child(4), .tbl td:nth-child(4) { display: none; }
  .tbl th, .tbl td { padding: 11px 12px; }
}
@media (max-width: 860px) {
  .tbl td:nth-child(2) { white-space: normal; }
}

/* ===== v3：動く部品 ===== */
.app .typed-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--text-2); min-height: 38px; }
.app .typed-row::before { content: "依頼"; font-size: 11px; color: var(--dim); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 6px; flex: none; }
.app [data-typed]::after { content: ""; display: inline-block; width: 1px; height: 1em; background: var(--text-2); margin-left: 2px; vertical-align: -2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.steps li { transition: background .3s; }
.steps li.now { background: rgba(143, 166, 255, .05); }
.js [data-run] .review { transform: translateY(6px); transition: transform .5s, border-color .5s; }
.js [data-run] .review.show { border-color: rgba(242, 184, 75, .55); }
.js [data-run] .review.show { opacity: 1; transform: none; }
.js [data-run] .review.show .acts .p { animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 229, 230, .0); } 50% { box-shadow: 0 0 0 4px rgba(229, 229, 230, .18); } }

/* 流れる帯 */
.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker ul { display: flex; gap: 40px; width: max-content; animation: tick 48s linear infinite; }
.ticker li { white-space: nowrap; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.ticker li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.ticker li.h::before { background: var(--human); }
.ticker:hover ul { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* 項目を選ぶと画面が替わる欄 */
.tabset { display: grid; grid-template-columns: 340px 1fr; gap: 40px; margin-top: 64px; align-items: start; }
.tablist { border-top: 1px solid var(--line); }
.tablist [role="tab"] { position: relative; display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); font: inherit; padding: 20px 4px 20px 0; cursor: pointer; }
.tablist [role="tab"] b { display: block; font-size: 17px; font-weight: 600; color: var(--muted); transition: color .2s; }
.tablist [role="tab"] span { display: block; font-size: 13px; line-height: 1.7; margin-top: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s, opacity .4s; }
.tablist [role="tab"].on b, .tablist [role="tab"]:hover b { color: var(--text); }
.tablist [role="tab"].on span { max-height: 8em; opacity: 1; }
.tablist [role="tab"]::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--text); }
.tabset:not(.stopped):not(.paused) .tablist [role="tab"].on::after { animation: bar var(--dur, 7000ms) linear forwards; }
.tabset.stopped .tablist [role="tab"].on::after { width: 100%; }
@keyframes bar { to { width: 100%; } }
.tabpanels { position: relative; min-height: 360px; }
.tabpanels [role="tabpanel"] { animation: fadein .5s ease; }
.tabpanels [role="tabpanel"] .visual { margin-top: 0; }
.tabpanels .more { margin-top: 16px; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* JS が無いときは全部の画面を並べる */
html:not(.js) .tabpanels [role="tabpanel"] { display: block !important; margin-bottom: 24px; }

/* 数字 */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 1px solid var(--line); }
.stats > div { padding: 24px 24px 0 0; }
.stats > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.stats b { display: block; font-size: 48px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats b small { font-size: 18px; font-weight: 500; margin-left: 4px; color: var(--muted); }
.stats p { color: var(--muted); font-size: 13px; margin-top: 8px; line-height: 1.6; }
.stats-note { font-size: 12px; color: var(--dim); margin-top: 18px; }

/* 受信箱の見本 */
.inbox { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 18px; }
.inbox [data-stage] { border: 1px dashed var(--line-2); border-radius: 10px; padding: 14px 16px; background: transparent; transition: background .5s, border-color .5s, transform .5s; transform: translateY(3px); }
.js .inbox [data-stage]:not(.on) p, .js .inbox [data-stage]:not(.on) .who { color: var(--dim); }
.js .inbox [data-stage]:not(.on) .st, .js .inbox [data-stage]:not(.on) .acts { visibility: hidden; }
.inbox [data-stage].on { background: var(--bg-3); border-style: solid; border-color: var(--line); transform: none; }
.inbox [data-stage].cur { border-color: var(--line-2); }
html:not(.js) .inbox [data-stage] { background: var(--bg-3); border-style: solid; transform: none; }
.inbox .who { font-size: 12px; color: var(--dim); display: flex; gap: 8px; align-items: center; }
.inbox .who .st { margin-left: auto; }
.inbox p { color: var(--text-2); font-size: 13.5px; margin-top: 6px; line-height: 1.7; }
.inbox .acts { display: flex; gap: 8px; margin-top: 10px; }
.inbox .acts span { font-size: 12px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted); }
.inbox .acts span.p { background: var(--btn); color: var(--bg); border-color: var(--btn); font-weight: 600; }

/* 灯る工程 */
[data-track] > li h3, [data-track] > li p { transition: color .5s; }
.js [data-track] > li:not(.lit) h3 { color: var(--dim); }
.js [data-track] > li:not(.lit) p { color: var(--dim); }
.js .timeline[data-track] li.lit::before { background: var(--text); border-color: var(--text); }
.js .pipeline[data-track] li.lit code { color: var(--ok); }
.js .pipeline[data-track] li.human.lit code { color: var(--human); }

/* 指についてくる光 */
.spot { position: relative; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .07), transparent 60%); }
.spot:hover::before { opacity: 1; }
.card { transition: transform .25s, border-color .25s; }
.card:hover { transform: translateY(-3px); border-color: var(--line-2); }

/* 横に送るカード */
.rail-wrap { margin-top: 56px; }
.rail-head { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 16px; }
.rail-head button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text); font-size: 18px; cursor: pointer; }
.rail-head button:disabled { color: var(--dim); border-color: var(--line); cursor: default; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 380px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* 2 つの入口 */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.duo a { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; background: var(--bg-2); min-height: 220px; }
.duo .k { font-size: 13px; color: var(--muted); }
.duo h3 { font-size: 24px; line-height: 1.4; margin-top: 8px; letter-spacing: -.015em; }
.duo p { color: var(--muted); margin-top: 12px; font-size: 14px; }
.duo .more { margin-top: 18px; }

@media (max-width: 860px) {
  .tabset { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
  .tablist { display: flex; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); }
  .tablist::-webkit-scrollbar { display: none; }
  .tablist [role="tab"] { flex: none; width: auto; border-bottom: 0; padding: 12px 16px 12px 0; margin-right: 6px; }
  .tablist [role="tab"] b { font-size: 15px; white-space: nowrap; }
  .tablist [role="tab"] span { display: none; }
  .tabpanels { min-height: 0; }
  .tab-lead { display: block; color: var(--muted); font-size: 14px; margin-bottom: 14px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 20px; }
  .stats b { font-size: 36px; }
  .duo { grid-template-columns: 1fr; }
  .duo a { padding: 24px; min-height: 0; }
  .rail { grid-auto-columns: 82%; }
  .ticker ul { animation-duration: 36s; }
}
@media (min-width: 861px) { .tab-lead { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ticker ul { animation: none; width: auto; }
  .ticker { overflow-x: auto; }
  .ticker li[aria-hidden] { display: none; }
  .tabpanels [role="tabpanel"] { animation: none; }
}
.cal.one { grid-template-columns: 1fr; }
@media (min-width: 861px) { .sticky-col { position: sticky; top: 100px; align-self: start; } }
.footer-lead { color: var(--muted); font-size: 13px; margin-top: 14px; max-width: 22em; }
.duo > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: var(--bg-2); }
.duo.dev { grid-template-columns: repeat(4, 1fr); }
.duo.dev h3 { font-size: 19px; }
.sess li { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.sess li:last-child { border-bottom: 0; }
.sess li b { font-weight: 500; }
.sess li em { font-style: normal; color: var(--dim); font-size: 12px; }
.sess li.wait { background: rgba(242, 184, 75, .05); }
.notice { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 22px; align-items: center; }
.phone-card { border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-3); padding: 16px; max-width: 340px; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
.phone-card .t { font-size: 12px; color: var(--muted); }
.phone-card .m { color: var(--text); margin-top: 4px; font-size: 14px; line-height: 1.6; }
.phone-card .acts { display: flex; gap: 8px; margin-top: 12px; }
.phone-card .acts span { flex: 1; text-align: center; font-size: 12px; padding: 7px 0; border-radius: 8px; border: 1px solid var(--line-2); color: var(--muted); }
.phone-card .acts span.p { background: var(--human); color: #1a1405; border-color: var(--human); font-weight: 600; }
@media (max-width: 1080px) { .duo.dev { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .duo.dev { grid-template-columns: 1fr; }
  .duo > div { padding: 22px; }
  .sess li { grid-template-columns: 1fr auto; }
  .sess li .st { grid-column: 2; grid-row: 1; }
  .sess li em { grid-column: 1 / -1; }
  .notice { grid-template-columns: 1fr; }
}
.sess li.wait em { color: var(--muted); }

/* お問い合わせのフォーム（誤りの色は赤。琥珀色は人の承認だけに使う） */
.form { display: grid; gap: 22px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { font-size: 14px; font-weight: 600; color: var(--text); padding: 0; }
.field .req, .field .opt { margin-left: 8px; font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 4px; vertical-align: 1px; }
.field .req { color: var(--text); background: rgba(255, 255, 255, .1); }
.field .opt { color: var(--muted); border: 1px solid var(--line-2); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 14px; line-height: 1.6; }
.form textarea { resize: vertical; min-height: 140px; }
.form textarea::placeholder { color: var(--dim); }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--run); outline-offset: 1px; border-color: transparent; }
.form [aria-invalid="true"] { border-color: #f2726b; }
.form .err { margin: 0; font-size: 13px; color: #f59a94; min-height: 0; }
.form .err:empty { display: none; }
.form-msg { margin: 0; padding: 12px 14px; border-radius: 8px; font-size: 14px; color: #f59a94; background: rgba(242, 114, 107, .1); border: 1px solid rgba(242, 114, 107, .35); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; color: var(--text-2); transition: background .15s, border-color .15s; }
.chips input:checked + span { background: var(--text); color: var(--bg); border-color: var(--text); }
.chips input:focus-visible + span { outline: 2px solid var(--run); outline-offset: 2px; }
.agree { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.agree input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--text); flex: none; }
.agree a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.form .btn { height: 48px; font-size: 15px; justify-self: start; padding: 0 28px; }
.form .btn:disabled { opacity: .6; cursor: progress; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-side { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 14px; color: var(--muted); }
.form-side a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.thanks-note { font-size: 14px; color: var(--muted); }
.thanks-note a { color: var(--text-2); text-decoration: underline; }
@media (max-width: 860px) {
  .form { padding: 20px; }
  .form .btn { justify-self: stretch; }
}