@charset "UTF-8";
/********************************
#wrapper {
    margin: 0;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
.container {
    flex: 1;
}

#wrapper {
    height: 100%;
    min-height: 100vh;
    position: relative;
    padding-bottom: 24px;
    box-sizing: border-box;
}
footer {
    width: 100%;
    position: absolute;
    bottom: 0;
}
******************************/

/***************************************************************** 2 COLUMN ***********************************************************************/
.container {
    width: 100%;
    margin: auto;
    padding-right: 15px;
    padding-left: 15px;
    margin-top: 8rem;
}
.contents {
    width: 100%;
    margin: auto;
    padding-right: 15px;
    padding-left: 15px;
}
.main, .side {
    position: relative;
    min-height: 1px;
}
@media screen and (min-width: 768px) {
    .container {
        margin: auto;
        max-width: 1200px;
        margin-top: 8rem;
    }
    .contents-wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .main, .side {
      padding-right: 50px;
      padding-left: 0;
    }
    .side {
      padding-left: 0;
    }
    #breadcrumbnav {
      padding: 1.2rem 0;
      font-size: 1.1rem;
    }
    .main {
      width: 75%;
      order: 1;
    }
    .side {
      width: 25%;
      order: 2;
    }
    .push {
      left: 25%;
    }
    .pull {
      right: 75%;
    }

    /* CONTACT */
    .case-bottom-area-02 .container {
        margin: 4rem auto;
    }

    /* CONCEPT */
    #concept {
        margin: auto;
        max-width: 800px;
    }
}

/***************************************************************** CONTENTS WRAP ***********************************************************************/
.contents-wrap {
    display: flex;
    flex-direction: column;
}

/*
.contents-wrap:nth-child(odd) {
    flex-direction: column;
}
*/

.contents-text, .contents-img {
    width: 100%;
    /*flex: 1;*/
}

.contents-text {
    /*padding: 3rem;*/
    padding: 0;
}

/*************************************************************************  
section.list .contents-wrap {
    margin: 0 6rem;
}
**************************************************************************/
section.case .contents-text {
    max-width: 90%;
    margin: 1em auto;
}

.contents-text h2 {
    /*text-align: center;*/
    font-size: 2em;
}

section.case-category .contents-wrap {
    width: 80%;
    margin-bottom: 2rem;
}

section.main-area .contents-img {
    height: 500px;
}

@media screen and (min-width: 768px) {
    .contents-wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    /* ���� � 
    .contents-wrap:nth-child(odd) {
        flex-direction: row-reverse;
    }
    */
    /* ���� ���� 
    .contents-wrap:nth-child(even) {
        flex-direction: row-reverse;
    }
    */
    .contents-text {
      width: 63%;
      /*flex: 2;*/
    }
    .contents-img {
      width: 32%;
      /*flex: 1;*/
    }
    .contents-text h2 {
      /*margin-bottom: 2rem;*/
      /*font-size: 2.2rem;*/
    }
    .contents-img img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* PRODUCTS */
    section.list .contents-wrap {
        justify-content: flex-start;
    }

    /* main-area */
    section.main-area .contents-wrap {
        margin: 0;
    }
    section.main-area .contents-wrap {
      flex-direction: row-reverse;
      /*height: 400px;*/
    }
    section.main-area .contents-text {
      width: 49%;
      padding: 8rem 0;
    }
    section.main-area .contents-img {
      width: 49%;
    }
}
/*******************************************************
@media screen and (min-width: 1140px) {
    section.main-area .contents-text {
      padding: 6em 10em;
    }
}
***********************************************************/
/***************************************************************** CONTENTS BOX WRAP ***********************************************************************/
.contents-item, .contents-box1, .contents-box2, .contents-box3 .contents-box4 .contents-box5 {
    width: 100%;
    margin-bottom: 2rem;
}

.contents-box-wrap.ls .contents-box2 {
    width: 100%;
    padding: 0 30px;
}

.contents-box3 {
    margin-bottom: 2rem;
}
.contents-box4 {
    margin: 4rem 0;
}
section.case-bottom-area-01 .contents-box4 {
    margin: 8rem 0;
}


.contents-item {
    width: 100%;
    margin-bottom: 2rem;
}
.contents-item .column-post {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 300px;
    padding: 4rem 0 0;
}
.contents-item h2 {
    margin: 0;
}
@media screen and (min-width: 768px) {
    .contents-box-wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .contents-box-wrap-reverse {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      flex-direction: row-reverse;
    }
    .case-list.contents-box-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-bottom: 10rem;
    }
    .contents-box-right {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      text-align: right;
    }
    .contents-box-wrap .contents-box3:nth-child(3n+2):last-child {
      margin-left: auto;
      margin-right: 35%;
    }
    .contents-box-wrap.ls .contents-box2 {
      width: 25%;
      padding: 0;
    }
    .main-box {
      width: 100%;
      background-color: #f0f0f0;
    }
    .contents-box {
      margin-bottom: 1rem;
      width: 100%;
      /*background-color: #f0f0f0;*/
    }

    .contents-item {
        width: 25%;
    }



    .contents-box1 {
      margin-bottom: 1rem;
      /*padding: 1rem;*/
      width: 100%;
      /*background-color: #f0f0f0;*/
    }
    .contents-box2 {
      margin-bottom: 1rem;
      /*padding: 1rem;*/
      width: 48%;
      /*background-color: #f0f0f0;*/
    }
    .contents-box3 {
      margin-bottom: 1rem;
      /*padding: 1rem;*/
      width: 31%;
      /*background-color: #f0f0f0;*/
    }
    .contents-box4 {
        width: 30%;
        padding: 1rem;
        margin: 0 1.2rem 10rem;
    }
    .contents-box5 {
      margin-bottom: 1rem;
      /*padding: 1rem;*/
      width: 19%;
      /*background-color: #f0f0f0;*/
    }

    .main-box img {
      display: block;
      margin-bottom: 3rem;
      width: 100%;
      height: auto;
    }
    .contents-box1 img, .contents-box2 img, .contents-box3 img, .contents-box4 img, .contents-box5 img {
      display: block;
      /*margin-bottom: 3rem;*/
      width: 100%;
      height: auto;
    }
    .contents-box1 h2, .contents-box2 h2, .contents-box3 h2, .contents-box4 h2, .contents-box5 h2 {
      /*margin-bottom: 2rem;*/
      /*font-size: 2.2rem;*/
      /*text-align: center;*/
      /*font-size: 14px;*/
      line-height: 1;
      /*letter-spacing: 2.4px;*/
      font-weight: 400;
    }
    section.case-bottom-area-01 .contents-box4 {
        margin: 0 0 8rem;
    }
}

@media screen and (min-width: 1024px) {
    .case-list .contents-box4 {
        width: 20%;
        margin: 0 2.4rem 10rem;
    }
}


@media screen and (min-width: 1140px) {
/*
    .case-list.contents-box-wrap {
        display: flex;
        justify-content: flex-start;
    }
*/
    .case-list .contents-box4 {
        margin: 0 2.9rem 10rem;
    }

}