/* pr-tool.css */

.pr-tool-archive {
    margin: 0;
    padding: 115px 20px 164px;
}

.pr-tool-archive__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 19.6px;
    margin: 0 0 50.5px;
}

.pr-tool-archive__heading-icon {
    display: block;
    width: 49.4px;
    height: 74.508px;
}

.pr-tool-archive__heading-text {
    margin: 0;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 43px;
    letter-spacing: 1.92px;
}

.pr-tool-archive__grid {
    max-width: 976px;
    margin: 0 auto;
}

.pr-tool-archive__grid .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60.87px 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pr-tool-card__thumbnail {
    margin: 0 0 9px;
}

.pr-tool-card__thumbnail img {
    display: block;
    width: 217px;
    height: 308px;
    object-fit: cover;
}

/* サムネイル未設定時の代わりのプレースホルダー */
.pr-tool-card__thumbnail:not(:has(img)) {
    width: 217px;
    height: 308px;
    background: #d9d9d9;
    margin: 0 0 9px;
}

.pr-tool-card__title-group {
    margin: 0 0 2px;
}

.pr-tool-card__title {
    margin: 0;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 28.4px;
}

.pr-tool-card__date {
    margin: 0;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 28.4px;
}

.pr-tool-card__button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 0;
    gap: 6px;
    width: 164.007px;
    height: 39.917px;
    box-sizing: border-box;
    border: 1px solid #212121;
    border-radius: 48px;
    background: #17bae5;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.18px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pr-tool-card__button:hover {
    background: #fff;
    color: #17bae5;
}

/* アイコンをmask+currentColorにしておくことで、ホバー時にテキストと
   一緒に色が反転しても（背景白+アイコン白で見えなくなる、を防ぐ）追従する */
.pr-tool-card__button-icon {
    display: block;
    width: 16.787px;
    height: 18.451px;
    background-color: currentColor;
    -webkit-mask-image: url('../../images/icon-pdf.svg');
    mask-image: url('../../images/icon-pdf.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.pr-tool-archive__empty {
    margin: 0;
    padding: 40px 0;
    text-align: center;
    font-size: 18px;
}

.pr-tool-archive__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 41px;
}

.pr-tool-archive__pagination .wp-block-query-pagination-numbers {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pr-tool-archive__pagination .page-numbers {
    display: inline-block;
    padding: 0;
    color: #a9a9a9;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 27.593px;
    font-weight: 700;
    text-decoration: none;
}

.pr-tool-archive__pagination .page-numbers.current {
    position: relative;
    color: #212121;
}

.pr-tool-archive__pagination .page-numbers.current::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    background: #212121;
}

.pr-tool-archive__pagination .pr-tool-archive__pagination-next {
    position: relative;
    display: block;
    width: 11.037px;
    height: 22.074px;
    font-size: 0;
}

.pr-tool-archive__pagination .pr-tool-archive__pagination-next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22.074px;
    height: 11.037px;
    background-color: #212121;
    -webkit-mask-image: url('../../images/icon-pagination-arrow.svg');
    mask-image: url('../../images/icon-pagination-arrow.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    transform: translate(-50%, -50%) rotate(-90deg);
}

.pr-tool-archive__pagination .pr-tool-archive__pagination-prev {
    position: relative;
    display: block;
    width: 11.037px;
    height: 22.074px;
    font-size: 0;
}

.pr-tool-archive__pagination .pr-tool-archive__pagination-prev::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22.074px;
    height: 11.037px;
    background-color: #212121;
    -webkit-mask-image: url('../../images/icon-pagination-arrow.svg');
    mask-image: url('../../images/icon-pagination-arrow.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* ボタン自体の見た目（角丸ピル・枠線・ホバー等）はcomponents/button.cssの
   .pill-button（＋.pill-button--dark）を共用する。ここではこのページ固有の
   サイズだけ、news-single.cssの.news-single__back .pill-buttonと揃えて上書きする */
.pr-tool-archive__back {
    margin-top: 41px;
}

.pr-tool-archive__back .pill-button {
    width: 230px;
    height: 62px;
}

/* 782px〜1279px：PC版(1366px基準)のサイズ感をvwでそのまま縮小 */
@media (max-width: 1279px) {
    .pr-tool-archive {
        padding: 8.418vw 1.464vw 12.006vw;
    }

    .pr-tool-archive__heading {
        gap: 1.435vw;
        margin-bottom: 3.697vw;
    }

    .pr-tool-archive__heading-icon {
        width: 3.617vw;
        height: 5.455vw;
    }

    .pr-tool-archive__heading-text {
        font-size: 3.514vw;
        line-height: 3.148vw;
        letter-spacing: 0.141vw;
    }

    .pr-tool-archive__grid {
        max-width: 71.449vw;
    }

    .pr-tool-archive__grid .wp-block-post-template {
        gap: 4.456vw 2.635vw;
    }

    .pr-tool-card__thumbnail,
    .pr-tool-card__thumbnail:not(:has(img)) {
        width: 15.886vw;
        height: 22.548vw;
        margin-bottom: 0.659vw;
    }

    .pr-tool-card__thumbnail img {
        width: 15.886vw;
        height: 22.548vw;
    }

    .pr-tool-card__title-group {
        margin-bottom: 0.146vw;
    }

    .pr-tool-card__title {
        font-size: 1.611vw;
        line-height: 2.079vw;
    }

    .pr-tool-card__date {
        font-size: 1.171vw;
        line-height: 2.079vw;
    }

    .pr-tool-card__button {
        margin: 0.732vw auto 0;
        gap: 0.439vw;
        width: 12.013vw;
        height: 2.923vw;
        font-size: 1.318vw;
        letter-spacing: -0.013vw;
    }

    .pr-tool-card__button-icon {
        width: 1.229vw;
        height: 1.351vw;
    }

    .pr-tool-archive__empty {
        padding: 2.928vw 0;
        font-size: 1.318vw;
    }

    .pr-tool-archive__pagination {
        gap: 1.464vw;
        margin-top: 3.002vw;
    }

    .pr-tool-archive__back {
        margin-top: 3.002vw;
    }

    .pr-tool-archive__back .pill-button {
        width: 16.837vw;
        height: 4.539vw;
    }

    .pr-tool-archive__pagination .wp-block-query-pagination-numbers {
        gap: 1.464vw;
    }

    .pr-tool-archive__pagination .page-numbers {
        font-size: 2.02vw;
    }

    .pr-tool-archive__pagination .page-numbers.current::after {
        bottom: 0.146vw;
    }

    .pr-tool-archive__pagination .pr-tool-archive__pagination-next,
    .pr-tool-archive__pagination .pr-tool-archive__pagination-prev {
        width: 0.808vw;
        height: 1.616vw;
    }

    .pr-tool-archive__pagination .pr-tool-archive__pagination-next::before,
    .pr-tool-archive__pagination .pr-tool-archive__pagination-prev::before {
        width: 1.616vw;
        height: 0.808vw;
    }
}

/* 375px(Figmaスマホ実測値)基準：782pxまでvwで滑らかに拡大縮小する。
   602〜782pxはヘッダーがまだposition:fixedのまま（header.css参照）で通常フロー上は
   高さ0扱いのため、ヘッダー実高さ(51px)+隙間(17px)のフルオフセットをここで確保する。
   600px以下でヘッダーがstickyに変わった時の分は下の@media(max-width:600px)で減らす */
@media (max-width: 782px) {
    .pr-tool-archive {
        padding: 18.133vw 5.333vw 19.644vw;
    }

    .pr-tool-archive__heading {
        gap: 3.407vw;
        margin-bottom: 6.527vw;
    }

    .pr-tool-archive__heading-icon {
        width: 9.817vw;
        height: 14.807vw;
    }

    .pr-tool-archive__heading-text {
        font-size: 8vw;
        line-height: 8.081vw;
        letter-spacing: normal;
    }

    .pr-tool-archive__grid {
        max-width: 57.867vw;
    }

    /* スマホでは1カラムで縦積みにする。カード自体（サムネイル・ボタン）の
       実寸はFigma上PC版と同じ大きさのまま縮小しない */
    .pr-tool-archive__grid .wp-block-post-template {
        grid-template-columns: 1fr;
        gap: 11.733vw 0;
    }

    .pr-tool-card__thumbnail,
    .pr-tool-card__thumbnail:not(:has(img)) {
        width: 57.867vw;
        height: 82.133vw;
        margin-bottom: 2.4vw;
    }

    .pr-tool-card__thumbnail img {
        width: 57.867vw;
        height: 82.133vw;
    }

    .pr-tool-card__title-group {
        margin-bottom: 0;
    }

    .pr-tool-card__title {
        font-size: 4.8vw;
        line-height: 6.507vw;
    }

    .pr-tool-card__date {
        font-size: 3.733vw;
        line-height: 6.507vw;
    }

    /* ボタン自体はタブレットで縮小したvwを打ち消し、PC版と同じ実寸に戻す
       （Figmaのスマホ版がPC版と同じボタンサイズのため）。文字サイズだけ
       スマホ専用の値(15px)に変える */
    .pr-tool-card__button {
        margin: 3.576vw auto 0;
        width: 164.007px;
        height: 39.917px;
        font-size: 4vw;
        letter-spacing: -0.04vw;
    }

    .pr-tool-card__button-icon {
        width: 16.787px;
        height: 18.451px;
    }

    .pr-tool-archive__empty {
        padding: 10.667vw 0;
        font-size: 4.8vw;
    }

    .pr-tool-archive__pagination {
        gap: 4.363vw;
        margin-top: 9.889vw;
    }

    .pr-tool-archive__back {
        margin-top: 9.889vw;
    }

    .pr-tool-archive__back .pill-button {
        width: 48.267vw;
        height: 11.733vw;
    }

    .pr-tool-archive__pagination .wp-block-query-pagination-numbers {
        gap: 4.363vw;
    }

    .pr-tool-archive__pagination .page-numbers {
        font-size: 5.926vw;
    }

    .pr-tool-archive__pagination .page-numbers.current::after {
        bottom: 0.533vw;
    }

    .pr-tool-archive__pagination .pr-tool-archive__pagination-next,
    .pr-tool-archive__pagination .pr-tool-archive__pagination-prev {
        width: 2.37vw;
        height: 4.741vw;
    }

    .pr-tool-archive__pagination .pr-tool-archive__pagination-next::before,
    .pr-tool-archive__pagination .pr-tool-archive__pagination-prev::before {
        width: 4.741vw;
        height: 2.37vw;
    }
}

/* 600px以下：header.css側でヘッダーがposition:stickyに切り替わり、
   通常フロー上の高さ(51px)を持つようになるため、上のpaddingからその分を差し引き
   隙間(17px)だけ残す */
@media (max-width: 600px) {
    .pr-tool-archive {
        padding-top: 4.533vw;
    }
}