@charset "UTF-8";

/*
 * JOYO福利厚生サービス「ベネサポ」新規申し込みページ
 * Figma: 【常陽銀行】ベネサポサービスサイト構築 / デザイン_TOP_PC (node 5344:18810)
 * 実装済みセクション: Hero (node 5344:18959)
 *
 * 色は fukurikosei_common.css の :root を優先して再利用し、このページ固有の値だけを下に追加する。
 * KV(キービジュアル)の座標・寸法はFigma PC版(1440px)の実寸をpxで保持している。
 * remに置き換えると文字拡大時に装飾だけが膨らんでコラージュの重なりが崩れるため、意図的にpxで固定する。
 * KVは装飾のため、SP版デザイン入手までSPでは非表示にする。
 */

:root {
	--fk-hero-bg: #fcfff5;
	--fk-hero-title-green: #85a638;
	--fk-hero-title-green-light: #a4c85a;
	--fk-hero-lead-underline: #fbc341;
	--fk-hero-accent-blue: #3a479b;
	--fk-problem-accent: #eef38b;
	--fk-solution-num: #bbd981;
	--fk-color-accent-pink: #e10b88;
	--fk-atm-bg: #f7ffe6;
	--fk-chart-axis: #bababa;
	--fk-chart-other: #858585;
	--fk-chart-other-label: #797979;
	--fk-lc-green: #afd266;
	--fk-lc-text: #3e5200;

	/* 共通の #page_top が z-index:1000 なので、その下に入る値を使う */
	--fk-z-follow-cta: 999;

	/*
	 * Hero内の重なり順。KVは装飾(aria-hidden)なので、必ずコピー(CTAボタン)より下に置く。
	 * 両者は .hero-inner(z-index:1)の中で完結するので、この2値はページ全体の順序に影響しない。
	 */
	--fk-z-hero-kv: 1;
	--fk-z-hero-copy: 2;

	/*
	 * Problem内の重なり順。Figmaは decoration グループを「白帯 → 三角 → 人物イラスト」の順で描く。
	 * イラストは緑帯と白帯の境目にまたがるので、白帯側より上に置く。
	 */
	--fk-z-problem-notch: 1;
	--fk-z-problem-illust: 2;
	/*
	 * 塗りボタンと、その上端に重なる吹き出しラベルの影。
	 * Hero / CTA / 追従CTA で共有する(意匠が同じ「緑・オレンジのpill + 白い吹き出し」のため)。
	 * 吹き出しは尻尾(::after の三角)にも影を落とす必要があるので box-shadow ではなく
	 * filter: drop-shadow() で使う(box-shadow は角丸矩形にしか影が出ず、三角が浮く)。
	 */
	--fk-btn-shadow: 0 4px 4px rgba(51, 51, 51, 0.12);
	--fk-balloon-shadow: 0 -2px 4px rgba(51, 51, 51, 0.1);

	/* PC追従バーの影。Figmaは dx6 / dy6 / stdDeviation10(= CSSのぼかし20px) */
	--fk-cf-bar-shadow: 6px 6px 20px rgba(51, 51, 51, 0.2);

	/* FAQの開閉。JS側(fukurikosei_register.js の FAQ_DURATION_MS)と同じ値にする */
	--fk-fq-duration: 250ms;

	/*
	 * Figmaのデザイン幅(px)。**単位なしの数値**で持つ。
	 * Heroの等比縮小(--hu / --kv-scale / --bg-scale)がこの値を基準にする。
	 * 単位を付けると calc の除算(長さ ÷ 長さ)が書けなくなるので、数値のままにしておく。
	 *
	 * ここに集約できないのは `@media screen and (min-width: 1400px)` の条件だけ
	 * (メディアクエリの条件にカスタムプロパティは使えないという仕様上の制約)。
	 * デザイン幅を変えるときは、このトークンとそのメディアクエリを必ず一緒に直す。
	 */
	--fk-design-width: 1400;
}

/* 共通ボタン ------------------------------------------------------------ */

/*
 * 白地 + 2px緑枠のpill。ServiceMenu(2) / OtherCase / LocalConnection / UseFlow の
 * 5箇所で同じ意匠が使われるため、SP基準の見た目をここに集約する。
 *
 * margin と、ブレークポイントごとの寸法切り替えは各セクション側に残す。
 * 切り替える幅がセクションごとに違う(LocalConnectionだけ1180px、他は768px)ため、
 * ここでまとめると LocalConnection の768〜1179pxの見た目が変わってしまう。
 *
 * 塗りボタン(緑・オレンジ)は高さ・角丸・padding がすべて異なるため共通化しない
 * (.hero-btn / .ct-btn / .cf-btn / .uf-btn を個別に持つ)。
 * 影だけは Hero / CTA / 追従CTA で同じなので --fk-btn-shadow に集約している。
 */

.fk-btn-outline {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5.4rem;
	padding-inline: 3rem 5rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--fk-color-cta-green-tag);
	letter-spacing: 0.04em;
	text-decoration: none;
	background-color: var(--fk-color-cta-tag-bg);
	border: 2px solid var(--fk-color-cta-green);
	border-radius: 2.7rem;
}

.fk-btn-outline:hover {
	opacity: 0.7;
}

.fk-btn-outline-icon {
	position: absolute;
	right: 1.5rem;
	width: 1.6rem;
	height: 1.6rem;
}

/* Hero ---------------------------------------------------------------- */

/* 背景テクスチャとKVがビューポート外へはみ出すため、ここで閉じ込めて水平オーバーフローを防ぐ */

.hero {
	position: relative;
	overflow: hidden;
	background-color: var(--fk-hero-bg);
}

/*
 * 背景テクスチャ。SP版(432.6x286.2)はPC版の外枠(1555.649x1029.173)と縦横比が一致するため、
 * 同じマークアップを scale で縮小して流用する(432.6 / 1555.649 = 0.2781)。
 * 座標・倍率をvw基準にしてあるのは、375px超のSPでテクスチャが右に届かなくなるのを防ぐため。
 * KVと同じく下端基準(bottom + transform-origin)で持つ。上下の基準が食い違うと、
 * 幅が広がったときにテクスチャだけがKVから離れていく。
 */

.hero-bg {
	position: absolute;

	/*
	 * Figma SP値: 下端が hero-inner 下端から91.68px、左が-30px(containerのpadding分のずらし)。
	 * 左は375px基準のvw。上限は伸縮の頭打ち(--kv-k)と同じ580px時点の値。
	 */
	bottom: 9.168rem;
	left: max(-8vw, -46.4px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1555.649px;
	height: 1029.173px;
	pointer-events: none;
	transform: scale(var(--bg-scale, 0.2781));
	transform-origin: bottom left;
}

.hero-bg-img {
	flex: none;
	width: 1473.472px;
	height: 884.083px;
	object-fit: cover;
	opacity: 0.1;
	transform: rotate(-5.83deg);
}

/* 余白はFigma SP版のHero相対y座標から逆算している(見出し上端20px / ボタン下端との差8.8px) */

.hero-inner {
	position: relative;
	z-index: 1;
	padding-block: 2rem 0.9rem;
}

/*
 * KV(絶対配置)より前に出す。指定が無いとKVが後勝ちで上に乗り、葉のモチーフがCTAボタンを覆う。
 * 768〜1179pxではコピー幅(68.53rem)とKVの左端(52.3644vw)が横に重なる帯があり、
 * 900px付近で「資料請求・お問い合わせ」の文字に葉がかかっていた。
 */

.hero-copy {
	position: relative;
	z-index: var(--fk-z-hero-copy);
}

/* 見出し */

/*
 * letter-spacing の em は「宣言した要素の font-size」でpxに解決され、そのpx値が子孫へ継承される。
 * font-size を持たないこの親にまとめて書くと、計算値10px(html)で 0.4px に潰れた値が
 * 80pxの子にも継承されてしまう。font-size を持つ各要素に書くこと
 * (css.md「letter-spacing を em で書くときは font-size を持つ要素に書く」)。
 */

.hero-title {
	font-weight: 700;
	line-height: 1.2;
	color: var(--fk-color-text-dark);
}

.hero-title-row {
	display: block;
	font-size: 1.8rem;
	letter-spacing: 0.04em;
}

/* SP版は読点だけ24pxに拡大される(PC版は前後と同サイズ) */

.hero-title-punct {
	font-size: 2.4rem;
	letter-spacing: 0.04em;
}

.hero-title-lg,
.hero-title-md {
	font-weight: 900;
	letter-spacing: 0.04em;
}

.hero-title-lg {
	font-size: 3.2rem;
}

.hero-title-md {
	font-size: 2rem;
}

/*
 * SP版は「充実の福利厚生」全体がグラデーション。
 * PC版は「厚生」(.-gradient)だけがグラデーションで残りは単色のため、下のPC用クエリで打ち消す。
 */

.hero-title-lg,
.hero-title-md:not(.-dark) {
	color: transparent;
	background: linear-gradient(
		to right,
		var(--fk-hero-title-green) 21.154%,
		var(--fk-hero-title-green-light)
	);
	-webkit-background-clip: text;
	background-clip: text;
}

.hero-title-md.-dark {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--fk-color-text-dark);
}

/* リード文 */

.hero-lead {
	margin-top: 0.8rem;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

.hero-lead-strong {
	font-size: 2rem;
	color: var(--fk-color-cta-green-tag);
	text-decoration: underline;

	/*
	 * 太さは font-size の 1/4。パーセントで書くと Safari 16.4 未満が解釈できず、
	 * 宣言ごと無効になって auto(既定の細い線)へ落ちる。iPadで下線が細く見える原因がこれ。
	 * em は length なので text-decoration-thickness をサポートする全バージョン(Safari 12.1+)で効き、
	 * font-size 基準という意味は 25% と変わらない。
	 */
	text-decoration-thickness: 0.25em;
	text-decoration-color: var(--fk-hero-lead-underline);
	text-decoration-skip-ink: none;
}

.hero-note {
	margin-top: 1.2rem;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

/* CTAボタン(吹き出しラベル付き) */

.hero-actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 5.4rem;
}

.hero-action {
	position: relative;
	padding-top: 1.5rem;
}

.hero-action-balloon {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.49rem;
	padding-inline: 2rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fk-color-cta-green-tag);
	white-space: nowrap;
	background-color: var(--fk-color-cta-tag-bg);
	border-radius: 999px;
	filter: drop-shadow(var(--fk-balloon-shadow));
	transform: translateX(-50%);
}

/*
 * くちばし。三角の高さ(border-top)と同じ値だけ下げると本体と「ぴったり接する」だけになり、
 * レイアウトの丸めで継ぎ目に1pxの隙間が空く(全幅で再発。_figma-export/m_tail_all.html で検出)。
 * 1px 分だけ本体に食い込ませて一体にする。重なりを rem で持つと 374px 以下で
 * ルートの font-size が vw になり 1px を割るため、px で固定する。
 * 他の吹き出し(.ct-label / .cta-case-tag / .pr-trial-tag 等)は元から重なりがあるので対象外。
 */

.hero-action-balloon::after {
	position: absolute;
	bottom: calc(-0.58rem + 1px);
	left: 50%;
	width: 0;
	height: 0;
	content: "";
	border-top: 0.58rem solid var(--fk-color-cta-tag-bg);
	border-right: 0.39rem solid transparent;
	border-left: 0.39rem solid transparent;
	transform: translateX(-50%);
}

/* このプロジェクトは border-box をグローバル適用していないため、幅を持つ箱には個別に指定する */

.hero-btn {
	box-sizing: border-box;
	display: flex;
	gap: 1.6rem;
	align-items: center;
	width: 100%;
	height: 6rem;

	/*
	 * Figmaの padding(32/16)・gap16・icon16 から逆算するとテキスト領域は216pxになるが、
	 * 「資料請求・お問い合わせ」は20pxで220px必要でデザイン側に4pxの無理がある。
	 * 高さ64px固定のため2行になると縦に溢れるので、左右を2pxずつ詰めて1行を保証する。
	 */
	padding: 1rem 1.4rem 1rem 3rem;
	color: var(--fk-color-cta-btn-text);
	border: 2px solid;
	border-radius: 4rem;
	box-shadow: var(--fk-btn-shadow);
}

.hero-btn:hover {
	opacity: 0.7;
}

.hero-btn.-primary {
	background-color: var(--fk-color-cta-green);
	border-color: var(--fk-color-cta-green);
}

.hero-btn.-secondary {
	background-color: var(--fk-color-cta-orange);
	border-color: var(--fk-color-cta-orange);
}

.hero-btn-text {
	flex: 1 1 0;
	min-width: 0;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

.hero-btn-icon {
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
}

.hero-link {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
	font-size: 12px;
	color: var(--fk-hero-accent-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hero-link-icon {
	width: 12px;
	height: 12px;
}

/*
 * KV(キービジュアル)
 * SP版のコラージュは181x181で、PC版(約580x580)を縮小した配置と一致するため scale で流用する。
 * Hero幅343pxを超える分は .hero の overflow:hidden で切り取られる(デザインどおり右端で切れる)。
 *
 * 位置は「右下」で固定する。KVは画面幅に比例して伸縮する(--kv-k)のに対し、
 * 見出し〜CTAボタンのブロックはremで組まれていて375px以上では大きさが変わらない。
 * 上端基準で置くと、幅が広がるほどKVの下端だけが下りてきてCTAボタンに重なる
 * (414pxでボタン上端を27.7px侵食していた)。下端基準なら余った分は上へ伸び、
 * ボタンとの間隔はFigma SP版の1.4pxのまま保たれる。
 * 参考サイト(biz.orico.co.jp)のファーストビューも、376〜768pxの帯で
 * テキストとCTAは固定サイズのまま、画像だけが右下を軸に伸びて上端が切れる挙動になっている。
 */

.hero-kv {
	position: absolute;

	/*
	 * Figma SP値: 右端が hero-inner 右端から12.46px、下端が hero-inner 下端から152.93px。
	 * 下端はremで持つ(375px未満ではmain.cssのルートfont-sizeがvwなので、コピー側と一緒に縮む)。
	 */
	right: min(3.3227vw, 19.27px);
	bottom: 21.293rem;
	z-index: var(--fk-z-hero-kv);
	width: 580px;
	height: 580px;
	pointer-events: none;
	transform: scale(var(--kv-scale, 0.312));
	transform-origin: bottom right;
}

/*
 * scale() は無次元数しか受け取れずvwを直接書けない。CSSには長さ同士の比を求める演算が無いため、
 * ビューポート幅を単位なしの数値 --vw-px として JS から受け取る
 * (js/enterpri/fukurikosei/fukurikosei_register.js)。
 *
 * 以前は tan(atan2(100vw, 375px)) で比を作っていたが、WebKit(Safari 18.5で確認)は
 * atan2() の引数に vw のような「レイアウト時に解決する単位」が混じると、
 * 返り値の角度を度からラジアンへ変換せず tan() に渡す。値は幅ごとに無関係な数になり、
 * 850px / 1200px では負になってKVが反転・極小表示される。px同士なら正しく計算されるので、
 * @supports (transform: scale(tan(atan2(1px, 1px)))) では検出できない。
 *
 * --vw-px が無い場合(JS無効・読み込み前)は基準幅を既定値にして、伸縮しないだけの状態に落とす。
 */

.hero {
	/*
	 * 375pxを1とした伸縮率。上限1.5467は 580 ÷ 375 で、
	 * KVの表示高(580×0.312×k)が下端基準の152.93remぶんの余白(279.87px)と一致する幅。
	 * これ以上伸ばすとKVの上端がheroから溢れ、円形写真が半分に切れて崩れて見える。
	 */
	--kv-k: min(1.5467, calc(var(--vw-px, 375) / 375));
}

.hero-bg {
	--bg-scale: calc(0.2781 * var(--kv-k));
}

.hero-kv {
	--kv-scale: calc(0.312 * var(--kv-k));
}

/* 葉モチーフ。--cx/--cyは回転前のバウンディングボックス中心、--w/--hは回転前の実寸 */

.hero-leaf {
	position: absolute;
	top: var(--cy);
	left: var(--cx);
	width: var(--w);
	height: var(--h);
	mix-blend-mode: multiply;
	transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleY(var(--flip, 1));
}

.hero-kv-ribbon {
	position: absolute;
	top: 104.99px;
	left: 164.79px;
	width: 372.704px;
	height: 366.053px;
}

/* 人物写真。Figmaのマスク領域を要素の箱とし、内側の画像はマスク基準のオフセットで配置する */

.hero-kv-photo {
	position: absolute;
	overflow: hidden;
}

.hero-kv-photo.-circle {
	border-radius: 50%;
}

/*
 * 共通CSSの img への max-width 指定が、下のFigma実寸(親より大きい幅)を親幅まで潰す。
 * heightだけが効いて画像が縦に伸びるため、必ず max-width を打ち消す。
 * Figmaの生成コードで各imgに max-w-none が付いているのはこの理由。
 */

.hero-kv-photo > img {
	position: absolute;
	max-width: none;
}

.hero-kv-photo.-upper-left {
	top: 60.42px;
	left: 95.75px;
	width: 136.71px;
	height: 136.71px;
}

.hero-kv-photo.-upper-left > img {
	top: -25.099px;
	left: -171.973px;
	width: 368.112px;
	height: 245.408px;
	object-fit: cover;
}

.hero-kv-photo.-lower-left {
	top: 346.73px;
	left: 65.07px;
	width: 178.832px;
	height: 178.832px;
}

.hero-kv-photo.-lower-left > img {
	top: -66.92px;
	left: -158.03px;
	width: 666.3px;
	height: 444.4px;
}

/* 中央の主役写真。円ではない不定形マスクのため mask-image を使う */

.hero-kv-photo.-center {
	top: 108.76px;
	left: 164.54px;
	width: 350.243px;
	height: 342.612px;
	-webkit-mask-image: url("/img/enterpri/fukurikosei/fukurikosei_register/hero/mask-34550429-4.svg");
	mask-image: url("/img/enterpri/fukurikosei/fukurikosei_register/hero/mask-34550429-4.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 350.243px 342.612px;
	mask-size: 350.243px 342.612px;
}

.hero-kv-photo.-center > img {
	top: -130.141px;
	left: -268.648px;
	width: 722.281px;
	height: 536.366px;
}

.hero-kv-photo.-center-front {
	top: 63.21px;
	left: 233.33px;
	width: 247.268px;
	height: 260.282px;
}

.hero-kv-photo.-center-front > img {
	top: 0;
	left: 0;
	width: 247.268px;
	height: 260.282px;
}

.hero-kv-photo.-upper-right {
	top: 115.26px;
	left: 448.06px;
	width: 130.798px;
	height: 130.798px;
}

.hero-kv-photo.-upper-right > img {
	top: -5.578px;
	left: -26.959px;
	width: 182.841px;
	height: 186.206px;
	object-fit: cover;
	object-position: bottom;
}

.hero-kv-photo.-lower-right {
	top: 352.31px;
	left: 430.39px;
	width: 130.798px;
	height: 130.798px;
}

.hero-kv-photo.-lower-right > img {
	top: 3.718px;
	left: -10.225px;
	width: 240.76px;
	height: 159.887px;
	object-fit: cover;
}

/* 円形写真の外周リング */

.hero-kv-ring {
	position: absolute;
	width: 130.798px;
	height: 130.798px;
}

.hero-kv-ring.-upper-right {
	top: 115.26px;
	left: 448.06px;
}

.hero-kv-ring.-lower-right {
	top: 352.31px;
	left: 430.39px;
}

/* service_1(サービス紹介) --------------------------------------------- */

/*
 * 白カードは中央カラム幅(1180px)に収まるのが正しいため .container と同じ要素に背景を持たせている
 * (css.mdの「フル幅背景に.containerを併用しない」はフル幅にしたい背景が対象で、ここは該当しない)。
 * 下端の角丸を落としているのはFigma指定(rectangleCornerRadii=[24,24,0,0])で、次セクションへ繋げるため。
 * SPの値はデザイン未取得のため暫定。
 */

.service-intro {
	padding-top: 4rem;
	background-color: var(--fk-hero-bg);
}

.service-intro-card {
	position: relative;
	padding: 3.2rem 1.6rem 4rem;
	background-color: var(--fk-color-cta-tag-bg);
	border-radius: 1.6rem 1.6rem 0 0;
	box-shadow: 0 8px 24px rgba(51, 51, 51, 0.1);
}

/*
 * ドット8個を eyebrow「福利厚生サービス導入なら」の先頭8文字の上に載せる。
 *
 * ドットの間隔は eyebrow の送り(font-size + letter-spacing 0.04em)に合わせる。
 * SPは 1.4rem + 0.056rem = 1.456rem なので gap = 1.456 - 0.4(ドット幅) = 1.056rem。
 * PC(768px以上)は送りが 2.08rem になるので、そちらで gap を上書きする。
 *
 * ドット列も eyebrow も中央寄せなので、そのままだと12文字の真ん中
 * (=「厚生サービス導入」)の上に載る。先頭の文字までの差を左へ寄せる:
 *   文字0の中心   = -(12 × 1.456)/2 + 1.4/2 = -8.036rem
 *   ドット0の中心 = -(8 × 0.4 + 7 × 1.056)/2 + 0.4/2 = -5.096rem
 *   差 = -2.94rem
 */

/*
 * 縦位置は「ドットの下端 → eyebrow の文字インク上端」の間隔で決める。
 * デザイン幅1400pxの 7.14px を全幅で保つため、間隔だけを px で持つ(PC側の同名ルールも同じ考え方)。
 * カード上端から文字インク上端までを rem で積むと:
 *   カードの padding-top                              3.2rem
 * + 行ボックスの上の余り (1.6 - 1) × 1.4rem ÷ 2       0.42rem
 * + font-size とインク上端の差 (1 - 0.843) × 1.4rem   0.2198rem  ← 0.843 は Noto Sans JP の
 *                                                                 ascent ÷ font-size(実測)
 *   合計                                              3.8398rem
 * ここからドットの高さ 0.4rem を引いて 3.4398rem。端数は375pxで0.002px相当なので 3.44rem に丸める。
 */

.service-intro-deco {
	position: absolute;
	top: calc(3.44rem - 7.14px);
	left: 50%;
	display: flex;
	gap: 1.056rem;
	transform: translateX(calc(-50% - 2.94rem));
}

.service-intro-deco-dot {
	width: 0.4rem;
	height: 0.4rem;
	background-color: var(--fk-hero-lead-underline);
	border-radius: 50%;
}

.service-intro-heading {
	text-align: center;
}

.service-intro-eyebrow {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

.service-intro-title {
	display: block;
	margin-top: 0.8rem;
	font-size: 3rem;
	font-weight: 900;
	line-height: 1.2;
	color: transparent;
	letter-spacing: 0.04em;
	background: linear-gradient(
		to right,
		var(--fk-hero-title-green) 21.154%,
		var(--fk-hero-title-green-light)
	);
	-webkit-background-clip: text;
	background-clip: text;
}

/* 説明文は中央揃え、その下のリストは左揃えで、ブロックごと中央に置く */

.service-intro-body {
	width: 62.1rem;
	max-width: 100%;
	margin-inline: auto;
	margin-top: 2.4rem;
}

.service-intro-lead {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--fk-color-text-dark);
	/* SPは幅が狭く2行以上に折り返すため左揃え。PC(768px以上)はFigmaどおり中央寄せ */
	text-align: left;
	letter-spacing: 0.08em;
}

.service-intro-points {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	align-items: flex-start;
	margin-top: 0.8rem;
}

.service-intro-point {
	display: flex;
	gap: 0.8rem;
	align-items: center;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-cta-green-tag);
	letter-spacing: 0.04em;
}

.service-intro-point-icon {
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
}

.service-intro-videos {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	align-items: center;
	margin-top: 2.4rem;
}

.video-item {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	width: 100%;
	max-width: 48rem;
}

.video-item-label {
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.125;
	color: var(--fk-color-text-dark);
	text-align: center;
	letter-spacing: 0.04em;
}

/* サムネイルのクリックでYouTubeのiframeへ差し替える(js/enterpri/fukurikosei/fukurikosei_register.js) */

.video-item-player {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	cursor: pointer;
	background: none;
	border: none;
}

.video-item-thumb {
	display: block;
	width: 100%;
	height: auto;
}

.video-item-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6.2rem;
	height: 4.3rem;
	transform: translate(-50%, -50%);
}

.video-item-player:hover .video-item-play {
	opacity: 0.8;
}

.video-item-frame {
	display: block;
	width: 100%;
	aspect-ratio: 480 / 268;
	border: 0;
}

/* Problem(課題提起) ---------------------------------------------------- */

/*
 * 濃い緑の帯 + 下端に白帯と下向き三角を重ねて次セクションへ繋ぐ構成。
 * 三角はFigmaのPolygon 4(M720 582 L574 522 L866 522Z = 幅292/高60/中央720)をborderで再現する。
 * 背景装飾はFigmaがpattern(埋め込みPNG)で持っていたものを取り出して背景画像にしている。
 * 配置比率もFigmaのpattern matrix(幅100% / 高114.2% / 上に14.15%)に合わせている。
 * SPの値はデザイン未取得のため暫定。
 */

.problem {
	position: relative;

	/*
	 * 下の余白は .problem-inner の margin-bottom で取る。
	 * padding-bottom にすると白帯(.problem-notch)より下に緑が残る。
	 */
	padding-block: 4.8rem 0;
	background-color: var(--fk-color-cta-green-tag);

	/* 背景装飾のmix-blend-modeを、このセクションの背景色までに閉じ込める */
	isolation: isolate;
}

/*
 * 元画像は青い線だが、Figmaは opacity 0.35 + mix-blend-mode:luminosity で
 * 輝度だけを取り出して背景の緑に溶かしている。この2つが無いと青い線が浮く。
 */

.problem-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/problem/bg-pattern.png");
	background-repeat: no-repeat;
	background-position: 0 -14.15%;
	background-size: 100% 114.2%;
	mix-blend-mode: luminosity;
	opacity: 0.35;
}

.problem-inner {
	position: relative;
	margin-bottom: 4rem;
}

.problem-heading {
	text-align: center;
}

.problem-eyebrow {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-cta-btn-text);
	letter-spacing: 0.04em;
}

.problem-title {
	display: block;
	font-size: 3.2rem;
	font-weight: 900;
	line-height: 1.2;
	color: var(--fk-color-cta-btn-text);
	letter-spacing: 0.04em;
}

/* Figma SPのカードは x16..359(343px)で、containerの内容幅とちょうど一致する */

.problem-cards {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin-top: 1.6rem;
}

/* border-box が無いと width+padding で親を超え、flex-shrink で幅が縮む */

.problem-card {
	box-sizing: border-box;
	padding: 2.8rem 2.4rem;
	background-color: rgba(56, 56, 56, 0.8);
	border-radius: 1.2rem;
}

.problem-card-title {
	display: flex;
	gap: 0.4rem;
	align-items: flex-start;
	justify-content: center;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-problem-accent);
	letter-spacing: 0.04em;
}

.problem-card-leaf {
	flex: none;
	width: 1.734rem;
	height: 1.819rem;
}

.problem-card-body {
	margin-top: 0.8rem;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--fk-color-cta-btn-text);
	letter-spacing: 0.04em;
}

/*
 * Figma SP: 101.4x100 を(248, セクション相対661.5)に配置。緑帯の下端(728)を33.5px越えて白帯へ食い込む。
 * right/bottom は .problem-inner(=.container)のpadding boxが基準なので、ビューポート端からの値になる。
 */

.problem-illust {
	position: absolute;
	right: 2.56rem;
	bottom: -7.4rem;
	z-index: var(--fk-z-problem-illust);
	width: 10.14rem;
	height: auto;
}

/* 下端の白帯と、そこへ食い込む下向き三角(Figmaは PC / SP とも 292x60) */

.problem-notch {
	position: relative;
	z-index: var(--fk-z-problem-notch);
	height: 6rem;
	background-color: var(--fk-hero-bg);
}

.problem-notch::before {
	position: absolute;
	top: -1px;
	left: 50%;
	width: 0;
	height: 0;
	content: "";
	border-top: 6rem solid var(--fk-color-cta-green-tag);
	border-right: 14.6rem solid transparent;
	border-left: 14.6rem solid transparent;
	transform: translateX(-50%);
}

/* Solution ------------------------------------------------------------ */

/*
 * Figma: Solution (PC node 5344:19255 / SP node 5344:30536)
 * カードは PC 372.667x546 / SP 343x400 で、いずれも gap は 31px。
 * PCのカード幅は container(1180) から gap 62 を引いた3等分で、Figmaの実測と一致する。
 * 角丸は上下で違う(上4px / 下12px)。
 * セクション下端はカードの下端と同じ位置(次セクションへ繋ぐ)なので、下余白を持たせない。
 *
 * 本文のフォントサイズは、FigmaのSP版で1枚目だけ14px・2/3枚目が16pxと不一致だった。
 * 同一コンポーネントの統一漏れと判断して3枚とも16pxに揃えている(1枚目はSPで4行になる)。
 */

.solution {
	background-color: var(--fk-hero-bg);
}

.solution-inner {
	padding-block: 4.5rem 0;
}

/*
 * letter-spacing は em で書くと「宣言した要素の font-size」で px に解決され、
 * その px 値が子孫へ継承される。行ごとに文字サイズが違うのでここには書かず、
 * font-size を持つ各要素に書く。
 */

.solution-title {
	font-weight: 700;
	color: var(--fk-color-text-dark);
	text-align: center;
}

.solution-title-sm {
	display: block;
	font-size: 1.4rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.solution-title-main {
	display: block;
	margin-top: 0.9rem;
	font-size: 2rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

/*
 * 「ベネサポ」はグラデーション文字 + 背後の黄色マーカー。
 * background-clip:text は同じ要素の他の背景も文字型に切り抜いてしまうため、
 * マーカー(外側の::before)と文字(内側のlabel)を別要素に分けている。
 */

.solution-title-mark {
	position: relative;
	display: inline-block;
	font-size: 3.2rem;
	line-height: 1;
	letter-spacing: 0.04em;
}

.solution-title-mark::before {
	position: absolute;
	right: 0;
	bottom: 0.1rem;
	left: 0;
	height: 0.8rem;
	content: "";
	background-color: var(--fk-hero-lead-underline);
}

.solution-title-mark-label {
	position: relative;
	color: transparent;
	background: linear-gradient(
		to right,
		var(--fk-hero-title-green) 21.154%,
		var(--fk-hero-title-green-light)
	);
	-webkit-background-clip: text;
	background-clip: text;
}

.solution-title-sparkle {
	position: absolute;
	bottom: 2.39rem;
	left: -2.6rem;
	width: 2.98rem;
	height: 3.11rem;
}

/*
 * main.css のリセット(6914行)は ul/dl だけで ol を含まないため、ここで余白を打ち消す。
 * 左右の 0.1rem は container の padding(15px) と Figma の左右マージン(16px)の差を埋めるもの。
 * container 側に padding を足すと共通の値を上書きしてしまうため、リスト側で調整する。
 */

.solution-cards {
	padding: 0;
	margin: 2.5rem 0.1rem 0;
	list-style: none;
}

/*
 * Figmaのカード高さ(SP 400 / PC 546)を min-height で確保する。
 * 高さを固定すると文字拡大(200%)で見切れるため、伸びる余地は残す。
 * 「料金を見る」のカードだけ本文が1行短いが、この高さとボタンの margin-top:auto で
 * 3枚のリンク位置が揃う(Figmaも同じ構成)。
 */

.solution-card {
	background-color: #fff;
	border-radius: 0.4rem 0.4rem 1.2rem 1.2rem;
}

.solution-card + .solution-card {
	margin-top: 3.1rem;
}

/*
 * カード全体をアンカーにする(Figmaの仕様注釈「01~03のカードをそれぞれアンカーリンクとし
 * 対応する各セクションに遷移させる」)。ボタンを下端に固定するため flex + margin-top:auto。
 *
 * Figmaのカード高さ(SP 400 / PC 546)は min-height で確保する。高さを固定すると
 * 文字拡大(200%)で見切れるため、伸びる余地は残す。
 * min-height を親の .solution-card 側に置くと height:100% が解決できず(親が内容依存の
 * ままになる)、SPの縦積みで margin-top:auto が効かなくなるので、この要素に持たせる。
 */

.solution-card-link {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	min-height: 40rem;
	padding: 1rem 2.4rem 2.7rem;
	color: var(--fk-color-text-dark);
	text-decoration: none;
}

/*
 * 番号は Light(300)。Webフォントは配信していないので、実際の太さは端末のフォント任せになる
 * (Noto Sans JP が入っている端末だけ Light。無ければヒラギノ角ゴ / メイリオの標準ウェイト)。
 */

.solution-card-num {
	position: absolute;
	top: 0.7rem;
	left: 0.8rem;
	font-size: 4rem;
	font-weight: 300;
	line-height: 1;
	color: var(--fk-solution-num);
}

.solution-card-illust {
	width: auto;
	height: 10rem;
	margin-top: 4.6rem;
}

.solution-card-title {
	margin-top: 2rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fk-color-cta-green-tag);
	letter-spacing: 0.04em;
}

/*
 * 見出し・リンクは中央、本文だけ左揃え(親のalign-items:centerを打ち消して幅を張る)。
 *
 * SPのフォントサイズはFigmaが1枚目14px・2/3枚目16pxと不統一だった。
 * 16pxに揃えると1枚目だけ4行になってカード高さ400が崩れ、14pxに揃えると2/3枚目が
 * 2行になるため、両者の中間の15pxを採る。これで3枚とも3行・高さ400でFigmaと揃う。
 */

.solution-card-text {
	align-self: stretch;
	margin-top: 1.9rem;
	font-size: 1.5rem;
	line-height: 1.6;
	letter-spacing: 0.04em;
}

.solution-card-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: auto;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fk-color-cta-green-tag);
	letter-spacing: 0.04em;
}

.solution-card-arrow {
	width: 1.6rem;
	height: 1.6rem;
	margin-top: 1.3rem;
}

.solution-card-link:hover {
	opacity: 0.7;
}

/* ServiceMenu ---------------------------------------------------------- */

/*
 * Figma: ServiceMenu (PC node 5344:19270 / SP は デザイン_TOP_SP の同名フレーム)
 * 3ブロック構成: ①アプリ紹介(吹き出し6つ+スマホ) ②社内浸透サポート ③ATM優遇
 * 見出しの黄色マーカーはSVGでは #5F7C00 を参照していたが、PNG実測は #FBC341 の単色。
 * Solutionの「ベネサポ」と同じくFigmaのエクスポート側の誤りなのでPNGに従う。
 * 吹き出しは pill + しっぽの一体形状で、しっぽの向きが6つとも違いPC/SPでも反転するため、
 * CSSで再現せず background-image のSVG(12種)に委ねている。
 */

.sm {
	background-color: var(--fk-hero-bg);
}

.sm-inner {
	/* 下端はブロック③の下端がセクション終端に接するため余白を持たせない */
	padding-block: 5rem 0;
}

.sm-title {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-cta-green-tag);
	text-align: center;
	letter-spacing: 0.04em;
}

/* 行ごとにマーカーの幅がテキスト幅と一致するため、行を内容幅のブロックにして中央へ寄せる */

.sm-title-line {
	position: relative;
	display: block;
	width: fit-content;
	margin-inline: auto;
}

.sm-title-line::before {
	position: absolute;
	right: 0;
	bottom: 0.44rem;
	left: 0;
	height: 0.72rem;
	content: "";
	background-color: var(--fk-hero-lead-underline);
}

/* 絶対配置のマーカーは通常フローより上に来るため、文字側も positioned にして前に出す */

.sm-title-text {
	position: relative;
}

.sm-lead {
	margin-top: 1.7rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fk-color-text-dark);
	text-align: center;
	letter-spacing: 0.04em;
}

.sm-note {
	margin-top: 0.9rem;
	font-size: 1.6rem;
	line-height: 1.625;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

/* ① アプリ紹介: SPは吹き出し3つ→スマホ→吹き出し3つの縦積み */

.sm-app {
	margin-top: 1.5rem;
}

.sm-balloons {
	padding: 0;
	margin: 0;
	list-style: none;
}

/*
 * 中身の余白は「要素の箱」ではなく「吹き出し本体(しっぽを除いた部分)」から取る。
 * 背景SVGの箱にはしっぽが含まれるので、箱基準で padding を取ると
 * しっぽのある側だけ内側の余白が狭く見え、Figmaとずれる(しっぽの実測は下の各指定に書いた)。
 * 上下はしっぽぶんを padding で削り、残りの本体の中央に中身を置く
 * (固定 padding で上から詰めると、本文が1行の -skill だけ上に寄る)。
 */

.sm-balloon {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 29.03rem;
	min-height: 11.01rem;

	/* SP上3つ: しっぽは下1.08rem */
	padding: 0 2rem 1.08rem;
	margin-inline: auto;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
}

.sm-balloon + .sm-balloon {
	margin-top: 0.4rem;
}

/*
 * しっぽの向きが上下で違うので背景を1つずつ当てる。
 * 寸法も上3つと下3つで違うが、`.sm-balloons.-lower .sm-balloon` のような
 * 子孫セレクタで書くとPC側の `.sm-balloon.-skill` より詳細度が高くなって上書きできないため、
 * 個別クラスにまとめて指定する。
 *
 * Figmaは吹き出しを少しずつ左右にずらして置いている。このずれを `margin-left` で
 * 持つと375px幅でしか成立せず、それより広いSP幅ではスマホ画像だけが中央に残って
 * 吹き出しが左に寄る(767pxでは中心から最大220px左)。
 * そこで中央寄せ(.sm-balloon の margin-inline: auto)を基準にし、
 * ずれ量だけを translateX で与える。値は375px幅での実測。
 */

/*
 * 下段はしっぽが「上」を向いている(背景SVGを isPointInFill で走査した実測:
 * 上0.85rem がしっぽ、残り9.95remが本体)。上段は逆にしっぽが下(1.08rem)。
 * どちら向きでも「しっぽを padding で削って本体の中央に置く」で同じ扱いにできる。
 */
.sm-balloon.-skill,
.sm-balloon.-health,
.sm-balloon.-life {
	width: 29.47rem;
	min-height: 10.8rem;

	/* SP下3つ: しっぽは上0.85rem */
	padding-top: 0.85rem;
	padding-bottom: 0;
}

.sm-balloon.-event {
	background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/servicemenu/balloon-sp-event.svg");
	transform: translateX(1.224rem);
}

.sm-balloon.-leisure {
	background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/servicemenu/balloon-sp-leisure.svg");
	transform: translateX(-2.485rem);
}

.sm-balloon.-daily {
	background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/servicemenu/balloon-sp-daily.svg");
	transform: translateX(2.365rem);
}

.sm-balloon.-skill {
	background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/servicemenu/balloon-sp-skill.svg");
	transform: translateX(-0.486rem);
}

.sm-balloon.-health {
	background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/servicemenu/balloon-sp-health.svg");
	transform: translateX(2.464rem);
}

.sm-balloon.-life {
	background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/servicemenu/balloon-sp-life.svg");
	transform: translateX(-0.786rem);
}

.sm-balloon-title {
	display: flex;
	gap: 0.55rem;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fk-color-accent-pink);
	letter-spacing: 0.04em;
}

.sm-balloon-icon {
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
}

.sm-balloon-text {
	margin-top: 0.55rem;
	font-size: 1.4rem;
	line-height: 1.45;
	color: var(--fk-color-text-dark);
	text-align: center;
	letter-spacing: 0.04em;
}

.sm-app-screen {
	display: block;
	width: 15.6rem;
	height: 30rem;
	margin: 0.7rem auto;
}

/* ② 社内浸透サポート */

.sm-support {
	margin-top: 3.56rem;
	text-align: center;
}

.sm-support-title {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

.sm-support-text {
	margin-top: 1rem;
	font-size: 1.6rem;
	line-height: 1.625;
	color: var(--fk-color-text-dark);
	text-align: left;
	letter-spacing: 0.04em;
}

.sm-support-illust {
	display: block;
	width: 14.7rem;
	height: 16.02rem;
	margin: 0.66rem auto 0;
}

/* ボタン: 白地 + 2pxの緑枠のpill。アイコンだけ右端に固定し、文字はボタン中央に置く */

/* 意匠は .fk-btn-outline。ここは位置だけ持つ */

.sm-btn {
	margin-top: 2.5rem;
}

.fk-btn-outline-icon.-pdf {
	width: 2rem;
	height: 2rem;
}

/* ③ ATM優遇 */

.sm-atm {
	box-sizing: border-box;
	padding: 2.89rem 1.6rem 2.5rem;

	/* container の padding(15px) と Figma の左右マージン(16px)の差を埋める */
	margin-inline: 0.1rem;
	margin-top: 3.3rem;
	text-align: center;
	background-color: var(--fk-atm-bg);
	border-radius: 0.8rem;
}

.sm-atm-title {
	display: flex;
	gap: 0.87rem;
	align-items: flex-start;
	justify-content: center;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--fk-color-cta-green-tag);
	letter-spacing: 0.04em;
}

/* キラキラはFigmaでは文字の行ボックスより少し上から始まるので、負のマージンで持ち上げる */

.sm-atm-blight {
	flex: none;
	width: 2.01rem;
	height: 2.91rem;
	margin-top: -0.26rem;
}

/*
 * 強調(オレンジ)だけ文字サイズが大きいので、line-height を倍率で書くと
 * その行だけ行送りが広がる(inline要素の line-height は自身の font-size で解決される)。
 * Figmaは全行同じ行送りなので、rem の固定値で親子とも同じ行ボックスにする。
 */

.sm-atm-text {
	margin-top: 0.84rem;
	font-size: 1.6rem;
	line-height: 2.6rem;
	color: var(--fk-color-text-dark);
	text-align: left;
	letter-spacing: 0.04em;
}

.sm-atm-strong {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--fk-color-cta-orange);
}

/* ATMと通帳のイラストは横並びで、通帳側だけ少し下げてFigmaの重なりを再現する */

.sm-atm-illust {
	display: flex;
	gap: 1.43rem;
	align-items: flex-start;
	justify-content: center;
	margin-top: 1.87rem;
}

.sm-atm-illust-atm {
	flex: none;
	width: 8.4rem;
	height: 16.01rem;
}

.sm-atm-illust-passbook {
	flex: none;
	width: 19.18rem;
	height: 14.51rem;
	margin-top: 0.74rem;
}

.sm-atm-subtitle {
	margin-top: 1.98rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fk-color-cta-green-tag);
	letter-spacing: 0.04em;
}

.sm-atm-lead {
	margin-top: 1rem;
	font-size: 1.8rem;
	line-height: 1.583;
	color: var(--fk-color-text-dark);
	text-align: left;
	letter-spacing: 0.04em;
}

.sm-atm-lead-strong {
	font-weight: 700;
}

.sm-checks {
	padding: 0;
	margin: 0.4rem 0 0;
	list-style: none;
}

.sm-check {
	display: flex;
	gap: 0.8rem;
	align-items: flex-start;
	font-size: 1.6rem;
	line-height: 1.625;
	color: var(--fk-color-text-dark);
	text-align: left;
	letter-spacing: 0.04em;
}

.sm-check + .sm-check {
	margin-top: 0.8rem;
}

.sm-check-icon {
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
}

/* 注記への参照記号。Figmaでは本文より小さい文字サイズになっている */

.sm-ref {
	font-size: 0.67em;
	vertical-align: 0.15em;
}

.sm-atm-note {
	margin-top: 1.2rem;
	font-size: 1.2rem;
	line-height: 1.4;
	color: var(--fk-color-text-dark);
	text-align: left;
	letter-spacing: 0.04em;
}

/* DailyOperation ------------------------------------------------------- */

/*
 * Figma: DailyOperation (PC y5027.03 / 1440x784、SP y6018.7 / 375x1238)
 * 見出し(黄色マーカー) + 「日々の運用について」 + 説明文 + 3ステップのフロー。
 * マーカーはServiceMenu / Solutionと同じくSVGが `#5F7C00` を参照しているが、
 * PNG実測は `#FBC341` の単色なのでPNGに従う(Figmaのエクスポート側の誤り)。
 * ステップ間の矢印はPCが右向き・SPが下向きで、Figmaも別パスなのでSVGを2本使う。
 */

.do {
	background-color: var(--fk-hero-bg);
}

.do-inner {
	padding-block: 4.97rem 0;
}

.do-title {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-cta-green-tag);
	text-align: center;
	letter-spacing: 0.04em;
}

/* マーカーの幅が行ごとのテキスト幅と一致するため、行を内容幅のブロックにする(sm-titleと同じ) */

.do-title-line {
	position: relative;
	display: block;
	width: fit-content;
	margin-inline: auto;
}

.do-title-line::before {
	position: absolute;
	right: 0;
	bottom: 0.39rem;
	left: 0;
	height: 0.72rem;
	content: "";
	background-color: var(--fk-hero-lead-underline);
}

.do-title-text {
	position: relative;
}

.do-subtitle {
	margin-top: 2.56rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fk-color-text-dark);
	text-align: center;
	letter-spacing: 0.04em;
}

.do-lead {
	margin-top: 0.89rem;
	font-size: 1.6rem;
	line-height: 1.625;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

.do-flow {
	padding: 0;
	margin: 2.72rem 0 0;
	list-style: none;
}

.do-step {
	position: relative;
	text-align: center;
}

.do-step + .do-step {
	margin-top: 7.03rem;
}

/* ステップ間の矢印。SPは縦積みなので上向きの隙間に下向き矢印を置く */

.do-step + .do-step::before {
	position: absolute;
	top: -4.64rem;
	left: 50%;
	width: 3.33rem;
	height: 1.96rem;
	content: "";
	background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/dailyoperation/icon-arrow-down-thin.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transform: translateX(-50%);
}

/*
 * 番号とラベルで文字サイズが違うため、line-height は rem の固定値にして
 * 行ボックスが番号側のサイズで広がらないようにする。
 */

.do-step-head {
	font-size: 2rem;
	font-weight: 700;
	line-height: 2.8rem;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

/*
 * 番号だけラベルより細い(Figmaはラベルが太字、番号は通常ウェイト)。
 * Figmaのインク間隔(SP 11.8 / PC 14.5)から、数字の右サイドベアリングと
 * 漢字の左サイドベアリングの分を引いた値を margin にしている。
 */

.do-step-num {
	margin-right: 0.78rem;
	font-size: 2.8rem;
	font-weight: 400;
	color: var(--fk-color-cta-green-tag);
}

.do-step-illust {
	display: block;
	width: auto;
	height: 10.03rem;
	margin: 2.77rem auto 0;
}

.do-step-text {
	margin-top: 2.58rem;
	font-size: 1.8rem;
	line-height: 1.6;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

/* Price ---------------------------------------------------------------- */

/*
 * Figma: Price (PC y5811.03 / 1440x1934、SP y7256.7 / 375x2212.78)
 * 前半(.pr-head): 見出し + 説明文 + 注記 + 「入会金が無料！」パネル + 料金カード3枚
 * 後半(.pr-compare): 他社比較の棒グラフ + 無料トライアルのパネル
 *
 * 棒グラフの図形(軸線・棒・点線枠・斜め線・円)はすべてCSSで描いている。
 * Figmaは rect / path / circle で持っているが、数値をテキストのまま残したいので画像にしない。
 * 斜め線だけは回転が必要で、始点を transform-origin にして rotate している。
 */

.pr-head,
.pr-compare {
	background-color: var(--fk-hero-bg);
}

.pr-inner {
	padding-block: 5.03rem 0;
}

/* 後半ブロックは見出しまでの余白が前半より狭い */

.pr-compare .pr-inner {
	padding-block: 3.59rem 0;
}

.pr-title {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-cta-green-tag);
	text-align: center;
	letter-spacing: 0.04em;
}

.pr-title-line {
	position: relative;
	display: block;
	width: fit-content;
	margin-inline: auto;
}

.pr-title-line::before {
	position: absolute;
	right: 0;
	bottom: 0.57rem;
	left: 0;
	height: 0.6rem;
	content: "";
	background-color: var(--fk-hero-lead-underline);
}

.pr-title-text {
	position: relative;
}

.pr-lead {
	margin-top: 1.46rem;
	font-size: 1.6rem;
	line-height: 1.625;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

/* 注記は記号をぶら下げず、2行目以降を本文の頭に揃える */

.pr-note {
	padding-left: 1.6rem;
	margin-top: 0.79rem;
	font-size: 1.2rem;
	line-height: 1.583;
	color: var(--fk-color-text-dark);
	text-indent: -1.6rem;
	letter-spacing: 0.04em;
}

.pr-note + .pr-note {
	margin-top: 0.4rem;
}

/*
 * `text-indent` を打ち消すのが要。
 * `display: inline-block` はブロックコンテナなので、親(.pr-note)の `text-indent: -1.6rem` を
 * **継承して自分の1行目にも適用する**。その結果 ※ が幅1.6remの箱から1.6rem左へ飛び出し、
 * 本文との間隔が 6px 想定に対して 23px に広がる(375pxでは ※ が画面左端から1.5pxの位置に出る)。
 * 箱からはみ出すだけでレイアウトは崩れないので、幅や padding 側を疑うと原因に辿り着けない。
 */

.pr-note-mark {
	display: inline-block;
	width: 1.6rem;
	text-indent: 0;
}

/* 「入会金が無料！」の帯。containerの外側までフル幅で敷く */

/*
 * Figmaのパネル幅はSP343 / PC1180で、container(SP375 / PC1180)と一致しない。
 * container クラスを使わず、自前で max-width と左右マージンを持たせる。
 */

.pr-free {
	box-sizing: border-box;
	max-width: 118rem;
	padding-block: 1.41rem 0.83rem;
	margin: 1.48rem 1.6rem 0;
	background-color: var(--fk-atm-bg);
}

.pr-free-text {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: fit-content;
	margin-inline: auto;
	font-weight: 700;
	color: var(--fk-color-cta-orange);
	letter-spacing: 0.04em;
}

.pr-free-deco {
	position: absolute;
	top: 0.1rem;
	left: -3.4rem;
	width: 3.01rem;
	height: 3.13rem;
}

.pr-free-sm {
	font-size: 1.6rem;
	line-height: 1.2;
}

.pr-free-lg {
	margin-top: 0.96rem;
	font-size: 3.2rem;
	line-height: 1;
}

/* 料金カード。緑帯の角丸はカード側の overflow:hidden に任せる */

.pr-plans {
	box-sizing: border-box;
	max-width: 118rem;
	padding: 0;
	margin: 1.6rem 1.6rem 0;
	list-style: none;
}

.pr-plan {
	overflow: hidden;
	background-color: #fff;
	border-radius: 1rem;
}

.pr-plan + .pr-plan {
	margin-top: 2.4rem;
}

.pr-plan-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 6.2rem;
	color: #fff;
	letter-spacing: 0.04em;
	background-color: var(--fk-color-cta-green-tag);
}

.pr-plan-label {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.4;
}

.pr-plan-count {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.2;
}

.pr-plan-body {
	padding-block: 3.5rem 4.75rem;
	text-align: center;
}

.pr-plan-icon {
	display: block;
	width: auto;
	height: 5.87rem;
	margin-inline: auto;
}

/*
 * 料金は「月額」「数字」「円」「（税込）」で文字サイズが4段階違う。
 * line-height を rem 固定にして、数字の行だけ行送りが広がらないようにする。
 */

.pr-plan-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-top: 0.88rem;
	font-weight: 700;
	line-height: 1;
	color: var(--fk-color-cta-green-tag);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* 幅が足りないと flex アイテムが縮んでテキストが折り返し、行ボックスが伸びる */

.pr-plan-price > span {
	flex: none;
}

.pr-plan-price-label {
	font-size: 2rem;
}

/*
 * Figmaの数字は横方向に詰まった字形(実測でNoto Sans JPの約0.81倍の送り)。
 * 同じ64pxだと「11,000円（税込）」がSPのカード幅343pxに20px以上溢れるため、
 * SPだけ56pxに落として letter-spacing も外している(高さはFigmaより6.5px小さくなる)。
 * PCはカード幅377.33に余裕があるのでFigmaどおり64px。
 */

.pr-plan-price-num {
	font-size: 5.6rem;
	color: var(--fk-color-cta-orange);
	letter-spacing: 0;
}

.pr-plan-price-unit {
	font-size: 2rem;
}

.pr-plan-price-tax {
	font-size: 1.4rem;
}

/* 他社比較 */

.pr-compare-title {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-text-dark);
	text-align: center;
	letter-spacing: 0.04em;
}

.pr-compare-text {
	margin-top: 1.5rem;
	font-size: 1.6rem;
	line-height: 1.625;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

/* 棒グラフ */

/*
 * SPのグラフもFigmaの実寸(343x265.7)で中央に置く。
 * 中の図形はすべて left 基準の絶対配置なので、箱を container 幅まで広げると
 * 図形が左端に寄ったまま右側だけが空く(376〜767pxで顕著)。
 * 375pxちょうどでは 34.3rem = container 幅なので、この指定でも見え方は変わらない。
 */

.pr-chart {
	position: relative;
	width: 34.3rem;
	max-width: 100%;
	height: 26.57rem;
	margin: 2.2rem auto 0;
}

.pr-chart-line {
	position: absolute;
	top: 24.34rem;
	right: 0;
	left: 0;
	border-top: 1.34px solid var(--fk-chart-axis);
}

.pr-chart-bar {
	position: absolute;
	box-sizing: border-box;
}

.pr-chart-bar.-other {
	top: 0;
	left: 5.18rem;
	width: 8.42rem;
	height: 24.34rem;
	background-color: var(--fk-chart-other);
}

.pr-chart-bar.-benesapo {
	top: 19.99rem;
	left: 21.23rem;
	width: 8.42rem;
	height: 4.35rem;
	background-color: var(--fk-color-cta-green);
}

.pr-chart-price {
	position: absolute;
	right: 0;
	left: 0;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	text-align: center;
	letter-spacing: 0.04em;
}

.pr-chart-bar.-other .pr-chart-price {
	top: 10.34rem;
}

.pr-chart-bar.-benesapo .pr-chart-price {
	top: 1.11rem;
}

.pr-chart-price-label {
	display: block;
	font-size: 1rem;
	line-height: 1.3;
}

/* 削減分の点線枠と、他社の棒の上端へ伸びる斜めの点線 */

.pr-chart-frame {
	position: absolute;
	top: 0.07rem;
	left: 21.3rem;
	box-sizing: border-box;
	width: 8.29rem;
	height: 19.86rem;
	background-color: #fff;
	border: 1.34px dashed var(--fk-color-cta-green);
}

.pr-chart-slope {
	position: absolute;
	top: 20.09rem;
	left: 21.4rem;
	width: 21.49rem;
	border-top: 2.01px dashed var(--fk-color-cta-green);
	transform: rotate(-111.25deg);
	transform-origin: 0 0;
}

.pr-chart-cut {
	position: absolute;
	top: 3.64rem;
	left: 19.52rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 11.83rem;
	height: 11.83rem;

	/* Figmaは文字の中心が円の中心より少し下にあるので、その分だけ下へ寄せる */
	padding-top: 0.88rem;
	font-weight: 700;
	color: var(--fk-color-cta-green);
	letter-spacing: 0.04em;
	background-color: #fff;
	border: 2.01px solid var(--fk-color-cta-green);
	border-radius: 50%;
}

.pr-chart-cut-rate {
	display: block;
	font-size: 1.6rem;
	line-height: 1.3;
}

.pr-chart-cut-num {
	font-size: 3rem;
	color: var(--fk-color-cta-orange);
}

.pr-chart-cut-label {
	display: block;
	font-size: 1.6rem;
	line-height: 1.3;
}

.pr-chart-axis {
	position: absolute;
	top: 25.09rem;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
}

.pr-chart-axis.-other {
	left: 7.48rem;
	color: var(--fk-chart-other-label);
}

.pr-chart-axis.-benesapo {
	left: 21.95rem;
	color: var(--fk-color-cta-green-tag);
}

/* 無料トライアル */

.pr-trial {
	box-sizing: border-box;
	max-width: 118rem;
	padding: 2.4rem 1.66rem;
	margin: 3.3rem 1.6rem 0;
	text-align: center;
	background-color: var(--fk-atm-bg);
	border-radius: 0.8rem;
}

/* オレンジのpill + 下向きのしっぽ */

.pr-trial-tag {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-width: 6.8rem;
	height: 3.2rem;
	padding-inline: 1.5rem;
	margin-inline: auto;
	font-size: 1.2rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.04em;
	background-color: var(--fk-color-cta-orange);
	border-radius: 999px;
}

.pr-trial-tag::after {
	position: absolute;
	bottom: -0.53rem;
	left: 50%;
	width: 0;
	height: 0;
	content: "";
	border-top: 0.95rem solid var(--fk-color-cta-orange);
	border-right: 0.78rem solid transparent;
	border-left: 0.78rem solid transparent;
	transform: translateX(-50%);
}

.pr-trial-title {
	display: flex;
	gap: 0.87rem;
	align-items: flex-start;
	justify-content: center;
	margin-top: 1.6rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--fk-color-cta-green-tag);
	letter-spacing: 0.04em;
}

.pr-trial-blight {
	flex: none;
	width: 2.01rem;
	height: 2.91rem;
	margin-top: -0.26rem;
}

.pr-trial-text {
	margin-top: 1.2rem;
	font-size: 1.6rem;
	line-height: 1.625;
	color: var(--fk-color-text-dark);
	text-align: left;
	letter-spacing: 0.04em;
}

.pr-trial-illust {
	display: block;
	width: auto;
	height: 16.04rem;
	margin: 2rem auto 0;
}

/* OtherCase ------------------------------------------------------------ */

/*
 * Figma: OtherCase (PC y7745.03 / 1440x825.556、SP y9469.48 / 375x1786)
 * 見出し + 事例カード3枚 + 一覧へのボタン。
 * カード内のテキストサイズはPC/SPで同じ(タイトル20 / 本文14 / 会社情報12 / リンク12)で、
 * 変わるのは見出し(40→24)・ボタン文字(20→16)とレイアウト(横並び→縦積み)だけ。
 * カードはFigmaの絶対座標に依存しない flex + gap なので、768px以上で横並びにしている。
 */

.oc {
	background-color: var(--fk-hero-bg);
}

.oc-inner {
	padding-block: 5rem 0;
}

.oc-title {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-text-dark);
	text-align: center;
	letter-spacing: 0.04em;
}

.oc-cards {
	padding: 0;
	margin: 2.16rem 0 0;
	list-style: none;
}

/*
 * カード全体をリンクにする(stretched link)。
 *
 * `a` でカードを丸ごと包む方法は取らない。包むと見出し・段落・dl が `a` の中に入り、
 * リンクのアクセシブル名がカード内の全テキストの連結になって読み上げが冗長になる。
 * ここでは既存の「詳細を見る」の `a` に `::after` を敷いて**当たり判定だけ**を広げ、
 * マークアップと読み上げ内容は変えない。
 *
 * カード内にリンクはこの1つだけなので、覆っても他のリンクを潰さない
 * (2つ目のリンクを足すときは、そのリンクに `position: relative` + `z-index` が必要になる)。
 *
 * 制約: `::after` が本文の上に乗るため、**カード内の文字をドラッグで選択できなくなる**。
 * カード全体をリンクにする以上避けられないので、選択させたい文章はカードの外へ出す。
 *
 * この2つは `.oc-card + .oc-card`(詳細度 0,2,0)より前に置く。
 * 後ろに置くと詳細度が降順になり Biome の noDescendingSpecificity が出る
 * (指定するプロパティが違うので実害は無いが、順序の乱れは他の指摘を埋もれさせる)。
 */

.oc-card {
	position: relative;
}

.oc-card-link::after {
	position: absolute;
	inset: 0;
	content: "";
}

.oc-card + .oc-card {
	margin-top: 4.37rem;
}

/*
 * サムネイルの枠。ホバーで写真を1.1倍にする分をここで切り取る。
 * `overflow` を写真自身には持たせられない(自分の transform は自分では切れない)ので、
 * 包む要素を1つ足している。枠は写真と同じ高さのブロックなのでレイアウトは変わらない。
 */

.oc-card-photo-frame {
	overflow: hidden;
}

.oc-card-photo {
	display: block;
	width: 100%;
	height: auto;

	/* 動かすのは transform だけに留める(css.md) */
	transition: transform var(--fk-card-hover-duration) ease-out;
}

.oc-card-body {
	padding: 1.4rem 1.2rem 0;
}

.oc-card-title {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;

	/* color はペイントのみでレイアウトを誘発しない(css.mdが禁じるのはレイアウトを起こすプロパティ) */
	transition: color var(--fk-card-hover-duration) ease-out;
}

.oc-card-text {
	margin-top: 0.76rem;
	font-size: 1.4rem;
	line-height: 1.6;
	color: var(--fk-chart-other-label);
	letter-spacing: 0.04em;
}

/* 会社情報は左下、「詳細を見る」は右下に寄せる */

.oc-card-foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: 2.18rem;
}

.oc-card-company {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

.oc-card-spec {
	display: flex;
	flex-direction: column;
	gap: 0.78rem;
	padding: 0;
	margin: 0.78rem 0 0;
}

.oc-card-spec-row {
	display: flex;
}

.oc-card-spec-key,
.oc-card-spec-val {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

.oc-card-link {
	display: flex;
	flex: none;
	gap: 0.56rem;
	align-items: center;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--fk-color-cta-green-tag);
	letter-spacing: 0.04em;
	text-decoration: none;
}

/*
 * ホバーは「写真を1.1倍」+「見出しを緑」の2つ。カード全体を起点にする。
 * `.oc-card-link:hover` には書かない。`::after` はリンクの一部なので
 * カードのどこを指しても両方が発火し、効果が二重にかかる。
 */

.oc-card:hover .oc-card-photo {
	transform: scale(1.1);
}

.oc-card:hover .oc-card-title {
	color: var(--fk-color-cta-green-tag);
}

/*
 * フォーカスリングはリンク自身(「詳細を見る」の文字)に出るが、当たり判定はカード全面なので
 * 実際にどこが押されるのかが伝わらない。カード側にも枠を出す(達成基準2.4.7)。
 * `:has()` 未対応のブラウザではリンク自身の既定リングだけが残る(可視性は保たれる)。
 */

.oc-card:has(.oc-card-link:focus-visible) {
	outline: 2px solid var(--fk-color-cta-green);
	outline-offset: 2px;
}

.oc-card-link-icon {
	flex: none;
	width: 1.2rem;
	height: 1.2rem;
}

/* 意匠は .fk-btn-outline。ここは位置だけ持つ */

.oc-btn {
	margin-top: 3.68rem;
}

/* LocalConnection ------------------------------------------------------ */

/*
 * Figma: LocalConnection (PC y8570.58 / 1440x1389、SP y11255.5 / 375x1532)
 * 上下が波形の緑帯 + 中央のコンテンツ枠 + 周囲に4体のイラスト。
 * コンテンツ枠の形がPC/SPで違う:
 *   PC = 有機的なブロブ(#fcfff5)と白い輪郭線(1枚のSVG)
 *   SP = 角丸カードの2重枠(外枠 #edf6e0 の2px + 内側 #fcfff5 の rx20)
 * ブロブとイラストの配置は768px以上で有効にする。Figmaの1440pxアートボードに相当する
 * キャンバスをセクション中央に置き、その中でFigma座標を使う形にしてあるので、
 * 768〜1179pxではキャンバスごと等比縮小される(寸法の持ち方が px と rem で変わる)。
 * SPのカードレイアウトは767px以下だけ。
 * 緑帯の上下の波はSVGを background-size:100% 100% で横に伸ばし、間はべた塗りで繋ぐ。
 *
 * 背景・ブロブ・イラストの座標と寸法はremではなくpxで持つ。
 * remにすると文字拡大時に装飾だけが膨らみ、ブロブとイラストの重なりが崩れる(Heroと同じ判断)。
 */

.lc {
	position: relative;
	padding-bottom: 111.5px;
	overflow: hidden;
	background-color: var(--fk-hero-bg);
}

.lc-bg {
	position: absolute;
	top: 10.5px;
	right: 0;
	bottom: 0.5px;
	left: 0;
	display: flex;
	flex-direction: column;
}

.lc-bg-wave {
	flex: none;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 100%;
}

.lc-bg-wave.-top {
	height: 87.1px;
	background-image: url(/img/enterpri/fukurikosei/fukurikosei_register/localconnection/bg-wave-top-sp.svg);
}

.lc-bg-wave.-bottom {
	height: 65.3px;
	background-image: url(/img/enterpri/fukurikosei/fukurikosei_register/localconnection/bg-wave-bottom-sp.svg);
}

.lc-bg-mid {
	flex: 1 1 auto;
	background-color: var(--fk-lc-green);
}

/* 周囲のイラスト。SPはカードの四隅(セクション下端基準)、PCはブロブの輪郭線上に置く */

.lc-deco-item {
	position: absolute;

	/* main.css の @media(min-width:768px){img{max-width:100%}} でFigma実寸が親幅まで潰れるのを防ぐ */
	max-width: none;
}

.lc-deco-item.-store {
	top: 34px;
	left: 16px;
	width: 76px;
	height: 80px;
}

.lc-deco-item.-friends {
	top: 27px;
	right: 13px;
	width: 77px;
	height: 80.3px;
}

.lc-deco-item.-alone {
	bottom: 0.9px;
	left: 21px;
	width: 79.7px;
	height: 84.2px;
}

.lc-deco-item.-car {
	right: 12.8px;
	bottom: 1px;
	width: 101.2px;
	height: 80px;
}

.lc-blob {
	display: none;
}

.lc-card {
	position: relative;
	box-sizing: border-box;
	max-width: 34.9rem;
	padding: 0.7rem;
	margin: 13.15rem auto 0;
	border: 2px solid var(--fk-color-cta-bg);
	border-radius: 1.9rem;
}

.lc-inner {
	padding: 1.6rem 1.7rem 1.53rem;
	background-color: var(--fk-hero-bg);
	border-radius: 2rem;
}

/* オレンジの吹き出し。尻尾は三角形なのでborderで描く */

.lc-eyebrow {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16rem;
	height: 3.5rem;
	margin: 0 auto;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-cta-btn-text);
	letter-spacing: 0.04em;
	background-color: var(--fk-color-cta-orange);
	border-radius: 1.75rem;
}

.lc-eyebrow::after {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	content: "";
	border-color: var(--fk-color-cta-orange) transparent transparent;
	border-style: solid;
	border-width: 1.41rem 1.175rem 0;
	transform: translate(-50%, -0.58rem);
}

/*
 * 見出しとリード文の line-height は倍率ではなくrem固定にする。
 * Figmaは全行同じ行送りなので、倍率だと行内の文字サイズ差で行が広がる(css.md参照)。
 */

.lc-title {
	margin-top: 0.91rem;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 3.85rem;
	color: var(--fk-color-cta-green-tag);
	text-align: center;
	letter-spacing: 0.04em;
}

.lc-lead {
	margin-top: 2.16rem;
	font-size: 1.6rem;
	line-height: 2.6rem;
	color: var(--fk-lc-text);
	text-align: center;
	letter-spacing: 0.04em;
}

/* PCだけの改行。pc-only(768px以上で表示)ではカードレイアウトの帯にも出てしまうので専用クラスにする */

.lc-br {
	display: none;
}

.lc-features {
	padding: 0;
	margin: 0.46rem 0 0;
	list-style: none;
}

.lc-feature + .lc-feature {
	margin-top: 2.92rem;
}

/* 白い円・音符・人物イラストは重ねるので、この枠を基準に絶対配置する */

.lc-feature-visual {
	position: relative;
}

.lc-feature-bubble,
.lc-feature-note,
.lc-feature-illust {
	position: absolute;
	max-width: none;
}

.lc-feature-bubble {
	top: 0;
	left: 0;
}

.lc-feature.-coupon .lc-feature-visual {
	height: 20.54rem;
	margin-left: 2.9rem;
}

.lc-feature.-coupon .lc-feature-bubble {
	width: 9.39rem;
	height: 9.6rem;
}

.lc-feature.-coupon .lc-feature-note {
	top: 3.2rem;
	left: 3.96rem;
	width: 1.69rem;
	height: 3.36rem;
}

.lc-feature.-coupon .lc-feature-illust {
	top: 5.8rem;
	left: 6.47rem;
	width: 13.71rem;
	height: 14.74rem;
}

.lc-feature.-navi .lc-feature-visual {
	height: 20.79rem;
	margin-left: 3.34rem;
}

.lc-feature.-navi .lc-feature-bubble {
	width: 9.27rem;
	height: 9.47rem;
}

.lc-feature.-navi .lc-feature-note {
	top: 2.82rem;
	left: 3.72rem;
	width: 2.04rem;
	height: 3.42rem;
}

.lc-feature.-navi .lc-feature-illust {
	top: 6.24rem;
	left: 5.5rem;
	width: 13.32rem;
	height: 14.55rem;
}

.lc-feature-title {
	margin-top: 3rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-cta-green-tag);
	text-align: center;
	letter-spacing: 0.04em;
}

/* 「地元応援クーポン」だけFigmaが白バッジ。「ふるさとナビ」は素のテキスト */

.lc-feature.-coupon .lc-feature-title-text {
	display: inline-block;
	padding: 0.2rem 0.9rem;
	background-color: var(--fk-color-cta-tag-bg);
	border-radius: 0.8rem;
}

.lc-feature-text {
	margin-top: 0.95rem;
	font-size: 1.8rem;
	line-height: 2.9rem;
	color: var(--fk-lc-text);
	letter-spacing: 0.04em;
}

/* 意匠は .fk-btn-outline。ここは位置だけ持つ(PCの寸法切り替えは min-width:1180px 側) */

.lc-btn {
	margin-top: 0.84rem;
}

/* UseFlow -------------------------------------------------------------- */

/*
 * Figma: UseFlow (PC y9959.58 / 1440x1435、SP y12787.5 / 375x1661)
 * pill + 見出し + リード文 + 注記2件 + カード案内ボタン + 4ステップ + 申し込みボタン + 規約PDF + 注記3件。
 * Figmaの絶対座標に依存しない縦積みなので、768px以上でPCの文字サイズへ切り替える(1180pxで切る必要がない)。
 * ステップ左の丸(8px)と縦線(1px)は図形なのでCSSで描く(`--fk-solution-num` = #bbd981)。
 */

.uf {
	background-color: var(--fk-hero-bg);
}

.uf-inner {
	padding-block: 4.8rem 0;
}

/* pill。LocalConnectionの .lc-eyebrow と同じ意匠(尻尾はborderの三角) */

.uf-eyebrow {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 19.2rem;
	height: 3.5rem;
	margin: 0 auto;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-cta-btn-text);
	letter-spacing: 0.04em;
	background-color: var(--fk-color-cta-orange);
	border-radius: 1.75rem;
}

.uf-eyebrow::after {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	content: "";
	border-color: var(--fk-color-cta-orange) transparent transparent;
	border-style: solid;
	border-width: 1.41rem 1.175rem 0;
	transform: translate(-50%, -0.58rem);
}

.uf-title {
	margin-top: 1.58rem;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-text-dark);
	text-align: center;
	letter-spacing: 0.04em;
}

.uf-lead {
	margin-top: 0.97rem;
	font-size: 1.8rem;
	line-height: 2.85rem;
	color: var(--fk-color-text-dark);
	text-align: center;
	letter-spacing: 0.04em;
}

.uf-lead-strong {
	font-weight: 700;
}

/*
 * 注記。「※」は注意点を示す意味のある記号なので疑似要素ではなくHTMLに置く(accessibility.md)。
 * SPは折り返すのでぶら下げインデント、PCは1行なので中央寄せにする。
 */

.uf-notes {
	padding: 0;
	margin: 0.15rem 0 0;
	list-style: none;
}

.uf-note {
	position: relative;
	padding-left: 1.53rem;
	font-size: 1.2rem;
	line-height: 1.95rem;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

.uf-note + .uf-note {
	margin-top: 0.75rem;
}

.uf-note-mark {
	position: absolute;
	left: 0;
}

/* ol のUAスタイル(padding-inline-start:40px)は main.css のリセット対象外なので明示的に消す */

.uf-steps {
	max-width: 33.3rem;
	padding: 0;
	margin: 3.98rem auto 0;
	list-style: none;
}

/*
 * 縦線は本文の下端よりさらに伸びて次のステップの手前で終わる(Figma)。
 * その分を padding-bottom で確保し、::after を bottom:0 まで引く。
 */

.uf-step {
	position: relative;
	padding-bottom: 1.32rem;
	padding-left: 3.24rem;
}

.uf-step::before {
	position: absolute;
	top: 0.32rem;
	left: 0;
	width: 0.8rem;
	height: 0.8rem;
	content: "";
	background-color: var(--fk-solution-num);
	border-radius: 50%;
}

.uf-step::after {
	position: absolute;
	top: 1.92rem;
	bottom: 0;
	left: 0.35rem;
	width: 1px;
	content: "";
	background-color: var(--fk-solution-num);
}

.uf-step + .uf-step {
	margin-top: 3.27rem;
}

/* 番号だけ通常ウェイト(DailyOperationと同じ。太字にするとFigmaより太く見える) */

.uf-step-head {
	display: flex;
	align-items: baseline;
}

/*
 * 番号は gap ではなく固定幅で見出しの開始位置を決める。
 * Figmaの数字は詰まった字形で「01」のインク幅が33.4pxしかないのに対し、
 * Noto Sans JP の advance box は55.8pxある。gapで組むと見出しが24px右にずれ、
 * Figmaの座標どおりに詰めると番号と見出しが接触する。
 * ここでは「番号と見出しの間隔(Figma PC 19.6px / SP 16.6px)」を優先して幅を決めている。
 */

.uf-step-num {
	flex: none;
	width: 4.96rem;
	font-size: 2.8rem;
	font-weight: 400;
	line-height: 1;
	color: var(--fk-color-cta-green-tag);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.uf-step-title {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

.uf-step-text {
	margin-top: 1.17rem;
	font-size: 1.4rem;
	line-height: 2.2rem;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

.uf-step-note {
	position: relative;
	padding-left: 1.53rem;
	margin-top: 1rem;
	font-size: 1.2rem;
	line-height: 1.95rem;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

/*
 * UseFlowのボタンは2種類あり、意匠を共有しない。
 * ・アウトライン(JOYO CARD Plus法人カード) → .fk-btn-outline + .uf-btn-card(下の差分)
 * ・緑塗り(お申し込みはこちら)           → .uf-btn
 */

.uf-btn {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27.2rem;
	height: 5.6rem;

	/* アイコン(右16px)の分だけ右を広く取る。中央寄せのテキストはその分だけ左に寄る */
	padding-inline: 1.6rem 4.2rem;
	margin: 2.65rem auto 0;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--fk-color-cta-btn-text);

	/*
	 * ボタンだけ字送りを詰めない。Figmaのテキスト幅(PC 175.9)は
	 * letter-spacing 0 のNoto Sans JPとほぼ一致し、0.04emだと右のアイコンに接触する。
	 */
	letter-spacing: 0;
	text-decoration: none;
	background-color: var(--fk-color-cta-green);
	border: 2px solid var(--fk-color-cta-green);
	border-radius: 2.8rem;
}

.uf-btn:hover {
	opacity: 0.7;
}

/*
 * アウトライン側の差分。Figmaのテキスト領域(336-31.5-48.9=255.6px)では
 * 「JOYO CARD Plus法人カード」が折り返す(Figmaの英数字が詰まった字形で、
 * 同じ20pxでもNoto Sans JPでは約274px必要になるため)。左右を詰めて領域を広げ、
 * 字送りも詰めない。それでも折り返さないよう .uf-btn-text の nowrap で保険をかける。
 */

.uf-btn-card {
	width: 100%;
	max-width: 34.1rem;
	padding-inline: 1.6rem 4.2rem;
	margin: 0.4rem auto 0;
	letter-spacing: 0;
}

.uf-btn-text {
	white-space: nowrap;
}

.uf-btn-icon {
	position: absolute;
	right: 1.6rem;
	width: 1.6rem;
	height: 1.6rem;
}

/*
 * PDFリンクと末尾の注記は、SPだけ左揃え。
 * Figma SPではどちらもcontainerの左端(x16)から始まり、1行で収まる3つ目の注記も
 * x16.5のままなので中央寄せではない。PCは中央寄せ(下の min-width:768px 側)。
 */

.uf-pdf {
	margin-top: 1.6rem;
}

/*
 * アイコンは flex アイテムにせず、行内に流す(`a` の既定の display: inline のまま)。
 * inline-flex + gap にすると、アイコンの24pxとgapが**全行から横幅を先取り**して
 * テキスト箱が343→299.5に狭まり、Figmaより2文字早く折り返してアイコンだけが右端に取り残される。
 */

.uf-pdf-link {
	font-size: 1.6rem;
	line-height: 1.6;
	color: var(--fk-color-link-indigo);

	/*
	 * このリンクだけページ標準の0.04emではなく約8%。Figmaの下線幅から連立で解いた実測値
	 * (SP1行目337.7 / SP2行目50.5 / PC 389.6 の3点がすべて 1.25px=7.8% で残差0.15px)。
	 * 0.04emのままだと文字列が10〜12px狭くなる。
	 */
	letter-spacing: 0.08em;
	text-decoration: none;
}

.uf-pdf-link:hover {
	opacity: 0.7;
}

.uf-pdf-text {
	text-decoration: underline;
}

/*
 * Figma SP実測: 2行目の送り終端67.75 → アイコン枠の左端71.0(=3.25px)、
 * アイコン下端はベースラインの4px下(枠 y-20..+4)。
 * 下線は末尾のletter-spacingを含まないので、下線の右端ではなく送り終端と比べる。
 */

.uf-pdf-icon {
	width: 2.4rem;
	height: 2.4rem;
	margin-left: 0.32rem;
	vertical-align: -0.4rem;
}

.uf-foot-notes {
	padding: 0;
	margin: 1.38rem 0 0;
	list-style: none;
}

.uf-foot-note {
	font-size: 1.2rem;
	line-height: 1.95rem;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

.uf-foot-note + .uf-foot-note {
	margin-top: 0.75rem;
}

/* FAQ ------------------------------------------------------------------ */

/*
 * Figma: FAQ (PC y11394.6 / 1440x1224、SP y14448.5 / 375x1372)
 * 見出し + Q&A 6件。各項目の頭に緑の丸(12px)と横線、右端に開閉アイコン。
 * Figmaは6件とも「−」(開いた状態)で描かれているため、`<details open>` で開いた状態を既定にし、
 * 閉じたときだけ縦棒を足して「＋」にする。JSを足さずキーボード操作にも対応させるための選択。
 * レイアウトはFigmaの絶対座標に依存しないので 768px で PC 値へ切り替える。
 */

.fq {
	background-color: var(--fk-hero-bg);
}

.fq-inner {
	padding-block: 4.83rem 1.95rem;
}

.fq-title {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-text-dark);
	text-align: center;
	letter-spacing: 0.04em;
}

.fq-list {
	padding: 0;
	margin: 1.54rem 0 0;
	list-style: none;
}

/* 項目の頭の丸と横線。丸は #AFD266、線は #BBD981 で色が違う */

/* 丸と線はリストの左端から、Q&Aの中身は7.9px内側から始まる(Figma) */

.fq-item {
	position: relative;
	padding-top: 3.16rem;
	padding-left: 0.79rem;
}

.fq-item::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 1.2rem;
	height: 1.2rem;
	content: "";
	background-color: var(--fk-lc-green);
	border-radius: 50%;
}

.fq-item::after {
	position: absolute;
	top: 0.6rem;
	right: 0;
	left: 2rem;
	height: 1px;
	content: "";
	background-color: var(--fk-solution-num);
}

.fq-item + .fq-item {
	margin-top: 1.55rem;
}

.fq-summary {
	position: relative;
	display: flex;
	align-items: baseline;
	padding-right: 3.4rem;
	cursor: pointer;
	list-style: none;
}

.fq-summary::-webkit-details-marker {
	display: none;
}

/*
 * 開閉アイコン。::after が横棒、::before が縦棒で、開いているときは縦棒を寝かせて「−」にする。
 * 消す(display:none)のではなく回すのは、transform ならアニメーションできるため。
 */

.fq-summary::before,
.fq-summary::after {
	position: absolute;
	top: 0.85rem;
	right: 0.9rem;
	width: 1.6rem;
	height: 2px;
	content: "";
	background-color: var(--fk-color-text-dark);
}

.fq-summary::before {
	transform: rotate(90deg);
	transition: transform var(--fk-fq-duration) ease-out;
}

/*
 * 閉じるアニメーションの間は open 属性が残ったままなので、
 * JSが付ける data-fq-state="closing" を見て、アイコンだけ先に「＋」へ戻す。
 */

.fq-details[open]:not([data-fq-state="closing"]) .fq-summary::before {
	transform: rotate(0deg);
}

/*
 * Q / A はどちらも 20px。
 * 767px以下は本文(質問16px / 回答14px)より大きいので、ベースライン揃えのままだと
 * マークだけ本文の行より上へ飛び出す(実測: Q 2.5px / A 4.4px 上)。
 * その飛び出し量をそのまま top に入れて、**マークと本文のインク上端を揃える**。
 * 行ボックスは動かさない(position: relative)ので項目の高さは変わらない。
 * 768px以上は本文が 20px / 18px でマークとの差が小さく、ベースライン揃えのままでよいため、
 * 下のPC用クエリで top を打ち消している。
 * 計測は _figma-export/m_fq_mark.html (canvas の actualBoundingBoxAscent でインク上端を出す)。
 * 揃え方の比較は _figma-export/m_fq_align.html。
 */

.fq-mark {
	position: relative;
	top: 0.25rem;
	flex: none;
	width: 3.51rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--fk-color-cta-green-tag);
}

.fq-mark.-a {
	top: 0.75rem;
	color: var(--fk-color-cta-orange);
}

.fq-question {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 2.6rem;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

/* 回答にも右余白が要る。無いと開閉アイコン(右端から16px)の下までテキストが伸び、行数もFigmaとずれる */

.fq-answer {
	display: flex;
	align-items: baseline;
	padding-right: 3.85rem;
	margin-top: 1.69rem;
}

.fq-answer-text {
	font-size: 1.4rem;
	line-height: 2.2rem;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

/*
 * 「動きを減らす」設定では開閉アニメーションを止める。
 * JS側も同じメディアクエリを見て高さの補間をやめ、details の既定動作に戻す。
 */

@media (prefers-reduced-motion: reduce) {
	/*
	 * 事例カードのホバー。拡大はやめ、見出しの色替えだけ残す
	 * (色は動きではないので、消すと「ホバーが効いていない」と誤解される)。
	 */

	.oc-card-photo {
		transition: none;
	}

	.oc-card:hover .oc-card-photo {
		transform: none;
	}

	.fq-summary::before {
		transition: none;
	}

	/* 追従CTA(PC)のフェードイン。出現そのものは残し、動きだけ消す */

	.cf-bar {
		transform: none;
		transition: none;
	}
}

/* CTA ------------------------------------------------------------------ */

/*
 * Figma: CTA (PC y12618.6 / 1440x348、SP y15820.5 / 375x403)
 * 薄緑(#EDF6E0)の全幅の帯に、キャッチ + 見出し + ボタン2つ。PCは左に人物イラストが並ぶ(SPは非表示)。
 * 帯(全幅)と内側(container)を2階層に分ける(css.md「フル幅背景を持つラッパーに .container を併用しない」)。
 * 見出しのマーカーはSVGでは #5F7C00 だがPNG実測は #FBC341。SVGの色を信じない(4セクション連続の誤り)。
 */

/*
 * `margin-bottom` はCTAセクションとパンくずの間の余白(PC 80px / SP 60px)。
 *
 * `.ct-band`(色の付いた帯)の padding ではなく **`.ct` の margin** で持つ。
 * padding にすると帯の背景が下へ伸びて「CTAが広がった」見え方になり、
 * `.ct-band` 側に margin を置くと今度は `.ct` の背景(--fk-hero-bg)が
 * 帯とパンくずの間に別の色の帯として出る。`.ct` の外側なら空きはページ背景になる。
 */

.ct {
	margin-bottom: 60px;
	background-color: var(--fk-hero-bg);
}

.ct-band {
	padding-block: 4.4rem 6.4rem;
	background-color: var(--fk-color-cta-bg);
}

.ct-illust {
	display: none;
}

/* 「＼ 〜 ／」は20x20(SP 14x14)の正方形の対角線。図形なのでCSSで描く */

.ct-catch {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	justify-content: center;
}

.ct-catch::before,
.ct-catch::after {
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	content: "";
}

/* グラデーションの等値線は方向と直交するので、「＼」は to bottom left で描く(向きを間違えやすい) */

.ct-catch::before {
	background: linear-gradient(
		to bottom left,
		transparent calc(50% - 0.5px),
		var(--fk-lc-text) calc(50% - 0.5px),
		var(--fk-lc-text) calc(50% + 0.5px),
		transparent calc(50% + 0.5px)
	);
}

.ct-catch::after {
	background: linear-gradient(
		to bottom right,
		transparent calc(50% - 0.5px),
		var(--fk-lc-text) calc(50% - 0.5px),
		var(--fk-lc-text) calc(50% + 0.5px),
		transparent calc(50% + 0.5px)
	);
}

/*
 * 行ボックスの高さを斜線(20px / SP 14px)と揃えるため line-height は 1 にする。
 * 1.6 のままだと行ボックスが斜線より12px高くなり、見出し以降がすべて下にずれる。
 */

.ct-catch-text {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.04em;
}

.ct-title {
	margin-top: 0.41rem;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 3.85rem;
	color: var(--fk-color-text-dark);
	text-align: center;
	letter-spacing: 0.04em;
}

/*
 * マーカーは高さ(8px / SP 4.8px)を固定したいので background で敷く。
 * ただし inline 要素の background box の上端は行ボックス上端ではなく
 * 「行ボックス上端 + (line-height - フォントのascent+descent)/2」なので、その分を引いた位置を指定する。
 * 行ボックス基準で計算するとSPでは background box の外に出て**何も表示されない**。
 */

.ct-title-mark {
	padding-bottom: 0.581rem;
	color: var(--fk-color-cta-green-tag);
	background-image: linear-gradient(var(--fk-hero-lead-underline), var(--fk-hero-lead-underline));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 0.48rem;
}

.ct-btns {
	margin-top: 2.28rem;
}

.ct-btn-group {
	position: relative;
	padding-top: 1.5rem;
}

.ct-btn-group + .ct-btn-group {
	margin-top: 1.6rem;
}

/* ボタンの上端に重ねる白いラベル。尻尾は7.9x4.8の小さい三角 */

.ct-label {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 19.92rem;
	height: 2.49rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-cta-green-tag);
	letter-spacing: 0.04em;
	background-color: var(--fk-color-cta-tag-bg);
	border-radius: 1.245rem;
	filter: drop-shadow(var(--fk-balloon-shadow));
	transform: translateX(-50%);
}

.ct-label::after {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	content: "";
	border-color: var(--fk-color-cta-tag-bg) transparent transparent;
	border-style: solid;
	border-width: 0.48rem 0.395rem 0;
	transform: translate(-50%, -0.19rem);
}

.ct-btn {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 6.6rem;
	padding-inline: 2rem 4rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--fk-color-cta-btn-text);

	/* ボタン内は字送りを詰めない(UseFlow / 追従CTAと同じ) */
	letter-spacing: 0;
	text-decoration: none;
	border-radius: 3.3rem;
	box-shadow: var(--fk-btn-shadow);
}

.ct-btn:hover {
	opacity: 0.7;
}

.ct-btn.-apply {
	background-color: var(--fk-color-cta-green);
}

.ct-btn.-contact {
	background-color: var(--fk-color-cta-orange);
}

.ct-btn-icon {
	position: absolute;
	top: 50%;
	right: 1.6rem;
	width: 1.6rem;
	height: 1.6rem;
	transform: translateY(-50%);
}

/* cta_follow(追従CTA / SP専用) ------------------------------------------ */

/*
 * Figma: cta_follow (SP y16246.5 / 375x72)
 * Figmaではページ最下部に静的に置かれているが、レイヤー名のとおり画面下部に fixed で貼り付ける。
 * 白帯(8px + ボタン48px + 16px)の中に緑とオレンジのボタンを2つ並べる。
 * z-index は共通の #page_top(1000)より下。#page_top は bottom:100px なので領域は重ならない。
 */

.cf {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--fk-z-follow-cta);
	display: flex;
	gap: 1.2rem;
	justify-content: center;
	padding: 0.8rem 0.8rem 1.6rem;
	background-color: var(--fk-color-cta-tag-bg);
}

/* 幅はFigmaの173.5pxを固定せず、帯の内側(359px)をgap12pxで二等分して同じ値にする */

.cf-btn {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	height: 4.8rem;
	padding-inline: 1.6rem 3.2rem;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.75rem;
	color: var(--fk-color-cta-btn-text);
	text-align: center;

	/* ボタン内の文字は字送りを詰めない(Figmaの実測82.4px = 14px × 6文字 × ls0) */
	letter-spacing: 0;
	text-decoration: none;
	border-radius: 2.4rem;
	box-shadow: var(--fk-btn-shadow);
}

.cf-btn:hover {
	opacity: 0.7;
}

.cf-btn.-apply {
	background-color: var(--fk-color-cta-green);
}

.cf-btn.-contact {
	background-color: var(--fk-color-cta-orange);
}

.cf-btn-icon {
	position: absolute;
	top: 50%;
	right: 1.6rem;
	width: 1.6rem;
	height: 1.6rem;
	transform: translateY(-50%);
}

/* 追従CTA(PC) ---------------------------------------------------------- */

/*
 * 768px以上で SP版(.cf)と入れ替わる横長のバー。
 * 寸法は Figma(1400pxアートボード)の実測: バー 1360x119 / 左右14px / 角丸12px。
 * 768〜1179px は rem がvw連動で縮む帯なので、寸法をすべて rem で書けば全体が等比縮小する
 * (css.md「フォールバック先は縦積みでなくてもよい」)。
 *
 * ヒーローを通り過ぎたら JS が .is-shown を付ける。JSが動かない環境では出ないだけで、
 * 同じ導線がページ下部のCTAセクション(#cta)にあるため機能は失われない。
 */

.cf-bar {
	display: none;
}

.cf-bar-close {
	position: absolute;
	top: 0.7rem;
	right: 0.8rem;
	width: 3.2rem;
	height: 3.2rem;
	padding: 0;
	cursor: pointer;
	background-color: var(--fk-color-cta-green-tag);
	border: 0;
	border-radius: 50%;
}

/* ×は2本の線。Figmaの実測は外接矩形 14.7x14.7 */

.cf-bar-close::before,
.cf-bar-close::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.9rem;
	height: 0.2rem;
	content: "";
	background-color: #fff;
	border-radius: 0.1rem;
}

.cf-bar-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.cf-bar-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/*
 * 追従CTA(fixed / 高さ7.2rem)がページ末尾のコンテンツに重なるので、その分の逃げを body に持たせる。
 *
 * 以前は `.J-footer { margin-bottom }` で逃がしていたが、共通フッター・パンくず・ページTOPは
 * 共通JSが差し込む要素で、パーツを取得できない環境ではDOMごと消える。
 * するとCTAセクションがページ末尾になり、その下端に追従CTAが重なってしまう。
 * body 側に持たせればフッターの有無に関わらず必ず余白が確保される。
 * このCSSはこのページでしか読み込まれないため、他ページには影響しない。
 */

body {
	padding-bottom: 7.2rem;
}

@media screen and (min-width: 768px) {
	/*
	 * 左右の余白。
	 *
	 * `grid.css` の `.container` は `max-width: 1180px` の固定値なので、
	 * 768〜1179pxではビューポート幅そのもの、1180pxちょうどでも 1180px = 画面いっぱいになり、
	 * どちらもコンテンツが画面端に接地する。余白が付くのは1180pxを超えてからで、
	 * 1400pxでようやくデザインどおりの110pxになる。
	 *
	 * そこで **1400pxのデザイン(内容1180px / 左右110px)の比率**を768px以上の全幅で保つ。
	 * 内容 = 1180/1400 = 84.2857vw、左右の余白 = 7.857vw ずつ。
	 *
	 * `min(118rem, 84.2857vw)` の1本で全帯域を賄える:
	 *   768〜1179px … 118rem は 109.26vw 相当なので vw 側が勝つ(内容は常に 84.2857vw)
	 *   1180〜1399px … 118rem = 1180px より vw 側が小さいので vw 側が勝つ
	 *   1400px〜     … vw 側が 1180px を超えるので 118rem = 1180px で頭打ち(従来どおり)
	 * 1400pxちょうどで両者が一致するため、境界に段差が出ない。
	 *
	 * `.pr-free` / `.pr-plans` は `.container` の外に置いた全幅ブロックなので、同じ式を個別に持たせる。
	 */

	.container,
	.pr-free,
	.pr-plans {
		max-width: min(118rem, 84.2857vw);
	}

	/*
	 * Hero だけは「デザイン幅1400pxの画面をそのまま等比縮小したもの」として組む。
	 *
	 * 他のセクションは rem(= main.css のルート font-size)基準で、
	 * 768〜1179pxは 0.9259vw 連動 / 1180px以上は10px固定という2段の変化をする。
	 * 一方 KV と見出しだけがビューポート幅比例(1400分の1)で縮む指定だったため、
	 * 両者の縮み方が食い違い、1180〜1399pxではKVと見出しだけが小さくなって
	 * rem固定のCTAボタンがKVへ食い込んでいた(1250pxで約68px、1400px換算で約76px)。
	 *
	 * そこで Hero 内の寸法はすべて --hu(hero unit)で持つ。
	 *   1400px以上  … 1rem(=10px)。Figmaの実測値をそのまま10で割って書ける
	 *   768〜1399px … デザイン幅で10pxになる長さ(1400pxのとき10px)。全要素が同じ係数で縮む
	 * min() の2項はデザイン幅ちょうどで一致するので境界に段差が出ない。
	 * vw側を 0.7142857vw と書くと 1400px で 9.9999998px になり、1400px の描画が
	 * 現行(10px)からわずかにずれる。除算で書けば誤差なく 10px に一致する。
	 * 768〜1179pxでもルートの 1rem(0.9259vw)より vw 側が小さいので、
	 * main.css のルート font-size が切り替わる1180pxの段差も受けない。
	 *
	 * 副作用として、この帯では本文・注記もKVと同じ係数で縮む(768pxで注記が8.8px)。
	 * 「1400pxの画面をそのまま767pxまで縮小する」という方針に従った結果で、
	 * 可読性の下限より構図の一致を優先している。下限を設けたくなったら
	 * --hu の vw 側に max() で床を入れる(例: max(0.85rem, 100vw / 140))。
	 * 由来: 2026-08-14 Hero の拡大縮小率の不一致
	 * (docs/worker-log/2026-08-14-fukurikosei-hero-uniform-scale.md)
	 */

	.hero {
		/* 100vw ÷ デザイン幅 × 10px。1400pxのとき 100vw/140 = 10px */
		--hu: min(1rem, calc(100vw / var(--fk-design-width) * 10));
	}

	.hero-inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: calc(58 * var(--hu));
		padding-block: 0;
	}

	.hero-copy {
		width: calc(68.53 * var(--hu));
		max-width: 100%;
	}

	.hero-title-row {
		font-size: calc(5.6 * var(--hu));
	}

	/* PC版は読点も前後と同じサイズ */

	.hero-title-punct {
		font-size: inherit;
	}

	.hero-title-lg {
		font-size: calc(8 * var(--hu));
	}

	.hero-title-md {
		font-size: calc(6 * var(--hu));
	}

	/* PC版でグラデーションになるのは「厚生」(.-gradient)だけなので、SP用の全体グラデを単色へ戻す */

	.hero-title-lg:not(.-gradient),
	.hero-title-md:not(.-dark) {
		color: var(--fk-hero-title-green);
		background: none;
		-webkit-background-clip: border-box;
		background-clip: border-box;
	}

	.hero-title-md.-dark {
		font-size: calc(6 * var(--hu));
		font-weight: 900;
	}

	.hero-lead {
		margin-top: calc(0.8 * var(--hu));
		font-size: calc(2 * var(--hu));
		line-height: 1.6;
	}

	.hero-lead-strong {
		font-size: calc(2.8 * var(--hu));
	}

	.hero-note {
		margin-top: calc(1.2 * var(--hu));
		font-size: calc(1.6 * var(--hu));
	}

	/* 枠線(2px)はボタンの塗りと同色で見えないため、にじみを避けてpxのまま残す */

	.hero-btn {
		gap: calc(1.6 * var(--hu));
		height: calc(6.4 * var(--hu));
		padding: var(--hu) calc(1.4 * var(--hu)) var(--hu) calc(3 * var(--hu));
		border-radius: calc(4 * var(--hu));
	}

	.hero-btn-text {
		font-size: calc(2 * var(--hu));
	}

	.hero-btn-icon {
		width: calc(1.6 * var(--hu));
		height: calc(1.6 * var(--hu));
	}

	.hero-link {
		justify-content: start;
		font-size: calc(1.4 * var(--hu));
	}

	.hero-actions {
		flex-direction: row;
		gap: calc(2 * var(--hu));
		align-items: center;
		margin-top: calc(1.6 * var(--hu));
	}

	/* Figmaのボタン幅は300px固定。flex縮小に任せると2つのボタンが重なる */

	.hero-action {
		flex: none;
		width: calc(30 * var(--hu));
		padding-top: calc(1.5 * var(--hu));
	}

	/* PC版の吹き出しは左寄せ・固定幅(SP版は中央・内容幅) */

	.hero-action-balloon {
		left: calc(5.45 * var(--hu));
		width: calc(19.92 * var(--hu));
		height: calc(2.49 * var(--hu));
		padding-inline: 0;
		font-size: calc(1.2 * var(--hu));
		transform: none;
	}

	/* 尻尾。本体へ1px食い込ませる継ぎ目対策(base側のコメント参照)はpxのまま残す */

	.hero-action-balloon::after {
		bottom: calc(-0.58 * var(--hu) + 1px);
		border-top-width: calc(0.58 * var(--hu));
		border-right-width: calc(0.39 * var(--hu));
		border-left-width: calc(0.39 * var(--hu));
	}

	/*
	 * 背景テクスチャ。SP用の下端基準を解除し、Figma PC座標の左上基準に戻したうえで
	 * 倍率もビューポート幅に比例させる。--bg-scale を1で固定すると、
	 * 他が縮む帯でテクスチャだけが相対的に巨大化する(768pxで1400px換算2836px = 設計の1.8倍)。
	 * min() で1400px以上は等倍に頭打ちする。
	 */

	.hero-bg {
		--bg-scale: min(1, calc(var(--vw-px, 1400) / var(--fk-design-width)));

		top: calc(-17.4 * var(--hu));
		right: auto;
		bottom: auto;
		left: 0;
		transform-origin: top left;
	}

	/*
	 * container(1180px)の左端はビューポート1440pxのとき130pxなので、Figmaのleft=747.9pxは617.9pxになる。
	 * ここは等倍のフォールバック値で、下のブロックが1400px基準の等比縮小に置き換える。
	 */

	.hero-kv {
		--kv-scale: 1;

		top: 0;
		right: auto;
		bottom: auto;
		left: 617.9px;
		transform-origin: top left;
	}

	/*
	 * 768〜1399px はKVも他の要素と同じ「ビューポート幅 ÷ 1400」で縮める(768pxで0.549倍)。
	 * left は .hero-inner(= container)基準なので 617.9px ÷ 1400px = 44.1358vw。
	 * container 自身も 84.2857vw なので、KVが container の右端から食み出す量
	 * (デザイン幅で17.9px)も同じ比で保たれる。
	 * 1400pxちょうどで上の等倍指定と一致するため、境界に段差が出ない。
	 */

	.hero-kv {
		/* --vw-px の経緯は上の Hero の scale のコメントを参照 */
		--kv-scale: calc(var(--vw-px, 1400) / var(--fk-design-width));

		left: 44.1358vw;
	}

	/* service_1(PC) --- Figma実測値 */

	.service-intro {
		padding-top: 6rem;
	}

	.service-intro-card {
		padding: 4rem 4rem 6rem;
		border-radius: 2.4rem 2.4rem 0 0;
	}

	/*
	 * eyebrow が 2rem になる帯。gap はFigma実測の 1.65rem のままにする
	 * (間隔 2.05rem に対し送りは 2.08rem。8個で0.21remしかずれないので1対1の対応は崩れない)。
	 * 寄せ幅は文字サイズに比例して変わる:
	 *   文字0の中心   = -(12 × 2.08)/2 + 2/2 = -11.48rem
	 *   ドット0の中心 = -(8 × 0.4 + 7 × 1.65)/2 + 0.4/2 = -7.175rem
	 *   差 = -4.305rem。実測に合わせて -4.27rem(375〜1440pxの実測がすべてこの値)
	 */

	/*
	 * ドットの下端と eyebrow の文字(インク)上端の間隔を、デザイン幅1400pxの 7.14px に固定する。
	 *
	 * 元は `top: 3.8rem` で、間隔を作る要素(カードの padding、行ボックスの余り、ドットの高さ)が
	 * すべて rem だった。1180px未満はルートの font-size が vw 連動なので間隔も比例して縮み、
	 * 768pxで5.08pxまで詰まっていた(1100pxでは逆に7.28pxへ広がる。ルートが10.19pxになるため)。
	 *
	 * カード上端から文字インク上端までを rem で積むと:
	 *   カードの padding-top                            4rem
	 * + 行ボックスの上の余り (1.6 - 1) × 2rem ÷ 2       0.6rem
	 * + font-size とインク上端の差 (1 - 0.843) × 2rem   0.314rem   ← 0.843 は Noto Sans JP の
	 *                                                              ascent ÷ font-size(実測)
	 *   合計                                            4.914rem
	 * ここから ドットの高さ 0.4rem と、固定したい間隔 7.14px を引く。
	 * 間隔だけを px で持つので、文字サイズが変わっても間隔は動かない。
	 * 由来: 2026-08-13 ドットと文字の間隔をデザイン幅の値へ固定
	 */

	.service-intro-deco {
		top: calc(4.514rem - 7.14px);
		gap: 1.65rem;
		transform: translateX(calc(-50% - 4.27rem));
	}

	.service-intro-eyebrow {
		font-size: 2rem;
	}

	.service-intro-title {
		font-size: 5.6rem;
	}

	.service-intro-lead {
		font-size: 1.8rem;
		text-align: center;
	}

	.service-intro-point {
		gap: 1rem;
		font-size: 2rem;
	}

	.service-intro-point-icon {
		width: 3rem;
		height: 3rem;
	}

	.service-intro-videos {
		flex-direction: row;
		justify-content: center;
	}

	.video-item-label {
		font-size: 1.6rem;
	}

	/* Problem(PC) --- 寸法はSVG書き出し由来、文字サイズは2xPNGからの実測 */

	.problem {
		padding-block: 7.7rem 0;
	}

	.problem-inner {
		margin-bottom: 8.1rem;
	}

	.problem-eyebrow {
		font-size: 2.4rem;
	}

	.problem-title {
		font-size: 5.6rem;
	}

	/*
	 * カード3枚は768px以上で横並びにする。
	 * この帯の container は 108rem(=ビューポート幅)で PC の 118rem より狭いので、
	 * Figmaの固定幅(38rem×3)ではなく flex の等分で container に収める(1180px以上は下のブロックで38remに戻す)。
	 * 左右のpaddingを4rem→2.4remに詰めているのは、カード幅が 37.73rem→34.93rem に縮んでも
	 * 内容幅を30rem前後に保ち、見出しと本文の折り返し位置をPCと同じにするため。
	 */

	.problem-cards {
		flex-direction: row;
		gap: 1.6rem;
		justify-content: center;
		margin-inline: 0;
		margin-top: 4rem;
	}

	.problem-card {
		flex: 1 1 0;
		min-width: 0;
		padding: 3.2rem 2.4rem 3.6rem;
	}

	/*
	 * container が 105rem(=1247px)未満だとカード内容幅が見出し(27.04rem)に届かず折り返す。
	 *
	 * - `text-wrap: balance` … 既定だと最終行が1文字だけ残る(「…のが不 / 安」)ので行長を均す。
	 *   未対応ブラウザでは既定の折り返しに戻るだけでレイアウトは壊れない。
	 * - flex をやめてリーフをインラインに戻す … flex アイテムのままだとリーフ分の幅が
	 *   全行から先取りされ、リーフだけがカードの右端に取り残される
	 *   (css.md「折り返す文の末尾に置くアイコンは flex アイテムにしない」)。
	 *   `vertical-align` はPC(flex の align-items:flex-start)と同じ位置になる実測値。
	 */

	.problem-card-title {
		display: block;
		font-size: 2rem;
		text-align: center;
		text-wrap: balance;
	}

	/*
	 * WebKit(Safari 18.5で実測)は `text-wrap: balance` の行分割で、
	 * 行末のインライン画像(リーフ)を必ず次の行へ送る。
	 * 「使ってもらえるか不安」のように文字が1行に収まる幅でもリーフだけが見出しの下に落ち、
	 * カード高が1行分増える(1180pxで 252 → 284、1399pxで 220 → 252)。
	 * Chrome は同じ指定でリーフが行末に残るので、Safariでだけ崩れる。
	 * `display: inline-block` / `position: relative` への置き換えでは回避できず、
	 * balance を切ったときだけリーフが行末に戻る(3回測定して再現を確認)。
	 *
	 * Chrome側の折り返し(Figma準拠)は変えたくないので、Safariだけを狙って解除する。
	 * 判別は WebKit だけが残しているプレフィックス付きプロパティで行う
	 * (`-webkit-hyphens` は Blink では削除済みで、CSS.supports が false を返すことを実測)。
	 * Safariでは最終行が1文字残る形に戻るが、リーフが落ちる崩れよりは軽い。
	 * WebKit側が修正されたらこのブロックごと削除する。
	 */

	@supports (-webkit-hyphens: none) {
		.problem-card-title {
			text-wrap: wrap;
		}

		/*
		 * balance を切ったぶんの折り返しは幅で誘導する。
		 * 2枚目だけが `箱幅 < 本文13字(13.52em) + リーフ(1.07em)` になり、
		 * 素の折り返しでは本文が1行に残ってリーフだけが下へ落ちる。
		 * 7.6em は「7字(7.28em)は入り8字(8.32em)は入らない」幅で、
		 * Chrome の balance と同じ「運用の手間が増 / えるのが不安」に揃う。
		 * 1248px以上は箱がリーフごと収まるので、この誘導は外す
		 * (1247pxでは箱291.67pxに対し本文270.40+リーフ21.33=291.73pxで0.06px足りない、を実測)。
		 */

		@media screen and (max-width: 1247.98px) {
			.problem-card:nth-child(2) .problem-card-title {
				max-width: 7.6em;
				margin-inline: auto;
			}
		}
	}

	.problem-card-leaf {
		margin-left: 0.4rem;
		vertical-align: 0.58rem;
	}

	.problem-card-body {
		margin-top: 2.4rem;
		font-size: 2rem;
	}

	/* 背景装飾は緑帯(セクション高 − 白帯6rem)にだけ敷く。1180px以上はFigma実測の固定値に戻す */

	.problem-bg {
		height: calc(100% - 6rem);
	}

	/*
	 * イラストはFigma PCで container の右端から1.1rem内側、下端がセクション下端の0.14rem下にある。
	 * left/top ではなく right/bottom で持てば、container が 108rem のこの帯でも同じ位置に置ける
	 * (inner の下端から margin-bottom 8.1rem + 白帯 6rem = 14.1rem 下がセクション下端)。
	 */

	.problem-illust {
		right: 1.1rem;
		bottom: -14.24rem;
		width: 14.2rem;
	}

	/* Solution (PC) */

	.solution-inner {
		padding-block: 8.1rem 0;
	}

	.solution-title-sm {
		font-size: 2.4rem;
	}

	.solution-title-main {
		margin-top: 0.8rem;
		font-size: 3.2rem;
	}

	.solution-title-mark {
		font-size: 5.6rem;
	}

	.solution-title-mark::before {
		bottom: 0.2rem;
		height: 1.4rem;
	}

	.solution-title-sparkle {
		bottom: 3.73rem;
		left: -5.5rem;
		width: 6.14rem;
		height: 6.39rem;
	}

	.solution-cards {
		display: flex;
		gap: 3.1rem;
		margin: 4.05rem 0 0;
	}

	/* flex-basis を 0 にしないと本文の長さでカード幅が不均等になる */

	.solution-card {
		flex: 1 1 0;
		min-width: 0;
	}

	.solution-card + .solution-card {
		margin-top: 0;
	}

	.solution-card-link {
		min-height: 54.6rem;
		padding: 1.2rem 4rem 3.7rem;
	}

	.solution-card-num {
		top: 0.6rem;
		left: 0.9rem;
		font-size: 6.4rem;
	}

	.solution-card-illust {
		height: 16rem;
		margin-top: 6.8rem;
	}

	/* container が 118rem に満たない帯では折り返す。既定だと最終行が「に」1文字になるので均す */

	.solution-card-title {
		margin-top: 2.9rem;
		font-size: 2.4rem;
		text-wrap: balance;
	}

	.solution-card-text {
		margin-top: 1.8rem;
		font-size: 1.8rem;
	}

	.solution-card-arrow {
		margin-top: 1.2rem;
	}

	/* ServiceMenu (PC) */

	.sm-inner {
		padding-block: 9.94rem 0;
	}

	.sm-title {
		font-size: 4rem;
	}

	.sm-title-line::before {
		bottom: 0.94rem;
		height: 1rem;
	}

	.sm-lead {
		margin-top: 3.45rem;
		font-size: 2.8rem;
	}

	.sm-note {
		margin-top: 1rem;
		font-size: 1.8rem;
		line-height: 1.6;
		text-align: center;
	}

	/*
	 * ① アプリ紹介(768px以上)
	 *
	 * Figmaの構図(左右に吹き出し3つずつ・中央にスマホ)をgridで組む。
	 * Figmaの絶対座標は container 1180px 前提(右端が 1099px)で、この帯では突き抜けるため使えない。
	 * 1180px以上では下のブロックで絶対配置に切り替え、Figmaの座標をそのまま再現する。
	 *
	 * ul を display:contents で透過させて6つの吹き出しを直接 grid item にする。
	 * upper/lower の2グループに左右の列が混在しているので、ul単位では2列に分けられない。
	 */

	.sm-app {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		row-gap: 1.6rem;
		column-gap: 1.6rem;
		align-items: start;
		justify-items: center;
		margin-top: 3.86rem;
	}

	.sm-balloons {
		display: contents;
	}

	/*
	 * 幅は container に追従させ、Figmaの336pxを上限にする。
	 * 背景SVGは preserveAspectRatio="none" を付けてあるので、上限より狭い帯(〜約1000px)では横に縮む。
	 * SPの margin-left は375px幅前提のずらし量なので打ち消す。
	 * 個別クラス(.sm-balloon.-event 等)と同じ詳細度にしないと width を上書きできない。
	 */

	.sm-balloon {
		width: 100%;
		max-width: 33.61rem;
		min-height: 11.9rem;

		/*
		 * この帯からしっぽは「横向き」(または端の1px未満)になるので、上下は本体いっぱいにして
		 * 中身を縦中央に置く。左右はしっぽのある側だけ下の個別指定で足す。
		 */
		padding-block: 0;
		margin-inline: 0;
	}

	/*
	 * SPの個別幅と、しっぽが上向きだったぶんの padding-top を打ち消す。
	 * max-width は .sm-balloon 側だけに置き、1180px で外せるようにしておく。
	 * 個別クラス側で書かないと詳細度で負ける。
	 */

	.sm-balloon.-skill,
	.sm-balloon.-health,
	.sm-balloon.-life {
		width: 100%;
		min-height: 11.9rem;
		padding-block: 0;
	}

	/*
	 * しっぽぶんを足して、内側の余白を「本体の左右2rem」に揃える。
	 * 値は背景SVGを isPointInFill で走査した実測(縦中央での本体の左右端)。
	 * event(右0.56px) / leisure(左0.5px) は1px未満なので補正しない。
	 *
	 * この帯では吹き出しが container に追従して縮み、背景SVG(preserveAspectRatio="none")の
	 * しっぽも一緒に縮むが、rem の補正値は縮まない。1180px付近では一致し、
	 * 768pxまで縮むと最大4px ぶん過剰に寄る。座標を絶対配置に切り替える1400px以上では実測どおり。
	 */

	.sm-balloon.-daily {
		/* しっぽ 右16.32px */
		padding-right: 3.63rem;
	}

	.sm-balloon.-health {
		/* しっぽ 右6.79px */
		padding-right: 2.68rem;
	}

	.sm-balloon.-skill {
		/* しっぽ 左17.0px */
		padding-left: 3.7rem;
	}

	.sm-balloon.-life {
		/* しっぽ 左6.75px */
		padding-left: 2.68rem;
	}

	.sm-balloon + .sm-balloon {
		margin-top: 0;
	}

	/* Figmaと同じジグザグ配置(左: イベント→日常使い→ヘルスケア / 右: 余暇→スキル→ライフ) */

	.sm-balloon.-event {
		grid-area: 1 / 1;
		background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/servicemenu/balloon-pc-event.svg");
		transform: none;
	}

	.sm-balloon.-leisure {
		grid-area: 1 / 3;
		background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/servicemenu/balloon-pc-leisure.svg");
		transform: none;
	}

	.sm-balloon.-daily {
		grid-area: 2 / 1;
		background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/servicemenu/balloon-pc-daily.svg");
		transform: none;
	}

	.sm-balloon.-skill {
		grid-area: 2 / 3;
		background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/servicemenu/balloon-pc-skill.svg");
		transform: none;
	}

	.sm-balloon.-health {
		grid-area: 3 / 1;
		background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/servicemenu/balloon-pc-health.svg");
		transform: none;
	}

	.sm-balloon.-life {
		grid-area: 3 / 3;
		background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/servicemenu/balloon-pc-life.svg");
		transform: none;
	}

	.sm-app-screen {
		grid-area: 1 / 2 / 4 / 3;
		align-self: center;
		width: 19.3rem;
		height: 37.12rem;
		margin: 0;
	}

	/* ② 社内浸透サポート(PC) */

	.sm-support {
		margin-top: 6.99rem;
	}

	.sm-support-title {
		font-size: 2.8rem;
	}

	.sm-support-text {
		margin-top: 1.87rem;
		font-size: 1.8rem;
		line-height: 1.6;
		text-align: center;
	}

	.sm-support-illust {
		width: 20.21rem;
		height: 22.02rem;
		margin-top: 2.2rem;
	}

	/*
	 * 左右のpaddingは「優遇サービスの詳細はこちら」(20px x 13文字 = 270.4px)が
	 * 1行に収まる値にする(338 - 18 - 36 = 284)。右を広く取ってアイコン分の逃げを作り、
	 * 文字の中央がFigmaの位置(ボタン中央から約10px左)に来るようにしている。
	 */

	.sm-btn {
		width: 33.8rem;
		padding-inline: 1.8rem 3.6rem;
		margin-inline: auto;
		margin-top: 4.09rem;
		font-size: 2rem;
	}

	.fk-btn-outline-icon.-pdf {
		width: 2.4rem;
		height: 2.4rem;
	}

	/* ③ ATM優遇(PC) */

	.sm-atm {
		padding: 4.54rem 17rem 4.1rem;
		margin-inline: 0;
		margin-top: 4.9rem;
		border-radius: 1.2rem;
	}

	.sm-atm-title {
		gap: 0.85rem;
		font-size: 2.8rem;
		line-height: 1.4;
	}

	/* PCは左右のキラキラで高さが違う(Figma 左32.06 / 右26.72) */

	.sm-atm-blight {
		width: 2.21rem;
		height: 3.21rem;
		margin-top: -0.54rem;
	}

	.sm-atm-blight.-r {
		height: 2.67rem;
	}

	.sm-atm-text {
		margin-top: 2.07rem;
		font-size: 1.8rem;
		line-height: 2.88rem;
		text-align: center;
	}

	.sm-atm-strong {
		font-size: 2rem;
	}

	.sm-atm-illust {
		gap: 1.98rem;
		margin-top: 1.51rem;
	}

	.sm-atm-illust-atm {
		width: 11.58rem;
		height: 22.06rem;
	}

	.sm-atm-illust-passbook {
		width: 26.37rem;
		height: 19.95rem;
		margin-top: 1.02rem;
	}

	.sm-atm-subtitle {
		margin-top: 2.84rem;
		font-size: 2.4rem;
	}

	.sm-atm-lead {
		margin-top: 1.95rem;
		font-size: 2rem;
		line-height: 1.4;
		text-align: center;
	}

	.sm-checks {
		margin-top: 1.65rem;
	}

	/* 項目ごとに内容幅で中央寄せする(Figmaも1行/2行で個別に中央揃え) */

	.sm-check {
		gap: 0.85rem;
		width: fit-content;
		margin-inline: auto;
		font-size: 1.8rem;
		line-height: 1.6;
	}

	.sm-check + .sm-check {
		margin-top: 1.35rem;
	}

	.sm-check-icon {
		width: 3.2rem;
		height: 3.2rem;
	}

	.sm-atm-note {
		margin-top: 0.99rem;
		text-align: center;
	}

	.sm-atm .sm-btn {
		margin-top: 1.73rem;
	}

	/* DailyOperation (PC) */

	.do-inner {
		padding-block: 9.92rem 0;
	}

	.do-title {
		font-size: 4rem;
	}

	.do-title-line::before {
		bottom: 0.92rem;
		height: 1rem;
	}

	.do-subtitle {
		margin-top: 3.55rem;
		font-size: 2.8rem;
	}

	.do-lead {
		margin-top: 1.72rem;
		font-size: 1.8rem;
		line-height: 1.6;
		text-align: center;
	}

	/*
	 * 3ステップを横並びにする。gapはFigmaのflow幅(1015.6)から各ステップ幅を引いた均等値。
	 * Figmaは3つのステップ幅が説明文の長さで違うため gap も左右で不均等(135.5 / 114.5)だが、
	 * 実装は中央揃え + 均等gapにしている(flowの中心が container の中心と一致する)。
	 *
	 * ステップ幅は説明文で決まる 74.88rem。Figmaどおりの gap 12.5rem を足すと 99.88rem になり、
	 * container(84.2857vw)がそれに満たない幅ではflexアイテムが縮んで
	 * イラストが `img { max-width: 100% }` で横に潰れる。
	 * そこで gap を「container の余りの半分」で頭打ちにする(`--do-gap`)。
	 * container が 99.88rem 以上になる 1185px 以上ではFigmaの 12.5rem になり、
	 * それ未満では 7.91rem(768〜1179px)〜12.5rem の間で伸縮する。
	 * ステップ間の矢印もこの gap を基準に置くので、同じ値を変数で共有する。
	 */

	.do-flow {
		--do-gap: min(12.5rem, calc(42.14285vw - 37.6rem));

		display: flex;
		column-gap: var(--do-gap);
		align-items: flex-start;
		justify-content: center;
		margin-top: 4.26rem;
	}

	.do-step + .do-step {
		margin-top: 0;
	}

	/* 矢印はgapの中央から0.88rem左(Figma実測)。gapが縮んでも同じ関係を保つ */

	.do-step + .do-step::before {
		top: 13.35rem;
		left: calc(var(--do-gap) / -2 - 0.88rem);
		width: 2.75rem;
		height: 4.67rem;
		background-image: url("/img/enterpri/fukurikosei/fukurikosei_register/dailyoperation/icon-arrow-forward.svg");
		transform: none;
	}

	.do-step-head {
		font-size: 3.2rem;
		line-height: 4.48rem;
	}

	.do-step-num {
		margin-right: 0.9rem;
		font-size: 4rem;
	}

	.do-step-illust {
		height: 18.06rem;
		margin-top: 2.79rem;
	}

	.do-step-text {
		margin-top: 2.57rem;
	}

	/* Price (PC) */

	.pr-inner {
		padding-block: 9.92rem 0;
	}

	.pr-compare .pr-inner {
		padding-block: 6.58rem 0;
	}

	.pr-title {
		font-size: 4rem;
	}

	.pr-title-line::before {
		bottom: 0.92rem;
		height: 1rem;
	}

	.pr-lead {
		margin-top: 3.14rem;
		font-size: 1.8rem;
		line-height: 1.6;
		text-align: center;
	}

	.pr-note {
		padding-left: 0;
		margin-top: 0.68rem;
		text-align: center;
		text-indent: 0;
	}

	.pr-note-mark {
		width: auto;
		margin-right: 0.4rem;
	}

	.pr-free {
		margin: 3.91rem auto 0;
	}

	.pr-free-deco {
		top: 0.42rem;
		left: -2.62rem;
		width: 3.52rem;
		height: 3.62rem;
	}

	.pr-free-sm {
		font-size: 2rem;
	}

	.pr-free-lg {
		font-size: 4rem;
	}

	/*
	 * 料金カード3枚を横並びにする。カード幅は等分で `(84.2857vw - 4.8rem) / 3`
	 * (768pxで28.74rem、1400pxでFigmaの37.73rem)。
	 *
	 * 料金の行は `white-space: nowrap` かつ .pr-plan が `overflow: hidden` なので、
	 * カード幅を超えると切れて読めなくなる。行の実幅は「11,000円（税込）」で
	 * `11.875rem + 3.831 × 数字のfont-size`(実測値からの一次式)。
	 * PCと同じ余り(1.3rem)を残す数字のサイズを解くと `7.3336vw - 3.857rem` になるので、
	 * これをFigmaの 6.4rem で頭打ちにする。768pxで4.06rem、1400pxでちょうど6.4rem。
	 * 「月額」「円」「（税込）」は一緒に縮めない(768pxで7px台になり読めなくなるため)。
	 */

	.pr-plans {
		display: flex;
		gap: 2.4rem;
		margin-inline: auto;
		margin-top: 4rem;
	}

	.pr-plan {
		flex: 1 1 0;
		min-width: 0;
	}

	.pr-plan + .pr-plan {
		margin-top: 0;
	}

	.pr-plan-head {
		height: 6.8rem;
	}

	.pr-plan-label {
		font-size: 1.6rem;
	}

	.pr-plan-body {
		padding-block: 5.1rem 5.68rem;
	}

	.pr-plan-price {
		margin-top: 0.75rem;
	}

	.pr-plan-price-num {
		font-size: min(6.4rem, calc(7.3336vw - 3.857rem));
	}

	.pr-compare-title {
		font-size: 2.8rem;
		line-height: 1.4;
	}

	.pr-compare-text {
		margin-top: 1.87rem;
		font-size: 1.8rem;
		line-height: 1.6;
		text-align: center;
	}

	/* PCのグラフはFigmaの実寸(513x397.9)で中央に置く */

	.pr-chart {
		width: 51.3rem;
		height: 39.79rem;
		margin-inline: auto;
		margin-top: 3.79rem;
	}

	.pr-chart-line {
		top: 36.4rem;
		border-top-width: 2px;
	}

	.pr-chart-bar.-other {
		left: 7.75rem;
		width: 12.6rem;
		height: 36.4rem;
	}

	.pr-chart-bar.-benesapo {
		top: 29.9rem;
		left: 31.75rem;
		width: 12.6rem;
		height: 6.5rem;
	}

	.pr-chart-price {
		font-size: 2.4rem;
	}

	.pr-chart-bar.-other .pr-chart-price {
		top: 15.26rem;
	}

	.pr-chart-bar.-benesapo .pr-chart-price {
		top: 1.45rem;
	}

	.pr-chart-price-label {
		font-size: 1.4rem;
	}

	.pr-chart-frame {
		top: 0.1rem;
		left: 31.85rem;
		width: 12.4rem;
		height: 29.7rem;
		border-width: 2px;
	}

	.pr-chart-slope {
		top: 30.05rem;
		left: 32rem;
		width: 32.14rem;
		border-top-width: 3px;
	}

	.pr-chart-cut {
		top: 5.45rem;
		left: 29.2rem;
		width: 17.7rem;
		height: 17.7rem;
		padding-top: 1.32rem;
		border-width: 3px;
	}

	.pr-chart-cut-rate {
		font-size: 2.4rem;
	}

	.pr-chart-cut-num {
		font-size: 4.4rem;
	}

	.pr-chart-cut-label {
		font-size: 2.4rem;
	}

	.pr-chart-axis {
		top: 37.3rem;
		font-size: 2.4rem;
	}

	.pr-chart-axis.-other {
		left: 11.19rem;
	}

	.pr-chart-axis.-benesapo {
		left: 32.83rem;
	}

	.pr-trial {
		padding: 4rem 0 3.94rem;
		margin: 1.11rem auto 0;
		border-radius: 1.2rem;
	}

	.pr-trial-tag {
		min-width: 10.2rem;
		height: 4.8rem;
		font-size: 1.8rem;
	}

	.pr-trial-tag::after {
		bottom: -0.79rem;
		border-top-width: 1.42rem;
		border-right-width: 1.18rem;
		border-left-width: 1.18rem;
	}

	.pr-trial-title {
		gap: 0.85rem;
		margin-top: 1.61rem;
		font-size: 2.8rem;
	}

	.pr-trial-blight {
		width: 2.21rem;
		height: 3.21rem;
		margin-top: -0.54rem;
	}

	.pr-trial-blight.-r {
		height: 2.67rem;
	}

	.pr-trial-text {
		margin-top: 1.69rem;
		font-size: 1.8rem;
		line-height: 1.6;
		text-align: center;
	}

	.pr-trial-illust {
		height: 22.06rem;
		margin-top: 1.42rem;
	}

	/* OtherCase (PC) */

	.oc-inner {
		padding-block: 9.92rem 0.5rem;
	}

	.oc-title {
		font-size: 4rem;
	}

	/* カード幅37.73rem + gap2.4rem でcontainer(118rem)に一致する */

	.oc-cards {
		display: flex;
		gap: 2.4rem;
		margin-top: 3.68rem;
	}

	/* ベースの `.oc-card + .oc-card`(0,2,0)より詳細度を下げないよう子孫セレクタで書く */

	.oc-cards .oc-card {
		flex: 1 1 0;
		min-width: 0;
	}

	.oc-card + .oc-card {
		margin-top: 0;
	}

	/* container が 118rem に満たない帯では2行→3行になる。既定だと最終行が数文字だけ残るので均す */

	.oc-card-title {
		text-wrap: balance;
	}

	.oc-btn {
		width: 27rem;
		margin-inline: auto;
		margin-top: 4.48rem;
		font-size: 2rem;
	}

	/*
	 * LocalConnection (PC)
	 *
	 * SPの2重枠カードをやめ、ブロブ + 4体のイラストの構図に切り替える。
	 * 装飾はFigmaの1440pxアートボード座標で決まっているので、
	 * 「1440px相当の固定サイズのキャンバスをセクション中央に置き、その中でFigma座標を使う」形にする
	 * (css.md「Figmaの1440px基準の装飾は1440px固定幅ラッパの中央寄せで持つ」)。
	 *
	 * キャンバスの寸法だけは px ではなく rem で持ち、係数を 108/1180 = 0.0915254 にしている。
	 * この帯の container は 108rem で、1180px のときの container(118rem)と同じ幅を指すため、
	 * この係数なら「1180pxでの見え方をそのままビューポート幅に比例縮小したもの」になる。
	 * 1179px と 1180px で装飾のpx寸法がほぼ一致する(誤差0.1%)ので、境界で装飾が飛ばない。
	 * ÷10(=PCと同じrem値)にすると、ブロブが 111.13rem でビューポート(108rem)を超え、
	 * .lc の overflow:hidden で左右が切り落とされて輪郭が直線になる。
	 *
	 * 一方カードと本文は他セクションと揃えるため rem のまま(=装飾に対して9.3%大きい)。
	 * その分ブロブの中で内容が下に寄るので、カードの上下余白は下の値で取り直している。
	 */

	.lc {
		padding-bottom: 24.7rem;
	}

	.lc-bg {
		top: 0;
		bottom: 0;
	}

	.lc-bg-wave.-top {
		height: 30.844rem;
		background-image: url(/img/enterpri/fukurikosei/fukurikosei_register/localconnection/bg-wave-top-pc.svg);
	}

	.lc-bg-wave.-bottom {
		height: 23.156rem;
		background-image: url(/img/enterpri/fukurikosei/fukurikosei_register/localconnection/bg-wave-bottom-pc.svg);
	}

	/* Figmaの1440x1389のアートボードに相当するキャンバス。中の座標はすべてこの箱の左上が原点 */

	.lc-deco {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 131.797rem;
		height: 127.129rem;
		transform: translate(-50%, -50%);
	}

	.lc-blob {
		position: absolute;
		top: 9.354rem;
		left: 15.568rem;
		display: block;
		width: 101.707rem;
		max-width: none;
		height: 106.749rem;
	}

	.lc-deco-item.-store {
		top: 14.873rem;
		left: 31.311rem;
		width: 13.454rem;
		height: 14.196rem;
	}

	.lc-deco-item.-friends {
		top: 16.675rem;
		right: auto;
		left: 81.623rem;
		width: 11.874rem;
		height: 12.409rem;
	}

	.lc-deco-item.-alone {
		top: 100.64rem;
		bottom: auto;
		left: 27.641rem;
		width: 11.264rem;
		height: 12.398rem;
	}

	.lc-deco-item.-car {
		top: 103.294rem;
		right: auto;
		bottom: auto;
		left: 81.64rem;
		width: 13.465rem;
		height: 10.64rem;
	}

	.lc-card {
		max-width: 69.17rem;
		padding: 0;
		margin-top: 22rem;
		border: 0;
		border-radius: 0;
	}

	.lc-inner {
		padding: 0;
		background-color: transparent;
		border-radius: 0;
	}

	.lc-eyebrow {
		width: 24.7rem;
		height: 4.8rem;
		font-size: 2rem;
		border-radius: 2.4rem;
	}

	.lc-eyebrow::after {
		transform: translate(-50%, -0.62rem);
	}

	.lc-title {
		margin-top: 1.39rem;
		font-size: 5.6rem;
		line-height: 6.85rem;
	}

	.lc-lead {
		margin-top: 1.97rem;
		font-size: 1.8rem;
		line-height: 2.9rem;
	}

	.lc-br {
		display: inline;
	}

	.lc-features {
		display: flex;
		gap: 4.68rem;
		justify-content: center;
		margin-top: 1.33rem;
	}

	.lc-feature + .lc-feature {
		margin-top: 0;
	}

	.lc-feature.-coupon {
		flex: none;
		width: 33.4rem;
	}

	.lc-feature.-navi {
		flex: none;
		width: 31.09rem;
	}

	.lc-feature.-coupon .lc-feature-visual {
		height: 22rem;
		margin-left: 0.48rem;
	}

	.lc-feature.-coupon .lc-feature-bubble {
		width: 12.916rem;
		height: 13.198rem;
	}

	.lc-feature.-coupon .lc-feature-note {
		top: 3.183rem;
		left: 5.254rem;
		width: 2.781rem;
		height: 5.543rem;
	}

	.lc-feature.-coupon .lc-feature-illust {
		top: 7.98rem;
		left: 8.92rem;
		width: 13rem;
		height: 14rem;
	}

	.lc-feature.-navi .lc-feature-visual {
		height: 22.51rem;
		margin-left: 0;
	}

	.lc-feature.-navi .lc-feature-bubble {
		width: 12.783rem;
		height: 13.062rem;
	}

	.lc-feature.-navi .lc-feature-note {
		top: 3.307rem;
		left: 4.825rem;
		width: 3.38rem;
		height: 5.647rem;
	}

	.lc-feature.-navi .lc-feature-illust {
		top: 8.507rem;
		left: 7.62rem;
		width: 12.8rem;
		height: 14rem;
	}

	.lc-feature-title {
		margin-top: 1.6rem;
	}

	/* PCは白バッジなしの素のテキスト(Figmaの指定がSPだけバッジ付き) */

	.lc-feature.-coupon .lc-feature-title-text {
		display: inline;
		padding: 0;
		background-color: transparent;
		border-radius: 0;
	}

	.lc-feature-text {
		max-width: 30.8rem;
		margin-top: 0.8rem;
	}

	.lc-feature.-coupon .lc-feature-text {
		margin-left: 0.76rem;
	}

	.lc-feature.-navi .lc-feature-text {
		margin-left: 0.27rem;
	}

	.lc-btn {
		height: 6.8rem;
		margin-top: 1.67rem;
		font-size: 2rem;
		border-radius: 3.4rem;
	}

	/* UseFlow: レイアウトは縦積みのまま、文字サイズと余白をPC値へ切り替える */

	.uf-inner {
		padding-block: 8rem 0;
	}

	.uf-eyebrow {
		width: 30.2rem;
		height: 4.8rem;
		font-size: 2rem;
		border-radius: 2.4rem;
	}

	.uf-eyebrow::after {
		transform: translate(-50%, -0.62rem);
	}

	.uf-title {
		margin-top: 1.22rem;
		font-size: 4rem;
	}

	.uf-lead {
		margin-top: 3.19rem;
		font-size: 2rem;
		line-height: 3.2rem;
	}

	.uf-notes {
		margin-top: 0.76rem;
		text-align: center;
	}

	/* PCは1行に収まるので、ぶら下げをやめて中央寄せにする */

	.uf-note {
		padding-left: 0;
	}

	.uf-note-mark {
		position: static;
		margin-right: 0.67rem;
	}

	.uf-btn-card {
		max-width: 33.6rem;
		margin-top: 1.71rem;
		font-size: 2rem;
	}

	.uf-btn {
		margin-top: 1rem;
		font-size: 2rem;
	}

	/* Figma PCではPDFリンク・注記とも中央寄せ(1440pxで3項目の中心が約716px=ページ中央) */

	.uf-pdf,
	.uf-foot-notes {
		text-align: center;
	}

	/* Figma PC実測: 送り終端899.7 → アイコン枠の左端907.0(=7.3px)。SPより広い */

	.uf-pdf-icon {
		margin-left: 0.73rem;
	}

	.uf-steps {
		max-width: 115.72rem;
		margin-top: 6.61rem;
	}

	.uf-step::before {
		top: 0.09rem;
	}

	.uf-step::after {
		top: 1.69rem;
	}

	.uf-step {
		padding-bottom: 2.96rem;
	}

	.uf-step + .uf-step {
		margin-top: 3.51rem;
	}

	.uf-step-num {
		width: 6.66rem;
		font-size: 4rem;
	}

	.uf-step-title {
		font-size: 2.8rem;
	}

	.uf-step-text {
		margin-top: 1.11rem;
		font-size: 1.8rem;
		line-height: 2.9rem;
	}

	/* CTA: 帯の上に余白を足し、人物イラストと本文を横並びにする */

	.ct {
		padding-top: 4rem;
		margin-bottom: 80px;
	}

	/*
	 * 帯の下パディングは0のまま(PCはイラストの下端が帯の下端に接する形)。
	 * パンくずとの間隔は `.ct` の margin-bottom(トークン)で作る。
	 */

	.ct-band {
		padding-block: 4.6rem 0;
	}

	.ct-inner {
		display: flex;
		gap: 2rem;
		align-items: flex-start;
	}

	.ct-illust {
		display: block;
		flex: none;
		width: 20rem;
		max-width: none;
		height: 24.19rem;
		margin-top: 2.01rem;
	}

	.ct-body {
		flex: 1 1 0;
		min-width: 0;
	}

	.ct-catch::before,
	.ct-catch::after {
		width: 2rem;
		height: 2rem;
	}

	.ct-catch-text {
		font-size: 2rem;
	}

	.ct-title {
		margin-top: 0.6rem;
		font-size: 3.2rem;
		line-height: 5.12rem;
	}

	.ct-title-mark {
		padding-bottom: 0.5rem;
		background-size: 100% 0.8rem;
	}

	.ct-br {
		display: none;
	}

	.ct-btns {
		display: flex;
		gap: 3.2rem;
		margin-top: 2.38rem;
	}

	.ct-btn-group {
		flex: 1 1 0;
	}

	.ct-btn-group + .ct-btn-group {
		margin-top: 0;
	}

	.ct-btn {
		height: 8.2rem;
		font-size: 2rem;
		border-radius: 4rem;
	}

	/* FAQ: 縦積みのまま文字サイズと余白をPC値へ */

	.fq-inner {
		padding-block: 8.02rem 2.33rem;
	}

	.fq-title {
		font-size: 4rem;
	}

	.fq-list {
		margin-top: 3.99rem;
	}

	.fq-item {
		padding-top: 3.6rem;
	}

	.fq-item + .fq-item {
		margin-top: 2.33rem;
	}

	.fq-summary {
		padding-right: 3.2rem;
	}

	.fq-summary::before,
	.fq-summary::after {
		top: 0.81rem;
		right: 0.8rem;
	}

	/* Q/A の下げはSP専用。PCはベースライン揃えのままにする */

	.fq-mark,
	.fq-mark.-a {
		top: 0;
	}

	.fq-mark {
		width: 5.51rem;
	}

	.fq-question {
		font-size: 2rem;
		line-height: 3.2rem;
	}

	.fq-answer {
		padding-right: 3.2rem;
		margin-top: 3.26rem;
	}

	.fq-answer-text {
		font-size: 1.8rem;
		line-height: 2.9rem;
	}

	/*
	 * 追従CTAをPC版(.cf-bar)へ入れ替える帯。
	 *
	 * 768〜1199pxは rem がvw連動なので、バー幅は幅に関わらず常に105.2rem
	 * (=108rem − 左右1.4rem×2)になる。一方 Figma の寸法をそのまま使うと
	 * 「コピー47.43 + gap4.18 + ボタン群61.2 + 閉じるボタンの逃げ8 = 120.8rem」で15.6rem足りず、
	 * タイトルが2行に折り返して閉じるボタンとボタン群が重なる。
	 * そこでこの帯では文字と固定幅を一段落として収める(タイトル2rem / ボタン25rem など。計102.9rem)。
	 * 1200px以上で rem が10px固定になり幅の余裕ができるので、そちらでFigma値へ戻す。
	 */

	.cf {
		display: none;
	}

	/*
	 * バーの高さ11.9rem + 下の余白1.4rem。SP版と同じく body 側に逃げを持たせる
	 * (共通フッターはJSが差し込む要素で、取得できない環境ではDOMごと消えるため)。
	 * 閉じたあとは JS が body に .is-cf-bar-closed を付けて余白を戻す。
	 */

	body {
		padding-bottom: 13.3rem;
	}

	body.is-cf-bar-closed {
		padding-bottom: 0;
	}

	/*
	 * 共通の #page_top(main.css: fixed / bottom:10rem / z-index:1000)は、
	 * SP版の帯(高さ7.2rem)とは重ならないが、PC版のバー(下から13.3rem)とは重なり、
	 * z-index も向こうが上なので閉じるボタンが押せなくなる。
	 * バーが出ている間だけ、バーの上へ逃がす(閉じれば元に戻る)。
	 */

	body.is-cf-bar-shown #page_top {
		bottom: 14.7rem;
	}

	.cf-bar {
		position: fixed;
		right: 1.4rem;
		bottom: 1.4rem;
		left: 1.4rem;
		z-index: var(--fk-z-follow-cta);
		display: block;
		visibility: hidden;
		max-width: 136rem;
		margin-inline: auto;
		background-color: #fff;
		border-radius: 1.2rem;
		box-shadow: var(--fk-cf-bar-shadow);
		opacity: 0;
		transform: translateY(1.6rem);

		/* 動かすのは opacity と transform だけに留める(css.md) */
		transition:
			opacity 300ms ease-out,
			transform 300ms ease-out,
			visibility 300ms;
	}

	.cf-bar.is-shown {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	/*
	 * コピーとボタン群をひとまとめに中央寄せする。
	 * Figmaは「コピー468 + gap41.8 + ボタン群612 = 1121.8」がバー1360の中央に来る配置で、
	 * 左右の余白(121.3 / 116.9)は中央寄せの結果とほぼ一致する。
	 */

	.cf-bar-inner {
		position: relative;
		display: flex;

		/*
		 * gapを固定すると、バーが狭いときに中央寄せの結果ボタン群が右へ寄って
		 * 右上の閉じるボタン(右端から4rem)に重なる。中央寄せなので逃げは左右**両方**に要る。
		 * この帯の寸法「コピー39.52 + ボタン群51.2 + 逃げ4×2 = 98.72rem」を先に確保し、
		 * 余りをgapへ回して4.18remで頭打ちにする(css.md「余りを分配する値は min() で頭打ち」)。
		 */
		gap: min(4.18rem, calc(100% - 98.72rem));
		align-items: center;
		justify-content: center;
		height: 11.9rem;
	}

	.cf-bar-copy {
		text-align: center;
	}

	/* 「＼ 〜 ／」はCTAセクションと同じ意匠。斜線は20pxの正方形の対角線 */

	.cf-bar-catch {
		display: flex;
		gap: 0.9rem;
		align-items: center;
		justify-content: center;
	}

	.cf-bar-catch::before,
	.cf-bar-catch::after {
		flex: none;
		width: 2rem;
		height: 2rem;
		content: "";
	}

	.cf-bar-catch::before {
		background: linear-gradient(
			to bottom left,
			transparent calc(50% - 0.5px),
			var(--fk-lc-text) calc(50% - 0.5px),
			var(--fk-lc-text) calc(50% + 0.5px),
			transparent calc(50% + 0.5px)
		);
	}

	.cf-bar-catch::after {
		background: linear-gradient(
			to bottom right,
			transparent calc(50% - 0.5px),
			var(--fk-lc-text) calc(50% - 0.5px),
			var(--fk-lc-text) calc(50% + 0.5px),
			transparent calc(50% + 0.5px)
		);
	}

	/* 行ボックスの高さを斜線(20px)に揃えるため line-height は 1 にする */

	.cf-bar-catch-text {
		/* この帯は幅が足りないため一段落とす(1200pxでFigmaの1.6remへ戻す) */
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 1;
		color: var(--fk-color-text-dark);
		letter-spacing: 0.04em;
	}

	.cf-bar-title {
		margin-top: 0.9rem;

		/* 19文字 × 2rem × 1.04 = 39.52rem。2.4remだと1行に収まらない */
		font-size: 2rem;
		font-weight: 700;
		line-height: 1;
		color: var(--fk-color-text-dark);
		letter-spacing: 0.04em;
	}

	/*
	 * マーカーは inline の background。background box の高さは font-size そのものなので、
	 * padding-bottom で箱を下へ広げてから下端に敷く(css.md)。inline の padding-block は行の高さに影響しない。
	 */

	.cf-bar-title-mark {
		color: var(--fk-color-cta-green-tag);
		background-image: linear-gradient(var(--fk-hero-lead-underline), var(--fk-hero-lead-underline));
		background-repeat: no-repeat;

		/*
		 * inline の background box の下端は font-size ではなくフォントのディセント下(24pxに対し実測35px)。
		 * そのまま 100% に敷くと Figma より7px下がるので、差分を calc で持ち上げる。
		 * padding-bottom で広げる手もあるが、この面は箱を広げる必要がないため位置だけで合わせる。
		 */
		background-position: 0 calc(100% - 0.29rem);
		background-size: 100% 0.5rem;
	}

	.cf-bar-btns {
		display: flex;
		flex: none;
		gap: 1.2rem;
	}

	/* ラベルはボタン上端から15pxはみ出す。その分を padding で確保して、ラベル込みで垂直中央にする */

	.cf-bar-group {
		position: relative;
		padding-top: 1.5rem;
	}

	.cf-bar-label {
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 1;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 17rem;
		height: 2.49rem;
		font-size: 1.1rem;
		font-weight: 700;
		line-height: 1.6;
		color: var(--fk-color-cta-green-tag);
		letter-spacing: 0.04em;
		background-color: var(--fk-color-cta-tag-bg);
		border-radius: 1.245rem;
		filter: drop-shadow(var(--fk-balloon-shadow));
		transform: translateX(-50%);
	}

	.cf-bar-label::after {
		position: absolute;
		top: 100%;
		left: 50%;
		width: 0;
		height: 0;
		content: "";
		border-color: var(--fk-color-cta-tag-bg) transparent transparent;
		border-style: solid;
		border-width: 0.48rem 0.395rem 0;
		transform: translate(-50%, -0.19rem);
	}

	.cf-bar-btn {
		position: relative;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 25rem;
		height: 5.6rem;
		padding-inline: 2rem 4rem;

		/* 「資料請求・お問い合わせ」11文字 × 1.4rem × 1.04 + padding6rem = 22.02rem ≦ 25rem */
		font-size: 1.4rem;
		font-weight: 700;
		line-height: 1.4;
		color: var(--fk-color-cta-btn-text);
		text-align: center;
		letter-spacing: 0.04em;
		border-radius: 2.8rem;
		box-shadow: var(--fk-btn-shadow);
	}

	/* ホバーの見え方は Hero の `.hero-btn` と揃える */

	.cf-bar-btn:hover {
		opacity: 0.7;
	}

	.cf-bar-btn.-apply {
		background-color: var(--fk-color-cta-green);
	}

	.cf-bar-btn.-contact {
		background-color: var(--fk-color-cta-orange);
	}

	.cf-bar-btn-icon {
		position: absolute;
		top: 50%;
		right: 1.6rem;
		width: 1.6rem;
		height: 1.6rem;
		transform: translateY(-50%);
	}
}

/*
 * FigmaのPC座標(container 1180px基準)を「その数値のまま」使えるのはこの帯だけなので、
 * 幅がFigmaの実測値に一致していないと成立しない指定をここに置く。
 *
 * 境界が1400pxなのは、`.container` の内容幅を 84.2857vw(=1180/1400)にしているため。
 * 1400pxちょうどで 84.2857vw = 1180px = 118rem になり、そこで初めてFigmaの実測値と一致する。
 * それ未満では container がFigmaより狭いので、固定幅・絶対座標は左右へ突き抜ける。
 *
 * ただし「この帯より下は縦積み」という意味ではない。
 * 768〜1399pxは container 幅に対する相対で組めばPCの構図をそのまま等比縮小できる
 * (flex の等分・grid・right/bottom 基準の絶対配置・container 幅から算出する gap)。
 * Problem / ServiceMenu / DailyOperation / Price / LocalConnection はその形にしてあり、
 * SPレイアウトは767px以下だけになっている。
 */

@media screen and (min-width: 1400px) {
	/*
	 * Hero: この帯は container が 1180px で頭打ちになり、以降は中央寄せされるだけなので
	 * KVもFigmaのPC座標の等倍に固定する。768px側の等比縮小(デザイン幅比)をここで打ち消す。
	 *
	 * `--hu` は `min()` で自分から1remに頭打ちするのでここでの打ち消しは要らないが、
	 * `--kv-scale` / `left` は自分で頭打ちしないためこのブロックが必要になる。
	 * このメディアクエリの 1400 は `--fk-design-width` と同じ値。
	 * **メディアクエリの条件にカスタムプロパティは使えない**ので、ここだけ数値のまま持つ。
	 * デザイン幅を変えるときは :root のトークンとこの2箇所(下の .hero-kv 1400px も)を必ず一緒に直す。
	 */

	.hero-kv {
		--kv-scale: 1;

		left: 617.9px;
	}

	/*
	 * Problem: カード幅をFigmaの固定値(38rem×3 + gap1.6rem×2 = 117.2rem)に戻す。
	 * container が 118rem になるのはこの帯だけで、768〜1399pxでは等分(768px側の flex:1)にしている。
	 * 背景装飾の高さもPCレイアウトのセクション高に合わせた固定値なのでここに置く。
	 */

	.problem-bg {
		height: 52.4rem;
	}

	.problem-card {
		flex: none;
		width: 38rem;
		padding-inline: 4rem;
	}

	/*
	 * container が 118rem に戻り、見出しはFigmaと同じ行数に収まる。
	 * 768px側で入れた折り返し対策(行長を均す / リーフのインライン化)をここで解除し、
	 * PCの折り返し位置をFigmaのままにする。
	 */

	.problem-card-title {
		display: flex;
		text-align: start;
		text-wrap: wrap;
	}

	.solution-card-title,
	.oc-card-title {
		text-wrap: wrap;
	}

	/*
	 * 導入事例カードはデザイン幅で380px上限にする。
	 * 768px側は `flex: 1 1 0` で container を2枚で分けているため、
	 * デザイン幅では1枚578pxまで伸びて写真も間延びする。
	 * 上限を付けると2枚+gapで78.4remになり container(118rem)に余りが出る。
	 * 余りは右側にまとめ、カード列は container の**左端**に揃える
	 * (見出し以外のセクションと同じ、左基準の並び)。
	 */

	.oc-cards {
		justify-content: flex-start;
	}

	.oc-cards .oc-card {
		max-width: 38rem;
	}

	.problem-card-leaf {
		margin-left: 0;
		vertical-align: baseline;
	}

	/* Figmaでは142x140を(1157,445)に配置。container(左端130px)基準に置き換えている */

	.problem-illust {
		top: 36.8rem;
		right: auto;
		bottom: auto;
		left: 102.7rem;
		width: 14.2rem;
		height: 14rem;
	}

	/* container が 118rem になり、カード幅 37.73rem + gap 2.4rem がFigmaと一致する。数字も64pxに戻せる */

	.pr-plan-price-num {
		font-size: 6.4rem;
	}

	/*
	 * ① アプリ紹介(1180px以上): スマホを中央に置き、吹き出し6つを左右に絶対配置する。
	 * Figmaが吹き出しごとにx位置をずらしているため、フローでは再現できない。
	 * 座標は container(Figma x130) と吹き出し群の上端(Figma y3283.9) を原点にした相対値。
	 */

	/* 768px側の grid / display:contents をここで解除して、Figmaの絶対座標に切り替える */

	.sm-app {
		position: relative;
		display: block;
		height: 41rem;
		margin-top: 3.86rem;
	}

	.sm-balloons {
		display: block;
	}

	.sm-balloon {
		position: absolute;
		top: 0;
		width: 33.61rem;

		/* 768px側で幅の上限にしている33.61remを外す(-skillの34.61remが制限されてしまうため) */
		max-width: none;
		min-height: 11.9rem;

		/* padding は768px側(本体基準の左右2rem + しっぽ補正)をそのまま引き継ぐ */
	}

	.sm-balloon + .sm-balloon {
		margin-top: 0;
	}

	.sm-balloon.-skill,
	.sm-balloon.-health,
	.sm-balloon.-life {
		min-height: 11.9rem;
	}

	.sm-balloon.-event {
		left: 12.56rem;
	}

	.sm-balloon.-leisure {
		left: 72.84rem;
		width: 32.31rem;
	}

	.sm-balloon.-daily {
		top: 14.6rem;
		left: 8.06rem;
	}

	.sm-balloon.-skill {
		top: 14.6rem;
		left: 75.33rem;
		width: 34.61rem;
	}

	.sm-balloon.-health {
		top: 29.1rem;
		left: 12.56rem;
		width: 33.6rem;
	}

	.sm-balloon.-life {
		top: 29.1rem;
		left: 71.85rem;
		width: 33.3rem;
	}

	.sm-balloon-title {
		gap: 0.55rem;
		font-size: 2rem;
	}

	.sm-balloon.-event .sm-balloon-icon,
	.sm-balloon.-daily .sm-balloon-icon {
		width: 2.8rem;
		height: 2.8rem;
	}

	.sm-balloon-text {
		margin-top: 0.25rem;
		font-size: 1.6rem;
		line-height: 1.375;
	}

	.sm-app-screen {
		position: absolute;
		top: 1.65rem;
		left: 49.96rem;
		width: 19.3rem;
		height: 37.12rem;
		margin: 0;
	}
}

/*
 * LocalConnection だけは境界が 1180px のまま。
 *
 * このセクションは `.container` を使わず、ブロブもカードも自前の幅で組んでいるため、
 * 上の「内容 84.2857vw」の影響を受けない。切り替えの基準になるのは rem の定義が
 * vw連動から10px固定に変わる 1180px の方で、そこを境に px 座標へ戻すと
 * 1179px(ブロブ1110.3px)と1180px(1111.25px)が連続する。
 *
 * ブロブと4体のイラストはFigmaの1440pxアートボードの座標(px)。
 * ラッパは1440px固定幅の中央寄せにして、はみ出しは .lc の overflow:hidden で切る。
 * left:170.1px をビューポート基準にすると、1180px幅ではブロブの右101pxが欠ける。
 * セクション高さはFigmaの1389pxを min-height で確保する(コンテンツ実高は1106.2px)。
 */

@media screen and (min-width: 1180px) {
	.lc {
		min-height: 1389px;
		padding-bottom: 0;
	}

	.lc-bg-wave.-top {
		height: 337px;
	}

	.lc-bg-wave.-bottom {
		height: 253px;
	}

	.lc-deco {
		top: 0;
		width: 1440px;
		height: 100%;
		margin-left: -720px;
		transform: none;
	}

	.lc-blob {
		top: 102.2px;
		left: 170.1px;
		width: 1111.25px;
		height: 1166.32px;
	}

	.lc-deco-item.-store {
		top: 162.5px;
		left: 342.1px;
		width: 147px;
		height: 155.11px;
	}

	.lc-deco-item.-friends {
		top: 182.2px;
		left: 891.8px;
		width: 129.73px;
		height: 135.59px;
	}

	.lc-deco-item.-alone {
		top: 1099.6px;
		left: 302px;
		width: 123.07px;
		height: 135.47px;
	}

	.lc-deco-item.-car {
		top: 1128.6px;
		left: 892px;
		width: 147.12px;
		height: 116.25px;
	}

	.lc-card {
		margin-top: 28.16rem;
	}
}

/*
 * 追従CTA(PC)をFigmaの寸法へ戻す帯。
 *
 * 1200px以上では rem が10px固定になり、バー幅が
 * 「コピー47.43 + gap4.18 + ボタン群61.2 + 閉じるボタンの逃げ8 = 120.8rem」を上回るので、
 * 768px側で一段落としていた文字・固定幅をFigmaの実測値に戻す。
 * 1200pxで切るのは、中央寄せの逃げが左右両方に要るため成立するのが1194.3px以上だから。
 */

@media screen and (min-width: 1200px) {
	.cf-bar-inner {
		gap: min(4.18rem, calc(100% - 116.63rem));
	}

	.cf-bar-catch-text {
		font-size: 1.6rem;
	}

	.cf-bar-title {
		margin-top: 1.1rem;
		font-size: 2.4rem;
	}

	.cf-bar-title-mark {
		background-position: 0 calc(100% - 0.35rem);
		background-size: 100% 0.6rem;
	}

	.cf-bar-label {
		width: 19.92rem;
		font-size: 1.2rem;
	}

	.cf-bar-btn {
		width: 30rem;
		font-size: 1.6rem;
	}
}