/* ==========================================================
   NOYA DESIGN STUDIO / WORKS ARCHIVE v1.2.1
========================================================== */

:root {
  --nd-black: #111315;
  --nd-gray: #646762;
  --nd-line: #D9DAD5;
  --nd-blue: #3437F2;
  --nd-accent: #B7E000;
  --nd-white: #F7F7F4;
  --nd-page-edge: clamp(18px, 2.2vw, 38px);
  --nd-rail-width: clamp(156px, 10.8vw, 210px);
  --nd-content-gap: clamp(36px, 5vw, 90px);
  --nd-rail-sticky-top: clamp(170px, 28vh, 290px);
  --nd-works-archive-content: 1120px;
}

html,
body { overflow-x: clip; }

body {
  margin: 0;
  color: var(--nd-black);
  background: var(--nd-white);
  font-family: "IBM Plex Sans JP", sans-serif;
}

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

/* SWELL標準のブログUIをWORKSアーカイブでは使用しない。 */
body:has(.nd-works-archive) #header,
body:has(.nd-works-archive) .l-header,
body:has(.nd-works-archive) .l-fixHeader,
body:has(.nd-works-archive) .p-breadcrumb,
body:has(.nd-works-archive) .c-breadcrumb {
  display: none !important;
}

body:has(.nd-works-archive) #content,
body:has(.nd-works-archive) .l-content,
body:has(.nd-works-archive) .l-mainContent,
body:has(.nd-works-archive) .l-mainContent__inner,
body:has(.nd-works-archive) .post_content {
  width: 100% !important;
  max-width: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ==========================================================
   ページ骨格
========================================================== */
.nd-works-archive {
  position: relative;
  display: grid;
  grid-template-columns: var(--nd-page-edge) var(--nd-rail-width) minmax(0, 1fr);
  width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 0 0 calc(50% - 50vw) !important;
  padding: 0;
  overflow: visible;
  color: var(--nd-black);
  background: var(--nd-white);
}

.nd-works-archive__rail {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  margin: 0 0 clamp(210px, 22vh, 330px);
  padding: 0;
  border-right: 1px solid var(--nd-line);
  background: var(--nd-white);
}

.nd-works-archive__rail-sticky {
  position: sticky;
  top: var(--nd-rail-sticky-top);
  display: flex;
  justify-content: center;
  width: 100%;
  pointer-events: none;
}

/* トップページのWORKS/SERVICEレール最終値と一致 */
.nd-works-archive__rail-label {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--nd-black) !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: clamp(82px, 6vw, 104px) !important;
  font-weight: 600 !important;
  line-height: .9 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
}

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

.nd-works-archive__inner {
  grid-column: 3;
  grid-row: 1;
  width: 100%;
  max-width: calc(1760px - var(--nd-page-edge) - var(--nd-rail-width));
  min-width: 0;
  margin: 0 auto 0 0;
  padding:
    clamp(80px, 6vw, 100px)
    clamp(52px, 6vw, 104px)
    clamp(150px, 12vw, 196px)
    var(--nd-content-gap);
}

.nd-works-archive__content {
  width: min(100%, var(--nd-works-archive-content));
  margin: 0;
}

/* ==========================================================
   パンくず
========================================================== */
.nd-works-archive__breadcrumb {
  margin: 0 0 clamp(60px, 5.5vw, 82px);
  padding: 0;
}

.nd-works-archive__breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  color: var(--nd-gray);
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(13px, .95vw, 15px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .085em;
}

.nd-works-archive__breadcrumb-list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.nd-works-archive__breadcrumb-list li::before,
.nd-works-archive__breadcrumb-list li::after {
  content: none !important;
  display: none !important;
}

.nd-works-archive__breadcrumb-list a {
  color: var(--nd-gray) !important;
  text-decoration: none !important;
  transition: color 180ms ease;
}

.nd-works-archive__breadcrumb-list a:hover,
.nd-works-archive__breadcrumb-list a:focus-visible {
  color: var(--nd-black) !important;
}

/* ==========================================================
   ページ見出し
========================================================== */
.nd-works-archive__header {
  width: min(100%, 620px);
  margin: 0 0 clamp(46px, 4.3vw, 62px);
}

.nd-works-archive__heading-frame {
  display: flex;
  align-items: center;
  width: min(100%, 620px);
  min-height: 78px;
  padding: 16px clamp(22px, 2vw, 30px);
  border: 3px solid #111315 !important;
  background: #F7F7F4 !important;
}

.nd-works-archive__title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--nd-black) !important;
  background: transparent !important;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-size: clamp(36px, 3.35vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -.05em !important;
}

.nd-works-archive__title::before,
.nd-works-archive__title::after,
.nd-works-archive__heading-frame::before,
.nd-works-archive__heading-frame::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================
   カテゴリーフィルター
========================================================== */
.nd-works-filter {
  width: 100%;
  margin: 0 0 clamp(78px, 7vw, 108px);
}

.nd-works-filter__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.nd-works-filter__item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.nd-works-filter__item::before {
  content: none !important;
  display: none !important;
}

.nd-works-filter__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ボタンサイズを一段階大きくする（サイト全体の比率は崩さない範囲）。 */
  min-height: 50px;
  padding: 13px 20px 12px;
  border: 1px solid var(--nd-black) !important;
  color: var(--nd-black) !important;
  background: var(--nd-white) !important;
  font-family: "Barlow Condensed", "IBM Plex Sans JP", sans-serif !important;
  /* フォントサイズを一段階大きくする。 */
  font-size: clamp(15px, 1.05vw, 17px) !important;
  /* 太字から通常の太さへ変更。 */
  font-weight: 400;
  line-height: 1;
  letter-spacing: .08em;
  text-decoration: none !important;
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease;
}

.nd-works-filter__link:hover,
.nd-works-filter__link:focus-visible {
  border-color: var(--nd-accent) !important;
  background: var(--nd-accent) !important;
  color: var(--nd-black) !important;
}

.nd-works-filter__link.is-current {
  border-color: var(--nd-black) !important;
  background: var(--nd-black) !important;
  color: var(--nd-white) !important;
}

.nd-works-filter__link:focus-visible {
  outline: 2px solid var(--nd-blue);
  outline-offset: 4px;
}

/* ==========================================================
   制作実績一覧：2列維持 / サイズを抑え余白を増やす
========================================================== */
.nd-works-archive__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(38px, 3.8vw, 58px);
  row-gap: clamp(96px, 8.5vw, 132px);
  width: 100%;
}

.nd-works-archive-card {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.nd-works-archive-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--nd-black) !important;
  text-decoration: none !important;
}

.nd-works-archive-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid #D9DAD5 !important;
  background: #f1f1f1;
}

.nd-works-archive-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1);
}

.nd-works-archive-card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--nd-gray);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
}

.nd-works-archive-card__body {
  flex: 1;
  padding-top: clamp(20px, 1.9vw, 26px);
}

.nd-works-archive-card__category {
  margin: 0 0 11px !important;
  padding: 0 !important;
  color: var(--nd-black);
  font-family: "Barlow Condensed", "IBM Plex Sans JP", sans-serif;
  /* 小さい補助ラベルのサイズを統一（整数px）。 */
  font-size: 14px;
  /* TOPページと同じく、太字から通常の太さへ変更。 */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.nd-works-archive-card__title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--nd-black) !important;
  font-family: "IBM Plex Sans JP", sans-serif;
  /* TOPページの本文テキストと同じサイズに揃える（整数px）。 */
  font-size: 17px !important;
  /* TOPページと同じく、太字から通常の太さへ変更。 */
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -.025em !important;
}

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

.nd-works-archive-card__title span {
  /* TOPページと同じく、黒背景を削除し文字色をブラックへ変更。 */
  padding: 0;
  color: var(--nd-black) !important;
  background: transparent !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.nd-works-archive-card__link:hover .nd-works-archive-card__image,
.nd-works-archive-card__link:focus-visible .nd-works-archive-card__image {
  transform: scale(1.015);
}

.nd-works-archive-card__link:focus-visible {
  outline: 2px solid var(--nd-blue);
  outline-offset: 6px;
}

/* ==========================================================
   ページネーション
========================================================== */
.nd-works-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: clamp(110px, 9vw, 148px) 0 0;
}

.nd-works-pagination__numbers {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nd-works-pagination__number,
.nd-works-pagination__arrow {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid var(--nd-black);
  color: var(--nd-black) !important;
  background: var(--nd-white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  text-decoration: none !important;
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}

.nd-works-pagination__number.is-current,
.nd-works-pagination__number:hover,
.nd-works-pagination__number:focus-visible,
.nd-works-pagination__arrow:not(.is-disabled):hover,
.nd-works-pagination__arrow:not(.is-disabled):focus-visible {
  border-color: var(--nd-accent);
  background: var(--nd-accent);
  color: var(--nd-black) !important;
}

.nd-works-pagination__arrow.is-disabled { opacity: .28; }

.nd-works-archive__empty {
  width: 100%;
  padding: clamp(58px, 6vw, 86px) 0;
  border-top: 1px solid var(--nd-line);
  border-bottom: 1px solid var(--nd-line);
}

.nd-works-archive__empty p {
  margin: 0 !important;
  color: var(--nd-gray);
  font-size: 15px;
  line-height: 1.8;
}

/* ==========================================================
   CONTACT：トップページの確定仕様を維持
========================================================== */
.nd-works-archive-contact {
  position: relative;
  display: grid;
  grid-template-columns: var(--nd-page-edge) var(--nd-rail-width) minmax(0, 1fr);
  width: 100vw;
  max-width: 100vw;
  min-height: clamp(520px, 66vh, 680px);
  margin: 0 0 0 calc(50% - 50vw) !important;
  padding: 0;
  overflow-x: clip;
  color: var(--nd-black);
  background: #B7E000 !important;
}

.nd-works-archive-contact__rail {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  border-right: 1px solid rgba(17, 19, 21, .34);
  background: #B7E000 !important;
}

.nd-works-archive-contact__rail-sticky {
  position: sticky;
  top: var(--nd-rail-sticky-top);
  display: flex;
  justify-content: center;
  width: 100%;
  pointer-events: none;
}

.nd-works-archive-contact__rail-label {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--nd-black);
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(82px, 6vw, 104px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: .08em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

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

.nd-works-archive-contact__inner {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: clamp(74px, 7vw, 112px) clamp(44px, 6.5vw, 112px) clamp(78px, 7.5vw, 120px);
}

.nd-works-archive-contact__container {
  width: min(100%, 1120px);
  margin: 0 auto;
}

.nd-works-archive-contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
  column-gap: clamp(70px, 8vw, 142px);
  align-items: center;
  width: 100%;
}

.nd-works-archive-contact__copy { width: min(100%, 620px); }

.nd-works-archive-contact__heading-frame {
  display: flex;
  align-items: center;
  width: min(100%, 560px);
  min-height: 82px;
  padding: 12px clamp(20px, 2vw, 28px);
  border: 3px solid #111315 !important;
}

.nd-works-archive-contact__title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--nd-black) !important;
  background: transparent !important;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-size: clamp(36px, 3.4vw, 46px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -.055em !important;
}

.nd-works-archive-contact__title::before,
.nd-works-archive-contact__title::after,
.nd-works-archive-contact__heading-frame::before,
.nd-works-archive-contact__heading-frame::after {
  content: none !important;
  display: none !important;
}

.nd-works-archive-contact__message {
  width: min(100%, 540px);
  margin-top: clamp(30px, 3.5vw, 48px);
  padding-left: clamp(2px, .4vw, 6px);
}

.nd-works-archive-contact__message p {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--nd-black);
  font-family: "IBM Plex Sans JP", sans-serif;
  font-size: clamp(15px, 1.08vw, 17px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .035em;
}

.nd-works-archive-contact__message .nd-works-archive-contact__note { margin-top: 7px !important; }
.nd-works-archive-contact__action { justify-content: flex-end; }
.nd-works-archive-contact .nd-button { --nd-button-max-width: 410px; }
.nd-works-archive-contact .nd-button::before { background: var(--nd-black) !important; }
.nd-works-archive-contact .nd-button:hover,
.nd-works-archive-contact .nd-button:focus-visible { color: var(--nd-white) !important; }
.nd-works-archive-contact .nd-button:hover .nd-button__arrow,
.nd-works-archive-contact .nd-button:focus-visible .nd-button__arrow { border-left-color: var(--nd-white); }

/* ==========================================================
   Responsive
========================================================== */
@media (max-width: 959px) {
  .nd-works-archive,
  .nd-works-archive-contact {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
  }

  .nd-works-archive__rail,
  .nd-works-archive-contact__rail { display: none; }

  .nd-works-archive__inner {
    width: 100%;
    max-width: none;
    padding: clamp(82px, 9vw, 96px) clamp(42px, 7.5vw, 72px) clamp(120px, 14vw, 154px);
  }

  .nd-works-archive__content { width: 100%; }

  .nd-works-archive__heading-frame {
    min-height: 74px;
    border-width: 2px !important;
  }

  .nd-works-archive__title { font-size: clamp(34px, 6vw, 46px) !important; }
  .nd-works-filter { margin-bottom: clamp(68px, 8vw, 90px); }
  .nd-works-archive__grid { column-gap: clamp(26px, 4vw, 38px); row-gap: 82px; }

  .nd-works-archive-contact__inner {
    width: 100%;
    padding: clamp(72px, 10vw, 102px) clamp(34px, 7vw, 68px) clamp(78px, 10vw, 110px);
  }

  .nd-works-archive-contact__layout {
    grid-template-columns: 1fr;
    row-gap: clamp(46px, 7vw, 66px);
    width: min(100%, 760px);
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .nd-works-archive__inner {
    padding: 76px clamp(22px, 6vw, 38px) 96px;
  }

  .nd-works-archive__breadcrumb { margin-bottom: 42px; }
  .nd-works-archive__header { margin-bottom: 38px; }

  .nd-works-archive__heading-frame {
    min-height: 68px;
    padding: 14px 18px;
    border-width: 2px !important;
  }

  .nd-works-archive__title { font-size: 33px !important; }

  .nd-works-filter { margin-bottom: 58px; }
  .nd-works-filter__list { gap: 8px; }
  /* ボタン/フォントサイズを一段階大きくする（デスクトップと同じ方針）。 */
  .nd-works-filter__link { min-height: 46px; padding: 11px 16px 10px; font-size: 15px !important; }

  .nd-works-archive__grid {
    grid-template-columns: 1fr;
    row-gap: 68px;
  }

  .nd-works-archive-card__body { padding-top: 20px; }
  /* TOPページの本文テキストと同じサイズに揃える。 */
  .nd-works-archive-card__title { font-size: 15px !important; }
  .nd-works-pagination { margin-top: 74px; }

  .nd-works-archive-contact__inner {
    padding: 66px clamp(22px, 6vw, 38px) 78px;
  }

  .nd-works-archive-contact__heading-frame {
    min-height: 68px;
    padding: 10px 18px;
    border-width: 2px !important;
  }

  .nd-works-archive-contact__title { font-size: clamp(30px, 9vw, 38px) !important; }
  .nd-works-archive-contact__message p { font-size: 15px; line-height: 1.85; }
  .nd-works-archive-contact__layout { row-gap: 38px; }
  .nd-works-archive-contact__action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nd-works-archive-card__image,
  .nd-works-filter__link,
  .nd-works-pagination__number,
  .nd-works-pagination__arrow,
  .nd-works-archive-contact .nd-button,
  .nd-works-archive-contact .nd-button::before,
  .nd-works-archive-contact .nd-button__arrow {
    transition: none !important;
  }
}