@charset 'UTF-8';

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

ilm/clayworks/index_pc.css
Ver.201805

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

01. 概要
02. 土の体験教室
03. 展覧会のご案内
04. 一緒に土を楽しもう！

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





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


.contents .body .outline .title {
	background-color: transparent;
	font-size: 24px;
	padding: 30px 0 0;
}

.contents .body .outline p {padding-top: 16px;}

.contents .body .outline .photo {}

.contents .body .outline .photo:last-of-type {padding-top: 24px;}


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





/** |02. 土の体験教室| >> ************************************************************* >> START **/


.contents .body .trial .class {
	float: left;
	padding-top: 20px;
	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;}


/** |02. 土の体験教室| << *************************************************************** << END **/





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


.contents .body .exhibition > p {padding-top: 20px;}

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

	.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;
			float: left;
			margin-top: 4px;
			width: 286px;
		}

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

		.contents .body .exhibition .latest .label {
			float: right;
			width: 438px;
		}

			.contents .body .exhibition .latest .label dt {
				font-family: 'Trade Gothic W01 Bold', sans-serif;
				font-size: 22px;
				line-height: 1.64;
			}

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

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

				.contents .body .exhibition .latest .label dd br {display: none;}

		.contents .body .exhibition .latest .text {
			float: right;
			line-height: 1.88;
			padding-top: 16px;
			width: 438px;
		}


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


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





/** |04. 一緒に土を楽しもう！| >> ***************************************************** >> START **/


.contents .body .enjoy .lets {
	font-family: 'Trade Gothic W01 Bold', sans-serif;
	font-size: 24px;
	line-height: normal;
	padding-top: 0;
	position: relative;
	z-index: 1;
}

	.contents .body .enjoy .lets span {
		background-color: #fff;
		display: inline-block;
		padding-right: 16px;
	}

	.contents .body .enjoy .lets::after {
		background-color: #d4d5d6;
		content: '';
		display: block;
		height: 1px;
		left: 0;
		position: absolute;
		top: 0.6em;
		width: 760px;
		z-index: -1;
	}


	/** [ワークショップのご案内/ご報告] >> ++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .body .enjoy * .header {margin-top: 64px;}

	.contents .body .enjoy .information .header {margin-top: 20px;}

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

	.contents .body .enjoy div > .latest:nth-of-type(odd) {float: right;}

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

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

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

				.contents .body .enjoy * .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 .enjoy * .latest .label {padding-top: 16px;}

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

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

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

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


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


	/** [その他コンテンツ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .body .enjoy .other {
		border-top: 1px solid #d4d5d6;
		margin-top: 64px;
		padding-top: 40px;
		width: 760px;
	}

		.contents .body .enjoy .other li {
			float: left;
			width: 362px;
		}

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

			.contents .body .enjoy .other li img {
				height: auto;
				width: 362px;
			}


/** |04. 一緒に土を楽しもう！| << ******************************************************* << END **/