@charset "utf-8";
/* =========================================================================
   S02 ABOUT US — 参照サイトの「採用メッセージ」構成を踏襲
   反転帯 ＋ 白いもこもこの手描き吹き出し ＋ 四隅に回り込む図版
   （参照で写真が入っている位置に、支給イラストを充てている）
   ※サイト内で背景を反転するのはこのセクションだけ（DNA RULE 7）
   ========================================================================= */

.kb-msg { overflow: hidden; }          /* 帯の外へ出た図版だけを切る */

/* ---------- 見出し ---------- */
.kb-msg_title {
  position: relative; z-index: 3;
  font-weight: 700; line-height: 1.3; letter-spacing: .06em;
  font-size: max(19px, min(calc(26 * var(--u)), 3.4dvh));
}
/* オレンジ帯の上では白マーカーで抜く（#333 on #FF9902 = 5.9:1 を確保） */
.kb-msg_title span {
  background: linear-gradient(rgba(255,255,255,0) 56%, var(--white) 56%);
  padding-inline: .1em;
}

/* ---------- 吹き出し ---------- */
.kb-msg_balloon {
  position: relative; z-index: 2;
  padding: clamp(12px, 2.9dvh, 36px) clamp(17px, 4.6vw, 30px);
}
.kb-msg_balloon .kb-p + .kb-p { margin-top: clamp(6px, 1.2dvh, 13px); }
.kb-msg_balloon .kb-ways {
  margin-top: clamp(8px, 1.6dvh, 18px);
  gap: clamp(5px, 1dvh, 11px);
}
.kb-msg_balloon .kb-ways + .kb-p { margin-top: clamp(8px, 1.6dvh, 18px); }

/* ---------- 四隅の図版 ---------- */
/* .kb-balloon > * { position: relative } に負けないよう、セクション直下に置いている */
.kb-msg_il { position: absolute; z-index: 4; margin: 0; pointer-events: none; }
.kb-msg_il img {
  width: auto;
  max-width: none;                     /* % max-width は横潰れの原因になる */
  height: clamp(54px, 9.4dvh, 108px);
}
.kb-msg_il--tr { top: clamp(16px, 3.6dvh, 42px); right: clamp(2px, 1.4vw, 14px); }
.kb-msg_il--bl { bottom: clamp(2px, .8dvh, 12px); left:  clamp(-4px, -0.4vw, 0px); }
.kb-msg_il--br { bottom: clamp(2px, .8dvh, 12px); right: clamp(2px, 1.4vw, 14px); }

/* =========================================================================
   MERIT 1-3 を ABOUT US と同じ構成にしたときの調整
   ========================================================================= */
/* 反転帯の上では見出しのハイライトを白に（オレンジ地にオレンジは見えない） */
.swipe-section--brand .kb-h .kb-y {
  background: linear-gradient(rgba(255,255,255,0) 56%, var(--white) 56%);
}
.kb-meritmsg .kb-merit_head { align-items: center; }
.kb-meritmsg .kb-merit_head .kb-h {
  font-size: max(15px, min(calc(21 * var(--u)), 2.9dvh));
  line-height: 1.45;
}

/* 吹き出しの中に入れる写真枠（1枚） */
.kb-msg_photo {
  display: block;
  width: 64%;
  margin: 0 auto clamp(6px, 1.4dvh, 15px);
}
.kb-msg_photo > .kb-photo_in { height: clamp(42px, 15dvh, 180px); }

/* 吹き出しの中に3枚並べる（メリット2・3のイメージ枠） */
.kb-msg_photos {
  display: flex;
  gap: clamp(4px, 1.4vw, 10px);
  margin-bottom: clamp(6px, 1.4dvh, 15px);
}
.kb-msg_photos > .kb-photo { flex: 1 1 0; min-width: 0; }
.kb-msg_photos > .kb-photo > .kb-photo_in { height: clamp(44px, 12.5dvh, 145px); }
.kb-msg_photos .kb-ph { gap: 0; padding: 2px; }
.kb-msg_photos .kb-ph span {
  font-size: clamp(7px, min(2.1vw, 1.05dvh), 11px);
  letter-spacing: .02em;
  line-height: 1.25;
}

/* =========================================================================
   4つの働き方 — カラフルな吹き出しのかたまりで見せる
   （色数はコバデンの2色＋白＋ベースティントの範囲に収めている）
   ========================================================================= */
.kb-bubbles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(5px, 1.2dvh, 13px) clamp(5px, 1.6vw, 12px);
}
.kb-bubbles li {
  position: relative;
  isolation: isolate;
  padding: clamp(6px, 1.3dvh, 13px) clamp(11px, 3.2vw, 20px) clamp(9px, 1.8dvh, 17px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
  white-space: nowrap;
  font-size: max(10.5px, min(calc(12.5 * var(--u)), 1.75dvh));
}
.kb-bubbles li > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.kb-bubbles li > .kb-bubble_tail {
  inset: auto auto calc(-1 * clamp(6px, 1.2dvh, 11px)) clamp(12px, 4vw, 26px);
  width: clamp(9px, 2.6vw, 15px);
  height: clamp(8px, 1.4dvh, 13px);
}
/* 手で置いたようにばらつかせる（整列させない RULE 12） */
.kb-bubbles li:nth-child(1) { rotate: -2deg; }
.kb-bubbles li:nth-child(2) { rotate:  1.6deg; }
.kb-bubbles li:nth-child(3) { rotate: -1.2deg; }
.kb-bubbles li:nth-child(4) { rotate:  2.2deg; }

.kb-bubbles .kb-bub_w path { fill: var(--white); }
.kb-bubbles .kb-bub_o path { fill: var(--brand); }
.kb-bubbles .kb-bub_c path { fill: var(--base2); }
.kb-bubbles .kb-bub_r path { fill: var(--accent); }
.kb-bubbles li.is-onRed { color: var(--white); }

/* 3枚並びにはイラスト（透過PNG）が入るので、写真用の不定形マスクは外す。
   cover のままだと絵が切り落とされるため contain で全体を見せる。 */
.kb-msg_photos > .kb-photo > .kb-photo_in {
  clip-path: none;
  background: transparent;
  overflow: visible;
}
.kb-msg_photos > .kb-photo > .kb-photo_in img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}