@charset "utf-8";

/* ---------------------------------------------------------
topics
---------------------------------------------------------*/
.topicsList,
.topics_detail{
    margin-bottom: 40px;
}
.topicsList dl{
    background: url(../images/icon_arrow.png)no-repeat 99% 50%;
    padding: 20px 10px 20px 20px;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px solid #e7e7e7;
}
.topicsList{
    border-top: 1px solid #e7e7e7;
}
.topicsList dt {
    width: 87%;
    float: left;
}
.topicsList dd {
    float: right;
    width: 12%;
    position: relative;
}
.topics_img{
    position: absolute;
    top: 30px;
    border: 0;
/*
    left: 0;
    right: 0;
*/
    margin: auto;
    width: 100%;
    max-width: 100px;
}
.topicsList dd img{
    max-width: 100px;
    display: block;
}
.day{
    font-size: 12px;
    color: #a1a1a1;
    margin-bottom: 7px;
}
.topi_title{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
    position: relative;
}
.topi_title img{
    margin: 0 0 -3px 10px
}
.topicsList a:hover{
    background: #fef7f7;
    display: block;
}


/*-- pageNavi01 --*/
.pageNavi01{
    display: block;
    font-size:0;
    text-align:center;
    margin-bottom: 60px;
}

.pageNavi01 .prev a i{
    display:inline-block;
    margin-right: 10px;
    vertical-align: -5px;
    font-size: 30px;
    color: #333;
}

.pageNavi01 .next a i{
    display:inline-block;
    margin-left: 10px;
    vertical-align: -5px;
    font-size: 30px;
    color: #333;
}

.pageNavi01 .num{
    display: inline-block;
    font-size: 16px;
/*    border: 1px solid #333;*/
    background: #d6d6d6;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 0 7px;
    line-height: 30px;
    margin-bottom: 15px;
}

.pageNavi01 .num a{
    display:block;
    color: #333;
}

.pageNavi01 .num:hover,
.pageNavi01 .active{
    background: #333;
    color: #FFF;
}

.pageNavi01 .num:hover a,
.pageNavi01 .active a{
    color:#fff;
    filter: alpha(opacity=100)!important;
    -moz-opacity: 1.0!important;
    opacity: 1.0!important;
}


/* ---------------------------------------------------------
topics 詳細
---------------------------------------------------------*/
.topics_detailTitle{
    border-bottom: 1px solid #e7e7e7;
    margin-bottom: 45px;
}
.topicsText{
    margin-bottom: 40px;
}


/* 詳細ページ */
.topics_imglink{
    width: 100%;
    overflow: hidden;
    margin-bottom: 60px;
}
.topics_imglink li{
    background: #eee;
    float: left;
    width: 23.5%;
    height: 0;
    margin-right: 2%;
    font-size: 0;
    padding-top: 23.5%;
    position: relative;
}
.topics_imglink li img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
    margin: auto;
}
.topics_imglink li a:after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url(../images/btn_img_scale.png) 0 / contain no-repeat;
}
.topics_imglink li:last-child{
    margin-right: 0;
}


/* ---------------------------------------------------------
750px
---------------------------------------------------------*/
@media screen and (max-width:750px) {
.topicsList dt {
    width: 94%;
    float: none;
}
.topicsList dd {
    float: none;
    width: 100%;
    position: relative;
}
.topicsList dd img{
    max-width: initial;
    width: 90%;
    margin: 0;
}
.topics_img{
    position: static;
    margin: 15px auto 0;
    max-width: initial;
}
    
.topics_imglink li{
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
    padding-top: 57.5%;
}
    
    
}