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

/*
 ██████  ██████  ███    ███ ███    ███  ██████  ███    ██
██      ██    ██ ████  ████ ████  ████ ██    ██ ████   ██
██      ██    ██ ██ ████ ██ ██ ████ ██ ██    ██ ██ ██  ██
██      ██    ██ ██  ██  ██ ██  ██  ██ ██    ██ ██  ██ ██
 ██████  ██████  ██      ██ ██      ██  ██████  ██   ████
*/

*{
  margin: auto;
  max-width: 758px;
}

html, body{
  font: 14px;
  color: #451E00;
}

main{
  margin-top: 120px;
}

#page_header{
  height: auto;
  background-color: #fff;
  display: block;
  width: -webkit-fill-available;
  top: 0;
  position: fixed;
  z-index: 10;
}
#logo{
  height: 45px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #2E1006;
  padding: 5px 15px;
}
#logo p{
  width:120px;
    margin:7px;
}
#logo img{
  max-width: 100%;
  height: auto;
}

.content_inner{
  margin: auto;
  padding: 0 15px;
}

.ttl01{
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: solid 1px #2E1006;
  font-size: 24px;
}

#logo > a{
  width: 138px;
  display: block;
  margin-left: 0;
}


/*
███    ███  █████  ██████
████  ████ ██   ██ ██   ██
██ ████ ██ ███████ ██████
██  ██  ██ ██   ██ ██
██      ██ ██   ██ ██
*/

#map{
  position: relative;
  margin: 10px auto;
}

#map img{
  max-width: 100%;
  height: auto;
}

.badge_status{
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 0;
  width: 100%;
  height: calc(100vw / 758 * 912);
}

.badge_status > li{
  list-style: none;
  position: absolute;
  border-radius: 22px;
  border: solid 1px rgba(255,255,255,0.8);
  width: 22px;
  height: 22px;
  background-color: #3156C6;
  text-align: center;
  line-height: 22px;
  font-size: 14px;
  color: #fff;
}

.badge_status > li::before{
  content: "空";
}

.badge_status > .used, .badge_status > .maintenance{
  background-color: #C50A29;
}

.badge_status > .used::before{
  content: "✕";
}
.badge_status > .maintenance::before{
  content: "✕";
}

#badge_bulan {
	top: calc(60% - 24px);
	left: calc(31% - 24px);
}

#badge_bintang{
  top: calc(60% - 24px);
	left: calc(44% - 24px);
}
#badge_legian{
  top: calc(32% - 24px);
	left: calc(54% - 24px);
}
#badge_ubud{
  top: calc(32% - 24px);
	left: calc(67% - 24px);
}
#badge_bunga{
  top: calc(80% - 24px);
	left: calc(77% - 24px);
}
#badge_kebun{
  top: calc(80% - 24px);
	left: calc(90% - 24px);
}
#badge_bahagia{
  top: calc(93% - 24px);
	left: calc(77% - 24px);
}
#badge_harap{
  top: calc(93% - 24px);
	left: calc(90% - 24px);
}

#map .link_area{
  position: absolute;
  margin: 0;
  padding: 0;
}

#map .link_area > li{
  z-index: 2;
  list-style: none;
  position: absolute;
}

#map .link_area > li > a{
  display: block;
  width: 100%;
  height: 100%;
}

#map .link_area > .area_gazebo {
	top: calc(100vw / 758 * 460);
	left: calc(100vw / 758 * 30);
	width: calc(100vw / 758 * 390);
	height: calc(100vw / 758 * 238);
}

#map .link_area > .area_batur {
	top: calc(100vw / 758 * 50);
	left: calc(100vw / 758 * 370);
	width: calc(100vw / 758 * 360);
	height: calc(100vw / 758 * 280);
}

#map .link_area > .area_bali {
	top: calc(100vw / 758 * 700);
	left: calc(100vw / 758 * 190);
	width: calc(100vw / 758 * 560);
	height: calc(100vw / 758 * 100);
}

#map .link_area > .area_genseirin {
  top: calc(100vw / 758 * 802);
	left: calc(100vw / 758 * 190);
	width: calc(100vw / 758 * 560);
	height: calc(100vw / 758 * 104);
}




.list_business_time{
  display: table;
  margin: auto;
  padding: 10px;
  border-radius: 6px;
  border: solid 1px #451E00;
}

.list_business_time > dt{
  font-weight: normal;
}

.list_business_time > dd{
  font-weight: bold;
  font-size: 18px;
}

.list_business_time > dd .desc{
  margin: 0;
  font-weight: normal;
  font-size: 14px;
}

/*
 ██████  ███    ██ ███████ ███████ ███    ██
██    ██ ████   ██ ██      ██      ████   ██
██    ██ ██ ██  ██ ███████ █████   ██ ██  ██
██    ██ ██  ██ ██      ██ ██      ██  ██ ██
 ██████  ██   ████ ███████ ███████ ██   ████
*/

.onsen{
  margin: 40px auto;
  padding: 20px 0;
}

.ttl_onsen{
  position: relative;
  margin-left: 49px;
  border-bottom: solid 1px #451E00;
  line-height: 1;
  font-weight: bold;
  font-size: 20px;
}

.ttl_onsen .sub_ttl{
  margin: 5px 0;
  font-size: 14px;
}

.ttl_onsen::before{
  content: "1";
  position: absolute;
  left: -49px;
  border-radius: 44px;
  width: 44px;
  height: 44px;
  background-color: #451E00;
  line-height: 48px;
  text-align: center;
  color: #fff;
}

.onsen:nth-of-type(2) .ttl_onsen::before{
  content: "2";
}
.onsen:nth-of-type(3) .ttl_onsen::before{
  content: "3";
}
.onsen:nth-of-type(4) .ttl_onsen::before{
  content: "4";
}

.detail_onsen{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  margin: 10px auto 0;
}

.thumb_onsen{
  display: inline-block;
  vertical-align: top;
  margin: 0 10px 0 0;
  padding: 0;
  line-height: 1;
}

.thumb_onsen img{
  max-width: 100%;
}

.detail_onsen > .desc{
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

.ttl_status{
  position: relative;
  margin: 10px auto 5px;
  padding-left: calc(1em + 2px);
  font-weight: bold;
  font-size: 16px;
}

.ttl_status::before{
  position: absolute;
  left: 0;
  content: "●";
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
}

.wrap_status{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}

.wrap_status > *{
  margin: 0;
}

.wrap_status > *:nth-child(2n){
  margin-left: 5px;
}

.wrap_status img{
  max-width: 100%;
}


.wrap_rest{
  background-color: #fff;
  width: 100%;
  margin-top: 10px;
  padding-bottom: 20px;
  }

  .ttl{
      background-color: #6D4537;
      color:#fff;
      text-align: center;
      padding: 15px;
      font-size: 20px;
      font-weight: bold;
      margin: 0;
  }

  .img_ttl{
    margin: 0 auto;
    display: block;
  }

  .time{
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin: 10px auto;
  }

  .time dd{
    width: 25%;
    margin: 0;
  }

  .time dt{
    width: 70%;
    margin: 0;
  }

  .business_hours{
    text-align: center;
    margin: 10px 0;
    font-weight: bold;
  }

  .ttl_congesting{
      font-size: 28px;
      font-weight: bold;
      text-align: center;
      margin: 10px;
  }

  .nowtime{
    width: 95%;
    background-color: #2E1006;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 15px;
  }

  .box_status{
    white-space: inherit;
    border-top: solid 4px #2e1006;
  }

  .wrap_bigbath{
    background-color: #fff;
    width: 100%;
    margin-top: 10px;
    padding-bottom: 20px;
    }

    .wrap_bigbath .time{
      width: 100%;

    }

    .wrap_bigbath .time dd{
      width: 45%;

    }

    .wrap_bigbath .time dt{
      width: 55%;

    }

  .box_status{
  }

  .box_status div{
    text-align: center;
  }

  .box_status span{
    display: flex;
    align-items: center;
    color: #2E1006;
    font-size: 15px;
    font-weight: bold;
    justify-content: space-around;
    box-sizing: border-box;
    width: 100%;
  }


  .class_bigbath{
    background-color: #AE9C95;
    color: #fff;
    font-weight: bold;
    margin: 10px 0;
    font-size: 21px;
    padding: 10px;
  }
  .class_bigbath02{
    background-color: #5869AC;
    color: #fff;
    font-weight: bold;
    margin: 10px 0;
    font-size: 21px;
    padding: 10px;
  }

  .box_women,.box_men  {
  width: 100%;
  }


  .box_women span,.box_men span{
    display: flex;
    justify-content: space-around;
    color: #2E1006;
    font-size: 18px;
    font-weight: bold;
    width: 100%;
  }

  .box_women .box_now,.box_men .box_now{
    padding: 0;
  }

  .box_now{
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    margin-top: 10px;
  }

  .box_now p{
    width: 100%;
   box-sizing: border-box;;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: opacity(0.2);
    margin-bottom: 20px;
  }

  .komi1 p:nth-of-type(1){
    border: solid 3px #C95656;
    filter: none;
  }

  .komi2 p:nth-of-type(2){
    border: solid 3px #C95656;
    filter: none;
  }

  .komi3 p:nth-of-type(3){
    border: solid 3px #C95656;
    filter: none;
  }

    .stat01::before{
   content:"" ;
   background-image: url(/congesting02/images/stat01.png);
   background-size: contain;
   width: 80px;
   height: 80px;
    }

    .stat02::before{
      content:"" ;
      background-image: url(/congesting02/images/stat02.png);
      background-size: contain;
      width: 80px;
      height: 80px;
       }

    .stat03::before{
      content:"" ;
      background: url(/congesting02/images/stat03.png) no-repeat center;
      background-size: contain;
      width: 80px;
      height: 80px;
     }

     .box_status span.stat04{
      justify-content: center;
       width: 100%;
       padding: 10px;
     }

     /*アンダピング*/
     .andaping_ttl {
      font-size: 20px;
      border-left: 1px solid;
      line-height: 49px;
      padding-left: 10px;
      margin-bottom: 10px;
     }
     .andaping_ttl02 {
      background-color: #5869AC;
      color: #fff;
      padding: 20px;
      text-align: center;
     }
     .andaping_ttl03 {
      font-size: 30px;
      text-align: center;
      color: #27356E;
      margin-bottom: 10px;
     }
     .andaping_ttl04 {
      background-color: #5869AC;
      text-align: center;
      color: #fff;
      margin-bottom: 10px;
      font-size: 20px;
     }
     .andaping_business_hours {
      color: #27356E;
      font-size: 18px;
      text-align: center;
      margin: 10px 0 10px;
      letter-spacing: -0.9px;
     }
     .andaping_now {
      background-color: #27356E;
      color: #fff;
      text-align: center;
      font-weight: 600;
      margin-bottom: 30px;
     }
     .mb_adj{
       margin-top: 30px;
      margin-bottom:50px;
     }


     #andaping .box_women span,#andaping .box_men span
     {
      color:#6e99ce;
     }
/*Gnavi SP*/
.congesting_gnavi_sp{
  display: flex;
  padding-left: 0;
}
.congesting_gnavi_sp > li{
  display: flex;
  flex: 1;
  padding: 5px 0;
}
.congesting_gnavi_sp > li > a{
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  position: relative;
  color: #2E1007;
  font-size: 10px;
  text-decoration: none;
  padding: 0 10px;
  border-right: solid 1px #2E1007;
  width: 100%;
  text-align: center;
  font-weight: bold;
}
.congesting_gnavi_sp > li:last-child > a{
  border-right: 0;
}
.nav_now > a:after{
  position: absolute;
  content: '';
  background: #6C4538;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 2px;
}

.hot_spring_map_section{
  margin-bottom: 20px;
  margin-top: 70px;
}
.hot_spring_map_content{
  position: relative;
}
.hot_spring_map_section .link_area{
  list-style-type: none;
  position: absolute;
  margin: 0;
  padding: 0;
  top:0;
}

.hot_spring_map_section .link_area > li {
  z-index: 2;
  list-style: none;
  position: absolute;
}
.hot_spring_map_section .link_area > li > a {
  display: block;
  width: 100%;
  height: 100%;
}

.hot_spring_map_section .hot_spring_map img{
  max-width: 100%;
  height: auto;
}
.congesting_section{
  padding: 30px 0;
  border-bottom: dashed 1px #707070;
  padding-top: 85px;
  margin-top: -55px;
}
.congesting_section:last-of-type:not(#anda_path_house.congesting_section){
  border-bottom: none;
}
.congesting_ttl{
  position: relative;
  margin-left: 55px;
  border-bottom: solid 1px #451E00;
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 10px;
  margin-bottom: 25px;
}
.congesting_ttl:before{
  position: absolute;
  left: -55px;
  width: 40px;
  height: 50px;
  background: url(/images/congesting/ico_h.png);
  content: "";
  top: 0;
  background-size: contain;
  background-repeat: no-repeat;
}
.congesting_ttl.bg_brown:before{

}
.congesting_ttl.num01:before{
  background: url(/images/congesting/ico_a.png);
  background-size: contain;
}
.congesting_ttl.num02:before{
  background: url(/images/congesting/ico_b.png);
  background-size: contain;
  color: #fff;
}
.congesting_ttl.num03:before{
  background: url(/images/congesting/ico_c.png);
  background-size: contain;
  color: #fff;
}
.congesting_ttl.num04:before{
  background: url(/images/congesting/ico_d.png);
  background-size: contain;
  color: #fff;
}
.congesting_ttl.num05:before{
  background: url(/images/congesting/ico_e.png);
  background-size: contain;
  color: #fff;
}
.congesting_ttl.num06:before{
  background: url(/images/congesting/ico_f.png);
  background-size: contain;
  color: #fff;
}
.congesting_ttl.num07:before{
  background: url(/images/congesting/ico_g.png);
  background-size: contain;
  color: #fff;
}
.congesting_ttl .congesting_ttl_sub{
  display: block;
  font-size: 14px;
}
.congesting_section img{
  max-width: 100%;
  height: auto;
  width: 100%;

}
#anda_restaurant .anda_restaurant_time{
  text-align: center;
  font-weight: bold;
  margin: 10px auto;
}

#congesting_totop{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
#congesting_totop > a{
  text-align: center;
  width:40%;
  margin:3px;
}
#congesting_totop > a img{
  text-align: center;
  width: 100%;
}

.andaping_business_hours02{
  color: #27356E;
  font-size: 18px;
  text-align: center;
  margin: 10px 0 10px;
  letter-spacing: -0.9px;
  list-style-type: none;
  padding-left: 0;
}

#anda_restaurant{
  margin-bottom: 30px;
}
.onsen.onsen01{
  margin: 0 auto;
}
.wrap_status.space_between{
  justify-content: space-between;
}
.wrap_status.center{
  justify-content: space-between;
}
.box_status.box_status01{
  border-top: 0;
}
.list_business_time.mb30{
  margin-bottom: 30px;
}
.hot_spring_map_section .link_area > .large_bath_ttl{
  top: calc(100vw / 1103 * 220);
  left: calc(100vw / 758 * 10);
  width: calc(100vw / 758 * 450);
  height: calc(100vw / 758 * 210);
}
.hot_spring_map_section .link_area > .dino_bath_ttl{
  top: calc(100vw / 465 * 220);
  left: calc(100vw / 758 * 10);
  width: calc(100vw / 758 * 450);
  height: calc(100vw / 758 * 210);
}
.hot_spring_map_section .link_area > .undapped_outdoor_bath_ttl
{
  top: calc(100vw / 758 * 550);
  left: calc(100vw / 758 * 30);
  width: calc(100vw / 758 * 350);
  height: calc(100vw / 758 * 240);
}
.hot_spring_map_section .link_area > .private_forest_bath_ttl{
  top: calc(100vw / 758 * 845);
  left: calc(100vw / 758 * 20);
  width: calc(100vw / 758 * 450);
  height: calc(100vw / 758 * 220);
}
.hot_spring_map_section .link_area > .basement_family_bath_ttl{
  top: calc(100vw / 758 * 980);
  left: calc(100vw / 758 * 330);
  width: calc(100vw / 758 * 410);
  height: calc(100vw / 758 * 220);
}
.hot_spring_map_section .link_area > .basement_half_bath_ttl{
  top: calc(100vw / 758 * 1290);
  left: calc(100vw / 758 * 20);
  width: calc(100vw / 758 * 460);
  height: calc(100vw / 758 * 200);
}
.hot_spring_map_section .link_area > .anda_path_house_ttl{
  top: calc(100vw / 758 * 1450);
  left: calc(100vw / 758 * 360);
  width: calc(100vw / 758 * 390);
  height: calc(100vw / 758 * 250);
}
.hot_spring_map_section .link_area > .gazebo_open_air_path_ttl{
  top: calc(100vw / 758 * 1760);
  left: calc(100vw / 758 * 340);
  width: calc(100vw / 758 * 410);
  height: calc(100vw / 758 * 220);
}
.congesting_section .congesting_img_center{
  text-align: center;
}
.mb_adj.mb0{
  margin-bottom: 0;
}
#large_bath .box_women span,#large_bath .box_men span, #anda_path_house .box_women span, #anda_path_house .box_men span
{
 color:#27356E;
}
#anda_path_house .class_bigbath{
  background: #451E00;
}
@media screen and (max-width: 758px){
  .box_women span, .box_men span{
    font-size: 14px;
  }
  .stat01::before, .stat02::before, .stat03::before{
    background-repeat: no-repeat;
  }
  .class_bigbath{
    font-size: 18px;
  }
}
@media screen and (max-width: 475px){
  .stat01::before, .stat02::before, .stat03::before{
    width: 50px;
    height: 50px;
  }
  .box_women span, .box_men span{
    font-size: 12px;
  }
}
@media screen and (max-width: 375px){
  .congesting_gnavi_sp > li > a{
    padding: 0 5px;
  }
  .congesting_ttl{
    font-size: 16px;
  }
  .andaping_ttl{
    line-height: 1.5em;
  }
  .andaping_business_hours01, .andaping_ttl03{
    font-size: 26px;
  }
  .andaping_business_hours{
    font-size: 14px;
  }
  .ttl01 {
    font-size: 20px;
  }
  .list_business_time > dd{
    font-size: 16px;
  }
  .stat01::before, .stat02::before, .stat03::before{
    width: 35px;
    height: 35px;
  }
  .box_women span, .box_men span{
    font-size: 10px;
  }
}

@media screen and (min-width: 759px){
  .congesting_gnavi_sp > li > a{
    font-size: 14px;
  }
  .badge_status{
    height: 912px;
  }
  #map .link_area > .area_gazebo {
  	top: 460px;
  	left: 30px;
  	width: 390px;
  	height: 238px;
  }

  #map .link_area > .area_batur {
  	top: 50px;
  	left: 370px;
  	width: 360px;
  	height: 280px;
  }

  #map .link_area > .area_bali {
  	top: 700px;
  	left: 190px;
  	width: 560px;
  	height: 100px;
  }

  #map .link_area > .area_genseirin {
    top: 802px;
  	left: 190px;
  	width: 560px;
  	height: 104px;
  }
  .hot_spring_map_section .link_area > .large_bath_ttl{
    top: 220px;
    left: 20px;
    width: 450px;
    height: 220px;
  }

  .hot_spring_map_section .link_area > .undapped_outdoor_bath_ttl{
    top: 475px;
    left: 20px;
    width: 365px;
    height: 220px;
  }
  .hot_spring_map_section .link_area > .private_forest_bath_ttl{
    top: 775px;
    left: 20px;
    width: 450px;
    height: 230px;
  }
  .hot_spring_map_section .link_area > .basement_family_bath_ttl{
    top: 990px;
    left: 20px;
    width: 450px;
    height: 210px;
  }
  .hot_spring_map_section .link_area > .basement_half_bath_ttl{
    top: 1210px;
    left: 20px;
    width: 450px;
    height: 230px;
  }
  .hot_spring_map_section .link_area > .anda_path_house_ttl{
    top: 1468px;
    left: 344px;
    width: 430px;
    height: 235px;
  }
  .hot_spring_map_section .link_area > .gazebo_open_air_path_ttl{
    top: 1790px;
    left: 316px;
    width: 450px;
    height: 235px;
   }
}





.badge_status02{
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 0;
  width: 100%;
  height: calc(100vw / 758 * 2188);
  top:0;
}

.badge_status02 > li{
  list-style: none;
  position: absolute;
  border-radius: 22px;
  border: solid 1px rgba(255,255,255,0.8);
  width: 24px;
  height: 24px;
  background-color: #3156C6;
  text-align: center;
  line-height: 26px;
  font-size: 15px;
  color: #fff;
}

.badge_status02 > li::before{
  content: "空";
}

.badge_status02 > li.public::before{
  content: "○";
}

.badge_status02 > .used, .badge_status02 > .maintenance{
  background-color: #C50A29;
}

.badge_status02 > .used::before{
  content: "✕";
}
.badge_status02 > .maintenance::before{
  content: "✕";
}

.badge_status02 > .crowded, .badge_status02 > .maintenance{
  background-color: #56C95A;
}

.badge_status02 > .crowded::before{
  content: "混";
}

.badge_status02 #badge_bulan {
	top: calc(90% - 24px);
	left: calc(53% - 24px);
}
.badge_status02 #badge_bintang{
  top: calc(90% - 24px);
	left: calc(79% - 24px);
}
.badge_status02 #badge_legian{
  top: calc(66% - 24px);
	left: calc(12% - 24px);
}
.badge_status02 #badge_ubud{
  top: calc(66% - 24px);
	left: calc(40% - 24px);
}
.badge_status02 #badge_bunga{
  top: calc(55% - 24px);
	left: calc(53% - 24px);
}
.badge_status02 #badge_kebun{
  top: calc(55% - 24px);
	left: calc(79% - 24px);
}
.badge_status02 #badge_bahagia{
  top: calc(47% - 24px);
	left: calc(12% - 24px);
}
.badge_status02 #badge_harap{
  top: calc(47% - 24px);
	left: calc(39% - 24px);
}



.badge_status02 #badge_apmen{
  top: calc(14% - 24px);
	left: calc(13% - 24px);
}
.badge_status02 #badge_apwomen{
  top: calc(14% - 24px);
	left: calc(40% - 24px);
}

.badge_status02 #badge_aura{
  top: calc(33% - 24px);
	left: calc(24% - 24px);
}

.badge_status02 #badge_dino{
  top: calc(24% - 24px);
	left: calc(22% - 24px);
}

.badge_status02 #badge_mainmen {
	top: calc(75% - 24px);
	left: calc(53% - 24px);
}
.badge_status02 #badge_mainwomen{
  top: calc(75% - 24px);
	left: calc(79% - 24px);
}




#map_02 .link_area{
  position: absolute;
  margin: 0;
  padding: 0;
}

#map_02 .link_area > li{
  z-index: 2;
  list-style: none;
  position: absolute;
}

#map_02 .link_area > li > a{
  display: block;
  width: 100%;
  height: 100%;
}

#map_02 .link_area > .area_gazebo {
	top: calc(100vw / 758 * 460);
	left: calc(100vw / 758 * 30);
	width: calc(100vw / 758 * 390);
	height: calc(100vw / 758 * 238);
}

#map_02 .link_area > .area_batur {
	top: calc(100vw / 758 * 50);
	left: calc(100vw / 758 * 370);
	width: calc(100vw / 758 * 360);
	height: calc(100vw / 758 * 280);
}

#map_02 .link_area > .area_bali {
	top: calc(100vw / 758 * 700);
	left: calc(100vw / 758 * 190);
	width: calc(100vw / 758 * 560);
	height: calc(100vw / 758 * 100);
}

#map_02 .link_area > .area_genseirin {
  top: calc(100vw / 758 * 802);
	left: calc(100vw / 758 * 190);
	width: calc(100vw / 758 * 560);
	height: calc(100vw / 758 * 104);
}
.box_status.column_1 > .box_now.komi3 p{
  width:80%;
}

#karaoke{
  padding-top: 85px;
  margin-top: -55px;
}

.karaoke_ttl{
  font-size: 24px;
  border-left:solid 1px #2D1007;
  padding-left: 10px;
}

.detail_karaoke{
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}

.detail_karaoke:not(:nth-of-type(1)){
margin-top: 30px;
}

.karaoke_detail_l{
  margin: 0;
  width: 49%;
  display: flex;
  align-items: start;
}

.karaoke_detail_r{
  margin: 0;
  width: 49%;
  display: flex;
  flex-direction: column;
  justify-content: inherit;
}

.karaoke_detail_l img{
margin: 0;
object-fit: cover;
height: 100%;
}

.karaoke_place{
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.karaoke_room{
  border: solid 1px #5869AC;
  width: 100%;
  margin: 0;
}

.karaoke_roomtxt{
  font-weight: bold;
  color: #fff;
  background-color: #5869AC;
  font-size: 14px;
  text-align: center;
  padding: 2px;
}

.karaoke_roomdetail{
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}

.karaoke_roomnow{
  font-size: 45px;
  color: #5869AC;
}

/*ipad横用*/
@media screen and (min-width: 768px){
  .badge_status02 > li {
    list-style: none;
    position: absolute;
    border-radius: 22px;
    border: solid 1px rgba(255,255,255,0.8);
    width: 30px;
    height: 30px;
    background-color: #3156C6;
    text-align: center;
    line-height: 31px;
    font-size: 20px;
    color: #fff;
  }


  .badge_status02 #badge_bulan {
  	top: calc(89% - 24px);
  	left: calc(52% - 24px);
  }
  .badge_status02 #badge_bintang{
    top: calc(89% - 24px);
  	left: calc(78% - 24px);
  }
  .badge_status02 #badge_legian{
    top: calc(65% - 24px);
  	left: calc(11% - 24px);
  }
  .badge_status02 #badge_ubud{
    top: calc(65% - 24px);
  	left: calc(39% - 24px);
  }
  .badge_status02 #badge_bunga{
    top: calc(55% - 24px);
  	left: calc(53% - 24px);
  }
  .badge_status02 #badge_kebun{
    top: calc(55% - 24px);
  	left: calc(79% - 24px);
  }
  .badge_status02 #badge_bahagia{
    top: calc(42% - 24px);
  	left: calc(11% - 24px);
  }
  .badge_status02 #badge_harap{
    top: calc(42% - 24px);
  	left: calc(38% - 24px);
  }

  .badge_status02 #badge_apmen{
    top: calc(17% - 24px);
  	left: calc(12% - 24px);
  }
  .badge_status02 #badge_apwomen{
    top: calc(17% - 24px);
  	left: calc(40% - 24px);
  }

  .badge_status02 #badge_aura{
    top: calc(29% - 24px);
  	left: calc(24% - 24px);
  }

  .badge_status02 #badge_mainmen {
  	top: calc(74% - 24px);
  	left: calc(53% - 24px);
  }
  .badge_status02 #badge_mainwomen{
    top: calc(74% - 24px);
  	left: calc(79% - 24px);
  }



}
@media screen and (min-width: 1023px){
  .badge_status02 {
      height: calc(100vw / 1024 * 2188);
  }

}
@media screen and (min-width: 1300px){
  .badge_status02 {
      height: calc(100vw / 1366 * 2188);
  }
}


/**/

.inner_hot{
  display: flex;
  justify-content: space-between;
}

.inner_hot .img{
  width: 47%;
}

.img{
  border-top: solid 5px #5390cb;
  border-right: solid 5px #5390cb;
  border-left: solid 5px #5390cb;
  border-bottom: solid 5px #5390cb;
  box-sizing: border-box;
  display: block;
  object-fit: cover;
  height: auto;
  position: relative;
  width: 100%;
}
.img::after {
  position: absolute;
  top:3%;
  left:5%;
  content: "";
  width: 6vw;
  height:6vw;
}
.img.mainte{
  border: #ffd700 5px solid;
}
.img.used{
  border: #cc2e39 5px solid;
}

.txt_box{
  color: #5390cb;
  background: #fff;
  text-align: center;
  box-sizing: border-box;
  padding: 3% 0;
  font-size: 5.5vw;
  font-weight: bold;
  line-height: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
}

.txt_box span {
  font-size: 24px;
}

.img.used{
border-top: solid 5px #6f6f6f;
border-bottom: solid 5px #6f6f6f;
border-right: solid 5px #6f6f6f;
border-left: solid 5px #6f6f6f;
}

.img.used .img{
  border-top: solid 5px #6f6f6f;
  border-right: solid 5px #6f6f6f;
  border-left: solid 5px #6f6f6f;
}

.img.used img,
.img.mainte img{
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  filter:grayscale(100%);
}

.img.used .txt_box{
  color:#cc2e39;
}
.img.mainte .txt_box{
  color:#ffd700;
}

.img .name_hot{
  position: absolute;
  width: auto;
  display: block;
  text-align: center;
  font-weight: bold;
  color: #093238;
  line-height: 1;
  padding: 4%;
  box-sizing: border-box;
  font-size: 1.5em;
  top: 3%;
  background: #ffffffb8;
  left: 12px;
}

.img .name_hot span{
  font-size: 0.6em;
}

.inner_hot .img .name_hot{
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 1em;
}