@charset "utf-8";

#contents_area {
	--c-premium: #003567;
	--c-sporty: #53a5be;
	--c-casual: #78a5c8;
	--fw-regular: 400;
	--fw-bold: 700;
}

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

	.section {
		position: relative;
		z-index: 1;
		letter-spacing: .075em;
		font-weight: var(--fw-bold);
		font-family: 'Noto Sans JP', '游ゴシック Medium', YuGothic, YuGothicM, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-feature-settings: 'palt' 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_title
---------------------------------------- */

	#section_title {
		flex-direction: column;
		align-items: center;
		height: 150px;
		background: #4d4d4d;
	}
	#section_title p {
		margin-top: 25px;
	}


/* ----------------------------------------
	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 {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: var(--nav-hgt);
		background: #b3b3b3;
	}
	
	#section_nav.is-fixed ul {
		position: fixed;
		margin-top: var(--header-hgt);
	}

	#section_nav li {
		box-sizing: content-box;
		width: 426px;
		height: 100%;
		border-right: 1px solid #fff;
		transition: .2s background-color;
	}
	#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 .premium:hover,
	#style_input_premium:checked~#section_nav .premium {
		background: var(--c-premium);
	}

	#section_nav .sporty:hover,
	#style_input_sporty:checked~#section_nav .sporty {
		background: var(--c-sporty);
	}

	#section_nav .casual:hover,
	#style_input_casual:checked~#section_nav .casual {
		background: var(--c-casual);
	}


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

	#section_style {
		overflow: hidden;
	}

	.block_style {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		padding-bottom: 150px;
		transition: .5s;
		transition-property: visibility, opacity;
		color: var(--c-section);
	}
	
	#style_input_premium:checked~#section_style .premium,
	#style_input_sporty:checked~#section_style .sporty,
	#style_input_casual:checked~#section_style .casual {
		visibility: visible;
		opacity: 1;
		position: relative;
		z-index: 2;
	}

	#section_style .premium {
		--c-section: var(--c-premium);
		background: #dde4eb;
	}

	#section_style .sporty {
		--c-section: var(--c-sporty);
		background: #d7eff0;
	}

	#section_style .casual {
		--c-section: var(--c-casual);
		background: #e5f1f5;
	}

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

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

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

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

	.anim_ready .block_style .block_inner::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 h4 {
		overflow: hidden;
		height: 33px;
		background: var(--c-section);
		-webkit-mask: 50% 50% / contain no-repeat;
		mask: 50% 50% / contain no-repeat;
		text-indent: 150%;
	}

	#section_style .premium h4 {
		-webkit-mask-image: url(../img/premium.svg);
		mask-image: url(../img/premium.svg);
	}

	#section_style .sporty h4 {
		-webkit-mask-image: url(../img/sporty.svg);
		mask-image: url(../img/sporty.svg);
	}

	#section_style .casual h4 {
		-webkit-mask-image: url(../img/casual.svg);
		mask-image: url(../img/casual.svg);
	}

	#section_style h4+p {
		display: flex;
		justify-content: center;
		margin-top: 35px;
	}

	#section_style .list>li {
		margin-top: 150px;
	}
	#section_style .list>li:first-child {
		margin-top: 105px;
	}

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

	#section_style .list .full {
		flex-direction: column;
	}

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

	#section_style .list .full figure {
		width: 100%;
		margin-bottom: 45px;
	}

	#section_style .list .wheel figure {
		width: 340px;
	}

	#section_style .list figcaption {
		display: flex;
		margin-top: 10px;
	}

	#section_style .list .rev figcaption {
		justify-content: flex-end;
	}

	#section_style .list .name {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 410px;
	}
	#section_style .list .name::before {
		content: '';
		display: block;
		width: 80px;
		margin: 0 auto 40px;
		border-bottom: 2px solid;
	}

	#section_style .list .wheel .name {
		width: 350px;
	}

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