img[src$=".svg"], img[src$=".png"], img[src$=".jpg"], svg {
    width: 100%;
}

.casesText {

}

.casesText .contents {
    text-align: left; 
}

.casesText .contents h1,
.casesText .contents h2,
.casesText .contents h3,
.casesText .contents h4,
.casesText .contents h5,
.casesText .contents h6 {
    font-size: 32px; 
    font-weight: bold; 
    margin: 0 0 2em 0;
}

.casesText .contents h2 {
    font-size: 30px; 
}

.casesText .contents h3 {
    font-size: 28px; 
}

.casesText .contents h4 {
    font-size: 26px; 
}

.casesText .contents h5 {
    font-size: 24px; 
}

.casesText .contents h6 {
    font-size: 22px; 
}


.casesText .contents p {
    display: block; 
    width: 100%; 
}

.casesText header {
    text-align: left; 
    padding: 0 10px; 
}

.casesText header span {
    display: block; 
    font-weight: 900; 
    font-size: 16px; 
}

.casesText header h1 {
    display: block; 
    font-size: 32px; 
    font-weight: 400; 
}
.casesText .contents .imgArea{
	margin: 20px 0;
}
.casesText header .headerData {
    width: 100%; 
    border-top: 1px solid #28AED8;
    border-bottom: 1px solid #28AED8;
    padding: 0 0; 
    text-align: left; 
}

.casesText header .headerData span {
    display: block; 
    font-weight: normal; 
    font-size: 14px; 
    border-bottom: 1px dotted #888;
    padding: 5px; 
}

.casesText header .headerData span:last-of-type {
    border-bottom: none;

}


.casesText header .headerData span em {
    font-weight: bold; 
    display: inline-block; 
    font-size: 14px; 
    color: #28AED8; 
    width: 6em; 
}

.casesText .contents p {
    margin: 0 0 2em 0;
}

.mt-image-none {
    display: block; 
    text-align: center; 
    margin: 0 auto;
}



.casesText .contents p.image img {
    max-width: 100%; 
     width: 100%; 
    height: auto; 
}


/* ==================================================
    = 納入事例
================================================== */

.casesIndex {
    display: block; 
}

.casesIndex .filters {
    margin: 0 0 15px 0;
}

.casesIndex .filters .button {
    display: inline-block; 
    padding: 10px 5px 10px 0; 
    margin: 0 7px;
    border-bottom: 1px solid #ccc;
    cursor: pointer; 
}

.casesIndex .filters .button:before {
    content: "\f18e"; 
    font-family: fontAwesome;
    display: inline-block; 
    margin: 0 0.25em 0 0;
}

.casesIndex .filters .button.isChecked {
    border-bottom: 1px solid #28AED8;
    color: #28AED8; 
}

.casesIndex .filters .button.isChecked:before {
    content: "\f0a9"; 
    font-family: fontAwesome;
    display: inline-block; 
    margin: 0 0.25em 0 0;
}

.casesIndex .grid {
    margin: 0 auto;
    position: relative; 
    display: block; 
    width: auto; 
    width: 100%; 
}

.casesIndex .item {
    text-align: left; 
    width: 100%; 
    width: -webkit-calc((100% - 2px));
    width: -moz-calc((100% - 2px));  
    width: calc((100% - 2px)); 
    padding: 7px; 
    position: absolute;
    display: inline-block;
    display: block; 
    margin: 0 0 0 0;
}

.casesIndex .item .innerElement {
    border: 1px solid #ddd;
    padding: 0; 
    background: #fff; 
    position: relative; 
    overflow: hidden; 
    -moz-box-shadow: 0 5px 7px -4px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 5px 7px -4px rgba(0,0,0,0.2);
    -o-box-shadow: 0 5px 7px -4px rgba(0,0,0,0.2);
    -ms-box-shadow: 0 5px 7px -4px rgba(0,0,0,0.2);
    box-shadow: 0 5px 7px -4px rgba(0,0,0,0.2);
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    
    line-height: 1.8; 

    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -ms-transition: all .2s ease;
    transition: all .2s ease;
}

.casesIndex .item .innerElement.bl-hover {
    -moz-box-shadow: 0 5px 7px 0 rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 5px 7px 0 rgba(0,0,0,0.4);
    -o-box-shadow: 0 5px 7px 0 rgba(0,0,0,0.4);
    -ms-box-shadow: 0 5px 7px 0 rgba(0,0,0,0.4);
    box-shadow: 0 5px 7px 0 rgba(0,0,0,0.4);

    background: rgb(244,244,244);
    background: -moz-linear-gradient(top,  rgba(244,244,244,1) 0%, rgba(255,255,255,1) 10%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,1)), color-stop(10%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(255,255,255,1) 10%);
    background: -o-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(255,255,255,1) 10%);
    background: -ms-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(255,255,255,1) 10%);
    background: linear-gradient(to bottom,  rgba(244,244,244,1) 0%,rgba(255,255,255,1) 10%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#ffffff',GradientType=0 );

    border: 1px solid #28AED8;
}

.casesIndex .item .innerElement .textBlock {
    margin: 0 20px 20px 20px;
}

.shoulder {
    padding: 35px 60px 2px 60px; 
    height: 57px; 
    background: #fff; 
    line-height: 1; 
    position: absolute;
    z-index: 100; 
    top: -5px;
    left: -5px;
    display: inline-block;
    
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    -o-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    
    -webkit-transform: rotate(-45deg) translate(-50%, 0);
    -ms-transform: rotate(-45deg) translate(-50%, 0);
    transform: rotate(-45deg) translate(-50%, 0);
    transform-origin: left top;
    
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -ms-transition: all .2s ease;
    transition: all .2s ease;
}

.bl-hover .shoulder {
    -moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    -o-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    -ms-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
}

.shoulder.Standard {
    padding: 27px 60px 5px 60px; 
}

.shoulder img {
    height: 20px; 
    width: auto; 
}

.shoulder.Standard img {
    height: 25px; 
}

.casesIndex .item h2 {
    display: block; 
    text-align: center; 
    margin: 0 0 1em 0;
    font-weight: bold; 
    color: #28AED8; 
}

.casesIndex .item .casePh {
    width: 100%; 
    margin: 0 0 20px 0;
    overflow: hidden; 
    border: 1px solid #ccc;
    
    -moz-box-shadow: 0 3px 5px -3px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 3px 5px -3px rgba(0,0,0,0.4);
    -o-box-shadow: 0 3px 5px -3px rgba(0,0,0,0.4);
    -ms-box-shadow: 0 3px 5px -3px rgba(0,0,0,0.4);
    box-shadow: 0 3px 5px -3px rgba(0,0,0,0.4);
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
}

.casesIndex .item .casePh img {
    width: 100%; 
    height: auto; 
    
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -ms-transition: all .2s ease;
    transition: all .2s ease;
}

.casesIndex .item .bl-hover .casePh img {
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.casesIndex .item .logo {
    text-align: center; 
    margin: 0 0 20px 0;
}

.casesIndex .item .logo img {
    height: 30px; 
    width: auto; 
}

.casesIndex .item .logo em {
    display: block; 
    text-align: center; 
}

.casesIndex .item dl {
    display: block; 
    padding: 2px; 
    border-top: 1px dotted #ccc;
}

.casesIndex .item dl:last-of-type {
    border-bottom: 1px dotted #ccc;
}

.casesIndex .item dl dt,
.casesIndex .item dl dd {
    float: left; 
    font-size: 14px; 
}

.casesIndex .item dl dt {
    width: 6em; 
    text-align: left; 
}

.casesIndex .item dl dt:after {
    content: "："; 
    display: inline-block; 
    float: right; 
}

.casesIndex .item dl dd {
    width: -webkit-calc(100% - 6em);
   width: -moz-calc(100% - 6em);  
   width: calc(100% - 6em); 
}

.casesIndex .item .leadText {
    margin: 10px 0;
    font-size: 13px; 
    line-height: 1.6; 
}

.linkArea a span.back {
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -o-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -ms-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    
}

.casesText .contents p {
    width: 100%; 
}

.casesText .contents p img.mt-image-right {
    max-width: 800px; 
    float: right; 
    margin: 0;
}

.casesText .contents p img.mt-image-left {
    max-width: 800px; 
    float: left; 
    margin: 0;
}

.casesText .contents p img.mt-image-none {
    max-width: 100%; 
    text-align: center; 
    margin: 2em auto;
    display: block; 
}



.casesText .contents p.text img.mt-image-right,
.casesText .contents p.text img.mt-image-left,
.casesText .contents p img.mt-image-center {
    border: 5px solid #fff;
    -moz-box-shadow: 0 0 8px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.4);
    -o-box-shadow: 0 0 8px rgba(0,0,0,0.4);
    -ms-box-shadow: 0 0 8px rgba(0,0,0,0.4);
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
    
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
}

.casesText .contents p .imageCenter {
    display: block; 
    margin: 2em auto;
    max-width: 800px; 
    position: relative; 
}

.casesText .contents p .imageCenter:after {
    z-index: -1;
    position: absolute;
    content: '';
    bottom: 20px;
    left: 10px;
    width: 70%;
    top: 80%;
    max-width: 432px;
    background: #8d8c8c;
    -webkit-box-shadow: 0 15px 10px #8d8c8c;
    -moz-box-shadow: 0 15px 10px #8d8c8c;
    box-shadow: 0 15px 10px #8d8c8c;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

.casesText .contents p .imageCenter:before {
    z-index: -1;
    position: absolute;
    content: '';
    bottom: 20px;
    right: 10px;
    width: 70%;
    top: 80%;
    max-width: 432px;
    background: #8d8c8c;
    -webkit-box-shadow: 0 15px 10px #8d8c8c;
    -moz-box-shadow: 0 15px 10px #8d8c8c;
    box-shadow: 0 15px 10px #8d8c8c;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
}

.casesText .contents p img.mt-image-center {
    width: 100%; 
}

.casesText .contents p.text .floatLeft {
    width: -webkit-calc((100% - 40px) / 2);
    width: -moz-calc((100% - 40px) / 2);  
    width: calc((100% - 40px) / 2); 
    float: left; 
    margin: 0 20px 40px 0;
    position: relative; 
}

.casesText .contents p.text .floatLeft:after {
    z-index: -1;
    position: absolute;
    content: '';
    bottom: 15px;
    left: 10px;
    width: 70%;
    top: 80%;
    max-width: 432px;
    background: #8d8c8c;
    -webkit-box-shadow: 0 15px 10px #8d8c8c;
    -moz-box-shadow: 0 15px 10px #8d8c8c;
    box-shadow: 0 15px 10px #8d8c8c;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

.casesText .contents p.text img.mt-image-left {
    width: 100%; 
}

.casesText .contents p.text .floatRight {
    width: -webkit-calc((100% - 40px) / 2);
    width: -moz-calc((100% - 40px) / 2);  
    width: calc((100% - 40px) / 2); 
    float: right; 
    margin: 0 0 40px 20px;
    position: relative; 
}

.casesText .contents p.text .floatRight:after {
    z-index: -1;
    position: absolute;
    content: '';
    bottom: 15px;
    right: 10px;
    width: 70%;
    top: 80%;
    max-width: 432px;
    background: #8d8c8c;
    -webkit-box-shadow: 0 15px 10px #8d8c8c;
    -moz-box-shadow: 0 15px 10px #8d8c8c;
    box-shadow: 0 15px 10px #8d8c8c;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
}

.casesText .contents p.text .floatRight img {
    width: 100%; 
}









p.multiple .grid {
    position: relative; 
    display: block; 
    width: auto; 
    width: 100%; 
}

p.multiple .grid .item {
    text-align: left; 
    width: -webkit-calc((100% - 2px) / 2);
   width: -moz-calc((100% - 2px) / 2);  
   width: calc((100% - 2px) / 2); 
    
    padding: 3px; 
    position: absolute;
    display: block; 
    margin: 0 0 0 0;
}

p.multiple .grid .item img {
    width: 100%; 
    height: auto; 
}


.imagesContainer {

}

.imagesContainer img {
    width: -webkit-calc((100% - 21px) / 2);
   width: -moz-calc((100% - 21px) / 2);  
   width: calc((100% - 21px) / 2); 
   float: left; 
   margin: 0 20px 20px 0;
}

.imagesContainer img:nth-of-type(2n) {
    margin: 0 0 20px 0;
}

.pager {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 20px 0; 
    text-align: center; 
}

.pager .index {
    display: inline-block; 
}

.pager .index a:before {
    content: "\f00a"; 
    font-family: fontAwesome;
    display: inline-block; 
    margin: 0 0.5em 0 0;
}

.pager .prev {
    float: left; 
    text-align: left; 
    display: block; 
    width: 7em; 
    min-height: 1px; 
}

.pager .prev a:before {
    content: "\f190";
    font-family: fontAwesome;
    display: inline-block; 
    margin: 0 0.5em 0 0;
}

.pager .next {
    float: right; 
    text-align: right; 
    display: block; 
    width: 7em; 
    min-height: 1px; 

}

.pager .next a:after {
    content: "\f18e";
    font-family: fontAwesome;
    display: inline-block; 
    margin: 0 0 0 0.5em;
}

/* ==================================================
	= Media Queries
================================================== */

/* 480px未満 */
@media only screen and (max-width: 479px) {

    

}

/* 480px以上 */
/* スマホ */
@media only screen and (min-width: 480px) {

    /* ==================================================
        = 納入事例
    ================================================== */
    .casesIndex .item {
        width: -webkit-calc((100% - 2px) / 2);
        width: -moz-calc((100% - 2px) / 2);  
        width: calc((100% - 2px) / 2); 
    }

}

/* 568px以上 */
/* タブレット */
@media only screen and (min-width: 568px) {

    

}

/* 667px以上 */
/* タブレット */
@media only screen and (min-width: 667px) {



}

/* 768px以上 */
/* タブレット */
@media only screen and (min-width: 768px) {

    /* ==================================================
        = 納入事例
    ================================================== */
    .casesIndex .item {
        width: -webkit-calc((100% - 2px) / 3);
        width: -moz-calc((100% - 2px) / 3);  
        width: calc((100% - 2px) / 3); 
    }
    
    .casesText header .headerData {
        padding: 5px 0; 
    }

    .casesText header .headerData span {
        display: inline-block; 
        border-bottom: none;
        border-right: 1px dotted #28AED8;
        padding-right: 10px; 
        margin-right: 10px;
    }
    
    .casesText header .headerData span:last-of-type {
        border-right: none;
        padding-right: 0; 
        margin-right: 0;
    }
    
    .casesText header .headerData span em {
        width: auto; 
    }

    .casesText .contents p.text img.mt-image-right,
    .casesText .contents p.text img.mt-image-left,
    .casesText .contents p img.mt-image-center {
        border: 7px solid #fff;
    }

}

/* 1024px以上 */
/* PC */
@media only screen and (min-width: 1024px) {

    .casesText header {
        padding: 0 0; 
    }

    /* ==================================================
        = 納入事例
    ================================================== */
    .casesIndex .item {
        width: -webkit-calc((100% - 2px) / 4);
        width: -moz-calc((100% - 2px) / 4);  
        width: calc((100% - 2px) / 4); 
    }


    .casesText .contents p.text img.mt-image-right,
    .casesText .contents p.text img.mt-image-left,
    .casesText .contents p img.mt-image-center {
        border: 10px solid #fff;
    }

}


/* 1280px以上 */
/* タブレット */
@media only screen and (min-width: 1280px) {


}


/* 1366px以上 */
/* タブレット */
@media only screen and (min-width: 1366px) {

    /* ==================================================
        = 納入事例
    ================================================== */
    .casesIndex .item {
        width: -webkit-calc((100% - 2px) / 5);
        width: -moz-calc((100% - 2px) / 5);  
        width: calc((100% - 2px) / 5); 
    }

}

/* 1440px以上 */
/* タブレット */
@media only screen and (min-width: 1440px) {



}

/* 1600px以上 */
/* タブレット */
@media only screen and (min-width: 1600px) {

    /* ==================================================
        = 納入事例
    ================================================== */

    .casesIndex .item {
        width: -webkit-calc((100% - 2px) / 5);
        width: -moz-calc((100% - 2px) / 5);  
        width: calc((100% - 2px) / 5); 
    }



}

/* 1920px以上 */
/* タブレット */
@media only screen and (min-width: 1920px) {

    /* ==================================================
        = 納入事例
    ================================================== */

    .casesIndex .item {
        width: -webkit-calc((100% - 3px) / 6);
        width: -moz-calc((100% - 3px) / 6);  
        width: calc((100% - 3px) / 6); 
    }

}

/* 2300px以上 */
/* タブレット */
@media only screen and (min-width: 2300px) {

    /* ==================================================
        = 納入事例
    ================================================== */

    .casesIndex .item {
        width: -webkit-calc((100% - 3px) / 7);
        width: -moz-calc((100% - 3px) / 7);  
        width: calc((100% - 3px) / 7); 
    }

}