/* =============================================================
   area-content.css：エリアページに足した3コンテンツ（選び方／補助金／よくある質問）
   読み込み＝inc/area-content.php の hikaku_ac_assets()。エリアページだけに出す。

   ⛔ 決まりごと
    ・左線（border-left）は1本も使わない。状態と階層は背景色で表す。
    ・角丸は 5px。
    ・階層を作るのは3つだけ＝①文字の大きさ（24 → 18 → 15）
      ②背景色（なし → うすい緑の帯 → 番号の四角だけ）③上の余白（44 → 34 → 15px）。
    ・⛔ 装飾のために見出しレベルを選ばない。タグは意味で決めて、見え方はここだけで作る。
    ・クラス接頭辞は ac-（見積もりの gm- ／絞り込みの hf- とは分ける＝足跡を揃えない）。
    ・緑は、このサイトが一括見積もりで既に使っている #2f7d4f にそろえてある。
      ⛔ 記事執筆ルールの「緑を使わない」は瓦匠・ヤネタス（ネイビー＋オレンジ）の話。
         同じページの中で色を変えるとちぐはぐになるので、ここはサイトの色に合わせる。
   ============================================================= */

/* --- 見出しの下の画像 --- */
.ac-figure {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 5px;
	margin: 2px 0 20px;
}

/* --- 地の文（⛔ ボックスで囲まない） --- */
.ac-sec {
	font-size: 15.5px;
	line-height: 1.95;
	color: #333;
	margin: 0 0 6px;
}

.ac-sec p {
	margin: 0 0 16px;
}

.ac-sec b {
	font-weight: 700;
	color: #24603c;
}

/* --- 見出しの階層 ---------------------------------------------
   H2 ＝サイト共通の .section-heading（19〜24px・左の緑グラデ帯はサイト既存の意匠）。触らない。
   H3 ＝ここ。うすい緑の帯を敷いて「見出しである」ことを見た目でも示す。
        ⛔ 左線は使わない。
   ⛔ スマホではH2が19pxまで縮むので、H3も16pxまで下げて差を保つ。 */
.ac-h3 {
	font-size: 18px;
	font-weight: 800;
	color: #24603c;
	margin: 34px 0 12px;
	padding: 9px 14px;
	background: #f4faf5;
	border-radius: 5px;
	border: 0;
	/* 冒頭のリストから飛んできたとき、見出しが画面の上端に貼りつかないようにする。
	   このサイトに上部固定ヘッダーは無い（実測）ので、余白の確保だけが目的。 */
	scroll-margin-top: 20px;
}

.ac-h3:first-of-type {
	margin-top: 22px;
}

/* --- H3の中身の項目（工事内容の見どころ） ---
   ⛔ 番号は残す。並びは「対応社数の多い順」＝順番に意味があるため。 */
.ac-terms {
	counter-reset: t;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.ac-terms li {
	counter-increment: t;
	position: relative;
	padding: 0 0 0 36px;
	margin: 0 0 15px;
}

.ac-terms li::before {
	content: counter(t);
	position: absolute;
	left: 0;
	top: 4px;
	width: 23px;
	height: 23px;
	border-radius: 5px;
	background: #eaf3ec;
	color: #2f7d4f;
	font-size: 12.5px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.ac-term {
	display: block;
	font-weight: 700;
	font-size: 15px;
	color: #2f7d4f;
	margin: 0 0 2px;
}

/* --- 番号を出さない項目（補助金の4つのケース） ---
   ⛔ 順位ではなく説明の順なので、番号ではなく点にする。 */
.ac-cases {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.ac-cases li {
	position: relative;
	padding: 0 0 0 22px;
	margin: 0 0 15px;
}

.ac-cases li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 11px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7bc687;
	pointer-events: none;
}

/* --- 冒頭の「確認する5つ」（H2直下の答えを、文ではなくリストで出す） ---
   各項目は、下の対応するH3への飛び先リンク。⛔ JSは使わない（ただのページ内リンク）。
   ⛔ リンクの文言はキーワードを含む項目名のまま（「こちら」にしない）。
   ⛔ スマホで押しやすいよう、行まるごとをリンクにして高さ44px以上を確保する。 */
.ac-points {
	counter-reset: p;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.ac-points li {
	counter-increment: p;
	margin: 0 0 7px;
}

.ac-points a {
	display: flex;
	align-items: center;
	min-height: 46px;
	position: relative;
	padding: 9px 34px 9px 46px;
	background: #f7faf8;
	border-radius: 5px;
	color: #24603c;
	text-decoration: none;
}

.ac-points a::before {
	content: counter(p);
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border-radius: 5px;
	background: #2f7d4f;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* 右端の下向き矢印＝「このページの下に飛ぶ」の合図。
   ⛔ 左線に見えないよう、right と bottom の枠線だけで作る。 */
.ac-points a::after {
	content: "";
	position: absolute;
	right: 14px;
	top: calc(50% - 5px);
	width: 8px;
	height: 8px;
	border-right: 2px solid #7bc687;
	border-bottom: 2px solid #7bc687;
	transform: rotate(45deg);
	pointer-events: none;
}

.ac-points a:hover,
.ac-points a:focus-visible {
	background: #eaf3ec;
	text-decoration: underline;
}

/* --- 番号つきの手順（補助金の調べ方3ステップ） --- */
.ac-steps {
	counter-reset: s;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.ac-steps li {
	counter-increment: s;
	position: relative;
	padding: 0 0 0 38px;
	margin: 0 0 14px;
}

.ac-steps li::before {
	content: counter(s);
	position: absolute;
	left: 0;
	top: 3px;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	background: #2f7d4f;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* --- 裏の取れた自治体の制度（状態は背景色で表す・枠線は付けない） --- */
.ac-verified {
	background: #f4faf5;
	border-radius: 5px;
	padding: 14px 16px;
	margin: 0 0 18px;
}

.ac-verified p {
	margin: 0;
	font-size: 14.5px;
}

.ac-verified-t {
	font-weight: 800;
	color: #24603c;
	margin: 0 0 5px !important;
}

.ac-verified a {
	word-break: break-all;
}

/* --- 注意書き（「ここに書いていない制度もあります」） --- */
.ac-note {
	background: #fdf3e3;
	border-radius: 5px;
	padding: 14px 16px;
	margin: 18px 0 0;
	font-size: 14px;
}

.ac-asof {
	font-size: 13px;
	color: #777;
	margin: 14px 0 0 !important;
}

.ac-src {
	font-size: 13px;
	color: #777;
}

.ac-src a {
	word-break: break-all;
}

/* --- FAQ：質問1つにつき1つのボックス（⛔ 全体は囲まない） ---
   ⛔ 答えは最初から見えている形にする（開閉のJSは使わない）。 */
.ac-faq-list {
	margin: 0 0 6px;
}

.ac-faq {
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 5px;
	padding: 16px 18px;
	margin: 0 0 10px;
}

.ac-faq-q {
	position: relative;
	padding-left: 34px;
	margin: 0 0 10px;
	font-weight: 700;
	font-size: 16px;
	color: #24603c;
	line-height: 1.7;
}

.ac-faq-q::before {
	content: "Q";
	position: absolute;
	left: 0;
	top: 1px;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	background: #eaf3ec;
	color: #2f7d4f;
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.ac-faq-a {
	position: relative;
	padding-left: 34px;
	margin: 0;
	font-size: 15px;
	line-height: 1.95;
	color: #333;
}

.ac-faq-a::before {
	content: "A";
	position: absolute;
	left: 0;
	top: 1px;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	background: #f0f4f1;
	color: #777;
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

@media (max-width: 720px) {
	.ac-sec {
		font-size: 15px;
	}

	.ac-faq {
		padding: 14px 15px;
	}

	.ac-faq-q {
		font-size: 15px;
	}

	/* スマホではH2が19pxまで縮むので、H3も下げて差を保つ */
	.ac-h3 {
		font-size: 16px;
		padding: 8px 12px;
		margin: 28px 0 10px;
		scroll-margin-top: 14px;
	}

	.ac-points a {
		padding: 9px 30px 9px 42px;
		min-height: 48px;
	}

	.ac-terms li {
		padding-left: 32px;
	}
}