/* 字体与标题层级 */
body {
  font-family: var(--site-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}

.section-ribbon h2 {
  font-size: 28px;
}

.services .service-heading h3 {
  font-size: 26px;
  line-height: 1.45;
}

.services .service-gallery-title {
  font-size: 19px;
  line-height: 1.5;
}

.service-en {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #666;
}

/* トップページ：画像、テキスト、操作ボタンを重ねて配置する */
.hero.hero-carousel {
  position: relative;
  display: block;
  width: 100%;
  height: 45vw;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  background: #111;
}

.hero-carousel .hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
}

.hero-carousel .hero-slides {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
}

.hero-carousel .hero-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
}

/* 元画像全体を表示領域に合わせる */
.hero-carousel .hero-slide > img:not(.hero-watermark) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 透かしの文字は元の比率を維持する */
.hero-carousel .hero-slide .hero-watermark {
  position: absolute;
  inset: auto;
  top: 84%;
  right: 15%;
  width: 32%;
  max-width: 640px;
  height: auto;
  transform: translateY(-50%);
  object-fit: contain;
  pointer-events: none;
}

/* 白い文字を読みやすくするためのグラデーション */
.hero-carousel .hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.36) 40%,
    rgba(0, 0, 0, 0.04) 100%
  );
}

/* 画像の上にテキストと操作ボタンを配置する */
.hero-bottom {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);

  display: block;
  width: min(1200px, calc(100% - 40px));
  height: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
}

/* 見出しを画像の左側中央に配置する */
.hero-carousel .hero-copy {
  position: absolute;
  inset: auto;
  top: 50%;
  left: 0;
  transform: translateY(-50%);

  display: block;
  width: min(960px, 100%);
  min-width: 0;
  margin: 0;
  color: #fff;
}

.hero-carousel .hero-copy-en {
  margin: 0 0 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.hero-carousel .hero-copy h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(34px, 3.4vw, 50px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.hero-title-line {
  display: block;
}

.hero-title-part {
  display: inline-block;
  white-space: nowrap;
}

.hero-carousel .hero-copy-line {
  width: 144px;
  height: 3px;
  margin-top: 24px;
}

/* 操作ボタンを画像の右下に配置する */
.hero-bottom .carousel-controls {
  position: absolute;
  right: 0;
  bottom: 24px;
  margin: 0;
}

/* メイン・採用スライダーの操作ボタンを統一する */
.hero-carousel .carousel-controls,
.recruit-gallery .carousel-controls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.38);
  border-radius: 2px;
  color: #fff;
}

.hero-carousel .carousel-controls button,
.recruit-gallery .carousel-controls button {
  width: 42px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  color: #fff;
  font-size: 26px;
  line-height: 1;
}

.hero-carousel .carousel-controls button:hover,
.recruit-gallery .carousel-controls button:hover {
  border-color: var(--solid-red);
  background: #fff;
  color: var(--solid-red);
}

.hero-carousel .carousel-controls .hero-arrow {
  position: static;
}

.hero-carousel .hero-count,
.recruit-gallery .recruit-gallery-count {
  min-width: 44px;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

/* 业务图库：统一宽度和展示区域 */
.services .service-gallery {
  --gallery-ratio: 4 / 3;
  width: 100%;
  max-width: 1100px;
  gap: 24px;
  align-items: start;
}

.services .service-gallery figure {
  margin: 0;
  min-width: 0;
  border: 0;
  background: transparent;
}

.services .service-gallery figure > img:not(.watermark-overlay) {
  width: 100%;
  height: auto;
  aspect-ratio: var(--gallery-ratio);
  object-fit: contain;
  background: #fff;
}

/* 带水印的图片使用相同展示区域 */
.services .service-gallery .protected-photo {
  position: relative;
  width: 100%;
  aspect-ratio: var(--gallery-ratio);
}

.services .service-gallery .protected-photo .base-image {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.services .service-gallery .protected-photo .watermark-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  pointer-events: none;
}

/* 汽车方案、鼠标与草图 */
.services .product-parts-gallery,
.services .product-ideas-gallery,
.services .idea-options-gallery {
  --gallery-ratio: 3 / 2;
}

/* モデリングの作例：表示比率を統一する */
.services .modeling-cad-gallery {
  --gallery-ratio: 16 / 9;
}

/* 产品零件照片 */
.services .product-output-gallery {
  --gallery-ratio: 2 / 1;
}

/* ロゴ画像の表示高さを統一する */
.services .service-gallery.logo-design-gallery figure > img:not(.watermark-overlay) {
  height: 260px;
  aspect-ratio: auto;
}

/* 三种建模来源：预留相同标题高度 */
.services .modeling-source-gallery .service-gallery-title {
  min-height: 3em;
  margin-bottom: 16px;
}

/* 展示会用モック：写真を同じ幅と高さで表示する */
.services .mockup-exhibition-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  gap: 28px 16px;
  align-items: center;
  margin-bottom: 66px;
}

.services .mockup-exhibition-gallery .protected-photo {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1.7 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: #f2f2f2;
}

.services .mockup-exhibition-gallery .protected-photo .base-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
}

.services .mockup-exhibition-gallery .protected-photo .watermark-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* クレイモデル：3枚の写真を等幅で配置する */
.services .service-gallery.clay-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.services .service-gallery.clay-gallery figure {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* 写真を同じ表示比率で揃える */
.services .service-gallery.clay-gallery figure > img:not(.watermark-overlay) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #f2f2f2;
}

.services .clay-gallery figure:last-child {
  grid-column: auto;
  justify-self: stretch;
  width: 100%;
  max-width: none;
}

/* HiAce：提案から完成車両までの流れ */
@font-face {
  font-family: "Solid Barlow Condensed";
  src: url("../fonts/BarlowCondensed-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.services .hiace-flow {
  --hiace-red: #8e2f43;
  --hiace-ink: #202023;
  --hiace-muted: #606065;
  width: 100%;
  max-width: 1200px;
  margin: 28px 0 48px;
  color: var(--hiace-ink);
  font-family: var(--site-font);
}

.services .hiace-flow-header {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 0;
}

.services .hiace-flow-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 9px;
  color: var(--hiace-muted);
  font-family: "Solid Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.services .hiace-flow-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  flex-shrink: 0;
  background: var(--hiace-red);
}

.services .hiace-flow-heading {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--hiace-ink);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.035em;
}

.services .hiace-flow-lead {
  margin: 10px 0 0;
  color: var(--hiace-muted);
  font-size: 14px;
  line-height: 1.7;
}

.services .hiace-flow-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services .hiace-flow-step {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.services .hiace-flow-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 57px;
  margin-bottom: 14px;
}

.services .hiace-flow-number {
  color: var(--hiace-ink);
  font-family: "Solid Barlow Condensed", sans-serif;
  font-size: 57px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}

.services .hiace-flow-en {
  color: var(--hiace-muted);
  font-family: "Solid Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.services .hiace-flow-stage-title {
  display: flex;
  align-items: center;
  height: 48px;
  min-height: 48px;
  margin: 0 0 14px;
  padding: 10px 34px 10px 14px;
  border: 0;
  color: var(--hiace-ink);
  background: linear-gradient(100deg, #eeebed, #f4f3f4);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
  clip-path: polygon(
    0 0, calc(100% - 24px) 0, 100% 50%,
    calc(100% - 24px) 100%, 0 100%
  );
}

.services .hiace-flow-selection-step .hiace-flow-number {
  color: var(--hiace-red);
}

/* 選定和製品化共用强调色 */
.services .hiace-flow-selection-step .hiace-flow-stage-title,
.services .prototype-production-stage .hiace-flow-stage-title {
  color: #fff;
  background: linear-gradient(100deg, #9e3d51, #7c2b3b);
}

.services .hiace-flow .hiace-flow-visual {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #eeeef0;
}

.services .hiace-flow .hiace-flow-ideas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  background: transparent;
}

/* この工程では画像の枠と説明を拡大しない */
.services .hiace-flow .hiace-flow-image,
.services .hiace-flow .hiace-flow-image:hover {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  transform: none;
  filter: none;
  transition: none;
  z-index: auto;
}

.services .hiace-flow .hiace-flow-image > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.services .hiace-flow .hiace-flow-plan-label {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  margin: 0;
  padding: 2px 5px;
  color: #fff;
  background: rgba(22, 22, 25, 0.86);
  font-family: "Solid Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  pointer-events: none;
}

.services .hiace-flow-chosen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow: inset 0 0 0 2px var(--hiace-red);
  pointer-events: none;
}

.services .hiace-flow .hiace-flow-chosen .hiace-flow-plan-label {
  background: var(--hiace-red);
}

.services .hiace-flow-selected-mark {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  color: var(--hiace-red);
  background: rgba(255, 255, 255, 0.96);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  pointer-events: none;
}

.services .hiace-flow-selected-mark::before {
  content: "✓";
}

.services .hiace-flow-selection::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 2px;
  background: var(--hiace-red);
  transform-origin: left;
  pointer-events: none;
}

.services .hiace-flow-caption {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-height: 3.6em;
  margin: 13px 0 0;
  color: var(--hiace-muted);
  font-size: 13px;
  line-height: 1.8;
}

.services .hiace-flow-caption::before {
  content: "";
  flex: 0 0 4px;
  height: 4px;
  margin-top: 10px;
  border-radius: 50%;
  background: #8a878c;
}

.services .hiace-flow-selection-step .hiace-flow-caption {
  color: #74283a;
}

.services .hiace-flow-selection-step .hiace-flow-caption::before {
  background: var(--hiace-red);
}

/* 動きは各要素が画面に入ったときに一度だけ再生する */
.services .hiace-flow-header.is-inview {
  animation: hiace-flow-enter 0.6s cubic-bezier(0.2, 0.65, 0.25, 1) both;
}

.services .hiace-flow-step.is-inview {
  animation: hiace-flow-enter 0.72s cubic-bezier(0.2, 0.65, 0.25, 1) both;
}

.services .hiace-flow-step:nth-child(2).is-inview {
  animation-delay: 0.14s;
}

.services .hiace-flow-step:nth-child(3).is-inview {
  animation-delay: 0.28s;
}

.services .hiace-flow-step.is-inview .hiace-flow-selection::after {
  animation: hiace-flow-line 0.65s 0.4s ease-out both;
}

.services .hiace-flow-step.is-inview .hiace-flow-selected-mark {
  animation: hiace-flow-mark 0.42s 0.25s ease-out both;
}

@keyframes hiace-flow-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hiace-flow-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes hiace-flow-mark {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (any-hover: hover) and (any-pointer: fine) {
  .services .hiace-flow .hiace-flow-image:hover > img {
    transform: scale(1.035);
  }
}

@media (max-width: 760px) {
  .services .hiace-flow-stages {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .services .hiace-flow-meta {
    min-height: 48px;
    margin-bottom: 10px;
  }

  .services .hiace-flow-number {
    font-size: 48px;
  }

  .services .hiace-flow-caption {
    min-height: 0;
    margin-top: 10px;
  }

  .services .hiace-flow-step.is-inview {
    animation-delay: 0s;
  }
}

/* Jimny 两张整体素材 */

/* ジムニー：左右の画像全体の高さを揃える */
.services .proposal-flow.jimny-gallery {
  width: 100%;
  max-width: 1100px;
  grid-template-columns:
    minmax(0, 1.389171fr)
    minmax(0, 1.127897fr);
  gap: 24px;
  align-items: start;
}

.services .proposal-flow.jimny-gallery > div {
  min-width: 0;
}

.services .proposal-flow.jimny-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* 製品化：完成車両と製品の詳細をまとめ、カタログを隣に置く */
.services .prototype-process {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 48px
    minmax(0, 1fr) 48px
    minmax(0, 2fr);
  gap: 16px;
  width: 100%;
  max-width: 1200px;
  margin: 24px 0 40px;
  align-items: start;
}

/* 矢印を前半2枚の画像の中央付近に合わせる */
.services .prototype-process > span.process-arrow {
  align-self: start;
  margin-top: clamp(96px, 9vw, 114px);
}

.services .prototype-process figure,
.services .prototype-output,
.services .prototype-result {
  min-width: 0;
  margin: 0;
}

.services .prototype-process > figure > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.8 / 1;
  object-fit: contain;
}

.services .prototype-process figcaption {
  min-height: 0;
  margin-top: 10px;
  color: #555;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.services .prototype-output-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 16px;
  align-items: start;
}

/* 3段階の見出しを同じ文字サイズと位置に揃える */
.services .prototype-process .prototype-step-title,
.services .prototype-process .prototype-result-heading {
  min-height: 52px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  color: #252329;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

/* ベースに関する説明は補足として表示する */
.services .prototype-process .prototype-title-note {
  display: block;
  margin-top: 4px;
  color: #777;
  font-size: 12px;
  font-weight: 400;
}

/* 左右の余白だけを切り、車両と装着位置の印を大きく見せる */
.services .prototype-product-map > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  object-position: center;
}

.services .prototype-result-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
  margin-top: 16px;
}

.services .prototype-result-images img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.25 / 1;
  object-fit: contain;
}

.services .prototype-process .prototype-product-card figcaption {
  margin-top: 6px;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.services .prototype-process .catalog-reference {
  width: 100%;
}

.services .prototype-process .catalog-reference img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.services .prototype-process .catalog-reference figcaption {
  margin-top: 8px;
  color: #666;
  font-size: 12px;
}

@media (max-width: 1099px) {
  .services .prototype-process {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 縦並びでは矢印の上余白を解除する */
  .services .prototype-process > span.process-arrow {
    align-self: center;
    margin: 0;
  }

  .services .prototype-output-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .services .prototype-process .catalog-reference {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid #e8e8e8;
  }

  .services .prototype-process .catalog-reference img {
    flex: 0 0 76px;
    width: 76px;
  }

  .services .prototype-process .catalog-reference figcaption {
    margin: 0;
    font-size: 14px;
    text-align: left;
  }
}

/* 製品例の見出し */
.product-output-head {
  display: block;
  max-width: 1100px;
  margin-top: 32px;
}

.product-output-head .service-gallery-title {
  margin: 0;
}

.product-output-head .catalog-reference {
  width: 100px;
  margin: 0;
  flex-shrink: 0;
}

.catalog-reference figcaption {
  margin-top: 6px;
  color: #666;
  font-size: 12px;
  text-align: center;
}

.services .product-output-gallery {
  margin-top: 20px;
}

/* 採用・お問い合わせ：画像を背景領域の上下端に揃える */
.recruit-page .recruit-hero,
.contact-page .contact-title-area {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  background: #f7f7f7;
  color: #171717;
}

.recruit-page .recruit-hero-layout,
.contact-page .contact-hero-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 480px;
  gap: 48px;
  height: 320px;
  align-items: stretch;
}

/* 左側のテキストは上下中央に配置する */
.recruit-page .recruit-hero-copy,
.contact-page .contact-copy {
  align-self: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 32px 0;
}

/* 右側の画像はセクションの高さに合わせる */
.recruit-hero-layout .recruit-gallery {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
}

.recruit-gallery-viewport {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
}

.recruit-gallery-track {
  display: flex;
  height: 100%;
  align-items: stretch;
}

.recruit-gallery-slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
}

.recruit-gallery-slide img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

/* 操作ボタンを写真の右下に配置する */
.recruit-gallery-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  margin: 0;
}

.contact-page .contact-visual {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}

.contact-page .contact-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border: 0;
  object-fit: contain;
}

/* 招聘信息恢复完整宽度 */
.recruit-section.recruit-career-section .recruit-container {
  display: block;
}

.recruit-row {
  grid-template-columns: 180px minmax(0, 1fr);
}

.recruit-th,
.recruit-td {
  padding: 20px 24px;
}

/* 企業理念：写真をセクションの上下端に揃える */
.section.philosophy {
  padding: 40px 0 0;
}

.philosophy-inner {
  grid-template-columns:
    180px minmax(0, 1fr) 320px;
  gap: 32px;
  min-height: 400px;
  align-items: stretch;
}

.philosophy-head,
.philosophy-body {
  align-self: center;
  padding: 48px 0;
}

/* 4枚の写真を同じサイズで配置する */
.philosophy-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;

  width: 100%;
  max-width: none;
  height: 400px;
  margin: 0;
}

.philosophy-gallery figure {
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.philosophy-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: fill;
  background: transparent;
}

/* 联系页内容分组 */
.contact-form-heading {
  margin: 0 0 24px;
  font-size: 24px;
  line-height: 1.5;
}

.contact-info-section {
  padding-top: 48px;
}

.contact-form-section {
  padding-top: 32px;
}

/* 中画面以下では、企業理念を縦に配置する */
@media (max-width: 1099px) {
  .philosophy-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
    padding: 32px 0;
  }

  .philosophy-head,
  .philosophy-body {
    padding: 0;
  }

  .philosophy-gallery {
    width: min(320px, 100%);
    height: 400px;
    justify-self: start;
  }
}

/* タブレット以下では、見出しと写真を縦に配置する */
@media (max-width: 900px) {
  .recruit-page .recruit-hero-layout,
  .contact-page .contact-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    height: auto;
    padding: 32px 0;
    align-items: start;
  }

  .recruit-page .recruit-hero-copy,
  .contact-page .contact-copy {
    padding: 0;
  }

  .recruit-hero-layout .recruit-gallery,
  .contact-page .contact-visual {
    width: min(480px, 100%);
    height: auto;
    aspect-ratio: 3 / 2;
    justify-self: start;
  }

  .prototype-process {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .prototype-process .process-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
}

/* 小画面でも、テキストとボタンを画像内に配置する */
@media (max-width: 700px) {
  .hero.hero-carousel {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 9;
  }

  .hero-bottom {
    width: calc(100% - 32px);
    display: block;
  }

  .hero-carousel .hero-copy {
    top: 12%;
    width: 100%;
    transform: none;
  }

  /* 小画面では透かしを見出しと操作ボタンの間に配置する */
  .hero-carousel .hero-slide .hero-watermark {
    top: 68%;
    right: 8%;
    width: 70%;
    max-width: none;
  }

  .hero-carousel .hero-copy-en {
    margin-bottom: 4px;
    font-size: 10px;
  }

  .hero-carousel .hero-copy h1 {
    font-size: clamp(16px, 4.4vw, 22px);
    line-height: 1.45;
  }

  .hero-carousel .hero-copy-line {
    width: 70px;
    margin-top: 8px;
  }

  .hero-bottom .carousel-controls {
    bottom: 14px;
    gap: 6px;
  }

  .hero-carousel .carousel-controls button {
    width: 32px;
    height: 30px;
    font-size: 20px;
  }

  .hero-carousel .hero-count {
    min-width: 40px;
    font-size: 12px;
  }
}

/* 手机 */
@media (max-width: 640px) {
  .services .service-gallery.two,
  .services .service-gallery.three,
  .services .service-gallery.clay-gallery,
  .services .modeling-source-gallery,
  .services .mockup-exhibition-gallery,
  .services .proposal-flow.jimny-gallery {
    grid-template-columns: 1fr;
  }

  /* 小画面でも、写真の表示比率を統一する */
  .services .mockup-exhibition-gallery .protected-photo {
    height: auto;
    aspect-ratio: 1.7 / 1;
  }
  
  .services .service-gallery.clay-gallery figure > img:not(.watermark-overlay) {
    width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: 4 / 3;
    object-fit: contain;
  }

  .services .modeling-source-gallery .service-gallery-title {
    min-height: 0;
  }

  .mockup-arrow {
    transform: rotate(90deg);
  }

  .services .service-gallery.logo-design-gallery figure > img:not(.watermark-overlay) {
    height: 220px;
  }

  .services .service-heading h3 {
    font-size: 22px;
  }

  .services .service-gallery-title {
    font-size: 18px;
  }

  .recruit-row {
    grid-template-columns: 1fr;
  }

  .recruit-th {
    padding: 16px 18px 8px;
  }

  .recruit-td {
    padding: 12px 18px 20px;
  }
}

/* トップの1枚目：他のスライドと同じく全体を表示する */
.hero-carousel .hero-slide.hero-slide-natural > img:not(.hero-watermark) {
  object-fit: contain;
  object-position: center bottom;
}

/* モデリング：画像は等幅、見出しは同じ文字サイズにする */
.services .modeling-source-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.services .modeling-source-gallery .service-gallery-title {
  min-height: 1.6em;
  margin-bottom: 18px;
  padding-left: 10px;
  border-left-width: 2px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: nowrap;
}

/* 狭い画面では縦に並べ、長い見出しの折り返しを許可する */
@media (max-width: 1099px) {
  .services .modeling-source-gallery {
    grid-template-columns: 1fr;
  }

  .services .modeling-source-gallery .service-gallery-title {
    white-space: normal;
  }
}

/* 会社概要：情報の右側に拠点写真を配置する */
.company-location-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  align-items: center;
}

.company-location-layout > .company-table {
  min-width: 0;
}

.company-location-layout .company-row {
  grid-template-columns: 160px minmax(0, 1fr);
}

.company-location-layout .company-th,
.company-location-layout .company-td {
  padding: 20px 0;
}

.company-location-layout .company-td {
  overflow-wrap: anywhere;
}

.company-location-layout .company-location-photo {
  width: 100%;
  max-width: none;
  margin: 0;
}

.company-location-layout .company-location-photo img {
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .company-location-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .company-location-layout .company-location-photo {
    max-width: 360px;
  }
}

@media (max-width: 600px) {
  .company-location-layout .company-row {
    grid-template-columns: 1fr;
  }

  .company-location-layout .company-th {
    padding: 18px 0 6px;
  }

  .company-location-layout .company-td {
    padding: 0 0 18px;
  }
}

.header-contact-bar {
  background: #f7f7f7;
  border-bottom-color: #ededed;
}

.header-inner {
  gap: 32px;
}

/* ロゴとメニューを細い線で区切る */
.header-inner .logo {
  padding-right: 24px;
  border-right: 1px solid #e5e5e5;
}

.global-nav {
  gap: 18px;
}

/* CONTACTを含め、すべての主要メニューを同じ形式にする */
.global-nav a:not(.nav-mobile-contact) {
  display: inline-flex;
  align-items: center;
  position: relative;
  min-height: 36px;
  padding: 8px 4px;
  border-radius: 3px;
  background: transparent;
  color: #252525;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  transition:
    color 0.22s ease,
    background 0.22s ease,
    transform 0.22s ease;
}

/* 下線は中央から広がる */
.global-nav a:not(.nav-mobile-contact)::after {
  content: "";
  position: absolute;
  left: 4px;
  right: auto;
  bottom: 0;
  width: calc(100% - 8px);
  height: 2px;
  background: linear-gradient(90deg, #ed8792, #bc3146, #9f2b41);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.24s ease;
}

.global-nav a:not(.nav-mobile-contact):hover,
.global-nav a:not(.nav-mobile-contact):focus-visible,
.global-nav a.nav-current:not(.nav-mobile-contact) {
  color: #bc3146;
  background: rgba(188, 49, 70, 0.05);
}

.global-nav a:not(.nav-mobile-contact):hover::after,
.global-nav a:not(.nav-mobile-contact):focus-visible::after,
.global-nav a.nav-current:not(.nav-mobile-contact)::after {
  width: calc(100% - 8px);
  transform: scaleX(1);
}

/* マウス操作時だけ、文字をわずかに上へ動かす */
@media (hover: hover) and (pointer: fine) {
  .global-nav a:not(.nav-mobile-contact):hover {
    transform: translateY(-1px);
  }
}

/* 小画面ではロゴ横の区切り線を外す */
@media (max-width: 1024px) {
  .header-inner {
    gap: 12px;
  }

  .header-inner .logo {
    padding-right: 0;
    border-right: 0;
  }
}


/* 2種類の製作工程で同じSVG矢印を使う */
.services .mockup-exhibition-gallery .mockup-arrow,
.services .prototype-process .process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  z-index: 3;
  font-size: 0;
  line-height: 1;
  transform: none;
}

.services .mockup-exhibition-gallery .mockup-arrow img,
.services .prototype-process .process-arrow img {
  display: block;
  width: 44px;
  height: 44px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(159, 43, 65, 0.16));
}

@media (max-width: 1099px) {
  .services .prototype-process .process-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 640px) {
  .services .mockup-exhibition-gallery .mockup-arrow {
    transform: rotate(90deg);
  }
}

/* 製作事例：画像の比率を保ち、見える高さを揃える */
.works .works-slider {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 32px;
}

.works .works-track {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.works .works-track::-webkit-scrollbar {
  display: none;
}

.works .works-slide {
  position: relative;
  flex: 0 0 calc((100% - 24px) / 2);
  min-width: 0;
  height: auto;
  aspect-ratio: 1.8 / 1;
  margin: 0;
  scroll-snap-align: none;
}

.works .works-slide:nth-child(odd) {
  scroll-snap-align: start;
}

.works .works-slide > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.works .works-pagination {
  display: flex;
  gap: 4px;
}

.works .works-controls .works-pagination button {
  width: 30px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
}

.works .works-controls .works-pagination button[aria-current="page"] {
  background: #fff;
  color: #bc3146;
  font-weight: 600;
}

.works .works-controls .works-count {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (max-width: 640px) {
  .works .works-slide {
    flex-basis: 100%;
    scroll-snap-align: start;
  }

  .works .works-controls .works-pagination button {
    width: 24px;
    height: 30px;
    font-size: 12px;
  }
}

/* 製作事例：トップページと操作ボタンの見た目をそろえる */
.works .works-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: 20px 0 0 auto;
  padding: 6px 8px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
}

.works .works-controls button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.works .works-controls button:hover:not(:disabled) {
  border-color: var(--solid-red);
  background: #fff;
  color: var(--solid-red);
}

.works .works-controls button:focus-visible {
  outline: 2px solid var(--solid-red);
  outline-offset: 3px;
}

.works .works-controls button:disabled {
  opacity: 0.3;
  cursor: default;
}

.works .works-count {
  min-width: 44px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}

/* 小画面ではトップページと同じボタンサイズにする */
@media (max-width: 640px) {
  .works .works-controls {
    gap: 6px;
  }

  .works .works-controls button {
    width: 32px;
    height: 30px;
    font-size: 20px;
  }

  .works .works-count {
    min-width: 40px;
    font-size: 12px;
  }
}

/* 法務ページの見出しと導入文を白背景にする */
.legal-page .legal-hero {
  padding: 56px 0 28px;
  background: #fff;
  border-bottom: 0;
}

.legal-page .legal-hero .legal-container {
  width: min(920px, calc(100% - 40px));
}

.legal-page .legal-hero h1 {
  font-size: clamp(26px, 3vw, 36px);
}

.legal-page .legal-content-section {
  padding: 0 0 80px;
  background: #fff;
}

.legal-page .legal-intro {
  margin: 0 0 40px;
  padding: 0;
  background: #fff;
  border: 0;
}

/* 採用情報：2枚の写真を並べて常時表示する */
.recruit-page .recruit-hero-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
}

.recruit-photos {
  display: grid;
  grid-template-columns:
    minmax(0, 1.499455fr)
    minmax(0, 1.493289fr);
  gap: 16px;
  min-width: 0;
  align-self: center;
  align-items: center;
}

.recruit-photos figure {
  margin: 0;
  min-width: 0;
}

.recruit-photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* タブレットでは、見出しの下に写真を配置する */
@media (max-width: 900px) {
  .recruit-page .recruit-hero-layout {
    grid-template-columns: 1fr;
  }

  .recruit-photos {
    width: min(620px, 100%);
  }
}

/* スマートフォンでは2枚を縦に並べる */
@media (max-width: 640px) {
  .recruit-photos {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

/* ヘッダーの背景だけを半透明にする */
.site-header {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.site-header .header-contact-bar {
  background: transparent;
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* ヘッダー下部の赤いラインを太くする */
.header-inner::after {
  height: 4px;
  background: linear-gradient(
    90deg,
    rgba(188, 49, 70, 0),
    #bc3146 50%,
    rgba(188, 49, 70, 0)
  );
  box-shadow: 0 2px 8px rgba(188, 49, 70, 0.16);
}

/* 原画像の比率に合わせて2枚の高さを揃える */
.services .service-gallery.product-ideas-gallery {
  max-width: 960px;
  grid-template-columns:
    minmax(0, 1.488943fr)
    minmax(0, 1.667442fr);
}

.services .product-ideas-gallery .service-gallery-title {
  margin-bottom: 18px;
}

.services .product-ideas-gallery figure > img:not(.watermark-overlay) {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
}

/* 企業ロゴの間隔を狭める */
.services .service-gallery.logo-design-gallery {
  max-width: 680px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.services .service-gallery.logo-design-gallery figure > img:not(.watermark-overlay) {
  height: 220px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: right center;
  background: transparent;
}

.services .service-gallery.logo-design-gallery figure:last-child > img:not(.watermark-overlay) {
  object-position: left center;
}

@media (max-width: 640px) {
  .services .service-gallery.product-ideas-gallery {
    grid-template-columns: 1fr;
  }

  .services .service-gallery.logo-design-gallery figure > img:not(.watermark-overlay) {
    height: clamp(100px, 28vw, 160px);
  }
}

/* 製作事例：指定された画像だけに透かしを重ねる */
.works .works-slide.works-watermarked {
  position: relative;
}

.works .works-slide > img.works-watermark {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;

  pointer-events: none;
  user-select: none;
}

/* 暗い写真では透かしを白くする */
.works .works-slide.works-watermarked-dark > img.works-watermark {
  filter: brightness(0) invert(1);
}

/* お問い合わせ：説明と連絡先を左右にまとめる */
.home-contact {
  position: relative;
  padding: 80px 0;
  background:
    radial-gradient(
      ellipse at 90% 20%,
      rgba(188, 49, 70, 0.16),
      transparent 55%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.018) 0 1px,
      transparent 1px 12px
    ),
    linear-gradient(120deg, #151518, #262126);
  color: #fff;
}

.home-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg, transparent, #bc3146, transparent
  );
}

.home-contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: 64px;
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  align-items: center;
}

.home-contact-label,
.home-contact h2,
.home-contact-description {
  grid-column: 1;
}

.home-contact-label {
  margin: 0 0 12px;
  color: #edbdc6;
  font-size: 14px;
  letter-spacing: 0.18em;
}

.home-contact h2 {
  margin: 0 0 14px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.5;
}

.home-contact-description {
  margin: 0;
  color: #d6d3d5;
  line-height: 1.8;
}

.home-contact-actions {
  grid-column: 2;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0 24px 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.home-contact-tel {
  color: #fff;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.home-contact-tel span {
  margin-right: 12px;
  font-size: 14px;
  font-weight: 400;
}

.home-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 360px;
  min-height: 56px;
  padding: 14px 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(110deg, #bc3146, #922b3c);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.home-contact-button > span {
  transition: transform 0.25s ease;
}

.home-contact-button:hover,
.home-contact-button:focus-visible {
  background: linear-gradient(110deg, #d4485d, #ac3045);
  box-shadow: 0 8px 22px rgba(188, 49, 70, 0.22);
}

.home-contact-button:hover > span {
  transform: translateX(5px);
}

.home-contact-button:focus-visible {
  outline: 2px solid #edbdc6;
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .home-contact {
    padding: 56px 0;
  }

  /* 小画面では企業理念との間隔を控えめにする */
  .home-contact + .section.philosophy {
    padding-top: 24px;
  }
  .home-contact-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .home-contact-label,
  .home-contact h2,
  .home-contact-description,
  .home-contact-actions {
    grid-column: auto;
    grid-row: auto;
  }

  .home-contact-actions {
    margin-top: 8px;
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
}

/* 企業理念の見出しは1行で表示する */
.philosophy-body .philosophy-headline {
  font-size: clamp(18px, 5.5vw, 26px);
  white-space: nowrap;
}

/* 企業理念の段落間に余白を設ける */
.philosophy-body p + p {
  margin-top: 18px;
}

/* 画像と透かしを一緒に、控えめな大きさで浮き上がらせる */
@media (any-hover: hover) and (any-pointer: fine) {
  .services figure:not(.catalog-reference),
  .services .jimny-gallery > div {
    position: relative;
    transform-origin: center;
    transition: transform 0.35s ease, filter 0.35s ease;
  }
  .services figure:not(.catalog-reference):hover,
  .services .jimny-gallery > div:hover,
  .services .hiace-flow .hiace-flow-image:hover {
    z-index: 2;
    transform: translateY(-3px) scale(1.035);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.10));
  }
  .services .hiace-flow .hiace-flow-image,
  .services .hiace-flow .hiace-flow-image:hover {
    transition: transform 0.35s ease, filter 0.35s ease;
  }
  .services .hiace-flow .hiace-flow-image > img,
  .services .hiace-flow .hiace-flow-image:hover > img {
    transform: none;
  }
}

/* データ製作から製品へ：製品とカタログを同じ工程に配置する */
.services .prototype-process.prototype-numbered {
  --hiace-ink: #202023;
  --hiace-muted: #606065;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1.65fr);
  gap: 24px;
  align-items: start;
  margin: 0 0 48px;
}

.services .prototype-numbered .prototype-stage { min-width: 0; }

.services .prototype-numbered .prototype-stage-header {
  display: grid;
  grid-template-rows: 48px;
  gap: 0;
  margin-bottom: 14px;
}

.services .prototype-numbered .prototype-stage-header .hiace-flow-meta,
.services .prototype-numbered .prototype-stage-header .hiace-flow-stage-title { margin: 0; }

.services .prototype-numbered .prototype-stage-note {
  margin: 6px 0 0;
  color: #777;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
}

.services .prototype-numbered .prototype-stage-image > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.8 / 1;
  object-fit: contain;
}

.services .prototype-numbered .prototype-output {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 16px;
  align-items: start;
}

.services .prototype-numbered .prototype-result-images {
  position: static;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.services .prototype-numbered .catalog-reference {
  position: static;
  display: block;
  align-self: start;
  width: 88px;
  margin: 0;
  padding: 0;
  border: 0;
  transform: none;
}

.services .prototype-numbered .catalog-reference > img {
  display: block;
  width: 88px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.services .prototype-numbered .catalog-reference figcaption {
  margin: 8px 0 0;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 760px) {
  .services .prototype-process.prototype-numbered {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .services .prototype-numbered .prototype-stage-header {
    grid-template-rows: 48px;
    gap: 0;
  }
}

@media (max-width: 600px) {
  .services .prototype-numbered .prototype-output { grid-template-columns: 1fr; }
  .services .prototype-numbered .catalog-reference {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 4px;
  }
  .services .prototype-numbered .catalog-reference > img { flex: 0 0 88px; }
  .services .prototype-numbered .catalog-reference figcaption { margin: 0; text-align: left; }
}

/* 同じ階層の作例見出しは、号口アフターパーツの余白を基準に揃える */
.services {
  --service-subtitle-gap: 64px;
}

.services .service-detail .service-gallery-title {
  position: relative;
  min-height: 0;
  margin: 0 0 var(--service-subtitle-gap);
  padding: 0 0 0 17px;
  border-left: 0;
  color: var(--solid-text);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  white-space: normal;
}

/* 红竖条固定为一行文字的高度，不随标题换行变长 */
.services .service-detail .service-gallery-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3px;
  height: 1.5em;
  background: var(--solid-red);
}

/* 号口アフターパーツ製作的标题区域采用相同间距 */
.services .hiace-flow-header {
  margin-bottom: var(--service-subtitle-gap);
  padding-bottom: 0;
  border-bottom: 0;
}

.services .hiace-flow-header .service-gallery-title {
  margin-bottom: 0;
}

/* 建模三列预留两行高度，并把标题底部对齐 */
.services .modeling-source-gallery .service-gallery-title {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 3em;
}

/* 标题后面有说明框时，避免另外叠加顶部间距 */
.services .service-gallery-title + .service-highlight {
  margin-top: 0;
}

/* A・B・C・D の枠を揃え、元画像の比率を保ったまま背景だけを調整する */
.services .hiace-flow .hiace-flow-ideas .hiace-flow-image > img { object-fit: cover; }

/* 資料に掲載されている1/10スケールモックを復元 */
.services .scale-mock-gallery { max-width: 950px; gap: 24px; margin-bottom: 48px; }
.services .scale-mock-gallery .protected-photo { aspect-ratio: 4 / 3; }
.services .scale-mock-gallery .protected-photo .base-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

/* パソコンのアニメーション設定によらず、スクロール時に一度だけ表示する */
.motion-reveal.is-inview {
  animation: hiace-flow-enter 0.65s cubic-bezier(0.2, 0.65, 0.25, 1) both;
}
.services .prototype-stage:nth-child(2).is-inview { animation-delay: 0.14s; }
.services .prototype-stage:nth-child(3).is-inview { animation-delay: 0.28s; }

@media (max-width: 1099px) {
  .services .modeling-source-gallery .service-gallery-title { min-height: 0; }
}

@media (max-width: 640px) {
  .services { --service-subtitle-gap: 40px; }
  .services .service-detail .service-gallery-title { font-size: 18px; }
}

/* 车辆图和四张零件图共用同一宽度 */
.services .prototype-numbered .prototype-result {
  min-width: 0;
  width: 100%;
}

.services .prototype-numbered .prototype-product-map {
  width: 100%;
  margin: 0;
  padding: 0;
}

.services .prototype-numbered .prototype-result-images {
  width: 100%;
  margin: 16px 0 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.services .prototype-numbered .prototype-product-card {
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* 需要对齐的图片：悬停保留上浮，不再放大整个外框 */
@media (any-hover: hover) and (any-pointer: fine) {
  .services .service-gallery.clay-gallery figure:hover,
  .services .mockup-exhibition-gallery .protected-photo:hover,
  .services .prototype-numbered .prototype-product-map:hover,
  .services .prototype-numbered .prototype-product-card:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.10));
  }
}

/* 电脑端：建模标题保持一行，第三列留出足够宽度 */
@media (min-width: 1100px) {
  .services .modeling-source-gallery {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(390px, 1fr);
  }

  .services .modeling-source-gallery .service-gallery-title {
    min-height: 1.5em;
    white-space: nowrap;
  }
}

/* 整车图和零件图共用相同宽度 */
.services .prototype-numbered .prototype-result {
  min-width: 0;
  width: 100%;
}

.services .prototype-numbered .prototype-product-map {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 四张零件图组成等宽的两列网格 */
.services .prototype-numbered .prototype-result-images {
  position: static;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
  margin: 16px 0 0;
  padding: 0;
}

.services .prototype-numbered .prototype-product-card {
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 仅这四张零件图允许适当拉伸，铺满统一尺寸 */
.services .prototype-numbered .prototype-product-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.25 / 1;
  object-fit: fill;
}

/* 服务案例、製作事例和首页轮播保留悬停放大 */
@media (any-hover: hover) and (any-pointer: fine) {

  .services figure,
  .services .hiace-flow .hiace-flow-image,
  .services .jimny-gallery > div,
  .works .works-slide {
    position: relative;
    transform-origin: center;
    transition:
      transform 0.35s ease,
      filter 0.35s ease;
  }

  .services .service-gallery figure:hover,
  .services .service-gallery.clay-gallery figure:hover,
  .services .mockup-exhibition-gallery .protected-photo:hover,
  .services .hiace-flow .hiace-flow-image:hover,
  .services .prototype-numbered figure:hover,
  .services .prototype-numbered .prototype-product-map:hover,
  .services .prototype-numbered .prototype-product-card:hover,
  .services .jimny-gallery > div:hover,
  .works .works-slide:hover {
    z-index: 2;
    transform: scale(1.035);
    filter: drop-shadow(
      0 6px 12px rgba(0, 0, 0, 0.10)
    );
  }

  /* 避免 HiAce 图片内部重复放大 */
  .services .hiace-flow .hiace-flow-image > img,
  .services .hiace-flow .hiace-flow-image:hover > img {
    transform: none;
  }
}