@charset "UTF-8";
@import url(st-common.css);

.top-title {
	position: absolute;
	font-size: 5.0rem;
	font-weight: bold;
	text-shadow : 3px 3px 3px #fff ;
	z-index: 2;
	left: 13%;
	top:10.0rem;
}
.top-txt {
	position: absolute;
	font-size: 1.8rem;
	font-weight: normal;
	z-index: 2;
	left: 18%;
	top:15vh;
	width: 42%;
}
@media screen and (max-width:1550px) {
/*	.top-title {
	font-size: 4.0rem;
	text-shadow : 3px 3px 3px #fff ;
	left: 8%;
	top:2vh;*/
}
.top-txt {
	position: absolute;
	font-size: 1.5rem;
	font-weight: normal;
	z-index: 2;
	left: 8%;
	top:10vh;
	width: 50%;
}
}
@media screen and (max-width:1024px) {
	.top-title {
	font-size: 2.8rem;
	text-shadow : 2px 2px 2px #fff ;
	left: 5%;
	top:1.5vh;
}
	.top-txt {
	position: absolute;
	font-size: 1.5rem;
	font-weight: normal;
	z-index: 2;
	left: 5%;
	top:7vh;
	width: 55%;
}
}
@media screen and (max-width:767px) {
	.top-title {
	font-size: 3.2rem;
	left: 5%;
	top:2.5vh;
}
	.top-txt {
	font-size: 1.8rem;
	left: 5%;
	width: 90%;
		top:10vh;
}
}

/* variables
----------------------------------------------------*/
/* fx
----------------------------------------------------*/
.fx−bright {
  opacity: 0;
  transition: opacity;
  transition-delay: 0.5s;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.inview .fx−bright {
  opacity: 1;
  animation: bright 1s 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
@keyframes bright {
  0% {
    filter: brightness(1000%) blur(50px);
  }
  100% {
    filter: brightness(100%) blur(0);
  }
}
.fx−bright2 {
  opacity: 0;
  transform: translateY(20%) perspective(600px) rotateY(15deg);
  transition: opacity transform;
  transition-delay: 1.5s;
  transition-duration: 1.5s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.inview .fx−bright2 {
  opacity: 1;
  transform: translateY(0) perspective(600px) rotateY(0deg) skewX(0);
  animation: bright2 1.5s 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
@keyframes bright2 {
  0% {
    filter: brightness(1000%) blur(50px);
  }
  100% {
    filter: brightness(100%) blur(0);
  }
}
.inview .fx-flip {
  animation-name: flip;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0;
}
@keyframes flip {
  from {
    transform: perspective(600px) rotateY(15deg) skewX(10deg);
    filter: brightness(1000%) blur(50px);
    opacity: 0;
  }
  to {
    transform: perspective(600px) rotateY(0deg) skewX(0);
    filter: brightness(100%) blur(0);
    opacity: 1;
  }
}
.slidein {
  opacity: 0;
  transform: translateY(20%);
  transition: opacity transform;
  transition-delay: 0.7s;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.slidein.inview {
  opacity: 1;
  transform: translateY(0);
}

/* hero
----------------------------------------------------*/
#hero {
  position: relative;
  width: 100%;
  height: 20vw!important;
  overflow: hidden;
	margin-top: 70px;
}
@media only screen and (max-width: 1150px) {
  #hero {
    height: 32vw;
  }
}
@media only screen and (max-width: 767px) {
  #hero {
    height: 130vw;
	  	margin-top: 50px;
  }
}
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.hero-bg img {
  width: 100%;
  max-width: inherit;
}
.hero-img {
  position: relative;
  margin: 0;
}
.hero-img-inner {

}
@media only screen and (max-width: 767px) {
  .hero-img {
    margin: 60px auto 0;
  }
}
.hero-img.fx-bright {
  transition-delay: 2s !important;
}
#box1 {
/*  margin-top: -70px;*/
/*	  margin-top: 70px;*/
/*  height: 600px;*/
	padding: 0 30px;
}
.box1sp {
	margin-top: -150px;
}
@media only screen and (max-width: 767px) {
  #box1 {
    margin-top: 0;
    height: auto;
  }
}
#box1 .media-inner {
  -ms-flex-align: center;
  align-items: center;
}
#box1 .media-img {
  box-shadow: none;
  opacity: 0;
}
@media only screen and (max-width: 767px) {
  #box1 .media-img {
    margin: 0 auto;
  }
}
#box1 .media-body {
  width: 500px;
}
@media only screen and (max-width: 767px) {
  #box1 .media-body {
    width: 80vw;
  }
}
@media print {
#hero {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
	margin-top: 70px;
}
}