@charset "UTF-8";
/* CSS Document */

/*==================================
  Cases Archive
==================================*/

.cases-archive{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px !important;
}

/*==================================
  Section
==================================*/

.cases-archive__section{
    margin-bottom:90px;
}

/*==================================
  Heading
==================================*/

.cases-archive__heading{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:40px;
}

.cases-archive__line{
    width:6px;
    height:34px;
    background:#2F6B3D;
    border-radius:10px;
}

.cases-archive__heading h2{
    margin:0;
    font-size:32px;
    font-weight:700;
    color:#222;
    line-height:1.3;
}

/*==================================
  Grid
==================================*/

.cases-archive__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px;
}

/*==================================
  Card
==================================*/

.cases-archive__card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.cases-archive__card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(0,0,0,.14);
}

.cases-archive__card a{
    display:block;
    color:inherit;
    text-decoration:none;
}

/*==================================
  Image
==================================*/

.cases-archive__image{
    aspect-ratio:16/9;
    overflow:hidden;
    background:#f5f5f5;
}

.cases-archive__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
    display:block;
}

.cases-archive__card:hover .cases-archive__image img{
    transform:scale(1.05);
}

/*==================================
  Body
==================================*/

.cases-archive__body{
    padding:24px;
}

.cases-archive__body h3{
    margin:0 0 20px;
    font-size:22px;
    line-height:1.6;
    color:#222;
    font-weight:700;
}

/*==================================
  Company
==================================*/

.cases-archive__company{
    display:flex;
    align-items:center;
    gap:14px;
    padding-top:18px;
    border-top:1px solid #ececec;
}

.cases-archive__company img{
    width:56px;
    height:56px;
    object-fit:contain;
    flex-shrink:0;
}

.cases-archive__company span{
    font-size:15px;
    color:#555;
    font-weight:500;
}

/*==================================
  Responsive
==================================*/

@media(max-width:991px){

    .cases-archive{
        padding:60px 20px;
    }

    .cases-archive__grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .cases-archive__heading h2{
        font-size:28px;
    }

}

@media(max-width:767px){

    .cases-archive{
        padding:40px 16px;
    }

    .cases-archive__section{
        margin-bottom:60px;
    }

    .cases-archive__heading{
        margin-bottom:28px;
        gap:12px;
    }

    .cases-archive__line{
        height:28px;
    }

    .cases-archive__heading h2{
        font-size:24px;
    }

    .cases-archive__body{
        padding:20px;
    }

    .cases-archive__body h3{
        font-size:18px;
        margin-bottom:16px;
    }

    .cases-archive__company img{
        width:48px;
        height:48px;
    }

    .cases-archive__company span{
        font-size:14px;
    }

}

/*==================================
  Category Navigation
==================================*/

.cases-archive-nav{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:60px;
}

.cases-archive-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    border:1px solid #2F6B3D;
    border-radius:999px;
    color:#2F6B3D;
    background:#fff;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.cases-archive-nav a:hover{
    background:#2F6B3D;
    color:#fff;
}

/* スクロール位置をヘッダー分ずらす */
.cases-archive__section{
    scroll-margin-top:100px;
}

/*=============================
 Badge
=============================*/

.cases-archive__badge{

    display:inline-flex;

    padding:6px 14px;

    background:#EEF7F0;

    color:#2F6B3D;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;

}

/*=============================
 Logo
=============================*/

.cases-archive__logo{

    width:64px;

    height:64px;

    background:#fff;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:1px solid #eee;

    flex-shrink:0;

}

.cases-archive__logo img{

    width:80%;

    height:80%;

    object-fit:contain;

}

/*=============================
 Company
=============================*/

.cases-archive__company{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:24px;

    padding-top:20px;

    border-top:1px solid #eee;

}

/*=============================
 More Button
=============================*/

.cases-archive__more{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:24px;

    color:#2F6B3D;

    font-weight:700;

    transition:.3s;

}

.cases-archive__more span{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#2F6B3D;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}

.cases-archive__card:hover .cases-archive__more{

    color:#1d5128;

}

.cases-archive__card:hover .cases-archive__more span{

    transform:translateX(6px);

}

/*==================================
  Scroll Animation
==================================*/

.cases-archive__section{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.cases-archive__section.is-active{

    opacity:1;

    transform:translateY(0);

}

/*==================================
  Card Hover
==================================*/

.cases-archive__card{

    position:relative;

}

.cases-archive__card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(47,107,61,.08),
        rgba(255,255,255,0)
    );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.cases-archive__card:hover::after{

    opacity:1;

}

.cases-archive__image{

    position:relative;

}

.cases-archive__image::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.08);

    opacity:0;

    transition:.3s;

    z-index:1;

}

.cases-archive__card:hover .cases-archive__image::before{

    opacity:1;

}

.cases-archive__image img{

    transition:transform .5s ease;

}

.cases-archive__card:hover .cases-archive__image img{

    transform:scale(1.08);

}

/*==================================
  Hover Lift
==================================*/

.cases-archive__card{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.cases-archive__card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}