@charset "UTF-8";

/*//////////////////// tab-block ////////////////////////*/

.tab-block>* {
    opacity: 0;
    -webkit-transition: 0.1s opacity ease-in-out, 0.5s transform ease-in-out;
    transition: 0.1s opacity ease-in-out, 0.5s transform ease-in-out;
    -webkit-transform: translate(0px, 10px);
    transform: translate(0px, 10px);
}

.tab-block>* {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in-out, 0.5s transform ease-in-out;
    transition: 0.5s opacity ease-in-out, 0.5s transform ease-in-out;
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

/*//////////////////// tab-block tab-menu ////////////////////////*/

.tab-block ul.tab-menu::after {
    content: '';
    width: 100%;
    margin-top: -2px;
    border-bottom: 2px solid var(--color-pale);
    z-index: 0;
}

.tab-block ul.tab-menu li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    height: 50px;
}

.tab-block ul.tab-menu li a {
    position: relative;
    display: block;
    font-size: 1.8rem;
    line-height: 48px;
    white-space: nowrap;
    padding: 0;
}

.tab-block ul.tab-menu li>a::after {
    content: '';
    display: block;
    position: absolute;
    height: 50px;
    width: 0%;
    background: var(--color-primary);
    z-index: -1;
    -webkit-transition: 0.5s all cubic-bezier(.87, -.41, .19, 1.44);
    transition: 0.5s all cubic-bezier(.87, -.41, .19, 1.44);
    top: 0;
    left: 0;
}

.tab-block ul.tab-menu li.current a {
    color: var(--color-non);
}

.tab-block ul.tab-menu li.current>a::after {
    width: 100%;
}

.tab-block ul.tab-menu:hover>li.current>a::after {
    width: 0%;
}

.tab-block ul.tab-menu li>a:hover {
    cursor: pointer;
}

.tab-block ul.tab-menu li:hover>a::after {
    width: 100%;
}

.tab-block ul.tab-menu li.current:hover>a::after {
    width: 100%;
}

.tab-block ul.tab-menu li:first-child:before {
    display: none;
}

@media (min-width: 821px) {

    .tab-block ul.tab-menu {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        border-top: 2px solid var(--color-pale);
    }

    .tab-block ul.tab-menu li>a::after {
        content: '';
        display: block;
        position: relative;
        height: 2px;
        width: 0%;
        background: var(--color-primary);
        z-index: 1;
        -webkit-transition: 0.5s all cubic-bezier(.87, -.41, .19, 1.44);
        transition: 0.5s all cubic-bezier(.87, -.41, .19, 1.44);
    }

    .tab-block ul.tab-menu li.current a {
        color: var(--color-primary);
    }

    .tab-block ul.tab-menu li:hover>a {
        color: var(--color-primary);
    }

    .tab-block ul.tab-menu li:before {
        content: '';
        width: 2px;
        height: 50px;
        background: var(--color-pale);
        display: block;
        position: absolute;
    }

    .tab-block ul.tab-menu.tab2 li {
        width: calc(100% / 2);
    }

    .tab-block ul.tab-menu.tab3 li {
        width: calc(100% / 3);
    }

    .tab-block ul.tab-menu.tab4 li {
        width: calc(100% / 4);
    }

    .tab-block ul.tab-menu.tab5 li {
        width: calc(100% / 5);
    }

    .tab-block ul.tab-menu.tab6 li {
        width: calc(100% / 6);
    }

}

/*//////////////////// tab-block tab-contents ////////////////////////*/

.tab-block .tab-contents {
    overflow: hidden;
    padding: 2rem 0;
}

.tab-block .tab-contents dl {
    margin: var(--n) 0;
}

.tab-block .tab-contents h2 {
    margin: 2rem 0;
}

.tab-block .tab-contents .tab-item:not(.tab-item.selected) {
    opacity: 0;
    -webkit-transform: translatey(20px);
    transform: translatey(20px);
    -webkit-transition: 0.5s opacity ease-in-out, 0.5s transform ease-in-out;
    transition: 0.5s opacity ease-in-out, 0.5s transform ease-in-out;
    display: none;
}

.tab-block .tab-contents .tab-item.selected {
    opacity: 1;
    -webkit-transform: translatey(0px);
    transform: translatey(0px);
    -webkit-transition: 1s opacity ease-in-out, 0.6s transform ease-in-out;
    transition: 1s opacity ease-in-out, 0.6s transform ease-in-out;
}

@media (min-width: 821px) {

    .tab-block .tab-contents dl {
        margin: calc(var(--n) * 2) 0;
    }

}

/*//////////////////// tab-block bottom-block ////////////////////////*/

.tab-block .bottom-block {
    border-top: 2px solid var(--color-pale);
    position: relative;
    bottom: 0px;
    height: 50px;
    width: 100%;
    background: var(--color-non);
}

@media (min-width: 821px) {

    .tab-item .inner-contents {
        width: 100%;
    }

}