*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
color: #333;
background-color: #fff;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
body.home,
body.page-tournaments-search {
background: #fff url(https://badmap.jp/wp-content/uploads/2026/10/badmap-bg-2.webp) center top / 100% auto repeat-y;
}
ul {
list-style: none;
}
a {
color: #2563a0;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
}
select,
input,
button {
font-family: inherit;
font-size: inherit;
} .container {
max-width: 1120px;
margin: 0 auto;
padding: 0 16px;
} .site-header {
border-bottom: 1px solid #e0e0e0;
background-color: #fff;
}
.site-header__inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
}
.site-header__home {
display: none;
}
.site-logo {
display: flex;
align-items: center;
text-decoration: none;
}
.site-logo__img {
height: 32px;
width: auto;
}
.site-logo:hover {
text-decoration: none;
opacity: 0.8;
}
.site-nav {
display: flex;
gap: 24px;
}
.site-nav__link {
font-size: 14px;
color: #555;
text-decoration: none;
white-space: nowrap;
}
.site-nav__link:hover {
color: #2563a0;
text-decoration: none;
} .search-section {
padding: 32px 0;
border-bottom: 1px solid #e0e0e0;
}
.search-section__title {
font-size: 20px;
font-weight: 700;
color: #333;
margin-bottom: 20px;
}
.search-form__top-row {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 12px;
}
@media (min-width: 768px) {
.search-form__top-row {
flex-direction: row;
align-items: stretch;
}
.search-form__top-row .search-form__keyword {
flex: 1;
}
.search-form__top-row .search-form__fields {
flex: 1;
}
}
.search-form__keyword {
position: relative;
}
.search-form__label--hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.search-form__more {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 44px;
margin: 0;
padding: 8px 2px;
border: 0;
background: transparent;
color: #2563a0;
font-size: 14px;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.search-form__more:hover {
color: #1d4c7b;
}
.search-form__more-side {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.search-form__more-badge {
padding: 2px 8px;
border-radius: 999px;
background: #e7f0f8;
color: #1d4c7b;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
}
.search-form__more-mark {
display: inline-block;
width: 8px;
height: 8px;
margin-top: -4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
flex-shrink: 0;
}
.search-form__more[aria-expanded="true"] .search-form__more-mark {
margin-top: 4px;
transform: rotate(225deg);
}
.search-form__extra {
display: grid;
grid-template-rows: 0fr;
}
.search-form.is-ready .search-form__extra {
transition: grid-template-rows 0.42s cubic-bezier(0.16, 1.28, 0.32, 1);
}
.search-form.is-ready .search-form__more-mark {
transition: transform 0.32s cubic-bezier(0.16, 1.28, 0.32, 1), margin-top 0.32s cubic-bezier(0.16, 1.28, 0.32, 1);
}
.search-form__extra.is-open {
grid-template-rows: 1fr;
}
.search-form__extra-inner {
min-height: 0;
overflow: hidden;
}
.search-form__extra-body {
padding: 8px 2px 2px;
}
.search-form__hint {
margin-top: 8px;
color: #6b7280;
font-size: 12px;
line-height: 1.6;
}
.search-form__fields {
display: flex;
align-items: stretch;
gap: 16px;
margin-bottom: 0;
}
.search-form__field {
flex: 1;
min-width: 0;
}
.search-form__field--event-radio {
display: none;
}
.search-form__radio-group {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
}
.search-form__radio {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
color: #333;
cursor: pointer;
white-space: nowrap;
}
.search-form__radio input[type="radio"] {
margin: 0;
}
@media (min-width: 768px) {
.search-form__field--event-select {
display: none;
}
.search-form__field--event-radio {
display: block;
}
}
.search-form__label {
display: block;
font-size: 13px;
font-weight: 600;
color: #555;
margin-bottom: 6px;
}
.search-form__select,
.search-form__input {
width: 100%;
height: 40px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
color: #333;
font-size: 16px;
appearance: auto;
}
.search-form__input::placeholder {
color: #8b949e;
opacity: 1;
}
.search-form__select.is-placeholder {
color: #8b949e;
}
.search-form__select option {
color: #333;
}
.search-form__select:disabled,
.search-form__input:disabled {
background-color: #f5f5f5;
color: #999;
cursor: not-allowed;
}
.search-form__date-range {
display: flex;
align-items: center;
gap: 6px;
}
.search-form__date-range .search-form__input {
flex: 1;
min-width: 0;
}
.search-form__date-separator {
font-size: 14px;
color: #888;
flex-shrink: 0;
}
.search-form__submit {
display: block;
width: 100%;
max-width: 280px;
margin: 0 auto;
padding: 10px 24px;
background-color: #b0b8c1;
color: #fff;
font-size: 15px;
font-weight: 600;
border: none;
border-radius: 4px;
cursor: not-allowed;
} .section-title {
font-size: 18px;
font-weight: 700;
color: #333;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid #2563a0;
} .prefecture-section {
padding: 32px 0;
background-color: #FFF;
border-bottom: 1px solid #e0e0e0;
}
.prefecture-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 40px;
}
.prefecture-group__name {
font-size: 14px;
font-weight: 700;
color: #333;
margin-bottom: 6px;
}
.prefecture-group__list {
font-size: 14px;
color: #2563a0;
line-height: 1.8;
} .column-section {
padding: 32px 0;
}
.column-list {
display: flex;
flex-direction: column;
}
.column-list__item {
padding: 12px 0;
border-bottom: 1px solid #e8e8e8;
}
.column-list__item:first-child {
padding-top: 0;
}
.column-list__title {
display: block;
font-size: 15px;
font-weight: 700;
color: #333;
margin-bottom: 4px;
}
.column-list__desc {
display: block;
font-size: 13px;
color: #888;
line-height: 1.6;
}  .column-categories {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.column-categories__link {
font-size: 13px;
color: #555;
text-decoration: none;
padding: 4px 12px;
border: 1px solid #ddd;
border-radius: 4px;
transition: background-color 0.15s;
}
.column-categories__link:hover {
background-color: #f0f0f0;
}
.column-categories__link.is-active {
background-color: #333;
color: #fff;
border-color: #333;
}
.column-list__link {
display: block;
text-decoration: none;
color: inherit;
}
.column-list__link:hover .column-list__title {
text-decoration: underline;
}
.column-list__date {
display: block;
font-size: 12px;
color: #aaa;
margin-top: 2px;
}
.column-empty {
font-size: 14px;
color: #888;
padding: 24px 0;
} .site-footer {
border-top: 1px solid #e0e0e0;
background-color: #f7f8fa;
padding: 24px 0 16px;
}
.site-footer__inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 16px;
}
.site-footer__content {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.site-footer__name {
font-size: 15px;
font-weight: 700;
color: #333;
}
.site-footer__logo-img {
height: 24px;
width: auto;
}
.site-footer__links {
display: flex;
gap: 32px;
}
.site-footer__group {
display: flex;
flex-direction: column;
gap: 4px;
}
.site-footer__link-text {
font-size: 13px;
color: #888;
text-decoration: none;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: inherit;
}
.site-footer__partners {
padding-top: 16px;
margin-bottom: 16px;
border-top: 1px solid #e0e0e0;
}
.site-footer__partners-label {
display: block;
font-size: 11px;
font-weight: 600;
color: #999;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.site-footer__partners-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.site-footer__partner {
font-size: 12px;
color: #777;
text-decoration: none;
white-space: nowrap;
}
.site-footer__partner:hover {
color: #0066cc;
text-decoration: underline;
}
.site-footer__copyright {
font-size: 12px;
color: #aaa;
text-align: center;
padding-top: 16px;
border-top: 1px solid #e0e0e0;
} @media (max-width: 767px) {
.search-section__title {
font-size: 18px;
}
.search-form__fields {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.search-form__submit {
max-width: 100%;
}
.prefecture-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.area-panel__footer {
align-items: stretch;
}
.area-panel__submit {
flex: 1 1 100%;
margin-left: 0;
}
.site-footer__content {
flex-direction: column;
gap: 16px;
}
.site-footer__links {
gap: 24px;
}
} .static-page-section {
padding: 32px 0 48px;
}
.static-page-section__title {
font-size: 22px;
font-weight: 700;
color: #333;
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 2px solid #2563a0;
} .wpcf7 label {
display: block;
margin-bottom: 20px;
font-size: 14px;
font-weight: 600;
color: #333;
line-height: 1.6;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
display: block;
width: 100%;
margin-top: 6px;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
color: #333;
font-size: 14px;
line-height: 1.7;
transition: border-color 0.15s ease;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
border-color: #2563a0;
outline: 2px solid rgba(37, 99, 160, 0.2);
outline-offset: 0;
}
.wpcf7 textarea {
min-height: 180px;
resize: vertical;
}
.wpcf7 select {
appearance: auto;
height: 42px;
}
.wpcf7 .wpcf7-acceptance {
display: flex;
align-items: center;
gap: 8px;
margin: 24px 0;
font-size: 14px;
color: #555;
}
.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #2563a0;
flex-shrink: 0;
}
.wpcf7 input[type="submit"] {
display: block;
width: 100%;
max-width: 280px;
margin: 0 auto;
padding: 12px 24px;
background-color: #2563a0;
color: #fff;
font-size: 15px;
font-weight: 600;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.wpcf7 input[type="submit"]:hover {
background-color: #1d4c7b;
}
.wpcf7 input[type="submit"]:focus-visible {
outline: 2px solid #2563a0;
outline-offset: 2px;
}
.wpcf7 .wpcf7-not-valid {
border-color: #c53030;
}
.wpcf7 .wpcf7-not-valid-tip {
display: block;
margin-top: 4px;
color: #c53030;
font-size: 12px;
font-weight: 500;
}
.wpcf7 .wpcf7-response-output {
margin: 20px 0 0;
padding: 12px 16px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 14px;
text-align: center;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #34a853;
color: #1a6b2d;
background-color: #f0faf3;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
border-color: #c53030;
color: #9d3535;
background-color: #fdf8f7;
}
.url-title-hint {
margin-top: 4px;
font-size: 12px;
color: #2563a0;
line-height: 1.5;
}
.url-title-hint:empty {
display: none;
}
.contact-hp {
position: absolute !important;
left: -9999px !important;
height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
}
.wpcf7 .wpcf7-spinner {
display: none;
}
.wpcf7 form.submitting .wpcf7-spinner {
display: inline-block;
}
@media (max-width: 767px) {
.wpcf7 input[type="submit"] {
max-width: 100%;
}
}
.static-page-section__body h2 {
font-size: 17px;
font-weight: 700;
color: #333;
margin: 28px 0 8px;
}
.static-page-section__body h2:first-child {
margin-top: 0;
}
.static-page-section__body p {
font-size: 14px;
color: #555;
line-height: 1.85;
margin-bottom: 8px;
} .search-form__submit { background-color: #2563a0; cursor: pointer; }
.search-form__submit:hover { background-color: #1d4c7b; }
.search-form__select:focus-visible, .search-form__input:focus-visible, .search-form__submit:focus-visible, .search-form__more:focus-visible { outline: 2px solid #2563a0; outline-offset: 2px; }
.results-section { padding: 32px 0; border-bottom: 1px solid #e0e0e0; }
.results-count { margin-bottom: 14px; color: #555; font-size: 14px; }
.results-message { font-size: 14px; color: #555; padding: 12px 0; }
.results-item { padding: 16px 0; border-bottom: 1px solid #e8e8e8; }
.results-item__title { font-size: 16px; font-weight: 700; }
.results-item__meta { display: flex; flex-wrap: wrap; column-gap: 18px; margin-top: 6px; color: #666; font-size: 13px; }
.results-pagination { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.results-pagination .page-numbers { display: inline-block; min-width: 32px; padding: 5px 9px; border: 1px solid #ddd; border-radius: 4px; text-align: center; }
.results-pagination .current { background: #2563a0; border-color: #2563a0; color: white; }  .prefecture-group__list a {
display: inline-flex;
align-items: baseline;
gap: 3px;
margin: 0 8px 4px 0;
padding: 2px 6px;
border-radius: 3px;
white-space: nowrap;
}
.area-finder__count {
color: #6b7280;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.area-finder__pref.is-active .area-finder__count {
color: #1d4c7b;
}
.area-finder__count.is-zero,
.area-panel__city-count.is-zero {
color: #b0b6bd;
font-weight: 600;
}
.area-panel__title .area-finder__count {
font-size: 14px;
}
.area-finder__pref.is-active {
background: #e7f0f8;
color: #1d4c7b;
text-decoration: none;
}
.area-finder__pref:focus-visible {
outline: 2px solid #2563a0;
outline-offset: 2px;
}
.area-panel {
grid-column: 1 / -1;
min-width: 0;
}
.area-panel:not([hidden]) {
display: block;
}
.area-panel__clip {
overflow: visible;
}
.area-panel__body {
margin-top: 12px;
padding: 16px;
border: 1px solid #d5dde6;
border-radius: 6px;
background: #f7f9fb;
box-shadow: 0 8px 24px rgba(37, 99, 160, 0.08);
}
.area-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.area-panel__title {
display: inline-flex;
align-items: baseline;
gap: 6px;
min-width: 0;
font-size: 16px;
font-weight: 700;
color: #333;
}
.area-panel__close,
.area-panel__reset {
border: none;
background: transparent;
color: #2563a0;
font-size: 13px;
font-weight: 700;
cursor: pointer;
padding: 8px;
}
.area-panel__reset:disabled {
visibility: hidden;
}
.area-panel__all {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
margin-top: 12px;
padding: 10px 16px;
border: 1px solid #2563a0;
border-radius: 4px;
background: #fff;
color: #1d4c7b;
font-size: 15px;
font-weight: 700;
text-align: center;
text-decoration: none;
}
.area-panel__all:hover {
background: #e7f0f8;
text-decoration: none;
}
.area-panel__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
gap: 0 12px;
margin-top: 8px;
}
.area-panel__city {
display: flex;
align-items: center;
gap: 4px;
min-height: 32px;
margin: 0;
padding: 1px 2px;
border: 0;
border-radius: 4px;
background: transparent;
color: #333;
font-size: 14px;
line-height: 1.3;
cursor: pointer;
}
.area-panel__city-name {
flex: 0 1 auto;
min-width: 0;
}
.area-panel__city-count {
flex: 0 0 auto;
margin-left: 1px;
color: #5b6770;
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.area-panel__city input {
width: 15px;
height: 15px;
margin-top: 1px;
flex-shrink: 0;
accent-color: #2563a0;
}
.area-panel__city:hover {
background: #f3f6f9;
}
.area-panel__city.is-checked,
.area-panel__city.is-checked:hover {
background: #e7f0f8;
}
.area-panel__city input:focus {
outline: none;
}
.area-panel__city:focus-within {
outline: 2px solid #2563a0;
outline-offset: 2px;
}
.area-panel__none {
margin-top: 8px;
color: #555;
font-size: 13px;
line-height: 1.6;
}
.area-panel__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-top: 12px;
}
.area-panel__footer[hidden],
.area-panel__none[hidden],
.area-panel__count[hidden] {
display: none;
}
.area-panel__count {
flex: 1 1 auto;
color: #555;
font-size: 13px;
}
.area-panel__submit {
flex: 0 0 auto;
min-height: 44px;
margin-left: auto;
padding: 10px 20px;
border: none;
border-radius: 4px;
background: #2563a0;
color: #fff;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.area-panel__submit:hover:not(:disabled) {
background: #1d4c7b;
}
.area-panel__submit:disabled {
background: #b0b8c1;
cursor: not-allowed;
}
.area-panel__close:focus-visible,
.area-panel__reset:focus-visible,
.area-panel__all:focus-visible,
.area-panel__submit:focus-visible {
outline: 2px solid #2563a0;
outline-offset: 2px;
}
.search-form__checkbox,
.search-sidebar__checkbox,
.global-search-modal__checkbox,
.search-modal__checkbox {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #333;
cursor: pointer;
} .search-form__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 16px;
}
.search-form__actions .search-form__submit {
margin: 0;
}
.search-form__clear {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #626a72;
font-size: 13px;
white-space: nowrap;
text-decoration: underline;
} .search-form__city-panel {
margin-top: 4px;
}
.search-form__city-panel[hidden] {
display: none;
} .search-form__city-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 40px;
margin: 0;
padding: 8px 12px;
border: 1px solid #b8cde0;
border-radius: 8px;
background: #edf3f9;
color: #2563a0;
font-size: 14px;
font-weight: 700;
text-align: left;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.search-form__city-toggle:hover {
background: #dde8f2;
border-color: #8faec8;
color: #1d4c7b;
}
.search-form__city-toggle:focus-visible {
outline: 2px solid #2563a0;
outline-offset: 2px;
}
.search-form__city-toggle-side {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.search-form__city-badge {
padding: 2px 8px;
border-radius: 999px;
background: #e7f0f8;
color: #1d4c7b;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
}
.search-form__city-badge[hidden] {
display: none;
}
.search-form__city-mark {
display: inline-block;
width: 8px;
height: 8px;
margin-top: -4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
flex-shrink: 0;
}
.search-form__city-toggle[aria-expanded="true"] .search-form__city-mark {
margin-top: 4px;
transform: rotate(225deg);
}
.search-form.is-ready .search-form__city-mark {
transition: transform 0.32s cubic-bezier(0.16, 1.28, 0.32, 1), margin-top 0.32s cubic-bezier(0.16, 1.28, 0.32, 1);
} .search-form__city-drawer {
display: grid;
grid-template-rows: 0fr;
}
.search-form.is-ready .search-form__city-drawer {
transition: grid-template-rows 0.42s cubic-bezier(0.16, 1.28, 0.32, 1);
}
.search-form__city-drawer.is-open {
grid-template-rows: 1fr;
}
.search-form__city-drawer-inner {
min-height: 0;
overflow: hidden;
}
.search-form__city-body {
padding: 14px 16px;
border: 1px solid #d5dde6;
border-radius: 6px;
background: #f7f9fb;
box-shadow: 0 4px 16px rgba(37, 99, 160, 0.06);
}
.search-form__city-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0 10px;
}
.search-form__city-item {
display: flex;
align-items: center;
gap: 4px;
min-height: 32px;
padding: 1px 2px;
border-radius: 4px;
background: transparent;
color: #333;
font-size: 14px;
line-height: 1.3;
cursor: pointer;
}
.search-form__city-item:hover {
background: #f3f6f9;
}
.search-form__city-item.is-checked,
.search-form__city-item.is-checked:hover {
background: #e7f0f8;
}
.search-form__city-item input {
width: 15px;
height: 15px;
margin-top: 1px;
flex-shrink: 0;
accent-color: #2563a0;
}
.search-form__city-item input:focus {
outline: none;
}
.search-form__city-item:focus-within {
outline: 2px solid #2563a0;
outline-offset: 2px;
}
.search-form__city-name {
flex: 0 1 auto;
min-width: 0;
}
.search-form__city-count-badge {
flex: 0 0 auto;
margin-left: 1px;
color: #5b6770;
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.search-form__city-count-badge.is-zero {
color: #b0b6bd;
font-weight: 600;
}
.search-form__city-none {
margin-top: 4px;
color: #555;
font-size: 13px;
line-height: 1.6;
}
.search-form__city-none[hidden] {
display: none;
}
.search-form__city-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-top: 10px;
}
.search-form__city-footer[hidden] {
display: none;
}
.search-form__city-count {
flex: 1 1 auto;
color: #555;
font-size: 13px;
}
.search-form__city-count[hidden] {
display: none;
}
.search-form__city-reset {
border: none;
background: transparent;
color: #2563a0;
font-size: 13px;
font-weight: 700;
cursor: pointer;
padding: 8px;
}
.search-form__city-reset:disabled {
visibility: hidden;
}
.search-form__city-reset:focus-visible {
outline: 2px solid #2563a0;
outline-offset: 2px;
}
.search-form__cities {
margin-top: 12px;
}
.search-form__cities-text {
color: #333;
font-size: 13px;
line-height: 1.6;
}
.search-form__cities-text a {
margin-left: 8px;
white-space: nowrap;
}
.search-section--results {
padding-top: 16px;
padding-bottom: 26px;
background: #fff;
}
.search-section--results .search-section__title {
margin-bottom: 16px;
}
.search-form__submit {
transition: background-color 0.15s ease;
} .breadcrumbs-bar {
border-bottom: 1px solid #e0e0e0;
}
.breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
padding: 16px 0 8px;
color: #6b7280;
font-size: 12px;
}
.breadcrumbs a {
color: #606975;
}
.breadcrumbs__current {
min-width: 0;
overflow-wrap: anywhere;
} .results-section {
padding: 28px 0 64px;
border-bottom: 0;
}
.results-header {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.results-header__title {
min-width: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.5;
overflow-wrap: anywhere;
}
.results-count {
margin: 0;
color: #66707c;
font-size: 13px;
white-space: nowrap;
}
.results-count strong {
font-size: 17px;
color: #333;
font-weight: 700;
}
.results-empty {
padding: 34px 0 48px;
color: #68717a;
font-size: 14px;
}
.results-empty__title {
margin-bottom: 7px;
font-size: 15px;
color: #333;
font-weight: 700;
}
.results-message--error {
padding: 18px 0;
color: #9d3535;
}
.tournament-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
box-sizing: border-box;
max-width: 1120px;
margin: 10px auto 0;
padding: 0 16px;
}
.tournament-list__item {
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
}
.tournament-card {
display: block;
color: inherit;
text-decoration: none;
}
.tournament-card__inner {
padding: 20px 16px;
}
.tournament-card:hover {
background-color: #f7f8fa;
text-decoration: none;
}
.tournament-card:focus-visible {
outline: 2px solid #2563a0;
outline-offset: 3px;
}
.tournament-card__top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2px 12px;
margin-bottom: 6px;
}
.tournament-card__lead {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
flex: 1 1 auto;
min-width: min(100%, max-content);
}
.tournament-card__date {
color: #606975;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
.tournament-card__badges,
.tournament-detail__statuses {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
}
.status-tag {
display: inline-block;
padding: 2px 8px;
border: 1px solid #dadfe4;
border-radius: 3px;
background: #f5f6f7;
color: #4b5563;
font-size: 10px;
line-height: 1.5;
font-weight: 500;
white-space: nowrap;
}
.status-tag--notice {
border-color: #e7ccc7;
color: #943a31;
background: #fdf8f7;
}
.status-tag--open {
border-color: #b6ddc5;
color: #1a7a42;
background: #f0faf4;
}
.tournament-card__events {
display: flex;
flex: 0 0 auto;
flex-wrap: nowrap;
align-items: center;
gap: 3px;
margin-left: auto;
}
.tournament-card__event {
display: inline-block;
padding: 0 4px;
border: 1px solid #e4e8ec;
border-radius: 2px;
background: #f7f8f9;
color: #7b848e;
font-size: 11px;
line-height: 1.45;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.tournament-card__event--male {
border-color: #b9dff3;
background: #e7f5fc;
color: #1a6490;
}
.tournament-card__event--female {
border-color: #f5c6d6;
background: #fdeef3;
color: #9d4466;
}
.tournament-card__event--mixed {
border-color: #ddd0f5;
background: #f4f0fc;
color: #6554a0;
}
.tournament-card__event--team {
border-color: #c3e6cb;
background: #eef8f0;
color: #2d7344;
}
.tournament-card__title {
margin-bottom: 4px;
color: #263d55;
font-size: 17px;
font-weight: 700;
line-height: 1.6;
}
.tournament-card:hover .tournament-card__title {
color: #2563a0;
text-decoration: underline;
}
.tournament-card__places {
display: grid;
gap: 2px;
}
.tournament-card__place {
display: grid;
gap: 2px;
color: #555d66;
font-size: 13px;
line-height: 1.5;
}
.tournament-card__venue-name,
.tournament-card__venue-address {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 5px;
}
.tournament-card__venue-name::before {
content: "\1F3E2";
font-size: 12px;
flex-shrink: 0;
}
.tournament-card__venue-name {
color: #3c4652;
font-weight: 600;
}
.tournament-card__map-link {
position: relative;
z-index: 1;
color: #2563a0;
font-size: inherit;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
}
.tournament-card__map-link:hover {
text-decoration: underline;
}
.tournament-card__venue-address::before {
content: "\1F4CD";
font-size: 12px;
flex-shrink: 0;
}
.tournament-card__venue-address {
color: #6d7580;
overflow-wrap: anywhere;
}
.tournament-card__guideline {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 3px;
margin-top: 8px;
color: #2563a0;
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
}
.tournament-card__guideline::before {
content: "\1F4C4";
font-size: 12px;
}
.tournament-card__guideline:hover {
text-decoration: underline;
}
.tournament-card__more {
display: block;
margin-top: 9px;
color: #2563a0;
font-size: 13px;
font-weight: 600;
text-align: right;
}
.results-pagination {
display: flex;
flex-wrap: wrap;
gap: 7px;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.results-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
min-width: 36px;
padding: 5px 11px;
font-size: 13px;
border: 1px solid #dce1e6;
border-radius: 4px;
color: #384454;
text-decoration: none;
background: #fff;
}
.results-pagination a.page-numbers:hover {
border-color: #2563a0;
color: #2563a0;
text-decoration: none;
}
.results-pagination .page-numbers.current {
color: #fff;
border-color: #2563a0;
background: #2563a0;
} .tournament-detail-container {
max-width: 860px;
}
.tournament-detail {
padding: 10px 0 64px;
}
.tournament-detail__eyebrow,
.not-found-page__eyebrow {
margin-bottom: 8px;
color: #6f7780;
font-size: 12px;
}
.tournament-detail__title {
font-size: 25px;
line-height: 1.55;
font-weight: 700;
overflow-wrap: anywhere;
}
.tournament-detail__statuses {
margin-top: 13px;
margin-bottom: 20px;
}
.tournament-detail__header {
margin-bottom: 34px;
}
.tournament-summary {
border-top: 1px solid #e5e7e9;
border-bottom: 1px solid #e5e7e9;
padding: 6px 0;
}
.tournament-summary__row,
.detail-list > div {
display: grid;
grid-template-columns: 105px minmax(0, 1fr);
gap: 16px;
padding: 10px 4px;
font-size: 14px;
line-height: 1.8;
}
.tournament-summary__row dt,
.detail-list dt {
color: #737c85;
font-weight: 500;
}
.tournament-summary__row dd,
.detail-list dd {
margin: 0;
color: #333;
overflow-wrap: anywhere;
}
.detail-section {
margin: 0 0 36px;
}
.detail-section__title {
padding-bottom: 9px;
margin-bottom: 16px;
border-bottom: 1px solid #cfd6dc;
font-size: 18px;
font-weight: 700;
}
.detail-section__muted,
.detail-disclaimer {
color: #737c85;
font-size: 13px;
}
.detail-section__body {
margin-top: 10px;
color: #3b424a;
line-height: 1.9;
font-size: 14px;
overflow-wrap: anywhere;
}
.event-groups,
.venue-list {
display: grid;
gap: 16px;
}
.event-group {
padding: 0 0 14px;
border-bottom: 1px solid #f0f1f2;
}
.event-group:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.event-group__title,
.venue-item__title {
margin-bottom: 5px;
font-size: 15px;
font-weight: 700;
}
.event-group__subheading {
margin-bottom: 11px;
color: #68717a;
font-size: 13px;
}
.division-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.division-list li {
border: 1px solid #e1e4e8;
border-radius: 3px;
padding: 5px 10px;
background: #f8f9fa;
color: #4b5563;
font-size: 13px;
}
.event-group__note {
margin-top: 9px;
color: #56606b;
font-size: 13px;
overflow-wrap: anywhere;
}
.schedule-item {
display: block;
padding: 13px 0;
border-bottom: 1px solid #eaedf0;
font-size: 14px;
}
.schedule-item:first-child {
padding-top: 0;
}
.schedule-item__main {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: baseline;
}
.schedule-item__main strong {
font-weight: 600;
}
.schedule-item__main span,
.schedule-item__description {
color: #5c6570;
}
.schedule-item__description {
margin-top: 5px;
font-size: 13px;
}
.venue-item {
padding-bottom: 14px;
border-bottom: 1px solid #eaedf0;
}
.venue-item:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.venue-item p {
margin-top: 5px;
font-size: 14px;
color: #565f69;
line-height: 1.7;
}
.detail-list {
margin-bottom: 14px;
}
.detail-list > div {
border-bottom: 1px solid #edf0f2;
}
.detail-list > div:first-child {
padding-top: 0;
}
.detail-action-link {
display: inline-block;
padding: 9px 14px;
border: 1px solid #2563a0;
border-radius: 4px;
color: #2563a0;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.detail-action-link:hover {
color: #fff;
background: #2563a0;
text-decoration: none;
}
.source-list {
list-style: disc;
padding-left: 21px;
font-size: 14px;
}
.source-list li + li {
margin-top: 6px;
}
.tournament-detail__footer {
padding-top: 18px;
border-top: 1px solid #e5e7eb;
}
.detail-disclaimer {
margin-bottom: 20px;
line-height: 1.8;
}
.tournament-detail__footer-actions {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.back-to-results {
display: inline-block;
color: #2563a0;
font-size: 14px;
font-weight: 600;
}
.report-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: #737c85;
font-size: 13px;
text-decoration: none;
}
.report-link::before {
content: "\26A0";
font-size: 14px;
}
.report-link:hover {
color: #2563a0;
text-decoration: underline;
}
.related-tournaments {
margin-top: 48px;
padding-top: 32px;
padding-bottom: 48px;
border-top: 1px solid #e5e7eb;
}
.related-tournaments__title {
margin-bottom: 16px;
font-size: 18px;
font-weight: 700;
}
.related-tournaments__list {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.related-tournaments__item {
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
}
.related-tournaments__item .tournament-card__inner {
padding: 16px 14px;
}
.related-tournaments__item .tournament-card__title {
font-size: 15px;
}
.related-tournaments__more {
margin-top: 20px;
text-align: center;
}
.related-tournaments__more a {
display: inline-block;
padding: 12px 32px;
border: 1px solid #2563a0;
border-radius: 6px;
color: #2563a0;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.15s, color 0.15s;
}
.related-tournaments__more a:hover {
background-color: #2563a0;
color: #fff;
text-decoration: none;
}
.not-found-page {
padding-top: 48px;
padding-bottom: 90px;
}
.not-found-page h1 {
margin-bottom: 16px;
font-size: 23px;
}
.not-found-page p {
margin-bottom: 14px;
color: #66707a;
font-size: 14px;
}
.nearby-prefectures {
padding: 32px 0 48px;
border-top: 1px solid #e5e7eb;
}
.nearby-prefectures__title {
margin-bottom: 16px;
font-size: 18px;
font-weight: 700;
}
.nearby-prefectures__list {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.nearby-prefectures__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
color: #333;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.15s, border-color 0.15s;
}
.nearby-prefectures__link:hover {
background-color: #f7f8fa;
border-color: #2563a0;
color: #2563a0;
text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
.search-form.is-ready .search-form__extra,
.search-form.is-ready .search-form__more-mark,
.search-form.is-ready .search-form__city-drawer,
.search-form.is-ready .search-form__city-mark {
transition: none;
}
}
@media (max-width: 767px) {
.breadcrumbs { padding-top: 12px; }
.search-section--results { padding-top: 12px; }
.search-form__actions { justify-content: space-between; gap: 12px; }
.search-form__actions .search-form__submit { max-width: none; flex: 1 1 auto; }
.results-section { padding-top: 15px; padding-bottom: 44px; }
.tournament-list { max-width: none; padding: 0; }
.tournament-card__inner { padding: 18px 16px; }
.tournament-card__title { font-size: 16px; }
.tournament-detail { padding-top: 8px; padding-bottom: 48px; }
.tournament-detail__title { font-size: 21px; }
.tournament-detail__header { margin-bottom: 28px; }
.tournament-summary__row,
.detail-list > div { grid-template-columns: 77px minmax(0, 1fr); gap: 10px; font-size: 13px; }
.detail-section { margin-bottom: 28px; }
.detail-section__title { font-size: 17px; }
.related-tournaments { margin-top: 32px; padding-top: 24px; }
.related-tournaments__list { grid-template-columns: 1fr; }
.related-tournaments__title { font-size: 17px; }
.nearby-prefectures { padding: 24px 0 36px; }
.nearby-prefectures__title { font-size: 17px; }
.nearby-prefectures__list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.nearby-prefectures__link { padding: 12px 14px; font-size: 13px; }
.area-panel__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 8px;
}
.area-panel__city {
gap: 4px;
min-height: 30px;
padding: 2px 0;
font-size: 13px;
}
.area-panel__city-count { font-size: 12px; }
.search-form__city-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 8px;
}
.search-form__city-item {
gap: 4px;
min-height: 30px;
padding: 2px 0;
font-size: 13px;
}
.search-form__city-count-badge { font-size: 12px; } .page-tournaments-search .site-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
height: 46px;
}
.page-tournaments-search .site-header__home {
display: inline-flex;
align-items: center;
font-size: 13px;
color: #2563a0;
text-decoration: none;
justify-self: start;
}
.page-tournaments-search .site-logo {
justify-self: center;
}
.page-tournaments-search .site-nav {
display: none;
}
.page-tournaments-search .breadcrumbs-bar {
display: none;
} .filter-bar {
display: flex;
align-items: center;
gap: 0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
}
.filter-bar.is-hidden {
display: none;
}
.filter-bar__all {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
flex-shrink: 0;
padding: 8px 12px;
border: 0;
border-right: 1px solid #e0e0e0;
background: none;
color: #333;
font-size: 10px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.filter-bar__icon {
color: #555;
}
.filter-bar__scroll {
display: flex;
align-items: center;
gap: 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 6px 10px;
scrollbar-width: none;
}
.filter-bar__scroll::-webkit-scrollbar {
display: none;
}
.filter-bar__chip {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 999px;
background: #fff;
color: #333;
font-size: 12px;
white-space: nowrap;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.filter-bar__chip:hover,
.filter-bar__chip:active {
background: #f0f4f8;
border-color: #aaa;
}
.filter-bar__chip-label {
font-weight: 600;
}
.filter-bar__chip-value {
color: #2563a0;
font-weight: 700;
} .page-tournaments-search .search-sidebar {
display: none;
} .search-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
flex-direction: column;
background: #fff;
overflow-y: auto;
}
.search-modal[hidden] {
display: none;
}
.search-modal__header {
flex-shrink: 0;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 46px;
padding: 0 16px;
border-bottom: 1px solid #e0e0e0;
}
.search-modal__close {
justify-self: start;
border: 0;
background: none;
font-size: 13px;
color: #2563a0;
cursor: pointer;
padding: 0;
}
.search-modal__title {
justify-self: center;
font-size: 15px;
font-weight: 700;
color: #333;
white-space: nowrap;
}
.search-modal__spacer {
justify-self: end;
}
.search-modal__body {
flex: 1;
padding: 16px 16px 80px;
}
.search-modal__section {
margin-bottom: 20px;
}
.search-modal__label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 700;
color: #555;
}
.search-modal__input {
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 15px;
background: #fff;
}
.search-modal__select {
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 15px;
background: #fff;
appearance: auto;
}
.search-modal__date-range {
display: flex;
align-items: center;
gap: 8px;
}
.search-modal__date-range input {
flex: 1;
min-width: 0;
padding: 10px 8px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
}
.search-modal__date-sep {
color: #999;
flex-shrink: 0;
}
.search-modal__footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 10px 16px;
background: #fff;
border-top: 1px solid #e0e0e0;
box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.search-modal__submit {
flex: 1;
padding: 12px 24px;
border: 0;
border-radius: 8px;
background: #2563a0;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.search-modal__submit:hover {
background: #1d4c7b;
}
.search-modal__clear {
flex-shrink: 0;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #626a72;
font-size: 13px;
white-space: nowrap;
} .search-sheet-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 999;
background: rgba(0,0,0,.4);
}
.search-sheet-backdrop.is-visible {
display: block;
animation: sheetBackdropIn .35s ease;
}
@keyframes sheetBackdropIn {
from { opacity: 0; }
to   { opacity: 1; }
}
.search-sheet {
position: fixed;
inset: auto 0 0 0;
z-index: 1000;
display: flex;
flex-direction: column;
max-height: 70vh;
border-radius: 16px 16px 0 0;
background: #fff;
box-shadow: 0 -4px 24px rgba(0,0,0,.15);
overflow-y: auto;
animation: sheetSlideUp .45s cubic-bezier(.16,1,.3,1);
}
.search-sheet[hidden] {
display: none;
}
@keyframes sheetSlideUp {
from { transform: translateY(100%); }
to   { transform: translateY(0); }
}
.search-sheet__header {
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
padding: 14px 16px 10px;
}
.search-sheet__title {
font-size: 15px;
font-weight: 700;
color: #333;
}
.search-sheet__close {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
background: none;
font-size: 20px;
color: #888;
cursor: pointer;
}
.search-sheet__body {
padding: 0 16px;
}
.search-sheet__body .search-form__input,
.search-sheet__body .search-form__select {
display: block;
width: 100%;
box-sizing: border-box;
}
.search-sheet__cities {
margin-top: 12px;
}
.search-sheet__city-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 8px;
}
.search-sheet__city-item {
display: flex;
align-items: center;
gap: 4px;
min-height: 32px;
padding: 2px 0;
font-size: 13px;
color: #333;
cursor: pointer;
border-radius: 4px;
}
.search-sheet__city-item:active {
background: #f0f4f8;
}
.search-sheet__city-item input {
width: 15px;
height: 15px;
flex-shrink: 0;
accent-color: #2563a0;
}
.search-sheet__city-name {
flex: 0 1 auto;
min-width: 0;
}
.search-sheet__city-count {
flex: 0 0 auto;
color: #5b6770;
font-size: 12px;
font-weight: 700;
}
.search-sheet__city-count.is-zero {
color: #b0b6bd;
font-weight: 600;
}
.search-sheet__radio-grid {
display: flex;
flex-direction: column;
}
.search-sheet__radio-item {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 0 4px;
font-size: 15px;
color: #333;
cursor: pointer;
border-bottom: 1px solid #f0f1f2;
}
.search-sheet__radio-item:last-child {
border-bottom: 0;
}
.search-sheet__radio-item input {
width: 18px;
height: 18px;
flex-shrink: 0;
accent-color: #2563a0;
}
.search-sheet__radio-label {
flex: 1;
}
.search-sheet__footer {
padding: 12px 16px 16px;
}
.search-sheet__submit {
display: block;
width: 100%;
padding: 12px 24px;
border: 0;
border-radius: 8px;
background: #2563a0;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
box-sizing: border-box;
}
.search-sheet__submit:hover {
background: #1d4c7b;
}
} @media (min-width: 768px) {
.filter-bar,
.search-modal,
.search-sheet-backdrop,
.search-sheet,
.search-form-wrap {
display: none !important;
}
} .search-layout {
margin: 0 auto;
}
@media (min-width: 768px) {
.search-layout {
max-width: 1120px;
padding: 0 16px;
display: grid;
grid-template-columns: 240px 1fr;
gap: 32px;
padding-top: 24px;
}
.search-layout__main {
min-width: 0;
}
.search-layout__main .container {
padding: 0;
}
.search-layout__main .results-header {
margin-bottom: 16px;
}
.search-layout__main .tournament-list {
max-width: none;
padding: 0;
}
} .search-sidebar {
display: none;
}
@media (min-width: 768px) {
.search-sidebar {
display: block;
}
}
.search-sidebar__form {
}
.search-sidebar__section {
margin-bottom: 20px;
}
.search-sidebar__label {
display: block;
font-size: 13px;
font-weight: 700;
color: #555;
margin-bottom: 6px;
}
.search-sidebar__select {
width: 100%;
height: 36px;
padding: 0 8px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
background: #fff;
color: #333;
cursor: pointer;
}
.search-sidebar__input {
width: 100%;
height: 36px;
padding: 0 8px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
background: #fff;
color: #333;
box-sizing: border-box;
}
.search-sidebar__input:focus-visible,
.search-sidebar__select:focus-visible {
outline: 2px solid #2563a0;
outline-offset: 2px;
}
.search-sidebar__radio-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.search-sidebar__radio {
font-size: 13px;
color: #333;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.search-sidebar__radio input[type="radio"] {
margin: 0;
}
.search-sidebar__date-range {
display: flex;
align-items: center;
gap: 4px;
}
.search-sidebar__date {
flex: 1;
height: 36px;
padding: 0 6px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 13px;
background: #fff;
color: #333;
min-width: 0;
}
.search-sidebar__date:focus-visible {
outline: 2px solid #2563a0;
outline-offset: 2px;
}
.search-sidebar__date-sep {
color: #999;
font-size: 13px;
flex-shrink: 0;
}
.search-sidebar__submit {
display: block;
width: 100%;
height: 38px;
border: none;
border-radius: 6px;
background: #2563a0;
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
margin-top: 8px;
}
.search-sidebar__submit:hover {
background: #1d4c7b;
}
.search-sidebar__clear {
display: block;
width: 100%;
text-align: center;
margin-top: 12px;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 13px;
color: #666;
}
.search-sidebar__clear:hover {
color: #2563a0;
} .sidebar-city-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 8px;
margin-top: 8px;
}
.sidebar-city-grid label {
font-size: 13px;
color: #333;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
} .global-search-modal {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: flex-start;
justify-content: center;
}
.global-search-modal[hidden] {
display: none;
}
.global-search-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
}
.global-search-modal__dialog {
position: relative;
background: #fff;
width: 100%;
max-height: 100vh;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.global-search-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid #e0e0e0;
flex-shrink: 0;
}
.global-search-modal__title {
font-size: 16px;
font-weight: 700;
color: #333;
}
.global-search-modal__close {
border: 0;
background: none;
font-size: 24px;
color: #666;
cursor: pointer;
padding: 0;
line-height: 1;
}
.global-search-modal__body {
padding: 16px;
overflow-y: auto;
flex: 1;
}
.global-search-modal__section {
margin-bottom: 20px;
}
.global-search-modal__label {
display: block;
font-size: 13px;
font-weight: 700;
color: #555;
margin-bottom: 6px;
}
.global-search-modal__input,
.global-search-modal__select {
width: 100%;
height: 40px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
background: #fff;
color: #333;
box-sizing: border-box;
}
.global-search-modal__input:focus,
.global-search-modal__select:focus {
border-color: #2563a0;
outline: none;
}
.global-search-modal__radio-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.global-search-modal__radio {
font-size: 14px;
color: #333;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.global-search-modal__radio input[type="radio"] {
margin: 0;
}
.global-search-modal__date-range {
display: flex;
align-items: center;
gap: 6px;
}
.global-search-modal__date {
flex: 1;
height: 40px;
padding: 0 8px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
background: #fff;
color: #333;
min-width: 0;
}
.global-search-modal__date:focus {
border-color: #2563a0;
outline: none;
}
.global-search-modal__date-sep {
color: #999;
font-size: 14px;
flex-shrink: 0;
}
.global-search-modal__submit {
display: block;
width: 100%;
height: 44px;
border: none;
border-radius: 6px;
background: #2563a0;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.global-search-modal__submit:hover {
background: #1d4c7b;
}
.global-search-modal__city-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px 10px;
margin-top: 8px;
}
.global-search-modal__city-grid label {
font-size: 14px;
color: #333;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
} @media (max-width: 767px) {
.global-search-modal__dialog {
max-width: 100%;
max-height: 100%;
height: 100%;
border-radius: 0;
}
} @media (min-width: 768px) {
.global-search-modal {
align-items: center;
padding: 40px 16px;
}
.global-search-modal__dialog {
max-width: 960px;
max-height: calc(100vh - 80px);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.global-search-modal__city-grid {
grid-template-columns: repeat(6, 1fr);
}
.global-search-modal__radio-group {
flex-direction: row;
flex-wrap: wrap;
gap: 8px 20px;
}
}