@charset "utf-8";

/* -----------------------------------------------

	Type: top styles

----------------------------------------------- */

/* ------------ font-size(トップ) ------------ */
:root {
	--fz48-top: 4.8rem; /* 大見出し(英語)--h2 */
	--fz24-top: 2.4rem; /* 中見出し（日本語）--h2 */
}
@media screen and (max-width:840px) {
    :root {
      --fz48-top: 3.6rem; /* 大見出し(英語)--h2 */
      --fz24-top: 2rem;   /* 中見出し（日本語）--h2 */
	}
}

@media screen and (max-width:480px) {
    :root {
		--fz24-top: 1.8rem; /* 中見出し（日本語）--h2 */
	}
}


/* メインビジュアル
----------------------------------------------- */
.mainvisual img {
	width: 100%;
	cursor: pointer;
}
.mainvisual a{display:block;}

/* 重要なお知らせ
----------------------------------------------- */
.top_importantnews {
	background: var(--color-bg-lightgray);
	padding-top: var(--space20_14);
	padding-bottom: var(--space20_14);
}

.top_importantnews > div {
	display: flex;
}

.top_importantnews h2, .top_importantnews ul li {
	font-size: var(--fz15);
}
.top_importantnews h2 {
	font-family: var(--oswald);
	font-weight: var(--fw500);
	min-width: 116px;
	line-height: 1.6;
}

.top_importantnews dl {
	display: flex;
}
.top_importantnews dt {
	margin-left: var(--space60);
	padding-right: var(--space40);
}


/* 共通
----------------------------------------------- */
/* 見出し */
h2.top_title {
	font-size: var(--fz48-top);
	font-family: var(--oswald);
	margin-bottom: var(--space40);
}
h3.top_subtitle {
	font-size: var(--fz24-top);
	font-weight: var(--fw500);
	margin-bottom: var(--space40);
	position:relative;
	padding-left: 40px;
}
h3.top_subtitle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	display: block;
	border-left: 30px solid var(--color-text);
	height: 1px;
}
.top_about h3.top_subtitle::before {
	border-left: 30px solid var(--color-white);
}


/* ------------ ボタン ------------ */
/* 大きいボタン（EXHIBITION用）*/
.btn-big {
	position: relative;
	display: inline-block;
	text-align: left;
	width: 100%;
	max-width: 300px;
}
/* 右の矢印 */
.btn-big::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	background: url(../../images/btn_arrow.svg) no-repeat;
	width: 33px;
	height: 11px;

	opacity: 1;
	transition: opacity 0.2s;
	pointer-events: none;
}
/* 矢印も透過する（起動はjsで管理） */
.btn-big.hovered::after {
  opacity: 0.7;
}
.btn-big a {
    font-size: var(--fz20-tab20-sp16);
	display: block;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--color-text);
}


/* 下線あり */
.btn_wrap {
    display: flex;
    flex-wrap: wrap;
}

.btn_underline {
    display: block;
}

.btn_underline a {
	display: inline-block;
	position: relative;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--color-text);
	font-size: var(--fz13);
	padding-right: 50px; /* 矢印との間隔 */
}
.btn_underline a::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	width: 22px;
	height: 8px;

	opacity: 1;
	transition: opacity 0.2s;
	pointer-events: none;
}
.btn_underline a::after {background: url(../../images/btn_arrow.svg) no-repeat;}
.white.btn_underline a::after {background: url(../../images/btn_arrow_white.svg) no-repeat;}

.btn_underline.white a {
	border-bottom: 1px solid var(--color-white);
	color: var(--color-white);
	font-weight: var(--fw500);
}

/* 矢印も透過する（起動はjsで管理） */
.btn_underline.hovered::after {
  opacity: 0.7;
}



/* EXHIBITION,EVENT共通
----------------------------------------------- */
.open_or_future_exhibition {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: var(--space80_74);
}
.open_or_future_exhibition .item {
	width: calc(50% - 40px);
	max-width: 510px;
}
.open_or_future_exhibition .item:nth-child(n+3) { /* 3つめ以降 */
	margin-top: var(--space80-flex);
}
.open_or_future_exhibition .item:nth-child(2n) {
	margin-left: var(--space80-flex);
}
.open_or_future_exhibition .item .img{aspect-ratio: 16 / 9;width:100%;max-width: 510px;
	box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);}
.open_or_future_exhibition .item img {
	width:100%;height:100%;object-fit:contain;
}

.mb15_10 { margin-bottom: var(--space15_10);}


/* 日付 */
.exhibition_or_event_date {
	font-size: var(--fz13);
	font-weight: var(--fw500);
	color: var(--color-gray-date);
	display: inline-block;
}

/* --- タグ --- */
.open_tag, .future_tag, .event_tag {
	font-size: var(--fz13);
	font-weight: var(--fw500);
	padding: 2px var(--space20);
	display: inline-block;
}
.open_tag {
	color: var(--color-white);
	background: var(--color-text);
}
.future_tag {
	border: 1px solid var(--color-text);
}

/* タグ（EXHIBITION） */
.open_or_future_exhibition .open_tag, .open_or_future_exhibition .future_tag {
	margin-right: var(--space20);
}

/* タグ（EVENT） */
.event_tag {
	background: var(--color-gray-tag);
}
/* タグ余白 */
.tag_gap {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space10);
}

/* 題名 */
.exhibition_or_event_title {
	font-weight: var(--fw500);
}


/* EVENT　スライド
----------------------------------------------- */
.swiper-parent {
	max-width: 1160px;
	position: relative;
}

/* 画像の影の幅確保ため */
/* スライド全体を隠す（4枚目が見えないように） */
.swiper-parent .swiper {
  overflow: hidden;
  position: relative; /* 矢印の基準 */
}
.swiper-parent .swiper-slide {
  padding: 7px; /* 影分の余白 */
  overflow: visible;
}

/* swiper-wrapperの中央揃え解除（画像の高さに影響するので） */
.swiper-parent .swiper-wrapper {
  align-items: stretch !important;
}

/* スライド画像に影 */
.swiper-parent .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 2px 2px 7px rgba(0,0,0,0.3);
}

/* 画像を囲むwrapper */
.swiper-parent .img-wrapper {
  display: block;
  position: relative;
  width: 100%;aspect-ratio: 16 / 9;
}
.swiper-parent .img-wrapper img{
  width:100%;height:100%;object-fit:contain;
}
/* 前へ次への矢印カスタマイズ */
.swiper-parent .swiper-button-prev,
.swiper-parent .swiper-button-next {
  height: 60px!important;
  width: 60px!important;
  position: absolute;
  z-index: 10;
  top: 0; /* JSで動的に書き換えるための初期値 */
}
.swiper-button-prev {
	left: 0%!important;
}
.swiper-button-next {
	right: 0%!important;
}

/* 矢印画像の設定 */
.swiper-parent .swiper-button-prev::after,
.swiper-parent .swiper-button-next::after {
  content: ""!important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.swiper-parent .swiper-button-prev::after {
  background-image: url(../../images/top_event_prev.png);
}
.swiper-parent .swiper-button-next::after {
  background-image: url(../../images/top_event_next.png);
}


/* NEWS
----------------------------------------------- */
.bg_lightgray {
	background: var(--color-bg-lightgray);
}
.ptb80 {
	padding-top: var(--space80);
	padding-bottom: var(--space80);
}

.news_archivebtn_flex {
	display: flex;
	align-items: center;
}

/* 下線なしボタン */
.btn_no_underline {
	margin-left: 30px;
	margin-bottom: var(--space40_34);
	position: relative;
}
.btn_no_underline::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	background: url(../../images/btn_arrow.svg) no-repeat;
	width: 22px;
	height: 8px;

	opacity: 1;
	transition: opacity 0.2s;
	pointer-events: none;

}
/* 矢印も透過する（起動はjsで管理） */
.btn_no_underline.hovered::after {
  opacity: 0.7;
}

.btn_no_underline a {
    position: relative;
    text-decoration: none;
    display: inline-block;
	padding-right: 45px;
}

/* 記事 */
.news_item li {
	border-bottom: 1px solid var(--color-line);
}
.news_item li:first-child {
	border-top: 1px solid var(--color-line);
}
.news_item li a {
	display: inline-block;
	padding-top: var(--space20_14_sp);
    padding-bottom: var(--space20_14_sp);
}
.news_item li dl {
	display: flex;
}
.news_item li dt, .news_item li dd {
	display: inline-block;
}
.news_item li dt {
	min-width: 132px;
    margin-right: 30px;
	flex-shrink: 0;
	vertical-align: top;
}


/* PROJECT,ABOUT
----------------------------------------------- */
/* 横並び */
.bg_black {
	background: var(--color-black);
}
.top_about {
	color: var(--color-white);
}

.flex02, .flex02_noswitching {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start; /* 上揃え */
}

.flex02 .mr80 {
	flex: 1 1 0%;
	min-width: 0;
	margin-right: var(--space80-flex);
}
.flex02_noswitching .mr80 {
	margin-right: var(--space80-flex);
}

.flex02 h3, .flex02_noswitching h3 {
	margin-bottom: var(--space60_44)!important;
}

.flex02 .photo510, .flex02_noswitching .photo510 {
	flex: 0 0 47%; 
}

.flex02 .photo510 img, .flex02_noswitching .photo510 img {
	width: 100%;
	max-width: 510px;
	height: auto;
	display: block;
}

/* ボタンを囲むdiv　余白 */
.btn_wrap div {
	margin-top: var(--space40_34);
}
.btn_wrap div:first-child {
	margin-right: var(--space40);
}


/* ABOUT
----------------------------------------------- */
/* Google Map */
.googlemap {
    position:relative;
    width:100%;
    height:0;
    padding-top: 36.365%; /* 高さ400px　比率そのままレスポンシブ */
}
.googlemap iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    /* グレーにする */
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

@media screen and (max-width:1300px) {
	/* EVENT　スライド
	----------------------------------------------- */
	/* 位置は矢印本体だけ調整 */
	.swiper-button-prev {
		left: -3%!important;
	}
	.swiper-button-next {
		right: -30px!important;
	}
}


/* タブレット */
@media screen and (max-width:840px) {

	/* 重要なお知らせ
	----------------------------------------------- */
	.top_importantnews {
		padding-top: var(--space20);
	}
	.top_importantnews > div, .top_importantnews dl {
		display: block;
	}
	.top_importantnews h2 {
		margin-bottom: var(--space15);
		min-width: auto;
	}
	.top_importantnews li:not(:last-child) {
		margin-bottom: var(--space10);
	}
	.top_importantnews dt {
		margin-left: 0;
		padding-right: 0;
	}
	.top_importantnews dt, .top_importantnews dd {
		display: block;
	}


	/* EXHIBITION
	----------------------------------------------- */
	.open_or_future_exhibition .item {
		width: calc(50% - 30px);
	}


	/* EXHIBITION,EVENT共通
	----------------------------------------------- */
	/* 日付 */
	.exhibition_or_event_date {
		display: block;
		padding-top: 5px;
	}

	/* タグ */
	.open_tag, .future_tag, .event_tag {
		padding: 0 12px;
	}


	/* EVENT
	----------------------------------------------- */
	.mb15_10 { margin-bottom: 0;}


	/* EVENT　スライド
	----------------------------------------------- */
	/* 前へ次への矢印カスタマイズ */
	.swiper-button-prev,
	.swiper-button-next,
	.swiper-button-prev::after,
	.swiper-button-next::after {
		height: 50px!important;
		width: 50px!important;
	}


	/* NEWS
	----------------------------------------------- */
	/* 下線なしボタン */
	.btn_no_underline a {
		padding-right: 30px;
	}

	/* 記事 */
	.news_item li dl, .news_item li dt, .news_item li dd {
		display: block;
	}
	.news_item li dt {
		margin-right: 0;
	}


	/* PROJECT,ABOUT
	----------------------------------------------- */
	/* 画像とテキストの縦並び順序入れ替え */
	.flex02 {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}

	/* 横並び解除 */
	.flex02_noswitching {
		display: block;
	}

	.flex02 .mr80, .flex02_noswitching .mr80 {
		margin-right: 0;
	}

	.flex02 .photo510, .flex02_noswitching .photo510 {
		margin-bottom: 34px;
	}


	/* ABOUT
	----------------------------------------------- */
	.googlemap {
		padding-top: 50%;
	}

}


/* スマホ */
@media screen and (max-width:480px) {

	/* メインビジュアル
	----------------------------------------------- */
	.mainvisual img {
		aspect-ratio: 16 / 9;
	}

	/* ------------ ボタン ------------ */
	/* 大きいボタン（EXHIBITION用）*/
	.btn-big {
		width: 100%;
		max-width: 250px;
	}
	
	/* 大きいボタン（EXHIBITION用）と下線ありの矢印サイズ */
	.btn-big::after, .btn_underline::after {
		transform: scale(0.7) translateY(-50%);
	}

	/* 下線あり */
	.btn_wrap, .btn_wrap div {
		display: block;
	}
	.btn_underline a {
		padding-right: 34px;
	}


	/* 重要なお知らせ
	----------------------------------------------- */
	.top_importantnews {
		padding-top: 15px; /* before画像の半分の高さ */
	}
	

	/* EXHIBITION
	----------------------------------------------- */
	.open_or_future_exhibition {
		flex-wrap: wrap;
	}
	.open_or_future_exhibition .item {
		width: 100%;
	}
	.open_or_future_exhibition .item:nth-child(n+2) { /* 2つめ以降 */
		margin-top: var(--space80-flex);
	}
	.open_or_future_exhibition .item:nth-child(2n) {
		margin-left: 0;
	}

	.open_or_future_exhibition .open_tag, .open_or_future_exhibition .future_tag {
		margin-right: 0;
	}


	/* PROJECT,ABOUT
	----------------------------------------------- */
	.btn_wrap div:first-child {
		margin-right: 0;
	}


	/* EVENT　スライド
	----------------------------------------------- */
	.swiper-parent {
		max-width: 100%;
		overflow: visible; /* ←矢印を見切れさせないため */
	}

	.swiper-parent .swiper {
		overflow: hidden; /* スライドのはみ出しを隠す */
	}

	/* 前へ次への矢印カスタマイズ */
	.swiper-button-prev,
	.swiper-button-next,
	.swiper-button-prev::after,
	.swiper-button-next::after {
		height: 40px!important;
		width: 40px!important;
	}


	/* ABOUT
	----------------------------------------------- */
	.googlemap {
		padding-top: 90%;
	}
}