/*
 * TOPページ専用のresponsive補正。
 * 既存の配置を維持しながら、画面幅ごとの文字階層と情報密度を
 * section単位で調整する。
 */
.homepage-hero .hero-process-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

@media (min-width: 1200px) {
  .homepage-hero h1 > span:first-child {
    font-size: 2.625rem !important;
    line-height: 1.3 !important;
  }

  .homepage-hero h1 > span:last-child {
    font-size: 4.5rem !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em !important;
  }
}

@media (max-width: 1199px) {
  .homepage-hero {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  .homepage-hero .lg\:col-span-5,
  .homepage-hero-scope {
    display: none !important;
  }

  .homepage-hero > .max-w-7xl > .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .homepage-hero .lg\:col-span-7 {
    max-width: 48rem;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .homepage-hero h1 > span:first-child {
    font-size: clamp(2rem, 3.4vw, 2.5rem) !important;
    line-height: 1.3 !important;
  }

  .homepage-hero h1 > span:last-child {
    font-size: clamp(3rem, 5.3vw, 4rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em !important;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  #header-container header nav,
  #header-container header nav + div {
    display: none !important;
  }

  #header-container header #mobile-menu-button {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  .homepage-main {
    line-break: strict;
    word-break: auto-phrase;
  }

  .homepage-main :where(p, h1, h2, h3, h4, li) {
    text-wrap: pretty;
  }

  .homepage-main :where(.whitespace-nowrap) {
    white-space: nowrap;
  }

  /* HERO */
  .homepage-hero {
    padding-top: 3rem !important;
    padding-bottom: 3.25rem !important;
  }

  .homepage-hero > .max-w-7xl > .grid {
    gap: 2.5rem !important;
  }

  .homepage-hero h1 {
    margin-bottom: 1.5rem !important;
  }

  .homepage-hero .hero-process-label {
    column-gap: 0.55rem !important;
    margin-bottom: 1rem !important;
    font-size: 0.625rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.12em !important;
  }

  .homepage-hero .hero-process-separator {
    color: #4cb78e;
  }

  .homepage-hero h1 > span:first-child {
    font-size: clamp(1.375rem, 6.2vw, 1.5rem) !important;
    line-height: 1.4 !important;
  }

  .homepage-hero h1 > span:last-child {
    font-size: clamp(2rem, 9.2vw, 2.25rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.035em !important;
  }

  .homepage-hero .hero-capabilities {
    margin-bottom: 0.375rem !important;
    font-size: 0.875rem !important;
    line-height: 1.85 !important;
  }

  .homepage-hero .hero-bridge-copy {
    margin-bottom: 1.75rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.9 !important;
  }

  .homepage-hero .flex.flex-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .homepage-hero .flex.flex-wrap > a {
    min-height: 3rem;
    padding: 0.75rem 1rem !important;
  }

  .homepage-hero .flex.flex-wrap > a:first-child {
    width: 100%;
  }

  .homepage-hero .flex.flex-wrap > a:last-child {
    justify-self: center;
    min-height: auto;
    padding: 0.5rem 0 !important;
    border: 0 !important;
    border-bottom: 2px solid #1c1c1c !important;
    background: transparent !important;
  }

  /* NEWS: date + category / title の2段にして各項目を圧縮 */
  #news-list > div {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    column-gap: 0.75rem !important;
    row-gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  #news-list > div > time {
    grid-column: 1;
    width: auto !important;
    align-self: center;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
  }

  #news-list > div > div {
    grid-column: 2;
    width: auto !important;
  }

  #news-list > div > div > span {
    width: auto !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.625rem !important;
    line-height: 1.3 !important;
  }

  #news-list > div > a {
    grid-column: 1 / -1;
    font-size: 0.75rem !important;
    line-height: 1.55 !important;
  }

  /* Shared section rhythm */
  #about,
  #reasons,
  #services,
  #flow,
  #cases,
  #contact {
    margin: 0 !important;
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  #reasons .text-center.mb-16,
  #services .text-center.mb-16,
  #flow .text-center.mb-16,
  #cases .text-center.mb-16,
  #contact .text-center.mb-16 {
    margin-bottom: 2.5rem !important;
  }

  #reasons .text-center.mb-16 > p:last-child,
  #services .text-center.mb-16 > p:last-child,
  #flow .text-center.mb-16 > p:last-child,
  #cases .text-center.mb-16 > p:last-child,
  #contact .text-center.mb-16 > p:last-child {
    margin-top: 1.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.9 !important;
  }

  /* ABOUT */
  #about .mb-8.mt-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 2.5rem !important;
  }

  #about .mb-8.mt-4 h3 {
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.75rem !important;
    font-size: 1.375rem !important;
    line-height: 1.5 !important;
  }

  #about .mb-8.mt-4 p {
    font-size: 0.875rem !important;
    line-height: 1.95 !important;
  }

  #about .business-summary {
    margin-top: 0 !important;
    margin-bottom: 3rem !important;
    padding: 1.5rem !important;
    box-shadow: 6px 6px 0 rgba(28, 28, 28, 1) !important;
  }

  #about .business-summary > h3 {
    margin-bottom: 1.75rem !important;
  }

  #about .business-summary > .grid {
    gap: 1.5rem !important;
  }

  #about .business-summary h4 {
    margin-bottom: 0.625rem !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  #about .business-summary p {
    padding-left: 1.375rem !important;
    font-size: 0.875rem !important;
    line-height: 1.8 !important;
  }

  /* APPROACH */
  #reasons .grid {
    gap: 1rem !important;
    margin-top: 0 !important;
  }

  #reasons .grid > div {
    padding: 1.5rem !important;
  }

  #reasons .grid > div > .text-5xl {
    margin-bottom: 1rem !important;
  }

  #reasons .grid h3 {
    margin-bottom: 0.875rem !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  #reasons .grid p {
    font-size: 0.875rem !important;
    line-height: 1.9 !important;
  }

  /* SERVICES */
  #services > .max-w-7xl > .grid {
    gap: 1.5rem !important;
  }

  #services > .max-w-7xl > .grid > a {
    box-shadow: 6px 6px 0 rgba(28, 28, 28, 1) !important;
  }

  #services > .max-w-7xl > .grid > a > .p-8 {
    padding: 1.5rem !important;
    padding-top: 1.75rem !important;
  }

  #services .p-8 > .mb-4 {
    margin-bottom: 1.125rem !important;
    padding-bottom: 0.875rem !important;
  }

  #services .p-8 > h3 {
    margin-bottom: 1.125rem !important;
    font-size: 1.125rem !important;
    line-height: 1.7 !important;
  }

  #services .p-8 > p {
    margin-bottom: 1.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.9 !important;
  }

  #services ul.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem !important;
  }

  #services li > div {
    margin-bottom: 0.375rem !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
  }

  #services li > p {
    font-size: 0.8125rem !important;
    line-height: 1.75 !important;
  }

  /* FLOW */
  #flow > .max-w-7xl > .grid {
    gap: 1.25rem !important;
  }

  #flow .bg-white.border-\[3px\] {
    height: auto !important;
    padding: 1.5rem !important;
    padding-top: 1.75rem !important;
    box-shadow: 5px 5px 0 rgba(28, 28, 28, 1) !important;
  }

  #flow .bg-white.border-\[3px\] h3 {
    margin-bottom: 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  #flow .bg-white.border-\[3px\] p {
    flex: none !important;
    margin-bottom: 1rem !important;
    font-size: 0.875rem !important;
    line-height: 1.9 !important;
  }

  #flow .bg-white.border-\[3px\] ul.mt-auto {
    margin-top: 0 !important;
  }

  #flow > .max-w-7xl > .grid > .mt-8 {
    margin-top: 0 !important;
  }

  /* CASES */
  #cases > .max-w-7xl > .grid {
    gap: 1.5rem !important;
  }

  #cases > .max-w-7xl > .grid > a > div {
    box-shadow: 6px 6px 0 rgba(28, 28, 28, 1) !important;
  }

  #cases > .max-w-7xl > .grid > a > div > .p-8 {
    padding: 1.25rem !important;
  }

  #cases .p-8 > .mb-6 {
    margin-bottom: 0.875rem !important;
  }

  #cases .p-8 > h3 {
    margin-bottom: 1rem !important;
    font-size: 1.125rem !important;
    line-height: 1.65 !important;
  }

  #cases .p-8 > .bg-gray-50 {
    padding: 1rem !important;
  }

  #cases .p-8 > .bg-gray-50.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.875rem !important;
  }

  #cases .p-8 > .bg-gray-50 p {
    font-size: 0.8125rem !important;
    line-height: 1.8 !important;
  }

  /* TOPでは課題を要約として残し、施策・結果は既存の事例詳細へ委ねる。 */
  #cases .p-8 > .bg-gray-50.space-y-5 > .flex:nth-child(n + 2) {
    display: none !important;
  }

  /* CONTACT */
  #contact > .max-w-4xl > .grid {
    gap: 2rem !important;
  }

  #contact .md\:col-span-5 > .bg-white {
    padding: 1.25rem !important;
    box-shadow: 5px 5px 0 rgba(28, 28, 28, 1) !important;
  }

  #contact .md\:col-span-7 {
    margin-top: 0 !important;
    padding: 1.25rem !important;
    box-shadow: 6px 6px 0 rgba(28, 28, 28, 1) !important;
  }

  #contact-form.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem !important;
  }

  #contact-form input,
  #contact-form textarea {
    padding: 0.75rem 0.875rem !important;
    font-size: 1rem !important;
  }

  #contact-form textarea {
    min-height: 7.5rem !important;
  }
}

@media (max-width: 359px) {
  #services .p-8 > h3 {
    font-size: 0.9375rem !important;
    letter-spacing: -0.01em;
  }
}