/* 40_marketing/lp/_shared/lp.css — 全 LP 共通。変数・フォント・ボタンは本体（web/outputs/site）に揃える */
:root{
  --bg:#FFFFFF; --bg-alt:#F8FAFC; --ink:#0F172A; --sub:#475569; --note:#64748B; --muted:#94A3B8;
  --hairline:#E2E8F0; --accent:#2563EB; --accent-soft:#EFF6FF;
  --mint:#34D399; --sky:#38BDF8; --lav:#A78BFA; --warn:#B45309;
  --radius:12px; --radius-l:16px; --radius-s:6px; --header-h:68px;
  --grid-line:rgba(15,23,42,.05);  /* 方眼の質感（設計図の格子）。0/3 モーションのため静止 */
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--header-h) + 16px)}  /* モーション 0/3: スムーズスクロールなし */
body{font-family:"Noto Sans JP",sans-serif;color:var(--ink);background:var(--bg);line-height:1.8;font-feature-settings:"palt";-webkit-text-size-adjust:100%}
::selection{background:var(--ink);color:#fff}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.narrow{max-width:820px}
.nw{display:inline-block}  /* 見出しを句単位で折り返す */
h1,h2,h3{word-break:auto-phrase}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-48px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 8px;font-size:15px;text-decoration:none}
.skip:focus{top:0}

/* 見出し・本文 */
.eyebrow{font:800 13px/1 "Inter",sans-serif;letter-spacing:.22em;color:var(--ink);display:flex;align-items:center;gap:10px;margin-bottom:20px;text-transform:uppercase}
.eyebrow::after{content:"";width:28px;height:1px;background:var(--ink)}
section{padding:96px 0}
section.alt{background:var(--bg-alt)}
section h2{font-size:clamp(26px,3.2vw,38px);font-weight:900;line-height:1.45;letter-spacing:-.005em}
.secdesc{margin-top:18px;font-size:17px;color:var(--sub);max-width:64ch}
.note{font-size:15px;color:var(--note)}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:16px;padding:16px 30px;border-radius:8px;border:1.5px solid transparent;text-decoration:none;transition:background-color .18s cubic-bezier(.2,.7,.2,1);white-space:nowrap;cursor:pointer}
.btn-p{background:var(--ink);color:#fff}
.btn-p:hover{background:#1E293B}
.btn-p:active{background:#020617}
.btn[disabled]{cursor:not-allowed;opacity:.55;transform:none}
.btn[aria-busy=true]{cursor:progress;opacity:.75}
.btn[aria-busy=true]::after{content:""}
@media (prefers-reduced-motion: reduce){ .btn{transition:none} }
.blueprint{background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:32px 32px}
.btn-p::after{content:"→";font-family:"Inter",sans-serif}
.btn-s{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-s:hover{background:#F1F5F9}
.btn-s:active{background:#CBD5E1;color:var(--ink)}
.lp-toc{display:flex;flex-wrap:wrap;gap:4px 24px;padding-top:12px;padding-bottom:12px;font-size:14.5px;font-weight:700}
.lp-toc a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:var(--muted);text-underline-offset:.25em}
.lp-toc a:hover{text-decoration-color:var(--ink)}

/* ヘッダー（ロゴ＋CTA のみ。ナビは置かない） */
.lp-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--hairline)}
.lp-header .in{max-width:1180px;margin:0 auto;padding:0 24px;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.lp-logo{text-decoration:none;font-weight:900;white-space:nowrap;font-size:17px;line-height:1.2;letter-spacing:.01em}
.lp-logo small{display:block;font:600 11.5px/1.4 "Noto Sans JP",sans-serif;color:var(--note);letter-spacing:.06em;margin-top:2px}
.lp-header .btn{padding:11px 18px;font-size:14.5px}

/* フッター */
/* 本体サイト（daily-tohoku-dx.com）のフッターと同じ構成・配色（2026-10-20） */
.lp-footer{background:#08182C;color:#C8D4E2;padding:58px 0 24px;font-size:14px}
.lp-footer .main{display:grid;grid-template-columns:1.25fr .8fr .8fr;gap:40px 56px}
.lp-footer .brand strong{display:block;color:#fff;font-size:17px;font-weight:900;line-height:1.3}
.lp-footer .brand small{display:block;font:600 9.5px/1.4 "Inter",sans-serif;letter-spacing:.16em;color:#95A9BD;margin-top:3px}
.lp-footer .brand p{margin-top:16px;font-size:14.5px;line-height:1.8;max-width:42ch}
.lp-footer .facts{margin-top:20px}
.lp-footer .facts div{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.14);font-size:13px}
.lp-footer .facts div:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.lp-footer .facts dt{color:#95A9BD}
.lp-footer .facts dd{color:#fff;font-weight:700}
.lp-footer h2{font:700 10.5px/1 "Inter",sans-serif;letter-spacing:.18em;color:#95A9BD;text-transform:uppercase}
.lp-footer h2 small{display:block;font:700 13px/1.4 "Noto Sans JP",sans-serif;color:#fff;letter-spacing:0;margin-top:8px}
.lp-footer ul{list-style:none;margin-top:14px}
.lp-footer li a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14);color:#F8FAFC;text-decoration:none;font-weight:700}
.lp-footer li a::after{content:"→";font-family:"Inter",sans-serif;color:#C8D4E2}
.lp-footer li a:hover{text-decoration:underline;text-underline-offset:3px}
.lp-footer .bottom{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;font-size:12px}
.lp-footer .bottom nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-left:auto}
.lp-footer .bottom a{color:#C8D4E2;text-decoration:underline;text-underline-offset:3px}
.lp-footer .copy{font:500 12px/1.6 "Inter",sans-serif;color:#C8D4E2}
.lp-footer .ext{margin-top:14px;font-size:12px;color:#95A9BD}
.lp-footer .ext a{color:#C8D4E2;text-decoration:underline;text-underline-offset:3px}
@media (max-width: 900px){ .lp-footer .main{grid-template-columns:1fr;gap:28px} .lp-footer .bottom nav{margin-left:0} }
.todo{background:#FEF3C7;color:#92400E;padding:0 4px;border-radius:3px;font-weight:700}

/* フォーム（Netlify Forms） */
.lp-form{display:grid;gap:20px;margin-top:36px;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-l);padding:36px}
.lp-form .row{display:grid;gap:8px}
.lp-form .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lp-form label,.lp-form legend{font-weight:700;font-size:16px}
.lp-form .req::after{content:"必須";margin-left:8px;font-size:11.5px;font-weight:700;color:#fff;background:var(--accent);padding:1px 7px;border-radius:4px;vertical-align:2px}
.lp-form input[type=text],.lp-form input[type=email],.lp-form input[type=tel],.lp-form select,.lp-form textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid #64748B;border-radius:var(--radius-s);background:#fff;color:var(--ink)}
.lp-form textarea{min-height:150px;resize:vertical}
.lp-form .agree{display:flex;align-items:flex-start;gap:10px;font-weight:500}
.lp-form .agree input{margin-top:7px;width:18px;height:18px}
.lp-form .agree a{text-decoration:underline}
.lp-form .submit{margin-top:8px}
.lp-form .submit .btn{width:100%}
.lp-form .bot{display:none}
.form-preview-note{margin-top:14px;font-size:13px;color:var(--warn)}

/* 汎用部品 */
.cards{display:grid;gap:20px;margin-top:40px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);padding:28px}
.card .num{font:800 13px/1 "Inter",sans-serif;color:var(--accent);letter-spacing:.12em}
.card h3{margin-top:12px;font-size:18px;line-height:1.55;font-weight:800}
.card p{margin-top:10px;font-size:16px;color:var(--sub)}

@media (max-width: 900px){
  section{padding:72px 0}
  .cards.c3,.cards.c4{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .wrap{padding:0 16px}
  section{padding:60px 0}
  .cards.c3,.cards.c2,.cards.c4{grid-template-columns:1fr}
  .lp-form{padding:22px 16px}
  .lp-form .two{grid-template-columns:1fr}
  .lp-header .in{padding:0 16px}
  .lp-logo{font-size:15px}
  .lp-logo small{display:none}
  .lp-header .btn{padding:10px 14px;font-size:13.5px}
  .lp-header .btn::after{display:none}
}