@charset "UTF-8";

/*.bill-slider　TOPビルボードスライダ */
/*.slider-main　Works メインスライド */
/* .slider-thumb　Works ナビサムネイル */

/* SlickSlider */
.bill-slider {
    margin: 0px auto ;
    width: 100%;
	height:auto;	
}
.bill-slider,
.bill-slider figure,
.bill-slider figure figcaption,
.bill-slider figure figcaption div {
   height: auto;
}
.bill-slider img{
   width:100%;
	overflow: hidden;

	position:relative;
  animation: animationZoom 5s ease-in-out forwards;
}

.bill-slider figure img {
   width:100%;
	height:auto;
	object-fit:container;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}

.bill-slider figure figcaption {
	position:absolute;
	left:0;
	top:0;
	z-index:100;
	width:100%;
	height:auto;
	margin:0;
/*
	background-color:rgba(0,0,0,0.7);
	opacity: 1;
	transition:all 0.8s ease;
*/
	color:#666;
	display:flex;
	justify-content: center;
}
.bill-slider figure:hover figcaption {
　}

.bill-slider figure figcaption div {
	width:90%;
	margin-left:3%;
	position:relative;
}

.bill-slider figure figcaption h3 {
	position:absolute;
	left:0;
	bottom:0;	
	display:inline-block;
	width: 0;
	height:2.5em;
	font-size: 1.6rem;
	font-weight: 700;
	color: #444;
	white-space: nowrap;
	overflow: hidden;
}
.bill-slider figure figcaption h3 span {
	font-size:1.3rem;
	font-weight:600;
}
.slick-active figcaption h3 {
	animation-name: typin;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-duration: 2.5s;
	animation-delay: 0.3s;
}

/*
.bill-slider figure figcaption h3.7w {animation-duration: 3.5s;}
.bill-slider figure figcaption h3.8w {animation-duration: 4s;}
.bill-slider figure figcaption h3.10w {animation-duration: 5s;}
.bill-slider figure figcaption h3.17w {animation-duration: 8.5s;}
.bill-slider figure figcaption h3.16w {animation-duration: 8s;}
.bill-slider figure figcaption h3.5w {animation-duration: 2s;}
.bill-slider figure figcaption h3.12w {animation-duration: 6s;}
.bill-slider figure figcaption h3.24w {animation-duration: 11s;}
.bill-slider figure figcaption h3.2w {animation-duration: 10s;}
*/
@keyframes typin {
  0% {width: 0; opacity:0;}
	30% {opacity:1;}
	100% { width:24em;}
}
.bill-slider .slick-dots li {
    width:20px;/*初期値は20px*/
}



/*slick setting*/
.slick-prev:before,
.slick-next:before {
	color: #fff;
}
.slider p.caption {

}



/* ------------------------------------------
スマホたて　~480px 
------------------------------------------- */
@media screen and (max-width:480px) {
	.bill-slider,
	.bill-slider figure,
	.bill-slider figure figcaption,
	.bill-slider figure figcaption div {
		height: auto;
	}
	.bill-slider figure figcaption h3 {
		font-size:1.4rem;
	}
.bill-slider figure figcaption h3 span {
		font-size:1.2rem;
}
.bill-slider p {
	width:90%;
	margin:0;
	padding:0.3em 0.5em;
	font-size:2rem;
}
.bill-slider .slick-dots {
	padding-top:8px;
	
}
.bill-slider .slick-dots li {
    width:15px;/*初期値は20px*/
}
.slider-main {
	width:90%;
	margin: 0px auto ;
	height:auto;	
}
.slider-main img {
    width:100%;
	height:auto;
	margin-bottom:8px;
}
.slider-main img {
    width:100%;
	height:auto;
	margin-bottom:16px;
	}
}
/* ------------------------------------------
スマホたて　~360px 
------------------------------------------- */
@media screen and (max-width:360px) {
	.bill-slider,
	.bill-slider figure,
	.bill-slider figure figcaption,
	.bill-slider figure figcaption div {
		height: 50vw;
	}
}


/* ------------------------------------------
PC用（721px以上）
------------------------------------------- */
@media screen and (min-width:721px) {
	.bill-slider,
	.bill-slider figure,
	.bill-slider figure figcaption,
	.bill-slider figure figcaption div {
		height: 44vw;
	}
	.bill-slider figure figcaption h3 {
		font-size:1.6rem;
	}
.bill-slider figure figcaption h3 span {
		font-size:1.2rem;
}


	.slider-thumb {

	 }

	.slider-thumb li  {
		width:100%;
		height:100%;
		cursor:pointer;
		position:relative;
	}
	
	.slider-thumb li img {
		width:98%;
		height:8vw;
		margin-left:2%;
		object-fit: cover;
	}
.slick-slide {
  transition: .3s ease;
}
.slick-slide:not(.slick-current) {
  opacity: .5;
}

	/*slick setting*/
	.slick-prev:before,
	.slick-next:before {
	color: #666;
	}
	.slick-prev{
		left: -30px;
	}
	.slick-next{
		right: -30px;
	}


}
/* ------------------------------------------
PC用（961px以上）
------------------------------------------- */
@media screen and (min-width:961px) {

	.bill-slider,
	.bill-slider figure,
	.bill-slider figure figcaption,
	.bill-slider figure figcaption div {
		height: auto;
	}
	.bill-slider figure figcaption h3 {
		font-size:1.7rem;
	}
.bill-slider figure figcaption h3 span {
		font-size:1.3rem;
	}

}

/* ------------------------------------------
PC用（1201px以上）
------------------------------------------- */
@media screen and (min-width:1201px) {
	.bill-slider,
	.bill-slider figure,
	.bill-slider figure figcaption,
	.bill-slider figure figcaption div {
		height: auto;
	}

}

/* ------------------------------------------
PC用（1601px以上）
------------------------------------------- 
@media screen and (min-width:1601px) {

	.bill-slider,
	.bill-slider figure,
	.bill-slider figure figcaption,
	.bill-slider figure figcaption div {
		width:1600px;
		height:auto;
	}
	.bill-slider figure figcaption div {
		width:1440px;
		height:auto;
	}
	.bill-slider figure img {
  	 width:100%;
	height:auto;
	}

}
*/