@charset "UTF-8";
/* =========================================
   トップ MESSAGE セクションの表示アニメーション
   JS：public/js/message-anim.js（画面に入ると .is-inview を付与）
   順番：写真 0s → MESSAGE・赤線 0.5s → 見出し・説明文 1.1s
         → 01/02/03 1.6s〜（0.15s間隔）→ ボタン 2.2s
   ※ transition は表示時（.is-inview）にだけ付ける。隠す時は一瞬で隠す。
========================================= */

/* ---------- 表示前（隠した状態） ---------- */
.js-message-anim .message-section__figure,
.js-message-anim .message-section__profile,
.js-message-anim .section__eyebrow span {
  opacity: 0;
}

.js-message-anim .section__eyebrow::after {
  transform: scaleX(0);
  transform-origin: left center;
}

.js-message-anim .message-section__title,
.js-message-anim .message-section__lead,
.js-message-anim .button-center-wrap {
  opacity: 0;
  transform: translateY(12px);
}

.js-message-anim .message-flow__item {
  opacity: 0;
  transform: translateY(16px);
}

/* ---------- 表示 ---------- */
.js-message-anim.is-inview .message-section__figure,
.js-message-anim.is-inview .message-section__profile,
.js-message-anim.is-inview .section__eyebrow span,
.js-message-anim.is-inview .message-section__title,
.js-message-anim.is-inview .message-section__lead,
.js-message-anim.is-inview .message-flow__item,
.js-message-anim.is-inview .button-center-wrap {
  opacity: 1;
  transform: none;
}

.js-message-anim.is-inview .section__eyebrow::after {
  transform: scaleX(1);
}

/* 代表者の写真・名札：その場でゆっくりフェードイン 0.8s */
.js-message-anim.is-inview .message-section__figure,
.js-message-anim.is-inview .message-section__profile {
  transition: opacity .8s ease;
}

/* MESSAGE の文字 → 赤い横線が左から伸びる 0.5s */
.js-message-anim.is-inview .section__eyebrow span {
  transition: opacity .5s ease .5s;
}
.js-message-anim.is-inview .section__eyebrow::after {
  transition: transform .5s cubic-bezier(.25, .8, .25, 1) .6s;
}

/* 見出し・説明文：12px下からまとめて 0.6s */
.js-message-anim.is-inview .message-section__title,
.js-message-anim.is-inview .message-section__lead {
  transition: opacity .6s ease 1.1s, transform .6s ease 1.1s;
}

/* 01 → 02 → 03：少し下から各0.5s、0.15sずつずらす */
.js-message-anim.is-inview .message-flow__item {
  transition: opacity .5s ease 1.6s, transform .5s ease 1.6s;
}
.js-message-anim.is-inview .message-flow__item:nth-child(2) {
  transition-delay: 1.75s;
}
.js-message-anim.is-inview .message-flow__item:nth-child(3) {
  transition-delay: 1.9s;
}

/* ボタン：最後にふわっと */
.js-message-anim.is-inview .button-center-wrap {
  transition: opacity .5s ease 2.2s, transform .5s ease 2.2s;
}

/* 金色のボタン：マウスを乗せると2px浮き、影が少し深く 0.2s */
.message-section .unison-button--primary {
  transition: transform .2s ease, box-shadow .2s ease;
}
.message-section .unison-button--primary:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(var(--color-black-rgb), 0.24);
}