*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #EDE0C4; color: #2C1A00; }

/* ヘッダー */
.hdr { background: #2C4A3E; padding: 12px 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 12px; border-bottom: 2px solid #1D3D30; position: relative; }
.hdr::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 3px; background: #C9A876; }
.hdr-center { display: flex; justify-content: center; align-items: center; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-text-wrap { display: flex; flex-direction: column; gap: 2px; }
.logo-main { color: #9FE1CB; font-size: 20px; font-weight: 500; letter-spacing: 1.5px; line-height: 1; }
.logo-sub { color: #5DCAA5; font-size: 10px; letter-spacing: 1px; }
.nav { display: flex; gap: 6px; }
.nav-btn { background: none; border: 1px solid #5DCAA5; border-radius: 2px; color: #9FE1CB; font-size: 12px; padding: 4px 12px; cursor: pointer; letter-spacing: 0.5px; transition: background 0.15s, color 0.15s; }
.nav-btn:hover { background: rgba(93,202,165,0.15); }
.et-block { display: flex; flex-direction: column; align-items: flex-end; }
.et-lbl { color: #5DCAA5; font-size: 10px; letter-spacing: 1px; }
.et-val { color: #F7F0DC; font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
.et-real { color: #9FE1CB; font-size: 10px; }

/* レイアウト */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; max-width: 960px; margin: 0 auto; padding: 20px 20px; }
.main-content {}
.search-row { display: flex; gap: 8px; margin-bottom: 12px; }
.search-row input { flex: 1; padding: 8px 12px; border: 1px solid #C9A876; border-radius: 2px; font-size: 14px; outline: none; background: #F7F0DC; color: #2C1A00; }
.search-row input::placeholder { color: #A0784A; }
.search-row input:focus { border-color: #A0784A; box-shadow: 0 0 0 2px rgba(160,120,74,0.15); }

/* 検索結果 */
.search-results { background: #F7F0DC; border: 1px solid #C9A876; border-radius: 2px; margin-bottom: 12px; overflow: hidden; position: relative; }
.search-results::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(160,120,74,0.2); border-radius: 1px; pointer-events: none; }
.search-result-item { padding: 10px 14px; border-bottom: 1px dotted #C9A876; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.15s; }
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: #EDE0C4; }

/* フィルター */
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.f-btn { border: 1px solid #C9A876; border-radius: 2px; background: #F7F0DC; color: #633806; font-size: 12px; padding: 4px 12px; cursor: pointer; letter-spacing: 0.5px; transition: background 0.15s, color 0.15s; }
.f-btn:hover { background: #EDE0C4; border-color: #A0784A; }
.f-btn.on { background: #2C4A3E; color: #9FE1CB; border-color: #2C4A3E; }

/* セクション見出し */
.sec-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ornament { color: #A0784A; font-size: 10px; }
.sec-lbl { font-size: 12px; font-weight: 500; color: #633806; letter-spacing: 1px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-g { background: #1D9E75; }
.dot-o { background: #BA7517; }
.click-hint { font-size: 11px; color: #A0784A; text-align: right; margin-bottom: 6px; }
.divider { height: 1px; background: #C9A876; margin: 14px 0; opacity: 0.4; }
.empty { font-size: 13px; color: #A0784A; padding: 20px 0; text-align: center; }

/* カード */
.card { background: #F7F0DC; border: 1px solid #C9A876; border-radius: 2px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; position: relative; transition: background 0.15s; }
.card::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(160,120,74,0.2); border-radius: 1px; pointer-events: none; }
.card:hover { background: #EDE0C4; }
.card:active { transform: scale(0.99); }
.card.active { border-left: 3px solid #1D9E75; padding-left: 11px; }
.card.upcoming { border-left: 3px solid #BA7517; padding-left: 11px; }
.card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }

/* バッジ */
.badge { font-size: 11px; padding: 2px 8px; border-radius: 2px; font-weight: 500; white-space: nowrap; letter-spacing: 0.5px; }
.b-leg { background: #C9A876; color: #F7F0DC; }
.b-uns { background: #8B9E7A; color: #F7F0DC; }
.b-lim { background: #9E7A4A; color: #F7F0DC; }
.b-enkei { background: #5DCAA5; color: #085041; }
.b-saikutsu { background: #7EB3D4; color: #0C447C; }
.b-ryoshi { background: #A8C4E0; color: #185FA5; }

.item-name { font-size: 15px; font-weight: 500; flex: 1; color: #2C1A00; }
.loc { font-size: 12px; color: #633806; margin-bottom: 4px; }

/* エーテライト */
.aetheryte-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #854F0B; margin-bottom: 8px; }
.aetheryte-icon { display: inline-block; width: 12px; height: 12px; background: #1D9E75; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); flex-shrink: 0; }

/* パラメータ */
.params { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.param-chip { background: #EDE0C4; border: 1px solid #C9A876; border-radius: 2px; padding: 3px 8px; font-size: 11px; color: #633806; }
.param-chip span { color: #2C1A00; font-weight: 500; }

/* タイマー */
.timer-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.timer-bar-wrap { flex: 1; height: 4px; background: #EDE0C4; border-radius: 2px; overflow: hidden; border: 1px solid #C9A876; }
.timer-bar { height: 4px; border-radius: 2px; transition: width 1s linear; }
.t-g { color: #0F6E56; font-size: 12px; font-weight: 500; white-space: nowrap; }
.t-o { color: #854F0B; font-size: 12px; font-weight: 500; white-space: nowrap; }
.real-time { font-size: 11px; color: #A0784A; white-space: nowrap; }

/* 戻るボタン */
.back-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #633806; cursor: pointer; border: none; background: none; padding: 0; margin-bottom: 14px; letter-spacing: 0.5px; transition: color 0.15s; }
.back-btn:hover { color: #2C1A00; }

/* 詳細カード */
.detail-card { background: #F7F0DC; border: 1px solid #C9A876; border-radius: 2px; padding: 16px 18px; margin-bottom: 12px; position: relative; }
.detail-card::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(160,120,74,0.2); border-radius: 1px; pointer-events: none; }
.sec-title { font-size: 11px; font-weight: 500; color: #633806; letter-spacing: 1.5px; margin-bottom: 12px; text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
.sec-title::before, .sec-title::after { content: '✦'; font-size: 8px; color: #A0784A; }

/* ステータスバッジ */
.status-on { background: #E1F5EE; color: #0F6E56; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 2px; border: 1px solid #1D9E75; }
.status-off { background: #FAEEDA; color: #854F0B; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 2px; border: 1px solid #C9A876; }

/* 情報グリッド */
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.info-cell { background: #EDE0C4; border-radius: 2px; padding: 10px 12px; border: 1px solid #C9A876; }
.info-lbl { font-size: 11px; color: #854F0B; margin-bottom: 3px; letter-spacing: 0.5px; }
.info-val { font-size: 14px; font-weight: 500; color: #2C1A00; }

/* パラメータグリッド */
.param-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.param-cell { background: #EDE0C4; border-radius: 2px; padding: 12px 14px; border: 1px solid #C9A876; }
.param-cell-lbl { font-size: 11px; color: #854F0B; margin-bottom: 4px; letter-spacing: 0.5px; }
.param-cell-val { font-size: 20px; font-weight: 500; color: #2C1A00; }
.param-cell-unit { font-size: 12px; color: #A0784A; margin-left: 3px; }

/* マッププレースホルダー */
.map-placeholder { background: #EDE0C4; border: 1px dashed #C9A876; border-radius: 8px; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden; padding: 0; }

/* サイドバー */
.sidebar { display: flex; flex-direction: column; gap: 10px; }
.s-card { background: #F7F0DC; border: 1px solid #C9A876; border-radius: 2px; padding: 12px 14px; position: relative; }
.s-card::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(160,120,74,0.2); border-radius: 1px; pointer-events: none; }
.s-title { font-size: 11px; font-weight: 500; color: #633806; text-align: center; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #C9A876; letter-spacing: 1.5px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.s-title::before, .s-title::after { content: '❧'; font-size: 9px; color: #A0784A; }
.ad-block { background: #EDE0C4; border: 1px dashed #C9A876; border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ad-lbl { font-size: 11px; color: #A0784A; }
.sidebar-link { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-bottom: 1px dotted #C9A876; cursor: pointer; text-decoration: none; }
.sidebar-link:last-child { border-bottom: none; }
.sidebar-link:hover .link-name { color: #2C1A00; }
.link-name { font-size: 12px; color: #412402; }

/* タグ */
.tag-wrap { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.tag { background: #C9A876; border-radius: 2px; font-size: 11px; padding: 3px 10px; color: #F7F0DC; cursor: pointer; letter-spacing: 0.5px; transition: background 0.15s; }
.tag:hover { background: #A0784A; }

/* レスポンシブ */
@media (max-width: 640px) {
  .layout { grid-template-columns: 1fr; padding: 12px; }
  .sidebar { display: none; }
  .info-grid { grid-template-columns: 1fr; }
  .param-grid { grid-template-columns: 1fr; }
  .hdr { grid-template-columns: auto 1fr; }
  .hdr-center { display: none; }
}
/* テーブルA: 横ヘッダー */
.article-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
.article-body thead tr { background: #2C4A3E; }
.article-body thead th { color: #9FE1CB; padding: 10px 14px; text-align: left; font-weight: 500; letter-spacing: 0.5px; border: none; }
.article-body thead th:first-child { border-radius: 2px 0 0 0; }
.article-body thead th:last-child { border-radius: 0 2px 0 0; }
.article-body tbody tr { background: #F7F0DC; border-bottom: 1px dotted #C9A876; }
.article-body tbody td { padding: 9px 14px; color: #2C1A00; }
.article-body tbody tr:last-child { border-bottom: none; }

/* テーブルB: 縦ヘッダー（th要素が左列のみの場合） */
.article-body table.tbl-vertical th { background: #EDE0C4; color: #633806; padding: 9px 14px; text-align: left; font-weight: 500; border: 1px solid #C9A876; width: 30%; }
.article-body table.tbl-vertical td { background: #F7F0DC; color: #2C1A00; padding: 9px 14px; border: 1px solid #C9A876; }
.article-body table.tbl-vertical tr td { background: #F7F0DC !important; }
.article-body table.tbl-vertical tr th { background: #EDE0C4 !important; }

/* 箇条書きA: ダイヤ型 */
.article-body ul { list-style: none; padding: 0; margin-bottom: 14px; }
.article-body ul li { font-size: 13px; color: #2C1A00; padding: 6px 0 6px 22px; border-bottom: 1px dotted #C9A876; position: relative; line-height: 1.6; }
.article-body ul li:last-child { border-bottom: none; }
.article-body ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; background: #1D9E75; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

/* 箇条書きC: 番号付き */
.article-body ol { list-style: none; padding: 0; margin-bottom: 14px; counter-reset: item; }
.article-body ol li { font-size: 13px; color: #2C1A00; padding: 8px 0 8px 36px; border-bottom: 1px dotted #C9A876; position: relative; line-height: 1.6; counter-increment: item; }
.article-body ol li:last-child { border-bottom: none; }
.article-body ol li::before { content: counter(item); position: absolute; left: 0; top: 7px; width: 22px; height: 22px; background: #2C4A3E; color: #9FE1CB; border-radius: 2px; font-size: 11px; font-weight: 500; text-align: center; line-height: 22px; }
h3 {
  border-left: 2px solid #C9A876;
  border-bottom: 1px dashed #C9A876;
  padding: 2px 10px 4px;
  font-size: 14px;
  color: #A0784A;
  font-weight: 500;
  border-radius: 0;
  background: none;
}
.footer {
  background: #1a2e22;
  border-top: 2px solid #C9A876;
  padding: 32px;
  margin-top: 40px;
}
.footer-inner {
  max-width: 900px;
  margin: 0 auto;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.footer-logo-name {
  font-size: 15px;
  font-weight: 500;
  color: #e8e3d5;
}
.footer-desc {
  font-size: 12px;
  color: #6a8a72;
  margin: 0;
  line-height: 1.7;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-nav-title {
  font-size: 11px;
  color: #C9A876;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.footer-nav-link {
  font-size: 13px;
  color: #9FE1CB;
  text-decoration: none;
  opacity: 0.8;
}
.footer-nav-link:hover {
  opacity: 1;
}
.footer-bottom {
  border-top: 1px solid #2a4a32;
  padding-top: 16px;
  text-align: center;
}
.footer-copy {
  font-size: 11px;
  color: #4a6a52;
  margin: 0;
}
.map-placeholder {
  width: 100%;
  background: #f5f0e8;
  border: 1px dashed #ddd6c4;
  border-radius: 8px;
  overflow: hidden;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-placeholder:has(img) {
  min-height: unset;
  display: block;
}
#map-area {
  padding: 0 !important;
  overflow: hidden;
}
#map-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0;
}
.more-btn {
  width: 100%;
  padding: 14px 20px;
  background: #EDE0C4;
  border: 1px solid #A0784A;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 500;
  color: #412402;
  letter-spacing: 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  margin-top: 8px;
}
.more-btn::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(160,120,74,0.25);
  border-radius: 1px;
  pointer-events: none;
}
.more-btn:hover {
  background: #E0D0AE;
}