@charset 'UTF-8';

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

article_sp.css
Ver.201810

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

01. 記事ヘッダ
02. 記事本文
03. カルーセル
04. 動画
05. 表
06. 添付情報
07. オプション
08. 申込
09. 関連情報

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





/** |01. 記事ヘッダ| >> *************************************************************** >> START **/


.contents .body .header {}


	/** [記事タイプ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .body .header .type {
		min-height: 3em;
		position: relative;
	}

		.contents .body .header .new::before {
			background: rgba(0, 0, 0, 0.3) url(/en/common/img/bdy_ico_new.png) no-repeat 0 0;
			background-size: 100% 100%;
			border: 1px solid #fff;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			content: '';
			left: 0;
			margin: 3.5% 0 0 3.5%;
			padding-bottom: 8.22%;
			position: absolute;
			top: 0;
			width: 17.13%;/* 98px */
		}


		/* キャプション */
		.contents .body .header .type .caption {
			background-color: #fff;
			bottom: 0;
			font-family: 'Trade Gothic W01 Bold', sans-serif;
			font-size: 1.8rem;
			left: 0;
			padding: 3.5%;
			position: absolute;
		}

		.contents .body .ilm .type .caption {color: #7fd1c7;}
		.contents .body .bunkakan .type .caption {color: #c96e9c;}
		.contents .body .gallery .type .caption {color: #85c2d6;}
		.contents .body .publish .type .caption {color: #0671b8;}
		.contents .body .culture .type .caption {color: #ed7f40;}


	/** [記事ラベル] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .body .header .label {
		padding: 2.48% 0 6.29%;
		position: relative;
	}

		.contents .body .header .title::before {
			background-color: #4aa6c3;
			bottom: 0;
			content: '';
			left: 0;
			padding-top: 0.35%;
			position: absolute;
			width: 7.69%;/* 44px */
		}


		/* ソーシャル */
		.contents .body .header .label .share {
			font-size: 0;
			text-align: right;
			width: 100%;/* 572px */
		}

			.contents .body .header .label .share li {
				display: inline-block;
				width: 9.09%;/* 52px */
			}

				.contents .body .header .label .share a {
					background: no-repeat 0 0;
					background-size: 100% 100%;
					display: block;
					margin-left: auto;
					overflow: hidden;
					padding-bottom: 57.69%;
					text-decoration: none;
					text-indent: 100%;
					width: 69.23%;/* 36px */
				}

				.contents .body .header .label .share .fb {background-image: url(/en/common/img/bdy_ico_facebook.gif);}
				.contents .body .header .label .share .tw {background-image: url(/en/common/img/bdy_ico_twitter.gif);}
				.contents .body .header .label .share .ln {background-image: url(/en/common/img/bdy_ico_line.gif);}
				.contents .body .header .label .share .ml {background-image: url(/en/common/img/bdy_ico_mail.gif);}


		/* タイトル */
		.contents .body .header .label .title {
			font-size: 3rem;
			line-height: 1.2;
			padding: 5.14% 0 1.05%;
		}


		/* 開催期間 */
		.contents .body .header .label .period {
			font-family: 'Trade Gothic W01 Bold', sans-serif;
			font-size: 2rem;
			padding-top: 5.24%;
		}

			.contents .body .header .label .period span {font-size: 1.8rem;}

			.contents .body .header .label .end::after {
				color: #e75400;
				content: 'No longer available.';
				display: block;
				font-family: 'Trade Gothic W01 Light', sans-serif;
				font-size: 2rem;
				padding-top: 0.5em;
			}


/** |01. 記事ヘッダ| << ***************************************************************** << END **/





/** |02. 記事本文| >> ***************************************************************** >> START **/


.contents .body .text {}

	.contents .body .text p {
		line-height: 1.67;
		padding-top: 5.59%;
	}


/** |02. 記事本文| << ******************************************************************* << END **/





/** |03. カルーセル| >> *************************************************************** >> START **/


.contents .body .album {padding-top: 17.48%;}


	/* 写真 */
	.contents .body .album .photos {
		position: relative;
		z-indext: 1;
	}

		.contents .body .album .photos .list {
			margin-bottom: 0;
			padding-bottom: 50%;
		}

			.contents .body .album .photos .list .slick-list {
				bottom: 0;
				height: 100%;
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
				width: 100%;
			}

			.contents .body .album .photos .list .slick-track {height: 100%;}

			.contents .body .album .photos .list li {
				overflow: hidden;
				position: relative;
			}

				.contents .body .album .photos .list .new::before {
					background: rgba(0, 0, 0, 0.3) url(/en/common/img/bdy_ico_new.png) no-repeat 0 0;
					background-size: 100% 100%;
					border: 1px solid #fff;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					content: '';
					left: 0;
					margin: 3.5% 0 0 3.5%;
					padding-bottom: 9.44%;
					position: absolute;
					top: 0;
					width: 19.58%;/* 112px */
				}

				.contents .body .album .photos .list li img {
					height: 100%;
					margin: 0 auto;
					width: auto;

				}

		.contents .body .album .photos .control {
			background: no-repeat 0 0;
			background-size: 100%;
			padding-bottom: 8.39%;
			margin-top: -4.2%;
			position: absolute;
			top: 50%;
			width: 8.39%;/* 48px */
		}

		.contents .body .album .photos .prev {background-image: url(/en/common/img/bdy_btn_prev.png); left: 0;}
		.contents .body .album .photos .next {background-image: url(/en/common/img/bdy_btn_next.png); right: 0;}

		.contents .body .album .photos .slick-dots {
			bottom: 0;
			font-size: 0;
			margin-bottom: -3.5%;
			z-index: 2;
		}

		.contents .body .no-dots .photos .slick-dots {display: none;}

			.contents .body .album .photos .slick-dots li {
				height: auto;
				margin: 0;
				width: 6.64%;/* 38px */
			}

				.contents .body .album .photos .slick-dots li .bar {
					background-color: #7f8283;
					display: block;
					height: 2px;
					margin: 0 auto;
					width: 78.95%;/* 30px */
				}

					.contents .body .album .photos .slick-dots .slick-active .bar {background-color: #4aa6c3;}


	/* キャプション */
	.contents .body .album .captions {padding-top: 8.74%;}

	.contents .body .no-dots .captions {padding-top: 5.24%;}

		.contents .body .album .captions li {
			font-size: 1.8rem;
			line-height: 1.67;
		}

			.contents .body .album .captions  .credit {font-size: 1.4rem;}


/** |03. カルーセル| << ***************************************************************** << END **/





/** |04. 動画| >> ********************************************************************* >> START **/


.contents .body .media {padding-top: 17.48%;}


	/* タイトル */
	.contents .body .media .title {
		border-bottom: 1px solid #d4d5d6;
		border-top: 1px solid #d4d5d6;
		font-size: 3rem;
		line-height: 1.2;
		padding: 2.8% 0;
	}


	/* 動画 */
	.contents .body .media .movie {padding-top: 6.99%;}

		.contents .body .media .movie .screen {
			margin: 0 auto;
			width: 80.07%;/* 458px */
		}

			.contents .body .media .movie .screen .prop {
				padding-bottom: 56.25%;
				position: relative;
				width: 100%;/* 458px */
			}

				.contents .body .media .movie .screen .prop iframe {
					height: 100%;
					left: 0;
					position: absolute;
					top: 0;
					width: 100%;
				}

		.contents .body .media .movie .caption {
			line-height: 1.67;
			padding-top: 6.64%;
		}


/** |04. 動画| << *********************************************************************** << END **/





/** |05. 詳細情報| >> ***************************************************************** >> START **/
 

.contents .body .table {
	margin-top: 4.9%;/*11.19%;*/
	width: 100%;/* 572px */
}

	.contents .body .table th,
	.contents .body .table td {
		line-height: 1.67;
		padding-top: 6.29%;
		vertical-align: top;
	}

	.contents .body .table th {
		text-align: left;
		white-space: nowrap;
	}

	.contents .body .table td {
		padding-left: 2.5em;
		width: 100%;
	}


/** |05. 詳細情報| << ******************************************************************* << END **/





/** |06. 添付情報| >> ***************************************************************** >> START **/


.contents .body .attachment {padding-top: 6.29%;}

	.contents .body .attachment p {
		font-size: 2rem;
		line-height: 2.25;
		padding-top: 4.94%;
	}

		.contents .body .attachment a {}

		.contents .body .attachment .pdf {position: relative;}

			.contents .body .attachment .pdf::after {
				background: url(/en/common/img/bdy_ico_pdf.png) no-repeat 0 0;
				background-size: 100%;
				content: '';
				display: block;
				padding-bottom: 1.98em;
				position: absolute;
				margin: -0.2em -2em 0 0;
				right: 0;
				top: 0;
				width: 1.67em;/* 32px */
			}


/** |06. 添付情報| << ******************************************************************* << END **/





/** |07. オプション| >> *************************************************************** >> START **/


.contents .body .option {padding-top: 17.48%;}


	/* タイトル */
	.contents .body .option .title {
		border-bottom: 1px solid #d4d5d6;
		border-top: 1px solid #d4d5d6;
		font-size: 3rem;
		line-height: 1.2;
		padding: 2.8% 0;
	}


	/* サブタイトル */
	.contents .body .option .subtitle {
		line-height: 1.2;
		padding: 6.29% 0;
	}


	/* 画像 */
	.contents .body .option .image {
		padding-top: 6.29%;
		text-align: center;
	}

	.contents .body .option .subtitle + .image {padding-top: 0;}

		.contents .body .option .image img {width: 80.07%;/* 458px */}

		.contents .body .option .image p {
			line-height: 1.67;
			padding-top: 6.64%;
			text-align: left;
		}


/** |07. オプション| << ***************************************************************** << END **/





/** |08. 申込| >> ********************************************************************* >> START **/


.contents .body .application {
	padding-top: 10.49%;
	text-align: center;
}

	.contents .body .application a {
		background-color: #fff;
		border: 1px solid #d4d5d6;
		box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
		color: #7f8283;
		display: inline-block;
		font-family: 'Trade Gothic W01 Bold', sans-serif;
		margin: 0 auto;
		padding: 4.2% 6.29%;
		text-decoration: none;
	}


/** |08. 申込| << *********************************************************************** << END **/






/** |09. 関連情報| >> ***************************************************************** >> START **/


.contents .body .relation {padding-top: 17.48%;}


	/* タイトル */
	.contents .body .relation .title {
		background-color: #f4f4f5;
		border-left: 2px solid #4aa6c3;
		font-size: 3rem;
		font-family: 'Trade Gothic W01 Bold', sans-serif;
		padding: 3.15% 3.5%;
	}


	/* 関連情報 */
	.contents .body .relation .information {
		padding-top: 6.99%;
		width: 100%;/* 572px */
	}

		.contents .body .relation .information .data {
			float: right;
			font-size: 1.8rem;
			width: 51.05%;/* 292px */
		}

			.contents .body .relation .information .data .type,
			.contents .body .relation .information .data .facilities {font-family: 'Trade Gothic W01 Bold', sans-serif;}

			.contents .body .relation .information .data .facilities {
				border-left: 1px solid;
				padding-left: 0.56em;
			}

			.contents .body .relation .information .data .ilm {border-left-color: #7fd1c7; color: #7fd1c7;}
			.contents .body .relation .information .data .bunkakan {border-left-color: #c96e9c; color: #c96e9c;}
			.contents .body .relation .information .data .gallery {border-left-color: #85c2d6; color: #85c2d6;}
			.contents .body .relation .information .data .publish {border-left-color: #0671b8; color: #0671b8;}
			.contents .body .relation .information .data .culture {border-left-color: #ed7f40; color: #ed7f40;}

			.contents .body .relation .information .data .book,
			.contents .body .relation .information .data .event {padding-top: 5.48%;}

			.contents .body .relation .information .data .book {font-size: 0;}

				.contents .body .relation .information .data .book dt,
				.contents .body .relation .information .data .event dt {
					font-family: 'Trade Gothic W01 Bold', sans-serif;
					font-size: 2rem;
					line-height: 1.5;
				}

					.contents .body .relation .information .data .book dt a,
					.contents .body .relation .information .data .event dt a {color: #7f8283;}

				.contents .body .relation .information .data .book dd,
				.contents .body .relation .information .data .event dd {padding-top: 5.48%;}

				.contents .body .relation .information .data .book dd {
					display: inline-block;
					font-size: 1.8rem;
				}

				.contents .body .relation .information .data .book dd::after {content: ',\00a0';}
				.contents .body .relation .information .data .book dd:last-of-type::after {content: normal;}

				.contents .body .relation .information .data .event dd {font-family: 'Trade Gothic W01 Bold', sans-serif;}

					.contents .body .relation .information .data .event span {font-size: 1.4rem;}

			.contents .body .relation .information .data .language {
				font-size: 0;
				padding-top: 4.11%;
			}

				.contents .body .relation .information .data .language li {
					background-color: #7f8283;
					color: #fff;
					display: inline-block;
					font-size: 1.4rem;
					margin: 3.08% 2.05% 0 0;
					padding: 0.43em 1em;
				}

			.contents .body .relation .information .data .outline {display: none;}


	/* 画像 */
	.contents .body .relation .cover {
		background-color: #f4f4f5;
		float: left;
		padding-bottom: 33.92%;
		position: relative;
		width: 43.71%;/* 250px */
	}

		.contents .body .relation .cover a {
			display: block;
			height: 100%;
			left: 0;
			overflow: hidden;
			position: absolute;
			top: 0;
			width: 100%;
		}

			.contents .body .relation .cover img {
				bottom: 0;
				height: auto;
				left: 0;
				margin: auto;
				max-height: 90.52%;
				position: absolute;
				right: 0;
				top: 0;
				width: auto;
			}

	.contents .body .relation .photo {
		float: left;
		width: 43.71%;/* 250px */
	}


/** |09. 関連情報| << ******************************************************************* << END **/