/* STORIES記事専用。TOP・一覧の演出と絞り込みスタイルから独立させる。
 * 設定メモ：現役：記事001〜005共通。001はこの後にstories-rebirth.cssを読み込む。PC1024以上の可視余白はtokensで補正、SPは既存variant。関連記事・一覧導線は本文sectionと別の余白設定。
 */
body.design-center-articlePage { color: var(--color-text); background: #fff; }
body.design-center-articlePage .common-main { color: var(--color-text); background: #fff; }
body.design-center-articlePage .common-breadcrumb { position: static; background: #fff; }
body.design-center-articlePage .common-breadcrumb_inner { max-width: none; }
/* 記事全体は白地。関連カードまで背景を連続させる。 */
.design-center-articleContent { padding: var(--dc-article-content-padding, 100px 0 0); background: #fff; }
.design-center-articleContent * { box-sizing: border-box; }
.design-center-articleHeader { width: var(--dc-article-header-width, calc(100% - 64px)); max-width: var(--dc-article-header-max-width, 1000px); margin: 0 auto; }
/* 共通CSSのh1 margin!importantを、記事タイトルだけ上書きする。 */
body.design-center-articlePage .design-center-articleTitle { margin: var(--dc-article-title-margin, 0 0 20px) !important; font-size: var(--dc-article-title-font-size, 27px); font-weight: var(--dc-article-title-font-weight, var(--dc-weight-medium, 500)); line-height: var(--dc-article-title-line-height, 1.8); letter-spacing: var(--dc-article-title-letter-spacing, .06em); overflow-wrap: anywhere; }
.design-center-articleMeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dc-article-meta-gap, 12px 20px); margin-bottom: var(--dc-article-meta-margin-bottom, 24px); font-size: var(--dc-article-meta-font-size, 12px); line-height: var(--dc-article-meta-line-height, 1.7); }
.design-center-articleTags { margin: var(--dc-article-tags-margin, 0 0 28px); font-size: var(--dc-article-tags-font-size, 12px); line-height: var(--dc-article-tags-line-height, 1.7); }
/* タグリンクの文字継承・下線演出は共通external-link.cssで設定する。 */
.design-center-articleCategory { display: inline-flex; align-items: center; min-height: var(--dc-article-category-min-height, 32px); padding: 0; font-size: var(--dc-article-meta-font-size, 12px); letter-spacing: var(--dc-local-nav-letter-spacing, .08em); font-kerning: normal; text-decoration: none; }
body.design-center-articlePage .common-main .design-center-articleRelatedCard,
body.design-center-articlePage .common-main .design-center-articleRelatedCard:is(:hover, :focus-visible) { text-decoration: none; }
.design-center-articlePhoto { display: block; width: 100%; height: auto; }
/* メイン画像は記事タイトルの幅を維持したまま、本文と同じ幅で中央配置する。 */
.design-center-articleHeader > .design-center-articlePhoto,
.design-center-articleHeader > .design-center-articleFigure--header { max-width: 750px; margin-inline: auto; }
.design-center-articleBody { width: var(--dc-article-body-width, calc(100% - 64px)); max-width: var(--dc-article-body-max-width, 750px); margin: var(--dc-article-body-margin, 72px auto 0); }
.design-center-articleBody p { margin: var(--dc-article-body-p-margin, 0 0 28px); font-size: var(--dc-article-body-p-font-size, 14px); line-height: var(--dc-article-body-p-line-height, 2); letter-spacing: var(--dc-article-body-p-letter-spacing, .04em); overflow-wrap: anywhere; }
/* 本文内の汎用リンク。段落と同じ余白を使い、inlineのbaseline余剰を加えない。 */
.design-center-articleBodyLink { display: flex; justify-content: flex-start; margin: var(--dc-article-body-p-margin, 0 0 28px); }
/* 調整メモ：PCの可視節前148pxはtokensで本文leading10.5＋h2leading6.5を引き実margin131pxへ。SPは本文とh2の半leadingを除いて可視72px。001も同じ共通tokenを使用する。 */
.design-center-articleSection { margin-top: var(--dc-article-section-margin-top, 72px); }
.design-center-articleSection h2 { margin: var(--dc-article-section-h2-margin, 0 0 28px); font-size: var(--dc-article-section-h2-font-size, 18px); font-weight: var(--dc-article-section-h2-font-weight, var(--dc-weight-bold, 700)); line-height: var(--dc-article-section-h2-line-height, 1.8); letter-spacing: var(--dc-article-section-h2-letter-spacing, .04em); overflow-wrap: anywhere; }
.design-center-articleFigure { margin: var(--dc-article-figure-margin, 40px 0 24px); }
.design-center-articleFigure .design-center-articlePhoto { margin: 0; }
/* ヘッダー写真は本文figureの上下余白を加えず、既存の画像幅を保つ。 */
.design-center-articleFigure--header { margin: 0 auto; }
.design-center-articleCaption { margin: var(--dc-article-caption-margin, 12px 0 0); font-size: var(--dc-article-caption-font-size, 12px); text-align: center; line-height: var(--dc-article-caption-line-height, 1.8); overflow-wrap: anywhere; }
/* 文中注記は本文の行内に続け、文字サイズだけcaptionと共通にする。 */
.design-center-articleInlineNote { display: inline; font-size: var(--dc-article-caption-font-size, 12px); }
.design-center-articleRelated { width: var(--dc-article-related-width, calc(100% - 64px)); max-width: var(--dc-reading-container-max-width, 814px); margin: var(--dc-major-section-gap, 200px) auto 0; padding-bottom: var(--dc-major-section-gap, 200px); }
.design-center-articleSrOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.design-center-articleRelatedList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dc-article-related-list-gap, 40px); margin: 0; padding: 0; list-style: none; }
.design-center-articleRelatedList > li { min-width: 0; margin: 0; padding: 0; }
.design-center-articleRelatedCard { display: block; text-decoration: none; }
.design-center-articleRelatedMedia { position: relative; display: block; min-width: 0; }
.design-center-articleRelatedMedia > img { display: block; width: 100%; height: auto; aspect-ratio: 771 / 483; object-fit: cover; }
.design-center-articleRelatedBody { min-width: 0; padding: var(--dc-stories-card-body-padding-top, 18px) 0 0; }
.design-center-articleRelatedBody h3 { margin: 0; color: inherit; font-size: var(--dc-article-related-body-h3-font-size, 13px); font-weight: var(--dc-weight-regular, 400); line-height: var(--dc-article-related-body-h3-line-height, 1.8); overflow-wrap: anywhere; }
body.design-center-articlePage .common-main .design-center-articleRelatedCard h3 { text-decoration: none; }
.design-center-articleRelatedTags { max-width: 100%; margin: var(--dc-stories-card-tags-margin, 16px 0 0); color: inherit; font-size: var(--dc-stories-card-tags-font-size, 11px); line-height: var(--dc-stories-card-tags-line-height, 1.6); overflow-wrap: anywhere; }
.design-center-articleSeriesLink { margin: var(--dc-photo-content-gap, 100px) 20px 0; padding-bottom: var(--dc-major-section-gap, 200px); text-align: center; }
.design-center-articleSeriesLink > a { display: inline-flex; }
/* 記事001〜005の関連記事末尾余白を記事一覧リンクへ移す。REBIRTH専用導線はstories-rebirth.cssで配置。 */
.design-center-articleRelated.design-center-articleRelated--withIndex { padding-bottom: 0; }
body.design-center-articlePage .common-main a:focus-visible { outline: 3px solid #005bac; outline-offset: 3px; }
@media (max-width: 1023px) {
  .design-center-articleContent { padding-top: var(--dc-article-content-padding-top, 72px); }
  .design-center-articleRelatedList { gap: var(--dc-article-related-list-gap--tablet, 24px); }
}
@media (max-width: 639px) {
  .design-center-articleSeriesLink--index { margin-top: 48px; padding-bottom: var(--dc-article-related-padding-bottom--compact, 28px); }
  .design-center-articleContent { padding-top: var(--dc-article-content-padding-top--compact, 48px); }
  .design-center-articleHeader, .design-center-articleBody, .design-center-articleRelated { width: var(--dc-article-related-width--compact, calc(100% - 40px)); }
  .design-center-articleBody { margin-top: var(--dc-article-body-margin-top, 48px); }
  .design-center-articleSection { margin-top: var(--dc-article-section-margin-top--compact, 56px); }
  .design-center-articleRelated { margin-top: var(--dc-article-related-margin-top, 72px); padding-bottom: var(--dc-article-related-padding-bottom--compact, 28px); }
  .design-center-articleRelatedList { grid-template-columns: minmax(0, 1fr); gap: var(--dc-article-related-list-gap--tablet, 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .design-center-articleRelatedCard,
  .design-center-articleRelatedMedia > img { transition: none; }
}

/* PCは参照原寸の行高と写真比率へ。SPの既存文字サイズ・自然比率は維持する。 */
@media (min-width: 1024px) {
  .design-center-articleHeader > .design-center-articlePhoto,
  .design-center-articleHeader > .design-center-articleFigure--header { max-width: var(--dc-reading-container-max-width, 814px); }
  .design-center-articlePage:not(.design-center-rebirthArticle) .design-center-articlePhoto,
  .design-center-rebirthArticle .design-center-articleFigure .design-center-articlePhoto { aspect-ratio: 8 / 5; object-fit: cover; object-position: center; }
  .design-center-articleBody p { font-size: var(--dc-article-body-p-font-size, 14px); }
  .design-center-articleSection h2 { font-size: var(--dc-article-section-h2-font-size, 22px); }
  .design-center-articleSection > :last-child { margin-bottom: 0; }
  .design-center-articleFigure + .design-center-articleFigure { margin-top: var(--dc-article-consecutive-photo-gap, 100px); }
}
@media (max-width: 1023px) {
  .design-center-articlePcBreak { display: none; }
}

/* 記事PDFのPC可視余白。inline行のbaseline余白を避け、32px枠を文字中心に保つ。 */
@media (min-width: 1024px) {
  body.design-center-articlePage .design-center-articleCategory { display: flex; width: fit-content; }
  body.design-center-articlePage .design-center-articleFigure:not(:has(figcaption)) { margin-bottom: var(--dc-article-figure-no-caption-margin-bottom); }
}

/* 関連記事は画像面だけ白30%を重ね、mask側でも同一複合面として扱う。 */
body.design-center-articlePage .design-center-articleRelatedMedia::after { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / 30%); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
@media (hover: hover) {
  body.design-center-articlePage .design-center-articleRelatedCard:hover .design-center-articleRelatedMedia::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce), print {
  body.design-center-articlePage .design-center-articleRelatedMedia::after { transition: none; }
}

/* JS無効・初期化失敗でも自記事以外の全カードを通常gridで読める。 */
[data-current-story="001"] [data-story-id="001"],
[data-current-story="002"] [data-story-id="002"],
[data-current-story="003"] [data-story-id="003"],
[data-current-story="004"] [data-story-id="004"],
[data-current-story="005"] [data-story-id="005"] { display: none; }
.design-center-articleRelated { --dc-related-gap: 40px; }
[data-carousel-ready] [data-related-viewport] { overflow: hidden; }
/* Emblaの有限終点を最後のカード右端に合わせる。末尾だけ余分な間隔を除く。 */
[data-carousel-ready] .design-center-articleRelatedList { display: flex; gap: 0; touch-action: pan-y pinch-zoom; }
[data-carousel-ready] .design-center-articleRelatedList > li { flex: 0 0 calc((100% - var(--dc-related-gap)) / 2); margin-inline-end: var(--dc-related-gap); }
[data-carousel-ready] .design-center-articleRelatedList > li:last-child { margin-inline-end: 0; }
.design-center-relatedControls { display: flex; justify-content: center; gap: 16px; width: 400px; max-width: 100%; margin: 24px auto 0; }
.design-center-relatedControls[hidden] { display: none; }
/* input自体の44px領域と可視2pxのrail/thumbを分離。有限のスクロール位置へ即時同期する。 */
body.design-center-articlePage .design-center-relatedRange {
  appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 44px;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer;
  --dc-related-thumb-size: 20%;
  touch-action: pan-y pinch-zoom;
}
.design-center-relatedRange::-webkit-slider-runnable-track { height: 2px; background: color-mix(in srgb, currentColor 30%, transparent); }
.design-center-relatedRange::-moz-range-track { height: 2px; background: color-mix(in srgb, currentColor 30%, transparent); }
.design-center-relatedRange::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: var(--dc-related-thumb-size); height: 2px; border: 0; border-radius: 0; background: currentColor; }
.design-center-relatedRange::-moz-range-thumb { width: var(--dc-related-thumb-size); height: 2px; border: 0; border-radius: 0; background: currentColor; }
body.design-center-articlePage .design-center-relatedRange:focus-visible,
body.design-center-articlePage [data-related-viewport]:focus-visible { outline: 3px solid #005bac; outline-offset: 3px; }
body.design-center-articlePage .common-main .design-center-articleRelatedCard:focus-visible { outline: 3px solid #005bac; outline-offset: -3px; }
@media (max-width: 1023px) {
  .design-center-articleRelated { --dc-related-gap: 24px; }
  .design-center-relatedControls { width: 280px; }
}
@media (max-width: 639px) {
  [data-carousel-ready] .design-center-articleRelatedList > li { flex-basis: 100%; }
}
@media print {
  [data-carousel-ready] [data-related-viewport] { overflow: visible; }
  [data-carousel-ready] .design-center-articleRelatedList { display: grid; gap: var(--dc-related-gap); transform: none !important; }
  [data-carousel-ready] .design-center-articleRelatedList > li { margin-inline-end: 0; transform: none !important; }
  .design-center-relatedControls { display: none; }
}

@media (max-width: 1023px) {
  .design-center-articleHeader > .design-center-articlePhoto,
  body.design-center-rebirthArticle .design-center-articleHeader > .design-center-articlePhoto,
  .design-center-articleHeader > .design-center-articleFigure--header { max-width: 100%; }
  .design-center-articleCategory { display: flex; width: fit-content; }
  .design-center-articleRelated { margin-top: var(--dc-article-related-margin-top); }
  .design-center-articleSeriesLink--index { padding-bottom: var(--dc-article-related-padding-bottom--compact); }
  .design-center-articleBody > .design-center-articleSection:last-child > p:last-child { margin-bottom: 0; }
}

/* SPの節末がcaptionの場合は本文ではなくcaption半leadingを使い、次h2まで72pxにする。 */
@media (max-width: 1023px) {
  body.design-center-articlePage .design-center-articleSection:has(> .design-center-articleFigure:last-child > .design-center-articleCaption) + .design-center-articleSection {
    margin-top: calc(72px - (var(--dc-article-caption-font-size, 12px) * var(--dc-article-caption-line-height, 1.8) - var(--dc-article-caption-font-size, 12px)) / 2 - var(--dc-article-heading-leading--mobile));
  }
}

/* 記事末尾だけPCのSNS上端まで196px。実測で親枠のbaseline余剰0、途中の001シリーズリンクは触らない。 */
@media screen and (min-width: 1024px) {
  body.design-center-articlePage .design-center-articleSeriesLink--index {
    padding-bottom: calc(196px - var(--dc-round-link-bottom-inset) - var(--dc-pc-footer-sns-inset));
  }
}

/* 005の「そこに…」前は一行分のみ。通常段落末尾余白を置き換える。 */
.design-center-articleBody p.design-center-articleParagraph--blankAfter { margin-bottom: 35px; }
.design-center-articleBody p.design-center-articleParagraph--blankAfter + p { margin-top: 0; }
@media (max-width: 1023px) {
  .design-center-articleBody p.design-center-articleParagraph--blankAfter { margin-bottom: 30px; }
}

/* 写真直後のルビ上端を通常本文の上端と揃える。本文14pxの半分（7px）を加算する。 */
@media screen {
  body.design-center-articlePage--005 .design-center-articleFigure + p.design-center-articleParagraph--rubyLead {
    padding-top: .5em;
  }
}

/* 005の写真主体の構成。署名の揃えのみPC/SP共通、余白補正は画面表示のPCに限定。 */
body.design-center-articlePage--005 .design-center-articleBody p.design-center-articleSignature {
  text-align: right;
  text-align-last: right;
}
@media screen and (min-width: 1024px) {
  body.design-center-articlePage--005 {
    /* 通常記事と同じ可視148px。写真先頭のため本文半行間10.5pxだけを引く。 */
    --dc-article-section-margin-top: calc(148px - 10.5px);
  }
}

/* 公開記事のSP写真まわり。文字の半行間を差し引き、可視端からの距離へ合わせる。
 * 001の動画キャプションも共通余白。005の写真先頭sectionにはh2補正を適用しない。 */
@media screen and (max-width: 1023px) {
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage {
    /* 参照261028_1.pngの本文サイズ比から、画像caption→本文の可視余白を40pxにする。 */
    --dc-article-image-caption-body-gap: 40px;
    --dc-article-image-caption-leading: 4.8px;
    --dc-article-image-caption-body-margin: calc(var(--dc-article-image-caption-body-gap) - var(--dc-article-image-caption-leading) - var(--dc-article-body-leading--mobile, 8px));
    --dc-article-caption-margin: calc(12px - 4.8px) 0 0;
    --dc-article-body-margin: calc(36px - 4.8px - 8px) auto 0;
    --dc-article-body-margin-top: calc(36px - 4.8px - 8px);
  }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleBody .design-center-articleCaption {
    margin: calc(12px - 4.8px) 0 0;
  }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleBody .design-center-articleFigure {
    margin-bottom: calc(27px - 4.8px - 8px);
  }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleBody .design-center-articleFigure:has(> figcaption.design-center-articleCaption):has(+ p) {
    margin-bottom: var(--dc-article-image-caption-body-margin);
  }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleHeader:has(> .design-center-articleFigure--header > figcaption.design-center-articleCaption) + .design-center-articleBody {
    margin-top: var(--dc-article-image-caption-body-margin);
  }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleSection > h2:has(+ .design-center-articleFigure) {
    font-size: 17px;
    margin-bottom: calc(27px - (30px - 17px) / 2);
  }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleSection > h2 + .design-center-articleFigure {
    margin-top: 0;
  }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage--005 .design-center-articleSection {
    margin-top: calc(72px - 8px);
  }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage--005 .design-center-articleSection > .design-center-articleFigure:first-child {
    margin-top: 0;
  }
}

/* 公開記事の画像captionはSPだけ左揃え、tablet・PCは基底の中央揃え。 */
@media screen and (max-width: 767px) {
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage { --dc-article-image-caption-leading: 4px; }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleCaption { text-align: left; }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage figcaption.design-center-articleCaption { font-size: 10px; }
}
/* 画像前h2の半行間補正は1023pxまで維持する。 */
@media screen and (max-width: 1023px) {
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleSection:has(> h2 + .design-center-articleFigure) {
    margin-top: calc(var(--dc-article-section-margin-top) + .5px);
  }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleSection:has(> .design-center-articleFigure:last-child > .design-center-articleCaption) + .design-center-articleSection:has(> h2 + .design-center-articleFigure) {
    margin-top: calc(72px - (var(--dc-article-caption-font-size, 12px) * var(--dc-article-caption-line-height, 1.8) - var(--dc-article-caption-font-size, 12px)) / 2 - (30px - 17px) / 2);
  }
}

/* tabletの本文見出しは画像の有無を問わず20px。行高30px・ウェイトは保持。 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleSection > h2,
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleSection > h2:has(+ .design-center-articleFigure) { font-size: 20px; }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleSection > h2:has(+ .design-center-articleFigure) { margin-bottom: calc(27px - (30px - 20px) / 2); }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleSection:has(> h2),
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleSection:has(> h2 + .design-center-articleFigure) { margin-top: calc(var(--dc-article-section-margin-top) + 2px); }
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleSection:has(> .design-center-articleFigure:last-child > .design-center-articleCaption) + .design-center-articleSection:has(> h2),
  html:not(:has(link[rel="canonical"][href*="/_archive_004/"])) body.design-center-articlePage .design-center-articleSection:has(> .design-center-articleFigure:last-child > .design-center-articleCaption) + .design-center-articleSection:has(> h2 + .design-center-articleFigure) {
    margin-top: calc(72px - (var(--dc-article-caption-font-size, 12px) * var(--dc-article-caption-line-height, 1.8) - var(--dc-article-caption-font-size, 12px)) / 2 - (30px - 20px) / 2);
  }
}