@charset "utf-8";

@media screen and (min-width:769px) {
	/*------------------------------------------------------------------------------------------
	*
	*
		 /webcatalog/performance/driving/
		 Responsive / PC
	*
	*
	------------------------------------------------------------------------------------------ */

	/* ------------------------------
	 #section_main
	------------------------------ */
	#section_main h3 {
		text-align:center;
		margin-bottom:70px;
		}

	#image_zoom {
		width:100%;
		position:relative;
		overflow:hidden;
		background:#000;
		}
	#image_zoom img {
		width:100%;
		display:block;
		transition:opacity 0.5s;
		}
	#loupe {
		background:url('../image/pic_main.jpg') no-repeat center center #000;
		background-size:3000px auto;
		position:absolute;
		border-radius:50%;
		transform:translate(-50%,-50%);
		transform-origin:0% 0%;
		cursor:none;
		box-sizing:border-box;
		border:1px solid hsla(0, 0%, 0%, 0.25);
		box-shadow:0 0 15px hsla(0, 0%, 0%, 0.25);
		-webkit-transform-style: preserve-3d;
		}

	/*show,hide*/
	#loupe {
		transform:scale(1.15) translate(-50%,-50%);
		opacity:0;
		visibility:hidden;
		transition:opacity 0.15s linear, visibility 0.15s step-end, transform 0.155s;
		}
	#loupe.show {
		transform:scale(1) translate(-50%,-50%);
		opacity:1;
		visibility:visible;
		transition:opacity 0.15s linear, visibility 0.15s, transform 0.2s;
		}
	.isIE #loupe {
		transition:none;
		}
	.isIE #loupe.show {
		transition:opacity 0.15s;
		}
	#image_zoom.show img {
		opacity:0.8;
		}

	#image_zoom #loading {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: hsla(0, 0%, 0%, 1);
		line-height: 1;
		z-index: 90;
		}
	#image_zoom #loading.ready {
		opacity:0;
		visibility:hidden;
		transition:opacity 1s, visibility 1s step-end;
		}


	/* ------------------------------
		 #section_frame
	------------------------------ */
	#section_frame .section_desc,
	#section_frame h3 {
		text-align:center;
		}
	#section_frame .sh-awd_slider {
		width:960px !important;
		margin:0 auto;
		text-align:center;
		position:relative;
		}
	#section_frame .sh-awd_slider .pic img {
		width:87.1%;
		height:auto;
		margin:0 auto;
		}
	#section_frame .sh-awd_slider .logo {
		width:40%;
		display:block;
		position:relative;
		left:50px;
		top:-16px;
		}
	#section_frame .img_slider h5 {
		margin:20px 0 10px 20px;
		background-color:rgba(255, 255, 255, .5);
		padding:0 40px;
		text-align:center;
		}
	#section_frame .img_slider .desc {
		padding:0 40px;
		margin:0 0 40px 20px;
		background-color:rgba(255, 255, 255, .5);
		font-size:16px;
		line-height:1.6em;
		font-weight:normal;
		text-align:center;
		}
	#section_frame .img_slider .desc .caption {
		font-size:12px;
		display:block;
		}
	#section_frame .img_slider .caption {
		font-size:12px;
		position:absolute;
		right:80px;
		top:475px;
		}
	/*----------*/
	/* 2018-03 */
	#section_frame .sh-awd_slider .arrow_prev,
	#section_frame .sh-awd_slider .arrow_next {
		width:20px;
		height:50px;
		margin:0;
		border:none;
		position:absolute;
		cursor:pointer;
		z-index:2;
		transition:opacity .1s ease;
		display:inline-block;
		padding:2px;
		background-image:url("../image/pic_frame_slider_arrow_left.svg");
		bottom:64%;
		}
	#section_frame .sh-awd_slider .arrow_prev {
		left:0px !important;
		}
	#section_frame .sh-awd_slider .arrow_next {
		-webkit-transform:rotate(180deg);
		transform:rotate(180deg);
		right:0px !important;
		}

	#section_frame .img_slider {
		min-height:620px;
		}
	#section_frame .slider_inner {
		position:absolute;
		}


	/* ------------------------------
	 #section_speed
	------------------------------ */

	/* ------------------------------
		 #section_cornering
	------------------------------ */
	#section_cornering {
		margin-bottom:100px;
		}
	#section_cornering .pex_slider {
		width:880px !important;
		margin-left:auto;
		margin-right:auto;
		}
	#section_cornering .pex_pic {
		width:100%;
		}
	#section_cornering .pex_slider .slider_inner {
		padding-bottom:40px;
		}
	#section_cornering .caption {
		font-size:12px;
		margin:-10px 0 0 0;
		text-align:center;
		}
	#section_cornering h5 {
		margin-top:40px;
		text-align:center;
		}
	#section_cornering .desc {
		font-size: 16px;
		line-height: 1.6em;
		text-align:center;
		}
	/*----------*/
	/* 2018-03 */
	#section_cornering .img_slider {
		min-height:631px;
		}
	#section_cornering .slider_inner {
		position:absolute;
		}


	/* ------------------------------
		 #section_speed_movie
		 #section_cornering_movie
	------------------------------ */
	#section_speed_movie .image_wide p img,
	#section_cornering_movie .image_wide p img {
		width: 100%;
	}



	/* ------------------------------
		 #section_mode_movie
	------------------------------ */
	#section_mode_movie {
		margin-bottom:30px;
		}
	#mode_movie_pc {
		position:relative;
		}
	#mode_movie_pc .mode_movie_pc_list {
		width:100%;
		background:#000;
		}
	#mode_movie_pc .mode_movie_pc_list:before {
		content:'';
		display:block;
		width:100%;
		padding-top:42.4%;
		}
	.mode_movie_pc_item {
		position:absolute;
		top:0;
		width:100%;
		height:100%;
		}

	/* control-bar - hide time delay  */
	#mode_movie_pc .vjs-user-inactive .vjs-control-bar,
	#mode_movie_pc .vjs-user-inactive .vjs-control-bar * {
		transition-delay:0.5s;
		}

	/* play btn - hide */
	.mode_movie_pc_item .init_screen:after {
		display:none;
		}

	/* item - show,hide */
	.mode_movie_pc_item {
		z-index:-100;
		opacity: 0;
		-webkit-transition: z-index 0.9s step-end, opacity 0.9s;
		transition: z-index 0.9s step-end, opacity 0.9s;
		}
	.mode_movie_pc_item.active {
		z-index:0;
		opacity:1;
		-webkit-transition: z-index 0.9s step-start, opacity 0.9s;
		transition: z-index 0.9s step-start, opacity 0.9s;
		}

	/* transition - adjust */
	.mode_movie_pc_item.transition02 {
		-webkit-transition: z-index 0.4s step-end, opacity 0.4s;
		transition: z-index 0.4s step-end, opacity 0.4s;
		}
	.mode_movie_pc_item.transition02.active {
		-webkit-transition: z-index 0.4s step-start, opacity 0.4s;
		transition: z-index 0.4s step-start, opacity 0.4s;
		}
	[data-init-screen] .transition_none {
		-webkit-transition: 0s;
		transition: 0s;
		}

	/* nav */
	.mode_nav_pc {
		background:#000;
		}
	.mode_nav_pc .inner {
		width: 880px;
		margin: 0 auto;
		display:-webkit-flex;
		display:flex;
		-webkit-align-items: center;
		align-items: center;
		position:relative;
		}
	.safari .mode_nav_pc .inner {
		-webkit-font-smoothing: antialiased;
		}
	.mode_nav_pc .title {
		width:176px;
		color:#fff;
		line-height:1.5;
		font-size: 13px;
		position:relative;
		left:10px;
		}
	.mode_nav_pc_list {
		display:-webkit-flex;
		display:flex;
		}
	.mode_nav_pc .movie_play {
		color:#fff;
		width:176px;
		box-sizing:border-box;
		height:100px;
		background-position:left top;
		background-repeat:no-repeat;
		background-size:176px auto;
		white-space: nowrap;
		text-indent: 100%;
		overflow: hidden;
		cursor:pointer;
		border-right:1px solid #605E5F;
		}
	.mode_nav_pc .movie_play:first-of-type{
		border-left:1px solid #605E5F;
		}
	.mode_nav_pc .movie_play:hover,
	.mode_nav_pc .movie_play.select {
		background-color:hsl(0, 0%, 15%);
		transition: background-color 0.15s;
		}
	.mode_nav_pc .btn01 {background-image:url("../image/pic_mode_movie_btn01.png");}
	.mode_nav_pc .btn02 {background-image:url("../image/pic_mode_movie_btn02.png");}
	.mode_nav_pc .btn03 {background-image:url("../image/pic_mode_movie_btn03.png");}
	.mode_nav_pc .btn04 {background-image:url("../image/pic_mode_movie_btn04.png");}

	.mode_nav_pc .movie_play.play {
		background-position:left -100px;
		}
	.mode_nav_pc .movie_play.paused {
		background-position:left -200px;
		}

	/* default control btn - hide */
	#mode_movie_pc .vjs-play-control,
	#mode_movie_pc .vjs-volume-menu-button {
		display:none;
		}

	#section_mode_movie .note {
		font-size:12px;
		line-height:1.5;
		width:880px;
		margin:10px auto 0;
		text-align:right;
		}


	/* ------------------------------
		 .js_video_muted
	------------------------------ */
	.js_video_muted {
		display:inline-block;
		background:url("../image/video_muted_btn.png") left center no-repeat;
		background-size:20px auto;
		line-height:20px;
		padding-left:25px;
		margin-top:6px;
		margin-left:10px;
		cursor:pointer;
		color:#fff;
		font-size: 12px;
		}
	.js_video_muted.muted {
		background-image:url("../image/video_muted_btn_muted.png");
		opacity:0.6;
		}
	.body:before {
		content:url("../image/video_muted_btn_muted.png");
		display:none;
		}

	/* text - default */
	.js_video_muted:after {
		content:"Sound ON";
		font-size: 90%;
		display: inline-block;
		margin-top: 3px;
		}

	/* text - muted */
	.js_video_muted.muted:after {
		content:"Sound OFF";
		font-size: 90%;
		display: inline-block;
		margin-top: 3px;
		}


	/* ------------------------------
		 #section_mode
	------------------------------ */


	/* ------------------------------
		 #section_engine
	------------------------------ */
	#section_engine {
		margin-bottom:60px;
		}
	#section_engine .col_inner {
		height:auto;
		margin:0 0 40px 0px;
		}
	#section_engine .desc {
		font-size:14px;
		line-height: 1.6;
		font-feature-settings: "palt";
		letter-spacing: .05em;
		}


	/* ------------------------------
		 #section_motor
	------------------------------ */
	#section_motor .caption {
		font-size:14px;
		margin:-10px 0 0 0;
		text-align:center;
		}


	/* ------------------------------
		 #section_twin_motor
	------------------------------ */
	#section_twin_motor .pic {
		padding:0 50px;
		}


	/* ------------------------------
		 #section_transmission_movie
	------------------------------ */


	/* ------------------------------
		 #section_transmission_movie
	------------------------------ */


	/* ------------------------------
		 #section_transmission
	------------------------------ */
	#section_transmission .head_title {
		margin-bottom:80px;
		}


	/* ------------------------------
		 #section_chassis
	------------------------------ */
	#section_chassis {
		/*margin-bottom: 0;*/
		padding-bottom:0;
		}
	#section_chassis .pic {
		padding:0 50px;
		}


	/* ------------------------------
		 #section_suspension
	------------------------------ */
	#section_suspension {
		/*margin-bottom: 0;*/
		padding-bottom:0;
		}


	/* ------------------------------
		 #section_dumper
	------------------------------ */
	#section_dumper {
		/*margin-bottom: 0;*/
		padding-bottom:0;
		}


	/* ------------------------------
		 #section_steering
	------------------------------ */
	#section_steering {
		/*margin-bottom: 0;*/
		padding-bottom:0;
		}

	#section_steering .pic {
		padding:0 50px;
		}


	/* ------------------------------
		 #section_brake
	------------------------------ */
	#section_brake {
		/*margin-bottom: 0;*/
		padding-bottom:0;
		}


	/* ------------------------------
		 #section_wheel
	------------------------------ */
	#section_wheel {

		}


	/* ------------------------------
		 #section_body
	------------------------------ */
	#section_body {
		margin-bottom:0;
		padding-bottom:0;
		}
	#section_body .head_title {
		margin-bottom:80px;
		}
	#section_body .col_inner {
		height:auto;
		margin:0 0 40px 0px;
		}
	#section_body .pic {
		padding:0 50px;
		}
	#section_body .pic .caption {
		font-size:12px;
		position:absolute;
		right:50px;
		}


	/* ------------------------------
		 #section_aero
	------------------------------ */
	#section_aero {
		margin-bottom:0;
		padding-bottom:0;
		}
	#section_aero .pic {
		padding:0 50px;
		}
	#section_aero .pic .caption {
		font-size:12px;
		text-align:right;
		}

	/* ------------------------------
		 #section_easiness
	------------------------------ */

	}



/*-----------------------------------------------*/
.spinner {
	width: 28px;
	height: 28px;
	display: block;
	animation: spinner-rotate 0.5s linear infinite;
	}

@keyframes spinner-rotate {
	from {
		transform: rotate(-90deg);
		}
	to {
		transform: rotate(270deg);
		}
	}
.spinner .circle {
	box-sizing: border-box;
	width: 28px;
	height: 14px;
	overflow: hidden;
	}
.spinner .circle2 {
	transform: rotate(180deg);
	}
.spinner .circle .inner {
	box-sizing: border-box;
	transform: rotate(45deg);
	border-radius: 50%;
	border: 4px solid #4d4d4d;
	border-right: 4px solid transparent;
	border-bottom: 4px solid transparent;
	width: 100%;
	height: 200%;
	}
.spinner .circle1 .inner {
	animation: circle1 0.5s cubic-bezier(0.25, 0.1, 0.5, 1) alternate infinite;
	}
.spinner .circle2 .inner {
	animation: circle2 0.5s cubic-bezier(0.25, 0.1, 0.5, 1) alternate infinite;
	}
@keyframes circle1 {
	from {
		transform: rotate(205deg);
		}
	to {
		transform: rotate(60deg);
		}
	}
@keyframes circle2 {
	from {
		transform: rotate(-115deg);
		}
	to {
		transform: rotate(30deg);
		}
	}