.whichOne {
	background: #fff;
	box-sizing: border-box;
	margin-top: 72px;
}

.whichOne .container {
	margin: 0 auto;
	max-width: 1080px;
	padding: 80px 0;
}

.whichOne .innerContainer {
	position: relative;
	z-index: 1;
}

.whichOneDisplay {
	overflow: hidden;
	position: relative;
	transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	z-index: 1;
}

.whichOneDisplay.hidden {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.greyBg {
	position: relative;
	z-index: -1;
}

.salmonBg {
	height: 100%;
	object-fit: cover;
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
	z-index: 1;
}

.whichOneTextArea {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.whichOneTitle h1 {
	color: #373737;
	font-size: clamp(27px, 2.5vw, 36px);
	letter-spacing: 0.13em;
	line-height: 1.3;
	margin-top: 0.55vw;
	text-align: center;
}

.whichOneTitle p {
	color: #373737;
	font-size: clamp(18px, 1.66vw, 24px);
	letter-spacing: 0.07em;
	line-height: 1.4;
	text-align: center;
}

.whichOneButton {
	align-items: center;
	background: transparent;
	border: 1px solid #424242;
	border-radius: 100px;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	height: 50px;
	justify-content: center;
	line-height: 1.4;
	margin: 0 auto;
	margin-top: clamp(20px, 2.08vw, 30px);
	max-width: 469px;
	position: relative;
	transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	width: 32.5vw;
}

.whichOneButton:hover {
	background: #ececec;
}

.whichOneButton::after {
	border-bottom: 1px solid #424242;
	border-right: 1px solid #424242;
	content: "";
	height: 6px;
	position: absolute;
	right: 26px;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
	width: 6px;
}

.whichOne__smhProduct {
	left: 2.96%;
	max-width: 220px;
	position: absolute;
	top: 28.28%;
	transform: rotate(-5deg);
	width: 20.3%;
	z-index: 2;
}

.whichOne__smhLogo {
	left: 10.6%;
	position: absolute;
	top: 14.2%;
	width: fit-content;
}

.whichOne__smhLogo img {
	width: 100%;
	max-width: 170px;
}

.whichOne__smhLogo .whichOne__text {
	margin-top: 0;
}

.whichOne__foundationLogo .whichOne__text {
	margin-top: 4px;
}

.whichOne__text {
	font-size: 14px;
}

.whichOne__banner {
	display: flex;
	gap: 30px;
	margin-top: 60px;
	padding-inline: 20px;
}

.whichOne__banner a {
	position: relative;
	
}

.whichOne__banner hgroup {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 4%;

}

.whichOne__bannerTitle {
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.25em;
	font-family: var(--fontInter);
	color: #ffffff;
}

.whichOne__bannerText {
	font-size: 14px;
	letter-spacing: 0.05em;
	font-family: var(--fontNotoSansJP);
	color: #ffffff;
	position: relative;
}

.whichOne__bannerText::after {
	display: inline-block;
	vertical-align: middle;
	color: #ffffff;
	line-height: 1;
	width: 0.5em;
	height: 0.5em;
	border: 0.1em solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateX(-25%) rotate(45deg);
	content: "";
	margin-left: .5em;
}

.whichOne__bannerTitle.text-black ,
.whichOne__bannerText.text-black {
	color: var(--colorGray900);
}

.whichOne__bannerText.text-black::after {
	color: var(--colorGray900);
}

.whichOne__foundationProduct {
	left: 74.6%;
	position: absolute;
	top: 14.02%;
	width: 23.14%;
	z-index: 2;
}

.whichOne__foundationLogo {
	left: 72.78%;
	position: absolute;
	text-align: center;
	top: 71.26%;
	width: fit-content;
	z-index: 2;
}

.whichOne__foundationLogo img {
	max-width: 92px;
}

.questionBox {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	left: 50%;
	opacity: 0;
	padding: 80px 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	visibility: hidden;
	width: 100%;
}

.questionBox.active {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}

.questionBox__border {
	border: 1px solid #ababab;
	height: 50px;
	left: 0;
	position: absolute;
	width: 100%;
}

.borderTop {
	border-bottom: none;
	top: 0;
}

.borderBottom {
	border-top: none;
	bottom: 0;
}

.questionBox__q,
.questionBox__number {
	font-weight: 300;
	letter-spacing: 0.05em;
	line-height: 1;
	text-align: center;
}

.questionBox__number {
	font-size: clamp(18px, 3.2vw, 40px);
	margin-top: 8px;
}

.questionBox__text {
	font-size: var(--fontMax24Min18);
	margin-top: 40px;
	text-align: center;
}

.questionBox__answerGroup {
	display: grid;
	gap: 24px;
	justify-items: center;
	margin: 0 auto;
	margin-top: clamp(24px, 4.44vw, 64px);
}

.questionBox__answerGroup.triple {
	grid-template-columns: 1fr 1fr 1fr;
}

.questionBox__answerGroup.double {
	grid-template-columns: 1fr 1fr;
	max-width: 640px;
}

.questionBox__button {
	align-items: center;
	background: #ececec;
	border: 1px solid #c9c9c9;
	border-radius: 100px;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	height: 50px;
	justify-content: center;
	line-height: 1.4;
	margin: 0 auto;
	max-width: 348px;
	position: relative;
	transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	width: 100%;
}

.questionBox__button:hover {
	background: #424242;
	color: #fff;
}

.questionBox__button::after {
	border-bottom: 1px solid #424242;
	border-right: 1px solid #424242;
	content: "";
	height: 7px;
	position: absolute;
	right: 28px;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
	transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	width: 7px;
}

.questionBox__button:hover::after {
	border-color: #fff;
}

.answerSelect {
	width: 100%;
}

.answerSelect img {
	max-height: 70px;
	margin-bottom: 16px;
}

.questionBox__body {
	width: calc(100% - 72px);
}

.returnButton {
	background: transparent;
	border: 1px solid #424242;
	border-radius: 100px;
	cursor: pointer;
	display: block;
	height: 0;
	margin: 0 auto;
	max-width: 340px;
	opacity: 0;
	padding: 8px 0;
	pointer-events: none;
	transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	visibility: hidden;
	width: 100%;
}

.returnButton.active {
	height: 100%;
	margin-top: 36px;
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}

@media screen and (max-width: 767px) {
	.salmonBg {
		display: none;
	}
	.whichOne .container {
		padding: 20px 0;
	}
	.whichOneDisplay {
		margin: 0 auto;
		max-height: 760px;
		max-width: 500px;
	}
	.whichOneTextArea {
		max-width: calc(100% - 40px);
		width: 100%;
	}
	.whichOneButton {
		max-width: 335px;
		width: 100%;
	}
	.whichOne__smhLogo {
		left: 12.5%;
		text-align: center;
		top: 7.18%;
		width: 41.8%;
	}
	.whichOne__smhProduct {
		top: 16.2%;
		width: 30.6%;
	}
	.whichOne__foundationProduct {
		left: 59.7%;
		top: 65%;
		width: 33.6%;
	}
	.whichOne__foundationLogo {
		left: 32.26%;
		top: 84%;
		width: 44%;
	}
	.questionBox {
		max-width: calc(100% - 36px);
		padding: 50px 0 70px;
		top: 20px;
	}
	.questionBox__body {
		width: calc(100% - 32px);
	}
	.questionBox__answerGroup.triple,
	.questionBox__answerGroup.double {
		grid-template-columns: 1fr;
	}
	.answerSelect img {
		max-height: 70px;
	}
	.returnButton.active {
		margin-top: 46px;
		max-width: 270px;
	}
	.questionBox__button {
		margin-top: 8px;
		max-width: 320px;
	}
	.whichOne__banner {
		flex-direction: column;
		margin: 30px auto 0;
		max-width: 500px;
	}
}

@media screen and (max-width: 500px) {
	.whichOne .container {
		padding: 0;
	}
	.whichOne__text {
		font-size: 12px;
	}

	.whichOne__bannerTitle {
		font-size: 15px;
	}

	.whichOne__bannerText {
		font-size: 10px;
	}
}

@media screen and (max-width: 375px) {
	.whichOne__foundationLogo {
		left: 25.86%;
		width: 52.1%;
	}
	.whichOne__smhLogo {
		left: 9.5%;
		top: 5.18%;
		width: 50.8%;
	}
}