@charset "UTF-8";
/* CSS Document */
/* 旧デザインの画面（お問い合わせ・申込完了 等、新デザインのカンプがなくヘッダー・フッターのみ
   差し替える画面）に共通で読み込む書式補正用ファイル。
   旧ページ側のCSS（例: contact/css/index.css）は変更せず、後から読み込むこのファイルで
   新デザインの書式に合わせて上書き補正する。
   画面幅ごとの分割方針はcommon.css / common_sp.cssと同じ：
   本ファイルはPC向け（PC専用値＋PC・SP共通値）を書き、SP向けの上書きは
   common_transplant_sp.css（<link media="(max-width:768px)">経由のみ読み込み）に書く。
   タブレット幅（769〜1300px）の例外は、common.css自体の書き方にならい、
   本ファイル内に@media (min-width:769px) and (max-width:1300px)ブロックとして書く。 */

/* ==== PC・SP共通 ==== */
.main h1{
	font-family: var(--font-jp);
	font-weight: 700;
	letter-spacing: 1.6px;
	font-feature-settings: var(--font-feature-palt);
}
.main h1 span{ font-size: 16px; }
.forms .zcwf_row label{ font-size: 16px; }
.zcwf_col_fld .consentTxt{ font-size: 12px; }
.zcwf_col_fld + p.care{ font-size: 12px; }
.zcwf_row.dIB.zcwf_privacy_txt{ margin-bottom: 0; } /* .forms .zcwf_row{margin-bottom}の一般ルールより優先させるため3クラス指定にする */

/* 実値: Figma node 6165:16749。ピンクの角丸アウトラインボタン＋右矢印アイコン（.gBtn--outlineと同系統の見た目）。
   input[type=submit]は子要素を持てないため、アイコンはbackground-imageで右側に配置する。
   name属性・type・onsubmit等のフォーム機能は一切変更していない。見た目（CSS）のみの差し替え。 */
#formsubmit{
	background-color: var(--color-white);
	background-image: url(/images/common/icon_arrow-right.svg);
	background-repeat: no-repeat;
	background-position: right 24px center;
	background-size: 20px 20px;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.8px;
	line-height: 1.2;
	font-feature-settings: var(--font-feature-palt);
	border-radius: 999px;
	box-shadow: none;
	height: 48px; /* 実値: Figma node 2133:2613(Secondary outline, Size=48)。box-sizing:border-boxを付けないと
	   heightにpaddingが加算され48pxちょうどにならない */
	padding: 14px 48px 14px 24px;
	box-sizing: border-box;
	transition: background-color .3s;
}
#formsubmit:hover{ background-color: var(--color-primary-bg-2); }

/* 実値: Figma node 2133:2613(Secondary outline, Size=48, Icon=After)。.toHome自体はdisplay:block+width:280px+
   margin:0 autoでページ内の中央寄せをしているが、これはブロック要素としての外側の配置の話であり、
   display:flexにしても（inline-flexにしない限り）margin:0 autoによる中央寄せは効き続ける。
   内部のテキスト+アイコンをFigma通りのgap:8px・高さ48pxで中央揃えするため、flexレイアウトに変更する。 */
.toHome{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	background-color: var(--color-white);
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.8px;
	line-height: 1.2;
	font-feature-settings: var(--font-feature-palt);
	border-radius: 999px;
	box-shadow: none;
	padding: 14px 24px;
	box-sizing: border-box;
	transition: background-color .3s;
}
.toHome:hover{ background-color: var(--color-primary-bg-2); opacity: 1; } /* <a>タグのためcommon.cssのa:hover{opacity:.7}が重畳するのを打ち消す（Figma node 2133:2685のHoverにopacity変化は無い） */
.toHome__icon{ display: block; width: 20px; height: 20px; flex-shrink: 0; }
.toHome__icon img{ display: block; width: 100%; height: 100%; }

/* 実値: .toHome（お問い合わせ画面「申込完了」の「トップへ戻る」）と同じ書式を
   a.downloadBtn（資料ダウンロード画面「申込完了」の「資料をダウンロード」）にも反映する。
   元々あったa.downloadBtn::afterの白いダウンロードアイコン（背景画像）は、実際の子要素の
   アイコン（.downloadBtn__icon、ピンク版のicon_download-pink.svg）に置き換えるため無効化する。 */
a.downloadBtn::after{ content: none; }
a.downloadBtn{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	background-color: var(--color-white);
	background-image: none;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.8px;
	line-height: 1.2;
	font-feature-settings: var(--font-feature-palt);
	border-radius: 999px;
	box-shadow: none;
	padding: 14px 24px;
	box-sizing: border-box;
	transition: background-color .3s;
}
a.downloadBtn:hover{ background-color: var(--color-primary-bg-2); opacity: 1; }
.downloadBtn__icon{ display: block; width: 20px; height: 20px; flex-shrink: 0; }
.downloadBtn__icon img{ display: block; width: 100%; height: 100%; }

/* ==== PC ==== */
.main h1{ font-size: 40px; }
.main h1 span{ margin-top: 30px; }
.forms .zcwf_row{ margin-bottom: 25px; }

/* ==== タブレット（769〜1300px） ====
   実値: SP版と同じ見出しサイズにする例外。common.css自体の書き方（ヘッダーの769-1300例外）にならう。 */
@media (min-width: 769px) and (max-width: 1300px) {
	.main h1{ font-size: 24px; }
	#crmWebToEntityForm{ margin: 0 auto; } /* お問い合わせ・資料ダウンロード共通。#crmWebToEntityForm自身のmax-width:600pxのインラインスタイルを中央寄せする */
	/* 資料ダウンロード・紹介動画（申込）共通。すぐ上のスライド画像（.forms .img img、同じ.forms .img基準でwidth:75%）と
	   同じ幅・中央寄せにして、左端のツラを合わせる（本文自体は左寄せのまま） */
	.forms .img .commentary{ width: 75%; margin: 0 auto; box-sizing: border-box; }
}