.elementor-3727 .elementor-element.elementor-element-f6f01bc{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3727 .elementor-element.elementor-element-7fd68c1{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3727 .elementor-element.elementor-element-76784df{--display:flex;--padding-top:-3px;--padding-bottom:-3px;--padding-left:-3px;--padding-right:-3px;}.elementor-3727 .elementor-element.elementor-element-5bc40fa{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3727 .elementor-element.elementor-element-5b47083{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3727 .elementor-element.elementor-element-da7ff25{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3727 .elementor-element.elementor-element-9dc91a0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3727 .elementor-element.elementor-element-04255f2{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3727 .elementor-element.elementor-element-790a75f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3727 .elementor-element.elementor-element-db3aee0{--display:flex;}.elementor-3727 .elementor-element.elementor-element-f375f95{--display:flex;}@media(max-width:767px){.elementor-3727 .elementor-element.elementor-element-63549d6{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-0db5209 *//* =========================================================
   NANKO KOGYO CASE STUDY
   HERO + SCALE SHIFT + PROJECT OVERVIEW
========================================================= */

.nanko-case {
  --nanko-ink: #11100e;
  --nanko-paper: #f3f0e9;
  --nanko-paper-2: #e8e3d9;
  --nanko-line: rgba(17, 16, 14, 0.18);

  --nanko-rust: #a85132;
  --nanko-rust-soft: #c27655;

  --nanko-gold: #b79855;

  --nanko-white: #f8f6f0;

  --nanko-ease: cubic-bezier(.22, 1, .36, 1);

  position: relative;
  width: 100%;
  overflow: clip;
  background: var(--nanko-paper);
  color: var(--nanko-ink);

  font-family:
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    Meiryo,
    sans-serif;
}


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


.nanko-case img {
  display: block;
  width: 100%;
}


.nanko-case a {
  color: inherit;
  text-decoration: none;
}


.nanko-case p,
.nanko-case h1,
.nanko-case h2,
.nanko-case h3 {
  margin: 0;
}


.nanko-case-container {
  width: min(1480px, calc(100% - 96px));
  margin-inline: auto;
}



/* =========================================================
   PAGE ID
========================================================= */

.nanko-case-pageid {
  position: sticky;
  top: 0;
  z-index: 100;

  height: 46px;

  background: rgba(243, 240, 233, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(17, 16, 14, 0.12);
}


.nanko-case-pageid__inner {
  width: min(1600px, calc(100% - 48px));
  height: 100%;
  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 10px;
  letter-spacing: .15em;
}


.nanko-case-pageid__left {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}


.nanko-case-pageid__left strong {
  font-weight: 700;
}


.nanko-case-pageid__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nanko-rust);
}


.nanko-case-pageid__slash {
  opacity: .32;
}


.nanko-case-pageid__progress {
  display: flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}


.nanko-case-pageid__current {
  font-weight: 700;
}



/* =========================================================
   EYEBROW
========================================================= */

.nanko-case-eyebrow {
  font-size: 11px;
  line-height: 1;
  letter-spacing: .22em;
  font-weight: 700;
  color: rgba(255,255,255,.72);
}


.nanko-case-eyebrow--dark {
  color: var(--nanko-rust);
}



/* =========================================================
   HERO
========================================================= */

.nanko-case-hero {
  position: relative;

  /* この高さ分だけSCALE SHIFTが進行 */
  height: 138svh;

  background: #090909;
}


.nanko-case-hero__sticky {
  position: sticky;
  top: 46px;

  height: calc(100svh - 46px);
  overflow: hidden;

  background: #090909;
}


/* HERO IMAGE FRAME */

.nanko-case-hero__media {
  position: absolute;
  inset: 0;

  overflow: hidden;

  /*
   * JSがここを書き換えて
   * SCALE SHIFTを作ります
   */
  clip-path: inset(
    var(--nanko-hero-y, 8%)
    var(--nanko-hero-x, 18%)
    var(--nanko-hero-y, 8%)
    var(--nanko-hero-x, 18%)
    round var(--nanko-hero-radius, 26px)
  );

  will-change: clip-path;
}


.nanko-case-hero__media picture,
.nanko-case-hero__media img {
  width: 100%;
  height: 100%;
}


.nanko-case-hero__media img {
  object-fit: cover;
  object-position: center;

  transform:
    scale(var(--nanko-hero-image-scale, 1.04));

  transition:
    filter .8s var(--nanko-ease);

  will-change: transform;
}


.nanko-case-hero__shade {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.26) 0%,
      rgba(0,0,0,.05) 30%,
      rgba(0,0,0,.18) 62%,
      rgba(0,0,0,.70) 100%
    );
}


/* HERO CONTENT */

.nanko-case-hero__content {
  position: relative;
  z-index: 2;

  width: min(1600px, calc(100% - 96px));
  height: 100%;
  margin-inline: auto;

  padding:
    clamp(48px, 6vh, 78px)
    0
    clamp(44px, 6vh, 72px);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  color: #fff;

  pointer-events: none;
}


.nanko-case-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}


.nanko-case-hero__client {
  font-size: 11px;
  letter-spacing: .2em;
  font-weight: 600;
  color: rgba(255,255,255,.74);
}


.nanko-case-hero__main {
  padding-top: 4vh;
}


.nanko-case-hero__title {
  display: flex;
  flex-direction: column;

  max-width: 1200px;

  line-height: .93;

  transform:
    translateY(var(--nanko-title-y, 18px))
    scale(var(--nanko-title-scale, .97));

  opacity: var(--nanko-title-opacity, .72);

  transform-origin: left bottom;
  will-change: transform, opacity;
}


.nanko-case-hero__company {
  margin-bottom: 22px;

  font-size:
    clamp(14px, 1.25vw, 20px);

  line-height: 1;

  letter-spacing: .13em;

  font-weight: 500;
}


.nanko-case-hero__message {
  font-size:
    clamp(62px, 9.2vw, 162px);

  font-weight: 700;

  letter-spacing: -.065em;

  word-break: keep-all;
  line-break: strict;
}


.nanko-case-hero__bottom {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(360px, .9fr);

  gap: 8vw;

  align-items: end;
}


.nanko-case-hero__description {
  max-width: 570px;
}


.nanko-case-hero__description p {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.95;

  color: rgba(255,255,255,.84);
}


.nanko-case-hero__description p + p {
  margin-top: 14px;
}


.nanko-case-hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;

  border-top: 1px solid rgba(255,255,255,.32);

  padding-top: 18px;
}


.nanko-case-hero__meta div {
  min-width: 0;
}


.nanko-case-hero__meta span {
  display: block;

  margin-bottom: 8px;

  font-size: 9px;
  line-height: 1;
  letter-spacing: .18em;

  color: rgba(255,255,255,.55);
}


.nanko-case-hero__meta strong {
  display: block;

  font-size: 10px;
  line-height: 1.55;
  letter-spacing: .08em;

  font-weight: 600;

  color: rgba(255,255,255,.92);
}


.nanko-case-scrollcue {
  position: absolute;
  right: 0;
  top: 50%;

  transform:
    translateY(-50%)
    rotate(90deg)
    translateX(50%);

  transform-origin: right top;

  display: flex;
  align-items: center;
  gap: 14px;

  font-size: 8px;
  letter-spacing: .2em;

  color: rgba(255,255,255,.62);
}


.nanko-case-scrollcue i {
  display: block;

  width: 55px;
  height: 1px;

  overflow: hidden;

  background: rgba(255,255,255,.25);
}


.nanko-case-scrollcue i::after {
  content: "";

  display: block;

  width: 100%;
  height: 100%;

  background: #fff;

  transform: translateX(-100%);
  animation:
    nankoCaseScrollLine 2.6s ease-in-out infinite;
}


@keyframes nankoCaseScrollLine {

  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }

}



/* =========================================================
   TRANSITION
========================================================= */

.nanko-case-transition {
  position: relative;

  min-height: 52vh;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  gap: clamp(14px, 2vw, 34px);

  padding: 90px 5vw;

  background: var(--nanko-ink);
  color: var(--nanko-white);

  overflow: hidden;
}


.nanko-case-transition::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: .08;

  background:
    linear-gradient(
      90deg,
      transparent 49.8%,
      #fff 50%,
      transparent 50.2%
    );
}


.nanko-case-transition span {
  position: relative;
  z-index: 2;

  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: .22em;

  color: rgba(255,255,255,.5);
}


.nanko-case-transition strong {
  position: relative;
  z-index: 2;

  font-size:
    clamp(34px, 6vw, 104px);

  line-height: .9;

  letter-spacing: -.055em;

  white-space: nowrap;
}



/* =========================================================
   OVERVIEW
========================================================= */

.nanko-case-overview {
  position: relative;

  padding:
    clamp(120px, 13vw, 220px)
    0
    clamp(120px, 14vw, 240px);

  background: var(--nanko-paper);
}


.nanko-case-overview__head {
  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(420px, .88fr);

  gap: clamp(70px, 10vw, 160px);

  align-items: start;

  padding-bottom:
    clamp(100px, 11vw, 180px);

  border-bottom:
    1px solid var(--nanko-line);
}


.nanko-case-overview__giant {
  margin-top: 34px;

  font-size:
    clamp(62px, 8vw, 132px);

  line-height: .84;

  letter-spacing: -.06em;

  font-weight: 700;

  color: var(--nanko-ink);
}


.nanko-case-overview__copy h2 {
  max-width: 650px;

  margin-bottom: 34px;

  font-size:
    clamp(34px, 3.4vw, 58px);

  line-height: 1.15;

  letter-spacing: -.045em;

  font-weight: 650;

  word-break: keep-all;
  line-break: strict;
}


.nanko-case-overview__copy > p {
  max-width: 580px;

  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 2;

  color: rgba(17,16,14,.72);
}


.nanko-case-overview__copy > p + p {
  margin-top: 20px;
}


.nanko-case-overview__lead {
  margin-top: 46px !important;

  padding-top: 28px;

  border-top: 1px solid var(--nanko-line);

  font-size:
    clamp(24px, 2.4vw, 38px) !important;

  line-height: 1.45 !important;

  letter-spacing: -.035em;

  font-weight: 600;

  color:
    var(--nanko-ink) !important;
}



/* =========================================================
   PROJECT LINE
========================================================= */

.nanko-case-projects {
  position: relative;

  margin-top:
    clamp(110px, 11vw, 180px);
}


.nanko-case-projects__line {
  position: absolute;

  left: 0;
  right: 0;
  top: 42px;

  height: 1px;

  background: var(--nanko-line);

  overflow: hidden;
}


.nanko-case-projects__line span {
  display: block;

  width: 100%;
  height: 100%;

  background: var(--nanko-rust);

  transform: scaleX(0);
  transform-origin: left center;

  transition:
    transform 1.8s var(--nanko-ease);
}


.nanko-case-projects.is-visible
.nanko-case-projects__line span {
  transform: scaleX(1);
}


.nanko-case-project {
  position: relative;

  display: grid;

  grid-template-columns:
    90px
    40px
    minmax(0,1fr);

  gap: 22px;

  min-height: 260px;

  padding:
    0
    0
    70px;

  opacity: 0;

  transform:
    translateY(40px);

  transition:
    opacity .85s var(--nanko-ease),
    transform .85s var(--nanko-ease);
}


.nanko-case-project + .nanko-case-project {
  margin-top: 48px;
}


.nanko-case-project.is-visible {
  opacity: 1;
  transform: translateY(0);
}


.nanko-case-project__number {
  padding-top: 26px;

  font-size: 11px;
  letter-spacing: .16em;

  color: rgba(17,16,14,.45);
}


.nanko-case-project__marker {
  position: relative;

  width: 11px;
  height: 11px;

  margin-top: 37px;

  border-radius: 50%;

  background: var(--nanko-paper);

  border:
    2px solid
    var(--nanko-rust);

  z-index: 2;
}


.nanko-case-project__marker::after {
  content: "";

  position: absolute;

  width: 1px;
  top: 12px;
  bottom: -250px;
  left: 50%;

  background:
    var(--nanko-line);

  transform:
    translateX(-50%);
}


.nanko-case-project:last-of-type
.nanko-case-project__marker::after {
  display: none;
}


.nanko-case-project__content {
  position: relative;

  padding:
    20px
    0
    45px;

  border-top:
    1px solid
    var(--nanko-line);
}


.nanko-case-project__en {
  margin-bottom: 14px !important;

  font-size: 10px;
  letter-spacing: .18em;

  color: var(--nanko-rust);
}


.nanko-case-project h3 {
  margin-bottom: 24px;

  font-size:
    clamp(30px, 3vw, 52px);

  line-height: 1.1;

  letter-spacing: -.04em;

  font-weight: 650;
}


.nanko-case-project__content > p:not(.nanko-case-project__en) {
  max-width: 650px;

  font-size: 15px;
  line-height: 1.95;

  color: rgba(17,16,14,.68);
}


.nanko-case-textlink {
  display: inline-flex;
  align-items: center;

  gap: 14px;

  margin-top: 30px;

  padding-bottom: 7px;

  border-bottom:
    1px solid
    rgba(17,16,14,.38);

  font-size: 10px;
  letter-spacing: .16em;

  pointer-events: auto;

  transition:
    gap .35s var(--nanko-ease),
    border-color .35s ease;
}


.nanko-case-textlink:hover {
  gap: 22px;
  border-color: var(--nanko-rust);
}



/* BENKEI PREVIEW */

.nanko-case-project__preview {
  position: absolute;

  right: 0;
  top: -30px;

  width:
    clamp(260px, 31vw, 520px);

  aspect-ratio: 16 / 9;

  overflow: hidden;

  opacity: .92;

  clip-path:
    inset(8% 8% 8% 8% round 8px);

  transform:
    translateX(5%);

  transition:
    clip-path .8s var(--nanko-ease),
    transform .8s var(--nanko-ease);
}


.nanko-case-project--benkei:hover
.nanko-case-project__preview {
  clip-path:
    inset(0 round 0);

  transform:
    translateX(0);
}


.nanko-case-project__preview img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}



/* =========================================================
   OVERVIEW STATEMENT
========================================================= */

.nanko-case-overview__statement {
  margin-top:
    clamp(100px, 11vw, 180px);

  padding-top:
    clamp(54px, 6vw, 90px);

  border-top:
    1px solid
    var(--nanko-line);

  opacity: 0;

  transform:
    translateY(36px);

  transition:
    opacity 1s var(--nanko-ease),
    transform 1s var(--nanko-ease);
}


.nanko-case-overview__statement.is-visible {
  opacity: 1;
  transform: none;
}


.nanko-case-overview__statement p {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-bottom: 30px;

  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .15em;

  color: rgba(17,16,14,.45);
}


.nanko-case-overview__statement p span {
  color: var(--nanko-rust);
}


.nanko-case-overview__statement strong {
  display: block;

  font-size:
    clamp(42px, 6.6vw, 106px);

  line-height: .98;

  letter-spacing: -.06em;

  font-weight: 650;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .nanko-case-container {
    width:
      min(100% - 56px, 1100px);
  }


  .nanko-case-hero__content {
    width:
      calc(100% - 56px);
  }


  .nanko-case-hero__bottom {
    grid-template-columns: 1fr;
    gap: 32px;
  }


  .nanko-case-hero__meta {
    max-width: 720px;
  }


  .nanko-case-overview__head {
    grid-template-columns: 1fr;
    gap: 70px;
  }


  .nanko-case-overview__copy {
    max-width: 680px;
  }


  .nanko-case-project__preview {
    position: relative;

    top: auto;
    right: auto;

    width:
      min(100%, 600px);

    margin-top: 34px;

    transform: none;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .nanko-case {
    overflow: hidden;
  }


  .nanko-case-container {
    width:
      calc(100% - 36px);
  }


  /* PAGE ID */

  .nanko-case-pageid {
    height: 40px;
  }


  .nanko-case-pageid__inner {
    width:
      calc(100% - 26px);

    font-size: 8px;
  }


  .nanko-case-pageid__left {
    gap: 6px;
  }


  .nanko-case-pageid__left
  > span:not(.nanko-case-pageid__dot):first-of-type {
    display: none;
  }


  .nanko-case-pageid__slash {
    display: none;
  }



  /* HERO */

  .nanko-case-hero {
    height: 125svh;
  }


  .nanko-case-hero__sticky {
    top: 40px;
    height:
      calc(100svh - 40px);
  }


  .nanko-case-hero__content {
    width:
      calc(100% - 36px);

    padding:
      30px 0 32px;
  }


  .nanko-case-hero__media {
    clip-path:
      inset(
        var(--nanko-hero-y, 5%)
        var(--nanko-hero-x, 7%)
        var(--nanko-hero-y, 5%)
        var(--nanko-hero-x, 7%)
        round var(--nanko-hero-radius, 18px)
      );
  }


  .nanko-case-hero__media img {
    object-position: center;
  }


  .nanko-case-hero__client {
    font-size: 9px;
  }


  .nanko-case-eyebrow {
    font-size: 9px;
  }


  .nanko-case-hero__company {
    margin-bottom: 14px;
    font-size: 13px;
  }


  .nanko-case-hero__message {
    font-size:
      clamp(48px, 16vw, 70px);

    line-height: .96;
  }


  .nanko-case-hero__bottom {
    gap: 22px;
  }


  .nanko-case-hero__description p {
    font-size: 13px;
    line-height: 1.85;
  }


  .nanko-case-hero__description p br {
    display: none;
  }


  .nanko-case-hero__meta {
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;

    padding-top: 14px;
  }


  .nanko-case-hero__meta
  div:last-child {
    grid-column: 1 / -1;
  }


  .nanko-case-scrollcue {
    display: none;
  }



  /* TRANSITION */

  .nanko-case-transition {
    min-height: 45vh;

    flex-direction: column;

    gap: 8px;

    padding:
      80px 18px;

    align-items: flex-start;
  }


  .nanko-case-transition strong {
    white-space: normal;

    font-size:
      clamp(42px, 13vw, 62px);
  }



  /* OVERVIEW */

  .nanko-case-overview {
    padding:
      96px 0 120px;
  }


  .nanko-case-overview__head {
    gap: 54px;

    padding-bottom: 80px;
  }


  .nanko-case-overview__giant {
    margin-top: 24px;

    font-size:
      clamp(52px, 16vw, 70px);

    line-height: .88;
  }


  .nanko-case-overview__copy h2 {
    margin-bottom: 26px;

    font-size:
      clamp(31px, 9vw, 42px);

    line-height: 1.2;
  }


  .nanko-case-pc {
    display: none;
  }


  .nanko-case-overview__copy > p {
    font-size: 14px;
    line-height: 1.9;
  }


  .nanko-case-overview__lead {
    margin-top: 34px !important;

    font-size:
      25px !important;
  }



  /* PROJECT LINE */

  .nanko-case-projects {
    margin-top: 82px;
  }


  .nanko-case-projects__line {
    left: 13px;
    right: auto;

    top: 0;
    bottom: 0;

    width: 1px;
    height: auto;
  }


  .nanko-case-projects__line span {
    width: 1px;
    height: 100%;

    transform:
      scaleY(0);

    transform-origin:
      center top;
  }


  .nanko-case-projects.is-visible
  .nanko-case-projects__line span {
    transform:
      scaleY(1);
  }


  .nanko-case-project {
    grid-template-columns:
      28px
      minmax(0,1fr);

    gap: 18px;

    min-height: 0;

    padding-bottom: 52px;
  }


  .nanko-case-project + .nanko-case-project {
    margin-top: 20px;
  }


  .nanko-case-project__number {
    display: none;
  }


  .nanko-case-project__marker {
    grid-column: 1;

    width: 9px;
    height: 9px;

    margin:
      31px 0 0 9px;
  }


  .nanko-case-project__marker::after {
    display: none;
  }


  .nanko-case-project__content {
    grid-column: 2;

    padding:
      20px 0 36px;
  }


  .nanko-case-project h3 {
    margin-bottom: 18px;

    font-size:
      clamp(29px, 8vw, 38px);
  }


  .nanko-case-project__content
  > p:not(.nanko-case-project__en) {
    font-size: 14px;
    line-height: 1.85;
  }


  .nanko-case-project__preview {
    width: 100%;
    margin-top: 28px;

    clip-path:
      inset(0 round 6px);
  }



  /* STATEMENT */

  .nanko-case-overview__statement {
    margin-top: 70px;
    padding-top: 48px;
  }


  .nanko-case-overview__statement p {
    gap: 6px 9px;

    font-size: 8px;
  }


  .nanko-case-overview__statement strong {
    font-size:
      clamp(42px, 13vw, 64px);

    line-height: 1;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .nanko-case *,
  .nanko-case *::before,
  .nanko-case *::after {
    scroll-behavior: auto !important;

    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;
  }


  .nanko-case-hero__media {
    clip-path:
      inset(0 round 0);
  }


  .nanko-case-hero__media img {
    transform: none;
  }


  .nanko-case-hero__title {
    transform: none;
    opacity: 1;
  }


  .nanko-case-project,
  .nanko-case-overview__statement {
    opacity: 1;
    transform: none;
  }


  .nanko-case-projects__line span {
    transform: none !important;
  }

}

/* HERO 会社名 */

.nanko-case-hero__company {
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: .04em;
  color: #fff;
  opacity: 0.98;
}

@media (max-width: 767px) {
  .nanko-case-hero__company {
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: .03em;
  }
}

/* =========================================================
   01 HERO FINAL FIX
   MOBILE STABLE VERSION
========================================================= */

@media (max-width: 767px) {

  /* HEROそのものは通常スクロール */
  .nanko-case-hero {
    position: relative !important;

    height: auto !important;
    min-height: 0 !important;

    background: #090909 !important;

    overflow: hidden !important;
  }


  /* stickyを完全解除 */
  .nanko-case-hero__sticky {
    position: relative !important;

    top: auto !important;

    height: auto !important;
    min-height: 0 !important;

    overflow: hidden !important;

    background: #090909 !important;
  }


  /* =====================================
     背景画像
  ====================================== */

  .nanko-case-hero__media {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    clip-path: none !important;

    border-radius: 0 !important;

    overflow: hidden !important;
  }


  .nanko-case-hero__media picture,
  .nanko-case-hero__media img {
    width: 100% !important;
    height: 100% !important;
  }


  .nanko-case-hero__media img {
    object-fit: cover !important;

    object-position: center center !important;

    transform: none !important;

    scale: 1 !important;

    transition: none !important;

    will-change: auto !important;
  }


  .nanko-case-hero__shade {
    position: absolute !important;

    inset: 0 !important;

    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.16) 0%,
        rgba(0,0,0,.10) 26%,
        rgba(0,0,0,.22) 50%,
        rgba(0,0,0,.82) 100%
      ) !important;
  }


  /* =====================================
     CONTENT
  ====================================== */

  .nanko-case-hero__content {
    position: relative !important;

    z-index: 3 !important;

    width: calc(100% - 40px) !important;

    height: auto !important;

    min-height: 860px !important;

    margin-inline: auto !important;

    padding:
      38px 0
      42px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: flex-start !important;

    color: #fff !important;

    transform: none !important;
  }


  /* =====================================
     TOP
  ====================================== */

  .nanko-case-hero__top {
    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 15px !important;
  }


  .nanko-case-eyebrow {
    font-size: 9px !important;

    line-height: 1 !important;

    letter-spacing: .18em !important;

    white-space: nowrap !important;
  }


  .nanko-case-hero__client {
    font-size: 9px !important;

    line-height: 1 !important;

    letter-spacing: .18em !important;

    white-space: nowrap !important;
  }


  /* =====================================
     TITLE
  ====================================== */

  .nanko-case-hero__main {
    margin-top: 190px !important;

    padding: 0 !important;
  }


  .nanko-case-hero__title {
    width: 100% !important;

    max-width: none !important;

    transform: none !important;

    opacity: 1 !important;
  }


  .nanko-case-hero__company {
    display: block !important;

    margin:
      0 0 14px !important;

    font-size: 18px !important;

    line-height: 1.15 !important;

    letter-spacing: .03em !important;

    font-weight: 500 !important;

    color: #fff !important;
  }


  .nanko-case-hero__message {
    display: block !important;

    width: 100% !important;

    font-size:
      clamp(
        53px,
        14vw,
        66px
      ) !important;

    line-height: .95 !important;

    letter-spacing: -.06em !important;

    font-weight: 700 !important;

    white-space: normal !important;

    word-break: keep-all !important;
  }


  /* =====================================
     DESCRIPTION
  ====================================== */

  .nanko-case-hero__bottom {
    display: block !important;

    margin-top: auto !important;

    padding-top: 100px !important;
  }


  .nanko-case-hero__description {
    width: 100% !important;

    max-width: none !important;
  }


  .nanko-case-hero__description p {
    margin: 0 !important;

    font-size: 13px !important;

    line-height: 1.85 !important;

    letter-spacing: 0 !important;

    color:
      rgba(255,255,255,.82) !important;
  }


  .nanko-case-hero__description p + p {
    margin-top: 18px !important;
  }


  /*
   * 意味のまとまりごとに固定
   */
  .nanko-hero-copy-line {
    display: block !important;

    white-space: normal !important;
  }


  /* =====================================
     META
  ====================================== */

  .nanko-case-hero__meta {
    margin-top: 30px !important;

    padding-top: 18px !important;

    display: grid !important;

    grid-template-columns:
      1fr
      1fr !important;

    gap:
      18px
      20px !important;

    border-top:
      1px solid
      rgba(255,255,255,.32) !important;
  }


  .nanko-case-hero__meta div:last-child {
    grid-column:
      1 / -1 !important;
  }


  .nanko-case-hero__meta span {
    margin-bottom: 7px !important;

    font-size: 8px !important;

    line-height: 1 !important;

    letter-spacing: .16em !important;

    color:
      rgba(255,255,255,.55) !important;
  }


  .nanko-case-hero__meta strong {
    font-size: 10px !important;

    line-height: 1.5 !important;

    letter-spacing: .05em !important;

    color: #fff !important;
  }


  .nanko-case-scrollcue {
    display: none !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-63549d6 *//* =========================================================
   NANKO CASE
   03 THE CHALLENGE
   04 CRAFT × SCALE
========================================================= */


/* =========================================================
   03 THE CHALLENGE
========================================================= */

.nanko-case-challenge {
  position: relative;

  height: 175svh;

  background: #10100f;
  color: #f5f1e9;
}


.nanko-case-challenge__sticky {
  position: sticky;

  top: 46px;

  height:
    calc(100svh - 46px);

  min-height: 650px;

  overflow: hidden;

  background: #11110f;
}


/* BACKGROUND */

.nanko-case-challenge__bg {
  position: absolute;
  inset: 0;

  overflow: hidden;
}


.nanko-case-challenge__bg img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter:
    grayscale(.35)
    contrast(1.05);

  transform:
    scale(
      var(
        --nanko-challenge-image-scale,
        1.08
      )
    );

  opacity:
    var(
      --nanko-challenge-image-opacity,
      .16
    );

  will-change:
    transform,
    opacity;
}


.nanko-case-challenge__shade {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(13,13,12,.98) 0%,
      rgba(13,13,12,.88) 39%,
      rgba(13,13,12,.45) 72%,
      rgba(13,13,12,.72) 100%
    );
}



/* INNER */

.nanko-case-challenge__inner {
  position: relative;
  z-index: 2;

  width:
    min(
      1540px,
      calc(100% - 96px)
    );

  height: 100%;

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    minmax(340px, .85fr)
    minmax(560px, 1.15fr);

  gap:
    clamp(
      70px,
      9vw,
      150px
    );

  align-items: center;
}



/* INTRO */

.nanko-case-challenge__intro {
  position: relative;
  z-index: 3;

  max-width: 610px;
}


.nanko-case-challenge__intro h2 {
  margin-top: 28px;

  font-size:
    clamp(
      36px,
      4.1vw,
      70px
    );

  line-height: 1.15;

  letter-spacing: -.05em;

  font-weight: 650;

  word-break: keep-all;
  line-break: strict;
}


.nanko-case-challenge__copy {
  max-width: 520px;

  margin-top: 40px;
}


.nanko-case-challenge__copy p {
  font-size:
    clamp(
      14px,
      1vw,
      16px
    );

  line-height: 2;

  color:
    rgba(
      245,
      241,
      233,
      .68
    );
}


.nanko-case-challenge__copy p + p {
  margin-top: 18px;
}


.nanko-case-challenge__copy strong {
  color: #fff;
  font-weight: 600;
}



/* KEYWORDS */

.nanko-case-challenge__words {
  position: relative;

  align-self: center;

  display: flex;
  flex-direction: column;

  width: 100%;
}


.nanko-case-challenge__word {
  position: relative;

  display: grid;

  grid-template-columns:
    45px
    minmax(0,1fr)
    60px;

  align-items: center;

  min-height:
    clamp(
      76px,
      10vh,
      115px
    );

  border-top:
    1px solid
    rgba(255,255,255,.15);

  opacity: .18;

  transform:
    translateX(30px);

  transition:
    opacity .7s
      cubic-bezier(.22,1,.36,1),
    transform .7s
      cubic-bezier(.22,1,.36,1),
    color .7s ease;
}


.nanko-case-challenge__word:last-child {
  border-bottom:
    1px solid
    rgba(255,255,255,.15);
}


.nanko-case-challenge__word span {
  font-size: 9px;

  letter-spacing: .14em;

  color:
    rgba(255,255,255,.42);
}


.nanko-case-challenge__word strong {
  font-size:
    clamp(
      34px,
      5.2vw,
      90px
    );

  line-height: .9;

  letter-spacing: -.055em;

  font-weight: 650;
}


.nanko-case-challenge__word em {
  text-align: right;

  font-size: 11px;

  font-style: normal;

  letter-spacing: .12em;

  color:
    rgba(255,255,255,.56);
}



/* ACTIVE WORD */

.nanko-case-challenge__word.is-active {
  opacity: 1;

  transform:
    translateX(0);
}


.nanko-case-challenge__word.is-active strong {
  color: #fff;
}


.nanko-case-challenge__word.is-past {
  opacity: .44;

  transform:
    translateX(0);
}



/* ALL RESOLVED */

.nanko-case-challenge.is-resolved
.nanko-case-challenge__word {
  opacity: .82;
  transform: none;
}



/* QUESTION */

.nanko-case-challenge__question {
  position: absolute;

  left: 0;
  right: 0;
  bottom:
    clamp(
      28px,
      4vh,
      55px
    );

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  padding-top: 22px;

  border-top:
    1px solid
    rgba(255,255,255,.18);

  opacity:
    var(
      --nanko-question-opacity,
      0
    );

  transform:
    translateY(
      var(
        --nanko-question-y,
        25px
      )
    );

  will-change:
    transform,
    opacity;
}


.nanko-case-challenge__question > span {
  font-size: 9px;

  letter-spacing: .18em;

  color:
    rgba(255,255,255,.42);
}


.nanko-case-challenge__question strong {
  max-width: 650px;

  text-align: right;

  font-size:
    clamp(
      23px,
      2.4vw,
      40px
    );

  line-height: 1.4;

  letter-spacing: -.035em;

  font-weight: 550;
}



/* =========================================================
   03 → 04 BRIDGE
========================================================= */

.nanko-case-concept-bridge {
  position: relative;

  min-height: 56vh;

  padding:
    110px
    6vw;

  background: #f3f0e9;

  color: #11100e;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(100px, .5fr)
    auto;

  gap:
    clamp(
      25px,
      5vw,
      90px
    );

  align-items: center;

  overflow: hidden;
}


.nanko-case-concept-bridge p {
  font-size:
    clamp(
      26px,
      4.5vw,
      76px
    );

  line-height: .95;

  letter-spacing: -.05em;

  font-weight: 650;
}


.nanko-case-concept-bridge > span {
  display: block;

  width: 100%;
  height: 1px;

  background:
    rgba(17,16,14,.23);
}


.nanko-case-concept-bridge strong {
  font-size:
    clamp(
      72px,
      13vw,
      230px
    );

  line-height: .72;

  letter-spacing: -.08em;

  color: #a85132;
}



/* =========================================================
   04 CONCEPT
========================================================= */

.nanko-case-concept {
  position: relative;

  background: #f3f0e9;
  color: #11100e;

  padding-top:
    clamp(
      120px,
      12vw,
      200px
    );
}



/* INTRO */

.nanko-case-concept__intro {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(400px, .8fr);

  gap:
    clamp(
      60px,
      10vw,
      170px
    );

  align-items: start;

  padding-bottom:
    clamp(
      110px,
      12vw,
      190px
    );
}


.nanko-case-concept__display {
  margin-top: 35px;

  font-size:
    clamp(
      76px,
      10.5vw,
      180px
    );

  line-height: .73;

  letter-spacing: -.075em;

  font-weight: 700;
}


.nanko-case-concept__display span {
  display: block;

  margin:
    .17em 0 .12em;

  color: #a85132;

  font-weight: 300;
}



/* COPY */

.nanko-case-concept__copy {
  max-width: 600px;
}


.nanko-case-concept__copy h2 {
  margin-bottom: 38px;

  font-size:
    clamp(
      36px,
      3.8vw,
      64px
    );

  line-height: 1.14;

  letter-spacing: -.05em;

  font-weight: 650;

  word-break: keep-all;
}


.nanko-case-concept__copy p {
  font-size:
    clamp(
      15px,
      1.1vw,
      18px
    );

  line-height: 2;

  color:
    rgba(
      17,
      16,
      14,
      .67
    );
}


.nanko-case-concept__copy p + p {
  margin-top: 19px;
}


.nanko-case-concept__copy strong {
  color: #11100e;

  font-weight: 650;
}



/* =========================================================
   SPLIT VISUAL
========================================================= */

.nanko-case-concept__visual {
  --nanko-split: 50%;

  position: relative;

  width: 100%;
  height:
    min(
      88svh,
      920px
    );

  min-height: 650px;

  overflow: hidden;

  background: #111;
}



/* PANEL */

.nanko-case-concept__panel {
  position: absolute;

  top: 0;
  bottom: 0;

  overflow: hidden;

  will-change:
    width,
    left;
}


/* CRAFT */

.nanko-case-concept__panel--craft {
  left: 0;

  width:
    var(--nanko-split);
}


/* SCALE */

.nanko-case-concept__panel--scale {
  left:
    var(--nanko-split);

  right: 0;
}



/* IMAGE */

.nanko-case-concept__panel img {
  position: absolute;

  top: 0;

  width: 100vw;
  max-width: none;

  height: 100%;

  object-fit: cover;

  will-change: transform;
}


.nanko-case-concept__panel--craft img {
  left: 0;

  object-position: center;
}


.nanko-case-concept__panel--scale img {
  right: 0;

  object-position: center;
}



/* OVERLAY */

.nanko-case-concept__overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.06),
      rgba(0,0,0,.06) 52%,
      rgba(0,0,0,.7) 100%
    );
}



/* PANEL CONTENT */

.nanko-case-concept__panel-content {
  position: absolute;
  z-index: 3;

  inset:
    34px
    38px
    40px;

  display: flex;

  flex-direction: column;

  justify-content:
    space-between;

  color: #fff;
}


.nanko-case-concept__side {
  font-size: 9px;

  letter-spacing: .2em;

  color:
    rgba(
      255,
      255,
      255,
      .75
    );
}


.nanko-case-concept__panel-content p {
  margin-bottom: 15px;

  font-size: 9px;

  letter-spacing: .17em;

  color:
    rgba(
      255,
      255,
      255,
      .64
    );
}


.nanko-case-concept__panel-content strong {
  display: block;

  font-size:
    clamp(
      31px,
      3.4vw,
      58px
    );

  line-height: 1.12;

  letter-spacing: -.045em;

  font-weight: 600;
}



/* CENTER X */

.nanko-case-concept__cross {
  position: absolute;
  z-index: 5;

  top: 50%;

  left:
    var(--nanko-split);

  width: 90px;
  height: 90px;

  border-radius: 50%;

  transform:
    translate(
      -50%,
      -50%
    );

  display: flex;

  align-items: center;
  justify-content: center;

  background:
    rgba(
      17,
      16,
      14,
      .88
    );

  color: #fff;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .32
    );

  backdrop-filter:
    blur(10px);

  font-size: 38px;

  font-weight: 200;

  transition:
    width .4s ease,
    height .4s ease;
}



/* =========================================================
   CONCEPT FOOTER
========================================================= */

.nanko-case-concept__footer {
  padding:
    clamp(
      80px,
      10vw,
      150px
    )
    0;

  background: #11100e;

  color: #f3f0e9;
}


.nanko-case-concept__footer-grid {
  display: grid;

  grid-template-columns:
    auto
    minmax(40px,1fr)
    auto
    minmax(40px,1fr)
    auto;

  gap:
    clamp(
      16px,
      3vw,
      45px
    );

  align-items: center;
}


.nanko-case-concept__footer-grid span {
  font-size: 10px;

  letter-spacing: .2em;

  color:
    rgba(
      255,
      255,
      255,
      .5
    );
}


.nanko-case-concept__footer-grid i {
  height: 1px;

  background:
    rgba(
      255,
      255,
      255,
      .2
    );
}


.nanko-case-concept__footer-grid strong {
  font-size:
    clamp(
      24px,
      3vw,
      47px
    );

  line-height: 1.3;

  letter-spacing: -.035em;

  font-weight: 550;

  text-align: center;

  white-space: nowrap;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .nanko-case-challenge__inner {
    width:
      calc(100% - 56px);

    grid-template-columns:
      .82fr
      1.18fr;

    gap: 55px;
  }


  .nanko-case-challenge__intro h2 {
    font-size:
      clamp(
        34px,
        4.7vw,
        52px
      );
  }


  .nanko-case-concept__intro {
    grid-template-columns: 1fr;

    gap: 65px;
  }


  .nanko-case-concept__copy {
    max-width: 700px;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  /* CHALLENGE */

  .nanko-case-challenge {
    height: auto;

    background: #11100e;
  }


  .nanko-case-challenge__sticky {
    position: relative;

    top: auto;

    height: auto;
    min-height: 0;

    padding:
      95px 0 85px;
  }


  .nanko-case-challenge__bg {
    opacity: .22;
  }


  .nanko-case-challenge__shade {
    background:
      linear-gradient(
        180deg,
        rgba(13,13,12,.96),
        rgba(13,13,12,.82),
        rgba(13,13,12,.94)
      );
  }


  .nanko-case-challenge__inner {
    width:
      calc(100% - 36px);

    height: auto;

    display: block;
  }


  .nanko-case-challenge__intro h2 {
    margin-top: 23px;

    font-size:
      clamp(
        34px,
        10vw,
        44px
      );

    line-height: 1.19;
  }


  .nanko-case-challenge__copy {
    margin-top: 34px;
  }


  .nanko-case-challenge__copy p {
    font-size: 14px;

    line-height: 1.9;
  }


  .nanko-case-challenge__words {
    margin-top: 70px;
  }


  .nanko-case-challenge__word {
    grid-template-columns:
      29px
      minmax(0,1fr)
      40px;

    min-height: 78px;

    opacity: .75;

    transform: none;
  }


  .nanko-case-challenge__word strong {
    font-size:
      clamp(
        35px,
        11vw,
        50px
      );
  }


  .nanko-case-challenge__word em {
    font-size: 9px;
  }


  .nanko-case-challenge__question {
    position: relative;

    left: auto;
    right: auto;
    bottom: auto;

    margin-top: 70px;

    display: block;

    opacity: 1;
    transform: none;
  }


  .nanko-case-challenge__question strong {
    display: block;

    margin-top: 25px;

    text-align: left;

    font-size: 27px;

    line-height: 1.45;
  }



  /* BRIDGE */

  .nanko-case-concept-bridge {
    min-height: 55vh;

    padding:
      90px 18px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 35px;
  }


  .nanko-case-concept-bridge p {
    font-size:
      clamp(
        34px,
        10vw,
        47px
      );
  }


  .nanko-case-concept-bridge > span {
    width: 100%;
  }


  .nanko-case-concept-bridge strong {
    font-size:
      clamp(
        100px,
        30vw,
        145px
      );
  }



  /* CONCEPT */

  .nanko-case-concept {
    padding-top: 100px;
  }


  .nanko-case-concept__intro {
    gap: 62px;

    padding-bottom: 95px;
  }


  .nanko-case-concept__display {
    font-size:
      clamp(
        69px,
        21vw,
        94px
      );
  }


  .nanko-case-concept__copy h2 {
    font-size:
      clamp(
        34px,
        10vw,
        43px
      );
  }


  .nanko-case-concept__copy p {
    font-size: 14px;

    line-height: 1.9;
  }



  /* MOBILE SPLIT BECOMES STACK */

  .nanko-case-concept__visual {
    height: auto;

    min-height: 0;

    overflow: visible;

    background: #111;
  }


  .nanko-case-concept__panel {
    position: relative;

    left: auto !important;
    right: auto !important;

    width: 100% !important;

    height: 72svh;

    min-height: 520px;
  }


  .nanko-case-concept__panel img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
  }


  .nanko-case-concept__panel-content {
    inset:
      24px
      18px
      28px;
  }


  .nanko-case-concept__panel-content strong {
    font-size:
      clamp(
        31px,
        9vw,
        42px
      );
  }


  .nanko-case-concept__cross {
    position: relative;

    top: auto;
    left: auto;

    width: 70px;
    height: 70px;

    margin:
      -35px auto;

    transform: none;

    z-index: 10;

    font-size: 30px;
  }



  /* FOOTER */

  .nanko-case-concept__footer {
    padding:
      85px 0;
  }


  .nanko-case-concept__footer-grid {
    grid-template-columns: 1fr;

    gap: 21px;

    text-align: center;
  }


  .nanko-case-concept__footer-grid i {
    width: 45px;

    margin-inline: auto;
  }


  .nanko-case-concept__footer-grid strong {
    white-space: normal;

    font-size: 31px;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .nanko-case-challenge__word {
    opacity: .85;
    transform: none;
  }


  .nanko-case-challenge__question {
    opacity: 1;
    transform: none;
  }


  .nanko-case-challenge__bg img {
    transform: none;
  }


  .nanko-case-concept__visual {
    --nanko-split: 50% !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d067d81 *//* =========================================================
   NANKO KOGYO CASE STUDY — FINAL CONSOLIDATED CSS
   2026-09-26
   HTML structure: 01–09 confirmed
   CSS only / no JS-dependent visibility
========================================================= */

:root {
  --nk-ink: #11100e;
  --nk-black: #0c0c0b;
  --nk-black-2: #151411;
  --nk-paper: #f3f0e9;
  --nk-paper-2: #e8e3d9;
  --nk-white: #f8f6f0;
  --nk-rust: #a85132;
  --nk-gold: #b69a58;
  --nk-line: rgba(17, 16, 14, .15);
  --nk-line-dark: rgba(255, 255, 255, .15);
  --nk-muted: rgba(17, 16, 14, .62);
  --nk-muted-dark: rgba(255, 255, 255, .60);
  --nk-container: 1480px;
  --nk-gutter: 96px;
  --nk-ease: cubic-bezier(.22, 1, .36, 1);
}

/* =========================================================
   GLOBAL
========================================================= */

.nanko-case-pageid,
.nanko-hero2,
.nanko-transition2,
.nanko-overview2v3,
.nanko-strategy3,
.nanko-web4,
.nanko-photo6,
.nanko-benkei9,
.nanko-beyond10,
.nanko-proof8,
.nanko-final9 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

.nanko-case-pageid *,
.nanko-hero2 *,
.nanko-transition2 *,
.nanko-overview2v3 *,
.nanko-strategy3 *,
.nanko-web4 *,
.nanko-photo6 *,
.nanko-benkei9 *,
.nanko-beyond10 *,
.nanko-proof8 *,
.nanko-final9 *,
.nanko-case-pageid *::before,
.nanko-case-pageid *::after,
.nanko-hero2 *::before,
.nanko-hero2 *::after,
.nanko-transition2 *::before,
.nanko-transition2 *::after,
.nanko-overview2v3 *::before,
.nanko-overview2v3 *::after,
.nanko-strategy3 *::before,
.nanko-strategy3 *::after,
.nanko-web4 *::before,
.nanko-web4 *::after,
.nanko-photo6 *::before,
.nanko-photo6 *::after,
.nanko-benkei9 *::before,
.nanko-benkei9 *::after,
.nanko-beyond10 *::before,
.nanko-beyond10 *::after,
.nanko-proof8 *::before,
.nanko-proof8 *::after,
.nanko-final9 *::before,
.nanko-final9 *::after {
  box-sizing: border-box;
}

.nanko-hero2 :is(h1, h2, h3, h4, p, figure),
.nanko-transition2 :is(h1, h2, h3, h4, p, figure),
.nanko-overview2v3 :is(h1, h2, h3, h4, p, figure),
.nanko-strategy3 :is(h1, h2, h3, h4, p, figure),
.nanko-web4 :is(h1, h2, h3, h4, p, figure),
.nanko-photo6 :is(h1, h2, h3, h4, p, figure),
.nanko-benkei9 :is(h1, h2, h3, h4, p, figure),
.nanko-beyond10 :is(h1, h2, h3, h4, p, figure),
.nanko-proof8 :is(h1, h2, h3, h4, p, figure),
.nanko-final9 :is(h1, h2, h3, h4, p, figure) {
  margin: 0;
}

.nanko-hero2 img,
.nanko-overview2v3 img,
.nanko-strategy3 img,
.nanko-web4 img,
.nanko-photo6 img,
.nanko-benkei9 img,
.nanko-beyond10 img,
.nanko-proof8 img,
.nanko-final9 img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.nanko-hero2 a,
.nanko-overview2v3 a,
.nanko-strategy3 a,
.nanko-web4 a,
.nanko-photo6 a,
.nanko-benkei9 a,
.nanko-beyond10 a,
.nanko-proof8 a,
.nanko-final9 a {
  color: inherit;
  text-decoration: none;
}

.nanko-overview2v3__container,
.nanko-strategy3__container,
.nanko-web4__container,
.nanko-photo6__container,
.nanko-benkei9__container,
.nanko-beyond10__container,
.nanko-proof8__container {
  width: min(var(--nk-container), calc(100% - var(--nk-gutter)));
  margin-inline: auto;
}

/* =========================================================
   PAGE ID
========================================================= */

.nanko-case-pageid {
  position: sticky;
  top: 0;
  z-index: 300;
  height: 46px;
  background: rgba(243, 240, 233, .94);
  border-bottom: 1px solid rgba(17, 16, 14, .11);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nanko-case-pageid__inner {
  width: min(1600px, calc(100% - 48px));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .15em;
  color: var(--nk-ink);
}

.nanko-case-pageid__left,
.nanko-case-pageid__progress {
  display: flex;
  align-items: center;
}

.nanko-case-pageid__left { gap: 10px; }
.nanko-case-pageid__progress { gap: 5px; font-variant-numeric: tabular-nums; }
.nanko-case-pageid__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nk-rust); }
.nanko-case-pageid__slash { opacity: .32; }

/* =========================================================
   01 HERO
========================================================= */

.nanko-hero2 {
  position: relative;
  min-height: calc(100svh - 46px);
  overflow: hidden;
  isolation: isolate;
  background: #090909;
  color: #fff;
}

.nanko-hero2__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.nanko-hero2__media picture,
.nanko-hero2__media img {
  width: 100%;
  height: 100%;
}

.nanko-hero2__media img {
  object-fit: cover;
  object-position: center;
}

.nanko-hero2__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.04) 30%, rgba(0,0,0,.12) 52%, rgba(0,0,0,.78) 100%),
    linear-gradient(90deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,.04) 62%, transparent 100%);
}

.nanko-hero2__inner {
  position: relative;
  z-index: 2;
  width: min(1600px, calc(100% - 96px));
  min-height: calc(100svh - 46px);
  margin-inline: auto;
  padding: clamp(48px, 6vh, 76px) 0 clamp(42px, 5vh, 66px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.nanko-hero2__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nanko-hero2__kicker,
.nanko-hero2__client {
  font-size: 11px;
  line-height: 1;
  letter-spacing: .20em;
  font-weight: 700;
  color: rgba(255,255,255,.78);
}

.nanko-hero2__title {
  align-self: center;
  width: 100%;
  padding: clamp(55px, 8vh, 120px) 0 clamp(45px, 6vh, 90px);
}

.nanko-hero2__company {
  margin-bottom: clamp(16px, 2vw, 26px) !important;
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.15;
  letter-spacing: .05em;
  font-weight: 500;
}

.nanko-hero2__title h1 {
  width: min(100%, 1380px);
  font-size: clamp(72px, 9.2vw, 158px);
  line-height: .92;
  letter-spacing: -.065em;
  font-weight: 700;
  word-break: keep-all;
}

.nanko-hero2__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(460px, .95fr);
  gap: clamp(60px, 8vw, 130px);
  align-items: end;
}

.nanko-hero2__copy { max-width: 620px; }
.nanko-hero2__copy p { font-size: clamp(14px, 1vw, 16px); line-height: 1.9; color: rgba(255,255,255,.86); }
.nanko-hero2__copy p + p { margin-top: 16px; }
.nanko-hero2__copy p span { display: block; }

.nanko-hero2__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.34);
}

.nanko-hero2__meta span { display: block; margin-bottom: 8px; font-size: 9px; letter-spacing: .18em; color: rgba(255,255,255,.58); }
.nanko-hero2__meta strong { display: block; font-size: 10px; line-height: 1.55; letter-spacing: .06em; font-weight: 650; color: rgba(255,255,255,.96); }

/* HERO → OVERVIEW transition */
.nanko-transition2 {
  position: relative;
  min-height: 46vh;
  padding: clamp(90px, 10vw, 160px) 5vw;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--nk-ink);
  color: var(--nk-white);
}

.nanko-transition2__inner {
  width: min(1500px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 34px);
  text-align: center;
}

.nanko-transition2 span { font-size: clamp(9px, .8vw, 13px); letter-spacing: .22em; color: rgba(255,255,255,.45); }
.nanko-transition2 strong { font-size: clamp(44px, 5.8vw, 96px); line-height: .9; letter-spacing: -.055em; font-weight: 700; }
.nanko-transition2 i { width: clamp(32px, 4vw, 70px); height: 1px; background: rgba(255,255,255,.28); }

/* =========================================================
   SHARED SECTION TYPOGRAPHY
========================================================= */

.nanko-overview2v3__eyebrow,
.nanko-strategy3__eyebrow,
.nanko-web4__eyebrow,
.nanko-photo6__eyebrow,
.nanko-benkei9__eyebrow,
.nanko-beyond10__eyebrow,
.nanko-proof8__eyebrow,
.nanko-final9__eyebrow,
.nanko-strategy3__label,
.nanko-web4__label,
.nanko-benkei9__label,
.nanko-beyond10__label,
.nanko-proof8__label {
  font-size: 10px;
  line-height: 1;
  letter-spacing: .21em;
  font-weight: 700;
  text-transform: uppercase;
}

.nanko-overview2v3__eyebrow,
.nanko-strategy3__eyebrow,
.nanko-web4__eyebrow,
.nanko-photo6__eyebrow,
.nanko-beyond10__eyebrow,
.nanko-proof8__label {
  color: var(--nk-rust);
}

/* =========================================================
   02 PROJECT OVERVIEW / CHALLENGE
========================================================= */

.nanko-overview2v3 { background: var(--nk-paper); color: var(--nk-ink); overflow: hidden; }

.nanko-overview2v3__intro { padding: clamp(105px, 9vw, 160px) 0 clamp(80px, 7vw, 115px); }
.nanko-overview2v3__intro-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); gap: clamp(65px, 8vw, 135px); align-items: start; }
.nanko-overview2v3__eyebrow { margin-bottom: 28px !important; }
.nanko-overview2v3__display { display: flex; flex-direction: column; font-size: clamp(58px, 6.7vw, 106px); line-height: .82; letter-spacing: -.07em; font-weight: 700; }
.nanko-overview2v3__display span { display: block; }
.nanko-overview2v3__intro-right { padding-top: clamp(8px, 2vw, 34px); }
.nanko-overview2v3__intro-right h2 { margin-bottom: 30px; font-size: clamp(34px, 3.1vw, 52px); line-height: 1.17; letter-spacing: -.04em; font-weight: 650; }
.nanko-overview2v3__intro-right > p { max-width: 620px; font-size: clamp(14px, 1vw, 17px); line-height: 1.9; color: var(--nk-muted); }
.nanko-overview2v3__intro-right > p + p { margin-top: 16px; }
.nanko-overview2v3__intro-question { display: block; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--nk-line); font-size: clamp(23px, 2.1vw, 34px); line-height: 1.38; letter-spacing: -.035em; font-weight: 650; }

.nanko-overview2v3__meta { display: grid; grid-template-columns: 1fr 1fr 2fr; margin-top: clamp(60px, 6vw, 90px); border-top: 1px solid var(--nk-line); border-left: 1px solid var(--nk-line); }
.nanko-overview2v3__meta > div { padding: 20px 24px; border-right: 1px solid var(--nk-line); border-bottom: 1px solid var(--nk-line); }
.nanko-overview2v3__meta span { display: block; margin-bottom: 7px; font-size: 7px; letter-spacing: .18em; color: rgba(17,16,14,.43); }
.nanko-overview2v3__meta strong { display: block; font-size: clamp(12px, .9vw, 15px); line-height: 1.5; font-weight: 600; }

.nanko-overview2v3__touchpoints { padding: clamp(75px, 7vw, 110px) 0 clamp(95px, 8vw, 135px); background: var(--nk-paper-2); }
.nanko-overview2v3__touch-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.nanko-overview2v3__touch-head span { font-size: 8px; letter-spacing: .18em; color: rgba(17,16,14,.42); }
.nanko-overview2v3__touch-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.nanko-overview2v3__touch { background: var(--nk-paper); min-width: 0; }
.nanko-overview2v3__image { aspect-ratio: 4 / 3; overflow: hidden; background: #d7d2c9; }
.nanko-overview2v3__image img { height: 100%; object-fit: cover; transition: transform .7s var(--nk-ease); }
.nanko-overview2v3__touch:first-child .nanko-overview2v3__image img { object-position: top center; }
.nanko-overview2v3__touch-body { padding: 20px 19px 24px; }
.nanko-overview2v3__touch-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.nanko-overview2v3__touch-meta span,
.nanko-overview2v3__touch-meta small { font-size: 7px; line-height: 1.4; letter-spacing: .14em; color: rgba(17,16,14,.43); }
.nanko-overview2v3__touch-meta span { color: var(--nk-rust); }
.nanko-overview2v3__touch h3 { margin-bottom: 11px; font-size: clamp(20px, 1.7vw, 27px); line-height: 1.18; letter-spacing: -.035em; font-weight: 650; }
.nanko-overview2v3__touch p { font-size: clamp(12px, .85vw, 14px); line-height: 1.75; color: rgba(17,16,14,.58); }

.nanko-overview2v3__challenge { padding: clamp(95px, 9vw, 145px) 0 clamp(105px, 9vw, 155px); background: var(--nk-black); color: var(--nk-white); }
.nanko-overview2v3__challenge-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr); gap: clamp(60px, 8vw, 130px); align-items: start; }
.nanko-overview2v3__eyebrow--light { color: rgba(255,255,255,.48); }
.nanko-overview2v3__challenge-title h2 { max-width: 850px; font-size: clamp(43px, 4.7vw, 74px); line-height: 1.04; letter-spacing: -.052em; font-weight: 650; }
.nanko-overview2v3__challenge-copy { padding-top: 22px; }
.nanko-overview2v3__challenge-copy p { max-width: 600px; font-size: clamp(14px, 1vw, 16px); line-height: 1.9; color: rgba(255,255,255,.58); }
.nanko-overview2v3__challenge-copy p + p { margin-top: 18px; }
.nanko-overview2v3__challenge-copy strong { color: #fff; font-weight: 600; }
.nanko-overview2v3__keywords { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: clamp(60px, 6vw, 90px); border-top: 1px solid var(--nk-line-dark); border-left: 1px solid var(--nk-line-dark); }
.nanko-overview2v3__keywords > div { min-height: 180px; padding: 26px; display: flex; flex-direction: column; border-right: 1px solid var(--nk-line-dark); border-bottom: 1px solid var(--nk-line-dark); }
.nanko-overview2v3__keywords span { font-size: 7px; letter-spacing: .16em; color: rgba(255,255,255,.35); }
.nanko-overview2v3__keywords strong { margin-top: auto; font-size: clamp(22px, 2vw, 31px); line-height: 1; letter-spacing: -.035em; font-weight: 650; }
.nanko-overview2v3__keywords small { margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.46); }
.nanko-overview2v3__challenge-question { margin-top: clamp(48px, 5vw, 72px); padding-top: 26px; border-top: 1px solid var(--nk-line-dark); }
.nanko-overview2v3__challenge-question span { display: block; margin-bottom: 14px; font-size: 8px; letter-spacing: .19em; color: var(--nk-rust); }
.nanko-overview2v3__challenge-question strong { display: block; max-width: 1000px; font-size: clamp(30px, 3.3vw, 52px); line-height: 1.13; letter-spacing: -.045em; font-weight: 650; }

/* =========================================================
   03 STRATEGY / CRAFT × SCALE
========================================================= */

.nanko-strategy3 { background: var(--nk-paper); color: var(--nk-ink); overflow: hidden; }
.nanko-strategy3__intro { padding: clamp(105px, 9vw, 160px) 0 clamp(90px, 8vw, 135px); }
.nanko-strategy3__intro-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); gap: clamp(65px, 8vw, 135px); align-items: start; }
.nanko-strategy3__eyebrow { margin-bottom: 28px !important; color: var(--nk-rust); }
.nanko-strategy3__display { display: flex; flex-direction: column; align-items: flex-start; font-size: clamp(70px, 8vw, 132px); line-height: .78; letter-spacing: -.07em; font-weight: 700; }
.nanko-strategy3__display i { margin: .08em 0 .06em .12em; font-size: .48em; font-style: normal; color: var(--nk-rust); }
.nanko-strategy3__intro-right { padding-top: 12px; }
.nanko-strategy3__intro-right h2 { margin-bottom: 32px; font-size: clamp(34px, 3.2vw, 54px); line-height: 1.18; letter-spacing: -.04em; font-weight: 650; }
.nanko-strategy3__intro-right > p { max-width: 650px; font-size: clamp(14px, 1vw, 17px); line-height: 1.9; color: var(--nk-muted); }
.nanko-strategy3__intro-right > p + p { margin-top: 18px; }
.nanko-strategy3__intro-right strong { color: var(--nk-ink); }

.nanko-strategy3__visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 68svh; background: var(--nk-black); }
.nanko-strategy3__panel { position: relative; min-height: 68svh; overflow: hidden; }
.nanko-strategy3__panel img { height: 100%; object-fit: cover; }
.nanko-strategy3__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.10) 45%, rgba(0,0,0,.76)); }
.nanko-strategy3__panel figcaption { position: absolute; z-index: 2; left: clamp(24px, 4vw, 62px); right: clamp(24px, 4vw, 62px); bottom: clamp(26px, 4vw, 58px); color: #fff; }
.nanko-strategy3__panel figcaption > span { display: block; margin-bottom: 24px; font-size: 9px; letter-spacing: .18em; color: rgba(255,255,255,.62); }
.nanko-strategy3__panel figcaption p { margin-bottom: 9px; font-size: 8px; letter-spacing: .18em; color: rgba(255,255,255,.52); }
.nanko-strategy3__panel figcaption strong { display: block; font-size: clamp(32px, 3.2vw, 52px); line-height: 1.05; letter-spacing: -.045em; font-weight: 650; }
.nanko-strategy3__cross { position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -50%; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(243,240,233,.94); color: var(--nk-ink); font-size: 34px; line-height: 1; }

.nanko-strategy3__language { padding: clamp(85px, 8vw, 130px) 0 clamp(95px, 8vw, 140px); background: var(--nk-paper-2); }
.nanko-strategy3__language-head { display: grid; grid-template-columns: .65fr 1.35fr; gap: 50px; align-items: end; margin-bottom: 42px; }
.nanko-strategy3__label { color: var(--nk-rust); }
.nanko-strategy3__language-head h3 { max-width: 800px; font-size: clamp(34px, 3.4vw, 55px); line-height: 1.1; letter-spacing: -.045em; font-weight: 650; }
.nanko-strategy3__language-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--nk-line); border-left: 1px solid var(--nk-line); }
.nanko-strategy3__language-grid > div { min-height: 210px; padding: 26px; display: flex; flex-direction: column; border-right: 1px solid var(--nk-line); border-bottom: 1px solid var(--nk-line); }
.nanko-strategy3__language-grid span { font-size: 7px; letter-spacing: .15em; color: rgba(17,16,14,.38); }
.nanko-strategy3__language-grid strong { margin-top: auto; margin-bottom: 14px; font-size: clamp(22px, 2vw, 30px); line-height: 1; letter-spacing: -.035em; }
.nanko-strategy3__language-grid p { max-width: 230px; font-size: 12px; line-height: 1.75; color: rgba(17,16,14,.55); }

/* =========================================================
   04 CORPORATE WEBSITE
========================================================= */

.nanko-web4 { background: var(--nk-paper); color: var(--nk-ink); overflow: hidden; }
.nanko-web4__intro { padding: clamp(105px, 9vw, 160px) 0 clamp(85px, 7vw, 125px); }
.nanko-web4__intro-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); gap: clamp(65px, 8vw, 135px); align-items: start; }
.nanko-web4__eyebrow { margin-bottom: 28px !important; color: var(--nk-rust); }
.nanko-web4__display { display: flex; flex-direction: column; font-size: clamp(62px, 7.2vw, 116px); line-height: .79; letter-spacing: -.07em; font-weight: 700; }
.nanko-web4__intro-right { padding-top: 12px; }
.nanko-web4__intro-right h2 { margin-bottom: 32px; font-size: clamp(34px, 3.2vw, 54px); line-height: 1.18; letter-spacing: -.04em; font-weight: 650; }
.nanko-web4__intro-right > p { max-width: 650px; font-size: clamp(14px, 1vw, 17px); line-height: 1.9; color: var(--nk-muted); }
.nanko-web4__intro-right > p + p { margin-top: 18px; }
.nanko-web4__lead { margin-top: 30px !important; padding-top: 24px; border-top: 1px solid var(--nk-line); font-size: clamp(22px, 2vw, 31px) !important; line-height: 1.42 !important; font-weight: 650; color: var(--nk-ink) !important; }

.nanko-web4__main { padding: 0 0 clamp(90px, 8vw, 140px); }
.nanko-web4__main-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 24px; }
.nanko-web4__label { color: var(--nk-rust); }
.nanko-web4__main-head h3 { margin-top: 10px; font-size: clamp(28px, 2.7vw, 44px); line-height: 1; letter-spacing: -.04em; }
.nanko-web4__live-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid rgba(17,16,14,.34); font-size: 10px; letter-spacing: .15em; font-weight: 650; }
.nanko-web4__live-link i { font-style: normal; }

.nanko-web4__browser { display: block; overflow: hidden; border: 1px solid var(--nk-line); background: #d8d3ca; box-shadow: 0 26px 70px rgba(17,16,14,.09); }
.nanko-web4__browser-bar { height: 42px; padding: 0 16px; display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; gap: 12px; background: #f7f4ed; border-bottom: 1px solid var(--nk-line); }
.nanko-web4__browser-dots { display: flex; gap: 6px; }
.nanko-web4__browser-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(17,16,14,.26); }
.nanko-web4__browser-bar > span { text-align: center; font-size: 9px; letter-spacing: .08em; color: rgba(17,16,14,.46); }
.nanko-web4__browser-bar > strong { text-align: right; font-size: 8px; letter-spacing: .14em; color: var(--nk-rust); }
.nanko-web4__browser-screen { aspect-ratio: 16 / 9; overflow: hidden; background: #ddd7cd; }
.nanko-web4__browser-screen img { height: 100%; object-fit: cover; object-position: top center; }

.nanko-web4__flow { padding: clamp(80px, 7vw, 115px) 0; background: var(--nk-black); color: var(--nk-white); }
.nanko-web4__flow-head { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 42px; }
.nanko-web4__flow-head .nanko-web4__label { color: var(--nk-gold); }
.nanko-web4__flow-head > p:last-child { max-width: 560px; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.55); }
.nanko-web4__flow-line { display: grid; grid-template-columns: repeat(9, auto); align-items: center; gap: 14px; padding-top: 30px; border-top: 1px solid var(--nk-line-dark); }
.nanko-web4__flow-line > div { min-width: 0; }
.nanko-web4__flow-line > div span { display: block; margin-bottom: 16px; font-size: 7px; letter-spacing: .14em; color: rgba(255,255,255,.34); }
.nanko-web4__flow-line > div strong { display: block; font-size: clamp(18px, 1.55vw, 25px); letter-spacing: -.025em; }
.nanko-web4__flow-line > div small { display: block; margin-top: 7px; font-size: 10px; color: rgba(255,255,255,.46); }
.nanko-web4__flow-line > i { font-style: normal; color: var(--nk-gold); }

.nanko-web4__screens { padding: clamp(95px, 8vw, 145px) 0 clamp(105px, 9vw, 155px); background: var(--nk-paper); }
.nanko-web4__screens-head { margin-bottom: 42px; }
.nanko-web4__screens-head h3 { margin-top: 14px; max-width: 850px; font-size: clamp(34px, 3.5vw, 56px); line-height: 1.08; letter-spacing: -.045em; font-weight: 650; }
.nanko-web4__screens-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.nanko-web4__screen-image { aspect-ratio: 4 / 3; overflow: hidden; background: #ddd8ce; }
.nanko-web4__screen-image img { height: 100%; object-fit: cover; }
.nanko-web4__screen figcaption { padding-top: 14px; border-top: 1px solid var(--nk-line); margin-top: 12px; }
.nanko-web4__screen figcaption span { display: block; margin-bottom: 7px; font-size: 7px; letter-spacing: .15em; color: rgba(17,16,14,.42); }
.nanko-web4__screen figcaption strong { display: block; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.35; font-weight: 650; }

/* =========================================================
   05 PHOTO & VIDEO
========================================================= */

.nanko-photo6 { background: var(--nk-paper); color: var(--nk-ink); overflow: hidden; }
.nanko-photo6__intro { padding: clamp(105px, 9vw, 160px) 0 clamp(85px, 7vw, 125px); }
.nanko-photo6__intro-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); gap: clamp(65px, 8vw, 135px); align-items: start; }
.nanko-photo6__eyebrow { margin-bottom: 28px !important; color: var(--nk-rust); }
.nanko-photo6__display { display: flex; flex-direction: column; font-size: clamp(70px, 8vw, 130px); line-height: .78; letter-spacing: -.07em; font-weight: 700; }
.nanko-photo6__intro-right { padding-top: 12px; }
.nanko-photo6__intro-right h2 { margin-bottom: 32px; font-size: clamp(34px, 3.2vw, 54px); line-height: 1.18; letter-spacing: -.04em; font-weight: 650; }
.nanko-photo6__intro-right > p { max-width: 650px; font-size: clamp(14px, 1vw, 17px); line-height: 1.9; color: var(--nk-muted); }
.nanko-photo6__intro-right > p + p { margin-top: 18px; }
.nanko-photo6__lead { margin-top: 30px !important; padding-top: 24px; border-top: 1px solid var(--nk-line); font-size: clamp(22px, 2vw, 31px) !important; line-height: 1.42 !important; font-weight: 650; color: var(--nk-ink) !important; }

.nanko-photo6__gallery { padding: 0 0 clamp(100px, 9vw, 150px); }
.nanko-photo6__sheet { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 14px; }
.nanko-photo6__item { position: relative; overflow: hidden; min-height: 360px; background: #d8d3ca; }
.nanko-photo6__item--craft { grid-column: span 5; aspect-ratio: 4 / 5; }
.nanko-photo6__item--space { grid-column: span 7; aspect-ratio: 7 / 5; }
.nanko-photo6__item--people { grid-column: span 7; aspect-ratio: 7 / 5; }
.nanko-photo6__item--machine { grid-column: span 5; aspect-ratio: 4 / 5; }
.nanko-photo6__item--result { grid-column: 2 / span 10; aspect-ratio: 16 / 7; margin-top: 2px; }
.nanko-photo6__image { position: absolute; inset: 0; }
.nanko-photo6__image img { height: 100%; object-fit: cover; transition: transform .75s var(--nk-ease); }
.nanko-photo6__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.72) 100%); pointer-events: none; }
.nanko-photo6__item figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 24px; color: #fff; }
.nanko-photo6__item figcaption span { display: block; margin-bottom: 12px; font-size: 8px; letter-spacing: .16em; color: rgba(255,255,255,.62); }
.nanko-photo6__item figcaption strong { display: block; font-size: clamp(24px, 2.25vw, 36px); line-height: 1.08; letter-spacing: -.04em; font-weight: 650; }
.nanko-photo6__item figcaption small { display: block; margin-top: 10px; font-size: 7px; letter-spacing: .16em; color: rgba(255,255,255,.48); }

.nanko-photo6__motion { padding: clamp(95px, 8vw, 145px) 0 clamp(105px, 9vw, 155px); background: var(--nk-black); color: var(--nk-white); }
.nanko-photo6__motion-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.7fr); gap: clamp(55px, 7vw, 105px); align-items: end; margin-bottom: 44px; }
.nanko-photo6__eyebrow--light { color: rgba(255,255,255,.48); }
.nanko-photo6__motion-head h3 { font-size: clamp(38px, 4.2vw, 66px); line-height: 1.05; letter-spacing: -.045em; font-weight: 650; }
.nanko-photo6__motion-head > p { font-size: clamp(14px, 1vw, 16px); line-height: 1.85; color: rgba(255,255,255,.58); }
.nanko-photo6__video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.nanko-photo6__video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.nanko-photo6__video-copy { position: absolute; z-index: 2; left: clamp(20px, 3vw, 48px); bottom: clamp(58px, 5vw, 82px); pointer-events: none; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.3); }
.nanko-photo6__video-copy span { display: block; margin-bottom: 10px; font-size: 8px; letter-spacing: .20em; color: rgba(255,255,255,.60); }
.nanko-photo6__video-copy strong { display: block; font-size: clamp(36px, 4.6vw, 72px); line-height: .88; letter-spacing: -.06em; }
.nanko-photo6__video figcaption { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 30px; padding-top: 16px; }
.nanko-photo6__video figcaption span { font-size: 8px; letter-spacing: .17em; color: rgba(255,255,255,.45); }
.nanko-photo6__video figcaption p { max-width: 600px; font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.52); }

/* =========================================================
   06 BENKEI
========================================================= */

.nanko-benkei9 { background: var(--nk-black); color: var(--nk-white); overflow: hidden; }
.nanko-benkei9__intro { padding: clamp(105px, 9vw, 160px) 0 clamp(90px, 8vw, 135px); background: #090909; }
.nanko-benkei9__intro-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); gap: clamp(65px, 8vw, 135px); align-items: start; }
.nanko-benkei9__eyebrow { margin-bottom: 28px !important; color: var(--nk-gold); }
.nanko-benkei9__display { display: flex; flex-direction: column; font-size: clamp(62px, 7.4vw, 118px); line-height: .79; letter-spacing: -.07em; font-weight: 700; }
.nanko-benkei9__intro-right { padding-top: 12px; }
.nanko-benkei9__intro-right h2 { margin-bottom: 32px; font-size: clamp(34px, 3.2vw, 54px); line-height: 1.18; letter-spacing: -.04em; font-weight: 650; }
.nanko-benkei9__intro-right > p { max-width: 650px; font-size: clamp(14px, 1vw, 17px); line-height: 1.9; color: rgba(255,255,255,.60); }
.nanko-benkei9__intro-right > p + p { margin-top: 18px; }
.nanko-benkei9__lead { margin-top: 30px !important; padding-top: 24px; border-top: 1px solid var(--nk-line-dark); font-size: clamp(20px, 1.8vw, 28px) !important; line-height: 1.35 !important; letter-spacing: .02em; color: var(--nk-gold) !important; }

.nanko-benkei9__hero { position: relative; min-height: 72svh; overflow: hidden; background: #050505; }
.nanko-benkei9__hero-media { position: absolute; inset: 0; }
.nanko-benkei9__hero-media img { height: 100%; object-fit: cover; object-position: center; }
.nanko-benkei9__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.72) 100%); }
.nanko-benkei9__hero-copy { position: absolute; z-index: 2; left: max(48px, calc((100vw - 1480px) / 2)); right: 48px; bottom: clamp(36px, 5vw, 72px); }
.nanko-benkei9__hero-copy span { display: block; margin-bottom: 8px; font-size: 9px; letter-spacing: .20em; color: var(--nk-gold); }
.nanko-benkei9__hero-copy h3 { font-size: clamp(68px, 9vw, 145px); line-height: .85; letter-spacing: -.07em; font-weight: 700; }
.nanko-benkei9__hero-copy p { margin-top: 14px; font-size: 9px; letter-spacing: .18em; color: rgba(255,255,255,.54); }

.nanko-benkei9__values { padding: clamp(90px, 8vw, 135px) 0 clamp(100px, 9vw, 145px); background: var(--nk-paper); color: var(--nk-ink); }
.nanko-benkei9__values-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.7fr); gap: clamp(55px, 7vw, 100px); align-items: end; margin-bottom: 40px; }
.nanko-benkei9__label { color: var(--nk-rust); }
.nanko-benkei9__values-head h3 { margin-top: 13px; font-size: clamp(36px, 3.8vw, 60px); line-height: 1.08; letter-spacing: -.045em; font-weight: 650; }
.nanko-benkei9__values-head > p { font-size: 14px; line-height: 1.85; color: var(--nk-muted); }
.nanko-benkei9__values-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--nk-line); border-left: 1px solid var(--nk-line); }
.nanko-benkei9__value { min-height: 260px; padding: 28px; display: flex; flex-direction: column; border-right: 1px solid var(--nk-line); border-bottom: 1px solid var(--nk-line); }
.nanko-benkei9__value > span { font-size: 7px; letter-spacing: .15em; color: rgba(17,16,14,.38); }
.nanko-benkei9__value-en { margin-top: auto !important; margin-bottom: 10px !important; font-size: 8px; letter-spacing: .18em; color: var(--nk-rust); }
.nanko-benkei9__value h4 { margin: 0 0 13px; font-size: clamp(25px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -.04em; font-weight: 650; }
.nanko-benkei9__value > p:last-child { max-width: 330px; font-size: 13px; line-height: 1.78; color: rgba(17,16,14,.58); }

.nanko-benkei9__motion { padding: clamp(95px, 8vw, 145px) 0 clamp(105px, 9vw, 155px); background: #11100e; color: var(--nk-white); }
.nanko-benkei9__motion-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.7fr); gap: clamp(55px, 7vw, 100px); align-items: end; margin-bottom: 42px; }
.nanko-benkei9__motion .nanko-benkei9__label { color: var(--nk-gold); }
.nanko-benkei9__motion-head h3 { margin-top: 13px; font-size: clamp(38px, 4.2vw, 66px); line-height: 1.05; letter-spacing: -.045em; font-weight: 650; }
.nanko-benkei9__motion-head > p { font-size: 14px; line-height: 1.85; color: rgba(255,255,255,.58); }
.nanko-benkei9__video-frame { aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.nanko-benkei9__video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.nanko-benkei9__video figcaption { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 30px; padding-top: 16px; }
.nanko-benkei9__video figcaption span { font-size: 8px; letter-spacing: .17em; color: rgba(255,255,255,.45); }
.nanko-benkei9__video figcaption p { max-width: 600px; font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.52); }

/* =========================================================
   07 BEYOND WEB
========================================================= */

.nanko-beyond10 { background: var(--nk-paper); color: var(--nk-ink); overflow: hidden; }
.nanko-beyond10__intro { padding: clamp(105px, 9vw, 160px) 0 clamp(85px, 7vw, 125px); }
.nanko-beyond10__intro-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); gap: clamp(65px, 8vw, 135px); align-items: start; }
.nanko-beyond10__eyebrow { margin-bottom: 28px !important; color: var(--nk-rust); }
.nanko-beyond10__display { display: flex; flex-direction: column; font-size: clamp(64px, 7.4vw, 118px); line-height: .79; letter-spacing: -.07em; font-weight: 700; }
.nanko-beyond10__intro-right { padding-top: 12px; }
.nanko-beyond10__intro-right h2 { margin-bottom: 32px; font-size: clamp(34px, 3.2vw, 54px); line-height: 1.18; letter-spacing: -.04em; font-weight: 650; }
.nanko-beyond10__intro-right > p { max-width: 650px; font-size: clamp(14px, 1vw, 17px); line-height: 1.9; color: var(--nk-muted); }
.nanko-beyond10__intro-right > p + p { margin-top: 18px; }
.nanko-beyond10__lead { margin-top: 30px !important; padding-top: 24px; border-top: 1px solid var(--nk-line); font-size: clamp(20px, 1.8vw, 28px) !important; line-height: 1.3 !important; letter-spacing: .02em; color: var(--nk-rust) !important; }

.nanko-beyond10__graphic { padding: clamp(85px, 7vw, 120px) 0 clamp(95px, 8vw, 135px); background: var(--nk-paper-2); }
.nanko-beyond10__signage { padding: clamp(90px, 8vw, 130px) 0 clamp(105px, 9vw, 150px); background: var(--nk-paper); }
.nanko-beyond10__section-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.7fr); gap: clamp(55px, 7vw, 100px); align-items: end; margin-bottom: 38px; }
.nanko-beyond10__label { color: var(--nk-rust); }
.nanko-beyond10__section-head h3 { margin-top: 13px; font-size: clamp(36px, 3.8vw, 60px); line-height: 1.08; letter-spacing: -.045em; font-weight: 650; }
.nanko-beyond10__section-head > p { font-size: 14px; line-height: 1.85; color: var(--nk-muted); }
.nanko-beyond10__ads,
.nanko-beyond10__signage-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.nanko-beyond10__ad-image { aspect-ratio: 4 / 3; padding: clamp(18px, 2.1vw, 34px); background: #ddd7cc; }
.nanko-beyond10__ad-image img { height: 100%; object-fit: contain; filter: drop-shadow(0 16px 26px rgba(0,0,0,.10)); }
.nanko-beyond10__sign-image { aspect-ratio: 16 / 10; overflow: hidden; background: #ddd7cc; }
.nanko-beyond10__sign-image img { height: 100%; object-fit: cover; transition: transform .75s var(--nk-ease); }
.nanko-beyond10__ad figcaption,
.nanko-beyond10__sign figcaption { display: flex; justify-content: space-between; gap: 20px; padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--nk-line); }
.nanko-beyond10__ad figcaption span,
.nanko-beyond10__sign figcaption span,
.nanko-beyond10__ad figcaption strong,
.nanko-beyond10__sign figcaption strong { font-size: 8px; line-height: 1.4; letter-spacing: .14em; }
.nanko-beyond10__ad figcaption span,
.nanko-beyond10__sign figcaption span { color: rgba(17,16,14,.40); }
.nanko-beyond10__ad figcaption strong,
.nanko-beyond10__sign figcaption strong { color: rgba(17,16,14,.62); font-weight: 600; }

/* =========================================================
   08 RELATIONSHIP / PROOF
========================================================= */

.nanko-proof8 { background: var(--nk-black); color: var(--nk-white); overflow: hidden; }
.nanko-proof8__intro { padding: clamp(105px, 9vw, 160px) 0 clamp(85px, 7vw, 125px); }
.nanko-proof8__intro-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); gap: clamp(65px, 8vw, 135px); align-items: start; }
.nanko-proof8__eyebrow { margin-bottom: 28px !important; color: var(--nk-gold); }
.nanko-proof8__display { display: flex; flex-direction: column; font-size: clamp(58px, 6.8vw, 108px); line-height: .82; letter-spacing: -.07em; font-weight: 700; }
.nanko-proof8__intro-right { padding-top: 12px; }
.nanko-proof8__intro-right h2 { margin-bottom: 32px; font-size: clamp(34px, 3.2vw, 54px); line-height: 1.18; letter-spacing: -.04em; font-weight: 650; }
.nanko-proof8__intro-right > p { max-width: 650px; font-size: clamp(14px, 1vw, 17px); line-height: 1.9; color: rgba(255,255,255,.60); }
.nanko-proof8__intro-right > p + p { margin-top: 18px; }

.nanko-proof8__journey { padding: 0 0 clamp(90px, 8vw, 130px); }
.nanko-proof8__journey-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 34px; }
.nanko-proof8__journey-head .nanko-proof8__label { color: var(--nk-gold); }
.nanko-proof8__journey-head > p:last-child { max-width: 520px; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.53); }
.nanko-proof8__timeline { display: grid; grid-template-columns: repeat(9, auto); align-items: center; gap: 12px; padding-top: 28px; border-top: 1px solid var(--nk-line-dark); }
.nanko-proof8__step { min-width: 0; }
.nanko-proof8__step span { display: block; margin-bottom: 14px; font-size: 7px; letter-spacing: .14em; color: rgba(255,255,255,.34); }
.nanko-proof8__step strong { display: block; font-size: clamp(15px, 1.3vw, 21px); line-height: 1.15; letter-spacing: -.025em; }
.nanko-proof8__step small { display: block; margin-top: 7px; font-size: 10px; color: rgba(255,255,255,.45); }
.nanko-proof8__step--continue strong { color: var(--nk-gold); }
.nanko-proof8__timeline > i { font-style: normal; color: var(--nk-gold); }

.nanko-proof8__proof { padding: clamp(90px, 8vw, 130px) 0 clamp(105px, 9vw, 150px); background: var(--nk-paper); color: var(--nk-ink); }
.nanko-proof8__proof-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.7fr); gap: clamp(55px, 7vw, 100px); align-items: end; margin-bottom: 38px; }
.nanko-proof8__proof-head .nanko-proof8__label { color: var(--nk-rust); }
.nanko-proof8__proof-head h3 { margin-top: 13px; font-size: clamp(36px, 3.8vw, 60px); line-height: 1.08; letter-spacing: -.045em; font-weight: 650; }
.nanko-proof8__proof-head > p { font-size: 14px; line-height: 1.85; color: var(--nk-muted); }
.nanko-proof8__proof-list { border-top: 1px solid var(--nk-line); }
.nanko-proof8__proof-item { display: grid; grid-template-columns: 80px minmax(260px,.8fr) minmax(0,1.2fr); gap: 30px; align-items: center; min-height: 135px; padding: 24px 0; border-bottom: 1px solid var(--nk-line); }
.nanko-proof8__proof-index { font-size: 8px; letter-spacing: .16em; color: rgba(17,16,14,.38); }
.nanko-proof8__proof-main > p { margin-bottom: 7px; font-size: 8px; letter-spacing: .18em; color: var(--nk-rust); }
.nanko-proof8__proof-main strong { display: block; font-size: clamp(22px, 2vw, 30px); line-height: 1.05; letter-spacing: -.035em; }
.nanko-proof8__proof-copy p { max-width: 580px; font-size: 13px; line-height: 1.8; color: rgba(17,16,14,.58); }

/* =========================================================
   09 FINAL CTA
========================================================= */

.nanko-final9 { background: #090909; color: #fff; overflow: hidden; }
.nanko-final9__visual { position: relative; min-height: min(900px, 92svh); overflow: hidden; }
.nanko-final9__visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.nanko-final9__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.74) 88%), linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,.06) 78%); }
.nanko-final9__content { position: relative; z-index: 2; min-height: min(900px, 92svh); display: flex; align-items: flex-end; }
.nanko-final9__inner { width: min(1480px, calc(100% - 96px)); margin-inline: auto; padding: clamp(80px, 9vw, 140px) 0 clamp(70px, 7vw, 105px); }
.nanko-final9__eyebrow { margin-bottom: 30px !important; color: rgba(255,255,255,.58); }
.nanko-final9__display { font-size: clamp(62px, 8vw, 130px); line-height: .82; letter-spacing: -.07em; font-weight: 700; color: rgba(255,255,255,.95); }
.nanko-final9__message { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.58fr); gap: clamp(55px, 8vw, 120px); align-items: end; margin-top: clamp(50px, 6vw, 85px); padding-top: 30px; border-top: 1px solid rgba(255,255,255,.25); }
.nanko-final9__message h2 { font-size: clamp(38px, 4.5vw, 72px); line-height: 1.04; letter-spacing: -.05em; font-weight: 650; }
.nanko-final9__message p { font-size: 14px; line-height: 1.85; color: rgba(255,255,255,.67); }
.nanko-final9__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.nanko-final9__button { min-height: 54px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid rgba(255,255,255,.30); font-size: 11px; letter-spacing: .08em; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.nanko-final9__button i { font-style: normal; }
.nanko-final9__button--primary { background: var(--nk-white); color: var(--nk-ink) !important; border-color: var(--nk-white); }
.nanko-final9__button--secondary { background: rgba(0,0,0,.18); color: #fff; }
.nanko-final9__button[aria-disabled="true"] { cursor: default; pointer-events: none; opacity: .78; }
.nanko-final9__footer { background: #090909; border-top: 1px solid rgba(255,255,255,.12); }
.nanko-final9__footer-inner { width: min(1480px, calc(100% - 96px)); margin-inline: auto; min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 8px; letter-spacing: .16em; color: rgba(255,255,255,.42); }

/* =========================================================
   HOVER — POINTER DEVICES ONLY
========================================================= */

@media (hover:hover) {
  .nanko-overview2v3__touch:hover .nanko-overview2v3__image img,
  .nanko-photo6__item:hover .nanko-photo6__image img,
  .nanko-beyond10__sign:hover .nanko-beyond10__sign-image img {
    transform: scale(1.025);
  }

  .nanko-web4__live-link:hover { border-color: var(--nk-rust); }
  .nanko-final9__button--primary:hover { background: transparent; color: #fff !important; }
  .nanko-final9__button--secondary:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.60); }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  :root { --nk-gutter: 56px; }

  .nanko-hero2__inner { width: calc(100% - 56px); }
  .nanko-hero2__bottom { grid-template-columns: 1fr; gap: 30px; }
  .nanko-hero2__meta { max-width: 760px; }

  .nanko-overview2v3__intro-grid,
  .nanko-overview2v3__challenge-grid,
  .nanko-strategy3__intro-grid,
  .nanko-web4__intro-grid,
  .nanko-photo6__intro-grid,
  .nanko-benkei9__intro-grid,
  .nanko-beyond10__intro-grid,
  .nanko-proof8__intro-grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .nanko-overview2v3__intro-right,
  .nanko-strategy3__intro-right,
  .nanko-web4__intro-right,
  .nanko-photo6__intro-right,
  .nanko-benkei9__intro-right,
  .nanko-beyond10__intro-right,
  .nanko-proof8__intro-right {
    max-width: 760px;
    padding-top: 0;
  }

  .nanko-overview2v3__touch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nanko-strategy3__language-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nanko-web4__screens-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nanko-web4__screen:last-child { grid-column: 1 / -1; width: min(620px,100%); }

  .nanko-web4__flow-line,
  .nanko-proof8__timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
  }

  .nanko-web4__flow-line > div,
  .nanko-proof8__step { min-width: 145px; }

  .nanko-benkei9__values-head,
  .nanko-benkei9__motion-head,
  .nanko-beyond10__section-head,
  .nanko-proof8__proof-head,
  .nanko-photo6__motion-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .nanko-final9__message { grid-template-columns: 1fr; gap: 28px; }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  :root { --nk-gutter: 36px; }

  html,
  body { max-width: 100%; overflow-x: clip; }

  .nanko-case-pageid { height: 40px; }
  .nanko-case-pageid__inner { width: calc(100% - 24px); font-size: 8px; letter-spacing: .13em; }
  .nanko-case-pageid__left { gap: 7px; }
  .nanko-case-pageid__slash { opacity: .25; }

  /* 01 */
  .nanko-hero2 { min-height: calc(100svh - 40px); }
  .nanko-hero2__inner { width: calc(100% - 36px); min-height: calc(100svh - 40px); padding: 28px 0 34px; }
  .nanko-hero2__top { gap: 12px; }
  .nanko-hero2__kicker,
  .nanko-hero2__client { font-size: 9px; letter-spacing: .17em; white-space: nowrap; }
  .nanko-hero2__title { padding: 72px 0 54px; }
  .nanko-hero2__company { margin-bottom: 14px !important; font-size: 18px; letter-spacing: .035em; }
  .nanko-hero2__title h1 { font-size: clamp(49px, 14vw, 64px); line-height: .94; letter-spacing: -.055em; }
  .nanko-hero2__bottom { display: block; }
  .nanko-hero2__copy p { font-size: 13px; line-height: 1.78; }
  .nanko-hero2__copy p span { white-space: normal; }
  .nanko-hero2__meta { margin-top: 28px; padding-top: 17px; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .nanko-hero2__meta div:last-child { grid-column: 1 / -1; }
  .nanko-hero2__meta span { font-size: 8px; }
  .nanko-hero2__meta strong { font-size: 9px; }

  .nanko-transition2 { min-height: 38vh; padding: 75px 18px; }
  .nanko-transition2__inner { display: block; text-align: left; }
  .nanko-transition2 span { display: block; margin-bottom: 10px; font-size: 8px; }
  .nanko-transition2 strong { display: block; font-size: clamp(42px, 11.5vw, 56px); line-height: .92; }
  .nanko-transition2 i { display: block; width: 44px; margin: 25px 0; }

  /* shared intro */
  .nanko-overview2v3__intro,
  .nanko-strategy3__intro,
  .nanko-web4__intro,
  .nanko-photo6__intro,
  .nanko-benkei9__intro,
  .nanko-beyond10__intro,
  .nanko-proof8__intro {
    padding: 82px 0 76px;
  }

  .nanko-overview2v3__intro-grid,
  .nanko-strategy3__intro-grid,
  .nanko-web4__intro-grid,
  .nanko-photo6__intro-grid,
  .nanko-benkei9__intro-grid,
  .nanko-beyond10__intro-grid,
  .nanko-proof8__intro-grid {
    display: block;
  }

  .nanko-overview2v3__eyebrow,
  .nanko-strategy3__eyebrow,
  .nanko-web4__eyebrow,
  .nanko-photo6__eyebrow,
  .nanko-benkei9__eyebrow,
  .nanko-beyond10__eyebrow,
  .nanko-proof8__eyebrow { margin-bottom: 22px !important; font-size: 9px; }

  .nanko-overview2v3__display { font-size: clamp(46px, 12.2vw, 60px); line-height: .84; }
  .nanko-strategy3__display { font-size: clamp(58px, 15vw, 74px); line-height: .81; }
  .nanko-web4__display { font-size: clamp(48px, 12.7vw, 62px); line-height: .82; }
  .nanko-photo6__display { font-size: clamp(58px, 15vw, 74px); line-height: .81; }
  .nanko-benkei9__display { font-size: clamp(48px, 12.8vw, 62px); line-height: .82; }
  .nanko-beyond10__display { font-size: clamp(49px, 13vw, 63px); line-height: .82; }
  .nanko-proof8__display { font-size: clamp(43px, 11.5vw, 56px); line-height: .86; }

  .nanko-overview2v3__intro-right,
  .nanko-strategy3__intro-right,
  .nanko-web4__intro-right,
  .nanko-photo6__intro-right,
  .nanko-benkei9__intro-right,
  .nanko-beyond10__intro-right,
  .nanko-proof8__intro-right { margin-top: 48px; }

  .nanko-overview2v3__intro-right h2,
  .nanko-strategy3__intro-right h2,
  .nanko-web4__intro-right h2,
  .nanko-photo6__intro-right h2,
  .nanko-benkei9__intro-right h2,
  .nanko-beyond10__intro-right h2,
  .nanko-proof8__intro-right h2 {
    margin-bottom: 26px;
    font-size: clamp(29px, 7.8vw, 37px);
    line-height: 1.2;
  }

  .nanko-overview2v3__intro-right > p,
  .nanko-strategy3__intro-right > p,
  .nanko-web4__intro-right > p,
  .nanko-photo6__intro-right > p,
  .nanko-benkei9__intro-right > p,
  .nanko-beyond10__intro-right > p,
  .nanko-proof8__intro-right > p {
    font-size: 14px;
    line-height: 1.84;
  }

  /* 02 */
  .nanko-overview2v3__meta { display: block; margin-top: 50px; border-left: 0; }
  .nanko-overview2v3__meta > div { padding: 17px 0; border-right: 0; }
  .nanko-overview2v3__touchpoints { padding: 66px 0 78px; }
  .nanko-overview2v3__touch-grid { display: block; }
  .nanko-overview2v3__touch + .nanko-overview2v3__touch { margin-top: 12px; }
  .nanko-overview2v3__image { aspect-ratio: 16 / 10; }
  .nanko-overview2v3__touch-body { padding: 18px 16px 22px; }
  .nanko-overview2v3__touch h3 { font-size: 24px; }
  .nanko-overview2v3__touch p { font-size: 13px; }
  .nanko-overview2v3__challenge { padding: 78px 0 88px; }
  .nanko-overview2v3__challenge-grid { display: block; }
  .nanko-overview2v3__challenge-title h2 { font-size: clamp(36px, 9.5vw, 46px); line-height: 1.07; }
  .nanko-overview2v3__challenge-copy { margin-top: 40px; padding-top: 0; }
  .nanko-overview2v3__challenge-copy p { font-size: 14px; line-height: 1.84; }
  .nanko-overview2v3__keywords { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 52px; }
  .nanko-overview2v3__keywords > div { min-height: 145px; padding: 18px; }
  .nanko-overview2v3__keywords strong { font-size: clamp(20px, 5.7vw, 25px); }
  .nanko-overview2v3__challenge-question { margin-top: 48px; }
  .nanko-overview2v3__challenge-question strong { font-size: clamp(28px, 7.5vw, 36px); line-height: 1.16; }
  .nanko-overview2v3__challenge-question strong br { display: none; }

  /* 03 */
  .nanko-strategy3__visual { display: block; min-height: 0; }
  .nanko-strategy3__panel { min-height: 58svh; }
  .nanko-strategy3__panel figcaption { left: 18px; right: 18px; bottom: 20px; }
  .nanko-strategy3__panel figcaption strong { font-size: clamp(28px, 7.6vw, 35px); }
  .nanko-strategy3__cross { width: 58px; height: 58px; left: 50%; top: 50%; font-size: 27px; }
  .nanko-strategy3__language { padding: 70px 0 80px; }
  .nanko-strategy3__language-head { display: block; margin-bottom: 30px; }
  .nanko-strategy3__language-head h3 { margin-top: 12px; font-size: clamp(31px, 8.2vw, 39px); }
  .nanko-strategy3__language-grid { grid-template-columns: 1fr 1fr; }
  .nanko-strategy3__language-grid > div { min-height: 160px; padding: 17px; }
  .nanko-strategy3__language-grid strong { font-size: 21px; }
  .nanko-strategy3__language-grid p { font-size: 11px; }

  /* 04 */
  .nanko-web4__main { padding-bottom: 78px; }
  .nanko-web4__main-head { display: block; margin-bottom: 18px; }
  .nanko-web4__live-link { margin-top: 24px; font-size: 9px; }
  .nanko-web4__browser-bar { height: 34px; grid-template-columns: 54px minmax(0,1fr) 48px; padding: 0 10px; }
  .nanko-web4__browser-dots { gap: 4px; }
  .nanko-web4__browser-dots i { width: 5px; height: 5px; }
  .nanko-web4__browser-bar > span { font-size: 7px; }
  .nanko-web4__browser-bar > strong { font-size: 7px; }
  .nanko-web4__browser-screen { aspect-ratio: 4 / 3; }
  .nanko-web4__flow { padding: 68px 0 74px; }
  .nanko-web4__flow-head { display: block; margin-bottom: 28px; }
  .nanko-web4__flow-head > p:last-child { margin-top: 16px; font-size: 13px; }
  .nanko-web4__flow-line { display: grid; grid-template-columns: 1fr; gap: 0; padding-top: 0; border-top: 1px solid var(--nk-line-dark); }
  .nanko-web4__flow-line > div { padding: 17px 0; border-bottom: 1px solid var(--nk-line-dark); }
  .nanko-web4__flow-line > div span { margin-bottom: 7px; }
  .nanko-web4__flow-line > div strong { font-size: 22px; }
  .nanko-web4__flow-line > div small { margin-top: 5px; }
  .nanko-web4__flow-line > i { display: none; }
  .nanko-web4__screens { padding: 76px 0 86px; }
  .nanko-web4__screens-head h3 { font-size: clamp(31px, 8.3vw, 40px); }
  .nanko-web4__screens-grid { display: block; }
  .nanko-web4__screen + .nanko-web4__screen { margin-top: 38px; }
  .nanko-web4__screen:last-child { width: 100%; }
  .nanko-web4__screen-image { aspect-ratio: 4 / 3; }

  /* 05 */
  .nanko-photo6__gallery { padding-bottom: 82px; }
  .nanko-photo6__sheet { display: block; }
  .nanko-photo6__item,
  .nanko-photo6__item--craft,
  .nanko-photo6__item--space,
  .nanko-photo6__item--people,
  .nanko-photo6__item--machine,
  .nanko-photo6__item--result {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin: 0;
  }
  .nanko-photo6__item--space,
  .nanko-photo6__item--result { aspect-ratio: 16 / 11; }
  .nanko-photo6__item + .nanko-photo6__item { margin-top: 12px; }
  .nanko-photo6__item figcaption { left: 18px; right: 18px; bottom: 19px; }
  .nanko-photo6__item figcaption strong { font-size: clamp(27px, 7.5vw, 34px); }
  .nanko-photo6__motion { padding: 78px 0 86px; }
  .nanko-photo6__motion-head { display: block; margin-bottom: 34px; }
  .nanko-photo6__motion-head > p { margin-top: 24px; font-size: 14px; }
  .nanko-photo6__video-frame { aspect-ratio: 4 / 3; }
  .nanko-photo6__video-copy { left: 16px; right: 16px; bottom: 54px; }
  .nanko-photo6__video-copy strong { font-size: clamp(33px, 9.5vw, 44px); }
  .nanko-photo6__video figcaption { display: block; padding-top: 13px; }
  .nanko-photo6__video figcaption span { display: block; margin-bottom: 7px; font-size: 7px; }
  .nanko-photo6__video figcaption p { font-size: 11px; }

  /* 06 */
  .nanko-benkei9__hero { min-height: 58svh; }
  .nanko-benkei9__hero-copy { left: 18px; right: 18px; bottom: 24px; }
  .nanko-benkei9__hero-copy h3 { font-size: clamp(65px, 19vw, 92px); }
  .nanko-benkei9__values { padding: 74px 0 82px; }
  .nanko-benkei9__values-head { display: block; margin-bottom: 30px; }
  .nanko-benkei9__values-head > p { margin-top: 24px; font-size: 14px; }
  .nanko-benkei9__values-grid { display: block; border-left: 0; }
  .nanko-benkei9__value { min-height: 200px; padding: 24px 0; border-right: 0; }
  .nanko-benkei9__value h4 { font-size: 28px; }
  .nanko-benkei9__motion { padding: 78px 0 86px; }
  .nanko-benkei9__motion-head { display: block; margin-bottom: 34px; }
  .nanko-benkei9__motion-head > p { margin-top: 24px; font-size: 14px; }
  .nanko-benkei9__video-frame { aspect-ratio: 4 / 3; }
  .nanko-benkei9__video figcaption { display: block; padding-top: 13px; }
  .nanko-benkei9__video figcaption span { display: block; margin-bottom: 7px; font-size: 7px; }
  .nanko-benkei9__video figcaption p { font-size: 11px; }

  /* 07 */
  .nanko-beyond10__graphic,
  .nanko-beyond10__signage { padding: 72px 0 82px; }
  .nanko-beyond10__section-head { display: block; margin-bottom: 30px; }
  .nanko-beyond10__section-head > p { margin-top: 24px; font-size: 14px; }
  .nanko-beyond10__ads { gap: 10px; }
  .nanko-beyond10__ad-image { aspect-ratio: 3 / 4; padding: 8px; }
  .nanko-beyond10__signage-grid { grid-template-columns: 1fr; gap: 28px; }
  .nanko-beyond10__sign-image { aspect-ratio: 4 / 3; }
  .nanko-beyond10__ad figcaption,
  .nanko-beyond10__sign figcaption { gap: 8px; }
  .nanko-beyond10__ad figcaption span,
  .nanko-beyond10__sign figcaption span,
  .nanko-beyond10__ad figcaption strong,
  .nanko-beyond10__sign figcaption strong { font-size: 7px; }

  /* 08 */
  .nanko-proof8__journey { padding-bottom: 74px; }
  .nanko-proof8__journey-head { display: block; margin-bottom: 28px; }
  .nanko-proof8__journey-head > p:last-child { margin-top: 16px; font-size: 13px; }
  .nanko-proof8__timeline { display: grid; grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .nanko-proof8__step { padding: 16px 0; border-bottom: 1px solid var(--nk-line-dark); }
  .nanko-proof8__timeline > i { display: none; }
  .nanko-proof8__step strong { font-size: 20px; }
  .nanko-proof8__proof { padding: 74px 0 86px; }
  .nanko-proof8__proof-head { display: block; margin-bottom: 30px; }
  .nanko-proof8__proof-head > p { margin-top: 24px; font-size: 14px; }
  .nanko-proof8__proof-item { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; min-height: 0; padding: 22px 0; }
  .nanko-proof8__proof-main,
  .nanko-proof8__proof-copy { grid-column: 2; }
  .nanko-proof8__proof-copy p { margin-top: 10px; font-size: 13px; }
  .nanko-proof8__proof-main strong { font-size: 23px; }

  /* 09 */
  .nanko-final9__visual,
  .nanko-final9__content { min-height: 82svh; }
  .nanko-final9__inner { width: calc(100% - 36px); padding: 74px 0 58px; }
  .nanko-final9__eyebrow { margin-bottom: 22px !important; font-size: 9px; }
  .nanko-final9__display { font-size: clamp(47px, 13vw, 62px); line-height: .86; }
  .nanko-final9__message { display: block; margin-top: 42px; padding-top: 24px; }
  .nanko-final9__message h2 { font-size: clamp(33px, 9vw, 43px); line-height: 1.08; }
  .nanko-final9__message p { margin-top: 24px; font-size: 14px; }
  .nanko-final9__actions { display: grid; grid-template-columns: 1fr; margin-top: 28px; }
  .nanko-final9__button { width: 100%; min-height: 52px; }
  .nanko-final9__footer-inner { width: calc(100% - 36px); min-height: 58px; font-size: 7px; }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {
  .nanko-strategy3__language-grid { grid-template-columns: 1fr; }
  .nanko-overview2v3__keywords { grid-template-columns: 1fr 1fr; }
  .nanko-beyond10__ad figcaption { display: block; }
  .nanko-beyond10__ad figcaption strong { display: block; margin-top: 5px; }
  .nanko-final9__footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .nanko-overview2v3__image img,
  .nanko-photo6__image img,
  .nanko-beyond10__sign-image img,
  .nanko-final9__button {
    transition: none !important;
  }
}/* End custom CSS */