@charset "UTF-8";
/* =====================================================================
   サービスLP「求人ボックス代理店・運用代行」（/kyujinbox/）
   - 本文は <article class="m-slp is-b is-kyujinbox"> … </article>。土台は service-lp-b.css（Indeed の B）をそのまま使う
   - service-lp*.css は LP の全ページで読み込まれるので、すべてのセレクタを .m-slp.is-b.is-kyujinbox で始める
   - 求人ボックスのロゴはガイドラインどおり、画面で 50px 以上・周りに高さの1/4以上の余白・加工なし
   ===================================================================== */

.m-slp.is-b.is-kyujinbox {
	--kb-blue: #037acc;   /* 求人ボックスのロゴの基本色（差し色として少しだけ使う） */
	--kb-teal: #00b39a;
}

/* ===================== HERO ===================== */
/* 求人ボックスのマークは正方形。ガイドラインの最小サイズ（50px）を守る */
.m-slp.is-b.is-kyujinbox .b-hero__cert-logo { width: 50px; height: 50px; }
/* マークの周りに、マークの高さの1/4（12.5px）以上の白い余白を取る（ガイドラインの最小余白）。
   左は padding、右は区切り線までの gap、上下は padding で 13px 以上 */
.m-slp.is-b.is-kyujinbox .b-hero__cert { padding-top: 13px; padding-bottom: 13px; }
/* パートナーのロゴは横長（480×206） */
.m-slp.is-b.is-kyujinbox .b-hero__cert-badge { width: 117px; height: auto; }
.m-slp.is-b.is-kyujinbox .b-hero__catch { font-size: 4.4rem; }

/* ===================== CHALLENGE（4つを 2×2 に） ===================== */
@media (min-width: 768px) {
	.m-slp.is-b.is-kyujinbox .b-pain__list { max-width: 900px; }
	.m-slp.is-b.is-kyujinbox .b-pain__list li { flex: 0 1 calc((100% - 20px) / 2); align-items: center; }
}

/* ===================== CASE ===================== */
/* 横棒の長さ（数値に比例。service-lp-b.css に無い分だけ足す） */
.m-slp.is-b.is-kyujinbox .b-chart__fill.is-w5 { width: 5.3%; }    /* 1 / 19 */
.m-slp.is-b.is-kyujinbox .b-chart__fill.is-w9 { width: 9.4%; }    /* 1,875 / 20,000 */
.m-slp.is-b.is-kyujinbox .b-chart__fill.is-w15 { width: 15%; }    /* 3,000 / 20,000 */
.m-slp.is-b.is-kyujinbox .b-chart__fill.is-w32 { width: 32.1%; }  /* 3,210 / 10,000 */
.m-slp.is-b.is-kyujinbox .b-chart__fill.is-w34 { width: 34.4%; }  /* 15,845 / 46,000 */
.m-slp.is-b.is-kyujinbox .b-chart__fill.is-w45 { width: 45%; }    /* 27 / 60 */
.m-slp.is-b.is-kyujinbox .b-chart__fill.is-w50 { width: 50%; }    /* 5,000 / 10,000 */
.m-slp.is-b.is-kyujinbox .b-chart__fill.is-w84 { width: 84.2%; }  /* 16 / 19 */
/* 目標の棒は斜線で、実績（紺）・以前（灰色）と見分ける */
.m-slp.is-b.is-kyujinbox .b-chart__row.is-goal .b-chart__fill {
	background: repeating-linear-gradient(135deg, #9aacc2 0 5px, #c9d5e3 5px 10px);
}
.m-slp.is-b.is-kyujinbox .b-chart__row.is-goal .b-chart__val { font-size: 1.6rem; }

/* 事例の要点（グラフの下。成果の文をそのまま繰り返さず、グラフと同じ「項目名＋数字」の形で出す） */
.m-slp.is-b.is-kyujinbox .kb-case__flag {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px;
	margin-top: 22px; padding: 10px 16px 11px;
	background: #fff9d6; border-left: 4px solid var(--yellow);
	font-weight: 700; color: var(--ink);
}
.m-slp.is-b.is-kyujinbox .kb-case__flag i { grid-row: span 2; color: var(--navy); font-size: 1.8rem; }
.m-slp.is-b.is-kyujinbox .kb-case__flag-lbl { font-size: 1.3rem; line-height: 1.5; color: var(--muted); }
.m-slp.is-b.is-kyujinbox .kb-case__flag-val { font-size: 1.6rem; font-weight: 800; line-height: 1.5; word-break: auto-phrase; text-wrap: balance; }
.m-slp.is-b.is-kyujinbox .kb-case__flag-val b { font-size: 2.1rem; font-weight: 900; color: var(--navy); }
.m-slp.is-b.is-kyujinbox .kb-case__flag-val small { font-size: 1.4rem; font-weight: 700; color: var(--ink); }

/* ===================== POINT（4つを 2×2 に） ===================== */
@media (min-width: 1024px) {
	.m-slp.is-b.is-kyujinbox .b-point__list { grid-template-columns: repeat(2, 1fr); max-width: 1020px; margin: 0 auto; }
	.m-slp.is-b.is-kyujinbox .b-point__ttl { min-height: 0; }
}
.m-slp.is-b.is-kyujinbox .b-point__item { padding-right: 32px; }
.m-slp.is-b.is-kyujinbox .b-point__badge.is-wide { top: 34px; right: 28px; width: 140px; height: auto; }
.m-slp.is-b.is-kyujinbox .b-point__item a { color: var(--blue); text-decoration: underline; }

/* ===================== SERVICE（5つ＋補足を 3列×2段に） ===================== */
@media (min-width: 1024px) {
	.m-slp.is-b.is-kyujinbox .b-service__grid { grid-template-columns: repeat(3, 1fr); }
	.m-slp.is-b.is-kyujinbox .b-service__item h3 { min-height: 0; }
}

/* ===================== ABOUT ===================== */
.m-slp.is-b.is-kyujinbox .b-about__logo img { width: 120px; }

/* ===================== 折り返し（1〜2文字だけの行を出さない） ===================== */
/* 長い段落は右端をそろえたまま、最後の行だけ短くなりすぎないようにする */
.m-slp.is-b.is-kyujinbox .b-case__blk p,
.m-slp.is-b.is-kyujinbox .b-point__item p { text-wrap: pretty; }
/* 箇条書き・短い説明・質問は、語の途中で折らない */
.m-slp.is-b.is-kyujinbox .b-case__blk li,
.m-slp.is-b.is-kyujinbox .b-service__item p,
.m-slp.is-b.is-kyujinbox .b-price__desc,
.m-slp.is-b.is-kyujinbox .b-flow__list p,
.m-slp.is-b.is-kyujinbox .b-faq__list dt { word-break: auto-phrase; text-wrap: pretty; }
/* 比較表のセルは短いので、行の長さをそろえる */
.m-slp.is-b.is-kyujinbox .b-compare__table td { text-wrap: balance; }

/* ===================== レスポンシブ ===================== */
@media (max-width: 1023px) {
	.m-slp.is-b.is-kyujinbox .b-hero__catch { font-size: 4rem; }
}
@media (max-width: 767px) {
	.m-slp.is-b.is-kyujinbox .b-hero__cert-logo { width: 50px; height: 50px; }
	.m-slp.is-b.is-kyujinbox .b-hero__cert { padding-left: 13px; gap: 13px; }
	.m-slp.is-b.is-kyujinbox .b-hero__cert-badge { width: 100px; }
	.m-slp.is-b.is-kyujinbox .b-hero__catch { font-size: 2.7rem; }
	.m-slp.is-b.is-kyujinbox .kb-case__flag { margin-top: 18px; padding: 10px 12px; font-size: 1.5rem; }
	.m-slp.is-b.is-kyujinbox .b-point__item { padding-right: 20px; }
	.m-slp.is-b.is-kyujinbox .b-point__badge.is-wide { top: 24px; right: 18px; width: 112px; }
	.m-slp.is-b.is-kyujinbox .b-about__logo img { width: 96px; }
}
@media (max-width: 480px) {
	.m-slp.is-b.is-kyujinbox .b-hero__catch { font-size: 2.6rem; }
}