@charset "UTF-8";
/* ==========================================================================
   Reset / Base
   ========================================================================== */
* {
	margin: 0;
	padding: 0;
	outline: none;
	font: inherit;
	font-weight: inherit;
	font-family: inherit;
	letter-spacing: 0;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, main, hgroup, menu, nav, section, summary {
	display: block;
}

a, img {
	border: none;
	outline: none;
}

img {
	max-width: 100%;
	width: auto;
	height: auto;
	vertical-align: middle;
	box-sizing: content-box;
}

ol, ul, li {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border: none;
	empty-cells: show;
}

th, td {
	padding: 0;
	font-weight: normal;
	text-align: left;
	vertical-align: top;
}

a {
	text-decoration: none;
	color: #363833;
	transition: 0.3s ease-in-out;
}
a:hover {
	opacity: 0.7;
}
a:active {
	opacity: 0.5;
}

button, input, textarea, select {
	transition: 0.3s ease-in-out;
}

strong, .strong {
	font-weight: bold;
}

:root {
	--color-green: #1CB57B;
	--color-dark: #363833;
	--color-slate: #363833;
	--color-yellow: #FFF734;
	--color-mint: #EAF7F1;
	--color-mint-band: #D6EEE1;
	--color-mark-gray: #999999;
	--color-tag-border: #A0CCE5;
	--color-gray: #F2F2F2;
	--color-bg-gray: #F7F7F7;
	--color-bg-gray-dark: #E9E9E9;
	--color-cta-dark: #444D52;
	--color-bg: #fafafa;
	--color-bg-alt: #ededed;
	--color-white: #fff;
	--color-border: #ededed;
	--font-base: "Noto Sans JP", sans-serif;
	--font-num: "Roboto", sans-serif;
}

/* scroll-behavior: smooth は jQuery の .animate({scrollTop}) と競合する。
   （代入1回ごとにブラウザ側の慣性スクロールが走り、目標の手前で止まる）
   ページ内リンクは a.js-scroll のJSで滑らかにスクロールさせるため、ここでは指定しない */

body {
	background-color: var(--color-white);
	font-size: 16px;
	font-family: var(--font-base);
	font-weight: 400;
	color: var(--color-dark);
	text-align: center;
	/* Figmaはpaltを適用しない。paltが効いていると文字が5〜8%詰まり、
	   折り返し位置とブロック高さがデザインと合わなくなる */
	font-feature-settings: normal;
	/* 小書き仮名(っ/ゃ)の行頭を禁止する。Chromeの既定(auto)は許してしまう */
	line-break: strict;
}
@media only screen and (max-width: 767px) {
	/* SPは要素ごとに検証済みのため、既定値を従来のまま維持する */
	body {
		font-feature-settings: "palt";
		line-break: auto;
	}
}

p, li, dt, dd, th, td {
	font-size: 100%;
	line-height: 1.7;
}
@media only screen and (max-width: 767px) {
	p, li, dt, dd, th, td {
		line-height: 1.8;
	}
}

main {
	position: relative;
	z-index: 1;
}

a[href^="tel:"] {
	pointer-events: none;
}
@media only screen and (max-width: 767px) {
	a[href^="tel:"] {
		pointer-events: all;
	}
}

.u-pc {
	display: block;
}
.u-sp {
	display: none;
}
@media only screen and (max-width: 767px) {
	.u-pc {
		display: none;
	}
	.u-sp {
		display: block;
	}
}
br.u-sp {
	display: none;
}
@media only screen and (max-width: 767px) {
	br.u-sp {
		display: block;
	}
}
br.u-pc {
	display: inline;
}
@media only screen and (max-width: 767px) {
	br.u-pc {
		display: none;
	}
}

/* Common section heading ---------------------------------------------- */
.c-section-title {
	/* Figmaは text-box-trim でcap上端基準。line-box上端はcap上端より13.7px上にあるため、
	   その余りを打ち消してセクションのpaddingにFigma実値をそのまま使えるようにする */
	margin: -13.7px auto 0;
	font-family: var(--font-base);
	font-weight: 900;
	font-size: 40px;
	/* Figma: leading-[1.3] */
	line-height: 1.3;
	text-align: center;
	color: var(--color-dark);
	position: relative;
}
@media only screen and (max-width: 767px) {
	.c-section-title {
		font-size: clamp(26px, 6.9333vw, 12px);
		/* SPは検証済みの値を維持（PCのみFigmaに合わせた） */
		line-height: 1.4;
		margin-top: 0;
	}
}
.c-section-title::after {
	content: "";
	/* Figma: baseline（トリム下端）から線の中心まで32px。
	   line-box下端はbaselineより9px下、線幅4pxの半分2pxを引いて 32-9-2 */
	margin: 21px auto 0;
	background: var(--color-green);
	width: 120px;
	height: 4px;
	display: block;
}
@media only screen and (max-width: 767px) {
	.c-section-title::after {
		margin-top: 16px;
		width: 120px;
		height: 4px;
	}
}
.c-section-lead {
	margin: 54px auto 0;
	max-width: 720px;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-dark);
}
@media only screen and (max-width: 767px) {
	.c-section-lead {
		/* デザインどおり1行20文字・センター寄せ */
		margin-top: 56px;
		font-size: clamp(16px, 4.2667vw, 12px);
		letter-spacing: 0.04em;
		font-feature-settings: normal;
		line-break: strict;
	}
}
.c-section-title + *:not(.c-section-lead) {
	/* Figma: 下線の下端から本文まで54px */
	margin-top: 54px !important;
}
@media only screen and (max-width: 767px) {
	.c-section-title + *:not(.c-section-lead) {
		margin-top: 50px !important;
	}
}
.c-section-lead + * {
	/* Figma実値 */
	margin-top: 40px !important;
}

/* ==========================================================================
   Header
   ========================================================================== */
.c-header {
	background: var(--color-white);
	padding: 24px 20px;
	min-height: 72px;
}
@media only screen and (max-width: 767px) {
	.c-header {
		background: #fff;
		/* Figma実値: header 375×72px / 内側の行40px / 左右16px */
		min-height: 72px;
		padding: 16px;
	}
}
.c-header__wrap {
	margin: 0 auto;
	/* Figma実値: 1232px（左右104px） */
	max-width: 1232px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.c-header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
}
.c-header__logo img {
	display: block;
}
/* SPはFigmaどおり2行ぶんが1枚になったコンポーネントを使う。
   .c-header__logo img の display:block（詳細度0,1,1）に負けるため、
   非表示側も img を含めて詳細度を揃える */
.c-header__logo img.c-header__logo-sp {
	display: none;
}
.c-header__logo-main {
	width: 198px;
	height: auto;
}
@media only screen and (max-width: 767px) {
	.c-header__logo-main {
		width: 133px;
	}
}
.c-header__logo-sub {
	width: 126px;
	height: auto;
}
@media only screen and (max-width: 767px) {
	.c-header__logo img.c-header__logo-main,
	.c-header__logo img.c-header__logo-sub {
		display: none;
	}
	.c-header__logo img.c-header__logo-sp {
		width: 131.772px;
		display: block;
	}
}
.c-header__side {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.c-header__link {
	font-weight: 700;
	font-size: 17px;
	line-height: 1.6;
	color: var(--color-dark);
	text-align: left;
}
@media only screen and (max-width: 767px) {
	.c-header__link {
		font-size: clamp(12px, 3.2vw, 12px);
		line-height: 1.5;
		white-space: nowrap;
	}
}
.c-header__link a {
	text-decoration: underline;
}
.c-header__link br {
	display: none;
}
@media only screen and (max-width: 767px) {
	.c-header__link br {
		display: block;
	}
}
.is-form-open .c-header__link {
	display: none;
}
.c-header__menu {
	background: var(--color-white) url(../image/menu-trigger.svg) no-repeat center center;
	background-size: 18px 14px;
	border: solid 1px var(--color-dark);
	width: 38px;
	height: 38px;
	display: none;
	color: transparent;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
	.c-header__menu {
		width: 40px;
		height: 40px;
		display: block;
	}
}
.is-menu-open .c-header__menu,
.is-form-open .c-header__menu {
	background-image: url(../image/menu-close-button.svg);
	background-size: 16px 16px;
}

/* ==========================================================================
   Page menu (mobile dropdown)
   ========================================================================== */
.c-pagemenu {
	background: var(--color-white);
	padding: 24px 0;
	display: none;
}
@media only screen and (max-width: 767px) {
	.is-menu-open .c-pagemenu {
		display: block;
	}
}
.c-pagemenu__wrap {
	margin: 0 auto;
}
.c-pagemenu__list {
	border-bottom: solid 1px #ccc;
}
.c-pagemenu__item {
	border-top: solid 1px #ccc;
	padding: 18px 20px;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	color: var(--color-dark);
}
.c-pagemenu__button {
	padding: 28px 20px 0;
	text-align: center;
}
.c-pagemenu__button a {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 8px 24px;
	width: 240px;
	height: 44px;
	background: var(--color-yellow);
	box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
	border-radius: 40px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: var(--color-dark);
}
@media only screen and (max-width: 767px) {
	.is-menu-open main,
	.is-menu-open .c-footer {
		display: none;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* 盛り上がったドーム型（#FAFAFA）の背景を下端基準で敷く。
   ロゴ帯の下にわずかな余白を残し、次セクションのグレーとの境界を作る */
.c-hero {
	background: var(--color-white) url(../image/img_fv_bg.png) no-repeat center bottom;
	background-size: 100% auto;
	/* PCはファーストビューを画面高さいっぱいにして中身を上下センター
	   （上下パディングは対称にする。非対称だと中心がずれる） */
	padding: 40px 20px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media only screen and (max-width: 767px) {
	.c-hero {
		/* 山なりは .c-hero__top（下端＝黒帯の上端）に移した。
		   上下センタリングで .c-hero の下端が可変になり、下端基準では位置が定まらない */
		background-image: none;
		/* SPもPCと同じく画面高さいっぱいで上下センター
		   （display:flex / justify-content は基本ルールを継承。
		     上下パディングは対称にする。非対称だと中心がずれる） */
		padding: 12px 16px;
		/* ヘッダーの高さ分を引く。iOS Safari の 100vh はツールバーを除いた
		   「大きい方」のビューポートなので、CTA帯が下のツールバーに隠れる。
		   svh（ツールバー表示時の高さ）を使い、非対応ブラウザには vh を残す */
		min-height: calc(100vh - 72px);
		min-height: calc(100svh - 72px);
	}
	/* 上下センタリングで生じる余白を2つのスペーサーで等分し、
	   下側だけ次セクション（お悩み）の背景色で塗りつぶす */
	.c-hero::before,
	.c-hero::after {
		content: "";
		flex: 1 1 0;
	}
	/* 上下のパディングを打ち消して、スペーサーを枠の端まで届かせる
	   （片側だけだとセンターが12pxずれる） */
	.c-hero::before {
		margin: -12px -16px 0;
	}
	.c-hero::after {
		background: var(--color-bg-gray);
		margin: 0 -16px -12px;
	}
}
.c-hero__top {
	margin: 0 auto;
	max-width: 1240px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	/* 見出し2行目(671px)が折り返さない幅をテキスト列に確保するため詰めている */
	gap: 16px;
}
@media only screen and (max-width: 767px) {
	.c-hero__top {
		flex-direction: column;
		flex-wrap: nowrap;
		/* 背景を全幅(375px)にするため、負のマージンで枠を広げ padding で内容幅343pxを維持 */
		margin: 0 -16px;
		padding: 0 16px;
		width: auto;
		/* 画像の下端を黒帯の上端より10px下に置く（従来の 111px = 74+47-10 と同値） */
		background: url(../image/img_fv_bg.png) no-repeat center bottom -10px;
		background-size: 100% auto;
	}
}
.c-hero__main {
	flex: 1 1 560px;
	min-width: 0;
	text-align: left;
}
@media only screen and (max-width: 767px) {
	.c-hero__main {
		flex: 0 0 auto;
		width: 100%;
		/* ポイントの箱をイラストより前面に */
		position: relative;
		z-index: 3;
	}
}
.c-hero__badge {
	background: var(--color-gray);
	padding: 6px 14px;
	font-weight: 700;
	font-size: 25px;
	line-height: 1.4;
	color: var(--color-dark);
	width: fit-content;
	display: block;
}
@media only screen and (max-width: 767px) {
	.c-hero__badge {
		padding: 2px 8px;
		font-size: clamp(15px, 4vw, 12px);
	}
}
.c-hero__badge span {
	color: var(--color-green);
}
.c-hero__heading {
	margin: 14px 0 0;
	font-weight: 900;
	font-size: 48px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--color-dark);
}
.c-hero__heading-sub {
	font-size: 40px;
}
@media only screen and (max-width: 767px) {
	.c-hero__heading {
		margin-top: 8px;
		font-size: clamp(25px, 6.6667vw, 12px);
	}
	.c-hero__heading-sub {
		font-size: clamp(21px, 5.6vw, 12px);
	}
}
.c-hero__heading strong {
	display: block;
	margin-top: 6px;
	font-weight: 900;
	font-size: 79px;
	white-space: nowrap;
}
.c-hero__heading-tail {
	font-size: 71px;
}
@media only screen and (max-width: 767px) {
	.c-hero__heading strong {
		margin-top: 2px;
		font-size: clamp(40px, 10.6667vw, 12px);
	}
	.c-hero__heading-tail {
		font-size: clamp(35px, 9.3333vw, 12px);
	}
}
.c-hero__points {
	margin-top: 40px;
	display: block;
	counter-reset: point 0;
}
@media only screen and (max-width: 767px) {
	.c-hero__points {
		margin-top: 20px;
	}
}
.c-hero__points-item {
	background: var(--color-gray);
	border-radius: 8px;
	padding: 14px 28px 14px 66px;
	width: fit-content;
	font-weight: 700;
	font-size: 21px;
	line-height: 1.5;
	color: var(--color-dark);
	position: relative;
}
@media only screen and (max-width: 767px) {
	.c-hero__points-item {
		padding: 10px 14px 10px 44px;
		font-size: clamp(15px, 4vw, 12px);
		width: fit-content;
		max-width: 100%;
	}
}
.c-hero__points-item + .c-hero__points-item {
	margin-top: 12px;
}
@media only screen and (max-width: 767px) {
	.c-hero__points-item + .c-hero__points-item {
		margin-top: 18px;
	}
}
.c-hero__points-item::before {
	counter-increment: point 1;
	content: counter(point);
	background: var(--color-green);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-num);
	font-weight: 500;
	font-size: 23.38px;
	color: var(--color-white);
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translate3d(0, -50%, 0);
}
@media only screen and (max-width: 767px) {
	.c-hero__points-item::before {
		width: 27px;
		height: 27px;
		font-size: clamp(15px, 4vw, 12px);
		left: 9px;
	}
}
.c-hero__form {
	background: var(--color-cta-dark);
	padding: 28px 24px;
	flex: 0 0 370px;
	width: 370px;
	text-align: left;
	color: var(--color-white);
}
@media only screen and (max-width: 767px) {
	.c-hero__form {
		width: 100%;
		display: none;
	}
}
.c-hero__form-title {
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	text-align: center;
	color: var(--color-white);
}
.c-hero__form a {
	text-decoration: underline;
	color: var(--color-white);
}
.c-hero__form-note {
	margin: 14px 0 0;
	font-size: 10px;
	line-height: 1.5;
	color: var(--color-white);
}
.c-hero__cv {
	display: none;
}
@media only screen and (max-width: 767px) {
	.c-hero__cv {
		background: var(--color-cta-dark);
		margin: 0 -16px;
		padding: 16px;
		width: auto;
		display: block;
		position: relative;
		z-index: 2;
	}
}
.c-hero__cv-button {
	background: var(--color-yellow);
	box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
	border-radius: 40px;
	margin: 0 auto;
	padding: 16px;
	max-width: 238px;
	width: 100%;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 700;
	font-size: 17px;
	color: var(--color-dark);
}
@media only screen and (max-width: 767px) {
	.c-hero__cv-button {
		font-size: clamp(18px, 4.8vw, 12px);
	}
}

@media only screen and (max-width: 767px) {
	.is-form-open .c-hero__form {
		padding: 56px 24px;
		width: 100%;
		display: block;
	}
	.is-form-open .c-hero__main,
	.is-form-open .c-hero__visual,
	.is-form-open .c-hero__cv,
	.is-form-open .c-scroll-logo,
	.is-form-open main > section:not(.c-hero),
	.is-form-open main > aside {
		display: none;
	}
	.is-form-open .c-hero {
		padding: 0;
	}
}

/* Hero visual (握手＋対応業務タグのイラスト) ---------------------------- */
/* イラストは見出し側に重ねつつ、下端をロゴ帯の下端に合わせて配置する。
   ロゴ帯より背面に置き、脚がボックスに隠れる重なりを再現する
   （translateYはレイアウトに影響しないため、行の高さを保ったまま重ねられる） */
.c-hero__visual {
	flex: 0 0 330px;
	width: 330px;
	margin-left: -170px;
	align-self: flex-end;
	transform: translateY(75px);
	position: relative;
	z-index: 1;
}
@media only screen and (max-width: 1199px) {
	.c-hero__visual {
		flex: 0 0 260px;
		width: 260px;
		margin-left: -120px;
	}
}
@media only screen and (max-width: 767px) {
	.c-hero__visual {
		flex: 0 0 auto;
		/* SP専用画像 362×482。黒帯の背面に置き、下端を帯の下端より8px下（=ロゴ帯との
		   隙間の分）まで出す。ロゴ画像はこのイラストより前面 */
		margin: -61px -16px -98px auto;
		width: 192px;
		max-width: none;
		transform: none;
		position: relative;
		z-index: 2;
	}
	/* イラストは黒帯・ロゴ帯の背面 */
	.c-hero__top {
		position: relative;
		z-index: 1;
	}
}
.c-hero__visual picture {
	display: block;
}
.c-hero__visual img {
	width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   Scroll logo
   ========================================================================== */
.c-scroll-logo {
	margin: 8px auto 0;
	max-width: 1240px;
	width: 100%;
	display: flex;
	position: relative;
	z-index: 2;
	overflow: hidden;
}
@media only screen and (max-width: 767px) {
	.c-scroll-logo {
		background: var(--color-bg);
		/* 隙間を padding ではなく margin にして、黒帯の下から出たイラストが
		   この8pxの隙間から見えるようにする */
		margin: 8px -16px 0;
		padding-top: 0;
		width: auto;
		/* ロゴ画像はイラストより前面 */
		z-index: 2;
	}
}
.c-scroll-logo__row {
	padding-left: 8px;
	display: flex;
	gap: 0 8px;
	flex-shrink: 0;
}
@media screen and (max-width: 860px) {
	.c-scroll-logo__row {
		padding-left: 7px;
		gap: 0 7px;
	}
}
.c-scroll-logo__row--a {
	animation: scrollLogoA 60s -30s linear infinite;
}
.c-scroll-logo__row--b {
	animation: scrollLogoB 60s linear infinite;
}
/* 各ロゴを白いボックスに収める（枠線なし・隙間で区切る） */
.c-scroll-logo__item {
	background: var(--color-white);
	width: 147px;
	height: 51px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
@media screen and (max-width: 860px) {
	.c-scroll-logo__item {
		width: 94px;
		height: 39px;
	}
}
/* ロゴ画像はすべて 400x160 の統一キャンバス。ボックスの高さいっぱいに置くと
   画像内の余白でロゴごとの大小が再現される */
.c-scroll-logo__item img {
	max-width: 100%;
	width: auto;
	height: 100%;
	display: block;
}
@keyframes scrollLogoA {
	0% { transform: translateX(100%); }
	to { transform: translateX(-100%); }
}
@keyframes scrollLogoB {
	0% { transform: translateX(0); }
	to { transform: translateX(-200%); }
}

/* ==========================================================================
   Troubles (悩み)
   ========================================================================== */
.c-troubles {
	background: var(--color-bg-gray);
	/* Figma実値: 上下104px */
	padding: 104px 20px 0;
}
@media only screen and (max-width: 767px) {
	.c-troubles {
		padding: 56px 16px 0;
	}
}
.c-troubles__wrap {
	margin: 0 auto;
	max-width: 1080px;
	width: 100%;
}
.c-troubles__list {
	display: flex;
	/* Figma実値: カード252px・間24px */
	gap: 24px;
}
@media only screen and (max-width: 767px) {
	.c-troubles__list {
		flex-wrap: wrap;
		gap: 26px 16px;
	}
}
.c-troubles__item {
	width: calc((100% - 54px) / 4);
	text-align: center;
}
@media only screen and (max-width: 767px) {
	.c-troubles__item {
		width: calc((100% - 16px) / 2);
	}
}
.c-troubles__title {
	font-weight: 700;
	font-size: 21px;
	line-height: 1.4;
	text-align: center;
	color: var(--color-dark);
}
@media only screen and (max-width: 767px) {
	.c-troubles__title {
		font-size: clamp(21px, 5.6vw, 12px);
		line-height: 1.25;
	}
}
.c-troubles__icon {
	margin: 28px auto 0;
	max-width: 208px;
	width: 100%;
}
@media only screen and (max-width: 767px) {
	.c-troubles__icon {
		margin-top: 14px;
		max-width: 148px;
	}
}
.c-troubles__icon img {
	width: 100%;
	height: auto;
	display: block;
}
.c-troubles__text {
	/* Figma実値: 幅はカード幅いっぱい252px・行送り1.8 */
	margin: 36px auto 0;
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-dark);
	text-align: left;
}
@media only screen and (max-width: 767px) {
	.c-troubles__text {
		/* デザインどおり全行9文字で折り返す。paltを切って全角を等幅にし、
		   line-break:strict で「っ」等の行頭禁則をFigmaと揃える */
		margin-top: 15px;
		font-size: clamp(16px, 4.2667vw, 12px);
		line-height: 1.8;
		letter-spacing: 0.04em;
		font-feature-settings: normal;
		line-break: strict;
	}
}

/* ==========================================================================
   CTA banner
   ========================================================================== */
.c-cta {
	padding: 48px 20px;
}
@media only screen and (max-width: 767px) {
	.c-cta {
		padding: 36px 16px;
	}
}
.c-cta__wrap {
	margin: 0 auto;
	/* Figma実値: 1080px */
	max-width: 1080px;
	width: 100%;
}

/* ダークCTAバナー（画面幅いっぱい） */
.c-cta--dark {
	background: var(--color-cta-dark);
	/* Figma実値: 上下64px */
	padding: 64px 20px;
}
@media only screen and (max-width: 767px) {
	.c-cta--dark {
		/* Figma実値: 上下64px / 左右32px（内容幅311px） */
		padding: 64px 32px;
	}
	/* 本文が先頭に来る通常のダークCTAは、行送り1.8の半行分(10.7px)を
	   余白から差し引くと、文字の見た目位置がFigmaの64px/32pxと一致する */
	.c-cta--dark:not(.c-cta--tags) {
		padding-top: 53.3px;
	}
	.c-cta--dark:not(.c-cta--tags) .c-cta__button {
		margin-top: 21.3px;
	}
}

/* 悩み解決の訴求バナー（グレーの吹き出しボックス） */
.c-cta--highlight {
	background: var(--color-bg-gray);
	/* Figma実値: 上のカード列から56px */
	padding: 56px 20px 0;
}
@media only screen and (max-width: 767px) {
	.c-cta--highlight {
		padding: 32px 16px 0;
	}
}
.c-cta--highlight .c-cta__wrap {
	background: var(--color-bg-gray-dark);
	max-width: 1080px;
	padding: 72px 20px 48px;
	position: relative;
}
@media only screen and (max-width: 767px) {
	.c-cta--highlight .c-cta__wrap {
		padding: 72px 16px 48px;
	}
}
.c-cta--highlight .c-cta__wrap::before {
	content: "";
	background: var(--color-bg-gray);
	width: 168px;
	height: 49px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate3d(-50%, 0, 0);
}
@media only screen and (max-width: 767px) {
	.c-cta--highlight .c-cta__wrap::before {
		width: 182px;
		height: 44px;
	}
}
.c-cta__text {
	font-weight: 700;
	font-size: 20px;
	line-height: 1.7;
	text-align: center;
	color: var(--color-dark);
}
.c-cta--dark .c-cta__text {
	color: var(--color-white);
	font-size: 24px;
	/* Figma実値: leading-[1.8] */
	line-height: 1.8;
	/* line-box上端 → cap上端 の余りを打ち消す（24px/1.8の実測値） */
	margin-top: -14.5px;
}
.c-cta--highlight .c-cta__text {
	font-size: 30px;
	line-height: 1.5;
}
@media only screen and (max-width: 767px) {
	.c-cta--highlight .c-cta__text {
		font-size: clamp(30px, 8vw, 12px);
		line-height: 1.2;
	}
}
/* 依頼できる業務を並べたダークCTA（見出しが大きい） */
.c-cta--tags .c-cta__text {
	font-weight: 700;
	font-size: 30px;
	line-height: 52px;
}
@media only screen and (max-width: 767px) {
	.c-cta__text {
		font-size: clamp(15px, 4vw, 12px);
	}
	.c-cta--dark .c-cta__text {
		/* デザインどおり1行15文字（20px × 15 = 300px ≤ 311px、16文字は320pxで入らない） */
		font-size: clamp(20px, 5.3333vw, 12px);
		/* PCのトリム補正はSPに持ち込まない（SPは検証済みの値を維持） */
		margin-top: 0;
		/* Figma実値: 行送り1.8。159pxはFigmaの text-box-trim で
		   上下の半行分(各10.7px)が切られた値なので、行送りの根拠にはしない */
		line-height: 1.8;
		font-feature-settings: normal;
		line-break: strict;
	}
	.c-cta--tags .c-cta__text {
		/* Figma実値: 素の行は21px、黒帯は20px。黒帯どうしは密着（行ピッチ30.6px） */
		font-size: clamp(21px, 5.6vw, 12px);
		line-height: 1.457;
		font-feature-settings: normal;
	}
	/* Figma実値: 素の2行はブロックで、黒帯ブロックとの間隔16px */
	.c-cta--tags .c-cta__line {
		line-height: 1;
		display: block;
	}
	.c-cta--tags .c-cta__line:first-child {
		margin-bottom: 13px;
	}
	.c-cta--tags .c-cta__line:last-child {
		margin-top: 13px;
	}

}
.c-cta__mark {
	background: var(--color-dark);
	padding: 0 8px;
	line-height: 1.25;
	color: var(--color-white);
	display: inline-block;
}
.c-cta--dark .c-cta__mark {
	background: #2A2E30;
}
@media only screen and (max-width: 767px) {
	/* Figma実値: 帯の色は #363833、文字20px、左右8px、帯の描画高さ30.6px。
	   SP上書きは基本ルールより後ろに置くこと */
	.c-cta--tags .c-cta__mark {
		background: linear-gradient(var(--color-dark), var(--color-dark)) no-repeat center / 100% 30.6px;
		padding: 0 8px;
		font-size: 20px;
		line-height: 1.53;
	}
}
/* 1行目は2行目より小さい */
.c-cta__lead {
	margin-bottom: 10px;
	font-size: 24px;
	display: block;
}
@media only screen and (max-width: 767px) {
	.c-cta__lead {
		margin-bottom: 16px;
		font-size: clamp(20px, 5.3333vw, 12px);
		line-height: 1.8;
	}
}
.c-cta__tags {
	margin: 27px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
	max-width: 100%;
}
.c-cta__tag {
	background: var(--color-white);
	border: solid 2px var(--color-tag-border);
	border-radius: 30px;
	padding: 1px 7px;
	font-size: 12.497px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-dark);
	white-space: nowrap;
}
@media only screen and (max-width: 767px) {
	.c-cta__tags {
		/* Figma実値: 見出し→タグ 32px / タグ間 8px */
		margin-top: 32px;
		gap: 8px;
	}
	.c-cta__tag {
		/* Figma実値: 12.497px / 高さ28px / 内側9.62px / 枠線1.506px */
		border-width: 1.506px;
		padding: 0 9.62px;
		height: 28px;
		display: flex;
		align-items: center;
		font-size: 12.497px;
	}
}
.c-cta__button {
	background: var(--color-yellow);
	/* Figma実値: drop-shadow 0 2px 8px */
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
	border-radius: 40px;
	/* Figma実値: 高さ64px・左右パディング24px・アイコンとの間10px。
	   本文との間はFigma実値32pxから line-box下端の余り11.1px を引いた値 */
	margin: 20.9px auto 0;
	padding: 0 24px;
	height: 64px;
	width: fit-content;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	font-weight: 700;
	font-size: 21px;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--color-dark);
}
.c-cta--tags .c-cta__button {
	margin-top: 37px;
}
@media only screen and (max-width: 767px) {
	.c-cta__button {
		padding: 6px 20px;
		height: auto;
		width: 100%;
		white-space: normal;
		gap: 0;
		font-size: clamp(21px, 5.6vw, 12px);
		line-height: 1.25;
		font-feature-settings: normal;
	}
	.c-cta__button-text {
		flex: 1 1 auto;
	}
	/* 黒背景は2行に折り返すため inline にする（padding は両断片に付与） */
	.c-cta__mark {
		display: inline;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
	/* .c-cta__mark 自身の line-height 1.25 が親より大きいと行間を決めてしまう */
	.c-cta--highlight .c-cta__mark {
		line-height: 1.35;
	}
	.c-cta--tags .c-cta__button {
		/* Figma実値: タグ→ボタン 32px */
		margin-top: 32px;
	}
	.c-cta--highlight .c-cta__button {
		margin-top: 32px;
	}
}
.c-cta__button::after {
	content: "";
	border-style: solid solid none none;
	border-width: 2px;
	border-color: var(--color-dark);
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	transform: rotate(45deg);
}

/* ==========================================================================
   Features (サービスの特徴)
   ========================================================================== */
.c-features {
	background: var(--color-bg-gray);
	/* Figma実値: 上下104px */
	padding: 104px 20px;
}
@media only screen and (max-width: 767px) {
	.c-features {
		/* 下はFigma実値80px（4枚目の画像下端〜ダークCTA上端） */
		padding: 56px 16px 80px;
		/* 378pxの画像が左右1.5pxずつはみ出すのをFigma同様に切る */
		overflow-x: hidden;
	}
}
.c-features__wrap {
	margin: 0 auto;
	/* Figma実値: 1080px */
	max-width: 1080px;
	width: 100%;
}
.c-features__list {
	margin: 0 auto;
	max-width: 1080px;
	display: flex;
	flex-direction: column;
	/* Figma実値: 行間48px */
	gap: 48px;
}
@media only screen and (max-width: 767px) {
	.c-features__list {
		gap: 40px;
	}
}
/* テキスト530px + 画像ブロック550px = 1080px のため、列間の余白は取らない */
.c-features__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
}
@media only screen and (max-width: 767px) {
	.c-features__item {
		flex-direction: column;
		gap: 4px;
	}
}
.c-features__item:nth-child(odd) {
	flex-direction: row-reverse;
}
@media only screen and (max-width: 767px) {
	.c-features__item:nth-child(odd) {
		flex-direction: column;
	}
}
.c-features__body {
	flex: 1 1 auto;
	max-width: 530px;
	text-align: left;
}
@media only screen and (max-width: 767px) {
	.c-features__body {
		max-width: 100%;
		width: 100%;
	}
}
.c-features__title {
	font-weight: 900;
	font-size: 28px;
	line-height: 1.6;
	color: var(--color-dark);
}
@media only screen and (max-width: 767px) {
	.c-features__title {
		font-size: clamp(21px, 5.6vw, 12px);
		line-height: 1.3;
		font-feature-settings: normal;
	}
}
.c-features__text {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.9;
	color: var(--color-dark);
}
@media only screen and (max-width: 767px) {
	.c-features__text {
		/* デザインどおり1行20文字。paltを切って全角を等幅にする */
		margin-top: 24px;
		font-size: clamp(16px, 4.2667vw, 12px);
		line-height: 1.8;
		letter-spacing: 0.04em;
		font-feature-settings: normal;
		line-break: strict;
	}
}
/* 画像ブロックは最大550px。中の画像は最大378pxでセンター配置 */
.c-features__img {
	flex: 0 0 550px;
	max-width: 550px;
}
@media only screen and (max-width: 767px) {
	.c-features__img {
		/* Figma実値: 画像枠378px は343pxのコンテンツから左右17.5pxずつはみ出す。
		   枠を全幅375pxに広げ、はみ出す1.5pxずつはFigma同様に切る */
		flex: 0 0 auto;
		margin: 0 -16px;
		width: auto;
		/* flexアイテムの min-width:auto を外さないと378pxの画像に押し広げられる */
		min-width: 0;
		overflow: hidden;
	}
}
.c-features__img img {
	margin: 0 auto;
	max-width: 378px;
	width: 100%;
	height: auto;
	display: block;
}
/* 最後の1枚のみ素材幅が狭いため280pxを上限にする */
.c-features__img--narrow img {
	max-width: 280px;
}
@media only screen and (max-width: 767px) {
	.c-features__img img {
		/* Figma実値 378×260px。SP上書きは基本ルールより後ろに置くこと */
		max-width: none;
		width: 378px;
	}
	.c-features__img--narrow img {
		/* Figma実値 280×260px（343px枠の中でセンター＝左31.5px） */
		width: 280px;
	}
}

/* ==========================================================================
   Merit
   ========================================================================== */
.c-merit {
	background: var(--color-bg-gray);
	/* 次のセクション(personnel)が同じ背景色で padding-top を持つため下は 0 */
	/* Figma実値: 上104px */
	padding: 104px 20px 0;
}
@media only screen and (max-width: 767px) {
	.c-merit {
		/* Figma実値: セクション上端→見出しブロック上端 80px */
		padding: 80px 16px 0;
	}
	/* 共通の 50px!important を merit だけ Figma実値 56px に上書き */
	.c-merit .c-merit__wrap .c-merit__list {
		margin-top: 56px !important;
	}
}
.c-merit__wrap {
	margin: 0 auto;
	/* Figma実値: 見出しは1080px幅 */
	max-width: 1080px;
	width: 100%;
}
/* Figma実値: 本文ブロックは880px幅で中央寄せ */
.c-merit__list,
.c-merit__compare {
	margin-left: auto;
	margin-right: auto;
	max-width: 880px;
}
.c-merit__list {
	text-align: left;
}
.c-merit__item {
	background: var(--color-white);
	border-radius: 4px;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	gap: 55px;
}
@media only screen and (max-width: 767px) {
	.c-merit__item {
		/* デザインは merit＋円が上寄せ（上下中央ではない） */
		align-items: flex-start;
		padding: 10px 16px;
		gap: 20px;
	}
}
.c-merit__item + .c-merit__item {
	margin-top: 20px;
}
@media only screen and (max-width: 767px) {
	.c-merit__item + .c-merit__item {
		margin-top: 20px;
	}
}
/* 「merit」の文字＋数字入りの緑の丸 */
.c-merit__num {
	display: flex;
	align-items: center;
	gap: 7px;
	padding-left: 17px;
	flex-shrink: 0;
	white-space: nowrap;
}
@media only screen and (max-width: 767px) {
	.c-merit__num {
		margin-top: 10px;
		gap: 10px;
		padding-left: 0;
	}
}
.c-merit__num-label {
	font-family: var(--font-num);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	color: var(--color-dark);
}
@media only screen and (max-width: 767px) {
	.c-merit__num-label {
		font-size: clamp(14px, 3.7333vw, 12px);
	}
}
.c-merit__num-value {
	background: var(--color-green);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-num);
	font-size: 31px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-white);
	flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
	.c-merit__num-value {
		width: 30px;
		height: 30px;
		font-size: clamp(16px, 4.2667vw, 12px);
	}
}
.c-merit__text {
	font-weight: 700;
	font-size: 21px;
	line-height: 1.6;
	color: var(--color-dark);
}
@media only screen and (max-width: 767px) {
	.c-merit__text {
		/* デザインどおり1行10文字。paltを切ると11文字（220px）が枠218.1pxに入らなくなる */
		font-size: clamp(20px, 5.3333vw, 12px);
		line-height: 1.4;
		font-feature-settings: normal;
		line-break: strict;
	}
}
.c-merit__compare {
	margin-top: 40px;
	border: solid 2px var(--color-dark);
	padding: 32px 20px;
}
@media only screen and (max-width: 767px) {
	.c-merit__compare {
		margin-top: 40px;
		padding: 30px 38px;
	}
}
.c-merit__compare-title {
	font-weight: 700;
	font-size: 30px;
	line-height: 1.5;
	text-align: center;
	color: var(--color-dark);
}
@media only screen and (max-width: 767px) {
	.c-merit__compare-title {
		font-size: clamp(30px, 8vw, 12px);
		line-height: 1.35;
		font-feature-settings: normal;
	}
	/* 黒帯が上の行に食い込むので隙間を空ける */
	.c-merit__compare-sub {
		margin-bottom: 6px;
		display: block;
	}
}
/* 1行目は2行目より小さい */
.c-merit__compare-lead {
	margin-bottom: 10px;
	font-size: 24px;
	display: block;
}
@media only screen and (max-width: 767px) {
	.c-merit__compare-lead {
		margin-bottom: 6px;
		font-size: clamp(20px, 5.3333vw, 12px);
		line-height: 1.8;
	}
}
.c-merit__compare-mark {
	background: var(--color-dark);
	padding: 0 6px;
	line-height: 1.2;
	color: var(--color-white);
	display: inline-block;
}
@media only screen and (max-width: 767px) {
	/* 黒背景は2行に折り返すため inline にする（padding は両断片に付与） */
	.c-merit__compare-mark {
		padding: 0 8px;
		display: inline;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
}
/* 比較表 --------------------------------------------------------------- */
/* セル間の隙間(上下左右20px)は border-spacing で作るため、
   外周ぶんを打ち消して見た目の横幅を 880px に合わせる */
.c-merit__table-scroll {
	margin: 36px -20px -20px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
@media only screen and (max-width: 767px) {
	.c-merit__table-scroll {
		/* Figma実値: 表示幅335px（左16px / 右24px）。上36px+セル間隔20px=見た目56px */
		margin: 36px 8px -20px 0;
		padding: 0;
		/* ネイティブのスクロールバーは隠し、下の自作バーを常時表示する
		   （iOS Safari は ::-webkit-scrollbar 非対応で、オーバーレイ表示のため
		     操作中しか出ない） */
		scrollbar-width: none;
	}
	.c-merit__table-scroll::-webkit-scrollbar {
		display: none;
	}
}
/* 比較表の横スクロール位置を示す自作バー（SPのみ表示・常時表示） */
.c-merit__scrollbar {
	display: none;
}
@media only screen and (max-width: 767px) {
	.c-merit__scrollbar {
		background: var(--color-bg-gray-dark);
		border-radius: 999px;
		/* Figma実値: トラック335×8px、最終行セルの32px下、左端はコンテンツ左端 */
		margin: 32px auto 0 0;
		width: 335px;
		height: 8px;
		display: block;
		position: relative;
		overflow: hidden;
	}
	.c-merit__scrollbar-thumb {
		background: var(--color-dark);
		border-radius: 999px;
		/* Figma実値 84px 固定（実スクロール比率39%とは一致しない） */
		width: 84px;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}
}
.c-merit__table-wrap {
	width: 920px;
	margin: 0 auto;
	position: relative;
}
/* MarketerAgent 列の背景帯（セル幅より左右12pxずつ広い） */
.c-merit__table-band {
	background: var(--color-mint-band);
	width: 256px;
	display: block;
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 152px;
	z-index: 0;
}
.c-merit__table {
	width: 920px;
	border-collapse: separate;
	border-spacing: 20px;
	table-layout: fixed;
	position: relative;
	z-index: 1;
}
.c-merit__col {
	width: 232px;
}
.c-merit__col--label {
	width: 124px;
}
/* 見出し行 */
.c-merit__head {
	height: 87px;
	padding: 0;
	font-weight: 700;
	font-size: 21px;
	line-height: 1.4;
	text-align: center;
	vertical-align: middle;
	color: var(--color-dark);
}
/* 行見出し（グレーのボックス） */
.c-merit__label {
	height: 70px;
	padding: 0 4px;
	background: var(--color-bg-gray-dark);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
	vertical-align: middle;
	color: var(--color-dark);
}
/* 各セル */
.c-merit__cell {
	height: 70px;
	padding: 0 8px;
	background: var(--color-white);
	text-align: center;
	vertical-align: middle;
	color: var(--color-dark);
}
.c-merit__cell--on {
	border: solid 2px var(--color-green);
	color: var(--color-green);
}
.c-merit__cell--fill {
	background: var(--color-green);
	color: var(--color-white);
}
.c-merit__icon {
	font-weight: 900;
	font-size: 32px;
	line-height: 1;
	display: block;
	color: var(--color-mark-gray);
}
.c-merit__cell--on .c-merit__icon,
.c-merit__cell--fill .c-merit__icon {
	color: inherit;
}
.c-merit__icon--arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.c-merit__arrow {
	font-weight: 700;
	font-size: 24px;
	font-style: normal;
}
.c-merit__memo {
	margin-top: 8px;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	display: block;
}

/* ==========================================================================
   Personnel (登録マーケター紹介)
   ========================================================================== */
.c-personnel {
	background: var(--color-bg-gray);
	/* Figma実値: 上下104px */
	padding: 104px 20px;
}
@media only screen and (max-width: 767px) {
	.c-personnel {
		/* Figma実値: 前セクション→見出し 80px、最終カード→タグ付きCTA 80px */
		padding: 80px 16px;
	}
	/* 共通の 44px!important を personnel だけ Figma実値 40px に上書き */
	.c-personnel .c-section-lead + * {
		margin-top: 40px !important;
	}
}
.c-personnel__wrap {
	margin: 0 auto;
	max-width: 1080px;
	width: 100%;
}
.c-personnel__list {
	display: flex;
	gap: 33px;
}
@media only screen and (max-width: 767px) {
	.c-personnel__list {
		flex-direction: column;
		/* Figma実値: カード間 26px */
		gap: 26px;
		align-items: center;
	}
}
.c-personnel__cell {
	width: calc((100% - 66px) / 3);
	display: flex;
	flex-direction: column;
}
@media only screen and (max-width: 767px) {
	.c-personnel__cell {
		/* Figma実値: カード幅 341px */
		width: 341px;
		max-width: 100%;
	}
}
/* 名前の行は白カードの外・センター配置 */
.c-personnel__head {
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
}
@media only screen and (max-width: 767px) {
	.c-personnel__head {
		/* Figma実値: 行の高さ42px、白カードとの間隔16px */
		margin-bottom: 16px;
		min-height: 42px;
		gap: 8px;
	}
}
.c-personnel__badge {
	background: var(--color-green);
	border-radius: 999px;
	padding: 2px 10px;
	min-height: 31px;
	width: fit-content;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-white);
	white-space: nowrap;
	flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
	.c-personnel__badge {
		/* Figma実値: min-width130px / padding 4px12px / 角丸18px / 14px・行送り24.5px */
		border-radius: 18px;
		min-width: 130px;
		min-height: 0;
		padding: 4px 12px;
		font-size: clamp(14px, 3.7333vw, 12px);
		line-height: 24.5px;
		font-feature-settings: normal;
	}
}
.c-personnel__name {
	font-weight: 700;
	font-size: 24px;
	line-height: 1.4;
	text-align: left;
	color: var(--color-dark);
}
@media only screen and (max-width: 767px) {
	.c-personnel__name {
		/* Figma実値: 24px / 行送り30px */
		font-size: clamp(24px, 6.4vw, 12px);
		line-height: 30px;
		font-feature-settings: normal;
	}
}
.c-personnel__card {
	background: var(--color-white);
	border-radius: 12px;
	padding: 18px;
	text-align: center;
	flex: 1 1 auto;
}
@media only screen and (max-width: 767px) {
	.c-personnel__card {
		/* Figma実値: 内側22px → 写真・本文の幅297px */
		border-radius: 8px;
		padding: 22px;
	}
}
.c-personnel__photo {
	margin: 0 auto;
	border-radius: 8px;
	width: 100%;
	height: auto;
	display: block;
}
.c-personnel__detail {
	margin-top: 32px;
	text-align: left;
}
@media only screen and (max-width: 767px) {
	.c-personnel__detail {
		/* Figma実値: 写真→詳細 29px */
		margin-top: 29px;
	}
}
.c-personnel__detail-label {
	font-weight: 700;
	font-size: 16px;
	line-height: 35px;
	color: var(--color-green);
}
@media only screen and (max-width: 767px) {
	.c-personnel__detail-label {
		/* Figma実値: 16px / 行送り35px */
		font-size: clamp(16px, 4.2667vw, 12px);
		line-height: 35px;
	}
}
.c-personnel__detail-text {
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-dark);
}
@media only screen and (max-width: 767px) {
	.c-personnel__detail-text {
		/* Figma実値: 16px / 行送り1.8 / 字送り0.04em */
		font-size: clamp(16px, 4.2667vw, 12px);
		line-height: 1.8;
		letter-spacing: 0.04em;
	}
}
.c-personnel__detail-label + .c-personnel__detail-text {
	margin-top: 4px;
}
.c-personnel__detail-text + .c-personnel__detail-label {
	margin-top: 4px;
}
/* 支援業務は2行ぶんの高さを確保して、3枚の「経歴」の位置を揃える */
.c-personnel__detail-text--reserve {
	min-height: calc(17px * 1.7 * 2);
}
@media only screen and (max-width: 767px) {
	.c-personnel__detail-text--reserve {
		min-height: 0;
	}
}

/* ==========================================================================
   Flow
   ========================================================================== */
.c-flow {
	background: var(--color-bg-alt);
	/* Figma実値: 上下88px */
	padding: 88px 20px;
}
@media only screen and (max-width: 767px) {
	.c-flow {
		/* Figma実値: 上下80px */
		padding: 80px 16px;
	}
}
.c-flow__wrap {
	margin: 0 auto;
	max-width: 1080px;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 40px;
	text-align: left;
	counter-reset: step 0;
}
@media only screen and (max-width: 767px) {
	.c-flow__wrap {
		flex-direction: column;
		/* Figma実値: 見出し→ステップ 40px */
		gap: 40px;
	}
}
.c-flow__title {
	margin: 0;
	/* Figma実値: 見出し列280px / ステップ列760px / 間40px */
	width: 280px;
	font-weight: 900;
	font-size: 40px;
	line-height: 1.3;
	color: var(--color-dark);
	flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
	.c-flow__title {
		width: 100%;
		font-size: clamp(26px, 6.9333vw, 12px);
		line-height: 1.3;
		text-align: center;
	}
}
.c-flow__steps {
	flex: 1 1 auto;
	min-width: 0;
}
.c-flow__step {
	display: flex;
	align-items: center;
	gap: 16px;
}
@media only screen and (max-width: 767px) {
	.c-flow__step {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 24px 8px;
	}
}
.c-flow__step + .c-flow__step {
	margin-top: 24px;
}
/* ステップごとに右へずらす階段状のレイアウト */
.c-flow__step:nth-child(2) {
	padding-left: 17px;
}
.c-flow__step:nth-child(3) {
	padding-left: 34px;
}
.c-flow__step:nth-child(4) {
	padding-left: 51px;
}
.c-flow__step:nth-child(5) {
	padding-left: 68px;
}
.c-flow__step:nth-child(6) {
	padding-left: 85px;
}
@media only screen and (max-width: 767px) {
	.c-flow__step:nth-child(n) {
		padding-left: 0;
	}
}
.c-flow__step-title {
	font-weight: 900;
	font-size: 21px;
	line-height: 1.3;
	color: var(--color-dark);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
	.c-flow__step-title {
		font-size: clamp(21px, 5.6vw, 12px);
		gap: 8px;
	}
}
.c-flow__step-title::before {
	counter-increment: step 1;
	content: counter(step);
	background: var(--color-white);
	border-radius: 50%;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-num);
	font-weight: 500;
	font-size: 31px;
	color: var(--color-green);
	flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
	.c-flow__step-title::before {
		width: 48px;
		height: 48px;
		font-size: clamp(26px, 6.9333vw, 12px);
	}
}
/* 説明ボックスは文字量に応じた可変幅 */
.c-flow__step-body {
	background: var(--color-white);
	border-radius: 8px;
	padding: 15px 18px;
	width: fit-content;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-dark);
}
@media only screen and (max-width: 767px) {
	.c-flow__step-body {
		margin-left: 0;
		padding: 16px;
		width: 100%;
		/* デザインどおり1行18文字（paltありだと19文字入る） */
		font-feature-settings: normal;
		line-break: strict;
		font-size: clamp(17px, 4.5333vw, 12px);
		line-height: 1.6;
	}
}
/* ==========================================================================
   FAQ
   ========================================================================== */
.c-faq {
	background: var(--color-bg-gray);
	/* Figma実値: 上下104px */
	padding: 104px 20px;
}
@media only screen and (max-width: 767px) {
	.c-faq {
		/* 内容幅275px = 見出し13文字(260px)／回答17文字(272px)がどちらも成立する幅
		   Figma実値: 左右16px + インデント59px → 本文幅284px、上下80px */
		padding: 80px 16px;
	}
	/* 共通の 50px!important を FAQ だけ Figma実値 56px に上書き */
	.c-faq .c-faq__wrap .c-section-title + * {
		margin-top: 56px !important;
	}
}
.c-faq__wrap {
	margin: 0 auto;
	/* Figma実値: 1080px */
	max-width: 1080px;
	width: 100%;
	text-align: left;
}
/* Figma実値: 本文列は880px幅（見出しのみ1080px） */
.c-faq__item {
	margin-left: auto;
	margin-right: auto;
	max-width: 880px;
}
.c-faq__item + .c-faq__item {
	margin-top: 40px;
}
.c-faq__question {
	/* Figma実値: 字下げ75px */
	padding: 0 0 0 75px;
	font-weight: 900;
	font-size: 21px;
	line-height: 1.3;
	color: var(--color-dark);
	position: relative;
	overflow: visible;
}
@media only screen and (max-width: 767px) {
	.c-faq__question {
		/* Figma実値: インデント59px / 21px。1行13文字（273px ≤ 284px、14文字は294pxで不可） */
		padding-left: 59px;
		font-size: clamp(21px, 5.6vw, 12px);
		line-height: 1.3;
		font-feature-settings: normal;
		line-break: strict;
	}
}
.c-faq__question::before {
	content: "Q.";
	width: fit-content;
	display: block;
	font-family: var(--font-num);
	font-weight: 400;
	font-size: 44px;
	line-height: 1;
	color: var(--color-green);
	position: absolute;
	top: -0.12em;
	left: 0;
}
@media only screen and (max-width: 767px) {
	.c-faq__question::before {
		/* Figma実値: 「Q.」は項目左端から9.3pxの位置・42×31px */
		left: 9.3px;
		font-size: clamp(44px, 11.7333vw, 12px);
	}
}
.c-faq__answer {
	margin-top: 10px;
	/* Figma実値: 字下げ75px */
	padding: 0 0 0 75px;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-dark);
}
@media only screen and (max-width: 767px) {
	.c-faq__answer {
		/* Figma実値: インデント59px。1行17文字（272px ≤ 284px、18文字は288pxで不可） */
		padding-left: 59px;
		font-size: clamp(16px, 4.2667vw, 12px);
		line-height: 1.8;
		letter-spacing: normal;
		font-feature-settings: normal;
		line-break: strict;
	}
}

/* ==========================================================================
   About
   ========================================================================== */
.c-about {
	background: var(--color-bg-gray);
	/* Figma実値: 上下104px */
	padding: 104px 20px;
}
@media only screen and (max-width: 767px) {
	.c-about {
		padding: 56px 16px;
	}
}
.c-about__wrap {
	margin: 0 auto;
	/* Figma実値: 見出しは1080px幅 */
	max-width: 1080px;
	width: 100%;
}
.c-about__table {
	margin: 0 auto;
	/* Figma実値: 表は880px幅 */
	max-width: 880px;
	width: 100%;
}
.c-about__table th,
.c-about__table td {
	background: var(--color-white);
	border-top: solid 1px var(--color-border);
	/* Figma実値: 行高71px（左右のインデントは20px） */
	padding: 21px 20px;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-dark);
}
.c-about__table th {
	width: 240px;
	font-weight: 700;
}
@media only screen and (max-width: 767px) {
	.c-about__table th,
	.c-about__table td {
		font-size: clamp(16px, 4.2667vw, 12px);
		line-height: 1.8;
	}
	.c-about__table,
	.c-about__table tbody,
	.c-about__table tr,
	.c-about__table th,
	.c-about__table td {
		width: 100%;
		display: block;
	}
	.c-about__table {
		border-top: solid 1px var(--color-border);
	}
	.c-about__table tr {
		border-bottom: solid 1px var(--color-border);
	}
	.c-about__table th {
		padding: 15px 20px 16px;
	}
	.c-about__table td {
		padding: 0 20px 15px;
		border-top: none;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.c-footer {
	background: #E3E3E3;
	padding: 32px 20px;
}
/* Figma実値: コンテンツ列は他セクションと同じ1080px */
.c-footer__wrap {
	margin: 0 auto;
	max-width: 1080px;
	width: 100%;
}
@media only screen and (max-width: 767px) {
	.c-footer {
		/* Figma実値: 上下40px */
		padding: 40px 16px;
		font-feature-settings: normal;
	}
}
.c-footer__link {
	margin: 0 auto;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.8;
	text-decoration-line: underline;
	color: var(--color-dark);
	text-align: center;
	display: block;
}
@media only screen and (max-width: 767px) {
	.c-footer__link {
		/* Figma実値: 14px / 字送り0.04em → テキスト幅218px */
		font-size: clamp(14px, 3.7333vw, 12px);
		letter-spacing: 0.04em;
	}
}
.c-footer__main {
	margin: 24px auto 0;
	max-width: 1080px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
@media only screen and (max-width: 767px) {
	.c-footer__main {
		/* Figma実値: リンク→シェアボタン 24px */
		margin-top: 24px;
		flex-direction: column;
	}
}
.c-footer__sns {
	display: flex;
	align-items: center;
	gap: 16px;
	white-space: nowrap;
}
.c-footer__sns li {
	display: contents;
}
.c-footer__sns a {
	font-weight: 700;
	font-size: 12px;
	line-height: 1.75;
	color: var(--color-white);
	display: block;
	padding: 2px 8px;
	border-radius: 4px;
}
@media only screen and (max-width: 767px) {
	.c-footer__sns a {
		font-size: clamp(14px, 3.7333vw, 12px);
	}
}
.c-footer__sns a.c-footer__sns--twitter {
	background: #1DA1F2;
}
.c-footer__sns a.c-footer__sns--facebook {
	background: #4267B2;
}
.c-footer__logo {
	margin: 0;
	width: 90px;
	height: auto;
	display: block;
}
@media only screen and (max-width: 767px) {
	.c-footer__logo {
		/* Figma実値: ボタン→ロゴ 24px / ロゴ117.81×26px */
		margin: 24px auto 0;
		width: 117.81px;
	}
}
.c-footer__logo img {
	width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   HubSpot form overrides (creative22222 準拠)
   ========================================================================== */
.hs-form-html {
	margin: 16px 0 0;
}

/* HubSpotのCSSは実行時に後から読み込まれ同じ詳細度では勝てないため、
   ダークパネル上で読めるようセレクタの詳細度を上げて上書きする */
.c-hero__form [data-hsfc-id=Renderer] {
	--hsf-field-label__color: #fff;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-FieldLabel {
	color: #fff;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-FieldLabel__RequiredIndicator {
	color: #fff;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-FieldLabel__RequiredIndicator::after {
	content: "必須";
	color: var(--color-yellow);
	display: inline;
}

.c-hero__form .hsfc-Step__Content {
	padding: 0 !important;
}
.c-hero__form .hsfc-Step .hsfc-FieldLabel {
	margin: 0;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.c-hero__form [data-hsfc-id=Renderer] .hsfc-Row {
	margin: 0;
	padding: 0;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-Row + .hsfc-Row {
	margin-top: 3px;
}
.c-hero__form [data-hsfc-id=Renderer] label[data-hsfc-id=FieldLabel] {
	font-size: 12px;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-FieldLabel,
.c-hero__form [data-hsfc-id=Renderer] .hsfc-TextField > *:not(:last-child),
.c-hero__form [data-hsfc-id=Renderer] .hsfc-PhoneField > *:not(:last-child),
.c-hero__form [data-hsfc-id=Renderer] .hsfc-DropdownField > *:not(:last-child),
.c-hero__form [data-hsfc-id=Renderer] .hsfc-EmailField > *:not(:last-child) {
	margin-bottom: 3px !important;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-FieldLabel__RequiredIndicator {
	margin-left: 5px;
	color: #fff;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-FieldLabel__RequiredIndicator::after {
	content: "必須";
	color: #FFF734;
	display: inline;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-NavigationRow {
	margin-top: 16px;
	text-align: center;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-TextInput {
	padding: 12px 8px;
	font-size: 14px;
	border-radius: 4px;
	height: 36px;
	box-sizing: border-box;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret__Flag {
	width: 30px;
	width: fit-content;
	font-size: 12px;
	color: #000;
	display: block;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret {
	border-radius: 4px 0 0 4px !important;
	padding: 0 8px;
	height: 36px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret + .hsfc-TextInput {
	border-radius: 0 4px 4px 0 !important;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-Button {
	background-color: #FFF734;
	margin: 0 auto;
	max-width: 240px;
	width: 100%;
	border-radius: 50px;
	font-size: 16px;
}
.c-hero__form [data-hsfc-id=Renderer] .hsfc-ErrorAlert {
	font-size: 14px;
	color: #FF96BB;
}

/* ==========================================================================
   SP: ファーストビューの約物詰め解除
   Figma は palt なしのため、palt 有効だと文字幅がデザインより7〜8%狭くなる
   ========================================================================== */
@media only screen and (max-width: 767px) {
	.c-header,
	.c-hero {
		font-feature-settings: normal;
		line-break: strict;
	}
}

/* ==========================================================================
   Thanks（thanks.html / Figma: PC 9961-122 ・ SP 9961-144）
   ========================================================================== */
/* Figma は palt なしのため、このページは約物詰めを解除して実値に合わせる */
.p-thanks {
	background: var(--color-bg);
	padding: 104px 108px;
	font-feature-settings: normal;
}
@media only screen and (max-width: 767px) {
	.p-thanks {
		/* Figma実値: 上下48px / 左右16px */
		padding: 48px 16px;
	}
}

.p-thanks__inner {
	margin: 0 auto;
	max-width: 1080px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 46px;
}
@media only screen and (max-width: 767px) {
	.p-thanks__inner {
		/* Figma実値: ブロック間 40px */
		gap: 40px;
	}
}

/* ロゴ（PC横組み malogo_h 364×32 / SP縦組み malogo_v 131.772×32：高さは共通で32px） */
.p-thanks__logo img {
	margin: 0 auto;
	width: auto;
	height: 32px;
	display: block;
}
.p-thanks__logo img.p-thanks__logo-sp {
	display: none;
}
@media only screen and (max-width: 767px) {
	.p-thanks__logo img.p-thanks__logo-pc {
		display: none;
	}
	.p-thanks__logo img.p-thanks__logo-sp {
		display: block;
	}
}

/* 見出し＋リード */
.p-thanks__head {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.p-thanks__title {
	font-weight: 900;
	font-size: 28px;
	line-height: 1.4;
	color: var(--color-dark);
	text-align: center;
}
@media only screen and (max-width: 767px) {
	.p-thanks__title {
		/* Figma実値: 21px / 行間1.3 */
		font-size: 21px;
		line-height: 1.3;
	}
}
.p-thanks__lead,
.p-thanks__note {
	margin: 0 auto;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-dark);
	text-align: center;
}
.p-thanks__note a {
	text-decoration: underline;
}

/* カレンダー（HubSpot Meetings 埋め込み）

   HubSpot は iframe の高さを 756px 固定で設定し、ステップが変わっても
   変更しない。一方ウィジェットの実描画は状態によって変わる
   （実測 2026-09-14 / 埋め込み幅 PC 880px・SP 343px）:

     初期（カレンダー） PC カード 16〜686px → 下に 70px の余白
                        SP カード  0〜698px → 下に 58px の余白
     日付選択後         SP カード  0〜1192px（iframe を超えて内部スクロール）
                                            → 余白は 0px

   初期表示のままだと注釈文との間隔が Figma より広くなるが、余白を常時
   打ち消すと日付選択後に注釈文がカードに重なる。そのため打ち消しは
   .is-initial が付いている初期表示中だけに限定し、ユーザーが iframe 内を
   操作した時点で JS がクラスを外す（thanks.html 末尾のスクリプト）。
   JS が動かなかった場合はクラスが付かない＝余白が残るだけで、重なりは
   起きない側に倒してある。
   ※ HubSpot 側がウィジェットの寸法を変えた場合は再計測が必要 */
.p-thanks__calendar {
	margin: 0 auto;
	width: 880px;
	max-width: 100%;
}
@media only screen and (max-width: 767px) {
	.p-thanks__calendar {
		width: 100%;
	}
}
.p-thanks__calendar.is-initial {
	margin-bottom: -56px;
}
@media only screen and (max-width: 767px) {
	.p-thanks__calendar.is-initial {
		margin-bottom: -58px;
	}
}
.p-thanks__calendar .meetings-iframe-container {
	width: 100%;
}
.p-thanks__calendar .meetings-iframe-container iframe {
	width: 100%;
	border: 0;
	display: block;
}

/* フッター：ロゴのみのシンプル版 */
.c-footer--simple {
	padding: 32px 20px;
}
@media only screen and (max-width: 767px) {
	.c-footer--simple {
		/* Figma実値: 上下24px / 左右20px */
		padding: 24px 20px;
	}
}
.c-footer--simple .c-footer__logo {
	margin: 0 auto;
	width: 145px;
}
@media only screen and (max-width: 767px) {
	.c-footer--simple .c-footer__logo {
		/* Figma実値: 72.5×16px */
		margin: 0 auto;
		width: 72.5px;
	}
}