/* Offline copies of the source supporter imagery. */
[data-device="sp"] .selter_supporter_link_wrap.is-active {
  background-image: image-set(
    url("../../mirror-assets/challenge_shelter/bg_supporter_link_wrap_pc.webp") 1x,
    url("../../mirror-assets/challenge_shelter/bg_supporter_link_wrap_pc@2x.webp") 2x
  );
}

[data-device="sp"] .selter_supporter_link_wrap_2.is-active {
  background-image: image-set(
    url("../../mirror-assets/challenge_shelter/bg_supporter_link_wrap_2_pc.webp") 1x,
    url("../../mirror-assets/challenge_shelter/bg_supporter_link_wrap_2_pc@2x.webp") 2x
  );
}

[data-device="pc"] .selter_supporter_link_wrap:not(.selter_supporter_link_wrap_2).is-active .inner {
  background-image: image-set(
    url("../../mirror-assets/challenge_shelter/bg_supporter_link_wrap_pc.webp") 1x,
    url("../../mirror-assets/challenge_shelter/bg_supporter_link_wrap_pc@2x.webp") 2x
  );
}

[data-device="pc"] .selter_supporter_link_wrap_2.is-active {
  background-image: image-set(
    url("../../mirror-assets/challenge_shelter/bg_supporter_link_wrap_2_pc.webp") 1x,
    url("../../mirror-assets/challenge_shelter/bg_supporter_link_wrap_2_pc@2x.webp") 2x
  );
}

.js_accordion_toggle { cursor: pointer; }

/* The FAQ marker is a CSS pseudo-element in the original page. */
.stamp_faq_wrap .faq.is-active .q::before {
  background-image: url("../../mirror-assets/downloaded/icon_footprint-4ad383cbad.svg");
}

/*
 * Shelter H5 layer (mirrors home mobile-local).
 * Tailwind pc:/sp: utilities key off html[data-device], but several blocks use
 * bare fixed widths (w-[680px], w-[980px], pl-[510px], …). Force a usable
 * mobile layout with media queries so PC rules stay untouched above 767px.
 */
@media (max-width: 767px) {
  html,
  body.index_page,
  body.index_page.md\:min-w-\[1080px\],
  body.md\:min-w-\[1080px\] {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden;
  }

  body.index_page {
    --drawer-width: 270px;
  }

  /* Header chrome */
  body.index_page .ref_header_inner {
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    padding-left: 15px;
    padding-right: 0;
  }

  body.index_page .ref_header_inner > div {
    display: none;
  }

  body.index_page .ref_header_inner > ul li:nth-child(2) {
    display: none;
  }

  body.index_page .global_pc_menu {
    display: none !important;
  }

  body.index_page .ref_main_contents {
    width: 100%;
    min-width: 0;
  }

  /* Kill bare fixed widths used without sp: counterparts */
  body.index_page .w-\[680px\],
  body.index_page .w-\[300px\],
  body.index_page .w-\[310px\],
  body.index_page .w-\[470px\],
  body.index_page .w-\[480px\],
  body.index_page .w-\[420px\],
  body.index_page .w-\[250px\],
  body.index_page .w-\[980px\],
  body.index_page .w-\[980\],
  body.index_page .w-\[800px\] {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.index_page .mx-auto.w-\[980px\],
  body.index_page .mx-auto.flex.w-\[980px\],
  body.index_page .ref_section_row_wrap.w-\[980px\],
  body.index_page #facility.ref_section_row_wrap {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-direction: column;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Outline two-column → stack */
  body.index_page #outline.ref_section_wrap {
    flex-direction: column;
    width: 100%;
    padding: 20px 15px 30px;
    gap: 20px;
  }

  body.index_page #outline .w-\[680px\],
  body.index_page #outline .w-\[300px\] {
    width: 100% !important;
  }

  body.index_page #outline .text-\[18px\] {
    font-size: 15px;
  }

  /* Supporter CTA: PC uses pl-[510px] for side art — reset on H5 */
  body.index_page .selter_supporter_link_wrap .inner {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 30px 0 10px !important;
  }

  body.index_page .selter_supporter_link_wrap .inner.pl-\[510px\] {
    padding-left: 0 !important;
  }

  body.index_page .content_tab_wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.index_page .content_tab_wrap ul {
    min-width: max-content;
    padding: 0 15px;
  }

  /* —— Hero cover slideshow ——
   * Slides are position:absolute;inset:0 — parent needs height, and
   * img must keep height:100% (blanket height:auto breaks the fill). */
  body.index_page .shelter_cover {
    box-sizing: border-box;
    width: 100%;
    min-height: 340px;
    padding: 45px 15px !important;
  }

  body.index_page .shelter_cover > .pc\:mx-auto,
  body.index_page .shelter_cover > div.pc\:flex,
  body.index_page .shelter_cover > div:not(.c-slideshow__item) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    min-height: 0;
    padding: 0 !important;
  }

  body.index_page .shelter_cover .c-slideshow__item {
    inset: 0;
  }

  body.index_page .shelter_cover .c-slideshow__item img {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
  }

  /* Facility / report / cards */
  body.index_page #facility > .ref_section_wrap {
    width: 100%;
  }

  body.index_page #facility .c-slideshow {
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
  }

  body.index_page #facility .c-slideshow .c-slideshow__item img {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  body.index_page .stamp_faq_wrap {
    width: 100% !important;
    max-width: 100%;
    padding: 0;
  }

  /* —— Fund / NPO card (一字一行 root cause) ——
   * Inner row flex + bare w-[310px] + px-16 crushes .flex-1 text. */
  body.index_page .ref_section_wrap.pc\:w-\[980px\],
  body.index_page .ref_section_wrap.pc\:mx-auto {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.index_page .ref_section_wrap > .flex.gap-10.rounded-\[50px\],
  body.index_page .ref_section_wrap > div.flex.gap-10 {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 20px !important;
    width: 100%;
    max-width: 100%;
    padding: 28px 20px !important;
    border-radius: 28px !important;
  }

  body.index_page .ref_section_wrap > .flex.gap-10 > .order-2,
  body.index_page .ref_section_wrap > .flex.gap-10 > .flex-1,
  body.index_page .ref_section_wrap > div.flex.gap-10 > .order-2,
  body.index_page .ref_section_wrap > div.flex.gap-10 > .flex-1 {
    flex: none !important;
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.index_page .ref_section_wrap > .flex.gap-10 > .order-1,
  body.index_page .ref_section_wrap > div.flex.gap-10 > .order-1,
  body.index_page .order-1.w-\[310px\] {
    flex: none !important;
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.index_page .ref_section_wrap > .flex.gap-10 p,
  body.index_page .ref_section_wrap > div.flex.gap-10 p {
    font-size: 14px;
    line-height: 1.7;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  /* Footer columns that lack sp: widths */
  body.index_page .ref_global_footer .mx-auto.flex.w-\[980px\] {
    box-sizing: border-box;
    width: 100% !important;
    flex-direction: column;
    gap: 24px;
    padding: 30px 15px;
  }

  body.index_page .ref_global_footer .w-\[480px\],
  body.index_page .ref_global_footer .w-\[420px\] {
    width: 100% !important;
  }

  body.index_page .ref_global_footer .w-\[480px\] > *,
  body.index_page .ref_global_footer .w-\[420px\] > * {
    width: calc(50% - 10px);
  }

  body.index_page img {
    max-width: 100%;
    height: auto;
  }

  /* Re-assert slideshow fills after the blanket img rule */
  body.index_page .shelter_cover .c-slideshow__item img,
  body.index_page #facility .c-slideshow .c-slideshow__item img,
  body.index_page .c-slideshow > .c-slideshow__item > img {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  body.index_page .page_top_link {
    display: none;
  }
}