@charset "utf-8";

/*---------------------------------------------
---------------------------------------------
 ニュース一覧CSS
---------------------------------------------
---------------------------------------------*/


/*---------------------------------------------
 CONTENTS
---------------------------------------------*/


/* ニュース一覧
---------------------------------------------*/

#news_listbox {
  width: 700px;
}

#news_listbox dl {
  overflow: hidden;
  width: 700px;
  font-size: 1.167em;
  color: #333;
  padding-top: 10px;
}

#news_listbox dl dt {
  width: 140px;
  float: left;
  clear: both;
  padding: 20px 0 18px 17px;
  background: url(/img/news/bg_mark.png) no-repeat 5px center;
}

#news_listbox dl dd {
  padding: 20px 0 18px 140px;
  border-bottom: 1px solid #ccc;
}


/* 記事
---------------------------------------------*/

.news_box {
  width: 700px;
}

.news_ttl {
  width: 663px;
  min-height: 58px;
  padding: 18px 15px 0 22px;
  background: url(/img/news/bg_ttl_news.jpg) repeat-y left top;
}

.news_ttl h3 {
  width: 663px;
  font-size: 22px;
  line-height: 1.4em;
  letter-spacing: 0.1em;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 0px #000;
}

.news_date {
  width: 200px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #fff;
  padding: 4px 463px 9px 0;
}

.news_contents {
  width: 690px;
  font-size: 1.167em;
  line-height: 1.8em;
  padding: 0 8px 30px 2px;
  border-bottom: 1px solid #ccc;
}

.news_contents p {
  padding-top: 25px;
}

.news_contents p img.alignleft,
.news_contents p img.alignnone {
  padding-right: 25px;
  padding-bottom: 25px;
}

.news_contents p img.alignright {
  padding-left: 25px;
  padding-bottom: 25px;
}

.news_contents p img.aligncenter {
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
}



/*---------------------------------------------
 サイドバー
---------------------------------------------*/


/* サイドメニュー （WPページのみidではなくclass指定）
---------------------------------------------*/

.side_nav {
  margin-bottom: 12px;
}

.side_nav h3 {}

.side_nav ul {
  width: 200px;
}

.side_nav ul li {
  width: 200px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 3px;
}

.side_nav ul li a {
  display: block;
  width: 175px;
  color: #333;
  text-decoration: none;
  text-shadow: 2px 2px 0px #fff;
  padding: 10px 0 7px 25px;
  background: #F8F7F2 url(/img/news/bg_mark.png) no-repeat 12px center;
}

.side_nav ul li a:hover {
  color: #fff;
  text-shadow: none;
  background: #444444 url(/img/news/bg_mark.png) no-repeat 12px center;
}


.side_nav .dropdown {
  position: relative;
}

.side_nav .dropdown:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 12px;
  border: 5px dashed;
  border-color: #555 transparent;
  pointer-events: none;
  margin-top: 7px;
  border-top-style: solid;
  border-bottom: none;
}

.side_nav select {
  position: relative;
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-color: #ccc;
}

@media screen and (max-width: 768px) {

  /* =============================================================

    Mobile - Setting

  ============================================================= */


  /*---------------------------------------------
  CONTENTS
  ---------------------------------------------*/

  .ttl_001 {
    padding-right: 20px;
  }

  /* ニュース一覧
  ---------------------------------------------*/

  #news_listbox,
  #news_listbox dl {
    width: 100%;
  }

	#news_listbox dl dt {
		width: 110px;
	}

	#news_listbox dl dd {
		padding-left: 110px;
	}

  .listPaging {
    font-size: 1.1em;
  }

	.side_nav .dropdown:after {
		top: 14px;
  }

	.side_nav h3:before {
		display: none;
  }

  /* 記事
  ---------------------------------------------*/

  .news_box,
  .news_ttl,
  .news_ttl h3,
  .news_date,
  .news_contents {
    width: 100%;
  }

}
