@charset "UTF-8";
/* CSS Document */

/* ==========================================================================
	開催中・開催予定
========================================================================== */
/*
	開催中・次回
---------------------------------------------------- */
.currentWrapper{
	padding-block: 50px;
}
.currentWrapper:has([class *= "clrBgTit"]) .ctsArea{
	display: flex;
	align-items: flex-start;
	gap: 0 40px;
}
/* 画像
============================== */
.currentWrapper .basePhBox{
	width: 220px;
}
/* タイトルエリア
============================== */
.currentTitArea{
	display: flex;
	flex-direction: column;
	width: 640px;
}
/* --- 開催中・次回タイトル --- */
[class *= "clrBgTit"]{
	order: 1;
	margin-bottom: 20px;
}
/* --- 展示期間 --- */
.currentWrapper .dayBaseTxt{
	order: 2;
	color: var(--clrLBlue);
	font-size: 2rem;
	font-weight: 300;
	margin-bottom: 25px;
}
/* --- 展示タイトル --- */
.currentWrapper .baseTit{
	order: 3;
	display: flex;
	flex-direction: column;
}
.currentWrapper .baseTit [class *= "tit"]{
	letter-spacing: 0.1em;
}
/* ショルダー */
.currentWrapper .baseTit .titShoulder{
	font-size: 2rem;
	line-height: 1.15em;
}
.currentWrapper .baseTit .titShoulder:has(+.titMain){
	margin-bottom: 10px;
}
/* メイン */
.currentWrapper .baseTit .titMain{
	font-size: 3rem;
	line-height: 1.1em;
}
.currentWrapper .baseTit .titMain:has(+.titSub){
	margin-bottom: 12px;
}
/* サブ */
.currentWrapper .baseTit .titSub{
	font-weight: 800;
	line-height: 1.3em;
}
/* --- 詳細・チケット購入ボタン --- */
.currentWrapper:has([class *= "clrBgTit"]) .btnArea{
	order: 4;
	margin-top: 50px;
}
@media print, screen and (min-width:813px){
	.currentWrapper .baseBtn{
		min-width: 170px;
	}
}
/* 開催中
============================== */
.currentWrapper.now{
	background-color: var(--clrLBlue);
}
.currentWrapper.now .baseTit,
.currentWrapper.now .dayBaseTxt,
.currentWrapper.now .currentNotTxt{
	color: #fff;
}
/* 展示なし
============================== */
.currentNotTxt{
	font-size: 2rem;
	font-weight: 500;
}
.currentNotTxt + .btnArea{
	margin-top: 30px;
}

/*
	開催予定
---------------------------------------------------- */
#upcomingWrapper{
	margin-top: 80px;
}
/* テーブル
============================== */
@media print, screen and (min-width:813px){
	#upcomingWrapper th:first-of-type{
		width: 250px;
	}
}
#upcomingWrapper th:not(:first-of-type){
	width: auto;
}
#upcomingWrapper tbody tr > *{
	line-height: 130%;
}
#upcomingWrapper tbody th{
	font-weight: 300;
	font-size: 1.8rem;
	font-family: var(--fEn);
	letter-spacing: 0.05em;
}
#upcomingWrapper tbody td{
	font-size: 1.6rem;
	word-break: break-all;
}
#upcomingWrapper tbody td a{
	overflow-wrap: anywhere;
	word-break: normal;
}
#upcomingWrapper .tblBase a:not(.noLink){
	text-decoration: underline;
}
@media (any-hover: hover){
	#upcomingWrapper .tblBase a:hover:not(.noLink){
		text-decoration: none;
		color: var(--clrLBlue);
	}
}

/*
	背景色付きメモエリア
---------------------------------------------------- */
/* ※ リスト
============================== */
#upcomingWrapper .memoBgBox .komeList li{
	color: var(--clrBase);
	font-size: 1.3rem;
	line-height: 150%;
}

/*
	1カラム時（2カラムになったら下記まるっと削除）
---------------------------------------------------- */
@media print, screen and (min-width:813px){
	#upcomingWrapper .memoBgBox{
		width: 100%;
	}
	#upcomingWrapper .komeList{
	    width: fit-content;
	    margin-inline: auto;
	}
}



/* ==========================================================================
	展示詳細
========================================================================== */
#ctsWrapper.detailsPage{
	padding-bottom: 0;
}

/*
	メインタイトルエリア
---------------------------------------------------- */
#dtlExhibMainWrapper{
	display: flex;
	align-items: flex-start;
	gap: 0 50px;
	padding-top: 20px;
}
/* 画像エリア
============================== */
.dtlExhibMainPhArea{
	width: 450px;
	position: relative;
}
/* --- 画像 --- */
@media print, screen and (min-width:813px){
	.dtlExhibMainPhArea:has(.baseBtnS) .basePhBox{
		border-bottom-left-radius: 0;
	}
}
/* --- PDFボタン --- */
.dtlExhibMainPhArea .baseBtnS{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	position: absolute;
	bottom: 0;
	translate: 0 100%;
}
/* タイトル・詳細エリア
============================== */
.dtlExhibMainTxtArea{
	display: flex;
	flex-direction: column;
	width: 640px;
}
/* --- 展示期間 --- */
#dtlExhibMainWrapper .dayBaseTxt{
	order: 1;
	color: var(--clrLBlue);
	font-size: 2.6rem;
	font-weight: 300;
	margin-bottom: 20px;
}
/* --- 展示タイトル --- */
#dtlExhibMainWrapper .baseTit{
	order: 2;
	display: flex;
	flex-direction: column;
	margin-bottom: 50px;
}
#dtlExhibMainWrapper .baseTit [class *= "tit"]{
	letter-spacing: 0.1em;
}
/* ショルダー */
#dtlExhibMainWrapper .baseTit .titShoulder{
	font-size: 2.8rem;
	line-height: 1.15em;
}
#dtlExhibMainWrapper .baseTit .titShoulder:has(+.titMain){
	margin-bottom: 10px;
}
/* メイン */
#dtlExhibMainWrapper .baseTit .titMain{
	font-size: 3.8rem;
	line-height: 1.1em;
}
#dtlExhibMainWrapper .baseTit .titMain:has(+.titSub){
	margin-bottom: 12px;
}
/* サブ */
#dtlExhibMainWrapper .baseTit .titSub{
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.3em;
}
/* --- リスト --- */
.dtlExhibMainTxtList{
	order: 3;
	display: flex;
	flex-direction: column;
	gap: 30px 0;
}
.dtlExhibMainTxtList .bgBlackTitS{
	width: fit-content;
	min-width: 100px;
}
.dtlExhibMainTxtList .txt{
	line-height: 1.4em;
}
.dtlExhibMainTxtList .komeList,
.dtlExhibMainTxtList .noteTxt{
	margin-top: 10px;
}

/*
	チケットボタンエリア
---------------------------------------------------- */
#dtlTicketWrapper{
	background-color: var(--clrLGray50);
	padding-block: 30px;
}
#dtlTicketWrapper .ctsArea{
	display: flex;
	justify-content: center;
	gap: 0 30px;
}

/*
	みどころ
---------------------------------------------------- */
#dtlExhibLeadWrapper{
	color: #fff;
	padding-block: 60px 80px;
}
.dtlExhibLeadList{
	display: flex;
	flex-direction: column;
	gap: 30px 0;
}
/* 見出し
============================== */
.dtlExhibLeadTit{
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 130%;
	letter-spacing: 0.2rem;
}
/* 本文
============================== */
.dtlExhibLeadTit + .dtlExhibLeadTxt{
	margin-top:8px;
}

/*
	関連イベント
---------------------------------------------------- */
#dtlExhibEventWrapper{
	padding-block: 60px 80px;
}
/* リスト
============================== */
.dtlExhibEventList{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}
.dtlExhibEventList li{
	width: 435px;
	background-color: #fff;
	border-radius: var(--radiusBase);
	padding: 25px;
}
/* --- タイトル --- */
.dtlExhibEventTit{
	color: var(--clrLBlue);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 130%;
}
/* --- 日時など --- */
.dtlExhibEventMemo{
	border-top: var(--borderBase);
	border-bottom: var(--borderBase);
	color: var(--clrDGray);
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 140%;
	padding-block: 8px;
}
.dtlExhibEventTit + .dtlExhibEventMemo,
.dtlExhibEventTit + .dtlExhibEventTxt{
	margin-top: 8px;
}
/* --- 本文 --- */
.dtlExhibEventTxt{
	font-size: 1.3rem;
	line-height: 150%;
}
.dtlExhibEventMemo + .dtlExhibEventTxt{
	margin-top: 8px;
}
/* タグ */
.dtlExhibEventTxt a{
	color: var(--clrLBlue);
	text-decoration: underline;
	word-break: break-all;
}
.dtlExhibEventTxt a[target *="_blank"]::after{
	content: " ";
	display: inline-block;
	width: 12px;
	aspect-ratio: 1 / 1;
	background-image: url(../images/ico_link_blue.svg);
	background-size: 100% auto;
	background-position: top left;
	background-repeat: no-repeat;
	margin-left: 5px;
	position: static;
	translate: 0 2px;
}
.dtlExhibEventTxt strong{
	color: var(--clrPoint);
	font-weight: 400;
}
.dtlExhibEventTxt b{
	font-weight: 700;
}

/*
	ギャラリー
---------------------------------------------------- */
#dtlExhibGalleryWrapper{
	padding-block: 80px;
}
/* リスト
============================== */
.dtlExhibGalleryList{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
.dtlExhibGalleryList li{
	width: 280px;
}
/* --- タイトル --- */
.dtlExhibGalleryTit{
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 130%;
}
.dtlExhibGalleryList .basePhBox + .dtlExhibGalleryTit,
.dtlExhibGalleryList .basePhBox + .dtlExhibGalleryTxt{
	margin-top: 10px;
}
/* --- 本文 --- */
.dtlExhibGalleryTxt{
	color: var(--clrDGray);
	font-size: 1.3rem;
	line-height: 150%;
}
.dtlExhibGalleryTit + .dtlExhibGalleryTxt{
	margin-top: 5px;
}

/*
	展示詳細情報
---------------------------------------------------- */
#dtlExhibDataWrapper{
	padding-block: 80px 100px;
}
#dtlExhibEventWrapper + #dtlExhibDataWrapper{
	margin-top: 10px;
}
#dtlExhibDataWrapper .bgArea{
	background-color: #fff;
	border-radius: var(--radiusBase);
	padding: 35px;
}
/* テーブル
============================== */
#dtlExhibDataWrapper .tblBase{
	border-top: none;
}
#dtlExhibDataWrapper .tblBase tr:last-of-type{
	border-bottom: none;
}



/* ==========================================================================
	アーカイブ
========================================================================== */
#wrapper:has(.archivePage){
	overflow: hidden;
}
#ctsWrapper.archivePage{
	padding-bottom: 20px;
}
#archiveWrapper{
	padding-block: 30px 50px;
}
#archiveWrapper .ctsArea{
	width: 100%;
	padding-inline: 60px;
}
.archiveArea{
	display: flex;
	flex-direction: column;
	gap: 60px 0;
	position: relative;
	z-index: 0;
}
#archiveWrapper .archiveSelectArea + .archiveArea{
	margin-top: -10px;
}

/*
	年 選択
---------------------------------------------------- */
.archiveSelectArea{
	display: flex;
	justify-content: flex-end;
	position: relative;
	z-index: 1;
}
.archiveSelectArea .formSelectS{
	width: 140px;
}

/*
	年 タイトル
---------------------------------------------------- */
.archiveYearTit{
	font-size: 2.8rem;
	font-family: var(--fEn);
	font-weight: 300;
	line-height: 100%;
	margin-bottom: 13px;
}

/*
	リスト
---------------------------------------------------- */
.jsArchiveList{
	position: relative;
	overflow: visible;
}
.archiveList li{
	flex-shrink: 0;
	width: 400px;
	height: 210px;
	position: relative;
}
.archiveList a,
.archiveList .baseTit{
	transition: var(--transition05);
}
.archiveList a{
	display: flex;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border-radius: var(--radiusBase);
	overflow: hidden;
}
@media (any-hover: hover){
	.archiveList a:hover{
		background-color: var(--clrLBlue10);
	}
	.archiveList a:hover .baseTit{
		color: var(--clrLBlue);
	}
}
/* 写真エリア
============================== */
.archiveList figure{
	width: 150px;
	background-color: transparent;
	border-right: var(--borderBase);
	transition: var(--transition05);
}
.archiveList img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition05);
}
@media (any-hover: hover){
	.archiveList a:hover figure{
		background-color: var(--clrLBlue);
	}
	.archiveList a:hover img{
		opacity: 0.7;
	}
}
/* タイトルエリア
============================== */
.archiveTitArea{
	display: flex;
	flex-direction: column;
	width: calc(100% - 150px);
	padding: 20px 20px 40px 20px;
}
.archiveTitArea .dayBaseTxt{
	order: 1;
	color: var(--clrLBlue);
	margin-bottom: 8px;
}
.archiveTitArea .baseTit{
	order: 2;
	display: -webkit-box;
	font-size: 1.4rem;
	line-height: 130%;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	overflow: hidden;
}
/* swiper
============================== */
.jsArchiveList .swiperSquareBtn.swiper-button-prev{
	border-radius: 0 3px 3px 0;
	left: -80px;
}
.jsArchiveList .swiperSquareBtn.swiper-button-next{
	border-radius: 3px 0 0 3px;
	right: -80px;
}



@media screen and (max-width:812px){
	/* ==========================================================================
		開催中・開催予定
	========================================================================== */
	/*
		開催中・次回
	---------------------------------------------------- */
	.currentWrapper{
		padding-block: 20px 25px;
	}
	.currentWrapper .ctsArea{
		padding-inline: 20px;
	}
	.currentWrapper:has([class *= "clrBgTit"]) .ctsArea{
		flex-direction: column;
		gap: 20px 0;
	}
	/* 画像
	============================== */
	.currentWrapper .basePhBox{
		order: 4;
		width: 100%;
	}
	/* タイトルエリア
	============================== */
	.currentTitArea{
		width: 100%;
	}
	/* --- 開催中・次回タイトル --- */
	[class *= "clrBgTit"]{
		margin-bottom: 15px;
	}
	/* --- 展示期間 --- */
	.currentWrapper .dayBaseTxt{
		font-size: 1.6rem;
		margin-bottom: 15px;
	}
	/* --- 展示タイトル --- */
	.currentWrapper .baseTit{
		margin-bottom: 20px;
	}
	.currentWrapper .baseTit [class *= "tit"]{
		letter-spacing: 0.1em;
	}
	/* ショルダー */
	.currentWrapper .baseTit .titShoulder{
		font-size: 1.6rem;
	}
	/* メイン */
	.currentWrapper .baseTit .titMain{
		font-size: 2.4rem;
	}
	.currentWrapper .baseTit .titMain:has(+.titSub){
		margin-bottom: 10px;
	}
	/* --- 詳細・チケット購入ボタン --- */
	.currentWrapper:has([class *= "clrBgTit"]) .btnArea{
		flex-direction: row;
		order: 5;
		margin-top: 25px;
	}
	.currentWrapper:has([class *= "clrBgTit"]) .baseBtn{
		width: calc((100% - 10px)/2);
		min-width: initial;
		font-size: 1.2rem;
		padding-inline: 10px 35px;
	}
	.currentWrapper:has([class *= "clrBgTit"]) .baseBtn[class *= "icoLink"]{
		padding-right: 30px;
	}
	.currentWrapper:has([class *= "clrBgTit"]) .baseBtn::before{
		right: 7px;
	}
	.currentWrapper:has([class *= "clrBgTit"]) .baseBtn::after{
		right: 13px;
	}
	.currentWrapper:has([class *= "clrBgTit"]) .baseBtn[class *= "icoLink"]::after{
		right: 10px;
	}
	/* 展示なし
	============================== */
	.currentWrapper:has(.currentNotTxt){
		padding-block: 40px 45px;
	}
	.currentNotTxt{
		font-size: 1.6rem;
	}
	.currentNotTxt + .btnArea{
		margin-top: 20px;
	}

	/*
		開催予定
	--------------------------------------------------- */
	#upcomingWrapper{
		margin-top: 40px;
	}
	/* テーブル
	============================== */
	#upcomingWrapper thead{
		display: none;
	}
	#upcomingWrapper tbody th{
		font-size: 1.6rem;
	}
	#upcomingWrapper tbody tr:first-of-type th{
		padding-top: 0;
	}
	#upcomingWrapper tbody td{
		font-size: 1.5rem;
	}



	/* ==========================================================================
		展示詳細
	========================================================================== */
	/*
		メインタイトルエリア
	---------------------------------------------------- */
	#dtlExhibMainWrapper{
		gap: 0;
		padding-top: 30px;
	}
	/* 画像エリア
	============================== */
	.dtlExhibMainPhArea{
		order: 3;
		width: 100%;
		/* PDFボタンがない時 + 詳細情報がない時 */
		margin-bottom: 0;
	}
	/* --- 画像 --- */
	.dtlExhibMainPhArea:has(.baseBtnS) .basePhBox{
		border-bottom-right-radius: 0;
	}
	/* --- 空きの調整 --- */
	/* PDFボタンがない時 + 詳細情報がある時 */
	.dtlExhibMainPhArea:has(:not(.baseBtnS)):has(+ .dtlExhibMainTxtList){
		margin-bottom: 30px;
	}
	/* PDFボタンがある時 + 詳細情報がない時 */
	.dtlExhibMainPhArea:has(.baseBtnS){
		margin-bottom: 28px;
	}
	/* PDFボタンがある時 + 詳細情報がある時 */
	.dtlExhibMainPhArea:has(.baseBtnS):has(+ .dtlExhibMainTxtList){
		margin-bottom: 40px;
	}

	/* --- PDFボタン --- */
	.dtlExhibMainPhArea .baseBtnS{
		width: 80px;
		min-width: initial;
		height: 28px;
		padding-inline: 10px 30px;
		right: 0;
	}
	.dtlExhibMainPhArea .baseBtnS::after{
		right: 8px;
	}
	/* タイトル・詳細エリア
	============================== */
	.dtlExhibMainTxtArea{
		width: 100%;
	}
	/* --- 展示期間 --- */
	#dtlExhibMainWrapper .dayBaseTxt{
		font-size: 1.8rem;
	}
	/* --- 展示タイトル --- */
	#dtlExhibMainWrapper .baseTit{
		margin-bottom: 30px;
	}
	/* ショルダー */
	#dtlExhibMainWrapper .baseTit .titShoulder{
		font-size: 1.8rem;
	}
	#dtlExhibMainWrapper .baseTit .titShoulder:has(+.titMain){
		margin-bottom: 5px;
	}
	/* メイン */
	#dtlExhibMainWrapper .baseTit .titMain{
		font-size: 2.3rem;
	}
	#dtlExhibMainWrapper .baseTit .titMain:has(+.titSub){
		margin-bottom: 7px;
	}
	/* サブ */
	#dtlExhibMainWrapper .baseTit .titSub{
		font-size: 1.4rem;
	}
	/* --- リスト --- */
	.dtlExhibMainTxtList{
		order: 4;
		gap: 20px 0;
	}
	.dtlExhibMainTxtList .txt{
		line-height: 1.5em;
	}

	/*
		チケットボタンエリア
	---------------------------------------------------- */
	#dtlTicketWrapper .ctsArea{
		flex-direction: column;
		gap: 10px 0;
	}

	/*
		みどころ
	---------------------------------------------------- */
	#dtlExhibLeadWrapper{
		padding-block: 40px 50px;
	}
	/* 本文
	============================== */
	.dtlExhibLeadTxt{
		line-height: 180%;
	}

	/*
		関連イベント
	---------------------------------------------------- */
	#dtlExhibEventWrapper{
		padding-block: 40px 50px;
	}
	/* リスト
	============================== */
	.dtlExhibEventList{
		flex-direction: column;
		gap: 15px 0;
	}
	.dtlExhibEventList li{
		gap: 6px 0;
		width: 100%;
		padding: 20px;
	}
	/* --- タイトル --- */
	.dtlExhibEventTit{
		font-size: 1.5rem;
	}

	/*
		ギャラリー
	---------------------------------------------------- */
	#dtlExhibGalleryWrapper{
		padding-block: 50px;
	}
	/* リスト
	============================== */
	.dtlExhibGalleryList{
		gap: 25px 20px;
	}
	.dtlExhibGalleryList li{
		width: calc((100% - 20px)/2);
	}
	/* --- タイトル --- */
	.dtlExhibGalleryTit{
		font-size: 1.5rem;
	}

	/*
		展示詳細情報
	---------------------------------------------------- */
	#dtlExhibDataWrapper{
		padding-block: 50px 60px;
	}
	#dtlExhibDataWrapper .bgArea{
		padding: 10px 20px;
	}



	/* ==========================================================================
		アーカイブ
	========================================================================== */
	#ctsWrapper.archivePage{
		padding-bottom: 10px;
	}
	#archiveWrapper{
		padding-block: 20px 50px;
	}
	#archiveWrapper .ctsArea{
		min-width: 100%;
		padding-inline: 30px;
	}
	.archiveArea{
		gap: 40px 0;
	}
	#archiveWrapper .archiveSelectArea + .archiveArea{
		margin-top: -20px;
	}

	/*
		年 選択
	---------------------------------------------------- */
	.archiveSelectArea .formSelectS{
		width: 120px;
	}

	/*
		年 タイトル
	---------------------------------------------------- */
	.archiveYearTit{
		font-size: 2.6rem;
	}

	/*
		リスト
	---------------------------------------------------- */
	.archiveList li{
		width: 100%;
		max-width: 380px;
		height: 126px;
	}
	.archiveList a::before{
		right: 5px;
		bottom: 5px;
	}
	.archiveList a::after{
		right: 11px;
		bottom: 11px;
	}
	/* 写真エリア
	============================== */
	.archiveList figure{
		width: 90px;
	}
	/* タイトルエリア
	============================== */
	.archiveTitArea{
		width: calc(100% - 90px);
		padding: 12px 10px 30px 10px;
	}
	.archiveTitArea .dayBaseTxt{
		font-size: 1.2rem;
		margin-bottom: 5px;
	}
	.archiveTitArea .baseTit{
		font-size: 1.3rem;
		-webkit-line-clamp: 4;
	}
	/* swiper
	============================== */
	.jsArchiveList .swiperSquareBtn.swiper-button-prev{
		left: -40px;
	}
	.jsArchiveList .swiperSquareBtn.swiper-button-next{
		right: -40px;
	}
}