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

/* トピックス専用の指定
--------------------------------------------------------*/
#contents .inner {zoom:1;}
#contents .inner:after { content: ""; display: block; clear: both; }

#contents .dtc {
  display: table;
  }

#sidebar,
#contents-area {
  display: table-cell;
  }

/* サイドバー */
#sidebar {
  width: 240px;
  vertical-align: top;
  /* border-bottom: 1px solid #e6e6e6; */
  /* padding-right: 80px; */
  /* float: left; */
  }
#sidebar li {
  /* border-top: 1px solid #e6e6e6; */
  margin-bottom: 2px;
  position: relative;
  }
#sidebar li a {
  display: block;
  padding: 8px 0 8px 20px;
  color: #717171;
  font-size: 14px;
  font-size: 1.4rem;
  background-color: #f2f2f2;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
	transition: 0.4s;
  }
#sidebar li a:hover {
  background-color: #fbfbfb;
  }
#sidebar li:before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #0075c1;
  position:absolute;
  left:8px;
  top: 50%;
  margin-top: -4px;
  }
#sidebar li:hover:before {
  border-left: 4px solid #CCC;
  }

/* コンテンツ */
#contents-area {
  width: 760px;
  /* float: left; */
  padding-left: 80px;
  }

#contents h1 {
  text-align: left;
  border-left: 6px solid #0075c1 ;
  padding-left: 20px;
  font-size: 2.4rem;
  }

#title-box {
  text-align: left;
  padding: 10px 126px 20px 0px;
  position: relative;
  border-bottom: 1px solid #b5b4b4;
  }

#date {
  text-align: right;
  font-size: 12px;
  font-size: 1.2rem;
  margin-bottom: 20px;
  }

/* アイコン */
#contents-area .icon {
  width: 106px;
  height: 23px;
  display: block;
  position: absolute;
  right: 0;
  top:50%; 
  margin-top: -10px; 
  margin-right: 0;
  }
.icon.info {
  background:url(../img/index/topics-icon-info.png) left top no-repeat;
  }
.icon.product {
  background:url(../img/index/topics-icon-product.png) left top no-repeat;
  }

/* 一覧 */
#title-list {
  text-align: left;
  padding: 10px 126px 20px 10px;
  position: relative;
  border-bottom: 2px dotted #b5b4b4;
  }

/* テキストエリア */
#txt-area {
  width: 680px;
  text-align: justify;
  }
#txt-area img.size-full {
  width: 100%;
  height: auto;
  }

#txt-area h2 {
  margin-bottom: 20px;
  }
#contents h3 {
  text-align: left;

}
#contents h5 {
  border: 1px solid #0075c1;
  text-align: left;
  font-weight: normal;
  color: #0075c1;
  font-size: 1.6rem;
  padding: 10px;
  margin-bottom: 10px;
}

#txt-area ul {
  margin: 10px;
  }
#txt-area ul li {
  position: relative;
  padding-left: 0.6em;
  }
#txt-area ul li:before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0075c1;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -3px;
  }

/* アーカイブ専用の指定
--------------------------------------------------------*/
.topics-list {
  background-color: #FFF;
  /* padding: 48px 0px 48px; */
  position: relative;
  border-top: 1px solid #cdcdcd;
  }

.topics-list li {
  /* margin-bottom: 12px; */
  position: relative;
  }
.topics-list li:last-child {
  margin-bottom: 0px;
  }
.topics-list li a:after {
  border-left: 1px solid #cdcdcd;
  border-top: 1px solid #cdcdcd;
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -5px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
	transition: 0.2s;
  }
.topics-list li a:hover:after {
  right: 6px;
  }

.topics-list li a {
  font-size: 16px;
  font-size: 1.6rem;
  color: #717171;
  text-decoration: none;
  width: 100%;
  border-bottom: 1px solid #cdcdcd;
  display: block;
  padding: 18px 0;
  position: relative;
  }
.topics-list a:hover {
  text-decoration: underline;
  opacity: 0.6;
  }
  
.topics-list-bt {
  position: absolute;
  top: 30px;
  right:58px ;
  }

.topics-list .icon {
  width: 106px;
  height: 23px;
  display: inline-block;
  }
#contents-area .topics-list .icon {
  position: relative;
  top: 0.4em;
  display: inline-block;
  margin-right: 20px;
  }

/* WPNAVI */
.wp-pagenavi {
  width: 100%;
  margin-top: 60px;
  display: inline-block;
  text-align: center;
  }
.wp-pagenavi span,
.wp-pagenavi a {
  padding: 4px 8px;
  margin: 4px;
  background-color: #f3f3f3;
  border-radius:14px;
  color: #a1a1a1;
  }
.wp-pagenavi a:hover,
.wp-pagenavi .current {
  background-color: #0075c1;
  color: #FFF;
  text-decoration: none;
  }