@charset "utf-8";
/* CSS Document */



html, body {
width: 100%;
-ms-overflow-x: hidden;
overflow-x: hidden;
}

.bg-section {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
z-index: 1;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}




#bg-section01a {
background-image: url(../images/title.png);
animation: fadeout-anim 2s linear forwards;
background-position: center -100px;
background-size: 130% auto;
}

@keyframes fadeout-anim {
100% {
opacity: 0.2;
}
}

#bg-section01b {
background-image: url(../images/line_sp.png);
background-position: center -150px;
background-size: 100% auto;
position: fixed;
}

#bg-section03 {
background-image: url('../images/back1.jpg');
top: -20vh;
background-size: 100% auto;
}

#bg-section04 {
background-image: url('../images/back2.jpg');
top: -40vh;
background-size: 130% auto;
background-position: center center;
}

#bg-section05 {
background-image: url('../images/back3.jpg');
top: -40vh;
background-size: 100% auto;
}

#section01 {
position: relative;
z-index: 2;
padding: 0 !important;
height: 450px;
}

#section02{
background: #000;
position: relative;
z-index: 4;
padding:15vh 0;
}

#section03{
background: #FFF;
position: relative;
z-index: 3;
overflow: hidden;
padding: 0 !important;
}

#section04{
background: #FFF;
position: relative;
z-index: 4;
overflow: hidden;
padding: 0 !important;
}

#section05{
background: #FFF;
position: relative;
z-index: 3;
overflow: hidden;
padding: 0 !important;
}

#section06{
background: #FFF;
position: relative;
z-index: 3;
padding: 0 !important;
}


#fog01{
position: absolute;
bottom: -20vh;
left: 0;
width: 100%;
z-index: 1 !important;
pointer-events: none;
}

#fog01 img{
width: 100%;
}

#fog02{
position: absolute;
bottom: -50vh;
left: 0;
width: 100%;
z-index: 1;
pointer-events: none;
}

#fog02 img{
width: 100%;
}