@charset "utf-8";
/***
* main 
**************************************/
main {
	position: relative;
}

/***
* main 
**************************************/
.main {
	padding-top: calc(var(--winW) * 40);
	padding-bottom: calc(var(--winW) * 40);
	text-align: center;
	letter-spacing: 0.04em;
}
.main .title {
	font-size: calc(var(--winW) * 24);
	letter-spacing: calc(0em / 100);
	line-height: calc(36 / 24);
	margin-bottom: calc(var(--winW) * 15);
}
.main .section-text {
	font-size: calc(var(--winW) * 12);
	line-height: 1.8;
}
@media screen and (min-width: 769px) {
	.main {
		padding-top: calc(var(--winW) * 50);
		padding-bottom: calc(var(--winW) * 50);
		max-width: calc(var(--winW) * 1370);
		margin: 0 auto;
	}
	.main .title {
		font-size: calc(var(--winW) * 36);
		letter-spacing: calc(0em / 100);
		line-height: calc(72 / 36);
		margin-bottom: calc(var(--winW) * 24);
	}
	.main .section-text {
		font-size: calc(var(--winW) * 24);
	}
}

.car-img {
	width: calc(var(--winW) * 233);
	margin: 0 auto;
	margin-bottom: calc(var(--winW) * 10);
}
h2 {
	font-size: calc(var(--winW) * 22);
	letter-spacing: calc(0em / 100);
	line-height: calc(30 / 22);
	margin-bottom: calc(var(--winW) * 6);
}
h3 {
	font-size: calc(var(--winW) * 16);
	letter-spacing: calc(0em / 100);
	line-height: calc(32 / 16);
	margin-bottom: calc(var(--winW) * 16);
}
.navi_text {
	font-size: calc(var(--winW) * 13);
	letter-spacing: calc(0em / 100);
	line-height: calc(28 / 13);
	margin-bottom: calc(var(--winW) * 36);
}
@media screen and (min-width: 769px) {
	.car-img {
		width: calc(var(--winW) * 600);
		margin-bottom: calc(var(--winW) * 28);
	}
	h2 {
		font-size: calc(var(--winW) * 32);
		letter-spacing: calc(0em / 100);
		line-height: calc(50 / 32);
		margin-bottom: calc(var(--winW) * 10);
	}
	h3 {
		font-size: calc(var(--winW) * 18);
		letter-spacing: calc(0em / 100);
		line-height: calc(36 / 18);
		margin-bottom: calc(var(--winW) * 20);
	}
	.navi_text {
		font-size: calc(var(--winW) * 18);
		letter-spacing: calc(0em / 100);
		line-height: calc(36 / 18);
		margin-bottom: calc(var(--winW) * 40);
	}
}

.back_btn {
	width: fit-content;
	margin:calc(var(--winW) * 28) auto;
}
.back_btn a {
	padding: calc(var(--winW) * 10) calc(var(--winW) * 60) calc(var(--winW) * 10) calc(var(--winW) * 70);
	font-size: calc(var(--winW) * 16);
	position: relative;
	display: flex;
	align-items: center;
	background-color: #eee;
	line-height: 1.5;
	color: #666;
	justify-content: center;
	text-align:left;
}
.back_btn a:hover {
	color:#c30002;
}
.back_btn a::after {
	font-size: calc(var(--winW) * 8);
	left: calc(var(--winW) * 15);
	font-family: icon-Nissan-Global;
	font-style: normal;
	font-weight: 400;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	content: "";
	color: #c3002f;
	top: 50%;
	position: absolute;
	font-variant: normal;
	overflow: hidden;
	transform: translateY(-50%) rotate(180deg);
	transition: left 0.4s ease;
}
.back_btn a:hover::after {
  left: calc(var(--winW) * 13); 
}
@media screen and (min-width: 769px) {
	.back_btn {
		margin:calc(var(--winW) * 40) auto;
	}
	.back_btn a {
		padding: calc(var(--winW) * 12) calc(var(--winW) * 40) calc(var(--winW) * 12) calc(var(--winW) * 70);
		font-size: calc(var(--winW) * 18);
	}
	.back_btn a::after {
		font-size: calc(var(--winW) * 14);
		left: calc(var(--winW) * 20);
	}
}

.next_btn {
	width: calc(var(--winW) * 342);
	margin: calc(var(--winW) * 20) auto calc(var(--winW) * 10) auto;
}
.next_btn a {
	padding: calc(var(--winW) * 15) calc(var(--winW) * 40) calc(var(--winW) * 15) calc(var(--winW) * 32);
	font-size: calc(var(--winW) * 16);
	position: relative;
	display: flex;
	align-items: center;
	background-color: #c3002f;
	line-height: 1.5;
	color: #fff;
	justify-content: flex-start;
	text-align:left;
}
.next_btn a:hover {
	background-color: #920023;
}
.next_btn a:after {
	font-size: calc(var(--winW) * 12);
	right: calc(var(--winW) * 25);
	font-family: icon-Nissan-Global;
	font-style: normal;
	font-weight: 400;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	content: "";
	color: #fff;
	top: 50%;
	position: absolute;
	font-variant: normal;
	overflow: hidden;
	transform: translateY(-50%);
	transition: transform 0.3s ease-out;
}
.next_btn a:hover:after {
  transform: translateY(-50%) translateX(calc(var(--winW) * 5));
  transition: transform 0.3s ease;
}




.annotation {
	font-size: calc(var(--winW) * 14);
	line-height: 1.5;
}
.btn_pc_none > .annotation {
	margin-bottom: calc(var(--winW) * 64);
}
@media screen and (min-width: 769px) {
	.next_btn {
		margin: calc(var(--winW) * 40) auto calc(var(--winW) * 20) auto;
		width: calc(var(--winW) * 487);
	}
	.next_btn a {
		padding: calc(var(--winW) * 20) calc(var(--winW) * 70) calc(var(--winW) * 20) calc(var(--winW) * 40);
		font-size: calc(var(--winW) * 18);
		white-space: nowrap;
	}
	.next_btn a::after {
		font-size: calc(var(--winW) * 14);
		right: calc(var(--winW) * 20);
	}
	.annotation {
		font-size: calc(var(--winW) * 18);
		line-height: 1.5;
	}
}

/*sec_flow*/

.flow {
	width: 100%;
	background-color: #EEEEEE;
	padding: calc(var(--winW) * 58) calc(var(--winW) * 40) calc(var(--winW) * 0);
}
.flow_title {
	font-size: calc(var(--winW) * 24);
	letter-spacing: calc(10em / 100);
	line-height: calc(36 /24);
	margin-bottom: calc(var(--winW) * 24);
}
.flow_sec {
	display: flex;
	flex-direction: column;
	row-gap: calc(var(--winW) * 43);
}
.sec_step {
	background-color: #fff;
	width: auto;
	border-radius: calc(var(--winW) * 20);
	padding: calc(var(--winW) * 56) calc(var(--winW) * 20);
	position: relative;
	text-align: left;
}
.step_number {
	color: #C3002F;
	font-size: calc(var(--winW) * 16);
	letter-spacing: calc(0em / 100);
	line-height: calc(32 / 16);
}
.step_title {
	font-size: calc(var(--winW) * 20);
	letter-spacing: calc(-3em / 100);
	line-height: calc(30 / 20);
}
.explanation {
	font-size: calc(var(--winW) * 16);
	letter-spacing: calc(0em / 100);
	line-height: calc(27 / 16);
}
.explanation a {
	color: #000000;
	text-decoration: underline;
	text-underline-offset: calc(var(--winW) * 3);
}
.step_2 ul {
	font-size: calc(var(--winW) * 16);
	letter-spacing: calc(0em / 100);
	line-height: calc(27 / 16);
	text-indent: -1em;
	padding-left: 1em;
	margin-top: calc(var(--winW) * 10);
}
.flow_annotation {
	font-size: calc(var(--winW) * 12);
	letter-spacing: calc(0em / 100);
	line-height: calc(20 / 12);
	margin: calc(var(--winW) * 10) calc(var(--winW) * 0);
}
.step_2::before {
	background-image: url(../IMAGES/note.svg);
	content: '';
	top: calc(var(--winW) * 32);
	width: calc(var(--winW) * 36);
	height: calc(var(--winW) * 40);
	position: absolute;
	right: calc(var(--winW) * 20);
	background-repeat: no-repeat;
	background-size: calc(var(--winW) * 36);
}
.step_3::before {
	background-image: url(../IMAGES/mail.svg);
	content: '';
	top: calc(var(--winW) * 32);
	width: calc(var(--winW) * 36);
	height: calc(var(--winW) * 40);
	position: absolute;
	right: calc(var(--winW) * 20);
	background-repeat: no-repeat;
	background-size: calc(var(--winW) * 36);
}
.step_4::before {
	background-image: url(../IMAGES/smartphone.svg);
	content: '';
	top: calc(var(--winW) * 32);
	width: calc(var(--winW) * 36);
	height: calc(var(--winW) * 40);
	position: absolute;
	right: calc(var(--winW) * 20);
	background-repeat: no-repeat;
	background-size: calc(var(--winW) * 36);
}
.sec_step::after {
	background-image: url(../IMAGES/triangle_sp.svg);
	content: '';
	bottom: calc(var(--winW) * -35);
	width: calc(var(--winW) * 22.52);
	height: calc(var(--winW) * 20.25);
	position: absolute;
	background-size: calc(var(--winW) * 22.52);
	right: calc(var(--winW) * 144);
	background-repeat: no-repeat;
}
.sec_step:last-child::after {
	content: unset;
}
.flow_btn {
	background-color: #EEEEEE;
	padding-top: calc(var(--winW) * 28);
	padding-bottom: calc(var(--winW) * 64);
}
.attention {
	padding: calc(var(--winW) * 24) calc(var(--winW) * 24) calc(var(--winW) * 48);
}
.attention p {
	font-size: calc(var(--winW) * 13);
	letter-spacing: calc(0em / 100);
	line-height: calc(20 / 13);
	text-indent: -1em;
	padding-left: 1em;
	text-align: left;
}
.attention p a {
	color: #000000;
	text-decoration: underline;
	text-underline-offset: calc(var(--winW) * 3);
}
@media screen and (min-width: 769px) {
	.btn_pc_none > .annotation {
		margin-bottom: calc(var(--winW) * 70);
	}
	.flow {
		width: 100%;
		padding: calc(var(--winW) * 80) calc(var(--winW) * 40) calc(var(--winW) * 0);
	}
	.flow_title {
		font-size: calc(var(--winW) * 32);
		line-height: calc(64 / 32);
		margin-bottom: calc(var(--winW) * 40);
	}
	.flow_sec {
		flex-direction: row;
		gap: calc(var(--winW) * 30);
	}
	.sec_step {
		background-color: #fff;
		width: calc(var(--winW) * 410);
		padding: calc(var(--winW) * 56) calc(var(--winW) * 32);
	}
	.step_number {
		line-height: calc(24 / 16);
		margin-bottom: calc(var(--winW) * 5);
	}
	.step_title {
		margin-bottom: calc(var(--winW) * 16);
	}
	.explanation {
		font-size: calc(var(--winW) * 18);
		letter-spacing: calc(0em / 100);
		line-height: calc(32 / 18);
	}
	.step_2 ul {
		font-size: calc(var(--winW) * 18);
		letter-spacing: calc(0em / 100);
		line-height: calc(32 / 18);
	}
	.flow_annotation {
		font-size: calc(var(--winW) * 14);
		line-height: calc(26 / 14);
	}
	.step_2::before {
		width: calc(var(--winW) * 43);
		height: calc(var(--winW) * 48);
		right: calc(var(--winW) * 32);
		background-size: calc(var(--winW) * 43);
	}
	.step_3::before {
		width: calc(var(--winW) * 43);
		height: calc(var(--winW) * 48);
		right: calc(var(--winW) * 32);
		background-size: calc(var(--winW) * 43);
	}
	.step_4::before {
		width: calc(var(--winW) * 43);
		height: calc(var(--winW) * 48);
		right: calc(var(--winW) * 32);
		background-size: calc(var(--winW) * 43);
	}
	.sec_step::after {
		background-image: url(../IMAGES/triangle_pc.svg);
		content: '';
		bottom: calc(var(--winW) * 210);
		width: calc(var(--winW) * 26);
		height: calc(var(--winW) * 27);
		position: absolute;
		right: calc(var(--winW) * -30);
		top: calc(var(--winW) * 230);
		background-size: calc(var(--winW) * 26);
	}
	.flow_btn {
		padding-top: calc(var(--winW) * 1);
		padding-bottom: calc(var(--winW) * 80);
	}
	.attention {
		padding: calc(var(--winW) * 24) calc(var(--winW) * 24) calc(var(--winW) * 80);
	}
	.attention p {
		font-size: calc(var(--winW) * 18);
		line-height: calc(36 / 18);
		padding-left: 0;
	}
}

/*more_link*/
.more_link {
	padding: calc(var(--winW) * 64) calc(var(--winW) * 24) calc(var(--winW) * 80);
	text-align: left;
}
.movie_link {
	margin-bottom: calc(var(--winW) * 24);
}
.movie_link p {
	font-size: calc(var(--winW) * 16);
	letter-spacing: calc(0em / 100);
	line-height: calc(27 / 16);
	margin-bottom: calc(var(--winW) * 12);
}
.movie_link p > a {
	color: #000000;
	text-decoration: underline;
	text-underline-offset: calc(var(--winW) * 3);
}
.movie_link picture {
	position: relative;
}
.movie_link picture::after {
	width: calc(var(--winW) * 78);
	height: calc(var(--winW) * 78);
	cursor: pointer;
	content: '';
	display: block;
	background-image: url(../IMAGES/play.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: 0.5s;
}
.movie_link picture:hover:after {
	opacity: 70%;
}
.app_link {
	display: flex;
	flex-direction: column;
	gap: calc(var(--winW) * 16);
	padding-top: calc(var(--winW) * 54);
	margin-top: calc(var(--winW) * -54);
}
.app_link > p {
	font-size: calc(var(--winW) * 16);
	letter-spacing: calc(0em / 100);
	line-height: calc(27 / 16);
}
.app_list {
	display: flex;
	flex-direction: column;
	gap: calc(var(--winW) * 16);
}
.sp_none {
	display: none;
}
@media screen and (min-width: 769px) {
	.more_link {
		padding: calc(var(--winW) * 96) calc(var(--winW) * 0) calc(var(--winW) * 110);
		display: flex;
		justify-content: flex-start;
		gap: calc(var(--winW) * 78);
	}
	.more_link.one_column {
		display: flex;
		justify-content: center;
		gap: unset;
	}
	.movie_link p {
		font-size: calc(var(--winW) * 18);
		line-height: calc(36 / 18);
		margin-bottom: calc(var(--winW) * 15);
	}
	.movie_link picture {
		width: calc(var(--winW) * 625);
	}
	.app_link {
		gap: calc(var(--winW) * 27);
	}
	.more_link.one_column .app_link {
		flex-direction: row;
		align-items: center;
	}
	.app_link > p {
		font-size: calc(var(--winW) * 18);
		line-height: calc(27 / 18);
	}
	.app_logo {
		width: calc(var(--winW) * 204.02);
	}
	.app_list {
		flex-direction: row;
		gap: calc(var(--winW) * 70);
	}
	.app_store {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: calc(var(--winW) * 11);
		gap: calc(var(--winW) * 28.5);
	}
	.pc_none {
		display: none;
	}
	.sp_none {
		display: flex;
		width: calc(var(--winW) * 159);
	}
	.nc_logo {
		width: calc(var(--winW) * 117);
	}
}

/*cc2*/
.ccs2_common .next_btn {
	margin-bottom: calc(var(--winW) * 80);
}
.ccs2_common .flow_btn .next_btn {
	margin-bottom: 0;
}
.ccs2_common .sec_step {
	width: calc(var(--winW) * 310);
	padding: calc(var(--winW) * 56) calc(var(--winW) * 20);
}
.ccs2_common .sec_step .step_title {
	font-size: calc(var(--winW) * 18);
	line-height: calc(27 / 18);
	margin-bottom: calc(var(--winW) * 20);
}
.ccs2_common .sec_step .explanation {
	font-size: calc(var(--winW) * 16);
	line-height: calc(27 / 16);
}
.ccs2_common .step_1 p:nth-child(3) {
	margin-bottom: calc(var(--winW) * 30);
}
.ccs2_common .step_2 ul {
	font-size: calc(var(--winW) * 16);
	line-height: calc(27 / 16);
	text-indent: 0em;
	padding-left: 0;
	margin-top: 0;
}
.ccs2_common .step_2 ul .flow_annotation {
	font-size: calc(var(--winW) * 12);
	line-height: calc(20 / 12);
	padding-left: calc(var(--winW) * 22);
	margin: calc(var(--winW) * 0) calc(var(--winW) * 0) calc(var(--winW) * 10);
}
.ccs2_common .step_2 ul .flow_annotation > a {
	color: #000000;
	text-decoration: underline;
	text-underline-offset: calc(var(--winW) * 3);
}
.ccs2_common .step_4 ul {
	font-size: calc(var(--winW) * 16);
	line-height: calc(27 / 16);
}
.ccs2_common .step_4 ul li {
	text-indent: -1.4em;
	padding-left: 1.4em;
}
.ccs2_common .step_4 ul .flow_annotation {
	font-size: calc(var(--winW) * 12);
	line-height: calc(20 / 12);
	margin: calc(var(--winW) * 0) calc(var(--winW) * 0) calc(var(--winW) * 10);
	text-indent: 0;
}
.flow_annotation_indent {
	font-size: calc(var(--winW) * 12);
	line-height: calc(20 / 12);
	text-indent: -1em;
	padding-left: 1em;
}
.step_1::before {
	background-image: url(../IMAGES/card.svg);
	content: '';
	top: calc(var(--winW) * 32);
	width: calc(var(--winW) * 36);
	height: calc(var(--winW) * 40);
	position: absolute;
	right: calc(var(--winW) * 20);
	background-repeat: no-repeat;
	background-size: calc(var(--winW) * 36);
}
.ccs2_common .step_2::before {
	width: calc(var(--winW) * 36);
	height: calc(var(--winW) * 40);
	right: calc(var(--winW) * 20);
	background-size: calc(var(--winW) * 36);
}
.ccs2_common .step_3::before {
	width: calc(var(--winW) * 36);
	height: calc(var(--winW) * 40);
	right: calc(var(--winW) * 20);
	background-size: calc(var(--winW) * 36);
}
.ccs2_common .step_4::before {
	width: calc(var(--winW) * 36);
	height: calc(var(--winW) * 40);
	right: calc(var(--winW) * 20);
	background-size: calc(var(--winW) * 36);
}
@media screen and (min-width: 769px) {
	.ccs2_common .next_btn {
		width: calc(var(--winW) * 387);
		margin-bottom: calc(var(--winW) * 70);
	}
	.ccs2_common .flow_btn .next_btn {
		margin: calc(var(--winW) * 56) auto calc(var(--winW) * 20) auto;
		margin-bottom: 0;
	}
	.ccs2_common .flow_sec {
		gap: calc(var(--winW) * 17);
	}
	.ccs2_common .sec_step::after {
		background-image: url(../IMAGES/triangle_pc.svg);
		content: '';
		top: calc(var(--winW) * 277);
		width: calc(var(--winW) * 15);
		height: calc(var(--winW) * 16);
		position: absolute;
		background-size: calc(var(--winW) * 15);
		right: calc(var(--winW) * -17);
		background-repeat: no-repeat;
	}
	.ccs2_common .sec_step:last-child::after {
		content: unset;
	}
}
.option > h2 {
	font-size: calc(var(--winW) * 18);
}
.option .next_btn a {
	font-size: calc(var(--winW) * 15);
}
@media screen and (min-width: 769px) {
	.option > h2 {
		font-size: calc(var(--winW) * 32);
	}
	.option .next_btn a {
		font-size: calc(var(--winW) * 18);
	}
}