@charset "utf-8";
@media screen and (max-width : 768px){
	#contents_area {
		--header-hgt: 87px;
		--nav-hgt: calc(90 / 750 * 100vw);
	}

	.section {
		position: relative;
		z-index: 1;
		letter-spacing: .075em;
		font-feature-settings: 'palt' 1;
	}
	.section img {
		display: block;
		width: 100%;
	}

	.block_inner {
		width: calc(675 / 750 * 100vw);
		margin: auto;
	}


/* ----------------------------------------
	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: repeat(3, 1fr);
		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 1px;
		text-align: center;
		letter-spacing: .05em;
		font-family: var(--font-bold);
		color: #fff;
		font-size: calc(24 / 750 * 100vw);
		transition: .2s;
		transition-property: background-color, color;
	}
	#section_nav li:first-child {
		border-left-width: 0;
	}
	#section_nav li:last-child {
		border-right-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;
	}

	.block_style {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		padding-bottom: calc(100 / 750 * 100vw);
		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));
	}

	.anim_ready .block_style .block_inner.scroll_anim {
		transform: translateY(-50px);
	}

	.block_style .block_inner.scroll_anim::before {
		content: '';
		display: block;
		height: calc(77 / 750 * 100vw);
	}

	.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: calc(165 / 750 * 100vw);
		color: #fff;
		font-family: var(--font-bold);
		font-size: calc(47 / 750 * 100vw);
	}
	#section_style h3 span {
		margin-top: calc(20 / 750 * 100vw);
		letter-spacing: .05em;
		font-size: calc(32 / 750 * 100vw);
	}

	#section_style .list>li {
		margin-top: calc(100 / 750 * 100vw);
	}
	#section_style .list>li:first-child {
		margin-top: 0;
	}

	#section_style .list .text {
		position: relative;
		margin-top: calc(30 / 750 * 100vw);
		letter-spacing: .1em;
		font-size: calc(30 / 750 * 100vw);
		line-height: calc(50 / 30);
	}

	#section_style .list h4 {
		margin-bottom: calc(40 / 750 * 100vw);
		letter-spacing: .1em;
		font-family: var(--font-bold);
		font-size: calc(38 / 750 * 100vw);
		line-height: 1;
	}
	#section_style .list h4 small {
		display: inline-block;
		letter-spacing: .1em;
		font-family: var(--font-normal);
		font-size: calc(28 / 750 * 100vw);
	}

	#section_style .link {
		margin-top: calc(40 / 750 * 100vw);
		font-family: var(--font-bold);
		font-size: calc(28 / 750 * 100vw);
		line-height: calc(38 / 750 * 100vw);
	}
	#section_style .link a,
	#section_style .link span {
		position: relative;
		padding-right: calc(72 / 750 * 100vw);
		color: var(--c-link);
		letter-spacing: .1em;
	}
	#section_style .link a::after,
	#section_style .link span::after {
		position: absolute;
		right: 0;
		top: 0;
		width: calc(38 / 750 * 100vw);
		height: calc(38 / 750 * 100vw);
		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 {
		position: absolute;
		top: 0;
	}

	#section_style .interior_img {
		margin: calc(95 / 750 * 100vw) 0 calc(30 / 750 * 100vw);
	}

	#section_style .nav {
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(30 / 750 * 100vw);
		margin-top: calc(180 / 750 * 100vw);
	}
	#section_style .nav::before {
		content: '';
		display: block;
		width: calc(165 / 750 * 100vw);
		margin: 0 auto calc(180 / 750 * 100vw);
		border-bottom: 1px solid var(--c-border-block-nav);
	}
	#section_style .nav>li {
		border: 1px solid var(--c-border-block-nav);
	}
	#section_style .nav a {
		display: block;
		position: relative;
		height: calc(546 / 750 * 100vw);
		color: var(--c-text-block-nav);
		font-family: var(--font-bold);
		font-size: calc(27 / 750 * 100vw);
		line-height: 2;
	}
	#section_style .nav figure {
		border-bottom: 1px solid var(--c-border-block-nav);
	}
	#section_style .nav figure+p {
		padding: calc(22 / 750 * 100vw) calc(35 / 750 * 100vw) 0;
	}
	#section_style .nav .link {
		position: absolute;
		right: calc(35 / 750 * 100vw);
		bottom: calc(17 / 750 * 100vw);
	}
	#section_style .nav .link span::after {
		content: '';
	}

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

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

	#section_style .ehev .item01 .text {
		padding-top: calc(216 / 750 * 100vw);
	}

	#section_style .ehev .item02 .text {
		padding-top: calc(258 / 750 * 100vw);
	}

	#section_style .ehev .item06 figure,
	#section_style .ehev .item07 figure {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		height: calc(492 / 750 * 100vw);
	}

	/* crosstar
	---------------------------------------- */
	#section_style .crosstar .item01 .text {
		padding-top: calc(232 / 750 * 100vw);
	}
}