/* ============================================================
   MOTION PLUS — 動きの追加
   ------------------------------------------------------------
   入っている演出
     ① リンクの文字が上下で入れ替わる
     ② 見出しの英字を ( ) でくくって1文字ずつ出す
     ③ 事業カードが扇のように開く
     ④ 数字がカウントアップする
     ⑤ 見出しの下に金の線が伸びる
     ⑥ お知らせの行が上下の線ではさまれる
   ============================================================ */


/* ============================================================
   ① リンクの文字が上下で入れ替わる
   ------------------------------------------------------------
   もとの文字が上へ抜けて、同じ文字が下から入ってきます。
   1文字ずつ少しずつ遅らせるので、波打つように見えます。
   ============================================================ */
.tx { display: inline-block; vertical-align: top; }
.tx__c {
  display: inline-block; position: relative;
  overflow: hidden;
  vertical-align: top;
}
.tx__c > i {
  display: inline-block; font-style: normal;
  transition: transform 0.62s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}
.tx__c > i::after {
  content: attr(data-t);
  position: absolute; left: 0; top: 100%;
  width: 100%;
}
/* 半角スペースは幅を保てるようにしておく */
.tx__c--sp { width: 0.34em; }

a:hover .tx__c > i,
button:hover .tx__c > i,
.is-active .tx__c > i { transform: translateY(-100%); }


/* ============================================================
   ② 見出しの英字（1文字ずつ出す）
   ------------------------------------------------------------
   以前は丸かっこ ( ) でくくっていましたが、やめました。
   先頭の横線（style.css の ::before）だけを残しています。

   ★ gap を 0 にしているのは大事なポイントです ★
   このあと1文字ずつ <span> に分けるので、gap を入れると
   文字と文字のあいだ全部に隙間が入り、
   「P H I L O S O P H Y」のようにバラバラに見えてしまいます。
   文字の間隔は letter-spacing だけで調整します。
   ============================================================ */
.sec-head__en {
  gap: 0;
}
/* 先頭の横線と、そのあとの余白 */
.sec-head__en::before {
  margin-right: 14px;
}
/* 1文字ずつ出すための入れもの */
.sec-head__en .ec { display: inline-block; will-change: transform, opacity; }


/* ============================================================
   ③ 事業カードが扇のように開く
   ============================================================ */
.biz-grid[data-fan] .biz-card { will-change: transform, opacity; }


/* ============================================================
   ④ 数字がカウントアップする
   ------------------------------------------------------------
   桁が増えても幅が動かないように、等幅の数字にしています。
   ============================================================ */
[data-count-to] { font-variant-numeric: tabular-nums; }


/* ============================================================
   ⑤ 見出しの下に金の線が伸びる
   ============================================================ */
.sec-head { position: relative; }
.sec-head__rule {
  display: block; height: 1px; margin-top: clamp(18px, 2.4vw, 28px);
  background: linear-gradient(90deg,
    rgba(198, 167, 104, 0.85) 0%,
    rgba(198, 167, 104, 0.28) 62%,
    rgba(198, 167, 104, 0) 100%);
  transform: scaleX(0); transform-origin: left center;
  will-change: transform;
}


/* ============================================================
   ⑥ お知らせの行が上下の線ではさまれる
   ============================================================ */
.news-item { position: relative; }
.news-item::before,
.news-item::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--gold-400, #c6a768);
  opacity: 0.5;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}
.news-item::before { top: 0; }
.news-item::after { bottom: 0; transform-origin: right center; }
.news-item:hover::before,
.news-item:hover::after,
.news-item:focus-within::before,
.news-item:focus-within::after { transform: scaleX(1); }


/* ============================================================
   動きを減らす設定にしている方への配慮
   ------------------------------------------------------------
   演出をまるごと消すのではなく「控えめ版」にします。
   大きく回る・飛ぶ・拡大する動きはJS側でやめて、
   ここでは「速さをおさえる」だけにしています。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* 文字の入れ替えは、さっと切り替わるくらいの速さに */
  .tx__c > i { transition-duration: 0.3s; }
  /* お知らせの線も、ゆっくりすぎない速さに */
  .news-item::before, .news-item::after { transition-duration: 0.35s; }
}