@charset "utf-8";

.kv_wrap {
    width: 100%;
    /*height: 630rem;*/
    height: 525rem;
    /*overflow: hidden;*/
    margin-top: 30rem;
}

.kv_inner {
    /*width: 1200rem;*/
    width: 1000rem;
    /*height: 630rem;*/
    height: 525rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 0;
}

@media screen and (max-width:767px) {

    .kv_wrap {
        width: 100%;
        height: 450rem;
        margin-top: 20rem;
        margin-bottom: -30rem;
    }

    .kv_inner {
        width: 100%;
        height: 450rem;
    }

}

.kv {
    position: absolute;
}

/*.kv_wrap h1 {
position: absolute;
z-index: 1;
}*/

.invisible {
    opacity: 0;
}

.animated {
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anime00 {
    opacity: 0;
}

.anime {
    opacity: 0;
}

.anime02 {
    opacity: 0;
}

.anime-delay-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.anime-delay-2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.anime-delay-3 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.anime-delay-4 {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.anime-delay-5 {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.anime-delay-6 {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.anime-delay-7 {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}

.anime-delay-8 {
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
}

.anime-delay-9 {
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fadeIn2 {
    -webkit-animation-name: fadeIn2;
    animation-name: fadeIn2;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fadeInDown {
    -webkit-animation: .8s .4s fadeInDown both;
    animation: .8s .4s fadeInDown both;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn2 {
    from {
        z-index: -1;
        opacity: 0;
    }

    to {
        z-index: 10000;
        opacity: 1;
    }
}

@keyframes fadeIn2 {
    from {
        z-index: -1;
        opacity: 0;
    }

    to {
        z-index: 10000;
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}



/*最新のお知らせを表示*/
.top_news {
    padding-top: 100rem;
    position: relative;
    text-align: center;
}

.top_news h2 {
    display: inline-block;
    font-size: 16rem;
}

.top_news ul {
    margin-top: 40rem;
    width: 640rem;
}

.top_news ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14rem;
    border-bottom: 1px dotted #3e1f1b;
}

.top_news ul li + li {
    margin-top: 40rem;
}

.top_news ul li .thumbs_wrap img {
    width: 100rem;
    height: 60rem;
    border-radius: 5rem;
}

.top_news ul li p a {
    /*font-size: 18rem;*/
    font-size: 16rem;
    /*width: 820rem;*/
    width: 520rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    text-align: left;
}

.top_news ul li p a time,
.top_news ul li p a span {
    display: block;
}

.top_news ul li p a time {
    /*color: #9fa6b4;*/
}

.top_news ul li p a span {
    max-width: 665rem;
    margin-left: 36rem;
}

.top_news ul li p a:hover {
    opacity: .8;
}

/*.top_news .btn_wrap {
    margin-top: 80rem;
}

.top_news .btn_wrap p {
    text-align: center;
}

.top_news .btn_wrap p a {
    text-align: left;
}

.top_news .btn_wrap p a::after {
    border-color: #091D48;
}

.top_news::after {
    background-image: url(/assets/img/deco_top_news.png);
    width: calc(969 / 1920 *100vw);
    height: calc(442 / 1920 * 100vw);
    bottom: calc(145 / 1920 * -100vw);
    right: calc(5 / 1920 * 100vw);
}*/


@media screen and (max-width: 767px) {

    .top_news {
        /*padding-top: 45rem;
        padding-bottom: 60rem;*/
        padding-top: 80rem;
    }
    
    .top_news h2 {
        font-size: 14rem;
    }

    .top_news ul {
        margin-top: 30rem;
        width: 90%;
    }

    .top_news ul li {
        padding-bottom: 10rem;
    }

    .top_news ul li + li {
        margin-top: 45rem;
    }

    .top_news ul li .thumbs_wrap img {
        /*width: 72rem;
        height: 60rem;*/
    }

    .top_news ul li p a {
        /*font-size: 13rem;*/
        font-size: 12rem;
        width: 255rem;
        display: block;
        /*padding-right: 20rem;*/
        padding-left: 15rem;
    }

    .top_news ul li p a span {
        max-width: 100%;
        margin-left: 0;
    }

    /*.top_news .btn_wrap {
        margin-top: 40rem;
    }

    .top_news::after {
        width: 306rem;
        height: 150rem;
        bottom: -60rem;
        right: -18rem;
    }*/

}