@charset "UTF-8";
body {
	/*display: none;*/
}



/*大澤170920企画展コピーライト*/
.ex-list a:hover .thum-copy img {
  -webkit-transition: all .3s ease-out 0s;
          transition: all .3s ease-out 0s;
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
}
.ex-list .thum-copy, .ex-list .detail {
  display: table-cell;
}
.ex-list .thum-copy {
  width: 200px;
  height: 200px;
  text-align: center;
  vertical-align: middle;
  background: #e8e8e8;
}
.ex-list .thum-copy img {
  height: 70%;
  border: 1px solid #fff;
  -webkit-transition: all .3s ease-out 0s;
          transition: all .3s ease-out 0s;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
/*大澤170920企画展コピーライト*/

/*170607 英語用の公募展です　大澤*/
.event-panels .panel.pn-size2 .item-content_en {
	width: 230px;
  padding: 0 20px;
  display: table-cell;
  vertical-align: middle;
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: 49px;
}
.event-panels .panel .item-content_en {
  background: #e7e7e7;
  vertical-align: middle;
  -webkit-transition: all .3s ease-out 0s;
          transition: all .3s ease-out 0s;
}
.event-panels .panel .item-content_en .day {
  line-height: 1.4em;
}
.event-panels .panel.pn-size2 .item-content_en .ttl {
  line-height: 1.4;
  font-size: 1.6rem;
  margin-bottom: 15px;
}
.event-panels .panel.pn-size2 .item-thum, .event-panels .panel.pn-size2 .item-content_en {
	height: auto;
}
.event-panels .panel.pn-size2 .item-content_en {
	padding: 15px;
}
.event-panels .panel.pn-size2 .item-content_en .ttl {
	line-height: 1.4;
	font-size: 1.4rem;
	margin-bottom: 10px;
}
.event-panels .panel:hover .item-content_en {
  -webkit-transition: all .3s ease-out 0s;
          transition: all .3s ease-out 0s;
}
/*170601 ワークショップPDFように追加しました　大澤*/
.pdf{
	display: inline;
}
.box-pdf{
	width: 50%;
}

/*「展覧会ホームページ」欄を H1 の外に出す要望に対応しました - 伏見*/

p.hp-link {
	line-height: 2.4;
	margin-bottom: 30px;
	margin-left: 0.5em;
}


/*H3 と dt のスタイルが同じで段階がわからない問題に対応しました。 - 伏見*/

.content-block .content-item .ttl {
	font-size: 1.8rem;
	margin-top: 2em;
	/*p.text の後に h3 が続く場合にスペースが空かない問題に対応しました。 - 伏見*/
}


/*展覧会ページ以外でのスクエア付きリストの行間、フォントサイズが整合性を保たない問題に対応しました。 - 伏見*/

.sq-icon-list li {
	line-height: 2.4rem;
	text-indent: 0!important;
	padding-left: 1em!important;
	display: block!important;
}


/*番号付きリストのスタイルを設定しました。 - 伏見*/

.content-item ol {
	list-style-type: decimal;
	margin: 0 0 2em 1em;
}

ol li {
	line-height: 2.4rem;
	margin-bottom: 0.7em;
}


/*パンくずリストの最後（現在のページ）はクリックできないにも関わらずホバーで赤くなる問題に対応しました。 - 伏見*/

.bread-crumbs > p > a:last-child {
	color: black;
}


/*新規クラス：マルチカラムレイアウトに対応しました。 - 伏見*/

.multi-column {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.multi-column > .text {
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

.multi-column img {
	margin-right: 20px;
}

.multi-column > dl + img {
	margin-left: 20px;
}

.add-R-margin-pc {
	margin-right: 20px;
}


/*img タグを素の状態で使用する場合にサイズを合わせます。 - 伏見*/

.small-image {
	width: 200px;
	min-width: 200px;
}


/*新規クラス：multi-column と同時に指定することで上揃えになります。 - 伏見*/

.align-top {
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	-ms-grid-row-align: flex-start;
	align-items: flex-start;
}


/*新規クラス：アートライブラリーページの2カラムレイアウトに対応しました。 - 伏見*/

.multi-column > dl.two {
	-webkit-flex-basis: 45%;
	-ms-flex-preferred-size: 45%;
	flex-basis: 45%;
}


/*b タグでの太字表記 - 小川*/

td > b {
	font-weight: bold;
}

.notice b {
	font-weight: bold;
}

.attention-text > b {
	font-weight: bold;
}


/*attention-text 内に余計な余白ができてしまう問題に対応しました。 - 伏見*/

.attention-text h3.ttl:first-of-type {
	margin-top: 0;
}

.attention-text dl:last-of-type,
.attention-text dl:last-of-type dd:last-of-type {
	margin-bottom: 0;
}


/*dd 内の b タグでの太字表記 - 伏見*/

dd b {
	font-weight: bold;
}


/*？*/

.content-block .content-item .ttl-sub {
	font-weight: bold;
	font-size: 1.5rem;
	margin-bottom: 1em;
}


/*点線枠の表が幅100%となるように対応しました。 - 伏見*/

.tichet-fee {
	width: 100%;
}


/*点線枠の表の左端カラム幅を固定しました。 - 伏見*/

.tichet-fee .attention:first-of-type {
	width: 10em;
}


/*画像1、文章1のスタイルで、dl のテキストが画像に近づきすぎる問題に対応しました。 - 伏見*/

.thum-side-box dl {
	padding-right: 50px;
}


/*新規クラス：協力企業様のロゴと社名を並べるレイアウトに対応しました。 - 伏見*/

.sponsor {
	padding-bottom: 2em;
}

.sponsor img {
	vertical-align: baseline;
	padding-right: 2em;
}

.sponsor span {
	display: inline-block;
	padding-top: 1em;
}


/*上記 inline-block を指定するとリンク下線が表示されなくなってしまう問題に対応しました。 - 伏見*/

.sponsor a {
	text-decoration: none;
}

.sponsor a span {
	border-bottom: 1px solid black;
}


/*上付き文字に対応しました。 - 伏見*/

.attention sup,
p > sup,
.content-block sup {
	vertical-align: super;
	font-size: 0.5em;
}


/*新規クラス：インターンのページにて、右寄せの太字クレジット表記に対応しました。 - 伏見*/

.bottom-name {
	font-size: 1.2rem;
	font-weight: bold;
	text-align: right;
	padding-bottom: 2.5em;
}


/*新規クラス：教育→国立新美術館ニュースページにて、画像左寄せのレイアウトに対応しました。 - 伏見*/

.edu-news {
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	-ms-grid-row-align: flex-start;
	align-items: flex-start
}

.edu-news img {
	border: 1px solid #ccc;
	width: 176px;
}

.edu-news dl {
	padding-left: 1em;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.edu-news dl dt small {
	font-size: 0.8em;
	margin-left: 1em;
}


/*新規クラス：教育→ガイドブックページにて、画像のサイズを揃えました。 - 伏見*/

.guidebook-flex img {
	width: 111px;
	margin: 10px;
}


/*ex-list にて a タグを消した場合にスタイルが崩れる問題に対応しました。 - 伏見*/

.ex-list > li > .detail {
	width: 100%;
	display: table;
	padding: 15px 20px;
	border-bottom: 1px solid #e8e8e8;
}

/*ex-list にて サムネイルあり、リンク無しのレイアウトに対応しました。 - 伏見*/

.ex-list > li > div:not(.hidden-thum) + .detail {
	height: 200px;
}

/*JAC プロジェクトのページにて、図書館の写真を並べるレイアウトに対応しました。 - 伏見*/

.jac > div {
	padding: 1em 5px;
	line-height: 1.4em;
}


/*その他講演会、イベントのページで、dl に続く table との間にマージンが空きすぎる問題に対応しました。 - 伏見*/

table + dl {
	margin-bottom: 0 !important;
}


/*公募展のページにおいて、詳細情報が存在しない場合の表示に対応しました。 - 伏見*/

.no-dropdown .ttl,
.no-dropdown .ttl.open {
	cursor: default !important;
	background-image: none !important;
	background-color: #999999 !important;
}


/*公募展のページにおいて、開催期間の表記がどこに属しているのかわかりにくい問題に対応しました。 - 伏見*/

.page-ttl3 {
	line-height: 1.4;
	font-size: 1.8rem;
	padding: 40px 0 5px;
	margin-bottom: 10px;
	background: url(../img/bd_dotted.gif) 0 100% repeat-x;
}

.page-ttl3:first-child {
	padding-top: 0;
}


/*content-itemとnoticeにborderを追加 - 小川*/

.content-item.border,
.notice.border,
.thum-side-box.border {
	padding-bottom: 30px;
	border-bottom: 1px dotted #cccccc;
}


/*最後にも関わらずボーダーが表示されてしまう問題に対応しました。 - 伏見*/

.dl-style1.border dd:last-of-type {
	border-bottom: none;
}

.gnav > ul > li .tab1 a {
	text-decoration: none;
	color: #d7322d;
}


/*flex-table の内容の行数によって段がずれてしまう問題に対応しました。 - 伏見*/

.flex-table .item .cnt .box,
.flex-table .item .ttl {
	height: 4.5em;
}


/*斜体表記に対応しました。 - 伏見*/

.content-block i {
	font-style: italic;
}


/*文章量が足りない場合に画像が右寄せにならない問題に対応しました。 - 伏見*/

.thum-side-box {
	width: 100%;
}


/*ページ内ナビゲーションの上に空白を少し開けました。（メニューの直下のみ） - 伏見*/

.tabs + .lnav {
	padding-top: 1em;
}


/*次回開催予定の表記を行う際のスタイルを追加しました。 - 伏見*/

.next-info > p {
	color: white;
	font-weight: bold;
	background-color: #d7322d;
	padding: 1em;
	margin: 1.5em 0 0;
	display: inline-block;
}

.next-info2 > p {
	color: #d7322d;
	font-weight: bold;
	background-color: white;
	padding: 1em;
	margin: 1.5em 0 0;
	display: inline-block;
}

.next-info3 p.upcoming {
	color: #d7322d;
	font-weight: bold;
	border: #d7322d solid 2px;
	padding: 0.75em;
	margin: 0 auto;
	position: absolute;
	bottom: 140px;
	left: 0;
	right: 0;
	width: 8em;
}

.next-info3 p.no-nact{
	width: 24em;
}
.manga{
	padding-top: 20px;
	padding-bottom: 20px;
}
.manga-ll{
	margin-bottom: 100px!important;
}

/*2つになったら消す*/
.panels-block1 + .link-to-exhibition-list {
  top: 30px!important;
}

.event-panels .panel.pn-size1 .item-thum {
	height: 481px!important;
}


/*英語ページトップのスタイルを作成しました。 - 伏見*/
.eng-exhibition-special {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
}

.eng-exhibition-special > img {
	width: 150px;
	margin: 1em 1em 1em 0;
}


/*画像が下に並ぶスタイルが複数行にわたる際、キャプションが次の行の画像に近づいてしまう問題に対応しました。 - 伏見*/

.detail-thum-list figure {
	vertical-align: top;
	line-height: 1em;
	margin: 0 0 2em;
}


/*画像が下に並ぶスタイルからshadowboxを一時的に取り除く場合の処置を追加しました。 - 伏見*/

.figthum {
	height: 200px;
}

.figthum img {
	max-height: 200px;
}

.landscapefig {
	display: table-cell!important;
	vertical-align: middle;
}


/*トップページ右部が左部の長さを超えたときに、コンテンツが途切れてしまう問題に対応しました。 - 伏見*/

.panels-left {
	float: left;
}

.panels-rigth {
	position: static!important;
	float: right;
}


/*同じセクションであるにもかかわらず、マージンの空きすぎによって分離して見える場合に対応しました。主に /education/workshop/ - 伏見*/

.thum-side-box > dl.dl-style1 {
	margin-bottom: 0;
}

.thum-side-box > dl.dl-style1 > dd:last-of-type {
	margin-bottom: 0;
}

/*画像が4枚横に並ぶスタイルを作成しました。 - 伏見*/
.detail-thum-list figure.four-items {
/*	width: 210px!important;*/
	width: 180px!important;
}

/*大きい画面サイズで余裕のあるレイアウトを設計しました。 - 伏見*/


/* 大澤20171215　トップ企画転用コピーライト */

.copy{
	text-align: left;
	font-size: 0.8rem;
	width: 100%;
	padding-left: 8%;
	padding-top: 15px;
  padding-right: 2%;
}

@media screen and (min-width: 1210px) {
	.detail-thum-list figure {
		width: 300px!important;
	}
}

/*はがきのスタイルを作成しました。 - 伏見*/

.postcard {
	border: black solid 1px;
	padding: 1em;
	width: 20em;
	height: 27em;
	margin-right: 1em;
}

/*トップページの臨時告知枠を作成しました。 - 伏見*/

.announcement {
	text-align: center;
}

.announcement span {
	color: #d7322d;
	font-weight: bold;
	font-size: 1.5em;
	margin-bottom: 40px;
	padding: 2em;
	border: 2px #d7322d solid;
	display: inline-block;
	line-height: 1.5;
}

/*英語トップページにて企画展右上のフリップを非表示にします。（フリップが日本語化されていないための暫定処置） - 伏見*/
.no-background:before {
	background: none!important;
}

/*企画展一覧ページにて、画像が無いが、画像エリア分の余白を空けるスタイルに対応しました。 - 伏見*/
.ex-list li {
	width: 100%;
	display: table;
}
.ex-list .hidden-thum {
	visibility: hidden;
	max-width: 200px;
	height: 0px!important;
}

.text + .dl-style1 {
	margin-top: 40px;
}

/*番号付きリストに対応しました。 - 伏見*/
.decimal-list {
	margin:0 0 2em 2em;
	list-style-type:decimal;
}
.decimal-list li {
	margin-top:1em;
}

/*サイドバーに SNS ボタンを追加しました - 伏見*/
.share-buttons {
	padding: 0 10px 0 28px;
	margin-top: 15px;
}
.share-buttons img {
	width:35px;
}
.btn-conic{
	text-align: center;
}
.btn-conic img{
	width: 89%;
}


/*小さい画面でのマルチカラム表記に対応しました。 - 伏見*/

@media screen and (max-width: 480px) {
	.multi-column {
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.multi-column > .text {
		margin: 0 1.5em 0 0;
	}
	.multi-column > img {
		height: auto;
		margin: 5px auto;
		width: 100%;
		min-width: auto;
		min-width: initial;
	}
	.multi-column > dl + img {
		margin-left: auto;
	}
	.add-R-margin-pc {
		margin-right: auto;
	}
	/*img タグを素の状態で使用する場合にサイズを合わせます。 - 伏見*/
	.small-image {
		width: 100%;
		min-width: auto;
		min-width: initial;
	}
	/*マルチカラムを小さい画面で確実に解除できるようにしました。（主に教育→ニュースページ） - 伏見*/
	.mob-unflex {
		display: inherit;
	}
	/*マルチカラムを小さい画面で順序反転できるようにしました。 - 伏見*/
	.mob-reverse {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-webkit-flex-direction: row-reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
		-webkit-flex-direction: column-reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}
	/*小さい画面でアートライブラリページのカラムが崩れる問題に対応しました。 - 伏見*/
	.multi-column > dl.two {
		-webkit-flex-basis: auto;
		-ms-flex-preferred-size: auto;
		flex-basis: auto;
	}
	/*小さい画面で教育→ニュースページの画像と文章の間が詰まってしまう問題に対応しました。 - 伏見*/
	.edu-news > a > img {
		margin-bottom: 1em;
	}
	/*小さい画面でガイドブックページの画像が大きくなりすぎる問題に対応しました。 - 伏見*/
	.guidebook-flex img {
		width: 45%;
	}
	.ex-list > li > .detail {
		padding-left: 0;
	}
	/*小さい画面で企画展のサムネイルが不自然に小さくなる問題に対応しました。 - 伏見*/
	.ex-list .thum img {
		height: 100%!important;
	}
	/*小さい画面でdlの右に余白が空いてしまう問題に対応しました。 - 伏見*/
	.thum-side-box dl {
		padding-right: 0;
	}
	/*flex-table の高さを PC で固定にしていたものを元に戻しました。 - 伏見*/
	.flex-table .item .cnt .box,
	.flex-table .item .ttl {
		height: auto;
	}
	/*英語ページトップのスタイルを作成しました。 - 伏見*/
	.eng-exhibition-special {
		display: block;
		margin-bottom: 4em;
	}
	.eng-exhibition-special > img {
		width: 80%;
		margin: 0 auto 1em;
		display: block;
	}
	/*画像が下に並ぶスタイルで、キャプションと次の画像が近づきすぎる問題に対応しました。 - 伏見*/
	.detail-thum-list figure {
		padding-bottom: 1em;
	}
	/*下に画像が並ぶスタイルで、横長の画像がコンテナの上部に接してしまう問題に対応しました。 - 伏見*/
	.mob-landscape {
		display: table-cell!important;
		vertical-align: middle;
	}
	/*次回開催予定の展覧会表記に対応しました。 - 伏見*/
.next-info3 p.upcoming {
		position: static;
		margin: 1.5em auto 0;
		width: 9em;
	}
	/*本ファイルの PC 用 CSS で !important を付けた height を style.css と同じ値にリセットします。 - 伏見*/
	.event-panels .panel.pn-size1 .item-thum {
		height: auto!important;
	}
	/*はがきのスタイルを作成しました。 - 伏見*/
	.postcard {
		width: 185px;
		height: 20em;
	}

	/*トップページの臨時告知枠を作成しました。 - 伏見*/
	.announcement span {
		padding:1em;
		margin-bottom: 15px;
	}

	/*企画展一覧ページにて、画像が無いが、画像エリア分の余白を空けるスタイルに対応しました。 - 伏見*/
	.ex-list li {
		width: 100%;
		display: block;
	}
	.ex-list .hidden-thum {
		display: none!important;
	}

	/*ex-list にて サムネイルあり、リンク無しのレイアウトに対応しました。 - 伏見*/
	.ex-list > li > div:not(.hidden-thum) + .detail {
		height: auto;
	}

	/*サイドバーに SNS ボタンを追加しました - 伏見*/
	.share-buttons {
		padding: 0;
		margin-top: 15px;
	}
	.share-buttons img {
		width: auto;
		padding: 5px 10px;
	}

/*170601 ワークショップPDFように追加しました　大澤*/
	.multi-column-pdf{
		flex-direction: column;
	}
	.pdf{
		display: block;
		padding-top: 5px;
	}
	.box-pdf{
		width: 100%;
	}
.btn-conic img{
	width: 80%;
}
}


/* 160404 /information/nursing/ テーブル修正*/

.table-style4 tbody tr:first-child th:nth-child(2) {
	width: auto;
	border-left: 1px dotted #cccccc;
}


/*170425 大澤サイドバー休館日調整*/

.side-bar .closed p {
	  line-height: 1.5em;
	/*text-align: left;
	padding-left: 10px;*/
}
.side-bar .closed .closed2 {
  font-size: 1.05rem;
	letter-spacing: .05em;
}

@media screen and (max-width: 480px) {

	.side-bar .closed .closed2 {
	  font-size: 1.0rem;
	}
	/*.side-bar .closed p {
		padding-left: 0px;
	}*/

}

/*170327　大澤　バナー位置調整*/

.bnr-area1 {
  margin: 0 40px 60px!important;
}
.bnr-area2 .bnr-list4 {
  margin: 0 40px!important;
}



/*トップに SNS ボタンを移動しました - 大澤*/
.Follow{
	padding-top: 12%;
	padding-left: 15%;
	display: inline;
}

.share-buttons {
	margin-top: 5px;
	margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
	.Follow{
		position: relative;
		top:5px;
	}
  /*大澤170920企画展コピーライト*/
  .ex-list a:hover .thum-copy img {
  -webkit-transition: none;
          transition: none;
  -webkit-transform: none;
          transform: none;
  box-shadow: none;
}
.ex-list .thum-copy, .ex-list .detail {
  display: block;
}
.ex-list .thum-copy {
  width: 100%;
  padding: 15px 15px 45px 15px;
  height: 160px;
  margin-bottom: 10px;
}
.ex-list .thum-copy img {
  max-width: 100%;
  max-height: 100%;
  height: 95%;
}
/*大澤170920企画展コピーライト*/
}

/* 171226　大澤　2カラム修正しました。 */
@media screen and (max-width: 1020px){
.panels-rigth{
  float: left;
}
.panels-rigth .sub-info{
  float: none!important;
}
.bnr-area1{
  padding-left: 0!important;
}
.bnr-area2{
  padding: 20px 40px 20px 0px!important;
}
}
@media screen and (max-width: 480px) {
.bnr-area1 {
  margin: 0 auto 60px!important;
  padding-left: 15px!important;
}

.bnr-area2 .bnr-list4 {
  margin: 0 auto!important;
  padding-left: 15px!important;
}
.manga-ll{
	margin-bottom: 10px!important;
}
/*2つになったら消す*/
.panels-block1 + .manga-sp {
  top: 0px!important;
}

}
/* 171226　大澤　2カラム修正しました。 */

@media only screen and (min-width: 481px){
.kaigyou br{
  display:none!important;
 }
}

/*アートライブラリー　ナビパーツ化*/
.tabs2 {
    overflow: hidden;
    margin-bottom: 25px;
    border-bottom: 1px solid #cccccc;
}

.tabs2 .tab2 {
    float: left;
    padding: 16px;
    color: #d7322d;
    margin-right: 1px;
    margin-bottom: 1px;
    background: #fbeaea;
    display: inline-block;
    text-decoration: none;
}

.tabs2 .tab2 span {
    padding-left: 15px;
    background: url(../img/icon_arrow_dotted_red.png) 0 50% no-repeat;
}
.tabs3 {
    overflow: hidden;
    margin-bottom: 25px;
    border-bottom: 1px solid #cccccc;
}

.tabs3 .tab3 {
    float: left;
    padding: 16px;
    color: #d7322d;
    margin-right: 1px;
    margin-bottom: 1px;
    background: #fbeaea;
    display: inline-block;
    text-decoration: none;
}

.tabs3 .tab3 span {
    padding-left: 15px;
    background: url(../img/icon_arrow_dotted_red.png) 0 50% no-repeat;
}
.gnav > ul > li .tab1 .icon.museum {
  width: 20px;
  height: 24px;
  background-image: url(../img/icon_museum.png);
  background-size: 20px 24px;
}
.gnav > ul > li .tab1 {
height: 90px!important;
    padding-top: 20px!important;
}