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

.pgm_pagetitle{
  height: 60px;
  background-color: #C90000;
}
.pgm_pagetitle div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1280px;
  height: 100%;
  margin: auto;
}
.pgm_pagetitle a{
  position: relative;
  display: inline-block;
  padding: 10px 20px 6px;
  text-decoration: none;
  font-size: 1.25rem;
  color: #C90000;
  background-color: #FFFFFF;
}
.pgm_pagetitle a:first-of-type::before{
  content: "";
  position: absolute;
  display: inline-block;
  left: -10px;
  top: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-right: 10px solid #FFFFFF;
}
.pgm_pagetitle a:last-of-type::after{
  content: "";
  position: absolute;
  display: inline-block;
  right: -10px;
  top: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 10px solid #FFFFFF;
}
.pgm_pagetitle a:hover{opacity: 0.7;}
.pgm_pagetitle h1{
  font-size: 2em;
  font-weight: bold;
  color: #FFFFFF;
}

.pgm_tablewrap{
  width: 1280px;
  margin: 0 auto 120px;
}
.pgm_tablewrap.active{
  margin-top: 37px;
}

.pgm_tabletitle.active{
  position: fixed;
  width: 1280px;
  top: 0;
  left: calc(50% - 640px);
  z-index: 220;
}
.pgm_titmetable{
  margin-bottom: 24px;
  background-color: #FFFFFF;
}

.tss_body table{
  width: 100%;
  table-layout: fixed;
}
/*タイトル行*/
.tss_body th{
  width: 176px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #29B174;
  border: 1px solid #DDD8CE;
}
.tss_body th:first-of-type,
.tss_body th:last-of-type{
  width: 24px;
  background-color: #ffffff;
  border:none;
}
.tss_body th:first-of-type{
background-image: url("../img/bg_mich.png");
background-repeat: no-repeat;
background-size: auto 100%;
background-position: right bottom;
}
.tss_body th:last-of-type{
background-image: url("../img/bg_cathe.png");
background-repeat: no-repeat;
background-size: auto 120%;
background-position: left bottom;
}

th.pgm_sat{background-color: #3AA8DC;}
th.pgm_sun{background-color: #EB5E60;}
/*縦列*/
.tss_body table td{
  position: relative;
  width: 176px;
  border-left: 1px solid #DDD8CE;
  border-right: 1px solid #DDD8CE;
  border-bottom: 1px solid #A29C94;
  overflow-wrap: break-word;
  word-wrap: break-word;
  table-layout: fixed;
}
table td.pgm_pastday{background-color: #FFFFFF;}
table td.pgm_today{background-color: #FFFFE8;}
.pgm_overafterweek ul *{display: none;}
.pgm_overafterweek .pgm_overlay{
  display: block;
  background: #DDDDDD;
}

.tss_body table td:first-of-type,
.tss_body table td:last-of-type{
  width: 24px;
  text-align: center;
  color: #FFFFFF;
  background: linear-gradient(#6ac3d9,#6ad8d9,#6ad9c1,#6bd984,#7ad977,#8ed96f,#a1d96a,#b7d36a,#cec96a,#d9b96a,#d99e6a,#d97f6a,#d96a6a,#d96a86,#d96aa8,#d66ac2,#c66ace,#b36ad4,#a16ad9,#8c70d9,#7778d9,#6a87d9,#6aa3d9);
}

/*番組枠*/
.tss_body table td li{
  position: relative;
  font-size: 0.75rem;
  border-top: 1px solid #DDD8CE;
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow: hidden;
  z-index: 1;
}
.tss_body table td li:last-of-type{border-bottom: 1px solid #DDD8CE;}
.tss_body table td li:hover{
  overflow: visible;
  background-color: #FFFFBF;
  z-index: 10 !important;
}
.tss_body table td:first-of-type li,
.tss_body table td:last-of-type li{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;/*5分=25px 1分=5px*/
  padding: 0;
  font-weight: bold;
  background: none;
  border-top: 1px solid #FFFFFF;
}
.tss_body table td:first-of-type li:first-of-type,
.tss_body table td:last-of-type li:first-of-type{border-top: none;}
.tss_body table td:first-of-type li:last-of-type,
.tss_body table td:last-of-type li:last-of-type{border-bottom: none;}
.tss_body table td:first-of-type li:hover,
.tss_body table td:last-of-type li:hover{background: none;}

/*番組無い時間帯*/
table td li.pgm_blank,
table td li.pgm_blank:hover{
  border-top: none;
  background: none;
  z-index: -1;
}
/*短時間番組（jsにてclass付与）*/
table td li.pgm_short{
  background-color: #FFFFFF;
  z-index: 5;
}
/*調度の時間に開始の番組（jsにてclass付与）*/
table td li.pgm_fix{
  margin: 0 !important;
  top: 0 !important;
}
table td.pgm_today li.pgm_short{background-color: #FFFFE8;}
table td li.pgm_short:hover,
table td.pgm_today li.pgm_short:hover{background-color: #FFFFBF;}
/*番組内枠*/
table td li div.overflow{
  position: relative;
  overflow: hidden;
  padding-bottom: 5px;
}
  /*続きの表示*/
table td li div.overflow::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 20px;
  font-size: 0.875rem;
  background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%);
}
table td.pgm_today li div.overflow::after{background: linear-gradient(rgba(255,255,232,0) 0%, rgba(255,255,232,1) 30%, rgba(255,255,232,1) 100%);}
table td li:hover div.overflow{
  height: auto !important;
  overflow: visible;
}
table td li:hover div.overflow::after{content: none;}
/*時間*/
.pgm_titmetable table td li p{padding: 5px;}
.pgm_titmetable table td li p:first-of-type{
  font-size: 0.875rem;
  background-color: #FBF7DD;
}
/*番組タイトル*/
.pgm_titmetable table td li h2{
  line-height: 1.4;
  padding: 0.5em 0.5em 0.1em;
  font-weight: bold;
  color:#120F0D;
  overflow-wrap: break-word;
  word-wrap: break-word;

}
.pgm_titmetable table td li h2 img{
  display: inline-block;
  vertical-align: middle;
/*--   margin-right: 2px; --*/
  width:14px;
  height:auto;
}
.pgm_titmetable table td li h2 a{ color: #120F0D;}
.pgm_titmetable table td li h2 a:hover{text-decoration: none;}
/*サムネイル*/
.pgm_thumb{text-align: center;}
.pgm_thumb img{max-width: 80%;height: auto;}
table td li:hover .pgm_thumb{background-color: #FFFFBF;}
/*番組説明*/
.pgm_pgmtxt{
  position: relative;
  line-height: 1.4;
  color: #333;
}
table td li:hover h2{background-color: #FFFFBF;  z-index: 22;}
table td li:hover .pgm_pgmtxt{background-color: #FFFFBF;  z-index: 20;}
  /*マウスオーバーしたときに上に出てくる番組説明*/
.pgm_pgmtxt span{
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  padding:5px 5px 15px;
  visibility: hidden;
  opacity: 0;
}
  /*詳細モーダルへのボタン*/
.pgm_pgmtxt a{
  display: block;
  margin-top: 5px;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
  color: #333333;
  border: 1px solid #DDDDDD;
  background-color: #FFFFFF;
}
table td li:hover .pgm_pgmtxt span{
  background-color: #FFFFBF;
  visibility: visible;
  opacity: 1;
  z-index: 50;
}
table td.pgm_today li:hover .pgm_pgmtxt span{background-color: #FFFFBF;}
.pgm_pgmtxt span a:hover{background-color: #FFFBF0;}

/*過去日付の列にかぶせるもの*/
.pgm_overlay{
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(187, 185, 178, 0.5);
  z-index: 200;
}
.pgm_pastday .pgm_overlay{display: block;}

/*-- 早朝3時開始の番組があるときの処理 --*/
.pgm_blank[data-timelength="0"]{
  display: none;
}

/*モーダル*/
.pgm_modal{
  display: none;
}
.modaal-content-container .pgm_subtitle{
  margin-bottom: 0.5em;
  font-size: 1.125rem;
  font-weight: bold;
}
.modaal-content-container p{
  line-height: 1.5;
  margin-bottom: 0.5em;
}



/*下部テキスト*/
.pgm_notes{
  display: flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  align-items: center;
  font-size: 0.75rem;
  width:98%;
  margin:0 auto;
}

.pgm_notes p{
  width:100%;
  margin-top:1em;
}
.pgm_notes ul{
  display: flex
}
.pgm_notes ul li{margin-right: 10px; min-width:5em}
.pgm_notes ul li img{
  width:1.25rem;
  vertical-align: middle;
  margin-right: 3px;
}
.pgm_notes ul li span{vertical-align: middle;}




/*スプラッシュ*/
.pgm_splash{
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #FFFFFF;
  transition: all 0.5s linear 1s;
  z-index: 10000;
}
.pgm_splash.opn{
  opacity: 0;
  visibility: hidden;
}




/*アンカーリンク*/
.pgm_anchorlist{
  position: fixed;
  right: calc(50% - 652px);
  bottom: 120px;
  z-index: 210;
}
.pgm_anchorlist li{margin-bottom: 8px;}
.pgm_anchorlist li a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  text-decoration: none;
  font-size: 12px;
  color: #333333;
  border-radius: 100%;
  border:4px solid #fff;
  box-shadow: 0 3px 1px rgba(0,0,0,0.2);
  transition: background 0.5s linear;
}
.pgm_anchorlist li:nth-of-type(1) a{background:radial-gradient(ellipse at center, #fff 50%, #6ac3d9 51%, #6ac3d9 100%);}
.pgm_anchorlist li:nth-of-type(2) a{background:radial-gradient(ellipse at center, #fff 50%, #ffda4a 51%, #ffda4a 100%);}
.pgm_anchorlist li:nth-of-type(3) a{background:radial-gradient(ellipse at center, #fff 50%, #b36fbd 51%, #b36fbd 100%);}
.pgm_anchorlist li:nth-of-type(4) a{background:radial-gradient(ellipse at center, #fff 50%, #afacd2 51%, #afacd2 100%);}

.pgm_anchorlist li a:hover{box-shadow:none;background:#fff;opacity:0.7;}


/*-- AD --*/
.pgm_adtop{
  width:728px;
  margin:24px auto;
}


@media screen and (max-width:1280px){
  .pgm_tabletitle.active{left: 0;}
}

@media screen and (max-width:768px){
.pgm_anchorlist{
  right: 8px;
}

.pgm_anchorlist ul{
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
  width:88px;
}

.tss_body{
  position:relative;
  border:solid 1px white;
}

.pgm_notes{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  flex-wrap: wrap;
  width:94%;
  margin: 0 auto;
}

.pgm_notes > p{
  order:1;
  margin:1em;
}

.pgm_notes ul{
  flex-wrap: wrap;
  width:94%;
  margin: 0 auto 1em;
  order:2;
}
.pgm_notes ul li{margin-bottom: 8px; min-width: 4em;}

div.pgm_pagetitle{
position:relative;
}

div.pgm_pagetitle::before{
  content:"←  横スクロールできます  →";
  display:block;
  width:16em;
  position:absolute;
  left:0;
  right:0;
  bottom:-2em;
  margin:auto;
  text-align:center;
  padding-bottom:0.5em;
  color:#0f66c3;
  font-size:0.875em;
  animation: tthorizontal 1s ease-in-out infinite alternate;
}

@keyframes tthorizontal {
    0% { transform:translateX( -10px); }
  100% { transform:translateX(  10px); }
}



  .tss_wrap{overflow: visible;}
  .pgm_pagetitle h1{font-size: 1.125rem;}
  .pgm_pagetitle div{
    justify-content: space-around;
    width: 100%;
    padding: 0 10px;
  }
  .pgm_pagetitle a{
    padding: 10px 10px 6px;
    font-size: 0.875rem;
  }
  .pgm_pagetitle a:first-of-type::before,
  .pgm_pagetitle a:last-of-type::after{
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }

  .pgm_tablewrap{
    width: 100%;
    overflow-x: scroll;
  }
  .pgm_tabletitle,
  .pgm_titmetable{width: 1280px;}
  .pgm_tabletitle.active{left: auto;}
}