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

/*--------------------------------
  ページタイトル
*/
.page-ttl-bg {
  background: url("/images/web_posting/ttl-img.jpg") no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-content: center;
  aspect-ratio: 25 / 6;/*750　x　180*/
}
.page-ttl-bg .page-ttl {
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  text-shadow: 0px 1px 8px rgba(0,0,0,0.40);
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin: auto;
}
@media screen and (min-width: 600px) {
  .page-ttl-bg .page-ttl {
    font-size: 3rem;
  }
  .page-ttl-bg {
    aspect-ratio: 44 / 7;/*1320　x　210*/
  }
}
.web-posting {
  /*background-color: var(--cmn-gray06);*/
  padding: 30px 10px;
}
.lead-1 {
  margin: 20px 10px 10px;
}
.web-posting ._inner {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .lead-1 {
    margin: 40px 20px 20px;
  }
  .web-posting {
    padding: 40px 20px 60px;
  }
  .web-posting ._inner {
    max-width: 1060px;
  }
}
/*一覧*/
.web-posting-list li {
  background-color: #fff;
  border-bottom: var(--cmn-gray05) 1px solid;
  padding: 1em 2.5em 1em 1em;
  position: relative;
  overflow: hidden;
  font-size: 1.6rem;
}
.web-posting-list li:first-child {
  border-top: var(--cmn-gray05) 1px solid;
}
.web-posting-list li a {
  color: inherit;
  display: inline-block;
  position: relative;
  transition: 0.3s
}
.web-posting-list li a::after {
  background: url("/images/ico_external_red.svg") no-repeat center center;
  background-size: cover;
  content: '';
  display: inline-block;
  position: relative;
  top: 2px;
  width: 1em;
  height: 1em;
  margin-left: 3px;
  /*矢印
  border-top: var(--cmn-red) 1px solid;
  border-right: var(--cmn-red) 1px solid;
  transform: rotate(45deg);*/
}
.web-posting-list .date {
  color: var(--cmn-gray03);
  font-weight: bold;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  transition: 0.3s;
}
.web-posting-list .post {
  margin-top: 0.5em;
  overflow: hidden
}
.web-posting-list .post .post-ttl {
  font-weight: bold;
  margin-bottom: 0.5em;
}
.web-posting-list .post p {
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .web-posting-list li {
    padding: 1.5em 3em 1.5em 1.5em;
  }
  .web-posting-list li a:hover {
    color: var(--txt-link01);
    text-decoration: underline;
  }
  .web-posting-list .date-box {
    float: left;
    overflow: hidden;
    width: 10em;
  }
  .web-posting-list .post {
    font-size: 1.6rem;
    margin-top: 0;
    overflow: hidden
  }
}