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

.background-piece{
	width:clamp(54rem,calc(54rem + 180*(100vw - 768px) / (1440 - 768)),72rem);
	height:clamp(24rem,calc(24rem + 80*(100vw - 768px) / (1440 - 768)),32rem);
	margin-left:calc(-6vw/14.4);
	margin-bottom:calc(24vw/14.4);
	background-image:url("../img/piece_contact.png");
	background-size: contain; 
}

@media screen and (max-width:768px){
	.background-piece{
		width: 90%;
    	height:25rem;
		background-image:url("../img/piece_contact_sp.png");
		background-position:50% 50%;
		margin-left:0;
		margin-bottom:4rem;
	}
}

.page-title{
	height: 450px;
    padding: 6rem 0 0 0;
}

.form{
	display: flex;
	flex-direction:column;
	padding: 0 var(--sec-320) 16rem var(--sec-320);
	align-items:center;
	justify-content: center;
	gap:6rem;
}

.contact-text{
	width:100%;
	display:flex;
	flex-direction:column;
	gap:var(--fs-r);
}

.contact-text p{
	line-height:200%;
}

.contact-text span{
	font-size:var(--fs-s);
}

.form-flex{
	width:100%;
	display:flex;
	flex-direction:column;
	gap:2.4rem;
}

.form-flex p{
	color:var(--orange);
	font-weight:600;
}

.form form{
	display:flex;
	flex-direction: column;
	gap:4rem;
}

.form dl{
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items: center;
    margin-bottom: 2em;
}

.form dt{
	font-weight:500;
	line-height:200%;
}

.form dd{
	display:flex;
	width:75%;
	align-items:center;
	padding:1.2rem var(--fs-r);
	background:var(--white);
	position:relative;
}

.form .confirm{
	line-height:200%;
	background:var(--bg-sub);
}

.form dd span{
	position:absolute;
	bottom:-2.2rem;
	left:0.5rem;
	font-size:var(--fs-xs);
	color:var(--orange);
	font-weight:600;
}

.form input{
	width:100%;
}

.form textarea{
	line-height:200%;
	resize:none;
	width:100%;
}

.confirm-button{
	display:flex;
	gap:1rem;
	align-items:center;
	max-width: 500px;
	margin: 0 auto;
	
}
.confirm-button .btn-l{
	width: 200px;
	padding-left: 0;
	padding-right: 0;
}
@media screen and (max-width:768px){
	.confirm-button .btn-l{
		width: 130px;
}
}


@media screen and (max-width:768px){
	.form{
		padding: 0 5% 16rem 5%;
	}
}
	
@media screen and (max-width:428px){
	.form dl{
		flex-direction:column;
		align-items:flex-start;
		gap:1rem;
	}
	
	.form dd{
		width:100%;
	}
}
	
	
	
@media screen and (max-width:768px){
}