/*
 * Sub pages (Figma file zsqdnkcUZh9nZRNu8PRu4R).
 *   Works list   node 427:161
 *   Works detail node 431:684
 *   About        node 408:157
 *
 * Header, CONTACT US and footer come from the TOP (preview.css). Everything
 * here is drawn on the same 1440px canvas and keeps the TOP's rules: side
 * margins from --pv-gutter and type that scales down from the canvas size.
 */

.sfix-sub { position: relative; }

/* ---------- hero ---------- */
.sfix-hero {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 48px;
  padding: 192px var(--pv-gutter) 96px;
}
.sfix-hero-en {
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(56px, 6.94vw, 100px);
  font-weight: 700;
  line-height: 1.2;
}
.sfix-hero-ja {
  min-height: 1.875em;
  font-size: clamp(18px, 1.67vw, 24px);
  font-weight: 500;
  line-height: 1.2;
}
.sfix-hero-lead {
  font-size: clamp(14px, 1.11vw, 16px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 2;
}

/* The TOP's wave (fv-wave.png) behind the hero, kept as faint as it is over
   the FV. The artwork is near-white strokes made for the dark footage, so it
   is darkened a touch to show on white at all; its colours are left alone, as
   any lift in saturation read as too colourful here. The band covers the hero
   and the tabs; the card grid below is opaque and hides the rest, as in the
   design. The ripple is the TOP's filter and sits on the parent, leaving the
   brightness filter to the layer that draws the image. */
.sfix-hero-wave {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  height: 44.5vw;
  min-height: 480px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 48%);
  mask-image: linear-gradient(to right, transparent 30%, #000 48%);
}
.sfix-hero-wave-art {
  position: absolute;
  top: -3vw;
  left: 18vw;
  width: 100vw;
  aspect-ratio: 1615 / 826;
  transform-origin: center bottom;
  filter: url(#pv-fv-wave-filter);
  animation: pv-fv-drift 18s ease-in-out infinite;
}
.sfix-hero-wave-art::before {
  position: absolute;
  inset: 0;
  background: url(../preview/optimized/fv-wave-w1600-37704ee22a.webp) center / 100% 100% no-repeat;
  content: "";
  filter: brightness(0.95);
}
.sfix-hero-wave .pv-fv-wave-defs { position: absolute; width: 0; height: 0; }

/* Body of the generic sub pages (news, columns, single posts, placeholder
   pages, 404): sits below the shared hero on the same gutter. */
.sfix-sub-body {
  position: relative;
  z-index: 1;
  padding: 0 var(--pv-gutter) 120px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}
.sfix-sub-body > :first-child { margin-top: 0; }
.sfix-sub-body .sfix-entry { max-width: 880px; }

/* ---------- works list ---------- */
.sfix-works {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 40px;
  padding-bottom: 220px;
}

.sfix-work-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 0 var(--pv-gutter);
}
.sfix-work-tabs a {
  min-width: 120px;
  padding: 4px 20px;
  border: 1px solid #000;
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease;
}
.sfix-work-tabs a[aria-current],
.sfix-work-tabs a:hover { background: #000; color: #fff; }

/* Full-bleed sheet of cards ruled in black. Each card draws its right and
   bottom rule; the sheet draws the top and bottom ones, and the inner list
   is pulled up 1px so a full last row does not double the bottom rule while
   a short last row still closes. */
.sfix-work-grid {
  overflow: hidden;
  border-block: 1px solid #000;
  background: #fff;
}
.sfix-work-grid-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: -1px;
}
.sfix-work-card {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #fff;
}
/* Three columns: every other card is grey, which checkers the sheet. */
.sfix-work-card:nth-child(even) { background: #f2f2f2; }
.sfix-work-card a {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  padding: clamp(24px, 2.78vw, 40px);
}
.sfix-work-card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 400 / 299.25;
}
.sfix-work-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sfix-work-card a:hover .sfix-work-card-media img { transform: scale(1.05); }
.sfix-work-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.sfix-work-tag {
  padding: 0 8px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
}
.sfix-work-card-title { font-size: 16px; font-weight: 700; line-height: 1.6; }
.sfix-work-card-text,
.sfix-work-card-date { font-size: 12px; line-height: 1.6; }

.sfix-works-empty { padding: 0 var(--pv-gutter); line-height: 2; }

/* ---------- pager ---------- */
.sfix-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--pv-gutter);
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.sfix-pager-step[aria-disabled] { color: #d9d9d9; }
.sfix-pager-pages { display: flex; gap: 17px; }
.sfix-pager .page-numbers {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid #000;
  border-radius: 50%;
  background: #fff;
  color: #000;
  transition: background-color 200ms ease, color 200ms ease;
}
.sfix-pager .page-numbers.current,
.sfix-pager a.page-numbers:hover { background: #000; color: #fff; }

/* ---------- works detail ---------- */
/* The category as an outlined tag, then the headline 8px under it (the user
   asked for this order, the reverse of the Figma frame). */
.sfix-case-head {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 192px var(--pv-gutter) 63px;
}
/* The design sets the headline in Yu Gothic Bold; devices without it fall
   back to the site's Noto Sans JP. */
.sfix-case-title {
  font-family: YuGothic, "Yu Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(28px, 3.89vw, 56px);
  font-weight: 700;
  line-height: 1.47;
}
.sfix-case-category {
  padding: 8px;
  border: 1px solid #000;
  font-size: clamp(14px, 1.39vw, 20px);
  font-weight: 700;
  line-height: 1.45;
}

.sfix-case-main { padding-bottom: 140px; }
/* The key visual runs edge to edge and the profile card rides up over its
   lower 96px. */
.sfix-case-kv {
  height: clamp(220px, 32vw, 461px);
  margin-bottom: -96px;
}
.sfix-case-kv img { width: 100%; height: 100%; object-fit: cover; }

.sfix-case-inner {
  position: relative;
  display: grid;
  gap: 96px;
  padding: 0 var(--pv-gutter);
}
.sfix-case-inner .pv-button { justify-self: end; margin-top: 0; }
.pv-button-line { background: #fff; color: #000; }

.sfix-case-card {
  display: grid;
  gap: 48px;
  padding: clamp(24px, 3.89vw, 56px);
  border: 1px solid #000;
  border-radius: 16px;
  background: #fff;
}
.sfix-case-profile {
  display: flex;
  gap: clamp(32px, 6.67vw, 96px);
  align-items: center;
}
.sfix-case-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 1px solid #000;
  border-radius: 50%;
}
.sfix-case-logo img { width: 79.12%; height: 79.12%; object-fit: contain; }
.sfix-case-facts {
  display: grid;
  flex: 1;
  gap: 10px;
  min-width: 0;
  font-size: 16px;
  line-height: 1.6;
}
.sfix-case-facts > div { display: flex; border-bottom: 1px solid #000; }
.sfix-case-facts dt { flex: none; width: 200px; padding: 8px; font-weight: 700; }
.sfix-case-facts dd { flex: 1; min-width: 0; padding: 8px; }

/* Ruled blocks: a rule above each and one closing the last. */
.sfix-case-blocks { display: grid; gap: 24px; }
.sfix-case-block { padding-top: 24px; border-top: 1px solid #000; }
.sfix-case-block:last-child { padding-bottom: 24px; border-bottom: 1px solid #000; }
.sfix-case-block h2 {
  display: grid;
  place-items: center;
  width: 160px;
  padding: 8px;
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}
.sfix-case-block ul {
  margin-top: 14px;
  padding-left: 24px;
  list-style: disc;
  font-size: 16px;
  line-height: 1.6;
}

/* Body written in the editor: headings open a block 48px below the last one,
   everything inside a block sits 24px apart. */
.sfix-case-body { font-size: 16px; line-height: 1.6; }
.sfix-case-body > * { margin-block: 24px 0; }
.sfix-case-body > :first-child { margin-top: 0; }
.sfix-case-body h2,
.sfix-case-body h3 { margin-top: 48px; font-size: 24px; font-weight: 700; line-height: 1.8; }
.sfix-case-body ul,
.sfix-case-body ol { padding-left: 24px; list-style: disc; }
.sfix-case-body ol { list-style: decimal; }
.sfix-case-body a { text-decoration: underline; }
.sfix-case-body .wp-block-columns { gap: 24px; }
.sfix-case-body .wp-block-image { margin-inline: 0; }
.sfix-case-body .wp-block-column .wp-block-image img {
  width: 100%;
  aspect-ratio: 587.5 / 353;
  object-fit: cover;
}

/* ---------- about: intro ---------- */
/* The group photo is set in from the left gutter and stops 424px short of
   the right edge on the 1440 canvas; the lead starts under its middle. */
.sfix-about-intro {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 55px;
  padding: 0 var(--pv-gutter) 160px;
}
.sfix-about-photo {
  width: min(65vw, 936px);
  aspect-ratio: 936 / 561;
  overflow: hidden;
}
.sfix-about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The Figma layer stretches this photo vertically by ~28%; the original
     is used here at its true proportions, cropped a little top and bottom. */
  object-position: center 40%;
}
.sfix-about-lead {
  margin-left: 31.3vw;
  font-size: clamp(15px, 1.39vw, 20px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 2;
}
.sfix-about-lead strong { font-weight: 700; }

/* Section heads shared by OUR STORY and COMPANY. */
.sfix-section-en {
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(44px, 6.11vw, 88px);
  font-weight: 700;
  line-height: 1.2;
}
.sfix-section-ja {
  font-size: clamp(18px, 1.67vw, 24px);
  font-weight: 700;
  line-height: 1.8;
}

/* ---------- about: our story ---------- */
/* Five chapters laid out on the 1440 canvas with the numeral, the photo and
   the copy each placed in vw so the composition scales. Every chapter is a
   positioned box whose copy sits in flow below a top padding that clears the
   photo and numeral above it. The numerals are flat light grey and sit
   over the photos (user's call, 2026-10-07); the copy sits over both. */
.sfix-story {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-bottom: 8vw;
}
.sfix-story-head {
  display: grid;
  gap: 24px;
  justify-items: end;
  padding: 0 var(--pv-gutter);
  text-align: right;
}
.sfix-story-list {
  display: grid;
  gap: 9.2vw;
  margin-top: 6.7vw;
  padding: 0;
  list-style: none;
}
.sfix-story-item { position: relative; }
.sfix-story-photo {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 27.4vw;
  width: 54.8vw;
  aspect-ratio: 789 / 454;
  overflow: hidden;
}
/* The design scales the photo past the box (132% tall, 114% wide, anchored
   to its top and nudged left) rather than fitting it, so the crop is kept
   as those percentages. */
.sfix-story-photo img {
  position: absolute;
  top: 0;
  left: -9.49%;
  width: 114.03%;
  height: 132.05%;
  max-width: none;
  object-fit: cover;
}
/* 0.7 is Montserrat's cap height, so the line box hugs the figures and the
   top offsets below land on the cap line as in Figma. */
.sfix-story-num {
  position: absolute;
  z-index: 2;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 34.7vw;
  font-weight: 700;
  line-height: 0.7;
  letter-spacing: 0;
  color: #f2f2f2;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.sfix-story-text {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 35px;
  margin-left: var(--pv-gutter);
}
.sfix-story-title {
  font-size: clamp(22px, 2.22vw, 32px);
  font-weight: 700;
  line-height: 1.8;
}
.sfix-story-body { font-size: 16px; line-height: 1.8; }
.sfix-story-body strong { font-weight: 700; }

.sfix-story-item[data-chapter="01"] .sfix-story-num { top: 10.6vw; left: -3.9vw; }
.sfix-story-item[data-chapter="01"] .sfix-story-text { padding-top: 39.2vw; max-width: 64.2vw; }

.sfix-story-item[data-chapter="02"] .sfix-story-num { top: 0; left: 59.7vw; }
.sfix-story-item[data-chapter="02"] .sfix-story-text { padding-top: 10.5vw; margin-left: 14.2vw; max-width: 49.2vw; }

.sfix-story-item[data-chapter="03"] .sfix-story-photo { top: 2.8vw; left: 33.5vw; }
.sfix-story-item[data-chapter="03"] .sfix-story-num { top: 11.9vw; left: -3.75vw; }
.sfix-story-item[data-chapter="03"] .sfix-story-text { padding-top: 41.5vw; max-width: 54.8vw; }

.sfix-story-item[data-chapter="04"] .sfix-story-num { top: 0; left: 54.2vw; }
.sfix-story-item[data-chapter="04"] .sfix-story-text { padding-top: 12.2vw; margin-left: 13vw; max-width: 72vw; }

.sfix-story-item[data-chapter="05"] .sfix-story-photo { left: 34vw; }
.sfix-story-item[data-chapter="05"] .sfix-story-num { top: 11.9vw; left: -4.9vw; }
.sfix-story-item[data-chapter="05"] .sfix-story-text { padding-top: 41.9vw; max-width: 83.5vw; }

/* ---------- about: message ---------- */
/* A black sheet whose top edge is the curve drawn in Figma (message-shape.svg,
   1440 x 1362, starting 111px down); the portrait bleeds off the top right
   corner above it, the heading sits in the black on the left, and the
   letter runs full width below. */
.sfix-message {
  position: relative;
  z-index: 1;
  min-height: 102.3vw;
  padding: 55vw var(--pv-gutter) 6.5vw;
  color: #fff;
}
.sfix-message::before,
.sfix-message::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 0;
  content: "";
}
.sfix-message::before {
  top: 7.7vw;
  height: 94.6vw;
  background: url(../preview/message-shape.svg) top / 100% 100% no-repeat;
}
.sfix-message::after {
  top: calc(102.3vw - 1px);
  bottom: 0;
  background: #000;
}
.sfix-message-photo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 52.8vw;
  aspect-ratio: 760 / 706;
  overflow: hidden;
}
.sfix-message-photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}
.sfix-message-head {
  position: absolute;
  top: 31.5vw;
  left: var(--pv-gutter);
  z-index: 1;
  display: grid;
  gap: 24px;
}
.sfix-message-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 24px;
}
.sfix-message-greeting {
  font-size: clamp(22px, 2.22vw, 32px);
  font-weight: 700;
  line-height: 1.8;
}
.sfix-message-text {
  font-size: clamp(15px, 1.39vw, 20px);
  letter-spacing: 0.08em;
  line-height: 2;
}
.sfix-message-sign {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: flex-end;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 2;
}
.sfix-message-title { font-size: clamp(15px, 1.39vw, 20px); }
.sfix-message-name { font-size: clamp(22px, 2.22vw, 32px); }

/* ---------- about: company ---------- */
.sfix-company {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-bottom: 200px;
}
/* The paper-plane mark at 5% behind the table, as drawn (1039 x 1279 at
   the left edge, 174px down). */
.sfix-company-mark {
  position: absolute;
  top: 12vw;
  left: 0;
  z-index: 0;
  width: 72.15vw;
  aspect-ratio: 1039 / 1279;
  background: url(../preview/about-mark.svg) center / 100% 100% no-repeat;
  pointer-events: none;
}
.sfix-company-head {
  position: relative;
  display: grid;
  gap: 24px;
  padding: 0 var(--pv-gutter);
}
.sfix-company-table {
  position: relative;
  display: grid;
  width: min(55.5vw, 799px);
  margin: 7.6vw var(--pv-gutter) 0 auto;
  font-size: clamp(15px, 1.39vw, 20px);
  line-height: 1.8;
}
.sfix-company-row {
  display: flex;
  gap: 31px;
  padding: 14px 0;
  border-bottom: 1px solid #000;
}
.sfix-company-row dt { flex: none; width: 29.8%; font-weight: 700; }
.sfix-company-row dd { flex: 1; min-width: 0; }

.sfix-office {
  position: relative;
  display: flex;
  gap: 3.4vw;
  align-items: flex-end;
  margin: 96px 0 0 10.6vw;
}
.sfix-office-map {
  flex: none;
  width: 49.3vw;
  aspect-ratio: 710 / 399;
  background: #d9d9d9;
}
.sfix-office-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.sfix-office-text {
  display: grid;
  gap: 14px;
  width: 31.1vw;
}
.sfix-office-text h3 { font-size: clamp(16px, 1.39vw, 20px); font-weight: 700; line-height: 1.8; }
.sfix-office-text p { font-size: clamp(13px, 1.11vw, 16px); line-height: 1.8; }

/* Full-bleed team photo, cropped as in the design (144% tall, pulled up). */
.sfix-company-photo {
  position: relative;
  height: 46.25vw;
  margin-top: 14.9vw;
  overflow: hidden;
}
.sfix-company-photo img {
  position: absolute;
  top: -24.32%;
  left: -0.19%;
  width: 100.19%;
  height: 144.15%;
  max-width: none;
  object-fit: cover;
}

/* ---------- narrow layouts ---------- */
@media (max-width: 900px) {
  .sfix-sub-body { padding-bottom: 96px; }
  .sfix-hero { padding-top: 160px; padding-bottom: 64px; gap: 32px; }
  .sfix-hero-lead br { display: none; }
  .sfix-hero-wave { -webkit-mask-image: none; mask-image: none; }
  .sfix-hero-wave-art { top: 2vw; left: -10vw; width: 150vw; }
  .sfix-works { padding-bottom: 128px; }
  .sfix-work-grid-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two columns: grey on the diagonal keeps the checker. */
  .sfix-work-card:nth-child(even) { background: #fff; }
  .sfix-work-card:nth-child(4n + 2),
  .sfix-work-card:nth-child(4n + 3) { background: #f2f2f2; }
  .sfix-case-head { padding-top: 160px; padding-bottom: 40px; }
  .sfix-case-main { padding-bottom: 96px; }
  .sfix-case-kv { margin-bottom: -48px; }
  .sfix-case-inner { gap: 64px; }
  .sfix-case-profile { flex-direction: column; align-items: stretch; }
  .sfix-case-logo { align-self: center; width: 160px; height: 160px; }
  .sfix-case-facts dt { width: 128px; }
  .sfix-case-body .wp-block-columns { flex-direction: column; }

  /* About: the composition folds into a column. */
  .sfix-about-intro { gap: 40px; padding-bottom: 96px; }
  .sfix-about-photo { width: 100%; }
  .sfix-about-lead { margin-left: 0; }
  .sfix-about-lead br { display: none; }
  .sfix-story { padding-bottom: 96px; }
  .sfix-story-list { gap: 96px; margin-top: 64px; }
  .sfix-story-photo {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100%;
  }
  .sfix-story-num {
    position: relative;
    top: auto !important;
    left: auto !important;
    display: block;
    margin: 24px var(--pv-gutter) 0;
    font-size: 40vw;
  }
  .sfix-story-text {
    padding-top: 24px !important;
    margin-inline: var(--pv-gutter) !important;
    max-width: none !important;
  }
  .sfix-story-body br { display: none; }
  .sfix-story-body strong { display: block; }
  .sfix-message { min-height: 0; padding: 0 var(--pv-gutter) 64px; }
  .sfix-message::before { top: 10vw; height: 120vw; }
  .sfix-message::after { top: calc(130vw - 1px); }
  .sfix-message-photo { position: relative; width: 100%; aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--pv-gutter)); width: calc(100% + 2 * var(--pv-gutter)); }
  .sfix-message-photo img { top: 0; height: 100%; }
  .sfix-message-head { position: relative; top: auto; left: auto; margin-top: 40px; }
  .sfix-message-body { margin-top: 40px; }
  .sfix-message-text br { display: none; }
  .sfix-company { padding-bottom: 96px; }
  .sfix-company-table { width: auto; margin: 48px var(--pv-gutter) 0; }
  .sfix-office { flex-direction: column; align-items: stretch; gap: 24px; margin: 64px var(--pv-gutter) 0; }
  .sfix-office-map { width: 100%; }
  .sfix-office-text { width: auto; }
  .sfix-company-photo { height: 60vw; margin-top: 64px; }
}

@media (max-width: 600px) {
  .sfix-work-tabs { gap: 8px 12px; }
  .sfix-work-tabs a { min-width: 0; font-size: 14px; }
  .sfix-work-grid-inner { grid-template-columns: minmax(0, 1fr); }
  .sfix-work-card:nth-child(n) { background: #fff; }
  .sfix-work-card:nth-child(even) { background: #f2f2f2; }
  .sfix-pager { justify-content: center; font-size: 16px; }
  .sfix-pager-pages { gap: 8px; }
  .sfix-pager .page-numbers { width: 44px; height: 44px; }
  .sfix-case-facts > div { flex-direction: column; }
  .sfix-case-facts dt { width: auto; padding-bottom: 0; }
  .sfix-case-block h2 { width: 140px; }
  .sfix-case-inner .pv-button { justify-self: stretch; }
  .sfix-company-row { flex-direction: column; gap: 4px; }
  .sfix-company-row dt { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sfix-hero-wave-art { animation: none; filter: none; }
  .sfix-work-card-media img { transition: none; }
}