/***************************************************
information
	filename : form_common.css;
***************************************************/
/******* BASE *******/
/* input */
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;vertical-align:middle;margin:2px;padding:0px;}
input.txt,textarea.txt {
	margin: var(--form-mg); /* マージン */
	padding: var(--form-pd); /* パディング */
	vertical-align: middle;
	border-radius: var(--form-rod);-webkit-border-radius: var(--form-rod);-moz-border-radius: var(--form-rod); /* 角丸 */
	color: var(--form-txt); /* テキスト色 */
	background-color: var(--form-fc); /* 背景色 */
	border: var(--form-brd); /* ボーダー指定 */
	font-size: var(--font-form-input); /* フォントサイズ */
	font-weight: normal;
}
input.txt:focus,textarea.txt:focus {background-color: var(--form-fc-cr);} /* focus背景色 */
input.ime {ime-mode: disabled;}
input.txc {text-align: center;}
input.txr {text-align: right;}
input.txt::-webkit-input-placeholder,
textarea.txt::-webkit-input-placeholder,
input[type="search"]::-webkit-input-placeholder {color: var(--form-txt-dis);} /* disableテキスト色 */
input.txt:-ms-input-placeholder,
textarea.txt:-ms-input-placeholder,
input[type="search"]::-ms-input-placeholder {color: var(--form-txt-dis);} /* disableテキスト色 */
input.txt::-moz-placeholder,
textarea.txt::-moz-placeholder,
input[type="search"]::::-moz-placeholder {color: var(--form-txt-dis);} /* disableテキスト色 */
textarea {field-sizing: content;min-height: 5lh;max-height: 25lh;}
.EditS input.txt {padding: 1.0rem 0.5rem;font-size: 1.4rem;}
@media screen and (max-width: 600px) {
	.EditS input.txt {font-size: 1.6rem;}
}
/******* LINK button Rounded *******/
input[type="submit"], input[type="reset"], input[type="button"], button{cursor: pointer;}

input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="button"]:disabled,
input:hover[type="submit"]:disabled,
input:hover[type="reset"]:disabled,
input:hover[type="button"]:disabled{
background:var(--form-fc-dis); /* disable背景色 */
cursor:not-allowed;
}
input[type="text"][disabled]{
background:var(--form-fc-dis); /* disable背景色 */
color:var(--form-txt-dis); /* disableテキスト色 */
cursor:not-allowed;
}
/* パスワード目玉マーク */
.password_wrapper {position: relative;}
.password_wrapper.passForm {width: 300px;}
.password_toggle {
	position: absolute;
	top: 50%;
	right: 4%;
	width: 25px;
	height: 25px;
	cursor: pointer;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
#eye.fa-eye {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24px 24px"><path fill="rgba(150,150,150,1" d="M1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12ZM12.0003 17C14.7617 17 17.0003 14.7614 17.0003 12C17.0003 9.23858 14.7617 7 12.0003 7C9.23884 7 7.00026 9.23858 7.00026 12C7.00026 14.7614 9.23884 17 12.0003 17ZM12.0003 15C10.3434 15 9.00026 13.6569 9.00026 12C9.00026 10.3431 10.3434 9 12.0003 9C13.6571 9 15.0003 10.3431 15.0003 12C15.0003 13.6569 13.6571 15 12.0003 15Z" /></svg>'); 0.5em center no-repeat transparent;}
#eye.fa-eye-slash {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24px 24px"><path fill="rgba(150,150,150,1" d="M4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457ZM14.7577 16.1718L13.2937 14.7078C12.902 14.8952 12.4634 15.0002 12.0003 15.0002C10.3434 15.0002 9.00026 13.657 9.00026 12.0002C9.00026 11.537 9.10522 11.0984 9.29263 10.7067L7.82866 9.24277C7.30514 10.0332 7.00026 10.9811 7.00026 12.0002C7.00026 14.7616 9.23884 17.0002 12.0003 17.0002C13.0193 17.0002 13.9672 16.6953 14.7577 16.1718ZM7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925L16.947 12.7327C16.9821 12.4936 17.0003 12.249 17.0003 12.0002C17.0003 9.23873 14.7617 7.00016 12.0003 7.00016C11.7514 7.00016 11.5068 7.01833 11.2677 7.05343L7.97446 3.76015Z" /></svg>'); 0.5em center no-repeat transparent;}
.SearchBT.passDisp {display: none;}

/* select */
select.selectMenu  {
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: none;
	border: var(--form-brd); /* ボーダー指定 */
	border-radius: var(--SelectBt-rod);-webkit-border-radius: var(--SelectBt-rod);-moz-border-radius: var(--SelectBt-rod); /* 角丸 */
	margin: 0;
	padding: var(--form-pd);
	background:var(--form-fc) url(../../../core_sys/common/images/sys/arw_select_down.png) no-repeat;
	background-size: 30px 29px;
	background-position: right center;
	font-size: var(--font-form-input); /* フォントサイズ */
	color: var(--form-txt); /* テキスト色 */
	vertical-align: middle;
	cursor: pointer;
	}
select.selectMenu:hover {background:var(--form-fc-cr) url(../../../core_sys/common/images/sys/arw_select_downO.png) no-repeat;background-position: right center;}
select.selectMenu  {-webkit-appearance: none;-moz-appearance: none;text-indent: 0;text-overflow: '';}
select.selectMenu::-ms-expand {display: none;}
select.selectMenu[disabled]{
	border: var(--form-brd-dis); /* disableボーダー指定 */
	background:var(--form-fc-dis); /* disable背景色 */
	color:var(--form-txt-dis); /* disableテキスト色 */
	cursor:not-allowed;
}
/* checkbox radio */
label.radio {
	position: relative;
	display: inline-block;
	width: 15px;
	height: 15px;
	top: 2px;
	border: var(--form-brd); /* ボーダー指定 */
	border-radius : 100%;
	overflow: hidden;
	cursor: pointer;
}
label.radio:before {
	content: '';
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 100%;
	position: absolute;
	top: 2px;
	left: 2px;
	z-index: 1;
	background-color : var(--form-rd-ch); /* ラジオボタン・チェックボックス背景色 */
}
label.radio input[type="radio"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	margin: 0px;
	position: absolute;
	z-index: 2;
	top: -2px;
	left: -23px;
	width: 20px;
	height: 20px;
	display: block;
	box-shadow : var(--form-rd-bbg); /* ラジオボタン背景影色 */
}
label.radio input[type="radio"]:checked {box-shadow : none;}
label.radio input[type="radio"]:focus {
	box-shadow : var(--form-rd-bbg); /* ラジオボタン背景影色 */
	opacity: 0.2;
}
label.radio_text {
	cursor: pointer;
	position: relative;
	padding-top : 0;
	margin-right : 2.0rem;
	overflow: hidden;
	padding-left : 2.5rem;
	display: inline-block;
}
label.radio_text:before {
	position: absolute;
	width: 15px;
	height: 15px;
	border: var(--form-brd); /* ボーダー指定 */
	border-radius : 50%;
	left: 0px;
	top: 4px;
	content: '';
	z-index: 3;
}
label.radio_text:after {
	content: '';
	position: absolute;
	width: 9px;
	height: 9px;
	border-radius: 100%;
	left: 3px;
	top: 7px;
	background-color : var(--form-rd-ch); /* ラジオボタン・チェックボックス背景色 */
	z-index: 1;
}
label.radio_text input[type="radio"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	position: absolute;
	z-index: 2;
	width: 20px;
	height: 20px;
	left: -23px;
	top: 1px;
	margin: 0px;
	box-shadow : var(--form-rd-bbg); /* ラジオボタン背景影色 */
}
label.radio_text input[type="radio"]:checked {box-shadow : none;}
label.radio_text input[type="radio"]:focus {
	opacity: 0.2;
	box-shadow : var(--form-rd-bbg); /* ラジオボタン背景影色 */
}
label.radio_text_dis {
	cursor: pointer;
	position: relative;
	padding-top : 3px;
	padding-left : 5px;
	margin-right : 20px;
	overflow: hidden;
	padding-left : 25px;
	display: inline-block;
	color: var(--form-txt-dis); /* disableテキスト色 */
	cursor:not-allowed;
}
label.radio_text_dis:before {
	position: absolute;
	width: 15px;
	height: 15px;
	border: var(--form-brd-dis); /* disableボーダー指定 */
	border-radius : 50%;
	left: 0px;
	top: 4px;
	content: '';
	z-index: 3;
}
label.radio_text_dis:after {
	content: '';
	position: absolute;
	width: 9px;
	height: 9px;
	border-radius: 100%;
	left: 3px;
	top: 7px;
	background-color : var(--form-rd-dis); /* ラジオボタン・チェックボックスdisable背景色 */
	z-index: 1;
}
label.radio_text_dis input[type="radio"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	position: absolute;
	z-index: 2;
	width: 20px;
	height: 20px;
	left: -23px;
	top: 1px;
	margin: 0px;
	box-shadow : var(--form-rd-bbg); /* ラジオボタン背景影色 */
}
label.radio_text_dis input[type="radio"]:checked {box-shadow : none;}
label.radio_text_dis input[type="radio"]:focus {
	opacity: 0.2;
	box-shadow : var(--form-rd-bbg); /* ラジオボタン背景影色 */
}

label.checkbox {
	cursor: pointer;
	width: 20px;
	height: 20px;
	top: 2px;
	border: var(--form-brd); /* ボーダー指定 */
	border-radius: var(--form-rod);-webkit-border-radius: var(--form-rod);-moz-border-radius: var(--form-rod); /* 角丸 */
	background : var(--form-fc); /* 背景色 */
	overflow: hidden;
	position: relative;
	display: inline-block;
	box-sizing : border-box;
}
label.checkbox input[type="checkbox"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 20px;
	width: 20px;
	height: 20px;
	left: -40px;
	box-shadow : var(--form-ch-bbg); /* チェックボックス背景影色 */
	z-index: 2;
}
label.checkbox input[type="checkbox"]:checked {box-shadow : none;}
label.checkbox input[type="checkbox"]:checked:focus {
	box-shadow : var(--form-ch-bbg); /* チェックボックス背景影色 */
	opacity: 0.1;
}
label.checkbox input[type="checkbox"]:focus {
	box-shadow : var(--form-ch-bbg); /* チェックボックス背景影色 */
}
label.checkbox:after {
	content: '';
	position: absolute;
	top: 10px;
	left: 6px;
	display: block;
	margin-top: -8px;
	width: 8px;
	height: 12px;
	border-right: var(--form-brd-rd); /* チェックボックスアイコンボーダー指定 */
	border-bottom: var(--form-brd-rd); /* チェックボックスアイコンボーダー指定 */
	transform: rotate(45deg);
	-webkit-transform : rotate(45deg);
	-moz-transform: rotate(45deg);
	z-index: 1;
}
label.checkbox_text {
	cursor: pointer;
	position: relative;
	padding-bottom : 0.4rem;
	margin-right : 1.5rem;
	overflow: hidden;
	position: relative;
	padding-left : 3.0rem;
	display: inline-block;
	box-sizing: border-box;
	line-height: 1.2;
}
label.checkbox_text:before {
	content: '';
	position : absolute;
	width: 20px;
	height: 20px;
	left: 0px;
	top: 0;
	border: var(--form-brd); /* ボーダー指定 */
	border-radius: var(--form-rod);-webkit-border-radius: var(--form-rod);-moz-border-radius: var(--form-rod); /* 角丸 */
	z-index: 3;
}
label.checkbox_text:after {
	content: '';
	position: absolute;
	top: 10px;
	left: 6px;
	display: block;
	margin-top: -8px;
	width: 8px;
	height: 12px;
	border-right: var(--form-brd-rd); /* チェックボックスアイコンボーダー指定 */
	border-bottom: var(--form-brd-rd); /* チェックボックスアイコンボーダー指定 */
	transform: rotate(45deg);
	-webkit-transform : rotate(45deg);
	-moz-transform: rotate(45deg);
	z-index: 1;
}
label.checkbox_text input[type="checkbox"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	position: absolute;
	left: -40px;
	width: 20px;
	height: 20px;
	display: block;
	box-shadow : var(--form-ch-bbg); /* チェックボックス背景影色 */
	z-index: 2;
	margin: 0px;
	padding: 0px;
}
label.checkbox_text input[type="checkbox"]:checked {box-shadow : none;}
label.checkbox_text input[type="checkbox"]:checked:focus {
	box-shadow : var(--form-ch-bbg); /* チェックボックス背景影色 */
	opacity: 0.1;
}
label.checkbox_text input[type="checkbox"]:focus {
	box-shadow : var(--form-ch-bbg); /* チェックボックス背景影色 */
}

label.checkbox_text_dis {
	cursor: pointer;
	position: relative;
	padding-left : 20px;
	padding-bottom : 2px;
	margin-right : 15px;
	overflow: hidden;
	position: relative;
	padding-left : 25px;
	display: inline-block;
	box-sizing: border-box;
	color: var(--form-rd-dis); /* ラジオボタン・チェックボックスdisable背景色 */
	cursor:not-allowed;
	line-height: 1.2;
}
label.checkbox_text_dis:before {
	content: '';
	position : absolute;
	width: 18px;
	height: 18px;
	left: 0px;
	top: 0;
	border: var(--form-brd-dis); /* disableボーダー指定 */
	border-radius: var(--form-rod);-webkit-border-radius: var(--form-rod);-moz-border-radius: var(--form-rod); /* 角丸 */
	z-index: 3;
}
label.checkbox_text_dis:after {
	content: '';
	position: absolute;
	top: 10px;
	left: 6px;
	display: block;
	margin-top: -8px;
	width: 8px;
	height: 12px;
	border-right: var(--form-brd-dis-rd); /* チェックボックスアイコンdisableボーダー指定 */
	border-bottom: var(--form-brd-dis-rd); /* チェックボックスアイコンdisableボーダー指定 */
	transform: rotate(45deg);
	-webkit-transform : rotate(45deg);
	-moz-transform: rotate(45deg);
	z-index: 1;
}
label.checkbox_text_dis input[type="checkbox"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	position: absolute;
	left: -40px;
	width: 20px;
	height: 20px;
	display: block;
	box-shadow : var(--form-ch-bbg); /* チェックボックス背景影色 */
	z-index: 2;
	margin: 0px;
	padding: 0px;
}
label.checkbox_text_dis input[type="checkbox"]:checked {box-shadow : none;}
label.checkbox_text_dis input[type="checkbox"]:checked:focus {
	box-shadow : var(--form-ch-bbg); /* チェックボックス背景影色 */
	opacity: 0.1;
}
label.checkbox_text_dis input[type="checkbox"]:focus {
	box-shadow : var(--form-ch-bbg); /* チェックボックス背景影色 */
}
label.checkbox_text_pd {cursor: pointer;}

/* === PCテンキー === */
.cb-tenkey-pad {
	position:absolute;
	z-index:9999;
	background: var(--tenkey-bg);
	border:1px solid var(--tenkey-brd);
	border-radius: 0.3rem;
	box-shadow:0 10px 30px rgba(0,0,0,.12);
	padding:8px;
	display:none;
	font: 14px/1.2 system-ui, sans-serif
}
.cb-tenkey-grid {
	display:grid;
	grid-template-columns:repeat(3,56px);
	gap:6px;}
.cb-tenkey-pad button {
	border:1px solid var(--tenkey-bt-brd);
	border-radius: 0.3rem;
	padding: 1.0rem 0;
	cursor:pointer;
	user-select:none;
	min-width: 56px;
	min-height: 40px;
	background: var(--tenkey-bt-bg);
}
.cb-tenkey-pad button:active {
	transform:translateY(1px);
}
.cb-tenkey-row {
	display:flex;
	gap:6px;
	margin-top:6px;
	justify-content:space-between;
}
.cb-tenkey-wide {flex:1;}
.cb-tenkey-small{width:56px;}

/**** FORM SIZE ****/
input.size60 {width:60px;}
input.size80 {width:80px;}
input.size100 {width:100px;}
input.size120 {width:120px;}
input.size140 {width:140px;}
input.size160 {width:160px;}
input.size180 {width:180px;}
input.size200 {width:200px;}
input.size220 {width:220px;}
input.size240 {width:240px;}
input.size250 {width:250px;}
input.size300 {width:300px;}
input.size350 {width:350px;}
input.size400 {width:400px;}
input.size450 {width:450px;}
input.size500 {width:500px;}
input.size550 {width:550px;}
input.size600 {width:600px;}
input.size650 {width:650px;}
input.size100p {width:99.5%;}
input.PayCRDNO {width:80px;}
input.PayCRDNAME {width:150px;}
input.zipsizeS {width:80px;}
input.zipsizeW {width:100px;}
input.password {width:300px;}

select.size60 {width:60px;}
select.size80 {width:80px;}
select.size100 {width:100px;}
select.size120 {width:120px;}
select.size140 {width:140px;}
select.size150 {width:150px;}
select.size160 {width:160px;}
select.size180 {width:180px;}
select.size200 {width:200px;}
select.size250 {width:250px;}
select.size300 {width:300px;}
select.size350 {width:350px;}
select.size400 {width:400px;}
select.size450 {width:450px;}
select.size500 {width:500px;}
select.size550 {width:550px;}
select.size600 {width:600px;}
select.size650 {width:650px;}
select.size100p {width:100%;}

textarea.size60 {width:60px;}
textarea.size80 {width:80px;}
textarea.size100 {width:100px;}
textarea.size120 {width:120px;}
textarea.size140 {width:140px;}
textarea.size160 {width:160px;}
textarea.size180 {width:180px;}
textarea.size200 {width:200px;}
textarea.size250 {width:250px;}
textarea.size300 {width:300px;}
textarea.size350 {width:350px;}
textarea.size400 {width:400px;}
textarea.size450 {width:450px;}
textarea.size500 {width:500px;}
textarea.size550 {width:550px;}
textarea.size600 {width:600px;}
textarea.size650 {width:650px;}
textarea.size100p {width:99.5%;}

@media screen and (max-width: 700px) {
	input.size200,
	input.size250,
	input.size300,
	input.size350,
	input.size400,
	input.size450,
	input.size500,
	input.size550,
	input.size600,
	input.size650,
	input.size100p,
	select.size150,
	select.size160,
	select.size180,
	select.size200,
	select.size250,
	select.size300,
	select.size350,
	select.size400,
	select.size450,
	select.size500,
	select.size550,
	select.size600,
	select.size650,
	textarea.size250,
	textarea.size300,
	textarea.size350,
	textarea.size400,
	textarea.size450,
	textarea.size500,
	textarea.size550,
	textarea.size600,
	textarea.size650 {width:98%;}
	input.zipsizeS {width:70px;}
	input.zipsizeW {width:90px;}
	input.password {width:100%;}
	.password_wrapper.passForm {width: 95%;}
}
@media screen and (max-width: 480px) {
	.popupSearchBox input.size200,
	.popupSearchBox input.size250,
	.popupSearchBox input.size300,
	.popupSearchBox input.size350,
	.popupSearchBox input.size400,
	.popupSearchBox input.size450,
	.popupSearchBox input.size500,
	.popupSearchBox input.size550,
	.popupSearchBox input.size600,
	.popupSearchBox input.size650,
	.popupSearchBox input.size100p,
	.popupSearchBox select.size150,
	.popupSearchBox select.size160,
	.popupSearchBox select.size180,
	.popupSearchBox select.size200,
	.popupSearchBox select.size250,
	.popupSearchBox select.size300,
	.popupSearchBox select.size350,
	.popupSearchBox select.size400,
	.popupSearchBox select.size450,
	.popupSearchBox select.size500,
	.popupSearchBox select.size550,
	.popupSearchBox select.size600,
	.popupSearchBox select.size650,
	.popupSearchBox textarea.size250,
	.popupSearchBox textarea.size300,
	.popupSearchBox textarea.size350,
	.popupSearchBox textarea.size400,
	.popupSearchBox textarea.size450,
	.popupSearchBox textarea.size500,
	.popupSearchBox textarea.size550,
	.popupSearchBox textarea.size600,
	.popupSearchBox textarea.size650 {width:90%;}
	.password_wrapper.passForm {width: 100%;}
}