@charset "UTF-8";

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

	case_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: #fff;
    /*background-image:linear-gradient(#57534e 1px, transparent 1px), linear-gradient(90deg, #57534e 1px, transparent 1px), linear-gradient(#44403c 1px, transparent 1px), linear-gradient(90deg, #44403c 1px, transparent 1px);stone-600 & stone-700*/
	/*background-size: 80px 80px, 80px 80px, 8px 8px, 8px 8px;
	background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;*/
}

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

.filter.listbox a,
.filter a.all {
    display:flex;
    justify-content: center;
    align-items: center;
    /*border-left: 1px dashed #a8a29e;stone-400*/
    border-bottom:1px solid #a8a29e;/*stone-400*/
    color: #292524;/*stone-800*/
    text-align: center;
    font-size:0.9375rem;
    background: #fff;
    min-height: 54px;
}
@media (min-width: 1024px) {
    .filter.listbox a,
    .filter a.all {
        border-left: 1px dashed #a8a29e;/*stone-400*/
    }
 }

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

@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(4, minmax(0, 1fr));
    border-left: 1px dashed #a8a29e;/*stone-400*/
    border-top: 1px solid #a8a29e;/*stone-400*/
    /*background: #292524;stone-800*/
    padding: 0;
}
.filter.tagbox a {
    display:flex;
    justify-content: center;
    align-items: center;
    border-right:1px dashed #a8a29e;/*stone-400*/
    border-bottom: 1px dashed #a8a29e;/*stone-400*/
    color: #fff;
    padding:0 2px;
    text-align: center;
    font-size:0.75rem;
    background: #292524;/*stone-800*/
    min-height: 54px;
}

@media (min-width: 640px) {

    .filter.tagbox {
        grid-template-columns: repeat(6, 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(6, minmax(0, 1fr));
    }
    .filter.listbox a,
    .filter a.all {
        border-left: none;
    }

    .filter.tagbox {
        display: flex;
        flex-wrap: wrap;
        padding: 4px;
        border: 0;
    }
    .filter.tagbox a {
        display: inline-flex;
        margin:4px;
        padding:0 2px;
        min-height: 32px;
        border:1px solid #a8a29e;/*stone-400*/
        /*border-radius: 999px;*/
        color: #fff;
        background: #292524;/*stone-800*/
    }

}/*@media end*/

@media (min-width: 1440px) {

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

}/*@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: #fbbf24;/*amber-400*/
}

.filter a.all.active,
.filter a.active span.check.ctg01,
.filter a.active span.check.ctg02,
.filter a.active span.check.ctg03 {
    font-weight: 500;
}
.filter a.active span.check.ctg01::before {
    background: #fbbf24;/*amber-400*/
}
.filter a.active span.check.ctg02::before {
    background: #fb923c;/*orange-400*/
}
.filter a.active span.check.ctg03::before {
    background: #ef4444;/*red-500*/
}
.filter a.active span.check.area04::before {
    background: #c084fc;/*purple-400*/
}
/*
.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 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: #fbbf24;/*amber-400*/
        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: #fbbf24;/*amber-500*/
    }

    .filter a.active span.check.ctg02::before,
    .filter a.active span.check.ctg02::after{
        background: #fb923c;/*orange-500*/
    }

    .filter a.active span.check.ctg03::before,
    .filter a.active span.check.ctg03::after{
        background: #ef4444;/*red-500*/
    }

   .filter a.active span.check.ctg04::before,
    .filter a.active span.check.ctg04::after{
        background: #c084fc; /*purple-400*/
    }

    .filter a.active span.check.area01::before,
    .filter a.active span.check.area01::after{
        background: #fbbf24;/*amber-500*/
    }

    .filter a.active span.check.area02::before,
    .filter a.active span.check.area02::after{
        background: #fb923c;/*orange-500*/
        background: #fbbf24;/*amber-500*/
    }

    .filter a.active span.check.area03::before,
    .filter a.active span.check.area03::after{
        background: #ef4444;/*red-500*/
        background: #fbbf24;/*amber-500*/
    }

    .filter a.active span.check.area04::before,
    .filter a.active span.check.area04::after{
        background: #c084fc;/*purple-400*/
        background: #fbbf24;/*amber-500*/
    }
}
@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;
}

@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: 2px solid #c33;★ガイド*/
    /*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: 2px solid #c33;★ガイド*/
    /*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}
}

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

/*記事リスト

.list-item {
    opacity: 1;
    display: block;
}
.list-item.is-hidden {
    opacity: 0;
    height: 0;
    margin: 0;    
    display:none; 
}
*/

/*製品ロゴ*/

.filter.listbox a.name {
	display: flex;
	width: 100%;
}

.filter.listbox a.name span.check{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	/*border:1px dotted #c33;★ガイド**/
}

.filter.listbox a.name span.logo {
	display: block;
	width: 100%;
	height: auto;
	min-width: 144px;
	min-height: 54px;
	/*border:1px dotted #c33;★ガイド**/
}

.filter.listbox a.name span.logo.n01 {background:#fff url(/business/img/logo/img_logoTogo.svg) no-repeat center; background-size:100% auto;}/*【情報インフラ】統合運用管理業務*/
.filter.listbox a.name span.logo.n02 {background:#fff url(/business/img/logo/img_logoSangyo.png) no-repeat center; background-size:100% auto;}/*【製造業向け】ITソリューション*/
.filter.listbox a.name span.logo.n03 {background:#fff url(/business/img/logo/img_logoVal.svg) no-repeat center; background-size:100% auto;}/*検証ソリューション*/
.filter.listbox a.name span.logo.n04 {background:#fff url(/business/img/logo/img_logoBpo.svg) no-repeat center; background-size:100% auto;}/*WEBキャンペーントータルソリューション*/
.filter.listbox a.name span.logo.n05 {background:#fff url(/business/img/logo/img_logoNtR.svg) no-repeat center; background-size:80% auto;}/*NetRAPTOR*/
.filter.listbox a.name span.logo.n06 {background:#fff url(/business/img/logo/img_logoEFE.svg) no-repeat center; background-size:80% auto;}/*EASYFILE EXPRESS*/
.filter.listbox a.name span.logo.n07 {background:#fff url(/business/img/logo/img_logoECC.svg) no-repeat center; background-size:80% auto;}/*EC-Connect+*/
.filter.listbox a.name span.logo.n08 {background:#fff url(/business/img/logo/img_logoMiL.svg) no-repeat center; background-size:80% auto;}/*見守りライフ*/
.filter.listbox a.name span.logo.n09 {background:#fff url(/business/img/logo/img_logoCarepro.svg) no-repeat center; background-size:80% auto;}/*けあぷろ・navi*/
.filter.listbox a.name span.logo.n10 {background:#fff url(/business/img/logo/img_logoKiM.svg) no-repeat center; background-size:80% auto;}/*Kikumimi*/
.filter.listbox a.name span.logo.n11 {background:#fff url(/business/img/logo/img_logoKayoi.svg) no-repeat center; background-size:75% auto;}/*通いの森*/
.filter.listbox a.name span.logo.n12 {background:#fff url(/business/img/logo/img_logoJD.svg) no-repeat center; background-size:75% auto;}/*JDRONE*/
.filter.listbox a.name span.logo.n99 {background:#fff;}/*その他*/