@charset "utf-8";
/* =========================================================================
   株式会社コバデン 採用LP — Design System
   日本ノーベル新卒採用サイトから抽出した Design DNA に準拠
   （DESIGN_DNA.md / DESIGN DNA RULES 16則）
   ========================================================================= */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, figure, ul, ol, li, dl, dt, dd, form, fieldset {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- design tokens (DNA RULE 1-13) ---------- */
:root {
  /* 中央コンテンツ幅 — スマホ設計をPCでも維持する */
  --wrap: 480px;

  /* 375px を設計原寸とし、中央カラム幅に線形スケールする単位。
     viewport ではなくカラム幅基準にするのがPC固定表示の肝。 */
  --u: calc(min(100vw, var(--wrap)) / 375);

  /* palette — コバデン指定色（ベース #ff9902 / アクセント #e00201）を
     参照元サイトの「明るい地 + 1セクションだけ反転 + 蛍光マーカー + CTA」
     という構造へ当てはめたもの。構造はDNA、色はコバデン。 */
  --base:   #FFF6EC;   /* 基調背景（ベースカラーの極薄ティント） */
  --base2:  #FFEBD6;   /* 副次背景（交互に切り替える） */
  --white:  #FFFFFF;   /* 吹き出し・枠の中身。面には使わない */
  --brand:  #FF9902;   /* ★ベースカラー。反転帯 / 番号バッジ / 線画（ベタ面専用） */
  /* 🔴 蛍光ペン専用。ベタ面(--brand)とは分ける。
     #FF9902 だと #333 の文字と 5.9:1 しか離れず、11-12px の本文が沈む。
     2026-09-18: #FFC46B →（ユーザー指示「もっと薄く」）→ #FFDCA8（9.6:1）。
     地色 #FFF6EC との差は 1.22:1。これ以上薄くするとマーカーに見えなくなる。 */
  --marker:  #FFDCA8;
  --marker0: rgba(255,220,168,0);   /* 同色の透明。ハードストップ用 */
  /* 面として塗るときの色。文字の下に引く帯と違って薄いと「色の列」に見えないので、
     マーカーとは別に持つ（募集要項の項目名セルなど）。#333 と 8.0:1。 */
  --tint:    #FFC46B;
  --accent: #E00201;   /* ★アクセントカラー。CTA・ラベル・星 */
  --ink:    #333333;   /* 文字色はこれのみ */
  --line:   #000000;   /* 線画のストローク専用 */

  /* spacing series 12 / 24 / 32 / 40 / 64 (DNA RULE 13) */
  --sp-12: calc(12 * var(--u));
  --sp-24: calc(24 * var(--u));
  --sp-32: calc(32 * var(--u));
  --sp-40: calc(40 * var(--u));
  --sp-64: calc(64 * var(--u));
  --sidegap: calc(24 * var(--u));

  /* motion (DNA RULE 14) */
  --easeOut:  cubic-bezier(.3, 1, .7, 1);
  --easeBack: cubic-bezier(.3, 1.6, .7, 1);

  --headerH: 52px;

  /* 🔴 読ませる文字の下限（2026-09-18 ユーザー指示）。
     本文・定義リスト・フォームのラベルなど「読む」テキストはここを下回らせない。
     英字の小見出し（MERIT / GALLERY など）、必須・任意バッジ、point のラベル、
     コピーライトのような記号的なパーツは対象外（下げ幅が“格”の表現なので据え置き）。 */
  --fsMin:  13px;    /* 本文・リスト・注記 */
  --fsMinP: 13.5px;  /* 主段落（.kb-p） */
}

/* ---------- base typography (DNA RULE 1-4) ---------- */
body {
  color: var(--ink);
  background: var(--base);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;                 /* RULE 2 — 例外なく1.75 */
  font-feature-settings: "palt";     /* RULE 1 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* 本文 — 13px@375 / weight500 / 字間0.12em
   幅だけでなく画面の高さにも追随させる（低い画面で1画面に収めるため）。
   max() で下限を守り、縮小で潰さない。
   🔴 2026-09-18 ユーザー指示「読ませる文字は13〜14px」。
   高さ追随で縮む設計は残したまま、下限を --fsMin / --fsMinP まで引き上げた。
   下限が効くのは低い画面（おおむね 390x740 以下）。 */
.kb-p {
  font-size: max(var(--fsMinP), min(calc(13.8 * var(--u)), 2.05dvh));
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .12em;
}
/* カード内本文 — 字間0.2em（小さい字ほど字間を広げる RULE 3） */
.kb-p--sm {
  font-size: max(var(--fsMin), min(calc(13 * var(--u)), 1.9dvh));
  letter-spacing: .2em;
}
.kb-p + .kb-p { margin-top: clamp(5px, 1.5dvh, 17px); }

/* =========================================================================
   強調のバリエーション（2026-09-18 ユーザー指示）
   それまで本文の強調が .kb-mark（蛍光マーカー）1種類しかなく、
   13セクション全部が同じ見え方になっていた。「格」で4種類に分ける。

     E1 .kb-mark  蛍光マーカー … 長めのフレーズ。地が明るい所（据え置き）
     E2 .kb-zab   座布団(ベタ) … 一番立てたい短い語。面で押す
     E3 .kb-wave  赤い波線     … 中くらい。文の一部を線で押さえる
     E4 .kb-dot   傍点         … 一番軽い。語をそっと指す

   🔴 使い分けの原則
   ・1画面に2種類まで。隣り合う画面で同じ型を続けない
   ・座布団は1画面に1回（面なので連発すると本文が読めなくなる）
   ・色は既存トークンのみ。コントラストは本文サイズで4.5:1以上を実測して選ぶ
   ========================================================================= */

/* E1 蛍光マーカー C2 — 長文の中の「持ち帰らせたい1フレーズ」 */
.kb-mark {
  font-style: normal;
  background-image: linear-gradient(
    var(--marker0) 20%, var(--marker) 20%,
    var(--marker) 80%, var(--marker0) 80%);
}

/* E2 座布団 — 文字の後ろにベタの面を敷く。
   🔴 縦の padding は行ボックスの高さを変えない（インライン要素の仕様）ので、
   行間・枠の高さ計算に影響しない＝雲の中でも使える。
   box-decoration-break:clone で、折り返しても行ごとに座布団が付く。 */
.kb-zab {
  font-style: normal;
  font-weight: 700;
  background: var(--tint);              /* #FFC46B / #333 と 8.0:1 */
  color: var(--ink);
  border-radius: .45em;
  padding: .10em .42em .16em;
  margin-inline: .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0 2px 0 rgba(180, 95, 0, .20);
}
/* 赤の座布団（白抜き）— 数字など「ここだけは見せたい」一撃用。#E00201/#fff = 5.3:1 */
.kb-zab--r {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 2px 0 rgba(120, 10, 5, .25);
}
/* 白い座布団＋黒フチ — オレンジのベタ面の上に置くとき用 */
.kb-zab--w {
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--line);
  box-shadow: 0 2px 0 rgba(29, 29, 29, .18);
}

/* 短い語の座布団は途中で折らない。
   🔴 折れると「4,000万円以上の / 差」と最終行に1文字だけの座布団ができる（実測 390x667）。
   長文に付けると横あふれするので、短い語にだけ付けること。 */
.kb-zab--nb { white-space: nowrap; }

/* E3 赤い波線 — 面より軽く、マーカーより強い。手描きのニュアンスも出る */
.kb-wave {
  font-style: normal;
  font-weight: 700;
  text-decoration: underline wavy var(--accent);
  text-decoration-thickness: 1.2px;
  text-underline-offset: .3em;
  text-decoration-skip-ink: none;
}

/* E4 傍点 — 日本語の一番軽い強調。行間が広い所でしか使わない（上に点が乗るため） */
.kb-dot {
  font-style: normal;
  font-weight: 700;
  -webkit-text-emphasis: filled dot var(--accent);
  text-emphasis: filled dot var(--accent);
  -webkit-text-emphasis-position: over right;
  text-emphasis-position: over right;
}

/* 見出し — 手描きSVG文字の代替として、太ウェイト＋詰め字で造形する。
   （元サイトの手描き文字SVGは日本ノーベルの著作物のため流用しない） */
.kb-h {
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .04em;
  font-size: max(17px, min(calc(26 * var(--u)), 3.5dvh));
}
.kb-h--lg { font-size: max(21px, min(calc(32 * var(--u)), 4.4dvh)); line-height: 1.35; }
.kb-h--sm { font-size: max(15px, min(calc(20 * var(--u)), 2.8dvh)); }
/* 見出し内のハイライト。MERIT の地色は --brand そのものなので、
   --brand で引くとオレンジ地にオレンジで帯が消える。--marker（淡色）で引く。 */
.kb-h .kb-y {
  background: linear-gradient(var(--marker0) 55%, var(--marker) 55%);
}
.kb-h .kb-r { color: var(--accent); }

/* セクションラベル（英字の小見出し） */
.kb-label {
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--accent);
  display: flex; align-items: center; gap: calc(8 * var(--u));
}
.kb-label::before {                  /* 旗ではなく星をリズム記号として使う C13 */
  content: ""; width: calc(13 * var(--u)); height: calc(13 * var(--u));
  background: var(--accent);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  flex: none;
}

/* 注釈＋手描き下線 C11 — 情報の格を下げる印
   （格は下げるが読ませる文なので下限は --fsMin。小ささではなく手描き下線で格を出す） */
.kb-note {
  font-size: max(var(--fsMin), calc(11.5 * var(--u)));
  letter-spacing: .06em;
  line-height: 1.6;
  position: relative;
  display: inline-block;
}
.kb-note svg { position: absolute; left: 0; bottom: calc(-6 * var(--u)); width: 100%; height: calc(7 * var(--u)); }

/* ---------- 手描きの線 (DNA RULE 10) ---------- */
/* すべて vector-effect:non-scaling-stroke。引き伸ばしても線幅1pxを保つ */
.kb-stroke { fill: none; stroke: var(--line); stroke-width: 1; }
.kb-fill   { fill: var(--white); stroke: var(--line); stroke-width: 1; }

/* 吹き出し C3 — 語りかけ・想いを入れる器
   isolation:isolate が必須。これが無いと z-index:-1 の背景SVGが
   セクションの背景色の裏へ回り込んで見えなくなる。 */
.kb-balloon {
  position: relative;
  isolation: isolate;
  padding: calc(30 * var(--u)) calc(26 * var(--u));
}
.kb-balloon > svg.kb-balloon_bg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
}
.kb-balloon > * { position: relative; }

/* 看板CTA C9 — 掲示板のメタファー */
.kb-board {
  position: relative;
  isolation: isolate;               /* 吹き出しと同じ理由 */
  padding: calc(24 * var(--u)) calc(20 * var(--u));
  text-align: center;
}
.kb-board > svg.kb-board_bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.kb-board > svg.kb-bis {
  position: absolute; width: calc(9 * var(--u)); height: calc(9 * var(--u)); z-index: 1;
}
.kb-board > svg.kb-bis:nth-of-type(2) { top: calc(9 * var(--u)); left: calc(11 * var(--u)); }
.kb-board > svg.kb-bis:nth-of-type(3) { top: calc(9 * var(--u)); right: calc(11 * var(--u)); }
.kb-board > * { position: relative; }

/* 仕切り線 C8 — 罫線ではなく手描きの線 */
.kb-partition { width: 100%; height: clamp(3px, .6dvh, 6px); display: block; }

/* ---------- 番号バッジ C4 (DNA RULE 15) ---------- */
/* 並列情報に順序と有限性を与える。必ず「その1〜N」を振る */
.kb-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(52 * var(--u)); height: calc(24 * var(--u));
  padding: 0 calc(9 * var(--u));
  font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: .08em;
  color: var(--ink); background: var(--brand);
  border: 1px solid var(--line);
  border-radius: 0;                  /* RULE 9 — 角丸禁止 */
}
.kb-num b { font-size: calc(15 * var(--u)); margin-left: .15em; line-height: 1; }

/* ---------- 写真 C6 — 必ず不定形マスクで抜く (DNA RULE 11) ---------- */
.kb-photo { position: relative; }
/* 図版は「幅は維持・高さだけ可変」で構図を壊さない。
   低い画面ほど縮み、十分な高さがあれば元の比率まで伸びる。 */
.kb-photo > .kb-photo_in {
  width: 100%;
  height: clamp(58px, 21dvh, 270px);
  background: var(--base2);
  clip-path: url(#kb-blob1);
  display: grid; place-items: center;
  overflow: hidden;
}
.kb-photo--b > .kb-photo_in { clip-path: url(#kb-blob2); }
.kb-photo--c > .kb-photo_in { clip-path: url(#kb-blob3); }
.kb-photo_in img { width: 100%; height: 100%; object-fit: cover; }

/* 写真が未支給の間のプレースホルダ（実写真に差し替える枠） */
.kb-ph {
  width: 100%; height: 100%;
  display: grid; place-content: center; justify-items: center; gap: calc(6 * var(--u));
  background: var(--white);   /* 抜き型の形が読み取れるよう地と差をつける */
  text-align: center;
}
.kb-ph span {
  font-size: calc(10 * var(--u)); font-weight: 700; letter-spacing: .14em; color: var(--ink);
}
.kb-ph svg { width: calc(34 * var(--u)); height: calc(30 * var(--u)); }

/* ---------- 支給イラスト（透過PNG） ----------
   写真と違い不定形マスクは掛けない（吹き出しや効果線が切れてしまうため）。
   支給素材は無加工。トリミング・recolor・変形は一切せず、
   高さだけ可変させて縦横比を保つ。 */
.kb-illust { width: 100%; display: grid; place-items: center; }
.kb-illust img {
  width: auto; max-width: 100%;
  height: clamp(62px, 22dvh, 280px);
  object-fit: contain;              /* 比率を崩さないための保険 */
}

/* ---------- 写真＋イラストの「ずらし重ね」 (DNA RULE 12) ----------
   参考サイトの基本形。不定形マスクで抜いた写真の縁に、透過イラストを
   一部かぶせて配置する。整列させないことが要点。 */
.kb-figpair {
  display: flex;
  align-items: flex-end;
  width: 100%;
}
.kb-figpair > .kb-photo { flex: 0 0 64%; min-width: 0; }
.kb-figpair > .kb-photo > .kb-photo_in { height: clamp(44px, 20dvh, 260px); }
.kb-figpair_il {
  flex: 0 0 auto;
  margin: 0 0 0 -11%;               /* ← ここで重なりを作る */
  transform: translateY(7%);
}
.kb-figpair_il img {
  width: auto;
  max-width: none;                  /* % max-width は横潰れの原因 */
  height: clamp(40px, 15.5dvh, 205px);
}

/* 横長で使う写真枠（集合写真・社屋など） */
.kb-photo--wide > .kb-photo_in { height: clamp(36px, 14.5dvh, 200px); }

/* 重ねイラスト C7 — 写真の縁にずらして重ねる（整列させない RULE 12） */
.kb-overlay {
  position: absolute; z-index: 2; pointer-events: none;
}

/* ---------- ボタン C10 ----------
   参照元のCTAはSVG画像で、手描きの角丸矩形＋黒の輪郭＋右下へずらした黒い影
   （ステッカー状）でできている。DOM計測では角丸0/影なしに見えるが、
   CTAだけはこの造形を持つ。ここだけDNA則9の例外。 */
.kb-btn {
  --btnShadow: 2px;
  --btnRadius: 4px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: var(--accent); color: var(--white);
  font-weight: 700; letter-spacing: .12em;
  border: 1px solid var(--line);
  border-radius: var(--btnRadius);
  box-shadow: var(--btnShadow) var(--btnShadow) 0 var(--line);  /* ぼかさない＝フラットな線画の世界観 */
  transition: transform .25s var(--easeBack), box-shadow .25s var(--easeBack);
}
.kb-btn::after {                     /* 星 — CTAのアクセント */
  content: ""; width: .85em; height: .85em; background: var(--white); flex: none;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.kb-btn--ghost { background: var(--white); color: var(--ink); }
.kb-btn--ghost::after { background: var(--accent); }
@media (hover: hover) {
  /* 影から浮き上がる＝ステッカーを持ち上げる動き */
  .kb-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: calc(var(--btnShadow) + 1px) calc(var(--btnShadow) + 1px) 0 var(--line);
  }
}
.kb-btn:active {
  transform: translate(var(--btnShadow), var(--btnShadow));
  box-shadow: 0 0 0 var(--line);
}

/* ---------- 事務情報 C12 — 装飾を剥がして小さく扱う ---------- */
.kb-dl { width: 100%; }
.kb-dl > div {
  display: grid; grid-template-columns: calc(84 * var(--u)) 1fr;
  gap: 0 calc(12 * var(--u));
  padding-block: clamp(3px, .95dvh, 11px);
  border-bottom: 1px solid rgba(0,0,0,.18);
}
.kb-dl > div:first-child { border-top: 1px solid rgba(0,0,0,.18); }
.kb-dl dt {
  /* 低い画面では幅基準より高さ基準を優先して縮める（下限は --fsMin） */
  font-size: max(var(--fsMin), min(calc(13 * var(--u)), 1.9dvh)); font-weight: 700; letter-spacing: .06em;
  padding-top: .15em;
}
.kb-dl dd { font-size: max(var(--fsMin), min(calc(13.2 * var(--u)), 1.95dvh)); font-weight: 500; letter-spacing: .04em; line-height: 1.7; }
.kb-dl dd ul li { position: relative; padding-left: 1em; }
.kb-dl dd ul li::before { content: "◇"; position: absolute; left: 0; font-size: .85em; }

/* ---------- 出現アニメーション (DNA RULE 14) ---------- */
/* 必ず弾ませる。IntersectionObserver で1回だけ発火 */
.kb-inview { opacity: 0; transform: translateY(18px); }
.kb-inview.is-inview {
  opacity: 1; transform: none;
  transition: opacity .5s var(--easeOut), transform .6s var(--easeBack);
}
.kb-inview.is-inview.d1 { transition-delay: .08s; }
.kb-inview.is-inview.d2 { transition-delay: .16s; }
.kb-inview.is-inview.d3 { transition-delay: .24s; }
.kb-inview.is-inview.d4 { transition-delay: .32s; }

@keyframes kb-poyon {
  from, to { scale: none; }
  14% { scale: 1.2; } 29% { scale: .8; } 43% { scale: 1.1; }
  57% { scale: .9; } 72% { scale: 1.02; } 86% { scale: .98; }
}
@keyframes kb-stars { from, to, 40.01% { transform: none; } 20% { transform: rotateY(0); } 40% { transform: rotateY(360deg); } }
.kb-star { animation: kb-stars 5s var(--easeOut) infinite; }

@media (prefers-reduced-motion: reduce) {
  .kb-inview { opacity: 1; transform: none; transition: none; }
  .kb-star { animation: none; }
  .kb-btn { transition: none; }
}