/*********************************************************************
 投稿一覧設定
*********************************************************************/
.loop-area > *{
 margin-top: 16px;
}

/* 表示切替
====================================================================*/
.posts_per_page{
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 16px;
}
.page-select,.per-select{
 display: flex;
 align-items: center;
 gap: 8px;
}
.page-select .page-all{
 display: inline-block;
 font-size: 2rem;
 font-size: clamp(2rem, 1vw, 2.2rem);
 font-weight: bold;
}
@media screen and (max-width: 768px){
.page-select,.per-select{
 width: 100%;
}
}

/* ループ
====================================================================*/
.loop-area table{
 width: 100%;
 border-top: var(--site-bor-color) solid 1px;
 border-left: var(--site-bor-color) solid 1px;
}
.loop-area th{
 background-color: var(--site-bg-color);
 border-right: var(--site-bor-color) solid 1px;
 border-bottom: var(--site-bor-color) solid 1px;
}
.loop-area tbody tr{
 border-bottom: var(--site-bor-color) solid 1px;
}
.loop-area td{
 padding: 8px;
 vertical-align: middle;
 border-right: var(--site-bor-color) solid 1px;
}
@media screen and (min-width: 769px){
.loop-area th:nth-child(1),.loop-area td:nth-child(1){
 width: 128px;
}
.loop-area th:nth-child(3),.loop-area td:nth-child(3){
 width: 80px;
}
}
@media screen and (max-width: 768px){
.loop-area th{
 display: block;
}
.loop-area th:last-child{
 display: none;
}
.loop-area tbody tr{
 display: grid;
 grid-template-columns: 1fr auto;
}
.loop-area td:nth-child(1){ grid-area: 1 / 1 / 2 / 2; padding: 8px 8px 0;}
.loop-area td:nth-child(2){ grid-area: 2 / 1 / 3 / 2; padding: 0 8px 8px;}
.loop-area td:nth-child(3){ grid-area: 1 / 2 / 3 / 3; display: flex; align-items: center;}
}

/* ラベル */
.loop-area .sort{
 position: relative;
 padding: 8px 16px 8px 8px;
}
.loop-area .sort.asc:after,
.loop-area .sort.desc:after{
 position: absolute;
 content: "";
 top: 50%;
 right: 50%;
 width: 14px;
 height: 12.1px;
 background: var(--site-txt-color);
 transform: translateX(48px) translateY(-50%);
}
.loop-area .sort.asc:after{
 clip-path: polygon(0 0, 100% 0%, 50% 100%);
}
.loop-area .sort.desc:after{
 clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

/* ボタン */
.loop-area td .btn{
 height: 32px;
 line-height: 32px;
 padding: 0 8px;
 border-radius: 4px;
}

/* ページネーション
====================================================================*/
.pagination{
 display: flex;
 align-items: center;
 width: fit-content;
 border: var(--site-bor-color) solid 1px;
 border-radius: 4px;
}
.pagination-item{
 flex: 1;
}
.pagination-item:not(:first-child){
 border-left: var(--site-bor-color) solid 1px;
}
.pagination-item:first-child a:hover,.pagination-item.current:first-child span{
 border-radius: 4px 0 0 4px;
}
.pagination-item:last-child a:hover,.pagination-item.current:last-child span{
 border-radius: 0 4px 4px 0;
}
.pagination-item a,.pagination-item span{
 display: flex;
 justify-content: center;
 align-items: center;
 width: 48px;
 height: 48px;
}
.pagination-item span{
 cursor: default;
}
.pagination-item a:hover,.pagination-item.current span{
 color: #FFF;
 background-color: var(--site-main-color);
}
.pagination-item a{
 position: relative;
}
.pagination-item.first a:before,.pagination-item.first a:after,.pagination-item.prev a:before,.pagination-item.next a:before,.pagination-item.last a:before,.pagination-item.last a:after{
 position: absolute;
 content: "";
 top: 50%;
 width: 12px;
 height: 12px;
 border-top: var(--site-txt-color) solid 2px;
}
.pagination-item.first a:before,.pagination-item.first a:after,.pagination-item.prev a:before{
 border-left: var(--site-txt-color) solid 2px;
 transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.pagination-item.next a:before,.pagination-item.last a:before,.pagination-item.last a:after{
 border-right: var(--site-txt-color) solid 2px;
 transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.pagination-item.prev a:before{
 left: 57.5%;
}
.pagination-item.first a:before,.pagination-item.first a:after{
 left: 47.5%;
}
.pagination-item.first a:after{
 margin-left: 8px;
}
.pagination-item.next a:before{
 left: 42.5%;
}
.pagination-item.last a:before,.pagination-item.last a:after{
 left: 34.5%;
}
.pagination-item.last a:after{
 margin-left: 8px;
}
.pagination-item.first a:hover:before,.pagination-item.first a:hover:after,.pagination-item.prev a:hover:before,.pagination-item.next a:hover:before,.pagination-item.last a:hover:before, .pagination-item.last a:hover:after{
 border-top: #FFF solid 2px;
}
.pagination-item.first a:hover:before,.pagination-item.first a:hover:after,.pagination-item.prev a:hover:before{
 border-left: #FFF solid 2px;
}
.pagination-item.next a:hover:before,.pagination-item.last a:hover:before,.pagination-item.last a:hover:after{
 border-right: #FFF solid 2px;
}