/*------------------------------------------------------------------------------
ARTICLE（各話・旧版の各話・お知らせの記事のページ）
inc/article/template-tags.php の部品の体裁。三つのページを同じ形にそろえる。
- 見出し（.lv-article-head）：記事の絵が下へ夜の地に溶け、そこから種類と番号・題・分類・日付・読了目安が中央に並ぶ
- 本文（.lv-prose）：一行はおよそ 36 字、段落の間は 1 行分。白は少し落とし、長く読んでも目が疲れにくくする
- 本文の後（.lv-article-end・.lv-share）：三つの菱形の終わりの印と、共有のボタン
- 前後への移動（.lv-pager）：前と次の札（次を少し強く）と、一覧への戻り道
文字の大きさは html[data-reading-size]（各話の補助メニューで選ぶ。js/episode.js）で変わる。
動きは opacity と transform だけ。
------------------------------------------------------------------------------*/
.lv-article-page {
  /* 本文の白：真っ白より少し落とし、ぎらつきを抑える（地の紺との明暗の差は 14:1 ほど） */
  --article-ink: #e4e0d6;
  --article-ink-soft: rgba(228, 224, 214, 0.64);
  --article-title: #f7f3ea;
  --article-gold: var(--lv-color-accent-gold);
  --article-gold-light: #d4b585;
  --article-line: rgba(185, 146, 100, 0.38);
  --article-rule: rgba(185, 146, 100, 0.16);
  --article-card: rgba(6, 14, 25, 0.62);
  --article-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --article-gutter: max(20px, 5.2vw);
  --article-scale: 1;
  --article-font-size: calc(clamp(16px, 15.2px + 0.22vw, 18px) * var(--article-scale));
  display: block;
  padding-bottom: 120px;
}
html[data-reading-size="small"] .lv-article-page {
  --article-scale: 0.9;
}
html[data-reading-size="large"] .lv-article-page {
  --article-scale: 1.14;
}

/*------------------------------------------------------------------------------
見出し
------------------------------------------------------------------------------*/
.lv-article-head {
  position: relative;
  display: grid;
  justify-items: center;
  overflow: hidden;
  text-align: center;
}
/* 記事の絵：下の方から夜の地へ溶かす（固定の夜のテクスチャに継ぎ目なく重なるよう、色を重ねずに透かす）。
   種類と題が重なる下の 3 割ほどは、明るい絵でも文字が読めるよう、ほとんど透かしておく */
.lv-article-head__visual {
  position: relative;
  width: 100%;
  height: clamp(300px, 86vw, 560px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 34%,
    rgba(0, 0, 0, 0.42) 68%,
    rgba(0, 0, 0, 0.12) 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 34%,
    rgba(0, 0, 0, 0.42) 68%,
    rgba(0, 0, 0, 0.12) 86%,
    transparent 100%
  );
}
.lv-article-head__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
/* 絵のない記事：題の後ろに、淡い金の光だけを置く */
.lv-article-head--plain::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(900px, 130vw);
  background: radial-gradient(closest-side, rgba(185, 146, 100, 0.13), rgba(185, 146, 100, 0));
  transform: translateX(-50%);
  pointer-events: none;
}
.lv-article-head__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(100% - var(--article-gutter) * 2, 760px);
  margin-top: -56px;
}
/* 文字の後ろに、夜の色の淡い影（絵の明るいところに文字が重なっても読めるように） */
.lv-article-head__inner::before {
  content: "";
  position: absolute;
  top: -48px;
  right: -16%;
  bottom: 0;
  left: -16%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(6, 14, 25, 0.62), rgba(6, 14, 25, 0));
  pointer-events: none;
}
.lv-article-head--plain .lv-article-head__inner {
  margin-top: 0;
  padding-top: 132px;
}
/* 種類と番号：◆ EPISODE ── File.10 */
.lv-article-head__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 14px;
  row-gap: 6px;
  margin: 0 0 16px;
  color: var(--article-gold);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.32em;
  text-shadow: 0 1px 12px rgba(6, 14, 25, 0.9);
}
.lv-article-head__kind {
  display: inline-flex;
  align-items: center;
  column-gap: 12px;
}
.lv-article-head__kind::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background-color: var(--article-gold);
  transform: rotate(45deg);
}
.lv-article-head__no {
  display: inline-flex;
  align-items: center;
  column-gap: 14px;
  color: var(--article-gold-light);
  font-size: 13px;
  letter-spacing: 0.16em;
}
.lv-article-head__kind + .lv-article-head__no::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  background-color: var(--article-line);
}
.lv-article-head__title {
  margin: 0;
  color: var(--article-title);
  font-size: clamp(25px, 6.4vw, 34px);
  font-weight: bold;
  line-height: 1.55;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 22px rgba(6, 14, 25, 0.85);
  text-wrap: balance;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
/* 分類（章・部・お知らせの種類） */
.lv-article-head__terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.lv-article-head__terms a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 3px 14px;
  color: var(--article-ink-soft);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  border: 1px solid var(--article-rule);
  border-radius: 16px;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}
.lv-article-head__terms a:hover {
  color: var(--article-gold-light);
  border-color: var(--article-line);
}
.lv-article-head__terms a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--article-gold);
}
/* 金の細い線と、中央の菱形 */
.lv-article-head__rule {
  position: relative;
  display: block;
  width: 148px;
  height: 9px;
  margin: 26px 0 16px;
}
.lv-article-head__rule::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(185, 146, 100, 0),
    var(--article-line) 32%,
    var(--article-line) 42%,
    rgba(185, 146, 100, 0) 42%,
    rgba(185, 146, 100, 0) 58%,
    var(--article-line) 58%,
    var(--article-line) 68%,
    rgba(185, 146, 100, 0)
  );
}
.lv-article-head__rule::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border: 1px solid var(--article-gold);
  transform: rotate(45deg);
}
/* 投稿・更新・読了目安 */
.lv-article-head__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 22px;
  row-gap: 4px;
  margin: 0;
  color: var(--article-ink-soft);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.1em;
}
.lv-article-head__fact {
  display: flex;
  align-items: baseline;
  column-gap: 8px;
}
.lv-article-head__fact dt {
  color: var(--article-gold);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.lv-article-head__fact dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/*------------------------------------------------------------------------------
本文
------------------------------------------------------------------------------*/
.lv-prose {
  width: min(100% - var(--article-gutter) * 2, 38em);
  margin: 56px auto 0;
  color: var(--article-ink);
  font-size: var(--article-font-size);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: justify;
  line-break: strict;
  overflow-wrap: anywhere;
  hanging-punctuation: allow-end;
}
.lv-prose > :first-child {
  margin-top: 0;
}
.lv-prose > :last-child {
  margin-bottom: 0;
}
/* 段落の間は、ちょうど 1 行分（作者が入れた空行と同じ間） */
.lv-prose p {
  margin: 0 0 2em;
  margin-block-end: 1lh;
}
.lv-prose ::selection {
  color: var(--lv-color-white);
  background-color: rgba(185, 146, 100, 0.42);
}
.lv-prose ruby {
  ruby-position: over;
}
.lv-prose rt {
  color: rgba(228, 224, 214, 0.78);
  font-size: 0.5em;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0;
}
.lv-prose strong,
.lv-prose b {
  color: var(--article-title);
  font-weight: bold;
}
.lv-prose a:not([class]) {
  color: var(--article-gold-light);
  text-decoration: underline;
  text-decoration-color: var(--article-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition:
    color 0.3s ease,
    text-decoration-color 0.3s ease;
}
.lv-prose a:not([class]):hover {
  color: var(--article-title);
  text-decoration-color: currentColor;
}
.lv-prose a:not([class]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--article-gold);
}
/* お知らせの本文（ブロックエディター）で使う見出し・リスト・画像・引用・区切り */
.lv-prose h2,
.lv-prose h3,
.lv-prose h4 {
  color: var(--article-title);
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-align: start;
}
.lv-prose h2 {
  position: relative;
  margin: 2.6em 0 1.2em;
  padding-bottom: 0.55em;
  font-size: 1.3em;
  border-bottom: 1px solid var(--article-rule);
}
.lv-prose h2::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 48px;
  height: 1px;
  background-color: var(--article-gold);
}
.lv-prose h3 {
  display: flex;
  align-items: center;
  column-gap: 0.6em;
  margin: 2.2em 0 1em;
  color: var(--article-gold-light);
  font-size: 1.12em;
}
.lv-prose h3::before {
  content: "";
  flex: 0 0 auto;
  width: 0.38em;
  height: 0.38em;
  background-color: var(--article-gold);
  transform: rotate(45deg);
}
.lv-prose h4 {
  margin: 2em 0 0.8em;
  font-size: 1em;
}
.lv-prose ul,
.lv-prose ol {
  margin: 0 0 2em;
  padding-left: 1.5em;
}
.lv-prose ul {
  list-style: none;
}
.lv-prose ol {
  list-style: decimal;
}
.lv-prose li + li {
  margin-top: 0.4em;
}
.lv-prose ul > li {
  position: relative;
}
.lv-prose ul > li::before {
  content: "";
  position: absolute;
  top: 0.82em;
  left: -1.1em;
  width: 0.34em;
  height: 0.34em;
  background-color: var(--article-gold);
  transform: rotate(45deg);
}
.lv-prose ol > li::marker {
  color: var(--article-gold);
  font-size: 0.9em;
}
.lv-prose figure {
  margin: 2.4em 0;
}
.lv-prose img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
.lv-prose figcaption {
  margin-top: 0.8em;
  color: var(--article-ink-soft);
  font-size: 0.8em;
  line-height: 1.7;
  text-align: center;
}
.lv-prose .alignwide,
.lv-prose .alignfull {
  width: min(100vw - var(--article-gutter) * 2, 960px);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.lv-prose blockquote {
  margin: 2em 0;
  padding: 0.2em 0 0.2em 1.4em;
  color: rgba(228, 224, 214, 0.86);
  border-left: 1px solid var(--article-gold);
}
.lv-prose blockquote p:last-child {
  margin-bottom: 0;
}
.lv-prose hr {
  position: relative;
  width: 160px;
  height: 1px;
  margin: 3em auto;
  overflow: visible;
  background: linear-gradient(90deg, rgba(185, 146, 100, 0), var(--article-line), rgba(185, 146, 100, 0));
  border: 0;
}
.lv-prose hr::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  background-color: var(--article-gold);
  transform: rotate(45deg);
}
.lv-prose table {
  width: 100%;
  margin: 0 0 2em;
  font-size: 0.88em;
  border-collapse: collapse;
}
.lv-prose th,
.lv-prose td {
  padding: 0.6em 0.8em;
  text-align: start;
  border-bottom: 1px solid var(--article-rule);
}
/* 閲覧数（Post Views Counter が本文の後ろに出す） */
.lv-prose .post-views {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 6px;
  margin: 3em 0 0;
  color: var(--article-ink-soft);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
}
.lv-prose .post-views .dashicons {
  width: 16px;
  height: 16px;
  color: var(--article-gold);
  font-size: 16px;
}

/*------------------------------------------------------------------------------
本文の後：終わりの印と共有
------------------------------------------------------------------------------*/
.lv-article-end {
  display: grid;
  justify-items: center;
  row-gap: 30px;
  width: min(100% - var(--article-gutter) * 2, 680px);
  margin: 72px auto 0;
  text-align: center;
}
/* ── ◇ ◆ ◇ ── */
.lv-article-end__mark {
  display: flex;
  align-items: center;
  column-gap: 12px;
}
.lv-article-end__mark::before,
.lv-article-end__mark::after {
  content: "";
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, rgba(185, 146, 100, 0), var(--article-line));
}
.lv-article-end__mark::after {
  transform: scaleX(-1);
}
.lv-article-end__mark > i {
  display: block;
  width: 6px;
  height: 6px;
  border: 1px solid var(--article-gold);
  transform: rotate(45deg);
}
.lv-article-end__mark > i:nth-child(2) {
  width: 8px;
  height: 8px;
  background-color: var(--article-gold);
}
.lv-share {
  display: grid;
  justify-items: center;
  row-gap: 16px;
}
.lv-share__label {
  display: grid;
  row-gap: 8px;
  margin: 0;
  line-height: 1.4;
}
.lv-share__label-en {
  color: var(--article-gold);
  font-size: 10px;
  letter-spacing: 0.36em;
}
.lv-share__label-ja {
  color: var(--article-ink-soft);
  font-size: 13px;
  letter-spacing: 0.14em;
}
.lv-share__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lv-share__list > li[hidden] {
  display: none;
}
.lv-share__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--article-ink);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.06em;
  background-color: var(--article-card);
  border: 1px solid var(--article-line);
  border-radius: 22px;
  cursor: pointer;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.lv-share__button .lv-icon {
  width: 17px;
  height: 17px;
  color: var(--article-gold-light);
}
.lv-share__button--copy {
  width: auto;
  padding: 0 16px 0 14px;
}
.lv-share__button:hover {
  color: var(--lv-color-white);
  background-color: rgba(185, 146, 100, 0.1);
  border-color: var(--article-gold);
}
.lv-share__button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--article-gold);
}
.lv-share__button--copy.is-copied {
  color: var(--article-gold-light);
  border-color: var(--article-gold);
}

/*------------------------------------------------------------------------------
前後への移動
------------------------------------------------------------------------------*/
.lv-pager {
  width: min(100% - var(--article-gutter) * 2, 920px);
  margin: 88px auto 0;
  container-type: inline-size;
}
.lv-pager__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.lv-pager__grid--single {
  grid-template-columns: minmax(0, 1fr);
}
.lv-pager__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--article-ink);
  background-color: var(--article-card);
  border: 1px solid var(--article-rule);
  transition: border-color 0.4s ease;
}
/* 次の札：上端に金の光る線を引き、少しだけ強く見せる */
.lv-pager__card--next {
  border-color: var(--article-line);
}
.lv-pager__card--next::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(185, 146, 100, 0), var(--article-gold-light), rgba(185, 146, 100, 0));
}
a.lv-pager__card:hover {
  border-color: var(--article-gold);
}
a.lv-pager__card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--article-gold);
}
.lv-pager__media {
  position: relative;
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: rgba(185, 146, 100, 0.05);
}
.lv-pager__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.74;
  transition:
    opacity 0.6s ease,
    transform 1.4s var(--article-ease);
}
a.lv-pager__card:hover .lv-pager__media img {
  opacity: 1;
  transform: scale(1.04);
}
/* 絵のない記事の札：中央に小さな菱形 */
.lv-pager__media--empty::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 1px solid var(--article-line);
  transform: rotate(45deg);
}
.lv-pager__body {
  display: grid;
  align-content: start;
  row-gap: 6px;
  min-width: 0;
  padding: 14px 14px 16px;
  text-align: left;
}
.lv-pager__dir {
  display: flex;
  align-items: center;
  column-gap: 8px;
  color: var(--article-gold);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.28em;
}
.lv-pager__dir-ja {
  color: var(--article-ink-soft);
  font-size: 11px;
  letter-spacing: 0.12em;
}
/* 細い矢印（前は左向き、次は右向き。重ねると伸びる） */
.lv-pager__arrow {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 1px;
  background-color: currentColor;
  transition: width 0.45s var(--article-ease);
}
.lv-pager__arrow::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  transform: rotate(-45deg);
}
.lv-pager__card--next .lv-pager__body {
  justify-items: end;
  text-align: right;
}
.lv-pager__card--next .lv-pager__dir {
  flex-direction: row-reverse;
}
.lv-pager__card--next .lv-pager__arrow::before {
  right: 0;
  left: auto;
  transform: rotate(135deg);
}
a.lv-pager__card:hover .lv-pager__arrow {
  width: 28px;
}
.lv-pager__sub {
  color: var(--article-gold-light);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.14em;
}
.lv-pager__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* 最新話の札 */
.lv-pager__card--end {
  justify-content: center;
  background-color: rgba(6, 14, 25, 0.36);
  border-style: dashed;
}
.lv-pager__card--end::before {
  display: none;
}
.lv-pager__card--end .lv-pager__body {
  justify-items: center;
  align-content: center;
  height: 100%;
  padding: 22px 14px;
  text-align: center;
}
.lv-pager__card--end .lv-pager__title {
  color: var(--article-ink-soft);
  font-size: 13px;
}
/* 一覧への戻り道（目次の印と同じ、長さの違う三本の線） */
.lv-pager__list {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 12px;
  width: fit-content;
  min-height: 48px;
  margin: 28px auto 0;
  padding: 0 26px;
  color: var(--article-ink);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  border: 1px solid var(--article-line);
  border-radius: 24px;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.lv-pager__list:hover {
  color: var(--lv-color-white);
  background-color: rgba(185, 146, 100, 0.08);
  border-color: var(--article-gold);
}
.lv-pager__list:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--article-gold);
}
.lv-pager__list-icon {
  display: grid;
  row-gap: 3px;
  width: 14px;
}
.lv-pager__list-icon > span {
  display: block;
  height: 1px;
  background-color: var(--article-gold);
}
.lv-pager__list-icon > span:nth-child(2) {
  width: 9px;
}
.lv-pager__list-icon > span:nth-child(3) {
  width: 12px;
}
/* 札が横に十分広いときは、絵を横に置く（次の札は絵を右に） */
@container (min-width: 600px) {
  .lv-pager__grid {
    gap: 20px;
  }
  .lv-pager__card {
    flex-direction: row;
    min-height: 132px;
  }
  .lv-pager__card--next {
    flex-direction: row-reverse;
  }
  .lv-pager__media {
    flex: 0 0 42%;
    aspect-ratio: auto;
  }
  .lv-pager__grid--single .lv-pager__media {
    flex-basis: 30%;
  }
  .lv-pager__body {
    flex: 1 1 auto;
    align-content: center;
    row-gap: 8px;
    padding: 18px 22px;
  }
  .lv-pager__title {
    font-size: 15px;
  }
}

/*------------------------------------------------------------------------------
769px 以上
------------------------------------------------------------------------------*/
@media (min-width: 769px) {
  .lv-article-page {
    --article-gutter: max(32px, 5vw);
    padding-bottom: 160px;
  }
  /* 縦長の画面（タブレットの縦向き）で、横長の絵が細く切り取られすぎないよう、幅にも合わせる */
  .lv-article-head__visual {
    height: clamp(340px, min(58vh, 56vw), 640px);
  }
  .lv-article-head__inner {
    margin-top: -88px;
  }
  .lv-article-head--plain .lv-article-head__inner {
    padding-top: 180px;
  }
  .lv-article-head__kicker {
    margin-bottom: 20px;
    font-size: 12px;
  }
  .lv-article-head__no {
    font-size: 14px;
  }
  .lv-article-head__title {
    font-size: clamp(34px, 2.7vw, 50px);
  }
  .lv-article-head__terms {
    margin-top: 22px;
  }
  .lv-article-head__rule {
    margin: 30px 0 18px;
  }
  .lv-article-head__meta {
    font-size: 13px;
  }
  .lv-prose {
    margin-top: 88px;
  }
  .lv-article-end {
    margin-top: 96px;
  }
  .lv-share__list {
    gap: 12px;
  }
  .lv-share__button {
    column-gap: 10px;
    width: 48px;
    height: 48px;
    letter-spacing: 0.1em;
    border-radius: 24px;
  }
  .lv-share__button--copy {
    width: auto;
    padding: 0 20px 0 17px;
  }
  .lv-pager {
    margin-top: 112px;
  }
  .lv-pager__list {
    margin-top: 36px;
  }
}

/*------------------------------------------------------------------------------
開いたときの動き：絵がゆっくり明るくなり、文字が下から順に現れる（一度だけ）
------------------------------------------------------------------------------*/
@media (prefers-reduced-motion: no-preference) {
  .lv-article-head__image {
    animation: article-visual 2.4s var(--article-ease) both;
  }
  .lv-article-head__inner > * {
    animation: article-rise 1.1s var(--article-ease) both;
  }
  .lv-article-head__inner > :nth-child(2) {
    animation-delay: 0.08s;
  }
  .lv-article-head__inner > :nth-child(3) {
    animation-delay: 0.16s;
  }
  .lv-article-head__inner > :nth-child(4) {
    animation-delay: 0.24s;
  }
  .lv-article-head__inner > :nth-child(n + 5) {
    animation-delay: 0.32s;
  }
}
@keyframes article-visual {
  from {
    opacity: 0.4;
    transform: scale(1.05);
  }
}
@keyframes article-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
}