.body-cases {

}

.body-cases article {
    
}

.body-cases article section > header {
    margin: 0 0 30px 0;
}

.body-cases article section > header h1 {
    font-size: 32px; 
}

.body-cases .contents {

}

.body-cases .contents header {
    text-align: left; 
    display: block; 
    margin: 0 0 40px 0;
    padding: 0 0 10px 0; 
    border-bottom: 1px solid #ccc;
    vertical-align: baseline; 
    position: relative; 
}

.body-cases .contents header h1 {
    text-align: left; 
    font-size: 24px; 
    float: left; 
}

.body-cases .contents header .postedDate {
    position: absolute; 
    font-size: 12px; 
    bottom: 10px;
    right:0;
}

.body-cases .contents .textArea {
    width: 100%; 
    text-align: left; 
}

.body-cases .contents .textArea p {
    display: block; 
    line-height: 1.8; 
    margin: 0 0 1em 0;
}

.body-cases .contents .textArea img {
    max-width: 100%; 
    height: auto; 
}

.body-cases .contents .textArea .mt-image-right {
    width: -webkit-calc(50% - 10.1px);
   width: -moz-calc(50% - 10.1px);  
   width: calc(50% - 10.1px); 
   height: auto; 
   float: right; 
   margin: 5px 0 40px 20px;
}

.body-cases .contents .textArea .mt-image-left {
    width: -webkit-calc(50% - 10.1px);
   width: -moz-calc(50% - 10.1px);  
   width: calc(50% - 10.1px); 
   height: auto; 
   float: left; 
   margin: 5px 20px 40px 0;
}

.body-cases .contents .textArea .mt-image-center,
.body-cases .contents .textArea .mt-image-none {
    margin: 40px 0;

    width: 100%; 
    height: auto; 
}

.body-cases .contents .textArea .portrait,
.body-cases .contents .textArea .landscape {
    width: -webkit-calc(50% - 10.1px);
   width: -moz-calc(50% - 10.1px);  
   width: calc(50% - 10.1px); 
   float: left; 
   margin: 0 20px 20px 0;
}

.body-cases .contents .textArea .portrait:nth-of-type(2n),
.body-cases .contents .textArea .landscape:nth-of-type(2n) {
    margin: 0 0 20px 0;
}



/* 繧｢繝ｼ繧ｫ繧､繝� */
.body-cases .archive .contents {

}

.body-cases .archive .contents .indexThumbnail {


    display: flex;
    -js-display: flex;
    
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    justify-content: flex-start;
    width: 100%;

}

.body-cases .archive .contents .indexThumbnail li {
    width: -webkit-calc((100% - 20.1px) / 2);
   width: -moz-calc((100% - 20.1px) / 2);  
   width: calc((100% - 20.1px) / 2); 

   text-align: left; 
   border-top: 1px dotted #666;
   margin: 0 20px 20px 0;
}

.body-cases .archive .contents .indexThumbnail li:nth-of-type(2n) {
   margin: 0 0 20px 0;
}

.body-cases .archive .contents .indexThumbnail li h2 {
    font-size: 16px; 
    font-weight: 700; 
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 1em 0 0 0;
}

.body-cases .archive .contents .indexThumbnail li figure {
    height: 120px; 
    overflow: hidden; 
    position: relative; 
    margin: 10px 0;
}

.body-cases .archive .contents .indexThumbnail li figure.noimage a {
    position: absolute; 
    width: 100%; 
    top: 0; 
    right: 0;
    bottom: 0;
    left: 0;
    color: #fff; 
    background: rgba(0,181,213,0.3); 
}

.body-cases .archive .contents .indexThumbnail li figure.noimage a span {
    display: inline-block; 
    position: absolute; 
    top: 50%;
    left: 50%; 
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}



.body-cases .archive .contents .indexThumbnail li figure img {
    width: 100%;
    height: auto;
    position: absolute;
    display: block;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    margin: 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;
}

.body-cases .archive .contents .indexThumbnail li:hover figure 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);
}

.body-cases .archive .contents .indexThumbnail li .cateCategory {
    width: 100%; 
}

.body-cases .archive .contents .indexThumbnail li .cateCategory .date {
    display: block; 
    font-size: 14px; 
    margin: 0 0;
    float: left; 
}

.body-cases .archive .contents .indexThumbnail li .cateCategory .category {
    display: block; 
    font-size: 12px; 
    margin: 0 0;
    float: right; 
}



.body-cases .archive .contents .indexThumbnail li .leadText {
    font-size: 16px; 
    margin: 10px 0;
}

.body-cases .archive .contents .indexThumbnail li .link {
    text-align: right; 
}

/* 蟷ｴ蛻･繧､繝ｳ繝�ャ繧ｯ繧ｹ */

.body-cases .newsYearGroup {

}

.body-cases .newsYearGroup + .newsYearGroup {
    margin: 40px 0 0 0;
}

.body-cases .newsYearGroup h2 {
    display: block; 
    font-size: 20px; 
    font-weight: bold; 
    margin: 0 0 20px 0;
    padding: 5px; 
}

.body-cases .newsYearGroup dl {
    width: 100%; 
    padding: 5px; 
    border-bottom: 1px dotted #ccc;
}

.body-cases .newsYearGroup dl dt,
.body-cases .newsYearGroup dl dd {
    float: left; 
}

.body-cases .newsYearGroup dl dt {
    width: 8em; 
    margin: 0 0.5em 0 0;
}

.body-cases .newsYearGroup dl dd.category {
    width: 15em; 
    margin: 0 0 0 0.5em;
    text-align: right; 
}

.body-cases .newsYearGroup dl dd.category span {
    font-size: 12px; 
    display: inline-block; 
    padding: 0 0.5em; 
}

.body-cases .newsYearGroup dl dd.headline {
    width: -webkit-calc(100% - 24em);
   width: -moz-calc(100% - 24em);  
   width: calc(100% - 24em); 
}

/* 莠倶ｾ九�繝ｼ繧ｸ繧ｫ繝�ざ繝ｪ繝ｼ */
section > .contents .categoriesWrapper {
    width: 100%; 
    display: block; 
    text-align: left; 
    margin: 20px 0;
}

section > .contents .categoriesWrapper h2,
section > .contents .categoriesWrapper ul li,
section > .contents .categoriesWrapper ul li a {
    font-size: 14px; 
    font-weight: normal; 
    display: inline-block; 
    float: left; 
    color: #444; 
    line-height: 1.8; 
    vertical-align: baseline; 
}

section > .contents .categoriesWrapper h2 {
    font-weight: bold; 
    color: #777; 
}

section > .contents .categoriesWrapper ul li {
    margin: 0 1em 0 0;
}

section > .contents .categoriesWrapper ul li:after {
    content: "|"; 
    margin: 0 0 0 1em;
}

section > .contents .categoriesWrapper ul li:last-child:after {
    content: ""; 
    margin: 0 0 0 0;
}


/* 莠倶ｾ九�繝ｼ繧ｸ繝壹�繧ｸ繝｣繝ｼ */
.pagerWrapper {
    border-top: 1px solid #ccc;
    width: 100%; 
    padding: 20px 0 0 0; 
    margin: 0 0 30px 0;
}

.pagerWrapper .pager {
    width: 100%; 
    text-align: center; 
}

.pagerWrapper .pager .prev {
    float: left; 
}

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

.pagerWrapper .pager .next {
    float: right; 
}

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


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

/* 480px譛ｪ貅€ */
@media only screen and (max-width: 479px) {

    .default, .spPortrait, .spLandscape568, .spLandscape667, .tablet, .pc {display: none;}
    .default {display: block;}

}

/* 480px莉･荳� */
/* 繧ｹ繝槭� */
@media only screen and (min-width: 480px) {

    .default, .spPortrait, .spLandscape568, .spLandscape667, .tablet, .pc {display: none;}
    .spPortrait {display: block;}

}

/* 568px莉･荳� */
/* 繧ｿ繝悶Ξ繝�ヨ */
@media only screen and (min-width: 568px) {

    .default, .spPortrait, .spLandscape568, .spLandscape667, .tablet, .pc {display: none;}
    .spLandscape568 {display: block;}

}

/* 667px莉･荳� */
/* 繧ｿ繝悶Ξ繝�ヨ */
@media only screen and (min-width: 667px) {

    .default, .spPortrait, .spLandscape568, .spLandscape667, .tablet, .pc {display: none;}
    .spLandscape667 {display: block;}

}

/* 768px莉･荳� */
/* 繧ｿ繝悶Ξ繝�ヨ */
@media only screen and (min-width: 768px) {

    .default, .spPortrait, .spLandscape568, .spLandscape667, .tablet, .pc {display: none;}
    .tablet {display: block;}

}

/* 1000px莉･荳� */
/* 繧ｿ繝悶Ξ繝�ヨ */
@media only screen and (min-width: 1000px) {

    .default, .spPortrait, .spLandscape568, .spLandscape667, .tablet, .pc {display: none;}
    .pc {display: block;}

    .body-cases .archive .contents .indexThumbnail li,
    .body-cases .archive .contents .indexThumbnail li:nth-of-type(1n) {
        width: -webkit-calc((100% - 40.1px) / 3);
       width: -moz-calc((100% - 40.1px) / 3);  
       width: calc((100% - 40.1px) / 3); 
       margin: 0 20px 20px 0;
    }
    
    .body-cases .archive .contents .indexThumbnail li:nth-of-type(3n) {
       margin: 0 0 20px 0;
    }



}