/*
DoNOT use with article-detail.css
as there are same class name.
SEE  transplant from article-detail.css
*/


/*overwrite style.css*/
.ippro_concept p{
/*padding:0 3em;
font-size: 1.4rem ;*/
text-align:center;/*ADDED*/
}

/*--- ipProduce project - Premium Six2020 ---*/
.keybox{/*outer container of .key_imgbox, .key_imgbox img */
margin:0 auto;
margin-bottom:2em;
width:80%;
max-width:1200px;
}
.key_imgbox{/* container for keyIMG*/
position:relative;
width:100%;
height:0;
padding-bottom:8.6%; /*aspect ratio height/width*100%= =8.6%=125/1450<--16.2%=235/1450(*100%)*/
z-index:-1;/*go behind priorityNav dropdown in smp*/
overflow:hidden;
}
.key_imgbox img{
position:absollute;
top:0;
left:0;
width:100%;
height:auto;
}
#presix_member{/*section  Member portrait Container*/
margin-bottom:6em;
}
.presix_member{/*ul Premium Six Member Portrait*/
list-style-type: none;
margin: 0.5rem 0; /* moto 0 */
text-align:center;
}
.presix_member li{
display: inline-block;
width:24%;
padding:0.5em 0.2em;
vertical-align:top;
}
.presix_member li img{
width:100%;
height:auto;
}
#presix_articles{/*section Article ICHIRAN Container*/
margin:0 auto;
width:90%;
max-width:1200px;
}
#presix_articles .caption{/* span explanationTXT*/
display: block;
font-family: -apple-system, BlinkMacSystemFont,'Helvetica Neue', Arial,'ƒqƒ‰ƒMƒmŠpƒS ProN W3','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;/*overwrite NotoSansCJKjp-ip*/
font-weight:normal;
font-size:0.6em;
line-height:1.6;
color:#666;
text-align:center;
margin:0;
/*border:1px solid pink;*/
}
.presix_articles{/*ul Article ICHIRAN*/
list-style-type: none;
margin: 0.5rem; /*moto 0*/
text-align:left;
}
.presix_articles li{
position:relative; /*constraint .bulklink */
display: inline-block;
width:32%;
padding:0.5em 0.2em;
vertical-align:top;/*ADDED*/
overflow:hidden;/*NAIHOU d-1of3GRID*/
}

/*-- transplant from article-detail.css --*/
h3.index-title{/*title in #side */
font-family:'NotoSansCJKjp-ip';/*from style.css*/
font-size:18px;/*<--23px*/
font-weight:bold;
text-align:center;
margin:0.2em 0 0.5em 0;/*CHANGED<--0.5em 0*/
padding:0.5em 0;
border-top:1px dotted #800000;/*maroon R128 G0 B0 */
border-bottom:1px dotted #800000;
}
.article-thumb{/* div  decide width with d-1of3GRID */
}
.thumbbox{/*square container for thumbnailIMG*/
position:relative; /*constraint image to crop */
width:100%;
height:0;
padding-bottom:100%;/*aspectRatio*/
overflow:hidden;/*cropIMG*/
}
.thumbbox img{/*thumbnailIMG*/
position:absolute;
top:50%; /*for IMG from posts*/
left:50%;
min-width:100%;
min-height:100%;
width:auto;
height:100%; /*as most likely images are hoeizontal */
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%)
}
.thumbbox img.itat{/*thumbnailIMG TAT*/
width:100%;/*<--auto overwrite */
height:auto; /*<--100% overwrite */
}
.article-title{/* div  decide width with d-1of3GRID*/
padding:0.3em 0;
font-size: 1.2em;
line-height:1.5;
}
.article-title .serial{/* eg. Dai IKKAI SAKURA*/
display: block;
font-size: 1.1em;
font-weight: bold;
}
a span.bulklink{/* make a bulkLink eg. Home productLineUp*/
position:absolute; /*constraint to parent */
width:100%;
height:100%;/*to make sure it covers parent?*/
top:0;
left: 0;
z-index: 1;
}
a:hover span.bulklink{/* for bulkLink*/
background-color:#c0c0c0;/*silver #c0c0c0  192/192/192*/
opacity:0.3;
}


/*---- span linebreakCONTROL .slbc ----*/
span.slbc{
display: inline-block;
white-space: nowrap;
}



@media (max-width: 767px) {
	.keybox{/*outer container of .key_imgbox, .key_imgbox img */
		width:100%;/*<--pc80%*/
	}
	.presix_articles li{
		width:49%;/*<--32%@initial*/
	}
}

@media (max-width: 481px) {
	.key_imgbox{/*keyIMG container*/
		width:100%;/*<--pc80%*/
		padding-bottom: 24.3%; /*<--pc13% aspect ratio height/width*100%= 352.5/1450(*100%)*/
	}
	.key_imgbox img{/*keyIMG*/
  		position:absolute;
		  max-width:350%;/*width/height*100= between4/3 & 3/2  140%--16.2%=235/1450*/
		  min-width:100%;
		  width:auto;
		  min-height:100%;
		  max-height:100%;/*140%--16.2%=235/1450*/
		  height:auto;
		  top:0;/*-40%--16.2%=235/1450*/
		  right:-125%;/*-40%--16.2%=235/1450*/
		  bottom:0;/*-40%--16.2%=235/1450*/
		  left:-125%;/*-40%--16.2%=235/1450*/
		  margin:auto;
	}
	.presix_member li{
		width:49%;
		padding:0.5em 0.2em;
	}
	.presix_articles li{
		width:100%;/*<--49%@767<--32%@initial*/
	}

}