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

:root { --label-width:14em; }

/* product papge padding left is only longer than the others. */
main { padding-left:6rem; padding-right:3rem; }
#contents { position:relative; }
#contents h2 { position:absolute; left:0px; font-size:var(--huge); font-weight:normal; padding-bottom:4rem; }

article { width:100%; min-width:750px; padding-left:calc(var(--left-margin) - 3rem); padding-right:3rem; padding-bottom:6rem; }
article p { padding:0px; padding-bottom:2rem; line-height:1.75em; }
article label { display:inline-block; width:100%; border-top:1px solid #aaa; padding:4px 0px; }
article label span { display:inline-block; vertical-align:top; padding:4px 0px; }
article label span:nth-of-type(1) { width:var(--label-width); padding-right:2rem; }
article label span:nth-of-type(2) { width:calc(100% - var(--label-width)); }
article label input { width:100%; padding:4px; border:1px solid gray; }
article textarea { width:100%; min-height:150px; line-height:1.4em; padding:4px; border:1px solid gray; }
article div.buttons { width:100%; padding-left:var(--label-width); }
article div.buttons > p { padding:0px; }
article button, article input[type='submit'] { width:6rem; text-align:center; background-color:white; padding:2px 10px; margin-right:4rem; margin-bottom:2rem; border:1px solid #777; }
article button[type='submit'] { color:white; background-color:#777; }
article button, article input[type='submit'] { cursor:pointer; opacity:0.75; }
article button:hover, article input[type='submit']:hover { opacity:1; }

article label .wpcf7-not-valid-tip { display:inline-block; width:fit-content; font-size:var(--small); }
/* article .wpcf7-spinner { display: none !important; } */

#contents.mail-complete a { opacity:0.5; transition:opacity 0.4s ease; }
#contents.mail-complete a:hover { opacity:1; }

@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; left:0px; font-weight:normal; padding-bottom:4rem; }
	article { width:100%; min-width:inherit; padding:0px; padding-bottom:6rem; }
	article { font-size:var(--normal); }
	article label { padding-bottom: 10px; }
	article label span { vertical-align:inherit; padding-bottom:0px; }
	article label span:nth-of-type(1) { width:100%; }
	article label span:nth-of-type(2) { width:100%; }
	article div.buttons { width:100%; padding-left:0px; text-align:left; }
	article button { width:6rem; background-color:white; padding:4px 10px; border:1px solid #777;  margin-left:0px; }
	article input[type='submit'] { width:6rem; color:white; background-color:#777; padding:4px 10px; border:0px; }
}