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

body{
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  min-height: 2000px;
  padding-top: 170px;
}

@media screen and (max-width:768px) {
	body{
	  padding-top: 100px;
	}
}

a:hover img{
  opacity: 0.5;/*全般ブラウザ用50%*/
  filter: alpha(opacity=50);/*IE向け記述透明度50％*/
}
/*★★アンカーリンクが増えたらこのスタイルも追加しましょう★★*/
#link_cm,#link_howto,#link_howto_s,#link_talk,#link_anzen,#link_shop{
margin-top:-170px;
padding-top:170px;
}
@media screen and (max-width:768px) {
	#link_cm,#link_howto,#link_howto_s,#link_talk,#link_anzen,#link_shop{
	margin-top:-83px;
	padding-top:83px;
	}
}


.header_tx{
	font-weight:bold;
}
.container{
/*	margin-bottom:50px;*/
	position:relative;
}
.jumbotron{
	margin-bottom:0px;
	padding:20px 60px;
}
.logo01{
	padding-bottom:10px;
	text-align: -webkit-center;
}
.Channel_box p{
	margin-left:20%;
}
.bt_box{
	margin-top:3.5%;
}
.bt01,
.bt02{
	margin-bottom:15px;
	float:left;
}
.bt02{
	padding-left:20px;
}
.nav{
/*	margin-bottom:15px;*/
/*    border-top:2px solid #bfbfbf;
	border-bottom:2px solid #bfbfbf;*/
	clear:both;
	background-color:#333f4f;
}
.nav li{
	font-weight:bold;
}
.nav li:hover{
	background-color:#eb9316;
}
.nav li a{
	color:#FFFFFF;
	
}
.label{
    padding: 2px 8px;
}
h2{
	text-align:center;
	line-height:1.3;
	font-weight:bold;
}
.thumbnail{
	margin-bottom:5px;
}
.caption{
/* max-width:400px;*/
 width:100%;
 float: left;line-height: 1.2; 
 margin-bottom: 20px;
/* background-color: lightblue;*/
}
.caption p{
	text-align:left;
	font-weight:bold;
	color: #666;
	margin: 10px 0;
}
.caption p a{
	text-decoration:none;
	font-weight:bold;
	display:block;
	margin-top:2%;
}
.caption p a:hover {
	color:#52afff;
}
.movie{
	margin:20px 0;
}

.movie_frame iframe { width: 100%; height: 312px;}


/*--メディアクエリー--*/

@media screen and (min-width:769px) and ( max-width:991px) {
	/*　画面サイズが768pxから1024pxまではここを読み込む　*/
.movie_frame iframe { width: 100%;}
}
@media screen and (min-width:992px) and ( max-width:1199px) {
	/*　画面サイズが768pxから1024pxまではここを読み込む　*/

}
@media screen and (min-width:1200px) {
	/*　画面サイズが1024pxからはここを読み込む　*/

}
/*--メディアクエリー--*/



.movie .thumbnail{
 margin: 0 auto;
 max-width:200px;
 height: auto;
}
.top_text_end{
	background-color:#fecccd;
	color:#fc565f;
	text-align:center;
	font-size: 13px;
	margin-bottom: 10px;

}
.end_txt{
	font-weight: bold;
	color:#666;
	float: left;
	margin-left: 10px;
	font-size: 13px;
}
.end_txt .label{
 font-size: 13px;
 margin-bottom: 5px; line-height: 2;
}

.end_area{
 width: 50%;
 float: left;
 margin-bottom: 10px;
}
.end_area .thumbnail{
 margin: 10px 0 10px 10px;
 width:150px;
}
.r_line{
 border-right: 1px solid #ecf0f1;
}

.nengou01,
.nengou02,
.nengou03,
.nengou04{
	font-size:23px;
	border-bottom: 2px solid #bfbfbf;
	margin:20px 0 20px 0;
	font-weight: bold;
}



/*ブルックストーク*/
.brooks_talk_ttl{
word-break: keep-all;
}
h3{
	font-size:20px;
	text-align: center;
	margin: 0 0 20px 0;
	color: #888;
	font-weight: bold;
}
.ttl_sab{
	font-size:20px;
	text-align: center;
	margin: 0 0 20px 0;
	color: #888;
	font-weight: bold;
}

.brooks_talk{
	font-size:23px;line-height: 1.5;
	border-bottom:2px solid #16a085;
	margin:10px 0;
	font-weight: bold;
	color: #16a085;
}
.brooks_talk_num{
 background-color: #16a085;
 color :#FFF;
 padding: 0 10px;
 margin: 0 10px 0 0;
}




.setumei{
	font-size:15px;
	color: #666;
}
.pagetop_box{
	
}
.page-top{
	background-color:#eb9316;
	position:fixed;
	padding:10px 20px;
	text-decoration:none;
	top:94%;
	color:#FFFFFF;
	font-weight: bold;
	border-radius:30px;
	z-index: 20;
}
.page-top:hover{
	text-decoration:none;
	opacity:0.5;
}
.copyright{
	line-height:1.7em;
	width:50%;
	margin:0 auto;
	font-size:1px;
}
footer{
	width:100%;
	background-color:#888888;
	color:#FFFFFF;
	padding:20px;
}
/*--デバイス幅変更--*/
@media screen and (max-width:320px) {
	.btn-warning{
		padding:5px;
		font-size:12px;
	}
}
@media screen and (max-width:767px) { 
    body{
		font-size:14px;
	}
    .header_tx{ font-size:15px;}
    .jumbotron p{ font-size:14px;}
    h2 { font-size:22px;}
    h3 { font-size:14px;}

	.caption{
		font-size:18px;
	}
	.page-header{
		border:0px;
		margin:0;
	}
	.bt_box{
		margin-top:20px;
	}
	.Channel_box p{
	    margin-left:0;
    }
	.bt02{
		padding-left:0;
	}
	.page-top{
		padding:10px;
/*		bottom: 10px;*/
		right:3%;
	}
	.copyright{
		width:100%;
	}
}
@media screen and (min-width:768px){
	body{
		font-size:18px;
	}
    .header_tx{ font-size:18px;}
    .jumbotron p{ font-size:18px;}
    h2 { font-size:31px;}
    h3 { font-size:21px;}
	.caption{
		font-size: 18px;
	}
	.btn-warning{
		font-size:15px;
		padding:15px;
	}
	.none{
		display:none;
	}
	.nav li{
/*	    width:228px;*/
    }
	.page-top{
		top:92%;
		right:6%;
	}
}

.top_text{
/* max-width:400px;*/
 margin: 0 auto;
 font-size: 14px;
 color: #666;
 font-weight: normal;
}
/*---------------------------------
全体
----------------------------------*/
.m10{ margin: 10px;}
.mt20{ margin-top: 20px;}
.fl_l{ float: left;}
.fl_r{ float: right;}



.nav 
.top_link a{
 font-size: 15px; line-height: 1.8; color: #333;
 background-color: pink;
}
/*---------------------------------
ナビゲーション
----------------------------------*/
.nav_txt{
 font-size: 15px;
}
/*---------------------------------
SNS
----------------------------------*/
.snsb {

	overflow: hidden;
}
.snsb ul {margin: 0;padding: 0;}
.snsb li {
	list-style: none;
	float: left;
	margin: 4px;
}
.snsb iframe {
	margin: 0 !important;
}
/*---------------------------------
ぱんくずリスト
----------------------------------*/
.pan_list{ font-size: 12px; line-height: 1.8; color: #333;}
.pan_list ul{ margin 0;padding: 0;}
.pan_list li{ margin 0;padding: 0 0 0 15px;}
#container .breadcrumb { margin: 0;background-color: FFF;}
/*---------------------------------
動画スタイル（ブライトコープ版）
----------------------------------*/
.vjs-playlist {
  width: 100%;
  height: 100%;
}



/*
.mv_area {
  text-align: center;
  margin: 0 auto 20px auto;
  max-width: 1000px;
  width: 100%;
  height: auto;
}

*/
/*
.video-js {
  width: 100%;
  height: 389px;

}
.vjs-playlist {
  width: 100%;
  height: 389px;
}
*/


.header h1{
 margin: 0;padding: 0 0 10px 0;
}
.page-header{
 margin:0; padding: 10px 0 0 0;
}
.logo_img {
 float: left;
}
.logo_img img{
min-width: 105px;
max-width: 170px;
}
.sns_area{
 float: left;
 margin-top: 30px;
}

@media screen and (max-width:768px) {
	h1{ margin: 10px 0 5px 15px;padding: 0;}
	.sns_area{
	margin: 0 0 0 10px;
	}
}


/*新着情報*/
.topics{
 border-left: 8px solid #ff8c00;
 padding-left: 10px;
 margin: 20px 0;
}
.topics h4{ 
 margin: 0; padding: 0 0 5px 0;
 font-size: 20px; color: #ff8c00;
 font-weight: bold;
 /*background-color: #f1c40f;*/
 background:url("../image/title_bg_dotted.gif");
 background-repeat:repeat;
}
.topics dl{ margin: 0;padding: 0;}
.topics dt{ margin: 0;padding: 2px 0 0 10px;
 font-size: 15px; line-height: 1.5; color: #505050;
 border-top: 1px solid #ecf0f1;}
.topics dd{ margin: 0 0 0 10px; padding: 0;}
.topics .label{ padding: 0 10px;font-size: 14px;}
.new_day{ width: 110px;float: left;}
.mini_new .label { font-size: 11px;}


@media screen and (max-width:640px) {
 .new_day{ width: 100%;}
 .topics dt{ margin: 0;padding: 0 0 0 5px;  font-size: 12px; line-height: 1.5; color: #505050;}
}

.att_top{
 font-size: 13px; line-height: 1.5; color: #333;
 margin: 0;padding: 0;
}
.att p{
 font-size: 13px; line-height: 1.5; color: #333;
 margin: 0;padding: 0;
}
/*---------------------------------
footer
----------------------------------*/
.foot_caption {
 margin: 0px 20px;
 padding-bottom: 10px;
 text-align: center;
 color: #333333;
 font-size: 12px;
 line-height: 1.3;
}

/*---------------------------------
youtube　軽量化
----------------------------------*/
.youtube {
	display: inline-block;
	position: relative;
	overflow: hidden;cursor : pointer;
/*	width: 320px;
	height: 180px;*/
}
.youtube::before {
	position: absolute;
	content: "動画を再生する";
	color: #fff;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	line-height: 310px;
	background: rgba(0, 0, 0, 0.6);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	transition: all 0.3s;
}
.youtube:hover::before {
	background: rgba(0, 0, 0, 0.7);
	cursor: pointer;
	transition: all 0.3s;
}

.youtube img{ width: 100%;}


/*--メディアクエリー--*/
@media screen and (min-width:769px) and ( max-width:991px) {
 .youtube { width: 100%;}
}

@media screen and (max-width:480px) {
 .youtube::before { line-height: 180px;	font-size: 20px;}
}