@charset "utf-8";

/**
 * font
 * 
 */
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?37038366');
  src: url('../font/fontello.eot?37038366#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?37038366') format('woff2'),
       url('../font/fontello.woff?37038366') format('woff'),
       url('../font/fontello.ttf?37038366') format('truetype'),
       url('../font/fontello.svg?37038366#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}


/**
 * 
 * 
 */
:root {
	--header-padding: 48px;
	--header-height: 112px;
	
	
	--max-width: 1440px;
	--single-width: calc(1.006 * 37em);
	
	--nav-base-opacity: 0.4;
	--nav-hover-opacity: 0.8;
	/*--nav-base-color: #888;*/
	--nav-base-color: #000;
	--nav-hover-color: #444;
	
	--light: 300;
	--regular: 400;
	--medium: 500;
	--semibold: 600;
	--bold: 700;
	--extrabold: 800;
	--black: 900;
}


/**
 * Global
 * 
 */
* {
	margin: 0;
	padding: 0;
}
html, body {
}
body {
	color: #000;
	font-size: 15px;
	line-height: 1.67;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: var(--medium);
	font-feature-settings: 'palt';
	letter-spacing: 0.06em;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	animation: loading 2s;
}
@keyframes loading {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
a:link, 
a:visited {
	color: #000;
	text-decoration: none;
	outline: none;
}
a[href]:hover {
}
a, a img, a::after, a span, a h1, a strong, a svg {
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease, text-decoration .2s ease;
}


/**
 * #overlay
 * 
 */
#overlay {
	position: fixed;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.1);
	transition: all 0.4s ease-in-out;
	visibility: hidden;
	opacity: 0;
}
#overlay.opened {
/*	visibility: visible;
	opacity: 1;*/
}


/**
 * 
 * 
 */
.container {
	margin: 0 auto;
	padding: 0 48px;
	max-width: var(--max-width);
}


/**
 * header.global
 * 
 */
header.global {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	padding: 48px 48px;
}
header.global #logo {
	body:has(#home) & {
		display: none;
	}
	a {
		img,
		svg {
			display: block;
			width: auto;
			height: 16px;
			opacity: var(--nav-base-opacity);
		}
		&:hover img {
			opacity: var(--nav-hover-opacity);
		}
		&:hover svg {
		}
	}
		
	
}
header.global nav {
	position: fixed;
	top: 32px;
	right: 48px;
	z-index: 100;
}
header.global nav #nav-trigger {
	position: relative;
	width: 48px;
	height: 48px;
	z-index: 10;
	
	a {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 12px;
		width: 100%;
		height: 100%;
		cursor: pointer;
		
		svg {
			display: block;
			width: 100%;
			height: 2px;
			transition: all 200ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
			stroke: var(--nav-base-color);
			opacity: var(--nav-base-opacity);
			transform-origin: 50% 50%;
		}
		&:hover svg {
			opacity: var(--nav-hover-opacity);
		}
	}
}

header.global nav #nav-container {
	position: fixed;
	top: 0;
	right: 0;
	box-sizing: border-box;
	padding: 112px 0;
	width: 100%;
	height: 100vh;
	overflow-y: scroll;
	background-color: rgba(255,255,255,0.95);
	line-height: 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity .4s ease;
	
	ul li {
		display: block;
	}
	ul li a {
		border-bottom: 1px solid transparent;
		&[aria-current="page"],
		&:hover {
			border-bottom-color: #000;
		}
	}
	ul li a[aria-current="page"] {
		
	}
	.container {
		max-width: 1024px;
		> ul:not(.nav-artists) li + li {
			margin-top: 32px;
		}
	}
	.nav-artists {
		margin: calc(32px - 0.5em) 0;
		columns: 5;
		li {
			line-height: 2;
		}
	}
	
	#exhibition-details {
		margin-top: 64px;
		padding-top: 64px;
		padding-bottom: 64px;
		border-top: 1px solid #ccc;
		font-size: 14px;
		
		#exhibition-data {
			dt {
				font-size: 22px;
			}
			dd:first-of-type {
				margin: 16px 0;
				font-size: 16px;
			}
			dd:last-of-type {
				margin-top: 8px;
			}
		}
		> dl:not(#exhibition-data) {
			margin-top: 32px;
			line-height: 1.56;
		}
		#organize {
			dl + dl {
				margin-top: 14px;
			}
			dl dd {
				font-size: 13px;
				font-weight: var(--regular);
			}
		}
		& :is(#universities, #collaborate) {
			width: 34em;
			ul {
				display: flex;
				flex-wrap: wrap;
			}
			ul li:not(:last-of-type)::after {
				content: '、'
			}
		}
		#links {
			margin-top: 56px;
			> div {
				display: flex;
				gap: 48px;
				.text {
					flex-basis: 34em;
					line-height: 1.78;
					text-align: justify;
				}
				figure {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 10em;
					font-size: 12px;
					img {
						width: 72px;
						height: auto;
					}
					figcaption {
						font-weight: var(--regular);
					}
				}
			}
			> div + div {
				margin-top: 24px;
			}
		}
	}
}

.opened ~ header.global nav {
	#nav-trigger {
		a #upper svg {
			transform: translateY(6.5px) rotate(-45deg);
		}
		a #lower svg {
			transform: translateY(-6.5px) rotate(45deg);
		}
	}
	#nav-container {
		visibility: visible;
		opacity: 1;
	}
}



/**
 * #flip-nav
 * 
 */
#flip-nav {
	li {
		display: block;
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		
		&.prev {
			left: 12px;
			svg {
				transform: scale(-1, 1);
			}
		}
		&.next {
			right: 12px;
		}
		a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 24px;
			height: 24px;
			svg {
				width: 14px;
				stroke: var(--nav-base-color);
				opacity: var(--nav-base-opacity);
			}
			&:hover svg {
				opacity: var(--nav-hover-opacity);
			}
		}
	}
}


/**
 * main
 * 
 */
main {
}
main#home {
	#cover {
		position: relative;
		width: 100%;
		height: 100vh;
		
		img {
			display: block;
			object-fit: cover;
			object-position: top center;
			width: 100%;
			height: 100%;
		}
		dl {
			position: absolute;
			bottom: 48px;
			left: 48px;
			line-height: 1;
			font-size: 12px;
			dt {
				font-size: 13px;
				font-weight: var(--semibold);
			}
			dd:first-of-type {
				margin-top: 12px;
			}
			dd:last-of-type {
				margin-top: 8px;
			}
		}
	}
}

main:not(#home) {
	padding-top: 112px;
}
main:is(#greetings, #about) article {
	width: calc(var(--single-width));
}
main.single-container article {
	padding-bottom: 112px;
	
	h1 {
		margin-bottom: 80px;
		font-size: 20px;
		font-weight: var(--bold);
		text-align: center;
	}
	.article-body {
		p {
			margin: -0.59em 0;
			line-height: 2.18;
			text-align: justify;
		}
		p + p {
			margin-top: 2.18em;
		}
		.has-text-align-right {
			margin-top: 40px;
			text-align: right;
		}
	}
}


/**
 * main.artist-container
 * 
 */
main.artist-container article {
	display: flex;
	padding-bottom: 112px;
	
	:is(#artist-text, figure) {
		flex-basis: 50%;
		flex-shrink: 0;
	}
	#artist-text {
		padding-top: 56px;
		line-height: 1;
		
		.book {
			dt {
				margin-bottom: 32px;
				font-size: 20px
			}
			dd {
				font-size: 13px;
			}
			dd + dd {
				margin-top: 8px;
			}
		}
		.name {
			margin-top: 296px;
			line-height: 1;
			h1 {
				font-size: 20px;
				font-weight: var(--bold);
			}
			.name-en {
				margin-top: 8px;
				font-size: 13px;
			}
		}
		.work {
			margin-top: 80px;
			dt {
				margin-bottom: 80px;
				font-size: 20px;
			}
			dd {
				width: calc(1.06em * 38);
				line-height: 1.78;
				font-size: 13px;
				text-align: justify;
				&.en {
					margin-top: 1.78em;
					letter-spacing: 0.04em;
				}
			}
		}
	}
	figure {
		img {
			width: 100%;
			height: auto;
		}
	}
}


/**
 * main#exhibition-scenery
 * 
 */
main#exhibition-scenery article {
	img {
		width: 100%;
		height: auto;
	}
	img + img {
		margin-top: 24px;
	}
}


/**
 * main#artists
 * 
 */
main#artists article {
	.article-body {
		margin: -0.89em auto;
		width: fit-content;
	}
	dl {
		display: grid;
		grid-template-columns: calc(1.065em * 10) calc(1.065em * 8) calc(1.065em * 27) auto;
		gap: 32px;
		line-height: 2.78;
		font-size: 15px;
		
		dt {
			font-weight: var(--bold);
		}
		a {
			position: relative;
			border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
			transition: border-bottom-color .2s ease;
			&:hover {
				border-bottom-color: transparent;
				&::after {
					opacity: 0.8;
				}
			}
			&::after {
				content: '';
				position: absolute;
				bottom: -1px;
				left: 0;
				width: 100%;
				transition: opacity .5s ease;
				border-bottom: 1px solid rgba(0, 0, 0, 0.8);
				opacity: 0;
			}
		}
	}
}