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

/* ==========================================================================
	共通
========================================================================== */
#ctsWrapper{
	padding-bottom: 0;
}

/*
	一覧ボタン
---------------------------------------------------- */
.btnTopArea{
	position: relative;
}
.btnTopArea .baseBtnS{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	position: absolute;
	top: 0;
	right: 0;
	translate: 0 -100%;
}



/* ==========================================================================
	kv
========================================================================== */
#kvWrapper{
	margin-bottom: 50px;
	position: relative;
}

/*
	メイン画像
---------------------------------------------------- */
.kvMain{
	display: block;
}
.kvMain img{
	width: 100%;
}



/* ==========================================================================
	開催中・開催予定
========================================================================== */
#exhibWrapper{
	padding-bottom: 80px;
}
.exhibBox{
	display: flex;
	flex-direction: column;
	width: 545px;
	height: auto;
	border-bottom: var(--borderBase);
	padding-block: 30px 20px;
	position: relative;
}

/*
	タイトルエリア
---------------------------------------------------- */
@media print, screen and (min-width:813px){
	#exhibWrapper .swiper{
		padding-bottom: 40px;
	}
	#exhibWrapper .swiper-wrapper{
		display: flex;
		justify-content: center;
		gap: 0 50px;
	}
	#exhibWrapper .swiper-button-next,
	#exhibWrapper .swiper-button-prev{
		display: none;
	}
}

/*
	開催中・開催予定 タイトル
---------------------------------------------------- */
.exhibBox [class *= "clrBgTit"]{
	order: 1;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/*
	画像
---------------------------------------------------- */
.exhibBox .basePhBox{
	order: 2;
	height: auto;
	border-top-left-radius: 0;
	position: relative;
	z-index: 0;
}
.exhibBox .basePhBox img{
	height: auto;
	object-fit: unset;
}

/*
	タイトル周り
---------------------------------------------------- */
/* 日付
============================== */
.exhibBox .dayBaseTxt{
	order: 3;
	color: var(--clrLBlue);
	margin-block: 20px 8px;
}
/* タイトル
============================== */
.exhibBox .baseTit{
	order: 4;
	font-size: 1.8rem;
	transition: all 0.3s;
}
@media (any-hover: hover){
	.exhibBox:hover .baseTit{
		color: var(--clrLBlue);
	}
}

/*
	詳細ボタン
---------------------------------------------------- */
.exhibBox .baseBtn{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	position: absolute;
	right: 0;
	bottom: 0;
	translate: 0 100%;
}



/* ==========================================================================
	スケジュール
========================================================================== */
#scheduleWrapper{
	padding-block: 60px 80px;
}

/*
	カレンダー
---------------------------------------------------- */
@media print, screen and (min-width:813px){
	.cmnCalendarArea{
		width: 440px;
	}
}

/*
	スケジュールリスト
---------------------------------------------------- */
@media print, screen and (min-width:813px){
	.cmnScheduleList{
		width: 650px;
	}
	.cmnScheduleList .baseTit{
		-webkit-line-clamp: 3;
	}
}



/* ==========================================================================
	お知らせ
========================================================================== */
#newsWrapper{
	padding-block: 60px 80px;
	margin-bottom: 120px;
}



/* ==========================================================================
	ブログ
========================================================================== */
#blogWrapper{
	padding-block: 60px 80px;
	margin-bottom: 120px;
}
.blogClm2{
	display: flex;
	justify-content: center;
	gap: 0 60px;
}

/*
	最新記事
---------------------------------------------------- */
.blogNewArea{
	display: flex;
	flex-direction: column;
	width: 550px;
}
/* 画像
============================== */
.blogNewArea .basePhBox{
	order: 1;
	height: 320px;
}
/* タイトル
============================== */
@media print, screen and (min-width:813px){
	.blogNewArea .baseTit{
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}
.blogNewArea .baseTit{
	order: 2;
	font-size: 2rem;
	margin-block: 15px 20px;
}
@media (any-hover: hover){
	.blogNewArea:hover .baseTit{
		color: var(--clrLBlue);
	}
}
/* 日付
============================== */
.blogNewArea .dayBaseTxt{
	order: 3;
	font-size: 1.3rem;
	margin-top: auto;
}

/*
	リスト
---------------------------------------------------- */
@media print, screen and (min-width:813px){
	.blogList{
		width: 530px;
	}
	.blogList .baseTit{
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}



/* ==========================================================================
	そごう美術館について・所蔵品について
========================================================================== */
#aboutWrapper{
	display: flex;
	flex-direction: column;
	gap: 100px 0;
	padding-bottom: 120px;
}
.aboutBox{
	display: flex;
	justify-content: space-between;
}
@media print, screen and (min-width:813px){
	.aboutBox:nth-of-type(2n+1){
		flex-direction: row-reverse;
	}
}

/*
	テキストエリア
---------------------------------------------------- */
/* そごう美術館について
============================== */
@media print, screen and (min-width:813px){
	.aboutBox.overview .aboutTxtArea,
	.aboutBox.collection .aboutTxtArea{
		padding-top: 40px;
	}
	.aboutBox.overview .aboutTxtArea{
		width: 580px;
	}
}
/* 所蔵品について
============================== */
@media print, screen and (min-width:813px){
	.aboutBox.collection .aboutTxtArea{
		width: 510px;
		margin-left: 30px;
	}
}

/*
	タイトル・本文
---------------------------------------------------- */
/* タイトル
============================== */
.aboutTit{
	margin-bottom: 30px;
	position: relative;
}
.aboutTit .ja{
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 100%;
	position: relative;
	z-index: 1;
}
.aboutTit .en{
	color: var(--clrDGray20);
	font-size: 9rem;
	font-family: var(--fEn);
	font-weight: 300;
	line-height: 80%;
	letter-spacing: 0.8rem;
	position: absolute;
	bottom: 0;
	left: -30px;
	z-index: 0;
}

/*
	ボタン
---------------------------------------------------- */
.aboutBox .btnArea{
	justify-content: flex-end;
}

/*
	画像
---------------------------------------------------- */
.aboutBox figure{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.aboutBox img{
	border-radius: var(--radiusBase);
}
/* そごう美術館について
============================== */
@media print, screen and (min-width:813px){
	.aboutBox.overview figure{
		width: 500px;
	}
}
/* 所蔵品について
============================== */
@media print, screen and (min-width:813px){
	.aboutBox.collection figure{
		width: 540px;
	}
}
.aboutBox.collection img{
	width: 260px;
}
.aboutBox.collection img:first-of-type{
	margin-top: 80px;
}



/* ==========================================================================
	マップエリア
========================================================================== */
#mapWrapper{
	width: 100%;
	height: 450px;
}
#mapWrapper iframe{
	width: 100%;
	height: 100%;
}


@media screen and (max-width:812px){
	/* ==========================================================================
		kv
	========================================================================== */
	#kvWrapper{
		margin-bottom: 30px;
	}



	/* ==========================================================================
		開催中・開催予定
	========================================================================== */
	#exhibWrapper{
		padding-bottom: 50px;
	}
	.exhibBox{
		width: 100%;
		border: var(--borderBase);
		border-radius: 0 var(--radiusBase) var(--radiusBase) var(--radiusBase);
		padding: 0 25px 25px 25px;
	}

	/*
		リスト
	---------------------------------------------------- */
	#exhibWrapper .swiper{
		padding: 31px 15px 0 15px;
	}
	#exhibWrapper .swiper-slide{
		height: auto;
	}

	/*
		開催中・開催予定 タイトル
	---------------------------------------------------- */
	.exhibBox [class *= "clrBgTit"]{
		top: -31px;
		left: -1px;
	}

	/*
		画像
	---------------------------------------------------- */
	.exhibBox .basePhBox{
		width: calc(100% + 50px);
		border: none;
		border-radius: 0 4px 0 0;
		margin-left: -25px;
		position: relative;
	}
	.exhibBox .basePhBox::after{
		content: " ";
		display: block;
		width: 100%;
		height: 1px;
		background-color: var(--clrMGray);
		position: absolute;
		bottom: 0;
		left: 0;
	}

	/*
		タイトル周り
	---------------------------------------------------- */
	/* 日付
	============================== */
	.exhibBox .dayBaseTxt{
		margin-block: 15px 5px;
	}
	/* タイトル
	============================== */
	.exhibBox .baseTit{
		font-size: 1.5rem;
		margin-bottom: 20px;
	}

	/*
		詳細ボタン
	---------------------------------------------------- */
	.exhibBox .baseBtn{
		order: 5;
		border-top-left-radius: var(--radiusBase);
		border-top-right-radius: var(--radiusBase);
		margin-top: auto;
		position: relative;
		right: auto;
		bottom: auto;
		translate: 0 0;
	}



	/* ==========================================================================
		スケジュール
	========================================================================== */
	#scheduleWrapper{
		padding-block: 50px;
	}



	/* ==========================================================================
		お知らせ
	========================================================================== */
	#newsWrapper{
		padding-block: 50px 40px;
		margin-bottom: 50px;
	}



	/* ==========================================================================
		ブログ
	========================================================================== */
	#blogWrapper{
		padding-block: 50px 40px;
		margin-bottom: 50px;
	}
	.blogClm2{
		flex-direction: column;
		gap: 60px 0;
	}

	/*
		最新記事
	---------------------------------------------------- */
	.blogNewArea{
		width: 100%;
	}
	/* 画像
	============================== */
	.blogNewArea .basePhBox{
		height: 200px;
	}
	/* タイトル
	============================== */
	.blogNewArea .baseTit{
		font-size: 1.6rem;
		margin-block: 10px 15px;
	}
	/* 日付
	============================== */
	.blogNewArea .dayBaseTxt{
		font-size: 1.2rem;
	}

	/*
		リスト
	---------------------------------------------------- */
	.blogList li:last-of-type{
		border-bottom: none;
	}
	.blogList li:last-of-type a{
		padding-bottom: 0;
	}



	/* ==========================================================================
		そごう美術館について・所蔵品について
	========================================================================== */
	#aboutWrapper{
		gap: 50px 0;
		padding-bottom: 60px;
	}
	.aboutBox{
		flex-direction: column;
		gap: 50px 0;
	}

	/*
		テキストエリア
	---------------------------------------------------- */
	.aboutBox .aboutTxtArea{
		order: 2;
	}

	/*
		タイトル・本文
	---------------------------------------------------- */
	.aboutTit,
	.baseTxt,
	.aboutBox .btnArea{
		padding-left: 40px;
	}
	/* タイトル
	============================== */
	.aboutTit{
		margin-bottom: 15px;
	}
	.aboutTit .ja{
		font-size: 2.2rem;
	}
	.aboutTit .en{
		font-size: 4.8rem;
		letter-spacing: 0.15rem;
		bottom: 10px;
		left: 0;
	}

	/*
		ボタン
	---------------------------------------------------- */
	.aboutBox .btnArea{
		justify-content: flex-start;
	}

	/*
		画像
	---------------------------------------------------- */
	.aboutBox figure{
		order: 1;
	}
	/* 所蔵品について
	============================== */
	.aboutBox.collection img{
		width: calc((100% - 20px)/2);
	}
	.aboutBox.collection img:first-of-type{
		margin-top: 30px;
	}



	/* ==========================================================================
		マップエリア
	========================================================================== */
	#mapWrapper{
		height: 350px;
	}
}