@charset "UTF-8";
* {box-sizing: border-box;}

html{
  font-size: 100%;
  scroll-behavior: smooth;
}
body{
  background-color: #7BCAF2;
  color: #000;
  font-family: 'YuGothic','Yu Gothic',sans-serif;
  background-image:url(../img/bg_footer.png);
  background-position:center bottom;
  background-size:100% auto;
  background-repeat:no-repeat;
}
img{
  max-width: 100%;
  vertical-align: bottom;
}
li{
  list-style: none;
}
a{
  color: #000;
  text-decoration: none;
  transition: 0.2s;
}
a:hover{
  opacity: 0.7;
}

#header {
  position:relative;
  max-width:1200px;
  margin:0 auto;
  #title {
    position:absolute;
    left:-65px; bottom:-62px;
    z-index:10;
  }
  .hd_bg_cnt {
    position:relative;
    max-width:1200px;
    height:0;
    line-height:0;
    padding-top:46.6%;
    background-image:url(../img/bg_header.png);
    background-position:center bottom;
    background-repeat:no-repeat;
    .arrow_box {
      position:absolute;
      right:0; top:0;
      line-height:0;
    }

  }
}
  @media only screen and (max-width: 770px) {
    html {
      font-size: 90%; }
    #header {
      width:100%;
      #title {
        width:130px;
        left:0px; bottom:-20px;
        img { width:100%;} 
      }
      .hd_bg_cnt {
        padding-top:55%;
        background-size:100% auto;
        .arrow_box {
          width:170px;
          position:absolute;
          right:10px; top:-5px;
          line-height:0;
          img {width:100%;}
        }
      }
    }
  }
  @media only screen and (max-width: 640px) {
    html {
      font-size: 90%; }
  }

#container {
  max-width:1200px;
  margin:0 auto 25rem;
  padding:90px 0 30px;
  background-color:#fff;
  border-radius:30px;
  z-index:2;
  #map_inner {
    padding:30px 45px;
    .map_area_outer {
      display:flex;
      justify-content: space-between;
      margin-bottom: 2.5rem;
      .map {
        position:relative;
        width: 50%;
        img { width:100%; }
        .map_area_txt {
          position:absolute;
          left:-10px; top:-30px;
          width:180px;
          padding:15px 30px;
          border-radius:10px;
          box-shadow: 6px 6px rgba(0, 0, 0, 0.2);
        }
        .north { background:#f6ab00; }
        .center { background:#008cd6; }
        .south { background:#e95406; }
      }


      .pin_lst {
        width:45%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        div {
          margin-bottom:5px;
          span {
            display:inline-block;
            width:35px; height:45px;
            background:url(../img/pin_num.png) ;
            text-align:center;
            color:#fff;
            font-weight:700;
            font-size:22px;
          }
          div {
            margin-left:0.5rem;
            display:inline-block;
            font-size:1.175rem;
            font-weight: 700;
          }
        }

      }
      
    }
  }
    .area_title {
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        padding: 20px 35px;
        margin: 0 0 0 -35px;
        width: 320px;
        font-size: 22px;
        color: white;
    }
    #area_north > .area_title { background: #f6ab00; }
    #area_center > .area_title { background: #008cd6; }
    #area_south > .area_title { background: #ea5406; }
    .area_title:before {
      position: absolute;
      content: '';
      top: 100%;
      left: 0;
      border: none;
      border-bottom: solid 18px transparent;
    }
    #area_north > .area_title:before { border-right: solid 35px #e76d00; }
    #area_center > .area_title:before { border-right: solid 35px #0063d3; }
    #area_south > .area_title:before { border-right: solid 35px #e82305; }
  #ft_area {
    text-align:center;
    font-size:0.675rem;
    color:#79acc6;
  }
  .shop_info_box {
    max-width:1070px;
    margin:0 auto 5.5rem;

    .shop_name {
      display:flex;
      position: relative;
      justify-content:space-between;
      margin-bottom: 2.0rem;
      border-bottom:5px solid #000;
      padding: 35px 0 5px 60px;
      h3 {
        font-size:2.0rem;
        span {
          font-size:1.7rem;
        }
      }
      .shop_icon {
        span {
          display:inline-block;
          font-weight:900;
          font-size:1.2rem;
          margin-right:10px;
          border:3px solid #000;
          border-radius:5px;
          padding:3px 15px 3px 55px;
          background-size:28px auto;
          background-position:10px center;
          background-repeat:no-repeat;
        }
        .bar {background-image:url(../img/icon/ic_bar.png) ;}
        .cafe { background-image:url(../img/icon/ic_cafe.png); }
        .chinese_food { background-image:url(../img/icon/ic_chinese_food.png); }
        .food { background-image:url(../img/icon/ic_food.png); }
        .foreign_food { background-image:url(../img/icon/ic_foreign_food.png); }
        .hotel { background-image:url(../img/icon/ic_hotel.png); }
        .japanese_food { background-image:url(../img/icon/ic_japanese_food.png); }
        .kappou { background-image:url(../img/icon/ic_kappou.png); }
        .snack { background-image:url(../img/icon/ic_snack.png); }
        .sushi { background-image:url(../img/icon/ic_sushi.png); }
        .takeout { background-image:url(../img/icon/ic_takeout.png); }
        .yakiniku { background-image:url(../img/icon/ic_yakiniku.png); }
        .cafe { background-image:url(../img/icon/ic_cafe.png); }
        .sweets { background-image:url(../img/icon/ic_sweets.png); }
        .yakitori { background-image:url(../img/icon/ic_yakitori.png); }
      }
    }
    .shop_name::before {
      position:absolute;
      left:0; bottom:-10px;
      content:"";
      display:block;
      width:47px; height:59px;
      background-image:url(../img/pin_title.png);
    }
    .btn_area {
      display:flex;
      justify-content: center;
      column-gap: 30px;
      margin-bottom:2.5rem;
      .btn {
        a {
          position:relative;
          display:block;
          height:59px;
          background:#000;
          color:#fff;
          text-align:center;
          font-size:1.5rem;
          line-height:57px;
          border-radius:30px;
        }
        a::before {
          display:block;
          content:"";
          width:49px; height:49px;
          position:absolute;
          left:5px; top:5px;
        }
      }
      .tel {
        width:35%;
        a {
          font-size:1.8rem;
          box-shadow: 7px 7px #7bcaf2;
        }
        a::before {
          background-image:url(../img/icon_tel.png);
        }
      }
      .web {
        width:35%;
        a {
          box-shadow: 7px 7px #9ed35f;
        }
        a::before {
          background-image:url(../img/icon_web.png);
        }
      }
      .map {
        width:25%;
        a {
          box-shadow: 7px 7px #f684df;
        }
        a::before {
          background-image:url(../img/icon_map.png);
        }
      }

    }
    .data_area {
      display:flex;
      justify-content: space-between;
      .pic {
        width:470px;
        img { width:100%; }
      }
      .data_tbl {
        width:545px;
        .shop_copy {
          font-weight:bold;
          font-size:1.325rem;
          margin-bottom:2.5rem;
        }
      }

    }
  }
}
@media only screen and (max-width: 770px) {
  #container {
    width:95%;
    margin:0 auto 12rem;
    padding:40px 0 20px;
    background-color:#fff;
    border-radius:12px;
    z-index:2;
    #map_inner {

      padding:12px 18px;
      .map_area_outer {
        display: block;
        margin-bottom: 1.5rem;
        .map {
          width: 100%;
          img { width:100%; }
          .map_area_txt {
            position:absolute;
            left:-10px; top:-25px;
            width:120px;
            padding:7px 15px;
            border-radius:5px;
            box-shadow: 4px 4px rgba(0, 0, 0, 0.2);
          }
        }

        .pin_lst {
          width:95%;
          display: block;
          margin:10px auto 60px;
          div {
            margin-bottom:5px;
            span {
              display:inline-block;
              width:26px; height:34px;
              background:url(../img/pin_num.png) ;
              background-size:26px 34px;
              text-align:center;
              color:#fff;
              font-weight:700;
              font-size:16px;
            }
            div {
              margin-left:0.5rem;
              display:inline-block;
              font-size:1.175rem;
              font-weight: 700;
            }
          }
        }
      }
      
    }
    .area_title {
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        padding: 10px 18px;
        margin: 0 0 0 -18px;
        width: 210px;
        font-size: 16px;
        color: white;
        img {
          width:120px;
        }
    }
    .area_title:before {
      position: absolute;
      content: '';
      top: 100%;
      left: 0;
      border: none;
      border-bottom: solid 9px transparent;
    }
    #area_north > .area_title:before { border-right: solid 18px #e76d00; }
    #area_center > .area_title:before { border-right: solid 18px #0063d3; }
    #area_south > .area_title:before { border-right: solid 18px #e82305; }
    .shop_info_box {
      width:100%;
      margin:0 auto 1.5rem;

      .shop_name {
        position:relative;
        display:block;
        width:90%;
        margin: 0.5rem auto 90px;
        border-bottom:3px solid #000;
        padding: 25px 0 2px 40px;
        h3 {
          font-size:1.5rem;
          span {
            font-size:1.125rem;
          }
        }
        .shop_icon {
          position:absolute;
          left:0; bottom:-60px;
          span {
            display:inline-block;
            font-weight:900;
            font-size:1.125rem;
            margin-right:2px;
            border:3px solid #000;
            border-radius:5px;
            padding:2px 12px 2px 38px;
            background-size:21px auto;
            background-position:6px center;
            background-repeat:no-repeat;
          }
        }
      }
      .shop_name::before {
        position:absolute;
        left:0; bottom:-10px;
        content:"";
        display:block;
        width:35px; height:44px;
        background-image:url(../img/pin_title.png);
        background-size:35px 44px;
      }
      .btn_area {
        display:block;
        margin-bottom:2.5rem;
        .btn {
          a {
            position:relative;
            display:block;
            height:39px;
            background:#000;
            color:#fff;
            text-align:center;
            font-size:1.125rem;
            line-height:39px;
            border-radius:30px;
            
            margin:0.5rem auto;
          }
          a::before {
            display:block;
            content:"";
            width:29px; height:29px;
            position:absolute;
            left:5px; top:5px;
            background-size: 29px auto;
          }
        }
        .tel {
          width:90%;
          margin:0.5rem auto;
          a {
            font-size:1.375rem;
            box-shadow: 4px 4px #7bcaf2;
          }
          a::before {
            background-image:url(../img/icon_tel.png);

          }
        }
        .web {
          width:90%;
          margin:0.5rem auto;
          a {
            box-shadow: 4px 4px #9ed35f;
          }
          a::before {
            background-image:url(../img/icon_web.png);
          }
        }
        .map {
          width:90%;
          margin:0.5rem auto;
          a {
            box-shadow: 4px 4px #f684df;
          }
          a::before {
            background-image:url(../img/icon_map.png);
          }
        }
      }
      .data_area {
        display:block;
        .pic {
          width:90%;
          margin:0.5rem auto;
          img { width:100%; }
        }
        .data_tbl {
          width:90%;
          margin:0.5rem auto;
          .shop_copy {
            font-weight:bold;
            font-size:1.125rem;
            margin-bottom:1.5rem;
          }
        }

      }
    }
  }
}

.shop_data {
  border-collapse: collapse;
  border-top:5px solid #231815;
  border-bottom:5px solid #231815;
  td,th {
    border-top:2px solid #c3c3c3;
    padding:0.5rem 1.5rem;
    font-weight:500;
  }
  th {
    width:8rem;
    
    text-align:left;
  }
}

@media only screen and (max-width: 770px) {
  .shop_data {
    width:100%;
    border-collapse: collapse;
    border-top:5px solid #231815;
    border-bottom:5px solid #231815;
    td,th {
      display:block;
    }
    th {
      border-top:0;  
      border-bottom:0;    
      text-align:left;
      font-weight:bold;
      padding-bottom:5px;
    }
    td {
      border-top:0; 
      border-bottom:2px solid #c3c3c3;
      padding:0 1.5rem 5px;
      font-weight:500;
    }
    tr:last-of-type > td {
      border-bottom:0;
    }
  }
}

.pagetop {
  width:190px;
  height:250px;
  position:fixed;
  right:0; bottom:0;
  img {
    margin-left:120px;
    transition:0.3s;
  }
  :hover img {
    margin-left:0;
  }
}
@media only screen and (max-width: 770px) {
  .pagetop {
    width:80px;
    height:125px;
    position:fixed;
    right:0; bottom:0;
    img {
      width:100%;
      transition:0.3s;
    }
    :hover img {
      margin-left:0;
    }
  }
}

@media (min-width: 769px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}