@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════
   SP特化型LP（採用4職種）— ご指示
   社内の設計基準による

   この型の要点は3つ。数値は正本の実測値から取っている。
     ① コンテンツ列を 430px に固定して中央に置く（実測中央値。390〜500で調整）
     ② 余白を「装飾背景」で埋める。無地の白で放置すると
        「スマホ用サイトをPCで見てしまっている」状態に見えて手抜きに読まれる
     ③ ★PC専用のナビを余白に開いて置く（ハンバーガーにしない）
        NN/g：隠しナビは発見性がほぼ半減・PCで39%遅い
     ブレークポイント＝767/768（正本の実測最頻値）

   ★なぜ採用LPに使えるのか
     正本 §2 は「採用」を選んではいけない側に挙げているが、それは
     **多ページの採用サイト**（30ページ以上を狭い列で回遊させると迷子になる）の話。
     ここは1ページ完結のLPで回遊が要らず、読み手は求職者＝スマホ・夜間・低意向タップ。
     「1つの物語を順に読ませたい」という選んでよい条件に当たる。
   ══════════════════════════════════════════════════════════════ */

/* ── ① コンテンツ列 ───────────────────────────── */
.lp{
  --lp-pad:20px;
  max-width:430px;
  margin-inline:auto;
  padding-inline:var(--lp-pad);
  background:var(--paper);
}
/* 縦の間は詰める。430px 幅で PC と同じ余白を取ると、スクロールばかりになる */
.lp section{padding-block:clamp(44px,9vw,64px)}

/* 列の中でさらに max-width を掛けない（430px の中で絞ると和文が細切れになる） */
.lp p,.lp .cap,.lp .small{max-width:none}

/* ── ② 余白＝装飾背景（768px 以上でだけ現れる） ──────── */
@media(min-width:768px){
  body{background:var(--band)}
  .lp{
    box-shadow:0 0 0 1px var(--line);
    min-height:100svh;
  }
  /* ヘッダーと下部CTAも列の幅に合わせる（全幅のままだと列から浮く） */
  .hdr{left:50%;right:auto;translate:-50% 0;width:100%;max-width:430px;
    border-bottom:1px solid var(--line)}
  .hdr .bar{padding-inline:20px}
  .hdr nav{display:none}          /* 列の中に横ナビを入れない。ナビは右余白のレール */
  .hdr .burger{display:none}      /* PCでハンバーガーを出さない（この型の要） */
  .sticky{left:50%;right:auto;translate:-50% 0;width:100%;max-width:430px}

  /* ワイヤー上の注記：ここに何が入るかを示す */
  .splp-note{display:block}
}

@media(max-width:767px){
  .splp-rail{display:none}
  .splp-note{display:none}
  .hdr .burger{display:flex}
}

/* ── ③ PC専用のナビレール（右余白に開いて置く） ────────── */
.splp-rail{
  position:fixed;
  right:clamp(16px,3.2vw,56px);
  top:50%;
  translate:0 -50%;
  z-index:70;
  display:none;
  flex-direction:column;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media(min-width:768px){.splp-rail{display:flex}}
.splp-rail a{
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  padding:13px 18px;
  font-size:12.5px;
  letter-spacing:.04em;
  line-height:1.5;
  min-width:150px;
  min-height:48px;              /* タップ領域はPCでも48px（この型は指前提の寸法） */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.splp-rail a::after{content:"→";color:var(--mut);font-size:12px}
.splp-rail a.is-cta{background:var(--ink);color:#fff}
.splp-rail a.is-cta::after{color:#fff}
.splp-rail .rail__ttl{
  background:var(--paper);
  padding:11px 18px 9px;
  font-size:10px;
  letter-spacing:.2em;
  color:var(--mut);
  font-family:'ShipporiMix',"Baskervville",serif;
}

/* 左余白のロゴ（実測：studioakari は左余白にロゴを固定表示） */
.splp-logo{
  position:fixed;
  left:clamp(16px,3.2vw,56px);
  top:clamp(20px,4vw,44px);
  z-index:70;
  display:none;
  font-size:14px;
  letter-spacing:.06em;
}
@media(min-width:768px){.splp-logo{display:block}}

/* ワイヤー上の注記（余白に何を入れるかを本番へ申し送る） */
.splp-note{
  display:none;
  position:fixed;
  left:clamp(16px,3.2vw,56px);
  bottom:clamp(20px,4vw,44px);
  z-index:70;
  max-width:min(240px,22vw);
  font-size:11.5px;
  line-height:1.8;
  color:var(--mut);
  border-left:2px solid var(--line2);
  padding-left:10px;
}

/* アンカーで飛んだとき、固定ヘッダーの下に見出しが隠れないように */
.lp section[id]{scroll-margin-top:84px}

/* 見出しの級数を 430px 幅に合わせる（PC用の clamp 上限だと入りきらない） */
.lp h1 .ja,.lp h2 .ja{font-size:clamp(19px,5.4vw,24px)}
.lp h1 .en,.lp h2 .en{font-size:clamp(20px,5.6vw,26px)}

/* ── 430px の列に合わせて、数字まわりの級数を落とす ──────────
   ★760px の列を前提にした級数（最大30px）をそのまま持ち込むと、
     金額＋単位が横に並びきらず列を10〜36pxはみ出す（実測 440>430）。
     金額は折りたくないので、折るのではなく級数で収める。 */
.lp .figs .row{grid-template-columns:minmax(0,1fr);gap:6px}
.lp .figs dd{text-align:left;font-size:clamp(18px,4.8vw,23px)}
.lp .figs .note{text-align:left;max-width:none;margin-left:0}
.lp .bonus{grid-template-columns:minmax(0,1fr)}
.lp .bonus .vl,.lp .figs dd{letter-spacing:0}
/* 数字を並べる帯（3列）は 430px では縦に積む */
.lp .grow,.lp .steps5{grid-template-columns:minmax(0,1fr)}

/* ── 左余白＝画像／動画───────────────
   正本の「余白の埋め方3パターン」のうち③写真・動画のフルブリード。
   ★この案件は写真の質で見せる設計なので、余白は単色ではなく映像で埋める。
   列（430px）の左側いっぱいを使う。1024px 未満では余白が狭いので出さない。 */
.splp-media{
  display:none;
  position:fixed;
  left:0; top:0; bottom:0;
  width:calc((100vw - 430px) / 2);
  z-index:1;
  border-right:1px solid var(--line);
  background:
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--line2) 50%, transparent calc(50% + .5px)),
    linear-gradient(to top right,    transparent calc(50% - .5px), var(--line2) 50%, transparent calc(50% + .5px)),
    var(--band);
  display:none;
}
.splp-media span{
  position:absolute; left:0; right:0; top:50%; translate:0 -50%;
  text-align:center; font-size:12.5px; line-height:1.9; color:var(--mut);
  padding-inline:14px;
}
@media(min-width:1024px){
  .splp-media{display:block}
  /* ロゴは映像の上に載せる */
  .splp-logo{z-index:71;color:var(--ink)}
  .splp-note{z-index:71}
}