@charset "utf-8";

html.fixed { overflow-y:hidden; }


.menu_overlay {
    position:fixed; width:100vw; height:100vh; background:rgba(0,0,0,0.4); display:none; z-index:100;
    overscroll-behavior: contain;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: none;
}
.menu_overlay::before, .menu_overlay::after { content: ""; width: 1px; height: calc(100vh + 1px); display: flex; }
.menu_overlay::-webkit-scrollbar { display: none;}


/**************************************************************************************************
***************************************************************************************************

メニュー

***************************************************************************************************
**************************************************************************************************/ 

header .nav_wrap.menu_active { animation-name: menu_open;}
@keyframes menu_open{
    0%{ }
    20%{ border-radius:50px; right: 0%;}
    50%{
        transform-origin: 0% 100%;
        transform: scaleX(1.5) scaleY(0.2) skewX(-40deg);
        border-radius:50px;
        right:50%;
        margin-right:-550px;
    }
    80%{
        width: 1100px;
        height:90svh; 
        top: 50%;
        right:50%;
        margin-top:-45svh;
        margin-right:-550px;
        transform: scaleX(1) scaleY(1) skewX(10deg);
    }
    100%{
        width: 1100px;
        height:90svh; 
        border-radius:20px;
        top: 50%;
        right:50%;
        margin-top:-45svh;
        margin-right:-550px;
        transform: skewX(0deg);
        transform-origin: 0% 100%;
        background:rgba(252,35,72,1);
    }
}





header .nav_wrap.menu_active .btn_area, header .nav_wrap.menu_active .sns_area,
header .nav_wrap.program_active .btn_area, header .nav_wrap.program_active .sns_area,
header .nav_wrap.menu_active progress, header .nav_wrap.program_active progress
{ opacity:0; z-index:-1;}



.nav_wrap.menu_active .menu { text-align:left; position:absolute; top:0; height:100%;}
.nav_wrap.menu_active .menu .menu_inner::-webkit-scrollbar { width: 4px; height: 10px;}
.nav_wrap.menu_active .menu .menu_inner::-webkit-scrollbar-track { background:; }
.nav_wrap.menu_active .menu .menu_inner::-webkit-scrollbar-thumb { background: #cc0000; border-radius:20px; }

.menu_close { right:5px; top:5px; color:#fff; position:absolute;}
.menu_close:before { font-family:'Material Icons'; content:"\e5cd"; font-size:2.0rem; transition:0.2s;}
.modal_program .menu_close:before { color:#333;}
.menu_close:hover:before { opacity:0.7;}

.menu { display:none; padding:40px;}
.menu .menu_inner { display:flex; justify-content:space-between; height:100%; overflow-y:scroll;}
.menu .main_nav { width:75%; height:fit-content; color:#fff; border-right:1px solid #fff; padding-right:5%;}
.menu .main_nav .box + .box{ margin-top:50px;}
.menu .main_nav a { color:#fff; font-weight:600; text-decoration:none; transition:0.2s;}
.menu .main_nav .ttl { margin-bottom:40px; display:flex; justify-content:space-between; align-items:baseline;}
.menu .main_nav .ttl .tx { font-size:2.0rem; font-weight:900; line-height:1;}
.menu .main_nav .ttl .sub { font-size:0.8rem; font-weight:600; letter-spacing:0.05rem; line-height:1; color:#aa0000; display:block; font-family:"Poppins"; margin-left:3px; margin-top:10px;}
.menu .main_nav .cat_nav  { display:flex; flex-wrap:wrap; padding-left:5px; justify-content:space-between; padding-left:15px; position:relative;}
.menu .main_nav .cat_nav > li { width:calc( ( 100% - 30px ) / 4 ); margin-bottom:10px;}
.menu .main_nav .cat_nav > li > a { background:#fff; display:flex; flex-wrap:wrap; height:90px; border-radius:20px; justify-content:center; align-content:center; color:#333; transition:0.2s;}
.menu .main_nav .cat_nav > li > a:hover { color:#fc2348; transform:scale(1.2); box-shadow:0 0 15px rgba(0,0,0,0.1); border-color:#fc2348;}
.menu .main_nav .cat_nav > li > a .tx { width:100%; text-align:center; font-size:1.1rem;}
.menu .main_nav .cat_nav > li > a .sub { width:100%; text-align:center; margin-top:5px; font-size:0.8rem; color:#fc2348;}


/* drop menu 
****************************************************/
.menu .main_nav .cat_nav li.drop { }
.menu .main_nav .cat_nav li.drop:hover > .drop_item { z-index:1000; opacity:1;}
.menu .main_nav .drop_item { z-index:-1; opacity:0; position:absolute; top:90px; left:0; width:800px; transition:0.2s; padding:10px 0;}
.menu .main_nav .drop_item:before { content:""; display:inline-block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid rgba(204,0,0,0.9); position:absolute; top:-10px; left:7%;}
.menu .main_nav li.drop:nth-of-type(2) .drop_item:before, .menu .main_nav li.drop:nth-of-type(6) .drop_item:before { left:30%;}
.menu .main_nav li.drop:nth-of-type(3) .drop_item:before, .menu .main_nav li.drop:nth-of-type(7) .drop_item:before  { left:58%;}
.menu .main_nav li.drop:nth-of-type(4) .drop_item:before, .menu .main_nav li.drop:nth-of-type(8) .drop_item:before { left:80%;}
.menu .main_nav li.drop:nth-of-type(n+5) .drop_item { top:190px;}

.menu .main_nav .drop_item ul { display:flex; flex-wrap:wrap; padding:30px 30px 10px; background:rgba(204,0,0,0.9); border-radius: 20px; box-shadow:3px 3px 8px rgba(0,0,0,0.3);}
.menu .main_nav .drop_item li { width:calc( ( 100% - 30px ) / 2 ); margin-right:30px; margin-bottom:20px;}
.menu .main_nav .drop_item li:nth-of-type(2n) { margin-right:0;}
.menu .main_nav .drop_item li a { color:#fff; font-size:1rem; line-height:1.3; transition:0.2s}
.menu .main_nav .drop_item li a:hover { opacity:0.6;}

.menu .main_nav .tx_nav1  { display:flex; flex-wrap:wrap; padding-left:15px;}
.menu .main_nav .tx_nav1 li { width:calc( ( 100% - 60px ) / 3 ); margin-right:30px; margin-bottom:20px;}
.menu .main_nav .tx_nav1 li:nth-of-type(3n) { margin-right:0;}
.menu .main_nav .tx_nav1 li a:hover { opacity:0.7;}


.menu .sub_nav { width:20%;}
.menu .sub_nav .tx_nav2 li + li { margin-top:30px; }
.menu .sub_nav .tx_nav2 li a { font-size:1.2rem; color:#fff; text-decoration:none; font-weight:600; transition:0.2s;}
.menu .sub_nav .tx_nav2 li a:hover { opacity:0.7;}
.menu .sub_nav .banner_area { margin-top:80px; }
.menu .sub_nav .banner_area li + li { margin-top:20px; }
.menu .sub_nav .banner_area li a { display:block; background:#fff; border-radius:10px; overflow:hidden;}


/**************************************************************************************************
***************************************************************************************************

番組表

***************************************************************************************************
**************************************************************************************************/ 

header .nav_wrap.program_active { animation-name: program_open;}
@keyframes program_open{
    0%{ }
    20%{ border-radius:50px; right: 0%;}
    50%{
        transform-origin: 0% 100%;
        transform: scaleX(1.5) scaleY(0.2) skewX(-40deg);
        border-radius:50px;
        right:50%;
        margin-right:-550px;
    }
    80%{
        width: 1100px;
        height:90svh; 
        top: 50%;
        right:50%;
        margin-top:-45svh;
        margin-right:-550px;
        transform: scaleX(1) scaleY(1) skewX(10deg);
    }
    100%{
        width: 1100px;
        height:90svh; 
        border-radius:20px;
        top: 50%;
        right:50%;
        margin-top:-45svh;
        margin-right:-550px;
        transform: skewX(0deg);
        transform-origin: 0% 100%;
        background:#f5f5f5;
    }
}
.modal_program { display:none;}

header .nav_wrap.program_active .modal_program { position:absolute; top:0; height:100%; padding:40px;}
.nav_wrap.program_active .program_table::-webkit-scrollbar { width: 4px; height: 10px;}
.nav_wrap.program_active .program_table::-webkit-scrollbar-track { background:; }
.nav_wrap.program_active .program_table::-webkit-scrollbar-thumb { background: #999; border-radius:20px; }

.modal_program .modal_inner { overflow:hidden; height:100%;}
.modal_program .modal_inner .ttl { margin-bottom:30px;}
.modal_program .modal_inner .ttl .year { font-family:"poppins"; font-weight:600; font-size:1.2rem; }
.modal_program .modal_inner .ttl .block2 { display:flex; align-items:baseline;}
.modal_program .modal_inner .ttl .block2 .date { font-family:"poppins"; font-size:2.7rem; line-height:1; font-weight:600; margin-bottom:-5px; color:#fc2348;}
.modal_program .modal_inner .ttl .block2 .date span { font-weight:900; font-size: 2.2rem; display: inline-block; vertical-align: middle; margin: -0.6rem 5px 0 5px;}
.modal_program .modal_inner .ttl .block2 .youbi { font-family:"poppins"; font-size:1.2rem; line-height:1; font-weight:600; margin-right:30px;}
.modal_program .modal_inner .ttl .block2 .tx { font-size:2.6rem; line-height:1; font-weight:900;}
.modal_program .column_wrap { display:flex; justify-content:space-between; height:calc(100% - 100px); }
.modal_program .nav_area { width:200px;}
.modal_program .nav_area li + li { margin-top:30px; }
.modal_program .nav_area li a { font-size:1.2rem; color:#333; text-decoration:none; font-weight:600; transition:0.2s;}
.modal_program .nav_area li a:hover { opacity:0.7;}
.modal_program .program_area { width:calc( 100% - 200px - 50px );padding:25px 15px 15px; border-radius:10px; background:#fff;}
.modal_program .channel_name { display:flex; justify-content:center; margin-bottom:20px;}
.modal_program .channel_name p { width:calc( 100% / 2 ); text-align:center; font-size:1.6rem; font-weight:900; line-height:1;}
.modal_program .program_table { overflow-y:scroll; height:calc(100% - 45px); }
.modal_program .program_table .time_group { display:flex; justify-content:space-between; margin-bottom:3px;}
.modal_program .program_table .time_group .time_main,
.modal_program .program_table .time_group .time_mirai { width:30px;background:#fc2348; color:#fff; border-radius:10px; min-height:30px; font-weight:600; display:flex; align-items:center; justify-content:center;}
.modal_program .program_table .time_group .list_main,
.modal_program .program_table .time_group .list_mirai { width:calc(( 100% - 60px ) / 2 ); padding:0 15px;}
.modal_program .program_table .time_group article { padding:15px 0; border-top:1px dashed #ccc;}
.modal_program .program_table .time_group article .start_time { font-weight:600; margin-bottom:5px; color:#fc2348;}
.modal_program .program_table .time_group article .title { font-size:0.9rem;}



/**************************************************************************************************
***************************************************************************************************

共通 モーダル閉じる

***************************************************************************************************
**************************************************************************************************/ 
header .nav_wrap.close {
animation-name: menu_close;
width: 1100px;
height:800px; 
border-radius:20px;
top: 50%;
right:50%;
margin-top:-400px;
margin-right:-550px;
background:rgba(252,35,72,1);
}
@keyframes menu_close{
    0%{
      transform-origin: 100% 100%;
    }
    20%{
      width: 1100px;
      height:90svh; 
      top: 50%;
      right:50%;
      margin-top:-44svh;
      margin-right:-550px;
      transform-origin: 100% 100%;
      transform: skewX(15deg);
    }
    50%{
    }
    80%{
    }
    100%{
      width:90px;
      height:100vh;
      border-radius:0;
      top: 0;
      right:0;
      margin-top:0;
      margin-right:0;
      transform: skewX(0deg);
      transform-origin: 0% 0%;
      background:rgba(252,35,72,0.8);
    }
}

/**************************************************************************************************
***************************************************************************************************

PickUp

***************************************************************************************************
**************************************************************************************************/ 

.pickup_overlay {
    position:fixed; width:100vw; height:100vh; background:rgba(0,0,0,0.4); display:none; z-index:100;
    overscroll-behavior: contain;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: none;
}
.pickup_overlay::before, .pickup_overlay::after { content: ""; width: 1px; height: calc(100vh + 1px); display: flex; }
.pickup_overlay::-webkit-scrollbar { display: none;}

.main_image .pickup_cont { position:absolute; left:20px; bottom:20px; background:rgba(252,35,72,0.5);  border-radius:50%; width:300px; height:300px; cursor:pointer; transition:0.3s; z-index:1;
 animation-duration: 0.7s; animation-delay:.1s; animation-iteration-count: 1; animation-fill-mode: forwards;}
.main_image .pickup_cont:hover { background:rgba(252,35,72,0.9); }
.main_image .pickup_cont > .inner { width:100%; height:100%; position:relative; display:flex; align-content:center; justify-content:center; flex-wrap:wrap;}
.main_image .pickup_cont .inner .obj { position:absolute; top:10px; left:10px; width:280px; height:280px; background:url(../images/tx_circle_obj01.png) 0 0 no-repeat; background-size:280px auto; animation:20s linear infinite rotation1;}
.main_image .pickup_cont .inner .icon_img { width:70px; margin-bottom:10px;}
.main_image .pickup_cont .inner .tx { color:#fff; font-size:2.4rem; font-weight:900;line-height:1.2; text-align:center; width:100%;}
.main_image .pickup_cont .inner .tx span { font-size:1.0rem; font-weight:900;}
@keyframes rotation1{
    0%{ transform:rotate(0);}
    100%{ transform:rotate(360deg); }
}

.pickup { display:none; }

.main_image .pickup_cont.active { animation-name:pickup_open; z-index: 120; position:fixed; cursor:unset;}
@keyframes pickup_open{
    0%{ }
    20%{
        transform: scaleX(0.8) scaleY(0.1);
        transform-origin: 50% 100%;
    }
    40%{
        transform: scaleX(0.8) scaleY(0.1);
        transform-origin: 50% 100%;
        left:20px; bottom:20px;  width:300px; height:300px;
        margin-bottom:0;
        margin-left:0;
        border-radius:50%;
    }
    80%{
        width: 500px;
        height:90svh; 
        bottom: 50%;
        left:50%;
        margin-bottom:-45svh;
        margin-left:-250px;
        transform: scaleX(1) scaleY(1) skewX(-10deg);
        transform-origin: 100% 100%;
    }
    100%{
        width: 500px;
        height:90svh; 
        border-radius:20px;
        bottom: 50%;
        left:50%;
        margin-bottom:-45svh;
        margin-left:-250px;
        transform: skewX(0deg);
        transform-origin: 100% 100%;
        background:#fff;
        z-index:120;
    }
}

.main_image .pickup_cont.close {
animation-name: pickup_close;
width: 500px;
height:90svh; 
border-radius:20px;
bottom: 50%;
left:50%;
margin-bottom:-45svh;
margin-left:-250px;
background:#fff;
}
@keyframes pickup_close{
    0%{ transform-origin: 100% 100%;}
    20%{
        width: 500px;
        height:90svh; 
        border-radius:20px;
        bottom: 50%;
        left:50%;
        margin-bottom:-45svh;
        margin-left:-250px;
        transform: skewX(-15deg);
        transform-origin: 100% 100%;
        background:#fff;
        z-index:120;
    }
    50%{
        border-radius:50%;
    }
    100%{
        width:300px;
        height:300px; 
        border-radius:50%;
        bottom:20px;
        left:20px;
        margin-bottom:0;
        margin-left:0;
        transform: skewX(0deg);
        background:rgba(252,35,72,0.5);
        z-index:1;
    }    

}

.pickup_cont.active .pickup { position:absolute; top:0; left:0; height:100%; width:100%; padding:20px 40px;}
.pickup_cont.active .pickup .inner { overflow-y:scroll; height:90%;}
.pickup_cont.active .pickup .inner::-webkit-scrollbar { width: 4px; height: 10px;}
.pickup_cont.active .pickup .inner::-webkit-scrollbar-track { background:; }
.pickup_cont.active .pickup .inner::-webkit-scrollbar-thumb { background: #999; border-radius:20px; }

.pickup_cont.active .pickup .ttl_wrap { display:flex; align-items:center; width:100%; margin-bottom:5px;}
.pickup_cont.active .pickup .ttl_wrap .date { font-family:"poppins"; font-weight:600; font-size:3.4rem; line-height:1; position: relative;}
.pickup_cont.active .pickup .ttl_wrap .date span { font-size:2.6rem; display:inline-block; vertical-align: middle; margin: -0.9rem 5px 0 5px;}
.pickup_cont.active .pickup .ttl_wrap .date .youbi { font-size: 1.0rem; line-height: 1; font-weight: 600; margin-top:10px; }
.pickup_cont.active .pickup .ttl_wrap .date .year { font-size: 0.9rem; width:100%; margin:0;}
.pickup_cont.active .pickup .ttl_wrap .title { display:inline-block; position:relative; line-height:1; margin-top:-13px;}
.pickup_cont.active .pickup .ttl_wrap .title .logo { width:90px; margin-right:20px; margin-left: -3px; margin-right:0;}
.pickup_cont.active .pickup .ttl_wrap .title .tx1 { display:block; font-weight:900; font-size:1.6rem; font-weight:900; color:#fc2348;}

.pickup_cont.active .pickup .osusume_list { background:#fff; }
.pickup_cont.active .pickup .osusume_list li + li { margin-top:10px;}
.pickup_cont.active .pickup .osusume_list li a { display:block; position:relative; text-decoration:none; border-radius:10px; overflow:hidden;}
.pickup_cont.active .pickup .osusume_list li a img { border-radius:10px; transition:all 4.0s 0s linear;}
.pickup_cont.active .pickup .osusume_list li a .tx { background:rgba(0,0,0,0.5); padding:3px 7px; color:#fff; position:absolute; width:100%; border-radius:0 0 10px 10px; bottom:0; left:0; text-align:left;}
.pickup_cont.active .pickup .osusume_list li a:hover img { transform:scale(1.2); opacity:1;}
.pickup_cont.active .pickup .osusume_list li a .tx .wrap {}
.pickup_cont.active .pickup .osusume_list li a .tx .ttl { font-weight:600; font-size:1.0rem;}
.pickup_cont.active .pickup .osusume_list li a .tx .sub { color:#fff100; font-size:0.8rem; margin-top:2px;}
.pickup_cont.active .pickup .osusume_list li a .tx .desc { font-size:0.9rem; margin-top:5px; text-align:left; display:none;}

/* 旧記述用 */
.pickup_cont.active .pickup .osusume_list li a .tx > h2 { font-weight:600; font-size:1.0rem;}
.pickup_cont.active .pickup .osusume_list li a .tx > h2 em { color:#fff100; font-size:0.8rem; font-weight:normal; display:block; margin-top:2px; }
.pickup_cont.active .pickup .osusume_list li a .tx > h2 em span { font-size:0.8rem; font-weight:normal;}
.pickup_cont.active .pickup .osusume_list li a .tx > h2 + p { font-size:0.9rem; margin-top:5px; text-align:left; display:none;}



.pickup_close { right:5px; top:5px; color:#333; position:absolute;}
.pickup_close:before { font-family:'Material Icons'; content:"\e5cd"; font-size:2.0rem; transition:0.2s;}
.pickup_close:hover:before { opacity:0.7;}




/*********************************************
 1200px
**********************************************/
@media screen and (max-width: 1200px){




    /**************************************************************************************************
    ***************************************************************************************************

    メニュー 1200

    ***************************************************************************************************
    **************************************************************************************************/ 
    header .nav_wrap.menu_active { animation-name: menu_open;}
    @keyframes menu_open{
        0%{ }
        20%{ border-radius:50px; right: 0%;}
        50%{
            transform-origin: 0% 100%;
            transform: scaleX(1.5) scaleY(0.2) skewX(-40deg);
            border-radius:50px;
            right:50%;
            margin-right:-450px;
        }
        80%{
            width: 900px;
            height:90svh; 
            top: 50%;
            right:50%;
            margin-top:-45svh;
            margin-right:-450px;
            transform: scaleX(1) scaleY(1) skewX(10deg);
        }
        100%{
            width: 900px;
            height:90svh; 
            border-radius:20px;
            top: 50%;
            right:50%;
            margin-top:-45svh;
            margin-right:-450px;
            transform: skewX(0deg);
            transform-origin: 0% 100%;
            background:rgba(252,35,72,1);
        }
    }


    .menu { padding:50px 30px 30px;}
    .menu .main_nav { width:75%;}
    .menu .main_nav .box + .box{ margin-top:40px;}
    .menu .main_nav .ttl { margin-bottom:20px;}
    .menu .main_nav .cat_nav > li > a { height:70px;}
    .menu .main_nav .cat_nav > li > a .tx { font-size:1.0rem;}
    .menu .main_nav .cat_nav > li > a .sub { font-size:0.7rem;}


/* drop menu 
****************************************************/
.menu .main_nav .cat_nav li.drop { }
.menu .main_nav .cat_nav li.drop:hover > .drop_item { z-index:1000; opacity:1;}
.menu .main_nav .drop_item { z-index:-1; opacity:0; position:absolute; top:70px; left:0; width:650px; transition:0.2s; padding:10px 0;}
.menu .main_nav .drop_item:before { content:""; display:inline-block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid rgba(204,0,0,0.9); position:absolute; top:-10px; left:50px;}
.menu .main_nav li.drop:nth-of-type(2) .drop_item:before, .menu .main_nav li.drop:nth-of-type(6) .drop_item:before { left:190px;}
.menu .main_nav li.drop:nth-of-type(3) .drop_item:before, .menu .main_nav li.drop:nth-of-type(7) .drop_item:before  { left:380px;}
.menu .main_nav li.drop:nth-of-type(4) .drop_item:before, .menu .main_nav li.drop:nth-of-type(8) .drop_item:before { left:540px;}
.menu .main_nav li.drop:nth-of-type(n+5) .drop_item { top:150px;}

.menu .main_nav .drop_item ul { display:flex; flex-wrap:wrap; padding:30px 30px 10px; background:rgba(204,0,0,0.9); border-radius: 20px; box-shadow:3px 3px 8px rgba(0,0,0,0.3);}
.menu .main_nav .drop_item li { width:calc( ( 100% - 30px ) / 2 ); margin-right:30px; margin-bottom:20px;}
.menu .main_nav .drop_item li:nth-of-type(2n) { margin-right:0;}
.menu .main_nav .drop_item li a { color:#fff; font-size:1rem; line-height:1.3; transition:0.2s}
.menu .main_nav .drop_item li a:hover { opacity:0.6;}

    .menu .main_nav .tx_nav1  { display:flex; flex-wrap:wrap; padding-left:15px;}
    .menu .main_nav .tx_nav1 li { width:calc( ( 100% - 60px ) / 3 ); margin-right:30px; margin-bottom:20px;}
    .menu .main_nav .tx_nav1 li:nth-of-type(3n) { margin-right:0;}
    .menu .sub_nav .tx_nav2 li a { font-size:1.0rem;}


    /**************************************************************************************************
    ***************************************************************************************************

    番組表 1200

    ***************************************************************************************************
    **************************************************************************************************/ 

    header .nav_wrap.program_active { animation-name: program_open;}
    @keyframes program_open{
        0%{ }
        20%{ border-radius:50px; right: 0%;}
        50%{
            transform-origin: 0% 100%;
            transform: scaleX(1.5) scaleY(0.2) skewX(-40deg);
            border-radius:50px;
            right:50%;
            margin-right:-450px;
        }
        80%{
            width: 900px;
            height:90svh; 
            top: 50%;
            right:50%;
            margin-top:-45svh;
            margin-right:-450px;
            transform: scaleX(1) scaleY(1) skewX(10deg);
        }
        100%{
            width: 900px;
            height:90svh; 
            border-radius:20px;
            top: 50%;
            right:50%;
            margin-top:-45svh;
            margin-right:-450px;
            transform: skewX(0deg);
            transform-origin: 0% 100%;
            background:#f5f5f5;
        }
    }

    header .nav_wrap.program_active .modal_program { padding:30px;}
    .modal_program .modal_inner .ttl { margin-bottom:20px;}
    .modal_program .modal_inner .ttl .block2 { margin-top:5px;}
    .modal_program .modal_inner .ttl .block2 .date { font-size:2.1rem;}
    .modal_program .modal_inner .ttl .block2 .youbi { font-size:1.0rem; margin-right:20px;}
    .modal_program .modal_inner .ttl .block2 .tx { font-size:2.1rem; }
    .modal_program .column_wrap { height: calc(100% - 90px);}
    .modal_program .nav_area { width:180px;}
    .modal_program .program_area { width:calc( 100% - 180px - 40px ); padding-top:20px;}
    .modal_program .channel_name { margin-bottom:15px;}
    .modal_program .channel_name p { font-size:1.3rem;}
    .modal_program .program_table {  height:calc(100% - 30px); }

    /**************************************************************************************************
    ***************************************************************************************************

    共通 モーダル閉じる

    ***************************************************************************************************
    **************************************************************************************************/ 
    header .nav_wrap.close {
    animation-name: menu_close;
    width: 900px;
    height:90svh; 
    border-radius:20px;
    top: 50%;
    right:50%;
    margin-top:-45svh;
    margin-right:-450px;
    background:rgba(252,35,72,1);
    }
    @keyframes menu_close{
        0%{
          transform-origin: 100% 100%;
        }
        20%{
          width: 900px;
          height:90svh; 
          top: 50%;
          right:50%;
          margin-top:-45svh;
          margin-right:-450px;
          transform-origin: 100% 100%;
          transform: skewX(15deg);
        }
        50%{
        }
        80%{
        }
        100%{
          width:90px;
          height:100vh;
          border-radius:0;
          top: 0;
          right:0;
          margin-top:0;
          margin-right:0;
          transform: skewX(0deg);
          transform-origin: 0% 0%;
          background:rgba(252,35,72,0.8);
        }
    }

    /**************************************************************************************************
    ***************************************************************************************************

    PickUp 1200

    ***************************************************************************************************
    **************************************************************************************************/ 

    .main_image .pickup_cont { transform: scale(0.7); left: -20px; bottom: -20px;}
/*
    @keyframes pickup_open{
        0%{ }
        20%{
            transform: scaleX(0.8) scaleY(0.1);
            transform-origin: 50% 100%;
        }
        40%{
            transform: scaleX(0.8) scaleY(0.1);
            transform-origin: 50% 100%;
            left:20px; bottom:20px;  width:300px; height:300px;
            margin-bottom:0;
            margin-left:0;
            border-radius:50%;
        }
        80%{
            width: 900px;
            height:90svh; 
            bottom: 50%;
            left:50%;
            margin-bottom:-45svh;
            margin-left:-450px;
            transform: scaleX(1) scaleY(1) skewX(-10deg);
            transform-origin: 100% 100%;
        }
        100%{
            width: 900px;
            height:90svh; 
            border-radius:20px;
            bottom: 50%;
            left:50%;
            margin-bottom:-45svh;
            margin-left:-450px;
            transform: skewX(0deg);
            transform-origin: 100% 100%;
            background:#fff;
            z-index:120;
        }
    }

    .main_image .pickup_cont.close {
        animation-name: pickup_close;
        width: 900px;
        height:90svh; 
        border-radius:20px;
        bottom: 50%;
        left:50%;
        margin-bottom:-45svh;
        margin-left:-450px;
        transform: skewX(0deg);
        transform-origin: 100% 100%;
        background:#fff;
        z-index:120;
    }
    @keyframes pickup_close{
        0%{ transform-origin: 100% 100%;}
        20%{
            width: 900px;
            height:90svh; 
            border-radius:20px;
            bottom: 50%;
            left:50%;
            margin-bottom:-45svh;
            margin-left:-450px;
            transform: skewX(-15deg);
            transform-origin: 100% 100%;
            background:#fff;
            z-index:120;
        }
        50%{
            border-radius:50%;
        }
        100%{
            width:300px;
            height:300px; 
            transform: skewX(0deg) scale(0.7);
            border-radius:50%;
            bottom:-20px;
            left:-20px;
            margin-bottom:0;
            margin-left:0;
            background:rgba(252,35,72,0.5);
            z-index:1;
            transform-origin: 50% 50%;
        }    

    }
}
*/



/*********************************************
 1000px
**********************************************/
@media screen and (max-width: 1000px){




    /**************************************************************************************************
    ***************************************************************************************************

    メニュー 1000

    ***************************************************************************************************
    **************************************************************************************************/ 
    header .nav_wrap.menu_active { animation-name: menu_open; position:fixed; padding-left:0;}
    @keyframes menu_open{
        0%{ }
        20%{ border-radius:50px;}
        50%{
            transform-origin: 0% 100%;
            transform: scaleX(1.5) scaleY(0.2) skewX(-40deg);
            border-radius:50px;
            right:50%;
            margin-right:-450px;
        }
        80%{
            width: 90vw;
            height:90svh; 
            border-radius:20px;
            top: 50%;
            right:50%;
            margin-top:-45svh;
            margin-right:-45vw;
            transform-origin: 0% 100%;
            background:rgba(252,35,72,1);
            transform: scaleX(1) scaleY(1) skewX(10deg);
        }
        100%{
            width: 90vw;
            height:90svh; 
            border-radius:20px;
            top: 50%;
            right:50%;
            margin-top:-45svh;
            margin-right:-45vw;
            transform: skewX(0deg);
            transform-origin: 0% 100%;
            background:rgba(252,35,72,1);
        }
    }

    .menu_close { right: 5px; top: 5px;}
    .menu_close:before { font-size:2rem;}

    .menu .menu_inner { display:block; height:100%; overflow-y:scroll;}
    .menu .main_nav { width:auto; border:0;}
    .menu .main_nav .box + .box{ margin-top:60px;}
    .menu .main_nav .ttl { margin-bottom:30px;}
    .menu .main_nav .ttl .tx { font-size:2.0rem; font-weight:900; line-height:1;}
    .menu .main_nav .ttl .sub { font-size:0.8rem; font-weight:600; letter-spacing:0.05rem; line-height:1; color:#aa0000; display:block; font-family:"Poppins"; margin-left:3px; margin-top:10px;}
    .menu .main_nav .cat_nav  { display:block; padding-left:15px;}
    .menu .main_nav .cat_nav > li { width:auto; margin-bottom:10px;}
    .menu .main_nav .cat_nav > li > a { height:auto; border-radius:10px; justify-content:flex-start; align-items:center; padding:10px; display:flex; justify-content:space-between;}
    .menu .main_nav .cat_nav > li > a i { font-size:1.6rem; margin-right:15px;}
    .menu .main_nav .cat_nav > li > a .tx { width:auto; text-align:left; margin-top:0; font-size:1rem;}
    .menu .main_nav .cat_nav > li > a .sub { width:auto; font-size:0.7rem;}
    .menu .sp_drop_btn { display:flex; align-items:center; border-radius:10px; background:#fff; font-weight:600; color:#333; padding:10px; margin-left:15px;}
    .menu .sp_drop_btn i { font-size:1.6rem; margin-right:15px;}

    /* drop menu 
    ****************************************************/
    .menu .main_nav .cat_nav li.drop > a { pointer-events:none; }
    .menu .main_nav .cat_nav li.drop:hover > .drop_item { z-index:inherit; opacity:inherit;}
    .menu .main_nav .drop_item { display:none; opacity:1; position:relative; top:auto!important; left:auto; width:100%; transition:none; margin-bottom:15px;}
    .menu .main_nav .drop_item:before { position:absolute; top:-10px!important; left:30px!important; z-index:10;}
    .menu .main_nav .drop_item ul { display:flex; flex-wrap:wrap; padding:30px 30px 10px; box-shadow:none}
    .menu .main_nav .drop_item li { width:calc( ( 100% - 30px ) / 2 ); margin-right:30px; margin-bottom:20px;}
    .menu .main_nav .drop_item li:nth-of-type(2n) { margin-right:0;}
    .menu .main_nav .drop_item li a { padding:0}
    .menu .main_nav .drop_item li a:hover { opacity:0.6;}

    .menu .main_nav .company_nav .nav_wrap  { display:none; padding:30px 0;}
    .menu .main_nav .tx_nav1  {}
    .menu .main_nav .tx_nav1 li { width:calc( ( 100% - 40px ) / 2 ); margin-right:40px; margin-bottom:30px;}
    .menu .main_nav .tx_nav1 li:nth-of-type(2n) { margin-right:0;}
    .menu .main_nav .tx_nav1 li:nth-of-type(3n) { margin-right:auto;}
    .sp_accordion { display:none; padding-top:20px; }
    .menu .sub_nav { width:auto; border-left:none; border-top:1px solid #fff; padding-left:0; padding-top:40px; margin-top:40px;}
    .menu .sub_nav .tx_nav2 li + li { margin-top:30px; }
    .menu .sub_nav .tx_nav2 li a { font-size:1.0rem;}
    .menu .sub_nav .banner_area { margin-top:60px; display:flex; flex-wrap:wrap;}
    .menu .sub_nav .banner_area li { width:calc( ( 100% - 30px ) / 2); margin-right:30px; }
    .menu .sub_nav .banner_area li:nth-of-type(2n) { margin-right:0;}
    .menu .sub_nav .banner_area li + li { margin-top:auto; }



    /**************************************************************************************************
    ***************************************************************************************************

    番組表 1000

    ***************************************************************************************************
    **************************************************************************************************/ 

    header .nav_wrap.program_active { animation-name: program_open; position:fixed;padding-left:0;}
    @keyframes program_open{
        0%{ }
        20%{ border-radius:50px;}
        50%{
            transform-origin: 0% 100%;
            transform: scaleX(1.5) scaleY(0.2) skewX(-40deg);
            border-radius:50px;
            right:50%;
            margin-right:-450px;
        }
        80%{
            width: 90vw;
            height:90svh; 
            border-radius:20px;
            top: 50%;
            right:50%;
            margin-top:-45svh;
            margin-right:-45vw;
            transform-origin: 0% 100%;
            background:rgba(255,255,255,0.5);
            transform: scaleX(1) scaleY(1) skewX(10deg);
        }
        100%{
            width: 90vw;
            height:90svh; 
            border-radius:20px;
            top: 50%;
            right:50%;
            margin-top:-45svh;
            margin-right:-45vw;
            transform: skewX(0deg);
            transform-origin: 0% 100%;
            background:#f5f5f5;
        }
    }

    .modal_program .modal_inner .ttl { margin-bottom: 15px; }
    .modal_program .modal_inner .ttl .year { font-size:1rem; }
    .modal_program .modal_inner .ttl .block2 .date { font-size:1.5rem;}
    .modal_program .modal_inner .ttl .block2 .youbi { font-size:0.9rem; margin-right:10px;}
    .modal_program .modal_inner .ttl .block2 .tx { font-size:1.5rem;}
    .modal_program .column_wrap { display:block; height: calc(100% - 60px);}
    .modal_program .nav_area { width:auto; margin-top:20px;}
    .modal_program .nav_area ul { display:flex; justify-content:space-between;}
    .modal_program .nav_area li { width:calc((100% - 20px) / 2 );}
    .modal_program .nav_area li + li { margin-top:0; }
    .modal_program .nav_area li a { font-size:1rem;}
    .modal_program .program_area { width:auto; height: calc(100% - 50px); padding:15px 15px 15px;}
    .modal_program .channel_name { display:flex; justify-content:center;}
    .modal_program .channel_name p { font-size:1.0rem;}
    .modal_program .program_table .time_group .time_mirai { display:none;}
    .modal_program .program_table .time_group .list_main,
    .modal_program .program_table .time_group .list_mirai { width:calc(( 100% - 30px ) / 2 );}

    /**************************************************************************************************
    ***************************************************************************************************

    共通 モーダル閉じる

    ***************************************************************************************************
    **************************************************************************************************/ 
    header .nav_wrap.close {
    animation-name: menu_close;
    width: 90vw;
    height:90svh; 
    top: 50%;
    right:50%;
    margin-top:-45svh;
    margin-right:-45vw;
    background:rgba(252,35,72,1);
    }
    @keyframes menu_close{
        0%{
          transform-origin: 100% 100%;
        }
        60%{
          width:80px;
          height:40px;
          border-radius:0 0 0 30px;
          top: 0;
          right:0;
          margin-top:0;
          margin-right:0;
          transform: skewX(0deg);
          transform-origin: 0% 0%;
          background:rgba(252,35,72,0.8);
        }
         80%{
          width:80px;
          height:40px;
          border-radius:0 0 0 30px;
          top: 0;
          right:0;
          margin-top:0;
          margin-right:0;
          transform: skewX(0deg);
          transform-origin: 0% 0%;
          background:rgba(252,35,72,0.8);
        }
        100%{
          width:150px;
          height:70px;
          border-radius:0 0 0 30px;
          top: 0;
          right:0;
          margin-top:0;
          margin-right:0;
          transform: skewX(0deg);
          transform-origin: 0% 0%;
          background:rgba(252,35,72,0.8);
        }
    }

    /**************************************************************************************************
    ***************************************************************************************************

    PickUp 1000

    ***************************************************************************************************
    **************************************************************************************************/ 

    .main_image .pickup_cont { transform: scale(0.5); left: -70px; bottom: -70px;}
/*
    .main_image .pickup_cont.active { animation-name:pickup_open;}
    @keyframes pickup_open{
        0%{ }
        20%{
            transform: scaleX(0.8) scaleY(0.1);
            transform-origin: 50% 100%;
        }
        40%{
            transform: scaleX(0.8) scaleY(0.1);
            transform-origin: 50% 100%;
            left:0; bottom:20px;  width:300px; height:300px;
            margin-bottom:0;
            margin-left:0;
            border-radius:50%;
        }
        80%{
            width: 90vw;
            height:90svh; 
            bottom: 50%;
            left:50%;
            margin-bottom:-45svh;
            margin-left:-45vw;
            transform: scaleX(1) scaleY(1) skewX(-10deg);
            transform-origin: 100% 100%;
        }
        100%{
            width: 90vw;
            height:90svh; 
            bottom: 50%;
            left:50%;
            margin-bottom:-45svh;
            margin-left:-45vw;
            border-radius:20px;
            transform: skewX(0deg);
            transform-origin: 100% 100%;
            background:#fff;
            z-index:120;
        }
    }

    .main_image .pickup_cont.close {
        animation-name: pickup_close;
        width: 90vw;
        height:90svh; 
        border-radius:20px;
        bottom: 50%;
        left:50%;
        margin-bottom:-45svh;
        margin-left:-45vw;
        transform: skewX(0deg);
        transform-origin: 100% 100%;
        background:#fff;
        z-index:120;
    }
    @keyframes pickup_close{
        0%{ transform-origin: 100% 100%;}
        20%{
            width: 90vw;
            height:90svh; 
            border-radius:20px;
            bottom: 50%;
            left:50%;
            margin-bottom:-45svh;
            margin-left:-45vw;
            transform: skewX(-15deg);
            transform-origin: 100% 100%;
            background:#fff;
            z-index:120;
        }
        50%{
            border-radius:50%;
        }
        100%{
            width:300px;
            height:300px; 
            transform: skewX(0deg) scale(0.5);
            border-radius:50%;
            bottom:-70px;
            left:-70px;
            margin-bottom:0;
            margin-left:0;
            background:rgba(252,35,72,0.5);
            z-index:1;
            transform-origin: 50% 50%;
        }    

    }
    .pickup_cont.active .pickup { padding:30px; }
    .pickup_cont.active .pickup .inner { height:90%; }
    .pickup_cont.active .pickup .ttl_wrap .title { font-size:1.8rem; }
    .pickup_cont.active .pickup .ttl_wrap .title:before { height:50px; margin-right:20px; }
    .pickup_cont.active .pickup .ttl_wrap .title:after { height:50px; margin-right:20px; }
    .pickup_cont.active .pickup .osusume_list li a .tx { position:unset; background:none; color:#333; padding:15px 0; }
    .pickup_cont.active .pickup .osusume_list li a .tx .wrap { display:block; margin-bottom:10px; }
    .pickup_cont.active .pickup .osusume_list li a .tx .ttl { text-align:left; margin-bottom:5px;}
    .pickup_cont.active .pickup .osusume_list li a .tx .sub { text-align:left; color:#fc2348; }
    .pickup_close { right: -15px; top: -15px;}

    /* 旧記述用 */

/*
    .pickup_cont.active .pickup .osusume_list li a .tx > h2 { display:block; margin-bottom:10px; text-align:left; margin-bottom:5px;}
    .pickup_cont.active .pickup .osusume_list li a .tx > h2 em { text-align:left; margin-bottom:10px; color:#fc2348; display:block; margin-top:5px;}

    .pickup_close { right: 5px; top: 5px;}
    .pickup_close:before { font-size:2rem; color:#333;}
*/
}

/*********************************************
 680px
**********************************************/
@media screen and (max-width: 680px){
    .menu { padding:40px 20px 20px; }
    .menu .main_nav { border:0; padding-right:10px;}
    .menu .main_nav .drop_item ul { display:block; }
    .menu .main_nav .drop_item ul li { width:auto; margin-right:0;}
    header .nav_wrap.program_active .modal_program { padding: 20px 10px; }
    .modal_program .program_area { padding: 15px 10px 15px; }
    .modal_program .program_table .time_group .time_main { width:20px; font-size:0.8rem; }
    .modal_program .program_table .time_group .list_main, .modal_program .program_table .time_group .list_mirai { padding:0 5px; }
    .modal_program .program_table .time_group article .start_time { font-size:0.9rem; }
    .modal_program .program_table .time_group article .title { font-size:0.7rem; }
    .modal_program .modal_inner .ttl { margin-bottom:15px; }

    @keyframes pickup_open{
        0%{ }
        20%{
            transform: scaleX(0.8) scaleY(0.1);
            transform-origin: 50% 100%;
        }
        40%{
            transform: scaleX(0.8) scaleY(0.1);
            transform-origin: 50% 100%;
            left:0; bottom:20px;  width:300px; height:300px;
            margin-bottom:0;
            margin-left:0;
            border-radius:50%;
        }
        80%{
            width: 90vw;
            height:90svh; 
            bottom: 50%;
            left:50%;
            margin-bottom:-45svh;
            margin-left:-45vw;
            transform: scaleX(1) scaleY(1) skewX(-10deg);
            transform-origin: 100% 100%;
        }
        100%{
            width: 90vw;
            height:90svh; 
            bottom: 50%;
            left:50%;
            margin-bottom:-45svh;
            margin-left:-45vw;
            border-radius:20px;
            transform: skewX(0deg);
            transform-origin: 100% 100%;
            background:#fff;
            z-index:120;
        }
    }

    .main_image .pickup_cont.close {
        animation-name: pickup_close;
        width: 90vw;
        height:90svh; 
        border-radius:20px;
        bottom: 50%;
        left:50%;
        margin-bottom:-45svh;
        margin-left:-45vw;
        transform: skewX(0deg);
        transform-origin: 100% 100%;
        background:#fff;
        z-index:120;
    }
    @keyframes pickup_close{
        0%{ transform-origin: 100% 100%;}
        20%{
            width: 90vw;
            height:90svh; 
            border-radius:20px;
            bottom: 50%;
            left:50%;
            margin-bottom:-45svh;
            margin-left:-45vw;
            transform: skewX(-15deg);
            transform-origin: 100% 100%;
            background:#fff;
            z-index:120;
        }
        50%{
            border-radius:50%;
        }
        100%{
            width:300px;
            height:300px; 
            transform: skewX(0deg) scale(0.5);
            border-radius:50%;
            bottom:-70px;
            left:-70px;
            margin-bottom:0;
            margin-left:0;
            background:rgba(252,35,72,0.5);
            z-index:1;
            transform-origin: 50% 50%;
        }    

    }


    .pickup_cont.active .pickup { padding:25px;}
    .pickup_cont.active .pickup .inner { height:92%;}
    .pickup_cont.active .pickup .ttl_wrap .date { font-size:2.4rem;}
    .pickup_cont.active .pickup .ttl_wrap .date span { font-size:1.9rem; margin:-0.4rem 1px 0 1px}
    .pickup_cont.active .pickup .ttl_wrap .date .youbi { font-size: 0.6rem; margin-top:8px; }
    .pickup_cont.active .pickup .ttl_wrap .date .year { font-size: 0.8rem;}
    .pickup_cont.active .pickup .ttl_wrap .title .logo { width:80px;}
    .pickup_cont.active .pickup .ttl_wrap .title .tx1 { font-size:1.2rem;}

    .pickup_cont.active .pickup .osusume_list li a .tx { padding:7px;}
    .pickup_cont.active .pickup .osusume_list li a .tx .ttl { font-size:0.9rem;}
    .pickup_cont.active .pickup .osusume_list li a .tx .sub { font-size:0.7rem; margin-top:2px;}
.pickup_cont.active .pickup .osusume_list li a .tx .desc { font-size:0.9rem; margin-top:5px; text-align:left; display:none;}

/* 旧記述用 */
.pickup_cont.active .pickup .osusume_list li a .tx > h2 { font-weight:600; font-size:1.0rem;}
.pickup_cont.active .pickup .osusume_list li a .tx > h2 em { color:#fff100; font-size:0.8rem; font-weight:normal; display:block; margin-top:3px; }
.pickup_cont.active .pickup .osusume_list li a .tx > h2 em span { font-size:0.8rem; font-weight:normal;}
.pickup_cont.active .pickup .osusume_list li a .tx > h2 + p { font-size:0.9rem; margin-top:5px; text-align:left; display:none;}


}