/* infraone.jp トップページ専用 (2026-09-22 更改)。
   styles.css (共通ヘッダ・フッタ・ボタン) の上に重ね、body[data-page="home"] の
   中だけに効かせる。他の 34 ページには一切影響しない。

   設計方針 (site/infraone.jp/DESIGN.md):
   - 主題は「請求書」。効果は見込みではなく実請求で検証する会社なので、
     トップの記憶に残る要素は請求明細の形をした「見るところ」の一覧にする
   - 色は紙とインクと、ロゴの赤ひとつ。前版の黒地+青緑は捨てる
   - 番号は本当に順番があるもの (5段階の進め方) にだけ付ける
   - 英語の小見出し (eyebrow) を置かない。見出しは日本語で言い切る */

body[data-page="home"]{
  --hp-paper:#f5f5f2;
  --hp-white:#ffffff;
  --hp-ink:#1b1e1c;
  --hp-ink2:#565d58;
  --hp-rule:#d8dbd5;
  --hp-rule-soft:#e8eae5;
  --hp-red:#b5281b;
  --hp-red-deep:#8a1d12;
  --hp-red-tint:#fbf1ef;
  --hp-measure:38rem;
  background:var(--hp-paper);
  color:var(--hp-ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic Medium","Yu Gothic",system-ui,sans-serif;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
body[data-page="home"] main{font-size:1.0625rem;line-height:1.9}
body[data-page="home"] main p{margin:0 0 1em}
body[data-page="home"] main h1,
body[data-page="home"] main h2,
body[data-page="home"] main h3{font-weight:700;letter-spacing:-.01em;line-height:1.35;margin:0}
body[data-page="home"] main h2{font-size:clamp(1.55rem,2.4vw,2.05rem);max-width:var(--hp-measure)}
body[data-page="home"] main h3{font-size:1.15rem}
body[data-page="home"] main a{color:inherit}
body[data-page="home"] main a:focus-visible{outline:3px solid var(--hp-red);outline-offset:3px}

/* 共通ボタンの色だけ、このページの色に合わせる。見出し (申込のボタンを含む) は全ての頁で同じ styles.css の形のまま (2026-10-14) */
body[data-page="home"] .button.primary{background:var(--hp-red);border-color:var(--hp-red);color:#fff}
body[data-page="home"] .button.primary:hover{background:var(--hp-red-deep);border-color:var(--hp-red-deep)}
body[data-page="home"] .button.secondary,
body[data-page="home"] .button.ghost{background:transparent;border-color:var(--hp-ink);color:var(--hp-ink)}
body[data-page="home"] .text-link{color:var(--hp-red-deep);font-weight:700;text-decoration:underline;text-underline-offset:.2em}

.hp-wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}

/* ---------- ヒーロー: 言い切り + 請求明細の形をした「見るところ」 ---------- */
.hp-hero{padding:clamp(56px,9vw,112px) 0 clamp(40px,6vw,72px);background:var(--hp-white);border-bottom:1px solid var(--hp-rule)}
.hp-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:clamp(32px,6vw,88px);align-items:start}
.hp-hero h1{font-size:clamp(2rem,4.2vw,3.15rem);line-height:1.26;letter-spacing:-.02em;max-width:24ch;word-break:keep-all;overflow-wrap:anywhere}
.hp-hero h1 br{display:none}
@media (min-width:640px){.hp-hero h1 br{display:inline}}
.hp-hero h1::before{content:"";display:block;width:56px;height:6px;background:var(--hp-red);margin-bottom:28px}
.hp-lead{max-width:var(--hp-measure);margin-top:28px;font-size:1.125rem;color:var(--hp-ink2)}
.hp-audience{margin-top:6px;font-size:.95rem;color:var(--hp-ink2)}
.hp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hp-note{margin-top:18px;font-size:.95rem;color:var(--hp-ink2)}
.hp-note strong{color:var(--hp-ink)}

/* 請求明細 */
.hp-ledger{border:1px solid var(--hp-ink);background:var(--hp-white);font-variant-numeric:tabular-nums}
.hp-ledger-head{display:flex;flex-direction:column;gap:2px;padding:16px 20px;border-bottom:1px solid var(--hp-ink)}
.hp-ledger-head h2{font-size:1.1rem;font-weight:700;max-width:none}
.hp-ledger-head span{font-size:.85rem;color:var(--hp-ink2)}
.hp-ledger dl{margin:0;padding:0}
.hp-ledger dl > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:16px 20px;border-bottom:1px solid var(--hp-rule-soft)}
.hp-ledger dl > div:last-child{border-bottom:0}
.hp-ledger dt{font-weight:700;margin:0}
.hp-ledger dd{margin:0;grid-column:1;font-size:.95rem;color:var(--hp-ink2);line-height:1.7}
.hp-ledger .hp-check{grid-column:2;grid-row:1 / span 2;align-self:start;font-size:.85rem;color:var(--hp-red-deep);white-space:nowrap;padding-top:2px}
.hp-ledger-foot{display:flex;justify-content:space-between;gap:16px;padding:14px 20px;border-top:1px solid var(--hp-ink);background:var(--hp-red-tint);font-size:.95rem}
.hp-ledger-foot strong{color:var(--hp-red-deep)}

/* ---------- 区切りとリズム ---------- */
.hp-section{padding:clamp(48px,7vw,96px) 0}
.hp-section + .hp-section{border-top:1px solid var(--hp-rule)}
.hp-section-head{max-width:var(--hp-measure);margin-bottom:36px}
.hp-section-head p{color:var(--hp-ink2)}
.hp-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,80px);align-items:start}
.hp-split > div > p{color:var(--hp-ink2)}

/* 困りごと: 番号なし。項目は請求明細と同じ区切り線で揃える */
.hp-pains{list-style:none;margin:0;padding:0;border-top:1px solid var(--hp-ink)}
.hp-pains li{padding:18px 0;border-bottom:1px solid var(--hp-rule)}
.hp-pains li strong{display:block;margin-bottom:4px}
.hp-pains li p{margin:0;color:var(--hp-ink2);font-size:.98rem}

/* 進め方: これは本当に順番がある。番号を付ける唯一の場所 */
.hp-steps{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--hp-ink);border-bottom:1px solid var(--hp-ink)}
.hp-steps li{counter-increment:step;padding:22px 18px 24px 0;border-right:1px solid var(--hp-rule);margin-right:18px}
.hp-steps li:last-child{border-right:0;margin-right:0}
.hp-steps li::before{content:counter(step);display:block;font-size:.9rem;font-weight:700;color:var(--hp-red-deep);font-variant-numeric:tabular-nums;margin-bottom:10px}
.hp-steps strong{display:block;font-size:1.05rem;margin-bottom:6px}
.hp-steps p{margin:0;font-size:.95rem;color:var(--hp-ink2)}
.hp-steps li.hp-gate strong::after{content:" — 人が承認";font-weight:400;color:var(--hp-red-deep);font-size:.9rem}

.hp-promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:40px}
.hp-promises h3{margin-bottom:8px}
.hp-promises p{margin:0;color:var(--hp-ink2);font-size:.98rem}
.hp-inline-actions{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:40px}

/* サービス: 3 つは並列なので同じ格。カードではなく列 */
.hp-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--hp-ink)}
.hp-services article{padding:28px 28px 32px 0;border-right:1px solid var(--hp-rule);margin-right:28px}
.hp-services article:last-child{border-right:0;margin-right:0}
.hp-services article h3{font-size:1.2rem;line-height:1.4}
.hp-services article h3 small{display:block;font-size:.9rem;font-weight:400;color:var(--hp-ink2);margin-bottom:4px}
.hp-services article > p{color:var(--hp-ink2);font-size:.98rem;margin:12px 0 18px}
.hp-services .hp-terms{display:block;font-size:.9rem;color:var(--hp-ink);font-variant-numeric:tabular-nums;margin-bottom:18px}
.hp-services .hp-svc-actions{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.hp-more{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:36px}

/* 技術 */
.hp-methods{list-style:none;margin:0;padding:0;border-top:1px solid var(--hp-ink)}
.hp-methods li{display:grid;grid-template-columns:7em minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--hp-rule)}
.hp-methods li strong{font-weight:700}
.hp-methods li span{color:var(--hp-ink2);font-size:.98rem}

/* 会社: 表 */
.hp-company{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,80px);align-items:start}
.hp-company dl{margin:0;border-top:1px solid var(--hp-ink)}
.hp-company dl div{display:grid;grid-template-columns:8em minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--hp-rule)}
.hp-company dt{font-weight:700;margin:0}
.hp-company dd{margin:0;color:var(--hp-ink2)}

/* 別領域 (Labs): 主力と混ざらないよう、控えめな一行 */
.hp-labs{padding:28px 0;border-top:1px solid var(--hp-rule);border-bottom:1px solid var(--hp-rule);background:var(--hp-white)}
.hp-labs .hp-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px}
.hp-labs p{margin:0;color:var(--hp-ink2)}
.hp-labs p strong{color:var(--hp-ink)}

/* 締め: 相談の敷居を下げる三行 */
.hp-close{padding:clamp(56px,8vw,96px) 0;background:var(--hp-ink);color:#fff}
.hp-close h2{color:#fff;max-width:26ch;font-size:clamp(1.7rem,3vw,2.4rem)}
.hp-close ul{list-style:none;margin:24px 0 32px;padding:0;max-width:var(--hp-measure);color:#d9dcd8}
.hp-close li{padding:10px 0;border-top:1px solid rgba(255,255,255,.18)}
.hp-close li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
body[data-page="home"] .hp-close .button.ghost{border-color:#fff;color:#fff}
body[data-page="home"] .hp-close .button.ghost:hover{background:rgba(255,255,255,.08)}

/* ---------- 応答 ---------- */
@media (max-width:1000px){
  .hp-hero-grid,.hp-split,.hp-company{grid-template-columns:1fr}
  .hp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-steps li{border-right:0;margin-right:0;border-bottom:1px solid var(--hp-rule);padding-right:0}
  .hp-steps li:nth-last-child(-n+1){border-bottom:0}
  .hp-promises,.hp-services{grid-template-columns:1fr}
  .hp-services article{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--hp-rule)}
  .hp-services article:last-child{border-bottom:0}
}
@media (max-width:640px){
  .hp-hero h1{font-size:2rem}
  .hp-actions .button{width:100%}
  .hp-steps{grid-template-columns:1fr}
  .hp-ledger dl > div{grid-template-columns:1fr}
  .hp-ledger .hp-check{grid-column:1;grid-row:auto;white-space:normal}
  .hp-company dl div,.hp-methods li{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:no-preference){
  .hp-hero h1::before{transform-origin:left;animation:hp-rule .6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes hp-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}