@charset "UTF-8";

/*======================== BASE SETTING ========================*/
.blog a,
.blog a:link,
.blog a:active,
.blog a:visited{
	color: #D72872;
	text-decoration: none;
}
.blog a:hover{
	color: #F8BBD0;
}
/*======================== SIDE ========================*/
.blog aside > div{
	margin-bottom: 20px;
}
.blog aside a,
.blog aside a:link,
.blog aside a:active,
.blog aside a:visited{
	color: #666;
}
.blog aside a:hover{
	color: #F8BBD0;
	transition: .2s;
}
.blog aside h3{
	text-align: center;
	color: #D72872;
	border-bottom: 3px solid #D72872;
	padding-bottom: .25em;
}
.blog aside ul{
	list-style-type: none;
	padding:0;
}
/* categoryList & archiveList */
.blog aside ul:not(.tagList) li a{
	display: block;
	border-bottom: 1px solid #e7e7e7;
	line-height: 3;
	padding:0 .5em;
	position: relative;
}
.blog aside ul:not(.tagList) li a:after{ /* > マークを表示*/
	content: "\f105";
	font-family: FontAwesome;
	position: absolute;
	right: 10px;
	color: #CCC;
}
/*tagList*/
.blog aside ul.tagList li{
	display: inline-block;
	margin-right: 8px;
	margin-bottom: 8px;
}
.blog aside ul.tagList li a{
	display: inline-block;
	background-color: #FFF;
	border:1px solid #e7e7e7;
	border-radius: 15px;
	line-height: 1;
	padding:10px 15px;
}
/*======================== ARTICLE ========================*/
.blog h2.thisPageTitle{
	margin-bottom: 20px;
}
.blog article{
	position: relative;
	border:1px solid #CCC;
	margin-bottom: 40px;
}
/*---- 編集ボタン ----*/
.blog article a.post-edit-link{
	position: absolute;
	top:0;
	right: 0;
	display: block;
	padding:10px;
	background-color: rgba(228,42,120,.5);
	color: #FFF;
}

/*---- 記事タイトル ----*/
.blog article h2{
	margin-bottom: 0;
}

/*---- メタ情報 ----*/
.blog article .meta{
	overflow:hidden;
	background-color: #EEE;
	font-size: 80%;
	padding:10px 20px;
}
.blog article .meta *{
	margin:0;
	padding:0;
}
.blog article .meta .date{ /*日付*/
	float: right;
}
.blog article .meta .category{ /*カテゴリー*/
	float: left;
}
.blog article .meta .category li{
	list-style-type: none;
}
.blog article .meta .tag{ /*タグ*/
	float: left;
}
.blog article .meta a{
	display: inline-block;
	background-color: #FFF;
	line-height: 100%;
	border-radius: 3px;
	margin-right: 10px;
	padding:5px;
}

/*本文ラッピング(the_content自動出力される.section)*/
.blog article .section{
	padding:20px 0;
}
/*抜粋ラッピング*/
.blog article .excerpt{
	padding:20px;
}

/*---- 記事一覧のアイキャッチ画像 ----*/
.blog article figure.postthumb{
	text-align: center;
}
.blog article figure.postthumb img{
	max-width: 100%;
	height: auto;
}

/*---- 本文内のスタイル ----*/
/*リンク*/
.blog article section a,
.blog article section a:link,
.blog article section a:active,
.blog article section a:visited{
	text-decoration: underline;
}
.blog article section a:hover{
	text-decoration: none;
}
/*画像*/
.blog article section img{
	max-width: 100%;
	height: auto;
}
/*大見出し*/
.blog article section h3{
	font-weight: bold;
	line-height: 130%;
	border-bottom:5px solid #D72872;
	padding-top: 1em;
	padding-bottom: .4em;
	color: #D72872;
}
/*小見出し*/
.blog article section h4{
	background-color: #f5f5f5;
	font-weight: bold;
	border-left:10px solid #D72872;
	padding-left: 10px;
	line-height: 150%;
	padding:.75em;
}
/*小々見出し*/
.blog article section h5{
	font-weight: bold;
	color: #D72872;
	line-height: 150%;
	border-left: 3px solid #D72872;
	padding:.5em .75em;
}
.blog article section h3,
.blog article section h4,
.blog article section h5{
	margin-top: 0;
	margin-bottom: 20px;
}
/*段落*/
.blog article section p{
	margin-bottom: 1em;
}
/*リスト*/
.blog article section ul,
.blog article section ol{
	padding-left: 1.75em;
}
/*定義リスト*/
.blog article section dl{
	padding: 1em;
	border: 1px solid #e7e7e7;
}
.blog article section dl dt{
	margin-bottom: .5em;
}
.blog article section dl dd{
	margin-left: 1em;
	margin-bottom: 1em;
}
.blog article section dl *:last-child{
	margin-bottom: 0;
}
/*引用*/
.blog article section blockquote{
	font-size: 1em;
	border: 1px solid #CCC;
	background-color: #DEF;
	padding:15px;
}
.blog article section blockquote h3{
	padding-left:15px;
	padding-right:15px;
	margin-left: -15px;
	margin-right: -15px;
}
.blog article section blockquote h4{
	background-color: #FFF;
}
.blog article section blockquote > ul,
.blog article section blockquote > ol{
	padding-left: 1em;
}
.blog article section blockquote > *:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
}
/*テーブル*/
.blog article section table{
	margin-bottom: 1em;
}
.blog article section td,
.blog article section th{
	border:1px solid #CCC;
	padding: .5em;
}
.blog article section th{
	background-color: #EEE;
}
.blog article section table em{
	color: #D72872;
	font-weight: bold;
	font-style: normal;
}
/*脚注記法*/
.blog article section .footnote{
	font-size: .9em;
	border-top: 1px solid #CCC;
	padding-top: 10px;
}

/*---- 続きを読むボタン ----*/
.blog article section a.more-link,
.blog article section a.more-link:link,
.blog article section a.more-link:active,
.blog article section a.more-link:visited{
	display: block;
	background-color: #D72872;
	color: #FFF;
	font-size: 1.2em;
	text-align: center;
	margin-top:20px;
	padding:10px;
	text-decoration: none;
}
.blog article section a.more-link:hover{
	transition: 0.2s;
	opacity:0.5;
}

/*---- 分割された個別記事(<!--nextpage-->使用時)のページネーション ----*/
.blog article section .postpage{
	text-align: center;
	padding:20px;
}
.blog article section .postpage > span,
.blog article section .postpage a{
	display: inline-block;
	line-height: 1;
	padding:10px;
}
.blog article section .postpage > span{
	background-color:#e7e7e7;
}
.blog article section .postpage a{
	background-color: #D72872;
	color: #FFF;
}
.blog article section .postpage a:hover{
	background-color: #F8BBD0;
	transition: .2s;
}
/*======================== SHORTCODE ========================*/
.blog article section .app-dl-btn a{
	text-decoration: none;
	display: inline-block;
}
.blog article section .app-dl-btn a:hover{
	opacity: .5;
	transition: .2s;
}
/*======================== EMBED ========================*/
/*サイトの埋め込み*/
.blog article section iframe.wp-embedded-content{
	width: 100%;
}
/*はてなブログ埋め込み*/
.blog article section iframe[src*="hatena"]{
	height:184px;/*デフォルトでiframeからはみ出るのを修正*/
}
/*youtube埋め込み*/
.blog article section iframe[src*="youtube"]{
	width: 100%;
}
/*soundcloud埋め込み*/
.blog article section iframe[src*="soundcloud"]{
	max-width: 100%;
}
/*twitter埋め込み*/
.blog article section iframe[id^="twitter-widget"]{
}
/*instagram埋め込み*/
.blog article section iframe[id^="instagram-embed"]{
}

/* OGPブログカード (ogpb)
---------------------------------------------------------- */
.ogpb{
	line-height: 120%;
	border: 1px solid #CCC;
	border-radius: 3px;
	margin-bottom: 1em;
}
.ogpb a,
.ogpb a span{
	display: block;
	color: #333;
	background-color: #FFF;
	text-decoration: none !important;
}
.ogpb a:hover{
	opacity: .5;
	transition: .1s;
}
.ogpb a span.ogpb-img{
	text-align: center;
}
.ogpb a span.ogpb-img img{
	max-width: 100%;
	height: auto;
	margin:0;
}
.ogpb a span.ogpb-sitename{
	font-weight: bold;
	line-height: 16px;
}
.ogpb a span.ogpb-sitename img,
.ogpb a span.ogpb-title img{ /*favicon*/
	display: inline-block;
	margin-right: .5em;
}
.ogpb a span.ogpb-title{
	color: #D72872;
	font-weight: bold;
}
.ogpb a span.ogpb-desc{
	font-size: .8em;
}
.ogpb a span.ogpb-url{
	color: #CCC;
	font:.8em/100% Arial, Helvetica, sans-serif;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ogpb a:hover span.ogpb-title,
.ogpb a:hover span.ogpb-url{
	text-decoration: underline !important;
}
@media (min-width: 541px){
	.ogpb a{
		overflow:hidden;
		padding: 1em;
	}
	.ogpb a span.ogpb-sitename{
		margin-bottom: .5em;
	}
	.ogpb a span.ogpb-desc{
		margin-top: .5em;
	}
	.ogpb a span.ogpb-img{
		float: right;
		width: 25%;
		margin-left: 2%;
	}
	.ogpb a span.ogpb-url{
		margin-top: .5em;
	}
}
@media (max-width: 540px){
	.ogpb a span:not(.ogpb-img){
		padding-left:10px;
		padding-right:10px;
	}
	.ogpb a span.ogpb-img{
		margin-bottom: .5em;
	}
	.ogpb a span.ogpb-sitename,
	.ogpb a span.ogpb-title{
		padding-top: 10px;
	}
	.ogpb a span.ogpb-sitename + span.ogpb-title{
		padding-top: 0;
		margin-top: .5em;
	}
	.ogpb a span.ogpb-img + span.ogpb-sitename{
		padding-top: 0;
	}
	.ogpb a span.ogpb-desc{
		margin-top: .5em;
	}
	.ogpb a span.ogpb-url{
		margin-top: .5em;
		padding-bottom: 10px;
	}
}

/* OLS商品埋め込み（デジランドから流用）
---------------------------------------------------------- */
.olsWidget{
	display: inline-block;
	overflow: hidden;
	background-color: #eee;
	border-radius: 4px;
	margin-bottom: 1em;
	padding: 10px;
	max-width: 290px;
}
.olsWidget img.itemImg{
	display: block;
	float: left;
	width: 120px;
	height: auto;
	border:1px solid #CCC;
	border-radius: 4px;
	margin-bottom: 4px;
	margin-right: 10px;
}
.olsWidget a{
	display: block;
	width: 140px;
	overflow:hidden;
}
.olsWidget small{
	display: block;
	line-height: 1.2;
	margin-top: 4px;
}
@media (min-width: 541px){
	.olsWidget{
		margin-left: 20px;
	}
}
@media (max-width: 540px){
}

/*======================== COMMENT ========================*/
#commentarea{
	margin-bottom: 20px;
}
#commentarea h3{
	margin-top: 20px;
	margin-bottom: 20px;
}

/*---- コメントリスト ----*/
#commentarea ol{
	list-style-type: none;
}
ol.commets-list{
	margin: 0;
	padding:0;
}
ol.commets-list > li:first-of-type{
	border-top: 4px solid #EEE;
}
ol.commets-list > li{
	border-bottom: 4px solid #EEE;
}
ol.commets-list .comment-body{
	padding: 20px;
}
ol.commets-list .comment-body .comment-author{
	float: left;
	font-size: 1em;
}
ol.commets-list .comment-body .comment-author cite{
	font-style: normal;
}
ol.commets-list .comment-body .comment-meta{
	float: right;
}
ol.commets-list .comment-body > p{
	clear: both;
}
ol.commets-list .comment-body .reply{
	overflow: hidden;
}
ol.commets-list .comment-body .reply a.comment-reply-link{
	display: inline-block;
	float: right;
	background-color: #EEE;
	padding:5px 10px;
}
input.submit:hover{
	transition: 0.2s;
	opacity:0.5;
}
/*返信コメント(入れ子リスト)*/
ol.children{
	margin: 0;
	padding:0;
}
ol.children li{
	border-top: 1px dashed #EEE;
}

/*---- コメントフォーム ----*/
#respond .require{
	color: #D72872;
}
#commentform{
	background-color: #CCC;
	padding: 20px;
}
#commentform label{
	display: block;
	margin-top: 10px;
}
#commentform input,
#commentform textarea{
	width: 100%;
	border:0;
	background-color: #FFF;
	color: #333;
}
#commentform input#submit{
	background-color: #666;
	color: #FFF;
	font-weight: bold;
	padding: 10px;	
}

/*======================== PAGENATION ========================*/
nav.pagination-list{
	text-align: center;
}
nav.pagination-list .pagination li a{
	color: #D72872;
}
nav.pagination-list .pagination li.active span{
	background-color: #D72872;
	border-color: #D72872;
}

/*======================== MEDIA QUERY ========================*/
@media (min-width: 541px) {
	/*==== アーカイブ・個別記事ページ共通 ====*/
	/*記事タイトル*/
	.blog article h2{
		padding:20px;
	}
	/*本文余白設定*/
	.blog article section .section > *:not(h2):not(h3):not(div),
	.blog article section .section > .ogpb,
	.blog article section .section > .app-dl-btn,
	.blog article section .footnote{
		margin-right:20px;
		margin-left:20px;
	}
	.blog article section .section > iframe{
		margin-right:0 !important;
		margin-left:0 !important;
		padding-right:20px !important;
		padding-left:20px !important;
	}
	/*見出し*/
	.blog article section h3{
		font-size: 1.75em;
		padding-left:20px;
		padding-right:20px;
	}
	.blog article section h4{ font-size: 1.25em; }
	.blog article section h5{ font-size: 1.1em; }
}
@media (max-width: 540px) {
	/*==== アーカイブ・個別記事ページ共通 ====*/
	/*記事タイトル*/
	.blog article h2{
		font-size: 1.2em;
		padding:10px;
	}
	/*メタ情報*/
	.blog article .meta{
		padding-left: 10px;
		padding-right: 10px;
	}
	/*本文余白設定*/
	.blog article section .section > *:not(h2):not(h3):not(div){
		margin-right:10px;
		margin-left:10px;
	}
	.blog article section .section > iframe{
		margin-right:0 !important;
		margin-left:0 !important;
		padding-right:10px !important;
		padding-left:10px !important;
	}
	/*見出し*/
	.blog article section h3{ font-size: 1.25em; }
	.blog article section h4{ font-size: 1em; }
	.blog article section h5{ font-size: 1em; }
	
	/*==== 個別記事ページ用 ====*/
	.blog.single article{
		border:none;
	}
	/*記事タイトル*/
	.blog.single article section h2{
		padding: 0 0 10px 0;
	}
	/*本文余白設定*/
	.blog.single article section .section > *:not(h2):not(h3):not(div){
		margin-right:0;
		margin-left:0;
	}
	.blog.single article section .section > iframe{
		margin-right:0 !important;
		margin-left:0 !important;
		padding-right:0 !important;
		padding-left:0 !important;
	}
}