@charset "utf-8";

/*-------------------------------
	共通
-------------------------------*/

.Contact__text{
	font-size: 1.6rem;
	line-height: calc(3.5 / 1.6);
	text-align: center;
}
.Contact__text .kome{
	color: #f00;
}
.Contact__header{
	margin-top: 5rem;
	margin-bottom: 12.5rem;
	padding: 2.7rem 3.8rem 3.8rem 3.8rem;
	width: 100%;
	max-width: 83rem;
	margin-left: auto;
	margin-right: auto;
	border:  1px solid #000;
	text-align: center;
}
.Contact__header-title{	
    font-size: 1.6rem;
    line-height: calc(3.5 / 1.6);
	text-align: center;
}
.Contact__header-tel{
	font-family: var(--en);
    font-size: 4rem;
	line-height: 1.25;
	font-weight: 700;
}
.Contact__header-text{	
    font-size: 1.6rem;
    line-height: calc(3.5 / 1.6);
	text-align: center;
}

.Contact__step{
	width: 100%;
	max-width: 77rem;
	margin-bottom: 14rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.Contact__step::before,
.Contact__step::after{
	content: "";
	display: block;
	width: 50%;
	height: .4rem;
	position: absolute;
	top: calc(2.6rem / 2);
	transform: translateY(-50%);
	background-image: radial-gradient(circle, #A3A3A3 .2rem, transparent .2rem);
	background-repeat: repeat-x;
	background-size: 1rem .4rem;
	z-index: -1;
}
.Contact__step::before{
	left: 0;
	background-position: left top;
}
.Contact__step::after{
	right: 0;
	background-position: right top;
}
.Contact__step-item{
	width: 7rem;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}
.Contact__step-item::before{
	background: #A3A3A3;
	content: "";
	display: block;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	margin-bottom: 1.8rem;
}
.Contact__step-item-number{
	font-family: var(--en);
	width: 100%;
	font-size: 6rem;
	margin-bottom: 1.4rem;
	letter-spacing: -.02em;
	line-height: .65;
	padding-bottom: .8rem;
	display: block;
	text-align: center;
	color: #A3A3A3;
}
.Contact__step-item-text{
	color: #A3A3A3;
	font-size: 1.6rem;
	letter-spacing: .1em;
	font-weight: 700;
	line-height: 1;
	display: block;
	text-align: center;
}

.Confirm .Contact__step::before,
.Send .Contact__step::before,
.Send .Contact__step::after{
	background-image: radial-gradient(circle, var(--maincolor) .2rem, transparent .2rem);
}
.Input .Contact__step-item:nth-of-type(1)::before,
.Confirm .Contact__step-item:nth-of-type(1)::before,
.Confirm .Contact__step-item:nth-of-type(2)::before,
.Send .Contact__step-item:nth-of-type(1)::before,
.Send .Contact__step-item:nth-of-type(2)::before,
.Send .Contact__step-item:nth-of-type(3)::before{
	background: var(--maincolor);
}
.Input .Contact__step-item:nth-of-type(1) .Contact__step-item-number,
.Confirm .Contact__step-item:nth-of-type(1) .Contact__step-item-number,
.Confirm .Contact__step-item:nth-of-type(2) .Contact__step-item-number,
.Send .Contact__step-item:nth-of-type(1) .Contact__step-item-number,
.Send .Contact__step-item:nth-of-type(2) .Contact__step-item-number,
.Send .Contact__step-item:nth-of-type(3) .Contact__step-item-number{
	color: var(--maincolor);
}
.Input .Contact__step-item:nth-of-type(1) .Contact__step-item-text,
.Confirm .Contact__step-item:nth-of-type(1) .Contact__step-item-text,
.Confirm .Contact__step-item:nth-of-type(2) .Contact__step-item-text,
.Send .Contact__step-item:nth-of-type(1) .Contact__step-item-text,
.Send .Contact__step-item:nth-of-type(2) .Contact__step-item-text,
.Send .Contact__step-item:nth-of-type(3) .Contact__step-item-text{
	color: var(--maincolor);
}

.C-Button input{
	font-family: var(--en);
	width: 100%;
	height: 100%;
	font-weight: 600;
	font-size: 1.5rem;
	text-align: center;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){
	
	.Contact__text{
		font-size: var(--font-size);
	}

	.Contact__header{
		margin-top: 7rem;
		margin-bottom: 17.5rem;
		padding: 3.78rem 5.32rem 5.32rem 5.32rem;
		max-width: 83rem;
	}
	.Contact__header-title{	
		font-size: var(--font-size);
	}
	.Contact__header-tel{
		font-size: 5.6rem;
	}
	.Contact__header-text{	
		font-size: var(--font-size);
	}
	.Contact__step{
		width: 100%;
		max-width: 77rem;
		margin-bottom: var(--padding-topbottom);
	}
	.Contact__step::before,
	.Contact__step::after{
		width: 50%;
		height: .8rem;
		top: calc(2.6rem / 2);
		transform: translateY(-50%);
		background-image: radial-gradient(circle, #A3A3A3 .4rem, transparent .4rem);
		background-repeat: repeat-x;
		background-size: 2rem .8rem;
	}
	.Contact__step-item{
		width: 9.8rem;
	}
	.Contact__step-item::before{
		width: 4rem;
		height: 4rem;
		margin-bottom: 2rem;
	}
	.Contact__step-item-number{
		font-size: 8.4rem;
		margin-bottom: 1.56rem;
		padding-bottom: 1.32rem;
	}
	.Contact__step-item-text{
		font-size: var(--font-size);
	}

	.Confirm .Contact__step::before,
	.Send .Contact__step::before,
	.Send .Contact__step::after{
		background-image: radial-gradient(circle, var(--maincolor) .4rem, transparent .4rem);
	}
	.C-Button input{
		font-size:  var(--font-size);
	}

}



/*-------------------------------
	お問い合わせ
-------------------------------*/

.Contact__item-wrap{
	margin-bottom: 6rem;
}
.Contact__item{
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.Contact__item:not(:last-child){
	margin-bottom: 3.6rem;
}
.Contact__item-title{
	width: 30rem;
	font-size: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.Contact__item-title.-req::after{
	content: "必須";
	display: block;
	width: 5rem;
	height: 2rem;
	padding-bottom: .2rem;
	font-size: 1.4rem;
	background: #E82727;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Contact__item-title span{
	max-width: calc(100% - 5rem);
	padding-right: 1.5rem;
	display: block;
}
.Contact__item-body{
	width: calc(100% - 30rem);
	font-size: 1.6rem;
}
.Contact__item-field{
	width: 100%;
	line-height: 1;
}
.Contact__item-field input{
	width: 100%;
	height: 4.5rem;
	padding: 1rem 1.4rem;
	border: 1px solid #6F6F6F;
}
.Contact__item-select{
	width: 100%;
	line-height: 1;
}
.Contact__item-select select{
	width: 100%;
	height: 4.5rem;
	padding: 1rem 1.4rem;
	line-height: 1;
	border: 1px solid #6F6F6F;
}
.Contact__item-textarea{
	width: 100%;
}
.Contact__item-textarea textarea{
	width: 100%;
	height: 31.7rem;
	padding: 1rem 1.4rem;
	border: 1px solid #6F6F6F;
}
::placeholder{
	color: #9B9B9B;
}
.Contact__checkbox .wpcf7-list-item{
	line-height: 1;
	display: block;
}
.Contact__checkbox input[type="checkbox"]{
	display: none;
}
.Contact__checkbox .wpcf7-list-item-label{
	font-size: 0;
	display: block;
	position: relative;
	cursor: pointer;
}
.Contact__checkbox .wpcf7-list-item-label::before{
	border: 1px solid var(--blackcolor);
	content: "";
	display: block;
	width: 3rem;
	height: 3rem;
}
.Contact__checkbox .wpcf7-list-item-label::after{
	transition: var(--transition);
	content: "";
	display: block;
	width: 1.1rem;
	height: 1.5rem;
	border-bottom: 2px solid #C3C3C3;
	border-right: 2px solid #C3C3C3;
	position: absolute;
	left: .9rem;
	top: .5rem;
	transform: rotate(45deg);
}
.Contact__checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::after{
	border-color: var(--maincolor);
}

.Contact__policy{
	width: 100%;
	margin-bottom: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Contact__policy-text{
	padding-left: 1.4rem;
	font-size: 2rem;
	line-height: 1;
}
.Contact__policy-text a{
	line-height: 1;
	color: #B2B2B2;
	text-decoration: underline;
}

.Contact__button:has(input[type="submit"]:disabled){
	opacity: .5 !important;
	pointer-events: none;
}
.Contact__button:has(input[type="submit"]:disabled)::after{
	background: #6F6F6F;
}
.Contact__button:has(input[type="submit"]:disabled) .a{
	border-color: #6F6F6F;
	color: #6F6F6F;
	background: #eee;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

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

	.Contact__item-wrap{
		margin-bottom: 8.4rem;
	}
	.Contact__item{
		flex-direction: column;
	}
	.Contact__item:not(:last-child){
		margin-bottom: 4.5rem;
	}
	.Contact__item-title{
		width: 100%;
		font-size: var(--font-size);
	}
	.Contact__item-title.-req::after{
		width: 7rem;
		height: 3.2rem;
		padding-bottom: .29rem;
		font-size: 2.2rem;
	}
	.Contact__item-title span{
		max-width: calc(100% - 7rem);
		padding-right: 1.5rem;
	}
	.Contact__item-body{
		width: 100%;
		font-size: var(--font-size);
	}
	.Contact__item-field{
		width: 100%;
		line-height: 1;
	}
	.Contact__item-field input{
		width: 100%;
		height: 7rem;
		padding: 1.5rem 2rem;
	}
	.Contact__item-select{
		width: 100%;
		line-height: 1;
	}
	.Contact__item-select select{
		width: 100%;
		height: 7rem;
		padding: 1.5rem 2rem;
	}
	.Contact__item-textarea{
		width: 100%;
	}
	.Contact__item-textarea textarea{
		width: 100%;
		height: 32rem;
		padding: 1.5rem 2rem;
	}
	.Contact__checkbox .wpcf7-list-item-label::before{
		width: 4.5rem;
		height: 4.5rem;
	}
	.Contact__checkbox .wpcf7-list-item-label::after{
        width: 1.5rem;
        height: 2.2rem;
		border-bottom: 2px solid #C3C3C3;
		border-right: 2px solid #C3C3C3;
		position: absolute;
        left: 1.3rem;
        top: .75rem;
	}
	.Contact__policy{
		margin-bottom: 8rem;
	}
	.Contact__policy-text{
		padding-left: 2rem;
		font-size: 3.2rem;
	}
}



/*-------------------------------
	確認
-------------------------------*/

.Confirm .Contact__text{
	margin-bottom: 9.8rem;
}
.Confirm .Contact__item-wrap{
	margin-bottom: 11rem;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

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

	.Confirm .Contact__text{
		margin-bottom: 9.8rem;
	}
	.Confirm .Contact__item-wrap{
		margin-bottom: var(--padding-topbottom);
	}
}



/*-------------------------------
	完了
-------------------------------*/

.Send__inner{
	margin-bottom: 9.5rem;
}

.Send .Contact__text{
	margin-bottom: 9.8rem;
}
.Send__text{
	font-size: 1.6rem;
	line-height: calc(3.5 / 1.6);
	text-align: center;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){
	
	.Send__inner{
		margin-bottom: 12rem;
	}

	.Send .Contact__text{
		margin-bottom: 12rem;
	}
	.Send__text{
		font-size: var(--font-size);
	}
}