@charset "UTF-8";
/* =============================================
   OUR BUSINESS ページ（旧SERVICE。スラッグ business 前提）
   Figma: RampHrGFDFponzD6LRvVxc
     PC   = OUR BUSINESS_PC（node 272:580 / 1200pxフレーム。502:5636, 502:6203 はスライド切替差分）
     SP   = Frame 3（node 567:5327 / 440pxフレーム・途中まで → 以降はPCから展開）
   - 単位は em()（_mixins.scss）。PC=16px固定基準 / SP=440pxフレームのvw追従
   - 事例スライダーは js/business.js（矢印・ドット・フェード切替）
============================================= */
/*--- em単位の基準（businessページのみ。style_top.scss と同じ考え方） ---*/
body {
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 3.6363636364vw;
  }
}

/*--- ページラッパー ---*/
main {
  padding-top: 0; /* style.scss の main{padding-top:160px} を打ち消し、.business 側で管理 */
}

.business {
  position: relative;
  overflow: clip; /* 背景バースト・縦書き文字のはみ出しを裁ち落とす */
  background-color: #FFF226;
  padding-top: 13em; /* fixedヘッダー(90px)込みのFigma実測タイトル位置 */
  padding-bottom: 9.375em; /* footer側のmargin-top(100px)と合わせてFigma実測150px */
  color: #2c2c2c;
}
@media screen and (max-width: 768px) {
  .business {
    /* チェックバック: SPの見出し位置も全ページ統一。基準は PHILOSOPHY の em(104)
       （SP固定ヘッダー 70.4px = 16vw ＋ 見出し上余白 33.6px）。旧値 em(170) */
    padding-top: 6.5em;
    padding-bottom: 6.25em;
  }
}

/*--- 背景装飾（OOHバースト） ---*/
/* ページ上端からの絶対Y指定だと実ページのセクション間隔との誤差が累積してズレるため、
   各セクション内に配置してセクション上端基準（Figma実測の差分）でアンカーする。
   topが負の値のものは前セクションとの境界をまたぐ配置 */
.business__burst {
  position: absolute;
  z-index: -1; /* セクション内で本文より背面 */
  height: auto;
  pointer-events: none;
}

/* PC: left は画面中央からのオフセット（Figma 1200pxフレームの中央基準） */
.business__burst--domain {
  width: 87.5625em;
  left: calc(50% - 70.0625em);
  top: 6.8125em;
} /* Group 242 */
.business__burst--total {
  width: 63.6875em;
  left: calc(50% + 5.625em);
  top: 37.625em;
} /* Group 168 */
.business__burst--media {
  width: 55.625em;
  left: calc(50% - 44.8125em);
  top: 55.25em;
} /* Group 245 */
.business__burst--real {
  display: none;
} /* SP専用（PCデザインにこの位置のバーストは無い） */
.business__burst--creative {
  width: 110.0625em;
  left: calc(50% - 13em);
  top: -5em;
} /* Group 244 */
.business__burst--direct {
  width: 66em;
  left: calc(50% - 59.25em);
  top: -2.9375em;
} /* Group 254 */
.business__burst--flow1 {
  width: 105.75em;
  left: calc(50% - 44.875em);
  top: -3.1875em;
} /* Group 257 */
.business__burst--flow2 {
  width: 73.625em;
  left: calc(50% - 48.5em);
  top: 72.9375em;
} /* Group 258 */
@media screen and (max-width: 768px) {
  /* SPフレーム（440px）実測。left はビューポート左端基準 */
  .business__burst--domain {
    width: 42.625em;
    left: -8.125em;
    top: 11em;
  }
  .business__burst--total {
    width: 26.375em;
    left: 5.1875em;
    top: 43.5625em;
  }
  .business__burst--media {
    width: 72.0625em;
    left: -5.1875em;
    top: 2em;
  }
  .business__burst--real {
    display: block;
    width: 38.4375em;
    left: -6.75em;
    top: -4.75em;
  }
  .business__burst--creative,
.business__burst--direct,
.business__burst--flow1,
.business__burst--flow2 {
    display: none;
  } /* SPデザイン未支給領域はバースト非表示（すっきり優先） */
}
/* コンテンツをバーストより手前に */
.business__title,
.business__nav,
.biz-domain,
.biz-section,
.biz-flow,
.biz-banners {
  position: relative;
  z-index: 1;
}

/*--- ページタイトル ---*/
.business__title {
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 600;
  font-size: 4.0625em;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .business__title {
    font-size: 2.875em; /* チェックバック: SPも基準(PHILOSOPHY)に統一。旧 em(40) */
  }
}

/*--- ページ内アンカー ---*/
.business__nav {
  margin-top: 8.125em; /* Figma実測: タイトル下端(289)→ナビ(410)=121 だがline-height分を差し引いた見た目値 */
  display: flex;
  justify-content: center;
  gap: 6.25em; /* Figma実測: 項目間（539+30→639） */
}
@media screen and (max-width: 768px) {
  .business__nav {
    margin-top: 6.25em;
    gap: 1em;
  }
}

.business__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em; /* Figma実測: テキスト→アイコン（自身のfont-size 20px補正） */
  font-size: 1.25em;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #2c2c2c;
  transition-property: opacity;
  transition-duration: 0.4s;
}
@media screen and (max-width: 768px) {
  .business__nav-link {
    font-size: 1.0625em;
    gap: 0.4705882353em;
  }
}

.business__nav-link:hover {
  opacity: 0.7;
}

.business__nav-icon {
  display: block;
  width: 1.5em; /* 親リンクのfont-size 20px基準 */
  height: 1.5em;
  background-image: url("../images/business/anchor-arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(90deg); /* 素材は右向き矢印 → 下向きに */
}
@media screen and (max-width: 768px) {
  .business__nav-icon {
    width: 1.4705882353em;
    height: 1.4705882353em;
  }
}

/*--- 罫線付き見出し（事業領域 / 業務フロー 共通） ---*/
.biz-heading-bar {
  max-width: 42em; /* 自身のfont-size 20px基準（第2引数補正）。em(840)だと1050pxに化ける */
  width: 91%;
  margin: 0 auto;
  border-top: 1px solid #2c2c2c;
  border-bottom: 1px solid #2c2c2c;
  padding: 0.65em 0;
  font-size: 1.25em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .biz-heading-bar {
    width: calc(100% - 2.5em);
  }
}

/*--- 1. 事業領域 ---*/
.biz-domain {
  margin-top: 5.875em; /* Figma実測: ナビ(440)→罫線(534) */
}
@media screen and (max-width: 768px) {
  .biz-domain {
    margin-top: 4.375em;
  }
}

.biz-domain__intro {
  max-width: 56em; /* 自身のfont-size 15px補正 */
  width: 91%;
  margin: 1.9333333333em auto 0;
  font-size: 0.9375em;
  font-weight: 500;
  line-height: 1.89; /* Figma実測 85px/3行 */
  letter-spacing: 0.1em;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  .biz-domain__intro {
    width: calc(100% - 3.5714285714em);
    margin-top: 1.2142857143em;
    font-size: 0.875em;
    line-height: 1.96;
    text-align: justify;
  }
}

.biz-domain__note {
  max-width: 70em; /* 自身のfont-size 12px補正 */
  width: 91%;
  margin: 0.4166666667em auto 0;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 2.08;
  letter-spacing: 0.05em;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .biz-domain__note {
    width: calc(100% - 4.1666666667em);
    margin-top: 1.4166666667em;
    line-height: 1.67;
  }
}

/*--- 2〜6. コミュニケーションセクション共通 ---*/
.biz-section {
  position: relative;
  /* チェックバック: セクション間をもう少し空ける。Figma実測値（PC163 / SP95。
     事業領域下端(734)→TOTAL見出し(897)）から約23%増し。
     .biz-section は total/media/real/creative/direct の5つに付くため、
     この1値が「各セクションの上の余白」＝「前のセクションの下の余白」を兼ねる */
  margin-top: 12.5em;
}
@media screen and (max-width: 768px) {
  .biz-section {
    margin-top: 7.25em;
  }
}

.biz-section__heading {
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 3.125em;
  letter-spacing: 0.05em;
  line-height: 1.24;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .biz-section__heading {
    font-size: 2.1875em;
    line-height: 1.09;
  }
}

.biz-section__subheading {
  font-size: 0.8125em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .biz-section__subheading {
    margin-top: 0.4615384615em;
  }
}

.biz-section__lead {
  margin-top: 2.25em; /* Figma実測: サブ見出し下端→45px（自身のfont-size 20px補正） */
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.75; /* Figma実測 35px/20px */
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .biz-section__lead {
    margin-top: 1.9em;
    line-height: 1.65;
  }
}

.biz-section__body {
  max-width: 56em; /* 自身のfont-size 15px補正 */
  width: 91%;
  margin: 1.3333333333em auto 0; /* Figma実測: リード下端→20px */
  font-size: 0.9375em;
  font-weight: 500;
  line-height: 1.667; /* Figma実測 25px/15px */
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .biz-section__body {
    width: calc(100% - 3.5714285714em);
    margin-top: 1.6428571429em;
    font-size: 0.875em;
    line-height: 1.79;
    text-align: justify;
  }
}

/* タグ（白ピル） */
.biz-section__tags {
  max-width: 52.5em;
  width: 91%;
  margin: 3.125em auto 0; /* Figma実測: 本文下端→50px */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625em;
}
@media screen and (max-width: 768px) {
  .biz-section__tags {
    width: calc(100% - 3.125em);
    margin-top: 1.75em;
    gap: 0.5em;
  }
}

.biz-section__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3333333333em;
  padding: 0.2666666667em 1em;
  background-color: #fff;
  border-radius: 999px;
  font-size: 0.9375em;
  font-weight: 500;
  line-height: 1.667;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .biz-section__tag {
    width: 100%;
    min-height: 2.7692307692em;
    padding: 0.4615384615em 1.1538461538em;
    font-size: 0.8125em;
    line-height: 1.9;
  }
}

/* TOTALのベン図 */
.biz-section__diagram {
  max-width: 31.125em;
  width: 80%;
  margin: 3.125em auto 0;
}
@media screen and (max-width: 768px) {
  .biz-section__diagram {
    max-width: 20.8125em;
    margin-top: 3.375em;
  }
}

.biz-section__diagram img {
  display: block;
  width: 100%;
  height: auto;
}

/* 縦書きの飾り英字（セクション端。装飾）
   Figmaのz順ではスライダーの白帯より手前 → マークアップをセクション末尾に置き、
   z-index:0（後続の矢印(z2)よりは奥）で白帯の上に重ねる。
   位置・サイズは REST API の absoluteBoundingBox 実測値（メタデータのx/yは回転原点のためズレる） */
.biz-section__vertical {
  position: absolute;
  z-index: 0;
  width: 13.1875em;
  pointer-events: none;
  will-change: transform; /* js/business.js がスクロールで translateY を更新する */
}

.biz-section__vertical img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

/* 左右アンカー（チェックバック: コンテンツ幅基準 calc(50% - em(614)) → ヘッダーの両端に変更）。
   common.scss の .header は width:100% + padding: 0 23px 0 31px。
   ロゴ(head_logo.svg)は viewBox 0起点で .header__logo の幅いっぱいに描かれ、
   CONTACTボタン(.header__cta a)は .header__nav の最後の要素で右マージンなし。
   よって「ロゴ左端＝画面左から31px」「CONTACTボタン右端＝画面右から23px」で揃う。
   ※旧値は Figma 1200pxフレームの実測bbox（左端 x=-14 / 右端 x=1214 = 中央±614）で、
     画面が広いほど中央寄りに離れていくためヘッダーと揃わなかった。

   加えて object-position で画像を箱の左右どちらかへ寄せる。
   箱は width: em(211) 固定だが画像の縦横比が箱と異なるため object-fit:contain が
   中央寄せのレターボックスを作り、左右に余白（MEDIA 19.4px / REAL 40.9px /
   CREATIVE・DIRECT 39.5px）が入って、箱を端に置いても文字がその分内側にズレていた */
.biz-section__vertical--left {
  left: 1.9375em;
}

.biz-section__vertical--left img {
  -o-object-position: left center;
  object-position: left center;
}

.biz-section__vertical--right {
  right: 1.4375em;
}

.biz-section__vertical--right img {
  -o-object-position: right center;
  object-position: right center;
}

/* top はセクション上端（見出し）からの実測差分、height は実測bbox */
.biz-section--media .biz-section__vertical {
  top: 3.1875em;
  height: 47.25em;
}

.biz-section--real .biz-section__vertical {
  top: 29.25em;
  height: 27.75em;
}

.biz-section--creative .biz-section__vertical {
  top: 3.625em;
  height: 52.8125em;
}

.biz-section--direct .biz-section__vertical {
  top: 17.5em;
  height: 38.8125em;
}

/* チェックバック: 1200px以下では非表示にする（旧: SP=768px以下のみ非表示）。
   この飾りは左右端に絶対配置され、ヘッダーのコンテンツ左右端（左31px/右23px）に張り付く。
   1200pxを切るとコンテンツ幅との間に余裕がなくなり、本文やスライダーに被ってしまうため。
   ※SPフレームにはもともと存在しない要素なので、消しても情報の欠落はない。
   js/business.js のパララックスは rect.height が0の要素をスキップするのでJS側の対応は不要 */
@media screen and (max-width: 1200px) {
  .biz-section__vertical {
    display: none;
  }
}
/*--- 事例スライダー ---*/
.case-slider {
  position: relative;
  margin-top: 4.0625em; /* Figma実測: タグ下端→写真上端 */
  padding-bottom: 0.0625em;
}
@media screen and (max-width: 768px) {
  .case-slider {
    margin-top: 2.5em;
  }
}

/* 全幅の白帯（写真上端から96px下がった位置に320px。Figma実測） */
.case-slider::before {
  content: "";
  position: absolute;
  top: 6em;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: 20em;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .case-slider::before {
    top: 4.3125em;
    height: 15.875em;
  }
}

.case-slider__list {
  position: relative;
  display: grid; /* 全スライドを重ねて高さを最大スライドに合わせる */
}

.case-slider__item {
  grid-area: 1/1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.case-slider__item.is-active {
  opacity: 1;
  visibility: visible;
}

.case-slider__figure {
  margin: 0;
}

.case-slider__image {
  display: block;
  width: 35em;
  max-width: 91%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
  object-fit: cover;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .case-slider__image {
    width: calc(100% - 3.125em);
  }
}

.case-slider__caption {
  margin-top: 0.5833333333em;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 2.08;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .case-slider__caption {
    margin-top: 1em;
  }
}

/* 矢印（30px黒丸。素材は左向き → nextは反転） */
.case-slider__arrow {
  position: absolute;
  font-size: 100%; /* buttonはfont-sizeを継承しないUAがあるため明示（em基準を親に揃える） */
  top: 8.9375em; /* Figma実測: 白帯上端+47px */
  width: 1.875em;
  height: 1.875em;
  padding: 0;
  border: none;
  background-color: transparent;
  background-image: url("../images/business/slider-arrow-circle.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  transition-property: opacity;
  transition-duration: 0.4s;
  z-index: 2;
}

.case-slider__arrow:hover {
  opacity: 0.7;
}

.case-slider__arrow--prev {
  left: calc(50% - 20.5625em);
}

.case-slider__arrow--next {
  right: calc(50% - 20.5625em);
  transform: scaleX(-1);
}

@media screen and (max-width: 768px) {
  /* SPは画像下の中央寄せ行（Figma実測: キャプション下・ドットと同じ高さに左右配置） */
  .case-slider__arrow {
    top: auto;
    bottom: -0.5625em;
  }
  .case-slider__arrow--prev {
    left: calc(50% - 5.1875em);
  }
  .case-slider__arrow--next {
    right: calc(50% - 5.1875em);
  }
}
/* ドットインジケーター（page-business.phpに静的マークアップ。js/business.jsが切替を同期） */
.case-slider__dots {
  position: relative; /* 白帯(::before・absolute)より手前に描画させる（非配置だと帯の下に隠れる） */
  margin-top: 1.25em;
  display: flex;
  justify-content: center;
  gap: 0.375em;
}
@media screen and (max-width: 768px) {
  .case-slider__dots {
    margin-top: 2em;
  }
}

.case-slider__dot {
  font-size: 100%; /* buttonのem基準を親に揃える */
  width: 0.5em;
  height: 0.5em;
  padding: 0;
  border: 1px solid #2c2c2c;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
}

.case-slider__dot.is-active {
  background-color: #2c2c2c;
}

/* 事例1件（DIRECT）は余白のみ（矢印・ドットなし） */
.case-slider--single .case-slider__dots {
  display: none;
}

/*--- 7. 業務フロー ---*/
.biz-flow {
  margin-top: 9.375em; /* Figma実測: DIRECTスライダー下端(5949.8)→罫線(6099.8) */
}
@media screen and (max-width: 768px) {
  .biz-flow {
    margin-top: 5.9375em;
  }
}

.biz-flow__title {
  margin-top: 2.8em; /* Figma実測: 罫線(6155.8)→タイトル(6211.8) */
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .biz-flow__title {
    margin-top: 2em;
  }
}

.biz-flow__lead {
  margin-top: 1.25em;
  font-size: 0.9375em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .biz-flow__lead {
    margin-top: 1.7692307692em;
    font-size: 0.8125em;
    width: calc(100% - 3.125em);
    margin-left: auto;
    margin-right: auto;
  }
}

.biz-flow__list {
  position: relative;
  max-width: 52.5em;
  width: 91%;
  margin: 5.5em auto 0; /* Figma実測: リード下端(6270.8)→1つ目の丸(6336.2)+ゆとり */
  list-style: none;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .biz-flow__list {
    width: calc(100% - 3.125em);
    margin-top: 3.125em;
  }
}

/* ステップをつなぐ縦ライン（丸の中心 x=86px を通る。最後のステップまで） */
.biz-flow__list::before {
  content: "";
  position: absolute;
  top: 2.4375em;
  bottom: 2.4375em;
  left: 5.34375em;
  width: 1px;
  background-color: #2c2c2c;
  height: calc(100% - 7.125em);
}
@media screen and (max-width: 768px) {
  .biz-flow__list::before {
    top: 1.875em;
    bottom: 1.875em;
    left: 1.84375em;
  }
}

.biz-flow__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 2.8125em; /* Figma実測: 丸(x227+78)→テキスト(x350) */
  min-height: 8.75em; /* Figma実測: ステップ間隔 */
}
@media screen and (max-width: 768px) {
  .biz-flow__step {
    gap: 1.25em;
    /* チェックバック(SP / 0824 p4「読みやすいスペースに。現状、不揃いで詰まりすぎ」):
       旧実装はステップ間の余白を min-height:100 の余りだけで作っていたため、
       ・本文1行の短いステップ → 余りが大きく開く
       ・本文3行の長いステップ → 100を超えて余りゼロ＝次のタイトルに密着
       と、間隔が内容の長さ次第でバラついていた。
       min-height をアイコン径(60)まで下げて「余り」を無くし、
       ステップ間の余白は margin で一律に持たせる（＝どの行数でも同じ間隔になる） */
    min-height: 3.75em;
  }
}

@media screen and (max-width: 768px) {
  .biz-flow__step + .biz-flow__step {
    margin-top: 1.875em;
  }
}

.biz-flow__icon {
  position: relative;
  z-index: 1; /* 縦ラインより手前 */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.875em;
  height: 4.875em;
  margin-left: 2.9375em; /* Figma実測: リスト左端(180)→丸(227) */
  background-color: #fff;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .biz-flow__icon {
    width: 3.75em;
    height: 3.75em;
    margin-left: 0;
  }
}

.biz-flow__icon img {
  display: block;
  width: 58%;
  height: 58%;
  -o-object-fit: contain;
  object-fit: contain;
}

.biz-flow__detail {
  /* チェックバック(PC / 0824 p6「左アイコンのタテ中央になるよう少し下げる」):
     旧実装は padding-top:12px の固定オフセットで、テキスト行数に関わらず上端を揃えていた。
     そのため本文の無い「広告プロモーション実施」だけ、タイトルの中心が
     アイコン中心(丸78pxの中央=39px)より約17px高い位置に来ていた。
     アイコンと同じ高さの箱にして中身を天地中央に置けば、行数に関係なく中心が揃う。 */
  min-height: 4.875em; /* = .biz-flow__icon の直径 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .biz-flow__detail {
    /* SPは従来どおり上寄せ＋微オフセット（中央寄せはPCのみの指定） */
    min-height: 0;
    display: block;
    padding-top: 0.375em;
  }
}

/* チェックバック: 本文を持たないステップ（広告プロモーション実施）だけ、SPでも
   アイコンの天地中央に合わせる。PCは .biz-flow__detail 側で全ステップ中央寄せ済み。
   :has() ではなく modifier クラスで指定しているのは、対象が1件で明示的なほうが追いやすく
   ブラウザ要件にも左右されないため */
@media screen and (max-width: 768px) {
  .biz-flow__step--title-only .biz-flow__detail {
    min-height: 3.75em; /* = SPの .biz-flow__icon の直径 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
  }
}

.biz-flow__step-title {
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .biz-flow__step-title {
    font-size: 1.125em;
  }
}

.biz-flow__step-text {
  margin-top: 0.3333333333em;
  font-size: 0.9375em;
  font-weight: 500;
  line-height: 1.53; /* Figma実測 23px/15px */
  letter-spacing: 0.1em;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  .biz-flow__step-text {
    margin-top: 0.4615384615em;
    font-size: 0.8125em;
    line-height: 1.7;
  }
}

/*--- 8. バナー ---*/
.biz-banners {
  max-width: 40.5em;
  width: 91%;
  margin: 9.375em auto 0; /* Figma実測: フロー下端(7394.2)→バナー(7544.2) */
}
@media screen and (max-width: 768px) {
  .biz-banners {
    width: calc(100% - 3.125em);
    margin-top: 5.625em;
  }
}

.biz-banners__item {
  margin: 0;
}

.biz-banners__item + .biz-banners__item {
  margin-top: 1.25em; /* Figma実測: バナー間 */
}
@media screen and (max-width: 768px) {
  .biz-banners__item + .biz-banners__item {
    margin-top: 1em;
  }
}

.biz-banners__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.625em;
}

.biz-banners__item a {
  display: block;
  transition-property: opacity;
  transition-duration: 0.4s;
}

.biz-banners__item a:hover {
  opacity: 0.8;
}

.footer {
  margin-top: 0;
}
/*# sourceMappingURL=style_business.css.map */