/* 
*
*	processart.jp
*	index.css for index.php specific styles. 
*
*/

/* new page width is only shorter than the other page */
main { width:60%; min-width:max(50%, 750px); padding-bottom: 200px; }

/* Transition View (Slide Show) */
/* aspect-ratio is not supported in old safari, so we change the height by calc and min. */
/* 0.6671875=(1.0/2560/1708) for calc multiplying the aspect ratio. */
#slideshow { display:block; position:relative; width:100%; height:min(calc(100vw * 0.6671875), calc(100vh - 150px - 30px)); margin-bottom:20rem; z-index:0; }
#slideshow > ul { display:block; position:relative; width:100%; height:100%; margin-bottom:1rem; }
#slideshow > ul li { width:100%; height:min(calc(100vw * 0.6671875), calc(100vh - 150px - 30px));  }
#slideshow > ul li figure {  display:block; width:100%; height:min(calc(100vw * 0.6671875), calc(100vh - 150px - 30px)); }
#slideshow > ul li img { display:inline-block; width:100%; height:100%; object-fit:cover; object-position:center; margin-bottom:1.5rem; }
#slideshow > ul li figcaption {  display:inline-block; width:350px; padding-left:6rem; font-size:var(--mini); line-height:1.5em; white-space:pre; text-wrap: wrap; vertical-align:top; }

/* slideshow caption indicator */
#indicator { position:relative; text-align:right; height:10%; padding-right:6rem; vertical-align:top; }
#indicator li { display:inline-block; padding:0px 4px; opacity:0.3; font-size:0.5rem; cursor:pointer; transition:opacity 0.2s; }
#indicator li:hover { opacity:1.0; }
#indicator li[data-mu-transitionview-selected=true] { opacity:1.0; }
#indicator li[data-mu-transitionview-selected=false] { opacity:0.3; }

/* ------------------------- */
/* Contents */
/* ------------------------- */
#contents { border-top:1px solid #aaa; }
#contents [data-mu-accordion] {
	padding-top: 1rem;
	border-bottom: 1px solid gray;
}
#contents a { color:#0323bc; }
#contents [data-mu-accordion] > header { padding:0px; min-width:inherit; height:auto; min-height:100px; cursor:pointer; }
#contents [data-mu-accordion] > header > section:nth-of-type(1) { display:inline-block; vertical-align:top; width:240px; line-height:1.5rem; }
#contents [data-mu-accordion] > header > section:nth-of-type(1) .date { font-size:var(--more); font-weight:600; margin-bottom:0.1em; }
#contents [data-mu-accordion] > header > section:nth-of-type(1) .genre { font-size:var(--small); font-weight:400; font-optical-sizing:none;}
#contents [data-mu-accordion] > header > section:nth-of-type(2) { display:inline-block; vertical-align:top; width:calc(100% - 250px); padding-bottom:2rem; }
#contents [data-mu-accordion] > header [data-mu-accordion-button='both'] { width:100%; text-align: right; color:#0323bc; margin-top:2rem; }
#contents [data-mu-accordion] > article { display:inline-block; vertical-align:top; width:100%; height:auto; min-height: 100px; padding-left:250px; padding-bottom:4rem; }

#contents [data-mu-accordion] > article > h2 { font-size:var(--large); font-weight:600; padding-bottom:2rem; }
#contents [data-mu-accordion] > article > figure, article section:nth-of-type(2) > p { padding-bottom:2rem; }
#contents [data-mu-accordion] > article > figure img { max-width:100%; max-height:70vh; object-fit:contain !important; object-position:left; }
#contents [data-mu-accordion] > article > figure figcaption { font-size:var(--mini);}
#contents [data-mu-accordion] > article > p { line-height:1.75em; }

@media screen and (max-width:1025px) {
	#slideshow > ul li figcaption { padding-left:3rem; }
	#indicator { padding-right:3rem; }
}

@media screen and (max-width:850px)  {

	main { width:100%; min-width:inherit; padding:0rem 1rem; }
	main > h2 { width:100%; text-align:center; }

	#slideshow > ul li img { width:100%; }
	#slideshow > ul li figcaption { display:block; width:100%; padding-left:1rem; padding-bottom:1rem; }
	#indicator { padding-right:1rem; z-index:9999; }
	#indicator li { display:inline-block; padding:0px 2px; opacity:0.3; font-size:0.5rem; cursor:pointer; transition:opacity 0.2s; }

	#contents { width:100%; }
	#contents [data-mu-accordion] > header > section:nth-of-type(1) { display:block; width:100%; padding-bottom:0rem; }
	#contents [data-mu-accordion] > header > section:nth-of-type(2) { display:block; width:100%; }
	#contents [data-mu-accordion] > article { padding-left:0px; }
}