@charset "UTF-8";
/*---------------------------------------------
 ** 共通
---------------------------------------------*/
#box_list { padding:0; margin:30px auto; box-sizing: border-box; position: relative; overflow: hidden; border-top:1px dashed #ccc; border-bottom:1px dashed #ccc;}
#box_list h2 { color: #333; font-size: 22px; text-align: left; padding:24px 0 16px 0; box-sizing: border-box;}
#box_list .target { width: 100%;}
#box_list .target ul { padding: 0; margin:0; list-style: none; width: 100%;}
#box_list .target ul li { padding: 0 0 0 0; margin:0 1.33% 35px 0; font-size: 15px; width: 24%; float: left; box-sizing: border-box; overflow: hidden;}
#box_list .target ul li:nth-of-type(5){ clear: both;}
#box_list .target ul li:nth-of-type(4n){ margin-right: 0%;}
#box_list .target ul li a { color: #045e8c;}
#box_list .photo{ text-align: center;}
/*#box_list .photo>img{ max-height: 96px;}*/
#box_list>div{ position: relative; clear: both;}
#box_list>div:nth-of-type(n+2){ border-top:1px dashed #ccc;}
#box_list .target dt{ position: relative;}　
/*関西 NEWS WEB*/
#box_list .target ul li p{ padding:0; line-height: 1.3;}
#box_list .target ul li .press{ margin-top: 10px !important;}
#box_list .target ul li span:first-child{ margin-left: 0;}
#box_list .target ul li .m_d_h_mn{ display: block; font-size: 13px; padding: 0; margin-right: 8px; color: #888;}
#box_list .target ul li .new { display: inline-block; width: 36px; background: #ce4949; text-align: center; vertical-align: baseline; font-size: 12px; font-weight: bold; color: #fff; }
#box_list .target ul li .video { display: inline-block; width: 36px; background: #888; text-align: center; vertical-align: baseline; font-size: 12px; font-weight: bold; color: #fff; }
/*#box_list .target ul li:first-child .m_d_h_mn{ font-size: 15px; padding: 0; margin-right: 8px; color: #888;}*/
#box_list .target ul li span.new + span.video{ margin-left: 4px;}
#box_list .target ul li img{ max-width: 100%;}
/*各ブログ*/
#box_list .target ul li .name { color: #045e8c !important; padding:12px 0 0 0; line-height: 1.3 !important;}
#box_list .target ul li .date { color: #888; display: block; font-size: 13px; margin: 0; padding: 0;}
#box_list .target ul li .subtext { color: #888; display: block; font-size: 13px; margin: 0; padding: 0; line-height: 1.3;}
/*もっと読む*/
.box_list_more{
    background: #f0f0f0; border-radius: 3px; color: #000; height: 30px; line-height: 32px; text-align: left;
    margin: 0 !important; padding: 0 8px !important; position: absolute; right: 0; top: -2px;
}
.box_list_more a{text-decoration: none; color: #333;}
.box_list_more a>.icon_arw_r{ color: #333 !important; padding-right: 10px;}

/*特集・リポート*/
/*インラインフレーム*/
#box_list ul.target { padding: 0; margin:0; list-style: none; width: 100%;}
#box_list ul.target li { padding: 0; margin:0 2% 35px 0; font-size: 15px; width: 49%; float: left; box-sizing: border-box; overflow: hidden;}
#box_list ul.target li:nth-of-type(2n){ margin-right: 0%;}
#box_list ul.target li:nth-of-type(n + 9){ display: none;}
#box_list ul.target li a { color: #045e8c;}
.area__news--video {　position: relative;　width: 100%;　height: 0;　padding-bottom: 56.25%;　overflow: hidden; margin: 0;}
.area__news--video iframe {　width: 100%;　height: 100%;　position: absolute;　top: 0;　left: 0;}
.area__news--pickup h3{ font-size: 16px !important; font-size: 1.6rem !important; font-weight: normal !important;}
/*通常*/
#box_list .target ul li p.report{margin-top: 12px; font-size: 14px;}
#box_hot_kansai li:nth-of-type(n + 9){ display: none;}

/*どーガレージ*/
.genre-link-icon { position: relative; display: block;}
.genre-link-icon:before {
    content: "";
    background-color: #f03746;
    width: 32px; height: 32px; border-radius: 50%;
    position: absolute; top: 0; left: 0;
    transition: all 0.3s ease-out; opacity: 0.8; z-index: 2;
}
.genre-link-icon:after {
    content: "";
    border: 10px solid transparent;
    border-left-width: 16px;
    border-left-color: #fff;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0.5em 0 0;
    position: absolute; left: 10px; top: 6px; 
    transition: all 0.1s ease; z-index: 3;
}
.genre-link-icon:hover:before {
    -webkit-transform: scale(12); transform: scale(12); -webkit-transform-origin: center; 
    transform-origin: center; transition: all 0.3s ease-in; opacity: 0.6;
}
.genre-link-icon:hover:after { -webkit-transform: scale(1.5); transform: scale(1.5);}
/*どーガレージ*/

/*関西ラジオワイド*/
#box_radiowideMissed .radiowide_cat{
    font-weight: bold; font-size: 15px !important; color: #fff; 
    text-align: center; padding:4px 6px 2px 6px !important; box-sizing: border-box;
}
#box_radiowideMissed .radiowide_cat01{ background-color: #f0932b;}/*夕刊ポエム*/
#box_radiowideMissed .radiowide_cat02{ background-color: #2980b9;}/*とっておき川柳*/

#box_radiowideMissed .target .name { 
    margin: 0 !important; padding: 6px 0 0 0 !important; text-align: center; 
}
/*関西ラジオワイド End*/

/*ヒストリア NHKオンデマンド*/
.service_type_1 { 
    display: inline-block; background: #f18b02; font-size: 12px; width: 60px; 
    text-align: center; color: #fff; padding: 1px 0 0 0 !important; 
    position: absolute; right: 0; bottom: 0; margin: 0 !important;
}
.service_type_2 { 
    display: inline-block; background: #018ed2; font-size: 12px; width: 60px; 
    text-align: center; color: #fff; padding: 1px 0 0 0 !important; 
    position: absolute; right: 0; bottom: 0; margin: 0 !important;
}
#box_historiaNod .m_d_h_mn{ display: block !important;}
#box_list #box_historiaNod .target ul li .press{ margin-top: 5px !important;}
/*ヒストリア NHKオンデマンド End*/

/*まんぷく NHKオンデマンド*/
#box_list #box_mampuku_nod .target ul li .press{ margin-top: 8px !important;}
#box_list #box_mampuku_nod .mampuku_nod_cat{position: absolute; right: 0; bottom: 0; margin: 0 !important;}
/*まんぷく NHKオンデマンド End*/

/* NHKドラマ　ブログ画像調整用*/
#box_mampuku_drama .fit{ width: 100%; height: 100%; position: relative; background-color: #F4F4F4; overflow: hidden;}
#box_mampuku_drama .fit img{ display: block; margin: 0 auto; padding: 0; max-height: 96px; transition-duration: 0.3s;}

#box_radiowide_read .fit{ width: 100%; height: 100%; position: relative; background-color: #EEEDE8; overflow: hidden;}
#box_radiowide_read .fit img{ display: block; margin: 0 auto; padding: 0; max-height: 96px; transition-duration: 0.3s;}

#box_shinyabin_read .fit{ width: 100%; height: 100%; position: relative; background-color: #bae9c6; overflow: hidden;}
#box_shinyabin_read .fit img{ display: block; margin: 0 auto; padding: 0; max-height: 96px; transition-duration: 0.3s;}

#box_scarlet_drama .fit{ width: 100%; height: 100%; position: relative; background-color: #EEEDE8; overflow: hidden;}
#box_scarlet_drama .fit img{ display: block; margin: 0 auto; padding: 0; max-height: 96px; transition-duration: 0.3s;}
/* NHKドラマ　ブログ画像調整用 End*/

/*ブログ一覧トリミング*/
#box_list .bl_trim{ width: 100%; height: 100%; position: relative;}
#box_list .bl_trim::before{ content: ""; display: block; padding-top: 56.25%;}
#box_list .bl_trim span{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
#box_list .bl_trim img{ width: 100%; height: auto; line-height: 0; position: absolute; top: 0;}

/*ただいま放送中*/
#box_radio{
    max-width: 1200px;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}
.radio_now {
    background-color: #eee; 
    border-radius: 5px; cursor: pointer;
    font-size: 21px; text-align: center; width: 500px;
    padding: 0; margin: 0; height: 80px; line-height: 80px;
    position: relative;
}
.radio_now a {
    color: #df1825 !important; display: block; font-weight: 700;
    overflow: hidden; text-decoration: none;
}
.radio_now .radio_now_img{
    position: absolute; top: -20px; left: -20px; width: 60px; height: auto; display: block;
}
/*ただいま放送中 End*/

/*らじる★らじる おすすめ♪*/
.radio_recommend_cat1 {
    background: #ffb430;
    display: inline-block; width: 60px; font-size: 12px !important; text-align: center; color: #fff; 
    padding: 2px 0 0 0 !important; margin: 0 !important; position: absolute; right: 0; bottom: 0;
}
.radio_recommend_cat2 {
    background: #48ba66;
    display: inline-block; width: 60px; font-size: 12px !important; text-align: center; color: #fff; 
    padding: 2px 0 0 0 !important; margin: 0 !important; position: absolute; right: 0; bottom: 0;
}
.radio_recommend_cat3 {
    background: #e71a1d;
    display: inline-block; width: 60px; font-size: 12px !important; text-align: center; color: #fff; 
    padding: 2px 0 0 0 !important; margin: 0 !important; position: absolute; right: 0; bottom: 0;
}
.radio_recommend_cat4 {
    background: #03c7d3;
    display: inline-block; width: 60px; font-size: 12px !important; text-align: center; color: #fff; 
    padding: 2px 0 0 0 !important; margin: 0 !important; position: absolute; right: 0; bottom: 0;
}
/*らじる★らじる おすすめ♪ End*/

/* -------------------------------------------
   イベント・公開番組情報
------------------------------------------- */
.event_icon{ margin-bottom: 6px !important;}
.event_icon span{ display: inline-block; box-sizing: border-box;}
/*.event_icon span+span{ margin-left: 6px !important;}*/
.event_icon .o_bosyu{ color: #fff; font-size: 12px; border: 1px solid #c0392b !important; background-color: #c0392b !important; padding: 3px 6px !important;}
.event_icon .o_bosyu_end{ color: #2980b9; font-size: 12px; border: 1px solid #2980b9 !important; padding: 3px 6px !important;}
.event_icon .o_kaisai{ color: #fff; font-size: 12px; border: 1px solid #e74c3c !important; background-color: #e74c3c !important; padding: 3px 6px !important;}
.event_icon .o_kaisai_end{ color: #2980b9; font-size: 12px; border: 1px solid #2980b9 !important; padding: 3px 6px !important;}
.event_icon .o_cat{padding: 4px 6px !important; font-size: 12px; background-color: #2980b9; color: #fff;}
/*イベント一覧トリミング*/
#box_list .et_fit { width: 100%; height: 100px; object-fit: cover; text-align: center; margin-bottom: 12px;}
#box_list .et_fit img { max-width: 100%; margin: 0 auto; display: block; height: 100%;}
#box_list .target ul li .event_name { color: #045e8c !important; padding: 0; margin: 10px 0 0 0; line-height: 1.3 !important;}

/* -------------------------------------------
   ランキング
------------------------------------------- */
#box_list .bl_ranking .mod_kansainews_rank {
    position: absolute; left: 9px; bottom: 0; margin: 0; 
    color: #FFF; font-size: 12px; font-weight: bold; display: inline-block; background-color: rgba(0,0,0,0.6); 
    text-shadow: 0 0 1px #000; padding: 2px 6px 2px 6px; border-radius: 6px; vertical-align: baseline;
}
#box_list .bl_ranking .mod_kansainews_rank span {
    display: inline-block; position: relative; margin-right: 2px; width: auto; vertical-align: bottom;
}
.bl_ranking ul{ position: relative; counter-reset: ranking-access;}
.bl_ranking ul li:nth-of-type(n+9) { display: none !important;}
#box_list .bl_ranking .mod_kansainews_rank:after {
    content: counter(ranking-access, decimal); counter-increment: ranking-access; display: inline-block; margin-left: 2px;
}

/*打ち消し*/
#modalCloseSp{ display: none;}

@media only screen and (max-width:690px) {
/*---------------------------------------------
 ** 共通
---------------------------------------------*/
#box_list { background-color: #fff; width: 100%; margin: 25px 0 30px 0; padding:0 0 0 0;}
#box_list h2 { border-bottom: none;　font-size:16px; position: relative; padding:0; margin: 42px 0 0 0; line-height: 1.4; background-color: #fff; box-sizing: border-box;}
#box_list .target { display: block; padding: 10px 0 0 0; height: auto;}
#box_list .target ul { display: block; padding: 0; margin-top:10px;}
#box_list .target ul li { vertical-align: top; width:100%; font-size: 1.7rem; line-height: 1.3; clear: both; border-bottom: 1px dotted #eaeaea; position: relative; display: block; overflow: hidden; padding-bottom: 15px; margin:12px 0 0 0;}
#box_list .target ul li:first-child { margin-top: 0; width: 100%; font-size: 1.7rem;}
#box_list .target ul li:last-child { border-bottom:none; padding-bottom: 35px;}
#box_list .target ul li a {color: #045e8c; }
#box_list .target ul li img{ display: block; width: 40%; float: left; height: auto; margin:2px 10px 0 0;}
#box_list .target ul li p{ padding:0; margin:0; line-height: 1.4;}
#box_list .photo{ text-align: left;}
#box_list .blog-info{ float: left; width: 56%;}

/*関西 NEWS WEB*/
#box_list .target ul li .press{ margin-top: 0 !important; font-size: 14px; clear: none; width: 56%; float: left;}

/*各ブログ*/
#box_list .target ul li .m_d_h_mn{ display: inline-block; font-size: 12px; padding: 4px 0 0 2px; margin-right: 8px;}
#box_list .target ul li .new { font-size: 11px; vertical-align: middle; display: inline-block; padding: 2px 0; margin-left: 0;}
#box_list .target ul li .video { font-size: 11px; vertical-align: middle; display: inline-block; padding: 2px 0;}
#box_list .target ul li span.new + span.video{margin-left: 4px;}
#box_list .target ul li span:first-child{ margin-left: 0;}
#box_list .target ul li:first-child .m_d_h_mn{ font-size: 12px;}
#box_list .target ul li .name{ padding-top: 2px; font-size: 14px;}
#box_list>div:first-of-type{position: static;}
#box_list>div:nth-of-type(n+2){ position: relative; padding-top: 0;}
#box_list .target ul li .subtext { font-size: 12px;}
/*もっと読む*/
.box_list_more{ right: 0; text-align: left; top:0;}

/*特集・リポート*/
#box_list ul.target { display: block; padding: 10px 0 0 0; margin-top:10px; height: auto;}
#box_list ul.target li{ vertical-align: top; width:100%; font-size: 1.7rem; line-height: 1.3; clear: both; border-bottom: 1px dotted #eaeaea; position: relative; display: block; overflow: hidden; padding-bottom: 30px; margin:12px 0 0 0;}
#box_list ul.target li:first-child{ margin-top: 0; width: 100%; font-size: 1.7rem;}
#box_list ul.target li:last-child{ border-bottom:none;}
#box_list ul.target li a{color: #045e8c; }
#box_list .target ul li p.report{ margin-top: 0; font-size: 14px; clear: none; width: 56%; float: left;}
/*特集・リポート End*/

/*どーガレージ*/
#box_list li.grage-list .photo{ width: 40%; box-sizing: border-box; float: left;}
#box_list li.grage-list .photo img{ width: 100%; height: auto; margin-right: 0 !important;}
#box_list li.grage-list .grage-info{ width: 60%; box-sizing: border-box; float: left; padding-left: 10px;}
.genre-link-icon:before{ position: absolute; top: 0; left: 0; width: 30px; height: 30px;}
.genre-link-icon:after{ left: 9px; top: 4px;}
.genre-link-icon:hover:after{ -webkit-transform: scale(1.2); transform: scale(1.2);}
/*どーガレージ End*/

/*関西ラジオワイド*/
#box_radiowideMissed .radiowide_cat{ font-size: 14px !important; padding:2px 6px !important;}
#box_list #box_radiowideMissed ul li img { margin: 0 10px 0 0 !important;}
#box_radiowideMissed .target .name{ font-size: 15px !important;}
/*関西ラジオワイド End*/

/*ヒストリア NHKオンデマンド*/
.service_type_1 { right: auto; bottom: 15px; margin: 0 !important; left: calc(40% - 60px);}
.service_type_2 { right: auto; bottom: 15px; margin: 0 !important; left: calc(40% - 60px);}
#box_list ul li:last-child .service_type_1 { bottom: 35px;}
#box_list ul li:last-child .service_type_2 { bottom: 35px;}

#box_list #box_historiaNod .target ul li .press{ margin-top: 2px !important;}
/*ヒストリア NHKオンデマンド End*/

/*まんぷく NHKオンデマンド*/
#box_list #box_mampuku_drama .fit{ width: 40%; float: left;}
#box_mampuku_drama .fit img{ width: 100%; max-height: 100%; float: none !important; margin: 0 auto !important;}
#box_list #box_radiowide_read .fit{ width: 40%; float: left;}
#box_radiowide_read .fit img{ width: 100% !important; max-height: 100%; float: none !important; margin: 0 auto !important;}
#box_list #box_shinyabin_read .fit{ width: 40%; float: left;}
#box_shinyabin_read .fit img{ width: 100% !important; max-height: 100%; float: none !important; margin: 0 auto !important;}
#box_list #box_scarlet_drama .fit{ width: 40%; float: left;}
#box_scarlet_drama .fit img{ width: 100%; max-height: 100%; float: none !important; margin: 0 auto !important;}
#box_list #box_mampuku_drama .name { padding: 0 0 0 12px;}
#box_list #box_radiowide_read .name { padding: 0 0 0 12px;}
#box_list #box_shinyabin_read .name { padding: 0 0 0 12px;}
#box_list #box_scarlet_drama .name { padding: 0 0 0 12px;}
#box_list #box_radiowide_read .date { padding: 0 0 0 12px;}
#box_list #box_shinyabin_read .date { padding: 0 0 0 12px;}
#box_list #box_scarlet_drama .date { padding: 0 0 0 12px;}

#box_list #box_mampuku_nod .mampuku_nod_cat {
    right: auto; bottom: 15px; margin: 0 !important; left: calc(40% - 60px);
}
#box_list #box_mampuku_nod ul li:last-child .mampuku_nod_cat {
    bottom: 35px;
}
#box_list #box_mampuku_nod .target ul li .press {
    margin-top: 0 !important;
}
/*まんぷく NHKオンデマンド End*/

/*ブログ一覧トリミング*/
#box_list .bl_trim{ width: 40%; height: auto; position: relative; float: left;}
#box_list .bl_trim img{ width: 100% !important;}
#box_list .bl_trim + .blog-info{padding-left: 10px !important; box-sizing: border-box;}

/* -------------------------------------------
   イベント・公開番組情報
------------------------------------------- */
.event_icon span+span{ margin-left: 0 !important;}
.event_icon .o_bosyu{ font-size: 12px; padding: 5px 6px !important;}
.event_icon .o_bosyu_end{ font-size: 12px; padding: 5px 6px !important;}
.event_icon .o_kaisai{ font-size: 12px; padding: 5px 6px !important;}
.event_icon .o_kaisai_end{ font-size: 12px; padding: 5px 6px !important;}
.event_icon .o_cat{padding: 6px 8px !important; font-size: 12px; background-color: #2980b9; color: #fff;}

/*イベント一覧トリミング*/
#box_list .event_list a{ display: flex; justify-content: space-between; flex-wrap: wrap; overflow: visible;}
#box_list .et_fit { width: 40%; margin-bottom: 0;}
#box_list .et_fit img { width: 100% !important; height: 100%; display: block;}
#box_list .event_list .blog-info{ float: none;}
#box_list .target ul li .event_name { font-size: 14px;}

/* -------------------------------------------
   ランキング
------------------------------------------- */
#box_list .bl_ranking .mod_kansainews_rank{ left: 6px;}
#box_list .bl_ranking .mod_kansainews_rank span{ display: none;}


/*打ち消し*/
#box_list .photo>img{ max-height: 100%;}
#box_list .target dt{ position: static;}
}