@charset "UTF-8";
/* ============================================================
   STRENGTH — 3つの強みに図版を添える（index-test.html 専用）
   ------------------------------------------------------------
   BUSINESS の図版は「商品の絵」なので額縁で囲ってあるが、
   こちらは「考え方の絵」なので枠を持たせない。
   枠のある/なしで、商品と概念の階層が一目で分かる。

   ★セレクタを #strength に閉じている理由★
   .strength-grid / .strength-item は #recruit でも使い回されている。
   クラスだけで書くと採用情報の3項目にも図版の余白が入ってしまう。
   ============================================================ */

/* 3つの枠は同じ比率にする。01だけ縦長の画像に合わせて背を高くすると、
   その項目だけ見出しと本文の位置が下がって、3つが揃って見えない。
   SVG側は preserveAspectRatio="meet" なので、4:3 の枠に収まるよう
   自動で縮んで中央に置かれる（上下に余白が付くだけ） */
#strength .str-fig {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  margin: 4px 0 20px;
  overflow: hidden;
}
#strength .str-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- 01 だけは用意された画像を使う ----
   ・枠も影も付けない（付けると「写真を貼った」ように見える）
   ・画像の地は透明に抜いてあるので、セクションのクリーム地が
     そのまま透けて、継ぎ目も色ずれも出ない
   ・浮遊などの動きは付けない。静かに置く */
#strength .str-fig--img { display: block; }

/* ---- 01 の画像の置き方 ----
   ★position:absolute にしている理由★
   02/03 の SVG は absolute で枠に敷いてあるので、枠の高さに影響しない。
   画像だけ通常フローに置いていたため、中身の高さで aspect-ratio が破られ、
   01 の枠だけ背高になって見出しが下へ押し下げられていた。
   絶対配置にすると枠の高さは aspect-ratio だけで決まり、3つとも必ず揃う。

   ★height の決め方★
   02/03 の SVG は viewBox の中に余白を持っていて、実際に描かれている
   インクは枠の高さの 89px / 99px しかない（アニメを止めて実測）。
   PNG は内容ぴったりに切り出してあるので、右2つと同じインク量なら 40%。
   ただし 01 は網の目が細かく、40% では線が潰れて読めないため、
   ご要望どおり大きくしている。枠の高さは aspect-ratio だけで決まるので、
   ここを何%にしても3項目の見出し位置はずれない。

   物理的には 100% まで置けるが、そこまで上げると絵が枠の縁に
   触れて窮屈になる。上下に少し余白が残る値にしている。 */
#strength .str-fig__img {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  height: 58%; width: auto; max-width: 96%;
  object-fit: contain;
}

#strength .str-fig .st { fill: none; stroke: var(--gold-300); vector-effect: non-scaling-stroke; }
#strength .str-fig .st--dim   { stroke: rgba(198, 167, 104, 0.36); }
#strength .str-fig .st--faint { stroke: rgba(237, 232, 220, 0.14); }
#strength .str-fig .fl        { fill: var(--gold-300); }
#strength .str-fig .fl--dim   { fill: rgba(198, 167, 104, 0.4); }

/* ---- 01 組織力：網の目を光が渡っていく ----
   点が線で結ばれ、その上を光が巡る。1本の線が切れても回り道がある＝
   「個人商店の集まりではない」を図にしたもの */
#strength .str-fig .weave {
  stroke: var(--gold-100); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 0.08 0.92;
  animation: strWeave 4.2s linear infinite;
}
#strength .str-fig .weave--2 { animation-delay: -1.4s; }
#strength .str-fig .weave--3 { animation-delay: -2.8s; }
@keyframes strWeave { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 中心の結び目だけ、ゆっくり息をする */
#strength .str-fig .hub { animation: strHub 3.4s ease-in-out infinite; transform-origin: 160px 90px; }
@keyframes strHub { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }

/* ---- 02 学生の育成力：低い位置から段を上がって先頭に立つ ---- */
/* transform-box:fill-box にしないと、原点が viewBox 基準になって
   棒が「自分の足元」ではなく図の左下から伸びてしまう */
#strength .str-fig .step { transform-box: fill-box; transform-origin: 50% 100%; animation: strStep 4.6s var(--ease-out) infinite; }
#strength .str-fig .step--2 { animation-delay: .18s; }
#strength .str-fig .step--3 { animation-delay: .36s; }
#strength .str-fig .step--4 { animation-delay: .54s; }
@keyframes strStep {
  0%, 8%   { transform: scaleY(.16); }
  38%, 82% { transform: scaleY(1); }
  100%     { transform: scaleY(.16); }
}
/* 段を駆け上がる点 */
#strength .str-fig .climb { animation: strClimb 4.6s var(--ease-out) infinite; }
@keyframes strClimb {
  0%, 8%   { transform: translate(0, 0); opacity: 0; }
  20%      { opacity: 1; }
  38%, 82% { transform: translate(150px, -66px); opacity: 1; }
  92%, 100%{ transform: translate(150px, -66px); opacity: 0; }
}

/* ---- 03 商材の多さ：3本の筋が1本に合流する ---- */
#strength .str-fig .merge {
  stroke: var(--gold-100); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 0.12 0.88;
  animation: strMerge 3.6s cubic-bezier(.5, 0, .5, 1) infinite;
}
#strength .str-fig .merge--2 { animation-delay: -.35s; }
#strength .str-fig .merge--3 { animation-delay: -.7s; }
@keyframes strMerge { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* 合流点が受け止めるたびに光る */
#strength .str-fig .catchdot { animation: strCatch 3.6s cubic-bezier(.5, 0, .5, 1) infinite; transform-origin: 250px 90px; }
@keyframes strCatch { 0%, 55% { transform: scale(1); opacity: .75; } 72% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: .75; } }

/* ---- ホバー：暗くせず、線を金へ寄せるだけ ---- */
#strength .str-fig .st { transition: stroke .5s var(--ease-out); }
#strength .strength-item:hover .str-fig .st--dim { stroke: rgba(198, 167, 104, 0.6); }

/* ---- 動きを控える設定のとき ---- */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) #strength .str-fig * { animation: none !important; }
  html:not(.motion-full) #strength .str-fig .weave,
  html:not(.motion-full) #strength .str-fig .merge { stroke-dasharray: none; opacity: .45; }
  html:not(.motion-full) #strength .str-fig .step  { transform: scaleY(1); }
  html:not(.motion-full) #strength .str-fig .climb { transform: translate(150px, -66px); opacity: 1; }
}
html.motion-reduced #strength .str-fig * { animation: none !important; }
html.motion-reduced #strength .str-fig .weave,
html.motion-reduced #strength .str-fig .merge { stroke-dasharray: none; opacity: .45; }
html.motion-reduced #strength .str-fig .step  { transform: scaleY(1); }
html.motion-reduced #strength .str-fig .climb { transform: translate(150px, -66px); opacity: 1; }