/************************************************************
jxsn-instance.css 共通
*************************************************************/


/************************************************************
common settings
*************************************************************/


/************************************************************
shorthands
*************************************************************/


/************************************************************
bootstrap override
*************************************************************/

.thumbnail{
	border:0px solid #ffffff;
	padding:0;
	margin-bottom:0;
}

.content-header{
	padding-left:0; 
	padding-right:0;
}
@media screen and (max-width: 1200px){
	.content-header, .content-main, .common-content{ 
		padding-left:15px; 
		padding-right:15px;
	}
}



/************************************************************
bootstrap custom element
*************************************************************/


/************************************************************
contents settings
*************************************************************/

/*** main **************************************************************/
.main { background-color:#ffffff; padding:0; }
.instance-mv{ 
	margin:0 auto; 
	background-color:#ffffff;
//	background-image:url(/instance/img/instance-mv.jpg);
}

/*** instances list **************************************************************/

.row-eq-height {

display:-webkit-box; 
display:-webkit-flex;
display:-ms-flexbox; 
display: flex;

-ms-flex-wrap:wrap;  
-webkit-flex-wrap:wrap; 
flex-wrap: wrap;

margin-left:0;
margin-right:0;

}

.instancelist-container{
	margin-top:0;
	margin-left:auto;
	margin-right:auto;

	padding:30px;


}

.instancelist-card{
	margin-top:1%;
	margin-bottom:2rem;

	padding-left:0;
	padding-right:0;

/*
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
*/
/*	height:100%; なぜか絶対不要  */


}


.instancelist-card a,.instancelist-card a:hover,.instancelist-card a:active,.instancelist-card a:visited{
	text-decoration:none;
}
.instancelist-card a{
	color:#666666;
}
.instancelist-card a:hover,.instancelist-card a:active{
	color:#33ccff;
}


.instancelist-cardface{
	width:95%;
	height:100%; /* card均等高さ */
	background-color:#f1f1e7;
	padding:0;
	border:1px solid #ccc;
	box-shadow: 3px 3px 0 0 #ccc;

}

.instancelist-name{
	padding:1rem;
}




/*** details **************************************************************/

#instance-mv-stage{
	displya:block;
	background:url() center bottom no-repeat;
	background-size:contain;

	height: auto;

}

#instance-mv-stage:before{
  content: "";
  display: block;
  padding-top: 100%;
}

.instance-mv-inside{
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

.instance-nav{
	border:0px solid #00044c;
	border-width:0 0 2px 0;
	margin-bottom:2rem;
	padding:5px;
}

.instance-nav-ctg{
	background-color:#fff;
	border:0px solid #f0044c;
	margin:0; 
}

.instance-nav-ctg .lnk{
	background-color:; 
	font-size:2rem;
	color:#999;
}


.instance-nav-ctg .active{
	color:#000;
}




.instance-mv-thumb{
	display:block; 
	width:10vmin; 
	height:10vmin; 
	border:0px solid #999; 
	background:url() center center no-repeat;
	background-size:contain;

  /* 実績的に、ページ幅768px周辺でも安定して3件表示するので3件の場合は100px */
  /* aタグのみの場合。サムネ部もBootstrapならまた話は別。 */
	max-width:100px;
	max-height:100px;

	margin-top:1rem;

}
@media screen and (max-width: 800px){ 
	.instance-mv-thumb{ width:20vmin; height:20vmin; }
}

.instance-content{ 
	width:100%;
	background-color: #eee;
	margin-top:3rem;
}

.instance-description{
	margin: 0 auto;
	padding: 3rem 4% 2rem 4%;
}

/*
.ul-instance-partner{
	margin: 4rem 0 0 0;
	padding:0;
}
.ul-instance-partner li{
	list-style-type:none;
	padding-bottom:2rem;
}
*/

.instance-partner{
	margin: 0;
	padding:1rem 1rem 1rem 0;
}


.spn-partnertype{
	display:inline-block;
	width:17rem;
}
.spn-partnertype:after{
	display:inline;
	content:":　";
}

.instance-itemlist{
	margin: 0 auto;
	padding: 2rem 4% 10rem 4%;
}


.instance-item{
	border : 0 solid #778899;
	border-width:0px 0px 0px 3px;
	margin:0 -10px 4rem 0;
	padding:0;
/* 子要素にも display: flex; 書く */
  display: flex;
  flex-direction: column;

}

.instance-item-leftborder{
/* 孫要素にheight:100%; 書かない */
	border : 0 solid #778899;
	padding:0 0 0 5px;
}

.instance-itemthumb{
	width:30%; 
	border:1px solid #999;
	margin-bottom:5px;
}
.row-instance-pd-icos{ width:70%; max-width:160px;  }
.instance-pd-ico{
	padding:0rem 0.5rem 0.5rem 0rem;
	width:50px;
}

@media screen and (max-width: 800px){ 
	.instance-itemthumb{ width:40%; }
	.row-instance-pd-icos{ width:50%; min-width:160px; }
	.instance-itemthumb{ width:40%; }
}




.item-seriesname-en{ font-size:100%; }
.item-itemname-en{ font-size:120%; }
.item-itemname-ja{ font-size:100%; }



.extra-container{
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
	padding:30px;
}