@charset "utf-8";

:root {
	--font-normal: 'HondaGlobalFontJP-Regular', sans-serif;
	--font-light: 'HondaGlobalFontJP-Light', sans-serif;
	--font-bold: 'HondaGlobalFontJP-Bold', sans-serif;
}

.hm-jp-font-regular,
body {
	font-family: var(--font-normal);
	font-weight: normal;
}

.hm-jp-font-light {
	font-family: var(--font-light);
	font-weight: normal;
}

.hm-jp-font-bold,
strong,
em,
.bold {
	font-family: var(--font-bold);
	font-weight: normal;
}

body.modal_open,
body.benefit_detail_open {
	overflow: hidden;
}

.nav_open {
	overflow: hidden;
}

.l-footer {
	z-index: 1;
}

#contents_area {
	--c-red: #e60000;
	--c-gray: #494949;
	--c-bg-terms: #d9d9d9;
}


/* ----------------------------------------
	Animation
---------------------------------------- */

.anim_clip {
--clip-end: 100%;

	clip-path: polygon(0% 0%, var(--clip-end) 0%, var(--clip-end) 100%, 0% 100%);
}

.anim_ready .anim_clip {
	--clip-end: 0%;
}

.anim_ready .anim_clip.anim_end,
.anim_ready .anim_clip.anim_end>span {
	transition: .5s clip-path ease-in-out;
}
.anim_ready .anim_clip.anim_end {
	--clip-end: 100%;
}

.anim_clip>span {
	display: inline-block;
	clip-path: polygon(0% 0%, var(--clip-end) 0%, var(--clip-end) 100%, 0% 100%);
}
.anim_ready .anim_clip.anim_end>span {
	transition-delay: .3s;
}

@media print, screen and (min-width : 768px){
	#contents_area {
		overflow: hidden;
		min-width: 1024px;
		background: #000;
		color: #fff;
		font-size: 24px;
		line-height: 1.5;
	}

	#contents_area .sp {
		display: none !important;
	}

	.section {
		position: relative;
		z-index: 1;
		margin-top: 210px;
	}
	.section img {
		display: block;
		width: 100%;
	}
	.section video {
		display: block;
		width: 100%;
	}

	.section .anc {
		visibility: hidden;
		opacity: 0;
		position: absolute;
	}

	.section h2 {
		border: solid var(--c-red);
		border-width: 5px 0;
		text-align: center;
		letter-spacing: .05em;
		font-size: 50px;
		line-height: 80px;
	}

	.title_en,
	.title_en>span {
		clip-path: polygon(0% 0%, 100% 0%, 100% var(--clip-end), 0% var(--clip-end));
	}
	.title_en {
		display: flex;
		justify-content: center;
		position: absolute;
		left: calc(50% + 564px);
		width: 40px;
		margin-top: -30px;
		padding: 30px 0 60px;
		background: var(--c-red);
	}
	.title_en img {
		width: 25.5px;
	}

	.section_inner {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		max-width: 1024px;
		margin: auto;
	}

	#contents_area .btn {
		display: block;
		overflow: hidden;
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		border: 4px solid var(--c-red);
		border-radius: 45px;
		background: var(--c-gray);
		text-align: center;
		color: #fff;
		font-family: var(--font-bold);
		line-height: 82px;
	}
	#contents_area .btn::before {
		content: '';
		opacity: .6;
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border-radius: 45px;
		background: #000;
		transform: scaleX(0);
		transform-origin: 0 0;
		transition: .2s transform;
	}
	#contents_area .btn>span {
		position: relative;
		z-index: 1;
	}

	#contents_area .btn:hover::before {
		transform: scaleX(1);
	}

	#contents_area .btn[target='_blank']>span::after {
		content: '';
		display: inline-block;
		width: 22px;
		height: 80px;
		margin-left: 10px;
		background: url(../img/icon_outerlink.svg) 50% 50% / contain no-repeat;
		vertical-align: top;
	}


/* ----------------------------------------
	section_title
---------------------------------------- */

	#section_title {
		margin-top: 0;
		padding-top: 45px;
	}
	#section_title h1 {
		position: relative;
		z-index: 2;
		font-family: var(--font-bold);
	}
	#section_title h1>img {
		width: min(1002px, 1002 / 1440 * 100%);
		margin: auto;
	}

	#section_title .cp,
	#section_title .period {
		display: flex;
		align-items: center;
		position: absolute;
		left: calc(50% + 210px);
		right: 0;
		top: 121px;
		z-index: 1;
		padding: 0 18px;
	}
	#section_title .cp {
		background: var(--c-red);
		height: 59px;
	}
	#section_title .cp img {
		width: 280px;
	}

	#section_title .period {
		margin-top: 59px;
		background: #000;
		height: 40px;
	}
	#section_title .period img {
		width: 299px;
	}

	#section_title .cp.anim_end,
	#section_title .period.anim_end {
		transition-delay: .5s;
	}
	#section_title .cp.anim_end>span,
	#section_title .period.anim_end>span {
		transition-delay: .8s;
	}

	#section_title .kv {
		position: relative;
		left: 50%;
		z-index: 1;
		width: min(1168px, 1168 / 1440 * 100%);
		margin-top: 42px;
		transform: translateX(-50%);
	}

	#section_title .btn_to_campaign {
		display: flex;
		justify-content: center;
		position: absolute;
		z-index: 1;
		left: 50%;
		box-sizing: border-box;
		width: 544px;
		border: 2px solid;
		background: #000;
		transform: translate(-50%,-50%);
		color: var(--c-red);
		font-family: var(--font-bold);
		font-size: 28px;
		line-height: 60px;
	}
	
	#section_title .btn_to_campaign::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
		background: #fff;
		transform: scaleX(0);
		transform-origin: 0 0;
		transition: .2s transform;
	}
	#section_title .btn_to_campaign:hover::before {
		transform: scaleX(1);
	}

	#section_title .btn_to_campaign .text {
		display: inline-block;
		position: relative;
		z-index: 1;
		padding: 0 60px 0 21px;
	}
	#section_title .btn_to_campaign .text::after {
		content: '';
		position: absolute;
		right: 21px;
		top: 0;
		bottom: 0;
		z-index: 1;
		width: 23px;
		background: url(../img/arrow_down.svg) 100% 50% / contain no-repeat;
	}


/* ----------------------------------------
	rs_nav
---------------------------------------- */

	#rs_nav_btn {
		display: flex;
		align-items: center;
		position: fixed;
		left: 100%;
		top: 50%;
		z-index: 2;
		margin-left: max(-90px, -90 / 1440 * 100%);
		transform: rotateZ(90deg) translateY(-50%);
		transform-origin: 0% 50%;
		mix-blend-mode: difference;
		color: var(--c-red);
		font-size: 15px;
		line-height: 1;
		cursor: pointer;
	}
	#rs_nav_btn::before {
		content: '';
		opacity: .46;
		width: 34px;
		height: 6px;
		margin-right: 10px;
		background: #fff;
		transform-origin: 0 50%;
		transition: .2s transform;
	}
	#rs_nav_btn:hover::before {
		transform: scale(calc(101 / 34), .5);
	}
	#rs_nav_btn>span {
		position: relative;
		z-index: 1;
		background: #000;
	}

	#rs_nav {
		visibility: hidden;
		opacity: 0;
		overflow-x: hidden;
		position: fixed;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 10;
		width: 303px;
		background: var(--c-red);
		transition: .5s;
		transition-property: visibility, opacity;
	}

	.nav_open #rs_nav {
		visibility: visible;
		opacity: 1;
	}

	#rs_nav::before {
		content: '';
		position: absolute;
		left: 23px;
		right: 23px;
		top: 28px;
		z-index: 1;
		height: 4px;
		background: #000;
	}

	#rs_nav_btn_close {
		display: flex;
		align-items: center;
		position: absolute;
		left: 250px;
		top: 50%;
		z-index: 2;
		margin-top: -116px;
		transform: rotateZ(90deg) translateY(-50%);
		transform-origin: 0% 50%;
		color: #000;
		font-size: 15px;
		line-height: 1;
		cursor: pointer;
	}
	#rs_nav_btn_close::before {
		content: '';
		background: #fff;
		width: 34px;
		height: 6px;
		margin-right: 10px;
		transform-origin: 0 50%;
		transition: .2s transform;
	}
	#rs_nav_btn_close:hover::before {
		transform: scale(calc(103 / 34), .5);
	}
	#rs_nav_btn_close>span {
		position: relative;
		z-index: 1;
		background: var(--c-red);
	}

	#rs_nav ul {
		display: flex;
		flex-direction: column;
		gap: 28px;
		padding: 76px 36px;
	}
	#rs_nav li {
		display: flex;
	}
	#rs_nav li a {
		position: relative;
		height: 16px;
	}
	#rs_nav li a::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
		background: #000;
		mask: 50% 50% / contain no-repeat;
		clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
		transition: .2s clip-path;
	}

	#rs_nav .whatisrs a::after { mask-image: url(../img/nav_whatisrs.svg); }
	#rs_nav .lineup a::after { mask-image: url(../img/nav_lineup.svg); }
	#rs_nav .campaign a::after { mask-image: url(../img/nav_campaign.svg); }
	#rs_nav .application a::after { mask-image: url(../img/nav_application.svg); }
	#rs_nav .terms a::after { mask-image: url(../img/nav_terms.svg); }
	#rs_nav .movie a::after { mask-image: url(../img/nav_movie.svg); }

	#rs_nav li img {
		display: block;
		width: auto;
		height: 100%;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		transition: .2s clip-path;
	}

	#rs_nav li a:hover:after {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
	#rs_nav li a:hover img {
		clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
	}


/* ----------------------------------------
	section_whatisrs
---------------------------------------- */

	#section_whatisrs h2 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 578px;
		height: 73px;
		margin-left: -40px;
		border: 0;
		background: var(--c-red);
	}
	#section_whatisrs h2 img {
		width: 360px;
	}

	#section_whatisrs .section_inner {
		max-width: 1088px;
	}

	#section_whatisrs p {
		margin-top: 60px;
		letter-spacing: .05em;
		font-size: 20px;
		line-height: 2.3;
	}


/* ----------------------------------------
	section_lineup
---------------------------------------- */

	#section_lineup h2 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 290px;
		height: 40px;
		margin: auto;
		border: 0;
		background: var(--c-red);
	}
	#section_lineup h2 img {
		width: 202px;
	}

	#section_lineup .section_inner {
		max-width: 1056px;
	}

	#section_lineup ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-end;
		row-gap: 45px;
		margin-top: 15px;
		padding: 90px 0 78px;
		border: solid var(--c-red);
		border-width: 4px 0;
	}
	#section_lineup li {
		margin: 0 115px;
	}
	#section_lineup li a {
		display: block;
	}

	#section_lineup li .img {
		position: relative;
		z-index: 1;
		height: 120px;
	}
	#section_lineup li .img img {
		position: absolute;
		left: 50%;
		width: auto;
		/* height: 100%; */
		transform: translateX(-50%);
	}

	#section_lineup li .text {
		display: inline-block;
		position: relative;
		z-index: 1;
		margin-top: 25px;
		color: var(--c-red);
		font-size: 16px;
		line-height: 1;
	}
	#section_lineup li .text::before {
		content: '';
		position: absolute;
		left: -6px;
		right: -35px;
		top: 0;
		bottom: 0;
		z-index: 1;
		background: #fff;
		transform: scaleX(0);
		transform-origin: 0 0;
		transition: .2s transform;
	}
	#section_lineup li .text::after {
		content: '';
		position: absolute;
		left: 100%;
		top: 0;
		z-index: 1;
		margin-left: 15px;
		border: solid transparent;
		border-width: 8px 0 8px 14px;
		border-left-color: var(--c-red);
	}

	#section_lineup li .text>span {
		position: relative;
		z-index: 1;
	}

	#section_lineup li:hover .text::before {
		transform: scaleX(1);
	}

	/* #section_lineup .civic {
		margin: 0 135px 0 auto;
	}

	#section_lineup .vezel .img,
	#section_lineup .vezel .img {
		height: 130px;
	}

	#section_lineup .vezel {
		margin: 0 auto 0 135px;
	}

	#section_lineup .vezel .img img {
		top: -10px;
		height: 160px;
	} */


/* ----------------------------------------
	section_campaign
---------------------------------------- */

	#section_campaign .heading {
		margin-top: 95px;
		padding: 53px 0 43px;
		background: #fff;
		text-align: center;
		color: #000;
		font-family: var(--font-bold);
		font-size: 36px;
		line-height: calc(50 / 36);
	}

	#section_campaign .heading .present {
		display: inline-block;
		margin-top: 42px;
		text-align: left;
		color: var(--c-red);
	}

	#section_campaign .heading .item {
		display: inline-block;
		font-size: 80px;
	}

	#section_campaign .heading .text {
		display: inline-block;
		font-size: 46px;
	}

	#section_campaign .present_detail {
		margin-top: 115px;
		font-size: 52px;
		line-height: 1;
	}
	#section_campaign .present_detail>li {
		display: grid;
		grid-template-columns: auto 400px 144px;
		justify-content: center;
		align-items: flex-end;
		margin-top: 55px;
		text-align: right;
	}
	#section_campaign .present_detail>li:first-child {
		margin-top: 0;
	}

	#section_campaign .present_detail .price {
		font-size: 70px;
	}

	#section_campaign .present_detail .number {
		font-size: 48px;
	}

	#section_campaign .outline {
		display: inline-block;
		position: relative;
		z-index: 1;
		left: 50%;
		margin-top: 78px;
		transform: translateX(-50%);
		vertical-align: top;
	}
	#section_campaign .outline p {
		margin-top: 28px;
	}
	#section_campaign .outline p:first-child {
		margin-top: 0;
	}

	#section_campaign .btn_area {
		width: 458px;
		margin: auto;
	}
	#section_campaign .btn_area li {
		margin-top: 110px;
		text-align: center;
	}
	#section_campaign .btn_area small {
		display: inline-block;
		margin-top: 21px;
		padding-left: 1em;
		text-align: left;
		text-indent: -1em;
		font-size: 14px;
	}


/* ----------------------------------------
	section_application
---------------------------------------- */

	#section_application .title_en {
		left: calc(50% - 591px);
	}

	#section_application .section_inner {
		max-width: 932px;
	}

	#section_application .step {
		margin-top: 273px;
	}
	#section_application .step>li {
		display: flex;
		align-items: flex-start;
		position: relative;
		z-index: 1;
		margin-top: 150px;
	}
	#section_application .step>li:first-child {
		margin-top: 0;
	}

	#section_application .step .step02 {
		flex-direction: row-reverse;
	}

	#section_application .step .text {
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		width: 570px;
		padding: 14px 0 0 24px;
		font-family: var(--font-bold);
	}

	#section_application .step .step02 .text {
		margin-left: 30px;
	}

	#section_application .step h3 {
		margin-left: -24px;
		font-size: 48px;
		line-height: 1;
	}
	#section_application .step p {
		margin-top: 14px;
		line-height: calc(38 / 24);
	}

	#section_application .step .btn {
		margin-top: 16px;
		width: 279px;
		font-size: 16px;
		line-height: 44px;
	}
	#section_application .step .btn>span::after {
		width: 16px;
		height: 44px;
	}

	#section_application .step .note {
		display: block;
		margin-top: 11px;
		padding-left: 1em;
		text-indent: -1em;
		font-family: var(--font-normal);
		font-size: 14px;
		line-height: 1.5;
	}

	#section_application .step .example {
		display: inline-block;
		margin-top: 14px;
		font-size: 20px;
		line-height: calc(32 / 20);
	}
	#section_application .step .example span {
		display: block;
		text-align: right;
	}

	#section_application .step figure {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		aspect-ratio: 1;
		width: 288px;
		border: 4px solid;
		background: #fff;
		color: var(--c-red);
	}
	#section_application .step figure::before {
		content: '';
		position: absolute;
		right: calc(100% + 4px);
		top: 57px;
		z-index: 1;
		width: 655px;
		border-bottom: 4px solid;
	}

	#section_application .step .step02 figure::before {
		left: calc(100% + 4px);
		right: auto;
	}

	#section_application .step .step01 figure img {
		width: 116px;
	}
	#section_application .step .step02 figure img {
		width: 204px;
	}
	#section_application .step .step03 figure img {
		width: 166px;
		margin-left: 32px;
	}


/* ----------------------------------------
	section_terms
---------------------------------------- */

	#section_terms .section_inner {
		margin-top: 90px;
		padding: 50px 90px;
		background: var(--c-bg-terms);
	}

	#section_terms .box {
		overflow-x: hidden;
		box-sizing: border-box;
		height: 437px;
		margin-right: -20px;
		padding-right: 20px;
		font-family: var(--font-light);
		color: #000;
		font-size: 14px;
	}

	#section_terms dt,
	#section_terms p,
	#section_terms ul,
	#section_terms ol {
		margin-top: 1.5em;
	}
	#section_terms dt:first-child,
	#section_terms p:first-child,
	#section_terms ul:first-child,
	#section_terms ol:first-child {
		margin-top: 0;
	}
	#section_terms ul li {
		position: relative;
		padding-left: 1em;
	}
	#section_terms ul li::before {
		content: '・';
		position: absolute;
		left: 0;
		z-index: 1;
	}

	#section_terms ul[data-style='kome'] li::before {
		content: '※';
	}

	#section_terms li ul {
		margin-top: 0;
	}
	#section_terms li li {
		padding-left: 0;
	}
	#section_terms li li::before {
		display: none;
	}


/* ----------------------------------------
	section_inquiry
---------------------------------------- */

	#section_inquiry {
		font-size: 14px;
		line-height: calc(24 / 14);
	}

	#section_inquiry .section_inner {
		max-width: 948px;
	}

	#section_inquiry h2 {
		border: 0;
		text-align: left;
		letter-spacing: 0;
		font-size: 24px;
		line-height: 1;
	}
	#section_inquiry p {
		margin-top: 48px;
	}
	#section_inquiry ul {
		margin-top: 24px;
	}


/* ----------------------------------------
	section_movie
---------------------------------------- */

	#section_movie {
		padding-bottom: 95px;
	}

	#section_movie .section_inner {
		max-width: 1440px;
	}

	#section_movie h2 {
		position: absolute;
		right: 0;
		top: 0;
		width: 549px;
		border: 0;
	}
	#section_movie li {
		position: relative;
		z-index: 1;
	}

	#section_movie .movie01 {
		width: calc(680 / 1440 * 100%);
		margin-left: calc(40 / 1440 * 100%);
	}

	#section_movie .movie02 {
		width: calc(619 / 1440 * 100%);
		margin: calc(-60 / 1440 * 100%) 0 0 calc(766 / 1440 * 100%);
	}

	#section_movie .movie03 {
		width: calc(715 / 1440 * 100%);
		margin: calc(47 / 1440 * 100%) 0 0 calc(-14 / 1440 * 100%);
	}

	#section_movie .movie04 {
		width: calc(617 / 1440 * 100%);
		margin: calc(-190 / 1440 * 100%) 0 0 calc(823 / 1440 * 100%);
	}


	/* ----------------------------------------
		btn_pagetop
	---------------------------------------- */

	#btn_pagetop {
		position: relative;
		z-index: 2;
		margin: auto;
		max-width: 1440px;
	}
	#btn_pagetop a {
		position: absolute;
		box-sizing: border-box;
		width: 204px;
		height: 139px;
		margin: calc(-361 / 1440 * 100%) 0 0 calc(516 / 1440 * 100%);
		padding-top: 27px;
		border: 1px solid var(--c-red);
		text-align: center;
		color: var(--c-red);
		font-family: var(--font-bold);
		transition: .3s;
		transition-property: background-color, color;
	}
	#btn_pagetop a::before {
		content: '';
		display: block;
		width: 0;
		margin: 0 auto 5px;
		border: solid transparent;
		border-width: 0 22px 29px 22px;
		border-bottom-color: var(--c-red);
		transition: .3s border-bottom-color;
	}
	#btn_pagetop a:hover {
		background: var(--c-red);
		color: #fff;
	}
	#btn_pagetop a:hover::before {
		border-bottom-color: #fff;
	}
}