@charset "UTF-8";
/* =====================================================================
   サービスLP（B の型）Google採用広告運用代行（/listing/）だけの部品
   - 本文は <article class="m-slp is-b is-listing">
   - service-lp*.css は全部の LP ページで読み込まれるので、すべてのセレクタを .m-slp.is-b.is-listing で始める
   - B（service-lp-b.css）の既存クラスはそのまま使い、ここでは次だけを足す・上書きする
     1. HERO：写真の右側に浮かべる検索窓のカプセル .ls-q と、Google Partner のバッジ .ls-cert
     2. ABOUT：検索広告とバナー広告の小さな図 .ls-fig
     3. CASE：グラフの棒の長さ（原稿の数字から計算）、目標の棒、応募数の数字 .ls-kpi
     4. POINT：Google Partner のバッジ、SERVICE：6項目を3列に
   - ここで B のクラスを上書きすると B のメディアクエリより強くなるので、スマホの指定もここで書き直す
   ===================================================================== */

/* ===================== HERO ===================== */
.m-slp.is-b.is-listing .b-hero__copy { max-width: 640px; }
.m-slp.is-b.is-listing .b-hero__catch { font-size: 4.2rem; }
.m-slp.is-b.is-listing .b-hero__lead { max-width: 620px; font-size: 1.6rem; }
/* 原稿の CTA の文言が長いので、横の余白を詰めて2つのボタンを1行に収める */
@media (min-width: 768px) {
	.m-slp.is-b.is-listing .b-hero__cta .b-btn { padding-left: 24px; padding-right: 24px; }
}

/* Google Partner のバッジ（公式の画像をそのまま。公式のプロフィールへのリンク付き） */
.m-slp.is-b.is-listing .ls-cert { gap: 14px; padding: 8px 22px 8px 10px; }
.m-slp.is-b.is-listing .ls-cert__badge { display: block; flex: 0 0 auto; width: 60px; line-height: 0; }
.m-slp.is-b.is-listing .ls-cert__badge img { display: block; width: 100%; height: auto; }

/* 検索窓のカプセル（HTML の文字。Google の画面には似せず、白いカプセル＋虫めがね） */
.m-slp.is-b.is-listing .ls-q {
	position: absolute; z-index: 0; top: 0; bottom: 84px; left: 0; right: 0;
	pointer-events: none;
}
.m-slp.is-b.is-listing .ls-q li {
	position: absolute; display: inline-flex; align-items: center; gap: 10px;
	padding: 10px 22px 10px 17px; background: rgba(255,255,255,.97); border-radius: 999px;
	box-shadow: 0 8px 22px rgba(8,26,52,.24);
	font-size: 1.5rem; font-weight: 700; line-height: 1.4; color: var(--ink); white-space: nowrap;
	animation: ls-q-in .9s cubic-bezier(.2,.7,.3,1) both;
}
.m-slp.is-b.is-listing .ls-q li i { color: var(--navy); font-size: 1.4rem; }
/* 置き場所：写真は幅に合わせて伸びるので、横はヒーローの幅に対する%、縦は px で置く。
   人物は幅の約69〜86%、頭の上端はヒーローの上から約140px（1280〜1920px の幅でほぼ同じ）。
   左の文字の列は幅の57%まで。カプセルは「頭の上」「人物の左」「人物の右」に置き、顔と手元には重ねない */
.m-slp.is-b.is-listing .ls-q li:nth-child(1) { left: 57.5%; top: 20px;  animation-delay: .2s; }
.m-slp.is-b.is-listing .ls-q li:nth-child(2) { left: 61%;   top: 84px;  animation-delay: .5s; }
.m-slp.is-b.is-listing .ls-q li:nth-child(3) { left: 72.5%; top: 30px;  animation-delay: .8s; }
.m-slp.is-b.is-listing .ls-q li:nth-child(4) { right: 2.5%; top: 92px;  animation-delay: 1.1s; }
.m-slp.is-b.is-listing .ls-q li:nth-child(5) { left: 57%;   top: 152px; animation-delay: 1.4s; }
.m-slp.is-b.is-listing .ls-q li:nth-child(6) { right: 2%;   top: 172px; animation-delay: 1.7s; }
.m-slp.is-b.is-listing .ls-q li:nth-child(7) { left: 60.5%; top: 222px; animation-delay: 2s; }
.m-slp.is-b.is-listing .ls-q li:nth-child(8) { left: 57.5%; top: 292px; animation-delay: 2.3s; }
@keyframes ls-q-in {
	from { opacity: 0; transform: translateY(14px) scale(.96); }
	to { opacity: 1; transform: none; }
}

/* ===================== ABOUT（2つの配信方法の小さな図） ===================== */
.m-slp.is-b.is-listing .ls-about__text { max-width: 860px; margin: 0 auto 8px; font-size: 1.7rem; line-height: 1.95; }
.m-slp.is-b.is-listing .ls-way { display: flex; flex-direction: column; }
.m-slp.is-b.is-listing .ls-way h3 i { margin-right: 10px; color: var(--blue); font-size: .95em; }
.m-slp.is-b.is-listing .ls-way h3 small { font-size: .84em; font-weight: 800; }
.m-slp.is-b.is-listing .ls-fig {
	display: flex; flex-direction: column; justify-content: center; gap: 10px; height: 152px; margin-bottom: 20px; padding: 18px 20px;
	background: #fff; border: 1px solid var(--line); border-radius: 4px;
}
.m-slp.is-b.is-listing .ls-fig > * { flex: 0 0 auto; }
.m-slp.is-b.is-listing .ls-fig__box {
	display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border: 1px solid #c9d6e5; border-radius: 999px;
	font-size: 1.4rem; font-weight: 700; color: var(--ink); line-height: 1;
}
.m-slp.is-b.is-listing .ls-fig__box i { color: var(--navy); }
.m-slp.is-b.is-listing .ls-fig__ad,
.m-slp.is-b.is-listing .ls-fig__res { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; padding: 0 4px; }
.m-slp.is-b.is-listing .ls-fig__ad { padding: 8px 10px; background: #fffbe0; border-radius: 3px; }
.m-slp.is-b.is-listing .ls-fig__ad em {
	grid-row: 1; padding: 1px 6px; border: 1px solid var(--ink); border-radius: 2px;
	font-size: 1.1rem; font-weight: 800; line-height: 1.3; color: var(--ink);
}
.m-slp.is-b.is-listing .ls-fig__l { display: block; height: 7px; border-radius: 4px; background: #cfd9e5; grid-column: 1 / -1; }
.m-slp.is-b.is-listing .ls-fig__ad .ls-fig__l.is-t { grid-column: 2; grid-row: 1; height: 9px; width: 70%; background: var(--blue); }
.m-slp.is-b.is-listing .ls-fig__res .ls-fig__l.is-g { width: 60%; background: #b9c7d8; }
.m-slp.is-b.is-listing .ls-fig__l.is-s { width: 55%; }
.m-slp.is-b.is-listing .ls-fig.is-banner { flex-direction: row; align-items: stretch; gap: 10px; padding: 16px; }
.m-slp.is-b.is-listing .ls-fig__tile {
	flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px;
	padding: 10px 6px 8px; background: var(--paper); border-radius: 3px;
}
.m-slp.is-b.is-listing .ls-fig__tile i { font-size: 2rem; color: var(--navy); line-height: 1; }
.m-slp.is-b.is-listing .ls-fig__bn {
	display: flex; align-items: center; justify-content: center; width: 100%; max-width: 110px; height: 38px;
	background: var(--yellow); border-radius: 2px; font-size: 1.3rem; font-weight: 900; color: var(--navy-dd); letter-spacing: .1em; line-height: 1;
}
.m-slp.is-b.is-listing .ls-fig__tile small { font-size: 1.2rem; font-weight: 700; color: var(--muted); line-height: 1.3; text-align: center; }
.m-slp.is-b.is-listing .ls-about__policy {
	display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 960px; margin: 16px auto 0;
	font-size: 1.5rem; color: var(--muted); line-height: 1.7; text-align: center;
}
.m-slp.is-b.is-listing .ls-about__policy i { color: var(--navy); }

/* ===================== CASE（棒の長さは原稿の数字から計算） ===================== */
.m-slp.is-b.is-listing .b-chart__fill.is-w10 { width: 10.8%; }   /* 31,795 / 295,000 */
.m-slp.is-b.is-listing .b-chart__fill.is-w11 { width: 11%; }     /* 9,662 / 88,000 */
.m-slp.is-b.is-listing .b-chart__fill.is-w20 { width: 20%; }     /* 1 / 5 */
.m-slp.is-b.is-listing .b-chart__fill.is-w34 { width: 34.1%; }   /* 30,000 / 88,000 */
.m-slp.is-b.is-listing .b-chart__fill.is-w68 { width: 68.1%; }   /* 32 / 47 */
.m-slp.is-b.is-listing .b-chart__fill.is-w74 { width: 74.3%; }   /* 26,000 / 35,000 */
/* 目標の棒は斜線（求人ボックスの LP と同じ柄）。30,000〜35,000円の幅のある目標は、35,000円を100%として 30,000円（85.7%）から先を薄くする */
.m-slp.is-b.is-listing .b-chart__row.is-goal .b-chart__fill {
	background: repeating-linear-gradient(135deg, #9aacc2 0 5px, #c9d5e3 5px 10px);
}
.m-slp.is-b.is-listing .b-chart__row.is-goal .b-chart__fill.is-range {
	width: 100%;
	background:
		linear-gradient(90deg, transparent 85.7%, rgba(255,255,255,.6) 85.7%),
		repeating-linear-gradient(135deg, #9aacc2 0 5px, #c9d5e3 5px 10px);
}
.m-slp.is-b.is-listing .b-chart__row.is-goal .b-chart__lbl { color: var(--muted); }
.m-slp.is-b.is-listing .b-chart.is-wide .b-chart__row { grid-template-columns: 92px 1fr 172px; }
.m-slp.is-b.is-listing .ls-nw { white-space: nowrap; }
/* 応募数（比べる前の数字が無い事例）。スタンバイの LP の .st-stat と同じ見た目（薄い地の箱＋左に黄色の線） */
.m-slp.is-b.is-listing .ls-kpi {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 14px 20px; background: var(--paper); border-left: 4px solid var(--yellow); border-radius: 2px;
}
.m-slp.is-b.is-listing .ls-kpi__lbl { font-size: 1.5rem; font-weight: 800; line-height: 1.5; color: var(--ink); }
.m-slp.is-b.is-listing .ls-kpi__lbl span { display: block; font-size: 1.4rem; font-weight: 700; color: var(--muted); }
.m-slp.is-b.is-listing .ls-kpi__num { font-size: 2rem; font-weight: 900; line-height: 1; color: var(--navy); white-space: nowrap; }
.m-slp.is-b.is-listing .ls-kpi__num b { font-family: var(--en); font-size: 4.6rem; font-weight: 900; margin: 0 3px; font-variant-numeric: tabular-nums; }

/* ===================== FAQ（問いの中の /indeed/ へのリンク） ===================== */
.m-slp.is-b.is-listing .b-faq__list dt a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ===================== POINT（Google Partner のバッジ） ===================== */
.m-slp.is-b.is-listing .ls-point__badge { position: absolute; top: 24px; right: 24px; display: block; width: 78px; line-height: 0; }
.m-slp.is-b.is-listing .ls-point__badge img { display: block; width: 100%; height: auto; }

/* ===================== SERVICE（6項目を3列に） ===================== */
.m-slp.is-b.is-listing .b-service__grid { grid-template-columns: repeat(3, 1fr); }

/* ===================== 節の地色 ===================== */
/* ABOUT を事例の前へ移したので、白と薄い青が交互になるよう組み直す
   （B の並び：白 CHALLENGE → 青 CASE → 白 POINT → 青 SERVICE → 白 COMPARE → 青 PRICE → 白 ABOUT → 青 FLOW → 白 FAQ）
   このページ：白 CHALLENGE → 青 ABOUT → 白 CASE → 青 POINT → 白 SERVICE → 青 PRICE → 白 FLOW → 青 FAQ */
.m-slp.is-b.is-listing .b-about { background: var(--paper); }
.m-slp.is-b.is-listing .b-about__col { background: #fff; border: 1px solid var(--line); }
.m-slp.is-b.is-listing .ls-fig { background: var(--paper); border-color: transparent; }
.m-slp.is-b.is-listing .ls-fig__box,
.m-slp.is-b.is-listing .ls-fig__tile { background: #fff; }
.m-slp.is-b.is-listing .b-case { background: #fff; }
.m-slp.is-b.is-listing .b-case__item { box-shadow: 0 8px 28px rgba(13,43,85,.07); }
.m-slp.is-b.is-listing .b-point { background: var(--paper); }
.m-slp.is-b.is-listing .b-service { background: #fff; }
.m-slp.is-b.is-listing .b-service__item { background: #f7fafd; }
.m-slp.is-b.is-listing .b-flow { background: #fff; }
.m-slp.is-b.is-listing .b-flow__n { box-shadow: 0 0 0 6px #fff; }
.m-slp.is-b.is-listing .b-faq { background: var(--paper); }
@media (min-width: 1024px) {
	/* 3列なら見出しは1行に収まるので、B の2行ぶんの高さそろえを外す */
	.m-slp.is-b.is-listing .b-service__item h3 { min-height: 0; }
}

/* ===================== レスポンシブ ===================== */
@media (max-width: 1279px) {
	/* 1024〜1279px：左の文字の列が広くなるので、カプセルは木嶋さんの例の3つだけを人物の頭の上に。
	   隠すのは display ではなく visibility（display を切り替えるとアニメーションが最初からやり直しになるため） */
	.m-slp.is-b.is-listing .ls-q li { font-size: 1.4rem; padding: 9px 18px 9px 15px; }
	.m-slp.is-b.is-listing .ls-q li:nth-child(n+4) { visibility: hidden; }
	.m-slp.is-b.is-listing .ls-q li:nth-child(1) { left: max(61%, 672px); top: 16px; }
	.m-slp.is-b.is-listing .ls-q li:nth-child(2) { left: max(64%, 700px); top: 76px; }
	.m-slp.is-b.is-listing .ls-q li:nth-child(3) { left: auto; right: 2%; top: 16px; }
}

@media (max-width: 1023px) {
	/* タブレット：写真の上に文字が重なるので、カプセルは出さない */
	.m-slp.is-b.is-listing .ls-q { visibility: hidden; }
	.m-slp.is-b.is-listing .b-service__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.m-slp.is-b.is-listing .b-hero__catch { font-size: 2.8rem; }
	.m-slp.is-b.is-listing .b-hero__lead { font-size: 1.5rem; }
	.m-slp.is-b.is-listing .ls-cert { gap: 12px; padding: 7px 16px 7px 8px; }
	.m-slp.is-b.is-listing .ls-cert__badge { width: 50px; }

	/* 写真を少し高くして、カプセルは写真の上だけに3つ */
	.m-slp.is-b.is-listing .b-hero__photo { height: 232px; }
	.m-slp.is-b.is-listing .b-hero::before { height: 232px; }
	.m-slp.is-b.is-listing .ls-q { visibility: visible; z-index: 2; top: 0; bottom: auto; left: 0; right: 0; height: 200px; }
	.m-slp.is-b.is-listing .ls-q li { gap: 7px; padding: 6px 14px 6px 12px; font-size: 1.3rem; box-shadow: 0 4px 14px rgba(8,26,52,.22); }
	.m-slp.is-b.is-listing .ls-q li i { font-size: 1.2rem; }
	.m-slp.is-b.is-listing .ls-q li:nth-child(n+4) { visibility: hidden; }
	.m-slp.is-b.is-listing .ls-q li:nth-child(1) { left: 14px; top: 14px; }
	.m-slp.is-b.is-listing .ls-q li:nth-child(2) { left: 14px; top: 104px; }
	.m-slp.is-b.is-listing .ls-q li:nth-child(3) { left: 34px; right: auto; top: 59px; }

	/* ABOUT */
	.m-slp.is-b.is-listing .ls-about__text { font-size: 1.5rem; line-height: 1.9; }
	.m-slp.is-b.is-listing .ls-fig { height: auto; min-height: 128px; margin-bottom: 16px; padding: 14px; }
	.m-slp.is-b.is-listing .ls-fig.is-banner { gap: 6px; padding: 12px 10px; }
	.m-slp.is-b.is-listing .ls-fig__bn { height: 32px; font-size: 1.2rem; }
	.m-slp.is-b.is-listing .ls-fig__tile small { font-size: 1.1rem; }
	.m-slp.is-b.is-listing .ls-way h3 small { display: block; font-size: 1.4rem; }
	.m-slp.is-b.is-listing .ls-about__policy { align-items: flex-start; justify-content: flex-start; font-size: 1.4rem; text-align: left; }
	.m-slp.is-b.is-listing .ls-about__policy i { margin-top: .35em; }

	/* CASE */
	.m-slp.is-b.is-listing .b-chart.is-wide .b-chart__row { grid-template-columns: 1fr auto; }
	.m-slp.is-b.is-listing .ls-kpi { gap: 10px; padding: 12px 14px; }
	.m-slp.is-b.is-listing .ls-kpi__lbl { font-size: 1.4rem; }
	.m-slp.is-b.is-listing .ls-kpi__lbl span { font-size: 1.3rem; }
	.m-slp.is-b.is-listing .ls-kpi__num { font-size: 1.7rem; }
	.m-slp.is-b.is-listing .ls-kpi__num b { font-size: 3.6rem; }

	/* POINT */
	.m-slp.is-b.is-listing .ls-point__badge { top: 18px; right: 18px; width: 64px; }

	/* SERVICE */
	.m-slp.is-b.is-listing .b-service__grid { grid-template-columns: 1fr; }
}

/* 動きを減らす設定：カプセルは最初から表示、検索窓は1語目を打ち終えた形で止める */
@media (prefers-reduced-motion: reduce) {
	.m-slp.is-b.is-listing .ls-q li { animation: none; }
}