@media (max-width: 900px) {
  html,
  body,
  #root {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    padding-bottom: 56px;
  }

  .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  header > div {
    height: 64px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  header {
    background: rgba(254, 252, 247, 0.96) !important;
    border-bottom: 1px solid rgba(173, 100, 78, 0.14) !important;
    box-shadow: 0 8px 28px rgba(34, 24, 18, 0.07) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  header img[alt="おひとりさまのよりどころ福岡"] {
    width: 158px !important;
    max-width: 48vw !important;
    filter: none !important;
  }

  header button,
  header a {
    color: #5d3f28 !important;
  }

  div[style*="top: 76px"] {
    top: 64px !important;
  }

  section {
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }

  section > div,
  main > div,
  div[style*="padding: 0px 2rem"],
  div[style*="padding: 0 2rem"] {
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
    max-width: 100% !important;
  }

  div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  div[style*="display: grid"] {
    gap: 1.35rem !important;
    max-width: 100% !important;
  }

  div[style*="padding: 2.5rem"],
  div[style*="padding: 3rem"],
  div[style*="padding: 3.5rem"] {
    padding: 1.45rem !important;
  }

  h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  h2 {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }

  h3 {
    line-height: 1.55 !important;
  }

  p,
  li,
  span {
    overflow-wrap: anywhere;
  }

  * {
    box-sizing: border-box !important;
  }

  div,
  section,
  article,
  aside,
  main,
  header,
  footer {
    max-width: 100% !important;
  }

  div[style*="min-width"] {
    min-width: 0 !important;
  }

  [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  h1,
  h1 * {
    font-size: inherit !important;
    white-space: normal !important;
  }

  section[style*="min-height"],
  div[style*="min-height: 100vh"],
  div[style*="min-height: 100svh"],
  div[style*="height: 100vh"],
  div[style*="height: 100svh"] {
    min-height: auto !important;
    height: auto !important;
  }

  section img {
    max-width: 100% !important;
  }

  section img[style*="object-fit: contain"] {
    width: min(76vw, 240px) !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  section img[style*="object-fit: cover"] {
    width: 100% !important;
    max-height: 320px !important;
  }

  div[style*="width: 240px"],
  div[style*="width: 220px"],
  div[style*="width: 200px"] {
    width: 100% !important;
  }

  a[style*="min-width: 200px"],
  a[href*="lin.ee"],
  a[href^="tel:"],
  .btn-primary,
  .btn-line,
  .btn-ghost {
    width: min(100%, calc(100vw - 80px)) !important;
    max-width: 300px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  main > section:first-child,
  main > div:first-child,
  #root > div > section:first-child,
  #root > div > div:first-child {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  main > div > section:first-child {
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    align-items: stretch !important;
    margin-top: -2.4rem !important;
    padding: 2.4rem 0 0 !important;
    overflow: hidden !important;
    background-position: center top !important;
  }

  main > div > section:first-child > .container {
    padding-top: 0.35rem !important;
    padding-bottom: 1.35rem !important;
    margin-top: -0.85rem !important;
  }

  main > div > section:first-child h1 {
    font-size: clamp(1.95rem, 8.15vw, 2.2rem) !important;
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
    margin: 0.35rem 0 0.75rem !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    max-width: 100% !important;
  }

  main > div > section:first-child h1 * {
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  main > div > section:first-child p {
    font-size: 0.94rem !important;
    line-height: 1.78 !important;
    max-width: 23em !important;
    margin-bottom: 0 !important;
  }

  main > div > section:first-child div[style*="margin-top: 2rem"] {
    margin-top: 1rem !important;
  }

  main > div > section:first-child div[style*="grid-template-columns: repeat(3, 1fr)"] {
    display: none !important;
  }

  main > div > section:first-child a[href*="lin.ee"],
  main > div > section:first-child a[href^="tel:"] {
    width: 100% !important;
    max-width: 354px !important;
    min-height: 52px !important;
    border-radius: 999px !important;
  }

  main > div > section:first-child + section {
    margin-top: 0 !important;
    padding: 1.15rem 0 2.25rem !important;
    background: linear-gradient(180deg, #fbf6ea 0%, #fffaf3 100%) !important;
  }

  main > div > section:first-child + section > .container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.72rem !important;
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }

  main > div > section:first-child + section > .container::before {
    content: "まず、どの相談か選べます";
    grid-column: 1 / -1;
    display: block;
    margin: 0 0 0.15rem;
    font-family: "Noto Sans JP", "Hiragino Maru Gothic ProN", sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #8f5a34;
  }

  main > div > section:first-child + section a {
    position: relative !important;
    min-height: 106px !important;
    padding: 1rem 0.9rem 0.9rem !important;
    border: 1px solid rgba(173, 100, 78, 0.18) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 8px 24px rgba(34, 24, 18, 0.06) !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  main > div > section:first-child + section a::after {
    content: "";
    position: absolute;
    right: 0.9rem;
    bottom: 0.85rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: rgba(173, 100, 78, 0.12);
  }

  main > div > section:first-child + section a span:first-child {
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    color: #3d2a1d !important;
  }

  main > div > section:first-child + section a span:nth-child(2) {
    font-size: 0.76rem !important;
    line-height: 1.5 !important;
    color: #765b48 !important;
    margin-top: 0.35rem !important;
  }

  div[style*="display: flex"][style*="justify-content: center"][style*="flex-wrap: wrap"] {
    gap: 0.85rem !important;
  }

  div[style*="grid-template-columns: 130px 1fr"],
  div[style*="grid-template-columns: 72px 1fr"] {
    gap: 0.75rem !important;
  }
}