@charset "utf-8";

/* +++++++++++++++++++++++++++++++

 solution.css

+++++++++++++++++++++++++++++++ */

/*
トップ
-----------------------------------*/
#solution_system .inner {
    width: 1200px;
    margin: 0 auto;
}
#solution_system .inner div { position: relative; }
#solution_system .inner div:before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 240px;
    height: 240px;
    margin: -120px 0 0 -120px;
    background: url(../solution/index/bg_system.png) no-repeat left top;
    content: " ";
    z-index: 10;
}

#solution_system .phase {
    float: left;
    width: 598px;
    height: 170px;
    background: #fff;
}


#solution_system .ph_1,
#solution_system .ph_2 { margin-bottom: 4px; }
#solution_system .ph_3 { float: right; }
#solution_system .ph_1,
#solution_system .ph_4 { margin-right: 2px; }
#solution_system .ph_2,
#solution_system .ph_3 { margin-left: 2px; }

#solution_system .title {
    margin: 15px 0;
    color: #003f65;
    font-size: 20px;
    text-align: center;
}
#solution_system .ph_1 .title,
#solution_system .ph_4 .title { padding-right: 110px; }
#solution_system .ph_2 .title,
#solution_system .ph_3 .title { padding-left: 110px; }
#solution_system .phase p {
    width: 280px;
    font-size: 12px;
}
#solution_system .phase p span { font-size: 10px; }
#solution_system .phase ul {
    float: left;
    width: 164px;
}
#solution_system .ph_1 p,
#solution_system .ph_4 p {
    float: left;
    margin: 0 10px 0 20px;
}
#solution_system .ph_2 p,
#solution_system .ph_3 p {
    float: right;
    margin: 0 20px 0 10px;
}
#solution_system .ph_1 ul,
#solution_system .ph_4 ul { float: left; }
#solution_system .ph_2 ul,
#solution_system .ph_3 ul { float: right; }
#solution_system .phase li {
    clear: left;
    margin: 0 2px 3px 0;
    padding: 3px 0 2px;
    background: #003f65;
    color: #fff;
    text-align: center;
    font-size: 11px;
}
#solution_system .phase .half {
    float: left;
    clear: none;
    width: 80px;
}
#solution_system .inner > p {
    clear: both;
    padding-top: 30px;
    color: #fff;
    font-size: 17px;
    text-align: center;
}

/*
開発事例
-----------------------------------*/
#solution_case  .heading03,
#solution_case > div {
    width: 980px;
    margin: 0 auto;
}
#solution_case  .heading03 { margin-bottom: 30px; }
#solution_case .item {
    float: left;
    width: 222px;
}
#solution_case .item:not(:last-child) { margin-right: 30px; }

#solution_case .item .site {
    margin: 0 0 5px;
}
#solution_case .item img { width: 100%; }
#solution_case .tag { padding: 0; }
#solution_case .tag li {
    float: left;
    margin-bottom: 5px;
    padding: 2px 5px;
    background: #003f65;
    font-size: 12px;
}
#solution_case .tag li:not(:last-child ) { margin-right: 5px; }
#solution_case p {
    margin: 0;
}