@charset "utf-8";

@import url("variables.css");/*変数定義*/

:root{
	--normalColor:47,168,43;/*任意*/
	--hissuColor:255,34,39;/*必須*/
	--hissuColor_lgihten:255,238,238;/*必須の薄いの*/

	--mainColor:63 128 199;
}

.edit_list,#contact{
	form{
			border:none;
			input,textarea{
				background:white;
			}
			fieldset{
				 padding:0;
				 margin:0;
				 border:none;
			}
			input[type='text'],
			input[type='email'],
			input[type='tel'],
			input[type='date'],
			input[type='number'],
			select,
			textarea{
				width:100%;
				padding: .5em .5em;
				border-radius:3px;
				outline: 1px solid #ccc;
				appearance: none;
				-webkit-appearance: none;
				-moz-appearance: none;
				font-size: 100%;
				font-family: inherit;
				background:white;
				&:focus {
					outline: none;
					outline:solid 2px rgb(var(--normalColor));
				}
				&::placeholder {
					color: #909090;
					font-weight: normal;
				}
			}
			select{/*resetで消された矢印を復活*/
				-moz-appearance: menulist;
  			-webkit-appearance: menulist;
  			appearance: menulist;
				&::-ms-expand {
					display: block;
				}
			}
			textarea{
				width:100%;
				field-sizing: content;
				min-height: 6lh;
			}
			*:required,
			textarea:invalid{
				background: rgb(var(--hissuColor_lgihten)) !important;
				&:focus{
					outline:2px solid rgb(var(--hissuColor));
				}
			}
	
			input[type='checkbox'],/*チェック ラジオ*/
			input[type='radio']{ 
				margin:0 .3em 0 0;
			}
			input[type='checkbox']:has(+label) + label,
			input[type='radio']:has(+label) + label{
				cursor: pointer;
				margin-right:1.5rem;
			}
			:where(button, [type='button'], [type='reset'], [type='submit']) {/*ダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効*/
				touch-action: manipulation;
			}
			input[type='submit']{/*送信ボタン*/
				width:auto;
				background-color: rgb(var(--mainColor));
				border:2px solid rgb(var(--mainColor));
				color: #fff;
				font-size: 1.2rem;
				letter-spacing: .3em;
				padding:.5em .7em .5em 1em;
				margin:30px auto 0 auto;
				border-radius:5px;
				&:hover{
					border:2px solid #333;
					background-color: #333;
				}
				&:active{
					background: rgb(var(--mainColor));
					box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
					color: rgb(var(--mainColor));
					text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
				}
			}

			input[type="date"],/*年月日*/
			input[type="tel"]{
					width:min(15em,100%);
			}
			input[type='number']{/*数字　とりあえず4桁？*/
				width:min(4em,100%);
			}
			input[type="email"]{
					width:min(25em,100%);
			}
			input[name="zip21"],input[name="zip22"]{
				width:min(6em,100%);
			}
			input.address{/*住所*/
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
	}
}

	/*必須＆任意*/
	span.label-danger,span.label-success{
		font-size: .8rem;
		margin:0 .5em 0 0;
		display:inline-block;
		padding:0 .3em;
		background:rgb(var(--normalColor));
		color:white;
		display:inline-block;
		border-radius:5px;
	}
	span.label-danger{
		background:rgb(var(--hissuColor));
	}

		/*同意からの送信ボタン*/
		#agree_box{
			margin:20px auto 0 auto;
			font-size: 1.2rem;
			padding: 5px 2em 5px 2em;
			> label.checkbox{
				display:inline-block !important;
			}
		}
		.agree-btn {
			padding:.5em .7em .5em 1em;
			margin:30px auto 0 auto;
			cursor: pointer;/*ポインターカーソルを表示*/
			margin:20px auto 0 auto;
			font-size: 1.2rem;
			color:white;
			background:rgb(var(--mainColor));
			border:2px solid rgb(var(--mainColor));
			border-radius:5px;
		}
		.agree-btn:disabled {
			background-color: gray;
			cursor: not-allowed;
			color:white;
			border:2px solid gray;
			&:hover{
				background-color: gray;
				cursor: not-allowed;
				color:white;
				border:2px solid gray;
			}
		}
		
	
	#privacy{
		> p{
			text-align:left;
		}
		> ul{
			> li{
				text-align:left;
				 h3{
					margin:20px 0 5px 0;
					font-size:1.1em;
				}
				> ol{
					> li{
						margin:0 0 0 2em;
						list-style:disc;
					}
				}
			}
		}
	}