/* =========================================================
   DIVE WORK / STAY ARCHIVE 0.1
   ========================================================= */

.dwsa {
  --dwsa-night: #07111d;
  --dwsa-night-2: #0b1725;
  --dwsa-ivory: #f1eee6;
  --dwsa-steel: #8f9aaa;
  --dwsa-steel-dim: rgba(172, 184, 198, 0.22);
  --dwsa-line: rgba(195, 207, 221, 0.16);
  --dwsa-safety: #d96f3d;
  --dwsa-blue: #6f91ba;

  position: relative;
  left: 50%;
  width: 100vw;
  margin: clamp(64px, 8vw, 120px) 0;
  margin-left: -50vw;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 24%, rgba(41, 78, 121, 0.20), transparent 34%),
    linear-gradient(180deg, var(--dwsa-night-2), var(--dwsa-night));
  color: var(--dwsa-ivory);
}

.dwsa *,
.dwsa *::before,
.dwsa *::after {
  box-sizing: border-box;
}

.dwsa__inner {
  width: min(calc(100% - 80px), 1500px);
  margin: 0 auto;
  padding: clamp(76px, 8vw, 128px) 0 clamp(70px, 7vw, 110px);
}

.dwsa__header {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: clamp(54px, 8vw, 130px);
  align-items: end;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--dwsa-line);
}

.dwsa__eyebrow,
.dwsa-map-detail__label {
  margin: 0 0 18px;
  color: var(--dwsa-safety);
  font: 500 10px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .22em;
}

.dwsa__title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--dwsa-ivory) !important;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif !important;
  font-size: clamp(48px, 5.2vw, 86px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -.035em;
}

.dwsa__title::before,
.dwsa__title::after {
  display: none !important;
}

.dwsa__lead {
  margin: 0 0 7px;
  color: rgba(241, 238, 230, .58);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 2;
}

.dwsa__stats {
  display: flex;
  gap: 0;
  padding: 34px 0 42px;
}

.dwsa-stat {
  min-width: 118px;
  padding-right: 38px;
  margin-right: 38px;
  border-right: 1px solid var(--dwsa-line);
}

.dwsa-stat:last-child {
  border-right: 0;
}

.dwsa-stat strong,
.dwsa-stat span {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
}

.dwsa-stat strong {
  color: var(--dwsa-ivory);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: .04em;
}

.dwsa-stat span {
  margin-top: 5px;
  color: rgba(241, 238, 230, .38);
  font-size: 8px;
  letter-spacing: .2em;
}

.dwsa__body {
  display: grid;
  grid-template-columns: minmax(380px, .85fr) minmax(500px, 1.15fr);
  gap: clamp(58px, 7vw, 118px);
  align-items: start;
}

.dwsa__map-column {
  position: sticky;
  top: 40px;
}

.dwsa-map-wrap {
  position: relative;
  max-width: 510px;
  margin: 0 auto;
}

.dwsa-map {
  display: block;
  width: 100%;
  height: auto;
}

.dwsa-map__grid line {
  stroke: rgba(156, 174, 195, .07);
  stroke-width: 1;
}

.dwsa-map__real-land {
  opacity: .28;
  filter: grayscale(1) invert(1) brightness(1.38) contrast(.82);
  transition: opacity .35s ease;
}

.dwsa-map__fallback {
  opacity: .16;
  transition: opacity .35s ease;
}

.dwsa-map__fallback path {
  fill: rgba(191, 201, 210, .075);
  stroke: rgba(195, 207, 221, .34);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.dwsa.is-real-map-loaded .dwsa-map__fallback {
  opacity: 0;
}

.dwsa-point {
  cursor: pointer;
  outline: none;
}

.dwsa-point__pulse {
  fill: transparent;
  stroke: rgba(217, 111, 61, 0);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  transition: stroke .25s ease, transform .25s ease;
}

.dwsa-point__ring {
  fill: rgba(7, 17, 29, .90);
  stroke: var(--dwsa-safety);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .25s ease, stroke .25s ease, transform .25s ease;
}

.dwsa-point__core {
  fill: var(--dwsa-ivory);
}

.dwsa-point__count {
  fill: rgba(241, 238, 230, .58);
  font: 500 14px Arial, Helvetica, sans-serif;
  letter-spacing: .06em;
}

.dwsa-point.is-active .dwsa-point__pulse,
.dwsa-point:hover .dwsa-point__pulse,
.dwsa-point:focus .dwsa-point__pulse {
  stroke: rgba(217, 111, 61, .42);
  transform: scale(1.18);
}

.dwsa-point.is-active .dwsa-point__ring,
.dwsa-point:hover .dwsa-point__ring,
.dwsa-point:focus .dwsa-point__ring {
  fill: var(--dwsa-safety);
  stroke: var(--dwsa-ivory);
  transform: scale(1.13);
}

.dwsa-map-caption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -14px 38px 0;
  color: rgba(241, 238, 230, .34);
  font: 500 8px Arial, Helvetica, sans-serif;
  letter-spacing: .18em;
}

.dwsa-map-caption__line {
  display: block;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(143,154,170,.15), rgba(217,111,61,.75));
}

.dwsa-map-detail {
  max-width: 440px;
  min-height: 128px;
  margin: 42px auto 0;
  padding: 22px 24px;
  border-top: 1px solid rgba(217, 111, 61, .42);
  border-bottom: 1px solid var(--dwsa-line);
}

.dwsa-map-detail__label {
  margin-bottom: 11px;
  font-size: 8px;
}

.dwsa-map-detail__name {
  margin: 0;
  color: var(--dwsa-ivory);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 20px;
  line-height: 1.7;
}

.dwsa-map-detail__meta {
  margin: 9px 0 0;
  color: rgba(241, 238, 230, .34);
  font: 500 8px Arial, Helvetica, sans-serif;
  letter-spacing: .16em;
}

.dwsa-legend {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  margin-bottom: 26px;
  color: rgba(241, 238, 230, .35);
  font: 500 8px Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
}

.dwsa-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dwsa-legend__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dwsa-legend__dot--archive {
  border: 1px solid var(--dwsa-steel);
}

.dwsa-legend__dot--record {
  background: var(--dwsa-safety);
}

.dwsa-timeline {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.dwsa-stay {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  margin: 0 !important;
  padding: 0 !important;
  outline: none;
}

.dwsa-stay__line {
  position: relative;
}

.dwsa-stay__line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  width: 1px;
  background: var(--dwsa-line);
}

.dwsa-stay:first-child .dwsa-stay__line::before {
  top: 24px;
}

.dwsa-stay:last-child .dwsa-stay__line::before {
  bottom: calc(100% - 24px);
}

.dwsa-stay__line span {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 6.5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dwsa-night);
  border: 1px solid var(--dwsa-steel);
  transition: background .2s ease, border .2s ease, transform .2s ease;
}

.dwsa-stay--record .dwsa-stay__line span {
  border-color: var(--dwsa-safety);
}

.dwsa-stay__card {
  padding: 16px 0 22px 18px;
  border-bottom: 1px solid rgba(195, 207, 221, .08);
  transition: transform .22s ease, opacity .22s ease;
}

.dwsa-stay:last-child .dwsa-stay__card {
  border-bottom: 0;
}

.dwsa-stay__top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.dwsa-stay__date,
.dwsa-stay__number {
  font-family: Arial, Helvetica, sans-serif;
}

.dwsa-stay__date {
  margin: 0;
  color: rgba(241, 238, 230, .45);
  font-size: 9px;
  letter-spacing: .13em;
}

.dwsa-stay__date span {
  margin: 0 7px;
  color: var(--dwsa-safety);
}

.dwsa-stay__number {
  margin: 0;
  color: rgba(241, 238, 230, .17);
  font-size: 18px;
  line-height: 1;
}

.dwsa-stay__area {
  margin: 12px 0 3px;
  color: var(--dwsa-safety);
  font: 500 9px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
}

.dwsa-stay__place {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--dwsa-ivory) !important;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif !important;
  font-size: clamp(18px, 1.45vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.dwsa-stay__place::before,
.dwsa-stay__place::after {
  display: none !important;
}


.dwsa-stay:hover .dwsa-stay__card,
.dwsa-stay:focus .dwsa-stay__card,
.dwsa-stay.is-active .dwsa-stay__card {
  transform: translateX(7px);
}

.dwsa-stay:hover .dwsa-stay__line span,
.dwsa-stay:focus .dwsa-stay__line span,
.dwsa-stay.is-active .dwsa-stay__line span {
  background: var(--dwsa-safety);
  border-color: var(--dwsa-ivory);
  transform: scale(1.25);
}

.dwsa-stay.is-dimmed .dwsa-stay__card {
  opacity: .26;
}

.dwsa__footer {
  display: grid;
  grid-template-columns: auto 130px auto 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 70px;
  padding-top: 25px;
  border-top: 1px solid var(--dwsa-line);
  color: rgba(241, 238, 230, .30);
  font: 500 8px Arial, Helvetica, sans-serif;
  letter-spacing: .17em;
}

.dwsa__footer p {
  margin: 0;
}

.dwsa__footer > span {
  height: 1px;
  background: linear-gradient(90deg, rgba(143,154,170,.28), var(--dwsa-safety));
}

.dwsa__footer small {
  justify-self: end;
  font-size: 10px;
  letter-spacing: .04em;
  line-height: 1.7;
}

/* ---------- Tablet / mobile ---------- */

@media (max-width: 980px) {
  .dwsa__inner {
    width: min(calc(100% - 44px), 760px);
  }

  .dwsa__header {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .dwsa__body {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .dwsa__map-column {
    position: static;
  }

  .dwsa-map-wrap {
    max-width: 500px;
  }

  .dwsa__footer {
    grid-template-columns: auto 1fr auto;
  }

  .dwsa__footer small {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .dwsa {
    margin: 56px 0;
  }

  .dwsa__inner {
    width: calc(100% - 40px);
    padding: 62px 0 58px;
  }

  .dwsa__header {
    padding-bottom: 34px;
  }

  .dwsa__eyebrow {
    font-size: 8px;
    margin-bottom: 13px;
  }

  .dwsa__title {
    font-size: clamp(39px, 12vw, 58px) !important;
    line-height: 1.28 !important;
  }

  .dwsa__lead {
    font-size: 13px;
    line-height: 1.9;
  }

  .dwsa__stats {
    padding: 26px 0 34px;
  }

  .dwsa-stat {
    min-width: 0;
    flex: 1;
    padding-right: 15px;
    margin-right: 15px;
  }

  .dwsa-stat strong {
    font-size: 23px;
  }

  .dwsa-map-detail {
    margin-top: 28px;
  }

  .dwsa-legend {
    justify-content: flex-start;
    margin-bottom: 18px;
  }

  .dwsa-stay {
    grid-template-columns: 27px minmax(0, 1fr);
  }

  .dwsa-stay__line::before {
    left: 8px;
  }

  .dwsa-stay__line span {
    left: 4.5px;
  }

  .dwsa-stay__card {
    padding-left: 10px;
    padding-bottom: 25px;
  }

  .dwsa-stay__place {
    font-size: 18px !important;
  }

  .dwsa__footer {
    margin-top: 48px;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dwsa *,
  .dwsa *::before,
  .dwsa *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* =========================================================
   R1.2 / BALANCED REAL MAP
   ========================================================= */

.dwsa-map__grid line {
  stroke: rgba(156, 174, 195, .055);
}

.dwsa-point__label {
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.dwsa-point__label line {
  stroke: rgba(217,111,61,.7);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.dwsa-point__label text {
  fill: rgba(241,238,230,.86);
  font: 500 15px Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
  paint-order: stroke;
  stroke: rgba(7,17,29,.96);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.dwsa-point.is-active .dwsa-point__label,
.dwsa-point:hover .dwsa-point__label,
.dwsa-point:focus .dwsa-point__label {
  opacity: 1;
}

.dwsa-point.is-latest-point .dwsa-point__pulse {
  stroke: rgba(217,111,61,.34);
  animation: dwsa-latest-pulse 2.6s ease-out infinite;
}

.dwsa-stay.is-latest-stay .dwsa-stay__date::after {
  content: "LATEST";
  display: inline-block;
  margin-left: 12px;
  padding: 4px 7px 3px;
  border: 1px solid rgba(217,111,61,.48);
  color: var(--dwsa-safety);
  font-size: 7px;
  letter-spacing: .16em;
  vertical-align: 1px;
}

.dwsa-stay {
  cursor: pointer;
}

@keyframes dwsa-latest-pulse {
  0% { transform: scale(.86); opacity: .85; }
  70% { transform: scale(1.55); opacity: .08; }
  100% { transform: scale(1.7); opacity: 0; }
}

@media (max-width: 980px) {
  .dwsa-map-wrap {
    max-width: 470px;
  }
}

@media (max-width: 640px) {
  .dwsa-map-wrap {
    max-width: 410px;
  }

  .dwsa-map__real-land {
    opacity: .34;
  }

  .dwsa-point__label text {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dwsa-point.is-latest-point .dwsa-point__pulse {
    animation: none !important;
  }
}


/* =========================================================
   R1.2.2 / POINT COUNT CLEANUP
   地図の小数字は通常時に消し、選択時だけ見せる。
   ========================================================= */

.dwsa-point__count {
  opacity: 0;
  transition: opacity .18s ease;
}

.dwsa-point.is-active .dwsa-point__count,
.dwsa-point:hover .dwsa-point__count,
.dwsa-point:focus .dwsa-point__count {
  opacity: 1;
}


/* =========================================================
   R1.3 / REGION FOCUS
   全国図 = 俯瞰、地域詳細 = 正確さ。
   北海道はホバー / フォーカス / タップで拡大表示。
   ========================================================= */

.dwsa-map-wrap {
  isolation: isolate;
}

.dwsa-region-hotspot {
  fill: rgba(255,255,255,0.001);
  stroke: transparent;
  cursor: zoom-in;
  outline: none;
}

.dwsa-region-cluster {
  cursor: zoom-in;
  outline: none;
}

.dwsa-region-cluster__halo {
  fill: rgba(217,111,61,0);
  stroke: rgba(217,111,61,.28);
  stroke-width: 1.5;
  transition: fill .2s ease, stroke .2s ease, transform .2s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.dwsa-region-cluster__ring {
  fill: rgba(7,17,29,.92);
  stroke: var(--dwsa-safety);
  stroke-width: 2;
  transition: fill .2s ease, stroke .2s ease, transform .2s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.dwsa-region-cluster__dot {
  fill: var(--dwsa-ivory);
}

.dwsa-region-cluster__count {
  opacity: .52;
  fill: var(--dwsa-ivory);
  font: 500 12px Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
  paint-order: stroke;
  stroke: rgba(7,17,29,.95);
  stroke-width: 4px;
  transition: opacity .2s ease;
}

.dwsa-region-cluster:hover .dwsa-region-cluster__halo,
.dwsa-region-cluster:focus .dwsa-region-cluster__halo,
.dwsa-region-cluster.is-active .dwsa-region-cluster__halo {
  fill: rgba(217,111,61,.08);
  stroke: rgba(217,111,61,.65);
  transform: scale(1.16);
}

.dwsa-region-cluster:hover .dwsa-region-cluster__ring,
.dwsa-region-cluster:focus .dwsa-region-cluster__ring,
.dwsa-region-cluster.is-active .dwsa-region-cluster__ring {
  fill: var(--dwsa-safety);
  stroke: var(--dwsa-ivory);
  transform: scale(1.08);
}

.dwsa-region-cluster:hover .dwsa-region-cluster__count,
.dwsa-region-cluster:focus .dwsa-region-cluster__count,
.dwsa-region-cluster.is-active .dwsa-region-cluster__count {
  opacity: .9;
}

/* 地域詳細パネル */
.dwsa-region-focus {
  position: absolute;
  z-index: 20;
  top: 12%;
  left: 50%;
  width: min(94%, 470px);
  padding: 20px 20px 17px;
  border: 1px solid rgba(195,207,221,.22);
  background:
    radial-gradient(circle at 72% 18%, rgba(49,91,139,.22), transparent 34%),
    rgba(5,14,25,.97);
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 14px) scale(.965);
  transform-origin: 50% 22%;
  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .26s cubic-bezier(.2,.7,.2,1);
}

.dwsa-region-focus.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.dwsa.is-region-open .dwsa-map {
  filter: brightness(.76);
  transition: filter .25s ease;
}

.dwsa-region-focus__head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--dwsa-line);
}

.dwsa-region-focus__eyebrow {
  margin: 0 0 7px;
  color: var(--dwsa-safety);
  font: 500 7px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .2em;
}

.dwsa-region-focus__title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--dwsa-ivory) !important;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif !important;
  font-size: 31px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

.dwsa-region-focus__title::before,
.dwsa-region-focus__title::after {
  display: none !important;
}

.dwsa-region-focus__sub {
  margin: 7px 0 0;
  color: rgba(241,238,230,.43);
  font: 500 7px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
}

.dwsa-region-focus__close {
  appearance: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(241,238,230,.18);
  background: transparent;
  color: rgba(241,238,230,.72);
  font: 300 22px/28px Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.dwsa-region-focus__close:hover,
.dwsa-region-focus__close:focus {
  border-color: var(--dwsa-safety);
  color: var(--dwsa-ivory);
}

.dwsa-region-focus__viewport {
  position: relative;
  margin-top: 15px;
  overflow: hidden;
  border-top: 1px solid rgba(217,111,61,.28);
  border-bottom: 1px solid rgba(195,207,221,.12);
  background:
    linear-gradient(rgba(122,145,171,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,145,171,.05) 1px, transparent 1px);
  background-size: 25% 50%;
}

.dwsa-region-map {
  display: block;
  width: 100%;
  aspect-ratio: 86 / 59;
  overflow: visible;
}


.dwsa-detail-point {
  cursor: pointer;
  outline: none;
}

.dwsa-detail-point__halo {
  fill: rgba(217,111,61,0);
  stroke: rgba(217,111,61,.38);
  stroke-width: .45;
  transition: fill .18s ease, transform .18s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.dwsa-detail-point__ring {
  fill: rgba(7,17,29,.96);
  stroke: var(--dwsa-safety);
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
}

.dwsa-detail-point__core {
  fill: var(--dwsa-ivory);
}

.dwsa-detail-point__leader {
  stroke: rgba(217,111,61,.78);
  stroke-width: .45;
  vector-effect: non-scaling-stroke;
}

.dwsa-detail-point__label {
  fill: rgba(241,238,230,.96);
  font: 500 3.25px Arial, Helvetica, sans-serif;
  letter-spacing: .03em;
  paint-order: stroke;
  stroke: rgba(5,14,25,.98);
  stroke-width: 1.4px;
  stroke-linejoin: round;
}

.dwsa-detail-point:hover .dwsa-detail-point__halo,
.dwsa-detail-point:focus .dwsa-detail-point__halo,
.dwsa-detail-point.is-active .dwsa-detail-point__halo {
  fill: rgba(217,111,61,.16);
  transform: scale(1.26);
}

.dwsa-detail-point:hover .dwsa-detail-point__ring,
.dwsa-detail-point:focus .dwsa-detail-point__ring,
.dwsa-detail-point.is-active .dwsa-detail-point__ring {
  fill: var(--dwsa-safety);
  stroke: var(--dwsa-ivory);
}

.dwsa-region-focus__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 14px;
  background: rgba(195,207,221,.10);
  border: 1px solid rgba(195,207,221,.10);
}

.dwsa-region-focus__list button {
  appearance: none;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  background: rgba(7,17,29,.92);
  color: rgba(241,238,230,.75);
  text-align: left;
  font: 500 12px/1.4 Arial, Helvetica, sans-serif;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.dwsa-region-focus__list button span {
  display: inline-block;
  width: 27px;
  color: var(--dwsa-safety);
  font-size: 7px;
  letter-spacing: .12em;
}

.dwsa-region-focus__list button:hover,
.dwsa-region-focus__list button:focus,
.dwsa-region-focus__list button.is-active {
  background: rgba(217,111,61,.12);
  color: var(--dwsa-ivory);
}

.dwsa-region-focus__note {
  margin: 12px 0 0;
  color: rgba(241,238,230,.36);
  font: 400 10px/1.7 Arial, Helvetica, sans-serif;
  letter-spacing: .02em;
}

/* 北海道の全国図4地点は詳細側へ移したので、旧ラベルは不要 */
.dwsa-region-focus .dwsa-point__count {
  opacity: 1;
}

@media (max-width: 640px) {
  .dwsa-region-cluster__count {
    font-size: 15px;
  }

  .dwsa-region-focus {
    top: 7%;
    width: calc(100% - 8px);
    padding: 17px 15px 14px;
  }

  .dwsa-region-focus__title {
    font-size: 28px !important;
  }

  .dwsa-region-focus__list button {
    min-height: 46px;
    font-size: 13px;
  }

  .dwsa-region-focus__note {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dwsa-region-focus {
    transition: none !important;
  }
}


/* =========================================================
   R1.3.1 / HOKKAIDO PRECISION FOCUS
   ラスター拡大をやめ、北海道南西部をローカルSVGで描画。
   ========================================================= */

.dwsa-region-focus {
  width: min(94%, 520px);
}

.dwsa-region-focus__viewport {
  background:
    linear-gradient(rgba(122,145,171,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,145,171,.055) 1px, transparent 1px),
    radial-gradient(circle at 68% 42%, rgba(47,79,114,.09), transparent 40%);
  background-size: 20% 25%, 20% 25%, auto;
}

.dwsa-region-map {
  aspect-ratio: 48 / 34;
}

.dwsa-region-map__hokkaido {
  fill: rgba(152,170,189,.18);
  stroke: rgba(195,207,221,.62);
  stroke-width: .28;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-map__geo-grid line {
  stroke: rgba(195,207,221,.11);
  stroke-width: .18;
  stroke-dasharray: 1.2 1.4;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-map__geo-grid text {
  fill: rgba(241,238,230,.26);
  font: 500 1.15px Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
}

.dwsa-region-reference circle {
  fill: rgba(241,238,230,.34);
}

.dwsa-region-reference text {
  fill: rgba(241,238,230,.32);
  font: 500 1.35px Arial, Helvetica, sans-serif;
  paint-order: stroke;
  stroke: rgba(5,14,25,.98);
  stroke-width: .75px;
}

.dwsa-detail-point__label {
  font-size: 1.8px;
  stroke-width: .8px;
}

.dwsa-detail-point__leader {
  stroke-width: .22;
}

.dwsa-detail-point__ring {
  stroke-width: .34;
}

.dwsa-detail-point__halo {
  stroke-width: .22;
}

.dwsa-region-inset {
  opacity: .62;
  pointer-events: none;
}

.dwsa-region-inset path {
  fill: rgba(152,170,189,.16);
  stroke: rgba(195,207,221,.62);
  stroke-width: 3.2;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-inset rect {
  fill: rgba(217,111,61,.08);
  stroke: var(--dwsa-safety);
  stroke-width: 3.1;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 640px) {
  .dwsa-region-focus {
    width: calc(100% - 8px);
  }

  .dwsa-region-map {
    aspect-ratio: 48 / 36;
  }
}


/* =========================================================
   R1.3.2 / TRUE GEOLOCATION BASE
   北海道拡大図を地理範囲の定義された位置表示用地図へ変更。
   ========================================================= */

.dwsa-region-focus {
  width: min(94%, 560px);
}

.dwsa-region-focus__viewport {
  background: #07111d;
}

.dwsa-region-map {
  aspect-ratio: 1 / 1;
  background: #07111d;
}

.dwsa-region-map__geo-base {
  opacity: .44;
  filter: grayscale(1) saturate(.25) brightness(.48) contrast(1.28);
}

.dwsa-region-map__grid line {
  stroke: rgba(241,238,230,.12);
  stroke-width: 1;
  stroke-dasharray: 5 7;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-map__grid text {
  fill: rgba(241,238,230,.28);
  font: 500 11px Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
}

.dwsa-region-reference circle {
  fill: rgba(241,238,230,.50);
  stroke: rgba(7,17,29,.95);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-reference text {
  fill: rgba(241,238,230,.52);
  font: 500 14px Arial, Helvetica, sans-serif;
  paint-order: stroke;
  stroke: rgba(7,17,29,.96);
  stroke-width: 4px;
}

.dwsa-detail-point__halo {
  fill: rgba(217,111,61,.03);
  stroke: rgba(217,111,61,.52);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.dwsa-detail-point__ring {
  fill: rgba(7,17,29,.96);
  stroke: var(--dwsa-safety);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.dwsa-detail-point__core {
  fill: var(--dwsa-ivory);
}

.dwsa-detail-point__leader {
  stroke: rgba(217,111,61,.78);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.dwsa-detail-point__label {
  fill: rgba(241,238,230,.96);
  font: 600 17px Arial, Helvetica, sans-serif;
  letter-spacing: .02em;
  paint-order: stroke;
  stroke: rgba(5,14,25,.98);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.dwsa-region-focus__source {
  margin: 6px 0 0;
  color: rgba(241,238,230,.22);
  font: 500 7px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
}

@media (max-width: 640px) {
  .dwsa-region-focus {
    width: calc(100% - 8px);
  }

  .dwsa-detail-point__label {
    font-size: 18px;
  }
}


/* =========================================================
   R1.3.4 / CLEAN REAL HOKKAIDO VECTOR
   自作の北海道輪郭を廃止。実在の位置表示用ベクター地図を背景に使用。
   ========================================================= */

.dwsa-region-focus {
  width: min(94%, 590px);
}

.dwsa-region-focus__viewport {
  background:
    radial-gradient(circle at 70% 25%, rgba(32,69,108,.18), transparent 32%),
    #07111d;
  border: 1px solid rgba(241,238,230,.10);
}

.dwsa-region-map {
  aspect-ratio: 620 / 540;
  background: #07111d;
}

.dwsa-region-map__geo-base--clean {
  opacity: .46;
}

.dwsa-region-map__grid line {
  stroke: rgba(241,238,230,.10);
  stroke-width: 1;
  stroke-dasharray: 5 7;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-map__grid text {
  fill: rgba(241,238,230,.26);
  font: 500 10px Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
}

.dwsa-region-map__caption text {
  fill: rgba(217,111,61,.82);
  font: 600 9px Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
}

.dwsa-region-reference circle {
  fill: rgba(241,238,230,.44);
  stroke: rgba(7,17,29,.96);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-reference text {
  fill: rgba(241,238,230,.50);
  font: 500 13px Arial, Helvetica, sans-serif;
  paint-order: stroke;
  stroke: rgba(7,17,29,.98);
  stroke-width: 4px;
}

.dwsa-detail-point__halo {
  fill: rgba(217,111,61,.025);
  stroke: rgba(217,111,61,.50);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.dwsa-detail-point__ring {
  fill: rgba(7,17,29,.97);
  stroke: var(--dwsa-safety);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.dwsa-detail-point__core {
  fill: var(--dwsa-ivory);
}

.dwsa-detail-point__leader {
  stroke: rgba(217,111,61,.72);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.dwsa-detail-point__label {
  fill: rgba(241,238,230,.98);
  font: 600 16px Arial, Helvetica, sans-serif;
  letter-spacing: .02em;
  paint-order: stroke;
  stroke: rgba(5,14,25,.98);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.dwsa-region-inset-frame > rect:first-child {
  fill: rgba(5,14,25,.88);
  stroke: rgba(241,238,230,.16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-inset-map {
  opacity: .56;
}

.dwsa-region-inset-focus {
  fill: rgba(217,111,61,.05);
  stroke: rgba(217,111,61,.80);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-focus__note {
  color: rgba(241,238,230,.53);
}

.dwsa-region-focus__source {
  margin-top: 5px;
  color: rgba(241,238,230,.22);
  font: 500 7px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: .07em;
}

@media (max-width: 640px) {
  .dwsa-region-focus {
    width: calc(100% - 8px);
  }

  .dwsa-region-inset-frame {
    opacity: .76;
  }

  .dwsa-detail-point__label {
    font-size: 18px;
  }
}


/* =========================================================
   R1.3.5 / EDITORIAL MAP POLISH
   正確な地図は維持しつつ、GIS感を削って4地点を主役にする。
   ========================================================= */

.dwsa-region-focus {
  width: min(94%, 560px);
}

.dwsa-region-focus__viewport {
  border: 1px solid rgba(241,238,230,.08);
  background:
    radial-gradient(circle at 62% 28%, rgba(44,78,115,.12), transparent 40%),
    #07111d;
}

.dwsa-region-map {
  aspect-ratio: 620 / 500;
  background: #07111d;
}

.dwsa-region-map__geo-base--clean {
  opacity: .30;
  filter: grayscale(1) brightness(.62) contrast(1.05);
}

.dwsa-region-map__caption text {
  fill: rgba(217,111,61,.74);
  font: 600 8px Arial, Helvetica, sans-serif;
  letter-spacing: .16em;
}

.dwsa-region-reference circle {
  fill: rgba(241,238,230,.30);
  stroke: rgba(7,17,29,.96);
  stroke-width: 2;
}

.dwsa-region-reference text {
  fill: rgba(241,238,230,.34);
  font-size: 12px;
}

.dwsa-detail-point__halo {
  fill: rgba(217,111,61,.025);
  stroke: rgba(217,111,61,.46);
}

.dwsa-detail-point__ring {
  stroke-width: 2.2;
}

.dwsa-detail-point__label {
  font-size: 17px;
  stroke-width: 5px;
}

.dwsa-region-focus__list {
  margin-top: 12px;
  border-color: rgba(241,238,230,.08);
  background: rgba(241,238,230,.04);
}

.dwsa-region-focus__list button {
  background: rgba(7,17,29,.86);
  color: rgba(241,238,230,.68);
}

.dwsa-region-focus__note {
  margin-top: 11px;
  color: rgba(241,238,230,.42);
  font-size: 9px;
}

.dwsa-region-focus__source {
  margin-top: 4px;
  color: rgba(241,238,230,.16);
  font-size: 6px;
  letter-spacing: .06em;
}

.dwsa-region-inset-frame,
.dwsa-region-map__grid {
  display: none !important;
}

@media (max-width: 640px) {
  .dwsa-region-focus {
    width: calc(100% - 8px);
  }

  .dwsa-region-map {
    aspect-ratio: 1 / 1;
  }

  .dwsa-detail-point__label {
    font-size: 18px;
  }
}


/* =========================================================
   R1.3.11 / SECOND REGION FOCUS
   軽井沢・北軽井沢・草津を全国図では1クラスター、詳細では3地点に分離。
   ========================================================= */

/* 複数パネル時は開いている1枚だけを表示する */
.dwsa.is-region-open .dwsa-region-focus:not(.is-open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.dwsa-region-focus.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

/* 地域クラスターは該当地域だけを点灯 */
.dwsa-region-cluster.is-active .dwsa-region-cluster__halo {
  fill: rgba(217,111,61,.08);
  stroke: rgba(217,111,61,.65);
  transform: scale(1.16);
}

.dwsa-region-cluster.is-active .dwsa-region-cluster__ring {
  fill: var(--dwsa-safety);
  stroke: var(--dwsa-ivory);
  transform: scale(1.08);
}

.dwsa-region-cluster.is-active .dwsa-region-cluster__count {
  opacity: .9;
}

.dwsa-region-focus--joshinetsu {
  width: min(94%, 560px);
}

.dwsa-region-focus--joshinetsu .dwsa-region-focus__viewport {
  background:
    radial-gradient(circle at 56% 46%, rgba(44,78,115,.13), transparent 42%),
    #07111d;
}

.dwsa-region-focus--joshinetsu .dwsa-region-map {
  aspect-ratio: 240 / 220;
}

.dwsa-region-map__japan-base {
  opacity: .34;
  filter: grayscale(1) brightness(.62) contrast(1.06);
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__label {
  font-size: 10px;
  stroke-width: 3.5px;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__leader {
  stroke-width: .9;
}

.dwsa-region-focus--joshinetsu .dwsa-region-focus__list--three {
  grid-template-columns: repeat(3, 1fr);
}

.dwsa-region-focus--joshinetsu .dwsa-region-focus__list--three button {
  min-width: 0;
  padding-left: 10px;
  padding-right: 8px;
}

@media (max-width: 640px) {
  .dwsa-region-focus--joshinetsu .dwsa-region-map {
    aspect-ratio: 1 / 1;
  }

  .dwsa-region-focus--joshinetsu .dwsa-detail-point__label {
    font-size: 12px;
  }

  .dwsa-region-focus--joshinetsu .dwsa-region-focus__list--three {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   R1.3.12 / JOSHINETSU GEOLOCATION FIX
   草津・北軽井沢・軽井沢を緯度経度から直接投影。
   ========================================================= */
.dwsa-region-focus--joshinetsu .dwsa-region-map {
  aspect-ratio: 13.4 / 12.6;
  background: #07111d;
}

.dwsa-region-focus--joshinetsu .dwsa-region-map__japan-base {
  opacity: .26;
  filter: grayscale(1) brightness(.50) contrast(1.16);
}

.dwsa-region-focus--joshinetsu .dwsa-region-map__caption text {
  fill: rgba(217,111,61,.78);
  font: 600 .34px Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
}

.dwsa-region-focus--joshinetsu .dwsa-joshinetsu-axis line {
  stroke: rgba(241,238,230,.11);
  stroke-width: .04;
  stroke-dasharray: .14 .16;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__halo {
  fill: rgba(217,111,61,.025);
  stroke: rgba(217,111,61,.54);
  stroke-width: .055;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__ring {
  fill: rgba(7,17,29,.97);
  stroke: var(--dwsa-safety);
  stroke-width: .075;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__core {
  fill: var(--dwsa-ivory);
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__label {
  fill: rgba(241,238,230,.98);
  font: 600 .64px Arial, Helvetica, sans-serif;
  letter-spacing: .01em;
  paint-order: stroke;
  stroke: rgba(5,14,25,.98);
  stroke-width: .18px;
  stroke-linejoin: round;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__leader {
  stroke: rgba(217,111,61,.72);
  stroke-width: .045;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 640px) {
  .dwsa-region-focus--joshinetsu .dwsa-region-map {
    aspect-ratio: 1 / 1;
  }
  .dwsa-region-focus--joshinetsu .dwsa-detail-point__label {
    font-size: .72px;
  }
}


/* =========================================================
   R1.3.13 / JOSHINETSU EDITORIAL POLISH
   3地点を主役にし、背景線とラベル距離を整理。
   ========================================================= */
.dwsa-region-focus--joshinetsu .dwsa-region-map__japan-base {
  opacity: .14;
  filter: grayscale(1) brightness(.54) contrast(.72);
}

.dwsa-region-focus--joshinetsu .dwsa-joshinetsu-map-veil {
  fill: rgba(7,17,29,.14);
  pointer-events: none;
}

.dwsa-region-focus--joshinetsu .dwsa-joshinetsu-axis line {
  stroke: rgba(241,238,230,.055);
}

.dwsa-region-focus--joshinetsu .dwsa-joshinetsu-pref-labels text {
  fill: rgba(241,238,230,.14);
  font: 600 .32px Arial, Helvetica, sans-serif;
  letter-spacing: .12em;
  paint-order: stroke;
  stroke: rgba(5,14,25,.55);
  stroke-width: .06px;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__label {
  font-size: .62px;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__leader {
  stroke: rgba(217,111,61,.58);
  stroke-width: .038;
}

@media (max-width: 640px) {
  .dwsa-region-focus--joshinetsu .dwsa-joshinetsu-pref-labels text {
    font-size: .36px;
  }
}


/* =========================================================
   R1.3.15 / JOSHINETSU STYLE ALIGNMENT
   軽井沢・草津の拡大図を北海道モーダルと同系統の見え方へ寄せる。
   ========================================================= */
.dwsa-region-focus--joshinetsu {
  width: min(94%, 560px);
}

.dwsa-region-focus--joshinetsu .dwsa-region-focus__viewport {
  border: 1px solid rgba(241,238,230,.08);
  background:
    radial-gradient(circle at 62% 28%, rgba(44,78,115,.12), transparent 40%),
    #07111d;
}

.dwsa-region-focus--joshinetsu .dwsa-region-map {
  aspect-ratio: 13.4 / 12.6;
  background: #07111d;
}

.dwsa-region-focus--joshinetsu .dwsa-region-map__japan-base {
  opacity: .30;
  filter: grayscale(1) brightness(.62) contrast(1.05);
}

.dwsa-region-focus--joshinetsu .dwsa-joshinetsu-map-veil {
  fill: rgba(7,17,29,.04);
}

.dwsa-region-focus--joshinetsu .dwsa-region-map__caption text {
  fill: rgba(217,111,61,.74);
  font: 600 .34px Arial, Helvetica, sans-serif;
  letter-spacing: .12em;
}

.dwsa-region-focus--joshinetsu .dwsa-joshinetsu-pref-labels text {
  fill: rgba(241,238,230,.22);
  font: 600 .32px Arial, Helvetica, sans-serif;
  letter-spacing: .12em;
  paint-order: stroke;
  stroke: rgba(5,14,25,.72);
  stroke-width: .06px;
}

.dwsa-region-focus--joshinetsu .dwsa-joshinetsu-axis line {
  stroke: rgba(241,238,230,.08);
  stroke-width: .04;
  stroke-dasharray: .14 .16;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__halo {
  fill: rgba(217,111,61,.025);
  stroke: rgba(217,111,61,.46);
  stroke-width: .055;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__ring {
  fill: rgba(7,17,29,.97);
  stroke: var(--dwsa-safety);
  stroke-width: .075;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__core {
  fill: var(--dwsa-ivory);
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__label {
  fill: rgba(241,238,230,.98);
  font: 600 .64px Arial, Helvetica, sans-serif;
  letter-spacing: .01em;
  paint-order: stroke;
  stroke: rgba(5,14,25,.98);
  stroke-width: .18px;
  stroke-linejoin: round;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__leader {
  stroke: rgba(217,111,61,.72);
  stroke-width: .045;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 640px) {
  .dwsa-region-focus--joshinetsu .dwsa-region-map {
    aspect-ratio: 1 / 1;
  }

  .dwsa-region-focus--joshinetsu .dwsa-detail-point__label {
    font-size: .72px;
  }

  .dwsa-region-focus--joshinetsu .dwsa-joshinetsu-pref-labels text {
    font-size: .36px;
  }
}


/* =========================================================
   R1.3.16 / JOSHINETSU DETAILED ADMIN MAP
   北海道モーダルと同じ「詳細行政界＋光点」へ統一。
   ========================================================= */
.dwsa-region-focus--joshinetsu .dwsa-region-focus__viewport {
  border: 1px solid rgba(241,238,230,.08);
  background:
    radial-gradient(circle at 62% 28%, rgba(44,78,115,.12), transparent 40%),
    #07111d;
}

.dwsa-region-focus--joshinetsu .dwsa-region-map {
  aspect-ratio: 90 / 105;
  background: #07111d;
}

.dwsa-region-focus--joshinetsu .dwsa-region-map__japan-base--detail {
  opacity: .30;
  filter: grayscale(1) brightness(.62) contrast(1.05);
}

.dwsa-region-focus--joshinetsu .dwsa-region-map__caption text {
  fill: rgba(217,111,61,.74);
  font: 600 1.7px Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
}

.dwsa-region-focus--joshinetsu .dwsa-joshinetsu-pref-labels text {
  fill: rgba(241,238,230,.18);
  font: 600 1.6px Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
  paint-order: stroke;
  stroke: rgba(5,14,25,.70);
  stroke-width: .30px;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__halo {
  fill: rgba(217,111,61,.025);
  stroke: rgba(217,111,61,.46);
  stroke-width: .28;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__ring {
  fill: rgba(7,17,29,.97);
  stroke: var(--dwsa-safety);
  stroke-width: .38;
  vector-effect: non-scaling-stroke;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__core {
  fill: var(--dwsa-ivory);
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__label {
  fill: rgba(241,238,230,.98);
  font: 600 3.25px Arial, Helvetica, sans-serif;
  letter-spacing: .01em;
  paint-order: stroke;
  stroke: rgba(5,14,25,.98);
  stroke-width: .90px;
  stroke-linejoin: round;
}

.dwsa-region-focus--joshinetsu .dwsa-detail-point__leader {
  stroke: rgba(217,111,61,.72);
  stroke-width: .22;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 640px) {
  .dwsa-region-focus--joshinetsu .dwsa-region-map {
    aspect-ratio: 1 / 1;
  }

  .dwsa-region-focus--joshinetsu .dwsa-detail-point__label {
    font-size: 3.55px;
  }
}


/* =========================================================
   R1.3.17 / TRUE VECTOR BACKGROUND
   軽井沢・草津の背景をPNGプレビューから元SVGへ切替。
   座標・ラベル・地域UIはR1.3.16を維持する。
   ========================================================= */
.dwsa-region-focus--joshinetsu .dwsa-region-map__japan-base--detail {
  opacity: .30;
  filter: grayscale(1) brightness(.62) contrast(1.05);
}


/* =========================================================
   R1.3.18 / FINAL JOSHINETSU POLISH
   地点・ラベル・連動UIはR1.3.17を維持し、背景の太い境界線だけを静かにする。
   北海道フォーカスと同じく「地図は背景、光点が主役」のバランスへ。
   ========================================================= */
.dwsa-region-focus--joshinetsu .dwsa-region-map__japan-base--detail {
  opacity: .24;
  filter: grayscale(1) brightness(.66) contrast(.88);
}

.dwsa-region-focus--joshinetsu .dwsa-region-focus__viewport {
  background:
    radial-gradient(circle at 62% 28%, rgba(44,78,115,.10), transparent 40%),
    #07111d;
}

.dwsa-region-focus--joshinetsu .dwsa-joshinetsu-pref-labels text {
  fill: rgba(241,238,230,.18);
}


/* =========================================================
   R1.3.19 / JOSHINETSU HORIZONTAL CROP
   北海道フォーカスに近い横長の見え方へ。地点座標・選択連動は維持。
   ========================================================= */
.dwsa-region-focus--joshinetsu .dwsa-region-map {
  aspect-ratio: 110 / 90;
}

@media (max-width: 640px) {
  .dwsa-region-focus--joshinetsu .dwsa-region-map {
    aspect-ratio: 110 / 96;
  }
}


/* =========================================================
   R1.3.20 / TIMELINE NARRATIVE POLISH
   年表に「記憶から、記録へ」の切り替わりを可視化。
   ========================================================= */
.dwsa-timeline-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(195,207,221,.10);
}

.dwsa-timeline-head__eyebrow {
  margin: 0 0 8px;
  color: var(--dwsa-safety);
  font: 500 8px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .20em;
}

.dwsa-timeline-head__title {
  margin: 0;
  color: rgba(241,238,230,.88);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.5;
}

.dwsa-timeline-head__years {
  margin: 0 0 4px;
  white-space: nowrap;
  color: rgba(241,238,230,.30);
  font: 500 8px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .16em;
}

.dwsa-timeline-head__years span {
  margin: 0 7px;
  color: var(--dwsa-safety);
}

.dwsa__timeline-column .dwsa-legend {
  margin-bottom: 14px;
}

.dwsa-era-divider {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  margin: 12px 0 16px !important;
  padding: 0 !important;
  list-style: none !important;
}

.dwsa-era-divider__line {
  position: relative;
}

.dwsa-era-divider__line::before {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -16px;
  left: 10px;
  width: 1px;
  background: var(--dwsa-line);
}

.dwsa-era-divider__line span {
  position: absolute;
  z-index: 2;
  top: 25px;
  left: 4px;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(217,111,61,.68);
  border-radius: 50%;
  background: rgba(217,111,61,.08);
  box-shadow: 0 0 0 5px rgba(217,111,61,.035);
}

.dwsa-era-divider__body {
  margin-left: 18px;
  padding: 19px 18px 18px;
  border-top: 1px solid rgba(217,111,61,.42);
  border-bottom: 1px solid rgba(195,207,221,.08);
  background: linear-gradient(90deg, rgba(217,111,61,.055), transparent 72%);
}

.dwsa-era-divider__body p,
.dwsa-era-divider__body strong,
.dwsa-era-divider__body small {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
}

.dwsa-era-divider__body p {
  margin: 0 0 8px;
  color: var(--dwsa-safety);
  font-size: 8px;
  letter-spacing: .20em;
}

.dwsa-era-divider__body strong {
  color: rgba(241,238,230,.88);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .11em;
}

.dwsa-era-divider__body small {
  margin-top: 8px;
  color: rgba(241,238,230,.38);
  font-size: 9px;
  line-height: 1.7;
  letter-spacing: .04em;
}

@media (max-width: 640px) {
  .dwsa-timeline-head {
    align-items: flex-start;
    margin-top: 6px;
  }

  .dwsa-timeline-head__years {
    padding-top: 5px;
    font-size: 7px;
  }

  .dwsa-era-divider {
    grid-template-columns: 27px minmax(0, 1fr);
  }

  .dwsa-era-divider__line::before {
    left: 8px;
  }

  .dwsa-era-divider__line span {
    left: 2px;
  }

  .dwsa-era-divider__body {
    margin-left: 10px;
    padding-left: 14px;
  }
}


/* =========================================================
   R1.3.24 / STICKY MAP NAVIGATION
   PCでは左の地図を追従させ、右の年表だけを流す。
   ========================================================= */

/*
 * overflow:hidden は position:sticky の基準を壊すブラウザがあるため、
 * 横方向のはみ出しだけを clip し、sticky が viewport を基準に動けるようにする。
 */
.dwsa {
  overflow: clip;
}

.dwsa__map-column {
  position: sticky;
  top: 64px;
  align-self: start;
  z-index: 4;
  max-height: calc(100vh - 84px);
}

/*
 * 地図本体が小さめの画面でも viewport に収まりやすいよう、
 * map column 内の余白を含めて安全側にする。
 */
.dwsa__map-column > * {
  max-width: 100%;
}

/* WordPress 管理バー表示時 */
body.admin-bar .dwsa__map-column {
  top: 86px;
  max-height: calc(100vh - 106px);
}

/*
 * 縦が低いノートPCでは少し上寄せ。
 * sticky 自体は維持する。
 */
@media (min-width: 981px) and (max-height: 760px) {
  .dwsa__map-column {
    top: 24px;
    max-height: calc(100vh - 40px);
  }

  body.admin-bar .dwsa__map-column {
    top: 56px;
    max-height: calc(100vh - 72px);
  }

  .dwsa-map-wrap {
    max-width: 430px;
  }

  .dwsa-map-detail {
    margin-top: 24px;
    min-height: 96px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

/* Tablet / mobile は1カラムなので追従させない */
@media (max-width: 980px) {
  .dwsa {
    overflow: hidden;
  }

  .dwsa__map-column,
  body.admin-bar .dwsa__map-column {
    position: static;
    top: auto;
    max-height: none;
  }
}


/* =========================================================
   R1.3.26 / MAP FIT + COMPACT GUIDE
   sticky中でも全国図と案内を1画面に収めやすくする。
   ========================================================= */

@media (min-width: 981px) {
  .dwsa-map-wrap {
    max-width: 520px;
    padding: 2px 10px 0;
  }

  /*
   * 日本列島の南西→北東方向を少し寝かせることで、
   * sticky表示時の縦方向占有を抑える。
   * SVG全体を回すため、光点・hotspotとの位置関係は崩れない。
   */
  .dwsa-map {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    transform: rotate(3.2deg);
    transform-origin: 50% 50%;
    overflow: visible;
  }

  .dwsa-map-caption {
    margin-top: -28px;
  }

  .dwsa-map-detail {
    max-width: 440px;
    min-height: 82px;
    margin-top: 22px;
    padding: 13px 18px 14px;
  }

  .dwsa-map-detail__label {
    margin-bottom: 7px;
    font-size: 7px;
  }

  .dwsa-map-detail__name {
    font-size: 17px;
    line-height: 1.45;
  }

  .dwsa-map-detail__meta {
    margin-top: 6px;
    font-size: 7px;
    letter-spacing: .14em;
  }
}

/* 高さが低い画面ではもう一段だけ収まりを優先 */
@media (min-width: 981px) and (max-height: 760px) {
  .dwsa-map-wrap {
    max-width: 450px;
  }

  .dwsa-map {
    width: 90%;
    transform: rotate(3.2deg);
  }

  .dwsa-map-caption {
    margin-top: -34px;
  }

  .dwsa-map-detail {
    min-height: 72px;
    margin-top: 16px;
    padding-top: 10px;
    padding-bottom: 11px;
  }

  .dwsa-map-detail__name {
    font-size: 16px;
  }
}

/* モバイルは角度を付けず、従来どおり素直に表示 */
@media (max-width: 980px) {
  .dwsa-map {
    width: 100%;
    transform: none;
  }
}


/* =========================================================
   R1.3.27 / FINAL STICKY HEIGHT FIT
   角度・地点位置は固定。高さだけもう一段締める。
   ========================================================= */

@media (min-width: 981px) {
  .dwsa-map-wrap {
    max-width: 500px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .dwsa-map {
    width: 87%;
    transform: rotate(3.2deg);
  }

  .dwsa-map-caption {
    margin-top: -40px;
  }

  .dwsa-map-detail {
    max-width: 420px;
    min-height: 68px;
    margin-top: 12px;
    padding: 9px 16px 10px;
  }

  .dwsa-map-detail__label {
    margin-bottom: 5px;
    font-size: 6.5px;
  }

  .dwsa-map-detail__name {
    font-size: 15px;
    line-height: 1.38;
  }

  .dwsa-map-detail__meta {
    margin-top: 4px;
    font-size: 6.5px;
    letter-spacing: .13em;
  }
}

@media (min-width: 981px) and (max-height: 760px) {
  .dwsa-map-wrap {
    max-width: 425px;
  }

  .dwsa-map {
    width: 85%;
    transform: rotate(3.2deg);
  }

  .dwsa-map-caption {
    margin-top: -44px;
  }

  .dwsa-map-detail {
    min-height: 62px;
    margin-top: 8px;
    padding: 8px 14px 9px;
  }

  .dwsa-map-detail__name {
    font-size: 14px;
  }
}


/* =========================================================
   R1.3.28 / MAP ↔ TIMELINE LINK
   地図と年表を静かに双方向連動。
   ========================================================= */

.dwsa-stay__card {
  position: relative;
  transition:
    transform .22s ease,
    opacity .22s ease,
    background-color .22s ease,
    box-shadow .22s ease;
}

.dwsa-stay.is-active .dwsa-stay__card {
  background:
    linear-gradient(
      90deg,
      rgba(217,111,61,.075) 0%,
      rgba(217,111,61,.022) 38%,
      rgba(217,111,61,0) 76%
    );
  box-shadow: inset 2px 0 0 rgba(217,111,61,.62);
}

.dwsa-stay.is-active .dwsa-stay__number {
  color: rgba(217,111,61,.48);
}

.dwsa-stay.is-active .dwsa-stay__place {
  text-shadow: 0 0 18px rgba(241,238,230,.07);
}

.dwsa-stay.is-dimmed .dwsa-stay__card {
  opacity: .44;
}

/* hoverだけでも他項目を消し過ぎない。選択対象が静かに前へ出る。 */
.dwsa[data-dwsa-active-place] .dwsa-stay.is-active .dwsa-stay__line span {
  box-shadow: 0 0 0 5px rgba(217,111,61,.07);
}

@media (prefers-reduced-motion: reduce) {
  .dwsa-stay__card {
    scroll-behavior: auto;
  }
}


/* =========================================================
   R1.3.30 / PLACE → STAY PICKER
   複数勤務の地点は、地域拡大図の中で滞在期間を選んでから年表へ。
   ========================================================= */

.dwsa-region-focus {
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(217,111,61,.30) rgba(7,17,29,.2);
}

.dwsa-region-focus__stay-pickers {
  margin-top: 10px;
}

.dwsa-stay-picker[hidden] {
  display: none !important;
}

.dwsa-stay-picker {
  border-top: 1px solid rgba(217,111,61,.44);
  border-bottom: 1px solid rgba(241,238,230,.08);
  background: rgba(5,14,25,.56);
}

.dwsa-stay-picker__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 11px 8px;
}

.dwsa-stay-picker__head span {
  color: var(--dwsa-safety);
  font: 600 7px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .16em;
}

.dwsa-stay-picker__head strong {
  color: rgba(241,238,230,.52);
  font: 500 8px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .06em;
}

.dwsa-stay-picker__choices {
  display: grid;
  gap: 1px;
  background: rgba(241,238,230,.06);
}

.dwsa-stay-picker__choices button {
  appearance: none;
  display: grid;
  grid-template-columns: 126px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 0;
  background: rgba(7,17,29,.94);
  color: rgba(241,238,230,.72);
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.dwsa-stay-picker__choices button span {
  color: rgba(195,207,221,.58);
  font: 500 8px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .06em;
}

.dwsa-stay-picker__choices button strong {
  overflow: hidden;
  color: inherit;
  font: 500 11px/1.45 Arial, Helvetica, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dwsa-stay-picker__choices button:hover,
.dwsa-stay-picker__choices button:focus,
.dwsa-stay-picker__choices button.is-active {
  background: rgba(217,111,61,.13);
  color: var(--dwsa-ivory);
}

.dwsa-stay-picker__choices button.is-active span {
  color: var(--dwsa-safety);
}

/* 場所選択は同じ場所の履歴を静かに示す。年表全体は暗くしない。 */
.dwsa-stay.is-dimmed .dwsa-stay__card {
  opacity: 1 !important;
}

.dwsa-stay.is-record-selected .dwsa-stay__card {
  background:
    linear-gradient(
      90deg,
      rgba(217,111,61,.13) 0%,
      rgba(217,111,61,.035) 44%,
      rgba(217,111,61,0) 82%
    );
  box-shadow: inset 3px 0 0 rgba(217,111,61,.82);
}

.dwsa-stay.is-record-selected .dwsa-stay__number {
  color: rgba(217,111,61,.72);
}

@media (max-width: 640px) {
  .dwsa-region-focus {
    max-height: calc(100vh - 34px);
  }

  .dwsa-stay-picker__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .dwsa-stay-picker__choices button {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .dwsa-stay-picker__choices button strong {
    white-space: normal;
  }
}


/* =========================================================
   R1.3.31 / TIMELINE ENDING POLISH
   最後の勤務歴からフッターまでの「着地」を整える。
   ========================================================= */

/* 最新勤務は少しだけ余韻を残す。 */
.dwsa-stay.is-latest-stay .dwsa-stay__card {
  padding-bottom: 34px;
  background:
    linear-gradient(
      90deg,
      rgba(217,111,61,.032) 0%,
      rgba(217,111,61,.010) 38%,
      rgba(217,111,61,0) 74%
    );
}

/* LATESTを日付に貼り付いたラベルではなく、小さな終端タグとして見せる。 */
.dwsa-stay.is-latest-stay .dwsa-stay__date::after {
  content: "LATEST";
  margin-left: 10px;
  padding: 3px 6px 2px;
  border-color: rgba(217,111,61,.42);
  background: rgba(217,111,61,.025);
  color: rgba(217,111,61,.88);
  font-size: 6.5px;
  letter-spacing: .15em;
}

/* 最後の光点を年表の終点として少し明確に。 */
.dwsa-stay.is-latest-stay .dwsa-stay__line span {
  background: rgba(217,111,61,.92);
  border-color: var(--dwsa-ivory);
  box-shadow:
    0 0 0 5px rgba(217,111,61,.055),
    0 0 18px rgba(217,111,61,.10);
}

/* Timeline endpoint */
.dwsa-timeline-tail {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  margin: 0 !important;
  padding: 0 !important;
}

.dwsa-timeline-tail__line {
  position: relative;
  min-height: 64px;
}

.dwsa-timeline-tail__line::before {
  content: "";
  position: absolute;
  top: -34px;
  left: 10px;
  width: 1px;
  height: 48px;
  background: linear-gradient(
    180deg,
    var(--dwsa-line),
    rgba(217,111,61,.52)
  );
}

.dwsa-timeline-tail__line span {
  position: absolute;
  top: 13px;
  left: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(217,111,61,.72);
  background: var(--dwsa-night);
  box-shadow: 0 0 0 5px rgba(217,111,61,.035);
}

.dwsa-timeline-tail__body {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-left: 18px;
  padding: 9px 0 25px;
  border-bottom: 1px solid rgba(195,207,221,.07);
}

.dwsa-timeline-tail__body p,
.dwsa-timeline-tail__body strong {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
}

.dwsa-timeline-tail__body p {
  color: var(--dwsa-safety);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .18em;
}

.dwsa-timeline-tail__body strong {
  color: rgba(241,238,230,.40);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .12em;
}

/* 左右カラムが終わるところに少しだけ共通の呼吸を置く。 */
.dwsa__body {
  padding-bottom: 22px;
}

.dwsa__footer {
  margin-top: 42px;
  padding-top: 22px;
}

.dwsa__footer small {
  max-width: 520px;
  color: rgba(241,238,230,.26);
}

/* 画面が低い場合は余白をさらに小さく。 */
@media (min-width: 981px) and (max-height: 760px) {
  .dwsa-stay.is-latest-stay .dwsa-stay__card {
    padding-bottom: 28px;
  }

  .dwsa-timeline-tail__line {
    min-height: 52px;
  }

  .dwsa-timeline-tail__body {
    padding-bottom: 18px;
  }

  .dwsa__body {
    padding-bottom: 14px;
  }

  .dwsa__footer {
    margin-top: 32px;
  }
}

@media (max-width: 640px) {
  .dwsa-timeline-tail {
    grid-template-columns: 27px minmax(0, 1fr);
  }

  .dwsa-timeline-tail__line::before {
    left: 8px;
  }

  .dwsa-timeline-tail__line span {
    left: 4px;
  }

  .dwsa-timeline-tail__body {
    margin-left: 10px;
  }

  .dwsa__body {
    padding-bottom: 8px;
  }

  .dwsa__footer {
    margin-top: 38px;
  }
}


/* =========================================================
   R1.3.32 / FOOTER HANDOFF
   WORK / STAY ARCHIVE の終端を詰め、新HOMEフッターへ
   途切れず着地させる。
   ========================================================= */

/* HOMEでは下側に巨大な外余白を作らない。 */
.dwsa {
  margin-bottom: 0;
}

/* 終端の内側余白も、余韻だけ残す程度に。 */
.dwsa__inner {
  padding-bottom: 34px;
}

.dwsa__body {
  padding-bottom: 8px;
}

/* MEMORY / RECORD は残すが、独立した大セクションにはしない。 */
.dwsa__footer {
  margin-top: 24px;
  padding-top: 18px;
  padding-bottom: 2px;
}

.dwsa__footer small {
  line-height: 1.55;
}

/* 低いPC画面 */
@media (min-width: 981px) and (max-height: 760px) {
  .dwsa__inner {
    padding-bottom: 26px;
  }

  .dwsa__footer {
    margin-top: 18px;
    padding-top: 15px;
  }
}

/* スマホもフッター直前を必要以上に空けない */
@media (max-width: 640px) {
  .dwsa {
    margin-bottom: 0;
  }

  .dwsa__inner {
    padding-bottom: 26px;
  }

  .dwsa__footer {
    margin-top: 22px;
    padding-top: 16px;
  }
}


/* R1.3.33 / DIRECT NAVIGATION TARGET */
#work-stay-archive {
  scroll-margin-top: 26px;
}

body.admin-bar #work-stay-archive {
  scroll-margin-top: 58px;
}

@media (max-width: 782px) {
  body.admin-bar #work-stay-archive {
    scroll-margin-top: 72px;
  }
}


/* =========================================================
   R1.3.34 / HOME WIDTH SAFETY
   HOME埋め込み時の100vw由来横スクロールを解消。
   ========================================================= */

/*
 * HOME側がすでに100%幅コンテナになっているため、
 * archive自身のfull-bleed hackは不要。
 */
body.dhi-r12-active .dwsa {
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: clip !important;
}

/* 内部の2カラム・地図・年表が親幅を押し広げない */
body.dhi-r12-active .dwsa *,
body.dhi-r12-active .dwsa__inner,
body.dhi-r12-active .dwsa__body,
body.dhi-r12-active .dwsa__map-column,
body.dhi-r12-active .dwsa__timeline,
body.dhi-r12-active .dwsa__map-stage,
body.dhi-r12-active .dwsa-region-focus {
  min-width: 0;
}

/* 文字列も横方向の原因にしない */
body.dhi-r12-active .dwsa p,
body.dhi-r12-active .dwsa h2,
body.dhi-r12-active .dwsa h3,
body.dhi-r12-active .dwsa a,
body.dhi-r12-active .dwsa strong,
body.dhi-r12-active .dwsa span {
  overflow-wrap: anywhere;
}

/* 全国図のstickyや地域モーダルは従来の位置を維持 */
body.dhi-r12-active .dwsa__map-stage {
  max-width: 100%;
}