.page-content-header
  +position(relative)
  +media-breakpoint-up(md)
    display: flex
    gap: 1rem
  &:not(:last-child)
    +media-breakpoint-up(md)
      margin-bottom: 1.5rem
  +media-breakpoint-down(sm)
    margin-bottom: 1.25rem
  .a-watch-button.is-inactive,
  .a-bookmark-button.is-inactive
    color: var(--semi-muted-text)
    background-color: var(--background-semi-shade)
  .a-count-badge
    float: right
    margin-left: .5rem
    margin-top: -.5rem

.page-content-header__start
  display: flex
  flex-direction: column
  align-items: center
  gap: .5rem

.page-content-header__end
  +media-breakpoint-up(md)
    flex: 1
  +media-breakpoint-down(sm)
    .page-content-header__start + &
      margin-top: .5rem

.page-content-header__user
  +media-breakpoint-down(sm)
    display: flex
    justify-content: center

.page-content-header__category
  +media-breakpoint-down(sm)
    display: flex
    justify-content: center

.page-content-header__category-icon
  +size(3.5rem)
  border-radius: 50%
  display: flex
  align-items: center
  justify-content: center
  +text-block(.875rem 1, 600)
  // regular_events
  &.is-meeting
    background-color: #7f6fb7
    color: var(--reversal-text)
  &.is-reading-circle
    background-color: #79bcc3
    color: var(--reversal-text)
  &.is-question
    background-color: #de9172
    color: var(--reversal-text)
  &.is-chat
    background-color: #56925c
    color: var(--reversal-text)
  &.is-others
    background-color: #f7cd5b
    color: var(--default-text)

.page-content-header__user-link
  +block-link

.page-content-header__user-icon-image
  +size(3.5rem)

.page-content-header__company-logo-image
  background-color: var(--base)
  object-fit: contain
  border-radius: .25rem
  +media-breakpoint-up(md)
    +size(3.5rem)
  +media-breakpoint-down(sm)
    +size(2.75rem)
    +position(absolute, left 0, top 0)

.page-content-header__before-title
  gap: .25rem 1rem
  flex-wrap: wrap
  +media-breakpoint-up(md)
    display: inline-flex
    margin-bottom: .25rem
  +media-breakpoint-down(sm)
    display: flex
    justify-content: center
    text-align: center
    margin-bottom: .5rem
  .a-user-name,
  .a-meta,
  .a-category-link
    font-size: .75rem

.page-content-header__title
  font-feature-settings: "palt"
  letter-spacing: .02em
  +text-block(1em 1.4, 700)
  color: var(--main)
  padding-bottom: .25rem
  border-bottom: solid 1px var(--border-shade)
  +media-breakpoint-up(md)
    font-size: 1.625rem
    word-wrap: break-word
  +media-breakpoint-down(sm)
    font-size: 1.125rem
    word-break: break-all
  &.is-wip
    color: var(--muted-text)
  &.is-skip-on
    color: var(--muted-text)
  .a-title-label
    display: inline-flex
    vertical-align: top
    +media-breakpoint-up(md)
      +position(relative, top .75em)
    +media-breakpoint-down(sm)
      +position(relative, top .5em)

.page-content-header__title-link
  +hover-link
  color: var(--main)
  .page-content-header__title.is-wip &
    color: var(--muted-text)

.page-content-header__tags
  margin-top: .75rem

.page-content-header__row
  &:not(:last-child)
    margin-bottom: .5rem
  .a-horizontal-dashed
    margin-bottom: 1rem

.page-content-header__description
  +media-breakpoint-up(md)
    padding-block: .25rem
  +media-breakpoint-down(sm)
    padding-block: .25rem
  &.a-long-text
    +media-breakpoint-up(md)
      font-size: .9375rem
    +media-breakpoint-down(sm)
      font-size: .8125rem

.page-content-header__emotion
  display: inline-flex
  vertical-align: middle
  +position(relative, top -.125em)
  +size(1em)
  +media-breakpoint-up(md)
    font-size: 1.75rem
    margin-right: .375em
  +media-breakpoint-down(sm)
    font-size: 1.25rem
    margin-right: .25em

.page-content-header__emotion-image
  +size(100%)

.page-content-header__checker
  +position(absolute, right 0, top -.5rem)

.user-profile__company-logo-image
  background-color: var(--base)
  object-fit: contain
  border-radius: .25rem
  +media-breakpoint-up(md)
    +size(4.5rem)
  +media-breakpoint-down(sm)
    +size(3.5rem)
    +position(absolute, right 0, top 0)

.page-content-header__alert
  background-color: var(--danger-tint)
  color: var(--danger-text)
  +text-block(.875rem 1.4)
  text-align: center
  padding: .5rem 1rem
  border: solid 1px var(--danger)
  border-radius: .25rem
