@charset "UTF-8";
/* CSS Document */


/* -------------------------------- PC版のスタイルここから ------------------------------------*/

@media print, screen and (min-width: 751px) {


    .video-category,.activity-category,.packages-category{
        width: 100%;
        max-width: 1198px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }

    .video-category ul,.activity-category ul,.packages-category ul{
        width: 100%;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-inline-start: 0;
        padding: 0;
        margin-bottom: 0;
    }

    .video-category ul > li,.activity-category ul > li, .packages-category ul > li{
        cursor: pointer;
        width: 18.8%;
        text-align: center;
        position: relative;
        margin-bottom: 24px;
    }
    .packages-category ul > li{
        min-width: 23%;
        width: auto;
    }

    .video-category ul > li+li,.activity-category ul > li+li,.packages-category ul > li+li{
        margin-left: 1.5%;
    }

    .video-category ul > li:nth-child(5n+1),.activity-category ul > li:nth-child(5n+1),.packages-category ul > li:nth-child(5n+1){
        margin-left: 0;
    }

    .video-category ul > li.active a,
    .video-category ul > li.active span,
    .activity-category ul > li.active a,
    .activity-category ul > li.active span,
    .packages-category ul > li.active a,
    .packages-category ul > li.active span{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }

    .video-category ul > li > a,
    .video-category ul > li > span,
    .activity-category ul > li > a,
    .activity-category ul > li > span,
    .packages-category ul > li > a,
    .packages-category ul > li > span{
        width: 100%;
        background: #F2F2F2;
        border: 1px solid #898989;
        border-radius: 100px;
        display: block;
        padding: 8px 0;
        transition: 0.3s;
        font-weight: bold;
        font-size: 16px;
        line-height: 26px;
        position: relative;
        color: #898989;
    }
    .packages-category ul > li > a {
        padding: 8px 16px;
    }

    .video-category ul > li > a:hover,
    .video-category ul > li > span:hover,
    .activity-category ul > li > a:hover,
    .activity-category ul > li > span:hover,
    .packages-category ul > li > a:hover,
    .packages-category ul > li > span:hover{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }

    .video-category ul > li > span.is-show,
    .activity-category ul > li > span.is-show,
    .packages-category ul > li > span.is-show{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }


    .video-category ul > li > span.is-show:before,
    .activity-category ul > li > span.is-show:before,
    .packages-category ul > li > span.is-show:before{
        border-top-color: #fff;
    }



    .video-list-wrap{
         display: block;
        margin-top: 80px;
    }

    .video-list-wrap.is-show{
        display: block;
        margin-top: 80px;
    }

    .video-list-wrap h3{
        font-weight: bold;
        font-size: 24px;
        line-height: 1em;
        margin-bottom: 48px;
    }

    .video-list-wrap-inner.col-1{
        flex: none;
        max-width: 100%;
        padding: 0;
    }

    .video-list-wrap-inner ul{
        width: 100%;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-inline-start: 0;
        padding: 0;
    }

    .video-list-wrap-inner ul+.moreread,
    .video-list-wrap-inner ul+a{
        margin-top: 80px;
    }

    .video-list-wrap-inner ul+ul{
        margin-top: 24px;
    }

    .video-list-wrap-inner li{
        width: 32%;
        height: auto;
        position: relative;
        overflow: hidden;
        margin-left: 2%;
        margin-bottom: 24px;
    }

    .video-list-wrap-inner li:nth-child(3n+1){
        margin-left: 0;
    }

    .video-list-wrap-inner li:nth-child(3n):nth-last-child(-n+4) ~ li {
        margin-bottom: 0;
    }

    .video-list-wrap-inner li+li{
        margin-left: 2%;
    }


    .video-list-wrap-inner li figure{
        width: 100%;
        height: 100%;
        position: relative;
        margin-bottom: 0;
    }

    .video-list-wrap-inner li figure img{
        width: 100%;
        height: auto;
    }

    .video-list-wrap-inner li span.modal-btn{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 75px;
        height: 75px;
        border: 2px solid #fff;
        border-radius: 50%;
        text-align: center;
        transform: translate(-50%,-50%);
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    }

    .video-list-wrap-inner li span.modal-btn i{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
    }


    .video-list-wrap-inner li span.modal-btn i:before{
        position: absolute;
        top: 50%;
        left: 25px;
        content: ' ';
        border-top: 20px solid transparent;
        border-left: 30px solid transparent;
        border-bottom: 20px solid transparent;
        border-left-color: #fff;
        transform: translateY(-50%);
        z-index: 2;
    }

    .video-list-wrap-inner li figcaption{
        font-weight: bold;
        font-size: 20px;
        line-height: 26px;
        margin-top: 16px;
        margin-bottom: 0;
    }

    .video-list-wrap-inner li a:hover figcaption{
        color: #1D315A;
    }



}


/* -------------------------------- SP版のスタイルここから ------------------------------------*/

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

    .video-category,
    .activity-category,
    .packages-category{
        width: 96%;
        margin-left: auto;
        margin-right: auto;
        overflow-x: scroll;
        position: relative;
    }

    .video-category ul,
    .activity-category ul,
    .packages-category ul{
        width: max-content;
        padding-inline-start: 0;
        padding:0;
        margin-bottom: 0;
    }

    .video-category ul > li,
    .activity-category ul > li,
    .packages-category ul > li{
        cursor: pointer;
        width: 130px;
        text-align: center;
        position: relative;
        margin-bottom: 24px;
        float: left;
    }
    .packages-category ul > li{
        min-width: 180px;
        width: auto;
    }

    .video-category ul > li+li,
    .activity-category ul > li+li,
    .packages-category ul > li+li{
        margin-left: 8px;
    }


    .video-category ul > li.active a,
    .video-category ul > li.active span,
    .activity-category ul > li.active a,
    .activity-category ul > li.active span,
    .packages-category ul > li.active a,
    .packages-category ul > li.active span{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }

    .video-category ul > li > a,
    .video-category ul > li > span,
    .activity-category ul > li > a,
    .activity-category ul > li > span,
    .packages-category ul > li > a,
    .packages-category ul > li > span{
        width: 100%;
        background: #F2F2F2;
        border: 1px solid #898989;
        border-radius: 100px;
        display: block;
        padding: 4px 8px;
        transition: 0.3s;
        font-weight: bold;
        font-size: 12px;
        line-height: 22px;
        position: relative;
        color: #898989;
    }
    .packages-category ul > li > a {
        padding: 4px 16px;
    }


    .video-category ul > li.sub-cate > span:before,
    .activity-category ul > li.sub-cate > span:before,
    .packages-category ul > li.sub-cate > span:before{
        position: absolute;
	    top: 50%;
	    right: 8px;
	    margin-left: -30px;
	    content: ' ';
	    border-top: 8px solid transparent;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
	    border-top-color: #898989;
        z-index: 1;
        transform: translateY(-50%);
    }

    .video-category ul > li.sub-cate > span.is-show,
    .activity-category ul > li.sub-cate > span.is-show,
    .packages-category ul > li.sub-cate > span.is-show{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }

    .video-category ul > li.sub-cate > span.is-show:before,
    .activity-category ul > li.sub-cate > span.is-show:before,
    .packages-category ul > li.sub-cate > span.is-show:before{
        border-top-color: #fff;
    }



    .video-category li .sub-cate-list,
    .activity-category li .sub-cate-list,
    .packages-category li .sub-cate-list{
        position: relative;
	    z-index: 2;
	    top: 10px;
	    left: 50%;
	    display: none;
	    width: 160%;
        height: auto;
	    padding: 16px;
	    text-align: center;
	    border-radius: 6px;
	    background: #fff;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
        transform: translateX(-50%);
        border: 1px solid #CCCCCC;
    }

    .video-category li .sub-cate-list::after,
    .activity-category li .sub-cate-list::after,
    .packages-category li .sub-cate-list::after{
	    position: absolute;
	    bottom: 100%;
	    left: 50%;
	    margin-left: -10px;
	    content: ' ';
	    border: 10px solid transparent;
	    border-bottom-color: #fff;
        z-index: 2;
    }

    .video-category li .sub-cate-list::before,
    .activity-category li .sub-cate-list::before,
    .packages-category li .sub-cate-list::before{
	    position: absolute;
	    bottom: 100%;
	    left: 50%;
	    margin-left: -11px;
	    content: ' ';
	    border: 11px solid transparent;
	    border-bottom-color: #CCCCCC;
        z-index: 1;
    }

    .video-category .sub-cate-list ul{
        width: 100%;
        display: block;
        padding-left: 0;
        padding-right: 0;
    }

    .video-category .sub-cate-list li{
        text-align:left;
        margin-bottom: 0;
        float: none;
        width: 100%;
    }

    .video-category .sub-cate-list li+li{
        margin-left: 0;
        margin-top: 8px;
    }

    .video-category .sub-cate-list a{
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        font-size: 12px;
    }

    .video-list-wrap{
         margin-top: 40px;
        display: block;
    }

    .video-list-wrap h3{
        font-weight: bold;
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 24px;
    }

    .video-list-wrap-inner.col-1{
        flex: none;
        max-width: 100%;
        padding: 0;
    }

    .video-list-wrap-inner ul{
        width: 100%;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-inline-start: 0;
        padding: 0;
    }

    .video-list-wrap-inner ul+.moreread,
    .video-list-wrap-inner ul+a{
        margin-top: 40px;
    }

    .video-list-wrap-inner ul+ul{
        margin-top: 3%;
    }

    .video-list-wrap-inner li{
        width: 48.5%;
        height: auto;
        position: relative;
        overflow: hidden;
        margin-left: 3%;
        margin-bottom: 3%;
    }

    .video-list-wrap-inner.col-1 li{
        width: 100%;
        margin-left: 0;
        margin-bottom: 0;
    }

    .video-list-wrap-inner.col-1 li+li{
        margin-left: 0;
        margin-top: 24px;
    }

    .video-list-wrap-inner li:nth-child(2n+1){
        margin-left: 0;
    }

    .video-list-wrap-inner li:nth-child(2n):nth-last-child(-n+3) ~ li {
        margin-bottom: 0;
    }

    .video-list-wrap-inner li+li{
        margin-left: 3%;
    }

    .video-list-wrap-inner li figure{
        width: 100%;
        position: relative;
        margin-bottom: 0;
    }

    .video-list-wrap-inner li figure img{
        width: 100%;
        height: auto;
    }

    .video-list-wrap-inner li span.modal-btn{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 40px;
        height: 40px;
        border: 2px solid #fff;
        border-radius: 50%;
        text-align: center;
        transform: translate(-50%,-50%);
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    }

    .video-list-wrap-inner.col-1 li span.modal-btn{
        width: 80px;
        height: 80px;
    }

    .video-list-wrap-inner li span.modal-btn i{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
    }


    .video-list-wrap-inner li span.modal-btn i:before{
        position: absolute;
        top: 50%;
        left: 12px;
        content: ' ';
        border-top: 10px solid transparent;
        border-left: 18px solid transparent;
        border-bottom: 10px solid transparent;
        border-left-color: #fff;
        transform: translateY(-50%);
        z-index: 2;
        filter: drop-shadow(4px rgba(0, 0, 0, 0.25));
    }

    .video-list-wrap-inner.col-1 li span.modal-btn i:before{
        left: 34px;
        transform: translateY(-50%) scale(2);
    }

    .video-list-wrap-inner li figcaption{
        font-weight: bold;
        font-size: 12px;
        line-height: 1.4em;
        margin-top: 8px;
    }

    .video-list-wrap-inner .btn-basic{
        max-width: 90%;
    }


}