@charset "utf-8";

/* ----------------------------------------------------
 
  Topics css ( media Pc )
  
---------------------------------------------------- */

#sig-topics {}

#sig-topics header #gNav li#blogNav a { background-color:#000; color:#fff; }

/* Topics Top
====================================== */
#sig-topics #topics-card { overflow:hidden; }
#sig-topics #topics-card .thumbnail { position:relative; overflow:hidden; width:100%; margin:40px auto 30px; }
#sig-topics #topics-card .thumbnail .thumb { width:200px; float:left; }
#sig-topics #topics-card .thumbnail .thumb img { width:100%; }
#sig-topics #topics-card .thumbnail .detail { margin-left:220px; }
#sig-topics #topics-card .thumbnail .detail h3 { padding-bottom:5px; border-bottom: 1px solid #777; margin-bottom:5px; font-weight:bold; color:#E45526; }
#sig-topics #topics-card .thumbnail .detail .date { font-size:65%; font-weight:bold; color:#777;  line-height:1em; }

#sig-topics .button-wire { position:absolute; right:0; bottom:0; }

/* Topics detail
====================================== */
#sig-topics-detail { display:block; margin-bottom:30px; }
#sig-topics-detail .title-wrapper { margin-bottom:30px; }
#sig-topics-detail .topics-title { font-size:160%; color:#E45526; }
#sig-topics-detail .date { display:block; font-size:75%; font-weight:bold; color:#777; }

/* Topics side
====================================== */
#topics-side .side-title { margin-bottom:20px; font-size:120%; font-weight:bold; }
#topics-side .side-title::before { content:"■"; padding-right:5px; }
#topics-side img { width:100%; }
#topics-side ul li a { display:block; }
#topics-side ul li dl { overflow:hidden; }
#topics-side ul li dl dt { float:left; width:40%; }
#topics-side ul li dl dd { margin-left:45%; }
#topics-side ul li dl dd .title { font-size:90%; line-height:1.4em; }
#topics-side ul li dl dd .date { font-size:90%; }
#topics-side ul li + li { padding-top:20px; border-top:solid 1px #333; margin-top:20px; }


/* ----------------------------------------------------
 
  blog css ( media Sp )
  
---------------------------------------------------- */

@media screen and (max-width:800px) {
	
/* blog Top
====================================== */
#sig-topics #topics-card .thumbnail .thumb { width:30%; }
#sig-topics #topics-card .thumbnail .detail { margin-left:33%; }
#sig-topics #topics-card .thumbnail .detail h3 { font-size:90%; }
#sig-topics #topics-card .thumbnail .detail .date { font-size:65%; font-weight:bold; color:#777;  line-height:1em; }
#sig-topics #topics-card .thumbnail .detail .button-wire { position:static; width:100%; }

/* Topics detail
====================================== */
#sig-topics-detail .topics-title { font-size:130%; color:#E45526; }
#sig-topics-detail .date { display:block; font-size:75%; font-weight:bold; color:#777; }

/* Topics side
====================================== */
#topics-side .side-title { margin-bottom:20px; font-size:120%; font-weight:bold; }
#topics-side .side-title::before { content:"■"; padding-right:5px; }
#topics-side img { width:100%; }
#topics-side ul li a { display:block; }
#topics-side ul li dl { overflow:hidden; }
#topics-side ul li dl dt { float:left; width:40%; }
#topics-side ul li dl dd { margin-left:45%; }
#topics-side ul li dl dd .title { font-size:90%; line-height:1.4em; }
#topics-side ul li dl dd .date { font-size:90%; }
#topics-side ul li + li { padding-top:20px; border-top:solid 1px #333; margin-top:20px; }

}