@charset "utf-8";

/* ------------------------------------------------------------------------------------------------- common */


.gradation-ttl{ background: linear-gradient(90deg, rgba(187,233,248,1) 0%, rgba(196,183,216,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.en-ttl{ position: relative; top: 40px; font-size: 140px; font-family: "Neue Haas Grotesk Display Pro", sans-serif; font-weight: 700; font-style: normal; text-align: center; line-height: inherit;}
.ja-ttl{ z-index: 1; position: relative; padding: 0 0 40px; font-size: 34px; line-height: 150%; text-align: center; font-family: 'source-han-sans-japanese'; }

/* ------------------------------------------------------------ contact */

/* thanks */
.contact-inner{ width: 1000px; margin: 0 auto; text-align: center; }
.contact-ttl{ padding: 0 0 40px; letter-spacing: 0.05em; text-align: center; font-family: "source-han-sans-japanese"; font-weight: 500; line-height: 36px;}
.caution{ padding: 0 0 50px; font-size: 14px; line-height: 150%; text-align: center; }

.top_btn{ width: 250px; margin: 0 auto; }
.top_btn a{ display: block; width: 100%; height: 60px; padding: 21px 0 0; border: 1px solid #000; font-size: 15px; text-align: center; border-radius: 50px; }
.top_btn a:hover{ color: #fff; background: #000; }

#thanks{ padding: 100px 0 80px; background: #F4F4F4; }
#thanks .box { width: 755px; background: #fff; padding: 80px 50px 90px; margin: 0 auto; }
#thanks small{ display: block; padding: 0 0 40px; font-size: 16px; line-height: 200%; }
#thanks .contact-ttl{ padding: 0 0 65px; }
#thanks .caution{ padding: 0 0 40px; font-size: 26px; font-family: "source-han-sans-japanese"; font-weight: 500; }


/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
	.en-ttl{ top: 24px; font-size: 60px; }
.ja-ttl{ padding: 0 0 30px; font-size: 17px; }
/* ------------------------------------------------------------ contact */
	#contact{ padding: 40px 0 50px; }
	#contact .form-box{ width: 100%; padding: 30px 20px;  }
	
	#confirm .box,
	#error .box,
	#thanks .box { width: 100%; padding: 30px 5% 40px; }
	.alert span{ font-size: 12px; padding: 10px 0; }

	
	.contact-form th{ font-size: 14px; }
	.contact-form .required{ font-size: 10px; }
	.contact-form .submit{ width: 80%; margin: 10px auto 0; }
	#confirm table{ width: 100%; }


/* thanks */
	#thanks{ padding: 80px 0; }
	#thanks .contact-ttl{ padding: 0 0 50px; font-size: 30px; }
    #thanks small{ padding: 0 0 20px; font-size: 13px; }
    #thanks .caution{ padding: 0 0 20px; font-size: 16px; }
 
	.contact-inner{ width: 90%; }
	.caution{ padding: 0 0 15px; font-size: 12px; }
	.top_btn{ width: 80%; }
	.top_btn a{ height: 50px; padding: 16px 0 0; font-size: 15px; }







}