@charset "utf-8";

/**
 *
 * BAIKAダイアリー: 詳細
 *
 */

/*--------------------------------------------------------------------------
  overwrite スタイルの上書き
--------------------------------------------------------------------------*/


/*----------------------------------------------------------------------
	.content_wrap
----------------------------------------------------------------------*/

.article_head{
	text-align: center;
}
.article_cate span{
	display: inline-block;
	padding: 3px 40px 1px;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: #fe7cab;
	border-radius: 20px;
}
.article_ttl{
	display: inline-block;
	margin: 35px 0 18px;
	padding: 0 5px;
	border-bottom: .8em solid #f6f79d;
	line-height: 1;
}
.article_ttl span{
	display: block;
	margin-bottom: -12px;
	font-size: 30px;
}
.article_data span.date,
.article_data span.tag{
	display: inline-block;
	padding: 2px 12px 0 30px;
	font-weight: bold;
	line-height: 22px;
}
.article_data span.date{
	background: url(../images/detail/ico_time.png) no-repeat 0 .2em;
	background-size: 20px auto;
}
.article_data span.tag{
	background: url(../images/detail/ico_tag.png) no-repeat 0 .2em;
	background-size: 20px auto;
}
.article_data span.tag a{
	color: #2e2b2c;
}

.article_cont{
	margin-top: 38px;
	overflow: hidden;
}
.article_cont .detail-img img{
	display: block;
	margin: 0 auto 30px;
}

@media all and (max-width: 767px){

	.article_cate span{
		padding: 3px 35px 1px;
		font-size: 12px;
	}
	.article_ttl{
		margin: 22px 0 12px;
		padding: 0 1px;
	}
	.article_ttl span{
		margin-bottom: -7px;
		font-size: 18px;
		letter-spacing: -.3px;
	}
	.article_date span{
		background-size: 15px auto;
		font-size: 12px;
	}

	.article_cont{
		margin-top: 23px;
	}
}

/*----------------------------------------------------------------------
	.stt-bnr
----------------------------------------------------------------------*/
.stt-bnr{
	position: relative;
	width: 458px;
	margin: 30px auto 0 auto;
}
.stt-bnr a{
	display: block;
	border-radius: 5px;
	box-shadow: 2px 2px 7px rgba(0,0,0,.09);
	position: relative;
}
.stt-bnr .num,
.stt-bnr .deco{
	position: absolute;
}
.stt-bnr .num{
	top: -24px;
	right: -10px;
}
.stt-bnr .deco01{
	top: -20px;
	left: -2px;
}
.stt-bnr .deco02{
	top: -20px;
	left: -20px;
}
.stt-bnr .deco03{
	top: -11px;
	left: -6px;
}
.stt-bnr .deco04{
	top: -18px;
	left: -8px;
}

@media all and (max-width: 767px){

	.stt-bnr{
		width: 100%;
	}
	.stt-bnr .num,
	.stt-bnr .deco{
		transform: scale(.7);
	}
	.stt-bnr .num{
		right: -20px;
	}
	.stt-bnr .deco01{
		top: -18px;
		left: -16px;
	}
	.stt-bnr .deco02{
		bottom: auto;
		right: auto;
	}
	.stt-bnr .deco03{
		top: -11px;
		left: -6px;
	}
	.stt-bnr .deco04{
		top: -25px;
		left: -17px;
	}
}

/*----------------------------------------------------------------------
	.share-box
----------------------------------------------------------------------*/
.share-box {
	position: relative;
	width: 720px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin: 50px auto 0;
	border: 1px solid #fc79a8;
	background: #fff;
	padding: 30px 40px;
}
.share-box::before,
.share-box::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border: 13px solid #fc79a8;
	position: absolute;
}
.share-box::before {
	border-left-color: transparent;
	border-bottom-color: transparent;
	top: -3px;
	right: -3px;
}
.share-box::after {
	border-top-color: transparent;
	border-right-color: transparent;
	bottom: -3px;
	left: -3px;
}
.share-box dl {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.share-box dt,
.share-box dd {
	display: table-cell;
	vertical-align: middle;
}
.share-box__hdg {
	width: 200px;
	padding-left: 32px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background: url(../images/detail/ico_share.png) no-repeat 0 50%;
	background-size: 17px auto;
	border-right: 1px solid #c5c5c5;
	font-weight: bold;
}
.share-box__btn-wrap {
	display: -ms-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	padding-left: 33px;
}
.share-box__btn {
	border-radius: 4px;
	font-weight: bold;
	color: #fff;
}
.share-box__btn--tw {
	background: #2ca7e0;
}
.share-box__btn--fb {
	background: #27579c;
}
.share-box__btn a {
	display: block;
	text-decoration: none;
	color: inherit;
	padding: 9px 26px 7px;
}
.share-box__btn span {
	padding-left: 25px;
	background: no-repeat 0 50%;
	background-size: auto 14px;
}
.share-box__btn--tw span {
	background-image: url(../images/detail/ico_tw.png);
}
.share-box__btn--fb span {
	background-image: url(../images/detail/ico_fb.png);
}

@media all and (max-width: 767px){
	.share-box {
		width: auto;
		padding: 20px;
	}
	.share-box::before,
	.share-box::after {
		border-width: 10px;
	}
	.share-box dl,
	.share-box dt,
	.share-box dd {
		display: block;
	}
	.share-box__hdg {
		padding: 0;
		width: 150px;
		margin: 0 auto 16px;
		text-align: center;
		border: none;
		font-size: 11px;
		background-size: 11px;
	}
	.share-box__btn-wrap {
		display: block;
		padding: 0;
		margin: 0 -7px -7px;
		text-align: center;
		letter-spacing: -.4em;
	}
	.share-box__btn {
		display: inline-block;
		font-size: 10px;
		width: 139px;
		margin: 0 7px 7px;
		letter-spacing: normal;
	}
	.share-box__btn a {
		padding: 13px 5px 9px;
	}
	.share-box__btn span {
		background-size: auto 13px;
		padding-left: 25px;
	}
}