@charset "UTF-8";

body {
    position: relative;
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4,h5,h6,p,ul,li,figure {
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
}
.pc_only {
    display: block !important;
}
.sp_only {
    display: none !important;
}
header,footer {
    min-width: 960px;
}
footer {
    margin: 0;
}
@media (min-width: 641px) {
    .img_item {
        max-width: 208px;
    }
}

@media (max-width: 640px) {
    body {
        min-width: 100% !important;
    }
    .pc_only {
        display: none !important;
    }
    .sp_only {
        display: block !important;
    }
}

/*========== #example ==========*/
#example {
    margin: 58px 0 0;
    min-width: 960px;
}
#content {
    min-width: 960px;
}
#example .exampleHead_block {
    background: #EFEFEF;
    max-width: none;
    padding: 0;
    margin: 0 0 60px;
    color: #000;
}
#example .exampleHead_block_wrapper {
    max-width: 1336px;
    width: auto;
    margin: 0 auto;
}
#example .example_title {
    font-size: 35px;
    line-height: 1.4;
    font-weight: bold;
    padding: 20px 0;
    display: flex;
    -ms-flex-line-pack: center;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
#example span.example_title_border {
    display: flex;
    max-width: 198px;
    width: 100%;
    margin-right: 19px;
}
@media (max-width: 1360px) {
    #example .example_title {
        flex-direction: inherit;
        justify-content: flex-start;
        max-width: 900px;
        width: 100%;
        margin: 0 auto;
    }
    #example span.example_title_border {
        margin-left: 19px;
    }
}
#example .example_block {
    background: #FFF;
    font-weight: bold;
    max-width: 900px;
    width: auto;
    margin: 0 auto;
    padding: 0 0 100px;
    color: #000;
}
#example .example_block .general_h2 {
    margin: 0 0 40px;
    padding: 10px 0;
    font-size: 20px;
    line-height: 1.5;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}
#example .example_lists.all {
    margin-bottom: 80px;
}
#example .example_lists.all::before{
    content: none;
}
#example .example_lists.all::after{
    content: none;
}
#example .example_lists.all .example_list {
    display: flex;
    justify-content: center;
}
#example .example_lists.all .example_list_img {
    margin: 0 75px 0 0;
}
#example .example_list_inner {
    margin: 35px 0 0;
}
#example .example_list_inner p {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 500;
    margin-bottom: 20px;
}
#example .example_lists.all .example_list_cvBtn a {
    max-width: 284px;
    padding: 15px 0;
}

#example .example_lists.single .example_list:nth-of-type(4n) {
    margin-bottom: 40px;
}
#example .example_lists {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#example .example_lists::before{
    content:"";
    display: block;
    width:208px;
    order:1;
}
#example .example_lists::after{
    content:"";
    display: block;
    width:208px;
}
#example .example_list h3 {
    font-size: 14px;
    line-height: 1.5;
    height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 14px;
    border-left: 4px solid #C30D23;
    box-sizing: border-box;
    margin: 0 0 5px;
}
#example .example_list h3 span {
    font-size: 12px;
    line-height: 2;
    font-weight: 500;
}
#example .example_list_img {
    margin: 0 0 15px;
}
#example .example_list_cvBtn a {
    display: block;
    max-width: 208px;
    width: 100%;
    margin: 0 auto;
    -ms-flex-line-pack: center;
    text-align: center;
    color: #fff;
    background: #C30D23;
    font-size: 14px;
    line-height: 1.4;
    padding: 12px 0;
}
#example .example_list_cvBtn a span {
    position: relative;
    padding: 0 0 0 30px;
}
#example .example_list_cvBtn a span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    background: url(/img/ss/products/controls/customers-voice/icon_download.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transform: translate(0, -50%);
}

#example .archive_ancher li {
    font-size: 14px;
}

@media (max-width: 640px) {
    header,footer {
        min-width: auto;
    }
    /*========== #example ==========*/
    #example {
        margin: 40px 0 0;
        min-width: auto;
    }
    #example .exampleHead_block {
        margin: 0 0 48px;
    }
    #example .example_title {
        font-size: 22px;
        line-height: 1.4;
        font-weight: bold;
        padding: 15px 0 15px 14px;
        display: flex;
        -ms-flex-line-pack: center;
        align-items: center;
        justify-content: flex-start;
        flex-direction: inherit;
        white-space: nowrap;
    }
    #example span.example_title_border {
        max-width: 169px;
        width: 100%;
        margin: 0 0 0 15px;
    }
    #example .example_block {
        padding: 0 0 60px;
    }
    #example .example_block .general_h2 {
        margin: 0 0 24px;
        padding: 10px 0 10px 15px;
        font-size: 20px;
        line-height: 1.5;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    }
    #example .example_list_inner {
        margin: 0;
    }
    #example .example_lists.all {
        margin-bottom: 48px;
    }
    #example .example_lists.all .example_list_cvBtn a {
        max-width: none;
        padding: 13px 0;
    }
    #example .example_lists.all .example_list {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    #example .example_lists.all .example_list_img {
        margin: 0 0 10px;
    }

    #example .example_lists.single .example_list:nth-of-type(4n) {
        margin-bottom: 40px;
    }
    #example .example_lists {
        display: block;
        padding: 0 15px;
    }
    #example .example_list:not(:last-child) {
        margin: 0 0 40px;
    }
    #example .example_list h3 {
        font-size: 16px;
        line-height: 1.3;
        height: 56px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 0 0 14px;
        border-left: 4px solid #C30D23;
        box-sizing: border-box;
        margin: 0 0 10px;
    }
    #example .example_list h3 span {
        font-size: 13px;
        line-height: 1.7;
    }
    #example .example_list_img {
        margin: 0 0 10px;
    }
    #example .example_list_cvBtn a {
        max-width: none;
        width: 100%;
        -ms-flex-line-pack: center;
        text-align: center;
        background: #C30D23;
        font-size: 16px;
        line-height: 1.5;
        padding: 15px 0;
    }
    #example .example_list_cvBtn a span {
        position: relative;
        padding: 0 0 0 35px;
    }
    #example .example_list_cvBtn a span::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 20px;
        height: 20px;
        background: url(/img/ss/products/controls/customers-voice/icon_download.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        transform: translate(0, -50%);
    }
    #content {
        min-width: auto;
    }
}