@charset "UTF-8";

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

	bj_rctblog_sort.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: #fff;}
.filter a {
    display: block;
    padding: 0.75rem 0;
    border-right: 1px solid rgba(255,255,255,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.25);
    //background: #1d2087;
    //color: #fff;
    text-align: center;
    height: 100%;
    font-size:0.875rem;
}
@media (min-width: 1024px) {
    .filter a {
        //padding: 1.25rem 0;
        font-size:1rem;
        //background: linear-gradient(90deg, #006,#1d2087);
    }

}
.filter a.active {
    background: none;
    color:#1d2087;
    border-right: transparent;
    font-weight: 700;
}
.filter a span.check {
    display:block;
    position: relative;
    width: fit-content;
    margin: auto; /*これでセンター合わせ*/
    /*margin:auto 12px;*/
    padding-left: 0;
    padding-right: 24px;
}
.filter a.active span.check {padding-left: 24px;}
.filter a span.check::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: rgba(255,255,255,0);
    border-radius: 2px;
    margin: 2px 8px -2px 0;
}
.filter a.active span.check::before,
.filter a.active span.check::after{
    content: "";
    display:  inline-block;
    height: 4px;
    width: 9px;
    background: #F59E0B;/*amber-500*/
    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: 14px;
    /*left: -19px;*/
    left: 6px;
    bottom: 2px;
}
.filter a.active span.check::before{animation: 0.4s check;}
.filter a.active span.check::after{animation: 0.4s check-2;}

@keyframes check{
    
    0%{
        width: 5px;
        left: 3px;
    }
    25%{
        width: 9px;
        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: 14px;
        left: 6px;
        bottom: 3px;
        opacity: 1;
    }
    
}

.is-animated {
  animation: .6s zoom-in;
}
@keyframes zoom-in {
    
      0% {
       transform: scale(.1);
      }
      100% {
        transform: none;
      }
    
}

.boxes {animation: fadein 1s forwards;}

p.exist {/*絞り込み件数0の場合*/
    width: fit-content;
    color: #5c6bc0;
	margin: 0 auto;
	padding: 1rem 1rem 2rem 1rem !important;
    animation: fade-in 1s forwards;
}
p.not_exist {/*絞り込み件数0の場合*/
	display: none;
    width: fit-content;
	color: #5c6bc0;
	background:rgba(255,255,255,0.5);
	margin: 1rem auto 0 auto;
	padding:1rem 2rem !important;
	border-radius: 8px;
    animation: fade-in 1s forwards;
}

@keyframes fade-in {
    
      0% {
       opacity: 0;
      }
      100% {
        opacity: 1;
      }
    
}

/*記事リスト*/

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

/*----------------------------------------
	other parts
----------------------------------------*/

.badge {
    display: inline-block;
	padding-top: 0.2rem;
	padding-right: 0.5rem;
	padding-left: 0.5rem;
	padding-bottom: 0.25rem;
	vertical-align: text-top;
    margin-right: 0.2rem;
    margin-bottom: 0.4rem;
    font-size:0.875rem;
}
.side .badge {
    display: inline-block;
	padding-top: 0.1rem;
	padding-right: 0.4rem;
	padding-left: 0.4rem;
	padding-bottom: 0.2rem;
	vertical-align: text-top;
    margin-right: 0.2rem;
    margin-bottom: 0.4rem;
    font-size:0.6875rem;
}
/*
.badge-type {
    font-weight: 500;
    border-radius: 0;
}
*/

.badge-new {
    padding-top: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    padding-bottom: 0.25rem;
    border-radius: 999px;
    margin-right: 1rem;
    margin-bottom: 0;
    color: #fff;
    background-color: #e6326e;
    font-weight: 700;
    font-size: 0.875rem;
}