@charset "utf-8";

/* ===== メールフォーム専用CSS ===== */
/* LP 共通変数（../css/variables.css）を参照 */
/* pc.css / sp.css は読み込まないため、フォームページに必要なレイアウトをここで定義 */


@media (max-width: 767px){
 /* 画面サイズが768px未満の場合の設定 */
 .disp_pc{
    display: none;
}
.disp_sp{
    display: block;
}
}
@media (min-width: 768px){
 /* 画面サイズが768px以上の場合の設定 */
 .disp_pc{
	display: block;
}
.disp_sp{
     display: none;
}
}

/* ===== フォームページ ヒーロー画像 ===== */

.form-hero {
	position: relative;
	height: 200px;
	overflow: hidden;
	width: 100%;
}

.form-hero-bg {
	position: absolute;
	width: 100%;
	height: 144%;
	top: -22%;
	left: 0;
	object-fit: cover;
}

@media (max-width: 768px) {
	.form-hero { height: 120px; }
}


/* ===== 宣伝帯 ===== */

.mv-promo-band {
	position: absolute;
	bottom: 23px;
	left: 0;
	right: 0;
	background: var(--color-mv-promo-bg);
	border-top: 1px solid var(--color-mv-promo-border);
	border-bottom: 1px solid var(--color-mv-promo-border);
	width: 100%;
	padding: 11px 48px;
	text-align: center;
}

.mv-promo-text {
	font-family: var(--font-sans-jp);
	font-weight: 900;
	font-size: 11.8px;
	color: var(--color-primary);
	letter-spacing: 2.36px;
	white-space: nowrap;
}

@media (max-width: 768px) {
	.mv-promo-band { padding: 10px 16px; }
	.mv-promo-text {
		font-size: 10px;
		letter-spacing: 1px;
		white-space: normal;
	}
}


/* ===== フォームページ基本レイアウト（PC）===== */

body {
	/* LPと同様、ヘッダーは画像の上に重ねて透過させるためオフセットなし */
	background: var(--color-bg-cream);
}

/* ヘッダー内レイアウト（pc.css より移植） */
.header-inner {
	display: flex;
	align-items: center;
	height: var(--header-height-pc);
	/* LP変数に置き換え: 1440px → var(--container-outer) */
	max-width: var(--container-outer);
	margin: 0 auto;
	padding: 0 32px 0 40px;
}

/* ロゴ横のサイト名（pc.css より移植） */
.header-site-name {
	font-family: var(--font-sans-jp);
	font-weight: 700;
	font-size: 14px;
	color: var(--color-text-dark);
	letter-spacing: 0.5px;
	white-space: nowrap;
}

/* common.css の .header-logo-img を PC 用に上書き */
  .header-logo-img {
    height: 36px;
    width: auto;
    margin-right: 20px;
    flex-shrink: 0; 
  }

/* ===== ステップインジケーター（お客様情報入力／入力内容ご確認／完了） ===== */

.form-stepper {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	max-width: 480px;
	margin: 0 auto;
	padding: 40px 24px 0;
	background: var(--color-bg-cream);
}

.form-stepper-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 72px;
}

.form-stepper-dot {
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 2px solid var(--color-text-light);
	background: var(--color-white);
}

.form-stepper-item.is-reached .form-stepper-dot {
	background: var(--color-text-dark);
	border-color: var(--color-text-dark);
}

.form-stepper-label {
	margin-top: 10px;
	font-family: var(--font-sans-jp);
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-dark);
	text-align: center;
	white-space: nowrap;
}

.form-stepper-label br {
	display: inline;
}

.form-stepper-line {
	flex: 0 0 40px;
	height: 1px;
	margin-top: 7px;
	background: var(--color-border);
}

@media (max-width: 768px) {
	.form-stepper {
		max-width: 100%;
		padding: 28px 16px 0;
	}

	.form-stepper-item {
		flex: 0 0 60px;
	}

	.form-stepper-label {
		font-size: 11px;
	}

	.form-stepper-label br {
		display: inline;
	}

	.form-stepper-line {
		flex: 0 0 24px;
	}
}


/* フォームセクション */
#form-section {
	padding: var(--space-md) 0 0;
}

#form-section .container {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 40px;
}

#form-section .section-heading {
	margin-bottom: 12px;
}

/* セクションタイトル（Figmaデザイン: 32px / letter-spacing 1.28px） */
#form-section .section-title {
	font-size: 32px;
	letter-spacing: 1.28px;
	margin-top: 8px;
}

/* リード文（Figmaデザイン: 13.5px / Medium） */
#form-section .section-subtitle {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--color-text-mid);
	margin-top: 12px;
}

/* フォーム下の見出し区切り線 */
#form-section .section-heading::after {
	content: '';
	display: block;
	width: 100%;
	max-width: 900px;
	margin: 24px auto 0;
	border-top: 1px solid var(--color-border-light);
}

/* 入力ヒントテキスト（漢字全角 / 全角カタカナ） */
.form-input-hint {
	display: inline-block;
	font-size: 12px;
	color: var(--color-text-light);
	margin-left: 8px;
	vertical-align: middle;
}

/* フッター（pc.css より移植） */
#site-footer {
	padding: 24px 0;
}

.footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* LP変数に置き換え: 1440px → var(--container-outer) */
	max-width: var(--container-outer);
	margin: 0 auto;
	padding: 0 40px;
}

  .footer-logo-img {
    height: 60px;
    width: 386px;    /* 追加：明示的に幅を指定 */
    min-width: 386px; /* 追加：最小幅を固定 */
    flex-shrink: 0; /* 追加：縮小を禁止 */
    margin-right: 20px;
  }

.footer-info {
	font-family: var(--font-sans-jp);
	font-size: 12px;
	color: var(--color-text-mid);
	text-align: right;
	line-height: 1.4;
}


/* ===== フォームページ基本レイアウト（SP: 768px 以下）===== */

@media screen and ( max-width: 768px ) {

	.header-inner {
		height: var(--header-height-sp);
		padding: 0 12px;
	}

	.header-logo-img {
		height: 13px;
	}

	/* SP: サイト名は非表示（ヘッダーが狭いため） */
	.header-site-name {
		display: none;
	}

	#form-section {
		padding: var(--space-lg) 0;
	}

	#form-section .container {
		padding: 0 var(--sp-padding);
	}

	.footer-inner {
		flex-direction: column;
		align-items: center;
		gap: 16px;
		padding: 0 var(--sp-padding);
	}

	.footer-info {
		text-align: center;
	}

}

/* ===== フォームフィールド（以下、元の mailform.css 内容）===== */


/* -- form#mail_form ============================================================= */
/* LP変数に統合: width: 1000px → max-width: var(--container-pc), margin: 50px → var(--space-lg) */
/* Figmaデザインに合わせ枠線・角丸・影を削除 */

form#mail_form * {
	margin: 0;
	padding: 0;
	box-sizing: content-box;
}

form#mail_form {
	max-width: 900px;
	width: 100%;
	box-sizing: border-box;
	margin: 16px auto var(--space-lg);
	background: var(--color-bg-cream);
	line-height: 1.8;
	font-family: var(--font-sans-jp);
}

form#mail_form dl {
	width: 100%;
	margin: 0 auto;
	/* section-subtitle 下線（.section-heading::after）と同じ幅になるよう、コンテナ基準の100%に統一 */
	/* LP変数に置き換え: #cccccc → var(--color-border-light) */
	border-bottom: 1px solid var(--color-border-light);
}

form#mail_form dl:after,
form#mail_form dl dt:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

form#mail_form dl dt {
	width: 33%;
	float: left;
	padding: 35px 0 25px;
	text-align: right;
}

form#mail_form dl dd {
	width: 62%;
	float: right;
	padding: 30px 0 25px 5%;
}

form#mail_form dl dt i {
	float: left;
	position: relative;
	top: -2px;
	font-style: normal;
}


/* -- 必須・任意バッジ ============================================================= */
/* Figmaデザイン: 背景色なし・枠線のみ・幅51px・高さ30px・フォント14px */
/* LP変数に置き換え: 必須 → var(--color-required) / 任意 → var(--color-text-mid) */
/* span.required / span.optional はJSのバリデーションが依存するため名前は変更不可 */

/* 必須・任意バッジ共通 */
form#mail_form dl dt span.required,
form#mail_form dl dt span.optional {
	display: inline-block;
	font-family: var(--font-sans-jp);
	font-size: 12px;
	background: none;
	border-radius: 0;
	padding: 1px 8px;
}

/* 必須バッジ */
form#mail_form dl dt span.required {
	color: var(--color-required);
	border: 1px solid var(--color-required);
}

/* 任意バッジ */
form#mail_form dl dt span.optional {
	color: var(--color-text-mid);
	border: 1px solid var(--color-text-mid);
}


/* -- エラーメッセージ（変更不可） ================================================= */
/* span.error_blank / .error_format / .error_match はJSが依存するため変更不可 */

/* LP変数に置き換え: #ff0000 → var(--color-error) */
form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match {
	display: block;
	color: var(--color-error);
	margin-top: 5px;
	font-size: 14px;
}


/* -- ローディング（変更不可） ===================================================== */
/* div.loading-layer / span.loading はJSが依存するため変更不可 */

div.loading-layer {
	width: 100vw;
	height: 100vh;
	background: rgba( 0, 0, 0, 0.7 );
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 10000;
}

span.loading {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgba( 255, 255, 255, 0.2 );
	border-right: 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom: 5px solid rgba( 255, 255, 255, 0.2 );
	border-left: 5px solid var(--color-white);
	-webkit-transform: translateZ( 0 );
	-ms-transform: translateZ( 0 );
	transform: translateZ( 0 );
	-webkit-animation: load-circle 1.0s linear infinite;
	animation: load-circle 1.0s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}

@-webkit-keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

@keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}


/* -- input, select, textarea ===================================================== */
/* LP変数に置き換え: border: #cccccc → var(--color-border), background: #fafafa → var(--color-white) */
/* Figmaデザイン: border-radius: 2px, height: 40px, padding: 0 16px */

form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"] {
	width: calc( 100% - 32px - 2px );
	height: 40px;
	padding: 0 16px;
	/* LP変数に置き換え */
	border: 1px solid var(--color-border);
	border-radius: 2px;
	background: var(--color-white);
	-webkit-appearance: none;
	font-size: 16px;
	font-family: var(--font-sans-jp);
	line-height: normal;
}

/* Figmaデザイン: プレースホルダー色（LP変数に置き換え: #ddd9d3 → var(--color-placeholder)） */
form#mail_form input[type="text"]::placeholder,
form#mail_form input[type="email"]::placeholder,
form#mail_form input[type="tel"]::placeholder {
	color: var(--color-placeholder);
}

/* LP変数に置き換え: #55ccff → var(--color-focus) */
form#mail_form input[type="text"]:focus,
form#mail_form input[type="email"]:focus,
form#mail_form input[type="tel"]:focus,
form#mail_form select:focus,
form#mail_form textarea:focus {
	box-shadow: 0px 0px 5px var(--color-focus);
	border: 1px solid var(--color-focus);
	background: var(--color-white);
	outline: none;
}

form#mail_form ul li input[type="radio"],
form#mail_form ul li input[type="checkbox"] {
	margin: 0 10px 0 0;
}

/* セレクトボックス矢印（class="select-wrapper" はJSが依存するため変更不可） */
form#mail_form div.select-wrapper {
	position: relative;
}

/* LP変数に置き換え: #666666 → var(--color-text-mid) */
form#mail_form div.select-wrapper:after {
	content: "";
	position: absolute;
	top: calc( 50% - 7px );
	right: 16px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--color-text-mid);
	border-bottom: 2px solid var(--color-text-mid);
	transform: rotate( 45deg );
}

form#mail_form select {
	width: calc( 100% - 2px );
	height: 40px;
	padding: 0 16px;
	/* LP変数に置き換え: border: #cccccc → var(--color-border), background: #f0f0f0 → var(--color-white) */
	border: 1px solid var(--color-border);
	border-radius: 2px;
	background: var(--color-white);
	-webkit-appearance: none;
	font-size: 16px;
	font-family: var(--font-sans-jp);
	line-height: normal;
	color: inherit;
	box-sizing: border-box;
}

form#mail_form select:hover {
	cursor: pointer;
}

form#mail_form textarea {
	display: block;
	width: calc( 100% - 32px - 2px );
	/* Figmaデザイン: 高さ210px（旧200px） */
	height: 210px;
	padding: 8px 16px;
	resize: vertical;
	/* LP変数に置き換え: border: #cccccc → var(--color-border), background: #fafafa → var(--color-white) */
	border: 1px solid var(--color-border);
	border-radius: 2px;
	background: var(--color-white);
	-webkit-appearance: none;
	font-size: 16px;
	font-family: var(--font-sans-jp);
	line-height: normal;
}


/* -- チェックボックス・ラジオボタンリスト ========================================== */

form#mail_form ul {
	list-style-type: none;
}

/* Figmaデザイン: シンプルなラベル表示（旧背景色・枠線装飾を削除） */
form#mail_form ul li label {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	font-family: var(--font-sans-jp);
	line-height: 1.6;
}

form#mail_form ul li:first-child label {
	margin-top: 0;
}

form#mail_form ul li label:hover {
	cursor: pointer;
}


/* -- 入力幅の個別指定 ============================================================ */

form#mail_form input[name="company"] {
	width: 70%;
}

form#mail_form input[name="name_1"],
form#mail_form input[name="name_2"],
form#mail_form input[name="read_1"],
form#mail_form input[name="read_2"],
form#mail_form input[name="postal"],
form#mail_form input[name="phone"],
form#mail_form input[name="schedule"] {
	width: 30%;
}

form#mail_form input[name="name_2"],
form#mail_form input[name="read_2"] {
	margin: 0 0 0 10px;
}


/* -- 住所自動入力ボタン（変更不可: class="postal_search_button" はJSが依存） ======= */
/* Figmaデザイン: 背景 #ddd9d3, テキスト var(--color-text-mid), padding: 10px 14px, 枠線なし */

/* Figmaデザイン: 背景 #ddd9d3（--color-placeholder と同値のため変数に置き換え） */
form#mail_form a.postal_search_button {
	display: inline-block;
	margin: 0 0 0 10px;
	padding: 10px 14px;
	border: none;
	border-radius: 0;
	background: var(--color-placeholder);
	font-size: 12px;
	font-family: var(--font-sans-jp);
	line-height: normal;
	color: var(--color-text-mid);
	text-decoration: none;
}

form#mail_form a.postal_search_button:hover {
	cursor: pointer;
	/* LP変数に置き換え: hover背景 → var(--color-border) */
	background: var(--color-border);
}


/* -- プライバシーポリシー・reCAPTCHAエリア ========================================= */

form#mail_form .form-privacy {
	width: 90%;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: var(--space-sm);
	margin-left: auto;
	font-family: var(--font-sans-jp);
	font-size: 14px;
	color: var(--color-text-mid);
	line-height: 1.8;
}

.form-privacy h3 {
	font-size: 16px;
	font-weight: 500;
	color: var(--color-text-dark);
	margin-bottom: var(--space-xs);
	margin-top: var(--space-md);
}

.form-privacy h3:first-child {
	margin-top: 0;
}

/* 「ご登録のメールアドレスについて」の上に1行分のスペースを追加 */
.form-privacy h3:nth-of-type(2) {
	margin-top: var(--space-lg);
}

.form-privacy a {
	color: #007aff;
	text-decoration: underline;
}

form#mail_form .g-recaptcha {
	width: 90%;
	margin: var(--space-sm) auto;
	display: flex;
	justify-content: center;
}


/* -- 送信ボタン（変更不可: p#form_submit はJSが依存） =============================== */
/* Figmaデザイン: padding: 20px 50px, font-size: 20px, border-radius: 0, 中央揃え */

form#mail_form p#form_submit {
	width: 90%;
	margin: 0 auto;
	padding: 30px 0 15px;
	/* Figmaデザイン: 中央揃え（旧 margin-left: 35% を廃止） */
	text-align: center;
}

/* Figmaデザイン準拠: LP変数に置き換え、padding・font-size・border-radius を更新 */
/* LPのCTA1セクションのボタンサイズに統一（padding: 15px 37px, font-size: 18px） */
form#mail_form input[type="button"] {
	padding: 15px 37px;
	/* LP変数に置き換え: border: #4cae4c → var(--color-white), background: #5cb85c → var(--color-primary) */
	border: 1px solid var(--color-white);
	border-radius: 0;
	background: var(--color-primary);
	font-size: 18px;
	line-height: normal;
	color: var(--color-white);
	font-family: var(--font-sans-jp);
	-webkit-appearance: none;
	cursor: pointer;
	/* 中央揃え（旧 margin-left: 35% を削除） */
	margin: 0;
	transition: background-color 0.2s ease;
}

form#mail_form input[type="button"]:hover {
	/* LP変数に置き換え: hover背景 #449d44 → var(--color-primary-dark) */
	background: var(--color-primary-dark);
	border: 1px solid var(--color-white);
}

/* LP変数に置き換え: #999999 → var(--color-disabled) */
form#mail_form input[type="button"]:disabled {
	background: var(--color-disabled);
	border: 1px solid var(--color-disabled);
	cursor: not-allowed;
}


/* -- レスポンシブ（768px）========================================================= */
/* LPと統一: 旧境界 1000px → 768px に変更 */

/* 768px start */
@media screen and ( max-width: 768px ) {


/* -- form#mail_form ------------------------------------------------------------ */

form#mail_form {
	width: 95%;
	font-size: 100%;
}

form#mail_form dl {
	width: 90%;
}

form#mail_form dl dt {
	width: auto;
	float: none;
	padding: 25px 0 10px;
	text-align: left;
	font-weight: bold;
}

form#mail_form dl dd {
	width: auto;
	float: none;
	padding: 0 0 20px 0;
}

form#mail_form dl dt i {
	float: none;
	position: static;
	font-weight: normal;
}


/* -- バッジ -------------------------------------------------------------------- */

form#mail_form dl dt span.required,
form#mail_form dl dt span.optional,
form#mail_form dl dt span.badge-required,
form#mail_form dl dt span.badge-optional {
	margin: 0 12px 0 0;
}


/* -- 入力幅 -------------------------------------------------------------------- */

/* SP: 入力欄・セレクト・テキストエリアを全幅表示 */
form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
}

form#mail_form select {
	width: 100%;
}

form#mail_form textarea {
	width: 100%;
	box-sizing: border-box;
}

form#mail_form input[name="phone"],
form#mail_form input[name="schedule"] {
	width: 80%;
}


/* -- 住所自動入力ボタン --------------------------------------------------------- */

/* SP: 入力欄の下に配置 */
form#mail_form a.postal_search_button {
	display: block;
	width: fit-content;
	margin: var(--space-xs) 0 0 0;
}


/* -- 送信ボタン ---------------------------------------------------------------- */

form#mail_form p#form_submit {
	padding: 25px 0;
}

/* SP: 全幅ボタン（縦padding・文字サイズはLPのCTA1セクションSP値に統一） */
form#mail_form input[type="button"] {
	width: 100%;
	padding: 14px 0;
	font-size: 16px;
	margin: 0;
}


}
/* 768px end */


/* ===== ご注意セクション ===== */
/* Figma: 緑背景（#3b5c3f）・白文字・フルワイド・タイトル下に水平線 */

#notice {
	background: var(--color-primary);
	width: 100%;
	padding: 50px 0;
}

.form-notice {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.form-notice__title {
	font-family: var(--font-sans-jp);
	font-size: 20px;
	font-weight: 400;
	color: var(--color-white);
	letter-spacing: 0.405px;
	margin-bottom: var(--space-sm);
}

.form-notice__divider {
	width: 138px;
	height: 2px;
	background: var(--color-white);
	border: none;
	margin: 0 auto var(--space-sm);
}

.form-notice__text {
	font-family: var(--font-sans-jp);
	font-size: 14px;
	font-weight:normal;
	color: var(--color-white);
	line-height: 1.6;
	text-align: left;
	text-align: justify;
}

.form-notice__text a {
	color: var(--color-white);
	text-decoration: underline;
}

.form-notice__text a:hover {
	opacity: 0.8;
}

@media (max-width: 768px) {
	#notice {
		padding: var(--space-lg) var(--sp-padding);
	}
	.form-notice {
		max-width: 100%;
	}
	.form-notice__title {
		font-size: 17px;
	}
	.form-notice__text {
		font-size: 12px;
		line-height: 1.8;
	}
}

/* confirm.php / thanks.php 用テキストなし緑帯 */
#notice.notice--empty {
	height: 160px;
	padding: 0;
}

@media (max-width: 768px) {
	#notice.notice--empty {
		height: 40px;
		padding: 0;
	}
}


/* =================================================================================
   ===== 確認ページ専用スタイル（confirm.php より移行）=====
   ================================================================================= */
/* LP変数に置き換え: width: 1000px → max-width: var(--container-pc), 枠線・影を削除 */
/* レスポンシブ境界: 1000px → 768px */

/* 確認ページのコンテナ（section-heading が上部余白を担うため margin-top: 0） */
#confirm_wrapper {
	max-width: 900px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto var(--space-lg);
	background: var(--color-bg-cream);
	line-height: 1.8;
	font-family: var(--font-sans-jp);
}

/* 確認ページの各項目 */
#confirm_content dl {
	width: 90%;
	margin: 0 auto;
	/* LP変数に置き換え: border: #cccccc → var(--color-border-light) */
	border-bottom: 1px solid var(--color-border-light);
}

#confirm_content dl:after,
#confirm_content dl dt:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#confirm_content dl dt {
	width: 30%;
	float: left;
	padding: 35px 0 25px;
	text-align: right;
	font-family: var(--font-sans-jp);
}

#confirm_content dl dd {
	width: 65%;
	float: right;
	padding: 30px 0 25px 5%;
}

#confirm_content dl dd .confirm_value {
	font-size: 16px;
	line-height: 1.8;
	min-height: 20px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* ボタンエリア */
#confirm_buttons {
	width: 90%;
	margin: 0 auto;
	padding: 30px 0;
	text-align: center;
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
}

/* 「修正する」ボタン: LP変数に置き換え（旧 background: #777777 → .btn-white 相当） */
/* LPのCTA1セクションのボタンサイズに統一（padding: 15px 37px, font-size: 18px） */
#confirm_back_button {
	padding: 15px 37px;
	border-radius: 1px;
	font-size: 18px;
	line-height: normal;
	cursor: pointer;
	font-family: var(--font-sans-jp);
	-webkit-appearance: none;
	/* LP変数に置き換え */
	background: var(--color-white);
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
	transition: background-color 0.2s ease, color 0.2s ease;
}

#confirm_back_button:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

/* 「送信する」ボタン: LP変数に置き換え（旧 background: #5cb85c → .btn-green 相当） */
/* LPのCTA1セクションのボタンサイズに統一（padding: 15px 37px, font-size: 18px） */
#confirm_send_button {
	padding: 15px 37px;
	border-radius: 1px;
	font-size: 18px;
	line-height: normal;
	cursor: pointer;
	font-family: var(--font-sans-jp);
	-webkit-appearance: none;
	/* LP変数に置き換え */
	background: var(--color-primary);
	border: 1px solid var(--color-white);
	color: var(--color-white);
	transition: background-color 0.2s ease;
}

#confirm_send_button:hover {
	/* LP変数に置き換え: hover背景 #449d44 → var(--color-primary-dark) */
	background: var(--color-primary-dark);
}

/* レスポンシブ: 768px（旧1000px境界をLPと統一） */
@media screen and ( max-width: 768px ) {

	#confirm_wrapper {
		width: 95%;
		font-size: 100%;
	}

	#confirm_content dl dt {
		width: auto;
		float: none;
		padding: 25px 0 5px;
		text-align: left;
		font-weight: bold;
	}

	#confirm_content dl dd {
		width: auto;
		float: none;
		padding: 0 0 15px 0;
	}

	#confirm_buttons {
		flex-direction: column;
		align-items: stretch;
	}

	#confirm_buttons button,
	#confirm_back_button,
	#confirm_send_button {
		width: 100%;
		padding: 14px 0;
		font-size: 16px;
		margin: 0;
	}

}


/* =================================================================================
   ===== サンクスページ専用スタイル（thanks.css より統合）=====
   ================================================================================= */

/* 完了メッセージコンテナ */
/* border-top は削除（#form-section .section-heading::after の区切り線と重複していたため） */
div#thanks {
	max-width: 900px;
	width: 100%;
	margin: 0 auto var(--space-xl);
	padding: 0 0 var(--space-lg);
	text-align: center;
	font-family: var(--font-sans-jp);
}

/* メインメッセージ */
.thanks-lead {
	font-size: 18px;
	font-weight: 500;
	color: var(--color-text-dark);
	line-height: 1.8;
	margin-bottom: var(--space-md);
}

/* 注意書き */
.thanks-note {
	font-size: 14px;
	color: var(--color-text-mid);
	line-height: 1.6;
	margin-bottom: var(--space-lg);
}

/* 電話番号エリア */
.thanks-tel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: var(--space-lg);
}

.thanks-tel-label {
	font-family: var(--font-sans-jp);
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text-mid);
	letter-spacing: 0.05em;
}

/* Anton フォントで電話番号を大きく表示 */
.thanks-tel-number {
	font-family: var(--font-number);
	font-size: 36px;
	color: var(--color-primary);
	text-decoration: none;
	letter-spacing: 0.05em;
}

.thanks-tel-number:hover {
	color: var(--color-primary-dark);
}

/* 「トップページへ戻る」ボタンのラッパー */
.thanks-btn-wrap {
	display: flex;
	justify-content: center;
}

/* LPのCTA1セクションのボタンサイズに統一（padding: 15px 37px, font-size: 18px） */
.thanks-btn-wrap .btn-white {
	padding: 15px 37px;
	font-size: 18px;
}

/* ===== SP対応（768px）===== */
@media screen and ( max-width: 768px ) {

	div#thanks {
		padding: var(--space-md) 0;
	}

	.thanks-lead {
		font-size: 15px;
	}

	.thanks-tel-number {
		font-size: 28px;
	}

	.thanks-btn-wrap .btn-white {
		padding: 14px 28px;
		font-size: 16px;
	}

}