/* ================================================================
   Mobile Layout — max-width: 768px
   全要素がビューポート幅に収まることを保証する
   ================================================================ */

@media (max-width: 768px) {

  /* ━━ Nuclear Reset ━━ */
  html {
    overflow-x: hidden !important;
    margin: 0 !important;
  }
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #root {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  *, *::before, *::after {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  img, video, canvas, iframe {
    max-width: 100% !important;
  }
  svg {
    flex-shrink: 0 !important;
  }
  /* Force all block-level containers to respect viewport */
  div, section, nav, main, article, aside, header, footer, form, ul, ol, figure {
    max-width: 100% !important;
  }
  /* Prevent any inline-styled element from exceeding viewport */
  [style*="width"] {
    max-width: 100% !important;
  }
  /* All flex children: allow shrinking */
  [style*="display: flex"] > *,
  [style*="display:flex"] > * {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  /* ━━ Header — handled by hamburger in Header.tsx ━━ */
  .acsHeader {
    width: 100% !important;
  }

  /* ━━ Hero ━━ */
  .topContainer--hero {
    width: 100% !important;
    padding: 0 !important;
  }
  .hero {
    width: 100% !important;
    overflow: hidden !important;
  }
  .hero > div {
    border-radius: 0 !important;
  }
  .heroCtaBtn {
    display: none !important;
  }

  /* ━━ SearchArea ━━ */
  .sgWrap {
    padding: 0 0 24px !important;
  }
  .sgInner {
    padding: 0 12px !important;
  }
  .sgNeu {
    padding: 14px 12px !important;
    border-radius: 8px !important;
  }
  .sgNeu__top {
    margin-bottom: 12px !important;
  }
  .sgNeu__row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .sgNeu__cnt b {
    font-size: 20px !important;
  }
  .sgNeuField {
    height: 44px !important;
    padding: 0 12px !important;
  }
  .sgNeuBtn {
    height: 44px !important;
    font-size: 14px !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 8px !important;
  }

  /* ━━ Containers ━━ */
  .wrapper,
  .wrapper--top {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  .topContainer,
  .topContainer.topContainer__main {
    width: 100% !important;
    padding: 0 !important;
  }

  /* ━━ Sidebar → hidden ━━ */
  .topContent {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
  }
  .topContent__side,
  .topContent__side.topContent__aside {
    display: none !important;
  }
  .topContent__main,
  .topContent__main.reform_content {
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
  }

  /* ━━ Pickups ━━ */
  .topPickups {
    padding: 0 12px !important;
    width: 100% !important;
  }
  .pujob_wrapper,
  .pujob_wrapper.widePadding {
    padding: 0 !important;
    width: 100% !important;
  }
  .pujob_section {
    width: 100% !important;
    padding: 0 !important;
  }
  .pujob_heading {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  .pujob_heading_ttl {
    font-size: 17px !important;
  }
  .aijob_cta_wrap {
    flex-direction: column !important;
    gap: 14px !important;
    margin-top: 14px !important;
    width: 100% !important;
  }
  .ctaCard,
  .aijob_cta_card {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }
  .ctaMedia {
    padding: 20px 16px 24px !important;
  }
  .ctaEyebrow {
    font-size: 11px !important;
  }
  .ctaTitle {
    font-size: 17px !important;
    min-height: 0 !important;
    margin-top: 12px !important;
  }
  .ctaBody {
    padding: 14px 16px 16px !important;
  }
  .ctaBtn {
    padding: 10px 18px !important;
    font-size: 13px !important;
    white-space: normal !important;
  }
  /* 3-column pickup grid → 1 column */
  .pickupGrid,
  .pujob_jobbanner_inner {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Pickup card inner */
  .pujob_jobbanner_inner > li > div {
    width: 100% !important;
  }
  .pujob_jobbanner_inner > li > div > div:first-child {
    aspect-ratio: 2 / 1 !important;
  }

  /* ━━ Job Cards — horizontal scroll ━━ */
  .topCarousel__container,
  .topCarousel__container.swiper-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .mpJobGrid,
  .topCarousel__list,
  .topCarousel__list.swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 12px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }
  .mpJobGrid::-webkit-scrollbar,
  .topCarousel__list::-webkit-scrollbar {
    display: none !important;
  }
  .topCarousel__item,
  .topCarousel__item.swiper-slide {
    width: 72vw !important;
    min-width: 72vw !important;
    max-width: 72vw !important;
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }
  /* Job card inner */
  .topCarousel__item > div,
  .swiper-slide > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Job card figure */
  .topCarousel__item figure,
  .swiper-slide figure {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
  .jobCard {
    width: 100% !important;
  }
  .jobCard > a {
    width: 100% !important;
    display: block !important;
  }
  .jobCard__fig {
    width: 100% !important;
    display: block !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
  }
  .jobCard__fig img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    max-width: none !important;
  }
  .jobCard__text {
    padding: 12px 12px 0 !important;
    width: 100% !important;
  }
  .jobCard__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 14px !important;
    width: 100% !important;
  }
  .jobCard__info {
    padding: 10px 12px 14px !important;
    width: 100% !important;
  }
  .jobCard__meta {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .topCarousel__item h3 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
  }
  /* "気になる" button inside cards */
  .topCarousel__item a[data-job-key],
  .topCarousel__item a[data-ty] {
    white-space: nowrap !important;
    padding: 10px 8px !important;
    font-size: 14px !important;
  }
  /* Scroll position indicator */
  .jobScrollIndicator {
    display: flex !important;
  }

  /* ━━ Occupation / Industry Tiles ━━ */
  .mpTileGrid,
  .topJobCategoryList {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    padding: 10px !important;
    width: 100% !important;
  }
  .jcTile {
    padding: 14px 8px 12px !important;
    width: 100% !important;
  }
  .jcTile__ic {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 8px !important;
  }
  .jcTile__ic svg {
    max-width: 36px !important;
  }
  .jcTile__title {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .jcTile__desc {
    font-size: 10px !important;
    display: none !important;
  }
  .jcTile__cnt {
    font-size: 10px !important;
  }
  .jcTile__chk {
    width: 16px !important;
    height: 16px !important;
    top: 4px !important;
    right: 4px !important;
  }

  /* ━━ MainSecondary (人気注目の都市) — hide on mobile ━━ */
  .topSection--cities {
    display: none !important;
  }

  /* ━━ Section Headers ━━ */
  .topSection {
    width: 100% !important;
    padding: 0 12px !important;
  }
  .topSection__header {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  .topSection__title {
    font-size: 17px !important;
  }
  .topSection__title--lg,
  .topSection__title--md,
  .topSection__title--xmd {
    font-size: 18px !important;
  }
  .topSection__main {
    width: 100% !important;
    padding: 0 !important;
  }

  /* ━━ Blog Grid ━━ */
  .blogList {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .blogCard {
    width: 100% !important;
  }
  .blogCard__img {
    aspect-ratio: 2 / 1 !important;
  }
  .blogCard__title {
    font-size: 14px !important;
  }
  .blogCard__body {
    padding: 12px 14px 14px !important;
  }

  /* ━━ Skill / Job Tag Lists ━━ */
  .topTagCity {
    font-size: 13px !important;
    padding: 6px 10px !important;
  }

  /* ━━ Japan Map ━━ */
  .jpmStage {
    width: 100% !important;
    overflow: hidden !important;
  }
  .jpmWrap {
    flex-direction: column !important;
    align-items: center !important;
    padding: 8px 0 16px !important;
    width: 100% !important;
  }
  .jpmMap {
    width: 100% !important;
    padding: 0 !important;
  }
  .jpmSvg {
    max-width: 100% !important;
    width: 100% !important;
  }
  .jpmAside {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 12px !important;
  }
  .jpmPanel {
    width: 100% !important;
    flex: none !important;
  }
  .jpmPanel__pref {
    font-size: 20px !important;
  }
  .jpmPanel__cnt {
    font-size: 20px !important;
  }
  .jpmPanel__rank {
    font-size: 18px !important;
  }
  .jpmRecBox {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 12px !important;
  }
  .jpmJob {
    padding: 14px 4px !important;
  }
  .jpmJob__title {
    font-size: 14px !important;
    white-space: normal !important;
  }
  .jpmJob__company {
    font-size: 12px !important;
    white-space: normal !important;
  }
  .jpmJob__salary {
    font-size: 16px !important;
  }
  .jpmJob__salary span {
    font-size: 11px !important;
  }
  .jpmRecHead {
    font-size: 15px !important;
  }
  .jpmTip {
    display: none !important;
  }
  .jpmHint {
    font-size: 12px !important;
    padding: 0 12px !important;
  }

  /* ━━ Related Services / Contact ━━ */
  .aiMatchCard {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px 0 !important;
  }
  .aiMatchLogo {
    font-size: 24px !important;
  }
  .aiMatchBody__desc {
    font-size: 13px !important;
  }
  .naviGroup {
    width: 100% !important;
  }
  .naviGroup__header {
    margin-bottom: 8px !important;
  }
  section:has(.naviGroup) {
    padding: 16px 16px !important;
  }
  .navItem {
    width: 100% !important;
  }
  .navItem__text {
    font-size: 14px !important;
    white-space: normal !important;
  }

  /* ━━ RegisterBottom CTA ━━ */
  .regCta {
    padding: 28px 12px !important;
    width: 100% !important;
  }
  .regCta__heading {
    font-size: 18px !important;
  }
  .regCta__card {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px 16px !important;
    width: 100% !important;
  }
  .regCta__col {
    width: 100% !important;
    align-items: stretch !important;
  }
  .regCta__label {
    font-size: 13px !important;
    text-align: center !important;
  }
  .regCta__btn {
    padding: 14px 16px !important;
    font-size: 15px !important;
    width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
  }
  .regCta__note {
    font-size: 12px !important;
  }

  /* ━━ Footer ━━ */
  .siteFooter {
    padding: 24px 0 0 !important;
    width: 100% !important;
  }
  .siteFooter__inner {
    padding: 0 16px !important;
    width: 100% !important;
  }
  .siteFooter__top {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
  }
  .siteFooter__brand {
    grid-column: 1 / -1 !important;
  }
  .siteFooter__brand p {
    margin-top: 6px !important;
    font-size: 12px !important;
  }
  .siteFooter__brand img {
    height: 36px !important;
  }
  .siteFooter__col h3 {
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }
  .siteFooter__col li {
    margin-bottom: 8px !important;
  }
  .siteFooter__col a {
    font-size: 14px !important;
  }
  .siteFooter__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding: 12px 0 16px !important;
  }
  .siteFooter__legal {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  /* ━━ SearchPage ━━ */
  /* Hero area */
  .sp-page[style*="padding: 36px"] {
    padding: 16px 12px 0 !important;
  }
  .sp-page h1[style*="fontSize: 24px"],
  .sp-page h1[style*="font-size: 24px"] {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }
  .sp-page h1 + p {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
  /* Form container */
  div[style*="padding: 24px 20px 60px"] {
    padding: 12px 12px 40px !important;
  }
  /* FieldRow: stack label above content */
  .sp-card div[style*="flex: 0 0 140px"] {
    flex: none !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 2px !important;
    font-size: 13px !important;
  }
  .sp-card div[style*="display: flex"][style*="gap: 20px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 6px 0 !important;
  }
  /* Chips container: fill full width */
  .sp-card div[style*="display: flex"][style*="flexWrap: wrap"],
  .sp-card div[style*="display: flex"][style*="flex-wrap: wrap"] {
    width: 100% !important;
  }
  /* Card header padding */
  .sp-card button[style*="padding: 20px 28px"] {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
  .sp-card button span[style*="width: 32px"] {
    width: 26px !important;
    height: 26px !important;
  }
  /* Card body padding */
  .sp-card .sp-accordion-body > div {
    padding: 0 14px 14px !important;
    border-top: none !important;
  }
  .sp-card .sp-accordion-body > div > div {
    border-bottom-width: 1px !important;
  }
  /* Card margin */
  .sp-card {
    margin-bottom: 10px !important;
  }
  /* Sticky search bar */
  .sp-sticky {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
  }
  .sp-sticky span[style*="fontSize: 26px"],
  .sp-sticky span[style*="font-size: 26px"] {
    font-size: 20px !important;
  }
  .sp-sticky span[style*="fontSize: 13px"] {
    font-size: 11px !important;
  }
  .sp-sticky button {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
  /* Chips: compact, wrap tightly */
  .sp-chip {
    padding: 5px 10px !important;
    font-size: 12px !important;
    margin: 0 4px 5px 0 !important;
    border-radius: 20px !important;
  }
  .sp-chip::before {
    width: 13px !important;
    height: 13px !important;
  }
  /* Select / input */
  .sp-select, .sp-input {
    width: 100% !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  .sp-select {
    padding-right: 32px !important;
  }
  /* Feature subsection */
  .sp-card div[style*="marginBottom: 24px"],
  .sp-card div[style*="margin-bottom: 24px"] {
    margin-bottom: 14px !important;
  }
  /* Feature grid: 2 columns on mobile */
  .sp-card div[style*="gridTemplateColumns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }
  .sp-card div[style*="gridTemplateColumns: repeat(3"] > label {
    padding: 8px 8px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
  /* Bottom CTA */
  .sp-cta-bottom {
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
  /* Specify button */
  .sp-specify {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }

  /* ━━ Utility: prevent ANY horizontal overflow ━━ */
  .widePadding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Kill any gap > 20px on mobile */
  [style*="gap: 150px"],
  [style*="gap:150px"],
  [style*="gap: 32px"],
  [style*="gap:32px"],
  [style*="gap: 28px"],
  [style*="gap:28px"],
  [style*="gap: 26px"],
  [style*="gap:26px"] {
    gap: 12px !important;
  }

  /* ━━ App-wide mobile hardening for inline React layouts ━━ */
  #root {
    max-width: 100dvw !important;
  }

  #root h1,
  #root h2,
  #root h3,
  #root h4,
  #root p,
  #root li,
  #root dt,
  #root dd,
  #root label,
  #root span,
  #root a,
  #root button,
  #root th,
  #root td {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-break: strict !important;
  }

  #root input,
  #root select,
  #root textarea {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }

  #root button,
  #root a[role="button"],
  #root input[type="button"],
  #root input[type="submit"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #root [style*="min-width"],
  #root [style*="minWidth"] {
    min-width: 0 !important;
  }

  #root [style*="white-space: nowrap"],
  #root [style*="whiteSpace: nowrap"],
  #root [style*="text-overflow: ellipsis"],
  #root [style*="textOverflow: ellipsis"] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #root [style*="display: grid"][style*="grid-template-columns: repeat("]:not(.mpJobGrid):not(.mpTileGrid):not(.topCarousel__list):not(.topJobCategoryList):not(.jpmRegion__prefs),
  #root [style*="display:grid"][style*="grid-template-columns: repeat("]:not(.mpJobGrid):not(.mpTileGrid):not(.topCarousel__list):not(.topJobCategoryList):not(.jpmRegion__prefs),
  #root [style*="display: grid"][style*="grid-template-columns: 1fr 1fr"],
  #root [style*="display:grid"][style*="grid-template-columns: 1fr 1fr"],
  #root [style*="display: grid"][style*="grid-template-columns: 1.2fr"],
  #root [style*="display:grid"][style*="grid-template-columns: 1.2fr"],
  #root [style*="display: grid"][style*="grid-template-columns: 96px 1fr"],
  #root [style*="display: grid"][style*="grid-template-columns: 100px 1fr"],
  #root [style*="display: grid"][style*="grid-template-columns: 120px 1fr"],
  #root [style*="display: grid"][style*="grid-template-columns: 130px 1fr"],
  #root [style*="display: grid"][style*="grid-template-columns: 180px 1fr"],
  #root [style*="display: grid"][style*="grid-template-columns: 200px 1fr"],
  #root [style*="display: grid"][style*="grid-template-columns: minmax(0, 1fr) 156px"],
  #root [style*="display: grid"][style*="grid-template-columns: minmax(160px"],
  #root [style*="display: grid"][style*="grid-template-columns: minmax(220px"],
  #root [style*="display: grid"][style*="grid-template-columns: minmax(240px"],
  #root [style*="display: grid"][style*="grid-template-columns: 90px 1fr"],
  #root [style*="display: grid"][style*="grid-template-columns: 1.4fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #root [style*="display: grid"][style*="gap: 20px"],
  #root [style*="display: grid"][style*="gap: 24px"],
  #root [style*="display: grid"][style*="gap: 28px"],
  #root [style*="display: grid"][style*="gap: 32px"],
  #root [style*="display:grid"][style*="gap: 20px"],
  #root [style*="display:grid"][style*="gap: 24px"],
  #root [style*="display:grid"][style*="gap: 28px"],
  #root [style*="display:grid"][style*="gap: 32px"] {
    gap: 12px !important;
  }

  #root [style*="display: flex"][style*="justify-content: space-between"],
  #root [style*="display:flex"][style*="justify-content: space-between"],
  #root [style*="display: flex"][style*="gap: 20px"],
  #root [style*="display: flex"][style*="gap: 24px"],
  #root [style*="display: flex"][style*="gap: 28px"],
  #root [style*="display: flex"][style*="gap: 32px"],
  #root [style*="display:flex"][style*="gap: 20px"],
  #root [style*="display:flex"][style*="gap: 24px"],
  #root [style*="display:flex"][style*="gap: 28px"],
  #root [style*="display:flex"][style*="gap: 32px"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .acsDrawer:not(.acsDrawer--open),
  .acsDrawerOverlay:not(.acsDrawerOverlay--open) {
    display: none !important;
  }

  .acsDrawer.acsDrawer--open {
    display: flex !important;
    right: 0 !important;
    left: auto !important;
    width: min(280px, 85dvw) !important;
    max-width: 85dvw !important;
    transform: none !important;
  }

  .acsDrawerOverlay.acsDrawerOverlay--open {
    display: block !important;
  }

  #root [style*="max-width: 520px"],
  #root [style*="max-width: 560px"],
  #root [style*="max-width: 600px"],
  #root [style*="max-width: 640px"],
  #root [style*="max-width: 700px"],
  #root [style*="max-width: 720px"],
  #root [style*="max-width: 800px"],
  #root [style*="max-width: 900px"],
  #root [style*="max-width: 960px"],
  #root [style*="max-width: 980px"],
  #root [style*="max-width: 1000px"],
  #root [style*="max-width: 1100px"],
  #root [style*="max-width: 1180px"],
  #root [style*="max-width: 1200px"] {
    width: 100% !important;
  }

  #root [style*="padding: 80px 24px"],
  #root [style*="padding: 72px 20px"],
  #root [style*="padding: 64px 24px"],
  #root [style*="padding: 48px 24px"],
  #root [style*="padding: 48px 20px"],
  #root [style*="padding: 40px 24px"],
  #root [style*="padding: 32px 24px"],
  #root [style*="padding: 32px 20px"],
  #root [style*="padding: 28px 20px"],
  #root [style*="padding: 24px 24px"],
  #root [style*="padding: 24px 20px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #root table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #root table[style*="min-width"],
  #root table[style*="minWidth"] {
    min-width: 0 !important;
  }

  #root .modalChoice,
  #root [role="dialog"],
  #root [style*="position: fixed"][style*="max-width"] {
    width: calc(100dvw - 24px) !important;
    max-width: calc(100dvw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }
}