/* Mobile-only refinements for SCC landing pages. Desktop styles stay intact. */
@media (max-width: 767px) {
  /* Keep a complete, shallow photo panel above each hero's copy. The source
     pages use wide photographs; covering a tall text block was cropping them. */
  :is(.scc-athlete .sa-hero, .scc-executive .se-hero,
      .scc-personal .sp-hero, .scc-corporate .sc-hero,
      .scc-team .st-hero, .scc-community .co-hero,
      .scc-academy .ac-hero) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: 0 0 58px !important;
  }
  :is(.scc-athlete .sa-hero__visual, .scc-executive .se-hero__visual,
      .scc-personal .sp-hero__visual, .scc-corporate .sc-hero__image,
      .scc-team .st-hero__image, .scc-community .co-hero__photo,
      .scc-academy .ac-hero__image) {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: none !important;
    width: 100% !important;
    height: clamp(180px, 52vw, 320px) !important;
    background-color: #1b2d23 !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: saturate(.88) !important;
    opacity: 1 !important;
  }
  :is(.scc-athlete .sa-hero__shade, .scc-executive .se-hero__shade,
      .scc-personal .sp-hero__shade, .scc-corporate .sc-hero__shade,
      .scc-team .st-hero__shade) { display: none !important; }
  .scc-community .co-hero::after,
  .scc-academy .ac-hero::after { display: none !important; }
  :is(.scc-athlete .sa-hero__content, .scc-executive .se-hero__content,
      .scc-personal .sp-hero__content, .scc-corporate .sc-hero__content,
      .scc-team .st-hero__content, .scc-community .co-hero__inner,
      .scc-academy .ac-hero__inner) {
    width: calc(100% - 40px) !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    padding: 34px 0 0 !important;
  }

  /* The overview page contains an actual img. Let its natural ratio show. */
  .scc-pco .pco-hero { display: flex !important; flex-direction: column !important; }
  .scc-pco .pco-hero__photo {
    order: -1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    background: #1b2d23;
  }
  .scc-pco .pco-hero__photo img {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: min(55vw, 340px) !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  .scc-pco .pco-hero__copy { padding: 36px 20px 58px !important; }

  /* Home slider uses the same visual language. Keep controls after the copy. */
  .scc-home .sh-slide {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: 0 0 70px !important;
  }
  .scc-home .sh-slide[hidden] { display: none !important; }
  .scc-home .sh-slide__image {
    position: relative !important;
    inset: auto !important;
    flex: none !important;
    height: clamp(180px, 52vw, 320px) !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #1b2d23 !important;
    filter: saturate(.88) !important;
  }
  .scc-home .sh-slide::after { display: none !important; }
  .scc-home .sh-slide__content {
    width: calc(100% - 40px) !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    padding: 32px 0 0 !important;
  }

  /* Allow Japanese to wrap naturally instead of keeping desktop line breaks. */
  :is(.scc-home, .scc-pco, .scc-athlete, .scc-executive,
      .scc-personal, .scc-corporate, .scc-team,
      .scc-community, .scc-academy) :is(h1, h2, h3, p) br {
    display: none !important;
  }
  :is(.scc-home, .scc-pco, .scc-athlete, .scc-executive,
      .scc-personal, .scc-corporate, .scc-team,
      .scc-community, .scc-academy) :is(h1, h2, h3) {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.48 !important;
  }
  :is(.scc-home .sh-slide h1, .scc-home .sh-slide h2,
      .scc-pco .pco-hero h1, .scc-athlete .sa-hero h1,
      .scc-executive .se-hero h1, .scc-personal .sp-hero h1,
      .scc-corporate .sc-hero h1, .scc-team .st-hero h1,
      .scc-community .co-hero h1, .scc-academy .ac-hero h1) {
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 1.45 !important;
  }
  :is(.scc-home, .scc-pco, .scc-athlete, .scc-executive,
      .scc-personal, .scc-corporate, .scc-team,
      .scc-community, .scc-academy) h2 {
    font-size: clamp(26px, 7.2vw, 36px);
  }
  :is(.scc-home, .scc-pco, .scc-athlete, .scc-executive,
      .scc-personal, .scc-corporate, .scc-team,
      .scc-community, .scc-academy) :is(p, li, td, th, small, figcaption) {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Editorial labels and captions need contrast on both light and dark panels. */
  :is(.scc-home, .scc-pco, .scc-athlete, .scc-executive,
      .scc-personal, .scc-corporate, .scc-team,
      .scc-community, .scc-academy)
    :is([class*="eyebrow"], [class*="-label"], figcaption, [class*="__note"]) {
    color: inherit !important;
    opacity: 1 !important;
    font-size: max(12px, .75rem) !important;
    line-height: 1.65 !important;
    letter-spacing: .06em !important;
  }
  :is(.scc-home, .scc-pco, .scc-athlete, .scc-executive,
      .scc-personal, .scc-corporate, .scc-team,
      .scc-community, .scc-academy) small {
    font-size: 12px !important;
    line-height: 1.6 !important;
    opacity: .95 !important;
  }

  /* Comparison table: show each pair as a readable card, not 2 tiny columns. */
  .scc-corporate .sc-compare__table { border: 0 !important; }
  .scc-corporate .sc-compare table,
  .scc-corporate .sc-compare tbody,
  .scc-corporate .sc-compare tr,
  .scc-corporate .sc-compare td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .scc-corporate .sc-compare thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  .scc-corporate .sc-compare tr {
    margin: 0 0 14px !important;
    border: 1px solid #b6c6b7 !important;
    background: #fff;
  }
  .scc-corporate .sc-compare td {
    padding: 18px 18px 17px !important;
    border: 0 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    overflow-wrap: break-word !important;
  }
  .scc-corporate .sc-compare td + td {
    background: #e7eee7 !important;
    color: #173e2b !important;
    border-top: 1px solid #b6c6b7 !important;
  }
  .scc-corporate .sc-compare td::before {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #405547;
  }
  .scc-corporate .sc-compare td:first-child::before { content: '従来型の施策'; }
  .scc-corporate .sc-compare td:last-child::before { content: 'SCCの身体資本マネジメント'; }

  /* Diagram text was 8px in the mobile rules; give every term its own row. */
  :is(.scc-corporate .sc-equation__diagram,
      .scc-team .st-equation__diagram) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 24px 18px !important;
  }
  :is(.scc-corporate .sc-equation__diagram,
      .scc-team .st-equation__diagram) :is(span, strong) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 60px !important;
    padding: 10px !important;
    font-size: 12px !important;
  }
  :is(.scc-corporate .sc-equation__diagram,
      .scc-team .st-equation__diagram) small { font-size: 18px !important; }
  :is(.scc-corporate .sc-equation__diagram,
      .scc-team .st-equation__diagram) b {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }
  :is(.scc-corporate .sc-equation__diagram,
      .scc-team .st-equation__diagram) p {
    width: 100% !important;
    font-size: 13px !important;
  }

  :is(.scc-athlete .sa-process__steps li,
      .scc-executive .se-process__steps li,
      .scc-personal .sp-process__steps li,
      .scc-academy .ac-steps li) {
    grid-template-columns: 32px 88px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  :is(.scc-athlete .sa-process__steps small,
      .scc-executive .se-process__steps small,
      .scc-personal .sp-process__steps small,
      .scc-academy .ac-steps small) {
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: #e5ede4 !important;
  }
}

@media (max-width: 360px) {
  :is(.scc-athlete .sa-hero__content, .scc-executive .se-hero__content,
      .scc-personal .sp-hero__content, .scc-corporate .sc-hero__content,
      .scc-team .st-hero__content, .scc-community .co-hero__inner,
      .scc-academy .ac-hero__inner, .scc-home .sh-slide__content) {
    width: calc(100% - 32px) !important;
  }
}