@charset "UTF-8";
/**
 * inquiry.css — /forthecompany/inquiry（企業向けの問い合わせ窓口）
 *
 * ★現行サイトの再現ではない。
 *   現行ページの設計ツリーは Base > Iframe（高さ2489px）の2ノードだけで、
 *   フォームは Salesforce Web-to-Lead を別オリジンの iframe で埋めていた。
 *   再現すべきCSSが存在しないため、兄弟ページ /forthecompany に完全に揃えている。
 *
 * ★数値の出どころ（勝手に作っていない）
 *   ヒーロー・セクションの padding / font-size / color / letter-spacing は
 *   assets/css/forthecompany.css の .ftc-hero* / .ftc-contact* からそのまま引き継いだ。
 *   フォーム各部（padding 12px 14px / border 1.5px / radius 10px / font-size 14.5px …）は
 *   assets/css/shigo-toiro.css 22章「16 CONTACT — 自前フォーム」の値をそのまま引き継いだ。
 *   本番運用中の SHIGO十色LP と同じ見た目になる。新しい数値は1つも足していない。
 *
 * ★色変数について
 *   shigo-toiro.css のフォームCSSは --st-* というページ内変数を使っているが、
 *   その変数はあのファイル内にしか無い。ここでは同じ**実値**を
 *   forthecompany.css 系の色（#14314a ほか）に読み替えて直接書いている。
 *
 * ★`.iqp-iq-form__hp`（ハニーポット）には規則を書かない。
 *   inc/inquiry.php が要素自身の inline style で画面外へ退避させている。
 *   外部CSSに隠蔽を依存させると、CSS読み込み失敗時に欄が見えてしまい、
 *   親切な利用者が埋めて「破棄」に落ちる。意図的に二重化していない。
 *
 * ★JavaScript は1行も関与しない。必須チェックは required 属性（ブラウザ内蔵）、
 *   最終判定はサーバー側（inc/inquiry.php）。
 *
 * ブレークポイント: 1140 / 840 / 540 / 320（サイト標準・max-width）
 */

.iqp-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* ============================================================
 * ヒーロー（.ftc-hero* と同値）
 * ============================================================ */

.iqp-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 1080px;
	padding: 100px 24px 56px;
	text-align: center;
}

.iqp-hero__eyebrow {
	margin: 0 0 24px;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.08em;
}

.iqp-hero__title {
	margin: 0 0 32px;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.14em;
}

.iqp-hero__body {
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.08em;
}

/*
 * 強調。#f0620f（tokens.css の --o-c-orange-bar と同値）は
 * 白地 16px 太字で 4.53:1。WCAG AA（4.5:1）を満たす。
 */
.iqp-hero__accent {
	font-weight: 700;
	color: #c2410c;
}

/* ============================================================
 * フォームのブロック（.ftc-contact の地色を踏襲）
 * ============================================================ */

.iqp-form-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 0 24px 100px;
}

.iqp-form {
	box-sizing: border-box;
	width: 100%;
	max-width: 640px;
	padding: 40px;
	background: #ffffff;
	border: 1px solid #e3e0dc;
	border-radius: 16px;
}

.iqp-fallback {
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 15px;
	line-height: 1.8;
}

/* ============================================================
 * フォーム本体（shigo-toiro.css 22章と同値）
 * ============================================================ */

.iqp-iq-form__field {
	margin-bottom: 16px;
}

.iqp-iq-form__label {
	display: block;
	margin-bottom: 7px;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 13px;
	font-weight: 700;
}

.iqp-iq-form__required {
	margin-left: 4px;
	color: #c2410c;
}

.iqp-iq-form__input,
.iqp-iq-form__select,
.iqp-iq-form__textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 14px;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 14.5px;
	background: #ffffff;
	border: 1.5px solid #d8d4cf;
	border-radius: 10px;
}

.iqp-iq-form__textarea {
	min-height: 96px;
	resize: vertical;
}

/*
 * フォーカス。base.css の :focus-visible リング（キーボード操作時のみ）は消さない。
 * shigo-toiro.css 22章と同じ考え方。
 */
.iqp-iq-form__input:focus-visible,
.iqp-iq-form__select:focus-visible,
.iqp-iq-form__textarea:focus-visible {
	border-color: #14314a;
	outline-color: #14314a;
	box-shadow: 0 0 0 3px rgba(20, 49, 74, 0.15);
}

.iqp-iq-form__consent {
	padding-top: 16px;
	border-top: 1px solid #ece9e5;
}

.iqp-iq-form__consent-text {
	margin: 0 0 6px;
	color: #55606b;
	font-family: var(--s-font-f88553ee);
	font-size: 12px;
	line-height: 1.7;
}

.iqp-iq-form__consent-link {
	color: #14314a;
	text-underline-offset: 2px;
}

.iqp-iq-form__checkbox {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 13px;
	line-height: 1.7;
}

.iqp-iq-form__checkbox input {
	flex: none;
	margin-top: 3px;
}

.iqp-iq-form__error {
	margin: 0 0 16px;
	padding: 12px 14px;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 13.5px;
	line-height: 1.7;
	background: #fdf0ea;
	border-radius: 10px;
}

/* 送信ボタンのラッパ（ordinary_inquiry_form が出す {prefix}-form__actions）。 */
.iqp-iq-form__actions {
	display: flex;
	flex-direction: column;
}

/* 送信ボタン。寸法は .ftc-contact__btn に揃える（サイト共通のCTA寸法）。 */
.iqp-iq-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 24px;
	padding: 8px 30px;
	color: #ffffff;
	font-family: var(--s-font-f88553ee);
	font-size: 16px;
	font-weight: 500;
	line-height: 2.25;
	letter-spacing: 0.08em;
	background: #14314a;
	border: 0;
	border-radius: 36px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.iqp-iq-form__submit:hover,
.iqp-iq-form__submit:focus-visible {
	opacity: 0.85;
}

/* ============================================================
 * レスポンシブ（.ftc-* と同じ刻み）
 * ============================================================ */

@media (max-width: 840px) {

	.iqp-hero {
		padding: 72px 24px 40px;
	}

	.iqp-hero__title {
		font-size: 28px;
		letter-spacing: 0.1em;
	}

	.iqp-hero__eyebrow {
		font-size: 17px;
	}

	.iqp-form-section {
		padding: 0 24px 72px;
	}

	.iqp-form {
		padding: 32px 26px;
	}
}

@media (max-width: 540px) {

	.iqp-hero {
		padding: 56px 20px 32px;
	}

	.iqp-hero__title {
		font-size: 23px;
		letter-spacing: 0.08em;
	}

	.iqp-hero__body {
		font-size: 15px;
	}

	.iqp-form-section {
		padding: 0 20px 56px;
	}

	.iqp-form {
		padding: 26px 22px;
	}
}