@charset "utf-8";

#form .inner-sct { width: 88%; max-width: 1000px; margin: 0 auto; padding: 120px 0;}
#form .tit { margin-bottom: 20px;}
#form .tit p { font-size: 21px; font-size: min(1.35vw,21px); line-height: 2;}
#form .tit p span.must { display: inline-block; margin-right: 10px; padding: 2px 10px; background: #F00; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2;}
#form ul { margin-bottom: 40px;}
#form ul li { padding: 20px 0; border-bottom: dashed 1px #333;}
#form ul li dl { display: table; width: 100%;}
#form ul li dl dt,
#form ul li dl dd { display: table-cell; vertical-align: top;}
#form ul li dl dt { width: 320px; padding-right: 30px; font-size: 24px; font-size: min(1.45vw,24px);}
#form ul li dl dt.security { font-size: 21px; font-size: min(1.25vw,21px);}
#form ul li dl dd { width: auto; font-size: 21px; font-size: min(1.25vw,21px);}
#form ul li dl dt span.must { display: inline-block; margin-left: 20px; padding: 0 10px; background: #F00;
 color: #fff; font-size: 16px; font-size: min(1.15vw,16px); font-weight: 700; vertical-align: text-top;
}
#form ul li dl dd span.wpcf7-form-control-wrap { position: relative; display: block; width: 100%;}
#form ul li dl dd.select span.wpcf7-form-control-wrap { max-width: 300px; background: #EBEBEB;}
#form ul li dl dd.select span.wpcf7-form-control-wrap:before { content: ''; display: block; width: 0; height: 0; position: absolute; right: 10px; top: 35%;
 border: solid 8px transparent; border-top: solid 12px #003C88; z-index: 1;
}
#form ul li dl dd span.wpcf7-form-control-wrap select { position: relative; width: 100%; padding: 8px; background: none; appearance: none; -webkit-appearance: none; outline: none; z-index: 2;}
#form ul li dl dd input[type="text"],
#form ul li dl dd input[type="tel"],
#form ul li dl dd input[type="email"]  { width: 100%; padding: 8px; background: #EBEBEB;}

#form ul li dl dd.radio input[type="radio"] { opacity: 0; visibility: hidden; position: absolute;}
#form ul li dl dd .wpcf7-list-item { position: relative; display: inline-block; margin-right: 20px;}
#form ul li dl dd .wpcf7-list-item.last { margin-right: 0;}
#form ul li dl dd.radio span.wpcf7-list-item-label { position: relative; display: flex; align-items: center; cursor: pointer; padding-left: 32px;}
#form ul li dl dd.radio span.wpcf7-list-item-label::before { content: ""; display: block; width: 24px; height: 24px; background: #ebebeb; border: solid 1px #333; border-radius: 50%;
 position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
#form ul li dl dd.radio span.wpcf7-list-item-label::after { content: ""; display: block; width: 14px; height: 14px; background-color: #003C88; border-radius: 50%;
 position: absolute; left: 5px;top: 50%; transform: translateY(-50%); display: none;
}
#form ul li dl dd.radio input[type="radio"]:checked + span.wpcf7-list-item-label::after { display: block;}


#form ul li dl dd.check input[type="checkbox"] { position: absolute; left: 5px; top: 50%;}
#form ul li dl dd.check span.wpcf7-list-item-label { position: relative; display: flex; align-items: center; cursor: pointer; padding: 5px 0; padding-left: 32px;}
#form ul li dl dd.check span.wpcf7-list-item-label::before { content: ""; display: block; width: 24px; height: 24px; background: #ebebeb; border: solid 1px #333;
 position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
#form ul li dl dd.check span.wpcf7-list-item-label::after { content: ""; display: block; width: 14px; height: 14px; background-color: #003C88;
 position: absolute; left: 5px;top: 50%; transform: translateY(-50%); display: none;
}
#form ul li dl dd.check input[type="checkbox"]:checked + span.wpcf7-list-item-label::after { display: block;}


#form ul li dl dd textarea { width: 100%; height: 120px; padding: 8px; background: #EBEBEB;}
#form ul li dl dd span.memo { display: block; padding: 8px 0; color: #333; font-size: 18px; letter-spacing: 0.05rem;}

#form p.txt { margin-bottom: 10px; font-size: 21px; font-size: min(1.35vw,21px); text-align: center;}
#form .confirm { width: 100%; max-width: 120px; margin: 0 auto 30px; font-size: 21px; font-size: min(1.35vw,21px);}
#form .confirm span.wpcf7-list-item-label { position: relative; display: flex; align-items: center; cursor: pointer; padding-left: 32px;}
#form .confirm span.wpcf7-list-item-label::before { content: ""; display: block; width: 24px; height: 24px; background: #ebebeb; border: solid 1px #333;
 position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
#form .confirm span.wpcf7-list-item-label::after { content: ""; display: block; width: 14px; height: 14px; background-color: #003C88;
 position: absolute; left: 5px; top: 50%; transform: translateY(-50%); display: none;
}
#form .confirm label { position: relative;}
#form .confirm input[type="checkbox"] { position: absolute; left: 5px; top: 50%;}
#form .confirm input[type="checkbox"]:checked + span.wpcf7-list-item-label::after { display: block;}

#form .btn-submit { width: 72%; max-width: 420px; margin: 0 auto;}
#form .btn-submit input[type="submit"] { display: block; width: 100%; padding: 10px; background: #FFB300; border-radius: 5px; box-shadow: 5px 5px 0 #333;
 color: #333;  font-size: 21px; font-size: min(1.35vw,21px); font-weight: 700; text-align: center;
}
#form .btn-submit input[type="submit"]:hover { opacity: 0.8;}
@media (max-width: 801px) {
	#form .tit p { font-size: 2.1vw;}
	#form ul li dl dt { width: 220px; font-size: 2.4vw;}
	#form ul li dl dt.security { font-size: 2.1vw;}
	#form ul li dl dd { font-size: 2.1vw;}
	#form ul li dl dd span.memo { font-size: 14px;}
	#form p.txt { font-size: 16px;}
	#form .confirm { font-size: 16px;}
	#form .btn-submit input[type="submit"] { font-size: 18px;}
}
@media (max-width: 641px) {
	#form .tit p { font-size: 2.4vw;}
	#form ul li dl dt,
	#form ul li dl dd { display: block;}
	#form ul li dl dt { width: 100%; margin-bottom: 8px; font-size: 16px;}
	#form ul li dl dt.security { font-size: 15px;}
	#form ul li dl dd { width: 100%; font-size: 16px;	}
	#form ul li dl dt span.must { font-size: 14px;}
	#form ul li dl dd span.memo { padding: 4px 0;}
	#form p.txt { text-align: left;}
	#form .confirm { margin: 0 0 20px;}
	#form .btn-submit input[type="submit"] { padding: 6px; font-size: 18px;}
}
@media (max-width: 481px) {
	#form .inner-sct { padding: 60px 0 80px;}
	#form .tit { margin-bottom: 12px;}
	#form .tit p { font-size: 14px;}
	#form .tit p span.must { font-size: 12px;}
	#form ul li { padding: 12px 0;}
	#form ul li dl dt { font-size: 16px; font-weight: 700;}
	#form ul li dl dt span.must { font-size: 12px;}
	#form ul li dl dd { font-size: 14px;}
	#form ul li dl dd .wpcf7-list-item { width: 100%; margin: 0 auto 8px;}
	#form ul li dl dd.check .wpcf7-list-item { width: 48%; margin: 0 auto 8px;}
	#form ul li dl dd .wpcf7-list-item.last { margin-bottom: 0;}
	#form ul li dl dd span.wpcf7-list-item-label { padding-left: 28px;}
	#form ul li dl dd span.wpcf7-list-item-label::before { width: 20px; height: 20px;}
	#form ul li dl dd span.wpcf7-list-item-label::after { width: 12px; height: 12px; left: 4px;}
	#form ul li dl dd span.memo { font-size: 12px;}

	#form p.txt { font-size: 14px;}
	#form .confirm { font-size: 14px;}
	#form .confirm span.wpcf7-list-item-label { padding-left: 32px;}
	#form .confirm span.wpcf7-list-item-label::before { width: 20px; height: 20px;}
	#form .confirm span.wpcf7-list-item-label::after { width: 12px; height: 12px; left: 4px;}

	#form .btn-submit input[type="submit"] { font-size: 16px;}
}
