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

/* **************************
head-image
************************** */
.head_img{
    background: url("../img/benefit/top-image.jpg")no-repeat 0 0;
    background-size: cover;
    text-align: center;
    padding: 120px 0;
}
.head_img h1{
    color: #FFFFFF;
    font-size: 32px;
    font-weight: bold;
}

.department{
    background:#F9F8F1;
    position: sticky;
    top: 80px;
    z-index: 999;
}
.department ul{
    max-width:960px;
    display:flex;
    margin:auto;
    justify-content: space-between;
}
.department ul li{
    width:30%;
    text-align:center;
}
.department ul li a{
    display:block;
    width:100%;
    padding: 8px;
}
.department ul li a:hover{
    color:var(--main-color);
}

.benefit .benefit_case{
    margin-top:-24px;
    padding-top:24px;

}

.benefit .benefit_case .inner{
    max-width:960px;
    margin:auto;
    padding:96px 0;
}

.benefit .benefit_case:nth-child(3){
    background:#EEE;
}

.benefit .benefit_case h2{
    text-align:center;
    font-size:32px;
    font-weight:bold;
    margin-bottom: 24px;
}

.benefit .benefit_case span.dept{
    display:table;
    margin:auto;
    text-align:center;
    font-size:14px;
    font-weight:normal;
    background:#989898;
    color:#FFFFFF;
    padding:2px 16px;
}

.benefit .benefit_case .step ol{
    display:flex;
    justify-content:space-between;
    margin:40px 0;
    flex-wrap: wrap;
}

.benefit .benefit_case .step ol li{
    background:#FFFFFF;
    padding: 24px;
    width: 31%;
    border-radius: 16px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3);
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    position: relative;
}

.benefit .benefit_case .step ol li:nth-child(1)::after,
.benefit .benefit_case .step ol li:nth-child(2)::after{
    background: url(../img/benefit/case_arrow.png) right center no-repeat;
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    right: -9%;
}

.benefit .benefit_case .step ol li.no-arrow:nth-child(1)::after,
.benefit .benefit_case .step ol li.no-arrow:nth-child(2)::after{
    background: none
}

.benefit .benefit_case .step ol li .title{
    display:table;
    font-weight:bold;
    line-height:1.2;
    font-size: 20px;
    margin: 0 auto;
}

.benefit .benefit_case .step ol li .title span{
    font-size: 16px;
    padding-bottom: 4px;
    display:block;
    font-weight:bold;
    color:var(--main-color);
    text-align:center;
}

.benefit .benefit_case .step ol li .img{
    margin-top: 12px;
}

.benefit .benefit_case .point{
    background:#F9F8F1;
    padding:24px;
}

.benefit .benefit_case .point h3{
    font-size:20px;
    font-weight:bold;
    color:var(--main-color);
}



@media screen and (max-width: 960px) {
.benefit .benefit_case .inner{
    padding: 8% 5%;
}

}

@media screen and (max-width: 768px) {
/* **************************
head-image
************************** */
    .head_img{
        padding: 64px 0;
    }
    .head_img h1{
        font-size: 20px;
    }

    .department{
        top: 40px;
    }
    .department ul li a{
        font-size: 13px;
        padding:12px;
    }
    .department ul li a:hover{
        color: inherit;
    }
    .benefit .benefit_case{
        margin-top: -5%;
        padding-top: 10%;
    }
    .benefit .benefit_case h2{
        font-size:22px;
        line-height:1.2;
        text-align:left;
    }
    .benefit .benefit_case span.dept{
        margin:8px auto;
    }

    .benefit .benefit_case .step ol li{
        width: 100%;
        margin-bottom:32px;
    }
    .benefit .benefit_case .step ol li:last-child{
        margin-bottom:0;
    }
    .benefit .benefit_case .step ol li:nth-child(1)::after,
    .benefit .benefit_case .step ol li:nth-child(2)::after{
        background: url(../img/benefit/case_arrow.png) right center no-repeat;
        right: 0;
        left: 0;
        bottom: -28px;
        margin: auto;
        transform: rotateZ(-30deg);
    }
    #case01 .point{
        margin-bottom:8%;
    }

    .benefit .benefit_case .step ol li .img{
        margin:12px auto 0;
    }



}