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


.p_contact dl{
	margin-bottom: 50px;
}
.p_contact dt{
	color: var(--pink-color);
}




.p_contact dt,.p_contact dd{
	margin: 10px 0;
	font-size: 2.1rem;
	box-sizing: border-box;
}


.wpcf7-text{
	width: 100%;
	padding: 10px;
	border: 1px solid #3E3E3E;
}


.p_contact textarea{
	max-width: 100%;
	min-width: 100%;
	width: 100%;
	padding: 10px;
	border: 1px solid #3E3E3E;
}


.p_contact .btn_box{
		width: 540px;
		display: block;
		padding-bottom: 20px;
		max-width: 80%;
		height: 60px;
		margin: 72px auto;
		position: relative;
		text-align: center;
		color: #fff;
		font-size: 1.6rem;
		letter-spacing: 0.06em;
		background-color: var(--pink-color);
		transition:background .2s,color .2s;
		clip-path: polygon(0 0, 0 100%, calc(100% - 15px) 100%, 100% calc(100% - 15px), 100% 0);
	}

	.p_contact .btn_box:hover{
		background-color: var(--pink-color2);
		}


.p_contact .wpcf7-spinner{
	position: absolute;
}
.btn_text{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	display: block;
	transition:background .2s,color .2s;}



.btn:hover{
	background-color: var(--pink-color2);
	}




/*-----やじるし------*/

	/*矢印と下線の形状*/
	.btn_box:before{
		content: '';
		/*絶対配置で下線の位置を決める*/
	  position: absolute;
		top: calc(50% + 3px);
		right: 22px;
		/*下線の形状*/    
		width: 37px;
		height: 2px;
	  background:#fff;
		transform: translateY(-50%);
		/*アニメーションの指定*/
		transition: all .2s;
	}

	.btn_box:after{
		content: '';
		/*絶対配置で矢印の位置を決める*/
	  position: absolute;
		 top: calc(50% - 4px);
		 right: 20px;
		/*矢印の形状*/    
		width: 15px;
		height:2px;
		background:#fff;
		 transform: rotate(45deg);       /* 回転 */
		transform-origin: 50% 0%;
		/*アニメーションの指定*/
		transition: all .2s;
	}



@media screen and (max-width: 770px) {
.p_contact dt,.p_contact dd{
	padding: 10px;
	font-size: 1.8rem;
	box-sizing: border-box;
}
	
	
	.p_contact .btn{
	font-size: 1.8rem;
}


	
}/*@media screen and (max-width: 767px) {*/