@charset "utf-8";

/* Desktop layout and hover presentation continue to use style.css. */
.market-page [hidden], .market-page .market-mobile-only { display: none !important; }
.market-page .market-filters > summary, .market-page #marketIntro > summary, .market-page .market-history > summary { display: none; }
.market-page .market-table-scroll, .market-page .market-log-scroll { overflow-x: auto; }
.market-page dialog { width: min(680px, calc(100% - 24px)); max-height: calc(100dvh - 32px); border: 1px solid #8196a6; border-radius: 10px; background: #f5ffff; padding: 16px; }
.market-page dialog::backdrop { background: rgb(0 0 0 / 45%); }
.market-page .market-dialog-header { display: flex; gap: 12px; align-items: start; justify-content: space-between; position: sticky; top: -16px; padding: 8px 0; background: #f5ffff; z-index: 1; }
.market-page .market-dialog-header h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.market-page .market-dialog-header button { white-space: nowrap; }
.market-page #marketDialogContent { overflow-x: auto; overflow-wrap: anywhere; line-height: 1.7; margin-top: 12px; }
.market-page .market-map { position: relative; width: 100%; }
.market-page .market-map img { display: block; width: 100%; height: auto; }
.market-page .market-map-marker { position: absolute; color: red; font-size: 26px; font-weight: bold; transform: translate(-50%, -50%); }

@media (max-width: 760px) {
  .market-page { margin: 12px; }
  .market-page, .market-page a, .market-page input, .market-page select,
  .market-page button, .market-page p, .market-page td, .market-page th { font-size: 16px; }
  .market-page * { box-sizing: border-box; }
  .market-page .market-mobile-only:not([hidden]) { display: inline-block !important; }
  .market-page .site-title { margin: 0 0 12px; line-height: 1.4; }
  .market-page .site-title a { font-size: 21px !important; }
  .market-page button, .market-page select, .market-page input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; padding: 8px; }
  .market-page button { cursor: pointer; }
  .market-page input[type="checkbox"], .market-page input[type="radio"] { width: 20px; height: 20px; vertical-align: middle; }
  .market-page :focus-visible { outline: 3px solid #125fa6; outline-offset: 2px; }
  .market-page #headerAd, .market-page #footerAd { max-width: 100%; overflow: hidden; }
  .market-page #marketIntro > summary, .market-page .market-history > summary { display: block; cursor: pointer; padding: 12px 0; font-weight: bold; }
  .market-page #marketIntro > summary::before, .market-page .market-history > summary::before { content: '＋ '; }
  .market-page #marketIntro[open] > summary::before, .market-page .market-history[open] > summary::before { content: '− '; }
  .market-page #marketIntro { line-height: 1.5; }
  .market-page .market-history:has(> div:empty) { display: none; }
  .market-page .search-layout, .market-page .search-layout > tbody, .market-page .search-layout > tbody > tr { display: block; width: 100%; }
  .market-page .search-layout > tbody > tr > td { display: block; width: 100%; min-width: 0; }
  .market-page .search-layout .search-spacer { display: none; }
  .market-page .search-main table, .market-page .search-main tbody, .market-page .search-main tr { display: block; width: 100%; }
  .market-page .search-main td { display: block; width: 100%; padding: 0; }
  .market-page .search-main label { display: block; margin: 8px 0 5px; }
  .market-page #worldSelect, .market-page #itemEdit { width: 100%; min-width: 0; }
  .market-page #searchBtn, .market-page #filterBtn { margin-top: 10px; background: #174f80; color: white; border: 1px solid #174f80; border-radius: 4px; }
  .market-page #hintPain { margin-top: 8px; }
  .market-page #suggestPain, .market-page #historyPain1, .market-page #historyPain2 { max-height: 260px; overflow: auto; overflow-wrap: anywhere; }
  .market-page #suggestPain:not(:empty), .market-page #historyPain1:not(:empty), .market-page #historyPain2:not(:empty) { background: #f5ffff; padding: 10px; border: 1px solid #bfd0dd; border-radius: 6px; margin-top: 12px; }
  .market-page #suggestPain:not(:empty)::before { content: '候補'; display: block; font-weight: bold; margin-bottom: 6px; }
  .market-page #suggestPain a, .market-page #historyPain1 a, .market-page #historyPain2 a { display: inline-block; padding: 10px 0; min-height: 44px; }
  .market-page #resultPain1 h2 { font-size: 19px; line-height: 1.7; overflow-wrap: anywhere; }
  .market-page #resultPain1 h2 .heading-spacer { display: block !important; width: 0 !important; }
  .market-page #resultPain1 h2 span[style*="width:30px"] { width: 8px !important; }
  .market-page #resultPain1 h2 img[title] { min-width: 44px; min-height: 44px; padding: 12px; vertical-align: middle; }
  .market-page #resultPain1 h2 img[title="説明文固定表示"] { display: none; }
  .market-page .market-description-button { margin-left: 8px; font-size: 14px; }
  .market-page .market-price-layout, .market-page .market-price-layout > tbody, .market-page .market-price-layout > tbody > tr { display: block; width: 100%; }
  .market-page .market-price-layout > tbody > tr > td { display: block; width: 100%; padding: 0; margin-bottom: 16px; }
  .market-page .market-price-layout > tbody > tr > td[width="20"] { display: none; }
  .market-page .market-table-scroll { max-width: 100%; margin-top: 8px; }
  .market-page .market-table-scroll table { width: 100%; white-space: nowrap; }
  .market-page .market-table-scroll td, .market-page .market-table-scroll th { font-size: 13px; padding: 7px; }
  .market-page .market-filters > summary { display: block; cursor: pointer; padding: 12px; background: #f5ffff; border: 1px solid #bfd0dd; border-radius: 6px; font-weight: bold; }
  .market-page .market-filters > summary::before { content: '＋ '; }
  .market-page .market-filters[open] > summary::before { content: '− '; }
  .market-page .market-filters fieldset { width: 100% !important; margin: 10px 0; padding: 10px; min-width: 0; }
  .market-page .market-filters table, .market-page .market-filters tbody, .market-page .market-filters tr { display: block; width: 100%; }
  .market-page .market-filters td { display: block; width: 100%; padding: 0; overflow-wrap: anywhere; }
  .market-page .market-filters td:first-child { font-weight: bold; margin: 12px 0 6px; }
  .market-page .market-filters label { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
  .market-page .market-filters select { max-width: 100%; margin: 4px 0; }
  .market-page .market-filters input[type="text"], .market-page .market-filters input[type="date"] { width: calc(50% - 14px); min-width: 0; font-size: 14px; }
  .market-page #itemDescFixed { max-width: 100%; }
  .market-page .market-log-toolbar { display: flex !important; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .market-page .market-log-toolbar span, .market-page .market-log-toolbar button { font-size: 14px; }
  .market-page #resultPain4:not(.market-log-as-table) .market-log { display: block; width: 100%; background: transparent; }
  .market-page #resultPain4:not(.market-log-as-table) .market-log tbody { display: grid; gap: 12px; }
  .market-page #resultPain4:not(.market-log-as-table) .market-log .listHeader { display: none; }
  .market-page #resultPain4:not(.market-log-as-table) .market-log tr:not(.listHeader) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; background: white; padding: 12px; border: 1px solid #bfd0dd; border-radius: 8px; }
  .market-page #resultPain4:not(.market-log-as-table) .market-log td { padding: 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 14px; text-align: left; }
  .market-page #resultPain4:not(.market-log-as-table) .market-log td::before { content: attr(data-label); display: block; color: #536876; font-size: 12px; margin-bottom: 4px; }
  .market-page #resultPain4:not(.market-log-as-table) .market-log .market-log-name, .market-page #resultPain4:not(.market-log-as-table) .market-log .market-log-title { grid-column: 1 / -1; }
  .market-page #resultPain4:not(.market-log-as-table) .market-log .market-log-name { font-size: 16px; font-weight: bold; line-height: 1.6; }
  .market-page #resultPain4:not(.market-log-as-table) .market-log .market-log-name::before { display: none; }
  .market-page #resultPain4:not(.market-log-as-table) .market-log .market-log-price { font-size: 19px; font-weight: bold; }
  .market-page .market-detail-button { font-size: 13px; margin-left: 6px; }
  .market-page .market-more { width: 100%; margin-top: 12px; }
  .market-page .market-log-as-table .market-log { min-width: 900px; }
  .market-page .market-log-as-table .market-log td, .market-page .market-log-as-table .market-log th { font-size: 14px; padding: 7px; }
}