@charset "UTF-8";

.company #company_list.content{
    max-width: unset;
    width: 100%;
    margin: 0 auto;
}
.company .content .top{
    color: var(--color01);
    line-height: 2.1em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto 5%;
}
.company .content .top .inner{
    width: 66%;
    margin: 0 auto 5%;
}
.company .content .top .inner dl{
    background: var(--color08);
    box-shadow: 2px 2px 8px var(--colorL);
    border-left: 5px solid var(--color01);
    font-family: var(--fontS);
    margin: 0 auto 5%;
    padding: 5% 8%;
}
.company .content .top .inner .goal{
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
}
.company .content .top .inner .goal h4{
    width: 15%;
    padding: 0 2% 0 0;
}
.company .content .top .inner .goal ol{
    width: 85%;
}
.company .content .top .inner .goal ol li{
    border-bottom: 1px solid var(--color01);
    width: 100%;
    margin: 0 0 10px;
    padding: 0 10px 5px 10px;
}
.company .content .top .inner .goal ol li i{
    padding: 0 20px;
}
.company .content .top figure{
    width: 30%;
    margin: 0 0 0 0;
}
.company .content .outline,
.company .content .history{
    width: 100%;
    margin: 0 auto;
    padding: 5% 0 1%;
}
.company .content .outline{
    background: var(--color01);
}
.company .content .history{
    background: var(--color05);
}
.company .content .outline h3,
.company .content .history h3{
    font-size: 20px;
    margin: 0 auto 3%;
    padding: 2% 0 2% 80px;
    position: relative;
    max-width: 1100px;
    width: 90%;
}
.company .content .outline h3{
    color: var(--colorW);
}
.company .content .history h3{
    color:var(--color01);
}
.company .content .outline h3:before,
.company .content .history h3:before{
    content: "";
    width: 60px;
    height: 70px;
    position: absolute;
    top:50%;
    left: 0;
    transform: translate(0,-50%);
}
.company .content .outline h3:before{
    background: url(/images/common/icon_title_w.svg);
    background-size: 100%;
    background-repeat: no-repeat;

}
.company .content .history h3:before{
    background: url(/images/common/icon_title.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}
.company .content .outline dl,
.company .content .history dl{
    color: var(--color01);
    display: flex;
    flex-wrap: wrap;
    max-width: 1100px;
    width: 90%;
    margin: 0 auto 3%;
}
.company .content .outline dl dt,
.company .content .history dl dt{
    background: var(--colorW);
    width:30%;
    margin: 0 0 1% 0;
    padding:3% 3%;
}
.company .content .outline dl dd,
.company .content .history dl dd{
    background: var(--colorW);
    line-height: 1.8em;
    width:58%;
    margin: 0 0 1% 1%;
    padding:3% 3%;
    flex-grow: 1;
}
.company .content .history dl dt,
.company .content .history dl dd{
    padding: 1% 3%;
}

@media all and (min-width:769px){
}
@media all and (max-width:768px){
    .company .content h3{
        margin: 0 auto 6%;
    }
    .company .content .outline h3:before,
    .company .content .history h3:before{
        width: 40px;
        height: 50px;
    }
    .company .content .top{
        margin: 0 auto 6%;
    }
    .company .content .top .inner{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 90%;
        margin: 0 auto 6%;
    }
    .company .content .top .inner dl{
        width: 100%;
        margin: 0 auto 6%;
    }
    .company .content .top .inner .goal{
        display: flex;
        flex-wrap: wrap;
        width: 70%;
        margin: 0 2% 0 0;
    }
    .company .content .top .inner .goal h4{
        width: 100%;
        margin: 0 0 1%;
    }
    .company .content .top .inner .goal ol{
        width: 100%;
    }
    .company .content .top .inner .goal ol li{
        font-size:0.8em;
        margin: 0 0 5px;
        padding: 0 5px 0px 5px;
    }
    .company .content .top .inner .goal ol li i{
        padding: 0 10px 0 0;
    }
    .company .content .top .inner figure{
        width: 25%;
    }
    .company .content .outline, .company .content .history{
        padding: 12% 0 6%;
    }
    .company .content .outline h3,
    .company .content .history h3{
        width: 90%;
        margin: 0 auto 6%;
    }
    .company .content .outline dl,
    .company .content .history dl{
        font-size:0.8em;
        width: 90%;
        margin: 0 auto;
    }
}