@charset "utf-8";

.hm-jp-font-regular,
body {
	font-family: 'HondaGlobalFontJP-Regular', sans-serif;
	font-weight: normal;
}

.hm-jp-font-light {
	font-family: 'HondaGlobalFontJP-Light', sans-serif;
	font-weight: normal;
}

.hm-jp-font-bold,
strong,
em,
.bold {
	font-family: 'HondaGlobalFontJP-Bold', sans-serif;
	font-weight: normal;
}

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

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

#contents_area {
	--c-blue: #006fbc;
	--c-title-bg: #091c3f;
	--c-text: #000;
	--header-h: 75px;

	overflow: hidden;
}

#contents_area .ffs_palt {
	font-feature-settings: 'palt' 1;
}

#contents_area video {
	display: block;
	width: 100%;
}

#contents_area .anc {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: calc(-1 * var(--header-h) - 40px);
}

section,
.section,
.section_inner,
.block {
	position: relative;
	z-index: 1;
}

section img,
.section img {
	display: block;
	max-width: 100%;
}

section a,
.section a {
	color: inherit;
}

section sup,
.section sup {
	font-size: 80%;
}


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

.anim_ready .scroll_anim {
	opacity: 0;
	backface-visibility: hidden;
}

.anim_ready .scroll_anim.visible {
	opacity: 1;
}

.anim_ready .anim_end {
	opacity: 1;
	transition: .75s;
	transition-property: opacity;
}

.scroll_fix.fixed>* {
	position: fixed !important;
	top: var(--header-h);
}

@keyframes infinite_scroll2top {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-50%);
	}
}

@keyframes infinite_scroll2bottom {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(50%);
	}
}

@keyframes anim_height {
	0% {
		transform:  translateX(-50%) scaleY(0);
	}
	100% {
		transform:  translateX(-50%) scaleY(1);
	}
}


/* ----------------------------------------
	section_promo
---------------------------------------- */

#section_promo {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 10;
	transition: .5s;
	transition-property: visibility, opacity;
}

#section_promo.shown {
	visibility: visible;
	opacity: 1;
}


/* ----------------------------------------
	movie_modal
---------------------------------------- */

.modal_mov_open a {
	display: block;
	position: relative;
}
.modal_mov_open a::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 110px;
	height: 110px;
	box-shadow: 0 4px 4px rgba(0,0,0,.25);
	border-radius: 50%;
	background: url(../img/icon_play.svg) 50% 50% / contain no-repeat;
	transform: translate(-50%,-50%);
}

#movie_modal {
	display: none;
	visibility: hidden;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 65535;
	width: 100%;
	height: 100%;
	text-align: center;
	white-space: nowrap;
}
#movie_modal::after,
#movie_modal_inner {
	display: inline-block;
	vertical-align: middle;
}
#movie_modal::after {
	content: '';
	width: 0;
	height: 100%;
}

#movie_modal_inner {
	opacity: 0;
	position: relative;
	top: 0;
	z-index: 2;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}

#movie_modal_data {
	position: relative;
	padding-top: 56.25%;
}
#movie_modal_data iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

[data-mode='video'] #movie_modal_data,
[data-mode='yt'] #movie_modal_video {
	display: none;
}

#movie_modal_video {
	display: block;
	width: 100%;
}

#movie_modal .movie_overlay {
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 1;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

#movie_modal .movie_btn_close {
	position: fixed;
	right: 30px;
	top: 30px;
	z-index: 2;
	width: 25px;
	height: 25px;
}

#movie_modal .movie_btn_close::before,
#movie_modal .movie_btn_close::after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 1;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background: #000;
}
#movie_modal .movie_btn_close::before {
	transform: rotate(-45deg);
}
#movie_modal .movie_btn_close::after {
	transform: rotate(45deg);
}



/* ++++++++++++++++++++++++++++++++++++++++

	PC

++++++++++++++++++++++++++++++++++++++++ */

@media print, screen and (min-width : 768px){
	#contents_area {
		min-width: 1060px;
		font-size: 16px;
		line-height: calc(30 / 16);
	}

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

	.section_inner {
		width: 1060px;
		margin: auto;
	}

	section .btn,
	.section .btn {
		display: flex;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		padding: 0 40px 0 19px;
		border: solid 1px;
		font-size: 18px;
		line-height: 1;
	}
	section .btn.outerlink::after,
	.section .btn.outerlink::after {
		content: '';
		position: absolute;
		right: 12px;
		top: 0;
		bottom: 0;
		width: 18px;
		background: url(../img/icon_outerlink.svg) 100% 50% / contain no-repeat;
		transition: .3s transform;
	}
	section .btn:hover::after,
	.section .btn:hover::after {
		transform: scale(1.1);
	}


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

	#section_title {
		z-index: 2;
		height: var(--header-h);
		color: #fff;
	}
	#section_title>div {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: var(--header-h);
		background: var(--c-title-bg);
	}
	#section_title h1 {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 50%;
		margin-left: max(-490px, -50% + 10px);
	}
	#section_title h1 img {
		width: auto;
		height: 34px;
	}

	#ehev_nav {
		display: flex;
		margin-right: min(45px, 45 / 1075 * 100vw);
	}
	#ehev_nav li {
		font-size: min(14px, 14 / 1075 * 100vw);
		line-height: calc(18 /14);
	}
	#ehev_nav li+li {
		margin-left: min(55px, 55 / 1075 * 100vw);
	}
	#ehev_nav a {
		display: block;
	}

	#ehev_nav .story a {
		text-decoration: underline;
	}




/* ----------------------------------------
	movie_modal
---------------------------------------- */

	.modal_mov_open a::after {
		transition: .3s transform;
	}
	.modal_mov_open a:hover::after {
		transform: translate(-50%,-50%) scale(1.05);
	}

	#movie_modal .movie_btn_close {
		cursor: pointer;
		transition: .3s opacity;
	}
	#movie_modal .movie_btn_close:hover {
		opacity: .7;
	}


/* ----------------------------------------
	section_sport
---------------------------------------- */

	#section_sport {
		padding: 44px 0 40px;
		background: #000;
		text-align: center;
		color: #fff;
	}

	#section_sport .bnr {
		display: block;
		width: 385px;
		margin: auto;
	}
	#section_sport .bnr img {
		transition: .3s opacity;
	}
	#section_sport .bnr:hover img {
		opacity: .7;
	}

	#section_sport .bnr_link {
		display: inline-flex;
		height: 36px;
		margin: 21px auto 0;
		padding: 0;
		border: none;
	}


/* ----------------------------------------
	section_sns
---------------------------------------- */

	#section_sns {
		padding: 110px 0 120px;
		background: #fff;
	}
	#section_sns>p {
		width: 114px;
		margin: 0 auto 30px;
	}
	#section_sns ul {
		display: flex;
		justify-content: center;
	}
	#section_sns li {
		margin: 0 42px;
	}
	#section_sns li img {
		width: auto;
		height: 60px;
	}
}



/* ++++++++++++++++++++++++++++++++++++++++

	SP

++++++++++++++++++++++++++++++++++++++++ */

@media screen and (max-width : 767.9px){
	#contents_area {
		--header-h: 55px;
		font-size: calc(16 / 393 * 100vw);
		line-height: calc(30 / 16);
	}

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

	.section_inner {
		width: calc(353 / 393 * 100vw);
		margin: auto;
	}

	section .btn,
	.section .btn {
		display: flex;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		padding: 0 calc(53 / 393 * 100vw) 0 calc(20 / 393 * 100vw);
		border: solid 1px;
		font-size: calc(18 / 393 * 100vw);
		line-height: 1;
	}
	section .btn.outerlink::after,
	.section .btn.outerlink::after {
		content: '';
		position: absolute;
		right: calc(18 / 393 * 100vw);
		top: 0;
		bottom: 0;
		width: calc(22 / 393 * 100vw);
		background: url(../img/icon_outerlink.svg) 100% 50% / contain no-repeat;
	}


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

	#section_title {
		z-index: 2;
		height: var(--header-h);
	}
	#section_title>div {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		background: var(--c-title-bg);
	}
	#section_title h1 {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 2;
		width: 100%;
		height: var(--header-h);
	}
	#section_title h1 img {
		width: auto;
		height: 21px;
	}

	#ehev_nav_btn {
		position: absolute;
		right: 21px;
		top: 21px;
		width: 25px;
		height: 13px;
		z-index: 2;
	}
	#ehev_nav_btn::before,
	#ehev_nav_btn::after,
	#ehev_nav_btn span {
		position: absolute;
		left: 0;
		right: 0;
		z-index: 1;
		border-bottom: 1px solid #fff;
	}
	#ehev_nav_btn::before,
	#ehev_nav_btn::after {
		content: '';
		transition: .3s .2s bottom, .2s transform;
	}
	#ehev_nav_btn::before {
		bottom: calc(100% - 1px);
	}
	#ehev_nav_btn::after {
		bottom: 0
	}
	#ehev_nav_btn span {
		bottom: 50%;
		transition: .3s opacity;
	}

	#ehev_nav_btn.open::before,
	#ehev_nav_btn.open::after {
		bottom: 50%;
		transition: .2s bottom, .3s .2s transform;
	}
	#ehev_nav_btn.open::before {
		transform: rotate(45deg);
	}
	#ehev_nav_btn.open::after {
		transform: rotate(-45deg);
	}
	#ehev_nav_btn.open span {
		opacity: 0;
	}

	#ehev_nav {
		display: flex;
		flex-direction: column;
		align-items: center;
		visibility: hidden;
		opacity: 0;
		overflow: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		box-sizing: border-box;
		max-height: 100vh;
		max-height: 100dvh;
		padding-top: var(--header-h);
		background: var(--c-title-bg);
		transform: translateY(-30px);
		transition: .5s;
		transition-property: visibility, opacity, transform;
	}

	#ehev_nav.open {
		visibility: visible;
		opacity: 1;
		transform: translateY(0px);
	}

	#ehev_nav li {
		color: #fff;
		font-size: 16px;
		line-height: 40px;
	}
	#ehev_nav a {
		position: relative;
		padding-right: 14px;
	}
	#ehev_nav a::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		z-index: 1;
		width: 6px;
		height: 10px;
		margin-top: -5px;
		background: #fff;
		-webkit-mask: url(../img/btn_arrow_link.svg) 100% 50% / contain no-repeat;
		mask: url(../img/btn_arrow_link.svg) 100% 50% / contain no-repeat;
	}


/* ----------------------------------------
	section_sport
---------------------------------------- */

	#section_sport {
		padding: calc(56 / 393 * 100vw) 0 calc(50 / 393 * 100vw);
		background: #000;
		text-align: center;
		color: #fff;
	}

	#section_sport .bnr {
		display: block;
		width: calc(299 / 393 * 100vw);
		margin: auto;
	}

	#section_sport .bnr_link {
		display: inline-flex;
		height: calc(36 / 393 * 100vw);
		margin: calc(33 / 393 * 100vw) auto 0;
		padding: 0;
		border: none;
	}


/* ----------------------------------------
	section_sns
---------------------------------------- */

	#section_sns {
		padding: calc(80 / 393 * 100vw) 0 calc(90 / 393 * 100vw);
		background: #fff;
	}
	#section_sns>p {
		width: calc(93 / 393 * 100vw);
		margin: 0 auto calc(38 / 393 * 100vw);
	}
	#section_sns ul {
		display: flex;
		justify-content: center;
	}
	#section_sns li {
		margin: 0 calc(28 / 393 * 100vw);
	}
	#section_sns li img {
		width: auto;
		height: calc(51 / 393 * 100vw);
	}


/* ----------------------------------------
	movie_modal
---------------------------------------- */

	.modal_mov_open a::after {
		width: calc(62 / 393 * 100vw);
		height: calc(62 / 393 * 100vw);
	}

	#movie_modal .movie_btn_close {
		right: 5%;
	}
}