@charset "utf-8";
@import url("root.css");


/*------------------------------------------------------------*/
/* よくある質問
/*------------------------------------------------------------*/
.faq_page {
	margin-bottom: 16rem;

	.faq {
		.sub_title {
			background: url(../img/common/faq.png) no-repeat;
			background-position: right center;
			background-size: contain;

			@media screen and (max-width:1200px) {
				background: none;
			}
		}

		h2 {
			span {

				/* padding: 3.5rem 0 0 !important; */
				&::before {
					content: "faq" !important;
				}
			}
		}

		.faq_menu {
			display: flex;
			justify-content: center;
			margin: 10rem 0 8rem;

			@media screen and (max-width: 480px) {
				margin: 0;
				margin-bottom: 4rem;
			}

			ul {
				gap: 1.6rem;

				@media screen and (max-width: 480px) {
					gap: 1.5rem 0rem;
					justify-content: space-between;
				}

				li {

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

						width: 100%;
						margin: 0 3px;
					}

					a {
						color: #000;
						background: #FFF7F2;
						padding: 1.2rem 2rem;
						display: inline-block;
						border-radius: 10rem;
						font-size: 1.7rem;
						border: 1px solid #FFE6D6;
						box-shadow: 0 0.5rem 0 #FFE6D6;
						font-weight: 500;
						display: flex;
						align-items: center;
						justify-content: center;

						span {
							flex-grow: 1;
						}

						i {
							margin-right: 0;
							padding-left: 12px;
							margin-left: auto;
							color: var(--red-orange);
						}

						@media screen and (max-width: 480px) {
							width: 100%;
							text-align: center;
							font-size: 1.3rem;
							font-weight: bold;

							i {
								margin-right: 0;
								margin-left: 6px;
							}

						}

						&:hover,
						&:active,
						&:focus {
							color: #fff;
							background: var(--red-orange);
							border: 1px solid var(--red-orange);
							text-decoration: none;
							font-weight: 700;
							box-shadow: 0 0.5rem 0 #DD2A0A;

							i {
								color: white;
							}

						}

						@media screen and (max-width: 480px) {
							font-size: 1.2rem;
							padding: 1.1rem 1.3rem;
							letter-spacing: -0.02rem;
						}
					}
				}

			}
		}
	}
.keyword_searchs {
	max-width: 600px;
	margin:-2em auto 2em;

	.word {
		color: white;
	}

	.keyword_searchs_box {
		display: flex;
		position: relative;
		border-radius: 2px;

		input {
			border: none;
			border-radius: 2px;
			overflow: hidden;
			flex: 1;
			padding: 15px;
			/* outline: none; */
			/* border: none; */
			box-shadow: none;
			outline-offset: 0;
		border: 1px solid #b5b5b5;

			&:focus-visible {
				/* outline: none; */
				/* border: none; */
				box-shadow: none;
				/* outline: var(--red-orange) auto 1px; */
				outline: none;
				outline-offset: 0;
				background: #eef5ff;
			}
		}

		.buttons {
			margin-top: 0;
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			height: calc(100%);
			display: flex;

			button {
				height: 100%;
				cursor: pointer;
				border: none;
				outline: none;
				background: var(--red-orange);
				color: white;
				font-size: 1.6rem;
				font-weight: 500;

				@media screen and (max-width:480px) {
					font-style: 1.2rem;
				}

				padding: 0 20px;

				&:hover {
					opacity: .6;
					transition: all .1s;

				}

			}
		}

		#faqClear {
			width: 50px;
			padding: 0;
			font-size: 2rem;
			background: none;
			color: var(--red-orange);

		}

	}
}

#faqNoMatch {
	padding: 1em 0 2em;
	width: 100%;
	text-align: center;

	p {
		font-size: 1.6rem;
		font-weight: 500;
		text-align: center;

		span {
			font-size: 110%;
			color: var(--red-orange);
		}
	}
}

	.faq_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		max-width: 1200px;
		margin: 0 auto;
		padding-bottom: 160px;

		@media screen and (max-width: 820px) {
			padding-top: 50px;
			padding-bottom: 50px;
		}

		@media screen and (max-width: 480px) {
			padding-top: 0;
			padding-bottom: 100px;
		}

		.faq_toggle {
			background: white;
			width: 100%;
			margin-bottom: 10px;
			border-radius: 6px;
			overflow: hidden;

			h3 {
				font-size: 2rem;
				line-height: 3.8rem;
				color: white;
				/* background: var(--red-orange); */
				background: linear-gradient(135deg, #F5AA02 0%, #F5AA02 #FF3100);
				background: -webkit-linear-gradient(135deg, #F5AA02 0%, #FF3100);
				text-align: center;
				padding: 20px 40px 20px 50px;
				width: 100%;
				cursor: pointer;
				text-align: left;
				position: relative;
				transition: all 0.1s;

				@media screen and (max-width: 820px) {
					margin-bottom: 0;
					padding: 15px 57px 15px 15px;
					font-size: 1.8rem;
					line-height: 3rem;
				}

				&:hover,
				&.on {
					opacity: 0.8;
				}

				&::after {
					font-family: FontAwesome;
					content: "\f067";
					font-weight: 200;
					color: white;
					position: absolute;
					height: 20px;
					font-size: 2rem;
					right: 25px;
					top: 0;
					bottom: 0;
					margin: auto;
					transition: all 0.5s;
					display: grid;
					place-content: center;
				}

				&.on::after {
					content: "\f068";
				}
			}

			.faq_content {
				display: none;

				&.open {
					display: block;
				}

				dl {
					dt {
						padding: 35px 40px 30px 110px;
						font-weight: 700;
						font-size: 1.8rem;
						position: relative;

						@media screen and (max-width: 820px) {
							padding: 30px 20px 10px 65px;
							font-size: 1.6rem;
						}

						&::before {
							position: absolute;
							content: "Q";
							font-size: 2rem;
							width: 40px;
							height: 40px;
							display: grid;
							place-content: center;
							background: var(--red-orange);
							font-family: var(--montserrat);
							color: white;
							font-weight: 700;
							left: 50px;
							top: 5px;
							bottom: 0;
							margin: auto;
							border-radius: 100px;
						}

						@media screen and (max-width: 820px) {
							&::before {
								font-size: 1.8rem;
								width: 35px;
								height: 35px;
								left: 15px;
								top: 20px;
							}
						}
					}

					dd {
						padding: 0 50px 35px 110px;
						border-bottom: 1px solid var(--light-gray);

						@media screen and (max-width: 820px) {
							padding: 0 25px 35px 65px;
						}

						&:last-child {
							border: none;
						}

						p {
							font-size: 1.4rem;
							line-height: 2.5rem;
							font-weight: 500;

							&:not(:last-child) {
								margin-bottom: 2rem;
							}

							@media screen and (max-width: 820px) {
								font-size: 1.2rem;
								word-wrap: break-word;
							}
						}
					}
				}
			}
		}

		.button_area {
			text-align: center;
			width: 100%;
			margin-top: 100px;

			@media screen and (max-width: 820px) {
				margin-top: 50px;
			}

			>p {
				text-align: center;
				font-size: 2.2rem;
				line-height: 3.7rem;
				font-weight: 900;
				letter-spacing: 0.012em;
				margin-bottom: 62px;

				@media screen and (max-width: 820px) {
					font-size: 1.8rem;
					line-height: 3.1rem;
					margin-bottom: 40px;
				}
			}

			>div a {
				margin: 0 8px;
				padding: 20px 0;
				width: 31%;
				max-width: 420px;
				font-size: 2rem;

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

			.tel {
				margin-top: 58px;

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

				p {
					font-weight: bold;
					font-size: 3.2rem;
					margin-bottom: 0;

					@media screen and (max-width: 820px) {
						font-size: 2.5rem;
					}

					small {
						font-size: 2.2rem;

						@media screen and (max-width: 820px) {
							font-size: 1.6rem;
						}

						span {
							font-size: 2.4rem;
							color: var(--black);

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

				>a {
					color: #F09843;
					font-size: 5.4rem;
					font-weight: bold;
					letter-spacing: 0.01em;
					line-height: 12.5rem;
					position: relative;
					padding-left: 60px;

					@media screen and (max-width: 820px) {
						font-size: 3.5rem;
						padding-left: 35px;
						line-height: 6rem;
						width: 100%;
					}

					&:hover {
						text-decoration: none;

						@media screen and (max-width: 820px) {
							text-decoration: none;
						}
					}

					&::before {
						position: absolute;
						left: 0;
						top: 10px;
						bottom: 0;
						margin: auto;
						content: '';
						background: url(../img/price/tel.png) no-repeat;
						width: 46px;
						height: 46px;
						background-size: contain;
						background-position: left center;

						@media screen and (max-width: 820px) {
							width: 25px;
							height: 25px;
						}
					}
				}
			}

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

				.button_new,
				.button_new_2 {
					font-size: 1.6rem;
					padding: 15px 0;
					width: 100%;
					margin: 0 auto;
				}
			}
		}
	}
}