/* アプデ人事LP（/update-hr）の「選ばれる理由」＝扇状に並んだカードのスライダー
   ------------------------------------------------------------------
   マークアップとJSは views/partials/hr_points.php。読み込みは router.php の /update-hr ルート。

   参考にしたのは https://www.chunichi-biyou.com/ の「中日美容が選ばれるヒミツ」。
   あちらは Swiper の effect:'creative'（prev/next に rotate と transform-origin:50% 500px）だが、
   このサイトにはビルド工程が無いので、同じ変形を素のCSS/JSで組んでいる。
   /css/style.css はビルド済みTailwindで新規クラスを足せないため、このファイルに独立して書く。

   ★ 扇の作り方
   カードは全部 stage の中央に絶対配置で重ねてある。JS が渡すのは中央からの距離 --d
   （実数。ドラッグ中は小数）と、その絶対値 --ad だけ。見た目はここの3つの数値で決まる:
     --arc-step   … 1枚ずれるごとの横移動
     --arc-angle  … 1枚ずれるごとの傾き
     --arc-origin … 回転の中心。カードの上端からこの距離だけ下（＝カードより下の一点）。
                    ここを軸に回すので、外側のカードほど下がりながら開く＝扇になる
   --arc-limit は扇に並べる枚数。これを超えたカードは端のカードと同じ位置に重なって隠れる。
   数値はすべてCSS側が正で、JSは .arc-metrics 経由で読むだけ（メディアクエリで変えられる）。

   ⚠️ LPは 768px 未満で #hr-page-wrap が最大430pxに制限されている（スマホLPをPC中央に置く旧デザインの名残）。
   そのため SP側の寸法を vw だけで書くと、431〜767px でカードが枠からはみ出す。
   min(62vw, 260px) のように**枠の上限側でも頭打ちになる形**で書くこと。 */


.arc-section {
  position: relative;
  z-index: 1;
  /* LPの他セクション（#case / #column / #faq）と同じ区切り方。
     地色は2026-09-10に白へ統一（装飾は hr-decor.css がこのIDにも当てている） */
  background: #fff;
  border-top: 2px solid #0080B5;
  padding: 48px 0 40px;
  animation: fadeIn 0.8s ease-in-out forwards;
}

.arc-slider {
  /* トンマナ。LPのアクセント色とEN書体（LPの .font-montserrat は Figtree） */
  --arc-accent: #0080B6;
  --arc-ink: #333;
  --arc-en: 'Figtree', sans-serif;
  --arc-ease: cubic-bezier(0.165, 0.84, 0.44, 1);

  /* 扇の寸法。ここを触れば見た目が変わる */
  --arc-card-w: 280px;
  --arc-card-h: 464px;   /* 本文3行ぶんを確保した高さ（stage の高さを決めるためだけの想定値） */
  --arc-photo-h: 280px;
  --arc-step: 340px;
  --arc-angle: 8deg;
  --arc-origin: 500px;
  --arc-drop: 42px;
  --arc-limit: 4;

  position: relative;
  /* 扇は画面幅の外まで開くので、ここで必ず断つ（横スクロールが出ると check_layout.py が拾う）。
     カードのホバーで上に20px持ち上がるぶんは上下のパディングで逃がす */
  overflow: hidden;
  padding: 32px 0 24px;
}

.arc-stage {
  position: relative;
  /* カードは絶対配置なので stage の高さは自動では決まらない。
     想定のカード高 + 外側のカードが下がるぶん + 余白 で確保する */
  height: calc(var(--arc-card-h) + var(--arc-drop) + 16px);
  margin: 0 auto;
  touch-action: pan-y;
  cursor: grab;
  outline: none;
  /* スワイプ中に本文が選択されたり、画像の長押しメニュー・ドラッグが出たりしないように */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.arc-stage img {
  -webkit-user-drag: none;
}

.arc-stage.is-dragging {
  cursor: grabbing;
}

/* 寸法の受け渡し用の見えない要素。
   JS は --arc-step / --arc-limit を getComputedStyle では読めない
   （カスタムプロパティは calc や vw のまま返ってきて px に解決されない）ので、
   実寸を持つ要素を1つ置いて getBoundingClientRect() で読む。
   ＝寸法の正はあくまでCSS側にあり、メディアクエリを足すだけで挙動が変わる */
.arc-metrics {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--arc-step);
  height: calc(var(--arc-limit) * 1px);
  visibility: hidden;
  pointer-events: none;
}

.arc-stage:focus-visible {
  outline: 2px solid var(--arc-accent);
  outline-offset: 4px;
}

.arc-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--arc-card-w);
  /* 高さは中身なり。--arc-card-h は stage の高さを決めるためだけの想定値で、
     ここで固定してしまうと文言が3行になったとき白地からテキストがはみ出す */
  margin-left: calc(var(--arc-card-w) / -2);
  transform-origin: 50% var(--arc-origin);
  transform:
    translate3d(calc(var(--d, 0) * var(--arc-step)), calc(var(--ad, 0) * var(--arc-drop)), 0)
    rotate(calc(var(--d, 0) * var(--arc-angle)));
  transition: transform 0.9s var(--arc-ease);
  will-change: transform;
}

/* ドラッグ中は指に追従させる（トランジションが挟まると遅れて付いてくる） */
.arc-stage.is-dragging .arc-card {
  transition: none;
}

.arc-card__inner {
  position: relative;
  /* 左右16px → 12px（2026-09-11）。本文の1行が280-32=248pxしか取れず、
     全角18文字（14px×18=252px）が1文字だけあふれて「す。」が3行目に落ちていた。
     12pxにすると256px取れて18文字まで1行に収まる。 */
  padding: calc(var(--arc-photo-h) - 72px) 12px 20px;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.4s ease;
}

.arc-card__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--arc-photo-h);
  margin: 0;
  overflow: hidden;
}

/* 画像は枠より40px大きく置いて上にずらしてある。ホバーでカードが持ち上がるとき
   画像だけ元位置へ戻すことで、中の写真が動かずに枠だけ動いて見える（参考サイトと同じ） */
.arc-card__photo img {
  width: 100%;
  height: calc(var(--arc-photo-h) + 40px);
  object-fit: cover;
  transform: translateY(-20px);
  transition: transform 0.4s ease;
}

.arc-card__num {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  font-family: var(--arc-en);
  color: var(--arc-accent);
}

.arc-card__num span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
}

.arc-card__num b {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
}

.arc-card__title {
  margin: 14px 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--arc-accent);
}

/* ⚠️ 本文の高さは**3行ぶんを常に確保する**（2026-09-11）。
   カードは扇状に並ぶので、1枚だけ背が高いと下端が揃わずに崩れて見える。
   日本語は1文字増えただけで折り返しが増える（PCは17文字までが1行・18文字で2行に割れる）ので、
   文言の差し替えのたびにカードの高さが変わってしまう。
   min-height で先に3行ぶん取っておけば、2行でも3行でも8枚の高さが揃う。
   ⚠️ 4行になると再び崩れる。文言を替えたら行数を実測すること
      （回転が掛かっているので getBoundingClientRect ではなく offsetHeight で測る）。 */
.arc-card__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  min-height: calc(14px * 1.7 * 3);
  color: var(--arc-ink);
}

/* 見出しの折り返し位置（2026-09-11）。
   「状況に応じて使い分ける求人媒体」は15文字あり、375pxだと 327px しか取れないので
   **「…求人媒」／「体」と1文字だけ落ちる**（実測）。意味の切れ目で折り返させる。
   ⚠️ PCでは1行に収まるので改行させない。 */
.arc-head-br { display: none; }

@media screen and (max-width: 767px) {
  .arc-head-br { display: inline; }
}

.arc-hint {
  margin-top: 8px;
  font-family: var(--arc-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-align: center;
  color: rgba(34, 34, 34, 0.4);
}

/* マウスなら DRAG、指なら SWIPE（hover できない＝タッチ主体の端末） */
.arc-hint__swipe { display: none; }

@media (hover: none) {
  .arc-hint__drag { display: none; }
  .arc-hint__swipe { display: inline; }
}

@media (hover: hover) {
  .arc-card.is-active:hover .arc-card__inner {
    transform: translateY(-20px);
  }

  .arc-card.is-active:hover .arc-card__photo img {
    transform: translateY(0);
  }
}

/* 768〜1199px。カードの寸法は変えず、開き具合と枚数だけ落とす。
   ⚠️ 画面幅に比例してカードごと縮める書き方（トップの --hs-u 方式）を一度試したが、
   箱だけ縮んで font-size は縮まないので本文が白地からはみ出した（実測で確認済み）*/
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .arc-slider {
    --arc-step: 320px;
    --arc-limit: 3;
  }
}

/* 767px以下。LPの枠（#hr-page-wrap 最大430px）に収めるため、
   vw だけでなく px の上限を併記して頭打ちにする（431〜767pxで枠から出るのを防ぐ）*/
@media screen and (max-width: 767px) {
  .arc-slider {
    /* 62vw → 66vw（2026-09-11）。375pxで233px＝本文が209pxしか取れず、
       全角18文字（12px×18=216px）が入らなかった。66vwなら247pxで223px取れる。
       上限260pxは #hr-page-wrap（最大430px）に収めるための頭打ちなので据え置き。 */
    --arc-card-w: min(66vw, 260px);
    --arc-photo-h: var(--arc-card-w);
    --arc-card-h: calc(var(--arc-card-w) + 148px);   /* 同上（本文3行ぶん） */
    --arc-step: calc(var(--arc-card-w) * 0.8);
    --arc-angle: 12deg;
    --arc-origin: calc(var(--arc-card-w) + 120px);
    --arc-drop: 20px;
    --arc-limit: 2;

    padding: 16px 0 20px;
  }

  .arc-card__inner {
    padding: calc(var(--arc-photo-h) - 52px) 12px 16px;
  }

  .arc-card__num {
    width: 72px;
    height: 72px;
  }

  .arc-card__num b {
    font-size: 24px;
  }

  .arc-card__title {
    margin: 10px 0 8px;
    font-size: 16px;
  }

  .arc-card__text {
    font-size: 12px;
    min-height: calc(12px * 1.7 * 3);
  }
}

/* 360px以下（iPhone SE 第1世代など）。カードが211pxまで縮んで本文が187pxしか取れず、
   「職種＋地域」のように括弧を含む行が4行に割れる。確保を4行ぶんに増やして高さを揃える。
   ⚠️ 実測して決めた値。文言を替えたらこの幅でも行数を数え直すこと。 */
@media screen and (max-width: 360px) {
  .arc-card__text {
    min-height: calc(12px * 1.7 * 4);
  }

  .arc-slider {
    --arc-card-h: calc(var(--arc-card-w) + 168px);
  }
}