@charset "utf-8";

/*----------------------------------------------------
 header
----------------------------------------------------*/
.inquiry-header {
	padding: var(--10px) var(--12px);
	border-bottom: 1px solid var(--color-black);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
	.inquiry-header .logo img {
		width: auto;
		height: var(--50px);
	}
	.inquiry-header .rightBox {
		display: flex;
		align-items: center;
	}
		.inquiry-header .rightBox .telBox {
			display: flex;
			align-items: center;
			margin-right: var(--08px);
		}
			.inquiry-header .rightBox .telBox .icon {
				width: var(--32px);
				height: var(--32px);
				background-color: var(--color-orange);
				border-radius: var(--06px);
				padding: var(--04px);
				margin-right: var(--08px);
			}
			.inquiry-header .rightBox .telBox .telNum {
				font-family: "Oswald", serif;
				font-size: var(--32px);
				font-weight: 600;
				line-height: 1;
			}
				.inquiry-header .rightBox .telBox .telNum a {
					color: var(--text-color);
				}
	.inquiry-header .rightBox .box {
		display: flex;
		align-items: center;
		margin-right: var(--03px);
	}
		.inquiry-header .rightBox .box li {
			border-radius: var(--06px);
			border: 1px solid var(--color-black);
			background-color: var(--color-white);
			font-size: var(--12px);
			line-height: 1;
			padding: 4px;
			margin-right: var(--05px);
		}

/* 768px以下 */
@media screen and (max-width:768px) {
	.inquiry-header .logo img {
		width: auto;
		height: var(--40px);
	}
	.inquiryTelBtn a {
		display: block;
		border-radius: var(--30px);
		background-color: var(--color-orange);
		box-shadow: 0px 3px 0px 0px #a42607;
		font-weight: 600;
		padding: var(--04px) var(--10px) var(--03px) 42px;
		position: relative;
	}
		.inquiryTelBtn a::before {
			content: '';
			width: 28px;
			height: 28px;
			background-color: #f8ff39;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 8px;
			margin-top: -14px;
		}
		.inquiryTelBtn a::after {
			content: '';
			width: 20px;
			height: 20px;
			background-image: url("/wp-content/themes/chanto/img/common/icon_tel_red.svg");
			position: absolute;
			top: 50%;
			left: 12px;
			margin-top: -10px;
		}
		.inquiryTelBtn a:hover {
			box-shadow: 0px 1px 0px 0px #851B00;
			transform: translate(0, 2px);
		}
			.inquiryTelBtn a .main {
				font-size: 4vw;
				color: var(--color-white);
				line-height: 1.4;
			}
			.inquiryTelBtn a .sub {
				border-radius: var(--06px);
				background-color: var(--color-white);
				font-size: 2vw;
				color: var(--color-black);
				text-align: center;
				line-height: 1;
				padding: 2px 4px;
				margin-right: var(--05px);
			}
}

/*----------------------------------------------------
 資料請求・お問い合わせ
----------------------------------------------------*/
main {
	padding-top: 0;
	min-height: calc(100vh - 70px - 102px);
}

.inquiryPage {
	padding-top: var(--40px);
  padding-bottom: var(--80px);
}
	.inquiryPage .inquiryTitle {
		font-size: var(--40px);
		text-align: center;
		margin-bottom: var(--30px);
	}

.inquiryPage .hurryTel {
	border: 1px solid var(--color-glay);
	border-radius: 10px;
	background-color: #FFF;
	text-align: center;
	overflow: hidden;
	max-width: 680px;
	width: 100%;
	margin: 0 auto var(--30px);
}
	.inquiryPage .hurryTel h4 {
		padding: var(--10px) 0;
		background-color: var(--color-green);
		color: var(--color-white);
			font-size: var(--24px);
		border-bottom: 1px solid var(--color-glay);
		margin-bottom: var(--20px);
	}
	.inquiryPage .hurryTel .telBox {
		margin: 0 auto var(--10px);
		width: 360px;
		display: flex;
		align-items: center;
	}
	.inquiryPage .hurryTel .telBox .icon {
			width: 46px;
			height: 46px;
			background-color: var(--color-orange);
			border-radius: var(--10px);
			padding: var(--06px);
			margin-right: var(--12px);
		}
		.inquiryPage .hurryTel .telBox .telNum {
			font-family: "Oswald", serif;
			font-size: var(--50px);
			font-weight: 600;
			line-height: 1;
		}
		.inquiryPage .hurryTel .telBox .telNum a {
				color: var(--text-color);
			}
	.inquiryPage .hurryTel .text {
		padding-bottom: var(--20px);
	}

.inquiryPage table {
	width: 100%;
	border-top: 1px solid var(--color-black);
	border-collapse: collapse;
}
	.inquiryPage td,.inquiryPage th {
		border-collapse: collapse;
		border-bottom: 1px solid var(--color-black);
		padding: var(--24px);
		text-align: left;
		font-size: var(--20px);
	}
	.inquiryPage th {
		width: 280px;
	}

.inquiryPage .required {
	color: var(--color-white);
	background-color: var(--color-red);
	padding: 5px 10px;
	border-radius: 7px;
	margin-right: var(--10px);
	font-weight: 300;
	font-size: var(--12px);
	vertical-align: 3px;
}

.inquiryPage .error {
	color: var(--color-red);
	font-size: var(--16px);
	font-weight: 600;
	margin-bottom: var(--05px);
}

.inquiryPage .letter {
	margin-top: var(--05px);
}
	.inquiryPage .letter input[type="checkbox"] {
		width: 20px;
		height: 20px;
		border: 1px solid #000;
		vertical-align: -3px;
	}

.inquiryPage input,
.inquiryPage textarea {
	border-radius: var(--08px);
	border: solid 1px var(--color-glay);
	width: 100%;
	padding: var(--08px) var(--10px);
}

.inquiryPage .privacy {
  margin: var(--30px) var(--10px);
}
  .inquiryPage .privacy h4 {
    font-weight: 600;
    margin-bottom: var(--10px);
  }
  .inquiryPage .privacy .text {
    border: solid 1px var(--color-glay);
    border-radius: var(--10px);
    height: 200px;
    padding: var(--20px);
    overflow: auto;
    font-size: var(--14px);
    background-color: var(--color-white);
  }
    .inquiryPage .privacy .text h5 {
      font-weight: 600;
      font-size: var(--16px);
      margin-bottom: var(--10px);
      margin-top: var(--20px);
    }
      .inquiryPage .privacy .text h5:first-child {
        margin-top: 0;
      }
    .inquiryPage .privacy .text ol {
      margin-bottom: var(--20px);
    }
      .inquiryPage .privacy .text ol li {
        margin: 0 0 5px 20px;
        list-style: decimal;
      }
    .inquiryPage .privacy .text ul {
      margin-bottom: var(--20px);
    }
      .inquiryPage .privacy .text ul li {
        margin: 0 0 5px 20px;
        list-style: disc;
      }
    .inquiryPage .privacy .text .mb10 {
      margin-bottom: var(--10px);
    }
    .inquiryPage .privacy .text .mb20 {
      margin-bottom: var(--20px);
    }

.inquiryPage .agree {
	font-weight: 600;
	text-align: center;
  font-size: var(--20px);
	margin-bottom: var(--40px);
}
	.inquiryPage .agree input[type="checkbox"] {
		width: 20px;
		height: 20px;
		border: 1px solid #000;
		vertical-align: -3px;
	}

.inquiryPage .confirm {
	max-width: 600px;
	width: 90%;
	margin: 0 auto;
	display: block;
	border-radius: 10px;
	border: none;
	background-color: var(--color-orange);
	box-shadow: 0px 4px 0px 0px #a42607;
	font-weight: 600;
	font-size: var(--22px);
	letter-spacing: 1px;
	color: var(--color-white);
	padding: var(--15px);
	transition: 0.3s;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	position: relative;
}
	.inquiryPage .confirm::before {
		content: '';
		width: 10px;
		height: 10px;
		border: 0;
		border-top: solid 3px var(--color-white);
		border-right: solid 3px var(--color-white);
		transform: rotate(45deg);
		position: absolute;
		top: calc(50% - 5px);
		right: var(--20px);
	}
	.inquiryPage .confirm:hover {
		box-shadow: 0px 2px 0px 0px #851B00;
		transform: translate(0, 2px);
	}

/* 768px以下 */
@media screen and (max-width:768px) {
	.inquiryPage .inquiryTitle {
		font-size: 7.5vw;
	}

	.inquiryPage .hurryTel h4 {
		font-size: 5vw;
	}
	.inquiryPage .telBtn {
		margin: 0 5% var(--20px);
	}
		.inquiryPage .telBtn a {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 3% 4%;
			border-radius: 15px;
			background-color: var(--color-orange);
			box-shadow: 0px 4px 0px 0px #851B00;
		}
			.inquiryPage .telBtn .operator {
				width: 24%;
			}
				.inquiryPage .telBtn .operator img {
					border-radius: 50%;
				}
			.inquiryPage .telBtn .rightBox {
				width: 74%;
			}
				.inquiryPage .telBtn .rightBox .icon {
					display: inline-block;
					padding-left: 10.5vw;
					color: var(--color-white);
					font-size: 7vw;
					font-weight: 600;
					background-position: left center;
					background-repeat: no-repeat;
					background-size: 9.5vw auto;
					background-image: url("/wp-content/themes/chanto/img/common/icon_tel.svg");
					margin-bottom: var(--03px);
				}
				.inquiryPage .telBtn .rightBox .item {
					display: flex;
					justify-content: space-between;
					padding-left: var(--05px);
				}
					.inquiryPage .telBtn .rightBox .item li {
						border: 1px solid var(--color-black);
						background-color: var(--color-white);
						padding: var(--05px) var(--08px);
						font-size: 2.5vw;
						line-height: 1;
						border-radius: 5px;
						color: var(--text-color);
					}

		.inquiryPage th,
		.inquiryPage td {
			display: block;
			padding: var(--20px) var(--10px);
		}
		.inquiryPage th {
			width: 100%;
			border-bottom: none;
			padding-bottom: 0;
		}
		.inquiryPage td {
			padding-top: var(--05px);
		}

	.inquiryPage .agree {
		font-size: 4vw;
	}
}

/*----------------------------------------------------
 確認画面
----------------------------------------------------*/
.inquiryPage .attention {
	border: 1px solid var(--color-glay);
	border-radius: 10px;
	background-color: #FFF;
	overflow: hidden;
	margin-bottom: var(--50px);
}
	.inquiryPage .attention h2 {
		padding: var(--10px) 0;
		background-color: var(--color-red);
		color: var(--color-white);
		font-size: var(--20px);
		text-align: center;
		border-bottom: 1px solid var(--color-glay);
	}
	.inquiryPage .attention .inner {
		padding: var(--20px) var(--30px);
	}

.inquiryPage .execute {
	display: flex;
	gap: 30px;
	width: 80%;
	margin: var(--30px) auto 0;
}
	.inquiryPage .execute p {
		width: calc((100% - 30px) / 2);
	}
	.inquiryPage .execute button {
		width: 100%;
		display: block;
		border-radius: 10px;
		border: none;
		font-weight: 600;
		font-size: var(--22px);
		letter-spacing: 1px;
		color: var(--color-white);
		padding: var(--15px);
		transition: 0.3s;
		cursor: pointer;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		position: relative;
	}
		.inquiryPage .execute button::before {
			content: '';
			width: 10px;
			height: 10px;
			border: 0;
			border-top: solid 3px var(--color-white);
			border-right: solid 3px var(--color-white);
			transform: rotate(45deg);
			position: absolute;
			top: calc(50% - 5px);
			right: var(--20px);
		}
	.inquiryPage .execute .backBtn {
		background-color: var(--color-green);
		box-shadow: 0px 4px 0px 0px #116033;
	}
		.inquiryPage .execute .backBtn:hover {
			box-shadow: 0px 2px 0px 0px #116033;
			transform: translate(0, 2px);
		}
	.inquiryPage .execute .sendBtn {
		background-color: var(--color-orange);
		box-shadow: 0px 4px 0px 0px #a42607;
	}
		.inquiryPage .execute .sendBtn:hover {
			box-shadow: 0px 2px 0px 0px #a42607;
			transform: translate(0, 2px);
		}

/* 768px以下 */
@media screen and (max-width:768px) {
	.inquiryPage .attention h2 {
		font-size: 4.5vw;
	}
	.inquiryPage .execute {
		gap: 20px;
		width: 100%;
	}
		.inquiryPage .execute p {
			width: calc((100% - 20px) / 2);
		}
		.inquiryPage .execute button {
			padding-right: var(--30px);
		}
}

/*----------------------------------------------------
 完了
----------------------------------------------------*/
.inquiryPage .finishBox {
	margin: 0 auto;
	max-width: 700px;
	width: 94%;
	background-color: var(--color-white);
	border: 2px solid var(--color-black);
	border-radius: 20px;
	padding: var(--50px);
}
	.inquiryPage .finishBox .pageBack a {
		max-width: 300px;
		width: 100%;
		margin: 0 auto;
		display: block;
		border-radius: 10px;
		border: none;
		background-color: var(--color-orange);
		box-shadow: 0px 4px 0px 0px #a42607;
		font-weight: 600;
		font-size: var(--22px);
		text-align: center;
		letter-spacing: 1px;
		color: var(--color-white);
		padding: var(--15px);
		padding-right: var(--30px);
		transition: 0.3s;
		cursor: pointer;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		position: relative;
	}
		.inquiryPage .finishBox .pageBack a::before {
			content: '';
			width: 10px;
			height: 10px;
			border: 0;
			border-top: solid 3px var(--color-white);
			border-right: solid 3px var(--color-white);
			transform: rotate(45deg);
			position: absolute;
			top: calc(50% - 5px);
			right: var(--20px);
		}
		.inquiryPage .finishBox .pageBack a:hover {
			box-shadow: 0px 2px 0px 0px #851B00;
			transform: translate(0, 2px);
		}

/* 768px以下 */
@media screen and (max-width:768px) {
	.inquiryPage .finishBox {
		padding: var(--30px);
	}
}

/*----------------------------------------------------
 footer
----------------------------------------------------*/
/* 768px以下 */
@media screen and (max-width:768px) {
	#foot .copyBox {
      padding: var(--20px) 0;
    }
}
