/* 記事一覧ページ専用CSSファイル */

:root{
    --link-text-color-blue: rgb(58, 158, 158);
}

/* 不具合修正 */
.wp-custom-css-ec4e93fe {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
}


/* 記事間の下余白 */
.posts-block .post{
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.16) !important;
    padding-bottom: 24px !important; */
    margin-bottom: 16px !important;
}

/* サムネ画像 */
.posts-block img {
    /* imgはインライン要素だとベースラインによる下部の隙間が生じるため、
    figure内に隙間なく収めるためblock要素にする */
    display: block;

    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    opacity:1;

    /* ホバー時のアクション所要時間 */
    transition:
        transform 0.4s ease,
        opacity 0.4s ease,
        filter 0.4s ease;
}
.posts-block figure{
    /* 黄金比 */
    aspect-ratio: 1.618 / 1;
    border: 1px solid var(--line-black-color) !important;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 25px 20px -20px;
    transition:box-shadow 0.3s ease;
}
/* 記事タイトル */
.posts-block h2{
    font-size: 1.12em !important;
    font-weight: 600;
    line-height: 1.8;
    margin: 6px 0 7px !important;
}
/* 、ホバー時文字色変更時間 */
.posts-block h2 a{
    transition:color 0.4s ease;
}
/* 記事作成・更新日時 */
.posts-block .updateDay,
.posts-block .postDay{
    font-size: 12px;
    font-weight: 400;
    margin-top: 6px !important;
    padding-left: 22px !important;
}

.posts-block .updateDay::before,
.posts-block .postDay::before{
	top: calc(50% - 9px);
	width: 16px;
	height: 16px;
}
/* カテゴリー */
.posts-block .taxonomy-category a{
    text-decoration: none;
    padding: 4px 7px;
    /* background: rgb(245, 245, 245); */
    font-size: 0.96em;
}
.posts-block .taxonomy-category::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    position: relative;
    top: 3px;
    margin-right: 6px;
    background: url("/wp-content/themes/atsu-portfolio-theme/assets/images/icons/folder-simple-light.svg")
        center / contain no-repeat;
    opacity: 0.72;
}


/* ページネーション */
/* 共通 */
.wp-block-query-pagination{
    margin-top: 64px !important;
    gap: 10px !important;
    align-items: center !important;
}
.wp-block-query-pagination .pagination-current{
    font-size: 2em;
    font-weight: 400;
    color: #333;
    border-bottom: 1px solid var(--line-black-color);
    margin-left: 12px;
    line-height: 1.36;
    position: relative;
    bottom: 1px;
}
.wp-block-query-pagination .pagination-separator{
    font-size: 1.4em;
    font-weight: 200;
    position: relative;
    bottom: 2px;
}
.wp-block-query-pagination .pagination-total{
    font-size: 1.2em;
    font-weight: 400;
    margin-right: 12px;
}
.wp-block-query-pagination .page-numbers:not(:first-child){
    margin-left: 8px !important;
}
/* デフォルトの文字は非表示 */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.pagination-first,
.pagination-last {
    font-size: 0;
    padding: 10px;
    border:1px solid #888;
    border-radius: 30px;
    opacity: 0.56;
    transition:opacity 0.4s ease;
}

/* 各アイコンサイズ */
.wp-block-query-pagination-previous::before,
.pagination-first::before,
.wp-block-query-pagination-next::after,
.pagination-last::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
}
/* 前へ・最初へ */
.wp-block-query-pagination-previous::before{
    background: url("/wp-content/themes/atsu-portfolio-theme/assets/images/icons/caret-right-light.svg")
        center / contain no-repeat;
    transform: rotate(180deg);
}
.pagination-first::before{
    background: url("/wp-content/themes/atsu-portfolio-theme/assets/images/icons/caret-line-right-light.svg")
        center / contain no-repeat;
    transform: rotate(180deg);
}

/* 次へ・最後へ */
.wp-block-query-pagination-next::after{
    background: url("/wp-content/themes/atsu-portfolio-theme/assets/images/icons/caret-right-light.svg")
        center / contain no-repeat;
}
.pagination-last::after {
    background: url("/wp-content/themes/atsu-portfolio-theme/assets/images/icons/caret-line-right-light.svg")
        center / contain no-repeat;
}

/* ホバー後の挙動 */
.posts-block .post:has(figure:hover, h2:hover) h2 a {
    text-decoration: underline;
    color: var(--link-text-color-blue) !important;
}
.posts-block .post:has(figure:hover, h2:hover) figure {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 25px 20px -20px;
}
.posts-block .post:has(figure:hover, h2:hover) img {
    transform: scale(1.1);
    opacity: 0.8;
    filter: brightness(1.064);
}
.posts-block .taxonomy-category a:hover{
    color: var(--link-text-color-blue);
    text-decoration: underline;
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.pagination-first:hover,
.pagination-last:hover{
    opacity: 1;
}


/* タブレット */
@media (min-width: 768px){
    .posts-block h2{
        font-size: 1em !important;
    }
}

/* PC */
@media (min-width: 1313px){
    .archive main,
    .blog main{
        padding: 200px 0px 320px !important;
    }
    .posts-block h2{
        font-size: 1.12em !important;
    }
}