@charset "UTF-8";

/* トップの紙面(第2ラウンド)。共通トークンと共通シェルの後に読み込む。
   面の並び(spec 2026-10-20 §3.2): ヒーロー(白) → 代表の帯(紙色・target-advisory.css) → 3つのメニュー(白)
   → 実績(白・上に罫線) → 始め方(紙色) → 情シス・PMO の入口(白) → CTA帯(紺)。
   本文は紺で16px以上。中央寄せの本文と灰色の細字は使わない。ブレークポイントは 780 / 781 / 1024 / 1025 だけ。 */
.corp-home-main {
  color: var(--corp-ink);
  background: var(--corp-white);
  font-family: var(--corp-font);
}

.corp-home-main .contents-wrap {
  width: var(--corp-content-w);
  margin: 0 auto;
}

.corp-home-main :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) {
  margin-top: 0;
}

.corp-home-main :where(ul, ol) {
  padding: 0;
  list-style: none;
}

/* ---- ヒーロー ------------------------------------------------------------------------------ */
/* 調子は2つ(light / dark)。規則は1組で、色だけをこの変数で切り替える。 */
.corp-home-hero--light {
  --hero-bg: var(--corp-grain), var(--corp-paper-bg); /* 紙色の面には粒子の層を重ねる */
  --hero-text: var(--corp-ink);
  --hero-scope: var(--corp-sky-text);
  --hero-label: var(--corp-sky-text);
  --hero-lead: var(--corp-ink);
  --hero-rule: var(--corp-rule);
  --hero-btn-bg: var(--corp-ink);
  --hero-btn-fg: var(--corp-white);
  --hero-btn-border: var(--corp-ink);
  --hero-btn-edge: var(--corp-press);
  --hero-btn2-bg: var(--corp-white);
  --hero-btn2-fg: var(--corp-ink);
  --hero-btn2-border: var(--corp-ink);
  --hero-btn2-edge: var(--corp-press-light);
  --hero-btn-hover-bg: var(--corp-sky);
  --hero-btn-hover-fg: var(--corp-white);
  --hero-pill: var(--corp-switch); /* スイッチの「入」の色の平塗り。明るい地では粒子とにじみを重ねない。色を替えるときは site-chrome.css の2つのトークンだけ */
  --hero-pill-off: var(--corp-rule);
  --hero-knob: var(--corp-switch-knob);
  --hero-pill-shade: var(--corp-switch-shade);
  --hero-pill-sheen: color-mix(in srgb, var(--corp-white) 38%, transparent);
  --hero-knob-light: var(--corp-switch-knob-light);
  --hero-knob-shade: var(--corp-switch-knob-shade);
  --hero-knob-contact: var(--corp-switch-contact);
  --hero-knob-cast: var(--corp-switch-cast);
  --hero-bloom-alpha: .42;
  --hero-grain-alpha: .22;
}

/* 明るいヒーローは白に近い地なので、暗い面用の明るいスカイではなく通常のスカイで輪を描く(site-chrome.css の暗い面の一覧より強く) */
.home-hero-sec.corp-home-hero--light {
  --corp-focus: var(--corp-sky);
}

.corp-home-hero--dark {
  --hero-bg:
    var(--corp-grain-light),
    linear-gradient(var(--corp-light-a06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--corp-light-a06) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--corp-ink);
  --hero-text: var(--corp-white);
  --hero-scope: var(--corp-glow);
  --hero-label: var(--corp-glow);
  --hero-lead: var(--corp-light);
  --hero-rule: var(--corp-core-line);
  --hero-btn-bg: var(--corp-white);
  --hero-btn-fg: var(--corp-ink);
  --hero-btn-border: var(--corp-white);
  --hero-btn-edge: var(--corp-press-light);
  --hero-btn2-bg: transparent;
  --hero-btn2-fg: var(--corp-white);
  --hero-btn2-border: var(--corp-light-a50);
  --hero-btn2-edge: none; /* 紺の地の透明な枠ボタンには縁の影を付けない */
  --hero-btn-hover-bg: var(--corp-glow);
  --hero-btn-hover-fg: var(--corp-ink);
  /* 紺の地ではネイビー側が沈むので、同じ向きのグラデーションを明るい側へずらす */
  --hero-pill: linear-gradient(135deg, var(--corp-glow), var(--corp-sky) 55%, var(--corp-mid));
  --hero-pill-off: var(--corp-core-line);
  --hero-knob: var(--corp-white);
  --hero-pill-shade: transparent;
  --hero-pill-sheen: transparent;
  --hero-knob-light: var(--hero-knob);
  --hero-knob-shade: var(--hero-knob);
  --hero-knob-contact: transparent;
  --hero-knob-cast: color-mix(in srgb, var(--corp-ink) 45%, transparent);
  --hero-bloom-alpha: .45;
  --current-light: var(--corp-glow); /* 格子を流れる光(grid-current.js)。紺の地では黄でなく淡い水色 */
  --current-core: var(--corp-glow);
  --hero-grain-alpha: .25;
  --corp-focus: var(--corp-glow);
}

/* トグル(ロゴの形)の大きさ。つまみは高さの70%、余白は15%。つまみの移動量は 幅 − 高さ。
   トグルはヘッダーの下端から --toggle-top だけ離して置き、切るのは右端だけ。
   高さは「画面の高さの32%」と「見出し1行目の右隣に残る幅」の小さいほうで決める(1行目と重ねないため。
   1行目は6字ぶん ≒ 5.9 × 文字サイズ。余白 40px は間隔24pxとスクロールバーぶん)。 */
.corp-home-hero {
  --hero-fs: clamp(min(34px, calc((100vw - 40px) / 9.9)), min(8.3vw, 12.5vh), 112px);
  --hero-left: max(40px, calc((100vw - 1200px) / 2));
  --scope-fs: clamp(15px, 1.5vw, 19px);
  --toggle-top: 24px;
  --toggle-gap: calc(24px + .2 * var(--hero-fs)); /* トグルの下端から見出し2行目の字面の上端までの最小の間隔(行間のぶん .2em を足す) */
  --toggle-h: max(150px, min(32vh, calc((100vw - var(--hero-left) - 5.9 * var(--hero-fs) - 40px) / 2)));
  --toggle-w: calc(var(--toggle-h) * 2);
  --toggle-bleed: calc(var(--toggle-h) * .08); /* 右端の外へはみ出す量。つまみの余白(15%)より小さく、つまみは切れない */
  --toggle-beside: calc(var(--scope-fs) * 1.5 + 14px + 1.1 * var(--hero-fs)); /* トグルの横に並ぶ文字の高さ(範囲の行 + 見出し1行目) */
  --knob-d: calc(var(--toggle-h) * .7);
  --knob-inset: calc(var(--toggle-h) * .15);
  --knob-travel: calc(var(--toggle-w) - var(--toggle-h));
  --bloom-blur: 60px;
}

@media screen and (min-width: 1025px) {
  .corp-home-hero--light {
    --bloom-blur: 70px;
  }
}

.corp-home-hero_inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-bottom: 24px;
}

/* 上段。範囲の行と見出し1行目はトグルの横に、2行目はトグルの下端より下に来るよう高さを確保する。余った高さもここが受ける */
.corp-home-hero_top {
  flex: 1 0 auto;
  min-height: calc(var(--toggle-top) + var(--toggle-h) + var(--toggle-gap) - var(--toggle-beside));
  padding-top: 28px;
}

.corp-home-kicker,
.corp-home-section-label {
  margin-bottom: 0;
  color: var(--corp-sky-text);
  font-family: var(--corp-mono);
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.5;
}

.corp-home-hero .corp-home-kicker {
  color: var(--hero-label);
}

/* 装飾のトグル。ヘッダーの下に置き、右端だけをはみ出させる(はみ出しは .corp-home-hero の overflow: clip が受ける) */
.corp-home-hero_toggle {
  position: absolute;
  top: calc(var(--corp-header-h) + var(--toggle-top));
  right: calc(var(--toggle-bleed) * -1);
  z-index: 0;
  width: var(--toggle-w);
  height: var(--toggle-h);
  pointer-events: none;
}

/* にじみ: 同じ形を強くぼかして1枚だけ背後に置く。pill 本体はぼかさない(輪郭がトグルの印なので) */
.corp-home-hero_toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--hero-pill);
  filter: blur(var(--bloom-blur));
  opacity: var(--hero-bloom-alpha);
  animation: corp-home-bloom-on .9s cubic-bezier(.65, 0, .35, 1) .4s both;
}

.corp-home-hero_pill {
  position: absolute;
  inset: 0;
  isolation: isolate;
  border-radius: 9999px;
  background: var(--hero-pill-off);
}

/* 塗り(入)。切の色の上で不透明度だけを動かす(グラデーション同士は補間できないため) */
.corp-home-hero_pill::before,
.corp-home-hero_pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.corp-home-hero_pill::before {
  z-index: -2;
  background: var(--hero-pill);
  /* 溝。塗りの子に置く(pill 本体に置くと、負の z-index の塗りが内側の影を覆う)。塗りと一緒に不透明度が動く */
  box-shadow:
    inset 0 calc(var(--toggle-h) * .025) calc(var(--toggle-h) * .06) var(--hero-pill-shade),
    inset 0 calc(var(--toggle-h) * -.012) 0 var(--hero-pill-sheen),
    inset 0 0 0 1px var(--hero-pill-shade);
  animation: corp-home-fill-on .9s cubic-bezier(.65, 0, .35, 1) .4s both;
}

/* 粒子。pill の角丸の内側だけに乗せ、つまみの下に敷く */
.corp-home-hero_pill::after {
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  mix-blend-mode: soft-light;
  opacity: var(--hero-grain-alpha);
}

.corp-home-hero_knob {
  position: absolute;
  top: var(--knob-inset);
  left: var(--knob-inset);
  width: var(--knob-d);
  height: var(--knob-d);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, var(--hero-knob-light), var(--hero-knob) 62%);
  box-shadow:
    0 calc(var(--toggle-h) * .012) calc(var(--toggle-h) * .02) var(--hero-knob-contact),
    0 calc(var(--toggle-h) * .06) calc(var(--toggle-h) * .12) var(--hero-knob-cast),
    inset 0 1px 0 color-mix(in srgb, var(--corp-white) 26%, transparent),
    inset 0 calc(var(--toggle-h) * -.03) calc(var(--toggle-h) * .06) var(--hero-knob-shade);
  transform: translateX(var(--knob-travel));
  animation: corp-home-knob-on .9s cubic-bezier(.65, 0, .35, 1) .4s both;
}

/* 終わりの状態(入)が基本の指定。始まり(切)だけをここに書くので、アニメーションが無い環境でも「入」になる */
/* 「切」の灰色の溝に黄の影が落ちると濁るので、始まりの影は紺ベースにし、移動と一緒に色を渡す(枚数と寸法は終わりと同じ) */
@keyframes corp-home-knob-on {
  from {
    transform: translateX(0);
    box-shadow:
      0 calc(var(--toggle-h) * .012) calc(var(--toggle-h) * .02) color-mix(in srgb, var(--corp-ink) 30%, transparent),
      0 calc(var(--toggle-h) * .06) calc(var(--toggle-h) * .12) color-mix(in srgb, var(--corp-ink) 16%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--corp-white) 26%, transparent),
      inset 0 calc(var(--toggle-h) * -.03) calc(var(--toggle-h) * .06) var(--hero-knob-shade);
  }
}

@keyframes corp-home-fill-on {
  from { opacity: 0; }
}

@keyframes corp-home-bloom-on {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .corp-home-hero_toggle::before,
  .corp-home-hero_pill::before,
  .corp-home-hero_knob {
    animation: none;
  }
}

/* h1 は3行で1つの文。範囲の行が先、大きな2行が続く。大きな行は折り返さない */
.corp-home-hero h1 {
  max-width: none;
  margin: 0;
  color: var(--hero-text);
  font-size: var(--hero-fs);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.corp-home-h1_scope {
  display: block;
  margin-bottom: 14px;
  color: var(--hero-scope);
  font-size: var(--scope-fs);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}

/* 共通CSSが span に行間・字間を直接当てるので、大きな行は自分で指定する */
.corp-home-h1_line {
  display: block;
  white-space: nowrap;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.corp-home-hero_lead {
  /* 31em: 1280px で「問い合わせに追われない午後。前日に慌てない定例。」/「空いた時間を、…仕事に。」/「日々の対応は、…引き受けます。」の3行に、文の切れ目で折り返す */
  max-width: 31em;
  margin: 16px 0 0;
  color: var(--hero-lead);
  font-size: 18px;
  line-height: 1.85;
  text-wrap: pretty;
  word-break: auto-phrase;
}

/* 文を1つのまとまりにして、折り返しを文の切れ目にする(幅が足りない文は、その中で折り返す) */
.corp-home-hero_sentence {
  display: inline-block;
  max-width: 100%;
}

.corp-home-hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.corp-home-button {
  display: inline-flex;
  min-width: 160px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border: 1px solid var(--corp-ink);
  border-radius: var(--corp-radius);
  background: var(--corp-ink);
  color: var(--corp-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: var(--corp-press);
}

/* 主ボタンは外側の div が見た目、中の a が押せる範囲。a を外側いっぱいに広げ、押せる範囲もフォーカスの輪も見た目の箱と同じにする(枠の1pxぶんは負のマージンで含める) */
.corp-home-button:has(> a) {
  padding: 0;
}

.corp-home-button > a {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  margin: -1px;
  padding: 10px 23px; /* 22px + 外側の枠 1px。ボタンの幅は従来のまま */
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.corp-home-button--outline {
  background: var(--corp-white);
  color: var(--corp-ink);
  box-shadow: var(--corp-press-light);
}

.corp-home-button:active {
  transform: translateY(1px);
  box-shadow: none;
}

.corp-home-button:hover,
.corp-home-button:focus-visible,
.corp-home-button:has(> a:focus-visible) {
  background: var(--corp-sky);
  border-color: var(--corp-sky);
  color: var(--corp-white);
}

/* ヒーローのボタンは調子の変数で塗る(紺の地では白いボタンにする) */
.corp-home-hero .corp-home-button {
  border-color: var(--hero-btn-border);
  background: var(--hero-btn-bg);
  color: var(--hero-btn-fg);
  box-shadow: var(--hero-btn-edge);
}

.corp-home-hero .corp-home-button--outline {
  border-color: var(--hero-btn2-border);
  background: var(--hero-btn2-bg);
  color: var(--hero-btn2-fg);
  box-shadow: var(--hero-btn2-edge);
}

.corp-home-hero .corp-home-button:active {
  box-shadow: none;
}

.corp-home-hero .corp-home-button:hover,
.corp-home-hero .corp-home-button:focus-visible,
.corp-home-hero .corp-home-button:has(> a:focus-visible) {
  border-color: var(--hero-btn-hover-bg);
  background: var(--hero-btn-hover-bg);
  color: var(--hero-btn-hover-fg);
}

/* ---- 共通の見出し・リンク --------------------------------------------------------------------- */
.corp-home-section-title {
  margin: 12px 0 0;
  color: var(--corp-ink);
  font-size: clamp(25px, 3.2vw, 40px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.corp-home-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--corp-sky-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.corp-home-text-link span {
  font-family: var(--corp-mono);
  font-size: 17px;
  text-decoration: none;
  transition: transform .2s ease;
}

.corp-home-text-link:hover span {
  transform: translateX(4px);
}

.corp-home-more-link {
  margin: 24px 0 0;
  line-height: var(--corp-body-lh-tight);
}

/* ---- 3つのメニュー ------------------------------------------------------------------------------ */
.corp-home-menus {
  background: var(--corp-white);
}

.corp-home-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(24px, 3vw, 40px) 0 0;
}

.corp-home-menu {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 16px;
  border-top: 3px solid var(--corp-ink);
}

.corp-home-menu h3 {
  margin: 0;
  font-size: var(--corp-h3-lg);
  font-weight: 900;
  line-height: 1.4;
}

.corp-home-menu h3 a {
  color: var(--corp-ink);
  text-decoration: none;
}

.corp-home-menu h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.corp-home-menu_form {
  margin: 8px 0 0;
  color: var(--corp-sky-text);
  font-family: var(--corp-mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.corp-home-menu_facts {
  margin: 18px 0 0;
}

.corp-home-menu_facts > div {
  padding: 12px 0;
  border-top: 1px solid var(--corp-rule);
}

.corp-home-menu_facts dt {
  color: var(--corp-ink);
  font-size: var(--corp-label-size);
  font-weight: 700;
  line-height: 1.5;
}

.corp-home-menu_facts dd {
  margin: 4px 0 0;
  color: var(--corp-ink);
  font-size: 16px;
  line-height: var(--corp-body-lh-tight);
}

/* 「詳しく見る」はカードの下端にそろえる(3枚で本文の長さが違っても、リンクの高さが同じになる) */
.corp-home-menu_link {
  margin-top: auto;
  padding-top: 8px;
}

/* ---- 実績(社名は伏せる) ---------------------------------------------------------------------- */
body main.corp-home-main > section.corp-home-cases {
  border-top: 1px solid var(--corp-rule);
  background: var(--corp-white);
}

.corp-home-cases_list {
  margin: clamp(24px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--corp-ink);
}

.corp-home-cases_list li {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--corp-rule);
}

.corp-home-cases_tag {
  color: var(--corp-sky-text);
  font-family: var(--corp-mono);
  font-size: var(--corp-label-size);
  font-weight: 700;
  line-height: var(--corp-body-lh-tight);
}

.corp-home-cases_text {
  color: var(--corp-ink);
  font-size: 16px;
  line-height: var(--corp-body-lh-tight);
}

/* ---- 始め方 ------------------------------------------------------------------------------------ */
.corp-home-start {
  background: var(--corp-grain), var(--corp-paper);
}

.corp-home-start_steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(24px, 3vw, 40px) 0 0;
}

.corp-home-start_steps li {
  min-width: 0;
  padding-top: 16px;
  border-top: 3px solid var(--corp-ink);
}

.corp-home-start_num {
  display: block;
  color: var(--corp-sky-text);
  font-family: var(--corp-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.corp-home-start_steps h3 {
  margin: 14px 0 0;
  color: var(--corp-ink);
  font-size: var(--corp-h3-lg);
  font-weight: 900;
  line-height: 1.4;
}

.corp-home-start_steps p {
  margin: 10px 0 0;
  color: var(--corp-ink);
  font-size: 16px;
  line-height: 1.8;
}

/* ---- 情シス・PMO の入口(小さく。名前と1行) ------------------------------------------------------ */
.corp-home-entry {
  background: var(--corp-white);
}

.corp-home-entry_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(20px, 2.5vw, 32px) 0 0;
}

.corp-home-entry_list li {
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid var(--corp-rule);
}

.corp-home-entry_list p {
  margin: 6px 0 0;
  color: var(--corp-ink);
  font-size: 16px;
  line-height: var(--corp-body-lh-tight);
}

/* ---- 旧CSSの上書き ----------------------------------------------------------------------------- */
/* 旧トップのヒーローは高さ固定・装飾つきの指定を持つ。ここで調子の地を持つ縦並びの面に戻す。
   overflow: clip は、右上で切らせるトグル(とそのにじみ)が横スクロールを作らないため。 */
body .corp-home-main > .home-hero-sec.corp-home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: auto;
  min-height: 0;
  padding: var(--corp-header-h) 0 0;
  overflow: clip;
  background: var(--hero-bg);
  color: var(--hero-text);
  box-shadow: inset 0 -1px 0 var(--hero-rule);
}

body .corp-home-main > .home-hero-sec.corp-home-hero::before,
body .corp-home-main > .home-hero-sec.corp-home-hero::after {
  display: none;
}

/* 1025px以上: ヒーローは1画面の高さ(上限820px)から110pxを引いた高さにそろえ、次の節の上端を折り返しの上にのぞかせる */
@media screen and (min-width: 1025px) {
  body .corp-home-main > .home-hero-sec.corp-home-hero {
    min-height: max(560px, min(calc(100svh - 110px), 820px));
  }
}

/* main 直下の section の縦リズムは共通CSSが一律に決めるので、トップの帯はここで詰め直す。
   :not() を重ねて、共通側の同じ書き方より詳細度を上げる。 */
body main.corp-home-main > section:not(.corp-home-hero):not(.corporate-cta-sec) {
  margin: 0;
  padding: var(--corp-section-y) 0;
}

/* 狭い幅ではトグルの下に文字が近い。にじみが文字の背後に届いて地を変えないよう、ぼかしを小さくする */
@media screen and (max-width: 1024px) {
  .corp-home-hero {
    --bloom-blur: 36px;
  }

  .corp-home-start_steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 780px) {
  .corp-home-hero {
    --bloom-blur: 14px;
  }
}

/* ---- スマホ(〜780) ---------------------------------------------------------------------------- */
@media screen and (max-width: 780px) {
  .corp-home-hero_actions {
    flex-direction: column;
  }

  .corp-home-button {
    width: 100%;
  }

  .corp-home-hero_lead {
    font-size: 16px;
    line-height: var(--corp-body-lh);
  }

  /* スマホ: トグルは小見出しの下・見出しの上に右寄せで置く(右端だけ切れる)。小見出しは1行 */
  .corp-home-hero {
    --hero-fs: clamp(32px, 10.2vw, 44px);
    --toggle-top: 56px;
    --toggle-gap: 20px;
    --toggle-w: clamp(220px, 68vw, 300px);
    --toggle-h: calc(var(--toggle-w) / 2);
    --toggle-beside: 0px;
  }

  .corp-home-hero_top {
    padding-top: 20px;
  }

  .corp-home-hero .corp-home-kicker {
    font-size: clamp(12px, 3.3vw, 13px);
    white-space: nowrap;
  }

  .corp-home-menu-grid,
  .corp-home-start_steps,
  .corp-home-entry_list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .corp-home-cases_list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 16px 0;
  }
}