/* =============================================================
   DHのミカタ トップページ 縦長LP（求職者向け）専用スタイル
   01 Why / 02 Point / 03 How to use / 04 Who we are / 05 Safety / 06 Start
   ※ .lp-top スコープに限定。他ページ・他セクションへ影響させない。
   ============================================================= */

.lp-top {
  /* --- design tokens --- */
  --lp-navy: #1B3D6E;     /* 見出しネイビー */
  --lp-blue: #2E7BD6;     /* アクセントブルー（英ラベル・下線・アイコン） */
  --lp-blue-light: #E8F1FB; /* ライトブルー（背景の有機シェイプ・ドット） */
  --lp-text: #3C4858;     /* 本文 */
  --lp-num: #DDE5EE;      /* 大きな番号 01〜06 */
  --lp-line-green: #06C755;
  --lp-white: #fff;

  --lp-maxw: 1100px;
  --lp-radius: 14px;
  --lp-shadow: 0 6px 24px rgba(27, 61, 110, .08);

  color: var(--lp-text);
  font-family: "Noto Sans JP", "Zen Maru Gothic", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* 装飾シェイプのはみ出しを抑える */
}

.lp-top *,
.lp-top *::before,
.lp-top *::after { box-sizing: border-box; }

.lp-top img { max-width: 100%; height: auto; display: block; }

/* PDF忠実の改行: PCでは折り返す / スマホ(768px以下)では解除して自然に流す */
.lp-br { display: inline; }

/* --- section frame --- */
.lp-section {
  position: relative;
  padding: 92px 24px;
}
.lp-inner {
  position: relative;
  max-width: var(--lp-maxw);
  margin: 0 auto;
  z-index: 1;
}

/* 背景の有機シェイプ・ドット装飾（支給アセット使用） */
.lp-section::before,
.lp-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* 左上の有機ブロブ */
.lp-section::before {
  width: 200px; aspect-ratio: 839 / 645;
  left: -64px; top: 40px;
  background-image: url("img/lp-top/deco-blob.webp");
  opacity: .8;
}
/* 右側のドット格子 */
.lp-section::after {
  width: 96px; aspect-ratio: 360 / 348;
  right: 24px; top: 56px;
  background-image: url("img/lp-top/deco-dots.webp");
}
.lp-point::before { top: auto; bottom: 60px; left: auto; right: -60px; }
.lp-start::after { left: 18px; right: auto; }

/* --- common head（番号＋英ラベル＋見出し＋下線） --- */
/* 見本(PDF)準拠: 大きな番号を左の余白に置き、英ラベル＋見出し＋波線を右にインデント */
.lp-head { position: relative; margin-bottom: 40px; padding-left: 128px; }
.lp-num {
  display: block;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 68px;
  line-height: 1;
  color: var(--lp-num);
  letter-spacing: .04em;
}
/* 左寄せヘッダーは番号を左ガターに絶対配置 */
.lp-head:not(.lp-head--center) .lp-num {
  position: absolute;
  left: 0;
  top: -2px;
}
.lp-label {
  display: block;
  margin: 2px 0 10px;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .18em;
  color: var(--lp-blue);
  text-transform: none;
}
.lp-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--lp-navy);
  letter-spacing: .02em;
}
/* 見出し直下の手描き波線（支給アセット） */
.lp-title::after {
  content: "";
  display: block;
  width: 144px; height: 14px;
  margin-top: 12px;
  background: no-repeat left center / contain
    url("img/lp-top/deco-underline.webp");
}
.lp-head--center { text-align: center; padding-left: 0; }
.lp-head--center .lp-num,
.lp-head--center .lp-label { text-align: center; }
.lp-head--center .lp-title::after { margin-left: auto; margin-right: auto; }

/* =====================  01 Why  ===================== */
.lp-why__grid {
  display: grid;
  grid-template-columns: 0.92fr 1.25fr;
  gap: 28px;
  align-items: end;
}
.lp-checklist { list-style: none; margin: 0 0 28px; padding: 0; }
.lp-checklist li {
  position: relative;
  padding-left: 38px;
  margin-bottom: 20px;
  font-size: 16px;
  letter-spacing: -0.02em; /* 「リコール…向き合えない。」を1行に収める微調整 */
}
.lp-checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 26px; height: 26px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='12' fill='none' stroke='%232E7BD6' stroke-width='1.6'/%3E%3Cpath d='M7 13.5l4 4 8-9' fill='none' stroke='%232E7BD6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lp-why__lead p { margin: 0 0 12px; font-size: 16px; }
.lp-mark {
  background: linear-gradient(transparent 58%, #FFF1A8 58%);
  font-weight: 700;
  color: var(--lp-navy);
  padding: 0 2px;
}
.lp-strong { color: var(--lp-blue); font-weight: 700; }
/* イラストの下端を「できるのか、わからない。」の行に合わせて上へ寄せる（負のマージンで footprint も縮小） */
.lp-why__img { position: relative; isolation: isolate; margin-top: -213px; }
.lp-why__img img {
  position: relative; z-index: 1; width: 100%; max-width: 720px; margin: 0 auto;
  /* 女性を少し大きくして、背後の水色ブロブと下端を揃える（上端を軸に下へ拡大） */
  transform: scale(1.117);
  transform-origin: top center;
  /* 下端をほんの少しだけフェード（幽霊化しないよう控えめに） */
  -webkit-mask-image: linear-gradient(to bottom, #000 87%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 87%, transparent 100%);
}
/* 締めコピーは全幅（グリッド外）に出して1行に収める。中央揃え＋拡大した女性と被らないよう下げる */
.lp-why__lead { margin-top: 104px; text-align: center; }
/* イラスト背後の水色ブロブ（支給アセット） */
.lp-why__img::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 58%; top: 54%;
  transform: translate(-50%, -50%);
  width: 100%; aspect-ratio: 839 / 645;
  background: no-repeat center / contain url("img/lp-top/deco-blob.webp");
}
/* 左上の「もやもや」手描き吹き出し（支給アセット） */
.lp-why__img::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 20%; top: -4px;
  width: 78px; aspect-ratio: 320 / 444;
  background: no-repeat center / contain url("img/lp-top/deco-scribble.webp");
}

/* =====================  02 Point  ===================== */
.lp-point { background: linear-gradient(180deg, #F6FAFE 0%, #fff 100%); }
.lp-point__grid {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.lp-point__card {
  position: relative;
  background: var(--lp-white);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  padding: 28px 15px 22px;
  text-align: center;
  border: 1px solid #EEF3F9;
}
.lp-point__no {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--lp-blue);
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.lp-point__icon { display: block; margin: 0 auto 14px; width: 72px; height: 72px; }
.lp-point__icon img { width: 72px; height: 72px; margin: 0 auto; }
.lp-point__title {
  margin: 0 0 10px;
  min-height: 4.5em; /* 最大3行ぶんの高さを確保し、各カードの説明文の開始位置を上揃え */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--lp-navy);
}
.lp-point__desc { margin: 0; font-size: 11.5px; line-height: 1.78; letter-spacing: -0.01em; text-align: center; }

/* =====================  03 How to use  ===================== */
.lp-how__steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}
.lp-how__step {
  flex: 1 1 0;
  max-width: 260px;
  text-align: center;
}
.lp-how__badge {
  display: inline-block;
  background: var(--lp-blue);
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  padding: 5px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.lp-how__icon {
  display: block;
  width: 132px; height: 132px;
  margin: 0 auto 16px;
  border: 2px solid var(--lp-blue-light);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.lp-how__icon img { width: 96px; height: 96px; }
.lp-how__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--lp-navy); }
.lp-how__desc { margin: 0; font-size: 14px; }
.lp-how__arrow {
  flex: 0 0 32px;
  align-self: center;
  margin-top: 56px;
  width: 32px; height: 32px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 16h18m0 0l-7-7m7 7l-7 7' fill='none' stroke='%232E7BD6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* =====================  04 Who we are  ===================== */
.lp-who { background: linear-gradient(180deg, #fff 0%, #F3F8FD 100%); }
.lp-who__grid {
  display: grid;
  grid-template-columns: 470px 340px;
  justify-content: center;
  gap: 8px;
  align-items: center;
}
/* 本文を見出しの真下に揃える（左に寄りすぎない＝中央寄り） */
.lp-who__body { padding-left: 128px; }
.lp-who__body p { margin: 0 0 12px; font-size: 16px; }
/* イラストは列の左端（＝中央寄り）に寄せてテキストと近づける */
.lp-who__img { position: relative; isolation: isolate; }
.lp-who__img img {
  position: relative; z-index: 1; width: 100%; max-width: 320px; margin: 0 auto 0 0;
  /* 下端をふんわりフェード（スパッと切れる違和感を解消） */
  -webkit-mask-image: linear-gradient(to bottom, #000 87%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 87%, transparent 100%);
}
/* イラスト背後の水色ブロブ（Whyと同じ支給アセット・左右反転で変化を付ける） */
.lp-who__img::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%) scaleX(-1);
  width: 122%; aspect-ratio: 839 / 645;
  background: no-repeat center / contain url("img/lp-top/deco-blob.webp");
}
/* イラスト未支給時は1カラムで自然に見せる（破線プレースホルダは出さない） */
.lp-who__grid--noimg { grid-template-columns: 1fr; max-width: 760px; }

/* =====================  05 Safety  ===================== */
.lp-safety__grid {
  display: grid;
  grid-template-columns: 465px 440px;
  justify-content: center;
  gap: 10px;
  align-items: center;
}
/* 本文を見出しの真下に揃える（左に寄りすぎない＝中央寄り） */
.lp-safety__body { padding-left: 128px; }
.lp-safety__body p { margin: 0 0 12px; font-size: 16px; }
.lp-safety__icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: 0;
}
.lp-safety__item { flex: 1 1 0; text-align: center; padding: 0 14px; }
/* アイコン間の縦区切り線（見本PDF準拠） */
.lp-safety__item + .lp-safety__item { border-left: 1px solid #dbe6f3; }
.lp-safety__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  margin-bottom: 14px;
}
.lp-safety__icon img { width: auto; max-height: 140px; margin: 0 auto; }
.lp-safety__label { display: block; font-size: 13.5px; font-weight: 700; color: var(--lp-navy); line-height: 1.5; }

/* =====================  06 Start  ===================== */
/* 見本PDF準拠: 左にテキスト＋LINEボタン／右にロゴ */
.lp-start { background: linear-gradient(180deg, #F6FAFE 0%, #EAF3FC 100%); }
/* 本文＋ハートを近づけて中央に配置し、CTAボタンは下に独立した中央寄せ行にする */
.lp-start__grid {
  display: grid;
  grid-template-columns: auto 130px;
  justify-content: center;
  gap: 40px;
  align-items: start; /* 本文とハートを上端で揃える */
}
.lp-start__left { padding-left: 0; }
.lp-start__body { margin: 0; }
.lp-start__body p { margin: 0 0 6px; font-size: 16px; }
/* ボタンはグリッドの下に独立行として全幅で中央配置 */
.lp-start__cta { margin: 32px auto 0; text-align: center; }
.lp-line-btn {
  display: inline-block;
  transition: transform .18s ease, filter .18s ease;
}
.lp-line-btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
.lp-line-btn img { width: 260px; max-width: 100%; margin: 0; }
/* ロゴは小さめ固定サイズにして、本文テキストと上端を揃える（上揃え）。一回り小さく */
.lp-start__logo { display: flex; align-items: flex-start; justify-content: flex-start; }
.lp-start__logo img { height: auto; width: 130px; max-width: 100%; max-height: none; margin: 0; object-fit: contain; object-position: left top; }

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 1024px) {
  .lp-section { padding: 72px 22px; }
  .lp-head:not(.lp-head--center) { padding-left: 104px; }
  .lp-who__body, .lp-safety__body, .lp-start__left { padding-left: 104px; }
  .lp-num { font-size: 56px; }
  .lp-title { font-size: 27px; }

  /* 02 Point: 4列 → 2列 */
  .lp-point__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 768px) {
  /* スマホはPDFの改行を解除して自然に折り返す（見出しの<br>は維持） */
  .lp-br { display: none; }

  .lp-section { padding: 56px 20px; }
  .lp-head:not(.lp-head--center) { padding-left: 62px; }
  .lp-num { font-size: 40px; }
  .lp-head:not(.lp-head--center) .lp-num { top: -1px; }
  .lp-label { font-size: 13px; }
  .lp-title { font-size: 22px; line-height: 1.55; }
  .lp-title::after { width: 116px; height: 12px; }

  /* 01 Why: 縦積み（画像は下） */
  .lp-why__grid { grid-template-columns: 1fr; gap: 8px; }
  .lp-why__img { padding-top: 8px; order: 2; margin-top: 0; }
  .lp-why__lead { margin-top: 72px; } /* 拡大した女性と締めコピーが被らないよう下げる */
  .lp-why__img img { width: 90%; max-width: 440px; }
  /* スマホは女性イラストが縮むぶん、左上のグルグル（スクリブル）も小さく。PC(78px)より縮小 */
  .lp-why__img::after { width: 48px; }
  .lp-checklist li { font-size: 15px; padding-left: 34px; }
  .lp-checklist li::before { width: 22px; height: 22px; }
  .lp-why__lead p { font-size: 15px; }

  /* 02 Point: 2列 → 1列 */
  .lp-point__grid { grid-template-columns: 1fr; gap: 14px; }
  .lp-point__card { padding: 24px 20px 20px; }
  .lp-point__title { min-height: 0; } /* 1カラムは揃える必要がないので余白を出さない */
  .lp-point__desc { font-size: 13.5px; }

  /* 03 How: 横3 → 縦＋下向き矢印 */
  .lp-how__steps { flex-direction: column; align-items: center; gap: 0; }
  .lp-how__step { max-width: 320px; width: 100%; }
  .lp-how__arrow {
    margin: 14px auto;
    transform: rotate(90deg);
  }

  /* 04 Who: 縦積み（画像は下） */
  .lp-who__grid { grid-template-columns: 1fr; gap: 24px; }
  .lp-who__img { order: 2; }
  .lp-who__img img { width: 72%; max-width: 300px; margin: 0 auto; }
  .lp-who__body { padding-left: 0; }
  .lp-who__body p { font-size: 15px; }

  /* 05 Safety: テキスト下にアイコン横並び維持 */
  .lp-safety__grid { grid-template-columns: 1fr; gap: 28px; }
  .lp-safety__body { padding-left: 0; }
  .lp-safety__body p { font-size: 15px; }
  .lp-safety__icon { height: 76px; }
  .lp-safety__icon img { max-height: 76px; }
  .lp-safety__label { font-size: 12px; }

  /* 06 Start: 縦積み＆中央寄せ */
  .lp-start__grid { grid-template-columns: 1fr; gap: 24px; }
  .lp-start__left { padding-left: 0; text-align: center; order: 2; }
  .lp-start__logo { order: 1; justify-content: center; }
  .lp-start__logo img { height: auto; width: 110px; max-height: none; object-position: center; }
  .lp-start__body p { font-size: 15px; }
  .lp-line-btn img { width: 300px; margin: 0 auto; }

  /* 装飾は控えめに */
  .lp-section::before { width: 132px; height: auto; left: -44px; }
  .lp-section::after { width: 70px; height: auto; right: 14px; }
}

@media (max-width: 380px) {
  /* 05 Safety: 入らなければ縦 */
  .lp-safety__icons { flex-wrap: wrap; }
  .lp-safety__item { flex: 1 1 40%; }
}