@charset "utf-8";

body {
  overflow-x: hidden;
}

ul.area li {
  color: #fff;
}

ul.area li h3 {
  line-height: 3em;
  background: #6f819d;
  border-bottom: 1px solid #ffffff;
  text-align: center;
  font-size: 1rem;
}

ul.pref li h4 {
  position: relative;
  line-height: 3em;
  background: #6e9c9d;
  border-bottom: 1px solid #ffffff;
  text-align: center;
  font-size: 1rem;
}

ul.pref li h4::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 13px;
  width: 13px;
  height: 13px;
  margin: auto;
  content: "";
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: translatey(-25%) rotate(135deg);
  transform: translatey(-25%) rotate(135deg);
  transition: .3s;
}

ul.pref li h4.open::before {
  -webkit-transform: translatey(25%) rotate(-45deg);
  transform: translatey(25%) rotate(-45deg);
}

ul.pref li > ul {
  display: none;
}

ul.shop li {
  border-bottom: 1px solid #6f819d;
  background-color:rgba(255,255,255,1.0);
}

ul.shop li h5 {
  position: relative;
  padding-left: 40px;
  line-height: 3em;
  font-size: 1rem;
  color: #6f819d;
}

ul.shop li h5::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 13px;
  width: 13px;
  height: 13px;
  margin: auto;
  content: "";
  border-top: 2px solid #6f819d;
  border-right: 2px solid #6f819d;
  -webkit-transform: translatey(-25%) rotate(135deg);
  transform: translatey(-25%) rotate(135deg);
  transition: .3s;
}

ul.shop li h5.open::before {
  -webkit-transform: translatey(25%) rotate(-45deg);
  transform: translatey(25%) rotate(-45deg);
}

ul.shop li h5::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  width: 6em;
  height: 2em;
  padding: 0 .25em;
  line-height: 2em;
  margin: auto;
  background: #6f819d;
  border-radius: .25em;
  content: "詳細を見る";
  text-align: center;
  font-size: .7rem;
  color: #fff;
}

ul.shop li h5.open::after {
  content: "閉じる";
}

ul.shop li > div {
  display: none;
  padding: 20px;
  font-size: .75rem;
  color: #000;
}

.flex {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.address {
  margin-bottom: 20px;
  font-size: .75rem;
}

.shop_flex1 > div {
  width: 50%;
}

.shop_flex1  h6 {
  margin-bottom: 10px;
  font-size: 1rem;
}

.shop_flex1 p {
  margin-bottom: 20px;
  line-height: 1.5em;
  font-size: .75rem;
}

.shop_flex2 {
  margin-bottom: 20px;
}

.shop_flex2 > div {
  width: 25%;
  text-align: center;
}

.shop_flex2 > div a {
  text-decoration: none;
  color: #000;
  font-size: .7rem;
}

.shop_flex2 > div a img {
  display: block;
  margin-bottom: 1em;
  width: 100%;
}

.area_map {
    background: #fff;
    width: 94%;
    margin: 0px auto 15px;
    position: relative;
    border-radius: 20px;
}

.area_map img.z {
  width: 100%;
  opacity: 0;
}

.area_img img {
  position: absolute;
  transition: .3s;
}

.area_img .svg_other {top:47.8%;left:24.8%;width:52.473%;}
.area_img .svg_hokkaido {top:14%;left:77.8%;width:19.032%;}
.area_img .svg_touhoku {top:32.1%;left:77.8%;width:16.022%;}
.area_img .svg_kanto {top:53.22%;left:71.2%;width:22.688%;}
.area_img .svg_chubu {top:53.22%;left:57.85%;width:19.355%;}
.area_img .svg_kinki {top:58.3%;left:44.6%;width:19.355%;}
.area_img .svg_kyushu {top:62.8%;left:3.3%;width:19.355%;}
.area_img .svg_okinawa {top:80.5%;left:3.3%;width:6.129%;}

.area_img img.sel {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) scale(3);
  transform: translate(-50%,-50%) scale(3);
}

.area_img img.del {
  opacity: 0;
  -webkit-transform: translatey(50px);
  transform: translatey(50px);
}

.area_cap a {
  position: absolute;
  display: block;
  width: 8em;
  padding: 1.5%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  cursor: pointer;
  text-align: center;
  font-size: 0.7rem;
  font-weight: bold;
  color: #fff;
  transition: .3s;
}

.area_cap.del a {
  opacity: 0;
  -webkit-transform: translatey(50px);
  transform: translatey(50px);
}

.area_cap .svg_hokkaido {top:21.5%;left:87.5%;text-shadow: 1px 1px 2px #1765b1, -1px 1px 2px #1765b1, 1px -1px 2px #1765b1, -1px -1px 2px #1765b1;}
.area_cap .svg_touhoku {top:42%;left:86%;text-shadow: 1px 1px 2px #6dbad6, -1px 1px 2px #6dbad6, 1px -1px 2px #6dbad6, -1px -1px 2px #6dbad6;}
.area_cap .svg_kanto {top:63%;left:82.5%;text-shadow: 1px 1px 2px #75ac2c, -1px 1px 2px #75ac2c, 1px -1px 2px #75ac2c, -1px -1px 2px #75ac2c;}
.area_cap .svg_chubu {top:68%;left:68%;text-shadow: 1px 1px 2px #e782b1, -1px 1px 2px #e782b1, 1px -1px 2px #e782b1, -1px -1px 2px #e782b1;}
.area_cap .svg_kinki {top:63.5%;left:51.5%;text-shadow: 1px 1px 2px #f1891c, -1px 1px 2px #f1891c, 1px -1px 2px #f1891c, -1px -1px 2px #f1891c;}
.area_cap .svg_kyushu {top:70.5%;left:13%;text-shadow: 1px 1px 2px #e5514d, -1px 1px 2px #e5514d, 1px -1px 2px #e5514d, -1px -1px 2px #e5514d;}
.area_cap .svg_okinawa {top:82.85%;left:9.5%;text-shadow: 1px 1px 2px #e31812, -1px 1px 2px #e31812, 1px -1px 2px #e31812, -1px -1px 2px #e31812;}

.pref_cap div {
  display: none;
}

.pref_cap div.sel {
  display: block;
}

.pref_cap div a {
  position: absolute;
  display: block;
  width: 8em;
  padding: 1.5%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-size: .75em;
  font-weight: bold;
  color: #fff;
  transition: .3s;
}

.pref_cap .svg_hokkaido a {text-shadow: 2px 2px 0 #1765b1, -2px 2px 0 #1765b1, 2px -2px 0 #1765b1, -2px -2px 0 #1765b1;}
.pref_cap .svg_touhoku a {text-shadow: 2px 2px 0 #6dbad6, -2px 2px 0 #6dbad6, 2px -2px 0 #6dbad6, -2px -2px 0 #6dbad6;}
.pref_cap .svg_kanto a {text-shadow: 2px 2px 0 #75ac2c, -2px 2px 0 #75ac2c, 2px -2px 0 #75ac2c, -2px -2px 0 #75ac2c;}
.pref_cap .svg_chubu a {text-shadow: 2px 2px 0 #e782b1, -2px 2px 0 #e782b1, 2px -2px 0 #e782b1, -2px -2px 0 #e782b1;}
.pref_cap .svg_kinki a {text-shadow: 2px 2px 0 #f1891c, -2px 2px 0 #f1891c, 2px -2px 0 #f1891c, -2px -2px 0 #f1891c;}
.pref_cap .svg_kyushu a {text-shadow: 2px 2px 0 #e5514d, -2px 2px 0 #e5514d, 2px -2px 0 #e5514d, -2px -2px 0 #e5514d;}
.pref_cap .svg_okinawa a {text-shadow: 2px 2px 0 #e31812, -2px 2px 0 #e31812, 2px -2px 0 #e31812, -2px -2px 0 #e31812;}

.pref_cap .pref1 {top:50%;left:50%;}
.pref_cap .pref6 {top:58%;left:41%;}
.pref_cap .pref4 {top:58%;left:65.5%;}
.pref_cap .pref7 {top:73%;left:51%;}
.pref_cap .pref13 {top:57.5%;left:51%;}
.pref_cap .pref14 {top:73%;left:51%;}
.pref_cap .pref11 {top:42%;left:51%;}
.pref_cap .pref8 {top:42%;left:75.5%;}
.pref_cap .pref9 {top:26%;left:75.5%;}
.pref_cap .pref10 {top:26%;left:51%;}
.pref_cap .pref17 {top:34%;left:25%;}
.pref_cap .pref23 {top:57.5%;left:50%;}
.pref_cap .pref21 {top:57.5%;left:31%;}
.pref_cap .pref22 {top:73%;left:70.5%;}
.pref_cap .pref27 {top:50%;left:31%;}
.pref_cap .pref28 {top:35%;left:31%;}
.pref_cap .pref40 {top:35%;left:50%;}
.pref_cap .pref42 {top:50%;left:30%;}
.pref_cap .pref41 {top:35%;left:30%;}
.pref_cap .pref46 {top:66%;left:41%;}
.pref_cap .pref47 {top:50%;left:50%;}

.back {
  display: none;
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 1em;
}

.area_p {
  position: absolute;
  top: 5%;
  width: 100%;
  text-align: center;
  font-size: 0.7rem;
  transition: .3s;
  color: #333;
}

.bky {
  background: #fff;
}

.ft_att {
  padding: 10px 10px 0;
  font-size: .7rem;
}

.ft_att ul {
  margin-bottom: 30px;
}

.ft_att ul li:before {
  content: "・";
}

.ft_att ul li {
  padding-left: 1em;
  text-indent: -1em;
  margin-bottom: .8em;
}

footer {
  text-align: center;
  line-height: 1.5rem;
  font-size: 1em;
}

@media screen and (min-width: 641px){
  .area_p {
    font-size: 1rem;
  }

  .area_cap a {
    font-size: 1rem;
  }

  .pref_cap div a {
    font-size: 1rem;
  }

  ul.area {
    background: #fff;
  }

  ul.pref li h4 {
    font-size: 1.125rem;
  }

  ul.pref li h4::before {
    display: none;
  }

  ul.pref li > ul {
    display: block;
  }

  ul.shop li {
    border: none;
  }

  ul.shop li h5 {
    position: relative;
    margin: 10px;
    padding: 0 10px;
    border-bottom: 4px dotted #ccc;
    font-size: 1.25em;
    font-weight: bold;
  }

  ul.shop li h5 span {
    position: absolute;
    display: block;
    top: 50%; right: 10px;
    margin-top: -.375em;
    line-height: 1em;
    font-size: .875em;
  }

  ul.shop li h5 span.tel img {
    width: 24px;
    vertical-align: middle;
    margin-top: -4px;
    margin-right: 10px;
  }

  ul.shop li h5::before {
    display: none;
  }

  ul.shop li h5::after {
    display: none;
  }

  ul.shop li > div {
    display: block;
    position: relative;
    padding: 0 20px;
  }

  .address {
    font-size: .75rem;
  }

  .shop_flex1 > div {
    width: inherit;
  }

  .shop_flex1 > div:first-child {
    width: 140px;
  }

  .shop_flex1 > div:last-child {
    -webkit-flex: 1;
    flex: 1;
  }

  .shop_flex1 h6 {
    font-size: .875rem;
  }

  .shop_flex1 p {
    font-size: .75rem;
  }

  .shop_flex2 {
    width: 140px;
    position: absolute;
    top: 15px; right: 20px;
  }

  .shop_flex2 > div {
    width: 50%;
    margin-right: 10px;
  }

  .shop_flex2 > div:last-child {
    margin-right: 0;
  }

  .shop_flex2 > div a {
    font-size: .65rem;
  }

  .shop_flex2 > div a img {
    margin-bottom: .5em;
  }
}