@charset "utf-8";

#contents_area {
	--c-ehev: #abb4b4;
	--c-crosstar: #a19678;
	--c-rs: #000;
	--c-link: #299aed;
	--c-text-block-nav: #4d4d4d;
	--c-border-block-nav: #707070;
	--c-red: #e20000;
}

@media print, screen and (min-width : 769px){
	#contents_area {
		--header-hgt: 121px;
		--nav-hgt: 60px;
	}

	.section {
		position: relative;
		z-index: 1;
	}
	.section img {
		display: block;
		max-width: 100%;
	}


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

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

	.anim_ready .scroll_anim:not(.block) {
		transform: translateY(50px);
	}

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

	.anim_ready .scroll_anim.anim_end:not(.block) {
		transform: translateY(0) !important;
		transition-property: opacity, transform;
	}


/* ----------------------------------------
	section_nav
---------------------------------------- */

	.style_input {
		visibility: hidden;
		opacity: 0;
		position: absolute;
	}

	#section_nav {
		box-sizing: content-box;
		height: var(--nav-hgt);
		z-index: 2;
	}
	#section_nav ul {
		display: grid;
		grid-template-columns: 430px 424px 430px;
		justify-content: center;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: var(--nav-hgt);
		background: #d8d8d8;
	}

	#section_nav.is-fixed ul {
		position: fixed;
		margin-top: var(--header-hgt);
	}

	#section_nav li {
		height: 100%;
		box-sizing: border-box;
		border: solid #fff;
		border-width: 0 2px;
		text-align: center;
		letter-spacing: .05em;
		font-family: var(--font-bold);
		color: #fff;
		font-size: 26px;
		transition: .2s;
		transition-property: background-color, color;
	}
	#section_nav li:nth-child(2) {
		border-width: 0;
	}
	#section_nav label {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		cursor: pointer;
	}

	#section_nav .ehev:hover,
	#style_input_ehev:checked~#section_nav .ehev,
	#section_style .ehev h3 {
		background: var(--c-ehev);
	}

	#section_nav .crosstar:hover,
	#style_input_crosstar:checked~#section_nav .crosstar,
	#section_style .crosstar h3 {
		background: var(--c-crosstar);
	}

	#section_nav .rs:hover,
	#style_input_rs:checked~#section_nav .rs,
	#section_style .rs h3 {
		background: var(--c-rs);
		color: var(--c-red);
	}


/* ----------------------------------------
	section_style
---------------------------------------- */

	#section_style {
		overflow: hidden;
		color: #000;
	}

	.block_style {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		padding-bottom: 100px;
		transition: .5s;
		transition-property: visibility, opacity;
	}
	
	#style_input_ehev:checked~#section_style .ehev,
	#style_input_crosstar:checked~#section_style .crosstar,
	#style_input_rs:checked~#section_style .rs {
		visibility: visible;
		opacity: 1;
		position: relative;
		z-index: 2;
	}

	.block_style .anc {
		position: absolute;
		top: 0;
		margin-top: calc((var(--header-hgt) * -1) + (var(--nav-hgt) * -1));
	}

	.block_style .kv img {
		width: 100%;
	}

	.block_style .block_inner {
		width: 980px;
	}

	.block_style .block_inner.scroll_anim::before {
		content: '';
		display: block;
		height: 150px;
	}

	.anim_ready .block_style .block_inner.scroll_anim {
		transform: translateY(-50px);
	}
	.anim_ready .block_style .block_inner.scroll_anim::before {
		transform: scaleY(0);
		transform-origin: 0 100%;
	}

	.anim_ready .block_style .block_inner.anim_end::before {
		transform: scaleY(1);
		transition: 1s transform;
	}

	#section_style h3 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 160px;
		color: #fff;
		font-family: var(--font-bold);
		font-size: 40px;
	}
	#section_style h3 span {
		margin-top: 15px;
		letter-spacing: .05em;
		font-size: 26px;
	}

	#section_style .list>li {
		justify-content: flex-start;
		gap: 60px;
		margin-top: 150px;
	}
	#section_style .list>li:first-child {
		margin-top: 0;
	}

	#section_style .list .rev {
		flex-direction: row-reverse;
	}

	#section_style .list figure {
		width: 490px;
	}

	#section_style .list .text {
		max-width: 430px;
		letter-spacing: .1em;
		font-size: 16px;
		line-height: calc(32 / 16);
	}

	#section_style .list h4 {
		margin-bottom: 23px;
		letter-spacing: .1em;
		font-family: var(--font-bold);
		font-size: 20px;
		line-height: 1;
	}
	#section_style .list h4 small {
		display: inline-block;
		letter-spacing: .1em;
		font-family: var(--font-normal);
		font-size: 15px;
	}

	#section_style .link {
		margin-top: 23px;
		text-align: left;
		font-family: var(--font-bold);
		font-size: 14px;
	}
	#section_style .link a,
	#section_style .link span {
		display: inline-block;
		position: relative;
		padding-right: 30px;
		color: var(--c-link);
		letter-spacing: .1em;
	}
	#section_style .link a::after,
	#section_style .link span::after {
		position: absolute;
		right: 0;
		top: 2px;
		width: 20px;
		height: 20px;
		background: var(--c-link);
		mask: url(/ACCESS/fit/common/img/parts_ico_btn_detail_arrow.png) 50% 0 / contain no-repeat;
	}

	#section_style .list .text figure {
		margin-top: 30px;
	}

	#section_style .interior_img {
		max-width: 1280px;
		margin: 150px auto;
	}

	#section_style .nav {
		justify-content: space-between;
		margin-top: 200px;
	}
	#section_style .nav>li {
		box-sizing: border-box;
		width: 312px;
		border: 1px solid var(--c-border-block-nav);
	}
	#section_style .nav a {
		display: block;
		position: relative;
		height: 300px;
		color: var(--c-text-block-nav);
		font-family: var(--font-bold);
		font-size: 16px;
		line-height: 2;
	}
	#section_style .nav figure {
		border-bottom: 1px solid var(--c-border-block-nav);
	}
	#section_style .nav figure+p {
		padding: 15px 15px 0;
	}
	#section_style .nav .link {
		position: absolute;
		right: 15px;
		bottom: 12px;
	}
	#section_style .nav .link span::after {
		content: '';
	}

	#section_style .fix_edge {
		position: absolute;
		margin-top: calc(var(--header-hgt) * -1);
	}

	/* ehev
	---------------------------------------- */

	#section_style .ehev .list .text figure {
		width: 400px;
	}
}