/* ヒトリダチ サービスサイト 第3版 — 各区画のレイアウト（上から順） */

/* ===== ファーストビュー（鮮やかな青の面・白い見出し） ===== */
.fv { position: relative; padding: calc(var(--header-h) + 56px) 0 72px; overflow: hidden; color: #fff; background: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 60%, #6a86f7 100%); }
.fv::before { content: ""; position: absolute; right: -8%; top: -30%; width: 62%; height: 160%; background: rgba(255, 255, 255, 0.07); transform: skewX(-18deg); }
.fv::after { content: ""; position: absolute; left: -6%; bottom: -40%; width: 30%; height: 80%; background: rgba(255, 255, 255, 0.05); transform: skewX(-18deg); }
.fv__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: center; gap: 48px; }
.fv__cat { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 5px 14px; border-radius: 6px; background: #fff; color: var(--brand); font-size: 14px; font-weight: 700; }
.fv__title { font-size: clamp(34px, 4vw, 54px); font-weight: 900; line-height: 1.35; letter-spacing: 0.02em; }
.fv__sub { margin-top: 20px; font-size: 17px; line-height: 1.9; color: rgba(255, 255, 255, 0.92); }
.fv__badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 32px; }
.fv__badges li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); font-size: 14px; font-weight: 700; }
.fv__badges svg { width: 18px; height: 18px; flex: none; }
.fv__visual { position: relative; aspect-ratio: 1 / 0.86; }
.fv__photo { position: absolute; inset: 6% 0 8% 8%; overflow: hidden; border-radius: 24px; box-shadow: 0 30px 70px rgba(10, 20, 60, 0.35); border: 6px solid rgba(255, 255, 255, 0.9); }
.fv__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 40%; }
.fv__note { position: absolute; right: 0; bottom: -28px; font-size: 11.5px; color: rgba(255, 255, 255, 0.75); }
.fv__copy > *, .fv__photo { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.fv.is-ready .fv__copy > *, .fv.is-ready .fv__photo { opacity: 1; transform: none; }
.fv.is-ready .fv__title { transition-delay: 0.08s; }
.fv.is-ready .fv__sub { transition-delay: 0.16s; }
.fv.is-ready .fv__badges { transition-delay: 0.24s; }
.fv.is-ready .cta-pair { transition-delay: 0.32s; }
.fv.is-ready .fv__photo { transition-delay: 0.2s; }

/* ===== お悩み ===== */
.worries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.worry { display: grid; justify-items: center; gap: 14px; padding: 30px 22px 28px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); text-align: center; }
.worry:nth-child(2) { --d: 0.08s; }
.worry:nth-child(3) { --d: 0.16s; }
.worry:nth-child(4) { --d: 0.24s; }
.worry__ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--indigo-50); color: var(--brand); }
.worry__ico svg { width: 34px; height: 34px; }
.worry p { font-weight: 700; font-size: 15.5px; line-height: 1.75; }
.solve-arrow { display: grid; justify-items: center; gap: 14px; margin-top: 48px; text-align: center; }
.solve-arrow::before { content: ""; width: 0; height: 0; border-left: 34px solid transparent; border-right: 34px solid transparent; border-top: 22px solid var(--indigo-100); }
.solve-arrow p { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; }
.solve-arrow em { font-style: normal; color: var(--brand); }

/* ===== できること（全体の流れ） ===== */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.flow::before { content: ""; position: absolute; top: 104px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(90deg, var(--brand) 0 8px, transparent 8px 14px); opacity: 0.35; }
.flow__item { position: relative; text-align: center; }
.flow__item:nth-child(2) { --d: 0.1s; }
.flow__item:nth-child(3) { --d: 0.2s; }
.flow__item:nth-child(4) { --d: 0.3s; }
.step__thumb { display: grid; place-items: center; height: 208px; margin-bottom: 18px; padding: 14px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.flow__no { display: block; font-family: var(--font-num); font-weight: 800; color: var(--brand); font-size: 14px; letter-spacing: 0.08em; }
.flow__item h3 { margin: 4px 0 8px; font-size: 19px; font-weight: 900; }
.flow__item p { color: var(--ink-2); font-size: 14.5px; line-height: 1.8; text-align: left; }

/* ===== 機能（左に青の面・右に画面の左右分割） ===== */
.points { display: grid; gap: 36px; }
.point { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); overflow: hidden; border-radius: 24px; box-shadow: var(--shadow-sm); }
.point__text { display: grid; align-content: center; gap: 16px; padding: 52px 48px; background: var(--brand); color: #fff; }
.point__no { justify-self: start; padding: 1px 10px; border-radius: 4px; background: var(--lime); color: var(--ink); font-family: var(--font-num); font-size: 13px; font-weight: 800; }
.point__text h3 { font-size: clamp(24px, 2.3vw, 30px); font-weight: 900; line-height: 1.5; }
.point__text p { color: rgba(255, 255, 255, 0.9); font-size: 15px; }
.point__visual { position: relative; display: grid; place-items: center; padding: 48px 44px; background: var(--paper-2); }
.point__visual > * { width: 100%; max-width: 560px; }

/* ===== 導入のメリット ===== */
.merits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.merit { position: relative; padding: 40px 30px 34px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.merit:nth-child(2) { --d: 0.1s; }
.merit:nth-child(3) { --d: 0.2s; }
.merit__no { position: absolute; top: 18px; right: 22px; font-family: var(--font-num); font-size: 44px; font-weight: 800; line-height: 1; color: var(--indigo-100); }
.merit__ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 18px; background: var(--brand); color: #fff; }
.merit__ico svg { width: 32px; height: 32px; }
.merit h3 { margin-bottom: 10px; font-size: 21px; font-weight: 900; line-height: 1.5; }
.merit p { color: var(--ink-2); font-size: 15px; }

/* ===== 活用シーン ===== */
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.use { overflow: hidden; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.use:nth-child(2) { --d: 0.1s; }
.use:nth-child(3) { --d: 0.2s; }
.use img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.use__body { padding: 24px 26px 28px; }
.use__tag { display: inline-block; margin-bottom: 10px; padding: 1px 10px; border-radius: 4px; background: var(--indigo-50); color: var(--brand); font-size: 12.5px; font-weight: 700; }
.use h3 { margin-bottom: 8px; font-size: 19px; font-weight: 900; line-height: 1.55; }
.use p { color: var(--ink-2); font-size: 14.5px; line-height: 1.8; }

/* ===== 申込の帯（青の箱・資料の表紙） ===== */
.cta-box { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); align-items: center; gap: 30px; margin-top: 80px; padding: 48px 56px; overflow: hidden; border-radius: 24px; background: linear-gradient(120deg, var(--brand), var(--brand-2)); color: #fff; }
.cta-box::before { content: ""; position: absolute; right: -10%; top: -40%; width: 50%; height: 180%; background: rgba(255, 255, 255, 0.08); transform: skewX(-18deg); }
.cta-box__title { position: relative; margin-bottom: 22px; font-size: clamp(22px, 2.3vw, 28px); font-weight: 900; line-height: 1.5; }
.cta-box .cta-pair { position: relative; }
.doc-cover { position: relative; justify-self: center; width: 250px; height: 170px; }
.doc-cover__page { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 6px; padding: 22px 24px; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: 0 20px 40px rgba(10, 20, 60, 0.3); transform: rotate(-4deg); }
.doc-cover__page b { font-size: 24px; font-weight: 900; letter-spacing: 0.06em; }
.doc-cover__page small { color: var(--muted); font-weight: 700; }
.doc-cover__bar { width: 100%; height: 6px; margin-top: 8px; border-radius: 3px; background: linear-gradient(90deg, var(--brand) 60%, var(--sun) 60%); }
.doc-cover__page--2 { z-index: -1; transform: rotate(5deg) translate(22px, 8px); background: var(--indigo-100); }

/* ===== 導入までの流れ ===== */
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.step4 { position: relative; padding: 34px 24px 28px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); text-align: center; }
.step4:nth-child(2) { --d: 0.1s; }
.step4:nth-child(3) { --d: 0.2s; }
.step4:nth-child(4) { --d: 0.3s; }
.step4 + .step4::before { content: ""; position: absolute; left: -22px; top: 50%; border-left: 12px solid var(--brand); border-top: 9px solid transparent; border-bottom: 9px solid transparent; transform: translateY(-50%); }
.step4__no { display: inline-block; margin-bottom: 12px; font-family: var(--font-num); font-size: 13px; font-weight: 800; color: var(--brand); letter-spacing: 0.1em; }
.step4 h3 { margin-bottom: 8px; font-size: 18px; font-weight: 900; }
.step4 p { color: var(--ink-2); font-size: 14px; line-height: 1.8; text-align: left; }

/* ===== よくあるご質問 ===== */
.faq-list { display: grid; gap: 12px; }
.faq-list details { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.faq-list summary { position: relative; padding: 22px 64px 22px 60px; font-weight: 700; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "Q"; position: absolute; left: 22px; top: 19px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-num); font-weight: 800; font-size: 13px; }
.faq-list summary::after { content: ""; position: absolute; right: 26px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat; transition: transform 0.3s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(135deg); }
.faq-list details p { padding: 0 32px 24px 60px; color: var(--ink-2); animation: faqOpen 0.4s var(--ease); }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ===== 申込（資料ダウンロードのフォーム） ===== */
.apply { position: relative; padding: 110px 0 120px; overflow: hidden; color: #fff; background: linear-gradient(120deg, var(--brand), var(--brand-2)); }
.apply::before { content: ""; position: absolute; left: -10%; top: -30%; width: 55%; height: 160%; background: rgba(255, 255, 255, 0.06); transform: skewX(-18deg); }
.apply__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 60px; align-items: center; }
.apply__copy .h2 { margin-bottom: 18px; }
.apply__copy p { color: rgba(255, 255, 255, 0.9); }
.apply__list { display: grid; gap: 10px; margin-top: 24px; }
.apply__list li { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.apply__list li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%231a2238' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.apply-form { position: relative; display: grid; gap: 16px; padding: 36px 34px 28px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(10, 20, 60, 0.3); }
.apply-form__title { font-size: 19px; font-weight: 900; text-align: center; }
.want { display: flex; gap: 10px; margin: 0; padding: 0; border: 0; }
.want legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.want label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line-cool); font-size: 14px; font-weight: 700; cursor: pointer; }
.want label:has(input:checked) { background: var(--indigo-50); box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand); }
.field { display: grid; gap: 6px; font-size: 13.5px; font-weight: 700; }
.field b { margin-left: 6px; padding: 0 6px; border-radius: 3px; background: var(--bad); color: #fff; font-size: 10.5px; }
.field i { margin-left: 6px; padding: 0 6px; border-radius: 3px; background: var(--line-cool); color: var(--ink-2); font-size: 10.5px; font-style: normal; }
.field textarea { padding: 12px 14px; border: 1.5px solid var(--line-cool); border-radius: 10px; background: var(--paper-2); font: inherit; font-size: 16px; font-weight: 400; resize: vertical; }
.field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(53, 87, 224, 0.14); background: #fff; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field input, .field select { height: 50px; padding: 0 14px; border: 1.5px solid var(--line-cool); border-radius: 10px; background: var(--paper-2); font-size: 16px; font-weight: 400; transition: border-color 0.2s, box-shadow 0.2s; }
.field input:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(53, 87, 224, 0.14); background: #fff; }
.field.is-invalid input, .field.is-invalid select { border-color: var(--bad); }
.form-error { color: var(--bad); font-size: 13.5px; font-weight: 700; }
.form-error a { color: inherit; }
.form-note { color: var(--muted); font-size: 12px; text-align: center; }
.form-done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 30px; border-radius: 22px; background: #fff; text-align: center; }
.form-done__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--good-bg); color: var(--good); }

/* ===== 幅の狭い画面 ===== */
@media (max-width: 1080px) {
  .fv__inner { grid-template-columns: 1fr; gap: 36px; }
  .fv__visual { max-width: 620px; width: 100%; margin-inline: auto; }
  .worries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .point { grid-template-columns: 1fr; }
  .apply__inner { grid-template-columns: 1fr; }
  .cta-box { grid-template-columns: 1fr; }
  .doc-cover { display: none; }
}

/* 確認用の止め絵（?static） */
.is-static [data-reveal], .is-static .fv__copy > *, .is-static .fv__photo, .is-static .float-card { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .fv__copy > *, .fv__photo { opacity: 1; transform: none; transition: none; }
}

/* ===== 料金体系 ===== */
.source--center { text-align: center; }
.prices { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; gap: 0; }
.price { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 34px 26px 30px; border-radius: var(--radius-lg); background: var(--paper-2); text-align: center; }
.price:nth-of-type(2) { --d: 0.1s; }
.price:nth-of-type(3) { --d: 0.2s; }
.price__ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.price__ico svg { width: 30px; height: 30px; }
.price h3 { font-size: 19px; font-weight: 900; }
.price p { color: var(--ink-2); font-size: 14.5px; }
.price-op { display: grid; place-items: center; font-size: 28px; font-weight: 700; color: var(--brand); }
.prices--ask { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.price-cta { margin-top: 36px; text-align: center; }
.doc-cover--apply { justify-self: start; margin-top: 40px; }
/* ファーストビューの上に浮かぶ製品画面は、白い面なので文字を墨色に戻す */
.fv .float-card { color: var(--ink); }
.fv .btn--lg { padding: 8px 40px 8px 26px; }
@media (min-width: 1081px) { .fv .cta-pair { flex-wrap: nowrap; } }

/* ===== 第3.1版: 信頼の材料の帯 ===== */
.trust { background: #fff; border-bottom: 1px solid var(--line); }
.trust__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; padding: 18px 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.trust__inner li { display: inline-flex; align-items: center; gap: 8px; }
.trust__inner svg { width: 20px; height: 20px; color: var(--brand); }
.trust__inner a { text-decoration: none; border-bottom: 1px solid var(--indigo-100); }
.trust__inner a:hover { color: var(--brand); border-color: var(--brand); }

/* ===== 第3.1版: できること（1行の流れ） ===== */
.flow-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: s; }
.flow-line li { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.flow-line li:nth-child(2) { --d: 0.1s; }
.flow-line li:nth-child(3) { --d: 0.2s; }
.flow-line li:nth-child(4) { --d: 0.3s; }
.flow-line li + li::before { content: ""; position: absolute; top: 44px; left: calc(-50% + 56px); width: calc(100% - 84px); height: 2px; background: repeating-linear-gradient(90deg, var(--brand) 0 8px, transparent 8px 14px); opacity: 0.4; }
.flow-line__ico { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--indigo-50); color: var(--brand); }
.flow-line__ico svg { width: 40px; height: 40px; }
.flow-line__no { margin-top: 8px; font-family: var(--font-num); font-size: 13px; font-weight: 800; color: var(--brand); letter-spacing: 0.08em; }
.flow-line h3 { font-size: 19px; font-weight: 900; }
.flow-line p { color: var(--ink-2); font-size: 14.5px; line-height: 1.8; }

/* ===== 第3.1版: 導入前後の比較 ===== */
.shift { display: grid; gap: 8px; max-width: 880px; margin: 0 auto 44px; padding: 28px 32px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.shift__head, .shift__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; }
.shift__head span { visibility: hidden; }
.shift__head b { text-align: center; font-size: 14px; color: var(--muted); }
.shift__head b.is-after { color: var(--brand); }
.shift__row { padding: 12px 0; border-top: 1px solid var(--line); }
.shift__row > span { font-weight: 900; }
.who { display: block; padding: 10px 12px; border-radius: 10px; font-style: normal; font-weight: 700; font-size: 14.5px; text-align: center; }
.who--mgr { background: var(--paper-2); color: var(--ink-2); }
.who--ai { background: var(--brand); color: #fff; }
.cta-band { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; margin-top: 48px; }

/* ===== 第3.1版: そのほかの機能 ===== */
.func { margin-top: 72px; }
.func__title { margin-bottom: 26px; text-align: center; font-size: 24px; font-weight: 900; }
.func__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.func__grid li { display: grid; gap: 6px; padding: 22px 20px; border-radius: 14px; background: var(--paper-2); }
.func__grid svg { width: 30px; height: 30px; color: var(--brand); }
.func__grid b { font-size: 15.5px; }
.func__grid span { color: var(--ink-2); font-size: 13px; line-height: 1.7; }

/* ===== 第3.1版: 活用シーンの登録例 ===== */
.use__ex { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; margin: 12px 0 0; padding: 14px; border-radius: 10px; background: var(--paper-2); font-size: 13.5px; }
.use__ex dt { font-weight: 700; color: var(--brand); white-space: nowrap; }
.use__ex dt:nth-of-type(2) { color: var(--bad); }
.use__ex dd { margin: 0; }
.use h3 { font-size: 18px; }

/* ===== 第3.1版: 同意欄 ===== */
.agree { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.agree a { color: var(--brand); }
.agree.is-invalid { color: var(--bad); }
.worry p, .solve-arrow p { word-break: auto-phrase; text-wrap: balance; }


/* ===== 第3.2版: 導入前の確認事項・フッターのリンク ===== */
.checks { display: grid; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.checks > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.checks > div + div { border-top: 1px solid var(--line); }
.checks dt { padding: 20px 24px; background: var(--paper-2); font-weight: 900; }
.checks dd { margin: 0; padding: 20px 24px; color: var(--ink-2); font-size: 15px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__links a { color: rgba(255, 255, 255, 0.85); }

/* ===== 第3.3版: ファーストビューは写真を大きく右端まで、上に実際の画面を1枚 ===== */
.fv { padding-bottom: 0; }
.fv__inner { align-items: stretch; }
.fv__copy { align-self: center; padding-bottom: 64px; }
.fv__visual { position: relative; aspect-ratio: auto; min-height: 560px; }
.fv__photo { position: absolute; inset: 0 calc((100vw - min(1120px, 100vw - 64px)) / -2) 0 0; border: 0; border-radius: 40px 0 0 0; box-shadow: none; }
.fv__photo img { object-position: 60% 30%; }
.fv__shot { position: absolute; left: -3%; bottom: 36px; z-index: 2; width: 60%; margin: 0; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 30px 70px rgba(10, 20, 60, 0.35); opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease) 0.5s, transform 0.9s var(--ease) 0.5s; }
.fv.is-ready .fv__shot { opacity: 1; transform: none; }
.fv__shot img { width: 100%; border-radius: 10px; }
.fv__shot-label { position: absolute; left: 16px; top: -14px; padding: 3px 12px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 800; }
.is-static .fv__shot { opacity: 1; transform: none; transition: none; }
@media (max-width: 1080px) {
  .fv__visual { min-height: 420px; }
  .fv__photo { inset: 0 -32px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .fv__shot { opacity: 1; transform: none; transition: none; } }
.step4__ico { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--indigo-50); color: var(--brand); }
.step4__ico svg { width: 30px; height: 30px; }
.sec--tint .step4 { background: #fff; }
.sec:not(.sec--tint) .merit, .sec:not(.sec--tint) .shift { box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.sec--tint .func__grid li { background: #fff; box-shadow: var(--shadow-sm); }
.checks { background: #fff; }
.sec--tint .price { background: #fff; }
.lead small { display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.sec:not(.sec--tint) .point__visual { background: var(--paper-2); }
.sec:not(.sec--tint) .func__grid li { background: var(--paper-2); box-shadow: none; }
.sec--tint .checks dt { background: var(--indigo-50); }

/* ===== 第4版: 資料の見本（実物の3ページを扇状に重ねる） ===== */
.deck { position: relative; justify-self: center; width: 340px; height: 230px; perspective: 1400px; }
.deck__page { position: absolute; left: 0; top: 20px; width: 300px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 24px 50px rgba(10, 20, 60, 0.32), 0 4px 10px rgba(10, 20, 60, 0.18); transform-origin: 50% 100%; transition: transform 0.6s var(--ease); }
.deck__page--3 { transform: translate(44px, -18px) rotate(7deg); }
.deck__page--2 { transform: translate(22px, -8px) rotate(3.5deg); }
.deck__page--1 { transform: rotate(-2deg); display: grid; align-content: center; gap: 4px; padding: 18px 20px; color: #fff; background: linear-gradient(125deg, var(--brand-deep), var(--brand) 55%, #6a86f7); }
.cta-box:hover .deck__page--3, .apply__copy:hover .deck__page--3 { transform: translate(64px, -30px) rotate(10deg); }
.cta-box:hover .deck__page--2, .apply__copy:hover .deck__page--2 { transform: translate(32px, -14px) rotate(5deg); }
.deck__shape { position: absolute; right: -20%; top: -30%; width: 60%; height: 160%; background: rgba(255, 255, 255, 0.1); transform: skewX(-18deg); }
.deck__brand { position: relative; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.deck__brand .logo__mark { width: 18px; height: 18px; padding: 3px; gap: 2px; border-radius: 5px; background: #fff; }
.deck__brand .logo__mark i { width: 2px; background: var(--brand); }
.deck__brand .logo__mark i:nth-child(1) { height: 5px; } .deck__brand .logo__mark i:nth-child(2) { height: 8px; } .deck__brand .logo__mark i:nth-child(3) { height: 11px; background: var(--sun); }
.deck__brand b { font-size: 12px; letter-spacing: 0.06em; }
.deck__title { position: relative; font-size: 21px; font-weight: 900; line-height: 1.3; }
.deck__sub { position: relative; font-size: 10.5px; font-weight: 700; opacity: 0.85; }
.deck__co { position: absolute; left: 20px; bottom: 12px; font-size: 8.5px; opacity: 0.75; }
.deck__h { padding: 10px 14px 6px; font-size: 10px; font-weight: 900; color: var(--ink); border-left: 3px solid var(--brand); margin: 12px 0 6px 12px; padding: 0 0 0 8px; }
.deck__page--2 img { width: 78%; margin: 0 auto; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
.deck__flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 14px; }
.deck__flow li { display: grid; justify-items: center; gap: 4px; padding: 10px 2px; border-radius: 6px; background: var(--paper-2); font-size: 8.5px; font-weight: 700; color: var(--ink-2); }
.deck__flow i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); color: #fff; font-style: normal; font-size: 8px; }
.deck__foot { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--brand) 70%, var(--sun) 70%); }
.deck--apply { justify-self: start; margin-top: 40px; }
@media (max-width: 1080px) { .cta-box .deck { display: none; } }
@media (prefers-reduced-motion: reduce) { .deck__page { transition: none; } }
/* 扇を広げて、後ろのページの中身も見えるようにする。表紙は白い縁で青い地から浮かせる */
.deck { width: 420px; height: 250px; }
.deck__page { width: 290px; top: 34px; }
.deck__page--3 { transform: translate(124px, -30px) rotate(9deg); }
.deck__page--2 { transform: translate(62px, -14px) rotate(4deg); }
.deck__page--1 { transform: translate(-6px, 6px) rotate(-3deg); box-shadow: 0 0 0 3px #fff, 0 26px 50px rgba(10, 20, 60, 0.4); }
.cta-box:hover .deck__page--3, .apply__copy:hover .deck__page--3 { transform: translate(140px, -40px) rotate(11deg); }
.cta-box:hover .deck__page--2, .apply__copy:hover .deck__page--2 { transform: translate(72px, -22px) rotate(5.5deg); }

/* ===== 第4版: 他のAIロープレとの違い（比較表） ===== */
.cmp { max-width: 980px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.cmp__row { display: grid; grid-template-columns: 1.1fr 1fr 1.25fr; align-items: stretch; }
.cmp__row + .cmp__row { border-top: 1px solid var(--line); }
.cmp__row > span { display: flex; align-items: center; gap: 10px; padding: 18px 22px; font-size: 14.5px; line-height: 1.6; }
.cmp__row > span:first-child { font-weight: 900; color: var(--ink); }
.cmp__row > span:nth-child(2) { color: var(--muted); }
.cmp__row--head > span { padding: 16px 22px; background: var(--paper-2); font-size: 13px; font-weight: 800; color: var(--ink-2); flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.cmp__row--head small { font-size: 11px; font-weight: 700; color: var(--muted); }
.cmp__us { background: rgba(53, 87, 224, 0.06); color: var(--ink) !important; font-weight: 700; box-shadow: inset 2px 0 0 var(--brand), inset -2px 0 0 var(--brand); }
.cmp__row--head .cmp__us { background: var(--brand); color: #fff !important; font-size: 17px; box-shadow: none; }
.cmp__row:last-child .cmp__us { box-shadow: inset 2px 0 0 var(--brand), inset -2px 0 0 var(--brand), inset 0 -2px 0 var(--brand); }
.cmp__row--key > span:first-child::after { content: "違い"; margin-left: 6px; padding: 0 7px; border-radius: 4px; background: var(--lime); font-size: 10.5px; font-weight: 800; }
.cmp__us--no { font-weight: 500 !important; color: var(--ink-2) !important; }
.mk { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 900; }
.mk--yes { background: var(--brand); color: #fff; }
.mk--part { background: var(--hold-bg); color: var(--hold); }
.mk--no { background: var(--paper-2); color: var(--muted); }
.cmp__us .mk--yes { background: var(--brand); }

/* ===== 第4版: ファーストビューの奥行き（実際の画面を2枚重ねる） ===== */
.fv__shot--sub { left: auto; right: 6%; top: 44px; bottom: auto; width: 46%; padding: 6px; border-radius: 14px; transition-delay: 0.75s; animation: floaty 7s ease-in-out 1.6s infinite; }
.fv__shot--sub img { border-radius: 9px; }
@keyframes floaty { 50% { transform: translateY(-8px); } }
.fv.is-ready .fv__shot--sub { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fv__shot--sub { animation: none; } }
.is-static .fv__shot--sub { animation: none; }
.deck__brand .logo__mark { width: 18px; height: 18px; padding: 0; background: none; }

/* ===== 第4版: スマホの最適化（390px前後） ===== */
.swipe-hint { display: none; }
.fv__shot--sub { width: 34%; right: 5%; top: 40px; }
.mk svg { width: 15px; height: 15px; }
.fv__shot--sub { right: auto; left: 10%; top: 44px; width: 36%; }
.cmp__logo { height: 22px; width: auto; }
.deck__brand img { height: 14px; width: auto; }

/* ===== 第4.1版: ファーストビューの作り込み ===== */
/* 写真の左端を斜めに切り、青の面になじませる（バクラクの斜めの切り口） */
.fv__photo { border-radius: 0; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.fv__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(53, 87, 224, 0.35) 0%, rgba(53, 87, 224, 0) 32%); pointer-events: none; }
/* 実画面はブラウザの枠つきで大きく */
.fv__shot { left: -8%; bottom: 40px; width: 78%; padding: 0; border-radius: 14px; overflow: visible; background: #fff; box-shadow: 0 40px 80px rgba(10, 20, 60, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.6); }
.fv__shot img { border-radius: 0 0 14px 14px; }
.fv__shot-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; background: #f4f6fb; }
.fv__shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d8dde8; }
.fv__shot-bar b { margin-left: 10px; padding: 2px 12px; border-radius: 6px; background: #fff; font-family: var(--font-num); font-size: 10.5px; font-weight: 600; color: var(--muted); }
.fv__shot-label { top: -14px; left: 18px; z-index: 1; }
/* 札は箱をやめ、黄緑のチェックと白い文字の並びに */
.fv__badges { gap: 8px 22px; }
.fv__badges li { padding: 0; background: none; box-shadow: none; font-size: 15px; }
.fv__badges svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--lime); color: var(--ink); }
.fv__shot { left: -6%; width: 70%; bottom: 44px; }
.fv__shot-label { top: -14px; left: auto; right: 18px; }
.fv__shot { left: -10%; width: 80%; }

/* ===== 第4.2版: 青の面の使い方（FVと申込は斜めのグラデーション、途中の申込は白いカード） ===== */
.fv, .apply { background: linear-gradient(120deg, var(--brand-deep) 0%, var(--brand) 42%, #6a86f7 100%); }
.cta-box { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.cta-box::before { background: var(--indigo-50); opacity: 1; right: -12%; width: 46%; }
.cta-box .btn--white { background: #fff; color: var(--brand); border-color: var(--brand); }
.cta-box .btn--white:hover { background: var(--brand); color: #fff; }
.cta-box .deck__page--1 { box-shadow: 0 26px 50px rgba(10, 20, 60, 0.28); }
/* 機能のカードの高さをそろえる */
.point__text { min-height: 360px; }
/* FVの札は1行に */
.fv__badges { flex-wrap: nowrap; gap: 18px; }
.fv__badges li { font-size: 14px; white-space: nowrap; }
@media (max-width: 1080px) { .fv__badges { flex-wrap: wrap; } }
/* 資料の見本の後ろ2ページは、文字ではなく色面と画像で見せる */
.deck__line { display: block; width: 46%; height: 7px; margin: 14px 0 10px 14px; border-radius: 4px; background: var(--brand); }
.deck__page--2 img { width: 84%; }
.deck__page--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: center; padding: 18px 16px; }
.deck__blk { display: block; height: 70px; border-radius: 6px; background: var(--indigo-50); box-shadow: inset 0 18px 0 var(--indigo-100); }
.deck__blk--b { background: #fff4d2; box-shadow: inset 0 18px 0 #ffe7a3; }
.cmp__note { max-width: 980px; margin: 16px auto 0; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.sec-head .lead small { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.nw { white-space: nowrap; }
/* 資料の見本: 表紙を大きく、後ろは紙の重なりだけ */
.deck { width: 520px; height: 300px; }
.deck__page { width: 360px; }
.deck__page--3 { background: var(--indigo-100); transform: translate(116px, -26px) rotate(8deg); }
.deck__page--2 { background: #fff; transform: translate(58px, -12px) rotate(3.5deg); }
.deck__title { font-size: 26px; }
.deck__sub { font-size: 12px; }
.deck__brand img { height: 18px; }
.deck__page--1::after { content: ""; position: absolute; right: 18px; bottom: 16px; width: 92px; height: 56px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); box-shadow: -22px -18px 0 -8px rgba(255, 255, 255, 0.1); }
/* 資料の見本は箱の中に収める。後ろの紙は右上へ控えめに */
.cta-box { overflow: hidden; }
.cta-box .deck { width: 460px; height: 270px; }
.cta-box .deck__page { width: 330px; top: 46px; }
.deck__page--3 { transform: translate(96px, -30px) rotate(7deg); }
.deck__page--2 { transform: translate(48px, -14px) rotate(3deg); }
.cta-box:hover .deck__page--3 { transform: translate(110px, -38px) rotate(9deg); }
.cta-box:hover .deck__page--2 { transform: translate(56px, -20px) rotate(4.5deg); }
/* 比較表の見出しの小さな注記を本文の色に */
.cmp__row--head small { color: var(--ink-2); }
/* FVのチェックの並びは2行に。評価レポートの枠が文字にかからないよう右へ */
.fv__badges { flex-wrap: wrap; max-width: 34em; gap: 8px 22px; }
.fv__shot { left: -2%; width: 74%; }
/* 比較表の中も文節で改行 */
.cmp__row > span { word-break: auto-phrase; }
.cmp__row > span > i + * , .cmp__row > span { overflow-wrap: normal; }
/* 資料の見本: 後ろの2枚は送付資料の実際のページ（sales/inquiry-deck の第5版 P2・P19 を書き出した画像） */
.deck .deck__page img.deck__shot { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 0; box-shadow: none; }
.deck--apply { width: 540px; }
.deck--apply .deck__page--3 { transform: translate(236px, -44px) rotate(7deg); }
.deck--apply .deck__page--2 { transform: translate(118px, -20px) rotate(3.5deg); }
.apply__copy:hover .deck--apply .deck__page--3 { transform: translate(250px, -52px) rotate(8.5deg); }
.apply__copy:hover .deck--apply .deck__page--2 { transform: translate(128px, -26px) rotate(4.5deg); }