@charset "utf-8";

/*
###################################################

  瀬戸埠頭 フォームのカスタム CSS
  static/css/import.form.css（キット本体）の後に読む。キット更新時はこのファイルを残す
  色はサイト共通の変数（cmn/css/style.css の --color-main / --color-pickup）を使う

###################################################
*/


/*++++++++++++ フォームで使う変数 ++++++++++++*/
/* サイト側（cmn/css/style.css）に無い段だけをここで足す。サイト全体の CSS には手を入れない */
:root {
	--color-main-rgb: 18, 21, 107; /* --color-main（#12156b）の RGB。透明度つきで使う */
	--color-text-sub: #737373;
	--text-note: 1.2rem;
}


/*++++++++++++ サイト側 cmn/css/form.css との衝突を解消 ++++++++++++*/

/* サイトの clearfix 疑似要素がグリッドの1マスを占有して列がずれるため消す */
.Fieldset dl::before,
.Fieldset dl::after {
	content: none;
}

/* サイトの float と固定幅（17em）を外して、キットのグリッドに任せる */
.Fieldset dt {
	float: none;
	width: auto;
}

/* サイトの select { height: 30px; line-height: 3 } でキットの余白に文字が押しつぶされるため戻す */
.select select {
	height: auto;
	line-height: 1.5;
}


/*++++++++++++ 配色（キットの青・緑・橙 → サイトの紺・赤） ++++++++++++*/

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
	border-color: var(--color-main);
}

.control input:focus ~ .control__indicator {
	box-shadow: 0 0 0 2px rgba(var(--color-main-rgb), 0.15);
}

.control input:checked ~ .control__indicator,
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
	background: var(--color-main);
}

/* 「必須」の札 */
.required_label::before {
	background-color: var(--color-pickup);
}

/* 入力済みのチェック */
.required_label_fix {
	background-color: var(--color-main);
}

.progressbar li.active {
	color: var(--color-main);
}

.progressbar li.active::before,
.progressbar li.active + li::after {
	background-color: var(--color-main);
}

.send_btn {
	border-color: var(--color-main);
	background-color: var(--color-main);
}

.thanks_message_label {
	border-color: var(--color-main);
	color: var(--color-main);
}


/*++++++++++++ 項目まわり ++++++++++++*/

/* 見出しの補足（「（複数選択可）」）。キットの JS が dt 内の span に入力済みの印を付けるため small で組む */
.dt_note {
	display: inline-block;
	font-size: var(--text-note);
	font-weight: 400;
}

/* 入力欄の下の注記 */
.field_note {
	margin-top: 0.8rem;
	font-size: var(--text-note);
	color: var(--color-text-sub);
}

/* ステップの下に余白を取り、項目の区切り線と離す */
/* li が float のため ul の高さが 0 になり margin が効かない。flow-root で float を内側に収める */
.progressbar {
	display: flow-root;
	margin-bottom: 4.8rem;
}

/* 入力画面・確認画面の冒頭の案内文 */
.form-message {
	margin-bottom: 3.2rem;
}


/*++++++++++++ 問い合わせ管理画面 ++++++++++++*/

/* 一覧にフォームの全項目を並べるため、管理画面の幅（1000px）からはみ出す分は横スクロールにする */
.admin_data_lis_wrap {
	overflow-x: auto;
}

/* 見出しと値を折り返さず1行で見せる（長文の列は index.php で先頭30文字に切っている） */
table.admin_data_list th,
table.admin_data_list td {
	white-space: nowrap;
}