@charset 'UTF-8';

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

ilm/clayworks/viewpoint/index_sp.css
Ver.201805

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

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

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





/** |01. 共通設定| >> ***************************************************************** >> START **/





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


.contents .body .index {
	background-color: #f4f4f5;
	margin-top: 11.19%;/* 64px */
	padding: 6.99% 6.64%;/* 40px 38px */
}

	.contents .body .index p {font-size: 2rem;}

	.contents .body .index ul {/* 496px */
		font-size: 0;
	}

		.contents .body .index li {
			display: inline-block;
			font-size: 2rem;
			padding: 4.84% 9.27% 0 0;/* 24px 46px 0 0 */
		}

		.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(/en/common/img/bdy_ico_link.gif) no-repeat 0 0;
			background-size: auto 100%;
			content: '';
			display: block;
			height: 0.8em;
			left: 0;
			position: absolute;
			top: 0;
			width: 0.8em;
		}


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





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


.contents .body .outline .title {
	background-color: transparent;
	font-size: 2.4rem;
	line-height: 1.67;
	padding: 0;
}

.contents .body .outline p {
	padding-top: 6.99%;/* 40px */
	line-height: 1.67;
}

.contents .body .outline .about {
	background-color: #f4f4f5;
	margin-top: 7.69%;/* 44px */
	padding: 7.69%;/* 44px */
}

	.contents .body .outline .about dl {padding-top: 9.79%;/* 56px */}

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

		.contents .body .outline .about dt {font-family: 'Trade Gothic W01 Bold', sans-serif;}

		.contents .body .outline .about dd {padding-top: 6.29%;/* 36px */}


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





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


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

	.contents .body .feature .photos {}

		.contents .body .feature .photos li {padding-top: 6.99%;/* 40px */}


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

	.contents .body .feature .map {padding-top: 7.69%;/* 44px */}

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

		.contents .body .feature .map dd {
			margin: 7.69% auto 0;/* 44px auto 0 */
			width: 100%;/* 572px */
		}

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

			.contents .body .feature .map dd .icon {display: none;}


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

	.contents .body .feature .floor {
		font-size: 2.2rem;
		padding-top: 9.79%;/* 56px */
	}

	.contents .body .feature .floor:first-of-type {padding-top: 13.99%;/* 80px */}

	.contents .body .feature .list {width: 100%;/* 572px */}

		.contents .body .feature .list li {
			float: left;
			margin-left: 3.32%;/* 20px */
			padding-top: 5.24%;/* 30px */
			width: 31.12%;/* 178px */
		}

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

			.contents .body .feature .list a {
				color: inherit;
				display: block;
				width: 100%;/* 178px */
				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 {
						font-size: 1.8rem;
						margin-top: 13.48%;/* 24px */
						padding-left: 1.8em;
						position: relative;
					}

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


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

	.contents .body .feature .tips {}

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

		.mfp-container {padding: 0;}

		.tip {
			background-color: #fff;
			border: 1px solid #d2d2d2;
			font-size: 0;
			margin: 6.99% auto 0;/* 40px auto 0 */
			padding: 6.29% 0;/* 36px 0 */
			position: relative;
			text-align: center;
			width: 89.38%;/* 572px */
		}

		.contents .body .feature .tips .tip {width: 100%;}

			.tip .label {
				font-size: 2.6rem;
				line-height: 1.2;
				margin: 0 auto;
				text-align: left;
				width: 69.93%;/* 400px */
			}

			#no01 .label {width: 88.11%;/* 504px */}
			#no02 .label {width: 78.32%;/* 448px */}
			#no07 .label {width: 87.06%;/* 498px */}
			#no09 .label {width: 85.66%;/* 490px */}
			#no11 .label {width: 85.66%;/* 490px */}

			.tip .photo {
				margin: 0 auto;
				padding-top: 3.5%;/* 20px */
				vertical-align: top;
				width: 69.93%;/* 400px */
			}

			#no01 .photo {display: inline-block;}
			#no01 .photo:first-of-type {width: 27.27%;/* 156px */}
			#no01 .photo:last-of-type {
				margin-left: 3.15%;/* 18px */
				width: 57.69%;/* 330px */
			}

			#no02 .photo {width: 78.32%;/* 448px */}
			#no07 .photo {width: 87.06%;/* 498px */}

			#no09 .photo {
				display: inline-block;
				margin-left: 1.75%;/* 10px */
				width: 41.96%;/* 240px */
			}

			#no09 .photo:first-of-type {margin-left: 0;}

			#no11 .photo {width: 85.66%;/* 490px */}

				#no02 .photo dt,
				#no07 .photo dt,
				#no09 .photo dt,
				#no11 .photo dt {width: 100%;}

				.tip .photo:only-of-type dt {
					margin: 0 auto;
					width: 65%;/* 260px */
				}

				.tip .photo dd {
					font-size: 2rem;
					line-height: 1.8;
					padding-top: 1.2em;
					text-align: left;
				}

			.tip .arrow {
				background-color: #fff;
				bottom: 0;
				margin: auto 0;
				height: 0;
				padding-top: 10.84%;/* 62px */
				position: absolute;
				top: 0;
				width: 10.84%;/* 62px */
			}

			.tip .prev {
				left: 0;
				margin-left: -5.59%;/* 32px */
			}
			.tip .next {
				margin-right: -5.59%;/* 32px */
				right: 0;
			}

				.tip .arrow::before {
					background: no-repeat 0 0;
					background-size: 100% 100%;
					border: none;
					bottom: 0;
					content: '';
					cursor: pointer;
					display: block;
					left: 0;
					margin: 0;
					position: absolute;
					right: 0;
					top: 0;
				}

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

			.tip .close {
				background: url(/en/common/img/tps_btn_close.gif) no-repeat 0 0;
				background-size: 100% 100%;
				height: 0;
				margin: 2.45% 2.45% 0 0;/* 14px 14px 0 0 */
				padding-top: 4.2%;/* 24px */
				position: absolute;
				right: 0;
				top: 0;
				width: 4.2%;/* 24px */
			}


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