/* ニュース一覧ページ：トップ・ニュース一覧で共通使用 */
div#whatsnew {
  padding-bottom: 0;
  font-size: 1.6rem;
  line-height: 1.85;
}
div#whatsnew .hero { padding-top: 162px; margin-bottom: 48px; }
div#whatsnew .hero > h1.title {
  font-family: var(--sic-font-mincho);
  font-size: 5rem;
  line-height: 1.3;
  color: var(--sic-color-primary);
  font-kerning: normal;
  font-weight: 500;
  letter-spacing: .04em;
}
div#whatsnew .label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 44px;
  font-family: var(--sic-font-en);
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--sic-decorative-label-color);
  letter-spacing: normal;
}
div#whatsnew .label::before {
  content: "";
  width: 48px;
  height: 1px;
  background: #6a6d98;
}
@media print, screen and (min-width: 768px) {
  div#whatsnew { margin-top: -72px; }
  div#whatsnew.l__bg-section { background: linear-gradient(to bottom, #0000 400px, #fff 650px), url(../img/common/bg_mv_pc.png) center top 72px; }
}
@media print, screen and (min-width: 768px) and (max-width: 1163px) {
  div#whatsnew .hero > h1.title { font-size: 4rem; }
}
@media only screen and (max-width: 767px) {
  div#whatsnew.l__bg-section { background: linear-gradient(to bottom, #0000 130px, #fff 380px), url(../img/common/bg_mv_sp.png) center top; }
  div#whatsnew .hero { padding-top: 55px; margin-bottom: 40px; }
  div#whatsnew .hero > h1.title { font-size: 3.6rem; }
  div#whatsnew .label { margin-bottom: 25px; }
}

/* 一覧行 */
.news-list { margin-top: 24px; }
.news-list .entry {
  position: relative;
  padding: 36px 0;
  background-image: repeating-linear-gradient(90deg, #6a6d98, #6a6d98 1px, transparent 1px, transparent 3px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 1px;
}
.news-list .entry > a {
  display: flex;
  align-items: center;
  gap: 36px;
  color: var(--sic-color-primary);
  text-decoration: none;
  transition: color .2s ease-in;
}
.news-list .entry-date {
  flex: 0 0 100px;
  color: var(--sic-color-primary);
  font-family: var(--sic-font-en);
  font-weight: 600;
  line-height: 1.25;
}
.news-list .entry-body { display: block; flex: 1; min-width: 0; padding-right: 96px; }
.news-list .category {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 3px 10px 5px;
  border-radius: 20px;
  background: #e9eaf0;
  color: var(--sic-color-primary);
  line-height: 1;
}
.news-list .category::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 4px;
  border-radius: 50%;
  background: #6a6d98;
  vertical-align: 4px;
}
.news-list .category.is-category-link { cursor: pointer; }
.news-list .category.is-category-link:focus-visible {
  outline: 2px solid var(--sic-color-primary);
  outline-offset: 2px;
}
.news-list .entry h2 { margin: 0; font-size: 1.6rem; font-weight: 500; line-height: 1.5; }
@media (hover: hover) and (min-width: 768px) {
}
.news-list .entry > a:focus-visible { outline: 2px solid var(--sic-color-primary); outline-offset: 2px; }
.news-list .entry .arrow {
  position: absolute;
  top: calc(50% - 12px);
  right: 0;
  display: block;
  width: 36px;
  height: 24px;
  border-radius: 25px;
  background: var(--sic-color-primary);
  transition: background-color .2s ease-in;
}
.news-list .entry .arrow span { position: absolute; top: 50%; left: 50%; width: 16px; height: 8px; overflow: hidden; transform: translate(-50%, -50%); }
.news-list .entry .arrow span::before, .news-list .entry .arrow span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/common/icon_arrow.svg) no-repeat center / contain;
  animation-duration: .2s;
  animation-fill-mode: forwards;
}
.news-list .entry .arrow span::after { background-image: url(../img/common/icon_arrow_blue.svg); transform: translateX(-100%); }
.news-list .entry.blank-link .arrow span { width: 16px; height: 10px; background: none; }
.news-list .entry.blank-link .arrow span::before,
.news-list .entry.blank-link .arrow span::after { background: no-repeat center / 16px 10px; transform: none; transition: opacity .2s ease-in; }
.news-list .entry.blank-link .arrow span::before { background-image: url(../img/common/icon_external_link_white.svg); }
.news-list .entry.blank-link .arrow span::after { background-image: url(../img/common/icon_external_link.svg); opacity: 0; }

@media print, screen and (min-width: 768px) {
}
@media (prefers-reduced-motion: reduce), print {
  .news-list .entry .arrow,
  .news-list .entry .arrow span::before,
  .news-list .entry .arrow span::after { animation: none; transition: none; }
}
@media only screen and (max-width: 767px) {
  .news-list { margin-top: 32px; }
  .news-list .entry { padding: 28px 0; }
  .news-list .entry > a { display: block; }
  .news-list .entry-date { display: block; margin-bottom: 10px; }
  .news-list .category { font-size: 1.5rem; }
  .news-list .entry-body { padding-right: 60px; }
  .news-list .entry .arrow { top: auto; bottom: 28px; }
}

/* Hover effects are limited to devices with a fine pointer. */
@media (hover: hover) and (pointer: fine){@media (hover: hover) and (min-width: 768px){
  .news-list .entry > a:hover h2 { text-decoration: underline; }}}
@media (hover: hover) and (pointer: fine){@media print, screen and (min-width: 768px){
  .news-list .entry > a:hover .arrow { background: #bfc0d3; }}}
@media (hover: hover) and (pointer: fine){@media print, screen and (min-width: 768px){
  .news-list .entry:not(.blank-link) > a:hover .arrow span::before { animation-name: arrowWhiteX; animation-delay: .2s; }}}
@media (hover: hover) and (pointer: fine){@media print, screen and (min-width: 768px){
  .news-list .entry:not(.blank-link) > a:hover .arrow span::after { animation-name: arrowBlueX; animation-delay: .2s; }}}
@media (hover: hover) and (pointer: fine){@media print, screen and (min-width: 768px){
  .news-list .entry:not(.blank-link) > a:not(:hover) .arrow span::before { animation-name: arrowWhiteXBack; }}}
@media (hover: hover) and (pointer: fine){@media print, screen and (min-width: 768px){
  .news-list .entry:not(.blank-link) > a:not(:hover) .arrow span::after { animation-name: arrowBlueXBack; }}}
@media (hover: hover) and (pointer: fine){@media print, screen and (min-width: 768px){
  .news-list .entry.blank-link > a:hover .arrow span::before { opacity: 0; }}}
@media (hover: hover) and (pointer: fine){@media print, screen and (min-width: 768px){
  .news-list .entry.blank-link > a:hover .arrow span::after { opacity: 1; }}}