@charset 'UTF-8';

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

ilm/index_sp.css
Ver.201805

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

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

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





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


.theme .frontrow {
	background: url(/en/ilm/img/sp/frt_img_wall.jpg)no-repeat 50% 50%;
	background-size: cover;
	height: 53.13vw;
}

	.theme .frontrow iframe {display: none;}


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





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


.contents .body .foreword {/* 572px */}

	.contents .body .foreword .name {
		border-left: 3px solid #d2d2d2;
		font-size: 2.8rem;
		padding: 1.05% 0 1.05% 4.9%;/* 6px 0 6px 28px */
	}

	.contents .body .foreword .slogan {
		font-family: 'Trade Gothic W01 Bold', sans-serif;
		line-height: 1.67;
		padding-top: 8.39%;/* 44px */
	}

	.contents .body .foreword .outline {padding-top: 8.39%;/* 44px */}

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

		.contents .body .foreword .outline dd {padding-top: 4.9%;/* 28px */}

			.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-size: 2.2rem;
				font-family: 'Trade Gothic W01 Bold', sans-serif;
				padding: 2.8% 4.2%;/* 16px 24px */
				text-decoration: none;
			}


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





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


.contents .body .ads {
	padding-top: 13.99%;/* 80px */
	text-align: center;
}


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





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


.contents .body .facilities {
	padding-top: 3.5%;/* 20px */
	width: 100%;/* 572px */
}

	.contents .body .facilities li {
		float: left;
		padding-top: 10.49%;/* 60px */
		width: 48.25%;/* 276px */
	}

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

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

			.contents .body .facilities li .label {}

				.contents .body .facilities li .label dt {
					height: 2.58em;
					color: #7f8283;
					font-family: 'Trade Gothic W01 Bold', sans-serif;
					font-size: 1.8rem;
					letter-spacing: -0.06em;
					line-height: 2.58em;
				}

					.contents .body .facilities li .label dt span {font-size: 1.2rem;}

			.contents .body .facilities li .text {display: none;}


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





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


.contents .body .trial .class {
	float: left;
	padding-top: 6.99%;/* 40px */
	width: 48.25%;/* 276px */
}

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

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

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

		.contents .body .trial .class .label {}

			.contents .body .trial .class .label dt,
			.contents .body .trial .class .label dd {padding-top: 7.97%;/* 22px */}

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

			.contents .body .trial .class .label dd {
				font-size: 2rem;
				line-height: 1.7;
			}


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





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


.contents .body .exhibition .latest {padding-top: 12.59%;/* 72px */}

.contents .body .exhibition .header + .latest {padding-top: 6.99%;/* 40px */}

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

		.contents .body .exhibition .latest .image {
			background-color: #f4f4f5;
			overflow: hidden;
			position: relative;
			width: 100%;/* 572px */
		}

			.contents .body .exhibition .latest .image .caption {
				background-color: #fff;
				bottom: 0;
				color: #7fd1c7;
				font-family: 'Trade Gothic W01 Bold', sans-serif;
				font-size: 2rem;
				left: 0;
				padding: 3.15% 4.2%;/* 18px 24px */
				position: absolute;
			}

		.contents .body .exhibition .latest .label {padding-top: 6.64%;/* 38px */}

			.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: 2.45%;/* 14px */}

			.contents .body .exhibition .latest .period span {font-size: 2rem;}


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


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





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


.contents .body .pr {padding-top: 0;}

	.contents .body .pr .diary,
	.contents .body .pr .plant {padding-top: 13.99%;/* 80px */}


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

	.contents .body .pr * .latest {padding-top: 6.99%;/* 40px */}

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

			.contents .body .pr * .latest .image {
				background-color: #f4f4f5;
				width: 100%;/* 572px */
			}

			.contents .body .pr * .latest .staff {
				font-size: 1.8rem;
				line-height: 1.88;
				padding-top: 6.64%;/* 38px */
			}
 
			.contents .body .pr * .latest .label {padding-top: 6.64%;/* 38px */}

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

				.contents .body .pr * .latest .label dt,
				.contents .body .pr * .latest .label dd {line-height: 1.88;}

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

				.contents .body .pr * .latest .label dd {padding-top: 2.45%;/* 14px */}

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


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


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





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


.contents .body .event .latest {padding-top: 6.99%;/* 40px */}

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

		.contents .body .event .latest .image {/* height:141px(24.65%) */
			background-color: #f4f4f5;
			float: left;
			width: 32.17%;/* 184px */
		}

		.contents .body .event .latest .label {
			float: right;
			width: 63.99%;/* 366px */
		}

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

			.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: 2rem;
				line-height: 1.2;
				padding-top: 0.41em;
			}

				.contents .body .event .latest .label dd span:nth-of-type(n+2) {font-size: 1.6rem;}


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


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





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


.contents .body .information .latest {}

	.contents .body .information .latest .article {
		border-bottom: 1px solid #d4d5d6;
		padding: 6.99% 0;/* 40px 0 */
	}

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

			.contents .body .information .latest .article dt .dow {font-size: 2rem;}

			.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: block;
				font-family: 'Trade Gothic W01 Light', sans-serif;
				font-size: 1.6rem;
				height: 2.2em;
				line-height: 2.2em;
				margin-top: 4.9%;
				text-align: center;
				width: 13.63em;/* 220px */
			}

		.contents .body .information .latest .article dd {
			line-height: 1.67;
			padding-top: 4.9%;
		}

			.contents .body .information .latest .article dd a {text-decoration: none;}

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


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


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