/* ==========================================================
   BUSINESS PAGE
   共通デザインシステムは assets/css/locosystem-design-system.css
   を参照。HERO（写真＋暗幕＋タイトル）は .ls-page-hero
   （デザインシステム本体で共通化）を使用する。
   このファイルは事業紹介ページ固有の配置・余白のみ。

   セクション構成（Brand Code 1.10 Message Architecture準拠）:
     HERO   … Brand Concept（1.4）
     INTRO  … 存在意義（1.5 Purpose）を受けた導入文
     事業01-04 … 4事業の詳細（1.2 Business Context）
     CLOSING … Brand Conceptで締め、会社案内へ誘導

   画像:
   HEROは4事業の実写をクロスフェード表示する。
   ホームページのhero.cssと同じ「JS不要・@keyframesのみ」の
   方式に統一している（JS未読込/エラー時も画像は切り替わり続ける）。
   各事業ブロックは $business['image'] の実写を表示し、
   画像未設定の場合のみPLACEHOLDERを表示する。
========================================================== */

.ls-business {
  background: var(--ls-bg);
}


/* ==================================================
   HERO｜4事業写真のクロスフェード（JS不要／CSSアニメーションのみ）
   hero.cssの .ls-hero__slide 方式と同一のロジック。
   4枚 / 24秒 / 各6秒表示、短いクロスフェードで切り替わる。
================================================== */

.ls-business .ls-page-hero__media {
  position: absolute;
  inset: 0;
}

.ls-business-hero__slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  object-position: center;
}

.ls-business-hero__slide:nth-of-type(1) {
  animation: ls-business-hero-fade-1 24s infinite;
}

.ls-business-hero__slide:nth-of-type(2) {
  animation: ls-business-hero-fade-2 24s infinite;
}

.ls-business-hero__slide:nth-of-type(3) {
  animation: ls-business-hero-fade-3 24s infinite;
}

.ls-business-hero__slide:nth-of-type(4) {
  animation: ls-business-hero-fade-4 24s infinite;
}

@keyframes ls-business-hero-fade-1 {
  0%, 20% { opacity: 1; }
  25%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes ls-business-hero-fade-2 {
  0%, 20% { opacity: 0; }
  25%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes ls-business-hero-fade-3 {
  0%, 45% { opacity: 0; }
  50%, 70% { opacity: 1; }
  75%, 100% { opacity: 0; }
}

@keyframes ls-business-hero-fade-4 {
  0%, 70% { opacity: 0; }
  75%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

/* 動きを抑える設定の人には、1枚目を静止表示する */
@media (prefers-reduced-motion: reduce) {
  .ls-business-hero__slide {
    animation: none !important;
    opacity: 0;
  }

  .ls-business-hero__slide:first-of-type {
    opacity: 1;
  }
}


/* ==================================================
   INTRO
================================================== */

.ls-business-intro {
  padding-block: var(--ls-space-120);
  background: var(--ls-bg);
}

.ls-business-intro__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.ls-business-intro__title {
  margin: var(--ls-space-24) 0 0;
  color: var(--ls-fg-strong);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.04em;
}


/* ==================================================
   事業ブロック（左右交互）
================================================== */

.ls-business-list {
  display: flex;
  flex-direction: column;
  gap: var(--ls-space-144);
  padding-block: var(--ls-space-48) var(--ls-space-120);
}

.ls-business-item {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--ls-space-80);
  align-items: center;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--ls-ease-standard),
    transform 0.7s var(--ls-ease-standard);
}

.ls-business-item.is-inview {
  opacity: 1;
  transform: none;
}

.ls-business-item:nth-child(even) {
  direction: rtl;
}

.ls-business-item:nth-child(even) > * {
  direction: ltr;
}

.ls-business-item__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ls-bg-soft);
}

.ls-business-item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ls-business-item__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ls-navy), var(--ls-navy-dark));
}

.ls-business-item:nth-child(2) .ls-business-item__placeholder {
  background: linear-gradient(135deg, var(--ls-navy-light), var(--ls-navy));
}

.ls-business-item:nth-child(3) .ls-business-item__placeholder {
  background: linear-gradient(135deg, var(--ls-navy-dark), var(--ls-navy));
}

.ls-business-item:nth-child(4) .ls-business-item__placeholder {
  background: linear-gradient(135deg, var(--ls-navy), var(--ls-navy-light));
}

.ls-business-item__watermark {
  position: absolute;
  inset: -20%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: var(--ls-space-32);
  transform: rotate(-18deg);
  opacity: 0.14;
  pointer-events: none;
}

.ls-business-item__watermark span {
  color: #ffffff;
  font-family: var(--ls-font-en);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.ls-business-item__content {
  padding-inline: var(--ls-space-16);
}

.ls-business-item__number {
  margin: 0 0 var(--ls-space-16);
  color: var(--ls-fg-link);
  font-family: var(--ls-font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.ls-business-item__en {
  margin: 0 0 var(--ls-space-8);
  color: var(--ls-fg-muted);
  font-family: var(--ls-font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.ls-business-item__title {
  margin: 0;
  color: var(--ls-fg-strong);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

.ls-business-item__text {
  margin: var(--ls-space-24) 0 0;
  color: var(--ls-fg);
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.03em;
}

.ls-business-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ls-space-12);
  margin: var(--ls-space-32) 0 0;
  padding: 0;
  list-style: none;
}

.ls-business-item__tags li {
  padding: var(--ls-space-8) var(--ls-space-16);
  color: var(--ls-fg-muted);
  font-size: 13px;
  letter-spacing: 0.03em;
  border: 1px solid var(--ls-line-subtle);
  border-radius: var(--ls-radius-small);
}


/* ==================================================
   CLOSING
================================================== */

.ls-business-closing {
  padding-block: var(--ls-space-120);
  text-align: center;
}

.ls-business-closing__title {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.ls-business-closing__link {
  margin-top: var(--ls-space-40);
}


/* ==================================================
   SWELL adjustment
   独自の .ls-page-hero と重複する標準タイトルを非表示
================================================== */

.c-pageTitle {
  display: none;
}

#content {
  padding-top: 0;
  margin-top: 0;
}

.l-mainContent {
  padding-top: 0;
}


/* ==================================================
   Motion（動きを抑える設定への対応：事業カードのフェードイン）
================================================== */

@media (prefers-reduced-motion: reduce) {
  .ls-business-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 959px) {
  .ls-business-intro {
    padding-block: var(--ls-space-96);
  }

  .ls-business-list {
    gap: var(--ls-space-96);
    padding-block: var(--ls-space-32) var(--ls-space-96);
  }

  .ls-business-item {
    grid-template-columns: 1fr;
    gap: var(--ls-space-40);
  }

  .ls-business-item:nth-child(even) {
    direction: ltr;
  }

  .ls-business-item__content {
    padding-inline: 0;
  }

  .ls-business-closing {
    padding-block: var(--ls-space-96);
  }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {
  .ls-business-intro {
    padding-block: var(--ls-space-80);
  }

  .ls-business-intro__title {
    font-size: clamp(24px, 7vw, 30px);
  }

  .ls-business-list {
    gap: var(--ls-space-72);
    padding-block: var(--ls-space-24) var(--ls-space-80);
  }

  .ls-business-item {
    gap: var(--ls-space-32);
  }

  .ls-business-item__media {
    aspect-ratio: 4 / 3;
  }

  .ls-business-item__title {
    font-size: 24px;
  }

  .ls-business-closing {
    padding-block: var(--ls-space-80);
  }

  .ls-business-closing__title {
    font-size: clamp(24px, 7vw, 30px);
  }
}