/* Karizma株式会社 サイト共通CSS（site/src/site.css）。生成元は previews/karizma-kinetic.html の <style>（2026-09-08 分割） */
/* ===========================================================================
   1. TOKENS : 色はすべて CSS 変数経由。テーマは data-theme で差し替え
   =========================================================================== */
:root{
  --font-en:'Outfit',sans-serif;
  --font-ja:'Zen Kaku Gothic New',sans-serif;
  --font-mono:'Fragment Mono',monospace;
  --font-serif:'Shippori Mincho',serif;

  --step-0:clamp(.82rem,.8rem + .1vw,.9rem);
  --step-1:clamp(.94rem,.9rem + .2vw,1.02rem);
  --step-2:clamp(1.1rem,1rem + .5vw,1.35rem);
  --step-3:clamp(1.5rem,1.2rem + 1.4vw,2.4rem);
  --step-4:clamp(2.1rem,1.4rem + 3.2vw,4.6rem);
  --step-5:clamp(2.8rem,1.5rem + 6vw,7.4rem);

  --gut:clamp(1.25rem,4vw,4.5rem);
  --max:1440px;
  --sec-y:clamp(4rem,8vw,8.5rem);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* --- THEME A : Deep Navy × Electric Blue（keita 指示で A 固定・2026-09-08）--------------- */
[data-theme="navy"]{
  --bg:#071322; --bg-2:#0b1c30; --bg-3:#12293f;
  --fg:#e8f2fb; --fg-2:#a9c2d8; --fg-3:#63809b;
  --accent:#3ea8ff; --accent-2:#96cdf6; --accent-ink:#04101d;
  --line:rgba(150,205,246,.17);
  --grid:rgba(150,205,246,.09);
  --p1:#3ea8ff; --p2:#96cdf6; --p3:#e8f2fb; --p4:#1e4b73; --p5:#4074a4;
  --intro-bg:#071322; --intro-fg:#e8f2fb;
  --logo-invert:invert(1);
  --shadow:0 30px 80px -30px rgba(0,0,0,.85);
}
/* ===========================================================================
   2. BASE
   =========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-ja);
  font-weight:400;
  background:var(--bg);
  color:var(--fg);
  line-height:1.9;
  letter-spacing:.04em;
  overflow-x:hidden;
  font-feature-settings:"palt" 1;
  transition:background .6s var(--ease),color .6s var(--ease);
}
body.is-locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--accent);color:var(--accent-ink)}

.mono{font-family:var(--font-mono);letter-spacing:.08em;font-size:var(--step-0)}
.en{font-family:var(--font-en);letter-spacing:.02em}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* ===========================================================================
   3. 背景レイヤー（常時稼働 canvas）
   =========================================================================== */
#bg-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}
main,header,footer{position:relative;z-index:2}

/* ===========================================================================
   4. イントロ（K → 幾何プリミティブ → ロゴ着地 / 約3.6秒）
   =========================================================================== */
.intro{
  position:fixed;inset:0;z-index:9999;
  background:var(--intro-bg);
  display:none;place-items:center;
  transition:clip-path 1s var(--ease),opacity .5s .5s;
  clip-path:inset(0 0 0 0);
}
/* JS が無い環境ではイントロを出さない（全画面を覆ったまま残るのを防ぐ） */
.js .intro{display:grid}
.intro.is-done{clip-path:inset(0 0 100% 0);pointer-events:none}
.intro.is-hidden{display:none}
/* 再生時に「上から降りてくる」ワイプを出さず、初回ロードと同じく最初から全面被せる */
.intro.no-anim{transition:none}
.intro__stage{position:relative;width:min(78vw,560px);aspect-ratio:2.2/1}
.intro__cells{position:absolute;inset:0}
.cell{
  position:absolute;
  background:var(--intro-fg);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  will-change:transform,opacity;
  transition:transform .9s var(--ease),opacity .5s linear,
             border-radius .9s var(--ease),background-color .9s var(--ease),
             clip-path .9s var(--ease);
}
.intro__grid{
  position:absolute;inset:0;opacity:0;
  background-image:
    linear-gradient(to right,var(--intro-fg) 1px,transparent 1px),
    linear-gradient(to bottom,var(--intro-fg) 1px,transparent 1px);
  background-size:calc(100%/6) calc(100%/6);
  transition:opacity .35s linear;
}
.intro__grid.on{opacity:.14}
.intro__logo{
  position:absolute;inset:0;display:grid;place-items:center;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease);
}
.intro__logo.on{clip-path:inset(0 0 0 0)}
/* 着地ロゴは 2025年版の実データ。読み込み前でも座標が取れるよう aspect-ratio を固定 */
.intro__logo img{width:min(62vw,420px);height:auto;aspect-ratio:459/122}
.intro__rule{
  position:absolute;left:50%;bottom:14%;height:2px;width:min(78vw,560px);
  background:var(--accent);transform:translateX(-50%) scaleX(0);
  transition:transform .72s .04s var(--ease);
}
.intro__rule.on{transform:translateX(-50%) scaleX(1)}
.intro__meta{
  position:absolute;bottom:clamp(1.4rem,4vw,3rem);left:0;right:0;
  display:flex;justify-content:space-between;
  padding-inline:clamp(1.4rem,4vw,3rem);
  color:var(--intro-fg);opacity:0;transition:opacity .5s .3s;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
}
.intro__meta.on{opacity:.5}

/* ===========================================================================
   5. HEADER
   =========================================================================== */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;gap:1.5rem;
  padding:1rem var(--gut);
  border-bottom:1px solid transparent;
  transition:border-color .4s,transform .5s var(--ease);
}
/* ぼかしは擬似要素へ。.hd 自身に backdrop-filter を置くと包含ブロックが
   生成され、モバイルナビ（position:fixed）がヘッダー内に閉じ込められる */
.hd::before{
  content:"";position:absolute;inset:0;z-index:-1;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  transition:background .4s;
}
.hd.scrolled{border-bottom-color:var(--line)}
.hd__logo{display:flex;align-items:center;flex:0 0 auto}
/* ロゴは 2025年版の実データ（黒・透過PNG）。暗いテーマでは invert で白抜きにする */
.logo-img{filter:var(--logo-invert);display:block}
.hd__logo .logo-img{height:clamp(26px,2.3vw,32px);width:auto}
.hd__nav{display:flex;gap:clamp(.9rem,1.8vw,2rem);margin-left:auto;align-items:center}
.hd__nav a{
  font-size:.78rem;letter-spacing:.1em;color:var(--fg-2);white-space:nowrap;
  position:relative;padding-block:.4rem;transition:color .3s;
}
.hd__nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.hd__nav a:hover{color:var(--fg)}
.hd__nav a:hover::after,.hd__nav a[aria-current="page"]::after{transform:scaleX(1)}
.hd__nav a[aria-current="page"]{color:var(--fg)}

/* 営業状態インジケータ（元サイト記載の 9:00-17:00 / 土日祝休 に基づく） */
.hd__clock{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--fg-2);padding-left:1.1rem;border-left:1px solid var(--line);
}
.hd__dot{width:7px;height:7px;border-radius:50%;background:var(--fg-3);flex:0 0 auto}
.hd__clock.open .hd__dot{background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}
}
.hd__burger{display:none}

/* ===========================================================================
   6. HERO
   =========================================================================== */
.hero{
  min-height:100svh;display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding-top:clamp(6rem,14vh,9rem);padding-bottom:clamp(4rem,10vh,7rem);
}
.hero__inner{
  width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.hero__eyebrow{
  display:flex;align-items:center;gap:.8rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  color:var(--fg-3);margin-bottom:clamp(1.2rem,3vw,2.2rem);
}
.hero__eyebrow::before{content:"";width:clamp(24px,4vw,56px);height:1px;background:var(--accent)}
/* h1 は「情報をビジョンに、」「サービスで現実に。」の2行固定。
   各行 9字＋字間 .02em ≒ 9.2em なので、親（.hero__copy）幅の 10.6cqi を上限にして途中改行を防ぐ。
   cqi 非対応ブラウザは直前の宣言（--step-4）にフォールバック */
.hero__copy{container-type:inline-size}
.hero h1{
  font-size:var(--step-4);
  font-size:min(var(--step-4),10.6cqi);
  font-weight:700;line-height:1.42;
  letter-spacing:.02em;margin-bottom:clamp(1.4rem,3vw,2.4rem);
}
.hero h1 .ln{display:block;overflow:hidden;white-space:nowrap}
.hero h1 .ln>span{display:block}
.js .hero h1 .ln>span{transform:translateY(105%);opacity:0}
.hero.ready h1 .ln>span{
  transform:translateY(0);opacity:1;
  transition:transform 1.05s var(--ease),opacity .9s;
}
.hero.ready h1 .ln:nth-child(2)>span{transition-delay:.11s}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__sub{max-width:34em;color:var(--fg-2);font-size:var(--step-1);line-height:2.1}
.js .hero__sub{opacity:0;transform:translateY(16px)}
.hero.ready .hero__sub{opacity:1;transform:none;transition:opacity .9s .34s var(--ease),transform .9s .34s var(--ease)}
.hero__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
.js .hero__tags{opacity:0}
.hero.ready .hero__tags{opacity:1;transition:opacity .8s .5s}
.tag{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;
  padding:.42rem .8rem;border:1px solid var(--line);border-radius:99px;color:var(--fg-2);
}
.tag.is-new{border-color:var(--accent);color:var(--accent)}
/* 個人事業主向けの入口（先方要望 2026-09-08）。ヒーローから直接 #partners へ */
.hero__link{
  display:inline-flex;align-items:center;gap:1rem;
  margin-top:clamp(1.4rem,2.6vw,2rem);padding:.85rem 1.2rem .85rem 1.3rem;
  border:1px solid var(--accent);color:var(--fg);
  font-size:var(--step-0);letter-spacing:.06em;
}
.js .hero__link{opacity:0;transform:translateY(12px)}
.hero__link .arrow{width:34px;height:1px;background:var(--accent);transform:scaleX(.6);transform-origin:left;transition:transform .5s var(--ease)}
.hero__link:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.hero__link:hover .arrow{transform:scaleX(1)}
.hero.ready .hero__link{
  opacity:1;transform:none;
  transition:opacity .8s .62s var(--ease),transform .8s .62s var(--ease),background .4s;
}

/* 写真ストリップ（現行メインビジュアルの縦帯構成を継承） */
.hero__strips{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,.8vw,12px);height:min(62vh,540px)}
.strip{position:relative;overflow:hidden;background:var(--bg-2)}
.js .strip{opacity:0;transform:translateY(40px)}
.hero.ready .strip{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.hero.ready .strip:nth-child(1){transition-delay:.30s}
.hero.ready .strip:nth-child(2){transition-delay:.40s}
.hero.ready .strip:nth-child(3){transition-delay:.50s}
.hero.ready .strip:nth-child(4){transition-delay:.60s}
.strip img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.06) brightness(.82);
  transition:transform 1.2s var(--ease),filter .8s;
  transform:scale(1.06);
}
.strip::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--bg) 88%,transparent));
  mix-blend-mode:multiply;
}
.hero__strips:hover .strip img{filter:grayscale(0) contrast(1.02) brightness(.92)}
.strip:nth-child(odd){transform:translateY(clamp(10px,2vw,28px))}
.hero.ready .strip:nth-child(odd){transform:translateY(clamp(10px,2vw,28px))}

.hero__scroll{
  position:absolute;left:var(--gut);bottom:clamp(1.4rem,3vh,2.4rem);
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--fg-3);
}
.hero__scroll span{display:block;width:52px;height:1px;background:var(--line);position:relative;overflow:hidden}
.hero__scroll span::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateX(-100%);animation:sc 2.4s var(--ease-io) infinite;
}
@keyframes sc{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* ===========================================================================
   7. マーキー（元サイトの語彙のみ）
   =========================================================================== */
.marquee{
  border-block:1px solid var(--line);padding-block:clamp(.7rem,1.4vw,1.1rem);
  overflow:hidden;display:flex;gap:0;background:color-mix(in srgb,var(--bg-2) 60%,transparent);
}
.marquee__row{display:flex;flex:0 0 auto;gap:2.5rem;padding-right:2.5rem;animation:mq 38s linear infinite}
.marquee span{
  font-family:var(--font-en);font-size:clamp(.9rem,1.6vw,1.3rem);
  font-weight:300;color:var(--fg-3);letter-spacing:.04em;white-space:nowrap;
  display:flex;align-items:center;gap:2.5rem;
}
.marquee span::after{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%;flex:0 0 auto}
@keyframes mq{to{transform:translateX(-100%)}}

/* ===========================================================================
   8. SECTION 共通
   =========================================================================== */
.sec{padding-block:var(--sec-y);position:relative}
.sec__head{
  display:flex;align-items:baseline;gap:clamp(.8rem,2vw,1.6rem);
  margin-bottom:clamp(2.2rem,5vw,4rem);flex-wrap:wrap;
}
.sec__num{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--accent);
  padding-top:.5rem;
}
.sec__title{display:flex;flex-direction:column;gap:.35rem}
.sec__title .ja{font-size:var(--step-3);font-weight:700;letter-spacing:.04em;line-height:1.35}
.sec__title .en{font-family:var(--font-en);font-size:.74rem;letter-spacing:.2em;color:var(--fg-3);text-transform:uppercase}
.sec__lead{max-width:44em;color:var(--fg-2);font-size:var(--step-1);line-height:2.15;margin-top:.4rem}

/* リビール */
.js .reveal>*{opacity:0;transform:translateY(28px)}
.reveal.in>*{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1s var(--ease)}
.reveal.in>*:nth-child(2){transition-delay:.08s}
.reveal.in>*:nth-child(3){transition-delay:.16s}
.reveal.in>*:nth-child(4){transition-delay:.24s}
.reveal.in>*:nth-child(5){transition-delay:.32s}

/* ===========================================================================
   9. MESSAGE
   =========================================================================== */
.msg{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.msg__visual{position:relative;overflow:hidden}
.msg__visual img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.3) brightness(.85);transition:transform 1.4s var(--ease)}
.msg__visual:hover img{transform:scale(1.05)}
.msg__visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 24%,transparent),transparent 60%);
}
.msg__quote{
  font-family:var(--font-serif);font-size:var(--step-2);line-height:2.1;
  letter-spacing:.05em;padding-left:clamp(1rem,2vw,1.6rem);
  border-left:2px solid var(--accent);margin-bottom:2rem;
}
.msg__body p{color:var(--fg-2);line-height:2.2;margin-bottom:1.4rem}
.msg__sign{
  display:flex;align-items:baseline;gap:.9rem;margin-top:2.4rem;
  padding-top:1.4rem;border-top:1px solid var(--line);
}
.msg__sign .role{font-family:var(--font-mono);font-size:.7rem;color:var(--fg-3);letter-spacing:.1em}
.msg__sign .name{font-size:1.15rem;letter-spacing:.14em}

/* ===========================================================================
   10. BUSINESS
   =========================================================================== */
.biz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.card{
  position:relative;padding:clamp(1.6rem,3vw,2.6rem);
  background:color-mix(in srgb,var(--bg-2) 88%,transparent);
  border:1px solid var(--line);overflow:hidden;
  transition:border-color .5s,transform .7s var(--ease),background .5s;
}
.card:hover{border-color:var(--accent);transform:translateY(-6px)}
.card__num{font-family:var(--font-mono);font-size:.7rem;color:var(--accent);letter-spacing:.14em;margin-bottom:1.6rem;display:block}
.card h3{font-size:var(--step-2);font-weight:700;line-height:1.6;margin-bottom:1rem;letter-spacing:.03em}
.card p{color:var(--fg-2);font-size:var(--step-1);line-height:2.05}
.card__shape{
  position:absolute;right:-30px;bottom:-30px;width:130px;height:130px;
  opacity:.12;transition:transform .9s var(--ease),opacity .6s;
}
.card:hover .card__shape{transform:rotate(28deg) scale(1.15);opacity:.24}
.card.is-new{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.card__badge{
  position:absolute;top:0;right:0;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  background:var(--accent);color:var(--accent-ink);padding:.3rem .7rem;
}
.ph{
  color:var(--accent-2);border-bottom:1px dashed color-mix(in srgb,var(--accent) 60%,transparent);
  font-style:normal;
}
/* メールアドレスのリンク（a は既定で下線なし＝リンクと分かるように下線だけ足す） */
.mail{text-decoration:underline;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);transition:text-decoration-color .25s}
.mail:hover{text-decoration-color:var(--accent)}

/* 派遣2軸 */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(1rem,2vw,1.6rem)}
.duo__item{
  position:relative;padding:clamp(1.8rem,3.4vw,3rem);
  border:1px solid var(--line);
  background:linear-gradient(160deg,color-mix(in srgb,var(--bg-3) 70%,transparent),transparent);
  display:flex;flex-direction:column;gap:1rem;min-height:clamp(220px,26vw,300px);
  transition:border-color .5s,background .5s;
}
.duo__item:hover{border-color:var(--accent)}
.duo__item .en{font-size:.72rem;letter-spacing:.2em;color:var(--fg-3)}
.duo__item h3{font-size:var(--step-3);font-weight:700;letter-spacing:.03em;line-height:1.45}
.duo__item p{color:var(--fg-2);font-size:var(--step-1);line-height:2.05}
.duo__item .arrow{
  margin-top:auto;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;color:var(--accent);
}
.duo__item .arrow::after{
  content:"";width:52px;height:1px;background:var(--accent);
  transform:scaleX(.538);transform-origin:left;transition:transform .5s var(--ease);
}
.duo__item:hover .arrow::after{transform:scaleX(1)}

/* ===========================================================================
   11. COMPANY
   =========================================================================== */
.comp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.dl{border-top:1px solid var(--line)}
.dl__row{
  display:grid;grid-template-columns:clamp(7rem,14vw,11rem) minmax(0,1fr);
  gap:1rem;padding-block:clamp(.9rem,1.8vw,1.3rem);
  border-bottom:1px solid var(--line);align-items:baseline;
}
.dl__row dt{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--fg-3)}
.dl__row dd{font-size:var(--step-1);line-height:1.9}
.comp__aside{
  border:1px solid var(--line);padding:clamp(1.6rem,3vw,2.4rem);
  background:color-mix(in srgb,var(--bg-2) 70%,transparent);
}
.comp__aside h3{font-size:var(--step-2);margin-bottom:1rem;font-weight:700;letter-spacing:.03em}
.comp__aside p{color:var(--fg-2);font-size:var(--step-0);line-height:2.1}
.license{
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px dashed var(--line);
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;color:var(--fg-2);
}
.license b{color:var(--accent);font-weight:400}

/* ===========================================================================
   12. SECURITY POLICY
   =========================================================================== */
.pol{
  border:1px solid var(--line);padding:clamp(1.8rem,4vw,3.4rem);
  background:color-mix(in srgb,var(--bg-2) 78%,transparent);position:relative;overflow:hidden;
}
.pol::before{
  content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--accent);
}
.pol__lead{font-size:var(--step-2);line-height:2.05;margin-bottom:1.8rem;letter-spacing:.03em}
.pol__sub{font-size:var(--step-1);font-weight:700;letter-spacing:.12em;margin-bottom:1.1rem}
.pol__list{display:grid;gap:1rem;counter-reset:pol}
.pol__list li{
  display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.8rem;
  color:var(--fg-2);line-height:2.05;font-size:var(--step-1);
  padding-bottom:1rem;border-bottom:1px solid var(--line);
}
.pol__list li:last-child{border-bottom:none;padding-bottom:0}
.pol__list li::before{
  /* 原文が「1.」「2.」表記のため、装飾で 01/02 に置き換えない */
  counter-increment:pol;content:counter(pol) ".";
  font-family:var(--font-mono);font-size:.8rem;color:var(--accent);padding-top:.4rem;
}
.pol__sign{margin-top:2.4rem;text-align:right;color:var(--fg-3);font-size:var(--step-0);line-height:2}
.pol__sign strong{display:block;color:var(--fg);font-weight:500;letter-spacing:.1em;font-size:var(--step-1)}

/* ===========================================================================
   13. ACCESS / CONTACT
   =========================================================================== */
.acc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.acc__info{display:grid;gap:clamp(1.2rem,2.4vw,2rem)}
.acc__block .lbl{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:.5rem}
.acc__block .val{font-size:var(--step-2);line-height:1.85;letter-spacing:.04em}
.acc__block .note{color:var(--fg-3);font-size:var(--step-0);margin-top:.3rem}
/* Googleマップ（2拠点） */
.acc__maps{display:grid;gap:clamp(1rem,2vw,1.4rem)}
.map{margin:0;border:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.map figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  padding:.8rem 1rem;font-size:var(--step-0);color:var(--fg-2);border-bottom:1px solid var(--line);
}
.map figcaption .mono{color:var(--accent);font-size:.66rem}
.map iframe{display:block;width:100%;aspect-ratio:16/10;border:0;filter:grayscale(.2)}
.map__link{
  display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--accent);
}
.map__link::after{content:"→"}
/* Artifact（claude.ai）向け: CSP で iframe が出ない環境では変換スクリプトがこの案内に差し替える */
.map__fallback{aspect-ratio:16/10;display:grid;place-items:center;padding:1.2rem;text-align:center;color:var(--fg-3);font-size:var(--step-0);line-height:1.9;background:color-mix(in srgb,var(--bg) 50%,transparent)}

.cta{
  margin-top:var(--sec-y);padding:clamp(2.4rem,6vw,5rem);
  border:1px solid var(--line);text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--bg-3) 80%,transparent),transparent 70%);
}
.cta h2{font-size:var(--step-3);font-weight:700;letter-spacing:.04em;line-height:1.5;margin-bottom:1rem}
.cta p{color:var(--fg-2);margin-bottom:2rem}
.btn{
  display:inline-flex;align-items:center;gap:.8rem;
  padding:.95rem 2.2rem;border:1px solid var(--accent);color:var(--accent);
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.12em;
  position:relative;overflow:hidden;transition:color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1;
}
.btn:hover{color:var(--accent-ink)}
.btn:hover::before{transform:translateY(0)}
.btn>*{position:relative;z-index:1}

/* ===========================================================================
   13b. GROWTH : 売上推移（先方提供の実数値。単一系列・単一色・細いバー）
   =========================================================================== */
.gr{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.gr__lbl{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:.8rem}
.gr__num{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;line-height:1}
.gr__num b{font-family:var(--font-en);font-weight:500;font-size:clamp(4.2rem,9vw,8.4rem);letter-spacing:-.01em}
.gr__num span{font-size:var(--step-2);font-weight:500;letter-spacing:.06em}
.gr__note{color:var(--fg-2);font-size:var(--step-1);line-height:2.05;margin-top:1.4rem;max-width:26em}
.gr__chart{margin:0;display:grid;gap:clamp(1rem,2vw,1.5rem)}
/* 3列目（数値）は固定幅にして、どの行もトラックの長さを同じにする（auto だとラベル幅で棒の基準が行ごとにずれる） */
.gr__row,.gr__axis{display:grid;grid-template-columns:clamp(5rem,9vw,7rem) minmax(0,1fr) clamp(7.5rem,11vw,9.5rem);gap:1rem;align-items:center}
.gr__k{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;color:var(--fg-2)}
.gr__k small{display:block;font-size:.6rem;color:var(--fg-3);letter-spacing:.14em}
.gr__bar{display:block;height:16px;position:relative;background:color-mix(in srgb,var(--line) 60%,transparent)}
.gr__bar i{
  position:absolute;left:0;top:0;bottom:0;width:100%;
  background:var(--accent);border-radius:0 4px 4px 0;
  transform:scaleX(var(--w));transform-origin:left;
  transition:transform 1.3s var(--ease),filter .3s;
}
.js .gr__bar i{transform:scaleX(0)}
.js .gr.in .gr__bar i{transform:scaleX(var(--w))}
.gr.in .gr__row:nth-child(2) .gr__bar i{transition-delay:.15s}
.gr.in .gr__row:nth-child(3) .gr__bar i{transition-delay:.3s}
/* 見込は色相を変えず淡色で区別（半透明にすると一番大きい値が一番弱く見える） */
.gr__row.is-est .gr__bar i{background:var(--accent-2)}
/* 目盛り（0 / 5億 / 10億）: トラック列にだけ置く */
.gr__axis{margin-top:-.2rem}
.gr__scale{grid-column:2;position:relative;height:1.3rem;border-top:1px solid var(--line)}
.gr__scale span{position:absolute;top:.35rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;color:var(--fg-3);white-space:nowrap}
.gr__scale span:nth-child(1){left:0}
.gr__scale span:nth-child(2){left:50%;transform:translateX(-50%)}
.gr__scale span:nth-child(3){right:0}
.gr__row:hover .gr__bar i{filter:brightness(1.18)}
.gr__v{font-family:var(--font-mono);font-size:var(--step-1);letter-spacing:.04em;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.gr__v small{font-size:.66rem;color:var(--fg-3);margin-left:.15rem}
.gr__chart figcaption{font-size:.72rem;color:var(--fg-3);letter-spacing:.06em;margin-top:.2rem}

/* ===========================================================================
   13c. PARTNERS : お仕事をお探しの個人事業主の方へ（文言は仮＝要確認）
   =========================================================================== */
.pt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.4rem,3vw,2.4rem);align-items:stretch}
.pt__lead{font-size:var(--step-2);line-height:1.95;letter-spacing:.03em;margin-bottom:clamp(1.4rem,3vw,2.2rem);max-width:30em}
.pt__dl{border-top:1px solid var(--line)}
.pt__dl>div{display:grid;grid-template-columns:clamp(6rem,10vw,8rem) minmax(0,1fr);gap:1rem;padding-block:.9rem;border-bottom:1px solid var(--line);align-items:baseline}
.pt__dl dt{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--fg-3)}
.pt__dl dd{font-size:var(--step-1);line-height:1.9;color:var(--fg-2)}
.pt__cta{
  border:1px solid var(--accent);padding:clamp(1.8rem,3.4vw,3rem);
  display:flex;flex-direction:column;gap:1rem;justify-content:center;
  background:color-mix(in srgb,var(--accent) 8%,transparent);position:relative;overflow:hidden;
}
.pt__cta h3{font-size:var(--step-3);font-weight:700;line-height:1.45;letter-spacing:.03em}
.pt__cta p{color:var(--fg-2);font-size:var(--step-1);line-height:2}
.pt__cta .btn{align-self:flex-start;margin-top:.6rem;padding:1.05rem 2.2rem}
.pt__cta .card__shape{right:-46px;bottom:-46px;width:190px;height:190px}
.pt__cta:hover .card__shape{transform:rotate(28deg) scale(1.15);opacity:.22}

/* ISMS 認証（情報セキュリティ節の上段）。マークは認証機関支給の実データ＝配色を変えない */
.cert{
  display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(1.4rem,3vw,2.6rem);
  align-items:center;margin-bottom:clamp(1.4rem,3vw,2.2rem);
  border:1px solid var(--line);padding:clamp(1.4rem,3vw,2.4rem);
  background:color-mix(in srgb,var(--bg-2) 78%,transparent);
}
.cert__marks{background:#fff;padding:clamp(.9rem,2vw,1.4rem);display:grid;place-items:center}
.cert__marks img{width:100%;max-width:420px;height:auto}
.cert__body h3{font-size:var(--step-2);font-weight:700;line-height:1.6;letter-spacing:.03em;margin-bottom:.9rem}
.cert__body p{color:var(--fg-2);font-size:var(--step-1);line-height:2.05}
.cert__no{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;color:var(--fg);margin-top:.8rem;display:block}
.cert__no b{color:var(--accent);font-weight:400}

/* ===========================================================================
   14. FOOTER
   =========================================================================== */
.ft{border-top:1px solid var(--line);padding-block:clamp(2.6rem,6vw,4.4rem);margin-top:var(--sec-y)}
.ft__top{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.4rem)}
.ft__logo .logo-img{height:38px;width:auto;margin-bottom:.7rem}
.ft__logo span{font-size:.72rem;color:var(--fg-3);letter-spacing:.14em}
.ft__nav{display:flex;gap:clamp(1.2rem,3vw,3rem);flex-wrap:wrap}
.ft__nav a{font-size:.8rem;color:var(--fg-2);transition:color .3s}
.ft__nav a:hover{color:var(--accent)}
.ft__bottom{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.6rem;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;color:var(--fg-3);
}

/* ===========================================================================
   16. カーソル（ポインタ精度が高い端末のみ）
   =========================================================================== */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
/* 拡大は JS 側で scale を補間（レイアウトを触らない） */
.cursor{width:34px;height:34px;border:1px solid #fff;transition:opacity .3s}
.cursor-dot{width:5px;height:5px;background:#fff}
@media (pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ===========================================================================
   17b. 派遣事業は許可取得まで非表示（先方指示 2026-09-08）
   .haken-only を付けた要素（ヒーローのタグ／マーキー／事業カード03／派遣2軸／
   会社概要の事業内容の一部と右カラム／フッターの許可番号）をまとめて隠す。
   許可取得後は **このブロックを丸ごと削除** すれば一括で表示に戻る。
   =========================================================================== */
.haken-only{display:none!important}
.biz{grid-template-columns:repeat(2,minmax(0,1fr))}
.comp{grid-template-columns:minmax(0,1fr);max-width:60rem}

/* ===========================================================================
   17c. エントリー CTA（メールでエントリー＝mailto）
   フォームのモーダルと送信 API は 2026-09-08 撤去（→ CLAUDE.md「エントリー導線＝mailto」）
   =========================================================================== */
button.btn{background:transparent;cursor:pointer;line-height:inherit}
.pt__cta .pt__mail{margin-top:1.1rem;font-size:var(--step-0);color:var(--fg-3);line-height:1.8}

/* ===========================================================================
   17d. 下層ページの見出し（PAGE HERO）
   =========================================================================== */
.phero{padding-top:clamp(7.5rem,16vh,11rem);padding-bottom:clamp(1.5rem,4vw,3rem)}
.phero__num{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--accent);display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.phero__num::before{content:"";width:clamp(24px,4vw,56px);height:1px;background:var(--accent)}
.phero h1{font-size:var(--step-4);font-weight:700;line-height:1.35;letter-spacing:.03em}
.phero__en{font-family:var(--font-en);font-size:.8rem;letter-spacing:.22em;color:var(--fg-3);text-transform:uppercase;margin-top:.8rem;display:block}
.phero__lead{max-width:44em;color:var(--fg-2);font-size:var(--step-1);line-height:2.1;margin-top:1.6rem}

/* ===========================================================================
   17e. トップの目次（下層ページへの導線）
   =========================================================================== */
.idx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.idx__item{
  position:relative;display:flex;flex-direction:column;gap:.9rem;
  padding:clamp(1.8rem,3.4vw,3rem);border:1px solid var(--line);overflow:hidden;
  background:color-mix(in srgb,var(--bg-2) 80%,transparent);
  transition:border-color .5s,transform .7s var(--ease);
}
.idx__item:hover{border-color:var(--accent);transform:translateY(-6px)}
.idx__num{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--accent)}
.idx__item h3{font-size:var(--step-3);font-weight:700;line-height:1.45;letter-spacing:.03em}
.idx__item p{color:var(--fg-2);font-size:var(--step-1);line-height:2}
.idx__item .arrow{margin-top:auto;display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;color:var(--accent)}
.idx__item .arrow::after{content:"";width:52px;height:1px;background:var(--accent);transform:scaleX(.538);transform-origin:left;transition:transform .5s var(--ease)}
.idx__item:hover .arrow::after{transform:scaleX(1)}
.idx__item:hover .card__shape{transform:rotate(28deg) scale(1.15);opacity:.24}

/* ===========================================================================
   17f. ページ遷移の幕（博報堂型: クリック→幕が上がって覆う→次ページで幕が上へ抜ける）
   表示は display で確定し、動きは transform だけ。完走に依存せず setTimeout で必ず片付ける
   =========================================================================== */
.curtain{display:none;position:fixed;inset:0;z-index:9995;background:var(--intro-bg);pointer-events:none;transform:translateY(100%)}
.curtain.is-on{display:block}
.curtain.is-cover{transform:translateY(0)}
.curtain.is-up{transform:translateY(-100%)}
.curtain.is-anim{transition:transform .55s var(--ease-io)}

/* ===========================================================================
   18. RESPONSIVE
   =========================================================================== */
@media (max-width:1280px){
  .biz{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ナビが7項目になり 981〜1020px で末尾1文字が折り返したため、ドロワー切替を 980→1080px に上げた（design-checker 2026-09-08） */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr;gap:clamp(2rem,6vw,3rem)}
  .hero__strips{height:min(42vh,340px)}
  .msg,.comp,.acc,.gr,.pt,.cert,.idx{grid-template-columns:1fr}
  .acc__maps{grid-template-columns:1fr}
  .biz,.duo{grid-template-columns:1fr}
  /* 画面全体を覆うドロワー。中途半端な位置で止まらないよう不透明度で開閉し、
     動きは各項目のスタガーで出す */
  .hd__nav{
    position:fixed;inset:0;background:var(--bg);z-index:1;
    flex-direction:column;justify-content:center;align-items:center;gap:1.6rem;
    opacity:0;visibility:hidden;
    transition:opacity .4s var(--ease),visibility .4s;
  }
  .hd__nav.open{opacity:1;visibility:visible}
  .hd__nav a{
    font-size:1.15rem;opacity:0;transform:translateY(18px);
    transition:opacity .5s var(--ease),transform .55s var(--ease),color .3s;
  }
  .hd__nav.open a{opacity:1;transform:none}
  .hd__nav.open a:nth-child(1){transition-delay:.04s}
  .hd__nav.open a:nth-child(2){transition-delay:.08s}
  .hd__nav.open a:nth-child(3){transition-delay:.12s}
  .hd__nav.open a:nth-child(4){transition-delay:.16s}
  .hd__nav.open a:nth-child(5){transition-delay:.20s}
  .hd__nav.open a:nth-child(6){transition-delay:.24s}
  .hd__nav.open a:nth-child(7){transition-delay:.28s}
  .hd__clock{margin-left:auto;padding-left:0;border-left:none}
  .hd__burger{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    background:none;border:none;cursor:pointer;padding:.5rem;z-index:2;
    min-width:44px;min-height:44px;
  }
  .hd__burger i{display:block;width:22px;height:1.5px;background:var(--fg);transition:transform .4s var(--ease),opacity .3s}
  .hd__burger.open i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .hd__burger.open i:nth-child(2){opacity:0}
  .hd__burger.open i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
@media (max-width:640px){
  .hero__strips{grid-template-columns:repeat(2,1fr);height:min(38vh,280px)}
  .dl__row{grid-template-columns:1fr;gap:.2rem}
  .gr__row,.gr__axis{grid-template-columns:3.6rem minmax(0,1fr) 6.4rem;gap:.6rem}
  .gr__num b{font-size:4rem}
  .pt__dl>div{grid-template-columns:1fr;gap:.2rem}
  .pol__list li{grid-template-columns:1.8rem minmax(0,1fr)}
  .hero__scroll{display:none}
  .hero__link{width:100%;justify-content:space-between;font-size:.8rem}
  .hero__link .arrow{flex:0 0 34px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .js .intro{display:none}
  .reveal>*{opacity:1;transform:none}
  .js .gr__bar i{transform:scaleX(var(--w))}
  .hero h1 .ln>span{transform:none;opacity:1}
}

/* ===========================================================================
   19. PRINT : A4印刷（派遣許可申請の参考資料／営業配布への転用を想定）
   ・テーマに関わらず白地・黒文字に強制（インクと可読性）
   ・画面演出（背景canvas・カーソル・切替UI・イントロ・マーキー）は落とす
   ・スクロール演出で opacity:0 のままの要素を必ず出す（これを忘れると白紙になる）
   =========================================================================== */
@media print{
  @page{size:A4;margin:14mm 15mm}

  html,html[data-theme]{
    --bg:#fff; --bg-2:#fff; --bg-3:#f7f8fa;
    --fg:#111; --fg-2:#333; --fg-3:#666;
    --accent:#1c4f8b; --accent-2:#1c4f8b; --accent-ink:#fff;
    --line:#c2c6cc; --grid:transparent;
    --logo-invert:none;
    --sec-y:9mm;
  }
  body{background:#fff;color:#111;line-height:1.75;font-size:10.5pt}

  /* 画面専用の演出・UIは印刷しない */
  .intro,#bg-canvas,.grain,.cursor,.cursor-dot,
  .hd__burger,.hd__nav,.hd__clock,.curtain,
  .marquee,.hero__scroll,.card__shape,.cta .btn{display:none!important}

  /* 演出で隠れている要素を確実に出す */
  .reveal>*,.hero h1 .ln>span,.hero__sub,.hero__tags,.hero__link,.strip{
    opacity:1!important;transform:none!important;
  }

  /* 固定配置を解除して紙の流れに載せる */
  .hd{position:static;padding:0 0 4mm;border-bottom:1px solid var(--line);background:none}
  .hd::before{display:none}
  .hd__logo .logo-img{height:9mm}
  main,header,footer{z-index:auto}

  /* ヒーローは1枚目の顔。紙では高さを抑えて写真は1枚だけ */
  .hero{min-height:auto;padding:6mm 0 8mm;display:block}
  .hero__inner{display:block;padding:0;max-width:none}
  .hero h1{font-size:22pt;line-height:1.5;margin-bottom:4mm}
  .hero h1 em{color:var(--accent)}
  .hero__sub{font-size:10.5pt;max-width:none;line-height:1.8}
  .hero__strips{display:none}
  .hero__eyebrow{margin-bottom:3mm;font-size:8pt}

  /* セクションの区切り */
  .sec{padding-block:7mm;break-inside:auto}
  .sec__head{break-after:avoid;margin-bottom:4mm}
  .sec__title .ja{font-size:14pt}
  .sec__lead{font-size:10.5pt;max-width:none}
  .wrap{padding-inline:0;max-width:none}

  /* まとまりを途中で割らない */
  .card,.duo__item,.comp__aside,.acc__block,.msg__sign,.pol__sign,
  .dl__row,.pol__list li,.gr__row,.pt__dl>div,.pt__cta,.cert{break-inside:avoid}
  .pol{break-inside:auto}
  .pol__lead{break-after:avoid}
  .pol__sub{break-after:avoid}

  /* 会社概要は申請の要。読みやすさ優先で罫線を締める */
  .comp{display:block}
  .comp__aside{margin-top:5mm;background:#f7f8fa;border:1px solid var(--line)}
  .dl__row{grid-template-columns:32mm 1fr;padding-block:2.2mm}
  .dl__row dt{font-size:9pt}
  .dl__row dd{font-size:10.5pt}

  .biz,.duo{display:grid;grid-template-columns:1fr 1fr;gap:4mm}
  .card{padding:4mm;background:#fff;border:1px solid var(--line)}
  .card h3{font-size:11.5pt}
  .card p,.duo__item p{font-size:10pt}
  .duo__item{min-height:0;padding:4mm;background:#fff}
  .duo__item h3{font-size:13pt;line-height:1.5}
  .duo__item .en{font-size:8pt}
  .duo__item .arrow{display:none}

  .msg{display:block}
  .msg__visual{display:none}
  .msg__quote{font-size:12pt;margin-bottom:4mm}
  .msg__body p{font-size:10.5pt}

  #security{break-before:page}
  .pol{padding:5mm;background:#fff;border:1px solid var(--line)}
  .pol__lead{font-size:11pt}

  .acc{display:block}
  .acc__maps{display:none!important}
  .acc__info{gap:4mm}

  .cta{border:none;padding:0;margin-top:6mm;text-align:left;background:none}

  /* 未確定箇所は紙でも一目で分かるように（本番の申請提出前に必ず埋めること） */
  .ph{color:#b00;border-bottom:1px dashed #b00}

  /* 売上推移：バーは演出なしで最終幅、色は確実に刷る */
  .gr,.pt,.cert{display:block}
  .gr__num b{font-size:30pt}
  .gr__chart{margin-top:4mm}
  .gr__bar,.gr__bar i{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .gr__bar i{transform:scaleX(var(--w))!important;transition:none}
  .pt__cta{margin-top:4mm;padding:4mm;background:none;border:1px solid var(--line)}
  .pt .btn,.hero__link .arrow,.pt .card__shape{display:none}
  .hero__link{border:none;padding:0;margin-top:3mm;font-size:9pt}
  .cert{padding:4mm;background:none;margin-bottom:4mm}
  .cert__marks{padding:2mm;max-width:70mm;margin-bottom:3mm}

  .phero{padding:6mm 0 4mm}
  .phero h1{font-size:20pt}
  .idx{display:grid;grid-template-columns:1fr 1fr;gap:4mm}
  .idx__item{padding:4mm;background:#fff;border:1px solid var(--line)}
  .idx__item .arrow,.idx__item .card__shape{display:none}

  .ft{margin-top:6mm;padding-block:4mm}
  .ft__nav{display:none}
  .ft__bottom{font-size:8pt;break-inside:avoid;page-break-inside:avoid}
}