/* 左右のコンテンツ表示関連 */

/* 1.デフォルト */
.l-wrap {
	padding-top: 30px;
	margin-left: auto;
	margin-right: auto;
}
.content{
	padding:10px;
	margin:0 0 16px 0;
}

/* 2.スマホ向け*/
@media(max-width:768px){
	.display-none{
		display:none;
	}
	.relation_article_main .box{
		margin-left:10px !important;
	}
}

/* 3.中サイズ向け*/
@media(min-width:768px){/*768px以上*/
  .display-none-pc{
		display:none;
	}
	.l-wrap{
		display: flex;
		width: calc(100% - 32px);
	}
	.l-aside{
		flex-shrink: 0;
		width: 300px;
		margin-top: 0;
		margin-left: 24px;
	}
}

/* 4.PC向け*/
@media (min-width: 1100px){
  .display-none-pc{
		display:none;
	}
	.l-wrap {
		max-width: 1200px;
	}
	.l-main{
		flex: 1 1 auto;
		width: calc(100% - 300px - 24px);
	}


	.content{
		padding:20px 65px;
		margin:0 0 16px 0;
	}
}


/* メインコンテンツ関連 */
.title {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5em;
    margin-top: 30px;
    margin-bottom:12px;
}
.datetime {
	font-size: 12px;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 10px;
    color: #777;
}
.article_img{
    //margin-bottom: 32px;
    text-align: center;

}
.content h2{
	color: #111;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4em;
    margin-bottom: 16px;
    border-top: solid 1px #111;
    border-bottom: solid 1px #111;
    padding: 16px 0;
}
.content h3{
	color: #111;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4em;
    margin-bottom: 16px;
}
.content p{
	margin-bottom: 32px;
	color: #111;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8em;
}

.content ul{
	margin-bottom: 32px;
	color: #111;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    margin:16px 0 32px;
    padding:0 0 0 16px;
}

.m2_title{
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	padding: 16px 0 16px 10px;
	overflow: hidden;
}



/* 右サイド関連 */
.side-title{
	font-size: 15px;
	line-height: 1;
	margin-bottom: 15px;
	color: #fff;
	background-color: #545454;	/*545454*/
	border-left: 5px solid #008df0;
	padding: 10px;
}





/* 関連記事、読まれている記事BOX関連 */
.box1{
	display: flex;
	margin:0 0 20px 0px;
}
.box1 a:link,a:visited,a:hover,a:active{
	text-decoration:none;
}
.box1_1{
	flex: 1 1 25%;
	position: relative;

}
.box1_2{
	flex: 1 1 75%;
	padding:0 0 0 10px;
}
.box1_1_img{
	margin:0px;
	padding:0px;
}
.box1_2_title{
	font-weight: 700;
    font-size: 14px;
    line-height: 1.5em;
    height: 3em;
    max-height: initial;
	  margin-bottom: 1px;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;


}
.box1_2_datatime{
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: #777;
    font-size: 11px;
}


.box a{
	color: #000 !important;
}
.box a:link{
  color: #000 !important;
}
.box a:visited {
  color: #777777 !important;
}
.box a:hover {
  color: #777777 !important;
}
.box a:active {
  color: #777777 !important;
}


/* ランキング表記 */
.rank {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 11px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background-color: #0094ec;
    color: #fff;
}
.rank1{
    background-color: #dfb768;
}
.rank2 {
    background-color: #b8b6b6;
}
.rank3 {
    background-color: #b47c50;
}

.linear01{
  background: linear-gradient(transparent 80%, #fcd56c 50%);
}






/* SNSシェアボタン用 */

.share_area {
  text-align: center;
  margin: 20px 0 0 0;
}
.share_area ul:before, .share_area ul:after { content: ""; display: table; }
.share_area ul:after { clear: both; }
.share_area ul { list-style-type: none; }
.share_area li {
  float:left;
  margin: 0 2% 0 0;
}
.share_area li a {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  line-height: 35px;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.share_area li:last-child { margin: 0; }

/* はてなブックマーク */
.share_area .hatena_btn a { background: #008fde; }
.share_area .hatena_btn a:hover,
.share_area .hatena_btn a:active { background: #00649c; }
.fa-hatena:before {
  content: "B!";
  font-family: Verdana;
  font-weight: bold;
  font-style: normal;
}

/* Facebook */
.share_area .facebook_btn a { background: #3b579d; }
.share_area .facebook_btn a:hover,
.share_area .facebook_btn a:active{ background: #293d6e; }

/* Twitter */
.share_area .twitter_btn a { background: #55acee; }
.share_area .twitter_btn a:hover,
.share_area .twitter_btn a:active { background: #3c79a7; }

/* LINE */
.share_area .line_btn a { background: #00b900; }
.share_area .line_btn a:hover,
.share_area .line_btn a:active{ background: #008200; }
/* LINEをPCで非表示 */
.share_area .line_btn { display: none; }
/* LINEをSPで表示 */
@media screen and (max-width: 767px){ .share_area .line_btn { display: inline; } }