@charset "utf-8";
/* Universal Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/**/
.hide {
	display: none !important;
}
/* Base Settings */
html {
	background: #111;

	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size: 14px;

	color: #fff;
	width: 100%;
	min-width: 1280px;
	height: 100%;

	margin: 0 auto;

	/* firefox用 */
	scrollbar-width: thin;
	scrollbar-color: #0693e3 #bbbbbb;
}
body {
	width: 100%;
	min-width: 1280px;
	height: 100%;
	margin: 0;
}

::-webkit-scrollbar {
	width: 5px;
}
::-webkit-scrollbar-track {
	background: #bbbbbb;
}
::-webkit-scrollbar-thumb {
	background: #0693e3;
}

#wrap {}
.inner {
	width: 1280px;
	margin: 0 auto;
}

/* header */
#header {
	position: relative;
	top: 0;
	z-index: 99;
	display: table;

	background: #111;

	width: 100%; 
	border-bottom: 1px solid rgba( 255, 255, 255, .1 );
	box-shadow: 0px 0px 5px rgba( 0, 0, 0, .5 );
}
#header h1 {
	width: 1280px;
	margin: 0 auto;
	padding: 5px 0;

	font-size: 13px;
	font-weight: normal;
	text-align: center;
	color: #ff0;
}
#header #logo {
	display: table-cell;
	width: 10%;

	vertical-align: top;
	padding: 0 20px 0 10px;
}
#header #logo img {
	height: 50px;
	vertical-align: bottom;
}
#header #h_navi {
	display: table-cell;
	width: 60%;
	vertical-align: middle;
}
#header #h_navi a {
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	
	margin: 0 10px;
	padding: 5px 5px;	
	border-bottom: 2px solid #111;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#header #h_navi a:hover {
	border-bottom: 2px solid #fff;
}
#header #h_navi dl {
	position: relative;
	display: inline-block;

	font-size: 14px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	
	margin: 0 10px;
}
#header #h_navi dl dt {
	padding: 0 5px;	
}
#header #h_navi dl dd {
	position: absolute;
	left: -75px;

	z-index: 99;

	display: none;
	padding-top: 10px;

	box-shadow: 2px 2px 5px rgba( 0, 0, 0, .5 );

}
#header #h_navi dl:hover dd {
	display: block;
}
#header #h_navi dl:hover dd div {
	background: #333;
	border: 1px solid rgba( 255, 255,255, .05 );
}

#header #h_navi dl:hover dd div p {
	background-color: #0693e3;
	padding: 10px 15px;
	text-align: center;
}
#header #h_navi dl dd a {
	display: block;

	width: 250px;

	margin: 0;
	padding: 10px 15px;

	border: 0;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#header #h_navi dl dd a:hover {
	background: #555;
	border: 0;
}
#header #h_search_login {
	position: relative;
	display: table-cell;
	width: 40%;

	padding: 0;
	padding-left: 10px;

	text-align: left;
	vertical-align: middle;
	
}
#header #h_search_login span {
	margin-right: 5px;
	font-size: 10px;
	padding: 2px 5px;
	background: #0693e3;
	border-radius: 4px;
}
#header #h_search_login form {
	position: relative;
	display: inline-block;
}
#header #h_search_login form input[type="text"] {
	background: #aaa;
	width: 120px;
	height: 20px;

	padding: 0 10px;
	padding-right: 26px;
	line-height: 20px;

	margin-right: 5px;

	color: #111;


	border: 1px solid rgba( 255, 255, 255, .05 );
	border-radius: 12px;


	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#header #h_search_login form input[type="text"]:focus {
	background: #fff;
	outline: 0;
	border: 1px solid #000;
}
#header #h_search_login form input[type="image"] {
	position: absolute;
	right: 10px; bottom: 0;
	height: 20px;

	background: 0;
	border: 0;
}
#header #h_search_login a {
	display: inline-block;

	padding: 5px 10px;
	margin-left: 5px;

	color: #fff;
	font-size: 12px;
	text-decoration: none;

	border: 1px solid #fff;
	border-radius: 4px;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#header #h_search_login a:hover {
	background: #0693e3;
	border: 1px solid #0693e3;
}

/* main */
#main {
	position: relative;
	/*top: 80px;*/
	width: 100%;
}
#main #video_box {
	position: relative;
	/*top: 77px;*/
	left: 0; right: 0;
	z-index: 15;

	background: #222;
	padding: 10px 0 10px;

	
	box-shadow: 2px 2px 5px rgba( 0, 0, 0, .5 );
}
#main #video_box h2 {
	width: 1280px;
	margin: 0 auto;
	margin-bottom: 10px;

	color: #0ff;
	font-size: 14px;
	font-weight: normal;

}
#main #video_box .inner {
	position: relative;
	display: table;
	width: 1280px;
	margin: 0 auto;
}
#main #video_box .inner a {}
#main #video_box .inner #video_col_1 {	
	display: table-cell;
	/*width: 724px;*/
	width: 740px;
}
#main #video_box .inner #video_col_1 .video_btn_box {
	display: table;
	position: relative;
	width: 100%;
	margin-top: 5px;
}
#main #video_box .inner #video_col_1 .video_btn_box .video_control {
	display: table-cell;
	margin: 0 auto;
	height: 45px;
}
#main #video_box .inner #video_col_1 .video_btn_box .video_control .btn {
	float: left;
	display: block;
	background-image: linear-gradient(180deg,	rgba(233, 233, 233, 1), 
												rgba(172, 172, 172, 1));

	width: 50px;
	height: 40px;
	padding: 10px 10px;
	border: 1px solid #aaa;
	border-bottom: 3px solid #777;

	text-align: center;

	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;

	cursor: pointer;
}
#main #video_box .inner #video_col_1 .video_btn_box .video_control .btn.star {
	width: auto;
	background: none;
	border: none;
	margin-right: 10px;
}
#main #video_box .inner #video_col_1 .video_btn_box .video_control .btn.star:hover {
	background: none;
	border: 0;
	margin-top: 0;
}
#main #video_box .inner #video_col_1 .video_btn_box .video_control .btn:first-of-type img {
	height: 20px;
}
#main #video_box .inner #video_col_1 .video_btn_box .video_control .btn img {
	height: 15px;
	vertical-align: top;
}
#main #video_box .inner #video_col_1 .video_btn_box .video_control .btn:hover {
	margin-top: 2px;
	height: 38px;
	border-bottom: 1px solid #777;
}
#main #video_box .inner #video_col_1 .video_btn_box .video_control .btn:hover {
	background-image: linear-gradient(358deg,	rgba(233, 233, 233, 1),
											rgba(172, 172, 172, 1));
}
#main #video_box .inner #video_col_1 .video_btn_box .video_control .vol {
	float: left;
	line-height: 40px;
	margin-left: 30px;
	margin-right: 10px;
}
#main #video_box .inner #video_col_1 .video_btn_box .video_control .vol img {
	height: 20px;
	vertical-align: middle;
	margin-right: 5px;
}
#main #video_box .inner #video_col_1 .video_btn_box .video_control .vol input {
	vertical-align: middle;
}

/* ▽▽btn_report▽▽ */
.btn_report {
	display: table-cell;
	width: 150px;
	vertical-align: middle;
	text-align: right;
}
.btn_report span {
	background: #0693e3;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	text-shadow: -1px -1px 1px rgba( 0, 0, 0, .5 );
	text-decoration: none;

	border: 1px solid rgba( 0, 0, 0, .1 );
	border-radius: 4px;
	padding: 2px 10px;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;

	cursor: pointer;
}
.btn_report span:hover {
	background: #b5495b;
}
/* △△btn_report△△ */

#main #video_box .inner #video_col_2 {
	display: table-cell;
	width: 440px;

	vertical-align: top;
}
#main #video_box .inner #video_col_2 .video_col_inner {
	display: table;
	width: 540px;
	padding-left: 10px;
}
#main #video_box .inner #video_col_2 .video_col_inner #video_info {
	position: absolute;
	top: 0; bottom: 0;
	display: table-cell;
	overflow-y: auto;

	background: #111;
	width: 540px;
	height: 380px;
	padding: 10px;
}
  
#main #video_box .inner #video_col_2 .video_col_inner #video_info dl {}
#main #video_box .inner #video_col_2 .video_col_inner #video_info dl dt {
	font-size: 16px;
	font-weight: bold;
}
#main #video_box .inner #video_col_2 .video_col_inner #video_info dl dd {
	margin-top: 10px;
}
#main #video_box .inner #video_col_2 .video_col_inner #video_rel {
	display: table-cell;
	width: 200px;
	padding-left: 10px;
}
#main #video_box .inner #video_col_2 .banner {
	position: absolute;
	bottom: 0;
	margin-left: 10px;
}
#main #video_box .inner #video_col_2 .banner img {
	width: 540px;
}
/***********
 * Youtube埋め込み
 ***********/
 #youtube-movie {
	margin: 0 auto;
	width: 100%;
	max-width: 740px; /* 最大の横幅 */
}

#youtube-movie-content {
	padding-top: 56.25%;
	position: relative;
	width: 100%;
}

#youtube-movie-content iframe {
	height: 100% !important;
	left: 0;
	position: absolute;
	top: 0;
	width: 100% !important;
}


/* content */
#content {
	padding-bottom: 50px;
}
#main .video_under {
	/*padding-top: 515px;*/
}
#content .inner {
	display: table;
	margin-top: 15px;
}
#content .inner .col_1 {
	display: table-cell;
	width: 180px;

	vertical-align: top;

}
#content .inner .col_1 .category {}
#content .inner .col_1 .category .guide {
	margin: 10px 0;
	margin-top: 0;
}
#content .inner .col_1 .category .guide img {
	vertical-align: bottom;
	cursor: pointer;
	
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#content .inner .col_1 .category .guide img:hover {
	opacity: .8;
}
#content .inner .col_1 .single a {
	display: block;

	position: relative;
	padding: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	background: #222;

	color: #fff;
	text-decoration: none;

	cursor: pointer;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#content .inner .col_1 .single a:hover {
	background: #333;
	color: #0693e3;
}
#content .inner .col_1 .category .parent {
	position: relative;
	padding: 8px;
	margin-top: 1px;
	background: #222;

	cursor: pointer;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#content .inner .col_1 .category .parent:hover {
	color: #0693e3;
}
#content .inner .col_1 .category .parent:after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;

	margin-top: -6px;
	transition: all 0.2s ease-in-out;
	display: block;
	width: 6px;
	height: 6px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;

	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
#content .inner .col_1 .category .parent.open:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin-top: -4px;
}
#content .inner .col_1 .category .parent.open {
}
#content .inner .col_1 .category .children {
	background: #222;
	list-style: none;
	
	padding: 5px;
}
#content .inner .col_1 .category .children li {
	border-bottom: 1px solid #222;
}
#content .inner .col_1 .category .children li a {
	display: block;
	background: #333;

	color: #fff;
	text-decoration: none;

	padding: 8px;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#content .inner .col_1 .category .children li a:hover {
	background: #444;
	color: #0693e3;
}
#content .inner .col_1 .text_box {
	margin-top: 50px;
	
	color: #888;
	font-size: 12px;
	line-height: 180%;
}
#content .inner .col_1 .text_box a {
	color: #0693e3;
	padding: 0 5px;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#content .inner .col_1 .text_box a:hover {
	opacity: .5;
}
#content .inner .col_1 .text_box p.browser_icon {
	text-align: center;
}
#content .inner .col_1 .text_box p.browser_icon a {
	text-decoration: none;
}
#content .inner .col_1 .text_box p.browser_icon img {
	width: 50px;
	margin: 15px 10px;
}
#content .inner .col_2 {
	display: table-cell;
	width: 1100px;
	padding-left: 24px;

	vertical-align: top;
}
#content .inner .col_2 .banner {
	text-align: center;
}
#content .inner .col_2 h1 {

	margin-bottom: 10px;
	padding: 8px 0;

	color: #FF0;
	font-size: 14px;
	font-weight: normal;

}
#content .inner .col_2 .video_list {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	margin-top: -10px;
	margin-left: -10px;
	margin-bottom: 50px;

	overflow: hidden;
}
#content .inner .col_2 .video_list .box {
	float: left;
	width: 261px;
	margin-top: 10px;
	margin-left: 10px;
	border: 1px solid #333;

	cursor: pointer;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#content .inner .col_2 .video_list .box .box_row {
	overflow: hidden;
}
#content .inner .col_2 .video_list .box:hover {
	color: #0693e3;
	border: 1px solid #0693e3;
}
#content .inner .col_2 .video_list .box .thumbs {
	float: left;
	vertical-align: top;
}
#content .inner .col_2 .video_list .box .thumbs img {
	width: 100px;
	vertical-align: bottom;
}
#content .inner .col_2 .video_list .box .info {
	float: left;

	width: 150px;
	vertical-align: top;
	padding-left: 10px;
}
#content .inner .col_2 .video_list .box .btn_del {
	background: #222;

	width: 100%;
	padding: 5px;

	text-align: center;
	color: #f00;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#content .inner .col_2 .video_list .box .btn_del:hover {
	background: #444;
	color: #fff;	
}

/*
 * footer
 */

 #footer {
	position: relative;
	z-index: 99;
	font-size: 12px;
	text-align: center;
	letter-spacing: .1em;
	
	padding: 20px;
	margin-top: 50px;
 }
 #footer a {
	color: #0693e3;
 }

 /* guide */
 #guide_view {
	display: none;

	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;

	background: rgba( 0, 0, 0, .5 );

	width: 100%; height: 100%;

	z-index: 999;
 }
#guide_view .inner {
	width: 1280px;
	position: relative;
 }
#guide_view .login p {}
#guide_view .login p span {}
#guide_view .login p.user_menu {
	position: absolute;
	top: 40px; left: 520px;
}
#guide_view .login p.user_menu .box {
	display: block;
	border: 2px solid #F00;
	width: 120px;
	height: 30px;
}
#guide_view .login p.user_menu .text {
}

#guide_view .login p.control {
	position: absolute;
	top: 540px; left: 0px;
 }
#guide_view .login p.control .box {
	display: block;
	border: 2px solid #F00;
	width: 740px;
	height: 40px;
}
#guide_view .login p.control .text {
}

#guide_view .login p.channel_list {
	position: absolute;
	top: 670px; left: 0px;
 }
#guide_view .login p.channel_list .box {
	display: block;
	border: 2px solid #F00;
	width: 180px;
	height: 190px;
}
#guide_view .login p.channel_list .text {
}
/*********************************************/
#guide_view .nologin p {}
#guide_view .nologin p span {}
#guide_view .nologin p.user_login {
	position: absolute;
	top: 40px; right:198px;
	text-align: right;
}
#guide_view .nologin p.user_login .box {
	position: absolute;
	right: 0px;
	display: block;
	border: 2px solid #F00;
	width: 236px;
	height: 30px;
}
#guide_view .nologin p.user_login .text {
	position: absolute;
	top: 35px; right: 0;
	width: 400px;

}

#guide_view .nologin p.control {
	position: absolute;
	top: 540px; left: 0px;
 }
#guide_view .nologin p.control .box {
	display: block;
	border: 2px solid #F00;
	width: 740px;
	height: 40px;
}
#guide_view .nologin p.control .text {
}

#guide_view .nologin p.channel_list {
	position: absolute;
	top: 670px; left: 0px;
 }
#guide_view .nologin p.channel_list .box {
	display: block;
	border: 2px solid #F00;
	width: 180px;
	height: 190px;
}
#guide_view .nologin p.channel_list .text {
}

/* footer_comp */
#footer_comp {
	display: table;
	width: 1280px;
	margin: 0 auto;
}
#footer_comp .box_l {
	display: table-cell;
	width: 180px;
	min-width: 180px;
}
#footer_comp .box_r {
	display: table-cell;
	width: 1100px;
    padding-left: 24px;
}
#footer_comp .box_r .comp_link a {
    display: block;
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;
    line-height: 200%;
    padding: 10px;
    color: #fff;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#footer_comp .box_r .comp_link a:hover {
	color: #0693e3;
}