/*---------------Slide---------------*/
.pc{
    display:block;
}
.sp{
    display:none;
}

.text-slide{position:absolute; color: #5c3108; line-height:16pt; top:86px; right:-110px; font-family: vdl-logomaru; width: 100%; text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83333px 0.983333px 0px, rgb(255, 255, 255) 2.35px 1.85px 0px, rgb(255, 255, 255) 1.61667px 2.51667px 0px, rgb(255, 255, 255) 0.7px 2.91667px 0px, rgb(255, 255, 255) -0.283333px 2.98333px 0px, rgb(255, 255, 255) -1.25px 2.73333px 0px, rgb(255, 255, 255) -2.06667px 2.16667px 0px, rgb(255, 255, 255) -2.66667px 1.36667px 0px, rgb(255, 255, 255) -2.96667px 0.416667px 0px, rgb(255, 255, 255) -2.95px -0.566667px 0px, rgb(255, 255, 255) -2.6px -1.5px 0px, rgb(255, 255, 255) -1.96667px -2.26667px 0px, rgb(255, 255, 255) -1.11667px -2.78333px 0px, rgb(255, 255, 255) -0.133333px -3px 0px, rgb(255, 255, 255) 0.85px -2.88333px 0px, rgb(255, 255, 255) 1.75px -2.43333px 0px, rgb(255, 255, 255) 2.45px -1.73333px 0px, rgb(255, 255, 255) 2.88333px -0.833333px 0px;}

.slide-title{display:block; font-size: 30px; font-weight: bold; line-height: 30px; padding: 10px 0;}
.slide-set{max-width: 1600px; margin: 10px auto 50px; }


/*---------------Content---------------*/
.content-container{overflow: hidden;}
.content-main{float: left; width: 640px;}
.content-side{float: right; width: 300px;}

/*---------------Content-PDF---------------*/
.content-pdf{ border:5px solid #ffb83c; margin: 0 0 40px; padding: 25px 0 50px; text-align: center; background: url(../images/bg-pdf.jpg) center bottom no-repeat; border-radius: 15px;}
.pdf-link{display: inline-block; width: 40%; vertical-align: top;}
.pdf-link strong{display:block; height: 36px; font-weight: bold; font-size: 18px; color:#5c3108; line-height: 8pt; background:url(../images/bg-title.png) no-repeat center bottom;  font-family: vdl-logog;}
.pdf-link a{display:block; position: relative; top:0; transition: all 0.2s;}
.pdf-link a img{width: 100%;}
.pdf-link a:hover{top:-10px;}
.box_close{text-align: center; cursor: pointer; width: 31px; height: 31px; background: #000; padding: 10px; border-radius: 50%; position: absolute; right: -12px; top: -12px;}
.box_close img {position: relative; top: -7px; left: -7px;}
#cboxLoadedContent{overflow: unset !important;}

/*---------------Content-News---------------*/
.content-news{margin: 0 0 40px;}
.content-news .btn-more a{width: 280px;}
.content-news h2{font-size: 22px; color:#5c3108; margin: 0 0 15px; font-family: vdl-logona; font-weight: bold; border-bottom: 2px solid #d8c7c7;}
.content-news a{display:flex; width: 100%; color: #714218; padding: 0 0 10px; margin: 0 0 10px; border-bottom: 1px solid #d8c7c7; transition: all 0.3s;}
.content-news a figure,.content-news a div{display: inline-block;}
.content-news a figure{margin: 0 10px 0 0; width: 25%;}
.content-news a figure img{width: 100%;}
.content-news a div{width: 75%;}
.content-news a span{color: #714218;}
.content-news a div span,.content-news a div strong{display: block;}
.content-news a div span small{display: inline-block; background: url(../images/bg-news-pin.png) center no-repeat; height: 30px; width: 140px; text-align: center; line-height: 22pt;}
.content-news a div strong{font-size: 20px; font-weight: bold; color: #ff8602;}

.content-news a:hover{color: #ff8602;}
.content-news a:hover span{color: #714218 !important;}



.content-side {width: 323px;}

/*---------------Banner-Main---------------*/
.banner-main{display:flex; flex-wrap: wrap; justify-content: space-between;}
.banner-main a{display: block; margin: 0 0 15px; opacity: 1; transition: all 0.3s;}
.banner-main a:hover{opacity:0.7; }

/*---------------Ranking---------------*/
.ranking{background:#f7e1d3; padding: 0 15px 20px;}
.ranking .btn-more a{width: 100%;}

.ranking h2{background:url(../images/bg-title.png) no-repeat center bottom; line-height: 16pt; padding: 10px 0 30px; font-size: 18px; text-align: center; font-family: vdl-logog; color: #6c3e20; display: block; width: 100%;}

 a.rank-detail {display: block; color: #6c3e20; transition: all 0.3s; font-family: vdl-logog; font-size: 11px; line-height: 12pt; padding: 0 0 10px;}
 a.rank-detail strong{background: #ff8500; text-align: center; display: block; color: #FFF; font-size: 16px; line-height: 16pt; padding: 8px 0;}
 a.rank-detail figure{position: relative; margin: 0 0 10px;} a.rank-detail figure img{width: 100%;} a.rank-detail figure div{position: absolute; width: 100%; bottom: 0; font-size: 18px; padding: 10px; text-shadow: rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) 1.75px 0.966667px 0px, rgb(255, 255, 255) 1.08333px 1.68333px 0px, rgb(255, 255, 255) 0.133333px 2px 0px, rgb(255, 255, 255) -0.833333px 1.81667px 0px, rgb(255, 255, 255) -1.6px 1.2px 0px, rgb(255, 255, 255) -1.98333px 0.283333px 0px, rgb(255, 255, 255) -1.86667px -0.7px 0px, rgb(255, 255, 255) -1.3px -1.51667px 0px, rgb(255, 255, 255) -0.416667px -1.95px 0px, rgb(255, 255, 255) 0.566667px -1.91667px 0px, rgb(255, 255, 255) 1.41667px -1.41667px 0px, rgb(255, 255, 255) 1.91667px -0.566667px 0px;} a.rank-detail figure div img{width: auto; position: relative; top:-7px;} a.rank-detail:hover{color: #ff8500;}

.btn-more-rank{text-align: center; width: 100%;}
.btn-more-rank a{display:inline-block; background: #FFF; font-family: vdl-logona; font-size: 22px; width: 228px; border:3px solid #ff8500; text-align: center; position: relative; padding:2px 0 7px ; line-height: unset;}
.btn-more-rank a span{display:block; position: absolute; right:20px; top:4px; transition: all 0.3s;}
.btn-more-rank a:hover{ background: #ff8500; color: #FFF;}
.btn-more-rank a:hover span{right:15px; color:#FFF !important;}

/*---------------Banner---------------*/
.banner-side a{margin: 0 0 10px; /*display: block;*/  /*opacity: 1; transition: all 0.3s;*/}
.banner-side a img{margin: 0 0 15px;}
/*.banner-side a:hover{opacity:0.7; border:none!important;}*/
.cal_wrapper{padding: 0 0 10px !important;}
.lp-sp{ display: none;}
.lp-pc{ display: block;}

/*---------------Button-More---------------*/
.btn-more{text-align: right;}
.btn-more a{display:inline-block; color: #5c3108; padding:0 0 4px; background: #FFF; margin: 0; font-family: vdl-logona; font-size: 22px; border:3px solid #ff8500; text-align: center; position: relative;}
.btn-more a span{display:block; position: absolute; right:20px; top:3px; transition: all 0.3s;}
.btn-more a:hover{ background: #ff8500; color: #FFF;}
.btn-more a:hover span{right:15px; color:#FFF !important;}

.calendar{ width: 100%; display: inline-block; vertical-align: top; }
.calendar .cal_wrapper table{ width: 100%; }
.calendar p{ padding: 2px 0 8px;}
.calendar .pink{ width: 15px; height: 15px; background: #e4bad6; display: inline-block; border-radius: 3px;}
.calendar .blue{ width: 15px; height: 15px; background: #c6e6eb; display: inline-block; border-radius: 3px;}
.calendar .green{ width: 15px; height: 15px; background: #e785b0; display: inline-block; border-radius: 3px;}
.calendar .yellow{ width: 15px; height: 15px; background: #faf7b9; display: inline-block; border-radius: 3px;}
.remark { font-size: 12px; margin-bottom: 8px;  }
.calendar .cal_ui input.prev{ float: left;}
.calendar .cal_ui input.next{ float: right;}
.col_title{
    display: inline-block;
    background: url(../images/store_icon.jpg) left no-repeat;
    border-bottom: 2px solid #ff8602 !important;
    display: block;
    text-align: left !important;
    padding: 0 0 0 40px !important;
    line-height: 22pt;
    color: #5c3108 !important;
    margin: 0 auto 5px !important;
    font-size: 15px;
}

.pink_back{
    background:#e4bad6;
    padding:5%;
    border-radius:20px;
    position:relative;
}
.form_white_back{
    margin-top:20px;
    background:#fff;
}

.raiten_btn{
    position:absolute;
    top: 2%;
    left:0;
    width: 49%;
    height: 4%;
}

.toi_btn{
    position:absolute;
    top: 2%;
    right:0;
    width: 49%;
    height: 4%;
}

/*---------------Responsive---------------*/
@media (max-width:1000px){
    .banner-side a{display: inline-block; width:31.5%; margin: 0 0.5% 10px; opacity: 1; transition: all 0.3s;}
    .banner-side a img{ width: 100%;}

    .content-main{float: none; width: 100%;}
    .content-side{float: none; width: 100%;}
    .content-pdf{background-size: 100%;}
    .pdf-link{width: 260px;}
    .content-side {width: 100%;}
    .btn-more-news{text-align: center;}
    .banner-main a{width: 32%; margin: 0 0.5% 10px;}
    .banner-main a img{width: 100%;}
    .ranking{display: flex; flex-wrap: wrap;} a.rank-detail {display: inline-block; margin: 0 1% 0; width: 47%;}
    .ranking .btn-more {width: 100%; text-align: center;}
    .ranking .btn-more a{width: 280px;}
}

@media (max-width:780px){
.slide-title{font-size: 18px; padding: 0 0 5px;}
.banner-main a{width: 47%; margin: 0 1.5% 10px;}
.calendar{ width: 100%; display: inline-block; padding-left: 0;}
.text-slide{top:20px;}
.content-side {width: 100%; text-align: center;}

}


@media (max-width:560px){
    .banner-side { text-align: left;}
    .banner-side a{display: inline-block; width:48%; margin: 0 0.5% 10px; opacity: 1; transition: all 0.3s;}
    .banner-side a img{ width: 100%;}

    .lp-sp{ display: block; /*width:90%;*/ margin: 0 auto 10px;}
    .lp-sp img{ width: 100%;}
    .lp-pc{ display: none !important;}
    

    .pdf-link{width: 40%;}
    .pdf-link a{width: 95%; text-align: center;} a.rank-detail {display:block; margin:0; width: 100%;}
}

@media (max-width:480px){
    .text-slide{position: static; line-height: 14pt; padding: 10px 0; font-size: 12px; background: #ffb83c;}
    .pdf-link strong { background-size: contain;}
    .pdf-link{width: 47%;}
    .pdf-link a{width: 100%;margin: 0 auto 20px;}
    .content-news a{display: block;}
    .content-news a div{width: 100%;}
    .content-news a figure{width: 100%; text-align: center; margin: 0 0 10px;}
    .content-news a figure img{max-width: 50%; width: auto;}
    .content-news a div strong{font-size: 18px;}
    .btn-more-news a{width: 100%;}
    .banner-main a{width: 100%; margin: 0 0 10px;}
    .btn-more-rank a{width: 100%;}
    .content-news .btn-more a{width: 100%;}
    .ranking .btn-more a{width: 100%;}
    .content-news h2 { font-size: 18px;     text-align: center;}
    .content-news h2 img{  zoom:0.8;  margin: 0 0px; }

    .flexslider .slides img {
        width: 100%;
        height: 205px;
        object-fit: cover;
    }
    .slide_online{
        height: 205px;
        background:#f3c4ba;
        display:flex;
        

    }
    .slide_online a{
        height: 100%;
        display:block;
    }
    .slide_online img{
        width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
        vertical-align: bottom !important;
        display: inline-block !important;
    }
    .sp{
        display:block;
    }
    .pc{
        display:none;
    }

    .raiten_btn{
        top: 1%;
        height: 2%;
    }
    
    .toi_btn{
        top: 1%;
        height: 2%;
    }
    

}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .btn-more a{
        padding: 8px 0 0;
    }
}