/* DDJ mobile fixes — added stylesheet only, no existing CSS/HTML is edited.
   Everything is scoped inside the site's own mobile breakpoint (the width
   range where header nav ul / header button already switch, confirmed
   empirically to sit between 1120px and 1150px) so nothing here is visible
   on PC layouts. */

/* Unconditional safety net: the overlay is display:none at any width by
   default. Only the matching rule inside the media query below (same
   specificity, later in the cascade) turns it on, and only while
   body.ddj-menu-open is set. This guarantees the overlay can never render
   past the mobile breakpoint even if a stale one is left in the DOM after
   a resize (mobile.js also closes it on resize past the breakpoint). */
.ddj-mnav {
  display: none;
}

@media (max-width: 1120px) {

  /* Header brand name renders at 10px on mobile — below the 12px legibility
     floor. Bump only the mobile-audit-flagged element. */
  .ddj-brand-name {
    font-size: 12px;
  }

  /* NOTE: contact form "必須" labels (#ddj-inquiry .ddj-req) also render
     at 11px on mobile, but that markup/styling is owned by the contact
     form work happening in a separate concurrent session, so it is left
     alone here — reported as a held item instead of patched. */

  /* Invisible tap-area expansion for links whose visual box is under the
     40px touch-target guideline. Uses an absolutely positioned ::after so
     the visual design is unchanged — only the hit area grows. Both
     elements already have position:relative from the site's own CSS. */
  header a.ddj-brand::after {
    content: "";
    position: absolute;
    top: -12px;
    right: -10px;
    bottom: -12px;
    left: -10px;
  }
  footer a.text.link::after {
    content: "";
    position: absolute;
    top: -8px;
    right: -6px;
    bottom: -8px;
    left: -6px;
  }

  /* Hamburger button: give it a real 44x44 hit area via an invisible
     centered ::after, without resizing the button itself (avoids any risk
     of pushing it past the header's right edge). */
  header button {
    position: relative;
  }
  header button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* The header sits inside an ancestor (`.sd`, position:relative;
     z-index:0 — the site's own base "positioned block" utility, used
     nearly everywhere) that traps its z-index:5 inside its own stacking
     context. That context is itself unpositioned relative to the rest of
     the page, so nothing outside it can be layered "above all normal
     content but below the header" — it's one or the other. Simplest
     correct answer: let the overlay (below) cover literally everything,
     including the header, and give the overlay its OWN close button
     instead of trying to keep the original hamburger usable on top of it. */

  .ddj-mnav-close {
    display: none;
  }
  body.ddj-menu-open .ddj-mnav-close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: var(--ddj-header-h, 70px);
    background: transparent;
    border: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  .ddj-mnav-close::before,
  .ddj-mnav-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .ddj-mnav-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* Mobile nav overlay, built by mobile.js on first tap of the hamburger.
     display:flex only turns on inside this media query (see the plain
     .ddj-mnav{display:none} rule below, outside it) so a stale overlay
     left in the DOM after a resize-to-desktop can never render. */
  .ddj-mnav {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #0a162e;
    color: #fff;
    padding-top: var(--ddj-header-h, 70px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.ddj-menu-open .ddj-mnav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  body.ddj-menu-open {
    overflow: hidden;
  }

  .ddj-mnav-list {
    list-style: none;
    margin: 0;
    padding: 8px 24px 32px;
  }
  .ddj-mnav-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .ddj-mnav-list li:last-child {
    border-bottom: none;
  }
  .ddj-mnav-list a.ddj-mnav-link {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-size: 18px;
    line-height: 1.4;
    color: #fff;
    text-decoration: none;
  }
  /* The cloned CTA link's inner <p> (originally .text.sd.appear) loses its
     classes but keeps the browser's default <p> margin — flatten it so
     the link's text sits centered like the plain nav links do. */
  .ddj-mnav-link p {
    margin: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .ddj-mnav,
    body.ddj-menu-open header button div {
      transition: none;
    }
  }
}

/* --- 全幅共通の修正（メディアクエリ外） ---
   STUDIO 静的化で残った読み込みオーバーレイ（.loading.loading-leave-to）。
   透明・全画面・pointer-events:auto・z-index:1000 のまま DOM に残り、
   news/ case-study/ privacypolicy の全クリックを横取りしていたので無効化する。 */
.loading.loading-leave-active,
.loading.loading-leave-to {
  display: none !important;
  pointer-events: none !important;
}