/* lpm002 専用の追加スタイル。lpm001のstyle-lpm001.css（ウィザード・タブ等の共通部分）を土台とし、lpm002独自の部分のみをここに追加する。
   構成（2026-09-29時点）: ①イントロカード（バナー画像＋導入文＋安心材料＋「登録に進む」）→ ②質問カード（既存step1〜6ウィザード）、
   ③サービス紹介モーダル（旧：タブ・働き方・FAQ・フッター。ユーザーのクリックでのみ開く）。
   ファーストビューのメッセージはlpm001と同じくバナー画像側に持たせるため、HTML側の専用ヒーローCSSは無し。 */

/* 固定CTA（lpm001由来）は廃止済みのため、lpm001側で確保している下部余白は不要（JS無効時の通常表示も含む） */
.lpm002 {
  padding-bottom: 0;
}

/* イントロカード内の導入文：「まず資格を選ぶ」という最初の行動だけを示す（対象資格・対象外の注記は
   ユーザー様指示（2026-09-29）で「マッサージキャリアナビについて」の下（.lpm002-intro__note）へ移動） */
.lpm002-form-lead {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px 18px;
  text-align: center;
}

.lpm002-form-lead__text {
  margin: 0 0 8px;
}

/* 見出し: 「何を無料で提供するか」を1画面目で言い切る（実機FB「文字が小さく訴求が分かりにくい」への対応、2026-09-29）。
   バナー画像は縮小表示されると文字が読みにくくなるため、HTML側にこのLP唯一の「大見出し」を置く */
.lpm002-form-lead__head {
  display: block;
  font-size: clamp(17px, 5vw, 20px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #1a1a1a;
  margin-bottom: 4px;
}

/* 黒一色で目を引かないとの実機FB（2026-09-30）を受け、キーワードに色を付ける。
   「資格」はブランドグリーン、「無料」はボタンと同じアクセントのオレンジ＋黄色マーカー */
.lpm002-form-lead__head strong {
  font-weight: inherit;
  color: #2f8f7a;
}

.lpm002-form-lead__head em {
  font-style: normal;
  font-size: 1.15em;
  color: #e06d1f;
  background: linear-gradient(transparent 62%, #ffe98a 62%);
  padding: 0 2px;
}

.lpm002-form-lead__sub {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #444;
}

/* 導入文の直下（.lpm002-intro__cta-wrap）: 「登録に進む」を「最短1分で登録できます」の直後に配置（2026-09-29ユーザー様指示） */
.lpm002-intro__cta-wrap {
  padding: 4px 20px 0;
}

/* ボタン直上の一言（「＼ ～ ／」形式）。ボタンと同じオレンジで視線をボタンへ誘導する（2026-09-30） */
.lpm002-intro__catch {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: #e06d1f;
  text-align: center;
  letter-spacing: 0.02em;
}

/* 対象資格・対象外の注記: 「マッサージキャリアナビについて」の下に配置（2026-09-29ユーザー様指示）。
   1画面目の主役（見出し・CTA）より目立たないよう、法的注記と同じ「注釈」の強さに揃える（2026-09-30 実機FB） */
.lpm002-intro__note {
  max-width: 640px;
  margin: 10px auto 0;
  padding: 0 20px;
  font-size: 10px;
  color: #767676;
  line-height: 1.6;
  text-align: center;
}

/* 文節単位の折り返し: 文節（.lpm002-phrase）の途中では改行させず、文節の切れ目でのみ改行する。
   1文節が1行より長い場合に備え max-width:100% を付け、その場合のみ文節内での折り返しを許す */
.lpm002-phrase {
  display: inline-block;
  max-width: 100%;
}

/* 働き方の補足（3区分）。訴求の軸ではなく「どの働き方でも相談できる」安心材料として、控えめなリスト表示にする */
.lpm002-worktype__intro {
  text-align: center;
  font-size: 14px;
  color: #555;
  line-height: 1.8;
  margin: 0 0 18px;
}

.lpm002-worktype__list {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.lpm002-worktype__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f5f8f7;
  border-radius: 10px;
}

.lpm002-worktype__item-name {
  flex: 0 0 7.5em;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #2f8f7a;
}

.lpm002-worktype__item-desc {
  margin: 0;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

/* 鍼灸師の実務経験要件の注記（KKN.md: 6か月以上の機能訓練指導の実務経験が必要） */
.lpm002-worktype__item-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #888;
  line-height: 1.5;
}

.lpm002-worktype__note {
  font-size: 11px;
  color: #999;
  line-height: 1.7;
  margin: 0 0 20px;
}

.lpm002-worktype {
  text-align: center;
}

.lpm002-worktype__list,
.lpm002-worktype__note {
  text-align: left;
}

/* よくあるご不安・ご質問（ネイティブのdetails/summaryを使用、JS不要） */
.lpm002-faq__list {
  display: grid;
  gap: 10px;
}

.lpm002-faq__item {
  padding: 4px 16px;
  background: #f5f8f7;
  border-radius: 10px;
}

.lpm002-faq__question {
  padding: 14px 28px 14px 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.lpm002-faq__question::-webkit-details-marker {
  display: none;
}

.lpm002-faq__question::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 700;
  color: #2f8f7a;
}

.lpm002-faq__item[open] .lpm002-faq__question::after {
  content: "－";
}

.lpm002-faq__answer {
  margin: 0;
  padding: 0 0 16px;
  font-size: 13px;
  color: #555;
  line-height: 1.8;
}

/* ==========================================================================
   「アプリっぽい挙動」の部分採用（2026-09-29、opusサブエージェント評価に基づく試験実装）
   対象はCSSのみ。ウィザードのJS・フォームのフィールド構成・GTMの計測ロジックは一切変更しない。
   採用: ①セグメント型プログレスバー（ストーリーズ風「終わりが見える」表現）、②資格ボタンのタップ即時反応
   見送り: スワイプ操作・ボトムナビ・PWA化（誤操作・保守コストのリスクが高いため）
   なお、既存のstep切り替えアニメーション（lpm001-step-inキーフレーム）とinput文字サイズ16px以上は
   style-lpm001.css側で既に対応済みのため、ここでの追加対応は不要（lpm002にもそのまま適用される）。
   ========================================================================== */

/* ①セグメント型プログレスバー: 6ステップぶんの区切り線を背景パターンで表現。
   進捗の塗り(.lpm001-wizard__progress-bar)は塗られた区間の区切りまでは覆ってしまうため完全な分割にはならないが、
   未到達区間には区切りが見え、ステップを1つ進むたびに緑の塗りがちょうど区切り位置で止まるため、
   ストーリーズの「セグメントが埋まっていく」見た目に近づく。JS側のwidth操作は無変更。 */
.lpm002 .lpm001-wizard__progress {
  background-image: repeating-linear-gradient(
    to right,
    #e2e2e2 0,
    #e2e2e2 calc(16.666% - 4px),
    #fff calc(16.666% - 4px),
    #fff 16.666%
  );
}

.lpm002 .lpm001-wizard__progress-bar {
  background-image: repeating-linear-gradient(
    to right,
    #2f8f7a 0,
    #2f8f7a calc(16.666% - 4px),
    rgba(255, 255, 255, 0.55) calc(16.666% - 4px),
    rgba(255, 255, 255, 0.55) 16.666%
  );
  background-size: 600% 100%; /* 塗り要素自体の幅が可変のため、区切り位置をトラック全体基準に固定する */
  background-position: left center;
}

/* ②資格ボタン等、選択肢タップ時の即時フィードバック。
   選択が確定した後の状態変化（既存の:has(input:checked)）とは別に、押した瞬間の手応えを返す。 */
.lpm002 .lpm001-wizard .mwform-radio-field label,
.lpm002 .lpm001-wizard .mwform-checkbox-field label {
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.lpm002 .lpm001-wizard .mwform-radio-field label:active,
.lpm002 .lpm001-wizard .mwform-checkbox-field label:active {
  transform: scale(0.97);
  background: #eef7f4;
}

@media (prefers-reduced-motion: reduce) {
  .lpm002 .lpm001-wizard .mwform-radio-field label:active,
  .lpm002 .lpm001-wizard .mwform-checkbox-field label:active {
    transform: none;
  }
}

/* step3の日付目安「(2026年10月までに)」が狭い画面で途中改行されないよう、目安全体を1かたまりで折り返す */
.lpm002 .lpm001-wizard__req-date-hint {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 359px) {
  .lpm002 .lpm001-wizard__req-date-hint {
    font-size: 11px;
  }
}

/* 送信ボタン直下の安心材料（JSで挿入、承認済みの文言） */
.lpm002-submit-reassure {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #2f8f7a;
  text-align: center;
}

/* ==========================================================================
   フルスクリーン・カード型UI（2026-09-29、ユーザー指示のデザインイメージに基づく）
   ①イントロカード（サービス紹介）→「登録に進む」→ ②質問カード（既存step1〜6）
   ③サービス紹介はユーザーのクリックでのみ開くモーダル（自動オープンなし）
   状態クラス（lpm002-app / lpm002-state-intro / lpm002-state-quiz）はJSが付与する。
   JSが動かない環境ではこれらが付かず、従来どおり縦に並んだ通常表示になる（段階的強化）。
   ========================================================================== */

/* カード型UI時の背景色（下部余白の解除はファイル冒頭の .lpm002 で共通対応済み） */
.lpm002.lpm002-app {
  padding-bottom: 0;
  background: #f1f4f3;
}

.lpm002-app .lpm002-screen {
  max-width: 480px; /* スマホ優先。PCでも中央にスマホ幅のカードとして表示する */
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.lpm002-app.lpm002-state-intro .lpm002-quiz,
.lpm002-app.lpm002-state-quiz .lpm002-intro {
  display: none;
}

/* ---------- ①イントロカード ---------- */
.lpm002-app .lpm002-intro {
  padding: 10px 0 calc(16px + env(safe-area-inset-bottom));
}

.lpm002-app .lpm002-intro .lpm001-banner__image-wrap {
  margin: 0;
}

.lpm002-app .lpm002-intro .lpm002-form-lead {
  padding: 16px 20px 8px;
}

/* 安心材料の1行（チェック付き3項目）。一度フラットなテキスト行に変更したが、ユーザー様より
   「前のピル型の方が見やすい」とのFBがあり元のデザインに戻した（2026-09-30）。390px幅以上では1行に収める */
.lpm002-intro__reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  margin: 14px 10px 0;
  padding: 8px 6px;
  list-style: none;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.lpm002-intro__reassure li {
  position: relative;
  padding-left: 13px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
  white-space: nowrap;
}

/* 絵文字は使わず、ブランドカラーの線画チェック（CSSで描画） */
.lpm002-intro__reassure li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 50%;
  width: 4px;
  height: 8px;
  border-right: 2px solid #2f8f7a;
  border-bottom: 2px solid #2f8f7a;
  transform: translateY(-65%) rotate(45deg);
}

/* 縦幅の狭い端末（表示領域の高さ640px未満。アプリ内ブラウザのバー分を差し引いた実表示高さで判定される）では非表示にし、
   「登録に進む」ボタンが1画面目に収まることを優先する（複数画面サイズで実測して閾値を決定、2026-09-29） */
@media (max-height: 639px) {
  .lpm002-app .lpm002-intro__reassure {
    display: none;
  }

  /* 安心材料が非表示になる分、見出しの余白のみ少し詰めて「登録に進む」の1画面目収容を優先する */
  .lpm002-app .lpm002-form-lead__head {
    font-size: clamp(16px, 4.8vw, 18px);
  }

  .lpm002-app .lpm002-intro__actions {
    margin-top: 10px;
  }
}

/* 390px未満の幅では3項目が1行に収まらず2行になる（角丸を弱めて2行でも自然に見せる） */
@media (max-width: 389px) {
  .lpm002-intro__reassure {
    border-radius: 14px;
  }
}

.lpm002-intro__actions {
  /* 以前は margin-top:auto で画面最下部へ押し下げていたが、コンテンツが画面高さより短い端末で
     導入文とボタンの間に大きな空白ができたため、固定の余白に変更（2026-09-29 ユーザーFB）。
     見出し追加（2026-09-29 実機FB対応）で導入文の高さが増えた分、ここを24px→18pxに詰めて相殺 */
  margin-top: 18px;
  padding: 0 20px 8px;
  display: grid;
  gap: 10px;
  justify-items: center;
}

/* 背景（淡いミント）と同系色の緑では目立たないとの実機FB（2026-09-30）を受け、補色系のオレンジに変更。
   ページ内既存のアクセント色（更新日 #e8964f）の濃色版で、白文字20px太字の大きい文字のコントラスト基準（3:1）を満たす。
   lpm001と共用の .lpm001-cta 自体は変更せず、lpm002のこのボタンのみ上書き */
.lpm002-intro__start {
  width: 100%;
  max-width: none;
  min-height: 60px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: #e06d1f;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 0 #b9560f, 0 8px 18px rgba(224, 109, 31, 0.3);
}

/* 右向きの矢印（線画）で「次へ進む」ことを示す */
.lpm002-intro__start::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 12px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
}

.lpm002-intro__start:active {
  transform: scale(0.98);
}

/* 「マッサージキャリアナビについて」等、モーダルを開くボタン（控えめなテキストリンク風） */
.lpm002-about-link {
  background: none;
  border: none;
  padding: 6px 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #2f8f7a;
  text-decoration: underline;
  cursor: pointer;
}

/* イントロカード内の入口: 主役の「登録に進む」より目立たせないためテキストリンクのまま維持しつつ、
   ①「i」アイコンで「ページ内で説明が開く」ことを示し（別ページへ飛ぶ不安を減らす）、
   ②タップ領域を44px以上に広げる（2026-09-29） */
.lpm002-intro .lpm002-about-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  text-underline-offset: 3px;
}

/* 「i」は文字にするとリンクの下線が掛かってしまうため、線画SVGを背景として描画する */
.lpm002-intro .lpm002-about-link::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f8f7a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6'/%3E%3Ccircle cx='12' cy='7.6' r='0.6' fill='%232f8f7a'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lpm002-intro__legal {
  margin: 8px 20px 0;
  font-size: 10px;
  line-height: 1.7;
  color: #767676;
  text-align: center;
}

.lpm002-intro__legal a {
  color: #767676;
}

/* JS無効時は、イントロ内のボタン類は機能しないため隠す（通常の縦並び表示で全情報が見えるため） */
body:not(.lpm002-app) .lpm002-intro__cta-wrap,
body:not(.lpm002-app) .lpm002-intro__actions,
body:not(.lpm002-app) .lpm002-quiz__bar {
  display: none;
}

/* ---------- ②質問カード ---------- */
.lpm002-app .lpm002-quiz {
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #eef7f4 0%, #f1f4f3 100%);
  border-top: none;
}

.lpm002-quiz__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  padding: 6px 4px;
}

.lpm002-quiz__logo {
  height: 24px;
  width: auto;
  min-width: 0;
  max-width: 50%;
  object-fit: contain;
}

.lpm002-quiz__back {
  visibility: hidden; /* step1表示中のみ表示（下記:has）。step2以降はウィザード内の「戻る」を使う */
  background: none;
  border: none;
  padding: 6px 4px;
  font: inherit;
  font-size: 13px;
  color: #888;
  cursor: pointer;
  min-width: 5.5em;
  text-align: left;
}

.lpm002-quiz:has(.lpm001-wizard__step[data-step="1"].is-active) .lpm002-quiz__back {
  visibility: visible;
}

.lpm002-about-link--bar {
  min-width: 5.5em;
  text-align: right;
  font-size: 12px;
  white-space: nowrap;
}

/* MW WP Formのラッパー〜ウィザードまでを縦に伸ばし、カードが画面の残り高さいっぱいになるようにする */
.lpm002-app .lpm002-quiz .mw_wp_form,
.lpm002-app .lpm002-quiz .mw_wp_form form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.lpm002-app .lpm002-quiz .lpm001-wizard {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 16px;
  border-radius: 20px;
}

.lpm002-app .lpm002-quiz .lpm001-wizard__title {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.lpm002-app .lpm002-quiz .lpm001-wizard__step.is-active {
  flex: 1;
  padding-top: 8px;
}

/* 質問カード内の選択肢は、指で押しやすいよう高さを少し広げる */
.lpm002-app .lpm002-quiz .mwform-radio-field label {
  min-height: 56px;
}

/* ウィザード内の「戻る」はカード最下部に表示 */
.lpm002-app .lpm002-quiz .lpm001-wizard__prev {
  margin-top: 12px;
}

/* style-lpm001.cssの .lpm001-wizard__prev { display:block } がhidden属性より優先され、
   JSがstep1でhiddenにしても「戻る」が見えてしまう（lpm001本番側にも同じ挙動あり。lpm001は触らない方針のためlpm002側のみで補正）。
   step1ではヘッダーの「‹ 戻る」（イントロへ戻る）だけを出す */
.lpm002 .lpm001-wizard__prev[hidden] {
  display: none;
}

/* ---------- ③サービス紹介モーダル（下からせり上がるシート。開閉は既存の利用規約モーダルと同じ方式） ---------- */
.lpm002-about-modal {
  position: fixed;
  inset: 0;
  z-index: 150; /* 利用規約モーダル(200)よりは下 */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.lpm002-about-modal[hidden] {
  display: none;
}

.lpm002-about-modal__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  max-height: 92dvh;
  background: #fff;
  border-radius: 18px 18px 0 0;
  animation: lpm002-sheet-in 0.25s ease both;
}

@keyframes lpm002-sheet-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lpm002-about-modal__inner {
    animation: none;
  }
}

.lpm002-about-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
}

.lpm002-about-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.lpm002-about-modal__close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #999;
  padding: 0 4px;
  cursor: pointer;
}

.lpm002-about-modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* モーダル内では各セクションの余白を詰め、PC向けの最大幅指定も解除する */
.lpm002-about-modal .lpm001-section {
  padding: 28px 16px;
  max-width: none;
}

.lpm002-about-modal .lpm001-service {
  border-top: none;
}

.lpm002-about-modal__foot {
  display: grid;
  gap: 4px;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #eee;
}

.lpm002-about-modal__start {
  width: 100%;
  max-width: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.lpm002-about-modal__back {
  background: none;
  border: none;
  padding: 8px;
  font: inherit;
  font-size: 13px;
  color: #888;
  cursor: pointer;
}