/* v9 — mobile typography finishing pass
   Goal: preserve authored semantic line breaks, avoid accidental Japanese wrapping,
   and keep hierarchy calm on narrow screens without changing desktop design. */
.sp-break{display:none}

@media (max-width:620px){
  /* Japanese line-breaking defaults: permit natural kinsoku wrapping where a line
     is not explicitly authored, but balance short display headings. */
  .hero-title,
  .section h2,
  .projects-head h2,
  .page-title,
  .section-title,
  .cta-inner h2,
  .case-client,
  .case-lead,
  .case-section h2,
  .next-case h2,
  .attitude h3,
  .support-plan h3,
  .price-row h3,
  .privacy-copy h2{
    word-break:normal!important;
    overflow-wrap:normal!important;
    line-break:strict;
    text-wrap:balance;
  }

  /* TOP HERO: two intentional lines on phones.
     想いを、一緒に / 形にする。 */
  .hero-title{
    font-size:clamp(30px,8.5vw,35px)!important;
    line-height:1.38!important;
    letter-spacing:-.04em!important;
    max-width:100%!important;
  }
  .hero-title .sp-break{display:block!important}
  .hero-title .hero-primary,
  .hero-title .hero-accent,
  .hero-title .hero-rest{white-space:nowrap}
  .hero-lead{
    max-width:24em!important;
    font-size:12.5px!important;
    line-height:1.9!important;
  }
  .hero-lead br{display:block!important}

  /* TOP section headings: authored breaks are semantic and should survive mobile. */
  .section h2,
  .projects-head h2,
  .contact h2{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(21px,6vw,25px)!important;
    line-height:1.52!important;
    letter-spacing:-.02em!important;
  }
  .section h2 br,
  .projects-head h2 br,
  .contact h2 br{display:block!important}
  .projects-head>p:last-child br{display:block!important}

  /* Subpage hero: keep the deliberately authored phrase boundaries. */
  .page-title{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(25px,7.2vw,30px)!important;
    line-height:1.48!important;
    letter-spacing:-.025em!important;
  }
  .page-title br{display:block!important}
  .page-title .sp-break{display:block!important}
  .page-lead{
    width:100%!important;
    max-width:27em!important;
    font-size:12.3px!important;
    line-height:1.9!important;
  }
  .page-lead br{display:block!important}

  /* Subpage section titles. Restore meaningful HTML breaks instead of allowing
     the browser to create arbitrary phrase boundaries. */
  .section-title{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(20.5px,5.9vw,24px)!important;
    line-height:1.54!important;
    letter-spacing:-.018em!important;
  }
  .section-title br{display:block!important}
  .section-title .sp-break{display:block!important}
  .section-title.mobile-join br{display:none!important}
  .section-title.mobile-join{font-size:clamp(19px,5.45vw,22px)!important}

  /* CTA copy is intentionally quieter so long Japanese phrases stay in their
     authored two-line rhythm rather than breaking into 3–4 accidental lines. */
  .cta-inner h2{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(19px,5.45vw,22px)!important;
    line-height:1.58!important;
    letter-spacing:-.015em!important;
  }
  .cta-inner h2 br{display:block!important}

  /* Detail pages: dynamic titles cannot carry authored <br>, so let Japanese
     wrap naturally and give it the full content width. */
  .case-client{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(25px,7vw,31px)!important;
    line-height:1.42!important;
  }
  .case-lead{
    width:100%!important;
    max-width:19em!important;
    font-size:clamp(17px,4.8vw,21px)!important;
    line-height:1.62!important;
    text-wrap:pretty;
  }
  .case-section h2{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(18.5px,5.15vw,22px)!important;
    line-height:1.62!important;
    text-wrap:pretty;
  }
  .next-case h2{
    max-width:100%!important;
    font-size:20px!important;
    line-height:1.5!important;
  }

  /* Secondary headings: do not create oversized multi-line blocks. */
  .attitude h3{
    font-size:15.5px!important;
    line-height:1.72!important;
    text-wrap:pretty;
  }
  .support-plan h3,
  .price-row h3{
    font-size:16px!important;
    line-height:1.65!important;
    text-wrap:pretty;
  }
  .privacy-copy h2{
    font-size:18px!important;
    line-height:1.55!important;
  }

  /* CONTACT's first section is a long sentence; slightly quieter than the
     generic section-title keeps it as the intended two lines at common widths. */
  .contact-layout{margin-top:28px!important}
  .contact .section-title,
  body:has(.contact-form) .section-title{
    font-size:clamp(19px,5.35vw,21.5px)!important;
  }
}

/* Narrow phones need a final small reduction; content and break positions stay
   identical, avoiding device-specific editorial changes. */
@media (max-width:360px){
  .hero-title{font-size:29px!important}
  .section h2,
  .projects-head h2,
  .contact h2{font-size:20.5px!important}
  .page-title{font-size:23.5px!important}
  .section-title{font-size:19.5px!important}
  .section-title.mobile-join{font-size:18.5px!important}
  .cta-inner h2{font-size:18.5px!important}
  .case-client{font-size:24px!important}
  .case-lead{font-size:17px!important}
  .case-section h2{font-size:18px!important}
}

/* WORKS DETAIL final adjustments — CMS image fit / RESULT typography */
.case-result-section > h2{
  font-size:clamp(22px,2.35vw,32px)!important;
  line-height:1.5!important;
  letter-spacing:-.025em!important;
}
.case-result-section .result-item > strong{
  font-size:clamp(20px,1.9vw,27px)!important;
  line-height:1.42!important;
}

@media (max-width:620px){
  /* The CMS screenshot is 16:10. Let the image determine the box height;
     never retain the legacy 4:3 mobile preview height behind it. */
  #case-hero-visual.case-visual-box.has-cms-image{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:hidden!important;
    line-height:0!important;
    font-size:0!important;
  }
  #case-hero-visual.case-visual-box.has-cms-image > img{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain!important;
    object-position:center top!important;
    vertical-align:top!important;
  }
  .case-result-section > h2{
    font-size:17.5px!important;
    line-height:1.6!important;
  }
  .case-result-section .result-item > strong{
    font-size:19px!important;
    line-height:1.5!important;
  }
}