/* Consolidated responsive layer — 2026-07-21
   Loaded last on every page. Desktop styles remain untouched. */

@media (max-width: 1024px) {
  html,
body { max-width: 100%; overflow-x: hidden !important; }
  *,
*::before,
*::after { box-sizing: border-box; }
  img,
svg,
video,
iframe { max-width: 100%; height: auto; }

  .inner,
.section-wrap,
.network-wrap,
.pg-section,
.detail-section,
.case-study,
.lila-section,
.cta-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero,
.top-hero,
.carousel-hero { width: 100% !important; min-width: 0 !important; }
  .hero-content,
.pg-header { max-width: 100% !important; min-width: 0 !important; }

  /* Common multi-column layouts */
  .values-grid,
.board-grid,
.benefits-grid,
.works-index-grid,
.works-archive-grid,
.case-grid,
.lila-info-grid,
.lila-products,
.lila-services {
    min-width: 0 !important;
  }

  /* Footer tablet: brand first, three information columns below. */

}

@media (max-width: 768px) {
  :root { --pad-x: 20px !important; }

  body { font-size: 14px; }

  /* Common horizontal padding and overflow protection */
  .inner,
.section-wrap,
.network-wrap,
.pg-section,
.detail-section,
.case-study,
.lila-section,
.contact-wrap,
.recruit-intro,
.cta-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .breadcrumb { padding-left: 20px !important; padding-right: 20px !important; }
  .hero-content { padding-left: 20px !important; padding-right: 20px !important; }

  /* One shared mobile content edge on every page. */
  .top-news,
  .top-service,
  .top-works,
  .top-numbers,
  .service-overview,
  .detail-section,
  .wd-section,
  .wd-gallery-section,
  .news-detail-section,
  .news-related-section,
  .office-page-section,
  .board-section,
  .roadmap-wrap,
  .overview-wrap {
    padding-left:20px !important;
    padding-right:20px !important;
  }

  /* Shared mobile section-heading scale. */
  .section-title,
  .sec-title,
  .pg-title,
  .detail-title,
  .wd-section-title,
  .wd-gallery-title,
  .kpi-section-title,
  .recruit-detail-title,
  .top-page .top-sec-title {
    font-size:26px !important;
    line-height:1.45 !important;
    letter-spacing:.06em !important;
  }

  /* Top hero */
  .top-page .carousel-hero,
.top-page .top-hero {
    min-height: 720px !important;
    height: 100svh !important;
    max-height: 860px !important;
  }
  .top-page .carousel-hero .top-hero-content {
    left: 20px !important;
    right: 20px !important;
    bottom: 88px !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }
  .top-page .top-hero-eyebrow { font-size: 9px !important; letter-spacing: .22em !important; }
  .top-page .top-hero-catch {
    font-size: clamp(38px, 12vw, 58px) !important;
    line-height: 1.45 !important;
    letter-spacing: .02em !important;
  }
  .top-page .top-hero-btns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .top-page .top-hero-btns a {
    min-width: 0 !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
  .top-page .ch-right-col { display: none !important; }
  .top-page .ch-nav { left: 20px !important; bottom: 32px !important; }
  .top-page .ch-caption-wrap,
.top-page .ch-progress-wrap,
.top-page .scroll-indicator { display: none !important; }

  /* Page heroes */
  .hero { min-height: 360px !important; height: 52svh !important; max-height: 520px !important; }
  .hero-title { font-size: clamp(38px, 12vw, 64px) !important; line-height: 1.15 !important; }
  .hero-subtitle { max-width: 100% !important; }
  .pg-header { padding-top: 56px !important; padding-bottom: 36px !important; }
  .pg-title { font-size: 26px !important; line-height:1.45 !important; letter-spacing:.06em !important; }

  /* One-column content layouts */
  .values-grid,
.board-grid,
.benefits-grid,
.works-index-grid,
.works-archive-grid,
.case-grid,
.lila-info-grid,
.lila-products,
.lila-services,
.ceo-wrap,
.recruit-intro,
.contact-wrap,
.detail-header,
.detail-visual,
.overview-related {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 24px !important;
  }
  .span2 { grid-column: auto !important; }

  /* Keep background-based dividers thin when these grids stack on mobile. */
  .board-grid {
    gap: 1px !important;
  }
  .values-grid,
  .benefits-grid,
  .works-index-grid,
  .lila-info-grid,
  .lila-products,
  .lila-services {
    gap: 2px !important;
  }

  .work-tile,
.benefit-item,
.board-card,
.case-project,
.lila-product,
.lila-service-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
  }
  .work-tile:hover,
.benefit-item:hover,
.board-card:hover {
    transform: none !important;
  }

  /* Tables and long rows */
  .overview-table { display: block !important; width: 100% !important; overflow-x: auto !important; }
  .news-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .news-row-date,
.news-row-cat { grid-column: 1 !important; }
  .news-row-body { grid-column: 1 !important; min-width: 0 !important; }
  .news-row-arrow { grid-column: 2 !important; grid-row: 1 / span 3 !important; align-self: center !important; }
  .news-row-title { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

  .tag-filter {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding-bottom: 0 !important;
  }
  .tag-btn {
    flex: 1 1 128px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  /* Forms */
  .contact-form,
.form-input,
.form-select,
.form-textarea,
.form-submit {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* CTA */
  .cta-section { margin: 48px 0 0 !important; padding: 44px 20px !important; }
  .cta-inner { display: block !important; }
  .cta-btn { display: inline-flex !important; margin-top: 24px !important; max-width: 100% !important; }

  /* Footer mobile */

  .back-to-top { right: 14px !important; bottom: 14px !important; width: 44px !important; height: 44px !important; }
}

@media (max-width: 420px) {

  .top-page .top-hero-btns { grid-template-columns: 1fr !important; }
  .top-page .carousel-hero .top-hero-content { bottom: 74px !important; }
}

/* ============================================================
   Top page mobile section headings and CTA alignment
   NEWS / SERVICE / WORKS share the same hierarchy.
   The pale English label and VIEW ALL remain one stacked,
   right-aligned group at every width.
   ============================================================ */
@media (max-width: 768px) {
  .top-page .top-news,
.top-page .top-service,
.top-page .top-works {
    overflow: hidden !important;
  }

  .top-page .top-section-header {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 184px !important;
    margin: 0 0 38px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .top-page .top-section-header-left {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .top-page .top-sec-label {
    max-width: 170px !important;
    margin-bottom: 26px !important;
    font-size: 10px !important;
    line-height: 1.9 !important;
    letter-spacing: .34em !important;
  }

  .top-page .top-sec-title {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 26px !important;
    line-height: 1.45 !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .top-page .top-section-header-right {
    position: absolute !important;
    z-index: 2 !important;
    top: 78px !important;
    right: 0 !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .top-page .top-sec-en {
    position: static !important;
    z-index: auto !important;
    display: block !important;
    width: auto !important;
    max-width: calc(100vw - 40px) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(40px, 11vw, 56px) !important;
    line-height: .92 !important;
    letter-spacing: .03em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-align: right !important;
    color: rgba(10,10,10,.045) !important;
    pointer-events: none !important;
    transform: none !important;
  }

  .top-page .view-all-link {
    position: static !important;
    z-index: auto !important;
    display: inline-flex !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 6px 0 0 !important;
    padding: 0 0 4px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: .26em !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* Recruit and Contact blocks share the same vertical rhythm. */
  .top-page .recruit-band,
.top-page .cta-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 58px 20px !important;
  }

  .top-page .recruit-band-inner,
.top-page .cta-inner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .top-page .recruit-band-inner::after,
.top-page .cta-inner::after {
    display: none !important;
  }

  .top-page .recruit-copy,
.top-page .cta-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.55 !important;
    letter-spacing: .08em !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .top-page .recruit-sub,
.top-page .cta-sub {
    width: 100% !important;
    max-width: 100% !important;
    margin: 22px 0 0 !important;
    font-size: 14px !important;
    line-height: 2 !important;
    letter-spacing: .05em !important;
  }

  .top-page .recruit-btn,
.top-page .cta-btn {
    display: inline-flex !important;
    width: auto !important;
    min-width: 210px !important;
    max-width: 100% !important;
    justify-content: center !important;
    margin: 30px 0 0 !important;
    padding: 20px 30px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  .top-page .top-section-header { min-height: 170px !important; }
  .top-page .top-sec-label { margin-bottom: 20px !important; }
  .top-page .top-section-header-right { top: 72px !important; }
  .top-page .top-sec-en { font-size: clamp(36px, 10vw, 48px) !important; }
  .top-page .view-all-link { width: 110px !important; min-width: 110px !important; max-width: 110px !important; margin-top: 6px !important; }
  .top-page .recruit-btn,
.top-page .cta-btn { width: 100% !important; }
}


/* 2026-07-21 rev06: unified top-section heading rhythm */
.top-page .top-news > .top-section-header,
.top-page .top-service > .top-section-header,
.top-page .top-works > .top-section-header {
  align-items: flex-start !important;
}
.top-page .top-news .top-sec-title,
.top-page .top-service .top-sec-title,
.top-page .top-works .top-sec-title {
  line-height: 1.35 !important;
  min-height: 38px !important;
}
.top-page .top-news .top-sec-en,
.top-page .top-service .top-sec-en,
.top-page .top-works .top-sec-en {
  line-height: 1 !important;
}
@media (max-width:768px){
  .top-page .top-news .top-section-header-right,
.top-page .top-service .top-section-header-right,
.top-page .top-works .top-section-header-right { top:78px !important; }
  .top-page .top-news .top-sec-title,
.top-page .top-service .top-sec-title,
.top-page .top-works .top-sec-title { min-height:38px !important; }
}
@media (max-width:420px){
  .top-page .top-news .top-section-header-right,
.top-page .top-service .top-section-header-right,
.top-page .top-works .top-section-header-right { top:72px !important; }
}

/* ============================================================
   Service page responsive consolidation — 2026-07-23
   Desktop presentation is preserved; tablet and mobile layouts
   use intrinsic widths and single-column reading order.
   ============================================================ */
@media (max-width: 1024px) {
  .service-overview {
    overflow: hidden !important;
    padding-top: 88px !important;
    padding-bottom: 64px !important;
  }
  .service-overview .section-en {
    top: 46px !important;
    max-width: calc(100vw - 40px) !important;
    font-size: clamp(44px, 9vw, 68px) !important;
    overflow: hidden !important;
  }
  .service-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: auto !important;
    margin-left: var(--pad-x) !important;
    margin-right: var(--pad-x) !important;
  }
  .service-card,
  .card-body,
  .detail-header > *,
  .service-item,
  .case-grid > *,
  .lila-header > *,
  .lila-service-item,
  .lila-product,
  .lila-relation > * {
    min-width: 0 !important;
  }
  .detail-section {
    padding-top: 64px !important;
  }
  .detail-header {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    margin-bottom: 56px !important;
    padding-bottom: 38px !important;
  }
  .detail-visual {
    grid-template-columns: 1fr !important;
    margin-top: -18px !important;
  }
  .detail-visual-note {
    padding: 28px !important;
  }
  .kpi-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .kpi-item { min-width: 0 !important; }
  .service-items { grid-template-columns: 1fr !important; }
  .case-study { overflow: hidden !important; }
  #service-03 .case-fukuju-media {
    max-width: 100% !important;
    align-items: center !important;
  }
  .lila-info-grid,
  .lila-services,
  .lila-products,
  .lila-relation {
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  .service-overview {
    padding: 68px 20px 48px !important;
  }
  .service-overview .section-en {
    top: 32px !important;
    font-size: clamp(38px, 13vw, 54px) !important;
    letter-spacing: .05em !important;
  }
  .service-overview .section-title {
    font-size: 26px !important;
    line-height: 1.45 !important;
  }
  .service-overview .section-desc {
    margin-bottom: 40px !important;
    font-size: 13px !important;
    line-height: 1.9 !important;
  }
  .service-cards {
    grid-template-columns: 1fr !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  .service-card { width: 100% !important; }
  .card-img { height: clamp(210px, 64vw, 280px) !important; }
  .card-body {
    min-height: 0 !important;
    padding: 26px 24px 28px !important;
  }
  .card-en {
    line-height: 1.8 !important;
    overflow-wrap: anywhere !important;
  }
  .card-title {
    font-size: 16px !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  .detail-section {
    padding: 48px 20px 72px !important;
    overflow: hidden !important;
  }
  .detail-header {
    gap: 22px !important;
    margin-bottom: 42px !important;
    padding-bottom: 30px !important;
  }
  .detail-num {
    font-size: 84px !important;
    margin-bottom: -12px !important;
  }
  .detail-title {
    font-size: 26px !important;
    line-height:1.45 !important;
    letter-spacing:.06em !important;
    word-break: keep-all !important;
  }
  .detail-title-en {
    font-size: 11px !important;
    line-height: 1.8 !important;
    letter-spacing: .18em !important;
    overflow-wrap: anywhere !important;
  }
  .detail-lead {
    font-size: 13px !important;
    line-height: 2 !important;
  }
  .detail-lead br { display: none !important; }
  .detail-visual {
    margin: 0 auto 52px !important;
  }
  .detail-visual-img { min-height: 230px !important; }
  .detail-visual-note { padding: 24px !important; }
  .detail-visual-note p { font-size: 13px !important; }
  .training-link-btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    line-height: 1.7 !important;
    text-align: center !important;
  }
  .kpi-section { margin-bottom: 52px !important; }
  .kpi-section-header {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .kpi-bar { grid-template-columns: 1fr 1fr !important; }
  .kpi-item { padding: 22px 12px !important; }
  .kpi-num { font-size: 30px !important; }
  .kpi-title-part {
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
  .kpi-label {
    line-height: 1.6 !important;
    overflow-wrap: anywhere !important;
  }
  .service-items { margin-bottom: 52px !important; }
  .service-item { padding: 30px 24px !important; }
  .item-title {
    font-size: 17px !important;
    line-height: 1.7 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  .item-text { font-size: 12px !important; line-height: 2 !important; }
  .item-tags,
  .case-tags { gap: 7px !important; }
  .item-tag,
  .case-tag { max-width: 100% !important; }
  .case-study { padding: 30px 24px !important; }
  .case-study::before {
    top: 20px !important;
    right: 12px !important;
    font-size: 48px !important;
  }
  .case-project {
    font-size: 18px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }
  .case-location {
    line-height: 1.8 !important;
    margin-bottom: 28px !important;
  }
  #service-03 .case-fukuju-media {
    display: block !important;
    width: 100% !important;
    margin: 20px 0 28px !important;
  }
  #service-03 .case-fukuju-media > img {
    width: min(150px, 55%) !important;
    margin-bottom: 16px !important;
  }
  #service-03 .case-fukuju-media .fukuju-media-preview {
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  #service-03 .case-fukuju-media figure { min-width: 0 !important; }
  #service-03 .case-fukuju-media figure img {
    height: clamp(92px, 27vw, 120px) !important;
    max-width: 100% !important;
  }
  .case-stats--single {
    width: 100% !important;
    min-width: 0 !important;
  }
  .stat-num,
  .stat-rank { font-size: 36px !important; }
  .case-grid { gap: 28px !important; }
  .case-points li { padding-left: 16px !important; }
  .lila-header {
    padding: 30px 24px !important;
    gap: 26px !important;
  }
  .lila-info-grid { grid-template-columns: 1fr !important; }
  .lila-info-item {
    grid-column: auto !important;
    padding: 18px 20px !important;
  }
  .lila-link-btn {
    max-width: 100% !important;
    padding: 13px 20px !important;
  }
  .lila-service-item { padding: 28px 24px 32px !important; }
  .lila-product { padding: 26px 24px 30px !important; }
  .lila-product--swallow .lila-product-name {
    font-size: 19px !important;
    letter-spacing: .13em !important;
    overflow-wrap: anywhere !important;
  }
  .lila-product--swallow .lila-product-text {
    padding: 14px !important;
  }
  .lila-relation {
    padding: 28px 24px !important;
    gap: 22px !important;
  }
  .muni-grid { grid-template-columns: 1fr !important; }
  .pdf-download-inner,
  .pdf-download-left,
  .pdf-download-actions {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .pdf-preview-stack {
    width: min(100%, 280px) !important;
    max-width: 280px !important;
  }
  .pdf-download-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}