@charset "UTF-8";

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

	bnftblog_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-color: #292524;/*stone-800*/
    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;
}

/*typebox-----記事カテゴリー・エリア・すべて表示*/

.filter.typebox 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;
    background: #fff;
    min-height: 54px;
}

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

/*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));
    }
}

.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.typebox {
        display: block;
    }
    .filter.typebox 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*/

.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,
.filter a.active span.check.area01,
.filter a.active span.check.area02,
.filter a.active span.check.area03,
.filter a.active span.check.area04 {
    font-weight: 500;
}
.filter a.active span.check.ctg01::before/*,
.filter a.active span.check.area01::before*/ {
    background: #fbbf24;/*amber-400*/
}
.filter a.active span.check.ctg02::before/*,
.filter a.active span.check.area02::before*/ {
    background: #fb923c;/*orange-400*/
}
.filter a.active span.check.ctg03::before/*,
.filter a.active span.check.area03::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;
    }
    .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 ---> .main*/
    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 #292524;/*stone-800*/
    background: #f6efe5;/*paper*/
    font-size: 1rem;
    font-family:'Zen Kaku Gothic New', monospace,Sans-Serif;
	font-display:swap;
    text-align: center;
}

span.page-numbers a.active {
    color: #f6efe5;/*paper*/
    border: 2px solid #292524;/*stone-800*/
    background:#292524;/*stone-800**/
}

div.no-results {/*絞り込み件数0の場合*/
	display: flex;
    width: 90%;
    max-width: 480px;
    height: fit-content;
    aspect-ratio: 1/1;
    margin:10vh auto auto auto;
    padding:10vh;
    animation: fadein 1s forwards;
    align-items: center;
    justify-content: center;
    border: 6px double #a8a29e;/*stone-400*/
    background-color: #f6efe5;/*paper*/
    background-image: url("/column/common/cmn_img/bg_no-results@2x.png");/*fallback
    background-image: url("/column/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: 6px double #a8a29e;/*stone-400*/
    background-color: #f6efe5;/*paper*/
    background-image: url("/column/common/cmn_img/bg_not-found@2x.png");/*fallback
    background-image: url("/column/common/cmn_img/bg_not-found.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}
}


/*記事リスト*/

.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.75rem;
	padding-left: 0.75rem;
	padding-bottom: 0.25rem;
	vertical-align: text-top;
    margin-right: 0.2rem;
    margin-bottom: 0.4rem;
    font-size:0.875rem;
    text-align: center;
    border: 1px solid #292524;/*stone-800*/
    border-radius: 0;
}
.badge-category {
    font-weight: 500;
    color: #fff;
    border: none;
    /*background-color: #292524;stone-800*/
    background-color: #CC1534;/*ec_red*/
    /*font-size:0.8125rem;*/
    font-size:0.9135rem;
    min-width: 96px;
}
.badge-category.category01 {
    color: #fbbf24;/*amber-400*/
}
.badge-category.category02 {
    color: #fb923c;/*orange-400*/
}
.badge-category.category03 {
    color: #f87171;/*red-400*/
}
.badge-category.category04 {
    color: #c084fc;/*purple-300*/
}

/*詳細記事ページ内*/

.blog_title .badge-category.category01 {
    border: 1px solid rgba(251,191,36,0.5);/*amber-400*/
}
.blog_title .badge-category.category02 {
    border: 1px solid rgba(251,146,60,0.5);/*orange-400*/
}
.blog_title .badge-category.category03 {
    border: 1px solid rgba(248,113,113,0.5);/*red-400*/
}
.blog_title .badge-category.category04 {
    border: 1px solid rgba(192,132,252,0.5);/*purple-300*/
}


/*blog_card　過去の記事 <div class="main past">
★ハイパフォーマーの関連記事リストにも使用。
*/

.past .badge-category {
    font-size:0.75rem;
}


.badge-area {
    font-weight: 700;
    color: #fff;
    border: 1px solid #292524;/*stone-800*/
    font-size:0.8125rem;
    min-width: 88px;
}
.badge-area.area01 {
    color: #422006;/*yellow-950*/
    border: 1px solid #f59e0b;/*amber-500*/
    background-image: linear-gradient(135deg, #fbbf24 0%, #fde68a 100%);/*400 -> 200*/
    background-color:rgba(255,255,255,0.1);/*色を少し抑える*/
    background-blend-mode:lighten;
}
.badge-area.area02 {
    color: #422006;/*yellow-950*/
    border: 1px solid #f97316;/*orange-500*/
    background-image: linear-gradient(135deg, #fb923c 0%, #fed7aa 100%);/*400 -> 200*/
    background-color:rgba(255,255,255,0.1);/*色を少し抑える*/
    background-blend-mode:lighten;
}
.badge-area.area03 {
    color: #451a03;/*amber-950*/
    border: 1px solid #f87171;/*red-400*/
    background-image: linear-gradient(135deg, #f87171 0%, #fecaca 100%);/*400 -> 200*/
    background-color:rgba(255,255,255,0.3);/*色を少し抑える*/
    background-blend-mode:lighten;
}
.badge-area.area04 {
    color: #451a03;/*amber-950*/
    border: 1px solid #c084fc;/*purple-400*/
    background-image: linear-gradient(135deg, #c084fc 0%, #e9d5ff 100%);/*400 -> 200*/
    background-color:rgba(255,255,255,0.3);/*色を少し抑える*/
    background-blend-mode:lighten;
}
.badge-tag {
    padding-top: 0.1rem;
	padding-right: 0.5rem;
	padding-left: 0.5rem;
	padding-bottom: 0.15rem;
    font-weight: 500;
    border: 1px solid #292524;/*stone-800*/
    color: #292524;/*stone-800*/
    background-color:#fff;
    /*border-radius: 999px;*/
    font-size:0.75rem;
    min-width: 64px;
}
.badge-new {
    padding: 0;
    border:none;
    /*margin-left: -1rem;*/
    margin-right: 0.5rem;
    padding: 0 0.5rem;
    color: #ef4444;/*red-500*/
    border:1px solid  #ef4444;/*red-500*/
    /*border-left-width: 5px ;*/
    background-image: linear-gradient(135deg, #f87171 0%, #fecaca 100%);/*400 -> 200*/
    background-color:rgba(255,255,255,0.5);/*色を少し抑える*/
    background-blend-mode:lighten;
}

/*side用*/
.pickup_box01 .badge,
.pickup_box02 .badge {
    display: inline-block;
	padding-top: 0.1rem;
	padding-right: 0.4rem;
	padding-left: 0.4rem;
	padding-bottom: 0.15rem;
	vertical-align: text-top;
    margin-right: 0.2rem;
    margin-bottom: 0.2rem;
    font-size:0.6875rem;
    min-width: 72px;
}

.pickup_box01 .badge-tag,
.pickup_box02 .badge-tag {
    padding: 0.1rem 0.4rem;
    font-size:0.625rem;
    min-width: 52px;
}