/* 共通 */
.c-review-home {
	--font-bold: "HondaGlobalFontJP-Bold", sans-serif;
	--font-normal: "HondaGlobalFontJP-Regular", sans-serif;
	--font-light: "HondaGlobalFontJP-Light", sans-serif;
	font-family: var(--font-normal);
	font-weight: normal;
}

.c-review-home figure {
	margin: 0;
}

/* hero */
.c-review-hero {
	width: 100%;
	position:relative;
	margin: 0 auto;
}

.c-review-hero .c-review-hero-video {
	/* aspect-ratio: 1920 / 752; */
	aspect-ratio: 16 / 9;
	background-color: #E2E6E5;
}

/* モーダル */
.c-review-modal {
	text-decoration: none;
}

.c-review-modal + .c-review-modal {
	margin-top: 70px;
}

.c-review-modal a {
	color: #444;
	text-decoration: none;
	border-radius: 6px;
	transition: opacity 400ms ease;
	display: block;
	position: relative;
	background: #000;
	overflow: hidden;
}

.c-review-home__bg[data-bg="lightblue"] .c-review-modal a {
	background-color: #fff;
}

.c-review-modal a::before {
	content: '';
	background: url("../img/icon-play.svg") no-repeat 0 0 / 100% auto;
	display: block;
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%);
	margin-top: -100px;
	transition: opacity 400ms ease;
	z-index: 1;
}

.c-review-modal iframe {
	width: 100%;
	height: 551px;
	display: block;
	border: none;
	border-radius: 6px;
	pointer-events: none;
}

.c-review-modal__text {
	align-items: center;
	display: flex;
	gap: 30px;
	margin-top: 9px;
}

.c-review-modal__text p {
	font-size: 20px;
}

.c-review-modal__text span {
	background: #000;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.05em;
	padding: 2px 8px;
}

/* ボタン */
.c-review-home__btn {
	margin-top: 35px;
}

.c-review-home__btn a {
	border-radius: 30px;
	display: block;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.2em;
	max-width: 720px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	padding: 18px 46px;
	position: relative;
	transition: opacity 400ms ease;
}

.c-review-home__btn a::after {
	content: '';
	display: block;
	width: 7px;
	height: 11px;
	mask-size: 100% auto;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-image: url("../img/icon-arrow.svg");
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
}

.c-review-home__btn a:first-child {
	margin-top: 0;
}

.c-review-home__btn a[target="_blank"] {
	background: #000 !important;
	color: #fff !important;
}

.c-review-home__btn a[target="_blank"]::after {
	background: #fff !important;
	mask-image: url("/Nbox/common/images/icon/icon_blank_w.svg");
	width: 10px;
	height: 10px;
	right: 30px;
}

/* 背景 */
.c-review-home__bg .c-review-home__bg-inner {
	max-width: 1020px;
	padding: 117px 20px 120px;
	margin: 0 auto;
}

.c-review-home__bg h2 {
	font-size: 40px;
	font-weight: normal;
	margin-top: 95px;
	margin-bottom: 24px;
	padding-top: 58px;
	line-height: 1.25;
	position: relative;
}

.c-review-home__bg h2:first-child {
	margin-top: 0;
}

.c-review-home__bg h2 picture {
	position: absolute;
	left: -110px;
	top: 0;
}

.c-review-home__bg h2 picture img {
	max-width: 100%;
	height: auto;
}

.c-review-home__bg h2 span {
	position: relative;
}

.c-review-home__bg[data-bg="dark-blue"] {
	background: #39404A;
	color: #fff;
}

.c-review-home__bg[data-bg="dark-blue"] .c-review-modal a {
	color: #fff;
}

.c-review-home__bg[data-bg="dark-blue"] .c-review-modal__text span,
.c-review-home__bg[data-bg="dark"] .c-review-modal__text span {
	color: #000;
	background: #fff;
	/* padding-left: 3px; */
}

.c-review-home__bg[data-bg="dark-blue"] .c-review-home__btn a {
	background: rgba(153, 153, 153, 0.89);
	color: #fff;
}

.c-review-home__bg[data-bg="dark-blue"] .c-review-home__btn a::after {
	background: #fff;
}

.c-review-home__bg[data-bg="lightblue"] {
	background: #EAEFF2;
	color: #444;
}

.c-review-home__bg[data-bg="lightblue"] .c-review-home__btn a {
	background: #AAD2E4;
	color: #444;
}

.c-review-home__bg[data-bg="lightblue"] .c-review-home__btn a::after {
	background: #444;
}

.c-review-home__bg[data-bg="dark"] {
	background: #222;
	color: #fff;
}

.c-review-home__bg[data-bg="dark"] .c-review-home__btn a {
	background: #9C917C;
	color: #fff;
}

.c-review-home__bg[data-bg="dark"] .c-review-home__btn a::after {
	background: #fff;
}

.c-review-home__btn a[data-color="white"] {
	color: #000 !important;
	background: #fff !important;
	border: 1px solid #000;
}

.c-review-home__btn a[data-color="white"]::after {
	background: #000 !important;
	mask-image: url("/Nbox/common/images/icon/icon_blank.svg");
}

.c-review-home__btn a[data-color="transparent"] {
	color: #000 !important;
	background: transparent !important;
	border: 1px solid #000;
}

.c-review-home__btn a[data-color="transparent"]::after {
	background: #000 !important;
	mask-image: url("/Nbox/common/images/icon/icon_blank.svg");
}

.c-review-home__cm {
	background: #EAEFF2;
}

.c-review-home__cm .c-review-home__cm-inner {
	max-width: 1020px;
	padding: 112px 20px 120px;
	margin: 0 auto;
}

.c-review-home__cm .c-review-home__cm-inner h2 {
	text-align: center;
	color: #444;
	font-size: 40px;
	font-weight: normal;
}

.c-review-home__cm .c-review-home__cm-list {
	display: flex;
	gap: 20px;
	margin-top: 24px;
}

.c-review-home__cm .c-review-home__cm-list-item {
	flex: 1;
}

.c-review-home__cm .c-review-home__cm-list-item .c-review-modal a::before {
	width: 100px;
	height: 100px;
	margin-top: -50px;
}

.c-review-home__cm .c-review-modal__text {
	align-items: flex-start;
	justify-content: space-between;
	margin-top: 15px;
}

.c-review-home__cm .c-review-modal__text p {
	line-height: 1.25;
	color: #444;
	font-size: 16px;
	font-weight: normal;
}

.c-review-home__cm .c-review-home__cm-column {
	display: flex;
	gap: 43px;
	margin-top: 100px;
}

.c-review-home__cm .c-review-home__cm-column-btn {
	width: 100%;
}

.c-review-home__cm .c-review-home__cm-column .c-review-home__btn {
	margin-top: 0;
}

.c-review-home__cm .c-review-home__cm-column .c-review-home__btn a {
	border: 1px solid #000;
	letter-spacing: 0;
	font-size: 20px;
	max-width: 315px;
	padding: 9px 62px;
	transition: background-color 400ms ease, color 400ms ease;
}

.c-review-home__cm .c-review-home__cm-column .c-review-home__btn a:not(:first-child) {
	margin-top: 13px;
}

.c-review-home__cm .c-review-home__cm-column .c-review-home__btn a::after {
	right: 47px;
	transition: background-color 400ms ease;
}

.survey_wrap .l-container__inner {
	padding-top: 60px;
}

/* youtubeロゴが押せるように */
.YTPOverlay {
	pointer-events: none;
}

@media screen and (min-width: 767px) {
	[data-display="pc"] {
		display: block !important;
	}

	[data-display="sp"] {
		display: none !important;
	}

	.movie-pc-wrapper {
		aspect-ratio: 16 / 9;
	}

	.c-review-modal a:hover {
		opacity: 0.7;
	}

	.c-review-home__btn a:hover {
		opacity: 0.7;
	}

	.c-review-home__cm .c-review-home__cm-column .c-review-home__btn a:not([data-color="transparent"]):hover {
		background-color: #fff !important;
		color: #000 !important;;
	}

	.c-review-home__cm .c-review-home__cm-column .c-review-home__btn a:not([data-color="transparent"]):hover::after {
		background: #000 !important;
	}

	.c-review-home__cm .c-review-home__cm-column .c-review-home__btn a[data-color="transparent"]:hover {
		background-color: #000 !important;
		color: #fff !important;
		opacity: 1;
	}

	.c-review-home__cm .c-review-home__cm-column .c-review-home__btn a[data-color="transparent"]:hover::after {
		background: #fff !important;
	}
}

@media screen and (max-width: 1240px) {
 .c-review-home__bg h2 picture {
	left: -20px;
 }
}

@media screen and (max-width: 960px) {
	.c-review-home__cm-column {
		flex-direction: column;
		align-items: center;
	}
}

@media screen and (max-width: 768px) {
	.c-review-hero {
		width: 100%;
		position:relative;
		/* margin-bottom: 30px; */
	}
	.c-review-hero .c-review-hero-video {
		position: relative;
		/* aspect-ratio: 375 / 469; */
		aspect-ratio: 3 / 4;
		background-color: #E2E6E5;
		height: calc(693 / 390 * 100vw);
		width: 100%;
	}

	.movie-sp-wrapper {
		aspect-ratio: 3 / 4;
	}

	.c-review-home__bg .movie-sp-wrapper {
		height: calc(622 / 390 * 100vw);
		width: 100%;
	}

	.c-review-home__cm .movie-sp-wrapper {
		height: calc(197 / 390 * 100vw);
		width: 100%;
	}

	.c-review-home__bg .movie-sp-wrapper > div,
	.c-review-home__cm .movie-sp-wrapper > div {
		border-radius: calc(6 / 390 * 100vw);
	}

	.c-review-home__bg .c-review-home__bg-inner {
		padding: calc(80 / 390 * 100vw) calc(20 / 390 * 100vw) calc(96 / 390 * 100vw);
	}

	.c-review-home__bg h2 {
		font-size: calc(28 / 390 * 100vw);
		margin-top: calc(74 / 390 * 100vw);
		margin-bottom: calc(16 / 390 * 100vw);
		padding: 0;
		line-height: 1;
	}

	.c-review-home__bg h2 picture {
		position: relative;
		display: block;
		margin-left: calc(-20 / 390 * 100vw);
		top: auto;
		left: auto;
	}

	.c-review-home__bg h2 picture img {
		height: auto;
	}

	.c-review-home__bg h2 picture[data-img="driving"] img {
		width: calc(313 / 390 * 100vw);
	}

	.c-review-home__bg h2 picture[data-img="interior"] img {
		width: calc(353 / 390 * 100vw);
	}

	.c-review-home__bg h2 picture[data-img="clear-view"] img {
		width: calc(269 / 390 * 100vw);
	}

	.c-review-home__bg h2 picture[data-img="utility"] img {
		width: calc(282 / 390 * 100vw);
	}

	.c-review-home__bg h2 picture[data-img="safety"] img {
		width: calc(288 / 390 * 100vw);
	}

	.c-review-home__bg h2 picture[data-img="blackstyle"] img {
		width: calc(249 / 390 * 100vw);
	}

	.c-review-home__bg h2 span {
		display: block;
		line-height: 1.2;
		font-size: calc(28 / 390 * 100vw);
		margin-top: calc(-20 / 390 * 100vw);
	}

	.c-review-modal a::before {
		width: calc(100 / 390 * 100vw);
		height: calc(100 / 390 * 100vw);
		margin-top: calc(-50 / 390 * 100vw);
	}

	.c-review-modal a figure img {
		width: 100%;
		height: auto;
	}

	.c-review-modal__text {
		justify-content: space-between;
		gap: calc(20 / 390 * 100vw);
		margin-top: calc(10 / 390 * 100vw);
	}

	.c-review-modal__text p {
		font-size: calc(14 / 390 * 100vw);
		line-height: 1.42;
	}

	.c-review-modal__text span {
		font-size: calc(14 / 390 * 100vw);
		padding: calc(3 / 390 * 100vw) calc(10 / 390 * 100vw);
		margin-top: calc(6 / 390 * 100vw);
	}

	.c-review-home__btn {
		margin-top: calc(24 / 390 * 100vw);
		padding: calc(3 / 390 * 100vw) 0;
	}

	.c-review-home__btn a {
		display: flex;
		align-items: center;
		line-height: 1.5;
		text-align: left;
		letter-spacing: 0.1em;
		border-radius: calc(10 / 390 * 100vw);
		font-size: calc(16 / 390 * 100vw);
		max-width: 100%;
		min-height: calc(96 / 390 * 100vw);
		padding: calc(20 / 390 * 100vw) calc(50 / 390 * 100vw) calc(20 / 390 * 100vw) calc(30 / 390 * 100vw);
		margin-top: calc(12 / 390 * 100vw);
	}

	.c-review-home__btn a::after {
		width: calc(7 / 390 * 100vw);
		height: calc(12 / 390 * 100vw);
		right: calc(30 / 390 * 100vw);
	}

	.c-review-home__btn a[target="_blank"]::after {
		width: calc(10 / 390 * 100vw);
		height: calc(10 / 390 * 100vw);
		right: calc(30 / 390 * 100vw);
	}

	.c-review-home__cm .c-review-home__cm-inner {
		padding: calc(80 / 390 * 100vw) calc(20 / 390 * 100vw) calc(96 / 390 * 100vw);
	}

	.c-review-home__cm .c-review-home__cm-inner h2 {
		line-height: 1;
		font-size: calc(40 / 390 * 100vw);
	}

	.c-review-home__cm .c-review-home__cm-list {
		flex-direction: column;
		gap: calc(30 / 390 * 100vw);
		margin-top: calc(40 / 390 * 100vw);
	}

	.c-review-home__cm .c-review-home__cm-list-item .c-review-modal a::before {
		width: calc(100 / 390 * 100vw);
		height: calc(100 / 390 * 100vw);
		margin-top: calc(-50 / 390 * 100vw);
	}

	.c-review-home__cm .c-review-modal__text {
		align-items: center;
		gap: calc(5 / 390 * 100vw);
		margin-top: calc(10 / 390 * 100vw);
	}

	.c-review-home__cm .c-review-modal__text p {
		line-height: 1.43;
		font-size: calc(14 / 390 * 100vw);
	}

	.c-review-home__cm .c-review-home__cm-column {
		flex-direction: column;
		gap: calc(38 / 390 * 100vw);
		margin-top: calc(80 / 390 * 100vw);
	}

	.c-review-home__cm .c-review-home__cm-column-img img {
		width: 100%;
		height: auto;
	}

	.c-review-home__cm .c-review-home__cm-column .c-review-home__btn a {
		text-align: center;
		justify-content: center;
		border-radius: calc(50 / 390 * 100vw);
		font-size: calc(20 / 390 * 100vw);
		width: calc(315 / 390 * 100vw);
		max-width: none;
		min-height: auto;
		padding: calc(9 / 390 * 100vw) calc(66 / 390 * 100vw);
	}

	.c-review-home__cm .c-review-home__cm-column .c-review-home__btn a:not(:first-child) {
		margin-top: calc(13 / 390 * 100vw);
	}

	.c-review-home__cm .c-review-home__cm-column .c-review-home__btn a::after {
		width: calc(12 / 390 * 100vw);
		height: calc(12 / 390 * 100vw);
		right: calc(47 / 390 * 100vw);
	}

	.survey_wrap .l-container__inner {
		padding-top: 40px;
	}

	.modal-video__data .video-js {
		height: calc(550 / 390 * 100vw) !important;
	}

	[data-display="pc"] {
		display: none !important;
	}

	[data-display="sp"] {
		display: block !important;
	}
}