@charset 'UTF-8';

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

ilm/about/index_pc.css
Ver.201805

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

01. 概要
02. エリア案内
03. スポット散策

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





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


.contents .body .outline p {
	line-height: 1.88;
	padding-top: 30px;
}

.contents .body .outline p:first-of-type {padding-top: 0;}

.contents .body .outline .symbol {
	padding-top: 64px;
	width: 760px;
}

	.contents .body .outline .symbol .image {
		float: right;
		width: 264px;
	}

		.contents .body .outline .symbol .image img {
			height: auto;
			width: 264px;
		}

	.contents .body .outline .symbol .note {
		float: left;
		width: 456px;
	}

		.contents .body .outline .symbol .note dt {
			font-family: 'Trade Gothic W01 Bold', sans-serif;
			font-size: 22px;
			line-height: 1.25;
		}

		.contents .body .outline .symbol .note dd {
			line-height: 1.88;
			padding-top: 18px;
		}


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





/** |02. エリア案内| >> *************************************************************** >> START **/


	/** [周辺地図] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .body .area .map {
		background: url(/en/ilm/about/img/pc/ar_img_map.jpg) no-repeat 0 0;
		height: 460px;
		margin-top: 20px;
		position: relative;
		width: 760px;
	}

		.contents .body .area .map .image {
			height: 100%;
			visibility: hidden;
			width: 100%;
		}

		.contents .body .area .map .hover {
			height: 360px;
			position: absolute;
			right: 0;
			top: 0;
			width: 474px;
		}

			.contents .body .area .map .hover .grid {
				background: url(/en/ilm/about/img/pc/ar_img_hover.png) no-repeat 0 0;
				height: 360px;
				overflow: hidden;
				width: 474px;
			}

		.contents .body .area .map .list {
			bottom: 0;
			left: 0;
			overflow: hidden;
			position: absolute;
			top: 0;
			width: 280px;
		}

			.contents .body .area .map .list li {
				margin: 20px 0 0 26px;
				height: 20px;
				width: 254px;
			}

			.contents .body .area .map .list li:first-of-type {margin-top: 26px;}

				.contents .body .area .map .list a {
					display: block;
					font-size: 0;
					height: 100%;
					text-decoration: none;
					width: 100%;
				}

				.contents .body .area .map .list a:hover {
					background-color: #fff;
					opacity: 0.5;
				}


	/** [施設紹介] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .body .area .facilities {
		border-top: 1px solid #d4d5d6;
		margin-top: 40px;
	}

		.contents .body .area .facilities li {
			border-bottom: 1px solid #d4d5d6;
			padding: 34px 0;
			width: 760px;
		}

			.contents .body .area .facilities li .photo {
				background: no-repeat 0 0;
				float: left;
				height: 220px;
				width: 284px;
			}

			.contents .body .area .facilities #museum .photo {background-image: url(/en/ilm/about/img/pc/ar_img_facility01.jpg);}
			.contents .body .area .facilities #kiln .photo {background-image: url(/en/ilm/about/img/pc/ar_img_facility02.jpg);}
			.contents .body .area .facilities #terracotta .photo {background-image: url(/en/ilm/about/img/pc/ar_img_facility03.jpg);}
			.contents .body .area .facilities #clayworks .photo {background-image: url(/en/ilm/about/img/pc/ar_img_facility04.jpg);}
			.contents .body .area .facilities #tougaku .photo {background-image: url(/en/ilm/about/img/pc/ar_img_facility05.jpg);}
			.contents .body .area .facilities #ceramicslab .photo {background-image: url(/en/ilm/about/img/pc/ar_img_facility06.jpg);}

				.contents .body .area .facilities li .photo img {
					visibility: hidden;
					height: 220px;
					width: 284px;
				}

			.contents .body .area .facilities li .outline {
				float: right;
				width: 438px;
			}

				.contents .body .area .facilities li .outline .name {
					font-family: 'Trade Gothic W01 Bold', sans-serif;
					font-size: 24px;
					line-height: 1.5;
				}

					.contents .body .area .facilities li .outline .name span {
						font-family: 'Trade Gothic W01 Light', sans-serif;
						font-size: 14px;
						font-weight: normal;
						letter-spacing: -0.06em;
						line-height: 1.7;
					}

				.contents .body .area .facilities li .outline .text {padding-top: 18px;}

					.contents .body .area .facilities li .outline .text .attention {color: #e15a0d;}

				.contents .body .area .facilities li .outline .more {padding-top: 8px;}


/** |02. エリア案内| << ***************************************************************** << END **/





/** |03. スポット散策| >> ************************************************************* >> START **/


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

.contents .body .spot .photo {padding-top: 20px;}

	.contents .body .spot .photo .more {padding-top: 14px;}


/** |03. スポット散策| << *************************************************************** << END **/