/*
 * pc-contact-trial 専用(body.smf-trial-pc)。既存の page.css は変更しない。
 * 目標: 現行PC版 /contact/ の雰囲気(サーモンピンク #ff7c72、灰色の項目名の帯、矢印の進行表示)。
 * ページ幅は viewport=1000、#content_in は 861px。
 */
body.smf-trial-pc #form_content {
	text-align: left;
}
body.smf-trial-pc form.snow-monkey-form {
	font-size: 13px;
	line-height: 1.7;
	color: #333;
	text-align: left;
}

/* ---- 進行表示: 矢印の帯(強調された段階がピンク) ---- */
body.smf-trial-pc .smf-progress-tracker {
	display: flex;
	width: 728px; /* 現行の流れ画像(form_flow_img.png)と同じ幅 */
	margin: 0 auto 30px;
	padding: 0;
	list-style: none;
}
body.smf-trial-pc .smf-progress-tracker__item {
	position: relative;
	flex: 1 1 0;
	width: auto;
	height: 57px;
	margin: 0 0 0 -20px;
	padding: 6px 24px 6px 40px;
	box-sizing: border-box;
	align-items: flex-start;
	justify-content: center;
	background: #ddd;
	color: #333;
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
}
body.smf-trial-pc .smf-progress-tracker__item--input {
	margin-left: 0;
	padding-left: 36px;
}
body.smf-trial-pc .smf-progress-tracker__item::after {
	display: none;
}
body.smf-trial-pc .smf-progress-tracker__item::before {
	position: static;
	display: block;
	height: auto;
	background: none;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 1.2;
}
body.smf-trial-pc .smf-progress-tracker__item--input::before { content: "STEP01"; }
body.smf-trial-pc .smf-progress-tracker__item--confirm::before { content: "STEP02"; }
body.smf-trial-pc .smf-progress-tracker__item--complete::before { content: "STEP03"; }
body.smf-trial-pc .smf-progress-tracker__item__number {
	display: none;
}
body.smf-trial-pc .smf-progress-tracker__item__text {
	margin: 2px 0 0;
	color: #333;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.3;
}
body.smf-trial-pc .smf-progress-tracker__item[aria-current="true"] {
	background: #ff7c72;
	color: #fff;
}
body.smf-trial-pc .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text {
	color: #fff;
}

/* ---- 項目: 現行PC版(mailform.css の table.mailform)と同じ寸法 ----
 * 表の幅 650px、項目名 180px(右寄せ・太字14px)、行の下に #CCC の線、
 * 2行目・4行目…は #F7F7F7(mailform.js の mfp_tr_color)、マウスを乗せると #DDD。
 * 「必須」は must_icon.png(33×35)を行の左端(left:10px)に置く。
 */
body.smf-trial-pc .smf-form {
	width: 650px;
	margin: 10px auto;
}
body.smf-trial-pc .smf-form .smf-item {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #ccc;
}
body.smf-trial-pc .smf-form > .smf-item:nth-child(even) {
	background-color: #f7f7f7;
}
body.smf-trial-pc .smf-form > .smf-item:hover {
	background-color: #ddd;
}
body.smf-trial-pc .smf-form .smf-item__col {
	max-width: none;
	padding: 0;
}
body.smf-trial-pc .smf-form .smf-item__col--label {
	flex: 0 0 180px;
	width: 180px;
	padding: 15px 0;
	background: none;
	box-sizing: border-box;
	text-align: right;
}
body.smf-trial-pc .smf-form .smf-item__label {
	display: block;
}
body.smf-trial-pc .smf-form .smf-item__label > label {
	display: block;
	width: 100%;
}
body.smf-trial-pc .smf-form .smf-item__label__text {
	font-size: 14px;
	font-weight: bold;
}
/* 必須: 必須チェックのある項目の行の左端に、立体的なピンクの札(現行と同じ画像) */
body.smf-trial-pc .smf-form .smf-item:has([data-validations~="required"])::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 33px;
	height: 35px;
	margin-top: -18px;
	background: url(/img/contact/must_icon.png) no-repeat 0 0;
}
body.smf-trial-pc .smf-form .smf-item__col--controls {
	flex: 1 1 auto;
	padding: 15px 10px;
	box-sizing: border-box;
}
/* お名前・フリガナ: 約100pxの欄を2つ横並び */
body.smf-trial-pc .smf-form .smf-item__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 12px;
}
body.smf-trial-pc .smf-form .smf-item__controls > * {
	flex: 0 0 auto;
}
body.smf-trial-pc .smf-form .smf-item__controls > p {
	flex: 0 0 100%;
}

/* ---- 入力欄: 幅は固定(テキスト約250px、氏名・フリガナ約100px、プルダウン約200px、本文 約250×130px) ---- */
body.smf-trial-pc .smf-form .smf-text-control,
body.smf-trial-pc .smf-form .smf-select-control,
body.smf-trial-pc .smf-form .smf-textarea-control {
	display: block;
}
body.smf-trial-pc .smf-form .smf-text-control__control,
body.smf-trial-pc .smf-form .smf-select-control__control,
body.smf-trial-pc .smf-form .smf-textarea-control__control {
	display: block;
	max-width: none;
	box-sizing: border-box;
	margin: 2px 0;
	padding: 4px;
	font-size: 13px;
	line-height: 1.3;
	color: #333;
	background-color: #fff;
	border: 1px solid #767676;
	border-radius: 2px;
}
body.smf-trial-pc .smf-form .smf-text-control__control {
	width: 252px;
	height: 29px;
}
body.smf-trial-pc .smf-form .smf-item__controls > .smf-placeholder:first-child:nth-last-child(2) .smf-text-control__control,
body.smf-trial-pc .smf-form .smf-item__controls > .smf-placeholder:last-child:nth-child(2) .smf-text-control__control {
	width: 102px;
}
body.smf-trial-pc .smf-form .smf-select-control {
	width: 204px;
}
body.smf-trial-pc .smf-form .smf-select-control__control {
	width: 204px;
	height: 29px;
	padding-right: 26px;
}
body.smf-trial-pc .smf-form .smf-textarea-control__control {
	width: 252px;
	height: 132px;
	min-height: 0;
	padding: 5px;
}
body.smf-trial-pc .smf-form [data-invalid="1"] {
	border-color: #e60012;
}
body.smf-trial-pc .smf-form .smf-error-messages {
	margin-top: 4px;
	color: #e60012;
	font-size: 12px;
}
/* チェックボックス: 現行と同じブラウザ標準の見た目、ラベルは下線つき */
body.smf-trial-pc .smf-form .smf-checkbox-control {
	display: inline-block;
	padding: 5px;
	cursor: pointer;
}
body.smf-trial-pc .smf-form .smf-checkbox-control__control {
	-webkit-appearance: checkbox;
	appearance: auto;
	position: static;
	opacity: 1;
	width: 13px;
	height: 13px;
	margin: 3px 3px 3px 4px;
	padding: 0;
	vertical-align: middle;
	border: 0;
	background: none;
}
body.smf-trial-pc .smf-form .smf-checkbox-control__control::before,
body.smf-trial-pc .smf-form .smf-checkbox-control__control::after,
body.smf-trial-pc .smf-form .smf-checkbox-control__label::before,
body.smf-trial-pc .smf-form .smf-checkbox-control__label::after {
	display: none;
}
body.smf-trial-pc .smf-form .smf-checkbox-control__label {
	padding: 0;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}
/* ご確認: 赤い注意書き(現行は color:#c00 太字、下の余白8px)、その下にチェック */
body.smf-trial-pc .smf-form .smf-item__controls > p {
	margin: 0 0 8px !important; /* テーマ側の #contact ... p の余白に勝つため */
	padding: 33px 0 20px !important; /* 現行は page.css の #contact #form_content p(上33px・下20px)がそのまま掛かっている */
	text-align: left;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.6;
	color: #c00 !important;
}

/* ---- Turnstile ---- */
body.smf-trial-pc .snow-monkey-forms-turnstile {
	margin: 24px 0 0;
}
body.smf-trial-pc .snow-monkey-forms-turnstile > div {
	display: flex;
	justify-content: center;
}

/* ---- ボタン: サーモンピンクの大きなボタン ---- */
body.smf-trial-pc .smf-action {
	margin: 36px 0 0;
	text-align: center;
}
body.smf-trial-pc .smf-action .smf-button-control {
	display: block;
	margin: 0 auto 18px;
}
body.smf-trial-pc .smf-action .smf-button-control + .smf-button-control {
	margin-left: auto;
}
body.smf-trial-pc .smf-action .smf-button-control__control {
	display: block;
	width: 100%;
	max-width: 323px;
	height: 58px;
	margin: 0 auto;
	padding: 0 20px;
	font-size: 18px;
	font-weight: bold;
	line-height: 54px;
	color: #fff;
	text-shadow: none;
	background: #ff7c72;
	background-image: none;
	border: 0;
	border-radius: 6px;
	box-shadow: 0 5px 0 #b45854;
	cursor: pointer;
}
body.smf-trial-pc .smf-action .smf-button-control__control:hover {
	opacity: 0.9;
}
body.smf-trial-pc .smf-action .smf-button-control__control:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 #b45854;
}
body.smf-trial-pc .smf-action .smf-button-control__control[data-action="back"] {
	background: #aaa;
	box-shadow: 0 5px 0 #777;
}
body.smf-trial-pc .smf-action .smf-button-control__control[disabled] {
	opacity: 0.6;
	color: #fff;
}

/* ---- 完了メッセージ ---- */
body.smf-trial-pc .smf-complete-content {
	padding: 10px 10px 30px;
}
body.smf-trial-pc form.snow-monkey-form[data-screen="complete"] .smf-form h3 {
	margin: 0 0 20px !important;
	font-size: 24px !important;
	font-weight: bold !important;
	line-height: 1.4 !important;
	color: #ff7c72 !important;
}
body.smf-trial-pc form.snow-monkey-form[data-screen="complete"] .smf-form p {
	margin: 0 0 16px !important; /* テーマ側の #contact #form_content p(上33px・下20px)に勝つため */
	padding: 0 !important;
	text-align: left;
	font-size: 14px;
	line-height: 1.8;
}
/* 完了・エラー画面では Turnstile の表示は不要 */
body.smf-trial-pc form.snow-monkey-form[data-screen="complete"] .snow-monkey-forms-turnstile,
body.smf-trial-pc form.snow-monkey-form[data-screen="systemerror"] .snow-monkey-forms-turnstile {
	display: none;
}

/* ---- 確認画面だけ: 営業お断りの赤い注意書きを隠す ---- */
body.smf-trial-pc form.snow-monkey-form[data-screen="confirm"] .smf-form .smf-item__controls > p {
	display: none !important;
}

/* ---- フッターのロゴ: fallback.css の全体 border-box で潰れるのを防ぐ ---- */
body.smf-trial-pc #footer #footer_wrap #footer_in .left img {
	box-sizing: content-box;
}

/* ---- システムエラー画面(スパム判定を含む) ---- */
body.smf-trial-pc form.snow-monkey-form[data-screen="systemerror"] .smf-system-error-content {
	margin: 0;
	padding: 24px 10px 32px;
	color: #e60012;
	font-size: 16px;
	line-height: 1.7;
	text-align: center;
}
body.smf-trial-pc .smf-system-error-content .smf-nb {
	display: inline-block;
}
body.smf-trial-pc .smf-system-error-content .smf-system-error-back {
	margin: 24px 0 0 !important;
	padding: 0 !important;
	text-align: center;
}
body.smf-trial-pc .smf-system-error-content .smf-system-error-back__link {
	display: block;
	width: 100%;
	max-width: 323px;
	height: 58px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	font-size: 18px;
	font-weight: bold;
	line-height: 54px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #aaa;
	border-radius: 6px;
	box-shadow: 0 5px 0 #777;
}
body.smf-trial-pc .smf-system-error-content .smf-system-error-back__link:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 #777;
}