@charset "utf-8";

h7{font-size: 40px; font-weight: 600; letter-spacing: -1.5px;}
h7 span{padding: 1px 9px 5px 5px; margin: 0 2px 0 4px;}
.h7-caption{font-size: 18px; text-align: center; margin-top: 80px; font-feature-settings: "palt";}
.h7-caption span{margin-left: 5px;}

.feedback{width: 80%; max-width: 1000px; text-align: center;}

/*----- main -----*/
table{width: 100%; margin-top: 10px; table-layout: fixed;}
table tr{padding: 35px 20px 40px; display: flex; flex-direction: column;}
table th{font-size: 16px; font-weight: 600; margin-bottom: 10px;}
table td{width: 100%; font-size: 20px; text-align: start;}
table td .input-wrap{width: 100%;}
table td p{white-space: pre-line;}
table td input, table td textarea{width: 100%; max-width: 100%; font-size: 18px;}

#error_message, .feedback table td .error-mes{font-size: 16px; margin-top: 3px;}

.bottomBtnBox p{display: flex; justify-content: center; margin: 80px auto 0; position: relative;}
.bottomBtnBox input{width: 250px; height: 70px; display: flex; justify-content: center; align-items: center; border-radius: 5px; position: relative;  cursor: pointer; font-size: 21px; font-weight: 500; line-height: 1; z-index: 2; color: var(--main-blue); background-color: var(--white); border: 3px solid var(--main-blue); transition: all 0.5s; overflow: hidden; -webkit-appearance: none;
 appearance: none;}

.bottomBtnBox input:hover {font-size: 23px; color: var(--white); background-color: var(--main-blue); transition: all 0.5s;}
.wpcf7-spinner{margin-left: 15px; margin-right: 0; background-color: var(--sub-blue);}
.bottomBtnBox p .wpcf7-spinner{position: absolute !important; top: 0; right: calc(50% - 140px); transform: translate(100%, 0);}
.bottomBtnBox.btn-flex p .wpcf7-spinner{position: absolute !important; top: 0; right: calc(50% - 275px); transform: translate(100%, 0);}

#required_confirm{font-size: 18px; font-weight: 600;}

.nomal-btn{margin: 80px auto 0;}

/*----- confirm -----*/
.btn-flex{display: flex; justify-content: center; margin: 80px auto 0;}

.feedback-btn{width: 250px; height: 70px; display: flex; justify-content: center; align-items: center; border-radius: 5px; position: relative;  cursor: pointer; font-size: 21px; font-weight: 500; line-height: 1; z-index: 2; overflow: hidden; color: var(--main-blue); background-color: var(--white); border: 3px solid var(--main-blue); margin: 31px auto 0; transition: all 0.5s; -webkit-appearance: none; appearance: none;}
.feedback-btn.error-btn{width: 330px; margin: 80px auto 150px; font-size: 19px; color: var(--text-lightgray); background-color: var(--white); border: 3px solid var(--text-lightgray); -webkit-appearance: none; appearance: none;}
.feedback-btn:hover{font-size: 23px; color: var(--white); background-color: var(--main-blue); transition: all 0.5s;}
.feedback-btn.error-btn:hover{font-size: 21px; color: var(--white); background-color: var(--text-lightgray); transition: all 0.5s;}

.btn-flex input:first-child{width: 250px; height: 70px; display: flex; justify-content: center; align-items: center; border-radius: 5px; position: relative;  cursor: pointer; font-size: 21px; font-weight: 500; line-height: 1; z-index: 2; color: var(--text-lightgray); background-color: var(--white); border: 3px solid var(--text-lightgray); transition: all 0.5s; overflow: hidden; margin: 0 20px 0 0; -webkit-appearance: none; appearance: none;}
.btn-flex input:first-child:hover {font-size: 23px; color: var(--white); background-color: var(--text-lightgray); transition: all 0.5s;}
.btn-flex input:nth-child(2){width: 250px; height: 70px; display: flex; justify-content: center; align-items: center; border-radius: 5px; position: relative;  cursor: pointer; font-size: 21px; font-weight: 500; line-height: 1; z-index: 2; color: var(--main-blue); background-color: var(--white); border: 3px solid var(--main-blue); transition: all 0.5s; overflow: hidden; margin: 0 0 0 20px; -webkit-appearance: none; appearance: none;}
.btn-flex input:nth-child(2):hover {font-size: 23px; color: var(--white); background-color: var(--main-blue); transition: all 0.5s;}

.error-txt{display: block; font-size: 45px; font-weight: 600; text-align: center; max-width: 1000px; margin: 150px auto 0;}
.error-caption{font-size: 18px; font-weight: 500; text-align: center; max-width: 1000px; margin: 15px auto 0;}

/*----- fin -----*/

/*----- タブレット版レスポンシブ -----*/


@media screen and (max-width: 1300px){

.bottomBtnBox p{display: flex; justify-content: center; margin: 80px auto 0;}
.bottomBtnBox input{width: 200px; height: 60px; font-size: 17px;}
.bottomBtnBox.btn-flex input:first-child, .bottomBtnBox.btn-flex input:nth-child(2){width: 200px; height: 60px; font-size: 17px;}

.bottomBtnBox input:hover {font-size: 19px;}
.bottomBtnBox.btn-flex input:first-child:hover, .bottomBtnBox.btn-flex input:nth-child(2):hover{font-size: 19px;}
	
.bottomBtnBox.btn-flex p .wpcf7-spinner{right: calc(50% - 225px);}
.bottomBtnBox p .wpcf7-spinner{right: calc(50% - 115px);}
	
.feedback-btn{width: 200px; height: 60px; font-size: 20px; margin: 80px auto 150px;}
.feedback-btn.error-btn{width: 280px; font-size: 18px;}
.feedback-btn:hover{font-size: 22px;}
.feedback-btn.error-btn:hover{font-size: 20px;}
	
.btn-flex input:first-child{width: 200px; height: 60px; font-size: 20px;}
.btn-flex input:first-child:hover {font-size: 22px;}
.btn-flex input:nth-child(2){width: 200px; height: 60px; font-size: 20px;}
.btn-flex input:nth-child(2):hover {font-size: 22px;}
	
}

@media screen and (max-width: 1000px){

.feedback{width: 85%; max-width: unset;}
	
.feedback-btn{margin: 15px auto 0;}
.feedback-btn.error-btn{margin: 80px auto 100px;}
	
.error-txt{margin: 100px auto 0;}
	
}

/*----- スマホ版レスポンシブ -----*/

@media screen and (max-width: 768px){

h7{font-size: 34px;}
.h7-caption{font-size: 15px; margin-top: 60px;}	
	
table tr{padding: 30px 10px 35px;}
	
.btn-flex p{flex-direction: column-reverse; align-items: center; margin: 60px auto 0;}
.btn-flex p br{display: none;}
.bottomBtnBox.btn-flex p input:first-child{margin: 30px 0 0 0;}
.bottomBtnBox.btn-flex p input:nth-child(2){margin: 0;}
	
.bottomBtnBox.btn-flex p .wpcf7-spinner{right: calc(50% - 115px);}
	
.error-txt{font-size: 34px;}
.error-caption{font-size: 16px;}

}

@media screen and (max-width: 550px){
	
.h7-caption span{margin-left: 0;}
	
.error-caption{max-width: 280px;}
	
}

@media screen and (max-width: 450px){

.btn-flex{flex-direction: column-reverse;align-items: center;}
.btn-flex input:first-child{margin-right: 0;}
.btn-flex input:nth-child(2){margin-bottom: 30px; margin-left: 0;}
	
}

@media screen and (max-width: 385px){

h7{font-size: 27px;}
	
}