/* =====================================================
   archive-store.css — 案A: ヒーロー内エリア選択版
   ===================================================== */

/* ── HERO ── */
.arc-page .arc-hero {
  background: var(--fp-cream, oklch(97% 0.008 60));
  padding: 48px 32px 36px;
  position: relative;
  border-bottom: 3px solid var(--fp-pk, oklch(65% 0.20 350));
}
.arc-hero__eyebrow {
  font-family: var(--fp-font-body);
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--fp-pk, oklch(65% 0.20 350));
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.arc-hero__eyebrow::before {
  content: '';
  display: block;
  width: 20px; height: 1px;
  background: var(--fp-pk, oklch(65% 0.20 350));
}
.arc-hero__title {
  font-family: var(--fp-font-display);
  font-weight: var(--fp-font-display-weight, 700);
  font-size: clamp(32px, 5vw, 48px);
  color: var(--fp-ink, oklch(18% 0.010 280));
  line-height: 1;
  margin-bottom: 28px;
}
.arc-hero__title span { color: var(--fp-pk, oklch(65% 0.20 350)); }

/* エリアラベル */
.arc-hero__area-label {
  font-family: var(--fp-font-body);
  font-size: 10px;
  letter-spacing: .2em;
  color: oklch(65% 0.010 280);
  display: block;
  margin-bottom: 12px;
}

/* 地方グリッド */
.arc-hero__regions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.arc-hero__region {
  display: block;
  padding: 14px 8px;
  border: 1.5px solid oklch(88% 0.012 280);
  border-radius: 10px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.arc-hero__region:hover {
  border-color: var(--fp-pk, oklch(65% 0.20 350));
  background: oklch(97% 0.015 350);
}
.arc-hero__region.active {
  border-color: var(--fp-pk, oklch(65% 0.20 350));
  background: var(--fp-pk, oklch(65% 0.20 350));
}
.arc-hero__region-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: oklch(25% 0.010 280);
  margin-bottom: 4px;
}
.arc-hero__region.active .arc-hero__region-name { color: #fff; }
.arc-hero__region-count {
  font-family: var(--fp-font-body);
  font-size: 10px;
  color: var(--fp-pk, oklch(65% 0.20 350));
}
.arc-hero__region.active .arc-hero__region-count { color: rgba(255,255,255,.85); }

/* 都道府県パネル */
.arc-hero__pref-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  background: oklch(94% 0.040 350);
  border-radius: 8px;
  min-height: 48px;
  align-items: center;
  margin-bottom: 12px;
}
.arc-hero__pref {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid oklch(75% 0.10 350);
  background: #fff;
  color: oklch(45% 0.010 280);
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.arc-hero__pref:hover {
  border-color: var(--fp-pk, oklch(65% 0.20 350));
  color: oklch(50% 0.18 350);
}
.arc-hero__pref.active {
  background: var(--fp-pk, oklch(65% 0.20 350));
  border-color: var(--fp-pk, oklch(65% 0.20 350));
  color: #fff;
}
.arc-hero__pref small {
  font-family: var(--fp-font-body);
  font-size: 9px;
  opacity: .8;
  margin-left: 2px;
}

/* 統計 */
.arc-hero__stats {
  display: flex;
  gap: 24px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid oklch(92% 0.012 280);
}
.arc-hero__stat { display: flex; flex-direction: column; gap: 2px; }
.arc-hero__stat-val {
  font-family: var(--fp-font-display);
  font-weight: var(--fp-font-display-weight, 700);
  font-size: 26px;
  color: var(--fp-ink, oklch(18% 0.010 280));
  line-height: 1;
}
.arc-hero__stat-val span { font-size: 13px; color: var(--fp-pk, oklch(65% 0.20 350)); }
.arc-hero__stat-label {
  font-family: var(--fp-font-body);
  font-size: 9px;
  letter-spacing: .15em;
  color: oklch(65% 0.010 280);
}

/* ── FILTERS（バッジのみ） ── */
.arc-filters {
  background: #fff;
  border-bottom: 1px solid oklch(92% 0.010 280);
}
.arc-filter-label {
  font-family: var(--fp-font-body);
  font-size: 9px;
  letter-spacing: .2em;
  color: oklch(68% 0.010 280);
  margin-bottom: 8px;
  display: block;
}
.arc-badge-filter {
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid oklch(94% 0.010 280);
}
.arc-badge-chips {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.arc-badge-chips::-webkit-scrollbar { display: none; }
.arc-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid oklch(90% 0.012 280);
  background: var(--fp-cream, oklch(97% 0.008 60));
  color: oklch(48% 0.010 280);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
  font-family: var(--fp-font-ja);
}
.arc-badge-chip input[type="checkbox"] { display: none; }
.arc-badge-chip.active {
  background: oklch(94% 0.040 350);
  border-color: var(--fp-pk, oklch(65% 0.20 350));
  color: oklch(48% 0.18 350);
  font-weight: 500;
}
.arc-badge-chip.active::before {
  content: '✓ ';
  font-size: 9px;
  color: var(--fp-pk, oklch(65% 0.20 350));
}
.arc-active-tags {
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.arc-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 3px 10px;
  background: var(--fp-pk, oklch(65% 0.20 350));
  color: #fff;
  border-radius: 100px;
  text-decoration: none;
}
.arc-active-tag::after { content: '×'; font-size: 11px; opacity: .8; }
.arc-clear-btn {
  font-size: 10px;
  color: oklch(65% 0.010 280);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--fp-font-ja);
}

/* ── SORT BAR ── */
.arc-sort-bar {
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--fp-cream, oklch(97% 0.008 60));
  border-bottom: 1px solid oklch(92% 0.010 280);
}
.arc-sort-bar__count { font-size: 12px; color: oklch(55% 0.010 280); }
.arc-sort-bar__count strong { color: var(--fp-ink, oklch(18% 0.010 280)); font-weight: 700; }
.arc-sort-bar__right { display: flex; align-items: center; gap: 8px; }
.arc-sort-label {
  font-family: var(--fp-font-body);
  font-size: 9px;
  letter-spacing: .12em;
  color: oklch(68% 0.010 280);
}
.arc-sort-select {
  font-family: var(--fp-font-ja);
  font-size: 11px;
  color: oklch(30% 0.010 280);
  border: 1px solid oklch(88% 0.012 280);
  background: #fff;
  padding: 5px 24px 5px 10px;
  border-radius: 6px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}

/* ── GRID ── */
.arc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 24px;
  background: var(--fp-cream, oklch(97% 0.008 60));
}

/* ── CARD ── */
.arc-card {
  background: #fff;
  border: 1px solid oklch(91% 0.012 280);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.arc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px oklch(65% 0.20 350 / 0.12);
  border-color: oklch(75% 0.12 350);
}
.arc-card--featured { grid-column: span 2; border-color: oklch(80% 0.10 350); }
.arc-card__inner { display: flex; flex-direction: column; text-decoration: none; color: inherit; flex: 1; }

.arc-card__thumb {
  aspect-ratio: 16 / 9;
  background: oklch(96% 0.025 350);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arc-card--featured .arc-card__thumb { aspect-ratio: 21 / 9; }
.arc-card__thumb-img { width: 100%; height: 100%; object-fit: cover; }
/* 画像なし：エリア別グラデーション */
.arc-card__thumb--no-img                              { background: linear-gradient(135deg,#fce7f3 0%,#f472b6 100%); }
.arc-card__thumb--no-img[data-region="hokkaido"]      { background: linear-gradient(135deg,#dbeafe 0%,#3b82f6 100%); }
.arc-card__thumb--no-img[data-region="tohoku"]        { background: linear-gradient(135deg,#dcfce7 0%,#22c55e 100%); }
.arc-card__thumb--no-img[data-region="kanto"]         { background: linear-gradient(135deg,#fce7f3 0%,#f472b6 100%); }
.arc-card__thumb--no-img[data-region="chubu"]         { background: linear-gradient(135deg,#ffedd5 0%,#f97316 100%); }
.arc-card__thumb--no-img[data-region="kinki"]         { background: linear-gradient(135deg,#ede9fe 0%,#8b5cf6 100%); }
.arc-card__thumb--no-img[data-region="kyushu"]        { background: linear-gradient(135deg,#fef9c3 0%,#eab308 100%); }

/* 頭文字（data-initial を ::after で表示） */
.arc-card__thumb--no-img::after {
  content: attr(data-initial);
  font-family: var(--fp-font-display);
  font-weight: var(--fp-font-display-weight, 700);
  font-size: 64px;
  color: rgba(255,255,255,.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ph div は不要になったので非表示 */
.arc-card__thumb-ph { display: none; }
.arc-card__rank {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--fp-font-body);
  font-size: 9px;
  letter-spacing: .15em;
  padding: 4px 10px;
  background: var(--fp-pk, oklch(65% 0.20 350));
  color: #fff;
  border-radius: 100px;
}
.arc-card__score-badge {
  position: absolute;
  bottom: 10px; right: 10px;
  background: #fff;
  border: 1.5px solid var(--fp-pk, oklch(65% 0.20 350));
  color: oklch(50% 0.18 350);
  font-family: var(--fp-font-display);
  font-weight: var(--fp-font-display-weight, 700);
  font-size: 18px;
  padding: 2px 8px;
  line-height: 1.2;
  border-radius: 6px;
}

.arc-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.arc-card__badges { display: flex; flex-wrap: wrap; gap: 4px; }
.arc-card__badge {
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  background: oklch(95% 0.030 350);
  color: oklch(52% 0.16 350);
  border-radius: 4px;
}
.arc-card__name {
  font-family: var(--fp-font-display);
  font-weight: var(--fp-font-display-weight, 700);
  font-size: 22px;
  color: var(--fp-ink, oklch(18% 0.010 280));
  line-height: 1.1;
  letter-spacing: .02em;
}
.arc-card--featured .arc-card__name { font-size: 28px; }
.arc-card__area {
  font-family: var(--fp-font-body);
  font-size: 10px;
  letter-spacing: .12em;
  color: oklch(60% 0.010 280);
}
.arc-card__catch { font-size: 11px; font-weight: 300; color: oklch(48% 0.010 280); line-height: 1.65; }
.arc-card__scores { display: flex; flex-direction: column; gap: 5px; }
.arc-card__score-row { display: flex; align-items: center; gap: 6px; }
.arc-card__score-label {
  font-family: var(--fp-font-body);
  font-size: 9px;
  letter-spacing: .06em;
  color: oklch(62% 0.010 280);
  width: 44px;
  flex-shrink: 0;
}
.arc-card__score-bar { flex: 1; height: 3px; background: oklch(92% 0.015 280); }
.arc-card__score-fill { height: 100%; background: var(--fp-pk, oklch(65% 0.20 350)); }
.arc-card__score-num {
  font-family: var(--fp-font-display);
  font-weight: var(--fp-font-display-weight, 700);
  font-size: 13px;
  color: var(--fp-pk, oklch(65% 0.20 350));
  width: 14px;
  text-align: right;
  flex-shrink: 0;
}
.arc-card__footer {
  border-top: 1px solid oklch(93% 0.012 280);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.arc-card__wage { font-size: 11px; font-weight: 300; color: oklch(50% 0.010 280); }
.arc-card__wage strong {
  font-family: var(--fp-font-display);
  font-weight: var(--fp-font-display-weight, 700);
  font-size: 15px;
  color: var(--fp-ink, oklch(18% 0.010 280));
  font-weight: 400;
}
.arc-card__arrow {
  font-family: var(--fp-font-body);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fp-pk, oklch(65% 0.20 350));
}
.arc-card__arrow::after { content: ' →'; }

/* ── MARCY ── */
.arc-marcy {
  background: var(--fp-pk, oklch(65% 0.20 350));
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 24px 24px;
  border-radius: 10px;
}
.arc-marcy__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  background: oklch(60% 0.22 350);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fp-font-display);
  font-weight: var(--fp-font-display-weight, 700);
  font-size: 9px;
  color: oklch(88% 0.06 350);
  text-align: center;
  line-height: 1.3;
}
.arc-marcy__text { font-size: 12px; color: rgba(255,255,255,.92); font-weight: 300; line-height: 1.7; }
.arc-marcy__text strong { color: #fff; font-weight: 700; }

/* ── PAGINATION ── */
.arc-pagination {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.arc-pagination .page-numbers {
  font-family: var(--fp-font-body);
  font-size: 12px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid oklch(90% 0.012 280);
  background: #fff;
  color: oklch(50% 0.010 280);
  text-decoration: none;
  transition: all .15s;
}
.arc-pagination .page-numbers.current {
  background: var(--fp-pk, oklch(65% 0.20 350));
  border-color: var(--fp-pk, oklch(65% 0.20 350));
  color: #fff;
}
.arc-pagination .page-numbers:hover:not(.current) {
  background: oklch(95% 0.025 350);
  border-color: oklch(75% 0.12 350);
  color: oklch(50% 0.18 350);
}

/* ── EMPTY ── */
.arc-empty { padding: 64px 24px; text-align: center; color: oklch(55% 0.010 280); }
.arc-empty a { display: inline-block; margin-top: 16px; color: var(--fp-pk, oklch(65% 0.20 350)); text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .arc-hero__regions { grid-template-columns: repeat(3, 1fr); }
  .arc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
  .arc-card--featured { grid-column: span 2; }
  .arc-page .arc-hero { padding: 32px 20px 28px; }
  .arc-marcy { margin: 0 16px 16px; padding: 16px 20px; }
}
@media (max-width: 480px) {
  .arc-hero__regions { grid-template-columns: repeat(2, 1fr); }
  .arc-grid { grid-template-columns: 1fr; }
  .arc-card--featured { grid-column: span 1; }
}
/* =====================================================
   Area picks / AIO pages
   ===================================================== */

.area-picks {
  background: #fffdf9;
  color: #202124;
}

.area-picks__hero {
  padding: clamp(46px, 7vw, 88px) clamp(20px, 4vw, 48px);
  background:
    linear-gradient(135deg, rgba(34,175,186,.12), rgba(233,79,134,.08)),
    #fffdf9;
  border-bottom: 1px solid #dde7e8;
}

.area-picks__hero h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(34px, 5.8vw, 68px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: 0;
}

.area-picks__hero p {
  max-width: 780px;
  margin: 20px 0 0;
  color: #566568;
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
}

.area-picks__eyebrow {
  margin: 0 0 12px;
  color: #16848c;
  font-family: var(--fp-font-mono, monospace);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.area-picks__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.area-picks__stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #dde7e8;
  border-radius: 999px;
  background: #fff;
  color: #637074;
  font-size: 13px;
  font-weight: 900;
}

.area-picks__stats b {
  color: #0e6974;
  font-family: var(--fp-font-display, sans-serif);
  font-size: 20px;
}

.area-picks__section {
  padding: clamp(48px, 7vw, 86px) clamp(20px, 4vw, 48px);
  border-bottom: 1px solid #dde7e8;
}

.area-picks__head {
  max-width: 780px;
  margin-bottom: 28px;
}

.area-picks__head h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.22;
}

.area-picks__head p {
  margin: 14px 0 0;
  color: #637074;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

.area-picks__table-wrap {
  overflow-x: auto;
  border: 1px solid #dde7e8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(15,39,44,.08);
}

.area-picks__table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  font-size: 13px;
}

.area-picks__table th,
.area-picks__table td {
  padding: 14px;
  border-bottom: 1px solid #edf2f3;
  text-align: left;
  vertical-align: top;
}

.area-picks__table th {
  background: #f5f8f8;
  color: #0e6974;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.area-picks__table td a {
  color: #202124;
  font-weight: 900;
  text-decoration: none;
}

.area-picks__table em {
  display: inline-flex;
  margin: 0 4px 4px 0;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e8f7f9;
  color: #0e6974;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.area-picks__table strong {
  color: #0e6974;
  font-size: 18px;
}

.area-picks__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.area-picks__card a {
  display: block;
  min-height: 230px;
  padding: 22px;
  border: 1px solid #dde7e8;
  border-radius: 16px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 12px 36px rgba(15,39,44,.06);
  transition: transform .16s ease, box-shadow .16s ease;
}

.area-picks__card a:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(15,39,44,.10);
}

.area-picks__rank {
  color: #e94f86;
  font-family: var(--fp-font-mono, monospace);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.area-picks__card h3 {
  margin: 10px 0 8px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.35;
}

.area-picks__card p {
  margin: 0;
  color: #637074;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.85;
}

.area-picks__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}

.area-picks__meta span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #f5f8f8;
  color: #637074;
  font-size: 12px;
  font-weight: 900;
}

.area-picks__guide {
  background: #f5f8f8;
}

.area-picks__guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.area-picks__guide-grid article {
  padding: 22px;
  border: 1px solid #dde7e8;
  border-radius: 14px;
  background: #fff;
}

.area-picks__guide-grid h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
}

.area-picks__guide-grid p {
  margin: 0;
  color: #637074;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
}

.area-picks__faq {
  background: #122b31;
  color: #fff;
}

.area-picks__faq .area-picks__eyebrow {
  color: #91eef3;
}

.area-picks__faq .area-picks__head p {
  color: rgba(255,255,255,.72);
}

.area-picks__faq-list {
  border-top: 1px solid rgba(255,255,255,.18);
}

.area-picks__faq-list details {
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.area-picks__faq-list summary {
  cursor: pointer;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.65;
}

.area-picks__faq-list p {
  margin: 0;
  padding: 0 0 22px;
  color: rgba(255,255,255,.76);
  font-size: 14px;
  line-height: 2;
}

.area-picks__empty {
  padding: 24px;
  border: 1px solid #dde7e8;
  border-radius: 14px;
  background: #fff;
}

@media (max-width: 820px) {
  .area-picks__cards,
  .area-picks__guide-grid {
    grid-template-columns: 1fr;
  }

  .area-picks__hero,
  .area-picks__section {
    padding-inline: 18px;
  }
}

/* SWELL 標準 #top_title_area（独自ヒーローと二重になるため非表示） */
body.tax-area #top_title_area,
body.post-type-archive-store #top_title_area {
  display: none !important;
}