@charset "UTF-8";
/* トライアングルワークス — ヒーロー共通土台
   既存 style.css（UIkit）の後に読み込む。各案の演出は hero-{a,b,c}.css が担当する。 */

:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --tw-blue: #1479c4;
  --hero-stage-w: min(520px, 78vw);
}

/* ---- ヒーロー土台 ---- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 演出ステージ。各案は .hero__stage の中に canvas / レイヤーを足す。
   高さは幅から比率固定（513:439）で決め、JS有無でレイアウトが動かないようにする。 */
.hero__stage {
  position: relative;
  width: var(--hero-stage-w);
  aspect-ratio: 513 / 439;
  margin: 0 auto;
  touch-action: manipulation;
}

/* LCP候補。JSの有無・reduced-motionに関わらず必ず描画される（§0-5 LCP保護） */
.hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hero__stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ワードマーク（社名）。ロゴ画像から分離した実データを使う */
.hero__wordmark {
  width: min(660px, 86vw);
  margin: 8px auto 0;
}

.hero__wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

/* JS有効時のみ、ワードマークとキャッチをロード直後に自動再生で出す（IO発火にしない＝LCP保護） */
.js .hero__wordmark {
  animation: tw-hero-in 0.9s var(--ease-out-expo) 0.15s both;
}

.js .hero .catch {
  animation: tw-hero-in 0.9s var(--ease-out-expo) 0.32s both;
}

@keyframes tw-hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* 操作ヒント。演出が実際に動いている時だけ出す。
   JSが無い・WebGLが取れない・reduced-motion のときに出すと「クリックしても何も起きない」案内になるため、
   各案が描画に成功して付ける稼働クラス（A=html.hero-a-on／B=.hero__stage.hb-on／C=.hero__stage.is-gl）を条件にする。
   :has() 非対応ブラウザでは非表示のまま＝案内が嘘にならない安全側に倒れる。 */
.hero__hint {
  margin: 14px 0 0;
  font-size: 14px; /* 本文最小サイズ規範（14px）に合わせる */
  line-height: 1.6;
  color: #6b7280; /* 白背景に対し4.8:1（4.5:1以上を満たす） */
  text-align: center;
  letter-spacing: 0.04em;
  display: none;
}

.js.hero-a-on .hero__hint,
.js:has(.hero__stage.hb-on) .hero__hint,
.js:has(.hero__stage.is-gl) .hero__hint {
  display: block;
  animation: tw-hero-in 0.9s var(--ease-out-expo) 0.5s both;
}

/* ---- 事業内容リスト（テーブル内・既存の<br>羅列を置き換え） ---- */
.biz-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.biz-list li {
  position: relative;
  padding-left: 1.1em;
  line-height: 1.9;
}

.biz-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 6px;
  height: 6px;
  background: var(--tw-blue);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.biz-list li.is-new {
  font-weight: 700;
}

/* ---- reduced-motion（各案のCSSにも案固有セレクタを追記する） ---- */
@media (prefers-reduced-motion: reduce) {
  .js .hero__wordmark,
  .js .hero .catch {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* reduced-motion では3案とも波紋を出さない＝ヒント文は常に非表示にする（案内と挙動を一致させる） */
  .hero__hint,
  .js.hero-a-on .hero__hint,
  .js:has(.hero__stage.hb-on) .hero__hint,
  .js:has(.hero__stage.is-gl) .hero__hint {
    display: none !important;
    animation: none !important;
  }
  html { scroll-behavior: auto !important; }
}