:root {
  color-scheme: light;
  --cj-bg: #f9f7f2;
  --cj-surface: #fffefa;
  --cj-white: #fff;
  --cj-ink: #303a33;
  --cj-muted: #687168;
  --cj-soft-muted: #7c8178;
  --cj-accent: #c44c31;
  --cj-accent-hover: #a93b25;
  --cj-green: #566a53;
  --cj-line: #e5e0d6;
  --cj-wash: #f4f0e8;
  --cj-error: #a52d24;
  --cj-radius: 14px;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--cj-ink);
  background: var(--cj-bg);
}

.customer-journey, .customer-journey * { box-sizing: border-box; }
.customer-journey { min-height: 100vh; margin: 0; background: var(--cj-bg); color: var(--cj-ink); font: 400 15px/1.7 "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; }
.customer-journey img { display: block; max-width: 100%; }
.customer-journey button, .customer-journey input, .customer-journey select, .customer-journey textarea { font: inherit; color: inherit; }
.customer-journey button, .customer-journey a { -webkit-tap-highlight-color: transparent; }
.customer-journey a { color: inherit; }
.customer-journey [hidden] { display: none !important; }
.customer-journey :focus-visible { outline: 3px solid #c44c3180; outline-offset: 3px; }
.cj-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.cj-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #e5e0d6d9; background: #f9f7f2ed; backdrop-filter: blur(14px); }
.cj-header-inner { max-width: 1320px; min-height: 76px; margin: auto; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cj-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--cj-ink); text-decoration: none; font: 700 24px/1 "DM Sans", sans-serif; letter-spacing: -1.2px; }
.cj-brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 5px; transform: rotate(-8deg); background: #e9e9dd; color: var(--cj-green); font: 700 20px/1 "DM Sans", sans-serif; letter-spacing: 0; }
.cj-brand-dot { color: var(--cj-accent); }
.cj-header-right { display: flex; align-items: center; gap: 27px; color: var(--cj-muted); font-size: 12px; }
.cj-secure { display: inline-flex; align-items: center; gap: 7px; }
.cj-secure>span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #9ba394; border-radius: 50%; color: var(--cj-green); font-size: 15px; }
.cj-back { text-decoration: none; }
.cj-back:hover { color: var(--cj-accent); text-decoration: underline; text-underline-offset: 3px; }

.cj-main { width: min(100% - 64px, 1220px); margin: 0 auto; }
.cj-purchase-main { padding: 38px 0 90px; }
.cj-page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.cj-eyebrow { margin: 0 0 8px; color: var(--cj-green); font: 600 10px/1.3 "DM Sans", sans-serif; letter-spacing: .17em; }
.cj-page-intro h1 { margin: 0; font-size: clamp(27px, 3vw, 36px); line-height: 1.35; letter-spacing: -.035em; font-weight: 700; }
.cj-lead { margin: 9px 0 0; color: var(--cj-muted); font-size: 13px; }
.cj-intro-note { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; background: #eeece3; color: #656b5e; font-size: 11px; white-space: nowrap; }
.cj-intro-note>span { color: var(--cj-accent); }

.cj-stepper { padding: 16px 20px 17px; border: 1px solid var(--cj-line); border-radius: 11px; background: #fffefa9c; margin-bottom: 27px; }
.cj-step-counter { margin: 0 0 9px; color: var(--cj-accent); font: 700 10px "DM Sans", sans-serif; letter-spacing: .08em; }
.cj-step-counter span { color: var(--cj-soft-muted); font-weight: 500; }
.cj-stepper ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; list-style: none; margin: 0; padding: 0; }
.cj-stepper li { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; color: #92958d; font-size: 12px; }
.cj-stepper li::after { content: ""; position: absolute; height: 1px; width: calc(100% - 42px); left: 31px; top: 50%; background: var(--cj-line); transform: translateY(-50%); }
.cj-stepper li:last-child::after { display: none; }
.cj-stepper li>span { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid #d5d2c8; border-radius: 50%; background: var(--cj-bg); color: #8a8e85; font: 600 11px "DM Sans", sans-serif; }
.cj-stepper li>b { position: relative; z-index: 1; padding-right: 14px; background: var(--cj-bg); font-weight: 500; }
.cj-stepper li[aria-current="step"] { color: var(--cj-ink); font-weight: 700; }
.cj-stepper li[aria-current="step"]>span, .cj-stepper li.is-complete>span { border-color: var(--cj-accent); background: var(--cj-accent); color: #fff; }
.cj-stepper li.is-complete::after { background: #d9a092; }
.cj-stepper li.is-complete>b { color: var(--cj-green); }

.cj-purchase-layout { display: grid; grid-template-columns: minmax(0, 1fr) 348px; align-items: start; gap: 38px; }
.cj-primary-column { min-width: 0; }
.cj-form { display: flex; flex-direction: column; gap: 19px; }
.cj-section { min-width: 0; padding: 25px 27px 27px; border: 1px solid var(--cj-line); border-radius: var(--cj-radius); background: var(--cj-surface); }
.cj-section-heading { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 21px; }
.cj-section-heading>span { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; border-radius: 50%; background: #edf0e8; color: var(--cj-green); font: 600 10px "DM Sans", sans-serif; }
.cj-section-heading h2 { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 700; }
.cj-section-heading p { margin: 3px 0 0; color: var(--cj-muted); font-size: 12px; }
.cj-plan-grid { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; }
.cj-plan-card { position: relative; display: flex; align-items: flex-start; min-width: 0; min-height: 144px; padding: 17px 15px; border: 1px solid #dedbd1; border-radius: 11px; background: var(--cj-white); cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; }
.cj-plan-card:hover { border-color: #c48b7c; transform: translateY(-1px); }
.cj-plan-card:has(input:checked) { border-color: var(--cj-accent); background: #fff8f4; box-shadow: inset 0 0 0 1px var(--cj-accent); }
.cj-plan-card input, .cj-scope-card input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.cj-plan-radio, .cj-scope-radio { position: relative; display: block; flex: 0 0 19px; width: 19px; height: 19px; margin: 1px 10px 0 0; border: 1.5px solid #bcbeb4; border-radius: 50%; background: #fff; }
.cj-plan-card:has(input:checked) .cj-plan-radio, .cj-scope-card:has(input:checked) .cj-scope-radio { border-color: var(--cj-accent); }
.cj-plan-card:has(input:checked) .cj-plan-radio::after, .cj-scope-card:has(input:checked) .cj-scope-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--cj-accent); }
.cj-plan-card input:focus-visible+.cj-plan-radio, .cj-scope-card input:focus-visible+.cj-scope-radio { outline: 3px solid #c44c3180; outline-offset: 3px; }
.cj-plan-body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.cj-plan-name { color: var(--cj-ink); font-size: 14px; font-weight: 700; }
.cj-plan-price { margin-top: 8px; color: var(--cj-ink); font: 700 23px/1.25 "DM Sans", "Noto Sans JP", sans-serif; letter-spacing: -.045em; white-space: nowrap; }
.cj-plan-price small { margin-left: 5px; color: var(--cj-muted); font: 400 10px "Noto Sans JP", sans-serif; letter-spacing: 0; }
.cj-plan-details { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.cj-plan-details span { padding: 3px 7px; border-radius: 4px; background: #f2f0e9; color: #5f685d; font-size: 10px; white-space: nowrap; }
.cj-plan-card:has(input:checked) .cj-plan-details span { background: #f3e8e1; color: #795043; }

.cj-extra-option { position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; min-height: 76px; margin-top: 13px; padding: 12px 15px; border: 1px dashed #d4cfc3; border-radius: 10px; background: #faf8f2; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cj-extra-option:hover, .cj-extra-option:has(input:checked) { border-color: #c48b7c; background: #fff8f4; }
.cj-extra-option>input { position: absolute; top: 11px; left: 11px; width: 1px; height: 1px; opacity: 0; }
.cj-extra-check { display: grid; place-items: center; width: 29px; height: 29px; grid-row: 1 / span 2; border: 1px solid #bcbeb4; border-radius: 50%; background: #fff; color: transparent; font: 500 19px/1 "DM Sans", sans-serif; }
.cj-extra-option:has(input:checked) .cj-extra-check { border-color: var(--cj-accent); background: var(--cj-accent); color: #fff; }
.cj-extra-option input:focus-visible+.cj-extra-check { outline: 3px solid #c44c3180; outline-offset: 3px; }
.cj-extra-copy { display: flex; flex-direction: column; min-width: 0; }
.cj-extra-copy strong { font-size: 13px; }
.cj-extra-copy>span { color: var(--cj-muted); font-size: 11px; }
.cj-extra-price { align-self: center; color: var(--cj-accent); font-size: 14px; font-weight: 700; white-space: nowrap; }
.cj-extra-price small { margin-left: 4px; color: var(--cj-muted); font-size: 10px; font-weight: 400; }
.cj-extra-note { grid-column: 2 / 4; color: var(--cj-soft-muted); font-size: 10px; }

.cj-publish-included { display: flex; align-items: center; gap: 12px; padding: 14px 15px; border: 1px solid #dfe4d8; border-radius: 10px; background: #f3f5ef; }
.cj-included-icon { display: grid; place-items: center; flex: 0 0 27px; height: 27px; border-radius: 50%; background: var(--cj-green); color: #fff; font-size: 14px; }
.cj-publish-included>div { flex: 1; min-width: 0; }
.cj-publish-included strong { font-size: 12px; }
.cj-publish-included p { margin: 2px 0 0; color: var(--cj-muted); font-size: 11px; }
.cj-included-fee { color: var(--cj-green); font: 700 14px "DM Sans", "Noto Sans JP", sans-serif; white-space: nowrap; }
.cj-included-fee small { display: block; text-align: right; color: var(--cj-muted); font: 400 10px "Noto Sans JP", sans-serif; }
.cj-scope-fieldset, .cj-consents-fieldset { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.cj-scope-fieldset legend, .cj-consents-fieldset legend { width: 100%; margin-bottom: 10px; font-size: 12px; font-weight: 700; }
.cj-scope-fieldset legend span, .cj-consents-fieldset legend span { float: right; color: var(--cj-muted); font-size: 10px; font-weight: 400; }
.cj-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.cj-scope-card { position: relative; display: flex; align-items: flex-start; min-width: 0; min-height: 86px; padding: 13px 12px; border: 1px solid #dedbd1; border-radius: 9px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cj-scope-card:hover { border-color: #c48b7c; }
.cj-scope-card:has(input:checked) { border-color: var(--cj-accent); background: #fff8f4; box-shadow: inset 0 0 0 1px var(--cj-accent); }
.cj-scope-card>span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cj-scope-card strong { font-size: 12px; }
.cj-scope-card small { margin-top: 4px; color: var(--cj-muted); font-size: 11px; line-height: 1.6; }
.cj-scope-card .cj-scope-radio { flex-basis: 17px; width: 17px; height: 17px; margin-right: 9px; }
.cj-scope-card:has(input:checked) .cj-scope-radio::after { inset: 3.5px; }
.cj-consents-fieldset { padding-top: 17px; border-top: 1px solid var(--cj-line); }
.cj-publish-consents { display: grid; gap: 7px; }
.cj-publish-consent { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: start; gap: 11px; min-height: 58px; padding: 11px 12px; border: 1px solid #e9e5dc; border-radius: 8px; background: #fff; cursor: pointer; }
.cj-publish-consent:hover, .cj-publish-consent:has(input:checked) { border-color: #c8cfc0; background: #fbfcf8; }
.cj-publish-consent>input, .cj-terms-check>input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cj-consent-checkmark, .cj-checkmark { position: relative; display: block; width: 19px; height: 19px; margin-top: 1px; border: 1px solid #aeb3a7; border-radius: 4px; background: #fff; }
.cj-publish-consent>input:checked+.cj-consent-checkmark, .cj-terms-check>input:checked+.cj-checkmark { border-color: var(--cj-green); background: var(--cj-green); }
.cj-publish-consent>input:checked+.cj-consent-checkmark::after, .cj-terms-check>input:checked+.cj-checkmark::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cj-publish-consent>input:focus-visible+.cj-consent-checkmark, .cj-terms-check>input:focus-visible+.cj-checkmark { outline: 3px solid #566a5370; outline-offset: 3px; }
.cj-publish-consent-copy { display: grid; gap: 2px; min-width: 0; }
.cj-publish-consent-copy strong { font-size: 12px; }
.cj-publish-consent-copy>span { color: var(--cj-muted); font-size: 11px; line-height: 1.65; }

.cj-buyer-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.cj-field { display: block; min-width: 0; color: var(--cj-ink); font-size: 12px; font-weight: 700; }
.cj-field>span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cj-field i { color: var(--cj-accent); font-size: 10px; font-style: normal; font-weight: 500; }
.cj-field input { display: block; width: 100%; height: 50px; min-width: 0; margin-top: 8px; padding: 0 13px; border: 1px solid #d9d5cb; border-radius: 8px; background: #fff; color: var(--cj-ink); font-size: 16px; font-weight: 400; }
.cj-field input::placeholder { color: #a2a49b; opacity: 1; }
.cj-field input:focus { border-color: var(--cj-green); outline: 3px solid #566a5324; }
.cj-email-note { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; padding: 11px 13px; border-radius: 8px; background: #f1f3ed; color: #576451; font-size: 11px; }
.cj-email-note>span { font-size: 15px; }

.cj-contract { padding: 21px 24px; border: 1px solid #e3d6c7; border-radius: 11px; background: #f5f0e8; }
.cj-contract h2 { margin: 0 0 9px; font-size: 14px; }
.cj-contract>p { margin: 0; color: #555d54; font-size: 12px; line-height: 1.8; }
.cj-legal-links { display: flex; flex-wrap: wrap; gap: 7px 15px; margin-top: 11px; }
.cj-legal-links a { color: #58694f; font-size: 10px; text-underline-offset: 3px; }
.cj-legal-links a:hover { color: var(--cj-accent); }
.cj-terms-check { display: flex; align-items: center; gap: 11px; width: fit-content; min-height: 46px; margin-top: 12px; cursor: pointer; }
.cj-terms-check strong { font-size: 12px; }
.cj-submit-area { padding: 5px 6px 0; text-align: center; }
.cj-submit-hint { margin: 0 0 10px; color: var(--cj-muted); font-size: 11px; }
.cj-primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 12px 23px; border: 1px solid var(--cj-accent); border-radius: 8px; background: var(--cj-accent); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.cj-primary-button:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--cj-accent-hover); background: var(--cj-accent-hover); box-shadow: 0 5px 14px #78311e20; }
.cj-primary-button:disabled { cursor: not-allowed; opacity: .56; }
.cj-submit-area>#purchase-btn { width: min(100%, 450px); }
.cj-submit-area>#purchase-btn>span, .cj-primary-button>span { font: 500 19px/1 "DM Sans", sans-serif; }
.cj-error { max-width: 540px; margin: 11px auto 0; padding: 11px 13px; border: 1px solid #e6b4ac; border-radius: 8px; background: #fff1ee; color: var(--cj-error); font-size: 12px; text-align: left; }
.cj-trust-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; max-width: 730px; margin: 17px auto 0; padding: 15px 0 0; border-top: 1px solid var(--cj-line); list-style: none; text-align: left; }
.cj-trust-list li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.cj-trust-list li>span { color: var(--cj-green); font-size: 13px; }
.cj-trust-list li div { display: grid; min-width: 0; }
.cj-trust-list strong { font-size: 10px; line-height: 1.55; }
.cj-trust-list small { margin-top: 2px; color: var(--cj-muted); font-size: 10px; line-height: 1.55; }

.cj-summary { position: sticky; top: 102px; overflow: hidden; border: 1px solid var(--cj-line); border-radius: var(--cj-radius); background: var(--cj-surface); box-shadow: 0 6px 24px #363a3010; }
.cj-summary-preview { display: flex; align-items: center; gap: 17px; padding: 18px 19px; border-bottom: 1px solid var(--cj-line); background: #f2f0e8; }
.cj-preview-art { position: relative; flex: 0 0 104px; width: 104px; height: 76px; }
.cj-preview-sticker { position: absolute; width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 3px 4px #3c38201c); }
.cj-preview-sticker--one { left: 0; top: 2px; transform: rotate(-9deg); }
.cj-preview-sticker--two { left: 30px; top: 14px; z-index: 1; transform: rotate(8deg); }
.cj-preview-sticker--three { right: 0; top: 0; transform: rotate(9deg); }
.cj-summary-preview>p { display: grid; gap: 4px; margin: 0; }
.cj-summary-preview>p span { color: var(--cj-green); font: 600 9px "DM Sans", sans-serif; letter-spacing: .14em; }
.cj-summary-preview>p strong { font-size: 12px; }
.cj-summary-content { padding: 20px 21px 17px; }
.cj-summary-content h2 { margin: 0 0 17px; font-size: 16px; }
.cj-summary-plan { display: grid; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--cj-line); }
.cj-summary-plan strong { font-size: 13px; }
.cj-summary-plan span { color: var(--cj-muted); font-size: 10px; }
.cj-summary-lines { display: grid; gap: 13px; margin: 14px 0; }
.cj-summary-lines>div { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0,1.4fr); align-items: start; gap: 8px; }
.cj-summary-lines dt { color: var(--cj-muted); font-size: 10px; }
.cj-summary-lines dd { min-width: 0; margin: 0; font-size: 10px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.cj-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--cj-line); }
.cj-summary-total>span { font-size: 12px; font-weight: 700; }
.cj-summary-total small { color: var(--cj-muted); font-size: 10px; font-weight: 400; }
.cj-summary-total>strong { color: var(--cj-accent); font: 700 26px/1.2 "DM Sans", "Noto Sans JP", sans-serif; letter-spacing: -.04em; white-space: nowrap; }
.cj-price-note { margin: 9px 0 0; color: var(--cj-muted); font-size: 9px; }
.cj-summary-secure { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--cj-line); background: #f8f7f2; color: var(--cj-muted); font-size: 10px; }
.cj-summary-secure>span { color: var(--cj-green); font-size: 16px; }

.cj-verify-card { scroll-margin-top: 100px; padding: 38px clamp(22px, 6vw, 54px); border: 1px solid var(--cj-line); border-radius: 15px; background: var(--cj-surface); box-shadow: 0 8px 32px #363a300d; text-align: center; }
.cj-purchase-main[data-purchase-step="2"] #purchase-form { display: none; }
.cj-purchase-main[data-purchase-step="2"] .cj-verify-card { animation: cj-verify-arrive .18s ease-out both; }
@keyframes cj-verify-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.cj-verify-card .cj-eyebrow { margin-bottom: 18px; }
.cj-verify-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; background: #edf0e8; color: var(--cj-green); font-size: 24px; }
.cj-verify-card h2 { margin: 0; font-size: clamp(20px, 3vw, 26px); }
.cj-verify-copy { margin: 13px 0 22px; color: var(--cj-muted); font-size: 13px; }
.cj-verify-copy strong { display: inline-block; max-width: 100%; color: var(--cj-ink); overflow-wrap: anywhere; }
.cj-verify-row { display: flex; justify-content: center; gap: 10px; width: min(100%, 465px); margin: auto; }
.cj-verify-row input { width: min(100%, 262px); min-width: 0; height: 54px; padding: 0 14px; border: 1px solid #d7d3c9; border-radius: 8px; background: #fff; font: 600 22px "DM Sans", sans-serif; letter-spacing: .2em; text-align: center; }
.cj-verify-row input:focus { border-color: var(--cj-green); outline: 3px solid #566a5324; }
.cj-verify-row .cj-primary-button { flex: 1; min-width: 135px; }
.cj-verify-status { width: min(100%, 465px); margin: 13px auto 0; padding: 10px 12px; border-radius: 7px; background: #fff1ee; color: var(--cj-error); font-size: 11px; text-align: left; overflow-wrap: anywhere; }
.cj-verify-status[data-kind="success"] { background: #edf3e8; color: #435b3e; }
.cj-resend-area { display: grid; justify-items: center; gap: 2px; margin: 21px 0; color: var(--cj-muted); font-size: 11px; }
.cj-text-button { min-height: 44px; padding: 5px 10px; border: 0; background: transparent; color: #52674d; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cj-text-button:hover { color: var(--cj-accent); }
.cj-resend-area small { font-size: 10px; }
.cj-verified-note { display: none; align-items: center; justify-content: center; gap: 8px; margin: 21px 0 10px; color: #486347; font-size: 13px; font-weight: 700; }
.cj-verified-note>span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e6eee0; }
.cj-purchase-page.is-verified .cj-verified-note { display: flex; }
.cj-purchase-page.is-verified .cj-resend-area { display: none; }
.cj-checkout-button { display: none; width: min(100%, 365px); }
.cj-purchase-page.is-verified .cj-checkout-button { display: inline-flex; }
.cj-verify-secure { margin: 15px 0 0; color: var(--cj-muted); font-size: 10px; }

.cj-purchase-page .cj-mobile-bar { display: none; }
.cj-footer { border-top: 1px solid #e5e0d6; background: #f1efe8; }
.cj-footer-inner { display: flex; align-items: center; gap: 25px; width: min(100% - 64px, 1220px); min-height: 78px; margin: auto; }
.cj-footer-brand { flex: 0 0 auto; color: var(--cj-ink); font: 700 18px "DM Sans", sans-serif; letter-spacing: -1px; text-decoration: none; }
.cj-footer-inner nav { display: flex; flex: 1; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.cj-footer-inner nav a { color: var(--cj-muted); font-size: 10px; text-decoration: none; }
.cj-footer-inner nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cj-footer-inner>small { color: var(--cj-muted); font-size: 10px; white-space: nowrap; }

.cj-message-main { display: grid; place-items: center; min-height: min(68vh, 700px); padding-block: 70px; }
.cj-message-card { width: min(100%, 660px); padding: clamp(28px, 6vw, 55px); border: 1px solid var(--cj-line); border-radius: 16px; background: var(--cj-surface); box-shadow: 0 10px 35px #363a300d; text-align: center; }
.cj-message-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 19px; border-radius: 50%; background: #edf0e8; color: var(--cj-accent); font-size: 21px; }
.cj-message-card .cj-eyebrow { margin-bottom: 10px; }
.cj-message-card h1 { margin: 0; font-size: clamp(21px, 4vw, 29px); line-height: 1.5; }
.cj-message-card h1+p { margin-top: 13px; }
.cj-message-card p { color: #586158; font-size: 13px; }
.cj-message-card .cj-muted { margin-top: 8px; color: var(--cj-muted); font-size: 11px; }
.cj-message-warning { margin: 16px 0; padding: 11px 13px; border-radius: 7px; background: #fff1ee; color: var(--cj-error) !important; }
.cj-message-link { margin-top: 17px; }
.cj-message-card noscript p { margin-top: 12px; }

@media (max-width: 1100px) {
  .cj-header-inner { padding-inline: 32px; }
  .cj-purchase-layout { grid-template-columns: minmax(0,1fr) 320px; gap: 24px; }
  .cj-section { padding-inline: 22px; }
  .cj-plan-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cj-plan-card { min-height: 133px; }
}

@media (max-width: 767px) {
  .customer-journey { font-size: 14px; }
  .cj-header-inner { min-height: 62px; padding-inline: 18px; }
  .cj-brand { gap: 7px; font-size: 21px; }
  .cj-brand-mark { width: 26px; height: 26px; font-size: 17px; }
  .cj-header-right { gap: 0; }
  .cj-secure { display: none; }
  .cj-back { font-size: 10px; white-space: nowrap; }
  .cj-main { width: min(100% - 32px, 600px); }
  .cj-purchase-main { padding: 27px 0 42px; }
  .cj-page-intro { display: block; margin-bottom: 19px; }
  .cj-page-intro h1 { font-size: 27px; }
  .cj-lead { max-width: 34em; font-size: 12px; }
  .cj-intro-note { display: none; }
  .cj-stepper { padding: 12px 13px; margin-bottom: 16px; }
  .cj-step-counter { margin-bottom: 7px; font-size: 10px; }
  .cj-stepper li { gap: 6px; font-size: 10px; }
  .cj-stepper li>span { flex-basis: 23px; width: 23px; height: 23px; font-size: 10px; }
  .cj-stepper li::after { left: 25px; width: calc(100% - 31px); }
  .cj-stepper li>b { padding-right: 6px; }
  .cj-purchase-layout { display: flex; flex-direction: column; gap: 16px; }
  .cj-summary { position: static; order: 0; width: 100%; border-radius: 11px; box-shadow: none; }
  .cj-summary-preview, .cj-summary-secure { display: none; }
  .cj-summary-content { padding: 13px 15px; }
  .cj-summary-content h2 { margin-bottom: 9px; font-size: 13px; }
  .cj-summary-plan { padding-bottom: 9px; }
  .cj-summary-plan strong { font-size: 11px; }
  .cj-summary-plan span { font-size: 10px; }
  .cj-summary-lines { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; margin: 10px 0; }
  .cj-summary-lines>div { display: flex; flex-direction: column; gap: 1px; }
  .cj-summary-lines dt { font-size: 10px; }
  .cj-summary-lines dd { text-align: left; font-size: 10px; line-height: 1.5; }
  .cj-summary-total { padding-top: 9px; }
  .cj-summary-total>span { font-size: 10px; }
  .cj-summary-total>strong { font-size: 20px; }
  .cj-price-note { display: none; }
  .cj-primary-column { order: 1; width: 100%; }
  .cj-form { gap: 13px; }
  .cj-section { padding: 19px 16px 20px; border-radius: 11px; }
  .cj-section-heading { gap: 10px; margin-bottom: 16px; }
  .cj-section-heading>span { flex-basis: 27px; width: 27px; height: 27px; font-size: 10px; }
  .cj-section-heading h2 { font-size: 16px; }
  .cj-section-heading p { font-size: 10px; }
  .cj-plan-grid { grid-template-columns: minmax(0,1fr); gap: 9px; }
  .cj-plan-card { min-height: 94px; padding: 13px 13px; }
  .cj-plan-body { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 3px 8px; }
  .cj-plan-name { grid-column: 1; font-size: 13px; }
  .cj-plan-price { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 22px; }
  .cj-plan-details { grid-column: 1; margin-top: 2px; }
  .cj-plan-details span { font-size: 10px; }
  .cj-extra-option { grid-template-columns: 29px minmax(0,1fr) auto; gap: 0 9px; min-height: 73px; padding: 10px 11px; }
  .cj-extra-copy strong { font-size: 12px; }
  .cj-extra-copy>span { font-size: 11px; }
  .cj-extra-price { font-size: 12px; }
  .cj-extra-note { font-size: 10px; }
  .cj-publish-included { gap: 9px; padding: 11px 10px; }
  .cj-publish-included strong { font-size: 11px; }
  .cj-publish-included p { font-size: 11px; }
  .cj-included-fee { font-size: 12px; }
  .cj-included-fee small { font-size: 10px; }
  .cj-scope-fieldset, .cj-consents-fieldset { margin-top: 15px; }
  .cj-scope-grid { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .cj-scope-card { min-height: 65px; padding: 10px; }
  .cj-scope-card strong { font-size: 12px; }
  .cj-scope-card small { font-size: 11px; }
  .cj-scope-fieldset legend, .cj-consents-fieldset legend { font-size: 12px; }
  .cj-scope-fieldset legend span, .cj-consents-fieldset legend span { font-size: 10px; }
  .cj-publish-consents { gap: 6px; }
  .cj-publish-consent { grid-template-columns: 19px minmax(0,1fr); gap: 9px; min-height: 58px; padding: 10px; }
  .cj-publish-consent-copy strong { font-size: 12px; }
  .cj-publish-consent-copy>span { font-size: 11px; line-height: 1.7; }
  .cj-buyer-grid { grid-template-columns: minmax(0,1fr); gap: 13px; }
  .cj-field { font-size: 11px; }
  .cj-field input { height: 50px; margin-top: 6px; font-size: 16px; }
  .cj-email-note { align-items: flex-start; padding: 10px 11px; font-size: 11px; }
  .cj-contract { padding: 17px 15px; }
  .cj-contract h2 { font-size: 13px; }
  .cj-contract>p { font-size: 11px; }
  .cj-legal-links { gap: 7px 12px; }
  .cj-legal-links a { font-size: 10px; }
  .cj-terms-check { min-height: 48px; }
  .cj-terms-check strong { font-size: 11px; }
  .cj-submit-area { padding: 4px 0 0; }
  .cj-submit-hint { font-size: 10px; }
  .cj-submit-area>#purchase-btn { display: none; }
  .cj-trust-list { gap: 5px; margin-top: 14px; padding-top: 12px; }
  .cj-trust-list li { gap: 4px; }
  .cj-trust-list strong { font-size: 10px; }
  .cj-trust-list small { font-size: 10px; }
  .cj-verify-card { padding: 27px 17px; }
  .cj-verify-card h2 { font-size: 21px; }
  .cj-verify-copy { font-size: 11px; }
  .cj-verify-row { flex-direction: column; align-items: stretch; }
  .cj-verify-row input { width: 100%; height: 52px; font-size: 21px; }
  .cj-verify-row .cj-primary-button { min-height: 52px; }
  .cj-resend-area { margin: 15px 0; }
  .cj-purchase-page .cj-mobile-bar { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #ded9ce; background: #fffefaF2; box-shadow: 0 -6px 22px #303a3312; backdrop-filter: blur(14px); }
  .cj-mobile-bar>div { display: grid; gap: 1px; min-width: 0; }
  .cj-mobile-bar>div>span { color: var(--cj-muted); font-size: 10px; line-height: 1.3; }
  .cj-mobile-bar>div small { font-size: 10px; }
  .cj-mobile-bar>div strong { color: var(--cj-accent); font: 700 19px/1.3 "DM Sans", "Noto Sans JP", sans-serif; white-space: nowrap; }
  .cj-mobile-bar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 1 230px; min-width: 150px; min-height: 52px; padding: 9px 13px; border: 1px solid var(--cj-accent); border-radius: 8px; background: var(--cj-accent); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
  .cj-mobile-bar button>span { font: 500 17px "DM Sans", sans-serif; }
  .cj-mobile-bar button:disabled { opacity: .6; }
  .cj-purchase-main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .cj-footer-inner { display: block; width: min(100% - 32px, 600px); padding: 22px 0 100px; }
  .cj-footer-brand { display: inline-block; margin-bottom: 12px; }
  .cj-footer-inner nav { justify-content: flex-start; gap: 8px 14px; }
  .cj-footer-inner nav a { font-size: 10px; }
  .cj-footer-inner>small { display: block; margin-top: 14px; }
  .cj-message-main { min-height: 65vh; padding-block: 45px; }
}

@media (max-width: 390px) {
  .cj-main { width: min(100% - 24px, 600px); }
  .cj-header-inner { padding-inline: 12px; }
  .cj-brand { gap: 5px; font-size: 19px; }
  .cj-back { font-size: 10px; }
  .cj-section { padding-inline: 13px; }
  .cj-extra-option { grid-template-columns: 27px minmax(0,1fr) auto; gap: 0 7px; padding-inline: 9px; }
  .cj-extra-price { font-size: 11px; }
  .cj-trust-list { grid-template-columns: 1fr; gap: 8px; max-width: 260px; }
  .cj-trust-list li { gap: 8px; }
  .cj-trust-list strong { font-size: 10px; }
  .cj-trust-list small { font-size: 10px; }
  .cj-mobile-bar { padding-inline: 11px; }
  .cj-mobile-bar button { min-width: 140px; padding-inline: 10px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .customer-journey *, .customer-journey *::before, .customer-journey *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------------------------------------------------------------- 顧客注文後 Journey (/o) */

.cj-order-page { --cj-shadow: 0 8px 28px #303a3310; }
.cj-order-page .cj-header-note { color: var(--cj-green); font-weight: 600; }
.cj-order-page .cj-header-note > span { display: none; }
.cj-order-main { width: min(100% - 64px, 1120px); margin: 0 auto; padding: 37px 0 88px; }
.cj-order-intro { align-items: flex-end; margin-bottom: 25px; }
.cj-order-intro h1 { font-size: clamp(26px, 3vw, 34px); }
.cj-order-meta { display: grid; justify-items: end; gap: 5px; flex: 0 0 auto; }
.cj-order-code { margin: 0; color: var(--cj-muted); font-size: 11px; }
.cj-order-code strong { margin-left: 5px; color: var(--cj-ink); font: 600 12px "DM Sans", "Noto Sans JP", sans-serif; letter-spacing: .04em; }
.cj-draft-status { min-height: 19px; margin: 0; color: var(--cj-muted); font-size: 10px; }
.cj-draft-status:not(:empty) { padding: 2px 8px; border-radius: 99px; background: #eeece3; }
.cj-order-page .cj-muted, .cj-order-page .muted { color: var(--cj-muted); }
.cj-order-page .small { font-size: 12px; line-height: 1.75; }
.cj-order-form { display: flex; flex-direction: column; gap: 16px; }
.cj-order-card { min-width: 0; padding: 25px 28px 28px; border: 1px solid var(--cj-line); border-radius: var(--cj-radius); background: var(--cj-surface); box-shadow: 0 3px 12px #303a3307; }
.cj-order-card > :last-child { margin-bottom: 0; }
.cj-order-card-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 15px; font-size: 19px; line-height: 1.45; font-weight: 700; scroll-margin-top: 96px; }
.cj-step-number { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #edf0e8; color: var(--cj-green); font: 700 11px "DM Sans", sans-serif; letter-spacing: .03em; }
.cj-order-page .cj-completed-actions .panel { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--cj-ink); box-shadow: none; }
.cj-order-page .pet-step { scroll-margin-top: 96px; }
.cj-order-page input[type="text"], .cj-order-page input[type="password"], .cj-order-page select, .cj-order-page textarea {
  display: block; width: 100%; min-width: 0; min-height: 48px; margin: 7px 0 0; padding: 10px 12px;
  border: 1px solid #d9d5cb; border-radius: 8px; background: var(--cj-white); color: var(--cj-ink); font-size: 16px; line-height: 1.5;
}
.cj-order-page textarea { min-height: 100px; resize: vertical; }
.cj-order-page input::placeholder, .cj-order-page textarea::placeholder { color: #92968d; opacity: 1; }
.cj-order-page input:focus, .cj-order-page select:focus, .cj-order-page textarea:focus { border-color: var(--cj-green); outline: 3px solid #566a5324; }
.cj-form-field { display: block; min-width: 0; margin: 13px 0 0; color: var(--cj-ink); font-size: 12px; font-weight: 700; }
.cj-form-field > small { margin-left: 5px; color: var(--cj-muted); font-size: 10px; font-weight: 400; }
.cj-required { float: right; color: var(--cj-accent); font-size: 10px; font-weight: 600; }
.cj-order-page .btn, .cj-order-page button:not(.style-chip):not(.pick-cell) { min-height: 44px; border: 1px solid var(--cj-line); border-radius: 8px; background: var(--cj-white); color: var(--cj-ink); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.cj-order-page .btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; text-decoration: none; }
.cj-order-page .btn:hover, .cj-order-page button:not(:disabled):hover { border-color: #c48b7c; }
.cj-order-page .btn.primary, .cj-order-page button.primary { border-color: var(--cj-accent); background: var(--cj-accent); color: #fff; }
.cj-order-page .btn.primary:hover, .cj-order-page button.primary:hover { border-color: var(--cj-accent-hover); background: var(--cj-accent-hover); }
.cj-order-page .btn.large { min-height: 52px; padding-inline: 22px; font-size: 13px; }
.cj-order-page .btn.small { min-height: 40px; padding: 6px 11px; font-size: 11px; }
.cj-order-page .btn:disabled, .cj-order-page button:disabled { cursor: not-allowed; opacity: .48; }
.cj-order-page .flash-error { margin: 10px 0 0; padding: 10px 12px; border: 1px solid #e6b4ac; border-radius: 8px; background: #fff1ee; color: var(--cj-error); font-size: 12px; }
.cj-order-page blockquote.consent { margin: 15px 0 10px; padding: 15px 17px; border-left: 3px solid #c6cbbd; border-radius: 0 8px 8px 0; background: #f3f2ec; color: #586158; font-size: 12px; line-height: 1.85; }
.cj-order-page .consent-check { display: flex; align-items: center; gap: 10px; min-height: 48px; width: fit-content; margin: 6px 0 0; font-size: 13px; font-weight: 700; cursor: pointer; }
.cj-order-page .consent-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--cj-green); }

/* 旧 child_16 フォームも同じカードと入力言語で表示する。 */
.cj-child-form { gap: 16px; }
.cj-child-form .photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.cj-child-form .slot { min-width: 0; padding: 12px; border: 1px dashed #d4cfc3; border-radius: 10px; background: #fff; }
.cj-child-form .slot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.cj-child-form .slot-status { color: var(--cj-muted); font-size: 10px; }
.cj-child-form .slot-status.saved { color: var(--cj-green); font-weight: 700; }
.cj-child-form .slot-preview img { width: 100%; max-height: 180px; margin-top: 8px; border-radius: 7px; background: var(--cj-wash); object-fit: contain; }
.cj-child-form .slot-file { width: 100%; min-height: 44px; margin-top: 8px; font-size: 10px; }
.cj-child-form .slot-file::file-selector-button { min-height: 38px; margin-right: 7px; padding: 5px 9px; border: 1px solid var(--cj-line); border-radius: 6px; background: #f8f7f2; color: var(--cj-ink); cursor: pointer; }
.cj-child-form .slot-error { margin: 5px 0 0; color: var(--cj-error); font-size: 11px; }
.cj-child-form .style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; margin-top: 16px; }
.cj-child-form .phrase-editor { margin-top: 15px; }
.cj-note-field { margin-top: 14px; }
.cj-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 4px 2px 0; }
.cj-form-actions #submit-btn { min-width: 220px; }
.cj-form-actions #form-error { flex-basis: 100%; }

/* Pet wizard: desktop sidebar + current step card. */
.cj-pet-form { display: grid; grid-template-columns: 225px minmax(0, 1fr); align-items: start; column-gap: 25px; row-gap: 14px; }
.cj-order-step-nav { position: sticky; top: 98px; grid-column: 1; grid-row: 1 / span 8; display: grid; gap: 7px; align-content: start; margin: 0; padding: 12px; border: 1px solid var(--cj-line); border-radius: 12px; background: #fffefa; list-style: none; }
.cj-order-step-nav .pet-step-nav-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--cj-muted); font-size: 12px; line-height: 1.4; }
.cj-order-step-nav .pet-step-nav-item .no { display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px; border: 1px solid var(--cj-line); border-radius: 50%; background: #fff; color: var(--cj-soft-muted); font: 600 10px "DM Sans", sans-serif; }
.cj-order-step-nav .pet-step-nav-item.active, .cj-order-step-nav .pet-step-nav-item[aria-current="step"] { border-color: #ead2ca; background: #fff7f3; color: var(--cj-accent); font-weight: 700; }
.cj-order-step-nav .pet-step-nav-item.active .no, .cj-order-step-nav .pet-step-nav-item[aria-current="step"] .no { border-color: var(--cj-accent); background: var(--cj-accent); color: #fff; }
.cj-order-step-nav .pet-step-nav-item.done { color: var(--cj-green); }
.cj-order-step-nav .pet-step-nav-item.done .no { border-color: #cbd3c5; background: #edf0e8; color: var(--cj-green); }
.cj-pet-form > .pet-step, .cj-pet-form > .pet-step-actions, .cj-pet-form > #form-error { grid-column: 2; min-width: 0; }
.cj-order-page .pet-step-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0; }
.cj-order-page .pet-step-actions .btn { min-width: 116px; min-height: 48px; }
.cj-order-page .pet-step-actions #submit-btn { min-width: 210px; }
.cj-order-page #form-error { grid-column: 2; }
.pet-count-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 17px 0 14px; }
.pet-count-choice { position: relative; display: flex; align-items: center; gap: 11px; min-height: 76px; padding: 12px 14px; border: 1px solid #dedbd1; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.pet-count-choice:has(input:checked) { border-color: var(--cj-accent); background: #fff8f4; box-shadow: inset 0 0 0 1px var(--cj-accent); }
.pet-count-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pet-count-choice > span:last-child { display: grid; gap: 2px; }
.pet-count-choice strong { font-size: 14px; }
.pet-count-choice small { color: var(--cj-muted); font-size: 10px; }
.cj-count-radio { position: relative; display: block; flex: 0 0 19px; width: 19px; height: 19px; border: 1.5px solid #bcbeb4; border-radius: 50%; background: #fff; }
.pet-count-choice:has(input:checked) .cj-count-radio { border-color: var(--cj-accent); }
.pet-count-choice:has(input:checked) .cj-count-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--cj-accent); }
.pet-count-choice input:focus-visible + .cj-count-radio { outline: 3px solid #c44c3180; outline-offset: 3px; }
.cj-order-page .pet-count-note { margin: 0 0 13px; padding: 10px 13px; border-left: 3px solid #d6c8a8; border-radius: 0 7px 7px 0; background: #f7f3e9; }
.cj-order-page .pet-fields { display: grid; gap: 1px; min-width: 0; margin: 12px 0 0; padding: 15px 16px 16px; border: 1px solid var(--cj-line); border-radius: 10px; background: #fffefa; }
.pet-fields legend { padding: 0 7px; color: var(--cj-green); font-size: 12px; font-weight: 700; }
.cj-pet-field-no { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-right: 5px; border-radius: 50%; background: #edf0e8; font: 600 9px "DM Sans", sans-serif; }
.cj-order-page .pet-count-note, .cj-order-page #pet-photo-two-pet-note { font-size: 11px; }

/* Photo upload and dynamically rendered cards */
.cj-photo-upload { display: grid; justify-items: center; gap: 2px; min-height: 178px; margin: 17px 0 10px; padding: 18px; border: 1px dashed #c9c4b7; border-radius: 12px; background: #f7f5ee; text-align: center; cursor: pointer; }
.cj-photo-upload-plus { display: grid; place-items: center; width: 39px; height: 39px; margin-bottom: 2px; border-radius: 50%; background: #e9e9dd; color: var(--cj-green); font: 400 27px/1 "DM Sans", sans-serif; }
.cj-photo-upload strong { font-size: 13px; }
.cj-photo-upload small { color: var(--cj-muted); font-size: 10px; }
.cj-photo-upload input { width: min(100%, 330px); min-height: 42px; margin-top: 9px; font-size: 10px; }
.cj-photo-upload input::file-selector-button { min-height: 38px; margin-right: 8px; padding: 5px 12px; border: 1px solid #d5d0c4; border-radius: 7px; background: #fffefa; color: var(--cj-ink); font: 600 11px "Noto Sans JP", sans-serif; cursor: pointer; }
.cj-order-page #pet-photo-progress { min-height: 22px; margin: 8px 0; color: var(--cj-muted); font-size: 11px; }
.cj-order-page #pet-photo-cards.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.pet-photo-card { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 11px; border: 1px solid var(--cj-line); border-radius: 10px; background: #fff; }
.pet-photo-card.unassigned { border-color: #d9b868; background: #fffaf0; }
.pet-photo-card.unassignable { border-color: #ddaca5; background: #fff7f6; }
.pet-photo-card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; }
.pet-photo-card img { width: 100%; max-height: 205px; aspect-ratio: 1; border-radius: 7px; background: var(--cj-wash); object-fit: contain; }
.pet-photo-card .card-warn { margin: 0; color: var(--cj-error); font-size: 10px; line-height: 1.6; }
.pet-photo-card .photo-assignment { margin-top: 0; font-size: 12px; }

/* Sheet subject assignment */
.cj-sheet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 16px; }
.cj-sheet-card { min-width: 0; padding: 15px; border: 1px solid var(--cj-line); border-radius: 10px; background: #fff; }
.cj-sheet-card h3 { margin: 0; font-size: 13px; }
.cj-sheet-card > p { margin: 3px 0 0; color: var(--cj-muted); font-size: 10px; }
.cj-sheet-card .cj-form-field { margin-top: 12px; }

/* Style selection and filters */
.style-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0; }
.cj-order-page .style-chip { min-height: 42px; padding: 7px 14px; border: 1px solid #d8d5ca; border-radius: 99px; background: #fff; color: var(--cj-muted); font-size: 11px; cursor: pointer; }
.cj-order-page .style-chip.active, .cj-order-page .style-chip[aria-pressed="true"] { border-color: var(--cj-green); background: var(--cj-green); color: #fff; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cj-order-page .pet-style-card { display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 0; }
.cj-order-page .pet-style-card[hidden] { display: none; }
.cj-order-page .style-item { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; height: 100%; padding: 9px; border: 1px solid var(--cj-line); border-radius: 10px; background: #fff; color: var(--cj-ink); font-size: 11px; line-height: 1.5; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.cj-order-page .style-item input[type="radio"] { position: absolute; top: 10px; left: 10px; width: 1px; height: 1px; margin: 0; opacity: 0; }
.cj-order-page .style-item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 7px; background: var(--cj-wash); object-fit: cover; }
.cj-order-page .style-item:has(input:checked) { border-color: var(--cj-accent); background: #fff8f4; box-shadow: inset 0 0 0 1px var(--cj-accent), 0 4px 13px #c44c3115; }
.cj-order-page .style-item:has(input:checked)::before { position: absolute; z-index: 1; top: 15px; right: 15px; padding: 4px 7px; border-radius: 99px; background: var(--cj-accent); color: #fff; content: "✓ 選択中"; font-size: 9px; font-weight: 700; }
.cj-order-page .style-item:has(input:focus-visible) { outline: 3px solid #c44c3180; outline-offset: 3px; }
.cj-order-page .style-preview-btn { min-height: 42px; padding: 6px 10px; border: 1px solid var(--cj-line); border-radius: 7px; background: #fff; color: var(--cj-green); font-size: 10px; cursor: pointer; }
.cj-child-style-grid .style-item { min-height: 100%; }
.cj-order-page .pet-style-dialog { box-sizing: border-box; width: min(760px, calc(100vw - 24px)); max-width: 760px; max-height: calc(100dvh - 24px); margin: auto; padding: 17px; overflow: auto; border: 1px solid var(--cj-line); border-radius: 14px; background: var(--cj-surface); color: var(--cj-ink); box-shadow: 0 18px 55px #151a1680; }
.cj-order-page .pet-style-dialog::backdrop { background: #202821b8; backdrop-filter: blur(3px); }
.pet-style-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pet-style-dialog-header h2 { margin: 0 0 12px; font-size: 16px; }
.cj-order-page .style-dialog-close { flex: 0 0 auto; min-width: 64px; min-height: 42px; padding: 6px 10px; }
.pet-style-dialog-image-area { display: flex; align-items: center; justify-content: center; min-height: 160px; max-height: calc(100dvh - 195px); overflow: hidden; touch-action: pan-y; }
.pet-style-dialog-image { display: block; width: auto; max-width: 100%; max-height: min(68dvh, 640px); border-radius: 8px; object-fit: contain; }
.pet-style-dialog-footer { margin-top: 12px; }
.pet-style-dialog-position { display: block; margin-bottom: 8px; color: var(--cj-muted); font-size: 11px; text-align: center; }
.pet-style-dialog-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pet-style-dialog-nav button { min-height: 46px; padding: 7px 11px; }
.pet-style-dialog-nav button:disabled { cursor: not-allowed; opacity: .42; }
.cj-order-page .pet-style-dialog-nav .primary { background: var(--cj-accent); color: #fff; }
.cj-order-page .confirm-style-preview-container { margin-top: 8px; }
.cj-order-page .confirm-style-preview-image { display: block; width: 118px; max-width: 100%; margin: 7px 0; border-radius: 8px; background: var(--cj-wash); }
.cj-order-page .confirm-style-preview-btn { width: auto; }

/* Shared phrase editor */
.phrase-editor-intro { margin: 0; color: var(--cj-muted); font-size: 12px; line-height: 1.8; }
.phrase-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.phrase-editor-actions .btn { min-height: 44px; }
.phrase-slot-list { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.phrase-slot { display: flex; align-items: center; gap: 9px; min-width: 0; }
.phrase-slot-no { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; background: #edf0e8; color: var(--cj-green); font: 700 10px "DM Sans", sans-serif; }
.cj-order-page .phrase-slot-edit { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 48px; padding: 7px 13px; border: 1px solid var(--cj-line); border-radius: 8px; background: #fff; color: var(--cj-ink); text-align: left; cursor: pointer; }
.phrase-slot-edit:hover, .phrase-slot-edit:focus-visible { border-color: #c48b7c; background: #fffaf7; }
.phrase-slot-text { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; }
.phrase-slot-action { flex: 0 0 auto; color: var(--cj-green); font-size: 11px; font-weight: 700; }
.cj-order-page .phrase-dialog { box-sizing: border-box; width: min(700px, calc(100vw - 32px)); max-width: 700px; max-height: min(88dvh, 820px); margin: auto; padding: 20px; overflow: auto; border: 1px solid var(--cj-line); border-radius: 15px; background: var(--cj-surface); color: var(--cj-ink); box-shadow: 0 18px 55px #151a1680; }
.phrase-dialog::backdrop { background: #202821b8; backdrop-filter: blur(3px); }
.phrase-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.phrase-dialog-header h2 { margin: 0; font-size: 17px; line-height: 1.5; }
.cj-order-page .phrase-dialog-close { flex: 0 0 auto; min-width: 66px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--cj-line); border-radius: 7px; background: #fff; color: var(--cj-ink); cursor: pointer; }
.phrase-suggestions h3, .phrase-bulk-section h3 { margin: 0 0 8px; font-size: 12px; }
.phrase-candidate-list { display: flex; flex-wrap: wrap; gap: 7px; }
.cj-order-page .phrase-candidate { min-height: 44px; padding: 8px 13px; border: 1px solid var(--cj-line); border-radius: 99px; background: #fff; color: var(--cj-ink); font-size: 12px; line-height: 1.45; cursor: pointer; }
.cj-order-page .phrase-candidate:hover, .cj-order-page .phrase-candidate:focus-visible { border-color: var(--cj-green); background: #f3f5ef; }
.phrase-custom-field { display: grid; gap: 6px; margin-top: 15px; padding: 13px; border: 1px solid var(--cj-line); border-radius: 10px; background: #fffefa; }
.phrase-custom-field label, .phrase-bulk-custom label { font-size: 12px; font-weight: 700; }
.cj-order-page .phrase-custom-field input, .cj-order-page .phrase-bulk-custom input { box-sizing: border-box; width: 100%; min-height: 46px; margin: 0; }
.phrase-custom-meta { margin: 0; color: var(--cj-muted); font-size: 10px; text-align: right; }
.phrase-dialog-error { margin: 4px 0 0; color: var(--cj-error); font-size: 11px; }
.phrase-dialog-error[hidden] { display: none; }
.phrase-custom-field .btn { justify-self: end; min-width: 144px; min-height: 44px; }
.cj-order-page .phrase-more-toggle { width: 100%; min-height: 46px; margin-top: 13px; border: 1px dashed #c6c8bc; border-radius: 8px; background: transparent; color: var(--cj-green); font-size: 12px; font-weight: 700; cursor: pointer; }
.phrase-groups { display: grid; gap: 14px; margin-top: 14px; }
.phrase-groups[hidden], .phrase-preset-confirm[hidden], .phrase-preset-list[hidden] { display: none; }
.phrase-group { display: grid; gap: 7px; }
.phrase-group h4 { margin: 0; color: var(--cj-green); font-size: 11px; }
.phrase-dialog-footer { display: flex; justify-content: flex-end; margin-top: 12px; }
.phrase-dialog-footer .btn { min-height: 44px; }
.phrase-bulk-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 11px 13px; border-radius: 9px; background: #f2f3ed; }
.phrase-bulk-count, .phrase-bulk-header strong { font: 700 15px "DM Sans", "Noto Sans JP", sans-serif; }
.phrase-bulk-header span { color: var(--cj-muted); font-size: 11px; text-align: right; }
.phrase-bulk-selected { display: flex; flex-wrap: wrap; gap: 7px; }
.cj-order-page .phrase-bulk-chip { min-height: 44px; padding: 7px 11px; border: 1px solid #dfc8c2; border-radius: 99px; background: #fff8f5; color: var(--cj-ink); font-size: 11px; cursor: pointer; }
.phrase-bulk-empty { display: inline-flex; align-items: center; min-height: 40px; padding: 5px 10px; border: 1px dashed #c5c5ba; border-radius: 99px; color: var(--cj-muted); font-size: 10px; }
.phrase-bulk-section { margin-top: 15px; }
.phrase-bulk-section .phrase-groups { max-height: 30vh; overflow: auto; padding: 2px; }
.phrase-bulk-custom { display: grid; gap: 5px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--cj-line); }
.phrase-bulk-custom > div { display: flex; align-items: center; gap: 7px; }
.phrase-bulk-custom .btn { min-width: 78px; min-height: 44px; }
.phrase-bulk-footer, .phrase-preset-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--cj-line); }
.phrase-bulk-footer .btn, .phrase-preset-footer .btn { min-height: 46px; }
.phrase-preset-list { display: grid; gap: 7px; }
.cj-order-page .phrase-preset-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 10px 13px; border: 1px solid var(--cj-line); border-radius: 9px; background: #fff; color: var(--cj-ink); text-align: left; cursor: pointer; }
.phrase-preset-option:hover, .phrase-preset-option:focus-visible { border-color: #c48b7c; background: #fffaf7; }
.phrase-preset-option > span:first-child { display: grid; gap: 3px; }
.phrase-preset-option strong { font-size: 12px; }
.phrase-preset-option small { color: var(--cj-muted); font-size: 10px; }
.phrase-preset-option > span:last-child { color: var(--cj-green); font-size: 20px; }
.phrase-preset-confirm p { margin: 8px 0; font-size: 12px; line-height: 1.7; }
.phrase-preset-confirm p + p { color: var(--cj-muted); font-size: 11px; }
.cj-order-page .request-note-field { display: block; margin-top: 17px; }
.pet-confirm-summary { margin: 15px 0 16px; padding: 5px 17px; border: 1px solid var(--cj-line); border-radius: 10px; background: #fff; font-size: 12px; }
.pet-confirm-summary .confirm-row { padding: 12px 0; border-bottom: 1px solid #eeebe3; }
.pet-confirm-summary .confirm-row:last-child { border-bottom: 0; }
.pet-confirm-summary .confirm-label { color: var(--cj-green); font-size: 10px; font-weight: 700; }
.pet-confirm-summary .confirm-value { margin-top: 4px; overflow-wrap: anywhere; }
.pet-confirm-summary .confirm-value p { margin: 0 0 5px; }
.pet-confirm-summary .confirm-phrases { margin: 8px 0 2px; padding-left: 22px; font-size: 11px; }
.pet-confirm-summary .confirm-phrases li { padding: 2px 0; }
.pet-confirm-summary .confirm-phrase-empty { color: var(--cj-muted); }
.pet-confirm-summary summary { color: var(--cj-green); font-size: 11px; font-weight: 700; cursor: pointer; }
.confirm-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin-top: 8px; }
.confirm-photo-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--cj-muted); font-size: 9px; text-align: center; }
.confirm-photo-item img { display: block; width: 100%; aspect-ratio: 1; border-radius: 7px; background: var(--cj-wash); object-fit: cover; }
.cj-pet-form .pet-step-actions .btn.primary { min-width: 188px; }

/* Candidate selection */
.cj-select-main { padding-bottom: 96px; }
.cj-select-bar { position: sticky; top: 76px; z-index: 8; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 17px; margin: 0 0 17px; padding: 13px 16px; border: 1px solid var(--cj-line); border-radius: 11px; background: #fffefaF2; box-shadow: 0 4px 16px #303a330d; backdrop-filter: blur(12px); }
.cj-select-count-wrap { display: grid; gap: 1px; }
.cj-select-count-wrap #pick-count { color: var(--cj-ink); font: 700 17px/1.3 "DM Sans", "Noto Sans JP", sans-serif; }
.cj-select-count-wrap #pick-remaining { color: var(--cj-muted); font-size: 10px; }
.cj-select-bar #select-btn { grid-column: 2; grid-row: 1 / span 2; min-width: 220px; min-height: 49px; }
.cj-select-bar #select-error { grid-column: 1 / -1; margin: 3px 0 0; }
.pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.cj-order-page .pick-cell { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 100%; margin: 0; padding: 9px; border: 1px solid var(--cj-line); border-radius: 11px; background: var(--cj-surface); color: var(--cj-ink); text-align: left; cursor: pointer; box-shadow: 0 3px 10px #303a3308; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; }
.cj-order-page .pick-cell:hover { border-color: #c48b7c; transform: translateY(-2px); }
.cj-order-page .pick-cell img { display: block; width: 100%; aspect-ratio: 1; border-radius: 7px; background: #f2f0e8; object-fit: contain; }
.pick-cell-number { margin-top: 8px; color: var(--cj-green); font: 600 9px "DM Sans", sans-serif; letter-spacing: .08em; }
.pick-cell-phrase { display: block; min-height: 2.7em; margin-top: 2px; color: var(--cj-ink); font-size: 11px; font-weight: 600; line-height: 1.45; }
.cj-order-page .pick-cell.picked, .cj-order-page .pick-cell[aria-pressed="true"] { border-color: var(--cj-accent); background: #fff7f3; box-shadow: inset 0 0 0 1px var(--cj-accent), 0 5px 15px #c44c3118; }
.cj-order-page .pick-cell.picked::after { content: "✓ 選択中"; position: absolute; top: 15px; right: 15px; padding: 5px 8px; border-radius: 99px; background: var(--cj-accent); color: #fff; font-size: 9px; font-weight: 700; }
.cj-order-page .pick-cell:focus-visible { outline: 3px solid #c44c3180; outline-offset: 3px; }
.cj-order-page .candidate-preview-card { cursor: default; }
.cj-order-page .candidate-preview-card:hover { transform: none; box-shadow: 0 3px 10px #303a3308; }
.cj-order-page .candidate-preview-card > a:first-child { display: block; border-radius: 7px; }
.candidate-preview-zoom { margin-top: 7px; color: var(--cj-green); font-size: 10px; text-align: center; text-decoration: underline; }
.cj-trial-preview { margin-top: 18px; }
.cj-trial-preview h2 { margin: 0; text-align: center; }
.cj-trial-preview > .cj-muted { text-align: center; }
.cj-trial-purchase { margin: 20px 0 0; text-align: center; }
.cj-trial-purchase .cj-primary-button { display: inline-flex; flex-direction: column; gap: 4px; min-height: 58px; }
.cj-trial-purchase .cj-primary-button span { font-size: 11px; opacity: .9; }

/* Status journey cards and fulfillment specific copy */
.cj-status-main { max-width: 980px; min-height: min(75vh, 870px); }
.cj-status-card { padding: clamp(27px, 5vw, 48px); text-align: center; }
.cj-status-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; background: #edf0e8; color: var(--cj-green); font-size: 24px; }
.cj-status-card > .cj-eyebrow { margin-bottom: 7px; }
.cj-status-card h2 { margin: 0; font-size: clamp(21px, 3vw, 27px); }
.cj-status-copy { max-width: 580px; margin: 11px auto 0; color: var(--cj-muted); font-size: 12px; }
.cj-order-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 30px 0; padding: 0; list-style: none; }
.cj-order-progress li { position: relative; display: grid; justify-items: center; gap: 8px; min-width: 0; color: #96998f; font-size: 10px; line-height: 1.45; }
.cj-order-progress li::before { content: ""; position: absolute; z-index: 0; top: 16px; left: calc(-50% + 17px); width: calc(100% - 34px); height: 1px; background: var(--cj-line); }
.cj-order-progress li:first-child::before { display: none; }
.cj-order-progress-no { position: relative; z-index: 1; display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid #d7d5cc; border-radius: 50%; background: var(--cj-bg); color: var(--cj-soft-muted); font: 600 10px "DM Sans", sans-serif; }
.cj-order-progress li.is-done, .cj-order-progress li.is-current { color: var(--cj-ink); font-weight: 700; }
.cj-order-progress li.is-done .cj-order-progress-no { border-color: #bcc8b7; background: #edf0e8; color: var(--cj-green); }
.cj-order-progress li.is-current .cj-order-progress-no { border-color: var(--cj-accent); background: var(--cj-accent); color: #fff; }
.cj-order-progress li.is-current::before, .cj-order-progress li.is-done::before { background: #cbd3c5; }
.cj-status-next { display: grid; gap: 4px; max-width: 520px; margin: 0 auto 17px; padding: 15px; border: 1px solid #dfe4d8; border-radius: 9px; background: #f3f5ef; }
.cj-status-next span { color: var(--cj-green); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.cj-status-next strong { font-size: 13px; }
.cj-status-next small { color: var(--cj-muted); font-size: 10px; }
.cj-completed-actions { display: grid; justify-items: center; gap: 17px; margin-top: 21px; }
.cj-completed-actions .cj-primary-button { min-width: 235px; }
.cj-completed-actions .howto.panel { width: min(100%, 550px); padding: 17px 20px; border: 1px solid var(--cj-line); border-radius: 10px; background: #f7f5ee; text-align: left; }
.cj-completed-actions .howto h2 { font-size: 14px; }
.cj-completed-actions .howto ol { margin: 10px 0 0; padding-left: 20px; color: var(--cj-muted); font-size: 11px; text-align: left; }
.cj-completed-actions .howto li + li { margin-top: 4px; }

/* Invalid access, missing order, cancelled and other message pages */
.cj-order-page.cj-message-page .cj-message-card { color: var(--cj-ink); }
.cj-order-page.cj-message-page .cj-message-card > p:not(.cj-eyebrow) { color: var(--cj-muted); }
.cj-order-page.cj-message-page .cj-message-mark { background: #f4eae5; color: var(--cj-accent); }
.cj-order-page.cj-message-page .cj-message-card h1 { font-size: clamp(22px, 4vw, 30px); }

/* Shared customer controls should remain comfortably tappable. */
.cj-order-page button:focus-visible, .cj-order-page a:focus-visible, .cj-order-page input:focus-visible, .cj-order-page select:focus-visible, .cj-order-page textarea:focus-visible { outline: 3px solid #c44c3180; outline-offset: 3px; }

@media (max-width: 767px) {
  .cj-order-page .cj-secure { display: inline-flex; font-size: 10px; }
  .cj-order-page .cj-header-right { gap: 0; }
  .cj-order-main { width: min(100% - 32px, 620px); padding: 26px 0 55px; }
  .cj-order-intro { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 17px; }
  .cj-order-intro h1 { font-size: 25px; }
  .cj-order-intro .cj-lead { max-width: 38em; font-size: 11px; }
  .cj-order-meta { justify-items: start; gap: 2px; margin-top: 3px; }
  .cj-order-code { white-space: nowrap; font-size: 9px; }
  .cj-order-code strong { display: block; margin: 2px 0 0; font-size: 10px; }
  .cj-draft-status { max-width: 160px; font-size: 9px; }
  .cj-order-card { padding: 19px 17px 21px; border-radius: 11px; }
  .cj-order-card-heading { gap: 9px; margin-bottom: 12px; font-size: 17px; scroll-margin-top: 126px; }
  .cj-step-number { flex-basis: 30px; width: 30px; height: 30px; font-size: 10px; }
  .cj-order-page .small { font-size: 11px; }
  .cj-pet-form { display: flex; flex-direction: column; gap: 11px; }
  .cj-order-step-nav { position: sticky; z-index: 12; top: 61px; display: flex; width: 100%; gap: 6px; overflow-x: auto; margin: 0 0 2px; padding: 7px; border-radius: 10px; scrollbar-width: thin; }
  .cj-order-step-nav .pet-step-nav-item { flex: 0 0 auto; min-height: 38px; gap: 6px; padding: 4px 7px; white-space: nowrap; font-size: 10px; }
  .cj-order-step-nav .pet-step-nav-item .no { flex-basis: 24px; width: 24px; height: 24px; font-size: 9px; }
  .cj-order-page .pet-step { scroll-margin-top: 119px; }
  .pet-count-options { gap: 8px; margin: 13px 0; }
  .pet-count-choice { min-height: 69px; padding: 10px; }
  .cj-order-page .pet-fields { padding: 11px 12px 13px; }
  .cj-photo-upload { min-height: 164px; padding: 15px 10px; }
  .cj-photo-upload small { font-size: 9px; }
  .cj-order-page #pet-photo-cards.photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .pet-photo-card { gap: 7px; padding: 8px; }
  .pet-photo-card .card-head { font-size: 10px; }
  .cj-sheet-grid { grid-template-columns: 1fr; gap: 8px; }
  .cj-sheet-card { padding: 12px; }
  .style-grid, .cj-child-form .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .cj-order-page .style-item { padding: 7px; font-size: 10px; }
  .style-filter { gap: 6px; margin: 11px 0; }
  .cj-order-page .style-chip { min-height: 40px; padding: 6px 10px; font-size: 10px; }
  .phrase-slot-list { gap: 5px; }
  .phrase-slot-edit { min-height: 46px; }
  .cj-order-page .phrase-dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 90dvh; margin: 0; padding: 17px 15px calc(15px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 16px 16px 0 0; }
  .phrase-bulk-section .phrase-groups { max-height: 25vh; }
  .phrase-bulk-footer .btn, .phrase-preset-footer .btn { flex: 1; }
  .pet-confirm-summary { padding-inline: 12px; }
  .cj-pet-form { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .cj-order-page .pet-step-actions { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; gap: 9px; margin: 0; padding: 9px 16px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cj-line); background: #fffefaF2; box-shadow: 0 -6px 22px #303a3310; backdrop-filter: blur(14px); }
  .cj-order-page .pet-step-actions .btn { flex: 1; min-width: 0; min-height: 48px; padding-inline: 10px; }
  .cj-order-page .pet-step-actions #submit-btn { flex: 2; min-width: 0; }
  .cj-order-page .pet-step-actions #submit-btn:not([hidden]) { box-shadow: 0 3px 10px #c44c3130; }
  .cj-order-page .pet-style-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 12px; }
  .pet-style-dialog-image-area { max-height: calc(100dvh - 184px); }
  .pet-style-dialog-image { max-height: min(62dvh, 560px); }
  .pet-style-dialog-nav { gap: 6px; }
  .cj-order-page .pet-style-dialog-nav button { min-width: 0; padding: 7px 8px; font-size: 10px; }
  .cj-child-form .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cj-child-form .slot { padding: 8px; }
  .cj-form-actions #submit-btn { width: 100%; }
  .cj-select-main { padding-bottom: calc(95px + env(safe-area-inset-bottom)); }
  .cj-select-bar { top: 61px; grid-template-columns: minmax(0, 1fr) minmax(132px, auto); gap: 4px 10px; margin-bottom: 12px; padding: 9px 11px; }
  .cj-select-count-wrap #pick-count { font-size: 15px; }
  .cj-select-count-wrap #pick-remaining { font-size: 9px; }
  .cj-select-bar #select-btn { min-width: 132px; min-height: 46px; padding: 7px 9px; font-size: 10px; }
  .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .cj-order-page .pick-cell { padding: 7px; border-radius: 9px; }
  .pick-cell-number { margin-top: 6px; font-size: 8px; }
  .pick-cell-phrase { font-size: 10px; }
  .cj-order-progress { margin: 22px 0; }
  .cj-order-progress li { gap: 6px; font-size: 9px; }
  .cj-order-progress-no { width: 29px; height: 29px; font-size: 9px; }
  .cj-order-progress li::before { top: 14px; left: calc(-50% + 15px); width: calc(100% - 30px); }
  .cj-status-card { padding: 25px 17px; }
  .cj-status-card h2 { font-size: 21px; }
  .cj-status-copy { font-size: 11px; }
  .cj-completed-actions .cj-primary-button { width: 100%; }
  .cj-completed-actions .howto.panel { padding: 15px; }
  .cj-order-page.cj-message-page .cj-message-main { width: min(100% - 32px, 620px); padding-block: 36px; }
}

@media (max-width: 390px) {
  .cj-order-main { width: min(100% - 24px, 620px); }
  .cj-order-intro { display: block; }
  .cj-order-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
  .cj-order-code strong { display: inline; margin-left: 4px; }
  .cj-pet-form { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .cj-order-step-nav { top: 61px; }
  .cj-order-step-nav .pet-step-nav-item { min-height: 36px; padding-inline: 5px; font-size: 9px; }
  .cj-order-step-nav .pet-step-nav-item .no { flex-basis: 22px; width: 22px; height: 22px; }
  .cj-order-page .pet-step-actions { padding-inline: 11px; }
  .cj-order-page .pet-step-actions .btn { font-size: 11px; }
  .cj-select-bar { grid-template-columns: minmax(0, 1fr) minmax(125px, auto); padding-inline: 9px; }
  .cj-select-bar #select-btn { min-width: 125px; font-size: 9px; }
  .cj-order-progress li { font-size: 8px; }
  .cj-order-progress-no { width: 26px; height: 26px; }
  .cj-order-progress li::before { top: 12px; left: calc(-50% + 13px); width: calc(100% - 26px); }
}

/* POP visual language is limited to the private waiting_input form. */
.cj-input-page {
  --cj-pop-blue: #0767e8;
  --cj-pop-yellow: #ffe642;
  --cj-pop-coral: #ff6f6b;
  --cj-pop-black: #111111;
  --cj-pop-white: #ffffff;
  --cj-pop-cream: #fffaf0;
  --cj-bg: var(--cj-pop-cream);
  --cj-surface: var(--cj-pop-white);
  --cj-white: var(--cj-pop-white);
  --cj-ink: var(--cj-pop-black);
  --cj-muted: #5f625f;
  --cj-soft-muted: #737671;
  --cj-accent: var(--cj-pop-coral);
  --cj-accent-hover: #f35b57;
  --cj-green: var(--cj-pop-blue);
  --cj-line: #dedbd2;
  --cj-wash: #edf4ff;
  background: var(--cj-pop-cream);
  color: var(--cj-pop-black);
}
.cj-input-page .cj-header { border-bottom-color: #11111124; background: #fffaf0ed; }
.cj-input-page .cj-brand { gap: 0; color: var(--cj-pop-black); font-size: 28px; font-weight: 800; letter-spacing: -.06em; text-transform: capitalize; }
.cj-input-page .cj-brand-mark { display: none; }
.cj-input-page .cj-brand-wordmark { white-space: nowrap; }
.cj-input-page .cj-brand-peta { color: var(--cj-pop-blue); }
.cj-input-page .cj-brand-sticker { color: var(--cj-pop-black); }
.cj-input-page .cj-brand-dot { color: var(--cj-pop-coral); }
.cj-input-page .cj-header-note { padding: 5px 10px; border: 1px solid var(--cj-pop-black); border-radius: 6px; background: var(--cj-pop-yellow); color: var(--cj-pop-black); font-size: 11px; font-weight: 700; }
.cj-input-page .cj-order-main { color: var(--cj-pop-black); }
.cj-input-page .cj-order-intro h1 { color: var(--cj-pop-black); font-weight: 800; }
.cj-input-page .cj-eyebrow { display: inline-block; margin-bottom: 12px; padding: 5px 9px 4px; border: 2px solid var(--cj-pop-black); border-radius: 6px; background: var(--cj-pop-yellow); box-shadow: 3px 3px 0 var(--cj-pop-black); color: var(--cj-pop-black); font-size: 10px; font-weight: 800; letter-spacing: .1em; transform: rotate(-1deg); }
.cj-input-page .cj-lead { color: #525552; }
.cj-input-page .cj-order-meta { color: var(--cj-pop-black); }
.cj-input-page .cj-order-code { color: var(--cj-muted); }
.cj-input-page .cj-order-code strong { color: var(--cj-pop-black); }
.cj-input-page .cj-draft-status:not(:empty) { border: 1px solid #e3dfd4; background: #fffdf8; }
.cj-input-page .cj-order-card-heading { align-items: center; gap: 12px; color: var(--cj-pop-black); font-size: 22px; font-weight: 800; }
.cj-input-page .cj-step-number { display: inline-flex; flex: 0 0 auto; width: auto; height: auto; min-height: 27px; padding: 3px 8px; border: 2px solid var(--cj-pop-black); border-radius: 6px; background: var(--cj-pop-yellow); box-shadow: 3px 3px 0 var(--cj-pop-black); color: var(--cj-pop-black); font: 800 10px/1.2 "DM Sans", "Noto Sans JP", sans-serif; letter-spacing: .035em; white-space: nowrap; transform: rotate(-1deg); }
.cj-input-page .cj-step-title { min-width: 0; color: var(--cj-pop-black); }
.cj-input-page .cj-step-title > small { margin-left: 5px; color: var(--cj-muted); font-size: 10px; font-weight: 500; }
.cj-input-page .cj-pet-form > .pet-step { padding: 25px 28px 28px; border: 2px solid var(--cj-pop-black); border-radius: 15px; background: var(--cj-pop-white); box-shadow: 5px 5px 0 var(--cj-pop-black); }
.cj-input-page .cj-child-form > .cj-order-card { border-color: #d7d4ca; border-radius: 13px; background: var(--cj-pop-white); box-shadow: 0 2px 8px #1111110d; }
.cj-input-page .cj-order-step-nav { border-color: #bdbbb4; background: var(--cj-pop-white); }
.cj-input-page .cj-order-step-nav .pet-step-nav-item.active,
.cj-input-page .cj-order-step-nav .pet-step-nav-item[aria-current="step"] { border-color: #b8d1f5; background: #eef5ff; color: var(--cj-pop-black); }
.cj-input-page .cj-order-step-nav .pet-step-nav-item.active .no,
.cj-input-page .cj-order-step-nav .pet-step-nav-item[aria-current="step"] .no { border-color: var(--cj-pop-blue); background: var(--cj-pop-blue); color: var(--cj-pop-white); }
.cj-input-page .cj-order-step-nav .pet-step-nav-item.done { color: var(--cj-pop-blue); }
.cj-input-page .cj-order-step-nav .pet-step-nav-item.done .no { border-color: #b8d1f5; background: #eef5ff; color: var(--cj-pop-blue); }
.cj-input-page .cj-header-right { color: var(--cj-pop-black); }
.cj-input-page .pet-count-choice { border-color: #dedbd2; background: var(--cj-pop-white); }
.cj-input-page .pet-count-choice:has(input:checked) { border: 2px solid var(--cj-pop-black); background: #fff8bd; box-shadow: 3px 3px 0 var(--cj-pop-black); }
.cj-input-page .pet-count-choice:has(input:checked) .cj-count-radio { border-color: var(--cj-pop-blue); }
.cj-input-page .pet-count-choice:has(input:checked) .cj-count-radio::after { background: var(--cj-pop-blue); }
.cj-input-page .pet-fields { border-color: #dedbd2; background: #fffdf8; }
.cj-input-page .pet-fields legend { color: var(--cj-pop-blue); }
.cj-input-page .cj-pet-field-no { background: #eaf2ff; color: var(--cj-pop-blue); }
.cj-input-page .cj-photo-upload { border: 2px dashed #b9b8b2; border-radius: 14px; background: var(--cj-pop-white); transition: border-color .15s ease, background .15s ease; }
.cj-input-page .cj-photo-upload:hover,
.cj-input-page .cj-photo-upload:focus-within { border-color: var(--cj-pop-blue); background: #f3f8ff; }
.cj-input-page .cj-photo-upload-plus { background: var(--cj-pop-blue); color: var(--cj-pop-white); }
.cj-input-page .cj-photo-upload input::file-selector-button { border-color: var(--cj-pop-blue); background: var(--cj-pop-blue); color: var(--cj-pop-white); }
.cj-input-page .cj-photo-tips { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 9px; margin-top: 15px; padding: 14px 16px; border: 1px solid #d7e7ff; border-radius: 11px; background: #eef5ff; color: var(--cj-pop-black); }
.cj-input-page .cj-photo-tips-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--cj-pop-blue); color: var(--cj-pop-white); font-size: 13px; line-height: 1; }
.cj-input-page .cj-photo-tips strong { color: var(--cj-pop-blue); font-size: 12px; font-weight: 800; }
.cj-input-page .cj-photo-tips ul { display: grid; gap: 3px; margin: 6px 0 0; padding-left: 17px; font-size: 11px; line-height: 1.65; }
.cj-input-page .style-chip { border-color: #d5d5d2; color: #555955; }
.cj-input-page .style-chip.active,
.cj-input-page .style-chip[aria-pressed="true"] { border-color: var(--cj-pop-black); background: var(--cj-pop-blue); color: var(--cj-pop-white); }
.cj-input-page .style-item { border-color: #dedbd2; background: var(--cj-pop-white); box-shadow: 0 2px 7px #1111110a; }
.cj-input-page .style-item:hover { border-color: var(--cj-pop-black); box-shadow: 2px 2px 0 #11111135; transform: translateY(-1px); }
.cj-input-page .style-item:has(input:checked) { border: 2px solid var(--cj-pop-black); background: var(--cj-pop-white); box-shadow: 4px 4px 0 var(--cj-pop-black); }
.cj-input-page .style-item:has(input:checked)::before { top: 13px; right: 13px; padding: 4px 7px; border: 2px solid var(--cj-pop-black); border-radius: 6px; background: var(--cj-pop-yellow); color: var(--cj-pop-black); }
.cj-input-page .style-item:has(input:focus-visible) { outline-color: var(--cj-pop-blue); }
.cj-input-page input:focus,
.cj-input-page select:focus,
.cj-input-page textarea:focus { border-color: var(--cj-pop-blue); outline: 3px solid #0767e82e; }
.cj-input-page input[type="email"] { display: block; width: 100%; min-width: 0; min-height: 48px; margin: 7px 0 0; padding: 10px 12px; border: 1px solid var(--cj-line); border-radius: 8px; background: var(--cj-pop-white); color: var(--cj-pop-black); font-size: 16px; line-height: 1.5; }
.cj-input-page .pet-confirm-summary { border-color: #dedbd2; background: var(--cj-pop-white); }
.cj-input-page .pet-confirm-summary .confirm-label,
.cj-input-page .pet-confirm-summary summary { color: var(--cj-pop-blue); }
.cj-input-page .consent-check input { accent-color: var(--cj-pop-blue); }
.cj-input-page .slot { border-color: #d5d5d2; }
.cj-input-page .slot-status.saved { color: var(--cj-pop-blue); }
.cj-input-page .slot-file::file-selector-button { border-color: var(--cj-pop-blue); background: var(--cj-pop-blue); color: var(--cj-pop-white); }
.cj-input-page .phrase-slot-no { background: #eaf2ff; color: var(--cj-pop-blue); }
.cj-input-page .phrase-slot-edit:hover,
.cj-input-page .phrase-slot-edit:focus-visible,
.cj-input-page .phrase-candidate:hover,
.cj-input-page .phrase-candidate:focus-visible,
.cj-input-page .phrase-preset-option:hover,
.cj-input-page .phrase-preset-option:focus-visible { border-color: var(--cj-pop-blue); background: #f0f6ff; }
.cj-input-page .phrase-slot-action,
.cj-input-page .phrase-group h4 { color: var(--cj-pop-blue); }
.cj-input-page .phrase-dialog .btn.primary,
.cj-input-page .pet-style-dialog .btn.primary { border-color: var(--cj-pop-blue); background: var(--cj-pop-blue); color: var(--cj-pop-white); }
.cj-input-page #pet-next-btn,
.cj-input-page .cj-pet-form #submit-btn,
.cj-input-page .cj-child-form #submit-btn { position: relative; min-height: 54px; padding: 10px 48px 10px 22px; border: 2px solid var(--cj-pop-black); border-radius: 13px; background: var(--cj-pop-coral); box-shadow: 0 5px 0 var(--cj-pop-black); color: var(--cj-pop-black); font-size: 13px; font-weight: 800; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.cj-input-page #pet-next-btn::after,
.cj-input-page .cj-pet-form #submit-btn::after,
.cj-input-page .cj-child-form #submit-btn::after { position: absolute; top: 50%; right: 9px; display: grid; place-items: center; width: 29px; height: 29px; border: 2px solid var(--cj-pop-black); border-radius: 50%; background: var(--cj-pop-yellow); color: var(--cj-pop-black); content: "→"; font: 800 17px/1 "DM Sans", sans-serif; transform: translateY(-50%); }
.cj-input-page #pet-next-btn:hover:not(:disabled),
.cj-input-page .cj-pet-form #submit-btn:hover:not(:disabled),
.cj-input-page .cj-child-form #submit-btn:hover:not(:disabled) { border-color: var(--cj-pop-black); background: #ff7c78; box-shadow: 0 6px 0 var(--cj-pop-black); transform: translateY(-1px); }
.cj-input-page #pet-next-btn:active:not(:disabled),
.cj-input-page .cj-pet-form #submit-btn:active:not(:disabled),
.cj-input-page .cj-child-form #submit-btn:active:not(:disabled) { box-shadow: 0 1px 0 var(--cj-pop-black); transform: translateY(4px); }
.cj-input-page #pet-next-btn:disabled,
.cj-input-page .cj-pet-form #submit-btn:disabled,
.cj-input-page .cj-child-form #submit-btn:disabled { cursor: not-allowed; filter: grayscale(.35); }
.cj-input-page #pet-prev-btn { border: 2px solid var(--cj-pop-black); border-radius: 10px; background: var(--cj-pop-white); box-shadow: 0 3px 0 var(--cj-pop-black); color: var(--cj-pop-black); font-weight: 700; }
.cj-input-page #pet-prev-btn:hover:not(:disabled) { border-color: var(--cj-pop-black); background: #fffdf4; transform: translateY(-1px); }
.cj-input-page #pet-prev-btn:active:not(:disabled) { box-shadow: 0 0 0 var(--cj-pop-black); transform: translateY(3px); }
.cj-input-page .cj-form-actions { padding-top: 8px; }
.cj-input-page button:focus-visible,
.cj-input-page a:focus-visible,
.cj-input-page input:focus-visible,
.cj-input-page select:focus-visible,
.cj-input-page textarea:focus-visible { outline-color: var(--cj-pop-blue); }

@media (max-width: 767px) {
  .cj-input-page .cj-header-inner { gap: 8px; }
  .cj-input-page .cj-brand { font-size: 24px; }
  .cj-input-page .cj-header-note { padding: 4px 8px; font-size: 10px; }
  .cj-input-page .cj-order-intro { display: block; }
  .cj-input-page .cj-order-intro h1 { font-size: 24px; }
  .cj-input-page .cj-order-card { padding: 19px 17px 21px; }
  .cj-input-page .cj-order-card-heading { gap: 10px; font-size: 19px; }
  .cj-input-page .cj-step-number { min-height: 25px; padding-inline: 7px; font-size: 9px; }
  .cj-input-page .cj-pet-form > .pet-step { padding: 19px 17px 21px; border-radius: 13px; box-shadow: 3px 3px 0 var(--cj-pop-black); }
  .cj-input-page .cj-photo-tips { grid-template-columns: 21px minmax(0, 1fr); gap: 8px; padding: 12px; }
  .cj-input-page .cj-photo-tips-icon { width: 21px; height: 21px; }
  .cj-input-page .cj-photo-tips ul { font-size: 10px; }
  .cj-input-page .cj-pet-form { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
  .cj-input-page .pet-step-actions { border-top-color: #d4d0c6; background: #fffaf0f2; box-shadow: 0 -5px 16px #11111112; }
  .cj-input-page .pet-step-actions #pet-prev-btn { flex: 1; min-width: 0; }
  .cj-input-page .pet-step-actions #pet-next-btn { flex: 2; min-width: 0; }
  .cj-input-page .pet-step-actions #submit-btn { flex: 2; min-width: 0; }
  .cj-input-page .pet-step-actions .btn.primary { padding-right: 42px; font-size: 12px; }
  .cj-input-page .cj-child-form .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cj-input-page .cj-form-actions #submit-btn { width: 100%; }
}

@media (max-width: 390px) {
  .cj-input-page .cj-brand { font-size: 23px; }
  .cj-input-page .cj-header-note { padding-inline: 7px; font-size: 9px; }
  .cj-input-page .cj-order-main { width: min(100% - 24px, 620px); }
  .cj-input-page .cj-order-card-heading { gap: 8px; font-size: 18px; }
  .cj-input-page .cj-pet-form > .pet-step { padding-inline: 14px; }
  .cj-input-page .pet-step-actions { gap: 8px; padding-inline: 11px; }
  .cj-input-page .pet-step-actions .btn { font-size: 11px; }
  .cj-input-page .pet-step-actions .btn.primary { padding-inline: 8px 38px; font-size: 11px; }
  .cj-input-page .pet-step-actions .btn.primary::after { right: 6px; width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .cj-input-page .cj-eyebrow,
  .cj-input-page .cj-step-number,
  .cj-input-page .cj-photo-upload,
  .cj-input-page .style-item,
  .cj-input-page .pet-count-choice,
  .cj-input-page #pet-next-btn,
  .cj-input-page #pet-next-btn::after,
  .cj-input-page #pet-prev-btn,
  .cj-input-page #submit-btn,
  .cj-input-page #submit-btn::after { transition: none !important; transform: none !important; }
}