@charset 'UTF-8';

/* ■MY BOX　++++++++++++++++++++++++++++*/

#leftBox .scroll-wrapper{
	height: 100%;
	height: 704px;
	overflow: hidden;
	overflow: auto;
}

#myboxFlc{
	position: relative;
	z-index: 9;
	width:154px;
	height: 680px;
	height: calc(100% - 32px);
	cursor: move;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow-x:hidden;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	/* max-height:400px; 	position: relative;
	z-index: 9;
*/
}

#mybox{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width:154px;
	height:auto;
}

#mybox.on{
	transition: all 2s cubic-bezier(0.075, 0.820, 0.165, 1.000); 
	-webkit-transition: all 2s cubic-bezier(0.075, 0.820, 0.165, 1.000); 
	-ms-transition: all 2s cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

#mybox.over{
	transition: all 0.6s cubic-bezier(0.075, 0.820, 0.165, 1.000); 
	-webkit-transition: all 0.6s cubic-bezier(0.075, 0.820, 0.165, 1.000); 
	-ms-transition: all 0.6s cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

#mybox p em,
#mybox p{
	display: block;
}

#mybox p span{
	display: inline;
}

#mybox p,
#mybox p em,
#mybox p span{
	padding:0;
	font-size:0.5rem;
	line-height: 0.6rem;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mybox p{
	padding-top: 4px;
}

#mybox li
{
	position:relative;/*  */
	display:block;
	flex: 0 0 76px;	
	width:76px;
	height:128px;
	vertical-align: middle;
	border: 0;
	overflow:hidden;
}

/* #mybox li:hover, */
#mybox li.menuOn
{
	border:2px #333 solid;
}

#mybox li img{
	display:block;
	margin:0 auto;
	width:auto;
	height:100px;
}


#myboxMenu
{
	position:absolute;
	padding:4px 2px;
	bottom:0px;
	left: 0px;
	z-index:10;
	width:76px;
	background: rgba(0,0,0,1);
	font-size:10px;
	line-height:14px; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#myboxMenu span{
	padding: 0 0px;
}

#myboxMenu span
{
	display: block;
	color:#c4b588;
	cursor:pointer;
	border-bottom: #666 solid 1px;
}

#myboxMenu span.cntInfo{
	height: 24px;
	color: #d8d8d8;
	cursor: default;
	overflow: hidden;
}


#myboxMenu span:last-child{
	border-bottom: 0;
}

#myboxMenu span em{
	display: block;
}

#myboxMenu span em:hover,
#myboxMenu a:hover
{
	cursor:pointer;
	color:#c75252;
	background:#d5caaa;
}

/*ADD EXP HRIMG ++++++++++++++++++++++++++++++++++++*/

#expHRImg{
	margin:50px auto;
	width:auto;
	position:absolute;
	padding:10px;
	left:50px;
	overflow:hidden;
}

#bg{
	position:fixed;
	display:none;
	top:0;
	left:0;
	z-index:20;
	width:100%;
	height:100%;
	background:rgba(000,000,000,0.8);
}

#bgImg{
	position:fixed;
	top:0;
	left:0;
	z-index:50;
	width:100%;
	height:100%;
	background:transparent;
}

#hd
{
	display:none;
}

/*ADD EXP HRIMG ++++++++++++++++++++++++++++++++++++*/
/*666*/
@media only screen and (max-width: 816px){
	
	#leftBox{
		position: fixed;
		z-index: 8;
		left: 0;
		bottom: 0;
		padding: 0;
		width: 100%;
		height: 86px !important;
		background: rgba(255,255,255,0.4);
		-webkit-transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1);
		-ms-transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1);
		transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1) ;
	}
	
/* 	#leftBox.view{
		bottom: 0;
	}
 */	
	#leftBox .scroll-wrapper{
		height: 74px !important;
	}	
	
	#leftBox h1{
		display: none;
		width: 100%;
		font-size: 0.8rem;
		line-height: 1rem;
		font-family: 'Raleway';
		font-weight: normal;
	}

	
	#myboxFlc{
		position: relative;
		z-index: 9;
		margin: 0 auto;
		width: calc(100% - 16px);
		height: auto;
		height:68px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
	}

	#leftBox .scroll-wrapper #myboxFlc{
		padding-bottom: 10px;
	}
	
	#mybox{
		position: absolute;
		top: 0;
		display: flex !important;
		flex-flow: row nowrap;/*並びの方向*/
		justify-content: flex-start;/*並び方の配置規則*/
		height: auto;
		height:68px;
		width: auto;
		/* overflow: visible; */
	}

	#mybox li
	{
		display:block;
		position:relative;
		float:left;
		/* width: 48px !important; */
		height:64px;
		border:2px #fff solid;
		overflow:hidden;
	}
		
	#mybox li.menuOn{
		border: #fff solid 2px;/*  */
	}
		
	#mybox li.menuOn:before{
		/* content:'';
		position: absolute;
		z-index: 1111;
		top: -2px;left: -2px;
		display: block;
		height: 64px;
		border: #333 solid 2px; */
	}

	#mybox li:hover:before{
		content:'';
		position: absolute;
		z-index: 1111;
		top: -2px;left: -2px;
		display: block;
		height: 64px;
		border: transparent solid 2px;
	}
	
	#mybox li.menuOn:after
	{
		/*content:'';
		position: absolute;
		left: 50%;
		top: 0px;
		margin-left: -8px;
		border-top: #333 solid;
		border-right: transparent solid;
		border-bottom: transparent solid;
		border-left: transparent solid;
		border-width: 8px;*/
	}

	#mybox li:hover:after{/* 矢印 */
		content:'';
		position: absolute;
		left: 50%;
		top: 0px;
		margin-left: -8px;
		border-top: #333 solid;
		border-right: transparent solid;
		border-bottom: transparent solid;
		border-left: transparent solid;
		border-width: 8px;
	}

	#mybox li a{
		height: 64px !important;
		-webkit-background-size: cover !important;
		background-size: cover !important;
	}

	#mybox li p{
		display: none;
	}

	#leftBox .scroll-wrapper
	{
		width: 100%;
		overflow: hidden;
		overflow: auto;
	}
		
		
	#myboxMenu
	{
		position:absolute;
		padding:4px;
		bottom: 84px;
		left:-2px;
		left: 0;
		z-index:10;
		display: table;
		width:100%;
		height: 48px;
		color:#d9d9d9;
		background:rgba(0,0,0,0.8);
		font-size:10px;
		line-height:14px; 
		border: unset;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		
	}
		
	#myboxMenu span{
		display: table-cell;
		padding-right: 4px;
		vertical-align: middle;
		text-align: center;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
		
	#myboxMenu span em{
		display: table-cell;
		padding: 2px 4px;
		height: 28px;
		vertical-align: middle;
		border: 1px solid #686859;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}
		
	#myboxMenu span.exp{
		width: 90px;
	}
		
	#myboxMenu span.exp em{
		width: 80px;
	}
	
	#myboxMenu span.del
	{
	width: 42px;
	}
	
	#myboxMenu span.del em
	{
		width: 32px;
		text-align: center;
	}
	
	#myboxMenu span.info{
		width: 38px;
	}
	
	#myboxMenu span.info em{
		width: 32px;
	}
	#myboxMenu span.cntInfo{
		width: calc( 100% - 200px );
		word-break: break-all;
		text-align: left;
	}
	
	#gallery{
		padding-bottom: 84px;
	}
}