/*	番組編
============================== */

/*	h2
============================== */

.titleArea h2{
	background-position: center top;
    background-repeat: no-repeat;
	background-size: contain;
	text-indent: -9999px;
	margin: 0 auto;
}
@media all and (min-width: 768px) {
	.titleArea { padding-bottom: 25px;}
	.titleArea h2{
	background-image: url(../img/try_prog/h2_pc.png);
	width:100%; height: 200px;}
}

@media all and (max-width: 767px) {
	.titleArea { padding-bottom: 20px;}
	.titleArea h2 {background-image: url(../img/try_prog/h2_sp.png);
	width:100%;
	height:0;
	padding-top: -webkit-calc(260 / 750 * 100%);
	padding-top: calc(260 / 750 * 100%);}
}

/*	contents
============================== */

ul.listArea {display: flex;
	flex-wrap: wrap;
	justify-content: left;
}
ul.listArea li { vertical-align: top; line-height: 1.5em; }

ul.listArea h3 { padding: 10px 0 3px; color: #ec6a06; text-align: center;}

ul.listArea li figure span {
	display: block;
	position: relative;
	background-size: 100%;
	background-position: center center;
	height: 0;
    padding: 56.26% 0 0;
}
ul.listArea li figure span img {
	display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
ul.listArea li figure {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

.listArea a:hover figure { opacity:0.8;}

ul.listArea li h4 { background-color: #e4031e; color:#fff; text-align: center; font-size: 1.1em; padding: 0.2em 0;}

.btn { margin-bottom: 40px;}
.btn a {
  display: block;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: center center;
background-color: #fd819a;
	background-image: url(../img/try_prog/btn_all.png);
  text-indent: -9999px;
	margin: 0 auto;
}
.btn a:hover { opacity:0.8;}

@media all and (min-width: 768px) {
	ul.listArea { padding: 0; }
	ul.listArea li { width:calc((100% - 24*2px)/3); padding-bottom: 40px;}
	ul.listArea li:nth-child(3n-1) {margin: 0 24px; }
	ul.listArea h3 {font-size: 1.1em;}
	
	.btn a {
		background-size: 290px 45px;
		width: 320px; height: 75px;
	}
}

@media all and (max-width: 767px) {
	.wrap {width:98%; margin: 0 auto;}
	ul.listArea li {width:46%; margin: 0 2%; padding-bottom: 25px;}
	.listArea h3 { padding: 8px 0 3px; font-size: 1.0em;}
	ul.listArea .date {font-size: 0.8em; line-height: 1.5em;}
	ul.listArea .txt {font-size: 0.8em; line-height: 1.5em;}
	ul.listArea h3 {font-size: 0.9em;}
	.btn a {
		background-size: 220px 34px;
		width: 240px!important; height: 60px!important;
	}
}