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

/*
============================ top CSS ============================
VIDEO
====================================================================
*/
/* 動画種類 */
.label{color:#FFFFFF; padding:0 10px; font-size:9px; display:inline-block; margin-bottom:1px;}

#labelNews, .labelNews > .label{ background:#1e88e5;}
#labelTrend, .labelTrend > .label{ background:#00897b;}
#labelGourmet, .labelGourmet > .label{ background:#43a047;}
#labelEvent, .labelEvent > .label{ background:#fb8c00;}
#labelPeople,.labelPeople > .label{ background:#f4511e;}
#labelLiving,.labelLiving > .label{ background:#d81b60;}
#labelEnter,.labelEnter > .label{ background:#5e35b1;}
#labelSponsor,.labelSponsor > .label{ background:#b13535;}

 /* 一覧 */
.secVideo .wrap4box .box{ background:#fafafa;}
.secVideo .wrap4box .box .wrapText{ margin:10px 0 0 0; font-size:90%; position:relative;}
.secVideo .wrap4box .box .wrapText .label{ display:inline-block; margin-bottom:2px;}
.secVideo .wrap4box .box .wrapText .date{display:inline-block;color:#999999;position:absolute;right:10px;top:0;}

/**
 * 動画プレイヤー
 * ----------------------------------------------------------------------------
 */
.secPlayer .ttl{ font-size:16px;}
.secPlayer .ttl .wrapLabel{ text-align:left;}
.secPlayer .ttl .date{ font-size:11px;}

.secPlayer .inlineBlock .wrapLabel{display:inline-block;}
.secPlayer .inlineBlock .label{text-align:center; font-size:90%; padding:3px 10px; margin:0 0 10px 0; display:inline-block;}
.secPlayer .inlineBlock .text{ font-size:110%; font-weight:bold; margin-bottom:5px; display:inline-block;}
.secPlayer .inlineBlock .date{ font-size:100%; margin-bottom:10px; display:inline-block;}

.bodyLoadIframe .inlineBlock{ height:60px; overflow:hidden; max-width:700px;}
.bodyLoadIframe .inlineBlock .wrapLabel{display:inline-block;}
.bodyLoadIframe .inlineBlock .label{text-align:center; font-size:90%; padding:3px 10px; margin:0 0 10px 0; display:inline-block;}
.bodyLoadIframe .inlineBlock .text{ font-size:110%; font-weight:bold; margin-bottom:5px; display:inline;}
.bodyLoadIframe .inlineBlock .date{ font-size:100%; margin-bottom:10px; display:inline-block; line-height:110%;}

.secPlayer .wrapMonitor{ width:100%;}
.secPlayer .wrapMonitor .fLeft{ width:700px; float:left;}
.secPlayer .wrapMonitor .fLeft iframe{ width:700px; min-height:480px; border:none;}
.secPlayer .wrapMonitor .fRight{ width:280px; float:right; margin-top:60px;}

.secPlayer .wrapMonitor .fRight ul li{ height:99px;}

.secPlayer .wrapMonitor .fRight ul li{ background:#f5f5f5;}
.secPlayer .wrapMonitor .fRight ul li:nth-child(odd){ background:#e8e7e7;}

.secPlayer .wrapMonitor .fRight ul li .wrapImg{ width:140px; float:left; overflow:hidden;}
.secPlayer .wrapMonitor .fRight ul li .wrapImg img{ height:99px; width:auto; max-width:200%; margin-left:-20px;}
.secPlayer .wrapMonitor .fRight ul li .wrapText{ width:124px; float:right; font-size:76%; line-height:120%; padding:8px; height:75px; overflow:hidden;}

body.bodyLoadIframe{ margin:0; padding:0;}
.loadIframe iframe{ width:700px; height:395px;}
.secPlayer .label { padding: 2px 6px;}

/**
 * 動画一覧
 * ----------------------------------------------------------------------------
 */

 /* コーナータイトル */
 .conerTitle{text-align:center;}
 .conerTitle img{ margin-bottom:10px;}

 /* コーナー説明 */
.leadCorner{text-align:center;margin:0 0 40px 0;}

 /* 検索 */
.searchVideo{display:none;text-align:center; margin-bottom:40px;}
.searchVideo form#serchBox dl{}
.searchVideo form#serchBox dl dt{display:inline-block; vertical-align:top; width:410px;}
.searchVideo form#serchBox dl dt input{ border:none; padding: 6px 2%; width: 98%; height:23px;}

.searchVideo form#serchBox dl dd{ display:inline-block; margin:0;}
.searchVideo form#serchBox dl dd button{width:35px; height:35px;background:#666666 url(/img/common/icon_search_white.png) center center no-repeat;background-size: 25px;border:none;}

 /* ボタン */
 .wrapLabel{ text-align:center;}
 .wrapLabel div{
	 width:107px;
	 height:35px;
	 margin:0 2px 20px 2px;
	 display:inline-block;
	 color:#FFFFFF;
	 padding:10px 0 0 0;
	 letter-spacing:0;
	 float:left;
	 line-height:13px;
}
.wrapLabel div:hover{ cursor:pointer;}
 .wrapLabel div span{ font-size:85%; display:block; height:20px; }
 #labelEnter{ font-size:10px;}
 #labelSponsor{ font-size:10px;}
 #labelEnter span, #labelSponsor span{font-size:12px;}
 #labelAll{ background:#666666;}

#labelAll{}
#labelAll .select{ position:relative;z-index:1;}
#labelAll .select:after{
	content:"";
	position:absolute;
	top:5px;
	left:40%;
	width: 25px;
	height: 25px;
	background:#666666;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
	z-index:-1;
}

#labelNews .select{ position:relative;z-index:1;}
#labelNews .select:after{
	content:"";
	position:absolute;
	top:5px;
	left:40%;
	width: 25px;
	height: 25px;
	background:#1e88e5;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
	z-index:-1;
}

#labelTrend .select{ position:relative;z-index:1;}
#labelTrend .select:after{
	content:"";
	position:absolute;
	top:5px;
	left:40%;
	width: 25px;
	height: 25px;
	background:#00897b;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
	z-index:-1;

}

#labelGourmet .select{ position:relative;z-index:1;}
#labelGourmet .select:after{
	content:"";
	position:absolute;
	top:5px;
	left:40%;
	width: 25px;
	height: 25px;
	background:#43a047;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
	z-index:-1;
}

#labelEvent .select{ position:relative;z-index:1;}
#labelEvent .select:after{
	content:"";
	position:absolute;
	top:5px;
	left:40%;
	width: 25px;
	height: 25px;
	background:#fb8c00;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
	z-index:-1;
}

#labelPeople .select{ position:relative;z-index:1;}
#labelPeople .select:after{
	content:"";
	position:absolute;
	top:5px;
	left:40%;
	width: 25px;
	height: 25px;
	background:#f4511e;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
	z-index:-1;
}

#labelLiving .select{ position:relative;z-index:1;}
#labelLiving .select:after{
	content:"";
	position:absolute;
	top:5px;
	left:40%;
	width: 25px;
	height: 25px;
	background:#d81b60;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
	z-index:-1;
}

#labelEnter .select{ position:relative;z-index:1;}
#labelEnter .select:after{
	content:"";
	position:absolute;
	top:5px;
	left:40%;
	width: 25px;
	height: 25px;
	background:#5e35b1;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
	z-index:-1;
}

#labelSponsor .select{ position:relative;z-index:1;}
#labelSponsor .select:after{
	content:"";
	position:absolute;
	top:5px;
	left:40%;
	width: 25px;
	height: 25px;
	background:#b13535;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
	z-index:-1;
}

/* 情報がありません。 */
 #wrapError{height:200px;font-size:120%;display:none;margin:20px 0;}

/* カテゴリごとリンク先変更 */
#wrapShow a.btnMore{ display:none; }
#wrapShow a.labelAll{ display:inline-block;}
.wrap4box .box .wrapImg img{max-width:100%; margin:0;}

 /**
 * スポンサー動画
 * ----------------------------------------------------------------------------
 */

 /*　詳細ページ */
.secPlayer .wrapDetal iframe{ width:1000px; height:562px;}

.secPlayer .block .label{text-align:center; font-size:90%; padding:3px 10px; margin:0 0 10px 0; display:inline-block;}

.secPlayer .block .wrapLabel .cornerLogo{margin:0 0 0 10px; vertical-align:middle;}
.secPlayer .block .wrapLabel .cornerLogo a:hover{ opacity:0.8;}
.secPlayer .block .wrapLabel .cornerLogo img{ height:40px;}

.secPlayer .block .text{ font-size:110%; font-weight:bold; margin-bottom:5px; display:block;}
.secPlayer .block .date{ font-size:100%; margin-bottom:10px;}

.secPlayer .wrapText .fLeft{width:630px;}

.secPlayer .wrapText .fLeft table{border-bottom:none;border-right:none;}

.secPlayer .wrapText .fLeft table td,
.secPlayer .wrapText .fLeft table th{border-top:none;border-left:none;}
.secPlayer .wrapText .fLeft table td img{ height:auto;}


.secPlayer .wrapText .fRight{width:300px;}
.secPlayer .wrapText .fRight .randRectangle{margin-bottom:20px;}

 .secPlayer .wrapText .small{font-size:75%;margin:0 0 30px 0;}

 .secPlayer .wrapText .fLeft .article .btnReadmore{ display:none;}

 /* ラベルlink */

.wrapLinkLabel{ margin:30px 0 30px 0 ; text-align:center; border: 1px solid #ffffff;}

.wrapLinkLabel .inner{background:#f9f9f9;}
.wrapLinkLabel .bgGrey{ background:#f9f9f9;}

.wrapLinkLabel a{ display:inline-block; margin:0 10px;}
.wrapLinkLabel a span{ font-size:60%; line-height:220%;}
.wrapLinkLabel .grey{ color:#666666;}
.wrapLinkLabel .blue{ color:#1e88e5;}
.wrapLinkLabel .emerald{ color:#00897b;}
.wrapLinkLabel .green{ color:#43a047;}
.wrapLinkLabel .yellow{ color:#fb8c00;}
.wrapLinkLabel .orange{ color:#f4511e;}
.wrapLinkLabel .red{ color:#d81b60;}
.wrapLinkLabel .purple{ color:#5e35b1;}
.wrapLinkLabel .brown{ color:#b13535;}

.wrapLinkLabel a.cornerlogo{
	display:inline-block;
	background:#FFF;
	width:150px;
	text-align:center;
	padding:8px 0;
	margin: 10px 3px 0 3px;
}
.wrapLinkLabel span.cornerlogo{
	display:inline-block;
	background:#FFF;
	width:150px;
	text-align:center;
	padding:15px 0 8px 0;
	margin: 10px 3px 0 3px;
	height:28px;
	vertical-align:top;
	color:#999999;
	font-size:85%;
}

.wrapLinkLabel a.cornerlogo img{height:35px;}
.wrapLinkLabel a.cornerlogo:hover{opacity:0.8;}

 /* colorbox */
#cboxClose {top: 30px!important;}
.cboxIframe{ margin-top:-100px!important;}

.secLachatch .wrap4box .box .wrapText{ margin-top:15px;}
@media (min-width: 320px) and (max-width: 667px) {
.secLachatch .wrap4box .box .wrapImg img{height:auto;}
}