@charset "UTF-8";
/**
 * inquirythankyou.css — /forthecompany/inquirythankyou（お問い合わせ完了）
 *
 * ==================================================================
 * 一次資料
 * ==================================================================
 *   1. 現行ページの実体
 *      specs/pageviews/69653473-decb-4f9e-8ade-d6deae2ed61e.json
 *      （specs/routes.json の "forthecompany/inquirythankyou" が指すUUID）
 *      現行は STUDIO の Iframe ノードに 1ファイル完結のHTMLを埋め込んだもので、
 *      <style> がノード内にベタ書きされている。**このファイルの数値は全部そこからの逐語**。
 *      丸めたり「だいたい同じ」で置き換えたりしていない。
 *   2. theme/assets/css/base.css（リセット・BP運用規約）
 *   3. theme/assets/css/tokens.css（フォント／カラートークン）
 *   4. theme/page-inquirythankyou.php（このCSSを読むテンプレート。判断の詳細はそちら）
 *
 * ==================================================================
 * ブレークポイント — 現行の値を全ページ共通BPへ当て直している
 * ==================================================================
 * 全ページ共通BPは 1140 / 840 / 540 / 320（すべて max-width・base.css 第0章）。
 * 現行ページの実測MQは **768 / 480 / 1200(min-width)** の3本で、1本も一致しない。対応表:
 *
 *   現行 @max-768 → 本CSS @max-840
 *       中身: 全体の縮小（余白・アイコン・見出し・本文）。
 *       841〜768px の帯が1段早く縮む方向の変化。1カラムの完結ページで
 *       崩れる要素が無いため許容した。
 *
 *   現行 @max-480 → 本CSS @max-540
 *       中身: さらに一段の縮小。同上。
 *
 *   現行 @min-1200 → **移植しない**
 *       中身: 1200px以上でカード余白・アイコン・文字を一段大きくする指定。
 *       base.css の BP運用規約は 1140/840/540/320 の **max-width 4本**で、
 *       min-width のBPを持たない。ここだけ5本目を作ると、以後
 *       「このページだけ別のBP体系」になり運用が壊れる。
 *       落とした結果、1200px以上でも既定値（カード padding 40px 30px ／
 *       アイコン 80px ／ 見出し 28px ／ 本文 16px）のままになる。
 *       **数値を書き換えたのではなく、拡大ブロックを適用しないという判断**。
 *       復活させたい場合は @media (min-width: 1201px) を足すことになるが、
 *       BP体系の変更なのでCEO/親セッション判断。
 *
 *   @320px …… 現行に該当ブロックは無い。本ページは display の切替を1つも
 *              持たないため、規約R2（display の切替は狭い側にも明示）に
 *              当たる箇所が無い。空のブロックを置く意味が無いので書いていない。
 *
 * 規約R1（1140→840→540→320 の順に並べる）に従う。
 *
 * ==================================================================
 * font-weight 底上げ規則（300→400 / 400→500 / 500→700）の適用
 * ==================================================================
 * 全ページ適用済みの規則なのでここでも当てている。現行の指定と適用後:
 *   .main-title    font-weight: 400 → **500**
 *   .customer-name font-weight: 500 → 対象要素ごと不移植（下記）
 *   .highlight     font-weight: 500 → **700**
 *   .check-icon::after font-weight: bold → 疑似要素ごと不移植（下記）
 * 数値を勝手に太らせたのではなく、規則どおりの機械的な繰り上げ。
 *
 * ==================================================================
 * 移植しなかったもの
 * ==================================================================
 * 1. `.customer-name`（氏名の差し込み）
 *    現行は URL の `?last_name=...&first_name=...` を JavaScript で読んで
 *    「〇〇様、」と見出しに差し込んでいる。**完了ページのURLに氏名が載る実装**で、
 *    URLは共有・スクリーンショット・リファラ・アクセスログに残る。
 *    自前フォームは氏名をURLに載せない設計（不透明トークンのみ）なので、
 *    この差し込みごと落とした。現行HTML自身が
 *    「名前がない場合のフォールバック」として見出しを
 *    『お問い合わせありがとうございます』に戻す実装を持っており、
 *    本ページはそのフォールバック側の表示と一致する。
 *
 * 2. `body { height:100vh; display:flex; align-items:center }` による全画面センタリング
 *    現行は iframe の中の独立HTMLだったので body を丸ごと使えた。
 *    本テーマでは html/body の責務は base.css が持つ（ページCSSから触らない）。
 *    また共通フッターが下に付くため、100vh で縦中央に固定するとフッターが
 *    画面外へ押し出される。センタリングは `.iqt-main` に持たせ、100vh は使わない。
 *
 * 3. `.check-icon::after { content: '✓' }`
 *    CSS の content で文字を出す方式は、環境のフォントに字形が無いと化け、
 *    支援技術によっては読み上げの対象にもなる。
 *    同じサイト内の #contact で既に使っているチェックマークSVG
 *    （polyline 20 6 / 9 17 / 4 12）に置き換えた。
 *    **色（白）・大きさ（40px・MQで 35/30px）・地の丸（80px・#ff8800）は現行のまま。**
 *
 * 4. 現行HTML末尾の <script>
 *    上記1の氏名差し込み専用。落とした結果、このページはJavaScriptを1行も使わない。
 *
 * ==================================================================
 * 色について（★申し送り）
 * ==================================================================
 * アクセント色 `#ff8800` は現行の完了ページが使っている実値の逐語。
 * ただし **tokens.css のカラートークンには存在しない色**で、サイトの他ページに
 * 出てこない。ブランドカラーに寄せるかどうかは色の決定そのものなので、
 * こちらでは変えていない（勝手に色を作らない／変えない）。
 * 寄せる場合の候補は tokens.css にある `--o-c-orange-bar: #f0620f` 等。CEO判断。
 *
 * ==================================================================
 * 命名
 * ==================================================================
 * 他ページと衝突させないため、現行のクラス名すべてに `iqt-` を付けている
 *   例) .thank-you-container → .iqt-card ／ .main-title → .iqt-title
 */

/* ============================================================
 * 1. 外枠
 * ============================================================ */

/*
 * 現行 body の padding:20px / background:#f8f9fa / color:#333 / line-height:1.6 と
 * 中央寄せをここが受ける（body には触らない。上記「移植しなかったもの」2）。
 */
.iqt-main {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 20px;
	background-color: #f8f9fa;
	color: #333;
	line-height: 1.6;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}

/* ============================================================
 * 2. カード
 * ============================================================ */

.iqt-card {
	background: #fff;
	padding: 40px 30px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
	text-align: center;
	max-width: 600px;
	width: calc(100% - 40px);
	box-sizing: border-box;
	animation: iqt-fade-in-up .6s ease-out;
}

/* ============================================================
 * 3. チェックアイコン
 * ============================================================ */

.iqt-check {
	width: 80px;
	height: 80px;
	background-color: #ff8800;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 30px;
	animation: iqt-scale-in .5s ease-out .2s both;
}

/* 現行の ::after '✓' と同じ見え方（白・40px）をSVGで作る。 */
.iqt-check svg {
	width: 40px;
	height: 40px;
	display: block;
}

/* ============================================================
 * 4. 本文
 * ============================================================ */

.iqt-title {
	font-size: 28px;
	font-weight: 500; /* 現行 400 ＋ 底上げ規則 400→500 */
	color: #333;
	margin: 0 0 30px;
	line-height: 1.4;
}

.iqt-message {
	font-size: 16px;
	color: #666;
	margin: 0 0 20px;
	line-height: 1.7;
}

.iqt-response {
	font-size: 16px;
	color: #333;
	margin: 0 0 40px;
	line-height: 1.7;
}

/*
 * 受付ID。現行ページには無い行（自前フォームで発番するようになったため増えた）。
 * 新しい数値を作らず、.iqt-message と同値にしている。
 * MQ の縮小も .iqt-message と同じ組で受ける。
 */
.iqt-ref {
	font-size: 16px;
	color: #666;
	margin: 0;
	line-height: 1.7;
}

.iqt-highlight {
	/* 2026-09-15 コントラスト調整（CEO決定「直してOK」）。
	   現行実測色 #ff8800 は白地で比 2.39（14〜16px＝要 4.5・実測2件）。
	   色相そのままに 30% 暗くした #b25f00 へ（4.64）。
	   このページだけで使う直値なので tokens.css には出さない。 */
	color: #b25f00;
	font-weight: 700; /* 現行 500 ＋ 底上げ規則 500→700 */
}

/* ============================================================
 * 5. アニメーション（現行の @keyframes を逐語）
 * ============================================================ */

@keyframes iqt-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes iqt-scale-in {
	from {
		opacity: 0;
		transform: scale(.5);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ============================================================
 * 6. レスポンシブ
 *     base.css 規約R1: 1140 → 840 → 540 → 320 の順に並べる。
 *     対応表は冒頭「ブレークポイント」を参照。
 * ============================================================ */

/* ---- @tablet（現行 @max-768px からの繰り上げ） ---- */
@media screen and (max-width: 840px) {

	.iqt-main {
		padding: 15px;
	}

	.iqt-card {
		padding: 30px 20px;
	}

	.iqt-check {
		width: 70px;
		height: 70px;
		margin-bottom: 25px;
	}

	.iqt-check svg {
		width: 35px;
		height: 35px;
	}

	.iqt-title {
		font-size: 24px;
		margin-bottom: 25px;
	}

	.iqt-message,
	.iqt-response,
	.iqt-ref {
		font-size: 15px;
	}
}

/* ---- @mobile（現行 @max-480px からの繰り上げ） ---- */
@media screen and (max-width: 540px) {

	.iqt-card {
		padding: 25px 15px;
	}

	.iqt-check {
		width: 60px;
		height: 60px;
		margin-bottom: 20px;
	}

	.iqt-check svg {
		width: 30px;
		height: 30px;
	}

	.iqt-title {
		font-size: 20px;
		margin-bottom: 20px;
		line-height: 1.5;
	}

	.iqt-message,
	.iqt-response,
	.iqt-ref {
		font-size: 14px;
	}
}

/* ============================================================
 * 7. 動きを減らす設定
 *     現行には無い。他ページCSS（service.css / o-dinary.css /
 *     forthecompany.css）と同じ方針で足している。
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.iqt-card,
	.iqt-check {
		animation: none;
	}
}