@charset "utf-8";
/* Related Links */
.prl_container ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
}
.prl_item {
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ddd;
  display: table;
}
.prl_item_img {
  display: table-cell;
  vertical-align: top;
  width: 125px;
}
.prl_item_img_inner {
  width: 122px;
  height: 82px;
  border: 1px solid #ddd;
}
.prl_item_img a {
  display: block;
  width: 100%;
  height: 100%;
}
.prl_item_img a:hover {
  opacity: 0.8;
}
.prl_item_img img {
  width: 120px;
  height: 80px;
  -webkit-backface-visibility: hidden;
}
.prl_item_txt {
  display: table-cell;
  vertical-align: middle;
  line-height: 1.6;
  padding-left: 15px;
}
.prl_item_txt a {
  text-decoration: none;
}
.prl_item_txt .txt_title {
  display: block;
  font-size: 1.1em;
  text-decoration: underline;
}
.prl_item_txt .txt_detail {
  margin-top: 4px;
  color: #555;
}
/* Related Words */
.prw_container {
  background: #f1f1f1;
  border: 1px solid #ddd;
  padding: 20px 20px 15px;
}
.prw_container .prw_title {
  color: #444;
  font-size: 1.15em;
}
.prw_container ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}
.prw_item {
  width: auto;
}
.prw_item a {
  display: inline-block;
  padding: 8px 15px;
  background: #fff;
  border-radius: 6px;
  margin: 0 5px 5px 0;
  border: 1px solid #ddd;
}
.prw_item a:hover {
  background: #fe0;
  border: 1px solid #fe0;
}
@media screen and (max-width: 480px) {
  .prw_item {
    width: 100%;
  }
  .prw_item a {
    width: 100%;
  }
}
/*  //////////////////////////////////////////////////simple type */
/*  ////////////// Common & structure */
.dtgl_simple_related_area {
  box-sizing: border-box;
  width: 100%;
  background: #f1f1f1;
  margin: 50px auto 0px;
}
.dtgl_simple_related_area p {
  box-sizing: border-box;
}
.dtgl_simple_related_area ul {
  box-sizing: border-box;
}
.dtgl_simple_related_area ul li {
  box-sizing: border-box;
}
.dtgl_simple_related_area ul li a {
  box-sizing: border-box;
}
.dtgl_simple_related_area_inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px 15px 15px;
}
.dtgl_simple_related_area.type_rwd .dtgl_simple_related_area_inner {
  max-width: 1300px;
}
.dtgl_simple_related_area.type_oldstyle .dtgl_simple_related_area_inner {
/* 背景黒、コンテンツ白、非レスポンシブ ：商用他 */
  max-width: 970px;
  background: rgba(50,50,50,0.7);
}
.dtgl_simple_relatedlinks {
  text-align: left;
  padding: 10px 5px;
}
.dtgl_simple_relatedwords {
  padding: 10px 5px;
  text-align: left;
}
.dtgl_simple_related_area_title {
  display: block;
  width: 100%;
  text-align: left;
  color: #444;
  font-size: 1em;
  font-weight: normal;
  margin: 0 0 4px;
  padding: 0;
}
/*  ////////////// Related Links */
.dtgl_simple_relatedlinks ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  margin: 0;
  border-top: 1px solid #ddd;
}
.dtgl_simple_relatedlinks_item {
  width: 100%;
  border-bottom: 1px solid #ddd;
}
.dtgl_simple_relatedlinks_item:last-child {
  border-bottom: 1px solid #ddd;
}
.fullwide .links_multiple .dtgl_simple_relatedlinks_item {
  width: 50%;
}
.dtgl_simple_relatedlinks_item a {
  display: inline-block;
  padding: 8px 10px 8px 24px;
  width: 100%;
  background: #fff;
  position: relative;
}
.dtgl_simple_relatedlinks_item a .color-new {
  color: #e00 !important;
}
.dtgl_simple_relatedlinks_item a:hover {
  background: #fff;
  text-decoration: none;
}
.dtgl_simple_relatedlinks_item a::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
  left: 4px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: rotate(45deg);
  border-radius: 1px;
  transition: all 0.3s ease-out;
}
.type_nonrwd .dtgl_simple_relatedlinks_item a::before {
  width: 5px;
  height: 5px;
}
.dtgl_simple_relatedlinks_item a:hover::before {
  left: 9px;
}
/*  ////////////// Related Words */
.dtgl_simple_relatedwords_item {
  display: inline-block;
}
.dtgl_simple_relatedwords_item ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.dtgl_simple_relatedwords_item a {
  display: inline-block;
  padding: 4px 15px;
  background: #fff;
  border-radius: 4px;
  margin: 0 5px 5px 0;
  border: 1px solid #ddd;
  color: #444 !important;
}
.dtgl_simple_relatedwords_item a:hover {
  background: #fe0;
  color: #222 !important;
  text-decoration: none;
}
/* addClass （定義ファイル内で指定する個別ページごとの追加クラス）*/
.dtgl_simple_related_area.noMargin {
  margin: 0;
}
.dtgl_simple_related_area.noBtMargin {
  margin-bottom: 0;
}
.dtgl_simple_related_area.bgWhite {
  background: #fff;
}
.dtgl_simple_related_area.bgDark {
  background: #202020;
}
.dtgl_simple_related_area.bgDark p {
  color: #bbb;
}
.dtgl_simple_related_area.bgDark .dtgl_simple_relatedlinks ul {
  border-color: #555;
}
.dtgl_simple_related_area.bgDark .dtgl_simple_relatedlinks_item {
  border-color: #555;
}
.dtgl_simple_related_area.bgDark .dtgl_simple_relatedlinks_item a {
  background: none;
  color: #eee !important;
  text-decoration: none;
}
.dtgl_simple_related_area.bgDark .dtgl_simple_relatedlinks_item a:hover {
  background: rgba(80,80,80,0.5);
}
.dtgl_simple_related_area.bgDark .dtgl_simple_relatedlinks_item:last-child {
  border-color: #555;
}
.dtgl_simple_related_area.bgDark .dtgl_simple_relatedwords_item a {
  background: none;
  color: #eee !important;
  border-color: #555;
  text-decoration: none;
}
.dtgl_simple_related_area.bgDark .dtgl_simple_relatedwords_item a:hover {
  background: rgba(80,80,80,0.5);
}
.dtgl_simple_related_area.bgDark .dtgl_simple_relatedlinks_item a:hover::before {
  border-color: #fe0;
}
.dtgl_simple_related_area.bgBk {
  background: rgba(0,0,0,0.9);
}
.dtgl_simple_related_area.bgNon {
  background: none;
}
.fullwide .dtgl_simple_related_area.bgDark.bgNon,
.fullwide .dtgl_simple_related_area.bgBk.bgNon {
  background: #202020;
}
@media screen and (max-width: 767px) {
  .fullwide .type_rwd .links_multiple .dtgl_simple_relatedlinks_item {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .dtgl_simple_related_area.type_rwd {
    padding: 5px 0px 5px;
  }
  .dtgl_simple_related_area.type_rwd .dtgl_simple_relatedwords_item,
  .dtgl_simple_related_area.type_rwd .dtgl_simple_relatedlinks_item,
  .dtgl_simple_related_area.type_rwd .dtgl_simple_relatedwords_item a,
  .dtgl_simple_related_area.type_rwd .dtgl_simple_relatedlinks_item a {
    width: 100%;
  }
  .dtgl_simple_related_area.type_rwd .dtgl_simple_relatedwords_item a {
    padding: 8px 10px;
  }
}
