/* 
*
*	processart.jp
*	common.css that is the common styles in all pages.
*
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..600&family=Noto+Sans+JP:wght@100..900&display=swap');

* {
	margin:0px;
	padding:0px;
	text-decoration:none;
	list-style:none;
	font-size:inherit;
	box-sizing:border-box;
}

/* slideshow default image aspect ratio */
:root {
	--left-margin:400px;
	--pc-slideshow-ratio:2560/1708;
	--mobile-slideshow-ratio:2560/1708;
	/* 16px */
	--normal:1rem;	
	/* 12px */
	--small:0.875rem;
	/* 10px */
	--mini:0.625rem;
	/* 20px */
	--more:1.25rem;
	/* 24px */
	--large:1.5rem;
	/* 34px */
	--huge:2.125rem;
}

html {
	font-family:'Inter', "Noto Sans JP", sans-serif;
	font-size:16px;
	font-weight:400;
	width:100%;
	height:100%;
}

body {
	width:100%;
	min-height:100vh;
	padding-top:30px;
}

button, input[type='submit'] { all:unset; }

/* common width */
header, main, footer { display:block; max-width:1400px; padding:0px 3rem; }

/* Wordpress columns gap */
.wp-block-columns { gap: 1rem }

/* ----------------------------------- */
/* common header part */
/* ----------------------------------- */
header { margin:auto; height:150px; min-width:1024px; z-index:1; }
header h1 { position:absolute; font-size:var(--huge); display:inline-block; width:350px; height:2rem; }
header h1 img { width:230px; opacity:0.7; }
header #main-menu { display:inline-block; padding-left:var(--left-margin); width:max-content; height:2rem; }
header #main-menu ul { display:flex; height:100%; flex-wrap:wrap; align-content:flex-end; align-items:flex-end; }
header #main-menu li { display:inline-block; padding-right:2rem; transition:opacity 0.2s; }
header #main-menu a { display:inline-block; opacity:0.5; vertical-align:bottom; transition:opacity 0.2s; }
header #main-menu a:hover,
header #main-menu .current-menu-item a,
header #main-menu .current-page-ancestor a { opacity:1.0; }

/* Main has max-width */
main { margin:auto; min-height:calc(50dvh - 3rem); }
footer { margin:auto; min-width:1000px; }

/* Common First Title */
main > h2 { font-size:var(--huge); font-weight:normal; text-align:center; padding-bottom:2em; }

small { display:inline-block; width:100%; height:1rem; padding-bottom:6rem; text-align:left; font-size:var(--mini); }

/* Default the color of anchor is inherit. */
a, a:visited, a:active { color:inherit; word-break:break-all; }

/* Wordpress Global Menu anchors are color interaction. */
.main-menu li { transition:opacity 0.2s; opacity:0.5; }
.main-menu li:hover { opacity:1.0; }
.main-menu [selected='true'] { opacity:1.0; }
.main-menu .current-menu-item li,
.main-menu .current-page-ancestor li { opacity:1.0; }

/* All title styles */
.grayhover { color:#000; opacity:0.5; transition:opacity 0.2s; }
.grayhover:hover { opacity:1.0; }

/* MUPageLoader default style. */
[data-mu-pageloader] { visibility:none; opacity:0; transition:opacity 0.3s; }
[data-mu-pageloader-state='load'] { visibility:inherit; opacity:1; transition:opacity 0.3s; }
[data-mu-pageloader-state='unload'] { visibility:inherit; opacity:1; transition:opacity 0.3s; }


/* Common Responsive */
.pc { display:inherit; }
.mobile { display:none; }

@media screen and (max-width:850px)
{
	:root {
		--left-margin:400px;
		--pc-slideshow-ratio:2560/1708;
		--mobile-slideshow-ratio:2560/1708;
		/* 16px */
		--normal:1rem;	
		/* 12px */
		--small:0.875rem;
		/* 10px */
		--mini:0.625rem;
		/* 20px */
		--more:1.1rem;
		/* 24px */
		--large:1.25rem;
		/* 34px */
		--huge:1.5rem;
	}

	html { font-size:var(--normal); }
	body { width:100%; min-width:inherit; max-width:inherit; padding:0; }
	header, main, footer { display:block; width:100%; padding:1rem; min-width:auto; }
	header { padding:1.5rem 1rem; }
	header h1 { position:relative; font-size:var(--huge); display:inline-block; width:100%; height:2rem; }
	header h1 img { width:180px; opacity:0.7; }
	header #main-menu { display:none; }
	h1 { font-size:var(--huge); }
	main h1 { margin-top:-0.2em; }
	small { width:100%; padding-left:0px; }
	.pc { display:none; }
	.mobile { display:inherit; }
}