@charset 'UTF-8';

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

article_pc.css
Ver.201809

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

01. 記事ヘッダ
02. 記事本文
03. カルーセル
04. 添付情報

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





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


.contents .body .header {}


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

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

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

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


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

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


		/* 担当者 */
		.contents .body .header .label .staff {
			font-size: 18px;
			padding-top: 16px;
		}


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





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


.contents .body .text {}

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


/** |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 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 .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 .album .captions li {
			font-size: 14px;
			line-height: 1.71;
		}

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


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





/** |04. 添付情報| >> ***************************************************************** >> 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;
			}


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