/**
 * お役立ち資料（/request, /odoo-request, /odoo-request/thanks）
 * Figma「仕上がりWP設置｜エンジニア引き渡し用」（325:1222。内容は PC v0.3 と同じ）に合わせた
 * 本文領域 .threek-resources のスタイル。
 * ヘッダー・タイトル枠・フッターは既存テーマのまま触らない。
 *
 * 既存の追加CSS（.wpcf7 input… / .wpcf7-submit:hover）がフォームに効くため、
 * フォーム部分は .threek-form 配下で詳細度を上げて上書きしている。
 */

.threek-resources {
	--threek-navy: #173f63;
	--threek-blue: #176b9f;
	--threek-text: #333;
	--threek-muted: #626e77;
	--threek-tint: #edf5fa;
	--threek-line: #d5e1ea;
	--threek-error: #a83737;
	--threek-input-line: #8599aa;
	--threek-cover-deco: #93bbd4;

	display: flex;
	flex-direction: column;
	gap: 48px;
	max-width: 1080px;
	margin: 0 auto;
	/* 上下の余白（56px / 64px）は既存テーマの .site-body が持っているので足さない */
	color: var(--threek-text);
}

/* :where() で詳細度を上げずにリセットする（各部品の padding 指定を潰さないため） */
.threek-resources :where(p, h2, h3, h4, ul, ol) {
	margin: 0;
	padding: 0;
}

.threek-resources ul,
.threek-resources ol {
	list-style: none;
}

.threek-resources li {
	margin: 0;
}

/* Lightning の見出し装飾（下線・背景・明朝体など）を打ち消す。Figma はゴシック（Noto Sans JP） */
.threek-resources h2,
.threek-resources h3,
.threek-resources h4 {
	font-family: "Noto Sans JP", sans-serif;
	text-align: left;
	border: 0;
	background: none;
	box-shadow: none;
	letter-spacing: normal;
}

.threek-resources h2::before,
.threek-resources h2::after,
.threek-resources h3::before,
.threek-resources h3::after,
.threek-resources h4::before,
.threek-resources h4::after {
	content: none;
}

/* ---------- 見出し ---------- */

.threek-heading {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.threek-heading__title {
	color: var(--threek-navy);
	font-size: 28px;
	font-weight: 700;
	line-height: 42px;
}

.threek-heading__desc {
	color: var(--threek-muted);
	font-size: 16px;
	line-height: 28px;
}

.threek-form .threek-heading__desc {
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

/* ---------- ボタン ---------- */

.threek-resources .threek-btn {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 14px 20px;
	border: 0;
	border-radius: 3px;
	background: var(--threek-blue);
	box-shadow: none;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s;
}

.threek-resources .threek-btn:hover,
.threek-resources .threek-btn:focus-visible {
	background: var(--threek-blue);
	color: #fff;
	opacity: 0.85;
	transform: none;
}

/* 戻る・変更などのテキストリンク：下線あり、押しやすいよう操作高さ44px（仕上がり版） */
.threek-back {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	color: var(--threek-blue);
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
	text-decoration: underline;
}

.threek-back:hover {
	text-decoration: none;
}

/* 詳細ページでは、幅 800px のフォームの左端にそろえる（本文は 1080px なので、左右の差の半分だけ内側へ） */
.threek-resources > .threek-back {
	margin-left: max(0px, (100% - 800px) / 2);
}

/* ---------- 仮表紙（正式表紙の画像が届くまで） ---------- */

.threek-cover {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	height: 164px;
	overflow: hidden;
	border-radius: 0; /* Figma 2026-10-22 FIX：表紙は角丸なし */
	background: var(--threek-tint);
}

.threek-cover__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.threek-cover__paper {
	position: absolute;
	top: 13px;
	left: 50%;
	width: 256px;
	height: 143px;
	padding: 10px 14px;
	border: 1px solid var(--threek-line);
	background: #fff;
	transform: translateX(-50%);
}

.threek-cover__guide {
	color: var(--threek-muted);
	font-size: 10px;
	font-weight: 500;
	line-height: 16px;
}

.threek-cover__title {
	margin-top: 7px !important;
	color: var(--threek-navy);
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
}

.threek-cover__rule {
	position: absolute;
	top: 94px;
	left: 14px;
	right: 14px;
	height: 1px;
	background: var(--threek-line);
}

.threek-cover__deco {
	position: absolute;
	top: 106px;
	left: 14px;
	width: 228px;
	height: 16px;
}

/* 01・03：3つの帯 */
.threek-cover__deco--bars {
	background:
		linear-gradient(var(--threek-cover-deco), var(--threek-cover-deco)) 0 0 / 68px 16px no-repeat,
		linear-gradient(var(--threek-cover-deco), var(--threek-cover-deco)) 80px 0 / 68px 16px no-repeat,
		linear-gradient(var(--threek-cover-deco), var(--threek-cover-deco)) 160px 0 / 68px 16px no-repeat;
}

/* 02：チェックリスト風の2行 */
.threek-cover__deco--lines {
	height: 23px;
	background:
		linear-gradient(var(--threek-cover-deco), var(--threek-cover-deco)) 0 0 / 7px 7px no-repeat,
		linear-gradient(var(--threek-cover-deco), var(--threek-cover-deco)) 13px 2px / 200px 3px no-repeat,
		linear-gradient(var(--threek-cover-deco), var(--threek-cover-deco)) 0 14px / 7px 7px no-repeat,
		linear-gradient(var(--threek-cover-deco), var(--threek-cover-deco)) 13px 16px / 185px 3px no-repeat;
}

/* ---------- 一覧（TOP） ---------- */

.threek-product {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.threek-product__name {
	color: var(--threek-navy);
	font-size: 20px;
	font-weight: 700;
	line-height: 31px;
}

.threek-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.threek-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--threek-line);
	border-radius: 4px;
	background: #fff;
}

.threek-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 16px;
}

.threek-card__category {
	color: var(--threek-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

.threek-card__title {
	min-height: 62px;
	color: var(--threek-navy);
	font-size: 20px;
	font-weight: 700;
	line-height: 31px;
}

.threek-card__desc {
	flex-grow: 1; /* 説明の長さの違いを吸収し、区切り線・要点・ボタンの位置を3枚でそろえる */
	color: var(--threek-muted);
	font-size: 16px;
	line-height: 28px;
}

.threek-card__points {
	padding-top: 16px !important;
	border-top: 1px solid #d7d7d7;
	color: var(--threek-muted);
	font-size: 16px;
	line-height: 28px;
}

.threek-card__points li::before,
.threek-detail__points li::before {
	content: "・";
}

.threek-resources__lead {
	color: var(--threek-muted);
	font-size: 16px;
	line-height: 28px;
}

/* ---------- ステップ ---------- */

.threek-steps {
	display: flex;
	gap: 16px; /* 項目と「›」（幅16）を 16px 間隔で並べる（Figma 2026-10-22） */
}

.threek-steps__item {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-width: 0;
	color: var(--threek-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

.threek-steps__item:not(:last-child) {
	padding-right: 32px;
}

.threek-steps__item:not(:last-child)::after {
	content: "›";
	position: absolute;
	right: 0;
	width: 16px;
	font-size: 16px;
	line-height: 28px;
}

.threek-steps__num {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--threek-tint);
	color: var(--threek-blue);
	font-size: 12px;
	font-weight: 500;
	line-height: 24px;
}

.threek-steps__item.is-current {
	color: var(--threek-navy);
}

.threek-steps__item.is-current .threek-steps__num {
	background: var(--threek-blue);
	color: #fff;
}

/* ---------- 資料詳細（A1/B1/C1） ---------- */

.threek-detail {
	display: flex;
	gap: 24px;
	padding: 32px;
	border: 1px solid var(--threek-line);
	border-radius: 4px;
	background: #fff;
}

.threek-detail[hidden] {
	display: none;
}

.threek-detail .threek-cover {
	width: 304px;
}

.threek-detail__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.threek-detail__category {
	color: var(--threek-blue);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

.threek-resources .threek-detail__title {
	color: var(--threek-navy);
	font-size: 28px;
	font-weight: 700;
	line-height: 42px;
}

.threek-detail__desc {
	color: var(--threek-muted);
	font-size: 16px;
	line-height: 28px;
}

.threek-detail__points {
	font-size: 16px;
	line-height: 28px;
}

/* ---------- フォーム ---------- */

.threek-form {
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	scroll-margin-top: 120px;
}

.threek-selected {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 20px;
	border: 1px solid transparent;
	background: var(--threek-tint);
}

.threek-selected.is-invalid {
	border-color: var(--threek-error);
}

.threek-selected__label {
	color: var(--threek-blue);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

.threek-selected__title {
	color: var(--threek-navy);
	font-size: 20px;
	font-weight: 700;
	line-height: 31px;
}

.threek-resources .threek-selected__change {
	align-self: flex-start;
	min-height: 44px; /* Figma 325:1351：「資料を変更する」の行は高さ44（間隔10） */
	padding: 0;
	border: 0;
	background: none;
	color: var(--threek-blue);
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
	text-decoration: underline;
	cursor: pointer;
}

.threek-resources .threek-selected__change:hover {
	text-decoration: none;
}

.threek-selected__error {
	color: var(--threek-error);
	font-size: 14px;
	line-height: 24px;
}

.threek-form__note,
.threek-form__missing {
	color: var(--threek-muted);
	font-size: 16px;
	line-height: 28px;
}

/* CF7 のフォーム本体 */
.threek-form .wpcf7 form {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* CF7 の自動 <p> は inc/cf7.php で止めている。同意リンクの <p> だけ余白を消す */
.threek-form .wpcf7 form p {
	margin: 0;
}

.threek-form .wpcf7-form-control-wrap {
	display: block;
}

/* hidden 項目の入れ物が flex の隙間を作らないようにする（値は送信される） */
.threek-form .wpcf7 .hidden-fields-container {
	display: none;
}

.threek-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.threek-field-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.threek-field__label {
	display: flex;
	align-items: center;
	gap: 12px;
}

.threek-field__label label {
	flex: 1;
	color: var(--threek-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
}

.threek-req,
.threek-opt {
	flex-shrink: 0;
	width: 46px;
	height: 26px;
	font-size: 13px;
	line-height: 26px;
	text-align: center;
}

.threek-req {
	background: var(--threek-error);
	color: #fff;
}

.threek-opt {
	color: var(--threek-muted);
}

.threek-form .wpcf7 input[type="text"],
.threek-form .wpcf7 input[type="email"],
.threek-form .wpcf7 input[type="tel"],
.threek-form .wpcf7 textarea {
	display: block;
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 13px 14px;
	border: 1px solid var(--threek-input-line);
	border-radius: 3px;
	background: #fff;
	box-shadow: none;
	color: var(--threek-text);
	font-size: 16px;
	line-height: 28px;
}

.threek-form .wpcf7 textarea {
	height: 160px;
	padding: 14px;
	resize: vertical;
}

.threek-form .wpcf7 input::placeholder,
.threek-form .wpcf7 textarea::placeholder {
	color: var(--threek-muted);
	opacity: 1;
}

.threek-form .wpcf7 input:focus,
.threek-form .wpcf7 textarea:focus {
	border-color: var(--threek-blue);
	outline: 2px solid rgba(23, 107, 159, 0.2);
	outline-offset: 0;
}

/* 入力エラー（Figma E1：枠2px＋項目直下に説明） */
.threek-form .wpcf7 input.wpcf7-not-valid,
.threek-form .wpcf7 textarea.wpcf7-not-valid {
	border: 2px solid var(--threek-error);
}

.threek-form .wpcf7 .wpcf7-not-valid-tip {
	margin-top: 8px;
	color: var(--threek-error);
	font-size: 14px;
	line-height: 24px;
}

/* CF7 は wpcf7-not-valid を .wpcf7-acceptance 自身に付ける */
.threek-form .wpcf7-acceptance.wpcf7-not-valid input[type="checkbox"] {
	outline: 2px solid var(--threek-error);
	outline-offset: 1px;
}

/* 同意 */
.threek-consent {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.threek-consent__policy a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--threek-blue);
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
	text-decoration: underline;
}

.threek-consent__policy a:hover {
	text-decoration: none;
}

.threek-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.threek-form .wpcf7-acceptance label {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	color: var(--threek-text);
	font-size: 16px;
	line-height: 28px;
	cursor: pointer;
}

.threek-form .wpcf7-acceptance input[type="checkbox"] {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--threek-blue);
}

/* 送信ボタン（既存の .wpcf7 input[type=submit] / :hover を上書き） */
.threek-form .wpcf7 input[type="submit"].threek-btn {
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 14px 20px;
	border-radius: 3px;
	box-shadow: none;
	background: var(--threek-blue);
	font-size: 16px;
	transform: none;
}

.threek-form .wpcf7 .wpcf7-submit:hover {
	background: var(--threek-blue);
	transform: none;
}

/* 送信中は二重送信を防ぐ */
.threek-form .wpcf7 form.submitting .wpcf7-submit {
	opacity: 0.6;
	pointer-events: none;
}

/* 送信中のくるくる表示はボタンの右端に重ねる（レイアウトの高さを増やさない） */
.threek-submit {
	position: relative;
}

.threek-form .threek-submit .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 16px;
	margin: -12px 0 0;
}

/* 送信結果のまとめ（Figma E1/E2）。フォーム定義の先頭の [response] で「選択中の資料」の直下に出す */
.threek-form .wpcf7 form .wpcf7-response-output {
	order: -1;
	margin: 0;
	padding: 20px;
	border: 0;
	background: #fff4f3;
	color: var(--threek-error);
	font-size: 16px;
	line-height: 28px;
}

.threek-form .wpcf7 form.init .wpcf7-response-output,
.threek-form .wpcf7 form.sent .wpcf7-response-output {
	display: none;
}

/* ハニーポット（人には見せない） */
.threek-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- 資料選択メニュー ---------- */

.threek-menu {
	width: min(560px, calc(100% - 48px));
	max-height: calc(100% - 48px);
	padding: 24px;
	border: 0;
	background: #fff;
	color: var(--threek-text);
}

.threek-menu::backdrop {
	background: rgba(23, 63, 99, 0.45);
}

.threek-menu__title {
	margin: 0 0 16px;
	color: var(--threek-navy);
	font-size: 20px;
	font-weight: 700;
	line-height: 31px;
}

.threek-menu__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.threek-menu .threek-menu__option {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	padding: 20px;
	border: 1px solid var(--threek-line);
	border-radius: 3px;
	background: #fff;
	text-align: left;
	cursor: pointer;
}

.threek-menu .threek-menu__option:hover,
.threek-menu .threek-menu__option:focus-visible {
	border-color: var(--threek-blue);
}

.threek-menu__guide {
	color: var(--threek-blue);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

.threek-menu__name {
	color: var(--threek-navy);
	font-size: 20px;
	font-weight: 700;
	line-height: 31px;
}

.threek-menu .threek-menu__close {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--threek-blue);
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
	text-align: center;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- 申込完了（A2/B2/C2） ---------- */

.threek-complete {
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

/* ステップとメッセージの間は PC 48px（タブレット・SP 40px） */
.threek-complete > .threek-steps {
	margin-bottom: 20px;
}

.threek-message {
	padding: 20px;
	background: var(--threek-tint);
	color: var(--threek-blue);
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
}

.threek-message--muted {
	color: var(--threek-muted);
	font-weight: 400;
}

.threek-received {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px;
	background: var(--threek-tint);
}

.threek-received .threek-cover {
	width: 304px;
}

.threek-received__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.threek-received__guide {
	color: var(--threek-blue);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

.threek-received__title {
	color: var(--threek-navy);
	font-size: 20px;
	font-weight: 700;
	line-height: 31px;
}

.threek-received__type {
	color: var(--threek-muted);
	font-size: 16px;
	line-height: 28px;
}

/* ---------- レスポンシブ（仕上がり版「エンジニア引き渡し用」の切替幅） ----------
 * カード：1200px以上 縦型3列／768〜1199px 横型1列（Figma 327:1681）／767px以下 縦型1列
 * 詳細の「表紙＋説明」：1200px以上 横並び／それ未満 縦並び（Figma 327:2399）
 * 完了の「表紙＋説明」：768px以上 横並び／767px以下 縦並び（Figma 327:4118）
 * フォーム：768px以上 2列の行あり／767px以下 1列
 */

@media (max-width: 1199.98px) {
	.threek-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.threek-detail {
		flex-direction: column;
		gap: 24px;
		padding: 24px;
	}

	.threek-detail .threek-cover {
		width: 100%;
	}

	.threek-resources {
		gap: 40px;
	}

	.threek-steps {
		gap: 12px;
	}

	/* 完了画面：ステップとメッセージの間 40px（gap 28＋12） */
	.threek-complete > .threek-steps {
		margin-bottom: 12px;
	}
}

/* タブレットの横型カード：左に表紙 280×157.5（16:9・全体表示）、右に分類〜ボタン。高さは文章量に合わせる */
@media (min-width: 768px) and (max-width: 1199.98px) {
	/* 本文の左右余白は 32px（Figma：834px で本文 770px）。テーマのコンテナより外へ広げる */
	.threek-resources {
		max-width: none;
		margin-right: calc(32px - (100vw - 100%) / 2);
		margin-left: calc(32px - (100vw - 100%) / 2);
	}

	.threek-card {
		flex-direction: row;
		align-items: center;
		gap: 24px;
	}

	.threek-card .threek-cover {
		width: 280px;
		height: 157.5px;
		border-radius: 0;
	}

	.threek-card__body {
		gap: 12px;
		min-width: 0;
	}

	.threek-card__title {
		min-height: 0;
	}

	.threek-card__desc {
		flex-grow: 0;
	}

	/* 区切り線・要点の前後は 16px */
	.threek-card__points,
	.threek-card__body .threek-btn {
		margin-top: 4px !important;
	}
}

@media (max-width: 767.98px) {
	.threek-received {
		flex-direction: column;
		gap: 24px;
		padding: 24px;
	}

	.threek-received .threek-cover {
		width: 100%;
	}
}

@media (max-width: 767.98px) {
	/* 本文の左右余白は 24px（Figma 327:1938：390px で本文 342px）。テーマのコンテナより外へ広げる */
	.threek-resources {
		gap: 40px;
		margin-right: calc(24px - (100vw - 100%) / 2);
		margin-left: calc(24px - (100vw - 100%) / 2);
	}

	.threek-heading__title,
	.threek-resources .threek-detail__title {
		font-size: 24px;
		line-height: 36px;
	}

	.threek-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.threek-card__title {
		min-height: 0;
	}

	/* SP のステップ：番号の下に文字（縦並び・間隔6px）、「›」は幅12pxで残す */
	.threek-steps {
		gap: 0;
	}

	.threek-steps__item {
		flex-direction: column;
		gap: 6px;
		text-align: center;
	}

	.threek-steps__item:not(:last-child) {
		padding-right: 12px;
	}

	.threek-steps__item:not(:last-child)::after {
		top: 4px;
		width: 12px;
	}

	.threek-field-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.threek-received__title {
		font-size: 20px;
		line-height: 31px;
	}
}