@charset 'UTF-8';

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

ilm/clayworks/viewpoint/index_pc.css
Ver.201802

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

01. コンテンツリスト
02. 概要
03. 建築探訪

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





/** |01. コンテンツリスト| >> ********************************************************* >> START **/


.contents .body .index {
	background-color: #f4f4f5;
	margin-top: 60px;
	padding: 22px 26px 26px;
}

	.contents .body .index p {font-size: 14px;}

	.contents .body .index ul {
		font-size: 0;
		padding-top: 10px;
	}

		.contents .body .index li {
			display: inline-block;
			font-size: 14px;
			padding-right: 26px;
		}

		.contents .body .index li:last-of-type {padding-right: 0;}

	.contents .body .index * a {
		color: #7f8283;
		display: inline-block;
		position: relative;
		padding-left: 1em;
	}

		.contents .body .index * a::before {
			background: url(/common/img/bdy_ico_link.gif) no-repeat 0 50%;
			background-size: 100% auto;
			content: '';
			display: block;
			height: 12px;
			left: 0;
			margin-top: -6px;
			position: absolute;
			top: 50%;
			width: 8px;
		}


/** |01. コンテンツリスト| << *********************************************************** << END **/





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


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

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

.contents .body .outline .about {
	background-color: #f4f4f5;
	margin-top: 30px;
	padding: 32px;
	width: 760px;
}

	.contents .body .outline .about .photo {
		background: url(/ilm/clayworks/viewpoint/img/pc/otl_img_photo.jpg) no-repeat 0 0;
		float: right;
		height: 220px;
		margin: 0 0 24px 24px;
		width: 286px;
	}

		.contents .body .outline .about .photo img {
			height: 100%;
			visibility: hidden;
			width: 100%;
		}

	.contents .body .outline .about dl {}

		.contents .body .outline .about dt,
		.contents .body .outline .about dd {line-height: 1.88;}

		.contents .body .outline .about dt {font-family: 'UD新ゴ R', sans-serif;}

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


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





/** |03. 建築探訪| >> ***************************************************************** >> START **/


	/** [写真] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .body .feature .photos {
		padding-top: 20px;
		width: 760px;
	}

		.contents .body .feature .photos li {
			float: left;
			width: 370px;
		}

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

			.contents .body .feature .photos li img {
				height: auto;
				width: 370px;
			}


	/** [館内図] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .body .feature .map {
		padding-top: 26px;
		width: 760px;
	}

		.contents .body .feature .map dt {line-height: 1.88;}

		.contents .body .feature .map dd {
			margin: 30px auto 0;
			position: relative;
			width: 448px;
		}

			.contents .body .feature .map dd .image {}

			.contents .body .feature .map dd .icon {
				bottom: 0;
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
			}

				.contents .body .feature .map dd .icon li {
					height: 17px;
					position: absolute;
					width: 17px;
				}

				.contents .body .feature .map dd .icon .no01 {left: 249px; top: 122px;}
				.contents .body .feature .map dd .icon .no02 {left: 210px; top: 168px;}
				.contents .body .feature .map dd .icon .no03 {left: 176px; top: 105px;}
				.contents .body .feature .map dd .icon .no04 {left: 139px; top: 133px;}
				.contents .body .feature .map dd .icon .no05 {left: 160px; top: 79px;}
				.contents .body .feature .map dd .icon .no06 {left: 134px; top: 66px;}
				.contents .body .feature .map dd .icon .no07a {left: 119px; top: 38px;}
				.contents .body .feature .map dd .icon .no07b {left: 102px; top: 88px;}
				.contents .body .feature .map dd .icon .no08 {left: 172px; top: 49px;}
				.contents .body .feature .map dd .icon .no09 {left: 405px; top: 184px;}
				.contents .body .feature .map dd .icon .no10 {left: 267px; top: 181px;}
				.contents .body .feature .map dd .icon .no11 {left: 35px; top: 133px;}

					.contents .body .feature .map dd .icon a {
						display: block;
						height: 100%;
						overflow: hidden;
						text-decoration: none;
						text-indent: 100%;
						white-space: nowrap;
						width: 100%;
					}

					.contents .body .feature .map dd .icon a:focus {outline: none;}

					.contents .body .feature .map dd .icon a:hover {
						background-color: #fff;
						opacity: 0.5;
					}


	/** [施設リスト] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .body .feature .floor {
		font-size: 20px;
		padding-top: 70px;
	}

	.contents .body .feature .list {width: 760px;}

		.contents .body .feature .list li {
			float: left;
			margin-left: 20px;
			padding-top: 40px;
			width: 175px;
		}

		.contents .body .feature .list li:nth-of-type(4n+1) {
			clear: both;
			margin-left: 0;
		}

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

			.contents .body .feature .list a:focus {outline: none;}

				.contents .body .feature .list dl {}

				.contents .body .feature .list dl:hover {opacity: 0.5;}

					.contents .body .feature .list dd {
						margin-top: 18px;
						padding-left: 32px;
						position: relative;
					}

						.contents .body .feature .list dd span {
							background-color: #cc7800;
							border-radius: 3px;
							bottom: 0;
							color: #fff;
							display: inline-block;
							font-size: 13px;
							height: 22px;
							left: 0;
							letter-spacing: -0.06em;
							line-height: 22px;
							margin: auto 0;
							overflow: hidden;
							position: absolute;
							text-align: center;
							top: 0;
							white-space: nowrap;
							width: 22px;
						}


	/** [モーダルウィンドウ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .body .feature .tips {}

		.mfp-bg {background-color: #fff;}

		.tip {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			background-color: #fff;
			border: 1px solid #d2d2d2;
			font-size: 0;
			margin: 40px auto 0;
			padding: 32px 54px;
			position: relative;
			text-align: left;
			width: 462px;
		}

		#no01 {width: 630px;}
		#no02 {width: 558px;}
		#no07 {width: 630px;}
		#no09 {width: 610px;}
		#no11 {width: 610px;}

			.tip .label {
				font-size: 22px;
				line-height: 1.36;
			}

			.tip .photo {
				display: inline-block;
				margin-left: 20px;
				padding-top: 20px;
				vertical-align: top;
			}

			.tip .photo:first-of-type {margin-left: 0;}
			.tip .photo:only-of-type {
				display: block;
				margin: 0 auto;
			}

			#no01 .photo:first-of-type {width: 160px;}
			#no01 .photo:last-of-type {width: 340px;}

			#no09 .photo {width: 240px;}

				.tip .photo dt {text-align: center;}

				.tip .photo dd {
					font-size: 16px;
					line-height: 1.88;
					padding-top: 32px;
				}

			.tip .arrow {
				background-color: #fff;
				bottom: 0;
				height: 42px;
				margin: auto 0;
				position: absolute;
				top: 0;
				width: 42px;
			}

			.tip .prev {left: -20px;}
			.tip .next {right: -20px;}

				.tip .arrow::before {
					background: no-repeat 0 0;
					background-size: 100% 100%;
					border: none;
					content: '';
					cursor: pointer;
					display: block;
					height: 100%;
					margin: 0;
					top: 0;
					width: 100%;
				}

				.tip .prev::before {background-image: url(/common/img/tps_btn_prev.gif);}
				.tip .next::before {background-image: url(/common/img/tps_btn_next.gif);}

				.tip .arrow:hover::before {opacity: 0.5;}

			.tip .close {
				background: url(/common/img/tps_btn_close.gif) no-repeat 0 0;
				background-size: 100% 100%;
				cursor: pointer;
				height: 14px;
				position: absolute;
				right: 14px;
				top: 14px;
				width: 14px;
			}

			.tip .close:hover {opacity: 0.5;}


/** |03. 建築探訪| << ******************************************************************* << END **/