@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');

body {
	color: var(--page-font-color) !important;
	background-color: var(--page-color);
	/*
	font-family: 'M PLUS Rounded 1c', sans-serif;
*/
}

@media print {

	header,
	footer {
		display: none;
	}
}

/* 本文 **/
p {
	font-size: 0.8rem;
}

span {
	font-size: 0.9rem;
}

@media (max-width: 575.98px) {

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


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

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

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

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

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

/* ラジオボタン */
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: 5px !important;
	font-size: 0.8rem;
	min-width: 200px;
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -15px;
	margin-right: 0px;
}

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

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

/* チェックボックス */
input[type=checkbox] {
	/* 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; */
}

/* 極小デバイス（縦向きモバイル, 576px 未満）の時はhoverのイベントを削除 */
@media (min-width: 575.98px) {
	input[type="checkbox"]:hover+label {
		background: var(--sub-checkbox-color) !important;
		color: var(--sub-checkbox-font-color) !important;
	}
}
input[type="checkbox"]:checked+label {
	background: var(--main-checkbox-color) !important;
	color: var(--main-checkbox-font-color) !important;
}
input[type="checkbox"]:disabled+label {
	cursor: not-allowed;
}

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

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

.checkbox_auto_size_label {
	/* マウスカーソルの形（リンクカーソル）を指定する */
	cursor: pointer;
	/* ボックスの境界線を実線で指定する */
	border: 1px solid #4d4d4d;
	/* 角丸を指定する */
	border-radius: 2px !important;
	font-size: 0.9rem;
	text-align: left;
	margin-left: -13px;
	margin-right: -13px;
}


/* ヘッダー */
.header {
	color: var(--header-font-color) !important;
	background-color: var(--header-color) !important;
	border-color: var(--main-color) !important;
	border-width: 2px !important;
	/*	
	font-family: 'Kosugi Maru', sans-serif;
	font-family: Arial, Helvetica, sans-serif;
	font-family: 'M PLUS Rounded 1c', sans-serif;
*/
	/*
	font-family: 'M PLUS Rounded 1c', sans-serif;
*/
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif;
}

/* コンテンツ */
.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.3rem;
}

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

/* 項目名ラベル **/
.item_label {
	font-weight: bold;
	font-size: 0.9rem;
}

/* 項目名サブラベル **/
.item_sub_label {
	font-size: 0.7rem;
}

/* 確認用項目名 **/
.confirm_title {
	font-size: 0.9rem;
}

/* 確認用項目値 **/
.confirm_value {
	font-size: 0.9rem;
}

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

	/* 項目名ラベル **/
	.item_label {
		font-size: 0.8rem;
	}

	/* 項目名サブラベル **/
	.item_sub_label {
		font-size: 0.7rem;
	}

	/* 確認用項目名 **/
	.confirm_title {
		font-size: 0.8rem;
	}

	/* 確認用項目値 **/
	.confirm_value {
		font-size: 0.8rem;
	}
}


/* 必須用バッジ */
.badge-required {
	position: relative;
	top: -2px;
	color: #fff;
	background-color: #cf5763;
}

/* 任意用バッジ */
.badge-optional {
	position: relative;
	top: -2px;
	color: #fff;
	background-color: #9fa8ea;
}

/* 入力用テーブル */
.input-table-header {
	background-color: var(--main-color) !important;
	color: var(--main-font-color);
	font-family: Arial, Helvetica, sans-serif;
	height: auto;
	padding-bottom: 5px;
}

.input-table-header span {
	position: relative;
	top: 2px;

}

.input-table {
	table-layout: fixed;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.input-table tr th:nth-child(1) {
	width: 34%;
}

/* 確認用テーブル */
.confirm-table-header {
	background-color: var(--main-color) !important;
	color: var(--main-font-color) !important;
	font-family: Arial, Helvetica, sans-serif;
	height: 32px;
}

.confirm-table-header label {
	position: relative;
	top: 3px;
}

.confirm-table {
	table-layout: fixed;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.confirm-table tr th:nth-child(1) {
	width: 34%;
}

.confirm-table th:nth-child(1) {
	background-color: #dddbdb !important;
	border: 1px solid #cfcfcf;
}

.confirm-table td {
	background-color: #fafafa !important;
	border: 1px solid #cfcfcf;
}

/* 極小デバイス（縦向きモバイル, 576px 未満）*/
@media (max-width: 575.98px) {
	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 81px;
	/* 背景色     */
	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;
}

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

.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 81px;
	/* 背景色     */
	background: #aba9b1;
	/* 文字色     */
	color: #fff;
	/* 1行の高さ  */
	line-height: 1em;
	/* なめらか変化 */
	transition: .3s;
	/* 枠の指定 */
	border: 2px solid #494949;
	font-size: 1.0rem;
}

.back_button:hover {
	color: #000;
	background: #ffffff;
}

.back_button:focus {
	color: #000;
	background: #ffffff;
}

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

.back_button2:hover {
	color: #000;
	background: #ffffff;
}

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

.correct_button:hover {
	color: #000;
	background: #ffffff;
}

.correct_button:focus {
	color: #000;
	background: #ffffff;
}

.button_disabled {
	/*	pointer-events: none;*/
	color: #000 !important;
	background: #c9c9c9 !important;
	border: 2px solid #494949;
}

/* --------------ヘッダーエリア-------------- */
.bank_name {
	font-size: 1.2rem;
	position: relative;
	top: 2px;
	margin: 0;
	padding: 0;
	color: var(--header-font-color);
}

.product_name {
	font-size: 1.0rem;
	position: relative;
	top: -2px;
	margin: 0;
	padding: 0;
	color: var(--header-font-color);
}

.bank_tel {
	font-size: 1.3rem;
	color: var(--header-font-color);
}

.bank_tel_logo {
	font-size: 1.3rem;
	color: var(--header-font-color);
}

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

	.bank_tel {
		font-size: 0.9rem;
	}

	.bank_tel_logo {
		font-size: 0.9rem;
	}
}

/* プログレスバー */
.progressbar {
	margin: 0;
	padding: 0;
	counter-reset: step;
	z-index: 0;
	position: relative;
}

.progressbar li {
	list-style-type: none;
	width: 25%;
	float: left;
	font-size: 12px;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	color: #aaa;
}

@media (max-width: 575.98px) {
	.progressbar li {
		font-size: 9px;
	}
}

.progressbar li:before {
	width: 20px;
	height: 20px;
	content: counter(step);
	counter-increment: step;
	line-height: 20px;
	display: block;
	text-align: center;
	margin: 0 auto 10px auto;
	border-radius: 50%;
	background-color: #eee;
}

.progressbar li:after {
	width: 100%;
	height: 2px;
	content: '';
	position: absolute;
	background-color: #eee;
	top: 10px;
	left: -50%;
	z-index: -1;
}

.progressbar li:first-child:after {
	content: none;
}

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

.progressbar li.active:before {
	background-color: var(--main-color);
	color: #fff;
}

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

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

.banner-pc {
	display: block;
}

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

	.banner-pc {
		display: none;
	}
}

@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: 10px;
	margin-bottom: 50px;
}

.link_box a {
	color: var(--main-link-font-color);
	background: var(--main-link-color);
	border: 1px solid #494949;
	;
	font-size: 0.9rem;
	height: 40px;
}

.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.9rem;
	height: 40px;
}

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

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

.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: #f7e0e0!important;*/
	background-color: #f3e1e1 !important;
}

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