/* ポラリスソリューションズ コーポレートサイト 洗練案 A（夜空）: 全ページ共通の CSS */
/* ===== トークン（設計メモ.md と同じ値） ===== */
:root{
  --night:#0B1830;
  --paper:#FBFCFD;
  --ink:#0F1E33;
  --ink-2:#4A5A70;
  --ink-3:#5E6C80;
  --n-ink:#EAF0F7;
  --n-ink-2:#A9B8CC;
  --polar:#13CFC6;
  --link:#1467B8;
  --link-n:#8FD3FF;
  --line:rgba(15,30,51,.16);
  --line-n:rgba(234,240,247,.22);

  --sans:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;

  --f-state:clamp(2.25rem, 1rem + 5.6vw, 5.5rem);
  --f-word:clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
  --f-h2:clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --f-h3:clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --f-lead:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --f-body:1rem;
  --f-small:.8125rem;

  --gutter:clamp(20px, 5vw, 72px);
  --max:1280px;
  --sec:clamp(96px, 11vw, 168px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--night)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--f-body);line-height:1.9;letter-spacing:.02em;
  line-break:strict;overflow-x:clip;
}
.sky-on body{background:transparent}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
a:focus-visible,button:focus-visible{outline:2px solid var(--link);outline-offset:4px;border-radius:2px}
/* 夜の面の上では、フォーカス枠を polar にする */
:is(.hero,.contact,.closing,.foot,.panel,.head.on-night,html.menu-open .head) :is(a,button):focus-visible{outline-color:var(--polar)}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:700;line-height:1.3;letter-spacing:.01em;font-feature-settings:"palt"}
h1,h2,h3,.lead,.sub{word-break:auto-phrase}
.nb{display:inline-block}
.in{max-width:var(--max);margin:0 auto;width:100%}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== 空（画面に固定した canvas） ===== */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:none}
.sky-on #sky{display:block}
header,main,footer{position:relative;z-index:1}
/* 空（canvas）が描けていない間は、夜の面を CSS で出す。sky-on は site.js が空の最初の描画に成功したあとに付ける */
.hero,.contact,.foot{background:var(--night)}
.sky-on .hero,.sky-on .contact,.sky-on .foot{background:transparent}

/* ===== ヘッダー ===== */
.head{position:fixed;top:0;left:0;right:0;z-index:30;height:72px;padding:0 var(--gutter);color:var(--ink);transition:color .5s}
.head .in{display:flex;align-items:center;height:100%}
.head.on-night{color:var(--n-ink)}
/* 空が無い間（JavaScript 無効・site.js が動かない・canvas が使えない）は、白い本文の上でも読めるよう、ヘッダーに夜の地色を付ける */
html:not(.sky-on) .head{background:var(--night)}
.head .logo{position:relative;display:block;width:188px;height:30px}
.head .logo img{position:absolute;inset:0;width:188px;height:auto;transition:opacity .5s}
.head .logo .lt{opacity:0}
.head.on-night .logo .dk{opacity:0}
.head.on-night .logo .lt{opacity:1}
.nav{margin-left:auto;display:flex;align-items:center;gap:32px;font-size:.875rem;font-weight:500;letter-spacing:.04em}
.nav a{position:relative;color:inherit;text-decoration:none;padding:8px 0}
.nav a:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:not(.cta):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav .cta{border:1px solid currentColor;border-radius:999px;padding:9px 20px;transition:background .35s,color .35s}
.head:not(.on-night) .cta:hover{background:var(--ink);color:#fff}
.head.on-night .cta:hover{background:var(--n-ink);color:var(--night)}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;color:inherit;padding:0;cursor:pointer}
.menu-btn span{display:block;width:22px;height:1.5px;background:currentColor;margin:0 auto;position:relative;transition:transform .4s var(--ease),background .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-btn span::before{top:-7px}
.menu-btn span::after{top:7px}
html.menu-open .menu-btn span{background:transparent}
html.menu-open .menu-btn span::before{top:0;transform:rotate(45deg)}
html.menu-open .menu-btn span::after{top:0;transform:rotate(-45deg)}
html.menu-open .head{color:var(--n-ink)}
html.menu-open .head .logo .dk{opacity:0}
html.menu-open .head .logo .lt{opacity:1}
.panel{position:fixed;inset:0;z-index:25;background:var(--night);color:var(--n-ink);display:none;padding:112px var(--gutter) 40px;overflow:auto}
.panel ul{max-width:var(--max);margin:0 auto}
html.menu-open .panel{display:block}
html.menu-open{overflow:hidden}
.panel ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-n)}
.panel li{border-bottom:1px solid var(--line-n)}
.panel a{display:block;padding:20px 0;color:inherit;text-decoration:none;font-size:1.5rem;font-weight:700;letter-spacing:.02em}
.panel .sub{margin-top:40px;font-size:var(--f-small);color:var(--n-ink-2)}

/* ===== 夜: ファーストビュー ===== */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-content:end;padding:calc(72px + 10vh) var(--gutter) clamp(48px, 8vh, 96px);color:var(--n-ink)}
.hero .in{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:48px clamp(32px, 6vw, 112px);align-items:end}
.hero .in > div:first-child{container-type:inline-size}
.statement{font-weight:500;font-size:min(var(--f-state), 10.4cqi);line-height:1.28;letter-spacing:.04em;font-feature-settings:"palt"}
/* cqi が効かないブラウザ（Safari 15 以前）: 一文の列の幅に合わせて 3 段で代える。cqi が効くブラウザには当てない */
@supports not (font-size:1cqi){
  .statement{font-size:min(var(--f-state), 5.8vw, 5.0625rem)}
  @media (max-width:1024px){.statement{font-size:min(var(--f-state), 5.1vw)}}
  @media (max-width:760px){.statement{font-size:min(var(--f-state), 9.2vw)}}
}
.statement .l{display:block}
.hero .lead{margin-top:clamp(24px, 3vw, 36px);max-width:30em;color:var(--n-ink-2);font-size:var(--f-lead);line-height:1.9}
.actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:clamp(28px, 3vw, 40px)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;background:var(--n-ink);color:var(--night);font-weight:700;font-size:.9375rem;text-decoration:none;letter-spacing:.04em;transition:background .35s,transform .35s var(--ease)}
.btn:hover{background:#fff;transform:translateY(-1px)}
.textlink{font-weight:700;font-size:.9375rem;color:inherit;text-decoration:none;position:relative;padding-bottom:3px}
.textlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .45s var(--ease)}
.textlink:hover::after{transform:scaleX(.4)}
.fields{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-n)}
.fields li{position:relative;border-bottom:1px solid var(--line-n)}
.fields li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--polar);transition:width .5s var(--ease)}
.fields li:hover::after{width:100%}
.fields a{display:block;padding:18px 0 16px;color:inherit;text-decoration:none}
.fields .nm{display:block;font-size:clamp(1.25rem, 1rem + .8vw, 1.5rem);font-weight:700;letter-spacing:.01em;line-height:1.3;transition:transform .45s var(--ease)}
.fields a:hover .nm{transform:translateX(8px)}
.fields .tg{display:block;margin-top:4px;font-size:var(--f-small);color:var(--n-ink-2);line-height:1.5;letter-spacing:.03em}

/* 読み込み時の 1 回だけの動き */
.js:not(.rm) .rise{opacity:0;transform:translateY(22px);animation:rise 1.1s var(--ease) forwards}
.js:not(.rm) .rise.d1{animation-delay:.35s}
.js:not(.rm) .rise.d2{animation-delay:.5s}
.js:not(.rm) .rise.d3{animation-delay:.7s}
.js:not(.rm) .rise.d4{animation-delay:.85s}
.js:not(.rm) .rise.d5{animation-delay:1s}
@keyframes rise{to{opacity:1;transform:none}}

/* ===== 夜明け・夕暮れ（空の色が変わるための余白） ===== */
.dawn{height:32vh;height:32svh}
.dusk{height:30vh;height:30svh}

/* ===== 昼 ===== */
.day{color:var(--ink)}
.sec{padding:var(--sec) var(--gutter)}
.day .btn{background:var(--ink);color:#fff}
.day .btn:hover{background:#1C3150}
.day .textlink{color:var(--link)}

.agent .g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px clamp(32px, 5vw, 80px);align-items:center}
.agent .name{font-size:.9375rem;font-weight:500;letter-spacing:.06em;color:var(--ink-2)}
.agent h2{font-size:var(--f-h2);margin-top:12px;line-height:1.3}
.agent .sub{margin-top:24px;color:var(--ink-2);font-size:var(--f-lead);max-width:26em}
.agent .actions{margin-top:36px}
.agent .screen{margin-right:calc(-1 * var(--gutter))}
@media (min-width:1425px){.agent .screen{margin-right:calc((var(--max) - 100vw) / 2)}}
.agent .screen figure{margin:0;border:1px solid rgba(15,30,51,.18);border-radius:10px 0 0 10px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -48px rgba(15,30,51,.45)}
/* 実画面の出現は site.js が動いているとき（app）だけ。動かなければ最初から見える */
.app:not(.rm) .rv figure{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease)}
.app:not(.rm) .rv figure.shown{clip-path:inset(0 0 0 0)}
.agent .screen figcaption{font-size:var(--f-small);color:var(--ink-3);margin-top:12px;letter-spacing:.03em}

.biz .g{display:grid;grid-template-columns:1fr 1fr;gap:48px 0}
.biz .col + .col{border-left:1px solid var(--line);padding-left:clamp(40px, 6vw, 96px)}
.biz .col:first-child{padding-right:clamp(40px, 6vw, 96px)}
.biz h2{line-height:1.1}
.biz .word{display:block;font-size:var(--f-word);font-weight:700;letter-spacing:-.02em;line-height:1}
.biz .cat{display:block;margin-top:14px;font-size:var(--f-h3);font-weight:700;letter-spacing:.02em;line-height:1.4}
.biz p{margin-top:20px;color:var(--ink-2);font-size:var(--f-lead);max-width:26em;line-height:1.9}
.biz p + p{margin-top:12px}

.note{padding-top:0}
.note .row{display:grid;grid-template-columns:auto 1fr auto;gap:16px 48px;align-items:center;padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.note .label{font-size:var(--f-small);color:var(--ink-2);letter-spacing:.06em}
.note h2{font-size:clamp(1.375rem, 1.1rem + 1vw, 1.875rem)}
.note p{margin-top:6px;color:var(--ink-2)}
.note .url{display:block;font-size:var(--f-small);color:var(--ink-3);margin-top:10px;letter-spacing:.03em}

/* ===== 夜: お問い合わせ・フッター ===== */
.contact{min-height:64vh;min-height:64svh;display:grid;align-content:end;color:var(--n-ink);padding:var(--sec) var(--gutter) 0}
.contact .in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:40px clamp(32px, 6vw, 112px)}
.contact h2{font-weight:500;font-size:clamp(2rem, 1rem + 4vw, 4.5rem);line-height:1.2;letter-spacing:.04em}
.contact .lead{margin-top:20px;color:var(--n-ink-2);font-size:var(--f-lead);max-width:28em}
.contact .actions{justify-content:flex-end;margin-top:0}
.foot{color:var(--n-ink-2);padding:clamp(72px, 9vw, 120px) var(--gutter) 40px;font-size:var(--f-small)}
.foot .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-top:32px;border-top:1px solid var(--line-n)}
.foot img{width:150px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot nav a{color:inherit;text-decoration:none;position:relative}
.foot nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.foot nav a:hover::after{transform:scaleX(1);transform-origin:left}
.foot .copy{margin-top:40px;font-size:.75rem;letter-spacing:.04em}

/* ===== 動きを減らす ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ===== タブレット ===== */
@media (max-width:1024px){
  .nav{gap:24px}
  .hero .in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .agent .g{grid-template-columns:1fr}
  .agent .screen{margin-right:0}
  .agent .screen figure{border-radius:10px}
}
/* ===== スマホ ===== */
@media (max-width:760px){
  .nav{display:none}
  .menu-btn{display:grid;place-items:center}
  .head{height:64px}
  .head .logo,.head .logo img{width:160px}
  .hero{padding-top:calc(64px + 14vh)}
  .hero .in{grid-template-columns:1fr;gap:40px}
  .fields a{padding:14px 0 12px}
  .biz .g{grid-template-columns:1fr;gap:0}
  .biz .col:first-child{padding-right:0;padding-bottom:48px}
  .biz .col + .col{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:48px}
  .note .row{grid-template-columns:1fr;gap:12px;padding:32px 0}
  .note .actions{margin-top:8px}
  .contact .in{grid-template-columns:1fr}
  .contact .btn{width:100%}
  .foot .row{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   下層ページ
   ============================================================ */
br.pc{display:inline}
.night{color:var(--n-ink)}
.night a:not(.btn):not(.textlink){color:var(--link-n)}
.day a:not(.btn):not(.textlink){color:var(--link);text-underline-offset:.3em;text-decoration-thickness:1px}

/* ----- 冒頭（夜）: ページ名 ----- */
.hero--page{min-height:min(64vh, 640px);min-height:min(64svh, 640px)}
.hero--page .in{display:block;container-type:inline-size}
.hero--full{min-height:100vh;min-height:100svh;padding-bottom:clamp(72px, 12vh, 136px)}
.page-title{font-weight:500;font-size:min(clamp(2.25rem, 1rem + 4.2vw, 4.5rem), 8.2vw);line-height:1.3;letter-spacing:.04em}
@supports (font-size:1cqi){.page-title{font-size:min(clamp(2.25rem, 1rem + 4.2vw, 4.5rem), 9.2cqi)}}
.hero .kicker{margin-bottom:18px;font-size:.9375rem;font-weight:500;letter-spacing:.06em;color:var(--n-ink-2)}
.hero--page .lead{max-width:34em}
.hero--page .lead + .lead{margin-top:12px}

/* ----- 昼の節 ----- */
.sub .sec{padding-top:calc(var(--sec) * .5);padding-bottom:calc(var(--sec) * .5)}
.sec-head{max-width:46em;margin-bottom:clamp(40px, 5vw, 72px)}
.sec-head h2,.split > div > h2{font-size:var(--f-h2);line-height:1.35}
.intro{margin-top:20px;color:var(--ink-2);font-size:var(--f-lead);line-height:1.9}
.caption{margin-top:16px;font-size:var(--f-small);color:var(--ink-3);line-height:1.7;letter-spacing:.03em}
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px clamp(32px, 5vw, 80px);align-items:start}

/* 項目と内容の行（会社概要・募集要項） */
.rows{margin:0;border-top:1px solid var(--line)}
.rows > div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:8px 32px;padding:28px 0;border-bottom:1px solid var(--line)}
.rows dt{font-weight:700;font-size:.9375rem;color:var(--ink-2);letter-spacing:.04em;line-height:2.1}
.rows dd{margin:0;font-size:1.0625rem;line-height:1.9}
.rows dd .en{display:block;margin-top:2px;font-size:var(--f-small);color:var(--ink-3);letter-spacing:.1em}
.rows dd .textlink{display:inline-block;margin-top:8px;font-size:.875rem}
.file{font-size:var(--f-small);color:var(--ink-3)}
.areas,.plain,.dots,.grid,.job-list,.biz-links,.cmp ul,.cmp ol{list-style:none;margin:0;padding:0}
.areas li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;padding:4px 0}
.areas a{font-weight:700}
.areas .tag{font-size:var(--f-small);color:var(--ink-2);letter-spacing:.03em}
.dots{margin-top:14px}
.dots li{position:relative;padding-left:1.1em}
.dots li::before{content:"";position:absolute;left:.2em;top:.9em;width:4px;height:4px;border-radius:50%;background:var(--ink-3)}

/* 並び（カードにしない。上の罫だけ） */
.grid{display:grid;gap:clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px)}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid > li{border-top:1px solid var(--ink);padding-top:20px}
.grid h3{font-size:1.1875rem;line-height:1.5}
.grid p{margin-top:12px;color:var(--ink-2);font-size:.9375rem;line-height:1.9}
.grid .step{margin:0 0 10px;font-size:var(--f-small);font-weight:700;color:var(--link);letter-spacing:.04em}
.grid .step + h3 + p{color:var(--ink);font-size:1rem}
.grid.walk{counter-reset:w}
.grid.walk > li{counter-increment:w}
.grid.walk h3::before{content:counter(w);display:inline-block;width:1.6em;color:var(--link)}

/* 従来の生成AI と Polaris Agent */
.cmp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cmp > div{padding:36px 0 28px}
.cmp .old{padding-right:clamp(32px, 5vw, 80px);color:var(--ink-3)}
.cmp .ours{border-left:1px solid var(--line);padding-left:clamp(32px, 5vw, 80px)}
.cmp h3{font-size:var(--f-h3)}
.cmp .old h3{color:var(--ink-2)}
.cmp ul,.cmp ol{margin-top:18px}
.cmp li{padding:13px 0;border-top:1px solid var(--line);font-size:1.0625rem}
.cmp ol{counter-reset:n}
.cmp ol li{counter-increment:n;display:flex;gap:18px;font-weight:700}
.cmp ol li::before{content:counter(n);color:var(--link)}

/* 処理図 */
.flow-fig{margin:0}
.flow-fig svg{width:100%;height:auto;display:block}
.flow-fig .v{display:none}
.flow-fig svg text{font-family:var(--sans)}

/* 画面と作成物 */
.shot{margin:0;border:1px solid rgba(15,30,51,.18);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -48px rgba(15,30,51,.45)}
.walk{margin-top:clamp(40px, 5vw, 64px)}
.deliverable{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px clamp(32px, 5vw, 80px);align-items:start;margin-top:clamp(72px, 9vw, 128px)}
.deliverable h3{font-size:var(--f-h3)}
.deliverable .note-text{margin-top:16px;color:var(--ink-2)}
.slides{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.slides figure{margin:0}
.slides .main{grid-column:1 / -1}
.slides .frame{border:1px solid rgba(15,30,51,.16);border-radius:8px;overflow:hidden;background:#fff;aspect-ratio:16/9}
.slides figcaption{margin-top:8px;font-size:var(--f-small);color:var(--ink-3);line-height:1.6}

/* 動作環境 */
.env .in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px, 5vw, 80px);align-items:center;padding:clamp(40px, 5vw, 64px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.env p.word{margin:0;max-width:none;color:var(--ink);font-size:var(--f-word);font-weight:700;letter-spacing:-.02em;line-height:1}
.env h2{font-size:var(--f-h3)}
.env p{margin-top:12px;color:var(--ink-2);max-width:30em}
.env .textlink{display:inline-block;margin-top:16px}

/* 採用 */
.job-list{display:grid;grid-template-columns:1fr 1fr;gap:28px clamp(24px, 3vw, 40px)}
.job-list h3{font-size:1.1875rem;line-height:1.5}
.job-list .desc{margin-top:6px;color:var(--ink-2);font-size:.9375rem}
.to-overview{margin-top:6px;color:var(--ink-2);font-size:.9375rem}
.biz-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 40px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.biz-row p{color:var(--ink-2)}
.biz-links{display:flex;flex-wrap:wrap;gap:12px 32px}

/* お問い合わせフォーム */
.form{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;max-width:880px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full,.form-note,.form .btn{grid-column:1 / -1}
.field label{font-size:.875rem;font-weight:700;letter-spacing:.04em}
.field .req{margin-left:4px;color:var(--link)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid rgba(15,30,51,.28);border-radius:8px;background:#fff;color:var(--ink);font:inherit;line-height:1.6;transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:200px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 22px) 23px,calc(100% - 16px) 23px;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.field ::placeholder{color:#5E6C80}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,103,184,.35)}
.form-note{font-size:.9375rem;color:var(--ink-2)}
.form .btn{justify-self:start;min-width:200px;border:0;cursor:pointer;font-family:inherit}
.hp-field{position:absolute !important;left:-10000px !important;top:auto;width:1px;height:1px;overflow:hidden}

/* プライバシーポリシー */
.prose{max-width:46em}
.prose .lead{color:var(--ink-2);font-size:var(--f-lead)}
.prose h2{margin-top:48px;font-size:1.25rem;line-height:1.5}
.prose p,.prose li{margin-top:12px}
.prose ul{margin:0;padding-left:1.3em}
.prose .enacted{margin-top:40px;color:var(--ink-2)}
.prose .actions{margin-top:48px}

/* ----- 締め（夜）: そのページの結びの欄 ----- */
.closing{min-height:64vh;min-height:64svh;display:grid;align-content:end;color:var(--n-ink);padding:var(--sec) var(--gutter) 0;background:var(--night)}
.sky-on .closing{background:transparent}
.closing .in{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:40px clamp(32px, 6vw, 112px);align-items:end}
.closing h2{font-weight:500;font-size:clamp(1.75rem, 1rem + 2.6vw, 3.25rem);line-height:1.4;letter-spacing:.04em}
.closing p{margin-top:20px;max-width:36em;color:var(--n-ink-2);font-size:var(--f-lead);line-height:1.9}
.closing p + p{margin-top:12px}
.closing .actions{justify-content:flex-end;margin-top:0}
.closing .sites{margin-top:40px;padding-top:24px;border-top:1px solid var(--line-n);max-width:36em}
.closing .sites h3{font-size:.9375rem;color:var(--n-ink-2);letter-spacing:.04em}
.closing .sites ul{list-style:none;margin:10px 0 0;padding:0}
.closing .sites .note{display:block;margin-top:8px;font-size:var(--f-small);color:var(--n-ink-2)}
/* 締めの欄が無いページ（お問い合わせ・プライバシーポリシー）はフッターの上に間を置く */
.dusk + .foot,main:has(> .dusk:last-child) + .foot{padding-top:clamp(120px, 16vw, 220px)}

@media (max-width:1024px){
  .split,.deliverable{grid-template-columns:1fr}
  .grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .closing .in{grid-template-columns:1fr}
  .closing .actions{justify-content:flex-start}
}
@media (max-width:760px){
  br.pc{display:none}
  .rows > div{grid-template-columns:1fr;gap:2px;padding:22px 0}
  .rows dt{line-height:1.8}
  .grid.c4,.grid.c3,.job-list,.slides,.form{grid-template-columns:1fr}
  .slides .main{grid-column:auto}
  .cmp{grid-template-columns:1fr}
  .cmp .old{padding-right:0}
  .cmp .ours{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .flow-fig .h{display:none}
  .flow-fig .v{display:block;max-width:420px;margin:0 auto}
  .env .in{grid-template-columns:1fr}
  .form .btn,.closing .btn{width:100%}
  .biz-row{flex-direction:column;align-items:flex-start}
}