/* Case study detail — article-content-case.html */
.case-page .all-nav img{width:36px;height:36px;object-fit:contain;flex-shrink:0}
.case-page .all-nav a.on{color:var(--c-accent)}

.case-page .case-in .title-24{margin-bottom:40px;padding:15px 20px 15px 30px;border-radius:12px;background:var(--c-accent);font-weight:500;color:#fff}
.case-in{padding:70px 0 20px;background:#fff}
.case-in .container{max-width:1180px}
.case-in .content{display:flex;align-items:stretch;justify-content:space-between;gap:48px}
.case-in .left{flex:1;min-width:0}
.case-in .right{width:320px;flex:0 0 320px}
.case-in h1{margin:0;font-size:30px;line-height:1.35;font-weight:500;color:var(--c-block)}
.case-in .meta{display:flex;align-items:center;gap:22px;margin-top:28px;padding-bottom:28px;border-bottom:1px dashed #d8d8d8;font-size:16px;line-height:1.4;color:#666}
.case-in .views{display:inline-flex;align-items:center;gap:6px}
.case-in .views svg{display:block;color:var(--c-accent)}
.case-in .text{margin-top:28px}
.case-in .text img{max-width:100%;height:auto}
.case-in .text p{margin:0 0 18px}
.case-in .text h2{margin:32px 0 12px;font-size:24px;line-height:1.35;font-weight:600;color:var(--c-black)}
.case-in .text h3{margin:22px 0 8px;font-size:18px;line-height:1.4;font-weight:600;color:#222}
.case-in .text ul{margin:0 0 22px;padding:0;list-style:none}
.case-in .text li{margin:0;padding:10px 0;border-bottom:1px dashed #e3ebe6}
.case-in .text li:last-child{border-bottom:0}
.case-in .right:not(:has(.case-toc:not([hidden]))):not(:has(.list)):not(:has(.case-facts)){display:none}

.case-facts{position:static}
.case-in .case-facts .title-24{margin-bottom:0;border-radius:12px 12px 0 0}
.case-facts dl{margin:0;padding:6px 22px 10px;border:1px solid #e4eee8;border-top:0;border-radius:0 0 12px 12px;background:#f7fbf8}
.case-facts dt{margin:16px 0 0;font-size:13px;line-height:1.3;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--c-accent)}
.case-facts dd{margin:4px 0 0;padding-bottom:16px;border-bottom:1px dashed #e0e8e3;font-size:16px;line-height:1.45;color:#222}
.case-facts dd:last-child{border-bottom:0;padding-bottom:8px}

.case-toc{position:static;margin:0 0 40px;padding-bottom:8px;background:#fff}
.case-toc[hidden]{display:none !important}
.case-toc ul{margin:0;padding:0;list-style:none}
.case-toc a{display:block;padding:12px 0;border-bottom:1px dashed #e5e5e5;font-size:16px;line-height:1.4;color:#333}
.case-toc a.is-active{color:var(--c-accent)}

.case-in .right .list{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:22px}
.case-in .right .img{width:100%;border-radius:8px;overflow:hidden}
.case-in .right .img img{width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;display:block}
.case-in .right .t1{font-size:16px;line-height:1.4;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.case-in .right .summary{margin:6px 0 0;font-size:15px;line-height:1.4;color:#666;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media(max-width:1199px){
    .case-in{padding:50px 0 16px}
    .case-in .content{gap:24px}
    .case-in .right{width:280px;flex-basis:280px}
    .case-in h1{font-size:26px}
}
@media(max-width:899px){
    .case-in{padding:40px 0 16px}
    .case-in .content{flex-direction:column;gap:24px}
    .case-in .left{display:contents}
    .case-in h1{order:1}
    .case-in .meta{order:2}
    .case-in .right{order:3;width:100%;flex:none}
    .case-in .text{order:4}
    .case-facts,.case-toc{position:static}
    .case-in h1{font-size:24px}
}
@media(max-width:768px){
    .case-in h1{font-size:22px}
    .case-in .meta{margin-top:16px;padding-bottom:16px;font-size:14px}
    .case-in .text{font-size:14px;line-height:22px}
    .case-in .text h2{font-size:20px}
    .case-in .text h3{font-size:16px}
}
@media (hover:hover) and (pointer:fine){
    .case-toc a:hover{color:var(--c-accent)}
}

.case-products{padding:65px 0 80px;background:#fff}
.case-products .container{max-width:1180px}
.case-products .title-24{margin-bottom:40px;padding:0;border-radius:0;background:transparent;font-weight:500;color:var(--c-black)}
.case-products .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.case-products .list{display:flex;flex-direction:column;gap:14px;height:100%;min-width:0;padding:16px;border:1px solid #ededed;border-radius:12px;background:#fdfdfd}
.case-products .img{display:flex;align-items:center;justify-content:center;width:100%;height:220px}
.case-products .img img{max-width:100%;max-height:100%;object-fit:contain}
.case-products h4{margin:0;font-size:16px;line-height:1.35;font-weight:500}
.case-products h4 a{color:var(--c-black);text-decoration:none}
.case-products p{margin:6px 0 0;font-size:14px;line-height:1.45;color:#666}
.case-products .summary{margin:10px 0 0;font-size:16px;line-height:1.4;color:#666;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1330px){
    .case-products .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
    .case-products{padding:36px 0 48px}
    .case-products .grid{grid-template-columns:1fr}
}
@media (hover:hover) and (pointer:fine){
    .case-products .list:hover{border-color:var(--c-accent)}
    .case-products h4 a:hover{color:var(--c-accent)}
}
@media (max-width: 899px) {
    .banner-all{height:220px}
    .banner-all .h1{font-size:32px}
}