/* いくらで売れるか調べる（簡易査定・H11・DEV-034・2026-09-29〜）: 頭は es-。見た目の正は design/exports/estimate-pc.png
   PC は入力と結果の2列（結果はスクロールしても残る）、スマホは入力の直下に結果。Orange は掲載へ進む1手だけ。hover で浮かせない */
.page-main:has(> .es--page) { max-width: none; padding: 0; }
.es { font-family: var(--font-body); color: var(--text-body); display: flex; flex-direction: column; gap: 16px; }
.es--page { max-width: 1120px; margin: 0 auto; padding: 28px 16px 56px; }
.es a { text-decoration: none; }
.es-head { display: flex; flex-direction: column; gap: 6px; }
.es-h1 { margin: 0; font-size: 26px; font-weight: 800; color: var(--text-heading); letter-spacing: var(--ls-jp-heading); }
.es-sub { margin: 0; font-size: 13px; color: var(--text-muted); }
.es-h2 { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--text-heading); }
.es-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 24px; align-items: start; }
.my-main .es-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
.es-card { border: 1px solid var(--border-subtle); border-radius: var(--r-card); background: var(--surface-card); padding: 22px 24px; }

/* 入力 */
.es-in { display: flex; flex-direction: column; gap: 16px; }
.es-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-heading); min-width: 0; }
.es-f small { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.es-f :is(input, select) { height: 48px; padding: 0 14px; border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--surface-card); color: var(--text-heading); font-size: 16px; font-weight: 400; width: 100%; }
.es-f :is(input, select):focus { outline: 2px solid var(--border-brand); outline-offset: 0; border-color: var(--border-brand); }
.es-f :is(input, select):disabled { background: var(--surface-sunken); color: var(--text-muted); }
.es-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--text-link); font-size: 13px; font-weight: 700; }
.es-more > summary::-webkit-details-marker { display: none; }
.es-more > summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.es-more[open] > summary::before { transform: rotate(45deg); }
.es-more__body { margin-top: 14px; display: flex; flex-direction: column; gap: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.es-idrow { display: flex; gap: 8px; }
.es-idrow input { height: 48px; padding: 0 14px; border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--surface-card); color: var(--text-heading); font-size: 16px; flex: 1; min-width: 0; }
.es-idrow input:disabled { background: var(--surface-sunken); }

/* 結果 */
.es-out { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; }
.es-out__k { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-heading); }
.es-tag { height: 22px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: var(--r-pill); background: var(--warning-bg); color: var(--text-heading); font-size: 11px; font-weight: 700; }
.es-out__v { margin: 0; min-height: 52px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; color: var(--text-heading); padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.es-out__v small { font-size: 15px; font-weight: 700; }
.es-out__v b { font: 800 40px/1.1 var(--font-num); letter-spacing: -.01em; }
.es-out__v em { font-style: normal; font-size: 28px; font-weight: 700; margin: 0 2px; }
.es-out__ph { font-size: 14px; color: var(--text-muted); align-self: center; }
.es-out__msg { margin: -4px 0 0; font-size: 12px; color: var(--text-body); }
.es-rows { margin: 0; display: flex; flex-direction: column; }
.es-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.es-rows dt { color: var(--text-body); }
.es-rows dd { margin: 0; font: 700 14px var(--font-num); color: var(--text-heading); }
.es-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border-radius: var(--r-md); border: 1px solid transparent; font-size: 16px; font-weight: 700; cursor: pointer; text-align: center; }
.es-btn--cta { width: 100%; background: var(--accent); color: var(--text-on-accent); }
.es-btn--cta:hover { background: var(--accent-hover); color: var(--text-on-accent); }
.es-btn--cta:disabled, .es-btn--cta[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.es-btn--cta[aria-disabled="true"]:hover { background: var(--accent); }
.es-btn--line { min-height: 48px; font-size: 14px; background: var(--surface-card); border-color: var(--border-default); color: var(--text-link); flex: none; }
.es-btn--line:hover:not(:disabled) { background: var(--surface-sunken); }
.es-btn--line:disabled { color: var(--text-muted); cursor: default; }
.es-out__foot { margin: 0; font-size: 12px; color: var(--text-muted); }
.es-how-btn { border: 0; background: none; padding: 0; color: var(--text-muted); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.es-how-btn :is(i, svg) { font-size: 11px; }
.es-how { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-sunken); font-size: 12px; line-height: 1.7; color: var(--text-body); }
.es-how p { margin: 0 0 6px; }
.es-how p:last-child { margin: 0; }
.es-out__note { margin: 0; font-size: 12px; color: var(--text-muted); }

/* これまでの査定（会員） */
.es-rec ul { list-style: none; margin: 0; padding: 0; }
.es-rec li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.es-rec li:first-child { border-top: 0; }
.es-rec li > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.es-rec b { font-size: 14px; color: var(--text-heading); }
.es-rec small { font-size: 12px; color: var(--text-muted); }
.es-rec a { color: var(--text-link); font-size: 13px; font-weight: 700; white-space: nowrap; }
.es-rec__done { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 960px) { .my-main .es-grid { grid-template-columns: 1fr; } .my-main .es-out { position: static; } }
@media (max-width: 760px) {
  .es--page { padding: 18px 16px 40px; }
  .es-h1 { font-size: 22px; }
  .es-grid { grid-template-columns: 1fr; gap: 16px; }
  .es-card { padding: 18px 16px; }
  .es-out { position: static; }
  .es-out__v b { font-size: 34px; }
}
.es [hidden] { display: none !important; }