/* =========================================================
   HIT IT事業部 - Responsive compatibility layer
   Purpose:
   - common iPhone / Android phone widths
   - portrait + landscape phone layouts
   - iOS safe areas / dynamic browser chrome
   - touch accessibility and overflow prevention

   Loaded last so approved desktop design remains untouched.
   ========================================================= */

:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip;
}
body{
  min-width:320px;
  overflow-x:hidden;
}
img,svg,video{max-width:100%}
button,a{
  -webkit-tap-highlight-color:rgba(7,27,54,.12);
  touch-action:manipulation;
}
button{color:inherit}

/* Prevent long labels or URLs from creating document-level overflow. */
p,li,h1,h2,h3,h4,a,span,strong{
  overflow-wrap:break-word;
}


@media(max-width:1240px){
  body.nav-open{overflow:hidden!important}
}

/* Smartphone layout includes normal portrait phones and phone-like landscape. */
@media (max-width:760px),
       (orientation:landscape) and (max-width:960px) and (max-height:560px){
  :root{
    --mobile-header-base:70px;
    --mobile-header-h:calc(var(--mobile-header-base) + var(--safe-top));
    --mobile-rail-h:clamp(136px,21svh,160px);
    --hit-header-h:var(--mobile-header-h);
  }

  html{scroll-padding-top:calc(var(--mobile-header-h) + 10px)}
  body.nav-open{overflow:hidden!important}

  .container{
    width:min(calc(100% - 28px),var(--max))!important;
  }

  /* Opening animation: current desktop row is wider than 320px. */
  .intro{
    padding:
      calc(12px + var(--safe-top))
      calc(12px + var(--safe-right))
      calc(12px + var(--safe-bottom))
      calc(12px + var(--safe-left));
  }
  .skip{
    top:calc(12px + var(--safe-top))!important;
    right:calc(12px + var(--safe-right))!important;
    min-width:64px;
    min-height:40px;
    display:grid;
    place-items:center;
  }
  .intro-stage{
    width:100%!important;
    height:min(76svh,560px)!important;
  }
  .brand-row{
    flex-direction:column!important;
    gap:14px!important;
    padding-inline:8px;
  }
  .handmark{width:clamp(88px,28vw,116px)!important}
  .word-stage{
    width:min(82vw,310px)!important;
    height:clamp(72px,22vw,96px)!important;
    flex:0 1 auto!important;
  }
  .division-word{width:min(76vw,286px)!important}
  .intro-plate{width:min(68vw,310px)!important;max-height:58svh!important}
  .intro-caption{
    left:12px!important;
    right:12px!important;
    bottom:1svh!important;
    width:auto!important;
    transform:none!important;
    text-align:center;
    white-space:normal!important;
    font-size:.56rem!important;
    line-height:1.55;
    letter-spacing:.12em!important;
  }

  /* Header / drawer: notch-safe and scrollable on short landscape screens. */
  .header.header-console.header-reference{
    top:0!important;
    height:var(--mobile-header-h)!important;
    min-height:var(--mobile-header-h)!important;
    padding-top:var(--safe-top)!important;
    grid-template-columns:minmax(0,1fr) 64px!important;
  }
  .header-reference__brand-zone,
  .header-reference .brand-console,
  .header-reference .menu-console{
    height:var(--mobile-header-base)!important;
    min-height:var(--mobile-header-base)!important;
  }
  .header-reference__brand-zone{
    min-width:0!important;
    grid-column:1!important;
    grid-row:1!important;
  }
  .header-console__signal{display:none!important}
  .header-reference .brand-console{
    min-width:0!important;
    width:100%!important;
    padding-left:max(10px,var(--safe-left))!important;
    padding-right:10px!important;
  }
  .header-reference .brand-console__logo{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  .header-reference .brand-console__logo img{
    width:auto!important;
    max-width:min(100%,220px)!important;
    height:44px!important;
    max-height:44px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .header.header-console.header-reference .menu.menu-console{
    display:flex!important;
    grid-column:2!important;
    grid-row:1!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    align-items:center!important;
    justify-content:center!important;
    width:64px!important;
    min-width:64px!important;
    padding-right:var(--safe-right)!important;
  }
  .header.header-console.header-reference .nav.nav-console{
    position:fixed!important;
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    background:#06182f!important;
    transform:translateX(102%)!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .28s ease,visibility 0s linear .28s!important;
  }
  .header.header-console.header-reference .nav.nav-console.open{
    transform:translateX(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:transform .28s ease,visibility 0s!important;
  }
  .header.header-console.header-reference .nav.nav-console,
  .header.header-console.header-reference .nav.nav-console.open{
    top:var(--mobile-header-h)!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:min(88vw,360px)!important;
    max-height:calc(100dvh - var(--mobile-header-h))!important;
    padding:
      16px
      calc(14px + var(--safe-right))
      calc(16px + var(--safe-bottom))
      14px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .header.header-console.header-reference .nav.nav-console > a,
  .header.header-console.header-reference .nav.nav-console.open > a,
  .header.header-console.header-reference .nav.nav-console.open > a.nav-console__contact{
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:50px!important;
    padding:11px 14px!important;
  }

  /* First view uses stable small viewport units; dvh takes over where supported. */
  .hero-reference{
    margin-top:var(--mobile-header-h)!important;
    height:calc(100svh - var(--mobile-header-h))!important;
    min-height:498px!important;
    max-height:none!important;
    --hero-slant:0px;
  }
  @supports(height:100dvh){
    .hero-reference{height:calc(100dvh - var(--mobile-header-h))!important}
  }
  .hero-reference__copy{
    left:max(18px,calc(18px + var(--safe-left)))!important;
    right:max(18px,calc(18px + var(--safe-right)))!important;
    bottom:calc(var(--mobile-rail-h) + 26px)!important;
    max-width:none!important;
  }
  .hero-reference__copy h1{max-width:100%!important}
  .hero-reference__copy p{max-width:32em!important}
  .hero-reference__rail-frame,
  .hero-reference__right-band{display:none!important}
  .hero-reference__rail{
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    height:var(--mobile-rail-h)!important;
    clip-path:none!important;
  }
  .hero-reference .hero-media-roll__track{
    width:400%!important;
    height:100%!important;
    grid-template-columns:repeat(16,1fr)!important;
    grid-template-rows:1fr!important;
  }
  .hero-reference .hero-media-roll__item{
    border-right:4px solid #fff!important;
    border-bottom:0!important;
  }

  /* Keep touch controls comfortably tappable. */
  .business-tab{min-height:68px!important}
  .wheel-node{min-width:56px;min-height:56px}
  .btn{min-height:48px}

  /* Sections: prevent nested grids / figures from forcing width. */
  .feature-grid,
  .other-grid,
  .contact-grid,
  .business-head,
  .business-panel,
  .netis-retro,
  .hokutsu-one-stop__layout,
  .faq-horizontal-row{
    min-width:0!important;
  }

  .business-stage,
  .business-panel,
  .business-panel__copy,
  .business-panel__photo{width:100%!important;min-width:0!important}
  .business-tabs{width:100%!important}
  .business-tab{min-width:0!important;white-space:normal}
  .business-panel__items span{min-width:0!important}

  .netis-retro{
    width:100%!important;
    min-width:0!important;
  }
  .netis-retro__body,
  .netis-retro__points,
  .netis-retro__points article{min-width:0!important}

  .hokutsu-one-stop__layout{width:100%!important}
  .one-stop-wheel{
    max-width:calc(100vw - 32px)!important;
    max-height:calc(100vw - 32px)!important;
  }
  .hokutsu-step figure{width:100%!important}
  .hokutsu-step__caption>div{min-width:0}

  .faq-horizontal-q,
  .faq-horizontal-a{
    align-items:start!important;
  }
  .faq-horizontal-q h3,
  .faq-horizontal-a p{min-width:0!important}

  #contact .actions{width:100%;max-width:340px}
  #contact .btn{width:100%}

  .footer{
    padding-bottom:calc(24px + var(--safe-bottom))!important;
  }
  .footer-inner{
    width:min(calc(100% - 28px),1120px)!important;
  }
  .footer-main,
  .footer-company,
  .footer-links{min-width:0!important}
  .footer-address{min-width:0!important}
  .footer-address>div{min-width:0!important;overflow-wrap:anywhere}

  .mobile-quick-cta{
    left:calc(10px + var(--safe-left))!important;
    right:calc(10px + var(--safe-right))!important;
    bottom:max(9px,var(--safe-bottom))!important;
    width:auto!important;
  }
  .mobile-quick-cta a{min-width:0!important;min-height:48px!important}
}

/* Very narrow phones: avoid crowding while retaining the approved typography. */
@media(max-width:359px){
  .container{width:calc(100% - 24px)!important}
  .header-reference .brand-console__logo img{max-width:min(100%,204px)!important}
  .hero-reference__copy{left:16px!important;right:16px!important}
  .business-tab{padding:10px 9px!important}
  .business-panel__copy{padding-left:16px!important;padding-right:16px!important}
  .netis-retro{padding:15px!important}
  .faq-horizontal-q,.faq-horizontal-a{padding-left:12px!important;padding-right:12px!important}
  .faq-horizontal-q,.faq-horizontal-a{grid-template-columns:40px minmax(0,1fr)!important;gap:9px!important}
  .faq-letter{width:38px!important;height:38px!important}
  .footer-links.footer-links--4x2{grid-template-columns:1fr!important}
}


/* Tablet / iPad navigation and viewport hardening.
   Covers the medium-width range where the legacy stylesheet intentionally
   switches away from the full desktop navigation.  The previous final
   overrides only restored the drawer through 1080px, leaving 1081-1240px
   (including several iPad landscape widths) with neither nav nor MENU. */
@media (min-width:761px) and (max-width:1240px){
  :root{
    --tablet-header-base:88px;
    --tablet-header-h:calc(var(--tablet-header-base) + var(--safe-top));
    --hit-header-h:var(--tablet-header-h);
  }


  .header.header-console.header-reference{
    top:0!important;
    height:var(--tablet-header-h)!important;
    min-height:var(--tablet-header-h)!important;
    padding-top:var(--safe-top)!important;
    grid-template-columns:minmax(0,1fr) 76px!important;
  }
  .header-reference__brand-zone{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    height:var(--tablet-header-base)!important;
    /* The desktop header intentionally right-aligns the logo module.
       On iPad that pushed the company logo toward MENU because the brand
       zone becomes almost the full viewport width. Keep the logo anchored
       to the physical left edge instead. */
    justify-content:flex-start!important;
  }
  .header-reference .brand-console{
    min-width:0!important;
    width:min(100%,450px)!important;
    max-width:450px!important;
    height:var(--tablet-header-base)!important;
    justify-content:flex-start!important;
    padding-left:max(18px,calc(18px + var(--safe-left)))!important;
    padding-right:24px!important;
  }
  .header-reference .brand-console__logo{
    justify-content:flex-start!important;
    width:100%!important;
  }
  .header-reference .brand-console__logo img{
    width:auto!important;
    max-width:min(100%,360px)!important;
    object-position:left center!important;
  }
  .header-console__signal{display:none!important}

  .header.header-console.header-reference .menu.menu-console{
    position:relative!important;
    display:flex!important;
    grid-column:2!important;
    grid-row:1!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    align-items:center!important;
    justify-content:center!important;
    width:76px!important;
    min-width:76px!important;
    height:var(--tablet-header-base)!important;
    min-height:var(--tablet-header-base)!important;
    padding:0 max(0px,var(--safe-right)) 0 0!important;
  }
  /* Larger than the legacy 6px label so MENU/CLOSE is readable on iPad. */
  .header.header-console.header-reference .menu.menu-console span{
    left:0!important;
    right:0!important;
    top:14px!important;
    width:100%!important;
    text-align:center!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.09em!important;
    white-space:nowrap!important;
  }
  .header.header-console.header-reference .menu.menu-console i{
    left:50%!important;
    right:auto!important;
    width:30px!important;
    height:2px!important;
    transform:translateX(-50%)!important;
    background:#b8e5ff!important;
  }
  .header.header-console.header-reference .menu.menu-console i:nth-of-type(1){top:43px!important}
  .header.header-console.header-reference .menu.menu-console i:nth-of-type(2){top:54px!important}

  .header.header-console.header-reference .nav.nav-console{
    position:fixed!important;
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    top:var(--tablet-header-h)!important;
    right:calc(10px + var(--safe-right))!important;
    bottom:auto!important;
    left:auto!important;
    width:min(430px,calc(100vw - 20px - var(--safe-left) - var(--safe-right)))!important;
    height:auto!important;
    max-height:calc(100dvh - var(--tablet-header-h) - 10px)!important;
    padding:12px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:#06182f!important;
    border:1px solid rgba(143,199,236,.22)!important;
    box-shadow:0 20px 50px rgba(2,11,24,.32)!important;
    transform:translateX(calc(100% + 34px + var(--safe-right)))!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .28s ease,visibility 0s linear .28s!important;
  }
  .header.header-console.header-reference .nav.nav-console.open{
    transform:translateX(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:transform .28s ease,visibility 0s!important;
  }
  .header.header-console.header-reference .nav.nav-console > a,
  .header.header-console.header-reference .nav.nav-console.open > a,
  .header.header-console.header-reference .nav.nav-console.open > a.nav-console__contact{
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:54px!important;
    margin:0!important;
    padding:11px 15px!important;
    clip-path:none!important;
  }

  /* Use the dynamic Safari viewport without letting browser chrome create
     a jumpy first view. */
  .hero-reference{
    margin-top:var(--tablet-header-h)!important;
    height:calc(100svh - var(--tablet-header-h))!important;
    min-height:620px!important;
    max-height:none!important;
  }
  @supports(height:100dvh){
    .hero-reference{height:calc(100dvh - var(--tablet-header-h))!important}
  }
}

/* iPad / tablet landscape: fit the first view inside short landscape
   viewports instead of forcing the desktop 680px minimum. */
@media (min-width:761px) and (max-width:1240px) and (orientation:landscape){
  .hero-reference{min-height:560px!important}
}

@media (min-width:961px) and (max-width:1240px) and (orientation:landscape) and (max-height:560px){
  :root{--tablet-header-base:64px}
  .header-reference .brand-console__logo img{height:42px!important;max-height:42px!important}
  .header.header-console.header-reference .menu.menu-console span{top:8px!important}
  .header.header-console.header-reference .menu.menu-console i:nth-of-type(1){top:30px!important}
  .header.header-console.header-reference .menu.menu-console i:nth-of-type(2){top:40px!important}
  .header.header-console.header-reference .nav.nav-console > a,
  .header.header-console.header-reference .nav.nav-console.open > a,
  .header.header-console.header-reference .nav.nav-console.open > a.nav-console__contact{
    min-height:46px!important;
    padding-block:8px!important;
  }
  .hero-reference{min-height:420px!important}
  .hero-reference__copy{bottom:6vh!important;max-width:58vw!important}
  .hero-reference__copy h1{font-size:clamp(40px,5.5vw,58px)!important}
  .hero-reference__copy p{margin-top:10px!important;font-size:12px!important}
}

/* Browser-default <figure> margins were pushing the approved feature/other
   images 40px outside their grid cells on tablet widths.  Reset only in the
   tablet range so desktop and approved phone layouts remain unchanged. */
@media (min-width:700px) and (max-width:1240px){
  #strengths .feature-mosaic,
  #other .other-shutter{margin:0!important}
}

/* Landscape phones need a shorter hero and a compact drawer/rail. */
@media (orientation:landscape) and (max-width:960px) and (max-height:560px){
  :root{
    --mobile-header-base:64px;
    --mobile-rail-h:104px;
  }
  .header.header-console.header-reference{grid-template-columns:minmax(0,1fr) 60px!important}
  .header-reference .brand-console,
  .header-reference__brand-zone,
  .header-reference .menu-console{
    height:64px!important;
    min-height:64px!important;
  }
  .header.header-console.header-reference .menu.menu-console{width:60px!important;min-width:60px!important}
  .header-reference .brand-console__logo img{height:38px!important;max-height:38px!important}
  .header.header-console.header-reference .nav.nav-console,
  .header.header-console.header-reference .nav.nav-console.open{
    width:min(74vw,380px)!important;
    padding-top:10px!important;
  }
  .header.header-console.header-reference .nav.nav-console > a,
  .header.header-console.header-reference .nav.nav-console.open > a,
  .header.header-console.header-reference .nav.nav-console.open > a.nav-console__contact{
    min-height:46px!important;
    padding-block:8px!important;
  }
  .hero-reference{
    min-height:calc(100svh - var(--mobile-header-h))!important;
  }
  .hero-reference__copy{
    bottom:calc(var(--mobile-rail-h) + 12px)!important;
    max-width:60vw!important;
  }
  .hero-reference__copy h1{
    font-size:clamp(34px,7vw,44px)!important;
    line-height:.94!important;
  }
  .hero-reference__copy p{
    margin-top:8px!important;
    font-size:12px!important;
    line-height:1.45!important;
  }
  .intro-stage{height:78dvh!important}
  .brand-row{flex-direction:row!important;gap:18px!important}
  .handmark{width:88px!important}
  .word-stage{width:min(46vw,300px)!important;height:76px!important}
  .division-word{width:min(42vw,270px)!important}
  .intro-plate{width:min(36vw,260px)!important;max-height:58dvh!important}
  .intro-caption{font-size:.50rem!important}
  .mobile-quick-cta{padding:5px!important}
  .mobile-quick-cta a{min-height:44px!important}
}

/* Touch devices should not depend on hover-only visual changes. */
@media(hover:none) and (pointer:coarse){
  .faq-horizontal-row:hover,
  .btn:hover,
  .footer-links a:hover{
    transform:none!important;
    box-shadow:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  /* Content must remain immediately readable when motion is disabled. */
  .reveal,
  .reveal.show{opacity:1!important;transform:none!important;transition:none!important}
  .mobile-quick-cta,
  .header-reference__nav{transition-duration:.01ms!important}
}

/* =========================================================
   Mobile header readability + page-end cleanup
   2026-08-11 final phone polish
   ========================================================= */
@media (max-width:760px),
       (orientation:landscape) and (max-width:960px) and (max-height:560px){
  /* The floating CTA is hidden from the contact section onward, so a
     document-level bottom spacer is unnecessary and exposed the body
     background below the navy footer on some phones. */
  body{padding-bottom:0!important}

  /* Make MENU / CLOSE and the console lines legible on phone screens.
     Stacking the label above the bars gives CLOSE enough room at 64px. */
  .header.header-console.header-reference .menu.menu-console span{
    left:0!important;
    right:0!important;
    top:11px!important;
    width:100%!important;
    text-align:center!important;
    font-size:9px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.08em!important;
    white-space:nowrap!important;
  }
  .header.header-console.header-reference .menu.menu-console i{
    left:50%!important;
    right:auto!important;
    width:28px!important;
    height:2px!important;
    transform:translateX(-50%)!important;
    background:#b8e5ff!important;
  }
  .header.header-console.header-reference .menu.menu-console i:nth-of-type(1){top:34px!important}
  .header.header-console.header-reference .menu.menu-console i:nth-of-type(2){top:43px!important}
}

/* Short landscape phones have a 64px header; compact the vertical spacing
   without reducing the label/bar size. */
@media (orientation:landscape) and (max-width:960px) and (max-height:560px){
  .header.header-console.header-reference .menu.menu-console span{top:8px!important}
  .header.header-console.header-reference .menu.menu-console i:nth-of-type(1){top:29px!important}
  .header.header-console.header-reference .menu.menu-console i:nth-of-type(2){top:38px!important}
}

/* =========================================================
   FIRST VIEW — HIT MIRRORED COMPOSITION
   Desktop / tablet only: move the moving media rail to the left and the
   hero copy to the right. Phones keep the approved bottom horizontal rail.
   This preserves the established visual identity while creating a clearly
   different first-view composition from the original reference layout.
   ========================================================= */
@media (min-width:961px),
       (min-width:761px) and (min-height:561px){
  /* Give the copy a right-side reading zone while retaining left alignment
     inside the block for natural Japanese/English readability. */
  .hero-reference__copy{
    left:auto!important;
    right:4.8vw!important;
    width:min(44vw,720px)!important;
    max-width:min(44vw,720px)!important;
  }

  /* Add only a restrained right-side depth veil so the relocated copy stays
     readable over bright photography without changing the approved blue tone. */
  .hero-reference__overlay{
    background:
      linear-gradient(270deg,
        rgba(3,32,70,.42) 0%,
        rgba(3,32,70,.22) 27%,
        rgba(3,32,70,.05) 49%,
        rgba(3,32,70,0) 63%),
      linear-gradient(180deg,
        rgba(55,156,235,.03) 0%,
        rgba(28,131,223,.03) 30%,
        rgba(9,102,205,.16) 56%,
        rgba(2,82,183,.56) 77%,
        rgba(0,65,157,.96) 100%)!important;
  }

  /* Mirror the angled frame and moving image column to the left. */
  .hero-reference__rail-frame{
    left:6.9%!important;
    right:auto!important;
    clip-path:polygon(
      0 0,
      calc(100% - var(--hero-slant)) 0,
      100% 100%,
      var(--hero-slant) 100%
    )!important;
  }
  .hero-reference__rail{
    left:9.5%!important;
    right:auto!important;
    clip-path:polygon(
      0 0,
      calc(100% - var(--hero-slant)) 0,
      100% 100%,
      var(--hero-slant) 100%
    )!important;
  }

  /* Mirror the structural blue band as well, so the composition is genuinely
     rebuilt rather than simply moving the photo column. */
  .hero-reference__right-band{
    left:-1.5%!important;
    right:auto!important;
    clip-path:polygon(
      0 0,
      calc(100% - var(--hero-slant)) 0,
      100% 100%,
      0 100%
    )!important;
  }
}

/* Tablet-specific spacing: keep copy and rail comfortably separated. */
@media (min-width:761px) and (max-width:1240px) and (min-height:561px){
  .hero-reference__copy{
    right:4.2vw!important;
    width:min(48vw,600px)!important;
    max-width:min(48vw,600px)!important;
  }
  .hero-reference__rail-frame{
    left:5%!important;
    right:auto!important;
  }
  .hero-reference__rail{
    left:8.2%!important;
    right:auto!important;
  }
  .hero-reference__right-band{
    left:-1.5%!important;
    right:auto!important;
  }
}