@charset "UTF-8";
/* ==========================================================================
   まるまる経理 - 共通コンポーネント (Figma正本: y4wLGKghFkbChozYIrOo0B)
   Figmaフレーム階層と1:1マッピングする骨格部品
   ========================================================================== */

/* ===========================================================
   セクションラッパ (.section)
   Figmaの各セクションFRAME (例: 487:4469) に対応
   - data-bg で背景レイヤー切替
   - data-py で縦パディング切替
   =========================================================== */
.section {
	position: relative;
	padding-block: var(--section-py-std);
	padding-inline: 10px;
	overflow: hidden;
}

.section[data-py="problems"] { padding-block: var(--section-py-problems); }
.section[data-py="footer"]   { padding-block: var(--section-py-footer); }
.section[data-py="header"]   { padding-block: 16px; }

/* 背景バリアント */
.section[data-bg="white"] { background: var(--color-bg); }
.section[data-bg="mint"]  { background: var(--color-bg-mint-lightest); }
.section[data-bg="green"] { background: var(--color-primary); color: #fff; }

/* bg_note: Figma 487:4290 罫線パターンを背景にrepeat
   実画像は 1440×1242 PNG@2x (ファイル横幅 2880px) → 表示サイズ 1440px に縮小 */
.section[data-bg="note-white"] {
	background-color: var(--color-bg);
	background-image: url('../../img/front/figma/bg-note-487-4290@2x.png');
	background-size: 1440px auto;
	background-position: center top;
	background-repeat: repeat;
}
.section[data-bg="note-mint"] {
	background-color: var(--color-bg-mint-lightest);
	background-image: url('../../img/front/figma/strengths-bgnote-487-6968@2x.webp');
	background-size: 1440px auto;
	background-position: center top;
	background-repeat: repeat;
}

/* ===========================================================
   コンテナ (.container)
   Figmaの "About section container" / "Section container" / "Content container" 等の
   max-width を表現
   =========================================================== */
.container {
	width: 100%;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}
.container[data-cw="std"]    { max-width: var(--cw-std); }     /* 1000px */
.container[data-cw="narrow"] { max-width: var(--cw-narrow); }   /* 840px  */
.container[data-cw="full"]   { max-width: var(--cw-full); }     /* 1440px */

/* ===========================================================
   見出し (.heading)
   Figma h2 (487:4490 等): Zen Kaku Gothic / 32px / 700 / line 1.5
   =========================================================== */
.heading-2 {
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--color-text);
	text-align: center;
}
.heading-2 .accent { color: var(--color-primary); }
.heading-2 .underline {
	background: linear-gradient(transparent 60%, rgba(255, 198, 48, .55) 60%);
	padding: 0 .08em;
}

.lead {
	font-size: 16px;
	line-height: 1.9;
	color: var(--color-text);
	text-align: center;
}

/* ===========================================================
   ボタン .btn-yellow
   Figma 487:4940 (Hero btn 300×72) / 487:4669 (料金 btn 500×72) /
   487:4732 (流れ btn 500×72) / 487:4790 (CTA btn 500×72)
   共通: 黄色pill, padding 17/18 (sm) or 22/24 (lg), 影
   =========================================================== */
.btn-yellow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: var(--color-accent);
	color: var(--color-text-warm);
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.04em;
	border-radius: var(--radius-pill);
	padding: 17px 18px;
	box-shadow: var(--shadow-md);
	min-width: 300px;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
	cursor: pointer;
	border: none;
	line-height: 1;
}
.btn-yellow::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--color-text-warm);
	border-top: 2px solid var(--color-text-warm);
	transform: rotate(45deg);
	margin-left: 4px;
	transition: transform .25s ease;
}
.btn-yellow:hover {
	background: var(--color-accent-warm);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(61, 91, 98, .25);
}
.btn-yellow:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.btn-yellow--lg {
	padding: 22px 24px;
	min-width: 500px;
	font-size: 20px;
}

/* ===========================================================
   カード共通 .card
   Figma の 521:2150 (About card) や Voice カード等
   =========================================================== */
.card {
	background: var(--color-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: 24px;
}

/* About 3カード: 323×427 / pad 32/16 / gap 8 / bg #E9F1EE (Figma 521:2150) */
.card--feature {
	background: var(--color-bg-mint-lightest);
	padding: 32px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: none;
}

/* お悩み: 6カード × 白 / 数字+本文 (Figma 487:4400内のカード) */
.card--problem {
	background: var(--color-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ===========================================================
   バッジ (Hero緑帯下: Figma 487:5150)
   white check icon (22×22 ellipse) + 黄チェック + 白文字
   =========================================================== */
.badge-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-family: var(--font-base);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
}
.badge-check__icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.badge-check__icon::before {
	content: "";
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--color-accent);
	border-bottom: 2px solid var(--color-accent);
	transform: rotate(-45deg) translate(1px, -1px);
}

/* ===========================================================
   黄アンダーライン (487:4488/4489: Highlight line 332×10 / 265×10)
   ハイライトをテキスト下に当てる装飾
   =========================================================== */
.has-yellow-underline {
	background-image: linear-gradient(transparent 65%, var(--color-accent) 65%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 0 .08em;
}