/* ============================================================
   改良版（/recruit-preview/）だけに読み込む追加分。
   Clarity 30日分（2026-08-30〜09-28）のタップ・スクロール解析を受けた修正。
   本番の style.css / sp*.css には手を入れない。
   ============================================================ */

/* 未確定の項目。クライアント確認後に本文へ差し替える */
.tbd {
  background: linear-gradient(transparent 55%, #ffe36b 55%);
  font-weight: 700; color: var(--ink-2);
}

/* ---- 募集要項（採用情報の直下に追加）。見た目は会社概要の表と同じ ---- */
.req-note { font-size: 1.6rem; color: var(--ink-3); margin-top: 1.6rem; }

@media (min-width: 901px) {
  /* 募集要項を差し込んだぶん FLOW 以下を --dy 下げ、さらに会社概要（高さ --ha）と
     採用情報〜ENTRY（高さ --hb）の上下を入れ替えた。HTML側の --y は生成時に変換済み */
  :root { --dy: 177rem; --ha: 168.2rem; --hb: 567.1rem; }
  .page { height: calc(2673.8rem + var(--dy) + var(--kv-shift)); }
  .corp       { top: calc(2095.2rem + var(--hb)); }
  .flow li    { top: calc(2317.9rem + var(--dy) - var(--ha)); }
  .qa         { top: calc(2403.8rem + var(--dy) - var(--ha)); }
  .cta        { top: calc(2591rem   + var(--dy) - var(--ha)); }
  .foot       { top: calc(2633.1rem + var(--dy)); }
  .foot__bar  { top: calc(2666.5rem + var(--dy)); }
  .corp.req-table { left: 26.6rem; top: 2138.8rem; width: 138.9rem; }

  .stick-cta, .line-fast { display: none; }
  /* ヘッダーの帯は押すと先頭へ（PCでも18回押されていた） */
  .head-bar { cursor: pointer; }
}

@media (max-width: 900px) {
  /* ---- 募集要項 ---- */
  .sec--flow > h3.req-ttl { font-size: var(--sp-h2); letter-spacing: .02em; }
  .sec--flow .req-table dd { white-space: pre-line; }
  .req-note { font-size: var(--sp-caption); line-height: var(--lh-sm); margin-top: var(--sp-200); }

  /* ---- FV：写真を押したら次へ進む（30日で171タップ＝全タップの15%が空振りしていた） ---- */
  body:has(.sec) .kv, body:has(.sec) .fv-text { cursor: pointer; }
  .sec--copy { scroll-margin-top: var(--sp-700); }

  /* ---- 画面下の追従CTA（応募ボタンがページ95%地点にしか無かった） ----
     角を持たない全幅の帯。LINE緑とコーポレートの赤で左右に割る */
  .stick-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--ink);
    translate: 0 110%;
    transition: translate var(--dur) var(--ease);
  }
  .stick-cta.is-on { translate: 0 0; }
  body:has(#site-menu:popover-open) .stick-cta { translate: 0 110%; }
  .stick-cta a {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-75);
    height: var(--sp-700);
    color: #fff; text-decoration: none;
    font-family: var(--gothic); font-weight: 900;
    font-size: var(--t-base); line-height: 1; letter-spacing: .06em;
  }
  .stick-cta__line { background: var(--line); }
  .stick-cta__form { background: var(--red); }
  .stick-cta__line img { width: var(--sp-400); height: var(--sp-400); }
  .stick-cta__form img { width: var(--sp-100); height: var(--sp-200); }
  .stick-cta a:active { filter: brightness(.9); }
  /* 帯のぶん最下部を持ち上げ、コピーライトが隠れないようにする */
  body:has(.stick-cta) .sec--footer { padding-bottom: calc(var(--sp-700) + env(safe-area-inset-bottom)); }

  /* ---- entry：入力が面倒な人の逃げ道を先頭に置く（フォーム後半で7割が離脱していた） ---- */
  .line-fast {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-100);
    margin: 0 var(--sp-pad); padding: var(--sp-200);
    background: var(--line); color: #fff; text-decoration: none;
    font-family: var(--gothic); font-weight: 900; font-size: var(--t-base); letter-spacing: .04em;
  }
  .line-fast span { flex: 1; font-size: var(--t-lg); line-height: var(--lh-sm); }
  .line-fast small { display: block; font-weight: 600; font-size: var(--sp-caption); line-height: var(--lh-xs); letter-spacing: .02em; }
  .line-fast img { width: var(--sp-400); height: var(--sp-400); flex: none; }
  .line-fast img.line-fast__arrow { width: var(--sp-100); height: var(--sp-200); }
}

/* 任意項目のラベル（自己PRを任意に変更） */
.req.req--opt { background: #9a9a9a; }

/* ============================================================
   表（募集要項・会社概要）のリメイク
   赤ベタの見出しセル＋白ベタのセルをやめ、白い1枚のパネルに罫線で行を切る。
   見出しは英字（Anton）＋日本語の2段。募集要項の頭に要点4つを黒帯で出す。
   角丸は使わない。.sec を付けて style.css / sp-sections.css の .corp より強くする
   ============================================================ */
.sec .corp { background: #fff; border-top: .6rem solid var(--red); }
.sec .corp dl { display: grid; grid-template-columns: 26rem minmax(0, 1fr); gap: 0; margin: 0; }
.sec .corp dt, .sec .corp dd {
  margin: 0; border-radius: 0; background: none;
  border-top: 1px solid #e4e4e4;
}
.sec .corp dt:first-of-type, .sec .corp dt:first-of-type + dd { border-top: 0; }
.sec .corp dt {
  display: block; place-items: initial; text-align: left;
  color: var(--ink-2); font-weight: 700; font-size: 1.8rem; line-height: 3rem; letter-spacing: .06em;
  padding: 2.2rem 2rem 2.2rem 0;
}
.sec .corp dt::before {
  content: attr(data-en); display: block;
  font-family: var(--display); font-weight: 400; color: var(--red);
  font-size: 1.3rem; line-height: 1.6rem; letter-spacing: .14em; margin-bottom: .4rem;
}
.sec .corp dd {
  color: var(--ink-2); font-weight: 400; font-size: 1.8rem; line-height: 3.2rem;
  padding: 3.2rem 0 2.2rem; white-space: pre-line;
}

/* 要点（月給・休日・時間・昇給）。サイトの語彙に合わせる：
   項目名は赤ベタのタグ、数字は FLOW / Q&A と同じ Anton の赤 */
.req-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); max-width: none;
  border-bottom: 1px solid #e4e4e4;
}
.req-fact { margin: 0; }
.req-fact__k {
  display: inline-block; background: var(--red); color: #fff;
  font-weight: 800; font-size: 1.5rem; line-height: 2.4rem; letter-spacing: .12em;
  padding: .2rem 1.2rem;
}
.req-fact__v {
  display: block; margin-top: 1.4rem; color: var(--red);
  font-family: var(--display); font-weight: 400; font-size: 8rem; line-height: 1; letter-spacing: 0;
}
.req-fact__v small {
  font-family: var(--gothic); font-weight: 900; font-size: 2.2rem; letter-spacing: .04em; margin-left: .4rem;
}
.req-fact__v small:first-child { margin: 0 .4rem 0 0; }

@media (min-width: 901px) {
  .sec .corp { padding: 1rem 6.4rem 1.6rem; }
  .req-facts { padding: 3.6rem 0 3.2rem; }
}

@media (max-width: 900px) {
  .sec > .corp { margin-inline: var(--sp-pad); padding: 0 var(--sp-300) var(--sp-100); }
  .sec .corp dl { display: block; }
  .sec .corp dt { font-size: var(--sp-small); line-height: var(--lh-sm); padding: var(--sp-200) 0 var(--sp-50); }
  .sec .corp dt::before { font-size: var(--sp-caption); line-height: var(--lh-xs); margin-bottom: .2rem; }
  .sec .corp dd {
    border-top: 0; padding: 0 0 var(--sp-200);
    font-size: var(--sp-small); line-height: var(--lh-ja);
  }
  .req-facts { grid-template-columns: 1fr 1fr; gap: var(--sp-300) var(--sp-200); padding: var(--sp-300) 0; }
  .req-fact__k { font-size: var(--sp-caption); line-height: var(--lh-xs); padding: .2rem var(--sp-75); }
  .req-fact__v { font-size: 4.4rem; margin-top: var(--sp-75); }
  .req-fact__v small { font-size: var(--sp-small); margin-left: .2rem; }
  .req-fact__v small:first-child { margin: 0 .2rem 0 0; }
}

/* ============================================================
   開いて4秒後の LINE ポップアップ（トップのみ・1訪問1回）
   サイトのXD座標とは無関係な重ね物なので、rem ではなく px で組む
   ============================================================ */
.line-pop {
  border: 0; padding: 0; margin: auto;
  width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  background: #fff; color: var(--ink-2); border-top: 6px solid var(--red);
  font-family: var(--gothic); overflow: auto;
  opacity: 0; translate: 0 16px;
  transition: opacity .3s cubic-bezier(.32,.72,0,1), translate .3s cubic-bezier(.32,.72,0,1);
}
.line-pop.is-open { opacity: 1; translate: 0 0; }
.line-pop::backdrop { background: rgba(0, 0, 0, .5); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.line-pop.is-open::backdrop { opacity: 1; }

/* 上の写真：FVと同じ kv.webp を切り出すだけ（画像は加工しない） */
.line-pop__img {
  position: relative; height: 150px; overflow: hidden;
  background: var(--ink) url("../assets/img/kv.webp") 50% 30% / cover no-repeat;
}
.line-pop__img::after { content: ""; position: absolute; inset: 0; background: rgba(11, 2, 0, .38); }
/* FV の「RYOMA RECRUIT」と同じく、赤い Anton を写真の下端に掛ける */
.line-pop__en {
  position: absolute; left: 20px; bottom: -6px; z-index: 1; margin: 0;
  font-family: var(--display); font-weight: 400; color: var(--red);
  font-size: 56px; line-height: .9; letter-spacing: -.01em;
}
.line-pop__body { padding: 20px 24px 20px; }
.line-pop__ttl { margin: 0; font-weight: 900; font-size: 22px; line-height: 1.4; letter-spacing: .04em; color: var(--ink-2); }
.line-pop__txt { margin: 8px 0 0; font-size: 14px; line-height: 1.8; color: var(--ink-3); word-break: auto-phrase; }
.line-pop:focus { outline: none; }
.line-pop__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 18px; height: 56px;
  background: var(--line); color: #fff; text-decoration: none;
  font-weight: 900; font-size: 17px; letter-spacing: .06em;
}
.line-pop__btn img { width: 30px; height: 30px; }
.line-pop__btn img.line-pop__arrow { width: 11px; height: 16px; }
.line-pop__btn:active { filter: brightness(.9); }
.line-pop__later {
  display: block; margin: 10px auto 0; padding: 6px 12px;
  background: none; border: 0; cursor: pointer;
  font: 700 13px/1.4 var(--gothic); color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px;
}
/* 閉じる：メニューの × と同じ2本線 */
.line-pop__close {
  position: absolute; right: 0; top: 0; z-index: 2;
  width: 44px; height: 44px; border: 0; cursor: pointer; background: var(--red);
}
.line-pop__close i {
  position: absolute; left: 12px; top: 21px; width: 20px; height: 2px; background: #fff;
}
.line-pop__close i:first-child { rotate: 45deg; }
.line-pop__close i:last-child  { rotate: -45deg; }
@media (prefers-reduced-motion: reduce) {
  .line-pop, .line-pop::backdrop { transition: none; }
}