/*ページトップのスライドやナヴィゲーションのスタイル*/

@charset 'utf-8';

.top_wrapper {
    width: 100%;
    height: calc(100vh - var(--header_height));
    margin-top: var(--header_height);
}

.inpage_nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
    text-align: center;
    background-color: rgba(255, 255, 255, .5);
    padding: 20px;
    z-index: calc(var(--header_z_index) - 2);
}

.inpage_nav_list {
    list-style: none;
    padding-right: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inpage_nav_item {
    margin: 0 20px;
}

.inpage_nav_item a {
    color: #000;
    text-decoration: none;
}
.inpage_nav_item a:hover {
    opacity: .7;
}

/*背景スライドのスタイル*/
.bg_img {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.img_01, .img_02, .img_03{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@keyframes slide-animation-01 {
    0% {opacity: 1;}
    30% {opacity: 1;}
    40% {opacity: 0;}
    90% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
    30% {opacity: 0;}
    40% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
    60% {opacity: 0;}
    70% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0;}
}

/*768px以下の時のスタイル*/
@media (max-width: 768px) {
    .top_wrapper {
        height: calc(100vh - var(--mini_header_height));
        margin-top: var(--mini_header_height);
    }
}