/* 申し込み（apply.js）。.apl- で始まるクラスだけ（どの画面にも読み込まれるため）。お客様向けのコバルト */
main.bare:has(.apl){display:block;min-height:0;padding:0}
.apl{min-height:100vh;background:var(--paper)}
.apl a{color:var(--cobalt)}
.apl-top{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:14px 20px}
.apl-logo{font-family:var(--latin);font-weight:700;font-size:21px;letter-spacing:.08em;color:var(--ink)!important;text-decoration:none;white-space:nowrap}
.apl-logo i{font-style:normal;color:var(--shu)}.apl-logo span{font-weight:500;letter-spacing:.02em}
.apl-top-r{display:flex;gap:16px;align-items:center;font-size:13px;color:var(--sub)}.apl-top-r a{color:var(--sub)!important}
.apl-wrap{max-width:1080px;margin:0 auto;padding:28px 20px 40px}
.apl-h1{font-family:var(--mincho);font-size:clamp(24px,3.4vw,30px);line-height:1.45;margin:8px 0 6px;letter-spacing:.04em}
.apl-lead{color:var(--sub);margin:0 0 20px}
.apl-kick{font-size:13px;color:var(--cobalt);font-weight:700;letter-spacing:.06em;margin:0}
.apl-small{font-size:12.5px;color:var(--sub);line-height:1.75}
.apl-break{overflow-wrap:anywhere}
.apl-back{display:inline-block;font-size:14px;margin-bottom:8px}

/* 手順 */
.apl-steps{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.apl-steps li{border-left:1px solid var(--line);font-size:13px;color:var(--mute)}.apl-steps li:first-child{border-left:0}
.apl-steps a,.apl-steps span{display:block;padding:12px 14px;color:inherit!important;text-decoration:none}
.apl-steps b{display:block;font-family:var(--latin);font-size:19px;line-height:1.2}
.apl-steps .on{background:var(--cobalt);color:#fff}.apl-steps .done{color:var(--ink)}
.apl-steps a:hover{background:var(--wash)}

.apl-ai{background:var(--wash);border-left:3px solid var(--cobalt);padding:14px 16px;font-size:13.5px;line-height:1.85;margin:0 0 24px}
.apl-err ul{margin:6px 0 0;padding-left:1.2em}

/* 2列：左が入力、右が内容 */
.apl-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start}
.apl-form fieldset{border:0;padding:0;margin:0 0 6px;min-width:0}
.apl-form label{margin:0}
.apl-sec-h{display:block;font-size:14px;font-weight:400;color:var(--sub);letter-spacing:.06em;margin:22px 0 10px;padding:0}
.apl-sec-h small{font-size:12px;color:var(--mute);margin-left:6px;letter-spacing:0}
.apl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.apl-cards legend{grid-column:1/-1}
.apl-grades{grid-template-columns:repeat(2,minmax(0,1fr))}
.apl-card{position:relative;display:grid!important;gap:4px;align-content:start;border:1px solid var(--line);padding:16px;cursor:pointer;font-weight:400!important;background:var(--paper)}
.apl-card input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.apl-card:has(input:checked){border:2px solid var(--cobalt);padding:15px}
.apl-card:has(input:focus-visible){outline:2px solid var(--cobalt);outline-offset:2px}
.apl-c-t{font-family:var(--mincho);font-size:18px;font-weight:700}
.apl-c-p{font-family:var(--latin);font-size:22px;font-weight:700;line-height:1.3}.apl-c-p small{font-size:13px;font-family:var(--sans);font-weight:400}
.apl-card small{color:var(--sub);font-size:12px;line-height:1.6}
.apl-card .apl-c-d{color:var(--mute);font-size:11.5px}
.apl-plan .apl-c-t{font-size:16px}.apl-plan .apl-c-p{font-size:18px}
.apl-kari{display:inline-block;font:700 11px/1.6 var(--sans);border:1px solid var(--gold);color:#8A6A1C;padding:0 5px;margin-left:6px;vertical-align:middle}

.apl-adds{list-style:none;margin:0;padding:0}
.apl-adds li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.apl-add{display:flex!important;gap:10px;align-items:center;font-weight:700!important;cursor:pointer;min-width:0}
.apl-add input{width:18px;height:18px;flex:0 0 18px;margin:0}
.apl-adds li>label.apl-add{flex:1 1 auto}
.apl-qty{display:flex;align-items:center;gap:6px;flex:0 0 auto}.apl-qty input{width:64px;padding:6px 8px;font-size:15px;text-align:right}.apl-qty small{font-size:12px;color:var(--sub);white-space:nowrap}
.apl-pr{font-family:var(--latin);font-weight:700;white-space:nowrap}.apl-pr small{font-family:var(--sans);font-weight:400;font-size:11px;color:var(--sub)}
.apl-form:has(input[name=grade][value=premium]:checked) li[data-grade=standard],
.apl-form:not(:has(input[name=grade][value=premium]:checked)) li[data-grade=premium],
.apl-form:has(input[name=product][value=lp]:checked) li[data-prod="hp renewal"],
.apl-form:not(:has(input[name=product][value=lp]:checked)) li[data-prod=lp]{display:none}

.apl-q{margin:16px 0}
.apl-q>label,.apl-q legend{display:block;font-size:14px;font-weight:700;margin:0 0 8px;padding:0}
.apl-q small{display:block;color:var(--mute);font-size:12px;line-height:1.7;margin-top:6px}
.apl-q.bad input,.apl-q input[aria-invalid=true],.apl-q textarea[aria-invalid=true]{border-color:var(--shu)}
.apl-q.bad legend{color:var(--shu)}
.apl-req{display:inline-block;font-size:11px;font-weight:700;color:var(--shu);margin-left:6px}
.apl-chips{display:flex;flex-wrap:wrap;gap:8px}
.apl-chips label{position:relative;cursor:pointer}
.apl-chips input{position:absolute;opacity:0;width:1px;height:1px}
.apl-chips span{display:inline-block;padding:9px 16px;border:1px solid var(--line);font-size:14px;font-weight:400}
.apl-chips label:has(input:checked) span{border-color:var(--cobalt);background:#EEF0FD;font-weight:700}
.apl-chips label:has(input:focus-visible) span{outline:2px solid var(--cobalt);outline-offset:2px}

/* 信頼：ポータルの見本・作例の見本（実例と分ける） */
.apl-mini{border:1px solid var(--line);padding:14px;margin-top:16px;display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;font-size:13px;line-height:1.8}
.apl-mini p{margin:0}.apl-mini b{display:block;font-size:14px}
.apl-shot{height:78px;background:linear-gradient(#111 0 11px,#fff 11px);border:1px solid var(--line);position:relative}
.apl-shot::after{content:"";position:absolute;left:10px;right:40px;top:26px;height:28px;background:var(--wash);border-left:3px solid var(--shu)}
.apl-shot.warm{background:#FBF8F2}
.apl-tag{display:inline-block;font-size:11px;font-weight:400;border:1px solid var(--mute);color:var(--mute);padding:0 6px;margin-left:4px;vertical-align:1px}
.apl-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:26px 0 0}

/* 右：お申し込みの内容 */
.apl-sum{border:1px solid var(--ink);padding:18px 18px 20px;display:grid;gap:8px;font-size:14px;position:sticky;top:20px}
.apl-sum-h{font-size:15px}
.apl-ln{display:flex;justify-content:space-between;gap:12px}.apl-ln span:first-child{min-width:0}.apl-ln .num{white-space:nowrap}
.apl-tot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;border-top:1px solid var(--ink);padding-top:12px;margin-top:4px;font-weight:700;line-height:1.5}
.apl-tot small{display:block;font-weight:400;font-size:12px}
.apl-tot b{font-family:var(--latin);font-size:27px;line-height:1.1;white-space:nowrap}
.apl-rest{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin:0;font-size:12.5px;color:var(--sub)}.apl-rest dd{margin:0;text-align:right;color:var(--ink)}
.apl-note{display:block;color:var(--sub);font-size:12px;line-height:1.75}
.apl-prov{color:#8A6A1C}
.apl-trust{list-style:none;margin:8px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:grid;gap:9px;font-size:12.5px;color:var(--sub);line-height:1.7}
.apl-trust li{position:relative;padding-left:22px}
.apl-trust li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--cobalt);font-weight:700}
.apl-bar{display:none}

/* 手順3 */
.apl-conf{display:grid;grid-template-columns:8em minmax(0,1fr);gap:10px 16px;font-size:14.5px;margin:0 0 6px}
.apl-conf dt{color:var(--sub)}.apl-conf dd{margin:0}
.apl-fix{font-size:12.5px;margin-left:6px}
.apl-pay label{display:flex!important;gap:12px;align-items:flex-start;border:1px solid var(--line);padding:14px;margin:0 0 8px!important;font-size:14.5px;font-weight:400!important;cursor:pointer}
.apl-pay label:has(input:checked){border-color:var(--cobalt);box-shadow:inset 0 0 0 1px var(--cobalt)}
.apl-pay input{width:18px;height:18px;flex:0 0 18px;margin:4px 0 0}
.apl-pay small{display:block;color:var(--shu);font-size:12px}
.apl-pay label:has(input:disabled){opacity:.6;cursor:not-allowed}
.apl-agree{display:flex!important;gap:10px;align-items:flex-start;font-size:14px;font-weight:700!important;margin:18px 0 0!important;line-height:1.75}
.apl-agree input{width:20px;height:20px;flex:0 0 20px;margin:3px 0 0}
.apl-agree.bad span{color:var(--shu)}

/* 完了・テスト・相談・規約 */
.apl-narrow{max-width:640px}
.apl-done .apl-h1{margin-bottom:16px}
.apl-big{font-family:var(--latin);font-size:32px;font-weight:700;margin:6px 0}.apl-big small{font-family:var(--sans);font-size:13px;font-weight:400}
.apl-bank{border:1px solid var(--ink);padding:18px;margin:20px 0}.apl-bank h2{font-size:16px}.apl-bank p{margin:6px 0}
.apl-next{list-style:none;counter-reset:n;padding:0;margin:24px 0;display:grid;gap:14px}
.apl-next li{counter-increment:n;position:relative;padding-left:44px;font-size:14px;color:var(--sub);line-height:1.75}
.apl-next li::before{content:counter(n);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--cobalt);color:#fff;font:700 15px/30px var(--latin);text-align:center}
.apl-next b{display:block;color:var(--ink);font-size:15px}
.apl-tips{background:var(--wash);padding:14px 18px;font-size:13.5px}.apl-tips ul{margin:6px 0 0;padding-left:1.2em}
.apl-terms section{margin:26px 0}.apl-terms h2{font-size:18px;margin-bottom:8px}.apl-terms li,.apl-terms dd{font-size:14.5px;line-height:1.85}.apl-terms dt{font-weight:700;margin-top:10px}.apl-terms dd{margin:0}
.apl-form textarea{min-height:140px}

.apl-legal{border-top:1px solid var(--line);margin-top:40px;padding-top:14px;font-size:12px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 18px}

/* 社内：離脱と入金待ち */
.apl-staff h1{margin:4px 0 18px}.apl-staff section{margin:0 0 30px}.apl-staff h2{font-size:17px;margin:0 0 10px}
.apl-ft{border-collapse:collapse;width:100%;max-width:720px;font-size:14px}.apl-ft th,.apl-ft td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}.apl-ft .r{text-align:right}
.apl-wait{list-style:none;margin:0;padding:0;max-width:760px}
.apl-wait li{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 0}.apl-wait form{margin:0}

/* スマホ */
@media(max-width:860px){
  .apl-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .apl-sum{position:static}
  .apl-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:5;align-items:center;gap:10px;background:var(--paper);border-top:1px solid var(--ink);padding:10px 16px calc(10px + env(safe-area-inset-bottom));font-size:13px}
  .apl-bar b{font-family:var(--latin);font-size:20px;margin-right:auto}
  .apl:has(.apl-bar){padding-bottom:64px}
}
@media(max-width:640px){
  .apl-wrap{padding:20px 16px 32px}.apl-top{padding:12px 16px}.apl-top-r{gap:10px;font-size:12px}
  .apl-steps a,.apl-steps span{padding:9px 8px;font-size:11.5px;line-height:1.4}.apl-steps b{font-size:16px}
  .apl-cards,.apl-grades{grid-template-columns:minmax(0,1fr)}
  .apl-card{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:12px}
  .apl-card .apl-c-t{grid-column:1}.apl-card .apl-c-p{grid-column:2;grid-row:1;text-align:right}.apl-card small{grid-column:1/-1}
  .apl-mini{grid-template-columns:80px minmax(0,1fr);gap:12px}.apl-shot{height:60px}
  .apl-conf{grid-template-columns:minmax(0,1fr)}.apl-conf dt{font-size:12.5px;margin-top:4px}
  .apl-act .btn{flex:1 1 auto}
}