@charset "UTF-8";


/* ==================================================
		ニュース記事ページ
================================================== */

/********** 記事ヘッダー **********/
.articleHead {
	border-bottom: 2px solid #cccccc;
}

/* 公開日 */
.newsDate {
	width: 100%;
	color: #a0a0a0;
	font-size: 1.1rem;
}

/* カテゴリ */
.newsCat {
	width: 100%;
	font-weight: 500;
}
.newsCat span.separate {
	padding-right: 1rem;
	margin-right: 1rem;
	position: relative;
}
.newsCat span.separate::after{
	content: ' ';
	display: inline-block;
	height: 70%;
	position: absolute;
	width: 1px;
	background-color: #cccccc;
	top: 20%;
	right: 0;
}

/* タイトル */
.newsTtl {
	line-height: 1.3;
	color: #282828;
	font-size: 1.8rem;
	font-weight: 600;
}


@media (min-width: 375px) {
	/* 公開日 */
	.newsDate {
		width: auto;
	}

	/* カテゴリ */
	.newsCat {
		width: auto;
	}
}

@media (min-width: 768px) {
	.articleHead {
		border-bottom-width: 1px;
	}

	/* 公開日 */
	.newsDate {
		font-size: 1.4rem;
	}

	/* カテゴリ */
	.newsCat {
		font-size: 1.8rem;
	}

	/* タイトル */
	.newsTtl {
		font-size: 3rem;
	}
}



/********** 記事本文 **********/
.articleContent {
	font-size: 1.4rem;
	word-break: break-all;
}

/***** 本文装飾 *****/
/* 見出し */
.articleContent h4 {
	line-height: 1.5;
	font-weight: 600;
}

/* テキスト */
.articleContent p {
	margin-bottom: 20px;
}

/* 太字 */
.articleContent b,
.articleContent strong {
	font-weight: 600;
}

/* リンク */
.articleContent a {
	color: #005baa;
}
.articleContent a:hover {
	text-decoration: underline;
}

/* リスト */
.articleContent ul,
.articleContent ol {
	margin-bottom: 20px;
}

/* "・"リスト */
.articleContent .listDisc li {
	padding-left: 1em;
	text-indent: -1em;
}
.articleContent .listDisc li::before {
	content: "・";
}

/* "※"リスト */
.articleContent .listAttention li {
	padding-left: 1em;
	text-indent: -1em;
}
.articleContent .listAttention li::before {
	content: "※";
}

/* 画像 */
.articleContent p img {
	margin: 4px 0;
}

/* 画像横並び */
.articleContent .imgColumn {
	margin-bottom: 24px;
}
.articleContent .imgColumn .imgBox {
	margin-bottom: 20px;
	padding: 4px 0;
}
.articleContent .imgColumn img {
	display: none; /* JSでimgBoxが付与されるまでは非表示 */
}
.articleContent .imgColumn .imgBox img {
	display: block;
	width: 100%;
}

/* Youtube埋め込み動画 */
.articleContent .youtubeBox {
	max-width: 640px;
	width: 100%;
	margin: 0 auto 20px;
}

/* Shortcode "gallery" type="columns" */
.tiled-gallery {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

/* Shortcode "youtube" */
.embed-youtube {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}

.embed-youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Jetpack 「いいね」ボタン */
div.jetpack-likes-widget-wrapper {
	margin-top: 30px;
}


@media (min-width: 768px) {
	.articleContent {
		font-size: 1.6rem;
		line-height: 1.8;
	}


	/***** 本文装飾 *****/
	/* 見出し */
	.articleContent h4 {
		font-size: 1.7rem;
		line-height: 1.8;
	}

	/* テキスト */
	.articleContent p {
		margin-bottom: 30px;
	}

	/* リスト */
	.articleContent ul,
	.articleContent ol {
		margin-bottom: 30px;
	}

	/* 画像 */
	.articleContent p img {
		margin: 8px 0;
	}

	/* 画像横並び */
	.articleContent .imgColumn {
		margin: 0 -8px 36px;
	}
	.articleContent .imgColumn .imgBox {
		-ms-flex: 1 1 0%;
		flex: 1 1 0%;
		margin-bottom: 0;
		padding: 8px;
	}

	/* Youtube埋め込み動画 */
	.articleContent .youtubeBox {
		margin-bottom: 30px;
	}

	/* Shortcode "gallery" type="columns" */
	.tiled-gallery {
		margin-bottom: 30px;
	}

	/* Jetpack 「いいね」ボタン */
	div.jetpack-likes-widget-wrapper {
		margin-top: 50px;
	}
}

@media (min-width: 992px) {
	/* 画像横並び */
	.articleContent .imgColumn {
		margin: 0 -16px 36px;
	}
	.articleContent .imgColumn .imgBox {
		padding: 8px 16px;
	}
}



/********** 記事フッター **********/
.btnLink {
	padding: 0;
	border-color: #cccccc;
	color: #0051a4;
	font-size: 1.4rem;
	font-weight: 500;
	background-color: #ffffff;
	-webkit-transition: .3s;
	transition: .3s;
}
.btnLink:hover {
	border-color: #0051a4;
	color: #ffffff;
	background-color: #0051a4;
}

.btnLink a {
	display: block;
	padding: 10px;
}

/* 使用不可 */
.btnLink.disabled {
	border-color: #cccccc;
	color: #999999;
	background: #cccccc;
	opacity: 1;
}

.btnLink.disabled a {
	pointer-events: none;
}


@media (min-width: 576px) {
	.btnLinkGroup {
		width: 230px;
	}
}