/*
Theme Name:   Leo
 Description:  A Business theme, perfect for creating a corporate/business websites, Leo is a child of the Wallstreet theme and is its lighter color variation. Those who prefer a white-background-based theme can use this, while those who prefer a dark background can use directly the parent theme.
 Theme URI:    https://webriti.com/leo-details-page/
 Author:       webriti
 Author URI:   https://www.webriti.com
 Template:     wallstreet
 Version:      1.2.1
 Tags: full-width-template, threaded-comments, one-column, two-columns, custom-menu, sticky-post, translation-ready, featured-images, blog, portfolio, photography, food-and-drink, entertainment, education, blog, footer-widgets

*/

html {height:100%;}
body {height:100%;}

#title{
  position:relative;
  display:contents;
  }

.map_all{
  display:flex;
  background-image: linear-gradient(-45deg, rgba(246, 255, 0, .6), rgba(255, 0, 161, .6)),url("img/tsutsuzi.jpg");
  border-radius:10px;
  border-top:5px solid rgba(255, 0, 161, .8);
  border-right:5px solid rgba(246, 255, 0, .8);
  border-bottom:5px solid rgba(246, 255, 0, .8);
  border-left:5px solid rgba(255, 0, 161, .8);
  box-shadow:5px 5px 5px #4d4d4d;
  height:100%;
  }

.box{

  }


#map {
  height: 600px;
  width:70%;
  margin:30px;
  border-top:2px solid #bbbbbb;
  border-right:2px solid #5d5d5d;
  border-bottom:2px solid #5d5d5d;
  border-left:2px solid #bbbbbb;
  border-radius:5px;
}

.map_right{
  width:500px;}

.box2{
  font-size:12px;
  }

.map_result{
  border:2px solid red;
  background:#ffffff;
  margin-top:30px;
  height:55%;
  }

input, button, textarea, select {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.destination{
font-weight:normal;
border-bottom:2px dotted #4d4d4d;
height:7%;
padding:10px;
align-items: center;}

.price{
font-weight:normal;
border-bottom:2px dotted #4d4d4d;
height:7%;
padding:10px;
align-items: center;}

.distance{
font-weight:normal;
border-bottom:2px dotted #4d4d4d;
height:7%;
padding:10px;
align-items: center;}

.time{
font-weight:normal;
border-bottom:2px dotted #4d4d4d;
height:7%;
padding:10px;
align-items: center;}

.tel{
font-weight:normal;
border-bottom:2px dotted #4d4d4d;
height:7%;
padding:10px;
align-items: center;}

.hour{
    font-weight:normal;
    border-bottom:2px dotted #4d4d4d;
    height:7%;
    padding:10px;
    align-items: center;}

.holiday{
    font-weight:normal;
    border-bottom:2px dotted #4d4d4d;
    height:7%;
    padding:10px;
    align-items: center;}

.info{font-weight:normal;
  height:7%;
padding:10px;
align-items: center;}

.labels {
	color: #ffffff;
	background: #000000;
	font-size: 8px;
	text-align: center;
	padding: 5px 5px 0;
	border-radius: 8px;
	position: relative;
	top:-35px;
	height: 18px;
	opacity: 0.8;
	display: inline-block;
	}

.price,.distance,.destination,.time,.tel,.hour,.holiday,.info{
display:flex;}


#name{
font-size:14px;}

#price{
font-size:14px;}

#hour{
font-size:14px;
}

input.meal{
color:rgb(0,0,0);
font-size:20px;
font-weight:bold;
background-image:url("img/meal_menu.png");
background-position:165px 110px;
background-size:170px;
}

input.tourism{
color:rgb(0,0,0);
font-size:20px;
font-weight:bold;
background-image:url("img/tourism_menu.png");
background-position:165px 110px;
background-size:170px;
}

input.sights{
color:rgb(0,0,0);
font-size:20px;
font-weight:bold;
background-image:url("img/sights_menu.png");
background-position:165px 110px;
background-size:170px;
}
input.hotspring{
color:rgb(0,0,0);
font-size:20px;
font-weight:bold;
background-image:url("img/hotspring_menu.png");
background-position:165px 110px;
background-size:170px;
}

input.station{
color:rgb(0,0,0);
font-size:20px;
font-weight:bold;
background-image:url("img/station_menu.png");
background-position:165px 110px;
background-size:170px;
}
input.bar{
color:rgb(0,0,0);
font-size:20px;
font-weight:bold;
background-image:url("img/bar_menu.png");
background-position:165px 110px;
background-size:170px;
}

input.carehome{
color:rgb(0,0,0);
font-size:20px;
font-weight:bold;
background-image:url("img/carehome_menu.png");
background-position:165px 110px;
background-size:170px;
}

input.drugstore{
color:rgb(0,0,0);
font-size:20px;
font-weight:bold;
background-image:url("img/drugstore_menu.png");
background-position:165px 110px;
background-size:170px;
}

input.hospital{
color:rgb(0,0,0);
font-size:20px;
font-weight:bold;
background-image:url("img/hospital_menu.png");
background-position:165px 110px;
background-size:170px;
}

input.hotel{
color:rgb(0,0,0);
font-size:20px;
font-weight:bold;
background-image:url("img/hotel_menu.png");
background-position:165px 110px;
background-size:170px;
}

input.store{
color:rgb(0,0,0);
font-size:20px;
font-weight:bold;
background-image:url("img/store_menu.png");
background-position:165px 110px;
background-size:170px;
}

input.other{
color:rgb(0,0,0);
font-size:20px;
font-weight:bold;
background-image:url("img/other_menu.png");
background-position:165px 110px;
background-size:170px;
}

/*食事ボタン*/
.meal{
  border:2px solid rgb(58, 171, 210);
  padding-top:5px;
  padding-right:15px;
  padding-bottom:5px;
  padding-left:15px;
  border-radius:5px;
  transition-duration: 0.2s;
}

.meal:hover {
color:red;
background-color: #F2F2F2;
box-shadow: 0 3px 0 rgb(28, 141, 180), 0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
border-radius:5px 5px 5px 5px;
background-position:180px 120px;
background-size:200px;
transition-duration: 0.2s;
}
.meal:active {
color: red;
background-color: #D8D8D8;
box-shadow: 0 0 0 #E6E6E6, 0 0 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(6px);
transform: translateY(6px);
transition-duration: 0.1s;
}

/*観光ボタン*/
.tourism{
  border:2px solid rgb(250,84,171);
  padding-top:5px;
  padding-right:15px;
  padding-bottom:5px;
  padding-left:15px;
  border-radius:5px;
  transition-duration: 0.2s;
}

.tourism:hover {
color:red;
background-color: #F2F2F2;
box-shadow: 0 3px 0 rgb(220,54,141), 0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
	border-radius:5px 5px 5px 5px;
	background-position:180px 120px;
	background-size:200px;
	transition-duration: 0.2s;
}
.tourism:active {
color: red;
background-color: #D8D8D8;
box-shadow: 0 0 0 #E6E6E6, 0 0 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(6px);
transform: translateY(6px);
transition-duration: 0.1s;
}

/*名所・史跡ボタン*/
.sights{
  border:2px solid rgb(15,192,55);
  padding-top:5px;
  padding-right:15px;
  padding-bottom:5px;
  padding-left:15px;
  border-radius:5px;
  transition-duration: 0.2s;
}

.sights:hover {
color:red;
background-color: #F2F2F2;
box-shadow: 0 3px 0 rgb(0,162,25), 0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
	border-radius:5px 5px 5px 5px;
	background-position:180px 120px;
	background-size:200px;
	transition-duration: 0.2s;
}
.sights:active {
color: red;
background-color: #D8D8D8;
box-shadow: 0 0 0 #E6E6E6, 0 0 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(6px);
transform: translateY(6px);
transition-duration: 0.1s;
}

/*温泉ボタン*/
.hotspring{
  border:2px solid rgb(171,62,194);
  padding-top:5px;
  padding-right:15px;
  padding-bottom:5px;
  padding-left:15px;
  border-radius:5px;
  transition-duration: 0.2s;
}

.hotspring:hover {
color:red;
background-color: #F2F2F2;
box-shadow: 0 3px 0 rgb(141,32,164), 0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
	border-radius:5px 5px 5px 5px;
	background-position:180px 120px;
	background-size:200px;
	transition-duration: 0.2s;
}
.hotspring:active {
color: red;
background-color: #D8D8D8;
box-shadow: 0 0 0 #E6E6E6, 0 0 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(6px);
transform: translateY(6px);
transition-duration: 0.1s;
}
/*駅ボタン*/
.station{
  border:2px solid rgb(75,75,75);
  padding-top:5px;
  padding-right:15px;
  padding-bottom:5px;
  padding-left:15px;
  border-radius:5px;
  transition-duration: 0.2s;
}

.station:hover {
color:red;
background-color: #F2F2F2;
box-shadow: 0 3px 0  rgb(45,45,45), 0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
	border-radius:5px 5px 5px 5px;
	background-position:180px 120px;
	background-size:200px;
	transition-duration: 0.2s;
}
.station:active {
color: red;
background-color: #D8D8D8;
box-shadow: 0 0 0 #E6E6E6, 0 0 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(6px);
transform: translateY(6px);
transition-duration: 0.1s;
}

/*酒場ボタン*/
.bar{
  border:2px solid rgb(255,172,0);
  padding-top:5px;
  padding-right:15px;
  padding-bottom:5px;
  padding-left:15px;
  border-radius:5px;
  transition-duration: 0.2s;
}

.bar:hover {
color:red;
background-color: #F2F2F2;
box-shadow: 0 3px 0 rgb(225,142,0), 0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
	border-radius:5px 5px 5px 5px;
	background-position:180px 120px;
	background-size:200px;
	transition-duration: 0.2s;
}
.bar:active {
color: red;
background-color: #D8D8D8;
box-shadow: 0 0 0 #E6E6E6, 0 0 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(6px);
transform: translateY(6px);
transition-duration: 0.1s;
}

/*福祉施設ボタン*/
.carehome{
  border:2px solid rgb(140,70,0);
  padding-top:5px;
  padding-right:15px;
  padding-bottom:5px;
  padding-left:15px;
  border-radius:5px;
  transition-duration: 0.2s;
}

.carehome:hover {
color:red;
background-color: #F2F2F2;
box-shadow: 0 3px 0 rgb(110,40,0), 0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
	border-radius:5px 5px 5px 5px;
	background-position:180px 120px;
	background-size:200px;
	transition-duration: 0.2s;
}
.carehome:active {
color: red;
background-color: #D8D8D8;
box-shadow: 0 0 0 #E6E6E6, 0 0 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(6px);
transform: translateY(6px);
transition-duration: 0.1s;
}

/*薬局ボタン*/
.drugstore{
  border:2px solid rgb(255,120,0);
  padding-top:5px;
  padding-right:15px;
  padding-bottom:5px;
  padding-left:15px;
  border-radius:5px;
  transition-duration: 0.2s;
}

.drugstore:hover {
color:red;
background-color: #F2F2F2;
box-shadow: 0 3px 0 rgb(225,90,0), 0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
	border-radius:5px 5px 5px 5px;
	background-position:180px 120px;
	background-size:200px;
	transition-duration: 0.2s;
}
.drugstore:active {
color: red;
background-color: #D8D8D8;
box-shadow: 0 0 0 #E6E6E6, 0 0 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(6px);
transform: translateY(6px);
transition-duration: 0.1s;
}

/*病院ボタン*/
.hospital{
  border:2px solid rgb(223,86,86);
  padding-top:5px;
  padding-right:15px;
  padding-bottom:5px;
  padding-left:15px;
  border-radius:5px;
  transition-duration: 0.2s;
}

.hospital:hover {
color:red;
background-color: #F2F2F2;
box-shadow: 0 3px 0 rgb(193,56,56), 0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
	border-radius:5px 5px 5px 5px;
	background-position:180px 120px;
	background-size:200px;
	transition-duration: 0.2s;
}
.hospital:active {
color: red;
background-color: #D8D8D8;
box-shadow: 0 0 0 #E6E6E6, 0 0 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(6px);
transform: translateY(6px);
transition-duration: 0.1s;
}

/*宿泊施設ボタン*/
.hotel{
  border:2px solid rgb(0,0,120);
  padding-top:5px;
  padding-right:15px;
  padding-bottom:5px;
  padding-left:15px;
  border-radius:5px;
  transition-duration: 0.2s;
}

.hotel:hover {
color:red;
background-color: #F2F2F2;
box-shadow: 0 3px 0 rgb(0,0,90), 0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
	border-radius:5px 5px 5px 5px;
	background-position:180px 120px;
	background-size:200px;
	transition-duration: 0.2s;
}
.hotel:active {
color: red;
background-color: #D8D8D8;
box-shadow: 0 0 0 #E6E6E6, 0 0 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(6px);
transform: translateY(6px);
transition-duration: 0.1s;
}

/*コンビニボタン*/
.store{
  border:2px solid rgb(0,128,128);
  padding-top:5px;
  padding-right:15px;
  padding-bottom:5px;
  padding-left:15px;
  border-radius:5px;
  transition-duration: 0.2s;
}

.store:hover {
color:red;
background-color: #F2F2F2;
box-shadow: 0 3px 0 rgb(0,98,98), 0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
	border-radius:5px 5px 5px 5px;
	background-position:180px 120px;
	background-size:200px;
	transition-duration: 0.2s;
}
.store:active {
color: red;
background-color: #D8D8D8;
box-shadow: 0 0 0 #E6E6E6, 0 0 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(6px);
transform: translateY(6px);
transition-duration: 0.1s;
}

/*その他ボタン*/
.other{
  border:2px solid rgb(0,120,100);
  padding-top:5px;
  padding-right:15px;
  padding-bottom:5px;
  padding-left:15px;
  border-radius:5px;
  transition-duration: 0.2s;
}

.other:hover {
color:red;
background-color: #F2F2F2;
box-shadow: 0 3px 0 rgb(0,90,70), 0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
	border-radius:5px 5px 5px 5px;
	background-position:180px 120px;
	background-size:200px;
	transition-duration: 0.2s;
}
.other:active {
color: red;
background-color: #D8D8D8;
box-shadow: 0 0 0 #E6E6E6, 0 0 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(6px);
transform: translateY(6px);
transition-duration: 0.1s;
}

.map_button{
  display:flex;
  }

.map_button_left{
  padding:35px;
  }

.map_button_right{
  padding:35px;
  padding-right:5px;
  }

.back{
  bottom: 10px;
  left: 43px;
  color:rgb(0,0,0);
  font-size:20px;
  font-weight:bold;
  background-image:url("img/back_menu.png");
  background-repeat:no-repeat;
  background-position:60px 10px;
  background-size:80px;
  background-color: #ffffff;
  }






@media screen and (max-width:767px){
    #map {
      height: 600px;
      width:auto;
      margin:30px;
      border-top:2px solid #bbbbbb;
      border-right:2px solid #5d5d5d;
      border-bottom:2px solid #5d5d5d;
      border-left:2px solid #bbbbbb;
      border-radius:5px;
    }

    .map_all{
      display:block;
      position:relative;
      width: 100%;
      background-image: linear-gradient(-45deg, rgba(246, 255, 0, .6), rgba(255, 0, 161, .6)),url("img/tsutsuzi.jpg");
      max-width:1300px;
      border-radius:10px;
      border-top:5px solid rgba(255, 0, 161, .8);
      border-right:5px solid rgba(246, 255, 0, .8);
      border-bottom:5px solid rgba(246, 255, 0, .8);
      border-left:5px solid rgba(255, 0, 161, .8);
      box-shadow:5px 5px 5px #4d4d4d;
      height:unset;
      }

    #title{
        position:relative;
          }

    .box{
        padding: 40px;
        font-weight: bold;
        background-image: url(img/bnr_sightseeing.png);
        background-size:contain;
        background-repeat: no-repeat;
        background-position: center;
        }

    .box2{
        padding: 2px;
         font-weight: bold;
        border: solid 1px #000000;
         width:auto;
        margin-top:-10px;
        }

    .map_result{
         border:2px solid red;
         background:#ffffff;
         margin-top:30px;
         margin-left: 5px;
         width: 95%;
         order: 4;
         }

    .map_button_left{
         padding:0;
         }
    
    .map_button_right{
        padding:0;
        padding-right:0;
        }

    input{
        display:block;
         margin-top:15px;
         width:160px;
        height:50px
        }

    .back{
        bottom: 10px;
        left: 43px;
        text-decoration: none;
        width: 122px;
        height: 120px;
        line-height: 120px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: inset 0px 3px 0 rgba(255,255,255,0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
        border-bottom: solid 3px #549fa9;
        transition: .4s;
        background-image:url("img/back_menu.png");
        background-size:contain;
        background-repeat: no-repeat;
        background-position: center;
        order:5;
        background-color: #ffffff;
        margin-top:10px;
        margin-left:10px;
         }
    
    .map_right{
        width:100%;
        display:flex;
        flex-flow:wrap;
        justify-content: center;
         }

    .map_button {
        flex-wrap: wrap;
        display:flex;
        }

    .meal,.tourism,.hotspring,.station,.carehome,.store,.bar,.sights,.hotel,.hospital,.drugstore,.other{
        float:left;
         width:33.3333%;
        }

    input.meal{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/meal_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.tourism{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/tourism_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.sights{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/sights_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }

    input.hotspring{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/hotspring_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.station{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/station_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }

    input.bar{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/bar_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.carehome{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/carehome_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.drugstore{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/drugstore_menu.png");
        background-position:165px 110px;
        background-size:170px;
       }
          
    input.hospital{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/hospital_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.hotel{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/hotel_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.store{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/store_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.other{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/other_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }

    .destination{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .price{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .distance{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .time{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .tel{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .hour{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .holiday{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .info{font-weight:normal;
        height:6.5%;
        padding:10px;
        align-items: center;}

  }
  
  @media screen and (min-width:768px){
    #map {
      height: 600px;
      width:auto;
      margin:30px;
      border-top:2px solid #bbbbbb;
      border-right:2px solid #5d5d5d;
      border-bottom:2px solid #5d5d5d;
      border-left:2px solid #bbbbbb;
      border-radius:5px;
    }

    .map_all{
      display:block;
      position:relative;
      width: 100%;
      background-image: linear-gradient(-45deg, rgba(246, 255, 0, .6), rgba(255, 0, 161, .6)),url("img/tsutsuzi.jpg");
      max-width:1300px;
      border-radius:10px;
      border-top:5px solid rgba(255, 0, 161, .8);
      border-right:5px solid rgba(246, 255, 0, .8);
      border-bottom:5px solid rgba(246, 255, 0, .8);
      border-left:5px solid rgba(255, 0, 161, .8);
      box-shadow:5px 5px 5px #4d4d4d;
      height:unset;
      }

    #title{
        position:relative;
          }

    .box{
        padding: 60px;
        font-weight: bold;
        background-image: url(img/bnr_sightseeing.png);
        background-size:contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .box2{
        padding: 2px;
        font-weight: bold;
        border: solid 1px #000000;
        width:auto;
        margin:auto;
        }

    .map_result{
         border:2px solid red;
         background:#ffffff;
         margin-top:30px;
         margin-left: 5px;
         width: 100%;
         order: 4;
         }

    .map_button_left{
         padding:0;
         width:50%;
         }
    
    .map_button_right{
        padding:0;
        width:50%
        }

    input{
        display:block;
         margin-top:15px;
         width:160px;
        height:50px
        }

    .back{
        bottom: 10px;
        left: 43px;
        text-decoration: none;
        width: 122px;
        height: 120px;
        line-height: 120px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: inset 0px 3px 0 rgba(255,255,255,0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
        border-bottom: solid 3px #549fa9;
        transition: .4s;
        background-image:url("img/back_menu.png");
        background-size:contain;
        background-repeat: no-repeat;
        background-position: center;
        order:5;
        background-color: #ffffff;
        margin-top:10px;
        margin-left:10px;
         }
    
    .map_right{
         width:100%;
        display:flex;
        flex-flow:wrap;
        justify-content: center;
         }

    .map_button {
        flex-wrap: wrap;
        display:flex;
        }

    .meal,.tourism,.hotspring,.station,.carehome,.store,.bar,.sights,.hotel,.hospital,.drugstore,.other{
        float:left;
         width:33.3333%;
        }

    input.meal{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/meal_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.tourism{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/tourism_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.sights{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/sights_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }

    input.hotspring{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/hotspring_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.station{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/station_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }

    input.bar{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/bar_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.carehome{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/carehome_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.drugstore{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/drugstore_menu.png");
        background-position:165px 110px;
        background-size:170px;
       }
          
    input.hospital{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/hospital_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.hotel{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/hotel_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.store{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/store_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }
          
    input.other{
        color:rgb(0,0,0);
        font-size:small;
        font-weight:bold;
        background-image:url("img/other_menu.png");
        background-position:165px 110px;
        background-size:170px;
      }

    .destination{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .price{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .distance{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .time{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .tel{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .hour{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .holiday{
        font-weight:normal;
        border-bottom:2px dotted #4d4d4d;
        height:6.5%;
        padding:10px;
        align-items: center;}
        
    .info{font-weight:normal;
        height:6.5%;
        padding:10px;
        align-items: center;}
  }
  
    


@media screen and (min-width: 1200px) {
    #map {
        height: 60%;
        width:70%;
        margin:45px;
        border-top:2px solid #bbbbbb;
        border-right:2px solid #5d5d5d;
        border-bottom:2px solid #5d5d5d;
        border-left:2px solid #bbbbbb;
        border-radius:5px;
      }
      
      
    .box{
        position: absolute;
        top:0;
        left:0;
        padding: 40px;
        height:5%;
        width:100%;
        background-image: url(img/bnr_sightseeing.png);
        background-size:contain;
        background-repeat: no-repeat;
        background-position: unset;
        margin-left:50px;
        }

    .box2{
        position:absolute;
        bottom:0;
        left:0;
        padding: 2px;
        margin-left:18%;
        font-weight: bold;
        border: solid 1px #000000;
        width:45%;
        font-size:16px;
    }

    .map_result{
        border:2px solid red;
        background:#ffffff;
        margin-top:11%;
        height:48%;
        order:unset;
    }

    .map_button{
        display:flex;
        margin-top:-4%;
        flex-wrap: unset;
    }

    .map_button_left{
        padding:15px;
        width:auto;
    }

    .map_button_right{
        padding:15px;
        width:auto;
    }

    input{
        display:block;
        margin-top:15px;
        width:180px;
        height:50px
    }

    .map_all{
        display:flex;
        background-image: linear-gradient(-45deg, rgba(246, 255, 0, .6), rgba(255, 0, 161, .6)),url("img/tsutsuzi.jpg");
        border-radius:10px;
        border-top:5px solid rgba(255, 0, 161, .8);
        border-right:5px solid rgba(246, 255, 0, .8);
        border-bottom:5px solid rgba(246, 255, 0, .8);
        border-left:5px solid rgba(255, 0, 161, .8);
        box-shadow:5px 5px 5px #4d4d4d;
        padding-top:85px;
        height:100%;
        overflow: hidden;
        max-width:1900px;
    }

    .back{
        position:absolute;
        bottom: 10px;
        left: 43px;
        text-decoration: none;
        width: 122px;
        height: 120px;
        line-height: 120px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: inset 0px 3px 0 rgba(255,255,255,0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
        border-bottom: solid 3px #549fa9;
        transition: .4s;
        background-image:url("img/back_menu.png");
        background-size:contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #ffffff;
        }

      .back:active {
        -ms-transform: translateY(1px);
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
        border-bottom: none;
      }



    .destination{
      font-weight:normal;
      border-bottom:2px dotted #4d4d4d;
      height:6%;
      padding:10px;
      align-items: center;}
      
      .price{
      font-weight:normal;
      border-bottom:2px dotted #4d4d4d;
      height:6%;
      padding:10px;
      align-items: center;}
      
      .distance{
      font-weight:normal;
      border-bottom:2px dotted #4d4d4d;
      height:6%;
      padding:10px;
      align-items: center;}
      
      .time{
      font-weight:normal;
      border-bottom:2px dotted #4d4d4d;
      height:6%;
      padding:10px;
      align-items: center;}
      
      .tel{
      font-weight:normal;
      border-bottom:2px dotted #4d4d4d;
      height:6%;
      padding:10px;
      align-items: center;}
      
      .hour{
          font-weight:normal;
          border-bottom:2px dotted #4d4d4d;
          height:7%;
          padding:10px;
          align-items: center;}
      
      .holiday{
          font-weight:normal;
          border-bottom:2px dotted #4d4d4d;
          height:7%;
          padding:10px;
          align-items: center;}
      
      .info{font-weight:normal;
          height:8%;
          padding:10px;
          align-items: center;}

      .map_right{
          width:500px;
        }

      .meal,.tourism,.hotspring,.station,.carehome,.store,.bar,.sights,.hotel,.hospital,.drugstore,.other{
          float:unset;
          width:180px;
      }

      @media screen and (min-width: 1380px) {

        .box2{
            position:absolute;
            bottom:0;
            left:0;
            padding: 2px;
            margin-left:18%;
            font-weight: bold;
            border: solid 1px #000000;
            width:45%;
            font-size:17px;
            margin-bottom:15px;
        }




}








/*共通
:hover {
background-color: #F2F2F2;
box-shadow: 0 3px 0 #A4A4A4, 0 6px 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
	border-radius:5px 5px 5px 5px;
	background-position:220px 170px;
	background-size:280px;
}
:active {
color: red;
background-color: #D8D8D8;
box-shadow: 0 0 0 #E6E6E6, 0 0 0px rgba(0,0,0,0.2);
-webkit-transform: translateY(6px);
transform: translateY(6px);
transition-duration: 0.1s;
}
*/