@charset "utf-8";
/* Contact */
body{background: #fecf39;}

input, 
textarea,
button{-webkit-appearance: none; outline: none; color: #000; line-height: 1.6; word-spacing: 0; font-size: 2rem; font-weight: 400; font-family: 'Noto Sans JP', sans-serif;}

input,
textarea{border: 0.2rem solid #c9c9c9; border-radius: 1.5rem; padding: 2.5rem 2rem; width: 100%;}
textarea{min-height:29rem; resize:vertical;}

button{background: #f8cf39; color: #fff; font-weight: 500; text-align: center; border-radius: 6.2rem; padding: 1.4rem 0 1.5rem; width: 33.6rem; display: block; cursor: pointer}
button:hover{background: #000;}

::placeholder{color: #c9c9c9; opacity: 1;}
:-ms-input-placeholder{color: #c9c9c9;}
::-ms-input-placeholder{color: #c9c9c9;}

.contact-inner{background: #fff; border-radius: 1.5rem; box-shadow: 8px 16px 40px 0px rgba(168, 140, 101, 0.4); padding: 7% 10%; margin: 6rem 0 0;}
.contact-inner label.error{font-size: 1.8rem; margin: 0.2em 0 0 0; color: #f00; display: block;}
.contact-item{margin: 0 0 2rem;}
.contact-tit{text-align: center; font-size: 2.8rem; font-weight: 500; margin: 0 0 7%;}
.contact-txt{font-weight: 500; font-size: 2.5rem;}

.contact-btn{padding: 1rem 0 0 0; display: flex; justify-content: flex-end;}

#confirm .contact-btn{justify-content: center;}
#confirm .contact-btn button{margin: 0 1rem;}

.thanks{font-size: 3.2rem; font-weight: 400; text-align: center; padding: 15rem 0;}


/* === ▼ form box === */
/* === ▼ radio btn design add === */
.radio-wrap {
	margin-bottom: 6rem;
}
.label-head {
	font-size: 2.3rem;
	font-weight: 500;
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 3.6rem;
}
.required-tag {
	font-size: 10px;
	font-weight: 500;
	display: inline-block;
	line-height: 1;
	letter-spacing: 0;
	margin-left: 1em;
	padding: .25em .8em;
	border-radius: 1.5em;
	color: #000;
	background-color: #FECF39;
}
.radioItem  {
	width: fit-content;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	column-gap: 4px;
	cursor: pointer;
}
.radioItem:not(:last-of-type) {
	margin-bottom: 1.6rem;
}
.radioButton {
	width:  2.8rem;
	height: 2.8rem;
	min-width:  2.8rem;
	min-height: 2.8rem;
	position: relative;
	margin-right: 1rem;
	padding: 0 !important;
	border: 1px solid #000000;
	border-radius: 9999px;
	appearance: none;
	cursor: pointer;
	transform: translateY(.1rem);
}
.radioButton:checked::after {
	content: "";
	width:  1.8rem;
	height: 1.8rem;
	position: absolute;
	inset: 0;
	margin: auto;
	border-radius: 9999px;
	background-color: #fecf39;
}


/* === ▼ partners dropdown add === */
/** Custom Select **/
.custom-select-wrapper.disabled {
	opacity: 0.5;
	pointer-events: none;
}

.custom-select-wrapper {
	position: relative;
	display: inline-block;
	user-select: none;
}
.custom-select-wrapper select {
	display: none;
}
.custom-select {
	position: relative;
	display: inline-block;
}
.custom-select-trigger {
	width: 20em;
	font-size: 1.8rem;
	font-weight: normal;
	line-height: 2;
	display: block;
	position: relative;
	margin-left: 2.5em;
	padding: .35em 1em;
	color: #4D4D4D;
	background-color: #fff;
	border: 0.2rem solid #c9c9c9;
	border-radius: 1.5rem;
	cursor: pointer;
}
.custom-select-trigger:after {
	content: '';
	width:  0;
	height: 0;
	display: block;
	position: absolute;
	top: 50%;
	right: 1em;
	border-top:   2rem solid #FECF39;
	border-left:  1.2rem solid transparent;
	border-right: 1.2rem solid transparent;
	transform: translateY(-50%);
	transition: all .4s ease-in-out;
	transform-origin: 50% 0;
}
.custom-options {
	width: 20em;
	box-sizing: border-box;	
	font-size: 1.8rem;
	position: absolute;
	display: block;
	top: 100%; 
	right: 0;
	margin-top: 1.5rem;
	padding: 0;
	color: #4D4D4D;
	background-color: #fff;
	border: 0.2rem solid #c9c9c9;
	border-radius: 1.5rem;
	transition: opacity .4s ease-in-out, transform .4s ease-in-out, visibility .4s ease-in-out;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-15px);
	pointer-events: none;

}
.custom-select.opened .custom-options {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
	transform: translateY(0);
}
.option-hover:before {
	background: #f9f9f9;
}
.custom-option {
	font-size: 1.8rem;
	font-weight: normal;
	display: block;
	position: relative;
	line-height: 1;
	padding: .75em 1em;
	color: #4D4D4D;
	border-bottom: 0.2rem solid #c9c9c9;
	cursor: pointer;
	transition: all .4s ease-in-out;
}
.custom-option:first-of-type {
	border-radius: 1.3rem 1.3rem 0 0;
}
.custom-option:last-of-type {
	border-bottom: 0;
	border-radius: 0 0 1.3rem 1.3rem;
}
.custom-options,
.custom-select-trigger {
	z-index: 5;
}
.custom-option:hover,
.custom-option.selection {
	background: #FECF39;
}
/* ===== policy agree add ===== */
.radio-wrap.add_note {
	margin-top:    4rem;
	margin-bottom: 3rem;
}
.add_note .note {
	font-size: 1.4rem;
	padding-left: 4rem;
}
#submitBtn.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: #f8cf39 !important;
}
.radioItem a {
	text-decoration: underline;
	color: #000;
}




@media (min-width: 1024px){
	#contact{padding: 5vw 39% 4vw 0; min-height: 100vh;}
	.contact-wrap{max-width: 860px; width: 88%; margin: 0 auto;}	
}

@media (max-width: 1023px){
	h1 img.logo-yellow{display: block;}
	h1 img.logo-white{display: none;}
	
	.bgline{background: url("../img/common/bgsp-white-grey.png") no-repeat top left/100% 100%;}
	button{width: 90%; margin: 0 auto; font-size: 3rem;}
	
	#contact{padding: 22rem 8% 10rem; min-height: calc(100vh - 15rem);}
	.contact-wrap{width: 100%;}
	.contact-wrap h2,
	.contact-desc{padding-left: 30%; margin-right: -2%;}
	.contact-inner{margin: 13rem 0 0 0; padding: 8%;}
	.contact-tit{font-size: 4rem;}

	/* === ▼ radio btn design add === */
	.contact-tit {
		margin-bottom: 8rem;
	}
	.label-head {
		font-size: 3rem;
		margin-bottom: 3rem;
	}
	.required-tag {
		font-size: max(10px,1.2rem);
	}
	.radio-wrap {
		margin-bottom: 8rem;
	}
	.radioButton {
		margin-right: .35rem;
		border-width: .2rem;
		transform: translateY(.6rem);
	}
	.radioItem   {
		font-size: 2.5rem;
	}

	/* === ▼ partners dropdown add === */
	.custom-options,
	.custom-option,
	.custom-select-trigger   {
		font-size: 2.5rem;
	}
	.custom-options,
	.custom-select-trigger {
		width: 15em;
	}
	.custom-select-trigger {
		line-height: 1.2;
		margin-left: 1.5em;
	}
	.custom-option {
		padding-top:    .5em;
		padding-bottom: .5em;
	}
	/* ===== policy agree add ===== */
	.radio-wrap.add_note {
		margin-top:    2rem;
		margin-bottom: 5rem;
	}
	.add_note .radioButton {
		transform: translateY(.3rem);
	}
	.add_note .radioItem   {
		font-size: 2rem;
	}
	.add_note .note {
		font-size: 1.8rem;
		padding-left: 4rem;
	}
}