差分
このページの2つのバージョン間の差分を表示します。
| 次のリビジョン | 前のリビジョン | ||
| 48th_booth_info_c [2026/07/03 19:12] – 作成 Tana JH1HST | 48th_booth_info_c [2026/07/03 22:47] (現在) – Tana JH1HST | ||
|---|---|---|---|
| 行 3: | 行 3: | ||
| < | < | ||
| < | < | ||
| - | /* ===== ハムフェア2026 Cエリア ===== */ | + | /* ===== ハムフェア2026 Cエリア |
| .hf-c-page { | .hf-c-page { | ||
| max-width: 1200px; | max-width: 1200px; | ||
| margin: 0 auto; | margin: 0 auto; | ||
| - | font-family: | ||
| - | -apple-system, | ||
| - | "Segoe UI", "Noto Sans JP", sans-serif; | ||
| color: #222; | color: #222; | ||
| + | font-family: | ||
| + | " | ||
| + | } | ||
| + | |||
| + | .hf-c-title { | ||
| + | margin: 0 0 8px; | ||
| + | color: #087d70; | ||
| + | font-size: clamp(26px, 4vw, 40px); | ||
| + | line-height: | ||
| + | } | ||
| + | |||
| + | .hf-c-intro { | ||
| + | margin: 0 0 18px; | ||
| + | line-height: | ||
| } | } | ||
| 行 18: | 行 28: | ||
| } | } | ||
| - | .hf-c-back a { | + | .hf-c-back a, |
| + | .hf-c-bottom-back a { | ||
| display: inline-block; | display: inline-block; | ||
| color: #075a92; | color: #075a92; | ||
| 行 25: | 行 36: | ||
| } | } | ||
| - | .hf-c-back a:hover { | + | .hf-c-back a:hover, |
| + | .hf-c-bottom-back a:hover { | ||
| text-decoration: | text-decoration: | ||
| } | } | ||
| - | /* エリア図 */ | + | /* Cエリア配置図 */ |
| .hf-c-map { | .hf-c-map { | ||
| margin: 0 auto 24px; | margin: 0 auto 24px; | ||
| text-align: center; | text-align: center; | ||
| + | } | ||
| + | |||
| + | .hf-c-map a { | ||
| + | display: inline-block; | ||
| + | max-width: 100%; | ||
| } | } | ||
| 行 38: | 行 55: | ||
| display: block; | display: block; | ||
| width: 100%; | width: 100%; | ||
| - | max-width: | + | max-width: |
| height: auto; | height: auto; | ||
| margin: 0 auto; | margin: 0 auto; | ||
| - | border: 1px solid #ccc; | + | border: 1px solid #c9d8d4; |
| border-radius: | border-radius: | ||
| + | box-shadow: 0 3px 12px rgba(0, 0, 0, .08); | ||
| + | } | ||
| + | |||
| + | .hf-c-map-note { | ||
| + | margin: 7px 0 0; | ||
| + | color: #666; | ||
| + | font-size: 13px; | ||
| } | } | ||
| /* 検索・絞り込み */ | /* 検索・絞り込み */ | ||
| - | .hf-c-filter | + | .hf-c-tools { |
| + | position: sticky; | ||
| + | top: 0; | ||
| + | z-index: 10; | ||
| display: grid; | display: grid; | ||
| - | grid-template-columns: | + | grid-template-columns: |
| gap: 12px; | gap: 12px; | ||
| - | padding: | + | |
| - | margin: 0 0 12px; | + | |
| - | background: | + | margin: 0 0 10px; |
| + | background: | ||
| border: 1px solid #b7dcd5; | border: 1px solid #b7dcd5; | ||
| border-radius: | border-radius: | ||
| + | box-shadow: 0 2px 8px rgba(0, 0, 0, .05); | ||
| } | } | ||
| - | .hf-c-filter | + | .hf-c-field label { |
| display: block; | display: block; | ||
| - | margin-bottom: 5px; | + | margin: |
| font-size: 14px; | font-size: 14px; | ||
| font-weight: | font-weight: | ||
| + | line-height: | ||
| } | } | ||
| - | .hf-c-filter | + | .hf-c-field input, |
| - | .hf-c-filter | + | .hf-c-field select, |
| + | .hf-c-reset | ||
| box-sizing: border-box; | box-sizing: border-box; | ||
| width: 100%; | width: 100%; | ||
| 行 72: | 行 103: | ||
| color: #222; | color: #222; | ||
| background: #fff; | background: #fff; | ||
| - | border: 1px solid #aaa; | + | border: 1px solid #999; |
| border-radius: | border-radius: | ||
| font-size: 16px; | font-size: 16px; | ||
| } | } | ||
| - | .hf-c-count { | + | .hf-c-field input: |
| - | | + | .hf-c-field select: |
| - | | + | |
| + | | ||
| + | } | ||
| + | |||
| + | .hf-c-reset { | ||
| + | width: auto; | ||
| + | min-width: 104px; | ||
| + | color: #075a92; | ||
| + | background: #f3f8fc; | ||
| + | border-color: | ||
| + | font-weight: | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | |||
| + | .hf-c-reset: | ||
| + | background: #e2f0fa; | ||
| + | } | ||
| + | |||
| + | .hf-c-status { | ||
| + | display: flex; | ||
| + | flex-wrap: wrap; | ||
| + | justify-content: | ||
| + | gap: 8px 16px; | ||
| + | margin: 0 0 16px; | ||
| color: #555; | color: #555; | ||
| font-size: 14px; | font-size: 14px; | ||
| } | } | ||
| - | /* ブースカード一覧 | + | .hf-c-status strong { |
| + | color: #087d70; | ||
| + | } | ||
| + | |||
| + | /* ブースカード */ | ||
| .hf-c-list { | .hf-c-list { | ||
| display: grid; | display: grid; | ||
| 行 95: | 行 153: | ||
| padding: 16px; | padding: 16px; | ||
| background: #fff; | background: #fff; | ||
| - | border: 1px solid #ccc; | + | border: 1px solid #cfd8d6; |
| border-left: | border-left: | ||
| border-radius: | border-radius: | ||
| - | box-shadow: 0 2px 7px rgba(0, | + | box-shadow: 0 2px 7px rgba(0, 0, 0, .05); |
| - | scroll-margin-top: | + | scroll-margin-top: |
| - | } | + | |
| - | + | ||
| - | .hf-c-card[hidden] { | + | |
| - | display: none; | + | |
| } | } | ||
| 行 110: | 行 164: | ||
| align-items: | align-items: | ||
| gap: 10px; | gap: 10px; | ||
| - | margin: 0 0 8px; | + | margin: 0 0 9px; |
| } | } | ||
| 行 116: | 行 170: | ||
| flex: 0 0 auto; | flex: 0 0 auto; | ||
| display: inline-block; | display: inline-block; | ||
| - | min-width: | + | min-width: |
| + | box-sizing: border-box; | ||
| padding: 6px 8px; | padding: 6px 8px; | ||
| color: #fff; | color: #fff; | ||
| 行 132: | 行 187: | ||
| font-size: 18px; | font-size: 18px; | ||
| line-height: | line-height: | ||
| + | overflow-wrap: | ||
| } | } | ||
| 行 143: | 行 199: | ||
| border-radius: | border-radius: | ||
| font-size: 13px; | font-size: 13px; | ||
| - | line-height: | + | line-height: |
| } | } | ||
| .hf-c-description { | .hf-c-description { | ||
| - | margin: | + | margin: |
| line-height: | line-height: | ||
| + | white-space: | ||
| + | overflow-wrap: | ||
| } | } | ||
| 行 155: | 行 213: | ||
| flex-wrap: wrap; | flex-wrap: wrap; | ||
| gap: 8px; | gap: 8px; | ||
| + | margin-top: auto; | ||
| } | } | ||
| 行 166: | 行 225: | ||
| font-size: 14px; | font-size: 14px; | ||
| font-weight: | font-weight: | ||
| + | line-height: | ||
| text-decoration: | text-decoration: | ||
| } | } | ||
| - | .hf-c-links a:hover { | + | .hf-c-links a:hover, |
| + | .hf-c-links a: | ||
| background: #e2f0fa; | background: #e2f0fa; | ||
| + | border-color: | ||
| text-decoration: | text-decoration: | ||
| + | } | ||
| + | |||
| + | .hf-c-x { | ||
| + | color: #222 !important; | ||
| + | background: #f6f6f6 !important; | ||
| + | border-color: | ||
| } | } | ||
| .hf-c-empty { | .hf-c-empty { | ||
| display: none; | display: none; | ||
| - | padding: | + | padding: |
| color: #555; | color: #555; | ||
| background: #fafafa; | background: #fafafa; | ||
| 行 184: | 行 252: | ||
| } | } | ||
| - | /* スマートフォン */ | + | .hf-c-bottom-back { |
| - | @media screen and (max-width: | + | margin: 24px 0 8px; |
| - | .hf-c-filter | + | text-align: center; |
| + | } | ||
| + | |||
| + | @media screen and (max-width: | ||
| + | .hf-c-tools { | ||
| + | position: static; | ||
| grid-template-columns: | grid-template-columns: | ||
| + | } | ||
| + | |||
| + | .hf-c-reset { | ||
| + | width: 100%; | ||
| } | } | ||
| 行 193: | 行 270: | ||
| grid-template-columns: | grid-template-columns: | ||
| } | } | ||
| + | } | ||
| + | @media screen and (max-width: 520px) { | ||
| .hf-c-card { | .hf-c-card { | ||
| - | padding: | + | padding: |
| } | } | ||
| 行 202: | 行 281: | ||
| } | } | ||
| - | .hf-c-count { | + | .hf-c-status |
| - | | + | |
| + | } | ||
| + | |||
| + | .hf-c-status span { | ||
| + | display: block; | ||
| + | margin-bottom: 4px; | ||
| } | } | ||
| } | } | ||
| 行 209: | 行 293: | ||
| <div class=" | <div class=" | ||
| + | <h1 class=" | ||
| + | |||
| + | <p class=" | ||
| + | Cエリアの出展ブースを、ブース番号順に全件掲載しています。< | ||
| + | ブース番号・出展者名・出展内容からの検索、カテゴリーによる絞り込みができます。 | ||
| + | </p> | ||
| <div class=" | <div class=" | ||
| 行 215: | 行 305: | ||
| <div class=" | <div class=" | ||
| - | <img | + | <a href=" |
| - | src=" | + | |
| - | alt=" | + | |
| - | > | + | alt=" |
| + | > | ||
| + | | ||
| + | <p class=" | ||
| </ | </ | ||
| - | <div class=" | + | <div class=" |
| - | + | < | |
| - | <div> | + | |
| <label for=" | <label for=" | ||
| <input | <input | ||
| 行 229: | 行 321: | ||
| id=" | id=" | ||
| placeholder=" | placeholder=" | ||
| + | autocomplete=" | ||
| > | > | ||
| </ | </ | ||
| - | <div> | + | < |
| <label for=" | <label for=" | ||
| <select id=" | <select id=" | ||
| - | <option value=""> | + | <option value="" |
| - | <option value=" | + | <option value=" |
| - | <option value=" | + | <option value=" |
| - | <option value=" | + | < |
| - | <option value=" | + | |
| - | <option value=" | + | <option value=" |
| - | <option value=" | + | <option value=" |
| - | <option value=" | + | <option value=" |
| - | < | + | <option value=" |
| - | | + | <option value=" |
| </ | </ | ||
| </ | </ | ||
| + | <button type=" | ||
| + | 全件表示 | ||
| + | </ | ||
| </ | </ | ||
| - | <div class=" | + | <div class=" |
| + | < | ||
| + | < | ||
| + | | ||
| - | <div class=" | + | <div class=" |
| - | | + | |
| - | < | + | |
| - | | + | </ |
| - | | + | |
| - | data-category=" | + | |
| - | > | + | |
| - | <div class=" | + | |
| - | < | + | |
| - | <h2 class=" | + | |
| - | アマチュアキットクリエイターズ(AKC) | + | |
| - | </h2> | + | |
| - | </ | + | |
| - | | + | |
| - | | + | <a href=" |
| - | </ | + | </ |
| + | </ | ||
| - | | + | <script> |
| - | | + | (function () { |
| - | </ | + | " |
| - | <div class="hf-c-links"> | + | const booths |