/*
 * Japan map style
 */

.p-jmap-wrapper {
  --tcd-jmap-color: #000000;
  --tcd-jmap-bg-color: #f1f1f1;
  --tcd-jmap-border-color: #000000;
  --tcd-jmap-shadow-color: #cfcfcf;
  --tcd-jmap-color--hokkaido: #61a5c6;
  --tcd-jmap-color--tohoku: #5eb193;
  --tcd-jmap-color--kanto: #60a646;
  --tcd-jmap-color--chubu: #83b14b;
  --tcd-jmap-color--kinki: #9caa4f;
  --tcd-jmap-color--chugoku: #c2ad4a;
  --tcd-jmap-color--shikoku: #d69a25;
  --tcd-jmap-color--kyushu: #d35d0a;
  --tcd-jmap-font-color--hokkaido: #61a5c6;
  --tcd-jmap-font-color--tohoku: #5eb193;
  --tcd-jmap-font-color--kanto: #60a646;
  --tcd-jmap-font-color--chubu: #83b14b;
  --tcd-jmap-font-color--kinki: #9caa4f;
  --tcd-jmap-font-color--chugoku: #c2ad4a;
  --tcd-jmap-font-color--shikoku: #d69a25;
  --tcd-jmap-font-color--kyushu: #d35d0a;
}

/* map region color */
.p-jmap--hokkaido {
  --tcd-jmap-color: var(--tcd-jmap-color--hokkaido);
  --tcd-jmap-font-color: var(--tcd-jmap-font-color--hokkaido);
}
.p-jmap--tohoku {
  --tcd-jmap-color: var(--tcd-jmap-color--tohoku);
  --tcd-jmap-font-color: var(--tcd-jmap-font-color--tohoku);
}
.p-jmap--kanto {
  --tcd-jmap-color: var(--tcd-jmap-color--kanto);
  --tcd-jmap-font-color: var(--tcd-jmap-font-color--kanto);
}
.p-jmap--chubu {
  --tcd-jmap-color: var(--tcd-jmap-color--chubu);
  --tcd-jmap-font-color: var(--tcd-jmap-font-color--chubu);
}
.p-jmap--kinki {
  --tcd-jmap-color: var(--tcd-jmap-color--kinki);
  --tcd-jmap-font-color: var(--tcd-jmap-font-color--kinki);
}
.p-jmap--chugoku {
  --tcd-jmap-color: var(--tcd-jmap-color--chugoku);
  --tcd-jmap-font-color: var(--tcd-jmap-font-color--chugoku);
}
.p-jmap--shikoku {
  --tcd-jmap-color: var(--tcd-jmap-color--shikoku);
  --tcd-jmap-font-color: var(--tcd-jmap-font-color--shikoku);
}
.p-jmap--kyushu {
  --tcd-jmap-color: var(--tcd-jmap-color--kyushu);
  --tcd-jmap-font-color: var(--tcd-jmap-font-color--kyushu);
}

/* map */
.p-jmap {
  position: relative;
  width: 100%;
  padding: 60px;
  border: 2px solid var(--tcd-jmap-border-color);
  background: var(--tcd-jmap-bg-color);
  border-radius: 10px;
}
@media (max-width: 900px) {
  .p-jmap {
    display: none;
  }
}

/* map a */
.p-jmap-a {
  height: 650px;
}
.p-jmap-a-svg {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  margin: auto;
  width: 480px;
}
.p-jmap-a-list__region {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  color: var(--tcd-jmap-font-color)!important;
  margin-bottom: 20px;
  transition: opacity 0.3s ease;
}
.p-jmap-a-list__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.p-jmap-a-list__terms-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 40px;
  font-size: 14px;
  color: #000!important;
  background: #fff;
  padding: 0 5px;
}
.p-jmap-a-list__item {
  position: absolute;
  z-index: 1;
}

/* map position */
.p-jmap-a-list__item.p-jmap--hokkaido {
  width: 246px;
  top: 50px;
  right: 50px;
}
.p-jmap-a-list__item.p-jmap--tohoku {
  width: 246px;
  top: 165px;
  right: 50px;
}
.p-jmap-a-list__item.p-jmap--kanto {
  width: 330px;
  top: 320px;
  right: 50px;
}
.p-jmap-a-list__item.p-jmap--chubu {
  width: 414px;
  top: 50px;
  left: 17.5%;
}
.p-jmap-a-list__item.p-jmap--kinki {
  width: 330px;
  top: 475px;
  /* bottom: 50px; */
  right: 17%;
}
.p-jmap-a-list__item.p-jmap--chugoku {
  width: 246px;
  top: 230px;
  left: 11%;
}
.p-jmap-a-list__item.p-jmap--shikoku {
  width: 164px;
  top: 475px;
  /* bottom: 50px; */
  left: 33%;
}
.p-jmap-a-list__item.p-jmap--kyushu {
  width: 246px;
  top: 400px;
  /* bottom: 80px; */
  left: 50px;
}
@media (max-width: 1024px) {
  .p-jmap-a-list__item.p-jmap--hokkaido {
    width: 164px;
    right: 20px;
  }
  .p-jmap-a-list__item.p-jmap--tohoku {
    right: 20px;
  }
  .p-jmap-a-list__item.p-jmap--kanto {
    width: 246px;
    right: 20px;
  }
  .p-jmap-a-list__item.p-jmap--chubu {
    left: 20px;
  }
  .p-jmap-a-list__item.p-jmap--kinki {
    right: 20px;
  }
  .p-jmap-a-list__item.p-jmap--chugoku {
    left: 20px;
  }
  .p-jmap-a-list__item.p-jmap--shikoku {
    left: 300px;
  }
  .p-jmap-a-list__item.p-jmap--kyushu {
    bottom: 80px;
    left: 20px;
  }
}

/* map a svg style */
.p-jmap-a-svg-path {
  fill: var(--tcd-jmap-color);
}
.p-jmap-a-svg-stroke {
  fill:#fff;
}
.p-jmap-a-svg-path.p-jmap--hokkaido {
  filter: drop-shadow(2px 8px 0px var(--tcd-jmap-shadow-color));
}
.p-jmap-a-svg-path.p-jmap--tohoku {
  filter: drop-shadow(6px 5px 0px var(--tcd-jmap-shadow-color));
}
.p-jmap-a-svg-path.p-jmap--kanto {
  filter: drop-shadow(5px 5px 0px var(--tcd-jmap-shadow-color));
}
.p-jmap-a-svg-path.p-jmap--chubu {
  filter: drop-shadow(2px 6px 0px var(--tcd-jmap-shadow-color));
}
.p-jmap-a-svg-path.p-jmap--kinki {
  filter: drop-shadow(3px 6px 0px var(--tcd-jmap-shadow-color));
}
.p-jmap-a-svg-path.p-jmap--chugoku {
  filter: drop-shadow(2px 7px 0px var(--tcd-jmap-shadow-color));
}
.p-jmap-a-svg-path.p-jmap--shikoku {
  filter: drop-shadow(1px 7px 0px var(--tcd-jmap-shadow-color));
}
.p-jmap-a-svg-path.p-jmap--kyushu {
  filter: drop-shadow(3px 7px 0px var(--tcd-jmap-shadow-color));
}
@media (hover: hover) and (pointer: fine) {
  .p-jmap-a-list__region:hover {
    opacity: 0.5;
    text-decoration: none!important;
  }
  .p-jmap-a-list__terms-link:hover {
    color: #fff!important;
    background: var(--tcd-jmap-font-color);
    text-decoration: none!important;
  }
}

/* map b */
.p-jmap-b {
  height: 570px;
}
.p-jmap-b-svg {
  position: absolute;
  width: 350px;
  top: 0;
  bottom: 0;
  right: 60px;
  margin: auto;
}
.p-jmap-b-svg-rect {
  fill: var(--tcd-jmap-color);
  stroke-width:0px;
}
.p-jmap-b-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 25px;
  height: 100%;
  position: relative;
  z-index: 1;
}
.p-jmap-b-list__item {
  display: flex;
  align-items: center;
  gap: 20px;
}
.p-jmap-b-list__region {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 75px;
  height: 35px;
  padding: 0 1em;
  border-radius: 35px;
  font-size: 14px;
  color: #fff!important;
  background: var(--tcd-jmap-font-color);
  transition: opacity 0.3s ease;
}
.p-jmap-b-list__terms {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.p-jmap-b-list__terms-sep {
  display: block;
  width: 1px;
  height: 1em;
  background: #000;
}
.p-jmap-b-list__terms-link {
  color: #000!important;
  transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .p-jmap-b-list__region:hover {
    opacity: 0.7;
    text-decoration: none!important;
  }
  .p-jmap-b-list__terms-link:hover {
    color: var(--tcd-jmap-font-color)!important;
    text-decoration: underline;
  }
}

/* map sp */
@media not all and (max-width: 900px) {
  .p-jmap-sp {
    display: none;
  }
}
.p-jmap-sp {
  background: #fff;
  border: 2px solid var(--tcd-jmap-border-color);
  border-radius: 5px;
  overflow: hidden;
}
.p-jmap-sp__item:not(:first-of-type) {
  border-top: 1px solid #ddd;
}
.p-jmap-sp__region {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 16px;
  height: 50px;
  padding: 0 20px;
}
.p-jmap-sp__region-label {
  flex: 1;
  font-size: 16px;
  color: var(--tcd-jmap-font-color);
  font-weight: 600;
}
.p-jmap-sp__region-toggle {
  position: relative;
  display: none;
  font-size: 12px;
  width: 1em;
  height: 1em;
}
.js-jmap-dropdown .p-jmap-sp__region-toggle {
  display: block;
}
.p-jmap-sp__region-toggle:before,
.p-jmap-sp__region-toggle:after {
  content: '';
  display: block;
  background: #000;
  position: absolute;
  inset: 0;
  margin: auto;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
}
.p-jmap-sp__region-toggle:before {
  width: 1em;
  height: 1px;
  opacity: 1;
}
.p-jmap-sp__region-toggle:after {
  width: 1px;
  height: 1em;
}
.is-active > .p-jmap-sp__region-toggle:before {
  opacity: 0;
}
.is-active > .p-jmap-sp__region-toggle:before,
.is-active > .p-jmap-sp__region-toggle:after {
  transform: rotate(90deg);
}
.p-jmap-sp__terms {
  width: calc(100% + 1px);
  background: #fafafa;
  overflow: hidden;
  margin-bottom: -1px;
  height: 0;
  transition: height 0.4s ease;
}
.p-jmap-sp__terms-inner {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #ddd;
}
.p-jmap-sp__terms-item {
  width: calc(100% / 3 + 1px);
  height: 45px;
  border: 1px solid #ddd;
  margin: -1px 0 0 -1px;
}
.p-jmap-sp__terms-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #000!important;
}
.p-jmap-sp__region:hover, .p-jmap-sp__terms-link:hover {
  text-decoration: none!important;
}

/* review archive */
.p-review-archive-jmap {
  padding-top: 80px;
}
@media (max-width: 767px) {
  .p-review-archive-jmap {
    padding-top: 40px;
  }
}