/*! SHIRO 会員フォーム UIUX 改善 kojin-ux.css v1.0（2026-10-15）
 * すべて html.kux の下だけで効く（JS が動いたときだけ）。今の画面の CSS は書き換えない。 */
html.kux{--kx-navy:#000030;--kx-ink:#393c41;--kx-sub:#62666d;--kx-note:#707070;--kx-faint:#b9bcc2;--kx-line:#cccccc;--kx-line2:#e3e5e8;--kx-bg:#f6f6f6;--kx-warn:#d91f3f;--kx-ease:cubic-bezier(.2,.7,.2,1)}
html.kux .kux-hide{display:none!important}
html.kux-lock{overflow:hidden}

/* ---- 案内の場所（欄の下）：誤り・状態は同じ場所で文字を差し替える ---- */
html.kux .c-form__note{min-height:1.6em;line-height:1.6;word-break:auto-phrase;text-wrap:pretty}
html.kux .c-form__note.kux-ok{color:var(--kx-navy)}
html.kux .c-form__note.kux-ng{color:var(--kx-warn)}
html.kux .kux-link{border:0;background:none;color:var(--kx-navy);font:inherit;cursor:pointer;padding:0 4px;margin-left:6px;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;gap:3px;vertical-align:top;line-height:inherit}
html.kux .kux-link svg{width:11px;height:11px}
html.kux .kux-ext{color:var(--kx-sub);text-decoration:underline;text-underline-offset:3px;margin-left:6px;display:inline-flex;align-items:center;gap:3px}
html.kux .kux-ext svg{width:9px;height:9px}
/* 今の入力チェック（validationEngine）の文：欄の下に1行で。案内と重ねない */
html.kux .formError{position:static!important;left:auto!important;top:auto!important;margin:6px 2px 0!important;opacity:1!important;cursor:default}
html.kux .formError .formErrorContent{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;color:var(--kx-warn)!important;font-size:12px!important;line-height:1.6!important;width:auto!important;min-width:0!important;border-radius:0!important}
html.kux .formError .formErrorArrow{display:none!important}
html.kux .c-form.error > .c-form__note:not(.kux-ok){display:none}

/* ---- 2〜3択の切り替え ---- */
html.kux .kux-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--kx-bg);border-radius:6px;padding:4px;margin-top:12px;max-width:520px}
html.kux .kux-seg .c-input-radio{margin:0;position:relative;z-index:1}
html.kux .kux-seg .c-input-radio label{display:block;margin:0}
html.kux .kux-seg .c-input-radio__text{display:flex!important;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:4px 10px!important;font-size:13.5px;color:var(--kx-sub);transition:color .25s;letter-spacing:.04em;line-height:1.4;margin:0!important}
html.kux .kux-seg .c-input-radio__text::before,html.kux .kux-seg .c-input-radio__text::after{display:none!important;content:none!important}
html.kux .kux-seg label:hover .c-input-radio__text{color:var(--kx-ink)}
html.kux .kux-seg input:checked + .c-input-radio__text{color:var(--kx-navy);font-weight:600}
html.kux .kux-seg .kux-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n,2));background:#fff;border:1px solid var(--kx-navy);border-radius:4px;box-shadow:0 1px 3px rgba(0,0,48,.08);transform:translateX(calc(var(--i,0) * 100%));transition:transform .38s var(--kx-ease),opacity .2s;opacity:0;pointer-events:none}
html.kux .kux-seg.has .kux-thumb{opacity:1}
html.kux .kux-seg.instant .kux-thumb{transition:none}
html.kux .kux-seg .c-input-radio + .c-input-radio::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--kx-faint);transition:opacity .2s}
html.kux .kux-seg.has .c-input-radio + .c-input-radio::before{opacity:0}

/* ---- スキンケア効果の札 ---- */
html.kux .kux-chips{display:flex!important;flex-wrap:wrap;gap:8px;margin-top:12px}
html.kux .kux-chips label{display:inline-flex!important;margin:0!important;position:relative;cursor:pointer}
html.kux .kux-chips input{position:absolute;opacity:0;width:1px;height:1px}
html.kux .kux-chips .c-input-checkbox__text{display:inline-flex!important;align-items:center;gap:6px;min-height:38px;padding:0 14px!important;border:1px solid var(--kx-line);border-radius:999px;font-size:13px;color:var(--kx-ink);background:#fff;transition:border-color .2s,color .2s,background .2s;margin:0!important}
html.kux .kux-chips .c-input-checkbox__text::before,html.kux .kux-chips .c-input-checkbox__text::after{display:none!important;content:none!important}
html.kux .kux-chips input:checked + .c-input-checkbox__text{border-color:var(--kx-navy);color:var(--kx-navy);background:rgba(0,0,48,.04)}
html.kux .kux-chips input:checked + .c-input-checkbox__text::before{display:block!important;content:""!important;width:10px;height:6px;border-left:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(-45deg) translateY(-2px);background:none!important;position:static!important;border-radius:0!important}
html.kux .kux-chips input:focus-visible + .c-input-checkbox__text{outline:2px solid var(--kx-navy);outline-offset:2px}
html.kux .c-form__item small{font-size:12px;color:var(--kx-note);font-weight:400;margin-left:6px}

/* ---- 生年月日 ---- */
html.kux .kux-ymd .c-input-text{flex:1.7 1 0%;position:relative}
html.kux select.kux-year{width:100%;height:54px;border:1px solid var(--kx-line);border-radius:3px;padding:0 30px 0 14px;font-size:16px;color:var(--kx-ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23393c41' stroke-width='1.3'/%3E%3C/svg%3E") right 12px center/10px no-repeat;-webkit-appearance:none;appearance:none}
html.kux select.kux-year.kux-ph{color:var(--kx-note)}
html.kux .kux-ymd .c-input-select{border:0;height:auto}
html.kux .kux-ymd .c-input-select::before{display:none}
html.kux .kux-pick{position:relative;width:100%;height:54px;border:1px solid var(--kx-line);border-radius:3px;background:#fff;text-align:left;padding:0 26px 0 14px;font-size:16px;color:var(--kx-ink);cursor:pointer;white-space:nowrap;font-family:inherit;font-feature-settings:"tnum"}
html.kux .kux-pick.kux-ph{color:var(--kx-note)}
html.kux .kux-pick svg{position:absolute;right:11px;top:50%;margin-top:-6px;width:8px;height:12px;color:var(--kx-ink)}
html.kux .kux-pick:focus-visible{outline:2px solid var(--kx-navy);outline-offset:1px}
html.kux .kux-pick[aria-expanded=true]{border-color:var(--kx-navy);box-shadow:0 0 0 1px var(--kx-navy)}

/* ---- ふすま（右から引き出す盤） ---- */
html.kux .kux-fsm-ov{position:fixed;inset:0;background:rgba(0,0,48,.28);opacity:0;pointer-events:none;transition:opacity .28s var(--kx-ease);z-index:9998}
html.kux .kux-fsm-ov.on{opacity:1;pointer-events:auto}
html.kux .kux-fsm{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:#fff;z-index:9999;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s var(--kx-ease),visibility 0s .32s;box-shadow:-8px 0 24px rgba(0,0,48,.08);visibility:hidden}
html.kux .kux-fsm.on{transform:none;visibility:visible;transition:transform .32s var(--kx-ease)}
html.kux .kux-fsm-h{display:grid;grid-template-columns:76px 1fr 76px;align-items:center;height:60px;border-bottom:1px solid var(--kx-line2);padding:0 4px}
html.kux .kux-fsm-h h4{margin:0;text-align:center;font-size:15px;font-weight:500;color:var(--kx-navy);letter-spacing:.06em}
html.kux .kux-fsm-back,html.kux .kux-fsm-x{border:0;background:none;color:var(--kx-sub);font-size:12.5px;cursor:pointer;height:48px;display:flex;align-items:center;gap:5px;padding:0 10px;font-family:inherit}
html.kux .kux-fsm-back{justify-self:start}html.kux .kux-fsm-x{justify-self:end;grid-column:3}
html.kux .kux-fsm-back[hidden]{display:flex;visibility:hidden}
html.kux .kux-fsm-back svg{width:7px;height:11px}html.kux .kux-fsm-x svg{width:12px;height:12px}
html.kux .kux-fsm-body{flex:1;background:var(--kx-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 40px;overflow:auto}
html.kux .kux-fsm-sub{font-size:13px;color:var(--kx-sub);margin:0 0 16px;min-height:1.6em}
html.kux .kux-fsm-grid{display:grid;gap:8px}
html.kux .kux-fsm-grid.mo{grid-template-columns:repeat(3,76px)}
html.kux .kux-fsm-grid.da{grid-template-columns:repeat(7,40px);gap:6px}
html.kux .kux-fsm-grid button{border:1px solid var(--kx-line);background:#fff;border-radius:3px;color:var(--kx-navy);cursor:pointer;font-family:inherit;font-feature-settings:"tnum"}
html.kux .kux-fsm-grid.mo button{height:76px;font-size:24px;font-weight:500}
html.kux .kux-fsm-grid.mo button small{font-size:12px;font-weight:400;margin-left:1px}
html.kux .kux-fsm-grid.da button{height:44px;font-size:15px}
html.kux .kux-fsm-grid button:hover{border-color:var(--kx-navy)}
html.kux .kux-fsm-grid button[aria-pressed=true]{background:var(--kx-navy);border-color:var(--kx-navy);color:#fff}
html.kux .kux-fsm-grid.kux-fsm-doc{display:block;width:min(100%,460px);max-height:100%;overflow:auto;background:#fff;padding:16px 18px;font-size:12.5px;line-height:1.8;align-self:stretch}
html.kux .kux-fsm-doc .terms-block__text{max-height:none!important;overflow:visible!important;height:auto!important}
html.kux .kux-alist{list-style:none;margin:0;padding:0;width:min(100%,340px);border-top:1px solid var(--kx-line2)}
html.kux .kux-alist button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--kx-line2);background:#fff;padding:16px;font-size:15px;color:var(--kx-navy);cursor:pointer;font-family:inherit;line-height:1.5}
html.kux .kux-alist button small{display:block;font-size:12px;color:var(--kx-sub);margin-bottom:2px}
html.kux .kux-filled input,html.kux .kux-filled select,html.kux select.kux-filled,html.kux input.kux-filled{animation:kuxFilled 1.4s var(--kx-ease)}
@keyframes kuxFilled{0%,30%{background-color:rgba(0,0,48,.07)}100%{background-color:#fff}}

/* ---- パスワードの条件 ---- */
html.kux .kux-ck{display:inline-flex;align-items:center;gap:4px;margin-right:16px;color:var(--kx-note)}
html.kux .kux-ck svg{width:11px;height:11px}
html.kux .kux-ck.ok{color:var(--kx-navy)}html.kux .kux-ck.ng{color:var(--kx-warn)}

/* ---- 下端に固定する帯 ---- */
html.kux .kux-bar{position:sticky;bottom:0;z-index:50;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:1px solid var(--kx-line2);margin:48px -16px 0;padding:10px 16px 14px}
html.kux .kux-sum{font-size:12px;color:var(--kx-navy);text-align:center;min-height:1.7em;line-height:1.7;margin:0 0 6px}
html.kux .kux-sum.idle{color:var(--kx-note)}html.kux .kux-sum.err{color:var(--kx-warn)}html.kux .kux-sum b{font-weight:600}
html.kux .kux-btns{margin:0 auto!important;max-width:520px}
html.kux-change .kux-btns{display:grid!important;grid-template-columns:1fr 2fr;gap:12px}
html.kux-change .kux-btns > div{margin:0!important;width:auto!important}
html.kux .kux-btns input[type=submit]{width:100%;margin:0!important}
html.kux input.kux-off{background:#c9ccd1!important;border-color:#c9ccd1!important;color:#fff!important;cursor:not-allowed}

/* ---- 会員情報変更：タブ ---- */
html.kux .kux-tabs{position:sticky;top:var(--kx-top,0px);z-index:40;background:#fff;display:flex;border-bottom:1px solid var(--kx-line2);margin:8px 0 28px;overflow-x:auto;scrollbar-width:none}
html.kux .kux-tabs::-webkit-scrollbar{display:none}
html.kux .kux-tab{flex:1 0 auto;position:relative;border:0;background:none;font-size:14px;color:var(--kx-sub);padding:16px 6px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;letter-spacing:.02em;font-family:inherit;transition:color .2s,border-color .2s}
html.kux .kux-tab:hover{color:var(--kx-ink)}
html.kux .kux-tab[aria-selected=true]{color:var(--kx-navy);font-weight:500;border-bottom-color:var(--kx-navy)}
html.kux .kux-tab:focus-visible{outline:2px solid var(--kx-navy);outline-offset:-4px}
html.kux .kux-tab .dot{position:absolute;top:7px;left:50%;margin-left:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--kx-navy);opacity:0;transition:opacity .2s}
html.kux .kux-tab.chg .dot{opacity:1}
html.kux .kux-tab .ec{position:absolute;top:4px;right:2px;min-width:16px;height:16px;border-radius:8px;background:var(--kx-warn);color:#fff;font-size:10px;line-height:16px;text-align:center;padding:0 4px;display:none;font-style:normal}
html.kux .kux-tab.err .ec{display:block}html.kux .kux-tab.err .dot{opacity:0}
html.kux .kux-pane{display:none}
html.kux .kux-pane.on{display:block;animation:kuxFade .2s var(--kx-ease)}
@keyframes kuxFade{from{opacity:0}to{opacity:1}}
html.kux .kux-plead{font-size:13px;line-height:1.8;margin:0 0 20px;color:var(--kx-ink)}
@media (max-width:767px){html.kux .kux-tab{font-size:12px;padding:14px 4px 12px;letter-spacing:0}}

/* ---- 新規会員登録：まとまり・プロフィール・規約 ---- */
html.kux .kux-sec + .kux-sec{margin-top:64px}
html.kux .kux-sec-t{font-size:16px;font-weight:500;color:var(--kx-navy);margin:0 0 22px;padding-bottom:10px;border-bottom:1px solid var(--kx-navy);letter-spacing:.06em;display:flex;justify-content:space-between;align-items:baseline}
html.kux .kux-sec-t small{font-size:12px;color:var(--kx-sub);font-weight:400}
html.kux .kux-mailfix .c-form__confirm{padding:14px 16px;background:var(--kx-bg);border-radius:3px;font-size:15px;margin-top:8px}
html.kux .kux-prof{background:var(--kx-bg);border-radius:3px;padding:18px 18px 22px}
html.kux .kux-prof-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px}
html.kux .kux-prof-h b{font-size:14px;font-weight:500;color:var(--kx-navy);letter-spacing:.06em}
html.kux .kux-prof-h span{font-size:12px;color:var(--kx-sub);display:inline-flex;align-items:center;gap:4px}
html.kux .kux-prof-h span svg{width:12px;height:12px}
html.kux .kux-prof.done .kux-prof-h span{color:var(--kx-navy)}
html.kux .kux-prof .kux-seg{background:#fff}
html.kux .kux-prof .c-input-text .c-form__item,html.kux .kux-prof .c-input-select .c-form__item{background:linear-gradient(var(--kx-bg) 50%,#fff 50%)}
html.kux .kux-sub-h{font-size:14px;font-weight:500;color:var(--kx-navy);letter-spacing:.06em;margin:40px 0 0;padding-top:24px;border-top:1px solid var(--kx-line2)}
html.kux .kux-ok .c-form__icons .icon{display:block!important;width:20px;height:20px;border-radius:50%;background:#8f979a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2.1 2.1L9 4.3' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat!important;-webkit-mask:none!important;mask:none!important}
html.kux .kux-terms .terms-block__text{max-height:168px!important;overflow:auto}
html.kux .kux-tread{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--kx-navy);font-size:13px;cursor:pointer;padding:12px 2px;font-family:inherit;text-decoration:underline;text-underline-offset:3px}
html.kux .kux-tread svg{width:7px;height:11px}
html.kux .kux-agree label{display:flex!important;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--kx-line);border-radius:3px;cursor:pointer;transition:border-color .2s,background .2s}
html.kux .kux-agree label:has(input:checked){border-color:var(--kx-navy);background:rgba(0,0,48,.03)}

@media (prefers-reduced-motion:reduce){html.kux *{animation:none!important;transition:none!important}}

/* v1.1 ST2実画面での調整 */
html.kux .kux-ymd .c-input-select > .c-form__item{z-index:1}
html.kux .c-form--w168 > .c-form__note{width:max-content;max-width:min(343px,calc(100vw - 32px))}
html.kux .kux-terms .terms-block__box,html.kux .kux-terms .terms-block__in{height:auto!important;min-height:0!important}
/* v1.3 */
html.kux .c-form__col2 > .kux-chips{flex:1 1 100%;width:100%;max-width:none}
html.kux div#zipList{display:none!important}
/* v1.4 札の✓：元の飾り（上・右の線）が残って菱形に見えるのを消す */
html.kux .kux-chips input:checked + .c-input-checkbox__text::before{border-top:0!important;border-right:0!important;box-shadow:none!important;outline:0!important;background-image:none!important}
/* v1.5 盤：見出しを盤の直上へ・数字を中央に・月の表示を大きく */
html.kux .kux-fsm-body .kux-fsm-t{margin:0 0 6px;text-align:center;font-size:16px;font-weight:500;color:var(--kx-navy);letter-spacing:.08em}
html.kux .kux-fsm-sub{text-align:center}
html.kux .kux-fsm-body:has(.kux-fsm-grid.da) .kux-fsm-sub{font-size:20px;font-weight:500;color:var(--kx-navy);letter-spacing:.04em;margin:0 0 14px;min-height:0}
html.kux .kux-fsm-sub:empty{display:none}
html.kux .kux-fsm-grid.mo button,html.kux .kux-fsm-grid.da button{display:flex!important;align-items:center;justify-content:center;padding:0!important;text-align:center!important;line-height:1!important}
html.kux .kux-fsm-grid.mo button{display:block!important;line-height:74px!important}
html.kux .kux-fsm-grid.mo button small{margin-left:2px}
/* v1.7 ① 帯から未入力の欄へ ② 住所候補は欄の下に */
html.kux .kux-sum.kux-jumpable{cursor:pointer;-webkit-tap-highlight-color:transparent}
html.kux .kux-go{display:inline-flex;align-items:center;gap:3px;margin-left:10px;padding:1px 9px;border:1px solid currentColor;border-radius:999px;font-size:11px;line-height:1.6;vertical-align:1px}
html.kux .kux-go svg{width:9px;height:9px}
html.kux .kux-sum.kux-jumpable:focus-visible{outline:2px solid var(--kx-navy);outline-offset:2px}
@keyframes kuxPing{0%{box-shadow:0 0 0 0 rgba(0,0,48,.22)}100%{box-shadow:0 0 0 12px rgba(0,0,48,0)}}
html.kux .kux-ping .c-input-text input,html.kux .kux-ping .c-input-select,html.kux .kux-ping .c-input-password input,html.kux .kux-ping.terms-block__check,html.kux .kux-ping .kux-pick,html.kux .kux-ping .kux-year{animation:kuxPing 1.2s ease-out 1}
html.kux ul.error li.kux-errlink{cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html.kux .kux-zc{margin:-4px 0 20px;max-width:460px}
html.kux .kux-zc-list{list-style:none;margin:0;padding:0;border:1px solid var(--kx-line);border-radius:3px;max-height:282px;overflow:auto;background:#fff}
html.kux .kux-zc-list li+li{border-top:1px solid var(--kx-line2)}
html.kux .kux-zc-list button{display:block;width:100%;text-align:left;border:0;background:none;padding:12px 14px;min-height:56px;font-family:inherit;font-size:14px;line-height:1.5;color:var(--kx-navy);cursor:pointer}
html.kux .kux-zc-list button small{display:block;font-size:11px;color:var(--kx-sub)}
html.kux .kux-zc-list button:hover,html.kux .kux-zc-list button:focus-visible{background:var(--kx-bg);outline:0}
@media (prefers-reduced-motion:reduce){html.kux .kux-ping *{animation:none!important}}
/* v1.8 タブの文字を中央に（元のボタンの左寄せを打ち消す） */
html.kux .kux-tab{text-align:center!important;display:flex;align-items:center;justify-content:center}
/* v1.8 ページ上部へ戻るボタンが、下の帯（入力へ）に重ならないよう上げる */
html.kux #scrollToTop{bottom:148px!important}
/* v1.8 生年月日：狭い画面で「1990（平成2）」が切れないよう、年を広く・余白を詰める */
html.kux .kux-ymd .c-input-text{flex:2 1 0%}
html.kux select.kux-year{padding:0 26px 0 10px;background-position:right 9px center}
html.kux .kux-pick{padding:0 22px 0 12px}
html.kux .kux-pick svg{right:9px}
/* v1.10 エラー数のバッジ：ゆっくり明滅（呼吸のように 2.4秒周期） */
@keyframes kuxBreath{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.88)}}
html.kux .kux-tab.err .ec{animation:kuxBreath 2.4s ease-in-out infinite;will-change:opacity,transform}
/* 動きを減らす設定の端末：大きさは変えず、濃さだけゆっくり変える */
@keyframes kuxFade{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){html.kux .kux-tab.err .ec{animation:kuxFade 3s ease-in-out infinite!important}}
/* v1.11 任意ラベル（控えめ）・店舗の注意書き */
html.kux .kux-opt{display:inline-block;margin-left:6px;padding:0 5px;border:1px solid var(--kx-line);border-radius:2px;background:#fff;color:#949494;font-size:10px;line-height:16px;font-weight:400;letter-spacing:.05em;vertical-align:1px}
html.kux .c-form__item small + .kux-opt,html.kux .kux-opt + small{margin-left:6px}
html.kux .c-form__note.kux-alert{color:#db152f!important;background:#fdf4f4;padding:8px 10px;border-radius:3px;font-weight:500}
@keyframes kuxAlertIn{0%{opacity:0;transform:translateY(-4px)}100%{opacity:1;transform:none}}
html.kux .c-form__note.kux-alert-in{animation:kuxAlertIn .35s ease-out 1}
/* v1.12 店舗の注意書き：通常は非表示、該当店舗を選んだときだけ表示 */
html.kux .c-form__note.kux-snote{display:none;min-height:0}
html.kux .c-form__note.kux-snote.kux-alert{display:block;margin-top:8px}
/* v1.13 店舗の注意書き：文節改行をやめて行末までそろえ、内側の余白を上下左右12pxで均等に */
html.kux .c-form__note.kux-snote.kux-alert{padding:12px!important;word-break:normal!important;text-wrap:wrap!important;line-break:strict;text-align:justify;text-justify:inter-character}