/* ==========================================================================
   /staff.html(営業代理店募集) 専用CSS
   2026-09-08 全面改訂: 「広告売上の60%」を主役に据えた募集LPへ作り直した。

   🔴 このCSSは main.css より **前** に読まれる(AreaChrome の extraStyles)。
      同じ強さのセレクタでは main.css が勝つので、ここでは main.css に存在しない
      `ag_`(agency) 接頭辞の独自クラスだけを使い、既存クラスを上書きしない。
      ★旧デザインの .staff_top / .staff_pt / .buss_pt / .sup_pt / .fstep 系は
        このページ専用で他に利用箇所が無かったため main.css から削除した(2026-09-08)。

   🔴 このサイトのPC/SPの境目は **1200px**(main.css の .pc/.sp・keisai.css と同じ)。
      767px ではない。1200px で測るとSP表示のままなので、PCの確認は 1201px 以上で行うこと。
      本ファイルは **モバイルファースト**で書き、PCを @media(min-width:1201px) で足す。

   🔴 数字(60% / 24,000円 等)は文言であって CSS では持たない。
      料金の正本は app/keisai.html/pricing.ts、マージン率の正本は dairiten.margin_rate。

   🔴 太字は **700 まで**。800 を使わないこと。
      見出しのWebフォント(Zen Maru Gothic)は **500と700の2ウェイトしか読み込んでいない**
      (AreaChrome の <link>)。800 を指定するとブラウザが擬似ボールド(faux bold)で
      描き、輪郭が滲む。ウェイトを1本増やすと1ページあたり130〜215KB増えるので、
      「太くしたいから900を足す」はしないこと(→ docs/public-performance-tuning.md)。

   🔴 ヒーロー背景画像はまだ入っていない(澤口さんが作成予定・2026-09-08時点)。
      画像が用意できたら .ag_hero_bg のマークアップを足すだけで効くようにしてある。
      PC用 2400x1000px / SP用 780x900px / WebP / 各150KB以下。
      文字が乗るのは PC=左半分・SP=上半分なので、その側に主役を置かないこと。
   ========================================================================== */

.ag_lp {
  /* このページ内だけで使う色。main.css のブランド色から取っている
     (#ec6e9a=サイトのピンク / #c2356a=濃いピンク / #7c4140 系の文字色を少し紫寄りにした) */
  --ag-ink: #2b2230;
  --ag-ink2: #5c4f63;
  --ag-pink: #ec6e9a;
  --ag-pink-d: #c2356a;
  --ag-pale: #fdf1f5;
  --ag-cream: #fbf8f9;
  --ag-night: #191228;
  --ag-line: #ecdfe6;

  color: var(--ag-ink);
  font-size: 15px;
  line-height: 1.8;
  background: #fff;
}

/* 内側の幅。main.css の .layout(max-width:1200px・左右padding無し)は使わない。
   SPで文字が画面端に貼り付くため、ここでは padding を必ず持つ器を用意する。 */
.ag_in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 18px;
}

.ag_sec {
  padding: 44px 0;
}

.ag_h2 {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
}

/* 🔴 main.css 冒頭のリセット(108-116行)が **ほぼ全要素に font-weight:500** を当てている。
   そのため span / b / i / em / small は、親の見出しが太くても太さを引き継がない。
   実測: <b>=500、見出しの中の <span>=500 になっていた(2026-09-08 の検証で発見)。
   🔴 エラーは出ず「強調したつもりの箇所が普通の文字で出る」だけなので目視でしか気づけない。
      このページに inline 要素を足すときは、必ず太さを明示するか inherit させること。 */
.ag_lp b {
  font-weight: 700;
}

.ag_nb,
.ag_big,
.ag_big i,
.ag_row_out small {
  font-weight: inherit;
}

/* 日本語の見出しが意味の途中で折り返さないようにする器。
   例: 「が、そのままあ／なたの取り分。」「スナック・バー専門だか／ら、」
   word-break:auto-phrase は Chrome系だけなので(iOS Safari は未対応)、
   読ませたい見出しは**意味のかたまり**を nowrap にして、どのブラウザでも同じ位置で折る。
   🔴 かたまりが器より長いと横にはみ出す。SP(390px)で収まる長さだけに使うこと。 */
.ag_nb {
  white-space: nowrap;
}

/* 上の補助。対応ブラウザではさらに自然な位置で折れる(非対応でも実害なし) */
.ag_lp h1,
.ag_h2,
.ag_reasons h3,
.ag_support h3,
.ag_steps h3,
.ag_faq dt {
  word-break: auto-phrase;
}

.ag_lead {
  margin: 0 0 24px;
  font-size: 13.5px;
  color: var(--ag-ink2);
}

.ag_tint {
  background: var(--ag-cream);
}

/* ------------------------------------------------------------ ファーストビュー */

.ag_hero {
  position: relative;
  background: var(--ag-night);
  color: #efe6ee;
  overflow: hidden;
}

/* ネオンの滲み。画像が無くても画面が成立するように、この2つのグラデだけで持たせている */
.ag_hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    radial-gradient(120% 70% at 88% 6%, rgba(236, 110, 154, 0.34) 0%, rgba(236, 110, 154, 0) 62%),
    radial-gradient(90% 60% at 4% 96%, rgba(124, 86, 180, 0.3) 0%, rgba(124, 86, 180, 0) 60%);
}

/* 背景写真(2026-09-08 投入)。PC 1600x666 / SP 780x900 の**別画像**を picture で出し分ける。 */
.ag_hero_bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}

.ag_hero_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 🔴 SPのヒーローは 390x697 で、画像(780x900)より縦長になるため左右が切られる。
     中央(既定)で切ると**看板の縦積みが右端で欠ける**＝このページの一番の見せ場が消える。
     62% で切ると 5F〜1F の看板がちょうど収まる(2026-09-08 実測。50%/68%/80%と比較)。 */
  object-position: 62% center;
  /* 2026-09-09: 0.62 → 0.88。下のスクリムと**掛け算**になるため、0.62 のときは
     見出しが乗る一番上で写真が 5%(0.62×0.08) しか残っておらず、実質 #191228 の単色だった。
     🔴 明るさは「この値」と「下のスクリム」の2つで決まる。片方だけ見て判断しないこと。 */
  opacity: 0.88;
}

/* 🔴 スクリム(暗い覆い)。**これが無いと文字が読めない。**
   写真をそのまま敷くと、リード文・バッジ・注記が背景のネオンに負ける(2026-09-08 実測)。
   SPは「上ほど濃く」＝見出しと60%が乗る上半分を確実に暗くする。
   PC(下のメディアクエリ)は「左ほど濃く」＝見出しが左、CTAが右に来るため。
   🔴 画像を差し替えたら、必ずここの濃さを見直すこと。

   2026-09-09(澤口さんのご指摘「暗すぎる」): 濃さを下げた。写真が実際に見えている割合
   (= img の opacity × (1 − ここの alpha)) は SP上→下で 5.0/12.4/27.9/31.0% → 19.4/31.7/52.8/59.8%。
   🔴 この画面で一番先に読めなくなるのは .ag_cta_note(#c0b4c9・11.5px)。
      これ以上明るくするときは、まずその注記のコントラストで頭打ちになる。 */
.ag_hero_bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(25, 18, 40, 0.78) 0%,
    rgba(25, 18, 40, 0.64) 42%,
    rgba(25, 18, 40, 0.4) 72%,
    rgba(25, 18, 40, 0.32) 100%
  );
}

.ag_hero .ag_in {
  position: relative;
  padding-top: 36px;
  padding-bottom: 40px;
}

.ag_eyebrow {
  margin: 0 0 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #f7a9c6;
}

.ag_hero h1 {
  margin: 0;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: #fff;
}

/* このページで唯一の「派手な場所」。ここ以外は静かにしておくこと。 */
.ag_big {
  display: block;
  margin: 6px 0 2px;
  font-size: 78px;
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--ag-pink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px rgba(236, 110, 154, 0.42);
}

.ag_big i {
  font-style: normal;
  font-size: 40px;
  letter-spacing: 0;
}

.ag_hero_txt {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: 14.5px;
  line-height: 1.85;
  color: #d9cee0;
}

.ag_badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.ag_badges li {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(247, 169, 198, 0.42);
  color: #fbdce8;
  font-size: 12px;
  font-weight: 700;
}

/* ------------------------------------------------------------------- 応募ボタン */

.ag_cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 0;
  padding: 17px 20px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f0789f, #d9457a);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(217, 69, 122, 0.42);
}

.ag_cta::after {
  content: "›";
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

.ag_cta_ghost {
  margin-top: 10px;
  padding: 13px 20px;
  background: none;
  border: 1px solid rgba(247, 169, 198, 0.55);
  color: #fbdce8;
  font-size: 14.5px;
  box-shadow: none;
}

/* 🔴 ヒーローの中で**一番先に読めなくなる**のがこの注記(11.5px の細い字)。
   2026-09-09: 背景を明るくした分、#9d90a8 → #c0b4c9 へ上げた。
   ヒーローを今より明るくするときは、まずここのコントラストが頭打ちになる。 */
.ag_cta_note {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: #c0b4c9;
  text-align: center;
}

/* --------------------------------------------------------------- 収益イメージ */

.ag_money {
  background: var(--ag-night);
  color: #efe6ee;
}

.ag_money .ag_h2 {
  color: #fff;
}

.ag_money .ag_lead {
  color: #c6b9cf;
}

.ag_rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag_row {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(247, 169, 198, 0.2);
}

.ag_row_cond {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #bfb2c9;
}

.ag_row_calc {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.ag_row_src {
  font-size: 14px;
  color: #d9cee0;
  text-decoration: line-through;
  text-decoration-color: rgba(217, 206, 224, 0.45);
}

.ag_row_arrow {
  font-size: 13px;
  color: #f7a9c6;
}

.ag_row_out {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ag-pink);
}

.ag_row_out small {
  margin-left: 1px;
  font-size: 14px;
}

.ag_stock {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(236, 110, 154, 0.14);
  border: 1px solid rgba(247, 169, 198, 0.32);
  font-size: 14px;
  line-height: 1.8;
  color: #f6e7ef;
}

.ag_stock b {
  color: #fff;
}

.ag_note {
  margin: 18px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: #9d90a8;
}

/* ------------------------------------------------------------- 営業しやすい理由 */

.ag_reasons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ag-reason;
}

.ag_reasons > li {
  padding: 20px 18px;
  border: 1px solid var(--ag-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(43, 34, 48, 0.04);
  counter-increment: ag-reason;
}

.ag_rnum {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--ag-pale);
  color: var(--ag-pink-d);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.ag_rnum::before {
  content: "理由 0" counter(ag-reason);
}

.ag_reasons h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  text-wrap: balance;
}

.ag_reasons p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ag-ink2);
}

.ag_reasons em {
  font-style: normal;
  font-weight: 700;
  color: var(--ag-pink-d);
}

/* ------------------------------------------------------- 未経験でも始めやすい */

.ag_checks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag_checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--ag-line);
  font-size: 14.5px;
  line-height: 1.75;
}

.ag_checks li:last-child {
  border-bottom: 0;
}

/* チェックマーク。画像を増やさずCSSだけで描く(リクエストを増やさないため) */
.ag_checks li::before {
  content: "";
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 4px;
  border-radius: 50%;
  background-color: var(--ag-pink);
  -webkit-mask: no-repeat center/11px 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6l4 4L14 3.6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask: no-repeat center/11px 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6l4 4L14 3.6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ サポート */

.ag_support {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag_support li {
  padding: 17px;
  border: 1px solid var(--ag-line);
  border-radius: 12px;
  background: #fff;
}

.ag_support h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ag-pink-d);
}

.ag_support p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ag-ink2);
}

/* --------------------------------------------------------------------- 流れ */

.ag_steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag_steps > li {
  position: relative;
  padding: 0 0 22px 52px;
}

.ag_steps > li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--ag-pink), rgba(236, 110, 154, 0.25));
}

.ag_sn {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ag-pink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ag_steps h3 {
  margin: 4px 0 6px;
  font-size: 16px;
  font-weight: 700;
}

.ag_steps p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ag-ink2);
}

/* ---------------------------------------------------------------------- FAQ */

.ag_faq {
  margin: 0;
}

.ag_faq > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--ag-line);
}

.ag_faq > div:last-child {
  border-bottom: 0;
}

.ag_faq dt {
  display: flex;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
}

.ag_faq dt::before {
  content: "Q";
  flex: none;
  color: var(--ag-pink);
  font-weight: 700;
}

.ag_faq dd {
  margin: 7px 0 0 22px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ag-ink2);
}

.ag_faq dd b {
  color: var(--ag-ink);
}

/* 対応エリアは条件そのものなので、本文に埋もれないよう帯にする */
.ag_area {
  display: block;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--ag-pale);
  color: var(--ag-pink-d);
  font-size: 13.5px;
  line-height: 1.7;
}

/* ----------------------------------------------------------------- 締めのCTA */

.ag_closing {
  background: var(--ag-pale);
  text-align: center;
}

.ag_closing .ag_h2 {
  margin-bottom: 12px;
  font-size: 21px;
}

.ag_closing p {
  margin: 0 auto 8px;
  max-width: 36em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ag-ink2);
}

.ag_closing .ag_cta {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.ag_closing .ag_cta_note {
  color: #8b7f93;
}

/* --------------------------------------------------- SPの下部固定バー(応募) */

/* ★ .wrapper は overflow-x:hidden を持つため position:sticky が効かない。
   ListChrome の afterWrapper で .wrapper の外に出したうえで fixed にしている。 */
.ag_fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  padding: 9px 14px 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--ag-line);
}

.ag_fixed .ag_cta {
  margin: 0;
  padding: 14px 18px;
  font-size: 15.5px;
}

/* 固定バーでフッター最下部が隠れないよう余白を確保(店舗PR詳細と同じ考え方)。
   バー実高≒69px + iPhoneのホームバー領域を見込む。 */
body.p_agency .wrapper {
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================== PC(1201px〜) */

@media screen and (min-width: 1201px) {
  .ag_lp {
    font-size: 16px;
  }

  .ag_in {
    padding: 0 24px;
  }

  .ag_sec {
    padding: 72px 0;
  }

  .ag_h2 {
    font-size: 28px;
  }

  .ag_lead {
    margin-bottom: 34px;
    font-size: 15px;
  }

  /* 見出しを中央に置く節。左半分に文字が寄ると、下のグリッドと軸が合わない */
  .ag_center {
    text-align: center;
  }

  .ag_center .ag_lead {
    max-width: 52em;
    margin-left: auto;
    margin-right: auto;
  }

  .ag_hero .ag_in {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 56px;
    align-items: center;
    padding-top: 74px;
    padding-bottom: 78px;
  }

  /* PCは横長画像(1600x666)を使うので切り位置の調整は要らない(SP用の62%を打ち消す) */
  .ag_hero_bg img {
    object-position: center;
  }

  /* PCは見出しが左・CTAが右なので、左ほど濃いスクリムに差し替える(SPの上下方向とは別)。
     2026-09-09: SPと同じ理由で濃さを下げた。左端は 0.94 のとき写真が 3.7% しか残っておらず、
     見出しの背後が単色になっていた(→ 上の .ag_hero_bg img のコメント)。 */
  .ag_hero_bg::after {
    background:
      linear-gradient(
        90deg,
        rgba(25, 18, 40, 0.8) 0%,
        rgba(25, 18, 40, 0.68) 34%,
        rgba(25, 18, 40, 0.44) 62%,
        rgba(25, 18, 40, 0.32) 100%
      ),
      linear-gradient(180deg, rgba(25, 18, 40, 0.22) 0%, rgba(25, 18, 40, 0) 40%, rgba(25, 18, 40, 0.42) 100%);
  }

  .ag_hero h1 {
    font-size: 38px;
  }

  .ag_big {
    margin: 10px 0 4px;
    font-size: 118px;
  }

  .ag_big i {
    font-size: 58px;
  }

  .ag_hero_txt {
    font-size: 16px;
  }

  .ag_cta {
    margin-top: 0;
  }

  /* 🔴 上の `.ag_cta { margin-top: 0 }` は**ゴーストボタンにも当たる**(同じ強さで後勝ち)。
     そのため素の .ag_cta_ghost の 10px が消え、PCで2つのボタンがくっついていた
     (2026-09-08 澤口さんのご指摘)。PCはここで改めて間隔を指定する。 */
  .ag_cta_ghost {
    margin-top: 16px;
  }

  .ag_cta_note {
    text-align: left;
  }

  .ag_rows {
    flex-direction: row;
    gap: 14px;
  }

  .ag_row {
    flex: 1;
  }

  /* PCは3枚を横に並べるので、金額を必ず2行目へ落として高さと視線の位置を揃える。
     (揃えないと、桁の多い136,800円だけが折り返して1枚だけ形が変わる) */
  .ag_row_out {
    flex-basis: 100%;
    font-size: 30px;
  }

  .ag_reasons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .ag_reasons > li {
    padding: 26px 24px;
  }

  .ag_two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
  }

  .ag_support {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .ag_support li {
    padding: 22px;
  }

  /* PCでは5ステップを横に並べる。縦線も横向きへ描き替える */
  .ag_steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }

  .ag_steps > li {
    padding: 44px 0 0;
  }

  .ag_steps > li:not(:last-child)::before {
    left: 34px;
    right: 0;
    top: 16px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--ag-pink), rgba(236, 110, 154, 0.25));
  }

  .ag_faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
  }

  .ag_closing .ag_h2 {
    font-size: 28px;
  }

  /* PCでは固定バーを出さない(常時見えていると邪魔になるだけで、
     PCは締めのCTAまでスクロールする距離がSPより短い) */
  .ag_fixed {
    display: none;
  }

  body.p_agency .wrapper {
    padding-bottom: 0;
  }
}