/*
 * 未経験LP（page-mikeiken.php）2.7.0
 * 画面の正：site/output/renewal-2026-10/02_未経験LP_モック.html（v4・COO確定 2026-10-20／v5 文言）
 * モックの最終的な指定（v3 の上書き後）を移した。クラス名は lp- を付けてテーマ・Cocoonと分けた。
 * FVの決め文句は Zen Kaku Gothic New 900、数字は Oswald。セクション見出しは本文の書体の太字（モックどおり）
 */

.lp {
  --o: #EC6A1E; --oh: #D55816; --ol: #FEF3EC; --os: #FFF7ED; --ot: #B4500F;
  --dark: #1F2937; --t2: #4B5563; --muted: #6B7280; --soft: #F9FAFB; --gray: #F3F4F6; --bd: #E5E7EB;
  --n: #1D3557; --ns: #EEF2F8; --y: #FFE14D;
  --display: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; --num: 'Oswald', 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  color: var(--dark); font-size: 16px; line-height: 1.8;
}
.lp p { margin: 0; }
.lp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.lp-sec { padding: 68px 0; }
.lp-soft { background: var(--soft); }
.lp .lp-sec h2, .lp .lp-final h2 { font-family: 'Noto Sans JP', sans-serif; font-size: 30px; line-height: 1.4; margin: 0 0 10px; font-weight: 900; letter-spacing: .02em; color: var(--dark); }
.lp-sec-lead { color: var(--t2); margin: 0 0 28px !important; max-width: 760px; }
.lp .lp-center { text-align: center; }
.lp-mk { background: linear-gradient(transparent 58%, var(--y) 58%); padding: 0 .08em; }

/* ---------- ボタン（立体＋丸い矢印）と吹き出し ---------- */
.lp .lp-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; text-align: center;
  font-weight: 700; line-height: 1.35; color: #fff; border-radius: 999px; padding: 18px 26px 18px 34px; font-size: 19px;
  background: linear-gradient(180deg, #F5813A 0%, #EC6A1E 100%);
  box-shadow: 0 6px 0 #B4500F, 0 12px 20px rgba(180, 80, 15, .25); transition: transform .08s, box-shadow .08s;
}
.lp .lp-btn:hover { background: linear-gradient(180deg, #EF7630 0%, #D55816 100%); color: #fff; }
.lp .lp-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #B4500F, 0 6px 12px rgba(180, 80, 15, .2); }
.lp-arr { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--o); font-size: 16px; font-weight: 900; margin-left: 6px; line-height: 1; }
.lp-bubble { display: block; font-weight: 900; font-size: 15px; color: var(--n); margin: 0 0 10px !important; letter-spacing: .02em; }
.lp-bubble b { color: var(--ot); }
.lp-cta-wrap { display: inline-flex; flex-direction: column; align-items: center; }

/* ---------- ① FV ---------- */
.lp-fv { position: relative; overflow: hidden; background: #FFF5EA; padding: 40px 0 60px; }
.lp-fv::before {
  content: ""; position: absolute; top: -30%; right: -12%; width: 58%; height: 170%;
  background: linear-gradient(170deg, #F7893F 0%, #EC6A1E 70%); transform: rotate(14deg); border-radius: 80px; z-index: 0;
}
.lp-fv::after { content: ""; position: absolute; left: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--y); opacity: .55; z-index: 0; }
.lp-fv > .lp-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; }
.lp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lp-tag { display: inline-block; background: var(--n); color: #fff; font-weight: 700; font-size: 14px; border-radius: 6px; padding: 3px 12px; }
.lp .lp-catch { font-family: var(--display); font-weight: 900; color: var(--n); margin: 0 0 20px; line-height: 1.15; letter-spacing: .01em; }
.lp-catch > span { display: block; }
.lp-c1 { font-size: 36px; }
.lp-c2 { font-size: 96px; color: var(--o); line-height: 1; margin: 6px 0 14px; text-shadow: 4px 4px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff; }
.lp-c2 em { font-style: normal; display: inline-block; background: linear-gradient(transparent 62%, var(--y) 62%); padding: 0 4px; text-shadow: none; }
.lp-c3 span { display: inline-block; background: var(--n); color: #fff; font-size: 34px; padding: 6px 16px 8px; border-radius: 6px; transform: rotate(-2deg); box-shadow: 4px 4px 0 var(--y); }
.lp-c4 { font-size: 34px; margin-top: 12px; }
.lp-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; max-width: 460px; } /* 2.7.7：月給を外して3つ */
.lp-pt { background: #fff; border: 2px solid var(--n); border-radius: 12px; padding: 10px 6px; text-align: center; }
.lp-pt .lp-k { font-size: 12px; font-weight: 700; color: var(--n); line-height: 1.4; }
.lp-pt .lp-v { font-family: var(--num); font-weight: 700; font-size: 27px; color: var(--o); line-height: 1.25; white-space: nowrap; }
.lp-pt .lp-v small { font-size: 12px; font-weight: 700; margin-left: 1px; }
.lp-fv-lead { font-size: 16.5px; font-weight: 700; margin: 14px 0 18px !important; }
.lp-photo {
  position: relative; aspect-ratio: 1 / 1; border-radius: 20px; border: 6px solid #fff; box-shadow: 0 18px 40px rgba(31, 41, 55, .18);
  background: #F3F4F6 center / cover no-repeat;
}
.lp-badge {
  position: absolute; width: 118px; height: 118px; border-radius: 50%; background: var(--o); color: #fff; border: 4px solid #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-family: var(--display); font-weight: 900; font-size: 21px; line-height: 1.3; box-shadow: 0 8px 20px rgba(236, 106, 30, .3);
}
.lp-badge small { font-family: 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 12px; }
.lp-badge.lp-n { background: var(--n); box-shadow: 0 8px 20px rgba(29, 53, 87, .25); }
.lp-badge.lp-y { background: var(--y); color: var(--n); box-shadow: 0 8px 20px rgba(0, 0, 0, .15); }
.lp-b1 { top: -14px; left: -14px; }
.lp-b2 { top: 28%; right: -16px; }
.lp-b3 { bottom: -14px; left: 22%; }

/* ---------- ② おすすめ ---------- */
.lp-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-ck { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 16px 16px 16px 52px; position: relative; font-weight: 700; font-size: 16px; line-height: 1.55; display: flex; align-items: center; }
.lp-ck::before { content: ""; position: absolute; left: 16px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 6px; background: var(--o); }
.lp-ck::after { content: ""; position: absolute; left: 24px; top: 50%; width: 7px; height: 12px; margin-top: -8px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.lp-answer { margin-top: 20px !important; text-align: center; font-size: 24px; font-weight: 900; line-height: 1.6; }
.lp-hl { display: inline-block; background: linear-gradient(transparent 58%, var(--y) 58%); }
.lp-answer .lp-s { display: block; font-size: 15px; font-weight: 500; color: var(--t2); }

/* ---------- ④ 条件 ---------- */
.lp-cond { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lp-ci { background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 16px; }
.lp-ci .lp-k { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 2px !important; }
.lp-ci .lp-v { font-size: 22px; font-weight: 900; line-height: 1.4; margin: 0 0 4px !important; }
.lp-ci .lp-v.lp-o { color: var(--ot); font-family: var(--num); font-weight: 700; }
.lp-ci .lp-d { font-size: 13px; color: var(--t2); line-height: 1.65; }
.lp-wide { grid-column: span 3; } /* 2.7.7：月給のカードを外したので、勤務地の右を3列ぶん使う */
.lp-nw { white-space: nowrap; }
.lp-allow { margin-top: 28px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: stretch; }
.lp-allow-box { background: #fff; border: 1px solid #F6C9A8; border-radius: 14px; padding: 20px 22px; }
.lp .lp-allow-box h3 { font-size: 20px; margin: 0 0 4px; font-weight: 900; }
.lp-allow-box .lp-s { margin: 0 0 12px !important; font-size: 14px; color: var(--t2); }
.lp-al { border-collapse: collapse; width: 100%; font-size: 15px; margin: 0; }
.lp-al td { border: none; border-top: 1px solid var(--bd); padding: 8px 4px; background: none; }
.lp-al td:last-child { text-align: right; font-weight: 700; white-space: nowrap; font-family: var(--num); }
.lp-story { background: var(--n); color: #fff; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; justify-content: center; }
.lp-from { font-size: 14px; opacity: .85; margin: 0 0 4px !important; }
.lp-big { font-size: 24px; font-weight: 900; line-height: 1.45; margin: 0 0 8px !important; }
.lp-big b { font-size: 34px; font-family: var(--num); font-weight: 700; color: var(--y); }
.lp-src { font-size: 12px; opacity: .75; }
.lp-samples-h { font-size: 18px; font-weight: 900; margin: 36px 0 12px !important; }
.lp-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp .lp-sample { display: block; background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 16px 16px 14px; font-size: 13.5px; text-decoration: none; color: var(--dark); }
.lp .lp-sample:hover { border-color: #F6C9A8; }
.lp-sb { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--n); background: var(--ns); border-radius: 4px; padding: 0 7px; margin-bottom: 6px; }
.lp-st { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.5; margin: 0 0 8px; }
.lp-sample dl { display: grid; grid-template-columns: 56px 1fr; gap: 3px 8px; margin: 0; }
.lp-sample dt { color: var(--muted); }
.lp-sample dd { margin: 0; }
.lp-sample dd.lp-pay { font-weight: 900; font-size: 15px; }
.lp .lp-more { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--n); text-decoration: none; }
.lp-band { margin-top: 36px; background: #fff; border: 2px solid var(--n); border-radius: 14px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lp-band p { font-size: 21px; font-weight: 900; line-height: 1.55; }
.lp-band p span { display: block; font-size: 14px; font-weight: 500; color: var(--t2); }

/* ---------- ⑤ おまかせ ---------- */
.lp-sup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-sp { background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 18px; }
.lp-who { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--gray); border-radius: 4px; padding: 0 7px; margin-bottom: 8px; }
.lp-sp b { display: block; font-size: 17px; line-height: 1.5; margin-bottom: 4px; }
.lp-sp .lp-d { font-size: 14px; color: var(--t2); }

/* ---------- ⑥ 先輩 ---------- */
.lp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.lp-stt { background: var(--n); color: #fff; border-radius: 14px; padding: 16px; text-align: center; }
.lp-stt .lp-v { font-family: var(--num); font-size: 30px; font-weight: 700; line-height: 1.25; color: var(--y); }
.lp-stt .lp-v small { font-size: 15px; margin-left: 2px; }
.lp-stt .lp-k { font-size: 13px; opacity: .9; }
.lp-st-note { font-size: 12px; color: var(--muted); margin: -12px 0 22px !important; }
.lp-voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-voice { background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 20px; }
.lp-route { font-size: 13px; color: var(--muted); margin: 0 0 6px !important; }
.lp-route b { color: var(--dark); }
.lp-vh { font-size: 19px; font-weight: 900; line-height: 1.5; margin: 0 0 8px !important; }
.lp-voice p:last-child { font-size: 14.5px; color: var(--t2); }

/* ---------- ⑦ 流れ ---------- */
.lp-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; counter-reset: lpf; }
.lp-fl { background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 16px 14px; position: relative; }
.lp-fl::before { counter-increment: lpf; content: counter(lpf); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dark); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.lp-fl.lp-on { background: var(--os); border-color: #F6C9A8; }
.lp-fl.lp-on::before { background: var(--o); }
.lp-fl b { display: block; font-size: 15px; line-height: 1.5; margin-bottom: 4px; }
.lp-fl span { font-size: 13px; color: var(--t2); display: block; line-height: 1.65; }

/* ---------- ⑧ よくある質問 ---------- */
.lp-faq { max-width: 820px; margin: 0 auto; }
.lp-faq details { background: #fff; border: 1px solid var(--bd); border-radius: 12px; margin-bottom: 10px; }
.lp-faq summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 52px; font-weight: 700; position: relative; line-height: 1.6; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::before { content: "Q"; position: absolute; left: 18px; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--dark); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.lp-faq summary::after { content: "＋"; position: absolute; right: 18px; top: 15px; color: var(--muted); }
.lp-faq details[open] summary::after { content: "－"; }
.lp-a { padding: 0 20px 16px 52px; color: var(--t2); font-size: 15px; }

/* ---------- ⑨ 最後 ---------- */
.lp-final {
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .35) 0 14px, rgba(255, 255, 255, 0) 14px 28px), linear-gradient(180deg, #FFE9D6 0%, #FFF5EA 100%);
  padding: 68px 0; text-align: center;
}
.lp .lp-final h2 { font-size: 40px; line-height: 1.45; margin: 0 0 8px; }
.lp-final h2 .lp-o { color: var(--o); }
.lp-l { font-weight: 700; margin: 0 0 22px !important; }
.lp-license { font-size: 12px; color: var(--muted); margin: 22px 0 0 !important; }

/* ---------- スマホの追従 ---------- */
.lp-sticky { display: none; }

/* ---------- LP用のヘッダー・フッター ---------- */
.tr-footer.tr-footer-lp { padding: 28px 0 90px; font-size: 13px; }
.tr-footer-lp img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .9; margin-bottom: 8px; display: block; }
.tr-footer-lp p { margin: 2px 0; color: #C9D4E5; }

/* ---------- 横に並ぶカードの行をそろえる（2.7.5。文字の量が違っても段がずれないように。subgrid） ---------- */
.lp-cond { grid-auto-rows: auto; row-gap: 0; }
.lp-ci { display: grid; grid-row: span 3; grid-template-rows: subgrid; margin-bottom: 12px; }
.lp-samples { grid-auto-rows: auto; row-gap: 0; }
.lp .lp-sample { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; margin-bottom: 14px; }
.lp-sb { justify-self: start; }
.lp-voices { grid-auto-rows: auto; row-gap: 0; }
.lp-voice { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; margin-bottom: 16px; }
@media (min-width: 641px) {
  .lp-flow { grid-auto-rows: auto; row-gap: 0; }
  .lp-fl { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; margin-bottom: 10px; }
}

/* ---------- タブレット ---------- */
@media (max-width: 900px) {
  .lp-fv > .lp-wrap { grid-template-columns: 1fr; }
  .lp-photo { display: none; }
  .lp-fv::before { top: auto; bottom: -40%; right: -30%; width: 120%; height: 60%; transform: rotate(-8deg); opacity: .14; }
  .lp-fv::after { display: none; }
  .lp-points { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .lp-checks { grid-template-columns: 1fr 1fr; }
  .lp-samples, .lp-voices, .lp-allow { grid-template-columns: 1fr; }
  .lp-cond { grid-template-columns: 1fr 1fr; }
  .lp-wide, .lp-ci-pref { grid-column: span 2; }
  .lp-sup, .lp-stats, .lp-flow { grid-template-columns: 1fr 1fr; }
}

/* ---------- スマートフォン ---------- */
@media (max-width: 640px) {
  .lp { font-size: 15.5px; }
  .lp-wrap { padding: 0 16px; }
  .lp-sec { padding: 48px 0; }
  .lp .lp-sec h2 { font-size: 24px; }
  .lp .lp-final h2 { font-size: 28px; }
  .lp-fv { padding: 20px 0 40px; }
  .lp .lp-catch { margin-bottom: 16px; }
  .lp-c1 { font-size: 22px; }
  .lp-c2 { font-size: 58px; margin: 2px 0 6px; }
  .lp-c3 span { font-size: 23px; padding: 5px 12px 7px; }
  .lp-c4 { font-size: 21px; margin-top: 8px; }
  .lp-tag { font-size: 12.5px; padding: 2px 10px; }
  .lp-pt .lp-v { font-size: 20px; }
  .lp-fv-lead { font-size: 15px; }
  .lp .lp-btn { width: 100%; padding: 16px 14px 16px 22px; font-size: 17px; }
  .lp-cta-wrap { display: flex; }
  .lp-bubble { font-size: 13.5px; }
  .lp-arr { width: 24px; height: 24px; font-size: 14px; }
  .lp-checks { grid-template-columns: 1fr; gap: 8px; }
  .lp-ck { padding: 12px 14px 12px 48px; font-size: 15px; }
  .lp-answer { font-size: 19px; }
  .lp-cond { gap: 10px; }
  .lp-ci { padding: 14px; }
  .lp-ci .lp-v { font-size: 18px; }
  .lp-sup { grid-template-columns: 1fr; }
  .lp-big { font-size: 20px; }
  .lp-big b { font-size: 28px; }
  .lp-stt .lp-v { font-size: 24px; }
  .lp-band { flex-direction: column; align-items: stretch; }
  .lp-band p { font-size: 18px; }
  .lp-flow { grid-template-columns: 1fr; }
  .lp-fl { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: start; }
  .lp-fl::before { grid-row: span 2; margin: 0; }
  .lp-faq summary { padding: 14px 40px 14px 48px; }
  .lp-faq summary::before { left: 14px; }
  .lp-a { padding: 0 16px 14px 48px; font-size: 14.5px; }
  .lp-sticky:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--bd); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .lp-sticky .lp-btn { box-shadow: 0 4px 0 #B4500F; padding: 13px 12px; font-size: 16px; }
  .lp-sticky small { display: block; text-align: center; font-size: 11px; color: var(--muted); margin-top: 4px; }
}