@charset "utf-8";
/* CSS Document */



/* search */
.searchBox { margin-bottom: 20px;}
.searchBox .border { display: table; width: 95%; height: 46px; margin: 0 auto; border: 1px #999 solid; border-radius: 30px; color: #83C0EA; font-size: 1.125rem; font-weight: bold; line-height: 46px;}
.searchBox .border button { display: table-cell; width: 16%; padding: 0; background: none; border: none; color: #999; font-size: 1.5rem; vertical-align: middle;}
.searchBox .border input { display: table-cell; width: 84%; background: none; border: none; line-height: 46px; vertical-align: middle;}
.searchBox.side { display: none;}

/* blog menu */
#blogMenu { text-align: left;}
#blogMenu .menuBox.top { border-top: 1px #999 solid;}
#blogMenu .menuBox { width: 100%; border-bottom: 1px #999 solid;}
#blogMenu .menuBox .button { width: 100%; height: 56px; padding: 0 5%; line-height: 56px;}
#blogMenu .menuBox .button:hover { text-decoration:none; opacity:0.75; filter:alpha(opacity=75); -ms-filter:"alpha(opacity=75)"; -webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
#blogMenu .menuBox .button i { line-height: 56px; float: right;}
#blogMenu .menuBox ul { display: none;}
#blogMenu .menuBox ul li { border-top: 1px #ccc solid;}
#blogMenu .menuBox ul li a { display: block; width: 100%; height: 40px; padding: 0 10%; color: #333; text-decoration: none; line-height: 40px;}

@media screen and (min-width: 769px){
    .searchBox.top { display: none;}
    .searchBox.side { display: block;}

    #blogWrap { display: table; width: 100%; max-width: 1400px; margin: 0 auto; }
    #articleWrap { display: table-cell; width: 75%; vertical-align: top;}
    #blogMenu { display: table-cell; width: 25%; vertical-align: top;}

    #blogMenu .menuBox ul { display: block;}
}


/* blog list */
#blogList ul li { padding: 15px; margin-bottom: 30px; border: 1px #999 solid;}
#blogList ul li a { display: block; color: #333;}
#blogList ul li a figure .img { width: 100%; margin-bottom: 15px;}
#blogList ul li a figure figcaption .boxWrap { display: table; width: 100%; margin-bottom: 10px;}
#blogList ul li a figure figcaption .boxWrap .box { display: table-cell; line-height: 125%;}
#blogList ul li a figure figcaption .boxWrap .box .cate { width: 10em; background: #3D3D3D; color: #fff; font-size: 0.625rem;}
#blogList ul li a figure figcaption .boxWrap .box:last-child { font-size: 0.75rem; font-weight: bold; text-align: right;}
#blogList ul li a figure figcaption dl dt { margin-bottom: 5px; font-size: 1rem; font-weight: bold; text-align: left;}
#blogList ul li a figure figcaption dl dd { text-align: left; font-size: 0.875rem; }

.wp-pagenavi { margin-bottom: 40px; text-align: center;}
.wp-pagenavi span { display: inline-block; min-width: 34px; height: 34px; margin: 0 2px; padding: 0 2px; background: #83C0EA; color: #fff; text-align: center; line-height: 34px;}
.wp-pagenavi a { display: inline-block; min-width: 34px; height: 34px; margin: 0 2px; padding: 0 2px; background: #797979; color: #fff; text-align: center; line-height: 34px;}
.wp-pagenavi a.previouspostslink, .wp-pagenavi a.nextpostslink { background: none; color: #333;}

@media screen and (min-width: 641px){
    #blogList ul li { width: 50%; float: left; border: none;}
    #blogList ul li:nth-child(2n+1) { clear: both;}
}
@media screen and (min-width: 769px){
    #blogList { padding-right: 40px;}
}
@media screen and (min-width: 1081px){
    #blogList ul li { width: calc( 100% / 3 );}
    #blogList ul li:nth-child(2n+1) { clear: none;}
    #blogList ul li:nth-child(3n+1) { clear: both;}
}


/* blog detail */
#blogDetail .boxWrap { display: table; width: 100%; margin-bottom: 10px;}
#blogDetail .boxWrap .box { display: table-cell; line-height: 125%;}
#blogDetail .boxWrap .box .cate { width: 10em; background: #3D3D3D; color: #fff; font-size: 0.625rem;}
#blogDetail .boxWrap .box:last-child { font-size: 0.75rem; font-weight: bold; text-align: right;}
#blogDetail .h1blog { margin-bottom: 10px;}
#blogDetail .h1blog h1 { font-size: 1rem; font-weight: bold; text-align: left;}
#blogDetail .postBox { text-align: left;}
#blogDetail .snsBox { padding: 20px 0; border-bottom: 1px #999 solid;}

.wpPrevNext { padding: 0 20%; text-align: center;}
.wpPrevNext a { display: inline-block; color: #666; line-height:}
.wpPrevNext a[rel="prev"] { float: left;}
.wpPrevNext a[rel="next"] { float: right;}

@media screen and (min-width: 769px){
    #blogDetail { padding-right: 40px;}
}