@charset "utf-8";

/*==========================================================================================
	CSS base style
	Date: 2014-11-27(+09:00)
	Maintained: R.Suzuki
==========================================================================================*/


/* Table of contents: */
/* ------------------
 *
 * 00:link text color
 * 00:構造
 *   -ヘッダー
 *   -フッター
 *   -content内部
 */

/* プロパティの指定順序 */
/*
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 *
 */



/* 初期化 */
#pTab02 .tab {		width:334px;	height:68px;}
.chProgram li span,
.chProgramS li span {
	display:block;
	background:none;
	padding:0;
	cursor:auto;
}




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

	// メインパネル：

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

.mainPanel {
	margin-top:-5px;
	padding:20px 0;
	background:url(../img/bg_mainPanel.jpg) 0 100% repeat-x;
	-webkit-box-shadow:inset 0 3px 3px -3px rgba(000,000,000,0.4),inset 0 -3px 2px -2px rgba(000,000,000,0.4);
   	-moz-box-shadow:inset 0 3px 3px -3px rgba(000,000,000,0.4),inset 0 -3px 2px -2px rgba(000,000,000,0.4);
        	box-shadow:inset 0 3px 3px -3px rgba(000,000,000,0.4),inset 0 -3px 2px -2px rgba(000,000,000,0.4);
}
.mainPanelIn {
	position:relative;
 width: 1002px;
 margin:0 auto;
	padding-bottom:30px;
 padding-left: 15px;
 padding-right: 15px;
}






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

	// メインパネル：タブ（大）

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

.panelTabsL {}
.panelTabsL > li {
	float:left;
	width:50%;
}
.panelTabsL > li img {
	width:100%;
	height:auto;
}





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

	// メインパネル：タブ（小）

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

.panelTabs {
	display:none;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	text-align:center;
	z-index:1000;
}
.panelTabs ul > li {
	display:inline-block;
	margin:0 30px;
}
.panelTabs .tab {
	display:block;
	width:334px;
	height:68px;
	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;
}
.panelTabs .tab.active {
	cursor:default;
}


#pTab01 .tab              {	background-image:url("../img/tab_01.png");}
#pTab01 .tab.active,
#pTab01 .tab.active:hover {	background-image:url("../img/tab_01_on.png");}
#pTab01 .tab:hover        {	background-image:url("../img/tab_01_over.png");}

#pTab02 .tab              {	background-image:url("../img/tab_02.png");}
#pTab02 .tab.active,
#pTab02 .tab.active:hover {	background-image:url("../img/tab_02_on.png");}
#pTab02 .tab:hover        {	background-image:url("../img/tab_02_over.png");}





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

	// メインパネル：内容

==========================================================================================*/
.panel {
	position:absolute;
	top:-999999px;
 padding:20px 20px 77px;
 border:3px solid #0058ea;
 border-radius:4px;
	background:#fff;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
	box-shadow:0 0 2px 0 rgba(000,000,000,0.4);
}
.panelIn {}
.movie {
	float:left;
	max-width:480px;
	max-height:270px;
	overflow:hidden;
	-webkit-box-sizing: border-box;
 box-sizing:border-box;
}
.movie video {
	display:block;
}
.movie .hidden {
	display:none;
}



.content {
	float:right;
	width:460px;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}







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

	// メインパネル：パネル（1）

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

/*
==========================================================================================*/
#panel01 {}

/*
==========================================================================================*/
.chapterUnit {
	border-bottom:1px solid #fff;
	background:#f6f7f5;
}

/*
==========================================================================================*/
.panelHead {
	padding:10px;
	background:#e8ebe7;
	font-size:16px;
	font-size:1.6rem;
	font-weight:bold;
}

/*
==========================================================================================*/
.chHead {
	float:left;
	display:table-cell;
	width:68px;
	min-height:15px;
	padding:8px 0;
	border:2px solid #e8ebe7;
	background:#fff;
	font-size:12px;
	font-size:1.2rem;
	line-height:1;
	text-align:center;
	vertical-align:middle;
}

/*
==========================================================================================*/
.chBody {
	float:right;
	width:388px;
}

/*
==========================================================================================*/
.chProgram,
.chProgramS {
	width:100%;
	clear:both;
	padding-left:0;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}
.chProgram li,
.chProgramS li {
	float:left;
	width:100%;
	min-height:15px;
	padding-left:2px;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
	-webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.chProgram li:hover,
.chProgramS li:hover {
	background:none;
}
.chProgram li.select,
.chProgramS li.select,
.chProgram li.active,
.chProgramS li.active {
	background:none;
}

/*
------------------------------------------------------------------------------------------*/
.chProgram li > span,
.chProgramS li > span,
.chProgram li > a,
.chProgramS li > a {
	display:block;
	padding-left:10px;
	color:#333;
	text-decoration:none;
	line-height:1;
}
.chProgram li > a:hover,
.chProgramS li > a:hover {
	color:#fff;
	background-color:#0058EA;
}
.chProgram li.select > a,
.chProgramS li.select > a,
.chProgram li.active > a,
.chProgramS li.active > a {
	color:#fff;
	background-color:#0058EA;
}
.chProgram li > a span,
.chProgramS li > a span {
	cursor:pointer;
}



/*
------------------------------------------------------------------------------------------*/
.chProgram {
	font-size:12px;
	font-size:1.2rem;
}
.chProgram li > span {
	padding:10px 0 3px 10px;
}
.chProgram li > a span {
	display:block;
	padding:10px 0 10px 18px;
	background:url(../img/ico_arw_05R.png) 0 50% no-repeat;
	cursor:pointer;
}

/*
------------------------------------------------------------------------------------------*/
.chProgramS {
	font-size:11px;
	font-size:1.1rem;
}
.chProgramS li {	width:50%;}
.chProgramS li > a span {
	display:block;
	padding:8px 0 8px 18px;
	background:url(../img/ico_arw_06R.png) 0 50% no-repeat;
	cursor:pointer;
}

/*
------------------------------------------------------------------------------------------*/
.content .toList {
	margin-top:0;
	padding-top:10px;
}
.content .toList a {
	display:block;
	width:100%;
}

#ch01 {	border-top:1px solid #ccc;}
#ch01 .chProgram li {	width:50%;}



/* パネル01
==========================================================================================*/
#panel01 .chProgram,
#panel01 .chProgramS {
	padding-left:15px;
}
#nMov1-1 {}
#nMov1-2 {}
#nMov2-1 {}
#nMov2-2 {}
#nMov2-3 {}
#nMov2-4 {}
#nMov2-5 {}
#nMov3-1 {}

.mejs-overlay {	background-color:	rgba(000,000,000,0.6);}
.mejs-layers .mejs-overlay-loading {	background:none;}



/* パネル02
==========================================================================================*/
#panel02 {
	border-color:#22cb6a;
}
#panel02.chProgram li > a span {
	padding:8px 0 8px 18px;
}
#panel02 .movie img {
	max-width:100%;
	height:auto;
}
#panel02 .movie {
	overflow:visible;
}
#panel02 .movie .cap {
	margin-top:5px;
	font-size:10px;
	font-size:1.0rem;
	-webkit-transform:scale(0.75);
}

#panel02 .chapterUnit {}
#p02-ch01 {}
#p02-ch02 {}

#panel02 .chProgram li > span {
	padding-bottom:6px;
	background:#90e5b4;
	color:#0d4e29;
	font-size:14px;
	font-size:1.4rem;
}
#panel02 .chBody {
	float:none;
	width:100%;
}

#panel02 .content .linkBtnA {
	padding:5px 10px 4px;
	border-color:#1ABC9C;
	color:#1ABC9C;
	font-size:16px;
	font-size:1.6rem;
	text-align:left;
}


/* Hybridcast
==========================================================================================*/
.hybridcastNote {
	margin-top:15px;
}
.hybridcastNote dt {
	line-height:1;
}
.hybridcastNote dt img {
	vertical-align:text-bottom;
}
.hybridcastNote dt small {
	margin-left:5px;
	font-size: 10px;
	font-size: 1.0rem;
}
.hybridcastNote dd {
	margin-top:5px;
	font-size: 11px;
	font-size: 1.1rem;
}



/*
==========================================================================================*/
.bnrBtn {
	display:block;
	width:100%;
	margin:15px 0;
	padding:20px 20px;
	background:#22cb6a;
	color:#fff;
	font-size:13px;
	font-size:1.3rem;
	line-height:1;
	text-decoration:none;
	text-shadow:0 1px 2px rgba(000,000,000,0.4);
	overflow:hidden;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
 border-radius:4px;
	box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 0 0 rgba(000,000,000,0.4);
	-webkit-transition: all 0.5s ease;
	        transition: all 0.5s ease;
}
.bnrBtn span {
	display:block;
	padding-right:25px;
	background:url(../img/ico_arw_02R.png) 100% 50% no-repeat;
	font-size:16px;
	font-size:1.6rem;
}
a.bnrBtn {	color:#fff; text-decoration:none;}
.bnrBtn:hover {
	filter: alpha(opacity=70);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
	-moz-opacity: 0.70;
	opacity: 0.70;
}




/* 英語版
==========================================================================================*/
.xEng .panelCopy {
	margin-bottom:16px;
	padding: 10px;
	border: 2px solid #338efc;
	border-radius: 4px;
	font-family: 'Asap', 'Droid Sans', 'Verdana', sans-serif;
	font-size:20px;
	font-size:2.0rem;
	text-align:center;
}


/*.xEng .mainPanel {	padding-bottom:0;}*/
.xEng #panel00en {	padding:20px;}

.xEng #panel00en .movie {}
.xEng #panel00en .content {	margin-top:5em;}

.xEng #panel00en h1 {
	font-size:26px;
	font-size:2.6rem;
}
.xEng #panel00en p {
	margin-top:15px;
	font-size:13px;
	font-size:1.3rem;
}

.xEng #panel01 { border-color: #22cb6a;}
.xEng #panel02 { border-color: #0058ea;}

.xEng .panel {	padding-bottom:40px;}
.xEng .panel .content .panelHead {
	font-size: 20px;
	font-size: 2.0rem;
}
.xEng .panel .content p {
	margin:15px 0;
	font-size: 14px;
	font-size: 1.4rem;
}
.xEng .panel .content .linkBtnA {
	padding: 5px 10px 4px;
	font-size: 15px;
	font-size: 1.5rem;
	text-align: left;
}
.xEng #panel01 .content .linkBtnA {
	border-color: #22cb6a;
	color: #22cb6a;
}
.xEng #panel02 .content .linkBtnA {
	border-color: #0058ea;
	color: #0058ea;
}


.xEng #pTab01 .tab,
.xEng #pTab02 .tab {
	height: 47px;
}
.xEng #pTab01 .tab {	background-image:url(../../en/images/tab_01.png);}
.xEng #pTab02 .tab {	background-image:url(../../en/images/tab_02.png);}

.xEng #pTab01 .tab:hover {	background-image:url(../../en/images/tab_01_over.png);}
.xEng #pTab02 .tab:hover {	background-image:url(../../en/images/tab_02_over.png);}

.xEng #pTab01 .tab.active,
.xEng #pTab01 .tab.active:hover {
	background-image:url(../../en/images/tab_01_on.png);
}
.xEng #pTab02 .tab.active,
.xEng #pTab02 .tab.active:hover {
	background-image:url(../../en/images/tab_02_on.png);
}




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

// mediaQuery 979px以下用（タブレット用）の記述

==========================================================================================*/
@media screen and (max-width: 979px) {


/*
==========================================================================================*/
.siteIndex .mainPanel {
	margin:0 0 8px;
	padding:0;
	background:none;
	border:none;
 box-shadow:none;
}
.mainPanelIn {
	width:100%;
	padding:0;
	border:none;
}

.xEng .panelCopy {
	margin:20px 16px 14px;
	font-size:1.4rem;
}


/*
==========================================================================================*/
.panel {
	margin:0 0 20px;
	padding:0 0 20px;
	border:none;
	background:#000;
	border-radius:0;
	box-shadow:none;
}
.xEng .panel {
	padding:0;
	background:#fff;
}

.chHead {	width:25%;}
.chBody {
	float:none;
}
.movie {
	float:none;
	width:100%;
	height:auto;
	margin:0 auto;
	background:#000;
	overflow:hidden;
}
.chProgram, .chProgramS {
	padding:0 5px 0 0;
}
.chProgramS li {	width:100%;}
.movie video {
	width:100%;
	height:auto;
}

#ch01 .chProgram li {	width:100%;}
#panel01 .chProgram,
#panel01 .chProgramS {
	padding-left:0;
}
#panel01 .chBody {
	display:table-cell;
	float:none;
	width:75%;
}


/*
==========================================================================================*/
.content {
	float:none;
	width:100%;
}
.content .toList {
	margin:10px 10px 0;
}
.content .toList a {
	width:100%;
}
.xEng .panel .content p {
	padding:0 15px;
}


/*
==========================================================================================*/
.panelTabs {
	position:relative;
}
.panelTabs ul li {	margin:0;}


/*
==========================================================================================*/
#pTab01 {	display:block;} /*Index.css用*/
#pTab02 {	padding:0 0 1px;}
#pTab02 .tab {
	max-width: 320px;
	height: 46px;
	background:#1ABC9C url("share/img/tab_02.png") no-repeat scroll 0 0 transparent;
}

.panelTabs ul {
	display:table;
	width:100%;
}
.panelTabs #pTab01,
.panelTabs #pTab02 {
	display:table-cell;
	width:50%;
}
.panelTabs #pTab01 .tab,
.panelTabs #pTab02 .tab,
.xEng .panelTabs #pTab01 .tab,
.xEng .panelTabs #pTab02 .tab {
	width:100%;
	height:auto;
	background-image:none;
	background-color:#767676;
	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.15), rgba(255,255,255,.15));
	background-image: linear-gradient(to top, rgba(0,0,0,.15), rgba(255,255,255,.15));
	font-size:1.0rem;
	white-space:normal;
	text-indent:0;
}
.panelTabs #pTab01 .tab:hover,
.panelTabs #pTab02 .tab:hover,
.xEng .panelTabs #pTab01 .tab:hover,
.xEng .panelTabs #pTab02 .tab:hover {
	background-image:none;
}

.panelTabs #pTab01 .tab.active,
.xEng .panelTabs #pTab02 .tab.active {
	background-color: #0058ea;
}
.panelTabs #pTab02 .tab.active,
.xEng .panelTabs #pTab01 .tab.active {
	background-color: #22cb6a;
}

.panelTabs #pTab01 a,
.panelTabs #pTab02 a {
	width:100%;
	max-width:100%;
	padding:15px 0;
	color:#fff;
	text-decoration:none;
}

/*
.mejs-poster,
.mejs-video,
.mejs-overlay {
	width:100% !important;
	height:auto !important;
	min-width:320px;
	min-height:180px;
}
*/

#panel02 .movie {
	max-height:none;
}
#panel02 .movie .cap {
	margin-top:0;
	padding:5px;
	color:#ccc;
}


/* Hybridcast
==========================================================================================*/
.hybridcastNote {
	padding:10px 5px;
	background:#fff;
}
.hybridcastNote dt {
	font-size:10px;
	font-size:1.0rem;
}
.hybridcastNote dd {
	font-size:10px;
	font-size:1.0rem;
}



/*
==========================================================================================*/
.xEng .mainPanel {
	padding:0 0 10px;
	background:none;
	box-shadow:none;
/*	background:#338EFC;*/
}
.xEng #panel00en .movie {
	display:none;
}
.xEng #panel00en {
	padding:10px 15px;
	background:none;
}
.xEng #panel00en .content {
	margin-top:15px;
	padding:0 0 10px;
	color:#fff;
}
.xEng #panel00en p {
	margin-top: 0px;
}



/*
==========================================================================================*/
video {	display:none;}
video.disp {	display:block;}

 
.bnrBtn {
 width: calc(100% - 20px);
 margin-left: 10px;
 margin-right: 10px;
}



}



















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

	floatさせたボックスが親ボックスの外にはみ出す現象を回避

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

/*　IE6、IE7対策
==========================================================================================*/
.panel,
.panelIn,
.chapterUnit,

.clearFix,
.cFix
{
   ?zoom:1;
}


/* 以外のブラウザ
==========================================================================================*/
.panel:after,
.panelIn:after,
.chapterUnit:after,

.clearFix:after,
.cFix:after
{
	content:"";
	display:table;
	clear:both;
}

/* */
/* floatさせたボックスが親ボックスの外にはみ出す現象を回避（ここまで） */