@charset 'UTF-8';

/** |READ ME| **************************************************************************************

gallery/index_pc.css
Ver.201805

----------------------------------------------------------------------------------------------------

01. メインビジュアル
02. 概要
03. 展覧会情報
04. イベント情報
05. お知らせ

************************************************************************************** |READ ME| **/





/** |01. メインビジュアル| >> ********************************************************* >> START **/


.theme .frontrow {
	background: url(/en/gallery/img/pc/frt_img_wall.jpg)no-repeat 50% 50%;
	background-size: cover;
}


/** |01. メインビジュアル| << *********************************************************** << END **/





/** |02. 概要| >> ********************************************************************* >> START **/


.contents .body .foreword {}

	.contents .body .foreword .name {
		border-left: 3px solid #d2d2d2;
		font-size: 28px;
		padding: 6px 0 6px 28px;
	}

	.contents .body .foreword p {
		line-height: 1.88;
		padding-top: 26px;
	}


/** |02. 概要| << *********************************************************************** << END **/





/** |03. 展覧会情報| >> *************************************************************** >> START **/


.contents .body .contemporary,
.contents .body .ceramic {
	float: left;
	width: 362px;
}

.contents .body .ceramic {float: right;}


	.contents .body .exhibition .area {
		float: left;
		width: 362px;
	}

	.contents .body .exhibition .osaka {float: right;}


	/** [展示情報] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .body .exhibition .latest {
		padding-top: 20px;
		width: 522px;
		
	}

		.contents .body .exhibition .latest a {
			color: inherit;
			display: block;
			text-decoration: none;
			width: 100%;
		}

		.contents .body .exhibition .latest a:hover {opacity: 0.5;}

		.contents .body .exhibition .latest .image {
			background-color: #f4f4f5;
			height: 180px;
			overflow: hidden;
			position: relative;
			width: 522px;
		height: 265px;
		}

			.contents .body .exhibition .latest .image img {
				height: auto;
				left: 0;
				margin: auto;
				position: absolute;
				top: 50%;
				-ms-transform: translate(0, -50%);
				-webkit-transform: translate(0, -50%);
				transform: translate(0, -50%);
				width: 100%;
			}

			.contents .body .exhibition .latest .image .caption {
				background-color: #fff;
				bottom: 0;
				color: #85c2d6;
				font-family: 'Trade Gothic W01 Bold', sans-serif;
				font-size: 14px;
				left: 0;
				padding: 12px 14px;
				position: absolute;
			}

		.contents .body .exhibition .latest .label {padding-top: 16px;}

			.contents .body .exhibition .latest dt {
				font-family: 'Trade Gothic W01 Bold', sans-serif;
				line-height: 1.88;
			}

			.contents .body .exhibition .latest dd {padding-top: 6px;}

				.contents .body .exhibition .latest .label dd span {font-size: 14px;}


	/* 情報なし */
	.contents .body .exhibition .nodata {padding-top: 30px;}

	.contents .body .exhibition .area .nodata {line-height: 1.88;}


/** |03. 展覧会情報| << ***************************************************************** << END **/





/** |04. イベント情報| >> ************************************************************* >> START **/


.contents .body .event {clear: both;}

	.contents .body .event .latest {
		float: left;
		padding-top: 16px;
		width: 362px;
	}

	.contents .body .event .latest:nth-of-type(2n+1) {float: right;}

		.contents .body .event .latest a {
			color: inherit;
			display: block;
			text-decoration: none;
			width: 100%;
		}

		.contents .body .event .latest a:hover {opacity: 0.5;}

			.contents .body .event .latest .image {
				background-color: #f4f4f5;
				float: left;
				margin-top: 4px;
				min-height: 92px;
				width: 120px;
			}

				.contents .body .event .latest .image img {
					height: auto;
					width: 100%;
				}

			.contents .body .event .latest .label {
				float: right;
				width: 222px;
			}

				.contents .body .event .latest .label dt,
				.contents .body .event .latest .label dd {letter-spacing: -0.05em;}

				.contents .body .event .latest .label dt {
					font-family: 'Trade Gothic W01 Bold', sans-serif;
					line-height: 1.88;
				}

				.contents .body .event .latest .label dd {
					font-size: 14px;
					line-height: 1.2;
					padding-top: 8px;
				}

					.contents .body .event .latest .label dd span {font-size: 12px;}


	/* 情報なし */
	.contents .body .event .nodata {padding-top: 30px;}


/** |04. イベント情報| << *************************************************************** << END **/





/** |05. お知らせ| >> ***************************************************************** >> START **/


.contents .body .information .latest {}

	.contents .body .information .latest .article {
		border-bottom: 1px solid #d4d5d6;
		padding: 30px 0;
	}

		.contents .body .information .latest .article dt {font-family: 'Trade Gothic W01 Bold', sans-serif;}

			.contents .body .information .latest .article dt .dow {font-size: 12px;}

			.contents .body .information .latest .article dt .genre {
				border: 1px solid #85c2d6;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				color: #85c2d6;
				display: inline-block;
				font-family: 'Trade Gothic W01 Light', sans-serif;
				font-size: 12px;
				height: 22px;
				line-height: 22px;
				margin-left: 36px;
				padding: 0 14px;
				text-align: center;
				vertical-align: middle;
			}

		.contents .body .information .latest .article dd {padding-top: 20px;}

			.contents .body .information .latest .new dd::after {
				color: #ed7f40;
				content: 'NEW';
				font-family: 'Trade Gothic W01 Bold', sans-serif;
				font-size: 12px;
				margin-left: 0.8em;
			}


/* 情報なし */
.contents .body .information .latest .nodata {padding-top: 30px;}


/** |05. お知らせ| << ******************************************************************* << END **/