/*---------------- top kv
----------------------------------------*/

.kv {
  position: relative;
  /* height: 600px; */
  margin: 112px 0 80px 0;
}
/* .kv-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 600px;
  transform: translateX(-50%);
} */
.kv-inner img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1480px) {
  .kv {
    /* margin-right: -40px; */
  }
}

@media screen and (max-width: 767px) {
  .kv {
    height: auto;
    margin: 56px 0 40px;
  }
  .kv-inner {
    /* position: static;
    height: 25vh;
    transform: none; */
  }
}

/*---------------- top main
----------------------------------------*/
.post {
  margin: 0 0 40px;
}
.post-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 0 0 48px;
}
.post-head-ttl {
  line-height: 1.5;
  margin: 0 40px 0 0;
  font-size: 18px;
  font-weight: bold;
}
.post-head-lead {
  margin-right: auto;
  padding: 0 160px 0 40px;
  border-left: 1px solid #E6E6E6;
}
.post-head-lead:empty {
  display: none;
}
.post-head-btn {
  /* position: absolute;
  top: 0;
  right: 0; */
  flex-shrink: 0;
  margin: 0 0 0 10px;

}
.post-head-btn a {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 12px 24px;
  border: 2px solid #333;
  border-radius: 40px;
  color: #fff;
  background: #333;
}
.post-head-btn a:hover {
  text-decoration: none;
}
.post-head-btn a i {
  display: block;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0 0 0 8px;
  border-radius: 100%;
  background: #fff;
  transition: .3s;
}
.post-head-btn a i:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: .3s;
}

.member-btn {
  /* position: absolute;
  top: 64px;
  right: 0; */
  flex-shrink: 0;
  margin: 0 0 0 10px;
}
.member-btn a {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 12px 24px;
  border: 2px solid #333;
  border-radius: 40px;
  color: #fff;
  background: #333;
}
.member-btn a:hover {
  text-decoration: none;
}
.member-btn a i {
  display: block;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0 0 0 8px;
  border-radius: 100%;
  background: #fff;
  transition: .3s;
}
.member-btn a i:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 0;
  border-left: 0;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: .3s;
}

.post-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.post-list:after {
  content: "";
  display: block;
  width: 30.90909090909091%;
}
.post-list-item {
  width: 30.90909090909091%;
  margin: 0 0 40px;
}
.post-list-item a {
  display: block;
  margin: 0 0 16px;
}
.post-list-item a[target="_blank"] .post-list-ttl:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: top;
  margin: 5px 0 0 8px;
  background: url(/upload/static/icon-external-01.svg) no-repeat 0 0;
  background-size: 16px 16px;
}
.post-list-item a[href$=".pdf"] .post-list-ttl:after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 16px;
  vertical-align: top;
  margin: 5px 0 0 8px;
  background: url(/upload/static/icon-pdf-01.svg) no-repeat 0 0;
  background-size: 18px 16px;
}
.post-list-img {
  overflow: hidden;
}
.post-list-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 34 / 21;
  object-fit: cover;
  transition: .3s;
}
.post-list-profile {
  display: flex;
  position: relative;
  min-height: 60px;
  margin: -22px 0 -8px 8px;
}
.post-list-profile:empty {
  display: none;
}
.post-list-avatar {
  width: 60px;
  overflow: hidden;
  margin: 0 8px 0 0;
  border-radius: 100%;
}
.post-list-avatar:empty {
  display: none;
}
.post-list-avatar img {
  width: 60px;
  height: 60px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.post-list-name {
  padding: 26px 0 0;
  font-weight: bold;
}
.post-list-name:empty {
  display: none;
}
.post-list-date {
  margin: 16px 0 0;
  color: #999;
  font-size: 12px;
}
.post-list-date:empty {
  margin: 0;
}
.post-list-date span.date {
  margin-right: 8px;
}
.post-list-date span.new {
  display: inline-block;
  line-height: 1;
  /* margin: 0 0 0 8px; */
  padding: 4px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  background: #EB7E11;
}
.post-list-ttl {
  line-height: 1.5;
  margin: 24px 0 16px;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.post-list-cat {
  display: flex;
  flex-wrap: wrap;
}
.post-list-cat span {
  color: #666;
  font-size: 10px;
  font-style: italic;
  padding-right: 8px;
}
.action {
  display: flex;
  line-height: 1;
}
.action button {
  position: relative;
  cursor: pointer;
}
.action-favorite button {
  width: 15px;
  height: 16px;
  background: url(/upload/static/icon-action-favorite.svg) no-repeat 0 0;
  background-size: 15px 16px;
}
.action-favorite.is-registered button {
  background-image: url(/upload/static/icon-action-favorite-on.svg);
}
.action-comment {
  margin: 0 0 0 auto;
}
.action-comment.is-registered {
  color: #02AD9F;
}
.action-comment button {
  width: 19px;
  height: 16px;
  background: url(/upload/static/icon-action-comment.svg) no-repeat 0 0;
  background-size: 19px 16px;
}
.action-comment.is-registered button {
  background-image: url(/upload/static/icon-action-comment-on.svg);
}

.action-good {
  position: relative;
  padding: 0 0 0 50px;
}
.action-good button {
  position: absolute;
  left: 8px;
  width: 50px !important;
  height: 50px !important;
  background-image: url(/upload/static/web_heart_animation.png);
  background-position: left;
  background-repeat: no-repeat;
  background-size: 1450px;
  transform: translateY(-16px);
}
.action-favorite.is-registered button {
  background-position: right;
}
.action-good.is-registered button {
  background-position: right;


  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: steps(28);
  animation-timing-function: steps(28);
  background-position: right;
}

.action-good.is-registered button.heartAnimation {
  -webkit-animation-name: heartBlast;
  animation-name: heartBlast;
}

@-webkit-keyframes heartBlast {
  0% {background-position: left;}
  100% {background-position: right;}
}
@keyframes heartBlast {
  0% {background-position: left;}
  100% {background-position: right;}
}

@media screen and (min-width: 768px) {
  .post-list-item a:hover .post-list-img img {
    transform: scale(1.07);
  }
  .action button:hover:after {
    content: attr(data-tooltip);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    padding: 3px 4px;
    border-radius: 2px;
    color: #999;
    font-size: 12px;
    white-space: nowrap;
    background: #F6F6F6;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    transform: translate(-50%, -130%);
  }
  .action-good button:hover {
    background-position: right;
  }
  .action-good button:hover:after {
    transform: translate(-50%, -50%);
  }
}

@media screen and (min-width: 768px) {
  .post-head-btn a:hover {
    color: #333;
    background: #fff;
  }
  .post-head-btn a:hover i {
    background: #333;
  }
  .post-head-btn a:hover i:before {
    border-color: #fff;
  }
  .member-btn a:hover {
    color: #333;
    background: #fff;
  }
  .member-btn a:hover i {
    background: #333;
  }
  .member-btn a:hover i:before {
    border-color: #fff;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
  }
}
@media screen and (max-width: 1480px) {
  .post {
    margin-right: 40px!important;
  }
  .post-head-lead {
    padding-right: 120px;
  }
}
@media screen and (max-width: 767px) {
  .post {
    display: block;
    margin: 0 0 40px;
    margin-right: 0!important;
  }
  .post-head {
    display: block;
    width: auto;
    margin: 0 16px 32px;
  }
  .post-head-ttl {
    margin: 0 0 8px;
  }
  .post-head-lead {
    padding: 0;
    border: none;
  }
  .post-head-btn {
    position: static;
    margin: 32px 0 0;
    text-align: center;
  }
  .post-list {
    display: block;
  }
  .post-list:after {
    content: none;
  }
  .post-list-item {
    width: 245px !important;
    margin: 0 16px;
  }
  .member-head {
    display: block !important;
    width: auto !important;
    margin: 0 16px 32px !important;
  }
  .member-ttl {
    margin: 0 0 8px;
  }
  .member-lead {
    padding: 0;
    border: none;
  }
  .member-btn {
    position: static;
    margin: 32px 0 0;
    text-align: center;
  }
}
a {
  text-decoration: none;
}

.post-item-id span {
  display: inline-block;
  line-height: 1;
  margin: 0 0 0 8px;
  padding: 4px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  background: #EB7E11;
}

.header-side {
  /* position: relative;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 50; */
}
.main-wrap {
  position: relative;
  /* margin-top: 40px; */
}

@media screen and (max-width: 1480px) {
  .header-side {
    /* left: 40px; */
  }
}

@media screen and (max-width: 767px) {
  /* .top .side {
      display: none;
      left: 0;
      position: static;
      width: auto;
      margin: 0 16px;
  } */
}

.member-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  min-height: 3em;
  margin: 0 0 48px;
}
.member-lead {
  margin-right: auto;
}