@charset "UTF-8";
/* ============================================================
   MOTION CINEMA — 映画的な「間（ま）」のあるモーション
   ------------------------------------------------------------
   参考サイトで効いていた動きを、HARCの紺と金に合わせて作り直したものです。

     ① ピント送り         … data-focus     ぼやけた状態からスッと像を結ぶ
     ④ 伸びる金の線        … data-draw      横（h）または縦（v）に線が引かれる
     ⑤ 1拍ずつずれて出る   … data-beat      子要素が順番に、少し遅れて出る
     ⑥ ふわりと浮くアイコン … 事業カードの絵柄がゆっくり上下する

   ★ このファイルの動きは全部「あとから足したもの」です。
     JSが止まっても、中身は普通に読める状態で表示されます。
   ============================================================ */

:root {
  /* 参考サイトの「ため」のある緩急。ゆっくり→速く→ゆっくり、が極端なカーブ */
  --ease-cinema: cubic-bezier(1, 0, 0, 1);
}


/* ============================================================
   ① ピント送り（data-focus）
   ------------------------------------------------------------
   ぼやけて少し大きい状態から、くっきり等倍へ。
   カメラのピントが合う瞬間のような出かたになります。
   ============================================================ */
.cinema-js [data-focus] {
  opacity: 0;
  filter: blur(26px);
  transform: scale(1.075);
  transition:
    opacity 1.3s var(--ease-cinema),
    filter 1.3s var(--ease-cinema),
    transform 1.6s var(--ease-cinema);
  will-change: opacity, filter, transform;
}
.cinema-js [data-focus].is-focused {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
/* 動きが終わったら will-change を外して、端末の負担を減らす */
.cinema-js [data-focus].is-settled { will-change: auto; }


/* ============================================================
   ⑤ 1拍ずつずれて出る（data-beat）
   ------------------------------------------------------------
   表・フォーム・箇条書きなど「並んでいるもの」に付けます。
   JSが子要素へ順番に待ち時間を割りふります。
   ============================================================ */
.cinema-js [data-beat] > * {
  opacity: 0;
  transform: translateY(38px) scale(0.965);
  transition:
    opacity 0.95s var(--ease-cinema),
    transform 0.95s var(--ease-cinema);
}
.cinema-js [data-beat].is-beating > * {
  opacity: 1;
  transform: none;
}
/* 表は tbody の中の行が対象になります */
.cinema-js table[data-beat] > tbody > tr {
  opacity: 0;
  transform: translateY(38px) scale(0.965);
  transition:
    opacity 0.95s var(--ease-cinema),
    transform 0.95s var(--ease-cinema);
}
.cinema-js table[data-beat].is-beating > tbody > tr { opacity: 1; transform: none; }


/* ============================================================
   ④ 伸びる金の線（data-draw）
   ------------------------------------------------------------
   data-draw="h" … 左から右へ
   data-draw="v" … 上から下へ
   ============================================================ */
.cinema-js [data-draw] { transition: transform 1.25s var(--ease-cinema); }
.cinema-js [data-draw="h"] { transform: scaleX(0); transform-origin: left center; }
.cinema-js [data-draw="v"] { transform: scaleY(0); transform-origin: center top; }
.cinema-js [data-draw].is-drawn { transform: none; }

/* セクション番号の下に伸びる縦線（JSが差し込みます） */
.num-line {
  position: absolute;
  right: var(--gutter);
  top: calc(clamp(70px, 9vw, 110px) + clamp(56px, 11vw, 136px) + 18px);
  width: 1px;
  height: clamp(52px, 8vw, 96px);
  background: linear-gradient(180deg, var(--gold-400), transparent);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}


/* ============================================================
   ⑥ ふわりと浮く事業アイコン
   ------------------------------------------------------------
   ほんの数ピクセルだけ、ゆっくり上下します。
   3枚それぞれ速さを変えているので、揃って動いて見えません。
   ============================================================ */
.biz-card__icon { animation: icon-float 4.6s var(--ease-inout) infinite; }
.biz-card:nth-child(2) .biz-card__icon { animation-duration: 5.8s; animation-delay: -1.6s; }
.biz-card:nth-child(3) .biz-card__icon { animation-duration: 5.2s; animation-delay: -3.1s; }
@keyframes icon-float {
  0%, 100% { transform: translateY(-7px) rotate(-1.5deg); }
  50%      { transform: translateY(7px) rotate(1.5deg); }
}


/* ============================================================
   ⑪ 横から大きく飛び込んでくる（data-flyin）
   ------------------------------------------------------------
   data-flyin="left"  … 左から
   data-flyin="right" … 右から
   少し傾いた状態から、まっすぐに直りながら入ってきます。
   ============================================================ */
.cinema-js [data-flyin] {
  opacity: 0;
  transition:
    opacity 1.1s var(--ease-cinema),
    transform 1.35s var(--ease-cinema);
  will-change: transform, opacity;
}
.cinema-js [data-flyin="left"]  { transform: translateX(-96px) rotate(-3.5deg); }
.cinema-js [data-flyin="right"] { transform: translateX(96px) rotate(3.5deg); }
.cinema-js [data-flyin].is-flown { opacity: 1; transform: none; }


/* ============================================================
   ⑫ ぐいっと出る（data-pop）
   ------------------------------------------------------------
   小さい状態から、勢いよく等倍まで開きます。
   ============================================================ */
.cinema-js [data-pop] {
  opacity: 0;
  transform: scale(0.72) rotate(-2deg);
  transition:
    opacity 0.9s var(--ease-cinema),
    transform 1.15s var(--ease-cinema);
  will-change: transform, opacity;
}
.cinema-js [data-pop].is-popped { opacity: 1; transform: none; }


/* ============================================================
   ⑬ スクロールに合わせてゆっくりずれる（data-para）
   ------------------------------------------------------------
   スクロールしているあいだ、ずっと少しずつ動き続けます。
   「止まっている感じ」がなくなるので、画面が生きて見えます。
   実際に動かすのは JS 側です（translate を使うので、
   ほかの演出の transform とケンカしません）。
   ============================================================ */
[data-para] { will-change: translate; }


/* ============================================================
   ⑯ 見出しの英字のうしろに、日本語のラベルを足す
   ------------------------------------------------------------
   例）── BUSINESS  事業内容

   色の決め方はメニューバーに合わせています。
     ・英語 … 金（もともと金色なので、そのまま）
     ・日本語 … 本文と同じ色（明るい背景では紺、暗い背景ではクリーム）
   メニューバーが「日本語＝紺／英語＝金」なので、同じ組み合わせです。

   中身は JS が入れます（英語→日本語の対応表を持っています）。
   ============================================================ */
.sec-head__ja {
  /* 英字のあいだに隙間を入れない指定（gap:0）を打ち消して、
     ここだけ手前にしっかり余白をとります */
  margin-left: 16px;
  /* 英字は letter-spacing で右側にすき間ができるので、少し戻します */
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text);
  /* メニューバーの日本語は少し薄め（72%）なので、そこも合わせます */
  opacity: 0.78;
  /* 英字より少し大きいので、下の線をそろえます */
  line-height: 1;
  white-space: nowrap;
}
/* 英語と日本語のあいだに、細い仕切りを入れます */
.sec-head__ja::before {
  content: "";
  display: inline-block;
  width: 1px; height: 10px;
  margin-right: 14px;
  vertical-align: -1px;
  background: currentColor;
  opacity: 0.28;
}


/* ============================================================
   スマホでの調整
   ============================================================ */
@media (max-width: 700px) {
  .num-line { display: none; }
  /* 画面が狭いときは、日本語ラベルを英字の下に落とします */
  .sec-head__en { flex-wrap: wrap; }
  .sec-head__ja { margin-left: 0; margin-top: 8px; flex-basis: 100%; }
  .sec-head__ja::before { display: none; }
}


/* ============================================================
   動きを減らす設定にしている方への配慮
   ------------------------------------------------------------
   ここでも「消す」のではなく「控えめ版」にします。
   ・ぼかしは弱く、時間は短く
   ・流れる文字と回るバッジ、浮くアイコンは止める（見た目は残る）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cinema-js [data-focus] {
    filter: blur(5px);
    transform: none;
    transition-duration: 0.5s;
  }
  .cinema-js [data-beat] > *,
  .cinema-js table[data-beat] > tbody > tr {
    transform: none;
    transition-duration: 0.45s;
  }
  .cinema-js [data-draw] { transition-duration: 0.6s; }

  /* 横から飛び込む・ぐいっと開く は、その場でふわっと出るだけにします */
  .cinema-js [data-flyin],
  .cinema-js [data-pop] {
    transform: none;
    transition-duration: 0.5s;
  }
  /* スクロール連動のずれは JS 側でやめます */

  .biz-card__icon { animation: none !important; }
}


/* ============================================================
   ============================================================
   ここから下は「カードまわり」の動きです
   ============================================================
   ============================================================ */


/* ============================================================
   ⑦ カードが浮き上がる
   ------------------------------------------------------------
   ★大事なポイント（ここでハマったので残しておきます）★
   事業カードなどは、スクロール演出（GSAP）が要素に直接
   「transform」と「translate」を書き込んでいます。
   要素に直接書かれた指定は、通常このファイルの指定より強いので、
   ふつうに書くとホバーで動きません。
   （もともとあった transform でのホバーも、これで効かなくなっていました）

   そこで
     ・打ち消されない「translate」プロパティを使う
     ・さらに !important で、直接書き込みより強くする
   の2段構えにしています。

   transform ではなく translate を使うのは、
   GSAP の transform とケンカせず足し算になるためです。
   ============================================================ */
.biz-card,
.strength-item,
.area-card {
  transition:
    translate 0.6s var(--ease-cinema),
    border-color 0.6s var(--ease-out),
    box-shadow 0.6s var(--ease-out);
}
.biz-card:hover,
.biz-card:focus-within { translate: 0 -18px !important; }
.area-card:hover,
.area-card:focus-within { translate: 0 -9px !important; }

/* 事業カードの絵柄は、乗せたときだけ少し大きくなります */
.biz-card__icon { transition: scale 0.6s var(--ease-cinema), stroke 0.5s; }
.biz-card:hover .biz-card__icon { scale: 1.24; }

/* 強みカードは、上の罫線が金色に描き変わります */
.strength-item::after {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 100%; height: 1px;
  background: var(--gold-400);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.8s var(--ease-cinema);
}
.strength-item:hover { translate: 0 -11px !important; }
.strength-item:hover::after { transform: scaleX(1); }
/* 番号もすっと右へずれます */
.strength-item__num { transition: translate 0.7s var(--ease-cinema), color 0.5s; }
.strength-item:hover .strength-item__num { translate: 12px 0; }


/* ============================================================
   ⑧ ボタンの矢印が右へ抜けて、左から入ってくる
   ------------------------------------------------------------
   参考サイトの「View more」ボタンと同じ考え方です。
   もとの矢印が右へ消え、同じ矢印が左から入れかわります。
   ============================================================ */
.btn .arrow::after {
  transition: transform 0.55s var(--ease-cinema), opacity 0.4s var(--ease-out);
}
.btn .arrow::before {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  /* 先に左へずらしてから回すので、ななめではなく真横に動きます */
  transform: translateX(-16px) rotate(45deg);
  opacity: 0;
  transition: transform 0.55s var(--ease-cinema), opacity 0.4s var(--ease-out);
}
.btn:hover .arrow::after,
.btn:focus-visible .arrow::after { transform: translateX(16px) rotate(45deg); opacity: 0; }
.btn:hover .arrow::before,
.btn:focus-visible .arrow::before { transform: translateX(0) rotate(45deg); opacity: 1; }


/* ============================================================
   ⑨ 事業カードの「主役」が入れかわる
   ------------------------------------------------------------
   参考サイトでは、スクロールに合わせて背景の写真が
   1枚ずつ切り替わっていました。
   HARCには事業ごとの写真がないので、
   「金の光が、いま見ているカードの方へ動く」形にしています。

   ・パソコン … マウスを乗せたカードが主役
   ・スマホ   … 画面の真ん中にいちばん近いカードが主役
   ============================================================ */
.biz-grid { position: relative; }
.biz-grid::before {
  content: "";
  position: absolute; top: -8%; bottom: -8%; left: 0;
  width: var(--spot-w, 33%);
  background: radial-gradient(58% 56% at 50% 50%, rgba(198, 167, 104, 0.22), transparent 72%);
  opacity: 0;
  translate: var(--spot, 0px) 0;
  transition: opacity 0.7s var(--ease-out), translate 0.9s var(--ease-cinema), width 0.9s var(--ease-cinema);
  pointer-events: none;
  z-index: 0;
}
.biz-grid.is-spot::before { opacity: 1; }
.biz-card { z-index: 1; }

/* 主役以外は、そっと引きます。
   （カード自体の透明度はスクロール演出が使っているので、
     ぶつからないように「中身」の方をうすくします） */
.biz-card > * { transition: opacity 0.6s var(--ease-out); }
.biz-grid.is-spot .biz-card:not(.is-spot-on) > * { opacity: 0.42; }


/* ============================================================
   ⑩ ついてくるお問い合わせボタン
   ------------------------------------------------------------
   参考サイトの、画面のすみに残るボタンと同じ考え方です。
   下へスクロール中は引っこみ、上へ戻ると出てきます。
   （読んでいる最中は邪魔をせず、戻りたくなったら出てくる）
   ============================================================ */
.float-cta {
  position: fixed;
  right: clamp(14px, 2.2vw, 28px);
  bottom: clamp(14px, 2.2vw, 28px);
  z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--gold-grad);
  color: var(--navy-900);
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.14em;
  box-shadow: 0 12px 30px rgba(11, 20, 40, 0.32);
  /* ふだんは画面の外に隠しておきます */
  translate: 0 140%;
  opacity: 0;
  transition: translate 0.7s var(--ease-cinema), opacity 0.5s var(--ease-out);
}
.float-cta.is-in { translate: 0 0; opacity: 1; }
.float-cta__icon {
  position: relative; flex: none;
  width: 16px; height: 1px; background: currentColor;
}
.float-cta__icon::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.float-cta:hover { box-shadow: 0 16px 38px rgba(176, 143, 78, 0.42); }

@media (max-width: 700px) {
  .float-cta { padding: 12px 18px; font-size: 11px; }
}


/* ============================================================
   カードまわりも「控えめモード」に対応します
   ------------------------------------------------------------
   持ち上がりや光の移動はやめて、色の変化だけ残します。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .biz-card:hover,
  .biz-card:focus-within,
  .area-card:hover,
  .area-card:focus-within,
  .strength-item:hover { translate: none !important; }
  .biz-card:hover .biz-card__icon { scale: 1; }
  .strength-item:hover .strength-item__num { translate: none; }

  .btn .arrow::before,
  .btn .arrow::after,
  .biz-grid::before,
  .float-cta { transition-duration: 0.25s; }
}


/* ============================================================
   ============================================================
   ここから下は「文字の動き」です
   ============================================================
   ============================================================ */


/* ============================================================
   ⑭ 文字が縦にロールして出てくる（data-roll）
   ------------------------------------------------------------
   参考サイトの目玉の動きです。

   仕組みはスロットマシンと同じで、
   同じ文字を縦に4枚ならべて、細い窓からのぞかせています。
   窓の中で文字を上へ動かすと、同じ文字が何度も通りすぎて
   最後にピタッと止まる、という見え方になります。

       ┌──────┐ ← 窓（ここだけ見える）
       │ 光回線 │ 0%    ← もとの文字（幅を決める役）
       └──────┘
         光回線   100%  ← 控えの1枚目
         光回線   200%  ← 控えの2枚目（ここで着地）
         光回線   300%  ← 控えの3枚目（マウスを乗せたとき用）

   ・出るとき   … +100%（窓が空っぽ）→ -200%（3枚ぶん回って着地）
   ・乗せたとき … -300% へもう1枚ぶん回る
   ============================================================ */
.roll {
  display: inline-flex;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.3;
}
.roll__in {
  position: relative;
  display: inline-block;
  line-height: 1.3;
  transition: transform 1.05s var(--ease-cinema);
  will-change: transform;
}
/* 控えの文字。もとの文字の下にきれいに積みます */
.roll__c {
  position: absolute; left: 0;
  display: inline-block;
  white-space: pre;
  line-height: 1.3;
}

/* JSが動いているときだけ、いったん窓の外へ隠す */
.cinema-js .roll__in { transform: translateY(100%); }
/* 画面に入ったら、回して着地 */
.cinema-js .roll.is-rolled .roll__in { transform: translateY(-200%); }
/* 動き終わったら端末の負担を減らす */
.cinema-js .roll.is-rolled.is-parked .roll__in { will-change: auto; }

/* マウスを乗せると、もう1枚ぶん回る（カードや見出しの中の文字） */
.cinema-js .biz-card:hover .roll.is-rolled .roll__in,
.cinema-js .strength-item:hover .roll.is-rolled .roll__in,
.cinema-js .area-card:hover .roll.is-rolled .roll__in,
.cinema-js .harc-item:hover .roll.is-rolled .roll__in {
  transform: translateY(-300%);
}


/* ============================================================
   ⑮ 単語が自動で入れ替わる（data-cycle）
   ------------------------------------------------------------
   参考サイトの「story of ［会社名がどんどん変わる］」と同じ動きです。

   data-cycle="お問い合わせ|採用エントリー" のように
   縦棒で区切って書くと、順番に入れ替わります。

   高さは1行ぶんに固定して、中身を1行ずつ上へずらしています。
   ============================================================ */
.cyc {
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
  vertical-align: bottom;
  line-height: 1.3;
}
.cyc__in {
  display: block;
  /* --i が 0,1,2... と変わるたびに1行ぶん上へ動きます */
  transform: translateY(calc(var(--i, 0) * -1.3em));
  transition: transform 0.9s var(--ease-cinema);
  will-change: transform;
}
.cyc__w {
  display: block;
  height: 1.3em;
  line-height: 1.3;
  white-space: nowrap;
}


/* ============================================================
   文字の動きも「控えめモード」に対応します
   ------------------------------------------------------------
   ・ロールは回さず、その場でふわっと出るだけにします
   ・自動の入れ替えは JS 側で止めます（最初の単語のまま）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cinema-js .roll { overflow: visible; }
  .cinema-js .roll__in,
  .cinema-js .roll.is-rolled .roll__in { transform: none; }
  .cinema-js .biz-card:hover .roll.is-rolled .roll__in,
  .cinema-js .strength-item:hover .roll.is-rolled .roll__in,
  .cinema-js .area-card:hover .roll.is-rolled .roll__in,
  .cinema-js .harc-item:hover .roll.is-rolled .roll__in { transform: none; }
  /* 控えの文字は見えてしまうので隠します */
  .cinema-js .roll__c { display: none; }

  .cyc__in { transition-duration: 0.3s; }
}