@charset "UTF-8";
/* 案A+（リッチ版）— ページデザイン一式
   対象: a2.html のみ（UIkit style.css は読み込まない前提＝最小リセットを自前で持つ）
   前提: base.css が :root の easing 変数・--tw-blue・.hero__stage / .hero__fallback /
         .hero__wordmark / .hero__hint の土台と @keyframes tw-hero-in を定義済み。
   ルール: base.css は編集せず、必要な差分は .rh スコープの上書きで行う。
           ドロップシャドウは使わない（立体感は面の色差・1pxボーダー・3D描画で出す）。
   3D描画（canvas）は hero-a2.css / hero-a2.js の担当。ここでは触らない。 */

/* ===============================================================
   0. トークン & 最小リセット
   =============================================================== */
.rh {
  /* ヒーローのステージはリッチ版で少し大きく見せる（base.css の 520px を上書き） */
  --hero-stage-w: min(560px, 80vw);

  /* 面 */
  --rh-dark-1: #0a0e13;
  --rh-dark-2: #10161d;
  --rh-dark-3: #131a22;
  --rh-surface: #ffffff;
  --rh-surface-alt: #f5f7f9;
  --rh-footer-bg: #0e141b;

  /* 文字 */
  --rh-text: #26313b;
  --rh-heading: #10161d;
  --rh-text-dark-face: #c7d1da;
  --rh-text-dark-sub: #93a3b1;
  --rh-blue-deep: #0f6bb0;
  --rh-border: #e3e8ec;

  /* レイアウト */
  --rh-container: 1040px;
  --rh-gutter: 24px;
  --rh-section-y: 104px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* JS有効時だけスムーススクロール（reduced-motion では base.css が auto に戻す） */
html.js {
  scroll-behavior: smooth;
}

body.rh {
  margin: 0;
  background: var(--rh-surface);
  color: var(--rh-text);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* リセットは :where() で詳細度0にする。
   （.rh p のような詳細度で書くと、後段の .rh-hero__catch 等の margin を打ち消してしまう） */
:where(.rh) :where(h1, h2, h3, p, table, figure) {
  margin: 0;
}

:where(.rh) :where(ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.rh) :where(img) {
  max-width: 100%;
}

:where(.rh) :where(a) {
  color: inherit;
}

/* フォーカスリングは面ごとに色を分ける（非テキストコントラスト3:1以上）:
   ライト面 #0f6bb0（白に対し5.6:1）／ダーク面 #7cc4ff（#10161dに対し9.7:1） */
.rh :focus-visible {
  outline: 2px solid #0f6bb0;
  outline-offset: 3px;
}

.rh-hero :focus-visible,
.rh-footer :focus-visible,
.tw-switch :focus-visible {
  outline-color: #7cc4ff;
}

.rh-container {
  width: 100%;
  max-width: var(--rh-container);
  margin: 0 auto;
  padding: 0 var(--rh-gutter);
}

/* ===============================================================
   1. ヒーロー（ダーク金属スタジオ）
   =============================================================== */
.rh-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(600px, 92vh, 900px);
  /* 1440×900 でスクロールキューまでほぼ収まる高さに詰める */
  padding: clamp(40px, 6vh, 72px) var(--rh-gutter) clamp(32px, 4.5vh, 56px);
  /* 背景色は単色で持ち、グラデは ::before に置く
     （文字の背面が常に既知の単色＝コントラスト実測が計算可能になる） */
  background-color: var(--rh-dark-2);
}

/* 縦グラデ #0a0e13 → #10161d → #131a22 ＋ ステージ背後の極薄い明部 */
.rh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(58% 44% at 50% 41%, rgba(150, 180, 210, 0.10) 0%, rgba(150, 180, 210, 0.035) 52%, rgba(150, 180, 210, 0) 78%),
    linear-gradient(180deg, var(--rh-dark-1) 0%, var(--rh-dark-2) 55%, var(--rh-dark-3) 100%);
  pointer-events: none;
}

.rh-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--rh-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ステージ中心の締まった明部（fallback PNG がダーク上でも読めるようにする）。
   背景は子（img / canvas）より下に描かれるので 3D 描画の邪魔をしない。 */
.rh .hero__stage {
  background-image: radial-gradient(
    circle at 50% 47%,
    rgba(150, 180, 210, 0.055) 0%,
    rgba(150, 180, 210, 0.02) 55%,
    rgba(150, 180, 210, 0) 78%
  );
}

/* ワードマーク（黒文字PNG）はダーク面用に白へ反転する */
.rh .hero__wordmark {
  width: min(540px, 78vw);
  margin: 34px auto 0;
}

.rh .hero__wordmark img {
  filter: invert(1);
}

/* --- ワードマークのシャイン（光沢が1回だけ左→右に横切る） ---
   グリフは invert(1) で純白＝これ以上明るくできない。そこで「白のまま残す芯」の両脇だけを
   ヒーローの面色（--rh-dark-2 = #10161d）でわずかに沈ませた帯を走らせ、鏡面反射が横切ったように見せる。
   帯はワードマークPNGのアルファ（黒グリフ／透明率51.2%のRGBA）で文字型に切り抜くので文字の外には一切かからない。
   ドロップシャドウは使わない（面の明度差だけで作る）。
   アニメーション終了後は帯が文字の右外へ抜けて完全に透明＝静止状態は改修前と1pxも変わらない。

   自動再生の総時間: ワードマークのフェードアップ（base.css = delay 0.15s + 0.9s ＝ 1.05s で終了）
   → その直後にシャイン delay 1.05s + duration 1.05s ＝ 2.10s で全停止。
   ページ内の他の自動再生（キャッチ 1.22s / スクロールキュー 1.35s）より遅いのでこれが最長＝
   総自動動作 2.10s < 5s ＝ WCAG 2.2.2 を満たす（ループ・無限アニメーションは無し）。

   マスクは url("../img/wordmark.png") ではなく data URI で持つ。
   Chromiumはマスク画像にオリジン制限をかけるため file:// で開くとファイル参照のマスクは読み込めず
   （CORS: "Cross origin requests are only supported for protocol schemes: chrome, data, http, https"）、
   ローカル確認時だけ演出が出ない状態になる。data URI ならどの経路でも必ず動く。
   中身は assets/img/wordmark.png と同一バイト列。差し替えた時は
   `openssl base64 -A -in assets/img/wordmark.png` の出力で下の base64 を置き換える。 */
.rh .hero__wordmark {
  position: relative; /* ::after の位置基準。static → relative でレイアウトは動かない */
  --rh-wordmark-mask: url("data:image/png;base64,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");
}

/* mask が使えない環境では ::after ごと生成しない
   （生成してしまうと帯が文字型に切り抜かれず、矩形の影が横切って見える） */
@supports ((-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYGBgAAAABQABeqhXUAAAAABJRU5ErkJggg==")) or (mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYGBgAAAABQABeqhXUAAAAABJRU5ErkJggg=="))) {
  .js .rh .hero__wordmark::after {
    content: "";
    position: absolute;
    inset: 0; /* h1 の箱＝img の箱（img は display:block / width:100%）なのでマスクは等倍で一致する */
    pointer-events: none;
    /* 中央（50%）だけ透明＝白いまま残る芯。その両脇を沈ませて光の帯に見せる */
    background-image: linear-gradient(
      105deg,
      rgba(16, 22, 29, 0) 44%,
      rgba(16, 22, 29, 0.5) 47.5%,
      rgba(16, 22, 29, 0) 50%,
      rgba(16, 22, 29, 0.5) 52.5%,
      rgba(16, 22, 29, 0) 56%
    );
    background-repeat: no-repeat;
    background-size: 250% 100%;
    /* background-position の % は「画像のX%を要素のX%に合わせる」＝値が大きいほど帯は左へ寄る。
       幅250%の背景では 100% ＝ 帯の中心が文字の左外（-25%）、0% ＝ 右外（+125%）＝文字にはどこにもかからない。
       300%まで広げると移動距離が伸びて「動いているのに何も見えない時間」が増える。実測して250%に詰めてある。 */
    background-position: 0% 0;
    -webkit-mask-image: var(--rh-wordmark-mask);
    mask-image: var(--rh-wordmark-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    /* 見えている区間をほぼ等速で通すため、この演出だけ ease-in-out 寄りの曲線を使う */
    animation: tw-wordmark-shine 1.05s cubic-bezier(0.42, 0, 0.32, 1) 1.05s 1 both;
  }
}

@keyframes tw-wordmark-shine {
  from { background-position: 100% 0; } /* 帯は文字の左外 */
  to { background-position: 0% 0; } /* 帯は文字の右外＝改修前と同じ静止状態に戻る */
}

/* 表示条件（html.js.hero-a-on ほか）のロジックは base.css のまま。色だけダーク面用に上書き */
.rh .hero__hint {
  margin: 20px 0 0;
  color: var(--rh-text-dark-sub); /* #10161d に対し 7.0:1 */
}

.rh-hero__catch {
  margin: 26px 0 0;
  max-width: 40em;
  font-size: clamp(16px, 1.25vw, 17px);
  line-height: 2;
  letter-spacing: 0.06em;
  text-wrap: balance; /* 未対応ブラウザでは無視されるだけ */
  color: var(--rh-text-dark-face); /* #10161d に対し 12.6:1 */
}

/* スクロールキュー。動きは付けない（静的）＝自動で動き続けるものを作らない */
.rh-scroll {
  display: inline-flex;
  flex-direction: column-reverse; /* DOM順は 線→文字。見た目は 文字→線（線は下に伸びる） */
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 4vh, 52px);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  color: #8fa3b4; /* #10161d に対し 6.8:1 */
  text-decoration: none;
  transition: color 0.35s var(--ease-out-quint);
}

.rh-scroll__line {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, #3a4754 0%, rgba(58, 71, 84, 0) 100%);
  transition: background 0.35s var(--ease-out-quint);
}

@media (hover: hover) {
  .rh-scroll:hover {
    color: #d3dee6;
  }

  .rh-scroll:hover .rh-scroll__line {
    background: linear-gradient(180deg, #6c7f90 0%, rgba(108, 127, 144, 0) 100%);
  }
}

/* ロード直後の自動再生フェードイン（IO発火にしない＝LCP保護）。
   .hero__wordmark は base.css の .js .hero__wordmark が担当。
   base.css の .js .hero .catch は .hero 配下前提で a2.html には効かないため、ここで定義する。 */
.js .rh-hero__catch {
  animation: tw-hero-in 0.9s var(--ease-out-expo) 0.32s both;
}

.js .rh-scroll {
  animation: tw-hero-in 0.8s var(--ease-out-expo) 0.55s both;
}
/* ロード後の自動演出は 0.55s + 0.8s = 1.35s で完全静止する */

/* ===============================================================
   2. セクション共通
   =============================================================== */
.rh-section {
  padding: var(--rh-section-y) 0;
  scroll-margin-top: 56px; /* テスト用切替バー（sticky）に見出しが隠れないように */
}

/* SPでは切替バーが3行に折り返して約150pxになる（テスト公開中のみの事情） */
@media (max-width: 767px) {
  .rh-section {
    scroll-margin-top: 170px;
  }
}

.rh-section--alt {
  background: var(--rh-surface-alt);
}

.rh-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rh-blue-deep); /* #fff に対し 5.4:1 / #f5f7f9 に対し 5.2:1 */
}

/* ブランドの三角形をラベルの目印として小さく添える */
.rh-label::before {
  content: "";
  flex: none;
  width: 9px;
  height: 8px;
  background: var(--tw-blue);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.rh-h2 {
  margin: 10px 0 40px;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--rh-heading);
}

/* ===============================================================
   3. SERVICES（事業内容カード）
   =============================================================== */
.rh-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .rh-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .rh-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rh-card {
  position: relative; /* NEWチップの絶対配置基準 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 24px;
  background: var(--rh-surface);
  border: 1px solid var(--rh-border);
  border-radius: 14px;
  /* ホバーの移動は transform ではなく translate を使う
     （リビールの transform と競合させないため） */
  transition: translate 0.4s var(--ease-out-quint), border-color 0.4s var(--ease-out-quint);
}

.rh-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(20, 121, 196, 0.09);
  color: var(--rh-blue-deep);
}

.rh-card__icon svg {
  display: block;
}

.rh-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: #1c2630; /* #fff に対し 13.9:1 */
}

/* NEWチップ: カード右上に絶対配置（タイトルの折返しに巻き込まれないように） */
.rh-new {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #0e639f;
  color: #fff; /* #0e639f に対し 6.4:1 */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* SPだけに効かせるキャッチの改行 */
.rh-br-sp {
  display: none;
}

@media (max-width: 480px) {
  .rh-br-sp {
    display: inline;
  }
}

@media (hover: hover) {
  .rh-card:hover {
    translate: 0 -4px;
    border-color: var(--tw-blue);
  }
}

/* ===============================================================
   4. COMPANY（会社概要テーブル）
   =============================================================== */
.rh-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.rh-table tr {
  border-bottom: 1px solid var(--rh-border);
}

.rh-table tr:first-child {
  border-top: 1px solid var(--rh-border);
}

.rh-table th {
  width: 9em;
  padding: 18px 20px 18px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.06em;
  text-align: left;
  vertical-align: top;
  color: #5a6672; /* #f5f7f9 に対し 5.5:1 */
  white-space: nowrap;
}

.rh-table td {
  padding: 18px 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--rh-text); /* #f5f7f9 に対し 11.4:1 */
  vertical-align: top;
  overflow-wrap: anywhere;
}

.rh-tel {
  color: var(--rh-blue-deep); /* #f5f7f9 に対し 5.2:1 */
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.35s var(--ease-out-quint);
}

@media (hover: hover) {
  .rh-tel:hover {
    color: #0a4d80;
  }
}

/* タッチ端末では電話リンクを44px角以上のターゲットにする */
@media (hover: none) {
  .rh-tel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
}

/* ===============================================================
   5. フッター
   =============================================================== */
.rh-footer {
  padding: 40px 0;
  background: var(--rh-footer-bg);
  text-align: center;
}

.rh-footer small {
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: #aab6c0; /* #0e141b に対し 9.0:1 */
}

/* ===============================================================
   6. スクロールリビール（html.js ゲート＝JSなしでは全部見えたまま）
   =============================================================== */
.js .js-reveal,
.js .js-reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out-quint), transform 0.8s var(--ease-out-quint);
  transition-delay: var(--reveal-delay, 0s);
}

/* カードはホバーの translate / border-color も併せて宣言する
   （transition ショートハンドが上書きされてホバーが瞬間移動になるのを防ぐ） */
.js .rh-cards.js-reveal-group > .rh-card {
  transition: opacity 0.8s var(--ease-out-quint), transform 0.8s var(--ease-out-quint),
    translate 0.4s var(--ease-out-quint), border-color 0.4s var(--ease-out-quint);
  transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s, 0s;
}

.js .js-reveal.is-inview,
.js .js-reveal-group.is-inview > * {
  opacity: 1;
  transform: none;
}

/* ===============================================================
   7. レスポンシブ
   =============================================================== */
@media (max-width: 767px) {
  .rh {
    --rh-section-y: 64px;
  }

  .rh-hero {
    min-height: 0;
    padding: 56px var(--rh-gutter) 64px;
  }

  .rh-h2 {
    margin-bottom: 28px;
  }
}

@media (max-width: 639px) {
  .rh-card {
    padding: 22px 20px;
  }

  /* テーブルは th / td を縦積みにする */
  .rh-table,
  .rh-table tbody,
  .rh-table tr,
  .rh-table th,
  .rh-table td {
    display: block;
    width: auto;
  }

  .rh-table tr {
    padding: 16px 0;
  }

  .rh-table th {
    padding: 0;
    white-space: normal;
  }

  .rh-table td {
    padding: 4px 0 0;
  }
}

@media (max-width: 360px) {
  .rh {
    --rh-gutter: 18px;
  }
}

/* ===============================================================
   8. reduced-motion（このファイルで使った全セレクタを止める）
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .js-reveal,
  .js .js-reveal-group > *,
  .js .rh-cards.js-reveal-group > .rh-card {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    transition: none !important;
    animation: none !important;
  }

  .js .rh-hero__catch,
  .js .rh-scroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ワードマークのシャインは要素ごと消す（帯を一切描かない＝静止状態は通常時と同一） */
  .js .rh .hero__wordmark::after {
    display: none !important;
    animation: none !important;
  }

  .rh-card,
  .rh-card:hover,
  .rh-scroll,
  .rh-scroll__line,
  .rh-tel {
    transition: none !important;
    animation: none !important;
  }

  .rh-card:hover {
    translate: none !important;
  }

  html.js {
    scroll-behavior: auto !important;
  }
}