/* ==================================================
   WORKS：変数
================================================== */

.nd-works {
  --works-black: #111315;
  --works-gray: #646762;
  --works-line: #D9DAD5;
  --works-blue: #3437F2;
  --works-white: #F7F7F4;
  --works-media-bg: #f1f1f1;

  --works-edge: clamp(18px, 2.2vw, 38px);
  --works-rail-width: clamp(72px, 5.5vw, 96px);
  --works-content-gap: clamp(36px, 5vw, 90px);
  --works-card-gap: clamp(20px, 2.2vw, 36px);
  --works-rail-top: clamp(170px, 28vh, 290px);
}


/* ==================================================
   ボックスサイズ
================================================== */

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


/* ==================================================
   WORKS全体
================================================== */

.nd-works {
  position: relative;

  display: grid;
  grid-template-columns:
    var(--works-edge)
    var(--works-rail-width)
    minmax(0, 1fr);

  width: 100vw;
  max-width: 100vw;

  /*
   * セクション間の余白調整:
   * 実測で本文が100vhよりかなり短く、min-height:100vhが
   * 次セクション（SERVICE）との間に大きな空白を生んでいたため、
   * 本文量に応じた高さ（auto）へ変更する。
   */
  min-height: auto;

  margin:
    0
    0
    0
    calc(50% - 50vw) !important;

  padding: 0;

  overflow: visible;

  border: 0 !important;

  color: var(--works-black);
  background: var(--works-white);
}


/* ==================================================
   WORKS左レール
================================================== */

.nd-works {
  /*
   * WORKSテキストをセクション開始直後に
   * SNSへ接近させないための進入スペース
   */
  --works-rail-transition-space:
    clamp(120px, 15vh, 180px);
}


/*
 * 縦線はWORKS全高に表示する。
 * 上側のpaddingはテキストの進入だけを遅らせる。
 */
.nd-works-rail {
  position: relative;
  z-index: 2;

  grid-column: 2;
  grid-row: 1;

  align-self: stretch;

  width: 100%;
  min-width: 0;
  min-height: 100%;

  margin: 0;

  /*
   * 修正: 以前はここが誤って
   * ".nd-works-rail { .nd-works-rail { padding: ... } }" という
   * 二重ネストになっており、".nd-works-rail .nd-works-rail"
   * （自分自身の子孫に自分自身がある場合だけ）にしか一致しないため、
   * 実際には一度も適用されていなかった。
   * 前後のセクション（SERVICE / PHILOSOPHY）のレールラベルとの間に
   * 「余白がなくゼロ距離に見える」不具合の原因だったため、
   * 通常のプロパティとして書き直す。
   */
  padding:
    var(--works-rail-transition-space)
    0
    var(--works-rail-transition-space);

  border: 0;

  border-right:
    1px solid
    var(--works-line);

  background:
    var(--works-white);
}


/* ==================================================
   WORKSレール固定部分
================================================== */

.nd-works-rail__sticky {
  position: sticky;

  top:
    var(--works-rail-top);

  display: flex;
  justify-content: center;

  width: 100%;

  pointer-events: none;
}


/* ==================================================
   WORKSテキスト
================================================== */

.nd-works-rail__label {
  display: block;

  margin: 0;
  padding: 0;

  color:
    var(--works-black);

  /*
   * SNSと同じ大きさ
   */
  font-size:
    clamp(23px, 1.55vw, 28px)
    !important;

  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.13em;
  white-space: nowrap;

  writing-mode: vertical-rl;
  text-orientation: mixed;
}


/* ==================================================
   本文
================================================== */

.nd-works__inner {
  grid-column: 3;
  grid-row: 1;

  width: 100%;
  max-width:
    calc(
      1760px
      - var(--works-edge)
      - var(--works-rail-width)
    );

  min-width: 0;

  margin: 0 auto 0 0;

  /* セクション間の余白調整（現行の約1/3）: 上下paddingを縮小。 */
  padding:
    clamp(31px, 3vw, 49px)
    clamp(36px, 5vw, 90px)
    clamp(28px, 3vw, 45px)
    var(--works-content-gap);
}


/* ==================================================
   見出し
================================================== */

.nd-works__header {
  display: block;

  margin:
    0
    0
    clamp(48px, 5.5vw, 80px)
    0 !important;

  padding: 0 !important;

  border: 0 !important;
}


.nd-works__header::before,
.nd-works__header::after,
.nd-works__title::before,
.nd-works__title::after {
  content: none !important;
  display: none !important;
}


.nd-works__title {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--works-black) !important;
  background: transparent !important;

  font-size:
    clamp(52px, 5vw, 76px)
    !important;

  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;

  opacity: 1 !important;
  visibility: visible !important;
}


.nd-works__title-text {
  display: inline-block !important;

  padding-left:
    clamp(18px, 1.7vw, 26px);

  border-left:
    clamp(4px, 0.35vw, 6px)
    solid
    var(--works-blue);

  color: var(--works-black) !important;
}


/* ==================================================
   スライダー
================================================== */

.nd-works__viewport {
  position: relative;

  width: 100%;
  min-width: 0;

  overflow: hidden;

  touch-action: pan-y;
}


.nd-works__track {
  display: flex;
  align-items: stretch;

  width: 100%;
  min-width: 0;

  gap: var(--works-card-gap);

  will-change: transform;

  transition:
    transform
    720ms
    cubic-bezier(0.22, 1, 0.36, 1);
}


.nd-works__track.is-no-transition {
  transition: none !important;
}


/* ==================================================
   カード
================================================== */

.nd-work-card {
  position: relative;

  flex:
    0 0
    calc(
      (
        100%
        - var(--works-card-gap) * 2
      ) / 3
    );

  min-width: 0;

  margin: 0;

  opacity: 0;
  transform: translateY(18px);

  transition:
    opacity 600ms ease,
    transform
      700ms
      cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay:
    calc(
      var(--card-order, 0) * 90ms
    );
}


.nd-works.is-visible
.nd-work-card {
  opacity: 1;
  transform: translateY(0);
}


.nd-work-card__link {
  position: relative;

  display: flex;
  flex-direction: column;

  height: 100%;

  color: var(--works-black) !important;
  text-decoration: none !important;
}


/* シンプルなホバーライン */

.nd-work-card__link::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 2px;

  background: var(--works-blue);

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

  transition:
    transform
    320ms
    cubic-bezier(0.22, 1, 0.36, 1);
}


.nd-work-card__link:hover::after,
.nd-work-card__link:focus-visible::after {
  transform: scaleX(1);
}


/* ==================================================
   画像
================================================== */

.nd-work-card__media {
  position: relative;

  width: 100%;
  aspect-ratio: 3 / 2;

  overflow: hidden;

  border:
    1px solid
    var(--works-line);

  background: var(--works-media-bg);
}


.nd-work-card__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.001);

  transition:
    transform
    600ms
    cubic-bezier(0.22, 1, 0.36, 1);
}


.nd-work-card__link:hover
.nd-work-card__media img,
.nd-work-card__link:focus-visible
.nd-work-card__media img {
  transform: scale(1.015);
}


/* 初回表示用マスク */

.nd-work-card__mask {
  position: absolute;
  z-index: 2;

  inset: 0;

  background: var(--works-white);

  transform: translateX(0);

  transition:
    transform
    820ms
    cubic-bezier(0.76, 0, 0.24, 1);

  transition-delay:
    calc(
      160ms
      + var(--card-order, 0) * 100ms
    );
}


.nd-works.is-visible
.nd-work-card__mask {
  transform: translateX(101%);
}


/* ==================================================
   カード情報
================================================== */

.nd-work-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;

  padding:
    clamp(20px, 2vw, 28px)
    2px
    clamp(20px, 2vw, 28px);

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


.nd-work-card__category {
  margin: 0 0 10px !important;

  color: var(--works-gray);

  font-size: 11px !important;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.11em;
}


.nd-work-card__title {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--works-black) !important;

  /* 本文テキストと同じサイズに揃える（整数px）。 */
  font-size:
    17px
    !important;

  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.02em;
}


.nd-work-card__title::before,
.nd-work-card__title::after {
  content: none !important;
  display: none !important;
}


/* ==================================================
   一覧リンク
================================================== */

.nd-works__footer {
  display: flex;
  justify-content: flex-end;

  margin-top:
    clamp(42px, 5vw, 70px);
}


.nd-works__all {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 42px;

  min-width: 220px;

  padding: 15px 2px;

  border-bottom:
    1px solid
    var(--works-black);

  color: var(--works-black) !important;
  text-decoration: none !important;

  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;

  transition:
    color 220ms ease,
    border-color 220ms ease;
}


.nd-works__all:hover,
.nd-works__all:focus-visible {
  color: var(--works-blue) !important;
  border-color: var(--works-blue);
}


/* ==================================================
   1200px未満：2件表示
================================================== */

@media (max-width: 1199px) {

  .nd-work-card {
    flex:
      0 0
      calc(
        (
          100%
          - var(--works-card-gap)
        ) / 2
      );
  }

  .nd-works__title {
    font-size:
      clamp(44px, 5vw, 60px)
      !important;
  }

  .nd-work-card__title {
    /* 本文テキストと同じサイズに揃える。 */
    font-size: 15px !important;
  }
}


/* ==================================================
   959px以下：レール非表示
================================================== */

@media (max-width: 959px) {

  .nd-works {
    display: block;
  }

  .nd-works-rail {
    display: none;
  }

  .nd-works__inner {
    max-width: none;

    /* セクション間の余白調整（現行の約1/3）: 上下paddingを縮小。 */
    padding:
      clamp(27px, 4vw, 40px)
      clamp(34px, 7vw, 68px);
  }
}


/* ==================================================
   767px以下：1件表示
================================================== */

@media (max-width: 767px) {

  .nd-works__inner {
    /* セクション間の余白調整（現行の約1/3）: 上下paddingを縮小。 */
    padding:
      25px
      clamp(22px, 6vw, 38px)
      27px;
  }

  .nd-works__header {
    margin-bottom: 38px !important;
  }

  .nd-works__title {
    /* 他セクションの見出しと統一（実際にはHERO/hero.cssの高詳細度ルールが優先される）。 */
    font-size: 34px !important;
  }

  .nd-works__title-text {
    padding-left: 14px;
    border-left-width: 4px;
  }

  /*
   * 横スライダーをやめ、カードを縦に積む一覧表示にする。
   * JS側（noya-works-home.js）もisMobileStack()でこの境界値と
   * 揃え、複製カード作成・自動再生・横方向のtransformを
   * このブレークポイントでは行わないようにしている。
   */
  .nd-works__viewport {
    overflow: visible;
    touch-action: auto;
  }

  .nd-works__track {
    flex-direction: column;
    /* JSが以前設定したtransformが残っていても無効化する。 */
    transform: none !important;
  }

  .nd-work-card {
    flex: 0 0 auto;
    width: 100%;
  }

  /* 複製カード（無限ループ用）はモバイルでは作成されないが、念のため非表示にしておく。 */
  .nd-work-card[data-nd-clone="true"] {
    display: none !important;
  }

  .nd-work-card__category {
    /* 小さい補助ラベルのサイズを他セクションと統一（整数px）。 */
    font-size: 14px !important;
  }

  .nd-work-card__title {
    /* 本文テキストと同じサイズに揃える。 */
    font-size: 15px !important;
  }

  .nd-works__footer {
    margin-top: 36px;
  }

  .nd-works__all {
    width: min(100%, 220px);
    font-size: 13px !important;
  }
}


/* ==================================================
   管理バー
================================================== */

@media (min-width: 960px) {

  body.admin-bar
  .nd-works-rail__sticky {
    top:
      calc(
        var(--works-rail-top)
        + 32px
      );
  }
}


/* ==================================================
   動きを減らす設定
================================================== */

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

  .nd-works__track,
  .nd-work-card,
  .nd-work-card__link::after,
  .nd-work-card__media img,
  .nd-work-card__mask,
  .nd-works__all {
    transition: none !important;
  }

  .nd-work-card {
    opacity: 1;
    transform: none;
  }

  .nd-work-card__mask {
    display: none;
  }
}

/* ==================================================
   WORKS：SERVICEとのデザイン統一
================================================== */


/* ==================================================
   セクション見出し
================================================== */

.nd-works .nd-works__header {
  position: relative;

  display: block;

  margin:
    0
    0
    clamp(62px, 7vw, 104px)
    0 !important;

  padding: 0 !important;

  border: 0 !important;
}


/*
 * 過去の青いラインを無効化
 */
.nd-works .nd-works__header::before,
.nd-works .nd-works__header::after {
  content: none !important;
  display: none !important;
}


.nd-works .nd-works__heading-frame {
  display: flex;
  align-items: center;

  width: min(100%, 680px);
  min-height: 86px;

  padding:
    18px
    clamp(22px, 2.2vw, 34px);

  border:
    3px solid
    var(--works-black, #111111);

  background:
    var(--works-white, #ffffff);
}


/*
 * 過去の青い四角を無効化
 */
.nd-works .nd-works__title::before,
.nd-works .nd-works__title::after {
  content: none !important;
  display: none !important;
}


.nd-works .nd-works__title {
  display: block !important;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--works-black, #111111)
    !important;

  background:
    transparent
    !important;

  font-size:
    clamp(38px, 3.8vw, 60px)
    !important;

  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.05em !important;

  opacity: 1 !important;
  visibility: visible !important;
}


/*
 * 旧HTMLが一時的に残っても崩れないための補正
 */
.nd-works .nd-works__title-text {
  display: inline !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: inherit !important;
}


/* ==================================================
   制作実績カードのテキスト
================================================== */

/*
 * SERVICEにはない青い下線を削除
 */
.nd-works .nd-work-card__link::after {
  content: none !important;
  display: none !important;
}


.nd-works .nd-work-card__body {
  padding:
    clamp(24px, 2.4vw, 34px)
    0
    0;

  border-bottom: 0 !important;
}


.nd-works .nd-work-card__category {
  margin:
    0
    0
    14px
    !important;

  color:
    var(--works-black, #111111)
    !important;

  font-family:
    "Barlow Condensed",
    sans-serif
    !important;

  /* 小さい補助ラベルのサイズを統一（整数px）。 */
  font-size:
    14px
    !important;

  /* 太字から通常の太さへ変更。 */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.1em;
}


.nd-works .nd-work-card__title {
  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--works-black, #111111)
    !important;

  /*
   * サイト内の統一感のため、TOPページ他セクションの本文テキストと
   * 同じサイズ（PHILOSOPHY本文で使用しているclamp(15px,1.1vw,17px)）に揃える。
   */
  font-size:
    clamp(15px, 1.1vw, 17px)
    !important;

  /* 太字から通常の太さへ変更。 */
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.025em;
}


.nd-works .nd-work-card__title::before,
.nd-works .nd-work-card__title::after {
  content: none !important;
  display: none !important;
}


.nd-works .nd-work-card__title span {
  /* 黒背景を削除し、文字色をブラックへ変更。 */
  padding: 0;

  color:
    var(--works-black, #111111);

  background:
    transparent;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* ==================================================
   制作実績一覧ボタン
================================================== */

.nd-works .nd-works__footer {
  display: flex;
  justify-content: flex-end;

  margin-top:
    clamp(70px, 8vw, 120px);
}


.nd-works .nd-works__all {
  position: relative;

  display: grid !important;

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

  align-items: stretch;

  gap: 0 !important;

  width:
    min(100%, 410px);

  min-width: 0 !important;
  min-height: 72px;

  margin: 0;
  padding: 0 !important;

  overflow: hidden;

  border:
    2px solid
    var(--works-black, #111111)
    !important;

  border-bottom:
    2px solid
    var(--works-black, #111111)
    !important;

  color:
    var(--works-black, #111111)
    !important;

  background:
    var(--works-white, #ffffff)
    !important;

  text-decoration: none !important;

  transform:
    translate3d(0, 0, 0);

  transition:
    transform
    160ms
    cubic-bezier(0.22, 1, 0.36, 1);
}


/*
 * ネオンライムの展開背景
 */
.nd-works .nd-works__all::before {
  content: "";

  position: absolute;
  z-index: 0;

  inset: 0;

  display: block !important;

  background:
    var(--works-accent, #dfff00);

  transform:
    scaleX(0);

  transform-origin:
    left center;

  transition:
    transform
    420ms
    cubic-bezier(0.22, 1, 0.36, 1);
}


.nd-works .nd-works__all::after {
  content: none !important;
  display: none !important;
}


.nd-works .nd-works__all-text,
.nd-works .nd-works__all-arrow {
  position: relative;
  z-index: 1;
}


.nd-works .nd-works__all-text {
  display: flex;
  align-items: center;

  padding:
    18px
    24px;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}


.nd-works .nd-works__all-arrow {
  display: grid;
  place-items: center;

  border-left:
    2px solid
    var(--works-black, #111111);

  font-size: 22px;
  line-height: 1;

  transition:
    transform
    300ms
    cubic-bezier(0.22, 1, 0.36, 1);
}


.nd-works .nd-works__all:hover,
.nd-works .nd-works__all:focus-visible {
  gap: 0 !important;

  color:
    var(--works-black, #111111)
    !important;

  border-color:
    var(--works-black, #111111)
    !important;
}


.nd-works .nd-works__all:hover::before,
.nd-works .nd-works__all:focus-visible::before {
  transform:
    scaleX(1);
}


.nd-works .nd-works__all:hover
.nd-works__all-arrow,
.nd-works .nd-works__all:focus-visible
.nd-works__all-arrow {
  transform:
    translate3d(5px, 0, 0);
}


.nd-works .nd-works__all:focus-visible {
  outline:
    2px solid
    var(--works-blue, #2357ff);

  outline-offset: 5px;
}


.nd-works .nd-works__all:active {
  transform:
    scale(0.985);

  transition-duration: 70ms;
}


/* ==================================================
   WORKS：スマートフォン
================================================== */

@media (max-width: 767px) {

  .nd-works .nd-works__heading-frame {
    min-height: 70px;

    padding:
      15px
      18px;

    border-width: 2px;
  }


  .nd-works .nd-works__title {
    font-size:
      34px
      !important;
  }


  .nd-works .nd-work-card__body {
    padding-top: 24px;
  }


  .nd-works .nd-work-card__title {
    /* 本文テキストと同じサイズに揃える。 */
    font-size:
      15px
      !important;
  }


  .nd-works .nd-works__all {
    width: 100%;

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

    min-height: 66px;
  }


  .nd-works .nd-works__all-text {
    padding:
      16px
      18px;

    font-size: 13px;
  }

}
/* ==================================================
   Gutenberg編集画面だけの完成状態表示
   公開画面には影響しません。
================================================== */
.editor-styles-wrapper .nd-works .nd-work-card {
  opacity: 1 !important;
  transform: none !important;
}
.editor-styles-wrapper .nd-works .nd-work-card__mask {
  transform: translateX(101%) !important;
}
.editor-styles-wrapper .nd-works .nd-works__track {
  transform: none !important;
}

/* 見出し: WORKS / SERVICE共通速度 */
.is-heading-pending {
  opacity: 0 !important;
  transform: translate3d(0, 46px, 0) !important;
  will-change: opacity, transform;
}
.is-heading-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    opacity 1000ms cubic-bezier(.22,.61,.36,1),
    transform 1200ms cubic-bezier(.22,1,.36,1) !important;
}