/* ========== css/keyv.css ========== */
/*----------------------------------------------------------------------------*/
/* 	三咲モータースサイト	 Keyvisual						 		  CSS    */
/*----------------------------------------------------------------------------*/

	/* ☆ KeyVisual Image Area --------------*/
	#fview {	
		display:block;
		margin: 0  auto 0 auto;
		width: 100%;
		padding-top:35px;
		padding-bottom:30px;
		border-bottom:none;
		border:none;
	}
	.viewer{
		margin: 0  auto 0 auto;
		border:none;
	}
	#viewerSP{
		display:block;
		margin: 30px  auto 0 auto;
	}
	#viewerPC {
		display:none;
	}

	/* ☆ KeyVisual Image Block ------------*/

	.viewer #guide01 li {		/* ■ PC  -----------------*/
		display:block;
		margin: 0  auto 0 auto;
		width:100%;
		height:650px;
		position:relative;
	}
	.viewer dl,dt,dd {
		display:block;
	}

	.viewer #guide01 li.fview01 {		/* ■ PC FView #01 */
		margin: 0  auto 0 auto;
		width:100%;
		height:650px;
		background	: url("../images/fview/fview01.png") no-repeat;
		/* WebP版があれば優先（対応外ブラウザは上のPNGにフォールバック） */
		background-image: image-set(url("../images/fview/fview01.webp") type("image/webp"),
		                            url("../images/fview/fview01.png") type("image/png"));
		background-size: cover;
		background-position: center top 0; 
		background-color:#F5F5F5;
	}
	.viewer #guide01  li.fview01 .vox01 {		/* PC VOX01 ◆  */
		position:absolute;
		top:15%;
		left: 10%;
		width:500px;
		height: 400px;
	}
	.viewer #guide01  li.fview01 .vox01 dt {
		display:block;
		margin: 0 auto 0 auto;
		width:100%;
		height: 100px;
		text-indent: -99999px;	/* テキスト非表示 */
		background	: url("../images/fview/fv01txt01.png") no-repeat;
		background-size:448px 87px;
		background-position:center center;
	}
	.viewer #guide01  li.fview01 .vox01 dd.txt01 {
		margin: 30px auto 0 auto;
		width:85%;
		font-size:32px;
		line-height:2.0em;
		font-family: "Noto Sans JP";
		font-weight: 700;
		color: #FFF;
	}
	.viewer #guide01  li.fview01 .vox01 dd.txt01 .txtex {
		font-size:40px;
		color: #FFF;
	}
	 .viewer #guide01  li.fview01 .vox01 dd.fv-hline  {	/* FV H-line */
		margin: 30px auto 0 auto;
		width:100%;
		height: 3px;
		border-top:2px solid #3CB400;		/* sec-green01 */
		border-top:2px solid var(--mmts-brand);		/* mmts-red01 */
		transform: scaleX(0);		/* 縦 borderline 伸縮 animation　★ */
		transform-origin:left;
	 	animation : extend-x 0.8s linear 0.0s infinite alternate none running;
	 	animation : extend-x 2.8s linear 0.0s infinite normal none running;
	}
	@keyframes extend-x{
		0%{
			transform: scaleX(0);
		}
		 100%{
			  transform: scaleX(1);
		 }
	}

	.viewer #guide01 li.fview01 .scbox {		/* ScroollDown BOX */
		display:block;
		position:absolute;
		top:77%;
		left:93%;
		width:150px;
		height: 70px;
		z-index:7;
		position:relative;
	}

	.viewer #guide01 li.fview02 {		/* ■ PC FView #02 */
		margin: 0  auto 0 auto;
		width:100%;
		height:650px;
		background	: url("../images/fview/fview02.png") no-repeat;
		/* WebP版があれば優先（対応外ブラウザは上のPNGにフォールバック） */
		background-image: image-set(url("../images/fview/fview02.webp") type("image/webp"),
		                            url("../images/fview/fview02.png") type("image/png"));
		background-size: cover;
		background-position: center top 0; 
		background-color:var(--mmts-brand);		/* mmts-red01 */
	}

	.viewer #guide01  li.fview02 .vox01 {		/* PC VOX01 ◆  */
		position:absolute;
		top:15%;
		left: 10%;
		width:500px;
		height: 400px;
	}
	.viewer #guide01  li.fview02 .vox01 dt {
		display:block;
		margin: 0 auto 0 auto;
		width:100%;
		height: 100px;
		text-indent: -99999px;	/* テキスト非表示 */
		background	: url("../images/fview/fv01txt01.png") no-repeat;
		background-size:448px 87px;
		background-position:center center;
	}
	.viewer #guide01  li.fview02 .vox01 dd.txt01 {
		margin: 30px auto 0 auto;
		width:85%;
		font-size:32px;
		line-height:2.0em;
		font-family: "Noto Sans JP";
		font-weight: 700;
		color: #FFF;
	}
	.viewer #guide01  li.fview02 .vox01 dd.txt01 .txtex {
		font-size:40px;
		color: #FFF;
	}
	 .viewer #guide01  li.fview02 .vox01 dd.fv-hline  {	/* FV H-line */
		margin: 30px auto 0 auto;
		width:100%;
		height: 3px;
		border-top:2px solid #3CB400;		/* sec-green01 */
		border-top:2px solid var(--mmts-brand);		/* mmts-red01 */
		transform: scaleX(0);		/* 縦 borderline 伸縮 animation　★ */
		transform-origin:left;
	 	animation : extend-x 0.8s linear 0.0s infinite alternate none running;
	 	animation : extend-x 2.8s linear 0.0s infinite normal none running;
	}
	@keyframes extend-x{
		0%{
			transform: scaleX(0);
		}
		 100%{
			  transform: scaleX(1);
		 }
	}

	.viewer #guide01 li.fview02 .scbox {		/* ScroollDown BOX */
		display:block;
		position:absolute;
		top:77%;
		left:93%;
		width:150px;
		height: 70px;
		z-index:7;
		position:relative;
	}

	.viewer #guide01 li .scbox .scrolldown01 a {		/* ScroolDown */
		display:block;
		position:absolute;
		bottom:0px;
		right:50px;
		width:130px;
		height: 60px;
		color: #BDC3C7;		/* Siver */ 
		font-size:13px;
		text-align:center;
		padding-top:0px; 
		border-right:1px solid #FFF;
		z-index:7;
		transform: scaleY(0);			/* 縦 borderline 伸縮 animation　★ */
		transform-origin: top;
	 	animation : extend-y 0.8s linear 0.0s infinite alternate none running;
	 	animation : extend-y 1.5s linear 0.0s infinite normal none running;
	}
	.viewer #guide01 li .scbox .scrolldown02 a {		/* ScroolDown */
		display:block;
		position:absolute;
		bottom:0px;
		right:50px;
		width:130px;
		height: 60px;
		color: #FFF; 
		font-size:13px;
		text-align:center;
		padding-top:0px; 
		border-right:1px solid #BDC3C7;		/* Siver */
		z-index:7;
		transform: scaleY(0);			/* 縦 borderline 伸縮 animation　★ */
		transform-origin: top;
	 	animation : extend-y 0.8s linear 0.0s infinite alternate none running;
	 	animation : extend-y 1.5s linear 0.0s infinite normal none running;
	}
	@keyframes extend-y{
		0%{
			transform: scaleY(0);
		}
		 100%{
			  transform: scaleY(1);
		 }
	}
	.viewer #guide01 li .scbox .sdtxt01 {
		position:absolute;
		top:10px;
		right:35px;
		width:100%;
		color: #FFF;
		font-size:13px;
		text-align:center;
		padding-top:0px; 
	}
	.viewer #guide01 li .scbox .sdtxt02 {
		position:absolute;
		top:10px;
		right:40px;
		width:100%;
		color: #777;
		font-size:12px;
		text-align:center;
		padding-top:0px; 
	}

	.viewer #guide01  li .vox02 {		/* PC VOX02 ◆  */
		position:absolute;
		top:67%;
		right: 8%;
		width:400px;
		height: 100px;
		text-indent: -99999px;	/* テキスト非表示 */
		background	: url("../images/fview/fv01txt03.png") no-repeat;
		background-size:385px 81px;
		background-position:center center;
	}


	@media only screen and (min-width: 993px) and (max-width: 1400px) {	/*◇ PC-S */

		.viewer #guide01 li.fview01 {		/* ■ PC FView #01 */
			margin: 0  auto 0 auto;
			width:100%;
			height:550px;
			background	: url("../images/fview/fview01.png") no-repeat;
			/* WebP版があれば優先（対応外ブラウザは上のPNGにフォールバック） */
			background-image: image-set(url("../images/fview/fview01.webp") type("image/webp"),
			                            url("../images/fview/fview01.png") type("image/png"));
			background-size: cover;
			background-position: center top 0; 
			background-color:var(--mmts-brand);		/* mmts-red01 */
		}
		.viewer #guide01 li.fview02 {		/* ■ PC FView #02 */
			margin: 0  auto 0 auto;
			width:100%;
			height:550px;
			background	: url("../images/fview/fview02.png") no-repeat;
			/* WebP版があれば優先（対応外ブラウザは上のPNGにフォールバック） */
			background-image: image-set(url("../images/fview/fview02.webp") type("image/webp"),
			                            url("../images/fview/fview02.png") type("image/png"));
			background-size: cover;
			background-position: center top 0; 
			background-color:var(--mmts-brand);		/* mmts-red01 */
		}

	}

	.viewer #guide02 li {		/* ■ SP  ----------------------------*/
		display:block;
		margin: 0 auto 0 auto;
		width:100%;
		height:450px;
		position:relative;
	}
	.viewer #guide02 li.fview01 {		/* ■ SP FView #01 */
		margin: 0  auto 0 auto;
		width:100%;
		height:435px;
		background	: url("../images/fview/fview01_sp.png") no-repeat;
		/* WebP版があれば優先（対応外ブラウザは上のPNGにフォールバック） */
		background-image: image-set(url("../images/fview/fview01_sp.webp") type("image/webp"),
		                            url("../images/fview/fview01_sp.png") type("image/png"));
		background-size:contain;
		background-position: center bottom 0; 
		background-color: #F5F5F5;
		position:relative;
	}
	.viewer #guide02 li.fview01 dl.vox01 {
		position:absolute;
		top:17%;
		left: 5%;
		width:270px;
		height: 300px;
	}
	.viewer #guide02 li.fview01 dl.vox01 dt {
		display:block;
		margin: 0 auto 0 auto;
		width:100%;
		height: 60px;
		text-indent: -99999px;	/* テキスト非表示 */
		background	: url("../images/fview/fv01txt01.png") no-repeat;
		background-size:448px 87px;
		background-size:224px 44px;
		background-position:center center;
	}
	.viewer #guide02  li.fview01 dl.vox01 dd.txt01 {
		margin: 15px auto 0 auto;
		width:90%;
		font-size:13px;
		line-height:2.0em;
		font-weight:bold;
		color: #FFF;
	}
	.viewer #guide02  li.fview01 .vox01 dd.txt01 .txtex {
		font-size:15px;
		color: #FFF;
	}
	 .viewer #guide02  li.fview01 .vox01 dd.fv-hline  {	/* FV H-line */
		margin: 10px auto 0 auto;
		width:90%;
		height: 1px;
		border-top:2px solid var(--mmts-brand);		/* mmts-red01 */
		transform: scaleX(0);		/* 縦 borderline 伸縮 animation　★ */
		transform-origin:left;
	 	animation : extend-x 0.8s linear 0.0s infinite alternate none running;
	 	animation : extend-x 2.8s linear 0.0s infinite normal none running;
	}
	@keyframes extend-x{
		0%{
			transform: scaleX(0);
		}
		 100%{
			  transform: scaleX(1);
		 }
	}
	.viewer #guide02 li.fview02 {		/* ■ SP FView #02 */
		margin: 0  auto 0 auto;
		width:100%;
		height:435px;
		background	: url("../images/fview/fview02_sp.png") no-repeat;
		/* WebP版があれば優先（対応外ブラウザは上のPNGにフォールバック） */
		background-image: image-set(url("../images/fview/fview02_sp.webp") type("image/webp"),
		                            url("../images/fview/fview02_sp.png") type("image/png"));
		background-size:contain;
		background-position: center bottom 0; 
		background-color: #F5F5F5;
		position:relative;
	}
	.viewer #guide02 li.fview02 dl.vox01 {
		position:absolute;
		top:17%;
		left: 5%;
		width:270px;
		height: 300px;
	}
	.viewer #guide02 li.fview02 dl.vox01 dt {
		display:block;
		margin: 0 auto 0 auto;
		width:100%;
		height: 60px;
		text-indent: -99999px;	/* テキスト非表示 */
		background	: url("../images/fview/fv01txt01.png") no-repeat;
		background-size:448px 87px;
		background-size:224px 44px;
		background-position:center center;
	}
	.viewer #guide02  li.fview02 .vox01 dd.txt01 {
		margin: 15px auto 0 auto;
		width:90%;
		font-size:13px;
		line-height:2.0em;
		font-weight:bold;
		color: #FFF;
	}
	.viewer #guide02  li.fview02 .vox01 dd.txt01 .txtex {
		font-size:15px;
		color: #FFF;
	}
	 .viewer #guide02  li.fview02 .vox01 dd.fv-hline  {	/* FV H-line */
		margin: 10px auto 0 auto;
		width:90%;
		height: 1px;
		border-top:2px solid var(--mmts-brand);		/* mmts-red01 */
		transform: scaleX(0);		/* 縦 borderline 伸縮 animation　★ */
		transform-origin:left;
	 	animation : extend-x 0.8s linear 0.0s infinite alternate none running;
	 	animation : extend-x 2.8s linear 0.0s infinite normal none running;
	}
	@keyframes extend-x{
		0%{
			transform: scaleX(0);
		}
		 100%{
			  transform: scaleX(1);
		 }
	}

	.bx-wrapper .bx-prev {
		background-image:none;
	}
	.bx-wrapper .bx-next {
		background-image:none;
	}
	#viewerSP .text01sp {
		padding-top: 3px;
		padding-bottom: 15px;
		padding-left: 5%;
		width:90%;
		text-align:left;
		font-size:12.5px;
		font-weight:bold;
		color: #27AE60;		/* F.Green */
	}

	@media only screen and  (max-width: 360px) {

	}

	@media only screen and (min-width: 768px) {

		#fview {	
			display:block;
			margin: 0  auto 0 auto;
			width: 100%;
			padding-top:0;
			padding-bottom:55px;
			background-color: transparent;
			border:none;
			padding-top:0;
			padding-top:70px;	/* ■0312 →　0px */
			background	: none repeat-y; /* ← 存在しないファイル。宣言を消すと隠れていた背景が出てしまうため none に置換（404回避のみ） */
			background-size:1600px 5px;
			background-size:contain;
			position: relative;
		}
		#viewerPC {
			display:block;
		}
		#viewerSP{
			display:none;
		}
		#viewerSP guide02.bxslider {
			display:none;
		}

	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		#wrapper {
			margin-top: 0;
		}
		#fview {	
			display:block;
			margin: 0  auto 0 auto;
			width: 100%;
			padding-bottom:30px;
			background-color: transparent;
			border:none;
			padding-top:60px;
			position: relative;
		}
		#viewerPC {
			display:block;
		}
		#viewerSP{
			display:none;
			margin: 0  auto 0 auto;
		}
		.viewer #guide01  li.fview01 .vox01 dd.txt01 {
			margin: 20px auto 0 auto;
			width:85%;
			font-size:24px;
			line-height:1.8em;
		}
		.viewer #guide01  li.fview01 .vox01 dd.txt01 .txtex {
			font-size:30px;
		}
		.viewer #guide01  li.fview02 .vox01 dd.txt01 {
			margin: 20px auto 0 auto;
			width:85%;
			font-size:24px;
			line-height:1.8em;
		}
		.viewer #guide01  li.fview02 .vox01 dd.txt01 .txtex {
			font-size:30px;
		}
		.viewer #guide01 li.fview01 .scbox {		/* ScroollDown BOX */
			display:none;
		}
		.viewer #guide01 li.fview02 .scbox {		/* ScroollDown BOX */
			display:none;
		}

	}
	.bx-wrapper .bx-prev {	/* < FV削除 */
			display:none;
	}
	.bx-wrapper .bx-next {	/* > FV削除 */
			display:none;
	}

	.cat .prev {
		display:none;
	}
	.cat  .next {
		display:none;
	}
	.slick-arrow {
	    display: none;
	}