@charset 'UTF-8';

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

ilm/index_pc.css
Ver.201805

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

01. メインビジュアル
02. 概要
03. 告知
04. 施設紹介
05. 体験教室
06. 展覧会のご案内
07. PR
08. その他イベント情報
09. お知らせ

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





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


.theme .frontrow {
	background-color: transparent;
	overflow: hidden;
	position: relative;
}

	.theme .frontrow::before {
		background: url(/en/ilm/img/pc/frt_img_trademark.png) no-repeat 0 0;
		bottom: 16px;
		content: '';
		display: block;
		height: 42px;
		position: absolute;
		right: 50%;
		width: 452px;
		margin-right: 88px;
		z-index: 1;
	}

	.theme .frontrow div {
		bottom: 0;
		height: 56.25vw;
		left: 0;
		margin: auto 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.theme .frontrow iframe {
		height: 100% !important;
		width: 100% !important;
		margin: 0 !important;
	}


/** |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 .slogan {
		font-family: 'Trade Gothic W01 Bold', sans-serif;
		font-size: 24px;
		line-height: 1.88;
		padding-top: 28px;
	}

	.contents .body .foreword .outline {padding-top: 18px;}

		.contents .body .foreword .outline dt {line-height: 1.88;}

		.contents .body .foreword .outline dd {padding-top: 10px;}

			.contents .body .foreword .outline dd a {
				background-color: #fff;
				border: 1px solid #d4d5d6;
				box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				color: #7f8283;
				display: inline-block;
				font-family: 'Trade Gothic W01 Bold', sans-serif;
				font-size: 14px;
				padding: 10px 18px;
				text-decoration: none;
			}

			.contents .body .foreword .outline dd a:hover {
				background-color: #d4d5d6;
				box-shadow: none;
				color: #fff;
			}


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





/** |03. 告知| >> ********************************************************************* >> START **/


.contents .body .ads {
	padding-top: 64px;
	text-align: center;
}


/** |03. 告知| << *********************************************************************** << END **/





/** |04. 施設紹介| >> ***************************************************************** >> START **/


.contents .body .facilities {width: 760px;}

	.contents .body .facilities li {
		float: left;
		padding-top: 64px;
		width: 362px;
	}

	.contents .body .facilities li:nth-of-type(odd) {clear: both;}
	.contents .body .facilities li:nth-of-type(even) {float: right;}

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

		.contents .body .facilities li a:hover {opacity: 0.5;}

			.contents .body .facilities li .label {
				height: 180px;
				overflow: hidden;
				position: relative;
				width: 362px;
				z-index: 1;
			}

				.contents .body .facilities li .label dt {
					background-color: #fff;
					color: #7f8283;
					font-family: 'Trade Gothic W01 Bold', sans-serif;
					left: 0;
					letter-spacing: -0.06em;
					padding: 8px 12px;
					position: absolute;
					top: 0;
					z-index: 2;
				}

					.contents .body .facilities li .label dt span {font-size: 12px;}

			.contents .body .facilities li .text {
				line-height: 1.88;
				padding-top: 8px;
			}


/** |04. 施設紹介| << ******************************************************************* << END **/





/** |05. 体験教室| >> ***************************************************************** >> START **/


.contents .body .trial .class {
	float: left;
	padding-top: 22px;
	width: 362px;
}

.contents .body .trial .class:nth-of-type(even) {float: right;}

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

	.contents .body .trial .class a:hover {opacity: 0.5;}

		.contents .body .trial .class .image {}

		.contents .body .trial .class .label {padding-top: 16px;}

			.contents .body .trial .class .label dt,
			.contents .body .trial .class .label dd {line-height: 1.88;}

			.contents .body .trial .class .label dt {font-family: 'Trade Gothic W01 Bold', sans-serif;}


/** |05. 体験教室| << ******************************************************************* << END **/





/** |06. 展覧会のご案内| >> *********************************************************** >> START **/


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

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

	.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: 280px;
			overflow: hidden;
			position: relative;
			width: 362px;
		}

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

			.contents .body .exhibition .latest .image .caption {
				background-color: #fff;
				bottom: 0;
				color: #7fd1c7;
				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 .label dt,
			.contents .body .exhibition .latest .label dd {line-height: 1.88;}

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

		.contents .body .exhibition .latest .period {padding-top: 12px;}

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


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


/** |06. 展覧会のご案内| << ************************************************************* << END **/





/** |07. PR| >> *********************************************************************** >> START **/


.contents .body .pr .diary,
.contents .body .pr .plant {
	float: left;
	width: 362px;
}

.contents .body .pr .plant {float: right;}


	/** [最新記事] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .body .pr * .latest {
		padding-top: 22px;
		width: 362px;
	}

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

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

			.contents .body .pr * .latest .image {
				background-color: #f4f4f5;
				height: 184px;
				overflow: hidden;
				position: relative;
				width: 362px;
			}

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

			.contents .body .pr * .latest .staff {
				font-size: 14px;
				line-height: 1.88;
				padding-top: 16px;
			}

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

			.contents .body .pr * .latest .staff + .label {padding-top: 4px;}

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

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

				.contents .body .pr * .latest .label dd {padding-top: 6px;}

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


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


/** |07. PR| << ************************************************************************* << END **/





/** |08. その他イベント情報| >> ******************************************************* >> START **/


.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;}


/** |08. その他イベント情報| << ********************************************************* << END **/





/** |09. お知らせ| >> ***************************************************************** >> 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 #7fd1c7;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				color: #7fd1c7;
				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;}


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