.single .header-cover{ min-height: auto; padding-bottom: 20px;margin-bottom: 0;}
#primary { padding-top: 42px; padding-bottom: 80px;}

.page .coverPhotos { 
    background-image: url(/wp-content/themes/katsumata-denki/img/cover/works_header_sp.png);
}
.single .pageDownIcon { display: none; }

.single .entry-title { font-size: 28px;}

/*  */
.ktsm-filters { display: flex; justify-content: start; align-items: center; flex-wrap: wrap; }

.ktsm-chip { position: relative; width: 48%; max-width: 190px; display: inline-flex; justify-content: center; align-items: center; font-size: var(--font-size-xs); color: var(--color22); font-weight: bold;
border-radius: 0; background: white;}
.ktsm-chip:not(.is-active):hover{
    color: var(--color22); background: var(--color12);
}
.ktsm-chip:active:not(.is-active) , .ktsm-chip:focus:not(.is-active), .ktsm-chip:visited:not(.is-active) {
    color: var(--color22);
}
.ktsm-chip.is-active{ background: var(--color22); border-color: var(--color22) !important;
}

.ktsm-chip::after{ content: ""; display: block; position: absolute; right: -7px;bottom: -6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.64' height='31.438' viewBox='0 0 41.64 31.438'%3E%3Cg transform='translate(41.64 18.125) rotate(159)'%3E%3Crect width='37.149' height='2.908' fill='%23799295'/%3E%3Cpath d='M0,0H20.583V2.908H0Z' transform='translate(0.139 8.331)' fill='%23ddb282'/%3E%3Cpath d='M0,0H11.57V2.908H0Z' transform='translate(0.57 16.507)' fill='%23c4d6d8'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat
    center/100%; width: 29px; height: 24px;}

/*  */
.ktsm-works-list {margin: 50px auto 0; position: relative;}
.ktsm-works-list .noitem {
    margin: 10px auto;
    padding: 50px 10px;
    background: white;
    border: 1px solid #ccc;
    width: 100%;
    text-align: center;
    color: var(--font-color5);
}
.ktsm-card { 
    padding: 1em; position: relative;
    background: white; border: 1px solid var(--color13);
    box-shadow: 10px 10px 0 var(--color13);
}
.ktsm-card .ktsm-thumb img{
    width: 100%; height: 202px; object-fit: cover;
}
/*  */
.ktsm-tags { 
    position: absolute; top: 1.5em; right: 1.5em; 
    z-index: 2;
}
.ktsm-tag { 
    font-size: 10px; font-style: normal; border-radius: 20px; font-weight: bold;
    color: var(--font-color5); letter-spacing: -1px;
    padding:1px 5px; background: #ffffffce;
}
.ktsm-title a { text-decoration: none;}
.wmd { font-size: 10px;}
/*  */
.line-deco03 { display: block; width:69px; height: 66px;
    position: absolute; bottom: -13px; right: -14px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84.552' height='80.712' viewBox='0 0 84.552 80.712'%3E%3Cg transform='matrix(0.809, -0.588, 0.588, 0.809, -12.343, 58.868)' opacity='0.405'%3E%3Crect width='100.152' height='6' transform='translate(100.152 27) rotate(180)' fill='%23799295'/%3E%3Cpath d='M0,0H69.012V6H0Z' transform='translate(100.152 16) rotate(180)' fill='%23ddb282'/%3E%3Cpath d='M0,0H22.652V6H0Z' transform='translate(100.152 6) rotate(180)' fill='%23c4d6d8'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat
center / 100%;
}

/* ******  single ****** */
.single .entry-content { max-width: 572px ; margin: 0 auto 1em; }
.single #primary > article {
    background: #fcfcfcc9;
}
.single .entry-title { text-align: center; margin: -10px auto 20px; font-size: var(--font-size-xl);}

/*  */
.ktsm-tags-single { position: relative; margin: 0 auto 20px ; }
.ktsm-chip--tag-single { 
    width: max-content; padding: 2px 10px;
    font-size: var(--font-size-min);
    border-radius: 20px;
    font-weight: bold;
    color: var(--font-color5);
    letter-spacing: -1px;
    padding: 1px 5px;
    background: #ffffffce;
}

/*  */
.ktsm-gallery { position: relative; display: block; }
.ktsm-gallery::before {content:""; display: block; z-index: 2; width: 87px; height: 79px; 
    position: absolute; top: -20px; left: -20px; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86.385' height='78.388' viewBox='0 0 86.385 78.388'%3E%3Cg transform='translate(98.128 22.384) rotate(146)' opacity='0.405'%3E%3Crect width='100.152' height='6' transform='translate(100.152 27) rotate(180)' fill='%23799295'/%3E%3Cpath d='M0,0H69.012V6H0Z' transform='translate(100.152 16) rotate(180)' fill='%23ddb282'/%3E%3Cpath d='M0,0H22.652V6H0Z' transform='translate(100.152 6) rotate(180)' fill='%23c4d6d8'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/100%; }
.ktsm-gallery::after {content:""; display: block; width: 81px; height: 80px;
    position: absolute; bottom: -20px; right: -20px; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='82.615' height='82.936' viewBox='0 0 82.615 82.936'%3E%3Cg transform='translate(-12.929 61.66) rotate(-38)' opacity='0.405'%3E%3Crect width='100.152' height='6' transform='translate(100.152 27) rotate(180)' fill='%23799295'/%3E%3Cpath d='M0,0H69.012V6H0Z' transform='translate(100.152 16) rotate(180)' fill='%23ddb282'/%3E%3Cpath d='M0,0H22.652V6H0Z' transform='translate(100.152 6) rotate(180)' fill='%23c4d6d8'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/100%; }

.ktsm-gallery__item { 
    width: 100%; display: block; margin: 0 auto 2px; padding: 0em; position: relative;
    background: white; 
    /* border: 1px solid var(--color13); */
    box-shadow: 5px 5px 0 var(--color13);}
.ktsm-gallery__item:after {
    content: "クリックで拡大";
    position: absolute;
    bottom: 10px;
    right: 8px;
    font-size: 10px;
    mix-blend-mode: difference;
    color: #ffffffba;
    font-weight: bold;
}
.ktsm-gallery__item img { border-radius: 0; width: 100%; height: auto; object-fit: cover; aspect-ratio: 1/0.9; margin-bottom: -6px; }
/*  */
.ktsm-single-meta { 
    margin: 20px auto 10px;
    font-size: var(--font-size-sm);
    border-radius: 0;
    padding: 0;
    border: none;
}
.ktsm-single-meta ul {display: list-item; margin: 0; padding: 0; list-style: none; font-weight: bold;}
.ktsm-single-meta__list li {padding: 10px; border-bottom: 1px solid var(--color12);}
.ktsm-single-meta__label { display: block; color:var(--color22); font-size: var(--font-size-xs);}
.ktsm-single-meta__label::after { content: ""; display: block; 
    height: 1px; width: 50px; margin: 5px 0 ;
    background-image: linear-gradient(90deg, var(--color23) 50%, var(--color12) 50%);}
.ktsm-single-meta__value{}


/* モーダル（ライトボックス） */
.ktsm-lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.85);z-index:9999;padding:2vw}
.ktsm-lightbox__img{max-width:96vw;max-height:92vh;border-radius:0px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.ktsm-lightbox__close{color:white; position:absolute;top:12px;right:12px;width:36px;height:36px;padding:0; border:0;border-radius:50%;background:none;cursor:pointer;font-size:21px;line-height:1;text-align:center}
.ktsm-no-scroll{overflow:hidden}

@media screen and (min-width: 768px) {
    .single .header-cover{ min-height: auto; padding-bottom: 20px;margin-bottom: 30px;}
    
    .page .coverPhotos { 
        background-image: url(/wp-content/themes/katsumata-denki/img/cover/works_header_pc.png);
    }

    .ktsm-filters { justify-content: center; gap: 10px; }
    .ktsm-works-list {
        display: flex; justify-content: start; align-items: stretch;
        flex-wrap: wrap;
        gap: 10px;
    }
    .ktsm-card { width: 32%;}

    /* single  */
    .single #primary > article {
        margin: 0 auto 0;
        padding: 10px;
    }
    .single .entry-title { margin: -50px auto 20px;}
    .single .entry-content {
        max-width: 800px;
    }
    .ktsm-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
    }
    .ktsm-gallery__item{
        /* width: 33%; */
    }
    .ktsm-single-meta__list li { 
        display: flex; justify-content: space-between; align-items: start;
        border: 1px solid var(--color12);
        margin-bottom: 5px;
        background: white;
    }
    .ktsm-single-meta__label { display: inline-flex;justify-content: space-between;align-items: center}
    .ktsm-single-meta__label>span { display: inline-block; width: 9em;}
    .ktsm-single-meta__label::after { display: inline-block; vertical-align: middle; margin-left: 1em;}
}

@media screen and (min-width: 1024px) {
    
    
}
@media screen and (min-width: 1280px) {
    
}