@charset "UTF-8";
.p-topics-calendar {
  padding-block-end: var(--space-32);
}

.p-topics-calendar__trigger {
  display: flex;
  justify-content: flex-end;
  margin-block-start: var(--space-24);
}

.p-topics__selected-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block-end: var(--space-24);
}
.p-topics__selected-date[hidden] {
  display: none;
}
.p-topics__selected-date .c-heading {
  --heading-margin-block-end: var(--space-0);
}

.p-topics__filters {
  margin-block-end: var(--space-24);
}

/* Figma master annotations | M-IDs: M-068 | nodeIDs: 7097:11594 | ownerIDs: 7097:11594
9/24
Typeを追加（Mobileのみ）
Horizontal
Vertical
*/
/* Figma master annotations | M-IDs: M-069 | nodeIDs: 7097:11594 | ownerIDs: 7097:11594
Type
Horizontal：TOPやレコメンドエリアとしてなど、数件ピックアップ掲載する場合に使用
Vertical：一覧ページに使用
*/
.p-topics__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  column-gap: var(--space-12);
  row-gap: var(--space-32);
}
.p-topics__list[data-row-gap="48"] {
  row-gap: var(--space-48);
}
.p-topics__list {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

.p-topics__empty {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
  grid-column: 1/-1;
  color: var(--semantic-text-primary);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .p-topics__list[data-topics-results-enter] {
    animation: topics-results-enter var(--motion-menu-duration) var(--motion-menu-easing);
  }
}
@keyframes topics-results-enter {
  from {
    translate: var(--space-0) var(--space-8);
  }
  to {
    translate: var(--space-0);
  }
}
/* Figma I6733:8897;5466:51249
タイトルはSPで3行まで（それ以上は...で省略）
Figma I6733:8708;5466:49489
タイトルはPCで2行まで（それ以上は...で省略）
*/
.c-card--topics {
  min-inline-size: var(--space-0);
  /* Figma master annotations | M-IDs: M-065 | nodeIDs: 7097:11698 | ownerIDs: 7097:11693
  画像色と背景色の境界が薄い場合のみにBorderを表示する
  */
  /* Figma master annotations | M-IDs: M-066 | nodeIDs: 7097:11594 | ownerIDs: 7097:11594
  9/10updata
  実装に合わせて画像のBorderを追加。現在の実装の通り、画像色と背景色の境界が薄い場合のみにBorderを表示する。
  */
}
.c-card--topics .c-card__image {
  aspect-ratio: 4/3;
}
.c-card--topics[hidden] {
  display: none;
}
.c-card--topics .c-card__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--font-size-14);
  -webkit-line-clamp: 3;
}

@media (min-width: 768px) {
  .p-topics-calendar {
    padding-block-end: var(--space-48);
  }
  .p-topics__selected-date {
    padding-block-end: var(--space-32);
  }
  .p-topics__list {
    grid-template-columns: repeat(4, minmax(var(--space-0), 1fr));
    column-gap: var(--space-40);
    row-gap: var(--space-48);
  }
  .c-card--topics {
    /* Figma master annotations | M-IDs: M-064, M-067 | nodeIDs: 7097:11693, 7097:11594 | ownerIDs: 7097:11693, 7097:11594
    9/17update
    Topicsのカテゴリー・予告のテキストカラーをAccentに変更
    */
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .c-card--topics > a .c-card__title {
    transition: color var(--motion-duration) var(--motion-easing);
  }
}
@media (min-width: 768px) and (hover: hover) {
  .c-card--topics > a:hover .c-card__title {
    color: var(--semantic-text-primary-hover);
  }
}
@media (min-width: 768px) {
  .c-card--topics > a[data-state=hover] .c-card__title {
    color: var(--semantic-text-primary-hover);
  }
  .c-card--topics > a:is(:active, [data-state=pressed]) .c-card__title {
    color: var(--semantic-text-primary-pressed);
  }
  .c-card--topics .c-card__category,
  .c-card--topics .c-card__forecast {
    color: var(--semantic-text-accent);
  }
  .c-card--topics .c-card__category,
  .c-card--topics .c-card__meta {
    font-size: var(--font-size-14);
  }
  .c-card--topics .c-card__title {
    font-size: var(--font-size-16);
    -webkit-line-clamp: 2;
  }
}
.p-topics-article__heading {
  display: grid;
  gap: var(--space-8);
  margin-block-end: var(--component-heading-1-margin-block-end);
}
.p-topics-article__heading h1 {
  --heading-margin-block-end: var(--space-0);
}

.p-topics-article__category {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-narrow);
  color: var(--semantic-text-accent);
}

.p-topics-article__main {
  display: grid;
  gap: var(--space-24);
  min-inline-size: var(--space-0);
}

.p-topics-article__visual {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr);
  background: var(--semantic-background-section);
}

.p-topics-article__image {
  min-inline-size: var(--space-0);
  aspect-ratio: 4/3;
}

.p-topics-article__date-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-24);
  min-inline-size: var(--space-0);
  padding: var(--space-24) var(--space-24) var(--space-32);
}
.p-topics-article__date-panel[data-date-panel=off] {
  display: none;
}

.p-topics-article__event-date {
  display: grid;
  gap: var(--space-8);
  inline-size: var(--ratio-full);
}

.p-topics-article__date-label {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-narrow);
  text-align: center;
}

/* 複数項目は自然幅で折り返し、390pxでは3項目ずつ2行。カンマのみLatinフォント。 */
.p-topics-article__dates {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: center;
  column-gap: var(--space-8);
  row-gap: var(--space-12);
}
.p-topics-article__dates > li {
  min-inline-size: var(--space-0);
}

.p-topics-article__date {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  color: var(--semantic-text-primary);
  line-height: var(--line-height-narrow);
  white-space: nowrap;
  letter-spacing: var(--letter-spacing-default);
}

.p-topics-article__year,
.p-topics-article__month-day,
.p-topics-article__year-slash,
.p-topics-article__comma {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-style: normal;
}

.p-topics-article__year {
  grid-column: 1/-1;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-default);
}

.p-topics-article__month-day {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-default);
}

.p-topics-article__weekday {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-default);
}

.p-topics-article__year-slash {
  display: none;
}

.p-topics-article__comma {
  font-weight: var(--font-weight-regular);
}

/* 期間表記にも同じ日付要素を使う。PCの区切りは縦、SPでは横に置く。 */
.p-topics-article__dates[data-date-pattern=range] {
  align-items: center;
}

.p-topics-article__date-separator {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-narrow);
}

.p-topics-article__calendar {
  inline-size: min(var(--ratio-full), var(--space-256) - var(--space-28));
}

.p-topics-article__content {
  display: grid;
  gap: var(--space-24);
  min-inline-size: var(--space-0);
}

.p-topics-article__information {
  --table-heading-width: calc(var(--space-80) + var(--space-8) + var(--space-2));
}

.p-topics-article__published {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
  color: var(--semantic-text-secondary);
}

.p-topics-article__back {
  margin-block-start: var(--space-8);
}

.p-topics-article__related {
  display: grid;
  gap: var(--space-16);
}
.p-topics-article__related .c-card > a {
  grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  gap: var(--space-12);
  block-size: auto;
}
.p-topics-article__related .c-card__image {
  aspect-ratio: 4/3;
}
.p-topics-article__related .c-card__image img {
  inline-size: var(--ratio-full);
  block-size: var(--ratio-full);
}
.p-topics-article__related .c-card__category,
.p-topics-article__related .c-card__forecast {
  color: var(--semantic-text-accent);
}
.p-topics-article__related .c-card__meta {
  overflow-wrap: normal;
}

.p-topics-article__card-heading {
  display: grid;
  gap: var(--space-4);
}
.p-topics-article__card-heading .c-card__labels {
  margin-block-end: var(--space-0);
}

@media (min-width: 768px) {
  .p-topics-article__heading {
    gap: var(--space-12);
  }
  .p-topics-article__category {
    font-size: var(--font-size-18);
  }
  .p-topics-article__visual {
    align-items: center;
  }
  .p-topics-article__visual:has(> .p-topics-article__date-panel:not([data-date-panel=off])) {
    grid-template-columns: minmax(var(--space-0), 1fr) calc(var(--space-256) + var(--space-68) + var(--space-1));
  }
  .p-topics-article__image {
    aspect-ratio: 715/536;
  }
  .p-topics-article__date-panel {
    align-self: stretch;
    gap: var(--space-48);
    padding: var(--space-32) var(--space-48);
  }
  .p-topics-article__date-label {
    font-size: var(--font-size-16);
    text-align: start;
  }
  .p-topics-article__dates {
    flex-direction: column;
    align-items: start;
    justify-content: start;
  }
  .p-topics-article__date {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
  }
  .p-topics-article__year,
  .p-topics-article__weekday {
    font-size: var(--font-size-18);
  }
  .p-topics-article__month-day {
    font-size: var(--font-size-24);
  }
  .p-topics-article__year-slash {
    display: inline;
  }
  .p-topics-article__comma {
    display: none;
  }
  .p-topics-article__dates[data-date-pattern=range] {
    align-items: start;
  }
  .p-topics-article__date-separator {
    writing-mode: vertical-rl;
    font-size: var(--font-size-18);
  }
  .p-topics-article__calendar {
    inline-size: var(--ratio-full);
  }
  .p-topics-article__information {
    --table-heading-width: calc(var(--space-256) - var(--space-40));
  }
  .p-topics-article__back {
    margin-block-start: var(--space-24);
  }
  .p-topics-article__related {
    grid-template-columns: repeat(4, minmax(var(--space-0), 1fr));
    gap: var(--layout-grid-gap);
  }
  .p-topics-article__related .c-card > a {
    grid-template-columns: minmax(var(--space-0), 1fr);
  }
}
.p-topics-archive[data-topics-archive] > .c-heading--page {
  --heading-margin-block-end: var(--layout-section-padding-heading-1);
}
.p-topics-archive .p-topics__list {
  font-family: var(--font-family-jp);
}

.p-topics-archive__toolbar {
  display: flex;
  justify-content: flex-start;
  padding-block-end: var(--space-24);
}

.p-topics-archive__more {
  display: flex;
  justify-content: center;
  inline-size: min(var(--ratio-full), var(--space-256) - var(--space-28));
  margin-inline: auto;
  margin-block-start: var(--space-32);
}
.p-topics-archive__more[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .p-topics-archive__toolbar {
    justify-content: flex-end;
  }
  .p-topics-archive__more {
    inline-size: min(var(--ratio-full), var(--space-256) + var(--space-28));
    margin-block-start: var(--space-48);
  }
  .p-topics-archive-dialog .c-dialog__choices {
    column-gap: var(--space-16);
  }
}