@charset 'UTF-8';

/* â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– 

	ブログ用css

â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â–  */



/* ================================================================================

	PC・SP共通部分

================================================================================ */

.blog_wrap table {
	width: auto !important;
}
.blog_wrap table td {
	border: 1px solid;
	padding: 8px;
	width: auto !important;
	vertical-align: middle;
}

.aligncenter {
	display: block;
	margin: 0 auto;
}

.alignleft {
	float: none;
}

.alignright {
	float: none;
}

.embed-youtube iframe,
.blog_wrap iframe {
	width: 100%;
}


/* 次の記事・前の記事 */
.pull-left {
	float: left;
}
.pull-right {
	float: right;
}




/* ================================================================================

	カテゴリアイコン	※カテゴリごとの色変更は「.cate_投稿カテゴリスラッグ名」

================================================================================ */
.blog_icon {
	color: #242424;
	margin-right: 8px;
	font-family: 'Fjalla One', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
}




/* ================================================================================

	タグアイコン

================================================================================ */
.blog_tag a {
	background-color: #333333;
	color: #ffffff;
	font-family: 'Fjalla One', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
}

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.blog_tag {
		padding: 8px 0;
	}
	.blog_tag ul li {
		display: inline-block;
		margin: 0 6px 6px 0;
	}
	.blog_tag ul li a {
		display: block;
		font-size: 14px;
		padding: 0.3em 0.6em;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.blog_tag {
		padding: 2vw 0;
	}
	.blog_tag ul li {
		display: inline-block;
		margin: 0 2vw 2vw 0;
	}
	.blog_tag ul li a {
		display: block;
		font-size: 3.3vw;
		padding: 0.3em 0.6em;
	}
}




/* ================================================================================

	いいねボタン

================================================================================ */
.blog_iine {
	margin: 24px 0 0 0;
}

/* いいねボタンのボーダーカラー */
.blog_iine > div {
	border-color: #cccccc;
}




/* ================================================================================

	ページネーション

================================================================================ */

/* 整列位置 (左・真ん中・右) */
.wp-pagenavi {
	clear: both;
	text-align: right;
}


/* ページ色 */
.wp-pagenavi a,
.wp-pagenavi span {
		display: inline-block;
		background-color: #FFF;
		color: #ffffff;
		font-size: 13px;
		border: none;
		padding: 14px 18px 15px;
		margin: 0 2px 4px;
		white-space: nowrap;
		border-radius: 3px;
		text-align: center;
		text-decoration: none;
		line-height: 1;
		vertical-align: top;
		transition-property: all;
		transition-duration: 0.3s;
		transition-timing-function: ease-in-out;
		transition-delay: 0s;
		color: #737373;
}

/* 現在のページ色 */
.wp-pagenavi span.current {
		background-color:#bdada2;
		color:#FFF;
}

/* ページ以外のリンク色 */
.wp-pagenavi span.extend,
.wp-pagenavi span.pages {
		color:
		#313131;
		background-color:
		#fff;
		border: 1px solid
		#A6A6A6;
}

/* ホバー色 */
.wp-pagenavi a:hover {
	opacity: 1;
	background-color: #FFF;
	color:#9c7d64;
}



/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.wp-pagenavi {
		margin: 40px 1vw;
	}

	/* 次の記事・前の記事 */
	.prevnext-nav {
		margin: 24px auto;
	}
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.wp-pagenavi_wrap {
		padding: 0 4vw;
	}

	.wp-pagenavi {
		margin: 4vw auto;
	}

	/* 次の記事・前の記事 */
	.prevnext-nav {
		margin: 4vw auto;
	}
}




/* ================================================================================

	ブログ

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	/* 月別アーカイブ・タグページタイトル */
	.category_title {
		margin-bottom: 40px;
		font-size: 32px;
		text-align: center;
	}


	/* ブログレイアウト */
	.blog_wrap {
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
	}
	.blog_wrap > ul > li {
		background-color: #ffffff;
		margin-bottom: 60px;
		padding: 48px;
	}
	.blog_wrap > ul > li:last-of-type {
		margin-bottom: 0;
	}


	/* 日付 */
	.blog_title_date {
		font-size: 18px;
		margin-bottom: 8px;
		font-family: 'Fjalla One', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
	}

	/* タイトル */
	.blog_title_link {
		font-size: 28px;
		margin-bottom: 24px;
		line-height: 1.3;
	}


	/* 記事の内容：pタグ */
	.blog_wrap p {
		overflow: hidden;
	}

	/* 記事の内容：画像 */
	.blog_wrap img {
		max-width: 100%;
		height: auto;
		margin: 16px 0;
		display: block;
	}
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {

	/* 月別アーカイブ・タグページタイトル */
	.category_title {
		margin-bottom: 8vw;
		font-size: 5.6vw;
		text-align: center;
	}


	/* ブログレイアウト */
	.blog_wrap > ul > li {
		background-color: #ffffff;
		margin-bottom: 8vw;
		padding: 6vw;
	}
	.blog_wrap > ul > li:last-of-type {
		margin-bottom: 0;
	}


	/* 日付 */
	.blog_title_date {
		font-size: 3.3vw;
		margin-bottom: 1vw;
		font-family: 'Fjalla One', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
	}

	/* タイトル */
	.blog_title_link {
		font-size: 5vw;
		margin-bottom: 1em;
		line-height: 1.3;
	}


	/* 記事の内容：画像 */
	.blog_wrap img {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 1em auto;
	}

	/* 記事の内容：iframe */
	.blog_wrap iframe {
		max-width: 100%;
		width: 100%;
		margin: 4vw auto;
	}
}




/* ================================================================================

	最近の投稿・アーカイブ・カテゴリ

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	.blog_function_wrap {
		position: relative;
	}
	.blog_function_wrap_inner {
		padding: 40px 0 0 0;
	}
	.blog_function_wrap_inner > ul {
		overflow: auto;
		width: 1000px;
		padding: 0 30px;
		margin: 0 auto;
	}
	.blog_function_wrap_inner > ul > li a {
		font-size: 16px;
	}

	/* カテゴリを表示しない場合 */
	.blog_function_wrap_inner > ul > li:nth-of-type(1) {
		width: 50%;
		padding: 0 30px 16px;
		float: left;
	}
	.blog_function_wrap_inner > ul > li:nth-of-type(2) {
		width: 50%;
		padding: 0 30px 16px;
		float: left;
	}

	/* ★カテゴリを表示する場合
		page-〇〇〇.phpとshingle-blog.phpにあるカテゴリ部分の
		コメントアウトを外して、下記cssに差し替えてください。
	----------------------------------------------- */
	/* 
	.blog_function_wrap_inner > ul > li:nth-of-type(1) {
		width: 44%;
		padding: 0 20px 16px;
		float: left;
	}
	.blog_function_wrap_inner > ul > li:nth-of-type(2) {
		width: 28%;
		padding: 0 20px 16px;
		float: left;
	}
	.blog_function_wrap_inner > ul > li:nth-of-type(3) {
		width: 28%;
		padding: 0 20px 16px;
		float: left;
	}
	*/

	.blog_function_wrap_inner > ul > li > ul {
		width: 100%;
		max-height: 210px;
		height: 100%;
		overflow: auto;
		text-align: center;
	}
	.blog_function_wrap_inner > ul > li > ul {
		width: 100%;
		max-height: 210px;
		height: 100%;
		overflow: auto;
		text-align: center;
		padding: 0 8px;
	}
	.blog_function_wrap_inner > ul > li > ul > li {
		font-size: 16px;
		line-height: 40px;
	}
	.blog_function_wrap_inner h2 {
		text-align: center;
		font-size: 24px;
		font-weight: 300;
		border-bottom: 1px solid;
		margin: 8px auto 24px;
	}
	.blog_function_wrap_inner .recent_title_text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		width: 76%;
		display: block;
		float: left;
		text-align: left;
	}
	.blog_function_wrap_inner .recent_title_date {
		font-size: 14px;
		width: 24%;
		display: block;
		float: left;
		text-align: right;
	}
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {

	.blog_function_wrap {
		position: relative;
	}
	.blog_function_wrap_inner {
		padding: 8vw 0 0 0;
	}
	.blog_function_wrap_inner > ul {
		overflow: auto;
	}
	.blog_function_wrap_inner > ul > li > ul {
		width: 100%;
		max-height: 44vw;
		height: 100%;
		overflow: auto;
		text-align: center;
		padding: 0 2vw;
		margin-bottom: 12vw;
	}
	.blog_function_wrap_inner > ul > li > ul > li {
		line-height: 2.5;
	}
	.blog_function_wrap_inner h2 {
		text-align: center;
		font-size: 5vw;
		border-bottom: 1px solid;
		margin: 4vw auto;
		font-weight: 300;
	}
	.blog_function_wrap_inner .recent_title_text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		width: 62%;
		display: block;
		float: left;
		text-align: left;
	}
	.blog_function_wrap_inner .recent_title_date {
		width: 38%;
		display: block;
		float: left;
		text-align: right;
	}
}







/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

	月刊ハーツ通信

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	.blog_wrap3 {
		position: relative;
		width: 1100px;
		margin: 0 0 0 -50px;
	}
	.blog_wrap3 ul {
		overflow: hidden;
		margin: 0 -25px -25px 0;
	}
	.blog_wrap3 > ul > li {
		float: left;
		width: 350px;
		margin: 0 25px 25px 0;
	}
	.blog_wrap3 > ul > li > a {
		display: block;
		background-color: #a68d68;
		color: #ffffff;
	}


	/* カテゴリアイコン */
	.blog3_icon {
		position: relative;
		height: 0;
	}
	.blog3_icon span {
		position: relative;
		display: inline-block;
		background-color: #ffffff;
		color: #242424;
		font-family: 'Fjalla One', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		transform: translateY(16px);
		-webkit-transform: translateY(16px);
		-ms-transform: translateY(16px);
		padding: 0 0.5em;
		z-index: 1;
	}


	/* サムネイル画像 */
	.blog3_thumb img {
		width: 100%;
		height: 270px;
		object-fit: cover;
		font-family: 'object-fit: cover;'; /* IE対策 */
	}


	/* 投稿記事見出し */
	.blog3_title {
		padding: 8px 16px;
		display: block;
		font-size: 16px;
		font-weight: 300;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {

	.blog_wrap3 {
		position: relative;
		margin: 0 auto;
	}
	.blog_wrap3 > ul {
	}
	.blog_wrap3 > ul > li {
		position: relative;
		margin: 0 0 10vw 0;
		padding: 0;
	}
	.blog_wrap3 > ul > li > a {
		display: block;
		background-color: #a68d68;
		color: #ffffff;
	}


	/* カテゴリアイコン */
	.blog3_icon {
		position: relative;
		height: 0;
	}
	.blog3_icon span {
		position: relative;
		display: inline-block;
		background-color: #ffffff;
		color: #242424;
		font-family: 'Fjalla One', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		transform: translateY(4vw);
		-webkit-transform: translateY(4vw);
		-ms-transform: translateY(4vw);
		padding: 0 0.5em;
		z-index: 1;
	}


	/* サムネイル画像 */
	.blog3_thumb img {
		max-width: 100%;
		width: 100%;
		height: 60vw;
		object-fit: cover;
		font-family: 'object-fit: cover;';
	}


	/* 投稿記事見出し */
	.blog3_title {
		padding: 2vw 3vw;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		font-size: 4vw;
		font-weight: 300;
	}

}





/* ================================================================================

	月刊ハーツ通信 バックナンバー

================================================================================ */

.select-wrap select {
	width: 100%;
	outline: none;
	text-indent: 0.01px;
	text-overflow: '';
	background: #ffffff;
	vertical-align: middle;
	font-size: inherit;
	color: inherit;
	height: 40px;
	padding: 8px 40px 8px 12px;
	border: 1px solid #ddd;
	color: #828c9a;
	border-radius: 3px;
}

.select-wrap select option {
	background-color: #fff;
	color: #333;
}

.select-wrap select::-ms-expand {
	display: none;
}

.select-wrap select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #828c9a;
}

.select-wrap.select-primary:before {
	color: #fff;
}

.select-wrap.select-primary > select {
	background: #0084B4;
	color: #fff;
	border-color: #0084B4;
}

.select-wrap.select-primary > select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #fff;
}

.select-wrap.select-inverse:before {
	color: #fff;
}

.select-wrap.select-inverse > select {
	color: #fff;
	border-color: #fff;
}

.select-wrap.select-inverse > select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #fff;
}


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	.blog_function_wrap_inner > ul > li.heartz_magazine {
		width: 50%;
		padding: 0 30px 16px;
		float: none;
		margin: 0 auto;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {

	.select-wrap select {
		width: 100%;
	}

}





/* ================================================================================

	月刊ハーツ通信 詳細ページ

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	/* PDFはこちら */
	.link_pdf {
		border-bottom: 1px solid;
		padding: 0 0 1.2em 0;
		margin: 0 0 1.2em 0;
		line-height: 1;
	}
	.link_pdf a {
		display: inline-block;
		font-size: 16px;
		letter-spacing: 0.1em;
		background-color: #242424;
		color: #ffffff;
		padding: 1em 2em;
		text-indent: 0.1em;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {

	/* PDFはこちら */
	.link_pdf {
		border-bottom: 1px solid;
		padding: 0 0 1.2em 0;
		margin: 0 0 1.2em 0;
		line-height: 1;
	}
	.link_pdf a {
		display: inline-block;
		font-size: 4vw;
		letter-spacing: 0.1em;
		background-color: #242424;
		color: #ffffff;
		padding: 1em 2em;
		text-indent: 0.1em;
	}

}