@charset "utf-8";

/* =========================================================================
   プロモブ「プロモブについて」ページ v2（about固有）
   -------------------------------------------------------------------------
   ・promov-lp.css（共通ベース）を読み込んだうえで、このページ固有の意匠だけを持つ。
   ・ルートクラス .promov-abt 配下だけで完結させる。
   ・!important は1箇所も使用しない。
   ・図版は .abt-card / .abt-way / .lp-flow の figure から出す。
   ・親テーマ対策・トークン・汎用コンポーネントは promov-lp.css 側にある。
   ========================================================================= */

/* =========================================================================
   1. ヒーロー
   左に文章、右に「条件 → 事例 → 相談」の体験プレビュー。
   ========================================================================= */

.abt-hero {
  position: relative;
  padding-block: clamp(20px, 2.4vw, 36px) clamp(64px, 7vw, 104px);
  background:
    radial-gradient(120% 90% at 88% 12%, var(--lp-primary-tint) 0%, rgba(253, 241, 238, 0) 58%),
    linear-gradient(180deg, #fffdfc 0%, var(--lp-warm) 100%);
}

.abt-hero__inner {
  display: grid;
  gap: clamp(32px, 3vw, 44px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

.abt-hero__copy {
  min-width: 0;
}

.abt-hero__title {
  color: var(--lp-primary);
  font-size: var(--lp-fs-h1);
  line-height: 1.45;
  letter-spacing: 0.005em;
}

/* 2つの説明文は同じ本文として扱う（サイズ・太さ・色を統一） */
.abt-hero__lead,
.abt-hero__body {
  color: var(--lp-ink);
  font-size: clamp(14.5px, 0.86rem + 0.18vw, 16px);
  font-weight: 600;
}

.abt-hero__lead {
  margin-top: 24px;
}

.abt-hero__body {
  margin-top: 18px;
}

/* 無料であることの注記。白地・薄い枠で、本文と同じ幅の帯として置く */
.abt-freenote {
  margin-top: 26px;
  padding: 14px 20px;
  border: 1px solid var(--lp-line);
  border-left: 3px solid var(--lp-primary);
  border-radius: var(--lp-radius-s);
  background: #fff;
  color: var(--lp-primary);
  font-size: clamp(13.5px, 0.84rem + 0.14vw, 15.5px);
  font-weight: 700;
  line-height: 1.75;
}

.abt-hero__actions {
  margin-top: 30px;
}

/* 3つのCTAを1行に収めるため、ヒーローのボタンだけ左右paddingを詰める。
   高さ・角丸・文字サイズは共通のままなので、他ページのボタンとは揃ったまま。 */
.abt-hero__actions .lp-btn {
  padding-inline: 17px;
}

.abt-hero__visual {
  min-width: 0;
}

/* -------------------------------------------------------------------------
   1.1 3ステップ体験プレビュー
   3枚のカードを矢印でつなぐ。狭い画面は縦積みにして矢印を下向きにする。
   ------------------------------------------------------------------------- */

.abt-preview {
  display: grid;
  /* 矢印の上下余白＝この gap。詰めすぎるとステップ同士がくっつくので8pxに留める */
  gap: 8px;
  align-items: center;
  justify-items: stretch;
  max-width: 560px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
}

.abt-preview__step {
  min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-m);
  background: #fff;
  box-shadow: var(--lp-shadow-soft);
}

.abt-preview__stepTitle {
  color: var(--lp-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.abt-preview__arrow {
  display: block;
  color: var(--lp-primary);
  font-size: 18px;
  line-height: 1;
  text-align: center;
  transform: rotate(90deg); /* 縦積みのときは下向き */
}

/* 条件の一覧。ラベルと値を1行にして、選択済みの絞り込みに見せる */
/* デスクトップは2列×2行。1行目に用途・業種、2行目に表現方法・長さ。
   grid の行はいちばん高い項目に合わせて伸びるので、4項目の高さがそろう。 */
.abt-preview__conds {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.abt-preview__cond {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--lp-line-soft);
  border-radius: var(--lp-radius-s);
  background: var(--lp-warm);
}

.abt-preview__condKey {
  flex: none;
  min-width: 4.5em;
  color: var(--lp-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.abt-preview__condVal {
  min-width: 0;
  color: var(--lp-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.abt-preview__thumb {
  margin-top: 10px;
  border-radius: var(--lp-radius-s);
  overflow: hidden;
}

/* 16:9 より横長に切り出して高さを抑える（1000px以上で実測約200px）。
   主役の人物が上寄りにいるため、object-position を上へずらして顔を切らない。 */
.abt-preview__thumb img {
  width: 100%;
  aspect-ratio: 22 / 10;
  height: auto;
  object-fit: cover;
  object-position: center 32%;
}

.abt-preview__caseName {
  margin-top: 8px;
  color: var(--lp-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

/* 制作事例一覧のタグ（.ppg-pill）と同じトンマナ。
   タグは折り返すだけで、カードの幅も高さも押し広げない。 */
.abt-preview__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.abt-preview__tag {
  padding: 3px 8px;
  border: 1px solid var(--lp-line);
  border-radius: 6px;
  background: #f5f7f8;
  color: #5b6572;
  font-size: 11.5px;
  line-height: 1.6;
  white-space: nowrap;
}

/* 相談先の制作会社。ロゴは横長なので高さで揃える */
.abt-preview__company {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding: 6px 10px;
  border: 1px solid var(--lp-line-soft);
  border-radius: var(--lp-radius-s);
  background: var(--lp-warm);
}

.abt-preview__company img {
  width: auto;
  max-width: 100%;
  height: 18px;
  object-fit: contain;
}

/* ロゴ下は8px、見出しと補足文は4px、補足文とボタンは12px */
.abt-preview__msgTitle {
  margin-top: 8px;
  color: var(--lp-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.abt-preview__msgNote {
  margin-top: 4px;
  color: var(--lp-muted);
  font-size: 12px;
  line-height: 1.6;
}

/* 相談ボタンの見た目だけを再現した要素（リンクではない） */
.abt-preview__action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--lp-primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* =========================================================================
   2. テキストカード（悩み3件・メリット3件で共用）
   カードで囲わず、番号の横罫で区切った3列の台帳にする。
   ========================================================================= */

.abt-cards {
  display: grid;
  gap: 36px 32px;
  grid-template-columns: minmax(0, 1fr);
}

.abt-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 図版つきの台帳（悩み3件のみ）。
   寸法・角丸・object-fit は for-production-companies の .pclp-issue__fig /
   .pclp-issue__img と同じ値を使い、2ページで見え方をそろえる。 */
.abt-card__fig {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-m);
  background: #fff;
}

/* 3枚とも 600×400（3:2）。contain なので切り取りは起きず、
   列幅が同じ3列では表示サイズも完全に一致する。 */
.abt-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  border-radius: var(--lp-radius-s);
  object-fit: contain;
  object-position: center;
}

/* 図版と番号の間隔も参考ページ（.pclp-issue__num の margin-top）と同じ */
.abt-cards--fig .abt-card__num {
  margin-top: 22px;
}

/* 列の並びが変わっても図版が伸び縮みしないようにするための保険 */
.abt-cards--fig > .abt-card > .abt-card__fig {
  flex: none;
}

.abt-card__num {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--lp-primary);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  line-height: 1;
}

.abt-card__num::after {
  flex: 1;
  height: 1px;
  background: var(--lp-line);
  content: "";
}

.abt-card__title {
  margin-top: 14px;
  font-size: var(--lp-fs-h3);
}

.abt-card__text {
  margin-top: 12px;
}

/* =========================================================================
   3. 無料で利用できるサービス
   左に説明、右に「無料で利用できること」のパネル。
   ========================================================================= */

.abt-free {
  display: grid;
  gap: clamp(28px, 3vw, 44px);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

.abt-free__copy {
  min-width: 0;
}

/* サービス画面のスクリーンショット。左カラムの幅に収め、原寸(1200px)を超えて
   引き伸ばさない。枠線・角丸はページ内の他の白いパネルと同じトークンを使う。 */
.abt-free__fig {
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-m);
  background: #fff;
}

.abt-free__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.abt-free__text + .abt-free__text {
  margin-top: 18px;
}

.abt-freepanel {
  min-width: 0;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-l);
  background: #fff;
}

.abt-freepanel__title {
  color: var(--lp-ink);
  font-size: var(--lp-fs-h3);
  font-weight: 700;
  line-height: 1.6;
}

/* パネルの中は幅が狭いので、共通の2カラム化を打ち消して常に1列にする */
.abt-freepanel__list {
  margin-top: 18px;
  grid-template-columns: minmax(0, 1fr);
}

/* =========================================================================
   5. 8つの検索軸
   ========================================================================= */

.abt-axes {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

.abt-axis {
  min-width: 0;
}

.abt-axis__link {
  display: grid;
  /* 行間は0。項目名と補足文は、それぞれの line-height だけで詰めて置く。 */
  gap: 0 14px;
  align-items: center;
  /* 8枚の高さをそろえた結果できる余りを、項目名と補足文の「間」に配さない。
     余りは上下に均等に出し、項目名と補足文は常にくっついたまま中央へ置く。 */
  align-content: center;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-m);
  background: #fff;
  /* アイコン｜項目名と補足文｜矢印 の3列。
     左右の余白（18px）と列の並びは8枚とも同一なので、
     アイコンの位置と項目名の開始位置は全カードでそろう。 */
  grid-template-columns: auto minmax(0, 1fr) auto;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.abt-axis__link:hover {
  border-color: var(--lp-primary);
  box-shadow: var(--lp-shadow-soft);
  text-decoration: none;
}

/* 8枚とも 100×100 の正方形SVG。透過のまま、背景・枠線・影は付けない。
   34px 角。項目名（15.5px）＋補足文（12.5px）の2行の高さに近く、
   テキストを押し出さずに視認性だけを上げられる大きさ。 */
.abt-axis__icon {
  flex: none;
  width: 34px;
  height: 34px;
  grid-row: 1 / 3;
}

/* 項目名と補足文は行送りだけを詰める。文字サイズは変更しない。 */
.abt-axis__label {
  min-width: 0;
  color: var(--lp-ink);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
}

.abt-axis__desc {
  min-width: 0;
  grid-column: 2;
  color: var(--lp-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.abt-axis__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  grid-column: 3;
  grid-row: 1 / 3;
  fill: none;
  stroke: var(--lp-primary);
  stroke-width: 1.8;
}

/* =========================================================================
   6. 相談まで3ステップ
   共通フローを白いカードで囲った版。図版・囲い線・角丸・番号バッジは
   共通CSS（= for-production-companies のフローと同じ値）をそのまま使う。
   つなぎ線だけは、図版ではなくカードの端から出す。
   ========================================================================= */

.abt-flow .lp-flow__step {
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-m);
  background: #fff;
}

/* 共通CSSの margin-top: 20px（図版と見出しの間隔）をそのまま使う。
   図版が無かったころの打ち消しは不要になったため外した。 */

/* つなぎ線はカードの外へ出す。図版はカード内側へ寄っているので、
   共通CSSが 900px 以上で図版から出す矢印は使わない（二重に出さない）。 */
.abt-flow .lp-flow__fig::after,
.abt-flow .lp-flow__fig::before {
  display: none;
}

.abt-flow__note {
  max-width: 900px;
  margin: clamp(28px, 3vw, 40px) auto 0;
  color: var(--lp-body);
  font-size: var(--lp-fs-small);
  line-height: 1.85;
  text-align: center;
}

.abt-flow__actions {
  justify-content: center;
  margin-top: 26px;
}

/* =========================================================================
   7. 3つの相談方法
   ========================================================================= */

/* 1段ごとに図版と本文を左右へ振り、上から見るとZ字に流れる配置にする。
   意匠と組み方は for-production-companies の「プロモブに掲載する3つのメリット」
   （.pclp-merits / .pclp-merit）と同じ。段の間隔と番号サイズだけ一段抑えている。 */
.abt-ways {
  display: grid;
  gap: clamp(36px, 4.4vw, 64px); /* 参考ページは clamp(48px, 6vw, 88px) */
  grid-template-columns: minmax(0, 1fr);
}

.abt-way {
  display: grid;
  gap: clamp(22px, 2.6vw, 40px); /* 参考ページは clamp(28px, 3.5vw, 56px) */
  align-items: center;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

/* 図版の枠は、背景より一段濃いウォームカラーの面。角丸は大きいほう。 */
.abt-way__fig {
  min-width: 0;
  padding: clamp(14px, 1.8vw, 26px);
  border-radius: var(--lp-radius-l);
  background: var(--lp-warm-deep);
}

/* 3枚とも 600×400（3:2）。contain なので切り取りは起きず、
   列幅が同じ3列では表示サイズも完全に一致する。 */
.abt-way__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  border-radius: var(--lp-radius-m);
  background: #fff;
  object-fit: contain;
  object-position: center;
}

/* 幅の上限は列そのもの（2列は等幅）。max-width で絞ると、
   1カラムになる狭い画面で本文だけが画像より細くなるため置かない。 */
.abt-way__body {
  min-width: 0;
}

/* 番号は大きく見せる。参考ページは clamp(34px, 2rem + 1.6vw, 52px)。 */
.abt-way__num {
  display: block;
  color: var(--lp-primary);
  font-size: clamp(30px, 1.8rem + 1.2vw, 44px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0.9;
}

/* 番号下・見出し下の余白（参考ページは 16px）。 */
.abt-way__title {
  margin-top: 14px;
  font-size: var(--lp-fs-h3);
}

.abt-way__text {
  margin-top: 14px;
}

/* 下線（.lp-link の border-bottom）が列幅いっぱいに伸びないよう、
   横方向は文字数ぶんだけに留める。 */
.abt-way__link {
  align-self: start;
  justify-self: start;
  margin-top: 18px;
}

/* 3段目の直下。コンテンツ幅に対して中央揃えで、どちらの列にも片寄らせない。 */
.abt-ways__note {
  margin-top: clamp(28px, 3vw, 44px);
  color: var(--lp-body);
  font-size: var(--lp-fs-small);
  line-height: 1.85;
  text-align: center;
}

/* =========================================================================
   8. 問い合わせ後の流れ
   共通のステップ表を、本文なし（番号＋1行）で使う。
   ========================================================================= */

.abt-steps__note {
  max-width: 900px;
  margin: 20px auto 0;
  color: var(--lp-body);
  font-size: var(--lp-fs-small);
  line-height: 1.85;
  text-align: center;
}

.abt-steps__note + .abt-steps__note {
  margin-top: 6px;
}

.abt-steps__noteStrong {
  color: var(--lp-primary);
  font-weight: 700;
}

/* =========================================================================
   12. 最終CTA
   3文を <br> で改行して見せるため、共通の 34em 制限を外して
   1文が1行に収まるようにする（幅の上限は container--narrow が持つ）。
   ========================================================================= */

.promov-abt .lp-cta__text {
  max-width: none;
}

/* =========================================================================
   ブレークポイント
   ========================================================================= */

/* --- 560px 以上：検索軸を2列。ヒーローの条件も2列×2行 --- */
@media (min-width: 560px) {

  /* 複数列になるここから、8枚のカードの高さをすべてそろえる。
     補足文が1行のカードと2行のカードが混在しても、段ごとに高さが変わらない。 */
  .abt-axes {
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .abt-preview__conds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 900px 以上：カードとカード型セクションを3列。フローのつなぎ線を横向きへ --- */
@media (min-width: 900px) {

  /* 見出しの行数が列ごとに違っても、番号・見出し・本文の開始位置を3列でそろえる。
     行の高さを親グリッドから継承する subgrid を使う。 */
  .abt-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    /* 3行は subgrid の行として使うだけなので、行間は各要素のマージンで作る */
    row-gap: 0;
  }

  .abt-card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }

  /* 図版つきは 図版｜番号｜見出し｜本文 の4行。3列で図版の下端・番号・見出し・
     本文の開始位置がそろう（＝3カラムの上端と画像下端が一致する）。 */
  .abt-cards--fig {
    grid-template-rows: auto auto auto auto;
  }

  .abt-cards--fig .abt-card {
    grid-row: span 4;
  }

  /* ここから1段を左右2カラムに割る。奇数段は画像が左、偶数段は画像が右。
     3段並べると上から見てZ字に流れる。 */
  .abt-way {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .abt-way:nth-child(2n) .abt-way__fig {
    order: 2;
  }

  /* 説明文は、左右2カラムになるこの幅から指定位置で2行にする。
     共通の .lp-br-pc は1200px以上でしか効かないので、このセクションだけ前倒しする。
     900px未満（1カラム）では共通の display:none が効き、固定改行は残らない。 */
  .abt-way__text .lp-br-pc {
    display: inline;
  }

  /* 図版・本文とも列の幅いっぱいに置く。2列は等幅なので、
     画像枠の左右端も、番号・見出し・説明文・リンクの開始位置も、
     段が入れ替わっても同じ位置に来る（2段目だけずれることがない）。
     justify-self や max-width で寄せると段ごとに端がずれるため使わない。 */
  .abt-way__fig,
  .abt-way__body {
    width: 100%;
  }

  /* 見出しの行数がカードごとに違っても、図版の下端・見出し・本文の開始位置を
     3枚でそろえる。行の高さを親グリッドから継承する subgrid を使う。 */
  .abt-flow .lp-flow__list--cols3 {
    grid-template-rows: auto auto auto;
    /* 3行は subgrid の行として使うだけ。図版〜見出し〜本文の間隔は
       共通CSSが各要素に置いているマージン（20px / 10px）で作る。 */
    row-gap: 0;
  }

  .abt-flow .lp-flow__step {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }

  /* カード自身の擬似要素を、縦向き（共通CSSの既定）から横向きへ差し替える。
     図版から出る共通CSSの矢印は上の基本部分で消してあるので、二重にはならない。
     共通CSSの「--cols3 のとき縦線を消す」ルールと同じ詳細度なので、後勝ちで上書きされる。
     位置・寸法（32px の線＋24px の位置に矢印）は共通CSSの横向き版と同じ値。 */
  .abt-flow .lp-flow__step::after {
    display: block;
    top: 50%;
    left: 100%;
    width: 32px;
    height: 1px;
    margin-left: 0;
  }

  .abt-flow .lp-flow__step::before {
    display: block;
    top: 50%;
    left: calc(100% + 24px);
    width: 8px;
    height: 8px;
    margin-top: -4px;
    margin-left: 0;
    transform: rotate(-45deg);
  }

  .abt-flow .lp-flow__step:last-child::after,
  .abt-flow .lp-flow__step:last-child::before {
    display: none;
  }
}


/* --- 900px 以上（続き）：検索軸を4列。無料サービスを2カラム --- */
@media (min-width: 900px) {

  .abt-axes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .abt-free {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  }

}

/* --- 1000px 以上：ヒーローを2カラムに。
       900px台で2カラムにすると見出しが3行に折れるため、ここから分割する。 --- */
@media (min-width: 1000px) {

  /* CTA3点を1行に収めるため、左カラムを広めに取る。
     右カラムはプレビューの max-width(470px) より広ければよい。 */
  .abt-hero__inner {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  }

  /* 縦積みのままだと3枚でヒーローが高くなりすぎるため、幅を絞って締める */
  .abt-preview {
    max-width: 470px;
  }
}

/* --- 1200px 以上：カードの列間を広げる。CTAは折り返さない --- */
@media (min-width: 1200px) {

  .abt-cards {
    column-gap: 40px;
  }

  /* デスクトップでは3つのCTAを必ず横1列に並べる。
     1000〜1199px では左カラムが足りないため、折り返しを許したままにする。 */
  .abt-hero__actions {
    flex-wrap: nowrap;
    gap: 16px;
  }

  /* ボタンは文字数ぶんの幅だけ取り、余った幅へ広がらせない */
  .abt-hero__actions .lp-btn,
  .abt-hero__actions .lp-link {
    flex: none;
    white-space: nowrap;
  }
}

/* --- 899px 以下：1列になるので、図版が間延びしないよう上限を設ける。
       参考ページ（.pclp-issue__fig の max-width: 560px）と同じ値。 --- */
@media (max-width: 899px) {

  .abt-card__fig {
    max-width: 560px;
  }

  /* 縦積みのとき、画像と次の項目の間隔を空けすぎない */
  .abt-free__fig {
    max-width: 560px;
  }
}

/* --- 狭い画面の詰め直し --- */
@media (max-width: 430px) {

  .abt-preview__step {
    padding: 14px 15px 16px;
  }

  .abt-preview__cond {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .abt-axis__link {
    padding: 14px 15px;
  }
}

/* 動きを減らす設定のときは、ホバーの影と変形を出さない */
@media (prefers-reduced-motion: reduce) {

  .abt-axis__link {
    transition: none;
  }
}