/* background vdo */
.bg-vdo{ position: relative;}
.bg-vdo #video-background { position: relative; right: 0;  top: 0; min-width: 100%; width: auto;  height: auto; }
.bg-vdo article { position: absolute; top: 0; left: 0; right: 0; bottom: 0;  margin: 10px; }
.bg-vdo p { position: absolute; top: 35%; width: 100%; text-align: center; color: #fff; line-height: 1.5; opacity: 0}
.bg-vdo p.text2 {top: 40%; width: 100%; text-align: center; color: #fff; line-height: 1.5;}
.bg-vdo p.text3 { top: 45%; width: 100%; text-align: center; color: #fff; line-height: 1.5;}
.bg-vdo p img{max-width: 100%; width: auto;}
.bg-vdo p span { letter-spacing: 0; font-weight: bold; font-size: 20px; line-height: 24px; }

@media(max-width:1445px){
.text1{top: 33% !important;}
.text2{top: 40% !important;}
.text3{top: 47% !important;}
}
@media(max-width:768px){
.bg-vdo p { width: 270px  !important;  position: relative; margin:auto;top: 25%; }
.text1{top: 28% !important;}
.text2{top: 31% !important;}
.text3{top: 34% !important;}
}

@media(max-width:480px){
.bg-vdo p { width: 175px  !important;  position: relative; margin:auto;top: 25%; }
.text1{top: 25% !important;}
.text2{top: 28% !important;}
.text3{top: 31% !important;}
    
}


@keyframes fadeIn { /*「fadeIn」と名前をそろえる*/
    0% {opacity: 0} /*アニメーション開始時は完全に透過*/
    100% {opacity: 1} /*アニメーション終了時は透過しない*/
}

/*旧 Safari 用のベンダー処理*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
.text1{animation: fadeIn 2s ease 2s 1 forwards ;}
.text2{animation: fadeIn 2s ease 6s 1 forwards ;}
.text3{animation: fadeIn 2s ease 10s 1 forwards ;}

/* infomation */
.information{ position: relative;}
.information .view-list{ font-size: 14px; font-weight: 500; text-align: right; display: block; padding: 0 8px;}
.information .view-list a:hover{ text-decoration: underline;}
.information .list-news ul{ display: block; list-style: none; padding: 0;}
.information .list-news ul li {border-bottom: 1px solid #e2e2e2;} 
/* .information .list-news ul li:nth-child(odd){ background: #d4eafa;}
.information .list-news ul li:nth-child(even){ background: #f1f1f1;} */
.information .list-news ul li a{ width: 48%; display: flex; margin: auto;}
.information .list-news ul li a:hover .title-news{ color: #122d9b; text-decoration: underline;}
.information .list-news ul li div{ display: block; padding: 18px 4px; font-size: 14px; font-weight: 500;}
.information .list-news ul li .date{ width: 15%;}
.information .list-news ul li .new{ width:15%; font-size: 13px; }
.information .list-news ul li .new span{ background: #1653ca; text-align: center; display: block; padding: 2px; width: 50px; color: #fff; border-radius: 12px;}
.information .list-news ul li .title-news{ width: 70%; line-height: 1.5; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}


/* pick up */
.thumb-pickup{ display: flex; flex-wrap: wrap; width: 100%;}
.thumb-pickup a{ display: block; width: 46%; margin: 10px 2%; position: relative;}
.thumb-pickup a img{ width: 100%;}
.thumb-pickup .link-pickup .sub-text{ background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: absolute; opacity: 0; top: 0; left: 0; text-align: left; color: #fff; font-weight: 500;}
.thumb-pickup .link-pickup:hover .sub-text{ opacity: 1; transition: all 0.5s ease-in-out;}
.thumb-pickup .link-pickup:hover .sub-text p{ padding: 0 12px 8px; position: absolute; bottom: 0; left: 0; box-sizing: border-box;}
.thumb-pickup .link {
    padding: 8px 16px;
    font-size: 12px;
    background-color: #122d9b;
    position: absolute;
    color: #fff;
    /* top: 230px; */
    right: 10px;
    float: right;
    z-index: 50;
    bottom: -10px;}

.pickup>.container {max-width: 600px;}

.pickup-banner{ margin-top: 70px;}
.pickup-banner ul{ list-style: none; padding: 0;}
.pickup-banner ul li{ display: block; width: 100%;}
.pickup-banner ul li:nth-child(odd){ background: #d4eafa;}
.pickup-banner ul li:nth-child(even){ background: #d4eafa;}
.pickup-banner ul li .banner{ display: flex; flex-wrap: wrap; width: 100%;}
.pickup-banner ul li a{ display: table; width: 50%;}
.pickup-banner ul li a span{ display: table-cell; padding: 22px; vertical-align: top; font-size: 13px;}
.pickup-banner ul li a span.images-banner-pickup{ width: 50%; text-align: right;}
.pickup-banner ul li a span.images-banner-pickup img{ width: 100%;}
.pickup-banner ul li a strong{ display: block; font-size: 16px; margin-bottom: 8px; padding-bottom: 4px; position: relative; overflow: hidden;
                                -webkit-transform: perspective(1px) translateZ(0);
                                transform: perspective(1px) translateZ(0);}
.pickup-banner ul li a strong:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; border-bottom: 2px solid #122d9b;
                                    -webkit-transition-property: right;
                                    transition-property: right;
                                    -webkit-transition-duration: 0.3s;
                                    transition-duration: 0.3s;
                                    -webkit-transition-timing-function: ease-out;
                                    transition-timing-function: ease-out; }
.pickup-banner ul li a:hover strong:before { right: 0;}
.pickup-banner ul li a.bg-blue span{ background: #D4EAF8;}
.pickup-banner ul li a.bg-white span{ background: #b3d4fc;}




@media(max-width:768px){
    .information .list-news ul li a{ width: 80%;}
}

@media(max-width:680px){
    .bg-vdo h1{ top: 28%;}
    .thumb-pickup a{ width: 46%;}
   
    .pickup-banner ul li a{ display: block; width: 100%;}
    .pickup-banner ul li a span{ display: block; padding: 22px;}
    .pickup-banner ul li a span:first-child{ padding-bottom: 8px; }
    .pickup-banner ul li a span.images-banner-pickup{ width: auto; text-align: center; padding-top: 0;}
    .pickup-banner ul li a span.images-banner-pickup img{ max-width: 300px; }
    .pickup-banner ul li:nth-child(odd){ background: none;}
    .pickup-banner ul li:nth-child(even){ background: none;}
    .pickup-banner ul li a:first-child span{background: #D4EAF8 !important;}
    .pickup-banner ul li a:last-child span{background: #FFF !important;}
    .pickup-banner ul li a.bg-blue span{ background: none;}
    .pickup-banner ul li a.bg-white span{ background: none;}

}

@media(max-width:480px){
    .bg-vdo h1{ top: 4%;}
    .bg-vdo h1 span{ font-size: 13px;}

    .information{ padding-bottom: 50px;}
    .information .list-news ul li a{ flex-wrap: wrap;}
    .information .list-news ul li .date{ width: 25%;}
    .information .list-news ul li .new{ width:15%;}
    .information .list-news ul li .title-news{ width: 100%;}
    .information .list-news ul li div{ padding: 8px 4px;}
    .information .view-list{ position: absolute; bottom: 0; left: 0; right: 0;}
    .information .view-list a{ color: #fff; background: #112C9B; padding: 12px; width: 140px; display: block; text-align: center; font-size: 18px; font-weight: bold; margin: auto;}    
    
}

@media(max-width:320px){
    .thumb-pickup a{ width: 80%; margin: 6px auto;}
}