.flex-box {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;

	.col-2 {
		width: calc(50% - 20px);
	}
}

.pageContents {
	background: url(/assets/img/top/heroimage03.jpg) no-repeat 100% 75% !important;
	background-size: 150% auto !important;
	padding-top: 120px;
}

.productIntro {
	padding: 0px 0 50px;
	.title {
		text-align: center;
		font-size: 34px;
		font-weight: bold;
		line-height: 1.2;
		color: #fff;
		white-space: nowrap;

		span {
			display: block;
			margin: 30px 0;

			span {
				margin: 0 !important;
			}
		}
	}
}

.lead {
	color: #fff !important;
	text-align: center !important;
}

.questionBox {
	padding: 100px 0 150px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	@media screen and (max-width: 768px) {
		padding: 100px 3% 150px;
	}

	.history-box {
		width: 30%;

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

		strong {
			text-align: left;
			border-bottom: 1px solid #dadada;
			display: block;
			padding: 10px 0;
			background: #ccc;
			color: #000;
		}

		.history {
			margin: 5px auto;

			li {
				padding: 10px;
				border-bottom: 1px solid #dadada;

				&:last-child {
					border-bottom: none;
				}

				span {
					display: block;
					font-family: "Zen Kaku Gothic New";
					font-size: 14px;

					&:first-child {
						font-weight: bold;
					}
				}
			}
		}
	}

	.select-box {
		width: calc(70% - 50px);

		@media screen and (max-width: 768px) {
			width: calc(75% - 20px);
		}

		.options {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 20px;

			.option-wrap {
				flex: 1 1 calc(50% - 10px);
				max-width: 300px;
				text-align: center;

				.finder-select {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-start;
					width: 100%;
					height: 100%;
					padding: 16px;
					border: 1px solid #000;
					cursor: pointer;
					background: #fff;
					transition: background 0.3s, color 0.3s;

					&:hover {
						background: #efefef;
						color: #fff;
					}

					.option-image {
						height: 160px;
						width: auto;
						max-width: 100%;
						object-fit: contain;
						margin-bottom: 10px;
					}

					span {
						font-size: 16px;
						font-weight: bold;
						color: #000;
					}
				}

				@media screen and (max-width: 768px) {
					flex: 1 1 100%;
					max-width: 100%;
				}
			}

			&.cols-2 .option-wrap {
				flex: 1 1 calc(50% - 10px);
				max-width: 320px;
			}

			&.cols-3 .option-wrap {
				flex: 1 1 calc(33.333% - 14px);
				max-width: 190px;
			}

			.question-note {
				font-size: 14px;
				margin: 10px auto;
				color: #333;
			}
		}

		.suggestion-text {
			width: 100%;
			margin: 20px 0;
			font-size: 14px;
			text-align: center;
			font-weight: bold;
		}

		.product-icons {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			align-items: center;
			margin: 20px 0;
			position: relative;

			&::before {
				content: "+";
				position: absolute;
				top: 45%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 60px;
				color: #000;
				font-weight: bold;
			}

			&.product-one::before {
				display: none;
			}

			a {
				display: block;
				width: 180px;
				text-align: center;
				position: relative;
				z-index: 10;

				&:hover {
					opacity: 0.8;
				}

				img {
					width: 100%;
					height: auto;
					display: block;
					margin: 0 auto;
				}

				.product-name {
					display: block;
					margin-top: 5px;
					font-size: 14px;
				}
			}
		}

		.cv {
			width: 100%;

			a {
				margin-bottom: 0;

				&:hover {
					opacity: 0.8;
				}
			}
		}
	}

	button {
		padding: 30px 10px;
		cursor: pointer;
		font-size: 20px;
		font-family: "Zen Kaku Gothic New";
		font-weight: 700;
		border: 1px solid #000;

		&:hover {
			background: #efefef;
			color: #fff;
		}

		&.back {
			width: 100%;
			font-size: 16px;
			padding: 12px 10px;
			margin-top: 15px;
		}
	}
}

.question-title {
	letter-spacing: 0.06rem !important;
	color: #000 !important;
	font-family: "Zen Kaku Gothic New";
	font-size: 30px;
	line-height: 1.4;
	font-weight: 900;

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