@charset "utf-8";
/* ******************************************************************
 *	File name		: hunter.css
 *	Summary			: chat base
 *	Copyright		: sollkanon
 *	Production		: sollkanon
 * ******************************************************************
*/

/* -----------------------------------------------------------------
   ALL
----------------------------------------------------------------- */

#bdid_members .line{
	margin-bottom:30px;
	padding-bottom:20px;
}

#bdid_members h3{
	position:relative;
	margin:0px;
	padding:0px;
	background:none;
	color:#000;
}
#bdid_members h3.title{
	margin:0 0 15px;
	padding:10px 20px;
	background:#000;
	color:#FFF;
}

#bdid_members h4{
	position:relative;
	margin:0 0 15px;
	padding:0 0 0 30px;
	border-bottom:none;
	color:#000;
	}
	#bdid_members h4::before{
		content:" ";
		position:absolute;
		top:2px;
		left:0px;
		width:15px;
		height:15px;
		background:#000;
	}
	#bdid_members h4::after{
		content:" ";
		position:absolute;
		top:7px;
		left:5px;
		width:15px;
		height:15px;
		background:#E9701E;
}


/* sub_nav */
#bdid_members #sub_nav{
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	margin:0 0 30px;
	}
	#bdid_members #sub_nav ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
		flex-wrap:wrap;
		list-style:none;
	}
	#bdid_members #sub_nav li{
		display:inline-block;
		width:32%;
		min-height:50px;
		position:relative;
		background:rgba(200,89,16,1);
		}
		#bdid_members #sub_nav li::before{
			content:" ";
			position:absolute;
			top:0px;
			left:0px;
			width:50px;
			height:100%;
			background:#B3510F;
		}
		#bdid_members #sub_nav li::after{
			content:" ";
			position:absolute;
			top:15px;
			left:50px;
			width:1px;
			height:calc(100% - 30px);
			border-left:1px solid rgba(255,255,255,0.7);
			z-index:10;
	}
	#bdid_members #sub_nav li a{
		display:-webkit-flex;
		display:flex;
		justify-content:flex-start;
		align-items:center;
		position:relative;
		width:100%;
		height:100%;
		padding:10px 20px 10px 70px;
		font-weight:bold;
		font-size:1.0rem;
		text-align:left;
		text-decoration:none;
		color:#FFF;
		transition-duration:0.5s;
		line-height:1.35;
	}
	#bdid_members #sub_nav li#sn_ptinfo a{
		font-size:0.77rem;
	}
	#bdid_members #sub_nav li a::before{
		content:" ";
		position:absolute;
		top:0px;
		left:0px;
		width:50px;
		height:100%;
	}
	#bdid_members #sub_nav li a::after{
		content:" ";
		opacity:0;
		position:absolute;
		bottom:-20px;
		left:15px;
		border:10px solid transparent;
		border-top:10px solid #000;
		transition-duration:0.5s;
	}
	#bdid_members #sub_nav li a:hover,
	#bdid_members #sub_nav li.active a{
		background:#000;
	}
	#bdid_members #sub_nav li a:hover::after,
	#bdid_members #sub_nav li.active a::after{
		opacity:1;
	}
	#bdid_members #sub_nav li#sn_conso a::before{
		background:url(img/sn_conso.png) no-repeat center center;
	}
	#bdid_members #sub_nav li#sn_app a::before{
		background:url(img/sn_app.png) no-repeat center center;
	}
	#bdid_members #sub_nav li#sn_ptinfo a::before{
		background:url(img/sn_ptinfo.png) no-repeat center center;
	}


/* --- responsive --- */
@media only screen and (max-width:1000px){
	#bdid_members #sub_nav li{
		width:100%;
		}
		#bdid_members #sub_nav li a::after{
			display:none;
	}
}


#bdid_login .contents{
	text-align:center;
}
.contents *{
	font-weight:500;
	font-family: 'Noto Sans JP', sans-serif;
}

/* -----------------------------------------------------------------
   login
----------------------------------------------------------------- */

#error_message{
	position:relative;
	margin:0 0 -20px !important;
	padding:0px 15px;
	text-align:center;
	font-weight:bold;
	font-size:0.77rem;
	background:#C00;
	line-height:2;
	color:#FFF;
}

#login_form_container{
	text-align:center;
}
#loginform{
	display:block;
	position:relative;
	width:360px;
	margin:0 auto 20px;
	padding:20px;
	text-align:center;
	border:1px solid #999;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	}
	#loginform::after{
		content:" ";
		display:block;
		position:absolute;
		top:3px;
		left:3px;
		width:calc(100% - 6px);
		height:calc(100% - 6px);
		margin:0 auto;
		padding:20px;
		text-align:center;
		border:2px solid #C85910;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		z-index:-1;
}

#loginform #username,
#loginform #userpw{
	position:relative;
	margin:0 0 15px;
	line-height:1.0 !important;
	}
	#loginform #username p,
	#loginform #userpw p{
		margin:0px !important;
		font-weight:bold;
		font-size:1.0rem;
	}
	#loginform #username input,
	#loginform #userpw input{
		position:relative;
		width:350px;
		max-width:100%;
		padding:2px 5px;
		font-size:0.87rem;
		text-align:left;
		border:2px solid #CCC !important;
		background:#FFF;
		outline:none;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		transition-duration:0.5s;
	}
	#loginform #username input:focus,
	#loginform #userpw input:focus{
		border:2px solid #181777 !important;
		-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3) inset;
		-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3) inset;
		box-shadow: 0px 0px 3px rgba(0,0,0,0.3) inset;
}

#loginform #login_submit{
	position:relative;
	width:100%;
	margin:35px 0 0px;
	text-align:center;
	z-index:999;
	}
	#loginform #login_submit input{
		display:inline-block;
		position:relative;
		text-align:center;
		margin:0 auto;
		padding:9px 35px 9px;
		font-weight:bold;
		color:#FFF;
		text-decoration:none;
		background:rgba(200,89,16,0.8);
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		transition-duration:0.5s;
		opacity:1;
	}
	#loginform #login_submit input:hover{
		opacity:0.8;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#loginform{
		width:100%;
	}
}

/* -----------------------------------
   foget
------------------------------------*/

.foget,
#foget_code{
	display:inline-block;
	margin:0 auto;
}
.foget a,
#foget_code a{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	height:40px;
	padding:0 20px 0 38px;
	text-decoration:none;
	border:1px solid rgba(0,0,0,0.5);
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	color:#000;
	transition-duration:0.5s;
	}
	.foget a:hover,
	#foget_code a:hover{
		opacity:0.85;
}
.foget a{
	background:url(img/hatena.png) no-repeat 10px center;
	}
	.foget a:hover{
		background:url(img/hatena.png) no-repeat 10px center rgba(0,0,0,0.1);
}
#foget_code a{
	background:url(img/code.png) no-repeat 10px center;
	}
	#foget_code a:hover{
		background:url(img/code.png) no-repeat 10px center rgba(0,0,0,0.1);
}


/* -----------------------------------
   logout_btn
------------------------------------*/

#logout_btn{
	position:absolute;
	top:-45px;
	right:0px;
	padding:3px 20px;
	font-size:0.77rem;
	background:rgba(200,89,16,0.2);
	border:2px solid #999;
	border-top:transparent !important;
	-moz-border-radius:0 0 6px 6px;
	-webkit-border-radius:0 0 6px 6px;
	border-radius:0 0 6px 6px;
	color:#999;
	cursor:pointer;
	transition-duration:0.5s;
}
#logout_btn:hover{
	border:2px solid #000;
	background:rgba(200,89,16,0.8);
	color:#FFF;
}

/* -----------------------------------
   plus_txt
------------------------------------*/

#plus_txt{
	height:auto;
	font-weight:bold;
	color:#F00;
}
#plus_txt.active{
    animation:blink 1.5s ease-in-out 1 alternate;
}
@-webkit-keyframes blink{
    0%   {opacity:0;}
    20%  {opacity:1;}
    40%  {opacity:0;}
    60%  {opacity:1;}
    80%  {opacity:0;}
    100% {opacity:1;}
}

/* -----------------------------------------------------------------
   .youtube
----------------------------------------------------------------- */

.youtube{
	position:relative;
	width:100%;
	height:0px;
	padding-top:56.25%;
	}
	.youtube iframe{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		border:none;
}

/* -----------------------------------------------------------------
   movie_caption
----------------------------------------------------------------- */

#bdid_members section{
	margin-bottom:30px;
	padding-bottom:30px;
	border-bottom:2px solid rgba(0,0,0,0.2);
}
#bdid_members section:last-child{
	margin-bottom:0px;
}

#bdid_members section .movie_list{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	list-style:none;
	}
	#bdid_members section .movie_list li{
		width:49%;
		text-align:center;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#bdid_members section .movie_list li{
		width:100%;
	}
}