@charset "UTF-8";

/* ==========================================================
parts.css

複数ページでコンポーネントとして使用するクラスを記載してください。
HTMLの形式も同様でお願いします。変更する場合は一括。

メディアクエリはPCとSPはまとめずコンポーネントごとです。

========================================================== */


/* --------------------
 clearfix
 for:
 all
----------------------- */
.clear:before,
.clear:after{
	display: table;
	content: "";
}
.clear:after{
	clear: both;
}


/* --------------------
 sp/pc 出し分け用
 for:
 all
----------------------- */
/* PC */
@media screen and (min-width: 768px) {
	/* 後方互換用(出来ればいつか削除したいところ。) */
	*[class^="sp-"],
	*[id^="sp-"],
	.hide {
		display: none !important;
	}

	/* spクラス非表示 */
	.sp-content,
	.hide{
		display: none !important;
	}
}
/* SP */
@media screen and (max-width: 767px) {
	/* 後方互換用(出来ればいつか削除したいところ。) */
	*[class^="pc-"],
	*[id^="pc-"],
	.none {
		display: none !important;
	}

	/* pcクラス非表示 */
	.pc-content{
		display: none !important;
	}
}


/* --------------------
 スーパーバナー
 for:
 all
----------------------- */
.super-bnr {
	clear: both;
	font-size: 0;
}
.super-bnr p {
	display: inline-block;
}


/* --------------------
 btn
 for:
 all
----------------------- */
.btn {
	display: inline-block;
	position: relative;
	padding: 10px 54px;
	font-size: 1.6rem;
	font-weight: bold;
	color: #1a1a1a !important;
	text-decoration: none;
}
.btn:hover {
	text-decoration: none !important;
}

.btn-center{
	padding: 12px;
	margin: 30px 0;
	text-align: center;
}
.btn-center a{
	letter-spacing: 2px;
	padding: 8px 30px;
	background: #000;
	font-size: 1.2rem;
	color:#fff;
	text-decoration: none;
	font-weight: normal;
}
.btn-center a:hover{
	opacity: 0.7;
	text-decoration: none;
}
.btn-center a:before{
	display: inline-block;
	position: relative;
	top: 0px;
	right: 10px;
	width: 9px;
	height: 7px;
	background: url(/assets/img/common/arrow_down.png) no-repeat;
	content: "";
}

.btn-prev-next{
	margin-bottom: 15px;
	text-align: center;
}
.btn-prev-next p{
	display: inline-block;
}
.btn-prev-next a{
	display: block;
	padding: 15px 14px;
	background-color: #1a1a1a;
	color: #fff;
	font-size: 116%;
	font-weight: bold;
	text-align: center;
	letter-spacing: 4px;
}
.btn-prev-next a:hover{
	text-decoration: none;
}
.btn-prev-next p:not(:first-child){
	margin-left: 10px;
}
.btn-prev a:before{
	display: inline-block;
	position: relative;
	top: -2px;
	right: 6px;
	width: 7px;
	height: 9px;
	background: url(/assets/img/common/arrow_prv.png) no-repeat;
	content: "";
}
.btn-nxt a:after{
	display: inline-block;
	position: relative;
	top: -2px;
	left: 6px;
	width: 7px;
	height: 9px;
	background: url(/assets/img/common/arrow_nxt.png) no-repeat;
	content: "";
}

/* btn l r */
.btn-l{
	text-align: left;
}
.btn-l p{
	display: inline-block;
	vertical-align: bottom;
}
.btn-l a:hover{
	text-decoration: none;
	opacity: 0.7;
}
.btn-l a{
	padding: 8px 15px !important;;
	background: #000;
	font-size: 1.2rem !important;
	color:#fff !important;
	text-decoration: none !important;
	font-weight: normal !important;
}
.btn-l a:before {
	display: inline-block;
	position: relative;
	top: 0px;
	right: 5px;
	width: 10px;
	height: 10px;
	background: url(/assets/img/common/arrow_nxt.png) no-repeat;
	content: "";
}

.btn-r{
	text-align: right;
}
.btn-r p{
	display: inline-block;
}
.btn-r a:hover{
	text-decoration: none;
}
.btn-r p a{
	display: block;
	padding: 3px 10px;
	background-color: #1a1a1a;
	color: #fff;
	font-size: 100%;
	font-weight: normal;
	text-align: center;
}
.btn-r a:before {
	display: inline-block;
	position: relative;
	top: 0px;
	right: 3px;
	width: 10px;
	height: 8px;
	background: url(/assets/img/common/arrow_nxt.png) no-repeat;
	background-size: 60%;
	content: "";
}

/* .btn-veiw */
.btn-veiw {
	background-color: #fff;
	width: 80px;
	margin: 10px auto 0;
}
.btn-veiw span {
	font-size: 1.2rem;
}
.btn-veiw a {
	font-size: 1.2rem;
	color:#fff;
}
/* .btn-archive */
.btn-archive a {
	font-size: 1.2rem;
	color:#fff !important;
}

#onair a{
	.btn-veiw a {
		font-size: 1.2rem;
		color:#ccc;
	}
}

/* --------------------
 icon
 for:
 all
----------------------- */
.icon01 a,
.icon02 a,
.icon03 a,
.icon04 a {
		padding: 1px 7px;
		color: #fff !important;
		font-size: 100%;
		font-weight: bold;
}
.icon01 a {
		background-color: #328df2;
}
.icon02 a {
		background-color: #8db501;
}
.icon03 a {
		background-color: #b94995;
}
.icon04 a {
		background-color: #f86948;
}


/* --------------------
 SNSボタンエリア
 for:
 /news/category/template.html,
 /program/template.html,
 /cideocheck/category/category-name/index.html
 etc...
----------------------- */
.sns-icon{
	font-size: 0;
	text-align: right;
	margin: 0 30px 0 0;
}
.sns-icon li{
	display: inline-block;
	margin: 0 0 0 2px;
}

.sns-link-bar {
	margin: 10px 0 0;
}
.sns-link-bar li{
	display: inline-block;
	margin: 0 0 0 0;
}
.sns-link-bar li#twitter{
	margin-right: 20px;
}
.sns-link-bar li#lineshare ,
.sns-link-bar li#lineshare img{
	vertical-align: top;
}
@media screen and (max-width: 767px) {
	.sns-link-bar{
		text-align: right;
	}
	.sns-link-bar li{
		margin: 5px;
	}
	.sns-link-bar li#lineshare ,
	.sns-link-bar li#lineshare img {
		vertical-align: top;
		height: 20px;
		width: auto;
	}

	.sns-icon{
		display: none;
	}
}


/* --------------------
 スライダーコンテンツ
 for:
 /pickup/
 etc...
----------------------- */
.slider {
	background-color: #f8f8f8 ;
	padding: 22px 30px 15px 50px;
	width: 870px;
	position: relative;
}
.slider a{
	color: #1a1a1a;
}
.slider a:hover{
	color: #00efe4;
}
.slider .slick-slide {
	margin: 0 18px 0 0;
}
.slick-slide p{
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.4;
}
.slick-loading .slick-list{
	background: #fff url('./ajax-loader.gif') center center no-repeat;
}

.slick-prev,
.slick-next{
	cursor:pointer;
	width: 21px;
	height: 38px;
	text-indent: -9999px;
	position: absolute;

	top: 50%;
	margin-top: -20px;

	z-index: 100;
	border: none;

	background: none;
	background-size: 21px 38px;
	background-repeat: no-repeat;
}
.slick-prev {
	background-image: url(/assets/img/videocheck/category/btn_slidePrev_on.png);
	left: 11px;
}
.slick-next{
	background-image: url(/assets/img/videocheck/category/btn_slideNext_on.png);
	right: 11px;
}

.slick-prev.slick-disabled,
.slick-next.slick-disabled{
	width: 21px;
	height: 38px;
}
.slick-prev.slick-disabled {
	background-image: url(/assets/img/videocheck/category/btn_slidePrev_d.png);
}
.slick-next.slick-disabled {
	background-image: url(/assets/img/videocheck/category/btn_slideNext_d.png);
}

@media screen and (max-width: 767px) {
	.slider {
		width: 100%;
	}
	.slick-prev,
	.slick-next{
		width: 11px;
		height: 19px;

		margin-top: -10px;
		background-size: 11px 19px;
	}
	.slick-prev {
		background-image: url(/assets/img/videocheck/category/btn_slidePrev_on.png);
		left: 10px;
	}
	.slick-next {
		background-image: url(/assets/img/videocheck/category/btn_slideNext_on.png);
		right: 10px;
	}
	.slick-prev.slick-disabled {
		background-image: url(/assets/img/videocheck/category/btn_slidePrev_d.png);
	}
	.slick-next.slick-disabled {
		background-image: url(/assets/img/videocheck/category/btn_slideNext_d.png);
	}
}


/* --------------------
 recommendスライダー
 for:
 ALL
----------------------- */
.recommend-slider .slick-slide{
	position: relative;
}
.recommend-slider span.title{
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 5px;
	z-index: 5;
	font-size: 14px;
	font-weight: bold;
	background-color: rgba(0,0,0,0.6);
}
#recommend .recommend-slider a{
	color: #fff;
}


/* --------------------
 video-watch 動画の続きを見るには
 for:
 /others/
 /videocheck/
----------------------- */
.video-watch-area {
	width: 870px;
	margin: 0 0 30px;
}
.video-watch-area .headingLv3 {
	background: url(/assets/img/videocheck/icon_play.png) no-repeat 282px 19px;
	background-size: 27px 21px;
	background-color: #000;
	font-size: 2.0rem;
	color: #fff;
	text-align: center;
	padding: 13px 0;
	margin: 0;
}
.video-watch-area .headingLv4 {
	background-color: #333333;
	border-top: 1px solid #666666;
	font-size: 1.6rem;
	color: #fff;
	text-align: center;
	padding: 8px 0 7px;
	margin: 0;
}
.video-watch-area .parts {
	height: 10px;
	text-align: center;
	background-color: #e6e6e6;
}
.video-watch-area ul {
	background-color: #e6e6e6;
	font-size: 0;
	padding: 20px 20px 10px;
}
.video-watch-area li {
	background-color: #fff;
	width: 270px;
	min-height: 150px;
	padding: 15px;
	margin: 0 10px 10px 0px;
	vertical-align: top;
	display: inline-block;
	position: relative;
}
/* for PC margin */
@media screen and (min-width: 769px) {
	.video-watch-area li:nth-of-type(3n){
		margin-right: 0;
	}
	.video-watch-area li:nth-of-type(3n+1){
		clear: both;
	}
}

.video-watch-area li a:link,
.video-watch-area li a:hover{
	color: #000;
}
.video-watch-area li .video-watch-icon{
	float: left;
	margin: 0 10px 20px 0;
}
.video-watch-area li .video-watch-text{
	margin: 0 0 20px;
}
.video-watch-area li .video-watch-title{
	font-size: 1.4rem;
	font-weight: bold;
}
.video-watch-area li div p{
	font-size: 1.2rem;
	line-height: 1.42;
	text-align: left;
	margin: 10px 0 0;
}
.video-watch-area .btn-watch {
	width: 184px;
	margin: 0 auto;
	clear: both;
}
.video-watch-area .btn-watch a {
	background-color: #000;
	font-size: 1.4rem;
	text-align: center;
	padding: 11px 0;
	line-height: 1;
	display: block;
	position: relative;
}
#contents-area .video-watch-area .btn-watch a {
	color: #fff;
}
.video-watch-area .btn-watch a:hover {
	color: #fff;
	opacity: 0.7;
}
.video-watch-area .btn-watch span {
	font-weight: bold;
	padding: 0 0 0 7px;
}
.video-watch-area .btn-watch i {
	position: absolute;
	top: 12px;
	left: 10px;
}
@media screen and (max-width: 767px) {
	.video-watch-area {
		width: 100%;
		margin: 30px 0;
	}
	.video-watch-area .headingLv3 {
		background-position: 10% 54%;
		background-size: 27px 21px;
		padding: 15px 0 10px;
	}
	.video-watch-area .headingLv4 {
		font-size: 1.4rem;
		padding: 5px 10%;
	}
	.video-watch-area .parts {
		width: 20px;
		height: 10px;
		margin: 0 auto;
	}
	.video-watch-area ul {
		padding: 20px 2%;
		margin: -10px 0 0;
	}
	.video-watch-area li {
		width: 49%;
		min-height: 126px;
		padding: 2%;
		margin: 0 2% 2% 0px;
	}
	.video-watch-area li:nth-of-type(even) {
		margin: 0 0 2% 0px;
	}
	.video-watch-area li .video-watch-icon{
		width: 26%;
	}
	.video-watch-area li .video-watch-text{
		width: 100%;
	}
	.video-watch-area li .video-watch-text p{
		font-size: 1.2rem;
		margin: 5px 0 0;
	}
	.video-watch-area .btn-watch{
		width: 80%;
	}
	.video-watch-area .btn-watch a{
		padding: 7px 0 6px;
	}
	.video-watch-area .btn-watch i {
		display: none;
	}
}


/* --------------------
 text-list
 for:
 all
----------------------- */
/* text-list01
----------------------- */
.text-list01 li{
	padding: 17px 0;
	line-height: 1.575;
}
.text-list01 li:not(:last-child){
	border-bottom: 1px solid #ccc;
}
.text-list01 li strong{
	display: block;
	font-weight: bold;
	margin-bottom: 8px;
	line-height: 1.575;
}
.text-list01 span{
	display: block;
	margin: 20px 0 0 10px;
}
/* text-list02
----------------------- */
.text-list02{
	position: relative;
}
.text-list02 li{
	display: table;
	width: 100%;
	border-bottom: 1px solid #ccc;
}
.text-list02 p{
	line-height: 1.43;
}
.text-list02 li:first-child{
	border-top: 1px solid #ccc;
}
.text-list02 a{
	color: #1a1a1a;
}
.text-list02 a:hover{
	color: #00efe4;
	text-decoration: none;
}
.text-list02 a:hover img{
	opacity: 0.8;
}
.text-list02 li .list-body{
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 80px;
	padding: 17px 39px;
}
.text-list02 li:nth-child(even){
	background-color: #f8f8f8;
}
.text-list02 .text-list-col{
	display: table;
	width: 100%;
}
.text-list02 .text-list-col>span,
.text-list02 .text-list-col>.text-list-control{
	display: table-cell;
	vertical-align: top;
}
.text-list02 select.text-list-control {
  background-color: #ffffff;
	position: relative;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff url("/assets/img/common/text_list_dd.png") no-repeat right 20px center / 9px 6px;
}
.text-list02 select.text-list-control:before{
	display: block;
	position: absolute;
	right: 0;
	top: 10px;
	width: 9px;
	height: 6px;
	content: "";
}
.text-list02 span{
	width: 192px;
	padding-top: 12px;
}
.text-list02.arrow li{
	padding: 16px 20px 15px 40px;
}
.text-list02.arrow a{
	position: relative;
	line-height: 1.5;
}
.text-list02.arrow a:before{
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	left: -18px;
	top: 4px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid #1a1a1a;
	content: "";
}

.text-list-control{
	width: 100%;
	padding: 15px 18px 11px;
	border: 1px solid #ccc;
	font-size: 1.4rem; /* 14px */
}
textarea.text-list-control{
	min-height: 85px;
	max-width: 600px;
	min-width: 600px;
	resize: vertical!important;
	font-size: 1.73rem; /* 14px */
}
.text-list02 .img-block{
	margin: 3px -18px 2px;
}
.text-list02 .img-block p{
	padding: 0;
}
.text-list02 .img-block>div:nth-child(2) p:first-child{
	top: 0;
	margin: 4px 0;
	padding: 0;
}
.text-list02 .img-block strong{
	margin-bottom: 5px;
	line-height: 1.43;
}
.img-block{
	display: table;
	width: 100%
}
.img-block>div{
	display: table-cell;
	vertical-align: top;
}
.img-block>div:first-child{
	width: 120px;
}
.img-block>div:nth-child(2){
	padding-left: 15px;
}

.img-block>div:nth-child(2) p:first-child{
	position: relative;
	top: -4px;
	margin-bottom: -3px;
}


@media (max-width: 767px){
	.text-list02 li{
		padding-left: 2%;
		padding-right: 2%;
	}
	.text-list02 span{
		padding: 0 0 2%;
	}
	.text-list02 .img-block{
		margin: 0;
	}
	textarea.text-list-control{
		min-width: 100%;
	}

}

/* list-arrow
----------------------- */
.list li,
.list-arrow li{
	position: relative;
	margin-bottom: 8px;
	line-height: 1.575;
}
.list-arrow li{
	padding-left: 20px;
}
.list-arrow li:before{
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	left: -1px;
	top: 5px;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-left: 3px solid #000;
	content: "";
}


/* list-col
----------------------- */
.list-col>li{
	margin-bottom: 50px;
}
.list-col a{
	display: block;
	color: #1a1a1a;
}
.list-col a:hover{
	color: #00efe4;
	text-decoration: none;
}
.list-col a:hover img{
	opacity: 0.8;
}
.list-col>li p{
	margin-bottom: 10px;
	line-height: 1.43;
}
.list-col>li strong{
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	line-height: 1.43;
}
.list-col.col2>li{
	width: 420px;
}
.list-col.col3>li{
	width: 270px;
}
.list-col.col2>li:nth-child(odd),
.list-col.col3>li:not(:nth-child(3n+3)),
.list-col.col4>li:not(:nth-child(4n+4)){
	margin-right: 30px;
}
.list-col.col4>li{
	width: 195px;
}
@media (min-width: 768px){
	.list-col.col4 .img-block>div{
		display: block;
	}
	.list-col.col4 .img-block>div:first-child{
		width: 100%;
	}
	.list-col.col4 .img-block>div:nth-child(2){
		padding: 0;
	}
}

@media (max-width: 767px){
	.list-col.col2>li:nth-child(odd),
	.list-col.col3>li:not(:nth-child(3n+3)),
	.list-col>li{
		width: 100%;
		margin: 0 auto 20px;
	}
	.list-col>li{
		width: 48%!important;
	}
	.list-col.col4>li{
		width: 104%!important;
		margin: 0 -2%!important;
		padding: 4% 2% 0;
		border-bottom: 1px solid #ccc;
	}
	.list-col.col4>li:first-child{
		border-top: 1px solid #ccc;
	}
	.list-col.col4>li:nth-child(even){
		background-color: #f8f8f8;
	}
	.text-list02 li .list-body{
		padding: 3% 0;
	}
	.text-list02 .text-list-col>span,
	.text-list02 .text-list-col>.text-list-control{
		display: block;
	}
}

/* accordion-list
----------------------- */
.accordion-list li .list-body{
	padding: 16px 20px;
}
.accordion-list-btn{
	position: relative;
	padding-right: 40px !important;
	cursor: pointer;
}
.accordion-list-btn:before{
	display: block;
	position: absolute;
	height: 13px;
	width: 13px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	top: 40%;
	right: 28px;
	transform: translateY(-50%) rotate(45deg);
	-moz-transform: translateY(-50%) rotate(45deg);
	-webkit-transform: translateY(-50%) rotate(45deg);
	content: "";
}
.accordion-list.open .accordion-list-btn:before{
	top: 55%;
	border-right: 2px solid #4f4f4f;
	border-bottom: 2px solid #4f4f4f;
	transform: translateY(-50%) rotate(-135deg);
	-moz-transform: translateY(-50%) rotate(-135deg);
	-webkit-transform: translateY(-50%) rotate(-135deg);
}



/* --------------------
 text-col2
----------------------- */
/* text-col */
.text-col{
	display: table;
	width: 100%;
	color: #1a1a1a;
	line-height: 1.5;
}
.text-col>div{
	display: table-cell;
	width: 50%;
}
.text-col>div:first-child{
	padding-right: 30px;
	border-right: 1px solid #ccc;
}
.text-col>div:nth-child(2){
	padding-left: 40px;
}
.text-col strong{
	display: block;
	margin-bottom: 8px;
	font-weight: bold;
	line-height: 1.575;
}

/* .text-col2 */
.text-col2 {
	display: table;
	width: 100%;
	color: #000;
	line-height: 1.5;
}
.text-col2>div {
	display: table-cell;
	width: 50%;
}

/* .text-col2 */
.text-col3 {
	display: table;
	width: 100%;
	color: #000;
	line-height: 1.5;
}
.text-col3>div {
	display: table-cell;
	width: 50%;
}
@media screen and (max-width: 767px) {
	.text-col3>div {
		display: block;
		width: 100%;
	}
}


/* --------------------
 tbl-col
----------------------- */
.tbl-col.col2{
	width: 100%;
}
.tbl-col.col2 tr:nth-child(odd){
	background-color: #f8f8f8;
}
.tbl-col.col2 td{
	font-size: 1.4rem;
	padding: 16px 10px 10px;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	color: #1a1a1a;
	line-height: 1.43;
}
.tbl-col.col2 td:first-child{
	border-right: 0;
}
.tbl-col.col2 tr:first-child td{
	background-color: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 9px 10px 5px;
}
.tbl-col.col2 tr:first-child td:last-child{
	background-color: #666;
	border-color: #666 #666 #666 #ccc;
}



/* --------------------
 form parts
----------------------- */
/* radiobox
----------------------- */
.radio-box{
	margin: 14px 0;
}
.radio-box input[type="radio"] {
	display: none;
}
.radio-box input[type="radio"] + label{
	position: relative;
	top: 1px;
	cursor: pointer;
	font-size: 1.4rem;
}
.radio-box input[type="radio"] + label span{
	display: inline-block;
	position: relative;
	width: 16px;
	height: 16px;
	margin: 0px 10px 0 0;
	top: -1px;
	background-color: #fff;
	border: 1px solid #ccc;
	vertical-align: middle;
	cursor: pointer;
	border-radius: 50%;
}
.radio-box input[type="radio"] + label span:before{
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;
	background-color: transparent;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	content: "";
}
.radio-box input[type="radio"] + label:hover span:before{
	background-color: rgba(0,0,0,0.5);
}
.radio-box input[type="radio"]:checked + label span:before{
	background-color: #000;
}


/* category-tabs
----------------------- */
#category-tabs {
  -moz-appearance: none;
  background: #1a1a1a url("/assets/img/common/text_list_dd_wt.png") no-repeat scroll right 20px center / 9px 6px;
  border: 0 none;
  border-radius: 0;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  height: 45px;
  padding: 0 30px 0 15px;
  position: relative;
  width: 300px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.category-tabs-holder select::-ms-expand {
	display: none;
}
.category-tabs-holder {
  margin-bottom: 30px;
  text-align: center;
}