@charset "utf-8";

/* --------------------------------
   共通
-------------------------------- */

html,
body{
    height:100%;
}

body{
    font-family:'Noto Sans CJK JP','Noto Sans JP',sans-serif;
    color:#000;
    margin:0;

    min-height:100vh;
    display:flex;
    flex-direction:column;
}

#CONTENTS{
    flex:1;
}

/* --------------------------------
   レイアウト
-------------------------------- */

.movie-layout{
    display:flex;
    gap:30px;
    padding:20px;
    align-items:flex-start;
    flex:1;
}

/* --------------------------------
   ヘッダー
-------------------------------- */

#HEADER{
    padding:10px 15px;
}

#HEADER a{
    display:inline-block;
    line-height:0;
}

#HEADER img{
    width:200px;
    height:auto;
    display:block;
}

/* --------------------------------
   左側（地図）
-------------------------------- */

.movie-map-area{
    flex:0 0 35%;
    position:sticky;
    top:20px;
}

.map-wrap{
    position:relative;
    width:100%;
    max-width:700px;
    margin:0 auto;
}

.map-img{
    width:100%;
    height:auto;
    display:block;
}

/* --------------------------------
   オーバーレイ
-------------------------------- */

.overlay-map{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;

    opacity:0;

    transition:opacity .2s ease;

    pointer-events:none;
}

.overlay-map.show{
    opacity:1;
}

/* --------------------------------
   動画を見るボタン
-------------------------------- */

.movie-link-wrap{
    text-align:center;
    margin-top:20px;
}

.movie-link{
    display:inline-block;

    min-width:260px;

    padding:12px 24px;

    border-radius:8px;

    background:#cccccc;
    border:1px solid #cccccc;

    color:#666666;
    text-decoration:none;

    pointer-events:none;
    cursor:not-allowed;

    transition:.2s;
}

.movie-link.enabled{
    background:#0d6efd;
    border-color:#0d6efd;

    color:#ffffff;

    pointer-events:auto;
    cursor:pointer;
}

.movie-link.enabled:hover{
    background:#0b5ed7;
    color:#ffffff;
}

/* --------------------------------
   右側（動画一覧）
-------------------------------- */

.movie-list-area{
    flex:1;

    display:flex;
    flex-direction:column;

    height:calc(100vh - 120px);

    min-width:0;

    overflow:hidden;
}

/* --------------------------------
   ツールバー
-------------------------------- */

.movie-toolbar{
    margin-bottom:15px;
    padding-bottom:10px;

    border-bottom:1px solid #e5e5e5;
}

#filter-controls{
    display:flex;
    flex-wrap:wrap;

    gap:1rem;

    align-items:center;
}

.filter-group{
    display:flex;
    align-items:center;

    gap:0.5rem;
}

.filter-group label{
    margin:0;

    white-space:nowrap;

    font-size:14px;
    font-weight:600;
}

.filter-group select{
    min-width:170px;
}

/* --------------------------------
   動画一覧スクロール部分
-------------------------------- */

.movie-list-scroll{
    flex:1;

    overflow-y:auto;

    padding-right:10px;
}

.movie-list-scroll::-webkit-scrollbar{
    width:8px;
}

.movie-list-scroll::-webkit-scrollbar-thumb{
    background:#b7b7b7;
    border-radius:10px;
}

.movie-list-scroll::-webkit-scrollbar-track{
    background:#f5f5f5;
}

/* --------------------------------
   動画一覧
-------------------------------- */

.movie-list{
    display:grid;
    gap:10px;
}

/* =================================
   リスト表示（1列）
================================= */

.movie-list.list-mode{
    grid-template-columns:1fr;
}

.movie-list.list-mode .movie-btn{
    display:flex;
    align-items:center;

    min-height:56px;

    padding:12px 15px;

    text-align:left;
}

.movie-list.list-mode .movie-thumb{
    display:none;
}

.movie-list.list-mode .movie-title{
    text-align:left;
}

/* =================================
   サムネイル表示（2列）
================================= */

.movie-list.thumb-mode{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.movie-list.thumb-mode .movie-btn{
    display:flex;
    flex-direction:column;

    padding:0;

    overflow:hidden;
}

.movie-list.thumb-mode .movie-thumb{
    display:block;

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;
}

.movie-list.thumb-mode .movie-title{

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;

    line-height:1.4;
    height:3.5em;

    padding:10px;

    text-align:left;
}

/* =================================
   サムネイル表示（3列　※1200px以上）
================================= */

@media (min-width:1200px){

    .movie-list.thumb-mode{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

/* --------------------------------
   動画ボタン共通
-------------------------------- */

.movie-btn{
    border:1px solid #d0d0d0;
    background:#f5f5f5;
    border-radius:8px;
    transition:.2s;
    cursor:pointer;

    text-decoration:none;
    color:inherit;

    display:block;
}

.movie-btn:hover{
    background:#e6f2ff;
    border-color:#86b7fe;
}

.movie-btn.active{
    background:#4584B8;
    border-color:#4584B8;

    color:#ffffff;
}

.movie-btn.active .movie-title{
    color:#ffffff;
}

.movie-btn-disabled{
    background:#eeeeee;
    color:#999999;

    cursor:default;
    pointer-events:none;
}

/* --------------------------------
   フッター
-------------------------------- */

footer{
    background-color:#4584B8;

    text-align:center;
    color:#ffffff;

    padding:20px 0;

    margin-top:30px;

}

footer p a{
    color:#ffffff !important;
}

footer .copyright{
    display:block;

    font-size:12px;

    margin-top:20px;
}

/* ===================================
   スマホ
=================================== */

@media (max-width:768px){

    #HEADER img{
        width:100px;
    }

    .movie-layout{
        display:block;
        padding:0;
        gap:0;
    }

    .movie-map-area{
        width:100%;

        position:sticky;
        top:0;
        z-index:100;

        height:35vh;

        background:#ffffff;

        padding:6px 6px 4px 6px;

        box-shadow:0 2px 10px rgba(0,0,0,.08);
    }

    .map-wrap{
        display:flex;

        justify-content:center;
        align-items:center;

        height:calc(35vh - 55px);

        max-width:100%;
    }

    .map-img{
        max-width:100%;
        max-height:100%;

        width:auto;
    }

    .movie-link-wrap{
        margin-top:4px;
    }

    .movie-link{
        width:100%;

        min-width:auto;

        padding:8px 12px;

        font-size:14px;
    }

    .movie-list-area{
        width:100%;

        height:65vh;

        padding:10px 10px 20px 10px;
    }

#filter-controls{
    display:flex;

    flex-direction:row;

    justify-content:space-between;

    align-items:center;

    gap:5px;
}

#filter-controls{
    display:flex;

    flex-direction:row;

    align-items:center;

    width:100%;
}

.filter-group{
    flex:1;

    display:flex;

    justify-content:center;
}

.filter-group label{
    display:none;
}

.filter-group select{
    width:90%;

    max-width:180px;
}


    .movie-list.thumb-mode{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .movie-list-scroll{
        padding-right:4px;
    }
}

/* ===================================
   地図なし版
=================================== */

.movie-layout.nomap{
    display:block;
}

.movie-layout.nomap .movie-list-area{
    width:100%;
    height:auto;
    overflow:visible;
}

.movie-layout.nomap .movie-list.thumb-mode{
    grid-template-columns:
        repeat(auto-fill,minmax(340px,1fr));
}

.movie-layout.nomap .movie-list.list-mode{
    max-width:1000px;

    margin-left:40px;
    margin-right:0;
}
@media (max-width:768px){

.movie-layout.nomap .movie-list.list-mode{
    margin-left:5px;
    }
}

/* ===================================
   動画カテゴリ
=================================== */
      #CONTENTS{
        /* background: #ffffff;
        background: -moz-linear-gradient(top, #F2F9FE 0%, #ffffff 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2F9FE), color-stop(100%,#ffffff));
        background: -webkit-linear-gradient(top, #F2F9FE 0%,#ffffff 100%);
        background: -o-linear-gradient(top, #F2F9FE 0%,#ffffff 100%);
        background: -ms-linear-gradient(top, #F2F9FE 0%,#ffffff 100%);
        background: linear-gradient(to bottom, #F2F9FE 0%,#ffffff 100%); */
        background: rgb(200,226,245);
        background: linear-gradient(180deg, rgba(200,226,245,1) 0%, rgba(255,255,255,1) 30%, rgba(242,249,254,1) 60%, rgba(242,249,254,1) 85%, rgba(255,255,255,1) 100%);
      }

.category-list{
    list-style:none;
    padding-left:0;
    margin:0;
}

.category-list li{
    margin-bottom:1rem;
}

.category-list h6{
    margin:0;
}

.category-list a{
    color:inherit;
    text-decoration:none;
}

.category-list a:hover{
    text-decoration:underline;
}