/* ===== news・storyのMT記事 ===== */
:is(article#whatsnew, #story_article) {
  padding-bottom: 0;
  font-size: 1.6rem;
  line-height: 1.85;
}
:is(article#whatsnew, #story_article) .hero { padding-top: 162px; margin-bottom: 50px; }
:is(article#whatsnew, #story_article) .label {
  display: flex;
  align-items: center;
  margin-bottom: 44px;
  font-family:var(--sic-font-en);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--sic-decorative-label-color);
  letter-spacing: normal;
}
:is(article#whatsnew, #story_article) .label::before {
  content: "";
  width: 48px;
  height: 1px;
  margin-right: 8px;
  background: #6a6d98;
}
:is(article#whatsnew, #story_article) .category {
  display: inline-block;
  margin: 0 8px 0 0;
  padding: 4px 10px 5px;
  border-radius: 20px;
  background: #e9eaf0;
  color: var(--sic-color-primary);
  line-height: 1;
}
:is(article#whatsnew, #story_article) .category::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 4px;
  border-radius: 50%;
  background: #6a6d98;
  vertical-align: 4px;
}
/* PCのMTニュース記事（#whatsnew）のH1は、他ページのページタイトルより小さい5remで統一する。 */
:is(article#whatsnew, #story_article) .title {
  font-family:var(--sic-font-mincho);
  font-size: 5rem;
  line-height: 1.3;
  color: var(--sic-color-primary);
  font-weight: 500;
  letter-spacing: 0;
}
@media print, screen and (min-width: 768px) and (max-width: 1163px) {
  :is(article#whatsnew, #story_article) .title { font-size: 4rem; }
}
:is(article#whatsnew, #story_article) .subtitle { display: block; margin-top: .3em; font-size: 3.8rem; }
#story_article .title { font-size: 5.6rem; }
#story_article .subtitle { font-size: 4.2rem; }
:is(article#whatsnew, #story_article) .date { margin-top: 22px; color: var(--sic-color-primary); font-family:var(--sic-font-en); }
article#whatsnew .hero > .category[href="/sic/news/news-release/"] ~ .date { line-height: 1; }
#story_article .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
#story_article .meta .date { margin: 0; line-height: 1; }
#story_article .categories { display: flex; flex-wrap: wrap; }
#story_article .categories li { display: flex; align-items: center; line-height: 1; }
#story_article .meta .categories { align-self: center; }
#story_article .categories .category { margin-bottom: 0; font-size: 1.2rem; }
#story_article .categories .category::before { vertical-align: 2px; }
@media print, screen and (min-width: 768px) {
  #story_article .meta { column-gap: 15px; }
}
:is(article#whatsnew, #story_article) .publisher { margin-bottom: 2em; font-size: 1.5rem; text-align: right; }

/* 本文 */
:is(article#whatsnew, #story_article) .content > * { margin: 2em 0 0; }
:is(article#whatsnew, #story_article) .content > :first-child { margin-top: 0; }
:is(article#whatsnew, #story_article) .content h2 {
  color: var(--sic-color-primary);
  font-family:var(--sic-font-zen);
  font-size: 2.8rem;
  line-height: 1.5;
  padding-bottom: 24px;
  position: relative;
  margin-bottom: 50px;
}
:is(article#whatsnew, #story_article) .content h2::before {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  background: #bfc0d3;
  border-radius: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
}
:is(article#whatsnew, #story_article) .content h2::after {
  content: "";
  display: block;
  width: 24px;
  height: 6px;
  background: var(--sic-color-primary);
  border-radius: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
}
:is(article#whatsnew, #story_article) .content h3 {
  color: var(--sic-color-primary);
  font-family:var(--sic-font-zen);
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  padding-left: 22px;
  position: relative;
  margin-top: 90px;
  margin-bottom: 40px;
}
:is(article#whatsnew, #story_article) .content h3::before { content: ""; display: block; width: 6px; height: 100%; background: #bfc0d3; border-radius: 3px; position: absolute; top: 0; left: 0; }
:is(article#whatsnew, #story_article) .content h3::after { content: ""; display: block; width: 6px; height: 12px; background: var(--sic-color-primary); border-radius: 3px; position: absolute; top: 0; left: 0; }
:is(article#whatsnew, #story_article) .content h4 { font-size: 1.9rem; color: var(--sic-color-primary); font-weight: 700; }
:is(article#whatsnew, #story_article) .content h3 + .text { margin-top: 0; }
:is(article#whatsnew, #story_article) .content h4 + .text { margin-top: 0; }
:is(article#whatsnew, #story_article) .text.small { font-size: 1.4rem; }
:is(article#whatsnew, #story_article) .text p + p { margin-top: 1.5em; }
:is(article#whatsnew, #story_article) .text ul, :is(article#whatsnew, #story_article) .text ol { padding-left: 1.5em; list-style-position: outside; }
:is(article#whatsnew, #story_article) .text ul > li { list-style-type: disc; }
:is(article#whatsnew, #story_article) .text ol > li { list-style-type: decimal; }
:is(article#whatsnew, #story_article) .text a { color: var(--sic-color-primary); text-decoration: underline; overflow-wrap: anywhere; }
:is(article#whatsnew, #story_article) .text a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  background: url(../img/common/icon_external_link.svg) no-repeat center / contain;
}
:is(article#whatsnew, #story_article) .linkedin_guide a { color: var(--sic-color-primary); text-decoration: none; overflow-wrap: anywhere; }
:is(article#whatsnew, #story_article) .linkedin_guide a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  background: url(../img/common/icon_external_link.svg) no-repeat center / contain;
}
:is(article#whatsnew, #story_article) .linkedin_guide { margin-top: 100px; padding: 40px 50px; background: #f4f4f8; border-radius: 24px; }
:is(article#whatsnew, #story_article) .linkedin_guide .linkedin_guide_title { margin: 0 0 8px; color: var(--sic-color-primary); font-size: 1.6rem; font-weight: 700; }
:is(article#whatsnew, #story_article) .linkedin_guide p { margin: 0; }
:is(article#whatsnew, #story_article) .shaded { padding: 40px 50px; background: #f4f4f8; border-radius: 24px; }

/* 画像 */
:is(article#whatsnew, #story_article) .image-single { margin: 48px auto; text-align: center; }
:is(article#whatsnew, #story_article) .image-single img { width: auto; height: auto; max-width: 100%; margin-inline: auto; }
:is(article#whatsnew, #story_article) .image-single.wide img { max-width: min(100%, 980px); }
:is(article#whatsnew, #story_article) .image-single.large img { max-width: min(100%, 720px); }
:is(article#whatsnew, #story_article) .image-single.medium img { max-width: min(100%, 540px); }
:is(article#whatsnew, #story_article) .image-single.small img { max-width: min(100%, 360px); }
:is(article#whatsnew, #story_article) .image-single figcaption {
  width: 960px;
  max-width: 100%;
  margin: .5rem auto 0;
  font-size: 1.4rem;
  line-height: 1.85;
  text-align: center;
}
/* 画像とキャプション全体をリンクにする場合は、キャプションも本文リンクと同じ見た目にする。 */
:is(article#whatsnew, #story_article) a > .image-single figcaption {
  color: var(--sic-color-primary);
  text-decoration: underline;
}
:is(article#whatsnew, #story_article) .image-double {
  width: 820px;
  max-width: 100%;
  margin: 48px auto;
  table-layout: fixed;
  border-collapse: collapse;
}
:is(article#whatsnew, #story_article) .image-double td { width: 50%; text-align: center; vertical-align: middle; }
:is(article#whatsnew, #story_article) .image-double td:first-child { padding-right: 1rem; }
:is(article#whatsnew, #story_article) .image-double td:last-child { padding-left: 1rem; }
:is(article#whatsnew, #story_article) .image-double img { max-width: 100%; max-height: 320px; width: auto; height: auto; margin: auto; }
:is(article#whatsnew, #story_article) .image-double .captions td { padding-top: .5rem; vertical-align: top; font-size: 1.3rem; }
:is(article#whatsnew, #story_article) .profile { display: flex; align-items: center; gap: 1.5em; }
:is(article#whatsnew, #story_article) .profile > img { width: auto; height: auto; max-width: 130px; max-height: 130px; }
:is(article#whatsnew, #story_article) .profile > div { min-width: 0; }
@media (prefers-reduced-motion: reduce), print {
  :is(article#whatsnew, #story_article) .hero, :is(article#whatsnew, #story_article) .article-body {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}
@media print, screen and (min-width: 768px) {
  :is(article#whatsnew, #story_article) { margin-top: -72px; }
  :is(article#whatsnew, #story_article) .content h2 { font-size: 3.6rem; margin-bottom: 54px; }
  :is(article#whatsnew, #story_article).l__bg-section { background: linear-gradient(to bottom, #0000 400px, #fff 650px), url(../img/common/bg_mv_pc.png) center top 72px; }
}
@media only screen and (max-width: 767px) {
  :is(article#whatsnew, #story_article) .image-single.small img { max-width: min(85%, 360px); }
  :is(article#whatsnew, #story_article).l__bg-section { background: linear-gradient(to bottom, #0000 130px, #fff 380px), url(../img/common/bg_mv_sp.png) center top; }
  :is(article#whatsnew, #story_article) .hero { padding-top: 55px; margin-bottom: 40px; }
  :is(article#whatsnew, #story_article) .label { margin-bottom: 25px; }
  :is(article#whatsnew, #story_article) .title { font-size: 3.6rem; }
  :is(article#whatsnew, #story_article) .subtitle { font-size: 2.8rem; }
  :is(article#whatsnew, #story_article) .date { margin-top: 12px; }
  :is(article#whatsnew, #story_article) .publisher { font-size: 1.4rem; }
  #story_article .meta { margin-bottom: 24px; }
  :is(article#whatsnew, #story_article) .content h3 { margin: 60px 0 32px; }
  :is(article#whatsnew, #story_article) .linkedin_guide { padding: 30px; }
  :is(article#whatsnew, #story_article) .shaded { padding: 36px; }
  :is(article#whatsnew, #story_article) .image-double { display: block; }
  :is(article#whatsnew, #story_article) .image-double tbody { display: grid; grid-template-columns: minmax(0, 1fr); }
  :is(article#whatsnew, #story_article) .image-double tr { display: contents; }
  :is(article#whatsnew, #story_article) .image-double td:first-child, :is(article#whatsnew, #story_article) .image-double td:last-child { width: auto; padding: 0; }
  :is(article#whatsnew, #story_article) .image-double .captions td { padding-top: .5rem; }
  :is(article#whatsnew, #story_article) .image-double tr:first-child td:first-child { grid-row: 1; }
  :is(article#whatsnew, #story_article) .image-double .captions td:first-child { grid-row: 2; }
  :is(article#whatsnew, #story_article) .image-double tr:first-child td:last-child { grid-row: 3; margin-top: 2em; }
  :is(article#whatsnew, #story_article) .image-double .captions td:last-child { grid-row: 4; }
}

/* Hover effects are limited to devices with a fine pointer. */
@media (hover: hover) and (pointer: fine){
article#whatsnew .text a:hover, #story_article .text a:hover { text-decoration: underline; }}
@media (hover: hover) and (pointer: fine){
:is(article#whatsnew, #story_article) .linkedin_guide a:hover { text-decoration: underline; }}