
body{
    font-family:meiryo;
    margin:0;
    padding:0;
}

#thumbArea,#thumbArea *{
    padding:0;
    margin:0;
    box-sizing: border-box;
    text-overflow:ellipsis;
    transition:all .4s ease-in-out 0s;
}
#thumbArea{
    width:100%;
    height:150px;
    position:relative;
    background-color:#000;
    overflow:hidden;
    box-sizing: content-box;
    position:fixed;
    z-index:5;
    bottom:0px;

}
.thumbAreaShow{
    opacity:1;
    max-height:150px;
    border-top:solid 4px #000;
    border-bottom:solid 4px #000;
}
.thumbAreaHide{
    opacity:0;
    max-height:0px;
    border-top:solid 0px #000;
    border-bottom:solid 0px #000;
}

#thumbArea > #thumbBox:before{
    content:"";
    position:absolute;
    z-index:2;
    left:-100%;
    width:100%;
    height:100%;
    opacity:0.8;
    background-color:#000;

}
#thumbArea > #thumbBox:after{
    content:"";
    position:absolute;
    z-index:2;
    left:100%;
    width:100%;
    height:100%;
    opacity:0.8;
    background-color:#000;

}

#thumbArea > #thumbBox{
    width:50%;
    height:150px;
    position:absolute;
    z-index:1;
    left:50%;
    margin-left:-25%;
}
#thumbArea > #thumbBox > #thumb{
    width:100%;
    height:auto;
    position:relative;
    left:0%;
    white-space:nowrap;
    letter-spacing:-100px;
}
#thumbArea > #thumbBox > #thumb > .thumbGroup{
    width:100%;
    height:auto;
    position:absolute;
    left:0%;
    display:inline-block;
    transition:none;
}
#thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea{
    width:100%;
    height:150px;
    border:double 3px #4C9ED9;
    overflow:hidden;
    background-color:#E0EEF8;
    letter-spacing:-100px;
    display:inline-block;
    position:relative;
    top:50%;
    left:50%;
    transform:translate(-50%,0%) scale(0.8,0.8);
}
.itemZoom{
    transform:translate(-50%,0%) scale(1,1) !important;
}
#thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea > .itemTitle{
    font-size:95%;
    position:absolute;
    z-index:1;
    top:0px;
    left:0px;
    padding:10px;
    width:100%;
    height:100%;
    line-height:100%;
    letter-spacing:normal;
    white-space:normal;
    text-align:center;
    overflow:auto;
    color:#fff;
    background-color: rgba(0,0,0,0.5);
    text-shadow: 0px 0px 3px rgba(0,128,255,1);
}
.itemTitleShow{
    visibility:visible;
    opacity:1;
}
.itemTitleHide{
    visibility:hidden;
    opacity:0;
}
/*
#thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea > .itemTitle:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:0.8;
    background-color:#000;

}
*/
#thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea > .imgBox{
    width:20%;
    height:150px;
    overflow:hidden;
    display:inline-block;
    position:relative;
}
#thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea > .itemDes{
    width:80%;
    height:150px;
    color:#666;
    font-size:70%;
    overflow:auto;
    max-height:150px;
    padding:10px;
    display:inline-block;
    vertical-align:top;
    letter-spacing:normal;
    white-space:normal;
    line-height:1.5em;
}
#thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea > .imgBox > a{
    display:block;
    width:100%;
    height:100%;
    position:relative;
}
.hasThumb{
    background-image:url(noimage_m.png);
    background-repeat:no-repeat;
    background-position: center center; 
}
.thumbImage{}
#thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea > .imgBox > a > img{
    max-width:100%;
    max-height:100%;
    position:absolute;
    z-index:0;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(1,1);

}
#thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea > .imgBox > a:hover img{
    transform:translate(-50%,-50%) scale(1.2,1.2);
}


#thumbArea > #thumbBox > #thumbClose{
    width:16px;
    height:16px;
    position:absolute;
    top:0;
    right:-16px;
    z-index:20;
    cursor:pointer;
    background-color:#000;
}
#thumbArea > #thumbBox > #thumbClose span{
    width:12px;
    height:4px;
    display:block;
    background-color:white;
    position:absolute;
    z-index:1;
    left:5px;
}
#thumbArea > #thumbBox > #thumbClose span:first-child{
    top:7px;
    -ms-transform:translateX(-3px) translateY(-1px) rotate(45deg);
    -moz-transform:translateX(-3px) translateY(-1px) rotate(45deg);
    -webkit-transform:translateX(-3px) translateY(-1px) rotate(45deg);
    transform:translateX(-3px) translateY(-1px) rotate(45deg);
}

#thumbArea > #thumbBox > #thumbClose span:last-child{
    bottom:7px;
    -ms-transform:translateX(-3px) translateY(1px) rotate(-45deg);
    -moz-transform:translateX(-3px) translateY(1px) rotate(-45deg);
    -webkit-transform:translateX(-3px) translateY(1px) rotate(-45deg);
    transform:translateX(-3px) translateY(1px) rotate(-45deg);
}




#thumbArea > #thumbBox > #thumbPrev{
    width:30px;
    height:60px;
    position:absolute;
    z-index:20;
    top:50%;
    left:-30px;
    margin-top:-30px;
    cursor:pointer;
}
#thumbArea > #thumbBox > #thumbPrev span{
    width:20px;
    height:4px;
    display:block;
    background-color:#666;
    position:absolute;
    z-index:1;
    left:5px;
    transition:background-color .4s linear 0s;
}
#thumbArea > #thumbBox > #thumbPrev span:first-child{
    top:16px;
    -ms-transform:translateX(0.5px) translateY(6px) rotate(-45deg);
    -moz-transform:translateX(0.5px) translateY(6px) rotate(-45deg);
    -webkit-transform:translateX(0.5px) translateY(6px) rotate(-45deg);
    transform:translateX(0.5px) translateY(6px) rotate(-45deg);
}

#thumbArea > #thumbBox > #thumbPrev span:last-child{
    bottom:16px;
    -ms-transform:translateX(0.5px) translateY(-6px) rotate(45deg);
    -moz-transform:translateX(0.5px) translateY(-6px) rotate(45deg);
    -webkit-transform:translateX(0.5px) translateY(-6px) rotate(45deg);
    transform:translateX(0.5px) translateY(-6px) rotate(45deg);
}




#thumbArea > #thumbBox > #thumbNext{
    width:30px;
    height:60px;
    position:absolute;
    z-index:20;
    top:50%;
    right:-30px;
    margin-top:-30px;
    cursor:pointer;
}
#thumbArea > #thumbBox > #thumbNext span{
    width:20px;
    height:4px;
    display:block;
    background-color:#666;
    position:absolute;
    z-index:1;
    left:5px;
    transition:background-color .4s linear 0s;
}
#thumbArea > #thumbBox > #thumbNext span:first-child{
    top:16px;
    -ms-transform:translateX(0.5px) translateY(6px) rotate(45deg);
    -moz-transform:translateX(0.5px) translateY(6px) rotate(45deg);
    -webkit-transform:translateX(0.5px) translateY(6px) rotate(45deg);
    transform:translateX(0.5px) translateY(6px) rotate(45deg);
}

#thumbArea > #thumbBox > #thumbNext span:last-child{
    bottom:16px;
    -ms-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
    -moz-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
    -webkit-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
    transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
}

#thumbArea > #thumbBox > #thumbPrev:hover span,#thumbArea > #thumbBox > #thumbNext:hover span{
    background-color:#fff;
}
.entry_more{
    width:100%;
    height:auto;
    display:block;
    text-align:right;
    margin:5px 0px 7px !important;
}
.entry_more > a{
    width:100px;
    height:auto;
    color:#333;
    font-size:100%;
    text-align:center;
    text-decoration:none;
    line-height:35px;
    display:inline-block;
    border:solid 1px #aaa;
    border-radius: 4px;
    border: 1px solid #bbb;
    background: -ms-linear-gradient(top,#fff 0%,#f1f1f1);
    background: -moz-linear-gradient(top,#fff 0%,#f1f1f1);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1));
    cursor:pointer;
    vertical-align:bottom;
}
.entry_more > a:link{
	color:#666;
	text-decoration:none;
}
.entry_more > a:visited{
	color:#666;
	text-decoration:none;
}
.entry_more > a:hover{
	color:#000;
	font-weight:normal;
	border: 1px solid #666;
}
.entry_more > a:active{
	color:#666;
	text-decoration:none;
}




@media (min-width: 700px) and (max-width: 1200px){
    #thumbArea{
        height:100px;
    }
    #thumbArea > #thumbBox{
        width:50%;
        height:100px;
        position:absolute;
        z-index:1;
        left:50%;
        margin-left:-25%;
    }
    #thumbArea > #thumbBox:before{
        content:"";
        position:absolute;
        z-index:2;
        left:-100%;
        width:100%;
        height:100%;
        opacity:0.8;
        background-color:#000;
    }
    #thumbArea > #thumbBox:after{
        content:"";
        position:absolute;
        z-index:2;
        left:100%;
        width:100%;
        height:100%;
        opacity:0.8;
        background-color:#000;
    }
    #thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea{
        width:100%;
        height:100px;
        letter-spacing:-100px;
        display:inline-block;
        position:relative;
        top:50%;
        left:50%;
        transform:translate(-50%,0%) scale(0.8,0.8);
    }
    #thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea > .imgBox{
        width:35%;
        height:100px;
        display:inline-block;
        overflow:hidden;
        position:relative;
    }
    #thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea > .imgBox > a > img{
        max-width:100%;
        max-height:100px;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%) scale(1,1);
    }
    #thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea > .itemDes{
        width:65%;
        height:100px;
        overflow:auto;
        padding:10px;
        display:inline-block;
        vertical-align:top;
        letter-spacing:normal;
        white-space:normal;
        text-overflow:ellipsis;
    }
}




@media (max-width: 699px){
    #thumbArea{
        height:75px;
    }
    #thumbArea > #thumbBox{
        width:80%;
        height:75px;
        position:absolute;
        z-index:1;
        left:50%;
        margin-left:-40%;
    }
    #thumbArea > #thumbBox:before{
        content:"";
        position:absolute;
        z-index:2;
        left:-100%;
        width:100%;
        height:100%;
        opacity:0.8;
        background-color:#000;

    }
    #thumbArea > #thumbBox:after{
        content:"";
        position:absolute;
        z-index:2;
        left:100%;
        width:100%;
        height:100%;
        opacity:0.8;
        background-color:#000;

    }
    #thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea{
        width:100%;
        height:75px;
        letter-spacing:-100px;
        display:inline-block;
        position:relative;
        top:50%;
        left:50%;
        transform:translate(-50%,0%) scale(0.8,0.8);
    }

    #thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea > .imgBox{
        width:35%;
        height:75px;
        display:inline-block;
        overflow:hidden;
        position:relative;
    }
    #thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea > .imgBox > a > img{
        max-width:100%;
        max-height:75px;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%) scale(1,1);
    }
    #thumbArea > #thumbBox > #thumb > .thumbGroup > .itemArea > .itemDes{
        width:65%;
        height:75px;
        overflow:auto;
        padding:10px;
        display:inline-block;
        vertical-align:top;
        letter-spacing:normal;
        white-space:normal;
        text-overflow:ellipsis;
    }
    .hasThumb{
        background-image:url(noimage_s.png);
        background-repeat:no-repeat;
        background-position: center center; 
    }
}
