/*----------------------------------------------------------------------------*/
/* 	プレサンスロジェ名護為又ヴォール　サイト	First View 				  CSS    */
/*----------------------------------------------------------------------------*/

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

	#fview .campaign {
		position: absolute;
	}
	#fview .campaign img {
		width: 100%;
		height: auto;
		animation: campaignIcon 5s ease-out 0s infinite;
	}
	@keyframes campaignIcon {
		0% {
			transform: rotateY(0);
		}
		4% {
			transform: rotateY(180deg);
		}
		8% {
			transform: rotateY(0);
		}
	}
	#fview #viewerSP .campaign {
		right: 5%;
		bottom: 5%;
		width: 56vw;
		max-width: 220px;
	}
	#fview #viewerPC .campaign {
		right: 4%;
		bottom: 30%;
		width: 30vw;
		max-width: 400px;
	}

	#fview .catchphrase {
		position: absolute;
		padding: .2em 1em;
	    background-color: #FF2865;
	    color: #FFF;
		font-weight: bold;
	    line-height: 1.2;
	    text-align: center;
	}
	#fview #viewerSP .catchphrase {
		top: 28%;
		left: 5%;
		font-size: 1.2rem;
	}
	#fview #viewerPC .catchphrase {
		top: 45%;
		left: 5%;
		font-size: 2rem;
	}

	/* ☆ 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 .scline {	/* ScroollDown Line */
		position:absolute;
		bottom:0;
		right:0;
		width:100%;
		height: 90px;
		z-index:6;
		position:relative;
	}
	.viewer #guide01 li .scline .scrolldown a {		/* ScroolDown */
		display:block;
		position:absolute;
		bottom:0;
		right:5%;
		margin: 0  20px 0 auto;
		width:200px;
		height: 70px;
		color: #FFF;
		font-size:13px;
		text-align:center;
		padding-top:0px;
		border-right:1px solid #F5F5F5;
		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 .scline .sdtxt {
		position:absolute;
		bottom:60px;
		right:120px;
		color: #F5F5F5;
		font-size:13px;
		text-align:center;
		letter-spacing: 0.10em;
		padding-top:0px;
	}
	.viewer #guide01 li .scline .scrolldown a.scrolldown-ex {
		border-right:1px solid #FFF;
	}

	.viewer #guide01 li.fview01 {		/* ■ PC FView #01 ★ */
		margin: 0  auto 0 auto;
		width:100%;
/*		width:100vw;*/
		height:925px;
		background	: url("../images/fview/fvbg01.png") no-repeat;
		background-size:cover;
		background-position: center top 0;
	}
	.viewer #guide01 li.fview01 .ccb-logo {
		position:absolute;
		top:170px;
		left: 10%;
		width:292px;
		height: 230px;
	}
	.viewer #guide02 li.fview01 .ccb-logo img {
		display:block;
		margin: 0  auto 0 auto;
	}
	.viewer #guide01 li.fview01 dl.box01 {
		position:absolute;
		top:110px;
		left: 45%;
		width:202px;
		height: 520px;
		z-index:8;
		background	: url("../images/fview/fvtxt01.png") no-repeat;
		background-size:202px 505px;
		background-position:top 0 center;
	}
	.viewer #guide01 li.fview01 dt {
		display: block;
		text-indent: -99999px;	/* テキスト非表示 */
	}
	.viewer #guide01 li.fview01 dt img {
		display: block;
		zoom:1.0;
	}
	.viewer #guide01 li.fview01 dl.box01 dd.fv-hline  {	/* FV H-line */
		display:block;
		position:absolute;
		top:160px;
		left:0;
		width:40%;
		height: 5px;
		padding-top:0;
		border-top:1px solid #FFF;
		transform: scaleX(0);		/* 縦 borderline 伸縮 animation　★ */
		transform-origin:left;
	 	animation : extend-x 0.8s linear 0.0s infinite alternate none running;
	 	animation : extend-x 1.8s linear 0.0s infinite normal none running;
	}
	@keyframes extend-x{
		0%{
			transform: scaleX(0);
		}
		 100%{
			  transform: scaleX(1);
		 }
	}
	.viewer #guide01 li.fview01 .scline {	/* ScroollDown Line */
		position:absolute;
		bottom:20%;
		right:0;
		width:100%;
	}
	.viewer #guide01 li.fview01 .fv-hline  {	/* FV H-line */
		display:block;
		margin: 30px  60% 0 auto;
		width:34%;
		height: 30px;
		padding-top:30px;
		border-top:10px solid #FFF000;		/* RD-yellow */
		transform: scaleX(0);		/* 縦 borderline 伸縮 animation　★ */
		transform-origin:left;
	 	animation : extend-x 0.8s linear 0.0s infinite alternate none running;
	 	animation : extend-x 1.8s linear 0.0s infinite normal none running;
		z-index:7;
	}
	@keyframes extend-x{
		0%{
			transform: scaleX(0);
		}
		 100%{
			  transform: scaleX(1);
		 }
	}

	.viewer #guide02 li {		/* ■ SP  ----------------------------*/
		display:block;
		margin: 0 auto 0 auto;
		width:100%;
		height:800px;
		background-color:#FFF;
		position:relative;
	}
	.viewer #guide02 li.fview01 {		/* ■ SP FView #01 */
		margin: 0  auto 0 auto;
		width:100%;
		height:500px;
		height:640px;
		background	: url("../images/fview/fvbg01.png") no-repeat;
		background-size:cover;
		background-position: center top 0;
	}
	.viewer #guide02 li.fview01 .ccb-logo {
		position:absolute;
		top:60px;
		left: 10%;
		width:146px;
		height: 115px;
	}
	.viewer #guide02 li.fview01 .ccb-logo img {
		display:block;
		margin: 0  auto 0 auto;
		zoom:0.5;
	}
	.viewer #guide02 li.fview01 dl.box01 {
		position:absolute;
		top:50px;
		right:5%;
		width:40%;
		height: 354px;
		text-align:center;
		z-index:8;
		background	: url("../images/fview/fvtxt01.png") no-repeat;
		background-size:202px 505px;
		background-size:141px 354px;	/* 70% */
		background-position:top 0 center;
	}
	.viewer #guide02 li.fview01 dt {
		display: block;
		text-indent: -99999px;	/* テキスト非表示 */
	}
	.viewer #guide02 li.fview01 dt img {
		display: block;
		zoom:0.7;
	}
	.viewer #guide02 li.fview01 dl.box01 dd.fv-hline  {	/* FV H-line */
		display:block;
		position:absolute;
		top:130px;
		top:63%;
		left:0;
		width:80%;
		height: 5px;
		padding-top:0;
		border-top:1px solid #FFF;
		transform: scaleX(0);		/* 縦 borderline 伸縮 animation　★ */
		transform-origin:left;
	 	animation : extend-x 0.8s linear 0.0s infinite alternate none running;
	 	animation : extend-x 1.8s linear 0.0s infinite normal none running;
	}
	@keyframes extend-x{
		0%{
			transform: scaleX(0);
		}
		 100%{
			  transform: scaleX(1);
		 }
	}


	.viewer #guide02 li.fview01 .contact-btn  {	/*COTACT button */
		display: block;
		margin: 120px auto 0 auto;
		z-index:9;
	}
	.viewer #guide02 li.fview01 .contact-btn a {
		display: block;
		margin: 0 auto 0 auto;
		width : 280px;
		width : 200px;
		color:white;
		font-size:15px;
		text-align:center;
		padding-top:15px;
		padding-bottom:15px;
		background	: url("../images/icon/btn-arrow01.png") no-repeat;
		background-size:29px 8px;
		background-position: -2px 17px;
		background-color:rgba( 218,84,52,1.0 ); 	/* LD-red01 */
	}
	.viewer #guide01 li.fview01 .contact-btn a:hover {
		display: block;
		color:#F5F5F5;
		background	: url("../images/icon/btn-arrow01.png") no-repeat;
		background-size:29px 8px;
		background-position: 250px  22px;
		background-color:rgba( 218,84,52,0.5 ); 	/* LD-red01 */
	}

	.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-bottom:50px;
			background-color: #F5F5F5;
			background-color: transparent;
			border:none;
			padding-top:90px;
			padding-top:0;
		}
		#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;
		}
		#viewerPC {
			display:none;
		}
		#viewerSP{
			display:block;
		}
		#fview {
			display:block;
			margin: 0  auto 0 auto;
			width: 100%;
			padding-bottom:0px;
			background-color: #F5F5F5;
			background-color: transparent;
			border:none;
			padding-top:70px;
		}

	}

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