@charset "utf-8";
@media screen and (max-width : 768px){
	#contents_area {
		--header-hgt: 87px;
		--contents-wdt: calc((339 / 375 * 100vw) - 2px);
		--nav-hgt: calc(80 / 375 * 100vw);
	}

	.contents_inner {
		box-sizing: content-box;
		width: var(--contents-wdt);
		margin: calc(40 / 375 * 100vw) auto 0;
		border: solid var(--c-gray);
		border-width: 0 1px 1px;
	}

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

	.section.box_flex,
	.section .box_flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.block_inner {
		width: calc(315 / 375 * 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_title
---------------------------------------- */

	#section_title {
		flex-direction: column;
		justify-content: flex-start;
		margin: 0 -1px;
		height: calc(138 / 375 * 100vw);
		background: #000;
	}
	#section_title h3 {
		width: calc(225 / 375 * 100vw);
		padding-top: calc(17 / 375 * 100vw);
	}
	#section_title h3+p {
		margin-top: calc(15 / 375 * 100vw);
		text-align: center;
		letter-spacing: .1em;
		color: #fff;
		font-family: var(--font-normal);
		font-size: calc(14 / 375 * 100vw);
		line-height: calc(18 / 14);
	}

	.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);
		margin: 0 -1px;
		border: 1px solid var(--c-gray);
	}
	
	#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: calc(25 / 375 * 100vw);
		cursor: pointer;
	}
	#section_nav svg {
		height: calc(33 / 375 * 100vw);
		fill: var(--c-gray);
	}

	#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 {
		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 {
		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: calc(18 / 375 * 100vw) 0 calc(40 / 375 * 100vw);
		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: calc(54 / 375 * 100vw);
		margin: 0 auto calc(10 / 375 * 100vw);
		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: calc(28 / 375 * 100vw);
		margin: 0 auto calc(5 / 375 * 100vw);
		fill: var(--c-text-style);
	}
	#section_style h4 img {
		width: calc(149.5 / 375 * 100vw);
		margin: auto;
	}

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

	#section_style .link {
		margin-top: calc(40 / 375 * 100vw);
	}

	#section_style .link small {
		display: block;
		margin-top: calc(15 / 375 * 100vw);
		font-family: var(--font-light);
		font-size: 12px;
		line-height: 1.5;
	}

	#section_style .note {
		margin: calc(58 / 375 * 100vw) 0 calc(-22 / 375 * 100vw);
		font-family: var(--font-light);
		font-size: calc(12 / 375 * 100vw);
		line-height: calc(16 / 12);
	}

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

	#section_style .kv {
		position: relative;
		margin-top: calc(18 / 375 * 100vw);
		height: calc(157 / 375 * 100vw);
	}

	#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 {
		width: auto;
		max-width: none;
		height: 100%;
	}

	#section_style .kv .name {
		position: absolute;
		left: calc(20 / 375 * 100vw);
		bottom: calc(10 / 375 * 100vw);
	}

	#section_style .sports .kv .name {
		left: calc(192 / 375 * 100vw);
	}

	#section_style .kv .name svg {
		height: calc(18.5 / 375 * 100vw);
	}

	#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: calc(6 / 375 * 100vw);
		height: 100%;
		background: #fff;
	}
	#section_style .kv .bar::before,
	#section_style .kv .bar::after {
		content: '';
		position: absolute;
		top: 50%;
		margin-top: calc(-6 / 375 * 100vw);
		border: solid transparent;
		border-width: calc(6 / 375 * 100vw) calc(8 / 375 * 100vw);
	}
	#section_style .kv .bar::before {
		left: calc(-18 / 375 * 100vw);
		border-right-color: #fff;
	}
	#section_style .kv .bar::after {
		right: calc(-18 / 375 * 100vw);
		border-left-color: #fff;
	}

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

	#section_style .list>li,
	#section_style .car_rear {
		display: block;
		margin-top: calc(40 / 375 * 100vw);
	}

	#section_style li>div {
		margin-top: calc(24 / 375 * 100vw);
	}

	#section_style .copy {
		margin: calc(-3 / 375 * 100vw) 0;
		font-size: calc(17 / 375 * 100vw);
		line-height: calc(23 / 17);
	}

	#section_style .item {
		margin-top: calc(20 / 375 * 100vw);
	}
	#section_style .item li {
		font-family: var(--font-bold);
		font-size: calc(14 / 375 * 100vw);
	}
	#section_style .item li+li {
		margin-top: calc(12 / 375 * 100vw);
	}
	#section_style .item small {
		display: block;
		margin: calc(5 / 375 * 100vw) 0 calc(-1.5 / 375 * 100vw);
		font-family: var(--font-light);
		font-size: calc(12 / 375 * 100vw);
		line-height: calc(15 / 12);
	}


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

	#bottom_link {
		margin-top: calc(60 / 375 * 100vw);
	}

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