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


/* ==============================================
NEW MAP CSS 2025.11.25
================================================*/

[data-page="map_new"] .nav-pc-1{
  color: #000;
}

.map_page_ttl {
  font-size: 1.2em;
  font-weight: 600;
  text-align: center;
  margin: .5em 0;
  color: var(--c-black3);
}

.map-top-wp {
  padding: 12rem 0 0;
  position: relative;
}

.map_nav{
  padding-top: 3rem;
  display: flex;
  justify-content: center;
  margin: auto;
  max-width: 700px;
}
.map_nav a {
  width: 30%;
}
@media (min-width: 769px) {

  .map_nav {
    padding-top: 10rem;
    width: 70%;
  }

}/*  */


.map_block_wrap{
  overflow: hidden;
  margin-bottom: 3em;
}
.map_block{
  position: relative;
  font-size: 3.125vw;
  max-width: 1000px;
  margin: auto;
}
.map_inner{
  position: absolute;
  top: 12em;
  left: 0;
  z-index: 5;
  width: 100%;
  /* background-color: #f00; */
  /* mix-blend-mode: multiply; */
}


.map_list_box{
  position: absolute;
  top: 0;
  z-index: 1;
  width: 14em;
  line-height: 1.8;
  background-size: contain;
}
.map_food_page .map_list_box.shop{
  display: none;
}
.map_shop_page .map_list_box.food{
  display: none;
}

/* MAP - ICON =========================== */
.map_list_box.food{
  background-image: url(/imgs/map_icon_food.svg);
}
.map_list_box.shop{
  background-image: url(/imgs/map_icon_shop.svg);
}

/* MAP - POSITION =========================== */
.map_list_box.left{
  right: 18em;
  background-position: right top;
  text-align: right;
  line-height: 1.8;
}
.map_list_box.left a{
  display: block;
  padding-right: 2em;
}
.map_list_box.right{
  left: 18em;
  background-position: left top;
  text-align: left;
}
.map_list_box.right a{
  display: block;
  padding-left: 2em;
}

/* LEFT ========================== */
.yoshinoya{  top: 3em; }
.wolfgang{ top: 6.5em; }
.harajukuchurros{  top: 11.5em;}
.printclub{  top: 15.5em;}
.yoshisoba{  top: 18em;}
.noacafe{  top: 20.5em;}
.tabio{  top: 23em;}
.dor{  top: 25.5em;}
.coinlocker{  top: 28em;}
.gelato_kitchen{ top: 30.5em;}
.sweetbox2{ top: 35.5em;}
.cstp{     top: 40em;}
.silhouette{ top: 42.5em;}
.souvenir{ top: 44.5em;}
.goodday{ top: 47em;}
.petparadise{ top:50.5em;}
.thesappira{ top:52.5em;}
.cpra{ top:54.7em;}
.alta{ top:61em;}
.longlongerlongest{ top:69em;}
.strawberryfetish{ top:71em;}
.totticandyfactory{ top:73em;}
.masayashokudo{ top:76em;}
.sweetxoharajuku{ top:80em;}
.matcha_salon{ top:76em;}
.dip_me_banana{ top:78em;}
.gelato_kitchen_noa{ top:80em;}
.sweet_palace{ top:82em;}
.matsukiyo{ top:88em;}
.anapharajuku{ top:92.8em;}
.santamonica{ top:97.5em;}
.noemie{ top: 104em;}
.cute{ top:118em;}
.happyone{ top: 123.5em;}
.strawberryfetish2{ top:125.5em;}
.tinycoco{ top:128em;}
.yosuke{ top:130em;}
.solado{ top: 145em;}
.lotteria{ top: 158em;}
.brandcollect{ top:164em;}
.audrey{ top:166em;}

/* RIGHT ========================== */
.osdk{ top: 4.5em; }
.doutor{ top: 7em; }
.mac{ top: 18em; }
.pariskids{ top: 26em; }
.daiso{ top: 36.5em; }
.ruo{ top: 41.6em; }
.wc{ top: 43.9em; }
.yamahisa{ top: 49em; }
.rootsisland{ top: 54em; }
.kamaro{ top: 56em; }
.lunaearth{ top: 58em; }
.jeansmate{ top: 60.9em; }
.momon{ top: 64em; }
.catallamanda{ top: 66em; }
.leshiner{ top: 69.3em; }
.happyhearts{ top: 73.8em; }
.marion{ top: 88em; }
.jimsin{ top: 90em; }
.bodyline{ top: 92em; }
.takenoko{ top: 94em; }
.sunstyle{ top: 96em; }
.seven{ top: 98em; }
.tonkatsu{ top: 100em; }
.kouhukudo{ top: 102.5em; }
.harajukucandy{ top: 105em; }
.richards{ top: 107.7em; }
.mameshiba{ top: 116em; }
.redeye{ top: 118em; }
.stylenanda{ top: 120em; }
.tomato{ top: 122.8em; }
.banananokamisama{ top: 128em; }
.cosmura{ top: 131.2em; }
.happysocks{ top: 134.5em; }
.woodendoll{ top: 137.7em; }
.aimerfeel{ top: 142.1em; }
.wego135{ top: 155em; }
.asics{ top: 163.2em; }

.shop_name{
  font-size: 0.9em;
  font-weight: 600;
}
.map_list_box .shop_name{
  text-align: inherit;
}
.longlongerlongest .shop_name {
  transform: scaleX(.9);
  transform-origin: right;
}
.gelato_kitchen .shop_name ,
.matcha_salon .shop_name {
  transform: scaleX(.8);
  transform-origin: right;
  white-space: nowrap;
}


@media (min-width: 769px) {

  .map-top-wp {
    padding: 14em 0 6em;
    position: relative;
  }

  .map_inner {
    padding-top: 9rem;
  }
  .map_block {
    font-size: clamp(10px, 1.735vw, 17.7px);
  }
  .map_list_box {
    width: initial;
  }
  .map_list_box.left {
    right: 31.5em;
  }
  .map_list_box.right {
    left: 31.5em;
  }

}/*  */




/* ==============================================
MAP CONTENTS
================================================*/
/* .map_contents_block{
  padding: 5em 0;
} */
[data-page="map_contents"] .spot_keyvis_ttl{
  margin-bottom: 1.4em;
}

.map_contents_ttl {
  position: relative;
  width: fit-content;
  font-size: 1.7em;
  font-weight: 600;
  padding-left: 1.4em;
  margin: 1em auto;
  z-index: 1;
}
.map_contents_ttl:before {
  content: url(/images/map/map-ttl-icon.svg);
  left: 0;
  top: .1em;
  display: block;
  position: absolute;
  width: 1em;
}
.map_contents_ttl:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: calc(100% + .4em);
  height: 100%;
  z-index: -1;
  background-color: #fff;
}

.map_contents_block{
  position: relative;
  margin-bottom: 4em;
}
.map_contents_block::before {
  top: 1.3em;
  left: 50%;
  content: "";
  position: absolute;
  display: block;
  width: calc(100% + 2em);
  height: calc(100% - 1.5em);
  border: 2px solid var(--c-yellow);
  transform: translateX(-50%) skewX(-2deg);
}
.map_contents_block::after {
  content: "HARAJUKU TAKESHITA STREET";
  position: absolute;
  bottom: -.65em;
  left: -2rem;
  display: block;
  font-family: var(--c-yellow);
  font-size: 1.5em;
  line-height: 1;
  font-weight: bold;
  color: var(--c-yellow);
  transform: skewX(-2deg);
}

.map_contents_flex{
  position: relative;
  padding: 1em;
}
.map_contents_gmap_wrap{
  width: 100%;
  aspect-ratio: 1 / 1;
}
.map_contents_gmap_wrap iframe{
  width: 100%;
  height: 100%;
}

.map_contents_detail_wrap{
  padding: 2em 0;
}
.map_contents_dl {
  font-size: 1.2em;
  padding: .5em 0;
}
.map_contents_dl dt {
  font-weight: 600;
}
.map_contents_dl dt:before {
  content: "";
  background: #333;
  height: .8em;
  width: .8em;
  margin-right: 0.25em;
  display: inline-block;
}
.map_contents_dl dd a {
  word-break: break-all;
}

@media (min-width: 769px) {
  .map_contents_block {
    margin-bottom: 6em;
  }
  .map_contents_ttl:after {
    width: calc(100% + 2em);
  }
  .map_contents_block::before {
    top: 1.5em;
    transform: translateX(-50%) skewX(-5deg);
  }
  .map_contents_block::after {
    bottom: -0.8em;
    left: -3rem;
    font-size: 2.5em;
    transform: skewX(-5deg);
  }
  
  .map_contents_ttl {
    font-size: 2.2em;
  }
  .map_contents_flex{
    display: flex;
    justify-content: space-between;
    padding: 1.5em 3em 4.2em;
  }
  .map_contents_gmap_wrap{
    width: 52%;
    aspect-ratio: 5 / 4;
  }
  .map_contents_detail_wrap{
    width: 43%;
    padding: 0;
  }


}/*  */