@charset "UTF-8";
/* ============================================================
   営業代行（/sales/）専用スタイル

   指定の #E10600 は白地に 4.97:1 で、文字にも地にも使える（どちらも同値）。
   ただし 4.5:1 の基準ぎりぎりなので、12〜13pxの小さい文字とリンクには
   暗い版の #B80500（6.86:1）を使う。

   色相は 2° で、代行の深紅 349° とは 12°、リスト販売のオレンジ 24° とは
   22° しか離れていない。3事業とも赤系になるため、色では見分けきれない。
   見分けは2段ロゴのサービス名と、各ページの語彙で付ける。
   ============================================================ */

.page-sales{
  --brand:#B80500;         /* 文字・見出し。白地に6.86:1 */
  --brand-dark:#8A0400;
  --action:#E10600;        /* ボタンの塗り。白文字で4.97:1 */
  --action-dark:#B80500;
  --surface:#FFF1F0;
  --line:#F0DCDA;
  --vivid:#E10600;
  --line-strong:#9C7A77;
  --alert:#B4690E;
  --alert-bg:#FEF6EC;
}

/* 下書きの告知。draft を false にすると出なくなる */
.sl-draft{
  position:relative; z-index:300; background:#2F3438; color:#fff;
  font-size:13px; font-weight:700; text-align:center; padding:8px 16px;
}

/* ---------- FVイラストの動き（12秒ループ） ----------
   もともと予定のある1週間に、商談が1件ずつ入っていく。
   グレーは最初から出したままにして「もとからある予定」を示し、
   赤だけが増える。これで「足された」ことが動きで伝わる。
   代行LPのイラストと同じく、JSを使わず全要素を同じタイムラインに乗せる。 */
.hero__illu .sl-mt{opacity:0; transform-box:fill-box; transform-origin:center}
.hero__illu .sl-mt1{animation:sl-mt1 12s linear infinite}
.hero__illu .sl-mt2{animation:sl-mt2 12s linear infinite}
.hero__illu .sl-mt3{animation:sl-mt3 12s linear infinite}
.hero__illu .sl-mt4{animation:sl-mt4 12s linear infinite}
.hero__illu .sl-mt5{animation:sl-mt5 12s linear infinite}
@keyframes sl-mt1{0%,8%{opacity:0; transform:scale(.86)}13%,92%{opacity:1; transform:scale(1)}97%,100%{opacity:0; transform:scale(.86)}}
@keyframes sl-mt2{0%,16%{opacity:0; transform:scale(.86)}21%,92%{opacity:1; transform:scale(1)}97%,100%{opacity:0; transform:scale(.86)}}
@keyframes sl-mt3{0%,24%{opacity:0; transform:scale(.86)}29%,92%{opacity:1; transform:scale(1)}97%,100%{opacity:0; transform:scale(.86)}}
@keyframes sl-mt4{0%,32%{opacity:0; transform:scale(.86)}37%,92%{opacity:1; transform:scale(1)}97%,100%{opacity:0; transform:scale(.86)}}
@keyframes sl-mt5{0%,40%{opacity:0; transform:scale(.86)}45%,92%{opacity:1; transform:scale(1)}97%,100%{opacity:0; transform:scale(.86)}}

/* 動きを減らす設定の人には、5件入ったあとの状態を静止で出す */
@media (prefers-reduced-motion:reduce){
  .hero__illu .sl-mt{animation:none; opacity:1; transform:none}
}

/* ---------- 課題（文章だけの6項目。既存の .cond は図があるので分ける） ---------- */
.cond--text{grid-template-columns:1fr}
@media (min-width:600px){.cond--text{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.cond--text{grid-template-columns:repeat(3,1fr)}}
.cond--text li{display:flex; flex-direction:column; gap:5px}

/* ---------- 3ステップ ---------- */
.flow3{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:780px){.flow3{grid-template-columns:repeat(3,1fr)}}
.flow3__i{
  background:var(--white); border:1px solid var(--line); border-top:4px solid var(--action);
  border-radius:9px; padding:20px 20px 22px;
}
.flow3__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:7px; background:var(--brand); color:#fff;
  font-family:var(--num); font-size:14px; font-weight:700; margin-bottom:9px;
}
/* 図版の帯。課題セクションの .sol__fig と同じ作りにして、カード上端まで裏地を伸ばす */
.flow3--fig .flow3__i{padding-top:0}
.f3fig{
  margin:0 -20px 16px; padding:14px 18px;
  background:#F7F8F9; border-bottom:1px solid var(--line);
}
.f3fig .sol__fig-svg{width:100%; max-width:280px; height:auto; display:block}

/* 番号ではなくラベル。ここは手順ではなく「何を預けて何が返るか」の箱なので */
.flow3__l{
  display:inline-block; background:var(--surface); color:var(--brand); border-radius:5px;
  padding:3px 10px; font-size:11.5px; font-weight:700; margin-bottom:10px; letter-spacing:.03em;
}
.flow3__i b{display:block; font-size:17px; margin-bottom:5px}
.flow3__i p{font-size:14px; line-height:1.85; color:var(--sub); margin:0}

/* ---------- 対応範囲 ---------- */
.chg{margin-bottom:26px}
.chg__h{font-size:17px; margin:0 0 3px}
/* 48em だと説明文が語の途中で折り返す。1行に収まる幅まで広げている */
.chg__d{font-size:13.5px; color:var(--sub); margin:0 0 12px; max-width:66em;
  text-wrap:balance}  /* 折り返すときは行の長さを揃える（末尾が1〜2文字にならないように） */
.chl{list-style:none; margin:0; padding:0; display:grid; gap:9px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.ch{
  background:var(--white); border:1px solid var(--line); border-radius:8px;
  padding:13px 15px; display:flex; flex-direction:column; gap:4px;
}
/* アイコンと見出しを1行に。アイコンは20pxで出るので、SVG側の線を細くしないこと */
.ch__h{display:flex; align-items:center; gap:8px}
.ch__i{width:20px; height:20px; flex-shrink:0; display:block}
.ch__n{font-size:15px}
.ch__d{font-size:13px; color:var(--sub); line-height:1.75}

/* ---------- なぜ効くのか ----------
   見た目は style.css の .flow をそのまま使っている（フォーム営業ページの
   「お客様にお願いするのは、この3つだけです」と同じ型）。
   ここに独自の指定を足すと、本家と見た目がずれるので足さないこと。 */

/* ---------- 実績 ----------
   数字は仮。公開前に実数へ差し替えること（テンプレ側にも同じ注意書きあり） */
.proof{
  list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:1fr;
}
@media (min-width:780px){.proof{grid-template-columns:repeat(3,1fr)}}
.proof li{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px 20px; display:flex; flex-direction:column;
}
.proof__lab{display:block; font-size:12.5px; font-weight:700; color:var(--sub); line-height:1.5}
.proof__as{display:block; font-size:10.5px; font-weight:400; color:var(--sub); margin-top:2px}
.proof__v{
  display:block; margin:10px 0 8px; font-family:var(--num); font-size:40px; font-weight:700;
  line-height:1; color:var(--brand); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.proof__v small{font-family:inherit; font-size:17px; margin-left:2px; letter-spacing:0}
.proof__v em{font-style:normal; font-size:.66em; margin:0 2px}
.proof__d{font-size:12.5px; color:var(--sub); line-height:1.8}

/* ---------- 料金（稼働時間を主役にしたカード） ---------- */
.pls{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:720px){.pls{grid-template-columns:repeat(2,1fr)}}
.pl{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:20px 20px 22px; display:flex; flex-direction:column;
}
.pl--rec{border:2px solid var(--action); padding:19px 19px 21px}
.pl__badge{
  display:inline-block; align-self:flex-start; margin-bottom:9px;
  background:var(--action); color:var(--white); border-radius:99px;
  padding:3px 10px; font-size:11px; font-weight:700;
}
/* バッジのない方に同じ高さを空けて、稼働時間の数字を横で揃える */
@media (min-width:720px){
  .pl:not(.pl--rec)::before{content:""; display:block; height:35px}
}
.pl__n{font-size:15px; font-weight:700; margin:0 0 3px}
/* 稼働時間がいちばん大きい。何を買うのかを先に言い切る */
.pl__h{
  font-family:var(--num); font-size:40px; font-weight:700; color:var(--brand);
  line-height:1.02; margin:0; font-variant-numeric:tabular-nums;
}
.pl__h span{font-family:inherit; font-size:15px; color:var(--ink); margin-left:4px;
  font-weight:700}
/* 見積りのプランは数字が出せないので、同じ位置に同じ重さの文字を置く */
.pl__h--ask{font-size:27px; letter-spacing:.02em}
.pl__d{font-size:13px; color:var(--sub); line-height:1.75; margin:7px 0 14px}
.pl__p{margin:0; display:flex; align-items:baseline; gap:4px; flex-wrap:wrap}
.pl__p b{font-family:var(--num); font-size:22px; font-weight:700;
  font-variant-numeric:tabular-nums}
.pl__p small{font-size:12px; color:var(--sub)}
.pl__p--ask{font-size:19px; color:var(--brand)}
.pl__cta{
  display:block; margin-top:14px; text-align:center; text-decoration:none;
  background:var(--action); color:var(--white); font-size:14px; font-weight:700;
  border-radius:7px; padding:12px 14px;
}
.pl__cta:hover{opacity:.88}
.pl__m{
  list-style:none; margin:14px 0 0; padding:13px 0 0;
  border-top:1px solid var(--line); display:grid; gap:7px; flex:1; align-content:start;
}
.pl__m li{display:flex; justify-content:space-between; gap:10px; font-size:13px}
.pl__m span{color:var(--sub)}
.pl__m b{font-family:var(--num); font-variant-numeric:tabular-nums; text-align:right}

/* 初回かぎりのトライアル。定額ではないので並びから外して別の見た目にする */
.tr{
  margin-top:16px; background:var(--surface); border:1px dashed var(--line-strong);
  border-radius:10px; padding:20px; display:grid; gap:16px; grid-template-columns:1fr;
}
@media (min-width:720px){.tr{grid-template-columns:230px 1fr; gap:26px; padding:24px 26px}}
.tr__badge{
  display:inline-block; background:var(--brand); color:var(--white); border-radius:4px;
  padding:3px 9px; font-size:11px; font-weight:700; letter-spacing:.04em;
}
.tr__n{font-size:15px; font-weight:700; margin:9px 0 2px}
.tr__h{font-family:var(--num); font-size:36px; font-weight:700; color:var(--brand);
  line-height:1.02; margin:0; font-variant-numeric:tabular-nums}
.tr__h span{font-family:inherit; font-size:14px; color:var(--ink); margin-left:4px;
  font-weight:700}
.tr__p{margin:6px 0 0; display:flex; align-items:baseline; gap:4px; flex-wrap:wrap}
.tr__p b{font-family:var(--num); font-size:21px; font-weight:700}
.tr__p small{font-size:12px; color:var(--sub)}
.tr__lead{font-size:14px; line-height:1.85; margin:0 0 12px; font-weight:700}
.tr__m{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:6px}
@media (min-width:560px){.tr__m{grid-template-columns:repeat(2,1fr); gap:6px 24px}}
.tr__m li{display:flex; justify-content:space-between; gap:10px; font-size:13px;
  border-bottom:1px solid var(--line); padding-bottom:5px}
.tr__m span{color:var(--sub)}
.tr__m b{font-family:var(--num); font-variant-numeric:tabular-nums}
.tr__note{font-size:12.5px; color:var(--sub); line-height:1.85; margin:0}

/* ---------- 流れ ---------- */
.steps4{counter-reset:s; list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:1fr}
@media (min-width:820px){.steps4{grid-template-columns:repeat(4,1fr)}}
/* 5ステップ版。4列固定だと最後の1つだけ折り返すので、入るだけ詰める */
.steps5{grid-template-columns:1fr}
@media (min-width:760px){.steps5{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}}
.steps4 li{position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:9px; padding:18px 18px 20px}
.steps4 li::before{counter-increment:s; content:counter(s);
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--brand); color:#fff;
  font-family:var(--num); font-size:13px; font-weight:700; margin-bottom:8px}
.steps4 b{display:block; font-size:15.5px; margin-bottom:3px}
.steps4 p{margin:0; font-size:13.5px; color:var(--sub); line-height:1.8}
.steps4 .d{
  display:inline-block; font-size:11px; font-weight:700; color:var(--brand);
  background:var(--surface); border-radius:4px; padding:2px 7px; margin-top:9px;
  font-family:var(--num);
}
/* 日数の合計。見出しで既に「5営業日」と言っているので、面で主張せず、
   上のステップに付いた日数を締める細い一行にする */
.steps__sum{
  display:flex; align-items:center; gap:14px;
  margin:18px 0 0; font-size:13px; color:var(--sub); letter-spacing:.02em;
}
.steps__sum::before,.steps__sum::after{content:""; flex:1; height:1px; background:var(--line)}
.steps__sum strong{
  font-family:var(--num); font-size:16px; font-weight:700; color:var(--brand); margin-left:4px;
}

/* 結果が見えるまでの目安 */
.tl{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--white);
}
@media (min-width:780px){.tl{grid-template-columns:repeat(3,1fr)}}
.tl li{padding:18px 20px 20px; border-top:1px solid var(--line)}
@media (min-width:780px){
  .tl li{border-top:0; border-left:1px solid var(--line)}
  .tl li:first-child{border-left:0}
}
@media (max-width:779px){.tl li:first-child{border-top:0}}
.tl__m{
  display:block; font-family:var(--num); font-size:12px; font-weight:700;
  color:var(--action); letter-spacing:.04em; margin-bottom:6px;
}
.tl b{display:block; font-size:15.5px; margin-bottom:4px}
.tl p{margin:0; font-size:13.5px; color:var(--sub); line-height:1.8}

/* 導入後に御社でやること。3つしかない、を量で見せる */
.todo{list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:1fr}
@media (min-width:780px){.todo{grid-template-columns:repeat(3,1fr)}}
.todo li{
  background:var(--white); border:1px solid var(--line); border-radius:9px; padding:15px 17px 17px;
}
.todo b{display:block; font-size:15px; margin-bottom:4px}
.todo span{font-size:13px; line-height:1.8; color:var(--sub)}

/* ---------- FAQ ---------- */
/* max-width だけだと中央見出しの下で左に寄る。本家の .faq-list と同じく auto で中央へ */
.sl-faq{display:grid; gap:8px; max-width:860px; margin-inline:auto}
.sl-faq details{background:var(--white); border:1px solid var(--line); border-radius:8px}
.sl-faq summary{cursor:pointer; padding:14px 17px; font-weight:700; font-size:15px; list-style:none}
.sl-faq summary::-webkit-details-marker{display:none}
.sl-faq summary::after{content:"＋"; float:right; color:var(--brand); font-weight:700}
.sl-faq details[open] summary::after{content:"−"}
.sl-faq details > div{padding:0 17px 15px}
.sl-faq p{margin:0; font-size:14px; line-height:1.9; color:var(--sub)}

/* ---------- 問い合わせ ---------- */
.sl-form{max-width:620px; margin-inline:auto; display:grid; gap:14px}
.sl-form label{display:grid; gap:5px}
.sl-form span{font-size:13.5px; font-weight:700}
.sl-form i{font-style:normal; font-size:11px; font-weight:700; color:#fff;
  background:var(--action); border-radius:3px; padding:1px 6px; margin-left:7px}
/* 入力済みの値と見分けがつくよう、本文より明るいグレーにする */
.sl-form input::placeholder,.sl-form textarea::placeholder{color:#9AA0A6; opacity:1}
.sl-form input,.sl-form textarea{
  width:100%; font:inherit; font-size:16px; padding:12px 14px;
  border:1px solid var(--line-strong); border-radius:6px; background:var(--white);
}
.sl-form input:focus,.sl-form textarea:focus{outline:2px solid var(--action); outline-offset:1px}
.sl-form__note{font-size:12.5px; color:var(--sub); margin:0}

/* FVの数値は3つ。style.css の .stats は4列固定なので、ここで3列に上書きする。
   中間幅（960px以下）は2列、600px以下は1列のまま共通の指定が効く。 */
/* 詳細度が .stats より高いため、style.css 側のメディアクエリが効かなくなる。
   同じ条件をここで書き直すこと（書かないと狭い画面でも3列のまま潰れる） */
.page-sales .stats{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){
  /* 2列になると3つ目が左端に来るので、罫線と余白をそこで切り直す */
  .page-sales .stats{grid-template-columns:repeat(2,1fr)}
  .page-sales .stats li:nth-child(3){padding-left:0; box-shadow:none}
}
@media (max-width:600px){
  .page-sales .stats{grid-template-columns:1fr}
}

/* ---------- 課題→解決の図版（.pairs は style.css 側。ここは動きと色だけ） ---------- */
.page-sales .sol__ck{color:var(--brand)}
.page-sales .sol__fig [class^="sl-f"]{transform-box:fill-box}
.page-sales .sl-fig2 [class^="sl-f2-b"]{transform-origin:center bottom}
.page-sales [class^="sl-f3-k"]{transform-origin:center}
.page-sales [class^="sl-f4-k"]{transform-origin:center}

/* JSが動かないときは初期値＝完成した絵のまま出す。だから .js-anim が付いたときだけ動かす */
.pairs.js-anim .sl-fig1 .sl-f1-a{animation:sl-fade 7s linear infinite .2s}
.pairs.js-anim .sl-fig1 .sl-f1-ar{animation:sl-fade 7s linear infinite 1.1s}
.pairs.js-anim .sl-fig1 .sl-f1-b{animation:sl-rise 7s linear infinite 1.7s}
.pairs.js-anim .sl-fig2 .sl-f2-b1{animation:sl-grow 7s linear infinite .5s}
.pairs.js-anim .sl-fig2 .sl-f2-b2{animation:sl-grow 7s linear infinite .8s}
.pairs.js-anim .sl-fig2 .sl-f2-b4{animation:sl-grow 7s linear infinite 1.1s}
.pairs.js-anim .sl-fig2 .sl-f2-b5{animation:sl-grow 7s linear infinite 1.4s}
.pairs.js-anim .sl-fig2 .sl-f2-b3{animation:sl-grow 7s linear infinite 1.9s}
/* ③ 反応が3つ返り、そのぶん予定が埋まる */
.pairs.js-anim .sl-fig3 .sl-f3-b1{animation:sl-fade 7s linear infinite .9s}
.pairs.js-anim .sl-fig3 .sl-f3-b2{animation:sl-fade 7s linear infinite 1.1s}
.pairs.js-anim .sl-fig3 .sl-f3-b3{animation:sl-fade 7s linear infinite 1.3s}
.pairs.js-anim .sl-fig3 .sl-f3-ar{animation:sl-fade 7s linear infinite 1.7s}
.pairs.js-anim .sl-fig3 .sl-f3-cal{animation:sl-rise 7s linear infinite 2s}
.pairs.js-anim .sl-fig3 .sl-f3-k1{animation:sl-pop 7s linear infinite 2.5s}
.pairs.js-anim .sl-fig3 .sl-f3-k2{animation:sl-pop 7s linear infinite 2.7s}
.pairs.js-anim .sl-fig3 .sl-f3-k3{animation:sl-pop 7s linear infinite 2.9s}
.pairs.js-anim .sl-fig4 .sl-f4-c1{animation:sl-fade 7s linear infinite 1.5s}
.pairs.js-anim .sl-fig4 .sl-f4-c2{animation:sl-fade 7s linear infinite 1.65s}
.pairs.js-anim .sl-fig4 .sl-f4-c3{animation:sl-fade 7s linear infinite 1.8s}
.pairs.js-anim .sl-fig4 .sl-f4-c4{animation:sl-fade 7s linear infinite 1.95s}
.pairs.js-anim .sl-fig4 .sl-f4-c5{animation:sl-fade 7s linear infinite 2.1s}
.pairs.js-anim .sl-fig4 .sl-f4-k1{animation:sl-pop 7s linear infinite 2.6s}
.pairs.js-anim .sl-fig4 .sl-f4-k2{animation:sl-pop 7s linear infinite 2.8s}
.pairs.js-anim .sl-fig4 .sl-f4-k3{animation:sl-pop 7s linear infinite 3s}

@keyframes sl-fade{0%,3%{opacity:0}13%,86%{opacity:1}94%,100%{opacity:0}}
@keyframes sl-rise{
  0%,3%{opacity:0; transform:translateX(-12px)}
  15%,86%{opacity:1; transform:translateX(0)}
  94%,100%{opacity:0; transform:translateX(0)}
}
@keyframes sl-grow{0%,3%{transform:scaleY(0)}15%,86%{transform:scaleY(1)}94%,100%{transform:scaleY(0)}}
@keyframes sl-slot{0%,5%{transform:scaleX(0)}16%,86%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}
@keyframes sl-pop{
  0%,3%{opacity:0; transform:scale(.3)}
  11%{opacity:1; transform:scale(1.3)}
  16%,86%{opacity:1; transform:scale(1)}
  94%,100%{opacity:0; transform:scale(1)}
}