@charset "UTF-8";
/* =====================================================================
   Reality 1 & 2 & 3 カウントアップ 専用CSS（クリーン完全版）
   ・common.css とは別ファイル。/themes/wp001j/reality-countup.css に置く。
   ・header.php で common.css の後に読み込む。
   ・画像は同フォルダからの相対パス img/... を参照。
   ・★印は微調整ポイント。
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&family=Noto+Sans+JP:wght@400;700;900&display=swap");
/* ===================== 共通 ===================== */
.zk-realities{
  --bg-1:    url("img/cloud.png");
  --front-1: url("img/master.png");
  --red:#FA4C45;
  --teal:#2FBDC6;
  --ink:#1f2328;
  --muted:#8a9199;
  font-family:'Inter','Noto Sans JP',sans-serif;
  color:var(--ink);
  /* ★移植先の本文カラムに合わせる：中央寄せ(max-width)をやめ、記事一覧と同じ左右パディングで
     固定サイドバーを避ける。--layout-margin / --pr は移植先テーマの :root で定義済み。
     （変数が無い環境では 24px にフォールバック） */
  max-width:none;
  margin:0;
  padding:24px var(--pr, 24px) 24px var(--layout-margin, 24px);
  box-sizing:border-box;
}
.zk-realities *{box-sizing:border-box;}
.zk-card{
  background:#fff;
  border:1px solid #eceef0;
  border-radius:16px;
  box-shadow:0 18px 40px -24px rgba(20,40,60,.18);
  padding:40px 44px;
}
.zk-row{
  display:grid;
  grid-template-columns:300px 1px 1fr;
  gap:40px;
  align-items:center;
}
.zk-divider{background:#e6e8ea;width:1px;height:78%;align-self:center;}
.zk-reality{font-family:'Inter',sans-serif;font-weight:700;color:var(--teal);font-size:18px;letter-spacing:.06em;margin-bottom:12px;}
.zk-reality b{font-size:1.15em;margin-left:3px;}
.zk-title{font-family:'Noto Sans JP',sans-serif;font-size:36px;font-weight:700;letter-spacing:.02em;margin:0 0 18px;line-height:1.4;color:#111;}   /* ★移植先の見出し(.sec-ttl 3.6rem=36px)に合わせた */
.zk-desc{font-family:'Noto Sans JP',sans-serif;font-size:16px;line-height:1.8;color:var(--muted);margin:0;}   /* ★移植先の本文(1.6rem=16px / line-height1.8)に合わせた */
.zk-visual{
  position:relative;
  width:100%;
  max-width:740px;
  aspect-ratio: 986 / 498;
  margin:0 auto;
  --ground-top: 80%;
}
.zk-bg{
  position:absolute;inset:0;z-index:0;
  background-image:var(--bg-1);
  background-size:contain;background-position:top center;background-repeat:no-repeat;
}
.zk-stat{
  position:absolute;
  left:31%;
  top:15%;
  z-index:1;
  display:flex;
  align-items:flex-start;
  line-height:1;
  white-space:nowrap;
  flex-wrap:nowrap;
}
.zk-unit{white-space:nowrap;}
.zk-count-mask{
  overflow:hidden;
  display:inline-block;
  vertical-align:bottom;
  contain:paint;
  padding-right:1.14em;
}
.zk-count{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:220px;
  line-height:1;
  color:var(--red);
  letter-spacing:-.09em;
  font-variant-numeric:tabular-nums;
  display:inline-block;
  vertical-align:bottom;
  transform:translateY(120%);
  transition:transform 1.5s cubic-bezier(.2,.8,.2,1);
}
.zk-visual.zk-go .zk-count{transform:translateY(0);}
.zk-unit-mask{overflow:hidden;display:inline-block;vertical-align:bottom;margin:16px 0 0 0px;padding:0.14em 12px 2px 0;}
.zk-unit{
  font-family:'Noto Sans JP',sans-serif;font-weight:900;
  font-size:78px;line-height:1;color:var(--red);letter-spacing:-.04em;
  display:inline-block;vertical-align:bottom;
  transform:translateY(170%);opacity:0;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .5s ease;
}
.zk-unit.is-in{transform:translateY(0);opacity:1;}
.zk-ground{
  position:absolute;
  left:28%;right:16%;
  top:var(--ground-top);bottom:0;
  z-index:2;
  background:#fff;
  pointer-events:none;
}
.zk-front{
  position:absolute;z-index:3;left:20%;bottom:0;
  width:70%;height:54%;
  background-image:var(--front-1);
  background-size:contain;background-position:bottom center;background-repeat:no-repeat;
  pointer-events:none;
}
@media(max-width:860px){
  .zk-card{padding:28px 22px;}
  .zk-row{grid-template-columns:1fr;gap:18px;}
  .zk-divider{display:none;}
  .zk-count{font-size:120px;}
  .zk-unit{font-size:44px;}
  .zk-unit-mask{margin-top:12px;}
}
/* ===================== 移植先 #sect01 の .flame に埋め込む用 =====================
   移植先の「3つの現実」セクション(#sect01)の各 .flame の静止画を、
   このアニメ視覚部に差し替えるときに使う。
   ・.zk-embed … .zk-realities のコンテナ余白/幅をリセットして flame いっぱいに
   ・#sect01 .flame … flex で幅を確保（アニメ枠がつぶれないように） */
.zk-embed{ max-width:none; margin:0; padding:0; width:100%; }
.zk-embed .zk-visual{ max-width:none; width:100%; margin:0; }
/* ★PC時（768px以上）のみ：テキストを狭く・右ビジュアルを広く（区切り線を左へ）。
   SPは移植先の「縦積み（テキスト全幅→下にビジュアル）」に任せるため、ここでは上書きしない。 */
@media screen and (min-width:768px){
  #sect01 .liBox .flame{ flex:1; min-width:0; }
  #sect01 .liBox .txtArea{ width:32%; }   /* ★右をもっと広くするなら % を下げる */
}

/* 埋め込み時は数字を「枠(.zk-visual)の幅に比例」させる（cqw = 枠幅に対する%）。
   ★数字がまだ大きい/小さいときは各 cqw 値を増減する。 */
.zk-embed:not(.zk3) .zk-visual{ container-type: inline-size; }
/* Reality 1 */
.zk-embed:not(.zk3) .zk-count{ font-size: 34cqw; }     /* 79 */
.zk-embed:not(.zk3) .zk-unit{ font-size: 11cqw; }      /* 万人 */
/* Reality 2 */
.zk-embed.zk2 .zk-count{ font-size: 17cqw; letter-spacing: -0.9cqw; }  /* 12.4〜14.5 */
.zk-embed.zk2 .zk2-tilde{ font-size: 9.5cqw; }         /* 〜 */
.zk-embed.zk2 .zk2-unit{ font-size: 6cqw; }            /* 万人 */
.zk-embed.zk2 .zk2-stat > .zk-count-mask{ top: 4.5cqw; left: -13cqw; }  /* 万人位置 */

/* Reality 3：サブキャッチ「インド市場」を通常配置(static)にして円の“上”に置く。
   移植先では .catch が position:absolute（静止画に重ねる前提）で、円アニメの裏に潜って
   重なるため、ここで通常フローに戻す＝重なり解消。 */
#sect01 .liBox:last-child .catch{
  position: static;
  left: auto;
  margin: 0 0 2rem;          /* ★キャッチと円の間隔 */
  display: inline-block;     /* 下線(border-bottom)を文字幅に収める */
}
.zk-embed.zk3{ margin-top: 0; }             /* キャッチが場所を取るので余分な下げは不要 */
.zk-embed.zk3 .zk-count{ font-size: 68px; } /* ★円に対する数字の大きさ（PC） */

/* ★SP（767px以下）：R3を段違い（三角）配置に。84.7を上・中央、5.8左下・985右下。
   grid だと崩れたので flex(折り返し) で確実に3個並べる。 */
@media screen and (max-width:767px){
  /* grid で三角形に明示配置：84.7=上段中央（2列ぶち抜き）、5.8=左下、985=右下 */
  .zk-embed.zk3 .zk3-cards{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4%;
    align-items: start;
  }
  /* ▽ 逆三角形：5.8=上左、985=上右、84.7=下中央（上に食い込ませて詰める） */
  .zk-embed.zk3 .zk3-c1{grid-column: 1;grid-row: 1;width: 105%;}  /* 5.8 上・左 */
  .zk-embed.zk3 .zk3-c3{grid-column: 2;grid-row: 1;width: 105%;}  /* 985 上・右 */
  .zk-embed.zk3 .zk3-c2{
    grid-column: 1 / 3;
    grid-row: 2;   /* 下段・2列ぶち抜き＝中央 */
    justify-self: center;
    width: 55%;  /* ★84.7 の大きさ（少し小さく） */
    margin-top: -16%;                  /* ★上に食い込ませる量。マイナスを増やすほど上へ詰まる */
    position: relative;
    z-index: 2;
  }
  .zk-embed.zk3 .zk-count{ font-size: 38px; }   /* ★数字（もう少し小さく） */
  .zk-embed.zk3 .zk3-label{ font-size: 11px; }
  .zk-embed.zk3 .zk3-unit{ font-size: 13px; }
}

/* ===================== Reality 2 ===================== */
.zk-realities.zk2{ --bg-1: url("img/men.png"); }
.zk2-visual{ aspect-ratio: 1015 / 571; }   /* ★men.png の比率 */
.zk2 .zk-bg{ background-size: contain; background-position: center; }
/* 上部装飾（人型＋赤い下矢印）= upper.png */
.zk2-upper{
  position:absolute;
  z-index:1;
  top: 3%;
  right: 5%;
  width: 50%;
  aspect-ratio: 409 / 295;   /* ★upper.png の比率 */
  background: url("img/upper.png") no-repeat top right / contain;
  pointer-events:none;
}
/* 数字ブロック（12.4 〜 14.5 万人） */
.zk2-stat{
  left: 24%;                 /* ★左右位置 */
  top: auto;
  bottom: 43%;    /* ★下端の高さ */
  align-items: flex-end;     /* 下ぞろえ */
}
.zk2 .zk-count{
  color: var(--teal);
  font-size: 114px;           /* ★数字サイズ（正体にしたぶん枠に収まるよう小さめ） */
  letter-spacing: -6px;      /* ★文字の詰まり具合（マイナスで詰まる） */
}
/* 「.4」「.5」の小数の数字だけ小さく（点は .zk-dot で別指定） */
.zk2 .zk-dec{font-size: 0.76em;}   /* ★整数に対する小数の数字の比率 */
/* 小数点「.」だけ：少し小さく（長体をやめたので scaleX は不要） */
.zk2 .zk-dot{
  display:inline-block;
  font-size:.55em;               /* ★点の大きさ（小さめ） */
}
/* Reality2 の窓：右余白は小さめ。下は万人用に確保 */
.zk2 .zk-count-mask{
  padding-right: 4px;     /* ★右が切れるなら増やす */
  padding-bottom: 3px;    /* ★下が切れるなら増やす（万人の下対策） */
}
/* 数字ラッパー（正体：長体scaleXと詰めmargin-rightは解除）
   再び長体にしたいときは transform:scaleX(.7) と margin-right:マイナス を戻す */
.zk2-squeeze{
  display:inline-flex; align-items:flex-end;
  transform: none;
  margin-right: 0;
}
/* 「万人」だけ位置調整（数字の直下の子＝万人マスクを狙い撃ち） */
.zk2-stat > .zk-count-mask{
  align-self: flex-end;
  position: relative;
  top: 31px;                     /* ★下げ幅。増やすほど下がる */
  left: -86px;
}
/* 〜（チルダ）：数字と一緒にせり上がる */
.zk2-rise{
  display:inline-block; vertical-align:bottom;
  transform: translateY(120%);
  transition: transform 1.5s cubic-bezier(.2,.8,.2,1);
}
.zk2-visual.zk-go .zk2-rise{ transform: translateY(0); }
.zk2-tilde{
  color: var(--teal);
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size: 43px;
  line-height: 2.5;
  letter-spacing:-.02em;
  margin: 0 .02em;
}
/* 万人（テキスト）：Reality1同様、カウント完了後に下から出る。
   出現は .zk-unit の仕組み(translateY＋opacity＋is-in)に任せ、
   ここでは色・書体・サイズだけ上書き（transform/opacityは書かない）。 */
.zk2-unit{
  color:var(--teal);
  font-family:'Noto Sans JP',sans-serif;
  font-weight:900;
  font-size: 42px;
  line-height:1;
  letter-spacing: -0.04em;   /* ★大きさ調整 */
  margin-left: 2px;
}
/* ドーナツ（0→3.8%）：一旦非表示。戻すときは display:none の行を削除 */
.zk2-donut{
  display:none;               /* ★重なる円グラフを一旦非表示 */
  position:absolute; z-index:2;
  right: 12%; top: 56%;       /* ★men.png のドーナツ位置 */
  width: 8%; aspect-ratio: 1 / 1;
  pointer-events:none;
}
.zk2-donut svg{ width:100%; height:100%; display:block; transform: rotate(-90deg); }
.zk2-donut .zk2-donut-bg{ fill:#fff; }
.zk2-donut .zk2-donut-track{ fill:none; stroke:#e9ecef; stroke-width:9; }
.zk2-donut .zk2-donut-arc{
  fill:none; stroke:var(--red); stroke-width:9; stroke-linecap:round;
  stroke-dasharray: 263.9;
  stroke-dashoffset: 263.9;
  transition: stroke-dashoffset 1.5s cubic-bezier(.2,.8,.2,1);
}
.zk2-visual.zk-go .zk2-donut-arc{ stroke-dashoffset: 253.87; }
@media(max-width:860px){
  .zk2 .zk-count{ font-size:58px; }
  .zk2-tilde{ font-size:34px; }
  .zk2-unit{ font-size:32px; }
}
/* ===================== Reality 3 =====================
   海外高度IT人材／インド市場。3つの円（画像）＋テキスト。
   段階アニメ：①円が拡大フェードイン → ②ラベルがフェードイン
   → ③数字が下からカウントアップ → ④単位が下から出現。
   円の画像は img/ind1.png（ティール・都市）／ind2.png（レッド・卒業帽）
   ／ind3.png（ティール・顕微鏡）を使用。 */
/* 見出し行：左＝Reality3＋タイトル／右＝説明文 */
.zk3-top{ display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:center; }
.zk3-top .zk-title{ margin:0; }
.zk3-market{ font-family:'Noto Sans JP',sans-serif; font-weight:700; font-size:20px; color:#111; margin:30px 0 20px; }
.zk3-hl{ color:var(--red); }
/* 3枚の円エリア（.zk-visual のR1用制約を解除） */
.zk3-visual{ max-width:none; aspect-ratio:auto; }
.zk3-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.zk3-card{ position:relative; aspect-ratio:64/70; }   /* ★円画像の縦横比 */
/* 円の画像（拡大フェードイン） */
.zk3-circle{
  position:absolute; inset:0; z-index:0;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  transform:scale(.3); opacity:0;
  transform-origin:center;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}
.zk3-c1 .zk3-circle{ background-image:url("img/ind1.png"); }
.zk3-c2 .zk3-circle{background-image: url("img/ind2.png");}
.zk3-c3 .zk3-circle{ background-image:url("img/ind3.png"); }
.zk3-visual.zk-go .zk3-circle{ transform:scale(1); opacity:1; }
/* 円の中身（ラベル・数字・単位を中央に重ねる） */
.zk3-inner{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  /* ★円が右寄りなら padding-left を足して中心合わせ */
}
/* ※ラベルを2行分の高さでそろえたので、3枚目だけの位置調整は不要（削除済み） */
.zk3-label{
  font-family:'Noto Sans JP',sans-serif;
  font-weight:700;
  font-size:15px;
  line-height:1.35;
  color:#fff;
  margin-bottom: 6px;
  min-height:2.7em;                 /* ★常に2行分の高さを確保（1行のラベルも2行分とる＝数字の高さが3枚そろう） */
  display:flex;
  align-items:flex-end;
  justify-content:center;   /* ラベルは下ぞろえで数字に隣接 */
  opacity:0;
  transition:opacity .5s ease .6s;   /* 円の後に出す */
}
.zk3-visual.zk-go .zk3-label{ opacity:1; }
/* 数字ブロック（縦積み：数字→単位） */
.zk3-stat{
  position:static;
  display:flex; flex-direction:column; align-items:center;
  line-height:1;
}
.zk3 .zk-count{
  color:#fff;
  font-size: 85px;
  letter-spacing:-.03em;   /* ★数字サイズ */
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1) 1.1s;   /* 円・ラベルの後に立ち上げ */
}
.zk3 .zk-count-mask{padding: 2px 0px 0px 2px;}
.zk3 .zk-dec{font-size: 1.0em;}   /* 小数の数字（等倍） */
.zk3 .zk-dot{ display:inline-block; font-size:.7em; }
.zk3-unit{ color:#fff; font-size:20px; font-weight:900; letter-spacing:0; }   /* ★単位サイズ */
.zk3 .zk-unit-mask{margin:2px 0 0 0;padding: .1em 0px 2px 0;}
@media(max-width:860px){
  .zk3-top{ grid-template-columns:1fr; gap:10px; }
  .zk3-cards{ gap:12px; }
  .zk3 .zk-count{ font-size:40px; }
  .zk3-label{font-size:12px;margin-bottom: 0;}
  .zk3-unit{ font-size:14px; }
  .zk3 .zk-unit-mask{margin: 0;padding: 0;}
}


/* =====================================================================
   ▼▼▼ ここから追記：Reality 1・2 ビジュアルアニメーション ▼▼▼
   ・矢印2つの移動＝ここ（CSS）。人物2つのコマ送り＝reality-countup.js の追記部。
   ・既存のカウントアップ（.zk-go）には手を入れていません。
   ・座標は元画像とのピクセル照合による実測値。★印は微調整ポイント。
   ===================================================================== */

/* --- [1] 各背景画像が div にぴったり収まるよう縦横比を実寸に合わせる。
       変更量は 0.1〜0.4% で見た目は変わりません。
       これで重ねるレイヤーの % が「元画像上の位置の %」と一致します。
       ※この3行は順番を入れ替えないこと（詳細度が同じため順番で決まります）。 --- */
.zk-visual{  aspect-ratio: 983 / 498; }    /* R1  cloud_base.png  983x498 */
.zk2-visual{ aspect-ratio: 1018 / 572; }   /* R2  men_base.png   1018x572 */
.zk3-visual{ aspect-ratio: auto; }         /* R3  元の指定を維持（変更なし） */

.zk-front{  height: 53.6%; }               /* master_base.png 807x313 が収まる高さ */
.zk2-upper{ aspect-ratio: 643 / 278; }     /* upper_base.png  643x278 */

/* --- [2] ベース画像をパーツ抜き版に差し替え --- */
.zk-realities{
  --bg-1:    url("/wp/wp-content/uploads/cloud_base.png");
  --front-1: url("/wp/wp-content/uploads/master_base.png");
}
.zk-realities.zk2{ --bg-1: url("/wp/wp-content/uploads/men_base.png"); }
.zk2-upper{ background-image: url("/wp/wp-content/uploads/upper_base.png"); }

/* --- [3] R1 ティールのジグザグ矢印：斜め右下へ滑り込んで着地 --- */
.zk-arrow-teal{
  position: absolute;
  z-index: 1;
  left: 12.716%; top: 17.269%;                /* ★着地位置 */
  width: 18.922%; height: 26.506%;            /* ★サイズ */
  background: url("/wp/wp-content/uploads/arrow_teal.png") no-repeat center / contain;
  pointer-events: none;
  opacity: 0;
  /* 矢印の軸と box の縦横比が一致しているので、x と y に同じ % を入れると
     矢印の向き（右下）に沿ってまっすぐ移動します。片方だけ変えると軌道がズレます。 */
  transform: translate(-26%, -26%);           /* ★助走距離 */
  transition:
    transform 0.9s cubic-bezier(.16, 1, .3, 1) 0.15s,
    opacity   0.4s ease                        0.15s;
}
.zk-visual.zk-go .zk-arrow-teal{ opacity: 1; transform: translate(0, 0); }

/* --- [4] R1 頭を抱えるビジネスマン（5コマ／JSが切り替え） --- */
.zk-man{
  position: absolute;
  left: 58.364%; top: 23.323%;                /* ★master_base.png 内の位置 */
  width: 33.209%; height: 76.677%;
  background: url("/wp/wp-content/uploads/man1.png") no-repeat center / contain;
  pointer-events: none;
}

/* --- [4-b] コマ送りのクロスフェード用レイヤー（JS が2枚だけ生成します）
       1枚ずつパッと切り替えるとカクつく／点滅して見えるため、
       2枚を重ねて opacity を入れ替えることで滑らかに溶かします。
       フェード時間は JS 側の fade 値（--zk-fade）で決まります。 --- */
.zk-man > .zk-frame,
.zk2-head > .zk-frame{
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity var(--zk-fade, 220ms) linear;
  will-change: opacity;
}

/* --- [5] R2 AIヘッド（5コマ／JSが切り替え） --- */
.zk2-head{
  position: absolute;
  z-index: 0;
  left: 0.688%; top: 27.972%;                 /* ★men_base.png 内の位置 */
  width: 26.916%; height: 72.028%;
  background: url("/wp/wp-content/uploads/ai1.png") no-repeat center / contain;
  pointer-events: none;
}

/* --- [6] R2 赤い下向き矢印：真下へ落下 --- */
.zk2-arrow{
  position: absolute;
  left: 75.894%; top: 5.036%;                 /* ★upper_base.png 内の位置 */
  width: 23.328%; height: 84.532%;
  background: url("/wp/wp-content/uploads/arrow_red.png") no-repeat center / contain;
  pointer-events: none;
  opacity: 0;
  /* ★落下距離。矢印は .zk2-upper の上端付近にいるため、大きくすると助走中に
     カードの外へはみ出します。16%（実寸約30px）が安全上限です。 */
  transform: translateY(-16%);
  transition:
    transform 0.75s cubic-bezier(.22, 1.2, .36, 1) 0.3s,
    opacity   0.35s ease                            0.3s;
}
.zk2-visual.zk-go .zk2-arrow{ opacity: 1; transform: translateY(0); }

/* --- [7] SP：助走距離を少し詰める --- */
@media screen and (max-width: 767px){
  .zk-arrow-teal{ transform: translate(-18%, -18%); }
  .zk2-arrow{     transform: translateY(-12%); }
  .zk-visual.zk-go .zk-arrow-teal{ transform: translate(0, 0); }
  .zk2-visual.zk-go .zk2-arrow{    transform: translateY(0); }
}

/* --- [8] モーション低減設定への配慮 --- */
@media (prefers-reduced-motion: reduce){
  .zk-arrow-teal,
  .zk2-arrow{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .zk-man{   background-image: url("/wp/wp-content/uploads/man5.png"); }
  .zk2-head{ background-image: url("/wp/wp-content/uploads/ai5.png"); }
}
/* ▲▲▲ 追記ここまで ▲▲▲ */