@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/notosansjp.css');

body {
	color: var(--page-font-color) !important;
	background-color: var(--page-color);
	font-family: 'Noto Sans JP', sans-serif;
}

@media print {

	header,
	footer {
		display: none;
	}
}

/* 本文 **/
p {
	font-size: 0.8rem;
	margin-top: 0px;
	margin-bottom: 1px;
}

span {
	font-size: 0.9rem;
}

@media (max-width: 575.98px) {

	input,
	textarea,
	select,
	input::placeholder {
		font-size: 16px !important;
	}
}


@media (max-width: 575.98px) {
	div {
		font-size: 16px !important;
	}

	label {
		font-size: 16px !important;
	}

	span {
		font-size: 12.5px !important;
	}

	p {
		font-size: 11.5px !important;
	}

	table {
		font-size: 12.5px !important;
	}
}

/* ラジオボタン */
/* 極小デバイス（縦向きモバイル, 576px 未満）*/
@media (max-width: 575.98px) {
	.radio_field {
		margin-left: 2px;
		margin-right: 1px;
	}
}

input[type=radio] {
	/*	display: none; /* Tabがきかない */
	/* 透明度0 */
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	/* ブラウザのデフォルトのスタイルを削除 */
	/*
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	*/
	/* レイアウトから無視 */
	/* position: absolute; */
}
input[type="radio"]:hover+label {
	background: var(--sub-radio-color) !important;
	color: var(--sub-radio-font-color) !important;
}
input[type="radio"]:focus+label {
	background: var(--sub-radio-color) !important;
	color: var(--sub-radio-font-color) !important;
}
input[type="radio"]:checked+label {
	background: var(--main-radio-color) !important;
	color: var(--main-radio-font-color) !important;
}
input[type="radio"]:disabled+label {
	cursor: not-allowed;
}

.radio_label {
	/* マウスカーソルの形（リンクカーソル）を指定する */
	cursor: pointer;
	/* ボックスの境界線を実線で指定する */
	border: 1px solid #4d4d4d;
	/* 角丸を指定する */
	border-radius: 3px !important;
	font-size: 13px;
	min-width: 200px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -15px;
	margin-right: 0px;
	margin-top: 3px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

/* 極小デバイス（縦向きモバイル, 576px 未満）*/
@media (max-width: 575.98px) {
	.radio_label {
		width: 35.5vw;
		min-width: 35.5vw;
		min-height: 38px;
		font-size: 13px !important;
	}
}

.questionnaire_radio_label {
	/* マウスカーソルの形（リンクカーソル）を指定する */
	cursor: pointer;
	/* ボックスの境界線を実線で指定する */
	border: 1px solid #4d4d4d;
	/* 角丸を指定する */
	border-radius: 3px !important;
	font-size: 13px;
	width: 200px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -15px;
	margin-right: 0px;
	margin-top: 3px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

/* 極小デバイス（縦向きモバイル, 576px 未満）*/
@media (max-width: 575.98px) {
	.questionnaire_radio_label {
		width: 35.5vw;
		min-width: 35.5vw;
		min-height: 38px;
		font-size: 13px !important;
	}
}

.radio_label_block {
	/* マウスカーソルの形（リンクカーソル）を指定する */
	cursor: pointer;
	/* ボックスの境界線を実線で指定する */
	border: 1px solid #4d4d4d;
	/* 角丸を指定する */
	border-radius: 15px !important;
	font-size: 0.8rem;
	width: 100%;
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -15px;
	margin-top: 15px;
}

/* チェックボックス */

/* デフォルトのチェックボックスデザインを非表示にする */
.display_none_checkbox {
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

/** チェックボックス内のテキスト制御　※アイコンサイズから計算 */
.checkbox_text {
	font-size: 13px!important;
	float: left;
	max-width: 100%;
	position: relative;
	top: 2px;
	left: 10px;
	width: calc(100% - 10px);
}

/* ------- 同意チェックボックス ------- */

/** ラベル */
.agreement_checkbox_label {
	/* マウスカーソルの形（リンクカーソル）を指定する */
	cursor: pointer;
	/* ボックスの境界線を実線で指定する */
	border: 1px solid #4d4d4d;
	/* 角丸を指定する */
	border-radius: 15px !important;
	text-align: left;
	margin-left: -10px;
	margin-right: -10px;
	padding: 7px 20px 7px 15px;
}

/** checkedイベント制御 */
input[type="checkbox"]:checked+.agreement_checkbox_label {
	background: var(--main-checkbox-color) !important;
	color: var(--main-checkbox-font-color) !important;
}

/** disabledイベント制御 */
input[type="checkbox"]:disabled+.agreement_checkbox_label {
	cursor: not-allowed;
}

/* hoverイベント制御　※極小デバイス（縦向きモバイル, 576px 未満） */
@media (min-width: 575.98px) {
	input[type="checkbox"]:hover+.agreement_checkbox_label {
		background: var(--sub-checkbox-color) !important;
		color: var(--sub-checkbox-font-color) !important;
	}
}

/** checkedイベント時のアイコン制御　※チェック前 */
input[type="checkbox"] +.agreement_checkbox_label::before {
	content: '\f0c8';
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	float: left;
	width: 10px;
}

/** checkedイベント時のアイコン制御　　※チェック後 */
input[type="checkbox"]:checked+.agreement_checkbox_label::before {
	content: '\f00c';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	float: left;
	width: 10px;
}

/* ------- アンケートチェックボックス ------- */

/** ラベル */
.questionnaire_checkbox_label {
	/* マウスカーソルの形（リンクカーソル）を指定する */
	cursor: pointer;
	/* ボックスの境界線を実線で指定する */
	/*
	border: 1px solid #4d4d4d;
	*/
	/* 角丸を指定する */
	border-radius: 15px !important;
	text-align: left;
	margin-left: -10px;
	margin-right: -10px;
	padding: 7px 20px 7px 15px;	
}

/** checkedイベント制御 */
input[type="checkbox"]:checked+.questionnaire_checkbox_label {
	background: var(--main-checkbox-color) !important;
	color: var(--main-checkbox-font-color) !important;
}

/** disabledイベント制御 */
input[type="checkbox"]:disabled+.questionnaire_checkbox_label {
	cursor: not-allowed;
}

/* hoverイベント制御　※極小デバイス（縦向きモバイル, 576px 未満） */
@media (min-width: 575.98px) {
	input[type="checkbox"]:hover+.questionnaire_checkbox_label {
		background: var(--sub-checkbox-color) !important;
		color: var(--sub-checkbox-font-color) !important;
	}
}

/** checkedイベント時のアイコン制御　※チェック前 */
input[type="checkbox"] +.questionnaire_checkbox_label::before {
	content: '\f0c8';
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	float: left;
	width: 10px;
}

/** checkedイベント時のアイコン制御　　※チェック後 */
input[type="checkbox"]:checked+.questionnaire_checkbox_label::before {
	content: '\f00c';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	float: left;
	width: 10px;
}

/* スマホ時の縦並び制御　※極小デバイス（縦向きモバイル, 576px 未満） */
@media (max-width: 575.98px) {
	.questionnaire_checkbox_items {
		display: block!important;
	}

	.questionnaire_checkbox_label {
		width: 100% !important;
		min-width: 100% !important;
		font-size: 0.9rem !important;
		padding: 7px 10px 7px 10px;
	}
}


/* ヘッダー */
.header {
	color: var(--header-font-color) !important;
	background-color: var(--header-color) !important;
	border-color: var(--main-color) !important;
	border-width: 2px !important;
}

/* コンテンツ */
.contents {
	max-width: 1280px;
	margin: auto;
}

/* フッター */
.footer {
	font-size: 11px;
	color: var(--footer-font-color) !important;
	background-color: var(--footer-color) !important;
	border-color: var(--main-color) !important;
	border-width: 2px !important;
}

/* エラーカラー */
.error {
	background: #FFEEFF;
	color: #000;
}

/* ページタイトルラベル */
.page_title_label {
	/*上下 左右の余白*/
	padding: 0.05em 0.5em;
	/*文字色*/
	color: #494949;
	/*背景透明に*/
	background: transparent;
	/*左線*/
	border-left: solid 5px var(--main-color);
	font-size: 1.2rem;
}

/* ページサブタイトルラベル */
.page_sub_title_label {
	/*上下 左右の余白*/
	padding: 0.05em 0.5em;
	/*文字色*/
	color: #494949;
	/*背景透明に*/
	background: transparent;
	/*左線*/
	border-left: solid 5px var(--sub-color);
	font-size: 1.1rem;
}

/* ブロック名ラベル **/
.block_label {
	font-weight: bold;
	font-size: 0.9rem!important;
	margin: 0px 0px 0px 10px;
	top: 2px!important;
}

/* 項目名ラベル **/
.item_label {
	font-weight: bold;
	font-size: 0.9rem!important;
	margin-bottom: 1px;
}

/* 項目名サブラベル **/
.item_sub_label {
	font-size: 0.8rem!important;
	margin-bottom: 0px;
}

/* 項目備考テキスト **/
.item_note {
	margin-bottom: 1px;
}

/* 確認テーブル項目名 **/
.confirm_title {
	font-size: 0.9rem!important;
}

/* 確認テーブル項目値 **/
.confirm_value {
	font-size: 0.9rem!important;
}

/* 必須用バッジ */
.badge-required {
	position: relative;
	top: -1px;
	color: #e62134;
	background-color: #ffc8cf;
	border-radius: 10%;
	border: #e0a1a7 solid 1px;
}

/* 任意用バッジ */
.badge-optional {
	position: relative;
	top: -1px;
	color: #6476ff;
	background-color: #e8ebff;
	border-radius: 10%;
	border: #b2bbfc solid 1px;
}

/* 入力用テーブルヘッダー */
.input-table-header {
	background-color: var(--main-color) !important;
	color: var(--main-font-color);
	height: auto;
	padding-bottom: 5px;
}

/* 入力用テーブルヘッダー　span */
.input-table-header span {
	position: relative;
	top: 2px;
}

/* 入力用テーブル */
.input-table {
	table-layout: fixed;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* 入力用テーブルヘッダー tr th */
.input-table tr th:nth-child(1) {
	width: 34%;
}

/* 確認用テーブルヘッダー */
.confirm-table-header {
	background-color: var(--main-color) !important;
	color: var(--main-font-color) !important;
	min-height: 32px;
	height: auto;
}

/* 確認用テーブル label */
.confirm-table-header label {
	position: relative;
	top: 3px;
}

/* 確認用テーブル */
.confirm-table {
	table-layout: fixed;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* 確認用テーブル tr th */
.confirm-table tr th:nth-child(1) {
	width: 34%;
}

/* 確認用テーブル th */
.confirm-table th:nth-child(1) {
	background-color: #dddbdb !important;
	border: 1px solid #cfcfcf;
}

/* 確認用テーブル th */
.confirm-table th {
	padding: 2px 2px 2px 10px !important;
}

/* 確認用テーブル th label */
.confirm-table th label {
	margin: 0px !important;
}

/* 確認用テーブル td */
.confirm-table td {
	background-color: #fafafa !important;
	border: 1px solid #cfcfcf;
	padding: 3px 3px 3px 10px !important;
}

/* 極小デバイス（縦向きモバイル, 576px 未満）*/
@media (max-width: 575.98px) {

	/* 確認用テーブル th td */
	table.confirm-table th,
	table.confirm-table td{
		width:100%  !important;
		display:block  !important;
	}
}

/* 送信ボタン */
.send_button {
	display: inline-block;
	/* 文字サイズ */
	font-size: 18pt;
	/* 文字位置   */
	text-align: center;
	/* カーソル   */
	cursor: pointer;
	/* 余白       */
	padding: 10px 8px;
	/* 背景色     */
	background: var(--main-button-color);
	/* 文字色     */
	color: var(--main-button-font-color);
	/* 1行の高さ  */
	line-height: 1em;
	/* なめらか変化 */
	transition: .3s;
	/* 枠の指定 */
	border: 2px solid #494949;
	font-size: 1.0rem;

	/* 丸み */
	border-radius: 10px;
	min-width: 250px;
}

/* 送信ボタン hover */
.send_button:hover {
	background: var(--sub-button-color);
	color: var(--sub-button-font-color);
}

/* 送信ボタン focus */
.send_button:focus {
	background: var(--sub-button-color);
	color: var(--sub-button-font-color);
}

/* 戻るボタン */
.back_button {
	display: inline-block;
	/* 文字サイズ */
	font-size: 18pt;
	/* 文字位置   */
	text-align: center;
	/* カーソル   */
	cursor: pointer;
	/* 余白       */
	padding: 10px 8px;
	/* 背景色     */
	background: #fff;
	/* 文字色     */
	color: #929292;
	/* 1行の高さ  */
	line-height: 1em;
	/* なめらか変化 */
	transition: .3s;
	/* 枠の指定 */
	border: 2px solid #494949;
	font-size: 1.0rem;

	/* 丸み */
	border-radius: 10px;
	min-width: 150px;
}

/* 戻るボタン hover */
.back_button:hover {
	color: #000;
	background: #ffffff;
}

/* 戻るボタン focus */
.back_button:focus {
	color: #000;
	background: #ffffff;
}

/* 戻るボタン2 */
.back_button2 {
	display: inline-block;
	/* 文字サイズ */
	font-size: 10pt !important;
	/* 文字位置   */
	text-align: center;
	/* カーソル   */
	cursor: pointer;
	/* 余白       */
	padding: 5px 10px;
	/* 背景色     */
	background: #fff;
	/* 文字色     */
	color: #707070;
	/* 1行の高さ  */
	line-height: 1em;
	/* なめらか変化 */
	transition: .3s;
	/* 枠の指定 */
	border: 2px solid #494949;
	font-size: 1.0rem;

	/* 丸み */
	border-radius: 100px;
}

/* 戻るボタン2 hover */
.back_button2:hover {
	color: #000;
	background: #ffffff;
}

/* 戻るボタン2 focus */
.back_button2:focus {
	color: #000;
	background: #ffffff;
}


/* 修正ボタン */
.correct_button {
	display: inline-block;
	/* 文字サイズ */
	font-size: 11pt;
	/* 文字位置   */
	text-align: center;
	/* カーソル   */
	cursor: pointer;
	/* 背景色     */
	background: #aba9b1;
	/* 文字色     */
	color: #fff;
	/* 1行の高さ  */
	line-height: 1.0em;
	/* なめらか変化 */
	transition: .3s;
	/* 枠の指定 */
	border: 2px solid #494949;
	height: 32px;
	position: relative;
	top: 0px;
	position: relative;
	left: 30px;
}

/* 修正ボタン hover */
.correct_button:hover {
	color: #000;
	background: #ffffff;
}

/* 修正ボタン focus */
.correct_button:focus {
	color: #000;
	background: #ffffff;
}


/* --------------ヘッダーエリア-------------- */
.bank_name {
	font-size: 16px !important;
	position: relative;
	top: 0px;
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: var(--header-font-color);
}

.product_name {
	font-size: 14px !important;
	position: relative;
	top: 0px;
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: var(--header-font-color);
}

.bank_tel {
	font-size: 16px !important;
	position: relative;
	top: 0px;
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: var(--header-font-color);
}

.bank_tel_logo {
	font-size: 16px !important;
	position: relative;
	top: 0px;
	margin: 0;
	padding: 0;
	color: var(--header-font-color);
}

/* 極小デバイス（縦向きモバイル, 576px 未満）*/
@media (max-width: 575.98px) {
	.bank_name {
		font-size: 13px !important;
	}

	.product_name {
		font-size: 12px !important;
	}

	.bank_tel {
		font-size: 12px !important;
	}

	.bank_tel_logo {
		font-size: 12px !important;
	}
}

/* プログレスバー */
.cw-progress {
	height: 14px;
	border-radius: 100px;
}

.cw-progress-bar {
	background-color: var(--sub-color);
}

.cw-progress-bar-complete {
	font-weight: bold;
	font-size: 11px !important;
}


/* --------------------- バナー画像 ----------------------- */
.banner-sp {
	display: none;
}

.banner-pc {
	display: block;
}

/* 極小デバイス（縦向きモバイル, 576px 未満）*/
@media (max-width: 575.98px) {
	.banner-sp {
		display: block;
	}

	.banner-pc {
		display: none;
	}
}

/* --------------------- お問い合わせバナー画像 PG作成 ----------------------- */

@media (min-width: 575.98px) {
	/* pcバナー画像 */
	.contact_banner {
		width: 890px;
		margin-left: auto;
		margin-right: auto;
	}

	.contact_banner_title {
		font-weight: bold;
		/* 文字位置   */
		text-align: center;
		/* 余白       */
		padding: 8px;
		/* 背景色     */
		background: #413e4d;
		/* 文字色     */
		color: var(--main-button-font-color);
		/* 1行の高さ  */
		line-height: 1;
		/* 枠の指定 */
		border: 2px solid #494949;
		/* 角丸を指定する */
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.contact_banner_text {
		/* 余白       */
		padding: 10px;
		/* 枠の指定 */
		border: 2px solid #494949;
		/* 角丸を指定する */
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.contact_banner_name_pc {
		font-weight: bold;
		/* 文字位置   */
		text-align: center;
	}

	.contact_banner_name_sp {
		display: none;
	}

	.contact_banner_tel_hours {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		column-gap: 8px;
	}

	.contact_banner_tel_hours img {
		width: 5%;
		height: 5%;
	}

	.contact_banner_tel {
		/* 文字サイズ */
		font-size: 3.0rem;
		font-weight: bold;
		/* 文字色     */
		color: #FF0000;
	}

	.contact_banner_business_hours {
		display: none;
	}

	.contact_banner_business_hours_flex {
		/* 文字サイズ */
		font-size: 0.7rem;
		font-weight: bold;
		/* 文字位置   */
		text-align: left;
		/* 1行の高さ  */
		line-height: 1.1;
	}
}

@media (max-width: 575.98px) {
	/* spバナー画像 */
	.contact_banner {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.contact_banner_title {
		/* 文字サイズ */
		font-size: 3.8vw !important;
		font-weight: bold;
		/* 文字位置   */
		text-align: center;
		/* 余白       */
		padding: 5px;
		/* 背景色     */
		background: #413e4d;
		/* 文字色     */
		color: var(--main-button-font-color);
		/* 1行の高さ  */
		line-height: 1em;
		/* 枠の指定 */
		border: 2px solid #494949;
		/* 角丸を指定する */
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.contact_banner_text {
		/* 余白       */
		padding: 8px;
		/* 1行の高さ  */
		line-height: 1.8em;
		/* 枠の指定 */
		border: 2px solid #494949;
		/* 角丸を指定する */
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}

	.contact_banner_name_pc {
		display: none;
	}

	.contact_banner_name_sp {
		/* 文字サイズ */
		font-size: 3.8vw !important;
		font-weight: bold;
		/* 文字位置   */
		text-align: center;
		white-space: nowrap;
	}

	.contact_banner_tel_hours {
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 5px;
		row-gap: 5px;
		flex-wrap: wrap;
	}

	.contact_banner_tel_hours img {
		width: 10%;
		height: 10%;
	}

	.contact_banner_tel {
		/* 文字サイズ */
		font-size: 11vw !important;
		font-weight: bold;
		/* 文字色     */
		color: #FF0000;
	}

	.contact_banner_business_hours {
		/* 文字サイズ */
		font-size: 2.5vw !important;
		font-weight: bold;
		/* 文字位置   */
		text-align: left;
		/* 1行の高さ  */
		line-height: 1em;
	}

	.contact_banner_business_hours_flex {
		display: none;
	}
}

/* --------------------- 案内文 ----------------------- */

.pc-center {
	text-align: center;
}

/* 極小デバイス（縦向きモバイル, 576px 未満）*/
@media (max-width: 575.98px) {
	.pc-center {
		text-align: left;
	}
}

/* -------------------- 同意規約リンク -------------------- */
.link_box {
	margin-top: 5px;
	margin-bottom: 5px;
	
	padding: 5px 1px 5px 3px;
	color: var(--main-link-font-color);
	background: var(--main-link-color);
	/* 丸み */
	border-radius: 10px;
}

.link_box a {
	
	color: var(--main-link-font-color);
	/*
	background: var(--main-link-color);
	border: 1px solid #494949;
	*/
	font-size: 0.8rem;
	height: 25px;

	text-decoration: underline;
}

.link_box a:hover {
	color: var(--sub-link-font-color);
	background: var(--sub-link-color);
}

.link_box button {
	
	color: var(--main-link-font-color);
	/*
	background: var(--main-link-color);
	*/
	font-size: 0.8rem;
	height: 25px;

	text-decoration: underline;
}

.link_box button:hover {
	color: var(--sub-link-font-color);
	background: var(--sub-link-color);
}

.link_box_note {
	
	color: var(--sub-link-font-color);
	/*background: var(--sub-link-color);*/
	padding: 5px 5px 5px 10px;
	font-size: 12px !important;
}

.link_box div {
	font-size: 14.5px !important;
}

@media (max-width: 575.98px) {
	.link_box div {
		font-size: 13px !important;
	}
}

/* -------------------- エラーバルーン ---------------------*/
.error_balloon_box {
	position: absolute;
	top: -20px;
	left: 10px;
	color: #FF0000;
	display: block;
	white-space: nowrap;
}

.error_balloon {
	display: block;
	/* display: inline-block; */
	position: relative;
	margin-bottom: 10px;
	padding: 0px 5px;
	background-color: #cfcdcd;
	z-index: 999;
	min-width: 150px;
	min-height: 20px;
	width: auto;
}

.error_balloon:after {
	position: absolute;
	bottom: -12px;
	left: 20px;
	border-top: 12px solid #cfcdcd;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	content: '';
	margin-left: -10px;
}

/* -------------------- エラー色 ---------------------*/
.error_bg {
	background-color: #f3e1e1 !important;
	border: 1px solid #b6b6b6;
	appearance: none;
}

/* -------------------- サムネ画像 ---------------------*/
.thumbnail_image {
	width: 200px;
	height: auto;
}

/* -------------------- 小フォント ---------------------*/
.font7 {
	font-size: 7px;
}

.font8 {
	font-size: 8px;
}

.font9 {
	font-size: 9px;
}

.font10 {
	font-size: 10px;
}

.font11 {
	font-size: 11px;
}

.font12 {
	font-size: 12px;
}

.font13 {
	font-size: 13px;
}

.font14 {
	font-size: 14px;
}

.font15 {
	font-size: 15px;
}