@charset 'UTF-8';

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

article_pc.css
Ver.201810

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

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

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





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


.contents .body .header {}


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

	.contents .body .header .type {
		height: 549px;
		overflow: hidden;
		position: relative;
		width: 1080px;
	}

		.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: 92px 44px;
			border: 1px solid #fff;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			content: '';
			height: 44px;
			left: 20px;
			position: absolute;
			top: 20px;
			width: 92px;
		}

		.contents .body .header .type img {
			height: 100%;
			width: auto;
		}


		/* キャプション */
		.contents .body .header .type .caption {
			background-color: #fff;
			bottom: 0;
			font-family: 'Trade Gothic W01 Bold', sans-serif;
			font-size: 18px;
			left: 0;
			padding: 20px;
			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: 30px 0 34px;
		position: relative;
	}

		.contents .body .header .label::before {
			background-color: #4aa6c3;
			bottom: 0;
			content: '';
			height: 2px;
			left: 0;
			position: absolute;
			width: 44px;
		}


		/* ソーシャル */
		.contents .body .header .label .share {
			font-size: 0;
			position: absolute;
			right: 0;
			top: 32px;
		}

			.contents .body .header .label .share li {
				display: inline-block;
				padding-left: 10px;
			}

				.contents .body .header .label .share a {
					background: no-repeat 50% 50%;
					background-size: 30px 25px;
					display: block;
					height: 25px;
					overflow: hidden;
					text-indent: 100%;
					width: 30px;
				}

				.contents .body .header .label .share a:hover {opacity: 0.6;}

				.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: 28px;
			line-height: 1.29;
			padding-bottom: 8px;
			width: 600px;
		}


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

			.contents .body .header .label .period span {font-size: 16px;}

			.contents .body .header .label .end::after {
				color: #e75400;
				content: 'No longer available.';
				font-family: 'Trade Gothic W01 Light', sans-serif;
				font-size: 14px;
				margin-left: 1.6em;
			}


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





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


.contents .body .text {}

	.contents .body .text p {
		line-height: 1.88;
		padding-top: 32px;
	}


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





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


.contents .body .album {padding-top: 58px;}


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

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

			.contents .body .album .photos .list li {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;
					border: 1px solid #fff;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					content: '';
					height: 54px;
					left: 20px;
					position: absolute;
					top: 20px;
					width: 112px;
				}

				.contents .body .album .photos .list li img {
					height: 380px;
					margin: 0 auto;
					width: auto;
				}

		.contents .body .album .photos .control {
			background: no-repeat 0 0;
			background-size: 40px;
			height: 40px;
			margin-top: -20px;
			position: absolute;
			top: 50%;
			width: 40px;
		}

		.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 .control:hover {
			cursor: pointer;
			background-color: rgba(255, 255, 255, 0.5);
		}

		.contents .body .album .photos .slick-dots {
			bottom: -22px;
			font-size: 0;
			z-index: 2;
		}

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

			.contents .body .album .photos .slick-dots li {
				height: auto;
				margin: 0 4px;
				width: auto;
			}

				.contents .body .album .photos .slick-dots li .bar {
					background-color: #7f8283;
					display: block;
					height: 2px;
					width: 30px;
				}

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


	/* キャプション */
	.contents .body .album .captions {padding-top: 36px;}
	.contents .body .no-dots .captions {padding-top: 14px;}

		.contents .body .album .captions li {
			font-size: 14px;
			line-height: 1.71;
		}

			.contents .body .album .captions  .credit {font-size: 12px;}


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





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


.contents .body .media {padding-top: 60px;}


	/* タイトル */
	.contents .body .media .title {
		border-bottom: 1px solid #d4d5d6;
		border-top: 1px solid #d4d5d6;
		font-size: 24px;
		line-height: 1.5;
		padding: 14px 0;
	}


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

		.contents .body .media .movie .screen {
			float: left;
			width: 380px;
			margin-top: 6px;
		}

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

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

		.contents .body .media .movie .caption {
			float: right;
			line-height: 1.88;
			width: 342px;
		}


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





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


.contents .body .table {
	margin-top: 38px;
	width: 760px;
}

	.contents .body .table th,
	.contents .body .table td {
		line-height: 1.88;
		vertical-align: top;
		padding-top: 10px;
	}

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

	.contents .body .table td {
		padding-left: 48px;
		width: 100%;
	}


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





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


.contents .body .attachment {padding-top: 24px;}

	.contents .body .attachment p {
		line-height: 1.88;
		padding-top: 6px;
	}

		.contents .body .attachment a {}

		.contents .body .attachment .pdf {
			position: relative;
			padding-right: 36px;
		}

			.contents .body .attachment .pdf::after {
				background: url(/en/common/img/bdy_ico_pdf.png) no-repeat 0 0;
				background-size: 24px 29px;
				content: '';
				display: block;
				height: 29px;
				position: absolute;
				right: 0;
				top: -6px;
				width: 24px;
			}


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





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


.contents .body .option {padding-top: 60px;}


	/* タイトル */
	.contents .body .option .title {
		border-bottom: 1px solid #d4d5d6;
		border-top: 1px solid #d4d5d6;
		font-size: 24px;
		line-height: 1.5;
		padding: 14px 0;
	}


	/* サブタイトル */
	.contents .body .option .subtitle {
		font-size: 20px;
		line-height: 1.2;
		padding: 22px 0 16px;
	}


	/* 画像 */
	.contents .body .option .image {
		padding-top: 16px;
		width: 760px;
	}

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

		.contents .body .option .image img {
			float: left;
			height: auto;
			margin: 6px 36px 18px 0;
			width: 380px;
		}

		.contents .body .option .image p {
			line-height: 1.88;
			padding-top: 12px;
		}

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


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





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


.contents .body .application {padding: 18px 0 36px;}

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

	.contents .body .application a:hover {
		background-color: #d4d5d6;
		box-shadow: none;
		color: #fff;
	}


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






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


.contents .body .relation {
	padding-top: 60px;
	width: 760px;
}


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


	/* 関連情報 */
	.contents .body .relation .information {
		padding-top: 36px;
		width: 760px;
	}

		.contents .body .relation .information .data {
			float: right;
			font-size: 14px;
			width: 440px;
		}

			.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: 8px;
			}

			.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: 10px;}

			.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: 24px;
					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: 10px;}

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

				.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;
					font-size: 18px;
				}

					.contents .body .relation .information .data .event span {font-size: 16px;}

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

				.contents .body .relation .information .data .language li {
					background-color: #7f8283;
					color: #fff;
					display: inline-block;
					font-size: 14px;
					margin: 6px 6px 0 0;
					padding: 8px 12px 6px;
				}

			.contents .body .relation .information .data .outline {
				line-height: 2.14;
				padding-top: 10px;
			}


	/* 画像 */
	.contents .body .relation .cover {
		background-color: #f4f4f5;
		float: left;
		height: 218px;
		width: 284px;
	}

		.contents .body .relation .cover a {
			display: block;
			height: 100%;
			overflow: hidden;
			position: relative;
			width: 100%;
		}

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

	.contents .body .relation .photo {
		float: left;
		height: 218px;
		overflow: hidden;
		width: 284px;
	}

		.contents .body .relation .photo img {
			height: auto;
			width: 284px;
		}


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