@charset "UTF-8";

/* ================================================================
   ORIGINAL CALENDAR | form-page.css
   フォームページ専用CSS（base.css の後に読み込む）
   ----------------------------------------------------------------
   - 読み込むのは「導入コピー＋埋め込みフォーム」だけで組み立てた下層ページ
     （request-sample/ ・ inquiry/ など）。
   - セクションの枠・2カラム・iframe は base.css の「12. Contact」を
     そのまま使う（TOPの最終CTAと同じコンポーネント）。
     このファイルは、その左カラムに足す要素だけを持つ。
   - 色 / 余白 / フォントサイズは base.css の変数を使い、直値を書かない。
   ================================================================ */


/* ============================================================
   Form Page（導入コピー側の追加要素）
   ============================================================ */

/* 下層ページでは h1 がページ見出しになる。
   TOPの h2（--font-size-xl / 768px以上 2xl）と同じ見え方に揃える。 */
.p-form-page__title {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-heading);
	color: var(--color-text-main);
}

/* 導入コピー直下の写真。角丸は最小限、影は付けない */
.p-form-page__media {
	margin-top: var(--space-lg);
}

.p-form-page__media img {
	width: 100%;
	aspect-ratio: 2 / 1;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-md);
}


/* ---- 用紙の特徴 ---------------------------------------------- */
/* カード化せず縦積み。見出し左のチェックはCSSの疑似要素で描く */
.p-form-page__features {
	display: grid;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

/* チェックの幅ぶんだけ字下げする。見出しと本文の双方に同じ値を入れて
   1文字目の位置を揃える。 */
.p-form-page__feature-title {
	position: relative;
	padding-left: var(--space-md);
	font-size: var(--font-size-md);
	font-weight: 600;   /* 明朝体は同じ太さでも細く見えるため一段上げる */
	line-height: var(--line-height-heading);
	color: var(--color-text-main);
}

.p-form-page__feature-title::before {
	content: "\2713";   /* ✓ */
	position: absolute;
	left: 0;
	color: var(--color-primary);
}

.p-form-page__feature-text {
	margin-top: var(--space-xs);
	padding-left: var(--space-md);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-heading);
	color: var(--color-text-sub);
	text-wrap: pretty;
}


/* ============================================================
   Form Page : SP（max-width 767px）
   ------------------------------------------------------------
   フォームだけの下層ページなので、セクションの上下余白は取らない
   （TOPの最終CTAと違い、前後に別のセクションが無いため）。
   ============================================================ */
@media (max-width: 767px) {

	.p-form-page {
		padding-block: 0;
	}
}


/* ============================================================
   Form Page : PC（min-width 1024px）
   base.css 側で左カラムが40%幅になるタイミングに合わせる
   ============================================================ */
@media (min-width: 1024px) {

	.p-form-page__title {
		font-size: var(--font-size-2xl);
	}
}