@charset "UTF-8";
/* ============================================================
   ポップLP（新宿・渋谷エリア／トップ 共通スタイル）
   ピンク × ミント × 生成りのチラシ組み

   目次
     01. トークン
     02. 骨組み（カラム / セクション / 飾り）
     03. 見出しパーツ
     04. CTA
     05. ヒーロー
     06. アーチ帯 + 悩み
     07. 「ピッタリなんです」カード
     08. 仕事内容
     09. 比較表
     10. 収入シミュレーション
     11. 選ばれる理由
     12. サポート
     13. 声のスライダー
     14. 流れ
     15. Q&A
     16. エリア / 設備 / 内部リンク
     17. フッター・固定バー
     18. 画面幅の調整
============================================================ */

/* ============================================================
   01. トークン
============================================================ */
.lp-area {
  --pk: #e8336e;
  --pk-d: #c8175a;
  --pk-l: #fce4ec;
  --pk-lll: #fff4f7;
  --mint: #4ec5c1;
  --mint-d: #2fa5a1;
  --mint-l: #d7f1f0;
  --mint-band: #a5d9d3;
  --cream: #fdf8ea;
  --ink: #2e2a2b;
  --ink-2: #5c5658;
  --sun: #ffd400;
  --sun-l: #ffe97a;
  --gold: #f4d06a;
  --line-green: #06c755;
  --blue: #5b8def;
  --orange: #f7a14b;

  --col: 560px;
  --pad: 20px;
  --bar-h: 78px;

  --round: 18px;
  --sh: 0 10px 24px -14px rgba(46, 42, 43, .45);

  --f-round: "Zen Maru Gothic", "Zen Kaku Gothic New", "Hiragino Maru Gothic ProN", sans-serif;
  --f-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;

  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}

/* ============================================================
   02. 骨組み
============================================================ */
.lp-area .col {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--pad);
  position: relative;
  z-index: 1;
}

.lp-area .sec {
  padding-block: clamp(40px, 9vw, 62px);
  position: relative;
  overflow: hidden;
}

.lp-area .sec--white {
  background: #fff;
}

.lp-area .sec--pale {
  background: var(--pk-lll);
}

.lp-area .sec--cream {
  background: var(--cream);
}

.lp-area .sec--mint {
  background: var(--mint-l);
}

.lp-area .sec--tight {
  padding-block: 30px;
}

/* 角に置く有機的なブロブ（参考LPのちぎり絵風の飾り） */
.lp-area .blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 56% 44% 38% 62% / 48% 56% 44% 52%;
}

.lp-area .blob--pk {
  background: var(--pk-l);
}

.lp-area .blob--mint {
  background: var(--mint-l);
}

/* ============================================================
   03. 見出しパーツ
============================================================ */
/* 吹き出しラベル */
.lp-area .bubble {
  display: table;
  margin: 0 auto 14px;
  padding: 5px 24px;
  background: var(--pk);
  color: #fff;
  border-radius: 999px;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .06em;
  position: relative;
}

.lp-area .bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  translate: -50% 0;
  border: 6px solid transparent;
  border-top-color: var(--pk);
  border-bottom: 0;
}

.lp-area .bubble--line {
  background: #fff;
  color: var(--pk);
  border: 2px solid var(--pk);
}

/* ＼ はさみ見出し ／ */
.lp-area .slash {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: clamp(15px, 4.2vw, 18px);
  color: var(--ink);
  margin-bottom: 6px;
}

.lp-area .slash::before,
.lp-area .slash::after {
  content: "";
  width: 3px;
  height: 24px;
  border-radius: 3px;
  background: var(--ink);
  flex: none;
}

.lp-area .slash::before {
  rotate: -22deg;
}

.lp-area .slash::after {
  rotate: 22deg;
}

/* 大見出し */
.lp-area .h2 {
  font-family: var(--f-round);
  font-weight: 900;
  font-size: clamp(27px, 7.4vw, 36px);
  line-height: 1.35;
  letter-spacing: .01em;
  text-align: center;
  margin-bottom: 8px;
}

.lp-area .h2 .pk {
  color: var(--pk);
}

.lp-area .h2 .mt {
  color: var(--mint-d);
}

/* 太い袋文字 */
.lp-area .stroke {
  color: var(--pk);
  -webkit-text-stroke: 7px #fff;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(200, 23, 90, .28);
}

/* 手書き風の英語サブ */
.lp-area .script {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  color: var(--mint-d);
  font-size: 20px;
  text-align: right;
  line-height: 1;
  margin-top: -2px;
}

/* 手描き風の下線（1本・ミント） */
.lp-area .u1 {
  position: relative;
  display: inline-block;
}

.lp-area .u1::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -10px;
  height: 5px;
  border-radius: 4px;
  background: var(--mint);
  rotate: -1deg;
}

/* 手描き風の下線（2本・黄） */
.lp-area .u2 {
  position: relative;
  display: inline-block;
}

.lp-area .u2::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -12px;
  height: 4px;
  border-radius: 4px;
  background: var(--sun-l);
  rotate: -1.4deg;
  box-shadow: 2px 9px 0 var(--sun-l);
}

.lp-area .h2-under {
  width: 132px;
  height: 5px;
  border-radius: 999px;
  background: var(--mint);
  margin: 10px auto 22px;
}

.lp-area .lead {
  text-align: center;
  font-size: 15px;
  line-height: 2;
  color: var(--ink-2);
  margin-bottom: 24px;
}

.lp-area .marker {
  background: linear-gradient(transparent 62%, var(--sun) 62%);
  font-weight: 700;
  padding-inline: 2px;
}

/* きらきら */
.lp-area .spark {
  position: absolute;
  color: var(--orange);
  pointer-events: none;
  z-index: 0;
}

.lp-area .spark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 罫線つき本文 */
.lp-area .ruled {
  font-size: 15px;
  line-height: 2.15;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 calc(2.15em - 1px),
      var(--pk-l) calc(2.15em - 1px) 2.15em);
}

.lp-area .ruled .pk {
  color: var(--pk);
  font-weight: 700;
}

/* ============================================================
   04. CTA
============================================================ */
.lp-area .cta {
  text-align: center;
  padding-block: 6px;
}

.lp-area .cta__note {
  font-family: var(--f-round);
  font-weight: 700;
  color: var(--pk);
  font-size: 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.lp-area .cta__note::before,
.lp-area .cta__note::after {
  content: "";
  width: 3px;
  height: 22px;
  border-radius: 3px;
  background: var(--pk);
  flex: none;
}

.lp-area .cta__note::before {
  rotate: -22deg;
}

.lp-area .cta__note::after {
  rotate: 22deg;
}

.lp-area .btn-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 68px;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--line-green);
  color: #fff;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: clamp(19px, 5.2vw, 23px);
  letter-spacing: .02em;
  box-shadow: 0 5px 0 #05a648;
  position: relative;
  transition: translate .12s ease, box-shadow .12s ease;
}

.lp-area .btn-line:active {
  translate: 0 4px;
  box-shadow: 0 1px 0 #05a648;
}

.lp-area .btn-line .now {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--line-green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  position: relative;
}

/* 白丸から出る小さなしっぽ */
.lp-area .btn-line .now::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 60%;
  border: 5px solid transparent;
  border-left-color: #fff;
  border-right: 0;
}

.lp-area .btn-line .yel {
  color: #fdf35a;
}

.lp-area .btn-line .chev {
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  rotate: 45deg;
}

.lp-area .btn-mail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  margin-top: 12px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--pk);
  color: var(--pk);
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 17px;
  box-shadow: 0 5px 0 var(--pk-l);
}

.lp-area .cta__sub {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.7;
}

/* ============================================================
   05. ヒーロー
============================================================ */
.lp-area .hero {
  background:
    radial-gradient(circle at 10% 16%, var(--mint-l) 0 58px, transparent 59px),
    radial-gradient(circle at 92% 6%, var(--pk-l) 0 70px, transparent 71px),
    radial-gradient(circle at 97% 58%, var(--mint-l) 0 44px, transparent 45px),
    radial-gradient(circle at 3% 74%, var(--pk-l) 0 52px, transparent 53px),
    var(--cream);
  padding-block: 20px 26px;
  overflow: hidden;
  position: relative;
}

.lp-area .hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.lp-area .hero__logo {
  font-family: var(--f-round);
  font-weight: 900;
  line-height: 1.05;
  color: var(--pk);
  font-size: 19px;
}

.lp-area .hero__logo small {
  display: block;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--mint-d);
  font-weight: 700;
}

/* 右上の「今月限定」バッジ */
.lp-area .badge-sun {
  flex: none;
  width: 124px;
  height: 124px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--pk);
  box-shadow: 0 0 0 5px var(--pk-l);
  font-family: var(--f-round);
  font-weight: 900;
  line-height: 1.3;
  font-size: 11.5px;
  color: var(--ink);
  rotate: -6deg;
}

.lp-area .badge-sun em {
  display: block;
  font-style: normal;
  font-size: 10px;
  background: var(--pk);
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  margin-bottom: 3px;
}

.lp-area .badge-sun b {
  display: block;
  font-size: 17px;
  color: var(--pk);
  line-height: 1.2;
  white-space: nowrap;
}

.lp-area .hero__title {
  font-family: var(--f-round);
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: .01em;
  font-size: clamp(29px, 8vw, 40px);
  margin-bottom: 4px;
}

.lp-area .hero__title .sm {
  display: block;
  font-size: .6em;
  color: var(--ink);
  rotate: -3deg;
  margin-bottom: 4px;
}

.lp-area .hero__title .row {
  display: block;
  rotate: -2deg;
  white-space: nowrap;
}

.lp-area .hero__title .row + .row {
  margin-left: .5em;
}

.lp-area .hero__photo {
  margin: 14px 0 0;
  border: 5px solid #fff;
  border-radius: 10px;
  box-shadow: var(--sh);
  overflow: hidden;
  aspect-ratio: 16 / 11;
}

.lp-area .hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-area .hero__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.lp-area .hero__points li {
  background: #fff;
  border-radius: 12px;
  padding: 10px 6px;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 13px;
  line-height: 1.4;
  border: 2px dashed var(--pk-l);
}

.lp-area .hero__points li:nth-child(2) {
  border-color: var(--mint-l);
}

.lp-area .hero__points li b {
  color: var(--pk);
  font-size: 20px;
}

.lp-area .hero__points li:nth-child(2) b {
  color: var(--mint-d);
}

.lp-area .hero__points li:last-child {
  grid-column: 1 / -1;
  background: var(--sun);
  border-style: solid;
  border-color: #fff;
  font-size: 14px;
}

.lp-area .hero__points li:last-child b {
  color: var(--pk-d);
  font-size: 21px;
  white-space: nowrap;
}

/* ============================================================
   06. アーチ帯 + 悩み
============================================================ */
.lp-area .arc {
  background: var(--mint-band);
  padding: 30px var(--pad) 44px;
  border-radius: 0 0 50% 50% / 0 0 46px 46px;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 1;
}

.lp-area .arc__sm {
  font-family: var(--f-round);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}

.lp-area .arc__h {
  font-family: var(--f-round);
  font-weight: 900;
  font-size: clamp(29px, 8vw, 40px);
  line-height: 1.3;
  color: #fff;
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke fill;
  text-shadow: 2px 3px 0 rgba(46, 42, 43, .1);
}

.lp-area .arc__h .y {
  color: var(--sun);
}

.lp-area .worry {
  background: #fff;
  border-radius: 6px;
  padding: 10px 18px 22px;
  margin-top: -20px;
  position: relative;
  z-index: 2;
}

.lp-area .worry li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 2px;
  border-bottom: 2px dotted #cfd6d5;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}

.lp-area .worry li:last-child {
  border-bottom: 0;
}

.lp-area .worry__ic {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--mint);
  overflow: hidden;
  background: #fffaf0;
}

.lp-area .worry__ic svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lp-area .worry-answer {
  text-align: center;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: clamp(20px, 5.6vw, 25px);
  line-height: 1.7;
  margin-top: 30px;
}

/* ============================================================
   07. 「ピッタリなんです」カード
============================================================ */
.lp-area .fit-head {
  text-align: center;
  position: relative;
  margin-bottom: 34px;
}

.lp-area .fit-head__h {
  font-family: var(--f-round);
  font-weight: 900;
  font-size: clamp(24px, 6.4vw, 32px);
  line-height: 1.3;
}

.lp-area .fit-head__h .big {
  display: inline-block;
  font-size: 1.5em;
  color: var(--pk);
  -webkit-text-stroke: 8px #fff;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(200, 23, 90, .26);
  line-height: 1.15;
}

.lp-area .card-note {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 20px 16px 22px;
  box-shadow: 8px 8px 0 var(--gold);
  position: relative;
}

.lp-area .card-note__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.lp-area .card-note__title {
  font-family: var(--f-round);
  font-weight: 900;
  font-size: clamp(20px, 5.4vw, 26px);
  line-height: 1.3;
}

/* 金枠の実績バッジ */
.lp-area .laurel {
  flex: none;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #fffdf6;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 3px #fdf3d8;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--f-round);
  font-weight: 900;
  line-height: 1.15;
  color: #a8801f;
  font-size: 9px;
  letter-spacing: .01em;
}

.lp-area .laurel b {
  display: block;
  font-size: 23px;
  color: var(--pk);
  line-height: 1.05;
}

.lp-area .card-note__body {
  font-size: 15px;
  line-height: 1.95;
}

.lp-area .card-note__body .pk {
  color: var(--pk);
  font-weight: 700;
}

.lp-area .card-note__photo {
  margin: 14px 0;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.lp-area .card-note__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   08. 仕事内容
============================================================ */
.lp-area .work__photo {
  border-radius: 4px;
  overflow: visible;
  aspect-ratio: 16 / 10;
  margin: 22px 0 30px;
  position: relative;
}

.lp-area .work__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* 写真の上下をミントの波で挟む */
.lp-area .work__photo::before,
.lp-area .work__photo::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  height: 26px;
  background: var(--mint-l);
  border-radius: 50%;
}

.lp-area .work__photo::before {
  top: -13px;
}

.lp-area .work__photo::after {
  bottom: -13px;
}

/* ============================================================
   09. 比較表
============================================================ */
.lp-area .cmp-wrap {
  position: relative;
  background: #fff;
  border-radius: var(--round);
  padding: 10px 8px 14px;
  box-shadow: 7px 7px 0 #dfe6f3, var(--sh);
  border: 2px solid #eef1f6;
}

.lp-area .cmp {
  font-family: var(--f-round);
}

.lp-area .cmp th,
.lp-area .cmp td {
  padding: 12px 4px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px dotted #f0d8e0;
}

.lp-area .cmp thead th {
  font-weight: 900;
  font-size: 13px;
  padding-block: 10px 12px;
  border-bottom: 0;
  vertical-align: bottom;
}

.lp-area .cmp thead th:nth-child(2) {
  background: var(--pk);
  color: #fff;
  border-radius: 12px 12px 0 0;
}

.lp-area .cmp thead th .crown {
  display: block;
  width: 24px;
  height: 18px;
  margin: 0 auto 3px;
  color: var(--sun);
}

.lp-area .cmp thead th:nth-child(3) {
  background: #f2eef7;
  border-radius: 10px 10px 0 0;
}

.lp-area .cmp thead th:nth-child(4) {
  background: #e9eff8;
  border-radius: 10px 10px 0 0;
}

.lp-area .cmp tbody th {
  text-align: left;
  padding: 12px 2px 12px 0;
  width: 28%;
}

/* 左のリボンラベル */
.lp-area .rib {
  display: inline-block;
  background: var(--pk-lll);
  border: 1.5px solid var(--pk);
  color: var(--pk);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.35;
  padding: 3px 18px 3px 8px;
  border-radius: 4px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
}

.lp-area .cmp tbody td:nth-child(2) {
  background: #fff8fa;
  font-weight: 900;
  color: var(--pk);
}

.lp-area .cmp .o {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid var(--mint);
  border-radius: 50%;
  position: relative;
}

.lp-area .cmp .x {
  color: #b7b2b4;
  font-weight: 900;
  font-size: 19px;
}

.lp-area .cmp tr:last-child th,
.lp-area .cmp tr:last-child td {
  border-bottom: 0;
}

.lp-area .cmp-note {
  margin-top: 22px;
  text-align: center;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: clamp(18px, 5vw, 22px);
  line-height: 1.7;
}

/* ============================================================
   10. 収入シミュレーション
============================================================ */
.lp-area .sim {
  display: grid;
  gap: 30px;
}

.lp-area .sim__card {
  --c: var(--pk);
  background: #fff;
  border: 3px solid var(--c);
  border-radius: var(--round);
  padding: 26px 16px 18px;
  position: relative;
}

.lp-area .sim__card--b {
  --c: var(--blue);
}

.lp-area .sim__card--o {
  --c: var(--orange);
}

.lp-area .sim__tag {
  position: absolute;
  top: -18px;
  left: 50%;
  translate: -50% 0;
  background: var(--c);
  color: #fff;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 17px;
  padding: 4px 22px;
  border-radius: 999px;
  white-space: nowrap;
}

.lp-area .sim__tag::after {
  content: "";
  position: absolute;
  left: 34%;
  bottom: -7px;
  border: 6px solid transparent;
  border-top-color: var(--c);
  border-bottom: 0;
}

.lp-area .sim__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: 15.5px;
  padding-block: 5px;
}

.lp-area .sim__list .ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  display: grid;
  place-items: center;
}

.lp-area .sim__list .ic svg {
  width: 18px;
  height: 18px;
}

.lp-area .sim__result {
  margin-top: 12px;
  text-align: center;
}

.lp-area .sim__arrow {
  display: block;
  width: 36px;
  height: 20px;
  margin: 0 auto 8px;
  color: var(--c);
}

.lp-area .sim__arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lp-area .sim__eq {
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 4px;
}

.lp-area .sim__eq span {
  background: var(--c);
  color: #fff;
  border-radius: 5px;
  padding: 1px 7px;
  margin-inline: 2px;
}

.lp-area .sim__yen {
  font-family: var(--f-round);
  font-weight: 900;
  line-height: 1;
  color: var(--c);
  font-size: clamp(38px, 11vw, 52px);
  letter-spacing: -.01em;
  text-shadow: 2px 3px 0 rgba(46, 42, 43, .12);
}

.lp-area .sim__yen em {
  font-style: normal;
  font-size: .45em;
  background: #fff;
  border: 2px solid var(--c);
  border-radius: 6px;
  padding: 2px 6px;
  margin-right: 6px;
  vertical-align: .35em;
  text-shadow: none;
}

.lp-area .sim__yen small {
  font-size: .5em;
}

.lp-area .sim-note {
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-2);
}

/* ============================================================
   11. 選ばれる理由
============================================================ */
.lp-area .reason {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--sh);
}

.lp-area .reason + .reason {
  margin-top: 30px;
}

.lp-area .reason__no {
  background: var(--pk-l);
  color: var(--pk);
  text-align: center;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .1em;
  padding: 7px;
}

.lp-area .reason__title {
  font-family: var(--f-round);
  font-weight: 900;
  font-size: clamp(21px, 5.8vw, 26px);
  line-height: 1.4;
  text-align: center;
  color: var(--pk);
  -webkit-text-stroke: 5px #fff;
  paint-order: stroke fill;
  text-shadow: 2px 3px 0 rgba(46, 42, 43, .16);
  padding: 18px 12px;
  border-block: 2px solid var(--pk);
  background: #fff;
}

.lp-area .reason__photo {
  aspect-ratio: 16 / 10;
}

.lp-area .reason__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-area .reason__body {
  padding: 16px;
  background: var(--pk-lll);
}

.lp-area .reason__box {
  background: #fff;
  border: 2px solid var(--pk-l);
  border-radius: 12px;
  padding: 14px;
  font-size: 14.5px;
  line-height: 2.1;
  text-align: center;
}

.lp-area .reason__box .pk {
  color: var(--pk);
  font-weight: 700;
}

/* ============================================================
   12. サポート
============================================================ */
.lp-area .support {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.lp-area .support figure {
  border: 2px solid var(--pk);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  position: relative;
}

.lp-area .support img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.lp-area .support figcaption {
  position: absolute;
  left: 50%;
  bottom: 8px;
  translate: -50% 0;
  white-space: nowrap;
  background: #fff;
  border: 2px solid var(--pk);
  color: var(--pk);
  border-radius: 999px;
  padding: 3px 12px;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 12.5px;
  text-align: center;
  line-height: 1.35;
}

.lp-area .support-msg {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.lp-area .support-msg__il {
  flex: none;
  width: 92px;
}

.lp-area .support-msg__il svg {
  width: 100%;
  height: auto;
  display: block;
}

.lp-area .support-msg__text {
  flex: 1;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: clamp(16px, 4.4vw, 20px);
  line-height: 2.2;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 calc(2.2em - 1px),
      #d8d3d4 calc(2.2em - 1px) 2.2em);
}

.lp-area .support-msg__text .pk {
  color: var(--pk);
}

/* ============================================================
   13. 声のスライダー
============================================================ */
.lp-area .slider {
  position: relative;
}

.lp-area .slider__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.lp-area .slider__track::-webkit-scrollbar {
  display: none;
}

.lp-area .voice {
  flex: 0 0 100%;
  scroll-snap-align: center;
  background: #fff;
  border: 3px solid var(--mint);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 6px 6px 0 rgba(46, 42, 43, .18);
}

.lp-area .voice__head {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px dotted var(--mint-l);
}

.lp-area .voice__name {
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 21px;
  line-height: 1.3;
}

.lp-area .voice__name small {
  font-size: 14px;
}

.lp-area .voice__meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.lp-area .voice__meta div {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.lp-area .voice__meta span {
  background: var(--pk);
  color: #fff;
  border-radius: 4px;
  padding: 1px 9px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.lp-area .voice__meta b {
  color: var(--pk);
}

.lp-area .voice__text {
  font-size: 14px;
  line-height: 1.95;
}

.lp-area .slider__nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lp-area .slider__arrow {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--mint);
  color: var(--mint-d);
  display: grid;
  place-items: center;
  translate: -8px 0;
  box-shadow: var(--sh);
}

.lp-area .slider__arrow:last-child {
  translate: 8px 0;
}

.lp-area .slider__arrow:disabled {
  opacity: .35;
}

.lp-area .slider__arrow svg {
  width: 16px;
  height: 16px;
}

.lp-area .slider__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}

.lp-area .slider__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint-l);
}

.lp-area .slider__dot.is-on {
  background: var(--pk);
}

/* ============================================================
   14. 流れ
============================================================ */
.lp-area .band {
  background: var(--pk);
  color: #fff;
  text-align: center;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: clamp(23px, 6.2vw, 29px);
  padding: 16px 12px;
}

.lp-area .band--white {
  background: #fff;
  color: var(--pk);
  border-block: 3px solid var(--pk);
  padding: 14px 12px 18px;
  line-height: 1.2;
}

.lp-area .band__sm {
  display: block;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: .1em;
  margin-bottom: 2px;
}

.lp-area .band__lg {
  display: block;
  font-size: clamp(34px, 9vw, 44px);
  letter-spacing: .04em;
}

.lp-area .flow {
  display: grid;
  gap: 16px;
}

.lp-area .flow__item {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--sh);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
}

.lp-area .flow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  translate: -50% 0;
  border: 8px solid transparent;
  border-top-color: var(--pk);
  border-bottom: 0;
  z-index: 1;
}

.lp-area .flow__no {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid var(--pk);
  color: var(--pk);
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--f-round);
  font-weight: 900;
  line-height: 1;
}

.lp-area .flow__no small {
  display: block;
  font-size: 9px;
  letter-spacing: .08em;
}

.lp-area .flow__no b {
  font-size: 21px;
}

.lp-area .flow__title {
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.4;
  color: var(--pk);
}

.lp-area .flow__text {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2);
  margin-top: 4px;
}

/* 下に並べるステップのチップ */
.lp-area .steps {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.lp-area .steps li {
  flex: 1;
  background: #f0eeee;
  color: var(--ink);
  border-radius: 6px;
  padding: 9px 3px;
  text-align: center;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 10.5px;
  line-height: 1.35;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.lp-area .steps li:first-child {
  background: var(--pk);
  color: #fff;
}

.lp-area .steps li + li::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  translate: 0 -50%;
  border: 5px solid transparent;
  border-left-color: var(--mint);
  border-right: 0;
}

/* ============================================================
   15. Q&A
============================================================ */
.lp-area .qa {
  display: grid;
  gap: 12px;
}

.lp-area .qa__item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sh);
}

.lp-area .qa__q {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  padding: 14px 44px 14px 14px;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.6;
  position: relative;
}

.lp-area .qa__q::before {
  content: "Q";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pk);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
}

.lp-area .qa__q::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 22px;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid var(--pk);
  border-bottom: 2.5px solid var(--pk);
  rotate: 45deg;
  transition: rotate .25s ease;
}

.lp-area .qa__item.is-open .qa__q::after {
  rotate: -135deg;
}

.lp-area .qa__a {
  height: 0;
  overflow: hidden;
  transition: height .28s cubic-bezier(.22, 1, .36, 1);
}

.lp-area .qa__a > div {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 0 14px 16px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-2);
}

.lp-area .qa__a > div::before {
  content: "A";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mint);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--f-round);
  font-size: 14px;
  font-weight: 900;
}

/* ============================================================
   16. エリア / 設備 / 内部リンク
============================================================ */
.lp-area .area-box {
  background: #fff;
  border: 2px solid var(--pk);
  border-radius: 12px;
  padding: 14px;
}

.lp-area .area-box + .area-box {
  margin-top: 14px;
}

.lp-area .area-box--mint {
  border-color: var(--mint);
}

.lp-area .area-box--blue {
  border-color: var(--blue);
}

.lp-area .area-box--orange {
  border-color: var(--orange);
}

.lp-area .area-box__title {
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 17px;
  color: var(--pk);
  margin-bottom: 10px;
}

.lp-area .area-box--mint .area-box__title {
  color: var(--mint-d);
}

.lp-area .area-box--blue .area-box__title {
  color: var(--blue);
}

.lp-area .area-box--orange .area-box__title {
  color: #d1801f;
}

.lp-area .area-box ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lp-area .area-box li {
  background: var(--pk);
  color: #fff;
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
}

.lp-area .area-box--mint li {
  background: var(--mint);
}

.lp-area .area-box--blue li {
  background: var(--blue);
}

.lp-area .area-box--orange li {
  background: var(--orange);
}

.lp-area .spec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.lp-area .spec li {
  background: #fff;
  border: 2px dashed var(--pk-l);
  border-radius: 12px;
  min-height: 62px;
  padding: 10px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 13px;
  line-height: 1.4;
}

.lp-area .spec li:nth-child(even) {
  border-color: var(--mint-l);
}

/* サイト内の他ページへの導線 */
.lp-area .links {
  display: grid;
  gap: 10px;
}

.lp-area .links a {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 2px solid var(--pk-l);
  border-radius: 12px;
  padding: 13px 34px 13px 14px;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 15px;
  box-shadow: var(--sh);
  position: relative;
}

.lp-area .links a::after {
  content: "";
  position: absolute;
  right: 16px;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--pk);
  border-top: 2.5px solid var(--pk);
  rotate: 45deg;
}

.lp-area .links .ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pk-lll);
  color: var(--pk);
  display: grid;
  place-items: center;
}

.lp-area .links .ic svg {
  width: 20px;
  height: 20px;
}

.lp-area .links small {
  display: block;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* ============================================================
   17. フッター・固定バー
============================================================ */
.lp-area .lp-foot {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 28px 20px calc(28px + var(--bar-h));
  font-size: 12px;
  line-height: 1.9;
}

.lp-area .lp-foot a {
  text-decoration: underline;
}

.lp-area .lp-foot__logo {
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 8px;
}

.lp-area .lp-foot__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin: 12px 0;
}

.lp-area .sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: rgba(253, 248, 234, .96);
  border-top: 2px solid var(--pk-l);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  translate: 0 110%;
  transition: translate .3s cubic-bezier(.22, 1, .36, 1);
}

.lp-area .sticky.is-on {
  translate: 0;
}

.lp-area .sticky__inner {
  max-width: var(--col);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
}

.lp-area .sticky .btn-line {
  min-height: 54px;
  font-size: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 0 #05a648;
  gap: 6px;
}

.lp-area .sticky .btn-line .now,
.lp-area .sticky .btn-line .chev {
  display: none;
}

.lp-area .sticky .btn-mail {
  min-height: 54px;
  margin-top: 0;
  font-size: 14px;
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--pk-l);
}

/* ============================================================
   18. 画面幅の調整
============================================================ */
@media (max-width:400px) {

  .lp-area .cmp th,
  .lp-area .cmp td {
    font-size: 11.5px;
    padding: 10px 2px;
  }

  .lp-area .cmp thead th {
    font-size: 11.5px;
  }

  .lp-area .rib {
    font-size: 10.5px;
    padding: 3px 14px 3px 6px;
  }

  .lp-area .btn-line .now {
    width: 46px;
    height: 36px;
    font-size: 11px;
  }

  .lp-area .hero__logo {
    font-size: 17px;
  }

  .lp-area .badge-sun {
    width: 104px;
    height: 104px;
    font-size: 10.5px;
    box-shadow: 0 0 0 4px var(--pk-l);
  }

  .lp-area .badge-sun b {
    font-size: 15px;
  }

  .lp-area .slider__arrow,
  .lp-area .slider__arrow:last-child {
    translate: 0 0;
  }

  .lp-area .steps li {
    font-size: 9.5px;
  }
}

@media (min-width:768px) {
  .lp-area {
    --pad: 28px;
    font-size: 16px;
  }

  .lp-area .hero__points {
    grid-template-columns: repeat(4, 1fr);
  }

  .lp-area .hero__points li:last-child {
    grid-column: auto;
  }
}

/* ============================================================
   19. 応募フォーム（トップと同じ組み方に揃えたもの）
============================================================ */
.lp-area .stepper {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
}

.lp-area .stepper li {
  flex: 1;
  background: #fff;
  border: 2px solid var(--pk-l);
  border-radius: 10px;
  padding: 9px 4px;
  text-align: center;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-2);
  position: relative;
}

.lp-area .stepper li.is-current {
  background: var(--pk);
  border-color: var(--pk);
  color: #fff;
}

.lp-area .stepper li + li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  translate: 0 -50%;
  border: 4px solid transparent;
  border-left-color: var(--mint);
  border-right: 0;
}

.lp-area .alert {
  background: #fff5f7;
  border: 2px solid var(--pk);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--pk-d);
}

.lp-area .alert ul {
  list-style: disc;
  padding-left: 20px;
  margin-top: 6px;
}

.lp-area .form-card {
  background: #fff;
  border-radius: var(--round);
  padding: 20px 16px 24px;
  box-shadow: var(--sh);
}

.lp-area .form-sec {
  border: 0;
  padding: 0;
  margin: 0 0 26px;
}

.lp-area .form-sec__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 17px;
  line-height: 1.4;
  color: var(--pk);
  padding: 0 0 8px;
  margin-bottom: 14px;
  border-bottom: 2px dotted var(--pk-l);
  width: 100%;
}

.lp-area .req,
.lp-area .opt {
  flex: none;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 8px;
  line-height: 1.5;
}

.lp-area .req {
  background: var(--pk);
  color: #fff;
}

.lp-area .opt {
  background: #ece9ea;
  color: var(--ink-2);
}

.lp-area .field {
  margin-bottom: 18px;
}

.lp-area .field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 6px;
}

.lp-area .input,
.lp-area .select,
.lp-area .textarea {
  width: 100%;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: #fffdfd;
  border: 2px solid var(--pk-l);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lp-area .textarea {
  min-height: 120px;
  resize: vertical;
}

.lp-area .input:focus,
.lp-area .select:focus,
.lp-area .textarea:focus {
  outline: 0;
  border-color: var(--pk);
  box-shadow: 0 0 0 3px rgba(232, 51, 110, .14);
}

.lp-area .input[aria-invalid="true"],
.lp-area .select[aria-invalid="true"] {
  border-color: #d63a3a;
  background: #fff6f6;
}

.lp-area .field__help {
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-top: 6px;
}

.lp-area .field__error {
  font-size: 12.5px;
  font-weight: 700;
  color: #c0392b;
  margin-top: 6px;
}

.lp-area .field__inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-area .field__inline .input {
  width: 110px;
}

.lp-area .field__unit {
  font-family: var(--f-round);
  font-weight: 700;
  font-size: 14px;
}

/* 通勤 / 在宅 の選択 */
.lp-area .choices {
  display: grid;
  gap: 10px;
}

.lp-area .choice__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lp-area .choice__label {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 2px solid var(--pk-l);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.lp-area .choice__label::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--pk-l);
  background: #fff;
}

.lp-area .choice__input:checked + .choice__label {
  border-color: var(--pk);
  background: var(--pk-lll);
}

.lp-area .choice__input:checked + .choice__label::before {
  border-color: var(--pk);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 20px var(--pk);
}

.lp-area .choice__input:focus-visible + .choice__label {
  box-shadow: 0 0 0 3px rgba(232, 51, 110, .2);
}

.lp-area .choice__title {
  display: block;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 17px;
  line-height: 1.3;
}

.lp-area .choice__desc {
  display: block;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* 規約 */
.lp-area .terms {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.lp-area .terms details {
  border: 2px solid var(--pk-l);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.lp-area .terms summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 40px 13px 14px;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: 14.5px;
  position: relative;
}

.lp-area .terms summary::-webkit-details-marker {
  display: none;
}

.lp-area .terms summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 19px;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--pk);
  border-bottom: 2.5px solid var(--pk);
  rotate: 45deg;
  transition: rotate .2s ease;
}

.lp-area .terms details[open] summary::after {
  rotate: -135deg;
}

.lp-area .terms__body {
  padding: 0 14px 16px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--ink-2);
  max-height: 260px;
  overflow-y: auto;
}

.lp-area .terms__body p + p,
.lp-area .terms__body h4 {
  margin-top: 10px;
}

.lp-area .terms__body h4 {
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 13.5px;
  color: var(--ink);
}

.lp-area .form-submit {
  text-align: center;
}

.lp-area .btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 68px;
  border-radius: 14px;
  background: var(--pk);
  color: #fff;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: clamp(18px, 5vw, 21px);
  box-shadow: 0 5px 0 var(--pk-d);
  transition: translate .12s ease, box-shadow .12s ease;
}

.lp-area .btn-submit:active {
  translate: 0 4px;
  box-shadow: 0 1px 0 var(--pk-d);
}

.lp-area .form-submit__note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-2);
}

/* パンくず */
.lp-area .crumb {
  font-size: 12px;
  color: var(--ink-2);
  padding-block: 14px 0;
}

.lp-area .crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lp-area .crumb a {
  text-decoration: underline;
}

.lp-area .crumb li + li::before {
  content: "›";
  margin-right: 6px;
}

/* ------------------------------------------------------------
   身分証アップロード / 完了ページ
------------------------------------------------------------ */
.lp-area .upload {
  border: 2px dashed var(--pk-l);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  background: var(--pk-lll);
}

.lp-area .upload.has-file {
  border-style: solid;
  border-color: var(--mint);
  background: #f4fbfa;
}

.lp-area .upload__sample,
.lp-area .upload__preview {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 10px;
  border-radius: 10px;
  border: 2px solid #fff;
  box-shadow: var(--sh);
}

.lp-area .upload__preview {
  display: none;
}

.lp-area .upload.has-file .upload__preview {
  display: block;
}

.lp-area .upload__caption {
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 12px;
  line-height: 1.7;
}

.lp-area .upload__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid var(--pk);
  color: var(--pk);
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--pk-l);
}

.lp-area .upload__btn input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.lp-area .upload__filename {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-2);
  word-break: break-all;
}

.lp-area .stepper li.is-done {
  background: var(--mint-l);
  border-color: var(--mint);
  color: var(--mint-d);
}

.lp-area .done-mark {
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--mint);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 6px var(--mint-l);
}

.lp-area .done-mark svg {
  width: 42px;
  height: 42px;
}

.lp-area .next-steps {
  display: grid;
  gap: 14px;
}

.lp-area .next-steps__item {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--sh);
}

.lp-area .next-steps__title {
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 16px;
  color: var(--pk);
  margin-bottom: 4px;
}

.lp-area .next-steps__text {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-2);
}