/* ==========================================================
   NOYA DESIGN STUDIO / WORK SINGLE v1.2.1
   /works/{slug}/
========================================================== */

: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-work-single-content: 1120px;
  --nd-work-single-text: 760px;
  --nd-work-single-media: 920px;
}

html,
body {
  overflow-x: clip;
}

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

.nd-work-single,
.nd-work-single *,
.nd-work-single *::before,
.nd-work-single *::after,
.nd-work-single-contact,
.nd-work-single-contact *,
.nd-work-single-contact *::before,
.nd-work-single-contact *::after {
  box-sizing: border-box;
}

/* SWELL標準のブログUIを制作実績詳細では使用しない。 */
body:has(.nd-work-single) #header,
body:has(.nd-work-single) .l-header,
body:has(.nd-work-single) .l-fixHeader,
body:has(.nd-work-single) .p-breadcrumb,
body:has(.nd-work-single) .c-breadcrumb {
  display: none !important;
}

/* SWELLの自動目次は制作実績詳細では使用しない。
 * SWELL本体の設定を変更せず、nd_work の詳細ページだけ確実に非表示にする。
 */
body:has(.nd-work-single) .p-toc,
body:has(.nd-work-single) .swell_toc,
body:has(.nd-work-single) #toc_container,
body:has(.nd-work-single) .toc_container,
body:has(.nd-work-single) [class*="swell_toc"] {
  display: none !important;
}

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

/* ==========================================================
   ページ骨格
========================================================== */
.nd-work-single {
  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-work-single__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-work-single__rail-sticky {
  position: sticky;
  top: var(--nd-rail-sticky-top);
  display: flex;
  justify-content: center;
  width: 100%;
  pointer-events: none;
}

.nd-work-single__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-work-single__rail-sticky {
  top: calc(var(--nd-rail-sticky-top) + 32px);
}

.nd-work-single__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(116px, 9vw, 154px)
    var(--nd-content-gap);
}

.nd-work-single__content {
  width: min(100%, var(--nd-work-single-content));
  margin: 0;
}

/* ==========================================================
   パンくず
========================================================== */
.nd-work-single__breadcrumb {
  margin: 0 0 clamp(44px, 4vw, 58px);
  padding: 0;
}

.nd-work-single__breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  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: 400;
  line-height: 1.3;
  letter-spacing: .085em;
}

.nd-work-single__breadcrumb-list li {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

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

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

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

.nd-work-single__breadcrumb-list .is-current {
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================
   タイトル領域
========================================================== */
.nd-work-single__header {
  width: min(100%, 980px);
  margin: 0 0 clamp(40px, 3.8vw, 56px);
}

.nd-work-single__categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(14px, 1.2vw, 18px);
  color: var(--nd-black);
  font-family: "Barlow Condensed", "IBM Plex Sans JP", sans-serif;
  font-size: clamp(13px, .95vw, 15px);
  /* 太字から通常の太さへ変更。 */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .085em;
}

.nd-work-single__category {
  color: var(--nd-black) !important;
  text-decoration: none !important;
  transition: color 180ms ease;
}

.nd-work-single__category:hover,
.nd-work-single__category:focus-visible {
  color: var(--nd-blue) !important;
}

.nd-work-single__category-separator {
  color: var(--nd-gray);
}

.nd-work-single__title {
  width: min(100%, 900px);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--nd-black) !important;
  background: transparent !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  /* タイトルが折り返さないよう、フォントサイズをさらに小さくする。 */
  font-size: clamp(28px, 2.8vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.045em !important;
}

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

/* ==========================================================
   メインビジュアル
========================================================== */
/*
 * メインビジュアルの枠。
 *
 * v1.1.0:
 * aspect-ratioは「元の画像サイズ」に合わせるため、
 * template-parts/works/gallery.php がインラインstyleで
 * 1枚目の画像の実際の縦横比を指定する。
 * ここに書く 3 / 2 は、画像を取得できなかった場合
 * （NO IMAGE表示時など）だけに使われる既定値。
 *
 * 枠線は黒の細い線、内側にはこれまでより広い余白を持たせて
 * ビジュアル画像（またはギャラリー）を配置する。
 * ギャラリーのスクロール自体は内側の要素で行うため、
 * この外枠は overflow: hidden のままでよい。
 */
.nd-work-single__hero-media {
  position: relative;
  width: 100%;
  /* ビジュアルのサイズを縮小。タイトルと同じ最大幅に揃える。 */
  max-width: 900px;
  /* 画像を取得できなかった場合だけに使う既定値。通常はインラインstyleが優先される。 */
  aspect-ratio: 3 / 2;
  /* 画面（コンテンツ幅）の中央に配置する。 */
  margin: 0 auto clamp(72px, 6.5vw, 96px);
  /* 黒枠と画像の間の余白を拡大。 */
  padding: clamp(24px, 3.5vw, 48px);
  overflow: hidden;
  border: 2px solid var(--nd-black);
  background: var(--nd-white, #F7F7F4);
}

/*
 * 複数画像ギャラリーの時は、外側の .nd-work-single__gallery が
 * サイズ・中央配置・次要素との間隔を担当する。
 * hero-media自身の同じ役割の指定は打ち消し、
 * 「枠(border)＋内側の余白(padding)」だけを担当させる。
 */
.nd-work-single__gallery .nd-work-single__hero-media {
  max-width: none;
  margin: 0;
}

.nd-work-single__hero-image {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  /*
   * 枠の縦横比を画像自体の縦横比に合わせているため、
   * 通常は cover と contain で見た目の差は出ない。
   * 万が一縦横比の取得に失敗した場合でも、画像を
   * 切り抜かず全体を収める contain にしておく。
   */
  object-fit: contain;
  object-position: center;
}

.nd-work-single__hero-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--nd-gray);
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 700;
  letter-spacing: .08em;
}

/* ==========================================================
   メインビジュアル：複数画像ギャラリー
========================================================== */

/*
 * 外側の入れ物。サイズ・中央配置・次要素（タイトル）との
 * 間隔はここで一元管理する（hero-media自身の指定は上で打ち消し済み）。
 */
.nd-work-single__gallery {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto clamp(72px, 6.5vw, 96px);
}

.nd-work-single__gallery-viewport {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  /* ドラッグでスクロールできることを示すカーソル。 */
  cursor: grab;
}

.nd-work-single__gallery-viewport::-webkit-scrollbar {
  display: none;
}

.nd-work-single__gallery-viewport:focus-visible {
  outline: 2px solid var(--nd-blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .nd-work-single__gallery-viewport {
    scroll-behavior: smooth;
  }
}

/*
 * ドラッグ操作中。
 * スクリプト側でドラッグ開始時に付与し、終了時に外す。
 * ドラッグ中はscroll-snapを一時的に無効化し、
 * 指（ポインター）の動きにそのまま追従できるようにする。
 */
.nd-work-single__gallery-viewport.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
}

.nd-work-single__gallery-track {
  display: flex;
  width: 100%;
  height: 100%;
}

.nd-work-single__gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.nd-work-single__gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  /*
   * 枠は1枚目の画像の縦横比に合わせているため、
   * 2枚目以降が異なる縦横比でも切り抜かずに収める。
   */
  object-fit: contain;
  object-position: center;

  /* ドラッグ中に画像だけがブラウザ標準のドラッグ対象になるのを防ぐ。 */
  -webkit-user-drag: none;
  user-select: none;
}

/*
 * 黒枠(hero-media)の直下、枠の外側に配置する。
 * 以前は枠の中に絶対配置していたため、画像に重なって見えていた。
 */
.nd-work-single__gallery-dots {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  margin: clamp(12px, 1.6vw, 18px) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.nd-work-single__gallery-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nd-line);
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
}

.nd-work-single__gallery-dot:hover,
.nd-work-single__gallery-dot:focus-visible {
  background: var(--nd-gray);
}

.nd-work-single__gallery-dot:focus-visible {
  outline: 2px solid var(--nd-blue);
  outline-offset: 3px;
}

.nd-work-single__gallery-dot.is-active {
  background: var(--nd-black);
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .nd-work-single__gallery-viewport {
    scroll-behavior: auto;
  }

  .nd-work-single__gallery-dot {
    transition: none;
  }
}

/* ==========================================================
   制作概要
========================================================== */
.nd-work-overview {
  display: grid;
  grid-template-columns: clamp(190px, 17vw, 240px) minmax(0, 1fr);
  column-gap: clamp(54px, 6vw, 88px);
  width: 100%;
  margin: 0 0 clamp(76px, 7vw, 104px);
  padding-top: clamp(22px, 2vw, 28px);
  border-top: 1px solid var(--nd-line);
}

.nd-work-overview__heading,
.nd-work-overview__body {
  min-width: 0;
}

.nd-work-overview__title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--nd-black) !important;
  background: transparent !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: clamp(20px, 1.65vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: -.025em !important;
}

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

.nd-work-overview__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.4vw, 34px) clamp(34px, 4vw, 58px);
  margin: 0 !important;
  padding: 0 !important;
}

.nd-work-overview__item {
  min-width: 0;
  margin: 0;
  padding: 13px 0 0;
  border-top: 1px solid var(--nd-line);
}

.nd-work-overview__item dt,
.nd-work-overview__item dd {
  margin: 0 !important;
  padding: 0 !important;
}

.nd-work-overview__item dt {
  margin-bottom: 9px !important;
  color: var(--nd-gray);
  font-family: "IBM Plex Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .07em;
}

.nd-work-overview__item dd {
  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.75;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}

.nd-work-overview__action {
  margin-top: clamp(34px, 3.5vw, 52px);
  justify-content: flex-end;
}

/* ==========================================================
   Gutenberg ケーススタディ
   見出し番号なし / 日本語見出し
========================================================== */
.nd-work-single__case-study {
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--nd-black);
  counter-reset: none !important;
}

.nd-work-single__case-study > * {
  box-sizing: border-box;
}

.nd-work-single__case-study h2,
.nd-work-single__case-study .wp-block-heading:is(h2) {
  width: 100%;
  margin: clamp(66px, 6vw, 88px) 0 clamp(24px, 2.4vw, 34px) !important;
  padding: clamp(18px, 1.8vw, 24px) 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--nd-line) !important;
  color: var(--nd-black) !important;
  background: transparent !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: clamp(27px, 2.35vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: -.035em !important;
}

.nd-work-single__case-study > h2:first-child,
.nd-work-single__case-study > .wp-block-heading:first-child {
  margin-top: 0 !important;
}

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

.nd-work-single__case-study p,
.nd-work-single__case-study ul,
.nd-work-single__case-study ol,
.nd-work-single__case-study blockquote {
  width: min(100%, var(--nd-work-single-text));
  margin-right: 0 !important;
  margin-left: 0 !important;
  color: var(--nd-black) !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: clamp(15px, 1.08vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;
  letter-spacing: .03em !important;
}

.nd-work-single__case-study p {
  margin-top: 0 !important;
  margin-bottom: 1.55em !important;
}

.nd-work-single__case-study ul,
.nd-work-single__case-study ol {
  margin-top: 1.4em !important;
  margin-bottom: 1.7em !important;
  padding-left: 1.5em !important;
}

.nd-work-single__case-study li {
  margin: .5em 0 !important;
}

.nd-work-single__case-study h3 {
  width: min(100%, var(--nd-work-single-text));
  margin: clamp(32px, 3vw, 44px) 0 16px !important;
  padding: 0 !important;
  color: var(--nd-black) !important;
  background: transparent !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: clamp(20px, 1.65vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: -.025em !important;
}

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

.nd-work-single__case-study figure,
.nd-work-single__case-study .wp-block-image,
.nd-work-single__case-study .wp-block-gallery {
  width: min(100%, var(--nd-work-single-media));
  max-width: var(--nd-work-single-media) !important;
  margin: clamp(32px, 3.5vw, 46px) 0 !important;
}

.nd-work-single__case-study figure.alignwide,
.nd-work-single__case-study .wp-block-image.alignwide,
.nd-work-single__case-study .wp-block-gallery.alignwide {
  width: 100%;
  max-width: var(--nd-work-single-content) !important;
}

.nd-work-single__case-study figure.alignfull,
.nd-work-single__case-study .wp-block-image.alignfull,
.nd-work-single__case-study .wp-block-gallery.alignfull {
  width: 100%;
  max-width: var(--nd-work-single-content) !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.nd-work-single__case-study img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0 !important;
}

.nd-work-single__case-study figcaption {
  margin-top: 10px !important;
  color: var(--nd-gray) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  letter-spacing: .02em !important;
  text-align: left !important;
}

.nd-work-single__case-study a {
  color: var(--nd-black);
  text-decoration-color: var(--nd-blue);
  text-underline-offset: 3px;
}

/* ==========================================================
   前後制作実績
========================================================== */
.nd-work-post-nav {
  width: 100%;
  margin: clamp(88px, 8vw, 120px) 0 0;
  padding: 0;
  border-top: 1px solid var(--nd-line);
  border-bottom: 1px solid var(--nd-line);
}

.nd-work-post-nav__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.nd-work-post-nav__cell {
  min-width: 0;
}

.nd-work-post-nav__cell--next {
  border-left: 1px solid var(--nd-line);
}

.nd-work-post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 142px;
  padding: clamp(25px, 2.6vw, 34px) clamp(24px, 2.7vw, 38px);
  color: var(--nd-black) !important;
  background: transparent;
  text-decoration: none !important;
  transition: background-color 220ms ease;
}

.nd-work-post-nav__cell--next .nd-work-post-nav__link {
  align-items: flex-end;
  text-align: right;
}

.nd-work-post-nav__link:hover,
.nd-work-post-nav__link:focus-visible {
  background: rgba(183, 224, 0, .16);
}

.nd-work-post-nav__direction {
  color: var(--nd-gray);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .09em;
}

.nd-work-post-nav__title {
  max-width: 28ch;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -.025em;
}

.nd-work-single__back {
  margin-top: clamp(52px, 5vw, 72px);
  justify-content: flex-end;
}

/* ==========================================================
   CONTACT：/works/ の確定仕様と同じ数値
========================================================== */
.nd-work-single-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: visible;
  overflow-x: clip;
  color: var(--nd-black);
  background: #B7E000 !important;
}

.nd-work-single-contact__rail {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-right: 1px solid rgba(17, 19, 21, .34);
  background: #B7E000 !important;
}

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

.nd-work-single-contact__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-work-single-contact__rail-sticky {
  top: calc(var(--nd-rail-sticky-top) + 32px);
}

.nd-work-single-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-work-single-contact__container {
  width: min(100%, 1120px);
  margin: 0 auto;
}

.nd-work-single-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-work-single-contact__copy {
  width: min(100%, 620px);
}

.nd-work-single-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-work-single-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-work-single-contact__title::before,
.nd-work-single-contact__title::after,
.nd-work-single-contact__heading-frame::before,
.nd-work-single-contact__heading-frame::after {
  content: none !important;
  display: none !important;
}

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

.nd-work-single-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-work-single-contact__message .nd-work-single-contact__note {
  margin-top: 7px !important;
}

.nd-work-single-contact__action {
  justify-content: flex-end;
}

.nd-work-single-contact .nd-button {
  --nd-button-max-width: 410px;
}

.nd-work-single-contact .nd-button::before {
  background: var(--nd-black) !important;
}

.nd-work-single-contact .nd-button:hover,
.nd-work-single-contact .nd-button:focus-visible {
  color: var(--nd-white) !important;
}

.nd-work-single-contact .nd-button:hover .nd-button__arrow,
.nd-work-single-contact .nd-button:focus-visible .nd-button__arrow {
  border-left-color: var(--nd-white);
}

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

  .nd-work-single__rail,
  .nd-work-single-contact__rail {
    display: none;
  }

  .nd-work-single__inner {
    width: 100%;
    max-width: none;
    padding: clamp(82px, 9vw, 96px) clamp(42px, 7.5vw, 72px) clamp(104px, 12vw, 136px);
  }

  .nd-work-single__content {
    width: 100%;
  }

  .nd-work-single__title {
    /* タイトルが折り返さないよう、フォントサイズをさらに小さくする。 */
    font-size: clamp(26px, 4.3vw, 34px) !important;
  }

  .nd-work-overview {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .nd-work-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

/* ==========================================================
   Mobile
========================================================== */
@media (max-width: 767px) {
  .nd-work-single__inner {
    padding: 76px clamp(22px, 6vw, 38px) 84px;
  }

  .nd-work-single__breadcrumb {
    margin-bottom: 36px;
  }

  .nd-work-single__breadcrumb-list {
    gap: 7px;
    font-size: 12px;
  }

  .nd-work-single__breadcrumb-list .is-current {
    max-width: 17ch;
  }

  .nd-work-single__header {
    margin-bottom: 34px;
  }

  .nd-work-single__categories {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .nd-work-single__title {
    /* タイトルが折り返さないよう、フォントサイズをさらに小さくする。太字もやめて軽い印象にする。 */
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
  }

  /*
   * スマホ画面では黒枠(border)と内側の余白(padding)を廃止し、
   * 画像をそのまま枠いっぱいに表示する。
   *
   * 理由：枠には「画像自体の縦横比」がaspect-ratioとして指定されているが、
   * paddingで内側を削ると、そのぶん縦横比が画像本来の比率からズレる。
   * object-fit: containは画像を切り抜かずに収めようとするため、
   * このズレが「画像の左右（または上下）に黒い余白ができて、
   * 画像が中央の狭い範囲に浮いて見える」原因になっていた。
   * paddingを0にすれば内側の比率が画像そのものの比率と一致するため、
   * 余白なく枠いっぱいに表示され、結果として常に中央（＝全体）に
   * 配置された状態になる。borderも合わせて消すことで「枠」自体をなくす。
   */
  .nd-work-single__hero-media {
    margin-bottom: 64px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .nd-work-overview {
    margin-bottom: 70px;
    padding-top: 22px;
  }

  .nd-work-overview__title {
    font-size: 20px !important;
  }

  .nd-work-overview__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .nd-work-overview__action {
    margin-top: 40px;
  }

  .nd-work-single__case-study h2,
  .nd-work-single__case-study .wp-block-heading:is(h2) {
    margin-top: 58px !important;
    margin-bottom: 22px !important;
    padding-top: 16px !important;
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.5 !important;
  }

  .nd-work-single__case-study p,
  .nd-work-single__case-study ul,
  .nd-work-single__case-study ol,
  .nd-work-single__case-study blockquote {
    font-size: 15px !important;
    line-height: 1.9 !important;
  }

  .nd-work-single__case-study figure,
  .nd-work-single__case-study .wp-block-image,
  .nd-work-single__case-study .wp-block-gallery {
    margin-top: 28px !important;
    margin-bottom: 34px !important;
  }

  .nd-work-post-nav {
    margin-top: 72px;
  }

  .nd-work-post-nav__grid {
    grid-template-columns: 1fr;
  }

  .nd-work-post-nav__cell--next {
    border-top: 1px solid var(--nd-line);
    border-left: 0;
  }

  .nd-work-post-nav__link {
    min-height: 118px;
    padding: 24px 20px;
  }

  .nd-work-post-nav__title {
    font-size: 17px;
  }

  .nd-work-single__back {
    margin-top: 46px;
  }

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

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

  .nd-work-single-contact__title {
    font-size: clamp(30px, 9vw, 38px) !important;
  }

  .nd-work-single-contact__message p {
    font-size: 15px;
    line-height: 1.85;
  }

  .nd-work-single-contact__layout {
    row-gap: 38px;
  }

  .nd-work-single-contact__action {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nd-work-single__category,
  .nd-work-post-nav__link,
  .nd-work-single-contact .nd-button,
  .nd-work-single-contact .nd-button::before,
  .nd-work-single-contact .nd-button__arrow {
    transition: none !important;
  }
}


/* ==========================================================
   v1.1.0 / 実運用耐性の最終調整
   - 長いタイトル・概要
   - Gutenberg 2カラム画像 / ギャラリー
   - PREV/NEXT片側表示
   - Tablet / Mobileの安定化
========================================================== */

/* 長いタイトル・カテゴリーでも横幅を破綻させない。 */
.nd-work-single__categories,
.nd-work-single__title,
.nd-work-single__breadcrumb-list .is-current,
.nd-work-overview__item dd,
.nd-work-post-nav__title {
  overflow-wrap: anywhere;
  word-break: normal;
}

.nd-work-single__title {
  text-wrap: balance;
}

.nd-work-single__breadcrumb-list .is-current > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* PROJECT OVERVIEW：長い担当範囲・ツール名でも破綻させない。 */
.nd-work-overview__body,
.nd-work-overview__grid,
.nd-work-overview__item,
.nd-work-overview__item dd {
  min-width: 0;
}

.nd-work-overview__item dd {
  white-space: normal;
}

/* Gutenberg標準ブロックにSWELL由来の余計な最大幅を持ち込まない。 */
.nd-work-single__case-study > .wp-block-columns,
.nd-work-single__case-study > .wp-block-gallery,
.nd-work-single__case-study > .wp-block-image {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* 2カラム：比較画像やPC/SPの並列表現用。 */
.nd-work-single__case-study .wp-block-columns {
  width: min(100%, var(--nd-work-single-content));
  max-width: var(--nd-work-single-content) !important;
  margin-top: clamp(32px, 3.5vw, 46px) !important;
  margin-bottom: clamp(36px, 4vw, 52px) !important;
  gap: clamp(20px, 2.4vw, 36px) !important;
  align-items: flex-start !important;
}

.nd-work-single__case-study .wp-block-column {
  min-width: 0;
}

.nd-work-single__case-study .wp-block-columns .wp-block-image,
.nd-work-single__case-study .wp-block-columns figure {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.nd-work-single__case-study .wp-block-columns img {
  width: 100%;
  height: auto;
}

/* Gutenberg Gallery：2枚比較をNOYAの余白基準へ統一。 */
.nd-work-single__case-study .wp-block-gallery.has-nested-images {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px) !important;
  width: min(100%, var(--nd-work-single-content));
  max-width: var(--nd-work-single-content) !important;
}

.nd-work-single__case-study .wp-block-gallery.has-nested-images > figure.wp-block-image {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.nd-work-single__case-study .wp-block-gallery.has-nested-images img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

/* 長いリンクも本文幅を越えない。 */
.nd-work-single__case-study a {
  overflow-wrap: anywhere;
}

/* PREV/NEXTが片側のみの場合は、空の半分を残さず全面を使用する。 */
.nd-work-post-nav--single .nd-work-post-nav__grid {
  grid-template-columns: minmax(0, 1fr);
}

.nd-work-post-nav--single .nd-work-post-nav__cell--next {
  border-left: 0;
}

.nd-work-post-nav--single .nd-work-post-nav__cell--next .nd-work-post-nav__link {
  align-items: flex-end;
  text-align: right;
}

/* SWELL記事系UIが将来設定変更で再表示されてもWORKS詳細へ混入させない。 */
body:has(.nd-work-single) .p-articleMetas,
body:has(.nd-work-single) .c-postTimes,
body:has(.nd-work-single) .p-shareBtns,
body:has(.nd-work-single) .p-relatedPosts,
body:has(.nd-work-single) .p-postList,
body:has(.nd-work-single) .p-authorBox {
  display: none !important;
}

@media (max-width: 959px) {
  /* タブレットでは本文領域を中央に寄せ、PCの広さをそのまま引きずらない。 */
  .nd-work-single__content {
    width: min(100%, 860px);
    margin-right: auto;
    margin-left: auto;
  }

  .nd-work-single__header {
    width: min(100%, 820px);
  }

  .nd-work-single__title {
    max-width: 18ch;
  }

  .nd-work-single__case-study .wp-block-columns,
  .nd-work-single__case-study .wp-block-gallery.has-nested-images {
    width: 100%;
  }
}

@media (max-width: 767px) {
  /* スマホでは長いタイトルを3行程度まで自然に許容する。 */
  .nd-work-single__title {
    width: 100%;
    max-width: 20ch;
    text-wrap: wrap;
  }

  .nd-work-single__breadcrumb-list {
    width: 100%;
  }

  .nd-work-single__breadcrumb-list .is-current {
    flex: 1 1 auto;
    max-width: none;
  }

  .nd-work-single__breadcrumb-list .is-current > span {
    max-width: 18ch;
  }

  /* 画像比較はスマホでは縦積み。 */
  .nd-work-single__case-study .wp-block-columns {
    display: flex !important;
    flex-direction: column;
    gap: 24px !important;
  }

  .nd-work-single__case-study .wp-block-columns .wp-block-column {
    width: 100% !important;
    flex-basis: auto !important;
  }

  .nd-work-single__case-study .wp-block-gallery.has-nested-images {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px !important;
  }

  .nd-work-single__case-study .wp-block-gallery.has-nested-images > figure.wp-block-image {
    width: 100% !important;
  }

  /* 長文の概要値はラベルとの距離を保ちながら折り返す。 */
  .nd-work-overview__item dd {
    line-height: 1.7;
  }

  /* 片側ナビもスマホでは同じ縦リズム。 */
  .nd-work-post-nav--single .nd-work-post-nav__link {
    min-height: 108px;
  }
}