@charset "utf-8";

/* ============================================================== reset */
html, body                 {width:100%;margin:0 auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body                       {-webkit-text-size-adjust:100%;}
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td, p,
fieldset, form, label, legend, input,
article, aside, canvas, figure, figcaption,
footer, header, nav, section,
b, u, i                    {margin:0;padding:0;list-style:none;font-style:normal;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
main                       {display: block;}
a                          {outline:none;}
img                        {border:0 none;vertical-align:top;max-width:100%;height:auto;}
em                         {font-style:normal;font-weight:bold;}
nav ul, nav li             {list-style:none;}
.h a, .f a,
nav a, nav span            {text-decoration:none;}
table                      {border-collapse:collapse;}
p, li                      {line-height: 1.8;}

/* ============================================================== common */
:root {
  /* Core */
  --color-black: #001133;
  --color-surface-01: #192533;
  --color-surface-02: #0f1c2d;

  /* Whites */
  --color-white: #ffffff;
  --color-white-soft: #f5f8ff;

  /* Brand */
  --color-primary: #1955f0;
  --color-primary-hover: #3a6cff;

  /* Accent */
  --color-accent: #ff7a1a;
  --color-accent-soft: #ffb066;
  --color-accent-ylw: #f1cb61;

  /* Overlay */
  --color-overlay: rgba(0, 12, 28, 0.92);

  /* font */
  --font-momochi: "momochidori", sans-serif;
  --font-en: "agency-fb", sans-serif;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
	font-size: clamp(16px, 3vw, 24px);
	background-color: var(--color-black);
	color: var(--color-white-soft);
	display: grid;
	grid-template-rows: 1fr auto;
}
footer {
	padding: 2em 0 7em;
	border-top: 0 none;
}
footer p {
	font-size: 100%;
	font-weight: 300;
	letter-spacing: 0.08em;
	text-align: center;
}
.sct {
	position: relative;
	display: block;
	padding: 2em 1em;
	border-top: 1px solid color-mix(in srgb, var(--color-black) 80%, var(--color-white-soft));
}
.inr {
	position: relative;
	z-index: 5;
	margin: 0 auto;
	max-width: 1200px;
}
.ttl {
	font-family: var(--font-en);
	font-size: 150%;
	font-weight: 500;
	margin-bottom: 1em;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-white-soft) 50%, transparent);
}
.lead {
	font-size: 160%;
	letter-spacing: 0.08em;
	margin-bottom: 1em;
}
.desc {
	color: color-mix(in srgb, var(--color-white-soft) 75%, transparent);
}
.desc em {
	font-weight: normal;
	color: var(--color-white);
}
@media (min-width: 1000px){
	.desc {
		font-size: 87.5%;
	}
}
.sct p a {
	color: var(--color-white);
}
/* ============================================================== header, footer, lower */
.h {
	padding: 1em;
	background-color: var(--color-surface-02);
	border-bottom: 1px solid color-mix(in srgb, var(--color-black) 80%, var(--color-white-soft));
}
.h .logo {
	position: relative;
	z-index: 3;
	max-width: 8em;
	opacity: 0.93;
}
.f {
	padding: 2em 1em;
	background-color: var(--color-surface-02);
	text-align: center;
}
.f p {
	font-size: 75%;
	opacity: 0.8;
}
.f .logo {
	margin: 0 auto 2em;
	max-width: 12em;
}
.f .logo a {
	transition: 0.3s;
	opacity: 0.75;
}
.f .logo a:hover {
	opacity: 1;
}
.f nav {
	margin: 0 auto 1em;
	width: fit-content;
	text-align: center;
	font-size: 75%;
	display: grid;
	align-items: center;
	gap: 0 2em;
	grid-auto-flow: column
}
.f nav a {
	display: inline-block;
	color: var(--color-white-soft);
	opacity: 0.75;
	line-height: 1;
	transition: 0.3s;
}
.f nav a:hover {
	opacity: 1;
}
.f nav a i {
	display: block;
	aspect-ratio: 1 / 1;
	width: 2em;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% auto;
}
.f nav .tw i {
	background-image: url("../assets/ico_x_w.svg");
}

/* ============================================================== kv */
.kv {
	padding: 0;
	border-top: 0 none;
}
.kv::before {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: 50% 70%;
	background-size: cover;
	background-image: url("../assets/kv_bg.jpg");
	animation: bgBreath 16s ease-in-out infinite;
}
.kv .map {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	background-image: url("../assets/kv_map.png");
	mix-blend-mode: color-burn;
	animation: mapBreath 16s ease-in-out infinite;
}
@keyframes bgBreath {
	0%, 100%{
	  opacity: 1;
	}
	50%{
	  opacity: 0.1;
	}
}
@keyframes mapBreath {
	0%, 100%{
	  opacity: 0;
	}
	50%{
	  opacity: 0.5;
	}
}
.kv::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--color-overlay);
	background: linear-gradient(to right bottom, var(--color-overlay) 0, var(--color-primary) 100%);
	opacity: 0.75;
}
.kv .inr {
	display: grid;
	grid-template-rows: 4em auto 1fr;
	min-height: 100svh;
	max-width: unset;
	padding: 1em;
}
.kv .logo {
	font-size: 100%;
	position: relative;
	z-index: 3;
	max-width: 10em;
	opacity: 0.93;
}
.kv .catch {
	position: relative;
	z-index: 3;
	color: var(--color-white);
	font-family: var(--font-momochi);
	font-size: 220%;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-shadow: 0 0 0.4em rgba(255,255,255,0.1);
	opacity: 0.9;
}
.kv .catch span {
	display: block;
}
.kv .catch i {
	letter-spacing: -0.06em;
	margin-right: 0.1em;
}
.kv .meta {
	opacity: 0.75;
	font-size: 100%;
	text-align: right;
	align-self: end;
}
.kv .meta li {
	line-height: 1.5;
	text-transform: uppercase;
	font-family: var(--font-en);
	font-size: 150%;
}
@media (min-width: 1000px){
	.kv .inr {
		padding: 2em;
	}
}
.kv .monitor {
	position: absolute;
	z-index: 6;
	width: 7.68em;
	height: 11.34em;
	left: calc((100% - 7.68em) / 2);
	top: calc(((100% - 11.34em) / 2) + 2em);
	background-color: var(--color-white);
}

/* ============================================================== exhibitions */
.exhibitions_layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
}
@media (min-width: 1000px){
	.exhibitions_layout{
		grid-template-columns: 1fr 1fr;
	}
	.exhibitions_col-current {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
	.exhibitions_col-upcoming {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	.exhibitions_col-past {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}
	.exhibitions_col-ftr {
		grid-column: 1 / 3;
	}
}
.exhibitions .subhead {
	margin: 0 0 0.5em;
	font-family: var(--font-en);
	font-size: 100%;
	font-weight: 300;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.85;
}
/* Cards */
.exhibitions .card {
	display: grid;
	text-decoration: none;
	color: var(--color-white-soft);
	grid-template-columns: 36% 1fr;
	gap: 1em;
	padding: 1em;
	border-radius: 0.7em;
	background: var(--color-surface-01);
	border: 1px solid color-mix(in srgb, var(--color-white-soft) 30%, var(--color-black));
	border: 1px solid var(--color-accent-ylw);
	backdrop-filter: blur(0.3em);
	transition: 0.3s;
}
.exhibitions .card:hover {
	border: 1px solid var(--color-accent);
	box-shadow: 0 0 0.5em color-mix(in srgb, var(--color-white-soft) 30%, var(--color-primary));
}
.exhibitions .card_fig {
	overflow: hidden;
	border-radius: 0.7em;
}
.exhibitions .card_txt {
	display: grid;
	grid-template-rows: auto auto auto 1fr;
}
.exhibitions .card_kicker {
	font-size: 80%;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-accent-ylw);
	transition: 0.3s;
}
.exhibitions .card:hover .card_kicker {
	color: var(--color-accent);
}

.exhibitions .card_title {
	font-size: 150%;
	letter-spacing: 0.02em;
	font-weight: 600;
	color: var(--color-white);
}
.exhibitions .card_meta {
	font-size: 80%;
	letter-spacing: 0.08em;
	opacity: 0.8;
}
.exhibitions .card_link {
	align-self: end;
	text-align: right;
	font-size: 80%;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--color-white);
	transition: 0.3s;
}
.exhibitions .card:hover .card_link {
	color: var(--color-accent);
}
.exhibitions .card_link span {
	display: inline-block;
}

/* UPCOMING list */
.exhibitions_col-upcoming {
	display: grid;
	grid-template-rows: auto 1fr;
}
.exhibitions .list {
	list-style: none;
	border-radius: 0.7em;
	background: var(--color-surface-02);
	border: 1px solid color-mix(in srgb, var(--color-white-soft) 20%, var(--color-black));
	overflow: hidden;
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
}
.exhibitions .list_item {
	display: grid;
	grid-template-columns: auto 1fr;
	width: 100%;
	align-items: center;
	gap: 1em;
	padding: 1em;
	border-top: 1px solid color-mix(in srgb, var(--color-white-soft) 15%, var(--color-black));
	font-size: 100%;
	letter-spacing: 0.04em;
}
@media (min-width: 1000px){
	.exhibitions .list_item {
		padding: 0 1em;
	}
}
.exhibitions .list_item:first-child {
	border-top: none;
}
.exhibitions .list_item .name {
	opacity: 0.8;
}
.exhibitions .list_item .date {
	opacity: 0.6;
	font-size: 80%;
	text-align: right;
	white-space: nowrap;
}
/* past */
.exhibitions .tile {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1em 0.5em;
}
@media (min-width: 750px){
	.exhibitions .tile {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}
@media (min-width: 1000px){
	.exhibitions .tile {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}
.exhibitions .tile_item {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 16px;
	overflow: hidden;
	background: var(--color-surface-02);
	border: 1px solid color-mix(in srgb, var(--color-white-soft) 20%, var(--color-black));
	white-space: nowrap;
	overflow: hidden;
	opacity: 0.7;
	transition: 0.3s;
}
.exhibitions .tile_item:hover {
	opacity: 1;
}
.exhibitions .tile_fig {
	filter: grayscale(25%);
	transition: 0.3s;
	padding: 0.5em;
}
.exhibitions .tile_item:hover .tile_fig {
	filter: grayscale(0);
}
.exhibitions .tile_fig span {
	display: block;
	overflow: hidden;
	border-radius: 0.5em;
}
.exhibitions .tile_info {
	padding: 0 0.5em 0.5em;
	letter-spacing: 0.04em;
	font-size: 80%;
	display: grid;
	grid-template-columns: 1fr;
}
.exhibitions .tile_date {
	opacity: 0.6;
}
.exhibitions_col-ftr {
	font-size: 82.5%;
}
/* ============================================================== concept */
.concept {
	background-color: var(--color-surface-02);
}

/* ============================================================== policy */
.policy article + article {
	margin-top: 3em;
}
.policy h3 {
	margin-bottom: 0.8em;
}
.policy p:not(.lead) {
	margin-bottom: 1em;
	color: color-mix(in srgb, var(--color-white-soft) 75%, var(--color-black));
}
.policy p.date {
	margin-top: 3em;
	padding-top: 0.5em;
	text-align: right;
	border-top: 1px solid color-mix(in srgb, var(--color-white-soft) 20%, transparent);
}