@charset "utf-8";


/*-------------------------------------
#ime-mode
---------------------------------------*/
.ime_on {
	ime-mode: active;
}

.ime_off {
	ime-mode: inactive;
}

.ime_none {
	ime-mode: disabled;
}

.formright {
	text-align: right;
}

.formcenter {
	text-align: center;
}

.formleft {
	text-align: left;
}

/*-------------------------------------
#
---------------------------------------*/
/* --- 見出しエリア --- */
div.midashi {
	background: #436F92;
	width: 100%;
	padding: 0; 						/* 見出しエリアのパディング（上下、左右） */
	border-bottom: 1px #c0c0c0 solid; 	/* 見出しエリアの下境界線 */
}

/* --- 見出しエリア --- */
div.midashi div.title {
	padding: 10px 5px; 					/* 見出しエリアのパディング（上下、左右） */
	text-align: left;
	color: #fff;
}

/* --- 見出し --- */
div.midashi div.title p {
	margin: 0;
	padding: 3px 3px 0 5px; 			/* 見出しのパディング（上右下左） */
	padding: 2px 5px;
	border-left: 5px #fff solid; 		/* 見出しの左境界線 */
	font-size: 100%; 					/* 見出しの文字サイズ */
	line-height: 100%;
}

.inputtitle {
	background: #D8F3F7 none repeat scroll 0 0;
	background: -moz-linear-gradient(#D8F3F7, #B6ECF3);
	background: -webkit-linear-gradient(#D8F3F7, #B6ECF3);
	background: -ms-linear-gradient(#D8F3F7, #B6ECF3);
	background: #f1f3e8 none repeat scroll 0 0;
	background: -moz-linear-gradient(#e9ecda, #f1f3e8);
	background: -webkit-linear-gradient(#e9ecda, #f1f3e8);
	background: -ms-linear-gradient(#e9ecda, #f1f3e8);
	border-right: 1px solid #C2C89E;
	border-bottom: 1px solid #C2C89E;
	background: #EDECCD none repeat scroll 0 0;
	border-bottom: 1px #c0c0c0 solid;
	padding: 6px;
	text-align: left;
}

.selectform {
	width: 100%;
}

.selectform .element {
	margin: 5px 5px 10px;
/*	text-align: center;	*/
}

/*-------------------------------------
#input要素全て
---------------------------------------*/
input {
	padding: 5px;
	font-size: 1.0em;
}


input:focus, input:hover {
	background: none repeat scroll 0 0 #ACF3FF;
}

.focus {
	background: none repeat scroll 0 0 #ACF3FF;
	border: 1px solid #aaa;
}

/*-------------------------------------
#ラジオボタン・チェックボックス
---------------------------------------*/

label {
	font-size: 1em;
	font-weight: normal;
}

input.radio {
	display:inline-block; 
	width:20px; 
	height:30px; 
	vertical-align:top;
}

label.radiolabel {
	display:inline-block; 
	background: none repeat scroll 0 0 #fafafa;
	background: -moz-linear-gradient(top,#fafafa 0%,#fff);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#F0F0F0));
	border: 1px solid #ccc;
	padding: 5px 1%;
	width: 97.5%;
}

label.radiolabelfree {
	display:inline-block; 
	background: none repeat scroll 0 0 #fafafa;
	background: -moz-linear-gradient(top,#fafafa 0%,#fff);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#F0F0F0));
	border: 1px solid #ccc;
	padding: 5px 1%;
}

ul.radiolabel {
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
}

ul.radiolabel li {
	width: 49.0%;
	float: left;
	background: none repeat scroll 0 0 #fafafa;
	background: -moz-linear-gradient(top,#fafafa 0%,#fff);
	background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
	margin: 0 0%;
}

ul.retu2 li {
	width: 49.0%;
}

ul.retu3 li {
	width: 33.3%;
}

ul.retu4 li {
	width: 24.9%;
}

ul.retu5 li {
	width: 19.9%;
}

ul.radiolabel li.full {
	width: 96.0%;
}

ul.radiolabel li.free {
	width: auto;
}

/*-------------------------------------
#セレクトボックス
---------------------------------------*/
select {
	padding: 10px 5px;
	border: 1px solid #aaa;
}

/*-------------------------------------
#テキストエリア
---------------------------------------*/
textarea {
	padding: 5px;
}

textarea:focus, textarea:hover {
	background: none repeat scroll 0 0 #ACF3FF;
	border: 1px solid #aaa;
	margin: 1px;
}


/*-------------------------------------
#テキストボックス
---------------------------------------*/
.selectform .element input[type=text] {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	font-size: 14px;
	border: 1px solid #aaa;
	margin: 1px;
}

.selectform .element input[type=password] {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	font-size: 14px;
	border: 1px solid #aaa;
	margin: 1px;
}

.selectform .element input[type=tel] {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	font-size: 14px;
	border: 1px solid #aaa;
	margin: 1px;
}

.element input[type=text] {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	font-size: 100%;
	width: 98%;
	border: 1px solid #aaa;
	margin: 1px;
}

/*-------------------------------------
#submit
---------------------------------------*/
.element input[type=submit] {
	background: #0099CC ; /* #006837; */
	background: -moz-linear-gradient(top,#0099CC 0%,#006699);
	background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699));
/*	background: #329ad6;	*/
	border: 2px solid #006699;
	color: #fff;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	border-width:0;
	padding: 7px;
	font-size: 100%;
}

.element input[type=submit].simple {
	background: #fff ; /* #006837; */
	background: -moz-linear-gradient(top,#fff 0%,#fafafa);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fafafa));
	border: 2px solid #fafafa;
	color: #111;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	border-width:0;
	padding: 7px;
	font-size: 100%;
}

.element input[type=submit]:disabled {
	background: #eee ; /* #006837; */
	background: -moz-linear-gradient(top,#fff 0%,#fafafa);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fafafa));
	border: 2px solid #fafafa;
	color: #aaa;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	border-width:0;
	padding: 7px;
	font-size: 100%;
}

/*-------------------------------------
#button
---------------------------------------*/
.element button {
	background: #0099CC ; /* #006837; */
	background: -moz-linear-gradient(top,#0099CC 0%,#006699);
	background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699));
	border: 2px solid #006699;
	color: #fff;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	border-width:0;
	padding: 7px;
	font-size: 100%;
}

.element button.modoru {
	background: #fff ; /* #006837; */
	background: -moz-linear-gradient(top,#fff 0%,#fafafa);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fafafa));
	border: 2px solid #fafafa;
	color: #111;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	border-width:0;
	padding: 7px;
	font-size: 100%;
}

.element button.entry {
	background: #fff ; /* #006837; */
	background: -moz-linear-gradient(top,#fff 0%,#fefefe);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fefefe));
	border: 2px solid #f3f3f3;
	color: #1d3994;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	border-width:0;
	padding: 7px;
	font-size: 100%;
	width: 100%;
	margin-bottom: 0.5em;
}

.element button.entry:hover {
	cursor: pointer;
}

/*-------------------------------------
p.button
---------------------------------------*/
.element p.button {
	background: #0099CC ; /* #006837; */
	background: -moz-linear-gradient(top,#0099CC 0%,#006699);
	background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699));
	border: 2px solid #006699;
	color: #fff;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	border-width:0;
	padding: 7px;
	font-size: 100%;
	text-align: center;
}

.element p.button_simple {
	background: #fff ; /* #006837; */
	background: -moz-linear-gradient(top,#fff 0%,#fafafa);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fafafa));
	border: 2px solid #fafafa;
	color: #111;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	border-width:0;
	padding: 7px;
	font-size: 100%;
	text-align: center;
}

.element p.button.entry {
	background: #fff ; /* #006837; */
	background: -moz-linear-gradient(top,#f0f0f0 0%,#f3f3f3);
	background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#f3f3f3));
	border: 2px solid #fafafa;
	color: #111;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	border-width:0;
	padding: 7px;
	font-size: 100%;
	text-align: center;
	margin-bottom: 0.5em;
}

.element p.button a {
	display: block;
	color: #FFF;
}

.element p.button_simple a {
	display: block;
	color: #111;
}

.element p.button.entry a {
	display: block;
	color: #1d3994;
}


/*-------------------------------------
 stepBar
---------------------------------------*/
.stepBar {
	display: flex;
	width: 100%;
	position: relative;
	margin: 20px auto;
	text-align: center;
}
.stepBar li {
	float: left\9; /* IE10以下 */
	font-size: 14px;
	list-style: none;
	position: relative;
	width: 33.333%;
}
.stepBar li:after {
	background: #D0E1F9;
	content: "";
	width: calc(100% - 24px);
	height: 4px;
	position: absolute;
	left: calc(-50% + 12px);
	top: 10px;
}
.stepBar li:first-child:after {
	display: none;
}
.stepBar li span {
	background: #D0E1F9;
	color: #ffffff;
	display: inline-block;
	height: 24px;
	margin-bottom: 5px;
	line-height: 24px;
	width: 24px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.stepBar .visited:after {
	background: #4D648D;
}
.stepBar .visited span {
	background: #4D648D;
}

/*-------------------------------------
 step
---------------------------------------*/
.step {
	display: flex;
	width: 100%;
	height: 40px;
	margin: 20px auto;
	padding: 0;
	margin-bottom: 40px;
}
.step li {
	width: 90px;
	height: 40px;
	line-height: 40px;
	list-style: none;
	float: left\9; /* IE10以下 */
	border: 1px solid #fff;
	position: relative;
	text-align: center;
	background-color: #f0efef;
	font-size: 16px;
}
.step li.active {
	background-color: #007bff;
	color: #FFF;
}
.step li span.before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 0 20px 20px;
	border-color: transparent transparent transparent #fff;
	line-height: 0px;
	_border-color: #000000 #000000 #000000 #fff;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
	position: absolute;
	left: 0px;
	z-index: 10;
}
.step li.first span.before {
	border: none;
}
.step li span.after {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 0 20px 19px;
	border-color: transparent transparent transparent #f0efef;
	line-height: 0px;
	_border-color: #000000 #000000 #000000 #007bff;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#007bff');
	position: absolute;
	right: -19px;
	z-index: 50;
}
.step li.active span.after {
	border-color: transparent transparent transparent #007bff;
}

.message {
	padding: 5px;
	color: #111;
}

.error_message {
	padding: 5px;
	color: #c00;
}





/*-------------------------------------
 レスポンシブテーブル
---------------------------------------*/
/* パソコン用 */
@media screen and (min-width: 768px), print {

	table.responsive {
		width: 100%;
		background-color: #fff;
	}

	table.responsive th  { 
		padding: 5px;
		border: 1px solid #fafafa; 
		background: #EDECCD;
		width: 20%;
		font-weight: 600;
		white-space: nowrap;
		text-align: left;
	}
	table.responsive td { 
		text-align: left;
		width: 79%;
	}

	table.responsive_half {
		width: 100%;
	}

	table.responsive_half th  { 
		padding: 5px;
		border: 1px solid #fafafa; 
		background: #329ad6;
		width: 25%;
		color: #fff;
	}
	table.responsive_half td { 
		text-align: left;
		width: 25%;
	}
}
	
/* スマホ用 */
@media only screen and (max-width: 767px) {

	table.responsive {
		width: 100%;
		margin: 0px;
		background-color: #fff;
		border-spacing: 0px;
	}
	table.responsive tr {
		display:block;
		margin-bottom: 5px;
	}
	table.responsive th {
		display:block;
		width: 95%;
		padding: 0.5em;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		background: #EDECCD;
		font-weight: 600;
		text-align: left;
	}
	table.responsive td {
		display: block;
		width: 95%;
		border: none;
		padding: 5px 1px;
	}

	table.responsive_half {
		margin: 0px;
		background-color: #fff;
	}
	table.responsive_half tr {
		display:block;
		margin-bottom: 5px;
	}
	table.responsive_half th {
		display:block;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		background: #329ad6;
		width: 95%;
		color: #fff;
	}
	table.responsive_half td {
		display: block;
		width: 95%;
		border: none;
		padding: 5px 2px;
	}
}

.inputtitle p span.setsumei {
	font-size: 0.8em;
}

/*-------------------------------------
 解約理由
---------------------------------------*/
.book-checkbox {
	display: flex;
	flex-wrap: wrap;
}
	
/* パソコン用 */
@media screen and (min-width: 768px), print {

	.book-checkbox p {
		width: 49.5%
	}

}
	
/* スマホ用 */
@media only screen and (max-width: 767px) {

	.book-checkbox p {
		width: 99.5%
	}

}

.book-checkbox-input{
	display: none;
}

.book-checkbox-parts{
	padding-left: 20px;
	position:relative;
	margin-right: 20px;
}

.book-checkbox-parts::before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	border: 1px solid #999;
	border-radius: 4px;
}

.book-checkbox-input:checked + .book-checkbox-parts{
	color: #c00;
}

.book-checkbox-input:checked + .book-checkbox-parts::after{
	content: "";
	display: block;
	position: absolute;
	top: -5px;
	left: 5px;
	width: 7px;
	height: 14px;
	transform: rotate(40deg);
	border-bottom: 3px solid #c00;
	border-right: 3px solid #c00;
}