@charset "utf-8";
/* ******************************************************************
 *	Site name		: CONNECT WEIRD
 *	File name		: chat_ver_4.3.css
 *	Summary			: chat base
 *	Copyright		: sollkanon
 *	Production		: sollkanon
 * ******************************************************************
*/

/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */

body{
	position:relative;
	width:100%;
	height:100%;
	line-height:145%;
	color:#222;
	background:#FFF;
	overflow:hidden;
}
input, select {
	vertical-align:middle;
}
input:focus{
	box-shadow: 0px 0px 10px 0px rgba(255,128,0,0.4);
	border: solid 2px #666;
}

/* -----------------------------------------------------------------
   header
----------------------------------------------------------------- */

header{
}

/* --- responsive --- */
@media only screen and (max-width:767px){
}

/* -----------------------------------------------------------------
   flame
----------------------------------------------------------------- */

form{
	position:relative;
	display:block;
	width:100%;
	height:100%;
	z-index:1;
}
main{
	position:relative;
	display:block;
	width:100%;
	height:100%;
	z-index:1;
}

#main_contents{
	display:flex;
	display:-webkit-flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	width:100%;
	height:calc(100% - 58px);
	}
	#disp_message{
		position:relative;
		width:calc(100% - 260px);
		height:100%;
		margin:0 0 15px;
		padding:10px 25px 10px 10px;
		background:#FFF;
		background:rgba(0,0,0,0.1);
		overflow-y:scroll;
		z-index:5;
	}
	#member_list{
		position:absolute;
		top:0px;
		right:0px;
		width:260px;
		height:calc(100% - 58px);
		background:#F5F7F9;
		-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);
		transition-duration:0.5s;
		z-index:10;
}

#conform_area{
	position:relative;
	width:100%;
	height:58px;/*28px*/
	padding:14px 14px 0px;
	background:#EBEFF3;
/*	border-top:2px solid #DAE1E6;*/
	border-top:2px solid #BBB;
	z-index:10;
}


/* --- responsive --- */
@media only screen and (max-width:767px){
	#disp_message{
		width:calc(100% - 20px);
	}
	#member_list{
		right:-260px;
	}
	/* active */
	#member_list.active{
		right:0px;
	}
}

/* -----------------------------------------------------------------
   display_btn
----------------------------------------------------------------- */

#display_btn{
	display:none;
	position:absolute;
	top:0px;
	left:calc(100% - 20px);
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.2);
	cursor:pointer;
	overflow:hidden;
	transition-duration:0.5s;
	z-index:9;
	}
	#display_btn.active{
		left:0px;
		background:rgba(0,0,0,0.6);
	}
	#display_btn::before{
		content:"OPEN MENU";
		display:block;
		position:absolute;
		top:0px;
		left:0px;
		width:20px;
		height:100%;
		padding:30px 0 0;
		font-weight:bold;
		font-size:0.84rem;
		writing-mode: vertical-rl; 
		color:#999;
		transition-duration:0.5s;
		background:rgba(0,0,0,0);
	}
	#display_btn.active::before{
		left:calc(100% - 280px);
		content:"CLOSE MENU";
		background:rgba(0,0,0,0.4);
	}
	#display_btn::after{
		content:" ";
		position:absolute;
		top:10px;
		left:5px;
		border:7px solid transparent;
		border-left:10px solid rgba(0,0,0,0.5);
		transition-duration:0.5s;
	}
	#display_btn.active::after{
		left:calc(100% - 275px);
		border-left:10px solid rgba(255,255,255,0.5);
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#display_btn{
		display:block;
	}
}

/* -----------------------------------------------------------------
   disp_message
----------------------------------------------------------------- */

#disp_message .dmli{
	position:relative;
	width:calc(100% - 60px);
	margin:0 0 10px 60px;
	padding:4px 0px 4px 0;
	font-size:0.84rem;
	line-height:1.5;
}
#disp_message .dmli > div:nth-child(1){/* name */
	display:inline-block;
	margin:0 7px 0 0;
	font-weight:bold;
	font-size:0.82rem;
	color:#D70;
}
#disp_message .dmli > div:nth-child(2){/* icon */
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:7px;
	left:-60px;
	width:45px;
	height:45px;
	background:rgba(0,0,0,0.2);
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	overflow:hidden;
	}
	#disp_message .dmli > div:nth-child(2) img{
		width:45px;
		height:45px;
		object-fit:cover;
}
#disp_message .dmli p{
	display:block;
	position:relative;
	width:100%;
	margin:0px !important;
	padding:10px;
	word-break:break-all;
	font-weight:normal;
	font-size:0.82rem;
	background:rgba(255,255,255,0.8);
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	color:#000;
	}
	#disp_message .dmli p::before{
		content:" ";
		position:absolute;
		top:9px;
		left:-14px;
		border:4px solid transparent;
		border-right:10px solid rgba(255,255,255,0.8);
}
#disp_message .dmli p img{
	display:inline-block;
    width:100px;
    height:auto;
	vertical-align:top;
}
#disp_message .dmli time{
	position:absolute;
	top:2px;
	right:0px;
	font-weight:normal;
	font-size:0.6rem;
	color:#BBB;
}
/* youtube */
#disp_message .dmli figure.youtube_disp{
	position:relative;
	width:100%;
	height:0px;
	padding-top:56.25%;
	background:#000;
	}
	#disp_message .dmli figure.youtube_disp iframe{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
}

/* mypost */
#disp_message .dmli.mypost{
	margin:0 60px 10px 0;
}
#disp_message .dmli.mypost > div:nth-child(2){/* icon */
	left:auto;
	right:-60px;
	}
	#disp_message .dmli.mypost p::before{
		left:auto;
		right:-14px;
		border:4px solid transparent;
		border-left:10px solid rgba(255,255,255,0.8);
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#disp_message .dmli{
		font-size:0.77rem;
		padding:4px 0px 4px 0;
		line-height:1.4;
	}
	#disp_message .dmli > div{
		display:block;
		font-size:0.77rem;
	}
	#disp_message .dmli p{
		display:block;
		font-size:0.77rem;
	}
	#disp_message .dmli p img{
		display:block;
	}
}

/* -----------------------------------------------------------------
   member_list
----------------------------------------------------------------- */

#member_list h2{
	padding:15px 10px 0px;
	font-weight:bold;
	font-size:0.84rem;
	color:#000;
}
#member_disp{
	height:calc(100% - 215px);
	padding:15px 10px 10px;
	border-bottom:1px solid rgba(0,0,0,0.1);
	}
	#member_disp ul{
		position:relative;
		width:100%;
		height:100%;
		list-style:none;
		overflow-y:scroll;
	}
	#member_disp li{
		display:-webkit-flex;
		display:flex;
		align-items:center;
		flex-wrap:wrap;
		position:relative;
		width:100%;
		min-height:45px;
		margin:0 0 5px;
		padding-left:60px;
		color:#000;
	}
	#member_disp li > span{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:absolute;
		top:0px;
		left:0px;
		width:45px;
		height:45px;
		background:rgba(0,0,0,0.2);
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		border-radius:50%;
		overflow:hidden;
		}
		#member_disp li > span img{
			width:45px;
			height:45px;
			object-fit:cover;
	}
	#member_disp li#member_mine > span{
		cursor:pointer;
		transition-duration:0.5s;
		}
		#member_disp li#member_mine > span:hover{
			transform: scale(0.8,0.8);
	}
	#member_disp li p{
		display:inline-block;
		position:relative;
		width:100%;
		margin:0px;
		font-weight:normal;
		font-size:0.9rem;
		line-height:1.35;
		color:#000;
	}
	#member_disp li p span{
		display:block;
		width:100%;
		font-weight:normal;
		font-size:0.7rem;
		color:rgba(0,0,0,0.5);
}

#view_count{
	font-size:0.8rem;
	padding:15px 15px 10px;
}


/* -----------------------------------------------------------------
   information
----------------------------------------------------------------- */

#information{
	position:absolute;
	bottom:86px;
	width:100%;
	padding:10px;
	border-top:2px solid #DAE1E6;
	}
	#information p{
		font-size:0.77rem;
		color:#777;
}

/* -----------------------------------------------------------------
   setting
----------------------------------------------------------------- */

#setting{
	position:absolute;
	bottom:43px;
	width:100%;/*260px*/
	height:43px;/*28px*/
	padding:8px 7px 0px;
	background:#EBEFF3;
	border-top:2px solid #DAE1E6;
	}
	#setting > div{
		position:absolute;
		top:5px;
		display:inline-block;
		height:32px;/*32+7*/
		width:32px;
		border:1px solid #999;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		cursor:pointer;
		overflow:hidden;
		transition-duration:0.5s;
		background-color:#EBEFF3;
	}
	#setting > div:hover{
		background-color:#DDD;
	}
	#setting_rename{
		left:7px;
		background:url(../../image/rename.png) no-repeat 0 0;
	}
	#setting_icon{
		left:48px;
		background:url(../../image/icon.png) no-repeat 0 0;
	}
	#setting_color{
		top:auto !important;
		bottom:4px;
		left:89px;
		background:url(../../image/color.png) no-repeat 0 0;
		overflow:hidden;
		}
		#setting_color.active{
			height:190px;/* 追加時高さ設定必要 40+30*n */
		}
		#setting_color #color_select{
			display:none;
			padding-top:35px;
			}
			#setting_color #color_select label{
				display:block;
				width:24px;
				height:24px;
				margin:0 0 5px 3px;
				padding:3px;
				border:1px solid #999;
				cursor:pointer;
				}
				#setting_color #color_select label:last-child{
					margin:0 0 0px 3px;
				}
				#setting_color #color_select label.active{
					border:1px solid #F00;
			}
			#setting_color #color_select label#color_ust{
				background:url(../../image/color_ust.png) no-repeat center center #FFF;
			}
			#setting_color #color_select label#color_dafault{
				background:#FFF;
			}
			#setting_color #color_select label#color_black{
				background:#000;
			}
			#setting_color #color_select label#color_rockman{
				background:url(../../image/color_rockman.png) no-repeat center center #3399FF;
			}
			#setting_color #color_select label#color_astaria{
				background:url(../../image/color_astaria.png) no-repeat center center #7373FF;
			}
			#setting_color #color_select label input[type=radio]{
				display:none;
			}
		#setting_color.active #color_select{
			display:block;
	}

	#setting_logout{
		left:212px;
		background:url(../../image/logout.png) no-repeat 0 0;
		opacity:0.5;
		cursor:not-allowed !important;
		}
		#setting_logout.active{
			opacity:1;
			cursor:pointer !important;
}

/* -----------------------------------------------------------------
   other_name_input
----------------------------------------------------------------- */

#other_name_input{
	position:absolute;
	bottom:0px;
	width:100%;
	height:43px;/*28px*/
	padding:8px 7px 0px;
	background:#EBEFF3;
	border-top:2px solid #DAE1E6;
	}
	#other_name_input input{
		position:relative;
		width:calc(100% - 86px);
		height:26px;
		padding:2px 5px;
		background:#FFF;
		font-size:0.70rem;
		border:1px solid #BBB;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		color:#666;
		}
		#other_name_input input::placeholder{
			color:#CCC;
		}
		#other_name_input input:-ms-input-placeholder{
			color:#CCC;
		}
		#other_name_input input::-ms-input-placeholder{
			color:#CCC;
	}
	#other_name_input #ohter_name_submit{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:absolute;
		top:8px;
		right:10px;
		width:72px;
		height:24px;
		padding:1px 0 0 0;
		font-weight:bold;
		font-size:0.70rem;
		text-align:center;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		background:rgba(0,0,0,0.1);
		border:1px solid rgba(0,0,0,0.3);
		line-height:1.3;
		color:#999;
		cursor:pointer;
		transition-duration:0.5s;
	}
	#other_name_input #ohter_name_submit:hover{
		background:rgba(0,0,0,0.2);
		color:#666;
	}

/* -----------------------------------------------------------------
   conform_area
----------------------------------------------------------------- */

#conform_area input{
	position:relative;
	width:calc(100% - 30px);/* 56px - xxx - 30px */
	height:28px;
	margin:0px;
	padding:2px 5px;
	background:#FFF;
	font-size:0.82rem;
	border:1px solid #BBB;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}
#conform_area #icon_btn{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:57px;
	height:57px;
	background:rgba(100,100,200,0.1);
	cursor:pointer;
	}
	#conform_area #icon_btn #my_icon{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:absolute;
		top:6px;
		left:6px;
		width:45px;
		height:45px;
		background:rgba(0,0,0,0.2);
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		border-radius:50%;
		overflow:hidden;
		transition-duration:0.5s;
		}
		#conform_area #icon_btn #my_icon:hover{
			transform: scale(0.8,0.8);
		}
		#conform_area #icon_btn #my_icon img{
			width:45px;
			height:45px;
			object-fit:cover;
}
#conform_area #stmp_btn{
	position:absolute;
	top:11px;
	right:5px;
	width:34px;
	height:34px;
	background:url(../../image/stamp_b.png) no-repeat center center;
	cursor:pointer;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#conform_area input{
		width:calc(100% - 86px);/* 56px - xxx - 30px */
		margin:0 0 0 56px;
	}
	#conform_area #icon_btn{
		display:block;
	}
}

/* -----------------------------------------------------------------
   name_form
----------------------------------------------------------------- */

#name_form{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	padding-bottom:30px;
	z-index:100;
	}
	#name_form_bg{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		z-index:0;
}
#name_form_set{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
	z-index:100;
}
#name_form_box{
	position:relative;
	width:300px;
	background:#FFF;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
	z-index:101;
	}
	#name_form_box:after{
		content:" ";
		position:absolute;
		top:2px;
		left:2px;
		width:calc(100% - 4px);
		height:calc(100% - 4px);
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		border:1px solid rgba(255,128,0,0.8);
		z-index:1;
 }
#nfb_name{
	position:relative;
	padding:20px;
	background:rgba(255,128,0,0.1);
	border-bottom:1px solid rgba(0,0,0,0.1);
	z-index:10;
}
#nfb_name h2{
	position:relative;
	margin:0 0 10px;
	font-weight:bold;
	font-size:0.9rem;
}
#nfb_name input{
	position:relative;
	width:100%;
	height:28px;
	padding:2px 5px;
	background:#FFF;
	font-size:0.82rem;
	border:1px solid #BBB;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4) inset;
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4) inset;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1) inset;
}
#nfb_btn{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-around;
	position:relative;
	padding:15px;
	z-index:10;
}
#nfb_btn #nfb_sub,
#nfb_btn #nfb_cancel{
	min-width:90px;
	padding:5px 10px;
	font-weight:bold;
	font-size:0.82rem;
	text-align:center;
	background:#D96D00;
	color:#FFF;
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	cursor:pointer;
	}
	#nfb_btn #nfb_sub:hover,
	#nfb_btn #nfb_cancel:hover{
		-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);
}


/* -----------------------------------------------------------------
   stamp_list
----------------------------------------------------------------- */

#stamp_list{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	padding-bottom:30px;
	background:rgba(0,0,0,0.5);
	z-index:100;
}
#stamp_list_set{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
}
#stamp_list_box{
	position:relative;
	width:70%;
	height:90%;
	padding:20px;
	background:rgba(255,255,255,0.7);
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
	overflow:hidden;
}
#stamp_list_box ul#stamp_menu{
	position:relative;
	width:calc(100% - 30px);
	height:40px;
	margin: 0 0 5px;
	padding:5px;
	list-style:none;
	background:rgba(0,0,0,0.4);
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	}
	#stamp_list_box ul#stamp_menu li{
		display:inline-block;
		position: relative;
		width:30px;
		height:30px;
		cursor: pointer;
	}
	#stamp_list_box ul#stamp_menu li.active:after{
		content:" ";
		position:absolute;
		top:35px;
		left:3px;
		border:12px solid transparent;
		border-top:12px solid rgba(0,0,0,0.4);
}
#stamp_close{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position: absolute;
	top: 10px;
	right: 10px;
	height:25px;
	width: 25px;
	background:#C00;
	color: #FFF;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	cursor: pointer;
	}
	#stamp_close:hover{
		-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);
}
#stamp_list_box ul.stamp_set{
	display:none;
	height:90%;
	position:relative;
	list-style:none;
	overflow-y:scroll;
	}
	#stamp_list_box ul:nth-of-type(2){
		display:block;
}
#stamp_list_box ul.stamp_set li{
	display:inline-block;
	width:104px;
	height:104px;
	margin:10px;
	border:2px solid rgba(255,0,0,0);
	cursor:pointer;
	transition-duration:0.5s;
    }
    #stamp_list_box ul.stamp_set li img{
        width:100px;
        height:100px;
}
#stamp_list_box ul.stamp_set li:hover{
	border:2px solid rgba(255,0,0,1);
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#stamp_list_box{
		width:90%;
		background:rgba(255,255,255,0.95);
	}
}

/* -----------------------------------------------------------------
   icon_list
----------------------------------------------------------------- */

#icon_list{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	padding-bottom:30px;
	background:rgba(0,0,0,0.5);
	z-index:100;
}
#icon_list_set{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
}
#icon_list_box{
	position:relative;
	width:70%;
	height:90%;
	padding:20px;
	background:rgba(255,255,255,0.7);
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
	overflow:hidden;
}
#icon_list_box ul#icon_menu{
	position:relative;
	width:calc(100% - 30px);
	height:40px;
	margin: 0 0 10px;
	padding:5px;
	list-style:none;
	background:rgba(0,0,0,0.4);
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	}
	#icon_list_box ul#icon_menu li{
		display:inline-block;
		position: relative;
		width:30px;
		height:30px;
		cursor: pointer;
	}
	#icon_list_box ul#icon_menu li.active:after{
		content:" ";
		position:absolute;
		top:35px;
		left:3px;
		border:12px solid transparent;
		border-top:12px solid rgba(0,0,0,0.4);
}
#icon_close{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position: absolute;
	top: 10px;
	right: 10px;
	height:25px;
	width: 25px;
	background:#C00;
	color: #FFF;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	cursor: pointer;
	}
	#icon_close:hover{
		-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);
}
#icon_list_box .icon_set{
	display:none;
	position:relative;
	height:90%;
	list-style:none;
	overflow-y:scroll;
	}
	#icon_list_box .icon_set:nth-of-type(1){
		display:block;
}
#icon_list_box .icon_set p.icon_title{
	display:inline-block;
	margin:10px 0 0 0;
	padding:7px 15px 6px;
	font-weight:bold;
	font-size:0.77rem;
	background:#333;
	color:#FFF;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	line-height:1;
}
#icon_list_box .icon_set ul{
	margin:0 0 10px;
	list-style:none;
}
#icon_list_box .icon_set li{
	display:inline-block;
/*	width:49px;
	height:49px;*/
	width:94px;
	height:94px;
	margin:3px;
	border:2px solid rgba(255,0,0,0);
	cursor:pointer;
	transition-duration:0.5s;
    }
    #icon_list_box .icon_set li img{
/*        width:45px;
        height:45px;*/
		width:90px;
		height:90px;
		object-fit:cover;
}
#icon_list_box .icon_set li:hover{
	border:2px solid rgba(255,0,0,1);
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#icon_list_box{
		width:90%;
		height:90%;
		background:rgba(255,255,255,0.95);
	}
	#icon_list_box ul.icon_set li{
		margin:2px 0px;
    }
	#icon_list_box .icon_set li{
		width:64px;
		height:64px;
	    }
	    #icon_list_box .icon_set li img{
	        width:60px;
	        height:60px;
	}
}

/* -----------------------------------------------------------------
   other
----------------------------------------------------------------- */

/*

input[type="text"],
textarea {
	margin-bottom: 20px;
	padding: 10px;
	font-size: 86%;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #fff;
}

input[type="text"] {
	width: 200px;
}
textarea {
	width: 50%;
	max-width: 50%;
	height: 70px;
}
input[type="submit"] {
	appearance: none;
	-webkit-appearance: none;
	padding: 10px 20px;
	color: #fff;
	font-size: 86%;
	line-height: 1.0em;
	cursor: pointer;
	border: none;
	border-radius: 5px;
	background-color: #37a1e5;
}
input[type=submit]:hover,
button:hover {
	background-color: #2392d8;
}

-----------------------------------*/





/* -----------------------------------------------------------------
   footer
----------------------------------------------------------------- */

#copyright{
	display:none;
}