@charset "UTF-8";
/* CSS Document */

/* section
-----------------------------------------------*/
section::before {
  display: none;
}
.tokyo .ttl h2,
.fukuoka .ttl h2 {
  color: #ffffff30;
}
/* main
-----------------------------------------------*/
#main {
  background: url("../img/area/bgi-main.jpg?26060801")no-repeat;
}
/* map
-----------------------------------------------*/
.anchor-pin {
  display: block;
  position: relative;
  top: -136px;
  visibility: hidden;
  height: 0;
}
.area-map {
  width: 100%;
}
.map-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.map-node {
  position: absolute;

  transform: translate(-10px, -100%);
  display: flex;
}
.map-pin {
  width: 20px;
  height: 26px;
  flex-shrink: 0;
  z-index: 3;
  background: url("../img/area/pin.svg")no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: -10px;
}
.leader-line-svg {
  overflow: visible;
  z-index: 1;
}
.is-tbline {
  display: none;
}
.is-spline {
  display: none;
}
.label-text {
  position: absolute;
  right: 0;
  color: #ffffff;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  text-align: right;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.label-jp {
  position: absolute;
  bottom: 4px;
  right: 10px;
  font-size: 24px;
}
.label-en {
  position: absolute;
  top: 0px;
  right: 10px;

  font-size:14px;
  letter-spacing: 0.1em;
}
.tb-only {
  display: none;
}
.map-node.is-left {
  flex-direction: row-reverse;
  transform: translate(10px, -100%);
}
.is-left .map-pin {
  margin-right: 0;
  margin-left: -10px;
}
.is-left .label-text {
  right: auto;
  left: 0;
  text-align: left;
}
.is-left .label-jp,
.is-left .label-en {
  right: auto;
  left: 10px;
}
.map-node.is-bottom {
  transform: translate(-10px, -13px);
}
.is-bottom .map-pin{
  margin-top: -13px;
}
.is-bottom  .label-text {
  bottom: 0;
  transform: translateY(50%);
}
.map-node.is-left.is-bottom {
  transform: translate(10px, -13px);
}
@media (max-width: 1024px) {
  .label-jp  {
    font-size: 20px;
  }
  .label-en {
    font-size: 12px;
  }
  .is-pcline {
    display: none;
  }
  .is-tbline {
    display: block;
  }
  .is-spline {
    display: none;
  }
  .tb-only {
    display: inline;
  }
}
@media (max-width: 600px) {
  .anchor-pin {
    top: -60px;
  }
  .map-node {
    transform: translate(-5px, -100%);
  }
  .map-pin {
    width: 10px;
    height: 13px;
    margin-right: -5px;
  }
  .is-pcline {
    display: none;
  }
  .is-tbline {
    display: none;
  }
  .is-spline {
    display: block;
  }
  .label-jp  {
    right: 5px;
    bottom: 3px;
    font-size: 12px;
  }
  .label-en {
    right: 5px;
    font-size: 8px;
  }
  .map-node.is-left {
    transform: translate(5px, -100%);
  }
  .is-left .map-pin {
    margin-right: 0;
    margin-left: -5px;
  }
  .is-left .label-jp,
  .is-left .label-en {
    right: auto;
    left: 5px;
  }
  .is-bottom .map-pin{
    margin-top: -6.5px;
  }
}
/* tokyo
-----------------------------------------------*/
.tokyo {
  background: url("../img/area/bgi-tokyo.jpg?260619")no-repeat;
  background-size: cover;
  background-position: center;
}
.tokyo .inner {
  padding: 15px 40px 100px;
}
.tokyo h2 {
  margin: 0 0 20px 0;
}
.tokyo .map-container {
  background-image: url("../img/area/map-tokyo.svg");
  aspect-ratio: 655/670;
  max-width: 660px;
}
/*台東区柳橋*/
.yanagibashi {
  top: calc((262 / 670) * 100%);
  left: calc((415 / 655) * 100%);
}
.yanagibashi .map-pin {
  margin-top: calc(89px - 13px);
}
.yanagibashi .leader-line-svg {
  width: 373px; 
  height: 89px;
}
/*台東区台東*/
.taito {
  top: calc((247 / 670) * 100%);
  right: calc(((655 - 391) / 655) * 100%);
}
.taito .map-pin {
  margin-top: calc(41px - 13px);
}
.taito .leader-line-svg {
  width: 394px; 
  height: 41px;
}
/*中央区京橋*/
.kyobashi {
  top: calc((325 / 670) * 100%);
  right: calc(((655 - 388) / 655) * 100%);
}
.kyobashi .map-pin {
  margin-top: calc(29px - 13px);
}
.kyobashi .leader-line-svg {
  width: 470px; 
  height: 29px;
}
/*中央区八丁堀*/
.hattyobori {
  top: calc((336 / 670) * 100%);
  left: calc((400 / 655) * 100%);
}
.hattyobori .map-pin {
  margin-top: calc(63px - 13px);
}
.hattyobori .leader-line-svg {
  width: 351px; 
  height: 63px;
}
/*中央区築地*/
.tsukiji {
  top: calc((377 / 670) * 100%);
  right: calc(((655 - 391) / 655) * 100%);
}
.tsukiji .leader-line-svg {
  width: 397px; 
  height: 36px;
}
/*江東区深川*/
.fukagawa {
  top: calc((368 / 670) * 100%);
  left: calc((431 / 655) * 100%);
}
.fukagawa .leader-line-svg {
  width: 386px; 
  height: 80px;
}
/*品川区東大井*/
.higashioi {
  top: calc((480 / 670) * 100%);
  left: calc((332 / 655) * 100%);
}
.higashioi .leader-line-svg {
  width: 277px; 
  height: 140px;
}
@media (max-width: 1024px) {
.tokyo .inner {
  padding: 10px 20px 50px;
}
  /*台東区柳橋*/
  .yanagibashi .map-pin {
    margin-top: calc((89px * 0.50) - 13px);
  }
  .yanagibashi .leader-line-svg {
    width: calc(373px * 0.50); 
    height: calc(89px * 0.50);
  }
  /*台東区台東*/
  .taito .map-pin {
    margin-top: calc((41px * 0.50) - 13px);
  }
  .taito .leader-line-svg {
    width: calc(394px * 0.50); 
    height: calc(41px * 0.50);
  }
  /*中央区京橋*/
  .kyobashi .map-pin {
    margin-top: calc((29px * 0.50) - 13px);
  }
  .kyobashi .leader-line-svg {
    width: calc(470px * 0.50); 
    height: calc(29px * 0.50);
  }
  /*中央区八丁堀*/
  .hattyobori .map-pin {
    margin-top: calc((63px * 0.50) - 13px);
  }
  .hattyobori .leader-line-svg {
    width: calc(460px * 0.50); 
    height: calc(63px * 0.50);
  }
  /*中央区築地*/
  .tsukiji .leader-line-svg {
    width: calc(397px * 0.50); 
    height: calc(36px * 0.50);
  }
  /*江東区深川*/
  .fukagawa .leader-line-svg {
    width: calc(386px * 0.50); 
    height: calc(80px * 0.50);
  }
  /*品川区東大井*/
  .higashioi .leader-line-svg {
    width: calc(400px * 0.50); 
    height: calc(140px * 0.50);
  }
}
@media (max-width: 600px) {
  /*台東区柳橋*/
  .yanagibashi .map-pin {
    margin-top: calc((89px * 0.30) - 6.5px);
  }
  .yanagibashi .leader-line-svg {
    width: calc(373px * 0.30); 
    height: calc(89px * 0.30);
  }
  /*台東区台東*/
  .taito .map-pin {
    margin-top: calc((41px * 0.30) - 6.5px);
  }
  .taito .leader-line-svg {
    width: calc(394px * 0.30); 
    height: calc(41px * 0.30);
  }
  /*中央区京橋*/
  .kyobashi .map-pin {
    margin-top: calc((29px * 0.30) - 6.5px);
  }
  .kyobashi .leader-line-svg {
    width: calc(470px * 0.30); 
    height: calc(29px * 0.30);
  }
  /*中央区八丁堀*/
  .hattyobori .map-pin {
    margin-top: calc((63px * 0.30) - 6.5px);
  }
  .hattyobori .leader-line-svg {
    width: calc(351px * 0.30); 
    height: calc(63px * 0.30);
  }
  /*中央区築地*/
  .tsukiji .leader-line-svg {
    width: calc(397px * 0.30); 
    height: calc(36px * 0.30);
  }
  /*江東区深川*/
  .fukagawa .leader-line-svg {
    width: calc(386px * 0.30); 
    height: calc(80px * 0.30);
  }
  /*品川区東大井*/
  .higashioi .leader-line-svg {
    width: calc(350px * 0.30); 
    height: calc(140px * 0.30);
  }
}
/* fukuoka
-----------------------------------------------*/
.fukuoka {
  background: url("../img/area/bgi-fukuoka.jpg?260619")no-repeat;
  background-size: cover;
  background-position: center;
}
.fukuoka .inner {
  padding: 65px 40px 55px;
}
.fukuoka .map-container {
  background-image: url("../img/area/map-fukuoka.svg");
  aspect-ratio: 537/635;
  max-width: 540px;
}
/*博多区石城町*/
.sekijyo-machi {
  top: calc((248 / 635) * 100%);
  left: calc((398 / 537) * 100%);
}
.sekijyo-machi .map-pin {
  margin-top: calc(169px - 13px);
}
.sekijyo-machi .leader-line-svg {
  width: 225px; 
  height: 169px;
}
/*博多区神屋町*/
.kamiya-machi {
  top: calc((265 / 635) * 100%);
  right: calc(((537 - 388) / 537) * 100%);
}
.kamiya-machi .map-pin {
  margin-top: calc(59px - 13px);
}
.kamiya-machi .leader-line-svg {
  width: 196px; 
  height: 59px;
}
/*博多区博多駅東*/
.hakatastation-higashi {
  top: calc((264 / 635) * 100%);
  left: calc((434 / 537) * 100%);
}
.hakatastation-higashi .map-pin {
  margin-top: calc(29px - 13px);
}
.hakatastation-higashi .leader-line-svg {
  width: 262px; 
  height: 29px;
}
/*博多区山王*/
.sanno {
  top: calc((282 / 635) * 100%);
  left: calc((461 / 537) * 100%);
}
.sanno .leader-line-svg {
  width: 294px; 
  height: 177px;
}
/*中央区大名*/
.daimyo {
  top: calc((277 / 635) * 100%);
  right: calc(((537 - 345) / 537) * 100%);
}
.daimyo .leader-line-svg {
  width: 479px; 
  height: 71px;
}
/*中央区今泉*/
.imaizumi {
  top: calc((283 / 635) * 100%);
  right: calc(((537 - 360) / 537) * 100%);
}
.imaizumi .leader-line-svg {
  width: 392px; 
  height: 221px;
}
@media (max-width: 1024px) {
  .fukuoka .inner {
    padding: 20px 30px 25px 10px;
  }
  /*博多区石城町*/
  .sekijyo-machi .map-pin {
    margin-top: calc((169px * 0.50) - 13px);
  }
  .sekijyo-machi .leader-line-svg {
    width: calc(360px * 0.50); 
    height: calc(169px * 0.50);
  }
  /*博多区神屋町*/
  .kamiya-machi .map-pin {
    margin-top: calc((59px * 0.50) - 13px);
  }
  .kamiya-machi .leader-line-svg {
    width: calc(369px * 0.50); 
    height: calc(59px * 0.50);
  }
  /*博多区博多駅東*/
  .hakatastation-higashi .map-pin {
    margin-top: calc((34px * 0.50) - 13px);
  }
  .hakatastation-higashi .leader-line-svg {
    width: calc(290px * 0.50); 
    height: calc(34px * 0.50);
  }
  /*博多区山王*/
  .sanno .leader-line-svg {
    width: calc(250px * 0.50); 
    height: calc(82px * 0.50);
  }
  /*中央区大名*/
  .daimyo .leader-line-svg {
    width: calc(479px * 0.50); 
    height: calc(71px * 0.50);
  }
  /*中央区今泉*/
  .imaizumi .leader-line-svg {
    width: calc(392px * 0.50); 
    height: calc(221px * 0.50);
  }
}
@media (max-width: 600px) {
  /*博多区石城町*/
  .sekijyo-machi .map-pin {
    margin-top: calc((169px * 0.30) - 6.5px);
  }
  .sekijyo-machi .leader-line-svg {
    width: calc(320px * 0.30); 
    height: calc(169px * 0.30);
  }
  /*博多区神屋町*/
  .kamiya-machi .map-pin {
    margin-top: calc((59px * 0.30) - 6.5px);
  }
  .kamiya-machi .leader-line-svg {
    width: calc(317px * 0.30); 
    height: calc(59px * 0.30);
  }
  /*博多区博多駅東*/
  .hakatastation-higashi .map-pin {
    margin-top: calc((34px * 0.30) - 6.5px);
  }
  .hakatastation-higashi .leader-line-svg {
    width: calc(270px * 0.30); 
    height: calc(27px * 0.30);
  }
  /*博多区山王*/
  .sanno .leader-line-svg {
    width: calc(249px * 0.30); 
    height: calc(110px * 0.30);
  }
  /*中央区大名*/
  .daimyo .leader-line-svg {
    width: calc(479px * 0.30); 
    height: calc(71px * 0.30);
  }
  /*中央区今泉*/
  .imaizumi .leader-line-svg {
    width: calc(392px * 0.30); 
    height: calc(221px * 0.30);
  }
}
/* fade
-----------------------------------------------*/
section .ttl,
section .inner > p,
section .area-map {
  transform: translateY(40px);
  opacity: 0;
  transition: all 0.5s;
}
section .area-map .map-node,
section .area-map .map-node .leader-line-svg,
section .area-map .map-node .label-text {
  opacity: 0;
  -webkit-transition: opacity 0.5s, transform 0.5s, all 0.5s;
  -ms-transition: opacity 0.5s, transform 0.5s, all 0.5s;
  transition: opacity 0.5s, transform 0.5s, all 0.5s;
}
.map-node {
  transform: translate(-10px, -100%) translateY(-20px); 
}
.map-node.is-left {
  transform: translate(10px, -100%) translateY(-20px);
}
.map-node.is-bottom {
  transform: translate(-10px, -13px) translateY(-20px);
}
.map-node.is-left.is-bottom {
  transform: translate(10px, -13px) translateY(-20px);
}
section .ttl.fade,
section .inner > p.fade,
section .area-map.fade {
  transform: translateY(0);
  opacity: 1;
}
section .area-map.fade .map-node,
section .area-map.fade .map-node .leader-line-svg,
section .area-map.fade .map-node .label-text {
  opacity: 1;
}
.area-map.fade .map-node {
  transform: translate(-10px, -100%) translateY(0);
}
.area-map.fade .map-node.is-bottom {
  transform: translate(-10px, -13px) translateY(0);
}
.area-map.fade .map-node.is-left {
  transform: translate(10px, -100%) translateY(0);
}
.area-map.fade .map-node.is-left.is-bottom {
  transform: translate(10px, -13px) translateY(0);
}
section .area-map.fade {
  transition-delay: 0.3s;
}
section .area-map.fade .map-node {
  transition-delay: 0.9s;
}
section .area-map.fade .map-node:first-child .leader-line-svg,
section .area-map.fade .map-node:first-child .label-text {
  transition-delay: 1.2s;
}
section .area-map.fade .map-node:nth-child(2) .leader-line-svg,
section .area-map.fade .map-node:nth-child(2) .label-text {
  transition-delay: 1.5s;
}
section .area-map.fade .map-node:nth-child(3) .leader-line-svg,
section .area-map.fade .map-node:nth-child(3) .label-text {
  transition-delay: 1.8s;
}
section .area-map.fade .map-node:nth-child(4) .leader-line-svg,
section .area-map.fade .map-node:nth-child(4) .label-text {
  transition-delay: 2.1s;
}
section .area-map.fade .map-node:nth-child(5) .leader-line-svg,
section .area-map.fade .map-node:nth-child(5) .label-text {
  transition-delay: 2.4s;
}
section .area-map.fade .map-node:nth-child(6) .leader-line-svg,
section .area-map.fade .map-node:nth-child(6) .label-text {
  transition-delay: 2.7s;
}
section .area-map.fade .map-node:nth-child(7) .leader-line-svg,
section .area-map.fade .map-node:nth-child(7) .label-text {
  transition-delay: 3.0s;
}