@charset "utf-8";

/* CSS Document */
html {
  background-color: #3f1a08;
}

body {
  overflow: overlay;
  max-width: 1750px;
  margin: 0 auto;
}

#container {
  overflow: hidden;
  position: relative;
  width: auto;
  /* height: calc(100vw* 9 / 16 - 60px); */
  display: flex;
  justify-content: space-between;
  background: #2e1006;
  padding: 1%;
  box-sizing: border-box;
}

#container_l {
  width: 24%;
  display: flex;
  flex-wrap: wrap;
}
#container_l .img{
  width:95%;
}
#container_r {
  width: 74%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


*[class^="wrap_hotspring"] {
  width:47%;
}

.wrap_hotspring03, .wrap_hotspring04, .wrap_hotspring06, .wrap_hotspring05 {
}

*[class^="wrap_hotspring"]>img {
  width: 100%;
  height: auto;
}

.wrap_hotspring01, .wrap_hotspring03 {

}

.wrap_hotspring02, .wrap_hotspring04 {

}

.wrap_hotspring06, .wrap_hotspring07 {

}

.wrap_hotspring05, .wrap_hotspring08 {

}

.wrap02_hotspring010 {
order: 0;
}

.wrap02_hotspring09 img, .wrap02_hotspring010 img {
  width: 100%;
  height: auto;
}

.wrap02_hotspring09 {
order: 1;
}

.cap_page {
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  margin: 5px;
}

.box_hot_l,.box_hot_r{
  border:solid 1px #fff;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  height: 49%;
}

.box_hot_l{

}

.ttl_hot{
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.5em;
  line-height: 1.5em;
  width: 100%;
  height: fit-content;
  font-weight: bold;
}

.box_hot_l .ttl_hot{
  background-color:#5869ac;
  font-size: 1.5vw;
  line-height: 1.2;
}

.box_hot_r .ttl_hot{
  background-color:#6d4537;
  font-size: 2vw;
  padding: 3%;
}

.box_hot_r{
  width: 49%;
}

.box_hot_r:nth-of-type(-n+2),.box_hot_l:first-of-type{
  margin-bottom: 2vh;
}

.ttl_hot span{
  margin-right: 1vw;
}

.box_hot_l .ttl_hot span{
  font-size: 2.5em;
}

.box_hot_r .ttl_hot span{
  font-size: 1.5em;
}

.inner_hot{
  width: 100%;
  height: max-content;
  display: flex;
  padding: 2%;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.box_hot_r .inner_hot{
  justify-content: space-between;
}


.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;
}
.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: 2vw;
  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: 90%;
    display: block;
    text-align: center;
    font-weight: bold;
    color: #000;
    line-height: 1;
    padding: 4%;
    box-sizing: border-box;
    font-size: 1.3vw;
    top: 3%;
    background: #ffffffb8;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.img .name_hot span{
  font-size: 1vw;
}

@media screen and (max-width: 1670px) {
  .wrap_hotspring02, .wrap_hotspring04 {

  }

  .wrap_hotspring06, .wrap_hotspring07 {

  }

  .wrap_hotspring05, .wrap_hotspring08 {

  }

  .wrap_hotspring03, .wrap_hotspring04, .wrap_hotspring06, .wrap_hotspring05 {

  }

  .wrap_hotspring01, .wrap_hotspring02, .wrap_hotspring07, .wrap_hotspring08 {

  }

  .wrap_hotspring05, .wrap_hotspring08 {

  }
  .wrap02_hotspring09{

  }
  .wrap02_hotspring010{

  }
}