@charset "UTF-8";
ul.case-list li a{
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 8px rgb(125 125 125);
    box-sizing: border-box;
    display: block;
    text-decoration: none;
}
ul.case-list li a img{
    border-radius: 6px 6px 0 0;
}
ul.case-list li a h3{
    font-size: 1.6rem;
    padding-top: 0;
}
ul.case-list li a h3::before{
    content: none;
}
ul.case-list li a dl{
    padding:.5vw 0;
    margin: 0 1vw;
    display: flex;
}
ul.case-list li a dl:first-of-type{
    border-top: #707070 1px solid;
    padding-bottom:0;
}
ul.case-list li a dl:last-of-type{
    border-bottom:#707070 1px solid;
}
ul.case-list li a dt{
    border-right: #707070 1px solid;
    width: 4em;
    padding: 0 0.5vw 0 0;
    line-height: 1.6;
    font-size: 1.4rem;
}
ul.case-list li a dd{
    padding: 0 0 0 0.5vw;
    line-height: 1.6;
}
ul.case-list li a p.txt-link{
    margin: 1vw;
}
.container h3{
    font-weight:normal;
}
.container h4{
    font-size: 1.8rem;
    position:relative;
    padding-left:34px;
}
h4::before{
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: linear-gradient(135deg, rgb(86, 20, 109) 0%, rgb(0, 1, 133) 50%, rgb(0, 187, 154) 100%);
    position: absolute;
    top: 13px;
    left: 0;
}
h4.problem{
    border:2px solid #690074;
    border-image:linear-gradient(to right, #56146D, #000185, #00B29A);
    border-image-slice:1;
    text-align:center;
    padding:16px 24px;
    display:inline-block;
    margin-bottom:25px;
}
h4.problem::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    box-sizing:border-box;
    background:#ffffff !important;
    width:100%;
    height:100%;
    background-clip:content-box;
    
}
dl.customer{
    border-bottom:#707070 solid 1px;
    padding-bottom:24px;
    margin-bottom:24px;
}
dl.details{
    display:flex;
}
dl.details dt{
    width:6em;
}
@media only screen and ( max-width : 768px ) {
.container h1 {
    background-image: url(../../../images/title_sp.webp);
}
.container h3{
    font-size:2.0rem;
}
.container p.problem{
    margin-bottom: 8vw;
}
.box-right{
    margin-bottom:8vw;
}
dl.customer{
    padding-bottom:6vw;
    margin-bottom: 4vw;
}
dl.customer dt{
    margin-bottom:2vw;
}
dl.details:last-child{
    border-bottom:solid 1px #707070;
}
dl.details dt{
    margin-bottom: 4vw;
}
}
@media only screen and ( min-width : 769px ) {
.col-wrapper{
    position:relative;
    overflow:hidden;
}
.container h1 {
    background-image: url(../../../images/title_pc.webp);
}
.container h3{
    font-size:2.9rem;
    width:560px;
}
.container h4{
    width:560px;
    box-sizing: border-box;
}
.container h4.problem{
    width:auto;
}
.col-wrapper p{
    width:560px;
}
.container p.problem{
    margin-bottom: 120px;
}
ul.case-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
ul.case-list li{
    width: calc(33.3% - 36px);
    background-color: #fff;
    align-items: stretch;
    display: flex;
}
ul.case-list li a img{
    margin-bottom: 1vw;
}
ul.case-list li a p{
    margin-left: 1vw;
    margin-bottom: 1vw;
}
ul.case-list li a h3{
    margin: 1vw;
}
.box-right{
    float:right;
    margin-left:80px;
    width:560px;
    position:absolute;
    top:40px;
    right:0;
}
.f-right{
    float:right;
    margin:0 0 60px 80px;
    width:560px;
}
dl.customer{
    display:flex;
    justify-content: space-between;
}
dl.customer dd a{
    position:relative;
}
dl.customer dd a::after{
        content: '';
        display: inline-block;
        background-image: url(../../../../images/arrow_link_black.svg);
        width: 1em;
        height: 1em;
        background-size: contain;
        vertical-align: middle;
        margin-left: .5em;
}
dl.details dt{
    margin-bottom: 14px;
}
}