@charset "utf-8";

/*----------------------------------------------------------------------

input, button

----------------------------------------------------------------------*/
input, select {
	font-size: 16px;
	line-height: 1;
}

input[type="radio"] {
	width: 17px;
	height: 17px;
}

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;

	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	border-radius: 4px;
	border: 1px solid #e0e0e0;

	width: 100%;
	height: 45px;

	padding: 0 15px;

	font-size: 16px;
	line-height: 1;
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus {
	outline: none;
	border: 1px solid #eb5505;
	border-radius: 4px;
}

input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder {
	color: #757575;
}
input[type="text"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder {
	padding-top: 0.1em;
}
/* IE */
input[type="text"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder {
	color: #757575;
}
/* Edge */
input[type="text"]::-ms-input-placeholder,
input[type="tel"]::-ms-input-placeholder,
input[type="number"]::-ms-input-placeholder,
input[type="password"]::-ms-input-placeholder {
	color: #757575;
}



/*----------------------------------------------------------------------

radio

----------------------------------------------------------------------*/
input[type="radio"].radio {
	display: none;
}
label.radio_label {
	padding-left: 30px;
	position:relative;
	margin-right: 30px;

	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	color: #333;

	min-height: 20px;

	display: flex;
	align-items: center;
}
label.radio_label.col_4 {
	padding-left: 24px;
	margin-right: 15px;
}
label.radio_label .label::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	border: 1px solid #707070;
	border-radius: 50%;
}
input[type="radio"].radio:checked + .label::after {
	content: "";
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 10px;
	height: 10px;
	background: #eb5505;
	border-radius: 50%;
}



/*----------------------------------------------------------------------

パスワードチェッカー

----------------------------------------------------------------------*/
.pwd_check_area::after {
	content: "";
	display: block;
	clear: both;
}
input.pwd_check {
	padding: 0 48px 0 15px;
}
.pw_s1 {
	box-sizing: border-box;
	border: 1px solid #ccc;
	/*width: 92%;*/
	margin: 10px auto 30px auto;
	text-align: center;

	display: block;
	list-style: none;
}
	.pw_s1 dt {
		display: block;
		margin: 0;
		padding: 9px 0;
		font-weight: bold;
		border-bottom: 1px solid #ccc;
		background: #f8f8f8;
		font-size: 14px;
		line-height: 1;
	}
	.pw_s1 dd div {
		padding: 8px;
		line-height: 1.5;
	}
	.pw_s1 .low {
		background: #eeeeee;
		background: -moz-linear-gradient(left, #eeeeee 0%, #ffffff 20%);
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eeeeee), color-stop(20%,#ffffff));
		background: -webkit-linear-gradient(left, #eeeeee 0%,#ffffff 20%);
		background: -o-linear-gradient(left, #eeeeee 0%,#ffffff 20%);
		background: -ms-linear-gradient(left, #eeeeee 0%,#ffffff 20%);
		background: linear-gradient(to right, #eeeeee 0%,#ffffff 20%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=1 );
		font-weight:bold;
	}
	.pw_s1 .medium {
		background: #b1d574;
		background: -moz-linear-gradient(left, #b1d574 0%, #b1d574 15%, #ffffff 60%);
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b1d574), color-stop(15%,#b1d574), color-stop(60%,#ffffff));
		background: -webkit-linear-gradient(left, #b1d574 0%,#b1d574 15%,#ffffff 60%);
		background: -o-linear-gradient(left, #b1d574 0%,#b1d574 15%,#ffffff 60%);
		background: -ms-linear-gradient(left, #b1d574 0%,#b1d574 15%,#ffffff 60%);
		background: linear-gradient(to right, #b1d574 0%,#b1d574 15%,#ffffff 60%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1d574', endColorstr='#ffffff',GradientType=1 );
		font-weight:bold;
	}
	.pw_s1 .high {
		background: #b1dced;
		background: -moz-linear-gradient(left, #b1dced 0%, #b1dced 55%, #ffffff 100%);
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b1dced), color-stop(55%,#b1dced), color-stop(100%,#ffffff));
		background: -webkit-linear-gradient(left, #b1dced 0%,#b1dced 55%,#ffffff 100%);
		background: -o-linear-gradient(left, #b1dced 0%,#b1dced 55%,#ffffff 100%);
		background: -ms-linear-gradient(left, #b1dced 0%,#b1dced 55%,#ffffff 100%);
		background: linear-gradient(to right, #b1dced 0%,#b1dced 55%,#ffffff 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1dced', endColorstr='#ffffff',GradientType=1 );
		font-weight:bold;
	}
.icon_pass_eye {
	float: right;
	display: block;
	background-image: url(/webcontent/sp_webcontent/image/idreg/icon_password.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 24px;
	height: 20px;
	margin: -32px 13px;
	position: relative;
}
.icon_pass_eye.show {
	background-image: url(/webcontent/sp_webcontent/image/idreg/data.png);
	background-repeat: no-repeat;
	background-size: contain;
}
.icon_pass_eye input[type="checkbox"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;

	outline: none;
	border: none;

	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	background: none;
	width: 24px;
	height: 20px;
}





.area_txt_12 {
	font-size: 12px!important;
	font-weight: normal;
	color: #757575;
	line-height: 12px;
}


.score-bar {
	width: 100%;
}
.score-bar::after {
	content: "";
	display: block;
	clear: both;
}
.score-bar1 {
	float: left;
	width: calc(100%/3 - 2px)!important;
	width: -webkit-calc(100%/3 - 2px)!important;
	width: 32.7%;
	height: 6px;
}
.score-bar2-3 {
	float: left;
	width: calc(100%/3 - 2px)!important;
	width: -webkit-calc(100%/3 - 2px)!important;
	width: 32.8%;
	height: 6px;
	margin-left: 2px;
}
.score-bar2-3 {
	float: left;
	width: calc(100%/3 - 2px)!important;
	width: -webkit-calc(100%/3 - 2px)!important;
	width: 32.8%;
	height: 6px;
	margin-left: 2px;
}


.eye {
	background-repeat: no-repeat;
	background-size: contain;
	width: 24px;
	height: 20px;
	float: right;
	margin: -31px 13px;
	position: relative;
}
.eye-on {
	background-image: url(../image/icon_password.png);
}
.eye-off {
	background-image: url(../image/data.png);
}



/* CCAデザイン用スタイル追加 */
.pwd_check_msg {
	color: #757575;
	font-size: 14px;
}

#ScoreBar1 {
	color: #757575;
}

#ScoreBar1.low:before,
#ScoreBar1.medium:before,
#ScoreBar1.high:before {
	content: "パスワードの安全度：";
	color: #757575;
}

#ScoreBar1 + .pwd_status {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
#ScoreBar1 + .pwd_status .pwd_status_bar {
	display: block;
	box-sizing: border-box;
	width: 33%;
	height: 6px;
}

#ScoreBar1 + .pwd_status .pwd_status_bar .inner_bar {
	display: none;
	width: 100%;
	height: 6px;
}

#ScoreBar1 + .pwd_status .pwd_status_bar:nth-child(2) {
	width: 34%;
}
#ScoreBar1 + .pwd_status .pwd_status_bar:nth-child(2) .inner_bar {
	width: auto;
	margin: 0 2px;
}

/*#ScoreBar1 + .pwd_status .pwd_status_bar:nth-child(3) {
	width: 33%;
}
#ScoreBar1 + .pwd_status .pwd_status_bar:nth-child(3) .inner_bar {
	width: auto;
	margin-left: 2px;
}*/

/* パスワード強度の色と要素のdisplayプロパティ */
#ScoreBar1.low + .pwd_status .pwd_status_bar .inner_bar {
	background-color: #f44336;
}
#ScoreBar1.low + .pwd_status .pwd_status_bar:nth-child(1) .inner_bar {
	display: block;
}

#ScoreBar1.medium + .pwd_status .pwd_status_bar .inner_bar {
	background-color: #ffc107;
}
#ScoreBar1.medium + .pwd_status .pwd_status_bar:nth-child(1) .inner_bar,
#ScoreBar1.medium + .pwd_status .pwd_status_bar:nth-child(2) .inner_bar {
	display: block;
}

#ScoreBar1.high + .pwd_status .pwd_status_bar .inner_bar {
	background-color: #8bc34a;
}
#ScoreBar1.high + .pwd_status .pwd_status_bar:nth-child(1) .inner_bar,
#ScoreBar1.high + .pwd_status .pwd_status_bar:nth-child(2) .inner_bar,
#ScoreBar1.high + .pwd_status .pwd_status_bar:nth-child(3) .inner_bar {
	display: block;
}

#ScoreBar1.error + .pwd_status .pwd_status_bar .inner_bar {
	background-color: #f44336;
}
#ScoreBar1.error + .pwd_status .pwd_status_bar:nth-child(1) .inner_bar {
	display: block;
}



/*----------------------------------------------------------------------

select

----------------------------------------------------------------------*/
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	border-radius: 4px;
	border: 1px solid #e0e0e0;

	width: 100%;
	height: 45px;

	padding: 0 0 0 15px;

	background: transparent;
	position: relative;
	z-index: 1;
}
select:focus {
	outline: none;
	border: 1px solid #eb5505;
	border-radius: 4px;
}
select::-ms-expand {
	display: none;
}


.birth_year {
	width: 100px;
}
.birth_month {
	width: 70px;
	position: relative;
}
.birth_month:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -4px;

	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #333;
}
.birth_day {
	width: 70px;
}

.zip_code {
	width: calc(100% - 130px);
}
.zip_code.flex_grow {
	flex-grow: 1;
}



/*----------------------------------------------------------------------

テキストリンクのボタン

----------------------------------------------------------------------*/
.btn_txt {
	text-align: center;
	line-height: 1;
}
/*.btn_txt a {
	text-decoration: none;
}
.btn_txt a:hover {
	text-decoration: underline;
}*/



/*----------------------------------------------------------------------

オレンジボタン

----------------------------------------------------------------------*/
.btn_orange {
	position: relative;

	border-radius: 4px;
	border: 1px solid #eb5505;

	background-color: #eb5505;

	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
	.btn_orange:before {
		content: "";

		position: absolute;
		top: 0;

		width: 100%;
		/*height: 100%;*/

		border-radius: 4px;
		border-top: 1px solid #ff6714;
	}
	.btn_orange:after {
		content: "";

		position: absolute;
		bottom: 0;

		width: 100%;
		/*height: 100%;*/

		border-radius: 4px;
		border-bottom: 2px solid #d14c04;
	}
		/* hover */
		.btn_orange:hover {
			border: 1px solid #c54704;
			background-color: #c54704;
		}
			.btn_orange:hover:before {
				content: "";

				position: absolute;
				top: 0;

				width: 100%;

				border-radius: 4px;
				border-top: 1px solid #d65711;
			}
			.btn_orange:hover:after {
				content: "";

				position: absolute;
				bottom: 0;

				width: 100%;

				border-radius: 4px;
				border-bottom: 2px solid #b04003;
			}

	.btn_orange a,
	.btn_orange input.btn,
	.btn_orange button.btn {
		box-sizing: border-box;

		display: block;

		width: 100%;
		min-height: 43px;

		border-radius: 4px;
		border: none;

		color: #fff;

		font-size: 18px;
		line-height: 43px;

		text-align: center;
		text-decoration: none !important;
	}
		/* hover */
		.btn_orange:hover a,
		.btn_orange:hover input.btn,
		.btn_orange:hover button.btn {
			color: #d6d6d6;
		}
		/*複数業テキスト*/
		.btn_orange a.mline,
		.btn_orange input.mline.btn,
		.btn_orange button.mline.btn {
			line-height: 28px;
			padding: 15px 0 14px 0;
		}



/*----------------------------------------------------------------------
オレンジボタン Secondary
----------------------------------------------------------------------*/
.btn_orange2 {
   position: relative;

   border-radius: 4px;
   border: 1px solid #eb5505;

   background-color: #ffffff;

   box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
      /* hover */
      .btn_orange2:hover {
         border: 1px solid #c54704;
         background-color: #f5f5f5;
      }

   .btn_orange2 a,
   .btn_orange2 input.btn,
   .btn_orange2 button.btn {
      box-sizing: border-box;

      display: block;

      width: 100%;
      min-height: 43px;

      border-radius: 4px;
      border: none;

      color: #eb5505;

      font-size: 14px;
      font-weight: bold;
      line-height: 43px;

      text-align: center;
      text-decoration: none !important;
   }
      /* hover */
      .btn_orange2:hover a,
      .btn_orange2:hover input.btn,
      .btn_orange2:hover button.btn {
         color: #e25205;
      }
      /*複数業テキスト*/
      .btn_orange2 a.mline,
      .btn_orange2 input.mline.btn,
      .btn_orange2 button.mline.btn {
         line-height: 28px;
         padding: 15px 0 14px 0;
      }



/*----------------------------------------------------------------------

デフォルトボタン

----------------------------------------------------------------------*/
.btn_white {
	position: relative;

	border-radius: 4px;
	border: 1px solid #9e9e9e;

	background-color: #fff;

	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
	/* hover */
	.btn_white:hover {
		border: 1px solid #858585;
		background-color: #d6d6d6;
	}

	.btn_white a,
	.btn_white input.btn,
	.btn_white button.btn {
		box-sizing: border-box;

		display: block;

		width: 100%;
		min-height: 43px;

		border-radius: 4px;
		border: none;

		color: #333;

		font-size: 18px;
		line-height: 43px;

		text-align: center;
		text-decoration: none !important;
	}
		/* hover */
		.btn_white:hover a,
		.btn_white:hover input.btn,
		.btn_white:hover button.btn {
			color: #2b2b2b;
		}

		.btn_white.btn_zip_code {
			box-sizing: border-box;

			flex-shrink: 0;

			display: flex;
			align-items: center;
			justify-content: center;

			width: 100px;
			min-height: initial;
		}
		.btn_white.btn_zip_code a {
			box-sizing: border-box;

			display: block;

			width: 100%;
			min-height: initial;

			border-radius: 4px;
			border: none;

			color: #333;

			font-size: 18px;
			line-height: 1;

			text-align: center;
			text-decoration: none !important;
		}
		/*----------------------------------------------------------------------

		住所検索ボタン

		----------------------------------------------------------------------*/
		.btn_white.btn_zip_code .btn_address_search,
		.btn_white.btn_zip_code a.btn_address_search {
			box-sizing: border-box;
			height: 43px;
			line-height: 43px;
		}



/*----------------------------------------------------------------------

非活性ボタン

----------------------------------------------------------------------*/
.btn_disable {
	position: relative;
	border-radius: 4px;
	border: 1px solid #e0e0e0 !important;
	background-color: #e0e0e0 !important;
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
	.btn_disable:before {
		content: "";
		position: absolute;
		top: 0;
		width: 100%;
		/*height: 100%;*/
		border-radius: 4px;
		border-top: 1px solid #ededed !important;
	}
	.btn_disable:after {
		content: "";
		position: absolute;
		bottom: -1px;
		width: 100%;
		/*height: 100%;*/
		border-radius: 4px;
		border-bottom: 2px solid #c7c7c7;
	}
		/* hover */
		.btn_disable:hover {
			border: 1px solid #e0e0e0 !important;
			background-color: #e0e0e0 !important;
		}
			.btn_disable:hover:before {
				content: "";
				border-top: 1px solid #ededed !important;
			}
			.btn_disable:hover:after {
				content: "";
				border-bottom: 2px solid #c7c7c7;
			}

	.btn_disable a,
	.btn_disable input.btn,
	.btn_disable button.btn {
		box-sizing: border-box;
		display: block;
		width: 100%;
		min-height: 43px;

		border-radius: 4px;
		border: none;

		color: #9e9e9e !important;

		font-size: 18px;
		line-height: 43px;

		text-align: center;
		text-decoration: none !important;
	}
		/* hover */
		.btn_disable:hover a,
		.btn_disable:hover input.btn,
		.btn_disable:hover button.btn {
			color: #9e9e9e !important;
		}
		/*複数業テキスト*/
		.btn_disable a.mline,
		.btn_disable input.mline.btn,
		.btn_disable button.mline.btn {
			line-height: 28px;
			padding: 15px 0 14px 0;
		}