/* STORIES専用。TOPの背景・動画・スクロール演出から独立させる。
 * 設定メモ：現役：STORIES一覧だけ。Vueがv-showで絞り込むHTMLとstories.jsの初回／filter表示に依存する。640px以上2列・640px未満1列の規則とcard最大高を保ち、タグ余白の補正はtokensを使用する。
 */
body.design-center-storiesPage { color: var(--color-text); background: #fff; }
body.design-center-storiesPage .common-main { color: var(--color-text); background: #fff; }
body.design-center-storiesPage .common-breadcrumb { position: static; background: #fff; }
body.design-center-storiesPage .common-breadcrumb_inner { max-width: none; }
.design-center-storiesContent { padding: var(--dc-stories-content-padding, 136px 0 210px); background: #fff; }
.design-center-storiesIndex { width: var(--dc-page-container-width, calc(100% - 80px)); max-width: var(--dc-page-container-max-width, 1240px); margin: 0 auto; }
.design-center-storiesIndex * { box-sizing: border-box; }
.design-center-storiesIndex fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.design-center-storiesIndex .design-center-storiesCategories { display: flex; flex-wrap: wrap; gap: var(--dc-stories-categories-gap, 0 14px); }
.design-center-storiesCategories label, .design-center-storiesTags label { position: relative; display: inline-flex; cursor: pointer; }
/* 共有CSSのinput display:noneを解除し、ネイティブのキーボード操作と名前を保持する。 */
.design-center-storiesCategories input, .design-center-storiesTags input { display: block; }
.design-center-storiesCategories input, .design-center-storiesTags input,
.design-center-storiesSrOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.design-center-storiesCategories label span,
.design-center-storiesTags label span { position: relative; display: inline-flex; align-items: center; min-height: var(--dc-stories-tags-span-min-height, 44px); font-weight: var(--dc-weight-medium, 500); line-height: var(--dc-stories-tags-span-line-height, 1.5); }
.design-center-storiesCategories label span { font-size: var(--dc-stories-categories-label-font-size, 16px); letter-spacing: var(--dc-local-nav-letter-spacing, .08em); font-kerning: normal; }
/* 下線だけで選択・ホバーを表示。操作高はPCカテゴリ44／SP31、タグ33px。 */
.design-center-storiesCategories input + span::after,
.design-center-storiesTags input + span::after { content: ""; position: absolute; right: 0; bottom: 8px; left: 0; height: 1px; background: currentColor; pointer-events: none; transform: scaleX(0); transform-origin: right center; }
.design-center-storiesCategories input:checked + span::after,
.design-center-storiesTags input:checked + span::after { transform: scaleX(1); transform-origin: left center; }
@media (hover: hover) {
  .design-center-storiesCategories label:hover input:not(:disabled) + span::after,
  .design-center-storiesTags label:hover input:not(:disabled) + span::after { transform: scaleX(1); transform-origin: left center; }
}
.design-center-storiesIndex .design-center-storiesTags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dc-stories-tags-gap, 4px 14px); margin-top: var(--dc-stories-tags-margin-top, 12px); }
.design-center-storiesTags label span { min-height: var(--dc-stories-tag-control-height, 33px); font-size: var(--dc-stories-tags-label-font-size, 12px); }
.design-center-storiesTags input + span::after { bottom: 10px; }
.design-center-storiesCategories input:focus-visible + span,
.design-center-storiesTags input:focus-visible + span,
.design-center-storiesPage .common-main a:focus-visible { outline: 3px solid #005bac; outline-offset: 3px; }
.design-center-storiesIndex fieldset:disabled label { cursor: default; }
/* 調整メモ：基底3列を最終PC規則が2列へ上書き、640未満1列。PCのrow gap94.7pxはタグ半leading3.3を引いた可視98px。カード文字量による最大行高を維持。 */
.design-center-storiesGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--dc-stories-grid-column-gap, 40px); row-gap: var(--dc-stories-grid-row-gap, 94px); margin: var(--dc-stories-grid-margin, 86px 0 0); padding: 0; list-style: none; }
.design-center-storiesGrid > li { min-width: 0; margin: 0; padding: 0; }
.design-center-storiesCard { display: flex; flex-direction: column; background: #fff; }
/* カードの配置・透過演出は維持し、文字色は共通リンクの標準に従う。 */
body.design-center-storiesPage .common-main .design-center-storiesCard,
body.design-center-storiesPage .common-main .design-center-storiesCard:is(:hover, :focus-visible) { background: #fff; text-decoration: none; opacity: 1; transition: none; transform: none; }
.design-center-storiesCard_media { position: relative; display: block; flex: 0 0 auto; width: 100%; min-width: 0; aspect-ratio: 771 / 483; }
.design-center-storiesCard_image { display: block; width: 100%; height: auto; aspect-ratio: 771 / 483; object-fit: cover; }
.design-center-storiesCard_body { display: flex; flex: 1; flex-direction: column; padding: var(--dc-stories-card-body-padding-top, 18px) 0 0; }
.design-center-storiesCard_tags { margin: var(--dc-stories-card-tags-margin, 16px 0 0); text-align: left; 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-storiesCard h2 { margin: 0; font-size: var(--dc-stories-card-h2-font-size, 16px); font-weight: var(--dc-weight-regular, 400); line-height: var(--dc-stories-card-h2-line-height, 1.8); overflow-wrap: anywhere; }
body.design-center-storiesPage .common-main .design-center-storiesCard h2 { text-decoration: none; }
.design-center-storiesEmpty { margin: var(--dc-stories-empty-margin, 62px 0 0); padding: var(--dc-stories-empty-padding, 24px); text-align: center; font-size: var(--dc-stories-empty-font-size, 16px); }
.design-center-storiesUnavailable { margin: var(--dc-stories-unavailable-margin, 24px 0 0); font-size: var(--dc-stories-unavailable-font-size, 14px); line-height: var(--dc-stories-unavailable-line-height, 1.8); }
.design-center-storiesEmpty[hidden], .design-center-storiesUnavailable[hidden] { display: none; }
/* 一覧改訂のPC構図。SPの文字・余白・列数は既存variantを使う。 */
@media (min-width: 1024px) {
  .design-center-storiesIndex { max-width: var(--dc-stories-container-max-width, 814px); }
  .design-center-storiesGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .design-center-storiesPcBreak { display: none; }
}
@media (max-width: 1023px) {
  .design-center-storiesContent { padding: var(--dc-stories-content-padding--tablet, 88px 0 140px); }
  .design-center-storiesGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dc-stories-grid-gap, 56px 32px); }
  .design-center-storiesIndex .design-center-storiesCategories { gap: var(--dc-stories-categories-gap--tablet, 0 14px); }
}
@media (max-width: 639px) {
  .design-center-storiesContent { padding: var(--dc-stories-content-padding--compact, 64px 0 100px); }
  .design-center-storiesIndex { width: var(--dc-page-container-width--compact, calc(100% - 40px)); }
  .design-center-storiesGrid { grid-template-columns: minmax(0, 1fr); gap: var(--dc-stories-grid-gap--compact, 40px); margin-top: var(--dc-stories-grid-margin-top, 40px); }
}

@media (prefers-reduced-motion: reduce) {
  .design-center-storiesCard,
  .design-center-storiesCard_image { transition: none; }
}

/* 44px枠の中心から可視文字を1emと見なし、線まで.2em空ける近似。glyph実測ではない。 */
body.design-center-storiesPage :is(.design-center-storiesCategories, .design-center-storiesTags) input + span::after { bottom: calc(50% - .5em - .2em - 1px); transition: transform 240ms ease-out; }
/* 選択線は常に全幅。hover／選択切替で伸長アニメを再生しない。nav-mask内spanには線を作らない。 */
body.design-center-storiesPage :is(.design-center-storiesCategories, .design-center-storiesTags) input:checked + span::after { transform: scaleX(1); transform-origin: left center; transition: none; }
body.design-center-storiesPage :is(.design-center-storiesCategories, .design-center-storiesTags) label span { transition: opacity .3s ease; }
body.design-center-storiesPage .design-center-storiesCard_media::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-storiesPage :is(.design-center-storiesCategories, .design-center-storiesTags) label:hover input:not(:disabled) + span { opacity: .5; }
  body.design-center-storiesPage .design-center-storiesCard:hover .design-center-storiesCard_media::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce), print {
  body.design-center-storiesPage :is(.design-center-storiesCategories, .design-center-storiesTags) label span,
  body.design-center-storiesPage :is(.design-center-storiesCategories, .design-center-storiesTags) input + span::after,
  body.design-center-storiesPage .design-center-storiesCard_media::after { transition: none; }
}

/* SPの実画素余白補正。31/33pxの操作枠・focus輪郭は動かさず文字と下線だけ上寄せ。 */
@media (max-width: 1023px) {
  body.design-center-storiesPage .design-center-storiesTags input + span { box-sizing: border-box; padding-bottom: calc(var(--dc-stories-tag-ink-shift) * 2); }
  body.design-center-storiesPage .design-center-storiesTags input + span::after { bottom: calc(50% - .5em - .2em - 1px + var(--dc-stories-tag-ink-shift)); }
}

/* 375px実画素校正:カテゴリ字形だけ枠内で下げ、入口側で同量相殺。31px操作枠は固定。 */
@media screen and (max-width: 1023px) {
  body.design-center-storiesPage .design-center-storiesCategories input + span { box-sizing: border-box; padding-top: calc(var(--dc-stories-category-ink-shift) * 2); }
  body.design-center-storiesPage .design-center-storiesCategories input + span::after { bottom: calc(50% - .5em - .2em - 1px - var(--dc-stories-category-ink-shift)); }
}

/* 小幅の分類はALLを独立行にし、他の分類は自然に折り返す。横間隔はタグと共通、ラジオ順は保持。 */
@media screen and (max-width: 639px) {
  body.design-center-storiesPage .design-center-storiesCategories { gap: var(--dc-stories-categories-gap--compact, 0 14px); }
  body.design-center-storiesPage .design-center-storiesCategories > label:has(input[value="all"]) { flex-basis: 100%; }
}