/* 
*
*	processart.jp
*	page-products-single.css for page-products.php specific styles. 
*
*/

/* product papge padding left is only longer than the others. */
main { position:relative; padding-left:6rem; padding-right:6rem; }

/* -------------------------------- */
/* contetns */
/* -------------------------------- */
#contents { position:relative; }
#contents > h2 { position:absolute; left:0; font-size:var(--huge); font-weight:normal;  }
#contents > h3 { width:100%; font-size:var(--more); line-height:1.5em; padding-left:calc(var(--left-margin) - 3rem); padding-bottom:6rem; font-weight:normal; }
#contents > .pagenation { position:absolute; top:0; right:0; font-size:var(--small); }
#contents > .pagenation a{ opacity:0.75; transition:opacity 0.3s ease;}
#contents > .pagenation a:hover { opacity:1.0; }
#contents > .pagenation a:nth-of-type(2) { margin-left: 2rem; }
#contents > .pagenation a[href="#"] { opacity:0.2; pointer-events: none; }

/* The layout of main image ( is changed according to the aspect of image. Supported it by MUAspectSelector */
#contents > figure { width:100%; margin-bottom: 6rem; padding-left:calc(var(--left-margin) - 3rem); }
#contents > figure > img { width:100%; aspect-ratio: 726/482; object-fit:cover; }
#contents article { width:100%; padding-left:calc(var(--left-margin) - 3rem); margin-bottom:6rem; }
#contents article > p { margin-bottom: 6rem; line-height:1.75em; }
#contents article > figure { margin-bottom: 6rem; line-height:1.75em; }
#contents article > figure figcaption { font-size:var(--mini); line-height:1rem;  }


@media screen and (max-width:850px)  
{
	main { width:100%; min-width:inherit; padding:0rem 1rem; }
	main h2 { width:100%; font-size:var(--large); }
	#contents h2 { position:relative; padding-bottom:4rem; }
	#contents h3 { padding-left:0px; }
	#contents > figure { width:100%; margin-bottom: 6rem; padding-left:0px; }
	#contents article { padding-left:0px; padding-bottom:6rem; }
}