@charset "UTF-8";
/* ============================================================
   WORDPRESS 追加スタイル

   静的サイトから引き継いだ assets/css/style.css には手を入れず、
   WordPress化にあたって必要になった分だけをこのファイルに追加する。

     - エディター（本文）から出力される素のタグの体裁
     - 汎用固定ページ / 404 / 検索結果の本文
     - ページャー

   コンテナ側のセレクタは `:where()` で詳細度を下げてあるため、
   .newsPost__txt--tight のような既存ユーティリティクラスを
   記事本文に付けた場合は、そちらが優先される。

   コンパイル:
     sass assets/css/wp.scss assets/css/wp.css
============================================================ */
/* ============================================================
   記事本文（ニュースリリース）
   ブロックエディターの出力には .newsPost__txt 等が付かないため、
   素のタグにも .newsPost__txt 相当の体裁を与える。
============================================================ */
:where(.newsPost__body) > p,
:where(.newsPost__body) > ul,
:where(.newsPost__body) > ol,
:where(.newsPost__body) > figure,
:where(.newsPost__body) > table,
:where(.newsPost__body) > blockquote,
:where(.newsPost__body) > .wp-block-image,
:where(.newsPost__body) > .wp-block-embed {
  margin-top: 24rem;
  text-align: justify;
}

:where(.newsPost__body) > *:first-child {
  margin-top: 0;
}

:where(.newsPost__body) > h2,
:where(.newsPost__body) > h3,
:where(.newsPost__body) > h4 {
  margin-top: 34rem;
  font-size: 18rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: left;
}

/* エディターの箇条書き（＊ .newsPost__cat を付けた場合は同じ見た目） */
:where(.newsPost__body) > ul > li {
  padding-left: 1.2em;
  text-indent: -1.2em;
}
:where(.newsPost__body) > ul > li::before {
  content: "－ ";
}

:where(.newsPost__body) > ol {
  padding-left: 1.5em;
  list-style: decimal;
}

:where(.newsPost__body) a {
  color: var(--blue);
  text-decoration: underline;
}

:where(.newsPost__body) strong,
:where(.newsPost__body) b {
  font-weight: 700;
}

:where(.newsPost__body) img {
  height: auto;
}

:where(.newsPost__body) figcaption {
  margin-top: 8rem;
  font-size: 14rem;
  text-align: left;
}

:where(.newsPost__body) table {
  width: 100%;
  border-collapse: collapse;
}
:where(.newsPost__body) table th,
:where(.newsPost__body) table td {
  padding: 10rem 14rem;
  border: 1rem solid #9b9b9b;
  text-align: left;
  vertical-align: top;
}
:where(.newsPost__body) table th {
  font-weight: 500;
}

:where(.newsPost__body) blockquote {
  padding-left: 18rem;
  border-left: 3rem solid #9b9b9b;
}

@media (max-width: 768px) {
  :where(.newsPost__body) > p,
  :where(.newsPost__body) > ul,
  :where(.newsPost__body) > ol,
  :where(.newsPost__body) > figure,
  :where(.newsPost__body) > table,
  :where(.newsPost__body) > blockquote,
  :where(.newsPost__body) > .wp-block-image,
  :where(.newsPost__body) > .wp-block-embed {
    margin-top: 36rem;
  }
  :where(.newsPost__body) > h2,
  :where(.newsPost__body) > h3,
  :where(.newsPost__body) > h4 {
    margin-top: 48rem;
    font-size: 27rem;
  }
  :where(.newsPost__body) figcaption {
    font-size: 21rem;
  }
  :where(.newsPost__body) table th,
  :where(.newsPost__body) table td {
    padding: 14rem 18rem;
  }
}
/* 記事タイトルのリンク（一覧） */
.newsPost__ttl-txt a {
  color: inherit;
  text-decoration: none;
}

/* PDFアイコンのリンク。
   もとは img 自身が .newsPost__ttl（flex）の子だったため、
   包んだ <a> 側で同じ振る舞いを引き継ぐ。 */
.newsPost__pdf-link {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

/* ------------------------------------------------------------
   最新ニュース4件（.news__item）のリンク
   日付＋タイトルは記事詳細へ、PDFアイコンはPDF本体へと
   リンク先が分かれる。リンクの入れ子は不正なHTMLになるため
   記事リンクは display: contents でボックスを作らず、
   日付・タイトル・アイコンを .news__item（flex）直下の
   アイテムのまま並べて元のレイアウトを保つ。
------------------------------------------------------------ */
.news__link {
  display: contents;
  color: inherit;
}

/* display: contents はボックスを持たないため a:hover が効かない。
   代わりに中身へホバーの見た目を渡す。 */
.news__link:hover .news__date,
.news__link:hover .news__txt {
  opacity: 0.7;
  transition: 0.2s;
}

.news__pdf-link {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

/* ============================================================
   汎用固定ページ / 404 / 検索結果 の本文
   専用テンプレートを持たないページで the_content() を出力する枠。
============================================================ */
.pageBody__entry {
  margin-top: 40rem;
  color: var(--text-dark);
  font-size: 16rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
}
.pageBody__entry > * {
  margin-top: 24rem;
}
.pageBody__entry > *:first-child {
  margin-top: 0;
}
.pageBody__entry h2 {
  margin-top: 50rem;
  font-size: 22rem;
  font-weight: 700;
  line-height: 1.5;
}
.pageBody__entry h3 {
  margin-top: 40rem;
  font-size: 18rem;
  font-weight: 700;
  line-height: 1.5;
}
.pageBody__entry h4 {
  margin-top: 32rem;
  font-size: 16rem;
  font-weight: 700;
  line-height: 1.5;
}
.pageBody__entry ul {
  padding-left: 1.4em;
  list-style: disc;
}
.pageBody__entry ol {
  padding-left: 1.4em;
  list-style: decimal;
}
.pageBody__entry a {
  color: var(--blue);
  text-decoration: underline;
}
.pageBody__entry strong, .pageBody__entry b {
  font-weight: 700;
}
.pageBody__entry img {
  height: auto;
}
.pageBody__entry table {
  width: 100%;
  border-collapse: collapse;
}
.pageBody__entry table th, .pageBody__entry table td {
  padding: 10rem 14rem;
  border: 1rem solid #9b9b9b;
  text-align: left;
  vertical-align: top;
}
.pageBody__entry table th {
  font-weight: 500;
}
.pageBody__entry blockquote {
  padding-left: 18rem;
  border-left: 3rem solid #9b9b9b;
}
@media (max-width: 768px) {
  .pageBody__entry {
    margin-top: 60rem;
    padding: 0 5%;
    font-size: 25rem;
  }
  .pageBody__entry > * {
    margin-top: 36rem;
  }
  .pageBody__entry h2 {
    margin-top: 70rem;
    font-size: 32rem;
  }
  .pageBody__entry h3 {
    margin-top: 56rem;
    font-size: 28rem;
  }
  .pageBody__entry h4 {
    margin-top: 48rem;
    font-size: 25rem;
  }
  .pageBody__entry table th, .pageBody__entry table td {
    padding: 14rem 18rem;
  }
}

/* ============================================================
   HERO ENTRANCE ANIMATION
   TOPアニメ.mp4（5.6秒）のタイミングを再現したもの。
   レイアウト（座標・サイズ）は assets/css/_index.scss の HERO を参照。

   円の4枚は役割が異なる
     circle03 … 単色ブルーの円（最初のドット）
     circle04 … グラデーションの円（03の上に重ねて色を差し替える）
     circle02 … 白い円（中央を白く抜くためのマスク）
     circle01 … 完成形のドーナツ（中央は透明）

   流れ
     0.0s  03 が scale 0 から出て、0.3s で scale 0.14 になり停止
     0.9s  04 が scale 0.14 のまま 03 の上にフェードイン（1.4s で出きる）
     1.4s  04 が出きったので 03 をフェードアウト（04の下なので見えない）
     1.4s  04 が拡大開始。1.7s で scale 1.1 → 1.9s で scale 1
     2.3s  02（白）が中心から広がって輪になる
     2.5s  01（中央が透明なドーナツ）をフェードイン
     3.1s  01 が出きったので 04 をフェードアウト（3.4s に消える）
     3.4s  04 が消えきってから 02 をフェードアウト
           以降、輪の中は hero の白背景 → 背景写真の順に見える
     3.4s〜 キャッチ → 下部カーブ → 背景写真 → タイトル → コピー

   起動タイミングは head のフォント読み込みガードに合わせている。
   html.is-fonts-loading が付いている間はセレクタが一致せず
   アニメーションが始まらないため、body が表示された瞬間から再生される。
============================================================ */
/* 04 が消えきる時刻 = 01 が出きった 3.1s から 0.3s かけて 3.4s */
@keyframes heroFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes heroFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes heroHole {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
/* 03：scale 0 → 0.14 で停止 */
@keyframes heroDotIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(0.14);
  }
}
/* 04：0.14 →（60%＝1.7s）1.1 →（100%＝1.9s）1 の行き過ぎ付き拡大 */
@keyframes heroPop {
  0% {
    transform: scale(0.14);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
/* 20rem 下からのフェードイン */
@keyframes heroRiseIn {
  from {
    opacity: 0;
    transform: translateY(20rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ------------------------------------------------------------
   HERO HUMAN LOOP （人物の入れ替えループ）

   人物は9枚あり、3人ずつ表示する。並びは左・中・右の3枠で、
   それぞれ 01→04→07 / 02→05→08 / 03→06→09 と入れ替わる。

   「1人フェードアウト → 入れ替わりに1人フェードイン」を1ステップとして
   下記の順に9回まわり、1周して元の 01・02・03 に戻る。

     01→04 / 02→05 / 03→06 /
     04→07 / 05→08 / 06→09 /
     07→01 / 08→02 / 09→03

   1ステップ = フェードアウト 1.3s + フェードイン 1.3s = 2.6s
   1周 = 2.6s × 9 = 23.4s
   キーフレームの刻みは1周を18等分した hstep()（＝1.3s）
   ※ $human-fade を変えれば1周の長さも刻みも自動で追従する
------------------------------------------------------------ */
/* 1周を18等分した位置を返す。hstep(18) はちょうど 100% になる。 */
/* 01〜03：最初から表示されていて、消えてから2/3周後に戻ってくる */
@keyframes heroHuman1 {
  0% {
    opacity: 1;
  }
  0% {
    opacity: 1;
  }
  5.5555555556% {
    opacity: 0;
  }
  72.2222222222% {
    opacity: 0;
  }
  77.7777777778% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes heroHuman2 {
  0% {
    opacity: 1;
  }
  11.1111111111% {
    opacity: 1;
  }
  16.6666666667% {
    opacity: 0;
  }
  83.3333333333% {
    opacity: 0;
  }
  88.8888888889% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes heroHuman3 {
  0% {
    opacity: 1;
  }
  22.2222222222% {
    opacity: 1;
  }
  27.7777777778% {
    opacity: 0;
  }
  94.4444444444% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/* 04〜09：最初は隠れていて、入れ替わりで出てきて1/3周後に消える */
@keyframes heroHuman4 {
  0% {
    opacity: 0;
  }
  5.5555555556% {
    opacity: 0;
  }
  11.1111111111% {
    opacity: 1;
  }
  33.3333333333% {
    opacity: 1;
  }
  38.8888888889% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes heroHuman5 {
  0% {
    opacity: 0;
  }
  16.6666666667% {
    opacity: 0;
  }
  22.2222222222% {
    opacity: 1;
  }
  44.4444444444% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes heroHuman6 {
  0% {
    opacity: 0;
  }
  27.7777777778% {
    opacity: 0;
  }
  33.3333333333% {
    opacity: 1;
  }
  55.5555555556% {
    opacity: 1;
  }
  61.1111111111% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes heroHuman7 {
  0% {
    opacity: 0;
  }
  38.8888888889% {
    opacity: 0;
  }
  44.4444444444% {
    opacity: 1;
  }
  66.6666666667% {
    opacity: 1;
  }
  72.2222222222% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes heroHuman8 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  55.5555555556% {
    opacity: 1;
  }
  77.7777777778% {
    opacity: 1;
  }
  83.3333333333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes heroHuman9 {
  0% {
    opacity: 0;
  }
  61.1111111111% {
    opacity: 0;
  }
  66.6666666667% {
    opacity: 1;
  }
  88.8888888889% {
    opacity: 1;
  }
  94.4444444444% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* ------------------------------------------------------------
   HERO BACKGROUND （背景写真の入れ替え）

   main-img01〜03 の3枚を、scale 1.08 → 1.00 へ縮小しながら
   ゆっくりクロスフェードで入れ替える。

   1周は人物ループと同じ 23.4s。1枚あたりの持ち時間は 1/3 周（7.8s）で、
   フェードは 1/9 周（2.6s）かけて重ねる。したがって1枚が画面に出ている
   のはフェード込みで 4/9 周（10.4s）。
   縮小はこの 4/9 周を通して等速で進むため、写真が現れた瞬間が 1.08、
   消えきる瞬間が 1.00 になる（timing-function は linear）。

   隠れている間に scale を 1.08 へ戻すが、opacity が 0 の区間なので
   見た目には出ない。
------------------------------------------------------------ */
/* 1周を9等分した位置を返す。bstep(9) はちょうど 100% になる。 */
@keyframes heroBg01 {
  0% {
    opacity: 1;
    transform: scale(1.09);
  }
  22.2222222222% {
    opacity: 1;
    transform: scale(1.03);
  }
  33.3333333333% {
    opacity: 0;
    transform: scale(1);
  }
  33.3433333333% {
    opacity: 0;
    transform: scale(1.12);
  }
  88.8888888889% {
    opacity: 0;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1.09);
  }
}
@keyframes heroBg02 {
  0% {
    opacity: 0;
    transform: scale(1.12);
  }
  22.2222222222% {
    opacity: 0;
    transform: scale(1.12);
  }
  33.3333333333% {
    opacity: 1;
    transform: scale(1.09);
  }
  55.5555555556% {
    opacity: 1;
    transform: scale(1.03);
  }
  66.6666666667% {
    opacity: 0;
    transform: scale(1);
  }
  66.6766666667% {
    opacity: 0;
    transform: scale(1.12);
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}
@keyframes heroBg03 {
  0% {
    opacity: 0;
    transform: scale(1.12);
  }
  55.5555555556% {
    opacity: 0;
    transform: scale(1.12);
  }
  66.6666666667% {
    opacity: 1;
    transform: scale(1.09);
  }
  88.8888888889% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
/* --- 再生前の状態（隠しておく）--- */
.hero__bg, .hero__bottom, .hero__humans, .hero__title, .hero__h2, .hero__circle-img {
  opacity: 0;
}
.hero__circle-img {
  transform: scale(0);
}
.hero__bottom, .hero__title {
  transform: translateY(20rem);
}
.hero {
  /* 入れ替え用の6人と、2枚目以降の背景写真は最初は隠しておく */
}
.hero__human--04, .hero__human--05, .hero__human--06, .hero__human--07, .hero__human--08, .hero__human--09 {
  opacity: 0;
}
.hero__bg-img--02, .hero__bg-img--03 {
  opacity: 0;
}

/* --- 再生 --- */
html:not(.is-fonts-loading) .hero {
  /* 単色ブルーの円：scale 0 → 0.14 で止まって待つ。
     04 が出きったら消す（04の下なので消える瞬間は見えない） */
}
html:not(.is-fonts-loading) .hero__circle-img--03 {
  animation: heroFadeIn 0.01s linear 0s both, heroDotIn 0.3s ease-out 0s both, heroFadeOut 0.3s linear 1.4s forwards;
}
html:not(.is-fonts-loading) .hero {
  /* グラデーションの円：0.14 のまま 03 の上にフェードインし、
     出きってから拡大。01 が出きるまで消さない（同時にクロスフェードすると
     半透明どうしが重なって輪全体が一瞬薄くなるため） */
}
html:not(.is-fonts-loading) .hero__circle-img--04 {
  animation: heroFadeIn 0.5s ease 0.9s both, heroPop 0.5s ease-out 1.4s both, heroFadeOut 0.3s linear 3.1s forwards;
}
html:not(.is-fonts-loading) .hero {
  /* 白い円：中心から広がって輪をつくる。
     04 が完全に消えてから消す。消えたあとは hero の白背景が
     そのまま見えるので切り替えは目立たない */
}
html:not(.is-fonts-loading) .hero__circle-img--02 {
  animation: heroFadeIn 0.01s linear 2.3s both, heroHole 0.6s cubic-bezier(0.22, 1, 0.36, 1) 2.3s both, heroFadeOut 0.3s linear 3.4s forwards;
}
html:not(.is-fonts-loading) .hero {
  /* 完成形のドーナツ：2.5s でフェードイン */
}
html:not(.is-fonts-loading) .hero__circle-img--01 {
  transform: scale(1);
  animation: heroFadeIn 0.6s ease 2.5s both;
}
html:not(.is-fonts-loading) .hero__h2 {
  animation: heroFadeIn 0.6s ease 2.6s both;
}
html:not(.is-fonts-loading) .hero__bg {
  animation: heroFadeIn 0.8s ease 4.3s both;
}
html:not(.is-fonts-loading) .hero {
  /* 人物はコピーが出きってからフェードイン */
}
html:not(.is-fonts-loading) .hero__humans {
  animation: heroFadeIn 0.8s ease 5.7s both;
}
html:not(.is-fonts-loading) .hero {
  /* 20rem 下からせり上がる */
}
html:not(.is-fonts-loading) .hero__bottom {
  animation: heroRiseIn 0.8s ease-out 3.4s both;
}
html:not(.is-fonts-loading) .hero__title {
  animation: heroRiseIn 0.7s ease-out 4.8s both;
}
html:not(.is-fonts-loading) .hero {
  /* 背景写真の入れ替え。枠（.hero__bg）が出てくるのと同時に回し始める */
}
html:not(.is-fonts-loading) .hero__bg-img--01 {
  animation: heroBg01 23.4s linear 4.3s infinite both;
}
html:not(.is-fonts-loading) .hero__bg-img--02 {
  animation: heroBg02 23.4s linear 4.3s infinite both;
}
html:not(.is-fonts-loading) .hero__bg-img--03 {
  animation: heroBg03 23.4s linear 4.3s infinite both;
}
html:not(.is-fonts-loading) .hero {
  /* 人物の入れ替えループ */
}
html:not(.is-fonts-loading) .hero__human--01 {
  animation: heroHuman1 23.4s ease-in-out 8.5s infinite both;
}
html:not(.is-fonts-loading) .hero__human--02 {
  animation: heroHuman2 23.4s ease-in-out 8.5s infinite both;
}
html:not(.is-fonts-loading) .hero__human--03 {
  animation: heroHuman3 23.4s ease-in-out 8.5s infinite both;
}
html:not(.is-fonts-loading) .hero__human--04 {
  animation: heroHuman4 23.4s ease-in-out 8.5s infinite both;
}
html:not(.is-fonts-loading) .hero__human--05 {
  animation: heroHuman5 23.4s ease-in-out 8.5s infinite both;
}
html:not(.is-fonts-loading) .hero__human--06 {
  animation: heroHuman6 23.4s ease-in-out 8.5s infinite both;
}
html:not(.is-fonts-loading) .hero__human--07 {
  animation: heroHuman7 23.4s ease-in-out 8.5s infinite both;
}
html:not(.is-fonts-loading) .hero__human--08 {
  animation: heroHuman8 23.4s ease-in-out 8.5s infinite both;
}
html:not(.is-fonts-loading) .hero__human--09 {
  animation: heroHuman9 23.4s ease-in-out 8.5s infinite both;
}

/* OS側で「視差効果を減らす」設定の場合はアニメーションせず完成形を出す */
@media (prefers-reduced-motion: reduce) {
  .hero__bg, .hero__humans, .hero__h2 {
    opacity: 1;
  }
  .hero__bottom, .hero__title {
    opacity: 1;
    transform: translateY(0);
  }
  .hero__circle-img {
    animation: none !important;
  }
  .hero__circle-img--01 {
    opacity: 1;
    transform: scale(1);
  }
  .hero__circle-img--02, .hero__circle-img--03, .hero__circle-img--04 {
    opacity: 0;
  }
  .hero {
    /* 背景写真は1枚目で固定 */
  }
  .hero__bg-img {
    animation: none !important;
    transform: none;
  }
  .hero__bg-img--01 {
    opacity: 1;
  }
  .hero__bg-img--02, .hero__bg-img--03 {
    opacity: 0;
  }
  .hero {
    /* 人物の入れ替えループも止めて 01〜03 の並びで固定 */
  }
  .hero__human {
    animation: none !important;
  }
  .hero__human--01, .hero__human--02, .hero__human--03 {
    opacity: 1;
  }
  .hero__human--04, .hero__human--05, .hero__human--06, .hero__human--07, .hero__human--08, .hero__human--09 {
    opacity: 0;
  }
}
/* ============================================================
   HERO スキップ
   イントロ再生中に .hero をクリックしたとき、完成形（アニメーション
   最後の状態）へフェードインで移行する。クラスの付与は
   assets/js/hero-skip.js が行う。

   animation を切ると同時に最終値を指定することで、
   「実行中のアニメーションの現在値 → 最終値」への transition が働く。
   途中値からなめらかにフェードインするため、途中でクリックしても
   ちらつかない。

   背景写真の入れ替え（.hero__bg-img）は枠ごとフェードインさせるだけで
   よいため、スキップの対象にしていない（ループはそのまま回り続ける）。
============================================================ */
.hero.is-hero-skipped .hero__bg,
.hero.is-hero-skipped .hero__h2,
.hero.is-hero-skipped .hero__humans,
.hero.is-hero-skipped .hero__bottom,
.hero.is-hero-skipped .hero__title,
.hero.is-hero-skipped .hero__copy,
.hero.is-hero-skipped .hero__circle-img {
  animation: none !important;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero.is-hero-skipped .hero__bg,
.hero.is-hero-skipped .hero__h2,
.hero.is-hero-skipped .hero__humans {
  opacity: 1;
}
.hero.is-hero-skipped .hero__bottom,
.hero.is-hero-skipped .hero__title,
.hero.is-hero-skipped .hero__copy {
  opacity: 1;
  transform: translateY(0);
}
.hero.is-hero-skipped {
  /* 完成形のドーナツ */
}
.hero.is-hero-skipped .hero__circle-img--01 {
  opacity: 1;
  transform: scale(1);
}
.hero.is-hero-skipped {
  /* 組み立て途中の円はフェードアウト。
     transform は現在の拡大率を hero-skip.js がインラインで固定する。 */
}
.hero.is-hero-skipped .hero__circle-img--02,
.hero.is-hero-skipped .hero__circle-img--03,
.hero.is-hero-skipped .hero__circle-img--04 {
  opacity: 0;
}
.hero.is-hero-skipped {
  /* 人物の入れ替えループは止めず、スキップ後に開始し直す */
}
.hero.is-hero-skipped .hero__human {
  animation-delay: 2.5s !important;
}

/* ============================================================
   VISION : 事業相関図アニメーション

   再生は assets/js/vision-network.js が「要素の半分以上が画面に
   入ったとき」に .is-play を付与して開始する。JS無効時・視差効果を
   減らす設定では完成形の静止状態で表示される。

   進行はすべて下のタイムライン（秒）で管理している。
   $vnet-dur と各変数を変えればキーフレームの位置は自動で追従する。
============================================================ */
/* 全体に対する位置（%）を秒数から求める */
/* ---- タイムライン（秒）---- */
/* left / top / width（最終形画像に対する %） */
.visionNet {
  position: relative;
  width: 100%;
  aspect-ratio: 1830/957;
  /* 下の mix-blend-mode の合成範囲をこのブロック内に閉じ込める。
     これが無いとページ背景（.pageBody--bg の薄いシンボル）まで
     巻き込んで暗くなってしまう。 */
  isolation: isolate;
  /* 2つの円が重なる部分は、元デザインでは色が乗算になっている。
     重なり専用画像（04）を使わずに同じ見た目を出すため、
     販促事業側（03）を multiply で重ねる。
     重なっていない部分は背後が透明なので見た目は変わらない。 */
}
.visionNet__item--03 {
  mix-blend-mode: multiply;
}
.visionNet__item {
  position: absolute;
  display: block;
  line-height: 0;
  pointer-events: none;
}
.visionNet__item picture,
.visionNet__item img {
  display: block;
  width: 100%;
  height: auto;
}
.visionNet {
  /* リンクを設定したパーツだけクリックできるようにする。
     アニメーションが終わって表示されるまでは無効（下の .is-armed / .is-done 参照）。 */
}
.visionNet__item--link {
  pointer-events: auto;
  transition: opacity 0.2s;
}
.visionNet__item--link:hover {
  opacity: 0.7;
}
.visionNet__item--01 {
  left: 33.115%;
  top: 20.272%;
  width: 33.77%;
}
.visionNet__item--02 {
  left: 21.421%;
  top: 23.197%;
  width: 30.71%;
}
.visionNet__item--03 {
  left: 47.869%;
  top: 23.197%;
  width: 30.765%;
}
.visionNet__item--05 {
  left: 26.557%;
  top: 7.732%;
  width: 46.776%;
}
.visionNet__item--06 {
  left: 10.71%;
  top: 29.258%;
  width: 24.317%;
}
.visionNet__item--06b {
  left: 64.973%;
  top: 29.258%;
  width: 24.372%;
}
.visionNet__item--07 {
  left: 36.066%;
  top: 25.705%;
  width: 28.033%;
}
.visionNet__item--08 {
  left: 41.858%;
  top: 39.812%;
  width: 16.066%;
}
.visionNet__item--09 {
  left: 10.82%;
  top: 7.941%;
  width: 78.415%;
}
.visionNet__item--10 {
  left: 16.885%;
  top: 0%;
  width: 12.951%;
}
.visionNet__item--11 {
  left: 0.055%;
  top: 29.467%;
  width: 14.809%;
}
.visionNet__item--12 {
  left: 1.694%;
  top: 61.338%;
  width: 12.951%;
}
.visionNet__item--13 {
  left: 15.847%;
  top: 71.16%;
  width: 14.317%;
}
.visionNet__item--14 {
  left: 66.831%;
  top: 3.448%;
  width: 20.984%;
}
.visionNet__item--15 {
  left: 63.005%;
  top: 71.055%;
  width: 27.104%;
}
@media (max-width: 768px) {
  .visionNet {
    aspect-ratio: 1362/1625;
  }
  .visionNet__item--01 {
    left: 27.313%;
    top: 34.708%;
    width: 45.448%;
  }
  .visionNet__item--02 {
    left: 29.515%;
    top: 21.662%;
    width: 41.263%;
  }
  .visionNet__item--03 {
    left: 29.515%;
    top: 51.2%;
    width: 41.336%;
  }
  .visionNet__item--05 {
    left: 16.411%;
    top: 25.185%;
    width: 66.922%;
  }
  .visionNet__item--06 {
    left: 33.48%;
    top: 7.508%;
    width: 32.673%;
  }
  .visionNet__item--06b {
    left: 33.333%;
    top: 71.631%;
    width: 32.746%;
  }
  .visionNet__item--07 {
    left: 30.171%;
    top: 36.785%;
    width: 39.665%;
  }
  .visionNet__item--08 {
    left: 39.06%;
    top: 44.123%;
    width: 21.586%;
  }
  .visionNet__item--09 {
    left: 16.814%;
    top: 6.646%;
    width: 66.373%;
  }
  .visionNet__item--10 {
    left: 9.765%;
    top: 6.338%;
    width: 26.579%;
  }
  .visionNet__item--11 {
    left: 25.33%;
    top: 1.169%;
    width: 19.604%;
  }
  .visionNet__item--12 {
    left: 56.681%;
    top: 0%;
    width: 15.932%;
  }
  .visionNet__item--13 {
    left: 63.51%;
    top: 15.877%;
    width: 25.551%;
  }
  .visionNet__item--14 {
    left: 0%;
    top: 78.462%;
    width: 36.344%;
  }
  .visionNet__item--15 {
    left: 63.51%;
    top: 77.477%;
    width: 28.708%;
  }
}
.visionNet {
  /* ---- 再生前（JSが .is-armed を付けたら隠す） ---- */
}
.visionNet.is-armed .visionNet__item {
  opacity: 0;
}
.visionNet {
  /* 再生が終わるまではリンクを無効にしておく。
     まだ表示されていない（透明な）ロゴを押せてしまうのを防ぐ。 */
}
.visionNet.is-armed .visionNet__item--link {
  pointer-events: none;
}
.visionNet {
  /* 再生完了（JSが .is-done を付ける）。
     アニメーションの fill は :hover より優先されて opacity を固定して
     しまうため、ここで animation を外してホバーを効くようにする。 */
}
.visionNet.is-done .visionNet__item--link {
  animation: none !important;
  opacity: 1;
  pointer-events: auto;
}
.visionNet.is-done .visionNet__item--link:hover {
  opacity: 0.7;
}
.visionNet {
  /* ---- 再生 ---- */
}
.visionNet.is-play .visionNet__item {
  animation-duration: 4.7s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  /* 再生中だけ合成レイヤーに載せてカクつきを抑える */
  will-change: opacity, transform;
}
.visionNet {
  /* 再生が終わったら合成レイヤーを解放する */
}
.visionNet.is-done .visionNet__item {
  will-change: auto;
}
.visionNet.is-play .visionNet__item--01 {
  animation-name: vnetSolo;
}
.visionNet.is-play .visionNet__item--02 {
  animation-name: vnetCircleA;
}
.visionNet.is-play .visionNet__item--03 {
  animation-name: vnetCircleB;
  mix-blend-mode: multiply;
}
.visionNet.is-play .visionNet__item--05 {
  animation-name: vnetBlob;
}
.visionNet.is-play .visionNet__item--06, .visionNet.is-play .visionNet__item--06b {
  animation-name: vnetRing;
}
.visionNet.is-play .visionNet__item--07, .visionNet.is-play .visionNet__item--08 {
  animation-name: vnetCenter;
}
.visionNet.is-play .visionNet__item--09 {
  animation-name: vnetFinal;
}
.visionNet.is-play .visionNet__item--10, .visionNet.is-play .visionNet__item--11, .visionNet.is-play .visionNet__item--12, .visionNet.is-play .visionNet__item--13, .visionNet.is-play .visionNet__item--14, .visionNet.is-play .visionNet__item--15 {
  animation-name: vnetLogo;
}
@media (max-width: 768px) {
  .visionNet.is-play .visionNet__item--02 {
    animation-name: vnetCircleASp;
  }
  .visionNet.is-play .visionNet__item--03 {
    animation-name: vnetCircleBSp;
  }
}

/* 単円：フェードインして保持し、2つの円と入れ替わる */
@keyframes vnetSolo {
  0%, 1.0638297872% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  14.8936170213% {
    opacity: 1;
  }
  25.5319148936% {
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  32.9787234043%, 100% {
    opacity: 0;
  }
}
/* 左（PC）の円：中央寄り → 重なり位置 → 静止 → 外側へ抜けながら消える。
   1本の動きとして最後までつながる（途中で別画像に差し替えない）。
   位置は支給動画からの実測値で区間ごとの速度がほぼ一定のため、
   区間内は linear のまま。イージングを足すと速度が不連続になる。 */
@keyframes vnetCircleA {
  0%, 25.5319148936% {
    opacity: 0;
    transform: translateX(22.06%);
  }
  32.9787234043% {
    opacity: 1;
    transform: translateX(8%);
  }
  37.2340425532% {
    opacity: 1;
    transform: translateX(0);
  }
  43.6170212766% {
    opacity: 1;
    transform: translateX(0);
  }
  54.2553191489% {
    opacity: 1;
    transform: translateX(-23.7%);
  }
  60.6382978723% {
    opacity: 0.2;
    transform: translateX(-36.65%);
  }
  61.7021276596%, 100% {
    opacity: 0;
    transform: translateX(-36.65%);
  }
}
/* 右（PC）の円：左と対称 */
@keyframes vnetCircleB {
  0%, 25.5319148936% {
    opacity: 0;
    transform: translateX(-22.02%);
  }
  32.9787234043% {
    opacity: 1;
    transform: translateX(-8%);
  }
  37.2340425532% {
    opacity: 1;
    transform: translateX(0);
  }
  43.6170212766% {
    opacity: 1;
    transform: translateX(0);
  }
  54.2553191489% {
    opacity: 1;
    transform: translateX(23.6%);
  }
  60.6382978723% {
    opacity: 0.2;
    transform: translateX(36.59%);
  }
  61.7021276596%, 100% {
    opacity: 0;
    transform: translateX(36.59%);
  }
}
/* SPは縦並びなので上下方向に動く */
@keyframes vnetCircleASp {
  0%, 25.5319148936% {
    opacity: 0;
    transform: translateY(21.71%);
  }
  32.9787234043% {
    opacity: 1;
    transform: translateY(8%);
  }
  37.2340425532% {
    opacity: 1;
    transform: translateY(0);
  }
  43.6170212766% {
    opacity: 1;
    transform: translateY(0);
  }
  54.2553191489% {
    opacity: 1;
    transform: translateY(-21%);
  }
  60.6382978723% {
    opacity: 0.2;
    transform: translateY(-32.38%);
  }
  61.7021276596%, 100% {
    opacity: 0;
    transform: translateY(-32.38%);
  }
}
@keyframes vnetCircleBSp {
  0%, 25.5319148936% {
    opacity: 0;
    transform: translateY(-22.06%);
  }
  32.9787234043% {
    opacity: 1;
    transform: translateY(-8%);
  }
  37.2340425532% {
    opacity: 1;
    transform: translateY(0);
  }
  43.6170212766% {
    opacity: 1;
    transform: translateY(0);
  }
  54.2553191489% {
    opacity: 1;
    transform: translateY(20.8%);
  }
  60.6382978723% {
    opacity: 0.2;
    transform: translateY(32.03%);
  }
  61.7021276596%, 100% {
    opacity: 0;
    transform: translateY(32.03%);
  }
}
/* 中央のグラデーション。少し小さい状態から広がる */
@keyframes vnetBlob {
  0%, 57.4468085106% {
    opacity: 0;
    transform: scale(0.86);
    animation-timing-function: ease-out;
  }
  68.085106383%, 100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* 人材事業／販促事業のリング */
@keyframes vnetRing {
  0%, 57.4468085106% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  68.085106383%, 100% {
    opacity: 1;
  }
}
/* 中央の白円とシグナルHDロゴ */
@keyframes vnetCenter {
  0%, 60.6382978723% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  72.3404255319%, 100% {
    opacity: 1;
  }
}
/* 矢印付きの完成形が乗って相関図が完成する */
@keyframes vnetFinal {
  0%, 78.7234042553% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  90.4255319149%, 100% {
    opacity: 1;
  }
}
/* グループ各社ロゴ */
@keyframes vnetLogo {
  0%, 86.170212766% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  96.8085106383%, 100% {
    opacity: 1;
  }
}
/* 「視差効果を減らす」設定では完成形を出したままにする */
@media (prefers-reduced-motion: reduce) {
  .visionNet.is-armed .visionNet__item {
    opacity: 1;
  }
  .visionNet.is-play .visionNet__item {
    animation: none !important;
    opacity: 1;
  }
}
/* ============================================================
   ページャー（検索結果など）
============================================================ */
.newsPager {
  margin-top: 60rem;
}
.newsPager .screen-reader-text {
  position: absolute;
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.newsPager .nav-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10rem;
}
.newsPager .page-numbers {
  display: block;
  min-width: 38rem;
  padding: 8rem 12rem;
  border: 1rem solid #9b9b9b;
  border-radius: 20rem;
  color: var(--text-dark);
  font-family: var(--font-en);
  font-size: 14rem;
  line-height: 1.4;
  text-align: center;
}
.newsPager .page-numbers.current {
  background: var(--blue-btn);
  border-color: var(--blue-btn);
  color: #fff;
  font-weight: 700;
}
@media (max-width: 768px) {
  .newsPager {
    margin-top: 80rem;
  }
  .newsPager .nav-links {
    gap: 14rem;
  }
  .newsPager .page-numbers {
    min-width: 56rem;
    padding: 12rem 18rem;
    border-width: 1.5rem;
    border-radius: 40rem;
    font-size: 22rem;
  }
}/*# sourceMappingURL=wp.css.map */