:root {
  color-scheme: light;
  --navy: #001e43;
  --gold: #d4af37;
  --green: #06c755;
  --green-dark: #087735;
  --chat: #e8eff4;
  --ink: #25313d;
  --muted: #687b8b;
  --line: #dce5ec;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: #dce6ed; color: var(--ink); }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, input { accent-color: var(--green-dark); }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #779cc2; outline-offset: 3px; }
button:disabled { cursor: wait; opacity: .55; }
[hidden] { display: none !important; }
.app-shell { display: flex; flex-direction: column; width: 100%; max-width: 540px; height: 100vh; height: 100dvh; margin: 0 auto; background: var(--chat); overflow: hidden; box-shadow: 0 0 80px #001e4310; }
.app-header { display: flex; flex-shrink: 0; align-items: center; gap: 10px; padding: calc(13px + env(safe-area-inset-top)) 17px 13px; background: #fff; border-bottom: 1px solid var(--line); }
.avatar { display: inline-flex; width: 34px; height: 34px; flex-shrink: 0; align-items: center; justify-content: center; align-self: flex-start; border-radius: 50%; background: var(--navy); color: var(--gold); font-size: 10px; letter-spacing: .04em; font-weight: 700; }
.avatar-header { width: 43px; height: 43px; align-self: center; font-size: 12px; border: 2px solid #f0e6c4; }
.brand { min-width: 0; }
.brand-eyebrow { margin: 0 0 4px; color: #7a704f; font-size: 9px; letter-spacing: .19em; font-weight: 600; }
h1 { margin: 0; font-size: 13px; line-height: 1.55; font-weight: 650; color: var(--navy); }
.brand-status { display: flex; align-items: center; gap: 5px; margin: 3px 0 0; font-size: 10px; color: var(--green-dark); }
.brand-status span { width: 5px; height: 5px; background: var(--green); border-radius: 50%; }
.home-mark { margin-left: auto; padding-left: 3px; font-size: 27px; color: #b5c0c9; font-weight: 400; }
.progress-panel { padding: 11px 20px 12px; background: #f9fbfc; flex-shrink: 0; border-bottom: 1px solid #e3eaf0; }
.progress-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; font-size: 11px; color: #526979; }
.progress-count { font-size: 10px; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: #7d8b97; white-space: nowrap; }
progress { display: block; border: 0; width: 100%; height: 3px; appearance: none; border-radius: 3px; overflow: hidden; background: #e2e9ee; color: var(--gold); }
progress::-webkit-progress-bar { background: #e2e9ee; }
progress::-webkit-progress-value { background: var(--gold); transition: width .25s; }
progress::-moz-progress-bar { background: var(--gold); }
.conversation { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 17px 14px 22px; scrollbar-width: thin; scrollbar-color: #b8c7d1 transparent; }
.chat-date { width: fit-content; padding: 5px 13px; margin: 0 auto 21px; background: #d7e2e9; color: #657c8b; border-radius: 20px; font-size: 10px; letter-spacing: .03em; }
.stage-title { margin: 0 0 15px 42px; color: #577184; font-size: 12px; font-weight: 600; line-height: 1.7; outline: none; }
.current { min-width: 0; }
.message-row { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; }
.message-row > .avatar { margin-top: 18px; }
.message-content { min-width: 0; flex: 1; }
.speaker { display: block; margin: 0 0 5px 3px; font-size: 10px; color: #65798a; }
.bubble { padding: 13px 15px; border-radius: 4px 18px 18px 18px; background: #fff; font-size: 14px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 2px 5px #001e4305; }
.message-row.patient { justify-content: flex-end; padding-left: 44px; margin: 17px 0 26px; }
.patient .message-content { flex: 0 1 auto; max-width: 94%; }
.patient .bubble { background: var(--green); color: #063a1b; border-radius: 18px 4px 18px 18px; font-size: 13px; }
.patient .speaker { text-align: right; color: #58766a; }
.history { margin-bottom: 0; }
.history-stage { padding-top: 1px; }
.history-stage .stage-title { font-weight: 500; color: #6f8493; }
.current .message-row { animation: appear .24s ease-out both; }
.summary-card { margin: 0 0 19px 42px; border: 1px solid #cbdbe6; background: #f4f8fb; padding: 13px 14px; border-radius: 12px; }
.summary-title { display: block; color: #49677e; font-size: 11px; margin-bottom: 9px; font-weight: 600; }
.summary-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 13px; font-size: 12px; line-height: 1.7; }
.summary-card dt { color: #6e8292; }
.summary-card dd { margin: 0; overflow-wrap: anywhere; color: #345369; }
.choice-form { margin: 20px 0 5px 42px; }
.form-help { margin: 0 0 11px; font-size: 12px; line-height: 1.7; color: #577084; white-space: pre-wrap; }
.choice-list { display: grid; gap: 9px; }
.choice-option { display: flex; align-items: center; gap: 10px; padding: 13px 12px; background: #fff; border: 1.5px solid #d1dfe8; border-radius: 12px; cursor: pointer; min-height: 49px; transition: background .16s, border-color .16s; }
.choice-option:has(input:checked) { border-color: #48b979; background: #f0fff5; box-shadow: 0 1px 4px #09813b0a; }
.choice-option input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.choice-copy { display: block; min-width: 0; }
.choice-label { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.6; overflow-wrap: anywhere; }
.choice-description { display: block; margin-top: 5px; color: #627588; font-size: 11px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.treatment { min-width: 0; margin: 0 0 12px; padding: 14px 13px 13px; border: 1px solid #d1dfe8; border-radius: 13px; background: #fff; }
.treatment legend { float: left; width: 100%; padding: 0 0 5px; font-size: 13px; font-weight: 650; line-height: 1.7; color: var(--navy); overflow-wrap: anywhere; }
.treatment .choice-description { clear: both; margin-top: 3px; padding-bottom: 12px; }
.preference-options { clear: both; display: flex; gap: 7px; padding-top: 5px; }
.preference { display: flex; flex: 1; gap: 5px; align-items: center; justify-content: center; position: relative; cursor: pointer; min-height: 43px; border: 1px solid #d7e1e8; border-radius: 9px; padding: 8px 4px; font-size: 11px; line-height: 1.5; color: #627184; background: #fafcfd; }
.preference input { margin: 0; width: 13px; height: 13px; cursor: pointer; }
.preference:has(input:checked) { background: #ecfbf2; border-color: #77c999; color: #086c35; font-weight: 600; }
.preference.no:has(input:checked) { background: #eef3f7; border-color: #a7bac9; color: #526f85; }
.treatment-details { margin-top: 16px; }
.treatment-choices { min-width: 0; margin: 0; padding: 0; border: 0; }
.treatment-choices + .treatment-choices { margin-top: 16px; }
.treatment-choices legend { float: none; font-size: 11px; color: #526f85; padding-bottom: 8px; }
.treatment-option { margin-top: 7px; padding: 11px 10px; border-width: 1px; background: #fafcfd; }
.treatment-option .choice-label { font-size: 12px; font-weight: 500; }
.pricing-card { margin: 18px 0; padding: 16px; border: 1px solid #cbdbe6; border-radius: 14px; background: #fff; }
.pricing-title { margin: 0 0 9px; font-size: 15px; line-height: 1.7; color: var(--navy); }
.pricing-help, .pricing-lower-note { margin: 8px 0; font-size: 12px; line-height: 1.8; color: #526979; overflow-wrap: anywhere; }
.pricing-item { padding: 15px 0; border-bottom: 1px solid var(--line); }
.pricing-item-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; }
.pricing-item-label { margin: 0; font-size: 14px; line-height: 1.75; color: var(--navy); overflow-wrap: anywhere; }
.pricing-amount { white-space: nowrap; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--navy); }
.pricing-item-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.pricing-button { min-height: 44px; min-width: 64px; border: 1px solid #b8cbd9; border-radius: 9px; padding: 10px 12px; background: #f7fafc; color: #345369; font-size: 12px; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
.pricing-lower { background: #ecfbf2; border-color: #9bceaf; color: #086c35; flex: 1 1 210px; }
.pricing-remove { border-color: #ddbfba; background: #fffaf9; color: #92453b; margin-left: auto; }
.pricing-lower-note { flex-basis: 100%; order: 2; margin: 0; }
.pricing-addon { display: flex; align-items: center; gap: 10px; padding: 12px 0 0 12px; }
.pricing-addon-copy { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; color: #526979; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.pricing-labs { padding-top: 17px; }
.pricing-lab { min-width: 0; margin: 14px 0 0; border: 0; padding: 0; }
.pricing-lab-label { margin-bottom: 7px; padding: 0; font-size: 13px; font-weight: 650; color: var(--navy); }
.pricing-lab-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pricing-lab-option { display: flex; align-items: center; gap: 7px; min-height: 48px; border: 1px solid #cbdbe6; border-radius: 9px; padding: 10px 8px; background: #fafcfd; font-size: 12px; line-height: 1.7; cursor: pointer; overflow-wrap: anywhere; }
.pricing-lab-option input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; }
.pricing-lab-option:has(input:checked) { border-color: #77c999; background: #ecfbf2; color: #086c35; }
.pricing-lab-option:has(input:disabled) { cursor: wait; opacity: .55; }
.pricing-blood-total { margin: 12px 0 0; font-size: 13px; color: var(--navy); }
.pricing-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 17px 0 0; padding-top: 14px; border-top: 2px solid #d9ca93; color: var(--navy); font-size: 14px; }
.pricing-total strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.pricing-confirmation { margin-top: 17px; padding: 14px; border: 2px solid #d9ca93; border-radius: 11px; background: #fffdf4; }
.pricing-confirmation .pricing-button { display: block; width: 100%; margin: 9px 0 0; }
.result-card { margin: 20px 0 16px; border: 1px solid #d9ca93; border-radius: 15px; overflow: hidden; background: #fff; box-shadow: 0 5px 20px #001e4308; }
.result-heading { margin: 0; padding: 15px 17px; font-size: 14px; letter-spacing: .04em; color: var(--gold); background: var(--navy); text-align: center; font-weight: 650; }
.result-text { padding: 18px 17px; margin: 0; font-family: inherit; font-size: 13px; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; }
.card-label { color: var(--navy); font-weight: 700; }
.card-conclusion { color: var(--navy); font-size: 1.08em; font-weight: 650; }
.card-total { display: inline-block; color: var(--navy); font-size: 20px; font-weight: 700; padding: 3px 0; }
.detail-card { background: #f9fbfc; border: 1px solid #d7e1e8; border-radius: 12px; margin: 12px 0 18px; }
.detail-card summary { cursor: pointer; padding: 14px; color: #49677e; font-size: 12px; font-weight: 600; line-height: 1.7; }
.detail-text { font: inherit; font-size: 12px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 14px 14px; margin: 0; }
.preview-card { margin: 18px 0 8px; border: 1.5px solid #8ebaa2; border-radius: 13px; background: #f8fffb; overflow: hidden; }
.preview-title { margin: 0; padding: 13px 15px; background: #e9f6ee; color: #246c44; font-size: 13px; line-height: 1.65; }
.preview-note { margin: 0; padding: 11px 15px 0; color: #557060; font-size: 11px; line-height: 1.7; }
.preview-subtitle { margin: 0; padding: 14px 15px 0; color: #246c44; font-size: 12px; line-height: 1.6; }
.preview-text { margin: 0; padding: 14px 15px 18px; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px; line-height: 1.9; }
.action-dock { padding: 11px 17px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px #001e4303; flex-shrink: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.action { width: 100%; border: 1px solid #c9d7e2; border-radius: 11px; min-height: 45px; background: #fff; color: #385571; padding: 11px 13px; font-size: 13px; font-weight: 600; line-height: 1.5; text-align: center; }
.action.primary { background: var(--navy); border-color: var(--navy); color: #ebd78e; min-height: 49px; font-size: 14px; box-shadow: 0 3px 7px #001e4312; }
.action.back { width: auto; margin: 0 auto; min-height: 32px; padding: 4px 14px; font-size: 11px; font-weight: 500; color: #708393; border-color: transparent; order: 2; }
.action.receipt { background: #06a947; border-color: #06a947; color: #fff; }
a.action { display: block; text-decoration: none; }
.action:active:not(:disabled) { transform: translateY(1px); }
.notice { display: none; margin: 0 0 9px; color: #687f90; font-size: 12px; text-align: center; line-height: 1.75; }
.notice:not(:empty) { display: block; }
.notice.error { color: #a33930; background: #fff3f1; border-radius: 8px; padding: 9px; }
.prototype-note { text-align: center; margin: 9px 0 0; font-size: 9px; line-height: 1.7; color: #84909b; }
.loading-bubble { width: 79px; display: flex; align-items: center; gap: 6px; height: 49px; }
.loading-bubble span { width: 6px; height: 6px; border-radius: 50%; background: #a9bdcb; animation: thinking 1.2s infinite ease-in-out; }
.loading-bubble span:nth-child(2) { animation-delay: .15s; }
.loading-bubble span:nth-child(3) { animation-delay: .3s; }
.noscript { position: fixed; bottom: 35px; left: 10%; right: 10%; background: #fff; padding: 15px; font-size: 13px; }
@keyframes appear { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes thinking { 0%, 60%, 100% { opacity: .4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (min-width: 650px) { body { padding: 22px 0; } .app-shell { height: calc(100vh - 44px); height: calc(100dvh - 44px); border-radius: 20px; border: 1px solid #c7d6e1; } .conversation { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 359px) { .app-header { padding-left: 12px; padding-right: 12px; gap: 8px; } h1 { font-size: 12px; } .home-mark { display: none; } .conversation { padding-left: 10px; padding-right: 10px; } .bubble { padding: 12px; font-size: 13px; } .choice-form, .summary-card { margin-left: 25px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avatar { background: var(--navy) url("/xerf-home/onesan.jpg") center / cover no-repeat; color: transparent; font-size: 0; border: 1.5px solid #e6d6a3; }
.avatar-header { border: 2px solid #f0e6c4; }
.question-box { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid #d8c7e8; border-radius: 10px; font: inherit; font-size: 14px; line-height: 1.7; resize: vertical; }

/* 写真の分析（段階②）: 試作 v59 と同じ見た目 */
.skin-chart { margin: 14px 0; padding: 14px 15px 12px; border: 1.5px solid #d8c7e8; border-radius: 13px; background: #fbf8ff; }
.skin-chart-title { margin: 0 0 6px; font-size: 14px; color: #4b2f6b; }
.skin-chart-sub { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: #5d4a73; }
.face-map { margin: 0 auto; max-width: 220px; }
.face-map svg { display: block; width: 100%; height: auto; }
.face-outline { fill: #fff7f0; stroke: #d9b9a0; stroke-width: 2; }
.face-line { fill: none; stroke: #c9a58b; stroke-width: 2; stroke-linecap: round; }
.zone { stroke: #fff; stroke-width: 2; }
.zone-none, .zone-none .legend-swatch { fill: #bfe3cb; background: #bfe3cb; }
.zone-mild, .zone-mild .legend-swatch { fill: #f7d98f; background: #f7d98f; }
.zone-marked, .zone-marked .legend-swatch { fill: #f2a08f; background: #f2a08f; }
.zone-label { font-size: 12px; fill: #4a3a30; font-weight: 700; }
.zone-legend { display: flex; justify-content: center; gap: 10px; margin-top: 4px; font-size: 11px; color: #5b5160; }
.legend-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; background: none !important; }
.legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.skin-chart-tone { margin: 8px 0 0; font-size: 12px; color: #4b2f6b; }
.skin-chart-note { margin: 6px 0 0; font-size: 11px; color: #7a7085; line-height: 1.7; }
.overlay-figure { margin: 0; }
.overlay-photo { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid #e3d7ef; }
.mark-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 11px; color: #5b5160; }
.mark-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.mark { display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; }
.mark-pore { border: 1.5px solid rgb(60, 190, 230); }
.mark-blackhead { border: 2.5px solid rgb(35, 35, 35); }
.mark-sagging { width: 14px; height: 3px; border-radius: 2px; background: rgb(240, 200, 40); }
.mark-red { border: 2px solid rgb(235, 70, 70); }
.mark-flake { width: 7px; height: 7px; background: #fff; border: 1px solid #bbb; }
.skin-chart-caution { margin: 0 0 8px; padding: 6px 9px; border-radius: 8px; background: #fff3e8; color: #8a4b1f; font-size: 11px; line-height: 1.7; }
.photo-pick-hidden { display: none; }
.photo-wait-spinner { width: 34px; height: 34px; margin: 10px auto; border-radius: 50%; border: 4px solid #e6dcef; border-top-color: #7a4fa0; animation: rh-spin 1s linear infinite; }
@keyframes rh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .photo-wait-spinner { animation: none; } }

/* お姉さんの表情（場面ごと）。今の画面の最初の吹き出しだけ大きく、ヘッダーも同じ表情にする */
.avatar.avatar-mood { width: 64px; height: 64px; border-width: 2px; }
.message-row > .avatar.avatar-mood { margin-top: 14px; }
.avatar.mood-greet { background-image: url("/xerf-home/moods/greet.jpg"); }
.avatar.mood-stop { background-image: url("/xerf-home/moods/stop.jpg"); }
.avatar.mood-caution { background-image: url("/xerf-home/moods/caution.jpg"); }
.avatar.mood-ok { background-image: url("/xerf-home/moods/ok.jpg"); }
.avatar.mood-look { background-image: url("/xerf-home/moods/look.jpg"); }
.avatar.mood-cheer { background-image: url("/xerf-home/moods/cheer.jpg"); }
.avatar.mood-oops { background-image: url("/xerf-home/moods/oops.jpg"); }
.avatar.mood-no { background-image: url("/xerf-home/moods/no.jpg"); }
.avatar.mood-sorry { background-image: url("/xerf-home/moods/sorry.jpg"); }

/* XERF uses the ISO conversation components with external CSS only. */
.read-receipt { display: block; text-align: right; margin-top: 4px; font-size: 10px; color: #58766a; }
.scope-check { margin-top: 12px; }
.question-box:focus-visible { outline: 3px solid #779cc2; outline-offset: 3px; }
.bubble pre { margin: 0; white-space: pre-wrap; font: inherit; }

/* V2 keeps the existing LINE components; only photo/long-form controls are added. */
.photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.photo-grid canvas,.local-photo { width:100%; height:auto; border-radius:14px; border:1px solid #d5e0e8; }
.local-photo { max-width:360px; }
.choice-form details { margin:18px 0; padding:14px; border:1px solid #d5e0e8; border-radius:12px; }
.choice-form summary { cursor:pointer; font-weight:600; }
.choice-form select,.choice-form input[type="number"] { width:100%; margin:8px 0 18px; }
.choice-form input[type="file"] { display:block; max-width:100%; margin:12px 0; }
.choice-form .action { margin:8px 0; }
@media (max-width:420px) { .photo-grid { grid-template-columns:1fr; } }

/* ガイド付き自動撮影（2026-09-30） */
.camera-panel{margin:12px 0}
.camera-panel{scroll-margin-block:12px}
.camera-box{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#000}
.camera-box video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camera-box.rear video{transform:none}   /* 外カメラ（脱毛の体の部位）は鏡像にしない */
.camera-box canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cam-status{text-align:center;font-weight:600;margin:10px 0;color:#334155}
.cam-status.ok{color:#16a34a}
.photo-files{margin-top:12px}
.photo-files summary{cursor:pointer;color:#475569}

/* 対象外の範囲の確認（選択肢と見分けがつく注意カード） */
.scope-card{margin:12px 0;padding:14px;border:2px solid #f59e0b;border-radius:14px;background:#fffbeb}
.scope-card.attention{border-color:#dc2626;background:#fef2f2;animation:scope-shake .4s}
.scope-title{margin:0 0 10px;font-weight:700;color:#92400e;line-height:1.6}
.scope-card .action{width:100%;margin:0 0 10px}
.scope-confirm{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:#78350f;line-height:1.5}
.scope-confirm input{width:20px;height:20px;flex-shrink:0;margin-top:1px}
@keyframes scope-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* 撮影の段階表示（① 正面 → ② 斜め） */
.cam-steps{display:flex;justify-content:center;align-items:center;gap:8px;margin:0 0 10px;font-weight:700}
.cam-steps [data-step]{padding:6px 14px;border-radius:999px;background:#e2e8f0;color:#64748b}
.cam-steps [data-step].current{background:#2563eb;color:#fff}
.cam-steps [data-step].done{background:#16a34a;color:#fff}
.cam-arrow{color:#94a3b8}
.cam-status{font-size:1.05rem}

/* 料金画面のカート（毛穴のお姉さんと同じ形） */
.cart-saving{margin:0 0 10px;padding:12px 16px;border-radius:14px;text-align:center;background:linear-gradient(135deg,#c9a14a,#f2d06b);color:#fff}
.cart-saving small{display:block;font-size:12px;opacity:.9}.cart-saving b{font-size:20px}
.cart{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);margin-bottom:12px}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:#0b1f3a;color:#fff}
.cart-head small{display:block;font-size:11px;opacity:.7}.cart-head b{color:#e8c46a;font-size:15px}.cart-head-price{font-size:18px;font-weight:700}
.cart-block{padding:12px 16px;border-bottom:1px solid #f0f0f0}
.cart-label{font-size:11px;font-weight:700;color:#8a96a3;margin:6px 0}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px}
.timing-seg{margin:4px 0 12px}
.seg.small{grid-template-columns:1fr 1fr;margin:8px 0}
.seg-btn{border:1.5px solid #d1dfe8;background:#fff;border-radius:10px;padding:8px 6px;font-size:13px;font-weight:700;color:#334155;cursor:pointer;line-height:1.3}
.seg-btn small{display:block;font-size:10.5px;font-weight:400;color:#64748b}
.seg-btn.on{border-color:#16a34a;background:#f0fff5;color:#166534}
.cart-warn{margin-top:8px;font-size:12px;color:#b45309;background:#fffbeb;border-radius:8px;padding:6px 8px}
.cart-row{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid #f0f0f0}
.cart-main{flex:1;min-width:0}.cart-name{font-size:13.5px;font-weight:700}.cart-note{font-size:11.5px;color:#8a96a3;margin-top:2px}
.cart-amount{font-size:14px;font-weight:700;white-space:nowrap}
.cart-x{width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:1px solid #ddd;color:#999;font-size:16px;cursor:pointer;flex-shrink:0}
.cart-sub{display:flex;justify-content:space-between;font-size:12px;color:#64748b;padding:2px 0}
.stepper{display:inline-flex;align-items:center;gap:8px;background:#f5f5f5;border-radius:20px;padding:3px 6px;margin-top:8px}
.stepper span{font-weight:700;min-width:32px;text-align:center}
.step-btn{width:26px;height:26px;border-radius:50%;border:none;background:#ddd;font-size:16px;cursor:pointer}
.step-btn.plus{background:#16a34a;color:#fff}.step-btn:disabled{opacity:.35}
.link-btn{background:none;border:none;color:#2563eb;font-size:12px;padding:6px 0 0;cursor:pointer;text-decoration:underline}
.cart-total{padding:14px 16px;background:#f9fff9}
.cart-total div{display:flex;justify-content:space-between;align-items:baseline}.cart-total b{font-size:22px;color:#16a34a}
.cart-total small{display:block;font-size:11px;color:#8a96a3;margin-top:4px;line-height:1.6}
.cart-total .cart-monthly{margin-top:8px;padding:10px 12px;border-radius:12px;background:#fff4f8;border:1.5px solid #f3b6cb}.cart-total .cart-monthly span{font-size:13px;color:#b04a72;font-weight:700}.cart-total .cart-monthly b{font-size:24px;color:#d4547e}
.cart-monthly-note{margin:6px 2px 0;font-size:14px;line-height:1.7;color:#3a2a33;font-weight:700}
.cart-total small.cart-monthly-terms{margin-top:2px}
/* 10/12 院長「イソトレの月額の演出が医療脱毛と違う」: 合計の箱の外に出す版（ボトックス・ヒアル・肌育・糸・脂肪溶解・ザーフ・イソトレ）も医療脱毛と同じ見た目に */
.cart-monthly{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding:10px 12px;border-radius:12px;background:#fff4f8;border:1.5px solid #f3b6cb}.cart-monthly span{font-size:13px;color:#b04a72;font-weight:700}.cart-monthly b{font-size:24px;color:#d4547e}
small.cart-monthly-terms{display:block;font-size:11px;color:#8a96a3;margin:2px 2px 0;line-height:1.6}
.cart-off{background:#fff;border-radius:12px;padding:10px 16px;margin-bottom:10px}
.cart-off-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #f3f3f3;font-size:13px}
.cart-off-row small{display:block;font-size:11px;color:#16a34a}
.add-btn{border:1.5px solid #16a34a;color:#16a34a;background:#fff;border-radius:18px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.cart-hint{text-align:center}
.sheet-wrap{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;display:flex;align-items:flex-end;justify-content:center}
.sheet-wrap[hidden]{display:none}
.sheet{background:#fff;border-radius:20px 20px 0 0;padding:24px 20px;width:100%;max-width:520px}
.sheet-title{font-size:16px;font-weight:700;margin-bottom:8px}.sheet-body{font-size:13.5px;color:#475569;line-height:1.8;margin-bottom:14px}
.sheet-btns{display:flex;flex-direction:column;gap:8px}.sheet-btns .action{width:100%}
.sheet-alt{background:#f0fff4;border:1px solid #86efac;color:#166534;border-radius:12px;padding:12px;font-weight:700}

/* カート：ボトックスの部位チップ・プルダウン・写真からの提案 */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{display:inline-flex;align-items:center;gap:4px;background:#eef6ff;color:#1e3a5f;border-radius:16px;padding:4px 6px 4px 10px;font-size:12px;font-weight:700}
.chip-x{border:none;background:#cfe0f5;color:#1e3a5f;border-radius:50%;width:18px;height:18px;font-size:12px;line-height:1;cursor:pointer}
.cart-select{width:100%;margin:4px 0 6px;padding:9px 10px;border:1.5px dashed #9fb3c8;border-radius:10px;background:#fff;font-size:13px;color:#334155}
.cart-ai{margin:6px 0;font-size:12px;color:#1e40af;background:#eff6ff;border-radius:8px;padding:6px 8px;line-height:1.6}
.cart-tag{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:#b45309;background:#fef3c7;border-radius:10px;padding:2px 8px}
.cart-sub{gap:8px}.cart-sub span:last-child{white-space:nowrap}
.skin-seg{grid-template-columns:1fr 1fr}

/* 写真解析の進み具合（2026-10-03） */
.track{border:1px solid #e2e8f0;border-radius:14px;padding:14px 16px;margin:10px 0;background:#fff}
.track-head{display:flex;align-items:center;gap:8px;font-weight:700;color:#0f172a}
.track-time{margin-left:auto;font-weight:600;color:#64748b;font-variant-numeric:tabular-nums}
.track-dot{width:10px;height:10px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:track-pulse 1.4s infinite}
.track-bar{height:6px;border-radius:3px;background:#e2e8f0;margin:12px 0 10px;overflow:hidden}
.track-bar i{display:block;height:100%;background:linear-gradient(90deg,#16a34a,#4ade80,#16a34a);background-size:200% 100%;animation:track-flow 1.6s linear infinite;transition:width .8s ease}
.track-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.track-steps li{position:relative;padding-left:26px;color:#94a3b8}
.track-steps li::before{content:'';position:absolute;left:4px;top:5px;width:12px;height:12px;border-radius:50%;border:2px solid #cbd5e1;background:#fff}
.track-steps li.done{color:#0f172a}
.track-steps li.done::before{background:#16a34a;border-color:#16a34a}
.track-steps li.now{color:#0f172a}
.track-steps li.now::before{border-color:#16a34a;animation:track-pulse 1.4s infinite}
.track-steps b{display:block;font-weight:600}
.track-steps small{display:block;color:#64748b;font-size:.85em}
@keyframes track-pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
@keyframes track-flow{from{background-position:200% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.track-dot,.track-bar i,.track-steps li.now::before{animation:none}}
.track-bar i.w0{width:0%}.track-bar i.w5{width:5%}.track-bar i.w10{width:10%}.track-bar i.w15{width:15%}.track-bar i.w20{width:20%}.track-bar i.w25{width:25%}.track-bar i.w30{width:30%}.track-bar i.w35{width:35%}.track-bar i.w40{width:40%}.track-bar i.w45{width:45%}.track-bar i.w50{width:50%}.track-bar i.w55{width:55%}.track-bar i.w60{width:60%}.track-bar i.w65{width:65%}.track-bar i.w70{width:70%}.track-bar i.w75{width:75%}.track-bar i.w80{width:80%}.track-bar i.w85{width:85%}.track-bar i.w90{width:90%}.track-bar i.w95{width:95%}.track-bar i.w100{width:100%}
/* 結果カード（2026-10-03 オーナー「結果はヒアル診断AIのように見やすく結果だけで」） */
.rx{background:#fff;border:1px solid #e6d7b8;border-left:5px solid var(--gold);border-radius:12px;padding:16px;margin:12px 0}
.rx-title{font-weight:700;color:var(--navy);font-size:15px;margin-bottom:10px}
.rx-title::before{content:"■ ";color:var(--gold)}
.rx-note{font-size:12px;color:var(--muted);line-height:1.7;margin:8px 0}
.rx-lead{font-size:13px;color:var(--ink);margin:0 0 10px}
.rx-link{font-size:13.5px;font-weight:700;color:var(--navy);background:#fff8e6;border:1px solid #f0d58c;border-radius:10px;padding:8px 10px;margin:0 0 10px;line-height:1.6}
.rx-list{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:6px}
.rx-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fbfcfd}
.rx-row.off{opacity:.6}
.rx-name{font-weight:700;color:var(--navy);flex:1;min-width:0}
.rx-sub{flex-basis:100%;font-size:11px;color:var(--muted)}
.lv{font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;white-space:nowrap}
.rx-mini{font-size:12px;padding:3px 10px;border:1px solid #c9d4de;border-radius:999px;background:#fff;color:var(--muted)}
.rx-base{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--navy);color:var(--gold);border-radius:10px;padding:12px;margin:0 0 12px;text-align:center}
.rx-base small{color:#ffffffd9;font-size:11px}
.rx-base b{font-size:17px}
.rx-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.rx-steps li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #e6d7b8;border-radius:10px;background:#fdfaf1}
.rx-steps li>div{min-width:0;display:flex;flex-direction:column;gap:3px}
.rx-num{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.rx-steps b{color:var(--navy);font-size:14px}
.rx-steps small{font-size:12px;color:#4a5866;line-height:1.65;white-space:pre-line}
.pb{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.06em;padding:1px 8px;border-radius:999px;background:#dde6f0;color:var(--navy)}
.pb-1{background:var(--navy);color:var(--gold)}
.rx-later{display:flex;flex-direction:column;gap:3px;margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#f2f5f8;font-size:13px}
.rx-later b{font-size:12px;color:var(--muted)}
.rx-add{display:flex;flex-direction:column;gap:6px;margin:12px 0 0}
.rx-add small{font-size:12px;color:var(--muted)}
.rx-add .action{width:100%;margin:0}
.rx-more{margin:12px 0 0;font-size:13px}
.rx-more summary{color:var(--navy);font-weight:600}
.rx-more p{margin:8px 0;line-height:1.75;color:#4a5866;white-space:pre-line}
.rx-btns{display:flex;gap:6px;margin-left:auto}
.rx-mini.on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* お顔のAIレポート: 所見・施術提案・見え方の目安 */
.rx-row{flex-direction:column;align-items:stretch;border-left:5px solid #cbd5e1}
.rx-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rx-fix{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.rx-fix-head{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.04em}
.fix b{display:block;font-size:13px;color:var(--navy)}
.fix small{display:block;font-size:12px;color:#4a5866;line-height:1.6;white-space:pre-line}
.rx-row .rx-btns{margin-left:0}.rx-row .rx-btns .rx-mini{flex:1;padding:6px 10px;font-size:13px}
.rx-head .rx-name{white-space:nowrap}.rx-head .lv{font-size:11px;padding:2px 8px}
.rx-referral{display:flex;flex-direction:column;gap:3px;margin:12px 0 0;padding:12px;border-radius:10px;background:#ecfdf3;border:1px solid #86efac}
.rx-referral b{font-size:13px;color:#166534}
.rx-referral small{font-size:12px;color:#365e45;line-height:1.6}
.vf-body{background:#f4f1ea}
.vf{max-width:480px;margin:24px auto;padding:20px 16px;background:#fff;border-radius:14px;border-top:5px solid var(--gold)}
.vf-brand{font-size:12px;letter-spacing:.1em;color:var(--navy);font-weight:700}
/* プラン画面: お姉さんの「おすすめ＋理由」を上の会話と同じ位置から始め、直下の選択肢につなげる／選べない選択肢は薄くする（2026-10-05） */
.choice-form > .message-row.talk, .choice-form > div > .message-row.talk { margin: 28px 0 10px -42px; }
.choice-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
@media (max-width: 359px) { .choice-form > .message-row.talk, .choice-form > div > .message-row.talk { margin-left: -25px; } }
.rx-observation{font-size:13px;line-height:1.7;margin:4px 0}
.rx-ranking{font-size:14px;line-height:1.8;margin:4px 0;white-space:pre-line}
.rx-next{margin:6px 0}
/* ボトックス本人試験 2026-10-07: 写真と短い所見、強調だけでも読める施術カード。 */
.botox-photo-layout{display:flex;align-items:center;gap:14px}
.botox-front-photo{display:block;width:120px;max-width:36%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:#edf1f5}
.botox-photo-findings{flex:1;min-width:0;font-size:14px;line-height:1.65}
.botox-photo-findings p{margin:0 0 8px}
.treatment-card{font-size:15px;line-height:1.7;padding:16px;background:#fff;border:1px solid #e6d7b8;border-radius:12px}
.treatment-name{font-size:18px;font-weight:700;margin-bottom:8px}
.treatment-card b{font-size:16px}
.treatment-card u,.wish-future u{text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--gold)}
.treatment-price{margin-top:10px;font-weight:600}
.treatment-condition{font-size:12px;line-height:1.6;color:var(--muted)}
.botox-ranking .rx-num{width:34px;height:30px;white-space:nowrap;border-radius:8px}
.botox-ranking .treatment-card{padding:0;border:0;background:transparent;flex:1}
.botox-ranking .treatment-name{font-size:16px;margin-bottom:3px}
.botox-ranking .treatment-card b{font-size:15px}
.price-patterns{padding:0;border:0;margin:16px 0}
.price-patterns legend{font-size:14px;font-weight:700;margin-bottom:8px}
.price-patterns .choice-label{font-weight:600}
.price-patterns .choice-description{font-size:12px}
.wish-future{line-height:1.85;font-size:16px;margin:8px 0 14px}
.wish-details{font-size:14px;line-height:1.85}
.application-guide{font-size:15px;font-weight:600;line-height:1.85;padding:16px;background:#fdfaf1;border:1px solid #e6d7b8;border-radius:12px}
/* 外部の汎用文字色指定に負けないよう、濃い背景上の文字はIDで固定する。 */
#app .rx-base,#app .rx-base b,#app .rx-num{color:#f2daaa!important}
#app .rx-base small,#app .cart-head,#app .cart-head b,#app .cart-head small,#app .cart-head-price{color:#fff!important}
#app .rx-mini.on{color:#fff!important}
@media(max-width:600px){
  .camera-box{width:min(100%,calc((100dvh - 250px)*.75));max-height:calc(100dvh - 250px)}
  .botox-front-photo{width:112px}
}
.fix-expectation{margin-top:8px}

/* ①プランと②時期を、別の色と枠で選ぶ。 */
.combo-treatment-card{border:1px solid #d1dfe8;border-radius:14px;padding:12px;background:#fff}
#app .combo-plan-choice,#app .combo-timing-choice{min-width:0;margin:16px 0;padding:12px;border:2px solid;border-radius:12px}
#app .combo-plan-choice{border-color:#b48a32;background:#fffaf0}
#app .combo-timing-choice{border-color:#001e43;background:#eef3f9}
#app .combo-plan-choice legend,#app .combo-timing-choice legend{max-width:100%;font-weight:700;font-size:14px;padding:4px 8px;border-radius:6px}
#app .combo-plan-choice legend{background:#765510;color:#fff!important}
#app .combo-timing-choice legend{background:#001e43;color:#fff!important}
#app .combo-plan-choice .choice-option:has(input:checked){border-color:#a67c24;background:#fff0ca}
#app .combo-plan-choice input{accent-color:#916b1c}
#app .combo-timing-choice input{accent-color:#001e43}
#app .combo-timing-choice .choice-option:has(input:checked){border-color:#001e43;background:#001e43}
#app .combo-timing-choice .choice-option:has(input:checked) .choice-label,#app .combo-timing-choice .choice-option:has(input:checked) .choice-description{color:#fff!important}
.facial-analysis{margin-top:16px}
.facial-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.facial-metric{padding:12px;border:1px solid #d8dfeb;border-radius:10px;background:#f8fafc;min-width:0;overflow-wrap:anywhere}
.facial-metric b{font-size:13px;display:block}
.facial-metric p{font-size:14px;margin:8px 0;line-height:1.6}
.facial-metric small{font-size:12px;color:#596879;display:block}
.facial-radar{text-align:center;margin:20px 0 12px;padding:16px 8px;border:1px solid #d8dfeb;border-radius:12px;background:#fff}
.facial-radar>b{font-size:14px;letter-spacing:.04em}
.facial-radar p{font-size:12px;line-height:1.6}
.facial-radar .radar-svg{display:block;width:100%;max-width:340px;margin:auto}
.facial-quality{font-weight:700;font-size:14px}
.facial-quality-warning{font-size:13px;color:#9b283d}
.facial-guide-legend{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:11px}
.facial-guide-legend span{display:inline-flex;align-items:center;gap:5px}
.facial-guide-legend i{width:14px;height:3px;display:inline-block}
/* 凡例の色（FACIAL_LEGEND と同じ6色）。style 属性は本番の CSP（style-src 'self'）に止められるので、属性セレクタで塗る */
.facial-guide-legend i[data-c="ff4444"]{background:#ff4444}
.facial-guide-legend i[data-c="ffd700"]{background:#ffd700}
.facial-guide-legend i[data-c="ff8800"]{background:#ff8800}
.facial-guide-legend i[data-c="00ccff"]{background:#00ccff}
.facial-guide-legend i[data-c="00ff88"]{background:#00ff88}
.facial-guide-legend i[data-c="cc88ff"]{background:#cc88ff}
.scan-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0}
.scan-photo{margin:0;text-align:center}.scan-photo .facial-photo{width:100%}
.scan-photo:nth-child(3):last-child{grid-column:1/-1;width:calc(50% - 5px);justify-self:center}   /* 横の写真（3枚目）は下の真ん中に */
.scan-photo figcaption b{display:block;font-size:13px;margin-top:4px}.scan-photo figcaption small{display:block;font-size:11px;color:#596879}
.face-scan .facial-guide-legend{margin:8px 0}
.facial-photos{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.facial-photo{position:relative;line-height:0;width:120px}
.facial-photo .botox-front-photo{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.facial-photo-guides{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(max-width:340px){.facial-metric-grid{grid-template-columns:1fr}}   /* サイトのヒアル診断AIと同じく、スマホ幅でも2列 */

/* Skin appearance cards share the facial palette; keep two columns on phones. */
.skin-analysis{color:#001e43}
.skin-analysis h3{font-size:15px;margin:20px 0 12px;color:#001e43;border-bottom:2px solid #c9a43a;padding-bottom:8px}
.skin-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.skin-metric{padding:12px;border:1px solid #d8dfeb;border-radius:10px;background:#fff;min-width:0;overflow-wrap:anywhere}
.skin-metric b{font-size:13px;display:block}
.skin-metric p{font-size:14px;margin:8px 0;line-height:1.6}
.skin-metric small{font-size:12px;color:#596879;display:block;margin-top:6px;line-height:1.6}
.skin-metric small.skin-with{color:#0e7490;font-weight:600}
.parts-bar.skin-metric{border:0;padding:0;background:none}.parts-bar.skin-metric.skin-missing{opacity:.75}
.analysis-beta{float:right;font-size:11px;font-weight:400;color:#64748b;border:1px solid #cbd5e1;border-radius:10px;padding:1px 8px}
.skin-metric .skin-label{color:#001e43;font-weight:700;border-bottom:2px solid #c9a43a;padding-bottom:4px}
.skin-missing{background:#f0f1f3;color:#65707b}
.skin-quality{font-weight:700;font-size:14px}
.skin-photo-note{font-size:12px;color:#596879}
@media(max-width:320px){.skin-metric-grid{grid-template-columns:1fr}}

/* 医療脱毛: ヒアルロン酸と同じボタン・明細で選ぶ */
.datsumo-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.datsumo-photos.hair-photos{grid-template-columns:repeat(3,minmax(0,1fr))}
.datsumo-photos figure{margin:0;min-width:0}
.datsumo-photos img{display:block;width:100%;height:auto;border-radius:12px}
.datsumo-photos figcaption{text-align:center;font-size:12px;color:#526071;margin-top:5px}
.datsumo-cases{margin-top:12px;font-size:13px}
.datsumo-unavailable{background:#f4f5f6;color:#737b85}
.datsumo-unavailable img{opacity:.65}
.datsumo-upgrade,.datsumo-loan{padding:14px 16px;border-radius:14px;background:#faf6eb;font-size:14px;line-height:1.8}
.datsumo-loan{background:#eef4fa}
.datsumo-simulation{padding:16px;border:1px solid #e5e0d6;border-radius:18px;background:#fffaf0}
.datsumo-simulation svg{display:block;width:100%;height:auto}
.datsumo-simulation p,.datsumo-simulation small{font-size:13px;line-height:1.7}
.datsumo-legend{display:flex;flex-wrap:wrap;gap:12px}
.datsumo-legend span:before{content:'';display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px}
.datsumo-legend .gold:before{background:#b79948}.datsumo-legend .blue:before{background:#4978b5}.datsumo-legend .green:before{background:#318266}
.datsumo-late{margin-top:16px}
.datsumo-cart .cart-head{flex-wrap:wrap;gap:8px}
.datsumo-range{margin:8px 0 10px;text-align:center}.datsumo-range img{width:100%;max-width:360px;height:auto;border-radius:12px}.datsumo-range figcaption{font-size:13px;line-height:1.7;margin-top:6px;text-align:left}

/* 説明文のメリハリ（10/9 統括院長） */
.bubble .exp-h { display: inline-block; margin-top: 6px; font-size: 15.5px; font-weight: 700; color: #0b2a4a; }
.rx-ranking .exp-h { display: inline-block; margin-top: 6px; font-size: 15px; font-weight: 700; color: #0b2a4a; }
.bubble .exp-sub { font-weight: 700; color: #33495e; }
.bubble mark.ub { background: linear-gradient(transparent 58%, #fff07a 58%); color: inherit; font-weight: 700; padding: 0 1px; }

.loan-sim{margin-top:10px;padding:14px 16px;border-radius:14px;background:#eef4fa;font-size:14px;line-height:1.7}.loan-sim p{margin:4px 0 8px;font-size:13px}
.loan-sim-row{display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin-top:8px;padding:10px 12px;border-radius:12px;background:#fff;border:1.5px solid #dde6ef}.loan-sim-row small{grid-column:1/-1;color:#5c6b7a;font-size:12px}
.loan-sim-row.best{border-color:#d4547e;background:#fff4f8}.loan-sim-row b{color:#d4547e;font-size:18px}.loan-sim-row em{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;background:#d4547e;color:#fff;font-size:11px;font-style:normal}
.loan-sim-note{display:block;margin-top:8px;color:#5c6b7a;font-size:11px;line-height:1.6}
/* ヒアル主役（10/11）: 部位名は1行で読める（375px で「ほ／うれ／い線」と折れない）・料金のパターン・サイトの診断AIの点数 */
.cart-sub.filler-part{flex-wrap:wrap;align-items:center;row-gap:4px}
.cart-sub.filler-part .filler-part-name{white-space:nowrap;flex:1 0 auto;font-weight:700;color:#0f172a;font-size:13px}
.filler-patterns{display:grid;gap:8px;margin:6px 0 10px}
.pattern-btn{display:grid;gap:2px;text-align:left;border:1.5px solid #d1dfe8;background:#fff;border-radius:12px;padding:10px 12px;cursor:pointer;color:#334155}
.pattern-btn b{font-size:14px;color:#0f172a}.pattern-btn span{font-size:12px;color:#64748b;line-height:1.5}
.pattern-btn .pattern-price{font-size:16px;font-weight:700;color:#d4547e}
.pattern-btn.on{border-color:#16a34a;background:#f0fff5}
.pattern-fit{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:10px;background:#16a34a;color:#fff;font-size:11px;font-style:normal;vertical-align:middle}
.site-scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin:8px 0}
.site-score{background:#001e43;color:#fff;border-radius:10px;padding:8px;text-align:center}
.site-score b{display:block;font-size:20px;color:#d4af37}.site-score b small{font-size:11px;color:#fff;margin-left:2px}
.site-score span{font-size:11px;opacity:.85}
/* ヒアル主役（10/11 夜）: 写真から見た、改善するとよいパーツ・主治医の先生への確認の枠 */
.parts-bars{display:grid;gap:10px;margin:8px 0}
.parts-bar-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.parts-bar-head b{font-size:14px;color:#0f172a}
.parts-score{margin-left:auto;font-weight:700;color:#001e43;font-size:13px}
.parts-tag{font-size:11px;padding:1px 8px;border-radius:10px;background:#e2e8f0;color:#334155}.parts-tag.add{background:#fde68a;color:#92400e}
.parts-track{display:block;width:100%;height:8px;margin:4px 0}
.parts-bar small{display:block;font-size:12px;color:#64748b;line-height:1.5}
.parts-doctor{margin-top:10px;padding:10px 12px;border-radius:12px;background:#f0f6ff;border:1.5px solid #bcd3f5}.parts-doctor p{margin:4px 0;font-size:13px}.parts-doctor small{color:#64748b;font-size:11px}
.shujii-alert{margin:0 0 14px;padding:14px;border-radius:14px;background:#fff4ed;border:2.5px solid #f97316}
.shujii-alert-title{font-weight:800;color:#c2410c;font-size:16px;line-height:1.5;margin-bottom:6px}
.shujii-alert p{font-size:14px;color:#1f2937;line-height:1.6;margin:6px 0}
.shujii-letter{background:#fff;border:1px solid #fed7aa;border-radius:10px;padding:10px;font-size:13px;line-height:1.6;margin:8px 0}
.shujii-line{margin-top:8px;padding:8px 10px;border-radius:10px;background:#fff4ed;border:1.5px solid #f97316;color:#c2410c;font-weight:700}
.parts-bar small.parts-measured{font-size:11px;color:#94a3b8;margin-top:2px}
.layers-figure{margin:6px 0 4px;max-width:100%;overflow:hidden}.layers-svg{display:block;max-width:100%;height:auto}.layers-figure small{display:block;font-size:11px;color:#64748b;margin-top:4px}
.layers-text{white-space:pre-line;font-size:14px;line-height:1.7;color:#1f2937;margin:12px 0 8px;padding-top:10px;border-top:1px dashed #d8dfeb}

.needle-guide{background:#f8fbff;border:1px solid #dbe6f3;border-radius:10px;padding:10px 12px;margin:4px 0 6px;font-size:13px;line-height:1.7;color:#1f2937}.needle-guide b{display:block;margin-bottom:4px}.needle-points{list-style:none;margin:0 0 6px;padding:0}.needle-guide small{display:block;color:#64748b;font-size:11.5px;line-height:1.6}

/* イソトレチノイン版（毛穴を極めるレナクリお姉さんと同じ体験・10/12） */
.iso-map .iso-concern{border:1px solid #e6e9ee;border-radius:12px;overflow:hidden;margin:8px 0;background:#fff}
.iso-concern header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;background:#0b1f3a;color:#e8c46a}
.iso-concern header b{font-size:14px}
.iso-concern p{margin:0;padding:10px 14px 4px;font-size:13px;line-height:1.7;color:#334155}
.iso-sev{font-size:11px;font-weight:700;padding:2px 10px;border-radius:999px;background:#f0fdf4;color:#64748b}
.iso-sev-high{background:#fee2e2;color:#b91c1c}.iso-sev-mid{background:#fef9c3;color:#a16207}
.iso-chips{display:flex;flex-wrap:wrap;gap:6px;padding:6px 14px 12px}
.iso-chip{font-size:12px;border:1px solid #bad7f5;background:#f0f7ff;color:#185fa5;border-radius:999px;padding:3px 10px}
.iso-doses{list-style:none;padding:0;margin:10px 0 6px}.iso-doses li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #eee;font-size:13px}
.iso-dose-price{margin-left:auto;color:#475569;white-space:nowrap}.iso-dose-name b{margin-right:4px}
.iso-recommend{font-style:normal;font-size:10px;font-weight:700;background:#c9a14a;color:#fff;border-radius:999px;padding:1px 8px}
.iso-weights{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0}
.iso-weights caption{font-size:12px;color:#64748b;text-align:left;padding:4px 0}
.iso-weights th,.iso-weights td{border:1px solid #e5e7eb;padding:6px 8px;text-align:center}.iso-weights thead th{background:#f1f5f9}
.iso-note{font-size:12px;color:#64748b;margin:4px 0}
.iso-months{margin:10px 0}
.iso-gold{margin:10px 0 4px;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,#c9a14a,#f2d06b);color:#fff;font-size:13px}
.iso-item{margin:6px 0}
.iso-why{margin:0 0 6px 28px;font-size:12px;color:#475569}.iso-why summary{cursor:pointer;color:#185fa5}
.iso-why dl{margin:6px 0}.iso-why dt{font-weight:700;color:#0b1f3a;margin-top:6px}.iso-why dd{margin:2px 0 0}
.iso-removed{text-decoration:line-through;color:#9aa5b1}.iso-removed small{display:block;text-decoration:none}
.cart-tag-head{padding:6px 16px;background:#f9f9f9;font-size:11px;font-weight:700;color:#888;border-bottom:1px solid #f0f0f0}.cart-tag-head.premium{color:#c9a14a}
.cart-pad{padding:10px 16px}
.cart-regular{display:flex;justify-content:space-between;margin-bottom:4px;font-size:12px}.cart-regular s{color:#aaa}.cart-regular span{color:#16a34a;font-weight:700}
.cart-head-price small{display:block;font-size:11px;color:#e8c46a;text-align:right}

/* 糸リフト主役（10/12 統括院長）: 3/9 の本数・素材・上がり方の枠、パーツの「あわせると良い施術」、ランキングのカードの写真の一言 */
.thread-guide .thread-q{margin:8px 0;padding:10px 12px;border-radius:12px;background:#fff8f5;border:1.5px solid #f2c7b8}
.thread-guide .thread-q-title{font-weight:800;font-size:15px;color:#0b2a4a;margin-bottom:4px}
.thread-guide .thread-q p{margin:3px 0;font-size:14px;line-height:1.7;color:#1f2937}
.thread-guide .thread-limits{background:#f8fafc;border-color:#cbd5e1}
.parts-bar small.parts-with{color:#0e7490;font-weight:600;margin-top:2px}
.treatment-photo{margin-top:6px;font-size:13px;line-height:1.6;color:#0e7490;font-weight:600}
.thread-parts .thread-sub{margin-top:14px;font-size:14px}

/* ピコレーザー主役（10/13 統括院長）: シミの見立て（サイトの診断AIの結果の画面を、おうちの画面に） */
.pico-type{margin:8px 0;padding:10px 12px;border-radius:12px;background:#f8fafc;border:1.5px solid #cbd5e1;display:flex;flex-direction:column;gap:4px}
.pico-type b{font-size:15px;color:#0b2a4a}
.pico-type small{display:block;font-size:13px;line-height:1.7;color:#334155}
.pico-type .pico-reason{color:#1d4ed8}
.pico-badge{align-self:flex-start;font-size:11px;font-weight:800;border-radius:999px;padding:2px 9px;color:#f2d06b;background:#0b2a4a}
.pico-badge.pico-redirect{background:#64748b;color:#fff}
.pico-badge.pico-caution{background:#b45309;color:#fff}
.pico-sub{font-weight:800;font-size:14px;color:#0b2a4a;margin:14px 0 6px}
.pico-plan{margin:6px 0;padding:10px 12px;border-radius:12px;background:#fdfaf3;border:1.5px solid #e6d7b8}
.pico-plan b{display:block;font-size:15px;color:#0b2a4a;margin-bottom:2px}
.pico-plan small{display:block;font-size:13px;line-height:1.7;color:#475569}
.pico-evidence,.pico-kansho,.pico-advice,.pico-contra{margin:10px 0;padding:10px 12px;border-radius:12px;background:#f0f9ff;border:1.5px solid #bae6fd}
.pico-kansho{background:#fff7ed;border-color:#fed7aa}
.pico-advice{background:#f8fafc;border-color:#cbd5e1}
.pico-contra{background:#fffbeb;border-color:#fde68a}
.pico-evidence p,.pico-kansho p,.pico-advice p,.pico-contra p{margin:4px 0;font-size:13.5px;line-height:1.7;color:#1f2937}
.pico-contra small,.pico-evidence small{display:block;font-size:12px;color:#64748b;line-height:1.6}
.pico-sessions{margin:10px 0}
.pico-sessions .sessions-row{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid #e5e7eb;font-size:13.5px}
.pico-sessions small{display:block;font-size:12px;color:#64748b;margin-top:4px}
.pico-summary{margin:10px 0;padding:10px 12px;border-radius:12px;background:#fdfaf3;border:1.5px solid #e6d7b8}
.pico-summary p{margin:4px 0 0;font-size:14.5px;line-height:1.7;color:#0b2a4a;font-weight:700}
.pico-why{color:#475569 !important}
.pico-moles{margin:10px 0;padding:10px 12px;border-radius:12px;background:#f8fafc;border:1.5px solid #cbd5e1}
.pico-moles p{margin:4px 0;font-size:13.5px;line-height:1.7}
.pico-moles small{display:block;font-size:12px;color:#64748b}

/* 写真の画面の「写真なしでおすすめを見る」と、料金画面の「おすすめのまま申し込む」（10/14）：小さいリンクにせず、大きなボタンにする */
.action.skip-photo, .action.reco-cta { background: var(--navy); border-color: var(--navy); color: #ebd78e; min-height: 52px; font-size: 15px; font-weight: 700; box-shadow: 0 3px 7px #001e4312; }
.reco-box { margin: 0 0 14px; padding: 10px 0 12px; border-bottom: 1px dashed var(--line); }
.reco-box .action { margin-top: 10px; }
.reco-box.open { border-bottom: 0; padding-bottom: 0; }
.cart button:disabled, .datsumo-cart button:disabled { opacity: .45; }
.action.reco-alt { min-height: 46px; font-size: 13px; font-weight: 600; }
.action.reco-alt.strong { border-color: #c9a227; background: #fff8e1; color: #5a4200; font-weight: 700; font-size: 14px; min-height: 52px; }
.reco-note { margin: 8px 0 0; font-size: 12px; color: #4a5e72; line-height: 1.6; }