@charset "UTF-8";


/* =====================================================================
 * Compact ATD LP — PC styles
 * Yanmar Power Technology
 * ===================================================================== */
/* ---------- Tokens ------------------------------------------------- */
:where(.compactatd-main) {

  --board: 1000;
  --max: 1px;

  @media (max-width: 768px) {
    --board: 390;
    --max: 9999px;
  }

  --c-red: #dc1e37;
  --c-text: #222;
  --c-text-sub: #555;
  --c-text-muted: #888;
  --c-bg: #fff;
  --c-bg-soft: #f5f5f5;
  --c-bg-pink: #fce9ec;
  --c-border: #e5e5e5;
  --c-border-soft: #ececec;
  --font-jp: 'Noto Sans JP',
  'Hiragino Kaku Gothic ProN',
  'ヒラギノ角ゴ ProN W3',
  'メイリオ',
  Meiryo,
  sans-serif;
  --font-en: 'Noto Sans',
  'Noto Sans JP',
  sans-serif;
  --max-container: clamp(0px, 10vw / var(--board) * 10 * 1200, var(--max) * 1200);

}

/* ---------- Local reset / base ------------------------------------ */
.compactatd-main,
.compactatd-main *,
.compactatd-main *::before,
.compactatd-main *::after {
  box-sizing: border-box;
}

.compactatd-main {
  background-color: var(--c-bg);
  color: var(--c-text);
  letter-spacing: 0.02em;
  font-weight: 400;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  font-family: var(--font-jp);
  line-height: 1.75;
  font-feature-settings: "palt";
}

.compactatd-main img,
.compactatd-main svg {
  max-width: 100%;
  vertical-align: middle;
}

.compactatd-main img {
  height: auto;
}

.compactatd-main a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.4s;
}

@media (hover: hover) {
  .compactatd-main a:hover {
    opacity: 0.7;
  }
}

.compactatd-main ul,
.compactatd-main ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.compactatd-main :is(h1, h2, h3, h4) {
  margin: 0;
}

.compactatd-main p {
  margin: 0;
}

/* ---------- Utilities --------------------------------------------- */
.u-visually-hidden {
  position: absolute !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  margin: -1px !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* ---------- Common section bits ----------------------------------- */
/* ▼▼▼ [TEMP] section-label もPCのみ固定px（戻す場合は r() に） ▼▼▼ */
.compactatd-main .compactatd-section-label {
  margin-bottom: 16px;
  color: var(--c-red);
  text-align: center;
  letter-spacing: 0.2em;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font-en);
}

/* ▲▲▲ [TEMP] section-label ここまで ▲▲▲ */
.compactatd-main .compactatd-section-title {
  position: relative;
  z-index: 3;
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 48, var(--max) * 48);
  text-align: center;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 38, var(--max) * 38);
  line-height: 1.5;
}

/* ---------- Button ------------------------------------------------ */
/* Figma: corner radius 1 = 5px / body large1 bold = Noto Sans JP 700 18.7px /
 * letterSpacing 0 / action element shadow = 0 1px 2px rgba(0,0,0,.05) /
 * 実測サイズ 約191x55px（テキストに沿う） */
/* ▼▼▼ [TEMP] ボタンもPCのみ固定px（戻す場合は r() に戻す。バックアップ /tmp/_top_before_heropx.scss） ▼▼▼ */
.compactatd-main .compactatd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 18.7px;
  min-width: 192px;
  height: 56px;
  border-radius: 5px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  text-align: center;
  letter-spacing: 0;
  font-weight: 700;
  font-size: 18.7px;
  font-family: var(--font-jp);
  line-height: 1.8;
  transition: opacity 0.4s, transform 0.4s;
}

/* ▲▲▲ [TEMP] ボタン 固定px ここまで ▲▲▲ */
.compactatd-main .compactatd-button--primary {
  background-color: var(--c-red);
  color: #fff;
}

@media (hover: hover) {
  .compactatd-main .compactatd-button--primary:hover {
    opacity: 0.85;
  }
}

/* =====================================================================
 * Hero
 * ===================================================================== */
.compactatd-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(0px, 10vw / var(--board) * 10 * 60, var(--max) * 60) 0 clamp(0px, 10vw / var(--board) * 10 * 120, var(--max) * 120);
}

/* 装飾の球パララックス（ひな形 ルール/パララックス 準拠 / Figma 542-4197「Sphere」）。
 * コンテナは位置・stacking context を作らない素のラッパー。各球は viewport 固定。 */
.compactatd-hero__decoration {
  pointer-events: none;
}

/* 外側ラッパー：位置 + パララックス（JSで translateY） */
.compactatd-sphere-wrap {
  position: fixed;
  z-index: 2;
  /* セクション背景より前・コンテンツ文字に干渉しないよう multiply + 低opacity */
  pointer-events: none;
  will-change: transform;
}

/* 内側：見た目（ピンク球）+ 浮遊アニメ。multiplyで背景に溶け込ませる */
/* 球は書き出し画像（img_sphere_01〜06.png）。Figmaのグラデ/ぼかし/ノイズ/不透明度は画像側に内蔵。
 * 各画像は「円＋影＋フレーム見切れ」を含む合成レンダー（@2x）。ラッパーを画像と同アスペクトで
 * サイズ＆配置し、画像内の円が Figma 座標に一致するよう実測で left/サイズ/doc-top を決定。 */
.compactatd-sphere {
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  /* Figma レイヤーの乗算に準拠（素の球PNGを背景に合成） */
}

/* 浮遊 keyframes（大・中・小で振れ幅を変える）。振幅を強め＋横揺れを加え浮遊感を強調 */
@keyframes compactatd-float-near {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(clamp(var(--max) * -72, 10vw / var(--board) * 10 * -72, 0px));
  }
}

@keyframes compactatd-float-mid {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(clamp(var(--max) * -52, 10vw / var(--board) * 10 * -52, 0px));
  }
}

@keyframes compactatd-float-far {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(clamp(var(--max) * -33, 10vw / var(--board) * 10 * -33, 0px));
  }
}

/* 各球の left/サイズ/不透明度（Figma 542-4197 実測）。
 * 縦位置(top)は data-doc-top を JS が translateY に変換（アンカー付きパララックス）。
 * 大800(speed .7) / 中400(speed .4) / 小120(speed .15)。leftの%はFigma 1440基準。 */
/* left/width/height は書き出し画像（@2x・影込み）の実測から算出。基準フレーム幅1440。
 * 不透明度は画像に内蔵済みのため CSS では指定しない。 */
.compactatd-sphere-wrap {
  /* ローカルナビ(.nav-local-06)削除でコンテンツが上にずれたため、球レイヤー全体を
   * ナビ高さ分だけ一律に上げる（PC=75px / SP=52px）。パララックス(translateY)はそのまま。 */
  top: -75px;
}

/* 右側の球は右端基準（right）で配置し、1440超でも右端から流出させる
 * （right = 1440 − left − width。設計幅1440では従来のleft指定と同位置）。 */
.compactatd-sphere-wrap--01 {
  right: 0;
  width: clamp(0px, 10vw / var(--board) * 10 * 701, var(--max) * 701);
  height: clamp(0px, 10vw / var(--board) * 10 * 849, var(--max) * 849);
}

.compactatd-sphere-wrap--02 {
  left: 0;
  width: clamp(0px, 10vw / var(--board) * 10 * 231, var(--max) * 231);
  height: clamp(0px, 10vw / var(--board) * 10 * 1120, var(--max) * 1120);
}

.compactatd-sphere-wrap--03 {
  left: 0;
  width: clamp(0px, 10vw / var(--board) * 10 * 357, var(--max) * 357);
  height: clamp(0px, 10vw / var(--board) * 10 * 720, var(--max) * 720);
}

.compactatd-sphere-wrap--04 {
  left: clamp(0px, 10vw / var(--board) * 10 * 68, var(--max) * 68);
  width: clamp(0px, 10vw / var(--board) * 10 * 320, var(--max) * 320);
  height: clamp(0px, 10vw / var(--board) * 10 * 440, var(--max) * 440);
}

.compactatd-sphere-wrap--05 {
  right: 0;
  width: clamp(0px, 10vw / var(--board) * 10 * 359, var(--max) * 359);
  height: clamp(0px, 10vw / var(--board) * 10 * 720, var(--max) * 720);
}

.compactatd-sphere-wrap--06 {
  right: clamp(0px, 10vw / var(--board) * 10 * 106, var(--max) * 106);
  width: clamp(0px, 10vw / var(--board) * 10 * 320, var(--max) * 320);
  height: clamp(0px, 10vw / var(--board) * 10 * 440, var(--max) * 440);
}

.compactatd-sphere-wrap--01 .compactatd-sphere {
  animation: compactatd-float-near 7s ease-in-out infinite 0s;
}

.compactatd-sphere-wrap--02 .compactatd-sphere {
  animation: compactatd-float-near 8.5s ease-in-out infinite 2.5s;
}

.compactatd-sphere-wrap--03 .compactatd-sphere {
  animation: compactatd-float-mid 6s ease-in-out infinite 1s;
}

.compactatd-sphere-wrap--05 .compactatd-sphere {
  animation: compactatd-float-mid 7s ease-in-out infinite 3.2s;
}

.compactatd-sphere-wrap--04 .compactatd-sphere {
  animation: compactatd-float-far 5s ease-in-out infinite 0.8s;
}

.compactatd-sphere-wrap--06 .compactatd-sphere {
  animation: compactatd-float-far 6s ease-in-out infinite 2s;
}

/* アニメ無効設定を尊重。「視差効果を減らす」(Reduce Motion) ON 時は
 * パララックス球を非表示にする（JSパララックスも prefers-reduced-motion で停止）。 */
@media (prefers-reduced-motion: reduce) {
  .compactatd-sphere {
    animation: none !important;
  }

  .compactatd-hero__decoration {
    display: none !important;
  }
}

/* ▼▼▼ [TEMP] hero__inner 配下をPCのみ固定pxに（戻す場合はこのブロックを r() に戻す。
 *      バックアップ: /tmp/_top_before_heropx.scss） SPの@media値は不変。 ▼▼▼ */
.compactatd-hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 40px;
  max-width: 1200px;
  text-align: center;
}

.compactatd-hero__image {
  margin-bottom: 24px;
  width: 552px;
}

.compactatd-hero__image img {
  display: block;
  width: 100%;
}

.compactatd-main .compactatd-hero__title {
  /* 特殊フォント DIN Next LT Pro Medium 120px のため画像化（hdg_hero.png） */
  margin-bottom: 24px;
}

.compactatd-hero__title img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 669px;
  height: auto;
}

.compactatd-main .compactatd-hero__subtitle {
  margin-bottom: 16px;
  color: #000;
  letter-spacing: 0;
  font-weight: 700;
  font-size: 32px;
}

.compactatd-main .compactatd-hero__description {
  margin-bottom: 16px;
  color: #000;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
}

.compactatd-main .compactatd-hero__caption {
  margin-bottom: 24px;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0;
  font-size: 12px;
  line-height: 1.7;
}

/* ▲▲▲ [TEMP] hero__inner 配下 固定px ここまで ▲▲▲ */
/* =====================================================================
 * Value
 * ===================================================================== */
.compactatd-value {
  position: relative;
  padding: clamp(0px, 10vw / var(--board) * 10 * 168, var(--max) * 168) 0;
  background-color: #f4f4f4;
}

.compactatd-value__inner {
  margin: 0 auto;
  width: min(clamp(0px, 10vw / var(--board) * 10 * 1200, var(--max) * 1200), 100% - clamp(0px, 10vw / var(--board) * 10 * 80, var(--max) * 80));
}

/* 見出しブロック（このセクション固有の余白・サイズ） */
.compactatd-value .compactatd-section-label {
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  letter-spacing: 2px;
}

.compactatd-value .compactatd-section-title {
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 56, var(--max) * 56);
}

.compactatd-value__list {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: clamp(0px, 10vw / var(--board) * 10 * 25, var(--max) * 25);
}

.compactatd-value__item {
  display: flex;
  align-items: flex-start;
  flex: 1;
  flex-direction: column;
  text-align: left;
}

/* アイコンは白カードのイラストタイル（img_value_01〜03.png / 384x288・角丸は画像に内蔵） */
.compactatd-value__icon {
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  width: 100%;
  aspect-ratio: 384/288;
}

.compactatd-value__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ▼▼▼ [TEMP] value__no もPCのみ固定px（戻す場合は r() に） ▼▼▼ */
.compactatd-main .compactatd-value__no {
  position: relative;
  z-index: 3;
  margin-bottom: 16px;
  color: var(--c-red);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
  font-size: 14px;
  font-family: var(--font-en);
}

/* ▲▲▲ [TEMP] value__no ここまで ▲▲▲ */
/* ▼▼▼ [TEMP] value__title もPCのみ固定px（戻す場合は r() に） ▼▼▼ */
.compactatd-main .compactatd-value__title {
  position: relative;
  z-index: 3;
  margin-bottom: 8px;
  color: #000;
  letter-spacing: 0;
  font-weight: 700;
  font-size: 20px;
}

/* ▲▲▲ [TEMP] value__title ここまで ▲▲▲ */
.compactatd-value__desc {
  position: relative;
  z-index: 3;
  color: #000;
  letter-spacing: 0;
  font-weight: 500;
  font-size: clamp(13px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  /* 13〜16pxの流動（最小13・最大16） */
  line-height: 1.7;
}

/* =====================================================================
 * Technology
 * ===================================================================== */
.compactatd-technology {
  position: relative;
  padding: 0;
  background-color: #f4f4f4;
}

/* エンジン画像バンド（Figma 365-2130: 全幅1440x685 / グラデ #f4f4f4→#d4d4d4）
 * エンジンの窓 = left192px / 幅1055px / 高さ685px（=band全高）でクリップ。
 * 窓内で画像を 195.6%×169.62% 拡大し left -46.5% top -35.37% で配置（PC/SP共通の切抜き）。 */
.compactatd-technology__hero {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-block: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
  /* エンジンがバンド上下端に接しないよう上下にグラデ余白 */
  background: linear-gradient(to bottom, #f4f4f4, #d4d4d4);
}

/* エンジン画像は切らずに全体表示。幅90%（左右10%余白）・最大1200px・常に中央 */
.compactatd-technology__hero-window {
  position: relative;
  z-index: 3;
  width: 90%;
  max-width: 1200px;
  margin-inline: auto;
}

.compactatd-technology__hero-window img {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
}

/* 見出し＋スライダー（Figma 365-2115: py168 / 見出し→スライダー gap64） */
.compactatd-technology__inner {
  margin: 0 auto;
  padding: clamp(0px, 10vw / var(--board) * 10 * 168, var(--max) * 168) 0;
  width: min(clamp(0px, 10vw / var(--board) * 10 * 1200, var(--max) * 1200), 100% - clamp(0px, 10vw / var(--board) * 10 * 80, var(--max) * 80));
}

.compactatd-technology .compactatd-section-label {
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  letter-spacing: 2px;
}

.compactatd-technology .compactatd-section-title {
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 56, var(--max) * 56);
}

.compactatd-main .compactatd-technology__desc {
  position: relative;
  z-index: 3;
  margin: 0 0 clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
  color: #000;
  text-align: center;
  letter-spacing: 0;
  font-weight: 500;
  font-size: clamp(14px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
  /* 14〜18pxの流動（最小14・最大18） */
  line-height: 1.7;
}

/* Slider */
.compactatd-tech-slider {
  position: relative;
  z-index: 3;
}

.compactatd-tech-slider__viewport {
  position: relative;
  z-index: 3;
  overflow: hidden;
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
}

.compactatd-tech-slider__track {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease;
}

/* カード（Figma: bg rgba(238,199,200,.5) / 高さ596 / padding64 / 角丸20 / gap40） */
.compactatd-tech-card {
  display: flex;
  align-items: stretch;
  flex: 0 0 100%;
  gap: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
  padding: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  background-color: rgba(238, 199, 200, 0.5);
}

.compactatd-tech-card__body {
  display: flex;
  align-items: flex-start;
  flex: 0 0 clamp(0px, 10vw / var(--board) * 10 * 407, var(--max) * 407);
  flex-direction: column;
  justify-content: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
  padding: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40) 0;
  width: clamp(0px, 10vw / var(--board) * 10 * 407, var(--max) * 407);
}

.compactatd-tech-card__head {
  display: flex;
  flex-direction: column;
  gap: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
}

.compactatd-tech-card__no {
  color: var(--c-red);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
  font-size: clamp(12px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  /* 12〜14pxの流動 */
  font-family: var(--font-en);
}

.compactatd-main .compactatd-tech-card__title {
  color: #000;
  letter-spacing: 0;
  font-weight: 700;
  font-size: clamp(28px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
  /* 28〜40pxの流動 */
}

/* 登録商標 ® は本文より小さく（Figma: 40px に対し 25.8px = .645em） */
.compactatd-tech-card__reg {
  font-size: 0.645em;
}

/* タイトル直下の登録商標注釈（小さめ・タイトルに詰める。__head の gap:16 を一部相殺） */
.compactatd-main .compactatd-tech-card__note {
  margin-top: clamp(var(--max) * -12, 10vw / var(--board) * 10 * -12, 0px);
  color: var(--c-text-muted);
  letter-spacing: 0;
  font-weight: 400;
  font-size: clamp(11px, 10vw / var(--board) * 10 * 13, var(--max) * 13);
  /* 11〜13pxの流動 */
  line-height: 1.6;
}

.compactatd-tech-card__desc {
  color: #000;
  letter-spacing: 0;
  font-weight: 700;
  font-size: clamp(15px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  /* 15〜20pxの流動 */
  line-height: 1.7;
}

/* 製品チップ（96px グリッドボックス + 製品画像 + ラベル） */
.compactatd-tech-card__product {
  display: flex;
  align-items: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
}

/* チップは枠＋グリッド＋製品を含む1枚の画像（Figma node img_product_compactatd / 96x96）。
 * CSSで枠・グリッドは描かない（画像に内蔵） */
.compactatd-tech-card__product-thumb {
  flex-shrink: 0;
  width: clamp(0px, 10vw / var(--board) * 10 * 96, var(--max) * 96);
  height: clamp(0px, 10vw / var(--board) * 10 * 96, var(--max) * 96);
}

.compactatd-tech-card__product-thumb img {
  display: block;
  width: clamp(0px, 10vw / var(--board) * 10 * 96, var(--max) * 96);
  height: clamp(0px, 10vw / var(--board) * 10 * 96, var(--max) * 96);
}

.compactatd-tech-card__product-name {
  color: #000;
  letter-spacing: clamp(0px, 10vw / var(--board) * 10 * 0.84, var(--max) * 0.84);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
}

/* ビジュアル（624x468 を object-fit: cover で表示。画像は別途書き出し差し込み） */
.compactatd-tech-card__visual {
  position: relative;
  overflow: hidden;
  align-self: center;
  /* 高さは縦横比で決める（stretchだと比率が崩れるため） */
  flex: 1;
  aspect-ratio: 624/468;
  /* PCはビジュアルの縦横比を固定（Figma 624×468） */
}

.compactatd-tech-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carousel（Figma 365-2126: gap40 / 矢印（左は無効）+ ドット3） */
.compactatd-tech-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
}

.compactatd-tech-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(0px, 10vw / var(--board) * 10 * 44, var(--max) * 44);
  height: clamp(0px, 10vw / var(--board) * 10 * 44, var(--max) * 44);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 999, var(--max) * 999);
  background-color: rgba(0, 0, 0, 0.1);
  color: #333;
  cursor: pointer;
  transition: opacity 0.3s;
}

.compactatd-tech-slider__arrow svg {
  width: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  height: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
}

.compactatd-tech-slider__arrow.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

@media (hover: hover) {
  .compactatd-tech-slider__arrow:hover {
    opacity: 0.7;
  }

  .compactatd-tech-slider__arrow.is-disabled:hover {
    opacity: 0.3;
  }
}

.compactatd-tech-slider__dots {
  display: flex;
  align-items: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
}

.compactatd-tech-slider__dots button {
  padding: 0;
  width: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  height: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  border: none;
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
  background-color: rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: background-color 0.3s, width 0.3s;
}

.compactatd-tech-slider__dots button.is-active {
  width: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  background-color: var(--c-red);
}

/* =====================================================================
 * Comparison
 * ===================================================================== */
.compactatd-comparison {
  position: relative;
  overflow: hidden;
  padding: clamp(0px, 10vw / var(--board) * 10 * 168, var(--max) * 168) 0;
  background-color: #f4f4f4;
}

/* 背景のエンジン画像（左右に見切れて配置・画像は別途書き出し差し込み） */
.compactatd-comparison__bg {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  inset: 0;
}

.compactatd-comparison__bg-image {
  position: absolute;
  height: auto;
  /* 上下は切らず自然比で表示（横は画面端でsection overflowにより見切れOK） */
}

.compactatd-comparison__bg-image--left {
  /* 下辺をテーブル下辺にそろえる（=セクション下パディング r(168) を bottom に） */
  bottom: clamp(0px, 10vw / var(--board) * 10 * 168, var(--max) * 168);
  /* Figma 626-4269: x=-331 / y=4482.74 / w=626.4（正規画像は h=718.94 / 見え幅295px） */
  left: clamp(var(--max) * -331, 10vw / 1440 * 10 * -331, 0px);
  width: clamp(0px, 10vw / 1440 * 10 * 626, var(--max) * 626);
}

.compactatd-comparison__bg-image--right {
  /* Figma 626-4270: x=1150 / w=619.89（1440フレーム → right -330・見え幅290px）/ 左エンジンより55.74px上 */
  right: clamp(var(--max) * -330, 10vw / 1440 * 10 * -330, 0px);
  bottom: clamp(0px, 10vw / var(--board) * 10 * 168, var(--max) * 168);
  width: clamp(0px, 10vw / 1440 * 10 * 620, var(--max) * 620);
}

/* ▲▲▲ [TEST] comparison__bg 手動clamp(board=1440) ここまで ▲▲▲ */
.compactatd-comparison__inner {
  position: relative;
  z-index: 3;
  margin: 0 auto;
  width: min(clamp(0px, 10vw / var(--board) * 10 * 1200, var(--max) * 1200), 100% - clamp(0px, 10vw / var(--board) * 10 * 80, var(--max) * 80));
}

.compactatd-comparison .compactatd-section-label {
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  letter-spacing: 2px;
}

.compactatd-comparison .compactatd-section-title {
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 56, var(--max) * 56);
}

/* 比較表（792px / 角丸8 / 中央列176px グレー） */
.compactatd-comparison__table-wrap {
  overflow: hidden;
  margin: 0 auto;
  max-width: 100%;
  width: clamp(0px, 10vw / var(--board) * 10 * 792, var(--max) * 792);
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
}

.compactatd-comparison__caption {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  white-space: nowrap;
}

.compactatd-comparison__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* ヘッダー（製品画像 + 名称、下罫線2px） */
.compactatd-comparison__table thead th {
  padding: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24) clamp(0px, 10vw / var(--board) * 10 * 32, var(--max) * 32);
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  background-color: #fff;
  vertical-align: middle;
  text-align: center;
}

.compactatd-comparison__table thead th.compactatd-comparison__axis-head {
  width: clamp(0px, 10vw / var(--board) * 10 * 176, var(--max) * 176);
  background-color: rgba(233, 233, 233, 0.5);
  color: rgba(0, 0, 0, 0.5);
  font-weight: 400;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
}

.compactatd-comparison__product-img {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
  height: clamp(0px, 10vw / var(--board) * 10 * 90, var(--max) * 90);
}

.compactatd-comparison__product-img img {
  max-height: clamp(0px, 10vw / var(--board) * 10 * 84, var(--max) * 84);
}

.compactatd-comparison__product-name {
  display: inline-flex;
  align-items: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
  color: #000;
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
}

.compactatd-comparison__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  height: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
  background-color: var(--c-red);
  color: #fff;
  letter-spacing: clamp(0px, 10vw / var(--board) * 10 * 0.8, var(--max) * 0.8);
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10);
  font-family: var(--font-en);
  line-height: 1;
}

/* データ行（h72 / 下罫線1px / 中央列グレー） */
.compactatd-comparison__table tbody td,
.compactatd-comparison__table tbody th {
  padding: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24) clamp(0px, 10vw / var(--board) * 10 * 32, var(--max) * 32);
  height: clamp(0px, 10vw / var(--board) * 10 * 72, var(--max) * 72);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
  color: #000;
  vertical-align: middle;
  text-align: center;
  font-weight: 400;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
}

.compactatd-comparison__table tbody th {
  width: clamp(0px, 10vw / var(--board) * 10 * 176, var(--max) * 176);
  background-color: rgba(233, 233, 233, 0.5);
  color: rgba(0, 0, 0, 0.5);
}

.compactatd-comparison__table tbody tr:last-child td,
.compactatd-comparison__table tbody tr:last-child th {
  border-bottom: 0;
}

/* =====================================================================
 * Applications
 * ===================================================================== */
.compactatd-applications {
  position: relative;
  overflow: hidden;
  padding: clamp(0px, 10vw / var(--board) * 10 * 168, var(--max) * 168) 0;
  background-color: #fff;
  text-align: center;
}

.compactatd-applications__inner {
  margin: 0 auto;
  width: min(clamp(0px, 10vw / var(--board) * 10 * 1200, var(--max) * 1200), 100% - clamp(0px, 10vw / var(--board) * 10 * 80, var(--max) * 80));
}

.compactatd-applications .compactatd-section-label {
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  letter-spacing: 2px;
}

.compactatd-applications .compactatd-section-title {
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 56, var(--max) * 56);
}

.compactatd-main .compactatd-applications__desc {
  margin: 0;
  color: #000;
  text-align: center;
  letter-spacing: 0;
  font-weight: 500;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
  line-height: 1.7;
}

/* イラストは散らし配置（Figma座標を1200コンテナ基準で配置） */
.compactatd-applications__field {
  position: relative;
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 100, var(--max) * 100);
  height: clamp(0px, 10vw / var(--board) * 10 * 460, var(--max) * 460);
}

.compactatd-applications__item {
  position: absolute;
  text-align: center;
}

.compactatd-applications__img {
  display: block;
  width: 100%;
  height: auto;
}

.compactatd-applications__label {
  position: relative;
  display: block;
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  background: linear-gradient(to bottom, #76101e 0%, #dc1e37 49.5%, #76101e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0;
  font-weight: 400;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  font-family: var(--font-en);
  line-height: 1.7;
  opacity: 0.6;
  -webkit-text-fill-color: transparent;
}

.compactatd-applications__item--tractor {
  top: clamp(0px, 10vw / var(--board) * 10 * 79, var(--max) * 79);
  left: 3.3%;
  width: clamp(0px, 10vw / var(--board) * 10 * 170, var(--max) * 170);
}

.compactatd-applications__item--excavator {
  top: 0;
  left: 32.6%;
  width: clamp(0px, 10vw / var(--board) * 10 * 188, var(--max) * 188);
}

.compactatd-applications__item--dumper {
  top: clamp(0px, 10vw / var(--board) * 10 * 110, var(--max) * 110);
  left: 60.8%;
  width: clamp(0px, 10vw / var(--board) * 10 * 183, var(--max) * 183);
}

.compactatd-applications__item--awp {
  top: clamp(0px, 10vw / var(--board) * 10 * 56, var(--max) * 56);
  left: 87.1%;
  width: clamp(0px, 10vw / var(--board) * 10 * 104, var(--max) * 104);
}

.compactatd-applications__item--telehandler {
  top: clamp(0px, 10vw / var(--board) * 10 * 209, var(--max) * 209);
  left: 20.6%;
  width: clamp(0px, 10vw / var(--board) * 10 * 187, var(--max) * 187);
}

.compactatd-applications__item--loader {
  top: clamp(0px, 10vw / var(--board) * 10 * 296, var(--max) * 296);
  left: 49.4%;
  width: clamp(0px, 10vw / var(--board) * 10 * 206, var(--max) * 206);
}

/* ラベルはFigma実測の水平オフセット（各イラスト中央からのズレ）。
 * Figma 626-3991（ラベル群）と 626-3887（イラスト群）の実測差。SPでは left:0 にリセット。 */
.compactatd-applications__item--tractor .compactatd-applications__label {
  left: clamp(var(--max) * -74, 10vw / var(--board) * 10 * -74, 0px);
}

.compactatd-applications__item--excavator .compactatd-applications__label {
  left: clamp(var(--max) * -120, 10vw / var(--board) * 10 * -120, 0px);
}

.compactatd-applications__item--dumper .compactatd-applications__label {
  left: clamp(0px, 10vw / var(--board) * 10 * 57, var(--max) * 57);
}

.compactatd-applications__item--awp .compactatd-applications__label {
  left: clamp(0px, 10vw / var(--board) * 10 * 43, var(--max) * 43);
}

.compactatd-applications__item--telehandler .compactatd-applications__label {
  left: clamp(var(--max) * -78, 10vw / var(--board) * 10 * -78, 0px);
}

.compactatd-applications__item--loader .compactatd-applications__label {
  left: clamp(var(--max) * -88, 10vw / var(--board) * 10 * -88, 0px);
}

/* =====================================================================
 * Heritage
 * ===================================================================== */
.compactatd-heritage {
  position: relative;
  overflow: hidden;
  padding: clamp(0px, 10vw / var(--board) * 10 * 168, var(--max) * 168) 0;
  /* 本番環境でのフッターとの間隔調整用マイナスマージン（固定px・PC/SPで出し分け） */
  margin-bottom: -91px;
}

/* 建物背景 + 白75%オーバーレイ（画像は別途書き出し差し込み） */
.compactatd-heritage__bg {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 0;
}

.compactatd-heritage__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

.compactatd-heritage__inner {
  position: relative;
  z-index: 3;
  margin: 0 auto;
  width: min(clamp(0px, 10vw / var(--board) * 10 * 1200, var(--max) * 1200), 100% - clamp(0px, 10vw / var(--board) * 10 * 80, var(--max) * 80));
}

.compactatd-heritage .compactatd-section-label {
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  letter-spacing: 2px;
}

.compactatd-heritage .compactatd-section-title {
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 56, var(--max) * 56);
}

/* 左：1933/2026の2カード（gap24） ／ 右：本文（gap126） */
.compactatd-heritage__columns {
  display: flex;
  align-items: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 126, var(--max) * 126);
}

.compactatd-heritage__history {
  display: flex;
  flex-shrink: 0;
  gap: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
}

.compactatd-heritage__history-item {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  width: clamp(0px, 10vw / var(--board) * 10 * 282, var(--max) * 282);
}

/* 特殊フォント DIN Next LT Pro のため画像化（hdg_year_1933 / hdg_year_2026.png） */
.compactatd-heritage__year {
  line-height: 0;
}

.compactatd-heritage__year img {
  display: block;
  width: auto;
  height: clamp(0px, 10vw / var(--board) * 10 * 32, var(--max) * 32);
}

/* 「Coming soon」は横長。高さ基準で比例表示（グローバル img{max-width:100%} の横潰れ回避）。 */
.compactatd-heritage__year img[alt="Coming soon"] {
  max-width: none;
  width: auto;
  height: clamp(0px, 10vw / var(--board) * 10 * 32, var(--max) * 32);
}

.compactatd-heritage__history-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10);
  width: 100%;
  height: clamp(0px, 10vw / var(--board) * 10 * 212, var(--max) * 212);
}

.compactatd-heritage__history-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.compactatd-main .compactatd-heritage__history-title {
  color: #000;
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
}

.compactatd-heritage__history-desc {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  line-height: 1.7;
}

.compactatd-heritage__text {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: clamp(0px, 10vw / var(--board) * 10 * 34, var(--max) * 34);
  width: clamp(0px, 10vw / var(--board) * 10 * 486, var(--max) * 486);
  color: #000;
  font-weight: 500;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  line-height: 1.7;
}

/* 比較表（SP表示用ブロック）はPCで非表示。SPで表示に切替 */
.compactatd-comparison__sp {
  display: none;
}

/* SP専用の改行。PCでは display:none で無効化（PCの改行位置に影響を与えない） */
.compactatd-main .u-br-sp {
  display: none;
}

/* PC専用の改行。SPでは display:none で無効化（SPはデザイン通り自然折返し） */
.compactatd-main .u-br-pc {
  display: inline;
}

/* =====================================================================
 * SP (max-width: 768px)
 * Figma SPカンプ基準: アートボード幅 390px / 左右余白 24px（コンテンツ342px）。
 * 数値は 390px 時の実寸 px。calc(px / 3.9 * 1vw)（= px/390*100vw）で
 * 390px 幅にぴったり一致し、画面幅に比例して流動する。
 * ===================================================================== */
@media (max-width: 768px) {
  .compactatd-main {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  }

  /* SP専用改行を有効化 */
  .compactatd-main .u-br-sp {
    display: inline;
  }

  /* PC専用改行をSPで無効化（自然折返し） */
  .compactatd-main .u-br-pc {
    display: none;
  }

  /* ---- 共通: コンテナ（左右24px余白） ---- */
  .compactatd-value__inner,
  .compactatd-technology__inner,
  .compactatd-comparison__inner,
  .compactatd-applications__inner,
  .compactatd-heritage__inner {
    margin: 0;
    width: auto;
    padding-inline: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  /* Heritage のみ左右paddingを少しだけ狭く */
  .compactatd-heritage__inner {
    padding-inline: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  }

  /* ---- 共通: セクション上下余白 ---- */
  .compactatd-value,
  .compactatd-comparison,
  .compactatd-applications,
  .compactatd-heritage {
    padding-block: clamp(0px, 10vw / var(--board) * 10 * 88, var(--max) * 88);
    /* 本番環境での調整用マイナスマージン（SP・固定px） */
    margin-bottom: -78px;
  }

  /* ---- 共通: 見出しブロック ---- */
  .compactatd-main .compactatd-section-label,
  .compactatd-value .compactatd-section-label,
  .compactatd-technology .compactatd-section-label,
  .compactatd-comparison .compactatd-section-label,
  .compactatd-applications .compactatd-section-label,
  .compactatd-heritage .compactatd-section-label {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
    letter-spacing: clamp(0px, 10vw / var(--board) * 10 * 2, var(--max) * 2);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  }

  .compactatd-main .compactatd-section-title,
  .compactatd-value .compactatd-section-title,
  .compactatd-technology .compactatd-section-title,
  .compactatd-comparison .compactatd-section-title,
  .compactatd-applications .compactatd-section-title,
  .compactatd-heritage .compactatd-section-title {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
    letter-spacing: 0;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 26, var(--max) * 26);
    line-height: 1.5;
  }

  /* ---- 共通: ボタン ---- */
  .compactatd-main .compactatd-button {
    gap: clamp(0px, 10vw / var(--board) * 10 * 7, var(--max) * 7);
    padding: 0 clamp(0px, 10vw / var(--board) * 10 * 18.7, var(--max) * 18.7);
    min-width: clamp(0px, 10vw / var(--board) * 10 * 192, var(--max) * 192);
    height: clamp(0px, 10vw / var(--board) * 10 * 56, var(--max) * 56);
    border-radius: clamp(0px, 10vw / var(--board) * 10 * 5, var(--max) * 5);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 18.7, var(--max) * 18.7);
  }

  /* =================================================================
   * Hero (SP)
   * ================================================================= */
  .compactatd-hero {
    padding: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40) 0 clamp(0px, 10vw / var(--board) * 10 * 80, var(--max) * 80);
  }

  .compactatd-hero__inner {
    padding: 0 clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  }

  .compactatd-hero__image {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
    width: clamp(0px, 10vw / var(--board) * 10 * 310, var(--max) * 310);
  }

  .compactatd-main .compactatd-hero__title {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .compactatd-hero__title img {
    width: clamp(0px, 10vw / var(--board) * 10 * 357, var(--max) * 357);
  }

  .compactatd-main .compactatd-hero__subtitle {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 32, var(--max) * 32);
    line-height: 1.45;
  }

  .compactatd-main .compactatd-hero__description {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
    line-height: 1.7;
  }

  .compactatd-main .compactatd-hero__caption {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  }

  /* 装飾円（aria-hidden・概略配置） */
  .compactatd-hero__circle--01 {
    top: clamp(var(--max) * -60, 10vw / var(--board) * 10 * -60, 0px);
    left: clamp(var(--max) * -90, 10vw / var(--board) * 10 * -90, 0px);
    width: clamp(0px, 10vw / var(--board) * 10 * 220, var(--max) * 220);
    height: clamp(0px, 10vw / var(--board) * 10 * 220, var(--max) * 220);
  }

  .compactatd-hero__circle--02 {
    top: clamp(0px, 10vw / var(--board) * 10 * 360, var(--max) * 360);
    left: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10);
    width: clamp(0px, 10vw / var(--board) * 10 * 120, var(--max) * 120);
    height: clamp(0px, 10vw / var(--board) * 10 * 120, var(--max) * 120);
  }

  .compactatd-hero__circle--03 {
    top: clamp(var(--max) * -40, 10vw / var(--board) * 10 * -40, 0px);
    right: clamp(var(--max) * -110, 10vw / var(--board) * 10 * -110, 0px);
    width: clamp(0px, 10vw / var(--board) * 10 * 300, var(--max) * 300);
    height: clamp(0px, 10vw / var(--board) * 10 * 300, var(--max) * 300);
  }

  .compactatd-hero__circle--04 {
    right: clamp(0px, 10vw / var(--board) * 10 * 30, var(--max) * 30);
    bottom: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
    width: clamp(0px, 10vw / var(--board) * 10 * 110, var(--max) * 110);
    height: clamp(0px, 10vw / var(--board) * 10 * 110, var(--max) * 110);
  }

  /* =================================================================
   * 装飾球パララックス（SP）
   * Figma SP artboard 514-4132 の実測（390基準）。横位置=left / 大きさ=width を
   * vw で指定し、画像はネイティブ比維持（height:auto）。縦位置は JS が
   * data-doc-top-sp（390基準のドキュメントY）を innerWidth/390 でスケールして算出。
   * 球→SPインスタンス対応: 01=Group157(大上) / 03=Group160 / 04=Group163(小) /
   * 05=Group161 / 06=Group164(小) / 02=Group162(下大)。
   * ================================================================= */
  .compactatd-sphere-wrap {
    height: auto;
    /* SPのローカルナビ高さ分（52px）上げる */
    top: -52px;
  }

  .compactatd-sphere {
    height: auto;
  }

  .compactatd-sphere-wrap--01 {
    right: auto;
    /* PCの右端基準を解除しSPはleft基準に戻す */
    left: clamp(0px, 10vw / var(--board) * 10 * 132.25, var(--max) * 132.25);
    width: clamp(0px, 10vw / var(--board) * 10 * 466.5, var(--max) * 466.5);
  }

  .compactatd-sphere-wrap--02 {
    left: clamp(var(--max) * -79, 10vw / var(--board) * 10 * -79, 0px);
    width: clamp(0px, 10vw / var(--board) * 10 * 207, var(--max) * 207);
  }

  .compactatd-sphere-wrap--03 {
    left: clamp(var(--max) * -110, 10vw / var(--board) * 10 * -110, 0px);
    /* もう少し左へ（指定） */
    width: clamp(0px, 10vw / var(--board) * 10 * 244.5, var(--max) * 244.5);
  }

  .compactatd-sphere-wrap--04 {
    left: clamp(var(--max) * -50, 10vw / var(--board) * 10 * -50, 0px);
    /* 拡大に合わせて左へ寄せる（さらに左・指定） */
    width: clamp(0px, 10vw / var(--board) * 10 * 180, var(--max) * 180);
    /* 60 → 120 → さらに1.5倍の180（指定） */
  }

  .compactatd-sphere-wrap--05 {
    right: auto;
    /* PCの右端基準を解除 */
    left: clamp(0px, 10vw / var(--board) * 10 * 286.5, var(--max) * 286.5);
    width: clamp(0px, 10vw / var(--board) * 10 * 207, var(--max) * 207);
  }

  .compactatd-sphere-wrap--06 {
    right: auto;
    /* PCの右端基準を解除 */
    left: clamp(0px, 10vw / var(--board) * 10 * 242, var(--max) * 242);
    width: clamp(0px, 10vw / var(--board) * 10 * 180, var(--max) * 180);
    /* 04と同じ大きさ（指定） */
  }

  /* =================================================================
   * Value (SP) — 3カードを縦積み
   * ================================================================= */
  .compactatd-value {
    padding-block: clamp(0px, 10vw / var(--board) * 10 * 128, var(--max) * 128);
  }

  /* このセクションの見出しは36px / 黒（共通26px・トークン色#222を上書き） */
  .compactatd-value .compactatd-section-title {
    color: #000;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 36, var(--max) * 36);
    line-height: 1.45;
  }

  .compactatd-value__list {
    align-items: stretch;
    flex-direction: column;
    gap: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
  }

  .compactatd-value__item {
    width: 100%;
  }

  .compactatd-value__icon {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .compactatd-main .compactatd-value__no {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
    letter-spacing: clamp(0px, 10vw / var(--board) * 10 * 2, var(--max) * 2);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  }

  .compactatd-main .compactatd-value__title {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  }

  .compactatd-value__desc {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    line-height: 1.7;
    /* デザイン（全角メトリクス）に合わせ palt を無効化＝自然折返し位置を一致させる */
    font-feature-settings: normal;
  }

  /* =================================================================
   * Technology (SP) — バンド全幅 / カードを縦組み（ビジュアル上）
   * ================================================================= */
  /* SPはFigma 626-4747 準拠。Figmaは未トリミング画像（透明余白入り）を390×253に配置しており、
   * その透明余白ぶんエンジンの左右・下に余白が出る。トリミング済み画像で同じ余白感を再現するため
   * バンドにpaddingを付与（390換算: 上6 / 右12 / 下16 / 左17・エンジン361×230） */
  .compactatd-technology__hero {
    padding: clamp(0px, 10vw / var(--board) * 10 * 6, var(--max) * 6) clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12) clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16) clamp(0px, 10vw / var(--board) * 10 * 17, var(--max) * 17);
  }

  .compactatd-technology__hero-window {
    width: 100%;
    max-width: 100%;
  }

  .compactatd-technology__inner {
    padding-block: clamp(0px, 10vw / var(--board) * 10 * 128, var(--max) * 128);
  }

  /* このセクションの見出しは36px / 黒（共通26px・トークン色#222を上書き） */
  .compactatd-technology .compactatd-section-title {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
    color: #000;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 36, var(--max) * 36);
    line-height: 1.45;
  }

  .compactatd-main .compactatd-technology__desc {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
    line-height: 1.7;
  }

  .compactatd-tech-card {
    flex-direction: column;
    gap: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
    padding: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40) clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
    min-height: 0;
    height: auto;
    /* PCの固定596pxを解除（SPは縦積みで内容依存） */
    border-radius: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  }

  .compactatd-tech-card__visual {
    align-self: stretch;
    flex: none;
    order: -1;
    width: 100%;
    aspect-ratio: 294/221;
  }

  .compactatd-tech-card__body {
    flex: none;
    justify-content: flex-start;
    gap: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
    padding: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16) 0 0;
    width: 100%;
  }

  .compactatd-tech-card__head {
    gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  }

  .compactatd-tech-card__no {
    letter-spacing: clamp(0px, 10vw / var(--board) * 10 * 2, var(--max) * 2);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  }

  .compactatd-main .compactatd-tech-card__title {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  /* SP注釈：font-size 12px / margin-top 0（390基準・r()でvw流動） */
  .compactatd-main .compactatd-tech-card__note {
    margin-top: 0;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  }

  .compactatd-tech-card__desc {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
    line-height: 1.7;
    /* デザイン（全角メトリクス）に合わせ palt 無効＝自然折返し位置を一致させる */
    font-feature-settings: normal;
  }

  .compactatd-tech-card__product {
    gap: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  }

  .compactatd-tech-card__product-thumb,
  .compactatd-tech-card__product-thumb img {
    width: clamp(0px, 10vw / var(--board) * 10 * 96, var(--max) * 96);
    height: clamp(0px, 10vw / var(--board) * 10 * 96, var(--max) * 96);
  }

  .compactatd-tech-card__product-name {
    letter-spacing: 0.2153846154vw;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  }

  .compactatd-tech-slider__viewport {
    border-radius: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  }

  .compactatd-tech-slider__nav {
    gap: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
    margin-top: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .compactatd-tech-slider__arrow {
    width: clamp(0px, 10vw / var(--board) * 10 * 44, var(--max) * 44);
    height: clamp(0px, 10vw / var(--board) * 10 * 44, var(--max) * 44);
  }

  .compactatd-tech-slider__arrow svg {
    width: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
    height: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .compactatd-tech-slider__dots {
    gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  }

  .compactatd-tech-slider__dots button {
    width: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
    height: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
    border-radius: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
  }

  .compactatd-tech-slider__dots button.is-active {
    width: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  /* =================================================================
   * Comparison (SP) — PC 3列表を隠し、製品別2列表を縦に2段
   * ================================================================= */
  .compactatd-comparison {
    padding-block: clamp(0px, 10vw / var(--board) * 10 * 128, var(--max) * 128);
  }

  /* このセクションの見出しは36px / 黒（共通26px・トークン色#222を上書き） */
  .compactatd-comparison .compactatd-section-title {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
    color: #000;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 36, var(--max) * 36);
    line-height: 1.45;
  }

  .compactatd-comparison__bg {
    display: none;
  }

  .compactatd-comparison__table-wrap {
    display: none;
  }

  .compactatd-comparison__sp {
    display: block;
  }

  .compactatd-comparison__sp-block+.compactatd-comparison__sp-block {
    margin-top: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
  }

  /* 製品画像は実画像の自然高さ（Compact 393 / Separable 425）。下160px重ねで表上端へ寄せ、
   * 表を前面（z-index上）にして画像下部が表の背面に潜る（Figmaの重なり順＝後続の表が前面）。
   * ヘッダー行は表側なので隠れない。 */
  .compactatd-comparison__sp-image {
    position: relative;
    z-index: 0;
    margin-bottom: clamp(var(--max) * -160, 10vw / var(--board) * 10 * -160, 0px);
    width: 100%;
  }

  .compactatd-comparison__sp-image img {
    display: block;
    width: 100%;
    height: auto;
  }

  .compactatd-comparison__sp-table {
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    border-collapse: collapse;
    border-radius: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
    table-layout: fixed;
  }

  .compactatd-comparison__sp-table thead th {
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    background-color: #fff;
    vertical-align: middle;
    text-align: center;
  }

  /* thead th{background:#fff}（0,1,2）に勝つため sp-table を前置（0,2,0） */
  .compactatd-comparison__sp-table .compactatd-comparison__sp-axis-head {
    width: clamp(0px, 10vw / var(--board) * 10 * 104, var(--max) * 104);
    background-color: #e9e9e9;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 400;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  }

  .compactatd-comparison__sp-product-head {
    padding: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  }

  .compactatd-comparison__sp-product-img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
    height: clamp(0px, 10vw / var(--board) * 10 * 90, var(--max) * 90);
  }

  .compactatd-comparison__sp-product-img img {
    max-height: clamp(0px, 10vw / var(--board) * 10 * 68, var(--max) * 68);
    width: auto;
  }

  .compactatd-comparison__sp-product-name {
    display: inline-flex;
    align-items: center;
    gap: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
    color: #000;
    font-weight: 700;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
  }

  .compactatd-comparison__sp-table tbody th,
  .compactatd-comparison__sp-table tbody td {
    padding: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12) clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    height: clamp(0px, 10vw / var(--board) * 10 * 72, var(--max) * 72);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #fff;
    color: #000;
    vertical-align: middle;
    text-align: center;
    font-weight: 400;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  }

  .compactatd-comparison__sp-table tbody th {
    width: clamp(0px, 10vw / var(--board) * 10 * 104, var(--max) * 104);
    background-color: #e9e9e9;
    color: rgba(0, 0, 0, 0.5);
    padding-inline: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  }

  .compactatd-comparison__sp-table tbody tr:last-child th,
  .compactatd-comparison__sp-table tbody tr:last-child td {
    border-bottom: 0;
  }

  /* =================================================================
   * Applications (SP) — 散らし配置（SP座標で再配置）
   * ================================================================= */
  .compactatd-applications {
    padding-block: clamp(0px, 10vw / var(--board) * 10 * 128, var(--max) * 128);
  }

  /* このセクションの見出しは36px / 黒（共通26px・トークン色#222を上書き） */
  .compactatd-applications .compactatd-section-title {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
    color: #000;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 36, var(--max) * 36);
    line-height: 1.45;
  }

  .compactatd-main .compactatd-applications__desc {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
    line-height: 1.7;
    font-feature-settings: normal;
  }

  .compactatd-applications__field {
    margin-top: clamp(0px, 10vw / var(--board) * 10 * 60, var(--max) * 60);
    height: clamp(0px, 10vw / var(--board) * 10 * 620, var(--max) * 620);
  }

  .compactatd-applications__item--tractor {
    top: 0;
    left: 0;
    width: clamp(0px, 10vw / var(--board) * 10 * 127, var(--max) * 127);
  }

  .compactatd-applications__item--excavator {
    top: clamp(0px, 10vw / var(--board) * 10 * 15, var(--max) * 15);
    left: 58.2%;
    width: clamp(0px, 10vw / var(--board) * 10 * 144, var(--max) * 144);
  }

  .compactatd-applications__item--telehandler {
    top: clamp(0px, 10vw / var(--board) * 10 * 158, var(--max) * 158);
    left: 7%;
    width: clamp(0px, 10vw / var(--board) * 10 * 140, var(--max) * 140);
  }

  .compactatd-applications__item--dumper {
    top: clamp(0px, 10vw / var(--board) * 10 * 272, var(--max) * 272);
    left: 52.3%;
    width: clamp(0px, 10vw / var(--board) * 10 * 140, var(--max) * 140);
  }

  .compactatd-applications__item--loader {
    top: clamp(0px, 10vw / var(--board) * 10 * 374, var(--max) * 374);
    left: 5.3%;
    width: clamp(0px, 10vw / var(--board) * 10 * 154, var(--max) * 154);
  }

  .compactatd-applications__item--awp {
    top: clamp(0px, 10vw / var(--board) * 10 * 446, var(--max) * 446);
    left: 61.4%;
    width: clamp(0px, 10vw / var(--board) * 10 * 78, var(--max) * 78);
  }

  .compactatd-applications__item .compactatd-applications__label {
    left: 0;
    margin-top: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
    /* SP実測の画像下ギャップ約4px */
    font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  }

  /* SPラベル水平オフセット（Figma SP 626-4493 実測：ラベル中央−イラスト中央）。
   * イラストはセル幅いっぱい＝中央＝画像中央。左寄りはマイナス・右寄りはプラス。 */
  .compactatd-applications__item--tractor .compactatd-applications__label {
    left: clamp(var(--max) * -40, 10vw / var(--board) * 10 * -40, 0px);
  }

  .compactatd-applications__item--excavator .compactatd-applications__label {
    left: clamp(0px, 10vw / var(--board) * 10 * 18.5, var(--max) * 18.5);
  }

  .compactatd-applications__item--dumper .compactatd-applications__label {
    left: clamp(0px, 10vw / var(--board) * 10 * 43.5, var(--max) * 43.5);
  }

  .compactatd-applications__item--telehandler .compactatd-applications__label {
    left: clamp(var(--max) * -31, 10vw / var(--board) * 10 * -31, 0px);
  }

  .compactatd-applications__item--loader .compactatd-applications__label {
    left: clamp(var(--max) * -54, 10vw / var(--board) * 10 * -54, 0px);
  }

  .compactatd-applications__item--awp .compactatd-applications__label {
    left: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  /* =================================================================
   * Heritage (SP) — 見出し→本文→履歴カード / 各カードは年号→[画像左・テキスト右]
   * ================================================================= */
  .compactatd-heritage {
    padding-block: clamp(0px, 10vw / var(--board) * 10 * 128, var(--max) * 128);
  }

  /* このセクションの見出しは36px / 黒（共通26px・トークン色#222を上書き） */
  .compactatd-heritage .compactatd-section-title {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
    color: #000;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 36, var(--max) * 36);
    line-height: 1.45;
  }

  .compactatd-heritage__columns {
    align-items: stretch;
    flex-direction: column;
    gap: clamp(0px, 10vw / var(--board) * 10 * 45, var(--max) * 45);
  }

  .compactatd-heritage__history {
    flex-direction: column;
    flex-shrink: 1;
    gap: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
  }

  .compactatd-heritage__history-item {
    display: grid;
    align-items: start;
    width: 100%;
    column-gap: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    grid-template-columns: clamp(0px, 10vw / var(--board) * 10 * 163, var(--max) * 163) 1fr;
    row-gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  }

  .compactatd-heritage__year {
    grid-column: 1/-1;
  }

  .compactatd-heritage__year img {
    height: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  /* Coming soon はPCで height:32px 指定があるため、SPで他の年号画像とそろえる */
  .compactatd-heritage__year img[alt="Coming soon"] {
    height: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .compactatd-heritage__history-image {
    padding: 0;
    width: 100%;
    height: clamp(0px, 10vw / var(--board) * 10 * 145, var(--max) * 145);
    grid-column: 1;
    grid-row: 2/4;
  }

  .compactatd-main .compactatd-heritage__history-title {
    align-self: end;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
    grid-column: 2;
    grid-row: 2;
  }

  .compactatd-heritage__history-desc {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    line-height: 1.7;
    grid-column: 2;
    grid-row: 3;
  }

  .compactatd-heritage__text {
    gap: clamp(0px, 10vw / var(--board) * 10 * 30, var(--max) * 30);
    order: -1;
    width: 100%;
    text-align: center;
    /* 中央そろえはSPのみ */
    font-size: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
    line-height: 1.7;
    font-feature-settings: normal;
  }
}

/* グローバルフッターを装飾球（fixed・z-index:2）より前面に */
.Footer {
  position: relative;
  z-index: 3;
}

/* =====================================================================
 * Heritage のみ SPビュー切替を 1200px に拡大（他セクションは 768px のまま）。
 * 値は SP方式 calc(px/3.9*1vw) を踏襲（≤768 は既存ブロックと同値で無変化、
 * 769–1200px では画面幅に比例して拡大表示になる）。
 * ===================================================================== */
@media (max-width: 1200px) {
  .compactatd-heritage__inner {
    margin: 0;
    width: auto;
    padding-inline: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  }

  .compactatd-heritage {
    padding-block: clamp(0px, 10vw / var(--board) * 10 * 128, var(--max) * 128);
  }

  .compactatd-heritage .compactatd-section-label {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
    letter-spacing: clamp(0px, 10vw / var(--board) * 10 * 2, var(--max) * 2);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  }

  .compactatd-heritage .compactatd-section-title {
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
    color: #000;
    letter-spacing: 0;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 36, var(--max) * 36);
    line-height: 1.45;
  }

  .compactatd-heritage__columns {
    align-items: stretch;
    flex-direction: column;
    gap: clamp(0px, 10vw / var(--board) * 10 * 45, var(--max) * 45);
  }

  .compactatd-heritage__history {
    align-items: center;
    /* ≤1200ビューで左右中央 */
    flex-direction: column;
    flex-shrink: 1;
    gap: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
  }

  .compactatd-heritage__history-item {
    display: grid;
    align-items: start;
    max-width: clamp(0px, 10vw / var(--board) * 10 * 400, var(--max) * 400);
    /* ≤1200で間延びを防ぎ中央寄せ */
    width: 100%;
    column-gap: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    grid-template-columns: clamp(0px, 10vw / var(--board) * 10 * 163, var(--max) * 163) 1fr;
    row-gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  }

  .compactatd-heritage__year {
    grid-column: 1/-1;
  }

  .compactatd-heritage__year img {
    height: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .compactatd-heritage__year img[alt="Coming soon"] {
    height: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .compactatd-heritage__history-image {
    padding: 0;
    width: 100%;
    height: clamp(0px, 10vw / var(--board) * 10 * 145, var(--max) * 145);
    grid-column: 1;
    grid-row: 2/4;
  }

  .compactatd-main .compactatd-heritage__history-title {
    align-self: end;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
    grid-column: 2;
    grid-row: 2;
  }

  .compactatd-heritage__history-desc {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    line-height: 1.7;
    grid-column: 2;
    grid-row: 3;
  }

  .compactatd-heritage__text {
    gap: clamp(0px, 10vw / var(--board) * 10 * 30, var(--max) * 30);
    order: -1;
    width: 100%;
    text-align: center;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
    line-height: 1.7;
    font-feature-settings: normal;
  }
}

/*# sourceMappingURL=compactatd-style.css.map */