/**
 * コーポレート「カタログ請求」ページのスタイル。
 * スケール係数（--pc/--sp）・キャンバス幅（--mt-canvas）は common.css / base.css の :root で定義済み。
 */

/* ---- 大枠コンテナ ---- */
.mtcl {
	width: var(--mt-canvas);
	max-width: 100%;
	margin-inline: auto;
	overflow-x: clip;
	color: var(--mt-navy);
	background: #fff;
	font-family: "zen-kaku-gothic-new", sans-serif;
	line-height: 1.6;
}

.mtcl img {
	display: block;
}

/* ==================== タイトルバー ====================
 * 他ページ共通のデザイン・数値。笑顔シェイプのみ紺色版（smail.svg）を使う。 */
.mtcl-titlebar {
	position: relative;
	width: calc(1380 * var(--pc));
	height: calc(140 * var(--pc));
	margin: calc(60 * var(--pc)) auto 0;
	background: #f7f5eb;
	border-radius: calc(15 * var(--pc));
}

.mtcl-titlebar__title {
	position: absolute;
	left: calc(70 * var(--pc));
	top: calc(50 * var(--pc));
	width: calc(362 * var(--pc));
	height: calc(40 * var(--pc));
	margin: 0;
	white-space: nowrap;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(40 * var(--pc));
	line-height: calc(40 * var(--pc));
	letter-spacing: 0.15em;
	color: #0d3061;
}

.mtcl-titlebar__smile {
	position: absolute;
	left: calc(1219 * var(--pc));
	top: calc(53 * var(--pc));
	width: calc(91 * var(--pc));
	height: calc(34 * var(--pc));
	animation:
		mtclSmileRock 1.2s ease-in-out,
		mtclSmilePivot 1.2s linear;
	animation-play-state: paused;
}

.mtcl-titlebar__smile.is-loaded {
	animation-play-state: running;
}

@keyframes mtclSmileRock {
	0%, 50%, 100% { rotate: 0deg; }
	25%           { rotate: -6deg; }
	75%           { rotate: 6deg; }
}

@keyframes mtclSmilePivot {
	0%, 49.9%  { transform-origin: bottom left; }
	50%, 100%  { transform-origin: bottom right; }
}

/* ==================== 見出し ====================
 * お問い合わせページと同じ文言・数値（タイトルバーからの間隔150px）。 */
.mtcl-heading {
	box-sizing: border-box;
	width: calc(900 * var(--pc));
	margin: calc(150 * var(--pc)) auto 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(20 * var(--pc));
	line-height: calc(30 * var(--pc));
	letter-spacing: 0.06em;
	color: #0d3061;
}

/* ==================== 案内文 ====================
 * 見出しからの間隔40px。枠はお問い合わせページの案内文と同じ（背景・角丸・余白）。
 * 注意書き（※）は本文と同じ内容幅に対して左に24px追加インデントする。 */
.mtcl-notice-section {
	box-sizing: border-box;
	width: calc(900 * var(--pc));
	margin: calc(40 * var(--pc)) auto 0;
}

.mtcl-notice {
	box-sizing: border-box;
	width: 100%;
	padding: calc(30 * var(--pc));
	background: #f9f9f9;
	border-radius: calc(15 * var(--pc));
}

.mtcl-notice__text,
.mtcl-notice__note {
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

/* 先頭に「・」を付け、2行以上に折り返した時は「・」の幅ぶんだけ2行目以降を
 * インデントして本文の開始位置に揃える（ぶら下げインデント）。1段落目のみ対象
 * （注意書きは「※」がすでに先頭についているため対象外）。 */
.mtcl-notice__text {
	padding-left: 1em;
	text-indent: -1em;
}

.mtcl-notice__text::before {
	content: "・";
}

.mtcl-notice__note {
	margin-top: 0;
	padding-left: calc(24 * var(--pc));
}

/* ==================== カタログ請求フォーム ====================
 * 枠・技法はお問い合わせページのフォーム（.mtct-field 等）と同じ。
 * ラベル列（幅249px＝900-651）＋入力欄列（幅651px）の横並び。行間は一律30px
 * （所在地グループ内の行も含めて統一）。項目名・必須表示・送信先メールはContact
 * Form 7側（管理画面の「カタログ請求」メニュー）で編集する。案内文からの間隔100px。 */
.mtcl-form-section {
	box-sizing: border-box;
	width: calc(900 * var(--pc));
	margin: calc(100 * var(--pc)) auto 0;
}

.mtcl-form-section .wpcf7-form > p:first-child {
	margin-top: 0;
}

.mtcl-field {
	display: flex;
	align-items: center;
	margin-top: calc(30 * var(--pc));
}

.mtcl-field:first-child {
	margin-top: 0;
}

.mtcl-field--address {
	align-items: flex-start;
}

.mtcl-field--address > .mtcl-field__label {
	margin-top: calc(20 * var(--pc));
}

.mtcl-field__label {
	flex: 0 0 calc(249 * var(--pc));
	box-sizing: border-box;
	padding-right: calc(20 * var(--pc));
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(26 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

.mtcl-required {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(37 * var(--pc));
	height: calc(20 * var(--pc));
	margin-left: calc(10 * var(--pc));
	background: #fc3c3c;
	border-radius: calc(10 * var(--pc));
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 500;
	font-size: calc(10 * var(--pc));
	line-height: calc(10 * var(--pc));
	letter-spacing: 0.06em;
	color: #fff;
	vertical-align: middle;
}

.mtcl-field__input {
	flex: 1;
	min-width: 0;
}

/* Contact Form 7が入力欄に付ける<span class="wpcf7-form-control-wrap">には幅の指定が
 * 無く、中のinputに指定したwidth:100%の基準にならない（お問い合わせページと同じ不具合）。
 * wrapをdisplay:blockにして親の幅を正しく継承させる。 */
.mtcl-form-section .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.mtcl-field__input--split {
	display: flex;
	gap: calc(30 * var(--pc));
}

.mtcl-field__input--split .wpcf7-form-control-wrap {
	flex: 1;
	min-width: 0;
}

.mtcl-form-section input[type="text"],
.mtcl-form-section input[type="email"],
.mtcl-form-section input[type="tel"],
.mtcl-form-section input[type="url"] {
	box-sizing: border-box;
	width: 100%;
	height: calc(66 * var(--pc));
	padding: 0 calc(20 * var(--pc));
	background: #fff;
	border: 1px solid #d7d7d7;
	border-radius: calc(15 * var(--pc));
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-size: calc(16 * var(--pc));
	color: #333;
}

.mtcl-form-section input::placeholder {
	color: #d7d7d7;
}

/* ---- 所在地グループ（郵便番号・都道府県・市区町村・町名番地・建物名） ---- */
.mtcl-address-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.mtcl-address-row + .mtcl-address-row {
	margin-top: calc(30 * var(--pc));
}

.mtcl-address-row__label {
	flex: 0 0 calc(104 * var(--pc));
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

.mtcl-address-row__label--inline {
	flex: 0 0 auto;
	margin-left: calc(55 * var(--pc));
	padding-right: calc(20 * var(--pc));
}

.mtcl-address-row__input {
	flex: 1;
	min-width: 0;
}

.mtcl-address-row__input--narrow {
	flex: 0 0 calc(200 * var(--pc));
}

.mtcl-address-note {
	flex: 1;
	align-self: flex-start;
	min-width: 0;
	margin: calc(11 * var(--pc)) 0 0 calc(10 * var(--pc));
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 500;
	font-size: calc(12 * var(--pc));
	line-height: calc(22 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

/* ---- プライバシーポリシー説明文 ----
 * 入力欄の列（ラベル列249px分オフセット）に幅・位置を合わせる。 */
.mtcl-privacy-text {
	box-sizing: border-box;
	width: calc(651 * var(--pc));
	margin: calc(30 * var(--pc)) 0 0 calc(249 * var(--pc));
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 500;
	font-size: calc(14 * var(--pc));
	line-height: calc(28 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

.mtcl-privacy-text a {
	color: #333;
	text-decoration: underline;
}

/* PCとSPで改行位置が異なるため、breakごとにどちらの幅で必要かをクラスで出し分ける
 * （お問い合わせページと同じ技法）。 */
.mtcl-privacy-text__break--sp {
	display: none;
}

/* ---- 個人情報の取扱規定への同意チェックボックス ---- */
.mtcl-field--consent {
	margin-top: calc(50 * var(--pc));
}

/* Contact Form 7は[acceptance]をwrap用の<span>を何重にもネストして出力するため、
 * .mtcl-consentのdisplay:flexが直接の子（wpcf7-form-control-wrap）にしか効かず、
 * 実際のチェックボックス・ラベルは通常のインライン配置（baseline揃え）のままだった。
 * 中間のラップ要素をdisplay:contentsにして、チェックボックスとラベルを実質的に
 * .mtcl-consentの直接の子として扱わせ、align-items:centerで正しく中央揃えする。 */
.mtcl-consent {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.mtcl-consent .wpcf7-form-control-wrap,
.mtcl-consent .wpcf7-form-control.wpcf7-acceptance,
.mtcl-consent .wpcf7-list-item,
.mtcl-consent .wpcf7-list-item > label {
	display: contents;
}

.mtcl-consent .wpcf7-list-item-label {
	margin-left: calc(20 * var(--pc));
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

/* 丸いチェックボックス（外側の円26px・チェック時は内側に10pxの丸）。 */
.mtcl-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	flex: none;
	width: calc(26 * var(--pc));
	height: calc(26 * var(--pc));
	margin: 0;
	background: #fff;
	border: 1px solid #d7d7d7;
	border-radius: 50%;
	position: relative;
	cursor: pointer;
}

.mtcl-consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(10 * var(--pc));
	height: calc(10 * var(--pc));
	background: #333;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

/* ---- 送信ボタン ----
 * Contact Form 7の[submit]は<input type="submit">1個のみで子要素を持てないため、
 * ラッパー（position:relative固定幅）に区切り線・矢印アイコンを::before/::afterで
 * 重ねて表現する（クリックはpointer-events:noneで下のinputへ通す）。 */
.mtcl-submit-wrap {
	position: relative;
	box-sizing: border-box;
	width: calc(341 * var(--pc));
	height: calc(70 * var(--pc));
	margin: calc(100 * var(--pc)) auto 0;
}

.mtcl-submit-wrap::before {
	content: "";
	position: absolute;
	right: calc(78 * var(--pc));
	top: 50%;
	width: 1px;
	height: calc(30 * var(--pc));
	background: #fff;
	transform: translateY(-50%);
	pointer-events: none;
}

.mtcl-submit-wrap::after {
	content: "";
	position: absolute;
	right: calc(30 * var(--pc));
	top: 50%;
	width: calc(24 * var(--pc));
	height: calc(11 * var(--pc));
	background: url("../images/arrow-white.svg") no-repeat center / contain;
	transform: translateY(-50%);
	pointer-events: none;
	clip-path: inset(0 0 0 0);
}

.mtcl-submit-wrap:hover::after {
	animation: mtclArrowReveal 0.3s ease-out;
}

@keyframes mtclArrowReveal {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

.mtcl-submit-wrap .wpcf7-submit {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: calc(70 * var(--pc));
	margin: 0;
	padding: 0 calc(93 * var(--pc)) 0 calc(40 * var(--pc));
	background: #0d3061;
	border: none;
	border-radius: calc(15 * var(--pc));
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-size: calc(14 * var(--pc));
	font-weight: 500;
	letter-spacing: 0.06em;
	color: #fff;
	text-align: left;
	cursor: pointer;
}

.mtcl-form-section .wpcf7-not-valid-tip {
	display: block;
	margin-top: calc(6 * var(--pc));
	font-size: calc(13 * var(--pc));
	color: #c0392b;
}

.mtcl-form-section .wpcf7-response-output {
	margin: calc(30 * var(--pc)) auto 0;
	max-width: calc(900 * var(--pc));
	padding: calc(16 * var(--pc)) calc(20 * var(--pc));
	border: 1px solid #e9e9e9;
	border-radius: calc(10 * var(--pc));
	font-size: calc(14 * var(--pc));
	color: #333;
}

/* ==================== パンくずリスト ====================
 * このページはCTAセクションが無いため、送信ボタンとの間隔150pxを自前で持つ
 * （他ページはCTAのmargin-bottomがこの間隔を兼ねている）。 */
.mtcl-breadcrumb {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin: calc(150 * var(--pc)) 0 0;
	padding-left: calc(80 * var(--pc));
}

.mtcl-breadcrumb__link {
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 500;
	font-size: calc(14 * var(--pc));
	line-height: calc(14 * var(--pc));
	letter-spacing: 0.06em;
	color: rgba(51, 51, 51, 0.4);
	text-decoration: none;
}

.mtcl-breadcrumb__divider {
	display: block;
	flex: none;
	/* 親の align-items:center に任せ、文字の縦中央に線の回転軸を置く。
	 * Figmaの座標は「回転後の見た目のバウンディングボックス」の位置を示しており、
	 * CSSの「回転前の位置を基準に回転する」挙動とは基準点が異なるため、
	 * Figmaの数値をそのまま上端からのオフセットとして使うと合わない。 */
	width: calc(12 * var(--pc));
	height: 0;
	margin: 0 calc(9 * var(--pc)) 0 calc(15 * var(--pc));
	border-top: 1px solid #333;
	transform: rotate(120deg);
}

.mtcl-breadcrumb__current {
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 500;
	font-size: calc(14 * var(--pc));
	line-height: calc(14 * var(--pc));
	letter-spacing: 0.06em;
	text-decoration-line: underline;
	color: #333;
}

/* ==================== レスポンシブ（SP） ====================
 * スケール係数 --sp は common.css の :root（@media 内）で定義済み。
 * SPの詳細な座標は未受領のため、他ページと同じ考え方（お問い合わせページの案内文）で
 * 暫定実装している。 */
@media (max-width: 767px) {

	.mtcl-titlebar {
		width: calc(690 * var(--sp));
		height: calc(140 * var(--sp));
		margin: calc(60 * var(--sp)) auto 0;
		border-radius: calc(30 * var(--sp));
	}

	.mtcl-titlebar__title {
		left: calc(50 * var(--sp));
		top: calc(50 * var(--sp));
		width: calc(362 * var(--sp));
		height: calc(40 * var(--sp));
		font-size: calc(40 * var(--sp));
		line-height: calc(40 * var(--sp));
	}

	.mtcl-titlebar__smile {
		left: calc(559 * var(--sp));
		top: calc(55 * var(--sp));
		width: calc(81 * var(--sp));
		height: calc(30 * var(--sp));
	}

	/* 見出し・案内文・フォームはFigmaのSPで幅650（左右余白50）。タイトルバー（690）より内側に揃える。 */
	.mtcl-heading {
		width: calc(650 * var(--sp));
		margin-top: calc(150 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(42 * var(--sp));
	}

	.mtcl-notice-section {
		width: calc(650 * var(--sp));
		margin-top: calc(40 * var(--sp));
	}

	.mtcl-notice {
		padding: calc(40 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	.mtcl-notice__text,
	.mtcl-notice__note {
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
	}

	.mtcl-notice__note {
		margin-top: calc(20 * var(--sp));
		/* 1段落目は「・」のぶら下げインデントでテキスト本体が1em分右にずれるため、
		 * 2段落目もpadding-leftを1emにして開始位置を揃える。 */
		padding-left: 1em;
	}

	.mtcl-form-section {
		width: calc(650 * var(--sp));
		margin-top: calc(80 * var(--sp));
	}

	.mtcl-field {
		flex-direction: column;
		align-items: stretch;
		margin-top: calc(50 * var(--sp));
	}

	.mtcl-field--address {
		align-items: stretch;
	}

	.mtcl-field--address > .mtcl-field__label {
		margin-top: 0;
		margin-bottom: calc(40 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(42 * var(--sp));
	}

	.mtcl-field--address > .mtcl-field__label .mtcl-required {
		width: calc(76 * var(--sp));
		height: calc(42 * var(--sp));
		border-radius: calc(21 * var(--sp));
		font-size: calc(22 * var(--sp));
	}

	.mtcl-field__label {
		flex: none;
		padding-right: 0;
		margin-bottom: calc(44 * var(--sp));
		font-size: calc(26 * var(--sp));
	}

	.mtcl-required {
		width: calc(56 * var(--sp));
		height: calc(30 * var(--sp));
		margin-left: calc(15 * var(--sp));
		border-radius: calc(15 * var(--sp));
		font-size: calc(15 * var(--sp));
	}

	.mtcl-field__input--split {
		gap: calc(20 * var(--sp));
	}

	.mtcl-form-section input[type="text"],
	.mtcl-form-section input[type="email"],
	.mtcl-form-section input[type="tel"],
	.mtcl-form-section input[type="url"] {
		height: calc(90 * var(--sp));
		padding: 0 calc(30 * var(--sp));
		border-radius: calc(15 * var(--sp));
		font-size: calc(26 * var(--sp));
	}

	.mtcl-address-row {
		flex-wrap: wrap;
	}

	.mtcl-address-row + .mtcl-address-row {
		margin-top: calc(20 * var(--sp));
	}

	.mtcl-address-row__label {
		flex: 0 0 calc(157 * var(--sp));
		margin-bottom: 0;
		font-size: calc(26 * var(--sp));
	}

	.mtcl-address-row__label--inline {
		flex: 0 0 calc(157 * var(--sp));
		margin: calc(20 * var(--sp)) 0 0;
		padding-right: 0;
	}

	.mtcl-address-row__input,
	.mtcl-address-row__input--narrow {
		flex: 0 0 calc(493 * var(--sp));
	}

	.mtcl-address-row__label--inline + .mtcl-address-row__input--narrow {
		margin-top: calc(20 * var(--sp));
	}

	.mtcl-address-row input[type="text"] {
		height: calc(100 * var(--sp));
	}

	.mtcl-address-note {
		flex: 0 0 calc(493 * var(--sp));
		margin: calc(10 * var(--sp)) 0 0 calc(157 * var(--sp));
		font-size: calc(20 * var(--sp));
		line-height: calc(34 * var(--sp));
	}

	.mtcl-form-section .wpcf7-not-valid-tip {
		margin-top: calc(10 * var(--sp));
		font-size: calc(20 * var(--sp));
	}

	.mtcl-privacy-text {
		width: 100%;
		margin: calc(50 * var(--sp)) 0 0;
		font-size: calc(22 * var(--sp));
		line-height: calc(38 * var(--sp));
	}

	.mtcl-privacy-text__break--pc {
		display: none;
	}

	.mtcl-privacy-text__break--sp {
		display: inline;
	}

	.mtcl-field--consent {
		margin-top: calc(60 * var(--sp));
	}

	.mtcl-consent .wpcf7-list-item-label {
		margin-left: calc(20 * var(--sp));
		font-size: calc(24 * var(--sp));
	}

	.mtcl-consent input[type="checkbox"] {
		width: calc(36 * var(--sp));
		height: calc(36 * var(--sp));
	}

	.mtcl-consent input[type="checkbox"]:checked::after {
		width: calc(14 * var(--sp));
		height: calc(14 * var(--sp));
	}

	.mtcl-submit-wrap {
		width: calc(490 * var(--sp));
		height: calc(100 * var(--sp));
		margin-top: calc(80 * var(--sp));
	}

	.mtcl-submit-wrap::before {
		right: calc(110 * var(--sp));
		height: calc(30 * var(--sp));
	}

	.mtcl-submit-wrap::after {
		right: calc(40 * var(--sp));
		width: calc(32 * var(--sp));
		height: calc(15 * var(--sp));
	}

	.mtcl-submit-wrap.is-viewing::after {
		animation: mtclArrowReveal 2s ease-out infinite;
	}

	.mtcl-submit-wrap .wpcf7-submit {
		height: calc(100 * var(--sp));
		padding: 0 calc(130 * var(--sp)) 0 calc(40 * var(--sp));
		border-radius: calc(15 * var(--sp));
		font-size: calc(24 * var(--sp));
	}

	.mtcl-form-section .wpcf7-response-output {
		max-width: calc(690 * var(--sp));
	}

	.mtcl-breadcrumb {
		margin-top: calc(80 * var(--sp));
		/* フッターとの間隔は.mt-footer自体のpadding-topに任せる（二重にしない）。 */
		padding-left: calc(40 * var(--sp));
	}

	.mtcl-breadcrumb__link,
	.mtcl-breadcrumb__current {
		font-size: calc(22 * var(--sp));
		line-height: calc(22 * var(--sp));
	}

	.mtcl-breadcrumb__divider {
		width: calc(20 * var(--sp));
		/* PCは1pxだが、SPはFigma指定で2px（線の太さは--spでスケールしない）。 */
		border-top-width: 2px;
		margin: 0 calc(20 * var(--sp)) 0 calc(20 * var(--sp));
	}

}