@charset "utf-8";

/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* CASE LIST */
/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */

.caselist,
.caselist ul,
.caselist li {
  position:relative;
}

@media (max-width: 600px) {
  .caselist {
    width:100%;
    text-align:center;
    padding: 20px 0 50px 0;
  }
    .caselist .caselist_box {
    }
      .caselist .caselist_box p {
        position: absolute;
        font-size:12px;
        line-height:16px;
        text-align:left;
      }
      .caselist .caselist_box .case_head{
        position: absolute;
        top: 24px;
        left: 8px;
        font-size: 18px;
        font-weight: normal;
        color: #003d79;
      }
      .caselist .caselist_box .case_cont {
        top: 60px;
        left: 17px;
        width: 160px;
      }
      .caselist .caselist_box a {
        position: absolute;
        top: 120px;
        left: 10px;
        display:inline-block;
        padding: 5px 50px;
        margin: 0 0 0 0;
      }

    .caselist .case01 {background-image:url(../images/case/caselist01.png);}
    .caselist .case02 {background-image:url(../images/case/caselist02.png);}
    .caselist .case03 {background-image:url(../images/case/caselist03.png);}
    .caselist .case04 {background-image:url(../images/case/caselist04.png);}

    .caselist .case01,
    .caselist .case02,
    .caselist .case03,
    .caselist .case04 {
      display: inline-block;
      width:290px;
      min-height:200px;
      margin: 0 auto 20px 0;
      text-align:center;
      background-position:50% 0%;
      background-repeat:no-repeat;
      background-size: 100% auto;
    }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .caselist {
    width:100%;
    text-align:center;
    padding: 20px 0 50px 0;
  }
    .caselist .caselist_box {
    }
      .caselist .caselist_box p {
        position: absolute;
        font-size:14px;
        line-height:20px;
      }
      .caselist .caselist_box .case_head{
        position: absolute;
        top: 40px;
        left: 10px;
        font-size: 30px;
        font-weight: normal;
        color: #003d79;
      }
      .caselist .caselist_box .case_cont {
        top: 104px;
        left: 45px;
        width: 220px;
      }
      .caselist .caselist_box a {
        position: absolute;
        top: 190px;
        display:inline-block;
        padding: 5px 100px;
        margin: 0 0 0 16px;
        
      }
    .caselist .case01 {background-image:url(../images/case/caselist01.png);}
    .caselist .case02 {background-image:url(../images/case/caselist02.png);}
    .caselist .case03 {background-image:url(../images/case/caselist03.png);}
    .caselist .case04 {background-image:url(../images/case/caselist04.png);}

    .caselist .case01,
    .caselist .case02,
    .caselist .case03,
    .caselist .case04 {
      display: inline-block;
      width:460px;
      min-height:260px;
      margin: 0 20px 20px 20px;
      text-align:left;
      background-position:50% 0%;
      background-repeat:no-repeat;
      background-size: 100% auto;
    }
}

@media (min-width: 1001px) {
  .caselist {
    width:100%;
    padding: 20px 0 50px 0;
  }
    .caselist ul {
      width:1000px;
      text-align:center;
      margin: 0 auto;
    }
    .caselist .caselist_box {
    }
      .caselist .caselist_box p {
        position: absolute;
        font-size:14px;
        line-height:20px;
      }
      .caselist .caselist_box .case_head{
        position: absolute;
        top: 40px;
        left: 10px;
        font-size: 30px;
        font-weight: normal;
        color: #003d79;
      }
      .caselist .caselist_box .case_cont {
        top: 104px;
        left: 36px;
        width: 233px;
      }
      .caselist .caselist_box a {
        position: absolute;
        display:inline-block;
        padding: 5px 100px;
        margin: 0 0 0 15px;
        top: 190px;
      }
    .caselist .case01 {background-image:url(../images/case/caselist01.png);}
    .caselist .case02 {background-image:url(../images/case/caselist02.png);}
    .caselist .case03 {background-image:url(../images/case/caselist03.png);}
    .caselist .case04 {background-image:url(../images/case/caselist04.png);}

    .caselist .case01,
    .caselist .case02,
    .caselist .case03,
    .caselist .case04 {
      display: inline-block;
      width:460px;
      min-height:260px;
      margin: 0 10px 20px 10px;
      text-align:left;
      background-position:50% 0%;
      background-repeat:no-repeat;
      background-size: 100% auto;
    }
}
.caselist .case01 {background-image:url(../images/case/caselist01.png);}
.caselist .case02 {background-image:url(../images/case/caselist02.png);}
.caselist .case03 {background-image:url(../images/case/caselist03.png);}
.caselist .case04 {background-image:url(../images/case/caselist04.png);}

.caselist .case03_soon {background-image:url(../images/case/caselist03_soon.png);}
.caselist .case04_soon {background-image:url(../images/case/caselist04_soon.png);}


/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* CASE DETAIL */
/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */


@media (max-width: 600px) {
  .case_title {
    position:relative;
    padding: 30px 0 0 0;
  }
  .case_title:before {
    z-index:10;
    position:absolute;
    top:0px;
    left:50%;
    content:"";
    display:inline-block;
    vertical-align:text-bottom;
    width: 60px;
    height: 60px;
    margin: 0 0 0 -30px;
    padding:0;
    background-image:url(../images/common/iconset.png);
    background-repeat:no-repeat;
    background-position: -300px -60px;
    background-size: 600px auto;
  }
    .case_title p {
      z-index:20;
      position:absolute;
      top:27px;
      left:50%;
      display:inline-block;
      vertical-align:text-bottom;
      width: 80px;
      height: 80px;
      margin: 0 0 0 -40px;
      text-align:center;
      font-size:12px;
      line-height:12px;
    }
    .case_title .title01 {
      padding-top:40px;
    }
}

@media (min-width: 601px) {
  .case_title {
    position:relative;
    padding: 40px 0 0 0;
  }
  .case_title:before {
    z-index:10;
    position:absolute;
    top:0px;
    left:50%;
    content:"";
    display:inline-block;
    vertical-align:text-bottom;
    width: 80px;
    height: 80px;
    margin: 0 0 0 -40px;
    padding:0;
    background-image:url(../images/common/iconset.png);
    background-repeat:no-repeat;
    background-position: -400px -80px;
    background-size: 800px auto;
  }
    .case_title p {
      z-index:20;
      position:absolute;
      top:35px;
      left:50%;
      display:inline-block;
      vertical-align:text-bottom;
      width: 80px;
      height: 80px;
      margin: 0 0 0 -40px;
      text-align:center;
      font-size:14px;
      line-height:14px;
    }
    .case_title .title01 {
      padding-top:50px;
    }
}


/* ---------------------------------------------------------------------------------------------- */


@media (max-width: 600px) {

  .casedetail_clear {clear: both;}

  .casedetail {
    width:90%;
    margin:0 auto;
  }
  .casedetail:after {
    content:"";
    clear:both;
    height:0;
    display:block;
    visibility:hidden;
  }
    .casedetail .illust {
      float:none;
      width:130px;
      margin:0 auto;
    }
      .casedetail .illust img {
        width:100%;
      }
    .casedetail .text {
      float:none;
      width:auto;
      margin:0;
      padding: 20px 0 0 0;
    }
      .casedetail .text h3 {
        color:#56a3c7;
        font-size:18px;
        font-weight:bold;
        margin: 0 0 10px 0;
      }
      .casedetail .text p {
        margin: 0 0 20px 0;
      }
    .casedetail .data {
      float:none;
      width:auto;
      margin:0 auto 0 auto;
      background-color:#edf5f8;
      padding:15px;
    }
      .casedetail .data h4 {
        padding:0 15px 0 0;
        margin: 0 0 5px 0;
        background-image:url(../images/common/dotline2.png);
        background-repeat:repeat-x;
        background-position:50% 50%;
        background-size: 8px auto;
      }
      .casedetail .data span {
        background-color:#edf5f8;
        padding: 0 10px;
      }

      .casedetail .data table {
        width:100%;
        border-collapse:separate;
        border-spacing:5px;
        background-color:transparent;
        font-size:12px;
        line-height:20px;
      }
        .casedetail .data table th {
          min-width:60px;
          text-align:center;
          background-color:#9bc5d9;
          padding:5px 8px;
          font-weight:bold;
          color:#FFFFFF;
        }
        .casedetail .data table td {
          padding:5px 8px;
        }
          .casedetail .data table td span {
            display:inline-block;
            border: 1px solid #8EC300;
            padding: 3px 5px;
            border-radius:3px;
            -webkit-border-radius:3px;
            -moz-border-radius:3px;
          }
}

@media (min-width: 601px) and (max-width: 1000px) {

  .casedetail_clear {clear: both;}

  .casedetail {
    width:550px;
    margin:0 auto;
  }
  .casedetail:after {
    content:"";
    clear:both;
    height:0;
    display:block;
    visibility:hidden;
  }
    .casedetail .illust {
      float:left;
      width:190px;
      margin:0;
    }
      .casedetail .illust img {
        width:100%;
      }
    .casedetail .text {
      float:right;
      width:330px;
      margin:0;
      padding: 30px 0 0 0;
    }
      .casedetail .text h3 {
        color:#56a3c7;
        font-size:18px;
        font-weight:bold;
        margin: 0 0 10px 0;
      }
      .casedetail .text p {
        margin: 0 0 20px 0;
      }
    .casedetail .data {
      float:none;
      width:520px;
      margin:30px auto 0 auto;
      background-color:#edf5f8;
      padding:15px;
    }
      .casedetail .data h4 {
        padding:0 15px;
        margin: 0 0 5px 0;
        background-image:url(../images/common/dotline2.png);
        background-repeat:repeat-x;
        background-position:50% 50%;
        background-size: 8px auto;
      }
      .casedetail .data span {
        background-color:#edf5f8;
        padding: 0 10px;
      }

      .casedetail .data table {
        width:100%;
        border-collapse:separate;
        border-spacing:5px;
        background-color:transparent;
        font-size:13px;
        line-height:18px;
      }
        .casedetail .data table th {
          min-width:60px;
          text-align:center;
          background-color:#9bc5d9;
          padding:5px 8px;
          font-weight:bold;
          color:#FFFFFF;
        }
        .casedetail .data table td {
          padding:5px 8px;
        }
          .casedetail .data table td span {
            border: 1px solid #8EC300;
            padding: 3px 5px;
            border-radius:3px;
            -webkit-border-radius:3px;
            -moz-border-radius:3px;
          }
}

@media (min-width: 1001px) {

  .casedetail_clear {display:none;}

  .casedetail {
    width:680px;
    margin:0 auto;
  }
  .casedetail:after {
    content:"";
    clear:both;
    height:0;
    display:block;
    visibility:hidden;
  }
    .casedetail .illust {
      float:left;
      width:220px;
      margin:0;
    }
      .casedetail .illust img {
        width:100%;
      }
    .casedetail .text {
      float:right;
      width:440px;
      margin:0;
      padding: 30px 0 0 0;
    }
      .casedetail .text h3 {
        color:#56a3c7;
        font-size:18px;
        font-weight:bold;
        margin: 0 0 10px 0;
      }
      .casedetail .text p {
        margin: 0 0 20px 0;
      }
    .casedetail .data {
      float:right;
      width:410px;
      margin:0;
      background-color:#edf5f8;
      padding:15px;
    }
      .casedetail .data h4 {
        padding:0 15px;
        margin: 0 0 5px 0;
        background-image:url(../images/common/dotline2.png);
        background-repeat:repeat-x;
        background-position:50% 50%;
        background-size: 8px auto;
      }
      .casedetail .data span {
        background-color:#edf5f8;
        padding: 0 10px;
      }

      .casedetail .data table {
        width:100%;
        border-collapse:separate;
        border-spacing:5px;
        background-color:transparent;
        font-size:13px;
        line-height:18px;
      }
        .casedetail .data table th {
          min-width:60px;
          text-align:center;
          background-color:#9bc5d9;
          padding:5px 8px;
          font-weight:bold;
          color:#FFFFFF;
        }
        .casedetail .data table td {
          padding:5px 8px;
        }
          .casedetail .data table td span {
            border: 1px solid #8EC300;
            padding: 3px 5px;
            border-radius:3px;
            -webkit-border-radius:3px;
            -moz-border-radius:3px;
          }

}