@charset "UTF-8";

body {
	margin: 0;
	padding: 0;
	font-size: 80%;
	font-family: 'TBUDゴシック R', TBUDGothic R, "メイリオ", "游ゴシック", YuGothic, Meiryo, sans-serif;
}

.contents{
	max-width: 100%;
	margin: 0;
	padding: 0;
}

@media screen and (min-width: 768px) {
	.onlySP {
		display: none;
	}

	/* h1 */
	.channelheader {
		background: url(../img/title_bg.png) repeat-x center top;
		background-size: contain;
		padding: 26px 0 57px;
		text-align: center;
	}

	/* PICK UP */
	#pickup {
		margin: 53px 0 0;
	}
	#pickup .channelcontentsinner {
		width: 840px;
		height: 636px;
		margin: 0 auto;
		background: url(../img/pickup_bg.png) no-repeat center top;
		position: relative;
	}
	#pickup .pickup_movie {
		width: 600px;
		height: 338px;
		position: absolute;
		left: 124px;
		top: 152px;
	}
	#pickup .pickup_movie::after {
		width: 80px;
		height: 80px;
		content: "";
		background-image: url(../img/btn_play.png);
		background-size: 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 258px;
		top: 128px;
		pointer-events : none;
	}
    
    #pickup .pickup_movie img{
        width: 100%;
    }
	#pickup .pickup_title {
		position: absolute;
		left: 287px;
		top: 494px;
	}
    #pickup .pickup_movieTtl {
		width: 296px;
		height: auto;
		position: absolute;
        transform: translateX(-50%);
		left: 50%;
		top: 500px;
	}

	/* channel nav */
	.channelnav {
		width: 980px;
		margin: 50px auto 53px auto;
		overflow: hidden;
	}
	.channelnav .menu {
		display: flex;
		flex-wrap: wrap;
	}
	.channelnav .menu li {
		margin-top: 7px;
		margin-right: 0.6%;
		width: 24.5%;

	}
	.channelnav .menu li:nth-child(4n) {
		margin-right: 0;
	}
	.channelnav .menu li a:hover {
		opacity: 1;
	}
	.channelnav .menu li a img{
		width: 100%;
	}

	/* channels */
	.channelBox {
		min-width: 980px;
		padding: 50px 0 0 0;
	}
	.channelBox> :nth-child(2n+1) {
		background: url(../img/contents01_bg_top.png) repeat-x center top #faefcc;
	}
	.channelBox> :nth-child(2n) {
		background: url(../img/contents01_bg_bottom.png) repeat-x center top;
	}
	.channelcontentsinner {
		width: 980px;
		margin: 0 auto;
		padding: 105px 0 78px 0;
		overflow: hidden;
	}
	.channelcontentsinner h2 {
		text-align: center;
	}
	.channelgroup {
		margin-top: 37px;
	}
	.channelcontentsinner .movie_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.channelcontentsinner .movie_list li {
		width: 300px;
		margin-bottom: 60px;
		padding-right: 40px;
		box-sizing: content-box;
		max-height: 250px;
		transition: margin-bottom 0.1s ease-in, max-height 0.3s ease-in;
	}
	.channelcontentsinner .movie_list li:nth-child(3n) {
		padding-right: 0;
	}
	.channelcontentsinner .movie_list li.hiddenMovie {
		max-height: 0;
		margin-bottom: 0;
		overflow: hidden;

	}
	.channelcontentsinner .moviethumb {
		width: 300px;
		position: relative;
	}
	.channelcontentsinner .moviethumb img {
		width: 100%;
	}
	.channelcontentsinner .moviethumb::after {
		content: url(../img/movie_play.png);
		position: absolute;
		top: 49px;
		left: 115px;
		pointer-events : none;
	}
	.channelcontentsinner .movie_list .moviecaption {
		margin: 15px 0 0 0;
		line-height: 1.2;
		font-size: 16px;
	}
	.channelbtn {
		text-align: center;
	}
	.channelbtn img{
		width: 186px;
		height: 50px;
	}
	.channelbtn .morebtn:hover{
		opacity: 1;
	}
	.closed .close{
		display: none;
	}
	.opened .open{
		display: none;
	}
}


@media screen and (min-width: 768px) and (max-width: 1186px) {
	.channelheader {
		background-size: cover;
	}

}


/*
 980pxで100vwとなるように計算
 (PCデザインのpx) / 980 
 */
@media screen and (min-width: 768px) and (max-width: 980px) {

	img {
		width: 100%;
	}

	/* h1 */
	.channelheader h1 {
		width: 98.1632vw;
		margin: 0 auto;
	}

	/* PICK UP */
	#pickup {
		margin: 5.4081vw 0 0;
	}
	#pickup .channelcontentsinner {
		width: 85.714vw;
		height: 64.8979vw;
		background-size: 100%;
	}
	#pickup .pickup_movie {
		width: 61.2244vw;
		height: 34.4897vw;
		left: 12.6530vw;
		top: 15.5102vw;
	}
	#pickup .pickup_movie::after {
		width: 8.1632vw;
		height: 8.1632vw;
		left: 26.3265vw;
		top: 13.0612vw;
	}
	#pickup .pickup_title {
		width: 35.7142vw;
		left: 25.5102vw;
		top: 50.4081vw;
	}
    #pickup .pickup_movieTtl {
		width: 30.204vw;
		top: 51.0204vw;
	}

	/* channel nav */
	.channelnav {
		width: 98.9795vw;
		margin: 5.1020vw auto 5.4081vw;
	}
	.channelnav .menu li {
		width: 24.2424vw;
		margin-top: 0.7142vw;
	}

	/* channels */
	.channelBox {
		min-width: 100vw;
		padding: 5.1020vw 0 0 0;
	}
	.channelcontentsinner {
		width: 98.5vw;
		padding: 10.7142vw 0 8.0612vw;
	}
	.channelcontentsinner h2{
		margin: 0 auto;
	}
	#channel01 h2{
		width: 41.326vw;
	}
	#channel02 h2{
		width: 46.5306vw;
	}
	#channel03 h2{
		width: 49.1836vw;
	}
	#channel04 h2{
		width: 56.6326vw;
	}
	#channel05 h2{
		width: 56.9387vw;
	}
	#channel06 h2{
		width: 55.2040vw;
	}
	#channel07 h2{
		width: 56.4285vw;
	}
	#channel08 h2{
		width: 13.4693vw;
	}
	#channel09 h2{
		width: 31.7347vw;
	}
    #channel10 h2{
		width: 54.5454vw;
	}
	.channelgroup {
		margin-top: 9.2vw;
	}
	.channelgroup {
		margin-top: 3.7755vw;
	}
	.channelcontentsinner .movie_list li {
		width: 29.6122vw;
		margin-bottom: 6.1224vw;
		padding-right: 4.08163vw;
	}
	.channelcontentsinner .moviethumb {
		width: 30.6122vw;
	}
	.channelcontentsinner .moviethumb::after {
		top: 5vw;
		left: 11.7346vw;
	}
	.channelcontentsinner .movie_list .moviecaption {
		margin: 1.530vw 0 0 0;
		line-height: 1.2;
		font-size: 1.6326vw;
	}
	.channelbtn img{
		width: 18.9795vw;
		height: 5.1020vw;
	}
}

@media screen and (max-width: 767px) {
	.onlyPC {
		display: none;
	}

	img {
		width: 100%;
	}

	/* h1 */
	.channelheader {
		background: url(../img/title_bg.png) repeat-x center top;
		background-size: cover;
		text-align: center;
		padding: 4.4vw 0 7.2vw;
	}
	.channelheader h1 {
		width: 100%;
	}
	.channelheader h1 img {
		width: 100%;
	}

	/* PICK UP */
	#pickup {
		margin-top: 5.6vw;
	}
	#pickup .channelcontentsinner {
		width: 93.3333vw;
		height: 71.73333vw;
		margin: 0 auto;
		background: url(../img/bg_pickup.png) no-repeat center top;
		background-size: cover;
		position: relative;
	}
	#pickup .channelcontentsinner p {
		width: 28.93333vw;
		margin: 0 auto;
		padding-top: 8.53333vw;
	}
	#pickup .pickup_movie {
		width: 68.1vw;
		position: absolute;
		top: 17.2vw;
		left: 12.4vw;
	}
	#pickup .pickup_movie img {
		width: 100%;
	}
	#pickup .pickup_movie::after {
		content: "";
		width: 9.2vw;
		height: 9.2vw;
		position: absolute;
		background-image: url(../img/pickup_play.png);
		background-size: contain;
		background-repeat: no-repeat;
		top: 14.2vw;
		left: 28.9vw;
		pointer-events : none;
	}
	#pickup .pickup_title {
		width: 35.3333vw;
		position: absolute;
		left: 28.5vw;
		bottom: 9.2vw;
	}
    #pickup .pickup_movieTtl {
		width: 33.3333vw;
		height: auto;
		position: absolute;
        transform: translateX(-50%);
		left: 50%;
		top: 56.6666vw;
	}

	/* channel nav */
	.channelnav {
		width: 92vw;
		margin: 6.9333vw auto 0;
	}
	.channelnav .menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.channelnav .menu li {
		width: 44.8vw;
		margin-bottom: 2.4vw;
	}

	/* channels */
	.channelBox {
		width: 100%;
		margin-top: 8vw;
	}
	.channelBox > :nth-child(2n+1) {
		background: url(../img/bg_containts.png) no-repeat center top #faefcc;
		background-size: contain;
	}
	.channelBox > :nth-child(2n) {
		background: url(../img/bg_containts2.png) no-repeat center top;
		background-size: contain;
	}
	.channelcontentsinner {
		padding-bottom: 15.8vw;
		overflow: hidden;
	}
	.channelcontentsinner h2 {
		margin: 15.0666vw auto 0;
	}
	#channel01 h2{
		width: 76.8vw;
	}
	#channel02 h2{
		width: 89.2vw;
	}
	#channel03 h2{
		width: 90.1333vw;
	}
	#channel04 h2{
		width: 98vw;
	}
	#channel05 h2{
		width: 98.8vw;
	}
	#channel06 h2{
		width: 98.8vw;
	}
	#channel07 h2{
		width: 97.3vw;
	}
	#channel08 h2{
		width: 24.9333vw;
	}
	#channel09 h2{
		width: 58.2667vw;
	}
    #channel10 h2{
		width: 96vw;
	}
	.channelgroup {
		margin-top: 9.2vw;
	}
	.channelcontentsinner .movie_list {
		width: 92vw;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}
	.channelcontentsinner .movie_list li {
		width: 100%;
		margin-bottom: 9.2vw;
		max-height: 150vh;
		transition: margin-bottom 0.2s ease-in, max-height 0.6s ease-in;
	}
	.channelcontentsinner .movie_list li.hiddenMovie {
		max-height: 0;
		margin-bottom: 0;
		overflow: hidden;

	}
	.channelcontentsinner .moviethumb {
		position: relative;
	}
	.channelcontentsinner .moviethumb::after {
		width: 16.8vw;
		height: 16.8vw;
		content: "";
		position: absolute;
		background-image: url(../img/movie_play.png);
		background-size: contain;
		background-repeat: no-repeat;
		top: 16.5333vw;
		left: 37.3333vw;
		pointer-events : none;
	}
	.channelcontentsinner .movie_list .moviecaption {
		margin: 4vw 0 0 0;
		line-height: 1.2;
		font-size: 4.8vw;
	}
	.channelbtn {
		width: 52.266vw;
		margin: 0 auto;
	}
	.closed .close{
		display: none;
	}
	.opened .open{
		display: none;
	}
}