@charset "utf-8";

/*　　やぎさわ日記　　*/

#blog .section {
	margin-top:-100px;
	}

#blog .section .frame {
	position:relative;
	padding:50px;
	background:#f5f5f5;
	border-radius:10px 10px 0 0;
	z-index:2;
	}

#blog .section .frame .category {
	overflow: hidden;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	margin:0 0 40px;
	padding:0;
	border-radius:10px;
	}

#blog .section .frame .category li {
	width:calc((100% - 6px) / 4 );
	margin-right:2px;
	text-align: center;
	}

#blog .section .frame .category li:nth-child(4n) {
	margin-right:0;
	}

#blog .section .frame .category li a {
	display:block;
	width:100%;
	height:60px;
	line-height:60px;
	font-size:1em;
	text-align:center;
	color:#839b5c;
	text-decoration:none;
	background-color:#dae1ce;
	}

#blog .section .frame .category li.active a,
.category-dialy #blog .section .frame .category li.dialy a,
.category-announce #blog .section .frame .category li.announce a,
.category-event #blog .section .frame .category li.event a {
	color:#fff;
	background-color:#839b5c;
	pointer-events:none;
	}

#blog .section .frame .category li a:hover {
	color:#fff;
	background-color:#839b5c;
	}


#blog .section h2 {
	font-size:1.6em;
	color:#839b5c;
	line-height:1;
	text-align:center;
	}

#blog .section .list {
	margin:0;
	}

#blog .section .list article {
	border:1px solid #ccc;
	border-radius:14px;
	}

#blog .section .list article a {
	display:block;
	position:relative;
	padding:10px 10px 50px;
	color:#000;
	text-decoration:none;
	}

#blog .section .list article a:after {
	content:'この記事を読む';
	display:block;
	position:absolute;
	left:5px;
	bottom:5px;
	width:calc(100% - 10px);
	height:40px;
	line-height:40px;
	font-size:0.9em;
	text-align:center;
	color:#fff;
	background-color:#ccc;
	border-radius:0 0 10px 10px;
	-webkit-transition: all 0.5s;
 	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
  	transition: all 0.5s;
	}

#blog .section .list article a:hover:after {
	color:#fff;
	background-color:#839b5c;
	}

#blog .section .list article .body {
	padding:10px;
	}

#blog .section .list article .cat {
	padding:5px 0;
	font-size:0.95em;
	font-family:'Poppins', sans-serif;
	color:#839b5c;
	line-height:1;
	}

#blog .section .list article .cat span {
	font-weight:400;
	}

#blog .section .list article .title {
	padding:0;
	font-size:1.05em;
	color:#000;
	line-height:1.7;
	text-align:justify;
	}

#blog .section .list article .date {
	position:relative;
	padding:25px 0 0;
	font-size:0.85em;
	color:#555;
	line-height:1;
	}

#blog .section .list article .date:before {
	content:'';
	position:absolute;
	top:12px;
	left:0;
	width:30px;
	height:1px;
	border-top:1px solid #bbb;
	}

#blog .section .btnArea {
	width:100%;
	margin:60px 0 100px;
	text-align:center;
	}

/*　　詳細ページ　　*/

.single-post .section {
	margin-top:-100px;
	}

.single-post article {
	position:relative;
	margin-bottom:100px;
	padding:50px 60px;
	background:#fff;
	border-radius:10px;
	z-index:2;
	}

.single-post article .header {
	padding-bottom:40px;
	}

.single-post article .header h1 {
	padding-bottom:25px;
	font-size:1.6em;
	font-weight:400;
	line-height:1.5;
	text-align: justify;
	}

.single-post article .header ul {
	list-style:none;
	display:flex;
	margin:0;
	padding:10px 5px;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	}

.single-post article .header li {
	width:50%;
	}

.single-post article .header .cat {
	color:#839b5c;
	text-align:left;
	}

.single-post article .header .cat span {
	font-weight:500;
	}

.single-post article .header .cat:before {
	content:"\f07c";
	margin-right:5px;
	font-family:'Font Awesome 5 Free';
	font-weight:900;
	}

.single-post article .header .date {
	font-family:'Poppins', sans-serif;
	color:#777;
	text-align:right;
	}


.single-post article .main {
	display:flex;
	}

.single-post article .main .contents {
	width:calc(100% - 280px);
	padding-right:40px;
	text-align: justify;
	}

.single-post article .main .contents .event {
	display:none;
	margin-top:30px;
	}

.single-post article .main .contents .event p {
	padding:6px 15px;
	font-weight:400;
	background:#ecf0e7;
	}

.single-post article .main .contents .event dl {
	display:flex;
	flex-wrap:wrap;
	font-size:0.95em;
	border-bottom:1px solid #aaa;
	}

.single-post article .main .contents .event dt {
	width:140px;
	padding:10px;
	color:#839b5c;
	text-align:right;
	border-top:1px solid #aaa;
	}

.single-post article .main .contents .event dd {
	width:calc(100% - 140px);
	padding:10px;
	border-top:1px solid #aaa;
	}

.single-post article .main .aside {
	width:280px;
	}

.single-post article .main .contents .thumb {
	margin-bottom:30px;
	border-radius:0;
	}

@media screen and (max-width: 960px){

#blog .section,
.single-post .section {
	margin-top:-10vw;
	}

#blog .section .frame {
	padding:5vw;
	}

#blog .section .frame .category {
	margin:0 0 4vw;
	}

#blog .section .frame .category li a {
	height:auto;
	padding:18px 5px;
	line-height:1;
	font-size:0.9em;
	}

.single-post article {
	margin-bottom:8vw;
	padding:4vw 5vw 5vw;
	}

.single-post article .header {
	padding-bottom:5vw;
	}

.single-post article .main {
	display:block;
	}

.single-post article .main .contents {
	width:100%;
	margin:0 0 4vw;
	padding:0 0 4vw;
	border-bottom:1px dashed #aaa;
	}

.single-post article .main .aside {
	display:flex;
	width:100%;
	}

.widget {
	margin-bottom:0;
	}

.single-post article .main .aside .widget_recent_entries {
	width:55%;
	}

.single-post article .main .aside .widget_categories {
	width:42%;
	margin-right: 3%;
	}

}

@media screen and (max-width: 560px){

.single-post article .main .contents {
	margin:0 0 6vw;
	padding:0 0 6vw;
	}

.single-post article .main .contents .event dl {
	display:block;
	border-bottom:1px solid #aaa;
	}

.single-post article .main .contents .event dt {
	width:100%;
	padding:1.5vw 1.5vw 0;
	text-align:left;
	}

.single-post article .main .contents .event dd {
	width:100%;
	padding:0 1.5vw 1.5vw 4vw;
	border-top:none;
	}

.single-post article .main .aside {
	display:block;
	width:100%;
	}

.widget {
	margin-bottom:3vw;
	}

.single-post article .main .aside .widget_recent_entries {
	width:100%;
	}

.single-post article .main .aside .widget_categories {
	width:100%;
	margin-right:0;
	}


}