@charset "UTF-8";

/*番組企画タイトル*/
.area_program_h2{
    width: 96%;
    max-width: 615px;
    margin: 0 auto 2%;
}

.area_program_p{
    width: 90%;
    margin: 0 auto 4%;
	text-align: center;
	font-size: 1.2rem;
}

@media print, screen and (min-width: 520px) {
.area_program_h2{ width: 80%; }
}

@media print, screen and (min-width: 960px) {
.area_program_p{ font-size: 1.4rem; }
}

/*番組タブ-----------------------------------------------------------------*/
.program_tab {
  padding-bottom: 1rem;
  margin: 0 auto;
}
	
.program_tab_item:first-of-type {
  background:#ffffff;
  background-size: 0px 100%;
}
.program_tab_item {/*日付ボタン*/
  width: calc(94%/7);
  padding:2% 1%;
  margin-right: 1%;
  position: relative;
  text-align: center;
  color: #e87a25 ;
  display: block;
  float: left;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.2;
  transition: all 0.2s ease;
  background: #ffffff;
  background-size: 1px 100%; 
  box-sizing: border-box;
  letter-spacing: 0.04em;
  border: solid 3px #e87a25;
}

.program_tab_item:last-of-type {/*日付ボタン*/
  margin-right: 0;
}

.program_tab_item:hover { background: #cccccc ; }

input[name="program_tab_item"] {
  display: none;
}
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
}

#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content,
#tab6:checked ~ #tab6_content,
#tab7:checked ~ #tab7_content{
  display: block;
}
.program_tab input:checked + .program_tab_item {
  background-color: #e87a25 ;
  color: #ffffff;;
}

.program_tab input:checked + .program_tab_item::after{ 
    content: " ";
    width: 1px;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #e87a25;}

/*曜日テキスト*/
.day , .weekday{ display: inline-block; }

@media print, screen and (min-width: 520px) {
.program_tab_item { font-size: 1.8rem;letter-spacing: 0.1em; }
.program_tab_item:first-of-type::after { width: 95%; left: 0; }
.program_tab_item:last-of-type::after { width: 95%; right: 0%; left: 5%; }
.week_day{ font-size: 1.5rem; }
}


@media print, screen and (min-width: 960px) {	
.program_tab_item { font-size: 1.9rem;  padding:2%; }
.program_tab_item::after{ height: 6px; }
.week_day{ font-size: 1.9rem; }
}


/*ラジオタイムテーブルデータ-----------------------------------------------------------------*/

.timetable_data {/*各曜日タブ内*/
	padding: 4.5% 4.5% 0;
}

.timetable_data table { width: 100% }
.timetable_data tr {
  display: flex;
  flex-wrap: wrap;
  padding: 4.5% 0 3%;
  border-top: 1px solid #c9c9c9; 
}
.timetable_data tr:first-child { border-top: none; padding: 0 0 3%; }

.timetable_data th,
.timetable_data td {
  display: block;
  width: 100%;
  text-align: left;
}

/*テキスト装飾*/
.program_time,
.programt_name,
.program_cast
{ display: inline-block; }

.program_time {
	padding:4px 5px 2px;
	font-size: 1.5rem;
	background: #313131;
	color: #fff;
	line-height: 1;
}
.program_title {
	font-size: 1.6rem;
	color: #222;
	font-weight: bold;
	line-height: 1.6;
}

.program_cast { 
	padding: 0 0 0 1.4rem;
	font-size: 1.4rem;
	color: #444;
	background: url(../../image/icon_common_mic.svg) no-repeat;
	background-position: left 0.2rem;
	background-size: auto 1.4rem;
	line-height: 1.4;
}

/*ボタンエリア */
.program_btn_area a { margin: 6.5% auto 10.5%;}

@media print, screen and (min-width: 520px) {
.timetable_data th { width: 16%; }
.timetable_data td { width: 84%; }
.program_time { padding:5px 6px 3px; font-size: 1.6rem; }
.program_title { margin-bottom: 1.4%; }
.program_btn_area a { margin: 5% auto 7.5%;}
}

@media print, screen and (min-width: 768px) {
.timetable_data th { width: 12%; }
.timetable_data td { width: 88%; }
.program_title { font-size: 1.8rem; margin-bottom: 1.8%; }
.program_cast{ background-position: left 0.4rem; font-size: 1.5rem; }
}

@media print, screen and (min-width: 960px) {
.program_time { padding:6px 10px 5px; font-size: 1.9rem; }
.program_title { font-size: 2rem; }
.program_cast{ font-size: 1.6rem; }
}

/*日付*/
.program_tab_item .date, .program_tab_item .week { display: block; }
@media print, screen and (min-width: 768px) {
  .program_tab_item .date, .program_tab_item .week { display: inline-block; }
}


/*番組一覧段組------------------------------------------------------------------------------*/

.unit_flexbox {
	display: flex;
	flex-wrap: wrap;
}

.unit_flexbox li{ 
	position:relative;
	width: 100%;
	margin-top: 4%;
    padding: 4vw;
    background: #fff;
    box-sizing: border-box;
}

/*サムネイル*/
.featured_image {
    position: relative;
    overflow: hidden;
	padding-left:100%;
	width: 100%;
    margin-bottom: 10px;
}

/*番組一覧タブ写真*/
/*9:16比*/.unit_flexbox li .featured_image{ padding: 62.5% 2px 0;}

.featured_image img {
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
	border-color: none;
}

@media print, screen and (min-width: 640px) {
ul.unit_flexbox { padding: 0 0 0;}
.unit_flexbox li { width: 48.5%; margin-top: 2.5%; margin-right: 2.5%; padding: 2vw; }
.unit_flexbox li:nth-child(2n) { margin-right:0; }
}

@media print, screen and (min-width: 960px) {
.unit_flexbox li{ padding: 1vw; }
ul.unit_flexbox{ padding: 0 0 0; }
.unit_flexbox li { width: 31.64%; margin-right:2.5%; }
.unit_flexbox li:nth-child(2n) { margin-right:2.5%; }
.unit_flexbox li:nth-child(3n) { margin-right:0; }
}

/* 番組一覧tab--------------------------------------------------------------------------- */


/* 各番組パーツ*/

.unit_flexbox li h3 { /*番組名*/
	margin-top:4%;
	font-size: 1.8rem;
	line-height: 1.5;
	font-weight: bold;
 }

.unit_flexbox li h4{/*放送日時*/
	position: relative;
	margin-top:0.4rem;
	line-height: 1.5;
	font-weight: bold;
}

.unit_flexbox dl{/*プレゼント*/
	margin-top:1.8rem;
}

.unit_flexbox dt{/*プレゼント*/
	background: #00a140;
	width: 120px;
	margin:1.2rem auto 0.8rem -4vw;
	padding: 4px 4vw;
	border-radius: 0 18px 18px 0;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.1em;
	font-size: 1.4rem;
}
.unit_flexbox dd{/*プレゼント*/
	position: relative;
	padding: 0 0 0.2rem 1.2rem;
}
.unit_flexbox dd::before{/*プレゼント*/
	position: absolute;
	display: block;
	content: "";
	background: #222222;
	padding: 2px;
	border-radius: 2px;
	left: 0px;
	top: 12px;
}

/* ラジコボタン */
.btn_radiko {
	display: block;
	position: relative;
	margin: 1.8rem auto 0;
	padding: 0.6rem 1rem ;
    background: #ffffff;
	border: solid 2px #0099cc;
    color: #0099cc;
    font-weight: bold;
	text-align: center;
	box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.2);
}

.btn_radiko:hover {
	text-decoration: none;
	background: #0099cc;
	color: #ffffff;
	margin: 2rem auto -2rem;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
}
.btn_radiko::before,
.btn_radiko::after {
	display: block;
	position: absolute;
	content: "";
	width: 1rem;
	height: 1rem;
	top: 1.4rem;
	border-left: solid 2px #0099cc;
	border-top: solid 2px #0099cc;
	transform: rotate(135deg);
}
.btn_radiko::before { right:2rem; }
.btn_radiko::after { right:1rem; }

.btn_radiko:hover::before,
.btn_radiko:hover::after{
	border-left: solid 2px #ffffff;
	border-top: solid 2px #ffffff;
}

@media print, screen and (min-width: 640px) {
.unit_flexbox dt{/*プレゼント*/
	margin:1.2rem auto 0.8rem -2vw;
	padding: 4px 2vw;
}
}
@media print, screen and (min-width: 960px) {
.unit_flexbox dt{/*プレゼント*/
	margin:1.2rem auto 0.8rem -1vw;
	padding: 4px 1vw;
}
}