@charset "UTF-8"; 
@import url(frontend.setting.css);

.BGscript-fade .bgscript-img {
	position: fixed;
	top:0;
	left:0;
	height: 100%;
	width: 100%;
	color: transparent;
	background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
	-webkit-backface-visibility: hidden;
	z-index: -1; 
    opacity: 0;
    visibility: hidden;
	transition: all var(--BGanimation-time) ease-out;
}
.BGscript-f-show>.bgscript-img {
	opacity: 1;
	visibility: visible;
}
.BGscript-fade {
	list-style: none;
}
.BGscript-fade.BGscript-f-show a {
	position: absolute;
	top:0rem; right:0; bottom:0; left:0;
	margin:auto;
	height: 40%;
	width: 60%;
	color: transparent;
	background-color: transparent;
	z-index: 2; 
}
.BGscriptFader .BGscript-fade div.caption {
    position: absolute;
	top:0rem; right:0; bottom:0; left:0;
	margin:auto;
    height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
    z-index: 1;
    width: calc(85% - 2rem);
    text-align: center;
}
.BGscript-f-show>div.caption {
	z-index: 1;
	opacity: 1;
	visibility: visible;
}
.BGscriptFader .BGscript-fade .caption > span.caption-text {
	display:inline-block;
	padding:.6rem .6rem;
	font-size: 1rem;
	line-height: 1.5rem;
	background: var(--caption-text-bg, rgba(53,60,64,.9));
	color:#fff;
	border-radius:5px;	
	box-shadow: -3px 3px 6px 0px rgba(0,0,0,.7);
}
.BGscript-fade:first-child .bgscript-img,
.BGscript-fade:first-child div.caption {
	opacity: 1;
	visibility: visible;
}
@media screen and (min-width:576px) {
.BGscriptFader .BGscript-fade div.caption {width: calc(80% - 2rem);}
.BGscriptFader .BGscript-fade .caption > span.caption-text {padding:.8rem .8rem;font-size: 1.05rem;line-height: 1.65rem;}
}
@media screen and (min-width:768px) {.BGscriptFader .BGscript-fade div.caption {width: calc(70% - 2rem);}}
@media screen and (min-width:992px) {.BGscriptFader .BGscript-fade div.caption {width: calc(60% - 2rem);}}
@media screen and (min-width:1024px) {.BGscriptFader .BGscript-fade div.caption {width: calc(50% - 2rem);}}
.BGscript-f-controls #prev,
.BGscript-f-controls #next{
	display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
	height: 1.8rem;
    width: 1.8rem;
	webkit-appearance: none;
	background: transparent;
	border:none;
	background-size: 100%;
	background-position: 10% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: .6;
	transition: opacity ease .5s;
	z-index:2;
}
.BGscript-f-controls #prev:hover,
.BGscript-f-controls #next:hover {
    opacity: .9;
}
.BGscript-f-controls #prev{
    left: .5rem;
	background-image: url('../img/prev.svg');
}
.BGscript-f-controls #next{
    right: .5rem;
	background-image: url('../img/next.svg');
}
.BGscript-f-controls #prev, .BGscript-f-controls #next {
	font-weight:bold;
	-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}

/* Text */
.BGscriptFader .BGscript-fade div.caption > span.caption-text{
	transform: translate(0%, 200%) scale(0, 0);
	opacity:0;
}
.BGscriptFader .BGscript-fade.BGscript-f-show div.caption > span.caption-text{
	animation: BGscriptSliderTextani var(--BGanimation-time) var(--BGfader-delay) forwards ease-out;
}

/**/
.BGscriptFader:not(.is-running)
.BGscript-fade.BGscript-f-show
div.caption > span.caption-text {
    animation: none;
}

 @keyframes BGscriptSliderTextani {
	0% {
	transform: translate(0%, 200%) scale(0, 0);
	opacity:0; }
	
  100% { 
  transform: translate(0, 0) scale(1, 1);
  opacity:1;}
}