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

body {
	-webkit-overflow-scrolling: touch; 
}

.BGscript-fade .bgscript-img {
    position: fixed;
    inset: 0;
    width: 100%; 
	height: 100%; 
	height:100lvh;
	transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
	will-change: opacity; 	
	background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1; 
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--BGanimation-time) ease-out, visibility 0s linear var(--BGanimation-time);
}
.BGscript-f-show>.bgscript-img {
	opacity: 1;
	visibility: visible;
	transition:opacity var(--BGanimation-time) ease-out, visibility 0s;
}
.BGscript-fade {
	list-style: none;
}
.BGscript-fade.BGscript-f-show a {
	position: absolute;
	inset: 0;
	margin:auto;
	height: 40%;
	width: 60%;
	color: transparent;
	background-color: transparent;
	z-index: 2; 
}
.BGscriptFader .BGscript-fade div.caption {
    position: absolute;
	inset: 0;
	margin:auto;
    height: 100%;
	width: calc(85% - 2rem);
	display: flex;
	align-items: center;
	justify-content: center;
    z-index: 1;
    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: translate3d(0, -50%, 0);
	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: translate3d(0%, 200%, 0) scale3d(0, 0, 1);
	opacity:0;
	will-change: transform, opacity;
}
.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: translate3d(0%, 200%, 0) scale3d(0, 0, 1);
	opacity:0; }
	
  100% { 
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  opacity:1;}
}