@charset "utf-8";
/* CSS Document */
h2.form-title-01{ color: #ff4f58; font-size: 30px; line-height: 40px; margin-bottom: 60px; text-align: center;}
.form-area-01{ border-top: 2px solid #666666; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 20px; width: 100%}
.form-area-01 dt,.form-area-01 dd{ border-bottom: 1px solid #666666; padding: 20px;}
.form-area-01 dt:nth-child(3),.form-area-01 dd:nth-child(4),.form-area-01 dt:nth-child(7),.form-area-01 dd:nth-child(8),.form-area-01 dt:nth-child(11),.form-area-01 dd:nth-child(12),.form-area-01 dt:nth-child(15),.form-area-01 dd:nth-child(16){ background-color: rgba( 243, 149, 0, 0.05);}
.form-area-01 dt.bg-white,.form-area-01 dd.bg-white{ background-color: #ffffff !important;}
.form-area-01 dt{ width: calc(28% - 40px);}
.form-area-01 dt::after{ clear: both; content: ""; display: block;}
.form-area-01 dt i{ float: right;}
.form-area-01 dt i span{ border-radius: 4px; border: 1px solid #222222; font-size: 12px; font-style: normal !important; padding: 4px 10px;}
.form-area-01 dt i span.required{ background-color: #ff4f58; border: 1px solid #ff4f58; color: #ffffff; font-weight: bold;}
.form-area-01 dd{ width: calc(72% - 40px);}
.form-area-01 dd input[type="text"],.form-area-01 dd input[type="tel"],.form-area-01 dd input[type="email"],.form-area-01 dd textarea{ -webkit-appearance: none; background-color: #fafafa; border-radius: 3px; border: 1px solid #bcbcbc; font-size: 16px; outline: inherit; padding: 10px; width: calc(100% - 20px);}
.form-area-01 dd input[name="postal"]{ width: 200px;}
.form-area-01 dd input[type="text"]:focus,.form-area-01 dd input[type="tel"]:focus,.form-area-01 dd input[type="email"]:focus,.form-area-01 dd textarea:focus{ background-color: #ffffff; border-radius: 3px; box-shadow: 0 0 5px #f39500; border: 1px solid #f39500;}
.form-area-01 dd .document-request-area-01{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%;}
.form-area-01 dd .document-request-area-01 li{ width: 50%;}
.form-area-01 dd .document-request-area-01 li label{ cursor: pointer;}
.form-area-01 a{ color: #222222; text-decoration: underline; font-size: 14px;}
.error_blank{ color: #ff4f58; display: block; font-size: 12px; line-height: 30px; font-weight: bold;}
.privacy-policy-area-01{ border-radius: 10px; border: 1px solid #bcbcbc; margin: 20px auto; padding: 10px 20px 4px; width: min(100% - 42px, 640px);}
.privacy-policy-area-01 h2{ font-size: 18px; text-align: center;}
.privacy-policy-area-01 h3{ font-size: 16px;}
.privacy-policy-area-01 h3::before{ content: "■"; display: inline-block;}
.privacy-policy-area-01 p{ font-size: 14px; line-height: 22px;}
.privacy-policy-area-01 > dl > dd > dl > p{ margin-bottom: 10px;}
.privacy-policy-area-01 dl dd dl{ height: 124px; overflow-y: scroll;}
.privacy-policy-area-01 dl dd dd{ margin-bottom: 10px;}
.privacy-policy-area-01 ul li p::before{ content: "・"; display: inline-block;}
.privacy-policy-area-01 a{ color: #222222; display: block;}
#form_submit{ background-color: #00c579; border-radius: 6px; box-shadow: 0 4px 4px rgba( 0, 0, 0, 0.4); margin: 40px auto 80px; padding: 20px 40px 20px 10px; position: relative; text-align: center; width: min(100% - 50px, 370px);}
#form_submit:hover{ box-shadow: 0 2px 2px rgba( 0, 0, 0, 0.4); opacity: .6;}
#form_submit::before,#form_submit::after{ content: ""; display: inline-block; position: absolute; z-index: 1;}
#form_submit::before{ background-color: #ffffff; border-radius: 50%; height: 26px; right: 20px; top: calc(50% - 13px); width: 26px;}
#form_submit::after{ border-top: 3px solid #00c579; border-right: 3px solid #00c579; height: 6px; right: 29.5px; transform: rotate(45deg); top: calc(50% - 5px); width: 6px;}
#form_submit input{ background-color: inherit; border: none; color: #ffffff; cursor: pointer; font-size: 26px; font-weight: bold; letter-spacing: 2px;}
.thanks-page-area-01{ border-radius: 10px; border: 2px solid rgba( 243, 149, 0, .4); padding: 40px;}
.thanks-page-area-01 p{ font-size: 16px; line-height: 24px; text-align: center;}
.thanks-page-area-01 dt p{ color: #ff4f58; font-size: 18px; font-weight: bold; line-height: 28px;}

.display-n{ display: block; opacity: 1;}
.display-n.d-block{ animation: fadeIn 0.3s ease-in 0s forwards;}
.display-n.d-none{ display: none; opacity: 0;}

@keyframes fadeOut {
  0% {
    display: block;
    opacity: 1;
  }

  99% {
    display: block;
    opacity: 0;
  }

  100% {
    display: none;
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: block;
    opacity: 0;
  }

  100% {
    display: block;
    opacity: 1;
  }
}

input::placeholder{ color: #cdcdcd !important;}
.error-text-01{ color: #fd0000; display: none; font-size: 14px; font-weight: bold; line-height: 20px; margin-top: 10px; position: relative;}
.error-text-01::before { content: "➔"; display: inline-block; transform: rotate(-90deg);}
.error-text-01.error-display, .confirmation-area-01.error-display { display: block;}
.confirmation-area-01{ background-color: #efefef; border: thick double #898989; display: none; font-size: 18px; font-weight: bold; margin: 40px auto 80px !important; padding: 20px; text-align: center; width: min(100% - 50px, 420px);}
.confirmation-area-01 span span{ background-color: #ff9393; border: none; border-radius: 2px; color: #ffffff; margin: 0 4px; padding: 4px 10px;}
#form_submit{ display: none;}
#form_submit.click-btn-display{ display: block;}
.pointer-events-none{ opacity: .3; pointer-events: none !important;}

@media screen and (max-width: 947px){
    .form-area-01 dd input[name="postal"]{ width: calc(100% - 20px);}
}
@media screen and (max-width: 913px){
    .form-area-01 dt,.form-area-01 dd{ width: calc(100% - 40px);}
    .form-area-01 dt{ border-bottom: none; padding: 20px 20px 0;}
    .form-area-01 dt i{ float: none; margin-right: 10px;}
}
@media screen and (max-width: 525px){
	.form-area-01 dd .document-request-area-01 li{ width: 100%;}
}
@media screen and (max-width: 476px){
    .form-page-main-photo-01 h2{ top: 13%;}
    .form-page-main-photo-01.document-request h2{ top: 24%;}
    .form-page-main-photo-01 h2 br{ display: none;}
}
@media screen and (max-width: 475px){
	#form_submit input{ font-size: 5vw;}
}
@media screen and (max-width: 352px){
    .form-page-main-photo-01.document-request h2{ top: 13%;}
}


/* -- loading -------------------------------------------------------------------------------- */

div.loading-layer {
	width: 100vw;
	height: 100vh;
	background: rgba( 0, 0, 0, 0.7 );
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 10000;
}

span.loading {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgba( 255, 255, 255, 0.2 );
	border-right: 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom: 5px solid rgba( 255, 255, 255, 0.2 );
	border-left: 5px solid #ffffff;
	-webkit-transform: translateZ( 0 );
	-ms-transform: translateZ( 0 );
	transform: translateZ( 0 );
	-webkit-animation: load-circle 1.0s linear infinite;
	animation: load-circle 1.0s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}

@-webkit-keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

@keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}