@charset "utf-8";

#contents_area {
	--c-gray: #707070;
	--c-text-style: #444;
}

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

	.contents_inner {
		box-sizing: content-box;
		width: var(--contents-wdt);
		margin: 80px auto 0;
		border: solid var(--c-gray);
		border-width: 0 1px 1px;
	}

	.section {
		position: relative;
		z-index: 1;
	}
	.section img {
		display: block;
		max-width: 100%;
	}
	.section sup {
		vertical-align: top;
		font-size: 75%;
	}

	.block_inner {
		width: 904px;
		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_title
---------------------------------------- */

	#section_title {
		flex-direction: column;
		height: 110px;
		margin: 0 -1px;
		background: #000;
	}
	#section_title h3+p {
		margin-top: 13px;
		letter-spacing: .12em;
		color: #fff;
		font-family: var(--font-normal);
		font-size: 19px;
		padding-left: .7em;
	}

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


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

	#section_nav {
		box-sizing: content-box;
		height: var(--nav-hgt);
		padding: 1px 0;
		z-index: 2;
	}
	#section_nav ul {
		position: absolute;
		top: 0;
		box-sizing: content-box;
		width: var(--contents-wdt);
		height: var(--nav-hgt);
		border: solid var(--c-gray);
		border-width: 1px 0;
	}
	
	#section_nav.is-fixed ul {
		position: fixed;
		margin-top: var(--header-hgt);
	}

	#section_nav li {
		box-sizing: border-box;
		width: 25%;
		height: 100%;
		border-right: 1px solid var(--c-gray);
		background: #fff;
		transition: .2s;
	}
	#section_nav li:last-child {
		border-right-width: 0;
		padding-right: 1px;
	}
	#section_nav label {
		align-items: flex-start;
		box-sizing: border-box;
		height: 100%;
		padding-top: 25px;
		cursor: pointer;
	}
	#section_nav svg {
		height: 28px;
		fill: var(--c-gray);
		transition: .2s fill;
	}

	#style_input_urban:checked~#section_nav .urban,
	#style_input_sports:checked~#section_nav .sports,
	#style_input_active:checked~#section_nav .active,
	#style_input_casual:checked~#section_nav .casual,
	#section_nav li:hover {
		background: var(--c-gray);
	}
	#style_input_urban:checked~#section_nav .urban svg,
	#style_input_sports:checked~#section_nav .sports svg,
	#style_input_active:checked~#section_nav .active svg,
	#style_input_casual:checked~#section_nav .casual svg,
	#section_nav li:hover svg {
		fill: #fff;
	}


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

	#section_style {
		color: var(--c-text-style);
	}

	.block_style {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		padding: 75px 0 100px;
		transition: .5s;
		transition-property: visibility, opacity;
	}
	
	#style_input_urban:checked~#section_style .urban,
	#style_input_sports:checked~#section_style .sports,
	#style_input_active:checked~#section_style .active,
	#style_input_casual:checked~#section_style .casual {
		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) - 2px);
	}

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

	.block_style .block_inner::before {
		content: '';
		display: block;
		width: 1px;
		height: 85px;
		margin: 0 auto 20px;
		background: var(--c-gray);
	}

	.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 svg {
		display: block;
		width: auto;
		height: 46px;
		margin: 0 auto 8px;
		fill: var(--c-text-style);
	}
	#section_style h4 img {
		margin: auto;
	}

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

	#section_style .link {
		margin-top: 100px;
	}

	#section_style .link small {
		display: block;
		margin-top: 30px;
		font-family: var(--font-light);
		font-size: 12px;
		line-height: 1;
	}

	#section_style .note {
		margin: 60px 0 -60px;
		font-family: var(--font-light);
		font-size: 12px;
		line-height: 1;
	}

/* kv
---------------------------------------- */

	#section_style .kv {
		position: relative;
		margin-top: 45px;
		cursor: grab;
	}

	#section_style .kv:active {
		cursor: grabbing;
	}

	#section_style .kv .on {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		max-width: 100%;
		min-width: 10px;
		height: 100%;
	}

	.anim_ready #section_style .kv .on {
		width: 0;
	}

	#style_input_urban:checked~#section_style .urban .kv.anim_start .on,
	#style_input_sports:checked~#section_style .sports .kv.anim_start .on,
	#style_input_active:checked~#section_style .active .kv.anim_start .on,
	#style_input_casual:checked~#section_style .casual .kv.anim_start .on {
		width: 98%;
		animation: 3s cubic-bezier(0.86, 0, 0.07, 1) kv_anim;
	}

	#section_style .kv.anim_end .on {
		transition: 0s;
	}

	#section_style .kv .on .img {
		overflow: hidden;
		position: relative;
		height: 100%;
	}

	#section_style .kv .on img {
		max-width: none;
		height: 100%;
	}

	#section_style .kv .name {
		position: absolute;
		left: 20px;
		bottom: 11px;
	}

	#section_style .sports .kv .name {
		left: 677px;
	}

	#section_style .kv .name svg {
		height: 37px;
	}

	#section_style .sports .kv .name svg,
	#section_style .active .kv .name svg {
		fill: #fff;
	}

	#section_style .kv .bar {
		position: absolute;
		right: 0;
		top: 0;
		width: 10px;
		height: 100%;
		background: #fff;
	}
	#section_style .kv .bar::before,
	#section_style .kv .bar::after {
		content: '';
		position: absolute;
		top: 50%;
		margin-top: -10px;
		border: solid transparent;
		border-width: 10px 15px;
	}
	#section_style .kv .bar::before {
		left: -35px;
		border-right-color: #fff;
	}
	#section_style .kv .bar::after {
		right: -35px;
		border-left-color: #fff;
	}

/* list
---------------------------------------- */

	#section_style .list>li,
	#section_style .car_rear {
		display: flex;
		margin-top: 100px;
	}

	#section_style .list .rev,
	#section_style .car_rear.rev {
		flex-direction: row-reverse;
		text-align: right;
	}

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

	#section_style .list>li>div {
		display: flex;
		flex-direction: column;
		max-width: 399px;
		margin-left: 20px;
	}

	#section_style .list .rev>div {
		margin-left: 0;
		margin-right: 20px;
	}

	#section_style .copy {
		margin: auto 0 -6px;
		font-size: 17px;
		line-height: calc(29 / 17);
	}

	#section_style .item {
		margin-top: 20px;
	}
	#section_style .item li {
		font-family: var(--font-bold);
		font-size: 14px;
	}
	#section_style .item li+li {
		margin-top: 1em;
	}
	#section_style .item small {
		display: block;
		margin: 5px 0 -3px;
		font-family: var(--font-light);
		font-size: 12px;
		line-height: 1.5;
	}

	#section_style .car_rear img {
		width: 744px;
	}


/* ----------------------------------------
	Bottom
---------------------------------------- */

	#bottom_link {
		margin-top: 100px;
	}

	#footer_topic_path {
		margin-top: 100px;
	}
}

@-webkit-keyframes kv_anim {
	0% {
		width: 0%;
	}
	95% {
		width: 100%;
	}
	100% {
		width: 98%;
	}
}
@keyframes kv_anim {
	0% {
		width: 0%;
	}
	95% {
		width: 100%;
	}
	100% {
		width: 98%;
	}
}