/**
 * File archive-business.css
 * Usage: archive-business.php（事業内容アーカイブ）のスタイル（モバイルファースト）。
 * Design: figma「まーける様 / 4_事業内容」
 *
 * デザイン実寸（1440px時）
 *   リード見出し 40px / リード本文 26px（1行目以外は黒40%）
 *   セクション見出し 80px ＋ 縦組みの「No.X」40px
 *   カード 見出し36px / キャッチ24px / 説明文16px
*/

/* ================================================
  共通
================================================ */
.ly_businessMain {
  background: #fff;
  color: var(--c-dark);
  /* clip でないと <main> がスクロールコンテナになりホイールを奪う（main.css .ly_top 参照）*/
  overflow-x: hidden;
  overflow-x: clip;
}

/* ================================================
  ページヒーロー（bl_svcHero）
================================================ */
.bl_svcHero {
  padding-block: 40px 8px;
}

/* ================================================
  リード文（bl_svcIntro）
================================================ */
.bl_svcIntro {
  padding-block: 40px 56px;
}
.bl_svcIntro_ttl {
  /* 本文と同じくグレーから開始し、subp.js が行ごとに黒へ点灯させる */
  color: rgba(0, 0, 0, 0.4);
  font-size: clamp(1.5rem, 1.1479rem + 1.5023vw, 2.5rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.bl_svcIntro_body {
  /* 段落間はデザイン上の空行1行分（line-height 2 = 2em） */
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2em;
  color: rgba(0, 0, 0, 0.4);
  font-size: clamp(0.9375rem, 0.6954rem + 1.0329vw, 1.625rem);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.04em;
}
/* 1行目だけ濃い色で強調 */

/* ================================================
  カテゴリーセクション（bl_svcSec）
================================================ */
.bl_svcSec {
  padding-bottom: 56px;
}
.bl_svcSec + .bl_svcSec {
  padding-top: 40px;
}

/* 見出し行：下に全幅の罫線 */
/* 下線は border ではなく疑似要素で描画し、画面に入ったら 0→100% に伸ばす（subp.js） */
.bl_svcSec_head {
  position: relative;
  padding-bottom: 20px;
}
.bl_svcSec_head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--c-dark);
  transform: scaleX(0);
  /* 見出しが左寄せのセクションは左から伸びる */
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 見出しが右寄せのセクションは右から伸びる */
.bl_svcSec__right .bl_svcSec_head::after {
  transform-origin: right center;
}
.bl_svcSec_head.is_inview::after {
  transform: scaleX(1);
}
/* モーション低減設定時はアニメーションせず、最初から下線を表示する */
@media (prefers-reduced-motion: reduce) {
  .bl_svcSec_head::after {
    transform: none;
    transition: none;
  }
}
.bl_svcSec_ttl {
  display: flex;
  align-items: center;
  line-height: 1;
}
/* 「No.1」は縦組み。line-height 0.74 で字幅ぶんの細い箱になる */
.bl_svcSec_no {
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-size: clamp(1.25rem, 0.8099rem + 1.8779vw, 2.5rem);
  font-weight: 700;
  line-height: 0.74;
  letter-spacing: -0.05em;
}
.bl_svcSec_name {
  font-size: clamp(2rem, 0.9438rem + 4.507vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}
/* 偶数セクション（No.2 / No.4 …）の見出しは右寄せ。
   左・右・左・右…と交互に配置する */
.bl_svcSec__right .bl_svcSec_ttl {
  justify-content: flex-end;
}

/* カード一覧 */
.bl_svcSec_list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ================================================
  事業内容カード（bl_svcCard）
================================================ */
/* SPは画像が上・テキストが下（DOMはテキスト→画像の順なので column-reverse で入れ替える）。
   PC（768px〜）では下の指定で row に戻す */
.bl_svcCard {
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
}
.bl_svcCard_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bl_svcCard_ttl {
  font-size: clamp(1.375rem, 1.0669rem + 1.3146vw, 2.25rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.bl_svcCard_catch {
  margin-top: 24px;
  font-size: clamp(1.125rem, 0.9929rem + 0.5634vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.bl_svcCard_txt {
  margin-top: 16px;
  font-size: clamp(0.875rem, 0.831rem + 0.1878vw, 1rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.bl_svcCard .el_moreBtn {
  margin-top: 24px;
}

/* イメージ */
.bl_svcCard_img {
  border-radius: var(--radius);
  overflow: hidden;
}
.bl_svcCard_img img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 462 / 385;
  object-fit: cover;
}

/* ================================================
  タブレット以上
================================================ */
@media screen and (min-width: 768px) {
  .bl_svcHero {
    padding-block: 60px 0;
  }
  .bl_svcIntro {
    padding-block: 56px 80px;
  }

  .bl_svcSec {
    padding-bottom: 80px;
  }
  .bl_svcSec + .bl_svcSec {
    padding-top: 56px;
  }
  .bl_svcSec_head {
    padding-bottom: 32px;
  }
  .bl_svcSec_list {
    margin-top: 56px;
    gap: 60px;
  }

  /* テキスト左・イメージ右の2カラム */
  .bl_svcCard {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }
  .bl_svcCard_body {
    flex: 1 1 540px;
    min-width: 0;
  }
  .bl_svcCard_img {
    flex: 0 0 auto;
    width: min(462px, 43%);
  }
  /* カード内の余白（デザイン実寸） */
  .bl_svcCard_catch {
    margin-top: 32px;
  }
  .bl_svcCard_txt {
    margin-top: 20px;
  }
  .bl_svcCard .el_moreBtn {
    margin-top: 32px;
  }
}

/* ================================================
  PC
================================================ */
@media screen and (min-width: 1024px) {
  .bl_svcIntro {
    padding-block: 64px 96px;
  }
  .bl_svcSec {
    padding-bottom: 100px;
  }
  .bl_svcSec + .bl_svcSec {
    padding-top: 72px;
  }
  .bl_svcSec_head {
    padding-bottom: 40px;
  }
  .bl_svcSec_list {
    margin-top: 80px;
  }
  .bl_svcCard {
    gap: 78px;
  }
}