/*************************/
/***********投稿ページ**********/
/*************************/

/*タイトル装飾*/
div.topic-title{
	margin: 0;
	padding: 70px 15px 50px;
	background-color: #eee;

	border: solid 1px #aaa;
	box-shadow: 10px 10px #bbb;

	/*影の次の行への影響リセット*/
	position: relative ;
 	z-index: 0;

	/* webkit系 */
	background: -webkit-gradient(linear,left top,left bottom, from(#eee), to(#fff));
	/* Mozilla系 */
	background: -moz-linear-gradient(top,#eee,#fff);
	/* IE5.5-7 */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee', endColorstr='#fff', GradientType=0);*/
	/* IE8-9 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#fff', GradientType=0)";
	/* IE10 */
	background: -ms-linear-gradient(top,#eee,#fff);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	background: linear-gradient(to bottom, #eee, #fff);
}

div.topic-title .title{
	color: #000000;
	font-size: 32px;
	font-weight: bold;
}

div.topic-title .date{
	margin: 10px;
    	position: absolute;
	bottom: 0;
	font-size: 16px;
	font-weight: normal;
}

/*本文*/
div.topic-content{
	margin: 30px 0 30px;
}

div.topic-content p{
	word-wrap: break-word;
}

div.topic-content h1,
div.topic-content h2,
div.topic-content h3,
div.topic-content h4,
div.topic-content h5,
div.topic-content h6{
	padding: 0 10px;
	color: #000000;
	border-left: solid 10px #666;
	border-bottom: dotted 2px #666;
}

/*************************/
/***********アーカイブ、検索結果のリスト**********/
/*************************/
div.archive{
}

div.archive .archive-frame{
	margin: 10px 0;
	padding: 10px 10px;
	border: 1px solid #777;
	background-color: #fff;
	box-shadow: 5px 5px #ccc;
}

div.archive .title{
	font-size: 18px;
	text-align: left;
}

div.archive .title a{
	font-weight: bold;
}

div.archive .date{
	padding:0 10px;
	font-size: 14px;
	color: #708090;
	font-weight: bold;
}

div.archive .category, div.archive .type{
	padding: 0 10px;
	font-size: 14px;
	color: #708090;
	font-weight: bold;
}

div.archive .excerpt{
	padding: 10px 10px;
	font-size: 16px;
}



/*交互に背景色変更*/
div.color-alter-ac .archive-frame:nth-child(2n+1){
	background-color: #fff;
}
div.color-alter-ac .archive-frame:nth-child(2n){
	background-color: #f5f5f5;
}

/*************************/
/***********トップ最新**********/
/*************************/
/*全体枠*/
.new-header{
}

/*一行枠*/
.new-headline{
}

/*一記事の左枠*/
/*サムネイル*/
.new-thumbnail{
	padding: 0 10px;
	display:table-cell;
	vertical-align: middle;
}
/*記事右枠*/
.new-intro{
	padding: 0 10px;
	display:table-cell;
	vertical-align: middle;
}
/*記事右枠内*/
/*タイトル*/
.new-intro .new-title{
	color: #6699ff; 
	font-weight: bold;
	display: block;
}
/*日付*/
.new-intro .new-date{
	margin: 5px 0 0 ;
	font-size: 14px;
	color: #666;
	display: block;
}
/*カテゴリ*/
.new-intro .new-category{
	margin: 0 0 5px;
	font-size: 14px;
	color: #666;
	display: block;
}

/*概要*/
.new-intro .new-summary{
	display: block;
}
/*リンク*/
a.new-link{
	margin: 10px 0;
	padding: 30px 10px; 
	border: solid 1px #aaa;
	display:table;
	text-decoration: none;
}
a.new-link:hover{
	background-color: #ffffee;
}

/*************************/
/***********一覧グリッドレイアウト**********/
/*************************/
/*グリッド*/
div.grid-layout{
	margin: 10px 0;
	display: grid;
	grid-gap: 2px;
  	grid-template-columns: 1fr;
}


 /*リンクで全体を囲む*/
a.grid-link {
	margin: 3px 0;
	border-bottom: dotted 3px #aaa;
	border: dotted 3px #aaa;
	text-decoration: none;
	display:block;
}

 /* 以下マウスを載せたときのスタイル */
a.grid-link:hover,
a.grid-link:hover span{
	background-color: #ffffee;
}

/*一記事の左枠*/
/*サムネイル*/
.grid-thumbnail{
	padding: 0 10px;
	display:table-cell;
	vertical-align: middle;
}

/*一記事の右側*/
.grid{
	padding: 30px 20px;
	display:table-cell;
 }

/*タイトル*/
.grid-title{
	color: #6699ff; 
	font-weight: bold;
	display:block;
}
/*日付*/
.grid-date
{
	margin: 5px 0 0 ;
	font-size: 14px;
	color: #666;
	display: block;
}
/*カテゴリ*/
.grid-category
{
	margin: 0 0 10px;
	font-size: 14px;
	color: #666;
	display: block;
}
/*概要*/
.grid-summary {
	display: block;
}

/*************************/
/***********グリッドの色を交互に変える**********/
/*************************/
.color-alter:nth-child(2n+1){
  background-color: #fff;
}
.color-alter:nth-child(2n){
  background-color: #f5f5f5;
}


/*************************/
/***********関連記事**********/
/*************************/
.related-title{
	clear:both;
	margin: 20px 0;
	padding: 0 10px;
	color: #000;
	border-left: solid 10px #708090;
	border-bottom: dotted 2px #708090;
	font-weight: bold;
	font-size: 20px;
}
.related-glid{
	margin: 10px 0;
	display: grid;
	grid-gap: 5px;
	grid-template-columns: 1fr 1fr 1fr;
}
.related-glid div.related-unit{
	padding: 5px 10px;
}

.related-glid div.related-unit div{
	font-size: 14px;
	color: #666;
}

/*************************/
/***********人気記事**********/
/*************************/
/*全体枠*/
.favor{
	margin: 10px 0;
}
/*一記事の枠*/
.favor-frame{
	margin: 10px 0;
	padding: 15px 10px; 
	color: #000;
	border: dotted 2px #708090;
	overflow: auto;
}

/*記事の枠内*/
.favor-headline{
	display:table;
	float: left;
}
/*順位*/
.favor-frame .rank{
	font-size: 20px;
	margin: 5px;
	font-weight: bold;
}


/*一記事の左枠*/
/*サムネイル*/
.favor-frame .favor-thumbnail{
	padding: 0 10px;
	display:table-cell;
	vertical-align: middle;
}

/*一記事の右枠*/
.favor-frame .favor-intro{
	padding: 0 10px;
	display:table-cell;
	vertical-align: middle;
}

/*タイトル*/
.favor-title{
	font-size: 20px;
	font-weight: bold;
}

/*カテゴリ*/
.favor-category{
	font-size: 14px;
	color: #666;
}
/*日付*/
.favor-date{
	font-size: 14px;
	color: #666;
}

/*上位の枠内色*/
div.color-alter-fv .favor-frame:nth-of-type(1){
	background-color: #ffffee;
}
div.color-alter-fv .favor-frame:nth-of-type(2){
	background-color: #ffeeee;
}
div.color-alter-fv .favor-frame:nth-of-type(3){
	background-color: #eeffee;
}

/*************************/
/***********サムネイル**********/
/*************************/
/*一記事の左枠*/
/*サムネイル*/

.thumbnail{
	text-align: center;
	vertical-align: middle;
	width: 160px;
	height: 160px;
 	border-style:none;
}
/******************/
/*ボタン */
/******************/
.sns-button{
	margin: 30px 5px;
	vertical-align: middle;
}