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

/* ---- 大枠コンテナ ---- */
.mtct {
	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;
}

.mtct img {
	display: block;
}

/* ==================== タイトルバー ====================
 * 他ページ共通のデザイン・数値。笑顔シェイプのみ紺色版（smail.svg）を使う。 */
.mtct-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));
}

.mtct-titlebar__title {
	position: absolute;
	left: calc(70 * var(--pc));
	top: calc(50 * var(--pc));
	width: calc(270 * 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;
}

.mtct-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:
		mtctSmileRock 1.2s ease-in-out,
		mtctSmilePivot 1.2s linear;
	animation-play-state: paused;
}

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

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

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

/* ==================== 見出し ====================
 * 固定文言（ADMINでは編集不可）。タイトルバーからの間隔150px。 */
.mtct-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追加インデントする。 */
.mtct-notice-section {
	box-sizing: border-box;
	width: calc(900 * var(--pc));
	margin: calc(40 * var(--pc)) auto 0;
}

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

.mtct-notice__text,
.mtct-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行目以降を
 * インデントして本文の開始位置に揃える（ぶら下げインデント）。案内文の両段落に適用。 */
.mtct-notice__text,
.mtct-notice__note {
	padding-left: 1em;
	text-indent: -1em;
}

.mtct-notice__text::before,
.mtct-notice__note::before {
	content: "・";
}

.mtct-notice__note {
	margin: calc(30 * var(--pc)) 0 0;
}

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

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

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

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

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

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

.mtct-field--subject {
	align-items: flex-start;
	margin-top: calc(50 * var(--pc));
}

.mtct-field--message {
	margin-top: calc(50 * var(--pc));
}

.mtct-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;
}

.mtct-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;
}

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

/* Contact Form 7が入力欄に付ける<span class="wpcf7-form-control-wrap">には幅の指定が
 * 無く、中のinputに指定したwidth:100%の基準にならない。そのためinputのHTML属性
 * size="40"（文字数由来の幅）が優先され、郵便番号の隣の「都道府県」などの狭い枠
 * （200px）が本来より大きく表示されてしまっていた。wrapをdisplay:blockにして
 * 親（.mtct-field__inputや.mtct-address-row__inputなど）の幅を正しく継承させる。 */
.mtct-form-section .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

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

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

.mtct-form-section input[type="text"],
.mtct-form-section input[type="email"],
.mtct-form-section input[type="tel"],
.mtct-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;
}

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

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

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

.mtct-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;
}

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

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

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

.mtct-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;
}

/* ---- 表題（ラジオボタン。既定でデフォルト選択肢がチェック済み） ---- */
.mtct-subject-list .wpcf7-form-control.wpcf7-radio {
	display: flex;
	flex-direction: column;
}

.mtct-subject-list .wpcf7-list-item {
	display: block;
	margin: 0;
}

.mtct-subject-list .wpcf7-list-item + .wpcf7-list-item {
	margin-top: calc(20 * var(--pc));
}

.mtct-subject-list label {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.mtct-subject-list input[type="radio"] {
	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;
}

.mtct-subject-list input[type="radio"]: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%);
}

.mtct-subject-list .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;
}

/* ---- お問い合わせ内容（テキストエリア） ---- */
.mtct-form-section textarea {
	box-sizing: border-box;
	width: 100%;
	height: calc(150 * var(--pc));
	padding: 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;
	resize: vertical;
}

.mtct-form-section textarea::placeholder {
	color: #d7d7d7;
}

/* ---- プライバシーポリシー説明文 ----
 * 入力欄の列（ラベル列249px分オフセット）に幅・位置を合わせる。 */
.mtct-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;
}

/* PCとSPで改行位置が異なるため、breakごとにどちらの幅で必要かをクラスで出し分ける。 */
.mtct-privacy-text__break--sp {
	display: none;
}

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

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

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

.mtct-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の丸）。 */
.mtct-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;
}

.mtct-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へ通す）。 */
.mtct-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;
}

.mtct-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;
}

.mtct-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);
}

/* ホバー時に矢印アイコンが左から伸びるように出現する（他ページのCTAボタンと同じ効果を、
 * clip-pathで左側から徐々に見せることで再現）。SPはホバーが無いため、画面内に入って
 * いる間だけ再生する（contact.js の .is-viewing 切り替えと連動）。 */
.mtct-submit-wrap:hover::after {
	animation: mtctArrowReveal 0.3s ease-out;
}

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

.mtct-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;
}

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

.mtct-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;
}

/* ==================== お電話でのお問い合わせ ====================
 * カード幅1000px・キャンバス中央寄せ（左右インセット220px、お知らせ詳細のカードと同じ）。
 * カード内余白は上下左右とも80px（コンテンツ幅840px）。フォームからの間隔は標準の150px。
 * 拠点カードは3列グリッド（列・行とも間隔15px）、270×102px。 */
.mtct-phone-section {
	box-sizing: border-box;
	width: calc(1000 * var(--pc));
	margin: calc(150 * var(--pc)) auto 0;
}

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

.mtct-phone__heading {
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(22 * var(--pc));
	line-height: calc(33 * var(--pc));
	letter-spacing: 0.06em;
	color: #0d3061;
}

.mtct-phone__heading:not(:first-child) {
	margin-top: calc(80 * var(--pc));
}

.mtct-phone__lead {
	margin: calc(40 * var(--pc)) 0 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;
}

.mtct-phone__divider {
	margin: calc(80 * var(--pc)) 0 0;
	border: none;
	border-top: 1px solid #e9e9e9;
}

.mtct-phone__grid {
	display: grid;
	grid-template-columns: repeat(3, calc(270 * var(--pc)));
	gap: calc(15 * var(--pc));
	margin-top: calc(40 * var(--pc));
}

.mtct-phone__office {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(270 * var(--pc));
	padding: calc(20 * var(--pc)) 0;
	background: #fff;
	border-radius: calc(15 * var(--pc));
}

.mtct-phone__office--single {
	margin-top: calc(40 * var(--pc));
}

.mtct-phone__office-name {
	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(16 * var(--pc));
	letter-spacing: 0.06em;
	color: #0d3061;
}

.mtct-phone__office-row {
	display: flex;
	align-items: center;
	gap: calc(5 * var(--pc));
	margin-top: calc(20 * var(--pc));
}

.mtct-phone__office-icon {
	width: calc(20 * var(--pc));
	height: calc(20 * var(--pc));
}

.mtct-phone__office-number {
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(26 * var(--pc));
	line-height: calc(26 * var(--pc));
	letter-spacing: normal;
	color: #0d3061;
}

/* ==================== 輸入販売元ご相談窓口 ====================
 * カード幅1000px・キャンバス中央寄せ。「お電話でのお問い合わせ」カードのすぐ下、
 * 間隔50px（見出しレベルの新セクションではなく、電話問い合わせカードの続きの
 * ため150pxより狭い）。見出し・案内文・アイコン付き電話番号は
 * .mtct-phone__heading / .mtct-phone__lead / .mtct-phone__office-row 等を再利用する。 */
.mtct-import-section {
	box-sizing: border-box;
	width: calc(1000 * var(--pc));
	margin: calc(50 * var(--pc)) auto 0;
}

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

.mtct-import__box {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(270 * var(--pc));
	min-height: calc(66 * var(--pc));
	margin-top: calc(40 * var(--pc));
	padding: calc(20 * var(--pc)) calc(24 * var(--pc));
	background: #fff;
	border-radius: calc(15 * var(--pc));
}

.mtct-import__box .mtct-phone__office-row {
	margin-top: 0;
}

.mtct-import__box .mtct-phone__office-number {
	white-space: nowrap;
}

/* ==================== パンくずリスト ====================
 * 他ページ共通のデザイン・数値。 */
.mtct-breadcrumb {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	margin: calc(150 * var(--pc)) 0 0;
	padding-left: calc(80 * var(--pc));
}

.mtct-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;
}

.mtct-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);
}

.mtct-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（〜767px）
 * Figma SP は 750px 幅。各値は calc(Figmaのpx * var(--sp))。
 * スケール係数 --sp は common.css の :root（@media 内）で定義済み。
 * SPの詳細な座標は未受領のため、他ページのフォーム系コンポーネントと同じ
 * 「ラベルを上・入力欄を下に積む」パターンで暫定実装している。
 * ============================================================ */
@media (max-width: 767px) {

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

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

	.mtct-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）より内側に揃える。 */
	.mtct-heading {
		width: calc(650 * var(--sp));
		margin-top: calc(150 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(42 * var(--sp));
	}

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

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

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

	.mtct-notice__note {
		margin: calc(40 * var(--sp)) 0 0;
	}

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

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

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

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

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

	.mtct-field--subject {
		align-items: stretch;
		margin-top: calc(80 * var(--sp));
	}

	.mtct-field--message {
		margin-top: calc(80 * var(--sp));
	}

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

	.mtct-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));
	}

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

	.mtct-form-section input[type="text"],
	.mtct-form-section input[type="email"],
	.mtct-form-section input[type="tel"],
	.mtct-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));
	}

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

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

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

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

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

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

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

	.mtct-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));
	}

	.mtct-subject-list .wpcf7-list-item + .wpcf7-list-item {
		margin-top: calc(30 * var(--sp));
	}

	.mtct-subject-list input[type="radio"] {
		width: calc(36 * var(--sp));
		height: calc(36 * var(--sp));
	}

	.mtct-subject-list input[type="radio"]:checked::after {
		width: calc(14 * var(--sp));
		height: calc(14 * var(--sp));
	}

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

	.mtct-form-section textarea {
		height: calc(300 * var(--sp));
		padding: calc(30 * var(--sp));
		border-radius: calc(15 * var(--sp));
		font-size: calc(26 * var(--sp));
	}

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

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

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

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

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

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

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

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

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

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

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

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

	.mtct-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));
	}

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

	.mtct-phone-section {
		width: calc(690 * var(--sp));
		margin-top: calc(150 * var(--sp));
	}

	.mtct-phone {
		padding: calc(60 * var(--sp));
		border-radius: calc(30 * var(--sp));
	}

	.mtct-phone__heading {
		font-size: calc(32 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	.mtct-phone__heading:not(:first-child) {
		margin-top: calc(80 * var(--sp));
	}

	.mtct-phone__lead {
		margin-top: calc(40 * var(--sp));
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
	}

	.mtct-phone__divider {
		margin-top: calc(80 * var(--sp));
	}

	.mtct-phone__grid {
		grid-template-columns: 1fr;
		gap: calc(20 * var(--sp));
		margin-top: calc(40 * var(--sp));
	}

	.mtct-phone__office {
		width: 100%;
		padding: calc(30 * var(--sp)) 0;
		border-radius: calc(15 * var(--sp));
	}

	.mtct-phone__office--single {
		margin-top: calc(40 * var(--sp));
	}

	.mtct-phone__office-name {
		font-size: calc(24 * var(--sp));
		line-height: calc(24 * var(--sp));
	}

	.mtct-phone__office-row {
		gap: calc(8 * var(--sp));
		margin-top: calc(20 * var(--sp));
	}

	.mtct-phone__office-icon {
		width: calc(28 * var(--sp));
		height: calc(28 * var(--sp));
	}

	.mtct-phone__office-number {
		font-size: calc(45 * var(--sp));
		line-height: calc(45 * var(--sp));
	}

	.mtct-import-section {
		width: calc(690 * var(--sp));
		margin-top: calc(40 * var(--sp));
	}

	.mtct-import {
		padding: calc(80 * var(--sp)) calc(40 * var(--sp));
		border-radius: calc(30 * var(--sp));
	}

	.mtct-import__box {
		display: flex;
		width: 100%;
		height: calc(105 * var(--sp));
		margin-top: calc(40 * var(--sp));
		padding: 0;
		border-radius: calc(15 * var(--sp));
	}

	.mtct-import__box .mtct-phone__office-row {
		gap: calc(10 * var(--sp));
	}

	.mtct-import__box .mtct-phone__office-icon {
		width: calc(30 * var(--sp));
		height: calc(30 * var(--sp));
	}

	.mtct-breadcrumb {
		margin-top: calc(80 * var(--sp));
		padding-left: calc(40 * var(--sp));
	}

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

	.mtct-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));
	}
}