@charset "utf-8";

/*-------------------------------
	キービジュアル
-------------------------------*/

.Keyvisual__image{
	background-image: url(../images/contact/img_keyvisual.jpg);
	background-image: image-set(url(../images/contact/img_keyvisual.jpg) 1x, url(../images/contact/img_keyvisual@2x.jpg) 2x);
}

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

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

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

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

}



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

.Contact-frame input::placeholder,
.Contact-frame textarea::placeholder{
	color: #dcdcdc;
}
.Contact__title{
	margin-bottom: 13.5rem;
}
.Contact__req-text{
	width: 100%;
	margin-bottom: 1.2rem;
	line-height: 1;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.Contact__req-text::before{
	content: "※";
	display: block;
	line-height: 1;
	color: #c1272d;
}
.Contact-form-block-wrap{
	margin-bottom: 7.8rem;
}
.Contact-form-block{
	border-bottom: 1px solid var(--graycolor);
	width: 100%;
	padding: 2.5rem 3rem 2.5rem 2.8rem;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.Contact-form-block:first-child{
	border-top: 1px solid var(--graycolor);
}
.Contact-form-block__title{
	width: 18rem;
}
.Contact-form-block__title span{
	width: 100%;
	height: 5rem;
	font-weight: 700;
	line-height: calc(2.4 / 1.4);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.Contact-form-block__body{
	width: calc(100% - 18rem);
	min-height: 5rem;
	display: flex;
    align-items: center;
    justify-content: flex-start;
}

/*----- 必須 */
.Contact-form-block.-req .Contact-form-block__title span::after{
	content: "※";
	color: #c1272d;
}

/*----- テキストフィールド */
.Contact-form__field{
	border: 1px solid var(--graycolor);
	width: 100%;
	height: 5rem;
}
.Contact-form__field input{
	width: 100%;
	height: 100%;
	padding: .5rem 1.8rem;
}

/*----- テキストエリア */
.Contact-form__textarea{
	border: 1px solid var(--graycolor);
	width: 100%;
	height: 28rem;
}
.Contact-form__textarea textarea{
	width: 100%;
	height: 100%;
	padding: 1rem 1.8rem;
}

/*----- セレクト */
.Contact-form__select{
	border: 1px solid var(--graycolor);
	width: 100%;
	height: 5rem;
	position: relative;
	z-index: 5000;
}
.Contact-form__select::after{
	content: "";
	display: block;
	width: 1.4rem;
	height: 1.1rem;
	background-image: url(../images/common/icon_arrow--black.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	right: 1.7rem;
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	z-index: -1;
}
.Contact-form__select select{
	width: 100%;
	height: 100%;
	padding: .5rem 1.8rem;
}

/*----- チェックボックス */
.Contact-form__checkbox input[type="checkbox"]{
	display: none;
}
.Contact-form__checkbox .wpcf7-checkbox{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.Contact-form__checkbox .wpcf7-list-item{
	margin-right: 2.8rem;
	display: block;
}
.Contact-form__checkbox .wpcf7-list-item:not(:last-child){
	margin-bottom: 2.2rem;
}
.Contact-form__checkbox label{
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.Contact-form__checkbox label::before{
	border: 1px solid var(--blackcolor);
	content: "";
	display: block;
	width: 1.2rem;
	height: 1.2rem;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.Contact-form__checkbox label::after{
	content: "";
	display: block;
	width: .8rem;
	height: .6rem;
	border-bottom: 2px solid var(--maincolor);
	border-left: 2px solid var(--maincolor);
	position: absolute;
	left: .2rem;
	top: calc(50% - .4rem);
	transform: rotate(-45deg);
	opacity: 0;
}
.Contact-form__checkbox label:has(input[type="checkbox"]:checked)::after{
	opacity: 1;
}
.Contact-form__checkbox .wpcf7-list-item-label{
	width: 100%;
	padding-left: 2rem;
	line-height: 1;
	display: block;
}

/*----- ボタン */
.Contact-form__button-wrap{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.Contact-form__button{
	width: 32rem;
	height: 8rem;
}
.Contact-form__button + .Contact-form__button{
	margin-left: 3rem;
}
.Contact-form__button a,
.Contact-form__button .a{
	font-size: 1.8rem;
	padding-right: 10rem;
}
.Contact-form__button a::before,
.Contact-form__button a::after,
.Contact-form__button .a::before,
.Contact-form__button .a::after{
	width: 1.8rem;
	height: 1.4rem;
	right: 3.8rem;
}
.Contact-form__button input{
	line-height: 1;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	padding-right: 10rem;
	text-align: center;
	display: block;
}
.Contact-form__button:has(input:disabled) a,
.Contact-form__button:has(input:disabled) .a{
	background: #e1e1e1;
	border-color: #e1e1e1;
	pointer-events: none;
}
/* 戻るボタン */
.Contact-form__button.-back a,
.Contact-form__button.-back .a{
	color: var(--blackcolor);
	border: 1px solid #e1e1e1;
	background: #e1e1e1;
}
.Contact-form__button.-back a::before,
.Contact-form__button.-back .a::before{
	background-image: url(../images/common/icon_arrow--black.svg);
}
.Contact-form__button.-back a::after,
.Contact-form__button.-back .a::after{
	background-image: url(../images/common/icon_arrow--white.svg);
}
.Contact-form__button.-back a:hover,
.Contact-form__button.-back .a:hover{
	background: var(--blackcolor);
	border-color: var(--blackcolor);
	color: #fff;
}

/*----- お問い合わせ内容 */
.Contact-form-block.-type{
	padding-bottom: .3rem;
}
.Contact-form-block.-type .Contact-form__checkbox{
	max-width: 37.5rem;
}

/*----- ご住所 */
.Contact-form-address-block{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.Contact-form-address-block:not(:last-child){
	margin-bottom: 1.8rem;
}
.Contact-form-address-block__title{
	width: 7.5rem;
	line-height: 1;
}
.Contact-form-address-block__inner{
	width: calc(100% - 7.5rem);
	max-width: 45rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.Contact-form-address__hosoku{
	width: 100%;
	font-size: 1.2rem;
	padding-left: 7.5rem;
	margin-top: 1rem;
	line-height: 1;
	display: block;
}
.Contact-form-address__button{
	width: 18rem;
	height: 5rem;
	margin-left: 2.5rem;
}
.Contact-form-address__button .a{
	border: 1px solid var(--graycolor);
	color: var(--blackcolor);
	padding-right: 4rem;
	font-weight: 400;
	background: #fff;
}
.Contact-form-address__button .a::before,
.Contact-form-address__button .a::after{
	width: 1.4rem;
	height: 1.1rem;
	right: 2.2rem;
}
.Contact-form-address__button .a::before{
	background-image: url(../images/common/icon_arrow--black.svg);
}
.Contact-form-address__button .a::after{
	background-image: url(../images/common/icon_arrow--white.svg);
}
.Contact-form-address__button .a:hover{
	background: var(--blackcolor);
	border-color: var(--graycolor);
	color: #fff;
}
.Contact-form-address-block.-zip .Contact-form__field{
	max-width: 18rem;
}
.Contact-form-address-block.-pref .Contact-form__select{
	max-width: 18rem;
}

/*----- 個人情報保護方針 */
.Contact-form-block.-policy .wpcf7-list-item-label{
	display: none;
}
.Contact-form-policy__text a{
	color: #777;
	text-decoration: underline;
}

/*----- リキャプチャ */
.Contact-form-recaptcha{
	margin-bottom: 7.5rem;
	width: 100%;
}

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

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

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

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

	.Contact__title{
		margin-bottom: 11.5rem;
	}
	.Contact__req-text{
		margin-bottom: 3.2rem;
	}
	.Contact-form-block-wrap{
		margin-bottom: 7.8rem;
	}
	.Contact-form-block{
		border-bottom: 2px solid var(--graycolor);
		padding: 4.8rem 0;
		flex-direction: column;
	}
	.Contact-form-block:first-child{
		border-top: 2px solid var(--graycolor);
	}
	.Contact-form-block__title{
		width: 100%;
		margin-bottom: 2.4rem;
	}
	.Contact-form-block__title span{
		height: auto;
		line-height: 1;
	}
	.Contact-form-block.-req .Contact-form-block__title span::after{
		line-height: 1;
	}
	.Contact-form-block__body{
		width: 100%;
	}
	
	/*----- テキストフィールド */
	.Contact-form__field{
		border: 2px solid var(--graycolor);
		height: 10rem;
	}
	.Contact-form__field input{
		padding: .5rem 3.4rem;
	}
	
	/*----- テキストエリア */
	.Contact-form__textarea{
		border: 2px solid var(--graycolor);
		height: 56rem;
	}
	.Contact-form__textarea textarea{
		padding: 1rem 3.4rem;
	}
	
	/*----- セレクト */
	.Contact-form__select{
		border: 2px solid var(--graycolor);
		height: 10rem;
	}
	.Contact-form__select::after{
		width: 2.8rem;
		height: 2.2rem;
		right: 3.2rem;
	}
	.Contact-form__select select{
		padding: .5rem 3.4rem;
	}
	
	/*----- チェックボックス */
	.Contact-form__checkbox .wpcf7-list-item{
		margin-right: 5rem;
		display: block;
	}
	.Contact-form__checkbox .wpcf7-list-item:not(:last-child){
		margin-bottom: 4rem;
	}
	.Contact-form__checkbox label::before{
		border: 1px solid var(--blackcolor);
		width: 2rem;
		height: 2rem;
	}
	.Contact-form__checkbox label::after{
		width: 1.5rem;
		height: 1.2rem;
		border-bottom: 2px solid var(--maincolor);
		border-left: 2px solid var(--maincolor);
		left: .2rem;
		top: calc(50% - .9rem);
	}
	.Contact-form__checkbox .wpcf7-list-item-label{
		padding-left: 3.5rem;
	}
	
	/*----- ボタン */
	.Contact-form__button-wrap{
		flex-direction: column-reverse;
		align-items: center;
	}
	.Contact-form__button{
		width: 56rem;
		height: 14rem;
	}
	.Contact-form__button + .Contact-form__button{
		margin-left: 0;
		margin-bottom: 7.5rem;
	}
	.Contact-form__button a,
	.Contact-form__button .a{
		font-size: 3.2rem;
		padding-right: 20rem;
	}
	.Contact-form__button a::before,
	.Contact-form__button a::after,
	.Contact-form__button .a::before,
	.Contact-form__button .a::after{
		width: 3.6rem;
		height: 2.9rem; 
		right: 5.6rem;
	}
	/* 戻るボタン */
	.Contact-form__button.-back a,
	.Contact-form__button.-back .a{
		border: 2px solid #e1e1e1;
	}
	
	/*----- お問い合わせ内容 */
	.Contact-form-block.-type{
		padding-bottom: 1rem;
	}
	.Contact-form-block.-type .Contact-form-block__title{
		margin-bottom: 4rem;
	}
	.Contact-form-block.-type .Contact-form__checkbox{
		max-width: 100%;
	}
	
	/*----- ご住所 */
	.Contact-form-block.-address{
		padding-bottom: 5.5rem;
	}
	.Contact-form-block.-address .Contact-form-block__title{
		margin-bottom: 3.2rem;
	}
	.Contact-form-address{
		width: 100%;
	}
	.Contact-form-address-block{
		flex-direction: column;
	}
	.Contact-form-address-block:not(:last-child){
		margin-bottom: 4.6rem;
	}
	.Contact-form-address-block__title{
		width: 100%;
		margin-bottom: 2.4rem;
	}
	.Contact-form-address-block__inner{
		width: 100%;
		max-width: 100%;
	}
	.Contact-form-address__hosoku{
		font-size: 2rem;
		padding-left: 0;
		margin-top: 2rem;
	}
	.Contact-form-address__button{
		width: calc(100% - (36rem + 4rem));
		height: 10rem;
		margin-left: 4rem;
	}
	.Contact-form-address__button .a{
		border: 2px solid var(--graycolor);
	}
	.Contact-form-address__button .a::before,
	.Contact-form-address__button .a::after{
		width: 2.8rem;
		height: 2.2rem;
		right: 4rem;
	}
	.Contact-form-address-block.-zip .Contact-form__field{
		max-width: 36rem;
	}
	.Contact-form-address-block.-pref .Contact-form__select{
		max-width: 36rem;
	}

	/*----- リキャプチャ */
	.Contact-form-recaptcha{
		margin-bottom: 7.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

}



/*-------------------------------
	確認画面
-------------------------------*/

.Confirm .Contact-form-block.-type{
	padding-bottom: 2.5rem;
}
.Confirm .Contact-form-block.-req .Contact-form-block__title span::after{
	display: none;
}

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

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

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

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

	.Confirm .Contact__title{
		margin-bottom: 25rem;
	}

	.Confirm .Contact-form-block__title{
		margin-bottom: 4rem;
	}

	/*----- お問い合わせ内容 */
	.Confirm .Contact-form-block.-type{
		padding-bottom: 4.8rem;
	}
	
	/*----- ご住所 */
	.Confirm .Contact-form-block.-address{
		padding-bottom: 4.8rem;
	}
	.Confirm .Contact-form-block.-address .Contact-form-block__title{
		margin-bottom: 5.5rem;
	}

}



/*-------------------------------
	送信完了
-------------------------------*/

.Send__title{
	font-size: 3.4rem;
	margin-bottom: 2.5rem;
}
.Send-message{
	margin-bottom: 14rem;
}
.Send-message__item{
	width: 100%;
	font-size: 1.6rem;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.Send-message__item::before{
	content: "※";
}

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

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

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

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

	.Send__title{
		font-size: 4.8rem;
		margin-bottom: 2rem;
	}
	.Send-message{
		margin-bottom: 13rem;
	}
	.Send-message__item{
		font-size: 2.8rem;
	}

}