/* ========== ピックルボール事業の開業支援（スポットコンサル・トータルプロデュース） ========== */

/* FV：やりたいこと → 対応するプラン（ページ内の目次）。押すとそのプランのカードへ移る。
   CTA（ライム）と見分けるため、地は白にする。矢印は &Pickle の細い線に合わせて 1px */
.pg-hero .desc{margin-bottom:16px}
.jump ul{list-style:none;display:grid;gap:8px}
.jump a{display:grid;justify-items:center;gap:2px;padding:10px 12px 12px;text-align:center;background:var(--c-white);border-radius:var(--radius)}
.jump .why{font-size:18px}
.jump .svc{font-family:var(--font-serif-jp);font-weight:600;font-size:24px;color:var(--c-navy);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
/* 矢印は軸も矢じりも 1px の要素で描く（SVG は画面幅によって半ピクセルの位置に乗り、線が2ピクセルに割れて薄く見えるため）。
   矢じりは右側だけで、先端を軸にして回した 1px の線 */
.jump .ar-line{position:relative;width:1px;height:20px;background:var(--c-teal)}
.jump .ar-line::after{content:"";position:absolute;left:0;bottom:0;width:1px;height:10px;background:var(--c-teal);transform-origin:50% 100%;transform:rotate(32deg)}

/* プランの節 */
.plans{display:grid;gap:40px}
/* 白のカードと肌色の地の差が小さく、トップの partner-card と同じ薄い枠ではカードに見えないため、枠を紺の淡色にする */
.plan{background:var(--c-white);border:1px solid rgba(16,46,92,.3);border-radius:var(--radius);padding:28px 20px;display:grid;gap:20px;scroll-margin-top:72px}
/* カードの始まりを示すため塗りのラベルにする。ライムは相談ボタンの色なので使わず、紺の地に生成りの文字 */
.plan-num{justify-self:start;padding:1px 12px;background:var(--c-navy);color:var(--c-ivory);font-family:var(--font-serif);font-style:italic;font-weight:600;font-size:12px;line-height:1.5;letter-spacing:.2em;margin:-8px 0 -12px}
.plan h2{font-family:var(--font-serif-jp);font-weight:600;font-size:28px;line-height:1.4;letter-spacing:.02em;color:var(--c-navy)}
.plan-sub{font-family:var(--font-serif-jp);font-weight:600;font-size:18px;color:var(--c-navy);margin-top:-8px}
/* 見出しの下に紺の線を引き、カードの中身と分ける */
.plan h2{padding-bottom:12px;border-bottom:1px solid var(--c-navy)}
.plan-cta{display:grid;justify-items:center}
/* プランの後は肌色が続くため、末尾の導線は生成りにして区切る */
.hub-nav{background:var(--c-paper)}
.desc{font-size:16px}
.desc p + p{margin-top:10px}
.price{font-family:var(--font-serif-jp);font-weight:600;font-size:28px;line-height:1.3;color:var(--c-navy)}
.price small{font-size:16px;font-weight:500}
.msg{font-family:var(--font-serif-jp);font-weight:600;font-size:16px;color:var(--c-navy);margin-bottom:6px}

/* 代表メッセージ：本人の言葉として、カードの中で地の色を変えて本文と分ける */
.voice{background:var(--c-ivory);border-radius:var(--radius);padding:20px 16px;display:grid;gap:14px}
.voice-deco{justify-self:center;display:inline-flex;align-items:center;gap:12px;font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-teal)}
.voice-deco::before,.voice-deco::after{content:"";width:24px;height:1px;background:var(--c-teal)}
.voice-head{display:flex;align-items:center;gap:14px}
.voice-head img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 28%}
.voice-name{font-family:var(--font-serif-jp);font-weight:600;font-size:18px;color:var(--c-navy);line-height:1.4}
.voice-name small{display:block;font-size:13px;font-weight:500;color:var(--c-ink)}
.voice p{font-family:var(--font-serif-jp);font-weight:500;font-size:16px;line-height:1.9}
.voice p + p{margin-top:8px}

@media (min-width:961px){
  .jump ul{grid-template-columns:1fr 1fr;gap:16px}
  .jump a{height:100%;align-content:center}
  .plans{gap:48px}
  .plan{padding:40px 48px}
  .plan h2{font-size:32px}
  .voice{padding:24px 28px}
  .voice-head img{width:88px;height:88px}
  .plan-cta .btn-cta{width:320px}
}