@charset "utf-8";

.contactF{
	margin:15px 0px;
}

.contactF input[type="text"], .contactF input[type="tel"], .contactF input[type="email"] {
	font-size: 16px;
	padding:0px 5px;
	border: rgba(153,153,153,1) 1px solid;
	border-radius: 5px;
	outline:none;
	box-shadow:
		inset 2px 1px 3px rgba(153,153,153,0.5),
		inset -2px -1px 3px rgba(153,153,153,0.5);
}
.contactF textarea {
	font-size: 16px;
	width:90%;
	padding:5px;
	min-width: 50%;
	max-width: 98%;
	border: rgba(153,153,153,1) 1px solid;
	border-radius: 5px;
	outline:none;
	box-shadow:
		inset 2px 1px 3px rgba(153,153,153,0.5),
		inset -2px -1px 3px rgba(153,153,153,0.5);
}
.contactF input[type="text"]:focus, .contactF input[type="tel"]:focus, .contactF input[type="email"]:focus, .contactF textarea:focus {
	border-color: rgba(102,204,204,1);
	box-shadow:
		inset 2px 1px 3px rgba(102,204,204,0.5),
		inset -2px -1px 3px rgba(102,204,204,0.5);
}
.contactF input[type="text"]::placeholder, .contactF input[type="tel"]::placeholder, .contactF input[type="email"]::placeholder, .contactF textarea::placeholder {
	color: rgba(204,204,204,1);
}

.btnarea{
	text-align:center;
	padding:20px 0px;
}
.submitbtn, .resetbtn, .backbtn, .closebtn{
	-webkit-appearance: none;
	width: 15%;
	color: rgba(255,255,255,1);
	font-size: 16px;
	letter-spacing: 5px;
	border-radius: 10px;
}
.submitbtn, .closebtn{
	background-color: rgba(102,204,204,1);
	transition: background-color 0.2s ease;
}
.resetbtn, .backbtn{
	background-color: rgba(255,102,153,1);
	transition: background-color 0.2s ease;
}

.submitbtn:hover, .closebtn:hover{
	background-color: rgba(102,204,204,0.5);
}
.resetbtn:hover, .backbtn:hover{
	background-color: rgba(255,102,153,0.5);
}
#submitid:disabled {
	background: rgba(153,153,153,1);
}

.privacy_policy{
	display:block;
	margin:15px 15%;
}
.privacy_policy label{
	display:block;
	margin:15px 0px;
}
body.privacy_popup_open {
	overflow: clip;
	position: fixed;
	overscroll-behavior: none;
}
#privacy_popup {
	display: none;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
}

#privacy_popup .privacy_popup_content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 800px;
	max-height: 80vh;
	background: rgba(255,255,255,1);
	padding: 20px;
	box-sizing: border-box;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.privacy_popup_content h3{
	padding:15px 0px 10px;
}
.privacy_popup_content ul{
	padding:5px 0px 5px 20px;
}
.privacy_popup_content li{
	list-style-type:disc;
	padding:3px 0px
}
#agree_check {
	color: rgba(153,153,153,1);
	font-weight:100;
}
label:has(#privacy_agree:not(:disabled)) #agree_check {
	color: rgba(0,0,0,1);
	font-weight:700;
}
.submit_support li{
	padding:3px 0px;
}

@media (max-width:768px){
.contactF dl {
	border-bottom: 1px solid rgba(102,204,204,1);
}

.contactF dt {
	border-top: 3px double rgba(102,204,204,1);
	border-bottom: 1px solid rgba(102,204,204,1);
	padding: 5px 1%;
	margin-bottom: 3px;
}

.contactF dd {
	padding: 3px 1% 10px;
}

.contactF input {
	margin: 5px 0px 5px;
}

.contactF input[type="text"], .contactF input[type="tel"], .contactF input[type="email"] {
	-webkit-appearance: textfield;
	height: 35px;
	margin-left: 5px;
	width: 96%;
}

.contactF textarea {
	font-size: 16px;
	width: 98%;
}

.submitbtn, .closebtn{
	-webkit-appearance: none;
	width: 45%;
	height: 50px;
	margin:5px 15px;
	padding: 10px;
}

.resetbtn, .backbtn{
	-webkit-appearance: none;
	width: 30%;
	height: 50px;
	margin:5px 15px;
	padding: 10px;
}

}

@media (min-width:769px){
.contactF dl {
	display:flex;
	border: 1px solid rgba(102,204,204,1);
	flex-wrap:wrap;
}
.contactF dl + dl{
	border-top: none;
}
.contactF dt {
	clear: both;
	width: 23%;
	align-items: flex-start;
	border-right: 1px solid rgba(102,204,204,1);
	padding: 3px 1%;
}

.contactF dd {
	width: 77%;
	align-items: center;
	padding: 3px 1%;
}
.contactF input[type="text"], .contactF input[type="tel"], .contactF input[type="email"] {
	height: 35px;
	margin-bottom:5px;
}

.submitbtn, .resetbtn, .backbtn, .closebtn{
	height: 40px;
	margin: 5px 15px;
	padding: 5px 10px;
}