@charset "utf-8";

.dn-pc {
    display: none;
}
.dn-sp {
    display: block;
}
.conts04--inner .conts04-case .case-02 {
    float: none;
    margin: 0 auto;
}
.caseTtlNum {
    display: none;
}

@media screen and (max-width: 1000px){
    h2 {
        font-size: 30px;
        line-height: 1.4;
    }
    .topHeader {
        width: 100%;
        padding: 0 10px;
    }
    .topHeader .logo {
        margin-right: 0;
    }
    .topHeader .productName {
        display: none;
    }
    .h_nav {
        width: 188px;
    }
    .bottomHeader ul {
        width: 100%;
    }
    .bottomHeader ul li {
        width: 33.3333%;
    }
    .bottomHeader ul li a {
        width: 100%;
        font-size: 16px;
    }
    #title-3 {
        width: 92%;
        margin-left: -360px;
    }
    #title-3 img {
        width: 100%;
        height: auto;
    }
    .conts--ttl {
        min-width: 100%;
        height: auto;
    }
    .conts01--wrap,
    .conts02--wrap,
    .conts03,
    .conts04--inner,
    .conts05,
    .conts06--inner {
        width: 100%;
        padding: 0 15px;
    }
    .conts01--wrap {
        width: 100%;
        padding: 0 15px;
    }
    .conts01--wrap .col2 .col-01 {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        float: none;
    }
    .conts01--wrap .col2 .col-02 {
        float: none;
        max-width: 470px;
        width: 100%;
        margin: 30px auto 0;
    }
    .conts01--wrap .col2 .col-02 img {
        width: 100%;
        height: auto;
    }
    .conts01--before {
        width: 100%;
    }
    .conts01--before .before-01,
    .conts02--wrap .conts02--after .before-01,
    .conts02--wrap .conts02--after .after-01 {
        width: 18%;
    }
    .conts01--before .before-02,
    .conts02--wrap .conts02--after .before-02,
    .conts02--wrap .conts02--after .after-02 {
        width: 82%;
        font-size: 18px;
    }
    .conts01--beforeCase,
    .conts02--wrap .conts02--afterCase {
        width: 100%;
        height: auto;
    }
    .conts01--beforeCase .beforeCase-01,
    .conts02--wrap .conts02--afterCase .beforeCase-01,
    .conts02--wrap .conts02--afterCase .afterCase-01 {
        width: 50%;
        height: auto;
    }
    .conts01--beforeCase .beforeCase-01 > img,
    .conts02--wrap .conts02--afterCase .beforeCase-01 > img,
    .conts02--wrap .conts02--afterCase .conts01--beforeCase .afterCase-01 > img,
    .conts02--wrap .conts02--afterCase .afterCase-01 > img {
        position: initial;
        width: 100%;
    }
    .conts01--beforeCase .beforeCase-02,
    .conts02--wrap .conts02--afterCase .beforeCase-02,
    .conts02--wrap .conts02--afterCase .afterCase-02 {
        width: 50%;
        height: auto;
        padding-left: 25px;
    }
    .conts02 .arrow {
        min-width: 100%;
    }
    .conts02--wrap .col2 .col-01 {
        float: none;
        width: 100%;
        max-width: 488px;
        margin: 0 auto;
    }
    .conts02--wrap .col2 .col-02 {
        float: none;
        width: 100%;
        max-width: 470px;
        margin: 30px auto 0;
    }
    .conts02--wrap .col2 .col-02 img {
        width: 100%;
        height: auto;
    }

    .conts01--before, .conts02--wrap .conts02--after {
        width: 100%;
    }

    .conts01--beforeCase .beforeCase-02 ul li,
    .conts02--wrap .conts02--afterCase .beforeCase-02 ul li,
    .conts02--wrap .conts02--afterCase .afterCase-02 ul li {
        margin-bottom: 25px;
    }

    .conts01--beforeCase .beforeCase-02 .caseTtl,
    .conts02--wrap .conts02--afterCase .beforeCase-02 .caseTtl,
    .conts02--wrap .conts02--afterCase .afterCase-02 .caseTtl{
        width: 100%;
        height: auto;
    }
    .conts01--beforeCase .beforeCase-02 .caseTtl > .ttl,
    .conts02--wrap .conts02--afterCase .beforeCase-02 .caseTtl > .ttl,
    .conts02--wrap .conts02--afterCase .afterCase-02 .caseTtl > .ttl {
        position: initial;
        font-size: 18px;
    }
    .conts01--beforeCase .beforeCase-02 ul > li > p,
    .conts02--wrap .conts02--afterCase .beforeCase-02 ul > li > p,
    .conts02--wrap .conts02--afterCase .afterCase-02 ul > li > p {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.6;
    }

    .conts02--wrap .conts02--afterCase .afterCase-01 {
        width: 50%;
        height: auto;
    }
    .conts02--wrap .conts02--afterCase .afterCase-01 img {
        width: 100%;
        height: auto;
    }

    .conts03 {
        margin-bottom: 50px;
    }
    .conts03--tileCase {
        margin-bottom: 0;
    }
    .conts03--tileCase ul li {
        width: 100%;
        height: auto;
        margin-bottom: 5px;
    }
    .conts03--tileCase ul li .tiletxt {
        width: 100%;
        max-width: 500px;
    }
    .conts03--tileCase ul li .tileImg {
        bottom: 0;
        top: 18px;
        right: 18px;
    }
    .conts03--tileCase ul li.mr {
        margin-left: 0;
        margin-right: 0;
    }
    .conts04 {
        height: auto;
    }
    .conts04 .arrow {
        width: 100%;
    }
    .conts04--inner {
        padding-bottom: 40px;
    }
    .conts04--inner .col2 .col-01 {
        max-width: 450px;
        width: 100%;
        float: none;
        margin: 0 auto 30px;
    }
    .conts04--inner .col2 .col-02 {
        width: 100%;
        float: none;
    }
    .conts04--inner .col2 .col-02 .img {
        width: 100%;
        max-width: 267px;
        float: none;
        margin: 0 auto;
    }
    .conts04--inner .col2 .col-02 .img img {
        width: 100%;
        height: auto;
    }
    .conts04--inner .col2 .col-02 .txt {
        float: none;
        max-width: 450px;
        width: 100%;
        margin: 20px auto;
    }
    .conts04--inner .conts04-case {
        max-width: 645px;
        width: 100%;
        margin: 40px auto 0;
    }
    .conts04--inner .conts04-case .case-02 {
        width: 100%;
        height: auto;
    }
    .conts04--inner .conts04-case .case-02 .tiletxt {
        max-width: 450px;
        width: 100%;
    }
    .conts04--inner .conts04-case .case-02 .tileImg {
        bottom: 0;
        top: 18px;
        right: 18px;
    }
    .conts05 {
        width: 100%;
        padding-bottom: 50px;
    }
    .conts05 .conts05Conts {
        width: 100%;
        max-width: 465px;
        height: auto;
    }
    .copy2 {
        width: 100%;
    }
}
@media screen and (max-width: 767px){
    h2 {
        font-size: 24px;
        line-height: 1.6;
    }
    .dn-pc {
        display: block;
    }
    .dn-sp {
        display: none;
    }
    .caseTtlNum {
        display: inline-block;
    }
    .h_nav {
        width: 160px;
    }
    .topHeader .headerContact {
        width: 160px;
    }
    .bottomHeader ul li a {
        height: auto;
        padding-top: 10px;
        font-size: 11px;
        line-height: 1.6;
    }
    .mainvisual-spImg img {
         width: 100%;
         height: auto;
    }
    .mainvisual-spTxt {
        padding: 30px 15px;
    }
    .conts01 {
        margin-top: 0;
    }
    .conts01 .conts--ttl {
        padding-bottom: 30px;
    }
    .conts01--wrap > h3 {
        line-height: 1.6;
    }
    .conts01--before .before-01,
    .conts02--wrap .conts02--after .before-01,
    .conts02--wrap .conts02--after .after-01 {
        width: 100%;
        height: auto;
        float: none;
        font-size: 14px;
        line-height: 2;
    }
    .conts01--before .before-02,
    .conts02--wrap .conts02--after .before-02,
    .conts02--wrap .conts02--after .after-02 {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        float: none;
        padding: 10px;
        font-size: 16px;
        line-height: 1.6;
    }
    .conts01--before .before-01,
    .conts02--wrap .conts02--after .before-01,
    .conts02--wrap .conts02--after .after-01 {
        width: 100%;
    }
    .conts02 .conts--ttl {
        padding-bottom: 30px;
    }
    .conts03--tileCase ul li .tileImg {
        position: initial;
        margin-top: 20px;
    }
    .conts04--inner .conts04-case .case-02 .tileImg {
        position: initial;
        margin-top: 20px;
    }
    .conts01--beforeCase .beforeCase-01,
    .conts02--wrap .conts02--afterCase .beforeCase-01,
    .conts02--wrap .conts02--afterCase .afterCase-01 {
        width: 100%;
        float: none;
    }
    .conts01--beforeCase .beforeCase-02,
    .conts02--wrap .conts02--afterCase .beforeCase-02,
    .conts02--wrap .conts02--afterCase .afterCase-02 {
        width: 100%;
        float: none;
        padding-left: 0;
    }
    .conts02--wrap .conts02--afterCase .afterCase-01 {
        width: 100%;
    }
    .conts02--wrap .conts02--afterCase .afterCase-02 ul {
        margin-top: 40px;
    }
    .conts02--wrap .conts02--afterCase .afterCase-02 ul li {
        margin-bottom: 25px;
    }
    .copy2 .copyright {
        font-size: 12px;
    }
}