@charset "UTF-8";

/*
========================================

	news_sort_paginations.css
    
========================================*/

/*
@media (min-width: 1280px) {

    .container {max-width: 1440px !important;}

}@media end*/

/*絞り込み

div.reset {padding: 2rem 0;}
div.reset p {
    text-align: center;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom:1rem;
}*/

.filter {  
    background-color: #f6f6f6;
}

/*listbox-----（項目）and（すべて表示）*/

.filter.listbox a,
.filter a.all {
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 48px;
}

.filter a.all{
    box-shadow:0 0 0 1px #ccc;
}

.filter.listbox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filter a.all.active,
.filter.listbox a.active {
    background: #fff; 
}

@media (min-width: 640px) {

    .filter.listbox {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}/*@media end*/

/*tagbox-----（タグ）*/

.filter.tagbox {
    display: grid;
    /*grid-template-columns: repeat(1, minmax(0, 1fr));*/
    grid-template-columns: repeat(2, minmax(0, 1fr));
    box-shadow:0 0 0 1px #ccc;
    padding: 0;
}

.filter.tagbox a {
    display:flex;
    justify-content: center;
    align-items: center;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    border-bottom:2px solid #fff;
    padding:0 2px;
    text-align: center;
    font-size:0.75rem;
    min-height: 48px;
}

@media (min-width: 640px) {

    .filter.tagbox a {
        font-size:0.8125rem;
    }

    .filter.tagbox.category {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}/*@media end*/

.filter.tagbox a.active {
    background: #fff;
    border-color:transparent;
    color:#292524;
    border-right-color: transparent;
    font-weight: 700;
}

@media (min-width: 1024px) {

    /*.filter.tagbox {
        background: #292524;stone-800 ベースの格子模様をなくす
    }
    */

    .filter.listbox {
       display: block;
         /*grid-template-columns: repeat(2, minmax(0, 1fr));*/
    }
    .filter.listbox a,
    .filter a.all {
        border-left: none;
        border-right: none;
        min-height: 64px;
    }
    .filter.tagbox {
        display: flex;
        flex-wrap: wrap;
        padding: 4px;
        border: 0;
    }
    .filter.tagbox a {
        display: inline-flex;
        padding:4px;
        border: none;
    }
    .filter a.all{
        min-height: 76px;
        margin-bottom: 0.5rem;
    }
    
}/*@media end*/

@media (min-width: 1440px) {

    .filter.listbox {
        /*display: block;*/
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter.tagbox a {
        font-size: 0.875rem;
    }

}/*@media end*/

.filter a span.check {
    padding:0 8px 0 0;
    border-left:4px solid transparent;
}

.filter a span.check::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 4px;
    margin: 0 4px 3px -4px;
    background: transparent;
}

.filter a.active span.check::before {
    /*background: #a8a29e;stone-400*/
    background: #c33;
}

.filter a.all.active,
.filter a.active span.check.ctg01,
.filter a.active span.check.ctg02,
.filter a.active span.check.ctg03,
.filter a.active span.check.ctg04,
.filter a.active span.check.ctg05,
.filter a.active span.check.ctg06,
.filter a.active span.check.ctg07 {
    font-weight: 500;
}

.filter a.active span.check.ctg01::before,
.filter a.active span.check.ctg01::after{
    background: #b093c6;
}

.filter a.active span.check.ctg02::before,
.filter a.active span.check.ctg02::after{
    background: #f0a254;
}

.filter a.active span.check.ctg03::before,
.filter a.active span.check.ctg03::after{
    background: #eb7f80;
}

.filter a.active span.check.ctg04::before,
.filter a.active span.check.ctg04::after{
    background: #6e80cc;
}

.filter a.active span.check.ctg05::before,
.filter a.active span.check.ctg05::after{
    background: #99c21e;
}

.filter a.active span.check.ctg06::before,
.filter a.active span.check.ctg06::after{
    background: #67c6d6;
}

.filter a.active span.check.ctg07::before,
.filter a.active span.check.ctg07::after{
    background: #eb7fb6;
}
/*
.filter a span.check.year {
    font-feature-settings: "palt";半角数字はチェックマーク選択時に幅がぶれる＆読みづらいので、数字を全角にして文字間を詰める
}*/
/*
.past a span.days{
    font-feature-settings: "palt";数字を全角にして文字間を詰める
}*/
    
@media (min-width: 1024px) {

    .filter a span.check {
        display:block;
        position: relative;
        width: fit-content;
        height: auto;
        /*margin: auto; これでセンター合わせ*/
        padding-left: 24px;
        padding-right: 24px;
        border:0;
    }

    .filter a.active span.check {
        padding-left: 24px;
        border:0;
    }

    .filter.tagbox.company a {
        display:flex;
        justify-content: flex-start;
        align-items: center;
        padding:0 0 0 2px;
        text-align: left;
    }

    .filter.tagbox.company a span.check {/*対象会社*/
        margin-left: 8px;
        padding-left: 24px;
        padding-right: 0;
    }

    .filter a span.check::before,
    .filter a span.check::after {
        content: "";
        display: inline-block;
        width: 1rem;
        height: 1rem;
        background: rgba(255,255,255,0);
        border-radius: 2px;
        margin: 2px 8px -2px 0;
        left:0;
        top:0;
        position: absolute;

        z-index: 2;
    }
    .filter a.active span.check::before,
    .filter a.active span.check::after{
        content: "";
        display:  inline-block;
        height: 3px;
        width: 8px;
        /*background: #a8a29e;stone-400*/
        background: #c33;
        border-radius: 10px;
        transform: rotate(45deg);
        position: absolute;
        /*left: -22px;*/
        left: 2px;
        top: 4px;
        bottom: 1px;
        margin: auto;
    }
    .filter a.active span.check::after{
        transform: rotate(-45deg);
        width: 12px;
        /*left: -19px;*/
        left: 5px;
        bottom: 3px;
    }
    .filter a.active span.check::before{animation: 0.4s check;}
    .filter a.active span.check::after{animation: 0.4s check-2;}

    .filter a.active span.check.ctg01::before,
    .filter a.active span.check.ctg01::after{
        background: #b093c6;
    }

    .filter a.active span.check.ctg02::before,
    .filter a.active span.check.ctg02::after{
        background: #f0a254;
    }

    .filter a.active span.check.ctg03::before,
    .filter a.active span.check.ctg03::after{
        background: #eb7f80;
    }

   .filter a.active span.check.ctg04::before,
   .filter a.active span.check.ctg04::after{
        background: #6e80cc;
    }

    .filter a.active span.check.ctg05::before,
    .filter a.active span.check.ctg05::after{
        background: #99c21e;
    }

    .filter a.active span.check.ctg06::before,
    .filter a.active span.check.ctg06::after{
        background: #67c6d6;
    }

    .filter a.active span.check.ctg07::before,
    .filter a.active span.check.ctg07::after{
        background: #eb7fb6;
    }
}


@keyframes check {
    0%{
        width: 5px;
        left: 2px;
    }
    25%{
        width: 8px;
        left: 2px;
    }
}

@keyframes check-2 {
    0%{
        width: 0px;
        left:2px;
        bottom: 0px;
        opacity: 0;
    }
    25%{  
        width: 5px;
        left: 2px;
        bottom: 3px; 
        opacity: 0;
    }
    100%{
        width: 12px;
        left: 5px;
        bottom: 3px;
        opacity: 1;
    }
}

.boxes {
    margin-bottom: 72px; /*pagination-height*/
    animation: fadein 1s forwards;
}


.is-animated {
  /*animation: .6s zoom-in;*/
  animation: .6s fadein;
}

/*@keyframes zoom-in {
    
      0% {
       transform: scale(.1);
      }
      100% {
        transform: none;
       }
    
}*/

div.pagination {
    position: absolute;/*relative ---> .cases_list*/
    bottom: 0;
    left:0;
    right: 0;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 72px;
}

div.pagination .prev,
div.pagination .next {
    margin: 0 8px;
}

div.pagination .disabled {
    opacity: 0.5;
}

span.page-numbers a {
    display: inline-block;
    width: 2rem;
    margin: 0 0.25rem;
    padding:0.25rem 0;
   /*border: 2px solid #c33;★ガイド*/
    background: #fff;
    font-size: 1rem;
    font-family:'Zen Kaku Gothic New', monospace,Sans-Serif;
	font-display:swap;
    text-align: center;
}

span.page-numbers a.active {
    color: #fff;
   /*border: 2px solid #c33;★ガイド*/
    background:#333;
}

div.no-results {/*絞り込み件数0の場合*/
	display: flex;
    width: 90%;
    max-width: 480px;
    height: fit-content;
    aspect-ratio: 4/3;
    margin:10vh auto auto auto;
    padding:10vh;
    animation: fadein 1s forwards;
    align-items: center;
    justify-content: center;
    /*border: 1px dotted #ccc;★ガイド*/
    /*background-color: #f6efe5;paper*/
    /*background-image: url("/company/benefit_blog/common/cmn_img/bg_no-results@2x.png");fallback
    background-image: url("/company/benefit_blog/common/cmn_img/bg_no-results.svg"), none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;*/
}

div.no-results p {
    white-space: nowrap;
    text-align: center;
    /*font-size: 12px;*/
    font-size: clamp(12px, 1vw, 16px);
}

div.not-found {/*404対応*/
	display: flex;
    width: 90%;
    max-width: 960px;
    height: fit-content;
    aspect-ratio: 16/9;
    margin:5vh auto auto auto;
    padding:10vh;
    animation: fadein 1s forwards;
    align-items: center;
    justify-content: center;
    /*border: 1px dotted #ccc;★ガイド*/
    /*background-color: #f6efe5;paper*/
    /*background-image: url("/company/benefit_blog/common/cmn_img/bg_no-results@2x.png");fallback
    background-image: url("/company/benefit_blog/common/cmn_img/bg_no-results.svg"), none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;*/
}

div.not-found p {
    white-space: nowrap;
    text-align: center;
    /*font-size: 12px;*/
    font-size: clamp(12px, 1vw, 17px);
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}