@charset 'UTF-8';

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

article_sp.css
Ver.201809

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

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

************************************************************************************** |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-top: 5.14%;
		}


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

			.contents .body .header .label .date span {font-size: 2rem;}


		/* 担当者 */
		.contents .body .header .label .staff {
			font-size: 2.4rem;
			padding-top: 5.24%;
		}


/** |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 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 .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 .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 .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 */
			}


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