/* エンジニアリングモールお知らせ一覧ページ専用CSS */

/* パンくずリストを非表示 */
.engineering-mall-page .wrap-breadcrumb {
  display: none !important;
}
/* エンジニアリングモールお知らせ一覧ページでは、タイトルエリアを表示 */
body.engineering-mall-page .wrap .wrap-main-img,
body.engineering-mall-page .site-content .wrap .wrap-main-img {
  display: block !important;
}

.site-content .wrap .content-area .site-main .eachcontent.news-list {
  background: #ededed;
  padding: 40px 0;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container {
  background: #fff;
  width: 1080px;
  margin: 0 auto;
  padding: 40px 0;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container ul {
  width: 1020px;
  margin: 0 auto 30px auto;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li {
  border-bottom: 1px solid #ddd;
  padding: 1em 0;
  background: url(../images/home/arrow02.png) no-repeat right 1em top 50%;
  background-size: 8px auto;
  position: relative;
}
/* エンジニアリングモールお知らせ一覧ページでは、矢印を紺色に変更 */
.engineering-mall-page .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li {
  background: none;
}
.engineering-mall-page .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li::after {
  content: '';
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid #194373;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li:first-child {
  border-top: 1px solid #ddd;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li a {
  line-height: 2.2;
  display: block;
  width: 100%;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li a .cat {
  color: #fff;
  background: #194373;
  width: 12em;
  text-align: center;
  margin-right: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li a .date {
  width: 10em;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li a:hover {
  text-decoration: none;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li a:hover .date, .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li a:hover .ttl {
  text-decoration: underline;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container .pagination {
  text-align: center;
  margin-bottom: 0;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container .pagination .page-numbers {
  background: #ccc;
  color: #fff;
  padding: 0.5em 0.7em;
  -moz-border-radius: 8%;
  -webkit-border-radius: 8%;
  border-radius: 8%;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container .pagination .page-numbers:hover {
  background: #999;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container .pagination .page-numbers.current {
  background: #999;
}
.site-content .wrap .content-area .site-main .eachcontent.news-list .container .pagination > h2.screen-reader-text {
  display: none;
}

@media screen and (min-width: 0px) and (max-width: 750px) {
  body img {
    width: 100%;
    height: auto;
  }
  body .sp {
    display: block;
  }
  body .pc {
    display: none;
  }
  body .site .site-content {
    margin: 0;
    float: none;
    padding: 0;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent {
    width: 100%;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.news-list {
    background: #fff;
    padding: 4% 0;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.news-list .container {
    width: 100%;
    padding: 0;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul {
    width: 90%;
    margin: 0 auto 5% auto;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li {
    background: url(../images/home/arrow02.png) no-repeat right 0.2em top 50%;
    background-size: 8px auto;
    padding: 0.5em 0;
    position: relative;
  }
  /* エンジニアリングモールお知らせ一覧ページでは、スマートフォンでも矢印を紺色に変更 */
  body.engineering-mall-page .site .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li {
    background: none;
  }
  body.engineering-mall-page .site .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li::after {
    content: '';
    position: absolute;
    right: 0.2em;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid #194373;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li:first-child {
    border-top: 1px solid #ddd;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li a {
    line-height: 1.8;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li a .cat.fleft {
    color: #fff;
    background: #194373;
    width: 27%;
    text-align: center;
    margin-right: 0;
    font-size: 2.8vw;
    font-weight: 700;
    padding: 0.5em 0;
    margin-top: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li a .date.fleft, body .site .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li a .ttl.fleft {
    width: auto;
    float: right;
    padding-right: 1.5em;
    width: 70%;
    font-size: 3.5vw;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li a:hover {
    text-decoration: none;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li a:hover .date, body .site .site-content .wrap .content-area .site-main .eachcontent.news-list .container ul li a:hover .ttl {
    text-decoration: underline;
  }
}