@charset "utf-8";
/* CSS Document */

/*--------------------------------
contact
---------------------------------*/
#contact{position: relative;z-index: 1;margin-bottom: 24rem;}
#contact .bg-blue-inner {padding: 5rem 0 0;}
.contact-wrap{max-width: 1000px;width: 95%;margin: 0 auto;background: #fff;border-radius: 24px;filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));}
.contact-inner{padding: 5.25rem 0;width: 78%;margin: 0 auto;}
.h2-contact{padding: 3rem 0;}

.form-item{font-size: 1.125rem;padding: 1rem 0;line-height: 1.5rem;}
.form-item-label{font-weight: bold;padding-bottom: 0.3rem;}
.form-item span.form-required, .form-item span.form-optional{font-size: 0.938rem;color: #fff;border-radius: 4px;padding: 0.1rem 0.3rem;margin-left: 0.75rem;}
.form-item span.form-required{background: #E23737;}
.form-item span.form-optional{background: #5F85D6;}
.form-box{border: 1px solid #707070;border-radius: 3px;padding: 0.5rem;font-size: 1.125rem;max-width: 757px;width: 100%;}
.form-box-select{max-width: 400px;width: 100%;}
.form-box-text{height: 300px;}

.submit-btn-area{margin: 0 auto;max-width: 409px;width: 100%;}
.form-btn{width: 178px;border: none;height: 64px;border-radius: 4px;font-size: 1.3rem;font-weight: bold;font-family: "Zen Kaku Gothic New", sans-serif;margin-top: 3rem;}
.form-btn:hover{opacity: 0.7;}
.form-btn.submit{background: #82D0E8;margin-right: 3rem;color: #000;}
.form-btn.reset{background: #BBBBBB;color: #000;}
/*--------------------------------
confirm
---------------------------------*/
.pp{
    height: 360px;
    width: 100%;
    border: 1px solid #656565;
    background: #fff;
    overflow-y: scroll;
	padding: 2.8rem 1rem 2rem;
}
.pp .pp-title{
	font-size: 1.125rem;
	font-weight: bold;
    text-align: center;
    padding-bottom: 1rem;
}
.pp .pp-sub-title{
	font-size: 1rem;
    font-weight: bold;
	padding-bottom: 0.5rem;
}
.pp-text-top{
	line-height: 1.6rem;
    font-size: 0.938rem;
	padding-bottom: 1rem;
}
.pp-text{
    margin: 0 auto;
    width: 100%;
    line-height: 1.6rem;
    font-size: 0.938rem;
	padding-bottom: 1rem;
	padding-left: 1rem;
}
.pp-check{text-align: center;padding: 2rem 0 0;}
.check{margin-right: 0.5rem;}
.form{margin-bottom: 3rem;}
#contact_confirm .bg-blue::before {top: 21rem;}
#contact_confirm .bg-blue::after{bottom: 16rem;}
#contact_confirm{margin-bottom: 17rem;}
#contact_confirm .bg-blue-inner, #contact_thanks .bg-blue-inner{padding-top: 3rem;}
/*--------------------------------
thanks
---------------------------------*/
#contact_thanks .bg-blue::before {top: 20.5rem;}
#contact_thanks .bg-blue::after{bottom: 20rem;}
#contact_thanks .bg-blue-inner{padding-bottom: 4rem;}
#contact_thanks{margin-bottom: 23rem;}
#contact_thanks h3{font-size: 1.5rem;font-weight: bold;text-align: center;padding-bottom: 2rem;}
#contact_thanks p{font-size: 1.125rem;line-height: 1.75rem;font-weight: 500;text-align: center;padding-bottom: 1rem;}
.topbtn {margin: 0 auto 17rem;padding-top: 12rem;}


/*--------------------------------
wordpress
---------------------------------*/
.wpcf7-spinner{display: none!important;}

/*footer*/
footer:before{position: absolute;content: '';display: inline-block;width: 158px;height: 145px;background-image: url("../img/footer/captain.webp");background-size: contain;vertical-align: middle;top: -5rem;left: 4rem;background-repeat: no-repeat;}
footer:after{position: absolute;content: '';display: inline-block;width: 230px;height: 300px;background-image: url("../img/footer/shriff.webp");background-size: contain;vertical-align: middle;top: -15.5rem;right: 4rem;background-repeat: no-repeat;}

@media screen and (max-width: 1600px){
	#contact_thanks .bg-blue::after{bottom: 18rem;}
	.topbtn{margin: 0 auto 15rem;padding-top: 5rem;}

}
@media screen and (max-width: 1200px){
	#contact .bg-blue::after{bottom: -25rem;height: 400px;}
	#contact_confirm .bg-blue::after{bottom: 12rem;}
	#contact {margin-bottom: 20rem;}
	#contact_thanks {margin-bottom: 15rem;}
	#contact_thanks .bg-blue::after{bottom: 18rem;height: 350px;}
}

@media screen and (max-width: 1050px){
	footer:before{width: 110px;height: 101px;top: -5rem;left: 3rem;}
	footer:after{width: 161px;height: 210px;top: -11rem;right: 3rem;}
}
@media screen and (max-width: 950px){
	.back-set{display: none;}
	#contact_thanks .bg-blue::before {top: 18rem;}
	#contact_thanks .bg-blue::after{bottom: 7rem;}
	#contact_thanks{margin-bottom: 8rem;}
	#contact{margin-bottom: 14rem;}
	#contact_confirm .bg-blue::before {top: 18rem;}
	#contact_confirm .bg-blue::after{bottom: 0;}
	#contact_confirm {margin-bottom: 12rem;}
	#contact_thanks .bg-blue-inner {padding: 3rem 0 2rem;}
	}
@media screen and (max-width: 800px){
	#contact_confirm .bg-blue::before {top: 16rem;}
	#contact_thanks .bg-blue::before {top: 17rem;}
	}
@media screen and (max-width: 725px){
	.contact-inner{padding: 4rem 0;width: 90%;margin: 0 auto;}	
	#contact {margin-bottom: 8rem;}
}
@media screen and (max-width: 650px){
	#contact .bg-blue::before {top: 10rem;}	
	#contact_thanks .bg-blue::before {top: 13rem;}
	#contact_thanks .bg-blue::after{bottom: 3rem;}
	h2 span {top: 9rem;}
	#contact .bg-blue-inner, #contact_confirm .bg-blue-inner,#contact_thanks .bg-blue-inner{padding-top: 2rem;}
	#contact_confirm .bg-blue::before {top: 13rem;}
	#contact_confirm .bg-blue::after{bottom: -6rem;}
	#contact_confirm {margin-bottom: 8rem;}
	
	h2{padding: 3rem 0;}
	h2 span{top: 7rem;}
}
@media screen and (max-width: 600px){
	.form-item, .form-box{font-size: 1rem;line-height: 1.4rem;}
	.submit-btn-area {max-width: 178px;}
	.form-btn.submit{margin-right: 0;margin-top: 2rem;}
	.form-btn.reset{margin-top: 1.5rem;}
	.bg-blue-inner {padding: 2rem 0 0;}
	#contact_thanks h3{font-size: 1.25rem;}
	#contact_thanks p{font-size: 1rem;}
}

@media screen and (max-width: 550px){
	footer:before{width: 73px;height: 67px;top: -3rem;left: 2rem;}
	footer:after{width: 106px;height: 138px;top: -7.5rem;right: 1rem;}
	#contact {margin-bottom: 6rem;}
}

@media screen and (max-width: 500px){
	.contact-inner{padding: 3rem 0;}
	h2{padding: 4rem 0 1rem;}
	h2 span {top: 7rem;}
	.pp .pp-title{font-size: 1rem;}
	#contact_confirm .bg-blue::before {top: 14rem;}
	#contact_confirm .bg-blue::after{bottom: -8rem;}
	#contact_confirm {margin-bottom: 6rem;}	
	.pp .pp-sub-title{font-weight: bold;}
	.pp-text-top{font-size: 0.9rem;}
	.pp-text{font-size: 0.875rem;}
	#contact_thanks .bg-blue{margin-top: 2rem;}
	#contact_thanks .bg-blue::before {top: 15rem;}
	#contact_thanks .bg-blue::after{bottom: 0rem;}
	#contact_thanks{margin-bottom: 5rem;}
}