@charset "UTF-8";
/*
 * 施工事例（works）一覧 /works/（2026-10-04 新規）
 * category.php（.category #case-box）と同じ見た目。全ルールを #works-archive の中に限定
 */

/* ===== PC（431px以上） ===== */
#works-archive #mp{ background:url(../images/case/mp.png)center top no-repeat; margin-bottom: 50px;}

#works-archive #main{ background:#EFF7FF;}
#works-archive .breadcrumb .inner{ width:inherit;}
#works-archive #case-box{ padding:40px 0 50px; width: 1100px; margin:auto;}
#works-archive #case-box .lead{ text-align: center; line-height: 2em; padding:20px 0 10px;}
#works-archive #case-box .area-01{ overflow: hidden; text-align: center; width: 100%; padding:20px 0;}
#works-archive #case-box .area-01 .entry{ width: 350px; float: left; margin:0 25px 25px 0;}
#works-archive #case-box .area-01 .entry:nth-of-type(3n){ margin-right: 0;}
#works-archive #case-box .area-01 .entry a{ background:#fff; padding:5px 5px 15px; border-radius:15px; display: block; text-decoration: none; border: 1px solid #CDE2F8; box-shadow:0 4px 4px rgba(0,0,0,.03),0 2px 3px -2px rgba(0,0,0,.02);}
#works-archive #case-box .area-01 .entry a .img{ width: 100%; height:200px; border-radius:10px 10px 0 0; overflow: hidden; margin-bottom: 25px; }
#works-archive #case-box .area-01 .entry a .img img{ width: 100%; height:100%; object-fit: cover; transition:.5s;}
#works-archive #case-box .area-01 .entry a:hover .img img{ transform:scale(1.05);}
#works-archive #case-box .area-01 .entry .inner{ padding:0 20px;}
#works-archive #case-box .area-01 .entry h3{ font-size: 16px; font-weight: bold; text-align: left; margin-bottom: 10px; transition:.5s;}
#works-archive #case-box .area-01 .entry .product{ font-size: 13px; color:#00A3DF; text-align: left; margin-bottom: 15px;}
#works-archive #case-box .area-01 .entry ul{ overflow: hidden; width: 100%;}
#works-archive #case-box .area-01 .entry ul li:nth-child(1){ font-size: 13px; float: left; border: 1px solid #E0E0E0; border-radius:50px; padding:5px 10px;}
#works-archive #case-box .area-01 .entry ul li:nth-child(1):empty{ display: none;}
#works-archive #case-box .area-01 .entry ul li:nth-child(2){ font-size: 13px; color:#999; float: right; letter-spacing: normal; padding-top:5px;}
#works-archive #case-box .area-01 .entry a:hover{ box-shadow:rgba(0,0,0,.1) 0 4px 4px,rgba(0,0,0,.09) 0 2px 3px -2px; opacity:1;}
#works-archive #case-box .area-01 .entry a:hover h3{ color:#00A3DF;}
#works-archive #case-box .area-01 .empty{ padding:40px 0;}

/* ===== スマホ（430px以下） ===== */
@media screen and (max-width:430px){
    #works-archive #mp{ background:url(../images/case/mp.png)left -250px top no-repeat; background-size:auto 150px; margin-bottom: 0;}
    #works-archive #case-box{ padding:20px 0 30px; width: auto;}
    #works-archive .breadcrumb{ padding:0 0 10px;}
    #works-archive .breadcrumb .inner{ width:min(1200px, 90%);}
    #works-archive #case-box .lead{ text-align: left; padding:10px 5% 0; font-size: 14px;}
    #works-archive #case-box .area-01{ padding:20px 5%; box-sizing: border-box;}
    #works-archive #case-box .area-01 .entry{ width: 100%; float: none; margin:0 0 20px;}
    #works-archive #case-box .area-01 .entry:last-of-type{ margin-bottom: 0;}
    #works-archive #case-box .area-01 .entry a{ padding:5px 5px 15px; border-radius:10px;}
    #works-archive #case-box .area-01 .entry a .img{ height:180px; margin-bottom: 20px;}
    #works-archive #case-box .area-01 .entry .inner{ padding:0 10px;}
    #works-archive #case-box .area-01 .entry h3{ font-size:15px; letter-spacing: normal;}
}