@charset "utf-8";
body, 
main, 
main > section{ overflow: visible;}
section > .column-inner > .wrap-flexR.between { align-items: flex-start;}
@media screen and (max-width: 950px) {
section > .column-inner > .wrap-flexR.between { display: block; padding: 0 2%;}
}

/*-------------
 #post-list
---------------*/
#post-list { width: calc(100% - 250px); margin-top: 10px;}
#post-list .item { display: block; border-bottom: solid 1px #aaa; position: relative;}
#post-list .item:first-child {border-top: solid 1px #aaa;}
#post-list .item > a { display: flex; flex-flow: row; align-items:flex-start; justify-content:space-between; padding: 70px 10px 80px;}
#post-list .item > a span{ width: 300px; height: 200px; display: flex; flex-direction: row; justify-content: center; align-content: center; align-items: center; border-radius: 16px; overflow: hidden; background: #555; object-fit: cover;}
#post-list .item > a span img{ width: 100%; height: 100%; object-fit: cover;}
#post-list .item > a p{ flex:1; font-size:22px; font-weight: 400; line-height: 1.7em; margin-left: 30px; margin-bottom: 60px;}
#post-list .item > a:hover p{ color: var(--color1);}
#post-list .item > a:hover span img{ opacity: 0.7;}
/**/
#post-list .item > div { width: calc(100% - 330px); position: absolute; right: -10px; bottom: 70px;}
#post-list .item > div .itemCategory { margin-bottom: 10px;}
#post-list .item > div .itemCategory span { color: #777; padding-right: 20px; font-size: 13px; line-height: 20px;}
#post-list .item > div .itemCategory a { font-size: 13px; position: relative; color:#999; line-height: 20px; vertical-align: middle; margin: 0 10px 10px 0;}
#post-list .item > div .itemCategory a::before{ width: 100%; height: 3px; content: ""; position: absolute; left: 0; bottom: -3px;; background: #aaa;}
#post-list .item > div .itemCategory a:hover { color: var(--color1);}
#post-list .item > div .itemCategory a:hover::before{ background: #333;}
#post-list .item > div p { display: flex; flex-direction: row; flex-wrap: wrap;}
#post-list .item > div p a { font-size: 12px; padding: 4px 8px; border: solid 1px #ccc; color: #777; line-height: 1em; margin: 0 5px 5px 0; border-radius: 4px;}
#post-list .item > div p a:hover { color: #fff; background: var(--color1); border: solid 1px var(--color1);}

@media screen and (max-width: 1100px) {
#post-list .item > a p{ margin: 0px 0 0 30px; line-height: 1.6em;}
}
@media screen and (max-width: 950px) {
#post-list { width: 100%; margin: 0 0 80px;}
#post-list .item > a { padding: 30px 10px 10px;}
#post-list .item > a span{ width: 30%; height: auto; align-items:center;}
#post-list .item > a p{ margin: -5px 0 0 30px; line-height: 1.5em;}
/**/
#post-list .item > div { width: calc(70% - 35px); margin-left: calc(30% + 35px); position: relative; right: auto; bottom: auto; display: flex; flex-direction: row; align-items: center; margin-bottom: 30px;}
#post-list .item > div .itemCategory { margin:0 5px 0 0; font-size: 11px; line-height: 20px; word-break: keep-all;}
#post-list .item > div .itemCategory * { display: inline-block; word-break: keep-all;}
#post-list .item > div .itemCategory span { font-size: 11px; line-height: 20px; padding-right: 10px; letter-spacing: 0; margin-bottom: 8px;}
#post-list .item > div .itemCategory a { font-size: 11px;}
#post-list .item > div .itemCategory a::before{ height: 1px;  bottom: -1px;}
#post-list .item > div p{ align-items: center; margin-top: 4px;}
#post-list .item > div p a { font-size: 10px; padding: 2px 4px; border: solid 1px #ddd; color: #777; margin: 2px; border-radius: 2px;}
}

@media screen and (max-width: 650px) {
#post-list .item { width: 90%; margin: 0 5% 50px; border: none; background: #fff; border-radius: 16px; box-shadow: 0 6px 16px rgba(0,0,0,.2);}
#post-list .item > a { display: block; padding: 0 0 30px;}
#post-list .item > a span{ width: 100%; height: auto; display: block; border-radius: 16px 16px 0 0;}
#post-list .item > a span img{ height:auto;}
#post-list .item > a p{ display: block; width: 90%; font-size:20px; line-height: 1.6em; margin: 10px 5% 0;}
#post-list .item > a:hover p{ text-decoration:none;}
#post-list .item > a:hover span img{ opacity:1;}
/**/
#post-list .item > div { width: 100%; display: block; margin: 0; padding: 5px 5% 20px;}
#post-list .item > div a {pointer-events: none !important;}
#post-list .item > div .itemCategory { width: 100%; margin:0 0 5px; line-height: 1.2em;}
#post-list .item > div .itemCategory * { display: inline-block; word-break: keep-all;}
#post-list .item > div .itemCategory span { font-size: 11px; line-height: 1.2em;; padding-right: 10px; letter-spacing: 0;}
#post-list .item > div .itemCategory a::before{ height: 1px;  bottom: -1px;}
#post-list .item > div p{ align-items: center; margin-top: 0;}
#post-list .item > div p a { margin:0 4px 4px 0;}
}

/*-----*/
.pager{ display: flex; flex-direction: row; justify-content: center; margin-top: 40px;}
.pager ul { display: flex; flex-direction: row; align-items: center;}
.pager ul li { width: 50px; display: block; margin: 0 5px;}
.pager ul li > * { display: block; line-height: 44px; text-align: center;  border-radius: 4px; }
.pager ul li span{ border: solid 1px var(--color1); background: var(--color1); color: #fff;}
.pager ul li span.prev{ border: solid 1px #ccc; background: #f0f0f0; color: #ccc;}
.pager ul li a{ border: solid 1px #aaa; color: #777;}
.pager ul li a:hover{ border: solid 1px #000; color: #fff; background: var(--color1-border);}
.pager ul li a.prev, 
.pager ul li a.next{}
@media screen and (max-width: 650px) {
.pager ul li { width: 40px;}
.pager ul li > * { border-radius: 2px; }

}
/*-------------
 #post-list-aside
---------------*/
#post-list-aside{ width: 200px; position: sticky; top: 10px; right: 0;}
#post-list-aside .tag_ttl{ font-size: 12px; margin-top: 20px;}
#post-list-aside .tag { display: flex; flex-direction: row; flex-wrap: wrap; margin:0px 0 20px;}
#post-list-aside .tag li{ display: block; margin: 0 5px 7px 0;}
#post-list-aside .tag li a{ display: block; line-height: 1.2em;; font-size: 12px; padding: 6px 3px; border: solid 1px #eee; background: #eee; color: #444; border-radius: 4px; font-weight: 300;}
#post-list-aside .tag li a:hover{ background: var(--color1); border: solid 1px var(--color1); color: #fff;}
#post-list-aside > p a{ display: block; margin-bottom: 10px;}
#post-list-aside > p a:hover{ opacity: 0.7;}
@media screen and (max-width: 950px) {
#post-list-aside{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; position: relative; top: auto; right:auto;}
#post-list-aside .tag { margin-left: 20px; flex: 1;}
#post-list-aside > p { display: flex; width: 100%; flex-wrap: wrap; }
#post-list-aside > p a { width: 30%; margin: 0 3% 15px 0;}
#post-list-aside > p a img{width: 100%; height: auto; max-height: 200px;}
}
@media screen and (max-width: 750px) {
#post-list-aside{ display: flex; flex-direction: column; align-content: center; align-items: center;}
#post-list-aside .tag_ttl{ fwidth: 100%; justify-content: center;}
#post-list-aside .tag{ width: 100%; justify-content: center;}
#post-list-aside > p { justify-content: space-between;}
#post-list-aside > p a { width: 48%; display: block; margin: 0; max-height: 200px;}
}

/*-------------
 #post-list-common
---------------*/
#post-list-common{ padding:30px 40px 40px; border: solid 6px #e5e5e5; border-radius: 22px; margin: 70px 0 50px;}
@media screen and (min-width: 751px) {
#post-list-common .post-list5{ width: 46%;}
}
@media screen and (max-width: 750px) {
#post-list-common{ flex-direction: column; padding: 20px 2% 0; border: solid 4px #bbb;}
}