@charset "UTF-8";

.hero{
    position:relative;
    height: 800px;
    overflow: hidden;
}
.hero-bg-roll{position: absolute;width: 100%;height: 100%;display: grid;grid-template-columns: 100%;grid-template-rows: repeat(4,1fr);opacity: 0.1;left: 0;top: 0;}

.hero-bg-roll__01,
.hero-bg-roll__02,
.hero-bg-roll__03,
.hero-bg-roll__04{
    width: 100%;
    background-size: auto 100%;
    background-position: 1410%;
}
.hero-bg-roll__01{
    background-image: url(../images/hero/photo_roll01.png);
}
.hero-bg-roll__02{
    background-image: url(../images/hero/photo_roll02.png);
}
.hero-bg-roll__03{
    background-image: url(../images/hero/photo_roll03.png);
}
.hero-bg-roll__04{
    background-image: url(../images/hero/photo_roll04.png);
}
.hero-orn1,.hero-orn2{
    position: absolute;
    width: 50%;
    max-width:630px;
}
.hero-orn1{left: 0;top: 0;}
.hero-orn2{right: 0;bottom: 0;}
.hero-inner{
    max-width:1280px;
    margin:0 auto;
    position:relative;
    height: 100%;
}
.hero-header{
    position: absolute;
    top: 0.6em;
    right: 0.6em;
    width: 50%;
    max-width: 250px;
}
.hero-logo{
  position: absolute;
  top: 50%;
  left: 48.5%;
  transform: translate(-50%,-50%);
  width: 70%;
}
.hero-bottom{position: absolute;bottom: 2%;left: 50%;transform: translateX(-50%);display: flex;flex-direction: column;align-items: center;gap: 0.5em;}
.hero-bottom-text{
}
.hero-bottom-scroll{animation: hero-bottom-scroll 1s infinite;}

@keyframes hero-bottom-scroll{
    0%,100%{transform:translateY(0em)}
    50%{transform:translateY(0.4em)}
}




@media screen and (max-width: 767px) {
.hero{
    height: 86vh;
}
.hero-bg-roll{}
.hero-bg-roll__01,
.hero-bg-roll__02,
.hero-bg-roll__03,
.hero-bg-roll__04{}
.hero-bg-roll__01{}
.hero-bg-roll__02{}
.hero-bg-roll__03{}
.hero-bg-roll__04{}
.hero-orn1{
    left: -8%;
}
.hero-orn2{
    right: -8%;
}
.hero-inner{}
.hero-header{
}
.hero-logo{
    width: 126%;
    max-width: unset;
    top: 48%;
}
.hero-bottom{
    width: 86%;
    gap: 1em;
    bottom: 5%;
}
.hero-bottom-text{}
.hero-bottom-scroll{
    width: 28%;
}
}