/* ============================================================
   お問い合わせページ（page-contact.html）専用スタイル
   PC値はすべて1920px基準からclamp(V*0.4px, (V/19.2)vw, Vpx)で
   768px〜1920pxの間をスケールさせる、front-page.css/main.cssと同じ規約。
   SP側はまだ確認していないため、暫定値。
   ============================================================ */

.ss-contact {
	position: relative;
	background: #fff;
}

.ss-contact.wp-block-group > * {
	margin-block-start: 0;
}

.ss-contact__container {
	max-width: 966px;
	margin: 0 auto;
	padding: 0 var(--ss-gap);
	box-sizing: border-box;
}

/* ============ タイトル ============ */
.ss-contact__intro {
	position: relative;
	/* SP実データ: ヘッダー下端からCONTACTの文字上端までは37px
	   （header高さ80px、CONTACT中心132.5px・高さ31pxから逆算）。
	   実測すると、この値をそのままpadding-topにしても、行の上に
	   フォント由来の余白が常に約24px追加されてしまう（PC版でも同じ
	   ~24pxのズレが確認できたため、フォントサイズに比例するもの
	   ではなく固定的な余白と判断）。そのぶんを差し引いた13pxを
	   padding-topにすることで、実際の見た目を37pxに合わせている。 */
	padding: 13px 0 30px;
	overflow: hidden;
}

.ss-contact__intro-stage {
	position: relative;
}

/* CONTACTの背景文字とピンクの円について。
   以前はdisplay:flex; align-items:center;で横並び＋縦中央揃えにして
   いたが、これだと円の高さ（PCでは文字の2倍）がそのままこの行全体の
   高さになり、その中で文字が縦中央に配置される形になる。結果、文字の
   上端が「見出しのpadding-top」だけでなく「円と文字の高さの差の半分」
   ぶんも余計に下がってしまい、業務実績ページ（BUSINESS、円と文字を
   それぞれ独立してabsolute配置している）よりCONTACTの位置が大きく
   下にずれる原因になっていた。
   そのため、この行の高さは文字だけで決まるようにし（円はposition:
   absoluteで行の外に出す）、円は文字を基準にtop:50%+transformで
   縦中央揃えする。横位置もleft:100%（＝文字の右端）を基準にする
   ことで、絶対配置でありがちな「文字幅を決め打ちする」必要もない。 */
.ss-contact__intro-head {
	position: relative;
	display: inline-block;
}

.ss-contact__intro-bg {
	display: block;
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: rgba(255, 186, 213, 0.8);
	line-height: 1;
	pointer-events: none;
	white-space: nowrap;
}

.ss-contact__intro-circle {
	position: absolute;
	top: 50%;
	left: 100%;
	margin-left: 16px;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #fff 0%, #ffbad5 100%);
	pointer-events: none;
}

.ss-contact__intro-title {
	position: relative;
	z-index: 1;
	font-size: 22px;
	line-height: 1.5;
	font-weight: 700;
	/* SP実データ: CONTACTの文字下端からお問い合わせの文字上端まで50px
	   （お問い合わせ top=198px、CONTACT bottom=148pxから逆算）。 */
	margin: 50px 0 0;
}

.ss-contact__intro-text {
	position: relative;
	z-index: 1;
	font-size: 13px;
	line-height: 1.9;
	margin: 16px 0 0;
}

/* ============ フォーム ============ */
.ss-contact__form-section {
	padding: 0 0 60px;
}

.ss-contact__form-stage {
	background: #fff;
	max-width: 820px;
	margin: 0 auto;
}

.wpforms-container {
	margin: 0 !important;
}

.wpforms-field-container {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.wpforms-field {
	padding: 0 !important;
	margin: 0 !important;
}

.wpforms-field fieldset,
.wpforms-field legend {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* WPForms自身が .wp-core-ui div.wpforms-container-full .wpforms-field-label
   というより具体的なセレクタでmargin-bottom(varで15px)とfont-weight:700を
   当てているため、!importantで確実に上書きする。 */
.wpforms-field-label,
.ss-contact__confirm-label,
.wpforms-field-checkbox legend.wpforms-field-label {
	/* display:block も !important 無しでは負けていた（バッジと項目名の
	   間にgapが全く効いていなかったのはこれが原因。「確認用」のラベルは
	   独自クラスでWPForms側の対抗ルールが無いため、そこだけ正しく
	   inline-flexになっていて見た目が揃っていなかった）。 */
	display: inline-flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 16px;
	font-weight: 400 !important;
	color: #000;
	letter-spacing: 0.05em;
	margin: 0 0 8px !important;
}

.wpforms-required-label {
	display: none;
}

/* 必須／任意バッジ。WPFormsは必須項目にだけ .wpforms-required-label
   （「*」）を出力するので、その有無を手がかりにバッジを出し分ける。 */
.wpforms-field-label:has(.wpforms-required-label)::before,
.wpforms-field-checkbox legend.wpforms-field-label:has(.wpforms-required-label)::before,
.ss-contact__confirm-label::before {
	/* 「確認用）連絡先メールアドレス」は文字数が多く2行に折り返すことが
	   あり、複数行にまたがったflexコンテナ内でバッジ自身が縦に伸びて
	   しまっていた。align-self:flex-startで折り返しの影響を受けず
	   常に1行ぶんの高さで固定する。 */
	content: "必須";
	order: -1;
	flex-shrink: 0;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	height: 1.8em;
	background: #ff0204;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	padding: 3.5px 3px;
	border-radius: 3px;
}

.wpforms-field-label:not(:has(.wpforms-required-label))::before {
	content: "任意";
	order: -1;
	flex-shrink: 0;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	height: 1.8em;
	background: #666;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	padding: 3.5px 3px;
	border-radius: 3px;
}

/* 個人情報チェックは見出し（legend）自体を非表示にしているため、
   必須バッジは<ul>の右上に独立して出す。行全体は中央寄せ。 */
.wpforms-field-checkbox .wpforms-field-label {
	margin: 0;
}

/* バッジの実高さ（フォント12px×line-height1 + 上下パディング7px ≒ 19px）
   より、手前の余白(margin-top)を必ず広く取り、バッジのtopオフセットは
   その範囲内（-margin-top 〜 -バッジ高さ）に収める。前回はvwで縮む値を
   使っていたため、途中の画面幅でこの関係が崩れて重なっていた。両方とも
   固定pxにして常に成立するようにする。 */
.wpforms-field-checkbox ul.wpforms-field-required {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: 34px auto 0;
}

.wpforms-field-checkbox ul.wpforms-field-required::before {
	/* チェックボックスの左端ではなく、「弊社規定の…」テキストの開始位置
	   （チェックボックス幅+行内gapぶん右）に揃える。1行上。 */
	content: "必須";
	position: absolute;
	top: -26px;
	left: calc(20px + 12px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	line-height: 1;
	background: #ff0204;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	padding: 3.5px 3px;
	border-radius: 3px;
}

/* JSで挿入する「　例）...」ヒント（プレースホルダーを常時表示のテキスト
   として複製したもの）。 */
.ss-contact__hint {
	font-size: 13px;
	color: rgba(102, 102, 102, 0.75);
	font-weight: 400;
}

/* 貴社名・ご氏名・電話番号・お問い合わせ内容の文字数/桁数チェックは
   WPForms標準のlimit_enabled機能を使わず、すべてカスタムバリデータ
   （inc/contact-form.php）とjQuery Validate（assets/js/contact-form.js）
   で行っている。理由：limit_enabledが出すmaxlength属性は、上限を超えた
   入力を無言で切り詰めてしまい、確認画面を見てもそれに気付けないため。
   （そのためこのCSSファイルには .wpforms-field-limit-text 用のスタイルは
   存在しない -- そもそもその要素が出力されない。） */

/* WPForms自身のCSSは .wp-core-ui div.wpforms-container-full input[type=text]
   のように具体度の高いセレクタ＋varで背景色や枠線を当てているため、
   ここではすべて !important で確実に上書きする。 */
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"] {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
	background-color: #eee !important;
	border: none !important;
	/* iOS/AndroidのモバイルブラウザはCSSでborder:noneにしても、input要素
	   自体のネイティブな見た目（フォーカス時に独自のリング/縁取りを
	   描画するもの）は appearance をリセットしない限り残ってしまう。
	   フォーカス状態を含めて枠線の
	   ないデザインのため、ネイティブ描画を完全に無効化しておく。 */
	appearance: none !important;
	-webkit-appearance: none !important;
	border-radius: 10px !important;
	padding: 0 16px !important;
	height: 44px !important;
	/* 16px未満だとiOS Safariがフォーカス時に「読みにくいだろう」と判断して
	   ページ全体を自動的に拡大表示してしまう（入力欄だけでなくページ全体が
	   ズームされ、ユーザーが手動で戻すまで拡大されたまま）。デザイン上は
	   14pxだが、この自動ズームを防ぐため16px未満にはしない。 */
	font-size: 16px !important;
	font-family: inherit !important;
	color: #000 !important;
}

/* 入力欄は選択中（フォーカス時）は白背景になる。
   実機で見えていた「フォーカス時に一部だけ枠線が見える」という現象は、
   outlineでもborderでもなく、Chromeがフォームコントロールに標準で
   当てているフォーカスリング（box-shadow: 0 0 0 1px 青系の色、という
   形で描画される）が原因だった。appearance:noneやoutline:noneでは
   この新しいbox-shadowベースのフォーカスリングまでは消えないため、
   box-shadowも明示的に打ち消している。
   ただし打ち消すだけだと、白背景になったページの背景と入力欄の境目が
   完全に無くなり、どこが入力欄なのか分からなくなってしまう（実機で
   確認済みの問題）。そのため選択欄と同じ薄いグレーの枠線を、
   フォーカス時だけ付けて境界を分かるようにする。 */
.wpforms-field input[type="text"]:focus,
.wpforms-field input[type="email"]:focus,
.wpforms-field input[type="tel"]:focus,
.wpforms-field select:focus,
.wpforms-field textarea:focus {
	background-color: #fff !important;
	border: 1px solid #898989 !important;
	outline: none !important;
	box-shadow: none !important;
}

.wpforms-field select {
	display: block !important;
	/* 幅はJS（contact-form.js）が選択肢の最長文字列を測って実寸で
	   上書きする。JS未実行時のフォールバックとしてautoにしておく。 */
	width: auto !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	background-color: #fff !important;
	border: 1px solid #898989 !important;
	border-radius: 10px !important;
	padding: 0 16px !important;
	height: 44px !important;
	/* input/textareaと同じ理由（上のコメント参照）で16px未満にしない。 */
	font-size: 16px !important;
	font-family: inherit !important;
	color: #666 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("../images/icon-select-arrow.svg") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 12px auto !important;
	cursor: pointer;
}

.wpforms-field textarea {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
	background-color: #eee !important;
	border: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	border-radius: 10px !important;
	/* 高さはheightではなくmin-heightで指定する。heightに!importantを
	   付けると、右下のリサイズハンドルをドラッグした際にブラウザが要素に
	   直接書き込むheightの指定（インラインstyle、!importantなし）が
	   常にこちらに負けてしまい、見た目はリサイズ可能なのに実際は
	   ドラッグしても何も変わらない、という不具合になっていた。
	   初期サイズはSP:160px（必要な分だけリサイズハンドルで広げてもらう）。 */
	min-height: 160px !important;
	padding: 12px 16px !important;
	font-size: 16px !important;
	font-family: inherit !important;
	color: #000 !important;
	resize: vertical;
	line-height: 1.6;
}

/* WPForms自身が.wpforms-field-large textareaにheight（!important無し）を
   既定で当てている。上のmin-heightだけでは「最小値」にしかならず、この
   heightが別途有効なままなので初期サイズが大きいままだった。実際に効いて
   いるのはdiv.wpforms-container-full .wpforms-form textarea.wpforms-field-large
   {height:calc(var(--wpforms-field-size-input-height)*5.1)}（詳細度:
   クラス3つ+要素2つ）で、これより詳細度を上げないとCSSの読み込み順に
   関わらず負けてしまう。
   heightをautoにするだけではtextareaの既定行数（rows未指定時は2行）分の
   高さにしかならないため、デザイン通りの高さ（SP:160px）を明示的に
   指定する。!importantは付けない（付けるとリサイズハンドルが効かなく
   なる。基本ルールのコメント参照）。 */
.ss-contact__form-stage div.wpforms-container-full .wpforms-form textarea.wpforms-field-large {
	height: 160px;
}

.wpforms-field select:invalid,
.wpforms-field select option[value=""] {
	color: #666;
}

::placeholder {
	color: rgba(102, 102, 102, 0.6);
}

/* メール確認欄: 標準は半分幅の横並び。デザイン通り縦に積む2つの独立した
   欄（連絡先メールアドレス／確認用）連絡先メールアドレス）に見せる。 */
/* WPFormsのflexプロパティ(justify-content:space-between、flex-wrap:wrap
   など)を1つずつ打ち消しても実測の余白が消えなかったため、flexそのものを
   やめてブロック要素の縦積みに変更した。gapが使えないため、子要素側の
   margin-bottomで間隔を作る（.ss-contact__confirm-wrapとrow-blockの
   両方に対応）。 */
.wpforms-field-email .wpforms-field-row {
	display: block !important;
}

.wpforms-field-email .wpforms-field-row-block,
.wpforms-field-email .ss-contact__confirm-wrap {
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 24px !important;
	/* WPForms自身が.wpforms-field-row-block:first-child/:last-childに
	   padding-inline-start/end:0を当てる一方、何も当たらない側は
	   padding:0 10pxが残る。縦積みに変更した今、このフィールドだけ
	   右(または左)に10px分の余白が残り、連絡先メールアドレス欄の右端が
	   他の欄と揃わない原因になっていたため、0で確実に上書きする。 */
	padding: 0 !important;
}

.wpforms-field-email .wpforms-field-row-block:last-child,
.wpforms-field-email .ss-contact__confirm-wrap:last-child {
	margin-bottom: 0 !important;
}

/* WPForms自身の .wpforms-field-sublabel は本文内のインラインstyleタグで
   後から出力される（同じ詳細度なのでソース順で後勝ちしてしまう）ため、
   !important で確実に消す。 */
.wpforms-field-sublabel {
	display: none !important;
}

/* ============ チェックボックス（個人情報保護方針） ============ */
.wpforms-field-checkbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wpforms-field-checkbox li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

/* WPForms自身も input[type=checkbox]::before / ::after で箱とチェック
   マークを独自に描画しており（chexkbox幅は既定16px相当・青系の色）、
   div.wpforms-container-full input[type=checkbox]:checked:after という
   より詳細度の高いセレクタで上書きされていた。::before（WPForms側の箱）
   はcontent:noneで完全に消し、::after（チェックマーク）は全プロパティに
   !importantを付けて確実にこちらの指定を使う。 */
.wpforms-field-checkbox input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex-shrink: 0;
	width: 20px !important;
	height: 20px !important;
	margin: 1px 0 0 !important;
	background-color: #fff !important;
	border: 1px solid #ccc !important;
	border-radius: 5px !important;
	cursor: pointer;
	position: relative;
}

.wpforms-field-checkbox input[type="checkbox"]::before {
	content: none !important;
}

.wpforms-field-checkbox input[type="checkbox"]:checked {
	background-color: #ff0204 !important;
	border-color: #ff0204 !important;
}

/* チェックボックス自体のサイズがデスクトップでclamp(9.6px〜24px)と
   縮む幅を持つため、チェックマークの位置・大きさはpx固定ではなく
   チェックボックスに対する%指定にして、どのサイズでも見切れないように
   する。 */
.wpforms-field-checkbox input[type="checkbox"]:checked::after {
	content: "" !important;
	position: absolute !important;
	left: 30% !important;
	top: 10% !important;
	width: 25% !important;
	height: 50% !important;
	border: solid #fff !important;
	border-width: 0 2px 2px 0 !important;
	background-color: transparent !important;
	transform: rotate(45deg) !important;
}

.wpforms-field-label-inline {
	font-size: 13px;
	color: #666;
	line-height: 1.6;
}

.wpforms-field-label-inline a {
	color: #0b73ba;
	text-decoration: underline;
}

/* ============ 送信ボタン ============ */
.wpforms-submit-container {
	margin: 30px 0 0 !important;
	text-align: center;
}

.wpforms-submit {
	display: inline-block !important;
	width: 100% !important;
	max-width: 820px !important;
	background-color: #666 !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-align: center;
	border: none !important;
	border-radius: 15px !important;
	padding: 14px 20px !important;
	height: auto !important;
	cursor: pointer;
}

.wpforms-submit:not(:hover):not(:active) {
	background-color: #666 !important;
	color: #fff !important;
}

/* ホバー時はピンクになる。
   WPFormsが background ショートハンドでホバー時に黒20%のグラデーションを
   重ねる指定をしており、background-colorだけ上書きしてもこの
   background-image部分が残って色がくすんで見えていた。 */
.wpforms-submit:hover {
	background-color: #ffbad5 !important;
	background-image: none !important;
	color: #666 !important;
}

/* ============ SSL表示 ============ */
/* 鍵アイコンとテキストは別々の2段ではなく、アイコンが
   テキスト行の中心に重なるように配置されている。テキストの自然な
   横幅・高さがこのブロックのサイズを決め、アイコンはその中心に
   絶対配置で重ねる。 */
.ss-contact__ssl {
	position: relative;
	display: flex;
	justify-content: center;
	margin: 40px 0 0;
}

.ss-contact__ssl-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 26px;
	height: auto;
	pointer-events: none;
}

.ss-contact__ssl-text {
	position: relative;
	font-size: 11px;
	color: #666;
}

/* ============ エラー表示 ============ */
.wpforms-error-container {
	background: #fff5f5;
	border: 2px solid #ff0204;
	border-radius: 10px;
	padding: 20px 24px;
	margin: 0 0 30px;
	font-size: 14px;
	line-height: 1.8;
	color: #000;
}

.wpforms-field-container .wpforms-error {
	display: block;
	margin: 8px 0 0;
	font-size: 12px;
	/* WPForms自身のCSS（.wpforms-container label.wpforms-error）が
	   #D63637という別の赤（具体度もこちらの.wpforms-field-container
	   .wpforms-errorより高い）を当てているため、!importantで確実に
	   「必須」バッジ等と同じ#ff0204に統一する。 */
	color: #ff0204 !important;
}

/* エラーメッセージ先頭の注意マークアイコン。WPForms側は<em class=
   "wpforms-error">の::beforeにSVGをmask-imageとして敷き、
   background-color: var(--wpforms-label-error-color)（既定で#D63637）で
   着色している。文字色と同じく!importantで#ff0204に統一する。 */
.wpforms-field-container em.wpforms-error::before {
	background-color: #ff0204 !important;
}

/* チェックボックスのエラーメッセージ（<em class="wpforms-error">）を
   「弊社規定の…」テキストの開始位置に揃える処理は、固定pxの計算では
   なくJS（contact-form.js）で実測して揃えている。理由: このチェック
   ボックスの<ul class="wpforms-field-required">はwidth:fit-content;
   margin:auto;で中央寄せされており、実際の見た目の位置が画面幅や
   選択肢の文言量によって変わるため、固定のmargin-leftでは揃わない
   （実機で位置がズレることを確認済み）。 */

.wpforms-field.wpforms-has-error input,
.wpforms-field.wpforms-has-error select,
.wpforms-field.wpforms-has-error textarea {
	outline: 2px solid #ff0204 !important;
	outline-offset: -2px;
}

/* エラー状態のままフォーカスされた場合（入力内容を確認するボタン押下時、
   最初のエラー項目に自動でカーソルを移す挙動と組み合わせて使う）に、
   上のフォーカス用ルール（outline:none !important）に赤枠が消されて
   しまわないよう、エラー×フォーカスの組み合わせだけ明示的に赤枠を
   描画し直す。ソース順で上のフォーカスルールより後ろにあるため、
   同じ!important同士でもこちらが勝つ。 */
.wpforms-field.wpforms-has-error input:focus,
.wpforms-field.wpforms-has-error select:focus,
.wpforms-field.wpforms-has-error textarea:focus {
	border-color: #ff0204 !important;
	outline: 2px solid #ff0204 !important;
	outline-offset: -2px;
}

@media (min-width: 768px) {
	.ss-contact__intro {
		padding: clamp(24px, 3.13vw, 60px) 0 clamp(16px, 2.08vw, 40px);
	}

	.ss-contact__intro-bg {
		font-size: clamp(48px, 6.25vw, 120px);
		letter-spacing: 0.25em;
	}

	.ss-contact__intro-circle {
		margin-left: clamp(6.4px, 0.83vw, 16px);
		width: clamp(96px, 12.5vw, 240px);
		height: clamp(96px, 12.5vw, 240px);
	}

	/* 「お問い合わせ」見出しとその下のリード文（「原則…」）は、CONTACTの
	   背景文字・ピンクの円（上の.ss-contact__intro-bg/.ss-contact__intro-circle）
	   とは違い、ウィンドウ幅を縮めてもサイズを変えない（下の.ss-contact__form-stage
	   以下と同じ理由）。 */
	.ss-contact__intro-title {
		font-size: 30px;
		margin-top: 82px;
	}

	.ss-contact__intro-text {
		font-size: 18px;
		line-height: 2;
		margin-top: 40px;
		max-width: 926px;
	}

	/* フォーム部分（.ss-contact__form-stage以下）はウィンドウ幅を縮めても
	   サイズを変えない。見出し部分（.ss-contact__intro-*、上のルール）は
	   引き続き画面幅に応じて縮むが、フォーム側は768px〜1920pxの間、常に
	   1920px基準の値で固定し、縮む分は.ss-contact__containerのpadding
	   （var(--ss-gap)、画面幅に応じて縮む）だけで吸収する。 */
	.ss-contact__form-section {
		padding: 0 0 90px;
	}

	.ss-contact__form-stage {
		max-width: 820px;
	}

	.wpforms-field-container {
		/* 各項目間の間隔は一律40px（本社実測: box下端から
		   次項目の見出しまで常に40px）。 */
		gap: 40px;
	}

	.wpforms-field-label,
	.wpforms-field-checkbox legend.wpforms-field-label,
	.ss-contact__confirm-label {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.wpforms-field-label:has(.wpforms-required-label)::before,
	.wpforms-field-label:not(:has(.wpforms-required-label))::before,
	.wpforms-field-checkbox ul.wpforms-field-required::before,
	.ss-contact__confirm-label::before {
		font-size: 14px;
		padding: 3.5px 3px;
	}

	.ss-contact__hint {
		font-size: 16px;
	}

	.wpforms-field input[type="text"],
	.wpforms-field input[type="email"],
	.wpforms-field input[type="tel"],
	.wpforms-field select {
		height: 50px !important;
		border-radius: 10px !important;
		padding: 0 20px !important;
		font-size: 16px !important;
	}

	.wpforms-field textarea {
		/* heightではなくmin-heightにする理由は基本ルール側のコメント参照。 */
		min-height: 150px !important;
		border-radius: 10px !important;
		padding: 14px 20px !important;
		font-size: 16px !important;
	}

	.ss-contact__form-stage div.wpforms-container-full .wpforms-form textarea.wpforms-field-large {
		height: 150px;
	}

	.wpforms-field-email .wpforms-field-row-block,
	.wpforms-field-email .ss-contact__confirm-wrap {
		margin-bottom: 40px !important;
	}

	.wpforms-field-email .wpforms-field-row-block:last-child,
	.wpforms-field-email .ss-contact__confirm-wrap:last-child {
		margin-bottom: 0 !important;
	}

	.wpforms-field-checkbox ul.wpforms-field-required::before {
		/* topは固定-26pxのまま（基本ルール参照）。leftだけデスクトップの
		   チェックボックス幅に合わせて調整。 */
		left: calc(24px + 12px);
	}

	.wpforms-field-checkbox input[type="checkbox"] {
		width: 24px;
		height: 24px;
	}

	.wpforms-field-label-inline {
		font-size: 16px;
	}

	.wpforms-submit-container {
		margin-top: 90px !important;
	}

	.wpforms-submit {
		border-radius: 15px !important;
		padding: 20px !important;
		font-size: 20px !important;
	}

	.ss-contact__ssl {
		margin-top: 60px;
	}

	.ss-contact__ssl-icon {
		width: 65px;
	}

	.ss-contact__ssl-text {
		font-size: 14px;
	}

	.wpforms-error-container {
		font-size: 18px;
	}
}

/* ============================================================
   確認画面・完了画面（JS: assets/js/contact-form.js が表示切替）
   ============================================================ */

[data-ss-step] {
	transition: none;
}

/* ---------- 確認画面 ---------- */
.ss-contact__confirm-section {
	padding: 40px 0 60px;
}

.ss-contact__confirm-title-wrap {
	margin: 0 0 20px;
}

.ss-contact__confirm-title {
	font-size: 20px;
	font-weight: 700;
	color: #666;
	margin: 0 0 12px;
}

.ss-contact__confirm-bar {
	display: block;
	height: 6px;
	border-radius: 4px;
	background: #ffbad5;
}

.ss-contact__confirm-rows {
	display: flex;
	flex-direction: column;
}

.ss-contact__confirm-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 10px 0;
}

.ss-contact__confirm-row-label {
	flex: 0 0 110px;
	text-align: right;
	border-right: 3px solid #ffbad5;
	padding-right: 10px;
	font-size: 13px;
	color: #000;
	letter-spacing: 0.05em;
}

.ss-contact__confirm-row-value {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	color: #000;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.ss-contact__confirm-actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 30px 0 0;
}

.ss-contact__confirm-back,
.ss-contact__confirm-send {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	border-radius: 15px;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 20px;
	cursor: pointer;
}

.ss-contact__confirm-back {
	background: #fff;
	color: #666;
	border: 2px solid #ffbad5;
}

.ss-contact__confirm-back img {
	width: 8px;
	height: auto;
	transform: rotate(-90deg);
}

.ss-contact__confirm-send {
	background: #666;
	color: #fff;
	border: none;
}

.ss-contact__confirm-back:hover,
.ss-contact__confirm-send:hover {
	opacity: 0.85;
}

/* ---------- 完了画面 ---------- */
.ss-contact__complete-section {
	padding: 40px 0 60px;
}

.ss-contact__complete-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ss-contact__complete-icon {
	width: 60px;
	height: auto;
	margin: 0 0 12px;
}

.ss-contact__complete-title {
	font-size: 20px;
	font-weight: 700;
	color: #ffbad5;
	margin: 0 0 16px;
}

.ss-contact__complete-lead {
	font-size: 14px;
	color: #000;
	margin: 0 0 12px;
}

.ss-contact__complete-text {
	font-size: 13px;
	line-height: 1.9;
	color: #000;
	margin: 0 0 30px;
}

.ss-contact__complete-home {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 340px;
	background: #666;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	border-radius: 15px;
	padding: 14px 20px;
}

.ss-contact__complete-home:hover {
	opacity: 0.85;
}

/* 確認画面・完了画面も入力画面と同じ理由で、768px〜1920pxの間は
   サイズを固定する（上の@media (min-width: 768px)ブロック内のコメント
   参照）。 */
@media (min-width: 768px) {
	.ss-contact__confirm-section,
	.ss-contact__complete-section {
		padding: 0 0 90px;
	}

	.ss-contact__confirm-title-wrap {
		display: flex;
		align-items: center;
		gap: 40px;
		margin: 60px 0 50px;
	}

	.ss-contact__confirm-title {
		font-size: 30px;
		white-space: nowrap;
		margin: 0;
	}

	.ss-contact__confirm-bar {
		flex: 1;
		height: 15px;
		border-radius: 8px;
	}

	.ss-contact__confirm-rows {
		max-width: 820px;
		margin: 0 auto;
	}

	.ss-contact__confirm-row {
		gap: 50px;
		padding: 15px 0;
	}

	.ss-contact__confirm-row-label {
		flex-basis: 246px;
		padding-right: 20px;
		font-size: 16px;
	}

	.ss-contact__confirm-row-value {
		font-size: 20px;
	}

	.ss-contact__confirm-actions {
		flex-direction: row;
		justify-content: center;
		gap: 45px;
		max-width: 820px;
		margin: 60px auto 0;
	}

	.ss-contact__confirm-back,
	.ss-contact__confirm-send {
		width: 450px;
		border-radius: 15px;
		padding: 20px;
		font-size: 20px;
	}

	.ss-contact__complete-icon {
		width: 190px;
		margin-bottom: 40px;
	}

	.ss-contact__complete-title {
		font-size: 30px;
		margin-bottom: 20px;
	}

	.ss-contact__complete-lead {
		font-size: 18px;
		margin-bottom: 20px;
	}

	.ss-contact__complete-text {
		font-size: 16px;
		line-height: 2;
		margin-bottom: 60px;
	}

	.ss-contact__complete-home {
		width: 450px;
		max-width: none;
		border-radius: 15px;
		padding: 20px;
		font-size: 20px;
	}
}