@charset "utf-8";

/*--------------------------------------------------------------
  パンくずリスト
--------------------------------------------------------------*/
ul,
ol {
    list-style-type: none;
}

ul.pankuzu-list,
ul.pankuzu-list li {
    margin: 0 0 1rem 0;
    padding: 0;

    display: flex;
    justify-content: start;
    align-items: start;

    list-style: none;
    overflow: hidden;

    font-size: 1.0rem;
    line-height: 1.2rem;

    transition: all 1s;
    /* アニメーションの設定 */
}


ul.pankuzu-list li,
ul.pankuzu-list li a {
    display: inline-block;
    text-wrap: nowrap;
    overflow: visible;
}

ul.pankuzu-list li:last-child,
ul.pankuzu-list li:last-child a {
    display: inline-block;
    text-wrap: wrap;
    overflow: hidden;
}

ul.pankuzu-list li:last-child {
    color: #555;
}

ul.pankuzu-list li a {
    color: #999;
    text-decoration: none;
    transition: color 1s, transform 1s;
}

ul.pankuzu-list li a:hover {
    color: #666;
    transform: scale(1.1);
}

ul.pankuzu-list li {
    margin-left: 0;
    transition: margin-left 1s ease;
}

ul.pankuzu-list li:hover {
    margin-left: 0.5rem;
}

ul.pankuzu-list li:last-child {
    pointer-events: none;
}


@media (max-width: 767.98px) {

    /* sm 以下の画面サイズの場合のスタイル */

}

@media (min-width: 768px) and (max-width: 991.98px) {

    /* md の画面サイズの場合のスタイル */

}

@media (min-width: 992px) {
    /* lg 以上の画面サイズの場合のスタイル */
}


/*--------------------------------------------------------------
  ページネーション
--------------------------------------------------------------*/

div.page-num {
    margin: 0;
    padding: 0;
    display: block;
}

ul.page-numbers {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: start;
    align-items: start;
}

ul.page-numbers a.page-numbers,
ul.page-numbers span.page-numbers.current {
    display: inline-block;
    margin: 0 0.5rem 0 0;
    padding: 0.2rem 0.2rem 0.2rem 0.2rem;
    font-size: 0.9rem;
    line-height: 0.9rem;
    width: 1.4rem !important;
    height: 1.4rem !important;
    text-align: center;
    border: 1px solid #666;
    border-radius: 0.2rem;
    transition: background-color 1s, color 1s, transform 1s;
}

ul.page-numbers a.page-numbers:hover {
    background-color: #666;
    color: #fff;
    transform: scale(1.1);
    /* ホバー時に少し拡大 */
}

ul.page-numbers span.page-numbers.current {
    margin: 0 0.5rem 0 0;
    background-color: #666;
    color: #fff;
    width: unset;
}

ul.page-numbers span.page-numbers.dots {
    margin: 0 0.5rem 0 0;
    background-color: transparent;
    color: #666;
    width: unset;
}

ul.page-numbers a.page-numbers.prev {
    margin: 0 0.5rem 0 0;
    border: 0;
    width: unset !important;
    transition: color 1s, transform 1s;
}

ul.page-numbers a.page-numbers.prev:hover {
    background-color: transparent;
    color: #333;
    transform: translateX(-5px);
}

ul.page-numbers a.page-numbers.next {
    margin: 0;
    border: 0;
    width: unset !important;
    transition: color 1s, transform 1s;
}

ul.page-numbers a.page-numbers.next:hover {
    background-color: transparent;
    color: #333;
    transform: translateX(5px);
}