@charset "utf-8";

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--df-color-bg);
  color: var(--df-color-text);
  font-family: var(--df-font-sans);
  font-size: var(--df-font-size-body);
  line-height: var(--df-line-height-body);
  overflow-wrap: anywhere;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--df-color-primary);
  outline-offset: 3px;
}

html.df-header-menu-open {
  overflow: hidden;
}

/* スクロールに合わせて、セクションを控えめに立ち上げる。JavaScriptが使えない場合は通常表示のままにする。 */
@media (prefers-reduced-motion: no-preference) {
  html.df-motion-preload :where(
    .nl-page > .nl-hero > .nl-hero-copy,
    .nl-page > .nl-hero > .nl-hero-media,
    .nl-page > .df-section > .df-container,
    .nl-page > .nl-contact > .df-container,
    .nl-subpage:not(.nl-case-detail-page):not(.nl-blog-detail-page) > .nl-subhero > .df-container,
    .nl-subpage:not(.nl-case-detail-page):not(.nl-blog-detail-page) > .df-section > .df-container,
    .nl-subpage > .nl-works-cta > .df-container,
    .nl-subpage > .nl-blog-cta > .df-container,
    .nl-subpage > .nl-case-cta > .df-container,
    .nl-contact-page > .nl-contact-hero > .df-container,
    .nl-contact-page > .nl-contact-main > .df-container
  ) {
    opacity: 0;
    transform: translateY(12px);
  }

  .df-motion-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .df-motion-reveal > .df-container,
  .nl-page > .nl-hero.df-motion-reveal > .nl-hero-copy,
  .nl-page > .nl-hero.df-motion-reveal > .nl-hero-media {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.52s ease-out, transform 0.52s ease-out;
  }

  .df-motion-reveal.df-motion-visible > .df-container,
  .nl-page > .nl-hero.df-motion-reveal.df-motion-visible > .nl-hero-copy,
  .nl-page > .nl-hero.df-motion-reveal.df-motion-visible > .nl-hero-media {
    opacity: 1;
    transform: translateY(0);
  }

  .df-photo-wipe {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.36s ease-out 0.04s;
    will-change: clip-path;
  }

  .df-motion-visible .df-photo-wipe {
    clip-path: inset(0 0 0 0);
  }

  .df-motion-stagger > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.44s ease-out, transform 0.44s ease-out;
  }

  .df-motion-stagger.df-motion-visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  .df-motion-stagger.df-motion-visible > :nth-child(2) { transition-delay: 0.08s; }
  .df-motion-stagger.df-motion-visible > :nth-child(3) { transition-delay: 0.16s; }
  .df-motion-stagger.df-motion-visible > :nth-child(4) { transition-delay: 0.24s; }
  .df-motion-stagger.df-motion-visible > :nth-child(n + 5) { transition-delay: 0.3s; }

}

@media (prefers-reduced-motion: reduce) {
  .df-motion-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .df-motion-reveal > .df-container,
  .nl-page > .nl-hero.df-motion-reveal > .nl-hero-copy,
  .nl-page > .nl-hero.df-motion-reveal > .nl-hero-media {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .df-photo-wipe {
    clip-path: none;
    transition: none;
  }

  .df-motion-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 下層ページは固定ヘッダーの下から、トップと共通の色・余白で始める。 */
.nl-subpage {
  color: var(--df-color-text);
}

.nl-subhero {
  padding: clamp(72px, 10vw, 96px) 0;
  background-color: #1d1a24;
  color: var(--df-color-on-primary);
}

/*
  Keep the first view of every lower-level page calm and consistent. The
  content itself is centred in the shared hero height, so a short lead does
  not leave its bottom edge noticeably closer to the next section.
*/
body .nl-subhero,
body .nl-contact-hero {
  display: flex;
  align-items: center;
  min-height: 336px;
  padding: clamp(72px, 10vw, 96px) 0;
}

body .nl-subhero > .df-container,
body .nl-contact-hero > .df-container {
  width: 100%;
}

.nl-subhero .df-container,
.nl-subpage .df-container {
  min-width: 0;
}

.nl-subhero h1,
.nl-subpage h2 {
  margin: 0;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
}

.nl-subhero h1 {
  max-width: 900px;
  font-size: clamp(32px, 5vw, 56px);
}

.nl-subpage h2 {
  font-size: clamp(26px, 3vw, 40px);
}

.nl-subhero p:not(.nl-eyebrow) {
  max-width: 680px;
  margin: 20px 0 0;
  line-height: 1.9;
}

.nl-subpage p {
  line-height: 1.9;
}

.nl-contact-page .nl-contact-kicker {
  color: #cfd1ff;
}

.nl-subpage-surface {
  background-color: var(--df-color-surface);
}

.nl-subgrid,
.nl-contact-layout {
  display: grid;
  gap: clamp(28px, 5vw, 48px);
}

.nl-reading,
.nl-sub-cta {
  max-width: 820px;
}

.nl-subpage .df-button {
  margin-top: 24px;
}

.nl-info-table,
.nl-faq-items {
  margin-top: 28px;
  border-top: 1px solid var(--df-color-line);
}

.nl-info-table > div {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
  border-bottom: 1px solid var(--df-color-line);
}

.nl-info-table p {
  margin: 0;
  padding: 16px;
}

.nl-info-table .nl-info-label {
  background-color: #e6e8ff;
  font-weight: 700;
}

.nl-faq-items > div {
  padding: 24px 0;
  border-bottom: 1px solid var(--df-color-line);
}

/*
  Remote editor CSS may omit page-level background declarations during a
  resync. Keep the site's colour surfaces in the shared, published stylesheet
  so that every page retains its intended section boundaries.
*/
body .nl-subhero,
body .nl-contact-hero,
body .nl-case-hero,
body .nl-works-hero,
body .nl-blog-hero,
body .nl-blog-detail-hero {
  background-color: #1d1a24;
  color: var(--df-color-on-primary);
}

body .nl-subpage-surface,
body .nl-works-content,
body .nl-blog-content,
body .nl-blog-detail-content,
body .nl-case-content,
body .nl-contact-page {
  background-color: var(--df-color-surface);
}

body .nl-profile-section {
  background-color: #1d1a24;
  color: var(--df-color-on-primary);
}

body .nl-works-cta,
body .nl-blog-cta,
body .nl-case-cta {
  background-color: var(--df-color-primary);
  color: var(--df-color-on-primary);
}

body .nl-area-section {
  background-color: var(--df-color-bg);
}

body .nl-contact-guide {
  background-color: var(--df-color-primary);
  color: var(--df-color-on-primary);
}

body .nl-contact-form-area {
  background-color: var(--df-color-bg);
}

/* Keep the site-wide conversion sections visually consistent. Content may
   extend the section when needed, but the primary CTA rhythm stays constant. */
body .nl-contact,
body .nl-works-cta,
body .nl-blog-cta,
body .nl-case-cta,
body .nl-subpage > .df-section:has(> .nl-sub-cta),
body .nl-subpage > .df-section:has(> .nl-recruit-check) {
  display: flex;
  align-items: center;
  min-height: 260px;
  padding: 48px 0;
  background-color: var(--df-color-primary);
  color: var(--df-color-on-primary);
}

body .nl-contact > .df-container,
body .nl-works-cta > .df-container,
body .nl-blog-cta > .df-container,
body .nl-case-cta > .df-container,
body .nl-subpage > .df-section:has(> .nl-sub-cta) > .df-container,
body .nl-subpage > .df-section:has(> .nl-recruit-check) > .df-container {
  width: 100%;
}

body .nl-contact h2,
body .nl-works-cta h2,
body .nl-blog-cta h2,
body .nl-case-cta h2,
body .nl-subpage > .df-section:has(> .nl-sub-cta) h2,
body .nl-subpage > .df-section:has(> .nl-recruit-check) h2,
body .nl-contact p,
body .nl-works-cta p,
body .nl-blog-cta p,
body .nl-case-cta p,
body .nl-subpage > .df-section:has(> .nl-sub-cta) p,
body .nl-subpage > .df-section:has(> .nl-recruit-check) p {
  color: inherit;
}

body .nl-contact .nl-eyebrow,
body .nl-works-cta .nl-eyebrow,
body .nl-blog-cta .nl-eyebrow,
body .nl-case-cta .nl-eyebrow,
body .nl-subpage > .df-section:has(> .nl-sub-cta) .nl-eyebrow,
body .nl-subpage > .df-section:has(> .nl-recruit-check) .nl-eyebrow {
  color: #d3d8ff;
}

body .nl-contact .df-button-primary,
body .nl-works-cta .df-button-primary,
body .nl-blog-cta .df-button-primary,
body .nl-case-cta .df-button-primary,
body .nl-subpage > .df-section:has(> .nl-sub-cta) .df-button-primary,
body .nl-subpage > .df-section:has(> .nl-recruit-check) .df-button-primary {
  background-color: var(--df-color-on-primary);
  border-color: var(--df-color-on-primary);
  color: var(--df-color-primary);
}

body .nl-contact .df-button-secondary,
body .nl-works-cta .df-button-secondary,
body .nl-blog-cta .df-button-secondary,
body .nl-case-cta .df-button-secondary,
body .nl-subpage > .df-section:has(> .nl-sub-cta) .df-button-secondary,
body .nl-subpage > .df-section:has(> .nl-recruit-check) .df-button-secondary {
  background-color: transparent;
  border-color: var(--df-color-on-primary);
  color: var(--df-color-on-primary);
}

@media (min-width: 768px) {
  body .nl-contact,
  body .nl-works-cta,
  body .nl-blog-cta,
  body .nl-case-cta,
  body .nl-subpage > .df-section:has(> .nl-sub-cta),
  body .nl-subpage > .df-section:has(> .nl-recruit-check) {
    min-height: 300px;
  }

  body .nl-subhero,
  body .nl-contact-hero {
    min-height: 448px;
    padding: 72px 0;
  }

  .nl-subgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nl-subpage-surface .df-container {
    max-width: 900px;
  }
}

/* Let lower-page hero leads use the available line on desktop. */
@media (min-width: 1024px) {
  body .nl-subhero p:not(.nl-eyebrow) {
    max-width: none;
  }

  body .nl-subhero > .df-container,
  body .nl-contact-hero > .df-container {
    position: relative;
    top: 24px;
  }
}